/***********************************************/
/* morebins.css                            */

body{
	font-family: Arial,sans-serif;
	color: #333333;
	line-height: inherit;
	margin: 0px;
	padding: 0px;
	font-size: medium;
	
}

/*Navigation*/
.indentmenu{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
overflow: hidden;
}

.indentmenu ul{
margin: 0;
padding: 0;
float: right;
width: 640px; /*width of menu*/
border: 1px solid #009900; /*dark green border*/
border-width: 1px 0;
background: black url(indentbg.gif) center center repeat-x;
}

.indentmenu ul li{
display: inline;
}
.indentmenu ul li ul li{
	position: relative;
	left:0;
	top: 50;
	display: inherit;
	visibility: hidden;
	}

.indentmenu ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
border-right: 1px solid #009900; /*dark green divider between menu items*/
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a:hover, .indentmenu ul li .current{
color: white !important; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
background: black url(indentbg2.gif) center center repeat-x;
}
/* overrides decoration from previous rule for hovered links */

h1, h2, h3, h4, h5, h6 {
	font-family: Arial,sans-serif;
	margin: 0px;
	padding: 0px;
}

h1{
	font-family: Verdana,Arial,sans-serif;
	font-size: 120%;
	color: #ffffff;
	vertical-align: middle;
	text-align: center;
}

h2{
 font-size: 90%;
 color: #009900;
}

h3{
	font-size: 90%;
	color: #ffffff;
	vertical-align: middle;
	text-align: center;
}

label{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
}
				

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#container {
  margin: 0 auto;
  width: 840px;
  }	
  
#content{
  float:right;
	width: 630px;
	margin: 0;
	padding: 10px 5px 0 0;
}


/***********************************************/
/*Component Divs                               */
/***********************************************/
/************** .feature styles ***************/

.feature{
	padding: 5px 10px 5px 10px;
	font-size: 90%;
	line-height: 16px;
}

.feature h2{
	padding: 0px 0px 0px 0px;
	text-align: left;
	font-size: 120%;
	color: #009900;
	vertical-align: top;
}
.feature b{
	padding: 0px 0px 0px 0px;
	
	font-size: 120%;
	color: #009900;
	vertical-align: top;
}
.feature img{
	float: left;
	padding: 0px 10px 0px 0px;
	margin: 0 5px 5px 0;
}
a.feature ,a.feature :link, a.feature:visited, a.feature:hover{
	color: #333333;	
	text-decoration: underline;
	font-size: 100%;
	padding: 0px 0px 0px 0px;
}
a.feature2 ,a.feature2 :link, a.feature2:visited{
	color: #ffffff;	
	text-decoration: none;
	font-size: 100%;
	padding: 0px 0px 0px 0px;
	border:none;
}
a.feature2:hover{
	color: #ffffff;	
	text-decoration: underline;
	font-size: 100%;
	padding: 0px 0px 0px 0px;
	border:none;
}
a.feature3 ,a.feature3 :link, a.feature3:visited{
	color: #000000;	
	text-decoration: none;
	font-size: 100%;
	padding: 0px 0px 0px 0px;
	border:none;
}
a.feature3:hover{
	color: #000000;	
	text-decoration: underline;
	font-size: 100%;
	padding: 0px 0px 0px 0px;
	border:none;
}
a.feature4 ,a.feature4 :link, a.feature4:visited{
	color: #009900;	
	text-decoration: none;
	font-size: 100%;
	padding: 0px 0px 0px 0px;
	border:none;
}
a.feature4:hover{
	color: #009900;	
	text-decoration: underline;
	font-size: 100%;
	padding: 0px 0px 0px 0px;
	border:none;
}
img.pricecheck{
	
	padding: 0px 10px 0px 0px;
	
	
	
}

/* adjust margins to change separation between the feature image and text flowing around it */

#siteName{
	margin: 0px;
	padding: 0px 0px 0px 10px;
	vertical-align: inherit;
}


/*************** #pageName styles **************/

#pageName{
	padding: 0px 0px 5px 10px;
}



/************* #siteInfo styles ***************/

#siteInfo{
	clear: both;
	border: 1px solid #cccccc;
	font-size: 60%;
	color: #ffffff;
	padding: 10px 10px 10px 10px;
	margin-top: 0px;
	vertical-align: bottom;
	background-color: #009900;
	text-align:center;
	
	
}
/* negative top margin pulls siteinfo up so its top border overlaps (and thus lines up with)
	the bottom border of the navBar in cases where they "touch" */
#siteInfo a:link, a:visited,a:hover{
	color: #ffffff;	
	text-decoration:none;
}
#siteInfo a:hover{
	color: #ffffff;	
	text-decoration:blink;
}

#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}

/*Image float over enlargement for products*/

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #009900;
padding: 5px;
left: auto;
border: 1px  #ffffff solid ;
visibility: hidden;
color: #FFFFFF;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -130px;
left: 50px; /*position where enlarged image should offset horizontally */

}
/*Image float over enlargement for how to use on 2 lines*/
.thumbnail-2{
position: relative;
z-index: 0;
}

.thumbnail-2:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail-2 span{ /*CSS for enlarged image*/
position: absolute;
background-color: #009900;
padding: 5px;
left: auto;
border: 1px  #ffffff solid ;
visibility: hidden;
color: #FFFFFF;
text-decoration: none;
}

.thumbnail-2 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail-2:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 120px;
left: -420px; /*position where enlarged image should offset horizontally */

}
/*Image float over enlargement for how to use on 1 line*/
.thumbnail-3{
position: relative;
z-index: 0;
}

.thumbnail-3:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail-3 span{ /*CSS for enlarged image*/
position: absolute;
background-color: #009900;
padding: 5px;
left: auto;
border: 1px  #ffffff solid ;
visibility: hidden;
color: #FFFFFF;
text-decoration: none;
}

.thumbnail-3 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail-3:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 65px;
left: -420px; /*position where enlarged image should offset horizontally */

}
/*rounded edges stuff*/
.nifty{ margin: 5px 0px 5px 0px;background: #ffffff}

b.rtop, b.rbottom{display:block;background: #77CC77}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #ffffff}
b.r1{margin: 0 5px 0px}
b.r2{margin: 0 3px 0px}
b.r3{margin: 0 2px 0px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px 0px;height: 2px}

/*Liquid corners*/
.top-left {
margin-right:9px; /* clip right corner */
background-image: url('corners1280x18green.gif');
height: 9px; /* vertical: show first half of the image with the top-corners in it */
font-size: 2px; /* correct height for IE */
}

.top-right {
margin-top: -9px; /* to level of top-left corner */
margin-left: 9px; /* clip left corner */
background-image: url('corners1280x18green.gif'); 
background-position: 100% 0; /* show bg-image starting at the right */
height: 9px; 
font-size: 2px;
}
.bottom-left {

margin-right: 9px; /* clip right corner */
background-image: url('corners1280x18green.gif');
background-position: 0 -9px; /* show under half of the image */
height: 9px;
font-size: 2px;
}

.bottom-right {

margin-top: -9px; /* to level of bottom-left corner */
margin-left: 9px; /* clip left corner */
background-image: url('corners1280x18green.gif'); 
background-position: 100% -9px; /* under half, right side */
height: 9px; 
font-size: 2px; 
}

.inside {
	border-left: 1px solid #009900;
	border-right: 1px solid #009900;
	background: #ffffff;
	color: #000000;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 90%;
	line-height: 16px;
	
}

.notopgap {
margin-top: 0;
}

.nobottomgap {
margin-bottom: 0;
}


/*service links for picture display*/

a.gallery, a.gallery:visited {display:inline; color:#000; text-decoration:none;  position:relative; cursor:default;}
/*picture part*/
a.gallery span {visibility:hidden; display:block; position:absolute; width:150px; height:100px; top:-140px; left:-45px; color:#000;  text-align:center; border:0px solid #fff; font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; letter-spacing:1px; cursor:default;}

a.servicea span {left:300px; top: -15px;}
a.serviceb span {left:300px; top:-31px;}
a.servicec span {left:300px; top:-47px;}
a.serviced span {left:300px; top:-63px;}
a.servicee span {left:300px; top:-79px;}
a.servicef span {left:300px; top:-95px;}

a.gallery:hover {white-space:normal; text-decoration:underline;  border:0px solid #fff; z-index:110;}

a.gallery:hover span {visibility:visible; z-index:110;}

a.gallery:hover span img {margin:10px; border:0px solid #000; position:relative; z-index:110;}

a.gallery:active, a.gallery:focus {border:0px solid #c00; z-index:100;}

a.gallery:active span, a.gallery:focus span {visibility:visible; z-index:100;}

a.gallery:active span img, a.gallery:focus span img {border:0px solid #000; position:relative; margin:10px; z-index:100;}