/* reset **********************************************************/
 
 /* reset  --  http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }

/* main styles **********************************************************/

html { -webkit-font-smoothing: antialiased; overflow-y: scroll; position: relative; min-height: 100%; }

body { background-color: #fff; color: #000000; font: 100% Arial, Helvetica, Verdana, sans-serif; margin-bottom: 150px; }

h1 { margin: 0 0 10px 0; letter-spacing: .1em; }

a { -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; }
a:link, a:visited { color: #700017; text-decoration: none; border-bottom: 1px dotted; }
a:active, a:hover { border-bottom: 1px solid; color: #a1a1a1; }

img { border: 0; text-decoration: none; -ms-interpolation-mode: bicubic; vertical-align: middle; }
a img { text-decoration: none; border: 0 none; }
	
p, ul, ol, td { font-size: .85em; }
p { margin: 0 0 1em 0; line-height: 1.4em;  }
ol { margin: 0 0 0 35px; padding: 0; line-height: 2.6em; list-style-type: decimal; }
li { margin: 0 0 40px 0; font-size: 1.4em; }
b, strong { font-weight: bold; }
i, em { font-style: italic; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

.question { font-size: 1.1em; font-weight: bold; line-height: 2em; }
.red { color: #ef1217; }

header { display: block; width: 100%; background-color: #fdc741; margin: 0; padding: 25px 0; }
.logo { width: 57.477477477477%; } 
.logo img, .stepimg img { max-width: 100%; margin-bottom: 20px; }  
			   
.container { max-width: 65.625em; margin: 0 auto; padding: 40px 1.875% 0; overflow: auto; } /* 1110px / 16 */
.container .left { width: 22%; padding: 0 2% 0 0; float: left; }
.container .right { width: 70%; padding: 0 0 0 2%;float: left; }
			   
.intro { text-align: justify; }
	.intro p { font-size: 1.4em; font-weight: normal; line-height: 1.6em; }
	.intro p.howto { margin: 30px 0 0 0; color: #000; }
.step1 { width: 100%; padding: 15px 0; }
	.step1 p { font-size: 1.7em; }	
	.icon { width: 16px; height: 16px; margin-top: -3px; }
.step2 { width: 100%; padding: 25px 0; background-color: black; }
	.step2 p { font-size: 1.7em; color: white; }	
.step3 { width: 100%; padding: 25px 0 45px; }
	.step3 p { font-size: 1.7em; }	
	.step3 .details { font-size: .85em; margin-bottom: 30px; }

#player { padding: 20px 0; }

table { width: 100%; }
.results td{font-size:1.4em;}
td { padding: 10px 10px 10px 0; line-height: 1.3em; text-align: left; vertical-align: central;font-size:1.1em;  margin: 0 0 4px 0;}
	
.error {display:block;color:#ef1217;clear:both;}

label { font-size: 1.4em; margin: 0 0 4px 0; }

input, select, textarea { font-size: .85em; padding: 4px; margin: 0; border: 1px solid #525051; width: 300px; }
select { width: 300px; }
input:focus, select:focus, textarea:focus { border-color: #fdc741; }

input[type=radio] { width: 10%; display: inline-block; vertical-align: top; margin-top: 10px; }
.quiz label { font-size: .9em; width: 90%; display: inline-block; vertical-align: top; }

input[type=button], input[type=submit] { margin-top: 35px;margin-bottom:25px; font-weight: bold; font-size: 1.3em; background-color: #700017; color: #fff; cursor:pointer; padding: 15px 0; width: 250px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-decoration: none; display: inline-block; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; border: solid 1px #fff; }
input[type=button]:hover, input[type=submit]:hover { background-color: #fdc741; color: #700017; border: solid 1px #700017; }
input[type=button][disabled], input[type=submit][disabled] { margin-top: 35px; font-weight: bold; font-size: 1.3em; background-color:#ebebeb; color:#a1a1a1; }

footer { display: block; margin: 30px 0 0; background-color: #312f2f; overflow: hidden; color: #fff; }
  
footer a:link, footer a:visited { color: #fff; }

footer .foot-left { width: 57%; float: left; padding: 20px 3% 45px 0; }
footer .foot-right { width: 37%; float: left; padding: 15px 0 45px 3%; text-align: right; }                     
footer .foot-right a img { border: 0; text-decoration: none; }        

.footer { position: absolute; bottom: 0; width: 100%; height: 150px; }
    


@media only screen and (max-width: 905px) {

header { padding: 5px 0; }
.logo { width: 95%; } 

.container, .quiz { width: 90%; margin: 0 auto; padding: 20px 5%; }
.container .left, .container .right { width: 90%; padding: 0 5% 0 0; float: none; clear: both; }

.intro p { font-size: 1.2em; font-weight: normal; line-height: 1.4em; }
.step1 p, .step2 p, .step3 p { font-size: 1.5em; }	

label { font-size: 1.2em; margin: 0; }

}

@media only screen and (max-width: 700px) {

.stepimg img { width: 160px; }  
td { padding: 10px 0; border: 0; line-height: 1.3em; display: block; clear: both; }

}

@media only screen and (max-width: 400px) {

header { padding: 0; }
.logo img { margin-bottom: 0; }  
.stepimg img { width: 130px; }  
input, select, textarea, input[type=button], input[type=submit] { width: 100%; }
.intro p { font-size: .9em; font-weight: normal; line-height: 1.6em; }
.intro p.howto { margin: 15px 0 0 0; }
.step1, .step2, step3 { padding: 5px 0 5px 0; }
.step1 p, .step2 p, step3 p { font-size: 1.2em; }
.quiz { font-size: .8em; }	
.quiz label { font-size: .9em; width: 70%; display: inline-block; vertical-align: top; }
input[type=radio] { width: 20%; display: inline-block; vertical-align: top; margin-top: 10px; }
footer .foot-left { float: none; clear: both; width: 90%; padding: 30px 5% 0; }
footer .foot-right { float: none; clear: both; text-align: left; width: 90%; padding: 15px 5% 30px; }
.footer { min-height: 200px;}

}