@charset "utf-8";
/* CSS Document */

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background-image:url(images/bg1.png);
	background-repeat:repeat-x;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #433B13;
}

#topbox {	background-image:url(images/header.png);
	background-repeat:no-repeat;
	padding: 0px;
	margin: 0px;}
	
	
.oneColElsCtr #container {
	width: 50em;
	background: #BEC385;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #463F13;
	text-align: left; /* this overrides the text-align: center on the body element. */
	padding: 0px;
}
.oneColElsCtr #mainContent {
	padding: 0 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	margin: 0px;
}

#navbar {width: 50em;
         height: 40px;
		 }
		 
a.navbar:link {color:#ff0000;}
a.navbar:visited {color:#0000ff;}
a.navbar:hover {color:#ffcc00;}
	 

		 
		 
		 
		 
		 
		 
		 
#left {float: left;
       width: 47em;
	   margin: 6px;
	   padding: 4px;
	   font-size:12px;
	   line-height: 19px;
	   font-family:Verdana, Arial, Helvetica, sans-serif;
	   background-color: #;}

#right {float: right;
       width: 15em;
	   font-size:12px;
	   line-height: 19px;
	   font-family:Verdana, Arial, Helvetica, sans-serif;
	   margin: 6px;
	   padding: 8px;
	   border-left: dotted 2px #433B13; }

#left1 {float: left;
       width: 33em;
	   margin: 6px;
	   padding: 4px;
	   font-size:12px;
	   line-height: 19px;
	   font-family:Verdana, Arial, Helvetica, sans-serif;
	   background-color: #;}

#qual {float: left;
       width: 35em;
	   margin: 6px;
	   padding: 4px;
	   font-size:12px;
	   line-height: 19px;
	   font-family:Verdana, Arial, Helvetica, sans-serif;
	   background-color: #;}




#right1 {float: right;
       width: 27em;
	   font-size:12px;
	   line-height: 19px;
	   font-family:Verdana, Arial, Helvetica, sans-serif;
	   margin: 6px;
	   padding: 8px;
	   border-left: dotted 2px #4e3e21; }
	   
	   
#left2 {float: left;
       width: 40em;
	   margin: 6px;
	   padding: 4px;
	   font-size:12px;
	   line-height: 19px;
	   font-family:Verdana, Arial, Helvetica, sans-serif;
	   background-color: #;}

#right2 {float: right;
       width: 22em;
	   font-size:12px;
	   line-height: 19px;
	   font-family:Verdana, Arial, Helvetica, sans-serif;
	   margin: 6px;
	   padding: 8px;
	   border-left: dotted 2px #4e3e21; }
	   
	   

#footer {height: 40px;
          background-image:url(images/footer.png);
		  background-repeat:repeat-x;
		  font-size: 10px;
		  color:#C2C487;}


.leftpic {float:left;
          margin: 8px;
		  border: 3px solid #797145;}
		  
.rightpic {float:right;
          margin: 6px;
		  border: 3px solid #797145;}


.rightpic1 {float:right;
          margin: 6px;
		  border: 0px solid #797145;}

		  
.img {    margin: 6px;
		  border: 3px solid #797145;}
	
	
.img2 {   text-align:center;
		  border: 0px solid #797145;}
	
	
		  
.page-bottom
{
	clear:both;
	height: 15px;
}

.storepage-bottom
{
	clear:both;
	height: 30px;
}


a:link {color:#cf5120;
        text-decoration: none;}

a:visited{color:#296B65;
        text-decoration: none;}
a:hover {color:#AC9A2F;
        text-decoration: none;}


a.nav:link {color:#7B9319;
        text-decoration: none;
		border: 0px;}

a.nav:visited{color:#;
        text-decoration: none;
		
		border: 0px;}

a.nav:hover {color:#AC9A2F;
        text-decoration: none;
		
		border: 0px;}





.add {font-size: 12px;
	  line-height: 5px; 
			}


#city {font-size: 9px;
	    margin: 0 0em 0 20em;
			}
		  
a.city:link {color:#E6C17C;
             text-decoration: none;
			 border: 0px;}
a.city:visited {color:#E6C17C;
               text-decoration: none;
			    border: 0px;}
a.city:hover {color:#ffcc00;
              text-decoration: none;
			   border: 0px;}



#leftstore {float: left;
       width: 47em;
	   margin: 6px;
	   padding: 4px;
	   font-size:12px;
	   line-height: 19px;
	   font-family:Verdana, Arial, Helvetica, sans-serif;
	   background-color: #;}


#paypal {width: 64em;
             padding: 10px 2px 10px 2px;
			 margin: 10px;
			 font-size: 12px;
			 line-height: 17px;
			 border: 1px solid #797145;}
			 
			 
#paylogo {float: right;
       width: 13em;
	   font-size:12px;
	   line-height: 19px;
	   font-family:Verdana, Arial, Helvetica, sans-serif;
	   margin: 2px;
	   padding: 8px;
	   }	
	    			 
#paybox {
	float: left;
	width: 45em;
	margin: 0px 2px 2px 20px;
	 line-height: 17px;
	padding: 4px;
	font-size: 12px;
}

#productbox {width: 64em;
             padding: 14px 4px 14px 4px;
			 margin: 10px;
			 font-size: 12px;
			 border: 1px solid #797145;}
			 
			 

#product {
	float: left;
	width: 19em;
	margin: 0px 2px 2px 2px;
	padding: 4px;
}

#desc {margin: 0 18em 0 22em;
       line-height: 21px;}


#price {float: right;
       width: 13em;
	   font-size:12px;
	   line-height: 19px;
	   font-family:Verdana, Arial, Helvetica, sans-serif;
	   margin: 2px;
	   padding: 8px;
	   }	   



.example1 a{position:relative;}/* set stacking context -*/
/* Note that opera has a nasty bug and requires the anchor to be display block and could make things awkward hence the opera hack below*/
/* opera also required that the span be hidden with display:none and not visibility hidden otherwise the active area of the link is too big*/
@media all and (min-width: 0px){
 .example1 a,.example2 a {
	display:block;
  }
.example1 a span,.example2 a span{display:none;}
.example1 a:hover span,.example2 a:hover span{display:block;}
}
.example1 a span{
	visibility:hidden;/* hide message initially*/
	position:absolute;
	top: 2px;
	left:230px;
	width:500px;
	height: 321px;
	padding:8px 10px 10px 8px;
	background:#797145;
	color:#03467b;
	border: 4px solid #797145;
	text-decoration:none;
}
.example1 a:hover{visibility:visible}/* ie bug needed to make span show*/
.example1 a:hover span{visibility:visible;}/* show image on hover*/
/* ... example2 ....*/
.img1{border: 3px solid #797145;}

