/* activities/Martin Gardner/The Game of Life/styles.css */

*:focus {outline: none;} /* prevents outline on clicked items */
body {background-color:#008; font-family:arial; font-size:24px; color:#007;}
b {color:brown;}
.abs {position:absolute;}
#box {width:1200px; height:850px; border:1px solid black; margin:auto;
			background-color:ivory; position:relative; margin-top:10px;
		  padding-top:20px;}
#head {
	padding-top: .5vw;
	display:flex;
	align-items: center;
	justify-content: space-around;
}
#head div img {
	width:40%;
	display:block;
	margin:0 auto;
}
#title {
	color:blue;
	font-style:italic;
	font-family:serif;
	font-size:20px;
	text-align:center;
}
#intro {width:600px; margin:60px auto; text-align:left; }
.row div {border:1px solid #333; width:14px; height:14px; display:inline-block;
	margin:-2px;}
.row {margin-bottom:-10px;}
#grid {margin:10px 0 0 40px; padding: 0 0 14px 12px; width:750px;
	border:3px solid green; display:inline-block; vertical-align:top;}
#controls {width:350px; height:738px; display:inline-block; margin-top:25px;}
button {font-size: 28px; padding:10px 20px; border-radius: 12px;
	border:5px solid darkgreen; color:ivory; background-color:#090;
	cursor:pointer; display:block; margin:22px auto;}
#stop {background-color:red; border-color:brown;}
#cycles {font-size: 28px; text-align:center;}
#intro button {background-color:indianred; border-color:brown; width:140px;
		text-align:center;}
li {margin-bottom:20px;}
#intro img {margin-top:-20px; margin-left:232px; border:1px solid;}

@media screen and (orientation:portrait) {
	#box {
		width:980px;
	}
	#head {
		width:820px;
	}
	#grid {
		margin-left:20px;
	}
	#controls {
		width:auto;
	}
}