/* CSS Document finding J*/
html {
    height: 100%;	
}
body {
	margin:0;
	font-family: Tahoma, Geneva, sans-serif;
	font-size:18px;
	background-color:#fdf9d4;
	color:#000000;
	text-align:center;
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
}
#view {
	overflow-y:auto;
	flex:auto;
}
#view img:not(.unstretched) {
	width:90%;
	margin: auto;
}
#view video {
	margin:auto;
	display:block;
	width:80%;	
}
.choices-list {
	list-style: none; 
	padding:0; 
	margin:30px;
}
.choice { 
	border: 1px solid #ccc; 
	padding: 5px 10px; 
	color:#000; 
	display:block; 
	text-decoration:none;
	border-style:inset;
	border-width:1px;
	border-color:#9b9b9b;
	font-weight:bold;
	border-radius:5px;
	margin:5px 5px 20px 5px;
	background:#f59d12;
}

.rightAnswer {
	background: #7EF466;
}
.wrongAnswer {
	background: #be0b21;
}
label {
	display:block;
}
.input {
	border: 1px solid #ccc; 
	padding: 5px 10px; 
	width:80%;
	text-decoration:none;
	border-style:inset;
	border-width:1px;
	border-color:#9b9b9b;
	font-weight:bold;
	border-radius:5px;
	margin:5px;
	background:#eee;
}
.short {
	width: 50%;
	margin-right: 0px;
}
.header {
    background:#fcc009;
    -webkit-background-size: 1px 44px;
    -moz-background-size: 1px 44px;
    -ms-background-size: 1px 44px;
    -o-background-size: 1px 44px;
    background-size: 1px 44px;
    flex-basis:50px;
    width:100%;
    color:#fff;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
.header>img {
	margin-top:0px;
	margin-bottom:-4px;
	height:44px;
}
.footer {
	background:#d95b16;
	color:#000000;
	font-size:14px;
	flex-basis:50px;
}
.footer div{
	display:inline-block;
    width:18.5%; 
    height:45px;
    margin-top:2px;
}
h1 {
	font-size:21px;	
	padding:0 15px 0 20px;
}
h2 {
	font-size:20px;
	padding:0 15px 0 20px;	
}
h3 {
	font-size:14px;	
	font-weight:lighter;
	padding:0 15px 0 20px;
}
.task {
	text-transform:uppercase;
	font-size:18px;
	margin-top:50px;
}
p {
	padding:0 15px 0 20px;
	text-align:left;
	font-size:18px;
}
	 
.info p{
	text-align: center;
}
.img {
	text-align:center;
	width:99%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
img.displayed {
	width:99%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}
.button {
	margin:auto;
	display:block;
	height:50px;
	width:100px;
	padding: 0px 5px 0px 5px;
	margin-top:20px;
	margin-bottom:20px;
	display:block; 
	text-decoration:none;
	border-style:inset;
	border-width:1px;
	border-color:#9b9b9b;
	text-align:center;
	text-transform: uppercase;
	font-weight:bold;
	font-size:11px;
	z-index:20;
	border-radius:5px;
	background:#f59d12;
}
.square {
	height:100px; 
	width:100px;
	padding:20px 20px 20px 20px;
}
.infobutton {
	height:60px;
	width:170px;
	padding: 0px 5px 0px 5px;
	margin-bottom:20px;
}
.wipebutton {
	height:40px;
	width:80px;
	padding: 0px 2px 0px 2px;
	margin-bottom:20px;
	margin-top:300px;
	font-size:6px;
}
.button:hover { 
	background:#fcc009;	
	border-style:outset;
	border-width:1px;
	border-color:#cbcbcb;
}
.choice:hover { 
	border-style:outset;
	border-width:1px;
	border-color:#cbcbcb;
}
a {
	color: black;
	text-decoration:none;
}
.grey {
	color:#9293aa;
}
.loading {
	-webkit-animation:spin 2s linear infinite;
	-moz-animation:spin 2s linear infinite;
	animation:spin 2s linear infinite;
}
.androidFix {
	overflow:hidden !important;
	overflow-y:hidden !important;
	overflow-x:hidden !important;
}
@-moz-keyframes spin { 100% { 
	-moz-transform:rotate(360deg); 
	}
}
@-webkit-keyframes spin { 100% { 
	-webkit-transform:rotate(360deg); 
	}
}
@keyframes spin { 100% {
	-webkit-transform:rotate(360deg);
	transform:rotate(360deg);
	}
}