@import url("../fonts/openSans/stylesheet.css");               /* Custom Fonts */
@import url("../fonts/websymbols/stylesheet.css");               /* Custom Fonts */
body{
margin:0px auto;
font: 13px/19px "OpenSansRegular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:12px;
color:#333333;
padding:0;
margin:0;
display:block;
-khtml-user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
unselectable:on;
background:#ffffff;
}

h1{
font-size:16px;
margin-top:0px;
margin-bottom:10px;
padding:0px;
}
h2{
font-size:16px;
margin-top:0px;
margin-bottom:5px;
padding:0px;
}
h5{
font-size:11px;
margin-top:0px;
margin-bottom:5px;
padding:0px;
}
td{
vertical-align:top;
padding:5px;
font-size:12px;
text-align:left;
}
tr{
font-size:12px;
}

/*akhir tooltip */
a {
	color:#534402;
	text-decoration:none;
}
a:hover{
	color:#473f00;
	text-decoration:none;
}
img{
	border: none;
}

del{
	color:#d71e00;
}
/*layout*/
#main-wrap{
	margin: 0;
	padding:0;
   -webkit-transition: all 0.6s ease-in-out;
   width:1020px;
   margin:0 auto;
   overflow:hidden;
   
}

#main-footer{
	clear:both;
	margin: 0 auto;
	overflow:hidden;
	background:#feffa0;
	border-top:4px solid #444444;
}
#main-footer .center{
	width:980px;
	margin:0 auto;
	color:#ffffff;
}
#main-footer .center a{
	color:#ffffff;
}
#main-footer .center a:hover{
	color:#000000;
}
#main-footer .left{
	float:left;
	width:400px;
}
#main-footer .right{
	float:right;
	width:400px;
	text-align:right;
}
#wrapper {
	margin: 0;
	padding: 0;
	
   
   

 }
/*---header content---*/
#header{
	
	padding: 0;
	margin:0 auto;	
	width:100%;


}
#top-head{
	margin: 0;
	padding: 0;
	
}
#top{
	width:980px;
	margin: 0 auto;
	padding: 0;
	overflow:hidden;
	color:#222222;
	

}

.toph{
	margin-top:10px;
	float:right;
	color: #222222;
	text-align:right;
	line-height:15px;
	
}
.toph a{
	color : #222222;
}
.toph a:hover{
	color : #ea9a00;
}
.topsearch{
	clear:both;
	border:1px solid #ffffff;
	overflow:hidden;
	height:30px;
	border-radius:4px;
	color:#ddd;
	background:#ffffff;
	padding-top:4px;
	border:1px solid #dddddd;
	width:215px;
	float:right;
	margin-top:10px;
	margin-bottom:10px;
}
.search-teks{
font-size:12px;
width:170px;
height:25px;
padding: 0 4px 0 4px;
margin-right:4px;
border:none;
font-family:Arial;
float:left;
background:#ffffff;

}

.tombol-search{
background:url(../images/btn-cari.png) no-repeat left;
border:none;
width:25px;
height:25px;
float:right;
cursor:pointer;

}
.loginbar{
float:right;
vertical-align:top;
background:url(template/images/lg.png) top right no-repeat;
height:30px;
line-height:30px;
min-width:150px;
border-radius:0 0 4px 4px;
margin-top:4px;
}
.language{
float:left;
margin-bottom:10px;
vertical-align:top;
background:url(template/images/lg.png) top right no-repeat;
height:30px;
line-height:30px;
width:120px;
border-radius:0 0 4px 4px;
}
.language-box{
float:left;margin-right:10px;color:#444444;
}
#logo{
width: 550px;
float:left;
margin-top:15px;
margin-right:10px;
margin-bottom:8px;

}
#logo a{
text-decoration:none;
color:#000000;
}
#logo a:hover{
color:#FF6600;
}

#welcome{
min-width:200px;
float:right;
font: 13px/19px "OpenSansRegular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #4b4b4b;

}
#head-menu{
margin: 0;
padding: 0;
background:url(../images/menu-bg.png) #5f5f5f repeat-x ;
}
#menu{
margin:0;
padding:0px;
background:url(../images/menu-bg.png) #5f5f5f repeat-x ;
line-height:32px;
height:32px;
margin-bottom:5px;
																										
}
#menu-kanan{
float:right;
font-size:12px;
font-weight:bold;
line-height:32px;
height:32px;
}

.menu-img{
float:left;
margin-right:5px;
}

ul.topnav {  
    list-style: none;  
    padding: 0 10px;
	padding-left:0px;	
    margin: 0;  
    float: left;   
    font-size: 1em;  
	line-height:32px;
	height:32px;
	
}  
ul.topnav li {  
    float: left;  
    margin: 0;     
    position: relative; /*--Declare X and Y axis base for sub navigation--*/

}  
ul.topnav li a{  
	padding: 0 10px 0 10px;
    line-height:32px;
	height:32px; 
    color: #fff;  
    display: block;  
    text-decoration: none;  
    float: left;  
	font-weight:normal;
	text-shadow:2px 2px 2px #646464;
}  
ul.topnav li a:hover, ul.topnav li a.active{  
    background: url(../images/menu-bg-hover.png) #f3aa14 repeat-x left top;  
	
}  

ul.topnav li span.subhover {background-position: center bottom bottom; cursor: pointer;} /*--Hover effect for trigger--*/  
ul.topnav li ul.subnav {  
    list-style: none;  
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/  
    left: 0; top: 32px;  
    background: #333;  
    margin: 0; padding: 0;  
    display: none;  
    float: left;  
    border: 1px solid #111;  
	z-index:999999;
}  
ul.topnav li ul.subnav li{  
    margin: 0; 
	padding: 0;  
    border-top: 1px solid #252525; /*--Create bevel effect--*/  
    border-bottom: 1px solid #444; /*--Create bevel effect--*/   
	min-width: 180px;
	height:auto;

}  
html ul.topnav li ul.subnav li a {  
    float: left;  
    min-width: 180px; 
	height:auto;
	line-height:20px;
	padding: 5px 10px 5px 10px;
    background: #333 url() no-repeat center;   
}  
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/  
    background: #f3aa14 url(../images/menu-bg-hover.png) repeat-x left top;   
}  


.input-teks{
font-size:12px;
padding:4px;
border:1px solid #888888;
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
z-index: 6666669 ;
font-family:Arial;
}
.input-tombol{
font-size:12px;
padding:2px 4px 2px 4px;
border:1px solid #ffffff;
background:url(../images/bg-menu.jpg) #01a6ff repeat-x;
color:#FFFFFF;
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
z-index: 6666669 ;
}
.input-tombol:hover{
font-size:12px;
background:url(../images/bg-cari.jpg) #5f5f5f repeat-x;
color:#ffffff;
cursor:pointer;
}
.logout-tombol{
font-size:12px;
padding:2px 4px 2px 4px;
border:1px solid #ffffff;
background:url(../images/logout-tombol.png) #01a6ff repeat-x;
color:#FFFFFF;
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
z-index: 6666669 ;
width:150px;
}
.logout-tombol:hover{
font-size:12px;
background:url(../images/bg-cari.jpg) #5f5f5f repeat-x;
color:#ffffff;
cursor:pointer;

}
#banner{
width:100%;
height:250px;
margin:0 auto;
clear:both;
margin-top:10px;
border-radius:8px;
overflow:hidden;


}


/* end header */

.cleaner_h0 { clear: both; width:100%;}
.cleaner_h5 { clear: both; width:100%; height: 5px; }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }
.cleaner_h120 { clear: both; width:100%; height: 120px; }
 


/*content*/
#container{
width:980px;
margin:0 auto;
overflow:hidden;
background : #ffffff;

}
#content{
margin:0 auto;
overflow:hidden;
margin-top:15px;
margin-bottom:10px;
}

#left{
width:250px;
float:left;
min-height: 400px;
overflow:hidden;

}
#right{
width:225px;
float:right;
margin-top:20px;
margin-right:20px;
min-height: 400px;
overflow:hidden;


}
#content-center{
width:710px;
float:left;
line-height:18px;
min-height: 400px;
margin: 0 0 0 10px;

}
#welcome-main{
float:left;
overflow:hidden;
margin:20px 0 10px 10px;
padding:0 5px 5px 5px;
color:#222222;

}


#title h3{

background:url(../images/top.png) repeat-x;
color:#ffffff;
text-align:left;
font-weight:bold;
border-radius: 5px;
display:block;
height:30px;
line-height:30px;
padding:0px 8px 0px 8px;
margin-bottom:5px;
overflow:hidden;

}
.bgtitle{
	background:url(../images/arrow1.png) no-repeat left center;
	width:30px;
}
#title2 h2{

margin:0px;
padding:5px;
padding-left:0px;
min-height:24px;
margin-bottom:10px;
margin-top:0px;
margin-left:5px;
margin-right:5px;
width:200px;
float:left;

}
#titleprod h2{

margin:0px;
padding:5px;
padding-left:0px;
height:24px;
background:url(../images/line.png) repeat-x bottom ;
margin-top:0px;
margin-right:5px;


}
#title h4{

margin:0px;
padding:5px;
padding-left:0px;
height:20px;
border-bottom:1px solid #dddddd;
margin-bottom:10px;
margin-top:0px;
margin-left:5px;
margin-right:5px;
color: #787878;
width:550px;
clear:both;

}
.line{
background:url(../images/line.png) repeat-x;
height:10px;
margin-bottom:10px;
margin-top:0px;
margin-left:5px;
margin-right:5px;
}
.line2{
background:url(../images/line.png) repeat-x;
height:1px;
margin-bottom:10px;
margin-top:0px;

}
#content-welcome{
font-size:12px;
text-align:justify;
overflow:hidden;
}
#content-post{
margin: 10px;
text-align:justify;
overflow:hidden;
font: 13px/19px "OpenSansRegular", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;

}
#content-post ul {
padding-left:0;
overflow:hidden;

}
#content-post ul li{
padding-left:0;
overflow:hidden;
margin-bottom:10px;

}
#content-post ul li .left{
float:left;width:200px;height:170px;margin:0 10px 10px 0;overflow:hidden;
}

#content-post ul li .right{
float:left;width:450px;margin: 0 0 10px 10px;
}
/*Post content */

#post{
	margin:0;
	padding:0;
	min-height:80px;
	border-bottom:1px solid #dddddd;
	padding-bottom:10px;
	margin-bottom:10px;
	overflow:hidden;
	text-align:justify;
}
#post .imgpost{
	border: 1px solid #dddddd;
	width:80px;
	height:80px;
	border-radius:4px;
	float:left;
	margin-right:10px;
}
#post .contentpost{
	float:left;
	clear:both;
	margin-bottom:10px;
	overflow:hidden;
	margin-top:10px;
	
}
#post .contentpost {
	width:100%;
	margin:0;
	padding:0;
	height:20px;
}
#post .contentpost  .tgl{
	float:right;
	padding:5px;
}
#post .contentpost .titlepost{
	float:left;
	font-weight:bold;
	font-size:14px;
	color:#000000;

}
#post .contentpost .mainpost{
	width:100%;
	float:left;

}
#content-cara-belanja ol{
margin-left:20px;
margin-bottom:0px;
margin-top:0px;
padding:0px;
}
#content-cara-belanja li{
margin-bottom:10px;
}


#sidebar-title h3{
background:url(../images/sidebar-top.png) repeat-x;
color:#ffffff;

height:30px;
line-height:30px;
text-align:left;
font-weight:bold;
border-radius: 5px;
display:block;
padding:0 8px 0 8px;
margin-bottom:5px;
}
#sidebar-content-privat{

min-height: 50px;
overflow:hidden;
border-radius: 5px;
border:none;

}
#sidebar-content{
border-radius:0 0 7px 7px;
min-height:50px;
overflow:hidden;
padding:8px;
border:1px solid #dddddd;
border-radius:5px;
}
#sidebar-content a{
text-decoration:none;
color:#333;
}
#sidebar-content a:hover{
text-decoration:none;
color:#473f00;
}
#sidebar-content ul{
margin-bottom:0px;
margin-top:0px;
padding:0px;
list-style-type:none;
}
#sidebar-content li{
list-style-type:none;
margin-left:0px;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px;
overflow:hidden;
}
#sidebar-bottom{
background:url(../images/footer-sub.jpg) repeat-x #e2e2e2 left;
color:#FFFFFF;
height:15px;
font-weight:bold;
border-radius:0 0 5px 5px;
}
.box-devider{
margin:0px;
padding:0px;
background: url(../images/box-devider.png) no-repeat top center;
margin:0 auto;
height:18px;
clear: both;

}
.img-right{
float:right;
padding:2px;
}
#bottom{
	margin:0 auto;
	min-height:50px;
	overflow:hidden;
	margin-bottom:10px;
	padding-top:10px;
	padding-bottom:10px;
	width:980px;
}
#bottom  .column{
	width: 225px;
	margin-right:8px;
	margin-left:8px;
	float:left;
	min-height:120px;
   color:#444444;
	

}

#bottom ul{
	margin:0;
	padding:0;
	width:210px;
	float:left;
	overflow:hidden;
	margin-right:10px;
	list-style-type:none;
	
}
#bottom ul li{
	list-style-type:none;
	height:20px;
	line-height:20px;
	background: url(../images/bullet.png) left center no-repeat;
	padding-left:15px;
}
#bottom ul li a{
	text-decoration:none;
	color : #444444;
}
#bottom ul li a:hover{
	text-decoration:none;
	color:#473f00;
}
#footer{
margin: 0;
padding:0;
overflow:hidden;
font-size:12px;
color:#000000;
background:#e8e1a6;
border-top:5px solid #000000;

}
#footer table{
	font-size:12px;
}
#inner-footer{
margin:0 auto;
padding:0;
width:980px;
}
#left-footer{
width:560px;
float:left;
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
z-index: 6666669 ;
font-size:12px;
color:#444444;
}

#right-footer{
width:320px;
float:right;
margin-top:15px;
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
z-index: 6666669 ;


}
#copy-footer{
text-align:center;
width:980px;
padding:5px 10px;
clear:both;
}

#desk{
	padding:5px;
	margin:0;
}
#main-footer, #main-footer a{
	color:#444444;
}
#main-footer a:hover{
	color:#debf36;
}
/*paging*/
.pages {
font-family: helvetica;
padding: 0;
margin-top:30px;
clear: left;
float:left;
color:#c0c0c0;
font-weight:bold;
padding:0 5px 5px 5px;
}
.pages a, .pages span {
color:#003366;
display: block;
float: left;
padding: 0.01em 0.5em;
margin-right: 0.1em;
border: 1px solid #fff;
background: #fff;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
overflow:hidden;
height:20px;
}
.pages span.current {
border: 1px solid #2E6AB1;
font-weight: bold;
background: #2E6AB1;
color: #fff;
}
.pages a {
border: 1px solid #9AAFE5;
text-decoration: none;
}
.pages a:hover {
border-color: #2E6AB1;

}
.pages a.nextprev {
font-weight: bold;
}
.pages span.nextprev {
color: #666;
}
.pages span.nextprev {
border: 1px solid #ddd;
color: #999;
}
.pages .nextprev-next {
float: right;
}

/* Button */
/* --------------------------------- */
.button {
	color: #666;
	padding: 4px 6px 4px 6px;
	cursor: pointer;
	border: 1px solid #999;
	border: rgba(0, 0, 0, .2) 1px solid;
	border-bottom: rgba(0, 0, 0, .4) 1px solid;
	background: -moz-linear-gradient(
				center top,
				rgba(200,200,200, .1) 0%,
				rgba(0, 0, 0, .1) 100%
				);
	background: -webkit-gradient(
				linear,
				center bottom,
				center top,
				from(rgba(0, 0, 0, .1)),
				to(rgba(200,200,200, .1))
				);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')";
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000');
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
			border-radius: 3px;

	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	        box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover, .button.hover {
	background: -moz-linear-gradient(
				center top,
				rgba(255,255,255,.1) 0%,
				rgba(0,0,0, .1) 100%
				);
	background: -webkit-gradient(
				linear,
				center bottom,
				center top,
				from(rgba(0,0,0, .1)),
				to(rgba(255,255,255, .1))
				);
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFF', EndColorStr='#19FFFF')";
		filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFF', EndColorStr='#19FFFF');
}

/* Button */
/* --------------------------------- */
.button2 {
	color: #ffffff;
	padding: 4px 6px 4px 6px;
	cursor: pointer;
	border: rgba(0, 0, 0, .2) 1px solid;
	border-bottom: rgba(0, 0, 0, .4) 1px solid;
	background: url(../images/button2.png) repeat-x #058fc2;
	-webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear; 
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
			border-radius: 3px;
			-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	        box-shadow: 0 1px 2px rgba(0,0,0,.2);
	
}
.button2:hover, .button2.hover {
	background: url(../images/button2_hover.png) repeat-x #444444;
	color:#ffffff;
}
.button3 {
	color: #ffffff;
	padding: 4px 6px 4px 6px;
	cursor: pointer;
	border: rgba(0, 0, 0, .2) 1px solid;
	border-bottom: rgba(0, 0, 0, .4) 1px solid;
	background: url(../images/button3.png) repeat-x #666666;
	-webkit-transition: all 0.4s linear;
    -moz-transition: all 0.4s linear;
    -o-transition: all 0.4s linear;
    -ms-transition: all 0.4s linear;
    transition: all 0.4s linear; 
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
			border-radius: 3px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	   -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	        box-shadow: 0 1px 2px rgba(0,0,0,.2);
	
}
.button3:hover, .button3.hover {
	background: url(../images/button3_hover.png) repeat-x #444444;
	color:#ffffff;
}
#panel-login{
    height: auto;
    background: #00ade0;
    min-width: 180px;
    display: none;
    padding: 10px;
	padding-left:15px;
    border: #0C0;
	position:absolute;
	z-index:3;
	float:right;
	margin-left:35px;
	color:#ffffff;
	border-radius: 0 0 5px 5px;
	-moz-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
   -webkit-box-shadow:0 0 10px rgba(0, 0, 0, 0.3);
	
}
.slide-login{
    margin: 0;
    padding: 0;
	margin-top:0px;
	float:right;
	width:175px;

}
.slide-member{
    margin: 0;
    padding: 0;
	margin-top:0px;
	float:right;
	min-width:200px;
	height:30px;
	margin-bottom:10px;
	color:#ffffff;


}
.slide-member a{
	padding:0 5px 0 5px;
	color:#ffffff;
	


}
.btn-login {
    text-align: center;
    height: 25px;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
	margin-top:0px;
	padding-top:0;
	float:left;
}
.slide-register{
    margin: 0;
    padding: 0;
	margin-top:0px;
	float:right;

}
.btn-register {
    text-align: center;
    height: 25px;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
	margin-top:0px;
	padding-top:0;
	float:left;

}
.btn-user {
 
    display: block;
    font-size:12px;
    color: #444444;
    text-decoration: none;
	margin-top:0px;
	padding-top:0;
	float:left;
	border:1px solid #dddddd;
	border-top:none;
	min-width:100px;
	border-radius: 0 0 4px 4px;
	padding:0 5px 0 0px;
	margin-right:5px;

}
.btn-logout {
    text-align: center;
    height: 25px;
    display: block;
    font: bold 120%/100% Arial, Helvetica, sans-serif;
    color: #fff;
    text-decoration: none;
	margin-top:0px;
	padding-top:0;
	float:right;

}
.activelogin {
    background-position: right 12px;
}
/*galery*/
.box-galery{
	border:1px solid #dddddd;
	width:200px;
	height:200px;
	border-radius:4px;
	margin-right:5px;
	margin-bottom:5px;
	float:left;
}
.box-foto{
	border:1px solid #dddddd;
	width:65px;
	height:65px;
	border-radius:4px;
	margin-right:5px;
	margin-bottom:5px;
	float:left;
}
.title-album{
	font-weight:bold;
	font-size:18px;
	text-align:center;
	position:center;
	color:#ffffff;
	padding:10px;
	margin-top:80px;
}

.thumbnailWrapper { clear:both;margin:0px auto;} /* not important */

.thumbnailWrapper ul { 
list-style-type: none; /* remove the default style for list items (the circles) */ 
margin:0px; /* remove default margin */
padding:0px; /* remove default padding */
}
.thumbnailWrapper ul li{ 
float:left; /* important: left float */
overflow:hidden; /* hide the content outside the boundaries (ZOOM) */
border: 1px solid red;
height:200px;
width:200px;
display:block;
margin: 0 10px 10px 0;
}

.thumbnailWrapper ul li{ 

position:relative; /* so we can use top and left positioning */
border:none; /* remove the default blue border */
border-radius:5px;
-moz-box-shadow: 0 0 8px #888;
-webkit-box-shadow: 0 0 8px#888;
box-shadow: 0 0 8px #888;

}
.thumbnailWrapper ul li:hover{ 

position:relative;
z-index:1;
}

.caption{
position:absolute; /* needed for positioning */
bottom:0px; /* bottom of the list item (container) */
left:0px; /* start from left of the list item (container) */
width:100%; /* stretch to the whole width of container */
display:none; /* hide by default */
/* styling bellow */
background:rgba(0,0,0,0.8);
color:white;


}
.caption .captionInside{
/* just styling */
padding:10px;
margin:0px;
}
.caption p{
text-align:center;
font-size:110%;
}
.clear { clear:both; } /* to clear the float after the last item */

.grayBox{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
	overflow:auto;
	border: 1px solid #000;
	
}
.box_content {
    position: fixed;
	top: 100px;
    margin: 0 auto;
	width: 500px;
	min-height:280px;
    padding: 5px;
    z-index:99999;
    overflow: auto;
	border: 4px solid #c6c8c8;
	border-radius:5px;
	background:url(../images/bg_lightbox.png) #ffffff repeat-x;
	right: 10%;
	left:10%;
}
.box_content_reg {
    position: absolute;
	top: 20px;
    margin: 0 auto;
	width: 700px;
	height:710px;
    padding: 5px;
    z-index:999999;
    overflow: auto;
	border: 4px solid #c6c8c8;
	border-radius:5px;
	background:url(../images/bg_lightbox_reg.png) #ffffff repeat-x;
	right: 10%;
	left:10%;
}
/*login*/
#title-login{
padding:10px;
color:#ffffff;
font-size:20px;
}
#title-reg{
padding:10px;
color:#ffffff;
font-size:20px;
height:30px;
margin-top:0;
}
.button4 a{
color:#ffffff;
padding:5px;
}
.grayBox{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
	overflow:auto;
	border: 1px solid #000;
	
}
.box_content {
    position: fixed;
	top: 100px;
    margin: 0 auto;
	width: 500px;
	height:280px;
    padding: 5px;
    z-index:99999;
    overflow: auto;
	border: 4px solid #c6c8c8;
	border-radius:5px;
	background:url(../images/bg_lightbox.png) #ffffff repeat-x;
	right: 10%;
	left:10%;
}
.grayBox2{
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
	overflow:auto;
	border: 1px solid #000;
	
}
.box_content2 {
    position: fixed;
	top: 100px;
    margin: 0 auto;
	width: 500px;
	height:350px;
    padding: 5px;
    z-index:99999;
    overflow: auto;
	border: 4px solid #c6c8c8;
	border-radius:5px;
	
	right: 10%;
	left:10%;
}


/*paging js*/

#loading{
      width: 100%;
      position: absolute;
      top: 100px;
      left: 100px;
	  margin-top:200px;
}
#contlist .pagination ul li.inactive,
#contlist .pagination ul li.inactive:hover{
      background-color:#ededed;
      color:#bababa;
      border:1px solid #bababa;
      cursor: default;
}
#contlist .data ul li{
      list-style: none;
      font-family: verdana;
      margin: 5px 0 5px 0;
      color: #000;
      font-size: 13px;
}
#contlist .pagination{
      width: 918px;
	  overflow:hidden;
	  
}
#contlist .pagination ul{
      width: 918px;
	  overflow:hidden;
}
#contlist .pagination ul li{
      list-style: none;
      float: left;
      border: 1px solid #006699;
      padding: 2px 6px 2px 6px;
      margin: 0 3px 5px 3px;
      font-family: arial;
      font-size: 12px;
      color: #006699;
      font-weight: bold;
      background-color: #f2f2f2;
	  border-radius:2px;
	  
}
#contlist .pagination ul li:hover{
      color: #fff;
      background-color: #006699;
     cursor: pointer;
}
.go_button
{
	background-color:#f2f2f2;border:1px solid #006699;color:#cc0000;padding:2px 6px 2px 6px;cursor:pointer;position:absolute;margin-top:-1px;
}
.total
{
	float:right;font-family:arial;color:#999;
}
/* produk box */
.prod_title{
	padding:5px 0px 0px 0px;
	margin: 0 10px 5px 10px;

}

.prod_img{
padding:2px 0 2px 0;


}
.prod_box{
min-height:200px;
overflow:hidden;
width:710px;
margin:0 auto;
padding:5px;
}

.center_prod_box{
text-align:center;
padding-bottom:5px; 
margin:1px;
height:210px;
width:220px;
overflow:hidden;
border-radius: 5px;
border: 1px solid #dddddd;
float:left;

}

.tombol-detail{
background-image:url(../images/bar-detail.png);
background-repeat:no-repeat;
background-position:right;
background-color:#FFFFFF;
border:none;
width:76px;
height:25px;
float:left;
}


.thumbimg{
border:1px solid #dddddd;width:50px;height:50px;padding:2px;margin:0 auto;float:left;overflow:hidden;
}
.thumbimg img{
vertical-align:middle;
display:block;
width:50px;
height:50px;
margin:0 auto;
} 

.detproduk{
border:1px solid #dddddd;
width:200px;
min-height:150px;
padding:10px;
margin:0 auto;
margin: 0px 10px 0 0;
}
/*sidebar menu */

.menu { display:block;margin-left:10px;}
.menu .menuheader  a{ font: bold; color: #666666; background: url(../images/arrow_right_ovr.png) no-repeat left; padding-left:20px;margin-bottom: 0px; line-height:30px; cursor: pointer; height:30px;}
.menu .submenu a { background: url(../images/bullet.png) no-repeat left; padding-left:20px; line-height:30px;color:#666666;}
.menu .menuheader a:hover { background: url(../images/arrow_right_ovr_hover.png) no-repeat left; }
.menu .submenu a:hover{}
.menu ul { list-style-type: none; margin: 0; padding: 0;width:100%;}
.menu ul li { padding-bottom: 0px;}

#detail-title h3{
background:url(../images/sidebar-top.png) repeat-x;
color:#ffffff;
width:210px;
height:30px;
line-height:30px;
text-align:left;
font-weight:bold;
border-radius: 5px;
display:block;
padding:0 8px 0 8px;
margin-bottom:5px;
}
#detail-content-privat{

text-align:center;
padding-bottom:5px; 
margin:1px;
height:250px;
width:220px;
overflow:hidden;
border-radius: 5px;
border: 1px solid #dddddd;
float:left;


}
.menu ul li a { color: #000000;  display: block; padding-left: 10px; text-decoration: none; border-bottom: 1px solid #e1e1e1; }


/*================================================== 
     Slideshow
 ================================================== */

/*-- Main slide --*/

#main-slide .item img{
	width: 100%;
}

#main-slide .item .slider-content {
  z-index: 0;
  opacity: 0;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
#main-slide .item.active .slider-content {
  z-index: 0;
  opacity: 1;
  -webkit-transition: opacity 100ms;
  -moz-transition: opacity 100ms;
  -o-transition: opacity 100ms;
  transition: opacity 100ms;
}

#main-slide .slider-content{
	top: 50%;
	margin-top: -70px;
	left: 0;
	padding: 0;
	text-align: center;
	position: absolute;
	width: 100%;
	height: 100%;
	color: #fff;
}

#main-slide .carousel-indicators {
	bottom: 30px;
}

.carousel-indicators li{
	width: 14px !important;
	height: 14px !important;
	border: 2px solid #fff !important;
	margin: 1px !important;
}


#main-slide .carousel-control.left,
#main-slide .carousel-control.right {
	opacity: 1;
	filter: alpha(opacity=100);
	background-image: none;
	background-repeat: no-repeat;
	text-shadow: none;
}

#main-slide .carousel-control.left span {
	padding: 15px;
}

#main-slide .carousel-control.right span {
	padding: 15px;
}

#main-slide .carousel-control .fa-angle-left, 
#main-slide .carousel-control .fa-angle-right{
	position: absolute;
	top: 40%;
	z-index: 5;
	display: inline-block;
}

#main-slide .carousel-control .fa-angle-left{
	left: 0;
}

#main-slide .carousel-control .fa-angle-right{
	right: 0;
}

#main-slide .carousel-control i{
	background: rgba(0,0,0,.7);
	color: #fff;
	line-height: 36px;
	font-size: 32px;
	padding: 15px 20px;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}


#main-slide .slider-content h2{
	font-size: 76px;
	font-weight: 100;
	text-transform: uppercase;
    color: #555;
}

#main-slide .slider-content h2.white, #main-slide .slider-content h3.white {
    color: #fff;
}

#main-slide .slider-content h3{
	font-size: 36px;
	font-weight: 300;
	margin-top: 60px;
	text-transform: uppercase;
    text-align: center;
    color: #555;
}

.slider.btn{
	padding: 10px 40px;
	margin-top: 40px;
	font-size: 20px;
	border-radius: 2px;
	text-transform: uppercase;
	line-height: 28px;
	border: 0;
	-moz-transition: all 300ms ease;
	-webkit-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
		box-shadow: 0 4px 0 rgba(0,0,0,0.1) inset;
  -o-box-shadow: 0 4px 0 rgba(0,0,0,0.1) inset;
  -moz-box-shadow: 0 4px 0 rgba(0,0,0,0.1) inset;
  -webkit-box-shadow: 0 4px 0 rgba(0,0,0,0.1) inset;
}

.slider.btn.btn-default{
	margin-left: 4px;
	background: #ECECEC
}

.slider.btn.btn-default:hover{
	background: #000;
	color: #fff;
}

.slider-content-left {
	position: relative;
	margin: 0 0 0 40px;
}

.slider-content-right{
	position: relative;
}

/*-- Animation --*/
.carousel .item.active .animated1 {
	
}

.carousel .item.active .animated2 {
	-webkit-animation: lightSpeedIn 1s ease-in 200ms both;
	animation: lightSpeedIn 1s ease-in 200ms both;
}

.carousel .item.active .animated3 {
	-webkit-animation: bounceInLeft 1s ease-in-out 500ms both;
	animation: bounceInLeft 1s ease-in-out 500ms both;
}

.carousel .item.active .animated4 {
	-webkit-animation: flipInX 1s ease-in 500ms both;
	animation: flipInX 1s ease-in 500ms both;
    text-align: center;
}

.carousel .item.active .animated5 {
	-webkit-animation: bounceInLeft 1s ease-in-out 100ms both;
	animation: bounceInLeft 1s ease-in-out 100ms both;
}

.carousel .item.active .animated6 {
	-webkit-animation: bounceIn 1s ease-in 500ms both;
	animation: bounceIn 1s ease-in 500ms both;
    text-align: center;
}

.carousel .item.active .animated7 {
	-webkit-animation: bounceIn 1s ease-in 500ms both;
	animation: bounceIn 1s ease-in 500ms both;
}

.carousel .item.active .animated8 {
	-webkit-animation: fadeInDown 1s ease-in 1000ms both;
	animation: fadeInDown 1s ease-in 1000ms both;
}