/* base.css contains a reset, font normalization and some base styles. credit is left where credit is due. much inspiration was taken from these projects: yui.yahooapis.com/2.8.1/build/base/base.css camendesign.com/design/ praegnanz.de/weblog/htmlcssjs-kickstart */ /* BEGIN RESET CSS - html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) - v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark - html5doctor.com/html-5-reset-stylesheet/ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;} nav ul {list-style:none;} blockquote, q {quotes:none;} blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;} a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;} ins {background-color:#ff9; color:#000; text-decoration:none;} mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;} del {text-decoration: line-through;} abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;} table {border-collapse:collapse; border-spacing:0;} /* tables still need cellspacing="0" in the markup */ hr {display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;} input, select {vertical-align:middle;} /* fonts.css from the YUI Library: developer.yahoo.com/yui/ - Refer to developer.yahoo.com/yui/3/cssfonts/ for font sizing percentages */ body {font:13px/1.231 sans-serif; *font-size:small;} /* hack retained to preserve specificity */ select, input, textarea, button {font:99% sans-serif;} /* normalize monospace sizing - en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */ pre, code, kbd, samp {font-family: monospace, sans-serif;} /* minimal base styles*/ body, select, input, textarea {color: #444; font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande","Lucida Sans", Arial, sans-serif} /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 set your base font here, to apply evenly */ h1,h2,h3,h4,h5,h6 {font-weight: bold;} /* Headers (h1,h2,etc) have no default font-size or margin, you'll want to define those yourself. */ html {overflow-y: scroll;} /* always force a scrollbar in non-IE */ a:hover, a:active {outline: none;} /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */ a, a:active, a:visited {color: #607890;} a:hover {color: #036;} ul, ol {margin-left: 1.8em;} ol {list-style-type: decimal;} nav ul, nav li {margin: 0;} /* Remove margins for navigation lists */ small {font-size: 85%;} strong, th {font-weight: bold;} td, td img {vertical-align: top;} sub {vertical-align: sub; font-size: smaller;} sup {vertical-align: super; font-size: smaller;} pre {padding: 15px; white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */} /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */ textarea {overflow: auto;} /* thnx ivannikolic! www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */ .ie6 legend, .ie7 legend {margin-left: -7px;} /* thnx ivannikolic! */ input[type="radio"] {vertical-align: text-bottom;} /* align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */ input[type="checkbox"] {vertical-align: bottom;} .ie7 input[type="checkbox"] {vertical-align: baseline;} .ie6 input {vertical-align: text-bottom;} .infield, input[type=button], input[type=submit], button{cursor: pointer;} /* hand cursor on clickable input elements */ button, input, select, textarea {margin: 0;} /* webkit browsers add a 2px margin outside the chrome of form elements */ input:valid, textarea:valid {} /* colors for form validity */ input:invalid, textarea:invalid {border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;} .no-boxshadow input:invalid, .no-boxshadow textarea:invalid {background-color: #f0dddd;} ::-moz-selection {/*background: #FF5E99;*/ background: #336699; color:#fff; text-shadow: none;} /* These selection declarations have to be separate. No text-shadow: twitter.com/miketaylr/status/12228805301. Also: hot pink. */ ::selection {/*background:#FF5E99;*/ background: #336699; color:#fff; text-shadow: none;} a:link {-webkit-tap-highlight-color: #FF5E99;} /* j.mp/webkit-tap-highlight-color */ button {width: auto; overflow: visible;} /* make buttons play nice in IE: www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ .ie7 img {-ms-interpolation-mode: bicubic;} /* bicubic resizing for non-native sized IMG: code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */ /* Non-semantic helper classes */ .ir {display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr;} /* for image replacement */ .hidden {display: none; visibility: hidden;} /* Hide for both screenreaders and browsers css-discuss.incutio.com/wiki/Screenreader_Visibility */ .visuallyhidden {position: absolute !important; clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ clip: rect(1px, 1px, 1px, 1px);} /* Hide only visually, but have it available for screenreaders www.webaim.org/techniques/css/invisiblecontent/ & j.mp/visuallyhidden */ .invisible {visibility: hidden;} /* Hide visually and from screenreaders, but maintain layout */ /* The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements j.mp/bestclearfix */ .clearfix:before, .clearfix:after {content: "\0020"; display: block; height: 0; visibility: hidden;} .clearfix:after {clear: both;} .clearfix {zoom: 1;} /* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ /* There should be little need for editing content above this line ====================================================================================================================================*/ /* Primary Styles - Author: Hotwaxmedia | Brett Briggs */ pre {border: 1px dashed rgba(0,0,0,0.2); padding: 5px; font-family: 'Courier New', monospace; background: #fefbeb;} /* STICKY FOOTER */ * {margin: 0;} html, body {height: 100%; line-height: 1.33;} #wrapper {width: 100%; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -215px;} /* the bottom margin is the negative value of the footer's height */ #footer, .push {height: 210px;} /* .push must be the same height as .footer */ #container {margin: 5px auto; width: 960px; padding: 2px 10px;} p {margin-top: 5px; margin-bottom: 10px;} /* Option 36 of: http://client.hotwaxmedia.com/buynow/layouts/ */ #main {float:right; width:700px} #local {float:left; width:220px;} #secondary {float:right; width:700px;} #sub {clear:both; width:100%} /* Flip Columns For Cart & Checkout. */ .checkoutProposed #main, .cartProposed #main {float:left; width:700px} .checkoutProposed #local, .cartProposed #local {float:right; width:220px;} .checkoutProposed #secondary, .cartProposed #secondary {float:left; width:700px;} .checkoutProposed #sub, .cartProposed #sub {clear:both; width:100%} /* Turn off coluns for checkout, confirmation */ .OrderDetail #main, .OrderDetail #local, .OrderDetail #secondary, .OrderDetail #sub, .Checkout #main, .Checkout #local, .Checkout #secondary, .Checkout #sub {float:none; width:auto; min-height:auto; height:auto !important; height:auto; clear: none;} /****************************************/ /* STYLE GUIDE SECTION /****************************************/ /*#main table, #main table td {border: 1px solid #CCCCCC;}*/ /****************************************/ /* HEADER SECTION /****************************************/ header {width: 100%; margin: 0 0 10px 0;} #innerHeader {border: solid rgba(0,0,0,0.2); border-width: 0 0 1px 0; margin: 0 auto; width: 960px; padding: 5px 10px;} #logo {float: left;} #innerHeader .headerContent {float: right;} #innerHeader .headerContent nav {float: left; margin: auto 3px;} #innerHeader .headerContent div {float: right; margin: 5px;} #innerHeader .headerContent div input[type=submit] {display: none;} #innerHeader .headerContent nav li {float: left; margin: auto 2px;} #innerHeader .headerContent nav li:before {content: "| ";} #innerHeader .headerContent nav li:first-child:before {content: ""; display: none;} .ie6 #innerHeader .headerContent nav li, .ie7 #innerHeader .headerContent nav li {margin-left: auto; padding-left: auto; border: none;} .ie6 #innerHeader .headerContent nav li + li, .ie7 #innerHeader .headerContent nav li + li {padding-left: 5px; margin-left: 5px; border: 1px solid #444; border-width: 0 0 0 1px;} /****************************************/ /* NAV SECTION /****************************************/ #nav {width: 100%; font-size: 14px; /*text-align: center;*/} #nav ul {border: solid rgba(0,0,0,0.2); border-width: 0 0 1px 0; padding: 0 10px; width: 960px; margin: auto;} #nav ul li {float: left; padding: 7px 15px; vertical-align: top; position: relative; cursor: pointer;} /*#nav ul li:first-child {margin-left: 0;} */ /*#nav ul li:last-child {margin-right: 0;} */ #nav ul li h4 {display: none;} #nav ul li ul {display: none; width: 130px; position: absolute; padding: 5px; margin:0; background: #FFF; border: 1px solid rgba(0,0,0,0.3); z-index: 10;} #nav ul li li {float: none; display: block; padding: 2px 0 0 0; margin: 0;} #nav ul li:hover ul {display: block;} /****************************************/ /* BREADCRUMB /****************************************/ .breadcrumb li {display: inline-block;} .breadcrumb li + li:before {content: "È ";} .ie6 .breadcrumb li, .ie7 .breadcrumb li {zoom:1; display: inline; margin-left: auto; padding-left: auto; border: none;} .ie6 .breadcrumb li + li, .ie7 .breadcrumb li + li {padding-left: 8px; margin-left: 8px; border: 1px solid #444; border-width: 0 0 0 1px;} /****************************************/ /* CATEGORY SECTION /****************************************/ .sortControls {border: 1px solid rgba(0,0,0,0.3); margin: 10px auto;} .sortControls ul {margin: 0; padding: 5px 10px;} .sortControls li {display: block; float: left; margin: 0 2px} .sortControls .pagination {float: left;} .sortControls .pageCount {float: right;} .sortControls .viewControl {float: right;} .sectionTitle {display: block;} .block div {margin: 0 0 3px} .block div:last-child {margin-bottom: 0;} .block .prodTitle {font-size: 14px; font-weight: bold;} .block .prodPrice {font-weight: bold;} .block .prodCta {float:right;} .block .prodDesc {/*display: none;*/} .grid {margin:0;} .grid .block {display: block; float: left; vertical-align: top; margin: 5px 5px 5px 0; padding: 12px; width: 200px; border: 1px solid rgba(0,0,0,0.2);} .grid .block + .block {margin: 5px} .grid .block:last-child {margin-right: 0; /*float: right;*/} /*.grid .block:nth-child(3n+1) {margin-left: 0;}*/ /*.grid .block:nth-child(3n+3) {margin-right: 0; float: right;}*/ .grid .prodThumb {text-align: center;} .list {margin: 0;} .list .block {display: block; vertical-align: top; margin: 5px 0; padding: 12px; border: 1px solid rgba(0,0,0,0.2);} .list .prodThumb {float: left; margin: 0 5px 0 20px;} .list .prodInfo {float: left; margin: 0 20px 0 5px; width: 420px} .featured-items {width: 100%; padding: 6px 0 0; margin: 5px 0 15px 0;} .featured-items h3 {font-weight: bold;} .featured-items img {width: 125px;} .featured-items ul {padding: 5px 0; list-style: none; list-style-position: outside; margin-left: 0; border: 1px solid rgba(0,0,0,0.2);} .featured-items .block {float: left; display: block; text-align: center; margin-left: 40px;} .featured-items .block em {font-weight: normal; font-style: normal;} .featured-items .block .prodTitle {margin: 0;} /****************************************/ /* PRODUCT DETAIL SECTION /****************************************/ .productContainer {/*border: solid rgba(0,0,0,0.2) 1px;*/ padding: 10px 0; margin: 10px 0;} .productContainer .productImage {float:left; width: 300px; margin: 0 10px 0 0} .productContainer .productImage div {position: relative;} .productContainer .productImage img {border: solid rgba(0,0,0,0.2) 1px;} .productContainer .productImage .zoomIcon {position: absolute; bottom: 5px; right: 2px;} .productContainer .productImage ul {text-align: center; margin: 0;} .productContainer .productImage li {display: inline-block; margin: 2px;} .ie7 .productContainer .productImage li {display: inline; zoom: 1;} .productContainer .productInfo {float: right; width: 360px; position: relative; margin: 0 10px;} .productContainer .productInfo h1 {font-size: 14px; font-weight: bold; margin: 0 0 3px;} .productContainer .productInfo p {margin: 5px 0;} .productContainer .productInfo p:last-child {margin-bottom: 0;} .productContainer .productRating strong {margin-right: 5px;} .productContainer .productRating strong, .productContainer .productRating span {float: left;} .productContainer .productRating .ratingStar {display: block; width: 15px; height: 15px; background: url('/images/details-rating.png') no-repeat; background-position: -15px 0; text-indent: -9999px; overflow: hidden;} .productContainer .productRating .checked {background-position: 0 0;} .productContainer .productRating:hover .ratingStar {background-position: -15px 0;} .productContainer .productRating:hover .ratingStar:hover{background-position: 0 0;} .productContainer .socialMedia {position: absolute; top: 0px; right: 0px;} .productContainer .productCTA {float: right; width: 195px; margin: 0 0 10px;} .productTabs .tabList {border: solid rgba(0,0,0,0.2) 1px; display: inline; padding: 5px; margin: 0; float: right; list-style: none; list-style-position: outside;} .productTabs .tabList li {float: left;} .productTabs .tabList li a {padding: 5px 15px;} .productTabs .tabContent {float: left; margin-left: 0;} .productTabs .tabContent li {display: block; padding: 15px 0;} #addToCartConfirmation {border: solid 1px rgba(0,0,0,0.2); padding: 10px; position: relative;overflow:auto;} #addToCartConfirmation .closeButton {position: absolute; display: block; padding: 2px 4px; top:2px; right: 6px; font-weight: bold; font-size: 14px;} #addToCartConfirmation h3 a {float: right;} #addToCartConfirmation .featured-items {width: auto; border: none; padding: 5px 0 0 0; margin: 0;} #addToCartConfirmation .featured-items ul {background: none; padding: 4px 0 0 0; border: none;} #addToCartConfirmation .featured-items li {margin-left: 35px;} #addToCartConfirmation img {height:120px;} /****************************************/ /* SHOPPING CART ACTUAL SECTION (Q) /****************************************/ .ShoppingCart #shoppingCart {border: 1px solid #CCCCCC; float: right; margin: 12px 0 0 10px; width: 700px;} .ShoppingCart .secureIcons {float: left; width: 300px;} .ShoppingCart .secureIcons img:first-child {margin-bottom: 20px;} .ShoppingCart #shoppingCart thead th {border: solid 1px #CCCCCC; color: #333333; text-align: left;} .ShoppingCart #shoppingCart th, .ShoppingCart #shoppingCart td {padding: 6px 12px;} .ShoppingCart #shoppingCart .updateRemoveItem {text-align: center; width: 30px;} .ShoppingCart #shoppingCart tbody td {border-color: #CCCCCC; border-style: solid; border-width: 0 1px 1px 0;} .ShoppingCart .removeShoppingCartItem input[type="submit"] {background: url("../images/remove.gif") no-repeat scroll center top transparent !important; border: medium none; display: inline; height: 14px; margin: 3px 0 0 5px; text-indent: -9999px; width: 14px;} .ShoppingCart #couponEnter {border-left: solid 1px #CCCCCC; border-right: solid 1px #CCCCCC; clear: both; font-size: 12px; padding: 8px 0 8px 20px;} .ShoppingCart #couponEnter form {margin: 0; clear: both;} .ShoppingCart #couponEnter div {float: right; width: 55%; font-size: 11px;} .ShoppingCart #couponEnter input[type="text"] {margin: 0 0 0 8px;} .ShoppingCart .errorMessages, .ShoppingCart .successMessage {background: none; border: none; float: right; font-size: 11px; margin: 0; padding: 5px 10px; width: 52% !important;} .ShoppingCart #main .cartShippingOptions {border: solid 1px #CCCCCC; clear: both; font-size: 12px; padding: 8px 0 8px 20px;} .ShoppingCart #main .cartShippingOptions .cartOptions {float: left; margin: 0; width: 25%;} .ShoppingCart #main .cartShippingOptions .cartInfo {float: left; margin: 0 0 10px 0; width: 73%;} .ShoppingCart #main .cartShippingOptions .cartInfo label{display: block; float: none; margin: 0 0 5px 0;} .ShoppingCart #main .cartShippingOptions .cartInfo label input {margin-right: 8px;} .ShoppingCart #main .cartShippingOptionsAlt {clear: left; padding: 10px 0 0 0; margin-right: 20px;} .ShoppingCart #main .cartShippingOptionsAlt .cartOptions{float: left; margin: 0 10px 0 0; width: 25%;} .ShoppingCart #main .cartShippingOptionsAlt .cartOptions img {margin: 10px 0 0 0;} .ShoppingCart #main .cartShippingOptionsAlt .cartInfo {float: left; margin-bottom: 0; width: 73%:} .ShoppingCart #main .cartSummary {border-left: solid 1px #CCCCCC; border-right: solid 1px #CCCCCC; border-bottom: solid 1px #CCCCCC; clear: both; font-size: 12px; padding: 20px 0 20px 20px;} .ShoppingCart #main .cartSummary dl {float: right; margin: 0 10px 0 0; width: 225px;} .ShoppingCart #main .cartSummary .cartTotal {color: #333333; margin-top: 10px;} .ShoppingCart #main .cartSummary dl dt, .ShoppingCart #main .cartSummary dl dd {display: inline-block; text-align: right; width: 140px;} .ShoppingCart #main .cartSummary dl dd {margin: 2px 0 2px 10px; width: 70px;} .ShoppingCart #main div.checkoutOptions ul {list-style: none outside none;} .ShoppingCart #main div.checkoutOptions .secureIcons {margin: 20px 0; text-align: center;} .ShoppingCart #main .coaOr {clear: both; display: block; font-size: 12px; margin: 5px 0;} .ShoppingCart #main .checkoutCoaButtons {float: right; margin: 20px 0; text-align: center; width: 170px;} .ShoppingCart #main .coaPaypalCheckout {background: url("/images/paypal-btn.gif") no-repeat center top; display: block; margin: 0 auto; padding: 14px 14px 12px; width: auto;} .ShoppingCart #main .coaGoogleCheckout {background: url("/images/google-btn.gif") no-repeat center top; display: block; margin: 0 auto; padding: 14px 14px 12px; width: auto;} .ShoppingCart #main .coaIglobalCheckout {background: url("/images/iglobal.gif") no-repeat center top; display: block; margin: 0 auto; padding: 24px 14px 12px; width: auto;} .ShoppingCart #main .continueShopping {float: left; height: 30px; margin: 20px 0; text-align: center;} /****************************************/ /* CHECKOUT_Actual (Ryan P.)*/ /****************************************/ .Checkout .previousAccount {margin: 20px 0;} #CreateCustomerAndPlaceOrder {padding: 0;} #CreateCustomerAndPlaceOrder ol {list-style: none outside; margin: 0;} .Checkout #main h3, .Checkout #main h4 {font-size: 14px; padding: 5px 8px; margin-bottom: 10px;} .Checkout #main .shippInfo {float: left; margin: 0 15px 0 5px; padding: 0 15px 0 0; width: 48%;} .Checkout #main .paymentInfo {clear: left; margin-top: 30px; width: 48%;} .Checkout #main .shoppingcartInfo {float: right; width: 48%;} .billingShippingAndPayment {float:left; width:48%; border-right:1px dotted #999999; padding-right:20px;} .createUserAndNewsletter {float: right; padding: 10px 0 0; width: 48%;} .createUserAndNewsletter em {display: block; font-size: 11px; line-height: 24px; font-style: normal; margin: 4px 0; padding: 0 8px; width: auto;} .createUserAndNewsletter fieldset {margin: 0 0 15px 0;} .createUserAndNewsletter p {margin: 0; padding: 3px 0 0 5px;} .createUserAndNewsletter .note {font-size: 10px;} .createUserAndNewsletter div, .createUserAndNewsletter div.clmnR {margin: 0; padding: 5px 0 0 2px;} .half {float: left; height: 50px; width: 48%;} #createUserLogin[type="checkbox"], .signUpForNewsletter[type="checkbox"], #doNotUseBillingAddressForShipping[type="checkbox"] {margin: 2px 5px 0.8em 0; float: left;} #CreateCustomerAndPlaceOrder label {color: #333333; display: block; font-size: 11px; margin-top: 5px;} #CreateCustomerAndPlaceOrder label input[type="radio"] {margin-right: 10px;} #CreateCustomerAndPlaceOrder div span {margin: 0 10px 0 0; width: 217px;} #CreateCustomerAndPlaceOrder .billingSameAsChecking .half, form fieldset.billingAddressFieldset div.half, .paymentMethodFieldset div.half {float: left; margin: 0; height: 50px; width: 48%;} .billingAddressFieldset {margin: 0 0 20px;} form div.clmnR {clear: none; float: right; padding: 0 0 0 6px;} .clmnR {float: right !important;} .Checkout #main input[type="text"], .Checkout #main input[type="password"], .Checkout #main select, .Checkout #main textarea {width: 98%;} #shipMethod {width: inherit; margin-left: 10px;} form ol label span {color: #D1242A; float: none;} form .formState {float: left; width: 110px;} form .formZip {float: left; height: 61px; padding: 0 0 0 5px; width: 90px;} form .formState select {width: 110px;} #shipToPostalCode, #billToPostalCode {width: 90px;} form .formZip [type="text"] {float: left; width: 60px;} #newUserForm .noTransform, #CreateCustomerAndPlaceOrder .noTransform {color: #333333; display: inline; font-size: 10px; margin-top: 0;} form div span {clear: both; margin: 0 10px 0 0; width: 217px;} form span {margin: 0 5px 0 0; padding: 0;} form .formMonth {float: left; width: 106px;} form .formYear {float: right; width: 86px;} fieldset.paymentMethodFieldset input#cardNumber {width: 98% !important;} div.cvv2 {clear: both; height: 30px; margin-bottom: 20px;} div.cvv2 div {float: left; width: 125px;} div.cvv2 span.required {color: #991D46; font-size: 15px; line-height: 11px; display: inline; float: none; width: auto;} div.cvv2 span {clear: none; color: #333333; display: block; float: left; font-size: 10px; line-height: 14px; margin: 0 10px 0 0; width: 217px;} div input#createUserLogin[type="checkbox"], div input.signUpForNewsletter[type="checkbox"], div input#doNotUseBillingAddressForShipping[type="checkbox"] {margin: 2px 5px 0.8em 0;} .shippingMethod {border: 1px solid #CCCCCC; padding: 5px 10px;} .shippingMethod label {font-weight: bold;} .shippingMethod select {width: 200px;} .shoppingcartInfo #shoppingCart table {table-layout: fixed; width: 432px;} .shoppingcartInfo #shoppingCart table table {table-layout: fixed; width: 142px;} .shoppingcartInfo #shoppingCart table thead th {} .shoppingcartInfo #shoppingCart table th.qty, .shoppingcartInfo #shoppingCart table td.qty {padding: 2px 8px; text-align: center;} .shoppingcartInfo #shoppingCart table th.dlt, .shoppingcartInfo #shoppingCart table td.dlt {text-align: center;} .shoppingcartInfo #shoppingCart table thead th.descr {text-align: left;} .shoppingcartInfo #shoppingCart table th, .shoppingcartInfo #shoppingCart table td {font-size: 11px; margin: 0; padding: 0; vertical-align: middle;} .shoppingcartInfo #shoppingCart table .price {text-align: right;} .shoppingcartInfo #shoppingCart table tbody td.descr {border: medium none; font-size: 11px; max-width: 163px; min-width: 163px; overflow: hidden; padding-bottom: 5px;} .shoppingcartInfo #shoppingCart table tbody td.descr a.thumb {float: left; margin: 0 10px 5px 0; height: 30px; width: 30px; overflow: hidden; border: 1px solid #ccc; margin-right: 5px;} .shoppingcartInfo #shoppingCart form.removeShoppingCartItem input[type="submit"] {background: url("../images/remove.gif") no-repeat scroll center top transparent !important; border: medium none; display: inline; height: 16px; margin: 0 auto; text-indent: -9999px; width: 16px;} table tbody td.price .listPrice {color: #000000; text-decoration: line-through; font-weight: normal;} .shoppingcartInfo #shoppingCart .cartSummary {border-color: #999999 -moz-use-text-color; border-style: dotted none; border-width: 1px medium; float: left; padding: 0; width: 100%; padding: 10px 0;} .shoppingcartInfo #shoppingCart .cartSummary dl {float: right; width: 150px;} .shoppingcartInfo #shoppingCart .cartSummary dl dt, .shoppingcartInfo #shoppingCart .cartSummary dl dd {display: inline-block; text-align: right; width: 92px; margin: 0 0 4px 0;} .shoppingcartInfo #shoppingCart .cartSummary dl dd {text-align: right; width: 50px;} .shoppingcartInfo #shoppingCart .cartSummary dl dt:last-of-type, .shoppingcartInfo #shoppingCart .cartSummary dl dd:last-of-type {} .shoppingcartInfo #shoppingCart table tbody tr td a img {width: 32px;} .shoppingcartInfo #shoppingCart .qty input[type="text"] {float: none; width: 20px;} .shoppingcartInfo #couponEnter {float: left; height: auto; padding: 0 5px 10px 15px; width: 245px;} .shoppingcartInfo #couponEnter label {line-height: 14px; margin: 10px 0 0; float: left;} .shoppingcartInfo #couponEnter input[type="submit"] {font-size: 11px; font-weight: bold; margin: -1px 0 0 10px !important; float: left;} .shoppingcartInfo #couponEnter input[type="submit"]:hover {-moz-box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.4);} .shoppingcartInfo #couponEnter p {text-align: left; margin: 0 0 0; padding: 5px 0 0;} .shoppingcartInfo #couponEnter div {float: left;} .shoppingcartInfo #couponEnter div ul li {color: #333333; float: none; font-size: 11px; height: 20px; line-height: 20px;} .shoppingcartInfo #couponEnter form div input#productPromoCodeId {width: 172px; float: left;} .createUserAndNewsletter div, .createUserAndNewsletter div.clmnR {margin: 0; padding: 5px 0 0 2px;} /****************************************/ /* FORMS /****************************************/ /*.js label {position: absolute;}*/ /*.js input[type="text"] {display: none;}*/ input.zipCode {width: 85px !important;} label.infield {padding: 4px 3px 3px 5px; cursor: text;} input#cardNumber {width: 140px !important;} input#billToCardSecurityCode {width: 50px !important;} #createCustomerAndPlaceOrder ul {margin-left: 0; list-style: none; list-style-position: outside;} #shippingGroup, #paymentGroup, #accountGroup, #cartGroup {border: solid rgba(0,0,0,0.2); border-width: 1px 0 0; margin-top: 10px;} #shippingGroup fieldset, #paymentGroup fieldset, #accountGroup fieldset {margin: 5px auto;} #shippingGroup .column, #paymentGroup .column {float: left; width: 460px;} #shippingGroup .column:nth-child(odd), #paymentGroup .column:nth-child(odd) {float: right;} #shippingGroup .column div, #paymentGroup .column div {margin: 3px auto;} #shippingGroup .column input[type="text"], #paymentGroup .column input[type="text"] {width: 99%;} #shippingGroup .column .twoOnLine input[type="text"], #paymentGroup .column .twoOnLine input[type="text"] {width: 48%;} #orderSubmitForm {float: right; margin-right: 38px;} /****************************************/ /* FOOTER SECTION /****************************************/ #footer {width: 100%; margin: 20px 0 0 0;} #footer h1 {font-size: 14px; margin: 5px 0 2px} #footer div {border: solid rgba(0,0,0,0.2); border-width: 1px 0 0 0; margin: 5px auto; width: 960px; padding: 2px 10px;} #footer div nav {float: left; vertical-align: top; margin: auto 10px; width: 220px;} #footer div nav:first-child {margin-left:0} #footer div nav:last-child {margin-right:0; float: right;} #footer div nav li {display: block;} #footer div p {float: left;} #footer div .legalLinks {float: right;} #footer div .legalLinks li {float: left; display: inline-block; margin: auto 5px;} .ie #footer div .leagalLinks li {float: left;} #footer div .legalLinks li:last-child {margin-right:0;} #footer .socialLink {margin-right: 5px; float: left; height: 20px; width: 20px; display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left;} #footer .socialLink:hover {background-position: 0 0;} #footer .facebook {background: url('/images/social-facebook.png') no-repeat; background-position: 0 -20px;} #footer .twitter {background: url('/images/social-twitter.png') no-repeat; background-position: 0 -20px;} /****************************************/ /* PROPOSED SHOPPING CART SECTION /****************************************/ .cartList {margin: 0;} .cartList .block {display: block; vertical-align: top; padding: 12px; border: solid rgba(0,0,0,0.2); border-width: 0 0 1px;} .cartList .prodThumb {float: left; margin: 0 5px 0 20px;} .cartList .prodThumb img {width: 100px;} .cartList .prodInfo {float: right; margin: 0 20px 0 5px; width: 520px} .cartList .prodInfo .prodTitle {float: left;} .cartList .prodInfo .prodPrice {float: right;} .cartList .prodInfo .prodPrice li {display: inline-block; margin: 0 0 0 20px; text-align: right; font-weight: normal;} .cartList .prodInfo .prodPrice .prodTotal {font-weight: bold; margin-left: 50px;} .cartList .prodInfo .prodPrice input[type="text"] {width: 30px; text-align: right;} .cartList .prodInfo .prodDesc {float: left; width: 450px;} .cartList .cartFooter {display: block; margin: 15px 0;} .cartList .cartFooter .discountCode {text-align: right; margin: 0 0 10px 0;} .cartList .cartFooter .shippingOptions {float: left; margin: 0;} .cartList .cartFooter .shippingOptions li {float: left; margin: 0 10px 0 0; list-style: none; list-style-position: outside;} .cartProposed .cartTotal {float: right; list-style: none; margin: 0 31px 0 0;} .cartProposed .orderTotal {font-size: 14px; border: solid rgba(0,0,0,0.2); border-width: 1px 0 0; margin: 5px 0 0;} .cartProposed .cartTotal span {float: left; width: 120px;} .cartProposed .cartTotal .numerical {font-weight: bold; float: right; width: 100px; text-align: right;} .cartList .sectionTitle, .cartSummary h4 {font-size: 14px; padding: 5px 8px;} .cartProposed #local {position: relative;} .cartProposed #local .cartSummary {width: 220px; top: 0px;} .cartProposed #local .pinnedTop {position: absolute; top: 30px;} .cartProposed #local .pinnedBottom {position: absolute; top:auto; bottom: 0px;} .cartProposed #local .follow {position: fixed;} .cartProposed #local .cartSummary {margin: 15px 0 0;} .cartProposed #local .cartSummary ul {margin-top: 0;} .cartProposed #local .cartSummary li {margin: 3px 10px;} .cartProposed #local .cartSummary li a {width: auto;} .cartProposed #local .cartSummary .sectionTitle {margin: 0;} .cartSummary .cartTotal .checkout {text-align: center; padding: 5px 0;} .cartProposed #local ul, .cart #local li {border:none;} /****************************************/ /* PROPOSED CHECKOUT /****************************************/ .cartList .sectionTitle, .cartSummary h4 {font-size: 14px; padding: 5px 8px;} .checkoutProposed .cartTotal {float: right; list-style: none; margin: 0 31px 0 0;} .checkoutProposed .orderTotal {font-size: 14px; border: solid rgba(0,0,0,0.2); border-width: 1px 0 0; margin: 5px 0 0;} .checkoutProposed .cartTotal span {float: left; width: 120px;} .checkoutProposed .cartTotal .numerical {font-weight: bold; float: right; width: 100px; text-align: right;} .checkoutProposed #local {position: relative;} .checkoutProposed #local .cartSummary {width: 220px; top: 0px;} .checkoutProposed #local .pinnedTop {position: absolute; top: 30px;} .checkoutProposed #local .pinnedBottom {position: absolute; top:auto; bottom: 0px;} .checkoutProposed #local .follow {position: fixed;} .checkoutProposed #local .cartSummary {margin: 15px 0 0;} .checkoutProposed #local .cartSummary li {margin: 3px 10px;} .checkoutProposed #local .cartSummary li a {width: auto;} .checkoutProposed #local .cartSummary .sectionTitle {margin: 0;} .checkoutProposed #local ul, .Checkout #local li {border:none;} /****************************************/ /* ADMIN PANEL /****************************************/ #uiAdminPanel {position: absolute; position: fixed; top: 4px; right: 0; z-index: 1000;} #uiAdminPanel a, #uiAdminPanel a:hover, #uiAdminPanel a:visited {display: block; background-color: #666; background-color: rgba(152, 50, 31, 0.8); padding: 2px 2px 4px 4px; font-size: 10px; border: 1px solid #FFF; border-width: 1px 0 1px 1px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; -moz-box-shadow: -.5px .5px 1px rgba(0,0,0,0.5); -webkit-box-shadow: -.5px .5px 1px rgba(0,0,0,0.5); box-shadow: -.5px .5px 1px rgba(0,0,0,0.5); color: #FFF; text-decoration: none; text-shadow: 1px 1px 0 rgba(0,0,0,0.7);} #uiAdminPanel a:hover::after {content: ' ui-admin';} /****************************************/ /* DEFAULT LIGHTBOX (FANCYBOX) STYLES /****************************************/ #fancybox-loading {display: none; position: fixed; left: 50%; top: 50%; height: 40px; width: 40px; margin-left: -20px; margin-top: -20px; cursor: pointer; overflow: hidden; z-index: 1104;} #fancybox-loading div {position: absolute; left: 0; top: 0; height: 480px; width: 40px; background-image: url('/js/libs/fancybox/fancybox.png')} #fancybox-overlay {display: none; position: absolute; left: 0; top: 0; width: 100%; z-index: 1100} #fancybox-tmp {display: none; margin: 0; padding: 0; border: 0; overflow: auto;} #fancybox-wrap {display: none; position: absolute; left: 0; top: 0; padding: 20px; outline: none; z-index: 1101;} #fancybox-outer {position: relative; height: 100%; width: 100%; background: #fff} #fancybox-content {position: relative; height: 0; width: 0; padding: 0; border: 0px solid #fff; outline: none; overflow: hidden; z-index: 1102;} #fancybox-hide-sel-frame {position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: transparent; z-index: 1101;} #fancybox-close {display: none; position: absolute; right: -15px; top: -15px; height: 30px; width: 30px; background: transparent url('/js/libs/fancybox/fancybox.png') -40px 0px; cursor: pointer; z-index: 1103;} #fancybox-error {margin: 0; padding: 14px; color: #444; font: normal 12px/20px Arial} #fancybox-img {height: 100%; width: 100%; margin: 0; padding: 0; border: none; line-height: 0; outline: none; vertical-align: top;} #fancybox-frame {display: block; height: 100%; width: 100%; border: none} #fancybox-left, #fancybox-right {display: none; position: absolute; bottom: 0px; height: 100%; width: 35%; background: transparent url('/js/libs/fancybox/blank.gif'); cursor: pointer; outline: none; z-index: 1102;} #fancybox-left:hover, #fancybox-right:hover {/* IE6 */ nowhitespace: afterproperty; visibility: visible;} #fancybox-right:hover span {left: auto; right: 20px} #fancybox-left:hover span {left: 20px} #fancybox-left {left: 0px} #fancybox-right {right: 0px} #fancybox-left-ico, #fancybox-right-ico {display: block; position: absolute; left: -9999px; top: 50%; height: 30px; width: 30px; margin-top: -15px; cursor: pointer; z-index: 1102;} #fancybox-left-ico {background-image: url('/js/libs/fancybox/fancybox.png'); background-position: -40px -30px;} #fancybox-right-ico {background-image: url('/js/libs/fancybox/fancybox.png'); background-position: -40px -60px;} .fancybox-bg {position: absolute; height: 20px; width: 20px; margin: 0; padding: 0; border: 0; z-index: 1001;} #fancybox-bg-n {left: 0; top: -20px; width: 100%; background-image: url('/js/libs/fancybox/fancybox-x.png')} #fancybox-bg-ne {right: -20px; top: -20px; background-image: url('/js/libs/fancybox/fancybox.png'); background-position: -40px -162px;} #fancybox-bg-e {right: -20px; top: 0; height: 100%; background-image: url('/js/libs/fancybox/fancybox-y.png'); background-position: -20px 0px;} #fancybox-bg-se {bottom: -20px; right: -20px; background-image: url('/js/libs/fancybox/fancybox.png'); background-position: -40px -182px;} #fancybox-bg-s {bottom: -20px; left: 0; width: 100%; background-image: url('/js/libs/fancybox/fancybox-x.png'); background-position: 0px -20px;} #fancybox-bg-sw {bottom: -20px; left: -20px; background-image: url('/js/libs/fancybox/fancybox.png'); background-position: -40px -142px;} #fancybox-bg-w {left: -20px; top: 0; height: 100%; background-image: url('/js/libs/fancybox/fancybox-y.png')} #fancybox-bg-nw {left: -20px; top: -20px; background-image: url('/js/libs/fancybox/fancybox.png'); background-position: -40px -122px;} #fancybox-title {font-size: 12px; font-family: Helvetica; z-index: 1102;} .fancybox-title-inside {position: relative; padding-bottom: 10px; color: #333; text-align: center; background: #fff} .fancybox-title-outside {padding-top: 10px; color: #fff} .fancybox-title-over {position: absolute; bottom: 0; left: 0; color: #FFF; text-align: left} #fancybox-title-over {display: block; padding: 10px; background-image: url('/js/libs/fancybox/fancy_title_over.png')} .fancybox-title-float {position: absolute; bottom: -20px; left: 0; height: 32px} #fancybox-title-float-wrap {width: auto; border: none; border-collapse: collapse;} #fancybox-title-float-wrap td {border: none; white-space: nowrap;} #fancybox-title-float-left {padding: 0 0 0 15px; background: url('/js/libs/fancybox/fancybox.png') -40px -90px no-repeat} #fancybox-title-float-main {padding: 0 0 3px 0; color: #FFF; font-weight: bold; background: url('/js/libs/fancybox/fancybox-x.png') 0px -40px; line-height: 29px;} #fancybox-title-float-right {padding: 0 0 0 15px; background: url('/js/libs/fancybox/fancybox.png') -55px -90px no-repeat} /* IE6 */ .fancybox-ie6 #fancybox-close {background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_close.png', sizingMethod='scale');} .fancybox-ie6 #fancybox-left-ico {background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_nav_left.png', sizingMethod='scale');} .fancybox-ie6 #fancybox-right-ico {background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_nav_right.png', sizingMethod='scale');} .fancybox-ie6 #fancybox-title-over {background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1;} .fancybox-ie6 #fancybox-title-float-left {background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_title_left.png', sizingMethod='scale');} .fancybox-ie6 #fancybox-title-float-main {background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_title_main.png', sizingMethod='scale');} .fancybox-ie6 #fancybox-title-float-right {background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_title_right.png', sizingMethod='scale');} .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {height: expression(this.parentNode.clientHeight + "px")} #fancybox-loading.fancybox-ie6 {position: absolute; top: expression( (-20 + (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop )) + 'px'); margin-top: 0} #fancybox-loading.fancybox-ie6 div {background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_loading.png', sizingMethod='scale');} /* IE6, IE7, IE8 */ .fancybox-ie .fancybox-bg {background: transparent !important} .fancybox-ie #fancybox-bg-n {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_shadow_n.png', sizingMethod='scale')} .fancybox-ie #fancybox-bg-ne {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_shadow_ne.png', sizingMethod='scale')} .fancybox-ie #fancybox-bg-e {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_shadow_e.png', sizingMethod='scale')} .fancybox-ie #fancybox-bg-se {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_shadow_se.png', sizingMethod='scale')} .fancybox-ie #fancybox-bg-s {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_shadow_s.png', sizingMethod='scale')} .fancybox-ie #fancybox-bg-sw {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_shadow_sw.png', sizingMethod='scale')} .fancybox-ie #fancybox-bg-w {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_shadow_w.png', sizingMethod='scale')} .fancybox-ie #fancybox-bg-nw {filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/libs/fancybox/fancy_shadow_nw.png', sizingMethod='scale')} /****************************************/ /* PROTOTYPE LIGHTBOX (LIGHTBOX2) STYLES /****************************************/ #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } /* There should be little need for editing content below this line ===================================================================================================================================*/ /* Media queries for responsive design - These follow after primary styles so they will successfully override. */ @media all and (orientation:portrait) {/* Style adjustments for portrait mode goes here */} @media all and (orientation:landscape) {/* Style adjustments for landscape mode goes here */} /* print styles - inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/ */ @media print {* {background: transparent !important; color: #444 !important; text-shadow: none !important;} a, a:visited {color: #444 !important; text-decoration: underline;} a:after {content: " (" attr(href) ")";} abbr:after {content: " (" attr(title) ")";} .ir a:after {content: "";} /* Don't show links for images */ pre, blockquote {border: 1px solid #999; page-break-inside: avoid;} thead {display: table-header-group;} /* css-discuss.incutio.com/wiki/Printing_Tables */ tr, /*(this was causing an ie6/7 issue where the href was displaying in the anchors - ie7.js)img {page-break-inside: avoid;} @page {margin: 0.5cm;} p,*/ h2, h3 {orphans: 3; widows: 3;} h2, h3 {page-break-after: avoid;}}