/**
 * default.css - styles for the hit game Tic-Tac-Whoa!
 *
 * Palette:    #ffd000  Gold/Yellow
 *             #01c5ff  Blue
 *             #f72f49  Red
 *             #000000  Black
 *
 **/
@import url('https://fonts.googleapis.com/css?family=Cabin');
@import url('https://fonts.googleapis.com/css?family=Unkempt');
@import url('https://fonts.googleapis.com/css?family=Fontdiner+Swanky');
body { background-color:#000; font-size:24px; font-family: 'Cabin', sans-serif; padding:0px; margin:0px; text-align:center; }
table { border-collapse:collapse; margin:0px auto; }
.yellowText { color:#ffdd00; }
.blueText { color:#01c5ff; }
.redText { color:#f72f49; }
#gameboard { 
   font-weight:bold; 
   background-color:#fff; 
   margin:0; 
  /*  width:33em; */
}
table,td,tr,th,img { margin:0; padding:0; }
.game_col0, .game_col1 {
   border-right: 1em solid black;
}
.game_row0, .game_row1 {
   border-bottom: 1em solid black;
}
.game_cell {
   height:7em;
   width:7em;
}
#gameboard > tbody > tr > td {
   padding: .5em;
}
.row0, .row1 {
   border-bottom: .25em solid #333;
}
.col0, .col1 {
   border-right: .25em solid #333;
}
td.cell {
   width: 2em;
   height: 2em;
}
td.cell:hover {
   /* background-color:rgba(0,230,0,.2); */
}
.disabled td.cell:hover {
   background-color:rgba(0,0,0,0);
}
#gameboard > tr > td {
   padding:.5em;
}

td {
   text-align:center;
   position:relative;
}
td.cell.filled:hover {
   background-color:rgba(255,0,0,.2);
}
.X {
   background-color:rgba(230,230,0,0);
}
.O {
   background-color:rgba(0,100,255,0);
}
.Xtxt {
   color:#eeee00;
   -webkit-text-stroke: .5px rgba(0,0,0,.25);
   text-align:left;
   padding-top:1em;
}
.Otxt {
   color:#0088ee;
   -webkit-text-stroke: .5px rgba(255,255,255,.75);
   text-align:left;
   padding-top:2em;
}
#scoreboard th { font-size: 2em; font-family:"Fontdiner Swanky"; padding-left:.5em;}


th { background-color:#000; color:#0f0; }
#currentPlayer { height:2em; }   
.disabled { background-color: rgba(0,0,0,.35);  }
.XWIN { background-color:#333; }
.OWIN { background-color:#333; }
.XWINcell { background-color: rgba(230,230,0,.2); }
.OWINcell { background-color: rgba(0,100,255,.2); }
#gameCount { text-align:left; padding-left: 1em; }
.win { background-color: #0f0; }
.winimage { position:absolute;top:7px;left:8px;height:90%; transition: all 500ms cubic-bezier(0.18, 1.275, 0.425, 1.7); }
.winimage:hover { opacity:.3; }
#statusboard { position:relative; height:100%; display:inline-table; font-size:14px;  }
#controls { vertical-align:bottom;height:100%;position:relative;font-size:14px;font-weight:normal; text-align:left;line-height:1.5;text-transform:uppercase;}
button { font-size: 14px; padding: .5em .25em; cursor:pointer; }
.DRAW { background-color: #333; }
.WINcell { background-color:red; }
.winline { 
   width: 25px;
   height: 25px;
   border: 2em solid #fff;
   position: absolute;
   top: 250px;
   margin-left: 10px;
   border: 0.5em solid rgb(255, 255, 255);
   box-shadow: rgba(0, 0, 0, 0.498039) 5px 5px 5px;
   transition: height .5s cubic-bezier(0.16, 0.07, 0, 1), width .5s cubic-bezier(0.16, 0.07, 0, 1);
}
.Xgame { background-color:rgba(230,230,0,1); }
.Ogame { background-color:rgba(0,100,255,1); }
#gameboard td > table {
   transition: all 2s; 
}
.currentGame { 
   transform: scale(2);
   background-color: #fff;
   position: relative;
   z-index: 100000;
   transition: all 1s;
}
#wrapper { 
   display:inline-block;
   position:relative;
   margin:0px auto;
   border: .5em solid #aaa;
}
#winnerImage { 
   z-index: 1000;
   position:absolute;
   transition: all 1s cubic-bezier(0.18, 1.275, 0.425, 1.91) 10ms;
}
#p1 { min-height:100px; }
#p2 { min-height:100px; }
#scoreboard { vertical-align: top; padding: 0px; margin: 0px; border-left: .5em solid rgb(0, 0, 0); height: 100%; cursor: default; }
.Xcursor { cursor: url(img/Xcursor.png) 50 50, auto; }
.Ocursor { cursor: url(img/Ocursor.png) 50 50, auto; }
th.banner { 
   background-color:#000;
   text-align:left;
   font-weight:bold;
   font-size:3em;
   font-family:"Fontdiner Swanky";
   color: #08f;
   text-shadow: 0px -3px 0 #fff, 3px -3px 0 #fff, 3px 3px 0 #fff, -3px -3px 0 #fff, 1px 0px 0 #fff, -3px -3px 0 #fff, 3px 0px 0 #fff, 0px 3px 0 #fff, -3px 3px 0 #fff;
   }
#gamename {
   background-color:#000;
   padding-top: .5em;
   text-color:#e00;
}
#gameboard td > table.game {
   transition: all .25s;
   transform: scale(1);
   border: .25em solid transparent;
}
#gameboard td > table.activeGame {
   transform: scale(1.4);
   background-color: #fff;
   outline: .25em solid #ccc;
   position: relative;
   z-index: 999;
   box-shadow: 0.5em 0.5em 0.5em rgba(0,0,0,.8);
}
#gameboard td > table.activeGame.X {
   outline: .25em solid #ffd000;
}
#gameboard td > table.activeGame.O {
   outline: .25em solid #01c5ff;
}
.mark {
   transition: all 400ms cubic-bezier(0.18, 1.275, 0.425, 1.5);
   width:40px;
   height:40px;
   transform: scale(0);
   opacity:0;
}
.bigMark {
   transition: all 400ms cubic-bezier(0.18, 1.275, 0.425, 1.5);
   width:5.6em;
   height:5.6em;
   transform: scale(0);
   opacity:0;
}
.marked {
   transform: scale(1);
   opacity: 1;
}
select { width: 10em; }
.button { 
   height:5em;
   width:5em;
   display:inline-block;
   border-left:2px solid #000;
   border-right:2px solid #000;
   position:relative;
   background-color:#888;
   transition: all 500ms cubic-bezier(0.18, 1.1, 0.425, 1.3) ;
   cursor: pointer;
   vertical-align:top;
   color:#ddd;
}
.button:hover {
   background-color:#8bf;
   cursor: pointer;
}
.button img {
   height: 5em;
   width:5em;
}
#buttonbar { text-align:center; }
.overlay {
   height: 642px;
   width: 626px;
   position: absolute;
   z-index: 9999;
   background-color: rgba(255, 255, 255, .95);
   top: 30px;
   left: 353px;
   border:.5em solid rgba(0,100,255,.9);;
   border-radius: 2em; 
   transition: all 1000ms cubic-bezier(0.18, 1.275, 0.425, 1.0) 10ms;
   overflow:hidden;
   box-shadow: .5em .5em .5em rgba(0,0,0,.4);
}
.overlay h1 {
   display: inline-block;
   margin:.5em 0px 0px -.75em;
   text-transform: uppercase;
   font-family: "Fontdiner Swanky";
   color: #ff0;
   -webkit-text-stroke: .5px rgba(0,0,0,.4);
   font-size: 2em;
   transform: scale(1.2);
   text-shadow: 3px 3px 3px rgba(0,0,0,.4);

}
.overlay h2 {
  color: #ff0;
  -webkit-text-stroke: .5px rgba(0,0,0,.4);
  font-family: "Fontdiner Swanky";
  text-shadow: 2px 2px 2px rgba(0,0,0,.4);
   text-transform: uppercase;
}
div.open {
   overflow: visible;
}
.closeImage {
   height:50px;
   width:50px;
   padding: 1em;
}
.closeButton { float: left; display:inline-block; margin-top:-2em; margin-left:-2em;}
.badge {
   display:inline-block;
   position:absolute;
   top:-.25em;
   right:-.25em;
   width: 2em;
   z-index: 99999;
   height: 1.65em;
   transform: scale(0);
   background-color:#f00;
   color:#fff;
   border: 4px solid #fff;
   box-shadow: .25em .25em .25em rgba(0,0,0,.4);
   border-radius: 3em; 
   padding-top:0.35em;
   transition: all 350ms cubic-bezier(0.47,-1.22, 0.58, 1.90);
   z-index:9999;
}
.bounce {
 animation: bounce 2s infinite;
}
@keyframes bounce {
 0%,30%,50%,80%,100% {transform: translateY(0);}
 20% {transform: translateY(-30px);}
 40% {transform: translateY(-20px);}
 60% {transform: translateY(-10px);}
 65% {transform: translateY(0px);}
}
#newgameOverlay {
   height:362px;
}
#newgameOverlay p {
   margin:.5em 1em;
   font-size:1.2em;
}

#newgameOverlay button {
   font-size: 1.3em;
   display: inline-block;
   border: 4px solid #ccc;
   border-radius: 2em;
   padding: .5em 1em;
   margin-bottom: 0.5em;
   width: 12em;
}
button.yes { background-color: #0b0; color:#fff; }
button.no { background-color: #b00; color: #fff; }
div.on { background-color:#dd0; }
span.label {
   display: inline-block;
   overflow: hidden;
   transition: all 500ms cubic-bezier(0.18, 1.1, 0.425, 1.2) 10ms;
   transform: scaleY(0);
}
.button:hover span.label {
   transform: scaleY(1);
}
.ok {
   background-color:#69f;
}
table.request, table.players {
   font-size:1.2em;
}
table.players {
   height:11em;
   width:12em;
   overflow:hidden;
}
table.request td {
   text-align:left;
   padding:.5em;
}
table.players td {
   text-align: left;
   padding:.125em .25em;
}
.requestWrapper {
   border: .4em solid #07f;
   margin:.25em 1em;
   border-radius: 1em;
   box-shadow: 3px 3px 3px rgba(0,0,0,.4);
   background-color:#fff;
}
.inviteWrapper {
   padding:.25em;
   margin-left:1em;
   border: .4em solid #07f;
   margin:.25em 1em;
   border-radius: 1em;
   box-shadow: 3px 3px 3px rgba(0,0,0,.4);
   background-color:#fff;
}
table.request {
   width:100%;
}
table.request button, table.players button {
   width: 5em;
}
.requestHeader, .playersHeader {
font-size:1.1em;font-weight:bold;
}
.profilePic {
   height:4em;
   width:4em;
}
#invitesWrapper {
   height:22em;
   overflow:scroll;
   width:93%;
   margin:0px auto;
}
.profileCell {
   width:5em;
   text-align:center;
}
table.players td button, table.game td button {
   padding: .5em .25em;
   cursor: pointer;
   border-radius: 2em;
   border: 4px solid #8e2;
   width: 8em;
   color: #fff;
   font-size: 1.2em;
   text-shadow: 1px 1px 1px rgba(0,0,0,.5);
   background-color: #6c0;
   text-transform: uppercase;
   box-shadow: 3px 3px 3px rgba(0,0,0,.5);
   font-weight: bold;
}
table td button.invited {
   background-color:#c60;
   border: 4px solid #e82;
   color:#fff;
}

#gamesWrapper, #settingsWrapper, #statsWrapper, #errorWrapper, #requestsWrapper, #invitesWrapper, #helpWrapper {
   overflow: scroll;
   height: 35em;
   background-color: rgba(255,255,255,1);
   border: .5em solid transparent;
   border-radius: 2em;
   font-size:13px;
   position:relative;
}
div.#helpWrapper {
   font-size:28px;
   text-align:left;
}
#gamesWrapper:before {
   content: "\25B2";
   position:fixed;
   top:3px;
}
.playerCell {
   height:5em;
   width:5em;
   vertical-align:top;
}
.gameWrapper {
   border:.25em solid #07c;
   box-shadow: 3px 3px 3px rgba(0,0,0,.4);
   background-color:#fff;
   border-radius: 2em;
   font-size: 18px;
   margin: .5em 1em;
   display: inline-block;
   padding: .25em 1em;
}
h1, h2 { margin: 0px; }
h1.logo {
   font-family: "Fontdiner Swanky";
   color: #ff0;
   font-size: 48px;
   text-shadow: 2px 2px 3px rgba(0,0,0,.35);
   -webkit-text-stroke: .15px rgba(0,0,0,.25);
   line-height: 1.2;
}
.caps { text-transform: capitalize; }
.left { text-align: left; }
.waiting { text-transform:uppercase; font-weight:bold; font-size:1.1em; }
.highlight {
   background: -moz-linear-gradient(top, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.5) 49%, rgba(0,119,204,0) 50%, rgba(0,119,204,0) 100%); 
   background: -webkit-linear-gradient(top, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 49%,rgba(0,119,204,0) 50%,rgba(0,119,204,0) 100%);
   background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%,rgba(255,255,255,0.5) 49%,rgba(0,119,204,0) 50%,rgba(0,119,204,0) 100%); 
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#000077cc',GradientType=0 );
}
.btn {
    border-radius: 1em;
    border: 0px solid #07c;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,.35);
    font-weight: bold;
    box-shadow: 2px 2px 2px rgba(0,0,0,.4);
}
.cancel { background-color:#f00;}
.ignore { background-color:#fa0;}
.decline { background-color:#c00;}
.accept { background-color:#0c0;}
#gamesWrapper table.game {
   width:25em;
   height:4em;
}
#gameWrapper table.game button {
   margin-bottom:.5em;
}
#gameboard > tbody > tr { border-bottom: .8em solid black; }
#gameboard > tbody > tr:last-child { border-bottom:0; } 
#gameboard > tbody > tr > td { 
}
input.toggle {
   position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
input.toggle-round + label {
  padding: 2px;
  width: 120px;
  height: 60px;
  background-color: #dddddd;
  border-radius: 60px;
}
input.toggle-round + label:before,
input.toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.toggle-round + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: background 0.4s;
}
input.toggle-round + label:after {
  width: 58px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.toggle-round:checked + label:before {
  background-color: #8ce196;
}
input.toggle-round:checked + label:after {
  margin-left: 60px;
}
#settingsTable {
   font-family:Unkempt;
}
div.bubble {
   display:inline-block;
   border-radius: 1em;
   text-align:left;
}
.triangle-border {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  border:.25em solid #0088ee;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:1em;
  -moz-border-radius:1em;
  border-radius:1em;
  box-shadow: .125em .125em .125em rgba(0,0,0,.35);
}
.triangle-border.left {
  margin-left:30px;
}
.triangle-border.right {
  margin-right:30px;
}
.triangle-border:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#0088ee transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
  content:"";
  position:absolute;
  bottom:-12px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
  top:-20px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:auto;
  right:40px; /* controls horizontal position */
  border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
  top:-13px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:auto;
  right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
  border-width:0 13px 13px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:-30px; /* value = - border-left-width - border-right-width */
  border-width:15px 30px 15px 0;
  border-color:transparent #0088ee;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:-21px; /* value = - border-left-width - border-right-width */
  border-width:9px 21px 9px 0;
  border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:auto;
  right:-30px; /* value = - border-left-width - border-right-width */
  border-width:15px 0 15px 30px;
  border-color:transparent #0088ee;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:auto;
  right:-21px; /* value = - border-left-width - border-right-width */
  border-width:9px 0 9px 21px;
  border-color:transparent #fff;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotateY(0deg) rotateX(360deg);
    -moz-transform: rotateY(0deg) rotateX(360deg);
    -webkit-transform: rotateY(0deg) rotateX(360deg);
    -o-transform: rotateY(0deg) rotateX(360deg);
    transform: rotateY(0deg) rotateX(360deg);
  }
  25% {
    -ms-transform: rotateY(360deg) rotateX(0deg);
    -moz-transform: rotateY(360deg) rotateX(0deg);
    -webkit-transform: rotateY(360deg) rotateX(0deg);
    -o-transform: rotateY(360deg) rotateX(0deg);
    transform: rotateY(360deg) rotateX(0deg);

  }
  to {
    -ms-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    -webkit-transform: rotateX(360deg);
    -o-transform: rotateX(360deg);
    transform: rotateX(360deg);
  }
}
@keyframes spinningX {
  from {
    -ms-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    filter: grayscale(100%);
  }
  to {
    -ms-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
    filter: grayscale(100%);
  }
}
@keyframes rotatingX {
  from {
    -ms-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    filter: grayscale(0);
  }
  50% {
   filter: grayscale(100%);
  }
  to {
    -ms-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
    filter: grayscale(0%);
  }
}

@keyframes spinningO {
  from {
    -ms-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  to {
    -ms-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@keyframes rotatingO {
  from {
    -ms-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -ms-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}
@keyframes spinning {
  from {
    -ms-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -webkit-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  to {
    -ms-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -ms-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
  }
}

div.X .rotating {
  -webkit-animation: rotatingX 2s linear infinite;
  -moz-animation: rotatingX 2s linear infinite;
  -ms-animation: rotatingX 2s linear infinite;
  -o-animation: rotatingX 2s linear infinite;
  animation: rotatingX 2s linear infinite;
  position:relative;
}
div.X .spinning {
  -webkit-animation: spinningX 2s linear infinite;
  -moz-animation: spinningX 2s linear infinite;
  -ms-animation: spinningX 2s linear infinite;
  -o-animation: spinningX 2s linear infinite;
  animation: spinningX 2s linear infinite;
  position:relative;
}
div.O .rotating {
  -webkit-animation: rotatingO 2s linear infinite;
  -moz-animation: rotatingO 2s linear infinite;
  -ms-animation: rotatingO 2s linear infinite;
  -o-animation: rotatingO 2s linear infinite;
  animation: rotatingO 2s linear infinite;
  position:relative;
}
div.O .spinning {
  -webkit-animation: spinningO 2s linear infinite;
  -moz-animation: spinningO 2s linear infinite;
  -ms-animation: spinningO 2s linear infinite;
  -o-animation: spinningO 2s linear infinite;
  animation: spinningO 2s linear infinite;
  position:relative;
}
#i0, #i1 {
   position:absolute;
   top:0px;
   left:0px;
}
#i0 {
   height:600px;
   width:600px;
   opacity:.8;
}
#i1 {
   top:150px;
   left:150px;
   opacity:.8;
}
.rotate { position:relative; display:inline-block; }
#spinner {
   display:inline-block;
   height:600px;
   width:600px;
   position:absolute;
   z-index:9998;

   top:50px;
}
span.logo { font-family: "Fontdiner Swanky", sans-serif; color:#0088ef; -webkit-text-stroke: 1px solid rgba(255,255,255,.5); text-shadow:2px 2px 2px rgba(0,0,0,.35); }
.dim { opacity: .45; }

.notice {
   background-color:#900;
   color: #fff;
   opacity:1;
   font-size:48px;
}
.active {
   background-color:#ff0000;
}
.chkInvite {
float: left;
margin: 1.2em;
width: 2em;
outline: 3px solid #000;
height: 2em;
}
.players {
   height:4em;
   padding:.5em;
}
.inviteWrapper {
   width:44%;
   float:left;
}