/* Contents 1. Developer Notes 2. Element defaults Selectors by tag name, used for page defaults, e.g.: html, body, etc. 3. General class defaults Selectors by class name, used to apply generic styling in HTML. 4. Controls Styling for reusable control interfaces, e.g.: listbox, listtable, etc. 5. DOM Styling for specific elements essential to the general page structure. 6. Page-specific style data Styling applied to single pages. Elements are differentiated between pages by their descendance from body element that bears a globally unique @id. (See Developer Notes �2a.) */ /* Developer notes regarding naming rules and conventions used for stylesheets in this application: 1. Hierarchy a. Names symantically reflect the utility and fixed structure of elements as much as is possible or convenient. e.g.: "header", "v_sidebar" b. Classes and IDs of child elements retain abbreviated form of those used for parent elements. Whenever possible this is the single initial letter of the parent, or multiple initials for a parent element whose name contains multiple words. e.g.: "view" -> "v_header" -> "v_h_title" 2. Page Identifiers a. HTML: For each page, the root body element must also bear a globally unique identifier as its @id. See (�3a). e.g.: b. Style data specific to a single page is contained in the stylesheet in a contiguous block. Selectors must begin with reference to the body element @id. e.g.: "#sm-cm .reply"; "#sm-cm .r_radio" 3. Delimiters a. Underscore (_) separates parent abbreviations and terminal child name. b. Final inner double-underscore (__) is used to append identifiers for structural elements. e.g.: "v_sidebar__corner-nw" c. Inner hyphen (-) separates multiple words used in a single terminal child name. d. Final inner double-hyphen (--) is used to append the name of a state to a class name. Used in lieu of multiple class names for legacy support of IE6. e.g.: "h_gn_item" -> "h_gn_item--selected" 4. Misc a. Lowercase used throughout for all class and id names. b. Child names may be abbreviated to initials when dealing with inconveniently long words and only if doing so is sufficiently unique and/or descriptive. c. Root level elements may ignore convention (�1b) to avoid needless disambiguity. e.g.: "container", "header" (instead of "c_header") */ /** Element defaults */ html { } body { margin: 0; overflow-x: auto; overflow-y: scroll; background: #0d0c0a url(../images/bg_gradient.png) repeat-x; } body, input, textarea { font-size: 10pt; font-family: Verdana, Helvetica, Arial, sans-serif; } a { outline: none; text-decoration: none; } a:hover { text-decoration: underline; } p, blockquote { margin: 0 0 15px; } sup { text-decoration: none; } form { margin: 0; } input { padding: 0; } label, label input { cursor: pointer; } label input { position: relative; top: 2px; } hr { border: 0 none; height: 1px; color: #ccc; background-color: #ccc; } table, td, tr { border: none; } table { border-spacing: 0; border-collapse: collapse; } td { padding: 10px; } table.border, table.border tr, table.border td { border: 1px solid #ccc; } ol, ul { margin: 10px 0 10px 40px; padding: 0; marker-offset: 5px; } ul { list-style-type: circle; } li { padding: 5px 0 0 5px; } h1 { margin: 0 0 18px 0; } h2, h3, h4, h5, h6 { margin: 0 0 12px 0; } h1 { font-size: 11pt; color: #0086BA; font-weight: normal; } h2 { font-size: 9pt; color: #0084B9; font-weight: bold; } h3 { font-size: 9pt; color: #000; font-weight: bold; } h4 { font-size: 9pt; font-weight: bold; } h5 { font-size: 9pt; color: #0084B9; font-style: oblique; font-weight: normal; } h6 { font-size: 9pt; font-style: oblique; font-weight: normal; } select { } select option { } select option:selected { background-color: #00CC99; } textarea { resize: vertical; } /**/ /** Mixed Element/Class generic defaults */ select, input[type=text], input[type=password], textarea, input.text { border: 1px solid #6EC9ED; background: #fff; } /*select:focus, input:focus[type=text], input:focus[type=password], textarea:focus, input:focus.text, select:hover, input:hover[type=text], input:hover[type=password], textarea:hover, input:hover.text { border-color: #FF9900; }*/ select[disabled], input[type=text][disabled], input[type=password][disabled], textarea[disabled], input[disabled].text, select:hover[disabled], input:hover[type=text][disabled], input:hover[type=password][disabled], textarea:hover[disabled], input:hover[disabled].text { border: 1px solid #999; background-color: #ddd; } /**/ /** General class defaults */ .clear { clear: both; } .hidden { visibility: hidden; } .visible { visibility: visible; } .left { float: left; } .right { float: right; } .autowidth { width: auto; } .spacer-small, .spacer-medium, .spacer-large { width: 100%; display: block; height: 0 !important; margin: 0; } .spacer-small { padding: 10px; } .spacer-medium { padding: 20px; } .spacer-large { padding: 30px; } /**/ /** Controls */ .panel { } .panel * { } .panel__bg, .panel__fg { position: absolute; } .panel__bg { z-index: 0; width: 100%; height: 100%; } .panel__bg * { position: absolute; width: 12px; height: 12px; background: url(../images/panel__bg-corners.png) no-repeat; } .panel__bg-nw { left: 0; top: 0; background-position: 0px 0px; } .panel__bg-n { left: 12px; top: 0; /* override width */ background: url(../images/panel__bg-ns.png) repeat-x; } .panel__bg-ne { right: 0; top: 0; background-position: 0px 0px; } .panel__bg-w { left: 0; top: 12px; /* override height */ background: url(../images/panel__bg-we.png) repeat-y; } .panel__bg-center { /* override width */ /* override height */ background: url(../images/panel__bg-center.png) repeat-y; } .panel__bg-e { right: 0; top: 12px; /* override height */ background: url(../images/panel__bg-we.png) repeat-y; } .panel__bg-sw { left: 0; bottom: 0; background-position: 0px 0px; } .panel__bg-s { left: 12px; bottom: 0; /* override width */ background: url(../images/panel__bg-ns.png) repeat-x; } .panel__bg-se { right: 0; bottom: 0; background-position: 0px 0px; } .panel__fg { z-index: 1; margin: 12px; } .panel__fg * { } .listbox { width: 200px; height: 400px; font-size: 0; } .listbox * { position: absolute; } .listbox__bg { width: 100%; height: 100%; } .listbox__bg * { position: absolute; width: 12px; height: 191px; background: url(../images/listbox__bg-corners.png) no-repeat; } .listbox__bg-nw { left: 0; top: 0; background-position: left top; } .listbox__bg-n { left: 12px; top: 0; width: 176px; /* override width */ background: url(../images/listbox__bg-ns.png) repeat-x center top; } .listbox__bg-ne { right: 0; top: 0; background-position: right top; } .listbox__bg-w { left: 0; top: 191px; height: 18px; /* override height */ background: url(../images/listbox__bg-we.png) repeat-y left center; } .listbox__bg-center { left: 12px; top: 191px; width: 176px; /* override width */ height: 18px; /* override height */ background: url(../images/listbox__bg-center.png) repeat; } .listbox__bg-e { right: 0; top: 191px; height: 18px; /* override height */ background: url(../images/listbox__bg-we.png) repeat-y right center; } .listbox__bg-sw { left: 0; bottom: 0; background-position: left bottom; } .listbox__bg-s { left: 12px; bottom: 0; width: 176px; /* override width */ background: url(../images/listbox__bg-ns.png) repeat-x center bottom; } .listbox__bg-se { right: 0; bottom: 0; background-position: right bottom; } .lb_header { left: 7px; top: 7px; width: 186px; height: 42px; } .lb_header a { text-decoration: none !important; color: #fff !important; } .lb_header__bg, .lb_header__fg { } .lb_header__bg { width: 100%; height: 100%; } .lb_header__bg_tab { width: 32px; height: 42px; } .lb_header__bg_tab * { width: 16px; height: 42px; background: url(../images/header-tab_shadow__sides.png) no-repeat; } .lb_header__bg_tab__left { } .lb_header__bg_tab__center { left: 16px; width: 0; background: url(../images/header-tab_shadow__center.png) repeat-x; } .lb_header__bg_tab__right { right: 0; background-position: -16px 0; } .lb_header__fg { left: 7px; top: 7px; width: 174px; height: 28px; } .lb_h_tab, .lb_h_tab--selected { width: 32px; height: 100%; cursor: pointer; } .lb_h_tab__bg { width: 100%; height: 100%; } .lb_h_tab__bg * { width: 16px; height: 100%; } .lb_h_tab .lb_h_tab__bg * { background: url(../images/header-tab--gray__sides.png) no-repeat; } .lb_h_tab--selected .lb_h_tab__bg * { background: url(../images/header-tab__sides.png) no-repeat; } .lb_h_tab__bg .lb_h_tab__bg-left { } .lb_h_tab__bg .lb_h_tab__bg-center { left: 16px; width: 0; background: url(../images/header-tab--gray__center.png) repeat-x; } .lb_h_tab--selected .lb_h_tab__bg .lb_h_tab__bg-center { background: url(../images/header-tab__center.png) repeat-x; } .lb_h_tab__bg .lb_h_tab__bg-right { right: 0; background-position: -16px 0; } .lb_h_tab__fg { width: 100%; height: 100%; } .lb_h_tab_caption { width: 100%; padding: 1ex 0; text-align: center; } .lb_list { overflow-x: hidden; overflow-y: auto; left: 14px; top: 41px; width: 172px; height: 324px; padding: 4px 0; background: #fff; border: #918b86 1px solid; cursor: default; } .lb_list div { /* hide all divs underneath of the list by default */ visibility: hidden; } .lb_l_item, .lb_l_item--selected, .lb_l_item *, .lb_l_item--selected * { visibility: visible !important; /* once the proper class is assigned, then show this block */ } .lb_l_item, .lb_l_item--selected { cursor: pointer; position: relative; margin: 0; padding: 3px 8px; background: none; color: #000; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 8pt; background: url(../images/select_option__bg.gif) repeat-x; white-space: nowrap; } .lb_l_item--selected { background: #cdecf8; font-weight: bold; } .lb_footer { bottom: 0; margin: 4px; } .listtable { width: 400px; height: 400px; } .listtable * { position: absolute; } .listtable__bg { width: 100%; height: 100%; } .listtable__bg * { position: absolute; width: 12px; height: 191px; background: url(../images/listbox__bg-corners.png) no-repeat; } .listtable__bg-nw { left: 0; top: 0; background-position: left top; } .listtable__bg-n { left: 12px; top: 0; /* override */ width: 376px; background: url(../images/listbox__bg-ns.png) repeat-x center top; } .listtable__bg-ne { right: 0; top: 0; background-position: right top; } .listtable__bg-w { left: 0; top: 191px; /* override */ height: 18px; background: url(../images/listbox__bg-we.png) repeat-y left center; } .listtable__bg-center { left: 12px; top: 191px; /* override */ width: 376px; /* override */ height: 18px; background: url(../images/listbox__bg-center.png) repeat; } .listtable__bg-e { right: 0; top: 191px; /* override */ height: 18px; background: url(../images/listbox__bg-we.png) repeat-y right center; } .listtable__bg-sw { left: 0; bottom: 0; background-position: left bottom; } .listtable__bg-s { left: 12px; bottom: 0; /* override */ width: 376px; background: url(../images/listbox__bg-ns.png) repeat-x center bottom; } .listtable__bg-se { right: 0; bottom: 0; background-position: right bottom; } .listtable__bg * { position: absolute; } .listtable__bg-nw { } .listtable__bg-n { } .listtable__bg-ne { } .listtable__bg-w { } .listtable__bg-center { } .listtable__bg-e { } .listtable__bg-sw { } .listtable__bg-s { } .listtable__bg-se { } .listtable .cells { font-size: 0; } .listtable .cells * { display: inline-block; width: 100px; height: 100%; margin: 0 8px; } .lt_header { left: 7px; top: 7px; width: 388px; height: 42px; } .lt_header * { } .lt_header__bg { width: 100%; height: 100%; } .lt_header__bg_tab { width: 32px; height: 42px; } .lt_header__bg_tab * { width: 16px; height: 42px; background: url(../images/header-tab_shadow__sides.png) no-repeat; } .lt_header__bg_tab__left { } .lt_header__bg_tab__center { left: 16px; /* override width */ width: 0; background: url(../images/header-tab_shadow__center.png) repeat-x; } .lt_header__bg_tab__right { right: 0; background-position: -16px 0; } .lt_header__fg { left: 7px; top: 7px; width: 374px; height: 28px; } .lt_h_tab, .lt_h_tab--selected { width: 32px; height: 100%; cursor: pointer; } .lt_h_tab__bg { width: 100%; height: 100%; } .lt_h_tab__bg * { width: 16px; height: 100%; background-repeat: no-repeat; } .lt_h_tab .lt_h_tab__bg * { background-image: url(../images/header-tab--gray__sides.png); } .lt_h_tab--selected .lt_h_tab__bg * { background-image: url(../images/header-tab__sides.png); } .lt_h_tab__bg-left { } .lt_h_tab__bg-center { left: 16px; /* override */ width: 0; } .lt_h_tab .lt_h_tab__bg .lt_h_tab__bg-center { background: url(../images/header-tab--gray__center.png) repeat-x; } .lt_h_tab--selected .lt_h_tab__bg .lt_h_tab__bg-center { background: url(../images/header-tab__center.png) repeat-x; } .lt_h_tab__bg-right { right: 0; background-position: -16px 0; } .lt_h_tab__fg { width: 100%; height: 100%; } .lt_h_tab__fg * { position: relative; } .lt_header .cells { margin: 6px 0; } .lt_header .cells * { color: #fbfbfb; font-size: 10pt; } .lt_list { overflow: auto; left: 16px; top: 42px; /* override */ width: 374px; /* override */ height: 336px; } .lt_list * { position: relative; } .lt_list .row, .lt_list .row--selected { overflow: hidden; white-space: nowrap; cursor: pointer; } .lt_list .cells { width: 100%; height: 15px; padding: 4px 0; } .lt_list .row--selected .cells { font-weight: bold; background: #cdecf8; } .lt_list .cells * { font-size: 8pt; } .lt_list .row .detail { visibility: hidden; } .lt_list .row--selected .detail { width: 100%; height: 80px; background: #d5eff9; } .input_search { width: 132px; height: 21px; background: url(../images/v_b_m_search.png) no-repeat; cursor: pointer; } .input_search input { width: 102px; height: 15px; background: none; border: 0 none; color: #c1bdbd; font-family: Verdana, Helvetica, sans-serif; font-size: 8pt; cursor: text; } .input_search input:focus { color: #000; } .button { border: 0 none; } .button_search { width: 34px; height: 23px; background: url(../images/v_b_m_search.png) no-repeat 0px -21px; border: 0 none; cursor: pointer; } /**/ /** DOM and dynamic elements */ #page { /* background gradient */ position: absolute; width: 100%; height: 100%; min-width: 1000px; background: #0d0c0a url(../images/bg_gradient.png) repeat-x; font-family: Verdana, Helvetica, Arial, sans-serif; color: #d6d5d3; } #page_banner { position: absolute; z-index: 1; left: 0px; top: 31px; width: 100%; height: 41px; background: url(../images/bg_banner.gif) repeat-x; } #page_texture { /* background vector art */ position: absolute; z-index: 2; left: 0px; top: 57px; width: 100%; height: 566px; } #page_texture * { position: absolute; width: 50%; height: 100%; background: url(../images/bg_texture_24bit.png) no-repeat; } #page_texture_left { left: 0; } #page_texture_right { right: 0; } #page__view-shadow { position: absolute; z-index: 3; left: 0px; top: 21px; width: 100%; height: 704px; } #page__view-shadow_inner { position: absolute; left: 50%; width: 1020px; height: 100%; margin: 0 -510px; overflow-x: hidden; } #page__view-shadow_inner * { position: absolute; width: 20px; height: 20px; } #page__vs-nw { background: url(../images/page__view-shadow-corners.png); } #page__vs-n { left: 20px; width: 980px; background: url(../images/page__view-shadow-ns.png) repeat-x; } #page__vs-ne { left: 1000px; background: url(../images/page__view-shadow-corners.png) -20px 0px; } #page__vs-w { top: 20px; height: 664px; background: url(../images/page__view-shadow-we.png) repeat-y; } #page__vs-center { } #page__vs-e { left: 1000px; top: 20px; height: 664px; background: url(../images/page__view-shadow-we.png) -20px 0px repeat-y; } #page__vs-sw { /*top: 684px;*/ bottom: 0; background: url(../images/page__view-shadow-corners.png) 0px -20px; } #page__vs-s { left: 20px; bottom: 0; width: 980px; background: url(../images/page__view-shadow-ns.png) 0px -20px repeat-x; } #page__vs-se { left: 1000px; bottom: 0; background: url(../images/page__view-shadow-corners.png) -20px -20px; } #container { position: relative; z-index: 4; left: 50%; top: 0px; width: 1000px; margin: 0 -500px; overflow: hidden; } #header { position: relative; height: 12px; padding: 9px; padding-left: 34px; font-size: 7pt; } #header a { color: #d6d5d3; } #header a:hover { color: #fff; } .h_separator { color: #fff; font-weight: bold; padding: 0 4px; } #h_globalnav { float: left; } .h_gn_item { } .h_gn_item--selected { color: #fff; font-weight: bold; } #h_account { float: right; text-align: right; } #h_a_date { } #h_a_userid { } #h_a_name { font-weight: bold; } #h_a_menu { margin-left: 12px; } #h_a_m_help { } #h_a_m_login { } #h_a_m_logout { font-weight: bold; } #view { position: relative; width: 100%; height: 684px; } #v_header { position: absolute; width: 1000px; height: 42px; } #v_header__bg { position: absolute; z-index: -3; top: 5px; width: 1000px; height: 37px; background: #00a0df url(../images/v_header_bg_gradient.png) 0px -5px repeat-x; } #v_header__bg-top { position: absolute; z-index: -3; left: 5px; width: 990px; height: 5px; background: url(../images/v_header_bg_gradient.png) repeat-x; } #v_header__bg-left, #v_header__bg-right { position: absolute; z-index: -2; top: 0px; width: 5px; height: 5px; background: #00a0df; } #v_header__bg-left { left: 0px; background: url(../images/v_header__left.png); } #v_header__bg-right { left: 995px; background: url(../images/v_header__right.png); } #v_h_title { position: absolute; left: 34px; top: 11px; width: 104px; height: 26px; background: url(../images/v_header_title.gif); } #v_h_topnav__bg { position: absolute; z-index: -1; left: 188px; top: 6px; width: 553px; height: 36px; background: url(../images/v_h_topnav__bg.gif) repeat-x; } #v_h_topnav__bg-top { position: absolute; z-index: -2; left: 194px; width: 553px; height: 6px; background: url(../images/v_h_topnav__bg-top.gif) repeat-x; } #v_h_topnav__bg-left, #v_h_topnav__bg-right { position: absolute; z-index: -2; width: 12px; height: 42px; } #v_h_topnav__bg-left { left: 182px; background: url(../images/v_h_topnav__bg-left.gif); } #v_h_topnav__bg-right { left: 735px; background: url(../images/v_h_topnav__bg-right.gif); } #v_h_topnav { position: absolute; left: 188px; top: 6px; width: 553px; height: 36px; } #v_h_topnav * { position: absolute; top: 0; height: 36px; background-image: url(../images/v_h_tn_item.gif); } #v_h_topnav * a { display: block; width: 100%; height: 36px; } #v_h_topnav * a:hover { background: none; } /* Task Panel */ #v_h_tn_item-tp { left: 0px; width: 103px; } .v_h_tn_item-tp--up { background-position: 0px; } .v_h_tn_item-tp--down { background-position: -549px; } .v_h_tn_item-tp--over { background-position: -549px; } .v_h_tn_item-tp--disabled { } /* Send a Message */ #v_h_tn_item-sm { left: 104px; width: 118px; } .v_h_tn_item-sm--up { background-position: -103px; } .v_h_tn_item-sm--down { background-position: -652px; } .v_h_tn_item-sm--over { background-position: -652px; } .v_h_tn_item-sm--disabled { } /* Address Book */ #v_h_tn_item-ab { left: 223px; width: 111px; } .v_h_tn_item-ab--up { background-position: -221px; } .v_h_tn_item-ab--down { background-position: -770px; } .v_h_tn_item-ab--over { background-position: -770px; } .v_h_tn_item-ab--disabled { } /* View History */ #v_h_tn_item-vh { left: 335px; width: 111px; } .v_h_tn_item-vh--up { background-position: -332px; } .v_h_tn_item-vh--down { background-position: -881px; } .v_h_tn_item-vh--over { background-position: -881px; } .v_h_tn_item-vh--disabled { } /* My Profile */ #v_h_tn_item-mp { left: 447px; width: 106px; } .v_h_tn_item-mp--up { background-position: -443px; } .v_h_tn_item-mp--down { background-position: -992px; } .v_h_tn_item-mp--over { background-position: -992px; } .v_h_tn_item-mp--disabled { } #v_body { position: absolute; top: 42px; width: 100%; height: 642px; } #v_body__bg { position: absolute; z-index: -1; top: 42px; width: 100%; height: 637px; background: #fff; } #v_body__bg * { position: absolute; width: 100%; } #v_body__bg_gradient-top { top: 0; background: url(../images/v_body__bg_gradient-top.gif) repeat-x; height: 80px; } #v_body__bg_gradient-bottom { bottom: 0; height: 75px; background: url(../images/v_body__bg_gradient-bottom.jpg) repeat-x; } #v_body__bg-bottom { position: absolute; z-index: -1; left: 5px; bottom: 0; width: 990px; height: 5px; background: url(../images/v_body__bg_gradient-bottom.jpg) bottom repeat-x; } #v_body__bg-left, #v_body__bg-right { position: absolute; z-index: -1; bottom: 0; width: 5px; height: 5px; } #v_body__bg-left { left: 0; background: url(../images/view__corner-sw.png); } #v_body__bg-right { right: 0; background: url(../images/view__corner-se.png); } #v_body a { color: #239bc9; text-decoration: underline; } #v_b_subnav { width: 100%; height: 48px; background: url(../images/v_b_subnav__bg.gif); } #v_b_subnav * { position: absolute; height: 30px; background-image: url(../images/v_b_sn_item.gif); background-repeat: no-repeat; } #v_b_subnav * a { display: block; width: 100%; height: 30px; } #v_b_subnav * a:hover { background: none; } /* Send a Message > Message Options */ #v_b_sn_item-sm-mo { left: 33px; width: 144px; } .v_b_sn_item-sm-mo--up { background-position: 0px 0px; } .v_b_sn_item-sm-mo--down { background-position: 0px -30px; } .v_b_sn_item-sm-mo--over { background-position: 0px -30px; } .v_b_sn_item-sm-mo--disabled { background-position: 0px -60px; } /* Send a Message > Select Recipients */ #v_b_sn_item-sm-sr { left: 177px; width: 145px; } .v_b_sn_item-sm-sr--up { background-position: -144px 0px; } .v_b_sn_item-sm-sr--down { background-position: -144px -30px; } .v_b_sn_item-sm-sr--over { background-position: -144px -30px; } .v_b_sn_item-sm-sr--disabled { background-position: -144px -60px; } /* Send a Message > Compose Message */ #v_b_sn_item-sm-cm { left: 322px; width: 147px; } .v_b_sn_item-sm-cm--up { background-position: -289px 0px; } .v_b_sn_item-sm-cm--down { background-position: -289px -30px; } .v_b_sn_item-sm-cm--over { background-position: -289px -30px; } .v_b_sn_item-sm-cm--disabled { background-position: -289px -60px; } /* Send a Message > Refine Message */ #v_b_sn_item-sm-rm { left: 469px; width: 136px; } .v_b_sn_item-sm-rm--up { background-position: -436px 0px; } .v_b_sn_item-sm-rm--down { background-position: -436px -30px; } .v_b_sn_item-sm-rm--over { background-position: -436px -30px; } .v_b_sn_item-sm-rm--disabled { background-position: -436px -60px; } /* Send a Message > Send Message */ #v_b_sn_item-sm-sm { left: 605px; width: 126px; } .v_b_sn_item-sm-sm--up { background-position: -572px 0px; } .v_b_sn_item-sm-sm--down { background-position: -572px -30px; } .v_b_sn_item-sm-sm--over { background-position: -572px -30px; } .v_b_sn_item-sm-sm--disabled { background-position: -572px -60px; } /* View History > View by Message */ #v_b_sn_item-vh-m { left: 33px; width: 144px; } .v_b_sn_item-vh-m--up { background-position: -698px 0px; } .v_b_sn_item-vh-m--down { background-position: -698px -30px; } .v_b_sn_item-vh-m--over { background-position: -698px -30px; } .v_b_sn_item-vh-m--disabled { } /* View History > View by Recipient */ #v_b_sn_item-vh-r { left: 177px; width: 144px; } .v_b_sn_item-vh-r--up { background-position: -842px 0px; } .v_b_sn_item-vh-r--down { background-position: -842px -30px; } .v_b_sn_item-vh-r--over { background-position: -842px -30px; } .v_b_sn_item-vh-r--disabled { } /* My Profile > Personal */ #v_b_sn_item-mp-p { left: 33px; width: 144px; } .v_b_sn_item-mp-p--up { background-position: -986px 0px; } .v_b_sn_item-mp-p--down { background-position: -986px -30px; } .v_b_sn_item-mp-p--over { background-position: -986px -30px; } .v_b_sn_item-mp-p--disabled { } /* My Profile > Organization */ #v_b_sn_item-mp-o { left: 177px; width: 155px; } .v_b_sn_item-mp-o--up { background-position: -1130px 0px; } .v_b_sn_item-mp-o--down { background-position: -1130px -30px; } .v_b_sn_item-mp-o--over { background-position: -1130px -30px; } .v_b_sn_item-mp-o--disabled { } /* My Profile > Delivery */ #v_b_sn_item-mp-d { left: 332px; width: 145px; } .v_b_sn_item-mp-d--up { background-position: -1285px 0px; } .v_b_sn_item-mp-d--down { background-position: -1285px -30px; } .v_b_sn_item-mp-d--over { background-position: -1285px -30px; } .v_b_sn_item-mp-d--disabled { } #v_b_main { position: absolute; top: 42px; width: 698px; margin-left: 30px; color: #564f49; } #v_b_m_alert { position: absolute; right: 0; top: 4px; width: 428px; text-align: right; } #v_b_m_alert_icon { display: none; top: 2px; width: 32px; height: 25px; } #v_b_m_alert_container { overflow-x: hidden; overflow-y: auto; float: right; height: 3.8em; padding-left: 40px; background: none; /*url(../images/error_icon_alert.png) no-repeat 0 4px;*/ text-align: left; color: #12100f; font-size: 8pt; line-height: 1.1; } #v_b_m_alert_container .alert_title { color: #c70d00; font-size: 9pt; } .v_b_m_header { margin: 12px 4px 16px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; } .v_b_m_panel-row { position: relative; min-width: 698px; min-height: 80px; background: url(../images/v_m_shadow-box.gif) no-repeat; vertical-align: middle; padding: 15px 0 30px 15px; } .v_b_m_pr_icon-voice, .v_b_m_pr_icon-email, .v_b_m_pr_icon-fax, .v_b_m_pr_icon-sms, .v_b_m_pr_icon-compose, .v_b_m_pr_icon-urgency { position: absolute; left: 12px; top: 6px; width: 64px; height: 64px; background-image: url(../images/v_b_m_pr_icons.png); } .v_b_m_pr_icon-voice { background-position: 0px 0px; } .v_b_m_pr_icon-email { background-position: -64px 0px; } .v_b_m_pr_icon-fax { background-position: -128px 0px; } .v_b_m_pr_icon-sms { background-position: -192px 0px; } .v_b_m_pr_icon-compose { background-position: -256px 0px; } .v_b_m_pr_icon-urgency { background-position: -320px 0px; } .v_b_m_pr_options { position: relative; } .v_b_m_pr_o_item { } .v_b_m_pr_o_item input { } .v_b_m_pr_o_item .description { font-size: 7pt; margin: 5px 0 10px 25px; font-style: italic; } .v_b_m_panel-end { clear: both; position: relative; width: 668px; height: 62px; margin: 24px; /* background: url(../images/v_b_m_panel-end.png) top right no-repeat; */ } .v_b_m_panel-end__bg { position: absolute; top: 0; right: 0; width: 550px; /* must match image dimensions for IE6 */ height: 80px; background: url(../images/v_b_m_panel-end-2.png) top right no-repeat; } .v_b_m_panel-end__fg { position: absolute; width: 100%; height: 100%; } .v_b_m_pe_submit { right: 0px; height: 100%; padding: 22px; text-align: right; font-size: 0; } .v_b_m_pe_submit input { width: 107px; height: 33px; margin-left: 8px; background: url(../images/v_b_m_pe_button-next-step.png) -1px -1px no-repeat; border: none; outline: none; cursor: pointer; } .v_b_m_pe_submit input.print { width: 87px; height: 23px; background: url(../images/v_b_m_pe_button-print.png) no-repeat; } .v_b_m_pe_submit input { width: 176px; height: 34px; background: url(../images/buttons.png) no-repeat; border: none; outline: none; cursor: pointer; } .v_b_m_pe_submit input#Yes, .v_b_m_pe_submit input#No, .v_b_m_pe_submit input#Save, .v_b_m_pe_submit input#Cancel, .v_b_m_pe_submit input#Previous, .v_b_m_pe_submit input#Back, .v_b_m_pe_submit input#Next, .v_b_m_pe_submit input#Confirm, .v_b_m_pe_submit input#Delete, .v_b_m_pe_submit input#Continue, .v_b_m_pe_submit input#NextStep, .v_b_m_pe_submit input#Done, .v_b_m_pe_submit input#Print { width: 108px; } .v_b_m_pe_submit input#Yes { background-position: 0px 0px; } .v_b_m_pe_submit input#No { background-position: 0px -34px; } .v_b_m_pe_submit input#Save { background-position: 0px -68px; } .v_b_m_pe_submit input#Cancel { background-position: 0px -102px; } .v_b_m_pe_submit input#Previous, .v_b_m_pe_submit input#Back { background-position: 0px -136px; } .v_b_m_pe_submit input#Next { background-position: 0px -170px; } .v_b_m_pe_submit input#Confirm { background-position: 0px -204px; } .v_b_m_pe_submit input#Delete { background-position: 0px -238px; } .v_b_m_pe_submit input#Continue { background-position: 0px -272px; } .v_b_m_pe_submit input#NextStep, .v_b_m_pe_submit input#Done { background-position: 0px -306px; } .v_b_m_pe_submit input#Print { background-position: 0px -340px; } .v_b_m_pe_submit input#InstallTool { background-position: 0px -374px; } .v_b_m_pe_submit input#SaveMessage { background-position: 0px -408px; } .v_b_m_pe_submit input#DoNotSendEmails { background-position: 0px -442px; } .v_b_m_pe_submit input#SendEmails { background-position: 0px -476px; } .v_b_m_pe_submit input#DownloadToCSV { background-position: 0px -510px; } .v_b_m_pe_submit input#CancelDelivery { background-position: 0px -544px; } .v_b_m_pe_submit input#EditRecipientInfo { background-position: 0px -578px; } .v_b_m_pe_submit input#SendMessage { background-position: 0px -612px; } .v_b_m_pe_submit input#MoreRecipients { background-position: 0px -646px; } .v_b_m_footnote { position: absolute; left: 25px; bottom: 0; font-size: 8pt; } #v_b_sidebar { position: absolute; right: 0; top: 46px; width: 242px; height: 563px; overflow: hidden; margin-right: 12px; } #v_b_sb__bg { position: absolute; z-index: 0; width: 100%; height: 100%; } #v_b_sb__bg * { position: absolute; } #v_b_sb__bg-nw { left: 0; top: 0; width: 10px; height: 10px; background: url(../images/v_b_sb__bg-nw.png); } #v_b_sb__bg-n { left: 10px; top: 0; width: 222px; height: 10px; background: url(../images/v_b_sb__bg-n.png); } #v_b_sb__bg-ne { right: 0; top: 0; width: 10px; height: 10px; background: url(../images/v_b_sb__bg-ne.png); } #v_b_sb__bg-w { left: 0; top: 10px; width: 10px; height: 543px; background: url(../images/v_b_sb__bg-w.png); } #v_b_sb__bg-center { left: 10px; top: 10px; width: 222px; height: 543px; background: url(../images/v_b_sb__bg-center.png); } #v_b_sb__bg-e { right: 0; top: 10px; width: 10px; height: 543px; background: url(../images/v_b_sb__bg-e.png); } #v_b_sb__bg-sw { left: 0; bottom: 0; width: 10px; height: 10px; background: url(../images/v_b_sb__bg-sw.png); } #v_b_sb__bg-s { left: 10px; bottom: 0; width: 222px; height: 10px; background: url(../images/v_b_sb__bg-s.png); } #v_b_sb__bg-se { right: 0; bottom: 0; width: 10px; height: 10px; background: url(../images/v_b_sb__bg-se.png); } #v_b_sb__container { position: absolute; z-index: 1; padding: 29px; } .v_b_sb_header { position: relative; color: #239bc9; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 20px; } .v_b_sb_text { position: relative; font-size: 8pt; } .v_b_sb_text p { margin: 1em 0; line-height: 14pt; color: #726a5e; } .v_b_sb_text p.em { color: #000; } #footer { position: relative; height: 27px; padding: 14px; } .f_separator { color: #b9af9f; font-weight: bold; padding: 0 4px; } #f_copyright { position: absolute; width: auto; height: 27px; color: #9b9a99; font-size: 7pt; letter-spacing: -0.5pt; } #f_legal { position: absolute; left: 50%; width: 33%; height: 27px; margin-left: -16%; text-align: center; font-size: 7pt; } #f_legal a { color: #b9af9f; } #f_legal a:hover { color: #fff; text-decoration: underline; } #f_logo { position: absolute; right: 12px; width: 128px; height: 27px; background: url(../images/f_logo.gif); } /**/