/* Adaptex StyleSheet */ /* Created by P Byford for IS Solutions Plc - Dec 2007 */ /* Modified by P Byford - Feb 2008 */ /* Modified by Peter Paris - 26-Feb-2008 (added EPiServer definitions) */ /******************* ACCESSIBILITY FONT SIZES ********************** The font-size MUST be 100%, and the browser text-size set to 'normal' or 'medium' for these to be valid. The 'ranges' are shown because the text snaps to a pixel-size in the browser. Where these figures are not contiguous, there is a discrepancy in where IE and Mozilla switch to displaying a different text-size. (PX) ( % ) (range) 8px 50% 48-53% 9px 56% 54-59% 10px 62% 60-65% 11px 68% 66-71% 12px 76% 73-78% 13px 82% 79-84% 14px 88% 85-90% 15px 94% 91-96% 16px 100% 98-103% 18px 112% 110-115% 20px 126% 123-128% 22px 138% 135-140% 24px 150% 148-153% 26px 162% 160-165% 28px 176% 173-178% 30px 188% 185-190% NB - one of the problems with this 'relative' method of sizing text is that nested item's sizes are changed with the parent's size. So be aware of changes to nested items when altering CSS at a future date. Also, if you need to nest text, find the right size by eye, and adjust up and down a little so the figure is in the middle of it's 'range'. ****************************************************************************/ /* Global styles */ body,td {font-family:Arial,Helvetica,sans-serif,Verdana; font-size:100%; margin:0px; color:#737a7e} body {background-color:#ffffff; text-align:center} table {border:0px; border-collapse:collapse; width:100%} td {padding:0px; margin:0px; vertical-align:top} form {margin:0px} input {margin:0px} a {color:#000000; text-decoration:underline} a:hover {color:#000000; text-decoration:underline} img {border:0px; vertical-align:top; margin:0px} div {text-align:left; background-position:left top; background-repeat:no-repeat} p {margin:0px} h1 {margin:0px} /* Top area */ #topArea {width:970px; height:85px;position:relative; margin-left:auto; margin-right:auto} #topArea img.mainLogo {position:absolute; top:22px; left:27px} #topArea div.mainLogoText { position:absolute; top:63px; left:27px; font-size:68%; font-weight:normal; color:#737a7e} #topArea div.topLinks { font-size:68%; font-weight:normal; color:#737a7e; text-align:right; padding:30px 15px 0px 0px} #topArea a {color:#737a7e; text-decoration:none} #topArea a:hover {color:#737a7e; text-decoration:underline} #topArea div.dropDown { font-size:68%; font-weight:normal; color:#737a7e; text-align:right; padding:10px 15px 0px 0px} /* Green horizontal strip */ #greenStrip {width:100%; height:95px; position:absolute; top:85px; left:0px; background-color:#cbd300} #navArea { width:955px; height:77px; position:relative; margin-left:auto; margin-right:auto; padding:18px 0px 0px 15px; background:url(/images/bg_nav.gif) bottom left no-repeat #cbd300} #navArea div.navItem { background-color:#cbd300; margin:0px 6px 0px 0px; font-size:68%; font-weight:normal; color:#202020; text-align:center; padding:4px 7px 3px 7px; border-top:1px solid #ffffff; border-right:1px solid #ffffff; border-left:1px solid #ffffff; float:left} #navArea div.navItem a {color:#202020; text-decoration:none} #navArea div.navItem a:hover {color:#202020; text-decoration:none} #navArea div.navOn { background-color:#ffffff; border-top:1px solid #737a7e; border-right:1px solid #737a7e; border-left:1px solid #737a7e; padding-bottom:4px} #navArea h1.header {position:absolute; top:65px; left:180px; font-size:126%; font-weight:normal; color:#737A7E} #navArea h1.header .greenEx {color:#CBD300} #navArea h1.homeHeader {position:absolute; top:65px; left:30px; font-size:126%; font-weight:normal; color:#737A7E} #navArea h1.homeHeader .greenEx {color:#CBD300} /* Content area height:386px when scrolling */ #contentArea { width:970px; position:relative; margin-left:auto; margin-right:auto; background:url(/images/bg_cont.gif) top left repeat-y #ffffff} /* Column 1 */ #contentArea div.homeColOne {width:290px; float:left; padding-left:30px} #contentArea div.colOne {width:121px; float:left; padding-left:47px} #contentArea p {font-size:76%; font-weight:normal; color:#737a7e; margin-bottom:10px} #contentArea p.leadCopy {font-size:88%; font-weight:bold; color:#cbd300} #contentArea p.noMargin {margin-bottom:0px} #contentArea div.leftNavHeading { font-size:76%; font-weight:bold; color:#737a7e; margin:0px 0px 4px 0px; padding:0px 0px 3px 0px; border-bottom:1px solid #cbd300} /* NB: The following "leftNavLink" definitions are not used in EPiServer implementation (EPiServer components use "Left-hand sub-menu styles" defined later in this CSS)... */ #contentArea div.leftNavLink {font-size:68%; color:#737a7e; margin:0px 0px 4px 6px} #contentArea div.leftNavLink a {color:#737a7e; text-decoration:none; float:right} #contentArea div.leftNavLink a:hover {color:#737a7e; text-decoration:underline} #contentArea div.leftNavLinkActive a {color:#737a7e; text-decoration:italic} /* End of unused "leftNavLink" definitions */ /* The following "relatedLinks" definition is used in EPiServer implementation... */ #contentArea div.relatedLinks { font-size:76%; font-weight:bold; color:#cbd300; margin:30px 0px 10px 0px; padding:0px 0px 0px 0px} /* NB: The following "relatedLinks" definitions are not used in EPiServer implementation (EPiServer components use "Left-hand sub-menu styles" defined later in this CSS)... */ #contentArea div.relatedLinks h2 { font-size:76%; font-weight:bold; color:#cbd300; margin:10px 0px 10px 0px; padding:0px 0px 0px 0px} #contentArea div.relatedLinks div {font-size:68%; color:#737a7e; text-decoration:none} #contentArea div.relatedLinks a {color:#737a7e; text-decoration:none} #contentArea div.relatedLinks a:hover {color:#cbd300; text-decoration:none} /* End of unused "relatedLinks" definitions */ #contentArea div.bulletListArrow div { font-size:76%; font-weight:normal; margin:0px 0px 3px 0px; padding:0px 0px 0px 9px; background:url(/images/bullet_arrow.gif) left center no-repeat #ffffff} #contentArea div.bulletListArrow a {color:#737a7e; text-decoration:none} #contentArea div.bulletListArrow a:hover {color:#737a7e; text-decoration:underline} #contentArea ul {margin-top:0px} #contentArea li {font-size:76%; font-weight:normal; color:#737a7e} /* Column 2 */ #contentArea div.homeColTwo {width:300px; float:left; margin-left:10px} #contentArea div.colTwo {width:535px; float:left; margin-left:12px} #contentArea div.bulletListSquare {margin:0px 0px 10px 0px} #contentArea div.bulletListSquare div { font-size:76%; font-weight:bold; font-style:italic; color:#737a7e; margin:0px 0px 0px 0px; padding:0px 0px 0px 17px; background:url(/images/bullet_square.gif) left center no-repeat #ffffff} #contentArea div.bulletListSquare a {color:#737a7e; text-decoration:none} #contentArea div.bulletListSquare a:hover {color:#737a7e; text-decoration:underline} /* Columns 1 and 2 */ #contentArea div.homeColOneAndTwo {width:590px; float:left; padding-left:30px} /* Column 3 */ #contentArea div.homeColThree {width:300px; float:left; margin-left:10px} #contentArea div.colThree {width:204px; float:left; margin-left:10px} #contentArea div.infoBox {border:1px solid #737a7e; margin-bottom:10px} #contentArea div.infoHeader { font-size:112%; font-weight:normal; font-style:italic; color:#ffffff; background-color:#cbd300; padding:11px 0px 3px 10px} #contentArea div.newsBody {font-size:68%; color:#737a7e; padding:6px 0px 6px 10px} #contentArea div.newsHeadline {font-weight:bold; text-decoration:none} #contentArea div.newsHeadline a {color:#737a7e; font-weight:bold; text-decoration:underline} #contentArea div.newsHeadline a:hover {color:#737a7e; text-decoration:underline} #contentArea div.newsText {font-weight:normal; text-decoration:none; margin-bottom:10px} #contentArea div.infoText {font-size:76%; font-weight:bold; font-style:italic; color:#737a7e; padding:10px 0px 0px 10px} #contentArea div.infoImg {width:125px; padding:0px 0px 0px 0px; float:right} #contentArea div.floatClear {clear:both; font-size:0px} /* Blue strip */ #spacerArea { width:970px; height:14px; position:relative; margin-left:auto; margin-right:auto; background:url(/images/bg_cont.gif) left top repeat-y #ffffff} #spacerArea img.symbol {position:relative; left:77px} #blueStrip {height:70px; background:url(/images/bg_bluestrip.gif) left top repeat-x #47a2c1} #blueArea {width:970px; height:70px; position:relative; margin-left:auto; margin-right:auto} #blueArea img.symbol {position:relative; left:53px} #blueArea img.slogan {float:right; margin:22px 40px 0px 0px} /* Footer area */ #footerArea { width:970px; height:42px; position:relative; margin-left:auto; margin-right:auto; background:url(/images/bg_footer.gif) left top no-repeat #ffffff} #footerArea img.symbol {position:relative; left:64px} #footerArea div.footerLinks { font-size:68%; font-weight:normal; color:#737a7e; text-align:right; padding:6px 40px 0px 0px; float:right} #footerArea a {color:#737a7e; text-decoration:none} #footerArea a:hover {color:#737a7e; text-decoration:underline} /**************************************************************** Left-hand sub-menu styles (as required by EPiServer components) ****************************************************************/ #contentArea a.MenuHeaderLink { background-color: #CC3333; height: 2em; color: #000000; text-transform: lowercase; letter-spacing: 0.1em; text-decoration: none; display: block; font-size: 1.2em; padding: 0.4em 0.1em 0.1em 0.5em; } #contentArea a.MenuHeaderLink:hover { color: #CCCCCC; } #contentArea div.MenuHeader { background-color: #CC3333; height: 2em; color: #000000; text-transform: lowercase; letter-spacing: 0.1em; text-decoration: none; display: block; font-size: 1.2em; padding: 0.4em 0.1em 0.1em 0.5em; } #contentArea div.MenuFooter { background-color: #CCCCCC; text-decoration: none; display: block; height: 2em; padding: 0.4em 0em 0.1em 0em; text-align: center; } #contentArea div.MenuItemContainer { width: 100%; float: left; } #contentArea div.MenuItemIndent { float: left; text-align: right; } #contentArea div.MenuItem { float: right; } #contentArea a.MenuLink { color: #737a7e; font-size:68%; font-weight: normal; text-decoration: none; display: block; } #contentArea a.MenuLink:hover { color: #cbd300; } #contentArea a.MenuLinkActive { color: #737a7e; font-size:68%; font-weight: normal; text-decoration: none; display: block; font-style: italic; } #contentArea a.MenuLinkActive:hover { color: #cbd300; } /**************************************************************** EPiServer definitions (copied from EPiServer's Units.css) ****************************************************************/ /* ----- Conference items (note that mis-spelling of "conference" inherited from EPiServer and retained so templates don't need changing) --- */ div.conferance { width: 100%; padding: 0.3em; } div.conferancelinkbuttonsarea { margin-top: 0.3em; float: right; } div.conferanceheader { width: 100%; }