/**********************************************************************************************

	CSS on Sails
	Title	: WOH! Website
	Author	: IBOX
	Date	: July 2008 

***********************************************************************************************

		
	1. BASE
			1.1 Reset
			1.2 Default styles
			1.3 Basic styles
	
	2. LAYOUT
			2.1 Header
			2.2	Banner
			2.3	First Paragraph
			2.4 Content
			2.5 Sidebar
			2.6	Content Footer
			2.7 Catalogue
			2.8 Footer
			2.9 Popup
		

***********************************************************************************************/


/* 1. BASE
-----------------------------------------------------------------------------------------------
===============================================================================================*/	



/* 1.1	Reset
-----------------------------------------------------------------------------------------------*/	

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}
	
	body {
		line-height: 1;
	}
	
	ol, ul {
		list-style: none;
	}
	
	blockquote, q {
		quotes: none;
	}
	
	blockquote:before, 
	blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	
	:focus {
		outline: 0;
	}
	
	ins {
		text-decoration: none;
	}
	
	del {
		text-decoration: line-through;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	img {
		margin-bottom: -3px;
	}


/* 1.2	Default styles
-----------------------------------------------------------------------------------------------*/	

	body {
		text-align: center;
		font: 62.5% Verdana, Arial, Helvetica, sans-serif;
		background: #000;
	}

	hr { 
		display: none;
	}
			
	strong {
		font-weight: bold;
	}
			
	em {
		font-style: italic;
	}
		
	abbr, acronym {
		border-bottom: 1px dotted #999; 
		cursor: help;
	}
	
	input, textarea, select {
		font: 1.2em Arial, Helvetica, sans-serif;
	}

	a {
		text-decoration: none;
		color: #cc0000;
		cursor: pointer;
	}
	
	a:hover, 
	a:active {
		text-decoration: none;
		color: #000;
	}
	

/* 1.3	Basic styles
-----------------------------------------------------------------------------------------------*/	

	.hide {
		display: none;
	}
	

/* 2. LAYOUT
-----------------------------------------------------------------------------------------------
===============================================================================================*/	

	.container {
		position: relative;
		margin: 0 auto;
		padding: 0 5px 5px 5px;
		width: 740px;
		text-align: left;
		background: #fff;
	}
	
	#header {
		position: relative;
		width: 740px;
		height: 115px;
	}
	
	#banner {
		padding: 15px;
		width: 710px;
		background: #E5E1E1;
	}
	
	#first_paragraph {
		overflow: hidden;
		clear: both;
		margin: 0 0 -10px 0;
		padding: 15px 10px 0 10px;
		width: 720px;
	}
	
	#content {
		float: left;
		padding: 0;
		width: 500px;
	}
		
	#sidebar {
		float: right; 
		margin: 10px 0;
		padding: 0 0 10px 0;
		width: 240px;
		background: #E1E1E1;
	}
	
	#content_footer {
		clear: both;
		margin: 0 0 15px 0;
		height: 150px;
		background: #D7D7D7 url(../../image/site/woh/layout/bg_logos_circle.gif) no-repeat right top;
	}
	
	#catalogue {
		padding: 10px 15px 15px 15px;
		width: 710px;
		background: #E5E1E1;
	}
	
	#footer {
		position: relative;
		clear: both;
		margin: 0 auto;
		padding: 0 5px 20px 5px;
		width: 740px;
		text-align: left;
	}
	
	
/* 2.1	Header
-----------------------------------------------------------------------------------------------*/	

	#header h1, 
	#header h1 span,
	#header .logo a,
	#header .logo span {
		display: block;
		width: 195px;
		height: 95px;
		overflow: hidden;
		cursor: pointer;
	}
	
	#header h1,
	#header .logo {
		position: absolute;
		bottom: 0;
		right: 0;
	}
		
	#header h1 span,
	#header .logo span {	
		position: absolute; 
		top: 0;
		left: 0;
		z-index: 10;
		background: url(../../image/site/woh/layout/logo.jpg) no-repeat left top;
	}
	
	#accessibility-links {
		position: absolute;
		left: -1000em;
		text-align: left;
	}
	
	#header #hello {
		position: absolute;
		left: 0;
		top: 35px;
		width: 180px;
		height: 80px;
	}
		#header #hello p {
			line-height: 11px;
			font-weight: normal;
			font-size: 11px;
			color: #999;
		}
		#header #hello p.phone_num {
			line-height: 15px;
			font-weight: bold;
			font-size: 13px;
			color: #cc0000;
		}
			#header #hello p a {
				color: #999;
			}
			#header #hello p a:hover {
				color: #000;
			}
	
	#header #navigation {
		position: absolute;
		left: 180px;
		top: 35px;
		width: 365px;
		height: 80px;
	}
		#header #navigation ul {
			padding: 0;
		}
			#header #navigation ul li {
				float: left;
				padding: 0 6px 0 8px;
				line-height: 15px;
				font-weight: bold;
				font-size: 13px;
				color: #000;
				background: url(../../image/site/woh/layout/bg_navigation_spacer.gif) no-repeat left 1px;
			}
			#header #navigation ul li.first {
				padding-left: 0;
				background: none;
			}
				#header #navigation ul li a {
					color: #000;
				}
				#header #navigation ul li a:hover,
				#header #navigation ul li.active a {
					color: #cc0000;
				}
	
	/*#header #hello h2,
	#header #navigation h2 {
		margin: 0 0 10px 0;
		padding: 0 0 7px 7px;
		height: 19px;
		background: url(../../image/site/woh/layout/bg_header_title.gif) no-repeat left top;
	}
		#header #hello h2 span,
		#header #navigation h2 span {
			float: left;
			display: block;
			padding: 0 3px;
			height: 19px;
			line-height: 18px;
			font-weight: bold;
			font-size: 18px;
			color: #999;
			background: #CFCFCF;
		}*/
	
	#header #hello h2,
	#header #navigation h2 {
		position: relative;
		overflow: hidden;
		margin: 0 0 10px 0;
		width: 62px;
		height: 26px;
		line-height: 26px;
		font-weight: bold;
		font-size: 18px;
		color: #999;
		background: #CFCFCF;
	}
	#header #navigation h2 {width: 103px;}
		#header #hello h2 span,
		#header #navigation h2 span {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: url(../../image/site/woh/layout/bg_header_title_hello.gif) no-repeat left top;
		}
		#header #navigation h2 span {background: url(../../image/site/woh/layout/bg_header_title_havealook.gif) no-repeat left top;}
	
	#header #top_header {
		position: absolute;
		left: 0;
		top: 0;
		padding: 0 10px;
		width: 720px;
		height: 18px;
		background: #cc0000;
	}
		#header #top_header a.back_to_home {
			float: left;
			text-transform: uppercase;
			line-height: 18px;
			font-weight: bold;
			font-size: 9px;
			color: #333;
		}
		#header #top_header a:hover.back_to_home {
			color: #000;
		}
		
		#header #top_header p.breadcrumb {
			float: right;
			line-height: 18px;
			font-weight: bold;
			font-size: 9px;
			color: #fff;
		}
			#header #top_header p.breadcrumb a {
				color: #fff;
			}
			#header #top_header p.breadcrumb a:hover {
				color: #000;
			}

/* 2.2	Banner
-----------------------------------------------------------------------------------------------*/	
	
	#banner img {
		margin-bottom: -3px;
	}
	
	#banner ul {
		padding: 35px 0 0 0;
		width: 710px;
		height: 195px;
		background: #fff;
	}
		#banner ul li {
			float: left;
			padding: 0 0 0 15px;
			height: 170px;
			text-align: center;
		}
			#banner ul li p {
				padding: 10px 0 0 0;
				font-weight: bold;
				font-size: 11px;
				color: #282828;
			}


/* 2.3	First Paragraph
-----------------------------------------------------------------------------------------------*/	

	#first_paragraph h3 {
		padding: 0 0 5px 0;
		font-weight: normal;
		font-size: 34px;
		color: #ccc;
	}
	
	#first_paragraph p {
		padding: 0 30px 5px 0;
		width: 460px;
		line-height: 18px;
		font-weight: normal;
		font-size: 14px;	
		color: #666;
	}
	
	
/* 2.4	Content
-----------------------------------------------------------------------------------------------*/	
	
	#content h3 {
		margin: 0 0 -15px 0;
		padding: 15px 10px 5px 10px;
		font-weight: normal;
		font-size: 34px;
		color: #ccc;
	}
	
	#content .inside_content {
		padding: 15px 10px 20px 10px;
		width: 480px;
	}
		#content .inside_content p {
			padding: 0 30px 15px 0;
			line-height: 14px;
			font-weight: normal;
			font-size: 10px;	
			color: #666;
		}

		#content .inside_content ul {
			padding: 0 0 15px 25px;
			list-style: disc;
			line-height: 14px;
			font-weight: normal;
			font-size: 10px;	
			color: #666;
		}
		
		#content .inside_content h3 {
		margin: 0 0 0px 0;
		padding: 5px 10px 15px 0px;
		font-weight: normal;
		font-size: 34px;
		color: #ccc;
		}
	
	#content .column {
		float: left;
		padding: 15px 10px 20px 10px;
		width: 230px;
	}
		#content .column h3 {
			margin: 0;
			padding: 0 0 5px 0;
			font-weight: normal;
			font-size: 34px;
			color: #ccc;
		}
		#content .column h4 {
			padding: 0 0 5px 0;
			font-weight: bold;
			font-size: 12px;
			color: #000;
		}
		#content .column p {
			padding: 0 40px 5px 0;
			line-height: 14px;
			font-weight: normal;
			font-size: 10px;	
			color: #666;
		}
		#content .column.categories p {
			padding: 0 0 5px 0;
		}
		#content .column p.more {
			text-align: right;
			font-size: 12px;		
		}	
		

/* 2.5	Sidebar
-----------------------------------------------------------------------------------------------*/	
	
	#sidebar fieldset {
		position: relative;
		padding: 10px 15px 0 15px;
	}
		#sidebar fieldset h4 {
			padding: 0 0 8px 0;
			font-weight: bold;
			font-size: 11px;
			color: #666;
		}
		#sidebar fieldset ul {
			padding: 0;
		}
			#sidebar fieldset ul li {
				padding: 0 0 8px 0;
			}
				#sidebar fieldset ul li select {
					width: 165px;
				}
				#sidebar fieldset ul li input {
					width: 160px;
				}
		#sidebar fieldset a.btn_go {
			float: right;
			margin: -56px -5px 0 0;
			padding: 34px 0 0 20px;
			width: 18px;
			height: 14px;
			font-weight: bold;
			font-size: 12px;
			color: #000;
			border: none;
			background: url(../../image/site/woh/layout/btn_go.gif) no-repeat left top;
		}
	
	
/* 2.6	Content Footer
-----------------------------------------------------------------------------------------------*/	
	
	#content_footer ul#logos {
		position: relative;
		overflow: hidden;
		display: block;
		width: 555px;
		height: 150px;
		background: #D7D7D7;
	}
		#content_footer ul#logos li {
			position: absolute;
			left: 0;
			top: 0;
			height: 60px;
			line-height: 60px;
		}
		#content_footer ul#logos li#logos_fit {
			left: 37px;
			top: 4px;
			width: 110px;
		}
		#content_footer ul#logos li#logos_ironwod {
			left: 189px;
			top: 4px;
			width: 85px;
		}
		#content_footer ul#logos li#logos_jam {
			left: 315px;
			top: 3px;
			width: 85px;
		}
		#content_footer ul#logos li#logos_peek {
			left: 446px;
			top: 3px;
			width: 70px;
		}
		#content_footer ul#logos li#logos_polar {
			left: 32px;
			top: 79px;
			width: 120px;
		}
		#content_footer ul#logos li#logos_snapware {
			left: 162px;
			top: 79px;
			width: 135px;
		}
		#content_footer ul#logos li#logos_trudeau {
			left: 319px;
			top: 80px;
			width: 115px;
		}
		#content_footer ul#logos li#logos_fiona {
			left: 448px;
			top: 82px;
			width: 105px;
		}
			#content_footer ul#logos li a,
			#content_footer ul#logos li a span {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			#content_footer ul#logos li#logos_fit span {background: url(../../image/site/woh/layout/img_logos_fit.jpg) no-repeat left top;}
			#content_footer ul#logos li#logos_ironwod span {background: url(../../image/site/woh/layout/img_logos_ironwod.jpg) no-repeat left top;}
			#content_footer ul#logos li#logos_jam span {background: url(../../image/site/woh/layout/img_logos_jam.jpg) no-repeat left top;}
			#content_footer ul#logos li#logos_peek span {background: url(../../image/site/woh/layout/img_logos_peek.jpg) no-repeat left top;}
			#content_footer ul#logos li#logos_polar span {background: url(../../image/site/woh/layout/img_logos_polar.jpg) no-repeat left top;}
			#content_footer ul#logos li#logos_snapware span {background: url(../../image/site/woh/layout/img_logos_snapware.jpg) no-repeat left top;}
			#content_footer ul#logos li#logos_trudeau span {background: url(../../image/site/woh/layout/img_logos_trudeau.jpg) no-repeat left top;}
			#content_footer ul#logos li#logos_fiona span {background: url(../../image/site/woh/layout/img_logos_fiona.jpg) no-repeat left top;}
			
				#content_footer ul#logos li a:hover {background: none;}
				#content_footer ul#logos li a:hover span {background-position: left bottom !important;}
				
	
	#w_content_footer {
		overflow: hidden;
		clear: both;
	}
		#w_content_footer h3 {
			padding: 0 10px 5px 10px;
			font-weight: normal;
			font-size: 34px;
			color: #ccc;
		}
	
	#content_footer ul#team {
		overflow: hidden;
		padding: 7px 0 0 0;
	}
		#content_footer ul#team li {
			float: left;
			display: inline;
			position: relative;
			margin: 0 0 0 7px;
			padding: 119px 0 0 0;
			width: 100px;
		}
			#content_footer ul#team li p {
				text-align: right;
				line-height: 10px;
				font-weight: normal;
				font-size: 9px;
				color: #333;
			}
				#content_footer ul#team li p strong {
					font-weight: bold;
					font-size: 10px;
				}
			#content_footer ul#team li img {
				position: absolute;
				left: 0;
				top: 0;
			}
				
		
/* 2.7	Catalogue
-----------------------------------------------------------------------------------------------*/	

	#catalogue p.breadcrumb {
		padding: 0 0 10px 5px;
		font-weight: bold;
		font-size: 9px;
		color: #333;
	}
		#catalogue p.breadcrumb a {
			font-weight: normal;
			color: #333;
		}
		#catalogue p.breadcrumb a:hover {
			color: #cc0000;
		}
		
	#catalogue ul#list_catalogue {
		overflow: hidden;
		margin-bottom: -15px;
		width: 710px;
	}	
		#catalogue ul#list_catalogue li {
			float: left;
			position: relative;
			display: inline-block;
			margin: 0 25px 15px 0;
			padding: 140px 5px 10px 5px;
			width: 210px;
			background: #fff;
		}
		#catalogue ul#list_catalogue li.last {margin-right: 0;}
			#catalogue ul#list_catalogue li h3 {
				padding: 0 0 5px 0;
				height: 30px;
				font-weight: bold;
				font-size: 12px;
				color: #000;
			}
			#catalogue ul#list_catalogue li img {
				position: absolute;
				left: 0;
				top: 0;
			}
			#catalogue ul#list_catalogue li p {
				padding: 0 0 15px 0;
				font-family: sans-serif;
				font-weight: normal;
				font-size: 10px;
				color: #999;
			}
			#catalogue ul#list_catalogue li h4 {
				padding: 0 0 5px 0;
				font-weight: bold;
				font-size: 11px;
				color: #333;
			}
			#catalogue ul#list_catalogue li ul {
				padding: 0;
			}
				#catalogue ul#list_catalogue li ul li {
					float: none;
					display: block;
					margin: 0;
					padding: 0;
					width: auto;
					font-family: sans-serif;
					font-weight: normal;
					font-size: 12px;
					color: #999;
				}	
					#catalogue ul#list_catalogue li ul li strong {
						font-weight: normal;
						color: #333;
					}
			#catalogue ul#list_catalogue li p.btn_add_cart {
				position: absolute;	
				overflow: hidden;
				right: 10px;
				bottom: 8px;
				padding: 3px 2px 5px 4px;
				width: 84px;
				height: 22px;
				text-align: center;
				background: url(../../image/site/woh/layout/btn_add_cart.gif) no-repeat left top;
			}
				#catalogue ul#list_catalogue li p.btn_add_cart a {
					float: left;
					display: block;
					width: 84px;
					height: 22px;
					text-align: center;
					line-height: 22px;	
					font-weight: normal;
					font-size: 12px;
					color: #999;
				}
				
				
/* 2.8	Footer
-----------------------------------------------------------------------------------------------*/	
	
	#footer p {
		padding: 10px 0 3px 0;
		line-height: 9px;
		font-family: sans-serif;
		font-weight: normal;
		font-size: 9px;
		color: #666;
	}
	
	#footer ul {
		padding: 0 0 10px 0;
	}
		#footer ul li {
			float: left;
			padding: 0 3px 0 4px;
			line-height: 9px;
			font-family: sans-serif;
			font-weight: normal;
			font-size: 9px;
			color: #666;
			border-left: 1px solid #666;
		}
		#footer ul li.first {
			padding-left: 0;
			border-left: none;
		}
			#footer ul li a {
				color: #666;
			}
			#footer ul li a:hover {
				color: #cc0000;
			}
				
				
/* 2.9	Popup
-----------------------------------------------------------------------------------------------*/	

	.popup_product {
		position: absolute;
		left: 50%;
		top: 240px;
		margin-left: -240px;
		padding: 10px 0 0 0;
		background: url(../../image/site/woh/layout/bg_popup_top.png) no-repeat left top;
	}
		.popup_product .popup_product_bottom {
			padding: 0 0 10px 0;
			background: url(../../image/site/woh/layout/bg_popup_bottom.png) no-repeat left bottom;
		}
			.popup_product .popup_product_middle {
				padding: 0 15px 5px 11px;
				width: 459px;
				text-align: left;
				background: url(../../image/site/woh/layout/bg_popup_middle.png) repeat-y left top;
			}
			
	.popup_product .w_logo {
		z-index: 100;	
		position: absolute;
		left: 10px;
		top: 10px;
		padding: 0;
		width: auto;
		height: auto;
		background: none;
	}
	
	.popup_product a.btn_close_popup {
		z-index: 10;
		position: absolute;
		display: block;
		right: 10px;
		top: 6px;
		width: 16px;
		height: 16px;
		line-height: 16px;
		text-align: center;
		font-weight: bold;
		font-size: 12px;
		color: #000;
		background: #E7E3E3;
		text-indent: -9999em;
	}
		.popup_product a:hover.btn_close_popup {
			color: #cc0000;
			background: #cc0000;
		}
	.popup_product .popup_big_image {
		margin: 0 -15px 0 -10px;
	}
	
	.popup_product .right {
		float: right;
		padding: 0 0 10px 0;
		width: 250px;
	}
	.popup_product .left {
		float: left;
		padding: 20px 0 10px 0;
		width: 209px;
	}
	.popup_product .bottom {
		clear: both;
		width: 459px;
	}
	
	.popup_product h2 {
		height: 20px;
		line-height: 20px;
		font-weight: bold;
		font-size: 14px;
		color: #666;
	}
		.popup_product h2 em {
			font-style: normal;
			color: #363;
		}
	.popup_product h3 {
		padding: 0 0 5px 0;
		line-height: 14px;
		font-weight: normal;
		font-size: 12px;
		color: #cc0000;
	}
	.popup_product h4 {
		clear: both;
		padding: 0 0 5px 0;
		line-height: 14px;
		font-weight: bold;
		font-size: 12px;
		color: #666;
	}
	.popup_product p {
		padding: 0 0 15px 0;
		line-height: 14px;
		font-weight: normal;
		font-size: 10px;
		color: #666;	
	}
	.popup_product ul.details {
		padding: 0 0 15px 0;
		height: 1%;
	}
		.popup_product ul.details li {
			overflow: hidden;
			height: 14px;
			line-height: 14px;
			font-weight: normal;
			font-size: 12px;
			color: #cc0000;
		}
		.popup_product ul.details li.grey {
			color: #666;
		}
		.popup_product ul.details.more li {
			font-size: 11px;
		}
			.popup_product ul.details li span.left {
				float: left;
				display: block;
				padding: 0;
				width: 75px;
				height: 14px;
			}
	.popup_product fieldset ul li {
		padding: 0 0 5px 0;
	}
		.popup_product fieldset ul li select {
			width: 145px;
			font-size: 11px;
		}
	.popup_product a.btn_add_cart {
		float: right;
		display: block;
		margin-top: -30px;
		padding: 3px 2px 5px 4px;
		width: 84px;
		height: 22px;
		text-align: center;
		line-height: 22px;	
		font-weight: normal;
		font-size: 12px;
		color: #999;
		background: url(../../image/site/woh/layout/btn_add_cart.gif) no-repeat left top;
	}
	.popup_product ul.more_image {
		overflow: hidden;
		padding: 0 0 15px 0;
		height: 1%;
	}
		.popup_product ul.more_image li {
			float: left;
			margin: 0 6px 6px 0;
		}
	.popup_product ul.video_link {
		padding: 0;
	}
		.popup_product ul.video_link li {
			padding: 0 0 5px 0;
		}
			.popup_product ul.video_link li a {
				line-height: 14px;
				font-weight: normal;
				font-size: 12px;
				color: #33C;
			}
	.popup_product ul.related_product {
		overflow: hidden;
		height: 1%;
	}
		.popup_product ul.related_product li {
			float: left;
			margin: 0 6px 6px 0;
		}