/* Meyer's Browser Default Reset (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) -------------------------------------------------------------------------------------------------------------------------------*/ 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, 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-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: white; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* Essential -------------------------------------------------------------------------------------------------------------------------------*/ body { color: #fff; background: #333 url(../_img/body_bg.jpg) repeat-x; font-family: "Lucida Grande", arial, helvetica, sans-serif; font-size: 0.85em; } a { color: #900; } a:hover { color: #ccc; } #container { width: 1000px; margin: 0 auto; background: url(../_img/container_bg.gif) top center repeat-y; min-height: 400px; height: auto !important; height: 400px; } #left-shadow { background: url(../_img/left_shadow.jpg) no-repeat; min-height: 400px; height: auto !important; height: 400px; } #right-shadow { background: url(../_img/right_shadow.jpg) top right no-repeat; min-height: 400px; height: auto !important; height: 400px; } #container-bottom { clear: both; width: 960px; height: 11px; background: url(../_img/container_bottom.jpg) no-repeat; overflow: hidden; margin: 0 auto; } /* Header & Logo -------------------------------------------------------------------------------------------------------------------------------*/ #header { width: 950px; margin: 15px auto 0 auto; height: 69px; } #logo { width: 362px; height: 60px; float: left; display: inline; background: url(../_img/brushart_logo.jpg) no-repeat } #logo h1 { margin: 0; padding: 0; } #logo h1 a { text-indent: -10000px; display: block; width: 362px; height: 60px; } #logo h1 a:hover { border: none; background: none; } /* Top-Nav -------------------------------------------------------------------------------------------------------------------------------*/ #top-nav { width: 533px; margin: 5px 0 0 54px; float: left; display: inline; background: url(../_img/top-nav.gif) top right no-repeat; } #top-nav ul { margin: 0; padding: 0 0 0 39px; } #top-nav li { margin: 0; padding: 0; float: left; list-style: none; } #top-nav a { text-indent: -10000px; display: block; float: left; height: 50px; background: url(../_img/top-nav.gif) no-repeat; } #agency-facts a { width: 112px; background-position: -39px 0px; } #agency-facts a:hover { background-position: -39px -50px; } #portfolio a {width: 85px; background-position: -151px 0px; } #portfolio a:hover { background-position: -151px -50px; } #services a { width: 83px; background-position: -236px 0px; } #services a:hover { background-position: -236px -50px; } #clients a { width: 75px; background-position: -319px 0px; } #clients a:hover { background-position: -319px -50px; } #contact a { width: 80px; background-position: -394px 0px; } #contact a:hover { background-position: -394px -50px; } /* Content -------------------------------------------------------------------------------------------------------------------------------*/ #content { width: 948px; margin: 0 0 0 26px; background: url(../_img/content_bg.jpg) no-repeat; float: left; display: inline; } /* Title-Flash -------------------------------------------------------------------------------------------------------------------------------*/ #title-flash { width: 225px; float: left; display: inline; margin: 59px 0 0 5px; background: transparent; } #title-flash object { } #title-flash object h2 { font-size: 1.5em; font-weight: bold; margin: 75px 30px 0 30px; padding: 0; text-align: right; } /* Home Content -------------------------------------------------------------------------------------------------------------------------------*/ #home-left { width: 250px; float: left; display: inline; margin: 59px 0 30px 0; background: #300 url(../_img/home_left_bg.jpg) no-repeat; } #home-left h3 { font-size: 1.4em; font-weight: bold; margin: 20px 23px 60px 23px; padding: 0; } #home-left p { color: #999; line-height: 1.7; font-size: 0.875em; margin: 0 23px 20px 23px; } #home-left h4 { font-size: 1.1em; font-weight: bold; margin: 20px 23px 5px 23px; padding: 0; } #home-left p br { } #home-left p a { } #home-left p a:hover { } #home-left .reflection { width: 250px; height: 88px; background: url(../_img/home_left_reflection.jpg) no-repeat; } #home-right { float: left; display: inline; display: block; width: 412px; height: 397px; background: url(../_img/home_building.jpg) 0 0 no-repeat; margin: -13px 0 0 51px; padding: 0; } /* Left-Nav -------------------------------------------------------------------------------------------------------------------------------*/ #left-nav { width: 150px; float: left; display: inline; margin: 58px 20px 0 0; background: #300 url(../_img/left_nav_bg.jpg) no-repeat; } #left-nav h3 { color: #900; font-size: 0.725em; text-transform: uppercase; font-weight: bold; margin: 10px 10px 5px 10px; } #left-nav ul.menu { margin: 0; padding: 0 0 15px 0; font-size: 0.75em; text-transform: uppercase; } #left-nav ul.menu li { list-style: none; margin: 0 10px; padding: 0; } #left-nav ul.menu li a { display: block; width: 120px; padding: 4px 4px; color: #fff; text-decoration: none; } #left-nav ul.menu li a:hover { color: #ccc; background: #600; } #left-nav .reflection { clear: both; width: 150px; height: 153px; background: url(../_img/left_nav_reflection.jpg) no-repeat; } #left-nav.agency { background: #300 url(../_img/left_nav_agency.jpg) no-repeat; height: 300px; } #left-nav.agency .reflection { display: none; } /* Right-Column -------------------------------------------------------------------------------------------------------------------------------*/ #right-column { width: 510px; float: left; display: inline; margin: 58px 0 30px 0; background: #300 url(../_img/right_column_bg.jpg) no-repeat; } #right-column .reflection { clear: both; width: 510px; height: 87px; background: url(../_img/right_column_reflection.jpg) no-repeat; } #right-column span.view-all { font-size: .7em; float: right; display: inline; margin: 20px 25px 0 0; background:#470002; padding:7px 10px; border:1px solid #5C0001; } #right-column span.view-all { color:#900; } #right-column span.view-all a { color:#ccc; text-decoration:none; } #right-column span.view-all a:hover { color:#fff; } /* Two-Columns -------------------------------------------------------------------------------------------------------------------------------*/ .content-left { width: 190px; float: left; display: inline; margin: 50px 45px 10px 23px; } .content-right { width: 220px; float: left; display: inline; margin: 50px 0 10px 0; } .content-right img { border: 4px solid #280000; margin:0 0 10px 0; } .player { width:250px; background:#330000; margin:60px 0 10px 20px; } .video { width:440px; border: 4px solid #280000; background:#330000; margin:0 0 10px 20px; } .clients { margin:-20px 0 0 0 ; padding:0; } .project-thumb { width:190px; background:#280000; margin:0 0 20px 0; float:left; padding:5px; clear:both; } .project-thumb a img { float:left; margin:0 5px 5px 0; border:none; clear:both; border:1px solid #280000;} .project-thumb a:hover img{ border:1px solid #fff; } .project-thumb p { color: #777; line-height: normal; font-size: 0.8em; margin:0; } .project-thumb a h4 { color: #900; text-decoration:none; } .project-thumb a:hover h4 { color: #fff; text-decoration:none; } .forms { width:220px; margin:0 0 30px 0; } .forms label { color: #999; line-height: normal; font-size: 0.8em; margin:0; } .forms input.text { width:200px; font-size: 0.8em; margin:0 0 10px 0 } .forms textarea { width:200px; height:100px; } /* Portfolio -------------------------------------------------------------------------------------------------------------------------------*/ #right-column img.portfolio { border: 10px solid #280000; margin: 0 23px; } #right-column .project-details { clear: both; margin: 20px 23px; } #right-column .project-details .project-left { width: 150px; float: left; display: inline; margin: 0 20px 0 0; } #right-column .project-details .project-left h4 { } #right-column .project-details .project-left p { color: #999; line-height: normal; font-size: 0.8em; margin: 0 0 17px 0; } #right-column .project-details .project-right { width: 280px; float: left; display: inline; margin: 0 0 30px 0; padding: 0; } #right-column .project-details .project-right h4 { } #right-column .project-details .project-right p { line-height: 1.6; font-size: 0.8em; } #right-column .project-details .project-right li { color:#999; line-height: 1.6; font-size: 0.8em; } /* Typography -------------------------------------------------------------------------------------------------------------------------------*/ p { color: #999; line-height: normal; font-size: 0.8em; margin: 0 0 20px 0; } ul { } li { } h3 { font-size: 1.42em; font-weight: bold; margin: 20px 280px 25px 23px; padding: 0; } h4 { color: #ccc; line-height:1.2em; font-size: .9em; font-weight: normal; margin: 0 0 5px 0; padding: 0; } /* sIFR -------------------------------------------------------------------------------------------------------------------------------*/ /* These are standard sIFR styles... do not modify */ .sIFR-flash { visibility: visible !important; margin: 0; } .sIFR-replaced { visibility: visible !important; } span.sIFR-alternate { position: absolute; left: 0; top: 0; width: 0; height: 0; display: block; overflow: hidden; } /* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */ .sIFR-flash + div[adblocktab=true] { display: none !important; } /* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */ /*.sIFR-hasFlash #left-nav h3 { visibility: hidden; letter-spacing: -9px; font-size: 12px; } .sIFR-hasFlash #right-column h3 { visibility: hidden; letter-spacing: -9px; font-size: 21px; }*/ /* Footer -------------------------------------------------------------------------------------------------------------------------------*/ #footer { width: 960px; margin: 10px auto; clear: both; } #footer p { font-size: 0.7em; color: #666; margin: 0; padding: 0; text-align: center; } #footer a { color:#ccc; } #footer a:hover { color:#fff; }