/* 
///////////////////////////////////////
	Clipsal Australia Pty Ltd
	Author:    Kel Andersen
	Modified:  30/11/2009	
/////////////////////////////////////// */	

/* general layout */
#product 	 { float: left; width: 665px; /* width: 660px; */ }
#product-lhs { float: left; width: 400px; }
#product-rhs { float: left; width: 240px; margin: 0 0 0 15px; text-align: center; }

#product .line-dots {
	float: left;
	width: 650px;
	margin: 5px 0 0 0;
	padding: 15px 0 0 0;
	background-image: url(../images/border_dotted.gif);
	background-position: top left;
	background-repeat: repeat-x;
}

/* 
///////////////////////////////////////
	PRODUCT NAV
/////////////////////////////////////// */

#product-tab {
	float: left;
	width: 367px;
	height: 28px;
	margin: 15px 0 0 0;
	background-image: url(../images/nav_products.gif);
	background-position: top left;
	background-repeat: no-repeat;
}

#product-tab UL { 
	width: 650px;
	height: 28px; 
	margin: 0; 
	padding: 0; 
	list-style-type: none; 
	background-image: url(../images/border_dotted.gif);
	background-position: bottom left;
	background-repeat: repeat-x;
}

#product-tab UL LI { float: left; display: inline; height: 28px; margin: 0 4px 0 0 ; padding: 0;}

#product-tab UL LI, 
#product-tab UL A {
	display: block;
	height: 28px;
}

#product-tab UL LI A {
	text-indent: -9999px;
	text-decoration: none;
}

/* tab slices */
#product-tab #detailed, #product-tab #detailed-active 	{ width: 122px; }
#product-tab #list, #product-tab #list-active 			{ width: 95px; }
#product-tab #thumb, #product-tab #thumb-active 		{ width: 135px; }

/* tab slices - hover */
#product-tab #detailed A:hover, #product-tab #detailed-active A { background: transparent url(../images/nav_products.gif) 0 -28px no-repeat; }
#product-tab #list A:hover, #product-tab #list-active A 		{ background: transparent url(../images/nav_products.gif) -126px -28px no-repeat; }
#product-tab #thumb A:hover , #product-tab #thumb-active A	 	{ background: transparent url(../images/nav_products.gif) -225px -28px no-repeat; }


/* 
///////////////////////////////////////
	STATS
/////////////////////////////////////// */

#stats {
	float: left;
	width: 650px;
	margin: 15px 0 0 0;
	padding: 6px 0 0 0;
	font-size: 1.1em;
	background-image: url(../images/border_dotted.gif);
	background-position: top left;
	background-repeat: repeat-x;
}

#stats #found {
	float: left;
	width: 300px;
	margin: 0;
	padding: 0 0 0 115px;
	background-image: url(../images/title_search_found.gif);
	background-position: top left;
	background-repeat: no-repeat;
}

#stats #alt {
	float: right;
	width: 210px;
	margin: 0;
	padding: 0 5px 0 0;
	text-align: right;
}


/* 
///////////////////////////////////////
	PAGINATION
/////////////////////////////////////// */

#pagination {
	float: left;
	width: 650px;
	margin: 5px 0 0 0;
	padding: 6px 0 0 0;
	font-size: 1.1em;
	background-image: url(../images/border_dotted.gif);
	background-position: top left;
	background-repeat: repeat-x;
}

#pagination #disp {
	float: left;
	width: 180px;
	margin: 0 0 0 6px;
	padding: 0;
}

#pagination #num {
	float: right;
	width: 320px;
	margin: 0;
	padding: 0 5px 0 0;
	text-align: right;
}

#pagination #current { color: #d53040; }

/* 
///////////////////////////////////////
	SEARCH RESULTS
/////////////////////////////////////// */

#results {
	float: left;
	width: 650px;
	margin: 5px 0 0 0;
	padding: 15px 0 0 0;
	background-image: url(../images/border_dotted.gif);
	background-position: top left;
	background-repeat: repeat-x;
}

/* 
///////////////////////////////////////
	SEARCH - THUMBNAIL
/////////////////////////////////////// */

#results UL 	{ float: left; margin: 10px 0 0 0; padding: 0; list-style-type: none; }
#results UL LI 	{ overflow: hidden; /*display: block;*/ float: left; width: 650px; margin: 0 0 5px 0; padding: 10px 0; }
#results UL .colour-a { background-color: #ffffff; }
#results UL .colour-b { background-color: #fafafa; }

#results .pos 	{ float: left; width: 70px; margin: 0 0 0 10px; padding: 0; }
#results .img 	{ float: left; width: 90px; margin: 0; padding: 0; text-align: center; border: 1px solid #f3f3f3; background-color: #ffffff; }
#results .txt 	{ overflow: hidden; float: left; width: 430px; margin: 0 0 0 15px; }

/* typography styles */
#results H1 	{ margin: 0; padding: 0; font-size: 1.3em; }
#results H1 A 	{ color: #d53040; }
#results P 		{ padding: 0; font-size: 1.0em; }
#results .type 	{ float: left; margin: 5px 0; font-weight: bold; }

/* thumbnails */
#results .thumbnail { 
	overflow: hidden;
	float: left; 
	display: inline; 
	width: 92px;
	min-height: 120px;
	margin: 0 0 12px 12px;
	padding: 6px 10px;
	text-align: center;
	border: 1px solid #f3f3f3; 
	background-color: #fafafa;
}

#results .thumbnail P {
	word-wrap: break-word;
	width: 90px;
	margin: 0;
	padding: 4px 0 0 0;
}
#results .thumbnail:hover, #results .thumbnail:hover P A { color: #289bb8; background-color: #ebf4fb; }

/* 
///////////////////////////////////////
	SEARCH - GROUP
/////////////////////////////////////// */

#results .group { float: left; width: 310px; /*height: 150px;*/ margin: 0 0 0 10px; padding: 0; }
#results .group UL { float: left; margin: 0; padding: 0; }
#results .group UL LI {float: left; display: inline; width: 90px; margin: 0 7px 5px 0; padding: 0; }
#results .group-txt { float: left; width: 315px; margin: 0; padding: 10px 0 0 0;  }

/* 
///////////////////////////////////////
	SEARCH - CONTENT
/////////////////////////////////////// */

.alpha {
	float: left;
	width: 650px;
	margin: 15px 0 0 0;
	padding: 6px 0 0 0;
	font-size: 1.1em;
	background-image: url(../images/border_dotted.gif);
	background-position: top left;
	background-repeat: repeat-x;
}

.alpha UL { margin: 0 0 0 80px; padding: 0; list-style-type: none; }
.alpha UL LI { float: left; display: inline; margin: 0 6px; padding: 0; font-weight: bold; }
.alpha UL LI A { color: #289bb8; }
.alpha UL LI A:hover, A:focus { color: #d53040; }
.alpha UL LI #active { color: #d53040; }

#results #alpha { width: 650px; }
#results #alpha UL { overflow: hidden; float: left; width: 650px; margin: 0; padding: 0; }
#results #alpha UL LI { 
	float: left; 
	display: inline; 
	width: 325px;
	margin: 0;
	padding: 0;
	background-image: url(../images/border_dotted.gif);
	background-position: bottom left;
	background-repeat: repeat-x;
}

/* alpha - linkage */
#results #alpha UL LI A { display: block; padding: 5px 10px 7px 10px; }
#results #alpha UL LI A:hover { color: #289bb8; background-color: #ebf4fb; }


/* 
///////////////////////////////////////
	PRODUCT - LIST VIEW
/////////////////////////////////////// */

#listview { float: left; width: 650px; }
#listview UL { margin: 0; padding: 0; list-style-type: none; }
#listview UL LI { 
	float: left; 
	width: 650px; 
	margin: 15px 0 0 0; 
	padding: 0 0 10px;
	background-image: url(../images/border_dotted.gif);
	background-position: bottom left;
	background-repeat: repeat-x;
}

/* thumbnail preview */
#listview .thumb { float: left; width: 115px; text-align: center; }
#listview .thumb IMG { padding: 3px; border: 1px solid #f3f3f3; }

#listview .info { float: left; width: 525px; margin: 0 0 0 10px; }

#listview .txt { 
	clear: both; 
	float: left; 
	width: 100%; 
	background-image: url(../images/border_dotted.gif);
	background-position: top left;
	background-repeat: repeat-x;
}

#listview .col-a { float: left; width: 110px; padding: 3px 0 3px 5px; font-weight: bold; }
#listview .col-b { float: left; width: 390px; padding: 3px 0 3px 0;}
#listview P	{ padding: 2px 0; font-size: 1.0em; line-height: 1.3em; }
#listview TABLE { font-size: 0.9em; } /* reset sizing */


/* 
///////////////////////////////////////
	PRODUCT - DETAILED VIEW
/////////////////////////////////////// */

#product .title {
	float: left;
	width: 100%;
	background-image: url(../images/border_dotted.gif);
	background-position: bottom left;
	background-repeat: repeat-x;
}

#product .title H1 { float: left; }
#product .title H2 { float: left; line-height: 1.4em; padding: 0.35em 0; }
#product .title IMG { float: left; }

#product P { clear: both; }

/* colours */
#product .colour-range UL { margin: 6px 0 0 0; padding: 0; list-style-type: none; }
#product .colour-range UL LI { float: left; display: inline; }
#product .colour-range UL LI span { 
	float: left;
	width: 28px;
	height: 12px;
	margin: 0 6px 2px 6px;
	padding: 0;
	border: 1px solid #e0e0e0;
}

/* pricing */
#product .pricing { width: 400px; margin: 5px 0 5px 0;}

#product .pricing #title { background-color: #f4f4f4; }
#product .pricing #sub 	 { background-color: #fafafa; }
#product .pricing .pack  { width: 45px;  }
#product .pricing .colour { width: 45px; text-align: left; }

#product .pricing TR TH {  padding: 5px 5px 5px 0; text-align: right;  border-bottom: 1px solid #ededed;  }
#product .pricing TR TH, #product .pricing TR TD { font-size: 1.1em; height: 1.4em; }
#product .pricing TR TD { padding: 3px 5px 3px 0; text-align: right; border-bottom: 1px solid #ededed; border-top: 1px solid #ffffff; }

/* column colors */
#product .pricing .colour-a { background-color: #fafafa; }
#product .pricing .colour-b { background-color: #ebf4fb; }

td.colour-b, .pricing tbody tr:hover { color: #6f9fab; background-color: #ebf4fb; }

/* colour block */
#product .colour-range TR TD span { 
	display: block;
	width: 28px;
	height: 12px;
	margin: 2px 6px 2px 6px;
	padding: 0;
	text-align: left;
	border: 1px solid #e0e0e0;
}

/* downloads */
#product #brochures UL { margin: 10px 0 0 0; padding: 0; list-style-type: none; }
#product #brochures UL LI { float: left; margin: 0 0 18px 0; padding: 0; }
#product #brochures IMG { float: left; margin: 0 0 0 8px;  }
#product #brochures .txt { float: left; width: 310px; margin: 0 0 0 15px; }
#product #brochures P { padding: 0; font-size: 1.0em; }

#product #brochures .download { 
	margin-top: 5px; 
	padding: 0 0 0 10px;
	background-image: url(../images/li_arrow.gif);
	background-position: 0 0.2em;
	background-repeat: no-repeat;
}

/* 
///////////////////////////////////////
	PRODUCT - DETAILED VIEW - EXTRAS
/////////////////////////////////////// */

#product #preview {
	overflow: hidden;
	width: 240px;
	height: 188px;
	margin: 20px 0 0 0;
	padding: 3px 0 0 0;
	text-align: center;
}

#product #preview img { margin-left: -5px; }

#product #energy-efficiency {
	float: left;
	position: absolute;
	width: 55px;
	height: 50px;
	margin: 110px 0 0 5px;
	background-image: url(../images/logo_energy_efficiency.png);
	background-position: top left;
	background-repeat: no-repeat;
}


#product #category {
	overflow: hidden;
	width: 240px;
	height: 29px;
	margin: 8px 0 0 0px;
	padding: 5px 0 0 0;
	text-align: center;
}

/* product options */
#product #options { 
	overflow: hidden;
	float: left; 
	width: 218px;
	height: 32px;
	margin: 8px 0 0 10px;
	padding: 4px 0 0 0;
	background-image: url(../images/bg_products_options.gif);
	background-position: top left;
	background-repeat: no-repeat;
}
	
#product #options UL { 
	width: 218px;
	height: 32px;
	margin: 0; 
	padding: 0 0 0 60px; 
	list-style-type: none; 
	background-image: url(../images/title_product_options.gif);
	background-position: 8px 1px;
	background-repeat: no-repeat;
}

#product #options UL LI { float: left; display: inline; height: 24px; margin: 0 6px 0 0; padding: 0; }
#product #options UL LI, #product #options UL A { display: block; height: 24px;  }
#product #options UL A  { text-indent: -9999px; text-decoration: none; }

#product #options #brochure { width: 21px; background-image: url(../images/ico_products_brochure.gif); }
#product #options #barcode 	{ width: 23px; background-image: url(../images/ico_products_barcode.gif); }
#product #options #xml 		{ width: 18px; background-image: url(../images/ico_products_xml.gif); }
#product #options #model 	{ width: 20px; background-image: url(../images/ico_products_models.gif); }
#product #options #print 	{ width: 20px; background-image: url(../images/ico_products_print.gif); }
#product #options #help 	{ width: 14px; background-image: url(../images/ico_products_help.gif); }

#product #options #brochure:hover,
#product #options #barcode:hover,
#product #options #xml:hover,
#product #options #model:hover,
#product #options #print:hover,
#product #options #help:hover{ background-position: bottom left; }


/* features */
#product .features { overflow: hidden; float: left; width: 218px; margin: 8px 0 0 10px; }

#product .features .top,
#product .features .bottom {
	float: left;
	width: 218px;
	height: 7px;
	background-position: top left;
	background-repeat: no-repeat;
}

#product .features .top { font-size: 0em; background-image: url(../images/bg_products_top.gif); }
#product .features .bottom { height: 12px; background-image: url(../images/bg_products_bottom.gif); }

#product .features .content {
	float: left;
	width: 218px;
	text-align: left;
	background-image: url(../images/bg_products_content.gif);
	background-position: top left;
	background-repeat: repeat-y;
}

#product .features .content img { vertical-align: middle; }

/* lists */
#product .features .content UL { float: left; margin: 0; padding: 0 0 5px 15px; list-style: none; }
#product .features .content UL LI { 
	float: left;  
	width: 80px; 
	margin: 0 5px 0 0; 
	padding: 0 0 0 10px; 
	background-image: url(../images/li_arrow.gif);
	background-position: 0 0.2em;
	background-repeat: no-repeat;
}


/* 
///////////////////////////////////////
	BUTTONS
/////////////////////////////////////// */

#product .title .btn-similar {
	float: right;
	width: 75px;
	height: 14px;
	margin: 6px 5px 0 0;
	background-image: url(../images/btn_view_similar.gif);
	background-position: top left;
	background-repeat: no-repeat;
}

/* hover state */
#product .title .btn-similar:hover { background-position: bottom left; }