body {
	background-color: #F3F3F3;
	margin:0px;
	padding:0px;
	color: #424749;
	font-family: verdana, arial, helvetica;
	font-size: 11px;
	list-style-position: inside;
	list-style-type: disc;
}
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:110px;
background:url(images/header_bg.gif) repeat-x;
}
.logo{
float:left;
padding:10px 0 0 20px;
width:240px;
}
/*----------------------menu-------------------------*/
#menu{
width:620px;
height:61px;
float:right;
padding-top:20px;
}
#menu ul{
list-style:none;padding:0px 0px 0px 20px;margin:0px;display:block;
}
#menu ul li{
list-style:none;display:inline;float:left;width:80px;padding:0px 20px 0 20px;
}
#menu ul li a.tooltip{
height:61px;float:left;text-decoration:none;position:relative;z-index:24;
}
#menu ul li a.tooltip:hover{z-index:25;
}
a.tooltip span{display: none}

a.tooltip:hover span{ 
display:block;
position:absolute;
top:55px; left:0px;
width: 50px;
height: auto;
border:2px solid #0cf;
background-color:#fff;
padding:5px;
color:#000;
text-align: center;
}
.subheader_content{
width:900px;
height:120px;
background:url(images/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:900px;
float:left;
padding:5px 15px 5px 15px;
}
.left_content{
width:0px;
float:left;
padding:5px 5px 5px 15px;
}
.right_content{
width:850px;
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{
width:353px;
height:122px;
background:url(images/contact_box.jpg) no-repeat center;
background-position:0px 0px;
margin:15px 0 0 10px;
}
.contact_box_text{
width:200px;
padding:5px 10px 10px 10px;
}
#contentwide {
	line-height:1.5em;
	margin:10px 0 10px 160px;
	padding:0;
}
.tb_bg{
width:180px;
height:28px;
background:url(images/bg.gif) no-repeat center;
background-position:0px 0px;
margin:15px 0 0 10px;
}
.tb_bg_text{
width:180px;
padding:5px 10px 10px 10px;
}
/*------------------------portofolio style---------------*/
.portofolio_box{
width:427px;
height:168px;
text-align:center;
padding-top:10px;
background:url(images/portofolio_box.gif) no-repeat center;
}
table {
	border:1px solid #d8d8d8;
	border-collapse:collapse;
	line-height:1.3em;
	margin:0 0 16px;
	padding:0;
}
.more{
width:90px;
height:23px;
padding:10px 0 10px 0;
background:url(images/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(images/thumbnail_box.gif) no-repeat center;
}
.next_project{
clear:both;
padding:10px 30px 10px 0;
float:right;
margin-right:20px;
background:url(images/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(images/footer_logo.gif) no-repeat left #dbdcdd;
background-position:0px 50%;
}
.copyright{
float:left;
padding-left:70px;
padding-top:15px;
}
.footer_links{
float:right;
padding-right:10px;
padding-top:15px;
}
.footer_links a{
text-decoration:none;
color: #999999;
}
.footer_links a:hover{
text-decoration:underline;
color: #666666;
}

/*-----------------------------lightbox------------------*/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

.sidebox {
	margin: 0 auto; /* center for now */
	width: 17em; /* ems so it will grow */
	background: url(sbbody-r.gif) no-repeat bottom right;
	font-size: 100%;
}
.boxhead {
	background: url(images/sbhead-r.gif) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: center;
}
.boxhead h2 {
	background: url(images/sbhead-l.gif) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	color: white; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;
	text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
	background: url(images/sbbody-l.gif) no-repeat bottom left;
	margin: 0;
	padding: 5px 30px 31px;
}