/* ---------------------------------------------------------- Video Game Voters Network CSS Managed by: Blue State Digital Last Update: July 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) ---------------------------------------------------------- */ /* 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%; } /* 02 =COMMON STYLE ---------------------------------------------------------- */ body { font-size: 12px; font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; } body a {text-decoration: none; color: #1c5a9d; font-weight: bold;} body a:hover {text-decoration: underline;} .base h1, .base h2, .base h3, .base h4 {font-weight: bold;} .base h2, .base h3, .base h4, .video-header {color: #1c5a9d;} .video-header span {color: #000;} .video-header {font-weight: bold;} .base h1 { font-size: 24px; color: #da1126; margin: 0 0 15px 0; line-height: 26px;} .base h2, .video-header { font-size: 18px; margin: 8px 0;} .base h3 { font-size: 14px; margin: 6px 0;} .base h4 { font-size: 12px; margin: 4px 0;} body .base p {font-size:12px; line-height: 18px; margin: 0 0 10px 0; } body .base .intro { font-size: 18px; line-height: 24px; } body .base blockquote {background: url(http://www.bluestatedigital.com/page/-/images/wrapper/bg-blockquote.jpg) no-repeat; font: 15px/24px Georgia, "Times New Roman", Times, serif; margin: -10px 0 15px 35px; padding: 10px 0 0 39px;} body .base ul, ol {margin: 16px 40px; padding-left: 8px;} body .base ul {list-style-type: disc; list-style-position: outside;} body .base ol {list-style-type: decimal; style-position: outside;} body .base ul li, .base ol li {line-height: 22px; padding-left: 4px; margin-bottom: 4px; style-position: inside;font-size:12px;} body .base ol li {list-style-type: decimal;} body .base ul li {list-style-type: disc;} body .base ul li li {list-style-type: circle;} body .base ul li li li {list-style-type: square;} body .base ul ul {list-style-type: square; margin: 4px; padding-left: 20px;} /* 03 =LAYOUT ---------------------------------------------------------- */ html, body {background: #000 url(/page/-/images/bgTile.jpg) repeat-x;} #container {background: url(/page/-/images/bg2.jpg) no-repeat; height: 500px; width: 977px; margin: 0 auto 0 auto; padding: 0 19px 0 24px;} /* header */ #header {position: relative; height: 138px;} #header h1 a {position: absolute; text-indent: -900em; display: block; height: 75px; width: 470px; top: 0; left: 0;} #signup-container {position: absolute; top: 0; right: 0; width: 380px;} #quickSignUp {position: relative;} #quickSignUp legend {font-size: 0;} #quickSignUp label {} #quickEmail {width: 180px; position: absolute; height: 19px; padding: 4px 0 0 0; top: 47px; left: 50px; border: none;} #quickZip {width: 68px; position: absolute; border: none; top: 47px; left: 245px; padding: 4px 0 0 0; height: 19px;} #quickSubmit {position: absolute; border: none; text-indent: -900em; width: 28px; top: 47px; right: 29px; height: 23px; cursor: pointer; background: none;} .age-check {position: absolute; right: 34px; top: 25px; color: #ececec; overflow: hidden; width: 180px;} .age-check p {float: right; margin: 0 0 0 4px;} .age-check input {float: left; margin: 2px 0 0 0;} #nav {position: absolute; height: 43px; width: 978px; background: url(/page/-/images/navBg.png); top: 81px; left: -1px; overflow: hidden; position: relative;} #nav ul li a {display: block; position: absolute; top: 0; background: url(/page/-/images/navBg.png) 0 0 no-repeat; height: 43px; text-indent: -900em;} #nav ul li a.nav-home {width: 122px; left: 0;} #nav ul li a.nav-home:hover, body#home #nav ul li a.nav-home {background-position: 0 -43px;} #nav ul li a.nav-about {width: 154px; background-position: -122px 0; left: 122px;} #nav ul li a.nav-about:hover, body#about #nav ul li a.nav-home {background-position: -122px -43px;} #nav ul li a.nav-action {width: 145px; background-position: -276px 0; left: 276px;} #nav ul li a.nav-action:hover, body#action #nav ul li a.nav-home {background-position: -276px -43px;} #nav ul li a.nav-learn {width: 151px; background-position: -421px 0; left: 421px;} #nav ul li a.nav-learn:hover, body#learn #nav ul li a.nav-learn {background-position: -421px -43px;} #nav ul li a.nav-spread {width: 189px; background-position: -572px 0; left: 572px;} #nav ul li a.nav-spread:hover, body#spread #nav ul li a.nav-spread {background-position: -572px -43px;} #nav ul li a.nav-media {width: 110px; background-position: -761px 0; left: 761px;} #nav ul li a.nav-media:hover, body#media #nav ul li a.nav-media {background-position: -761px -43px;} #nav ul li a.nav-video {width: 107px; background-position: -871px 0; left: 871px;} #nav ul li a.nav-video:hover, body#video #nav ul li a.nav-video {background-position: -871px -43px;} /* main */ body.onecol #main {background: #fff; padding: 15px; padding: 15px; margin: 0 10px 0 8px; width: 930px;} body#home #main {padding: 0 8px 0 8px; width: 962px;} body#home #main #content {padding: 0 0 0 0;} body.twocol #main #content {background: #fff; float: left; width: 618px; padding: 15px;} body#home.twocol #main #content {background: none;} body.twocol #main { padding: 0 10px 0 10px;font-size:11px;} /* sidebar */ #sidebar {width: 309px; float: right; margin: 0;} #sidebar .top {background: #040e2b; padding: 16px; width: 276px;} #sidebar .bottom-level {width: 276px; background: #183969; padding: 16px;} #sidebar .box {width: 273px; background: url(/page/-/images/sidebar-box-top-tile.png); margin: 0 0 5px 0; position: relative;} #sidebar .box .top {background: url(/page/-/images/sidebar-box-top.png) no-repeat; min-height: 39px; width: 228px; padding: 6px 0 5px 45px; color: #fff; line-height: 24px} #sidebar .box .top h3 {margin: 2px 0 0 0;} #sidebar .box .top {color: #fff; text-decoration: none; font-size: 24px;} #sidebar .box a.box-link {position: absolute; top: 0; bottom: 0; left: 0; width: 280px; padding: 0 0 0 0; text-indent: -900em; z-index: 900;} #sidebar .box .main {margin: 0 2px 0 3px; padding: 0 8px; background: #040d2f url(/page/-/images/sidebar-box-main.png) repeat-x; color: #03aded; font-size: 12px;} #sidebar .box .main a {color: #00b2fd;} #sidebar .box .bottom {background: url(/page/-/images/sidebar-box-bottom.png) no-repeat; height: 24px; width: 273px;} h3#connect-vgvn {font-size: 0; line-height: 0; display: block;} /* =footer */ body#home #footer {background: #2b60a2; padding: 25px 0; text-align: center; color: #fff; width: 961px; margin: 0 0 0 8px;} #footer {background: #2b60a2; padding: 25px 0; text-align: center; color: #fff; width: 956px; margin: 0 0 0 10px;font-family:"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;} body.onecol #footer {width: 960px; margin: 0 0 0 8px;} #footer a {color: #fff;} /* 04 =HOMEPAGE ---------------------------------------------------------- */ #feature {margin: 0 0 -3px 0; padding: 0 0 0 0;} #feature img { border-bottom: 6px solid #da1126; } body#home div#main {background: url(/page/-/images/columnBg.gif) 0 0 repeat-y;} #home .columns {width: 653px;} #content .left {float: left; width: 332px; margin: 0 0 0 0;} #content .right {float: right; width: 301px; padding: 20px 10px; margin: 0 0 0 0; background: url(/page/-/images/gray-white-gradient.png) repeat-x;} .home-vgvn-news a {background: url(/page/-/images/news-header.png) no-repeat; height: 20px; text-indent: -900em; width: 124px; padding: 0 0 15px 0; display: block;} .home-news .entry {margin: 0 0 20px 0;} .home-news .entry h4 {font-size: 18px; padding: 0 0 0 0; margin: 0 0 0 0;} .home-news .entry .entry-meta {font-size: 10px; padding: 0 0 6px 0; font-size: 12px;} .home-news .entry .entry-summary {padding: 0 0 6px 0;} .home-news .entry .post-info {padding: 0 0 0 0;} #homeVideo {padding: 6px; color: #fff; font-size: 15px;} #homeVideo p {margin: 5px 0;} #homeVideo a {color: #fff; text-decoration: none;} #homeVideo h3 {font-size: 24px; margin: 8px 0 8px 0;} #battlefield-map {height: 305px; width: 331px; background: url(/page/-/images/map.png) no-repeat; position: relative;} #battlefield-map .marker {position: absolute;} #battlefield-map .marker a {display: block; background: url(/page/-/images/dots.gif) 0 0 no-repeat; cursor: pointer; text-indent: -900em; height: 14px; width: 14px;} #battlefield-map .marker a:hover {background-position: -20px 0;} #video-spotlight {background: url(/page/-/images/video-spotlight.png) no-repeat; text-indent: -900em;} .more-news a { color: #cf1024; font-size: 14px; } /* 05 =SUBPAGES ---------------------------------------------------------- */ body.twocol #main {background: url(/page/-/images/twocol-main-bg.png) repeat-y;} /* blog */ body#blog .entry {margin: 0 0 60px 0;} body#blog .entry p.post-meta {color: #666;} body#blog .entry h2 {font-size: 30px; font-weight: bold; margin: 0 0 10px 0; line-height: 32px;} body#blog .entry div.more-links {background: #eee; padding: 15px;} body#blog .entry div.more-links p {margin: 0 0 8px 0;} body#blog .entry .blog-body p {line-height: 18px; margin: 0 0 10px 0;} body#blog .entry div.more-links p a {margin: 0 3px;} .blog-body {margin: 0 0 10px 0;} a.facebook, #blog.list .entry .more-links a.facebook { background: url(/page/-/images/btn-blog-socnet.png) no-repeat 0 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} a.facebook:hover, #blog.list .entry .more-links a.facebook:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat 0 -20px; } a.digg, #blog.list .entry .more-links a.digg { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -21px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} a.digg:hover, #blog.list .entry .more-links a.digg:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -21px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} a.tweet, #blog.list .entry .more-links a.tweet { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -45px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} a.tweet:hover, #blog.list .entry .more-links a.tweet:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -45px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} a.technorati, #blog.list .entry .more-links a.technorati { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -67px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} a.technorati:hover, #blog.list .entry .more-links a.technorati:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -67px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} a.email, #blog.list .entry .more-links a.email { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -90px 0; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} a.email:hover, #blog.list .entry .more-links a.email:hover { background: url(/page/-/images/btn-blog-socnet.png) no-repeat -90px -20px; text-indent: -9999px; width: 20px; display: inline-block; height: 20px; margin-right: 3px;} /* About Page */ #about-blurb { float: left; font-style: italic; margin: 72px 15px 0 0; width: 240px; } #about-blurb p { color: #555; font-size: 18px; line-height: 24px; } #about-copy { float: left; font-size: 14px; width: 360px; } #about-copy img { border-bottom: 6px solid #da1126; margin: 0 0 12px 0; padding: 0; } /* Take Action */ #take-action-splash { clear: both; margin-bottom: 24px; text-align: center; } #take-action-splash img { border-bottom: 6px solid #da1126; } #take-action-blurb { float: left; margin: 12px 15px 0 0; width: 300px; } #take-action-blurb p { color: #555; font-size: 18px; font-style: italic; line-height: 24px; } #take-action-list { background: #eee; border-top: 1px solid #ccc; float: left; margin: 0; padding: 0; width: 610px; } #take-action-list li { border-bottom: 1px dotted #ccc; list-style: none; padding: 6px 12px; } /* Learn More */ #learn-more-splash { float: right; margin-bottom: 24px; text-align: center; } #learn-more-splash img { border-bottom: 6px solid #da1126; } #learn-more-list { border-top: 1px dotted #ccc; float: left; margin: 0; padding: 0; width: 400px; } #learn-more-list li { border-bottom: 1px dotted #ccc; list-style: none; padding: 6px 12px; } /* Spread the Word */ #spread-blurb { font-style: italic; margin: 0 15px 24px 0; } #spread-blurb p { color: #555; font-size: 18px; line-height: 24px; } #spread-form { border-bottom: 1px solid #ddd; border-top: 3px solid #040e2b; font-size: 14px; padding: 12px 0; text-align: left; } #spread-form .field input, #spread-form .field textarea { width: 416px; } #spread-form td { padding: 6px 0; } #spread-splash { float: right; margin: 24px 0; text-align: center; } #spread-splash img { border-bottom: 6px solid #da1126; } /* Media Inquiries */ #media-blurb { float: left; margin: 10px 30px 0 0; width: 240px; } #media-intro { color: #555; font-size: 18px; font-style: italic; line-height: 24px; } #media-form { float: left; margin: 0; width: 360px; } #media-splash { margin: 24px 0 0 0; text-align: center; } /* Photo Wall */ a.protest-photo-link {margin: 0 10px 10px 0; border: 4px solid #000; height: 75px; width: 75px; display: block; float: left;} a.protest-photo-link:hover {border: 4px solid #00b2ff;} .protest-photo-info {max-width: 250px; background: #2b60a2; color: #fff; font-weight: bold; padding: 5px;} #image-container {margin: 0 0 20px 0;} a#submit-protest-photo-link {background: #1c5a9d; color: #fff; padding: 8px; margin: 0 0 20px 0; float: left;} /* Banners */ .banner-holder { margin: 25px 0; padding: 1px 0; } .banner { margin: 0 0 5px 0; text-align: center; } #banners .entry { background: #eee; border-top: 1px solid #ddd; padding: 15px 10px; } #banners .entry h3 { margin: 3px 0 9px 0; } #banners .entry label { display: block; padding: 5px 0; } #banners .entry input { width: 580px; } #banners .see-more, #banners .pagination { border-top: 1px solid #ddd; padding: 5px 0; } /* disclaimer */ #offsite-disclaimer-text {font-size: 16px; text-align: center;} #offsite-disclaimer-text p {margin: 0 0 10px 0;} #offsite-disclaimer-text a {font-weight: bold; text-transform: uppercase; text-decoration: underline;} /* SCOTUS */ #scotus-top-upper {margin: 0 0 20px 0;} #scotus-top-upper .left {width: 140px;;} #scotus-top-upper .right {width: 470px; margin: 0; padding: 0; background: none;} #scotus-top-upper h1 {font-size: 18px; color: #0c70ae; font-weight: bold; margin-bottom: 5px;} #scotus-top-upper .right p {line-height: 18px; color: #545453;} #scotus-bottom h2 { font-size: 18px; color: #DA1126; font-weight: bold; margin-bottom: 5px; } #scotus-bottom h3 { font-size: 16px; color: #0C70AE; font-weight: bold; margin: 14px 0; } #scotus-bottom p { margin-bottom: 8px; font-size: 12px; line-height: 18px; } #scotus-bottom ul { margin:5px 0; line-height:20px; font-size: 12px; } #scotus-bottom blockquote { background: url(http://www.bluestatedigital.com/page/-/images/wrapper/bg-blockquote.jpg) no-repeat; font: 15px/24px Georgia, "Times New Roman", Times, serif; margin: 5px 0 15px 5px; padding: 10px 0 0 39px; } .scotus-btns {border-bottom: 1px dotted #a6a6a6; padding: 0 0 25px 0; margin: 0 0 15px 0;} .scotus-btns a {margin: 0 32px;} .scotus-btns a.first {margin: 0 13px 0 0;} .scotus-btns a.last {margin: 0 0 0 13px;} .updated-entry {margin: 0 0 40px 0;} .updated-entry h3 {font-size: 18px; margin: 0 0 4px 0;} .updated-entry .blog-body {} .new-blog-meta {margin: 20px 0 0 0;} .blog-links-info {font-size: 12px; margin: 0 0 5px 0;} .blog-links-info div {float: left; padding: 0 5px;} .blog-links-info div.first {float: left; padding: 0 5px 0 0;} .social-link a { display: block; height: 20px; width: 20px; text-indent: -900em; background-image: url(/page/-/images/btn-blog-socnet.png); float: left; margin: 0;} .facebook-social {background-position: 0 0;} .facebook-social:hover {background-position: 0 -20px;} a.digg-social {background-position: -21px 0;} a.digg-social:hover {background-position: -21px -20px;} a.tweet-social {background-position: -45px 0;} a.tweet-social:hover {background-position: -45px -20px;} a.technorati-social {background-position: -67px 0;} a.technorati-social:hover {background-position: -67px -20px;} /* 06 =FRAMEWORK ---------------------------------------------------------- */ /* 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;}