/* --------------------------------------------------------------------------------- = ACKNOWLEDGEMENT --------------------------------------------------------------------------------- */ /* Author: Christopher Taylor, Stephen Dupree Date: Copyright November 2008 */ /* --------------------------------------------------------------------------------- = IMPORT SEPERATE STYLE SHEETS --------------------------------------------------------------------------------- */ @import url(reset.css); @import url(print.css); @import url(typography.css); @import url("ddlevelsmenu-base.css"); @import url("ddlevelsmenu-sidebar.css"); /* --------------------------------------------------------------------------------- = MAIN ELEMENTS --------------------------------------------------------------------------------- */ * { margin: 0; padding: 0; } body { font-size: 62.5%; font-family:Arial, Helvetica, sans-serif; text-align:center; margin:0; background: url(../images/bg.png) top no-repeat #d2d2d2; } .wrapBg { width:820px;margin:0px auto; background:#FFFFFF; background:url(../images/bg_contentShadow.png) top repeat-y; } .wrapper { width:800px; text-align:left; margin:0px auto; background:#F4EDDF; } div.hr { height: 3px; background: #fff url('../images/hr.gif') repeat-x scroll center; } div.hr hr { display: none; } /* --------------------------------------------------------------------------------- = LAYOUT ELEMENTS --------------------------------------------------------------------------------- */ .clear { clear: both; } div#masthead { position:relative; height:240px; padding:0px 0px 0px 26px; background:url(../images/bg_masthead.png) no-repeat top; } div#content { background:#FFFFFF url(../images/bg_content.png) repeat-y; } div#footer { position:relative; height:73px; background:#b39d9d; } div#backTop { position:relative; height:34px; background:url(../images/bg_backTop.png) no-repeat; padding:0px 0px 0px 233px; } div#leftCol { float:left; padding:0px; width:233px; background:url(../images/nav/bg_navTop.png) top no-repeat; margin:0 32px 0 0; } div#centreCol { float:left; padding:0px; width:324px; margin:15px 40px 0 0; } div#rightCol { float:right; padding:0px; width:159px; } /* --------------------------------------------------------------------------------- NAVIGATION --------------------------------------------------------------------------------- */ a { outline: none; } a:link { outline:none; color:#f077ad; text-decoration: underline; font-weight:bold; } a:visited { text-decoration: underline; color:#f077ad; font-weight:bold; } a:hover { text-decoration: none; color:#f077ad; font-weight:bold; } a:active { text-decoration: underline; color:#f077ad; font-weight:bold; } ul#mainNav a:visited { /* visited pseudo selector so IE6 applies text colour*/ text-decoration: none; color:#FFF; font-weight:bold; } div#backTop a { display:block; height:34px; text-indent:-9999px; } /* Main navigation */ div#mainNavContainer { margin-top:32px; background:url(../images/nav/bg_navRepeat.png) repeat-y top; } /* Main navigation ul#mainNav { text-align:left; font-size:1.3em; font-weight:bold; list-style:none; } ul#mainNav li { border-bottom:1px solid #9e9d9d; padding:0; margin:0; } ul#mainNav li a { display:block; padding:7px 20px 7px 20px; text-decoration:none; color:#FFF; width:100%; } html>body ul#mainNav li a { width:auto; } ul#mainNav li a:hover { color:#FFF; text-decoration:none; background-color:#e9007d; } /* Site logo */ h1 { position:absolute; top:11px; width:151px; height:133px; margin:0; overflow: hidden; background:url(../images/logo_checkinitout.png) no-repeat; z-index:10; } h1 a:link, h1 a:hover, h1 a:visited, h1 a:active { display: block; width:151px; height:133px; text-indent: -9999px; } /* --------------------------------------------------------------------------------- CONTACT --------------------------------------------------------------------------------- */ div#contactDetails { background:url(../images/nav/bg_contact.png) no-repeat top; width:233px; height:80px; } div#contactDetails ul { padding-top:10px; font-size:1.4em; color:#fff; font-weight:bold; } div#contactDetails ul a { color:#fff; font-weight:bold; text-decoration:underline; } div#contactDetails ul a:hover { color:#fff; font-weight:bold; text-decoration:none; } div#contactDetails li { margin-left:20px; padding:0 7px 8px 0; line-height:1.2em } div#contactDetails li img { margin-right:10px; vertical-align:middle; display:inline; } /* --------------------------------------------------------------------------------- BUTTONS --------------------------------------------------------------------------------- */ div#btn_test { height:177px; width:150px; text-indent:-9999px; margin-top:8px; } div#btn_test a { height:177px; width:150px; background:url(../images/btns/btn_test.png) top center no-repeat; display:block; } div#btn_advice { height:147px; width:150px; text-indent:-9999px; margin-top:8px; } div#btn_advice a { height:147px; width:150px; background:url(../images/btns/btn_advice.png) top center no-repeat; display:block; } div#btn_faq { height:60px; width:150px; text-indent:-9999px; margin-top:8px; } div#btn_faq a { height:60px; width:150px; background:url(../images/btns/btn_faq.png) top center no-repeat; display:block; } div#btn_contact { height:60px; width:150px; text-indent:-9999px; margin-top:8px; } div#btn_contact a { height:60px; width:150px; background:url(../images/btns/btn_contact.png) top center no-repeat; display:block; } div#btn_freeTest { height:98px; width:150px; text-indent:-9999px; margin-top:18px; } div#btn_freeTest a { height:98px; width:150px; background:url(../images/btns/btn_freetest.png) top center no-repeat; display:block; } div#btn_emergency { height:88px; width:150px; text-indent:-9999px; margin-top:8px; margin-left: 20px; } div#btn_emergency a { height:88px; width:150px; background:url(../images/btns/btn_emergency_contraception.png) top center no-repeat; display:block; } /* --------------------------------------------------------------------------------- PAGE TITLES --------------------------------------------------------------------------------- */ #home h2 { background: url(../images/titles/title_home.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px; } #whatIs h2 { background: url(../images/titles/title_whatIs.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px; } #howCanGet h2 { background: url(../images/titles/title_howCanYou.png) left no-repeat; width:324px; height:57px; margin-bottom: 10px; text-indent:-9999px; } #howCanTell h2 { background: url(../images/titles/title_howCanITell.png) left no-repeat; width:324px; height:57px; margin-bottom: 10px;text-indent:-9999px; } #left h2 { background: url(../images/titles/title_leftUntreated.png) left no-repeat; width:324px; height:57px; margin-bottom: 10px;text-indent:-9999px; } #theTest h2 { background: url(../images/titles/title_theTest.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px;} #testResults h2 { background: url(../images/titles/title_testResults.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px; } #treatment h2 { background: url(../images/titles/title_treatment.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px;} #shouldITell h2 { background: url(../images/titles/title_shouldITell.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px;} #prevented h2 { background: url(../images/titles/title_prevented.png) left no-repeat; width:324px; height:57px; margin-bottom: 10px; text-indent:-9999px;} #confident h2 { background: url(../images/titles/title_confident.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px;} #other h2 { background: url(../images/titles/title_otherSexHealthInfo.png) left no-repeat; width:324px; height:57px; margin-bottom: 10px; text-indent:-9999px;} #getTested h2 { background: url(../images/titles/title_whereCanI.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px;} #advice h2 { background: url(../images/titles/title_adviceLinks.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px;} #faq h2 { background: url(../images/titles/title_faq.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px;} #contact h2 { background: url(../images/titles/title_contactUs.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px;} #emergencyContraception h2 { background: url(../images/titles/title_emergency_contraceptive.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px;} #gumServices h2 { background: url(../images/titles/title_gumServices.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px;} #openingHours h2 { background: url(../images/titles/title_opening_hours.png) left no-repeat; width:324px; height:32px; margin-bottom: 10px; text-indent:-9999px;} #cinema h2 { background: url(../images/titles/title_cinema.png) left no-repeat; width:324px; height:57px; margin-bottom: 10px; text-indent:-9999px;} /* --------------------------------------------------------------------------------- FOOTER ELEMENTS --------------------------------------------------------------------------------- */ ul#footerNav { float:left; text-align:left; font-size:1.2em; font-weight:normal; list-style:none; color:#FFF; margin: 30px 0 0 10px;} ul#footerNav li { display: inline; padding:0; margin:0; } ul#footerNav li a { text-decoration:none; color:#FFF; } html>body ul#footerNav li a { width:auto; } ul#footerNav li a:hover { color:#FFF; text-decoration:underline; } #nhsLogo { float:right; margin: 30px 10px 0 0;} /* --------------------------------------------------------------------------------- = FORMS --------------------------------------------------------------------------------- */ /* Form elements */ /* fieldset {padding:10px 30px;margin:0;border:1px solid #ccc;-moz-border-radius:1em;-webkit-border-radius:1em;border-radius:1em;border-bottom-width:10px;} legend {color:#333;padding:0 10px;margin:0;font-size:1.5em;font-weight:400;} input {width:250px;} input, textarea {border:1px solid #ccc;padding:5px;margin:10px 0 0 0;} input:focus, textarea:focus {background:#ffc;} textarea {font:.9em Verdana, Arial, Helvetica, sans-serif;} label {display:block;margin:12px 0 0;font-weight:700;font-size:.9em;float:left;clear:left;width:90px;} label:after {content:": ";} button {display:block;float:left;clear:both;margin:1em 0 1em 90px;} */ /* User feedback */ /* .yay, .oops {font-size:.8em;text-align:center;padding:10px;color:#fff;font-weight:700;} .yay {background:#090;} .oops {background:#f30;} div.error {font-size:.8em;font-weight:700;padding:5px 0 0;color:#f30;margin:0 0 0 90px;} */