.clearfix() { overflow:hidden; zoom:1; } .clear() { clear: both; } .border_radius(@radius:4px) { -webkit-border-radius:@radius; -moz-border-radius:@radius; border-radius:@radius; } .border_radius_right(@radius:4px) { -webkit-border-top-right-radius: @radius; -webkit-border-bottom-right-radius: @radius; -moz-border-radius-topright: @radius; -moz-border-radius-bottomright: @radius; border-top-right-radius: @radius; border-bottom-right-radius: @radius; } .border_radius_left(@radius:4px) { -webkit-border-top-left-radius: @radius; -webkit-border-bottom-left-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-bottomleft: @radius; border-top-left-radius: @radius; border-bottom-left-radius: @radius; } .border_radius_bottom(@radius:4px) { -webkit-border-bottom-left-radius: @radius; -webkit-border-bottom-right-radius: @radius; -moz-border-radius-bottomleft: @radius; -moz-border-radius-bottomright: @radius; border-bottom-left-radius: @radius; border-bottom-right-radius: @radius; } .border_radius_top(@radius:4px) { -webkit-border-top-left-radius: @radius; -webkit-border-top-right-radius: @radius; -moz-border-radius-topleft: @radius; -moz-border-radius-topright: @radius; border-top-left-radius: @radius; border-top-right-radius: @radius; } .box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_in:3px, @shadow_color:#888) { box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color; -webkit-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color; -moz-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color; } .inset_box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_in:3px, @shadow_color:#888) { box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color; -webkit-box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color; -moz-box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color; } .text_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_color:#fff) { text-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color; } .vertical_gradient(@from: #000, @to: #FFF) { background: @from; background: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); background: -webkit-linear-gradient(@from, @to); background: -moz-linear-gradient(center top, @from 0%, @to 100%); background: -moz-gradient(center top, @from 0%, @to 100%); } .transition(@selector:all, @animation:ease-in-out, @duration:.2s) { -webkit-transition:@selector @animation @duration; -moz-transition:@selector @animation @duration; -o-transition:@selector @animation @duration; transition:@selector @animation @duration; } /* Global/Helpers/Clears */ .clear { clear: both; } .nobr { white-space: nowrap; } .info { background: #F7F5C6; padding:10px 20px; border:1px solid #EEEAC1; color:#747165; .inset_box_shadow(0, 0, 0, 1px, #FFFFCC); a { color:#93864E; } } div.jigoshop_error, div.jigoshop_message { border: 1px solid; margin: 10px 0px; padding:10px 10px 10px 32px; background-repeat: no-repeat; background-position: 10px center; a.button { margin-top:0; float: right; } } div.jigoshop_error { color: #D8000C; background-color: #ffd4d4; background-image: url('../images/error.gif'); } div.jigoshop_message { color: #4F8A10; background-color: #DFF2BF; background-image:url('../images/success.gif'); } p small { color: #999; } p.demo_store { position: fixed; top:0; width: 100%; font-size: 12px; text-align: center; .vertical_gradient(#F7F5C6, #EEEAC1); padding:8px 0; border:1px solid #EEEAC1; color:#747165; z-index: 999999; .inset_box_shadow(0, 0, 0, 3px, rgba(255,255,255,0.3)); } small.note { display: block; color: #999; font-size: 11px; line-height: 21px; margin-top: 10px; } #breadcrumb { overflow: hidden; zoom: 1; margin: 0 0 1em !important; padding: 0; font-size: 0.92em; color: #999 !important; a { color: #999 !important; } } /* =Product Page -------------------------------------------------------------- */ div.product { position: relative; .product_title { clear: none; } p.price { color: green; font-size: 1.3em; del { font-size: 14px; color: #ccc; } } p.stock { font-size: 0.92em; float: left; padding: 2px 0 0 0; } div.images { float: left; width: 314px; margin-bottom: 10px; img { border: 1px solid #ddd; background: #f5f5f5; padding: 6px; display: block; } div.thumbnails { padding-top: 10px; .clearfix; a { margin-right: 10px; margin-bottom: 10px; float: left; img { padding: 3px; } } a.last { margin-right: 0; } a.first { clear: both; } } } div.summary { float: right; width: 300px; } div.social { text-align: right; margin: 0 0 1em; span { margin: 0 0 0 2px; span { margin: 0; } .stButton .chicklets { padding-left: 16px; width: 0; } } iframe { float: left; margin-top: 3px; } } #tabs { clear: both; padding: 1em 0 0 0; margin: 0 0 1em 0; ul.tabs { .border_radius_top(3px); background: #ddd; overflow: hidden; zoom: 1; margin: 0 !important; padding: 4px 4px 0; list-style: none outside !important; li { float: left; margin: 0 4px 0 0; font-size: 0.92em; } a { float: left; padding: 6px 12px; background: #eee; text-decoration: none; .border_radius_top(2px); } li.active a { background: #fff; color: #555; } } .panel { border: 1px solid #ddd; border-top: 0; padding: 15px 15px 0; .border_radius_bottom(3px); } } } .stock { color: green; float: left; } .out-of-stock { color: red; } p.cart { float: right; } form.cart { margin-bottom: 24px; float: right; width: 300px; div.quantity { float: left; margin: 0 4px 0 0; } table { font-size: 12px; border-width: 0 0 1px 0 !important; td { padding: 4px 4px 4px 0 !important; } div.quantity { float: none; margin: 0; width: 72px; } small.stock { display: block; float: none; } } .variations { label { font-weight: bold; } select { width: 100%; float: left; } } .button { vertical-align: middle; float: left; margin: 2px 0 !important; } } span.onsale { background: green; color: #fff; min-height: 32px; min-width: 32px; padding: 4px; font-size: 12px; position: absolute; text-align: center; line-height: 32px; top:0; right: 320px; margin: -6px 0 0 0; .border_radius(20px); } .products ul, ul.products { margin: 0 0 14px !important; padding: 0 !important; list-style: none; float: left; } .products { clear: both; li { float: left; margin: 0 10px 20px 0; padding: 0 !important; position: relative; width:150px; .onsale { top: 0; right: 0; left: auto; margin: -6px -6px 0 0; } a { text-decoration: none; } a img { width: 150px !important; height: 150px !important; display: block; margin: 0 0 8px !important; border: 1px solid #ddd; } a:hover img { border: 1px solid #bbb; } strong { color: #555; display: block; } .price { color: green; display: block; font-weight: normal; float: right; text-align: right; del { font-size: 10px; line-height: 10px; margin: -2px 0 0 0; display: block; color: #ccc; } .from { font-size: 10px; line-height: 10px; margin: -2px 0 0 0; display: block; color: #ccc; } } } li.first { clear: both; } li.last { margin-right: 0; } } table.shop_attributes { border: 0 !important; border-top: 1px dotted #ccc !important; th { width: 150px; font-weight: bold; padding: 8px; color: black !important; border-bottom: 1px dotted #ccc; margin: 0 !important; line-height: 1.5em; } td { font-style: italic; padding: 0 !important; border-bottom: 1px dotted #ccc; margin: 0 !important; line-height: 1.5em; p { margin: 0 !important; padding: 8px; } } .alt td, .alt th { background: #f9f9f9; } } /* =Buttons -------------------------------------------------------------- */ a.button, button.button, input.button, #review_form #submit { color: #fff !important; background: #ff9c07; padding: 6px; line-height: 1em !important; margin: 4px 2px 0 0; float: left; font-size: 12px !important; width: auto !important; vertical-align: middle !important; text-align: center; text-decoration: none; border:none; cursor: pointer; font-family: inherit; .border_radius(3px); } a.button:hover, button.button:hover, input.button:hover, #review_form #submit:hover { background: #ff9933; text-decoration: none; } .cart .button, .cart input.button { float:none; } .button-alt { color: #fff !important; background: #069bcd; padding: 6px; line-height: 1em !important; margin: 4px 2px 0 0; float: left; font-size: 12px !important; width: auto !important; vertical-align: middle !important; text-align: center; text-decoration: none; border:none; cursor: pointer; font-family: inherit; .border_radius(3px); } .button-alt:hover { background:#0588b5; } #reviews { h2 small { float: right; color: #999; font-size: 15px; line-height: 21px; margin: 10px 0 0 0; a { text-decoration: none; color: #999; } } h3 { margin: 0; } #respond { margin: 0; border: 0; padding: 0; } #comment { height: 75px; } #comments { .add_review { overflow: hidden; zoom: 1; } h2 { clear: none; } ol.commentlist { overflow: hidden; zoom: 1; margin: 0 !important; li { padding: 00; margin: 0 0 20px; border: 0; position: relative; .meta { color: #999; font-size: 0.75em; } img { float: left; position: absolute; top: 0; left: 0; padding: 3px; width:32px; height: auto; border: 1px solid #ddd; background: #fff; margin: 0; line-height: 1; } .comment-text { margin: 0 0 0 50px; border: 1px solid #ddd; .border_radius(5px); padding: 11px 11px 0; p { margin: 0 0 11px; } p.meta { font-size: 0.86em; } } } } } } .star-rating { float: right; width: 80px; height: 16px; background: url(../images/star.png) repeat-x left 0; span { background: url(../images/star.png) repeat-x left -32px; height: 0; padding-top: 16px; overflow: hidden; float: left; } } .hreview-aggregate { .star-rating { margin: 10px 0 0 0; } } #review_form { #respond { .clearfix(); border: 1px solid #E7E7E7; margin: 0 !important; padding: 10px 20px 20px; p { margin: 0 0 10px !important; } } } p.stars { overflow: hidden; zoom: 1; span { width: 80px; height: 16px; position: relative; float: left; background: url(../images/star.png) repeat-x left 0; a { float: left; position: absolute; left: 0; top: 0; width: 16px; height: 0; padding-top: 16px; overflow: hidden; } a:hover, a:focus { background: url(../images/star.png) repeat-x left -16px; } a.active { background: url(../images/star.png) repeat-x left -32px; } a.star-1 { width: 16px; z-index: 10; } a.star-2 { width: 32px; z-index: 9; } a.star-3 { width: 48px; z-index: 8; } a.star-4 { width: 64px; z-index: 7; } a.star-5 { width: 80px; z-index: 6; } } } /* =Tables -------------------------------------------------------------- */ table.shop_table { border: 1px solid #E7E7E7; margin: 0px -1px 24px 0px; text-align: left; width: 100%; border-collapse: separate; .border_radius(5px); th { color: #888; font-size: 12px; font-weight: bold; line-height: 18px; padding: 9px 12px !important; } td { border-top: 1px solid #E7E7E7; padding: 6px 12px !important; vertical-align: middle; a.button { margin:0 3px; } } tfoot td { font-weight: bold; } } table.my_account_orders { font-size: 0.85em; th, td { padding: 4px 8px !important; vertical-align: top; } .button { white-space: nowrap; margin: 4px 0; } } /* =Cart Sidebar -------------------------------------------------------------- */ ul.cart_list, ul.product_list_widget { list-style: none outside !important; padding: 0 !important; margin: 0 !important; li { padding: 4px 0 !important; margin: 0 !important; .clearfix; a { display: block; font-weight: bold; } img { float: left; margin-right: 4px; border: 1px solid #ddd; } } } .widget_shopping_cart { .total { border-top: 3px double #ddd; padding: 4px 0 0; margin: 0 !important; strong { min-width: 40px; display: inline-block; } } .buttons { .clearfix; } } /* =Cart -------------------------------------------------------------- */ a.remove { display: block; height:16px; width:16px; text-indent: -9999px; background: url(../images/remove.png) #ccc; } a.remove:hover { background-color: #f93; } .cart th, .cart td { vertical-align: middle; } td.actions { text-align: right; .coupon { float:left; label { display: none; } .input-text { width:80px !important; float: left; margin: 1px 6px 0 0 !important; } } .button-alt { float: right; margin:2px 0 0 6px; } } td.product-name { dl.variation { margin: 0; dt { font-weight: bold; display: inline; margin: 0 4px 0 0; padding: 0; } dd { display: inline; margin: 0 12px 0 0; padding: 0; } } } td.quantity { min-width: 80px; } .quantity input { margin-left:0; margin-right:0; } .quantity input.qty { border:1px solid #ccc; width:20px; display: inline; padding:1px 5px 2px; line-height: 1em !important; vertical-align: middle; } .quantity input.plus, .quantity input.minus { background: #ccc; padding: 4px; vertical-align: middle; line-height: 1em !important; border:none; width:20px; color:#fff !important; cursor: pointer; } .quantity input.minus { .border_radius_left(5px); } .quantity input.plus { .border_radius_right(5px); } .quantity input.minus:hover, .quantity input.plus:hover { background: #f93; } .cart input { width:100px; margin: 0 !important; vertical-align: middle; line-height: 1em !important; } .col2-set { .clearfix; width:100%; .col-1 { float: left; width:48%; } .col-2 { float: right; width:48%; } } .cart-collaterals { .clearfix; width:100%; .related { width:310px; float: left; } .cross-sells { width:314px; float: left; } .shipping_calculator { float: right; width:225px; clear: right; text-align: right; .clearfix; margin: 20px 0 0 0; .button { width: 225px !important; float: none !important; display: block; } .col2-set { .col-1, .col-2 { width:47%; } } } .cart_totals { float: right; width:225px; text-align: right; p { margin: 0 !important; } table { border-collapse: separate; .border_radius(5px); margin:0 0 6px !important; padding: 0; tr:first-child { th, td { border-top: 0 !important; } } td, th { padding: 6px 12px !important; } small { display: block; color: #999; } } .discount td { color: green; } tr td, tr th { border-top: 1px solid #E7E7E7; padding: 6px 24px; } a.button-alt { width: 193px; display: block; font-size: 0.92em; } } } /* =Forms -------------------------------------------------------------- */ .form-row { .clearfix; padding: 3px; margin: 0 0 6px !important; label { display: block; } label.hidden { visibility: hidden; } select { width: 100%; cursor: pointer; margin: 0 !important; } .required { color:#c00; font-weight: bold; } .input-checkbox { display: inline; margin: -2px 8px 0 0; text-align: center; vertical-align: middle; } label.checkbox { display: inline; } } form, #content { .form-row { /*display: block; padding: 1px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; width: 100%; border: 1px solid #ccc; outline: 3px solid #f5f5f5; background: #fff;*/ input.input-text, textarea { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; .inset_box_shadow(0, 1px, 4px, 0, rgba(0,0,0,0.1)); border: 1px solid #ccc; width: 100%; padding: 6px; margin: 0; outline: 0; background: #fff none; font-size: 14px; line-height: 1em; } textarea { height: 3.5em; line-height: 1.5em; display: block; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; } input.input-text:focus, textarea:focus { .inset_box_shadow(0, 0, 0, 3px, #faf9dc); } } } .form-row-first, .form-row-last { float: left; width: 47%; overflow: visible; } .form-row-last { float: right; } /* =Checkout -------------------------------------------------------------- */ form.login { border: 1px solid #ccc; padding: 20px; border: 1px solid #E7E7E7; margin: 20px 0 20px 0px; text-align: left; .border_radius(5px); } #payment { background: #F9F9F9; .border_radius(5px); ul.payment_methods { .clearfix; text-align: left; padding: 1em; border-bottom: 1px solid #eee; margin: 0 !important; list-style: none outside; li { line-height: 2em; text-align: left; margin: 0 !important; font-weight: normal; input { margin: 0 1em 0 0 !important; } img { vertical-align: middle; margin: -2px 0 0 .5em; position: relative; } } } div.form-row { padding: 1em; border-top: 1px solid #fff; } #place_order { float: right; margin: 0; } .terms { padding: 0 1em 0 !important; text-align: right; } div.payment_box { position:relative; width: 96%; background: #f5f5f5; border: 1px solid #eee; .inset_box_shadow(0, 1px, 1px, rgba(255,255,255,0.5)); padding: 1em 2% 0; margin: 1em 0 1em 0; font-size: 0.92em; #cc-expire-month, #cc-expire-year { width: 48%; float: left; } #cc-expire-year { float: right; } span.help { font-size: 11px; color: #999; line-height: 13px; font-weight: normal; } p, .form-row { margin: 0 0 1em; } } div.payment_box:after { content: ""; display: block; border: 8px solid #eee; /* arrow size / color */ border-right-color: transparent; border-left-color: transparent; border-top-color: transparent; position: absolute; top: -4px; left: 0; margin: -1em 0 0 2em; } } div.shipping-address { padding: 0; clear: left; } #shiptobilling { float: right; line-height: 1.62em !important; margin: 0 0 0 0 !important; padding:0; label { font-size:0.6875em; } } .checkout { .col-2 { h3 { float: left; clear: none; } .notes { clear:left; } .form-row-first { clear: left; } } } /* =Order Page -------------------------------------------------------------- */ .order_details { overflow: hidden; zoom:1; margin:0 0 1.5em; list-style: none; li { float: left; margin-right:2em; text-transform: uppercase; font-size:0.715em; line-height: 1em; border-right:1px dashed #ccc; padding-right:2em; strong { display: block; font-size:1.4em; text-transform: none; line-height: 1.5em; color: #333; } } li.method { border:none; } } /* =Account -------------------------------------------------------------- */ .addresses { .title { overflow: hidden; zoom:1; h3 { float: left; } .edit { float: right; } } } /* =Layered Nav Widgets -------------------------------------------------------------- */ .widget_price_filter { .price_slider_wrapper { .button { float: right; margin: 0 !important; } .price_slider { margin: 1em .6em .6em; .ui-slider-handle { outline: 0 !important; } } .price_slider_amount { overflow: hidden; line-height: 2em; } } } .widget_layered_nav ul { margin: 0 !important; padding: 0 !important; border: 0 !important; list-style: none outside !important; li { overflow: hidden; zoom: 1; padding: 0 0 1px; a, span { padding: 1px 0; float: left; } } li.chosen { a { padding: 0 6px 0 18px; border: 1px solid #3399cc; background: #3399cc url(../images/cross_white.png) no-repeat 6px center; .inset_box_shadow(0, 1px, 1px, rgba(255,255,255,0.5)); color: #fff; .border_radius(3px); } } small.count { float: right; margin-left: 6px; font-size: 1em; padding: 1px 0; color: #999; } }