.bgCover,.overlayBox{
    position:fixed;
    z-index:2
}
#navMenu,.menu-button{
    box-shadow:inset 0 1px 3px rgba(0,0,0,.1);
    height:50px;
    text-align:center
}
#joooha-banner,#middleheader,#navMenu,#slogan,.menu-button,.overlayBox,.thumbnail-frame,footer{
    text-align:center
}
#body,#navMenu ul li a,#slogan,.overlayBox,body{
    font-family:'Droid Arabic Kufi',serif
}
#hierarchy a,#navMenu ul li a,#other-nachids li>a,.closeLink,.thumbnail-frame a,footer a{
    text-decoration:none
}
#@import url(http://fonts.googleapis.com/earlyaccess/droidarabickufi.css);
@font-face{
    font-family:'Droid Arabic Kufi';
    font-style:normal;
    font-weight:400;
    src:url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
    src:url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype')
}
@font-face{
    font-family:'Droid Arabic Kufi';
    font-style:normal;
    font-weight:700;
    src:url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot);
    src:url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format('truetype')
}
body{
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-color:#F0F0F0
}
ul{
    padding:0;
    margin:0
}
.bgCover{
    background:#000;
    left:0;
    top:0;
    display:none;
    overflow:hidden
}
#slogan,.closeLink,.overlayBox,header{
    display:block
}
.overlayBox{
    width:500px;
    background:#fff;
    top:-1000px;
    padding-bottom:5px
}
.topclor,.topclor_three,.topclor_two{
    width:33.33%;
    float:left
}
.topclor{
    border-top:solid 5px #2FA8C0
}
.topclor_two{
    border-top:solid 5px #D84533
}
.topclor_three{
    border-top:solid 5px #EAA91B
}
.closeLink{
    color:#40494F;
    border:1px solid #AEAEAE;
    background:#CDCDCE;
    font-size:31px;
    font-weight:700;
    line-height:0;
    padding:11px 3px;
    position:absolute;
    z-index:1;
    margin-left:460px;
    margin-top:15px
}
.closeLink:before{
    content:"×"
}
#joooha-banner{
    clear:both;
    margin:10px 5px
}
header{
    position:relative;
    clear:both;
    width:100%;
    margin-bottom:10px
}
#middleheader{
    height:154px;
    width:100%;
    margin:0;
    background:url(/assets/img/patterns-01.png) right top repeat-x #1FB1F3
}
#jouhalogo{
    float:right;
    height:100%;
    margin:.5% 1% 0 0
}
#logo3{
    height:120px;
    transition:all .5s ease;
    margin-top:10px
}
#logo3:hover{
    transform:scale(1.1)
}
#slogan{
    margin:-14px 17px 0 0;
    color:#fff;
    font-size:16px
}
#navMenu{
    width:100%;
    margin:auto;
    left:0;
    right:0;
    background-color:#0288d1
}
#navMenu>ul{
    display:inline-block;
    margin:0;
    padding:0
}
.fixedNavMenu{
    position:fixed!important;
    top:0!important;
    opacity:.95;
    z-index:4
}
.menu-button{
    float:left;
    width:100px;
    overflow:hidden;
    position:relative;
    z-index:1;
    line-height:26px
}
#navMenu ul li a{
    color:#fff;
    font-size:14px;
    line-height:50px;
    text-shadow:1px 1px 9px #b5aaaa,1px -1px 5px #726f6f;
    display:block;
    height:50px
}
.green{
    background:#6AA63B
}
.purple{
    background:#936BE6
}
.blue{
    background:#0292C0
}
.yellow{
    background:#FBC700
}
.red{
    background:#D52100
}
.concrete{
    background:#95a5a6
}
.submenu{
    margin-top:-23px
}
.contact{
    float:left
}
.letter>img{
    margin:10px 7px
}
.fb>img{
    margin:13px 3px
}
.contact>img{
    max-height:30px
}
.contact>a:hover{
    background-color:#1FB1F3
}
#my_popup{
    background-color:#fff;
    width:410px;
    height:500px;
    display:none;
    border-radius:3px
}
iframe{
    width:100%;
    height:100%;
    padding:0;
    border:0
}
.oasis_icon{
    padding:0 10px
}
.oasis_icon>img{
    max-height:none;
    margin:2px;
    height:45px
}
.oasis_icon>span{
    display:block;
    float:left
}
#body{
    overflow:auto;
    background:#fbf5f5;
    border-bottom-left-radius:15px;
    border-bottom-right-radius:15px;
    width:987px;
    box-shadow:5px 5px 19px gray,-5px 5px 19px gray;
    margin:25px auto auto;
    opacity:.96;
    padding-top:25px
}
#hierarchy{
    display:block;
    width:94%;
    border:1px solid silver;
    box-shadow:1px 1px 10px silver;
    background:#1FB1F3;
    margin:auto;
    font-size:14px;
    text-align:right;
    padding-right:15px;
    color:#fff;
    line-height:34px
}
#nachidframe,#nachidheader,.thumbnail-frame{
    box-shadow:0 0 5px grey
}
#hierarchy a{
    color:#3E05B5;
    overflow:hidden
}
#hierarchy img{
    float:left;
    margin:5px
}
.thumbnail-frame{
    float:right;
    height:130px;
    width:145px;
    border-radius:5px;
    border:1px solid grey;
    margin:7px 8px;
    background-color:#fff;
    transition:all .45s ease
}
.thumbnail-frame:hover{
    transform:scale(1.1);
    overflow:visible;
    box-shadow:4px 4px 20px gray;
    z-index:6
}
.thumbnail{
    width:100%;
    padding:0;
    height:87%;
    display:block
}
.thumbnailimage{
    width:100%;
    height:100%;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
    # -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}
.thumbnail-frame a{
    color:#000;
    display:block;
    font-size:70%;
    white-space:nowrap;
    overflow:hidden;
    line-height:16px;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}
#anachid-body,#game,footer{
    overflow:auto
}
footer{
    margin:10px auto 0;
    color:#fff;
    background-color:#1fb1f3;
    opacity:.9;
    width:100%;
    font-size:.8em;
    clear:both
}
footer>h1{
    text-align:right;
    font-size:14px;
    margin:15px
}
footer>h2{
    text-align:right;
    font-size:12px;
    margin:5px 15px
}
footer>p{
    text-align:justify;
    font-size:.88em;
    direction:rtl;
    margin:5px 15px
}
footer .game{
    color:#fff
}
footer a{
    color:#000;
    margin:25px
}
@media (max-width:500px){
    header{
        margin-bottom:50px
    }
    .menu-button{
        float:none;
        width:100%!important;
        height:30px
    }
    #navMenu{
        height:270px
    }
    #navMenu ul li a{
        line-height:30px;
        height:30px
    }
    .submenu>img{
        margin-top:0;
        width:22px
    }
    .contact{
        height:30px;
        float:none;
        width:100%
    }
    .contact>img{
        height:25px;
        margin:3px
    }
    .oasis_icon>img{
        height:26px
    }
    #suggested-games{
        float:none!important
    }
    .oasis_icon>span,.thumbnail-frame{
        display:inline-block;
        float:none
    }
    #suggestionslist .thumbnail-frame{
        display:inline-block
    }
    .games,.gameslist .games{
        text-align:center
    }
    #description,.comments{
        width:90%!important
    }
    .oasis_icon{
        background-color:#2d524d
    }
    .oasis_icon>span{
        vertical-align:top
    }
}
@media (max-width:900px){
    #hierarchy>img{
        display:none
    }
    #navMenu>ul{
        width:100%
    }
    .menu-button{
        width:10%
    }
    #navMenu ul li a{
        font-size:10px
    }
}
#nachidheader,#other-nachids>ul>li,li.contact{
    display:block
}
body{
    margin:0;
    font-size:1em
}
#anachid-body{
    position:relative;
    width:992px;
    background-color:#8AE2F3;
    margin:34px auto auto
}
#anachids-header{
    color:#fff;
    text-shadow:0 3px 0 rgba(0,0,0,.1);
    float:left;
    margin-top:25px;
    width:90%;
    text-align:right
}
#anachids-header>h1{
    margin:0;
    font-size:1.7em
}
#anachids-list{
    float:left;
    width:60%;
    height:auto;
    margin-top:20px;
    margin-left:2%;
    margin-bottom:20px;
    padding:5px 10px;
    border-radius:12px;
    background-color:#BDEFF8
}
#anachids-list table{
    color:#404040;
    font-size:.8em;
    width:100%
}
#anachids-list table td{
    text-align:center;
    border-bottom:1px solid #404040
}
#anachids-list table td:first-child,.song-title{
    text-align:left
}
.song-number{
    font-size:1.2em;
    background-color:#fff;
    padding:0 10px;
    border-radius:3px;
    margin:0 10px
}
.song-number:hover{
    background-color:#404040;
    color:#fff
}
.song-title{
    padding-left:2%;
    width:80%
}
#anachids-about,#other-nachids{
    color:#404040;
    text-align:right;
    background-color:#fff
}
#nachidheader,#nachid-desc{
    text-align:center;
    width:100%
}
#anachids-about{
    float:right;
    width:30%;
    padding:5px 15px 15px;
    margin-top:20px;
    margin-right:2%;
    margin-bottom:20px;
    border-radius:12px
}
#anachids-about>h2{
    margin:0;
    font-size:1.1em
}
#anachids-about>p{
    font-size:.8em;
    padding:0;
    margin:0
}
#nachidheader{
    background-color:#4EABE9;
    padding:3px 0 2px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    color:#fff;
    margin:0 auto;
    position:relative
}
#nachidheader h1{
    font-size:90%;
    line-height:150%;
    margin:0
}
#nachidheader .fb-share-button{
    float:left;
    position:absolute;
    left:12px;
    top:-7px
}
#game{
    float:left;
    margin-top:5px;
    margin-left:2%;
    width:75%;
    margin-bottom:15px
}
#nachidframe{
    border:1px solid #86b0ce;
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden
}
#nachidframe embed,#nachidframe iframe,#nachidframe object{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
#other-nachids{
    float:right;
    width:17%;
    padding:5px 15px 15px;
    margin-top:10px;
    margin-right:1%;
    border-radius:12px
}
#other-nachids ul img{
    float:right;
    height:15px;
    padding:10px 5px 0
}
#other-nachids li>a{
    color:#51516B;
    font-size:.7em;
    line-height:5px
}
#other-nachids li>a:hover{
    text-decoration:underline
}
#other-nachids>h2{
    margin:0;
    font-size:1.1em
}
#other-nachids>p{
    font-size:.8em;
    padding:0;
    margin:0
}
#nachid-desc{
    clear:both;
    margin:20px auto;
    font-size:12px
}
@media handheld,screen and (max-width:768px){
    #anachid-body,footer{
        width:100%
    }
    #anachids-list{
        width:92%
    }
    #anachids-about{
        width:88%;
        margin-right:4%
    }
    #anachids-header{
        float:none;
        margin-top:25px;
        font-size:.6em
    }
    #game{
        margin-left:1%;
        width:98%
    }
    #other-nachids{
        width:90%;
        margin-bottom:20px
    }
}