body{
	padding:0;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
		background: 
		-webkit-gradient(
			linear,
			left top,
			left 700,
			from(#3D7002),
			color-stop(10%, #3D7002),
			to(#FFFFFF)
		);
	background: 
		-moz-linear-gradient(
			top,
			#3D7002 100px,
			#FFFFFF 500px,
			#FFFFFF 25px
			);

}
div, h1, h2, h3, h4, p, form, label, input, textarea, img, span{
	margin:0; padding:0;
}
a.buttonx{
	background: #e3e3e3;
	border: 1px solid #ccc;
	color: #333;
	font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	width: 100px;
	cursor: pointer;
	text-shadow: 0px 1px 0px #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0px 0px 2px #fff inset;
	-webkit-box-shadow: 0px 0px 2px #fff inset;
	box-shadow: 0px 0px 2px #fff inset;
	margin: 10px;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 20px;
	padding-right: 20px;
	text-decoration: none;
}
a.button{
	background: #e3e3e3;
	border: 1px solid #ccc;
	color: #333;
	font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	width: 100px;
	cursor: pointer;
	text-shadow: 0px 1px 0px #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0px 0px 2px #fff inset;
	-webkit-box-shadow: 0px 0px 2px #fff inset;
	box-shadow: 0px 0px 2px #fff inset;
	margin: 5px;
	padding-top: 5px;
	padding-bottom: 5px;
	display: block;
	text-decoration: none;
}
a.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}
input[type="submit"], input[type="button"], button{
	background: #e3e3e3;
	border: 1px solid #ccc;
	color: #333;
	font-family: "Trebuchet MS", "Myriad Pro", sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
/*	width: 150px;*/
	cursor: pointer;
	text-shadow: 0px 1px 0px #fff;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0px 0px 2px #fff inset;
	-webkit-box-shadow: 0px 0px 2px #fff inset;
	box-shadow: 0px 0px 2px #fff inset;
	margin: 5px;
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 20px;
	padding-right: 20px;
	
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover, a.button:hover,  a.buttonx:hover{
	-moz-box-shadow: 0px 0px 2px #eaeaea inset;
	-webkit-box-shadow: 0px 0px 2px #eaeaea inset;
	box-shadow: 0px 0px 2px #eaeaea inset;
	color: #FFF;
	background-color: #3D7002;
}
input[type="text"],  input[type="password"], input[type=checkbox], textarea{
	border: 1px solid #666;
	background: #FFFFFF;
	padding: 9px;
	display:block;
	font-size:14px;
	background: 
		-webkit-gradient(
			linear,
			left top,
			left 25,
			from(#FFFFFF),
			color-stop(4%, #EEEEEE),
			to(#FFFFFF)
		);
	background: 
		-moz-linear-gradient(
			top,
			#FFFFFF,
			#EEEEEE 1px,
			#FFFFFF 25px
			);
	-moz-box-shadow: 0px 0px 8px #f0f0f0;
	-webkit-box-shadow: 0px 0px 8px #f0f0f0;
	box-shadow: 0px 0px 8px #f0f0f0;
	margin: 5px;
}
input[type="number"]{
	border: 1px solid #666;
	background: #FFFFFF;
	padding: 9px;
margin: 5px;
	font-size:14px;
	background: 
		-webkit-gradient(
			linear,
			left top,
			left 25,
			from(#FFFFFF),
			color-stop(4%, #EEEEEE),
			to(#FFFFFF)
		);
	background: 
		-moz-linear-gradient(
			top,
			#FFFFFF,
			#EEEEEE 1px,
			#FFFFFF 25px
			);
	-moz-box-shadow: 0px 0px 8px #f0f0f0;
	-webkit-box-shadow: 0px 0px 8px #f0f0f0;
	box-shadow: 0px 0px 8px #f0f0f0;

}
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type=checkbox]:focus, textarea:focus{
	background:#feffef;
}
input[type=text], input[type="number"], input[type=password], input[type=checkbox], select, textarea{
	margin: 2px;
	padding: 4px;
	-moz-border-radius: 1px;
	-webkit-border-radius: 1px;
}
.msgred{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #F00;
	text-decoration: none;
}

.msggreen{
	color: #360;
	font-size: 12px;
}
.boxmsgred{
	background-color: #FCF;
	display: table;
	width: 500px;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #F00;
	border-bottom-color: #F00;
	font-size: 12px;
	text-decoration: none;
	margin: 5px;
	background-image: url(../images/merah.png);
	background-repeat: no-repeat;
	background-position: 5px 0px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 50px;
	height: 50px;
}
.boxmsggreen{
	background-color: #E7F7CD;
	display: table;
	width: 500px;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #063;
	border-bottom-color: #063;
	font-size: 12px;
	text-decoration: none;
	margin: 5px;
	background-image: url(../images/ijo.png);
	background-repeat: no-repeat;
	background-position: 5px 0px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 50px;
	height: 50px;
}
.boxmsgyellow{
	background-color: #FFC;
	display: table;
	width: 500px;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #FC0;
	border-bottom-color: #FC0;
	font-size: 12px;
	text-decoration: none;
	margin: 5px;
	background-image: url(../images/kuning.png);
	background-repeat: no-repeat;
	background-position: 5px 0px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 50px;
	height: 50px;
}
/*----------- main top -------------- */

#topmain{
	width:100%;
	
}
#top{
	width:1200px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	height: 80px;
}


/*--------------- main content  ------------------- */

#bodymain{
	width:100%;
	padding-top: 5px;
}
#info{
	width:958px;
	margin-right: auto;
	margin-left: auto;
	font-size: 12px;
	font-weight: bold;
	text-align: right;
	padding-right: 20px;
	text-decoration: none;
}

#info a{
	text-decoration: none;
	font-style: italic;
	color: #F00;
}
#info a:hover{
	color: #E1E1E1;
}


#main{
	width:958px;
	height:300px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#login{
	height: 150px;
	width: 250px;
	border: thin solid #CCC;
	margin-right: auto;
	margin-left: auto;
	display: table;
	margin-top: 50px;
	padding: 10px;
}
#login h3{
	padding: 5px;
	background-color:#3D7002;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	width: auto;
	display: block;
	color: #FFF;
	text-align: left;
	text-indent: 50px;
	background-image: url(images/lock.png);
	background-repeat: no-repeat;
}
#login .center{
	padding-left: 30px;
	font-weight: bold;
	font-size: 12px;
}
#login .center label{
	margin-right: auto;
	margin-left: auto;
	font-style: italic;
	display: block;
	margin-bottom: 0px;
}
#login .center input{
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
	display: block;
}

#login i{
	font-size: 11px;
	font-style: italic;
	color: #000;
}

#mainfull{
	width:1200px;
	height:400px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	border: thin solid #076481;
	background-color: #FFF;
	display: table;
}
#mainfull .left{
	border: thin solid #CCC;
	float: left;
	width: 20%;
	display: table;
	margin: 5px;
	padding: 5px;
}
#mainfull .left h2{
	text-decoration: none;
	padding: 5px;
	font-size: 16px;
	background-color:#3D7002;
	color: #FFF;
	background-image: url(images/address_book.png);
	background-repeat: no-repeat;
	text-align: left;
	text-indent: 30px;
	background-position: 5px 7px;
}
#mainfull .left ul{
	display: block;
	margin: 1px;
	padding-left: 0px;
	list-style-type: none;
}
#mainfull .left ul li{
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	padding: 2px;
	font-weight: bold;
	color: #000;
	line-height: 25px;
	text-decoration: none;
}
#mainfull .left ul li:hover{
	color: #FFF;
	background-color: #E1E1E1;
}
#mainfull .left ul li a{
	padding: 5px;
	color: #000;
	text-decoration: none;
	font-size: 14px;
}
#mainfull .left ul li.toggle{
	background-image: url(images/arrow_green.gif);
	background-repeat: no-repeat;
	background-position: 2px 11px;
}
#mainfull .left ul.sub-toggle{
	color: #000;
	margin-left: 10px;
	

}
#mainfull .left ul.sub-toggle li{
	color: #F00;
	
}
#mainfull .left ul.sub-toggle li a{
	display: block;
	width: 200px;
	padding: 2px;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
}

#mainfull .right{
	width:75%;
	border: thin solid #CCC;
	display: table;
	float: left;
	margin: 5px;
	padding: 5px;
}
#mainfull .right div.topmenu{
	display: table;
	width: 100%;

}
#mainfull .right div.topmenu span.judul{
	display: inline-block;
	font-size: 30px;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	margin-left: 30px;
	margin-top: 20px;
	text-decoration: none;
}
#mainfull .right div.topmenu input[type="text"]{
	display: table;
	width: 150px;
	border: thin solid #F00;
	float: right;
	text-decoration: none;
	border: thin solid #CCC;
	background-color: #E1E1E1;
	padding: 8px;
	margin-top: 13px;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
}
#mainfull .right div.topmenu label{
	display: table;
	float: right;
	text-decoration: none;
	font-weight: bold;
	margin-top: 13px;
	width: 60px;
	padding: 8px;
	font-size: 14px;
}
#mainfull .right div.topmenu a.view{
	display: table;
	width: 60px;
	border: thin solid #F00;
	float: right;
	text-decoration: none;
	margin: 5px;
	border: thin solid #CCC;
	background-color: #E1E1E1;
}
#mainfull .right div.topmenu a.view:hover{
	background-color: #FFF;
}
#mainfull .right div.topmenu a.view img{
	width: 40px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-right: 10px;
	margin-left: 10px;
}
#mainfull .right div.topmenu a.view span{
	color: #000;
	text-decoration: none;
	display: block;
	text-align: center;
	padding-right: 0px;
	padding-left: 0px;
}
#mainfull .right .box{
	display: inline-block;
	height: 100px;
	width: 100px;
	background-color: #E1E1E1;
	text-align: center;
	margin: 5px;
	border: thin solid #CCC;
	padding: 2px;
}
#mainfull .right .box:hover{
	background-color: #FFF;
}
#mainfull .right .box a{
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #076481;
	font-weight: bold;
}
#mainfull .right .box a img{
	margin: 10px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	width: 48px;
}
#mainfull .right .box a span{
	font-size: 12px;
	display: block;
}
#mainfull .right table{
	width: 100%;
	border: 1px solid #3D7002;
	text-align: left;
}
#mainfull .right th{
	font-weight: bold;
	background-color: #3D7002;
	border-bottom: 1px solid #cef;
	color: #FFF;
}
#mainfull .right td,th{
	padding: 4px 5px;
	
	font-size: 12px;
}
#mainfull .right td.num{
	padding: 4px 5px;
	font-size: 12px;
	text-align: right;
}
#mainfull .right tr:hover{
	background-color: #F3F3F3;
}
#mainfull .right tr a.edit{
	background-image: url(images/edit.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 10px;
	margin-left: 10px;
}
#mainfull .right tr a.edit:hover{
	background-color: #F9ED06;
}
#mainfull .right tr a.delete{
	background-image: url(images/delete.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: inline-block;
	width: 16px;
	height: 16px;
}
#mainfull .right tr a.delete:hover{
	background-color: #B70000;
}

#mainfull .right .odd {
	background-color: #E7F7CD; }
#mainfull .right .odd td {
	border-bottom: 1px solid #3D7002; }


#mainfull .right form{
	margin: 5px;
}
div.callv{
	padding: 2px;
	font-size: 12px;
	text-decoration: none;
}	
div.callv:hover{
	background-color: #F3F3F3; 
}	
div.callv label{
	display: inline-block;
	width: 160px;
	vertical-align: text-top;
}	
div.callv label, input[type=text], input[type=password], input[type=checkbox], textarea, select{
	display: inline-block;

/*	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	vertical-align: text-top;*/
	padding: 5px;
	padding-left: 5px;
}		
div.boxpoto{
	float: right;
	height: 160px;
	width: 125px;
	display: block;
	margin-right: 10px;
	padding: 5px;
}
div.boxpoto img{
	height: 140px;
	width: 115px;
}
div.boxpoto p{
	font-size: 12px;
	font-weight: bold;
	color: #000;
	text-decoration: none;
	
}

div.callv_camera{
	padding: 2px;
}
div.callv_camera .camera{	
	display: none;
}
div.callv_camera .flip{
	font-weight: bold;
	color: #063;
	text-decoration: none;
	cursor: default;
	text-align: center;
	display: block;
	width: auto;
	background-color: #DFDFDF;
	padding: 5px;
}
div.callv_camera .finger{	
	display: none;
}
/*--------------- main content  ------------------- */

#footermain{
	width:100%;
	height:100px;
	
}
#footer{
	width:958px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;

}


/* ---------- START PAGI ----------------------- */
#pagi{
	border: thin solid #003f8f;
	display: inline-block;
	width: auto;
	text-align: center;
	padding-right: 5px;
	padding-left: 5px;
	margin: 2px;
	background-color: #3D7002;
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
}
#pagi:hover{
	background-color: #84FF84;
}
#pagi a{
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	color: #FFF;
}
#pagihover{
	border: thin solid #003f8f;
	display: inline-block;
	width: auto;
	text-align: center;
	margin: 2px;
	font-weight: bold;
	font-size: 12px;
	padding-right: 5px;
	padding-left: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
}
/* ---------- END PAGI----------------------- */