body{
	line-height:1;
	text-align:left;
	background: #1650da url(bglog2.jpg) no-repeat fixed bottom / 100% 
}
	
.left ol, ul{
	list-style:none
}
blockquote,q{
	quotes:none
}
blockquote:before,blockquote:after,q:before,q:after{
	content:'';
	content:none
	}
ins{
	text-decoration:none
}
del{
	text-decoration:line-through
}
table{
	border-collapse:collapse;
	border-spacing:0
}
strong,b{
	font-weight:bold
}
body{
	margin:0;
	padding:0;
	border:0;
	font-size:100%;

}
a,abbr,acronym,address,applet,b,big,blockquote,
button,canvas,caption,center,cite,code,dd,del,
dfn,div,dl,dt,em,embed,fieldset,font,form,h1,
h2,h3,h4,h5,h6,hr,html,i,iframe,img,ins,kbd,
label,legend,li,menu,object,ol,p,pre,q,s,
samp,small,span,strike,strong,sub,sup,table,
tbody,td,tfoot,th,thead,tr,tt,u,ul,var{
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	background:transparent
}
html{
	height:100%
}
body{
	height:100%;
	word-wrap:break-word;
	margin:0;
	padding:0
}
body,button,input,textarea{
	font:12px arial,sans-serif
}
a{
	color:#03c;
	text-decoration:none
}
a:hover{
	text-decoration: none;
}
button:focus{
	outline:1px solid #999
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 3px;
    margin-top: 6px;
}
a {    
	cursor: pointer;
}
ol li {    
	line-height: 2em;   
	list-style-image: none; 
	margin: 0 0 0 30px;
}
ol.f {
	list-style-type:lower-alpha;
}
.logo-gbr{
	position: absolute; 
	right: 85px; 
	top: 15px;
}
h1.title {    
	color: #fff;    
	font-size: 28px;    
	position: absolute;    
	top: 10px;   	
	font-family: Helvetica,Arial,sans-serif;	
	letter-spacing: -1px;    
	text-shadow: 1px 1px 1px #0F4DB8;
}
h1.acs {    
	color: #fff;   
	font-size: 20px;
	position: absolute;
	top: 38px;   	
	font-family: Helvetica,Arial,sans-serif;	
	letter-spacing: 0px;    
	text-shadow: 1px 1px 1px #0F4DB8;
}
h1.acs2 {    
	color: #fff;    
	font-size: 11px;    
	right: 0px;    
	position: absolute;    
	top: 62px;   	
	font-family: Helvetica,Arial,sans-serif;	
	letter-spacing: 0px;    
	text-shadow: 1px 1px 1px #0F4DB8;
}
h3.logo {    
	color: #B0B0B0;    
	font-size: 18px;    
	text-shadow: 0 2px 2px #FFFFFF;	
	font-family: Helvetica,Arial,sans-serif;	
	letter-spacing: -1px;
}
h2.title {    
	color: #0072E4;    
	font-size: 18px;    
	text-shadow: 0 1px 1px #E4E4E4;	
	margin-bottom: 8px;
}
h2.big {    
	font-size: 27px;    
	text-shadow: 0 1px 1px #E4E4E4;	
	margin-bottom: 8px;	
	text-align: center;
}
.title2 {    
	font-size: 14px; 
	font-weight: bold;   
	line-height: 24px;    
	text-align: left;    
	text-transform: uppercase;	
	font-family: "Tahoma","Lucida Sans",Helvetica,sans-serif;	
	margin-top: 10px;
}
#wrapper{	
	width: 1020px;	
	position: relative;	
	margin-left: auto;	
	margin-right: auto;
}
.wrap{
	margin-top: 15px; 
	height: 190px; 
	width: 1000px;
	position: absolute; 
	padding: 10px 10px 0px; 
	border-radius: 7px;
	border: 1px solid #007DFB;
	background: #FF8300 url(bg-top.JPG) no-repeat;
}
.wrap a{
	text-decoration: none; 
	color: #000;
}
.bold{
	font-weight: bold;
	font-size: 15px;
	line-height: 40px;
}
.info{    		
	display: table-cell;		
	border-radius: 7px;	
	border: 1px solid #999;	/*vertical-align: middle;	*/	
	line-height: 24px;	
	text-align: center;	
	background-color: #E7E7E7;	
	background-image: -moz-linear-gradient(center top , #A0A0A0 0pt, #FFF 100%);/*E7E7E7*/	
	font-weight: bold;	
	text-shadow: 0 1px 1px #FFFFFF;		
	height: 24px;
	margin-top: 20px;
}
.kal{
	position: absolute; 
	top: 95px; 
	text-shadow: 0 1px 1px #FFFFFF;
	font-weight: bold; 
	left: 10px;
	background-color:#fff;
}
.ini{
	position: absolute; 
	color:#006FDB; 
	top: 12px; 
	text-shadow: 0 1px 1px #FFFFFF;
	left: 185px;
	}
.tgl-dpn{
	background-image: -moz-linear-gradient(center top , #FEFEFE 0pt, #E0E0E0 100%); 
	background-color: #fff;
	width: 50px; 
	float: left; 
	padding: 0 5px 0; 
	border-radius: 7px 0px 0px 7px;
}
.tgl-blkg{
	background-image: -moz-linear-gradient(center top , #FEFEFE 0pt, #E0E0E0 100%); 
	background-color: #fff;width: 170px; 
	float: right;padding: 0 5px 0; 
	border-radius: 0px 7px 7px 0px;
}
.last2 {
	width: 115px;
}
.daftar{
	width: 370px;
	margin-right: 10px;
	float: left;
}
.ujian{
	width: 280px;
	margin-right: 10px;
	float: left;
	color: #333;
}
.pengumuman{
	width: 280px;
	float: left;
	color: #333;
}
.lbr{
	letter-spacing: 2px;
}
.now {
	background-image: -moz-linear-gradient(center top , #FEFEFE 0pt, #A4CBF1 100%); 
	background-color:#A4CBF1; 
}
 /*#A4CBF1*/
 .roll {
    font-weight: bold;
    margin-top: 170px; 
    height: 24px; 
    line-height: 24px; 
    width: 970px;
    position: absolute; 
    padding: 30px 0px 0px;
    text-shadow: 0 1px 1px #FFFFFF; 
 }
 #content{	
 	margin-top: 230px;
 	margin-bottom: 20px;	
 	border-radius:10px;	
 	border: 1px solid #DDDDDD;/*    box-shadow: 0 0 7px #999;*/	
 	width: 1020px;	
 	background-color: #0072E4;	
 	float: left;        
 	height: auto;        
}
.gbr-tgh{	
	display: block;    
	margin-left: auto;    
	margin-right: auto
}
.tgh{
	text-align: center;
}
p {    
	margin-bottom: 1em;
}
.left{	
	border-top-left-radius: 8px;
	/*	background: -moz-linear-gradient(-90deg, #EAF5FA, #C5E8F1) repeat scroll 0 0 transparent; */
	/*	background: -moz-linear-gradient(-90deg, #F1FEF4, #C4E6BD) repeat scroll 0 0 transparent; */	
	/*	background-color: #6A6A6A;	background-color: #D5EDF4; */	
	float: left;	
	width: 250px;
}
.visit{
	font-weight: bold; 
	text-shadow: 0 1.5px 1.5px #FFFFFF; 
	color: #666666;
	margin-top: 5px;
	float: right;
}
.right{	
	border-top-right-radius: 8px;	
	background-color: #fff;	
	float: left;	
	width: 730px;	
	min-height: 500px;	
	padding: 20px;	
	font-family: "Helvetica","Tahoma","Lucida Sans",sans-serif,Arial;    
	font-size: 12px;	
	text-align: justify;	
	line-height: 1.8em;
}
.right a:hover{
	text-decoration: none; 
	background-color:#e7ecfa;
	outline:3px solid #e7ecfa;
	-moz-outline-radius:3px;
}
.light{
	background-color: #DAE9F8;
	padding: 5px; 
	border-bottom: 1px solid #ccc; 
	border-top: 1px solid #ccc;width: 100%;
	margin-bottom: 20px;
	text-align: center;
	font-size: 13px;
}.clear{clear: both;}
#promo{
	padding: 5px;
	width:240px;
}
#promo h2{
	font-size: 20px;    
	font-weight: bold;    
	line-height: 1;    
	margin: 5px 0 5px;    
	padding: 0;
}
#back-tabel {    
	border-collapse: collapse;      
	font-size: 12px;   
	text-align: left;
}
#back-tabel tbody td {    
	background-color: #DAE9F8;
}
#back-tabel td {
    border-top: 1px solid #FFFFFF;    
    color: #0072E4;    
    padding: 5px 10px;
}
#back-tabel tbody tr:hover td {
    background: none repeat scroll 0 0 transparent;    
    color: #000;
}
ul#nav li {    
	display: inline;    
	list-style: none outside none;
}
ul#nav li a {    
	background: url("nav.png") no-repeat scroll 13px 14px transparent;    
	border-bottom: 1px solid #DFDFDF;    
	color: #000000;    
	display: block;    
	padding: 5px 10px 5px 27px;    
	text-decoration: none;
}
ul#nav li a:hover {    
	background-color: #DAE9F8;    
	color: #A52A0A;
}
input[type="password"], input[type="text"], input[type="url"] {    
	-moz-border-bottom-colors: none;    
	-moz-border-image: none;    
	-moz-border-left-colors: none;    
	-moz-border-right-colors: none;    
	-moz-border-top-colors: none;    
	-moz-box-sizing: border-box;    
	background: none repeat scroll 0 0 #FFFFFF;    
	border-color: #C0C0C0 #D9D9D9 #D9D9D9;    
	border-radius: 1px 1px 1px 1px;    
	border-right: 1px solid #D9D9D9;    
	border-style: solid;    
	border-width: 1px;    
	display: inline-block;    
	   
	margin: 0;    
	padding-left: 8px;	
	width: 100%;	 
	font-size: 15px;    
	
}
.label{
	font-weight: bold; 
	color: #FFF;
	text-shadow: 0 1px 1px #222; 
}
input[type="password"]:hover, input[type="text"]:hover, input[type="url"]:hover {    
	-moz-border-bottom-colors: none;    
	-moz-border-image: none;    
	-moz-border-left-colors: none;    
	-moz-border-right-colors: none;    
	-moz-border-top-colors: none;    
	border-color: #A0A0A0 #FFA449 #FFA449;    
	border-right: 1px solid #FFA449;    
	border-style: solid;    
	border-width: 1px;    
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
}
.form{
	padding: 5px;
	max-width: 80%;
	margin-bottom: 0px;
	
}
#guide.login .uix {    
	font-size: 13px; 
	padding: 10px;
}
#guide button:first-child { 
   margin-top: 0;
}
#guide .uix {
    line-height: 17px;
}
#guide input[type="submit"] {
    display: block;
    margin-top: 5px;    
    width: 100%;
}
.uix, .yt-subscription-button.subscribed {    
	-moz-border-bottom-colors: none;    
	-moz-border-image: none;    
	-moz-border-left-colors: none;    
	-moz-border-right-colors: none;    
	-moz-border-top-colors: none;    
	background-image: -moz-linear-gradient(center top , #FFFFFF 0pt, #E0E0E0 100%);    
	border-color: #CCCCCC #CCCCCC #AAAAAA;    
	border-radius: 3px 3px 3px 3px;    
	border-style: solid;    
	border-width: 1px;    
	box-shadow: 0 0 1px #FFFFFF inset;    
	color: #555555;    
	font-size: 11px;    
	font-weight: bold;   
	height: 2.95em;    
	padding: 0 0.91em;    
	text-shadow: 0 0 0 transparent, 0 1px 0 #FFFFFF;	
	cursor: pointer;
}
.uix:hover, .uix:active {    
	background-image: -moz-linear-gradient(center top , #FFFFFF 0pt, #E0E0E0 100%);    
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 3px #FFFFFF inset;
}
a.uix {    
	display: inline-block;    
	line-height: 2.7em;    
	text-decoration: none;
}
.uix .uix-content {    
	line-height: normal;
}
.uix-icon + span.uix-content {    
	display: inline-block;    
	margin-top: -1px;    
	vertical-align: middle;
}
.uix-icon {    
	margin-right: 7px;
}
.uix-icon-arrow, .uix-arrow {    
	border-top-color: #8D8D8D;    
	border-width: 4px 4px 0;
}
.uix-toggled .uix-arrow {    
	border-bottom-color: #8D8D8D;    
	border-top-color: transparent;    
	border-width: 0 4px 4px;
}
.uix-toggled:hover .uix-arrow {    
	border-bottom-color: #333333;
}
.uix:focus, .uix.focus {    
	box-shadow: 0 0 5px #4496E7, 0 0 10px #FFFFFF inset;    
	outline: medium none;
}
.uix.uix-active, .uix.uix-active:focus, .uix.uix-toggled:active, .uix.uix-toggled:focus {    background-image: -moz-linear-gradient(center bottom , #FFFFFF 0pt, #E0E0E6 100%);    border-color: #999999 #CCCCCC #CCCCCC;    box-shadow: 0 1px 1px #AAAAAA inset;}.uix.uix-short {    height: 2.3em;}.uix-text {    background: none repeat scroll 0 0 transparent;    border-color: #DDDDDD;    box-shadow: 0 1px 1px #FFFFFF;    filter: none;}.uix-text:hover {    border-color: #999999;    filter: none;}.uix.uix-primary, .uix.uix-primary[disabled], .uix.uix-primary[disabled]:active, .uix.uix-primary[disabled]:focus, .uix.uix-primary[disabled]:hover {    background-color: #6891E7;    background-image: -moz-linear-gradient(center top , #6891E7 0pt, #304EA6 100%);    border-color: #304EA6 #304EA6 #000000;    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;    color: #FFFFFF;    text-shadow: 0 0 0 transparent, 0 1px 0 rgba(0, 0, 0, 0.45);}.uix.uix-primary[disabled] {    opacity: 0.4;}.uix.uix-primary:hover {    background-image: -moz-linear-gradient(center bottom , #557CD1 93%, #304EA6 100%);}.uix.uix-primary:active {    background-image: -moz-linear-gradient(center bottom , #6891E7 0pt, #304EA6 100%);    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75) inset, 0 1px 0 #FFFFFF;    color: #FFFFFF;}.uix.uix-dark, .uix.uix-dark[disabled], .uix.uix-dark[disabled]:active, .uix.uix-dark[disabled]:focus, .uix.uix-dark[disabled]:hover {/*  background-color: #454545;    background-image: -moz-linear-gradient(center top , #474747 0pt, #2B2B2B 100%); */	background-color: #454545;    background-image: -moz-linear-gradient(center top , #FFA449 0pt, #FF8300 100%);    border-color: #333333 #333333 #000000;/*	border-color: #FF8300 #FF8300 #000000;*/    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;    color: #FFFFFF;    text-shadow: 0 0 0 transparent, 0 1px 0 rgba(0, 0, 0, 0.45);}.uix.uix-dark[disabled] {    opacity: 0.4;}.uix.uix-dark:hover {/*    background-color: #333333;    background-image: -moz-linear-gradient(center bottom , #333333 0pt, #333333 100%); */	background-color: #FFA449;    background-image: -moz-linear-gradient(center bottom , #FFA449 0pt, #FFA449 100%);}.uix.uix-dark:active {    background-image: -moz-linear-gradient(center bottom , #333333 0pt, #333333 100%);    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75) inset, 0 1px 0 #FFFFFF;    color: #FFFFFF;}.uix.uix-destructive, .uix.uix-destructive[disabled], .uix.uix-destructive[disabled]:active, .uix.uix-destructive[disabled]:focus, .uix.uix-destructive[disabled]:hover {    background-color: #BC403A;    background-image: -moz-linear-gradient(center top , #BC403A 0pt, #852F2B 100%);    border-color: #852F2B #852F2B #000000;    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) inset;    color: #FFFFFF;    text-shadow: 0 0 0 transparent, 0 1px 0 rgba(0, 0, 0, 0.45);}.uix:active, .uix.uix-toggled, .uix.uix-toggled:hover, .uix.uix-toggled:focus {    -moz-border-bottom-colors: none;    -moz-border-image: none;    -moz-border-left-colors: none;    -moz-border-right-colors: none;    -moz-border-top-colors: none;    background-image: -moz-linear-gradient(center top , #E6E6E6 0pt, #DCDCDC 100%);    border-color: #999999 #AAAAAA #CCCCCC;    border-left: 1px solid #AAAAAA;    border-right: 1px solid #AAAAAA;    border-style: solid;    border-width: 1px;    box-shadow: 0 1px 2px #AAAAAA inset;    color: #555555;}.uix.uix-reverse .uix-arrow {    border-bottom-color: #8D8D8D;    border-width: 0 4px 4px;}
/*-------------------*/

.guide-item {    
	-moz-transition: border 0.2s ease 0s;    
	background: -moz-linear-gradient(center top , #FEFEFE 0pt, #E0E0E0 100%) repeat scroll 0 0 #E0E0E0;
	 /*	background: -moz-linear-gradient(-90deg, #4794BC, #3A7999) repeat scroll 0 0 transparent; */
	 /*	background: -moz-linear-gradient(-90deg, #419B36, #357F2C) repeat scroll 0 0 transparent; */
	 /*  ASLI   background: -moz-linear-gradient(center top , #292929 0pt, #252525 100%) repeat scroll 0 0 #272727; */    
	 border-right: 4px solid transparent;	
	 background-color: #DAE9F8;	
	 border-right-color: #E0E0E0;
	 /*	background-color: #272727;	border-right-color: #272727;	color: #999999; */	
	 color: #000;
	 /*  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);*/	
	 font-weight: bold;	     
	 cursor: pointer;    
	 display: block;    
	 font-size: 13px;    
	 line-height: 28px;	    
	 margin: 0;    
	 min-height: 28px;    
	 padding: 0 5px 0 10px;    
	 position: relative;
}
a {    text-decoration: none;}
.guide-item:hover {    
	background: none repeat scroll 0 0 #1650da;    
	border-right-color: #666666;	
	color: #FFFFFF;    
	text-decoration: none;
}
.guide-item.selected, .guide-item.selected:hover {    
	background-color: #1650da; 

	border-right: solid rgba(0, 0, 0, 0.1);
	/*    color: #CCCCCC;*/	
	color: #666666;	
	font-weight:bold;
}
.guide-item-container {    border-bottom: 1px solid #FEFEFE;    border-top: 1px solid #E0E0E0;/*	border-bottom: 1px solid #1B1B1B;    border-top: 1px solid #323232;*/}
.guide-item .thumb {    padding: 3px 0;}.thumb, .display-name {    line-height: 0;    vertical-align: middle;}.thumb {    display: inline-block;    margin-right: 5px;}
.guide-item .system-icon.popular {    background-position: 0 -895px;}
.guide-item .system-icon {/*    background: url("//s.ytimg.com/yt/imgbin/www-guide-vflDQ_AIv.png") no-repeat scroll 0 -895px transparent;*/    display: inline-block;    height: 28px;    width: 28px;}
/* -----------FOOTER----------- */
#footer {	
	padding-top:5px; 
	clear: both;    margin-top: 1.1666em;    
	padding-bottom: 30px;
	
	margin: 0 auto;    width: 1020px;
	border-radius: 0px 0px 10px 10px;
	background-color: #1650da;   
	
}
#footer  a{
	text-decoration: none;
}
#footer-logo {    
	color: #666666;    
	float: left;    
	font-size: 11px;    
	margin: 10px 20px 30px 0;    
	padding: 25px 35px 20px 0;    
	position: relative;
}
#footer-logo span.copyright {    
	margin-top: 14px;
}
#footer-logo span {    
	display: block;    
	font-size: 10px;    
	text-align: center;
}
#footer-logo #footer-pisah {    
	background: url("pisah.png") no-repeat scroll transparent;    
	height: 118px;    
	position: absolute;    
	right: 0;    
	top: 0;    
	width: 13px;
}
#footer #footer-atas{    
	margin-top: 10px;	
	color: #fff;
	font-weight: bold;	
	text-shadow: 0 1px 1px #000;	
	margin-bottom: 5px;
	margin-left: 15px;
}
#footer-bawah {    
	font-size: 11px;	
	color: #fff;
	font-weight: bold;	
	text-shadow: 0 1px 1px #000;
	margin-left: 15px;
}
#footer-bawah a {    
	text-decoration: none;	
	font-size: 11px;	
	color: #666666;font-weight: bold;	
	text-shadow: 0 1px 1px #FFFFFF;
}
#footer-bawah a:hover{
	border-bottom: 1px dotted #666666;
}


.login {
  border-radius: 2px 2px 5px 5px;
  padding: 10px 20px 20px 20px;
  width: 82%;
  max-width: 225px;
  background: #ffffff;
  position: relative;
  padding-bottom: 60px;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.3);
}
.login.loading button {
  max-height: 100%;
  padding-top: 50px;
}
.login.loading button .spinner {
  opacity: 1;
  top: 40%;
}
.login.ok button {
  background-color: red;
}
.login.ok button .spinner {
  border-radius: 0;
  border-top-color: transparent;
  border-right-color: transparent;
  height: 20px;
  animation: none;
  transform: rotateZ(-45deg);
}
.login input {
  display: block;
  padding: 10px 10px;
  margin-bottom: 10px;
  width: 100%;
  border: 1px solid #ddd;
  transition: border-width 0.2s ease;
  border-radius: 2px;
  color: #ccc;
}
.login input + i.fa {
  color: #fff;
  font-size: 1em;
  position: absolute;
  margin-top: -37px;
  opacity: 0;
  left: 0;
  transition: all 0.1s ease-in;
}
.login input:focus {
  outline: none;
  color: #444;
  border-color: #2196F3;
  border-left-width: 35px;

}
.login input:focus + i.fa {
  opacity: 1;
  left: 30px;
  transition: all 0.25s ease-out;
}
.login a {
  font-size: 0.8em;
  color: #2196F3;
  text-decoration: none;
}
.login .title {
  color: #444;
  font-size: 1.6em;
  font-weight: bold;
  margin: 10px 0 20px 0;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  text-align: center;
}
.login button {
  width: 74%;
  margin-left:9%;
  margin-bottom: 5px;
  height: 80%;
  padding: 10px ;
  background: #1650da;
  color: #fff;
  display: block;
  border: none;
  margin-top: 5px;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 40px;
  border: 0px solid rgba(0, 0, 0, 0.1);
  border-radius: 0 0 2px 2px;
  transform: rotateZ(0deg);
  transition: all 0.1s ease-out;
  border-bottom-width: 7px;
}
.inputsubmit{
	padding:5px 8px;
	
	font-weight:bold;
	
	font-size:14px;
	background:#eeeeee;
	border:1px solid #aaaaaa;
	color:#444444;
	text-decoration:none;
	cursor:pointer;
}
.inputsubmit:hover{
	background:#ffffff;
	color:#000000;
	border:1px dotted #000000;
	text-decoration:none;
}