/* ================ 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: #ff9100; border-bottom: 1px dotted #dae7f2; text-decoration: none; } a:hover, a:focus { color: #ff9100; } ul {margin: .5em 0;} ul li {list-style: none; /*background: transparent url(http://www.newsimages.org/webstyleguide/web_style_guide/template/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} .last {margin-bottom:10px;} 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: 1em;} .float_left {float: left; margin-right: 1em;} 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: 30px 0 0 18px; *margin-left: 20px} h3 {font-size: 16px; color: #ff9100; text-transform: uppercase; /*margin-top: 1em;*/ margin-bottom: 0.3em;} #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: #ff9100; text-transform: uppercase; letter-spacing: 1px; font-weight: bold} #tertiary 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;} #tertiary3 h5 {font-size: 11px; color: #ff9100; text-transform: uppercase; letter-spacing: 1px; font-weight: normal; margin-bottom:4px; margin-top:10px;} 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: 829px; position: relative; } #header {height:58px; width:100%; margin: 0; float: left; padding:21px 0 0 0; clear: both; margin-bottom:15px; *margin-bottom:-5px; border-bottom:1px solid #e1e2e3;} #header h1 { float:left; background: url(interface/tr_logo_40.gif) no-repeat top right; height: 60px; width: 935px; min-width: 930px; } #header h1 a { float:left; text-indent: -9999px; width: 300px; background: url(../img/webcasting.gif) no-repeat 30px 0px; margin: 0 0 0 0px; display: block;overflow:hidden; border-bottom: medium none; 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: 2px; border-top:1px solid #e1e2e3;display:none;} /*-- container for the text area of page (main + secondary + tertiary --*/ #content { display: block; margin: 0; height:auto; text-align:left; width:100%; } /*-- the primary content on the page --*/ #main { display: block; margin: 0; height:auto; text-align:left; width:95%; *margin-top:25px; padding-left:20px;} /*-- divide the main body column into sections --*/ .half {width: 45%; float: left; margin:7px 0 20px; } .last_half { width: 48%; float: right; margin:0 0 20px 12px; } .third {width: 30%; float: left;} /*-- 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 --*/ #tertiary3{float: left; width: 235px; margin: 0 0 0 30px; height:auto; padding-top:5px; } #tertiary_callout3 {width: 230px; color:#4b4b4b; background-color:#ebebeb; padding:10px; margin-top:5px;padding-left:15px; } .callout {padding-left: 6px;} #tertiary_form { padding:10px; } #flashcontent {margin:6px 54.5px 20px 39.5px;} .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; } /* */ .logo{text-align:right; margin:0px 15px 0 0; float:right; *margin-right:15px;} .sitename{text-align:left; margin:2px 5px 0 15px; float:left; *margin-bottom:-70px;} .submit_btn{margin-left:-6px;} /*------------------------------------------- FOOTER -------------------------------------------*/ #footer-wrap { clear: both; position: relative; top: 0; width:829px; background-color: #fff; padding:0;} #footer {float: left; width: 100%; margin: 0 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;}