.dots-game {
   background-color: #001227;
   width: 320px;
   position: relative;
  -webkit-touch-callout: none; 
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: moz-none;
  -ms-user-select: none; 
}

.dots-game .header {
  width: 320px;
}

.dots-game .heads {
   background-color: rgb(131, 70, 169);
   background-color: #001227;
   border-bottom: 1px solid rgb(118,172,255);

   /* background-color: #eee; */
   display: inline-block;
   width: 160px;
   height: 30px;
   padding-top: 13px;
   text-align: center;
   /* color: rgba(255,255,255, 0.5);;*/
   color: rgb(118,172,255);
   font-family: helvetica;
}

.time-val, .score-val {
 color: white;
}

.dots-game .board-area {
   background-color: #001D3F; 
   background-color: #001227;
   padding-left: 13px;
   padding-top: 13px;
}

.dots-game .board {
  user-select: none;
  position: relative;
  height: 320px;
}

.dots-game .chain-line, 
.dots-game .dot-highlights {
   position: relative;
}

.dots-game .chain-line .line {
   position: absolute;
   -webkit-transform: translate3d(0,0,0);
   -moz-transform: translate3d(0,0,0);
   transform: translate3d(0,0,0);
}

.dots-game .dot {
   position: absolute;
   width: 22px;
   height: 22px;
  /* border-radius: 10px; */
   -ms-transition: all 0.2s;
   -moz-transition: all 0.2s;
   /* -webkit-transition: all 0.2s; 
   -webkit-transform: translate3d(0,0,0);
   -moz-transition: all 0.2s; 
   -moz-transform: translate3d(0,0,0);
   transition: all 0.2s; 
   transform: translate3d(0,0,0); */
}

.dots-game .dot-highlight {
   position: absolute;
   width: 22px;
   height: 22px;
   opacity: 0.0;
   border-radius: 10px;
   -webkit-animation-name: expander;
   -webkit-animation-duration: 0.7s;
   -webkit-animation-iteration-count: 1;
   -webkit-transform: translate3d(0,0,0) scale3d(2.8,2.8,0);
   -moz-animation-name: expander-moz;
   -moz-animation-duration: 0.7s;
   -moz-animation-iteration-count: 1;
   -moz-transform: scale(2.8,2.8);
}

.blue {
   background: transparent url(../images/geo_sprite.png) no-repeat -48px -1px;
}

.green {
   background: transparent url(../images/geo_sprite.png) no-repeat -24px -1px;
}

.purple {
   background: transparent url(../images/geo_sprite.png) no-repeat -96px -1px;
}

.yellow {
   background: transparent url(../images/geo_sprite.png) no-repeat 0px -1px;
}

.red {
   background: transparent url(../images/geo_sprite.png) no-repeat -72px -1px;
}

.dots-game .chain-line .line.blue {
   border-color: rgb(118,172,255);
   background-image: none;
   background-color: rgba(118,172,255,0.37);
}

.dots-game .chain-line .line.green {
   border-color: rgb(128,230,121);
   background-image: none;
   background-color: rgba(128,230,121, 0.37);
}

.dots-game .chain-line .line.purple {
   border-color: rgb(164, 155, 169);
   background-image: none;
   background-color: rgba(164, 155, 169, 0.37);
}

.dots-game .chain-line .line.yellow {
   border-color: rgb(226, 214, 0);
   background-image: none;
   background-color: rgba(226, 214, 0, 0.37);
}

.dots-game .chain-line .line.red {
   border-color: rgb(227, 73, 50);
   background-image: none;
   background-color: rgba(227, 73, 50, 0.37);
}

.dots-game .chain-line .line.vert {
   border-left-style: solid;
   border-right-style: solid;
   border-left-width: 1px;
   border-right-width: 1px;
}

.dots-game .chain-line .line.horiz {
   border-top-style: solid;
   border-bottom-style: solid;
   border-top-width: 1px;
   border-bottom-width: 1px;
}


.dots-game .board-area.blue-trans {
   background-color: rgba(118,172,255,0.5);
}

.dots-game .board-area.green-trans {
   background-color: rgba(128,230,121,0.5);
}

.dots-game .board-area.purple-trans {
   background-color: rgba(131, 70, 169,0.5);
}

.dots-game .board-area.yellow-trans {
   background-color: rgba(226, 214, 0,0.5);
}

.dots-game .board-area.red-trans {
   background-color: rgba(227, 73, 50, 0.5);
}

.dots-game .marq {
   text-align:center;
   color: #fff;
   font-family: helvetica;
}


.dots-game .marq span {
   display: inline-block;
   border-radius: 10px;
   padding: 6px;
   margin: 1px;
   width: 15px;
   height: 15px;
   background-image: none;
}

.dots-game .marq  .blue {
   border-width: 1px;
   border-style: solid;
   border-color: rgb(118,172,255);
   color: rgb(118,172,255);
   background-color: rgba(118,172,255, 0.37);
}

.dots-game .marq .green {
   border-width: 1px;
   border-style: solid;

   border-color: rgb(128,230,121);
   color: rgb(128,230,121);
   background-color: rgba(128,230,121, 0.37);
}

.dots-game .marq .purple {
   border-width: 1px;
   border-style: solid;
   border-color: rgb(131, 70, 169);
   color: rgb(131, 70, 169);
   background-color: rgba(131, 70, 169, 0.37);
}

.dots-game .marq .yellow {
   border-width: 1px;
   border-style: solid;
   border-color: rgb(226, 214, 0);
   color: rgb(226, 214, 0);
   background-color: rgba(226, 214, 0, 0.37);
}

.dots-game .marq .red {
   border-width: 1px;
   border-style: solid;
   border-color: rgb(227, 73, 50);
   color: rgb(227, 73, 50);
   background-color: rgba(227, 73, 50, 0.37);
}

.dots-game .notice-square {
   background-color: #001227;
   padding: 20px;
   height: 250px;
   padding-top: 100px;
}

.dots-game .control-area {
   text-align: center;
   font-family: helvetica;
   margin-top: 70px;
}

.dots-game a.start-new-game {
   text-decoration: none;
   border: 1px solid rgb(128,230,121);
   background-color: rgba(128,230,121, 0.37);
   color: #fff;
   padding: 10px;
   border-radius: 10px;
}

@-webkit-keyframes expander {
  0% {
     -webkit-transform: scale3d(1.0,1.0,0);
     opacity: 0.8;
  }
  100% {
     -webkit-transform: scale3d(2.8,2.8,0);
     opacity: 0.0;
  }
}

@-moz-keyframes expander-moz {
  0% {
     -moz-transform: scale(1.0,1.0);
     opacity: 0.8;
  }
  100% {
     -moz-transform: scale(2.8,2.8);
     opacity: 0.0;
  }
}

.dots-game .levelish {
   -webkit-animation-duration: 0.3s;
   -webkit-animation-iteration-count: 1;
   -webkit-backface-visibility: hidden;
}

@media (max-width: 480px){
   body {
      margin: 0px;
   }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.blue {
   background: transparent url(../images/geo_sprite@2x.png) no-repeat -48px -1px;
   background-size: 118px;
}

.green {
   background: transparent url(../images/geo_sprite@2x.png) no-repeat -24px -1px;
   background-size: 118px;
}

.purple {
   background: transparent url(../images/geo_sprite@2x.png) no-repeat -96px -1px;
   background-size: 118px;
}

.yellow {
   background: transparent url(../images/geo_sprite@2x.png) no-repeat 0px -1px;
   background-size: 118px;
}

.red {
   background: transparent url(../images/geo_sprite@2x.png) no-repeat -72px -1px;
   background-size: 118px;
}
}