html {
	height:100%;	
}

body {
		margin: 0px;
	padding: 0px;

	font-family: 'Patua One', serif;


background: rgba(254,253,241,1);
background: -moz-linear-gradient(top, rgba(254,253,241,1) 0%, rgba(255,237,209,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(254,253,241,1)), color-stop(100%, rgba(255,237,209,1)));
background: -webkit-linear-gradient(top, rgba(254,253,241,1) 0%, rgba(255,237,209,1) 100%);
background: -o-linear-gradient(top, rgba(254,253,241,1) 0%, rgba(255,237,209,1) 100%);
background: -ms-linear-gradient(top, rgba(254,253,241,1) 0%, rgba(255,237,209,1) 100%);
background: linear-gradient(to bottom, rgba(254,253,241,1) 0%, rgba(255,237,209,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefdf1', endColorstr='#ffedd1', GradientType=0 );
}


#copyright {
	    margin-right: 200px;	
}

#responseTexts {
	height: 160px;
	
}

.progress {
	display: block; 	
}

#appframe {
	
	position:fixed;
    top: 50%;
    left: 50%;
    width:980px;
    height:700px;
	margin-top: -350px; 
    margin-left: -490px; 
	-webkit-border-radius: 10px;
	border-radius: 10px;     
	-webkit-box-shadow:  2px 2px 10px 1px ;
	        box-shadow:  2px 2px 10px 1px ;



background: rgba(247,242,171,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(247,242,171,1) 0%, rgba(254,210,138,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(247,242,171,1)), color-stop(100%, rgba(254,210,138,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(247,242,171,1) 0%, rgba(254,210,138,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(247,242,171,1) 0%, rgba(254,210,138,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(247,242,171,1) 0%, rgba(254,210,138,1) 100%);
background: radial-gradient(ellipse at center, rgba(247,242,171,1) 0%, rgba(254,210,138,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f2ab', endColorstr='#fed28a', GradientType=1 );


}

.form-group {
	margin: 10px;
}

#main {
	padding: 20px;
	padding-top: 2px;
}

#homeView {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	text-align: center;
	height: 100%;
	
}

#speechBubble {
	background-image: url("../resources/speech-bubble.png");
	height: 90px;
	width: 90px;
	left: 200px;
	top: 15px;
	position: relative;
	display: none;
}

#button-restart {
	left:280px;
	top: 170px;
	position: absolute;
}

#button-another {
	left: 400px;
	top: 170px;
	position: absolute;
}

.overlaybutton {
	display: none;
}

#examinersBackground {
	background-color: #FFF;
		height: 420px;
	width: 900px;
		margin-left: auto;
	margin-right: auto;
}


#examinersView {

	background-image: url("../resources/interview-desk_trans.png");
	
	border: 1px solid #CCC;
		height: 420px;
	width: 900px;
	 position: relative;
}


#examiner1a {
	position: absolute;
	left: 70px;
	top: 15px;
}

#examiner1b {
	position: absolute;
	left: 70px;
	top: 15px;
}

#examiner2a {
	position: absolute;
	left: 320px;
	top: 42px;	
}

#examiner2b {
	position: absolute;
	left: 320px;
	top: 42px;	
}

#examiner3a {
	position: absolute;
	left: 600px;
	top: 45px;	

}

#examiner3b {
	position: absolute;
	left: 600px;
	top: 45px;	

}

#examinerSpeechText {
	color: #000;
	font-size: 18px;
	position: absolute;
	top: 340px;
	padding: 20px;
	text-align: center;
}

#responseTexts {
	padding: 40px;
	padding-top: 20px;
}
.response {
	cursor: pointer;
	height: 60px;
	padding: 8px;
	
}
.responseHighlight {
	background-color: #ccc;
}