/********************************************************
GENERAL
**********************************************************/

body {
	background-color: #9c0f5f;
}

#container {
	max-width: 940px;
	margin: 0 auto;
	text-align: center;
}

.clearfix:after {
	content: "";
	display: block;
	clear: both;
	height: 0;
}


/*********************************************************
HEADER
**********************************************************/

header {
	text-align: center;
	color: #160a47;
}

li {
	list-style: none;
	display: inline-block;
	font-size: 1.5rem;
	margin: 2px 2px 5px;
	padding: 0 7px;
}

.controls > li{
	height: 3rem;
	width: 5rem;
}
#startButton {
	background-color: green;
}
#clearButton {
	background-color: red;
}
#lifeButton {
	background-color: blue;
}

.button {
	border: solid 2px black;
	vertical-align: center;
}
.templates > li {
	background-color: white;
}



/*********************************************************
 FIELD
**********************************************************/

.row {
	height: 30px;
}

.row > div {
	display: inline-block;
	border: 1px solid black;
	height: inherit;
	width: 30px;
}

.row:nth-of-type(1) > div{
	border-top: 3px solid #160a47;
}

.row:nth-last-of-type(1) > div {
	border-bottom:3px solid #160a47;
}

.row > div:nth-of-type(1) {
	border-left: 3px solid #160a47;
}

.row > div:nth-last-of-type(1) {
	border-right: 3px solid #160a47;
}

.alive {
	background-color: black;
}

.dead {
	background-color: white;
}



/*********************************************************
 DIALOG
**********************************************************/

#end {
	min-width: 240px;
	height: 10%;
	padding: 10px 0;
	margin: 10% 35% 0;
	border: 3px solid #160a47;
	font-size: 1.25em;
	background-color: white;
}

#statistic{
	background-color: inherit;
}



/*********************************************************
 MEDIA QUERY
**********************************************************/

@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
    .row {
		height: 35px;
	}

	.row > div {
		width: 35px;
	}
}

/* 1.3 dpr */
@media (-webkit-min-device-pixel-ratio: 1.3), (min-resolution: 124.8dpi){
    .row {
		height: 40px;
	}

	.row > div {
		width: 40px;
	}
}

/* 1.5 dpr */
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
    .row {
		height: 45px;
	}

	.row > div {
		width: 45px;
	}
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.controls > li{
		height: 5rem;
		width: 7rem;
	}

	.buttons > div {
		font-size: 2em;
	}

	.button {
		height: 100%;
	}
    .row {
		height: 60px;
	}

	.row > div {
		width: 60px;
	}
}