game.css

body {
	margin:0;
	text-align:center;
	font-family:Calibri,sans-serif;
	color:#000;
}
.container {
	display:table;
	position:absolute;
	height:100%;
	width:100%;
}
.vertalign {
	display:table-cell;
	vertical-align:middle;
}
.game {
	padding:0.5em;
	background-color:#eee;
	background-color:rgba(255,255,255,0.94);
}
.dialogue {
	font-size:60%;
	text-align:left;
}
@media print, screen and (max-width: 480px) {
	.dialogue {
		display:none;
	}
}
@media print, screen and (min-width: 36em) {
	body {
		font-size:150%;
	}
	.game {
		padding:1em;
	}
}
@media print, screen and (min-width: 670px) {
	body {
		background-image:url("flags.png");
	}
	.game {
		width:595px;
		margin:auto;
		-webkit-box-shadow:0 0 4em #003;
		-moz-box-shadow:0 0 4em #003;
		box-shadow:0 0 4em #003;
	}
}

.playing, .gameover {
	display:none;
}
.play .playing,
.over .gameover {
	display:block;
}

.green {
	color:#050;
}
.red {
	color:#600;
}

.scoreboard {
	margin:0.4em;
	padding:0.4em;
	-webkit-border-radius:0.4em;
	-moz-border-radius:0.4em;
	border-radius:0.4em;
	color:#fff;
	font-family:Verdana,sans-serif;
	background-color:#444;
	filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr="#ff666666", endColorstr="#ff333333");
	background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,#666), color-stop(95%,#333), color-stop(100%,#222));
	background-image:-webkit-linear-gradient(top, #666 0%,#333 95%,#222 100%);
	background-image:-moz-linear-gradient(top, #666 0%,#333 95%,#222 100%);
	background-image:-o-linear-gradient(top, #666 0%,#333 95%,#222 100%);
	background-image:linear-gradient(to bottom, #666 0%,#333 95%,#222 100%);
}
.scoreboard span {
	display:inline-block;
}
.spacer {
	width:10%;
}
#score {
	font-weight:bold;
} 

#pressplay {
	font-size:75%;
}

.midpanel {
	padding:0.4em;
	height:2.5em;
}
.midpanel span {
	display:inline-block;
	vertical-align:top;
}
#error {
	text-align:center;
	width:80%;
	opacity:0;
	-webkit-transition:opacity 0.5s;
	-moz-transition:opacity 0.5s;
	-o-transition:opacity 0.5s;
	transition:opacity 0.5s;
}
#timer {
	width:15%;
	text-align:right;
}

button {
	cursor:pointer;
	vertical-align:top;
	min-height:5em;
	width:45%;
	border:0;
	margin:0.3em;
	-webkit-border-radius:0.3em;
	-moz-border-radius:0.3em;
	border-radius:0.3em;
	-webkit-box-shadow:none;
	-moz-box-shadow:none;
	box-shadow:none;
	font-family:"Trebuchet MS",sans-serif;
	color:#fff;
	font-size:100%;
	font-weight:bold;
	text-decoration:none;
	background-color:#08a0e1;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#08a0e1',endColorstr='#0684ba',GradientType=0);
	background-image:-moz-linear-gradient(top,#08a0e1 0%,#0684ba 100%);
	background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#08a0e1),color-stop(100%,#0684ba));
	background-image:-webkit-linear-gradient(top,#08a0e1 0%,#0684ba 100%);
	background-image:-o-linear-gradient(top,#08a0e1 0%,#0684ba 100%);
	background-image:linear-gradient(to bottom,#08a0e1 0%,#0684ba 100%);
}
button.green {
	color:#fff;
	background-color:#8cbb2e;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cbb2e',endColorstr='#769d27',GradientType=0);
	background-image:-moz-linear-gradient(top,#8cbb2e 0%,#769d27 100%);
	background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#8cbb2e),color-stop(100%,#769d27));
	background-image:-webkit-linear-gradient(top,#8cbb2e 0%,#769d27 100%);
	background-image:-o-linear-gradient(top,#8cbb2e 0%,#769d27 100%);
	background-image:linear-gradient(to bottom,#8cbb2e 0%,#769d27 100%);
}
button.red {
	color:#fff;
	background-color:#d6605a;
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d6605a',endColorstr='#be463f',GradientType=0);
	background-image:-moz-linear-gradient(top,#d6605a 0%,#be463f 100%);
	background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#d6605a),color-stop(100%,#be463f));
	background-image:-webkit-linear-gradient(top,#d6605a 0%,#be463f 100%);
	background-image:-o-linear-gradient(top,#d6605a 0%,#be463f 100%);
	background-image:linear-gradient(to bottom,#d6605a 0%,#be463f 100%);
}

#results {
	height:9em;
}

.facebook_button {
	width:40%;
	background-clip:padding-box;
	background-color:#3A5898;
	background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAABGdBTUEAALGPC/xhBQAAAF1QTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////z8iKdgAAAB50Uk5TD6dhxfbf0+mcXeKLZPAQ9QoW3eOH17qZAZaqEeEArk8N+gAAAGhJREFUKM/d0EkKgDAMBdA6z/NUE5v7H9MoKC21ILjzr8J/i4QIZUTek9BKPwiJIgukR0cSC7Kzp82Cmds4XUYLeoZOPSzfGNR7aBEHBkSsTVjpSuWC3AWTCSVAwy0AFF/P/REI/rkGO8uPP64AUMwMAAAAAElFTkSuQmCC");
	background-position:19px center;
	background-repeat:no-repeat;
	background-size:24px 24px;
	-webkit-border-radius:0.3em;
	-moz-border-radius:0.3em;
	border-radius:0.3em;
	color:#fff;
	cursor:pointer;
	margin:0.5em auto;
	padding:0 10px 0 70px;
	position:relative;
	-webkit-transition:background-color 0.15s linear 0s;
	-moz-transition:background-color 0.15s linear 0s;
	-o-transition:background-color 0.15s linear 0s;
	transition:background-color 0.15s linear 0s;
}
.facebook_button .separator {
	border-left:1px solid #2F4A84;
	border-right:1px solid #4163AA;
	height:100%;
	left:60px;
	position:absolute;
	-webkit-transition:border-color 0.15s linear 0s;
	-moz-transition:border-color 0.15s linear 0s;
	-o-transition:border-color 0.15s linear 0s;
	transition:border-color 0.15s linear 0s;
}
.facebook_button .text {
	display:inline-block;
	margin:10px 0;
}
.facebook_button:hover {
	background-color:#2F4A84;
}
.facebook_button:hover .separator{
	border-left:1px solid #283F71;
	border-right:1px solid #3A5898;
}

.adsbygoogle {
	display:inline-block;
	width:100%;
	height:280px;
	margin-top:1em;
}

.about,
.about :link,
.about :visited {
	color:#3b5998;
	font-size:16px;
	text-align:right;
}
.about iframe {
	vertical-align:top;
}