body {	
    background: #eaeaea url(images/background.jpg);
    background-size:auto;
    text-align:center;
    font-family: 'Exo 2', sans-serif;
    color: #595d64;
}


/*
    Button style credits:
    http://www.commentredirect.com/make-awesome-flat-buttons-css/
*/
.button {
	padding: 14px 20px;
	font-size: 13px;
	line-height: 100%;
	text-shadow: 0 1px rgba(0, 0, 0, 0.4);
	color: #fff;
	vertical-align: middle;
	text-align: center;
	cursor: pointer;
	font-weight: bold;
	transition: background 0.2s ease-in-out;
	-webkit-transition: background 0.2s ease-in-out;
	-moz-transition: background 0.2s ease-in-out;
	-ms-transition: background 0.2s ease-in-out;
	-o-transition: background 0.2s ease-in-out;
	text-shadow: 0 1px rgba(0, 0, 0, 0.7);
	color: #fff;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
}

.button:active {
	padding-top: 15px;
}

.button, .button:hover, .button:active {
	outline: 0 none;
	text-decoration: none;
    color: #fff;
}

.button1 {
	background-color: #fdc058;
	box-shadow: 0px 3px 0px 0px #e29003;
}

.button1:hover {
	background-color: #fdb53a;
}

.button1:active {
	box-shadow: 0px 1px 0px 0px #e29003;
}

.button2 {
	background-color: rgb(122, 187, 227);
	box-shadow: 0px 3px 0px 0px rgb(86, 147, 185);
}

.button2:hover {
	background-color:rgb(104, 169, 209);
}

.button2:active {
	box-shadow: 0px 1px 0px 0px rgb(86, 147, 185);
}

.button3 {
	background-color: #2ecc71;
	box-shadow: 0px 3px 0px 0px #239a55;
}

.button3:hover {
	background-color: #28b363;
}

.button3:active {
	box-shadow: 0px 1px 0px 0px #239a55;
}

#grid { 
    position:absolute; top:0; left:0;
}

#playerSelector {
    display:inline-block;
    text-align:left;
    line-height: 23px;    
    vertical-align:middle;
}

#centerElements {
    margin-top: -10px;
}

#newGame {
    float:right;
    margin-right: 48px;
}

#board { 
    position:absolute; top:0; left:0;
    border: solid rgb(88, 148, 190) 2px;
}

#wrapper {
    margin-left:auto;
    margin-right:auto;
    background:rgba(255,255,255,0.4);
    position:relative; width:585px; height:500px;
}

#scoreDiv {
    margin-top: 15px;
    float:right;
    font-size: 16px;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
    
    background-color: rgba(255, 255, 255, 0.75);
	box-shadow: 0px 3px 0px 0px rgba(177, 177, 177, 0.75);
}

#outputDiv {
    width: 135px;
    margin-top: 15px;
    float:left;
    font-size: 16px;
	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
    
    background-color: rgba(255, 255, 255, 0.75);
	box-shadow: 0px 3px 0px 0px rgba(177, 177, 177, 0.75);
}

.content {
    margin: 8px 15px 12px 15px;
    line-height: 25px;
}

.title{
    background: rgb(122, 187, 227);
    color: rgb(255, 255, 255);
    width:100%;
    line-height:30px;
    font-weight:bold;
}

#board td {
    border: none;
    background: url(images/cellBackground.png);
}

td {
    -webkit-transition: all 0.3s ;
    -moz-transition: all 0.3s ;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s ;
    transition: all 0.3s ;

    border: solid gray 1px;
    border-style: dotted;
    /*width: 10px;
    height: 10px;*/
}

table {
    width: 585px;
    height: 500px;
    border-collapse: collapse;
    border-spacing: 0;
    margin-left:auto;
    margin-right:auto;
}

.player1{
    color: rgb(226, 65, 65);
}
.player2{
    color: rgb(255, 167, 0);
}