/* /activities/Peter's Brain Games 2/Fours/styles.css */
*:focus {outline: none;} /* prevents outline on clicked items */
* { /* reset */
	padding:0;
	margin:0;
	box-sizing:border-box;
}
body {
	background-color:#eff;
	font-family:sans-serif;
	font-size:26px;
	color: #007;
}
.btn {
	touch-action: manipulation;
}
#main {
	margin: 0 auto;
	text-align: center;
	width:100%;
}
#head {
	display:flex;
	padding-top:5px;
	justify-content:space-around;
	align-items: center;
}
#head img {
	width:50%;
}
#case_panel {
	display:flex;
	align-items: center;
	width:98%;
	margin:0 auto;
}
#case {
	display:flex;
	flex-direction: column;
	justify-content: space-around;
	width:67%;
	border: solid #ba8 6px;
	border-radius:12px;
	background-color:#fec;
	padding: 10px 0 5px 0;
}
.row {
	display:flex;
	justify-content: space-around;
	margin: 2px;
}
#display, #progress, .answer span {
	margin: 0 auto;
	border: solid brown 2px;
	padding: 1px 15px 1px 5px;
	padding-right: 15px;
	margin-bottom: 5px;
	border-radius:10px;
}
#display {
	width:140px;
	background-color: #bfa;
}
#progress {
	font-size: 20px;
}
#progress, .answer span {
	width:90%;
	background-color: #afd;
	margin-top: 5px;
}
#display p {
	text-align:right;
}
.btn {
	display:flex;
	justify-content: center;
	align-items: center;
	width:50px;
	height:45px;
	color:black;
	background-color:ivory;
	text-align:center;
	border-radius:10px;
	border-width:5px;
	border-style: double solid solid;
	border-color:#ccc;
	cursor:pointer;
}
.op, #b4, #bc, #be {
	color:black;
	cursor:pointer;
}
#bp {
	font-size: 38px;
}
#bm {
	font-size: 60px;
	padding-bottom: 5px;
}
#bt {
	font-size: 32px;
}
#bd {
	font-size: 42px;
	padding-bottom: 5px;
}
#bc {
	font-size: 28px;
}
#b4 {
	font-size: 30px;
}
#panel {
	display:flex;
	align-items: center;
	height:200px;
	border:2px solid mediumblue;
	background-color:#ffebcd;
	color:black;
	text-align: center;
	font-family:sans-serif;
	font-size:15px;
}
#panel p {
	padding:0 5px;
}
#results {
	display: flex;
	flex-wrap: nowrap;
	font-size: 14px;
}
#col1, #col2 {
	width:50%;
}
.answer {
	display:flex;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: -2px;
	padding-left:7px;
}
.answer p {
	display:inline;
	padding-right: 3px;
	color:blue;
}
.answer span {
	display:inline-block;
	background-color: pink;
}
#ten {
	padding-left: 1px;
}
#ten p {
	font-size: 18px;
	padding-right: 0;
}
#ten span {
	width:156px;
}
#reset p {
	visibility: hidden;
}
#reset span {
	background-color: palegreen;
	width:94px;
	border: solid 4px green;
	cursor:pointer;
}

@media screen and (min-width:481px) { /* iPad */
	body {
		font-size:20px;
	}
	#head img {
		width:40%;
		margin-bottom:-8px;
	}
	#main {
		width:800px;
	}
	#case_panel {
		justify-content: space-around;
		width:90%;
	}
	#case {
		width:50%;
		padding: 20px 0 10px 0;
	}
	.row {
		margin: 10px;
	}
	#display, #progress, .answer span {
		padding: 5px;
	}
	#display p, #progress {
		font-size:32px;
	}
	.btn {
		width:70px;
		height:70px;
		font-size:32px;
	}
	#panel {
		width:35%;
		font-size:22px;
	}
	#panel p {
		padding:10px 10px 7px 15px;
	}
	#results {
		width:780px;
		margin:0 auto;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 24px;
	}
	#col1, #col2 {
		width:45%;
	}
	.answer {
		height:50px;
	}
	.answer p {
		padding-right: 5px;
	}
	#ten p {
		font-size: 24px;
	}
	#ten span {
		width:88%;
	}
}


@media screen and (min-width:1025px) { /* desktop */
	#main {
		width:100%;
		max-width:900px;
	}
	#head img {
		width:60%;
		margin-bottom:0px;
	}
	#case_panel {
		margin-bottom: 15px;
	}
	.answer {
		margin-top: 20px;
		font-size:32px;
	}
	#results {
		justify-content: space-around;
	}
	#ten p {
		font-size: 30px;
	}
	#reset span {
		width:150px;
	}
}