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

body {
	background: #74c9cc url(bg1.gif) repeat;
	font-size: 9pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
	color:#3e3e3e;
	padding:0;
	margin:0;
}

p {
	font-size: 9pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
	color:#3e3e3e;
}

#left p, #right p {
	font-size: 8pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
	color:#3e3e3e;
	letter-spacing: 1px;
}

b {
	font-size: 10pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
	color:#3e3e3e;
	letter-spacing: 1px;
}

a.main:link {
	font-size: 8pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
	color:#f0f018;
	text-decoration: none;
	border-bottom: 1px solid #f0f018;
}
a.main:visited {
	font-size: 8pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
	color:#ffefe2;
	text-decoration: none;
	border-bottom: 1px dotted #ffefe2;
}
a.main:hover {
	font-size: 8pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
	color:#ffffff;
	text-decoration: none;
	border-bottom: 1px solid #ffffff;
}
a.main:active {
	font-size: 8pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
	color:#ff6e53;
	text-decoration: none;
	border-bottom: 1px solid #ff6e53;
}

h1 {
	color: #ffffff;
	font-size: 24pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
}

h2 {
	color: #ffffff;
	font-size: 14pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
}

h3 {
	color: #ffffff;
	font-size: 10pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
}

img.content {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}

img.side {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 3px;
	border: 1px solid #FFFFFF;
}

hr {
 	border: none;
 	background-color: #FFFFFF;
 	color: #FFFFFF;
 	height: 1px;
	width: 80%;
}

span#linkinfo {
	float: right;
	background: transparent;
	position: relative;
	top: 272px;
	right: 40px;
	z-index: 1000;	
}

ul#list {
margin-left: 0;
padding-left: 0;
list-style: none;
}

ul#list li {
padding-left: 60px;
padding-top: 10px;
background-image: url(bullet_fish.gif);
background-repeat: no-repeat;
background-position: 30px 8px;
}

div#notice {
	background-color: #FFEFE2;
	padding: 10px;
	margin: 20px;
	border: 10px solid #F42422;
}

div#social{
	background-color: #FFEFE2;
	padding: 10px;
	margin: 17px;
}

/* __________BEGIN SIFR sIFR-screen.css__________ */
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h1 {
	visibility: hidden;
	letter-spacing: 0.045em;
}

.sIFR-hasFlash h2 {
	visibility: hidden;
}

.sIFR-hasFlash h3 {
	visibility: hidden;
}

.sIFR-hasFlash h4 {
	visibility: hidden;
	letter-spacing: -5px;
	font-size: 21px;
}

.sIFR-hasFlash h5#pullquote {
	letter-spacing: -4px;
	visibility: hidden;
	font-size: 24px;
}

/* __________END SIFR sIFR-screen.css__________ */

/* Gallery thumbnails */
ul#gallery {
	list-style: none;
	display: inline;
}
ul#gallery li{
	float: left;
	width: auto;
	padding: 5px;
	margin: 0px 8px 15px;
	border: none;
	text-align: center;
	background-color: #ffffff;
}
ul#gallery li:hover{
	float: left;
	width: auto;
	padding: 5px;
	margin: 0px 8px 15px;
	border: none;
	text-align: center;
	background-color: #ff6e53;
}
img.gallery {
	border: none;
}
ul#gallery2 {
	list-style: none;
	display: inline;
}
ul#gallery2 li{
	float: left;
	width: auto;
	padding: 3px;
	margin: 0px 3px 15px;
	border: none;
	text-align: center;
	background-color: #ffffff;
}
ul#gallery2 li:hover{
	float: left;
	width: auto;
	padding: 3px;
	margin: 0px 3px 15px;
	border: none;
	text-align: center;
	background-color: #ff6e53;
}
img.gallery2 {
	border: none;
}

/* Product page link buttons */
ul#prolink {
	list-style: none;
	display: inline;
}
ul#prolink li{
	float: left;
	width: auto;
	padding: 0px;
	margin: 0px 2px 30px;
	border: 3px #ffefe2 solid;
	background-color: #ffefe2;
	text-align: center;
}
ul#prolink li:hover{
	float: left;
	width: auto;
	padding: 0px;
	margin: 0px 2px 30px;
	border: 3px #ff6e53 solid;
	background-color: #ff6e53;
	text-align: center;
}
img.product {
	border: none;
}
a.product:link {
	font-size: 10pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
	font-weight: bold;
	color:#ff6e53;
	text-decoration: none;
}
a.product:visited {
	font-size: 10pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
	font-weight: bold;
	color:#3e3e3e;
	text-decoration: none;
}
a.product:hover {
	font-size: 10pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
	font-weight: bold;
	color:#ffffff;
	text-decoration: none;
}
a.product:active {
	font-size: 10pt;
	font-family: Trebuchet MS, Verdana, Arial, Tahoma;
	font-weight: bold;
	color:#ffffff;
	text-decoration: none;
}

/* navigation menu */
#nav {
	background: url(nav_900x105.gif) no-repeat center top;
	padding: 0px;
	margin: 0px;
	width: 900px;
	height: 35px;
	position: relative;
	list-style-type: none;
}
#nav li {
	float:left
}
#nav li a {
	position: absolute;
	top: 0;
	margin: 0;
	padding: 0;
	display: block;
	height: 35px;
	background: url(nav_900x105.gif) no-repeat;
	text-indent: -9999px;
	overflow: hidden;
	font-size: 1%;
	border: none;
}
li#nav_hom a {
	left: 94px;
	width: 100px;
	background-position: -94px 0px;
}
li#nav_pro a {
	left: 196px;
	width: 100px;
	background-position: -196px 0px;
}
li#nav_gal a {
	left: 298px;
	width: 100px;
	background-position: -298px 0px;
}
li#nav_ord a {
	left: 400px;
	width: 100px;
	background-position: -400px 0px;
}
li#nav_faq a {
	left: 502px;
	width: 100px;
	background-position: -502px 0px;
}
li#nav_goo a {
	left: 604px;
	width: 100px;
	background-position: -604px 0px;
}
li#nav_con a {
	left: 706px;
	width: 100px;
	background-position: -706px 0px;
}
li#nav_hom a:hover {
	background-position: -94px -35px;
}
li#nav_pro a:hover {
	background-position: -196px -35px;
}
li#nav_gal a:hover {
	background-position: -298px -35px;
}
li#nav_ord a:hover {
	background-position: -400px -35px;
}
li#nav_faq a:hover {
	background-position: -502px -35px;
}
li#nav_goo a:hover {
	background-position: -604px -35px;
}
li#nav_con a:hover {
	background-position: -706px -35px;
}
#body_hom li#nav_hom a {
	background-position: -94px -70px;
}
#body_pro li#nav_pro a {
	background-position: -196px -70px;
}
#body_gal li#nav_gal a {
	background-position: -298px -70px;
}
#body_ord li#nav_ord a {
	background-position: -400px -70px;
}
#body_faq li#nav_faq a {
	background-position: -502px -70px;
}
#body_goo li#nav_goo a {
	background-position: -604px -70px;
}
#body_con li#nav_con a {
	background-position: -706px -70px;
}
/* END navigation menu */


/*__________ DIVS WITHIN COLUMNS (FOR PADDING) __________*/
/* CENTRE */
#centre {
	background-color: #74c9cc;
	padding: 10px 50px;
	margin: 10px 0px 40px;
}
/* left and right margin content */
#left {
	width: 159px;
	padding: 50px 19px;
}
#right {
	width: 159px;
	padding: 50px 19px;
}

/* GAP BETWEEN NAV AND COLUMNS */
#gap {
	background-color: #74c9cc;
	width: 900px;
	height: 40px;
}
/*__________ END DIVS WITHIN COLUMNS (FOR PADDING) __________*/


/*__________ BEGIN LAYOUT FROM http://www.positioniseverything.net __________*/
#header {
	background: #74c9cc url(header.jpg) no-repeat center top;
	padding: 0px;
	margin: 0px;
	width: 900px;
	height: 300px;
}
#footer {
	background: #74c9cc url(footer.jpg) no-repeat center;
	margin: -12px 0px 0px;
	padding: 40px 0px 0px;
	width: 900px;
	height: 150px;
}

#block_1
	{
	float: left;
	width: 500px;
	margin-left: 200px;
	background: #74c9cc;
	/* border-right: 1px dotted #FFFFFF; */
	}
* html #block_1
	{
	display: inline;
	}
#block_2
	{
	float: left;
	width: 200px;
	margin-left: -700px;
	background: #74c9cc;
	/* border-right: 1px dotted #FFFFFF; */ 
	}
#block_3
	{
	float: left;
	width: 199px;
	background: #74c9cc;
	}
/* Start Mac IE5 filter \*/
#block_1, #block_2, #block_3
	{
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
	}
@media all and (min-width: 0px) {
#block_1, #block_2, #block_3
	{
	padding-bottom: 0 !important;
	margin-bottom: 0 !important; 
	}
#block_1:before, #block_2:before, #block_3:before
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]';
	display: block;
	background: inherit;
	padding-top: 32767px !important;
	margin-bottom: -32767px !important;
	height: 0;
	}
}
/* End Mac IE5 filter */
#wrapper
	{
	width: 900px;
	overflow: hidden; /* This hides the excess padding in non-IE browsers */
	}
/* we need this for IE 5.01 - otherwise the wrapper does not expand to the
necessary height (unless fixed, this problem becomes even more acute 
weirdness as the method is enhanced */
#wrapper
	{
/* Normally a Holly-style hack height: 1% would suffice but that causes 
IE 5.01 to completely collapse the wrapper - instead we float it */
	float: left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes 
(I saw it happen many moons ago) makes the width of wrapper too small 
the float: none with the comment is ignored by 5.01,
5.5 and above see it and carry on about their business
It's probably fine to just remove it, but it's left here 
just in case that many moons ago problem rears its head again */
	float/**/: none;
	}
/* easy clearing */
#wrapper:after
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
#wrapper
	{
	display: inline-block;
	}
/*\*/
#wrapper
	{
	display: block;
	}
/* end easy clearing */
#footer
	{
	clear: both;
	}
#header, #footer
	{
	width: 900px;
	}
/* Safari needs this - otherwise the ghost overflow, though painted 
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form, * > #notes, * > .output
	{
	position: relative;
	z-index: 4;
	}
/*__________ END LAYOUT __________*/

/* BEGIN LIGHTBOX STYLE - LIGHTBOX.CSS */  
#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#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: transparent url(/images/blank.gif) no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(lightbox_images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(lightbox_images/nextlabel.gif) right 15% no-repeat; }


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

#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: 66px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000;
	}
	

/* Min-Width */
.lbWidth { /* most browsers */
	position: absolute;
	top: 0px; left: 0px;
	width: 100%;
	min-width: 790px;
	}

* html .lbContent { /* IE6 */
	margin-left: -790px;
	position:relative;
	}

* html .lbMinWidth { /* IE6 */
	padding-left: 790px;
	}
	
	
/* Clearfix */	
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */ 
/* END LIGHTBOX STYLE */