File: assets/css/tictactoe.css

html, body, .container-fluid {            
    height:100%;
    padding:0px;margin:0px;
}
.mainpanel {
    width:100%;
    height:100%;
    padding:0px;margin:0px;
}
.gameboard {
    height: 100%;
    margin: auto;
}
.gameboard .row{
    height:29%;
}
.gameboard .turn{
    height:13%;
}
.leftpanel {
    height:100%;            
    background-color:#ccc;
}
.rightpanel {
    height:100%;
    background-color:#ddd;
}
.rpanelheader {
    text-align: center;
    font-weight: bold;
}
.scoresheading div{
    font-weight: bold;
}
.box {
    border:1px solid #000;
    height:100%;
    text-align: center; 
    width:33.33%;            
    font-size:60px;
}
.turn {
    text-align:center;
    padding-top:5px;            
}        
.tleft, .tright, .bright, .bleft { border:0; }
.middle { border: 1; }
.mleft, .mright  { border-left:0;border-right: 0; }         
.bottom, .top { border-bottom: 0; border-top: 0;}        

.friend_computer {
    height: 50%;
    width:100%;
}
.friend_computer div {
    text-align:center;width:50%;float:left;
}
.friend, .computer { height:100%;padding-top:5px; }
.footer { height:100%; }
.footer .text-info { height:50%;}
i {             
    vertical-align: middle;
}
@media (min-width: 768px)            
{
     div[class^="gameboard"]{width: 70%;height:70%;}

        .gameboard .row{
            height:25%;
        }
        .gameboard .turn{
            height:12.5%;
        }
        .box {
            padding-top: 20px;
        }
}