/*  
Theme Name: cepoko.com
Theme URI: http://cepoko.com/
Description: 
Version: 1.0
Author: Widodo
Author URI: http://cepoko.com
*/



/* main */

@charset "utf-8";
body { margin:0; padding:0; width:100%; background:url(images/main_bg.gif);}
html { padding:0; margin:0;}

.blue { color:#58b7ff;}

/* main */
.main {width:100%; padding:0; margin:0 auto; }
.resize { width:949px; margin:0 auto;}

/********** header **********/
.header { }
.block_header {margin:0 auto; width:949px;}
/* logo */
.logo { float:left; padding:0; margin:0; width:299px;}
/* search */
.search { float:right; width:356px; height:57px; margin:40px 0 0 0; padding:0; background:url(images/search_bg.gif) top no-repeat;}
.search form { float:right; padding:15px 50px 0 0; margin:0;}
.search form b, .search form strong { display:block; float:left; color:#b4b4b4; font:normal 11px Arial, Helvetica, sans-serif; padding:4px 10px;}
.search form label { }
.search form input { float:left;}
.search form input.text { padding:3px 3px; margin:2px 5px 0 0; background:url(images/search_form_bg.gif) top no-repeat; border:0; color:#b4b4b4; font:normal 12px Arial, Helvetica, sans-serif; width:198px; height:14px;}
.search form input.button_search { padding:0; margin:0; height:23px; width:23px;}
/* menu */	
.menu { padding:0; margin:0; width:949px; height:58px; background:url(images/menu_bg.gif) top no-repeat;}
.rss { width:100px; float:left; margin:25px 0 0 10px; padding:0;}
.rss img { margin:0; padding:0; float:right;}
.menu ul { float:right; padding:0; margin:7px 30px 0 0; list-style:none; border:0;}
.menu ul li { float:left; margin:0; padding:0;}
.menu ul li a { float:left; margin:0 1px 0 0; padding:15px 0; color:#c8c8c8; font:normal 11px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a span { padding:15px; margin:0; background:none;}
.menu ul li a:hover { color:#60b6ff; background:url(images/r_menu.gif) no-repeat right;}
.menu ul li a:hover span { color:#60b6ff; background:url(images/l_menu.gif) no-repeat left;}
.menu ul li a.active { color:#60b6ff; background:url(images/r_menu.gif) no-repeat right;}
.menu ul li a.active span { color:#60b6ff; background:url(images/l_menu.gif) no-repeat left;}
/********** slider **********/
.slider {margin:0 auto; width:949px; height:362px; padding:0; background:url(images/slider_bg.png) top repeat-y; }
.slider .left1 { float:left; width:390px;}
.slider .slmt {font:normal 16px Tahoma, Geneva, sans-serif; color:#9ca3a8; padding:60px 0 5px 40px; }
.slider h1, .slider h1 a { padding:10px 10px 10px 20px; margin:0; color:#565f65; font:normal 26px Arial, Helvetica, sans-serif;  text-decoration: none; }
.slider strong { margin:0; color:#9ca3a8; font:normal 15px Arial, Helvetica, sans-serif; line-height:1.4em;}
.slider p { font:normal 11px Tahoma, Geneva, sans-serif; color:#5e5e5e; padding:5px 0 5px 40px; margin:0; line-height:1.6em;}
.slider ul.buttons { float:left; padding:20px 0 10px 25px; margin:0; list-style:none;}
.slider ul.buttons li { float:left; padding:0 5px; margin:0;}
.slider .gallery { float:left; width:453px; height:255px; margin:63px 0 0 40px;}
/*toppik*/
.toppik {margin:0 auto 43px auto; width:949px; padding:0; background:url(images/topi_bg.gif) top no-repeat; height:90px;}
.toppik p { padding:40px 0 0 50px; margin:0; font:normal 11px Tahoma, Geneva, sans-serif; color:#5e5e5e; }
.toppik ul { float:right; width:500px; list-style:none; margin:20px 0 0 0; padding:0;}  
.toppik ul li { float:left; padding:0 10px;}
/*blog_body*/
.blog_body { width:949px; background:#fff url(images/body_top_img.gif) top no-repeat; margin:0 auto; padding:0;}
.blog_bottom { margin:0; padding:0 2px; background:url(images/body_bottom_img.gif) bottom no-repeat;}
.blog_body p { margin:0; font:normal 12px Arial, Helvetica, sans-serif; color:#414141; padding:5px; line-height:1.6em;}
.blog_body a { color:#3497c4; text-decoration:underline;}
.blog_body a.big { font:bold 11px Tahoma, Geneva, sans-serif; color:#1575a9; text-decoration:none;}
.blog_body span { font:normal 15px Arial, Helvetica, sans-serif; color:#898989; line-height:1.4em;}
.blog_body span a { font:normal 15px Arial, Helvetica, sans-serif; color:#898989;  text-decoration: none;  }
.blog_body ul { margin:5px 0; padding:5px 0; list-style:none; border:3px solid #eff0f1; background:#e0e2e4;}
.blog_body li { padding:0px 20px; margin:0; font:normal 10px Arial, Helvetica, sans-serif; color:#7a8288; line-height:1.8em;}
.blog_body ul.lists { background:none; list-style:none; margin:0; padding:0; border:0;}
.blog_body ul.lists li { font:normal 11px Arial, Helvetica, sans-serif; color:#bbc1c4; padding:2px 5px; margin:0; line-height:1.8em;}
.blog_body h2 { font:normal 22px Tahoma, Geneva, sans-serif; color:#485157; border-bottom:1px solid #d1d4d7; padding:13px 10px 13px 40px; margin:5px 0; line-height:1.6em;}
.blog_body h2 a{color:#485157;  text-decoration: none;  }
.blog_body h2.welcome { background:url(images/h2_welcome.gif) left no-repeat;}
.blog_body h2.what { background:url(images/h2_what.gif) left no-repeat;}
.blog_body h2.our { background:url(images/h2_our.gif) left no-repeat;}
.blog_body .lorem { width:275px; float:left; padding:10px 20px;}

/*FBG*/
.FBG { margin:0 auto; padding:0; width:949px;}
.FBG h2 { font:normal 22px Tahoma, Geneva, sans-serif; color:#fff; border-bottom:1px solid #414a50; padding:13px 5px; margin:5px 0; line-height:1.6em;}
.FBG p { font:normal 11px Tahoma, Geneva, sans-serif; color:#666666; padding:5px; margin:0; line-height:1.6em;}
.FBG a { color:#75aecd; text-decoration:underline;}
.FBG span { color:#878787;}
.FBG .larem { width:275px; float:left; padding:10px 20px;}
.larem li {background:url(images/related_arrow.gif) left no-repeat; padding:0px 0px 0px 15px; font:normal 11px Tahoma, Geneva, sans-serif; color:#878787;  list-style: none; }
.larem li  a {color:#878787; text-decoration: none;}
.larem li  a:hover {color:#3497c4; text-decoration: none;}
/* search2 */
.search2 { float:right; margin:10px 0 0 0; padding:0;}
.search2 form { padding:5px 0 0 0; margin:0;}
.search2 form label { }
.search2 form input { float:left;}
.search2 form input.text { padding:8px 3px; margin:2px 5px 0 0; background:url(images/search_foorm_bg2.gif) top no-repeat; border:0; color:#b4b4b4; font:normal 12px Arial, Helvetica, sans-serif; width:175px; height:14px;}
.search2 form input.button_search { padding:0; margin:2px 0 0 0; height:28px; width:74px;}

/*left*/
.left { width:600px; float:left; padding:10px 20px; margin:0;   }
.left small {font:normal 11px Tahoma, Geneva, sans-serif; color: black; padding:5px; margin-bottom: 10px;}
.left small a {font:normal 11px Tahoma, Geneva, sans-serif; color: black;  text-decoration: none;  }
.left small a:hover {color: #2d98c8; }
.left h2 { font:normal 32px Tahoma, Geneva, sans-serif; color:#4e4a38; border-bottom:1px solid #d1d4d7; padding:10px 10px 10px 40px; margin:0; line-height:1.3em;}
.left h2.port { background:url(images/h2_port.gif) left no-repeat;}
.left h2.sevr { background:url(images/h2_servises.gif) left no-repeat;}
.left h2.con { background:url(images/h2_con.gif) left no-repeat;}
.left h3 { font:normal 22px Tahoma, Geneva, sans-serif; color:#4e4a38; padding:10px; margin:0; line-height:1.4em;}
.left a { font:bold 11px Tahoma, Geneva, sans-serif; color:#2799cc; text-decoration:underline;}
.left .img { float:left; margin:10px; padding:0;}
/*right*/
.right { width:245px; float:left; padding:10px 20px; margin:0;}
.right h2 { font:normal 22px Tahoma, Geneva, sans-serif; color:#485157; border-bottom:1px solid #d1d4d7; padding:13px 10px; margin:0; line-height:1.6em; text-transform:uppercase;}
.right a { font:bold 11px Arial, Helvetica, sans-serif; color:#5e676d; float:right; text-decoration:none;}
.right em { font:italic 13px Arial, Helvetica, sans-serif; color:#5d666c; line-height:1.6em; margin:0;}
.right ul { background:none; margin:10px; padding:0; list-style:none; border:0;}
.right li { padding:5px 5px; margin:0; border-bottom:1px solid #e0e2e4;}
.right li a { float:none; font:normal 11px Arial, Helvetica, sans-serif; color:#2d98c8; text-decoration:none;}
.right li a:hover { text-decoration:underline;}
/********** contact form **********/
#contactform { margin:0; padding:5px 10px;}
#contactform * { color:#6e6e6e;}
#contactform ol { margin:0; padding:0; list-style:none;}
#contactform li { margin:0; padding:0; background:none; border:none; display:block;}
#contactform li.buttons { margin:5px 0 5px 0;}
#contactform label { margin:0; width:110px; display:block; padding:5px 0; font:normal 11px Tahoma, Geneva, sans-serif; color:#6e6e6e; text-transform:capitalize; float:left;}
#contactform label span { font:normal 10px Arial, Helvetica, sans-serif;}
#contactform input.text { width:440px; border:1px solid #dedede; margin:5px 0; padding:5px 2px; height:16px; background:#fff; float:left;}
#contactform textarea { width:440px; border:1px solid #dedede; margin:10px 0; padding:2px; background:#fff; float:left;}
#contactform li.buttons input { padding:3px 0; margin:0 0 0 110px; border:0; color:#FFF;}
p.response { text-align:center; color:#2c2c2c; font:bold 11px Arial, Helvetica, sans-serif; line-height:1.8em; width:auto;}

/*************footer**********/
.footer { padding:15px 0; margin:5px auto 0 auto; background:#090909 url(images/footer_bg.gif) top repeat-x; width:949px; color:#646d73; font:normal 11px Tahoma, Geneva, sans-serif;}
.footer .text_left  { float:left; width:450px; padding:0x; margin:0 0 0  20px; color:#646d73; font:normal 10px Tahoma, Geneva, sans-serif;}
.footer a { color:#646d73; font:normal 11px Tahoma, Geneva, sans-serif; padding:0 5px; text-decoration:none;}
.footer a:hover {color: #ffffff;}
.text_left { text-align:left;}

.footer .text_right { text-align:right; float:right; margin-right: 20px;}

.footer li {
	float: left; list-style: none; 
	
}



p.clr, .clr { clear:both; padding:0; margin:0; background:none;}
li.bg, .bg { clear:both; border-top:1px dashed #b8bec1; padding:0; margin:5px 0; background:none;}


#slider { margin:0; padding:0; list-style:none; }
#slider ul,
#slider li { margin:0; padding:0; height:255px; list-style:none; }
/* 
    define width and height of list item (slide)
    entire slider area will adjust according to the parameters provided here
*/
#slider li { width:453px; height:255px; overflow:hidden; }
p#controls { margin:0; padding:0; position:relative; }
#prevBtn,
#nextBtn { display:block; margin:0; overflow:hidden; width:47px; height:47px; position:absolute; left:-30px; top:-140px; }
#nextBtn { left:436px; }
#prevBtn a { display:block; width:47px; height:47px; background:url(images/l_arrow.png) no-repeat 0 0 !important; background:url(images/l_arrow.gif) no-repeat 0 0;}
#nextBtn a { display:block; width:47px; height:47px; background:url(images/r_arrow.png) no-repeat 0 0 !important; background:url(images/r_arrow.gif) no-repeat 0 0;}




/*>>>>> COMMENTS <<<<<*/
#comments_wrap  {	width:100%;  font-size: 11px;  }
.commentlist {font:normal 11px Tahoma, Geneva, sans-serif;}
.commentlist a, .commentlist span {font:normal 11px Tahoma, Geneva, sans-serif;}
ol li.comment  {	display: block;	padding: 10px 0 10px 10px;  background: #f6f6f6; margin: 5px 0px;  border: 1px solid #dcdcdc;  }
ol li.comment .comment-author  {	}
ol li.comment .comment-author img  {float: right; margin: 0 10px; padding: 5px;  background: white; border: 1px solid #dcdcdc; }
ol li.comment .comment-author cite  {font-weight: bold;	}
ol li.comment .comment-meta  {	font-size: 10px;	text-transform: uppercase;	margin: 0 0 10px 0;    }
ol li.comment p  {margin: 0 0 5px 0;}
ol li.comment .reply  {text-transform: uppercase;	font-weight: bold;	margin: 7px 0 0 0;}

/*>>>>> THREADED COMMENTS <<<<<*/
ol li.comment ul.children  {	margin: 10px 0 0 5px;}

/*>>>>> COMMENT FORM <<<<<*/
#form_wrap {padding:  0;	position: relative;}
#form_wrap h2 {	padding-bottom: 28px;	position: relative;}
#form_wrap .form-left {	width: 30%;	float:left;	margin-top: 1px;}
#form_wrap .form-right {	float:right;	width: 64%;	margin-right: 5px;}
#form_wrap textarea, #form_wrap .form-left input {	padding: 7px 10px;}
#form_wrap textarea {	width: 95%;	margin-bottom: 18px; font:normal 11px Tahoma, Geneva, sans-serif;}
#form_wrap .form-left input {	width: 147px;	display: block;	margin-bottom: 10px; font-size: 11px;}
#form_wrap input.sb {	width: 78px;	height: 28px;	font-weight: bold;	text-transform: uppercase;}
#form_wrap p.lc_logged {	margin-top: -20px;	position: relative;}
#cancel-comment-reply-link  {	text-transform: uppercase;	font-weight: bold;	font-size: 10px;}



.thread-alt {background-color: #f8f8f8;}
.thread-even {	background-color: white;}
.depth-1 {border: 1px solid #ddd;}

.even, .alt {	border-left: 1px solid #ddd;}

/* Begin Images */
p img {	padding: 0;	max-width: 100%;	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {	display: block;	margin-left: auto;	margin-right: auto;	}

img.alignright {	padding: 4px;	margin: 0 0 2px 7px;	display: inline;	}

img.alignleft {	padding: 4px;	margin: 0 7px 2px 0;	display: inline;	}

.alignright {	float: right;	}

.alignleft {	float: left	}
/* End Images */



.paketdesain {width: 44%; background: #f5f5dc ; 
border: 1px solid #c7c83f ; float: left; height: 400px;
padding: 10px;
 font-size: 11px;
 color: #474747;
 margin: 5px 5px 10px 0px;
 -moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	text-align: center;
}
.paketdesain h3 {
	text-align: center;
	color: #dc143c;
	font-size: 14px;
}
.paketdesain p {
	font-size: 10px;
}
.paketdesain ul li {
	background: url(images/c.gif) no-repeat 0 4px;
	padding-left: 15px;
	text-align: left;
	
}

.portofolio {width: 95%; background: #f0f8ff url(images/portofoliobgr.jpg) repeat-x 0 0; border: 1px solid #46a9ff ; float: left; height: 210px;
padding: 0 10px;
 font-size: 11px;
 color: #474747;
 margin: 5px 15px 10px 0px;
 -moz-border-radius: 10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}
.portofolio h3 {
	color: #dc143c;
	font-size: 16px;
}
.portofolio ul li {
	background: url(images/c.gif) no-repeat 0 4px;
	padding-left: 15px;
	
}
.portofolio img {
	float : left;
	width: 40%;
	height: 150px;
	border: 1px solid #778899;
	padding: 3px;
	background: #dcdcdc;
}
.portofolio .keterangan {
	float : left;
	width: 55%;
	height: 150px;
	margin-left: 15px;

}
.alamat {
	width: 100%;color:#878787;  font:normal 11px Tahoma, Geneva, sans-serif; 
}
.alamat span {
	color: #ababab;
	font-weight: bold;
}
.alamat .kiri {
	float:left; width: 23%; padding: 2px 0;
}
.alamat .kanan {
	float:right; width: 75%; padding: 2px 0;
}
.alamat .kanan2 {
	float:right; width: 72%; padding: 2px 1px;
}
.blogroll {
	margin-left: -20px !important; margin-left: 0px;
	margin-top: -3px  !important; margin-top: 0px ;
}
.blogroll li {
		list-style: none;
}
.linkcat {
	float: left; width:160px;  min-height: 200px;
	
}
.linkcat h2 {
	font-size: 16px;
	margin-left: -35px;
	border-bottom: none;
	text-decoration: none;

}