/* Copyright (C) Flexible Web Design , http://www.gnu.org/licenses/gpl.html GNU/GPL */ /* Breakpoints ---------------------------------------------------------------------------------------------------- This CSS and the Media CSS3 Media Queries are used to define specific responsive CSS rules. You might want to hide/show or enlarge/contract some elements for different mobile devices */ #header-responsive{display:none;} /* Phones - Landscape (Width Resolution between 321px and 768px) */ @media screen and (max-width:568px) { #header-responsive{display:block} #toolbar-r div.module ul.menu-line { display:block; } div#innerbottom div.wrapper div.grid-box { width:50%; } #footer div.wrapper div.module div.floatleft { width:100%; } div.NewsletterBox {display:none;} /* Layout */ #headerbar, #toolbar div.float-left, #headerbar, #menubar, #totop-scroller { display: none; } #bottom-b .grid-box {width:25%;} #innerbottom .module {margin:10px 5px;} .NewsletterBox {display:block;} #bottom-a .grid-box {width:100%;} .searchbox {float:right; margin:0px 3px 10px;} select.menu-responsive {width:50%;} #header {padding-bottom:10px;} #sidebar-a, #sidebar-b {width:100%;} #maininner {width:100%;} #FlexibleBrowseThumbRow.floatleft {width:33%;} #FlexibleSwitchButtons {display:none;} .orderby-displaynumber .width50 {width:100%;} .orderby-displaynumber .width100 {text-align:right;} #bottom-pagination .FlexiblePagination {margin:10px 0;} #bottom-pagination .FlexiblePagination.floatright {float:none; display:inline-block;} #FlexibleBrowseViews {margin:0px;} #FlexibleDetailsLeft.width50 {width:100%;} #FlexibleDetailsLeft .width20 {width:100%;} #FlexibleDetailsLeft .width78 {width:100%;} #FlexibleDetailsRight.width50 {width:100%;} .FlexibleEnlargeView, .FlexibleAskQuestionElement, .availability, .FlexibleShareItemLeft {display:none;} .FlexibleShareItemMiddle {padding:0px;} .main-image #wrap, .flexibleZoomAdditionalImagesContainer {margin:10px;} ul.flexibleZoomAdditionalImagesList li.flexibleZoomAdditionalImagesEach img.zoom-tiny-image-additional:hover {padding:0px;} div.flexibleZoomAdditionalImagesContainer {position:inherit;} ul.flexibleZoomAdditionalImagesList {width:100%;} ul.flexibleZoomAdditionalImagesList li.flexibleZoomAdditionalImagesEach { width:50px; float:left;} div.vmFlyPageBottom div.tabsstyleDIV ul#vmtabs li {margin:0 0 1px -7px} .FlexibleNeighboursNavigation {top:0px;} div.vmFlyPageBottom div.tabsstyleDIV ul#vmtabs li, .tabsstyleDIV .shadetabs li a {float:none;} .tabsstyleDIV .shadetabs li a {height:30px; line-height:30px;} div.FlexibleProductHoverShadowButtons .FlexibleProductHoverShadowQUICK {display:none;} .cart-view a.continue_link {margin:10px; padding:0 10px; font-size:11px;} .FlexibleLogin .width50 {width:100%;} .FlexibleLogin .width50:first-child {margin-bottom:40px;} .FlexibleLoginBox, .FlexibleLoginBoxRight {padding:0px;} div.FlexibleLogin {margin:0px;} .FlexibleForm {width:100%;} div.checkout-content-cart a.FlexibleSelectShippingButton, div.checkout-content-cart a.FlexibleSelectPaymentButton, div.checkout-content-cart .billto-shipto a.details, div.FlexibleLoginBoxRight a.FlexibleResgiterButton, div.FlexibleLoginBoxRight a.FlexibleGuestButton {font-size:11px;} div.checkout-content-cart table.newshoppingcart a.vm2-remove_from_cart {margin-left:0px;} input.coupon {width:100%; font-size:10px; line-height:15px; height:15px; float:right;} span.details-button input.details-button {line-height:20px; height:20px;} tr.sectiontableentry2 #userForm { width:120px; float:right;} span.details-button {display:block; margin:3px 0 0 0; float:right;} textarea.customer-comment {width:90%; background:#444; border-color:#555;} .checkout-button-top a.vm-button-correct {margin-top:15px;} div.FlexibleFormRow input#modlgn-username, div.FlexibleFormRow input#modlgn-passwd, .FlexibleForm .FlexibleFormRow input.login {width:100%;} #bottom-b div.width25 { width:100%;} .vmCartModule { position:inherit;} .FlexibleProductHoverShadowQUICK { display:none !important;} } /* Phones - Portrait (Width Resolution below 320px) */ @media screen and (max-width:320px) { div.toolbar-r div.module ul.menu-line { display:none; } .FlexibleProductDetailShareWindow { background:none; border:none; } div#innerbottom div.wrapper div.grid-box, #bottom-a div.wrapper div.grid-box .floatleft, #footer div.wrapper div.module div.floatleft { width:100%; } #header-responsive{display:block} /* Layout */ #headerbar, #toolbar div.float-left, #headerbar, #menubar, #breadcrumbs, #totop-scroller { display: none; } #bottom-b .grid-box {width:50%;} #innerbottom .module {margin:10px 0 0 0;} .NewsletterBox {display:none;} #bottom-a .grid-box {width:100%;} .searchbox {float:right; margin:0px 0px 10px;} select.menu-responsive {width:100%;} #header {padding-bottom:10px;} #toolbar a { padding:5px;} #product_list { width:290px;} #maininner {width:100%;} #maininner {width:100%;} #FlexibleBrowseThumbRow.floatleft {width:100%; border-bottom:1px solid #444;} #FlexibleSwitchButtons {display:none;} .orderby-displaynumber .width50 {width:100%;} .orderlistcontainer {margin:0 1px 0 -1px;} .orderby-displaynumber .pagedropdownResults {display:none;} #bottom-pagination .FlexiblePagination {margin:10px 0;} #bottom-pagination .FlexiblePagination.floatright {float:none; display:inline-block;} #FlexibleBrowseViews {margin:0px;} #FlexibleDetailsLeft.width50 {width:100%;} #FlexibleDetailsLeft .width20 {width:100%;} #FlexibleDetailsLeft .width78 {width:100%;} #FlexibleDetailsRight.width50 {width:100%;} .FlexibleEnlargeView, .FlexibleAskQuestionElement, .availability, .FlexibleShareItemLeft {display:none;} .FlexibleShareItemMiddle {padding:0px;} .main-image #wrap, .flexibleZoomAdditionalImagesContainer {margin:10px;} ul.flexibleZoomAdditionalImagesList li.flexibleZoomAdditionalImagesEach img.zoom-tiny-image-additional:hover {padding:0px;} div.flexibleZoomAdditionalImagesContainer {position:inherit;} ul.flexibleZoomAdditionalImagesList {width:100%;} ul.flexibleZoomAdditionalImagesList li.flexibleZoomAdditionalImagesEach { width:50px; float:left;} div.vmFlyPageBottom div.tabsstyleDIV ul#vmtabs li {margin:3px 0 1px -7px} .FlexibleNeighboursNavigation {top:0px;} div.vmFlyPageBottom div.tabsstyleDIV ul#vmtabs li, .tabsstyleDIV .shadetabs li a {float:none;} .tabsstyleDIV .shadetabs li a {height:30px; line-height:30px;} div.FlexibleProductHoverShadowButtons .FlexibleProductHoverShadowQUICK {display:none;} .cart-view a.continue_link {margin:10px; padding:0 10px; font-size:11px;} .FlexibleLogin .width50 {width:100%;} .FlexibleLogin .width50:first-child {margin-bottom:40px;} .FlexibleLoginBox, .FlexibleLoginBoxRight {padding:0px;} div.FlexibleLogin {margin:0px;} .FlexibleForm {width:100%;} div.checkout-content-cart a.FlexibleSelectShippingButton, div.checkout-content-cart a.FlexibleSelectPaymentButton, div.checkout-content-cart .billto-shipto a.details, div.FlexibleLoginBoxRight a.FlexibleResgiterButton, div.FlexibleLoginBoxRight a.FlexibleGuestButton {font-size:11px;} div.checkout-content-cart table.newshoppingcart a.vm2-remove_from_cart {margin-left:0px;} input.coupon {width:100%; font-size:10px; line-height:15px; height:15px; float:right;} span.details-button input.details-button {line-height:20px; height:20px;} tr.sectiontableentry2 #userForm { width:120px; float:right;} span.details-button {display:block; margin:3px 0 0 0; float:right;} textarea.customer-comment {width:90%; background:#444; border-color:#555;} .checkout-button-top a.vm-button-correct {margin-top:15px;} #maininner .width33 { width:100%;} #toolbar { font-size:11px;} .logo { display:inline-block;} .searchbox input {width: 60px} .searchbox input:focus {width: 100px} .orderlistcontainer div.activeOrder {margin-bottom:10px !important;} } /* Tablets - Portrait (iPad and iPad Mini) (Width Resolution between 569px and 768px) */ @media screen and (min-width:569px) and (max-width:768px) { #header-responsive{display:block} /* Layout */ #headerbar, #headerbar, #menubar, #totop-scroller { display: none; } #bottom-b .grid-box {width:20%;} #innerbottom .module {margin:10px 5px;} .NewsletterBox {display:block;} #bottom-a .grid-box {width:100%;} .searchbox {float:right; margin:0px 3px 10px;} select.menu-responsive {width:50%;} #header {padding-bottom:10px;} #FlexibleSwitchButtons {display:block; margin-left:20px;} .orderby-displaynumber .width50 {width:100%;} .orderby-displaynumber .width100 {text-align:right;} #bottom-pagination .FlexiblePagination {margin:10px 0;} #bottom-pagination .FlexiblePagination.floatright {float:right; display:inline-block;} #FlexibleDetailsLeft.width50 {width:50%;} #FlexibleDetailsRight.width50 {width:50%;} .FlexibleDetailsLeft_left.width20 {width:70px;} .FlexibleDetailsLeft_right.width10 {width:30px;} #FlexibleDetailsLeft .width78 {width:100%;} .FlexProductDetailV2left {margin-left:70px;margin-top:-20px; margin-right:10px;} .cart-view a.continue_link {margin:10px; padding:0 10px; font-size:11px;} .FlexibleLogin .width50 {width:100%;} .FlexibleLogin .width50:first-child {margin-bottom:40px;} .FlexibleLoginBox, .FlexibleLoginBoxRight {padding:0px;} div.FlexibleLogin {margin:0px;} .FlexibleForm {width:100%;} div.checkout-content-cart a.FlexibleSelectShippingButton, div.checkout-content-cart a.FlexibleSelectPaymentButton, div.checkout-content-cart .billto-shipto a.details, div.FlexibleLoginBoxRight a.FlexibleResgiterButton, div.FlexibleLoginBoxRight a.FlexibleGuestButton {font-size:11px;} div.checkout-content-cart table.newshoppingcart a.vm2-remove_from_cart {margin-left:0px;} input.coupon {width:100%; font-size:10px; line-height:15px; height:15px; float:right;} span.details-button input.details-button {line-height:20px; height:20px;} tr.sectiontableentry2 #userForm { width:120px; float:right;} span.details-button {display:block; margin:3px 0 0 0; float:right;} textarea.customer-comment {width:90%; background:#444; border-color:#555;} .checkout-button-top a.vm-button-correct {margin-top:15px;} div.FlexibleFormRow input#modlgn-username, div.FlexibleFormRow input#modlgn-passwd, .FlexibleForm .FlexibleFormRow input.login {width:100%;} #sidebar-a div.module div.vmgroup ul.vmproduct li img {max-width:90%;} } /* Tablets - Landscape (iPad and iPad Mini) (Width Resolution between 769px and 1024px) Landscape orientation of iPad doesn't requrie any responsiveness modification as the screen is large enough to see everything in a nice format. But if you are picky, you can do some modification for iPad Lanscape orientation in below CSS media rule.*/ @media screen and (min-width:769px) and (max-width:1024px) { } /* All resolution below 768px css rules will go below */ @media screen and (max-width:768px) { div#search {display:none;} .rs-caption h1 {font-size:30px;line-height:30px;margin:5px 0;} .rs-caption h3 {font-size:25px;line-height:25px;margin:5px 0;} .rs-caption h5 {font-size:20px;line-height:20px;margin:5px 0;} #FlexibleDetailsLeft.width50 {width:100%;} #FlexibleDetailsLeft .width20 {width:100%;} #FlexibleDetailsLeft .width78 {width:100%;} #FlexibleDetailsRight.width50 {width:100%;} .tabsstyleDIV .shadetabs li a { border-bottom:1px solid #fff;} div.vmFlyPageBottom div.tabsstyleDIV ul#vmtabs li, .tabsstyleDIV .shadetabs li a {float:none;} .FlexibleAskQuestionElement { display:none;} .FlexibleEnlargeView { display:none;} .mousetrap { display:none;} .FlexibleNeighboursNavigation { top:0px;} #header > div.wrapper { display:none;} #bottom-b .width25 { width:50%;} } /* All resolution above 768px css rules will go below */ @media screen and (min-width:768px) { div#search {display:block;} }