/**************
Begin html css tags
**************
*/
	body
	{
		
		font-family:Arial;
		font-size: 11pt;
		text-align:left;
	}
	#header
	{
		
	 	 height: 768px;
  	     width: 1024px;
		 background:url(../Images/comfortsleepFade2WhiteBG.jpg);
		 background-repeat:no-repeat;
		 border:none;
	}
	/*begin main nav*/
	#nav 
	{
		padding: 15px;/*up and down*/
		padding-right: 0px;/*set at zero becasue it needs to be centered above the sign*/
		width: 400px;/*will give you more nav buttons per line on scree, works the same in IE and FF(default is 515)*/
	}
	#mainnav 
	{
		margin: 25px;/*This moves the whole page down for some reason.*/
		padding: 0px;/*DO NOT CHANGE THIS NUMBER. I mean your welcome to but you wont like the results.*/
		list-style-image: none;
		list-style-type: none;
	}
	#mainnav li 
	{
		padding: 0px;
		float: left;
		/*margin: 0px 3px 0px 0px;up,down,left,right. up is really the only thing you will use*/
	}
	#mainnav li a:link, #mainnav li a:visited, #mainnav li a:active 
	{
		color: #333;
		text-decoration: none;
		/*margin: 0px;you could mess with this but I really do not suggest it*/
		display: block;
		float: left;
		border-bottom:solid 5px #dadada;
		padding: 0px;
		width: 100px;
		height: 20px;
		text-align: center;
	}
	#mainnav li a:hover 
	{
		text-decoration: none;
		border-bottom:solid 5px #333;
	}
	#mainnav li a.active:link, #mainnav li a.active:visited, #mainnav li a.active:active, #mainnav li a.active:hover 
	{
		text-decoration: none;
		border-bottom:solid 5px #FF9933;/*this is the active color of the buttons*/
	} 
	/*end Main Nav*/
	/*start Sub Nav*/
	#Catnav 
	{
		padding-top: 30px;/*up and down*/
		padding-right: 0px;/*set at zero becasue it needs to be centered under the sign*/
		padding-left: 150px;/*moves the category nav from left to right*/
		width: 1024px;/*will give you more nav buttons per line on scree, works the same in IE and FF(default is 515)*/
	}
	#Catmainnav 
	{
		margin: 0px;/*DO NOT CHANGE THIS NUMBER. it will make the list of buttons become a virtical list...*/
		padding: 0px;/*DO NOT CHANGE THIS NUMBER. I mean your welcome to but you wont like the results.*/
		list-style-image: none;
		list-style-type: none;
	}
	#Catmainnav li 
	{
		padding: 0px; /*leave at zero. if changed it will make a vertical list that is spaced to the respective pixels you put in the padding.*/
		float: left;/*having this helps center the nav. float right just makes it impossible for this kind of nav.*/
		margin:0px 3px 0px 0px;*up,down,left,right. up is really the only thing you will use*/
	}
	#Catmainnav li a:link, #smainnav li a:visited, #Catmainnav li a:active 
	{
		color: #333;
		text-decoration: none;
		/*margin: 0px;you could mess with this but I really do not suggest it*/
		display: block;
		float: left;
		border-bottom:solid 5px #dadada;
		padding: 0px;
		width: 100px;
		height: 20px;
		text-align: center;

	}
	#Catmainnav li a:hover 
	{
		text-decoration: none;
		border-bottom:solid 5px #333;
	}
	#Catmainnav li a.active:link, #Catmainnav li a.active:visited, #Catmainnav li a.active:active, #Catmainnav li a.active:hover 
	{
		text-decoration: none;
		border-bottom:solid 5px #FF9933;/*this is the active color of the buttons*/
	} 
	/*end Sub Nav*/
	#maindiv
	{
		background-color:#FFFFFF;
		
		float:inherit;
		margin-left:auto;
		margin-right:auto;
		clear:both;
		margin-top:-15px;
		
		
	}
	#footercontent
	{
		padding-top:100px;
		
		
	}
	/*Your content will be in this tag below. as it is right now it will be in the upper right hand corner.*/	
	div.content
	{
		margin-top:50px;
		margin-left:20px;
		margin-right:500px;
		
		text-align:left;		
		float:left;/*content will be on the left hand side of the page. this tag can be a real pain the the butt sometimes*/
		font-family:Arial;
		font-size: 12pt;
		clear:both;
		
	}
	div.contentAB
	{
		margin-top:65px;
		margin-left:45px;
		float:left;
		font-family: Arial, Helvetica, sans-serif;
		text-align:left;
	}
	div.productDescription
	{
	text-align:center;
	font-size:10px;
	font-weight:300;
	}
	#nextpage
	{
	font-size:12px;
	}
	#CategoryNavigation
	{
	max-width:200px;
	border-right-color:#999999;
	border-right-width:thin;
	float:left;
	margin: 0px, 0px, 0px, 0px;	
	}
	p.contactinformation
	{
	font-size:14px;
	
	}
a:link { 
color:#000000;
text-decoration: none;
}
a:visited { 
color:#000000; 
text-decoration:none;
}
a:hover {
color:#FFCC00;
text-decoration:underline;
} 
/**************************************************************************
DO NOT MESS WITH THIS CODE, OR ELSE!
***************************************************************************
/*light box*/
#lightbox{
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	color:#151410;
	}

#lightbox a, #lightbox a:hover {
	border-bottom:none;
	color:#151410;
	text-decoration:underline;
}

#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;
	}
#loadingLink {
	display:block;
	margin:0 auto;
	padding:0;
	width:32px;
	height:32px;
	background:url(../Images/loading.gif) center center no-repeat;
	text-indent:-9999px;
}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLinkImg, #nextLinkImg{
	width: 49%;
	height: 100%;
	background: transparent url("../Images/blank.gif") no-repeat; /* Trick IE into showing hover */
	display: block;
	text-indent:-9999px;
	}
#prevLinkImg { left: 0; float: left;}
#nextLinkImg { right: 0; float: right;}
#prevLinkImg:hover, #prevLinkImg:visited:hover { background: url("../Images/prevlabel.gif") left 15% no-repeat; }
#nextLinkImg:hover, #nextLinkImg:visited:hover { background: url("../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;
	}
#imageDetails{ width: 70%; float: left; text-align: left; }	
#caption{ font-weight: bold;	}
#numberDisplay{ display: block; clear: left; }			
#detailsNav{ display: block; clear: left; padding:0 0 10px 0;	}	
#prevLinkDetails { margin:0 8px 0 0; }		
#nextLinkDetails { margin:0 8px 0 0; }		
#closeLink {
	display:block;
	margin:0;
	padding:0 0 10px 0;
	text-decoration:none;
	float:right;
	width:66px;
	height:28px;
	background:url("../Images/closelabel.gif") no-repeat;
	text-indent:-9999px;
	overflow:hidden;
}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #151410;
	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 */
	}
	
/*************************************************************************************************************
****************************************************************************************************************
end light box*/
/*This creates the fade in fade out area*/
.slideshow { 
	/*height: 232px; 
	width: 232px;*/
	margin: auto 
	}
.slideshow img { 
	padding: 15px; 
	border: 1px solid #ccc; 
	background-color: #eee; 
	}