/* Gemini by Aris S. Indonesia 2011.11.11 */

*{font-size:1rem;line-height:1.4;margin:0px;padding:0px;box-sizing:border-box;font-family:Arial, sans-serif}
html{font-size:12px}
h4,h5,h6{font-size:1.1rem}
h3{font-size:1.2rem;line-height:1.3}
h2{font-size:1.3rem;line-height:1.2}
h1{font-size:1.4rem;line-height:1.2}

form{display:inline}
img{max-width:100%;height:auto}
::placeholder{opacity:0.5;font-weight:bolder;font-style:italic}
table{border-collapse:collapse;margin:5px;box-shadow:0 0 7px 0 gray,0 0 7px 0 gray inset}
table th{padding:5px;border:1px solid gray;text-align:center}
table td{padding:5px;border:1px solid gray;vertical-align:top;text-align:left}
table tr:hover{cursor:pointer;box-shadow:0 0 7px 0 gray inset}
b,u,s,i,span{font-size:inherit}

a{cursor:pointer;margin:2px;display:inline-block;text-decoration:none;font-weight:bolder}
a:hover,a:focus{text-decoration:overline;}
.btn,.btn:visited,.btn:link,.btn:active,input[type=submit],input[type=reset],button{box-shadow:0 0 4px 0 gray,0 0 4px 0 gray inset;border-radius:5px;border:0px;border-left:3px solid black;min-width: 59px;text-align:center;     cursor:pointer;padding:3px;margin:2px;display:inline-block;text-decoration:none;font-weight:bolder}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=file],input[type=color],select,textarea{border:1px solid gray;border-radius:4px;padding:2px;margin:2px;width:100%}
input[type=text]:focus,input[type=number]:focus,input[type=date]:focus,input[type=time]:focus,input[type=password]:focus,input[type=color]:focus,select:focus,input[type=text]:hover,input[type=number]:hover,input[type=date]:hover,input[type=time]:hover,input[type=password]:hover,input[type=color]:hover,select:hover,textarea:hover,textarea:focus{box-shadow:0 0 7px 0 gray;border:1px solid gray}
textarea{height:35px;transition:height 0.7s ease-in-out}
textarea:hover,textarea:focus{height:120px}

input[type=checkbox],input[type=radio]{margin-right:5px;cursor:pointer;transform:translateY(2px)}

@keyframes bgScrollX{0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}
.ani{animation:zoom-hc 0.8s}
@keyframes zoom-hc{0%{transform:scaleX(0.2)}100%{transform:scaleX(1)}}

.c{text-align:center;vertical-align:middle;align-items:center;align-content:center}
.l{text-align:left}
.r{text-align:right}
.fr{float:right}
.j,.lst,.tile,#gli{text-align:left;text-align:justify}
.error,.ok{box-shadow:0 0 7px 0 gray;text-align:center;border-radius:4px;margin:5px;padding:5px}
.error{background-color:#f6f6a2;color:red}

.box{display:block;border-top:3px solid black;min-width:210px;   box-shadow:0 0 7px 0 gray,0 0 7px 0 gray inset;text-align:center;border-radius:10px;margin:5px;padding:5px}
.box h3{text-align:center}
.box2{text-align:left;vertical-align:top}
#gl,#gl0,#gl1,#gl2{scroll-margin:40px;word-wrap:break-word;margin:5px}
#gli{position:fixed;overflow:auto;left:0;top:0;width:100%;height:100%;z-index:-1}

.lst{display:inline-block;padding:10px;margin:5px;text-decoration:none;box-shadow:0 0 7px 0 gray,0 0 7px 0 gray inset;border-radius:10px;border-top:3px solid black;width:100%;overflow:hidden;font-weight:normal}
.lst img{width:128px;height:128px;float:left;border:0px;margin-right:10px}
.lst h3{height:28px;overflow:hidden;line-height:1;margin-bottom:3px;text-align:left;font-style:italic}
.lst:hover,.lst:focus,.btn:focus,.btn:hover,.gac a:hover,.gac a:focus{box-shadow:0 0 7px 0 white,0 0 7px 0 white inset;text-shadow:none;text-decoration:none}

.tile{display:block;margin:5px}
.tile img,#gl img{display:block;margin-left:auto;margin-right:auto;padding:5px;border:0px}
.icoB{width:320px;height:320px;border:0px;margin:5px}

.gac{width:fit-content;height:fit-content;position:absolute;text-align:left;padding:5px;box-shadow:0 0 7px 0 gray,0 0 7px 0 gray inset;z-index:10;display:none}
.gac a{border-bottom:1px solid gray;padding-top:5px;display:block;text-shadow:none}
.gac a:last-child{border-bottom:0px solid gray}

.scrollx{overflow-x:scroll}
#a_kategori a{min-width:165px;height:1.9rem;overflow:hidden;text-align:left !important}
#cari{width:60px;transition:width 0.7s ease-in-out}
#cari:focus,#cari:hover{width:155px}
.cmd{width:97%}
.foot{margin: 15px 5px 5px 5px;padding: 15px 5px;text-align:center;box-shadow:0 0 7px 0 gray}
#gnav{padding:4px;position:fixed;width:100%;overflow-x:auto;white-space:nowrap;box-shadow:0 0 7px 0 gray}

/*pc*/
@media (min-width:850px){
textarea{width:220px;transition:width 0.7s,height 0.7s ease-in-out}
textarea:focus{width:400px;height:280px}
input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=file],input[type=color],select{width:220px}
.br1{border-right:1px inset gray}
.bl1{border-left:1px inset gray}
.box{display:inline-block;vertical-align:top}
.box2{display:inline-block;padding:4px}
.scrollx{overflow-x:visible}
.scrolly{overflow-y:scroll;height:256px}
.lst{width:320px;height:236px}
.tile{display:inline-block;width:99%}
.tile img{float:left;margin-right:10px;padding:0px}
.cmd{max-width:380px}
}

@media (max-width:524px){#a_kategori a{width:48%}}

/*tema*/
body,a,::placeholder{color:black}
table th,table tr:hover,.box,.ok,#gnav,.foot,.gac,.lst,.btn,.btn:visited,.btn:link,.btn:active,input[type=submit],input[type=reset],button{background-color:#f3b845;color:black;background:linear-gradient(to bottom right,#f3b845,white)}
input[type=submit]:focus,input[type=reset]:focus,button:focus,.btn:focus,input[type=submit]:hover,input[type=reset]:hover,button:hover,.btn:hover{color:black;background:linear-gradient(to right,#f3b845,#b0e0e6,white);background-size:300% 100%;animation:bgScrollX 3s ease-in-out infinite}
.lst:focus,.lst:hover{color:black;background:linear-gradient(to top right,#f3b845,#b0e0e6)}
a:hover,a:focus{text-shadow:2px -1px 3px black,-1px 2px 4px black;color:#b0e0e6}
table tbody tr:nth-child(odd),  input[type=text],input[type=number],input[type=date],input[type=time],input[type=password],input[type=file],input[type=color],select,textarea,  .gac a:hover,.gac a:focus,  hr,.aktif{color:black;background-color:#b0e0e6}
table tbody tr:nth-child(even),  input[type=text]:focus,input[type=number]:focus,input[type=date]:focus,input[type=time]:focus,input[type=password]:focus,input[type=color]:focus,select:focus,input[type=text]:hover,input[type=number]:hover,input[type=date]:hover,input[type=time]:hover,input[type=password]:hover,input[type=color]:hover,select:hover,textarea:hover,textarea:focus{background-color:#fae1b0}
#gli{background:radial-gradient(at 20% 10%,#f3b845,#b0e0e6,#f3b845,#b0e0e6)}

#gnav{top:0px}
#gli{padding:35px 5px 5px 5px}