/*--------------------------------------------------------------------------------------------------------------------------*/
/* CLEARFIX
/*--------------------------------------------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
html{ width:100%;}
ul{margin:0;padding:0;}
ul li{margin:0;padding:0;list-style:none;}
ol{margin:0;padding:0;}
ol li{margin:0;padding:0;list-style:none;}
a img{border:none; outline:none;}
p img{padding:0;}
.clear{clear:both;}

.alignleft{float:left; margin-right:10px; margin-bottom:5px;}
.alignright{float:right; margin-left:10px; margin-bottom:5px;}
.aligncenter{text-align:center;}

a{outline:none; color:#ffffff; text-decoration:underline;}
a:hover{ text-decoration:none; color:#ffffff;}
a:visited{color:#ffffff; outline:none;}
/*****/

/*--------------------------------------------------------------------------------------------------------------------------*/
/* GENERAL 
/*--------------------------------------------------------------------------------------------------------------------------*/
img#bg {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
}

body{margin:0 auto; text-align:center; font-family:Arial, Helvetica, sans-serif; background-color:#fe670e; color:#ffffff; font-size:14px; }

#container{width:973px; text-align:left; margin:0 auto; position:absolute; left:50%; margin-left:-485px; z-index:1;}

#content{width:973px; margin-top:90px; min-height:450px; }	
#content hr{border:1px solid #fddfce; height:0px;}
	#page{width:780px; float:right;  }
	#sidebar{width:165px; float:left; /*background: url(images/bg_projects_sidebar.png) right bottom no-repeat; padding-bottom:60px;*/}	

	h1 {padding: 0px 0px 15px 0; font-size:26px; color:#ffffff; display:block; font-family:Arial, Helvetica, sans-serif; font-weight:normal;  }
	h2 {padding: 5px 0px 5px 0; font-size:16px; color:#ffffff; display:block; font-family:Arial, Helvetica, sans-serif; font-weight:bold;  }
	h3 {padding: 5px 0px 5px 0; font-size:16px; color:#ffffff; display:block; font-family:Arial, Helvetica, sans-serif; font-weight:bold;  }

#header{/*top:0px; position:absolute;*/ width:973px; height:20px; }
	#logo{width:290px; height:65px; float:left;}
	#logo img{padding:35px 0 0 0px;}
	
	#topNav{width:570px; float:right; margin-top:30px; }
	#topNav ul{margin:0; padding:0;}
	#topNav ul li{margin:0 30px 0 0; padding:0; width:89px; height:39px; float:left; display: block; text-indent:-9999999px;}
	#topNav ul li a{margin:0; padding:0; height:39px; background: url(images/topNav_home.png) 100% 100% no-repeat; display: block; }
	#topNav ul li a:hover{ height:39px; background: url(images/topNav_home_over.png) 100% 100% no-repeat; display: block; }
	
	#topNav ul li.home{}
	#topNav ul li.home a{background: url(images/topNavHome.png) top left no-repeat; }
	#topNav ul li.home a:hover{ background: url(images/topNavHome.png) bottom left no-repeat;}
	#topNav ul li.home#selected a{ background: url(images/topNavHome.png) bottom left no-repeat;}
	
	#topNav ul li.about{}
	#topNav ul li.about a{background: url(images/topNavAbout.png) top left no-repeat; }
	#topNav ul li.about a:hover{ background: url(images/topNavAbout.png) bottom left no-repeat;}
	#topNav ul li.about#selected a{ background: url(images/topNavAbout.png) bottom left no-repeat;}
	
	#topNav ul li.portofolio{width:122px;}
	#topNav ul li.portofolio a{background: url(images/topNavPortofolio.png) top left no-repeat; }
	#topNav ul li.portofolio a:hover{ background: url(images/topNavPortofolio.png) bottom left no-repeat;}
	#topNav ul li.portofolio#selected a{ background: url(images/topNavPortofolio.png) bottom left no-repeat;}
	
	#topNav ul li.contact{}
	#topNav ul li.contact a{background: url(images/topNavContact.png) top left no-repeat; }
	#topNav ul li.contact a:hover{ background: url(images/topNavContact.png) bottom left no-repeat;}
	#topNav ul li.contact#selected a{ background: url(images/topNavContact.png) bottom left no-repeat;}
	
	#topNav ul li.blog{width:53px; margin-right:0;}
	#topNav ul li.blog a{background: url(images/topNavBlog.png) top left no-repeat; }
	#topNav ul li.blog a:hover{ background: url(images/topNavBlog.png) bottom left no-repeat;}

#footer{width:973px; margin-top:15px; font-size:10px; }
	#networks{width:245px; float:left; text-align:right;}
	#copyright{width:575px; float:right;}
	#copyright p{padding:10px 0 0 0; margin:0;}
/*****/	

/*--------------------------------------------------------------------------------------------------------------------------*/
/* contact page
/*--------------------------------------------------------------------------------------------------------------------------*/
#contactLeft{width:540px; float:left;  }
#contactLeft form{float:right; width:346px;  }
#contactLeft form fieldset{border:none; margin-bottom:5px; }
#contactLeft form fieldset input{border:none; width:346px; padding:9px 0 8px 0; background: url(images/formContact_input.png) 100% 100% no-repeat; color:#ffffff; text-indent:9px;}
#contactLeft form fieldset textarea{border:none; width:346px; height:129px; background: url(images/formContact_textarea.png) 100% 100% no-repeat; color:#ffffff; text-indent:9px;}
#contactLeft form fieldset.submit input{border:none; float:right; width:69px; height:28px; background: url(images/formContact_submit.png) left top no-repeat;  text-indent:-9999999px; }
#contactLeft form fieldset.submit input:hover{background: url(images/formContact_submit.png) left bottom no-repeat; }

#contactRight{width:380px; float:right; font-size:18px; min-height:400px;}	
	.cana{background: url(images/cana.png) 0% 20% no-repeat; margin-bottom:10px; text-indent:25px}
	.tel{background: url(images/tel.png) 0% 40% no-repeat; margin-bottom:10px; text-indent:25px}
	.plic{background: url(images/plic.png) 0% 75% no-repeat; margin-bottom:10px; text-indent:25px}
	.plic a{text-decoration:none;}
	
/*--------------------------------------------------------------------------------------------------------------------------*/
/* portofolio page
/*--------------------------------------------------------------------------------------------------------------------------*/	
#portofolio{}
#portofolio ul{}
#portofolio ul li{float:left; width:232px; /*height:308px;*/ height:290px; background:url(images/bg_portofolioNav.png) left bottom no-repeat; margin:0 11px 20px 11px; padding:0;}
#portofolio ul li a{color:#ffffff; font-size:12px; text-decoration:none;}
#portofolio ul li a:hover{color:#f9eae4; text-decoration:none; filter:alpha(opacity=95);
	-moz-opacity:0.95;
	-khtml-opacity: 0.95;
	opacity: 0.95;
 }
#portofolio ul li p{padding:5px 6px 0 6px;} 

/*--------------------------------------------------------------------------------------------------------------------------*/
/* article page
/*--------------------------------------------------------------------------------------------------------------------------*/	
#articlesRight{float:right; width:200px;  margin-right:11px; text-align:right;}
.footerarticles{width:973px; margin-top:15px; background:url(images/footer_spacer.png) left top no-repeat; font-size:10px; padding-top:40px; }

.footerarticles ul{margin:5px 0 0px 0;}
.footerarticles ul li{width:123px; height:25px; margin:0px 15px 5px 0; padding:0; display: block; text-indent:-9999999px; float:left;}
.footerarticles ul li a{height:25px; margin:0; padding:0; background: url(images/Nav_websites.png) bottom left no-repeat; display: block;}
.footerarticles ul li a:hover{height:25px; margin:0; padding:0; background: url(images/Nav_websites.png) top left no-repeat; display: block;}

.footerarticles ul li.websites{width:89px;}
.footerarticles ul li.websites a{background: url(images/Nav_websites.png) bottom left no-repeat; }
.footerarticles ul li.websites a:hover{ background: url(images/Nav_websites.png) top left no-repeat;}
.footerarticles ul li.websites#selected a{ background: url(images/Nav_websites.png) top left no-repeat;}

.footerarticles ul li.applications{}
.footerarticles ul li.applications a{background: url(images/Nav_applications.png) bottom left no-repeat; }
.footerarticles ul li.applications a:hover{ background: url(images/Nav_applications.png) top left no-repeat;}
.footerarticles ul li.applications#selected a{ background: url(images/Nav_applications.png) top left no-repeat;}

.footerarticles ul li.graphics{width:89px;}
.footerarticles ul li.graphics a{background: url(images/Nav_graphics.png) bottom left no-repeat; }
.footerarticles ul li.graphics a:hover{ background: url(images/Nav_graphics.png) top left no-repeat;}
.footerarticles ul li.graphics#selected a{ background: url(images/Nav_graphics.png) top left no-repeat;}
 
/*--------------------------------------------------------------------------------------------------------------------------*/
/* sidebar
/*--------------------------------------------------------------------------------------------------------------------------*/	
#sidebar p{ font-size:12px;}
#sidebar p.linkref{ font-size:11px;}

#sidebar ul{margin:5px 0 0px 0;}
#sidebar ul li{width:123px; height:25px; margin:0px 0 5px 0; padding:0; display: block; text-indent:-9999999px;}
#sidebar ul li a{height:25px; margin:0; padding:0; background: url(images/Nav_websites.png) bottom left no-repeat; display: block;}
#sidebar ul li a:hover{height:25px; margin:0; padding:0; background: url(images/Nav_websites.png) top left no-repeat; display: block;}

#sidebar ul li.websites{width:89px;}
#sidebar ul li.websites a{background: url(images/Nav_websites.png) bottom left no-repeat; }
#sidebar ul li.websites a:hover{ background: url(images/Nav_websites.png) top left no-repeat;}
#sidebar ul li.websites#selected a{ background: url(images/Nav_websites.png) top left no-repeat;}

#sidebar ul li.applications{}
#sidebar ul li.applications a{background: url(images/Nav_applications.png) bottom left no-repeat; }
#sidebar ul li.applications a:hover{ background: url(images/Nav_applications.png) top left no-repeat;}
#sidebar ul li.applications#selected a{ background: url(images/Nav_applications.png) top left no-repeat;}

#sidebar ul li.graphics{width:89px;}
#sidebar ul li.graphics a{background: url(images/Nav_graphics.png) bottom left no-repeat; }
#sidebar ul li.graphics a:hover{ background: url(images/Nav_graphics.png) top left no-repeat;}
#sidebar ul li.graphics#selected a{ background: url(images/Nav_graphics.png) top left no-repeat;}



/*--------------------------------------------------------------------------------------------------------------------------*/
/* we cam
/*--------------------------------------------------------------------------------------------------------------------------*/	
ul.wecan{margin:10px 10px 10px 10px;}
ul.wecan li{background:url(images/services_nav.png) left center no-repeat;  margin-left:15px; padding-left:15px;}


/*--------------------------------------------------------------------------------------------------------------------------*/
/* services
/*--------------------------------------------------------------------------------------------------------------------------*/	
.h1 {font-size:26px; color:#ffffff; font-family:Arial, Helvetica, sans-serif; font-weight:normal;  }

ul.services{margin:10px 10px 10px 10px;}
ul.services li{background:url(images/services_nav.png) left center no-repeat;  margin-left:15px; padding-left:15px;}

.imaginiservices{margin:10px 0 10px 0;}
.imaginiservices img{padding:0 7px 0 7px;}

.left{width:475px; float:left; }
.right{width:475px; float:right;}

.box3{width:300px; float:left; margin:0px 35px 0px 0; }
.box3 p{padding:10px 0 10px 0; min-height:115px; }
.box3Right{width:300px; float:right; margin:0px 0px 0px 0;  min-height:100px;}
.box3Right p{padding:10px 0 10px 0;  min-height:115px;}

/*--------------------------------------------------------------------------------------------------------------------------*/
/* pagination
/*--------------------------------------------------------------------------------------------------------------------------*/
#pg_first {float:left; margin:0 5px 0 0; padding:0;}
#pg_first a.rollover {
	display:block;		
	width:23px; height:15px;
	line-height:15px; /* for the vertical alignement */
	background-image:url(images/pg_first.png); /* image you want to rollover */
	background-repeat: no-repeat;
	background-position: left top;
	text-align:left;
	text-decoration:none;	
	color:#333333;
	text-indent:-11113px;
}
#pg_first a.rollover:hover { 
background-position: left bottom; 
color:#333333;
}

#pg_last {float:left; margin:0 5px 0 0; padding:0;}
#pg_last a.rollover {
	display:block;		
	width:23px; height:15px;
	line-height:15px; /* for the vertical alignement */
	background-image:url(images/pg_last.png); /* image you want to rollover */
	background-repeat: no-repeat;
	background-position: left top;
	text-align:left;
	text-decoration:none;	
	color:#333333;
	text-indent:-11113px;
}
#pg_last a.rollover:hover { 
background-position: left bottom; 
color:#333333;
}

#pg_next {float:left; margin:0 5px 0 0; padding:0;}
#pg_next a.rollover {
	display:block;		
	width:46px; height:15px;
	line-height:15px; /* for the vertical alignement */
	background-image:url(images/pg_next.png); /* image you want to rollover */
	background-repeat: no-repeat;
	background-position: left top;
	text-align:left;
	text-decoration:none;	
	color:#333333;
	text-indent:-11113px;
}
#pg_next a.rollover:hover { 
background-position: left bottom; 
color:#333333;
}

#pg_previous {float:left; margin:0 5px 0 0; padding:0;}
#pg_previous a.rollover {
	display:block;		
	width:77px; height:15px;
	line-height:15px; /* for the vertical alignement */
	background-image:url(images/pg_previous.png); /* image you want to rollover */
	background-repeat: no-repeat;
	background-position: left top;
	text-align:left;
	text-decoration:none;	
	color:#333333;
	text-indent:-11113px;
}
#pg_previous a.rollover:hover { 
background-position: left bottom; 
color:#333333;
}

.paginationstyle{margin:0 auto; text-align:center; width:330px; margin-top:10px;}

/*--------------------------------------------------------------------------------------------------------------------------*/
/* services
/*--------------------------------------------------------------------------------------------------------------------------*/

.box3_home{width:252px; float:left; margin-right:10px; font-size:12px}
.box3_home_last{width:252px; float:right;font-size:12px}

	
.home_box{width:779; background:url(images/home_box.png) left bottom repeat; }

.text{padding:10px 0 10px 0; font-size:12px; }

.umbra{background:url(images/bg_umbra.png) repeat; min-height:150px; margin-bottom:10px;}
.umbra p{padding:10px;}