@import url('demo.css');
@import url('font-awesome.css');

/* GLOBALS */

*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}


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

/* umum */
a {
	color:#FF0000;
	text-decoration:blink;
	font-size: small;
}
a:hover {
	color:#333;
	text-decoration:none;
}
/* tubuh */
body {
	background:#000000 url(none) no-repeat fixed center center;
	color:#000000;
	font:0.8em Arial, Helvetica, "bitstream vera sans", sans-serif;
	width: 99%;
	height: 100%;
}
/* kepala */
#kepala {
	border-bottom:1px solid #999;
	height:80px;
	margin:0 auto;
	width:751px;
}
#kepala h1 {
	color:#0099FF;
	font-size:300%;
	letter-spacing:-3px;
	text-align:right;
	padding:5px;
	margin-bottom:-20px;
	font-family: "Courier New", Courier, mono;
}
#kepala h2 {
	color:#FF0000;
	font-size:20px;
	letter-spacing:-2px;
	text-align:right;
	font-family: "Times New Roman", Times, serif;
	text-decoration: blink;
}

/* navigasi */
#navigasi {
	background:#000000;
	border-right:1px solid #999;
	margin:0 auto;
	width:auto;
	height:auto;
	list-style:url(none) none;
	color: #FF0000;
}
#navigasi li {
	border-left:1px solid #999;
	float:left;
	width:130px;
	list-style:none;
	color: #FFFFFF;
	background-color: #000000;
	border-top-width: 1px;
	border-top-style: none;
	border-top-color: #999;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999;
}
#navigasi a {
	color: #0099FF;
	display:block;
	line-height:20px;
	text-align:center;
	font-family: Calibri, "Calibri Light";
	font-size: 14px;
	font-weight: bold;
	background-color: #000000;
	background-image: none;
}

#navigasi a:hover {
	background:#000000 url(gambar/gothic.jpg).png);
	color:#FFFF00;
}

#navigasi .active {
	background:#e3e3e3;
	color:#777;
}

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

#isi h1 {
	border-bottom:1px none #999;
	font-size:24px;
	padding:20px 0 0;
	color: #0099FF;

}

#isi h2 {
	color: #CCCCCC;

}

#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-top: thin none #0066CC;
	border-right: thin none #0066CC;
	border-bottom: thin none #0066CC;
	border-left: thin none #0066CC;
}

th{
	color: #000000;
	font-size: small;
	text-transform: none;
	text-align: center;
	padding: 0em;
	border-collapse: collapse;
	background-image: url((URL));
	border-top: thin solid #FFFFFF;
	border-right: thin solid #FFFFFF;
	border-bottom: thin solid #FFFFFF;
	border-left: thin solid #FFFFFF;



}

td{
	padding: 0em 1em;
	vertical-align: top;
	border-collapse: collapse;
	font-size: small;
	border: thin none #FFFFFF;
	text-align: left;
	color: #FFFFFF;
	margin: 0px;
}
td2{
	padding: 0em 1em;
	vertical-align: top;
	border-collapse: collapse;
	font-size: small;
	text-align: left;
	color: #FFFFFF;
	margin: 0px;
	border-top: thin none #0066FF;
	border-right: thin none #0066FF;
	border-bottom: thin solid #0066FF;
	border-left: thin none #0066FF;

}
.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_colman{
  width: 700;
  background: none;
  padding: 5px;
  overflow: scroll;
  height: 200;
  
  /*script tambahan khusus untuk IE */
  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;
}
.atas{
	width: 1250;
	background:none;
	padding: 20px;
	overflow: visible;
	height: 40;
	border: thin solid #CCCCCC;
 }
.tengah{
  width: 1250;
  background: none;
  padding: 20px;
  overflow: scroll;
  height: 365;
  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: 1250;
  background:;
  padding: 20px;
  overflow: visible;
  height: 40;
  border: thin solid #CCCCCC;
 }

.utama{
  width: 100%;
  background:#FFFFFF url(gambar/gothic.gif);
  padding: 5px;
  overflow: scroll;
  height: 90%;
  /*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;
}
/////tambahan tema button
@import url('demo.css');
@import url('font-awesome.css');

/* GLOBALS */

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

.form-1 {
    /* Size & position */
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative; /* For the submit button positioning */

    /* Styles */
    box-shadow: 
        0 0 1px rgba(0, 0, 0, 0.3), 
        0 3px 7px rgba(0, 0, 0, 0.3), 
        inset 0 1px rgba(255,255,255,1),
        inset 0 -3px 2px rgba(0,0,0,0.25);
    border-radius: 5px;
    background: white; /* Fallback */
    background: -moz-linear-gradient(#eeefef, #ffffff 10%);
    background: -ms-linear-gradient(#eeefef, #ffffff 10%);
    background: -o-linear-gradient(#eeefef, #ffffff 10%);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeefef), color-stop(0.1, #ffffff));
    background: -webkit-linear-gradient(#eeefef, #ffffff 10%);
    background: linear-gradient(#eeefef, #ffffff 10%);
}

.form-1 .field {
    position: relative; /* For the icon positioning */
}

.form-1 .field i {
    /* Size and position */
    left: 0px;
    top: 0px;
    position: absolute;
    height: 36px;
    width: 36px;

    /* Line */
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);

    /* Styles */
    color: #777777;
    text-align: center;
    line-height: 42px;
    -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;
    pointer-events: none;
}

.form-1 input[type=text],
.form-1 input[type=password]{
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    /* Size and position */
    width: 100%;
    padding: 10px 18px 10px 45px;

    /* Styles */
    border: none; /* Remove the default border */
    box-shadow: 
        inset 0 0 5px rgba(0,0,0,0.1),
        inset 0 3px 2px rgba(0,0,0,0.1);
    border-radius: 3px;
    background: #f9f9f9;
    color: #777;
    -webkit-transition: color 0.3s ease-out;
    -moz-transition: color 0.3s ease-out;
    -ms-transition: color 0.3s ease-out;
    -o-transition: color 0.3s ease-out;
    transition: color 0.3s ease-out;
}

.form-1 input[type=text] {
    margin-bottom: 10px;
}

.form-1 input[type=text]:hover ~ i,
.form-1 input[type=password]:hover ~ i {
    color: #52cfeb;
}

.form-1 input[type=text]:focus ~ i,
.form-1 input[type=password]:focus ~ i {
    color: #42A2BC;
}

.form-1 input[type=text]:focus,
.form-1 input[type=password]:focus,
.form-1 button[type=submit]:focus {
    outline: none;
}

.form-1 .submit {
    /* Size and position */
    width: 65px;
    height: 65px;
    position: absolute;
    top: 17px;
    right: -25px;
    padding: 10px;
    z-index: 2;

    /* Styles */
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 
        0 0 2px rgba(0,0,0,0.1),
        0 3px 2px rgba(0,0,0,0.1),
        inset 0 -3px 2px rgba(0,0,0,0.2);
}

.form-1 .submit:after {
    /* Size and position */
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    top: -2px;
    left: 30px;

    /* Styles */
    background: #ffffff;
    
    /* Other masks trick */
    box-shadow: 0 62px white, -32px 31px white;
}

.form-1 button {
    /* Size and position */
    width: 100%;
    height: 100%;
    margin-top: -1px;

    /* Icon styles */
    font-size: 1.4em;
    line-height: 1.75;
    color: white;

    /* Styles */
    border: none; /* Remove the default border */
    border-radius: inherit;
    background: #52cfeb; /* Fallback */
    background: -moz-linear-gradient(#52cfeb, #42A2BC);
    background: -ms-linear-gradient(#52cfeb, #42A2BC);
    background: -o-linear-gradient(#52cfeb, #42A2BC);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#52cfeb), to(#42A2BC));
    background: -webkit-linear-gradient(#52cfeb, #42A2BC);
    background: linear-gradient(#52cfeb, #42A2BC);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.3),
        0 1px 2px rgba(0,0,0,0.35),
        inset 0 3px 2px rgba(255,255,255,0.2),
        inset 0 -3px 2px rgba(0,0,0,0.1);

    cursor: pointer;
}

.form-1 button:hover,
.form-1 button[type=submit]:focus {
    background: #52cfeb;
    -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;
}

.form-1 button:active {
    background: #42A2BC;
    box-shadow: 
        inset 0 0 5px rgba(0,0,0,0.3),
        inset 0 3px 4px rgba(0,0,0,0.3);
}


/* Demo 2 */

.form-2 {
    /* Size and position */
    width: 340px;
    margin: 60px auto 30px;
    padding: 15px;
    position: relative;

    /* Styles */
    background: #fffaf6;
    border-radius: 4px;
    color: #7e7975;
    box-shadow:
        0 2px 2px rgba(0,0,0,0.2),        
        0 1px 5px rgba(0,0,0,0.2),        
        0 0 0 12px rgba(255,255,255,0.4); 
}

.form-2 h1 {
    font-size: 15px;
    font-weight: bold;
    color: #bdb5aa;
    padding-bottom: 8px;
    border-bottom: 1px solid #EBE6E2;
    text-shadow: 0 2px 0 rgba(255,255,255,0.8);
    box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

.form-2 h1 .log-in,
.form-2 h1 .sign-up {
    display: inline-block;
    text-transform: uppercase;
}

.form-2 h1 .log-in {
    color: #6c6763;
    padding-right: 2px;
}

.form-2 h1 .sign-up {
    color: #ffb347;
    padding-left: 2px;
}

.form-2 .float {
    width: 50%;
    float: left;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,1);
}

.form-2 .float:first-of-type {
    padding-right: 5px;
}

.form-2 .float:last-of-type {
    padding-left: 5px;
}

.form-2 label {
    display: block;
    padding: 0 0 5px 2px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 400;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8);
    font-size: 11px;
}

.form-2 label i {
    margin-right: 5px; /* Gap between icon and text */
    display: inline-block;
    width: 10px;
}

.form-2 input[type=text],
.form-2 input[type=password] {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    display: block;
    width: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 3px solid #ebe6e2;
    border-radius: 5px;
    -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;
}

.form-2 input[type=text]:hover,
.form-2 input[type=password]:hover {
    border-color: #CCC;
}

.form-2 label:hover ~ input {
    border-color: #CCC;
}

.form-2 input[type=text]:focus,
.form-2 input[type=password]:focus {
    border-color: #BBB;
    outline: none; /* Remove Chrome's outline */
}

.form-2 input[type=submit],
.form-2 .log-twitter {
    /* Size and position */
    width: 49%;
    height: 38px;
    float: left;
    position: relative;

    /* Styles */
    box-shadow: inset 0 1px rgba(255,255,255,0.3);
    border-radius: 3px;
    cursor: pointer;

    /* Font styles */
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 14px;
    line-height: 38px; /* Same as height */
    text-align: center;
    font-weight: bold;
}

.form-2 input[type=submit] {
    margin-left: 1%;
    background: #fbd568; /* Fallback */
    background: -moz-linear-gradient(#fbd568, #ffb347);
    background: -ms-linear-gradient(#fbd568, #ffb347);
    background: -o-linear-gradient(#fbd568, #ffb347);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#fbd568), to(#ffb347));
    background: -webkit-linear-gradient(#fbd568, #ffb347);
    background: linear-gradient(#fbd568, #ffb347);
    border: 1px solid #f4ab4c;
    color: #996319;
    text-shadow: 0 1px rgba(255,255,255,0.3);
}

.form-2 .log-twitter {
    margin-right: 1%;
    background: #34a5cf; /* Fallback */
    background: -moz-linear-gradient(#34a5cf, #2a8ac4);
    background: -ms-linear-gradient(#34a5cf, #2a8ac4);
    background: -o-linear-gradient(#34a5cf, #2a8ac4);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
    background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
    background: linear-gradient(#34a5cf, #2a8ac4);
    border: 1px solid #2b8bc7;
    color: #ffffff;
    text-shadow: 0 -1px rgba(0,0,0,0.3);
    text-decoration: none;
}

.form-2 input[type=submit]:hover,
.form-2 .log-twitter:hover {
    box-shadow: 
        inset 0 1px rgba(255,255,255,0.3), 
        inset 0 20px 40px rgba(255,255,255,0.15);
}

.form-2 input[type=submit]:active,
.form-2 .log-twitter:active{
	top: 1px;
	background-color: #FF0000;
}

/* Fallback fro broswers that don't support box shadows */
.no-boxshadow .form-2 input[type=submit]:hover {
    background: #ffb347;
}

.no-boxshadow .form-2 .log-twitter:hover {
    background: #2a8ac4;
}

.form-2 p:last-of-type {
    clear: both;    
}

.form-2 .opt {
    text-align: right;
    margin-right: 3px;
}

.form-2 label[for=showPassword] {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 11px;
    font-weight: 400;
    text-transform: capitalize;
}

.form-2 input[type=checkbox] {
    vertical-align: middle;
    margin: -1px 5px 0 1px;
}

/* Demo 3 */

.form-3 {
    font-family: 'Ubuntu', 'Lato', sans-serif;
    font-weight: 500;
    /* Size and position */
    width: 300px;
    position: relative;
    margin: 60px auto 30px;
    padding: 10px;
    overflow: hidden;

    /* Styles */
    background: #111; 
    border-radius: 0.4em;
    border: 1px solid #191919;
    box-shadow: 
        inset 0 0 2px 1px rgba(255,255,255,0.08), 
        0 16px 10px -8px rgba(0, 0, 0, 0.6);
}

.form-3 label {
    /* Size and position */
    width: 50%;
    float: left;
    padding-top: 9px;

    /* Styles */
    color: #ddd;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 #000;
    text-indent: 10px;
    font-weight: 700;
    cursor: pointer;
}

.form-3 input[type=text],
.form-3 input[type=password] {
    /* Size and position */
    width: 50%;
    float: left;
    padding: 8px 5px;
    margin-bottom: 10px;
    font-size: 12px;

    /* Styles */
    background: #1f2124; /* Fallback */
    background: -moz-linear-gradient(#1f2124, #27292c);
    background: -ms-linear-gradient(#1f2124, #27292c);
    background: -o-linear-gradient(#1f2124, #27292c);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#1f2124), to(#27292c));
    background: -webkit-linear-gradient(#1f2124, #27292c);
    background: linear-gradient(#1f2124, #27292c);    
    border: 1px solid #000;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.1);
    border-radius: 3px;

    /* Font styles */
    font-family: 'Ubuntu', 'Lato', sans-serif;
    color: #fff;

}

.form-3 input[type=text]:hover,
.form-3 input[type=password]:hover,
.form-3 label:hover ~ input[type=text],
.form-3 label:hover ~ input[type=password] {
    background: #27292c;
}

.form-3 input[type=text]:focus, 
.form-3 input[type=password]:focus {
    box-shadow: inset 0 0 2px #000;
    background: #494d54;
    border-color: #51cbee;
    outline: none; /* Remove Chrome outline */
}

.form-3 p:nth-child(3),
.form-3 p:nth-child(4) {
    float: left;
    width: 50%;
}

.form-3 label[for=remember] {
    width: auto;
    float: none;
    display: inline-block;
    text-transform: capitalize;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0px;
    text-indent: 2px;
}

.form-3 input[type=checkbox] {
    margin-left: 10px;
    vertical-align: middle;
}

.form-3 input[type=submit] {
    /* Width and position */
    width: 100%;
    padding: 8px 5px;
  
    /* Styles */
    border: 1px solid #0273dd; /* Fallback */
    border: 1px solid rgba(0,0,0,0.4);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.3),
        inset 0 10px 10px rgba(255,255,255,0.1);
    border-radius: 3px;
    background: #38a6f0;
    cursor:pointer;
  
    /* Font styles */
    font-family: 'Ubuntu', 'Lato', sans-serif;
    color: white;
    font-weight: 700;
    font-size: 15px;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
}

.form-3 input[type=submit]:hover { 
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}

.form-3 input[type=submit]:active { 
    background: #287db5;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.6);
    border-color: #000; /* Fallback */
    border-color: rgba(0,0,0,0.9);
}

.no-boxshadow .form-3 input[type=submit]:hover {
    background: #2a92d8;
}

.form-3:after {
    /* Size and position */
    content: "";
    height: 1px;
    width: 33%;
    position: absolute;
    left: 20%;
    top: 0;

    /* Styles */
    background: -moz-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: -ms-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: -o-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(transparent), color-stop(0.25, #444), color-stop(0.5, #b6b6b8), color-stop(0.75, #444), to(transparent));
    background: -webkit-linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
    background: linear-gradient(left, transparent, #444, #b6b6b8, #444, transparent);
}

.form-3:before {
    /* Size and position */
    content: "";
    width: 8px;
    height: 5px;
    position: absolute;
    left: 34%;
    top: -7px;
    
    /* Styles */
    border-radius: 50%;
    box-shadow: 0 0 6px 4px #fff;
}

.form-3 p:nth-child(1):before{
    /* Size and position */
    content:"";
    width:250px;
    height:100px;
    position:absolute;
    top:0;
    left:45px;

    /* Styles */
    -webkit-transform: rotate(75deg);
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -o-transform: rotate(75deg);
    transform: rotate(75deg);
    background: -moz-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    background: -ms-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    background: -o-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    background: -webkit-linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    background: linear-gradient(50deg, rgba(255,255,255,0.15), rgba(0,0,0,0));
    pointer-events:none;
}

.no-pointerevents .form-3 p:nth-child(1):before {
    display: none;
}

/* 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: baseline;
	margin-bottom: 15px;


    -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: 15px;
	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;

    -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 {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

.form-4 input:-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 {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.form-4 select: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 input[type=number]:focus,
.form-4 input[type=button]:focus,
.form-4 input[type=date]: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=date]: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: 8px 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: middle;
	text-align: center;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0%;
	margin-top: 12.5px;
    -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;
}
.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: black;
    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 {
    display: none;
    padding: 0 0 5px 2px;
    cursor: pointer;
}

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

.no-placeholder .form-4 label {
    display: block;
}
/* Demo 5 */
.form-5 {
    /* Size and position */
    width: 300px;
    margin: 60px auto 30px;
    position: relative;

    /* Styles */
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.1), 0 3px 2px rgba(0,0,0,0.1);
}

.form-5 p {
    width: 70%;
    float: left;
    border-radius: 5px 0 0 5px;
    border: 1px solid #fff;
    border-right: none;
}

.form-5 input[type=text],
.form-5 input[type=password] {
    /* Size and position */
    width: 100%;
    height: 50px;
    padding: 0 10px;

    /* Styles */
    border: none; /* Remove the default border */
    background: white; /* Fallback */
    background: rgba(255,255,255,0.2);
    box-shadow: 
        inset 0 0 10px rgba(255,255,255,0.5);

    /* Font styles */
    font-family: 'Montserrat', sans-serif;
    text-indent: 10px;
    color: #ee4c8d;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    font-size: 20px;       
}

.form-5 input[type=text] {
    border-bottom: 1px solid #fff; /* Fallback */
    border-bottom: 1px solid rgba(255,255,255,0.7);
    border-radius: 5px 0 0 0;
}

.form-5 input[type=password] {
    border-top: 1px solid #CCC; /* Fallback */
    border-top: 1px solid rgba(0,0,0,0.1);
    border-radius: 0 0 0 5px;
}

.form-5 input[type=text]:hover,
.form-5 input[type=password]:hover,
.form-5 input[type=text]:focus,
.form-5 input[type=password]:focus {
    background: #f7def7; /* Fallback */
    background: rgba(255,255,255,0.4);
    outline: none;
}

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

.form-5 input::-webkit-input-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: 'Handlee', cursive;
}

.form-5 input:-moz-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: 'Handlee', cursive;
}

.form-5 input:-ms-input-placeholder {
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
    font-family: 'Handlee', cursive;
}

.form-5 button {
    /* Size and position */
    width: 30%;
    height: 102px;
    float: left;
    position: relative;
    overflow: hidden;

    /* Styles */
    background: #ee4c8d;
    background: url(../images/noise.png), -moz-radial-gradient(center, ellipse cover, #ee4c8d 0%, #b53467 100%);
    background: url(../images/noise.png), -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ee4c8d), color-stop(100%,#b53467));
    background: url(../images/noise.png), -webkit-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
    background: url(../images/noise.png), -o-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
    background: url(../images/noise.png), -ms-radial-gradient(center, ellipse cover, #ee4c8d 0%,#b53467 100%);
    background: url(../images/noise.png), radial-gradient(ellipse at center, #ee4c8d 0%,#b53467 100%);

    border-radius: 0 5px 5px 0;
    box-shadow:
        inset 0 0 4px rgba(255, 255, 255, 0.7), 
        inset 0 0 0 1px rgba(0, 0, 0, 0.2);
    border: none;
    border-left: 1px solid silver;
    cursor: pointer;  
    line-height: 102px; /* Same as height */
}

.form-5 button i {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -20px;
    font-size: 64px;
    line-height: 109px;
    color: #8d1645;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}

.form-5 button span {
    display: block;

    /* Font styles */ 
    color: #8d1645;
    font-family: 'Montserrat', Arial, sans-serif; 
    font-size: 20px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    -webkit-backface-visibility: hidden;
}

/* Focus and hover on button */

.form-5 button:focus {
    outline: none;
}

.form-5 button:hover span,
.form-5 button:focus span {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transform: rotate(-90deg) translateY(-20px);
    -moz-transform: rotate(-90deg) translateY(-20px);
    -ms-transform: rotate(-90deg) translateY(-20px);
    -o-transform: rotate(-90deg) translateY(-20px);
    transform: rotate(-90deg) translateY(-20px);
}

.form-5 button:hover i,
.form-5 button:focus i {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    left: 0;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -ms-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

/* Click on button */

.form-5 button:active span,
.form-5 button:active i {
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none; 
}
.form-5 button:active span {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

.form-5 button:active i {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
    opacity: 0.5;
    left: 0;
    color: #fff;
	}
.garis_bawah{
	border-bottom-style: solid;
	border-top-color: #0099FF;
	border-right-color: #0099FF;
	border-bottom-color: #0099FF;
	border-left-color: #0099FF;
	border-top-width: thin;
	border-right-width: thin;
	border-bottom-width: thin;
	border-left-width: thin;
	}
.highlighted-row {
	width: 100%;
	border-collapse: collapse;
	box-shadow: 0 2px 3px 1px #ddd;
	overflow: hidden;
	border:10px solid #fff;
}
.highlighted-row th,.highlighted-row td{
	vertical-align: top;
	padding:10px 7px;
	text-align: left;
	margin:0;
}
	/* Make row highlighted */
	.highlighted-row tbody tr:nth-child(7) { 
		background:#cc3333; /* red */
		color:#fff;
	}

/* End CSS for Highlighted Row in index2.html */