@charset "utf-8";
@media all and (max-width: 640px) {
	
	#content {
		width: auto;
		/* border: solid black 1px; */
		padding: 0.5em;
	}

}

@media all and (min-width: 640px){
		
	#content {
		width: auto;
		/* border: solid black 1px; */
		padding: 0.5em;
	}
}

	body {
		font-family: sans-serif;
		line-height: 1.25;
		margin: 0;
	}
	#container {
		width: 90%;
		margin: 0 auto;
	}
	#title{
		text-align: center;	
		/* border: 1px solid black; */
		margin: 0;
		/* max-width: 800px; */
		padding: 0.5em;
		background-color: darkblue;
		color: white;
	}
	#content img {
		display: block;
		max-width: 100%;
		max-height: 640px;
		margin: 0 auto;
	}
	#content div {
		text-align:justify;
	}
	#container p {
		margin: 0em 0em 1em 0em;	
	}
	#content>div {
		margin: 0.5em auto;
		max-width: 800px;
		background-color: #f7f7fa;
		padding: 0.5em;
	}
	#content #instructions {
		background-color: #eff7ff;
		border: 1px solid #428bca;
		padding: 0.25em;
	}
	#content .warningText {
		font-weight: bold;
	}
	#cases .buttonList {
		text-align: center;
		list-style: none;
		padding: 0;
	}
	#cases .caseItem {
		padding: 0.25em;
		background-color: #eff7ff;
		border: 1px solid #428bca;
		display: table;
		margin: 0 auto;
		box-sizing: border-box;
		cursor: pointer;
	}
	#cases .caseItem:hover {
		background-color: #dfefff;
	}
	#cases .buttonList>.caseItem:not(:first-of-type) {
		margin-top: 0.5em;
	}
	#cases .caseLink {
		display: table-row;
		text-decoration: none;
		font-weight: bold;
	}
	#cases .caseTitle {
		display: table-cell;
		vertical-align: middle;
		padding: 0.25em;
		font-weight: bold;
	}
	#cases .caseIcon {
		display: table-cell;
		vertical-align: middle;
		width: 20%;
		text-align: center;
	}
	#cases .caseIcon>img {
		max-width: 100px;
		width: 100%;
	}
	
	/* Filter Buttons */
	div#levelFilter {
		text-align: center;
		padding: 0.5em 0;
	}
	div#levelFilter .filterBtn {
		display: inline;
		background: #eff7ff;
		color: #7f7f7f;
		border: 1px solid #2d6ca2;
		border-radius: 0.25em;
		padding: 0.25em 0.75em;
		margin: 0.25em;
		font-size: inherit;
		cursor: pointer;
	}
	div#levelFilter .filterBtn.active {
		background: #428bca;
		color: #ffffff;
		box-shadow: 0 0 5px #428bca;
	}
	div#levelFilter .filterBtn:disabled {
		background: #f0f0f0;
		color: #999;
		border-color: #ccc;
		cursor: not-allowed;
		display: none;
	}
	
	/* Stacked filters on small screens */
	@media all and (max-width: 640px) {
		div#levelFilter {
			padding: 0.5em 0;
		}
		div#levelFilter .filterBtn {
			display: block;
			width: 100%;
			margin: 0.25em 0;
		}
	}
	
	#content button {
		text-align: center;
		display: block;
		margin: 0.5em auto;
		padding: 0.25em 0.5em;
		background: #428bca;
		color: #ffffff;
		border: 1px solid #2d6ca2;
		border-radius: 0.25em;
		font-size:inherit;
		cursor:pointer;
	}
	#content textarea {
		width: 100%;
		max-width: 100%;
		height: 8em;
		font-family: inherit;
		font-size: inherit;
		border: 1px solid #2d6ca2;
	}
	#content table {
		margin: 0 auto;
		border: 1px solid black;
		border-collapse: collapse;
	}
	#content table th {
		text-align: center;
	}
	#content table th, #content table td {
		border: 1px solid black;
		padding: 0em 0.5em;
	}
	svg {
		display: block;
		width: 100%;
		height: 100%;
	}
	h1,h2,h3,h4,h5,h6 {
		text-align: center;
	}

@media all and (min-width: 640px) {
	svg {
		max-height: 640px;
	}
}