/*==============================================================================
 * Global CSS
 * 
 * @author caphun (Ca Phun Ung), Yelotofu
 =============================================================================*/
 
/*------------------------------------------------------------------------------
 * Customised reset styles
 -----------------------------------------------------------------------------*/
	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,
	dl, dt, dd, li, fieldset, form, label, legend, table, caption, 
	tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		background: transparent;
	}
	
	:focus {
		outline: 0;
	}
	
	a:focus, 
	label:focus { 
		outline: 1px dotted #CCC;
	}
	
	body {
		line-height: 1;
	}
	
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	caption, th, td {
		text-align: left;
		font-weight: normal;
		vertical-align:top;	
		padding: 5px;	
	}
	
	th {
		background: #CFCFCF;
		font-weight: bold;
	}
	
	td {
		border-bottom: 1px solid #CFCFCF;
	}
	
	blockquote:before, blockquote:after, 
	q:before, q:after {
		content: "";
	}
	
	blockquote, q {
		quotes: "" "";
	} 

/*------------------------------------------------------------------------------
 * Common styles
 -----------------------------------------------------------------------------*/ 	
	body {
		font: 62.5%/1.25 Arial;
		background: #540000 url(../images/body_bg.png) repeat-x;
		color: #B0050B;
	}
		
	a {
		color: #5E0000;
		text-decoration: none;
	}
	
	a:hover {
		text-decoration: underline;
	}
	
	
	h1, h2, h3, h4, h5, h6, p, ul, ol {
		margin-bottom: 1em;
	}

	/*img {
		border: 1px solid #A5A5A5;
	}*/	
	
	.hide {
		position: absolute;
		left: -9999px;
	}

	.grid {
		margin: 0;
	}
	
	.grid li {
		display: -moz-inline-stack; /* For FF2 */
		display: inline-block;		
		vertical-align: top;
	}
		
	.grid li .c {
		position: relative; /* For FF2 */
	}
	
	.separator {
		border-bottom: 1px solid #CCC;
		margin-bottom: 1em;
	}
	
	.button {
		border: 1px solid #969696;
		background: #F4F4F4;
		color: #313131;
		font-weight: bold;
		font-size: 1.1em;
		font-family: Arial, Helvetica, sans-serif;
		cursor: pointer;
		padding: 5px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		border-radius: 4px;
	}
	
	.button:hover {
		background: #FAFAFA;
		color: #111;
		text-decoration: none;
	}
	
	.form-table dt {width:15em;text-align:right;margin-right:1em;}
	.form-table dd {margin-left:5px; margin-bottom:1em;}
	.form-table .note {display:block;margin-bottom:0.5em;font-size:0.9em;}
	.form-table label {font-weight:bold;}
	
	/* Here's where we define the side-by-side layout */
	.form-table dl {clear:both;}
	.form-table dt {float:left;clear:left;}
	.form-table dd {overflow:hidden;clear:right;height:1%;}
	.form-table dd.x-form-clear {clear:both;}
	

/*------------------------------------------------------------------------------
 * Global top down styles
 -----------------------------------------------------------------------------*/ 			
	#container {
		position: relative;
		width: 884px;
		margin: 0 auto;
		background: url(../images/header_basket_status.png) no-repeat 100% 7px;
	}
		
	#header {
		height: 103px;
		background: url(../images/content_start.png) no-repeat left bottom;
		color: #000;
		font-size: 1.4em;
	}
	
	#header img.badge-iso9001 {
		position: absolute;
		left: 500px;
		top: 0px;
	}
	
	#header .basketstatus {
		width: 177px;
		height: 106px;
		position: absolute;
		top: 7px;
		right: 0;
	}
	
	.basketstatus {
		color: #700000;
		font-size: .85em;
	}
	
	.basketstatus-content {
		padding: 50px 5px 0;
		text-align: center;
		display: block;
	}

	#logo {
		margin: 20px 30px 0;
		border: none;
	}
	
	#loginstatus {
		position: absolute;
		top: 36px;
		right: 0;	
	}
	
	#loginstatus .user {
		margin-right: 3em;
	}
	
	#navwrapper {
		background: #FFF;
		color: #000;
	}
	
	#navigation {
		overflow: hidden;
		margin: 0 13px;
		background: url(../images/nav_bg.png) repeat-x;
	}

	#navigation ul {
		width: 851px;
		margin: 0;
		padding: 0;
		padding-right: 7px;
		float: left;
		background: url(../images/nav_end.png) no-repeat right top;
	}

	#navigation li {
		float: left;
		list-style: none;
		padding-left: 2px;
		background: url(../images/nav_pipe.png) no-repeat;
	}
	
	#navigation li.first {
		padding-left: 9px;
		background: url(../images/nav_start.png) no-repeat;
	}
	
	#navigation a {
		display: block;
		margin: 0 30px;
	}
		
	#navigation .navhome a {
		width: 39px;
		height: 31px;
		background: url(../images/nav_home.png) no-repeat;
	}

	#navigation .navabout a {
		width: 62px;
		height: 27px;
		background: url(../images/nav_aboutus.png) no-repeat;
	}
			
	#navigation .navcontact a {
		width: 81px;
		height: 31px;
		background: url(../images/nav_contactinfo.png) no-repeat;
	}

	#navigation .searchbox {
		float: right;
	}
	
	#navigation .searchbox form {
		margin-left: 30px;
		background: transparent url(../images/nav_searchbox_bg.png) repeat-x;
	}
	
	#navigation .searchbox label {
		display: block;
		float: left;
		width: 120px;
		height: 31px;
		background: url(../images/nav_searchbox_lbl.png) no-repeat;
	}
	
	#navigation .searchbox input {
		width: 281px;
		float: left;
		padding: 7px 2px 0;
		border: none;
		background: none;
		color: #515151;
		font-family: Arial;
	}

	#navigation .searchbox button {
		border: none;
		width: 28px;
		height: 31px;
		background: url(../images/nav_searchbox_btn.png) no-repeat;
	}
		
	#main {
		position: relative;
		overflow: hidden;
		padding: 235px 10px 0;
		min-height: 460px;
		background: #FFF url(../images/home_comp.jpg) no-repeat center 15px;
		color: #000;
		font-size: 1.2em;
	}
	
	#breadcrumb {
		margin: .5em 0 1em;
	}
	
	#primarycontent {
		width: 620px;
		float: right;
		clear: right;
	}
	
	#sidebar {
		width: 221px;
		float: left;
		clear: left;
	}
		
	#footer {
		padding-top: 33px;
		background: url(../images/content_end.png) no-repeat left top;
	}
	
	#footer .footernav {
		float: right;
		margin-right: 10px;
	}
	
	#footer .footernav a {
		color: #FFF;
		text-decoration: none;
		padding: 0 15px;
	}
	
	#footer .copyright {
		margin-left: 10px;
	}

/*------------------------------------------------------------------------------
 * Category listing
 -----------------------------------------------------------------------------*/	
	.category-list li {
		width: 114px;
		text-align: center;
		margin: 1em 1.5em;
	}

	.category-list li a {
		text-align: center;
	}
	
	.category-list li span {
		display: block;
		height: 111px;
		margin-bottom: .5em;
	}
	
	.category-list li img {
		border: none;
	}

/*------------------------------------------------------------------------------
 * Part view
 -----------------------------------------------------------------------------*/		
	.part-view {
		overflow: hidden;
		margin-top: 4em;	
	}
	
	.part-bttnpanel {
		position: absolute;
		right: 13px;
		top: 2em;
	}
	
	.part-bttnpanel img {
		border: none;
	}
	
	.part-image {
		float: left;
		width: 220px;
		position: relative;		
	}
	
	.part-image img {
		border: 1px solid black;
		width:220px;
	}
	
	.part-detail {
		float: right;
		width: 360px;
	}
	
	.part-detail .gap {
		margin-bottom: 2.5em;
	}
	
	.part-detail .btn-addtobasket {
		background: url(../images/btn_addtobasket.png) no-repeat;
		width: 134px;
		height: 35px;
		border: none;
	}
	
/*------------------------------------------------------------------------------
 * Search results
 -----------------------------------------------------------------------------*/
	.results-filter {
		background: #E9EDF0;
		overflow: hidden;
		padding: .5em 1em;
		margin-bottom: 1em;
	}

	.results-filter h2 {
		float: left;
		margin: 0;
		width: 50%;
	}
	
	.results-filter p {
		float: right;
		margin: 0;
		margin-top: .25em;
	}
	
	.results-filter .selected {
		font-weight: bold;
	}
	
	.results-list {
		margin-bottom: 1em;	
	}
		
	.results-list th {
		font-weight: bold;
		border-bottom: 1px solid #DADADA;
	}

	.results-list td {
		border-bottom: 1px dotted #909090;
		padding: 5px 0;
	}
	
	.results-list img {
		border: 1px solid #A5A5A5;
	}
	
	.results-paginator {
		text-align: right;
	}

/*------------------------------------------------------------------------------
 * Login page
 -----------------------------------------------------------------------------*/
	#loginform fieldset {
		width: 36.5em;
		position: relative;
		margin-left: 10em;
		margin-top: 2em;
	}
	
	#loginform label {
		width: 10em;
		text-align: right;
		font-weight: bold;
		float: left;
		margin-right: 1em;
	}
	
	#loginform input {
		width: 300px;
	}
	
	#loginform .buttonpanel {
		text-align: right;
	}
	
	#loginform .buttonpanel a {
		font-size: .9em;
	}
	
	#loginform button {
		background: url(../images/login_login_btn.png) no-repeat;
		width: 61px;
		height: 24px;
		border: none;
	}
	
		
/* =.subnav
 -----------*/ 
.subnav {
	background: #6e6e6e;
	padding: 0;
	padding-bottom: 10px;
}

.subnav h2 {
	background: url(../images/sidebar_heading.png) no-repeat;
	width: 221px;
	height: 35px;
	margin-bottom: 0;
}

.subnav a {
	color: #fff;
	padding: 5px 10px;
	display: block;
	background: url(../images/subnav_arrow.gif) no-repeat 90% center;
}

.subnav a:hover {
	text-decoration: none;
}

.subnav a:hover, .subnav a.selected {
	background-image: url(../images/subnav_arrow_selected.gif);
}

.subnav ul ul a {
	color: #000;
	padding-left: 25px;
}

.subnav ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.subnav ul ul {
	background: #cfcfcf;
}

html.js .subnav ul ul {
	display: none;
}

.subnav li {
	background: url(../images/subnav_level0_sep.gif) no-repeat center bottom;
}

.subnav li li {
	background: none;
	border-bottom: 1px solid #c1c1c1;	
}

.subnav li li a:hover, .subnav li li a.selected {
	background-image: url(../images/subnav_arrow.gif);
}