﻿/* -- page layout --*/
// html{background:url(img_site/bgtile-w.gif) center repeat-y #EBECED;cursor:default}
html{cursor:default}
body{margin:0;padding:0;font-family: Arial, Helvetica, sans-serif}
html,body{height:100%!important}
#page{width:auto;height:100%;margin:0 auto;position:relative}
a:hover,select:hover, .button:hover{cursor:pointer}
input:hover{cursor:text}

/* -- header -- */
header {
	position:relative;
	background:  #2E5582;
	height: 50px;
}

.style-logo{
	align-content: flex-start;
	padding-left: 20px;
	padding-top: 5px;
	max-height: 80%;
	max-width:  80%;
}

h1{height:78px;margin-right:1px;text-indent:-999em;overflow:hidden}
h4{margin:0 0 5px 0;padding:0;color: darkslategray}
h3{margin:2px 0}

/* -- content -- */
#content{width:98%;height:100%!important;padding:5px 10px 10px 5px;position:static;top:78px;right:0}
#content h2, .looklikeh2{margin:0;padding:0;font-size:19px;color:purple}
.fullbox, .halfbox, .silos{float:left;padding:5px 10px;border:solid #545151;border-width:1px 1px 1px 1px;background:#FAF9EF;display:inline}
h2 em{display:block;font-size:13px;font-weight:normal}

/* -- breadcrumb -- */
#breadcrumb{width:599px;border:solid black;border-width:1px 0;position:absolute;top:0;left:0;margin:0;padding:2px 0 3px 10px;font-size:12px;background:#DDD}

/* -- news -- */
.fullbox {width:98%;margin:0 0 10px;background: #d4dce4}
.fullbox p, .fullbox em{margin:5px 0 0 0;font-size:1.0em}
.fullbox dl{margin:5px 0 0 0;padding:0}
.fullbox dt{font-weight:bold;font-size:0.9em}
.fullbox dt.date{font-size:10px;font-weight:normal;color:#999}
.fullbox dd{margin:0 0 5px 0;padding:0 0 10px 0;font-size:0.9em}

.halfbox{width:337px;font-size:1.0em;margin-bottom: 5px}
.halfbox table{width:100%}
.halfbox a{text-decoration:none;color:blue}
.halfbox a:hover{text-decoration:underline}
.halfbox ul, .halfbox li{margin:0;padding:0;list-style:none}

/* -- silos aka 'quick catalogue' --*/ 
.silos{width:98%;margin-top:5px}
.silos h3{margin:0 0 5px 0;padding:0 0 0 5px}
.silos ul{margin:0;padding:0}
.silos li{font-weight:bold;list-style:none;margin:0;padding:0}
.silos li a{text-decoration:none}
.silos table{font-size:13px;border:1px solid black} 

.silos td{padding-right:25px}

/* -------------------------- */
#order_cat img{float:left}
#order_cat form {float:right;width:350px}
#order_cat label{width:100px;text-align:right;margin-right:10px}
#order_cat table{margin-left:20px}
#order_cat input{float:left}
#order_cat .submit{margin:0 auto;width:50px;display:block}
#order_cat textarea{width:200px;height:80px}
#order_cat form, #order_cat img{float:left!important}

/* -- Front Page 'Specials and Features' -- */
#features_fp table, #special_fp table{border-collapse:collapse}
#features_fp li, #special_fp td{padding:2px 5px}
#features_fp .altbgc, #special_fp .altbgc{}
#features_fp.halfbox  ul, #features_fp.halfbox  li{list-style-type:circle!important;list-style-position:inside}
#features_fp{width:200px}
#special_fp{width:326px}
.halfbox .vmore{font-size:10px}

/* -- Quick Catalogue styles -- */
#quickcat ul, #quickcat li{list-style:none;display:inline;margin:0;padding:0}
#quickcat li ul{margin-left:20px}
.qcc{display:block;text-decoration:none;border:1px solid #CCC;padding:2px 4px;margin:5px 0;font-size:15px}
.qcc:hover{color:white!important;background:url(img_site/navbg.jpg) 0 44px #5FAFEA!important;border:1px solid #A1BFE1}
.qcs{font-size:0.9em;text-decoration:none;background:#F2EFD7;padding:0 1px}
.qcs:hover{background:#5FAFEA;color:white}

/* -- Category Thumbs/Index -- */
.prod{display:inline;float:left;margin-left:4px}
.prod li a img{border:none}
.prod li{display:inline;float:left;width:112px;margin:0 10px 10px 0!important;background:#E4E1A7;border:0px solid #F2EFD7}
.prod li a{display:block;width:105px;height:154px;margin:0 auto;padding:0 5px 5px 0;color:black;border:1px solid #B5B08D;background-repeat:no-repeat;font-size:12px;font-weight:bold;text-align:center}
* html .prod li a{padding-right:0;overflow:hidden}
.prod li a:hover{background-color:#EEE;color:blue;border-color:#595897}
.prod li:hover{border-color:#F2F1E6}
.prod .empty{border:0;background:transparent;float:none;width:100%}
.prod .empty a{border:0;background:transparent}

/* -- Product Info (product listing) -- */
.item{border:1px solid #CEC166;background:#F2EFD7;margin:0 auto 5px auto;padding:5px;position:relative;width:98%;float:left}
.item img{margin:0;border:1px solid #CEC166;float:left}
.incart img{border-color:#66AC5E}
.incart{padding-top:26px}
.incart .n,.info .n{border-bottom:1px solid #66AC5E;position:absolute;top:0;left:0;width:98%;text-align:center;font-size:13px;color:#024C00;background:#B3D374;padding:2px;margin-bottom:5px;font-weight:bold}
.info .incart{position:relative;padding-top:26px}
.info .incart .n{width:98%}
.item h4, .item p{margin:0;padding:0}
.item h4{font-size:14px;margin-bottom:10px}
.item div{margin:0 0 0 120px;font-size:0.9em}
.item table{margin:5px 0 0 0;border:none!important;background:#F0EDD0;border-collapse:collapse}
.item td{padding:2px}

/* -- Product Page  -- */	
#product{padding:7px;width:98%}
#product img{float:left;border:1px solid #CCC;width: 120px;height:120px}
#product .info{width:auto;margin-left:130px}
.sidenotes{position:absolute;top:250px;width:200px;padding:10px 5px}
.sidenotes p{margin:0}
	
/* -- 'add to cart' form -- */
#product .inform{background:#F0EDCE;border:1px solid #E6DFAA;padding-left:5px}
#product .inform p{margin:0}
.inform{margin:5px 0;padding:5px 0}
.inform select{width:auto;font-size: 1.0em}
.incart .inform{background:#DAE3BE;background:transparent;border-color:transparent}
.item .inform{margin:10px 0 0 0;}
.item .inform table{margin:0;padding:0}
.item .inform tr:hover{background:transparent}
.incart{border-color:#66AC5E!important;background-color:#DAE3BE!important}
.incart table{background-color:#DAE3BE}
textarea{font-family: Arial, Helvetica, sans-serif}
.prod_select{width:auto;font-size:1em;height: 30px}

/* -- Shopping Cart -- */	
#shopcart table{width:100%;border-collapse:collapse;border:1px solid #96958F}
#shopcart th{padding:5px;background:#DFDDC6;font-size:14px;border-bottom:2px solid black}
#shopcart td{font-size:1.0em;padding:5px}
#shopcart .bt td{border-top:2px solid black}
#shopcart .btt td{border-top:3px double #AAA}
#shopcart .hilitegrey{background-color:#FEFEFE}
#shopcart .total td{font-size:16px}
#shopcart .quant span{color:#777}
#options{margin-top:10px;position:relative}
.quant{color:#777}
.quant strong{color:black}
.warn {color:red!important}
#proceed_button{float:right}
#ia_nav input,.options{width:250px;font-size: 1.0em;margin-top: 10px}
#ia_nav{margin-top: 10px}
.ia_item{width:98%}

/* -- Checkout form -- */
#checkout, 	#checkout input, 	#checkout select, 	#checkout textarea{}
#checkout form, #checkout table{border:0}
#checkout h4{margin:10px 0}
#checkout .txt{width:90%}
#checkout .pst{width:10%}
#checkout .sub{width:20%;font-size:1.0em;cursor:pointer;margin-top:10px;height: 32px;background-color: #8edb76}
#checkout dd{margin-left:25px}
#checkout #notes{height:100px}
#receipt table{border-collapse:collapse}
#receipt td, #receipt th{padding:2px 5px 2px 10px;text-align:left}
#receipt .bt{border-top:2px solid #AAA}
#receipt .bot{background-color:#FEFEFC}
#receipt .btt td{font-size:14px;border-bottom:2px solid #AAA;border-top:3px double #AAA}
	
/* -- left nav menu -- */
#nav{float:left;display:inline;padding:0 0 50px 0;border-width:0 1px;position:absolute;top:50px;left:0;display: none;}
#nav, #nav ul{width:224px}

/*#nav ul{padding:1px 0!important;background:#8C5246!important}*/
#nav ul,#nav li{margin:0;padding:0;list-style:none}

.menucontainer {
    cursor: pointer;
	margin-left: 10px;
	display: inline-block;
}

.menubar1, .menubar2, .menubar3 {
    width: 35px;
    height: 4px;
    background-color: #d1d2d4;
    margin: 7px 0;
    transition: 0.4s;
}

.menuchange .menubar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.menuchange .menubar2 {opacity: 0;}

.menuchange .menubar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

#nav ul{margin:-1px 0 0 0;border-top:1px solid black}
#nav li{border-bottom:1px solid black;height:29px}
#nav li a{font-family:Verdana, Arial;width:218px;height:29px;padding:0 0 0 6px;line-height:29px;font-size:0.9em;display:block;background:#5B92CF;text-decoration:none;overflow:hidden}
#nav li a:hover{background:#82B3E9;border-color:white}
#cart{color:#FDFCE1!important}
#cart:hover{color:white!important}
#nav .mp0 a,#nav #n_cart a{color:#FFF}
#nav .n_cat a{color:#FFF}
#nav .special a,#nav .info a{color:yellow}
#n_quickcat{color:#FFD84F}
#n_scart a{border-color:#9BC5A9!important;color:white}
#n_cart a {color: blue!important}
.ng_np	a{}
.nav_currentpage{background:url(img_site/navbg.jpg) 0 0 !important;color:blue!important}


.prevnext a{text-decoration:none;border:1px solid #7B7857;padding:4px 10px;background:#F0EED5;display:block;float:left;margin:0 4px 4px 0}
.prevnext .cur{border:1px solid #000;background:#F8F7EA;color:red}

/* -- Search Form Styles -- */
#search form{margin:0;font-size:12px}
#search .submit{margin-left:10px;cursor:pointer}
#srch_results dl{margin-top:10px}
#search div{display:inline}
	
/* -- footer -- */
#footer{width:200px;float:left;font-size:10px;text-align:center;padding:3px 0;margin-top:20px;color:#1d3f80;}
#footer p{display:inline}
#footer ul{margin-left:10px}
#footer ul, #footer li{list-style:none;display:inline;margin:0;padding:0}
#footer a{text-decoration:none}
#footer a:hover{text-decoration:underline}

/* -- help -- */
#help *{padding:0;margin:0}
#help h3{margin-bottom:5px}
#help h4{margin-top:10px}
#help h4:target{color:red;padding:4px;background:#CCCC66}
#help p{margin-bottom:5px}
#help ol{margin-left:20px;font-size:12px}
#help dd{border:none;margin:0 0 10px 0}
#help dt{margin-bottom:0}
#help ul{margin-left:20px;font-size:13px}

/* -- accessability links -- */
#access{font-size:2px;text-indent:-999em;text-decoration:none;visibility: hidden}

/* -- misc util classes and styles -- */
form{margin:0;padding:0}
.mp0{margin:0!important;padding:0!important} /*remove margins and paddings*/
.lm10px{margin-left:10px!important}
.bm0px{}
.altbgc, .note{background:#F0EED5}
.altbdc2{background:#EEEAC8}
.h{display:none}
.f12px a{font-size:0.9em!important}/*smaller links*/
.f11px{font-size:0.8em!important}/*slightly smaller text*/
.f13px a{font-size:1.0em!important}/*larger text*/
.chem{color:blue!important}
.ra{text-align:right!important}
.bold{font-weight:bold}
.new{font-size:12px;font-weight:normal;color:red}
.emptycart{background:#DDD;color:red;padding:20px 10px!important}
.note{border:1px solid #D4D2BC;padding:2px 5px}
::-moz-selection{color:red;background:#EBE7BE}/*moz only styling of user selected text*/
.nope{cursor:default!important;color:#777}
.onspecial{color:red}
.crdno{margin-right:5px}
.vmore{float:right;margin-top:5px}
.pr{padding-right:10px;color:red}
html body div .unavail{margin:10px!important;padding:4px;border:1px solid #BEBEBE;color:red}
.warn{color:red}
.submit{cursor:pointer}

.fa {
  padding: 10px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
}

.fa:hover {opacity: 0.7;}
.fa-facebook {color: white;}
.socialmenu {float: right}

@media (min-width: 780px) {
    #nav{display: block;top:78px}
	#nav ul{margin:10px 0 0 0}
	#page{width:auto;height:100%;margin:0 auto;position:relative}
	#content{width:auto;height:100%!important;padding:0px 10px 10px 10px;position: static;top:78px;right:0;margin-left: 220px;}
	#product img{float:left;border:1px solid #CCC;width: 150px;height:150px}
	#product .info{width:auto;margin-left:160px}
	.menucontainer{display: none}
	header{height: 75px;}
	.prod li{margin:0 19px 10px 0!important}
	.fa {padding: 20px;}
}
@media (min-width: 1024px) {
	#nav{display: block;top:78px}
	#nav ul{margin:10px 0 0 0}
	#page{width:1044px;height:100%;margin:0 auto;position:relative}
	#product img{float:left;border:1px solid #CCC;width: 200px;height:200px}
	#product .info{width:auto;margin-left:210px}
	.menucontainer{display: none}
	header{height: 75px;}
	.prod li{margin:0 19px 10px 0!important}
	.fa {padding: 20px;}
}

