@import url('https://fonts.googleapis.com/css?family=Special+Elite|Iceland');
body {
   background: #000;
	background-image: url(img/water2.gif);
   height: 100%;
   margin: 0;
   font-family: sans-serif;
      overflow: hidden;
      line-height: 1.14;
}
svg {
   width: 100%;
   height: 100%;
}
#c {
   position: relative;
   margin: auto;
   perspective: 50em;
      -webkit-perspective: 50em;
      user-select:none;
      -webkit-user-select: none;
}
#o,#m,#u {
   position: absolute;
}
#o {
   left: 0%; right: 84.9%;
   top: 0%; bottom: 0%;
   color: white;
   /* transform: rotateY(55deg);
      -webkit-transform: rotateY(55deg);
      transform-origin: left;
      -webkit-transform-origin: left;
   */
   border: 1px solid #333;
   background: #111;
      font-size: 110%;
}
#m {
   right: 0; left: 15%; top: 0; bottom: 0;
}
.v,.w {
	background:rgba(0,0,0,.7);
}
/* Board elements */
.o,.i,.s {
  border: 1px solid black;
  box-shadow: 2px 2px #000, inset -3px -3px 0 0 rgba(0,0,0,0.2);
  position: absolute;
}
.o {
  width: 3%;
  height: 4%;
/*  transform: rotate(10deg); 
    -webkit-transform: rotate(10deg);
*/
}
.i {
  width: 90%;
  height: 90%;
  left: -8%;
  top: -8%;
    border-radius: 50%;
  text-align: center;
    box-shadow: 1px 1px #000, inset -3px -3px 0 0 rgba(0,0,0,0.2);
}
.s {
    width: 1.5%;
    height: 5%;
    background-image: url("img/soldier1.gif");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 0;
    background-color: transparent;
    filter: drop-shadow(2px 3px 0px #000a);
    transition: all 500ms linear !important;
    transform: translateY(-50%);
}
.l {
    scale:1.5;
   border-color: #fff;
}

/* Information display styles */
.sc { 
   margin: 0.12em 0.12em;
   padding: 0.6em 1em;
   background: #222; 
   box-shadow: inset 4px 4px 20px #344;
   font-size: 90%;
   text-shadow: 0.12em 0.1em #000;
}
.un {
   padding: 0.33em 0;
}
  .ds {
      font-size: 80%; color: #aaa;
  }

  /* Player boxes */
  /* the boxes themselves - .pl is active, .pi inactive */
.pl {
   border: 2px solid rgba(0,0,0,0.5);
      margin: 0 0.33em;
      padding: 0.5em 0.25em 0.5em 0.5em;
      font-size: 80%;
}
/* additional information displayed inside the box */
.ad {
   float: right; width: 30%; text-align: right; margin: -0.2em 0.2em 0 0; font-size: 120%;white-space:nowrap;
}

/* Buttons */
#u {
   bottom: 0.8em; left: 0.8em; right: 0.8em;
      perspective: 15em;
}
a {
   display: block;
      position: relative;
   text-align: center;
   text-decoration: none;
   margin-top: 0.15em;
   color: #dde;
   border: 2px solid #333;
   background: #000;
   padding: 0.5em;
      font-size: 80%;
      transform: translate3d(0,0,0);
      z-index: 10;
}
  h1 a {
      display: inline;
      color: #aaf;
      background: none;
      border: none;
  }
a:hover {
   background: #444;
   color: #fff;
      transform: translate3d(0,0,1em);
      z-index: 20;
}
  a.off, a.off:hover {
      opacity: 0.3;
      background: #000;
      transform: translate3d(0,0,0);
      cursor: default !important;
  }

  a.rt {
      display: block;
      float: right;
      padding: 0.2em;
      margin: -0.28em 0 0 0.1em;
      border: 1px solid #000;
      border-radius: 2px;
      font-size: 100%;
      text-shadow: none;
      opacity: 0.5;
      min-width: 1.5em;
  }

  a.rt.sl {
      background: #fff;
      color: #000;
  }

  .bn {
      position: absolute;
      top: 40%;
      height: 10.8%;
      width: 96%;

      text-align: center;
      padding-top: 0.6%;
      padding-right: 10%;

      border: 2px solid black;

      color: #fff;
      z-index: 100;
      font-size: 3em;
      font-family: "Constantia", "Athelas", serif;

      box-shadow: 0 10px 10px 5px rgba(0,0,0,0.7), inset 0 20px 2px rgba(255,255,255,0.05);
      text-shadow: 2px 2px #000;

      transition: opacity 0.5s ease-in-out, transform 1.0s linear, -webkit-transform 1.0s linear;
  }
  a,.o,.i,.s,.pl,.pi,#in,polygon {
      transition: all 0.15s ease-in-out;
  }
  p {
      margin: 0.4em 1em 0.4em 1em;
  }

  #mv {
      text-align: center;
      padding: 0.5em 0 1em 0;
      font-size: 80%;
      color: #777;
      font-weight: bold;
  }
  .bl, .br {
      float: left; width: 40%;
      margin: 0 6.66%;
  }
  .bl {
      margin-right: 0;
  }
  #mc, #ft {
      font-size: 170%;
      color: #eef;
      text-shadow: 2px 2px #000;
  }

  #in {
      font-size: 70%;
      box-shadow: inset 4px 4px 20px rgba(0,0,0,0.5);
      border: 1px solid #000;
      color: #fff;
  }
  #ts {
      position: absolute;
      z-index: 50;
      left: 8%;
      top: 8%;
      right: 8%;
      bottom: 8%;
      background: rgba(0,0,0,0.9);
      color: #aaa;
      line-height: 150%;
      text-align: center;
      border: 1px solid #333;
      perspective: 40em;
      perspective-origin: 50% 0;
      transform: translate3d(0,0,3em);
      -webkit-perspective: 40em;
      -webkit-perspective-origin: 50% 0;
      -webkit-transform: translate3d(0.2em,0,4em);
      transition: all 0.5s;
      opacity: 1.0;
  }
  #ts.h {
      transform: translate3d(0.2em,0,4em) rotateX(90deg);
      -webkit-transform: translate3d(0.2em,0,4em) rotateX(90deg);
      opacity: 0.0;
  }

  /* Corner buttons */
  .cb {
      display: none; right: 1%; bottom: 1%; opacity: 0.4;
  }

  /* Tooltips */
  .tt {
      background: #000;
      border-radius: 10%;
      position: absolute;
      z-index: 10000;
      font-size: 65%;
      color: #fff;
      width: 7%;
      text-align: center;
      padding: 0.4em;
      opacity: 0.8;
      pointer-events: none;
      transition: all 3s;
  }

  .tt hr {
      margin: 1px 0;
  }

  .stt {
      width: 2%;
      font-weight: bold;
      background: #333;
      padding: 0.12em;
      border: 1px solid #000;
  }

  /* Particles! */
  .pr {
      position: absolute;
      width: 0;
      height: 0;
      transform: translate3d(0,0,0);
      -webkit-transform: translate3d(0,0,0);
      transition: all 1s;
  }

  /* Tutorial slider styles */
  #tut {
      position: absolute;
      left: 20%; right: 20%;
      top: 28%; bottom: 15%;
      overflow: hidden;
  }
  #tuc {
      width: 500%; height: 100%;
      transform: translate3d(0,0,0);
      transition: all 0.3s;
  }
  .crd {
      width: 20%; height: 100%;
      margin: 0;
      float: left;
      text-align: justify;
  }
  .pic {
      position: relative;
      width: 10%;
      height: 15%;
      margin: auto;
      color:#fff; font-size:2em; text-align: center
  }
  .rb {
      border-radius: 50%;
      width: 1.5em;
      height: 1.5em;
      font-size: 2em;
      padding: 0.16em 0 0 0;
      box-sizing: border-box;
      position: absolute;
  }
  #prv { left: 10%; top: 50%; }
  #nxt { right: 10%; top: 50%; }

  .bb {
      position: absolute;
      left: 30%; right: 30%;
      top: 90%;
  }
  #ts a:hover, a.rb:hover { transform: translate3d(0,0,0.2em); opacity: 1 !important; }
  h1 {
      font-family: "Special Elite", "Athelas", serif;
      font-size: 3.75em;
      margin: 0.7em 0 1em;
  /*    transform: scale3d(1.5,1.5,1) rotateX(60deg);
      -webkit-transform: scale3d(1.5,1.5,1) rotateX(60deg);*/
      text-shadow: 0 0.04em #777;
  }
  h1, h2 {
      text-align: center;
      color: #fff;
  }
  h2 {
      font-size: 1.5em;
      margin-bottom: 0.3em;
  }
  ul {
      padding-left: 1.5em;
      text-align: left;
  }
  li {
      margin-top: 0.15em;
  }
  b {
      color: #ffa;
  }
  .gold {
      display:inline-block;
      width:32px;
      height:32px;
      background: url(img/gold.gif) no-repeat;
      position:relative;
      margin-top:-14px;
      top:10px;
      left:7px;
  }
.castle {
	margin-top:-0.8em;
	width:48px;
	height:48px;
}
.fort {
	margin-top:-0.8em;
	width:64px;
	height:64px;
	margin-left:-0.6em;
}
.fortress {
	margin-top: -2em;
	width: 100px;
	height: 100px;
	margin-left: -1.3em;
}
#fblogo {
    height:2rem;
    width:2rem;
    float:left;
    position:relative;
    top:-.25em;
}
.fblogin {
    height:1.4em;
    background-color: #1877F2;
    color:#fff;
    font-weight:600;
    padding-top:1rem;
}
a.fblogin:hover {
    background-color:#1877f2;
    transform: translate3d(0,0,1em);
}