/*body {*/
/*  font-size: .9em;*/
/*  font-family: sans-serif;*/
/*  margin: 0;*/
/*  padding: 0;*/
/*}*/

@keyframes spin {
  0% {
    transform: translateZ(-100px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  16% {
    transform: translateZ(-100px) rotateX(180deg) rotateY(180deg) rotateZ(0deg);
  }
  33% {
    transform: translateZ(-100px) rotateX(360deg) rotateY(90deg) rotateZ(180deg);
  }
  50% {
    transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
  66% {
    transform: translateZ(-100px) rotateX(180deg) rotateY(360deg) rotateZ(270deg);
  }
  83% {
    transform: translateZ(-100px) rotateX(270deg) rotateY(180deg) rotateZ(180deg);
  }
  100% {
    transform: translateZ(-100px) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  }
}
#wrapper {
  position: relative;
  perspective: 1200px;
}

.platform {
  margin-top: 20px;
  float: left;
  /*width: 200px;*/
width: 180px;
height: 150px;
}

.dice {
  position: absolute;
  transform-style: preserve-3d;
  animation: spin 3s linear;
}
.dice span {
  position: absolute;
  margin: 100px 0 0 100px;
  display: block;
  font-size: 2.5em;
  padding: 10px;
}
.dice .side {
  backface-visibility: hidden;
  background: transparent url(/static/docapp/images/dice-sprite.png) 0 0 no-repeat;
}
.dice .number {
  font-size: 4em;
}
.dice .number.center {
  margin-top: 20px;
  text-align: center;
}

#d4 {
  width: 140px;
  height: 122px;
}
#d4 .side {
  position: absolute;
  width: 140px;
  height: 122px;
  background-position: 0 0;
}
#d4 .one {
  transform: rotateY(0deg) rotateX(20deg) translateZ(22px);
}
#d4 .two {
  transform: rotateY(120deg) rotateX(20deg) translateZ(22px);
}
#d4 .three {
  transform: rotateY(240deg) rotateX(20deg) translateZ(22px);
}
#d4 .four {
  transform: rotateX(-90deg) rotateZ(60deg) translateZ(50px) translateY(-20px);
}
#d4 .sw {
  position: absolute;
  right: 25px;
  bottom: 0;
  transform: rotateZ(120deg);
}
#d4 .se {
  position: absolute;
  left: 25px;
  bottom: 0;
  transform: rotateZ(240deg);
}
#d4 .number {
  font-size: 2.5em;
}
#d4 .number.center {
  margin-top: 20px;
}

#d6 {
  width: 100px;
  height: 100px;
}
#d6 .side {
  position: absolute;
  width: 100px;
  height: 100px;
  background-position: 0 -132px;
}
#d6 .one {
  transform: rotateY(0deg) translateZ(50px);
}
#d6 .two {
  transform: rotateY(90deg) translateZ(50px);
}
#d6 .three {
  transform: rotateY(180deg) translateZ(50px);
}
#d6 .four {
  transform: rotateY(270deg) translateZ(50px);
}
#d6 .five {
  transform: rotateX(90deg) translateZ(50px);
}
#d6 .six {
  transform: rotateX(-90deg) translateZ(50px);
}
#d6 .number {
  font-size: 5em;
}
#d6 .number.center {
  /*margin-top: 17px;*/
  margin-top: -10px;
}

#d8 {
  width: 117px;
  height: 102px;
}
#d8 .side {
  position: absolute;
  width: 117px;
  height: 102px;
  background-position: 0 -243px;
}
#d8 .cap-top {
  transform-style: preserve-3d;
  transform: translateY(-21px);
}
#d8 .cap-bottom {
  transform-style: preserve-3d;
  transform: translateY(21px);
}
#d8 .one {
  transform: rotateY(0deg) rotateX(35deg) translateZ(36px);
}
#d8 .two {
  transform: rotateY(90deg) rotateX(35deg) translateZ(36px);
}
#d8 .three {
  transform: rotateY(180deg) rotateX(35deg) translateZ(36px);
}
#d8 .four {
  transform: rotateY(270deg) rotateX(35deg) translateZ(36px);
}
#d8 .five {
  transform: rotateY(0deg) rotateX(-145deg) translateZ(36px);
}
#d8 .six {
  transform: rotateY(90deg) rotateX(-145deg) translateZ(36px);
}
#d8 .seven {
  transform: rotateY(180deg) rotateX(-145deg) translateZ(36px);
}
#d8 .eight {
  transform: rotateY(270deg) rotateX(-145deg) translateZ(36px);
}
#d8 .number.center {
  margin-top: 10px;
}

#d10 {
  width: 91px;
  height: 114px;
}
#d10 .side {
  position: absolute;
  width: 91px;
  height: 114px;
  background-position: 0 -356px;
}
#d10 .cap-top {
  transform-style: preserve-3d;
  transform: translateY(7.5px);
}
#d10 .cap-bottom {
  transform-style: preserve-3d;
  transform: translateY(-7.5px);
}
#d10 .one {
  transform: rotateY(0deg) rotateX(44deg) translateZ(56px);
}
#d10 .two {
  transform: rotateY(72deg) rotateX(44deg) translateZ(56px);
}
#d10 .three {
  transform: rotateY(144deg) rotateX(44deg) translateZ(56px);
}
#d10 .four {
  transform: rotateY(216deg) rotateX(44deg) translateZ(56px);
}
#d10 .five {
  transform: rotateY(288deg) rotateX(44deg) translateZ(56px);
}
#d10 .six {
  transform: rotateY(0deg) rotateX(-136deg) translateZ(56px);
}
#d10 .seven {
  transform: rotateY(72deg) rotateX(-136deg) translateZ(56px);
}
#d10 .eight {
  transform: rotateY(144deg) rotateX(-136deg) translateZ(56px);
}
#d10 .nine {
  transform: rotateY(216deg) rotateX(-136deg) translateZ(56px);
}
#d10 .ten {
  transform: rotateY(288deg) rotateX(-136deg) translateZ(56px);
}
#d10 .number {
  font-size: 3.5em;
  letter-spacing: -4px;
}
#d10 .number.center {
  margin-top: 20px;
  margin-left: -6px;
  text-align: center;
}

#d12 {
  width: 100px;
  height: 96px;
}
#d12 .side {
  position: absolute;
  width: 100px;
  height: 96px;
  background-position: 0 -479px;
}
#d12 .cap-top {
  transform-style: preserve-3d;
  transform: translateY(-7px);
}
#d12 .cap-bottom {
  transform-style: preserve-3d;
  transform: translateY(7px);
}
#d12 .one {
  transform: rotateX(-90deg) rotateZ(36deg) translateZ(75.5px) translateY(-6px);
}
#d12 .two {
  transform: rotateY(0deg) rotateX(-27deg) translateZ(72.5px);
}
#d12 .three {
  transform: rotateY(72deg) rotateX(-27deg) translateZ(72.5px);
}
#d12 .four {
  transform: rotateY(144deg) rotateX(-27deg) translateZ(72.5px);
}
#d12 .five {
  transform: rotateY(216deg) rotateX(-27deg) translateZ(72.5px);
}
#d12 .six {
  transform: rotateY(288deg) rotateX(-27deg) translateZ(72.5px);
}
#d12 .seven {
  transform: rotateY(0deg) rotateX(-207deg) translateZ(72.5px);
}
#d12 .eight {
  transform: rotateY(72deg) rotateX(-207deg) translateZ(72.5px);
}
#d12 .nine {
  transform: rotateY(144deg) rotateX(-207deg) translateZ(72.5px);
}
#d12 .ten {
  transform: rotateY(216deg) rotateX(-207deg) translateZ(72.5px);
}
#d12 .eleven {
  transform: rotateY(288deg) rotateX(-207deg) translateZ(72.5px);
}
#d12 .twelve {
  transform: rotateX(90deg) rotateZ(36deg) translateZ(75.5px) translateY(-6px);
}
#d12 .number {
  font-size: 4em;
  letter-spacing: -4px;
}
#d12 .number.center {
  margin-top: 5px;
  margin-left: -6px;
  text-align: center;
}

#d20 {
  width: 80px;
  height: 70px;
  /*transform: translateZ(-100px) rotateX(230deg) rotateY(180deg) rotateZ(360deg);*/
}
#d20 .side {
  position: absolute;
  width: 80px;
  height: 70px;
  background-position: 0 -585px;
}
#d20 .cap-top {
  transform-style: preserve-3d;
  transform: translateY(-18px);
}
#d20 .cap-bottom {
  transform-style: preserve-3d;
  transform: translateY(18px) rotateY(36deg);
}
#d20 .one {
  transform: rotateY(0deg) rotateX(53deg) translateZ(47px);
}
#d20 .two {
  transform: rotateY(72deg) rotateX(53deg) translateZ(47px);
}
#d20 .three {
  transform: rotateY(144deg) rotateX(53deg) translateZ(47px);
}
#d20 .four {
  transform: rotateY(216deg) rotateX(53deg) translateZ(47px);
}
#d20 .five {
  transform: rotateY(288deg) rotateX(53deg) translateZ(47px);
}
#d20 .six {
  transform: rotateY(0deg) rotateX(11deg) rotateZ(180deg) translateZ(62px) translateY(-12px);
}
#d20 .seven {
  transform: rotateY(72deg) rotateX(11deg) rotateZ(180deg) translateZ(62px) translateY(-12px);
}
#d20 .eight {
  transform: rotateY(144deg) rotateX(11deg) rotateZ(180deg) translateZ(62px) translateY(-12px);
}
#d20 .nine {
  transform: rotateY(216deg) rotateX(11deg) rotateZ(180deg) translateZ(62px) translateY(-12px);
}
#d20 .ten {
  transform: rotateY(288deg) rotateX(11deg) rotateZ(180deg) translateZ(62px) translateY(-12px);
}
#d20 .eleven {
  transform: rotateY(36deg) rotateX(-11deg) translateZ(62px) translateY(-12px);
}
#d20 .twelve {
  transform: rotateY(108deg) rotateX(-11deg) translateZ(62px) translateY(-12px);
}
#d20 .thirteen {
  transform: rotateY(180deg) rotateX(-11deg) translateZ(62px) translateY(-12px);
}
#d20 .fourteen {
  transform: rotateY(252deg) rotateX(-11deg) translateZ(62px) translateY(-12px);
}
#d20 .fifteen {
  transform: rotateY(324deg) rotateX(-11deg) translateZ(62px) translateY(-12px);
}
#d20 .sixteen {
  transform: rotateY(0deg) rotateX(-53deg) rotateZ(180deg) translateZ(47px);
}
#d20 .seventeen {
  transform: rotateY(72deg) rotateX(-53deg) rotateZ(180deg) translateZ(47px);
}
#d20 .eighteen {
  transform: rotateY(144deg) rotateX(-53deg) rotateZ(180deg) translateZ(47px);
}
#d20 .nineteen {
  transform: rotateY(216deg) rotateX(-53deg) rotateZ(180deg) translateZ(47px);
}
#d20 .twenty {
  transform: rotateY(288deg) rotateX(-53deg) rotateZ(180deg) translateZ(47px);
}
#d20 .number {
  font-size: 2.3em;
}
#d20 .number.center {
  margin-top: 20px;
  text-align: center;
}

#background {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #071a1e;
  background: -moz-linear-gradient(top, #071a1e 0%, #274249 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #071a1e), color-stop(100%, #274249));
  background: -webkit-linear-gradient(top, #071a1e 0%, #274249 100%);
  background: linear-gradient(to bottom, #071a1e 0%, #274249 100%);
}

#wrapper {
  /* green marble */
  /* pink marble */
  /* leather */
  /* water */
  /* blue circles */
  /* golden */
}
#wrapper.green-marble #d4, #wrapper.green-marble #d6, #wrapper.green-marble #d8, #wrapper.green-marble #d10, #wrapper.green-marble #d12, #wrapper.green-marble #d20 {
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}
#wrapper.green-marble #d4 .side {
  background-position: -140px 0;
}
#wrapper.green-marble #d6 .side {
  background-position: -140px -132px;
}
#wrapper.green-marble #d8 .side {
  background-position: -140px -243px;
}
#wrapper.green-marble #d10 .side {
  background-position: -140px -356px;
}
#wrapper.green-marble #d12 .side {
  background-position: -140px -479px;
}
#wrapper.green-marble #d20 .side {
  background-position: -140px -585px;
}
#wrapper.pink-marble #d4, #wrapper.pink-marble #d6, #wrapper.pink-marble #d8, #wrapper.pink-marble #d10, #wrapper.pink-marble #d12, #wrapper.pink-marble #d20 {
  color: #000;
  text-shadow: -2px 2px 2px #fff;
}
#wrapper.pink-marble #d4 .side {
  background-position: -280px 0;
}
#wrapper.pink-marble #d6 .side {
  background-position: -280px -132px;
}
#wrapper.pink-marble #d8 .side {
  background-position: -280px -243px;
}
#wrapper.pink-marble #d10 .side {
  background-position: -280px -356px;
}
#wrapper.pink-marble #d12 .side {
  background-position: -280px -479px;
}
#wrapper.pink-marble #d20 .side {
  background-position: -280px -585px;
}
#wrapper.leather #d4, #wrapper.leather #d6, #wrapper.leather #d8, #wrapper.leather #d10, #wrapper.leather #d12, #wrapper.leather #d20 {
  color: #41281d;
  text-shadow: 0 0 6px #ec9a6e;
}
#wrapper.leather #d4 .side {
  background-position: -420px 0;
}
#wrapper.leather #d6 .side {
  background-position: -420px -132px;
}
#wrapper.leather #d8 .side {
  background-position: -420px -243px;
}
#wrapper.leather #d10 .side {
  background-position: -420px -356px;
}
#wrapper.leather #d12 .side {
  background-position: -420px -479px;
}
#wrapper.leather #d20 .side {
  background-position: -420px -585px;
}
#wrapper.water #d4, #wrapper.water #d6, #wrapper.water #d8, #wrapper.water #d10, #wrapper.water #d12, #wrapper.water #d20 {
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}
#wrapper.water #d4 .side, #wrapper.water #d6 .side, #wrapper.water #d8 .side, #wrapper.water #d10 .side, #wrapper.water #d12 .side, #wrapper.water #d20 .side {
  /* sides get jittery when backface is visible */
  backface-visibility: visible;
  opacity: .8;
}
#wrapper.water #d4 .side {
  background-position: -560px 0;
}
#wrapper.water #d6 .side {
  background-position: -560px -132px;
}
#wrapper.water #d8 .side {
  background-position: -560px -243px;
}
#wrapper.water #d10 .side {
  background-position: -560px -356px;
}
#wrapper.water #d12 .side {
  background-position: -560px -479px;
}
#wrapper.water #d20 .side {
  background-position: -560px -585px;
}
#wrapper.blue-circles #d4, #wrapper.blue-circles #d6, #wrapper.blue-circles #d8, #wrapper.blue-circles #d10, #wrapper.blue-circles #d12, #wrapper.blue-circles #d20 {
  color: #c4e7ff;
  text-shadow: 0 0 8px #000;
}
#wrapper.blue-circles #d4 .side {
  background-position: -700px 0;
}
#wrapper.blue-circles #d6 .side {
  background-position: -700px -132px;
}
#wrapper.blue-circles #d8 .side {
  background-position: -700px -243px;
}
#wrapper.blue-circles #d10 .side {
  background-position: -700px -356px;
}
#wrapper.blue-circles #d12 .side {
  background-position: -700px -479px;
}
#wrapper.blue-circles #d20 .side {
  background-position: -700px -585px;
}
#wrapper.golden #d4, #wrapper.golden #d6, #wrapper.golden #d8, #wrapper.golden #d10, #wrapper.golden #d12, #wrapper.golden #d20 {
  color: #5e3c00;
  text-shadow: 2px 2px 8px #fff;
}
#wrapper.golden #d4 .side {
  background-position: -840px 0;
}
#wrapper.golden #d6 .side {
  background-position: -840px -132px;
}
#wrapper.golden #d8 .side {
  background-position: -840px -243px;
}
#wrapper.golden #d10 .side {
  background-position: -840px -356px;
}
#wrapper.golden #d12 .side {
  background-position: -840px -479px;
}
#wrapper.golden #d20 .side {
  background-position: -840px -585px;
}

/* Nav link styles borrowed from https://tympanus.net/codrops/2013/08/06/creative-link-effects/ */
#theme-options {
  clear: both;
  position: relative;
  left: 30px;
  top: 140px;
}
#theme-options * {
  box-sizing: border-box;
}
#theme-options a {
  position: relative;
  display: inline-block;
  margin: 10px 5px;
  outline: none;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 400;
  text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
  font-size: 1em;
  perspective: 1000px;
  line-height: 35px;
}
#theme-options a span {
  position: relative;
  display: inline-block;
  padding: 0 14px;
  background: #2195de;
  transition: transform 0.3s;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
}
#theme-options a span::before {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0965a0;
  content: attr(data-hover);
  transition: background 0.3s;
  transform: rotateX(-90deg);
  transform-origin: 50% 0;
}
#theme-options a:hover span::before, #theme-options a:focus span::before {
  background: #9b6dff;
}
#theme-options a:hover span, #theme-options a:focus span {
  transform: rotateX(90deg) translateY(-22px);
}