@charset "utf-8";
header {background:#EDF5EB;}
header img {margin: 6px 10px 4px 10px;}
header img#contact {float: right; margin-top:8px;}

nav.main_menu {float:left; height: 20px; width: 100%; padding: 1px 0px 4px 0px; background: #D5E0D2;}
nav.main_menu ul li {list-style-type: none; padding: 0px;}
nav.main_menu ul li a {display: block; padding: 12px 0px 12px 0px; color: #5B5B5B;}
nav.main_menu ul li a.lit {color: #00F;}
nav.main_menu ul li img {margin: 2px 0px 0px 4px}
nav.main_menu ul li ul {display: none;}
nav.main_menu ul li ul li a {padding: 2px 4px 2px 4px;}
nav.main_menu ul li ul li a img, nav.main_menu ul li ul li ul li a img {float: right; margin-right: 8px;}
ul.main_left {float: left; margin: 4px 0px 0px 0px; padding: 0px;}
ul.main_left li {float: left; margin: -8px 0px 0px 24px;}
ul.main_left li ul li ul {margin: -30px 0px 0px 206px;}
ul.main_right {float: right; margin: 4px 0px 0px 0px; padding: 0px;}
ul.main_right li {float: right; margin: -12px 24px 0px 0px;}

span.prod {display: block; float: left; width: 97%; max-width: 390px; height: 120px; margin: 0px 0px 8px 0px; padding: 4px; border: 1px #777 solid; 
	border-radius: 8px; text-align: justify;}
img.prd {float: left; width: 60px; height: 60px; margin: 2px 4px 0px 2px; border:1px transparent solid;}
span.hdg {font-size: 11px; font-weight: bold; margin: 0px; text-align:left; color: #5B5B5B; display: block;}
span.des {font-size: 10px; margin: 2px 0px 0px 0px; text-align: justify; display: block; line-height: 12px; }
span.foot {display:inline-block; width: 98%; margin: 10px 0px 0px 4px; font-size: 12px;}
span.prc {font-size: 16px; font-weight: bold; margin: 0px 4px 0px 0px;}
a.cta {float: right; margin: -4px 0px 0px 0px; padding: 3px 12px 5px 12px; font-size: 12px; color: #0000FF; background: #F9F9FF; 
	border: 1px solid #1145E3; border-radius: 4px;}
a.cta:hover {color: #88AAFF; border: 1px #88AAFF solid; background-color:#FCFCFF;}

@media (max-width : 1400px){
	nav.main_menu {margin-top:-2px; height: 34px;}
	nav.main_menu ul li ul li a {padding: 8px 6px 8px 6px;}
	ul.main_right, ul.main_left {margin: 0px;}
	ul.main_left li {margin: 0px 0px 0px 18px;}
	ul.main_right li {margin: 0px 18px 0px 0px;}
	ul.main_left li ul li ul {margin: -42px 0px 0px 206px;}
/*	a.cta {padding: 9px 12px 9px 12px;}*/
}

@media (min-width: 730px){
	header {height:100%;}
}

@media (max-width: 730px){
	header img#logo {width: 41%;}
	header img#contact {width: 28%;}
}

@media (max-width: 430px){
	header {background:#FFF;}
	nav.main_menu {margin-top: 8px; background: #FFF;}
	#op_enq {width: 40px; height: 40px; padding: 0; background:url("../images/buttons/enquiry_but.gif")}
	#op_acts {width: 40px; height: 40px; padding: 0; background:url("../images/buttons/accounts_but.gif")}
	#op_cart {width: 40px; height: 40px; padding: 0; background:url("../images/buttons/cart_but.gif")}
	#op_quote {width: 40px; height: 40px; padding: 0; background:url("../images/buttons/quote_but.gif")}
	#op_menu {width: 40px; height: 40px; padding: 0; background:url("../images/buttons/menu_but.gif")}
}

@media (max-width: 320px){
	main {width: 320px;}
	header {height:50px;}
	header img#contact {width: 45%;}
}