/* /activities/Poker Solitaire/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:16px;
	color: #007;
}
#main {
	margin: 0 auto;
	text-align: center;
}
#head {
	display:flex;
	padding-top:5px;
	justify-content:space-around;
	align-items: center;
}
#head img {
	width:60%;
}
#panel1 {
	display:flex;
	justify-content: center;
	margin-top: 10px;
}
.row {
	display: flex;
}
#grid .row img, #choose img {
	width:48px;
	height:69px;
	border: 1px solid grey;
	padding:2px;
	background-color: ivory;
}
#rt_n, #choose {
	display:flex;
	flex-flow:column;
	justify-content: space-around;
}
#choose {
	align-items: center;
	font-size:14px;
}
#rt_n {
	width:18px;
	height:325px;
}
#score, #best {
	margin-top:-4px;
}
.btn {
	width:50px;
	height:30px;
	font-size:14px;
	color:black;
	background-color:ivory;
	text-align:center;
	border-radius:8px;
	border-width:2px;
	border-style: solid;
	cursor:pointer;
}
#bot_n {
	display:flex;
	flex-flow:row;
	justify-content: space-around;
}
#bot_n div {
	margin-top: 5px;
}
#panel2 {
	display:none;
	margin-top:20px;
}
#panel2 img {
	width:100%;
}

@media screen and (min-width:481px) { /* iPad */
	body {
		font-size:20px;
	}
	#main {
		max-width:600px;
	}
	#panel1 {
		margin-top: 0px;
	}
	#grid {
		margin-left:50px;
	}
	#grid .row img, #choose img {
		width:80px;
		height:115px;
	}
	#rt_n {
		height:570px;
		margin-left:10px;
	}
	#choose {
		margin-left:20px;
		font-size: 18px;
	}
	.btn {
	width:70px;
	height:40px;
	font-size:20px;
	border-radius:10px;
	border-width:5px;
	border-style: double solid solid;
	}
	#panel2 img {
		width:556px;
		height:535px;
	}
}

@media screen and (min-width:1025px) { /* desktop */
	#main {
		max-width:900px;
	}
	#grid {
		margin-left:50px;
	}
	#grid .row img, #choose img {
		width:118px;
		height:170px;
	}
	#choose {
		margin-left:20px;
		font-size: 24px;
	}
	.btn {
		width:118px;
		height:60px;
		font-size: 28px;
	}
	#rt_n, #choose {
		height:850px;
	}
	#rt_n {
		width:23px;
	}
	#score, #best {
		margin-top:0;
	}
}