@import url('https://fonts.googleapis.com/css?family=Cabin');
@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; }
#gameboard { font-weight: bold; background-color:#fff; margin:0; }
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);
}

th { background-color:#000; color:#0f0; }
#currentPlayer { height:2em; }   
.disabled { background-color: rgba(0,0,0,.5); cursor: url(img/no.png), auto; }
.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:0px;left:0px;height:100%; 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;
   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; width:115px; }
.Xcursor { cursor: url(img/Xcursor.png) 50 50, auto; }
.Ocursor { cursor: url(img/Ocursor.png) 50 50, auto; }
.banner { 
   background-color:#000;
   text-align:left;
   font-weight:bold;
   font-size:1.5em;
   font-family:"Fontdiner Swanky";
   color: #00f;
   text-shadow: -1px -1px 0 #ff0,  1px -1px 0 #ff0, -1px  1px 0 #ff0, 1px  1px 0 #ff0;        
}
#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: .5em solid #ccc;
   position: relative;
   z-index: 999;
   box-shadow: 0.5em 0.5em 0.5em rgba(0,0,0,.8);
}
.mark {
   transition: all 400ms cubic-bezier(0.18, 1.275, 0.425, 1.5);
   width:40px;
   height:40px;
   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:#cc0;
   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; }
.on { background-color:#08c; }
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:14px;
}
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 {
   display:inline-block;
   padding:.25em;
   float:left;
   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:50px;
   width:50px;
}
#invitesWrapper {
   height:22em;
   overflow:scroll;
   width:80%;
   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;
}
#gamesWrapper, #settingsWrapper, #statsWrapper, #errorWrapper, #requestsWrapper {
   overflow: scroll;
   height: 20.4em;
   background-color: rgba(255,255,255,.95);
   border: .5em solid transparent;
   border-radius: 2em;
}
.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; }
.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:10em;
   height:14em;
}
#gameboard > tbody > tr { border-bottom: .8em solid black; }
#gameboard > tbody > tr:last-child { border-bottom: .8em solid transparent; }
#gameboard > tbody > tr > td { 
   border-right: .8em solid black;
}