/* ************************************************* Winestore Site Styles Author: andCulture, info@andCulture.com Updated: June 26, 2009 Notes: Winestore Magenta: #f0037f ************************************************* */ /*------------------------------------------- GENERAL SELECTORS -------------------------------------------*/ body { background: #FFF url(../images/bg_lines.png) repeat-x 50% 0; } h1 { margin-bottom: 13px; height: 50px; text-indent: -9999px; background: url(../images/titles/content_title_matrix.png) 0 -50px no-repeat; } /*------------------------------------------- CONTAINER DIVS -------------------------------------------*/ #wrap { margin: 0 auto; padding-top: 7px; width: 940px; position: relative; } /*------------------------------------------- HEADER -------------------------------------------*/ #logo { margin: 26px 0 26px 70%; position: relative; right: 0; } #logo a { position: absolute; top: 14px; left: 14px; } /* WELCOME BAR */ #welcome { margin-bottom: 15px; width: 50%; } #welcome p { margin: 0; padding: 0; font-size: 18px; color: #565750; line-height: 1.2; } #welcome ul { margin: 0; padding: 0; list-style: none; } #welcome ul li { margin: 0 15px 0 0; float: left; font-size: 11px;} #welcome ul li a { margin: 0; padding: 0; color: #80817a; } #welcome ul li a:hover { color: #565750; } /* MY ACCOUNT LINK */ #welcome ul li#my-account { display: none; } body.authed #welcome ul li#my-account { display: block; } /* SHOPPING CART LINK */ #welcome ul li#shopping-cart a { padding-left: 17px; height: 20px; display: block; color: #f0037f; font-weight: bold; background: url(../images/icons/cart.png) 0 -1px no-repeat; } #welcome ul li#shopping-cart a:hover { color: #ae0b60; background-position: 0 -21px; } /* SIGN IN/OUT LINKS */ #welcome a.sign-out, body.authed #welcome a.sign-in { display: none; } body.authed #welcome a.sign-out { display: block; } /*------------------------------------------- NAVIGATION -------------------------------------------*/ ul#nav { margin: 0 0 0 42px; padding: 0; width: 434px; position: absolute; top: 7px; left: 50%; list-style: none; } ul#nav li { margin: 0 0 0 17px; padding: 0; float: left; } ul#nav li#navShop { margin-left: 0; } ul#nav li a { margin: 0; padding: 0; height: 25px; display: block; background: url(../images/nav/nav_matrix.png) no-repeat; text-indent: -9999px; outline: 0; } ul#nav li#navShop a { width: 85px; } ul#nav li#navStory a { width: 78px; background-position: -102px 0; } ul#nav li#navLocation a { width: 97px; background-position: -196px 0; } ul#nav li#navBlog a { width: 42px; background-position: -310px 0; } ul#nav li#navContact a { width: 64px; background-position: -370px 0; } ul#nav li#navShop a:hover { background-position: 0 -25px; } ul#nav li#navStory a:hover { background-position: -102px -25px; } ul#nav li#navLocation a:hover { background-position: -196px -25px; } ul#nav li#navBlog a:hover { background-position: -310px -25px; } ul#nav li#navContact a:hover { background-position: -370px -25px; } body.wines ul#nav li#navShop a, body.wine-details ul#nav li#navShop a { background-position: 0 -50px; } body.story ul#nav li#navStory a { background-position: -102px -50px; } body.location ul#nav li#navLocation a { background-position: -196px -50px; } body.blog ul#nav li#navBlog a { background-position: -310px -50px; } body.contact ul#nav li#navContact a { background-position: -370px -50px; } /*------------------------------------------- FOOTER -------------------------------------------*/ #footer { margin-left: -225px; width: 675px; clear: both; position: relative; left: 50%; } /*------------------------------------------- CONTENT -------------------------------------------*/ #content { margin: 0; width: 695px; min-height: 400px; float: right; position: relative; } #content h2.lead { margin: 0 0 15px 0; font-size: 24px; line-height: 24px } #content h2.winestore { margin: 0 0 4px 0; height: 30px; background: url(../images/titles/content_subtitle_matrix.png) 0 -90px no-repeat; text-indent: -9999px; } /* WINE DETAILS */ ul.details { margin: 0; padding: 0; list-style: none; } ul.details li { margin: 0; float: left; font: 11px Arial, Helvetica, sans-serif; color: #656662; text-transform: uppercase; } ul.details li.organic { padding-left: 30px !important; background: url(../images/icons/leaf.png) 9px 50% no-repeat; } ul.details li.price { color: #4f504b; font-family: Arial, Helvetica, sans-serif; letter-spacing: -1px; } ul.details li.price sup { position: relative; vertical-align: top; letter-spacing: normal; } ul.details li.price sup span { color: #bcbdb6; font-size: 10px; font-weight: bold; position: relative; top: 2px; vertical-align: top; } /* LOCATION INFO CONTROL */ div.location { margin-right: 10px; width: 165px; float: left; } div.location address { margin-bottom: 10px; font-size: 13px; font-style: normal; line-height: 16px; } div.location address span { display: block; } div.location address span.organization-name { display: none; } div.location address span.locality, div.location address abbr.region, div.location address span.postal-code { margin-bottom: 6px; margin-right: .3em; float: left; } div.location address span.tel { clear: left; } div.location a.directions { margin-bottom: 10px; width: 128px; height: 22px; display: block; background: url(../images/buttons/button_matrix.png) -590px -40px; text-indent: -9999px; } div.location p { font-size: 12px; line-height: 14px; } /*------------------------------------------- SIDEBAR -------------------------------------------*/ #sidebar { width: 220px; float: left; } #sidebar h2 { margin: 0 0 5px 0; height: 10px; background: url(../images/titles/sidebar_title_matrix.png) no-repeat; text-indent: -9999px; } /* SIDEBAR MENU */ ul#menu { margin: 0 0 10px 0; padding: 0; } ul#menu li { margin: 0 0 5px 0; padding: 0; text-indent: -9999px; font-size: 10px; font-family: Arial, Helvetica, sans-serif; list-style: none; } ul#menu li h2 { border-bottom: 1px solid #EEE; } ul#menu > li > span { height: 35px; display: block; background: #f0037f url(../images/nav/menu_matrix.png) 0 0 no-repeat; cursor: pointer; } ul#menu li form { overflow: hidden; } ul#menu li div { padding: 15px 7px; position: relative; text-indent: 0; } /* SEARCH FOR A WINE */ ul#menu li#search-wine form { display: block; } /* BROWSE WINE (FILTER) */ ul#menu li#filter-wine span { background-position: 0 -40px; } ul#menu li#filter-wine div dl { margin: 15px 0 10px 0; } ul#menu li#filter-wine div dl:first-child { margin: 0; } ul#menu li#filter-wine div dt { height: 8px; clear: left; background: url(../images/titles/sidebar_title_matrix.png) 0 0 no-repeat; text-indent: -9999px; } ul#menu li#filter-wine div dl.color dt { background-position: 0 -30px; } ul#menu li#filter-wine div dl.body dt { background-position: 0 -40px; } ul#menu li#filter-wine div dl.flavor dt { background-position: 0 -50px; } ul#menu li#filter-wine div dl.pairings dt { background-position: 0 -60px; } ul#menu li#filter-wine div dl.occasion dt { background-position: 0 -70px; } ul#menu li#filter-wine div dl.price dt { background-position: 0 -80px; } ul#menu li#filter-wine div dd { margin-top: 3px; border-top: 1px solid #EEEEEE; font-size: 11px; line-height: 12px; } ul#menu li#filter-wine div dd.all { margin: 0; padding-top: 0; border-top: none; display: none; } ul#menu li#filter-wine div dd.all a:after { content: " \00BB"; } ul#menu li#filter-wine div dd label { padding: 4px 4px 4px 18px; width: 81px; display: block; float: left; } ul#menu li#filter-wine div dd input { margin: 0 4px 0 -18px; vertical-align: bottom; } ul#menu li#filter-wine div dl.color label, ul#menu li#filter-wine div dl.body label { width: 46px; } ul#menu li#filter-wine div a.all { display: none; font-size: 12px; } ul#menu li#filter-wine div a.all:after { content: " \00BB"; } ul#menu li#filter-wine button { display: block; position: relative; left: 157px; } /* SEARCH WISHLISTS */ ul#menu li#search-wishlists span { background-position: 0 -80px; } /* SHARED */ ul#menu li#search-wine div input, ul#menu li#search-wishlists div input { margin: 0 2px 0 0; padding: 6px 4px 5px 4px; font-size: 11px; width: 143px; color: #a7a8a1; vertical-align: top; } /* NEWSLETTER BOX */ #sidebar #newsletter { margin: 20px 0; padding: 0 7px; } #sidebar #newsletter h2 { margin-bottom: 4px; height: 16px; background-position: 0 -100px; } #sidebar #newsletter label { margin-bottom: 5px; height: 11px; display: block; background: url(../images/titles/sidebar_title_matrix.png) 0 -120px no-repeat; text-indent: -9999px; } #sidebar #newsletter input { margin-bottom: 5px; width: 185px; } #sidebar #newsletter button { margin-right: 11px; width: 64px; height: 27px; float: right; background-position: -510px 0; } /* LOCATION BOX */ #sidebar div.location { margin-bottom: 20px; padding: 0 7px; } /*------------------------------------------- OUR STORY PAGE -------------------------------------------*/ body.story h1 { background-position: 0 -100px; } body.story #primary { width: 424px; float: left; } body.story #primary img { margin-bottom: 15px; } body.story #secondary { padding: 21px 15px 0 15px; border: 1px solid #CCC; width: 224px; float: right; -moz-border-radius: 4px; -webkit-border-radius: 4px; } body.story #secondary h2 { margin: 0; height: 50px; background: url(../images/titles/content_subtitle_matrix.png) 0 -120px no-repeat; text-indent: -9999px; } body.story #secondary p { font-size: 12px; line-height: 18px; } /*------------------------------------------- OUR LOCATION PAGE -------------------------------------------*/ body.location h1 { background-position: 0 -150px; } body.location #primary { margin-top: 20px; width: 390px; float: left; } body.location #secondary { margin-top: 20px; width: 290px; float: right; } /* STORE PHOTOS */ #store-photos { background: #5a5a4f; } #store-photos p { margin: 0; padding: 5px 10px; color: #FFF; text-transform: uppercase; } /* STORE HOURS */ #store-hours { width: 200px; float: right; } #store-hours h2 { margin-top: 0; background: url(../images/titles/content_subtitle_matrix.png) 0 -210px no-repeat; text-indent: -9999px; } #store-hours dt { padding: 5px 0 3px 0; float: left; clear: left; font-weight: normal; } #store-hours dd { padding: 5px 0 3px 0; text-align: right; } #store-hours dl > dt:first-child + dd { border-bottom: 1px solid #f0f0f0; } #store-hours p { color: #BBB; font-size: 11px; font-style: italic; line-height: 15px; } /* NEW IN THE TASTEMAKER SIDEBAR */ #new { position: relative; overflow: hidden; } #new h2 { margin: 0; padding-bottom: 3px; height: 14px; border-bottom: 1px solid #CCC; background: url(../images/titles/content_subtitle_matrix.png) 100px -230px no-repeat; text-indent: -9999px; } #new ul.wine-list-new { margin: 0; padding: 0; width: 9999px; list-style: none; } #new ul.wine-list-new > li { margin: 0; padding: 0 20px 0 100px; width: 170px; float: left; position: relative; font-size: 10px; } #new ul.wine-list-new li h4 { margin: 28px 0 5px 0; font-size: 24px; font-weight: normal; line-height: 1; } #new ul.wine-list-new li img { position: absolute; top: -20px; left: 20px; } #new ul.wine-list-new li p { margin: 4px 0 0 0; font-size: 12px; line-height: 18px; } #new ul.wine-list-new li a.wine-details { display: block; } #new ul.wine-list-new li.varietal { position: absolute; left: 100px; top: 16px; } #new ul.wine-list-new li.price { display: none; } /* NAVIGATION */ #new a.previous, #new a.next { width: 20px; height: 32px; display: none; position: absolute; top: 36px; background: url(../images/buttons/tastemaker_button_matrix.png) no-repeat; text-indent: -9999px; outline: 0; cursor: pointer; } #new a.previous { left: 0; } #new a.next { right: 0; background-position: -25px 0; } /* HOVER STATES */ #new a.previous:hover { background-position: 0 -32px; } #new a.next:hover { background-position: -25px -32px; } body.location div.location { margin-right: 20px; width: 175px; } body.location #store-hours { margin-right: -215px; } /*------------------------------------------- BLOG PAGE -------------------------------------------*/ body.blog h1 { background-position: 0 -200px; } body.blog #primary { width: 490px; float: left; overflow-x: hidden; } ol.entries { margin: 0; padding: 0; list-style: none; } ol.entries li { margin: 0 0 10px 0; padding: 0; border-bottom: 1px solid #CCC; font-size: 1em; } ol.entries li h2 { margin: 0 0 6px 0; color: #f0037f; font-size: 26px; font-weight: bold; line-height: 28px; } ol.entries li h3 { margin: 0 0 1em 0; color: #b2b3ad; font-size: 11px; font-weight: normal; } body.blog #secondary { margin-top: -53px; width: 185px; float: right; } body.blog #secondary h2 { margin: 0 0 5px 0; height: 14px; background: url(../images/titles/content_subtitle_matrix.png) 0 -170px no-repeat; text-indent: -9999px; } ol.tweets { margin: 0; padding: 0; list-style: none; } ol.tweets li { margin: 0 0 15px 0; padding: 6px 9px; position: relative; background: #EEE url(../images/tweet_bubble_bottom.png) 0 100% no-repeat; font-size: 11px; line-height: 15px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; } ol.tweets li a.permalink { margin: 5px 0 -13px 15px; display: block; } /*------------------------------------------- CONTACT PAGE -------------------------------------------*/ body.contact h1 { margin-bottom: 15px; background-position: 0 -250px; } body.contact .ws-form { margin: 0 20px 0 0; width: 320px; float: left; } body.contact .ws-form input, body.contact .ws-form textarea { width: 305px; } body.contact div.locations { float: left; } /*------------------------------------------- WISH LIST PAGE -------------------------------------------*/ body.wish-lists h1, body.people h1 { background-position: 0 -450px; } body.wish-list h1 { background-position: 0 -500px; } /*------------------------------------------- TERMS OF SERVICE -------------------------------------------*/ body.tos h1 { margin-bottom: 15px; background-position: 0 -400px; } body.tos ol { margin: 0; padding: 0; } body.tos ol li { margin: 0 0 0 2em; padding: 0; font-size: 20px; } body.tos ol li p { margin: 5px 0 1em 0; font-size: 13px; } /*------------------------------------------- MISC CLASSES -------------------------------------------*/ /* RATER ADD-ONS */ ul.rating li.clear { display: none; font-size: 10px; text-indent: 0; } ul.rating li.clear a { color: #CCC; text-transform: uppercase; } ul.rating li.clear a:hover { color: #999; } /* AJAX CLASSES */ .status { display: none; } .error .error-message { display: block; clear: left; } /* BUTTONS */ button.find { width: 46px; height: 27px; background-position: -510px -30px; } button.sign-in { width: 61px; height: 27px; background-position: -510px -120px; } button.sign-up { width: 65px; height: 27px; background-position: -510px -180px; } button.send { width: 49px; height: 27px; background-position: -510px -60px; } a.map { width: 44px; height: 27px; background-position: -510px -90px; } div.actions { position: relative; } div.processing button.processing { position: static; } /*------------------------------------------- ECOMMERCE DISABLED -------------------------------------------*/ body.ecommerce_disabled #welcome ul li#shopping-cart { display: none !important; } body.ecommerce_disabled div.actions button { display: none !important; } /*------------------------------------------- EXPIRED CARTS MESSAGE -------------------------------------------*/ div#cart-expired { display: none; }