/* 
Title: 		
Updated: 	
Version: 1.0
Author: yse
*/

* {margin: 0; padding: 0;}

body { 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 11px;
	text-align:center;
	background: #000 url("../images/body_bg.jpg") repeat-x top left ;
}

img { border: 0;}
hr { display:none; }

#wrapper {width: 940px;margin: 0 auto;text-align:left;background: #FFF; padding: 0 5px 5px 5px}

/* header
------------------------------------------------------------- */
#header { background: url("../images/header1.1.jpg") no-repeat top left; height: 103px; clear:both;}
#mainlogo { display:block; height: 0; margin-left: 15px; padding-top: 78px;overflow:hidden; width: 114px  }

#mainnav { border-bottom: 3px solid #70b1e9; background: #515d6b; height: 24px; }
#mainnav ul { list-style:none; text-transform: uppercase; font-family:"Lucida Sans", Verdana;font-weight:bold;}
#mainnav li { display:inline;float:left; background: transparent url("../images/blockfooter_middle.gif") no-repeat center right;padding-right: 1px;}
#mainnav li a { display:block; color: #FFF; height: 24px; line-height: 24px; padding: 0 10px;float:left; text-decoration: none;}
#mainnav li a:hover { background: #979EA6;}
#mainnav li.last { background:none;}
#mainnav li.last a:hover { background: #979EA6;}
#mainnav li a.active { background: #70b1e9 }

#blockmain { margin-top: 20px;}

/* blockcontent
------------------------------------------------------------- */
#image { float:left; width: 226px; padding-left: 15px; }
#blockcontent { float:left; width: 388px; color: #515D6A; padding: 0 20px;margin: 0 7px;}
#blockcontent p { margin-bottom: 1em; line-height: 1.5em;}
#blockcontent a { color: #000F2E; font-weight:bold;}
#blockcontent a:hover { color: #26B1FF; }
#blockcontent h1 { color: #70b1e9; font-size: 18px; margin-bottom: .6em; font-family:"Century Gothic", "Lucida Sans", Verdana;}
#blockcontent h2 { font-family:"Century Gothic", "Lucida Sans", Verdana; font-size: 13px; border-bottom: 1px solid #F2F3F4; padding-bottom: 3px;margin: .5em 0; }
#blockcontent ul { margin: 2em; }
#blockcontent ul li { margin-bottom: .5em;}

dl.promotie { margin-bottom: 1em; border-bottom: 1px solid #F2F3F4;padding-bottom: .5em;}
dl.promotie dt { font-family:"Century Gothic", "Lucida Sans", Verdana; font-size: 13px; text-decoration: none; }
.more { display:block;text-align: right;}

.promothumb { width: 290px; display:block;background:#FFF; text-align: center; border: 2px solid #CCC;}
.promothumb .img { border:0;}
.promothumb:hover { border: 2px solid #999999;}
.promothumb:hover .img { border:0;}

.strike { text-decoration: line-through; }

#promoprice {  font-size: 400%;font-weight:bold;font-family:"Century Gothic", "Lucida Sans", Verdana;  color: #FF8A15; padding: 5px; width: 50%; text-align:left;  border-bottom: 1px solid #F2F3F4; border-top: 1px solid #F2F3F4; width: 100%; margin: .5em 0;display:block; text-align: right;}
#promoprice .small { font-size: 10px; color: #666666;}

.info { display:block;font-size: 10px; color: #99A0A8; border-top: 1px solid #F2F3F4;padding-top: 3px;margin-top: 1em;}

.reflect { cursor: hand;}


/* blockpanels
------------------------------------------------------------- */
#blockpanels { float:right; width: 235px;}

#blockpanels dl { width: 219px; margin-bottom: 1em; background: #FFF url("../blockpanel.bg.jpg") repeat-x top left; min-height: 97px; _height: 97px; padding: 4px 8px; color: #979EA6 }
#blockpanels dt { font-family: "Century Gothic", "Lucida Sans","Lucida", Verdana; color: #515D6A; text-transform: lowercase;  font-weight:bold;padding-bottom: 5px; font-size: 14px; background: url("../blockpanel.dt.gif") repeat-x bottom left;}
#blockpanels dd { padding: 1em .5em; color: #666666;}
#blockpanels dt a { text-decoration: none;}
#blockpanels a { color: #666666; }
#blockpanels p  { margin-bottom: 1em;}

form.inpage label { font-weight:bold; clear:both; display:block;}
form.inpage .input { margin: 5px 0; font-size: 13px; }
form.inpage .button { margin: 5px 2px;background: #FF8A15; color: #FFF; border: 1px solid #E87400; font-size: 13px;font-weight:bold;}


/* blockfooter
------------------------------------------------------------- */
#blockfooter { clear:both; background: url("../images/blockfooter_bg.jpg") repeat-x top left; height: 153px; color: #FFF;  }
#blockfooter a { color: #FFF;}
#blockfooter dl { float:left; width: 211px; padding: 10px 20px; height: 133px;}
#blockfooter dt { font-family: "Century Gothic", "Lucida Sans","Lucida", Verdana; color: #70b1e9; font-size: 17px; font-weight: bold; margin-bottom: .5em;}
#blockfooter dt a { color: #70b1e9; text-decoration: none;}
#blockfooter dl.middle { width: 388px;background: url("../images/blockfooter_middle.gif") no-repeat center left;}

#blockfooter ul { list-style:none;}
#blockfooter ul li { background: url("/images/blockfooter.li.gif") no-repeat center left; padding-left: 1.4em; margin-bottom: .5em;}

/* footer
------------------------------------------------------------- */
#footer { clear:both; width: 950px; margin:0 auto;text-align:right; color: #FFF; font-size: 10px; font-family: Arial, Helvetica, sans-serif;}
#footer a { color: #FFF; text-decoration: none; }
#footer a:hover { }

/* forms
------------------------------------------------------------- */
form, fieldset, input,select,textarea { font-family: Verdana,arial,sans-serif;}
fieldset {border:0;}
legend {display:none;}
input, textarea {color:#474A53; font-size:110%;}
input:hover, input:active, input:focus, textarea:hover, textarea:active, textarea:focus { border-color: red;}

.error { margin-bottom: 1em; }


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

/* 
	The following information must not be removed:
	Awesome Form v2 CSS
	Written by: Paul Armstrong, Paul Armstrong Designs
	Site: http://paularmstrongdesigns.com
	Example & Documentation: http://paularmstrongdesigns.com/examples/css/awesome-form.html
	Thu Jun 22 22:38:54 2006

	Special thanks to Zach Johnson for helping and pushing me to make the changes.
	Site: http://tech.no.logi.es (those aren't dots, they are diamonds)

	This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License
	http://creativecommons.org/licenses/by-sa/2.5/
*/


/*
	In the following section, many of the values must be changed in reference to another.
	Items labeled as 'subjective' are not dependent and may be easily changed as you see fit.
*/
form.awesome fieldset { border: 0;}
form.awesome legend {display:none;}
form.awesome input.error { background: #FF9999; color: #FFF;}
form.awesome input, form.awesome textarea { font-family: Arial, Helvetica, sans-serif; }
form.awesome label { 
	width: 100px; /* label width *//* label margin = (input left margin) - (label width) */
	margin-right: 10px; /* label margin */
}
form.awesome label.long, form.awesome p.label {
	margin-left: 120px; /* subjective */
	width: 390px; /* (textarea width) + (label width) + (label margin) - (left margin) */
}
form.awesome label span {
	color: #900; /* color of required asterisk */
}
form.awesome input, form.awesome textarea, form.awesome select {
	margin-left: 120px; /* (label width) + (label margin) */
	width: 150px; /* subjective */
}
form.awesome textarea { 
	width: 150px; /* subjective, recommend: (3/2)(input width) */
}
form.awesome p.desc {
	margin-left: 210px; /* (label width) + (label margin) */
}
form.awesome .checks label {
	margin-left: 100px; /* (label width) + 2(label margin) */
}
form.awesome .checks input {
	margin-left: 100px; /* (label width) + (label margin) */
}

/*
	The following makes Internet Explorer 6.x play nicely. 
	These fix the double float margin bug.
*/
* html form.awesome .checks input { 
	margin-left: 50px;  /* (1/2)((label width) + (label margin)) */
}
* html form.awesome .checks label { 
	margin-left: 95px; /* (label width) + (label margin) */
	height: 1em; font-weight:normal;line-height: 1.7em;
}


/*********************************************************************************
	DO NOT EDIT BELOW THIS LINE
*********************************************************************************/

form.awesome {
	margin: 0 0 1em;
}

form.awesome label {
	float: left;
	text-align: right;
	padding-top: 0.2em;
	font-weight: bold;
	font-size: 1em;
}

form.awesome label:after { 
	content: ":"; 
}

form.awesome label.long {
	float: none;
	display: block;
	text-align: left;
}

form.awesome label.long:after {
	content: "";
}

form.awesome input, form.awesome textarea, form.awesome select {
	display: block;
	margin-bottom: -0.5em;
}
form.awesome select[multiple="multiple"] {
	margin-left: 0px;
}
form.awesome br { 
	clear: left;
} 

form.awesome input[type="radio"], form.awesome input[type="checkbox"], 
form.awesome input[type="hidden"] { 
	width: auto; 
	height: 0.8em; 
	border: 0;
}

form.awesome input[type="hidden"] {
	display: none;
}

form.awesome p.desc {
	display: block;
	margin-top: -0.4em;
	margin-bottom: 1em;
	font-style: italic;
	font-size: 0.9em;
}

form.awesome .checks label {
	float: none;
	width: auto;
	clear: none;
	display: block;
	text-align: left;
	height: 2em;
	padding-top: 0;
	margin-bottom: -1em;
}

form.awesome .checks label:after { 
	content: ""; 
} 

form.awesome .checks input {
	float: left;
	text-align: right;
	margin-bottom: 0.5em;
	width: auto;
}
/*
	I found my own IE CSS display bug. I call it the "IE sucks, so it redraws the top border all over the fieldset like a jerk bug."
*/
* html form.awesome input, * html form.awesome textarea, * html form.awesome select,
* html form.awesome .checks input, * html form.awesome .checks label, 
* html form.awesome p.desc {
	margin-top: 0;
	margin-bottom: 0;
}
* html form.awesome fieldset br {
	line-height: 0.5em;
	font-size: 0.5em;
}

#lightbox{
	position: absolute;
	top: 40px;
	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/lightbox/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("/images/lightbox/prev.gif") left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url("/images/lightbox/next.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;
	}
#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: 26px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #000000;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

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