/* ---------------------------------------------------------- Speedmatters CSS Managed by: Blue State Digital Last Update: August 2009 TABLE OF CONTENT 01 - GLOBAL BROWSER RESET 02 - COMMON STYLE 03 - LAYOUT 04 - HOMEPAGE 05 - SUBPAGES 06 - FRAMEWORK 07 - UTILITY COLOR GUIDE (Main Site Colors and their Hex Codes) Blue: #3585c8 Red: #d60e21 ---------------------------------------------------------- */ /* @group 01 =GLOBAL BROWSER RESET */ /* YUI Reset version: 2.7.0 */ html { color: #000; background: #FFF; } body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,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,optgroup { font-style: inherit; font-weight: inherit; } del,ins { text-decoration: none; } li { 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; font-variant: normal; } sup { vertical-align: baseline; } sub { vertical-align: baseline; } /*because legend doesn't inherit in IE */ legend { color: #000; } input,button,textarea,select,optgroup,option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; } /*@purpose To enable resizing for IE */ /*@branch For IE6-Win, IE7-Win */ input,button,textarea,select { *font-size: 100%; } /* @end */ /* @group 02 =COMMON STYLE */ body { background: #fff; font: 75% Verdana, Arial, Helvetica, sans-serif; color: #333;} .base h1 { font: bold 32px/1.25em "Trebuchet MS", Verdana, sans-serif; color: #3585c8; margin-bottom: 20px; } .base h2 { font: bold 24px/1.25em "Trebuchet MS", Verdana, sans-serif; } .base h3 { font: 14.5px/1.25em "Trebuchet MS", Verdana, sans-serif; color: #3585c8;} .base h4 { font: bold 12px/1.4em Verdana, sans-serif; color: #333; } .base p { color: #333; font-size: 12px; line-height: 1.5em; margin-bottom: 1.5em;} a {color: #d60e21; overflow:hidden;} a:hover {text-decoration:none;} .base h1 a { color: #3585c8; text-decoration: none;} .base h1 a:hover { text-decoration: underline; } .base ul, .base ol, .base dl { padding-left: 20px; margin: 1em 0 1em 20px; } .base ul li { list-style: disc; } .base ol li { list-style-type: decimal; } .base ul li, .base ol li { list-style-position: outside; line-height: 1.5em;} .base li ol { margin: 0 0 0 25px; } .base li ul { margin: 0 0 0 25px; } blockquote { background: url(/page/-/speedmatters/images/bg-blockquote.jpg) no-repeat; font-size: 12px; line-height: 1.5em; padding: 10px 0 0 39px; margin: 15px 0 25px 35px; } .callout {border: 1px solid #ccc; background: #f3f3f3; padding: 5px;} /* @end */ /* @group 03 =LAYOUT */ #containter{background:#666; width:100%; margin: 0 auto;} #header {width: auto; height: 180px; background: #3585c8 url(/page/-/speedmatters/images/header.png) no-repeat center; } #header a {display:block;width: auto;height: 177px;} #header span{display:none;} body.interior #content { background: #fff } #content-top { background: #fff; width: 100%; padding-bottom: 15px;} #content-bottom { background: #eaeaea; width: 100%; padding: 15px 0 0; } #nav-search {width: 990px;margin: 10px auto;height: 35px;} ul#nav { width: 650px; height: 21px; float: left; margin-top: 5px; background: url(/page/-/speedmatters/images/navigation.png) no-repeat; list-style-type: none; } #nav li { float: left; } #nav li a { display: block; height: 20px; text-indent: -9999px; overflow: hidden;} #nav li#home a { width: 58px; } #nav li#why a {width: 61px; } #nav li#principles a { width: 102px;} #nav li#benefits a { width: 90px;} #nav li#resources a { width: 124px;} #nav li#partners a { width: 92px} #nav li#action a { width: 105px;} #nav li#home a:hover { background: url(/page/-/speedmatters/images/navigation.png) no-repeat 0 -20px; } #nav li#why a:hover { background: url(/page/-/speedmatters/images/navigation.png) no-repeat -58px -20px; } #nav li#principles a:hover { background: url(/page/-/speedmatters/images/navigation.png) no-repeat -119px -20px; } #nav li#benefits a:hover { background: url(/page/-/speedmatters/images/navigation.png) no-repeat -221px -20px; } #nav li#resources a:hover { background: url(/page/-/speedmatters/images/navigation.png) no-repeat -311px -20px; } #nav li#partners a:hover { background: url(/page/-/speedmatters/images/navigation.png) no-repeat -435px -20px; } #nav li#action a:hover { background: url(/page/-/speedmatters/images/navigation.png) no-repeat -527px -20px; } #cse-search-box input.box{ float: left; width: 202px; color: #666; background-color:#eaeaea; margin: 2px 15px 0 25px; padding: 5px 5px; border: 1px solid #a7a7a7; font: 16px Verdana, Helvetica, sans-serif; display: inline;} .search #cse-search-box input.box { width: 300px; margin: 0px 10px 25px 25px;} #main, #main-bottom { width: 990px; margin:0 auto; height:auto; } body.interior #entry { width: 620px; padding: 15px; float: left; } body.onecol #entry { width: 960px; float: none;} #footer { background: #eaeaea; font-size: 10px; text-align:center; vertical-align: middle; padding: 15px 0; } #footer.interior {background-color: #fff; } #footer img {vertical-align:middle; margin-left: 5px;} #footer a { color:#333333; text-decoration:underline; font-size: 1em;} /* @end */ /* @group 04 =HOMEPAGE */ #content-top #main .feature{ width: 642px; float: left;} #content-top #main .feature .top{ background: url(/page/-/speedmatters/images/who_we_are_bg_tp.jpg) no-repeat;height: 14px; width: 642px; margin-top: 5px;} #content-top #main .feature .middle{ background: url(/page/-/speedmatters/images/who_we_are_bg_md.jpg) repeat-y; height: 494px; width: 602px; padding: 0 20px; } #content-top #main .feature .bottom{ background: url(/page/-/speedmatters/images/who_we_are_bg_bt.jpg) no-repeat; height: 19px; width: 642px;} #content-top #main .feature .principles{ background:url(/page/-/speedmatters/images/principles.png); float:left; width: 265px; height: 301px; } #content-top #main .feature .speedtest{ float:right; width: 313px; height: 302px; position: relative; z-index: 1;} body.home img { position: relative; z-index: 100; } .feature h2 { font: bold 18px/1.25em "Trebuchet MS", Verdana, sans-serif; margin: 0 0 10px;} #content-top #main .feature p { line-height: 1.6em; margin: 5px 0px 15px;} #content-top #main a.report { float: left; display: inline; display: block; width: 313px; height: 124px; background:url(/page/-/SPEEDMATTERS/images/2009%2008%2024%20CWA%20SM%20Report%20Button%20Front%20Page.jpg) no-repeat; text-indent:-9999px; margin: 0 0 0 30px;} #content-top #main .rank {width: 313px; height: 306px; background: url(/page/-/speedmatters/report-2009/rank_button.png) no-repeat; float: left; margin: 10px 0 0 30px; display: inline; position: relative;} #content-top #main .rank form#guideform{ position: absolute; top: 268px; left: 145px;} #guideform legend, #guideform label { display: none;} #content-bottom .blog{width: 641px; float:left;} #content-bottom .blog-top{width: 642px; height: 18px; background:url(/page/-/speedmatters/images/blog_top.jpg) no-repeat; float:left;margin-top: 15px;} #content-bottom .blog-bottom{ float:left;width: 612px; height: auto; background: url(/page/-/speedmatters/images/blog_bottom.jpg) no-repeat 0 100%; padding: 0 15px 15px; } .blog .title h2 { background: url(/page/-/speedmatters/images/blog_title.png) no-repeat; float: left; margin: 0; } .blog .title h2 a { float:left;display: block; width: 351px; height: 40px; text-indent: -9999px; overflow: hidden;} .blog .title .rss { background: url(/page/-/speedmatters/images/rss_button.jpg) no-repeat; width: 15px; display: block; text-indent: -9999px; overflow: hidden; float: left; margin-left: 10px; display:inline; margin-top: 9px;} body.home .blog h3 { color: #3585c8; margin-bottom: 5px; } body.home .blog h3 a { color: #3585c8; line-height: 1.4em; text-decoration: none; font-size: 1.25em;} body.home .blog h3 a:hover { text-decoration: underline; } body.home .blog .entry p { color: #333; font-size: 1em; line-height: 1.5em; margin: 0 0 1.5em; } .blog .all{ margin: 10px 0;} .blog .title{ width: 642px; height: 40px; margin-bottom: 20px;} #content-bottom .blog .byline { font-size: .8em; margin-bottom: 10px;} #content-bottom .blog .byline a { font-size: 1em; } #content-bottom .blog .post{margin-bottom: 25px;} #content-bottom .blog .more{margin-bottom: 25px;} .blog .update { float: left; width: 255px;} body.home .blog .update h3, #entry.blog .update h3 { float: left; margin: 6px 0 0px 7px; } body.home .blog .update h3 a, #entry.blog .update h3 a { color: #3585c8; text-decoration: none;} .blog .title img { float: left; margin: 0 0 0 15px; } .video .top{background:url(/page/-/speedmatters/images/video_feature_top.jpg) no-repeat;width: 313px; height: 40px;} .video .mid{background:url(/page/-/speedmatters/images/video_feature_mid.jpg) repeat-y; width: 295px; padding: 10px 9px;} .video .mid #brightcove { border: 5px solid #fff; width: 286px; margin-bottom: 10px;} .video .mid a { background: url(/page/-/speedmatters/images/btn-morevideos.jpg) no-repeat; width: 112px; height: 31px; float: right; display: inline-block; text-indent: -9999px; overflow: hidden; margin-right: 15px;} .video .bottom{background:url(/page/-/speedmatters/images/video_feature_bottom.jpg); height: 15px; width: 313px;} #content-bottom #main-bottom .video{ float: right; display: inline; width: 313px; margin-bottom: 0; margin-top: 5px; margin-left: 0; } .principles a.universality {display:block; height: 44px; margin-top: 86px; width: 201px; margin-left: 31px; text-indent:-9999px} .principles a.speed {display:block;height: 44px;margin-top: 6px;width: 201px;margin-left: 31px;text-indent:-9999px} .principles a.open {display:block;height: 44px;margin-top: 6px;width: 201px;margin-left: 31px;text-indent:-9999px} .principles a.protection {display:block;height: 44px;width: 201px;margin-left: 31px; margin-top: 6px;text-indent:-9999px} /* @end */ /* @group 05 =SUBPAGES */ #sidebar{width: 313px; float:right; margin: 10px 0 0 0px; display: inline;} #sidebar .video .top{background:url(/page/-/speedmatters/images/video_feature_top.jpg) no-repeat;width: 313px; height: 40px; margin-top: 20px;} #sidebar .video .bottom{background:url(/page/-/speedmatters/images/video_feature_bottom.jpg); height: 15px; width: 313px;} #sidebar .blogposts {margin: 20px 0;} #sidebar .blogposts ul {margin-left: 0px;} #sidebar .blogposts li {margin-bottom: 10px;} #sidebar .blogposts .byline {font-size: 10px;} #sidebar #report a{ display: block; width: 313px; height: 124px;background:url(/page/-/SPEEDMATTERS/images/2009%2008%2024%20CWA%20SM%20Report%20Button%20Front%20Page.jpg); text-indent:-9999px; overflow: hidden; margin-bottom: 10px; } #sidebar .speedtest { margin-top: 5px; } #entry.blog .title h2 { text-indent: -9999px; width: 355px; height: 41px; background: url(/page/-/speedmatters/images/blog_title_int.png) no-repeat; float: left; } #entry.blog .entry { margin-top: 15px;border-bottom: 10px solid #eaeaea;} #entry.blog .entry .dateline { margin-bottom: 15px; } #entry.blog .entry .date{ float: left; background:url(/page/-/speedmatters/images/date_bg.jpg) no-repeat; width: 82px; height: 19px; text-align:center;color: #fff; padding: 4px 0 3px; font: bold 1.1em "Trebuchet MS", Verdana, sans-serif; margin-top: 3px;} #entry.blog .entry p.author { float: left; font: italic 1.1em/1.4em Georgia, "Times New Roman", Times, serif; width: 530px; margin: 3px 0 0 5px; } #entry.blog .entry .links { font: italic 1.1em/1.4em Georgia, "Times New Roman", Times, serif; } #entry.blog .entry h3 a { text-decoration:none; font-size:1.2em;color:#3585c8; margin-bottom: 10px;} #entry.blog .entry h3 a:hover { text-decoration: underline; } #entry.blog .entry .categories { font-size: .9em; } #entry.blog .entry .categories a { color: #666; } #main #player object{margin-left: 109px; margin-top: 15px;} #pages .entry #report-table p{font-size:.75em;} #entry.resources .documents { padding: 10px 0; border-top: 1px solid #a7a7a7; } #entry.resources .documents.first { border: none; } #entry.resources .documents .text { float: right; } #entry.resources .documents img { float:left; width: 116px; margin: 0 10px 10px 0; } #entry.resources .documents p { width: 460px; } #entry.resources .documents ul.links li { margin-bottom: 10px; } #entry.resources .documents .menu{float: left; width: 100%; height: 25px;} #entry.benefits { width: 620px;float: left;padding: 15px;} #entry.benefits .benefit-sidebar {float:right; width: 285px; margin: 0 0 15px 15px; } #entry.benefits .benefit-sidebar img { margin-top: 10px; } #entry.benefits a {text-decoration:none;} #entry.benefits a:hover { text-decoration: underline; } #entry.benefits h3 a { text-decoration: underline; } #entry.benefits .posts{ margin-top: 20px; } #entry .reports { float:left; height: 200px;} #entry .reports img { float:left; width: 116px; margin-right: 15px; margin-top: 19px;} #entry .reports p { width: 460px;margin-left: 118px;} #entry .reports .divider img { width: 600px; height: 1px; margin-top: 5px; margin-bottom: 25px;} #entry .reports .map img { width: 225px; float:left; margin-bottom: 10px;} #entry .reports .test img { width: 243px;float:right; margin-bottom: 10px; margin-right: 20px;} ul#partners {margin-left: 30px; margin-bottom: 15px;} body #entry.state-policy h1 { margin-bottom: 0; } body #entry.state-policy h2 { color: #555; } #entry.state-policy .entry { border-bottom: 1px solid #a7a7a7; padding: 15px 0;} #entry.state-policy .entry h3 { margin-top: 0; } #entry.state-policy .entry p { margin: 5px 0; } #entry.state-policy .entry h5 { font-size: .8em; font-style: italic;} table.nav-table { margin-bottom: 15px; border-bottom: 1px solid #a7a7a7; } table.nav-table td { padding: 5px 0; } #report-table table { border: 1px solid #a7a7a7; } #report-table table td { padding: 10px; text-align: center; border: 1px solid #a7a7a7;} #report-table table td h3 { margin-bottom: 10px; font-weight: bold;} #report-table table td p { margin: 5px 0; } /* @end */ /* @group 06 =FRAMEWORK */ /* @end */ /* @group 07 =UTILITY */ .stretcher { clear: both; height: 1px; visibility: hidden; } .nomargin { margin-bottom: 0px; } .floatl {float: left; margin: 0; padding: 0 10px 10px 0;} .floatr {float: right; margin: 0; padding: 0 0 10px 10px;} .floatl-nomargin { float: left; margin: 0; padding: 0;} .floatr-nomargin { float: right; margin: 0; padding: 0;} .clear {clear:both; height:0; margin:0; font-size: 1px; line-height: 0;} .required { color: red; } i, em { font-style: italic; } b, strong { font-weight: bold; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative;} sup { bottom: 1ex; } sub { top: .5ex; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix {display:inline-block;} .clearfix {display:block;} /* @end */ /* the overlayed element */ div.overlay { background-image:url(/page/-/js/overlay/white.png); /* growing background image */ width:250px; height:100px; /* dimensions after the growing animation finishes */ display:none; /* initially overlay is hidden */ padding:25px; /* some padding to layout nested elements nicely */ } div.overlay div.close { background-image:url(/page/-/js/overlay/close.png); position:absolute; right:0px; top:0px; cursor:pointer; height:35px; width:35px; }