/* =============== 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; } A { color: #06578d; text-decoration: none; } A:HOVER { text-decoration: underline; } /* HTML Redefenition ================================== */ html { background: #072230 url(../images/robot_bg.png); } 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-optimized.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; font-family: 'Yanone Kaffeesatz', sans-serif; color: #243e7d; font-weight: 700; font-size: 32px; letter-spacing: 1px; } #OuterWrapper { background: url(../images/bg-bottom-large-optimized.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: 115px; /* 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: 4px; left: 220px; } #Header #TopLogoFusion { position:absolute; top: 30px; left: 400px; } #Header #TopLogoSkibowl { position:absolute; top: 21px; left: 810px; } #Header #TopLogoTimberline { position:absolute; top: 21px; left: 616px; } /* HEADER NAVIGATION ================================== */ #Header ul { margin: 0; padding: 0; float: left; width: 100%; list-style: none; text-transform: uppercase; background: url(../images/bg_topnav.png) top right; border-top: 2px solid #19568c; border-bottom: 2px solid #19568c; 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 #000004; font-size: 90%; font-weight: bold; color: #333; height: 49px; padding-top: 4px; } #Footer ul { margin: 0; padding: 10px; float: right; width: 760px; 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; } #SocialNetworkLinks { position: relative; top: -2px; } #Footer #SocialNetworkLinks div { display:inline-block; width: 80px; } #like { position: relative; top: -3px; } /* 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: 350%; text-align:left; margin-left: 30px; color: #FF6600; line-height: 1.3; margin-bottom: 10px; } #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: 170px; float: left; font-size: 90%; } #DealersPg #Dealers LI H3 { font-weight:bold; color: #555; font-size: 160%; } #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; margin-left: -5px; padding: 5px; } #DealersPg #Dealers A.dealerLink:HOVER { background-color: #ff9000; color: #ffffff; text-decoration: none; } #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: #ccc; } #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; font-family: 'Yanone Kaffeesatz', sans-serif; color: #243e7d; font-weight: strong; font-size: 180%; 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; }