/* Document: styles.css Modified date: 7 Oct 2009 Created by: Gemma Leigh Deployment version: project/css/styles.css Notes: Reset styles, then sitewide styles. ================================================================= Style guide, naming conventions, best practices. ================================================================= Use a common naming system: #parent .parent-child { margin:0px auto; } Filtering for non-compliant browsers: .class-name { margin: 10px 0 !important; This will be applied by all browsers margin: 5px 0; IE < v7 will then override the above with this value } Do not use the following filters unless absolutely necessary and always comment reasons for use: * html [selector] IE < v7 only html>body [selector] Standards compliant browsers only _margin Underscore hack Links should have link, visited, hover, active and focus states and should be visible via text-decoration and/or color Use shorthand where possible: background: url() top left no-repeat #FF0; border: 1px #F0F solid; font: 12px/1.4 "Trebuchet MS", Verdana, Arial, sans-serif; margin: 20px 0 0 5px; // ACCESSIBILITY // Accessibility guidelines: - Avoid use of display:none and visibility:hidden as screen readers cannot see the content - Acronyms should be underlined and make use of the help cursor - All submit and button inputs should make use of the hand cursor - An accessibility skip navigation should be included: This will be hidden off screen but visible to screen readers (see =Skip below) Stylesheets should be commented clearly: // For bugs/issues document the problem, workaround and where possible - a URL to the explanation of the fix // Use the following 'Notes to self' :TODO: - reminder to change/fix/revise :BUG: - document a problem with the code or a particular browser :KLUDGE:- nasty workaround ----------------------------------------------------------------- Contents of this file: ----------------------------------------------------------------- Reset styles Fonts Colour Glossary Typography - Links - Headings - Text elements Basic Layout - Containers - Main Content - Secondary Content Navigation Footer */ /* Y!UI reset.css http://developer.yahoo.com/yui/reset/ */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } /* Reset Global reset to values we would expect for some elements */ strong { font-weight: bold;} /* Remove Mozilla's dashed borders */ a {outline:none;} a:active {outline:none;} input[type=submit] {outline-width:0;} input { vertical-align:middle; } /* Remove border around fieldset even on Opera 7 */ fieldset { border: solid 0 transparent; } /* Remove blue border around linked images */ a img {border: 0;} /* YUI fonts: http://developer.yahoo.net/yui/license.txt version: 2.8.0r4 */ body { font:13px/1.231 Arial,Helvetica,clean,sans-serif; } /* Nudge down to get to 13px equivalent for these form elements */ select, input, button, textarea, button { font:99% Arial,Helvetica,clean,sans-serif; } .hidden{ width: 0px; height: 0px; position: absolute; left: 0; top: 0; overflow: hidden; } /* =Colour glossary --------------------------------------------------------------------- */ /* Quick reference to colours used in the site: grey : #252525 green : #79A62B; yellow : #FFF843 */ /* =Links -----------------------------------------------------------------------------*/ /* generic link style */ a { color: #353331; text-decoration: none; outline: none; font-weight: bold; } a:hover { color: #000; text-decoration: underline; } a.inactive:hover { color: #353331; text-decoration: none; cursor: default; } h2 a:hover { text-decoration: none;} p a{background: #fff608; padding: 1px;} /* =Headings -----------------------------------------------------------------------------*/ /* Font size reference */ /* If you want this size in pixels (px) Declare this percent (%) 10px 77 13px 100 15px 116 (was 114) 24px 182 */ /* Heading sizing */ h1,h2,h3, h3 span.subhead{ color: #252525;} h1 { font-size: 77%; } h2 { font-size: 182%; line-height: 1.2; font-weight: bold; margin-bottom: 14px; text-transform: none;} h3 { font-size:116%; line-height: 19px; font-weight: bold; text-transform: none; } /* This text is positioned offscreen */ #sidebar h3{ font-size: 100%;} /* =Text elements -----------------------------------------------------------------------------*/ /* Text sizing */ p, .post-content ul li { font-size: 116%; } /* 15px */ p.error, p.note{ font-weight: bold; margin-bottom: 20px;} .comments a { font-size: 100%; /*13px/15px*/ background: #fff843;} hr{ display: none;} /* Bold paragraphs */ #filter-text{ font-size: 116%;} /* Submit button - Fixed width, expands vertically */ .btn-submit { float: right; width: 138px; display: inline; background:url(../images/btn-submit-top.gif) top right no-repeat; padding-top: 5px; margin:17px 40px 0 0;} .btn-submit span{ display: block; float: left; width: 138px; background:#252525 url(../images/btn-submit-bott.gif) top left no-repeat; height: 5px; font-size: 0px;} .btn-submit a { display: block; color: #FFF; background: #252525 url(../images/btn-submit-arrow.gif) 95% 50% no-repeat; min-height: 15px; height: auto !important; height: 15px; padding: 0 15px 0 10px;} .btn-submit a:hover { color: #FFF;} /* =Basic Layout -----------------------------------------------------------------------------*/ body{ text-align: center; color: #252525; background:#f6f6f6/*url(../images/bg.gif) top left repeat*/;} body, html{ height:100%; min-height: 100%; } body img#logo-print{display: none;} /* =Containers -----------------------------------------------------------------------------*/ #container{ position:relative; margin:0 auto; width:100%; height:auto !important; height:100%;/* IE6: treated as min-height*/min-height:100%; text-align: left;} #header-wrapper, #footer{ width: 100%; text-align: left; position: relative; } #header, #content{ width: 960px; margin: 0px auto; overflow: hidden;} #content-header{ width: 960px; overflow: hidden; margin-bottom: 65px;} #main { width: 722px; float: left; } #sidebar{ width: 200px; float: right; background: url(../images/sidebar.png) top left repeat-y;} /* =Header -----------------------------------------------------------------------------*/ #header-wrapper { background:#FFF url(../images/header-bg.gif) top left repeat-x;} #header { min-height: 136px; height: auto !important; height: 136px; background:url(../images/header-bg-stripe.gif) top left no-repeat;} #quote { display: block; height: 126px; width: 158px; float: left; margin-top: 10px;} #header-feature { float: left; width: 606px; padding-top: 10px; } #header-feature-title { width: 73px; height: 115px; text-indent: -2000px; background: url(../images/featured-posts.gif) top left no-repeat; float: left; margin: 0 0 10px 10px; } /* Featured posts */ #featured-post{ width: auto; float: left; } #featured-post a{ text-decoration: none;} #featured-post a:hover { color:#85B038; } #featured-post span { font-size: 100%; font-weight: normal; display: block;} #featured-post span.post-author{ font-weight: bold;} #featured-post img { float: left; padding: 0 10px 10px 10px;} #featured-post-list { position: relative; margin-left: 83px; width: 400px; } #featured-post-list li { position: absolute; display: none; width: 100%; } #featured-post-list li.first { display: block; } /* Countdown */ #header #countdown{ width: 189px; float: left; background: url(../images/header-divider.gif) top right no-repeat; padding-right: 5px; height: 70px; } /* =Blog post filter -----------------------------------------------------------------------------*/ #filter { float: left; width: 722px; padding: 0; margin-bottom: 10px; } #filter #filter-text { padding: 0 0 16px 0; margin-top: -4px;} #filter #filter-shadow { float: left; width: 722px; background: url(../images/filter-drop-shadow.png) 0 0 no-repeat; height: 10px;} #filter ul { width: 100%; } #filter ul li { float: left; background:#FFF; padding:4px 0 6px 0; border-right: 1px solid #e0e0e0;} #filter ul li a { display: block; padding: 2px 0 0 25px; background: #FFF; width: 200px;} #filter ul li a:hover { text-decoration: none; color:#79A62B;} /* All posts */ #filter ul li.all-posts { width: 155px; background:url(../images/all-posts-top-inactive.gif) top left no-repeat; padding-bottom: 0;} #filter ul li.all-posts span{ width: 155px; display: block; float: left; font-size: 0; line-height: 0; background:url(../images/all-posts-bott-inactive.gif) top left no-repeat; padding-bottom: 5px;} #filter ul li.all-posts a { padding: 2px 0 1px 15px; background: #FFF; color: #252525; width: 140px;} #filter ul li.all-posts a:hover{color:#79A62B;} /* All posts - active */ #filter ul li.posts-active { width: 155px; background:url(../images/all-posts-top.gif) top left no-repeat; padding-bottom: 0;} #filter ul li.posts-active span { width: 155px; display: block; float: left; font-size: 0; line-height: 0; background:url(../images/all-posts-bott.gif) top left no-repeat; padding-bottom: 5px;} #filter ul li.posts-active a { background: #252525; color: #FFF;} #filter ul li.posts-active a:hover{ color: #FFF;} /* Videos */ #filter ul li.video { width: 267px; padding-left: 10px; padding-right: 5px;} #filter ul li.video a { background:#FFF url(../images/filter-video.gif) 0px 1px no-repeat; } /* Videos - hover */ #filter ul li.video a:hover { background:#FFF url(../images/filter-video.gif) 0px -32px no-repeat; } #filter ul li.video-active, #filter ul li.learnings-active{ background: #252525;} #filter ul li.video-active a, #filter ul li.learnings-active a{ color: #FFF;} #filter ul li.video-active a, #filter ul li.video-active a:hover { color: #FFF; background:#252525 url(../images/filter-video.gif) 0px -65px no-repeat; } /* Our learnings */ #filter ul li.learnings { width: 272px; padding-left: 10px;} #filter ul li.learnings a { background:#FFF url(../images/filter-learnings.gif) 0px 2px no-repeat; } /* Our learnings - hover */ #filter ul li.learnings a:hover { background:#FFF url(../images/filter-learnings.gif) 0px -31px no-repeat; } #filter ul li.learnings-active a, #filter ul li.learnings-active a:hover { color: #FFF; background:#252525 url(../images/filter-learnings.gif) 0px -64px no-repeat; } /* =Main Content -----------------------------------------------------------------------------*/ #content{ background: url(../images/content-bg.gif) center top no-repeat; position: relative; z-index: 1; padding-top:10px; padding-bottom: 160px; /* to prevent footer overlap*/} /* Title */ #content-title { width: 720px; float: left;} #content-title h1 { clear: both; background: url(../images/logo-teens-speech.gif) no-repeat; width: 721px; height: 91px; margin-top: 0px;} #content-title h1 a { display: block; text-indent: -1000px; width: 721px; height: 79px;} #content-title p a { font-size: 86.67%; /*font-size:13px*/ } /* C4 TV promo*/ #speech-date { float:right; width: 195px; height: 107px; } #speech-date p { color: #1f62bb; padding-left: 10px; line-height: 19px;} #speech-date a { display: block; padding: 3px 0 0 10px; line-height: 19px;} /* =Blog posts -----------------------------------------------------------------------------*/ /* Rounded corner container */ #main .post, #main .section { float: left; clear: both; width: 722px; margin-bottom: 20px; } #main .post-top, #main .section-top { float: left; width: 722px; background: url(../images/post-top.png) top left no-repeat; height: 10px;} #main .post-mid, #main .section-mid { float: left; width: 722px; background: url(../images/post-mid.png) top left repeat-y; overflow: hidden; } #main .post-footer, #main .section-footer{ clear: both; width: 722px; background:url(../images/post-footer.png) top left no-repeat; height: 10px;} /* Dividing lines */ #main .divider { float: left; width: 722px; overflow: hidden; background:url(../images/post-mid.png) top left repeat-y; padding:0; } #main .comment-submit { clear: both; padding-bottom: 11px;} #main .divider .hr { width: 720px; background:url(../images/hr.gif) top left repeat-x; padding-top: 3px; margin-left: 1px; font-size: 0;} #main .divider .widget-shadow { width: 720px; height: 40px; background:url(../images/widget-shadow.gif) center left no-repeat; font-size: 0; padding: 20px 0 20px 0; margin-left: 1px;} /* Post content styles */ #main .post-content, #main .section-content { float: left; overflow: hidden; width: 640px; display: inline; padding: 20px 0 0 0; margin: 0 0 0 41px;} /* Single post page */ #post #main .post-content { padding-bottom: 0px !important;} /* Static pages - Spacing under last paragraph, to give 40px */ #static #main .section-content { padding: 20px 0 7px 0; } /* Post date & different article types */ .post-date { font-size: 100%; font-weight: bold; margin: 7px 0 10px 0; padding-left: 25px; line-height: 1.5;} .article { background:url(../images/icon-article.gif) top left no-repeat; } .video { background:url(../images/icon-video.gif) top left no-repeat; } .finding, .learnings { background:url(../images/icon-learning.gif) 0px 3px no-repeat; } .post-content .finding, .post-content .learnings{ background-position: 0px 1px; } /* Post content text styles */ .post-content ul, .post-content p, .post-content blockquote, .post-content object, .post-content img { font-weight: normal; margin-bottom: 20px;} .post-content p a { font-weight: normal; background: none; text-decoration: underline; } .post-content p a:hover { text-decoration: none; } /* Videos within posts */ .post-content .video-wrapper{ margin-bottom: 20px;} /* Post with an image - with caption */ .post-content .caption{ line-height: 2.3;/*line-height: 30px;*/ border-bottom: 1px solid #DADADA; margin:-20px 0 16px 0;} /* Social networking links */ .post-content ul.post-social-links{ margin-bottom: 0;} /* Bulleted lists */ .post-content ul li{ background: #fff url(../images/bullet.gif) 0px 5px no-repeat; padding-left:20px; margin-bottom: 14px; font-weight: bold;} /* Blockquotes */ .post-content blockquote{ background: #fff url(../images/blockquote.gif) top left no-repeat; padding-top: 50px;} .post-content blockquote p { font-weight: bold; font-size: 182%; line-height: 1.2; margin-bottom: 10px;} .post-content blockquote cite { font-style: italic;} /* Number of comments / Be the first to comment */ .comments-link { float: none; width: 640px; margin: 0 !important; padding: 16px 0 32px 0 !important;} .comments-link a { padding:1px 3px 1px 27px; background:#fff843 url(../images/icon-comments.gif) 0px 0px no-repeat; } /* Featured comment */ #main .featured-comment { width: 640px; overflow: hidden; margin: 34px 0 25px 0!important; padding: 0 !important;} #main .featured-comment .comment { float: left; width: 460px; overflow: hidden; border-left: 5px solid #9a9998; padding: 0 0 0 20px !important; margin-bottom: 0 !important;} #main .featured-comment .comment p{ margin-bottom: 0 !important;} #main .featured-comment h3 { text-transform: none; margin-bottom: 15px;} /* Blog content */ .post-content .comments { margin-bottom: 11px;} /* Post - Tags */ .post-tags { width: 100%; overflow: hidden; padding-top: 15px;} .post-tags h3.title-tag { float: left;} .post-tags p { float: left; font-size: 100%; font-weight: normal; padding: 8px 0 0 5px; font-style: italic;} .post-tags p a { font-weight: normal; background: #FFF;} /* Use Phark replacement tags */ .replace, h3.title-tag { text-indent: -9999px; background-position: top left; background-repeat: no-repeat; } #main h3.title-tag { width: 65px; height: 28px; background-image: url(../images/tags.gif);} #sidebar h3.title-tag { width: 185px; height: 40px;} h3#tags-related { background-image: url(../images/tags-related-tags.png);} h3#tags-all { background-image: url(../images/tags-all-tags.png);} h3#tags-top-10 { background-image: url(../images/tags-top-10.png);} /* Post - Social links */ ul.post-social-links { float:left; overflow:hidden; padding: 12px 0 20px 0; width:680px;} ul.post-social-links li { float:left; width:25%; margin:11px 0 0 0; background: none; padding-left: 0; text-align: center;} ul.post-social-links li.email{ text-align: left;} ul.post-social-links li.delicious, ul.post-social-links li.facebook, ul.post-social-links li.twitter { text-align:center;} ul.post-social-links li a { font-size: 100%;} ul.post-social-links li.email a { background:url(../images/icon-share-email.gif) center left no-repeat; padding-left: 31px;} ul.post-social-links li.facebook a { background:url(../images/icon-share-facebook.gif) center left no-repeat; padding-left: 24px;} ul.post-social-links li.delicious a { background:url(../images/icon-share-delicious.gif) center left no-repeat; padding-left: 27px;} ul.post-social-links li.twitter a { background:url(../images/icon-share-twitter.gif) center left no-repeat; padding-left: 33px;} /* Bottom of page - Social links */ .divider ul.post-social-links { width: 680px; margin: 0 0 0 40px !important; display: inline; padding: 4px 0 10px 0;} .divider ul.post-social-links li a { font-size: 86.67%; /*font-size:13px*/ } /* Post - Article navigation */ #post-nav { width: 640px; float: left; margin: 15px 0 0 40px; display: inline; /*for ie*/ padding-bottom: 10px;} #post-nav li { width: 48%; float: left; } #post-nav li p { font-size: 86.67%; /*font-size:13px*/ font-weight: normal; margin-right: 0;} #post-nav li.prev a { padding-left: 24px; background: url(../images/arrow-prev.gif) center left no-repeat; position: relative; left: -5px; } #post-nav li.prev p { padding-left: 19px;} #post-nav li.next { float: right; text-align: right;} #post-nav li.next a { padding-right: 24px; background: url(../images/arrow-read-more.gif) center right no-repeat; position: relative; right: -5px; } #post-nav li.next p { padding-right: 19px;} /* Comments */ #main .comment { float: left; clear: both; width: 460px; overflow: hidden; border-left: 5px solid #9a9998; padding-left: 20px; margin-bottom: 40px; } #main .comment-author { float: left; width: 100%; font-size: 100%; font-style: italic; margin:0;} #main .comment-author img { float: left; width: 24px; margin: 0 10px 0 0; padding-top: 2px;} #main .comment-author strong { font-size: 15px; font-weight: bold; font-style: normal; display: block;} #main .comment p { font-size: 100%; float: left; width: auto; margin-top: 10px;} #main .comment a.report { background: #fff url(../images/icon-flag.gif) top left no-repeat; padding-left: 15px; float: left; width: auto; clear: both; margin-top: 10px; } #main .comment form.report-form { display: none; } #main .comment form.report-form .comment-form { padding-left: 0; border: 0; } #main .comment form.report-form .comment-submit { width: 298px; } /* Text styles - Within Generic 'section' boxes */ #main .section-content h2{ margin: 8px 40px 32px 0; text-transform: none;} #main .section-content ul.bullet li{ background: #fff url(../images/bullet.gif) 0px 5px no-repeat; padding-left:20px; margin-bottom: 14px; font-weight: bold;} /* Post - Leave a comment */ #main .comment-form { border-left: 5px solid #9a9998; padding-left: 20px; margin-bottom: 40px; } #main .comment-form ul li{ width: 100%; overflow: hidden; margin-bottom: 20px; font-size: 100%; font-style: italic; } #main .comment-form label, #main .comment-form input{ font-size: 100%; float: left; font-style: normal; } #main .comment-form label{ width: 120px; } #main .comment-form input{ width: 180px; float: left; font-size: 100%; margin-right: 10px;} #main .comment-form input#id_tc_agree{ width: auto; margin-right: 10px;} #main .comment-form textarea{ width: 290px !important;} #main .comment-submit p { float: left; width: 40%; margin:20px 0 0 0; padding-left: 40px; font-weight: bold; } #main .comment-submit input { float: right; display: inline; width: 161px; margin:17px 40px 0 0;} /* Error messages */ #main .error{ color: #ff5418; } #main .comment-form ul li ul.errorlist{ width: 180px; float: right;} #main .comment-form ul li ul.errorlist li{ margin-bottom: 0; color: #ff5418; font-weight: bold; font-style: normal;} /* =Sidebar -----------------------------------------------------------------------------*/ #sidebar { margin-bottom: 40px; padding-bottom: 20px;} #sidebar .promo { margin-top: 80px; margin-left: 15px;} /* All tags*/ #sidebar .tags-at-top{ margin-top: -55px; margin-bottom: 45px;} /* Sidebar - Promo titles */ #sidebar .promo h3, #sidebar #about h3 { text-indent: -9999px; background-position: top left; background-repeat: no-repeat; } #get-involved h3 { background-image: url(../images/promo-get-involved.png); width: 150px; height: 40px;} #meet-vik h3 { background-image: url(../images/promo-meet-vik.png); width: 180px; height: 60px;} #pick-posts h3 { background-image: url(../images/promo-pick-of-the-posts.png); width: 180px; height: 60px;} #spread-the-word h3 { background-image: url(../images/promo-spread-the-word.png); width: 175px; height: 60px;} #tell-us h3 { background-image: url(../images/promo-tell-us.png); width: 185px; height: 60px;} #what-saying h3 { background-image: url(../images/promo-what-saying.png); width: 175px; height: 25px;} #sidebar p, #sidebar a { font-size: 100%; padding-top: 10px; line-height: 17px;} /* Who's behind this? */ #about { clear: both; float: none; width: 200px; background: url(../images/about-top.png) top left no-repeat; padding-top: 15px;} #about h3 { background-image: url(../images/promo-whos-behind.jpg); width: 200px; height: 30px;} #about .about-content { color: #FFF; background:#77A22C url(../images/about-repeat.jpg) top left repeat-x; padding-top: 0px;} #about .about-content a.logo-wrapper{ display: block; margin-left: 20px;} #about .about-footer { background: url(../images/about-bottom.png) top left no-repeat; height: 15px;} #about p, #about a.arrow { color: #FFF; margin-left: 15px; margin-right: 15px;} #about a.arrow { display: block; margin: 10px 0 10px 15px; padding:0 0 0 15px; background: url(../images/arrow-about.gif) center left no-repeat; } /* Sidebar - Lists with underlines */ .promo ul, .promo ul li { width: 100%;} .promo ul li a { border-bottom: 1px solid #DADADA; padding: 10px 0 10px 40px; margin: 0; display: block; } .promo ul li.email a { background:url(../images/icon-email.gif) center left no-repeat;} .promo ul li.rss a { background:url(../images/icon-rss.gif) center left no-repeat;} .promo ul li.twitter a { background:url(../images/icon-twitter.gif) center left no-repeat;} .promo ul li.youtube a { background:url(../images/icon-youtube.gif) center left no-repeat;} .promo ul li.facebook a { background:url(../images/icon-facebook.gif) center left no-repeat;} .promo ul li.myspace a { background:url(../images/icon-myspace.gif) center left no-repeat;} .promo p { margin-bottom: 20px;} /* Sidebar - Links */ a.read-more { padding:1px 3px 1px 18px !important; background:#fff843 url(../images/arrow-highlight.gif) 0px 0px no-repeat;} #tags.promo a.read-more { background-color: transparent; background-image: url(../images/arrow-read-more.gif); background-repeat:no-repeat; background-position: 0px 0px;} /* Sidebar - Promo - Poll */ #pick-posts ul { width: 100%; margin-top: 0px;} #pick-posts ul li { border-bottom: none;} #pick-posts ul li a { font-weight: normal;} #pick-posts ul li.one { background:url(../images/icon-one.gif) center left no-repeat;} #pick-posts ul li.two { background:url(../images/icon-two.gif) center left no-repeat;} #pick-posts ul li.three { background:url(../images/icon-three.gif) center left no-repeat;} /* Sidebar - What they're saying */ #what-saying img { margin-top: 10px;} #what-saying p { margin-bottom: 10px;} #what-saying a.logo:hover { text-decoration: none; } /* Sidebar - Tags */ #tags ul { clear: both; margin:0 0 20px 0; padding-top: 12px;} #tags ul li { padding:5px 0 0 0;} #tags ul li a { font-style: italic; font-weight: normal; padding: 0 0 6px 0; margin: 0;} #tags ul.selected-tag { margin-bottom: 20px;} #tags ul.selected-tag li a { font-weight: normal; } #tags ul.selected-tag li.active { background: url(../images/bullet.gif) center left no-repeat;font-weight: bold; padding-left: 15px; } /* Selected tag */ #tags ul li.active{ background: url(../images/bullet.gif) center left no-repeat;font-weight: bold; padding-left: 15px;} #tags ul li.active a { font-weight: bold;} /* Sidebar - Search */ #search-box{ float: left; width: 185px; margin: 40px 0 80px 15px; display: inline;} #search-box input#search-query { width: 130px; float: left; margin-right: 5px; padding: 2px 0 2px 0;} #search-box a.search-submit { float: right; text-indent: -4000px; background: url(../images/submit-go.gif) no-repeat; width: 39px; height: 25px; margin: 0px; display: none;} /* =Navigation -----------------------------------------------------------------------------*/ /* Main blog navigation < Prev Next > */ #blog-nav { width: 100%; margin-top: 40px; } #blog-nav li { width: 45%; float: left; } #blog-nav li.prev a { padding-left: 20px; background: url(../images/arrow-prev.gif) center left no-repeat; } #blog-nav li.next { float: right; text-align: right;} #blog-nav li.next a { padding-right: 20px; background: url(../images/arrow-read-more.gif) center right no-repeat; } /* At the bottom of a Search/Filtered page - Pagination */ #pagination { width: 100%; margin-top: 40px; } #pagination li { width: auto; float: left; padding: 0 3px 0 3px;} #pagination li a.active { font-weight: normal;} #pagination li.prev a { padding-left: 20px; background: url(../images/arrow-prev.gif) center left no-repeat; padding-right: 10px; } #pagination li.next { padding-left: 10px; } #pagination li.next a { padding-right: 20px; background: url(../images/arrow-read-more.gif) center right no-repeat; } /* Search Page */ #search #search-box { margin-top: 0;} #search .section-content{ padding: 0;} #search .divider { margin-top: 8px; margin-bottom: 7px;} #search .section-content .post-date{ margin-top: 26px; clear: both;} #search .section-content h2 { line-height: 24px; margin-bottom: 14px;} #search .section-content p { margin-bottom: 27px;} /* No search results found / 404 */ #search .no-results, #static .no-results { padding-bottom: 71px !important;} #search .no-results h2 { padding-top: 20px;} #search .no-results p { margin-bottom: 20px; } /* =Static pages -----------------------------------------------------------------------------*/ /* Generic static page styles */ #static .section-content h2, #static .section-content h3, #static .section-content p, #static .section-content ul{ margin-right:40px; margin-bottom: 20px;} #static .section-content p, #static .section-content ul { font-size: 116%;} #static .divider h2, #static .divider h3, #static .divider p, #static .divider ul { margin: 0 40px 20px 40px;} #static .divider p, #static .divider ul { font-size: 116%;} /* Bulleted lists */ #static .divider ul.bullet li, #static .section-content ul.bullet li{ background: #fff url(../images/bullet.gif) 0px 5px no-repeat; padding-left:20px; margin-bottom: 14px; font-weight: bold;} #static .divider .promo { width: 640px; margin: 0 0 40px 0;} #static .divider .promo ul li{ border-bottom: 1px solid #dadada;} /* What is page styles */ #static .divider { padding-top: 16px;} #static .divider .hr { margin-bottom: 37px;} #static .divider img { margin-left: 40px; margin-bottom: 20px;} #static #title-whats-happening{ position: relative; top: -48px; margin-bottom: -28px;} #static #title-are-you{ background-image: url(../images/title-are-you.gif); width: 415px; height: 28px; margin-bottom: 17px;} #static .footer-social { padding-top: 0;} #static .footer-social .hr { margin-bottom: 0px;} /* Spread the word */ #static #spread-the-word-title, #static #spread-the-word-examples { margin-top: -2px; position: relative;} #static .embed-widget { float: right; width: 256px; margin: 15px 0 20px 40px; } #static #spread-the-word-title { float: left; background: #fff url(../images/spread-the-word-title.gif) top left no-repeat; width: 220px; height: 155px;} #static #spread-the-word-examples { float: right;} #static .what-video { margin: 20px 0 20px;} ul.numbered { width: 100%;} ul.numbered li { padding: 10px 0 0 40px;} ul.numbered li.one { background:url(../images/icon-one.gif) center left no-repeat;} ul.numbered li.two { background:url(../images/icon-two.gif) center left no-repeat;} ul.numbered li.three{ background:url(../images/icon-three.gif) center left no-repeat;} #badge-set { width: 640px; float: left; overflow: hidden; margin-left: 40px; padding-bottom: 80px;} #badge-set .badge-row{ margin-top: 20px; width: 640px; float: left; overflow: hidden; text-align: center; border-bottom: 1px solid #dadada; } #badge-set .badge-row .badge-horizontal, #badge-set .badge-row .badge-vertical { width: 320px; float: left; height: 320px;} #badge-set .badge-row .badge-horizontal div, #badge-set .badge-row .badge-vertical div { height: 260px; position: relative; } #badge-set .badge-row .badge-horizontal div img { position: absolute; bottom: 2px; left: 0; margin-bottom: 0; padding-bottom: 20px;} #badge-set .badge-row .badge-vertical div img { position: absolute; bottom: 2px; left: 15%; margin-bottom: 0; padding-bottom: 20px;} #badge-set form { width: 100%; padding-top: 0px;} #badge-set form input { width: 220px;} /* =Footer -----------------------------------------------------------------------------*/ #footer { background: #FFF; position: absolute; left: 0px; bottom: 0px; z-index: 1000; clear: both;} #footer ul { width: 960px; margin: 0px auto; overflow: hidden; padding-bottom: 40px;} #footer ul li { width: auto; float: left; background: url(../images/footer-li-bg.gif) top left no-repeat; padding:0 18px;} #footer ul li.footer-logo { position: relative; top: 14px; background: none; padding: 0 0 14px 0;} #footer ul li.footer-logo a { margin: 0; } #footer ul li.footer-what { background: none;} #footer ul li.barnardos { padding-right: 0;} #footer ul li.barnardos a { color: #79a62b;} #footer ul li a { display: block; margin-top: 16px;}