@font-face {
	font-family: 'source_sans_probold';
	src: url('font/sourcesanspro-bold-webfont.eot');
	src: url('font/sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),
	url('font/sourcesanspro-bold-webfont.woff2') format('woff2'),
	url('font/sourcesanspro-bold-webfont.woff') format('woff'),
	url('font/sourcesanspro-bold-webfont.ttf') format('truetype'),
	url('font/sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg');
	font-weight: normal;
	font-style: normal;

}




@font-face {
	font-family: 'source_sans_proregular';
	src: url('font/sourcesanspro-regular-webfont.eot');
	src: url('font/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
	url('font/sourcesanspro-regular-webfont.woff2') format('woff2'),
	url('font/sourcesanspro-regular-webfont.woff') format('woff'),
	url('font/sourcesanspro-regular-webfont.ttf') format('truetype'),
	url('font/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
	font-weight: normal;
	font-style: normal;

}


div.main{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;
	width:100%;
	height:500px;
	background-color:#efefef;
	border-top: 4px solid #98a8d7;
	border-bottom: 4px solid #98a8d7;
	hyphens: auto;
	text-align: justify;
}

div.mainframe{
	position:absolute;
	width:720px;
	height:100%;

	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto;

	border:none;


}

body{
	font-family: 'source_sans_proregular', sans-serif;
	color:#777;
	font-size:18pt;
	line-height:1.5;
	padding:20px;

	background-color: #ccc;

}

h1{
	text-decoration:none;
	font-weight:bold;
	font-size:26pt;
	text-align:center;
}

input{
	font-family: 'source_sans_proregular', sans-serif;
	color:#777;
	font-size:18pt;
	background-color:#fff;
	border:2px solid #98a8d7;
}
input:focus{outline:3px solid #98a8d7;}
input:active{outline:3px solid #98a8d7;}




button{
	position:relative;
	font-size:18pt;
	font-family: 'source_sans_proregular', sans-serif;
	color: #777;
	border:3px solid #98a8d7;
	background-color:#fff;
}
button:focus{outline:none;}
button:active{outline:none;}


button.next{
	width:153px;
	height:48px;
	color:#777;
	font-size:18pt;

	border:none;
	background:transparent url("images/button.medium.svg");
}
button.next:hover{
	background:transparent url("images/button.medium.hover.svg");
}

button.grp_medium{
	font-size:40pt;
	font-weight:bold;
	color:#777;
	width:203px;
	height:78px;
	border:none;
	background: transparent url("images/button.big.svg");
}
button.grp_medium_sel{
	font-size:40pt;
	font-weight:bold;
	color:#777;
	width:203px;
	height:78px;
	border:none;
	background: transparent url("images/button.big.svg");
}

button.grp_small{
	border:2px solid #98a8d7;
	background-color:#FFF;
}
button.grp_small_sel{
	border:2px solid #98a8d7;
	background-color:#BBCCff;
}
button.grp_small:hover{
	background-color:#BBCCff;
}
button.grp_medium:hover{
	background-image:url("images/button.big.hover.svg");
}

button.misc{
	color:#777;
	background-color:#fff;
}
button.misc:hover{background-color:#BBCCff;}

div.testcontrols{
	position:fixed;
	top:0;
	left:0;
	padding:0;
	line-height:1.0;
	z-index:1000;
}

div.controls{
	position:absolute;
	height:100px;
	text-align:center;
	margin:auto;
	bottom:0;
	top:0;
	right:0;
	left:0;
	
}

p.controls{
	position:fixed;
	text-align:center;
	right:0;
	left:0;
	/*top:520px;*/
	bottom:50px;
}
/*
p.dispVoice{
	font-size:40pt;
	font-weight:bold;
}
*/
p.fbtext{

}

p.fbanswer{
	top:500px;
	font-size:40pt;
	font-weight:bold;
	text-align:center;
}

div.btn_group{
	white-space: nowrap;
}

div.voice{
	position:absolute;
	text-align:center;
	height:100px;
	margin:auto;
	left:0;
	right:0;
	top:0;
	bottom:0;
	font-size:40pt;
	font-weight:bold;
}



progress{width:500px;}
/* Background Colors  */
progress,                          /* Firefox  */
progress[role][aria-valuenow] {    /* Polyfill */
	background: #777 !important; /* !important is needed by the polyfill */
	border:2px solid #98a8d7 !important;
}
progress::-webkit-progress-bar {background: #777;}  /* Chrome */

/* Foreground Colors   */
progress {color: #BBCCff;} /* IE10 */
progress::-moz-progress-bar {background: #BBCCff;}  /* Firefox */
progress::-webkit-progress-value {background: #BBCCff;} /* Chrome */
progress[aria-valuenow]:before  {background: #BBCCff;}  /* Polyfill */




div.progress{
	position:absolute;
	text-align:center;
	left:0;
	right:0;
	bottom:30px;

}

img.testsound{
	position:relative;
	height:30px;
	width:auto;
	top:auto;
	bottom:auto;
	margin-top:auto;
	margin-left:auto;
}

img.next{
	background-image:url("images/button.medium.svg");
}

img.mpilogo1{
	position:fixed;
	width:400px;

	left:20px;
	bottom:20px;

}

table{
	position:absolute;
	width: 100%;
	left:-100px;
	color:#777;
	line-height:1.5;

	border:none;

}
td{
	nowrap: true;
}

div.contact{
	position:fixed;
	text-align: right;
	right:0;
	bottom:0;
	padding:20px;
}

a{
	color:#777;
	text-decoration: none;
}
a:hover{color:#999;}


/* BROWSER SUPPORT */
/* IE */