/* ========================================================================== Site: Subtv Media File: general.css Version: 1.0 Author: Roman Leinwather & Faren Gambrill Last updated: 27/04/2009 ========================================================================== TABLE OF CONTENT I. Yahoo Reset CSS II. Body III. Default Elements IV. Headings V. Links VI. Media VII. Layout VIII. Branding IX. Top (Time, Navigation, Ticker) X. Footer ========================================================================== */ /* I. Yahoo Reset CSS ================================================================================================================================================*/ @import url(http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css); :focus {-moz-outline-style:none;} /* does not validate */ /* II. Body ================================================================================================================================================*/ html {background:#fff;} body {font-family: Tahoma, Arial, Verdana, sans-serif; font-size:13px; color:#5a5a5a;} /* III. Default Elements ================================================================================================================================================*/ p,ul,dl,ol {padding-bottom:10px;} hr {display:none;} blockquote { } blockquote p { } blockquote cite { } abbr { } abbr:hover { } del { } strong {font-weight:bold; color:#000;} em {font-style:italic;} .float_left {float:left;} .float_right {float:right; } .hide_text {text-indent:-99999px;} .hide_all {display:none;} .error {color: #CC0000;} .success {color: #339900;} .highlight {color:#00bbd1;} .odd {background:#f7f7f7;} /* IV. Headings ================================================================================================================================================*/ h1 {font-size: 20px; font-family: Tahoma, Arial, Verdana, sans-serif; color:#000; font-weight:bold;} h2 {font-size: 18px; font-family: Tahoma, Arial, Verdana, sans-serif; color:#000; font-weight:bold;} h3 {font-size: 16px; font-family: Tahoma, Arial, Verdana, sans-serif; color:#000; font-weight:bold;} /* V. Links ================================================================================================================================================*/ a:link, a:visited {color:#00a0f4; text-decoration:none;} a:hover, a:focus {color:#00a0f4;} /* VI. Media ================================================================================================================================================*/ img {float:left;} /* VII. Layout ================================================================================================================================================*/ #page {margin:0 auto; width:990px;} #page #wrapper{float:left; width:990px; background: #f9f9f9 url(../img/top_bg.png) 0 0px repeat-x;} /* VIII. Branding ================================================================================================================================================*/ h1 {padding:12px 0 0 39px;} h1 a {display:block; background: url(../img/logo.png) 0 0 no-repeat; width:96px; height:38px;} #page #top {float:left; margin-top:25px; width:990px; font-size:13px;} #page #top #top_primary_content {margin:0px 39px; width:413px; float:left; height:273px; overflow:auto;} #page #top #top_primary_content h2 {float:left; clear:both; padding-bottom:20px;} #page #top #top_primary_content p {float:left; clear:both; padding-bottom:20px; width:400px;} #page #top #top_primary_content #top_links {float:left; clear:both; padding-bottom:20px; width:400px;} #page #top #top_secondary_content {width:438px; float:left; height:290px; margin:-15px 0 0 20px; background: url(../img/highlight.png) 0 0 no-repeat;} #page #top #media_area {float:left; width:438px; height:320px; /*background: url(../img/media_shadow.png) bottom left no-repeat;*/} #page #top #media_area #media_wrapper {float:left; width:438px; height:250px; padding-top:20px;} #page #top #media_area #media_wrapper #media_image {float:left; width:438px; height:250px; background:#0098F1;} #page #top #media_area #media_wrapper #media_image #images {float:left; width:438px; height:250px;} #page #top #media_area #media_wrapper #media_image #images ul {float:left; width:438px; height:250px;} #page #top #media_area #media_wrapper #media_image #images ul li {float:left; width:438px; *height:0px;/*LOG: 9/3/09 - Roman - fixes jumping of images in IE7*/} #page #top #media_area #media_wrapper #media_image #images ul li img {float:left; width:438px; height:250px; background:blue;} #page #top #media_area #media_wrapper #media_image #media_nav_numbers {float:left; width:418px; height:30px; padding:10px; background: url(../img/media_desciption_bg.png) 0 0 repeat-x; margin-top:-45px; font-size:12px;} #page #top #media_area #media_wrapper #media_image #media_nav_numbers #media_data {float:left; width:328px; height:25px; color:#000;} #page #top #media_area #media_wrapper #media_image #media_nav_numbers #media_data h4 {font-weight:bold;} #page #top #media_area #media_wrapper #media_image #media_nav_numbers ul {float:left; width:90px; height:25px;} #page #top #media_area #media_wrapper #media_image #media_nav_numbers ul li {float:left;} #page #top #media_area #media_wrapper #media_image #media_nav_numbers ul li a {display:block; color:#f2f2f2; text-decoration:none; font-size:11px; float:left; padding:1px 4px; margin-left:3px; background:#666; } #page #top #top_primary_content #welcome_header {background: url(../img/top_sprite.png) 0 0 no-repeat; width:267px; height:26px; margin-top:10px;} #page #top #contact_us {display:block; background: url(../img/top_sprite.png) 0 -56px no-repeat; width:126px; height:28px; float:left;} #page #top #special_offers {display:block; background: url(../img/top_sprite.png) -132px -56px no-repeat; width:133px; height:28px; float:left; margin-left:6px;} /* IX. Navigation =============================================================================================================================================== */ #page #top #primary_navigation {float:left; clear:both; width:990px; height:75px;} #page #top #primary_navigation ul {float:left;} #page #top #primary_navigation ul li{float:left; width:198px; height:69px;} #page #top #primary_navigation ul a{float:left; text-indent:-99999px; display:block; width:198px; height:69px;} #page #top #primary_navigation ul a span{float:left; text-indent:-99999px; display:block;} #page #top #primary_navigation ul li#about_nav a{background:url(../img/main_nav_sprite.png) -291px -31px no-repeat;} #page #top #primary_navigation ul li#media_nav a{background:url(../img/main_nav_sprite.png) -291px -31px no-repeat;} #page #top #primary_navigation ul li#production_nav a{background:url(../img/main_nav_sprite.png) -291px -31px no-repeat;} #page #top #primary_navigation ul li#case_studies_nav a{background:url(../img/main_nav_sprite.png) -291px -31px no-repeat;} #page #top #primary_navigation ul li#about_nav a:hover, #home_page #page #top #primary_navigation ul li#about_nav{background:url(../img/main_nav_sprite.png) 0px -25px no-repeat;} #page #top #primary_navigation ul li#media_nav a:hover, #media_page #page #top #primary_navigation ul li#media_nav{background:url(../img/main_nav_sprite.png) 0px -25px no-repeat;} #page #top #primary_navigation ul li#production_nav a:hover, #production_page #page #top #primary_navigation ul li#production_nav {background:url(../img/main_nav_sprite.png) 0px -25px no-repeat;} #page #top #primary_navigation ul li#case_studies_nav a:hover, #case_studies_page #page #top #primary_navigation ul li#case_studies_nav{background:url(../img/main_nav_sprite.png) 0px -25px no-repeat;} #page #top #primary_navigation ul li#sub_info_nav a:hover, #sub_info_page #page #top #primary_navigation ul li#sub_info_nav {background:url(../img/main_nav_sprite.png) 0px -25px no-repeat;} /* LOG: 5/3/2009 BY ROMAN - CLASSES WERE USED BY JS - FADEIN/OUT NAVIGATION. IT HAS A LEAK SO IT IS NOT USED ANYMORE... .hover_nav {background:url(../img/main_nav_sprite.png) 0px -25px no-repeat !important; opacity:0;} .hover_nav_after {background:url(../img/main_nav_sprite.png) -285px -31px no-repeat; opacity:0;} */ #page #top #primary_navigation ul li#about_nav a span{background:url(../img/main_nav_sprite.png) 0px 0px no-repeat; width:116px; height:17px; margin:28px 0 0 41px;} #page #top #primary_navigation ul li#media_nav a span{background:url(../img/main_nav_sprite.png) -121px 0px no-repeat; width:60px; height:17px; margin:28px 0 0 71px;} #page #top #primary_navigation ul li#production_nav a span{background:url(../img/main_nav_sprite.png) -188px 0px no-repeat; width:97px; height:17px; margin:28px 0 0 54px;} #page #top #primary_navigation ul li#case_studies_nav a span{background:url(../img/main_nav_sprite.png) -292px 0px no-repeat; width:116px; height:17px; margin:28px 0 0 44px;} #page #top #primary_navigation ul li#sub_info_nav a span{background:url(../img/main_nav_sprite.png) -410px 0px no-repeat; width:150px; height:23px; margin:28px 0 0 26px;} /* Secondary Navigation */ #page #top #secondary_navigation {float:left; clear:both; width:990px; height:55px; background: url(../img/secondary_menu_bg.png) 0 0 no-repeat;} #page #top #secondary_navigation ul {float: left; clear: both; width:668px; height:65px; margin:13px 0 0 200px;} #page #top #secondary_navigation ul li {float:left; width:154px; height:27px; margin-right:13px;} /* X. Footer ================================================================================================================================================*/ #footer {float:left; clear:both; width:990px; background-color:#000000; background-image:url(../img/footerBg.jpg); min-height:340px; padding-top:29px; color:#a8a8a8; font-size:12px; border-top:5px solid #666; border-bottom:5px solid #666;} #footer h3 {float:left; clear:both; height:13px; width:210px; clear:both;} #footer .footer_box {float:left; clear:both; padding-top:25px; width:210px;} #footer span, #footer h4{color: #5e5e5e;} #footer #latest_news {float:left; width:245px; margin-left:20px;} #footer #latest_news a {color: #A8A8A8; text-decoration:none;} #footer #latest_news a:hover {color:#00a0f4;} #footer #latest_news h3 {background: url(../img/footer_sprite.png) 0 0 no-repeat;} #footer #latest_news ul {float:left;} #footer #latest_news ul li {background: url(../img/footer_sprite.png) 0 -151px no-repeat; padding: 0 0 23px 20px;} #footer #our_network {float:left; width:228px; border-left:1px solid #232323; padding-left:12px; min-height:300px;} #footer #our_network a {color: #A8A8A8; text-decoration:none;} #footer #our_network a:hover {color:#00a0f4;} #footer #our_network h3 {background: url(../img/footer_sprite.png) 0 -14px no-repeat;} #footer #our_network ul {float:left;} #footer #our_network ul li {background: url(../img/footer_sprite.png) 0 -151px no-repeat; padding: 0 0 23px 20px;} #footer #contact_us_footer {float:left; width:218px; border-left:1px solid #232323; padding-left:12px; min-height:300px;} #footer #contact_us_footer h3 {background: url(../img/footer_sprite.png) 0 -28px no-repeat;} #footer #contact_us_footer a {color:#A8A8A8; text-decoration:none;} #footer #contact_us_footer a:hover {color:#00a0f4;} #footer #newsletter {float:left; width:230px; border-left:1px solid #232323; padding-left:12px; min-height:300px;} #footer #newsletter h3 {background: url(../img/footer_sprite.png) 0 -42px no-repeat;} #footer #newsletter form {float:left; clear:both; width:222px;} #footer #newsletter form div {float:left; clear:both; width:222px;} #footer #newsletter form label {float:left; display:none; } #footer #newsletter form #email {background: url(../img/footer_sprite.png) 0 -74px no-repeat; width:212px; height:15px; padding:5px; border:none; font-size:11px;} #footer #newsletter form #submit {background: url(../img/footer_sprite.png) 0 -56px no-repeat; width:69px; height:18px; font-size:0; border:none; margin:11px 0 0 153px; cursor:pointer;} #footer #newsletter #legal_content {float:left; color: #5e5e5e; margin-top:114px; width:220px;} #footer #newsletter #legal_content ul {float:left; width:220px;} #footer #newsletter #legal_content ul li {float:right; clear:both; text-align:right; width:200px;} #footer #newsletter #legal_content ul li a {color: #A8A8A8; text-decoration:none;} #footer #newsletter #legal_content ul li a:hover {color:#00a0f4;}