* {
	margin:0;
	padding:0;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
}

body {
	background:#ffffff;
}

/*********** nav buttons *************/
nav {clear: both; margin-top: 40px; height: 20px; padding-top: 20px;}
nav a.nav { position:relative; float: left; margin-left: 20px; color: black; text-decoration: none; text-transform: uppercase; font-family: 'Arial Bold',Arial; font-weight: bold; font-size: 15px;}
nav a.nav.disabled {cursor: default; color: #999;}
nav a.nav:hover {color: #666;}
nav a.nav.disabled:hover {color: #999}
nav a.nav.next {float: right; margin-right: 20px;}

nav a.nav.next:before {content: ""; display: block; position: absolute; right: -25px; width: 0px; top: -1px;
height: 0px;
border-style: solid;
border-width: 9px 0 9px 18px;
border-color: transparent transparent transparent black;}
nav a.nav.next:after {content: ""; display: block; position: absolute; right: -21px; width: 0px; top: 2px;
height: 0px;
border-style: solid;
border-width: 6px 0 6px 12px;
border-color: transparent transparent transparent #007bff;}

nav a.nav.next.disabled:before {border-color: transparent transparent transparent #888;}
nav a.nav.next.disabled:after {border-color: transparent transparent transparent #999;}



nav a.nav.previous:before {content: ""; display: block; position: absolute; left: -25px; width: 0px; top: -1px;
height: 0px;
border-style: solid;
border-width: 9px 18px 9px 0;
border-color: transparent black transparent transparent;}
nav a.nav.previous:after {content: ""; display: block; position: absolute; left: -21px; width: 0px; top: 2px;
height: 0px;
border-style: solid;
border-width: 6px 12px 6px 0;
border-color: transparent #007bff transparent transparent;}

nav a.nav.previous.disabled:before {border-color: transparent #888  transparent transparent;}
nav a.nav.previous.disabled:after {border-color: transparent #999 transparent transparent;}

/********** audio buttons ***********/
:focus{
	outline: solid 2px green;
	outline-offset: 2px;
}

/********** standard size ***********/

#page-container{
	margin-left: auto;
	margin-right: auto;
	width: 620px;
	background-color: #616161;
	padding: 0px 10px 20px 10px;
	position:relative;
}

#page-container header{
	text-align: center;
	min-height: 15px;
}

#page-container header h1{
	color: #ffffff;
	font-size: 20px;
	font-family: 'Arial Black', 'Arial Bold', sans-serif;
	font-weight: bold;
	line-height: 30px;
}

#main-content{
	margin-left: auto;
	margin-right: auto;
	width: 580px;
	background-color: #ffffff;
	padding: 10px 20px 10px 20px;
	position: relative;
}

/********** small size ***********/
#page-container.small{
	min-height: 200px;
}

#page-container.small #main-content{
	min-height: 170px;
}

/********** task A ***********/
p#instructions
{
	/*text-align: center;*/
	padding-left: 40px;
	margin-bottom: 28px;
	position: relative;

}
p#instructions a
{
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	height: 28px;
	width: 32px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: center center;
	overflow: hidden; 
}

p#instructions a.play{
	background-image: url('../images/audio-on.png');
}

p#instructions a.playing{
	background-image: url('../images/audio-off.png');
}

p#question 
{
	border: solid 2px #2590ff;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	padding: 20px 10px;
	width: 560px;
	margin: 10px 0px;
}

form{
	text-align: right;
}

form textarea{
	display:block;
	width: 560px;
	margin: 0px auto;
	border: solid 2px #e6f0f9;
	resize:none;
	padding:10px;
	text-align: left;
}

form textarea.required{
	border-color:red;
}

form a
{
	display:inline-block;
	margin: 15px 30px;
	text-transform: uppercase;
	line-height: 24px;
	text-decoration: none;
	padding: 0px 15px;
	color: #000000;
	background-color: #2590ff;
	border: solid 2px #000000;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-webkit-transition: background-color .5s;
	-moz-transition: background-color .5s;
	transition: background-color .5s;
}

p#answer
{
	display: none;
	margin: 15px 0px;
	padding: 15px 15px 20px 15px;
	background-color: #e6f0f9;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	width: 560px;
}

p#answer span.answer-label
{
	display:block;
	font-weight: bold;
	margin-bottom:20px;
}

/*********** Task B ***********/
input[type=radio]{
	position: absolute;
	left: -9999px;
}
input[type=radio]:focus + label {outline: solid 2px #2590FF; outline-offset: 2px;}

input#submit-button{
	display: block;
	text-decoration: none;
	padding: 0px 15px;
	color: #000000;
	background-color: #2590ff;
	border: solid 2px #000000;
	border-radius: 6px;
	float: right;
	margin-bottom: 10px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-webkit-transition: background-color .5s;
	-moz-transition: background-color .5s;
	transition: background-color .5s;
}

input#submit-button:hover,
input#submit-button:active,
input#submit-button:focus{
	background-color: #e6f0f9;
	-webkit-transition: background-color .5s;
	-moz-transition: background-color .5s;
	transition: background-color .5s;
}

label{
	position: relative;
	height: 19px;
	margin: 6px 0px;
	width: 200px;
	display: block;
	padding-left: 30px;
	text-align: left;
}

label:before{
	content: '';
	position: absolute;
	display: inline-block;
	height: 19px;
	width: 19px;
}

input[type=radio] + label{
	background-image: url('../images/button-unselected.png');
	background-repeat: no-repeat;
}
input[type=radio]:checked + label{
	background-image: url('../images/button-selected.png');
	background-repeat: no-repeat;
}

#correct-answer{
	color: red;
	font-weight: bold;
}

/********** Click and Reveal ***********/
a.click-and-reveal{
	background-color: #e6f0f9;
	border: solid 2px #2590ff;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	width: 510px;
	display: block;
	position: relative;
	padding: 15px 10px 15px 60px;
	text-decoration: none;
	color: #414141;
	margin: 10px 0px 10px 0px;
	-webkit-transition: color .5s;
	-moz-transition: color .5s;
	transition: color .5s
}

a.click-and-reveal:hover,
a.click-and-reveal:active{
	color: #2590ff;
	-webkit-transition: color .5s;
	-moz-transition: color .5s;
	transition: color .5s;
}

a.click-and-reveal:before{
	content: '';
	position: absolute;
	left: 30px;
	display: inline-block;
	background-image: url('../images/arrow.png');
	background-repeat: no-repeat;
	height: 21px;
	width: 18px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	transition: transform .5s;
}

a.flipped:before{
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);;
	transform: rotate(90deg);
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	transition: transform .5s;
}

.reveal-content{
	display: none;
	padding-left: 50px;
}

/********** Answer Only ***********/
#answer-only{
	display: block;
	min-height: 40px;
	padding: 20px;
	border: solid 2px #2590ff;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	margin: 10px 0px;
	width: 596px;
}

#main-content #answer-only a#answer-button{
	position: relative;
	float: left;
	padding: 10px 50px 10px 10px;
	text-decoration: none;
	color: #414141;
	background-color: #2590ff;
	border: solid 2px #414141;
	border-radius: 15px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	text-transform: uppercase;
	width: 120px;
	-webkit-transition: background-color .5s;
	-moz-transition: background-color .5s;
	transition: background-color .5s;
}

#main-content #answer-only a#answer-button:hover,
#main-content #answer-only a#answer-button:active,
#main-content #answer-only a#answer-button:focus{
	background-color: #e6f0f9;
	-webkit-transition: background-color .5s;
	-moz-transition: background-color .5s;
	transition: background-color .5s;
}

a.answer-key:after{
	content: '';
	position: absolute;
	right: 10px;
	top:8px;
	display: inline-block;
	background-image: url('../images/arrow.png');
	background-repeat: no-repeat;
	height: 21px;
	width: 18px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	transition: transform .5s;
}

a#answer-button #hide{
	display: none;
}

a.flipped:after{
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);;
	transform: rotate(90deg);
	-webkit-transition: -webkit-transform .5s;
	-moz-transition: -moz-transform .5s;
	transition: transform .5s;
}

/********** Helper Styles ***********/
.clearer{
	clear: both;
}

.hidden{
	display: none;
}

footer{
	text-align: center;
}
footer #print{ 
	background-color: #2590ff; 
	border: 2px solid #000000; 
	border-radius: 6px; 
	color: #000000; 
	height: 18px; 
	margin: 10px auto 0px auto; 
	padding: 4px; 
	text-decoration: none; 
	text-transform: uppercase; 
	display: inline-block;
}

/*********** Print ***********/
@media print { 
	div#main-content p#instructions { display: none !important; }
	div#main-content form a { display: none !important; } 
	a#print { display: none !important; }
	input#submit-button { display: none !important; }
	nav, a.next, a.previous { display: none !important; }
}