/* Reset %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ * { margin:0; padding:0; } html { font-size:16px; /* Fix for Opera */ } body { font:75%/150% Arial, Helvetica, sans-serif; background-color:#fff; color:#333; text-align:center; } img { border:0; vertical-align:top; max-width:100%; } a { color:#888; text-decoration:none; } a:hover { text-decoration:none; color:#ca0413; } :focus { outline:0; } h1 { font-family: "TrendHMSlabOne", Arial, Helvetica, sans-serif; font-size: 36px; line-height: 38px; color: #414559; } h2 { font-family: "TrendHMSansOne-Italic",Arial, Helvetica, sans-serif; font-size: 30px; line-height: 34px; color:#414559; } h3 { font-family: "TrendHMSansOne",Arial, Helvetica, sans-serif; font-size: 18px; line-height: 22px; color: #8f8083; } h4 { margin: 0px 0px 10px; font-weight: normal;color:#000; } h4 { font-size: 1.6666em; line-height: 1.25em; } h4.heading { margin: 0px 0px 10px; font-size:18px;font-weight:400; color:#ffffff; } ul, ol { list-style: none; } .right { float: right !important; } h4 { font-size:1.3333em; line-height:1.25em /*16px, 20px*/ } h5 { font-size:1.1666em; line-height:1.1428em; /*14px, 16px*/ } h6 { font-size:1em; } /* Forms */ form { display:inline; } fieldset { border:0; } legend { display:none; } /* Table */ table { border:0; border-collapse:collapse; border-spacing:0; empty-cells:show; font-size:100%; } caption,th,td { vertical-align:top; text-align:left; font-weight:normal; } /* Content */ strong { font-weight:bold; } address { font-style:normal; } cite { font-style:normal; } q, blockquote { quotes:none; } q:before, q:after { content:''; } small,big { font-size:1em; } sup { font-size:1em; vertical-align:top; } /* Lists */ ul,ol { list-style:none; } /* Tools */ .right { float:right !important; } .hidden-above-1280 { display:block; } .subcat { border : #ccc solid 1px; background-color: #ffffff; -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); box-shadow: 5px 5px 5px #888888; } .main-container { background-repeat:repeat; background-position:center top; } .main { padding:0; padding:40px 0; min-height:370px; } /* Decrease padding on home page */ /* Base Columns */ .col-main { float:left; } /* 1 Column Layout */ .col1-layout .col-main { } /* Form Elements %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ input, select, textarea, button { font:12px/15px Arial, Helvetica, sans-serif; vertical-align:middle; } input.input-text, select, textarea { background:#fff; border:1px solid #ddd; } input.input-text, textarea { padding:7px 2px; } .input-search {padding:7px 2px; background:#fff; border:1px solid #ddd; background-image: url(../icons/search.png); background-repeat:no-repeat; } select { padding:6px 6px 6px 2px; } textarea { overflow:auto; } .input-search:focus { background-image: none; -webkit-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } /* style the placeholder*/ /* Place Holder CSS */ ::-webkit-input-placeholder { color: #000; opacity: 0.35; -webkit-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } :-moz-placeholder { color: #000; opacity: 0.35; -moz-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } ::-moz-placeholder { color: #000; opacity: 0.35; -moz-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } :-ms-input-placeholder { color: #000; opacity: 0.35; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } /* Place Holder CSS for Focus*/ :hover::-webkit-input-placeholder { opacity: 0.75; -webkit-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } :hover:-moz-placeholder { opacity: 0.75; -moz-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } :hover::-moz-placeholder { opacity: 0.75; -moz-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } :hover:-ms-input-placeholder { opacity: 0.75; -ms-transition: opacity 2s ease-in-out; transition: opacity 2s ease-in-out; } /* Place Holder CSS for Focus */ :focus::-webkit-input-placeholder { opacity: 0; -webkit-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } :focus:-moz-placeholder { opacity: 0; -moz-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } :focus::-moz-placeholder { opacity: 0; -moz-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } :focus:-ms-input-placeholder { opacity: 0; -ms-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } /* Misc Styles */ /* end of placeholder*/ input.input-text:hover, select:hover, textarea:hover { border-color:#999; } input.input-text:focus, select:focus, textarea:focus { border-color:#000; outline:none; /*-moz-box-shadow:inset 0 0 4px rgba(0, 0, 0, 0.2); -webkit-box-shadow:inset 0 0 4px rgba(0, 0, 0, 0.2); box-shadow:inset 0 0 4px rgba(0, 0, 0, 0.2);*/ } input.input-text:disabled, select:disabled, textarea:disabled {} /* Buttons %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ button.button::-moz-focus-inner { padding:0; border:0; } /* FF Fix */ button.button { -webkit-border-fit:lines; /* <- Safari & Google Chrome Fix */ overflow:visible; width:auto; border:0; padding:0; margin:0; background:transparent; cursor:pointer; } button.button span { float:left; display:block; padding:0; font-size:12px; text-align:center; white-space:nowrap; background-color:#ddd; color:#333; transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; -o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out; } button.button:hover span { background-color:#333; color:#fff; } button.button span span { padding:0 25px; height:45px; line-height:45px; } /* Smaller button - for inline display with input boxes -------------------------------------------------------------- */ button.button.btn-inline span span { padding:0 10px; line-height:32px; height:32px; } /* Big button: Add to cart (product view) & Proceed to checkout -------------------------------------------------------------- */ /*.product-view .btn-cart span, button.btn-checkout span {}*/ /* Add to cart only */ /* Add to cart - all */ /*button.button.btn-cart span {} button.button.btn-cart:hover span {}*/ /* Form %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Form Highlight */ /*input.input-text:focus,select:focus,textarea:focus {}*/ /*.highlight { background:#efefef; }*/ /* Orders and Returns form -------------------------------------------------------------- */ /* Buttons set -------------------------------------------------------------- */ /* Fieldset -------------------------------------------------------------- */ /* Common styles for fieldsets and blocks in Multiple Addresses Checkout and Generic Info Set */ /* Form Validation -------------------------------------------------------------- */ /* Required */ /* Expiration date and CVV number validation fix */ /* Global Messages %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* BreadCrumbs %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Breadcrumbs on product page */ /* Page Heading %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .page-title { padding:0; margin:0 0 15px; } .page-title h1 { margin:0; min-height:1.3125em; /* 42px. Has to ba aligned with ".block .block-title" */ } /* Buttons - adjust the height of heading buttons in customer account (needed for the Address Book) */ /* Toolbar: pager and sorter %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Sorter -------------------------------------------------------------- */ /* View mode */ /*.sorter .view-mode .grid { background-position:0 -277px; } .sorter .view-mode .list { background-position:-30px -277px; margin-left:-5px; } .sorter .view-mode a.grid:hover { background-position:0 -307px; } .sorter .view-mode a.list:hover { background-position:-30px -307px; }*/ /* Currently selected mode icon */ /*.sorter .view-mode span.grid, .sorter .view-mode span.list {}*/ /* Sort by */ /* Pager -------------------------------------------------------------- */ /*Deprecated:*/ /*.pager .pages li a.previous { background-position:0px -55px; } .pager .pages li:hover a.previous {} .pager .pages li a.next { background-position:-30px -55px; } .pager .pages li:hover a.next {}*/ /* Toolbar. Pager and sorter inside toolbar -------------------------------------------------------------- */ /* Pager inside toolbar - align center */ /* Bottom toolbar */ /* Common styles for toolbar elements -------------------------------------------------------------- */ /* Size */ /* Amount */ /* Limiter */ /* All elements - vertical spacing */ /* Data Table %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /*TODO:needed?*/ /* Additional classes for mobile devices -------------------------------------------------------------- */ /* Cell title */ /* Shopping cart total summary row expandable to details %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Shopping cart tax info %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Misc %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Global site notices -------------------------------------------------------------- */ /* Cookie Notice */ /* Noscript Notice */ /* Demo Notice */ /* Buttons remove/close and edit %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Common styles for buttons -------------------------------------------------------------- */ /* Button edit -------------------------------------------------------------- */ /* Class: std %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Styles for admin-controlled content */ .std p { margin:0 0 1em; padding:0; } /* Lists %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Unordered lists -------------------------------------------------------------- */ /* Common basic styling */ /* Disc */ /* Bullet */ /* Different bullets. IMPORTANT: use together with class "bullet" */ /* No bullets */ /*.std ul.no-bullets { list-style:none outside none; padding-left:0; } .std ul.no-bullets li { background-image:none; padding-left:0; }*/ /* Separator */ /* Nested unordered lists -------------------------------------------------------------- */ /* Ordered lists -------------------------------------------------------------- */ /* Misc %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Override std styles for selected elements %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .std .products-grid p { margin-bottom:0; } /* Header %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Header %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Basic header sections -------------------------------------------------------------- */ /* Misc header elements -------------------------------------------------------------- */ /* Header top %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Logo %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* User menu, top links %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Set floating because there can be more than one list of links. */ /* Quick search %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /*.header-top-search-wrapper .advanced-search-link { display:none; position:absolute; } .header-top-search-wrapper:hover .advanced-search-link { display:block; }*/ .header .form-search .input-text::-ms-clear { display:none; } /* Search autocomplete */ /* Mini-cart %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Mini-cart Heading -------------------------------------------------------------- */ /* Fix icon positioning */ /* Mini-cart content -------------------------------------------------------------- */ /* Mini-cart on hover -------------------------------------------------------------- */ /* TODO #mini-cart:hover .block-content { display:block; } #mini-cart.hover:hover .block-content { display:none; }*/ /*Override (remove) default :hover behavior, if JS is enabled*/ /* Block: Recently Compared (dropdown) %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Block on hover -------------------------------------------------------------- */ /* Sidebar %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Blocks %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Mini Products List %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Common styling for mini list and cross-sell list */ /* Block: Account %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Block: Layered Navigation %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* List of filters */ /* Current filters */ /* List items */ /* Block: Wishlist %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Block: Related %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Ccommon styles for all types of the block */ /* Block: Related. Single product slider -------------------------------------------------------------- */ /* Block: Related. Simple thumbnails slider -------------------------------------------------------------- */ /* Block: Compare Products %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Cover background applied on tr hover */ /* Changes after setting text-align:left */ /* Block: Recently Viewed %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Block: Recently Compared %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Block: Poll %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Block: Tags %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Block: Subscribe %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Block: Reorder %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Block: Banner %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Block: Login %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Paypal -------------------------------------------------------------- */ /* Block: vertical main menu %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Category view %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Negative top margin: to cover bottom border of the category title */ /* Common styles for products on product listings %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .products-grid .product-name, h3.product-name { /* Sizes are modified for different number of columns */ font-size:1.3333em; line-height:1.25em; /*16px 20px*/ } /* Common styles for View Types: List & Grid %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* View Type: List %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Hover effect */ /* View Type: Grid %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Products grid: basic styles (common for all types of product grids) -------------------------------------------------------------- */ .products-grid {} .products-grid .item { padding-top:20px; padding-bottom:20px; position:relative; /* For labels positionning (e.g. "new" and "sale") */ } .products-grid .product-name { margin:15px 0 0; } .products-grid .product-image-wrapper { position:relative; margin:0 auto; } .products-grid .product-image { display:block; /*text-align:center;*/ } .products-grid .price-box { margin:5px 0 15px; font-size:1em; } .products-grid .actions { margin:15px 0 0; vertical-align:bottom; } .products-grid .btn-cart { margin-right:10px; vertical-align:bottom; } .products-grid .add-to-links { margin:15px 0 0; } /* Items of equal height - buttons and links displayed at the bottom of item -------------------------------------------------------------- */ /* Remove equal height */ /* Visibility of the grid item elements -------------------------------------------------------------- */ /* Fade-in on hover */ .products-grid .item .visible-onhover { visibility:hidden; opacity:0; transition: visibility 0s ease-in-out 600ms, opacity 300ms ease-in-out 300ms; -moz-transition: visibility 0s ease-in-out 600ms, opacity 300ms ease-in-out 300ms; -webkit-transition: visibility 0s ease-in-out 600ms, opacity 300ms ease-in-out 300ms; -o-transition: visibility 0s ease-in-out 600ms, opacity 300ms ease-in-out 300ms; } .products-grid .item:hover .visible-onhover { visibility:visible; opacity:1; transition: visibility 0s ease-in-out 0s, opacity 300ms ease-in-out 100ms; -moz-transition: visibility 0s ease-in-out 0s, opacity 300ms ease-in-out 100ms; -webkit-transition: visibility 0s ease-in-out 0s, opacity 300ms ease-in-out 100ms; -o-transition: visibility 0s ease-in-out 0s, opacity 300ms ease-in-out 100ms; } /* Display only on hover */ /* Products grid: in category view -------------------------------------------------------------- */ /* Hover effect */ /* Override itemgrid in category view %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Font sizes -------------------------------------------------------------- */ /* 4 columns */ /* 5 columns */ /* 6, 7, 8 columns */ /* Make button smaller -------------------------------------------------------------- */ /* 5 columns */ /* 6, 7, 8 columns */ /* Product view elements %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Product labels %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Positionning -------------------------------------------------------------- */ .sticker-wrapper { position:absolute; transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -webkit-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; } .sticker-wrapper.top-right { top:-3px; right:-3px; } /* Appearence -------------------------------------------------------------- */ .sticker { width:60px; height:60px; border-radius:50%; font-size:1.1666em; font-weight:bold; text-align:center; display:table-cell; vertical-align:middle; transition: all 150ms ease-in-out; -moz-transition: all 150ms ease-in-out; -webkit-transition: all 150ms ease-in-out; -o-transition: all 150ms ease-in-out; } .sticker.sale { background-color:#F12B63; color:#fff; } /* Effects */ .item:hover .sticker { width:70px; height:70px; } .item:hover .sticker-wrapper.top-right { top:-8px; } .item:hover .sticker-wrapper.top-right { right:-8px; } /* Rating %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Availability %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Availability - with details */ /* Product increments */ /* Alerts %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Product Prices %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .price { white-space:nowrap !important; } .price-box { margin: 0; } .price-box .price { } .price-box .price-label { } /* Common labels */ .old-price .price-label, .special-price .price-label { white-space:nowrap; } .old-price .price-label { display:none; } /* Regular price */ /* Old price */ .old-price { margin:0; } .old-price .price { text-decoration:line-through; } /* Special price */ .special-price { margin:0; padding:0; } .special-price .price, .special-price .price-label { color:#ee001c !important; /* Overide color change on product grid/list */ } /* Minimal price (as low as) */ /* Excluding tax */ /* Including tax */ /* Configured price */ /* FPT */ /* Excl tax (for order tables) */ /* Incl tax (for order tables) */ /* Price range */ /* Price notice next to the options */ /* Price as configured */ /* Tier Prices %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Add-to links %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .add-to-links li { float:left; } /* Add gaps at the right side of links */ /* Add-to links as icons (with no text) -------------------------------------------------------------- */ .addto-icons a.link-wishlist { display:block; padding:0; margin:0; width:27px; height:27px; text-indent:-9999em; overflow:hidden; background:url(../icons/pix.png) no-repeat; background-color:#fff; /*border:1px solid #f5f5f5;*/ } .addto-icons a.link-wishlist:hover { background-color:#fff; } .addto-icons a.link-wishlist { background-position:-27px 0; } .addto-icons a.link-wishlist:hover { background-position:-27px -27px; } /* If displayed in a group: add margin between icons */ /* If displayed on product image */ .add-to-links.addto-onimage { float:right; margin-top:-31px; /* Move up: height (29px) + 2 additional pixels */ position:relative; z-index:1; padding-bottom:4px; /* Use padding to cover the image below icons. */ padding-right:4px; } /* Add-to links as text (with simple icons). Obsolete (will be removed in next version). Uncomment if necessary -------------------------------------------------------------- */ /*.addto-texticons a.link-wishlist, .addto-texticons a.link-compare, .addto-texticons a.email-friend { display:block; padding:2px 0 2px 19px; margin:0 13px 3px 0; line-height:15px; background:url(../icons/icons.png) no-repeat; background-color:transparent !important; width:auto; height:auto; text-indent:0; overflow:visible; border:none; border-radius:0; } .addto-texticons a.link-wishlist { background-position:0 -1px;} .addto-texticons a.link-compare { background-position:0 -40px; } .addto-texticons a.email-friend { background-position:0 -80px;}*/ /* Add to Cart %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Magento's default */ /* Product page %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Basic product page sections -------------------------------------------------------------- */ /* Generic wrapper for product page collaterals */ /* Product images %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Product main column %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Product Secondary Column %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Product main column elements %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Price box inside "Add-to-cart" box */ /*deprecated*/ /* Add-to links */ /*.product-view .add-to-links li { font-size:1.1666em; }*/ /*14px*/ /* Other elements */ /* Grouped product -------------------------------------------------------------- */ /* Align right instead of float right */ /* Downloadable product -------------------------------------------------------------- */ /* Same as "item-options" in cart */ /* Additional information table -------------------------------------------------------------- */ /* Prices. Common for product view and MAP popup. %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Font for all prices on product page and MSRP */ /* Main price (prominent) */ /* Tier price */ /* Old price */ /* MSRP price (only in MSRP box) */ /* Move MSRP links below the price */ /* Special price */ /* Bundle product */ /* Containers for: add-to-cart & product options %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Product type-specific data*/ /* Margin before price box */ /* Upper part of the container */ /* Lower part of the container */ /*.product-view .product-type-data, .container1-wrapper, .container2-wrapper, .product-view .add-to-box {}*/ /* Other elements %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Unordered list in product description */ /* Margin for list in long description */ /* Product options %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Override form colors */ /*bottom*/ /* Grouped Product %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Product collateral blocks %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Hide first h2 heading (which is the same as tab text) */ /* Block: Tags %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Block: Reviews %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Send a Friend %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Content Styles %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .product-name { margin:0; font-weight:normal; } /* Product Tags */ /* Advanced Search */ /* Advanced Search - form */ /* Sitemap */ /* RSS */ /* Shopping Cart %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Checkout Types %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Shopping Cart Table %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Buttons -------------------------------------------------------------- */ /* Shopping Cart Collateral blocks %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Cross-sell %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* -------------------------------------------------------------- */ /* Common styles: Cross-sell, Discount Codes, Estimate Shipping %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Discount Codes (coupons) %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Estimate Shipping %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Shopping Cart Totals %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /*.cart .totals tfoot .price { color:#B31F5A; } */ /* Cart static blocks %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Item Options and Options Tool Tip %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Item options in cart/checkout tables */ /* Options Tool Tip -------------------------------------------------------------- */ /* Checkout %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /********** < Common Checkout Styles */ /* Shipping and Payment methods */ /* Tooltip */ /* Gift Messages */ /* Checkout Agreements */ /* Centinel */ /* Generic Info Set */ /* For more styles see Multiple Addresses Checkout */ /********** Common Checkout Styles > */ /* Other */ /* Common styles for: Multiple Addresses Checkout and Generic Info Set %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Multiple Addresses Checkout %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Styles similar to cart-table */ /* Step 1 */ /* Step 2 */ /* My Account %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Account Login/Create Pages %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Account Login/Create box elements - login page and checkout page */ /* My Account Dashboard %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /********** < Dashboard */ /* General Box */ /* Block: Recent Orders */ /* Block: Account Information */ /* Block: Reviews */ /* Block: Tags */ /********** Dashboard > */ /* Add left padding if icons are displayed in headings */ /*.box-account .box-head h2, .order-items h2, .order-about h2 { padding-left:38px; }*/ /* Address Book %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Order View %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Date */ /* Links in page title */ /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Grand total color */ /* Order Print Pages %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Price Rewrites */ /* My Wishlist %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /*TODO:redundant?*/ /* My Tags %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* My Reviews TODO:deprecated %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Billing Agreements %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Popups %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Remember Me Popup %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /*.remember-me-popup .remember-me-popup-head .remember-me-popup-close { display:block; position:absolute; top:7px; right:7px; height:15px; width:15px; text-indent:-9999em; } .remember-me-popup .remember-me-popup-body a { display:inline-block; height:19px; border:1px solid #de5400; background:#f18200; padding:0 8px; font:bold 12px/19px Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; white-space:nowrap; color:#fff; }*/ /* Additionally remove the button */ /* MAP Popup %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Common styles for: Remember Me Popup and MAP Popup %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Footer %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .footer-container { background-repeat:repeat; background-position:center top; } .footer { width:960px; margin:0 auto; padding:0; text-align:left; } .footer .item-left { float:left; margin-right:20px; } .footer .item-right { float:right; margin-left:20px; } /* Footer elements */ .footer .heading { margin-bottom:0.625em; font-size:1.3333em; font-weight:normal; } /* Footer top %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .footer-top {} /* Footer primary %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .footer-primary {} /* Primary footer additional -------------------------------------------------------------- */ .footer-primary-bottom-spacing { border-top:1px solid; border-color:#eee; border-color:rgba(0,0,0, 0.05); padding-top:20px; padding-bottom:10px; } /* Footer secondary %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .footer-secondary {} /* Footer bottom %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .footer-bottom-container {} .footer-bottom { padding-top:10px; /* To counterbalance the bottom margin of footer elements */ } /* Footer elements %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Newsletter form -------------------------------------------------------------- */ #subscribe-form {} #subscribe-form form { display:block; } #subscribe-form label { float:left; margin:0 5px 0 0; line-height:32px; font-weight:normal; position: relative; } #subscribe-form .input-box { float:left; margin:0 5px 5px 0; position:relative; } #subscribe-form .input-text { float:left; padding:0 7px; width:auto; height:30px; line-height:30px; color:#999; text-overflow:ellipsis; } #subscribe-form .button { float:left; } /* Social services -------------------------------------------------------------- */ .social-links span.icon { margin-bottom:3px; } /* TODO: Obsolete .social-links a { float:left; display:block; margin-right:5px; margin-bottom:5px; overflow:hidden; width:32px; height:32px; border-radius:0; background-color:#999; transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; } .social-links a.last { margin-right:0; } .social-links a:hover { background-color:#333; }*/ /* Other elements -------------------------------------------------------------- */ .footer-copyright { font-size:0.9166em; /*11px*/ line-height:1.3636em; margin-bottom:10px; margin-left:10px; } /* Scroll to top button -------------------------------------------------------------- */ #scroll-to-top { display:none; position:fixed; width:50px; height:50px; bottom:30px; right:30px; z-index:9999; text-indent:-9999px; border-radius:50%; background:url(../icons/sprite.png) -200px -100px no-repeat #e5e5e5; } #scroll-to-top:hover { background-position:-200px -150px; background-color:#333; } /* CMS pages and elements %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* CMS pages %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Home page */ /* 404 not found page */ /* Page banners %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .page-banners {} .page-banners .banner { margin-bottom:2%; } /* Landing pages %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Caption %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Caption position and layout -------------------------------------------------------------- */ /* Width */ /* Floating (text alignment) */ /* Prevent from hiding elements of the caption on narrow screens */ /* Caption elements -------------------------------------------------------------- */ /* Skin -------------------------------------------------------------- */ /* Dark + white text */ /* Dark + white text */ /* Dark + white text */ /* Light + black text */ /* Light + black text */ /* Light + black text */ /* Clears %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Additional simple clearing */ .clearer:after, #nav:after, .main:after, .footer:after, .col-main:after, .page-title:after, .products-grid:after, /* Additional clearing */ .section-title:after { display:block; content:"."; clear:both; font-size:0; line-height:0; height:0; overflow:hidden; } /** * Magento * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE_AFL.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * If you did not receive a copy of the license and are unable to * obtain it through the world-wide-web, please send an email * to license@magentocommerce.com so we can send you a copy immediately. * * DISCLAIMER * * Do not edit or add to this file if you wish to upgrade Magento to newer * versions in the future. If you wish to customize Magento for your * needs please refer to http://www.magentocommerce.com for more information. * * @category design * @package base_default * @copyright Copyright (c) 2012 Magento Inc. (http://www.magentocommerce.com) * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /* Widgets =============================================================================== */ /* Widget: Catalog New Proructs List */ /* Widget: Recently Viewed Proructs */ /* Widget: Recently Compared Proructs */ /* Widget: CMS Static Block */ /* Widgets: Links Common Styles */ /* Widget: Catalog Product Link */ /* Widget: Catalog Category Link */ /* Widget: CMS Page Link */ /* ======================================================================================= */ /* Brands %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* On product page -------------------------------------------------------------- */ /* Brand slider -------------------------------------------------------------- */ .brand-slider {} /* Effects -------------------------------------------------------------- */ .brand-slider .slides a img { transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -webkit-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; max-height:50px; } .brand-slider .slides a:hover img { opacity:0.85; filter:alpha(opacity=85); } /* Brand in secondary column on product page -------------------------------------------------------------- */ /** * Slideshow */ /* Necessary styles -------------------------------------------------------------- */ /* Hide the slides before the JS is loaded. Avoids image jumping */ /* Clearfix for the .slides element */ /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ /* Default style -------------------------------------------------------------- */ /* Slideshow banners -------------------------------------------------------------- */ /* Effects -------------------------------------------------------------- */ /*.slideshow-banners banner a img, .slideshow-banners a.banner img,*/ /*.slideshow-banners banner a:hover img, .slideshow-banners a.banner:hover img,*/ /** * Generic interface elements */ /* Simple directional arrows %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Generic arrows 1 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Default style: small, outside the slider -------------------------------------------------------------- */ .gen-slider-arrows1 .direction-nav li { float:left; } .gen-slider-arrows1 .direction-nav a { display:block; width:30px; height:30px; background-image:url(../icons/slider-arrows.png); background-repeat:no-repeat; background-color:#e5e5e5; cursor:pointer; text-decoration:none; text-indent:-999px; overflow:hidden; transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out; -webkit-transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out; } .gen-slider-arrows1 .direction-nav a:hover { background-color:#333; } .gen-slider-arrows1 .direction-nav a.disabled { opacity:0.4; filter:alpha(opacity=40); cursor:default; } .gen-slider-arrows1 .direction-nav a.disabled:hover { background-color:#e5e5e5; /* Must be the same as default color */ } .gen-slider-arrows1 .direction-nav .prev { background-position:-10px -10px; margin-right:1px; } .gen-slider-arrows1 .direction-nav .prev:hover { background-position:-10px -60px; } .gen-slider-arrows1 .direction-nav .prev.disabled:hover { background-position:-10px -10px; /* Same as default */ } .gen-slider-arrows1 .direction-nav .next { background-position:-60px -10px; } .gen-slider-arrows1 .direction-nav .next:hover { background-position:-60px -60px; } /* Positioning: -------------------------------------------------------------- */ .gen-slider-arrows1-pos-top-right .direction-nav { position:absolute; top:-40px; right:0px; } /* Generic arrows 2 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Default style: large, on slider, split -------------------------------------------------------------- */ /* Style: only background image -------------------------------------------------------------- */ /* Generic arrows 3 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Default style: at the left and the right side of the slider -------------------------------------------------------------- */ /* Style: long (high) buttons -------------------------------------------------------------- */ /* Generic pager %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Default style: -------------------------------------------------------------- */ /* Style: small -------------------------------------------------------------- */ /* Positioning: -------------------------------------------------------------- */ /* Additional pager positioning for slider-arrows1 */ /** * Itemgrid */ /* Itemgrid: different numbers of columns %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Clear every first item in each row (row: group of n items) */ /* Item grid: 1 column */ /* Item grid: 2 columns */ /* Item grid: 3 columns */ /*max-width:233px;*/ /* Item grid: 4 columns */ /*max-width:175px;*/ /* Item grid: 5 columns */ /*max-width:140px;*/ /* Item grid: 6 columns */ /*max-width:116px;*/ /*TODO: was: 14.667%*/ /* Item grid: 7 columns */ /* Item grid: 8 columns */ /*.itemgrid-8col .item { width:10.5%; } .itemgrid-8col .item:nth-child(8n+1) { clear:left; }*/ /* * Accordions and collapsible blocks */ /* Accordion %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Space for openner if item has children. Space has to be a few pixels wider than openner */ /* Opener -------------------------------------------------------------- */ /* Active */ /* Accordion - Style 1 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Padding -------------------------------------------------------------- */ /* Space for openner if item has children. Space has to be a few pixels wider than openner */ /* Misc -------------------------------------------------------------- */ /* Opener -------------------------------------------------------------- */ /* Active */ /* Collapsible %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .collapsible { position:relative; } .collapsible .block-title { padding-top:8px; padding-right:35px; /* Space for opener */ padding-bottom:8px; border-bottom:1px solid #f2f2f2; border-color:rgba(0,0,0, 0.05); margin-bottom:0.625em; /*10px*/ font-size:1.3333em; /*16px*/ line-height:1.25em; /*20px*/ font-weight:normal; } .collapsible .block-content, .collapsible .block-content > * { margin-top:0; /* Prevent animation jumping */ } /* Opener -------------------------------------------------------------- */ .collapsible .opener { position:absolute; right:0; top:2px; display:block; cursor:pointer; width:30px; height:30px; background-color:#f2f2f2; /*IE*/ background-color:rgba(0,0,0, 0.05); background-image:url(icons/opener.png); background-position:center center; background-repeat:no-repeat; /*border-radius:50%;*/ } .collapsible .opener:hover { background-color:#e5e5e5; /*IE*/ background-color:rgba(0,0,0, 0.1); } /* Mobile accordion -------------------------------------------------------------- */ .mobile-collapsible {} /* * Navigation menu */ /* Common styling for main menu (horizontal + mobile vertical + mobile menu trigger) %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* horizontal + mobile menu trigger */ #nav > li > a { font-size:16px; /*1.3333em*/ line-height:49px; /*3.0625em*/ } /* Main menu - vertical (in the sidebar) %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Main menu - mobile vertical (in the header) %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Mobile menu trigger. Shares style with the 1st level links from the default menu -------------------------------------------------------------- */ /* Mobile menu icon */ /* Mobile menu elements -------------------------------------------------------------- */ /* Main menu - horizontal %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ #nav { position:relative; /* Dropdown custom block position is relative to this element */ z-index:2000; } /* Hide on mobile */ /* Show the bottom line and fill in the gap */ /*#nav { border-bottom:5px solid #333; } #nav > li { border-bottom:5px solid transparent; margin-bottom:-5px; }*/ /* All levels -------------------------------------------------------------- */ #nav li { text-align:left; } #nav li a { display:block; text-decoration:none; } #nav li.parent {} #nav li a span { display:block; white-space:nowrap; } /* 1st level only -------------------------------------------------------------- */ #nav > li { float:left; } #nav > li > a { display:block; padding:0 15px; } #nav > li.parent > a { padding-right:20px; background:url(/icon/arrow-dropdown.png) no-repeat 100% center; } /* Drop-down boxes: wide: 2nd-level category drop-down box + custom block drop-down box classic: custom block drop-down box -------------------------------------------------------------- */ #nav .level0-wrapper { left:-10000px; position:absolute; top:49px; width:96%; padding:2%; background-color:#fff; } /*#nav .level0-wrapper { position:absolute; top:49px; background-color:#fff; width:96%; padding:2%; left:0; visibility:hidden; opacity:0; transition: visibility 0s ease-in-out 450ms, opacity 300ms ease-in-out 150ms; -moz-transition: visibility 0s ease-in-out 450ms, opacity 300ms ease-in-out 150ms; -webkit-transition: visibility 0s ease-in-out 450ms, opacity 300ms ease-in-out 150ms; -o-transition: visibility 0s ease-in-out 450ms, opacity 300ms ease-in-out 150ms; } #nav > li:hover .level0-wrapper { visibility:visible; opacity:1; transition-delay:150ms; -moz-transition-delay:150ms; -webkit-transition-delay:150ms; -o-transition-delay:150ms; }*/ /* Additional custom elements in the main menu (horizontal) %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Static blocks displayed as a drop-down in the main menu -------------------------------------------------------------- */ /* Custom menu item */ #nav .nav-custom-link > a { cursor:default; } /* Remove 'relative' positioning from custom 'li' (custom block have to be positioned relative to #nav) */ #nav .nav-custom-link { position:static; } /* Static block's content - basic formatting -------------------------------------------------------------- */ #nav .nav-custom-link .header-nav-dropdown-wrapper { padding-bottom:10px; } #nav .nav-custom-link .header-nav-dropdown-wrapper .heading { margin:10px 0; } /* Home link in the main menu -------------------------------------------------------------- */ /* If enabled, show image home link */ /*#nav-home.nav-home-img {}*/ /* Main selectors */ /* Category labels %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 1st level -------------------------------------------------------------- */ li.level0 > a > span { position:relative; } /* Add pin (only 1st level) */ /* 2nd level -------------------------------------------------------------- */ /* 3rd level -------------------------------------------------------------- */ /* Inside mobile menu / vertical menu -------------------------------------------------------------- */ /* Hide pin */ /* Hide category labels in vertical sidebar menu */ /* ul.vertnav-side li > a > span > .cat-label { display:none !important; } */ /* Category blocks %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Section line (separator) is lighter than other lines -------------------------------------------------------------- */ /** * Wide drop-down menu */ /* 2nd level only -------------------------------------------------------------- */ /* 2nd-level links block: with subcategory title and a list of child categories */ /* 2nd level+ -------------------------------------------------------------- */ #nav ul li { /*float:none;*/ margin-bottom:1px; } #nav ul li a { float:none; } /* 3rd level only -------------------------------------------------------------- */ #nav ul.level1 { position:static; } #nav ul.level1 > li { float:none; background:url(../icons/bullet.png) 3px 6px no-repeat; padding-left:15px; transition: background-position 150ms ease-out; -moz-transition: background-position 150ms ease-out; -webkit-transition: background-position 150ms ease-out; -o-transition: background-position 150ms ease-out; } #nav ul.level1 > li:hover { background-position:6px 6px; } /* 4th level -------------------------------------------------------------- */ /* 4rd level+ -------------------------------------------------------------- */ /** * Infortis Themes */ /* Layout %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Basic layout %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .section-container {} .section { padding:10px 0; } .section-space { padding:10px; } /* Helper classes %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Magento default helper classes -------------------------------------------------------------- */ /* Layout helper classes -------------------------------------------------------------- */ /*deprecated*/ /*deprecated*/ /* Minor components %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Caret %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /** * Theme Content Construction Kit */ /* Layout %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Vertically centered content %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Heading of a content section %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .section-title { clear:both; margin:0; display:block; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #E5E5E5; font-weight: normal; font-size: 2.5em; line-height: 1.2222em;} .section-title.padding-right { padding-right:80px !important; background-color:#414559; color:#fffff4; } /* Vertical links %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .links > li, .links > li > a { line-height:3em; } /* line-height:36px; */ /*2.6666em = 32px;*/ .links > li > a { padding:0 0.5833em; } /* padding:0 7px; */ /* 7px */ /* Basic links, no separators -------------------------------------------------------------- */ .links > li { float:left; } .links > li > a { display:block; background-color:#ffffff; color:#000000; } /* Links with separators (at the right side) -------------------------------------------------------------- */ .show-separators .links > li { margin-left:-1px; } .show-separators .links > li > a { background-image:url(../icons/link-separator.gif); background-position:right center; background-repeat:no-repeat; } .show-separators .links > li.last > a { background-image:none; } .show-separators .links > li.hide-separator > a { background-image:none; } .show-separators .links > li.separator-left > a { background-position:left center; } /* Links with separators (at the left side) -------------------------------------------------------------- */ .show-separators-left .links > li { margin-left:-1px; } .show-separators-left .links > li > a { background-image:url(../icons/link-separator.gif); background-position:left center; background-repeat:no-repeat; } .show-separators-left .links > li.first > a { background-image:none; } .show-separators-left .links > li.hide-separator > a { background-image:none; } .show-separators-left .links > li.separator-right > a { background-position:right center; } /* Misc %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Link with an arrow */ /** * Drop-down */ /* Dropdown box %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Dropdown toggle %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Inside Dropdown-toggle -------------------------------------------------------------- */ /* Predefined icons -------------------------------------------------------------- */ /* Fix positioning of icon */ /* Cover 'dropdown-toggle' (and 'dropdown-menu' shadow) with additional inner div %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /*.dropdown:hover .dropdown-toggle.cover > div,*/ /* Dropdown menu %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* When dropdown menu is an unordered list -------------------------------------------------------------- */ /* Everything is inline-block, except links */ /* Clickable %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /** * Icons and "feature" box */ /* Icon %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /*backward compatibility*/ span.icon { background-color:#999; background-position:0 0; background-repeat:no-repeat; border-radius:50%; display:inline-block; width:30px; height:30px; padding:3px; } /*backward compatibility*/ span.icon.large { width:50px; height:50px; padding:5px; } /* Hover */ .icon-hover:hover /* Info: was more specific: span.icon-hover:hover */ { background-color:#333; } /* Utility classes -------------------------------------------------------------- */ /* Icon without background color */ /* Auto-size */ /* Not rounded */ .icon-wrapper-square span.icon { border-radius:0; } /* Feature - box with icons, images, text etc. %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Basic styles */ .feature { margin:10px 0; } .feature:after { display:block; content:"."; clear:both; font-size:0; line-height:0; height:0; overflow:hidden; } .feature.first { margin-top:0; } .feature.last { margin-bottom:0; } /* With top/bottom border line */ /* Wrapper with top/bottom line -------------------------------------------------------------- */ /* Feature headings %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .feature .above-heading { margin:0 0 5px; font-size:11px; line-height:1.4545em; /*16px*/ text-transform:uppercase; color:#888; } /* Feature icons %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .feature .icon { float:left; } /* Feature icons vertically centered */ /* Feature icons styles: */ /* Default icon -------------------------------------------------------------- */ .feature .icon { margin:0 15px 10px 0; max-width:30px; max-height:30px; } .feature span.icon { padding:3px; } /* Small icon -------------------------------------------------------------- */ /* Small icon: icons with predefined background image */ /* Large icon -------------------------------------------------------------- */ .feature.large .icon { margin:0 15px 10px 0; max-width:50px; max-height:50px; } .feature.large span.icon { padding:5px; } /* Indented feature %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .feature.indent .icon { margin-bottom:0; } /* Default -------------------------------------------------------------- */ .feature.indent { padding-left:51px; } .feature.indent .icon { margin-left:-51px; } /* Small -------------------------------------------------------------- */ /* Large -------------------------------------------------------------- */ .feature.large.indent { padding-left:75px; } .feature.large.indent .icon { margin-left:-75px; } /* Transitions %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ span.icon-hover, .feature-icon-hover span.icon { transition: color 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out; -moz-transition: color 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out; -webkit-transition: color 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out; -o-transition: color 300ms ease-in-out, background-color 300ms ease-in-out, background-position 300ms ease-in-out; } /** * Itemslider */ /* Necessary styles %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .itemslider {margin: 0; padding: 0;} .itemslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .itemslider .slides img {max-width: 100%; height: 180px; display: block;} /* Clearfix for the .slides element */ .itemslider .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .itemslider .slides {display: block;} * html .itemslider .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ /* Itemslider styles %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Itemslider wrapper and navigation container */ .itemslider-wrapper .nav-wrapper { position:relative; } /* Style: default -------------------------------------------------------------- */ .itemslider { margin:0 auto; position:relative; zoom:1; } .itemslider .slides { zoom:1; } .itemslider .slides > li { position:relative; } .itemslider .slides img { margin:0 auto; /* To center image which has "display:block" */ } /* Style: horizontal -------------------------------------------------------------- */ .itemslider-horizontal { margin:0 auto 20px; } .itemslider-horizontal .slides > li { padding-left:10px; padding-right:10px; height:360px; } .itemslider-horizontal2 { margin:0 auto 10px; } .itemslider-horizontal2 .slides > li { padding-left:10px; padding-right:10px; height:100px; } /* Itemslider mode %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Quantized number of visible items -------------------------------------------------------------- */ /*1*/ /*2*/ /*3*/ /*4*/ /*5*/ /*6*/ /*7*/ /*8*/ /* If slider is inside columns */ /* Inside main column in 2-col layout */ /*4*/ /* Inside main column in 3-col layout */ /*3*/ /* In sidebar */ /*1*/ /* Direction navigation %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Utility classes %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /** * Generic tabs */ /* Basic styles %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Tabs -------------------------------------------------------------- */ /* Total height of the tab bar should be the same as in block titles */ /* Tab panels -------------------------------------------------------------- */ /* Accordion -------------------------------------------------------------- */ /* Accordion mode enabled */ /* Default skin %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Accordion -------------------------------------------------------------- */ /* Tabs - skin 1: with thin borders %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Tabs - skin 2: with shadow %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /** * Theme icons */ /* Predefined icons %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Wishlist */ /* bw */ /* wb */ /* Compare */ /* bw */ /* wb */ /* Share/recommend */ /* bw */ /* wb */ /* Low stock */ /* bw */ /* wb */ /* Cart */ /* Row 2 -------------------------------------------------------------- */ /* Home */ /* bw */ /* wb */ /* Left */ /* bw */ /* wb */ /* Right */ /* bw */ /* wb */ /* Top */ /* bw */ /* wb */ /* Bottom */ /* bw */ /* wb */ /** * Social icons */ /* Contact icons %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* TODO: */ /* Phone */ /* Mobile */ /* Letter */ /* Row 2 -------------------------------------------------------------- */ /* Twitter */ .icon.i-twitter-w { background-image:url(../icons/sprite-icons-social.png); background-position:-7px -157px; } /* Facebook */ .icon.i-facebook-w { background-image:url(../icons/sprite-icons-social.png); background-position:-57px -157px; } /* Google plus */ .icon.i-googleplus-w { background-image:url(../icons/sprite-icons-social.png); background-position:-107px -157px; } /* Youtube */ .icon.i-youtube-w { background-image:url(../icons/sprite-icons-social.png); background-position:-157px -157px; } /* Vimeo */ .icon.i-vimeo-w { background-image:url(../icons/sprite-icons-social.png); background-position:-207px -157px; } /* Wordpress */ /* Pinterest */ /* linked in */ .icon.i-linkedin-w { background-image:url(../icons/sprite-icons-social.png); background-position:-357px -157px; } /** * Common styles */ /* Common styles %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Sizes %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* line-height:36px; */ /* Blocks %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /**/ /* To align with page title */ /* Remove margin on home page */ /* Headings %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Secondary headings -------------------------------------------------------------- */ /* Forms headings */ /* Account */ /* Headings with bottom border */ /* Section headings -------------------------------------------------------------- */ /* Sidebar blocks */ /* Section title */ .section-title, /* Cart */ { /* padding:13px 0 7px; */ /*TODO*/ padding-top:10px; padding-bottom:10px; border-bottom:1px solid #e5e5e5; font-weight:normal; font-size:2.5em; /*18px*/ line-height:1.2222em; /*22px*/ } /* Account headings -------------------------------------------------------------- */ /* Primary */ /* Secondary */ /* Colors %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Borders %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Elements with horizontal border - normal -------------------------------------------------------------- */ /* CMS */ /* Elements with horizontal border - lighter -------------------------------------------------------------- */ /* Product page - Add-to-cart area */ /* Elements with vertical border - normal -------------------------------------------------------------- */ /* Product page */ .custom-sidebar-right .inner, .custom-sidebar-left .inner, { border-color:#e5e5e5; } /* Elements with vertical border - lighter -------------------------------------------------------------- */ /* Product grid/list */ /* Elements with darker border -------------------------------------------------------------- */ /* Cart */ /* Background colors %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Elements with light gray background -------------------------------------------------------------- */ /* Product page - increaments */ /* Interface elements (like buttons or special links) with background color -------------------------------------------------------------- */ /*.btn-remove, .btn-remove2, .btn-edit, .tool-tip .btn-close a {}*/ /* Colors %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Elements with lighter text -------------------------------------------------------------- */ /* Forms */ /* Product grid/list */ /* Breadcrumbs */ /* Layered nav */ /* Product page */ /* Availability */ /* Reviews */ /* Product options */ /* Prices */ /* MSRP price and old price */ .old-price { color:#aaa; } /* Breadcrumbs */ /* Selected interface icons: text color icons on hover: toolbar icons, pager, prev/next slide etc. %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Hover item color */ /* Toolbar */ /* Add-to links */ .add-to-links.addto-icons a:hover, /* Slider arrows */ .gen-slider-arrows1 .direction-nav a:hover, /* Lightbox */ /* Scroll to top button */ #scroll-to-top:hover { color:#fff; /*Color of text*/ } /* Effects %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Shadows: for pop-ups, drop-downs etc. %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* IE version included */ #nav .level0-wrapper, /* Mini cart */ , /* Compare drop-down */ , /* Search autocomplete */ , /* Dropdown */ , /* Pop-ups and tooltips */ { -moz-box-shadow:0 2px 10px rgba(0,0,0, 0.15); -webkit-box-shadow:0 2px 10px rgba(0,0,0, 0.15); box-shadow:0 2px 10px rgba(0,0,0, 0.15); } /* Transitions %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Product image (and other elements) -------------------------------------------------------------- */ .product-image img { transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -webkit-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; } .product-image img:hover { opacity:0.85; filter:alpha(opacity=85); } /* Remove this transition in product grid. Raplace it with "on item hover" transition. TODO: check */ .products-grid .product-image img:hover { opacity:1; } /* .products-grid .item:hover .product-image img { opacity:0.85; } */ /* Links and other selected elements -------------------------------------------------------------- */ /* IMPORTANT: link transitions should be placed before other transitions */ a { transition: color 450ms ease-in-out, background-color 450ms ease-in-out; -moz-transition: color 450ms ease-in-out, background-color 450ms ease-in-out; -webkit-transition: color 450ms ease-in-out, background-color 450ms ease-in-out; -o-transition: color 450ms ease-in-out, background-color 450ms ease-in-out; } a:hover { transition-duration: 100ms; -moz-transition-duration: 100ms; -webkit-transition-duration: 100ms; -o-transition-duration: 100ms; } /* Interface icons: toolbar icons, pager, prev/next slide etc. -------------------------------------------------------------- */ /* Back link */ /* Add-to links */ .add-to-links.addto-icons a { transition: background-color 300ms ease-in-out, background-position 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out, background-position 300ms ease-in-out; -webkit-transition: background-color 300ms ease-in-out, background-position 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out, background-position 300ms ease-in-out; } /* Accordions, tabs & other components -------------------------------------------------------------- */ /* Elements with animated color and borders -------------------------------------------------------------- */ /* Forms */ input.input-text, select, textarea, /* Product image thumbnails */ , /* Product mini-lists */ { transition: color 300ms ease-in-out, border-color 300ms ease-in-out; -moz-transition: color 300ms ease-in-out, border-color 300ms ease-in-out; -webkit-transition: color 300ms ease-in-out, border-color 300ms ease-in-out; -o-transition: color 300ms ease-in-out, border-color 300ms ease-in-out; } /* Structural elements -------------------------------------------------------------- */ /* Layered nav */ /* Grid */ .grid12-3, .grid12-4, .grid12-6, .grid12-12, .grid-full, /* Products */ /* Misc */ /* Menu */ #nav > li { transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; } /* Shadow for the main containers %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /** * WARNING: do not edit this file. It was generated automatically, your changes will be overwritten and lost. * 2013-11-04 21:14:29 */ .main-container { background-color: #ffffff; } .main { background-color: #ffffff; } .footer-container { background-color: #CAC5CB; } .footer { } .footer a { } .footer a:hover { } .footer button.button span { background-color: ; color: ; } .footer button.button:hover span { background-color: ; color: ; } .footer-top-container { } .footer-top { } .footer-top a { } .footer-top a:hover { } .footer-primary-container { } .footer-primary { background-color: #ffffff; } .footer-primary a { } .footer-primary a:hover { } .footer-bottom-container { } .footer-bottom { } button.button span { background-color: #dddddd; color: #333333; } button.button:hover span { background-color: #5bd2ec; color: #333333; } .links > li > a:hover { background-color: #333333; color: #ffffff !important; } .price-box .price { color: #00a9c7; } .sticker.sale { background-color: #f12b63; color: #ffffff; } span.icon { background-color: #d52462; } span.icon-hover:hover, .feature-icon-hover:hover span.icon { background-color: #5bd2ec; } .social-links span.icon { background-color: #888888; } .social-links span.icon-hover:hover { background-color: #333333; } /* Default icon */ /* Toolbar */ /* Back link */ /* Add-to links */ /* Simple icons (product grid) */ .add-to-links.addto-icons a, /* Other with standard icons */ /* Slider arrows */ .gen-slider-arrows1 .direction-nav a, /* Sliders */ .gen-slider-arrows1 .direction-nav a.disabled:hover, /* Slideshow */ /* Cloud Zoom */ /* Lightbox */ /* Scroll to top button */ #scroll-to-top { background-color: #f5f5f5; } /* Hover icon */ /* Toolbar */ /* Back link */ /* Add-to links */ /* Simple icons (product grid) */ .add-to-links.addto-icons a:hover, /* Other with standard icons */ /* Slider arrows */ .gen-slider-arrows1 .direction-nav a:hover, /* Lightbox */ /* Scroll to top button */ #scroll-to-top:hover { background-color: #333333; } /* Active icon */ h1, h2, h3, h4, h5, .section-title, .products-grid .product-name, h3.product-name, /*TODO:remove*/ /* CCK + generic */ /* Main menu */ #nav > li > a, /* Block headings */ /* Checkout headings */ /* Multiple checkout */ /*.fieldset .legend, .multiple-checkout .col2-set h2.legend, .info-set h2.legend,*/ /* Account */ /* Product page */ /* Footer headings */ .footer .heading, /* Captions */ , /* Custom content class */ { font-family: Bitter, georgia, serif; } /** * Theme-specific styles */ /* Misc %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Nav container: stretched or with side padding %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Add top margin for nav element, the same value as left and right margin of the grid unit, and remove margin if stretched */ /* Cart %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Collateral boxes - stretch */ /* Interface icons %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Icons with no background -------------------------------------------------------------- */ /* Toolbar */ /* Add-to links */ .add-to-links.addto-icons a, /* Slider arrows */ { background-color:transparent; } /* Other icons -------------------------------------------------------------- */ /* Pager */ /* Add-to links */ .add-to-links.addto-icons a, /* Slideshow directional arrows */ { background-color:#fff; } /* Built-in static blocks %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Header top - help block */ /* Category page */ /* Product page */ /* Main blocks */ /* Static blocks replacing related and up-sell products */ /* Cart */ /* Mini cart */ /* OPC */ /* CMS pages */ /* Header */ /* Footer */ .block_footer_primary_bottom_left {} .block_footer_payment { margin-right:10px; margin-bottom:10px; margin-left:20px; } /* Sample block content -------------------------------------------------------------- */ /* HD-ready (retina-ready) %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) { /* Rating */ /* Theme icons -------------------------------------------------------------- */ /* To top */ #scroll-to-top, /* Search button */ , /* All icons from icons-theme.css */ /* Row 1: */ , /* Row 2: */ , .icon.i-bottom-wb /* Last selector without trailing coma */ { background-image:url(../icons/sprite@x2.png); background-size:500px 200px; } /* All icons from icons-social.css -------------------------------------------------------------- */ /* Row 2: */ .icon.i-twitter-w, .icon.i-facebook-w, .icon.i-googleplus-w, .icon.i-youtube-w, .icon.i-linkedin-w /* Last selector without trailing coma */ { background-image:url(icons/sprite-icons-social@x2.png); background-size:500px 200px; } } /* end: media query */ /* * 12-column grid */ /* Grid container */ .container { margin-left:auto; margin-right:auto; } .nested-container { width:102%; margin-left:-2%; } /* Grid units */ .grid12-3, .grid12-4, .grid12-6, .grid12-12, /* Deprecated: other grid units */ /* Alias for full-width units */ .grid-full, /* Special grid units */ { position:relative; display:inline; float:left; margin-right:1%; } /* Basic grid units width */ .grid12-3 { width:23%; } .grid12-4 { width:31.33%; } .grid12-6 { width:48%; } .grid12-12, .grid-full { width:98%; } /* Grid units without left gutter (margin) */ /*.no-left-gap.grid12-1 { margin-left:0; width:7.33%; } .no-left-gap.grid12-2 { margin-left:0; width:15.66%; } .no-left-gap.grid12-3 { margin-left:0; width:24%; } .no-left-gap.grid12-4 { margin-left:0; width:32.33%; } .no-left-gap.grid12-5 { margin-left:0; width:40.67%; } .no-left-gap.grid12-6 { margin-left:0; width:49%; } .no-left-gap.grid12-7 { margin-left:0; width:57.33%; } .no-left-gap.grid12-8 { margin-left:0; width:65.67%; } .no-left-gap.grid12-9 { margin-left:0; width:74%; } .no-left-gap.grid12-10 { margin-left:0; width:82.33%; } .no-left-gap.grid12-11 { margin-left:0; width:90.67%; } .no-left-gap.grid12-12, .no-left-gap.grid-full { margin-left:0; width:99%; }*/ /* Grid units without right gutter (margin) */ /*.no-right-gap.grid12-1 { margin-right:0; width:7.33%; } .no-right-gap.grid12-2 { margin-right:0; width:15.66%; } .no-right-gap.grid12-3 { margin-right:0; width:24%; } .no-right-gap.grid12-4 { margin-right:0; width:32.33%; } .no-right-gap.grid12-5 { margin-right:0; width:40.67%; } .no-right-gap.grid12-6 { margin-right:0; width:49%; } .no-right-gap.grid12-7 { margin-right:0; width:57.33%; } .no-right-gap.grid12-8 { margin-right:0; width:65.67%; } .no-right-gap.grid12-9 { margin-right:0; width:74%; } .no-right-gap.grid12-10 { margin-right:0; width:82.33%; } .no-right-gap.grid12-11 { margin-right:0; width:90.67%; } .no-right-gap.grid12-12, .no-right-gap.grid-full { margin-right:0; width:99%; }*/ /* Special grid units: basic structure of pages with 1 and 2 sidebars -------------------------------------------------------------- */ /* 2 columns: fixed-width sidebar unit and fluid main unit. Sidebar unit has the same width for all screen sizes equal or greater than 1280px. Width of the main unit is fluid. */ /* Another 2 columns inside ".grid-col2-main": fixed-width sidebar unit and fluid main unit */ /* Vertically aligned grid -------------------------------------------------------------- */ /* Utility classes -------------------------------------------------------------- */ /* Units with no gutter (margin): alpha - first unit in a row, omega - last unit in a row */ .alpha { margin-left:0; } .omega { margin-right:0; } /* Hide element if screen width is lower than the width specified in the class name */ /* Grid container: stretched, without side margin -------------------------------------------------------------- */ /* Remove padding (which is added in media queries for mobile layouts) from basic grid containers. Stretch inner grid unit (full width) */ .container.stretched { width:96%; padding-left:0; padding-right:0; } .container.stretched .grid-full { width:100%; margin-left:0; margin-right:0; } /** * WARNING: do not edit this file. It was generated automatically, your changes will be overwritten and lost. * 2013-11-06 17:49:37 */ /* Grid container %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ .container { width:96%; } /* Desktop - design for a width of 1440px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 1440px <= width @media only screen and (min-width: 1440px) { .container { max-width: 1380px; } /* Special grid units */ /* Hide */ } /* Desktop - design for a width of 1366px and 1360px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 1360px <= width */ @media only screen and (min-width: 1360px) and (max-width: 1439px) { /* Special grid units */ /* Hide */ } /* Desktop - design for a width of 1280px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 1280px <= width */ @media only screen and (min-width: 1280px) and (max-width: 1359px) { /* Special grid units */ /* Hide */ } /* Design for a width of less than 1024 px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* width < 1024px */ @media only screen and (max-width: 1023px) { /* Hide */ } /* Tablet (Portrait) - design for a width of 768px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 768px <= width < 960px */ @media only screen and (min-width: 768px) and (max-width: 959px) { /* Hide */ } /* All mobile - design for a width of less than 768px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* width < 768px */ @media only screen and (max-width: 767px) { /* Grid units below 768px screen size are 100% wide with no margin - compensate margin with padding */ .container { width:94%; padding-left:1%; padding-right:1%; } .nested-container { width:100%; margin-left:auto; } /* Stretch all grid units */ .grid12-3, .grid12-4, .grid12-6, .grid12-12, .grid-full { width:100%; margin-left:0; margin-right:0; } /* Vertically aligned grid -------------------------------------------------------------- */ } /* Mobile (Landscape) - design for a width of 480px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 480px <= width < 768px */ @media only screen and (min-width: 480px) and (max-width: 767px) { /* Hide */ .hide-below-768 { display:none !important; } /* Deprecated: persistent grid units -------------------------------------------------------------- */ /* Half */ /* One-third + two-thirds */ /* One-fourth + two-fourths + three-fourths */ /* Mobile grid - modify units on mobile devices -------------------------------------------------------------- */ /* .grid12-1 to .grid12-2 */ /* .grid12-2 to .grid12-4 */ .mobile-grid.grid12-3 { width:48%; margin-left:1%; margin-right:1%; } /* .grid12-3 to .grid12-6 */ /**/ } /* Mobile (Landscape, iPhone 4 Portrait) - design for a width of 640px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 640px <= width < 768px */ @media only screen and (min-width: 640px) and (max-width: 767px) { } /* Mobile (Portrait) - design for a width of 320px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 320px <= width < 480px */ @media only screen and (min-width: 320px) and (max-width: 479px) { /* Hide */ .hide-below-768 { display:none !important; } .hide-below-480 { display:none !important; } } /* Mobile (Portrait) - design for a width of less than 320px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* width < 320px */ @media only screen and (max-width: 319px) { /* Hide */ .hide-below-768 { display:none !important; } .hide-below-480 { display:none !important; } } /** * WARNING: do not edit this file. It was generated automatically, your changes will be overwritten and lost. * 2013-11-06 17:49:37 */ /* Desktop - design for a width of 1440px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 1440px <= width */ @media only screen and (min-width: 1440px) { /* Header -------------------------------------------------------------- */ /* Product page -------------------------------------------------------------- */ /* Misc -------------------------------------------------------------- */ /* Mini cart */ /* Item grid: number of columns -------------------------------------------------------------- */ /* Item grid: 2 columns */ /* Item grid: 3 columns */ /* Item grid: 4 columns */ /* Item grid: 5 columns */ /* Item grid: 6 columns */ /* Item grid: 7 columns */ /* Itemslider -------------------------------------------------------------- */ /*MORE*/ /*7*/ /* Inside main column in 2-col layout */ /*6*/ /* Inside main column in 3-col layout */ /*5*/ /* In sidebar */ /*1*/ /* In up-sell */ /*6*/ /* Cloud zoom -------------------------------------------------------------- */ /*4*/ /* Direction navigation */ /* Slideshow caption -------------------------------------------------------------- */ } /* Desktop, wide laptop - design for a width of 1360px and 1366px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 1360px <= width */ @media only screen and (min-width: 1360px) and (max-width: 1439px) { /* Header -------------------------------------------------------------- */ /* Cart -------------------------------------------------------------- */ /* Product page -------------------------------------------------------------- */ /* Misc -------------------------------------------------------------- */ /* Mini cart */ /* Item grid: number of columns -------------------------------------------------------------- */ /* Item grid: 2 columns */ /* Item grid: 3 columns */ /* Item grid: 4 columns */ /* Item grid: 5 columns */ /* Item grid: 6 columns */ /* Item grid: 7 columns */ /* Itemslider -------------------------------------------------------------- */ /*MORE*/ /*6*/ /* Inside main column in 2-col layout */ /*MORE*/ /*5*/ /* Inside main column in 3-col layout */ /*4*/ /* In sidebar */ /*1*/ /* Cloud zoom -------------------------------------------------------------- */ /*4*/ /* Direction navigation */ /* Slideshow caption -------------------------------------------------------------- */ } /* Desktop, laptop - design for a width of 1280px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 1280px <= width */ @media only screen and (min-width: 300px) and (max-width: 1359px) { .hidden-above-1280 { display:none; width:100%; position:relative;} } /* Design for a width of 960-1280 px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 960px <= width < 1280px */ @media only screen and (min-width: 960px) and (max-width: 1279px) { /* Cart -------------------------------------------------------------- */ /* Product page -------------------------------------------------------------- */ /* Itemslider -------------------------------------------------------------- */ /* Inside main column in 2-col layout */ /*4*/ /* Inside main column in 3-col layout */ /*3*/ } /* Design for a width of 960-1024 px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 960px <= width < 1024px */ @media only screen and (min-width: 960px) and (max-width: 1023px) { /* Itemslider -------------------------------------------------------------- */ /*5*/ /* Inside main column in 2-col layout */ /*MORE*/ /*3*/ /* Inside main column in 3-col layout */ /*MORE*/ /*3*/ } /* Mobile, small old desktop - design for a width of less than 960px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* width < 960px */ @media only screen and (max-width: 959px) { /* Hide amount. Note: has to be defined after aligning ".amount" center */ /* Other -------------------------------------------------------------- */ #scroll-to-top { display:none !important; } /* Top links */ } /* Tablet (Portrait) - design for a width of 768px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 768px <= width < 960px */ @media only screen and (min-width: 768px) and (max-width: 959px) { /* Default Magento classes -------------------------------------------------------------- */ /* Cart -------------------------------------------------------------- */ /* Product page -------------------------------------------------------------- */ /* Related - simple */ /* Item grid: number of columns -------------------------------------------------------------- */ /* Always show 2 columns */ /* Clear every first item in each row (group of n items) */ /* Itemslider -------------------------------------------------------------- */ /*4*/ /* Inside main column in 2-col layout */ /*3*/ /* Inside main column in 3-col layout */ /*2*/ /* Related */ /* Cloud zoom -------------------------------------------------------------- */ /* Shrink the slider if to many thumbnails */ /*2*/ /* Direction navigation */ /* Items grid: in category view -------------------------------------------------------------- */ /* Hide button completely despite it is on item hover */ /* Slideshow caption -------------------------------------------------------------- */ } /* All desktop - design for a width of 768px and wider %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 768px <= width */ @media only screen and (min-width: 768px) { /* Itemslider -------------------------------------------------------------- */ /*1*/ /* Mobile accordion -------------------------------------------------------------- */ .mobile-collapsible .block-content { display:block !important; } /* Always show when not on mobile */ .mobile-collapsible .opener { display:none !important; } /* Always hide when not on mobile */ .mobile-collapsible .block-title { border-bottom:none; } } /* All mobile - design for a width of less than 768px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* width < 768px */ @media only screen and (max-width: 767px) { /* Grid and basic layout -------------------------------------------------------------- */ /* Margin for basic Magento columns */ .col-main { margin-bottom:30px; } /* Product view: margin for all grid units */ /* Magento utility classes -------------------------------------------------------------- */ /* Forms -------------------------------------------------------------- */ /* Tables -------------------------------------------------------------- */ /* Data tables formatting -------------------------------------------------------------- */ /* Basic formatting */ /* Highlight first cell in table footer */ /* Show cell label */ /* Misc Magento layout elements -------------------------------------------------------------- */ /* Header -------------------------------------------------------------- */ /* Logo */ /* Quick search */ /* User menu (Top Links) */ /* Mini cart */ /* Top links */ /* Footer -------------------------------------------------------------- */ /* Footer elements - align center */ .footer-primary-bottom-spacing, .footer-top .links, .footer-bottom { text-align:center; } .footer-primary-bottom-spacing .item, /*.social-links a,*/ /*deprecated*/ #subscribe-form, .footer-bottom .item, .footer-top .links li { float:none; display:inline-block; } .footer-top .item { float:none; } /* Simplify links */ .footer .show-separators .links li a { background-image:none; } /* Footer elements */ .footer-primary-bottom-spacing .item { width:100%; margin:0; } .footer-bottom .item { margin-left:5px; margin-right:5px; } /* Copyright - remove space */ .footer-copyright { margin-left:0; } /* Products list -------------------------------------------------------------- */ /* Products grid -------------------------------------------------------------- */ .products-grid .add-to-links.addto-onimage { display:none; } /* Layered navigation -------------------------------------------------------------- */ /* Toolbar -------------------------------------------------------------- */ /* All elements - align center and increase vertical spacing */ /* Category view -------------------------------------------------------------- */ /* Product page -------------------------------------------------------------- */ /* Secondary column */ /* IMPORTANT: auto height on mobiles */ /* Wrapper for collaterals - remove top margin (grid units already have bottom margin) */ /* Related: remove bottom margin */ /* Sidebar */ /* Cart -------------------------------------------------------------- */ /* Buttons below table: align center */ /* One Page Checkout -------------------------------------------------------------- */ /* Step title - link "edit" */ /* Form */ /*.opc .form-list .field {} .opc .form-list input.input-text {}*/ /* Account -------------------------------------------------------------- */ /* Items slider -------------------------------------------------------------- */ /*.itemslider .control-nav { display:none; }*/ /* Slideshow -------------------------------------------------------------- */ /* Slideshow navigation: move buttons to the top right corner */ /* Slideshow caption */ /* Shrink all and hide paragraph and button */ /* Cloud Zoom -------------------------------------------------------------- */ /* Hide zoom */ /* Lightbox -------------------------------------------------------------- */ /* Accordion -------------------------------------------------------------- */ /* Space for openner if item has children. It has to be a few pixels wider than openner */ /* Mobile accordion -------------------------------------------------------------- */ .mobile-collapsible .block-content { display:none; } /* Hide on mobile */ /* Items grid: in category view -------------------------------------------------------------- */ /* Revert default sizes */ /* Hide/show elements: 6 & 7 columns */ } /* end: width < 768px */ /* Mobile (Landscape) - design for a width of 480px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 480px <= width < 768px */ @media only screen and (min-width: 480px) and (max-width: 767px) { /* Category view -------------------------------------------------------------- */ /* Item grid: number of columns -------------------------------------------------------------- */ /* Always show 2 columns */ /* Clear every first item in each row (group of n items) */ /* Itemslider -------------------------------------------------------------- */ /*2*/ /* Cloud zoom -------------------------------------------------------------- */ /* Broaden the slider if at least 4 thumbnails */ /*4*/ /* Direction navigation */ /* Shrink and align center the main image */ } /* Additional break-point: Mobile (Landscape, iPhone 4 Portrait) - design for a width of 640px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 640px <= width < 768px */ @media only screen and (min-width: 640px) and (max-width: 767px) { /* Itemslider -------------------------------------------------------------- */ } /* All small mobile - design for a width of less than 480px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* width < 480px */ @media only screen and (max-width: 479px) { /* Grid elements -------------------------------------------------------------- */ /* Header -------------------------------------------------------------- */ /* Mini cart */ /* Quick compare dropdown */ /* Simplify horizontal links */ /* Header elements - align center */ /* Links */ /* Header top */ /* Inside user menu */ /* previous: .user-menu { text-align:center; } .user-menu .top-links { float:none; } #mini-cart, .user-menu .links, .user-menu .links li { float:none; display:inline-block; } */ /* Nav -------------------------------------------------------------- */ /*#nav > li { width:100%; } #nav > li > a { border-right:none; }*/ /* Products list -------------------------------------------------------------- */ /* Product page -------------------------------------------------------------- */ /* Reviews */ /* Toolbar -------------------------------------------------------------- */ /* Pages */ /* Account -------------------------------------------------------------- */ /* Account info + Order info */ /* .box-account.box-info .col-1, .order-info-box .col-1 { border-right:none; } .box-account.box-info .col-1 .box, .order-info-box .col-1 .box { padding-right:0; } */ /* Order details */ /* Footer -------------------------------------------------------------- */ #subscribe-form .input-text { max-width:118px; } /* Slideshow -------------------------------------------------------------- */ /* Slideshow caption */ /* Shrink all and hide heading */ /* Cloud zoom -------------------------------------------------------------- */ } /* Mobile (Portrait) - design for a width of 320px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* 320px <= width < 480px */ @media only screen and (min-width: 320px) and (max-width: 479px) { /* Item grid: number of columns -------------------------------------------------------------- */ /* Always show 2 columns */ /* Itemslider -------------------------------------------------------------- */ /*1*/ /* Cloud zoom -------------------------------------------------------------- */ /* Shrink the slider if to many thumbnails */ /*2*/ /* Direction navigation */ } /* Mobile (Portrait) - design for a width of 240px %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* width < 320px */ @media only screen and (max-width: 319px) { /* Product page -------------------------------------------------------------- */ /* Related - thumbnails */ /* Item grid: number of columns -------------------------------------------------------------- */ /* Always show 1 columns */ /* Itemslider -------------------------------------------------------------- */ /*1*/ /* Cloud zoom -------------------------------------------------------------- */ /* Shrink the slider if to many thumbnails */ /*1*/ /* Direction navigation */ /* Slideshow -------------------------------------------------------------- */ } /** * This file is a container for custom CSS. You can use it to override the default styles of the theme. * * 1. Copy the file "SAMPLE.custom.css" and rename it to "custom.css". * Otherwise this file will not be loded by Magento. * 2. Enable it in the admin panel. * 3. Uncomment slected sample styles or add your own CSS to override the default styles of the theme. * * Please refer to the user guide for more details. * */ /* Products %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Product labels -------------------------------------------------------------- */ h4 { margin: 0px 0px 10px; font-weight: normal;color:#000; } h4 { font-size: 1.6666em; line-height: 1.25em; } h4.heading { margin: 0px 0px 10px; font-size:18px;font-weight:400; color:#ffffff; } ul, ol { list-style: none; } .right { float: right !important; } /* .sticker.new { background-color:#555; color:#fff; } .sticker.sale { background-color:orange; color:#fff; } */ /* Stock indicator on product page (configurable products): icon background color -------------------------------------------------------------- */ /* a.availability-only span.icon { background-color:orange; } */ /* Miscellaneous %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */ /* Drop-down caret */ /* .caret { opacity:1; filter:alpha(opacity=100); }de */