/* CSS Document */

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
.clearfix { display: inline; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* stop commented backslash hack */
html{
	font-size:100%;
	}

body{
	font-family: Tahoma,Arial,sans-serif;
/*	font-size: 62.5%;*/
	font-size: 1em;
	margin: 0;
	padding: 0;
	background-color: #f3ede8;
	text-align: center;
	color: #333333;
	
	}
	
	
	
img{
border:0;
}

h1 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.7em;
	color: #333333;
	text-align: left;
	padding: 0;
	margin:0;
}


h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	font-style: normal;
	color: #00a099;
	line-height:1.3em;
	text-align: left;

}

h3 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	line-height:1.3em;
	color: #666666;
	text-align: left;
	padding-top: 0px;
	padding-bottom:0.8em;
	margin: 0px;

}

h4 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	line-height:1em;
	color: #666666;
	text-align: left;
	padding-top: 0px;
	padding-bottom:0.8em;
	margin: 0px;

}

h5 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.8em;
	line-height:1em;
	color: #7dc1cd;
	text-align: left;
	padding-top: 0px;
	padding-bottom:0.8em;
	margin: 0px;

}




a {
color:#666666;
text-decoration:none;
}

a:hover {
color:#00b1b0;
text-decoration:none;
}


p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0;
	text-indent: 0px;
	font-size:0.819em;
	color:#666666;
	line-height:1.5em;
	text-align:left;
	padding-bottom:1em;
	padding-top: 0;
}


input{

height: 21px;
float: left;
display: block;
border: 0;
border: 1px solid #333333;
margin-top: 2px;
padding: 0px;

}


.submit input{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
float:right;
height:22px;
color: #787a65;
text-decoration: none;
cursor: pointer;
border: none;
}


.button:hover, input[type="reset"]:hover, input[type="button"]:hover, input[type="submit"]:hover {
color:#00b1ae;
text-decoration: underline;

}

textarea{
font-family: Tahoma,Arial,sans-serif;
font-size:0.819em;
width: 220px;
float: left;
text-align: left;
margin: 0 0 10px 0;
display: block;
background-color:#ffffff;
border: 1px solid #333333;
color:#333333;
}



/*------containers---------------------------------------------------------------------------*/

#container{
width:100%;
padding: 0;
margin-left: auto;
margin-right: auto;
background-image: url(../assets/background-01.jpg);
background-position: top;
background-repeat: no-repeat;

}

#header-container{
width:960px;
height: 170px;
padding-top:20px;
margin-left: auto;
margin-right: auto;

}

#inner-container{
width:920px;
padding: 20px 20px 0 20px; 
margin-left: auto;
margin-right: auto;
background-color:#FFFFFF;


}






/*------links----------------------------------------------------------------------------*/

#links-container{
height:53px;
width:960px;
padding: 0 0 0 20px;
margin-left: auto;
margin-right: auto;

}


.tab-container  a, .tab-container   a:visited {
display: block;
height: 53px;
width: 110px;
overflow: hidden;
float:left;
padding:0;
 

}

.tab-container  a:hover, .tab-container  a:active{
display: block;
text-indent: -110px;
float:left;

}



/*------content home----------------------------------------------------------------------------*/

#main-shop-link{
width:174px;
height: 77px;
float: right;
margin:0;
padding: 38px 25px 55px 0;

}


.main-shop-link-inner a, .main-shop-large-link-inner   a:visited{
width:128px;
float:right;
display: block;
overflow: hidden;
margin: 0;

}



.main-shop-link-inner  a:hover, .main-shop-link-inner  a:active{
width:128px;
display: block;
text-indent: -128px;
float:right;
margin: 0;

}




#text-container-home{
width:300px;
float:left;
padding: 0;
margin-right: 20px;

}



#interactive-container-home{
width: 600px;
height: 310px;
background-color: #ebe8e0;
background-repeat: no-repeat;
float: left;
margin:0;
padding:0;

}

.dividers{
color: #e2e000;
text-align: left;
}


.text-dividers{
width: 100%;
background-image: url(../assets/gfx-divider.jpg);
background-position:center;
background-repeat: no-repeat; 
padding: 30px 0 30px 0;
float:left;
 
}

.address-dividers{
width: 100%;
background-image: url(../assets/gfx-address-divider.jpg);
background-position:center;
background-repeat: no-repeat; 
padding: 30px 0 30px 0;
float:left;
 
}


#large-links-container{
width:600px;
height: 80px;
float:left;
padding: 20px 0 20px 0;
overflow: hidden;

}

.large-links a, .large-links   a:visited{
width:120px;
height: 80px;
float:left;
padding: 0;
display: block;
overflow: hidden;
}



.large-links  a:hover, .large-links  a:active{
display: block;
text-indent: -120px;
float:left;
padding: 0;
margin: 0;

}



.catalogue-link a, .catalogue-link   a:visited{
width:300px;
float:left;
padding: 0;
margin-right: 0;
display: block;
overflow: hidden;
}

.catalogue-link  a:hover, .catalogue-link  a:active{
display: block;
text-indent: -300px;
float:left;

}




/*------newsletter----------------------------------------------------------------------------*/

#newsletter-container{
width: 270px;
float:left;
padding: 15px;
background:url(../assets/gfx-newsletter-background.jpg) no-repeat top;
}

#newsletter-inner-container-left{
width:115px;
float:left;
padding: 0 8px 0 0;
border-right: solid 1px #787a65;
}


#newsletter-inner-container-right{
width:130px;
float:left;
padding: 0;
margin-left: 10px;
}



/*------contact form----------------------------------------------------------------------------*/

#contact-form-container{
width: 580px;
height: 469px;
background-image: url(../assets/gfx-contact-form-background.jpg);
background-repeat: no-repeat;
float: left;
padding: 20px 0 0 40px;


}

.column-left{
width: 280px;
float: left;
padding: 0 0 40px 0;
text-align:left;


}

.column-right{
width: 180px;
float: left;
padding: 0 0 0 0;
text-align:left;

}



.contact-form-title{
width:135px;
float:left;
color: #2d3791;
padding:  0 10px 10px 0;
text-align: left;
font-size:0.819em;

}

#contact-text{
float:left;
color: #666666;


}

#contact-text  a, #contact-text   a:visited {
color: #2d3791;
text-decoration: none;

}

#contact-text  a:hover, #contact-text  a:active{
color: #ff9933;
text-decoration: none;

}

#contact-container{
width: 270px;
float:left;
padding: 15px;
background:url(../assets/gfx-contact-background.jpg) no-repeat top;
}

#newsletter-inner-container-submit{
width:50px;
float:right;
padding: 0;
margin: 0;


}


.contact-form-submit-container{
width:50px;
float:right;
padding: 160px 0 0 0;
margin: 0;



}



/*------content pages----------------------------------------------------------------------------*/

#text-container{
width:600px;
margin-right: 20px;
background-image: url(../assets/gfx-text-container-background.jpg);
background-repeat: no-repeat;
background-position:top;
padding: 0;
text-align: left;
float:left;
}

.text-column-left{
font-size: 0.9em;
width:180px;
margin-right: 5px;
padding: 0;
text-align: left;
float:left;

}

.text-column-centre{
font-size: 0.9em;
width:200px;
margin-right: 10px;
padding: 0;
text-align: left;
float:left;

}

.text-column-right{
font-size: 0.9em;
width:200px;
padding: 0;
text-align: left;
float:left;

}

#right-column{
width:285px;
float:left;
padding-top: 50px;
}


#column-divider{
border-bottom: solid 1px #a0ab5f;
margin-top:10px;
margin-bottom:20px;
}



.pic-container{
width:189px;
margin: 0;
padding: 10px 30px 30px 0;
text-align: left;
float:left;
}

.pic-text-container{
width:400px;
margin: 0;
padding: 0;
text-align: left;
color: #333333;
float:left;
}

#contact-text{
width: 100%;
float:left;
color: #666666;

}

#contact-text  a, #contact-text   a:visited {
color: #ffffff;
text-decoration: none;

}

#contact-text  a:hover, #contact-text  a:active{
color: #ff9933;
text-decoration: none;

}

.contact-title{
font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em;
	line-height:1em;
	color: #787a65;
	text-align: left;
	padding-top: 0px;
	padding-bottom:0.8em;
	margin: 0px;
	float: left;
}


.web-link-container  a, .web-link-container   a:visited {
display: block;
height: 53px;
width: 110px;
overflow: hidden;
float:left;
padding:0;
 

}

.web-link-container  a:hover, .web-link-container  a:active{
display: block;
text-indent: -110px;
float:left;

}

#products-container{

width:650px;
height: 100%;
margin:0;
padding:0; 
text-align: left;
float:left;

}


.products-small-link a, .products-small-link a:visited{
width:186px;
height: 141px;
float:left;
padding: 0;
margin-right: 20px;
display: block;
overflow: hidden;
}

.products-small-link  a:hover, .products-small-link  a:active{
display: block;
text-indent: -186px;
float:left;

}

.products-big-link a, .products-big-link a:visited{
width:290px;
height: 138px;
float:left;
padding: 20px 0 0 0;
margin: 0 20px  20px 0;
display: block;
overflow: hidden;
}

.products-big-link  a:hover, .products-big-link  a:active{
display: block;
text-indent: -290px;
float:left;

}

/*------Gallery----------------------------------------------------------------------------*/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../assets/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../assets/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 75px; height:28px; float: right;  padding-bottom: 0.7em; outline: none;   background:url(../assets/images/closelabel.gif) } 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }



#gallery-container{

width:600px;
margin:0;
padding:0 0 20px 0; 
text-align: left;
float:left;

}


.thumb-container{

width:90px;
height: 90px;
margin:0;
padding:0; 
margin-right: 10px;
margin-bottom: 10px;
float:left;


}


/*------footer----------------------------------------------------------------------------*/

#footer-container{
width:960px;
font-size: 0.8em;
margin-left: auto;
margin-right: auto;
padding: 0 0 30px 0;

}

#footer-container-inner{
width:960px;
background-image: url(../assets/gfx-footer-background.jpg);
background-repeat: no-repeat;
background-position:bottom;
background-color: #ffffff;
font-size: 0.8em;
float:left;

}


.copyright{
float:left;
font-size: 0.6em;

}



#footer-text{
width: 760px;
padding: 10px 0 0 20px;
margin: 0px;
float:left;
color: #d9cabd;
text-align: left;

}

#footer-text  a, #footer-text   a:visited {
color: #D9CABD;
text-decoration: none;

}

#footer-text  a:hover, #footer-text  a:active{
color: #00A099;
text-decoration: none;

}

.komodo{
width: 109px;
padding: 0 20px 0 0;
float:right;

}

.komodo a, .komodo   a:visited{
width:129px;
height: 75px;
float:right;
padding: 0;
margin-bottom: 50px;
display: block;
overflow: hidden;
}


.komodo  a:hover, .komodo  a:active{
display: block;
text-indent: -129px;
float:right;

}


#web-link-container{
width: 240px;
padding: 10px 0 0 20px;
float:left;
margin: 0;
font-size: 1em;
float:left;
color: #d9cabd;
text-align: left;

}


.web-link a, .web-link   a:visited{
width:72px;
height: 25px;
float:left;
padding: 0;
margin-right: 10px;
display: block;
overflow: hidden;
}


.web-link  a:hover, .web-link  a:active{
display: block;
text-indent: -72px;
float:left;

}