/* =============== README =================== LAYOUT - Two Wrapper divs used to create the top & bottom page bg images. - Optimized for a screensize of 995px; - Page classes are scoped to specific id's. The three body id's we are using at the time of this writing is: 1. 2. 3. FONT - Font sizes are done in percentages. Note, percentages settings cascade. COLORS - #06578d = dark blue - #6eaad0 = med blue - #cae0f5 = light blue - #ff9000 = orange KEYWORDS - Subaru Mount Hood - Fusions Pass - Mount Hood / Mt. Hood / Mt Hood - Skibowl ======================+++++++++++++============ */ /* Reset Browser Styles ================================== */ * { vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; behavior: url(../scripts/iepngfix.htc) } OL{ margin-left: 70px; } OL LI { margin-top: 30px; } html{ Xbackground-color: #06578d; background-color: #7fbbdd; } A{ color: #06578d; text-decoration: none; } A:HOVER{ text-decoration: underline; } /* HTML Redefenition ================================== */ html { background: #356aa0 url(../images/bg-top-tile.png) top left repeat-x; } body { font: 100%/1.6 Arial, Helvetica, sans-serif; background-color: #ccc; /*Note: Using percentage based font size in all other font size settings. */ font-size: small; background: url(../images/bg-top-large.png) top center no-repeat; padding-top: 51px; } /* IE5 Win - Percentage based font size adjustment */ body { font-size: x-small; voice-family: "\"}\""; voice-family: inherit; font-size: small; } /* Be nice to Opera - Percentage based font size adjustment */ html>body { font-size: small; } H2{ font: 100%/1.6 "Trebuchet MS",Helvetica,Jamrul,sans-serif; color: #243e7d; font-weight: strong; font-size: 170%; } #OuterWrapper { background: url(../images/bg-bottom-large.png) bottom center no-repeat; text-align: center; padding-bottom: 13px; padding-left: 50px; } #Wrapper { width: 995px; margin: 0 auto; text-align: left; background-color: #fff; padding: 0px; font-size: 110%; } /* Header ================================== */ #Header{ padding-top: 105px; /* pad necesary for images */ height: 23px; position: relative; border-top: 3px solid #999; } #Header #SubaruHeadline{ position:absolute; font-size: 1px; /* make font disapear, but remain for SEO */ font-weight: 700; color: #06578d; text-align:center; height: 67px; width: 659px; top: 10px; left: 325px; background: url(../images/top_headertext.jpg) bottom repeat-x; color: #fff; } #Header #SubaruHeadlineText{ } /* HEADER LOGOS ================================== */ #Header #TopLogoSubaru{ position:absolute; top: 10px; left: 20px; margin: -50px 0 0 -70px; } #Header #TopLogoSubaruSmall{ position:absolute; top: 15px; left: 220px; } #Header #TopLogoFusion{ position:absolute; top: 25px; left: 400px; } #Header #TopLogoSkibowl{ position:absolute; top: 13px; left: 600px; } #Header #TopLogoTimberline{ position:absolute; top: 20px; left: 810px; } /* HEADER NAVIGATION ================================== */ #Header ul{ margin: 0; padding: 0; float: left; width: 100%; list-style: none; text-transform: uppercase; background: url(../images/bg_topnav.gif) top right; border-top: 2px solid #cae7f2; border-bottom: 2px solid cbe7f2; padding: 5px 0 5px 0; } #Header ul li{ float: right; } /* Hack to make IE/Mac play nice with sliding doors */ #Header li a { xline-height: 1.5em; text-decoration: none; float: left; display: block; /* Hide text so only screen readers see it. */ color: #6eaad0; font-size: 0%; color: transparent; /* for firefox mac */ cursor: pointer; } #Header ul a:hover { color: #6eaad0; color: transparent; } /* Each of the top nav links has its own on/off image */ #Header ul li a#NavLinkDetails{ width: 170px; height: 30px; background: url(../images/navlink_details.png) no-repeat center center; } #Header ul li a#NavLinkDetails:hover { background: url(../images/navlink_details_on.png) no-repeat center center; } #Header ul li a#NavLinkDealers{ width: 195px; height: 30px; background: url(../images/navlink_dealers.png) no-repeat center center; } #Header ul li a#NavLinkDealers:hover{ background: url(../images/navlink_dealers_on.png) no-repeat center center; } #Header ul li a#NavLinkPass{ width: 260px; height: 30px; background: url(../images/navlink_pass.png) no-repeat center center; } #Header ul li a#NavLinkPass:hover{ background: url(../images/navlink_pass_on.png) no-repeat center center; } #Header ul li a#NavLinkSubaru{ width: 180px; height: 30px; margin-right: 10px; background: url(../images/navlink_subaru.png) no-repeat center center; } #Header ul li a#NavLinkSubaru:hover{ background: url(../images/navlink_subaru_on.png) no-repeat center center; } /* CONTENT ================================== */ #Content{ padding-top: 35px; } BODY#HomePg #Content{ padding-top: 0; } #Content H2{ margin: 20px 0 5px 20px; font-weight:900; } #Content p { margin: 10px 20px 10px 20px; } /* FOOTER ================================== */ #Footer { width: 100%; } #Footer #Copyright{ float: left; color: #333; padding: 10px; } /* FOOTER NAV ================================== */ #Footer{ border-top: 10px solid #cae0f5; font-size: 90%; font-weight: bold; color: #333; height: 49px; padding-top: 4px; } #Footer ul{ margin: 0; padding: 10px; float: right; width: 700px; list-style: none; } #Footer ul li{ float: right; border-left: 1px solid #333; } #Footer ul li#SocialNetworkLinks{ border: 0px; padding-top: 2px; padding-right: 30px; } /* ...hack to make IE/Mac play nice */ #Footer li a { padding-left: 1em; padding-right: 1em; text-decoration: none; float: left; display: block; color: #333; } #Footer ul a:hover { color: #555; } /* HOMEPAGE SPECIFIC ================================== */ #HomePg #FlashWrap{ background: url(../images/temp_flashplaceholder.jpg) no-repeat top center; width: 995px; height: 450px; margin-top: 10px; } #HomePg #HomePgTitle{ margin-top: 35px; font-size: 200%; text-align:left; margin-left: 30px; color: #FF6600; } #HomePg #Details{ padding: 10px 40px 10px 40px; margin: 0px; xwidth: 640px; float:left; xborder: 1px solid red; } #HomePg #TestDrive{ background: url(../images/bg_fusionpass.jpg) no-repeat top right #cae0f5; height: 150px; width: 300px; float: right; padding-bottom: 10px; margin: 0 10px 10px 0; } #HomePg #TestDrive h2{ font-size: 140%; margin: 9px; } #HomePg #TestDrive p{ width: 100px; padding-left: 10px; margin: 0px; font-size: 120%; color: #777; } #HomePg #TestDrive p sup{ display: block; font-size: 60%; padding: 7px 0px 0px 2px; } /* DEALERS PG SPECIFIC ================================== */ #DealersPg P{ margin-left: 20px; } #DealersPg #Dealers{ margin-left: 20px; list-style: none; } #DealersPg #Dealers LI{ border-top: 1px dashed #999; margin: 10px; padding: 10px 0px 10px 30px; width: 35%; margin-right: 10%; height: 150px; float: left; font-size: 90%; } #DealersPg #Dealers LI H3{ font-weight:bold; color: #555; font-size: 120%; } #DealersPg #Dealers LI span{ display: block; } #DealersPg #Dealers LI IMG{ display: block; } #DealersPg #Dealers A{ text-decoration: none; } #DealersPg #Dealers A:HOVER{ text-decoration: underline; } #DealersPg #Dealers A.dealerLink{ display: block; color: #06578d; } #DealersPg #Dealers A.directions{ display: block; } /* DETAILS PG SPECIFIC ================================== */ #DetailsPg H4{ font-weight: bold; margin-bottom: 7px; } #DetailsPg Div#LeftCol{ width: 497px; xborder: 1px solid red; float: left; } #DetailsPg ul.detailsFaq { list-style: none; margin: 20px 0; padding: 0; xborder: 1px solid green; } #DetailsPg ul.detailsFaq LI { padding: 10px; margin: 10px; background-color: #cae0f5; } #DetailsPg #RightCol{ width: 463px; Xheight: 400px; xpadding: 10px; Xbackground-color: #cae0f5; xborder: 1px solid blue; float: right; margin: 0 10px 10px 0; } #DetailsPg H2 { color: #f39c04; text-align: center; font-size: 180%; } #DetailsPg H3 { font: 100%/1.6 "Trebuchet MS",Helvetica,Jamrul,sans-serif; color: #243e7d; font-weight: strong; font-size: 150%; margin-left: 20px; } /* HACKS FITLERS & FIXES ================================== */ /* NOT YET USED .clearfix:after { content: "."; height: 0; visibility: hidden; display: block; clear: both; } */ /* Used to removed borders from first or last element of partitioned lists */ .noborder{ border: 0px !important; }