* {margin:0; padding:0;}

@font-face {
	font-family: "AllerDisplay"; src: url("font/AllerDisplay.ttf") format("opentype");
	src: url("font/Tertre.eot");
    src: local("AllerDisplay"), 
    url("font/AllerDisplay.woff") format("woff"), 
    url("font/AllerDisplay.otf")     format("truetype"), 
    url("font/AllerDisplay.svg#webfontpB9xBi8Q")     format("svg");
}

.left {float:left;}
.right {float:right;}
.clear {clear:both;}
img.centered  {	padding: 5px 5px; display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px; padding: 0px; max-width:600px; border: 1px solid #DDDDDD;	background:#fff;}
	
img.alignnone {	padding: 5px 5px; margin: 0px 10px 10px 0px; display: inline; max-width:600px;}
img.alignright { padding: 5px 5px; margin: 0px 10px 10px 0px; display: inline; 	max-width:600px;}
img.alignleft {	padding: 5px 5px; margin: 0px 10px 10px 0px; display: inline;	max-width:600px; }
.aligncenter {display: block; margin-left: auto; margin-right: auto; margin-bottom: 10px;}
.alignright {float: right; margin: 0px 0px 10px 10px;}
.alignleft {float: left; margin: 0px 10px 10px 0px;}
body {background:#000; font:normal 13px/120% "arial"; color:#393939;}
#wrap{ background: url(images/bg.jpg) top center no-repeat; width: 1264px; margin: 0 auto;}
#container { width: 1018px; margin: 0 auto;}

#header, #main, #header2, #footer, #box-top, #supported {width:1018px; margin:0 auto; position:relative;}

#header {background:url(images/header.jpg) top left no-repeat; height:60px;}
#header .logo {	border:none;}
li.nav-home{ background: url(images/nav-home.png) bottom no-repeat; width: 93px; text-align: center;}
li.nav-home:hover{ background: url(images/nav-home.png) bottom no-repeat #565656; width: 93px; text-align: center;}

li.nav-kita{ background: url(images/nav-kita.png) bottom no-repeat; width: 93px; text-align: center; }
li.nav-kita:hover{ background: url(images/nav-kita.png) bottom no-repeat #565656; width: 93px; text-align: center; }

li.nav-kerja{ background: url(images/nav-kerja.png) bottom no-repeat; width: 93px; text-align: center; }
li.nav-kerja:hover{ background: url(images/nav-kerja.png) bottom no-repeat #565656; width: 93px; text-align: center; }

li.nav-layanan{ background: url(images/nav-layanan.png) bottom no-repeat; width: 93px; text-align: center; }
li.nav-layanan:hover{ background: url(images/nav-layanan.png) bottom no-repeat #565656; width: 93px; text-align: center; }


li.nav-blog{ background: url(images/nav-blog.png) bottom no-repeat; width: 93px; text-align: center; }
li.nav-blog:hover{ background: url(images/nav-blog.png) bottom no-repeat #565656; width: 93px; text-align: center; }

li.nav-kontak{ background: url(images/nav-kontak.png) bottom no-repeat; width: 93px; text-align: center; }
li.nav-kontak:hover{ background: url(images/nav-kontak.png) bottom no-repeat#565656; width: 93px; text-align: center; }

#dropmenu{margin:15px 0 0 0 ; padding:0 ; list-style-type:none; list-style-position:outside; position:relative; z-index:200; font-weight:normal;}

#dropmenu ul {margin:0 0 0 0 ; 	padding:0 ; list-style-type:none; list-style-position:outside; position:relative; z-index:20; font-weight:normal;} 

#dropmenu a {display:block; margin: 8px 20px; text-decoration:none; font: normal 12px Arial, Helvetica, sans-serif; text-transform: uppercase; color: #fff;} 
#dropmenu a:hover { color:#fff; background:#565656; display: block; } 
#dropmenu ul li a {padding:8px 5px; display:block; text-transform: capitalize; text-align:left;}
#dropmenu li {margin: 0 1px; float:left; position:relative; padding:0 0 0 0; } 
#dropmenu ul {background:#565656; position:absolute; display:none; top:28px; left:0px; border-bottom:3px solid #0587ad;} 
#dropmenu ul li{border:none; border-bottom:1px dashed #fff; z-index:21;} 
#dropmenu ul li a { color:#fff; display:block; font: normal 12px Arial, Helvetica, sans-serif; } 
#dropmenu ul li a:hover{  color:#e7e5e5; } 
#dropmenu li ul { width:auto; } 
#dropmenu li ul a {margin:0; height:auto; float:left; width:81px; display:block; } 
#dropmenu ul ul {top:auto;} 
#dropmenu li ul ul {left:50px; top:-1px; margin:0px 0 0 10px;}
#dropmenu li:hover ul ul, #dropmenu li:hover ul ul ul, #dropmenu li:hover ul ul ul ul {display:none;} 
#dropmenu li:hover ul, #dropmenu li li:hover ul, #dropmenu li li li:hover ul, #dropmenu li li li li:hover ul {display:block;} 
#box-slide{ height:533px; margin-bottom: 10px; position: relative;}

#main-wrap{margin: 0 auto; margin-bottom: 20px; margin-top: 3px;}
#main{ background: url(images/content1.jpg) no-repeat; width: 888px; height:413px; margin: 0 auto; padding: 20px 65px;}
#main h1{ font: normal 28px "AllerDisplay", Arial, Helvetica, sans-serif; color: #fff; text-transform: uppercase; padding: 20px 0 0 20px;}
#main #content { margin-top: 82px; overflow:auto; width: 849px; height: 255px; padding: 20px; font: normal 15px/160% Arial, Helvetica, sans-serif; text-align: justify; color:#797878; display: block;}

#main2{ background: url(images/content2.jpg) no-repeat; width: 958px; height:413px; margin: 0 auto; padding: 1px 30px;}
#main2 h1{ font: normal 28px "AllerDisplay", Arial, Helvetica, sans-serif; color: #fff; text-transform: uppercase; padding: 20px 0 0 20px;}
#main2 #content { margin-top: 10px; width: 951px; height: 445px; padding: 3px 0px 3px 4px; font: normal 15px/160% Arial, Helvetica, sans-serif; text-align: justify; color:#797878; display: block;}


h1{ font: normal 13px Arial, Helvetica, sans-serif; color:#fff; text-transform: uppercase;}
.upp{ font: normal 43px "AllerDisplay", Arial, Helvetica, sans-serif; color:#fff;}

.porfolio { padding-left: 30px;}
.porfolio img{ background: #c7c4c4; padding:5px;}
.porfolio ul{ padding:0; margin:0; list-style: none;}
.porfolio li a{ padding:0; margin:10px; list-style: none; float: left; border: 1px solid #c7c4c4;}
.sidebar{ float: right; width: 150px; color: #fff;}
.sidebar ul{ padding: 0; margin: 0; list-style: none;}
.sidebar ul li{ padding: 0; margin: 0; list-style: none;}
.sidebar ul li h2{ font: normal 18px Arial, Helvetica, sans-serif; text-transform: uppercase; margin-bottom: 10px;}
.sidebar ul li a{ padding: 0; margin: 0; list-style: none; color:#fff; text-decoration: none;}
.blog-wrap{ overflow: auto; padding: 10px 0; height: 380px;}
.blog{ color: #fff; width: 714px; border-right: 1px solid #7a7676; float: left; padding: 10px 20px;}
.blog .post{ color: #fff; margin-bottom: 30px;}
.blog .post .title{}
.blog .post .title h1 a{ font: normal 16px Arial, Helvetica, sans-serif; color: #fff; text-transform: uppercase; width: 351px; float: left; text-decoration: none; text-align:left;}
.blog .post .date{ background: url(images/date.png) no-repeat; width:59px; height: 60px; float: left; color: #fff; text-align: center; padding-top: 10px; margin-right: 20px;}
.tgl{font: normal 30px/120% Arial, Helvetica, sans-serif; color: #fff;}
.month{ font: normal 12px/70% Arial, Helvetica, sans-serif;}
.col-contact{ width: 380px; margin: 0px 10px;}
.field{ width: 236px; height:17px; padding: 2px 10px; border: none; background:#d6d6d6;}
.pesan{ width: 236px; height: 80px; padding: 2px 10px; border: none; background:#d6d6d6;}
.sbmt{ background: url(images/submit.jpg) repeat-x; width: 105px; height: 26px; border: none; text-align: center; text-transform:capitalize; color: #fff; cursor: pointer; float: right;}
#bottom-wrap{ background: url(images/bottom-wrap.jpg) no-repeat; width:1040px; height: 168px; margin: 0 auto;}
#bottom{ background: url(images/bottom.jpg) no-repeat; width:1018px; height: 168px; margin: 0 auto; font: normal 12px/150% Arial, Helvetica, sans-serif;}
#bottom .col{width: 193px; float: left; padding: 15px; text-align:justify; height:92px;}
#bottom .col-right{width: 317px; float: left; padding: 15px; text-align:justify; height:92px;}
#bottom .col h2, .col-right h2{font: normal 18px "AllerDisplay"; margin-bottom: 5px; text-transform: uppercase;}
#bottom .sosial{float: left; width: 383px; font: normal 14px/120% "AllerDisplay"; color: #fff; text-transform: uppercase; padding-top: 7px; padding-left: 15px;}
#bottom .sosial ul{ padding:0; margin:0; list-style: none; float: left;}
#bottom .sosial li{ padding:0 3px; margin:0; list-style: none; float: left;}
#bottom .chat{float: right; width: 350px; font: normal 14px/120% "AllerDisplay"; color: #fff; text-transform: uppercase; padding-top: 7px;}
#bottom .chat ul{ padding:0; margin:0; list-style: none; float: left;}
#bottom .chat li{ padding:0 3px; margin:0; list-style: none; float: left;}

#footer-wrap { border-top: 1px solid #7a7a7a; margin-top: 10px;}
#footer {height:41px;}

#footer .nav {padding-top:10px; margin-right: 0px;}
#footer .nav:after {clear:both;}
#footer .nav ul li {list-style:none; float:left; margin:0 5px; padding:0 5px; border-left:1px solid #6a6969; padding-left:10px;}
#footer .nav ul li.first {border:none;}
#footer .nav ul li.last:after {clear:both;}
#footer a {text-decoration:none; color:#6a6969; font-family:"arial"; outline:none;}
#footer .nav ul li a:hover {text-decoration:underline;}

#footer .copy {font-size:11px; color:#6a6969; padding-top:10px;}
#footer .copy a {padding:0 5px;}

<!---------------SLIDE HOME------------------->
.lof-slidecontent{
	position:relative;
	overflow:hidden;
	border:#F4F4F4 solid 1px;
	width:1018px;
	height:533px;
}
.lof-slidecontent .preload{
	height:100%;
	width:100%;
	background:#FFF;
	position:absolute;
	top:0;
	left:0;
	z-index:100000;
	color:#222222;
	text-align:center
}
.lof-slidecontent .preload div{
	height:100%;
	width:100%;
	background:transparent url(images/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
	position:relative;
	height:100%;
	z-index:3px;
	overflow:hidden;
}


/*******************************************************/
.lof-main-item-desc{
	z-index:100px;
	position:absolute;
	top:150px;
	left:50px;
	width:400px;
	background:url(images/transparent_bg.png);

	/* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
	color:#FFF;
	margin:0 8px;
	padding:8px 0
}
.lof-main-item-desc h3 a{
	color:#222222;	
	margin:0;
	font-size:140%;
	padding:20px 8px 2px;
	font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
.lof-main-item-desc h3 a:hover{
	color:#FF6;
	text-decoration:underline;
}


/* main flash */
ul.lof-main-wapper{
	/* margin-right:auto; */
	overflow:hidden;
	background:transparent url(images/load-indicator.gif) no-repeat scroll 50% 50%;
	padding:0px;
	margin:0;
	height:533px;
	overflow:hidden;
}

ul.lof-main-wapper li{
	overflow:hidden;
	padding:0px;
	margin:0px;
	height:533;
	width:1018px;
	float:left;
}
.lof-opacity  li{
	top:0;
	left:0;
	float:inherit;
	position: absolute;
}
ul.lof-main-wapper li img{
	padding:0px;	
	width:1018px;
}

li-desc{
	z-index:100px;
	position:absolute;
	top:150px;
	left:50px;
	width:400px;
	background:url(images/transparent_bg.png);

	/* filter:0.7(opacity:60) */
}
li-desc p{
	color:#FFF;
	margin:0 8px;
	padding:8px 0
}
li-desc h3 a{
	color:#222222;	
	margin:0;
	font-size:140%;
	padding:20px 8px 2px;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}
li-desc h3 a:hover{
	color:#FF6;
	text-decoration:underline;
}

/* item navigator */
ul.lof-navigator{
	top:0;
	padding:0;
	margin:0;
	width:100%;
	position:absolute;
}
ul.lof-navigator li{
	cursor:hand; 
	cursor:pointer;
	list-style:none;
	width:100%;
	padding:0;
	margin:0;
	overflow:hidden;
}
.lof-navigator-outer2{
	position:absolute;
	z-index:100;
	height:533px;
	width:310px;
	overflow:hidden;
	color:#FFF;
	float: right;
	position: absolute;
	left: 790px;
	top: 0px;
}
.lof-navigator li.active{
	background:url(images/arrow-bg.png) no-repeat left center; 
	color:#FFF;
}
.lof-navigator li:hover{
	
}


.lof-navigator li h3{
	color:#FFF;
	padding:15px 20px 0 !important;
	margin:0;
	font: normal 14px Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-align: right;

}
.lof-navigator li div{
	background:url(images/transparent_bg.png);
	color:#222222;
	height:100%;
	position:relative;
	margin-left:15px;
	padding-left:15px;
	border-top:1px solid #E1E1E1;
}

.lof-navigator li.active div{
	background:url(images/grad-bg.gif);
	color:#FFF;
}
.lof-navigator li img{
	height:60px;
	width:60px;
	margin:15px 15px 10px 0px;
	float:left;
	padding:3px;
	border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
	border:#6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
	color:#FFF;
}