body {
background-color: #F3F3F3;
margin:0px;
padding:0px;
font: 11px  verdana, arial, helvetica;
color: #424749;
}
h1{
font-size:14px;
font-weight:bold;
font-family:Arial;
color:#7e7373;
padding:8px 0 8px 0;
margin:0px;
}
h2{
font-size:14px;
font-weight:bold;
font-family:Arial;
color:#399dc4;
padding:8px 0 8px 0;
margin:0px;
}
p{
text-align:justify;
padding:0px;
margin:0px;
}
p.left_text{
text-align:justify;
padding:5px 0 5px 0;
margin:0px;
color:#424749;
font-size:11px;
clear:both;
}
img.left_img{
float:left;
padding:3px;
margin:0px 10px 10px 0;
}
#main_container{
width:900px;
height:auto;
margin:auto;
background-color:#FFFFFF;
}
#header{
width:900px;
height:30px;
background:url(../img/header_bg.gif) repeat-x;
}
.logo{
float:left;
padding:30px 0 0 25px;
}
/*----------------------menu-------------------------*/
#menu { /* the menu container */
	width: 900px;
	font-size: 13px;
}

#menu ul { /* menu ul style */
	list-style: none;
	margin: 0;
}

#menu li { /* horizontal menu */
	float: left;
	position: relative;
}

#menu a { /* the link style of menu */
	color: #fff;
	display: block;
	line-height: 30px;
	padding: 0 23px;
	text-decoration: none;
}

 /* The sub menu is hidden by default and its position is places right under the parent menu*/
#menu ul ul {
	display: none;
	position: absolute;
	top: 30px;
	left: 0;
	float: left;
	width: 100px;
	z-index: 99999;
}

/* The sub menu list element is given a minimum width */
#menu ul ul li {
	min-width: 120px;
}

/* the third level menu (sub sub menu) is placed to the left side of its parent*/
#menu ul ul ul {
	left: 100%;
	top: 0;
}

#menu ul ul a {
	background: #006;
	line-height: 1em;
	padding: 10px;
	width: 120px;
	height: auto;
}

#menu li:hover > a,
#menu ul ul :hover > a {
	background: #333;
	color: #fff;
}
#menu ul li:hover > ul {
	display: block;
}

/* When the mouse is over a list (li) element with unordered-list (ul) element inside then show it. The position when its shown is defined in the previous block of CSS*/
#menu ul li:hover > ul {
	display: block;
}

/* Styles the anchor (a) tag when mouse over */
#menu li:hover > a,
#menu ul ul :hover > a {
	background: #49A3FF;
	color: #fff;
}

.subheader_content{
width:900px;
height:130px;
background:url(../img/middle_bg.jpg) no-repeat center;
}
.subheader_text{
width:450px;
float:right;
padding:40px 10px 0 0 ;
text-align:justify;
color:#FFFFFF;
font-size:14px;
font-weight:bold;
}
/*--------------------------center_content--------------*/
#center_content{
width:900px;
clear:both;
height:auto;
}
.wide_content{
width:850px;
float:left;
padding:5px 15px 5px 15px;
}
.left_content{
width:450px;
float:left;
padding:5px 5px 5px 15px;
}
.right_content{
width:400px;
float:left;
padding:5px 15px 5px 15px;
}
.title{
clear:both;
padding:10px;
color:#828486;
font-family:Arial, Helvetica, sans-serif;
font-size:18px;

}
.title span{
font-size:28px;
color:#424749;
}
.title span.blue{
color:#4bb0d8;
font-size:22px;
}

.contact_box_single{
width:300px;
height:125px;
padding-left:550px;

}

.contact_box_double{
width:300px;
height:125px;
padding-left:70px;

}

.feature_box{
width:270px;
height:270px;
padding-left:70px;

}
 
/*------------------------portofolio style---------------*/
.portofolio_box{
width:427px;
height:168px;
text-align:center;
padding-top:10px;
/background:url(../img/portofolio_box.gif) no-repeat center;
}
.more{
width:90px;
height:23px;
padding:10px 0 10px 0;
background:url(../img/more.jpg) no-repeat center;
padding-left:33px;
}
.more a{
text-decoration:none;
color:#000;
line-height:23px;
}

.thumbnail_box a{
width:114px;
height:101px;
float:left;
margin:7px;
text-align:center;
padding-top:7px;
background:url(../img/thumbnail_box.gif) no-repeat center;
}
.next_project{
clear:both;
padding:10px 30px 10px 0;
float:right;
margin-right:20px;
background:url(../img/arrow.gif) no-repeat right;
}
.next_project a{
text-decoration:none;
color:#000000;
}

/*-----------------------contact_form-------------------*/
#contact_form{
width:435px;
height:auto;
padding:20px 0 0 20px;
}
.form_row{
float:left;
padding:4px 0 4px 0;
}
label{
width:70px;
float:left;
padding:3px 5px 0 0;
color:#7e7373;
text-align:right;
}
input.contact_input{
width:220px;
height:18px;
float:left;
border:1px #cbd1d2 solid;
background-color:#FFFFFF;
color: #666666;
}
textarea.contact_textarea{
width:320px;
height:80px;
float:left;
border:1px #cbd1d2 solid;
background-color:#FFFFFF;
color: #666666;
}
.submit_form{
clear:both;
float:right;
padding:10px 40px 20px 0;
}

/*-----------------------------footer------------------*/
#footer{
clear:both;
width: auto;
height:45px;
color: #999999;
background:url(../img/footer_logo.gif) no-repeat left #dbdcdd;
background-position:0px 50%;
}
.copyright{
color: #666666;
float:left;
padding-left:20px;
padding-top:15px;
}
.footer_links{
float:right;
padding-right:10px;
padding-top:15px;
}
.footer_links a{
color: #666666;
text-decoration:none;
}
.footer_links a:hover{
text-decoration:underline;
color: #000;
}