/*
Theme Name: Outdoors
Theme URI: http://www.ectwp.com/outdoors/
Version: 1
Description: Responsive base theme for ECT WP Our Stuff
Author: Andy Chapman
Author URI: http://www.ecommercetemplates.com
*/
/* ~~ This is the css file for the Ecommerce Templates Outdoors Responsive Design.
The first section correponds to the maximum width version of 1000 pixels ~~ */
@charset "utf-8";
/* ~~ Main settings ~~*/
body { margin:0 auto; padding:0px; font-family:Arial, serif; font-size:14px; color:#666; border-top:5px solid #999900;}
.main_wrapper { margin:0px; padding:0px;}
.header_wrapper { margin:0px; padding:0px;}
.mid_wrapper { margin:0px; padding:0px;}
.footer_wrapper { margin:0px; padding:0px; background-color:#999999; color:#FFF;}
#footer-widgets .footer-column{
float: left;
margin-bottom: 15px;
width:100%;
}
.footer_column{
float: left;
margin-bottom: 15px;
width:100%;
}
.FL { float:left;}
.FR { float:right;}
.width { width:100%;}
.clear { clear:both;}
.width_wrapper { max-width:1000px; margin:0 auto;}
/* ~~ Header section ~~*/
.logo_row { margin:0px; padding:15px 0 0px 0;}
.logo { float:left; margin:0px; padding:0px;}
.logo_right { float:right; width:50%; padding-top:10px;}
.welcome_msg { float:right; font-size:14px; color:#b3b3b3; font-weight:bold; margin-right:50px;}
ul.topLink, .topLink ul { float:right; margin:0px; padding:0px;}
ul.topLink li, .topLink ul li { float:left; margin:0px; padding:0px 0px 0px 15px; list-style:none;}
ul.topLink li a, .topLink ul li a { font-size:14px; color:#0973B8; font-weight:bold; text-decoration:none;}
ul.topLink li a:hover, .topLink ul li a:hover { text-decoration:underline;}
.topNav_wrapper { border-top:1px solid #e5e5e5; border-bottom:3px solid #e5e5e5; min-height:52px;}
/* ~~ Below header section ~~*/
.basket { float:right; background:url(images/cart_icon.png) no-repeat 3px; margin-top:11px; padding:5px 5px 5px 25px}
.basket a { color:#000; font-size:13px; color:#000; text-transform:uppercase; text-decoration:none; font-weight:bold;}
.searchBox { float:right; width:160px; position:relative; margin:15px 0 0 20px;}
.searchBox form { margin:0px; padding:0px;}
.searchBox Input.search_look { margin:0px; padding:3px 25px 3px 3px; color:#646464; border:1px solid #cccccc; width:100%; height:22px; line-height:22px; z-index:1; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */}
.searchBox .search_btn { margin:0px; padding:0px; width:25px; height:22px; background:url(images/search_icon.png) no-repeat center 2px; position:absolute; right:0px; top:0px; text-indent:-9999px; cursor:pointer; border:none;}
.service_section { border-bottom:1px solid #e5e5e5; padding:15px 0; }
.icon_refresh { float:left; background:url(images/message_icon.png) no-repeat 0 0; padding-left:40px; margin-right:120px; line-height:34px; font-size:14px; color:#0973B8; font-weight:bold;}
.icon_truck { float:left; background:url(images/icon_truck.png) no-repeat 0 0; padding-left:40px; line-height:34px; font-size:14px; color:#0973B8; font-weight:bold;}
.icon_phone { float:right; background:url(images/icon_phone.png) no-repeat 0 0; padding-left:40px; line-height:34px; font-size:14px; color:#0973B8; font-weight:bold;}
.banner_wrapper { line-height:0px;}
.banner_wrapper img { width:100%;}
.mid_area_bg { background:url(images/mid_area_bg.jpg) no-repeat center top; background-size:100% 100%; padding:50px 0 20px 0;}
.mid_area_space { padding:30px 0;}
/* ~~ Home page display ~~*/
.offer-banner-section {
margin: auto auto 25px;
overflow: hidden;
}
.offer-banner-section .col {
float: left;
width:33.6%;
}
.offer-banner-section .col-m {
float: left;
margin-left: 2.1%;
width: 28.5%;
}
.offer-banner-section .col-last {
float: right;
margin-right: 0;
width:33.6%;
}
.offer-banner-section .col-m img { max-width:100%;}
.offer-banner-section .col img, .offer-banner-section .col-last img { width:100%; border:1px solid #d3d3d3;}
.nec_collection_banner { margin-top:18px; border:1px solid #d3d3d3;}
ul.resp-tabs-list {
background:url(images/border_bg.png) repeat-x left bottom;
margin: 0px auto;
padding:0;
width:71%;
text-align:center;
}
ul.resp-tabs-list { margin: 0 auto 20px;}
.clear{ clear:both;}
.resp-tabs-list li {
font-size: 24px;
display: inline-block;
margin: 0;
padding:10px 25px;
list-style: none;
font-family:'Exo 2', Arial;
color:#666600;
text-transform:uppercase;
}
div.item img{
border:10px solid #FFF;
padding:0px 5px 0px 5px;
background:#fff;
}
div.item{
float:left;
}
.item h2 { font-family: Arial; font-size:16px; text-transform:uppercase; margin:0px; padding-top:2px; color: #999; text-decoration:none;
text-align:center;}
.product_listing { margin:0px; padding:0;}
.product_listing ul {margin:0px; padding:0;}
.product_listing li {margin:0 5% 20px 0; padding:0; float:left; list-style:none; float:left; width:30%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */}
.product_listing li.right { margin-right:0px;}
.product_listing li .product_img_box { background-color:#ffffff; padding:10px; margin-bottom:10px; }
.product_listing li .product_img_box a img { width:100%;}
h2.green_hr_text { margin:0px; padding:0px 0px 20px 0px; font-family:'Exo 2',Tahoma, Aricl; color:#666600; font-size:22px; text-transform:uppercase; line-height:normal;}
.product_listing li a { font-size:18px; color:#010000; text-decoration:none; font-weight:normal;}
/* ~~ Footer section ~~*/
.footer_space { padding:30px 0px 0px 0px;}
.footer_column h4, .footer_space h4 {
color: #fff;
font-size: 16px;
font-weight: bold;
margin: 0;
padding: 0 0 10px;
text-transform: uppercase;
font-family:'Exo 2', Arial;
}
.footer_column ul, .footer_space ul { margin:0px; padding:0;}
.footer_column li, .footer_space li { margin:0px; padding:0 0 4px 10px; list-style:none; background:url(images/footer_arrow.png) no-repeat 0 5px;}
.footer_column li a, .footer_space li a { color:#FFF; text-decoration:none;}
.footer_column li a:hover, .footer_space li a:hover { text-decoration:none; color:#ccc; }
.footer_social_row { float:right; border-top:1px solid #818080; border-bottom:1px solid #818080; padding:15px; margin-bottom:15px;}
ul.footer_social_icon { margin:0px; padding:0px; float:left;}
ul.footer_social_icon li { margin:0px; padding:0px 10px 0 0; list-style:none; float:left;}
ul.footer_social_icon li a { margin:0px; padding:0px;}
.payment_icon { float:right; margin-top:5px;}
.footer_bottom_links { background-color:#636363; padding:20px 0; color:#b3b3b3;}
.bottom_links { float:left;}
.bottom_links ul { margin:5px 0px 0px -10px; padding:0px;}
.bottom_links li { margin:0px; padding:0px 10px; display:inline; list-style:none; border-right:1px solid #b3b3b3;}
.bottom_links li:last-child, .bottom_links li.last { border-right:0px;}
.bottom_links li a {color:#b3b3b3; text-decoration:none;}
.bottom_links li a:hover { color:#FFF;}
.bottom_links a {color:#fff; text-decoration:none;}
.bottom_links a:hover { color:#ccc;}
.btn_search { margin:0px; padding:0px; width:36px; height:30px; text-indent:-9999px; cursor:pointer; background:url(images/btn_go.png) no-repeat 0 0; position:absolute; right:0; top:0px; border:0px;}
.basket_header { display:none;}
/* ~~ Inner pages ~~*/
.demo { width: 980px; margin: 0px auto;}
.demo h1 { margin:33px 0 25px; line-height: 30px;}
.demo h3 { margin: 10px 0; }
pre { background: #fff;}
.how-use, .content { padding: 10px; background: #F3F3F3;}
#tabInfo { display: none;}
.menu_right { float:right;}
.menu_right2 { width:100%; float:left;}
.menu_right2 { display:none;}
.sidebar { float:left; width:20%;margin-left:6px; }
.col_right { float:right; width:76%;}
.products_category_box { padding-bottom:20px;}
.products_category_box h4, .features_products_wrapper h2, #nav_menu-7 h4, .widgwpg-title { margin:10px 0px 0px 0px; padding:0px 0px 5px 0px; font-family:'Exo 2', Arial; color:#999900; font-size:16px; font-weight:normal; border-bottom:1px solid #e5e5e5;}
.products_category_box ul, #nav_menu-7 ul, #nav_menu-8 ul, .widget ul{ margin:0px; padding:0px;}
.products_category_box li, #nav_menu-7 li, #nav_menu-8 li, .widget ul li{ margin:0px; padding:3px 0px; list-style:none;}
.products_category_box li a, #nav_menu-7 li a, #nav_menu-8 li a, .widget ul li a { font-size:14px; color:#676767; text-decoration:none;}
.products_category_box li a:hover, #nav_menu-7 li a:hover, #nav_menu-8 li a:hover, .widget ul li a:hover{ color:#000;}
.features_products_wrapper {padding-bottom:20px;}
.features_products_wrapper ul { margin:0px; padding:0px;}
.features_products_wrapper li { margin:0px; padding:3px 0px; list-style:none;}
.features_products_wrapper li a { font-size:14px; color:#676767; text-decoration:none;}
.features_products_wrapper li a:hover { color:#000;}
p.more_link a { font-size:14px; color:#999900; text-decoration:underline; font-weight:bold;}
p.more_link a:hover { text-decoration:none;}
.special_offer_pr_box { background-color:#f6f6f8; padding:10px; margin-bottom:20px; position:relative;}
.special_offer { position:absolute; right:0px; top:0px;}
.special_offer_pr_box p.product_img { margin:0px; padding:20px 0px 0px 0px; text-align:center;}
.special_offer_pr_box p.product_name { font-size:18px; color:#996666; margin:0px; padding:10px 5px 0px 5px;}
.special_offer_pr_box p.product_name a { text-decoration:none; color:#996666;}
.contact_box_left, .widget_ectminicart_widget { margin:0 0 20px 0; padding:10px; background-color:#f6f6f8; font-size:12px; color:#7b7676; line-height:20px;}
.contact_box_left h2, .widget_ectminicart_widget h4 { margin:0 0 10px 0; padding:0px; font-family:'Exo 2', Arial;,font-size:14px; text-transform:uppercase; font-weight:bold; color:#666;}
.contact_box_left p, .widget_ectminicart_widget p { margin:0px; padding:0 0 5px 0;}
.contact_box_left p.comp_name { margin:0px; padding:0px; font-size:14px; color:#7b7676; font-weight:bold;}
.contact_box_left p.phone_no { background:url(images/phone_icon.png) no-repeat 0 2px; padding:0 0 5px 25px;}
.contact_box_left p.email_icon { background:url(images/email_icon.png) no-repeat 0 2px; padding:0 0 5px 25px;}
.contact_box_left p.email_icon a {color:#7b7676; text-decoration:none;}
/* ~~ Link properties ~~*/
a {
text-decoration: none;
padding:0;
margin:0;
outline: none;
color: #1089BC;
}
a:hover {
text-decoration: none;
}
/* Shopping cart classes
----------------------------------------------------------------------------------------------------*/
/*Shopping cart*/
table.cobtbl{
background-color: #ffffff;
border-bottom:1px solid #999900;
font-size:0.9em;
}
td.cobll, td.cobhl{
background-color: #fff;
color : #999;
}
td.cobhdr{
background-color:#ffffff;
font-size:1em;
color:#fff;
text-transform:uppercase;
}
.cobhdr a, .cobhdr link{
font-size:1em;
color:#fff;
text-transform:uppercase;
}
span.cartoption{
font-size:12px !important;
color:#333;
}
div.giftwrap a{
color:#666;
font-size:0.8em;
text-decoration:none;
}
/*Mini cart*/
table.mincart, .widget_ectminicart_widget .minicart{
width:99%;
font-size:1em;
background:#F6F6F8;
}
.cartquant{
width:36px !important;
}
/*Internal store naviagtion*/
a.ectlink:link {
color: #7A9024;
text-decoration: none;
}
a.ectlink:visited {
color: #7A9024;
text-decoration: none;
}
a.ectlink:active {
color: #7A9024;
text-decoration: none;
}
a.ectlink:hover {
color: #666;
text-decoration: none;
}
/*Button and form field styles*/
input.buybutton, input.sccheckout, input.checkoutbutton, input.vieworderstatus, input.viewlicense, input.trackpackage{
background:#7A9024;
color:#fff;
padding:6px 16px;
border:0;
border-radius:4px;
font-size:1.1em;
}
input.buybutton:hover, input.sccheckout:hover, input.checkoutbutton:hover, input.vieworderstatus:hover, input.viewlicense:hover, input.trackpackage:hover{
background:#ddd;
color:#000;
cursor:pointer;
}
input.login, input.newaffiliate, input.affiliatelogin, input.search{
background:#7A9024;
color:#fff;
padding:4px 16px;
border:0;
border-radius:4px;
font-size:1em;
margin-top:6px;
}
input.login:hover, input.newaffiliate:hover, input.affiliatelogin:hover, input.search:hover{
background:#aaa;
color:#000;
cursor:pointer;
}
/* The category page
-------------------------------------*/
div.category{
width:25%;
float:left;
line-height:1.6;
font-size:0.9em;
padding:7px;
text-align:left;
border:0px solid #ccc;
background-color:#fefefe;
margin:0px 0px 16px 16px;
}
div.category:hover{
background-color:#fff;
border: 0px solid #64842F;
box-shadow: 0px 0px 0px #ccc;
}
div.catnavigation{
padding:10px 0px 10px 12px;
float:left;
width:97%;
font-size:1em;
background-color:#eee;
border-bottom: 0px solid #999900;
margin-bottom:0px;
}
.catnavwrapper{
background:#fff !important;
border: 1px solid #fff !important;
}
div.navdesc{
display:none; /* Removes the text "View all products in all categories */
}
div.catimage{
width:95px;
}
div.catdesc{
padding:0px 0px 4px 4px;
font-size:0.9em;
}
div.catname{
padding-left:0px;
}
div.catdiscounts, div.allcatdiscounts{
padding:0px;
margin:0px;
font-weight:normal;
color:#DA6B1D;
font-size:0.9em;
}
div.categorymessage{
padding-top:0px;
font-size: 1.1em;
}
p.noproducts{
padding-top:28px;
text-align:left !important;
}
/* The products page
-------------------------------------*/
div.prodfilter{
float:left;
background-color:#F9F9F4;
border: 1px dotted #D7D1C9;
padding:6px;
color: #42619a;
margin-bottom:10px;
margin-top:10px;
}
div.prodfilterbar{
float:left;
width:100%;
}
div.filtertext{
padding:8px;
}
select.prodfilter{
padding:0px;
margin:0px;
}
div.product{
padding:6px;
width:30%;
margin:2px;
float:left;
height:330px;
}
div.prodnavigation{
padding:10px 0px 10px 12px;
float:left;
width:97%;
font-size:0.9em;
background-color:#eee;
border-bottom: 1px solid #999900;
margin-bottom:10px;
}
.prodratinglink{
font-size:0.8em;
}
div.allproddiscounts{
color:#DA6A1E;
width:100%;
margin-bottom:2px;
float:left;
}
.proddiscounts, .discountsapply{
color:#DA6A1E;
padding:4px;
}
div.prodmanufacturer{
color:#666;
padding:6px;
}
div.prodsku{
color:#666;
padding:6px;
}
div.prodimage{
padding-top: 6px;
text-align:center;
border:1px solid #ccc;
background-color:#fefefe;
}
div.prodimage:hover{
background-color:#fefefe;
border: 0px solid #7A9024;
box-shadow: 0px 0px 0px #ccc;
}
img.prodimage{
width:210px;
height:181px;
}
div.prodname{
padding-top:4px; margin-bottom:4px;
}
div.prodrating{
padding-left:4px;
}
div.prodinstock{
padding:4px;
color:#666;
}
div.proddescription{
float:left; font-size: 0.7em; line-height: 1.2em;
}
table.emftbl{
background:#fff;
width:400px;
}
div.listprice{
width:98%;
float:left;
font-size: 0.9em;
padding:2px 6px;
}
span.yousave{
background:#0065A7;
color:#fff;
padding:4px;
font-size:0.9em;
}
div.prodprice{
font-size: 1em;
font-weight:normal;
float:left;
width:98%;
color:#666;
padding:2px 6px;
}
div.prodcurrency{
float:left;
width:100%;
font-size: 0.8em;
color:#666;
}
div.quantitydiv{
float:right;
}
.quantityinput{
margin-top:1px;
height:19px;
}
div.addtocart{
text-align:center;
float:left;
width:100%;
}
.notifystock{
text-align:center;
float:left;
width:100%;
}
.configbutton{
text-align:center;
margin-top:6px;
}
div.outofstock{
text-align:center;
padding-top:6px;
font-weight:bold;
}
.prodid {
color:#666;
padding:6px;
font-size: 0.9em;
}
div.multioptiontext{
width:180px;
}
div.pagenums{
text-align:center;
float:left;
padding:0px 0px 10px 0px;
}
/* The product detail page
-------------------------------------*/
div.detailprodnavigation{
width:96%;
}
div.detailimage{
width:26%;
padding:10px;
float:left;
clear:both;
}
div.detailcheckoutbutton{
clear:both;
}
div.detailid {
color:#ccc;
width:66%;
font-size: 1em;
float:left;
margin-left:10px;
}
.detailname h1 {
font-size: 1.2em;
padding:6px;
float:right;
width:66%;
margin-top:10px;
margin-bottom:12px;
border-bottom: 1px solid #ccc;
}
span.detaildiscountsapply{
width:66%;
margin-left:36px;
}
div.detailmanufacturer{
float:left;
width:66%;
margin:0px 0px 0px 10px;
padding:0px;
}
div.detailsku{
float:left;
width:66%;
margin:10px;
}
div.detailinstock{
float:right;
width:66%;
}
div.detaildescription{
font-size: 0.9em;
margin:5px;
padding-top:4px;
line-height:1.8em;
float:right;
width:66%;
}
.yousave{
margin:10px 0px;
}
div.detailprice{
font-size: 1.2em;
font-weight:bold;
float:left;
width:96%;
color:#333;
padding:6px 0px;
}
div.detaillistprice{
font-size: 1em;
font-weight:normal;
float:left;
width:100%;
margin:6px 0px;
color:#DA6A1E;
}
div.detailcurrency{
padding-top: 6px;
font-size: 0.9em;
float:left;
width:98%;
color:#666;
margin-left:10px;
border-bottom: 1px solid #ccc;
padding-bottom:20px;
}
div.detailoption{
width:100%;
}
div.detailoptions{
padding: 6px;
float:left;
width:60%;
margin-left:0px;
}
select.detailprodoption{
font-size: 0.9em;
width:50%;
margin:7px;
border:1px solid #ccc;
padding:2px;
}
input.detailprodoption{
font-size: 0.9em;
margin:7px;
border:1px solid #ccc;
padding:2px;
}
div.detailoptiontext{
padding: 6px;
width:32%;
float:left;
clear:both;
}
div.detailmultioptiontext{
padding: 6px;
width:30%;
clear:right;
}
.previousnext{
padding-top:20px;
padding-bottom:6px;
float:right;
width:100%;
text-align:center;
font-size:0.8em;
border-top:1px solid #ccc;
}
div.emailfriend{
padding-top: 10px;
text-align:center;
float:right;
width:100%;
font-size:0.9em;
clear:both;
}
td.emfhl{
background-color:#aaa;
font-size:1.2em;
color:#fff;
font-weight:bold;
}
td.emfll{
line-height:18px;
}
div.detailquantity{
clear:left;
float:left;
width:130px;
}
div.detailquantitytext{
margin-top:20px;
float:left;
width:30%;
text-align:right;
}
div.detailquantityinput{
margin-top:16px;
float:right;
width:50%;
text-align:left;
padding:0px;
height:65px;
}
#w0quant{
height:21px;
width:50px;
border:1px solid #ccc;
}
div.detailaddtocart,.detailoutofstock{
float:left;
width:100px;
text-align:left;
padding-bottom:20px;
margin-top:15px;
}
.detailnotifystock{
text-align:center;
padding-top:6px;
float:left;
width:98%;
}
div.navdesc{
padding-top:10px;
}
div.review{
float:left;
margin-top:16px;
width:90%;
font-size:0.9em;
}
hr.review{
height: 0;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #bbb;
padding:4px;
margin-top:6px;
}
div.reviewprod{
background-color:#eee;
padding:10px;
}
/* This is the first breakpoint and is for screen sizes between 800 and 780 pixels.
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below ~~ */
@media screen and (max-width: 800px) {
.menu_right { display:none;}
.menu_right2 { display:inherit; float: left; padding-bottom: 10px; width: 100%;}
.menu_right2 .searchBox { float: right; margin: 15px 0 0 20px; position: relative; width: 210px;}
.menu_right2 .basket { background: url("images/cart_icon.png") no-repeat scroll 0 3px rgba(0, 0, 0, 0); float: left; margin-right: 10px; margin-top: 14px; padding: 5px 5px 5px 25px;}
.logo_row {padding: 50px 15px 40px;}
.logo_right {width: 64%;}
.welcome_msg {clear: both; float: none; margin-right: 0; padding-top: 10px; text-align: right;}
.service_section {padding: 15px 15px;}
.nec_collection_banner { margin-top: 13px;}
.icon_refresh { margin-right: 27px; margin-bottom:10px;}
.searchBox {margin: 15px 15px 0 20px;}
.footer_space { padding: 30px 15px 0;}
.bottom_links { float: none; padding-left: 0; text-align: center;}
.newsletter { float: none; margin: 20px auto; width: 345px;}
div.product{
width:30%;
}
}
/* This is the second breakpoint and is for screen sizes between 780 and 640 pixels.
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below ~~ */
@media only screen and (max-width: 780px) {
div.product{
width:46%;
}
div.category{
width:90%;
}
.detailname h1, span.detaildiscountsapply, div.detaildescription, div.detailinstock{
width:62%;
}
span.detaildiscountsapply{
margin-left:44px;
}
div.detailimage{
width:24%;
}
div.detailoptions{
width:90%;
}
div.detailmultioptiontext{
width:45%;
}
}
/* This is the third breakpoint and is for screen sizes between 640 and 500 pixels.
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below ~~ */
@media screen and (max-width: 640px) {
h1.logo { float: none; text-align: center; margin-bottom:10px;}
.logo_right { text-align: center; width: 100%;}
ul.topLink {float: none;}
ul.topLink li {display: inline; float: none; padding: 10px 0 0 15px;}
.welcome_msg { text-align:center;}
.logo_right {float: none;}
.basket_header { padding:0px; margin-top:20px; display: block; background:none; float:none; text-align:center; clear:both;}
.basket_header a { background:url(images/cart_icon.png) no-repeat 0 0px; padding-left:25px;}
.icon_refresh { width:100%; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */}
.sidebar { float: none; margin-bottom: 20px; width: 96%; padding:0 15px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.col_right { float: none; width: 100%; padding:0 15px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
}
/* This is the fourth breakpoint and is for screen sizes between 500 and 360 pixels.
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below ~~ */
@media screen and (max-width: 500px) {
div.logo{width:96%;text-align:center;}
.logo_row { margin:0px; padding:10px 0 10px 0;}
div.icon_refresh, div.icon_truck, div.icon_phone{display:none;} /* Removes the offers from the top fo home page on small displays - remove this line if you want them to appear */
div.basket, div.basket_dis { float: left; margin-right: 0px; margin-top: 10px; padding: 5px;width:40%;}
div.service_section{padding:0px; width:98%;}
.menu_right2 .searchBox { float: right; margin: 15px 0 0 0px; position: relative; width: 160px;}
.offer-banner-section .col, .offer-banner-section .col-m, .offer-banner-section .col-last {float: none; width: 100%; text-align:center; margin-bottom:20px; margin-left:0px;}
.offer-banner-section .col img, .offer-banner-section .col-last img { width:auto; max-width:100%;}
.product_listing li {float:none; margin: 0 0 20px; width: 100%; padding:0 15px;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */ }
.product_listing li .product_img_box { text-align:center;}
.product_listing li .product_img_box a img { max-width: 100%; width: auto;}
.product_listing h2{text-align:center;}
div.item{ width: 100%; text-align:center;}
.footer_social_row {text-align: center; padding: 15px 0;}
ul.footer_social_icon {float: none;}
ul.footer_social_icon li { display: inline; float: none; padding:0;}
.payment_icon { float: none; margin-top: 15px;}
.footer_space { padding: 30px 20px 0;}
.footer_column { float: none; margin-bottom: 15px; width: 100%;}
.bottom_links ul {margin: 10px 0 0 -10px;}
div.product{
width:95%;
height:auto;
}
div.prodnavigation{
width:95%;
}
div.detailimage{
width:95%;
}
.detailname h1, span.detaildiscountsapply, div.detaildescription{
width:95%;
}
span.detaildiscountsapply{
margin-left:10px;
}
div.detailmultioptiontext{
width:95%;
}
div.category{
width:85%;
}
/* ~~ Remove left hand field on checkout ~~*/
.cobcol1{
display:none;
}
/* ~~ Modify additional info field on checkout ~~*/
textarea.addinfo{
width:150px;
}
}
/* This is the fifth breakpoint and is for screen sizes between 360 and below.
If there is no difference in the classes above, you would use the classes above or if you need to make changes at this resolution, add them below ~~ */
@media screen and (max-width: 360px) {
.icon_phone { float:left; margin-top:10px;}
.menu_right2 .basket { float:left;}
.menu_right2 .searchBox { margin-left:0px;}
.menu_right2 .searchBox {width: 90px;}
}
@media screen and (max-width: 320px) {
}
.FL h1
{
margin-top:0px;
}
@media screen and (max-width:700px) {
.sb
{
display:none;
}
#footer-widgets .footer-column
{
width:100%;
}
}
@media screen and (min-width:380px) and (max-width:414px) {
#footer-widgets .footer-column
{
width:100%;
}
}
/* STYLE SHEET FOR THE ECT CART PAGE */
/* CART CONTAINER */
div.cartcontentsdiv{
width:100%;
float:left;
}
/* BACK ORDER */
div.cartbackorder{
float:left;
width:98%;
font-weight:bold;
}
/* LOW STOCK WARNING */
div.cartoutstock{
float:left;
width:98%;
font-weight:bold;
margin:6px 0px 6px 0px;
}
div.cartstockacceptlevel{
float:left;
width:98%;
font-weight:bold;
margin:6px 0px 6px 0px;
}
div.cartoptionoutstock{
text-align:center;
}
/* TOP ROW */
div.cartdetails_cntnr{
float:left;
width:100%;
white-space:nowrap;
padding:2px;
margin:1px
}
div.cartdetails{
display:inline-block;
white-space:normal;
border-bottom:1px solid #999;
padding-bottom:6px;
margin:12px 0px 6px 0px;
}
div.cartdetailsid{
width:25%;
}
div.cartdetailsname{
width:35%;
}
div.cartdetailsprice{
width:13%;
}
div.cartdetailsquant{
width:8%;
}
div.cartdetailstotal{
width:8%;
text-align:right;
}
div.cartdetailscheck{
width:10%;
}
/* PRODUCT ROW */
div.cartline{
float:left;
width:100%;
white-space:nowrap;
padding-bottom:6px;
margin-bottom:6px;
}
div.cartlineid{
width:25%;
display:inline-block;
white-space:normal;
vertical-align:top; /* If you don't use the image in cart, remove this line */
}
div.cartlinename{
width:35%;
display:inline-block;
white-space:normal;
}
div.cartlineprice{
width:13%;
display:inline-block;
white-space:normal;
}
div.cartlinequant{
width:8%;
display:inline-block;
white-space:normal;
}
div.cartlinetotal{
width:8%;
display:inline-block;
white-space:normal;
text-align:right;
}
div.cartlinecheck{
width:10%;
display:inline-block;
white-space:normal;
text-align:center;
vertical-align:middle;
}
/* OPTIONS ROW */
div.cartoptionsline{
float:left;
width:100%;
white-space:nowrap;
padding:2px 2px 6px 2px;
margin:1px 1px 12px 1px;
}
div.cartandoptsline{
float:left;
width:100%;
border-bottom:1px solid #ccc;
margin-bottom:12px;
}
div.cartoptiongroup{
width:25%;
display:inline-block;
white-space:normal;
font-size:0.9em;
}
div.cartoption{
width:35%;
display:inline-block;
white-space:normal;
font-size:0.9em;
}
div.cartoptionprice{
width:14%;
display:inline-block;
white-space:normal;
font-size:0.9em;
}
div.cartoptionoutstock{
width:7%;
display:inline-block;
white-space:normal;
}
div.cartoptiontotal{
width:18%;
display:inline-block;
white-space:normal;
text-align:right;
font-size:0.9em;
}
/* PACKAGE FEATURE */
div.packagediv{
float:left;
width:100%;
}
div.packagerow{
float:left;
width:100%;
}
/* LOYALTY POINTS */
div.cartloyaltypoint_cntnr{
float:left;
width:99%;
}
div.cartloyaltypointmenu{
float:left;
width:77%;
text-align:right;
}
div.cartloyaltypoints{
float:left;
width:18%;
text-align:left;
padding-left: 4px;
}
/* SHIPPING */
div.cartshippingandtotals{
float:left;
width:100%;
margin-bottom:12px;
}
div.cartshippingdetails{
float:left;
width:60%;
padding:2px;
margin:1px;
}
div.estimatorerrors{
width:98%;
float:left;
margin-bottom:12px;
}
div.estimatortitle{
width:98%;
float:left;
font-size:1.2em;
padding-bottom:6px;
}
div.cartestimatortext{
display:inline-block;
white-space:normal;
width:100%;
margin-bottom:12px;
}
div.estimatorchecktext{
display:inline-block;
white-space:normal;
width:49%;
}
div.estimatorcheckcarrier{
display:inline-block;
white-space:normal;
width:49%;
}
div.shipline{
width:98%;
float:left;
}
div.shiplinetext{
width:70%;
float:left;
}
div.shipradio{
width:25%;
float:left;
}
div.cartstateselectortext{
display:inline-block;
white-space:normal;
width:20%;
}
div.cartstateselector{
display:inline-block;
white-space:normal;
width:77%;
}
div.cartcountryselectortext{
display:inline-block;
white-space:normal;
width:20%;
}
div.cartcountryselector{
display:inline-block;
white-space:normal;
width:77%;
}
div.cartzipselectortext{
display:inline-block;
white-space:normal;
width:20%;
margin-top:8px;
}
div.cartzipselector{
display:inline-block;
white-space:normal;
width:77%;
margin-top:8px;
}
div.cartestimatorend{
float:left;
width:98%;
margin-top:12px;
}
/* TOTALS */
div.carttotals{
float:left;
width:39%;
}
div.cartsubtotal_cntnr{
float:left;
width:100%;
white-space:nowrap;
}
div.cartsubtotaltext{
display:inline-block;
white-space:normal;
width:53%;
margin:6px 0px 6px 0px;
}
div.cartsubtotal{
display:inline-block;
white-space:normal;
width:45%;
text-align:right;
}
div.shippingtotaltext{
display:inline-block;
white-space:normal;
width:53%;
margin-bottom:6px;
}
div.shippingtotal{
display:inline-block;
white-space:normal;
width:45%;
text-align:right;
}
div.cartcountrytaxtext{
display:inline-block;
white-space:normal;
width:53%;
margin-bottom:6px;
}
div.cartcountrytax{
display:inline-block;
white-space:normal;
width:45%;
text-align:right;
}
div.cartdiscountstext{
display:inline-block;
white-space:normal;
width:53%;
margin-bottom:6px;
}
div.cartdiscounts{
display:inline-block;
white-space:normal;
width:45%;
text-align:right;
}
div.cartcoupontext{
display:inline-block;
white-space:normal;
width:99%;
margin-bottom:6px;
}
div.cartcoupon{
display:inline-block;
white-space:normal;
width:99%;
}
div.cartgiftcerttext{
display:inline-block;
white-space:normal;
width:53%;
margin-bottom:6px;
}
div.cartgiftcert{
display:inline-block;
white-space:normal;
width:45%;
text-align:right;
}
div.cartgrandtotaltext{
display:inline-block;
white-space:normal;
width:53%;
margin-bottom:6px;
padding: 3px 0px;
font-size:1.1em;
/* border-top:1px solid #999; Uncomment this line if you want a border above the grand total*/
border-bottom:1px solid #999;
}
div.cartgrandtotal{
display:inline-block;
white-space:normal;
width:45%;
padding: 3px 0px;
text-align:right;
font-size:1.1em;
/* border-top:1px solid #999; Uncomment this line if you want a border above the grand total*/
border-bottom:1px solid #999;
}
div.cartcontinueupdate{
width:100%;
float:right;
}
div.cartcontinue{
width:50%;
float:right;
text-align:right;
}
div.cartupdate{
width:50%;
float:right;
}
div.cartcheckoutbuttons{
float:left;
width:100%;
margin-top:18px;
text-align:right;
}
div.checkoutopts{
float:right;
width:140px;
text-align:right;
}
div.cominpurchase{
float:left;
width:100%;
text-align:center;
margin:6px 0px 6px 0px;
padding:6px;
border:1px solid #ccc;
background:#eee;
}
div.tofreeshipping{
float:left;
width:100%;
text-align:center;
margin:6px 0px 6px 0px;
padding:6px;
border:1px solid #ccc;
background:#eee;
}
div.coforcelogin{
float:left;
width:100%;
text-align:center;
margin:6px 0px 6px 0px;
padding:6px;
border:1px solid #ccc;
background:#eee;
}
/* DISCOUNT FORMATTING */
div.ectdscntt{
color:#AD2803;
}
div.ectdscnt{
color:#AD2803;
}
/* COUPON FORMATTING */
#cpncodespan{
font-size:0.8em;
}
#cpncodespan div{
padding: 4px 12px 4px 0px;
}
/* ERROR / WARNING FORMATTING */
div.ectwarning{
color:#AD2803;
}
div.estimatorerror{
color:#AD2803;
}
/* NEW ACCOUNT */
div.cartnewaccountheader{
width:98%;
float:left;
border-bottom:1px solid #999;
padding-bottom:6px;
margin:12px 0px 16px 0px;
font-size:1.2em;
}
div.cartnewaccount{
float:left;
width:100%;
font-size:1.2em;
border-bottom:1px solid #999;
padding-bottom: 6px;
margin-bottom:12px;
}
div.cartloginsuccess{
float:left;
width:100%;
text-align:center;
padding:6px 0px;
}
div.cartloginsuccesswait{
float:left;
width:100%;
text-align:center;
padding:6px 0px;
}
div.cartacctloginname_cntnr{
float:left;
width:100%;
}
div.cartacctloginnametext{
float:left;
width:25%;
padding-top:8px;
}
div.cartacctloginname{
float:left;
width:75%;
padding-top:8px;
}
div.cartacctloginallowpromo_cntnr{
float:left;
width:100%;
}
div.cartaccloginallowpromo{
float:left;
width:25%;
text-align:right;
}
div.cartaccloginallowpromotext{
float:left;
width:73%;
padding-left:3px;
}
div.cartacctloginemail_cntnr{
float:left;
width:100%;
}
div.cartaccloginemailtext{
float:left;
width:25%;
padding-top:8px;
}
div.cartaccloginemail{
float:left;
width:75%;
padding-top:8px;
}
div.cartaccloginpassword_cntnr{
float:left;
width:100%;
}
div.cartaccloginpasswordtext{
float:left;
width:25%;
padding-top:8px;
}
div.cartaccloginpassword{
float:left;
width:75%;
padding-top:8px;
}
div.cartaccloginextra1text{
float:left;
width:25%;
padding-top:8px;
}
div.cartaccloginextra1{
float:left;
width:75%;
padding-top:8px;
}
div.cartaccloginalsubmit{
float:left;
width:100%;
text-align:right;
}
/* LOGIN */
div.loginprompt{
float:left;
width:100%;
}
div.logintoaccount{
width:50%;
float:left;
}
div.createaccount{
width:50%;
float:left;
}
div.cartloginheader{
float:left;
width:100%;
font-size:1.2em;
border-bottom:1px solid #999;
padding-bottom: 6px;
margin-bottom:12px;
}
div.cartloggedin{
float:left;
width:100%;
font-size:1.1em;
border-bottom:1px solid #999;
padding-bottom: 6px;
margin-bottom:12px;
}
div.cartloginemail_cntnr{
float:left;
width:100%;
}
div.cartloginemailtext{
float:left;
width:25%;
padding-top:8px;
}
div.cartloginemail{
float:left;
width:75%;
padding-top:8px;
}
div.cartloginpwd_cntnr{
float:left;
width:100%;
}
div.cartloginpwdtext{
float:left;
width:25%;
padding-top:8px;
}
div.cartloginpwd{
float:left;
width:75%;
padding-top:8px;
}
div.cartlogincookie_cntnr{
float:left;
width:100%;
}
div.cartlogincookie{
float:left;
width:25%;
text-align:right;
padding-top:8px;
}
div.cartlogincookietext{
float:left;
width:72%;
padding-left:6px;
padding-top:8px;
}
div.cartloginbuttons{
width:100%;
float:left;
margin-top:12px
}
div.cartloginlogin{
width:20%;
float:left;
}
div.cartloginnewacct{
width:35%;
float:left;
}
div.cartloginforgotpwd{
width:45%;
float:left;
text-align:right;
}
/* WISH LIST */
div.cartviewinglist{
float:left;
width:100%;
}
span.listname{
font-weight:normal;
}
#savecartlist{
background:#fcfcfc;
}
/* EMPTY CART */
div.emptycart{
float:left;
text-align:center;
width:100%;
}
div.sorrycartempty{
float:left;
width:100%;
margin-top:10px;
padding:8px;
}
div.cartemptyclickhere{
float:left;
width:100%;
padding:8px;
}
div.emptycartviewmain{
float:left;
width:100%;
padding:8px;
}
div.emptycartcontinue{
float:left;
width:100%;
padding:8px;
}
div.mywishlistemptycart{
float:left;
width:100%;
}
div.emptycartemptylist{
float:left;
width:100%;
}
/* MAILING LIST CONFIRMATION */
div.cartemailconftitle{
width:100%;
float:left;
text-align:center;
padding:8px 0px;
}
div.cartemailconfaction{
width:100%;
float:left;
text-align:center;
padding:8px 0px;
}
div.cartemailconfcontinue{
width:100%;
float:left;
text-align:center;
padding:8px 0px;
}
/* GIFT WRAP */
div.giftwrap{
float:left;
width:100%;
}
div.giftwrapdiv{
float:left;
width:100%;
white-space:nowrap;
padding:2px;
margin:1px
}
div.giftwrapdetailscntr{
display:inline-block;
white-space:normal;
}
div.giftwrapid{
width:25%;
float:left;
border-bottom:1px solid #999;
padding-bottom:6px;
margin:12px 0px 6px 0px;
}
div.giftwrapname{
width:25%;
float:left;
border-bottom:1px solid #999;
padding-bottom:6px;
margin:12px 0px 6px 0px;
}
div.giftwrapquant{
width:25%;
float:left;
border-bottom:1px solid #999;
padding-bottom:6px;
margin:12px 0px 6px 0px;
}
div.giftwrapyes{
width:25%;
float:left;
border-bottom:1px solid #999;
padding-bottom:6px;
margin:12px 0px 6px 0px;
}
div.giftwrapupdate{
width:100%;
float:left;
}
div.giftwraplineid{
display:inline-block;
white-space:normal;
width:25%;
vertical-align:top;
}
div.giftwraplinename{
display:inline-block;
white-space:normal;
width:25%;
vertical-align:top;
}
div.giftwraplinequant{
display:inline-block;
white-space:normal;
width:25%;
vertical-align:top;
}
div.giftwraplineyes{
display:inline-block;
white-space:normal;
width:25%;
vertical-align:top;
}
div.giftwraptmessage{
width:17%;
float:left;
}
div.giftwrapmessage{
width:99%;
float:left;
}
div.giftwraplinemessage{
width:98%;
}
div.giftwraplinemessage textarea{
width:100%;
}
div.giftwrapbuttons{
width:100%;
float:left;
text-align:right;
margin-top:12px;
}
/* BILLING & SHIPPING */
div.cart2details{
width:98%;
float:left;
}
div.cart2header{
width:100%;
float:left;
border-bottom:1px solid #999;
padding-bottom:6px;
margin:12px 0px 6px 0px;
font-size:1.2em;
}
div.billformrow{
float:left;
width:100%;
}
div.shipformrow{
float:left;
width:100%;
}
div.checkoutadditionals{
float:left;
width:100%;
}
div.cobhl2{
padding-top:8px;
}
div.cobll2{
padding-top:8px;
}
div.cdformtextra1{
float:left;
width:30%;
}
div.cdformextra1{
float:left;
width:70%;
}
div.cdformtname{
float:left;
width:30%;
}
div.cdformname{
float:left;
width:70%;
}
div.cdformtemail{
float:left;
width:30%;
}
div.cdformemail{
float:left;
width:70%;
}
div.cdformtaddress{
float:left;
width:30%;
}
div.cdformaddress{
float:left;
width:70%;
}
div.cdformtaddress2{
float:left;
width:30%;
}
div.cdformaddress2{
float:left;
width:70%;
}
div.cdformtcity{
float:left;
width:30%;
}
div.cdformcity{
float:left;
width:70%;
}
div.cdformtstate{
float:left;
width:30%;
}
div.cdformstate{
float:left;
width:70%;
}
div.cdformtcountry{
float:left;
width:30%;
}
div.cdformcountry{
float:left;
width:70%;
}
div.cdformtzip{
float:left;
width:30%;
}
div.cdformzip{
float:left;
width:70%;
}
div.cdformtphone{
float:left;
width:30%;
}
div.cdformphone{
float:left;
width:70%;
}
div.cdformtextra2{
float:left;
width:30%;
}
div.cdformextra2{
float:left;
width:70%;
}
div.coshipflagscontainer{
float:left;
width:100%;
margin-bottom:12px
}
div.cdshipftflag{
float:left;
width:32% !important;
text-align:right;
padding-right:12px;
padding-top:12px;
}
div.cdshipflag{
float:left;
width:66% !important;
padding-top:12px;
font-size:0.9em;
}
div.cdformtextraco1{
float:left;
width:30%;
}
div.cdformextraco1{
float:left;
width:70%;
}
div.cdformtextraco2{
float:left;
width:30%;
}
div.cdformextraco2{
float:left;
width:70%;
}
div.cdformtterms{
float:left;
width:32%;
text-align:right;
padding-right:12px;
padding-top:12px;
}
div.cdformterms{
float:left;
width:66%;
padding-top:12px;
}
div.cdformshipdiff{
float:left;
width:100%;
padding:12px 0px 12px 0px;
}
input.cdformshipdiff{
margin-right:12px;
}
div.cdformtaddinfo{
float:left;
width:30%;
}
div.cdformaddinfo{
float:left;
width:70%;
}
textarea.addinfo{
width:90%;
}
div.cdformtremember{
float:left;
width:32%;
text-align:right;
padding-right:12px;
padding-top:12px;
}
div.cdformremember{
float:left;
width:66%;
padding-top:12px;
}
div.cdformtmailing{
float:left;
width:32%;
text-align:right;
padding-right:12px;
padding-top:12px;
}
div.cdformmailing{
float:left;
width:66%;
padding-top:12px;
}
div.cdformtcoupon{
float:left;
width:30%;
padding-top:12px;
}
div.cdformcoupon{
float:left;
width:70%;
padding-top:12px;
}
div.cdformtitle{
float:left;
width:100%
}
div.cdformtitlell{
float:left;
width:100%;
}
div.cdform2column{
float:left;
width:100%;
}
div.cdformtpayment{
float:left;
width:30%;
clear:left;
padding-top:12px;
}
div.cdformpayment{
float:left;
width:70%;
padding-top:12px;
}
div.payprovider{
float:left;
width:100%;
}
div.payprovline{
float:left;
width:100%;
margin-bottom:8px;
}
div.payprovline img{
vertical-align:top;
margin-left:12px;
}
div.checkoutbutton2{
float:left;
width:100%;
text-align:right;
}
div.cdformsubmit{
float:left;
width:100%;
}
/* SHIPPING TOTALS SCREEN */
div.cart3details{
width:98%;
float:left;
}
div.cartheader{
width:100%;
float:left;
font-size:1.2em;
}
div.cart3header{
border-bottom:1px solid #999;
padding-bottom:6px;
margin:12px 0px 6px 0px;
font-size:1.2em;
}
div.cart2column{
width:100%;
float:left;
padding-bottom:6px;
margin:12px 0px 6px 0px;
}
div.cart3row{
width:100%;
float:left;
}
div.cobhl3{
width:30%;
float:left;
padding-bottom:6px;
}
div.cart3totgoodst {
border-bottom:1px solid #ccc;
margin-bottom:12px;
font-size:1.1em;
}
div.cart3totgoods {
border-bottom:1px solid #ccc;
margin-bottom:12px;
font-size:1.1em;
}
div.cobll3{
width:70%;
float:left;
padding-bottom:6px;
}
div.shiprateline{
width:100%;
float:left;
}
div.shiptableline{
width:100%;
float:left;
}
div.shiprateradio{
width:10%;
float:left;
}
div.shipratemethod{
width:65%;
float:left;
}
div.shiptablelogo{
height: 10em;
position: relative;
width:80px;
height:60px;
float:left;
}
div.shiptablelogo img{
margin: 0;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
div.shiptablerates{
float:left;
width:70%;
min-height:45px;
padding:18px 0px 0px 16px;
}
div.cartheading{
width:100%;
float:left;
padding-bottom:6px;
margin:12px 0px 16px 0px;
border-bottom:1px solid #999;
font-size:1.2em;
}
div.cart3gndtot {
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
margin-bottom:12px;
padding-top:6px;
font-size:1.2em;
}
div.cart3gndtott {
border-bottom:1px solid #ccc;
border-top:1px solid #ccc;
margin-bottom:12px;
padding-top:6px;
font-size:1.2em;
}
/* CREDIT CARD RESULTS SCREEN */
div.cart4details{
width:98%;
float:left;
}
div.cart4header{
width:100%;
float:left;
padding-bottom:6px;
margin:12px 0px 16px 0px;
border-bottom:1px solid #999;
font-size:1.2em;
}
div.cobhl4{
width:35%;
float:left;
margin-bottom:12px;
padding-top:8px;
}
div.cobll4{
width:65%;
float:left;
margin-bottom:12px;
padding-top:8px;
}
div.cart4row{
width:100%;
float:left;
}
div.cart4buttons{
width:100%;
float:left;
text-align:right;
}
div.checkoutbutton3{
width:100%;
float:left;
text-align:right;
}
/* SECOND LINE TEXT ENTRIES */
span.ectsmallnote{
font-size:0.8em;
}
/* END OF CART CLASSES */
/* STYLE SHEET FOR THE ECT SEARCH PAGE */
/* Main div container */
div.searchform{
width:98%;
float:left;
}
/* Search header div */
div.searchheader{
width:98%;
float:left;
border-bottom:1px solid #999;
padding-bottom:6px;
margin:12px 0px 16px 0px;
font-size:1.2em;
}
/* Search label divs */
div.searchfortext, div.searchpricetext, div.searchtypetext, div.searchcategorytext, div.searchfilterstext{
width:24%;
float:left;
padding:8px 4px;
white-space:nowrap;
}
/* Search form field divs */
div.searchfor, div.searchprice, div.searchtype, div.searchcategory, div.searchfilters{
width:72%;
float:left;
padding:8px 4px;
}
/* Search form field formatting */
div.searchfor input{
width:80%;
border: 1px solid #ccc;
padding:6px;
}
div.searchprice input{
border: 1px solid #ccc;
padding:6px;
}
div.searchtype select{
width:170px;
padding:4px;
}
div.searchcategory select{
width:170px;
padding:4px;
}
/* Search filters set to 2 columns by 48% width - use 98% for one column */
div.searchfiltergroup{
padding:4px 0px;
width:48%;
float:left;
}
div.searchfiltergroup select{
width:170px;
padding:4px;
}
/* Div containing submit button */
div.searchsubmit{
width:98%;
float:left;
text-align:right;
}
/* END OF SEARCH CLASSES */
/* STYLE SHEET FOR THE ECT AFFILIATE, ORDER STATUS, CLIENT LOGIN, TRACKING PAGES */
/* Main div container */
div.ectdiv{
width:98%;
float:left;
margin-bottom:20px;
}
/* Header div */
div.ectdivhead{
width:98%;
float:left;
border-bottom:1px solid #999;
padding-bottom:6px;
margin:12px 0px 16px 0px;
font-size:1.2em;
}
/* Label divs */
div.ectdivleft{
width:28%;
float:left;
padding:8px 4px;
white-space:nowrap;
clear:both;
}
/* Form field divs */
div.ectdivright{
width:68%;
float:left;
padding:8px 4px;
}
/* Form field formatting */
div.ectdivright input{
width:60%;
border: 1px solid #ccc;
padding:6px;
}
div.ectdivright select{
width:63%;
border: 1px solid #ccc;
padding:6px;
}
div.ectdivright input[type=checkbox]{
width:10px;
}
/* Div spanning 2 columns */
div.ectdiv2column{
width:98%;
float:left;
margin:8px 0px;
}
div.ectdiv2column ul{
list-style:none;
}
/* Warning message on Order Status page */
div.ectorderstatus div.ectwarning{
width:98%;
float:left;
}
/* Text based div */
div.ectmessagescreen{
float:left;
width:98%;
}
div.ectmessagescreen input{
margin-top:12px;
}
/* Account details on client login */
div.ectclientloginaccount div.ectdivleft{
white-space:normal;
}
/* Address details on client login */
div.ectclientloginaddress div.ectdivleft{
width:48%;
}
div.ectclientloginaddress div.ectdivright{
width:48%;
}
/* Gift registry on client login */
div.ectclientlogingiftreg input{
width:120px;
}
div.ectclientlogingiftreg input[type=button]{
width:120px;
}
div.ectclientloginorders{
float:left;
}
div.ectclientloginorders div{
padding:6px;
margin:4px;
font-size:0.9em;
}
/* Tracking buttons */
input.trackinggo{
width:60px !important;
margin-bottom:12px;
}
/* Tracking form */
div.ecttracking div.ectdivcontainer{
width:98%;
float:left;
}
div.trackingselectlogo{
float:left;
width:90px;
margin-top:8px;
}
div.ecttracking div.ectdivleft{
width:42%;
white-space:normal;
float:left;
clear:none !important;
padding-top:0px !important;
margin-top:8px;
}
div.ecttracking div.ectdivright{
width:43%;
float:left;
padding-top:0px !important;
margin-top:8px;
}
div.trackinglogo, div.trackingtext{
float:left;
padding:6px;
}
div.ecttrackingresults{
float:left;
width:98%
}
div.ecttrackingresults div{
width:33%;
}
div.trackingcopyright{
float:left;
width:98%
}
/* Header row on Tracking form */
div.tracktablehead div{
padding:20px 0px 6px 4px;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
}
/* Shaded rows on Tracking form */
div.ectlowlight{
background:#ededed;
padding:4px;
margin:2px;
font-size:0.9em;
}
div.ecthighlight{
background:#fefefe;
padding:4px;
margin:2px;
font-size:0.9em;
}
div.ectlowlight div{
width:98%
}
div.ecthighlight div{
width:98%
}
div.trackingcopyright{
float:left;
font-size:0.9em;
}
/* Gift Certificate form */
div.ectgiftcerts{
float:left;
width:98%;
}
div.ectgiftcerts div.ectdivleft{
width:38%;
white-space:normal;
}
div.ectgiftcerts div.ectdivright{
width:58%;
}
div.ectgiftcerts #amount{
width:80px;
}
div.ectgiftcerts textarea{
width:62%;
border: 1px solid #ccc;
}
/* Donations form */
div.ectdonations{
float:left;
width:98%;
}
div.ectdonations #amount{
width:80px;
}
div.ectdonations textarea{
width:62%;
border: 1px solid #ccc;
}
/* FOR RESPONSIVE DESIGNS */
/*The breakpoints below correspond to the cart page*/
/*Styles for screens below 940px*/
@media all and (max-width: 940px) {
/* HIDE DETAILS COLUMN */
div.cartdetailsid{
display:none;
}
div.cartlineid{
display:none;
}
/* MOVE ESTIMATE ABOVE TOTALS */
div.cartshippingdetails{
width:100%;
}
div.carttotals{
width:100%;
}
/* RESET COLUMNS */
div.cartdetailsname{
width:35%;
}
div.cartdetailsprice{
width:21%;
}
div.cartdetailsquant{
width:16%;
}
div.cartdetailstotal{
width:17%;
}
div.cartdetailscheck{
width:10%;
}
div.cartlinename{
width:35%;
}
div.cartlineprice{
width:21%;
}
div.cartlinequant{
width:16%;
}
div.cartlinetotal{
width:17%;
}
div.cartlinecheck{
width:10%;
}
/* REALIGN TOTALS */
div.cartsubtotaltext{
width:72%;
}
div.cartsubtotal{
width:25%;
}
div.shippingtotaltext{
width:72%;
}
div.shippingtotal{
width:25%;
}
div.cartcountrytaxtext{
width:72%;
}
div.cartcountrytax{
width:25%;
}
div.cartgiftcerttext{
width:72%;
}
div.cartgiftcert{
width:25%;
}
div.cartdiscountstext{
width:72%;
}
div.cartdiscounts{
width:25%;
}
div.cartgrandtotaltext{
width:72%;
}
div.cartgrandtotal{
width:25%;
}
div.cartcoupontext{
width:57%;
}
div.cartcoupon{
width:40%;
}
div.cdformtterms{
width:6% !important;
}
div.cdformterms{
width:90% !important;
}
div.cdshipftflag{
width:6% !important;
}
div.cdshipflag{
width:90% !important;
}
div.cdformtremember{
width:6% !important;
}
div.cdformremember{
width:90% !important;
}
div.cdformtmailing{
width:6% !important;
}
div.cdformmailing{
width:90% !important;
}
}
/*This is a breakpoint for responsive designs and puts the search filters into one column*/
@media screen and (max-width: 715px) {
/* Puts the search filters into one column */
div.searchfiltergroup{
padding:4px 0px;
width:95%;
float:left;
}
/* Tracking form */
div.ecttracking div.ectdivleft{
width:95%;
}
div.ecttracking div.ectdivright{
width:95%;
}
}
/*Styles for screens below 480px on the cart page*/
@media all and (max-width: 480px) {
div.cartcoupontext{
width:36%;
}
div.cartcoupon{
width:64%;
}
div.cobhl2{
width:98%;
}
div.cobll2{
width:98%;
}
div.cdformshipdiff{
width:90%;
}
div.cobhl4{
width:98%;
}
div.cobll4{
width:98%;
}
div.cobhl3{
width:40%;
float:left;
padding-bottom:6px;
}
div.cobll3{
width:60%;
float:left;
padding-bottom:6px;
}
div.cart3totgoodst {
border-bottom:1px solid #ccc;
margin-bottom:12px;
font-size:1.1em;
}
div.cart3totgoods {
border-bottom:1px solid #ccc;
margin-bottom:12px;
font-size:1.1em;
}
/*Styles for screens below 480px on the affiliate, order status, client login page*/
div.ectdivright input{
width:95%;
}
div.ectdiv2column input{
margin:6px 0px 12px 0px;
}
div.ectdivright{
width:95% !important;
}
div.ectdivleft{
width:95% !important;
}
div.ectgiftcerts textarea{
width:98%;
}
div.ectdonations textarea{
width:98%;
}
}
/*
Magic Zoom Plus v5.1.15
Copyright 2016 Magic Toolbox
Buy a license: https://www.magictoolbox.com/magiczoomplus/
License agreement: https://www.magictoolbox.com/license/
*/
/**
* Core styles
*/
@font-face {
font-family: "magictoolbox-thin";
font-weight: normal;
font-style: normal;
src: url("fonts/magictoolbox-thin.eot?#iefix") format("embedded-opentype"), url("data:font/opentype;base64,AAEAAAANAIAAAwBQRkZUTXJLSEgAAAdAAAAAHEdERUYAKQAPAAAHIAAAAB5PUy8yAlYL4QAAAVgAAABWY21hcEAYY70AAAHUAAABSmdhc3D//wADAAAHGAAAAAhnbHlmMMVOJwAAAzQAAAGIaGVhZAmWUYMAAADcAAAANmhoZWEP9QamAAABFAAAACRobXR4L0EAQAAAAbAAAAAkbG9jYQGGAgAAAAMgAAAAFG1heHAAUAAcAAABOAAAACBuYW1l6MPgdAAABLwAAAH1cG9zdLaTuyIAAAa0AAAAZAABAAAAAQAAEWdxz18PPPUACwgAAAAAANDtg/MAAAAA0O2D8wAA/gIInAaeAAAACAACAAAAAAAAAAEAAAae/gIAuAibAAD//wicAAEAAAAAAAAAAAAAAAAAAAAJAAEAAAAJABkABQAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQZeAZAABQAIBTMFmQAAAR4FMwWZAAAD1wBmAhIAAAAABQAAAAAAAAAAAAAAAAAAAAACAAAAAAAAUGZFZABAoAGgBgZm/mYAuAaeAf4AAAABAAAAAAAABAAAAAAAAAACqgAACJsAAAOlAAADpQAACJsAAAibAAAHfABAAAAAAwAAAAMAAAAcAAEAAAAAAEQAAwABAAAAHAAEACgAAAAGAAQAAQACAACgBv//AAAAAKAB//8AAGACAAEAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAqACoAKgBMAGAAdACIAJwAxAAFAAAAAAQABZoAAgAFAAgACwAPAAATEQkBIQE3AREJASEDESERZgFd/uECuP6kPQFd/mYBXP1IpAQABNf77AIK/ZkCC1z99gQU/lICCvrNBZr6ZgABAAD+AgicBp4ACwAACQEHCQEnCQE3CQEXBHEEKyP71fvVIwQr+9UjBCsEKyMCUPvVIwQr+9UjBCsEKyP71QQrIwAAAAEAAP4CA6YGngAFAAARARcJAQcDixv8iQN1GwJQBE4X+8n7yRcAAAABAAD+AgOmBp4ABQAACQEnCQE3A6b8dxsDd/yHGwJQ+7IXBDcENxcAAQAAADcInAPdAAUAACUBNwkBFwRO+7IXBDcENxc3A4oa/IkDeRoAAAEAAAA3CJwD3QAFAAAJAQcJAScETgROF/vJ+8kXA938dxsDd/yHGwACAEAAQAHAAcAADQAYAAAlBycGIyImNDYyFhUUDwEWMzI2NCYiBhUUAcAXcSk3P1lZflkh1yc5OFBQcFBXF3EhWX5ZWT82KQInUHBQUDg5AAAADACWAAEAAAAAAAEAEQAkAAEAAAAAAAIABABAAAEAAAAAAAMALQChAAEAAAAAAAQAEQDzAAEAAAAAAAUACwEdAAEAAAAAAAYAEQFNAAMAAQQJAAEAIgAAAAMAAQQJAAIACAA2AAMAAQQJAAMAWgBFAAMAAQQJAAQAIgDPAAMAAQQJAAUAFgEFAAMAAQQJAAYAIgEpAE0AYQBnAGkAYwBUAG8AbwBsAGIAbwB4AC0AVABoAGkAbgAATWFnaWNUb29sYm94LVRoaW4AAFQAaABpAG4AAFRoaW4AAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAATQBhAGcAaQBjAFQAbwBvAGwAYgBvAHgALQBUAGgAaQBuACAAOgAgADIANwAtADEALQAyADAAMQA1AABGb250Rm9yZ2UgMi4wIDogTWFnaWNUb29sYm94LVRoaW4gOiAyNy0xLTIwMTUAAE0AYQBnAGkAYwBUAG8AbwBsAGIAbwB4AC0AVABoAGkAbgAATWFnaWNUb29sYm94LVRoaW4AAFYAZQByAHMAaQBvAG4AIAAxAC4AMAAAVmVyc2lvbiAxLjAAAE0AYQBnAGkAYwBUAG8AbwBsAGIAbwB4AC0AVABoAGkAbgAATWFnaWNUb29sYm94LVRoaW4AAAAAAAIAAAAAAAD/mgBmAAAAAAAAAAAAAAAAAAAAAAAAAAAACQAAAAEAAgECAQMBBAEFAQYBBwd1bmlBMDAxB3VuaUEwMDIHdW5pQTAwMwd1bmlBMDA0B3VuaUEwMDUHdW5pQTAwNgAAAAH//wACAAEAAAAMAAAAFgAAAAIAAQADAAgAAQAEAAAAAgAAAAAAAAABAAAAANBwQGEAAAAA0O2D8wAAAADQ7YPz");
}
.MagicZoom,
.mz-figure,
.mz-lens,
.mz-zoom-window,
.mz-loading,
.mz-hint,
.mz-expand .mz-expand-stage,
.mz-expand .mz-expand-stage .mz-image-stage,
.mz-expand .mz-image-stage > figure .mz-caption,
.mz-thumb img,
.mz-expand-thumbnails,
.mz-expand-controls,
.mz-button {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.MagicZoom,
.mz-figure {
display: inline-block;
outline: 0 !important;
font-size: 0 !important;
line-height: 100% !important;
direction: ltr !important;
position: relative;
z-index: 1;
margin: 0 auto;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.MagicZoom {
-webkit-transform: translate3d(0,0,0);
-ms-touch-action: pan-y;
touch-action: pan-y;
}
figure.mz-figure {
overflow: hidden;
margin: 0 !important;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.MagicZoom img,
.mz-figure img {
border: 0 !important;
margin: 0 !important;
outline: 0 !important;
padding: 0 !important;
}
.MagicZoom > img,
.mz-figure > img {
width: 100%;
height: auto;
}
.ie8-magic .MagicZoom > img,
.ie8-magic .mz-figure > img {
width: 100%;
max-width: none !important;
}
.mz-figure.mz-no-zoom.mz-no-expand,
.mz-expand .mz-figure.mz-no-zoom {
cursor: default !important;
}
.mz-figure.mz-active,
.mz-expand {
-ms-touch-action: none;
touch-action: none;
}
.mz-lens,
.mz-zoom-window {
position: absolute !important;
overflow: hidden !important;
pointer-events: none !important;
}
.mz-lens img,
.mz-zoom-window img {
position: absolute !important;
max-width: none !important;
max-height: none !important;
}
.mz-lens img {
-webkit-transition: none !important;
transition: none !important;
}
.mz-zoom-window {
z-index: 2000000000;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.mz-zoom-window.mz-magnifier {
-webkit-mask-image: -webkit-radial-gradient(circle, white, black);
-webkit-mask-clip: content;
cursor: none;
}
.mz-figure.mz-active .mz-zoom-window.mz-magnifier {
pointer-events: auto !important;
cursor: inherit !important;
}
.mz-zoom-window.mz-magnifier.mz-expanded {
z-index: 2147483647;
}
.mz-zoom-window img {
width: auto;
height: auto;
left: -1000%;
right: -1000%;
top: -1000%;
bottom: -1000%;
margin: auto !important;
-webkit-transition: none;
transition: none;
-webkit-transform-origin: 50% 50% !important;
-ms-transform-origin: 50% 50% !important;
transform-origin: 50% 50% !important;
}
.mz-zoom-window.mz-preview img {
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
width: 100% !important;
height: auto !important;
-webkit-transform: none !important;
transform: none !important;
}
.lt-ie9-magic .mz-zoom-window img {
margin: 0 !important;
}
.mz-expand-controls {
z-index: 2147483647;
}
.mz-fade {
-webkit-transition: opacity .25s;
transition: opacity .25s;
}
.mz-hidden {
opacity: 0;
}
.mz-visible {
opacity: 1;
}
.mobile-magic .mz-expand .mz-expand-bg {
-webkit-transform-style: flat !important;
transform-style: flat !important;
}
.mobile-magic .mz-expand .mz-image-stage > figure .mz-caption {
display: none !important;
}
.mobile-magic .mz-expand-controls.mz-fade {
transition: none !important;
}
.mobile-magic .mz-expand > .mz-zoom-window {
top: 0 !important;
left: 0 !important;
}
.mz-expanded-view-open,
.mz-expanded-view-open body {
overflow: hidden !important;
}
.mz-expanded-view-open body { height: auto !important; }
/**
* Main figure
*/
.mz-figure.mz-active {
background: #fff;
}
.mz-figure.mz-no-zoom,
.mz-figure.mz-click-zoom,
.mz-figure.mz-active {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.mz-figure.mz-active.mz-no-expand {
cursor: crosshair;
}
.mz-figure.mz-active.mz-click-zoom.mz-no-expand {
cursor: crosshair;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
}
.mz-figure.mz-active.mz-magnifier-zoom.mz-hover-zoom.mz-no-expand {
cursor: none;
}
.mz-figure.mz-magnifier-zoom.mz-active {
overflow: visible !important;
}
.mz-figure.mz-active > img {
filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(80%) opacity(60%);
filter: grayscale(80%) opacity(60%);
}
.no-cssfilters-magic .mz-figure.mz-active > img {
opacity: 0.6;
}
.lt-ie10-magic .mz-figure.mz-active > img {
opacity: 1;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1,opacity=0.6);
}
.mz-figure.mz-active.mz-inner-zoom,
.lt-ie11-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom,
.lt-ie11-magic .mz-figure.mz-active.mz-inner-zoom > img {
opacity: 0;
}
.lt-ie11-magic .mz-figure.mz-active.mz-inner-zoom,
.lt-ie11-magic .mz-figure.mz-active.mz-inner-zoom > .mz-zoom-window {
opacity: 1;
}
.lt-ie10-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom,
.lt-ie10-magic .mz-figure.mz-active.mz-inner-zoom > img {
filter: alpha(opacity=0);
}
.ie9-magic .mz-expand .mz-figure.mz-active.mz-inner-zoom {
background: transparent;
}
/**
* Zoom lens
*/
.mz-lens {
border: 1px solid #aaa;
border-color: rgba(170,170,170,0.7);
box-shadow: 0 0 5px rgba(0,0,0,.3);
cursor: none;
z-index: 10;
opacity: 0;
}
.mz-figure.mz-active .mz-lens {
opacity: 1;
-webkit-transition: opacity .3s cubic-bezier(0.25, 0.5, 0.5, 0.9) .1s;
transition: opacity .3s cubic-bezier(0.25, 0.5, 0.5, 0.9) .1s;
}
.mz-figure.mz-active.mz-magnifier-zoom .mz-lens {
border-radius: 50%;
opacity: 0;
cursor: none;
}
/**
* Zoom window
*/
.mz-zoom-window {
background: #fff;
box-shadow: 0 0 3px rgba(0, 0, 0, .2);
}
.mz-zoom-window.mz-magnifier {
border-radius: 100%;
border: 0;
background: rgba(255,255,255,.3);
}
.mz-zoom-window.mz-magnifier:before {
content: "";
display: block;
position: absolute;
top: 0;bottom: 0;
left: 0; right: 0;
border-radius: 100%;
border: 1px solid rgba(170,170,170,0.7);
box-shadow: inset 0 0 20px 1px rgba(0,0,0,.3);
background: transparent;
z-index: 1;
}
.mz-zoom-window.mz-magnifier.mz-square,
.mz-zoom-window.mz-magnifier.mz-square:before {
border-radius: 0 !important;
}
.lt-ie9-magic .mz-zoom-window {
border: 1px solid #e5e5e5;
}
.mz-zoom-window.mz-inner {
border: none;
box-shadow: none;
}
/* Caption in zoom window */
.mz-zoom-window .mz-caption {
background: #777;
color: #fff;
font-size: 10pt;
opacity: 0.8;
position: absolute;
top: 0;
z-index: 150;
padding: 3px;
width: 100%;
line-height: normal !important;
text-align: center !important;
}
.lt-ie9-magic .mz-zoom-window .mz-caption {
filter: alpha(opacity=80);
}
.mz-zoom-window.caption-bottom .mz-caption {
top: auto;
bottom: 0;
}
.mz-zoom-window.mz-expanded > .mz-caption {
display: none;
}
/* Zoom window animations */
.mz-zoom-window.mz-deactivating,
.mz-zoom-window.mz-activating {
-webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), -webkit-transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9), transform 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.mz-zoom-window.mz-deactivating {
-webkit-transition-duration: .25s, .25s, .25s;
transition-duration: .25s, .25s, .25s;
}
.mz-zoom-window.mz-p-right,
.mz-zoom-window.mz-p-left,
.mz-zoom-window.mz-p-top,
.mz-zoom-window.mz-p-bottom {
opacity: 0;
z-index: -100;
}
.mz-zoom-window.mz-p-right {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
.mz-zoom-window.mz-p-left {
-webkit-transform: translate3d(20%, 0, 0);
transform: translate3d(20%, 0, 0);
}
.mz-zoom-window.mz-p-top {
-webkit-transform: translate3d(0, 20%, 0);
transform: translate3d(0, 20%, 0);
}
.mz-zoom-window.mz-p-bottom {
-webkit-transform: translate3d(0, -20%, 0);
transform: translate3d(0, -20%, 0);
}
/* Inner mode animation */
.mz-zoom-window > img {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mz-zoom-window.mz-p-inner.mz-deactivating > img,
.mz-zoom-window.mz-p-inner.mz-activating > img {
-webkit-transition: -webkit-transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: transform .22s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
/* Magnifier mode animation */
.mz-zoom-window.mz-p-magnifier {
-webkit-transform: scale(.1);
transform: scale(.1);
}
/* Preview mode animation */
.mz-zoom-window.mz-preview.mz-deactivating,
.mz-zoom-window.mz-preview.mz-activating,
.mz-zoom-window.mz-custom.mz-deactivating,
.mz-zoom-window.mz-custom.mz-activating {
-webkit-transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
transition: opacity 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.mz-zoom-window.mz-preview.mz-deactivating,
.mz-zoom-window.mz-custom.mz-deactivating {
-webkit-transition-duration: .2s;
transition-duration: .2s;
}
.mz-zoom-window.mz-p-preview,
.mz-zoom-window.mz-p-custom {
opacity: 0;
}
/**
* Hint & Loading
*/
.mz-hint,
.mz-loading {
color: #eee;
background: rgba(49,51,61,0.7);
font: normal 12px/1.2em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif;
text-decoration: none;
text-align: center;
direction: ltr;
display: inline-block;
margin: 0;
position: absolute;
z-index: 1000;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.mz-hint {
bottom: 8px;
left: 0;
right: 0;
padding: 0 10%;
background-color: transparent;
-webkit-transition: opacity 0.25s ease, z-index 0.25s ease;
transition: opacity 0.25s ease, z-index 0.25s ease;
}
.mz-hint-message {
display: inline-block;
background: rgba(49,51,61,0.7);
border-radius: 2em;
padding: .7em 1.1em;
}
.mz-hint-message:before {
content: '\02295';
font-family: serif;
font-size: 1.5em;
speak: none;
text-align: center;
vertical-align: -2px;
margin-right: 6px;
-webkit-transition: opacity 0.25s ease;
transition: opacity 0.25s ease;
}
.mobile-magic .mz-hint-message:before {
display: none;
}
.mz-hint-hidden {
opacity: 0;
z-index: -1;
-webkit-transition-delay: .6s;
transition-delay: .6s;
}
/* Hint in the expanded view on mobile */
.mz-expand .mz-hint {
font-size: 18px;
line-height: 1.1em;
top: 50%;
bottom: auto;
margin: 0;
-webkit-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
transform: translate(0,-50%);
}
.mz-expand .mz-hint-message {
padding: 1.1em;
}
.mz-expand .mz-hint-message:before {
display: none;
}
.mz-expand .mz-hint-hidden {
-webkit-transition-delay: 1s;
transition-delay: 1s;
opacity: 0;
}
/* Loading indicator */
.mz-loading {
font-size: 0;
border-radius: 100%;
opacity: 0;
padding: 0;
width: 36px;
height: 36px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.mz-loading:after {
content: '';
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
width: 24px;
height: 24px;
margin: auto;
text-indent: -9999em;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 1);
border-top-color: transparent;
box-sizing: border-box;
}
.mz-loading.shown {
opacity: 1;
z-index: 1;
-webkit-transition: opacity 0s;
transition: opacity 0s;
}
.mz-loading.shown:after {
-webkit-animation: spin-loading .9s infinite linear;
animation: spin-loading .9s infinite linear;
}
@-webkit-keyframes spin-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin-loading {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.lt-ie10-magic .mz-loading {
font-size: 12px;
padding: .7em 1.1em;
width: auto;
height: auto;
}
.lt-ie10-magic .mz-loading:after {
content: 'Loading...';
text-indent: 0;
border: none;
position: relative;
}
.lt-ie9-magic .mz-loading {
filter: alpha(opacity=0);
right: 0;
left: 0;
width: 126px;
margin: auto;
}
.lt-ie9-magic .mz-hint-message,
.lt-ie9-magic .mz-loading.shown {
background: transparent !important;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#7c31333D', EndColorStr='#7c31333D');
}
.lt-ie9-magic .mz-hint-hidden {
filter: alpha(opacity=0);
}
/**
* Expanded view
*/
.mz-expand,
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg > img,
.mz-expand .mz-expand-bg > svg,
.mz-expand .mz-expand-stage,
.mz-expand .mz-expand-stage .mz-image-stage {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
}
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg > img,
.mz-expand .mz-expand-bg > svg {
width: auto !important;
height: auto !important;
}
.mz-expand .mz-expand-bg,
.mz-expand .mz-expand-bg > svg {
min-width: 100% !important;
min-height: 100% !important;
}
.mz-expand {
background-color: rgba(0, 0, 0, 1);
text-align: center;
vertical-align: middle;
display: block;
overflow: hidden;
z-index: 2100000000;
position: fixed;
width: auto;
height: auto;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-ms-overflow-style: none;
}
/* Expanded view background */
.mz-expand .mz-expand-bg {
display: inline-block;
vertical-align: middle;
margin: auto;
z-index: -100;
max-width: none !important;
max-height: none !important;
-webkit-transform: translate3d(0,0,0) scale(10) rotate(0.01deg);
-ms-transform: translate(0,0) scale(10,10) rotate(0.01deg);
transform: translate3d(0,0,0) scale(10) rotate(0.01deg);
-webkit-perspective: 600px;
perspective: 600px;
background-repeat: no-repeat;
background-size: cover;
}
.mz-expand .mz-expand-bg > img {
margin: auto;
filter: url("data:image/svg+xml;utf8,#blur");
-webkit-filter: blur(20px) brightness(60%);
filter: blur(20px) brightness(60%);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mz-expand .mz-expand-bg > svg {
margin: auto;
opacity: .6;
}
[data-magic-ua=edge] .mz-expand .mz-expand-bg,
.lt-ie10-magic .mz-expand .mz-expand-bg {
display: none !important;
}
.lt-ie9-magic .mz-expand {
background: #1f1f1f;
}
[data-magic-ua=edge] .mz-expand {
background-color: rgba(31, 31, 31, .96);
}
/** Plain backgrounds: dark-bg, white-bg **/
.mz-expand.plain-bg .mz-expand-bg,
.mz-expand.dark-bg .mz-expand-bg,
.mz-expand.white-bg .mz-expand-bg {
display: none !important;
}
.mz-expand.dark-bg {
background-color: #1f1f1f;
background-color: rgba(31, 31, 31, .96);
}
.mz-expand.white-bg {
background-color: #fff;
}
/* Expanded view stage */
.mz-expand .mz-expand-stage {
z-index: 2100000000;
padding: 0;
}
.mz-expand .mz-expand-stage .mz-image-stage {
z-index: 50;
left: 120px;
right: 120px;
padding: 20px 0 40px 0;
margin: 0;
text-align: center;
vertical-align: middle;
-webkit-perspective: 600px;
perspective: 600px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mz-expand .mz-expand-stage.with-thumbs .mz-image-stage {
padding-bottom: 120px;
}
.mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage {
padding: 0 !important;
left: 0;
right: 0;
}
.mz-expand .mz-image-stage > figure:before,
.mz-expand .mz-image-stage:before {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
font-size: 0;
line-height: 100%;
width: 0;
}
.mz-expand .mz-image-stage > figure {
width: 100%;
max-width: 100%;
max-height: 100%;
padding: 0;
margin: 0;
display: inline-block;
vertical-align: middle;
font-size: 0;
line-height: 100%;
position: relative;
}
.mz-expand .mz-figure {
overflow: visible;
max-width: 100% !important;
}
.mz-expand .mz-figure > img {
max-width: 100%;
width: auto;
height: auto;
}
.mz-expand .mz-zoom-in .mz-image-stage > figure,
.mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-activating,
.mz-expand .mz-zoom-in .mz-image-stage > figure .mz-figure.mz-active {
width: 100%;
height: 100%;
}
.mz-expand .mz-figure {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.mz-expand .mz-figure.mz-active {
cursor: crosshair;
cursor: -webkit-zoom-out;
cursor: -moz-zoom-out;
cursor: zoom-out;
}
/* When inner zoom is always shown */
.mz-expand .mz-expand-stage.mz-zoom-in.mz-always-zoom .mz-image-stage > figure > figure > img {
z-index: 1;
position: absolute !important;
top: -5000px !important;
bottom: -5000px !important;
left: -5000px !important;
right: -5000px !important;
margin: auto !important;
}
.lt-ie10-magic .mz-zoom-window.mz-expanded img { filter: alpha(opacity=100); }
.lt-ie10-magic .mz-expand .mz-figure.mz-magnifier-zoom {
overflow: hidden;
filter: alpha(opacity=100);
}
/* Caption in expanded view */
.mz-expand .mz-caption {
color: #fff;
text-shadow: 0px 0px 46px #000;
padding: 10px 4px;
font: normal 10pt/1em 'Lucida Grande', 'Lucida Sans Unicode', Verdana, 'Helvetica Neue', Arial, Helvetica, sans-serif;
text-align: center;
width: 100%;
position: absolute;
left: 0;
opacity: 0;
}
.mz-expand .mz-caption.mz-show {
-webkit-transition: opacity 0.15s ease-out;
transition: opacity 0.15s ease-out;
opacity: 1;
}
.mz-expand .mz-caption a {
color: inherit;
cursor: pointer;
}
.mz-expand.white-bg .mz-caption {
color: #555;
text-shadow: none;
}
.lt-ie9-magic .mz-expand .mz-caption {
top: 100%;
}
.mz-expand .mz-zoom-window {
box-shadow: none;
background: transparent;
}
.lt-ie9-magic .mz-expand .mz-zoom-window {
border: 0;
}
/* Expanded view on mobile */
.mobile-magic .mz-expand-stage .mz-expand-thumbnails,
.mobile-magic .mz-expand-stage .mz-image-stage {
left: 0px;
right: 0px;
}
.mobile-magic .mz-expand .mz-expand-stage.with-thumbs {
bottom: 0px;
}
.mobile-magic .mz-expand-stage .mz-image-stage {
padding: 0;
}
.mobile-magic .mz-expand .mz-expand-stage.with-thumbs .mz-image-stage {
padding: 5px 0 60px;
}
.mobile-magic .mz-expand .mz-expand-stage.mz-zoom-in .mz-image-stage {
padding-top: 0;
}
.mobile-magic .mz-expand .mz-expand-thumbnails {
padding: 0;
height: 60px;
}
/**
* Buttons & Arrows
*/
.mz-expand-controls,
button.mz-button {
margin: 0 !important;
padding: 0 !important;
outline: 0 !important;
}
button.mz-button {
color: #b4b4b4 !important;
font: 900 34px/1 'magictoolbox-thin' !important;
cursor: pointer;
z-index: 90 !important;
background-color: transparent !important;
border: 1px solid rgba(180, 180, 180, 0) !important;
border-radius: 100% !important;
box-shadow: none !important;
position: absolute !important;
text-transform: none !important;
text-align: center;
speak: none;
-webkit-font-smoothing: antialiased;
width: 60px !important;
height: 60px !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
}
button.mz-button:before {
display: inline;
position: static;
color: inherit !important;
font: inherit !important;
-webkit-font-smoothing: inherit !important;
}
button.mz-button.mz-button-prev,
button.mz-button.mz-button-next {
margin: auto 10px !important;
top: 0 !important;
bottom: 0 !important;
overflow: hidden !important;
}
button.mz-button.mz-button-prev {
left: 0 !important;
}
button.mz-button.mz-button-next {
right: 0 !important;
}
button.mz-button.mz-button-close {
font-size: 26px !important;
margin: 10px !important;
top: 0 !important;
right: 0 !important;
z-index: 95 !important;
}
:root:not(.mobile-magic) button.mz-button {
color: rgba(180, 180, 180, .75) !important;
-webkit-transform: scale(.85) !important;
transform: scale(.85) !important;
-webkit-transition: color .25s, border-color .25s, -webkit-transform .25s !important;
transition: color .25s, border-color .25s, transform .25s !important;
}
:root:not(.mobile-magic) button.mz-button:hover {
color: rgba(180, 180, 180, 1) !important;
border-color: rgba(180, 180, 180, .6) !important;
-webkit-transform: scale(1) !important;
transform: scale(1) !important;
}
.mobile-magic button.mz-button {
-webkit-transition: -webkit-transform .1s !important;
transition: transform .1s !important;
}
.mobile-magic button.mz-button:active {
border-color: rgba(180, 180, 180, .6) !important;
-webkit-transform: scale(.95) !important;
transform: scale(.95) !important;
}
button.mz-button.mz-button-close:before { content: "\a001"; }
button.mz-button.mz-button-prev:before { content: "\a002"; }
button.mz-button.mz-button-next:before { content: "\a003"; }
@media screen and (max-device-width: 767px) {
button.mz-button-prev,
button.mz-button-next {
display: none !important;
}
.mobile-magic .mz-expand button.mz-button {
width: 44px !important;
height: 44px !important;
font-size: 18px !important;
color: rgba(255, 255, 255, 0.8) !important;
background-color: rgba(49,51,61,0.3) !important;
border-color: transparent !important;
}
}
.lt-ie9-magic button.mz-button {
border: 0;
filter: alpha(opacity=75);
}
.lt-ie9-magic button.mz-button:hover {
filter: alpha(opacity=100);
}
/**
* Thumbnails
*/
/* Thumbnails on the page */
a[data-zoom-id],
.mz-thumb, .mz-thumb:focus {
display: inline-block;
line-height: 0;
outline: none;
}
a[data-zoom-id] img,
.mz-thumb img {
border: 0;
box-shadow: 0 0 1px 0px rgba(0,0,0,0.3);
box-sizing: border-box;
}
.mz-thumb:hover:not(.mz-thumb-selected) img {
-webkit-filter: brightness(75%);
filter: brightness(75%);
}
.mz-thumb-selected img {
-webkit-filter: brightness(60%);
filter: brightness(60%);
}
.no-cssfilters-magic .mz-thumb {
background: #000;
}
.no-cssfilters-magic .mz-thumb:hover:not(.mz-thumb-selected) img {
opacity: .75;
filter: alpha(opacity=75);
}
.no-cssfilters-magic .mz-thumb-selected img {
opacity: .6;
filter: alpha(opacity=60);
}
.ie9-magic .mz-thumb img {
box-shadow: 0 0 4px 0px rgba(0,0,0,0.3);
}
/* Thumbnails in expanded view */
.mz-expand-thumbnails {
z-index: 50;
position: absolute;
bottom: 0;
left: 65px;
right: 65px;
height: 80px;
padding: 10px 0;
box-sizing: border-box;
}
.mz-expand-thumbnails .magic-thumbs .magic-thumb {
padding: 10px 2px;
}
.mz-expand-thumbnails .magic-thumb > img {
cursor: pointer;
height: 40px;
box-shadow:0 0 5px 1px rgba(0,0,0,0.3);
}
.mz-expand-thumbnails .magic-thumb:not(.magic-thumb-selected) > img:hover {
-webkit-filter: brightness(70%);
filter: brightness(70%);
}
.mz-expand-thumbnails .magic-thumb-selected img {
-webkit-filter: brightness(50%);
filter: brightness(50%);
}
.mz-expand-thumbnails .magic-thumbs .magic-thumbs-button {
box-shadow: none;
}
.mz-expand-thumbnails .magic-thumbs .magic-thumbs-button-disabled {
opacity: 0;
}
.no-cssfilters-magic .mz-expand-thumbnails .magic-thumb:hover:not(.magic-thumb-selected) img {
opacity: .7;
filter: alpha(opacity=70);
}
.no-cssfilters-magic .mz-expand-thumbnails .magic-thumb-selected img {
opacity: .5;
filter: alpha(opacity=50);
}
/** Hide thumbnails in expanded view with .no-expand-thumbnails class **/
.mz-expand.no-expand-thumbnails .mz-expand-stage.with-thumbs .mz-image-stage {
padding-bottom: 40px;
}
.mz-expand.no-expand-thumbnails .mz-expand-thumbnails {
display: none;
}
.mobile-magic .mz-expand.no-expand-thumbnails .mz-expand-stage.with-thumbs .mz-image-stage {
padding: 0;
}
.magic-thumbs,
.magic-thumbs .magic-thumbs-wrapper,
.magic-thumbs ul,
.magic-thumbs li,
.magic-thumbs li:before,
.magic-thumbs li:after,
.magic-thumbs li img,
.magic-thumbs .magic-thumbs-button {
margin: 0;
padding: 0;
outline: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.magic-thumbs {
direction: ltr;
overflow: visible;
z-index: 100;
position: relative;
left: 0;
top: 0;
padding: 0 30px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-ms-touch-action: none;
touch-action: none;
}
.magic-thumbs {
width: 100%;
height: 100%;
white-space: nowrap;
}
.magic-thumbs.no-buttons {
padding: 0 !important;
}
.magic-thumbs-wrapper {
display: block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
text-align: center;
}
.magic-thumbs ul {
list-style: none;
font-size: 0;
display: inline-block;
vertical-align: middle;
height: 100%;
position: relative;
white-space: nowrap;
}
.magic-thumbs.no-buttons ul {
left: 0 !important;
padding: 0 !important;
-webkit-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-ms-transform: none !important;
transform: none !important;
}
.magic-thumbs ul li {
margin: 0 4px;
height: 100%;
width: auto;
vertical-align: top;
line-height: 0;
display: inline-block;
}
.magic-thumbs ul li:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0;
}
.magic-thumbs ul li > img {
width: auto;
height: auto;
max-width: none !important;
max-height: 100% !important;
vertical-align: middle;
}
.ie8-magic .magic-thumbs ul li > img {
max-width: none !important;
max-height: none !important;
}
/* vertical */
.magic-thumbs.magic-thumbs-vertical {
height: 100%;
}
.magic-thumbs-vertical {
padding: 30px 0;
}
.magic-thumbs-vertical ul {
height: auto;
width: 100%;
white-space: normal;
}
.magic-thumbs-vertical ul li {
width: 100%;
height: auto;
}
.magic-thumbs-vertical ul li {
margin: 4px 0;
}
.magic-thumbs-vertical ul li > img {
max-width: 100% !important;
max-height: none !important;
}
.ie8-magic .magic-thumbs-vertical ul li > img {
width: 100%;
}
/**
* Buttons
*/
.magic-thumbs button.magic-thumbs-button {
color: #b4b4b4 !important;
font: 900 24px/1 'magictoolbox-thin' !important;
cursor: pointer;
z-index: 90 !important;
background-repeat: no-repeat;
background-color: transparent !important;
background-image: none;
border: 0;
border-radius: 0;
box-shadow: none !important;
overflow: hidden;
position: absolute;
text-transform: none !important;
speak: none;
text-align: center;
-webkit-font-smoothing: antialiased;
width: 30px;
height: 100%;
top: 0;
bottom: 0;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
}
.magic-thumbs button.magic-thumbs-button:before {
display: inline;
position: static;
color: inherit !important;
font: inherit !important;
-webkit-font-smoothing: inherit !important;
}
.magic-thumbs .magic-thumbs-button-prev {
left: 0;
}
.magic-thumbs .magic-thumbs-button-next {
right: 0;
}
.magic-thumbs .magic-thumbs-button-prev:before { content: "\a002"; }
.magic-thumbs .magic-thumbs-button-next:before { content: "\a003"; }
:root:not(.mobile-magic) .magic-thumbs button.magic-thumbs-button {
color: rgba(180, 180, 180, .75) !important;
-webkit-transform: scale(.85) !important;
transform: scale(.85) !important;
-webkit-transition: color .25s, -webkit-transform .25s !important;
transition: color .25s, transform .25s !important;
}
:root:not(.mobile-magic) .magic-thumbs button.magic-thumbs-button:hover {
color: rgba(180, 180, 180, 1) !important;
-webkit-transform: scale(1) !important;
transform: scale(1) !important;
}
/* Vertical buttons */
.magic-thumbs-vertical .magic-thumbs-button {
width: 100%;
height: 30px;
left: 0; right: 0;
top: auto; bottom: auto;
}
.magic-thumbs-vertical .magic-thumbs-button-prev {
top: 0;
}
.magic-thumbs-vertical .magic-thumbs-button-next {
bottom: 0;
}
.magic-thumbs-vertical .magic-thumbs-button-prev:before { content: "\a005"; }
.magic-thumbs-vertical .magic-thumbs-button-next:before { content: "\a004"; }
.magic-thumbs.no-buttons .magic-thumbs-button {
display: none !important;
}
.magic-thumbs-button-disabled {
opacity: 0.2;
filter: alpha(opacity = 20);
}