/* CSS Document */
* {
	border:0;
	margin:0;
	padding:0;
}

/* umum */
a {
	color:#FF0000;
	text-decoration:blink;
	font-size: medium;
}
a:hover {
	color:#333;
	text-decoration:none;
}
/* tubuh */
body {
	color:#000000;
	font:0.8em Arial, Helvetica, "bitstream vera sans", sans-serif;
	width: 99%;
	height: 100%;
	background-attachment: fixed;
	background-color: #00CCFF;
	//background-image: url(background3.gif);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;

	background-repeat: no-repeat;
	background-position: center center;
}
/* kepala */
#kepala {
	border-bottom:1px solid #999;
	height:auto;
	margin:0 auto;
	width:auto;
}
#kepala h1 {
	color:#0033CC;
	font-size:45px;
	letter-spacing:normal;
	text-align:right;
	padding:5px;
	margin-bottom:-20px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: capitalize;
}
#kepala h2 {
	color:#FF0000;
	font-size:24px;
	letter-spacing:normal;
	text-align:right;
	font-family: "Times New Roman", Times, serif;
	text-decoration: blink;
}

/* navigasi */
#navigasi {
	background:#33FF00;
	border-right:1px solid #999;
	margin:0 auto;
	width:auto;
	height:auto;
	list-style:url(none) none;
	color: #FF0000;

}

#navigasi li {
	border-left:1% solid #999;
	float:left;
	width:8%;
	list-style:none;
	color: #FFFFFF;
	clear: none;
	border-right-width: 1%;
	border-right-style: solid;
	border-right-color: #999;
}

#navigasi a {
	color: #000000;
	display:block;
	line-height:100%;
	text-align:center;
	font-family: Calibri, "Calibri Light";
	font-size: 100%;
	font-weight: bold;
}
#navigasi a:hover {
	background:#FFFFFF;
	color:#000000;
}

#navigasi .active {
	background:#e3e3e3;
	color:#000000;
	background-color: #FFFFFF;
}
/*navigasi 2*/
#navigasi2 {
	
	width:auto;
	height:auto;
	list-style:url(none) none;
	color: #FFFF00;
	padding-bottom: 2%;
}


#navigasi2 li {
	border-left:2px solid #999;
	border-top:2px solid #999;
	float:left;
	width:20%;
	text-align:center;
	color: #FFFFFF;
	background-color: #000000;
	vertical-align: middle;
	}

#navigasi2 a {
	color: #FFFFFF;
	display:block;
	text-align:center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	font-weight: bold;
	background-color: #000000;
	height:3%;
	vertical-align: middle;
}
#navigasi2 a:hover {
	background:#FFFFFF;
	color:#000000;
}

#navigasi2 .active {
	background:#e3e3e3;
	color:#FFFFFF;
}
/* isi */
#isi {
	height:auto;
	margin:0 auto;
	padding:0 0 20px;
	width:95%;
	color: #FFFFFF;
}

#isi h1 {
	border-bottom:1px none #999;
	font-size:36px;
	padding:20px 0 0;
	color: #00CCFF;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: capitalize;

}

#isi h2 {
	color: #CCCCCC;
	font-size: large;

}

#isi h3 {
	color: #CCCCCC;

}

#isi p {
	padding:20px 20px 0;
	color: #FFFFFF;
}

/* kaki */
#kaki {
	border-top:1px solid #999; 
	height:50px;
	margin:0 auto;
	padding:10px;
	text-align:center;
	width:751px;
}

/* Tambahan: */
.error {
	font-weight: bold;
	color: #C00
}

table {
	font-family: Tahoma;
	font-size: 8pt;
	border-collapse: collapse;
	margin: 0px;
	color: #999999;
	border: thin none #0066CC;
}

th{
	color: #FFFF00;
	font-size: medium;
	text-transform: none;
	text-align: center;
	vertical-align: middle
	padding: 0.1em 0.5em;
	border-collapse: collapse;
	margin: 0px;
	background-image: url(url((URL)));
	background-color: #000000;
	border-top: thin none #FFFFFF;
	border-right: thin solid #FFFFFF;
	border-bottom: thin none #FFFFFF;
	border-left: thin none #FFFFFF;
	padding-left: 5px;
	padding-right: 5px;
}

td{
	padding: 0.1em 0.5em;
	vertical-align: middle;
	border-collapse: collapse;
	font-size: medium;
	text-align: left;
	color: #FFFFFF;
	margin: 0px;
	
	border-top: thin none #FFFFFF;
	border-right: thin none #FFFFFF;
	border-bottom: thin none #FFFFFF;
	border-left: thin none #FFFFFF;
}
.logo {
	float:left;
	margin:11px 0 0 16px;
}
.home {
	background:url(gambar/home.png) center no-repeat;
	text-indent:-9999px;
	width:20px;
	margin-right:15px !important;
}
#topmenuwrapper {
	background:#FF0000 url(images/motif.png) repeat-x;
	height:24px;
}

ul									{ list-style: none; margin:0px;}
p                                   {
	margin: 15px 0;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}

h1 {
color:white;
}
/* 
LEVEL ONE
*/
ul.dropdown                         {
position: relative;
background-image: url(gambar/background-site.jpg);
}
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: url(gambar/background-site.jpg); }
ul.dropdown a:hover		            { color: #fff; }
ul.dropdown a:active                { color: #ffa500; }
ul.dropdown li a                    { display: block; padding: 4px 8px; border-right: 1px solid #333;
	 								  color: #222; }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #4991F1; color: white; position: relative; }
ul.dropdown li.hover a              { color: black; }


/* 
	LEVEL TWO
*/

ul.dropdown ul 						{ width: 250px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000; 
									  border: 1px solid #ccc; float: none; }									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 

/* 
	LEVEL THREE
*/

ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

.scroll{
  width: 300px;
  background: BLACK;
  padding: 5px;
  overflow: scroll;
  height: 310px;
  
  /*script tambahan khusus untuk IE */
  scrollbar-face-color: #CE7E00; 
  scrollbar-shadow-color: #FFFFFF; 
  scrollbar-highlight-color: #6F4709; 
  scrollbar-3dlight-color: #11111; 
  scrollbar-darkshadow-color: #6F4709; 
  scrollbar-track-color: #FFE8C1; 
  scrollbar-arrow-color: #6F4709;
}

.scroll1{
  width: 450px;
  background:BLACK;
  padding: 5px;
  overflow: scroll;
  height: 310px;
  
  /*script tambahan khusus untuk IE */
  scrollbar-face-color: #CE7E00; 
  scrollbar-shadow-color: #FFFFFF; 
  scrollbar-highlight-color: #6F4709; 
  scrollbar-3dlight-color: #11111; 
  scrollbar-darkshadow-color: #6F4709; 
  scrollbar-track-color: #FFE8C1; 
  scrollbar-arrow-color: #6F4709;
}
.scroll_list{
  width: 730px;
  background:;
  padding: 5px;
  overflow: scroll;
  height: 310px;
  
  /*script tambahan khusus untuk IE */
  scrollbar-face-color: #CE7E00; 
  scrollbar-shadow-color: #FFFFFF; 
  scrollbar-highlight-color: #6F4709; 
  scrollbar-3dlight-color: #11111; 
  scrollbar-darkshadow-color: #6F4709; 
  scrollbar-track-color: #FFE8C1; 
  scrollbar-arrow-color: #6F4709;
}

.scroll2{
  width: 100%;
  background:#000033 url(none) no-repeat;
  padding: 5px;
  overflow: scroll;
  height: 300px;
  
  /*script tambahan khusus untuk IE */
  scrollbar-face-color: #CE7E00; 
  scrollbar-shadow-color: #FFFFFF; 
  scrollbar-highlight-color: #6F4709; 
  scrollbar-3dlight-color: #11111; 
  scrollbar-darkshadow-color: #6F4709; 
  scrollbar-track-color: #FFFFFF; 
  scrollbar-arrow-color: #6F4709;
}
.scroll_resi{
  width: 760px;
  background: none;
  padding: 5px;
  overflow: scroll;
  height: 430px;
  
  /*script tambahan khusus untuk IE */
  scrollbar-face-color: #CE7E00; 
  scrollbar-shadow-color: #FFFFFF; 
  scrollbar-highlight-color: #6F4709; 
  scrollbar-3dlight-color: #11111; 
  scrollbar-darkshadow-color: #6F4709; 
  scrollbar-track-color: BLACK; 
  scrollbar-arrow-color: #6F4709;
}
.scroll_barang{
  width: 100%;
  background: none;
  padding: 5px;
  overflow: hidden;
  height: auto;
  
/*script tambahan khusus untuk IE */
  scrollbar-face-color: #CE7E00; 
  scrollbar-shadow-color: #FFFFFF; 
  scrollbar-highlight-color: blue; 
  scrollbar-3dlight-color: blue; 
  scrollbar-darkshadow-color: blue; 
  scrollbar-track-color: BLACK; 
  scrollbar-arrow-color: #6F4709;
}
.scroll_col{
	width: 650;
	background: none;
	padding: 5px;
	overflow: visible;
	height: 200;
	scrollbar-face-color: black;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: BLACK;
	scrollbar-arrow-color: white;
	border: thin none #CCCCCC;
}

.scroll_colman{
	width: 650;
	background: none;
	padding: 5px;
	overflow: visible;
	height: 130;
	scrollbar-face-color: black;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: BLACK;
	scrollbar-arrow-color: white;
	border: thin none #CCCCCC;
}
.scroll_total{
	width: 650;
	background: none;
	padding: 5px;
	overflow: visible;
	height: 220;
	scrollbar-face-color: black;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: BLACK;
	scrollbar-arrow-color: white;
	border: thin none #CCCCCC;
	text-align: left;
	vertical-align: top;
}

.atas{
	width: 97%;
	background:none;
	padding: 0px;
	overflow: visible;
	height: 13%;
	border: thin none #CCCCCC;
 }
.tengah{
  width: 97%;
  padding: 0px;
  overflow: scroll;
  height: 65%;
  border: thin solid #CCCCCC;
 /*script tambahan khusus untuk IE */
  scrollbar-face-color: white; 
  scrollbar-shadow-color: black; 
  scrollbar-highlight-color: black; 
  scrollbar-3dlight-color: black; 
  scrollbar-darkshadow-color: black; 
  scrollbar-track-color: black; 
  scrollbar-arrow-color: white;
 
 }
.tengah2{
  width: 585;
  background: black;
  padding: 20px;
  overflow: scroll;
  height: 350;
  border: thin solid #CCCCCC;
 /*script tambahan khusus untuk IE */
  scrollbar-face-color: white; 
  scrollbar-shadow-color: black; 
  scrollbar-highlight-color: black; 
  scrollbar-3dlight-color: black; 
  scrollbar-darkshadow-color: black; 
  scrollbar-track-color: BLACK; 
  scrollbar-arrow-color: white;
 
 }
.kakitengah2{
  width: 611;
  background:BLACK;
  padding: 7px;
  overflow: none;
  height: 35;
  border: thin solid #CCCCCC;
 /*script tambahan khusus untuk IE */
  scrollbar-face-color: white; 
  scrollbar-shadow-color: black; 
  scrollbar-highlight-color: black; 
  scrollbar-3dlight-color: black; 
  scrollbar-darkshadow-color: black; 
  scrollbar-track-color: black; 
  scrollbar-arrow-color: white;
 
 }
 
.bawah
 {
	width: 97%;
  	background:;
	padding: 0px;
	overflow: visible;
	height: 7%;
	border: thin solid #CCCCCC;
	border-color: #000000;
 }
 .biasabawah
 { 	width: 100%;
	padding: 0px;
	overflow: visible;
	height: 7%;
	border: thin solid #CCCCCC;
	background-color: #000033; }
 .notbawah
 { 	width: 100%;
	padding: 0px;
	overflow: visible;
	height: 7%;
	border: thin solid #CCCCCC;
	background-color: #FF0000;
 }
 .yesbawah
 {
	width: 100%;
	padding: 0px;
	overflow: visible;
	height: 7%;
	border: thin solid #CCCCCC;
	background-color: #00CC00;
 }
.tombol1
 {
  width: 5%;
  background:;
  padding: 0px;
  overflow: visible;
  height: 7%;
  border: thin solid #CCCCCC;
 }
 .tombol2
 {
  width: 30%;
  background:;
  padding: 0px;
  overflow: visible;
  height: 7%;
  border: thin solid #CCCCCC;
 }
 .tombol3
 {
  width: 20%;
  background:;
  padding: 0px;
  overflow: visible;
  height: 7%;
  border: thin solid #CCCCCC;
 }
 .tombol4
 {
  width: 50%;
  background:;
  padding: 0px;
  overflow: visible;
  height: 7%;
  border: thin solid #CCCCCC;
 }
 
 




.utama{
	width: 100%;
	padding:5px;
	overflow:scroll;
	height:90%;
	scrollbar-face-color: #CE7E00;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: #FFFFFF;
	scrollbar-arrow-color: #6F4709;
	border: thin double #CCCCCC;
	background-color: black;
	//background-image: url(background1.gif) ;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;

}

.scroll_atas{
	width: 100%;
	padding:5px;
	overflow:visible;
	height:40px;
	scrollbar-face-color: #CE7E00;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: #FFFFFF;
	scrollbar-arrow-color: #6F4709;
	border: thin none #CCCCCC;
}
.scroll_tengah{
	width: 100%;
	padding:5px;
	overflow:visible;
	height:450px;
	scrollbar-face-color: #CE7E00;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: #FFFFFF;
	scrollbar-arrow-color: #6F4709;
	border: thin none #CCCCCC;
}
.scroll_bawah{
	width: 100%;
	background:#660000;
	padding:5px;
	overflow:visible;
	height:40px;
	scrollbar-face-color: #CE7E00;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: #FFFFFF;
	scrollbar-arrow-color: #6F4709;
	border: thin double #CCCCCC;
}
.kotak_data2{
	width: 650;
	background: none;
	padding: 5px;
	overflow: visible;
	height: 500;
	scrollbar-face-color: black;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: BLACK;
	scrollbar-arrow-color: white;
	border: thin solid #CCCCCC;
}
.kotak_data7{
	width: 650;
	background: none;
	padding: 5px;
	overflow: visible;
	height: 30;
	scrollbar-face-color: black;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: BLACK;
	scrollbar-arrow-color: white;
	border: thin solid #CCCCCC;
}



.kotak_data{
	width: 550;
	background: none;
	padding: 5px;
	overflow: visible;
	height: 200;
	scrollbar-face-color: black;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: BLACK;
	scrollbar-arrow-color: white;
	border: thin solid #CCCCCC;
}

.kotak_data8{
	width: 550;
	background: none;
	padding: 5px;
	overflow: visible;
	height: 70;
	scrollbar-face-color: black;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: BLACK;
	scrollbar-arrow-color: white;
	border: thin solid #CCCCCC;
}


.kotak_data3{
	width: 550;
	background: none;
	padding: 5px;
	overflow: visible;
	height: 218;
	scrollbar-face-color: black;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: BLACK;
	scrollbar-arrow-color: white;
	border: thin solid #CCCCCC;
}



.kotak_data4{
	width: 500;
	background: none;
	padding: 5px;
	overflow: visible;
	height: 350;
	scrollbar-face-color: black;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: BLACK;
	scrollbar-arrow-color: white;
	border: thin solid #CCCCCC;
}


.kotak_data5{
	width: 700;
	background: none;
	padding: 5px;
	overflow: scroll;
	height: 350;
	scrollbar-face-color: black;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: BLACK;
	scrollbar-arrow-color: white;
	border: thin solid #CCCCCC;
}




.kotak_data0{
	width: 550;
	background: none;
	padding: 5px;
	overflow: visible;
	height: 300px;
	scrollbar-face-color: black;
	scrollbar-shadow-color: #FFFFFF;
	scrollbar-highlight-color: #6F4709;
	scrollbar-3dlight-color: #11111;
	scrollbar-darkshadow-color: #6F4709;
	scrollbar-track-color: BLACK;
	scrollbar-arrow-color: white;
	border: thin solid #CCCCCC;
}

/* Demo 4 */

.form-4 {
	width: auto;
	margin: 0px;
	padding: 1px;
	position: static;
	font-family: 'Raleway', 'Lato', Arial, sans-serif;
	color: white;
	text-shadow: 0 2px 1px rgba(0,0,0,0.3);
	height: auto;
	font-size: 18px;
	font-weight: bold;
	vertical-align: middle;
	text-align: left;
}

.form-4 h1 {
    font-size: 22px;
    padding-bottom: 20px;
}
.form-4 select {
	width: 100%;
	padding: 8px 4px 8px 10px;
	border: 1px solid #4e3043;
	border: 1px solid rgba(78,48,67, 0.8);
	background: rgba(0,0,0,0.15);
	border-radius: 2px;
	box-shadow: 
    0 1px 0 rgba(255,255,255,0.2), 
    inset 0 1px 1px rgba(0,0,0,0.1);
	height: 40px;
	text-align: left;
	vertical-align: top;
	margin-bottom: 0px;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
	
    /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: WHITE;
    font-size: 16px;
}
.form-4 textarea {
	width: 100%;
	padding: 8px 4px 8px 10px;
	margin-bottom: 0px;
	border: 1px solid #4e3043;
	border: 1px solid rgba(78,48,67, 0.8);
	background: rgba(0,0,0,0.15);
	border-radius: 2px;
	box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
        inset 0 1px 1px rgba(0,0,0,0.1);

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: WHITE;
    font-size: 16px;



}

.form-4 input[type=number],
.form-4 input[type=text],
.form-4 input[type=password] {
	width: 100%;
	padding: 8px 4px 8px 10px;
	margin-bottom: 0px;
	border: 1px solid #4e3043;
	border: 1px solid rgba(78,48,67, 0.8);
	background: rgba(0,0,0,0.15);
	border-radius: 2px;
	box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
        inset 0 1px 1px rgba(0,0,0,0.1);
	height: 30px;
	text-align: left;
	vertical-align: middle;
	margin-top: 3px;
	margin-right: 0px;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: WHITE;
    font-size: 16px;
}

/* Placeholder style (from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) */

.form-4 input:-webkit-input-placeholder,
.form-4 textarea:-webkit-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.form-4 input:-moz-placeholder,
.form-4 textarea:-moz-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.form-4 input:-ms-input-placeholder,
.form-4 textarea:-ms-input-placeholder {/*warna placeholder*/
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.form-4 select:hover,
.form-4 textarea:hover,
.form-4 input[type=number]:hover,
.form-4 input[type=text]:hover,
.form-4 input[type=password]:hover {
border-color: #333;
background-color: #0099FF;
}
.form-4 select:focus,
.form-4 button:focus,
.form-4 textarea:focus,
.form-4 input[type=number]:focus,
.form-4 input[type=button]:focus,
.form-4 input[type=text]:focus,
.form-4 input[type=password]:focus,
.form-4 input[type=submit]:focus {
		box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
        inset 0 1px 1px rgba(0,0,0,0.1),
        0 0 0 3px rgba(255,255,255,0.15);
		outline: none; border: #0099FF;
		}

/* Fallback */
.no-boxshadow .form-4 select:focus,
.no-boxshadow .form-4 input[type=number]:focus,
.no-boxshadow .form-4 input[type=text]:focus,
.no-boxshadow .form-4 input[type=password]:focus {
    outline: 1px solid white;
}
.form-4 button,
.form-4 input[type=button] ,
.form-4 input[type=submit] {
	width: 100%;
	padding: 0px;
	background: #0099FF;
	background: -moz-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
	background: -ms-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
	background: -o-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
	background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(99,64,86,0.5)), to(rgba(76,49,65,0.7)));
	background: -webkit-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
	background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
	border-radius: 5px;
	border: 1px solid #4e3043;
	box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 2px 1px rgba(0,0,0,0.1);
	cursor: pointer;
	vertical-align: top;
	text-align: center;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0%;
	margin-top: 1px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Font styles */
    color: white;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    font-size: 16px;
    font-weight: bold;
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
	height: 100%;
}
.form-4 button:hover, 
.form-4 input[type=button]:hover,
.form-4 input[type=submit]:hover {
	box-shadow: 
        inset 0 1px rgba(255,255,255,0.2), 
        inset 0 20px 30px rgba(99,64,86,0.5);
	text-align: center;
	vertical-align: middle;
}
.form-4 button:disabled, 
.form-4 input[type=button]:disabled, 
.form-4 input[type=submit]:disabled { 
    background: none;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
    border-color: #666666; 
	/* Fallback */
    border-color: #666666;
	color: #666666 ;
}
.form-4 button:active, 
.form-4 input[type=button]:active ,
.form-4 input[type=submit]:active {
	background: #287db5;
	box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
	border-color: #000;
	border-color: rgba(0,0,0,0.9);
	text-align: center;
	vertical-align: middle;
}


/* Fallback */
.no-boxshadow .form-4 button:hover,
.no-boxshadow .form-4 input[type=button]:hover,
.no-boxshadow .form-4 input[type=submit]:hover {
	background: #000033;
	text-align: center;
	vertical-align: middle;
}

.form-4 label {
    padding: 0 0 5px 2px;
    cursor: pointer;
}

.form-4 label:hover ~ input {
    border-color: #333;
}

.no-placeholder .form-4 label {
	display: block;
	color: #FFFFFF;
}

/* FORM DEPAN */

.formdepan {
	width: auto;
	margin: 0px;
	padding: 1px;
	position: static;
	font-family: 'Raleway', 'Lato', Arial, sans-serif;
	color: white;
	text-shadow: 0 2px 1px rgba(0,0,0,0.3);
	height: auto;
	font-size: 18px;
	font-weight: bold;
	vertical-align: middle;
	text-align: left;
}

.formdepan h1 {
    font-size: 22px;
    padding-bottom: 20px;
}
.formdepan select {
	width: 100%;
	padding: 8px 4px 8px 10px;
	border: 1px solid #4e3043;
	border: 1px solid rgba(78,48,67, 0.8);
	background: rgba(0,0,0,0.15);
	border-radius: 2px;
	box-shadow: 
    0 1px 0 rgba(255,255,255,0.2), 
    inset 0 1px 1px rgba(0,0,0,0.1);
	height: 40px;
	text-align: left;
	vertical-align: top;
	margin-bottom: 0px;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
	
    /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: WHITE;
    font-size: 16px;
}
.formdepan input[type=number],
.formdepan input[type=text],
.formdepan input[type=password] {
	width: 100%;
	padding: 8px 4px 8px 10px;
	margin-bottom: 0px;
	border: 1px solid #4e3043;
	border: 1px solid rgba(78,48,67, 0.8);
	background: rgba(0,0,0,0.15);
	border-radius: 2px;
	box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
        inset 0 1px 1px rgba(0,0,0,0.1);
	height: 30px;
	text-align: left;
	vertical-align: middle;
	margin-top: 3px;
	margin-right: 0px;

    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: WHITE;
    font-size: 16px;
}

/* Placeholder style (from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) */

.formdepan input::-webkit-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.formdepan input:-moz-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.formdepan input:-ms-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.formdepan select:hover,
.formdepan textarea:hover,
.formdepan input[type=number]:hover,
.formdepan input[type=text]:hover,
.formdepan input[type=password]:hover {
border-color: #333;
background-color: #0099FF;
}
.formdepan select:focus,
.formdepan button:focus,
.formdepan textarea:focus,
.formdepan input[type=number]:focus,
.formdepan input[type=button]:focus,
.formdepan input[type=text]:focus,
.formdepan input[type=password]:focus,
.formdepan input[type=submit]:focus {
		box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
        inset 0 1px 1px rgba(0,0,0,0.1),
        0 0 0 3px rgba(255,255,255,0.15);
		outline: none; border: #0099FF;
		}

/* Fallback */
.no-boxshadow .formdepan select:focus,
.no-boxshadow .formdepan input[type=number]:focus,
.no-boxshadow .formdepan input[type=text]:focus,
.no-boxshadow .formdepan input[type=password]:focus {
    outline: 1px solid white;
}
.formdepan button,
.formdepan input[type=button] ,
.formdepan input[type=submit] {
	width: 100%;
	padding: 5px;
	background: #0099FF;
	background: -moz-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
	background: -ms-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
	background: -o-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
	background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(99,64,86,0.5)), to(rgba(76,49,65,0.7)));
	background: -webkit-linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
	background: linear-gradient(rgba(99,64,86,0.5), rgba(76,49,65,0.7));
	border-radius: 5px;
	border: 1px solid #4e3043;
	box-shadow: inset 0 1px rgba(255,255,255,0.4), 0 2px 1px rgba(0,0,0,0.1);
	cursor: pointer;
	vertical-align: top;
	text-align: center;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0%;
	margin-top: 1px;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Font styles */
    color: white;
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    font-size: 16px;
    font-weight: bold;
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
}
.formdepan button:hover, 
.formdepan input[type=button]:hover,
.formdepan input[type=submit]:hover {
	box-shadow: 
        inset 0 1px rgba(255,255,255,0.2), 
        inset 0 20px 30px rgba(99,64,86,0.5);
	text-align: center;
	vertical-align: middle;
}
.formdepan button:disabled, 
.formdepan input[type=button]:disabled, 
.formdepan input[type=submit]:disabled { 
    background: none;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
    border-color: #666666; 
	/* Fallback */
    border-color: #666666;
	color: #666666 ;
}
.formdepan button:active, 
.formdepan input[type=button]:active ,
.formdepan input[type=submit]:active {
	background: #287db5;
	box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
	border-color: #000;
	border-color: rgba(0,0,0,0.9);
	text-align: center;
	vertical-align: middle;
}


/* Fallback */
.no-boxshadow .formdepan button:hover,
.no-boxshadow .formdepan input[type=button]:hover,
.no-boxshadow .formdepan input[type=submit]:hover {
	background: #000033;
	text-align: center;
	vertical-align: middle;
}

.formdepan label {
    display: none;
    padding: 0 0 5px 2px;
    cursor: pointer;
}

.formdepan label:hover ~ input {
    border-color: #333;
}

.no-placeholder .formdepan label {
	display: block;
	color: #FFFFFF;
}


/*tambahan*/


/* The popup form - hidden by default */
.form9-popup {
	display: none;
	position: fixed;
	bottom: 1%;
  center;
	border: 3px solid #f1f1f1;
	z-index: 9;
	width: 97%;
}

/* Add styles to the form container */
.form9-container {
  max-width: 100%;
  padding: 10px;
  background-color: #999999;
}

/* Full-width input fields */
.form9-container input[type=text], .form9-container input[type=password] {
  width: 100%;
  padding: 15px;
  margin: 5px 0 22px 0;
  border: none;
  background: #f1f1f1;
}

/* When the inputs get focus, do something */
.form9-container input[type=text]:focus, .form9-container input[type=password]:focus {
  background-color: #ddd;
  outline: none;
}

/* Set a style for the submit/login button */
.form9-container .btn {
  background-color: #4CAF50;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  margin-bottom:10px;
  opacity: 0.8;
}

/* Add a red background color to the cancel button */
.form9-container .cancel {
  background-color: red;
}

/* Add some hover effects to buttons */
.form9-container .btn:hover{
  opacity: 1;
}