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;
}
}
|