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

body {
	font: 100% Calibri, Verdana, Arial, Helvetica, sans-serif;
	background-image:url(images/bg1.gif);
	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: #555;
	line-height: 22px;
}

.oneColElsCtr #header {
	width: 53em;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #dadada;
	text-align: left; /* this overrides the text-align: center on the body element. */
}

.oneColElsCtr #container {
	width: 57em;
	background: #fff;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 2px solid #C9C9A2;
	text-align: left; /* this overrides the text-align: center on the body element. */
}
.oneColElsCtr #mainContent {
	padding: 0 00px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}

.oneColElsCtr #mainContent1 {
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}

.leftpic {float: left;
           margin: 10px 20px 10px 10px;
		   padding: 8px;
		   border: 1px solid #8da1b0;}

.rightpic {float: right;
           margin: 10px 20px 10px 6px;
		   padding: 8px;
		   border: 1px solid #8da1b0;}

.rightpic1 {float: right;
           margin: 10px 20px 10px 6px;
		   padding: 8px;
		   border: 0px solid #8da1b0;}


.img {border: 4px solid #8da1b0;}		

.img1 {
           margin: 10px 20px 10px 10px;
		   padding: 8px;
		   border: 1px solid #8da1b0;}

.rightbord {float: right;
           margin: 10px 20px 10px 10px;
		   padding: 8px;
		   border: 1px solid #8da1b0;}

   

#gallerybox {float: right;
             margin: 10px ;
			 padding: 15px 10px 12px 10px;
			 background-color: #e4f2fd;
			 width: 21em;}


#background {
	background-image:url(images/flowers.png);
	background-position:top;
	background-repeat:no-repeat;
	min-height:900px;
}

a.col:hover {color: #CC0000;}

.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:-156px;
	left: -50px;
	width:750px;
	height: 500px;
	padding: 12px;
	background:#555;
	color:#555;
	border: 1px solid #555;
	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*/


a:link {
	color: #343440;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #4B687C;
}
a:hover {
	text-decoration: none;
	color: #fff;
}
a:active {
	text-decoration: none;
	color: #72787D;
}

#navbar {color: #343440;
         background-image:url(images/slice.jpg);
		 background-repeat:no-repeat;
		 margin-top: 0px;
		 margin-left: 0px;
		 padding: 5px 0px 0px 0px;
		  border-bottom: 0px solid #8DA1B0;}
		 
#navbar2 {color: #343440;
         background-image:url(images/navbar.png);
		 background-repeat:no-repeat;
		 height: 35px;
		 margin-top: 0px;
		 margin-left: 10px;
		 padding: 5px 0px 0px 0px;
		  border-bottom: 0px solid #8DA1B0;}
		 
#footer {color: #343440;
         background-color: #C9C9A2;
		 padding: 10px 0px 10px 0px;
		 border-top: 1px solid #8DA1B0;}
		 
#leftbox {float: left;
          width: 52em;
		  padding: 5px;
		  border-top: 0px dashed #8DA1B0;}
		  
#rightbox {float: right;
          width: 22em;
		  padding: 7px;
		  border-left: 1px dashed #8DA1B0;}	
		  
hr {color: #8DA1B0;
    }	
	
	
#leftcol {float:left;
           padding: 10px;
		   margin: 5px;
		   width: 22em;}
		   
#rightcol {float:right;
           padding: 10px;
		   margin: 5px;
		   width: 28em;}

#leftcol1 {float:left;
           padding: 10px;
		   margin: 5px;
		   width: 35em;
		   border-right: 1px dotted #555;}
		   
#rightcol1 {float:right;
           padding: 10px;
		   margin: 5px;
		   width: 15em;}
#leftcol2 {float:left;
           padding: 10px;
		   margin: 5px;
		   width: 42em;
		   border-right: 1px dotted #555;}

#rightcol2 {float:right;
           padding:10px;
		   margin: 5px;
		   width: 8em;
		   text-align:center;}
		   
#box1 {float: left;
        width: 12em;
       padding: 10px;
	   margin: 10px;
	   border: 0px dotted #CCCCCC;}
	   	 
#box2 {float: left;
        width: 12em;
       padding: 10px;
	   margin: 10px;
	    border: 0px dotted #CCCCCC;}
#box3 {float: left;
        width: 12em;
       padding: 10px;
	   margin: 10px;
	   border: 0px dotted #CCCCCC;}

#box3b {float: left;
        width: 35em;
       padding: 10px;
	   margin: 10px;
	   border: 0px dotted #CCCCCC;}

#box4 {float: right;
        width: 12em;
       padding: 10px;
	   margin-top: 12px;
	   border: 0px dotted #CCCCCC;}
	   
	   
#product {
        width: 52em;
       padding: 15px;
	   margin: 10px 0px 10px 5px;
	    border: 1px dotted #CCCCCC;}