/* ================ COLORS ====================== ORANGE (for h2 page title, #main h3 headings, h6, and footer link hover): #ff9100; TEXT: (Note: other shades of grey are used for borders, footer links, breadcrumbs, etc., but these are the primary greys) - DARK GRAY (for h4 & strong text, and td text): #666; - MEDIUM GRAY (for body text): #727272; - LIGHT GRAY (for h5): #97969a; BACKGROUNDS: - FAINT GRAY (for body background -visible only on monitors with resolution above 1024 x768): #d9dbdb; - PALE GRAY (for border at top of page & footer background: #ededed; - PALER GRAY (for table heads) background-color:#f1f1f1; color:#787878; - VERY PALE GRAY (for backgrounds of H3 headings in tertiary right nav as well as dropdown menus) background: #f6f6f7; - EVEN PALER GRAY (for alt stripes on table rows): #f8f8f8 TURQUIOSE (for links): #0078ae; LIGHT TURQUIOSE (for hover / active links: #75b2d5; ================ END COLORS ====================== */ * { margin: 0; padding: 0; line-height: 1.5; color: #727272; font-style: normal; font-weight: normal; } body {font: normal 12px Arial, Helvetica, sans-serif; background: #555; border-top: none; } h1, h2, h3, h4, h5, h6, table { clear: both; } p {margin: 0 0 1em 0; } a, a:visited { color: #0078ae; border-bottom: 1px dotted #dae7f2; text-decoration: none; } a:hover, a:focus { color: #75b2d5; } ul {margin: .5em 0;} ul li {list-style: none; background: transparent url(../img/list-marker.gif) no-repeat left 0.6em; padding-left: 8px; margin-bottom: 0.8em; margin-left: 0 !important } #secondary ul li, #tertiary ul li {margin-bottom: .5em} ul ul {margin: .6em 0 0 1em;} #tertiary ul ul {margin-left: .5em;} ol li {margin: .6em 0 0 1.5em; *margin: .6em 0 0 26px} blockquote { float: right; width: 200px; background: #fcfcfc url(../img/blockquote-bg.gif) repeat-x left top; margin: 4px 0 8px 10px; border-top: 1px solid #babcbe; border-bottom: 1px solid #e1e2e3; clear: both; } blockquote p { margin: 12px 15px 10px 15px; padding: 0 8px !important; } #tertiary blockquote {border-top: 0;} #tertiary blockquote p {margin: 10px 0 10px 0; padding: 10px 10px 0 0 !important} blockquote cite { color: #5a5b5b; text-transform: uppercase; font-size: 11px; text-align: right; display: block; margin: 8px 15px} strong {font-weight: bold; color: #666} em {font-style: italic;} img { border: none; margin-bottom: 10px; } a img, img a {border-bottom: none !important;} .float_right {float: right; margin-left: 2.5em; margin-top: 20px;} .float_left {float: left; margin-right: 1em;} img.icon { border: none; margin: 0; vertical-align: middle; } hr {border: 0; height: 1px; color: #e1e2e3; background-color: #e1e2e3; margin-top: 0; margin-bottom: 6px;} /*------------------------------------------- HEADINGS - Note these are by no means the only options. On Thomsonreuters.com the h2 & H3 headings are SIFR replaced with the Locator font (soon to be Knowledge). TheLink sticks with the orange, black, gray color scheme, but modifies the font sizes introduces a background image dot for the equivalent of H3. The models below are intended to be a starting point - not an absolute - except for H1, which should always be used for linking the logo to the homepage of the site. -------------------------------------------*/ h2 {font-size: 20px; text-transform: uppercase; color: #ff9100; margin: 15px 0 5px 0px; } h3 {font-size: 15px; color: #ff9100; text-transform: uppercase; margin-top: 1em; } #main h3, .half h3, .last_half h3 {margin-bottom: .5em; margin-top: .5em} #secondary h3 {text-transform: uppercase; color: #5a5b5b; font-size: 12px; margin: 2em 0 1em 0; border-top: none} #main h3.first, #secondary h3.first, #tertiary h3.first {margin-top: 0;} #tertiary h3 {color: #807f83; border-bottom: 1px solid #e1e2e3; margin: 1.5em 0 1em 0; padding: .1em 0} h4, h5, h6 {margin: 1.5em 0 .5em 0;} h4 {font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 1px; font-weight: bold} h5 {font-size: 11px; color: #97969a; text-transform: uppercase; letter-spacing: 1px; font-weight: normal;} h6 {font-size: 11px; color: #ff9100; text-transform: uppercase; letter-spacing: 1px; font-weight: normal;} /*------------------------------------------- LAYOUT -------------------------------------------*/ #wrap { background: #fff; margin: 1.5em auto 1.5em auto; width: 960px; position: relative; } #header {width: 100%; margin: 0; float: left; padding:24px 0 0 0; clear: both;} #header h1 { clear:none;float:left; height: 60px; width: 600px; min-width: 600px; padding-left:22px; } #header h1 a { float:left; text-indent: -9999px; width: 600px; background: url(../img/site-name2.png) no-repeat top left; margin: 0px; overflow:hidden; border-bottom: medium none; height: 60px} #ThomsonReuters{float:right;width:200px;height:60px;} #search { background: #f1f1f1; width: 250px; height: 32px; float:right; } #search * { vertical-align: middle; } #search label { position: absolute; left: -9999px; } #search p { padding: 0; margin: 6px 0 0 0; *margin: 5px 0 0 0} #search p input {} #search p #searchfield { width: 132px; margin: 0 11px 0 20px; } #nav { float:left; width: 100%; height: 32px; border-bottom:1px solid #e1e2e3; border-top:1px solid #e1e2e3; } /*-- container for the text area of page (main + secondary + tertiary --*/ #content { float: left; clear:both; margin: 0; width: 100%; } /*-- the primary content on the page --*/ #main {float: left; width: 665px; margin: 0 20px 0 0px; padding: 0 0 0 22px; } /*-- divide the main body column into sections --*/ .half {width: 48%; float: left;} .last_half { width: 48%; float: right; margin-left: 12px;} .third {width: 31%; float: left;margin-left:20px;} .third.first{margin-left:0;} /*-- the secondary navigation - in this case the left hand accordion--*/ #secondary {float: left; width: 174px; margin: 0px 28px 0 20px; *margin-left: 10px; padding: 18px 0; } /*-- the third level navigation - in this case right hand calls to action --*/ #tertiary {float: left; width: 220px; margin: 25px 6px 0 10px; } .callout {padding-left: 6px;} .clearfix:after { content: "."; display: block; height: 0.1px; clear: both; font-size: 0; visibility: hidden; } .clearfix { display: inline-table; } /* \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* */ /*------------------------------------------- MENUBAR -------------------------------------------*/ #menubar {width: 600px; float: left; padding: 2px 0; margin: 2px 0 0 0px; list-style: none; padding: 0 0 0 12px; } #menubar a{display: block; color: #8e8e8e; text-decoration: none; border-bottom: none; text-transform: uppercase; font-weight: bold; font-size: 12px;} #menubar a.highlight{background:#efefef;margin-right:3px;} #menubar a.last{margin-right:50px;} #menubar a.trigger {padding: 4px 10px 5px 10px;} #menubar a.trigger:hover {color:#333;} #menubar a.triggeron {padding: 4px 10px 5px 10px; color:#333;} #menubar li {float: left; position: relative; background: none; padding: 0; margin: 0; } /* hide from IE mac \*/ #menubar li {position: static; width: auto;} /*--- dropdown menu secondary items ---*/ #menubar li ul, #menubar ul li {width: 140px;} #menubar ul li {padding: 0; margin: 0} #menubar ul li a {padding: 3px 5px; margin: 0 3px;} #menubar li ul {position: absolute; display: none;background-color: #fff; border: 1px solid #cecece; border-bottom: 1px solid #888; border-right: 1px solid #bababa; padding: 6px 0; list-style-type: none; } #menubar li:hover a, #menubar a:focus, #menubar a:active, #menubar li.hvr a {color: #333; } #menubar li:hover ul, #menubar li.hvr ul {display: block; margin: 0;} #menubar li:hover ul a, #menubar li.hvr ul a {color: #222;background-color: transparent;} #menubar ul a {color: #0078ae !important; text-transform: none; font-weight: normal; border-bottom: 1px solid #eee; text-align: left; background-image: none !important; outline: none; -moz-outline-style: none; } #menubar ul a.last {border-bottom: none;} #menubar ul a:hover {background: #f2f2f2 !important;color: #444 !important;} /*------------------------------------------- RIGHT MENUBAR -------------------------------------------*/ #rightbar {width: 270px; float: right; padding: 2px 0; margin: 2px 10px 0 0px; list-style: none; padding: 0 0 0 12px; } #rightbar a{display: block; color: #8e8e8e; text-decoration: none; border-bottom: none; text-transform: uppercase; font-weight: bold; font-size: 12px;} #rightbar a.highlight{background:#efefef;margin-right:3px;} #rightbar a.last{margin-right:50px;} #rightbar a.trigger {padding: 4px 10px 5px 10px;color:#ff9100;} #rightbar a.trigger:hover {background:#333;color:#ff9100;} #rightbar a.triggeron {padding: 4px 10px 5px 10px; color:#333;} #rightbar li {float: right; position: relative; background: none; padding: 0 10px 0 0; margin: 0; } /* hide from IE mac \*/ #rightbar li {position: static; width: auto;} /*--- dropdown menu secondary items ---*/ #rightbar li ul, #rightbar ul li {width: 140px;} #rightbar ul li {padding: 0; margin: 0} #rightbar ul li a {padding: 3px 5px; margin: 0 3px;} #rightbar li ul {position: absolute; display: none;background-color: #fff; border: 1px solid #cecece; border-bottom: 1px solid #888; border-right: 1px solid #bababa; padding: 6px 0; list-style-type: none; } #rightbar li:hover a, #rightbar a:focus, #rightbar a:active, #rightbar li.hvr a {color: #333; } #rightbar li:hover ul, #rightbar li.hvr ul {display: block; margin: 0;} #rightbar li:hover ul a, #rightbar li.hvr ul a {color: #222;background-color: transparent;} #rightbar ul a {color: #0078ae !important; text-transform: none; font-weight: normal; border-bottom: 1px solid #eee; text-align: left; background-image: none !important; outline: none; -moz-outline-style: none; } #rightbar ul a.last {border-bottom: none;} #rightbar ul a:hover {background: #f2f2f2 !important;color: #444 !important;} /*------------------------------------------- BREADCRUMB -------------------------------------------*/ #breadcrumb {margin: .5em 0 0 16px; *margin-left: 23px;} #breadcrumb li { color: #404040; font-size: 11px; background: transparent url(../img/breadcrumb_marker.gif) no-repeat left center; padding-left: 8px; display: inline; left: 0; } #breadcrumb li.first { background: none; padding: 0; } #breadcrumb a { color: #97969a; border: none; } #breadcrumb a:hover, #breadcrumb a:focus { color: #babcbe;} /*------------------------------------------- SECONDARY NAV -------------------------------------------*/ #secondary ul {list-style: none;} #secondary li {border-bottom: 1px solid #f5f5f5; margin: .5em 0; background: none; padding: 0;} #secondary li a {border-bottom: none; } #secondary li a#active {color: #555} /*------------------------------------------- FOOTER -------------------------------------------*/ #footer-wrap { clear: both; position: relative; top: 0; width:960px; background-color: #fff; padding:0;} #footer {float: left; width: 100%; margin: 3em 0 0 0; background: #eeefef; clear: both; height: 24px; padding-top: 8px} #footer * { color: #97969a; display: inline; font-size: 11px; text-transform: uppercase; } #footer address { padding-left: 21px; margin-right: 30px; } #footer ul {list-style: none; } #footer li {background: none; margin: 0; padding: 0;} #footer li a { color: #807f83; border-bottom: 1px solid #e3e5e6; margin-right: 2em;} #footer li a:hover, #footer li a:focus { color: #ff9100;} /*------------------------------------------- TABLES -------------------------------------------*/ table.header { border: none; } table { border-collapse: separate; border:2px solid #f1f1f1; width:100%; margin:3px 0 1em 0; border-spacing: 0 0; } caption {text-align: left; padding: 12px 0 3px 3px; color: #666; font-size: 12px; font-weight: bold; letter-spacing: .03mm; text-transform: uppercase;} .alt td { background-color: #f8f8f8 } th, td { font-size:12px; padding:3px 5px; border-left: 2px solid #fff; vertical-align: top; color:#666; empty-cells: show} th { background-color:#f1f1f1; color:#787878; font-weight:bold; text-align: left;} th a {text-decoration: none; border-bottom: 1px solid #dedede !important; color: #787878 !important; font-weight: bold;} th a:hover {color: #c0c0c0 !important} td a {text-decoration: none; border-bottom: none !important; } .number { text-align:right !important; padding: 3px 5px 3px 1px; } .cell_center {text-align: center !important; padding: 3px 5px 3px 1px;} /*------------------------------------------ FORMS -------------------------------------------*/ fieldset {border: none; border-top: 1px solid #e1e2e3; margin: 20px 0; padding: 4px 0;} fieldset .half, fieldset .last-half {width: 200px !important; padding-left: 3px !important;} legend {font-size: 12px; color: #666; text-transform: uppercase; font-weight: bold; letter-spacing: .02cm; padding-right: .3em} select { width:200px;} p select { margin-bottom: 5px; } input, textarea {width: auto; margin: 0 6px 0 0;} input.aligned { margin-top: 24px !important; } input.aligned_bottom { margin-top: -16px !important; } input.img_input { width: auto !important; float: right; margin-right: 16px;} input.img_input_go { width: auto !important; float: right; margin-top: -22px; padding-right: 14px} .small {width: 50px; } .smallmed {width: 70px;} .smalllarge {width: 100px;} .medium {width: 146px; } .large {width: 200px;} .xlarge {width: 360px;} label {color: #5a5b5b; font-size: 12px; display: block; margin: .6em 8px 0 0; } label em {margin: 0 6px 0 6px; font-weight: bold; color: #f00 !important;} .required {color: #f00 !important; font-weight: bold !important;} .left_label {width: 160px; min-width: 160px !important; float: left; margin: 2px 10px 15px 0; clear: left; text-align: right;} .left_input {margin-bottom: 15px;} .left_area {margin-top: 22px;} .submit { width:95%; text-align:right; } form strong {color: #5a5b5b;} ul.form_list {margin: .3em 0;} /*-- use for radio button and checkbox arrays -- */ .form_list li {display: inline; background: none; margin-right:1em; padding: 0} .form_list_label {margin-top: 1em;} #LoginBox, #LoginError, #LockOut, #NoConnection, #ForgotContent, #PasswordSent, #EmailError, #MaintenanceContent{width:195px;background:url(../img/gradientGray.gif) top repeat-x; border:1px solid #f0f0f0; height:280px; margin:0; padding:0px 10px 10px 12px; top:20px} .loginHeader{background:url(../img/streeteventstitle.gif); width:310px; height:54px;} .loginTitle{color:#ff9100; font-size:1.3em; font-weight:bold;} .forgotTitle{color:#ff9100; font-size:1.3em; font-weight:bold;} .maintenanceTitle{color:#ff9100; font-size:1.3em; font-weight:bold;} #UsernameValidation, #PasswordValidation, #EmailValidation,#UsernameValidation2, #PasswordValidation2, #EmailValidation2{ color:#f90;display:none;margin:-5px 0 7px 0;} #Throbber{background:url(../img/throbber.gif) top left no-repeat;height:262px;width:40px;display:none;} #ThrobberContent{background:url(../img/throbber.gif) top left no-repeat;height:40px;width:40px;display:none;margin-top:10px;} #LoginError{display:none;height:240px;} #LockOut{display:none;height:240px;} #NoConnection{display:none;height:240px;} #ForgotContent{display:none;height:240px;} #MaintenanceContent{display:none;height:240px;} #LoginErrorLink, #LoginErrorLink2, #LoginErrorLink3, #LoginErrorLink4, #ForgotLinkLast, #LoginErrorLinkLast{cursor:pointer;} #Status{margin-top:10px;display:none;} #HelpBackground{display:none;width:100%;height:2000px;background:#333;position:absolute;top:0px;left:0;z-index:10; filter:alpha(opacity=50);-moz-opacity:.50;opacity:.50;}} #HelpWrap{display:none; margin: 20px 0 20px 50; padding-left:50%;width: 600px; top:0; position: absolute; z-index:11;} #Help{margin:60px 0 20px -300px;width:600px;background: #fff;} #HelpContent{margin:40px;} #Close{float:right;margin:0;} li.para { font-style: italic; margin: 2px; } .headerlist { font-weight: bold; font-style: italic; } #rememberMe {background-color:#f0f0f0; font-size: 10px; font-weight: bold; }