@charset "utf-8";
/*
------------------------------------------------------------------------
Theme Name:Safety Effect
Author:Ndee Siswandhi
Author Company URI:http://www.avasoft.net
------------------------------------------------------------------------

-----------------------------------------
RESET
----------------------------------------- 
*/
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td{margin:0; padding:0}
fieldset, img{border:0}
address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal}
ol, ul, li{list-style:none}
caption, th{text-align:left}
h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal}
q:before, q:after{content:''}

strong{font-weight:bold}
em{font-style:italic}
a img{border:none}

h1, h2, h3, h5, h5, h6{font-weight:bold}
.clear {clear:both; height:0px;}
/*
-----------------------------------------
LAYOUT
----------------------------------------- 
*/
body {
	font: 12px Arial, Helvetica, sans-serif;
	background: #ffcd33;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
}
#container {
	width: 830px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}
#header {
	margin:0 15px;
	background:#fff;
	position:relative
}
.div_imgheader {
	position:relative;top:0;left:0
	}
#mainContent {
	padding: 0;
	background:url(images/menu_bar.gif) no-repeat top;
}

/*
-----------------------------------------
MENU
----------------------------------------- 
*/
#mainContent .menu{
	text-align:center;
	padding-top:14px;
}
#mainContent .menu ul{
	margin:0;
	padding:0;
	list-style:none;
}
#mainContent .menu li{
	margin:0;
	padding:0;
	list-style:none;
	display:inline-table;
}
#mainContent .menu li a{
	font-size:16px;
	font-weight:bold;
	color:#000;
	text-decoration:none;
	padding:0 5px;
	line-height:20px;
}
#mainContent .menu li a:hover{
	color:#ed2224;
	text-decoration:none;
}

/*
-----------------------------------------
WRAPPER
----------------------------------------- 
*/
#mainContent .wrapper{
	background: url("images/wrapper_bg.gif") no-repeat scroll center top #989898;
    height: auto;
    margin: 0 15px;
    overflow: hidden;
    width: 800px;
}
#mainContent .wrapper .l-header{
	float:left;
	width:396px;
	padding:30px 0px 0px 20px;
	background:url(images/bground_lheader.gif) no-repeat right top;
}
#mainContent .wrapper .r-header{
	float:right;
	width:384px;
	height:286px;
}
#mainContent .wrapper .l-header .search{

}
#mainContent .wrapper .l-header .product{
	width:396px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	padding-top:0px;
}

/*
-----------------------------------------
CONTENT
----------------------------------------- 
*/
/* ALL MAIN2 add by Ricky L "Retail Site need to be in differenct Class -background problem-"*/
#mainContent .wrapper .main{
	clear:both;
	width:800px;
	/*background:url(images/bground_main.gif) no-repeat top right;*/ /*Distubring images*/
}
#mainContent .wrapper .main2{
	clear:both;
	width:800px;
	/*background:url(images/bground_main.gif) no-repeat top right;*/
}
#mainContent .wrapper .main .content{
	width:396px;
	padding:20px;
	float:left;
}
#mainContent .wrapper .main2 .content{
	width:396px;
	padding:20px;
	float:left;
}
#mainContent .wrapper .main ul li{
	list-style:disc outside;
	margin-left:20px;
	padding:10px 0;
}
#mainContent .wrapper .main2 ul li{
	list-style:disc outside;
	margin-left:20px;
	padding:10px 0;
}
#mainContent .wrapper .main ul li ul li{
	text-indent:-8px;
}
#mainContent .wrapper .main2 ul li ul li{
	text-indent:-8px;
}
#mainContent .wrapper .main ol li{
	list-style:decimal outside;
	margin-left:20px;
	padding:10px 0;
}
#mainContent .wrapper .main2 ol li{
	list-style:decimal outside;
	margin-left:20px;
	padding:10px 0;
}

/*
-----------------------------------------
NEWS
----------------------------------------- 
*/
#mainContent .wrapper .news{
	width:300px;
	margin-right:20px;
	margin-bottom:20px;
	margin-top:30px;
	padding:20px;
	background:#cdcccb;
	float:right;
}
#mainContent .wrapper .news td{
	padding:5px;
}

/*
-----------------------------------------
WIDE CONTENT
----------------------------------------- 
*/
#mainContent .wrapper .main .w-content{
	float: left;
    padding: 20px 20px 20px 0;
    width: 550px;
}
#mainContent .wrapper .main2 .w-content{
	float: left;
    padding: 20px 20px 20px 0;
    width: 550px;
}
#mainContent .wrapper .main .w-contentother{
	width:760px;
	padding:20px;
}
#mainContent .wrapper .main2 .w-contentother{
	width:760px;
	padding:20px;
}
#mainContent .wrapper .main .w-contentother td{
	padding:2px;
}
#mainContent .wrapper .main2 .w-contentother td{
	padding:2px;
}
#mainContent .wrapper .main .w-content .l-content{
	float:left;
	width:180px;
	margin-right:20px;
}
#mainContent .wrapper .main2 .w-content .l-content{
	float:left;
	width:180px;
	margin-right:20px;
}
#mainContent .wrapper .main .w-content .r-content{
	float:left;
	width:540px;
	margin:0;
}
#mainContent .wrapper .main2 .w-content .r-content{
	float:left;
	width:540px;
	margin:0;
}
#mainContent .wrapper .main .w-content .r-content .prod-detail{
	width:540px;
	margin:0;
}
#mainContent .wrapper .main2 .w-content .r-content .prod-detail{
	width:540px;
	margin:0;
}
/*add by Stef 20110104 */
#mainContent .wrapper .main .w-content .r-content-section {
    background: none repeat scroll 0 0 #FFFFFF;
    float: right;
    margin: 20px 0 0;
    padding: 0px;
    width: 550px;
}
#mainContent .wrapper .main2 .w-content .r-content-section{
	
	background: none repeat scroll 0 0 #FFFFFF;
    float: right;
    margin: 20px 0 0;
    width: 550px;
}
#mainContent .wrapper .main .w-content .r-content-section .prod-detail{
	margin:0;
	padding: 0px; /*edit by RickyL 20130318*/
}
#mainContent .wrapper .main2 .w-content .r-content-section .prod-detail{
	margin:0;
	padding-top: 10px; /*edit by RickyL 20130318*/
}
/*end */
#mainContent .wrapper .main .w-content .r-content .prod-detail td{
	padding:10px;
}
#mainContent .wrapper .main2 .w-content .r-content .prod-detail td{
	padding:10px;
}
#mainContent .wrapper .main .w-content .r-content .cat-list{
	width:540px;
	margin-top:10px;
}
#mainContent .wrapper .main2 .w-content .r-content .cat-list{
	width:540px;
	margin-top:10px;
}
/*add by Stef 20110104 */
#mainContent .wrapper .main .w-content .r-content-section .cat-list-section{
	margin-top:10px;
	padding:0 20px
}
#mainContent .wrapper .main2 .w-content .r-content-section .cat-list-section{
	margin-top:10px;
	padding:0 20px
}
/*end */
#mainContent .wrapper .main .w-content .r-content .cat-list td{
	padding:0px;
	vertical-align:top;
}
#mainContent .wrapper .main2 .w-content .r-content .cat-list td{
	padding:0px;
	vertical-align:top;
}

/* add by stef - for Retail Category */
#mainContent .wrapper .main .w-content .r-content .cat-list .retailcat {
	float:left;
	padding-right:20px;
}
#mainContent .wrapper .main2 .w-content .r-content .cat-list .retailcat {
	float:left;
	padding-right:20px;
}

#mainContent .wrapper .main .w-content .r-content .cat-list .retailcat li{
	list-style-type:none;
	float:left;
}
#mainContent .wrapper .main2 .w-content .r-content .cat-list .retailcat li{
	list-style-type:none;
	float:left;
}

#mainContent .wrapper .main .w-content .r-content-section .cat-list-section .retailcat {
	float:left;
	padding-right:20px;
}
#mainContent .wrapper .main2 .w-content .r-content-section .cat-list-section .retailcat {
	float:left;
	padding-right:20px;
}

#mainContent .wrapper .main .w-content .r-content-section .cat-list-section .retailcat li{
	list-style-type:none;
	float:left;
}
#mainContent .wrapper .main2 .w-content .r-content-section .cat-list-section .retailcat li{
	list-style-type:none;
	float:left;
}
/* end */

/*
-----------------------------------------
FOOTER
----------------------------------------- 
*/
#footer{
	width:800px;
	margin:0 15px;
	background:#000;
	position:static;
	font-size:12px;
}
#footer .f-pane{
	color:#fff;
	padding:10px 20px;
	text-align:center;
}
#footer .copy{
	color:#fff;
	padding:10px 5px;
	width:350px;
	float:left;
}
#footer .copy3m{
	color:#fff;
	padding:10px 5px;
	width:350px;
	float:right;
	text-align:right;
}