@font-face{font-family:'Jolly Lodger';src:url(../fonts/Jolly_Lodger.woff)}
@font-face{font-family:'Exo 2';src:url(../fonts/Exo_2.woff)}
body{background-color:#d9631a}
.header{height:50px;background-color:#c25613;/*position:fixed;left:0;top:0;right:0;*/border-bottom:2px solid #7a3107;list-style:none;z-index:2;background-image:linear-gradient(to bottom,#C25613 0%,#B84D0E 53%)}
.logo{margin-top:-10px;margin-left:10px}
.logo h1{color:#142837;font-size:40px;margin:5px;font-family:'Jolly Lodger',"Comic Sans MS",cursive;text-shadow:1px 1px #e36e24;cursor:pointer}
.logo h1:first-letter{font-size:60px}
.logo h1 sub{font-size:50px;color:#fc5a03;text-shadow:1px 1px 5px #000}
.logo h1 sup{font-size:35px}
/* Order By CSS*/
.order-by{height:28px;margin:10px;display:table;line-height:28px;font-family:Arial;font-size:12px;font-style:italic;/*border-left:1px solid #de550b;box-shadow:-1px 0 #822e07;*/padding-left:10px;margin-right:0px}
.order-by a{font-family:'Exo 2',"Comic Sans MS",cursive;display:table-cell;vertical-align:middle;text-decoration:none;color:#FFF;padding:0 15px;font-size:12px}
.order-by a.active{background-color:#db5d14;color:#632705;background-color:#FC5A03;text-shadow:1px 1px #ff6a1f;cursor:default;box-shadow:1px 1px 1px rgba(0, 0, 0, 0.8) inset}
.order-by a:not(.active){background-color:green;box-shadow:1px 1px 2px rgba(0, 0, 0, 0.8);border:1px solid rgba(255, 255, 255, 0.22);margin-top:-1px;transition:all 100ms linear}
.order-by a:not(.active):hover{box-shadow:0 0 2px rgba(255, 255, 255, 0.3)}
.order-by a:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}
.order-by a:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}

.menu-box{border-right:1px solid #822e07;box-shadow:1px 0 #de550b;margin:10px;display:table;height:30px;width:auto}
.menu-box a:not(.text),.menu-box span{display:table-cell;vertical-align:middle;text-decoration:none;color:#000;text-shadow:1px 1px rgba(255,255,255,0.2);padding-left:10px;padding-right:10px;font-family:'Exo 2',"Comic Sans MS",cursive;font-size:14px}
.menu-box a.active{background-color:rgba(0,0,0,0.1);text-shadow:none;border-radius:0;cursor:default;color:rgba(255,255,255,0.5)}
.menu-box a:not(.text):last-child{padding-right:15px}
.menu-box a:not(.active):hover{text-decoration:underline}
.menu-box a[data-tag]{position:absolute;top:-1000px}
.more-box{position:relative;cursor:pointer;height:30px}
.more-box b{position:relative;left:0;top:0;z-index:5}
.submenu-box{position:absolute;width:126px;left:-46px;top:-5px;z-index:4;padding-top:40px;overflow:hidden;background-color:green;visibility:hidden;border-radius:2px;border:1px solid rgba(255,255,255,0.2);box-shadow:2px 2px 15px rgba(0,0,0,0.8)}
.submenu-box a.text{background-color:rgba(255,255,255,0.1);color:#000;display:block;text-align:center;line-height:25px;text-decoration:none;text-shadow:none;padding:5px 0;margin:0 -10px;transition:all 300ms linear;font-weight:400}
.submenu-box a.text:not(.active):hover{background-color:rgba(0,0,0,0.1);text-decoration:none}
.submenu-box a.active{border-radius:0;background-color:rgba(255,255,255,0.3);cursor:default}
.submenu-box a:first-child{border-top:1px solid rgba(255,255,255,0.2);box-shadow:0 -1px rgba(0,0,0,0.2)}
.submenu-box a:first-child:hover{border-top:1px solid rgba(255,255,255,0.2);box-shadow:none}
.more-box:hover .submenu-box{visibility:visible;animation:moveFromBottom 300ms linear;-webkit-animation:moveFromBottom 300ms linear}
.search-box{list-style:none;background-color:#fc5a03;padding:5px;border-radius:3px;margin:6px 20px 7px 5px;border:1px solid #822e07;box-shadow:0 0 5px 1px #e07338;-moz-box-shadow:0 0 5px 1px #e07338;-webkit-box-shadow:0 0 5px 1px #e07338}
.search-box input{font-size:12px;border:0;padding:3px 10px;background:transparent;font-family:Arial;outline:none;-moz-outline:none}
.search-box input[type='text']{padding-left:15px;padding-right:15px;color:#1a1d1f;transition:all 300ms linear}
.search-box input[type='submit']{background-color:#cf5f19;color:#FFF;border:1px solid #c2540f}
.body{margin:0 auto}
.list{width:95px;height:116.85px;margin:15px;display:inline-block;vertical-align:top;border-radius:5px;background-color:#ff894a;background-image:linear-gradient(to bottom,#FF894A 0%,#FFECE3 53%,#FF894A 100%);padding:2px;box-shadow:1px 1px 4px #61280a;list-style:none;position:relative;cursor:pointer;overflow:hidden}
.list img{width:100%;height:100%;border-radius:3px}
.shadow-img{position:absolute;left:2px;top:2px;right:2px;bottom:2px;z-index:1;box-shadow:0 0 4px #1a1d1f inset;-moz-box-shadow:0 0 4px #1a1d1f inset;-webkit-box-shadow:0 0 4px #1a1d1f inset;border-radius:3px}
.game-name{position:absolute;left:2px;right:2px;bottom:2px;background-color:rgba(0,0,0,0.2);visibility:hidden;color:#FFF;font-family:'Exo 2',sans-serif;font-size:14px;text-align:center;text-transform:capitalize;text-decoration:none;border-bottom-left-radius:3px;-moz-border-bottom-left-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-right-radius:3px;-moz-border-bottom-right-radius:3px;-webkit-border-bottom-right-radius:3px;padding:5px;text-shadow:1px 1px rgba(0, 0, 0, 0.25)}
.list:hover .game-name{visibility:visible;animation:moveFromTop 300ms linear;-webkit-animation:moveFromTop 300ms linear}
.loader{display:table;height:40px;margin:0 auto;visibility:hidden}
.loader li{display:table-cell;vertical-align:middle;font-family:'Exo 2',"Comic Sans MS",cursive;font-size:12px;color:#FFF}
.copyright{padding:5px 10px;text-align:left;background-color:rgba(0,0,0,0.1)}
.copyright b{font-family:Arial;font-size:12px;color:#FFF;font-weight:700;display:block;line-height:20px}
.copyright b a{text-decoration:none;color:#FFF}
.copyright b a:hover{text-decoration:underline}
.copyright li{font-family:Arial;font-size:12px;list-style:square;margin-left:20px;color:rgba(0,0,0,0.8);line-height:15px;text-shadow:1px 1px rgba(255,255,255,0.05)}
@keyframes moveFromTop {
from{opacity:0;transform:translateY(-200%)}
to{opacity:1;transform:translateY(0)}
}
@-webkit-keyframes moveFromTop {
from{opacity:0;-webkit-transform:translateY(-200%)}
to{opacity:1;-webkit-transform:translateY(0)}
}
@keyframes moveFromBottom {
from{opacity:0;transform:translateY(50%)}
to{opacity:1;transform:translateY(0)}
}
@-webkit-keyframes moveFromBottom {
from{opacity:0;-webkit-transform:translateY(50%)}
to{opacity:1;-webkit-transform:translateY(0)}
}