@import url(reset.css);

/*========================= General styles */

body{
	background: #fff  no-repeat;
	background-position: 95% 0%;
	font-size: 100%;
}

strong{font-weight: bold;}

.main-about,
.main-buzz,
.sub-usana,
.sub-okoa,
.sub-classic-stand,
.sub-hammock{
}

#wrapper{
	font-family: Tahoma, Verdana, Optima, Arial, Helvetica, sans-serif;
	width: 950px;
	margin: 3em auto;
	position: relative;
	background: transparent;
	color: #666;
	font-size: 9pt;
	line-height: 1.63em;
}

a:link,
a:visited,
a:hover,
a:active{
	color: inherit;
	text-decoration: none;
}

	#content a,
	#additional a{
		color: #76c118;
	}
	
	#content a.buybutton{
		color: #fff;
	}
	
	#all-retailers .buybutton{
		float: left;
		margin: 10px 0 0 0;
		width:auto;
	}
	
	#all-retailers .outer{
		float: left;
	}
	


:target{
	border: 1px dotted #ffc14f;
	background-color: #fff36b;
}

#myseat:target{
	border: 0;
	background-color: inherit;
}

h1,h2, h3, h4{
	font-weight: bold;
	padding: 0 0 .5em;
}

	h1, h2{
		color: #76C118;
		font-size: 1.15em;
	}
	
	h3{
		font-size: 1.1em;
	}
	
	h4{
		font-size: 1em;
	}



p{
	padding: 0 0 1em;
}


.notice{
	font-weight: bold;
	clear: both;
}

/*========================== Template styles */

#logo{
	width: 442px;
	height: 70px;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
}

#logo a{
	display: block;
	text-indent: -9999em;
	position: absolute;
	background: url(/images/hushamoklogo.jpg) left top no-repeat;
}

#logo-link-1{
	left: 0;
	top: 0;
	width: 300px;
	height: 50px;
}

#logo #logo-link-2{
	left: 140px;
	top: 50px;
	width: 300px;
	height: 30px;
	background-position: -140px -50px;
}

#phone{
	position: absolute;
	color: #aaa;
	top: -15px;
	right: 5px;
	font-weight: bold;
	font-size: 1.2em;
}

#international-sites{
	position: absolute;
	color: #aaa;
	top: -12px;
	right: 192px;
}

#international-sites li{
	float: left;
	margin-right: 3px;
}

#international-sites a,
.flag{
	display: block;
	width: 30px;
	height: 15px;
	text-indent: -9999em;
	background-position: bottom left;
}

.flag{ background-position: top left; }


#international-sites a:hover{
	background-position: top left;
}

#international-us a{ background-position: top left;}

#international-us a{ background-image: url(/images/flag-us.gif); }
#international-ca a, .flag-ca{ background-image: url(/images/flag-ca.gif); }
#international-au a{ background-image: url(/images/flag-au.gif); }
#international-nz a, .flag-nz{ background-image: url(/images/flag-nz.gif); }
#international-sa a, .flag-sa{ background-image: url(/images/flag-sa.gif); }


#footer{
	clear: both;
	float: none;
	font-size: .8em;
	padding-top: 20px;
}

#footer .emailtoafriend{
	color: #76C118;
	padding-left: 20px;
	background-image: url(/images/mail.gif);
	background-repeat: no-repeat;
	background-position: left middle;
}

	/*========================= Primary nav and buttons */
	
	/*
	
		<ul #primary-nav>
			<li .first> // left with padding
				<a></a> // mid with padding
			</li>
			
			<li> // no margin or padding
				<a></a> // mid with padding
			</li>
			
			<li .last> // right with padding
				<a></a> // mid with padding
			</li>
		</ul>
		
		<div .buybutton> // left with padding
			<div .outer> // right with padding
				<div .inner> // mid with padding
				</div>
			</div>
		</div>
	
	
	*/
	
	
	#primary-nav{
		padding: 0;
		position: relative;
		float: right;
		z-index: 1;
		margin-top: 10px;
	}
	
		#primary-nav,
		.buybutton,
		a.buybutton{
			height: 26px;
			line-height: 26px;
			font-size: 1.15em;
			color: #fff;
			text-shadow: 0 0 3px #000;
		}
		
		
		#primary-nav li,
		#primary-nav li a,
		.buybutton .inner{
			height: 26px;
			line-height: 26px;
			display: block;
		}
		
		#primary-nav li a,
		.buybutton .inner{
			background: url(/images/nav-mid.png) top left repeat-x;
		}
		
		#primary-nav a:hover,
		.buybutton a:hover,
		.buybutton:hover{
			text-shadow: 0 0 3px #555;
		}
		
		#primary-nav li{
			float: left;
		}
		
		#primary-nav li a{
			padding: 0 30px;
		}
		
		#primary-nav .first,
		.buybutton{
			background: url(/images/nav-left.png) left top no-repeat;
			padding-left: 21px;
		}
		
		#primary-nav .last,
		.buybutton .outer{
			background: url(/images/nav-right.png) right top no-repeat;
			padding-right: 28px;
		}
		
		#primary-nav .first a,
		.buybutton .inner{
			padding-left: 7px;
		}
		
		#primary-nav .last a,
		.buybutton .inner{
			padding-right: 0;
		}
		
		
	/* ============================= Secondary nav */

	#secondary-nav,
	.rounded{
		clear: left;
		float: left;
		overflow: hidden;
		background: #999 url(/images/secondarynav-bottom.jpg) bottom left no-repeat;
		color: #fff;
		
		padding-bottom: 10px;
		margin-top: 100px;
		font-size: 1em;
	}
	
		#secondary-nav .first, 
		.rounded .top{
			background: url(/images/secondarynav-top.jpg) top left no-repeat;
			padding-top: 10px;
		}
		
		#secondary-nav li{
			padding: 5px 5px 5px 10px;
		}
		
		#secondary-nav,
		#product-information{
			width: 200px;
		}
		


	/* ============================= Secondary nav */

	#tertiary-nav{
		position: absolute;
		right: 0;
		top: 45px;
	}
	
	#tertiary-nav li{
		list-style-type: none;
		display: inline;
		padding: 0 10px;
	}


/*============================ Products Page */

#product-information,
.product-information{
	float:left;
	clear: left;
	margin-top: 20px;
	font-size: 10pt;
	text-align: right;
	line-height: 1.4em;
}

	#product-description{
		clear: both;
	}

	.view-detail #product-information,
	.view-detail .product-information{
		width: auto;
		padding-left: 2em;
		float: none;
		text-align: left;
		line-height: inherit;
		font-size: inherit;
	}
	

	.view-detail #content{
		width: 507px;
	}
	
	.price{
		font-size: 14pt;
		font-weight: bold;
		margin-top: 10px;
	}
	
		.view-detail .price{
			float: left;
		}
	
	#product-information form{
		margin-bottom: 10px;
	}
		
		#product-information form h3{
			clear: left;
			display: block;
		}
	
		
		#product-information .buybutton,
		.product-information .buybutton{
			float: right;
			margin-top: 10px;
		}
			
			.view-detail #product-information .buybutton,
			.view-detail .product-information .buybutton{
				float: none;
				margin: 0 0 0 3px;
			}
			
			#product-information button,
			button{
				margin: 0;
				padding: 0;
				float: none;
				background-color: transparent;
			}
			
			
	
	#product-image{
		margin-top: 70px;
		margin-left: 20px;
	}
		
		.view-detail #product-image,
		#content #product-image{
			display: block;
			margin: 0;
		}
	
	#product-information.product-list,
	.product-information.product-list{
		overflow: hidden;
		list-style-type: none;
		width: auto;
		margin: 0;
		padding: 0 0 2em 0;
		float: none;
		clear: none;
		text-align: left;
		font-size: 1em;
	}
	
		.product-list h3{
			color: #76C118;
		}
	
	.product-list li{
		margin: 0;
		padding: 0 0 1em 0;
		list-style-type: none;
		clear: left;
	}
		.product-list .product-image{
			float: left;
			margin-right: 2em;
			margin-bottom: 2em;
		}
		
		#product-information.product-list .buybutton,
		.product-information.product-list .buybutton{
			float: left;
		}
		
	#products .product-list li{
		float: left;
		clear: none;
		overflow: hidden;
		width: auto;
	}
	
	.main-products h2{
		clear: left;
	}


	/*============================ Shopping cart and Shipping forms */
	
	
	#cart-table, #shipping-form table, table#shipping-form{
		margin: 0 auto;
		width: 100%;
		background-image: url(/images/semi-white.png);
	}
	
	#cart-table .price{
		font-size: 1em;
	}
	
	#cart-table td.price{
		font-weight: normal;
	}
	
	
	#cart-table .price,
	#cart-table .total,
	#cart-table .money{
		text-align: right;
	}
	
	#cart-table .label,
	#cart-table th,
	#shipping-form label{
		font-weight: bold;
		text-align: left;
	}
	
	#cart-table th{
		border-bottom: 1px dotted #aaa;
		padding: 10px 10px 0 10px;
	}
	
	#cart-table td{
		padding: 10px;
	}
	
	#cart-table td.name{
		padding-left: 20px;
	}
	
	#cart-table #label-cart-total{
		text-align: right;
	}
	
	#cart-total{
		font-weight: bold;
	}
	
	.sub-cart .buybutton{
		float: left;
		clear: none;
	}
	
	form#empty-cart{
		float: left;
	}
	
	#total-line td{
		border-top: 1px dotted #aaa;
	}
	
	#shipping-form input[type=text],
	#shipping-form #state{
		width: 350px;
	}
	#shipping-form #state{
		width: 356px;
	}
	
	#shipping-form #checkout{
		padding-right: 213px;
	}
	
	#shipping-form #checkout button{
		float: right;
	}
	
	/*================================= Form styles */
	
	
	form h3{
		color: #76C118;
	}
	
	.colorselect .option-green{
		background-color: #a8ca37;
	}
	
	.colorselect .option-orange{
		background-color: #e7812b;
	}
	
	.colorselect .option-blue{
		background-color: #449ec2;
	}
	
	.colorselect .option-pink{
		background-color: #b35980;
	}
	
	.colorselect .option-natural{
		background-color: #eae5d2;
	}
	
	
	

/*========================= Content text styles */
#content{
	padding-left: 220px;
	padding-top: 100px;
}

#buzz #content,
.main-products #content{
	padding-left: 0;
}

.footnote{
	color: #999;
}

.hushamok{ font-style: italic;}


#content .subsection{
	padding-left: 2em;
}


a.footlink{
	vertical-align: super;
}

#content ul{
	list-style-type: disc;
}

#content li{
	margin-left: 2em;
	margin-bottom: 1em;
}

/*=========================== History page */

#history-montage{
	float: left;
}

#founders{
	clear: left;
	margin-top: 22px;
	background: inherit;
	border: 0;
}


/*=========================== Story page */

#additional{
	clear:left;
	float:left;
	margin-top:22px;
	width:200px;
}

#additional h2,#additional h3,#additional h4,#additional h5{
	margin-left: 10px;
}

#okoa-assembly{
	display: block;
	width: 180px;
	margin: 0 auto;
}

/*=========================== Gallery page */

#about-gallery #content img{
	margin: 0 1em 1em 0;
}

#gallery {position:relative; width:652px; margin:40px auto; padding:10px; border:6px solid #fff; background:#AAA}
#images {border:2px solid #9ac1c9; height:225px; background:#eef5f6; margin-bottom:20px}
#image {position:relative; width:638px; height:375px; padding:5px; border:2px solid #666; background:#fff; }
#image img {width: 550px; top: 23px; left: 44px; position: absolute;}
#thumbwrapper {display: none;}
.imgnav {position:absolute; height:375px; width:20%; z-index:100; height:375px; width:20%; z-index:100; outline:none; cursor:pointer}
#previmg {left:0; background:url(/images/left.gif) left center no-repeat; border-left:5px solid #FFF}
#previmg:hover {opacity:1; filter:alpha(opacity=100)}
#nextimg {right:0; background:url(/images/right.gif) right center no-repeat; border-right:5px solid #FFF}
#nextimg:hover {opacity:1; filter:alpha(opacity=100)}


/*=========================== Store locator */

#stores li{
	list-style-type: none;
	clear: right;
}

#stores .store-name{
	font-weight: bold;
	padding-bottom: 0;
	border-bottom: 1px solid #aaa;
}

#stores .store-logo{
	float: right;
}

#viewall{
	margin-left: 0;
	padding-left: 0;
	margin-top: 20px;
}

/*========================= Contact page */

#phone-number{
	border-top: 1px solid #ccc;
}

#warning{
	border: 1px solid #ff0;
	background-color: #ffd;
}