::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {    background-color: rgba(255,255,255,0.41);    border-left: 0px solid rgba(255,255,22255,0.11);}
::-webkit-scrollbar-thumb {    background-color: rgba(39,61,68,0.89); border-radius:3px;}
::-webkit-scrollbar-thumb:hover {	background-color:rgba(39,61,68,0.99);}


.merahmd{	background-color:#FEB0B0; color:#fff;}
.merah{	background-color:#F44336; color:#fff;}
.merahtw{	background-color:#942E27; color:#fff;}

.orangemd{background-color:#ffcc00; color:#fff;}
.orange{background-color:#FF9801; color:#fff;}
.orangetw{background-color:#BB6F00; color:#fff;}

.coklatmd{background-color:#C4BD97; color:#fff;}
.coklat{background-color:#938953; color:#fff;}
.coklattw{background-color:#494429; color:#fff;}

.ungumd{	background-color:#E3A9FF; color:#fff;}
.ungu{	background-color:#9954BB; color:#fff;}
.ungutw{	background-color:#64347C; color:#fff;}

.birumd{	background-color:#87CFFF; color:#fff;}
.biru{	background-color:#0099FF; color:#fff;}
.birutw{	background-color:#005892; color:#fff;}

.hijaumd{	background-color:#C9E387; color:#fff;}
.hijau{	background-color:#8BB12B; color:#fff;}
.hijautw{	background-color:#547500; color:#fff;}





html, body{ margin: 0; padding: 0; border: 0; outline: 0; font-family:Trebuchet MS;}
body { overflow-x:hidden;}
a{text-decoration:none; color:#C00;}
.container{padding-top:99px;}
header{position:fixed; text-align:left; top:0; left:0; line-height:17px; right:0; background:url(../images/sistem/header.jpg) no-repeat right bottom #D9442E; padding:11px; background-size:auto 100%; color:#FFF; box-shadow:inset 0 21px 21px rgba(0,0,0,.05), 0 1px 5px rgba(0,0,0,.21); z-index:999;}
header .pic{width:35px; height:35px; margin:-1px 11px; transition:all ease-in .21s; float:left; background:url(../images/sistem/dinas-pendidikan.gif) no-repeat center center rgba(255,255,255,.91); border-radius:100%; background-size:auto 71%;}
header:hover .pic{width:47px; height:47px;margin:-7px 5px; background-image:url(../images/sistem/home.png); background-size:auto 41%; background-color:rgba(255,255,255,.09);}
header b{display:block; font-size:12px;}
header strong{font-size:19px; letter-spacing:3px; display:block;}
header strong+strong{font-size:14px; display:block; letter-spacing:normal; text-transform:capitalize;}

.uptlogin{display:block; min-height:333px; border-radius:5px; background-color:#fff; font-family:tahoma; font-size:11px; box-shadow:0 1px 3px rgba(0,0,0,.21); padding:0; margin-bottom:21px; text-align:center;}
.uptlogin:hover{box-shadow:0 0 9px rgba(0,0,0,.21);}
.uptlogin label{padding:9px 15px; cursor:pointer; width:100%; margin:0 -9px; display:inline-block; position:relative;}
.uptlogin label.head{display:block; margin:0; background:url(../images/sistem/login.png) no-repeat center center; background-size:cover; height:141px; border-radius:5px 5px 0 0; margin-bottom:41px; text-align:center;}
.uptlogin label.head .pic{ margin-top:41px; display:inline-block; width:111px; height:111px; border-radius:100%; background:url(../images/sistem/dinas-pendidikan.gif) no-repeat center center; background-size:71%; background-color:rgba(255,255,255,.91);transition:all .41s;}
.uptlogin:hover label.head .pic{width:141px; height:141px; margin-top:21px; background-color:rgba(255,255,255,.41);}
.uptlogin span{display:block;}
.uptlogin span label{border-radius:5px; width:auto; background-color:#f5f5f5; margin:9px 0; background:url(../images/sistem/dinas-pendidikan.gif); background-repeat:no-repeat; background-size:auto 21px; background-position: left 5px center; padding-left:33px; background-color:#f5f5f5;}
.uptlogin span label input{position:absolute; opacity:0; width:21px; bottom:0; left:0;}
.uptlogin span label.act,.uptlogin span label:hover{background-color:#ffcc00;}
.uptlogin > div > input{ margin:0 0 9px 0;}

.persen{min-height:313px; margin:0 0 21px 0; padding:0 ; text-align:center; box-shadow:0 0 5px rgba(0,0,0,.21); border-radius:5px; overflow:hidden;}
.persen > p{margin:0; padding:0; text-align:left; font-size:12px;}
.persen > p a{color:#fff; display:block; background-image:url(../images/sistem/home.png); background-repeat:no-repeat; background-position:left 11px top; background-size:auto 16px; line-height:21px; text-decoration:none; background-color:rgba(0,0,0,.41); padding:0 9px 0 33px;}
.persen > p a+a{border-top:dotted 1px rgba(0,0,0,.21); background-color:transparent;}
.persen > p a+a:hover{background-color:rgba(255,255,255,.21);}
.persen > p a strong{min-width:63px; display:inline-block; text-align:center;}
.persen > p a b{min-width:33px; display:inline-block; float:right; text-align:center;}
.persen > .pengawas{display:inline-block; width:121px; text-align:center; background-color:rgba(0,0,0,.41); border-radius:3px 3px 0 0; vertical-align:top;}
.persen > .pengawas .img{display:inline-block; width:57px; height:71px; border:solid 1px rgba(255,255,255,.21); border-radius:5px;}
.persen > .chart{display:inline-block; }
.persen > b{display:block; margin-top:-1px; padding:9px; text-align:center; background-image:url(../images/sistem/focus.png); background-repeat:no-repeat; background-position:right 7px center; background-size:auto 27px; background-color:rgba(0,0,0,.41);}
.persen li{display:block; text-transform:uppercase; font-size:13px; color:#fff; text-align:left; border-top:solid 1px rgba(255,255,255,.11);}
.persen li a{color:#fff; display:block; line-height:21px; padding:9px 0 9px 9px; text-decoration:none; font-weight:bold;}
.persen li a:hover{background-color:rgba(0,0,0,.07);}
.persen li+li{}
.persen li ul{padding:0; margin:0;}
.persen li ul li{margin:0; text-transform:capitalize;}
.persen li ul li a{padding-left:25px;}


.posting{display:block; font-family:tahoma; font-size:12px; border:solid 1px #eee; box-shadow:0 1px 9px rgba(0,0,0,.03); margin:0 0 21px 0; padding:0; text-align:center; min-height:313px; background:url(../images/bg.png)  center center #fff; color:#fff; position:relative; overflow:hidden; border-radius:5px 5px 0 0;}
.posting .header{padding:21px 21px 21px 71px; text-align:left; color:#9E1215; background-image:url(../images/sistem/files.png); background-repeat:no-repeat; background-position:left center; background-size:auto 71px; background-color:#FEB0B0; margin:0; position:relative; border-bottom:solid 1px #eee;}
.posting .header h5{font-size:25px; color:#9E1215; margin:0; font-weight:bold;}

.posting .header h6,.posting .header h6 a{color:#fff; margin:0; padding:0;}
.posting .header h6 a:hover{ text-decoration:none;}
.posting .header .info{position:absolute; top:11px; right:11px;}
.posting .content{}
.posting article b{display:block;}
.posting article b span{float:right; font-weight:normal; color:#FEB0B0;}
.posting article{display:block; color:#777; text-align:left; padding:11px 11px 11px 41px; position:relative; border-bottom:solid 1px #fafafa;}
.posting article a{color:#999; text-decoration:none;}
.posting article a.more{top:13px; left:5px; transition:all ease-in .21s; display:block; width:31px; height:31px; border-radius:100%; background:url(../images/sistem/kirim.png) no-repeat center center #FEB0B0; background-size:auto 41%; position:absolute; }
.posting article:hover{background-color:rgba(255,255,255,.71);}
.posting article:hover a.more{ width:59px; height:59px; top:0px; left:-21px;  background-size:auto 41%;}
.posting article div{ line-height:21px; overflow:hidden;}
.posting .postimg{ float:left; width:111px; display:inline-block; margin-right:9px; height:auto; padding:3px;}
.posting article .share{position:absolute; right:11px; bottom:11px;}
.posting article .share a{ opacity:0; transition:opacity ease-in .21s;}
.posting article:hover .share a{ opacity:.21;}
.posting article .share a:hover{ opacity:1;}
.posting #resultbtn{margin:21px;}

.form-control.postimg{height:auto;}

.kiri{text-align:left;}
.tengah{text-align:center;}
.kanan{text-align:right;}



.sekolah{ padding:0; position:relative; background-position:center center; background-size:cover; background-repeat:no-repeat; min-height:313px;}
.sekolah:after{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-color:rgba(224,0,3,.71); z-index:0;}
.sekolah > img{width:111px; border-radius:3px; position:absolute; top:21px; right:21px; z-index:3;}
.sekolah > h1{padding:21px; border-bottom:solid 1px rgba(0,0,0,.71); background-color:rgba(0,0,0,.41); margin:0 0 21px 0; z-index:1; position:relative;}
.sekolah .content{padding:11px; position:relative; z-index:1;}
.sekolah .foot{padding:11px; position:absolute; bottom:0; left:0; right:0; background-color:rgba(0,0,0,.33); text-align:right; z-index:2;}
.sekolah .slider{position:relative; z-index:3;}
.sekolah .carousel{ z-index:5; border-radius:3px; padding:3px; box-shadow:0 0 9px 3px rgba(0,0,0,.21);}
.sekolah .carousel-inner{min-height:191px; background-color:rgba(255,255,255,.41);}


#myInfo{background-image:url(../images/bg.png); background-repeat:repeat; background-position:center center; border-radius:5px;} 
#myInfo a{color:#fff; text-decoration:none;}
#myInfo .item{text-align:center;}
#myInfo .item h4{background-image:url(../images/sistem/info.png); background-repeat:no-repeat; background-position:left 11px top; text-align:left; padding:11px 21px 11px 41px; }
#myInfo .item h4 strong{text-align:center; background-color:#fff; color:#8BB12B; display:inline-block; padding:4px 9px; border-radius:0 11px 11px 0; font-size:11px; vertical-align:top;}
#myInfo .item h4 strong a{color:#8BB12B;}
#myInfo .carousel-indicators{bottom:11px; right:11px; left:-11px; text-align:right; margin:0; width:100%;}



#myGaleri{padding:9px; border-radius:5px; box-shadow:0 0 3px 0 rgba(0,0,0,.11); margin-bottom:21px;}
#myGaleri .carousel-caption{width:100%; margin:0; left:0; bottom:0; padding:41px 11px;
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 41%, rgba(0,0,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(41%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 41%,rgba(0,0,0,1) 100%);
background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 41%,rgba(0,0,0,1) 100%);
background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 41%,rgba(0,0,0,1) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 41%,rgba(0,0,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}
#myGaleri .item{max-height:313px; overflow:hidden;}

.sambutan{border-radius:5px; padding:11px; font-family:tahoma; font-size:11px; box-shadow:0 1px 3px rgba(0,0,0,.21); margin:0 0 21px 0; position:relative; display:block; text-align:left; overflow:hidden; min-height:313px; background:url(../images/bg.png)  center center #DE0000; text-align:center; min-height:313px; color:#fff;}
.sambutan:before{position:absolute; top:0; left:0; right:0; bottom:0; background:url(../images/sistem/twhhp.png) no-repeat center center; opacity:0.11; z-index:0; content:'';}
/* box sambutan*/
.sambutan .ahlan{ position:relative; z-index:1;}
.sambutan .ahlan > b{font-size:13px; position:absolute; top:41px; color:#fff; display:block; text-align:right; opacity:0;}
.sambutan .ahlan > i{font-size:15px; position:absolute; top:71px; display:block; color:#f9f9f9f; opacity:0; font-style:normal; font-weight:bold;}
.sambutan .ahlan > b+i+b{top:99px;}
.sambutan .ahlan > a{font-size:17px; position:absolute; top:171px; color:#f7f7f7; display:block; font-weight:bold; opacity:0; font-family:georgia;}
.sambutan .ahlan > b+a+b{top:191px; font-size:19px; font-family:times; color:#fc0;}
.sambutan .ahlan > a+b+a{top:222px; font-size:19px;}
.sambutan .ahlan > strong{font-size:21px; color:#fff; position:absolute; top:252px; left:0; right:0; text-align:center; opacity:0; font-weight:bolder; text-shadow:0 0 3px #fff;  font-family:georgia; padding:0; margin:0;}
.sambutan .ahlan > span{font-size:12px; color:#f5f5f5; position:absolute; top:41px; left:0; right:0; text-align:center; opacity:0;}
.sambutan .ahlan > span img{width:99px;}
.sambutan .ahlan > span b{font-size:15px; color:#fc0; letter-spacing:3px; word-spacing:3px;}
.sambutan .ahlan > span b+b{font-size:13px; letter-spacing:normal; word-spacing:normal;}
.sambutan .ahlan > a{
-webkit-animation-duration:11s; -webkit-animation-name:sambutanA; -webkit-animation-timing-function:ease; -webkit-animation-delay:0.3s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:normal; -webkit-animation-play-state:running; }
@-webkit-keyframes sambutanA /* Safari and Chrome */{
0%{ left:11%; opacity:0.0;} 41%{left:21%; opacity:1;} 49%{left:100%; opacity:0.0;} 100%{left:100%; opacity:0.0;} 
}
.sambutan .ahlan > b{
-webkit-animation-duration:11s; -webkit-animation-name:sambutanB; -webkit-animation-timing-function:ease; -webkit-animation-delay:0.3s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:normal; -webkit-animation-play-state:running; }
@-webkit-keyframes sambutanB /* Safari and Chrome */{
0%{ right:11%; opacity:0.0;} 41%{right:33%; opacity:0.91;} 49%{right:100%; opacity:0.0;} 100%{right:100%; opacity:0.0;} 
}
.sambutan .ahlan > i{
-webkit-animation-duration:11s; -webkit-animation-name:sambutanI; -webkit-animation-timing-function:ease; -webkit-animation-delay:0.3s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:normal; -webkit-animation-play-state:running; }
@-webkit-keyframes sambutanI /* Safari and Chrome */{
0%{ left:11%; opacity:0.0;} 41%{left:33%; opacity:0.71;} 49%{left:100%; opacity:0.0;} 100%{left:100%; opacity:0.0;} 
}
.sambutan .ahlan > strong{
-webkit-animation-duration:11s; -webkit-animation-name:sambutanS; -webkit-animation-timing-function:ease; -webkit-animation-delay:0.3s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:normal; -webkit-animation-play-state:running; }
@-webkit-keyframes sambutanS /* Safari and Chrome */{
0%{ opacity:0.0;} 41%{opacity:0.0;} 47%{opacity:1;} 51%{opacity:1; color:#fff;} 61%{color:#fc0;} 71%{color:#030;} 81%{color:#fc0;} 91%{opacity:1; color:#fff;} 100%{opacity:0.0;} 
}
.sambutan .ahlan > span{
-webkit-animation-duration:11s; -webkit-animation-name:sambutanSs; -webkit-animation-timing-function:ease; -webkit-animation-delay:0.3s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:normal; -webkit-animation-play-state:running; }
@-webkit-keyframes sambutanSs /* Safari and Chrome */{
0%{ opacity:0.0;} 41%{opacity:0.0;} 47%{opacity:1;} 91%{opacity:1;} 100%{opacity:0.0;} 
}