/* default styles */
*,
*:before,
*:after {
   box-sizing: border-box;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
}

html,
body,
div {
   position: relative;
   display: block;
}

html,
body {
   padding: 0;
   margin: 0;
}

html,
body {
   width: 100%;
   height: 100%;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 12px;
   line-height: 22px;
   color: #FFFFFF;
   background: #222222;
   word-break: break-word;
}

body:not([data-active="1"]) {
   background-image: url('../img/loader.gif');
   background-repeat: no-repeat;
   background-position: center center;
}

body > * {
   opacity: 0;
   transition: opacity 0.6s ease-in;
   -webkit-transition: opacity 0.6s ease-in;
   -moz-transition: opacity 0.6s ease-in;
}

body[data-active="1"] > * {
   opacity: 1;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar {
   background: #222222;
   width: 14px;
   height: 16px;
}

::-webkit-scrollbar-corner {
   background: #222222;
}

::-webkit-scrollbar-thumb {
   background: rgba(0, 0, 0, 0.8);
}



/* reusable classes */
.bg-1 {
   background: #24C22E;
}

.bg-2 {
   background: #63C322;
}

.bg-3 {
   background: #24ADC2;
}

.bg-4 {
   background: #733626;
}

.bg-5 {
   background: #7824C2;
}

.bg-6 {
   background: #989898;
}

.bg-7 {
   background: #C32424;
}

.bg-8 {
   background: #C224BD;
}

.bg-9 {
   background: #A1DDE6;
}

.bg-10 {
   background: #D6D01D;
}

div[class^="exit-"] {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

div[class^="exit-"]:before {
   content: '';
   position: absolute;
}

.exit-up:before,
.exit-down:before {
   width: 33.3333333333%;
   height: 100%;
   left: 33.3333333333%;
}

.exit-left:before,
.exit-right:before {
   width: 100%;
   height: 33.3333333333%;
   top: 33.3333333333%;
}

.exit-up:before {
   top: 2px;
   border-top: 2px solid #222222;
}

.exit-down:before {
   bottom: 2px;
   border-bottom: 2px solid #222222;
}

.exit-left:before {
   left: 2px;
   border-left: 2px solid #222222;
}

.exit-right:before {
   right: 2px;
   border-right: 2px solid #222222;
}



/* map styles */
#map {
   width: 100%;
   height: 100%;
   overflow: auto;
}

#map > #map-areas {
   height: 100%;
}

#map > #map-areas > div {
   width: 100px;
   float: left;
   cursor: pointer;
   border: 1px solid #222222;
}

#map > #map-areas > div[data-active="1"] {
   color: #222222;
   font-weight: bold;
   background-color: #E4B008;
}

#map > #map-areas > div:before {
   content: attr(data-coords);
   display: block;
   padding: 22px 4px;
   text-align: center;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
}

#map > #map-areas > div:not([data-town=""]):hover:before {
   content: attr(data-town);
}



/* map credit styles */
#map > #credits {
   position: fixed;
   top: 0px;
   left: 10px;
   padding: 10px 14px;
   color: #999999;
   background: rgba(0, 0, 0, 0.8);
   border-radius: 0 0 4px 4px;
   -webkit-border-radius: 0 0 4px 4px;
   -moz-border-radius: 0 0 4px 4px;
   z-index: 2;
}

#map > #credits > a {
   color: #FFFFFF;
   text-transform: capitalize;
   text-decoration: none;
}

#map > #credits > a:hover {
   text-decoration: underline;
}