/* The Right Gear - Chronos */ /* Newclear Designs | Nigel Duckworth Fall 2005 */ /* Global Whitespace Reset */ * { margin: 0px; padding: 0px; } /* Layout */ html { font-size: 100.01%; } body { font-size: 1em; font-family: verdana, arial, sans-serif; font-weight: normal; color: #666; line-height: 1.8; min-width:640px; background-color: #FFF; } #header,#content,#supp,#footer { overflow:hidden; } /* removed inline-block, was failing validation */ /* safari and opera need this */ #header,#footer { width:100%; clear: both; } /* safari and opera need this */ #content { width: 70%; float: left; } /* IE 5x Win */ * html #content { width: 68%; } /* Photo Gallery no supp so widen #content. */ .Photos #content { width: 99%; } /* IE */ * html .Photos #content { width: 99%; } .Full #content { width: 99%; } /* IE */ * html .Full #content { width: 99%; } #supp { width: 28%; float: right; background: none; } * html #supp { width: 28%; } #supp div { padding-left: 10px; padding-right: 20px; } #supp p.first { margin-top: 300px; } #footer { clear:left; } div.clearer { clear: both; background: transparent; font-size: 1px; line-height: 1px; height: 1px; } /* Gfx */ body { color: #666; font-family: verdana, arial, sans-serif; background-color: #FFF; background-image: none; } #wrap1 { width: 769px; margin: 0 auto; background-color: #FFF; background-image: none; } #wrap2 { width: 769px; margin: 0 auto; background-color: #FFF; background-image: none; } #theme { height: 20px; color: #CCCCCC; text-align: center; } #theme ul { height: 2em; } #theme a { color: #CCCCCC; margin:10px; } #theme a:hover { color: #FF9900; } .Home #header { height: 450px; background: url(../webgfx/chronos/banner-home.jpg) top right no-repeat; } .Products #header { height: 260px; background: #fff url(../webgfx/chronos/banner-sec.jpg) top left no-repeat; } .Services #header { height: 260px; background: #fff url(../webgfx/chronos/banner-sec.jpg) top left no-repeat; } .Journal #header { height: 260px; background: #fff url(../webgfx/chronos/banner-sec.jpg) top left no-repeat; } .News #header { height: 260px; background: #fff url(../webgfx/chronos/banner-sec.jpg) top left no-repeat; } .Company #header { height: 260px; background: #fff url(../webgfx/chronos/banner-sec.jpg) top left no-repeat; } .Photos #header { height: 260px; background: #fff url(../webgfx/chronos/banner-sec.jpg) top left no-repeat; } .Themes #header { height: 260px; background: #fff url(../webgfx/chronos/banner-sec.jpg) top left no-repeat; } .Site #header { height: 260px; background: #fff url(../webgfx/chronos/banner-sec.jpg) top left no-repeat; } /* Navigation (based on Son of Suckerfish) */ #navcontainer { width: 100%; height: 1.5em; display: block; color: #666; background: #EEE; } /* ND Addition */ #navcontainer #nav, #navcontainer #nav * { margin: 0px; padding: 0px; padding-left: 0px; border: none; color: #666; z-index: 99; line-height: 1.5; background: transparent; } /* clear residual styles */ #nav, #nav ul { /* all lists */ padding: 0; margin-top: .5em; list-style: none; line-height: 1.2; background: #EEE; /* Doesn't do anything -ND */ } /* Add padding to the subnav - ND Addition */ #nav ul ul { padding: 5px; } #nav li li { width: 12em; font-size: 1em; border-bottom: 1px solid #000; clear: left; white-space: nowrap; padding: 1em; padding-left: 10px; } #nav a { display: block; width: 6em; /* Was 8em */ color: #666; font-size: .8em; text-decoration: none; text-transform: uppercase; padding-top: 5px; /* Add space around the menu links - ND Addition */ vertical-align: center; text-align: center; } #nav li { /* all list items */ float: left; width: 6em; /* width needed or else Opera goes nuts */ } #nav li ul { /* second-level lists */ position: absolute; width: 10em; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ } /* ND Addition - sub nav bg */ #navcontainer #nav ul li { background: #DDD; } /* ND Addition - */ #nav ul ul a { font-size: .8em; } #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ left: auto; padding: .2em; } /* Nav Trail */ .navtrail a { color: #F90; background: none; padding: 0; } .navtrail a:hover { #000; text-decoration: none; background: none; padding: 0; } #content { background: transparent; } .pad { padding-left: 40px; padding-right: 20px; } /* Home - IR */ h1#hdrhome { height: 60px; font-size: 3em; text-indent: -9999px; color: #716C87; background: url(../webgfx/chronos/ir/hdr_h1-home.gif) no-repeat; } .Home h1.subtitle { font-size: .9em; color: #666; text-transform: uppercase; font-weight: bold; margin-top: .2em; margin-bottom: 2em; } /* Secondary - cycling.php and /news/index.php */ h1.hdrpage { font:3em/1em arial, verdana, sans-serif; font-weight: bold; font-style: italic; color: #FC0; text-transform: uppercase; letter-spacing: -4px; margin:0; position: relative; overflow: hidden; padding-right: .2em; /* Added to prevent clipping -ND */ float: left; /* Added width: 100% Makes hdrpage spread all the way across and solves clearing issues on journal/day.php, but also spreads the layer gfx in roubaix which looks a little rectangular, not random enough. Probably can fix by playing with the psd. -ND */ width: 100%; } h1.hdrpage span { position: absolute; width: 100%; height: 1.2em; background: none; /* background: url(../webgfx/chronos/ir/stripes.gif) 50% 50%; */ } h2 { font-size: 1.5em; text-transform: uppercase; clear: left; } /* Stops intro from wrapping under h1 caused by .hdrpage */ p { clear: left; } /* Stops intro from wrapping under h1 and h2 caused by .hdrpage */ p.intro { clear: none; } /* Stops intro from wrapping under h1 and h2 caused by .hdrpage */ .News p.intro { clear: left; margin-top: 1em; margin-bottom: 1em; } /* Stops intro from wrapping under h1 and h2 caused by .hdrpage */ .Home #content-1 h2, .Home #content-2 h2 { margin-top: 1em; } #content-1 { width: 48%; float: left; clear: both; background: transparent; } #content-2 { width: 48%; float: right; background: transparent; } /* IE 5.5 Win Hack */ * html #content-1 { width: 45%; display: inline; } * html #content-2 { width: 45%; display: inline; } hr.spacer { margin-top: 1.5em; margin-bottom: 1.5em; } /* Journal */ h2.h2dec { font-size: 1em; font-weight: bold; text-transform: uppercase; text-align: left; padding-left: 25px; padding-bottom: 20px; background: url(../webgfx/chronos/bg_h2b.gif) 50% 90% no-repeat; } .itemjournal { margin-top: 1em; border-bottom: 2px solid #C2B395; margin-top: .5em; padding-top: .5em; } h1.hdrTitle { font-size: 1.6em; font-style: italic; color: #009; font-weight: normal; text-decoration: none; line-height: 1; background: none; } h1.hdrTitle a { color: #009; font-weight: normal; font-style: italic; text-decoration: none; line-height: 1; background: none; } h1.hdrTitle a:hover { color: #FC0; text-decoration: underline; background: none; clear: both; } h2.hdrTopic { display: inline; clear: left; margin-top: 3em; } h2.hdrDate { display: inline; font-size: .8em; font-weight: bold; text-transform: uppercase; margin-top: 2em; background: none; } h2.hdrTopic a { font-size: .4em; font-weight: bold; text-transform: uppercase; color: #666; margin-top: 2em; padding-right: 5px; margin-right: 5px; border-right: 1px solid #666; background: none; } /* News (Third Party) */ .itemnews { border-bottom: 1px solid #CCC; margin-top: .5em; padding-top: .5em; } #content-2 h1 { margin-top: .2em; padding-bottom: .2em; border-bottom: 1px solid #CCC; line-height: .4; } #content-2 h1.hdrTitle a { color: #009; font-size: .6em; font-style: italic; font-weight: normal; text-decoration: none; background: none; } #content-2 h1.hdrTitle a:hover { text-decoration: underline; background: none; } #content-2 h2.hdrDate { font-size: .6em; font-weight: bold; text-transform: uppercase; background: none; } /* Sup News - Topics and Archive Calendar */ /* Nav Journal */ #navjournal { margin-top: 2.2em; padding-top: 30px; background: url(../webgfx/chronos/bg_sup-journal.gif) top left no-repeat; } #navjournal h1 { font-size: 1em; text-transform: uppercase; } #navjournal ul { margin-left: 16px; padding-left: 0px; } #tblarchive { padding: 2px; margin: 0; border: none; } #tblarchive th { color: #CCC; background: #716C87; line-height: .8; padding-top: 3px; padding-bottom: 6px; } #tblarchive th a { font-size: 1.4em; color: #EEE; text-decoration: none; } #journalarticles { line-height: 1.2; } .Journal #supp { background: none; } /* Hide POWRFIT promo */ .News #supp { background: none; } /* Hide POWRFIT promo */ .Photos #supp { background: none; } /* Hide POWRFIT promo */ #supp { background: #FFF url(../webgfx/chronos/bg_powrfit.gif) 10px 0px no-repeat; margin-bottom: 50px; } #supp h1#first { margin-top: 110px; } /* Space for POWRFIT gfx. */ #supp h1 { font-size: .8em; font-weight: bold; color: #DA0; text-align: left; text-transform: uppercase; margin-top: 3em; border: none; } #supp p.first { font-size: .8em; font-weight: bold; color: #333; margin-top: 140px; } /* POWRFIT copy */ #supp p { font-size: .8em; color: #666; margin-top: 5px; } p { margin-top: 1em; margin-bottom: .5em; } a { color: #000; background: #EEE; text-decoration: none; padding: 3px; } a:hover { color: #000; background: #FC0; text-decoration: none; } a.linkPointer { font-size: 12px; font-weight: bold; font-style: italic; color: #009; text-decoration: none; text-transform: uppercase; padding-top: .4em; padding-bottom: .1em; padding-left: 22px; background: url(../webgfx/chronos/ico_link.gif) 0% 60% no-repeat; } a.linkPointer:hover { background: url(../webgfx/chronos/ico_link-over.gif) 0% 60% no-repeat; } #network { width: 100%; float: left; clear: both; padding-top: 1em; margin-top: 4em; margin-bottom: 2em; } #network h1 { font-size: 24px; font-weight: bold; padding-top: 10px; border-top: 4px solid #444; margin-top: 2em; } #col1 { float: left; width: 45% clear: both; } #col2 { float: right; width: 45% clear: both; } #network #col1 h1, #network #col2 h1 { border: none; margin: 0; padding: 0; } #network #col1 h1 a, #network #col2 h1 a { font-weight: bold; font-size: 18px; color: #627081; } #network h1 a:hover { text-decoration: none; } #network a { font-size: 12px; } #network a:hover { text-decoration: none; } #footer { width: 100%; padding-top: 260px; margin-top: 50px; color: #666; clear: both; background: #EEE url(../webgfx/chronos/bg_footer.jpg) no-repeat; } #footer h3 { margin-top: .5em; margin-bottom: 0em; } #footer p { margin-top: .2em; margin-bottom: .2em; } #footer li { display: inline; color: #333; padding-right: 10px; border-right: 1px solid #999; line-height: 1.2; } #footer a { color: #009; font-size: .8em; text-transform: uppercase; text-decoration: none; } #footer a:hover { color: #F90; } #footer ul.sitelinks { margin-top: 5px; font-weight: bold; } #footer ul.themes { margin-top: 5px; } #footer div.credits { margin-top: 5px; border-top: 1px solid #999; } #footer .pad { padding-top: 0px; padding-bottom: 0px; padding-left: 30px; padding-right: 30px; } .navtrail { font-size: 10px; text-transform: uppercase; } h2, h3, h4 { margin-top: 0; margin-bottom: .5em; line-height: 1; } h1, h2, h3, h4 { font-weight: normal; } h2 { font-style: italic; } h3, h4 { margin-top: 2em; margin-bottom: .5em; } .intro { font-size: 1.2em; line-height: 1.8em; color: #000; font-weight: normal; margin: 0px; padding: 0px; } #introgfx { width: 139px; height: 194px; float: left; margin: 10px 20px 5px 0px; background: url(../webgfx/chronos/bg_introgfx.gif) no-repeat; } /* Related [at the bottom of the page] */ hr { height: 1px; margin-top: 20px; margin-bottom: 20px; } #content ul { margin-left: 3em; } /* Forms */ fieldset { border: 1px solid #CCC; padding: 10px; margin-top: 0em; margin-bottom: 2em; } legend { font-size: .8em; font-weight: bold; text-transform: uppercase; color: #999; margin-left: 10px; margin-right: 10px; } fieldset p { font-size: .8em; } #searchphotos { background: none; } /* Photo/Caption Layout - Staff Bios */ #staff { width: 480px; float: left; padding: 0px; border: none; } /* floated to contain it's inner floats */ #staff dl { width: 480px; float: left; margin: 20px 20px; margin-left: 0; margin-right: 0; display: inline; padding: 0; } /* floated to contain it's inner floats, display: inline for IE/Win double margin bug */ #staff dt { width: 262px; float: right; font-size: 1.6em; line-height: 1.2; letter-spacing: -2px; color: #627081; } * html #staff dt { width: 262px; } /* IE5 should be 350 as 8px (4px + 4px) padding already taken in to account by IE */ #staff dd { font-size: .8em; line-height: 1.5; color: #777; margin: 0 0 0 218px; } #staff dl dd.img { margin: 0; } #staff dd.img img { float: left; margin: 0 8px 0 0; padding: 4px; border: 1px solid #D9E0E6; border-bottom-color: #B7BCC1; border-right-color: #B7BCC1; background: #FFF; } /* margin-right: 20px; for gutter */ #staff p { clear: none; } /* undoes the p clearing to clear hdrPage */ /* reverse direction of float */ #staff .alt dt { float: left; } #staff .alt dd { margin: 0 218px 0 0; } #staff .alt dd.img img { float: right; margin: 0 0 0 8px; } /* Tools */ .dev { text-indent: -9999px; } /* div { border: 1px solid #F00; } */