a, abbr, acronym, address, applet, article, aside, audio,
b, blockquote, big, body,
center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt, 
em, embed,
fieldset, figcaption, figure, font, footer, form, 
h1, h2, h3, h4, h5, h6, header, hgroup, html,
i, iframe, img, ins,
kbd, 
keygen,
label, legend, li, 
meter,
nav,
object, ol, output,
p, pre, progress,
q, 
s, samp, section, small, span, source, strike, strong, sub, sup,
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
u, ul, 
var{
    background: transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline; }
    
/* ~~ 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 ~~*/

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: #EEEFEF;
	list-style:none;
	line-height:18px;
	padding:0px;
  	font-size:0.8em;
}
.leftside ul li{
	list-style:none;
	line-height:24px; 
	padding-left:8px;}

/* ~~ Store generated link properties ~~*/
A.ectlink:link {
	color: black;
	text-decoration: underline;
}
A.ectlink:visited {
	color: black;
	text-decoration: underline;
}
A.ectlink:active {
	color: black;
	text-decoration: underline;
}
A.ectlink:hover {
	color: red;
	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;
}

/* ~~ Top horizontal navigation bar ~~*/
div#topnav{
	background-color: #544A4A;
	border-top: solid 1px #000;
	border-bottom: solid 1px #fff;
}
div#topnav ul{
	font-size: 0.8em;
	color: #999;
	text-align: center;
	margin: 0;
	padding-top:6px;
	height:21px;
	padding-left: 0px;
	line-height:1.3;
}
div#topnav ul li{
	display: inline;
}
div#topnav ul li a{
	padding: 5px 10px 5px 10px;
	color: #fff;
	text-decoration: none;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	margin-right: -1px;
}
div#topnav ul li a:hover{
	background-color: #da6805;
	color: #fff;
}

/* ~~ Titles ~~*/
div.menutop {
	font-size: 1em;
	font-weight:normal;
	height:22px;
	background: url(images/menutop.jpg) #fff repeat-x;
	color : #666;
	text-align:right;
	width: 142px;
  	border-top:1px solid #ccc;
  	padding-right:8px;
  	padding-top:4px;
}

div.prodtop {
	font-size: 0.9em;
	font-weight:normal;
	margin-top:0px;
	height:25px; 
	background: url(images/menutop.jpg) #fff repeat-x;
	color : #666;
  	border-top:1px solid #ccc;
  	padding-left:6px;
  	padding-top:2px;
  	font-weight:bold;
}

/* ~~ Home page content ~~*/

div.homepics{
	width:1130px;
}
div.picscontent{
	width:356px;
	padding:5px;
	float:left;
  	margin:4px;
}

div.prodpic{
	float:left;
}

div.prodtext{
	float:right;
	width:250px;
}

/* ~~ Search bar properties ~~*/

div.searchbox{
  	height:30px; /* ~~ 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;
}

/* ~~ Minicart and Minilogin ~~*/
table.mincart{
	background-color: #ECECEC;
	width: 95%; /* ~~ width: 140px; ~~*/
	margin:6px;
}


/* ~~ Cart and search backgrounds ~~ */
table.cobtbl{
	background-color: #F2F2F2;
	border-radius: 5px;
	box-shadow: 1px 1px 3px #666;
  	width:98%;
} 

td.cobhl{
	background-color:#EEEFEF;
	font-weight: normal;
	color:#333;
}

td.cobll{
	background-color: #F9F9F4;
	color : #333;
}

/* The product page - view all the available classes at http://www.ecommercetemplates.com/help/css-layouts.asp
-------------------------------------*/
div.prodfilter{
	float:left;
	background-color:#F9F9F4;
	border: 1px dotted #D7D1C9;
	padding:6px;
	font-weight:bold;
	color: #42619a;
	margin-bottom:10px;
	margin-top:10px;
}

div.prodfilterbar{
	float:left;
	width:100%;
}

select.prodfilter{
	padding:0px;
	margin:0px;
}

div.product{
	padding:2px;
	width:262px;
	float:left;
	height:380px;
	margin:2px;
	border:1px solid #C4C4C4;
	background-color:#F6F6F6;
}

.recommended div.product{
	padding:2px;
	width:262px;
	float:left;
	height:300px;
	margin:2px;
	border:1px solid #C4C4C4;
	background-color:#F6F6F6;
}

div.prodnavigation{
	padding:10px;
	float:left;
	width:95%;
}

div.checkoutbutton{
	width:120px; /* 135px */
	/*float:right;*/
  	margin-top:6px;
}

div.allproddiscounts{
	color:#486F8C;
	width:1000px;
	margin-bottom:2px;
	float:left;
}

.proddiscounts, .discountsapply{
	color:#486F8C;
	padding:4px;
}

div.prodmanufacturer{
	color:#666;
	padding:6px;
}

div.prodsku{
	color:#666;
	padding:6px;
}

div.prodimage{
	padding-top: 6px;
	text-align:center;
}

img.prodimage{
	border: 1px solid #ccc;
}

/* ADDED TO STYLESHEET TO MAKE PRODUCT IMAGES ON PRODUCT PAGE HAVE A MAX HEIGHT WHILE PRODDETAIL REMAINS NORMAL */

div.detailimage img.prodimage{
	border: 1px solid #ccc;
	max-height:none
}

div.prodimage img.prodimage{
	border: 1px solid #ccc;
	max-height:180px
}

/* END */

div.prodname{
	padding:10px;
	font-size: 1.1em;
	text-align:center;
	font-weight:bold;
}

div.prodrating{
	padding-left:4px;
}

div.prodinstock{
	padding:4px;
	color:#666;
}

div.proddescription{
	padding:6px;
	float:left;
}

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

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

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

div.optiontext{
	padding: 2px;
	font-size: 0.9em;
	width: 220px; /* 78px */
	float:left;
	margin:2px;
}

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


div.listprice{
	padding: 2px;
	text-align:center;
	width:256px;
	float:left;
}

div.prodprice{
	padding: 4px;
	font-size: 1.3em;
	font-weight:bold;
	text-align:center;
	float:left;
	width:256px;
}

div.prodcurrency{
	padding: 2px;
	text-align:center;
	float:left;
	width:256px;
	font-size: 0.8em;
}

div.addtocart{
	text-align:center;
	padding-top:6px;
	float:left;
	width:256px;
}

.notifystock{
	text-align:center;
	padding-top:6px;
	float:left;
	width:256px;
}

.configbutton{
	text-align:center;
	margin-top:6px;
}

div.outofstock{
	text-align:center;
	padding-top:6px;
	font-weight:bold;
}

.prodid {
	background: #D7D1C9;
	color:#333;
	padding:6px;
	text-align:center;
	font-size: 1.1em;
}

div.multioptiontext{
	width:180px;
}

div.pagenums{
	text-align:center;
	float:left;
	padding:10px;
}


/* The product detail page 
-------------------------------------*/
div.detailimage{
	float:left;
	width:400px;
	padding:10px;
} 

.detailid {
	color:#000;
	width:700px;
	padding-bottom:10px;
	font-size: 1em;
}

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

.detailsku{
	float:right;
	width:700px;
}

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

.detailname {
	color:darkred;
	font-weight:bold;
	padding:6px;
	width:700px;
	float:left;
	font-size: 1.2em;
}

.detaildiscounts{
	color:#91040D;
	font-weight:bold;
	font-size: 1em;
	float:right;
	width:700px
}

span.detaildiscountsapply{
	color:#91040D;
	font-weight:bold;
}

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

.detaillistprice{
	text-align:center;
	float:left;
	width:780px;
}

div.detailprice{
	font-size: 1.2em;
	font-weight:bold;
	text-align:center;
	float:left;
	width:780px;
	padding-top:8px;
}

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


.detailoptions{
	padding: 6px;
	float:left;
	width:350px;
	padding-left:266px;
}

select.detailprodoption{
	font-size: 0.9em;
	float:right;
	width:190px;
	margin:6px;
}

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

div.review{
	width:100%;
}

.previousnext{
	padding-top:10px;
	padding-bottom:6px;
	float:left;
	width:780px;
	text-align:center;
}

div.emailfriend{
	padding-top: 10px;
	text-align:center;
	float:left;
	width:1100px;
}

div.detailquantity{
  	padding-top:20px;
	float:right;
	width:900px;
}

div.detailquantitytext{
	margin:4px;
	float:left;
	width:650px;
	text-align:right;
}

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

div.detailaddtocart,.detailoutofstock{
	margin:4px;
	float:left;
	width:780px;
	text-align:center;
	border-bottom:1px #ccc dotted;
	padding-bottom:10px;
}

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

div.review{
	float:left;
}

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

p.cstitle{
	float:left;
	width:100%; /* 570px */
}

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

/* The category page 
-------------------------------------*/
div.category{
	width:280px;
	float:left;
}

div.catimage{
	width:130px;
	float:none;
	margin-left:20px
}

div.catdesc{
	padding:0px 0px 4px 12px;
}

div.catname{
	margin-top:16px;
	padding-left:12px;
	font-weight:bold;
}

.catdiscounts, .allcatdiscounts{
	padding-left:5px;
	font-weight:bold;
	color:#91040D;

}

.categorymessage{
	padding-left:5px;
	padding-top:6px;
	font-size: 1.1em;
}

/* 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.homepics{
	width:830px;
}	
	
div.picscontent{
	width:396px;
}

div.prodtext{
	width:290px;
}
  
/* ~~ The products page ~~*/
  div.prodnavigation{
	width:95%;
}

div.checkoutbutton{
	/* width:108px; */
}

/* ~~The detail page ~~*/
div.detaildescription{
  	width:100%;
}

.detaillistprice{
	width:100%;
}

div.detailprice{
	width:100%;
}

div.detailcurrency{
	width:100%;
}
  
div.detailaddtocart,.detailoutofstock{
	width:100%;
}
  
.previousnext{
	width:100%;
}

div.emailfriend{
	width:100%;
}
	
}

/* 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: 138px;
}
	
div.homepics{
	width:530px;
}	
	
div.picscontent{
	width:244px;
}

div.prodtext{
	width:140px;
}
  
/* ~~ The products page ~~*/
div.prodnavigation{
	width:95%;
}

div.checkoutbutton{
	/* width:110px; */
}
  
div.product{
    width:246px;
    height:380px;
}

.recommended div.product{
	width:246px;
	height:320px;
}
  
div.prodoptions{
	width:230px;
}

select.prodoption{
	width:220px;
}

div.optiontext{
	width: 220px;
}
 
 /* ~~ The detail page ~~*/
div.detailname{
	width:500px;
}
  
div.detaildescription{
  	width:500px;
}

.detaillistprice{
	width:500px;
}

div.detailprice{
	width:500px;
}
  
.detailoptions{
	padding-left:166px;
}

select.detailprodoption{
	width:190px;
}

.detailoptiontext{
	padding: 6px;
}

div.detailcurrency{
	width:500px;
}
  
div.detailaddtocart,.detailoutofstock{
	width:500px;
}
  
.previousnext{
	width:500px;
}

div.emailfriend{
	width:500px;
}
	
}

/* 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: 468px;
}	
  
/* ~~ 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:468px;
    text-align:left;
    height:46px;
    float:left;
}

#topnav{
    display:none;
}
  
#input-keywords	{
	width: 434px;
}
*/ 
*/ 

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

span.prodcats{
  	display:none;
}

/* ~~ Reset footer ~~*/

#footer{
	width: 468px;
}	
div.bottomlinks1, div.bottomlinks2, div.bottomlinks3{
	width: 118px;
}
div.bottomlinks4{
	display:none;
}
	
div.homepics{
	width:460px;
}	
	
div.picscontent{
	width:444px;
}
div.prodtext{
	width:330px;
}
/* ~~ Modify additional info field on checkout ~~*/
textarea.addinfo{
	width:150px;
}

/* ~~ The products page ~~*/
div.product{
	width:452px;
    height:auto;
}

.recommended div.product{
	width:452px;
	height:auto;
}

div.prodnavigation{
	width:95%;
}

div.checkoutbutton{
	/* width:105px; */
}
  
div.prodoptions{
	width:436px;
}

select.prodoption{
	width:190px;
}

div.optiontext{
	width: 188px;
}
  
div.listprice{
	width:436px;
}

div.prodprice{
	width:436px;
}

div.prodcurrency{
	width:436px;
}

div.addtocart{
	float:left;
	width:436px;
}

/* ~~ The details page ~~*/
div.detailname{
  	width:450px;
}
  
div.detaildescription{
  	width:450px;
}

.detaillistprice{
	width:450px;
}

div.detailprice{
	width:450px;
}

div.detailcurrency{
	width:450px;
}
  
.detailoptions{
	padding-left:96px;
    width:340px;
}

 
div.detailaddtocart,.detailoutofstock{
	width:450px;
}
  
.previousnext{
	width:450px;
}

div.emailfriend{
	width:450px;
}
	
}

/* 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{
	width: 308px;
}
  
div.searchbox{
    width:308px;
}
   
#input-keywords	{
	width: 274px;
}

/* ~~ Remove top slider ~~*/
div.callbacks_container, div.rslides{
	  display:none;
}
  
div.homepics{
	width:300px;
}	
	
div.picscontent{
	width:284px;
}

div.prodtext{
	width:180px;
}
  
#footer{
	width: 308px;
}

div.bottomlinks3{
	display:none;
}

/* ~~ Remove left hand cart column ~~*/
.cobcol1{
	display:none;
}

/* ~~ The products page ~~*/
div.product{
	width:292px;
    height:auto;
}

div.prodnavigation{
	width:160px;
}

div.checkoutbutton{
	/* width:105px; */
}
  
div.prodoptions{
	width:278px;
}

div.listprice{
	width:292px;
}

div.prodprice{
	width:292px;
}

div.prodcurrency{
	width:292px;
}

div.addtocart{
	float:left;
	width:292px;
}

/* ~~ The details page ~~*/
div.detailname{
  	width:290px;
}
  
div.detaildescription{
  	width:290px;
}

.detaillistprice{
	width:290px;
}

div.detailprice{
	width:290px;
}

div.detailcurrency{
	width:290px;
}
  
div.detailaddtocart,.detailoutofstock{
	width:290px;
}
  
.previousnext{
	width:290px;
}

div.emailfriend{
	width:290px;
}
  
.detailoptions{
	padding-left:16px;
    width:280px;
}

select.detailprodoption{
	width:180px;
}

.detailoptiontext{
	padding: 6px;
}
  
div.detailquantity{
	width:300px;
}
  
div.detailquantitytext{
	width:130px;
}

div.detailquantityinput{
	width:150px;
}
	
}

/*category menu*/
ul.ectmenu1 {
list-style: none;
border:0px solid;
font-size:10pt;
margin-top:2px;
background-color: transparent;
}

li.ectmenu1 {
border: 1px solid #000000;
padding:0px;
margin-top:2px;
background-color: red; /* #CC0000 is the original red color */
text-align:center;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
	border-radius:10px;
	-moz-border-radius:10px; /* Firefox 3.6 and earlier */
	-webkit-border-radius:10px; /* Safari */
}

li.ectmenuhassub1 a{
display:block;
padding:2px;
}

li.ectmenuhassub1 a:hover{
display:block;
padding:2px;
background-color: dimgray;
color:white;
}

li.ectmenu1 a{
display:block;
padding:2px;
color:white;
	border-radius:10px;
	-moz-border-radius:10px; /* Firefox 3.6 and earlier */
	-webkit-border-radius:10px; /* Safari */
}

li.ectmenu1 a:hover{
background-color: dimgray;
color:white;
	border-radius:10px;
	-moz-border-radius:10px; /* Firefox 3.6 and earlier */
	-webkit-border-radius:10px; /* Safari */
}

/*styles brought in from style2.css*/

::-moz-selection 	{ background-color: #91D8f7; color: #fff; }
::selection 		{ background-color: #91D8f7; color: #fff; }

a					{ outline: 0; color: black; text-decoration: underline; }
a:hover 			{ color: red; text-decoration: underline; }
p a:hover 			{ color: red; }
a:active 			{ outline: none; position: relative; top: 2px; }

.clearfix 			{ clear: both; }
iframe, object, embed{max-width: 100%;}

/*------------------------------------*\
  MAIN
\*------------------------------------*/

body 				{ 
	color: black;
	font-family: Arial, Helvetica, sans-serif, 'Droid Serif', serif;
	font-size: 12pt;
	background-color: white;
	background-image: url('siteimages/TH_Site_Ridges.png'), url(siteimages/TH_Site_Background.jpg);
	background-repeat: repeat-x, repeat;
	-webkit-transition-property: font-size;
	-moz-transition-property: font-size;
	transition-property: font-size;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.5s, 0.5s; 
	-webkit-transition-timing function: linear, ease-in;
	-moz-transition-timing function: linear, ease-in; 
	transition-timing function: linear, ease-in; 
}

#wrapper 			{
	margin: 0px auto;
	max-width: 980px;
	width: 90%;
	background: transparent;
	/*opacity: 0.7;
    filter: alpha(opacity=70);  For IE8 and earlier */
	padding: 0px 0;
	border:0px;
	border-style:solid;
	border-color:black;
}

header 				{ padding: 0px; background-image:url('siteimages/TH_Header.jpg'); }

h1 					{ font-size: 20pt; font-family: Arial, Helvetica, sans-serif, 'Droid Serif', serif; margin-bottom: 10px; color:black;
	-webkit-transition-property: font-size;
	-moz-transition-property: font-size;
	transition-property: font-size;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.5s, 0.5s; 
	-webkit-transition-timing function: linear, ease-in;
	-moz-transition-timing function: linear, ease-in; 
	transition-timing function: linear, ease-in;  
}
h1 a:hover 			{ text-decoration: none; color: #27B3CF; }

h2 					{ font-family: Arial, Helvetica, sans-serif, 'Droid Serif', serif; font-size: 16pt; margin-bottom: 10px; color:black;
	-webkit-transition-property: font-size;
	-moz-transition-property: font-size;
	transition-property: font-size;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.5s, 0.5s; 
	-webkit-transition-timing function: linear, ease-in;
	-moz-transition-timing function: linear, ease-in; 
	transition-timing function: linear, ease-in;
}
h3 					{ font-family: Arial, Helvetica, sans-serif, 'Droid Serif', serif; font-size: 14pt; margin-bottom: 10px; color:black; }
h4 					{ font-family: Arial, Helvetica, sans-serif, 'Droid Serif', serif; font-size: 12pt; margin-bottom: 10px; color:black; }
h4 a 				{ text-decoration: underline; }
h4 a:hover 			{  }



.left-col 			{ width: 0%; float: left; }
.right-col 			{ width: 95%; float: right; margin-bottom: 0px; 
	-webkit-transition-property: width;
	-moz-transition-property: width;
	transition-property: width;
	-webkit-transition-duration: 0.5s, 0.5s;
	-moz-transition-duration: 0.5s, 0.5s;
	transition-duration: 0.5s, 0.5s; 
	-webkit-transition-timing function: linear, ease-in;
	-moz-transition-timing function: linear, ease-in; 
	transition-timing function: linear, ease-in;
}

#bodyarea			{ padding: 10px; }

p 					{ padding: 0 5px 10px 0px; }

ul 					{ list-style: normal; margin-left:30px; margin-bottom:10px }
ul li 				{ margin: 0 5px; list-style: disc; }
ol 					{ list-style: normal; margin-left:30px; margin-bottom:10px }

footer 				{ padding: 0px; }

pre					{ overflow: scroll; font-size: 10px; }

.rounded_boxBorder
{
	border: 3px solid black;
	border-radius:15px;
	-moz-border-radius:15px; /* Firefox 3.6 and earlier */
	-webkit-border-radius:15px; /* Safari */
}

.rounded_boxShadow
{
	border-radius:10px;
	-moz-border-radius:10px; /* Firefox 3.6 and earlier */
	-webkit-border-radius:10px; /* Safari */
	-webkit-box-shadow: 3px 3px 6px gray, -1px -1px gray;
	-moz-box-shadow: 3px 3px 6px gray,-1px -1px gray;
	box-shadow: 3px 3px 6px gray, -1px -1px gray;
}

.credits P {
	font-size:8pt;
	color:black;
	text-align: center;
	font-family: Arial,Helvetica,sans-serif;
	padding:0px;
}

.credits a {
	text-decoration:none;
	color:black;
}

.credits p a:hover { 
	color: currentColor;
}

.header-links {
	float:left;
	display:inline-block;
	margin-top:10px;
	width:112px;
}

.header-logo { width:20%; float:left; text-align: center; display:inline }
.header-phone { width:50%; float:left; text-align: center; display:inline }
.header-links { width:20%; float:left; text-align: center; display:inline }

.slide-position { position:relative; top:-48px }
.home-position { position:relative; top:-80px }

.top-row-home { width:98%; margin-left:auto; margin-right:auto; margin-bottom:3px; }
.middle-row-home { width:31%; display:inline-block; margin:3px }
.bottom-row-home { width:31%; display:inline-block; margin:3px }
.bottom-row-home2 { width:63%; display:inline-block; margin:3px }
.recipe-row-alt { width:50%; display:inline-block; margin:3px }

/************************************************************************************
NAV
*************************************************************************************/
nav {
	margin-left:5px
}

#nav-wrap {
	margin-top: 0px;
}

/* menu icon */
#menu-icon {
	display: none; /* hide menu icon initially */
}

#nav, 
#nav li {
	margin: 0;
	padding: 0;
}
#nav li {
	list-style: none;
	float: left;
	margin-right: 5px;
}

/* nav link */
#nav a {
	padding: 2px 15px;
	display: block;
	color: white;
	background: transparent;
	text-decoration:none;
	border: 0px solid black;
	border-radius:15px;
	-moz-border-radius:15px; /* Firefox 3.6 and earlier */
	-webkit-border-radius:15px; /* Safari */
}

#nav a:hover {
	background: transparent;
	color: lightgrey;
}

/* nav dropdown */
#nav ul {
	background-color: #0460FE;
	padding: 0px;
	position: absolute;
	border: solid 0px #ccc;
	display: none; /* hide dropdown */
	width: 200px;
	margin-left:0px;
}

#nav ul li {
	float: none;
	margin: 0;
	padding: 0;
}

#nav li:hover > ul {
	display: block; /* show dropdown on hover */
}

/************************************************************************************
MOBILE
*************************************************************************************/
@media screen and (max-width: 840px) {

	/* nav-wrap */
	#nav-wrap {
		position: relative;
	}

	/* menu icon */
	#menu-icon {
		color: #000;
		width: 42px;
		height: 30px;
		background: lightgrey url(siteimages/menu-icon.png) no-repeat 10px center;
		padding: 8px 10px 0 42px;
		cursor: pointer;
		border: solid 1px black;
		display: block; /* show menu icon */
	}
	#menu-icon:hover {
		background-color: #f8f8f8;
	}
	#menu-icon.active {
		background-color: lightgrey;
	}
	
	/* main nav */
	#nav {
		clear: both;
		position: absolute;
		top: 38px;
		width: 280px;
		z-index: 10000;
		padding: 5px;
		background: #f8f8f8;
		border: solid 1px #999;
		display: none; /* visibility will be toggled with jquery */
	}
	#nav li {
		clear: both;
		float: none;
		margin: 5px 0 5px 10px;
	}
	#nav a, 
	#nav ul a {
		font: inherit;
		background: none;
		display: inline;
		padding: 5px;
		color: black;
		border: none;
	}
	#nav a:hover, 
	#nav ul a:hover {
		background: lightgrey;
		color: #000;
	}
	
	/* dropdown */
	#nav ul {
		width: auto;
		position: static;
		display: block;
		border: none;
		background: inherit;
	}
	#nav ul li {
		margin: 3px 0 3px 15px;
	}

}

#nav {
	margin-left:25px
}

@media screen and (min-width: 840px) {

	/* ensure #nav is visible on desktop version */
	#nav {
		display: block !important;
	}

}

/*------------------------------------*\
  MEDIA QUERRIES
\*------------------------------------*/
@media screen and (max-width: 1080px) {
.slide-position { position:relative; top: auto }
.home-position { position:relative; top: auto }
}

@media screen and (max-width: 880px) {
.img-justification-right2 { text-align: center }
.img-justification-left2 { text-align: center }
}

@media screen and (min-width: 880px) {
.img-justification-right2 { float:right; margin-left:5px; margin-right:5px; }
.img-justification-left2 { float:left; margin-left:5px; margin-right:5px; }
}

@media screen and (max-width: 840px) 	{
	.header-logo { width:50%; float:left; text-align: center; display:inline }
	.header-phone { width:50%; float:left; text-align: center; display:inline }
	.header-links { display:none }
	.desktop-menu { display:none; }
	#nav { margin-left:-100px }

}

@media screen and (min-width: 840px) 	{
	.mobile-menu { display:none; }
}


@media screen and (max-width: 740px) 	{
	.left-col { width: 100%; }
	.right-col { width: 100%; }

}

@media screen and (max-width: 680px) {
.img-justification-right { text-align: center }
.img-justification-left { text-align: center }
.top-row-home { width:100%; margin-left:auto; margin-right:auto; margin-bottom:3px; }
.middle-row-home { width:100%; display:inline-block; margin:3px }
.bottom-row-home { width:100%; display:inline-block; margin:3px }
.bottom-row-home2 { width:100%; display:inline-block; margin:3px }
.recipe-row-alt { width:100%; display:inline-block; margin:3px }
}

@media screen and (min-width: 680px) {
.img-justification-right { float:right; margin-left:5px; margin-right:5px; }
.img-justification-left { float:left; margin-left:5px; margin-right:5px; }
}

@media screen and (max-width: 478px) 	{
	h1 { font-size: 18pt; padding: 1px; }
	h2 { font-size: 14pt; padding: 1px; }
	body { font-size: 12pt; }
}

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}