/** * Start Screen CSS * * @project Start * @version 1.1 * @author Start * @copyright Copyright 2010 - Prince's Trust. All rights reserved. * @license ??? */ /** * @tag Contents * 1.0 Resets * 1.1 XHTML resets * 2.0 Base styles * 3.0 Structural (framework & footer) * 3.1 Framework * 3.2 Nav * 3.3 Content * 3.4 Footer * 4.0 Shared * 4.1 Header * 4.2 Nav * 4.3 Content * 4.3.1 Buttons * 4.3.2 Links/Icons * 4.3.3 Forms * 4.3.4 Headings * 4.3.5 Copy * 4.3.5.1 Miscellaneous * 4.3.5.2 Question and Answer * 4.3.5.3 Inline images and captions * 4.3.5.4 List with an image floated left and text alongside * 4.3.6 Blocks * 4.3.6.1 Blk: standard elements * 4.3.6.2 Blk: Sign up form (ID: 2605) * 4.3.6.3 Blk-list (landing page) * 4.3.7 Article lists (features, blog posts) * 4.3.8 Article sticky lists (landing pages showing features) * 4.3.9 Article related lists (landing pages showing features) * 4.4 Footer * 4.4.1 Footer partners * 4.4.2 Footer colophon * 5.0 Sections * 5.1 Section: section-01 (orange w/h blue h1) * 5.1.1 Header * 5.1.2 Headings * 5.1.2 Buttons * 5.1.3 Links * 5.1.4 Blocks * 5.2 Section: section-02 (blue w/h green h1) * ... * 5.3 Section: section-03 (purple w/h red h1) * ... * 5.4 Section: section-04 (red w/h orange h1) * ... * 5.5 Section: section-05 (green w/h purple h1) * ... * 6.0 Pages * 6.1 Home page * 6.2 Partners and supporters * 6.3 Blog post * */ /** * @tag Notes: * - Sections are set as a class on the body tag. * The class can also be added to a Div to give a section's styles to a block. */ /** * -------------------------------------------------- * @section 1.0 Resets * -------------------------------------------------- */ /** * 1.1 XHTML resets * * Eric Meyer's Resetting again CSS http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } q:before, q:after{ content:''; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } img{ border:0; } /** * -------------------------------------------------- * @section 2.0 Base styles * -------------------------------------------------- */ body{ background:#474843; color:#000; font:1em/1.188 Arial, sans-serif;/*16px/19px*/ } h1,.h1{ color:#000; font-size:1.750em;/*28px*/ line-height:1.143;/*32px*/ margin-bottom:1em;/*16px*/ } h2,.h2{ color:#000; font-size:1.250em;/*20px*/ line-height:1.15;/*23px*/ } h3,.h3{ color:#666; font-size:1.250em;/*20px*/ line-height:1.15;/*23px*/ } h4,.h4{ color:#000; font-size:1em;/*16px*/ line-height:1.313;/*21px*/ } h1,.h1,h2,.h2, h4,.h4{ font-family:"Arial Black", Arial, sans-serif; } p,ol,ul{ margin-bottom:1em; } ol ol, ul ul, ol ul, ul ol{ margin-bottom:0; } a{ border-bottom:1px dotted #000; text-decoration:none; color:#000; } a:link{ } a:visited{ } a:hover{ border-bottom-style:solid; } a:active{ border:0; } a:focus{ outline:1px dotted #000; } h2 a,h3 a,h4 a,h5 a,h6 a{ border-width:0; } h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{ border-width:1px; } /** * @tag Replaced for accessible image/text replacement */ .replaced{ display:block; position:relative; } .replaced span{ background-repeat:no-repeat; display:block; height:100%; left:0; position:absolute; top:0; width:100%; } a.replaced span{ cursor:pointer; } a.replaced:hover{ background-position:0 bottom; } /** * @tag Replaced for image/text replacement with transparency */ .replacedT{ background-position:0 0; background-repeat:no-repeat; display:block; text-indent:-9999px; overflow:hidden; } a.replacedT:hover{ background-position:0 bottom; } /** * @tag Hide tags which are used for accessibility purposes only */ .accessibility,.accessibility span{ display:block; height:1px !important; left:-9999px !important; line-height:1px !important; overflow:hidden !important; position:absolute !important; top:-9999px !important; width:1px !important; } /** * -------------------------------------------------- * @section 3.0 Structural (framework, nav & footer) * -------------------------------------------------- */ /** * @tag 3.1 Framework * */ #str-header-wrapper{ background:#d3d3c7 url('../images/hdr-default.gif') center 0 repeat-x; height:350px; min-width:964px; } #str-header{ height:203px; margin:0 auto; position:relative; width:964px; } #str-search{ margin:-245px auto 175px; padding:0 0 0 549px; width:414px; position:relative; z-index:0; } /** * @tag 3.2 Nav */ #str-nav{ background:url(../images/fw-bg-top.gif) center 0 no-repeat; margin:-147px auto 0; padding:9px 19px 0; width:926px; } /** * @tag 3.3 Content */ #str-content-wrapper{ background:#d3d3c7; } #str-content{ background:#fff; border:2px solid #c8c8bd; border-width:0 2px; margin:0 auto; padding:17px; width:926px; } #str-content:after{ clear:both; content:' '; display:block; font-size:0; height:0; line-height:0; visibility:hidden; width:0; } .col{ float:left; margin-right:18px; } .col-last{ float:right; margin-right:0; } .col-296{ width:296px; } .col-610{ width:610px; } .col-926{ width:926px; } /** * @tag 3.4 Footer */ #str-footer-wrapper{ background:url(../images/fw-bg-btm.gif) 0 0 no-repeat; margin:0 auto 17px; padding-top:49px; width:964px; } #str-footer{ background:#fff url(../images/fw-bg-btm.gif) 0 bottom no-repeat; overflow:hidden; padding:0 17px 17px; width:930px; } /** * -------------------------------------------------- * @section 4.0 Shared * -------------------------------------------------- */ /** * @tag 4.1 Header */ #logo-start{ background-image:url(../images/start-logo.png); border:0; height:166px; left:22px; position:absolute; top:20px; width:145px; z-index:3; } #logo-start img{ display:none; } /** * @tag 4.2 Nav */ #main-nav{ border-bottom:4px solid #e6e5d1; font:0.813em/*13px*/ "Arial Black", Arial, sans-serif; margin:0; padding-bottom:1.846em/*24px*/; overflow:hidden; position:relative; width:930px; } #main-nav li{ background:url(../images/ic-arrows.png) 3px -795px no-repeat; float:left; padding:5px 0 7px; } #main-nav a{ border-right:1px solid #cfc6c1; border-bottom:0; display:block; line-height:1; padding:0 5px 0 18px; } #main-nav li.selected{ background-color:#ddd; margin-left:-1px; } #main-nav li.has-children{ background-position:4px -873px; } #main-nav a:hover, #main-nav li.selected a{ color:#00a1de; } #main-nav li.selected a{ border-left:1px solid #cfc6c1; } #main-nav li:last-child a, #main-nav li.last a{ border-right:0; } #main-nav ul{ background:#ddd; bottom:0; font-size:0.923em;/*12px*/ left:0; margin:0; padding-top:0.417em/*5px*/; position:absolute; width:930px } #main-nav ul li{ background:none; border-right:1px solid #fff; font-family:Arial, sans-serift; margin:0; padding:0 5px 5px; } #str-nav #main-nav li.selected li{ margin:0; } #str-nav #main-nav li.selected li a{ border:0; border-bottom:1px dotted #ddd; color:#000; font-weight:normal; padding:0 0 2px; } #str-nav #main-nav li.selected li a:hover, #str-nav #main-nav ul li.selected a{ border-bottom:1px dotted #000; } #main-nav ul li:last-child, #main-nav ul li.last{ border-right:0; } /** * @tag 4.3 Content */ /** * @tag 4.3.1 Buttons */ #str-content .btn,#str-search .btn{ border:0; color:#fff; display:block; text-align:center; } .btn{ background-image:url(../images/btns.png); background-repeat:no-repeat; border:0; cursor:pointer; font:0.875em "Arial Black", Arial, sans-serif;/*14px*/ min-height:25px; padding:3px 0; } .btn{ background-position:0px -420px; width:296px; } .btn:hover{ background-position:0px -480px; } .btn-half{ background-position:0px -360px; width:139px; } .btn-half:hover{ background-position:-139px -360px; } .col-296 .btn{ background-position:0px -600px; width:276px; } .col-296 .btn:hover{ background-position:0px -660px; } .col-296 .btn-half{ background-position:0px -540px; width:129px; } .col-296 .btn-half:hover{ background-position:-129px -540px; } .btn-lrg,.btn-lrg-half{ font-size:1.375em/*22px*/; line-height:1.136/*25px*/; min-height:40px; padding-bottom:4px; } .btn-lrg{ background-position:0px -60px; width:296px; } .btn-lrg:hover{ background-position:0px -120px; } .btn-lrg-half{ background-position:0px 0px; width:139px; } .btn-lrg-half:hover{ background-position:-139px 0px; } .col-296 .btn-lrg{ background-position:0px -240px; width:276px; } .col-296 .btn-lrg:hover{ background-position:0px -300px; } .col-296 .btn-lrg-half{ background-position:0px -180px; width:129px; } .col-296 .btn-lrg-half:hover{ background-position:-129px -180px; } /** * @tag 4.3.2 Links/Icons */ a.link,.link a,span.link{ background:url(../images/ic-arrows.png) 0 5px no-repeat; display:inline-block; padding:2px 0 3px 15px; } a.link-section,.link-section a,span.link-section{ background:url(../images/ic-arrows.png) 0 5px no-repeat; display:inline-block; padding:2px 0 3px 15px; } a.link-full-section,.link-full-section a,span.link-full-section{ background:url(../images/ic-arrows.png) 0 5px no-repeat; display:inline-block; padding:2px 0 3px 15px; } .section-back a.link,.section-back .link a,.section-back span.link{ background-position:0 -155px; } a.back,.back a,span.back{ background:url(../images/ic-arrows.png) 0 -35px no-repeat; display:inline-block; padding:2px 0 3px 15px; } a.back-section,.back-section a,span.back-section{ background:url(../images/ic-arrows.png) 0 -35px no-repeat; display:inline-block; padding:2px 0 3px 15px; } a.back-full-section,.back-full-section a,span.back-full-section{ background:url(../images/ic-arrows.png) 0 -35px no-repeat; display:inline-block; padding:2px 0 3px 15px; } .section-back a.back,.section-back .back a,.section-back span.back{ background-position:0 -195px; } a.back-to-top,.back-to-top a,span.back-to-top{ background:url(../images/ic-arrows.png) 0 -113px no-repeat; display:inline-block; padding:2px 0 3px 15px; } a.external-link, .external-link a, a[rel=external]{ background:url(../images/ic-external-links.gif) 1px 5px no-repeat; display:inline-block; padding:2px 0 3px 18px; } /** * @tag 4.3.3 Forms */ label{ display:block; line-height:1.250;/*15px*/ margin-bottom:0.167em;/*2px*/ } .inp-text, textarea{ background:#ccc; border:0; color:#000; display:block; font:1em Arial, sans-serif; margin-bottom:18px; padding:5px 3px;} .col-610 .inp-text{ width:302px; } .col-296 .inp-text{ width:270px; } .col-610 textarea{ height:200px; width:604px; } /** * @tag 4.3.4 Headings */ h1 .h-subtext,.h1 .h-subtext,h2 .h-subtext,.h2 .h-subtext,h3 .h-subtext,.h3 .h-subtext,h4 .h-subtext,.h4 .h-subtext, label .h-subtext{ color:#666; font-family:Arial, sans-serif; font-weight:normal; } h2.hero,#str-content.h2-hero/*For IE6*/{ border-width:2px 0 0; border-style:solid; padding:5px 0 12px; margin-top:2em; } /** * @tag 4.3.5 Copy */ .copy .summary{ color:#666; font-family:"Arial Black", arial, sans-serif; margin-bottom:1.5em; } .copy .alignleft{ text-align:left; } .copy div.alignleft,.copy img.alignleft,.copy table.alignleft{ float:left; margin:18px 18px 18px 0; text-align:left; } .copy .aligncenter{ text-align:center; } .copy div.aligncenter,.copy img.aligncenter,.copy table.aligncenter{ display:block; margin:18px auto 9px; text-align:left; } .copy .alignright{ text-align:right; } .copy div.alignright,.copy img.alignright,.copy table.alignright{ float:right; margin:18px 0 18px 18px; text-align:left; } .copy img.alignleft,.copy img.alignright{ margin-bottom:9px; margin-top:0; } .copy h2,.copy .h2,.copy h3,.copy .h3,.copy h4,.copy .h4{ clear:both; margin:1em 0 0.150em;/* 0 0 3px*/ } .copy h4,.copy .h4{ margin-bottom:0.188em;/*3px*/ } .copy ul, .copy ol{ margin-left:34px; } .copy ul{ list-style-type:disc; } .copy ol{ list-style-type:decimal; } .copy a.img{ border:0; } /** * @tag 4.3.5.1 Miscellaneous */ .publish-information{ color:#666; } #str-content .error{ color:#f00; } .article-information{ border:3px solid #efede1; border-width:3px 0; padding:5px 0 9px; } .loading{ background:url(../images/loading.gif) center center no-repeat; } .no-border,#str-content a.no-border{ border-width:0; } input.tooltip{ color:#595954; } .cnr{ background:url(../images/corner-white.png) 0 0 no-repeat; font-size:0; height:4px; line-height:0; position:absolute; width:4px; z-index:200; } .cnr-tr{ background-position:top right; right:0; } .cnr-bl{ background-position:bottom left; bottom:0; } .cnr-br{ background-position:bottom right; bottom:0; right:0; } /** * @tag 4.3.5.2 Question and Answer */ .q-and-a ul{ list-style-type:none; margin-left:0; } .q-and-a p{ display:inline; } .q-and-a .question{ font-weight:bold; } .q-and-a .answer{ margin-bottom:1.125em/*18px*/; } .q-and-a ul ul{ list-style-type:disc; margin-left:34px; } /** * @tag 4.3.5.3 Inline images and captions */ .inline-image{ margin:5px 0 19px; width:296px; } .caption{ color:#666; font:0.750em/1.250/*12px/15px*/ "Arial Black", arial, sans-serif; margin:9px 0 3px; } .credit{ font-size:0.750em/*12px*/; line-height:1.250/*15px*/; margin:0; } /** * @tag 4.3.5.4 List with an image floated left and text alongside */ #str-content .img-text-list{ list-style-type:none; margin-left:0; } .img-text-list li{ margin-bottom:18px; overflow:hidden; width:100%; } .img-text-list img{ float:left; margin-right:18px; } .copy .img-text-list{ list-style-type:none; margin:0; } .col-610 .img-text-list,.col-610 .img-text-list li{ overflow:hidden; width:610px; } /** * @tag 4.3.5.5 List with an image floated left and text alongside (half) */ #str-content .img-text-list-half{ float:left; list-style-type:none; margin:0; width:100%; } .img-text-list-half li{ float:left; margin-bottom:18px; overflow:hidden; width:50%; } .img-text-list-half img{ float:left; margin-right:18px; } /** * @tag 4.3.6 Blocks */ .blk, .blk h2,.blk .h2, .copy .blk h4,.copy .blk .h4, .blk-list h4,.blk-list .h4{ background-position:0 0; background-repeat:no-repeat; padding:10px; } .blk{ background-color:#cfc6c1; background-position:0 bottom; margin-bottom:18px; padding-bottom:10px; } .blk:after{ clear:both; content:' '; display:block; font-size:0; height:0; line-height:0; visibility:hidden; width:0; } .copy .blk{ margin-bottom:0; } div.blk h2,div.blk .h2, .copy div.blk h4,.copy div.blk .h4, .blk-list h4,.blk-list .h4{ background-color:#a29791; color:#fff; margin:-10px -10px 0.5em; } .col-296 .blk,.col-296 .blk h2,.col-296 .blk .h2, .copy .blk-half,.copy .blk-half h4,.copy .blk-half .h4, .blk-list .blk,.blk-list h4,.blk-list .h4{ background-image:url(../images/blk-corner-296.png); width:276px; } .blk-solid{ background-color:#a29791; color:#fff; } .blk-solid a{ border-color:#fff; color:#fff; } .blk-solid .link{ background-position:0 -155px; } .blk-solid .back{ background-position:0 -195px; } .col-296 .blk-border{ background-color:#fff; background-image:url(../images/blk-border-296.png); background-position:0 bottom; } /** * @tag 4.3.6.1 Blk: standard elements */ .blk ul, .blk ol{ margin-left:34px; } .blk ul{ list-style-type:disc; } .blk ol{ list-style-type:decimal; } /** * @tag 4.3.6.2 Blk: Sign up form (ID: 2605) */ #blk-2605 fieldset{ margin:0; } #blk-2605 fieldset p{ font-size:0.750em/*12px*/; line-height:1.250/*15px*/; margin:10px 0; overflow:hidden; width:276px; } #blk-2605 fieldset p span{ display:inline-block; float:left; width:129px; } #blk-2605 fieldset p a{ float:right; width:111px; } /** * @tag 4.3.6.3 Blk-list (landing page) */ .blk-list{ margin-left:0; margin-top:1.125em; } .blk-list li{ float:left; margin-right:18px; } .blk-list .last{ margin-right:0; } .blk-list .blk{ min-height:11em; padding-bottom:2.25em; position:relative; } .blk-list li li{ display:block; float:none; margin:0 0 1em; } .blk-list .link-section{ bottom:1.125em; left:10px; position:absolute; } /** * @tag 4.3.6.4 External api feed */ #fb-feed{ min-height:100px; } .blk .external-api-list{ list-style-type:none; margin-left:0; } .blk .external-api-list li{ border-bottom:2px solid #efede1; margin-bottom:1em;/*5px*/ padding-bottom:1em;/*5px*/; } /** * @tag 4.3.7 Article lists (features, blog posts) */ .article-list{ border-bottom:2px solid #efede1; float:left; margin-bottom:5px; width:100%; } .article-list li{ float:left; padding-bottom:18px; } .col-610 .article-list li{ padding-left:157px; width:453px; } .article-list h2, .article-list .h2{ border-width:2px 0 0; border-style:solid; margin:0 0 0.800em -157px;/*16px*/ padding-top:5px; } .article-list .thumbnail{ border:0; float:left; margin:0 18px 9px -157px; } .article-list .thumbnail:hover{ border:0; } .copy .article-list{ list-style-type:none; margin:0; } .navigation{ border-bottom:2px solid #efede1; margin:0 0 5px; overflow:hidden; padding-bottom:1.750em;/*28px*/ width:610px; } .navigation .back-section{ float:left; } .navigation .link-section{ float:right; } .blog-share{ float:right; margin-top:-40px; } .blog-share a{ border:0; } /** * @tag 4.3.8 Article sticky lists (landing pages showing features) */ .article-sticky-list{ margin-bottom:1.125em; } .article-sticky-list li{ clear:both; overflow:hidden; padding-bottom:18px; width:610px; } .article-sticky-list h2{ border-top:2px solid #efede1; margin-bottom:0.800em;/*16px*/ padding-top:5px; } .article-sticky-list .thumbnail{ border:0; float:left; margin:0 18px 9px 0; } .article-sticky-list .thumbnail:hover{ border:0; } /** * @tag 4.3.9 Article related lists (landing pages showing features) */ .article-related-list{ float:left; width:100%; } .article-related-list li{ float:left; margin:0 0 18px 18px; width:191px; } .article-related-list li.first{ clear:left; margin-left:0; } .article-related-list h4{ margin-bottom:1em; } .article-related-list ul li{ float:none; margin:0 0 0.750em;/*12px*/ width:100%; } /** * @tag 4.3.10 Search pane */ #str-search-wrapper{ background:#fff; border:1px solid #c8c8bd; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; overflow:hidden; padding:18px; width:376px; } #str-search .btn{ float:right; margin-top:2px; padding:0; } #str-search .inp-text{ float:left; margin-bottom:0; } /** * @tag 4.4 Footer */ #str-footer a{ border-width:0; } #str-footer h2, #str-footer h3, #str-footer ul{ float:left; } /** * @tag 4.4.1 Footer partners */ #str-footer h3, #ftr-partners{ border:2px solid #efede1; border-width:0 2px; margin:0 17px; } #str-footer h3{ clear:right; color:#000; font-size:0.786em;/*11px*/ font-weight:normal; line-height:1; padding:0 17px; width:668px } #ftr-partners{ width:702px; } #ftr-partners li{ float:left; margin-bottom:17px; } /** * @tag 4.4.2 Footer colophon */ #ftr-links{ font-size:0.688em;/*11px*/ margin-top:-1.182em;/*-13px*/ width:107px; } #ftr-links li{ margin:0 0 0.364em;/*4px*/ } #ftr-links a{ color:#000; } #ftr-links a:hover{ border-width:1px; } /** * -------------------------------------------------- * @section 5.0 Sections * -------------------------------------------------- */ /** * @tag 5.1 Section: section-01 (blue w/h green h1) * Color: #00a1de */ /** * @tag 5.1.1 Header */ .section-01 #str-header-wrapper{ background-image:url(../images/hdr-default.gif); } .section-01 #logo-start{ background-image:url(../images/start-logo.png); } /** * @tag 5.1.2 Headings and misc */ .section-01 h1,.section-01 .h1, div .section-01 h1,div .section-01 .h1{ color:#34b233;/*green*/ } .section-01 h2,.section-01 .h2,.section-01 h2 a,.section-01 .h2 a, div .section-01 h2,div .section-01 .h2,div .section-01 h2 a,div .section-01 .h2 a{ color:#00a1de; } .section-01 .section-border,.section-01 h2,.section-01 .h2,.section-01 h3,.section-01 .h3,.section-01 h2 a,.section-01 .h2 a,.section-01 h3 a,.section-01 .h3 a, div .section-01 .section-border,div .section-01 h2,div .section-01 .h2,div .section-01 h3,div .section-01 .h3,div .section-01 h2 a,.section-01 .h2 a,div .section-01 h3 a,div .section-01 .h3 a{ border-color:#00a1de; } .section-01 .section-border-secondary,div .section-01 .section-border-secondary{ border-color:#32abef; } .section-01 .section-back,div .section-01 .section-back{ background-color:#00a1de; } /** * @tag 5.1.2 Buttons */ .section-01 .btn,div .section-01 .btn{ background-position:-296px -420px; } .section-01 .btn:hover,div .section-01 .btn:hover{ background-position:-296px -480px; } .section-01 .btn-half,div .section-01 .btn-half{ background-position:-296px -360px; } .section-01 .btn-half:hover,div .section-01 .btn-half:hover{ background-position:-435px -360px; } .col-296 .section-01 .btn{ background-position:-296px -600px; } .col-296 .section-01 .btn:hover{ background-position:-296px -660px; } .col-296 .section-01 .btn-half{ background-position:-296px -540px; } .col-296 .section-01 .btn-half:hover{ background-position:-425px -540px; } .section-01 .btn-lrg,div .section-01 .btn-lrg{ background-position:-296px -60px; } .section-01 .btn-lrg:hover,div .section-01 .btn-lrg:hover{ background-position:-296px -120px; } .section-01 .btn-lrg-half,div .section-01 .btn-lrg-half{ background-position:-296px 0px; } .section-01 .btn-lrg-half:hover,div .section-01 .btn-lrg-half:hover{ background-position:-435px 0px; } .col-296 .section-01 .btn-lrg{ background-position:-296px -240px; } .col-296 .section-01 .btn-lrg:hover{ background-position:-296px -300px; } .col-296 .section-01 .btn-lrg-half{ background-position:-296px -180px; } .col-296 .section-01 .btn-lrg-half:hover{ background-position:-425px -180px; } /** * @tag 5.1.3 Links */ .section-01 a.link-section,.section-01 .link-section a,.section-01 span.link-section, div .section-01 a.link-section,div .section-01 .link-section a,div .section-01 span.link-section{ background-position:0 -315px; } .section-01 a.link-full-section,.section-01 .link-full-section a,.section-01 span.link-full-section, div .section-01 a.link-full-section,div .section-01 .link-full-section a,div .section-01 span.link-full-section{ background-position:0 -315px; border-color:#00a1de; color:#00a1de; } .section-01 a.back-section,.section-01 .back-section a,.section-01 span.back-section, div .section-01 a.back-section,div .section-01 .back-section a,div .section-01 span.back-section{ background-position:0 -355px; } .section-01 a.back-full-section,.section-01 .back-full-section a,.section-01 span.back-full-section, div .section-01 a.back-full-section,div .section-01 .back-full-section a,div .section-01 span.back-full-section{ background-position:0 -355px; border-color:#00a1de; color:#00a1de; } .section-01 a.back-to-top,.section-01 .back-to-top a,.section-01 span.back-to-top, div .section-01 a.back-to-top,div .section-01 .back-to-top a,div .section-01 span.back-to-top{ background-position:0 -433px; border-color:#00a1de; color:#00a1de; } /** * @tag 5.1.4 Blocks */ div.blk-section-01 h2,div.blk-section-01 .h2, .copy div.blk-section-01 h4,.copy div.blk-section-01 .h4, div.blk-section-01-solid{ background-color:#00a1de; color:#fff; } .col-296 .blk-section-01-border{ background-position:-296px bottom; } /** * @tag 5.2 Section: section-02 (green w/h purple h1) * Color: #34b233 */ /** * @tag 5.2.1 Header */ .section-02 #str-header-wrapper{ background-image:url(../images/hdr-default.gif); } .section-02 #logo-start{ background-image:url(../images/start-logo.png); } /** * @tag 5.2.2 Headings and misc */ .section-02 h1,.section-02 .h1, div .section-02 h1,div .section-02 .h1{ color:#6e2585;/*purple*/ } .section-02 h2,.section-02 .h2,.section-02 h2 a,.section-02 .h2 a, div .section-02 h2,div .section-02 .h2,div .section-02 h2 a,.section-02 .h2 a{ color:#34b233; } .section-02 .section-border,.section-02 h2,.section-02 .h2,.section-02 h3,.section-02 .h3,.section-02 h2 a,.section-02 .h2 a,.section-02 h3 a,.section-02 .h3 a, div .section-02 .section-border,div .section-02 h2,div .section-02 .h2,div .section-02 h3,div .section-02 .h3,div .section-02 h2 a,div .section-02 .h2 a,div .section-02 h3 a,div .section-02 .h3 a{ border-color:#34b233; } .section-02 .section-border-secondary,div .section-02 .section-border-secondary{ border-color:#41c04a; } .section-02 .section-back,div .section-02 .section-back{ background-color:#34b233; } /** * @tag 5.2.2 Buttons */ .section-02 .btn,div .section-02 .btn{ background-position:-592px -420px; } .section-02 .btn:hover,div .section-02 .btn:hover{ background-position:-592px -480px; } .section-02 .btn-half,div .section-02 .btn-half{ background-position:-592px -360px; } .section-02 .btn-half:hover,div .section-02 .btn-half:hover{ background-position:-731px -360px; } .col-296 .section-02 .btn{ background-position:-592px -600px; } .col-296 .section-02 .btn:hover{ background-position:-592px -660px; } .col-296 .section-02 .btn-half{ background-position:-592px -540px; } .col-296 .section-02 .btn-half:hover{ background-position:-721px -540px; } .section-02 .btn-lrg,div .section-02 .btn-lrg{ background-position:-592px -60px; } .section-02 .btn-lrg:hover,div .section-02 .btn-lrg:hover{ background-position:-592px -120px; } .section-02 .btn-lrg-half,div .section-02 .btn-lrg-half{ background-position:-592px 0px; } .section-02 .btn-lrg-half:hover,div .section-02 .btn-lrg-half:hover{ background-position:-731px 0px; } .col-296 .section-02 .btn-lrg{ background-position:-592px -240px; } .col-296 .section-02 .btn-lrg:hover{ background-position:-592px -300px; } .col-296 .section-02 .btn-lrg-half{ background-position:-592px -180px; } .col-296 .section-02 .btn-lrg-half:hover{ background-position:-721px -180px; } /** * @tag 5.2.3 Links */ .section-02 a.link-section,.section-02 .link-section a,.section-02 span.link-section, div .section-02 a.link-section,div .section-02 .link-section a,div .section-02 span.link-section{ background-position:0 -475px; } .section-02 a.link-full-section,.section-02 .link-full-section a,.section-02 span.link-full-section, div .section-02 a.link-full-section,div .section-02 .link-full-section a,div .section-02 span.link-full-section{ background-position:0 -475px; border-color:#34b233; color:#34b233; } .section-02 a.back-section,.section-02 .back-section a,.section-02 span.back-section, div .section-02 a.back-section,div .section-02 .back-section a,div .section-02 span.back-section{ background-position:0 -515px; } .section-02 a.back-full-section,.section-02 .back-full-section a,.section-02 span.back-full-section, div .section-02 a.back-full-section,div .section-02 .back-full-section a,div .section-02 span.back-full-section{ background-position:0 -515px; border-color:#34b233; color:#34b233; } .section-02 a.back-to-top,.section-02 .back-to-top a,.section-02 span.back-to-top, div .section-02 a.back-to-top,div .section-02 .back-to-top a,div .section-02 span.back-to-top{ background-position:0 -593px; border-color:#34b233; color:#34b233; } /** * @tag 5.2.4 Blocks */ div.blk-section-02 h2,div.blk-section-02 .h2, .copy div.blk-section-02 h4,.copy div.blk-section-02 .h4, div.blk-section-02-solid{ background-color:#34b233; color:#fff; } .col-296 .blk-section-02-border{ background-position:-592px bottom; } /** * @tag 5.3 Section: section-03 (red w/h yellow h1) * Color: #c4262e */ /** * @tag 5.3.1 Header */ .section-03 #str-header-wrapper{ background-image:url(../images/hdr-default.gif); } .section-03 #logo-start{ background-image:url(../images/start-logo.png); } /** * @tag 5.3.2 Headings and misc */ .section-03 h1,.section-03 .h1, div .section-03 h1,div .section-03 .h1{ color:#e98300;/*yellow*/ } .section-03 h2,.section-03 .h2,.section-03 h2 a,.section-03 .h2 a, div .section-03 h2,div .section-03 .h2,div .section-03 h2 a,div .section-03 .h2 a{ color:#c4262e; } .section-03 .section-border,.section-03 h2,.section-03 .h2,.section-03 h3,.section-03 .h3,.section-03 h2 a,.section-03 .h2 a,.section-03 h3 a,.section-03 .h3 a, div .section-03 .section-border,div .section-03 h2,div .section-03 .h2,div .section-03 h3,div .section-03 .h3,div .section-03 h2 a,div .section-03 .h2 a,div .section-03 h3 a,div .section-03 .h3 a{ border-color:#c4262e; } .section-03 .section-border-secondary,div .section-03 .section-border-secondary{ border-color:#d13933; } .section-03 .section-back,div .section-03 .section-back{ background-color:#c4262e; } /** * @tag 5.3.2 Buttons */ .section-03 .btn,div .section-03 .btn{ background-position:-888px -420px; } .section-03 .btn:hover,div .section-03 .btn:hover{ background-position:-888px -480px; } .section-03 .btn-half,div .section-03 .btn-half{ background-position:-888px -360px; } .section-03 .btn-half:hover,div .section-03 .btn-half:hover{ background-position:-1027px -360px; } .col-296 .section-03 .btn{ background-position:-888px -600px; } .col-296 .section-03 .btn:hover{ background-position:-888px -660px; } .col-296 .section-03 .btn-half{ background-position:-888px -540px; } .col-296 .section-03 .btn-half:hover{ background-position:-1017px -540px; } .section-03 .btn-lrg,div .section-03 .btn-lrg{ background-position:-888px -60px; } .section-03 .btn-lrg:hover,div .section-03 .btn-lrg:hover{ background-position:-888px -120px; } .section-03 .btn-lrg-half,div .section-03 .btn-lrg-half{ background-position:-888px 0px; } .section-03 .btn-lrg-half:hover,div .section-03 .btn-lrg-half:hover{ background-position:-1027px 0px; } .col-296 .section-03 .btn-lrg{ background-position:-888px -240px; } .col-296 .section-03 .btn-lrg:hover{ background-position:-888px -300px; } .col-296 .section-03 .btn-lrg-half{ background-position:-888px -180px; } .col-296 .section-03 .btn-lrg-half:hover{ background-position:-1017px -180px; } /** * @tag 5.3.3 Links */ .section-03 a.link-section,.section-03 .link-section a,.section-03 span.link-section, div .section-03 a.link-section,div .section-03 .link-section a,div .section-03 span.link-section{ background-position:0 -635px; } .section-03 a.link-full-section,.section-03 .link-full-section a,.section-03 span.link-full-section, div .section-03 a.link-full-section,div .section-03 .link-full-section a,div .section-03 span.link-full-section{ background-position:0 -635px; border-color:#c4262e; color:#c4262e; } .section-03 a.back-section,.section-03 .back-section a,.section-03 span.back-section, div .section-03 a.back-section,div .section-03 .back-section a,div .section-03 span.back-section{ background-position:0 -675px; } .section-03 a.back-full-section,.section-03 .back-full-section a,.section-03 span.back-full-section, div .section-03 a.back-full-section,div .section-03 .back-full-section a,div .section-03 span.back-full-section{ background-position:0 -675px; border-color:#c4262e; color:#c4262e; } .section-03 a.back-to-top,.section-03 .back-to-top a,.section-03 span.back-to-top, div .section-03 a.back-to-top,div .section-03 .back-to-top a,div .section-03 span.back-to-top{ background-position:0 -753px; border-color:#c4262e; color:#c4262e; } /** * @tag 5.3.4 Blocks */ div.blk-section-03 h2,div.blk-section-03 .h2, .copy div.blk-section-03 h4,.copy div.blk-section-03 .h4, div.blk-section-03-solid{ background-color:#c4262e; color:#fff; } .col-296 .blk-section-03-border{ background-position:-888px bottom; } /** * @tag 5.4 Section: section-04 (orange w/h blue h1) * Color: #e98300 */ /** * @tag 5.4.1 Header */ .section-04 #str-header-wrapper{ background-image:url(../images/hdr-default.gif); } .section-04 #logo-start{ background-image:url(../images/start-logo.png); } /** * @tag 5.4.2 Headings and misc */ .section-04 h1,.section-04 .h1, div .section-04 h1,div .section-04 .h1{ color:#00a1de;/*blue*/ } .section-04 h2,.section-04 .h2,.section-04 h2 a,.section-04 .h2 a, div .section-04 h2,div .section-04 .h2,div .section-04 h2 a,div .section-04 .h2 a{ color:#e98300; } .section-04 .section-border,.section-04 h2,.section-04 .h2,.section-04 h3,.section-04 .h3,.section-04 h2 a,.section-04 .h2 a,.section-04 h3 a,.section-04 .h3 a, div .section-04 .section-border,div .section-04 h2,div .section-04 .h2,div .section-04 h3,div .section-04 .h3,div .section-04 h2 a,div .section-04 .h2 a,div .section-04 h3 a,div .section-04 .h3 a{ border-color:#e98300; } .section-04 .section-border-secondary,div .section-04 .section-border-secondary{ border-color:#ffaa12; } .section-04 .section-back,div .section-04 .section-back{ background-color:#e98300; } /** * @tag 5.4.2 Buttons */ .section-04 .btn,div .section-04 .btn{ background-position:-1184px -420px; } .section-04 .btn:hover,div .section-04 .btn:hover{ background-position:-1184px -480px; } .section-04 .btn-half,div .section-04 .btn-half{ background-position:-1184px -360px; } .section-04 .btn-half:hover,div .section-04 .btn-half:hover{ background-position:-1323px -360px; } .col-296 .section-04 .btn{ background-position:-1184px -600px; } .col-296 .section-04 .btn:hover{ background-position:-1184px -660px; } .col-296 .section-04 .btn-half{ background-position:-1184px -540px; } .col-296 .section-04 .btn-half:hover{ background-position:-1313px -540px; } .section-04 .btn-lrg,div .section-04 .btn-lrg{ background-position:-1184px -60px; } .section-04 .btn-lrg:hover,div .section-04 .btn-lrg:hover{ background-position:-1184px -120px; } .section-04 .btn-lrg-half,div .section-04 .btn-lrg-half{ background-position:-1184px 0px; } .section-04 .btn-lrg-half:hover,div .section-04 .btn-lrg-half:hover{ background-position:-1323px 0px; } .col-296 .section-04 .btn-lrg{ background-position:-1184px -240px; } .col-296 .section-04 .btn-lrg:hover{ background-position:-1184px -300px; } .col-296 .section-04 .btn-lrg-half{ background-position:-1184px -180px; } .col-296 .section-04 .btn-lrg-half:hover{ background-position:-1313px -180px; } /** * @tag 5.4.3 Links */ .section-04 a.link-section,.section-04 .link-section a,.section-04 span.link-section, div .section-04 a.link-section,div .section-04 .link-section a,div .section-04 span.link-section{ background-position:0 -795px; } .section-04 a.link-full-section,.section-04 .link-full-section a,.section-04 span.link-full-section, div .section-04 a.link-full-section,div .section-04 .link-full-section a,div .section-04 span.link-full-section{ background-position:0 -795px; border-color:#e98300; color:#e98300; } .section-04 a.back-section,.section-04 .back-section a,.section-04 span.back-section, div .section-04 a.back-section,div .section-04 .back-section a,div .section-04 span.back-section{ background-position:0 -835px; } .section-04 a.back-full-section,.section-04 .back-full-section a,.section-04 span.back-full-section, div .section-04 a.back-full-section,div .section-04 .back-full-section a,div .section-04 span.back-full-section{ background-position:0 -835px; border-color:#e98300; color:#e98300; } .section-04 a.back-to-top,.section-04 .back-to-top a,.section-04 span.back-to-top, div .section-04 a.back-to-top,div .section-04 .back-to-top a,div .section-04 span.back-to-top{ background-position:0 -913px; border-color:#e98300; color:#e98300; } /** * @tag 5.4.4 Blocks */ div.blk-section-04 h2,div.blk-section-04 .h2, .copy div.blk-section-04 h4,.copy div.blk-section-04 .h4, div.blk-section-04-solid{ background-color:#e98300; color:#fff; } .col-296 .blk-section-04-border{ background-position:-1184px bottom; } /** * @tag 5.5 Section: section-05 (purple w/h red h1) * Color: #6e2585 */ /** * @tag 5.5.1 Header */ .section-05 #str-header-wrapper{ background-image:url(../images/hdr-default.gif); } .section-05 #logo-start{ background-image:url(../images/start-logo.png); } /** * @tag 5.5.2 Headings and misc */ .section-05 h1,.section-05 .h1, div .section-05 h1,div .section-05 .h1{ color:#c4262e;/*red*/ } .section-05 h2,.section-05 .h2,.section-05 h2 a,.section-05 .h2 a, div .section-05 h2,div .section-05 .h2,div .section-05 h2 a,div .section-05 .h2 a{ color:#6e2585; } .section-05 .section-border,.section-05 h2,.section-05 .h2,.section-05 h3,.section-05 .h3,.section-05 h2 a,.section-05 .h2 a,.section-05 h3 a,.section-05 .h3 a, div .section-05 .section-border,div .section-05 h2,div .section-05 .h2,div .section-05 h3,div .section-05 .h3,div .section-05 h2 a,div .section-05 .h2 a,div .section-05 h3 a,div .section-05 .h3 a{ border-color:#6e2585; } .section-05 .section-border-secondary,div .section-05 .section-border-secondary{ border-color:#853595; } .section-05 .section-back,div .section-05 .section-back{ background-color:#6e2585; } /** * @tag 5.5.2 Buttons */ .section-05 .btn,div .section-05 .btn{ background-position:-1480px -420px; } .section-05 .btn:hover,div .section-05 .btn:hover{ background-position:-1480px -480px; } .section-05 .btn-half,div .section-05 .btn-half{ background-position:-1480px -360px; } .section-05 .btn-half:hover,div .section-05 .btn-half:hover{ background-position:-1619px -360px; } .col-296 .section-05 .btn{ background-position:-1480px -600px; } .col-296 .section-05 .btn:hover{ background-position:-1480px -660px; } .col-296 .section-05 .btn-half{ background-position:-1480px -540px; } .col-296 .section-05 .btn-half:hover{ background-position:-1609px -540px; } .section-05 .btn-lrg,div .section-05 .btn-lrg{ background-position:-1480px -60px; } .section-05 .btn-lrg:hover,div .section-05 .btn-lrg:hover{ background-position:-1480px -120px; } .section-05 .btn-lrg-half,div .section-05 .btn-lrg-half{ background-position:-1480px 0px; } .section-05 .btn-lrg-half:hover,div .section-05 .btn-lrg-half:hover{ background-position:-1619px 0px; } .col-296 .section-05 .btn-lrg{ background-position:-1480px -240px; } .col-296 .section-05 .btn-lrg:hover{ background-position:-1480px -300px; } .col-296 .section-05 .btn-lrg-half{ background-position:-1480px -180px; } .col-296 .section-05 .btn-lrg-half:hover{ background-position:-1609px -180px; } /** * @tag 5.5.3 Links */ .section-05 a.link-section,.section-05 .link-section a,.section-05 span.link-section, div .section-05 a.link-section,div .section-05 .link-section a,div .section-05 span.link-section{ background-position:0 -955px; } .section-05 a.link-full-section,.section-05 .link-full-section a,.section-05 span.link-full-section, div .section-05 a.link-full-section,div .section-05 .link-full-section a,div .section-05 span.link-full-section{ background-position:0 -955px; border-color:#6e2585; color:#6e2585; } .section-05 a.back-section,.section-05 .back-section a,.section-05 span.back-section, div .section-05 a.back-section,div .section-05 .back-section a,div .section-05 span.back-section{ background-position:0 -995px; } .section-05 a.back-full-section,.section-05 .back-full-section a,.section-05 span.back-full-section, div .section-05 a.back-full-section,div .section-05 .back-full-section a,div .section-05 span.back-full-section{ background-position:0 -995px; border-color:#6e2585; color:#6e2585; } div .section-05 a.back-to-top,div .section-05 .back-to-top a,div .section-05 span.back-to-top{ background-position:0 -1073px; border-color:#6e2585; color:#6e2585; } /** * @tag 5.5.4 Blocks */ div.blk-section-05 h2,div.blk-section-05 .h2, .copy div.blk-section-05 h4,.copy div.blk-section-05 .h4, div.blk-section-05-solid{ background-color:#6e2585; color:#fff; } .col-296 .blk-section-05-border{ background-position:-1480px bottom; } /** * -------------------------------------------------- * @section 6.0 Pages * -------------------------------------------------- */ /** * @tag 6.1 Home page */ #blog-home h2{ border-width:2px 0 0; border-style:solid; padding:5px 0 12px; margin-top:2em; } #blog-home .blog-share{ margin-top:-35px; } /** * @tag 6.2 Partners and supporters */ .copy .partners-list{ border-bottom:3px solid #efede1; list-style:none; margin:0; padding-bottom:18px; overflow:hidden; width:610px; } .copy #supporters{ border-bottom-width:0; } .partners-list li{ float:left; } .partners-list a{ border:0; } /** * @tag 6.3 Blog post */ h2#comments{ border-width:2px 0 0; border-style:solid; padding:5px 0 12px; margin-top:2em; } .commentlist{ border-top:3px solid #efede1; margin-top:18px; } .commentlist cite{ font-style:normal; } .comment{ border-bottom:3px solid #efede1; padding:18px 0 0; position:relative; } .comment cite{ font-weight:bold; } .comment .btn{ position:absolute; right:0; top:1.357em;/*19px*/ } #search-results iframe { width:600px; } /* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */