/*
================================================================================
WEB ADORABLE 'ADDRESS' CSS - SCREEN MEDIA
================================================================================

IMPORTANT: 

ALL 'scheme' colours MUST BE UNIQUE (!)

ALL 'scheme' colours MUST be copied to the CSS Ant-build properties file (!)

See: 

    $ADDRESS_PROJECT_HOME/ant/address_css_build.properties

Do not confuse the CSS Ant build/properties files with the main application 
Ant build/properties files :-)




================================================================================
Scheme Colours - Menu Background & Borders.
IMPORTANT: These hex triplets MUST be set in the CSS Ant-build properties file.
================================================================================

#009122 blue  - ant-build property: menu.colour.person
#009122 green - ant-build property: menu.colour.company
#C43349 red   - ant-build property: menu.colour.client
#717171 grey  - ant-build property: menu.colour.dba

Note: If duller company green colour is required, try #128D2F.




================================================================================
Scheme Colours - Menu Current Item Font.
IMPORTANT: These hex triplets MUST be set in the CSS Ant-build properties file.
================================================================================

#00821E blue  - ant-build property: menu.colour.current.item.person
#00821E green - ant-build property: menu.colour.current.item.company
#BB243A red   - ant-build property: menu.colour.current.item.client
#696969 grey  - ant-build property: menu.colour.current.item.dba

Note: If duller company green colour is required, try #0F7F29




================================================================================
Scheme Colours - General Text.
IMPORTANT: These hex triplets MUST be set in the CSS Ant-build properties file.
================================================================================

#18732D blue  - ant-build property: general.text.colour.person
#18732D green - ant-build property: general.text.colour.company
#AD0019 red   - ant-build property: general.text.colour.client
#4B4A4A grey  - ant-build property: general.text.colour.dba




================================================================================
Scheme Colours - Red 'Alert' Titles.
IMPORTANT: These hex triplets MUST be set in the CSS Ant-build properties file.
================================================================================

#BB0000 red  - ant-build property: red.title.colour.person
#BB0000 red  - ant-build property: red.title.colour.company
#777777 grey - ant-build property: red.title.colour.client
#BB0000 red  - ant-build property: red.title.colour.dba

NOTE: Because 'client' colour scheme features predominantly red-based colours,
the so-called 'red titles' are shown in mid-grey. For all the other colour 
schemes (person/company/dba) red titles are set with the same red colour.




================================================================================
Common Colours - Grey Text.
================================================================================

#CCCCCC grey test - disabled menu-items + main-frame tabs (very pale)
#AAAAAA grey text - login details in header memo (pale)
#999999 grey text - links/tabs (mid pale)
#777777 grey text - content on white BG (mid)
#666666 grey text - content on yellow BG (darker)




================================================================================
Common Colours - Buttons.
================================================================================

#777777 grey - same colour is used for both text and border




================================================================================
Common Colours - Yellows (Lightest at the top)
================================================================================

#FFFFDD very pale wheat - used for 'text-input' and 'textarea' form-fields, as well as tab high-lighting

#FFFFD0 pale wheat - used to highlight 'current-selection' items on list pages

#FFFFCC wheat - web safe colour, not used (!)




================================================================================
Common Colours - Greys (Lightest at the top)
================================================================================

#EEEEEE very pale grey - used as fill for 'disabled' tab backgrounds

#EAEAEA quite pale grey - used to highlight 'visited' items on list pages

#BBBBBB pale grey - used for tab borders




================================================================================
Logo Colours - Colours that approximate the main logo colours.
- Useful for font colouring, if required.
================================================================================

#16ABD0 blue-light
#557DB8 blue-mid
#3D2A83 blue-dark

#A4CA0A green-light
#48A848 green-mid
#027C44 green-dark

#DD3387 red-light
#C14358 red-mid
#97144D red-dark

#A7A7A7 grey-light
#7A7A7A grey-mid
#393939 grey-dark

Variants:

#1EA6D2 blue-light, as used on home page titles




================================================================================
Metrics.
================================================================================

Left margin: 30px.
Menu Bar Width: 136px.
Display Frame Width: 515px + 1px left-border = 516px exc 1px right-border width.
Main Frame Width: 652px + 10px extra to allow buttons with 10px right-margins to align.




================================================================================
CSS Group Headings.
================================================================================

COMMON
DIALOGS
CURRENT LIST
SUMMARY
OTHER
LOOKUP
FORM/TABLE




================================================================================
*/




/*********************************************/
/*********************************************/
/* COMMON - Non-FORM Properties              */
/*********************************************/
/*********************************************/




/* 
 * IMAGES - All images are displayed WITHOUT borders (!)
 */
img {
    border: 0px none #FFFFFF;
}
/*
 * HEADER FRAME.
 * Note: The 'height' attribute has been set as a reference. 
 * It is not actually required.
 */
div.headerFrame {
    position: absolute;
    top: 10px;
    left: 30px;
    width: 652px;
    height: 48px;
    /*
    border: 1px solid green;
    */
}
/*
 * HEADER FRAME LOGO IMAGE.
 */
div.headerLogoImage {
    position: absolute;
    top: 0px;
    left: 0px;
}
/*
 * HEADER FRAME MEMO.
 */
div.headerMemo {
    position: absolute;
    bottom: 0px;
    left: 162px;
    width: 200px;
    height: 12px;
    font-size: 7pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #AAAAAA;
}
/*
 * HEADER FRAME OPTIONS.
 */
div.headerOptionsFrame {
    position: absolute;
    top: 0px;
    left: 190px; /* 652px main frame width - 468px this frame width + 6px extra spacing */
    width: 468px; /* 156px x 3 tabs */
}
div.headerOptionsFrame div.headerOption {
    float: left;
    top: 0px;
    width: 156px;
}
div.headerOptionsFrame div.headerOption td.text {
    vertical-align: top;
}
div.headerOptionsFrame div.headerOption td.text span {
    display: block;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #CCCCCC;
}
div.headerOptionsFrame div.headerOption td.text a {
    display: block;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    text-decoration: none;
}
div.headerOptionsFrame div.headerOption td.text a:hover {
    font-weight: bold;
}
/* 
 * MAIN TABS.
 *
 * Two tabs are displayed, designated as 'left' and 'right'. Each tab is 
 * made up of two elements: a tab image, and its overlaid text.
 *
 * Text for the 'selected' tag is set with passive 'span' divs. Text for 
 * the 'un-selected' tag is set with active anchors.
 * 
 * It is the tab images that show a tab as being either selected with solid 
 * colours, or un-selected with faded colours (!)
 *
 * There is a 6px spacing between the two tabs.
 */
div.mainTabsFrame {
    z-index: 100;
    position: absolute;
    top: 38px;
    left: 376px; /* 30px left margin + 652px main frame - 306px tabs (below) */
    width: 306px; /* 2 x 150px tabs + 6px spacing */
    height: 28px;
}
/*
 * Images must have absolute positions because two (2) images are 
 * stacked when the page loads, the second being the 'mouseover'
 * image which is set with hidden visibility, and only appears when
 * the anchor tab is hovered.
 */
div.mainTabsFrame img {
    z-index: 0;
    position: absolute;
    top: 0px;
    left: 0px;
}
div.mainTabsFrame div.tabImageLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 28px;
}
div.mainTabsFrame div.tabImageRight {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 150px;
    height: 28px;
}
div.mainTabsFrame div.tabTextLeft {
    position: absolute;
    top: 5px;
    left: 0px;
    width: 150px;
    height: 30px;
    text-align: center;
}
div.mainTabsFrame div.tabTextRight {
    position: absolute;
    top: 5px;
    right: 0px;
    width: 150px;
    height: 30px;
    text-align: center;
}
/*
 * NOTE: Font specified is Arial (not Verdana) because tab text is italicised
 * and PC displays (with default settings) don't like italics (!)
 */
div.mainTabsFrame span.colour {
    font-size: 12pt;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-style: italic;
    color: #009122;
}
/*
 * NOTE: Font specified is Arial (not Verdana) because tab text is italicised
 * and PC displays (with default settings) don't like italics (!)
 */
div.mainTabsFrame span.plain {
    display: block;
    margin-top: 1px;
    font-size: 10pt;
    font-family: Arial, sans-serif;
    font-style: italic;
    text-align: center;
    text-decoration: none;
    color: #CCCCCC;
}
/*
 * NOTE: Font specified is Arial (not Verdana) because tab text is italicised
 * and PC displays (with default settings) don't like italics (!)
 */
div.mainTabsFrame a {
    display: block;
    margin-top: 1px;
    font-size: 10pt;
    font-family: Arial, sans-serif;
    font-style: italic;
    text-align: center;
    text-decoration: none;
    color: #999999;
}
div.mainTabsFrame a:hover {
    font-weight: bold;
}
/*
 * MAIN FRAME.
 *
 * The main-frame encloses everything below the header-frame. 
 *
 * The 'notional' (visual) width of the main-frame is 652px. The 
 * child display-frame (see below) that fits within this main-frame
 * has its width set so that its right border aligns with the 652px
 * point on the main-frame.
 * 
 * The actual width of the main-frame MUST be 10px wider and 10px 
 * higher than the combination of 'menu' and 'display' frames it 
 * encloses to accommodate button frames that have 10px margins (!)
 */
div.mainFrame {
    position: absolute;
    z-index: 0;
    top: 65px;
    left: 30px;
    width: 662px; /* Do NOT mess with this - button frames align to it (!) */
    height: 512px;
}
/*
 * DISPLAY FRAME.
 * Set 'left' value same as MENU FRAME width value (!)
 * 
 * Note: Maximum width within this frame is 490 pixels, allowing
 * for a 25 pixel left margin (off the menu frame).
 */
div.displayFrame {
    position: absolute;
    top: 0px;
    left: 136px;
    width: 515px;
    height: 462px;
    border-left: none;
    border-bottom: 1px solid #009122;
    border-top: 1px solid #009122;
    border-right: 1px solid #009122;
}
/*
 * MENU FRAME.
 * Set height 40px more than display frame (above).
 */
div.menuFrame {
    float: left;
    width: 136px;
    height: 502px;
    color: #009122;
    background-color: #009122;
    border-left: 3px solid #009122;
}
div.menuFrame a {
    display: block;
    padding: 5px 10px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    color: #FFFFFF;
    background-color: #009122;
}
div.menuFrame a:hover   {
    color: #999999;
    background-color: #FFFFFF;
}
div.menuFrame a.logout {
    display: block;
    position: absolute;
    bottom: 18px;
    padding: 5px 10px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    color: #FFFFFF;
    background-color: #009122;
}
div.menuFrame a.logout:hover   {
    color: #999999;
    background-color: #FFFFFF;
}
/*
 * MENU FRAME - CURRENT ITEM.
 * NB: The text colour value here is a one-off. 
 */
div.menuFrame div.menuItemCurrent {
    padding: 6px 10px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    color: #00821E;
    background-color: #FFFFFF;
}
/*
 * MENU FRAME - DISABLED ITEM.
 */
div.menuFrame div.menuItemDisabled {
    display: block;
    padding: 5px 10px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    color: #CCCCCC;
    background-color: #009122;
}
/*
 * MENU FRAME - SPACER.
 */
div.menuFrame div.menuSpacer {
    text-decoration: none;
    font-size: 7pt;
    color: #009122;
    background-color: #009122;
}
/*
 * MEMO.
 * Usage guidelines and prompts in light grey.
 */
div.memo {
    width: 460px; /* STANDARD WIDTH */
    margin-top: 15px;
    margin-left: 25px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
}
/*
 * MEMO - INDENTED by 30px.
 * Indented usage guidelines and prompts in light grey.
 */
div.memoIndented {
    width: 400px; /* STANDARD WIDTH - 30px x 2 */
    margin-top: 15px;
    margin-left: 55px; /* Indentation = 30px */
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
}
/*
 * TITLES.
 * Frame and List Titles
 */
div.titles {
    width: 460px; /* STANDARD WIDTH */
    margin-top: 15px;
    margin-bottom: 2px;
    margin-left: 25px;
}
div.titles table {
    position: relative;
    border-collapse: collapse;
}
div.titles td {
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #18732D;
}
div.titles td.leftBlue {
    width: 224px;
    color: #18732D;
}
div.titles td.leftBlue a {
    color: #18732D;
    text-decoration: none;
}
div.titles td.leftBlue a:hover {
    font-weight: bold;
}
div.titles td.leftRed {
    width: 224px;
    color: #BB0000;
}
div.titles td.leftGrey {
    width: 224px;
    color: #666666;
}
div.titles td.leftOrange {
    width: 224px;
    color: #A67540;
}
/*
 * Width allows 20px space for a 'scroll' image to be 
 * accommodated at the far right-hand end.
 */
div.titles td.middleBlue {
    width: 210px;
    color: #18732D;
}
div.titles td.middleBlue a {
    color: #18732D;
    text-decoration: none;
}
div.titles td.middleBlue a:hover {
    font-weight: bold;
}
/*
 * Width allows 20px space for a 'scroll' image to be 
 * accommodated at the far right-hand end.
 */
div.titles td.middleGrey {
    width: 210px;
    color: #666666;
}
/*
 * Width allows 20px space for a 'scroll' image to be 
 * accommodated at the far right-hand end.
 */
div.titles td.middleRed {
    width: 210px;
    color: #BB0000;
}
/*
 * Width allows 20px space for a 'scroll' image to be 
 * accommodated at the far right-hand end.
 */
div.titles td.middleOrange {
    width: 210px;
    color: #A67540;
}
/*
 * Width is middle-width + 20px for right-alignment
 */
div.titles td.rightRed {
    width: 230px;
    color: #BB0000;
    text-align: right;
}
div.titles td.rightRed a {
    color: #BB0000;
    text-decoration: none;
}
div.titles td.rightRed a:hover {
    font-weight: bold;
}
/*
 * Width is middle-width + 20px for right-alignment
 */
div.titles td.rightGrey {
    width: 230px;
    color: #999999;
    text-align: right;
}
div.titles td.rightGrey a {
    color: #999999;
    text-decoration: none;
}
div.titles td.rightGrey a:hover {
    font-weight: bold;
}
/* 
 * TABS
 *
 * Width is mandatory because Opera needs it (!)
 * 
 * Height is needed for top-margin spacing because the list
 * element itself requires absolute positioning. The 40px height
 * results in a top-margin elquivalent of about 15px, which is 
 * the norm in this style sheet.
 *
 * Spans are used for current-selection tabs, and anchors for
 * the alternative-selection tabs (which pop up by 1 pixel).
 *
 * IMPORTANT: Proceed with extreme caution if you intend to make 
 * any changes (!)
 */
div.tabsFrame {
    position: relative;
    margin-left: 25px;
    width: 460px; /* STANDARD WIDTH */
    height: 40px;
}
/* 
 * The negative 'bottom' attribute value ensures the list frame
 * blends into (overlaps with) the bordered frame which it sit on.
 * 
 * Width is mandatory because Opera needs it (!)
 */
div.tabsFrame ul {
    position: absolute;
    bottom: -1px;
    margin: 0px;
    padding: 0px;
    width: 460px; /* STANDARD WIDTH */
}
div.tabsFrame ul li {
    display: inline;
    list-style: none;
}
div.tabsFrame ul span {
    display: block;
    float: left;
    width: 84px;
    margin-right: 4px;
    padding-top: 4px;
    padding-bottom: 6px;
    border-left: 1px solid #009122;
    border-right: 1px solid #009122;
    border-top: 1px solid #009122;
    border-bottom: 0px none #FFFFFF;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    color: #18732D;
    background-color: #FFFFFF;
}
div.tabsFrame ul a {
    display: block;
    float: left;
    width: 84px;
    margin-top: 1px;
    margin-right: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-left: 1px solid #BBBBBB;
    border-right: 1px solid #BBBBBB;
    border-top: 1px solid #BBBBBB;
    border-bottom: 0px none #FFFFFF;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    color: #888888;
    background-color: #EEEEEE;
}
div.tabsFrame ul a:hover {
    margin-top: 0px;
    padding-bottom: 5px;
    color: #666666;
    background-color: #FFFFDD;
}
div.tabsFrame span.option {
    position: absolute;
    right: 0px;
    bottom: 5px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #999999;
    /*
    width: 175px;
    text-align: right;
    vertical-align: baseline;
    */
}
div.tabsFrame span.option a {
    color: #999999;
    text-decoration: none;
}
div.tabsFrame span.option a:hover {
    font-weight: bold;
}
/*
 * BORDERED FRAME.
 * Common frame with visible border used in many JSPs.
 *
 * Note: Height is variable.
 *
 * IMPORTANT: Do NOT set 'position' attribute to 'relative' because
 * the tabs will break (!)
 *
 * IMPORTANT: You MUST use at least one <table> within this frame
 * for the border outline to display as expected (!)
 */
div.borderedFrame {
    clear: both;
    width: 460px; /* STANDARD WIDTH */
    margin-left: 25px;
    border: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #18732D;
    background-color: #FFFFFF;
}
/*
 * BORDERED FRAME - DEFAULT TABLE.
 * Table set with both top and bottom margin spacing.
 *
 * Use this table when only ONE table definition is used within a bordered
 * frame, or for the LAST table element when SEVERAL table elements are defined
 * within a bordered frame. See DBA user-contact details JSP as an example where
 * multiple tables are defined.
 *
 * Note: Field labels or references should employ either "td.rightAlign" or
 * "td.leftAlign" definitions to control the behaviour of <TD> contents within
 * these tables. See the <TD> definitions in the FORM field references below.
 *
 * Note: The 'border-spacing' attribute increases the VERTICAL spacing between
 * table cells. Horizontal spacing is not affected.
 */
div.borderedFrame table {
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 20px;
    margin-right: 20px;
    border-spacing: 0pt 2pt;
}
/*
 * BORDERED FRAME - TABLE-DETAIL FOR TITLES.
 *
 * This width restriction is needed for Safari, which does not respect
 * enclosing DIV widths when it comes to rendering table-detail (TD)
 * elements.
 */
div.borderedFrame td.optionsTitle {
    width: 410px; /* STANDARD WIDTH - Adjusted for left and right margins (!) */
}
/*
 * BORDERED FRAME - INTERMEDIATE TABLE.
 * Table set with top margin spacing only.
 *
 * Use this table when SEVERAL table definitions are required within a bordered
 * frame. Use a default table (above) for the LAST table in the set, to ensure
 * the visible bottom border is correctly spaced apart from the table contents.
 * See DBA user-contact details JSP (dbaAccountUserContactHome) as an example
 * where multiple tables are defined.
 *
 * Note: Field labels or references should employ either "td.rightAlign" or
 * "td.leftAlign" definitions to control the behaviour of <TD> contents within
 * these tables. See the <TD> definitions in the FORM field references below.
 *
 * Note: The 'border-spacing' attribute increases the VERTICAL spacing between
 * table cells. Horizontal spacing is not affected.
 */
div.borderedFrame table.topMarginOnly {
    margin-top: 15px;
    margin-bottom: 0px;
    margin-left: 20px;
    margin-right: 20px;
    border-spacing: 0pt 2pt;
}
/*
 * BORDERED FRAME - SHARED-ADDRESS TABLE.
 * Holds static address display when a new person record is set to share an
 * existing address.
 */
div.borderedFrame table.sharedAddress {
    position: relative;
    border-collapse: collapse;
}
div.borderedFrame table.sharedAddress td {
    width: 320px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #999999;
}
/*
 * BORDERED FRAME - VERTICAL SPACERS.
 * Used to 'brace' the otherwise flexible height of a bordered frame when a
 * floating button frame needs to be inserted WITHIN the bordered frame itself.
 * For an example, see the 'Share Address' button in PersonNewFull2JSP. Without
 * this 'spacer' the button would be uncomfortably close to the last widget.
 *
 * Note: Digits indicate 'height' in pixels.
 */
div.borderedFrame div.spacer10 {
    width: 0px;
    height: 10px;
}
div.borderedFrame div.spacer15 {
    width: 0px;
    height: 15px;
}




/*********************************************/
/*********************************************/
/* DIALOGS                                   */
/*********************************************/
/*********************************************/




/*
 * DIALOG.
 */
div.dialogFrame {
    position: relative;
    width: 410px; /* DIALOG WIDTH */
    height: 240px;
    margin-top: 100px;
    margin-left: 50px;
    border: 2px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFFF;
    /*
    */
}
div.dialogTitle {
    width: 370px;
    margin-top: 15px;
    margin-left: 20px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
}
div.dialogTitle a {
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    text-decoration: none;
}
div.dialogTitle a:hover {
    cursor: default;
}
div.dialogDecor {
    width: 370px;
    height: 15px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid #009122;
}
div.dialogMessage {
    width: 370px;
    margin-top: 10px;
    margin-left: 20px;
}
div.dialogList {
    position: relative;
    overflow: auto;
    width: 364px;
    height: 148px;
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 15px;
    border: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
    /*
    */
}
/*
 * This style is ONLY used for double-column look-up 
 * dialog displays, and it represents the LEFT (first)
 * column.
 */
div.dialogList td.name {
    width: 184px;
    padding-top: 3px;
    padding-bottom: 0px;
    padding-left: 4px;
}
/*
 * This style is used for BOTH single and double-column 
 * look-up dialog displays. For double-column displays 
 * it represents the RIGHT (second) column.
 *
 * IMPORTANT: Do NOT specify a width for this style (!)
 */
div.dialogList td.detail {
    padding-top: 3px;
    padding-bottom: 0px;
    padding-left: 4px;
}
div.dialogList td a {
    text-decoration: none;
    color: #777777;
}
div.dialogList td a:hover {
    font-weight: bold;
}
/*
 * Centred activity icon.
 */
div.dialogFrameBusyIcon {
    margin-top: 50px;
    text-align: center;
}
/*
 * Frame to position a top-right white-on-blue type button.
 */
div.dialogOptionButtonFrame {
    position: absolute;
    z-index: 100;
    top: 10px;
    right: 20px;
}
/*
 * PROGRESS-DIALOG
 */
div.progressFrame {
    position: relative;
    width: 410px; /* DIALOG WIDTH */
    height: 110px;
    margin-top: 100px;
    margin-left: 50px;
    border: 2px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFFF;
}
div.progressBar {
    width: 330px;
    height: 20px;
    margin-top: 10px;
    margin-left: 20px;
    border: 1px solid #777777;
    color: #777777;
    background-color: #FFFFFF;
}
div.progressBar div.fill10 {
    width: 33px;
    height: 18px;
    margin: 1px;
    background-color: #009122;
}
div.progressBar div.fill20 {
    width: 66px;
    height: 18px;
    margin: 1px;
    background-color: #009122;
}
div.progressBar div.fill30 {
    width: 99px;
    height: 18px;
    margin: 1px;
    background-color: #009122;
}
div.progressBar div.fill40 {
    width: 132px;
    height: 18px;
    margin: 1px;
    background-color: #009122;
}
div.progressBar div.fill50 {
    width: 165px;
    height: 18px;
    margin: 1px;
    background-color: #009122;
}
div.progressBar div.fill60 {
    width: 198px;
    height: 18px;
    margin: 1px;
    background-color: #009122;
}
div.progressBar div.fill70 {
    width: 231px;
    height: 18px;
    margin: 1px;
    background-color: #009122;
}
div.progressBar div.fill80 {
    width: 264px;
    height: 18px;
    margin: 1px;
    background-color: #009122;
}
div.progressBar div.fill90 {
    width: 297px;
    height: 18px;
    margin: 1px;
    background-color: #009122;
}
div.progressBar div.fill100 {
    width: 328px;
    height: 18px;
    margin: 1px;
    background-color: #009122;
}
/*
 * SEARCH-DIALOGS.
 */
div.searchMessage {
    position: relative;
    margin-top: 25px;
    text-align: left;
    /*
    */
}
div.searchMessage table {
    margin-left: 48px;
    text-align: left;
    border-collapse: collapse;
}
div.searchMessage td.message {
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #BB0000;
}
div.searchMessage td.prompt {
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
}
div.searchMessage a {
    margin-left: 30px;
    font-size: 8pt;
    color: #777777;
    text-decoration: none;
}
div.searchMessage a:hover {
    font-weight: bold;
}
div.searchMessage td.spacer {
    font-size: 9pt;
}
div.searchInput {
    position: relative;
    margin-top: 8px;
    text-align: left;
}
div.searchInput table {
    margin-left: auto; 
    margin-right: auto; 
    text-align: left;
    border-collapse: collapse;
}
div.searchInput input.search {
    width: 300px;
    padding: 4px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFFF;
}
/*
 * LOGIN-DIALOG
 * The menu frame dimensions are the same as those for
 * the common menu frame (above).
 */
div.loginMenuFrame {
    position: absolute;
    top: 65px;
    left: 30px;
    width: 130px;
    height: 500px;
    color: #009122;
    background-color: #009122;
    border-left: 3px solid #009122;
}
div.loginDisplayFrame {
    position: absolute;
    top: 125px;
    left: 84px;
    width: 410px;
    height: 270px;
    border: 2px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFFF;
}
div.loginTable {
    margin-top: 25px;
    margin-bottom: 20px;
    margin-left: 10px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #18732D;
    background-color: #FFFFFF;
}
div.loginTable table {
    text-align: left;
    border-collapse: collapse;
}
/*
 * INPUT-DIALOG + PASSWORD-DIALOG.
 */
div.password {
    margin-top: 30px;
    margin-bottom: 20px;
    margin-left: 20px; 
}
div.password table {
    margin-left: 0px; 
    margin-right: auto; 
    text-align: left;
    border-collapse: collapse;
}
div.password input.password {
    width: 200px;
    padding: 4px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFFF;
}
/*
 * OPTIONS-DIALOG.
 */
div.optionsDialog {
    margin-top: 20px;
    text-align: center;
}
div.optionsDialog table {
    margin-left: auto; 
    margin-right: auto; 
    border-collapse: collapse;
}
/*
 * PRINT/COPY-DIALOG.
 * The menu frame and title imitate the top portion of the 
 * standard menu frame.
 * IMPORTANT: Height must be the same as the height specified
 * for the print dialog frame (below).
 */
div.printMenuFrame {
    position: absolute;
    z-index: 0;
    top: 65px;
    left: 30px;
    width: 136px;
    height: 90px;
    color: #009122;
    background-color: #009122;
    border: 1px solid #009122;
}
div.printMenuFrame div.title {
    position: absolute;
    top: 10px;
    padding: 5px 10px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    text-decoration: none;
    color: #FFFFFF;
    background-color: #009122;
}
/*
 * This frame displays the prompt and submit buttons.
 * IMPORTANT: Height must be the same as the height specified
 * for the print menu frame (above).
 */
div.printDialogFrame {
    position: absolute;
    top: 65px;
    left: 168px;
    width: 512px;
    height: 90px;
    color: #009122;
    border: 1px solid #009122;
}
/*
 * This frame holds the content to be printed.
 *
 * IMPORTANT: The 'div.printContentFrame' definition is also referenced
 * by the DialogPrintJSP page, which sets font size dynamically based on
 * client preferences. If you decide to change the NAME of this definition 
 * make sure you also change DialogPrintJSP references (!)
 */
div.printContentFrame {
    position: absolute;
    top: 180px;
    left: 34px;
    width: 646px;
    font-family: "Times New Roman", Times, serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFFF;
    /*
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    */
}
div.printContentFrame span.name {
    font-size: 1.1em;
    font-weight: bold;
}
div.printContentFrame pre {
    font-family: "Times New Roman", Times, serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFFF;
}
/*
 * COPY-DIALOG.
 * This frame holds the content to be copied.
 */
div.copyContentFrame {
    position: absolute;
    top: 180px;
    left: 34px;
    width: 646px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: 9pt;
    color: #666666;
    background-color: #FFFFFF;
}




/*********************************************/
/*********************************************/
/* CURRENT LIST                              */
/*********************************************/
/*********************************************/




/*
 * CURRENT LIST.
 *
 * NOTE: The 'overflow-x' and 'overflow-y' attributes do NOT work with Safari 1.3 
 *       which is why we specify 'overflow: auto' and then tag on 'overflow-y' for 
 *       all the other browsers that do recognise it.
 */
div.currentList {
    position: relative;
    width: 460px; /* STANDARD WIDTH */
    height: 364px;
    margin-left: 25px;
    border: 1px solid #009122;
    overflow: auto;
    overflow-x: hidden;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFFF;
}
div.currentList table {
    border-collapse: collapse;
}
div.currentList td.currentListName {
    width: 220px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    background-color: #FFFFFF;
}
div.currentList td.currentListNameCurrent {
    width: 220px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    background-color: #FFFFD0;
}
div.currentList td.currentListNameVisited {
    width: 220px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    background-color: #EAEAEA;
}
div.currentList td.currentListName a, 
                td.currentListNameCurrent a, 
                td.currentListNameVisited a {
    text-decoration: none;
    color: #777777;
}
div.currentList td.currentListName a:hover, 
                td.currentListNameCurrent a:hover, 
                td.currentListNameVisited a:hover {
    font-weight: bold;
}
div.currentList td.currentListDetail {
    width: 217px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    background-color: #FFFFFF;
}
div.currentList td.currentListDetailCurrent {
    width: 217px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    background-color: #FFFFD0;
}
div.currentList td.currentListDetailVisited {
    width: 217px;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    background-color: #EAEAEA;
}
div.currentList td.currentListDetail a, 
                td.currentListDetailCurrent a, 
                td.currentListDetailVisited a {
    text-decoration: none;
    color: #777777;
}
div.currentList td.currentListDetail a:hover, 
                td.currentListDetailCurrent a:hover, 
                td.currentListDetailVisited a:hover {
    font-weight: bold;
}
/*
 * CURRENT LIST - EMPTY DATABASE MEMO.
 */
div.currentList div.memo p {
    margin-top: 50px; 
    margin-left: 50px; 
    margin-right: 100px; 
    text-align: left;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #18732D;
}
/*
 * CURRENT LIST - TAGS.
 */
div.currentListTags {
    position: absolute;
    z-index: 200;
    bottom: 10px;
    left: 154px;
}
div.currentListTags td.text a {
    display: block;
    width: 70px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    text-decoration: none;
}
div.currentListTags td.text a:hover {
    font-weight: bold;
}
/*
 * CURRENT LIST - PAGE SCROLL BUTTONS.
 *
 * NOTE: The solitary 'span' definition (not the 'a span' definition) is for
 *       the 'disabled' dimmed/grey arrows that are set without hyperlinks.
 *
 *
 * IMPORTANT: The 'a:hover' definition below (whose function is redundant) is
 *            needed by Internet Explorer, which will NOT otherwise display 
 *            the SPAN element pop-ups (!)
 */
div.currentListPageScrollFrame {
    position: relative;
    margin-left: 25px;
    width: 460px; /* STANDARD WIDTH */
}
div.currentListPageScrollButtons {
    position: absolute;
    margin-top: -1px;
    right: -2px;
}
div.currentListPageScrollButtons a {
    display: block;
    float: right;    
    text-decoration: none;
}
div.currentListPageScrollButtons span {
    display: block;
    float: right;    
    text-decoration: none;
}
div.currentListPageScrollButtons a span {
    display: none; 
}
div.currentListPageScrollButtons a:hover {
    background-color: #FFFFFF;
}
div.currentListPageScrollButtons a:hover span {
    display: block;
    position: absolute;
    top: 5px;
    right: 90px;
    width: 200px;
    z-index: 100;
    text-align: right;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}




/*********************************************/
/*********************************************/
/* SUMMARY                                   */
/*********************************************/
/*********************************************/




/*
 * SUMMARY - NAME.
 */
div.name {
    width: 460px; /* STANDARD WIDTH */
    margin-top: 15px;
    margin-left: 25px;
}
div.name table {
    position: relative;
    border-collapse: collapse;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
}
div.name td {
    width: 280px;
    color: #18732D;
}
div.name td.grey {
    width: 280px;
    color: #666666;
}
div.name td.orange {
    width: 280px;
    color: #A67540;
}
div.name td a {
    color: #18732D;
    text-decoration: none;
}
div.name td a:hover {
    font-weight: bold;
}
div.name td.memo {
    width: 175px;
    text-align: right;
    vertical-align: baseline;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #999999;
    /*
    border: 1px solid #999999;
    */
}
div.name td.memo a {
    color: #999999;
    text-decoration: none;
}
/*
 * SUMMARY - ADDRESS.
 * Frame 'height' is set to maintain visual stability.
 * NOTE: If you reset the height to 147px for 9-line address display
 * you must also reduce the 16px margin-top values set for each of
 * the div that follow: phones, emails, website and occupation.
 */
div.address {
    width: 490px; /* MAX WIDTH - UP TO RIGHT EDGE */
    height: 133px; /* Set to 147px for 9-line address display */
    margin-top: 15px;
    margin-left: 25px;
}
div.address table {
    position: relative;
    border-collapse: collapse;
}
div.address td {
    width: 320px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #18732D;
}
div.address td a {
    color: #18732D;
    text-decoration: none;
}
div.address td a:hover {
    font-weight: bold;
}
/*
 * ADDRESS REDUCED - FOR NON-SUMMARY DISPLAYS.
 *
 * This set of definitions allows for the first four (4) lines of 
 * and address to be displayed, accompanied by a top/right-aligned 
 * submit button if required. (See PersonPhoneHomeListJSP for an 
 * example of how to use this set.) The address display is in the 
 * same top/left position as the full-address on summary pages.
 * 
 * Basically, there is an outer DIV frame that accommodates the two 
 * inner DIVs. The inner DIVS are given absolute positions, the address 
 * one being pinned to the top left, and the submit (button) one being
 * pinned to the top right.
 *
 * Frame 'height' is set to maintain visual stability.
 */
div.addressReducedFrame {
    position: relative;    
    width: 460px; /* STANDARD WIDTH */
    height: 58px;
    margin-top: 15px;
    margin-left: 25px;
}
div.addressReducedAddress {
    position: absolute;    
    width: 320px;
    top: 0px;
    left: 0px;
}
div.addressReducedAddress table {
    position: relative;
    border-collapse: collapse;
}
div.addressReducedAddress td {
    width: 320px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #18732D;
}
div.addressReducedSubmit {
    position: absolute;    
    top: 0px;
    right: 0px;
}
/*
 * SUMMARY - PHONES.
 * Frame 'height' is set to maintain visual stability.
 * NOTE: If you reset the above 'address' div height to 147px for 9-line 
 * address display, you must reduce the margin-top value set here to 15px.
 */
div.phones {
    width: 490px; /* MAX WIDTH - UP TO RIGHT EDGE */
    height: 87px;
    margin-top: 16px;
    margin-left: 25px;
}
div.phones table {
    position: relative;
    border-collapse: collapse;
}
div.phones td {
    width: 200px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #18732D;
    border-bottom-style: dotted;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
}
div.phones td a {
    color: #18732D;
    text-decoration: none;
}
div.phones td a:hover {
    font-weight: bold;
}
/*
 * SUMMARY - EMAILS.
 * Frame 'height' is set to maintain visual stability.
 * NOTE: If you reset the above 'address' div height to 147px for 9-line 
 * address display, you must reduce the margin-top value set here to 15px.
 */
div.emails {
    width: 490px; /* MAX WIDTH - UP TO RIGHT EDGE */
    height: 53px;
    margin-top: 16px;
    margin-left: 25px;
}
div.emails table {
    position: relative;
    border-collapse: collapse;
}
div.emails td {
    width: 340px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #18732D;
}
div.emails td a {
    color: #18732D;
    text-decoration: none;
}
div.emails td a:hover {
    font-weight: bold;
}
div.emails td.link {
    width: 120px;
}
div.emails td.link a {
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #999999;
    text-decoration: none;
}
div.emails td.link a:hover {
    font-weight: bold;
}
/*
 * SUMMARY - WEBSITE.
 * Frame 'height' is set to maintain visual stability.
 * NOTE: If you reset the above 'address' div height to 147px for 9-line 
 * address display, you must reduce the margin-top value set here to 15px.
 */
div.website {
    width: 490px; /* MAX WIDTH - UP TO RIGHT EDGE */
    height: 39px;
    margin-top: 16px;
    margin-left: 25px;
}
div.website table {
    position: relative;
    border-collapse: collapse;
}
div.website td {
    width: 340px;
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #18732D;
}
div.website td a {
    color: #18732D;
    text-decoration: none;
}
div.website td a:hover {
    font-weight: bold;
}
div.website td.link {
    width: 120px;
}
div.website td.link a {
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #999999;
    text-decoration: none;
}
div.website td.link a:hover {
    font-weight: bold;
}
/*
 * SUMMARY - OCCUPATION.
 * NOTE: If you reset the above 'address' div height to 147px for 9-line 
 * address display, you must reduce the margin-top value set here to 15px.
 */
div.occupation {
    width: 490px; /* MAX WIDTH - UP TO RIGHT EDGE */
    margin-top: 16px;
    margin-left: 25px;
}
div.occupation table {
    position: relative;
    border-collapse: collapse;
}
div.occupation td {
    font-size: 9pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #18732D;
}
div.occupation td a {
    color: #18732D;
    text-decoration: none;
}
div.occupation td a:hover {
    font-weight: bold;
}
/*
 * SUMMARY - Q-LINKS.
 * Light gray edit/list links that appear on 
 * the 'summary' pages. EG 'Add phone...' etc.
 */
table.qlink {
    position: relative;
    margin-top: 4px;
    border-collapse: collapse;
}
table.qlink td {
    width: 200px;
    border: none;
}
table.qlink td a {
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #999999;
    text-decoration: none;
}
table.qlink td a:hover {
    font-weight: bold;
}
/*
 * SUMMARY - PROMPT.
 */
div.prompt {
    position: absolute;
    z-index: 100;
    bottom: -1px;
    right: -1px;
    width: 145px;
    height: 52px;
    background-color: #009122;
}
div.prompt a {
    display: block;
    position: relative;
    padding: 6px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    text-decoration: none;
}
div.prompt a:hover {
    font-weight: bold;
}
div.promptEmpty {
    position: absolute;
    z-index: 100;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    background-color: #009122;
    font-size: 6pt;
}
div.promptEmpty a {
    display: block;
    position: relative;
    font-size: 6pt;
    text-decoration: none;
    color: #009122;
}
/*
 * SUMMARY - TAGS.
 */
div.tags {
    position: absolute;
    z-index: 100;
    top: 10px;
    right: 0px;
    width: 100px;
    height: 80px;
}
div.tags td a {
    display: block;
    margin-left: 4px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    text-decoration: none;
}
div.tags td a:hover {
    font-weight: bold;
}
/*
 * SUMMARY - NOTES POP-UP DIALOG.
 */
div.summaryNotesPopUpFrame {
    position: absolute;
    z-index: 200;
    top: 76px;
    left: 526px;
    width: 354px; /* Width MUST include 2 x 2px left-right borders for IE7! */
    border: none;
}
div.summaryNotesPopUpFrame div.header {
    display: block;
    position: relative;
    width: 350px;
    height: 21px;
    border: 2px solid #009122;
    background-color: #009122;
}
div.summaryNotesPopUpFrame div.header div.title {
    position: relative;
    left: 8px;
    float: left;
    color: #FFFFFF;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    line-height: 21px;
}
div.summaryNotesPopUpFrame div.header div.close {
    position: absolute;
    top: 2px;
    right: 4px;
    clear: right;
}
div.summaryNotesPopUpFrame div.header div.close a {
    display: block;
    position: relative;
    top: 2px;
    color: #FFFFFF;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: bold;
    text-decoration: none;
}
div.summaryNotesPopUpFrame div.content {
    display: block;
    position: relative;
    top: 0px;
    width: 350px;
    height: 230px;
    border: 2px solid #009122;
}
div.summaryNotesPopUpFrame div.content textarea {
    position: relative;
    border: none;
    width: 344px;
    height: 220px;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 6px;
    padding-right: 0px;
    overflow: auto;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFFF;
}
div.summaryNotesPopUpFrame div.footer {
    display: block;
    position: relative;
    top: 0px;
    width: 350px;
    height: 21px;
    border: 2px solid #009122;
    background-color: #009122;
}
div.summaryNotesPopUpFrame div.footer a {
    display: block;
    position: relative;
    float: right;
    top: 4px;
    width: 50px;
    margin-left: 10px;
    margin-right: 0px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    background-color: #009122;
    text-decoration: none;
}
div.summaryNotesPopUpFrame div.footer a:hover {
    font-weight: bold;
}
div.summaryNotesPopUpFrame div.footer img {
    display: block;
    position: relative;
    float: right;
    top: 6px;
}
div.notesShowIcon {
    position: absolute;
    right: -1px;
    top:200px;
    background: #009122;
    border: 1px solid #009122;
}
div.notesShowIcon a {
    display: block;
    position: relative;
    padding-top: 5px;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 5px;
    text-decoration: none;
}




/*********************************************/
/*********************************************/
/* NOTES                                     */
/*********************************************/
/*********************************************/




/*
 * NOTES TABBED EDIT - 290px HEIGHT.
 * A full-height notes box intended for use within 'borderedFrame' divs, 
 * usually in conjunction with tab frames.
 *
 * IMPORTANT: You MUST use at least one <table> within the enclosing 
 * 'borderedframe' div to contain this text area element, otherwise the
 * border outline will not display as expected (!)
 * 
 * Usage: PersonNotesEditPrivate
 *        PersonNotesEditPublic
 *        CompanyNotesEditPublic
 *        CompanyNotesEditPublic
 *        DbaAccountEdit2
 *        DbaAccountNew2
 *        DbaAccountUserEdit2
 *        DbaAccountUserNew2
 */
textarea.notesTabbedEdit300 {
    position: relative;
    width: 410px; /* STANDARD WIDTH - LESS 50px */
    height: 290px;
    border: 1px solid #009122;
    padding-left: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: auto;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
/*
 * NOTES TABBED READ-ONLY - 290px HEIGHT.
 * A full-height notes box intended for use within 'borderedFrame' divs, 
 * usually in conjunction with tab frames.
 *
 * IMPORTANT: The 'textarea' element must be set with the 'readonly' 
 * attribute (!)
 *
 * IMPORTANT: You MUST use at least one <table> within the enclosing 
 * 'borderedframe' div to contain this text area element, otherwise the
 * border outline will not display as expected (!)
 *
 * Usage: PersonNotesListPrivate
 *        PersonNotesListPublic
 *        CompanyNotesListPublic
 *        CompanyNotesListPublic
 *        DbaAccountSummary2
 *        DbaAccountUserSummary2
 */
textarea.notesTabbedRead300 {
    position: relative;
    width: 410px; /* STANDARD WIDTH - LESS 50px */
    height: 290px;
    border: 1px solid #009122;
    padding-left: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: auto;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFFF;
}
/*
 * NOTES PLAIN EDIT - 360px HEIGHT - NON-TABBED DISPLAY.
 * A full-height edit box for non-tabbed pages that does NOT leave any
 * space for prompt messages below it. This box does NOT specify a top 
 * margin because it is designed to accommodate a title above it.
 * 
 * Usage: ClientScrapbook
 */
textarea.notesPlainEdit360 {
    position: relative;
    width: 454px; /* STANDARD WIDTH - 6px for right padding */
    height: 360px;
    margin-left: 25px;
    border: 1px solid #009122;
    padding-left: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: auto;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
/*
 * NOTES PLAIN EDIT - 120px HEIGHT - NON-TABBED DISPLAY.
 * A short edit box for non-tabbed pages that does NOT leave any space
 * for prompt messages below it. This box does NOT specify a top margin
 * because it is designed to accommodate a title above it.
 * 
 * Usage: CompanyNew4
 */
textarea.notesPlainEdit120 {
    position: relative;
    width: 454px; /* STANDARD WIDTH - 6px for right padding */
    height: 126px;
    margin-left: 25px;
    border: 1px solid #009122;
    padding-left: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: auto;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
/*
 * NOTES PLAIN EDIT - 70px HEIGHT - NON-TABBED DISPLAY.
 * A short edit box for non-tabbed pages that does NOT leave any space
 * for prompt messages below it. This box does NOT specify a top margin
 * because it is designed to accommodate a title above it.
 * 
 * Usage: PersonNew5
 */
textarea.notesPlainEdit70 {
    position: relative;
    width: 454px; /* STANDARD WIDTH - 6px for right padding */
    height: 70px;
    margin-left: 25px;
    border: 1px solid #009122;
    padding-left: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: auto;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
/*
 * NOTES PLAIN READ-ONLY - 248px HEIGHT - NON-TABBED DISPLAY.
 * A medium read-only box for non-tabbed pages that does NOT leave any
 * space for prompt messages below it. This box does NOT specify a top
 * margin because it is designed to accommodate a title above it.
 *
 * IMPORTANT: The 'textarea' element must be set with the 'readonly' 
 * attribute (!)
 * 
 * Usage: DbaAccountLogSummary
 */
textarea.notesPlainRead248 {
    position: relative;
    width: 454px; /* STANDARD WIDTH - 6px for right padding */
    height: 248px;
    margin-left: 25px;
    border: 1px solid #009122;
    padding-left: 6px;
    padding-top: 6px;
    padding-bottom: 6px;
    overflow: auto;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFFF;
}




/*********************************************/
/*********************************************/
/* COMMON - TOOLTIP                          */
/*********************************************/
/*********************************************/




/*
 * TOOLTIP div container for tooltip messages.
 */
div.tooltip {
    display: none;
    position: absolute;
    z-index: 101;
    top: 40px;
    left: 60px;
    padding: 4px 6px;
    border: 1px solid #CCCCCC;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}




/*********************************************/
/*********************************************/
/* CONTACT & ADDRESS LISTS                   */
/*********************************************/
/*********************************************/




/*
 * CONTACT LIST. (PHONES)
 */
div.contactList {
    position: relative;
    width: 460px; /* STANDARD WIDTH */
    height: 82px;
    margin-left: 25px;
    border: 1px solid #009122;
    overflow: auto;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
div.contactList td.reference {
    width: 166px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
}
div.contactList td.reference a {
    text-decoration: none;
    color: #777777;
}
div.contactList td.reference a:hover {
    font-weight: bold;
}
div.contactList td.content {
    width: 146px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
}
div.contactList td.content a {
    text-decoration: none;
    color: #777777;
}
div.contactList td.content a:hover {
    font-weight: bold;
}
div.contactList td.solo {
    width: 460px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
}
div.contactList td.email {
    width: 312px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
}
div.contactList td.email a {
    text-decoration: none;
    color: #777777;
}
div.contactList td.email a:hover {
    font-weight: bold;
}
div.contactList td.edit {
    width: 34px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    font-size: 8pt;
    text-align: center;
}
div.contactList td.edit a {
    text-decoration: none;
    color: #777777;
}
div.contactList td.edit a:hover {
    font-weight: bold;
}
div.contactList td.delete {
    width: 50px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    font-size: 8pt;
    text-align: center;
}
div.contactList td.delete a {
    text-decoration: none;
    color: #777777;
}
div.contactList td.delete a:hover {
    font-weight: bold;
}
div.contactList td.option {
    width: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    font-size: 8pt;
    text-align: center;
}
div.contactList td.option a {
    text-decoration: none;
    color: #777777;
}
div.contactList td.option a:hover {
    font-weight: bold;
}
/*
 * ADDRESS LIST.
 */
div.addressList {
    position: relative;
    width: 460px; /* STANDARD WIDTH */
    height: 104px;
    margin-left: 25px;
    border: 1px solid #009122;
    overflow: auto;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
div.addressList td.address {
    width: 312px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
}
div.addressList td.address a {
    text-decoration: none;
    color: #777777;
}
div.addressList td.address a:hover {
    font-weight: bold;
}
div.addressList td.edit {
    width: 34px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    font-size: 8pt;
    text-align: center;
}
div.addressList td.edit a {
    text-decoration: none;
    color: #777777;
}
div.addressList td.edit a:hover {
    font-weight: bold;
}
div.addressList td.delete {
    width: 50px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    font-size: 8pt;
    text-align: center;
}
div.addressList td.delete a {
    text-decoration: none;
    color: #777777;
}
div.addressList td.delete a:hover {
    font-weight: bold;
}
div.addressList td.option {
    width: 20px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    font-size: 8pt;
    text-align: center;
}
div.addressList td.option a {
    text-decoration: none;
    color: #777777;
}
div.addressList td.option a:hover {
    font-weight: bold;
}




/*********************************************/
/*********************************************/
/* COMMON - For Tabbed Frames                */
/*********************************************/
/*********************************************/




/*
 * GENERIC TAB TITLE & LIST.
 *
 * Use these with tabbed frames.
 *
 * NOTE: TD widths allow 8px for the vertical scroll-bar. 
 * Horizontal padding must also be included when calculating
 * cumulative TD widths.
 */
div.genericTabTitleRed {
    position: relative;
    width: 418px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    margin-bottom: 2px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #BB0000;
}
div.genericTabList {
    overflow: auto;
    position: relative;
    width: 418px;
    height: 106px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
    border: 1px solid #009122;
}
div.genericTabList table {
    margin: 0px;
}
div.genericTabList td.detail {
    width: 238px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
}
div.genericTabList td.detail a {
    text-decoration: none;
    color: #777777;
}
div.genericTabList td.detail a:hover {
    font-weight: bold;
}
div.genericTabList td.option1 {
    width: 75px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    font-size: 8pt;
    text-align: center;
}
div.genericTabList td.option1 a {
    text-decoration: none;
    color: #777777;
}
div.genericTabList td.option1 a:hover {
    font-weight: bold;
}
div.genericTabList td.option2 {
    width: 75px;
    padding-top: 2px;
    padding-bottom: 2px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
    font-size: 8pt;
    text-align: center;
}
div.genericTabList td.option2 a {
    text-decoration: none;
    color: #777777;
}
div.genericTabList td.option2 a:hover {
    font-weight: bold;
}




/*********************************************/
/*********************************************/
/* LOOKUP                                    */
/*********************************************/
/*********************************************/




/*
 * LOOKUP FRAME.
 */
div.lookupFrame {
    position: relative;
    width: 460px; /* STANDARD WIDTH */
    margin-left: 25px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #A67540;
    background-color: #FFFFFF;
}
/*
 * LOOKUP MENU.
 */
div.lookupMenu {
    float: left;
    width: 210px;
    height: 344px;
    color: #BF9567;
    background-color: #BF9567;
    border-left: 3px solid #BF9567;
    border-top: 1px solid #BF9567;
    border-bottom: 1px solid #BF9567;
}
div.lookupMenu a {
    display: block;
    padding: 3px 10px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-align: left;
    text-decoration: none;
    color: #FFFFFF;
    background-color: #BF9567;
}
div.lookupMenu a:hover   {
    color: #A67540;
    background-color: #FFFFFF;
}
/*
 * LOOKUP MENU - CURRENT ITEM.
 */
div.lookupMenu div.current {
    padding: 3px 10px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-align: left;
    color: #A67540;
    background-color: #FFFFFF;
}
/*
 * LOOKUP MENU - SPACER.
 */
div.lookupMenu div.menuSpacer {
    text-decoration: none;
    font-size: 6pt;
    color: #BF9567;
    background-color: #BF9567;
}
/*
 * LOOKUP LIST.
 */
div.lookupList {
    position: absolute;
    overflow: auto;
    right: 0px;
    width: 250px;
    height: 344px;
    border-right: 1px solid #BF9567;
    border-top: 1px solid #BF9567;
    border-bottom: 1px solid #BF9567;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #A67540;
    background-color: #FFFFFF;
}
div.lookupList table {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-left: 6px;
}
div.lookupList td {
    padding-top: 3px;
    padding-bottom: 3px;
}
div.lookupList td a {
    text-decoration: none;
    color: #777777;
}
div.lookupList td a:hover {
    font-weight: bold;
}
/*
 * OCCUPATION TITLES
 */
div.occTitles {
    position: relative;
    overflow: auto;
    width: 460px; /* STANDARD WIDTH */
    height: 344px;
    margin-left: 25px;
    border: 1px solid #BF9567;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #A67540;
    background-color: #FFFFFF;
}
div.occTitles td {
    width: 214px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #D3D3D3;
    vertical-align: middle;
}
div.occTitles td a {
    text-decoration: none;
    color: #777777;
}
div.occTitles td a:hover {
    font-weight: bold;
}




/*********************************************/
/*********************************************/
/* COMMON - FORM & TABLE                     */
/*********************************************/
/*********************************************/




/*
 * TABLE-DETAIL - VERTICAL SPACERS.
 */
td.heightSpacer5 {
    height: 5px;
}
td.heightSpacer10 {
    height: 10px;
}
td.heightSpacer15 {
    height: 15px;
}
/*
 * FORM - RIGHT-ALIGNED FIELD REFERENCES (Labels).
 */
td.rightAlign {
    text-align: right;
}
td.rightAlign50 {
    width: 50px;
    text-align: right;
}
td.rightAlign100 {
    width: 100px;
    text-align: right;
}
td.rightAlignPaddedTop5 {
    padding-top: 5px;
    text-align: right;
}
td.rightAlignPaddedTop10 {
    padding-top: 10px;
    text-align: right;
}
/*
 * FORM - LEFT-ALIGNED FIELD REFERENCES (Labels).
 */
td.leftAlign {
    text-align: left;
}
td.leftAlign100 {
    width: 100px;
}
/*
 * FORM - INPUT FIELDS.
 * Digits indicate TOP padding in pixels.
 * Use these to control vertical spacing between TD elements in a table.
 */
td.formWidget2 {
    padding-top: 2px;
}
td.formWidget5 {
    padding-top: 5px;
}
td.formWidget10 {
    padding-top: 10px;
}
td.formWidgetTop {
    vertical-align: top;
}
/*
 * FORM - INPUT WIDGET: RADIO + CHECKBOX + IMAGE.
 * Digits indicate TOP margin spacing in pixels.
 */
input.widget {
    vertical-align: -4px;
}
input.widget5 {
    margin-top: 5px;
    vertical-align: -4px;
}
input.widget10 {
    margin-top: 10px;
    vertical-align: -4px;
}
/*
 * FORM - LABELS.
 * Digits indicate RIGHT margin spacing in pixels.
 */
label.widget {
    color: #18732D;
    background-color: #FFFFFF;
}
label.widget10 {
    margin-right: 10px;
    color: #18732D;
    background-color: #FFFFFF;
}
label.widget15 {
    margin-right: 15px;
    color: #18732D;
    background-color: #FFFFFF;
}
/*
 * FORM - MEMO/PROMPT.
 * Form field memo/prompt information (text) in light grey.
 * You can either place a memo/prompt string in a <TD> tag, or 
 * use the <SPAN> tag within a <TD> tag that has an <INPUT> tag:
 *
 *   <td colspan="3">
 *       <input class="text15" 
 *              type="text" 
 *              name="NAME"
 *              value="" >
 *       &nbsp;<span class="memo">day/month/year</span>
 *   </td>
 *
 */
td.memo {
    text-align: left;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #999999;
    background-color: transparent;
}
td.memoFixedWidth180 {
    width: 180px;
    text-align: left;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #999999;
    background-color: transparent;
}
/*
 * This SPAN does not vertically align its font with any preceding 
 * form INPUT element within the same table-TD element in IE6 and 
 * Opera. None of the vertical-align property settings help :-/
 * 
 * If vertical font alignment is imperative, use a 'memo' TD tag 
 * instead.
 */
span.memo {
    text-align: left;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #999999;
    background-color: transparent;
}
span.red {
    color: #BB0000;
}
/*
 * FORM - BUTTON FRAME.
 */
div.buttonFrame {
    position: absolute;
    z-index: 100;
    width: 480px;
    right: 10px;
    bottom: 10px;
}
/*
 * FORM - BUTTON FRAME INSET.
 *
 * Use this for buttons that appear WITHIN bordered frames.
 *
 * IMPORTANT: Do NOT delete the 'height' property (!)
 */
div.buttonFrameInset {
    position: relative;
    z-index: 100;
    right: 20px;
    bottom: 15px;
    height: 24px;
}
/*
 * FORM - TEXT INPUT.
 * Numbers refer to character widths - not pixels!
 */
input.text3 {
    width: 20px;
    padding: 4px;
    border-left: 1px solid #009122;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
input.text6 {
    width: 40px;
    padding: 4px;
    border-left: 1px solid #009122;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
input.text10 {
    width: 80px;
    padding: 4px;
    border-left: 1px solid #009122;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
input.text15 {
    width: 104px;
    padding: 4px;
    border-left: 1px solid #009122;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
input.text20 {
    width: 145px;
    padding: 4px;
    border-left: 1px solid #009122;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
/*
 * Read-Only variants have no borders, and font colour is 
 * set slightly lighter.
 */
input.text20ReadOnly {
    width: 145px;
    padding: 4px;
    border: none;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
input.text25 {
    width: 190px;
    padding: 4px;
    border-left: 1px solid #009122;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
input.text30 {
    width: 210px;
    padding: 4px;
    border-left: 1px solid #009122;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
/*
 * Read-Only variants have no borders, and font colour is 
 * set slightly lighter.
 */
input.text30ReadOnly {
    width: 210px;
    padding: 4px;
    border: none;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
input.text32 {
    width: 224px;
    padding: 4px;
    border-left: 1px solid #009122;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
input.text35 {
    width: 244px;
    padding: 4px;
    border-left: 1px solid #009122;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
input.text40 {
    width: 280px;
    padding: 4px;
    border-left: 1px solid #009122;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
/*
 * FORM - FILE INPUT. (File Upload)
 */
input.fileUpload {
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #666666;
    background-color: #FFFFDD;
}
/*
 * FORM - SUBMIT BUTTON: HIDDEN.
 */
input.submitHidden {
    display: none;
}
/* 
 * FORM - SUBMIT BUTTON: 100px WIDE.
 */
input.submit100 { 
    float: right;
    position: relative;
    margin-left: 5px;
    width: 100px;
    height: 24px;
    border: 1px solid #777777;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
/* 
 * FORM - SUBMIT BUTTON: 120px WIDE.
 */
input.submit120 { 
    float: right;
    position: relative;
    margin-left: 5px;
    width: 120px;
    height: 24px;
    border: 1px solid #777777;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
/* 
 * FORM - SUBMIT BUTTON: 130px WIDE.
 */
input.submit130 {
    float: right;
    position: relative;
    margin-left: 5px;
    width: 130px;
    height: 24px;
    border: 1px solid #777777;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
/* 
 * FORM - SUBMIT BUTTON: 150px WIDE.
 */
input.submit150 {
    float: right;
    position: relative;
    margin-left: 5px;
    width: 150px;
    height: 24px;
    border: 1px solid #777777;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
/* 
 * FORM - SUBMIT BUTTON: 175px WIDE.
 */
input.submit175 {
    float: right;
    position: relative;
    margin-left: 5px;
    width: 175px;
    height: 24px;
    border: 1px solid #777777;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
/* 
 * FORM - SUBMIT BUTTON: 200px WIDE.
 */
input.submit200 {
    float: right;
    position: relative;
    margin-left: 5px;
    width: 200px;
    height: 24px;
    border: 1px solid #777777;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
/* 
 * FORM - SUBMIT BUTTON: 250px WIDE.
 */
input.submit250 {
    float: right;
    position: relative;
    margin-left: 5px;
    width: 250px;
    height: 24px;
    border: 1px solid #777777;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #777777;
    background-color: #FFFFFF;
}
/* 
 * FORM - SUBMIT BUTTON: LOOKUP.
 * Integers indicate width.
 * The text-align property does not work for Mozilla (!)
 */
input.submitLookup60 {
    width: 60px;
    height: 20px;
    border: 0px solid #FFFFFF;
    text-align: left;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #999999;
    background-color: transparent;
}
/* 
 * FORM - SUBMIT BUTTON: TITLE.
 * See 'New...' buttons in contact edit list JSPs - Phone lists, etc.
 * The text-align property does not work for Mozilla (!)
 */
input.submitTitle {
    width: 120px;
    border: 0px solid #FFFFFF;
    text-align: right;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #999999;
    background-color: transparent;
}
/*
 * And this dose not work in IE (!)
 */
input.submitTitle:hover {
    font-weight: bold;
}
/* 
 * FORM - SUBMIT BUTTON:  WOB 150px WIDE.
 * This is a white-on-blue variant for solitary buttons 
 * that need to stand out.
 */
input.submitWOB150 {
    float: right;
    position: relative;
    margin-left: 5px;
    width: 150px;
    height: 24px;
    border: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    background-color: #009122;
}
/* 
 * FORM - SUBMIT BUTTON:  WOB 200px WIDE.
 * This is a white-on-blue variant for solitary buttons 
 * that need to stand out.
 */
input.submitWOB200 {
    float: right;
    position: relative;
    margin-left: 5px;
    width: 200px;
    height: 24px;
    border: 1px solid #009122;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #FFFFFF;
    background-color: #009122;
}
/* 
 * FORM - SELECT (Drop-Down Menu) - STANDARD WIDTH
 * The width of this drop-down menu corresponds to the
 * typical input fields.
 */
select.width240 {
    width: 240px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
    color: #666666;
    background-color: #FFFFDD;
}
/* 
 * FORM - SELECT (Drop-Down Menu) - EXTRA WIDE
 * The width of this drop-down menu is much wider than
 * the typical input fields.
 */
select.width310 {
    width: 310px;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: normal;
    vertical-align: middle;
    color: #666666;
    background-color: #FFFFDD;
}