stylesheet.css

body {
	margin: 0px;
	background-color: #fff;
}

#content {
	margin: 2% 15%;
}

#information {
	width: 100%;
	height: 80px;
	font-family: 'Calibri';
	font-size: 40px;
	text-align: center;
}

#left {
	width: 40%;
	height: 100%;
	float: left;
}

#center {
	width: 20%;
	height: 100%;
	float: left;
}

#right {
	width: 40%;
	height: 100%;
	float: right;
}

#area1 {
	float: left;
}

#area2 {
	float: right;
}

.vertical {
	height: 44px;
}

.horizontal {
	float: left;
	width: 40px;
	height: 40px;
	margin: 2px;
	transition: all 0.2s;
}

#free {
	background-color: #56DAF3;
}

#ship {
	width: 30px;
	height: 30px;
	margin: 7px;
	background-color: #000;
}

#bound {
	background-color: #DADADA;
}

.unready #free:hover{
	background-color: #505050;
}

.placing #available {
	background-color: #56DAF3;
}

.placing #available:hover{
	background-color: #505050;
}

.placing #free {
	background-color: #DADADA;
}

.ready #empty {
	background-color: #A2A2A2;
}

.ready #damaged {
	width: 30px;
	height: 30px;
	margin: 7px;
	background-color: #E06666;
}

.ready#area2 #free:hover {
	background-color: #FF9191;
}

.ready #bound {
	background-color: #A2A2A2;
}