html,
 body {
     background-color: #000;
     margin: 0;
     padding: 0;
     position: relative;
     font-family: "Arial";
     width: 100%;
     touch-action: none;
     overflow: hidden;
 }

 #game {
     position: absolute;
     left: 0;
     top: 0;
     z-index: 0;
 }

 #xloader {
     background: url('media/graphics/misc/gloader.svg') center no-repeat;
 }

 #canvas {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     -ms-interpolation-mode: nearest-neighbor;
     -webkit-transform: scale3d(1, 1, 1);
     z-index: 1;
 }

 #orientate {
     position: absolute;
     float: left;
     width: 100%;
     height: 100%;
     top: 0;
     left: 0;
     z-index: 10002;
     display: none;
 }

 #orientate img {
     position: absolute;
     float: left;
     width: 100%;
     height: 100%;
 }

 .preloadFont {
     position: absolute;
     top: -100;
     left: -100;
     display: none;
     z-index: -1;
 }

 @font-face {
     font-family: "LeaderboardText";
     src: url('media/fonts/saira-semibold.woff') format('woff');
 }

 div.overlay {
     position: absolute;
     display: none;
     top: 0;
     left: 0;
     background-color: rgba(0, 0, 0, 0.85);
     width: 100%;
     height: 100%;
     z-index: 10;
     font-family: "LeaderboardText";
 }

 div.popupBox {
     position: absolute;
     top: 50%;
     left: 50%;
     max-height: 98vh;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     border-radius: 2px;
     overflow: hidden;
     width: 90%;
     min-width: 310px;
     max-width: 550px;
     font-family: Arial, Helvetica, sans-serif;
 }

 div.popupTitle {
     background-color: #d6483b;
     color: yellow;
     font-size: 1.5em;
     font-weight: bold;
     padding: 8px;
     text-align: center;
 }

 div.popupMsg {
     background-color: white;
     width: 100%;
     color: red;
     overflow: auto;
     max-height: 98vh;
 }

 div#adOverlay * {
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 div#adOverlay>#adBox {
     display: block;
     width: 200px;
     height: 165px;
     border-radius: 15px;
     background-color: #95bb17;
     position: absolute;
     top: 50%;
     left: 50%;
     -webkit-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     border: 3px solid #79a875;
     padding: 0.5em;
 }

 div#adOverlay>#adBox>img {
     display: block;
     margin: auto;
     margin-top: 1.5em;
 }

 div#adOverlay>#adBox>div.text-ShowingAd {
     display: block;
     margin: auto;
     text-align: center;
     color: #fff;
 }

 span.close {
     color: rgb(255, 255, 255);
     font-size: 36px;
     padding: 0 10px;
     position: absolute;
     right: 0;
     z-index: 15;
 }

 span.close:hover,
 span.close:focus {
     color: rgb(87, 84, 0);
     text-decoration: none;
     cursor: pointer;
 }

 div.lb-content {
     background-color: transparent;
     padding: 0 10px 10px 10px;
     text-align: center;
 }

 div.adjustSpace {
     height: 3em;
 }

 div.text-Leaderboard,
 div.text-Upgrade {
     border-radius: 2px;
     background: -webkit-linear-gradient(155deg, rgba(223, 255, 253, 0.85) 5%, rgb(3, 40, 28, 0.5) 95%);
     background: -o-linear-gradient(155deg, rgba(223, 255, 253, 0.85) 5%, rgb(3, 40, 28, 0.5) 95%);
     background: linear-gradient(155deg, rgba(223, 255, 253, 0.85) 5%, rgb(3, 40, 28, 0.5) 95%);
 }

 div.row {
     height: 50px;
     border-radius: 8px;
     background-color: rgba(58, 126, 104, 0.6);
     color: white;
     margin: 6px;
 }

 div.row.lb-header {
     font-size: 1.1em;
     color: yellow;
     background: -webkit-linear-gradient(155deg, rgba(223, 255, 253, 0.8) 5%, rgb(3, 40, 28, 0.5) 95%);
     background: -o-linear-gradient(155deg, rgba(223, 255, 253, 0.8) 5%, rgb(3, 40, 28, 0.5) 95%);
     background: linear-gradient(155deg, rgba(223, 255, 253, 0.8) 5%, rgb(3, 40, 28, 0.5) 95%);
 }

 div.row:last-child {}

 div#leaderboard>div.popupBox {
     font-size: 0.85em;
 }

 div.row.lb-currentUser {
     color: yellow;
 }

 div.column {
     display: inline-block;
     margin: 0;
 }

 div#lb-data {
     color: white;
 }

 div.lb-rank {
     width: 8%;
     line-height: 44px;
     text-align: center;
 }

 div#lb-data>div.row:nth-child(-n+3)>div.lb-rank {
     background-repeat: no-repeat;
     background-size: 100%;
     background-position: center;
     color: red;
     font-weight: bold;
 }

 div#lb-data>div.row:first-child>div.lb-rank {
     background-image: url('media/graphics/leaderboard/golden.png');
 }

 div#lb-data>div.row:nth-child(2)>div.lb-rank {
     background-image: url('media/graphics/leaderboard/silver.png');
 }

 div#lb-data>div.row:nth-child(3)>div.lb-rank {
     background-image: url('media/graphics/leaderboard/bronze.png');
 }

 div.lb-image {
     width: 12%;
     position: relative;
 }

 div.lb-image>span {
     display: block;
     width: 48px;
     height: 36px;
     position: absolute;
     top: -24px;
     left: 12%;
     background-image: url('media/graphics/leaderboard/flags.png');
     background-repeat: no-repeat;
     background-position: left -768px top -216px;
 }

 div.lb-image>img {
     display: block;
     width: 42px;
     height: 42px;
     position: absolute;
     top: -27px;
     left: 12%;
     border-radius: 10px;
 }

 div.lb-image>img {
     display: block;
     width: 42px;
     height: 42px;
     position: absolute;
     top: -28px;
     left: 12%;
     border-radius: 10px;
 }

 div.lb-username {
     width: 53%;
     text-align: left;
     line-height: 44px;
     padding: 5px;
 }

 div.lb-score {
     width: 25%;
     text-align: right;
     padding: 5px;
     line-height: 44px;
 }

 div.lb-footer {
     margin: 10px 0 3px 0;
 }

 div.lb-footer#lb-footer-2,
 div.lb-footer#lb-footer-1>div:first-child {
     text-underline-offset: 2px;
     color: white;
 }

 div.lb-footer#lb-footer-2 input {
     padding: 4px 8px;
 }

 div.lb-footer#lb-footer-2 input[type="button"] {
     font-weight: bold;
 }

 div.lb-footer#lb-footer-2 input#username {
     width: 180px;
     -webkit-user-select: text;
     -moz-user-select: text;
     -ms-user-select: text;
     user-select: text;
     background-color: white;
 }

 #snackbar {
     visibility: hidden;
     min-width: 250px;
     margin-left: -125px;
     background-color: rgba(0, 0, 0, 0.5);
     color: #fff;
     text-align: center;
     padding: 10px 14px;
     position: fixed;
     z-index: 32;
     left: 50%;
     bottom: 30px;
     font-size: 16px;
     border-radius: 6px;
 }

 #snackbar.show {
     visibility: visible;
     -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
     animation: fadein 0.5s, fadeout 0.5s 2.5s;
 }

 div#leaderboard *,
 div#leaderboard *::after,
 div#leaderboard *::before {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
 }

 @-webkit-keyframes fadein {
     from {
         bottom: 0;
         opacity: 0;
     }
     to {
         bottom: 30px;
         opacity: 1;
     }
 }

 @keyframes fadein {
     from {
         bottom: 0;
         opacity: 0;
     }
     to {
         bottom: 30px;
         opacity: 1;
     }
 }

 @-webkit-keyframes fadeout {
     from {
         bottom: 30px;
         opacity: 1;
     }
     to {
         bottom: 0;
         opacity: 0;
     }
 }

 @keyframes fadeout {
     from {
         bottom: 30px;
         opacity: 1;
     }
     to {
         bottom: 0;
         opacity: 0;
     }
 }

 @media only screen and (min-width:576px) {
     div#leaderboard>div.popupBox {
         font-size: 1em;
     }
 }

 @media only screen and (max-width:480px) {
     div.lb-username {
         width: 49%;
         padding-left: 20px;
     }
     div.row {
         padding-left: 2px;
     }
     div.lb-rank {
         width: 10%;
     }
 }

 ::-webkit-scrollbar {
     width: 4px;
 }

 ::-webkit-scrollbar-track {
     box-shadow: inset 0 0 4px grey;
     border-radius: 2px;
 }

 ::-webkit-scrollbar-thumb {
     background: white;
     border-radius: 2px;
 }

 ::-webkit-scrollbar-thumb:hover {
     background: rgb(255, 255, 134);
 }

 #copyRight {
     z-index: 60;
     color: white;
     background-color: rgb(2, 116, 2, 0.7);
     position: absolute;
     left: 5px;
     bottom: 5px;
     display: block;
     text-decoration: none;
     font-size: 11px;
     font-family: Arial, Helvetica, sans-serif;
     padding: 2px 5px 3px 5px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
 }

 @media only screen and (min-width:820px) {
     #copyRight {
         font-size: 12px;
         padding: 2px 6px 3px 6px;
     }
 }

 .play {
     position: absolute;
     float: left;
     width: 100%;
     height: 100%;
     z-index: 1000;
     background-color: #fff;
     left: 0;
     top: 0;
     display: none;
 }

 .play img {
     position: absolute;
     float: left;
     width: 100%;
     height: 100%;
     z-index: 1000;
     left: 0;
     top: 0;
 }

 #nohtml5 {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #000;
     z-index: 1002;
     visibility: hidden;
 }

 #nohtml5 img {
     position: absolute;
     width: 100%;
     height: 100%;
 }

 #nohtml5-bubble {
     position: absolute;
     bottom: 20px;
     left: 50px;
     width: 380px;
     height: 100px;
     z-index: 1002;
     color: #000;
     background: rgba(255, 255, 255, 0.75);
     -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
     border-radius: 10px;
 }

 #nohtml5-text {
     padding: 10px;
 }

 .horizontal-seperator {
     height: 10px;
     width: 100%;
 }

 .ig_debug {
     position: fixed;
     left: 0;
     bottom: 0;
     width: 100%;
     background-color: #000;
     border-top: 2px solid #f57401;
     font-size: 12px;
     color: #fff;
     z-index: 1000;
     -webkit-user-select: none;
     display: none;
 }

 .ig_debug_panel_menu {
     height: 28px;
     background: #222;
     background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #333));
     background: -moz-linear-gradient(center bottom, #000000 0%, #333 100%);
     background: -o-linear-gradient(#333, #000000);
 }

 .ig_debug_panel_menu div {
     float: left;
     height: 22px;
     padding: 6px 8px 0 8px;
     border-right: 1px solid #333;
 }

 .ig_debug_panel_menu .ig_debug_head {
     font-weight: bold;
     color: #888;
 }

 .ig_debug_menu_item:hover {
     cursor: pointer;
     background-color: #fff;
     color: #000;
 }

 .ig_debug_menu_item.active,
 .ig_debug_menu_item.active:hover {
     background-color: #000;
     color: #fff;
 }

 .ig_debug_stats {
     position: absolute;
     right: 0;
     top: 0;
     float: right;
     color: #888;
     border-left: 1px solid #333;
     text-align: right;
 }

 .ig_debug_stats span {
     width: 3em;
     display: inline-block;
     color: #fff !important;
     margin-right: 0.2em;
     margin-left: 0.3em;
     font-family: bitstream vera sans mono, courier new;
     white-space: nowrap;
 }

 .ig_debug_panel {
     height: 152px;
     overflow: auto;
     position: relative;
 }

 .ig_debug_panel canvas {
     border-bottom: 1px solid #444;
 }

 .ig_debug_panel .ig_debug_panel {
     padding: 8px;
     height: auto;
     float: left;
     background-color: #000;
     border-right: 2px solid #222;
 }

 .ig_debug_option {
     padding: 2px 0 2px 8px;
     cursor: pointer;
 }

 .ig_debug_option:first-child {
     margin-top: 8px;
 }

 .ig_debug_option:hover {
     background-color: #111;
 }

 .ig_debug_graph_mark {
     position: absolute;
     color: #888;
     left: 4px;
     font-size: 10px;
     margin-top: -12px;
 }

 .ig_debug_legend {
     color: #ccc;
 }

 .ig_debug_label_mark {
     display: inline-block;
     width: 10px;
     height: 10px;
     margin-right: 4px;
     -webkit-transition: 0.1s linear;
     -moz-transition: 0.1s linear;
 }

 .ig_debug_legend_color {
     display: inline-block;
     width: 6px;
     height: 10px;
     margin-right: 4px;
     margin-left: 16px;
 }

 .ig_debug_legend_number {
     width: 3em;
     display: inline-block;
     text-align: right;
     font-family: bitstream vera sans mono, courier new;
     color: #fff;
     margin-right: 0.2em;
 }

 .ig_debug_map_container {
     position: relative;
     overflow: hidden;
     border: 1px solid #888;
 }

 .ig_debug_map_container canvas {
     position: absolute;
 }

 .ig_debug_map_screen {
     position: absolute;
     border: 1px solid #f0f;
 }