/************************************************ FILE: layout.css DESCRIPTION: file defines base structure - The layout of the site ************************************************/ /* Highest Level */ body {padding: 0; background:#202120; text-align:center;font-family:Lucida Grande, Tahoma, sans-serif;} /* Sprites */ /* Sprite 1 (8 Bit PNG of interfece elements) */ .spr-01, #header, #nav-main a, #nav-sub strong a, .box .title, .box th, .box-bl, .box-ml, .box-tl, .has-js .nav-tabbed li a, .twitter-feed .tweet .top, .twitter-feed .tweet .bottom, .pricing-options .first th, .pricing-options .second th {background: url(../img/sprites/spr_01_interface_8bit.png) no-repeat;} /* Sprite 2 (8 Bit PNG of icons) */ .spr-02, .blog-list .title a, .ticks li, .blog-list li, .blog-list a, .box td .tick, .stars-sma li , .download-zip, .download-github, .stars-lrg li, .google-group, .irc, .materials .zip, .materials .pdf, .pr li a, ul.social li a, .features #banner .two .previous, .features #banner .two .next, #template #clm-one ul li {background:url(../img/sprites/spr_02_icons_8bit.png) no-repeat;} /* Sprite 3 (24 BIT PNG Icons) */ .title-icon span, .icon-vj {background-image:url(../img/sprites/spr_03_icons_24bit.png); background-repeat:no-repeat;} /* Container (Used to set the width of the page in #header, #banner & #template) */ .container {width:960px; margin:0 auto; position:relative; text-align:left;} /* Header */ #header {height:90px; color:#fff; margin: 0 auto; position: relative; text-align:center; background-color: #fff;;background-position:0 49px; background-repeat:repeat-x;} #logo {position: absolute; top: 12px; left: 10px; display:block; width:278px; height:29px; text-indent:-9999px; overflow:hidden; background:url(../img/header/logo.png) 0 0 no-repeat;} /*NAV */ #nav-main {float: right; margin:16px 0; height:34px;} #nav-main li {float: left; height: 34px; padding:0; margin:0 10px 0 0; list-style-type:none;} #nav-main a {display:block; height:34px; padding:0; margin:0; font-family: 'Trebuchet MS', Helvetica, Arial;} #nav-main .videojuicer a, #nav-main .developer a, #nav-main .press a {text-indent:-9999px; overflow:hidden;} /* BG IMAGES */ #nav-main .videojuicer a {width:121px; background-position:0 -150px;} #nav-main .developer a {width:113px; background-position:-125px -150px;} #nav-main .press a {width:68px; background-position:-240px -150px;} /* Active Styles */ #nav-main .videojuicer strong a {background-position:-319px -149px;} #nav-main .developer strong a {background-position:-445px -149px;} #nav-main .press strong a {background-position:-560px -149px;} /* NAV SUB (Nested inside Nav Main for full semantic lovliness) */ #nav-sub {display: block; width: 960px; height: 40px; position: absolute; top: 49px; left: 50%; margin:0 0 0 -466px; text-align:right; padding:0;} #nav-sub li {float: left; display:block; margin:0; list-style-type:none; background:none;font-family:Lucida Grande,Tahoma,sans-serif;font-size:90%;text-transform:uppercase;padding:0 0 20px 0;} /* Anchors */ #nav-sub a, #nav-sub a:link, #nav-sub a:visited {display: block; height: 36px; padding: 4px 0 0 0; margin: 0 34px 0 0; line-height:34px; background: none; color: #ccc; font-size: 123.1%; font-weight: normal; text-shadow: 1px 1px 1px #000; } #nav-sub a:hover {color:#fff;} #nav-sub a:active {color:#ccc;} /* Reset inherited #nav-main styles */ #nav-main .videojuicer li a, #nav-main .developer li a, #nav-main .press li a {width:auto; text-indent:0; overflow:visible;} /* Active Styles */ #nav-sub strong a, #nav-sub strong a:link, #nav-sub strong a:visited, #nav-sub strong a:hover, #nav-sub strong a:active {color:#fff; cursor: default; background:url(../img/sprites/spr_01_interface_8bit.png) no-repeat center -47px;} /* Right Styles */ #nav-sub .right {float: right; margin:0; padding: 0; } #nav-sub .right a, #nav-sub .right a:link, #nav-sub .right a:visited, #nav-sub .right a:hover, #nav-sub .right a:active {height: 20px; padding: 4px 15px 0 15px; margin: 8px 0 0 0; line-height:20px; border-left:1px solid #000;} #nav-sub .right-last a, #nav-sub .right-last a:link, #nav-sub .right-last a:visited, #nav-sub .right-last a:hover, #nav-sub .right-last a:active {border-right:1px solid #323232; border-left:none;} /* Banner (Large on home page, collapsed everywhere else) */ #banner {height: 23px; background:url(../img/bg_layout/bg-banner-tall.jpg) center top repeat-x} /* Template Area */ div#template {padding: 28px 0 70px 0; text-align: center; clear:both; background: #f9f9f9 url(../img/bg_layout/bg-template.png) top left repeat-x;} /* Default (When no class is applied to the body tag) */ div#clm-one {float:left; width:200px;} div#clm-two {float:left; width:440px;} div#clm-three {float:right; width:200px;} /* One Column */ .one-clm div#clm-two {width:840px; padding:10px;} .one-clm div#clm-one, .one-clm div#clm-three {display:none;} /* 2 50% wide columns */ .two-clm-eq div#clm-one {width:420px;} .two-clm-eq div#clm-two {width:420px; padding:0;} /* 2 Column Right */ .two-clm-L div#clm-one {float:left; width:619px; padding-right:24px; position:relative; left:14px;} .two-clm-L div#clm-two {float:right; width:266px; position:relative; left:-24px; border-left:1px solid #ebebeb;} /* Columns Within Layout */ .clm-third, .clm-half {float:left; margin-left:8px; margin-right:8px;} .clm-third {width:297px;} .clm-half {width:456px; overflow:hidden;} .clm-quater {float: left; width:228px; margin-right:8px;} /* Footer */ div#footer {min-height:286px; clear:both; color: #858687; background:#202120 url(../img/footer/bg-footer.png) top left repeat-x; font-size:90%;} div#footer .container {min-height:286px; background: url(../img/footer/bg-footer-splash.png) top left repeat-x;} div#footer .section {float:left; padding: 30px; padding:30px 30px 30px 0; width:210px; } div#footer h4 {color: #f9f9f9; font-weight:normal; padding-bottom:14px; } div#footer ul {margin:0; padding:0;} div#footer li {margin:0; padding:0 0 10px 0; background:none; list-style-type:none; font-size:93%;} div#footer p {color: #858687;} div#footer .copyright {display: block; clear:both; color:#fff; padding:0 0 30px; } div#footer a img {vertical-align:middle;} #footer a, #footer a:link, #footer a:visited {color: #858687;} #footer a:hover {color: #fff;} #footer a:focus {color: #858687;} #footer a:active {color: #858687;}