body {
	background-color: #EEE;
	font-family: Helvetica;
	font-size: 18px;
	color: #FFF;
}

#board {
	width: 600px;
	height: 600px;
	background-color: transparent;
	margin-top: 70px;
}

#board.active {
	cursor: url(/style/pencil.png), cursor;
}

.message {
	position: absolute;
	transition: all 0.6s;
	display: inline-block;
	width: 700px;
	top: 12px;
	left: 50%;
	margin-left: -370px;
	opacity: 0;
	padding: 16px 34px 16px 6px;
	background-color: #000;
	border-radius: 5px;
	
}

.message.display {
	top: 20px;
	opacity: 0.9;
	padding-left: 34px;
	padding-right: 6px;
}

.message.gone {
	top: 5px;
	opacity: 0;
}

#startup {
	width: 400px;
	height: 100px;
	background-color: #000;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -236px;
	margin-top: -136px;
	opacity: 0.95;
	padding: 36px;
	border-radius: 9px;
}

#startup>.welcome, #startup>.create-game, #startup>.join-game {
	display: none;
}

#startup.welcome>.welcome, #startup.create-game>.create-game, #startup.join-game>.join-game {
	display: block;
}

.big {
	font-size: 38px;
	text-align: center;
}

.bottom-left, .bottom-right {
	position: absolute;
	bottom: 0;
	border-top: 1px solid #FFF;
	padding: 20px 0;
	text-align: center;
	width: 236px;
	cursor: pointer;
}

.bottom-left:hover, .bottom-right:hover {
	color: #000;
	background-color: #DDD;
}

.bottom-left {
	left: 0;
	border-bottom-left-radius: 7px;
	border-right: 1px solid #FFF;
}

.bottom-right {
	right: 0;
	border-bottom-right-radius: 7px;
}

#p2-key {
	position: absolute;
	bottom: 20px;
	left: 36px;
	width: 400px;
	text-align: center;
	font-size: 27px;
}

#join-key {
	border: none;
	padding: 12px 23px;
	font-size: 27px;
	width: 400px;
	text-align: center;
	border-radius: 5px;
	margin-top: 21px;
}

#join-key:focus {
	outline: none;
}