body { background: #0a1822 url(../images/ui/bg.jpg) repeat-x top center; font-size: 62.5%; font-family: arial, helvetica, sans-serif; color: #fff;} body#home { background: #0a1822 url(../images/ui/bg_home.jpg) repeat-x top center; } .container_24 { position: relative; } /*//////////////////////////////////////////////// Typography ///////////////////////////////////////////////*/ p, li { font-size: 1.4em; line-height: 1.5em; font-weight: bold;} p { margin: 1.5em 0; text-shadow: #0c3c45 0px 1px 1px; color: #bbd6dc;} p li, li p, li li { font-size: 1em; } p#intro,p.intro { height: 25px; text-indent: -999em; display: block; margin-top: 0;} #faq p#intro { background: transparent url(../images/ui/header_select_question.png) no-repeat; width: 680px; margin-left: 30px;} #blog p#intro { background: transparent url(../images/ui/header_latest_post.png) no-repeat; width: 680px; margin-left: 240px;} p#older_posts { background: transparent url(../images/ui/header_older_posts.png) no-repeat; width: 680px; margin-left: 120px;text-indent: -999em; display: block; height: 25px; } #news p#intro { background: transparent url(../images/ui/header_news_articles.png) no-repeat; width: 680px; margin-left: 10px;} #help p#intro { background: transparent url(../images/ui/title_got_a_question.png) no-repeat; width: 940px; margin-left: 10px;} #video p.intro { background: transparent url(../images/ui/header_video.png) no-repeat; width: 400px; margin-left: 10px;} #podcast p.intro { background: transparent url(../images/ui/header_podcast.png) no-repeat; width: 400px; margin-left: 10px;} #contact p#intro { background: transparent url(../images/ui/header_contact.png) no-repeat; width: 940px; margin-left: 10px;} #home p#intro { background: transparent url(../images/ui/title_mephedrone_medium.png) no-repeat; width: 460px; margin-left: 10px; height: 70px;margin-top: 10px; margin-bottom: -10px;} #home p#news {height: 25px; text-indent: -999em; display: block; background: transparent url(../images/ui/header_news.png) no-repeat; width: 400px; margin-left: 10px; } h1 { position: absolute; bottom: 0;} h2 { font-size: 4em; font-weight: bold; text-shadow: #0c3c45 0px 1px 1px;} h3 { font-size: 3em; font-weight: bold; margin-top: 0; text-shadow: #0c3c45 0px 1px 1px; color: #377d8d; line-height: 1.1em;} h4 { font-size: 2em; font-weight: bold; margin-top: 0; text-shadow: #0c3c45 0px 1px 1px; color: #377d8d; line-height: 1.1em; margin-top: 30px;} li h4 { font-size: 1.4em; font-weight: bold; margin-top: 0; text-shadow: #0c3c45 0px 1px 1px; color: #fff; line-height: 1.1em;} li h3 { font-size: 2.1em; } div.news h3 { color: #fff;} #slideshow h2 a { color: #000; text-shadow: none;} #slideshow h2 a:hover { color: #377d8d;} #slideshow a { color: #000;text-shadow: none; } #slideshow a.arrow { font-size: 1.6em; padding-top: 3px;} #slideshow a:hover { color: #377d8d;} a { color: #f8df22; text-decoration: none; font-weight: bold;} a:hover { color: #ffffff; } a.arrow, div.news ul li a { display: block; padding: 0 0 5px 30px; background: transparent url(../images/ui/arrow.png) no-repeat top left; margin-top: 10px;} div#video ul li a.more { margin-top: 10px; line-height: 1.8em; font-size: 16px; font-weight: bold; display: block; padding-left: 30px; background: transparent url(../images/ui/arrow.png) no-repeat left center;} a:hover h3 { color: #fff; } div#video h3 a { color: #377d8d;} div#video h3 a:hover { color: #fff;} /*//////////////////////////////////////////////// Layout ///////////////////////////////////////////////*/ .panel { position: relative; background: transparent url(../images/ui/background.png);margin-top: 20px; } #latest_post { position: relative; background: rgba(0,0,0,0.4); padding: 20px 20px 20px 240px;margin: 10px; } #latest_post span.posted { z-index: 100; position: absolute; top: 20px; left: 0; background: #000; padding: 5px; color: #14b8df; font-size: 1.2em; font-weight: bold; } #latest_post span.posted em { display: block; margin: 3px 0;} #latest_post img { position: absolute; bottom: 0; left: 0; } #latest_post a.blog_post { margin-top: 10px; line-height: 1.8em; font-size: 16px; font-weight: bold; display: block; padding-left: 30px; background: transparent url(../images/ui/arrow.png) no-repeat left center;} div.home_col { float: left; margin: 20px 10px 10px 10px; width: 420px; background: rgba(0,0,0,0.5); padding: 20px;} div.news { float: left; margin: 10px; width: 460px; } div.drugs, div.teens { float: left; margin: 10px; width: 540px; background: rgba(0,0,0,0.5); padding: 20px;} div#video { float: left; margin: 10px; width: 540px; } div#podcast { float: left; margin: 10px; width: 380px; } div.a-z, div.useful-links { float: left; margin: 10px; width: 300px; background: rgba(0,0,0,0.5); padding: 20px;} div#a-z { position: fixed; float: left; margin-left: 600px; margin-top: 10px; width: 300px; background: rgba(0,0,0,0.5); padding: 20px;} div#links { float: left; margin: 10px; width: 380px; background: rgba(0,0,0,0.5); padding: 20px; } div#listening { float: left; margin: 10px; width: 380px; background: rgba(0,0,0,0.5); padding: 20px; } .ask { float:left;margin-top: 10px; background: rgba(0,0,0,0.5); width: 460px; padding: 20px;} .ask fieldset { font-size: 1.8em; line-height: 1.2em;} #slideshow { position: absolute; bottom: 50px; left: 300px; width: 660px;} #home div.news { margin-top: -47px;} /*//////////////////////////////////////////////// Lists ///////////////////////////////////////////////*/ ul#questions { margin: 20px 10px; padding: 20px; background: rgba(0,0,0,0.4);} ul#questions li { margin: 10px 10px 10px 0; float: left; width: 285px; font-size: 1.8em;} ul#questions li a { display: block; padding: 0 0 5px 30px; background: transparent url(../images/ui/arrow.png) no-repeat top left;} ul#questions li a:hover { background: transparent url(../images/ui/arrow_hover.png) no-repeat top left; } ul#q_a li, ul#posts li { float: left; margin: 10px; background: rgba(0,0,0,0.4); padding: 20px; width: 420px;} div.news ul li { background: rgba(0,0,0,0.4); padding: 10px 20px; margin: 10px 0;} div.news ul li p { margin-bottom: 0; } div#video ul, div#podcast ul { padding: 20px; background: rgba(0,0,0,0.4); } div#podcast ul li { padding-left: 80px; background: transparent url(../images/ui/podcast.png) no-repeat top left; margin-bottom: 20px;} div#video ul, div#video ul li { float: left; margin-bottom: 20px; } div#video ul li div.media { float: left; background: transparent url(../images/ui/clip_bg.png) no-repeat top left; width: 260px; height: 180px; padding-top: 10px; padding-left: 15px; } div#video ul li div.media img { height: 164px; width: 220px; } ul#drugs-list { float: left; margin-top: 20px; } ul#drugs-list li { float: left; margin: 0 5px 5px 0; font-family: andale mono, monospace; font-size:12px;} ul#drugs-list li a { background: #f8df22; padding: 5px; color: #000; display: block; } ul#drugs-list li a:hover { background: #000; padding: 5px; color: #f8df22; } /*//////////////////////////////////////////////// Masthead ///////////////////////////////////////////////*/ #home #masthead { height: 495px;} #masthead { height: 315px; position: relative; } #masthead span.logo { width: 310px; height: 139px; display: block; position: absolute; top: 40px; } #masthead span.logo a { text-indent: -999em; width: 310px; height: 139px; display: block; background: transparent url(../images/ui/logo.png) no-repeat top left; } #masthead span.logo a:hover { background: transparent url(../images/ui/logo.png) bottom left; } #masthead h1 { display: block; text-indent: -999em;} #masthead p#question { position: absolute; top: 70px; right: 0; width: 245px; height: 72px; display: block; } #masthead p#question a { text-indent: -999em; width: 245px; height: 72px; display: block; background: transparent url(../images/ui/question.gif) no-repeat top left; } #masthead p#question a:hover { background: transparent url(../images/ui/question.gif) no-repeat bottom left; } /*//////////////////////////////////////////////// Navigation ///////////////////////////////////////////////*/ #masthead ul#nav { position: absolute; top: 10px; left: 20px; font-size: 1em;} #masthead ul#nav li { float: left; } #masthead ul#nav li a { display: block; padding: 0 16px;color: #000; } #masthead ul#nav li a:hover { background: #f8d41c; color: #000; } /*//////////////////////////////////////////////// Forms ///////////////////////////////////////////////*/ label { display: block; margin: 0 0 10px 0;color: #17bcf2; font-weight: bold; } input { border: none;} fieldset { font-size: 1.8em; line-height: 1.2em; } fieldset legend { display: none; } fieldset input[type=type] { margin-bottom: 10px; font-family: arial, helvetica, sans-serif; width: 300px; padding: 8px 4px; } fieldset input[type=submit] { margin-top: 10px; font-family: arial, helvetica, sans-serif; font-size: 1em; background: transparent url(../images/ui/submit.jpg) repeat-x top left; color: #fff; padding: 10px 15px; text-align: center; font-weight: bold; } fieldset input[type=submit]:hover { background: transparent url(../images/ui/submit.jpg) repeat-x bottom left; cursor: pointer; } textarea { border: none; width: 425px; height: 150px; margin-bottom: 10px; padding: 15px; background-color: #fff;} /*//////////////////////////////////////////////// h1 ///////////////////////////////////////////////*/ #stories h1 { background: transparent url(../images/ui/title_stories.png) no-repeat; } #news h1 { background: transparent url(../images/ui/title_news.png) no-repeat; width: 500px; height: 155px; left: 150px; } #blog h1 { background: transparent url(../images/ui/title_blog.png) no-repeat; width: 500px; height: 155px; left: 200px;} #faq h1 { background: transparent url(../images/ui/title_faq.png) no-repeat; width: 288px; height: 155px; left: 250px;} #media h1 { background: transparent url(../images/ui/title_media.png) no-repeat; width: 530px; height: 155px; left: 150px;} #help h1 { background: transparent url(../images/ui/title_help.png) no-repeat; width: 530px; height: 155px; left: 150px;} #contact h1 { background: transparent url(../images/ui/title_contact.png) no-repeat; width: 700px; height: 155px; left: 10px; bottom: -20px;} #mephedrone h1 { background: transparent url(../images/ui/header_mephedrone.png) no-repeat; width: 700px; height: 155px; left: 10px; bottom: 0px;} #teens h1 { background: transparent url(../images/ui/header-life-after.png) no-repeat; width: 700px; height: 156px; left: 10px; bottom: 0px;} #drugs h1 { background: transparent url(../images/ui/header-drugs.png) no-repeat; width: 700px; height: 156px; left: 10px; bottom: -20px;} /*//////////////////////////////////////////////// Ancilliary ///////////////////////////////////////////////*/ #ancilliary {} #ancilliary p, /*//////////////////////////////////////////////// FAQ ///////////////////////////////////////////////*/ #footer { float: left; clear: both; position: relative; background: rgba(0,0,0,0.5);margin: 20px 10px; width: 900px; padding: 5px 20px;} .teens h3 { margin-top: 40px; padding-top: 40px; border-top: 1px solid #377d8d} .teens h3.no-border { border: none; margin-top: 0; padding-top: 0; } .teens ol { margin: 1.5em 0; } .teens ol li { list-style: decimal; list-style-position: inside; margin-bottom: 15px; color: #bbd6dc; } .teens span { color: #bbd6dc; font-size: 1.4em; display: block; margin-top: 10px; } .teens ul.extras li { color: #bbd6dc; font-size: 1.2em; } .teens ul.times { background: #3c434c; padding: 10px; margin-bottom: 20px; } .teens ul.times li { border-bottom: 1px solid #000; padding: 5px; font-weight: normal; color: #bbd6dc; font-size: 1.2em;} .teens h4 + ul { margin-top: 10px; } .useful-links h3 + ul { margin-top: 2em; } /* just for life after image */ div.home_col-wrap { float: left; margin: 20px 10px 10px 10px; width: 460px;} div.home_col-wrap a img { border: none; } div.news { margin-top: 0px !important; } /* = SCRATCH CARD TEMPORARY */ .card-wrapper { float: left; padding: 40px; width: ; position: relative; background: #18272b; margin-bottom: 10px; } .card-wrapper p.help { float: left; } #safe { position: absolute; top: 53px; left: 294px; width: 191px; height: 142px; } #gamble { position: absolute; top: 203px; left: 294px; width: 191px; height: 142px; } #safe .text { position: absolute; z-index: 99; top: 0; left: 0; width: 191px; cursor: pointer;} #gamble .text { position: absolute; z-index: 99; top: 0; left: 0; width: 191px; cursor: pointer; } div.letter { border-bottom: 1px solid #0c3c45; padding-bottom: 20px; margin-bottom: 20px; } div.letter span.aka { display: block; font-size: 12px; } div.letter span.aka + p { margin-top: 0; } #drugs div.drugs div.letter ul li div.also-known a p { font-size: 12px; margin-top: 0; color: #f8df22;} #drugs div.drugs div.letter ul li div.also-known a:hover p { color: #fff; } div.letter ul li > a { font-size: 16px;} div.letter ul li { margin-top: 10px; } div.letter h3 { margin-bottom: 10px; }