/* * Skeleton V1.1 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 8/17/2011 */ /* Table of Contents ================================================== 01. RETINA STYLES 02. BASE STYLES (1140px) 03. #DESKTOP (960px) 04. #Tablet (Portrait) 05. #Mobile (Portrait) 06. #Mobile (Landscape) 07. TESTING TEXT */ /* =============================================== 01. RETINA STYLES =============================================== */ @media screen and (-webkit-min-device-pixel-ratio: 1.5) { nav select, .filter-products select, .woocommerce_ordering select, body #main form.woocommerce-ordering select { background-image: url(../images/select-arrow@2x.png); background-position: center right; background-repeat: no-repeat; background-size:contain;} .flex-control-paging li a {background-image:url(../images/slider/bg_bullets@2x.png); background-size:20px 85px;} .flex-direction-nav a {background-image: url(../images/slider/arrows@2x.png); background-size:60px 80px;} a.login-logout-header {background-image:url(../images/login-logout-header@2x.png); background-size:30px 30px;} a.shopping-cart-basket {background-image:url(../images/shopping-cart-basket@2x.png); background-size:30px 30px;} a.shopping-cart-basket span.arrow-down-basket {background-image:url(../images/shopping-cart-basket-span@2x.png); background-size:10px 10px;} header .flex-direction-nav a { background-image: url(../images/slider/arrows2@2x.png); background-size:80px 40px;} .portfolio-container-single .flex-direction-nav a { background-image: url(../images/slider/arrows2@2x.png); background-size:80px 40px;} .zoom-icon {background-image:url(../images/zoom-icon@2x.png); background-size:54px 54px;} .article-icon {background-image:url(../images/article-icon@2x.png); background-size:54px 54px;} .video-icon {background-image:url(../images/video-icon@2x.png); background-size:54px 54px;} #searchform #s {background-image: url(../images/search-magnify@2x.png); background-size: 30px 30px; } .contact-us-address-widget, .contact-us-phone-widget, .contact-us-e-mail-widget, .contact-us-fax-widget {background-image:url(../images/contact-us-widget@2x.png); background-size: 18px 500px; } } @media only screen and (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5) { } /* IE7-IE8 Fixes*/ .lt-ie9 nav select, .lt-ie9 .filter-products select, .lt-ie9 .woocommerce_ordering select, .lt-ie9 body #main form.woocommerce-ordering select {background-image: url(../images/select-arrow.png); .lt-ie9 .flex-control-paging li a {background-image: url(../images/slider/bg_bullets.png); } .lt-ie9 .flex-direction-nav a {background-image: url(../images/slider/arrows.png);} .lt-ie9 a.login-logout-header {background-image:url(../images/login-logout-header.png); } .lt-ie9 a.shopping-cart-basket {background-image:url(../images/shopping-cart-basket.png); } .lt-ie9 a.shopping-cart-basket span.arrow-down-basket {background-image:url(../images/shopping-cart-basket-span.png); } .lt-ie9 header .flex-direction-nav a { background-image: url(../images/slider/arrows2.png);} .lt-ie9 .portfolio-container-single .flex-direction-nav a { background-image: url(../images/slider/arrows2.png);} .lt-ie9 .zoom-icon {background-image:url(../images/zoom-icon-ie8.png);} .lt-ie9 .article-icon {background-image:url(../images/article-icon-ie8.png); } .lt-ie9 .video-icon {background-image:url(../images/video-icon-ie8.png); } .lt-ie9 #searchform #s {background-image: url(../images/search-magnify.png);} .lt-ie9 .contact-us-address-widget, .lt-ie9 .contact-us-phone-widget, .lt-ie9.contact-us-e-mail-widget, .lt-ie9 .contact-us-fax-widget {background-image:url(../images/contact-us-widget.png); } } /* =============================================== 02. BASE STYLES (1165px) =============================================== */ /* Note: Design for a width of 1165px */ body:after {content: "Wider than 1165px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ html {-webkit-text-size-adjust: none;} /* Removes webkit font resizing */ body {max-width:100%; width:100%;} img {max-width:100%; height: auto; } .width-container {-moz-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; } /* =============================================== 03. #DESKTOP (960px) =============================================== */ /* Note: Design for a width of 960px */ @media only screen and (min-width: 959px) and (max-width: 1165px) { body:after {content: "959px to 1164px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ .width-container {width:910px;} /* Default Width */ /* Menu & Login Padding */ nav { margin-left:10px;} .sf-menu a {padding-right:14px; padding-left:14px; } a.login-logout-header {padding-left:47px; padding-right:5px; } a.shopping-cart-basket {padding-left:49px; padding-right:10px;} .content-container {padding:18px;} .featured-text {margin-right:10px; } .featured-text-summary {font-size:14px;} } /* =============================================== 04. #Tablet (Portrait) =============================================== */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { body:after {content: "768 to 959px";background-color: hsla(270,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ /* Default Width */ .width-container { width: 720px; } /* Menu & Login Padding */ nav { margin-left:5px;} .sf-menu a {padding-right:8px; padding-left:8px; } a.login-logout-header {padding-left:40px; padding-right:0px; background-position:10px center;} a.shopping-cart-basket { padding-left:40px; padding-right:0px; background-position:9px center; text-indent:-9999px; } a.shopping-cart-basket span.arrow-down-basket {display:none;} .login-logout-header span {display:inline-block ; text-indent:-9999px;} /* Misc Fixes */ .content-container {padding:15px;} .commentlist {width:78%;} .featured-text, .featured-image-wide {margin:45px 25px 45px 0px;} .featured-text {margin-right:15px;} .flex-direction-nav .flex-next, .flex-direction-nav .flex-prev {display:none !important; } .featured-text-summary {font-size:13px;} #page-title h1 {font-size:35px;} #page-title h1 span { font-size:20px; bottom:5px;} /* WooCommerce Columns */ body #main .width-container li.product.column-4 {margin-right:2%; width: 23.5%; clear:none;} body #main .width-container li.product.column-3 {margin-right:2%; width: 32%; clear:none;} body #main .width-container li.product.column-2 {margin-right:2%; width: 49%; clear:none; } body #main .width-container li.product.column-2.last, body #main .width-container li.product.column-3.last, body #main .width-container li.product.column-4.last, .lt-ie8 body #main .width-container li.product.column-2.last, .lt-ie8 body #main .width-container li.product.column-3.last, .lt-ie8 body #main .width-container li.product.column-4.last {margin-right:0%;} body #main .width-container li.product { float:left !important;} body #main .width-container li.product.first { clear: both !important;} body #main .width-container .columns-2 li.product {margin-left:1%;margin-right:1%; width: 48%; } body #main .width-container .columns-3 li.product {margin-left:1%;margin-right:1%; width: 31.3%; } body #main .width-container .columns-4 li.product {margin-left:1%;margin-right:1%; width: 23%; } } /* =============================================== 05. #Mobile (Portrait) =============================================== */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { body:after {content: "0 to 480px"; background-color: hsla(90,60%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ /* Default Width */ .width-container { width: 300px; } .content-container {padding:10px;} /* Default Grid */ .grid2column, .grid3column, .grid3columnbig, .grid4column, .grid4columnbig, body #main #main-content, body #main #sidebar, .lt-ie8 .grid2column, .lt-ie8 .grid3column, .lt-ie8 .grid4column, #footer-widgets .footer-2-column .widget, #footer-widgets .footer-3-column .widget, #footer-widgets .footer-4-column .widget, body #main .width-container li.product.column-2, body #main .width-container li.product.column-3, body #main .width-container li.product.column-4, .lt-ie8 body #main .width-container li.product.column-2, .lt-ie8 body #main .width-container li.product.column-3, .lt-ie8 body #main .width-container li.product.column-4, body #main .single-product-container .images, body #main .single-product-container .summary {float:none; width:100% !important; margin-bottom:15px;} /* Misc Fixes */ body {font-size:13px;} body #logo { padding:0px; display:block; float:none; margin:0 auto; text-align:center;} footer #copyright ul {text-align:center; padding-bottom:10px;} footer #copyright ul li {float:none; display: inline; } #copyright .lastcolumn {text-align:center;} #checkout-basket-iceberg {display:none !important;} .commentlist {width:95%; left:-10px;} .commentlist .children li.comment .comment-meta {margin-left:0px;} .commentlist .avatar, .commentlist > li:before {display:none;} #page-title h1 {font-size:30px;} #page-title h1 span { font-size:16px; bottom:5px;} .single-product-container .commentlist .avatar, .single-product-container .commentlist > li:before {display:block;} /* Menu & Login Padding */ #header-right-container {float:none; text-align:center;} .checkout-container {margin-top:-10px;} header a.shopping-cart-basket, header a.login-logout-header {padding-top:18px; padding-bottom:18px; font-size:15px;} a.login-logout-header { padding-right:20px; border-right:1px solid #fff; border-right:1px solid rgba(255, 255, 255, 0.2);} /* Featured Slider */ .flex-direction-nav .flex-next, .flex-direction-nav .flex-prev {display:none !important; } .featured-image, .featured-text, .featured-image-wide {margin-right:0px; margin-left:0px;} .featured-text {position:absolute; bottom:0px;} .featured-text h2 {background:#3d3f3f; background: rgba(0,0,0,.75); font-size:16px; padding:4px;} .lt-ie8 .featured-text h2, .lt-ie8 .featured-pricing {background:#3d3f3f} .featured-pricing {background:#3d3f3f; background: rgba(0,0,0,.65); display:inline-block; padding:2px 4px;} .featured-text .featured-pricing ins {font-size:14px; } .featured-text .featured-pricing del {font-size:12px; bottom:1px;} .featured-text .featured-text-summary, .featured-text .ice-button {display:none;} /* Select Menu */ .woocommerce_ordering, body #main form.woocommerce-ordering {position:static; float:none; margin:0 auto; height:auto;} .woocommerce_ordering select, body #main form.woocommerce-ordering select {margin:0 auto 15px auto;} nav ul { display: none; } nav select option {font-size:12px; background:#fff; color:#888;} header nav {float:none; text-align:center; z-index:0; } nav select { text-transform:none; display:block; margin:5px auto 10px auto; width:300px; min-width: 150px; max-width: 100%; -webkit-appearance: none; -moz-appearance: normal; appearance: normal; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); -webkit-padding-end: 20px; -webkit-padding-start: 2px; -webkit-user-select: none;-moz-user-select: none; background: linear-gradient(#ffffff, #ffffff 40%, #ffffff); background-image: -moz-linear-gradient(#ffffff, #ffffff 40%, #ffffff); background-position: center right; background-repeat: no-repeat; background-color:#ffffff; background-image: url(../images/select-arrow.png); font-size:13px; border: 1px solid #f1f1f1; color: #555555; padding:7px 5px 7px 10px;} /* Checkout + Cart Styling */ table.cart th.product-remove, table.cart td.product-remove, table.cart td.product-thumbnail, table.cart th.product-thumbnail, table.cart th.product-price, table.cart td.product-price {display:none !important;} table.cart input.button {margin-top:2px;} table.cart input.checkout-button {margin-top:5px; margin-bottom:10px;} .cart_totals, .cart-collaterals, form.shipping_calculator {width:100% !important;} form.checkout .col-1, form.checkout .col-2 {width:100%; margin-bottom:15px;} body #main table.my_account_orders a.button {font-size:11px; padding:8px 10px;} body #main table.my_account_orders {position:relative; left:-9px; background:#fff;} } /* =============================================== 06. #Mobile (Landscape) =============================================== */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { body:after { content: "480 to 767px"; background-color: hsla(150,50%,40%,0.7);}/* Notify what @media browser is using, Disable above by display:none; */ /* Default Width */ .width-container { width: 420px; } body #main table.my_account_orders {left:0px;} } /* =============================================== 07. TESTING TEXT =============================================== */ body:after {position:relative; z-index:55; content: "less than 320px";font-size: 300%;font-weight: bold;position: fixed;bottom: 60px;width: 100%;text-align: center;background-color: hsla(1,60%,40%,0.7);color: #fff; display:none !important; /* -------------------- ADD OR REMOVE display:none !important; to display testing text -------------------- */}