/* --------------------------------------------------------------------------------- = ACKNOWLEDGEMENT --------------------------------------------------------------------------------- */ /* Author: Christopher Taylor, Stephen Dupree Date: Copyright September 2008 */ /* --------------------------------------------------------------------------------- = IMPORT SEPERATE STYLE SHEETS --------------------------------------------------------------------------------- */ @import url(reset.css); @import url(print.css); @import url(typography.css); @import url(jquery.lightbox-0.5.css); /* --------------------------------------------------------------------------------- = MAIN ELEMENTS --------------------------------------------------------------------------------- */ * { margin: 0; padding: 0; } body { font-size: 62.5%; font-family:"Helvetica Neue", Helvetica, sans-serif; text-align:center; margin:0; background: url(../images/bg.jpg) top no-repeat #808080; } div#wrapper { width:790px; text-align:left; margin:0px auto; } .container { width:790px; margin:0px auto; clear: both; } /* for head, main and foot */ div.clear { clear: both; } .floatLeft { float: left; } .floatRight { float: right; } /* --------------------------------------------------------------------------------- = HOME PAGE LAYOUT ELEMENTS --------------------------------------------------------------------------------- */ /* Main logo */ h1#logo { position:absolute; top:20px; left:25px; height:68px; width:250px; margin:0; overflow: hidden; background:url(../images/logo.png) no-repeat; z-index:10; } h1#logo a:link, h1#logo a:hover, h1#logo a:visited, h1#logo a:active { display: block; height:102px; width:374px; text-indent: -9999px; } /* In Head Container */ div#masthead { position:relative; height:100px; } div#navigation { float:left; margin:0; width:254px; } div#videoTrailer { float:right; margin:0; width:509px; height:420px; background:url(../images/video_bg.png) top center no-repeat; } div#colContent { float:right; margin:0; width:491px; } /* In Main Container */ div#colLeft { float:left; margin-top:10px; width:491px; } div#colRight { float:right; margin-top:10px; width:270px; } /* In Foot Container */ div#footerContent { float: left; width:100%; background: url(../images/bg_footer.png) top center no-repeat #dcdcdc; padding-bottom:20px; margin: 0; } /* --------------------------------------------------------------------------------- = STANDARD PAGE LAYOUT ELEMENTS --------------------------------------------------------------------------------- */ /*h2#titleNews { background:url(../images/titles/title_campaignNews.png) left no-repeat; width:491px; height:40px; text-indent:-9999px; } */ div#contentHead { width:100%; height:40px; } div#contentWrap { background-color:#FFFFFF; width:491px; } div#contentMain { padding:20px; } div#contentFoot { background:url(../images/bg_newsFoot.png) no-repeat; width:491px; height:54px; } /* standard content lists */ div#contentMain ul { list-style:disc; font-size:1.2em; padding: 0 20px; margin-bottom:1em; } div#contentMain li { padding:0 0 5px 0; } /* Home page titles */ h2#homePageTitle { color:#18b0f0; font-size:1.7em; margin-bottom:1em; } /* Sub page titles */ h2#subPageTitle { color:#d46401; font-size:1.8em; margin-bottom:1em; } h2.subPageTitle { color:#d46401; font-size:1.8em; margin-bottom:1em; } /* --------------------------------------------------------------------------------- = NAVIGATION --------------------------------------------------------------------------------- */ div#mainNav { width:254px; margin:10px 0px 0px 0px; padding:0; } div#mainNav li, div#mainNav a { height:42px; display:block; text-indent:-9999px; } div#mainNav a { cursor: pointer; } #home { background:url(../images/nav/nav_home.png) 0px 0px no-repeat; } #facts { background:url(../images/nav/nav_facts.png) 0px 0px no-repeat; } #parents { background:url(../images/nav/nav_parents.png) 0px 0px no-repeat; } #youngPeople { background:url(../images/nav/nav_young_people.png) 0px 0px no-repeat; } #resources { background:url(../images/nav/nav_resources.png) 0px 0px no-repeat; } #survey { background:url(../images/nav/where_you_at_survey.png) 0px 0px no-repeat; margin-top:10px; zoom:1; } #survey a { cursor:pointer; text-indent:-9999px; display:block; height:100px; } #quiz { background:url(../images/nav/pub_quiz2012.png) 0px 0px no-repeat; margin-top:10px; zoom:1; } #quiz a { cursor:pointer; text-indent:-9999px; display:block; height:100px; } #home a:hover { background:url(../images/nav/nav_home.png) 0px -42px no-repeat; } #facts a:hover { background:url(../images/nav/nav_facts.png) 0px -42px no-repeat; } #parents a:hover { background:url(../images/nav/nav_parents.png) 0px -42px no-repeat; } #youngPeople a:hover { background:url(../images/nav/nav_young_people.png) 0px -42px no-repeat; } #resources a:hover { background:url(../images/nav/nav_resources.png) 0px -42px no-repeat; } #survey a:hover { background:url(../images/nav/where_you_at_survey.png) 0px -100px no-repeat; } #quiz a:hover { background:url(../images/nav/pub_quiz2012.png) 0px -100px no-repeat; } div#backTop { position:relative; height:23px; background:url(../images/backToTop.png) no-repeat; padding:0px 0px 0px 0px; } div#backTop a { display:block; height:23px; text-indent:-9999px; border:none; } div#backTop2 { position:relative; height:23px; background:url(../images/backToTop.png) no-repeat center; padding:0px 0px 0px 0px; } div#backTop2 a { display:block; height:23px; text-indent:-9999px; border:none; } a { outline: none; } a:link { outline:none; color:#18b0f0; text-decoration: none; font-weight:bold; } a:visited { text-decoration: none; color:#18b0f0; font-weight:bold; } a:hover { text-decoration: underline; color:#18b0f0; font-weight:bold; } a:active { text-decoration: none; color:#18b0f0; font-weight:bold; } .factText { font-style:italic; color:#d46401; font-weight:bold } .factText a { color:#23aaec } /* Sub Navigation */ div#subNav { float:right; width:100%; margin:0 0 20px 0; padding:0 0 0 0; list-style:none; } div#subNav ul { padding:0; /* position with padding */ } div#subNav li { float:left; margin:0 5px 5px 0; padding:0; list-style:none; width:140px; } div#subNav a { display:block; margin:0; padding:4px 4px; color:#fff; text-decoration:none; border: 1px solid #9b8748; background:#d46401; } div#subNav a:hover, body #page1 #link1 a { color:#fff; background:#000; } /* --------------------------------------------------------------------------------- = CONTACT DETAILS --------------------------------------------------------------------------------- */ div#supportLinesHeadLeftCol { width:100%; height:36px; margin-top:10px; } div#supportLinesMainLeftCol { background-color:#FFFFFF; width:254px; margin:0; } div#supportLinesContentLeftCol { padding:20px; } div#supportLinesFootLeftCol { background:url(../images/bg_supportLinesFoot.png) no-repeat; width:254px; height:42px; } div#supportLinesHead { width:100%; height:36px; } div#supportLinesMain { background-color:#FFFFFF; width:270px; } div#supportLinesContent { padding:20px; } div#supportLinesFoot { background:url(../images/bg_supportLinesFoot.png) no-repeat; width:270px; height:42px; } div#supportLinesContent h2 { font-size:1.4em; color:#d46401; font-weight:bold; margin-bottom:0.1em; } div#supportLinesContent h3 { font-size:1.3em; color:#d46401; font-weight: normal; margin-bottom:0.2em; } div#supportLinesContent p { font-size:1.2em; line-height:1.2em; color:#000; margin-bottom:0.1em; } div#supportLinesContent ul { padding-top:40px; font-size:1.3em; color:#000; list-style:none; } div#supportLinesContent ul a { color:#000; font-weight:bold; text-decoration:none; } div#supportLinesContent ul a:hover { color:#000; font-weight:bold; text-decoration: underline; } div#supportLinesContent li { margin-left:80px; padding:0 7px 8px 0; line-height:1.2em; } div#supportLinesContent li img { margin-right:10px; vertical-align:middle; display:inline; } /* --------------------------------------------------------------------------------- = TITLES --------------------------------------------------------------------------------- */ h2#titleWelcome { background:url(../images/titles/title_welcome.png) left no-repeat; width:491px; height:40px; text-indent:-9999px; } h2#titleTrailer { background: url(../images/titles/title_trailer.png) left no-repeat; width:383px; height:51px; margin-bottom: 2px; text-indent:-9999px; } h2#titleComp { background: url(../images/titles/title_competition.png) left no-repeat; width:383px; height:51px; margin-bottom: 2px; text-indent:-9999px; } h2#titleFeature { background: url(../images/titles/title_feature.png) left no-repeat; width:383px; height:51px; margin-bottom: 2px; text-indent:-9999px; } h2#titleGallery { background: url(../images/titles/title_gallery.png) left no-repeat; width:239px; height:46px; margin-bottom: 2px; text-indent:-9999px; } h2#titleMaterials { background: url(../images/titles/title_materials.png) left no-repeat; width:239px; height:49px; margin-bottom: 2px; text-indent:-9999px; } h2#titleAlcoholAwareness { background: url(../images/titles/title_alcoholAwareness.png) left no-repeat; width:239px; height:61px; margin:8px 0 2px 11px; text-indent:-9999px; } h2#titleUseful { background: url(../images/titles/title_useful.png) left no-repeat; width:214px; height:29px; margin-bottom: 5px; text-indent:-9999px; } h2#titleNews { background:url(../images/titles/title_campaignNews.png) left no-repeat; width:491px; height:40px; text-indent:-9999px; } h2#titleFactsAndInfo { background:url(../images/titles/title_factAndInfo.png) left no-repeat; width:491px; height:40px; text-indent:-9999px; } h2#titleSurvey { background:url(../images/titles/title_survey.png) left no-repeat; width:491; height:40px; text-indent:-9999px; } h2#titleParent { background:url(../images/titles/title_infoForParents.png) left no-repeat; width:491px; height:40px; text-indent:-9999px; } h2#titleYoungPeople { background:url(../images/titles/title_infoForYoungPeople.png) left no-repeat; width:491px; height:40px; text-indent:-9999px; } h2#titleResources { background:url(../images/titles/title_resources.png) left no-repeat; width:491px; height:40px; text-indent:-9999px; } h2#titleUsefulServices { background:url(../images/titles/title_usefulServices.png) left no-repeat; width:491px; height:40px; text-indent:-9999px; } h2#titleMedia { background: url(../images/titles/title_media.png) left no-repeat; width:239px; height:49px; margin-bottom: 10px; text-indent:-9999px; } h2#titleSupportLines { background:url(../images/titles/title_supportLines.png) left no-repeat; width:270px; height:36px; text-indent:-9999px; } h2#titleSupportLinesLeftCol { background:url(../images/titles/title_supportLinesLeftCol.png) left no-repeat; width:254px; height:36px; text-indent:-9999px; } /* --------------------------------------------------------------------------------- = VIDEO TRAILER --------------------------------------------------------------------------------- */ div#flashContent { width:480px; height:308px; padding:0 0 0 15px; } /* --------------------------------------------------------------------------------- = MAIN CONTENT --------------------------------------------------------------------------------- */ #pub_quiz { background:url(../images/pub_quiz.png) left no-repeat; width:239px; height:219px; text-indent:-9999px; margin:0px; padding:0px; } #pub_quiz a { display:block; width:239px; height:219px;margin:0px; padding:0px; } /* GALLERY ----------------- */ /* p.thumbs{ padding: 12px 0 12px 0; } .thumbs img { position: relative; border: 1px solid #ebebeb; background: none; padding: 3px; margin: 3px; } .thumbs img:hover { border: 1px solid #000000; background: none; } .thumbs a:hover { background-color: transparent; border: none } */ #thumbs p { padding: 12px 0 12px 0; } #thumbs img { position: relative; border: 1px solid #ebebeb; background: none; padding: 3px; margin: 3px; } #thumbs img:hover { border: 1px solid #000000; background: none; } #thumbs a:hover { background-color: transparent; border: none } */ /* CAMPAIGN NEWS ----------------- */ div#newsHead { width:100%; height:40px; } div#newsMain { background-color:#FFFFFF; width:491px; } div#newsContent { padding:20px; } div#newsContent img { margin:0 0 0 10px; float:right; border:#18b0f0 solid 1px; padding:2px;} div#newsFoot { background:url(../images/bg_newsFoot.png) no-repeat; width:491px; height:54px; } /* Campaign news lists */ div#newsMain ul { list-style:disc; font-size:1.2em; padding: 0 20px; margin-bottom:1em; } div#newsMain li { padding:0 0 5px 0; } /* hr break */ div.hr { height: 2px; color:#000; repeat-x scroll center; margin-bottom:1em; } /* XMAS CAMPAIGN MATERIALS ----------------- */ div#colRight ul.sidelist { text-align: left; margin: 7px 5px 8px 0px; padding: 0; text-decoration: none; } div#colRight ul.sidelist li { list-style: none; border-bottom:solid #000000 1px; padding: 8px 10px; margin: 0; font-size:1.2em; } * html body #colRight ul.sidelist li { height: 1%; } /* title link */ div#colRight ul.sidelist li a { font-size:1.4em; border: none; color: #fff; font-weight: bold; text-decoration: none; } /* smaller link */ div#colRight ul.sidelist li a span { color: #fff; font-size:0.6em; font-weight: bold; text-decoration:none; } div#colRight ul.sidelist li a:hover { color: #000; text-decoration:underline; } div#colRight ul.sidelist li a:hover span { color: #000; text-decoration:underline; } /* --------------------------------------------------------------------------------- = FOOTER CONTENT --------------------------------------------------------------------------------- */ .footerColLeft { display: inline; float: left; width:217px; margin:40px 12px 30px 24px; } .footerColRight { display: inline; float: left; width:200px; margin:40px 12px 30px 24px; } .footerColLogos { display: inline; float: left; width:230px; margin:40px 12px 30px 24px; } div#footerContent h2, div#footerContent p { padding-left: 0; } div#footerContent a { color: #000; background: transparent; } /* Useful services */ /* div#footerContent ul.footerList { margin:0; padding:0; list-style: none; } { margin-left:0em; padding-left:0.2em; margin-bottom:1em; font-size:1.2em; } div#footerContent ul.footerList li { padding: 0px 0px 0px 28px; border-bottom: 1px solid #000000; font-size:1.2em; color:#333333; background: url(../images/bullet.png) no-repeat 0 0.3em; } { border-bottom: 1px solid #000000; background:url(../images/bullet.png) no-repeat; background-position:left top; /* change background em accordingly */ padding:0 0 2em 2em; list-style: none; margin-bottom:0; } */ ul.footerList { list-style:none; font-size:1.2em; padding: 0 20px; margin-bottom:1em; } ul.footerList li { padding:10px 0 5px 0; border-bottom:1px solid #000; zoom:1; font-size:1.2em; } /* footer-bottom */ div#footerBottom { clear: both; width: 750px; margin: 0 auto; } div#footerBottom a { color:#FFFFFF; } div#footerBottom .bottomLeft { float: left; /* padding-left: 5px;*/ } div#footerBottom .bottomRight { text-align: right; padding-right: 0; } /* Main logo */ h1#logoFooter { height:63px; width:217px; margin:10px 0 0 0; overflow: hidden; background:url(../images/logo_footer.png) no-repeat; z-index:5; } h1#logoFooter a:link, h1#logoFooter a:hover, h1#logoFooter a:visited, h1#logoFooter a:active { display: block; height:63px; width:217px; text-indent: -9999px; } /* contact details */ div#contactFooter ul { padding-top:20px; font-size:1.4em; color:#000; font-weight:bold; list-style:none; } div#contactFooter ul a { color:#000; font-weight:bold; text-decoration: none; } div#contactFooter ul a:hover { color:#000; font-weight:bold; text-decoration:underline; } div#contactFooter li { margin-left:0px; padding:0 7px 10px 0; line-height:1.2em; } div#contactFooter li img { margin-right:10px;vertical-align:middle; display:inline; border:0; padding:0; background:none; } /* footer logos */ div#footerContent a:link img { border: 1px solid #fff; } div#footerContent a:hover img { border: 1px solid #000; } div#footerContent img { border: 1px solid #fff; } .footerColRight p { margin-bottom:0; } .footerColRight img { margin-bottom:0px; } .footerColRight a { margin-bottom:0px } /* --------------------------------------------------------------------------------- = IMAGES --------------------------------------------------------------------------------- */ /* img { background: #fafafa; border: 1px solid #dcdcdc; padding: 5px; } */ img.floatRight { margin: 5px 0px 10px 10px; } img.floatLeft { margin: 5px 10px 20px 0px; } /* --------------------------------------------------------------------------------- = FLASH MP3 PLAYER --------------------------------------------------------------------------------- */ .flashMp3 { background: url(../images/bg_rightcol.png) top; padding:3em 0 1em 0; text-align:center; margin-bottom:1em; } /* --------------------------------------------------------------------------------- = THUMBNAIL GALLERY --------------------------------------------------------------------------------- */ div#thumbContainer { width:451px; margin:0; float:right; } div.imgBox { width:143px; float:left; margin:0 0 20px 0; } .imgBox h4 { margin:0.5em 0 0.5em 0; } .imgBox p { font-size:1.2em; line-height:1em; color:#333333; margin:0 0 0 3px; } .imgBox a:hover { color:#d46401 } #whereAreYouAt { background:url(../images/resources/where_you_at_quiz.jpg) 0px 0px no-repeat; } #whereAreYouAt a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #whereAreYouAt a:hover { background:url(../images/resources/where_you_at_quiz.jpg) 0px -143px no-repeat; } #ypPoster { background:url(../images/resources/yp_poster.jpg) 0px 0px no-repeat; } #ypPoster a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #ypPoster a:hover { background:url(../images/resources/yp_poster.jpg) 0px -143px no-repeat; } #ypPostcard { background:url(../images/resources/yp_postcard.jpg) 0px 0px no-repeat; } #ypPostcard a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #ypPostcard a:hover { background:url(../images/resources/yp_postcard.jpg) 0px -143px no-repeat; } #parentsPoster { background:url(../images/resources/parents_poster.jpg) 0px 0px no-repeat; } #parentsPoster a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #parentsPoster a:hover { background:url(../images/resources/parents_poster.jpg) 0px -143px no-repeat; } #parentsPostcard { background:url(../images/resources/parents_postcard.jpg) 0px 0px no-repeat; } #parentsPostcard a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #parentsPostcard a:hover { background:url(../images/resources/parents_postcard.jpg) 0px -143px no-repeat; } #pubQuiz { background:url(../images/resources/pub_quiz.jpg) 0px 0px no-repeat; } #pubQuiz a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #pubQuiz a:hover { background:url(../images/resources/pub_quiz.jpg) 0px -143px no-repeat; } #famAlcofacts { background:url(../images/resources/fam_alcofacts.jpg) 0px 0px no-repeat; } #famAlcofacts a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #famAlcofacts a:hover { background:url(../images/resources/fam_alcofacts.jpg) 0px -143px no-repeat; } #carriedAway { background:url(../images/resources/carried_away_poster.jpg) 0px 0px no-repeat; } #carriedAway a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #carriedAway a:hover { background:url(../images/resources/carried_away_poster.jpg) 0px -143px no-repeat; } #alcoPoster { background:url(../images/resources/alcofacts_posters.jpg) 0px 0px no-repeat; } #alcoPoster a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #alcoPoster a:hover { background:url(../images/resources/alcofacts_posters.jpg) 0px -143px no-repeat; } #alcoPostcard { background:url(../images/resources/alcofacts_postcards.jpg) 0px 0px no-repeat; } #alcoPostcard a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #alcoPostcard a:hover { background:url(../images/resources/alcofacts_postcards.jpg) 0px -143px no-repeat; } #unitsPoster { background:url(../images/resources/units_poster.jpg) 0px 0px no-repeat; } #unitsPoster a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #unitsPoster a:hover { background:url(../images/resources/units_poster.jpg) 0px -143px no-repeat; } #alcoWebsite { background:url(../images/resources/alcofacts_website.jpg) 0px 0px no-repeat; } #alcoWebsite a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #alcoWebsite a:hover { background:url(../images/resources/alcofacts_website.jpg) 0px -143px no-repeat; } #unitsApp { background:url(../images/resources/unit_tracker_app.jpg) 0px 0px no-repeat; } #unitsApp a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #unitsApp a:hover { background:url(../images/resources/unit_tracker_app.jpg) 0px -143px no-repeat; } #parentsGuideToAlcohol { background:url(../images/resources/parents_guide_to_alcohol.jpg) 0px 0px no-repeat; } #parentsGuideToAlcohol a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #parentsGuideToAlcohol a:hover { background:url(../images/resources/parents_guide_to_alcohol.jpg) 0px -143px no-repeat; } #youngPersonsGuideToAlcohol { background:url(../images/resources/yp_guide_to_alcohol.jpg) 0px 0px no-repeat; } #youngPersonsGuideToAlcohol a { height:143px; display:block; text-indent:-9999px; cursor: pointer; } #youngPersonsGuideToAlcohol a:hover { background:url(../images/resources/yp_guide_to_alcohol.jpg) 0px -143px no-repeat; }