/* * Project: Twisted Oak * Date: 2009/05/19 /* ---------------------------------------- */ html { min-height: 100%; margin: 0 0 1px; font-size: 100.01%; } body { background: #6f1200 url(../images/bg.jpg) repeat-x; font-size: 75%; margin: 0; padding: 0; } @media only screen and (max-device-width: 480px) { html { -webkit-text-size-adjust: none; } } body { color: #333; font-family: Tahoma,Arial,Helvetica Neue,Helvetica,sans-serif; line-height: 1.5; } p { color: #333; font-family: Tahoma,Arial,Helvetica Neue,Helvetica,sans-serif; line-height: 1.5; padding: 0; margin: 0; } li, dt, dd, p, th, td, caption, pre { } ul, ol, dl, p, table, pre, h1, h2, h3, h4, h5, h6 { margin-bottom: 15px; } a { color: #900; text-decoration: none; } a:hover, a:focus, a:active { color: #900; text-decoration: underline; } ul, ol, dd, blockquote { padding-left: 40px; } ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; } li *, li p, li li, dt *, dd *, p *, th *, td * { font-size: 1em; } legend { font-size: 1.2em; color: #000; } img { border: none; -ms-interpolation-mode: bicubic; } a img { border: 0; } pre { font-family: "Courier New",monospace; white-space: pre-wrap; } table { border-collapse: collapse; border-spacing: 0; } hr { overflow: hidden; height: 1px; margin: 15px 0 !important; margin: -5px 0 8px; padding: 0; border: none; background-color: #ccc; color: #ccc; } *:first-child+html hr { margin: -7px 0 8px !important; } .offset { position: absolute !important; left: -10001px !important; overflow: hidden !important; } /* LAYOUT ------------------------------------------- */ #root { width: 950px; margin: 0 auto; position: relative; } #top { position: relative; height: 160px; z-index: 500; } #logo { position: absolute; top: 15px; left: 5px; background: url(../images/logo.png) no-repeat scroll top left; width: 441px; height: 142px; } #logo a { display: block; width: 441px; height: 142px; text-indent: -999em; overflow: hidden; } #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: 10001px; 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; clear: both; background: url(../images/frame.png) no-repeat; width: 917px; padding: 20px 15px 0 18px; } #wrapper-a { width: 910px; padding: 0 5px 6px 2px; background: url(../images/content-shadow.png) 0 100% no-repeat; } #wrapper-b { width: 870px; padding: 20px; background: #fff url(../images/content.jpg) no-repeat; overflow: hidden; } #primary { width: 515px; min-height: 850px; } #aside { position: absolute; z-index: 200; right: -55px; top: 195px; width: 422px; height: 807px; background: url(../images/aside.jpg) no-repeat; } #aside-product { position: absolute; z-index: 200; right: 35px; top: 316px; width: 186px; height: 175px; overflow: hidden; } #aside-productpod { width: 186px; height: 158px; overflow: hidden; } #footer { clear: both; background: url(../images/frame.png) 0 -4750px no-repeat; padding: 35px 20px; overflow: hidden; height: 1%; } /* GENERAL ------------------------------------------- */ /* Images */ img.featureRight { border: 1px solid #000; float: right; padding: 3px; margin: 0 0 1em 1em; } img.right { float: right; padding: 0; margin: 0 0 1em 1em; } img.featureLeft { border: 1px solid #000; float: left; padding: 3px; margin: 0 1em 1em 0; } img.left { float: left; padding: 0; margin: 0 1em 1em 0; } img.border { border: 1px solid #000; padding: 3px; } .hr { width: 507px; height: 3px; background: url(../images/hr.png) no-repeat; margin: 20px 0; clear: both; } .hr hr { position: absolute; left: -999em; } .section-a { text-align: center; } /* headers */ h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #600; margin: 0; padding: 0; font-family: Tahoma,Arial,Helvetica,sans-serif; } h1 { font-size: 3em; } h2 { font-size: 2.4em; } h3 { font-size: 1.6em; } h4 { font-size: 1.4em; } h5 { font-size: 1.2em; } h6 { font-size: 1.0em; } /* ELEMENTS ------------------------------------------- */ #user-options { position: absolute; top: 105px; right: 45px; width: 256px; height: 31px; z-index: 500; } #myAccount { position: absolute; top: 0px; left: 0px; width: 136px; height: 31px; } #shoppingSack { position: absolute; top: 0px; left: 136px; width: 120px; height: 31px; z-index: 500; } /*#top .user-options span { position: absolute; left: -999em; } #top .user-options a { display: block; position: absolute; top: 8px; left: 20px; width: 65px; height: 20px; text-indent: -999em; overflow: hidden; } #top .user-options a.cart { width: 100px; left: 110px; }*/ #nav { position: relative; z-index: 300; height: 39px; margin: 0; padding: 0; } #nav ul { margin: 0; padding: 0 15px; } #nav li { position: relative; float: left; height: 39px; list-style: none; margin: none; background: url(../images/nav.png) no-repeat; } * html #nav li { background-image: url(../images/nav-ie.png); } #nav li a { display: block; height: 39px; text-indent: -999em; overflow: hidden; } #nav li em { position: absolute; left: -999em; } #nav li.Get-Twisted-WinesTop { width: 160px; background-position: 0 0; } #nav li.Get-Twisted-WinesTop:hover { background-position: 0 -39px; } #nav li.The-Twisted-Few { width: 160px; background-position: -161px 0; } #nav li.The-Twisted-Few:hover { background-position: -161px -39px; } #nav li.Goings-OnTop { width: 111px; background-position: -322px 0; } #nav li.Goings-OnTop:hover { background-position: -322px -39px; } #nav li.Twists { width: 90px; background-position: -432px 0; } #nav li.Twists:hover { background-position: -432px -39px; } #nav li.Find-UsTop { width: 91px; background-position: -523px 0; } #nav li.Find-UsTop:hover { background-position: -523px -39px; } #nav li.Media-And-TradeTop { width: 131px; background-position: -616px 0; } #nav li.Media-And-TradeTop:hover { background-position: -616px -39px; } #nav li.Contact-Us { width: 82px; background-position: -755px 0; } #nav li.Contact-Us:hover { background-position: -755px -39px; } #nav li ul { position: absolute; left: -999em; top: 39px; background: url(../images/dropdown.png); padding: 0; margin: 0; width: 190px; } #nav li:hover ul { left: 0; } #nav li ul li { float: none; width: 100%; border-top: 1px solid #530600; background: none; font-size: 1em; } #nav li ul li.first { border: none; } #nav ul li ul {background-image:none; background-color:#6f1200; filter: alpha(opacity=90); -moz-opacity: 0.90; opacity: 0.90;} #nav ul li ul li a { display: block; width: 166px; padding: 8px 12px; color: #fff; text-decoration: none; height: auto; text-indent: 0; } #nav ul li ul li a:hover { text-decoration: underline; } /* Member Nav */ #memberNav { list-style: none; padding: 0; margin: 0 0 2em 0; overflow: hidden; } #memberNav li { display: inline; padding: 0 8px; border-right: 1px solid #333; } #aside .postit { height: 180px; padding: 55px 0 0 145px; margin:0; } #aside .newsletter { height: 100px; padding: 70px 0 0 65px; } #aside .newsletter h2, #aside .newsletter p { position: absolute; left: -999em; } #aside .newsletter form p { position: relative; left: 0; overflow: hidden; margin: 0; width: 100%; } #aside .newsletter form label { position: absolute; left: -999em; } html.js #aside .newsletter form label { left: 7px; top: 3px; } #aside .newsletter form input { width: 160px; height: 14px; margin: 0 5px 0 0; padding: 3px 5px 5px; float: left; border: 1px solid #666; } #aside .newsletter form button { float: left; width: 44px; height: 24px; background: url(../images/submit.png) no-repeat; text-align: center; font: normal 0.92em/24px Tahoma,Arial,Helvetica,sans-serif; color: #fff; text-transform: uppercase; border: none; } #aside-product p { } #aside .ads { padding: 0 0 0 50px; position: relative; } #aside .ads ul { margin: 0; padding: 0; } #aside .ads li { list-style: none; padding: 0; margin: 0 0 20px; } #aside .ads .clip { position: absolute; top: -15px; right: 105px; z-index: 110; width: 80px; height: 55px; background: url(../images/clip.png) no-repeat; } #footer .col-1 { color: #fff; float: left; width: 615px; } #footer p { font-size: 1.1em; margin: 0 0 3px; } #footer p.copyright { color: #c99; } #footer .col-1 ul { list-style: none; padding: 0; margin: 0; overflow: hidden; } #footer .col-1 ul li { float: left; margin: 0 15px 0 0; } #footer .col-1 ul li a { color: #fff; } #footer p.designby { color: #966; float: right; width: 250px; text-align: right; } #footer p.designby a { color: #966; } #printBody { background-image: none; background-color: #FFF; margin: 0; padding: 0; } #printWrapper { width: 700px; margin: 0 auto; } #printHeader { width: 700px; height: 150px; } #printContent { width: 700px; } /* 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 #primary h2 { visibility: hidden; font-size: 20px; margin-bottom: -1px; } .sIFR-hasFlash #primary h1 { visibility: hidden; font-size: 30px; margin-bottom: -1px; } /* -------------------------------------------------------------- Vin 65 css overrides -------------------------------------------------------------- */ /* Navigation */ .v65-home { display: none; } /* Modal Cart */ .v65-modalCartSelected { background-image: none; } #v65-modalCartBody { border: 1px solid #d99e0a; } #v65-modalCartFooter { background-color: #d99e0a; } #v65-modalContentHeader { background-image: url(../images/modal/header.jpg); } /*Product Drilldown */ #v65-productDescription { /*width: 400px;*/ } #v65-productImagesOther { display: none; } .v65-relatedProductPrice { display: none; } /*Check Out*/ #v65-checkoutCartSummaryWrapper { width: 430px; } #v65-checkoutCartSummaryMini { width: 245px; } #v65-fieldset-wholesalerInfo { width: 370px; } /*Use this to adjust width of fieldset */ #v65-fieldset-billingInfo { width: 370px; } /*Use this to adjust width of fieldset */ #v65-fieldset-shippingInfo { width: 370px; } /*Use this to adjust width of fieldset */ #v65-fieldset-shippingOptions { width: 370px; } /*Use this to adjust width of fieldset */ #v65-fieldset-sourceCode { width: 370px; } /*Use this to adjust width of fieldset */ #v65-fieldset-paymentMethod { } /*Use this to adjust width of fieldset */ #v65-fieldset-paymentMethod p { } /*Use this to adjust width of fieldset */ /* 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; }