/* ~~ This the css file for the Responsive Design of Virtual Eco from Ecommerce Templates.
The first section correponds to the maximum width version of 960 pixels ~~ */
@font-face {
	font-family: 'Titillium';
	src: url('css/fonts/TitilliumText22L004-webfont.eot');
	src: url('css/fonts/TitilliumText22L004-webfont.eot?#iefix') format('embedded-opentype'), url('css/fonts/TitilliumText22L004-webfont.woff') format('woff'), url('css/fonts/TitilliumText22L004-webfont.ttf') format('truetype'), url('css/fonts/TitilliumText22L004-webfont.svg#TitilliumText22LMedium') format('svg');
	font-weight: normal;
	font-style: normal;
}
body {
	font: 100%/1.5 Verdana, Arial, serif;
	margin: 0;
	padding: 0;
	color: #000;
	background-image: url(images/shantibackground.png);
}

#topcontainer{
	font-family: 'Titillium';
	width: 100%;
	height:120px;
	background-color:#fff;
	padding-bottom:20px;
	-webkit-box-shadow:inset 0px -5px 20px rgba(0,0,0,0.1),0px 5px 5px rgba(0,0,0,0.1);
	-moz-box-shadow:inset 0px -5px 20px rgba(0,0,0,0.1),0px 5px 5px rgba(0,0,0,0.1);
	box-shadow:inset 0px -5px 20px rgba(0,0,0,0.1),0px 5px 5px rgba(0,0,0,0.1);
}
#topcontainer .stripe {
	background-color:#069;
	height: 25px;
	padding-top: 1px;
	-webkit-box-shadow:inset 0px -5px 20px rgba(0,0,0,0.1),0px 5px 5px rgba(0,0,0,0.1);
	-moz-box-shadow:inset 0px -5px 20px rgba(0,0,0,0.1),0px 5px 5px rgba(0,0,0,0.1);
	box-shadow:inset 0px -5px 20px rgba(0,0,0,0.1),0px 5px 5px rgba(0,0,0,0.1);

}
#topcontainer .stripe a, a:hover, a:active, a:focus, a:visited {
	color:#fff;
}
#topcontainer .box {
	width:960px;
	margin:0 auto;
	padding-top:5px;

}

#topcontainer .login {
	float:right;
	color: #FFF;
}
#topcontainer .hdrRtop {
	line-height: 20px;
	text-align: right;
	float:right;
	padding-top: 20px;
	padding-right:16px;
	color: #666;
}

.texttopright, .texttopmid {
	width: 300px;
	padding-left: 20px;
	float:left;
	color: #FFF;
	font-size:14px;
	text-transform: uppercase;
	font-family: 'Titillium';
	
}


#container{
	width: 960px;
	background: #fff;
	margin: 0 auto;
	background-color: #fff;
	background-image: url(images/bg1.gif);
	background-repeat: repeat-y;
	color: #000;
}

/* ~~ Header section ~~ */
#banner{
	background-color: #fff;
}

#banner h1{
	margin: 0;
	padding: .5em;
}

#header {
	background: #fff;
}

#header .coname {
	width:518px;
	height:125px;
	padding-top: 10px;
	padding-bottom:5px;
	padding-left:5px;
	float:left;
	background-image:  url(images/logo320.gif);
	background-repeat:no-repeat;
}

#header .hdrR {
	line-height: 1.1em;
	text-align: right;
	float:right;
	padding-right:16px;
	padding-top:16px;
	color: #666;
}




div.thead {
	border-bottom:3px solid #FFE681;
	height:50px;
}

div.tlinks {
	width:50%;
	float:left;
	margin:18px 0px;
	color:#667903;
	font-size:0.8em;
}
div.tnote {
	float:right;
	font-family: 'Titillium';
	text-transform:uppercase;
	color:#069;
}
/* ~~ This is the text navigation only to be shown on mobile screens ~~ */
div.logonav{
	display:none;
}
span.nav03{
	display:none;
}

/* ~~ Top navigation ~~ */
.header-nav {
background-image:  url(images/topnavbg.jpg);
	font-size: 0.85em;
	font-family : Tahoma;
	color : #fff;
	height: 38px;
	letter-spacing:2px;
	padding-top:9px;
	float:left;
	width:645px;
}
/* Soft cart 
-------------------------------------*/
input.sccheckout{
box-shadow: 0px 1px 4px 0px #BCC8DC;
background-color:#066;
border-radius:4px;
border:1px solid #069;
display:inline-block;
color:#fff;
font-family:arial;
font-size:11px;
font-weight:bold;
padding:3px 5px;
text-decoration:none;
text-shadow:1px 0px 0px #6c79b7;
cursor:pointer;
}



div.scprodsadded, div.sccartitems{
}

div.scprice{

}

div.sccarttotal{
}

#wrapper{width:960px;margin:0 auto;}
	

/* ~~ Left hand section ~~ */
#left{
	float: left;
	width: 155px;
	margin-left: 15px;
	margin-top: 0.2em;
}

#left p { 
	margin-top: 0; 
}
	
/* ~~ Content section ~~ */
#content{
	margin: 0 3em 0 170px;
}

#content h2 { 
	margin: 0;
	color:#669900;
}
	/* ~~ Footer sections ~~ */
#footer{
	clear: both;
	background-color: #2d9718;
}

div.footer1{
	clear: both;
	background-color: #2d9718;
	background-image: url(images/ftr.jpg);
	width:960px;
	height:35px;
}

#footer2{
	clear: both;
	background-color: #fff;
	background-image: url(images/ftrbg.gif);
	background-repeat: repeat-y;
	font-size: 0.9em;
}

#footer a, a:visited{
	text-decoration:none;
	color:#333;
}

#footer a:hover, a:active, a:focus { 
	text-decoration:underline;
	color:#ccc;
}

.news{
	color:#fff;
	float:left;
	width:300px;
	background-color: #2d9718;
	padding:10px;
}

.news1{
	color:#fff;
	float:left;
	width:299px;
	background-color: #2d9718;
	border-left: 1px dotted #fff;
	border-right: 1px dotted #fff;
	padding: 10px;
}

.news2{
	color:#fff;
	float:right;
	width:299px;
	background-color: #2d9718;
	padding: 10px;
}

#footer2 .ftr1{
	padding-left:10px;
	width:64px;
	background:#fff;
	float:left;
}

#footer2 .ftr2{
	padding-left:10px;
	width:200px;
	background:#fff;
	color:#666;
	float:right;
}

.foo{
	float:left;
	width:95px;
	padding-left:10px;
}

.foo1{
	float:left;
	width:250px;
	border-right: 1px dotted #666;
	padding: 10px;
	color: #666;
}

.foo2{
	float:left;
	width:172px;
	padding: 10px;
	border-right: 1px dotted #666;
	color: #666;
}

.foo3{
	color: #666;
	float:left;
	width:172px;
	padding: 10px;
	border-right: 1px dotted #666;
}

.foo4{
	color: #666;
	float:right;
	width:172px;
	padding: 10px;
}

h6{
	font-size: 1.2em;
	color: #069;
	margin:0px 0px 6px 0px;
	font-weight:bold;
	font-family:  'Titillium', Verdana;
}

#footer2 a, a:visited{
	text-decoration:none;
	color:#106F26;
}

#footer2 a:hover, a:active, a:focus { 
	text-decoration:underline;
	color:#333;
}

p.footer{
	font-size:0.9em;
	color: #666;
}

div.end{
	background-color: #fff;
	background-image: url(images/ftrbtm.gif);
	width:960px;
	height:35px;
	clear: both;
}
/* receipt
-------------------------------------*/
.receiptbody{
	background-color:#FFF;
}
.receiptoption{
	background-color:#FFF;
}
.receipthr{height: 0;border-width: 1px 0 0 0;border-style: solid;border-color: #9EBE25;}
.receipthl{
	background-color:#6C6;
}
.receiptheading{
	background-color:#693;
	color: #FFFFFF;
	font-weight:bold;
}
/*Social Media 
-------------------------------------*/
div.socialmediabuttons{margin:10px 8px;background:#fff;width:94%;float:left;padding:4px;}
div.socialmediabutton{float:left;display:inline-block;padding:6px;}
div.socialaskaquestion{margin-top:1px;}
div.sociallinkedin{margin-top:6px}
div.socialfacebook{margin-top:6px}
div.socialtwitter{margin-top:6px}
div.socialgoogle{margin-top:6px}
div.socialpinterest{margin-top:6px}
div.socialcustom{margin-top:6px}

input.askaquestion, input.emailfriend{
background:#693;
color:#fff;
height:21px;
border:1px;
border-radius:4px;
font-size:12px;
cursor:pointer;
margin-top:7px;
}
/* General 
-------------------------------------*/


TD {
	font-size: 11px;
	font-family : Verdana;
	color: #333;
}

P {
	font-size: 11px;
	font-family : Verdana;
	color: #333;
}

TD.smaller {
	font-size: 9px;
	font-family : Verdana;
	color : #333;
}

P.smaller {
	font-size: 9px;
	font-family : Verdana;
	color : #333;
}
OPTION.oostock {
color : #A0A0A0;
}

/* dynamic menu
-------------------------------------*/

ul.ectmenu1 {
	list-style: none;
	border:0px solid;
	font-size:10px;
	font-weight:200;
	padding:0px;
	z-index:1000;
}
li.ectmenu1 {
	border: 1px dotted #F9F9F6;
	padding:2px;
	width: 138px;
}
li.ectmenuhassub1 a{
display:block;
padding:2px;
background-image:url(images/arrow.gif);
}
li.ectmenuhassub1 a:hover{
	display:block;
	padding:2px;
	background-image:url(images/arrowov.gif);
	color: #9C0;
}
li.ectmenu1 a{
	display:block;
	padding:2px;
	color: #333;
}
li.ectmenu1 a:hover{
	color: #9C3;
}
/* ~~ top address section ~~ */
h3{
	font-size: 1.4em;
	margin: 10px 0px 10px 0px;
	color:#9DBC5F;
}

p.address{
	font-size: 0.8em;
	margin: 0;
	color:#666;
	padding-top:25px;
}


/* ~~ Top nav bar ~~ */
.topnav {
	padding-left:6px;
}

.topnav a:link{
	text-decoration:none;
	color:#fff;
}

.topnav a:visited{
	text-decoration:none;
	color:#fff;
}

.topnav a:active{
	text-decoration:none;
	color:#fff;
}

.topnav a:hover {
	text-decoration:none;
	color: #ccc;
}

.leftend{
	float:left;
	background-image:  url(images/leftend.jpg);
	width:20px;
	height:53px;
}
	
.rightend{
	float:right;
	background-image:  url(images/rightend.jpg);
	width:20px;
	height:53px;
}

/* ~~ clear div ~~ */
.clr {
	clear: both;
	line-height: 0;
	font-size: 0;
	height: 0;
	border: none;
}

/* ~~ Left content ~~ */
.leftmenu{
	background:#fff;
	border: 1px solid #ccc;
	width:145px;
}
	
.sm{
	background: #fff;
	width:198px;
	color: #666;
}
	
	/* ~~ The navigation list styles ~~ */
ul.navt {
	list-style: none; 
	margin-bottom: 15px; 
	margin-top:0px;
	padding: 5px 5px 5px 5px;
	display: block; 
	width: 135px;
	font-size:12px;
	color:#666;
}
ul.navt li {
	border-bottom: 1px solid #ccc; 
}
ul.navt a:link { 
 	text-decoration: none;
	padding: 5px 5px 5px 5px;
	display: block; 
	width: 125px;
	color:#666;
}
 ul.navt a:visited { 
 	text-decoration: none;
	padding: 5px 5px 5px 5px;
	display: block; 
	width: 125px;
	color:#666;
}
 ul.navt a:active { 
 	text-decoration: none;
	padding: 5px 5px 5px 5px;
	display: block; 
	width: 125px;
}
ul.navt a:hover { 
	text-decoration: none;
	background: #ccc;
	color: #FFF;
}



/* ~~ menu heading ~~ */
.menutop{
	display: block;
	background: #066;
	width:143px;
	height:20px;
	color: #FFF;
	font: 0.87em Tahoma, Arial, Helvetica, sans-serif;
	font-weight:bold;
	padding-left:5px;
	padding-top:2px;
	border-top-left-radius: 10px;

-moz-border-radius-topleft: 10px;

-webkit-border-top-left-radius: 10px;

border-top-right-radius: 10px;

-moz-border-radius-topright: 10px;

-webkit-border-top-right-radius: 10px;
}

/* ~~ Link properties ~~ */
a:link{
	text-decoration:none;
	color:#106F26;
}
a:visited{
	text-decoration:none;
	color:#106F26;
}
a:active{
	text-decoration:none;
	color:#106F26;
}
a:hover, a:focus { 
	text-decoration:underline;
	color:#333;
}

/* ~~ store generated link properties ~~ */
a.ectlink:link{
	text-decoration:none;
	color:#106F26;
}
a.ectlink:visited{
	text-decoration:none;
	color:#106F26;
}
a.ectlink:active{
	text-decoration:none;
	color:#106F26;
}
a.ectlink:hover, a.ectlink:focus { 
	text-decoration:underline;
	color:#333;
}
	

/*Minicart properties*/
.mincart {
	font-size: 0.85em;
	border-width: 1px;
	border-color: #06F;
	text-align: left;
	margin-left: 5px;
}
/* one line minicart and minilogin
-------------------------------------*/
div.minicartoneline{
background:#069;
width:200px;
color:#FFF;
}
div.minicartoneline1{
padding:2px;
font: normal 10px Arial, sans-serif;
float:left;
color:#FFF;
}
div.minicartoneline2{
padding:2px;
font: normal 10px Arial, sans-serif;
float:left;
color:#FFF;
}
div.minicartoneline3{
padding:2px;
font: normal 10px Arial, sans-serif;
color:#FFF;
}
/* css  minicart and minilogin
-------------------------------------*/
div.minicart{
border:dotted 1px #06F;
background:#fff;
margin:4px auto;
width:130px;
padding:2px;
}
div.minicartcnt{
	text-align:left;
	padding:4px;
	font-size:10px;
	font-family: Verdana;
	border:0px dotted #06F;
	background-color: #fff;
}
span.minicartdsc{
text-align:center;
font: normal 10px;
font-family: Verdana;
color:#ff6600;
}

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

/*Cart / search table backgrounds*/
table.cobtbl{
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 1px 1px 3px #666;
	border-collapse: collapse;
} 

td.cobhl{
	background-color:#fff;
	font-weight: bold;
	color:#333;
}

td.cobll{
	background-color: #fff;
	color : #333;
}
td.cobhdr{
background-color:#B2D77A;
font-size:12px;
font-weight: normal;
text-transform: uppercase;
color:#fff;

}
/* ~~ ect buttons checkout ~~ */
input.ectbutton,button.ectbutton{
	box-shadow: 0px 1px 4px 0px #BCC8DC;
background-color:#066;
border-radius:4px;
border:1px solid #069;
display:inline-block;
color:#fff;
font-family:arial;
font-size:11px;
font-weight:bold;
padding:3px 5px;
text-decoration:none;
text-shadow:1px 0px 0px #6c79b7;
cursor:pointer;
}

/* The product page
-------------------------------------*/


/* ~~ the main product div ~~ */
div.product{
	padding:3px;
	width:230px;
	float:left;
	height:320px;
	margin:2px;
	border:1px solid #9DBC5F;
	background-color:#fff;
	font-size: 0.8em;
}

/* ~~ top breadcrumb navigation ~~ */
div.prodnavigation{
	padding:10px;
	float:left;
	width:90%;
}

/* ~~ top checkout button ~~ */
div.checkoutbutton{
	display:none;
}

/* ~~ discount text ~~ */
div.allproddiscounts{
	font-size: 1.1em;
	color:#A4D664;
	width:90%;
	margin-bottom:2px;
	float:left;
}

span.discountsapply{
	color:#669900;
	font-weight:bold;
}


/* ~~ the product description ~~ */
div.proddescription{
}

/* ~~ product options ~~ */
div.prodoptions{
	padding:2px;
	margin-left:2px;
	width:220px;
	float:left;
	border: 1px solid #ccc;
	background:#fff;
}

select.prodoption{
	font-size: 0.7em;
	width:130px;
	float:right;
	margin:6px;
}

span.prodoption{
	font-size: 0.8em;
	padding: 2px;
}

div.optiontext{
	padding: 2px;
	font-size: 0.9em;
	width: 70px;
	float:left;
	margin:2px;
}

div.option{
	padding: 0px;
	float:left;
}

/* ~~ the list price ~~ */
div.listprice{
	padding: 0px;
	text-align:left;
	font-size: 0.8em;
	width:220px;
	float:left;
}
.yousave{
	color:#f30;
	font-weight:bold;
	font-size:1em;
	}
/* ~~ tohe main price display ~~ */
div.prodprice{
	padding: 2px;
	font-size: 0.9em;
	font-weight:bold;
	text-align:center;
	float:left;
	width:220px;
	color: #069;
}

/* ~~ the alternative currency display ~~ */
div.prodcurrency{
	padding: 2px;
	text-align:center;
	float:left;
	width:220px;
	font-size: 0.8em;
}

/* ~~ the add to cart button ~~ */
div.addtocart{
	text-align:center;
	padding-top:6px;
	float:left;
	width:200px;
}

/* ~~ the notify when back in stock button ~~ */
.notifystock{
	text-align:center;
	padding-top:6px;
	float:left;
	width:220px;
}

/* ~~ the configure button ~~ */
.configbutton{
	text-align:center;
	margin-top:6px;
}

/* ~~ the out of stock message ~~ */
div.outofstock{
	text-align:center;
	padding-top:6px;
	font-weight:bold;
}

/* ~~ the product id display ~~ */
.prodid {
	background: #A4D664;
	color:#333;
	padding:6px;
	text-align:center;
	font-size: 1.1em;
}

/* ~~ the multi option display ~~ */
div.multioptiontext{
	width:180px;
}

/* ~~ the pagination navigation ~~ */
div.pagenums{
	text-align:center;
	float:left;
	padding:10px;
}

/* The detail page 
-------------------------------------*/
div.detailimage{
	float:left;
	padding:0.5em;
}
 
.detailid {
	color:#069;
	width:45%;
	float:right;
	padding-bottom:0px;
	font-size: 0.7em;
	text-align: left;
}

.detailmanufacturer{
	float:right;
	width:45%;
}

.detailinstock{
	float:right;
	width:45%;
	border-bottom:1px #ccc dotted;
}

.detailname {
	color:#666;
	padding:0px;
	width:45%;
	float:right;
	font-size: 0.5em;
}

.detaildiscounts{
	color:#B00000;
	font-weight:bold;
	font-size: 0.8em;
	float:right;
	width:45%;
}

span.detaildiscountsapply{
	color:#669900;
	font-weight:bold;
	padding-left: 0px;
}

div.detaildescription{
	font-size: 0.8em;
	margin-top:5px;
	float:left;	
	width:95%;
	padding-left:6px;
	padding-top:4px;
	border:1px #ccc dotted;
}

.detaillistprice{
    padding-top: 0.6em;
	text-align:left;
	font-size: 0.7em;
	float:right;
	width:45%;
}

div.detailprice{
	font-size: 1.2em;
	font-weight:bold;
	text-align:left;
	float:right;
	width:45%;
	color:#690;
	padding-top:0.2em;
	border-bottom:2px #ccc dotted;
}

div.detailcurrency{
	padding-top: 6px;
	font-size: 0.9em;
	text-align:center;
	float:left;
	width:45%;
}

.detailoptions{
	padding: 6px;
	float:left;
	font-size: 0.8em;
	width:300px;
	text-align:right;
	color:#666;
}

select.detailprodoption{
	font-size: 0.9em;
	float:right;
	width:200px;
	margin:6px;
	color:#666;
}

.detailoptiontext{
	padding: 6px;
	float:left;
}

div.review{
	width:90%;
}

.previousnext{
	padding-top:10px;
	padding-bottom:6px;
	float:right;
	width:45%;
	text-align:center;
	font-size: 0.7em;
}

div.emailfriend{
	padding-top: 10px;
	text-align:center;
	float:right;
	width:45%;
}

div.detailquantity{
	float:right;
	width:45%;
	color:#666;
}

div.detailquantitytext{
	margin:4px;
	float:left;
	width:20%;
	text-align:left;
	font-size: 0.7em;
}

div.detailquantityinput{
	margin:4px;
	float:left;
	width:50%;
	text-align:left;
}

div.detailaddtocart,.detailoutofstock{
	margin:4px;
	float:right;
	width:45%;
	text-align:center;
	border-bottom:2px #ccc dotted;
	padding-bottom:10px;
}

.detailnotifystock{
	text-align:center;
	padding-top:6px;
	float:left;
	width:45%;
}

div.navdesc{
	padding-top:10px;
}
/* ~~ the cross selling display ~~ */
.csproduct{
	float:left;
	width:150px;
	font-size: 0.6em;
	
	
	
}

.csprodname {
font-size: 10px;
font-weight: bold;

}

.csprodimage {
width: 90px;

}

p.cstitle{
float:left;
width:100%
}

/* ~~ spry tab cross selling display ~~ */
.reltabimagebox{width: 30%;}

img.reltabimage {
padding:1em;
float: left;

}
.reltabname{width: 65%;
float:left;
padding-top: 1em;
font-weight: bold;


}
.reltabdescription{
float:left;
width: 70%;
margin-bottom: 60px;
}


/* This is the first breakpoint and is for screen sizes between 750 and 980 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: 959px) {
	
#topcontainer .box {
	width:750px;
	

}



.texttopmid {
	display:none;
	
}	


#container{
	width: 750px;
	background-image: url(images/bg750.gif);
	background-repeat: repeat-y;
	margin-top: 0.3em;
}
#wrapper{
	width:750px;
}
#wrapper2 {
	display: block;
	width: 100%;
}


.header-nav {
	background-image:  url(images/topnavbg.jpg);
	letter-spacing:1px;
	width:465px;
}

#footer{
	clear: both;
	background-color: #2d9718;
}

div.footer1{
	clear: both;
	background-color: #2d9718;
	background-image: url(images/ftr750.jpg);
	width:748px;
	height:35px;
}

#footer2{
	clear: both;
	background-color: #fff;
	background-image: url(images/ftrbg750.gif);
	background-repeat: repeat-y;
}

#footer a, a:visited{
	text-decoration:none;
	color:#333;
}

#footer a:hover, a:active, a:focus { 
	text-decoration:underline;
	color:#ccc;
}

.news{
	width:354px;
}

.news1{
	width:353px;
	border-right: 0px;
}

.news2{
	display:none;
}

#footer2 .ftr1{
	padding-left:10px;
	width:64px;
	background:#fff;
	float:left;
}

#footer2 .ftr2{
	padding-left:10px;
	width:200px;
	background:#fff;
	color:#666;
	float:right;
}

/* ~~ hide footer sections ~~ */
.foo{
	display:none;
}

.foo1{
	display:none;
}

.foo2{
	float:left;
	width:172px;
	padding: 10px;
	border-right: 1px dotted #666;
	margin-left:6px;
}

.foo3{
	color: #666;
	float:left;
	width:172px;
	padding: 10px;
	border-right: 1px dotted #666;
}

.foo4{
	color: #666;
	float:right;
	width:292px;
	padding: 10px;
}

div.end{
	background-color: #fff;
	background-image: url(images/ftrbtm750.gif);
	width:750px;
	height:35px;
	clear: both;
}

.leftmenu{
	background: #f6f6f6;
	border: 1px solid #ccc;
	width:145px;
}
	
.sm{
	background: #fff;
	width:198px;
	color: #666;
}





/* The detail page 
-------------------------------------*/
div.detailcheckoutbutton{
	
}

.detailid {
width:90%;
float: left;
}

.detailimage {
	margin: auto 0;
}

.detailname {
width:90%;
float: left;
}

.detailmanufacturer{
}

.detaildiscounts{
width:90%;
float: left;
}

.detailinstock{
width:90%;
float: left;
}

.detaillistprice{
width:90%;
float: left;
}

div.detailprice{
width:90%;
float: left;
}

div.detailcurrency{
width:90%;
float: left;
}


.detailoptions{
float:left;
width:90%;
float: left;
}

select.detailprodoption{
float:right;
width: 210px;


}

.detailoptiontext{
float:left;
width:220px;

text-align:left;

}
.previousnext{
width:90%;
float: left;

}

div.emailfriend{
width:90%;
float: left;
}

div.detailquantity{
width:90%;
float: left;

}

div.detailquantitytext{
width:50px;
text-align:left;


}

div.detailquantityinput{
float:left;
}

div.detailaddtocart,.detailoutofstock{

width:90%;
float: left;
}

.detailnotifystock{
}

div.category{
	width:470px;
}

div.review{
	float:left;
	width:470px;
}

div.navdesc{
	padding-top:10px;
}



}


/* This is the second breakpoint and is for screen sizes between 468 and 758 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: 758px) {
	
#topcontainer {
	height: 200px;
}
#topcontainer .box {
	width:468px;
	

}	
#topcontainer .login {
	display:none;
}

#wrapper{
	width:468px;
}
p.address{
	font-size: 0.5em;
	padding-top:4px;
}


#container{
	width: 468px;
	background-image: url(images/bg468.gif);
	background-repeat: repeat-y;
}

.header-nav {
	background-image:  url(images/topnavbg.jpg);
	width:183px;
}

#header .coname {
	width:316px;
}

/*hide header parts*/
#header .hdrR {
	display:none;
}

div.tlinks{
    width:100%;
}

div.tnote{
	float:right;
}

/*Reduce top navigation links*/
span.nav02{
	display:none;
}

/*Enable top navigation hidden previously*/
div.logonav{
	display:inline;
	margin-left:104px;
}
span.nav03{
	display:inline;
}

/* ~~ Remove left hand section ~~ */
.leftmenu{
	display:none;
}

#left{
	display:none;
}
	
.sm{
	display:none;
}

.lefticon{
	display:none;
}

.menutop{
	display:none;
}

/* ~~ Content section ~~ */
#content{
	margin: 0 3em 0 1em;
	width:434px;
}

h2{
	margin:0px 0px 0px 12px;
}

#footer{
	clear: both;
	background-color: #2d9718;
}

div.footer1{
	clear: both;
	background-color: #2d9718;
	background-image: url(images/ftr468.jpg);
	width:466px;
	height:35px;
}

#footer2{
	clear: both;
	background-color: #fff;
	background-image: url(images/bg468.gif);
	background-repeat: repeat-y;
}

#footer a, a:visited{
	text-decoration:none;
	color:#333;
}

#footer a:hover, a:active, a:focus { 
	text-decoration:underline;
	color:#ccc;
}

.news{
	width:446px;
}

/*Hide and format bottom sections*/
.news1{
	display:none;
}

.news2{
	display:none;
}

#footer2 .ftr1{
	padding-left:10px;
	width:64px;
	background:#fff;
	float:left;
}
#footer2 .ftr2{
	padding-left:10px;
	width:200px;
	background:#fff;
	color:#666;
	float:right;
}

.foo{
	display:none;
}

.foo1{
	display:none;
}

.foo2{
	float:left;
	width:192px;
	padding: 10px;
	border-right: 1px dotted #666;
	margin-left:24px;
}

.foo3{
	color: #666;
	float:left;
	width:182px;
	padding: 10px;
	border-right: 0px;
}

.foo4{
	display:none;
}

.topnav {
	padding-left:4px;
	font-size:0.9em;
}

div.end{
	background-color: #fff;
	background-image: url(images/ftrbtm468.gif);
	width:468px;
	height:35px;
	clear: both;
}





/* The detail page 
-------------------------------------*/
div.detailcheckoutbutton{
	width:90px;
}

div.proddetail{
}

.detailid {
	float:left;
	width:90%;
}

.detailimage {
	text-align: center;
	width:430px;
}

.detailname {
	float:left;
	width:90%;
}

.detailmanufacturer{
	float:right;
	width:200px;
}

.detaildiscounts{
	float:left;
	width:90%;
}

.detailinstock{
	float:right;
	width:196px;
}

.detaillistprice{
	width:433px;
}

.detaildescription{
	width:424px;
	margin-left:2px;
}

div.detailprice{
	width:95%;
	float:right;
	text-align: right;
	padding-right: 1em;
}

div.detailcurrency{
	width:433px;
}

select.detailprodoption{
	
width:300px;
	float:right;
}

.detailoptions{
width: 430px;
}
.detailoptiontext{
float:left;
text-align:left;

}
.previousnext{
	width:433px;
}

div.emailfriend{
	display:none;
}

div.detailquantity{
	width:300px;
}

div.detailquantitytext{
	width:60px;
	float:left;
}

div.detailquantityinput{
	width:40px;
	float:left;
}

div.detailaddtocart,.detailoutofstock{
	width:433px;
}

.detailnotifystock{
	width:433px;
}

div.category{
	width:433px;
}

div.review{
	float:left;
	width:433px;
	margin-left:12px;
}

span.review{
	margin-left:12px;
}

div.navdesc{
	padding-top:10px;}

.csproduct{
	float:left;
	width:125px;}





/*Hide left hand details column in the cart*/
.cobcol1{
	display:none;
}

/*Reduce width of the additional info field on checkout*/
textarea.addinfo{
	width:150px;
}

}


/* This is the third 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) {
	
#topcontainer .box {
	width:316px;
	

}
#topcontainer .hdrRtop {
	line-height: 20px;
	float:right;
	padding-top: 20px;
	padding-right:0px;
}	
p.address{
	font-size: 0.5em;
	padding-top:2px;
}

#wrapper{
	width:316px;
}
#container{
	width: 316px;
	background-image: none;
}

.header-nav {
	background-image:  url(images/topnavbg.jpg);
	width:31px;
}

#header .coname {
	width:316px;
	padding-left:0px;	
}

#header .hdrR {
	display:none;
}

span.nav02, span.nav01{
	display:none;
}

.leftmenu{
	display:none;
}

#left{
	display:none;
}
	
.sm{
	display:none;
}

.lefticon{
	display:none;
}

.menutop{
	display:none;
}

.leftend{
	background-image:  url(images/leftend320.jpg);
}
	
.rightend{
	background-image:  url(images/rightend320.jpg);
}




#content{
	padding-top: 0em;
	margin: 0 3em 0 0;
	width:312px;
}

h2{
	margin-left:12px;
}

#footer{
	clear: both;
	background-color: #2d9718;
}
div.footer1{
	display:none;
}

#footer2{
	clear: both;
	background-color: #fff;
	background-image: none;
}

#footer a, a:visited{
	text-decoration:none;
	color:#333;
}

#footer a:hover, a:active, a:focus { 
	text-decoration:underline;
	color:#ccc;
}

.news{
	width:294px;
}

.news1{
	display:none;
}

.news2{
	display:none;
}

.foo{
	display:none;
}

.foo1{
	display:none;
}

.foo2{
	float:left;
	width:136px;
	padding: 3px;
	border-right: 1px dotted #666;
	margin-left:2px;
}

.foo3{
	color: #666;
	float:left;
	width:160px;
	padding: 3px;
	border-right: 0px;
}

.foo4{
	display:none;
}

div.end{
	display:none;
}





/* The detail page 
-------------------------------------*/
div.detailcheckoutbutton{
}

div.proddetail{
	width:306px;
}

.detailid {
	float:right;
	width:306px;
}

.detailimage {
	float:left;
	width:306px;
	margin-left:6px;
}

.detailname {
	float:right;
	width:300px;
	margin-left:12px;
}

.detailmanufacturer{
	float:right;
	width:300px;
	margin-left:12px;
}

.detaildiscounts{
	float:right;
	width:300px;
	margin-left:12px;
}

.detailinstock{
	float:right;
	width:300px;
	margin-left:12px;
}

.detaillistprice{
	width:300px;
}

.detaildescription{
	width:300px;
	margin-left:6px;
}

div.detailprice{
	width:300px;
}

div.detailcurrency{
	width:300px;
}

select.detailprodoption{
width: 250px;
float: left;
}

.detailoptions{
width: 300px;
}

.previousnext{
	width:300px;
}

div.emailfriend{
	display:none;
}

div.detailquantity{
	width:150px;
	float: left;
	margin-left: 10px;
}

div.detailquantitytext{
	width:80px;
	float:left;
}

div.detailquantityinput{
	width:50px;
	float:right;
}

div.detailaddtocart,.detailoutofstock{
	width:300px;
}

.detailnotifystock{
	width:300px;
}

div.category{
	width:300px;
}

div.review{
	float:left;
	width:300px;
	margin-left:4px;
}

span.review{
	margin-left:4px;
}

div.navdesc{
	padding-top:10px;
	width:296px;
}

.csproduct{
	float:left;
	width:150px;}


p.cattitle{
	margin:0px 0px 6px 6px;
}

h6{
	font-size: 1em;
	margin:0px 0px 2px 
}

/*Reduce fone size in the cart*/
td.cobll, td.cobhl{
	font-size:0.8em;
}

}