/**
*
*  title	: JavaScript Lab 01, Client-side Programming I && II
*  author	: orem18kz
*  email	: orem18kz[@]student,ju,se
*
*/
/****************
** General CSS **
****************/
body { font-family: 'Gentium Basic', serif; font-size: 100%; margin: 0 auto; }
/***********
** header **
***********/
header { width: 80%; margin: 0 auto; }
	header h1 { text-align: center; }
	header h2 { margin-bottom: 0; }
	header ul { width: 65%; margin-top: 0.5em; }
/***************
** playground **
***************/
#playground {
	width: 90%;
	min-width: 600px;
	background-color: #EDEDED;
	font-family: 'Dosis', sans-serif;
	text-align: center;
	margin: 0 auto;
	padding: 1.12em 0;
	border: 8px solid #474747;
	box-shadow: 3px 3px 6px rgba(43, 83, 117,.5);
	border-radius: 8px;
}
/***********
** Record **
************/
#record {
	width: 65%;
	font-family: 'Muli', sans-serif;
	text-align: left;
	text-shadow: 1px 1px 1px #696969;
	list-style-type: none;
	counter-reset: item;
	margin: 1.12em auto;
	padding: 0;
}
	#record li { counter-increment: item; margin-bottom: 0.25em; padding: 0.2em 0; border-radius: 8px; cursor: default; }
	#record li:before {
		width: 1.2em;
		color: white;
		background: dodgerblue;
		font-family: 'Gentium Basic', serif;
		font-size: 140%;
		font-weight: normal;
		text-align: center;
		margin-right: 10px;
		margin-left: 12px;
		content: counter(item);
		border-radius: 100%;
		vertical-align: top;
		display: inline-block;
	}
	#record li:nth-child(odd) {  }
	#record li[class^="game-"] { font-weight: 600; }
	#record li[class^="game-"]:hover { color: #f2f2f2; }

	#record li.game-won { background-color: rgba(79,175,80,0.25); }
	#record li.game-won:hover { background-color: rgba(79,175,80,1); }
	#record li.game-lost { background-color: rgba(189,63,50,0.25); }
	#record li.game-lost:hover { background-color: rgba(189,63,50,1); }
	#record li.game-canceled { color: #616161; background-color: rgba(43,43,43,0.25); font-style: italic; }
	#record li.game-canceled:before { font-style: normal; }
	#record li.game-canceled:hover { color: #f2f2f2; background-color: rgba(43,43,43,1); }
/************
** Average **
************/
#average { font-family: 'Dosis', sans-serif; font-weight: bold; font-size: 130%; display: none; }
	#average span { font-weight: normal; }
	#average span:before { content:'\A'; white-space:pre; }
	#average span:after   { font-size: 60%; content:'\Aguesses/won games'; white-space:pre; }
/***********
** footer **
***********/
footer p { text-align: center; }