/* Hoon Lir Sdn Bhd */

@import url(navi.css);
@import url(featured_slide.css);

body{
	margin:0;
	padding:0;
	font-size:13px;
	font-family:'Trebuchet MS', Tahoma, Arial, Helvetica;
	color:#777777;	
    background-color: #747474;
	}

img{
	margin:0; 
	padding:0; 
	border:none;
	}

.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart{list-style-type:none; margin:0; padding:0;}
.fl_left{float:left;}
.fl_right{float:right;}
a{outline:none; text-decoration:none;}
.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:inline-block;}
html[xmlns] .clear{display:block;}
* html .clear{height:1%;}

/* ----------------------------------------------Wrapper-------------------------------------*/

div.wrapper{
	display:block;
	width:100%;
	text-align:left;
	}

div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{
	margin:0 0 5px 0;
	padding:0 0 5px 0;
	font-size:18px;
	font-weight:normal;
	line-height:normal;    
	}

.rowheader	{background: #CCCCCC url('../images/background_header.png') repeat-x 0px 0px;}
.rownavi	{background-color:#555555;}
.rowfooter	{padding:30px 0 0 0;}
.rowslides	{padding:30px 0 30px 0;  background-color:#ffffff;}
.rowprodo   {background-color:#FFFFFF;}
.rowprodd   {background-color:#FFFFFF;}
.rowos      {background-color:#FFFFFF; height: 570px;}
.rowau      {background-color:#FFFFFF; height: 570px;}
.rowcu      {background-color:#FFFFFF; height: 570px;}
.rowterms   {background-color:#FFFFFF;}
	
/* ----------------------------------------------General-------------------------------------*/

#header, #services, #featured_slide, #container, #footer, #copyright{
	position:relative;
	margin:0 auto 0 auto;
	display:block;
	width:960px;
	}

/* ----------------------------------------------Header-------------------------------------*/

#header{
	padding:20px 0 20px 0;
	}

/* ----------------------------------------------Content-------------------------------------*/

#container{
	padding:30px 0 30px 0;
	}

#container h1, #container h2, #container h3{
	color: #8199A9;	
	}

#container h1{
    font-size: 20px;
	border-bottom-style: dotted; 
    border-bottom-width: 1px; 
    border-bottom-color: #C0C0C0;
    padding: 0 0 10px 0;
	}

#container h2{
    font-size: 14px;
    color: #666666;
    font-weight: bold;
	border-bottom-style: dotted; 
    border-bottom-width: 1px; 
    border-bottom-color: #C0C0C0;
    padding: 0 0 5px 0;
	}

#container h3{
    font-size: 14px;
    color: #666666;
    font-weight: bold;
	border-bottom-style: dotted; 
    border-bottom-width: 1px; 
    border-bottom-color: #C0C0C0;
    padding: 0 0 5px 0;
	}

#container a{
	color:#666666;    
	line-height: 20px;
	}

#container a:hover{
	color: #5F8EC2;    
	}

#container .title{
	display:block;
	width:100%;
	margin:0 0 10px 0;
	padding:0 0 8px 0;
	font-size:17px;
	text-transform:uppercase;
	border-bottom:2px dotted #8199A9;
	}

#container .contactus_left ul, #container .contactus_right ul, #container .contactus_right a{    
	margin:0;
	padding:0;
    list-style:none;	
    line-height: 18px;
	}

#container .contactus_left{
    float: left;
	display:block;
	width:10%;
	margin:0;
	padding:0;
    list-style:none;    	
	}

#container .contactus_right{
    float: left;
	display:block;
	width:90%;
	margin:0 0 0 0;
	padding:0 0 0 0;	
    list-style:none;
	}

#content{
	display:block;
	float:left;
	width:630px;
	}

/* ----------------------------------------------Portfolio-------------------------------------*/

#portfolio{
	display:block;
	width:100%;	
	}

#portfolio ul, #portfolio h1, #portfolio p, #portfolio img{
	margin:0;
	padding:0;
	list-style:none;
	}

#portfolio .fl_left{
	width:200px;	
    margin: 0 20px 0 0;
    padding: 10px 15px 15px 15px;    
    background-color: #f9f9f9;
	}

#portfolio .fl_right{
	width:700px;    
	}

#portfolio .fl_right li{
    float:left;
	margin:0 20px 20px 0;
	}

#portfolio .fl_right li.last{
	margin-right: 0;
	}

#portfolio .fl_right li img{    
	border:5px solid #DFDFDF;
	}

#portfolio .fl_right_prod{
    float: left;
	width:700px;    
	}

#portfolio .fl_right_prod li{
    float:left;
	margin:0 0 0 0;
	}

#portfolio .prod_overview{	
	width:338px;
	height: 290px;     
    padding-right: 11px;   
    font-size: 13px;     
    line-height: 20px;
	}

#portfolio .prod_photo{     
	width:344px;
	height:200px;
	border:1px dotted #DADADA;
    background-repeat: no-repeat;      
	}

#portfolio .prod_tablefree{	
	width:700px;     
    padding: 0 0 0 0;
	}

#portfolio .prod_table{	
	width:700px;	 
    height: 220px;   
    padding: 0 0 0 0;
	}

#portfolio a.swap:link, #portfolio a.swap:visited, #portfolio a.swap:hover{
	display:block;	
	width:110px; 
	height:66px; 
	margin:10px 0px 0 5px;		
	border:1px dotted #DADADA;
	cursor:default;
    float: right;    
    background-repeat: no-repeat;
	}

a.swap:link span, a.swap:visited span, a.swap:active span{
	visibility:hidden;
	position:absolute; 
	top:30px; 
	left:604px; 
	width:344px;
	height:200px;   
    background-color: #ffffff;             
	}
	
a.swap:active span, a.swap:hover span, a.swap:focus span{
	visibility:visible;  
    border:1px dotted #DADADA;   
    background-repeat: no-repeat;
	}

/* ----------------------------------------------Table-------------------------------------*/

table{
	width:100%;
	border-collapse:collapse;
	table-layout:auto;
	vertical-align:top;	
	border:1px solid #CCCCCC;    
	}

table thead th{
	color:#FFFFFF;
    font-weight: normal;    
	background-color:#999999;
	border:1px solid #CCCCCC;
	border-collapse:collapse;
	text-align:center;
	table-layout:auto;
	vertical-align:middle;
	}

table tbody td{
	vertical-align:top;    
	border-collapse:collapse;
	border-left:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
    text-align:center;
	}
	
table thead th, table tbody td{
	padding:2px;
	border-collapse:collapse;
	}

table tbody tr.light{
	color:#777777;
	background-color:#ffffff;
	}

table tbody tr.dark{
	color:#777777;
	background-color:#E8E8E8;
	}

/* ----------------------------------------------Footer-------------------------------------*/

#footer, #footer a{
	line-height:20px;
	color:#F0F0F0;	
	}

#footer li a:hover{
	color: #5F8EC2;    
	}

#footer h2, #footer p, #footer ul, #footer a{
	margin:0;
	padding:0;
	font-weight:normal;
	list-style:none;
	font-style:normal;
	}

#footer h2{
	margin:0 0 30px 0;
	padding:0;
	font-size:18px;
	color:#C8CCCF;	
	}

#footer .foot_contact{
	display:block;
	float:left;
	width:450px;
	margin:0 20px 0 0;
	padding:0;	
	}

#footer .footbox h2{
	margin-bottom:20px;
	font-size:15px;
	text-transform:uppercase;
	}

#footer .footbox{
	display:block;
	float:left;
	width:150px;
	margin:0 20px 0 0;
	padding:0;	
	}

#footer address{	
	float:left;
	margin-left:20px;
	text-transform:none;
	font-style:normal;
	line-height:20px;    
	}

#footer address a:hover{	
	text-decoration: underline;   
	}

#footer .last{margin:0;}

/* ----------------------------------------------Copyright-------------------------------------*/

#copyright{
	display:block;
	padding:30px 0 0 0;
	clear:both;    
	}

#copyright p{
	margin:0;
	padding:0;    
    font-size:12px;      
	}

#copyright a:hover{
	text-decoration: underline;
	}