/* * Project: Haber Family Vineyards * Date: 2009/05/20 /* ---------------------------------------- */ * { margin: 0; padding: 0; } html { min-height: 100%; margin: 0 0 1px; font-size: 100.01%; } body { background: #fff; font-size: 75%; } @media only screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } } body, textarea, input, select, option, button { color: #111; font-family: Tahoma,Arial,"Helvetica Neue",Helvetica,sans-serif; line-height: 1.5; } li, dt, dd, p, th, td, caption, pre, form { } ul, ol, dl, p, table, pre, h1, h2, h3, h4, h5, h6 { margin-bottom: 1.2em; } a { color: #369; text-decoration: none; } a:hover, a:focus, a:active { color: #369; text-decoration: underline; } ul, ol, dd, blockquote { padding-left: 2em; } ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; } li *, li p, li li, dt *, dd *, p *, th *, td * { } img { border: none; -ms-interpolation-mode: bicubic; } pre { font-family: "Courier New",monospace; white-space: pre-wrap; } table { border-collapse: collapse; border-spacing: 0; } button { overflow: visible; cursor: pointer; } button::-moz-focus-inner { padding: 0; border: none; } hr { overflow: hidden; height: 1px; margin: 15px 0 !important; margin: -5px 0 8px; padding: 0; border: none; background-color: #505162; color: #505162; } *:first-child+html hr { margin: -7px 0 8px !important; } .offset { position: absolute !important; left: -10001px !important; overflow: hidden !important; } /* LAYOUT ------------------------------------------- */ #root { width: 950px; display: inline; float: left; margin: 0 0 0 30px; position: relative; } #topHomepage { height: 215px; position: relative; min-width: 980px; } #top { height: 215px; position: relative; background: #000 url(../images/top.jpg) no-repeat; min-width: 980px; position: relative; } #topFeature { position: absolute; top: 0; left: 0; } #logo { position: absolute; left: 30px; width: 220px; height: 215px; background: #010217; } #logo a { position: absolute; top: 10px; left: 30px; display: block; width: 160px; height: 200px; background: url(../images/logo.jpg) no-repeat; text-indent: -999em; overflow: hidden; } #logoBottom { margin: 0 auto; width: 160px; } #skip-links { position: absolute; top: 0; left: -10001px; list-style: none; margin: 0; padding: 0; } #skip-links li a:focus, #skip-links li a:active { display: block; position: absolute; left: 10241px; top: 0; z-index: 10001; width: 200px; margin: 15px 0 0 15px; padding: 2px 0; background: #333; color: #fff; text-align: center; text-decoration: none; } #content { position: relative; z-index: 100; float: right; width: 680px; padding: 30px 0; } #aside { width: 180px; float: left; background-color: #010217; color: #fff; line-height: 1.25; padding: 20px; } #footer { clear: both; width: 680px; margin: 0 0 0 270px; padding: 20px 0; border-top: 1px solid #999; overflow: hidden; font-family: "Trebuchet MS",Tahoma,Arial,Helvetica,sans-serif; } /* GENERAL ------------------------------------------- */ /* headers */ h1, h2, h3, h4, h5, h6 { font-family: "Times New Roman", Times, serif; color: #253b5b;} h1 { font-size: 1.834em; line-height:1; } h2 { font-size: 1.5em; } h3 { font-size: 1.334em; } h4 { font-size: 1.167em; } h5 { font-size: 1.0em; } h6 { font-size: 0.834em; } /* ELEMENTS ------------------------------------------- */ #nav ul{ padding: 20px 0 0 10px; } #nav ul li { margin: 0 0 10px; padding: 0; list-style: none;} #nav ul li a { color: #fff; } #nav ul li em { position: absolute; left: -999em; } #aside h2 { font-size: 1.0em; margin: 1.2em 0 10px 10px; color: #fff; font-family: Tahoma,Arial,"Helvetica Neue",Helvetica,sans-serif; } #aside p { font-size: 0.917em; margin: 0 0 5px; } #aside a { color: #fff; } /* Forms */ #aside form { width: 180px; } #aside fieldset { padding: 0; margin: 0; border: 0; } #aside fieldset div { margin: 0; overflow: hidden; padding: 5px 0; } #aside .formErrorMessage{ font-style: italic; font-weight: normal; color: #C66; } #aside #fieldsetSubmit { text-align: left; } #aside legend { display: none; } #aside label { display: block; } #aside #fieldsetSubmit { text-align: right; } #user-options { position: absolute; top: -215px; left: 640px; width: 308px; /*width: 268px; background: url(../images/cart-bg.png);*/ line-height: 30px; height: 30px; padding: 0 /*20px*/; z-index: 200; } * html #user-options { background: black; } #user { float: left; width: 100px; font-size: 0.917em; color: #fff; margin: 0; } #user a { color: #fff; text-decoration: none; } #user a:hover { text-decoration: none; } #cart { position: absolute; top: 0; right: 0; margin: 0; width: auto; text-align: right; width: 200px; z-index: 201; } #cart a { color: #fff; } #cart a:hover { color: #fff; text-decoration: none; } #masthead { position: absolute; bottom: 20px; left: 300px; width: 400px; margin: 0; font: normal 3.33em Times, "Times New Roman", serif; color: #fff; line-height: 1; } #content .figure-a { position: relative; top: -80px; right: 0; margin: 0 0 -60px 20px; float: right; width: 318px; } #content .figure-a img { display: block; padding: 3px; background: #fff; border: 1px solid #999; } #content .figure-a span { display: block; padding: 5px; font-size: 0.92em; } #subNav ul { list-style: none; overflow: hidden; margin: 0 0 30px; padding: 0; } #subNav ul li { display: inline; float: left; padding: 0 15px; border-left: 1px solid #ccc; } #subNav ul li.first { display: inline; float: left; padding: 0 15px 0 0; border-left: none; } #content p.intro { font-weight: bold; } #footer .col-1 { float: left; width: 60%; } #footer ul { margin: 0 0 5px; padding: 0; } #footer ul li { display: inline; list-style: none; margin: 0 10px 0 0; } #footer ul li a { color: #666; } #footer .col-1 p { color: #999; } #footer .designby { float: right; width: 35%; text-align: right; color: #ccc; } #footer .designby a { color: #ccc; } /*V65-overrides*/ /* -------------------------------------------------------------- Modal Cart -------------------------------------------------------------- */ #v65-modalCart { position: absolute; top: 0; right: 0px; } #v65-modalCart a { color: #FFFFFF; } .v65-modalCartSelected { background-image: none; } #v65-modalCartBody { } #v65-modalCartBody a { color:#000; } #v65-modalCartDropdown { background-color: #FFF; color: #000; display: none; right: 0; position: absolute; top: 30px; text-align: left; width: 308px; } #v65-modalCartBody { background-color: #FFF; border: 1px solid #333; color: #000; font-size: 0.9em; padding: 10px; width: 286px; line-height: normal;} #v65-modalCartBody p{ color: #000; } #v65-modalCartBody a{ color: #000; } #v65-modalCartBody a:hover{ color: #000; } /* Modal Cart Table */ #v65-modalCartTable { margin: 0 0 10px 0; padding: 0; width: 286px; } #v65-modalCartTable th { background-color: #efefef; border-top: 1px solid #ccc; font-size: 0.9em; font-weight: bold; padding: 2px 1px; text-align: left; } #v65-modalCartTable td { border-top: 1px solid #ccc; font-size: 0.9em; padding: 2px 1px; vertical-align: top; } #v65-modalCartTableSubtotal td { background-color: #f9f7f3; font-size: 0.9em; font-weight: bold; vertical-align: top; } #v65-modalCartBody td a{ color: #000; } #v65-modalCartBody td a:hover{ color: #000; } #v65-modalCartFooter { background-color: #333; height: 5px; overflow: hidden; width: 308px; } /* Product Drilldown */ #v65-productWrapper { width: 680px; overflow: hidden; } #v65-productImage { float: left; text-align: center; width: 155px; padding: 0; margin: 0 20px 0 0; } #v65-productImagesOther img{ border: 1px solid #ccc; margin: 15px 4px 0 0; padding: 4px; } #v65-productDescription { float: left; width: 505px; padding: 0; margin: 0; text-align: left; } /* -------------------------------------------------------------- checkout -------------------------------------------------------------- */ /* General Checkout */ #v65-checkoutWrapper { position: relative; } /*So we can absolutely position the Order Summary */ #v65-checkoutStepWrapper { width: 100%; height: 56px; overflow: hidden; margin: 0; padding: 0 0 20px 0; } #v65-checkoutSecureSeal { float: left; width: 100px; height: 56px; overflow: hidden; } #v65-checkoutStatusBar { float: right; width: 755px; overflow: hidden; text-align: right; } #v65-checkoutFooter { width: 100%; padding: 20px 0; margin: 0; overflow: hidden; } #v65-checkoutSecure { width: 200px; float: left; font-size: 0.917em; } /* Billing & Shipping */ #v65-checkoutCartSummaryWrapper { position: absolute; top: 35px; right: 0; width: 260px; padding: 15px; margin: 1.5em 0 0 0; background-color: #f7f7f7; border: 1px solid #eeeeee; overflow: hidden; } #v65-checkoutCartSummaryMini { float: left; width: 125px; margin: 0; padding: 0 15px 0 0; font-size: 0.917em; } #v65-checkoutCartSummaryMini table { width: 100%; margin: 0 0 1em 0; padding: 0; } #v65-checkoutCartSummaryMini td{ font-size: 0.917em; padding: 3px; } .v65-rowOverline td { border-top: 1px solid #999; } .v65-rowUnderline td{ border-bottom: 1px solid #999; } #v65-checkCartSummaryMoreOptions { float: right; width: 120px; font-size: 0.917em; padding: 0;} /* Add Shipping and Add Gift Wrapping Forms */ #v65-couponFormWrapper { } #v65-couponFormWrapper form { width: 100%; padding: 0; margin: 0; } #v65-couponFormWrapper fieldset { border: 1px solid #999; } #v65-couponFormWrapper legend { font-size: 1em; color: #333; } /* Review Screen */ #v65-orderSummaryWrapper { overflow: hidden; width: 100%; padding: 0 0 1em 0; } #v65-billingSummary { float: left; width: 300px; padding: 0; margin: 0; overflow: hidden; } #v65-shippingSummary { float: left; width: 300px; padding: 0; margin: 0; overflow: hidden; } #v65-reviewCartSummaryWrapper { float: right; width: 165px; padding: 15px; margin: 0; background-color: #f7f7f7; border: 1px solid #eeeeee; overflow: hidden; } /* Main Form */ #v65-checkoutFormWrapper form { text-align: left; width: 100% } #v65-checkoutFormWrapper legend { font-size: 1.4em; letter-spacing: 1px; } #v65-checkoutFormWrapper fieldset{ width: 350px; border: 1px solid #ccc; } #v65-checkoutFormWrapper div{ margin: 0 0 4px 0; overflow: hidden; padding: 2px 5px 5px 5px; } #v65-checkoutFormWrapper .v65-additionalComments { float: right; width: 380px; } /* -------------------------------------------------------------- club -------------------------------------------------------------- */ #v65-clubHelp { width: 200px; float: right; margin: 0 0 1em 1em; padding: 0; } /* Main Form */ #v65-clubFormWrapper form { text-align: left; width: 100% } #v65-clubFormWrapper legend { font-size: 1.4em; letter-spacing: 1px; } #v65-clubFormWrapper fieldset{ width: 400px; border: 1px solid #ccc; } #v65-clubFormWrapper div{ margin: 0 0 4px 0; overflow: hidden; padding: 2px 5px 5px 5px; } #v65-clubFormWrapper .v65-additionalComments { float: right; width: 380px; } /* Sign Up Screen */ #v65-signUpClubSummaryWrapper { position: absolute; top: 30px; right: 0; width: 350px; padding: 20px; margin: 1.5em 0 0 0; background-color: #f7f7f7; border: 1px solid #eee; overflow: hidden; font-size: 0.95em; } /* Review Screen */ #v65-clubSummaryWrapper { overflow: hidden; width: 100%; padding: 0 0 1em 0; } #v65-clubBillingSummary { float: left; width: 250px; padding: 0; margin: 0; overflow: hidden; } #v65-clubShippingSummary { float: left; width: 250px; padding: 0; margin: 0; overflow: hidden; } #v65-reviewClubSummaryWrapper { float: right; width: 300px; padding: 20px; margin: 0; background-color: #f7f7f7; border: 1px solid #eee; overflow: hidden; font-size: 0.95em; } /* -------------------------------------------------------------- Buttons -------------------------------------------------------------- */ /* OPTIONAL BUTTON STYLES regular button: */ button.defaultBtn { background: transparent url(../images/buttons/btn_sprite.gif) no-repeat right -100px; } button.defaultBtn span { background: transparent url(../images/buttons/btn_sprite.gif) no-repeat left top; } /* OPTIONAL BUTTON STYLES alt button: */ button.altBtn { background: transparent url(../images/buttons/btn_alt_sprite.gif) no-repeat right -100px; } button.altBtn span { background: transparent url(../images/buttons/btn_alt_sprite.gif) no-repeat left top; } /* OPTIONAL BUTTON STYLES modal button: */ button.modalBtn { background: transparent url(../images/buttons/btn_modal_sprite.gif) no-repeat right -50px; } button.modalBtn span { background: transparent url(../images/buttons/btn_modal_sprite.gif) no-repeat left top; } /* OPTIONAL BUTTON STYLES modal alt button: */ button.altModalBtn { background: transparent url(../images/buttons/btn_modal_alt_sprite.gif) no-repeat right -50px; } button.altModalBtn span { background: transparent url(../images/buttons/btn_modal_alt_sprite.gif) no-repeat left top; } /* OPTIONAL BUTTON STYLES large button: */ button.largeBtn { background: transparent url(../images/buttons/btn_large_sprite.gif) no-repeat right -100px; } button.largeBtn span { background: transparent url(../images/buttons/btn_large_sprite.gif) no-repeat left top; } /* REQUIRED LINK BUTTON STYLES: */ /* Link Button Normal */ a.linkBtn { background: transparent url(../images/buttons/btn_sprite.gif) no-repeat right -100px; } a.linkBtn span { background: transparent url(../images/buttons/btn_sprite.gif) no-repeat left top; } /* Link ALT Button Normal */ a.linkAltBtn { background: transparent url(../images/buttons/btn_alt_sprite.gif) no-repeat right -100px; } a.linkAltBtn span { background: transparent url(../images/buttons/btn_alt_sprite.gif) no-repeat left top; } /* Modal Link Button Normal */ a.modalLinkBtn { background: transparent url(../images/buttons/btn_modal_sprite.gif) no-repeat right -50px; } a.modalLinkBtn span { background: transparent url(../images/buttons/btn_modal_sprite.gif) no-repeat left top; } /* Modal Link ALT Button Normal */ a.modalLinkAltBtn { background: transparent url(../images/buttons/btn_modal_alt_sprite.gif) no-repeat right -50px; } a.modalLinkAltBtn span { background: transparent url(../images/buttons/btn_modal_alt_sprite.gif) no-repeat left top; } /* Link Button Large */ a.largeLinkBtn { background: transparent url(../images/buttons/btn_large_sprite.gif) no-repeat right -100px; } a.largeLinkBtn span { background: transparent url(../images/buttons/btn_large_sprite.gif) no-repeat left top; }