/* ~~ This the css file for the Responsive Design of Virtual Monochrome from Ecommerce Templates.
The first section correponds to the maximum width version of 1280 pixels ~~ */
@charset "utf-8";
/* ~~ Main settings and resets ~~*/
@font-face {
    font-family: "Stencil Regular";
    src:url("stencilregular.ttf") format("truetype");
}
body{
margin:0px;
font: 100%/1.5 Arial, serif;
color:#333;
line-height:1.6;
background: url(../images/bg-top-gradient-new.png) #fff repeat-x;
}
ul{
margin:0;padding:0;
}
img{
border:0px;
}
.clr{
clear: both;
line-height: 0;
font-size: 0;
height: 0;
border: none;
}
/* ~~ Social media icons ~~*/
.topsocial{
width:100%;
height:22px;
background-color:#eee;
float:left;
border-bottom:1px solid #ccc;
}
/* ~~ Top right navigation ~~*/
.toptextlinks{
font-size:0.8em;
}
/* ~~ Container ~~*/
#maincontainer{
width: 1280px;
margin: 0 auto;
}
/* ~~ The header section ~~*/
#header{
padding: 6px 0;
margin-bottom: 4px;
}
#header .logo{
padding-top: 3px;
padding-bottom:2px;
}
#header .hdrR{
line-height: 16px;
text-align: right;
margin-top:18px;
float: right;
margin-right:20px;
}
#header .hdrR p{
color: #60a1de;
padding: 10px 0 0 0px;
}
#header .logo{
float: left;
}
div.logo img{
	max-width:100%;
}
.l{
float: left;
}
img.homepageimages{
max-width:100%;
box-shadow: 5px 5px 2px #999;
border-radius: 10px;
}
/* Mega Menu */
nav.ectmegamenu{
background-color:#337070;
}
nav.ectmegamenu > ul > li{
background-color:#337070;
font-size:0.9em;
text-transform:uppercase;
}
nav.ectmegamenu > ul > li > a, span.megamobiletext{
color:#FFF;
}
span.ectmegamenu > a:hover{
color:#da6805;
text-decoration:underline;
}
div.slidercaption{
bottom:10px;
top:auto;
color:#FFF;
}
img.csprodimage {
max-height: 160px;
}
.ectmegamenu > ul > li > ul.normal-sub > li a,
nav.ectmegamenu > ul > li > ul > li a,
nav.ectmegamenu > ul > li > ul > li > ul > li a{
border-bottom:1px solid #FCA218;
}
.ectmegamenu > ul > li, .ectmegamenu > ul > li:hover{
background-color:#FEFEFE;
}
nav.ectmegamenu > ul > li > a:hover{
color:#333;
}
li.ectmega-is-open > a{
color:#333 !important;
}
.sliderarrow{
color:#FCA218;
}
/*Internal store naviagtion*/
a.ectlink:link {
color: #544A4A;
text-decoration: none;
}
a.ectlink:visited {
color: #544A4A;
text-decoration: none;
}
a.ectlink:active {
color: #544A4A;
text-decoration: none;
}
a.ectlink:hover {
color: #666;
text-decoration: none;
}
div.catheader {
    padding: 5px 10px;
    border: 1px solid #337070;
    margin: 0.5%;
}
span.logo-tagline{
	font-size:14px;
}
.body-nav{
	border:1px solid;
	border-radius:1em;
	line-height:2.25em;
	margin:18px 5px 5px 15px;
	padding:0 .75em;
	float:right;
	background-color: #FFF;
}
.body-nav ul{list-style-position:outside;margin:.75em;padding-left:.5em}
/*Button and form field styles*/
input[type="button"].ectbutton,input[type="submit"].ectbutton,button.ectbutton{
background:#337070;
color:#fff;
font-family:FontAwesome, sans-serif
}
input[type="button"].ectbutton:hover,input[type="submit"].ectbutton:hover,button.ectbutton:hover{
background:#FCA218;
color:#000;
cursor:pointer;
font-family:FontAwesome, sans-serif
}
div.largereviewstars svg.icon, div.smallreviewstars svg.icon {
fill:#544A4A;
}
button.csdetaillink,button.csconfigbutton,button.csqbuybutton{
    width: 100%;
}
div.csprodname{
	margin:0;
}
/*mini drop down cart*/
.ectdp_minicartopen img{display:none;}
.ectdp_minicartmainwrapper{color:#000;background:#eee;font-size:13px;padding-top:1px}
.ectdp_minicartopen{background:#eee;padding-top:0;margin-top:0;font-size:13px;}
.ectdp_minicartcontainer{background:#eee;}
/*one line mini login*/
div.minicartoneline1{font-size:12px;float:left;}
div.minicartoneline2{font-size:12px;float:left;padding-top:2px}
div.minicartoneline3{font-size:12px;float:left;padding-top:2px}
.minicartoneline > div.minicartoneline3 {
    padding:1px 3px;
}
div.minicartoneline3 > button{font-size:11px;height:20px;line-height:9px;}
/* ~~ Body content ~~*/
#mainwrapper{
float: left;
width: 100%;
background:#fff;
margin-bottom:20px;
}
#maincontent{
margin-left: 206px; 
padding:0px 4px 0px 4px;
font-size:0.9em;
}
div.store{
padding:10px;
}
div.category,div.product{
border: 1px solid #337070;
}
/* ~~ Orange Color Underline for Menus Etc ~~*/
p.cstitle{
border-bottom:1px solid #FCA218;
}
div.ectpatgrp{
border-bottom:1px solid #FCA218;
}
div.catnavandcheckout {
border-bottom:1px solid #FCA218;
}
select.prodfilter,
select.prodoption,
select.sidefilter,
div.ectpatgrp input[type="text"],
input.minimailsignup[type="text"]{
border:1px solid #666;
}
div.csprodname {
background:#333;
}
/* /contact-us/ */
#contact-page > section {
    margin: 1em auto 2em;
}
#contact-page form {
    max-width: 350px;
}
#contact-page form > span {
    display: block;
    font-size: 0.925em;
    padding: 0.25em 0;
    position: relative;
}
#contact-page form > span label {
    clear: left;
    display: block;
    line-height: 1.5em;
}
#contact-page form > span label.radio {
    clear: right;
    float: right;
    text-align: left;
}
#contact-page form > span label.error {
    clear: right;
    color: #cc0000;
    font-size: 0.875em;
    font-weight: bold;
    text-align: left;
}
#contact-page form > span label.radio > label.error {
    clear: both;
    color: #cc0000;
    display: block;
    position: absolute;
}
#contact-page form > span label.radio::after, #contact-page form > span label.error::after {
    content: "";
}
#contact-page form input {
    line-height: 1.5em;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
    width: 100%;
}
#contact-page form textarea {
    height: 6em;
    line-height: 1.5em;
    width: 100%;
}
#contact-page form input[type="checkbox"], #contact-page form input[type="submit"] {
    width: auto;
}
.clearfix::after{
content:"";
clear:both;
display:table;
}
/* ~~ Left content ~~*/
.lefthand{
float: left;
width: 200px; 
margin-left: -1280px; 
background: #fff;
list-style:none;
line-height:18px;
padding:0px;
font-size:0.8em;
margin-top:10px;
box-sizing:border-box;
}
.leftside ul li{
list-style:none;
line-height:24px;
border-bottom:1px solid #FCA218;
}
.leftside li a{
padding:3px 0 3px 8px;
display:block;
}
.leftside li a:hover{
background-color:#dbdbdb;
color:#333;
text-decoration:none;
}
div.leftside{
margin-bottom:6px;
padding-bottom:6px;
box-sizing:border-box;
}
/* ~~ Footer content ~~*/
.footer1{
clear: left;
width: 100%;
background:#337070;
color:#ccc;
font-size:0.9em;
}
.copyright{
clear: left;
width: 100%;
background:#ff6c00;
color:#FFF;
font-size:0.9em;
}
#footer{
clear: left;
width: 1280px;
background:#337070;
color:#ccc;
margin: 0 auto;
font-size:0.9em;
}
#footer a{
color:#fff;
}
p.menuhead{
font-size:18px;
text-align:right;
color:#FFF;
}
div.bottomlinks1, div.bottomlinks2, div.bottomlinks3, div.bottomlinks4{
float: left;
width: 22%;
background:#337070;
border-right: 1px solid #ccc;
padding:15px;
text-align:right;
}
p.copyright{
font-size:0.9em;
text-align:center;
padding:20px 0;
}
/* ~~ Main link properties ~~*/
A:link{
color:#333;
text-decoration:none;
}
A:visited{
color:#333;
text-decoration:none;
}
A:active{
color:#333;
text-decoration:none;
}
A:hover{
color:#da6805;
text-decoration:none;
}
/* Top Link Properties */
A.tp:link{
color:#da6805;
text-decoration:none;
}
A.tp:visited{
color:#da6805;
text-decoration:none;
}
A.tp:active{
color:#da6805;
text-decoration:none;
}
A.tp:hover{
color:#ccc;
text-decoration:underline;
}
/* ~~ Titles ~~*/
div.menutop{
font-size: 1.2em;
font-weight:normal;
color:#000;
text-align:left;
width:96%;
border-bottom:1px solid #FCA218;
padding:6px 4px;
margin-bottom:6px;
box-sizing:border-box;
}
div.prodtop{
font-size: 1.8em;
font-weight:normal;
color : #666;
padding-left:2px;
padding-top:2px;
margin-top:12px;
}
h1{
font-size: 38px;
font-family:"Stencil Regular";
padding: 5px;
background-color: #fff;
color : #000;
margin:4px;
border-bottom:1px solid #ccc
}
/* ~~ Search bar properties ~~*/
div.searchbox{
width:100%;
float:right;
white-space:nowrap;
}
.search_bg{ float: left;border:1px solid #d9d8dd; padding:0; width:100%; background:#FFF; position:relative; box-sizing: border-box;}
.search_text{ width:100%; border:0; padding:9px; font-family:Arial; font-size:14px; color:#9f9f9f;box-sizing:border-box;}
.search_button{ background:url(../images/search_icon.jpg) no-repeat; width:16px; height:16px; position:absolute; right:10px; border:0px; cursor:pointer;margin-top:8px}
/* ~~ Horizontal rule ~~*/
hr{
height: 0;
border-width: 1px 0 0 0;
border-style: solid;
border-color: #D86807;
}
div.minicartoneline{
display:inline;
}
/* This is the first breakpoint and is for screen sizes between 980 and 1280 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: 1300px){
#maincontainer{
width:auto;
}	
.lefthand{
margin-left: -100%; 
}
#footer{
width: 980px;
}	
div.bottomlinks1, div.bottomlinks2, div.bottomlinks3, div.bottomlinks4{
width: 209px;
}
}
/* This is the second breakpoint and is for screen sizes between 1000 and 1280 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: 1008px){
body{background:none;}
#footer{
width: 680px;
}
span.logo-tagline{
font-size:12px;
}	
div.bottomlinks1, div.bottomlinks2, div.bottomlinks3, div.bottomlinks4{
width: 20%;
}
}
@media screen and (max-width:938px){
	span.hide-tagline-1{
		display:none;
	}
}
@media screen and (max-width:860px){
/* ~~ Move header elements ~~*/
.logo{width:98%;text-align:center;}
#header .hdrR{
float:none;
text-align:center;
width:auto;
margin-right:0;
}
.hdrR .toptextlinks{
float:none;
text-align:center;
width:auto;
display:block;
}
div.searchbox{
width:auto;
text-align:left;
height:46px;
float:none;
display:block;
}
}
/* This is the third breakpoint and is for screen sizes between 468 and 690 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:690px){
#maincontent{
margin-left: 0px; 
border: 0px;
}
#maincontainer{
width: 94%;
}	
/* ~~ Remove left hand menu ~~*/	
.lefthand{
float:right; 
width:98%;
clear:both;
}
/* ~~ Reset footer ~~*/
#footer{
width: 100%;
clear:both
}	
div.bottomlinks1, div.bottomlinks2{
width: 40%;
float:left;
}
div.bottomlinks3, div.bottomlinks4{
width:40%;
float:left;
}
.body-nav{margin:5px}
span.hide-tagline-2{
	display:none;
}
}
/* This is the fourth breakpoint and is for smartphones. 
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:400px){
#maincontainer{
}
#footer{
width: 80%;
}
div.bottomlinks1, div.bottomlinks2, div.bottomlinks3, div.bottomlinks4{
width: 96%;
margin-right:0px;
text-align:left;
}
p.menuhead{
text-align:left;
}
div.store{
padding:0px;
}
}