/* ~~ 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 ~~*/
body{
	margin:0px;
	font: 100%/1.5 Arial, serif;
	color:#333;
	line-height:1.6;
	background: url("images/bg.gif") #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:30px;
	background-color:#151515;
	text-align:right;
	float:right;
}

/* ~~ Top navigation on smaller window sizes ~~*/
.topleftlinks{
	display:none;
}

/* ~~ Top right navigation ~~*/
.toptextlinks{
	font-size:0.8em;
}

/* ~~ Container ~~*/
#maincontainer{
	width: 1280px;
	margin: 0 auto;
}

/* ~~ The header section ~~*/
#header{
	padding: 6px 0;
}

#header .logo{
	padding-top: 0px;
	padding-bottom:5px;
}

#header .hdrR{
	line-height: 16px;
	text-align: right;
	margin-top:18px;
}

#header .hdrR p{
	color: #60a1de;
	padding: 10px 0 0 0px;
}

#header .logo{
	float: left;
}

.l{
	float: left;
}

#header .hdrR{
	float: right;
}

/* ~~ Body content ~~*/
#mainwrapper{
	float: left;
	width: 100%;
	background:#fff;
}

#maincontent{
	margin-left: 156px; 
	padding:0px 4px 0px 4px;
	font-size:0.9em;
}
div.store{
	padding:10px;
}

/* ~~ Left content ~~*/
.lefthand{
	float: left;
	width: 150px; 
	margin-left: -1280px; 
	background: #fff;
	list-style:none;
	line-height:18px;
	padding:0px;
	font-size:0.8em;
margin-top:10px;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
}
.leftside ul li{
	list-style:none;
	line-height:24px;
	padding-left:8px;}

/* ~~ Footer content ~~*/
.footer1{
	clear: left;
	width: 100%;
	background: #151515;
	color:#ccc;
	font-size:0.9em;
}

#footer{
	clear: left;
	width: 1280px;
	background: #151515;
	color:#ccc;
	margin: 0 auto;
	font-size:0.9em;
}

#footer a{
	color:#fff;
}

p.menuhead{
font-size:16px;
text-align:right;
}

div.bottomlinks1, div.bottomlinks2, div.bottomlinks3, div.bottomlinks4{
	float: left;
	width: 22%;
	background: #151515;
	border-right: 1px solid #ccc;
	padding:15px;
text-align:right;
}

p.copyright{
	font-size:0.9em;
	text-align:right;
	width:100%;
}


/* ~~ 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: underline;
}

/* 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;
	background: #EBEBEB;
	color : #666;
	text-align:left;
	width: 146px;
	border-top:1px solid #ccc;
	padding:4px 2px;
}

div.prodtop{
	font-size: 1.1em;
	font-weight:normal;
	color : #666;
	padding-left:2px;
	padding-top:2px;
margin-top:12px;
}

h1{
	font-size: 0.9em;
	font-weight : bold;
	padding: 5px;
	background-color: #999;
	color : #FFF;
	margin:4px;
}

/* ~~ Home page content ~~*/

div.homepics{
	width:100%;
}
div.picscontent{
	width:23%;
	padding:5px;
	float:left;
	margin:4px;
border: 1px solid #ccc;
}

div.prodpic{
width:100%;
	float:left;
text-align:center;
}

div.prodtext{
	float:left;
}

/* ~~ Search bar properties ~~*/

div.searchbox{
	height:57px;
	width:312px;
	float:right;
	white-space:nowrap;
}

#form-search p	{
	padding: 0;
	margin: 0;
}

#form-search label, #input-keywords, #submit-search{
	vertical-align: middle;
	padding: 0;
	margin: 0;
}

#input-keywords	{
	border-width: 1px 0 1px 1px;
	border-style: solid;
	border-color:#ccc;
	height: 23px;
	width: 240px;
	line-height: 20px;
	padding-left: 2px;
}

/* ~~ Horizontal rule ~~*/
hr{
	height: 0;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #D86807;
}


/* 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: 980px;
}	

.lefthand{
	margin-left: -980px; 
}

#footer{
	width: 980px;
}	
div.bottomlinks1, div.bottomlinks2, div.bottomlinks3, div.bottomlinks4{
	width: 209px;
}

div.picscontent{
	width:30%;
}

}

/* 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){

#maincontainer{
	width: 680px;
}	

.lefthand{
	margin-left: -680px; 
}

/* ~~ Remove links from top nav bar ~~*/
.navextra{
	display:none;
}

#footer{
	width: 680px;
}	
div.bottomlinks1, div.bottomlinks2, div.bottomlinks3, div.bottomlinks4{
	width: 20%;
}

div.picscontent{
	width:46%;
}

}

/* 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: 96%;
}	

/* ~~ Show top navigation links ~~*/
.topleftlinks{
	display:inline;
	float:left;
	padding-top:4px;
	font-size:0.8em;
}

/* ~~ Remove top right navigation ~~*/
span.toptextlinks{
	display:none;
}

/* ~~ Remove horizontal nav bar ~~*/
#navlist{
	display:none;
}

/* ~~ Move search bar ~~*/
div.searchbox{
	margin-top:-20px;
	width:90%;
	text-align:left;
	height:46px;
	float:left;
}

#topnav{
	display:none;
}

#input-keywords	{
width: 300px;
}

/* ~~ Remove left hand menu ~~*/	
.lefthand{
	display:none; 
}

span.prodcats{
	display:none;
}

/* ~~ Reset footer ~~*/

#footer{
width: 100%;
}	
div.bottomlinks1, div.bottomlinks2{
width: 40%;
float:left;
}

 div.bottomlinks3, div.bottomlinks4{
width:40%;
float:left;
}



div.picscontent{
	width:94%;
}

}

/* 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{

}

div.searchbox{
width:90%
}

#input-keywords	{
	width: 220px;
}

/* ~~ Remove top slider ~~*/
div.callbacks_container, div.rslides{
	display:none;
}


#footer{
	width: 90%;

}

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;
}

}