@font-face {
    font-family: 'Uthman';
    src: url('fonts/UthmanicHafs1 Ver09.eot');
    src: url('fonts/UthmanicHafs1 Ver09.eot?#iefix') format('embedded-opentype'),
    url('fonts/UthmanicHafs1 Ver09.woff') format('woff'),
    url('fonts/UthmanicHafs1 Ver09.ttf') format('truetype'),
    url('fonts/UthmanicHafs1 Ver09.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
    -webkit-user-select: none;
}
.ui-panel-wrapper, .colorful {
    background: url(artwork/path3012.png) no-repeat scroll center top,
    url(artwork/path9619.png) no-repeat scroll center top,
    url(artwork/path7395.png) no-repeat scroll center top;
    background-size: cover,cover,cover;
    -webkit-background-size: cover, cover, cover;
    -moz-background-size: cover, cover, cover;
    -o-background-size: cover, cover, cover;
    /*height:100%;*/
}
.logo {
    background: url(artwork/rect20237.png) no-repeat scroll center top;
    -webkit-background: url(artwork/rect20237.png) no-repeat scroll center top;
    background-size: contain;
    -webkit-background-size: contain;
    width: 100%;
    max-height: 40vh;
    -webkit-max-height: 40vh;
    -moz-max-height: 40vh;
}
#front {
    background: url(artwork/path3012.png) repeat-x scroll center top,
    url(artwork/path9619.png) repeat-x scroll center bottom,
    
    url(artwork/path7395.png) repeat-x scroll center top,
    url(artwork/rect4635.png) repeat-y scroll center bottom,
    url(artwork/path5424.png) no-repeat scroll center top;
    /*url(artwork/rect5482.png) no-repeat scroll center top,*/
    -webkit-background: url(artwork/path3012.png) no-repeat scroll center top,
    url(artwork/path9619.png) no-repeat scroll center bottom,
    
    url(artwork/rect7395.png) no-repeat scroll center top,
    url(artwork/rect4635.png) repeat-y scroll center bottom,
    url(artwork/path5424.png) no-repeat scroll center top;
    background-size: contain,contain,contain,contain,100% 100%;;
    -webkit-background-size: contain,contain,contain,contain,100% 100%;
    -moz-background-size: contain,contain,contain,contain,100% 100%;;
    -o-background-size: contain,contain,contain,contain,100% 100%;;
    /*background-size: cover;*/
    background-color:rgba(37,77,0,1);
    width:100%;
    height:100%;
    height:100vh;
    position:absolute;
    top:0;
    left:0;
    z-index:10;
}
.opaq {
    background-color: transparent;
}
.opaqhalf {
    background-color: rgba(242, 224, 198, 0.5);
}
#utama {
    background: url(artwork/tambang3.png) repeat-y scroll center top;
    background-size: contain;
    background-color: transparent;
}

#list1 {
    min-height:14em;
    list-style:none;
    /*margin:0 0;*/
    padding:0.5em;
    border-radius: 0.5em;
}

.list {
    margin: 0 5px 10px 5px;
    padding: 15px 10px;
    cursor: move;
    direction:rtl;
    text-align: center;
    
    /*background: linear-gradient(#E9F5E4, #B0DB89 50%, #E4F4E4);
    background: -webkit-linear-gradient(#E9F5E4, #B0DB89 50%, #E4F4E4);
    background: -moz-linear-gradient(#E9F5E4, #B0DB89 50%, #E4F4E4);*/
    font-family: 'Uthman';
    font-size: 1.4em;
    /*background-color: #e9afaf;
    box-shadow: 0px 10px 5px solid #de8787;*/
    border: 1px solid;
    border-width: 0 1px 5px 1px;
    border-radius: 0.5em;
    /*border-color: #de8787;*/
    margin-right:auto;
    margin-left:auto;
}

.placeholder {
    /*border: 1px solid black;*/
    border-radius:5px;
    background-color: rgba(150, 182, 218, 0.45);

    min-height: 3.5em;
    margin: 0 0 1em 0;
}
/*.list:hover {
    margin-top: 2px;
    border-width: 0 1px 3px 1px;
}*/
.list1 {
    background-color: #e9afaf;
    border-color: #de8787;
    -webkit-border-color: #de8787;
}
.list2 {
    background-color: #ffe680;
    border-color: #d4aa00;
}
.list3 {
    background-color: #ddafe9;
    border-color: #892ca0;
}
.list4 {
    background-color: #e6e6e6;
    border-color: #cccccc;
}
.list5 {
    background-color: #ffccaa;
    border-color: #ff9955;
}

/* Custom indentations are needed because the length of custom labels differs from
the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch .ui-btn.ui-flipswitch-on {
    text-indent: -2.7em;
}
.custom-size-flipswitch.ui-flipswitch .ui-flipswitch-off {
    text-indent: 0.5em;
}
/* Custom widths are needed because the length of custom labels differs from
   the length of the standard labels */
.custom-size-flipswitch.ui-flipswitch {
    width: 5.875em;
}
.custom-size-flipswitch.ui-flipswitch.ui-flipswitch-active {
    padding-left: 4em;
    width: 1.575em;
}

#cek, .script, .void, .luring, .leveless {
    display: none;
}
.void {
    position: static;
    background-color: linen;
    color: #000;
}
.mainboard, .center {
    text-align: center;
}
.left {
    text-align: left;
}
.luring {
    background-color: darkred;
    padding: 1em 1em;
}
.sempadan {
    padding: 0.5em 10%;
}
#cek {
    position: fixed;
    bottom: 0.8em;
    /*left:40%;*/
}

@media (min-width: 28em) {
    /*Repeated from rule .ui-flipswitch above*/
    .ui-field-contain > label + .custom-size-flipswitch.ui-flipswitch {
        width: 1.575em;
    }
}
@media (min-width: 48em) and (orientation: landscape) {
    .mainboard, .opaq, .opaqhalf, #utama {
        width: 50%;
        margin-right: auto;
        margin-left: auto;
    }
}