chess.css

@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,600);

/*#7D9FBA*/
body {
	font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: bolder;
	font-size: 3.5em;
}

.grid {
	margin-left: auto;
	margin-right: auto;
	max-width: 700px;
}

	.grid > div {
		display: flex;
		width: 100%;
		border-left: 1px solid #555;
		border-right: 1px solid #555;
	}

		.grid > div:first-child {
			border-top: 1px solid #555;
		}

		.grid > div:last-child {
			border-bottom: 1px solid #555;
		}
			/*Cell level*/
			.grid > div > div {
				position: relative;
				flex: 1;
				background-color: #ecf0f1;
				display: inline-block;
			}

				.grid > div > div:before {
					content: "";
					display: block;
					padding-top: 100%; 	/* initial ratio of 1:1*/
				}

				.grid > div:nth-child(odd) > div:nth-child(even),
				.grid > div:nth-child(even) > div:nth-child(odd) {
					background-color: black;
				}
				/*Piece level*/
				.grid > div > div > div {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					text-align: center;
					margin: 0;
					cursor: pointer;
				}

.black {
	color: #1abc9c;
}

.white {
	color: #2980b9;
}

.highlight {
	background-color: rgba(41, 128, 185, .5);
}

.attack {
	background-color: rgba(192, 57, 43, .5);
}

.active {
	background-color: rgba(127, 140, 141, .5);
}