/*
media solutions network
http://www.msn-asia.com
Stylesheet for BOC
*/

/*
body background: #e5f4ff;
content width (include border): 984px;
content bg: #70c4ff;
content border: #30a9ff;
text color: #01528b (middle blue); #FFFFFF; #cc0000 (darker red);
nav height: 58px;
flash size: 642 x 384;
*/
/* Reset CSS */
          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, ol, ul, li,
          fieldset, form, label, legend
                    {
          	margin: 0;
          	padding: 0;
          	border: 0;
          	outline: 0;
          	font-weight: inherit;
          	font-style: inherit;
          	font-size: 100%;
          	font-family: inherit;
          	background-image: none;
          }
          body {
          	line-height: normal;
          	color: black;
          	background: white;
          }
          ol, ul {
          	list-style: none;
          }
          table {
          	border-collapse: collapse;
          	border-spacing: 0;
          }
          caption, th, td {font-weight: normal;}
          blockquote:before, blockquote:after,
          q:before, q:after {
          	content: "";
          }
          blockquote, q {quotes: "" "";}

          .boxText { font-family: Tahoma, Arial, sans-serif; font-size: 10px; }
          .errorBox { font-family : Tahoma, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }
          .stockWarning { font-family : Tahoma, Arial, sans-serif; font-size : 10px; color: #cc0033; }
          .productsNotifications { background: #f2fff7; }
          .orderEdit { font-family : Tahoma, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

body {
	background: #ffffff url(images/bg.jpg) top left repeat-x;
	margin: 0px 0px;
	font-family: tahoma, arial, verdana;
	font-size: 62.5%;
	color: #333333;
}
a {
	color: #0066CC;
	text-decoration: none;
}
a:hover {color: #660000;}
/* Clearfix */
.clear	{
	clear:both;
	height: 7px;
}
.clearfix {
	clear: both;
	display: block;
	content: ".";
	height: 0px;
	visibility: hidden;
}
*html .clearfix {display: none;}
#media {
  margin: 0px auto 0px auto;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
}
#inside {
  background: url(images/bg_content.jpg) repeat-y top left;
  width: 980px;
}
#content {
  background: url(images/bg_header.jpg) no-repeat top left;
  width: 980px;
}
#header {
  width: 972px;
  margin: 0px 4px 0px 4px;
  text-align: left;
}
	#banner {
	float: left;
	width: 616px;
	height: 80px;
	}
	#brands {
	float: left;
	width: 355px;
	height: 80px;
	}
	#cssmenu {
		width: 971px;
		height: 31px;
		background: url(images/nav/nav_bg.gif) repeat-x top left;
		margin-bottom: 5px;
	}
		#nav {
		width: 786px;
		float: left;
		}
		#nav a {
			display: block;
			color: #FFFFFF;
			cursor: default;
		}
		#nav li {
			position: static !important; /* for Mozilla */
			position: relative; /* for IE */
			float: left;
			text-align: left;
			padding: 0px;
		}
		#nav li ul {
			display: none;
			position: absolute;
			border-bottom: 1px solid #8f8f8f;
			top: 12px;
			left: 0;
			padding:0;
		}
		#nav li>ul {left: auto;}
		#nav li:hover ul,
		#nav li.over ul {display: block;}
		#nav li:hover div,
		#nav li.over div {
			z-index: 99;
			height: 31px;
		}
		/* global navigation images - off state */
		#nav li div {
			height: 31px;
			background-position: 0 -31px;
			background-repeat: no-repeat;
		}
		/* global navigation images - on state */
		#nav li a {
			height: 31px;
			background-position: 0 0;
			background-repeat: no-repeat;
			outline: none;
		}
		/* global navigation images - sources */
	  	#nav li#navItem0 div {background-image: url(images/nav/nav_home.gif); width: 138px;}
		#nav li#navItem1 div {background-image: url(images/nav/nav_products.gif); width: 136px;}
		#nav li#navItem2 div {background-image: url(images/nav/nav_news.gif); width: 110px;}
		#nav li#navItem3 div {background-image: url(images/nav/nav_promotion.gif); width: 160px;}
		#nav li#navItem4 div {background-image: url(images/nav/nav_cart.gif); width: 126px;}
		#nav li#navItem5 div {background-image: url(images/nav/nav_contact.gif); width: 114px;}
		
	  	#nav li#navItem0 a {background-image: url(images/nav/nav_home.gif);}
		#nav li#navItem1 a {background-image: url(images/nav/nav_products.gif);}
		#nav li#navItem2 a {background-image: url(images/nav/nav_news.gif);}
		#nav li#navItem3 a {background-image: url(images/nav/nav_promotion.gif);}
		#nav li#navItem4 a {background-image: url(images/nav/nav_cart.gif);}
		#nav li#navItem5 a {background-image: url(images/nav/nav_contact.gif);}
		
		#nav li span {visibility: hidden;}
		#nav li a {text-decoration: none;}
	
		#nav #nav_list li ul li a {background-image: none;}
		#nav li li a {
			width: 230px; /* 194 - 25pad = 169px */
			display: block;
			height: auto;
			text-indent: 0px;
			font-size: 1.2em;
			padding: 6px 0px 6px 20px;
			cursor: pointer;
			outline: none;
		}
		#nav li#navItem2 a, #nav li#navItem0 a, #nav li#navItem1 a, #nav li#navItem3 a, #nav li#navItem4 a, #nav li#navItem5 a {cursor: pointer;}
		#nav li li a:hover {
			display: block;
			color: #fff;
		}
		#nav li li {
			width: 230px;
			display: block;
			float: none;
			background: #e7e7e7;
			border: 1px solid #8f8f8f;
			border-bottom: none;
		}
		#nav li li:hover,
		#nav li li.over {
			color: #fff;
			width: 230px;
			background: #394352;
		}
		/* turning rollover images on
	   	   (removing the background of <a> (off state) to show the background image of <div> (on state) */
		#nav li#navItem0:hover a,
		#nav li#navItem1:hover a,
		#nav li#navItem2:hover a,
		#nav li#navItem3:hover a,
		#nav li#navItem4:hover a,
		#nav li#navItem5:hover a,
		#nav li#navItem0.over a,
		#nav li#navItem1.over a,
		#nav li#navItem2.over a,
		#nav li#navItem3.over a,
		#nav li#navItem4.over a,
		#nav li#navItem5.over a,
		#nav li#navItem0 a:hover,
		#nav li#navItem1 a:hover,
		#nav li#navItem2 a:hover,
		#nav li#navItem3 a:hover,
		#nav li#navItem4 a:hover,
		#nav li#navItem5 a:hover {
			background-image: none;
		}
	#search {
		float: left;
		background: url(images/bg_search.gif) bottom right no-repeat;
		margin-left: 21px;
		width: 164px;
		height: 31px;
		color: #555555;
	}
	#search .inputbox {
		width: 122px;
		float: left;
		padding: 0;
		border: none;
		margin: 10px 0 0 22px;
		color: #555555;
		background: none;
	}
#left_content {
	width: 200px;
	float: left;
	margin: 0px 0px 0px 5px;
}
  .catmenu {
	margin: 0px;
	}
	.catmenu div.top {
		background: url(images/catmenu_top.jpg) left top no-repeat;
		width: 190px;
		height: 20px;
		text-align: center;
		text-transform: uppercase;
		font-size: 1.1em;
		font-family: Arial, Helvetica, sans-serif;
		font-weight: bold;
		padding: 6px 0px 0px 0px;
		color: #fff;
	}
    .catmenu div.center {
		text-align: left;
		width: 172px; /* 194 - 25pad = 169px */
		border-right: 1px solid #cccccc;
		border-left: 1px solid #cccccc;
		padding: 0 8px 0 8px;
		cursor: pointer;
	}
    .catmenu div.centermap {
		text-align: left;
		width: 180px; /* 194 - 25pad = 169px */
		border-right: 1px solid #cccccc;
		border-left: 1px solid #cccccc;
    padding: 4px 4px 0px 4px;
		cursor: pointer;
	}
	.catmenu div.bottom {
	background: url(images/line1.gif) left top no-repeat;
	height: 4px;
	width: 190px;
	}
		.catmenu ul {
			padding:0px 0px 0px 5px; 
			margin:0px 0px 0px 0px; 
			list-style:none;
		}
		.catmenu li {
			line-height:24px; 
			background:url(images/bg_list1.gif) no-repeat left top;
		}
		.catmenu li a {
			color:#3A3A3A;
			padding-left: 12px;
			background-position: left center;
			background-image: url(images/bg_list.gif);
			background-repeat: no-repeat;
		}
		.catmenu li a:hover	{color:#EF0101; text-decoration:none}

		.catmenu li.bg_list_un	{
			line-height:24px; 
			background:none
		}
		.catmenu li.bg_list_un a {
			color:#3A3A3A; 
			padding-left: 12px; 
			background:url(images/bg_list.gif) no-repeat left top; 
			background-position: left center;
		}
		.catmenu li.bg_list_sub a:hover	{color:#EF0101; text-decoration:none}
		
		.catmenu li.bg_list_sub	{
			line-height:24px; 
			background:url(images/bg_list1.gif) no-repeat left top;
		}
		.catmenu li.bg_list_sub {
			line-height:24px; 
			background:url(images/bg_list1.gif) no-repeat left top;
		}
		.catmenu li.bg_list_sub a {
			color:#3A3A3A; 
			padding-left: 17px;
			background:url(images/bg_list2.gif) no-repeat left top;
			background-position: 9px center;
		}
		.catmenu li a:hover	{
			color:#EF0101; 
			text-decoration:none;
		}
		#marqueecontainer{
    position: relative;
    /*width: 200px; /*marquee width */
    height: 170px; /*marquee height */
    padding-top: 5px;
    overflow: hidden;
    }
#center_content {
	width: 570px;
	float: left;
}
  #center_content .body { /*width: 564px;*/
    padding: 0 3px 0 3px;
	text-align: left;
  }
  	.breadcrumb {
		background: url(images/breadcrumb.gif) no-repeat top left;
		height: 20px;
		padding: 6px 0 0 17px;
		font-weight: bold;
	}
	.breadcrumb a {color:#3A3A3A;}
	.breadcrumb a:hover {color:#EF0101; text-decoration:none;}
	
	.body .part {
		display: block;
		background: url(images/newproduct_center.gif) repeat-x left top;
    }
      	.body .part .title_l {
      		background: url(images/newproduct_left.gif) no-repeat left top;
    	}
    	.body .part .title_r {
    	 	background: url(images/newproduct_right.gif) no-repeat right top;
			height: 20px;
			text-align: center;
			text-transform: uppercase;
			font-size: 1.1em;
			font-family: Arial, Helvetica, sans-serif;
			font-weight: bold;
			padding: 6px 0px 0px 0px;
			color: #fff;			
    	}
  	.product_grid {
    	background: url(images/bg_product_grid.gif) repeat-x top left;
    	border: #a6d0e7 solid 1px;
    	padding: 4px 20px 4px 20px;
    	margin: 3px;
    	float:left;
    	text-align: center;
	}
	.product_info_left {
		float: left;
		width: 150px;
		text-align: center;
	}
	.product_info_tag {
		height: 26px;
		background: url(images/bg_product_info.gif) repeat-x top left;
	}
	.product_info_tag div {
		background: url(images/bg_product_info_l.gif) no-repeat top left;
		height: 20px;
		padding: 6px 0px 0px 56px;
		font-weight: bold;
	}
	.product_info_tag_specs {
		background-color: #dedede;
		padding: 3px 0px 0px 4px;
		height: 17px;
		font-weight: bold;
		margin: 5px 0px 5px 0px;
	}
	.product_info_spec_li li {
    margin-left: 12px;
		list-style-image: url(images/ico_arrow.gif);
	}
  *:first-child+html .product_info_spec_li li {
    margin-left: 17px;
  }
	.product_info_right {
		float: left;
		padding-left: 110px;
		width: 300px;
		text-align: justify;
	}
	.subcat_left {
		float: left;
		width: 110px;
		height: 80px;
	}
	.subcat_right {
		float: left;
		width: 444px;
		padding-left: 10px;
		height: 80px;
		background: url(../images/cat_desc_bg.jpg) no-repeat top right;
		text-align: left;
	}
	/* Fix cho IE */
	/*\*/
	* html .subcat_right {
	  height: 80px;
	}
	/**/
	.left_listing {
		float: left; 
		width: 365px; 
		text-align: left;
	}
	.right_listing {
		float: left; 
		width: 199px; 
		text-align: right;
	}
#right_content {
	width: 200px;
	float: left;
	text-align: left;
	margin-left: 5px;
}
  .support {
	width: 190px;
	font-size: 1.2em;
	display: block;
  }
  	.support .top {
		background: url(images/bg_support_top.gif) no-repeat top left;
		height: 10px;
	}
	.support .center {
		background: url(images/bg_support_center.gif) repeat-y center top;
		padding-left: 5px;
		color: #660000; 
		font-weight: bold; 
		text-align: center;	
	}
	.support .bottom {
		background: url(images/bg_support_bottom.gif) no-repeat top left;
		height: 10px;
	}
  .right_ads {
    display: block;
    padding: 1px 0 0 0px;
  }
	
#footer {
  width: 948px;
  height: 19px;
  background: url(images/bg_footer.gif) no-repeat top left;
  text-align: left;
  border-top: #cccccc solid 1px;
  border-bottom: #cccccc solid 1px;
  padding: 5px 0px 0px 24px;
}
	.footerspan {
		float: left;
    	text-align: left;
		width: 790px;
	}
	.designed {
		float: left;
		width: 170px;
	}
.h1 {
  font-size: 14px;
  color: #ff6600;
  font-weight: bold;
  height: 18px;
}
.h4 {
  font-size: 11px;
  color: #006699;
  line-height: 14px;
}