/* GENERAL CSS */
body {
	/* Text */
	font-size:		15px;
	text-align: 	justify;
    font-family: 	Helvetica, Arial, sans-serif;
    
    padding:	0px;
    margin:		0px;
    background-color: #EFEFEF;
}

h1{    
	font-size: 24px;
}

button {
	font: bold 13px Arial,sans-serif;
	color: rgba(0, 0, 0, 0.8);
	text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
	display: inline-block;
	outline: none;
	cursor: pointer;
	padding: 0.4em 2em 0.5em;
	border-radius: 0.3em;
	border: 1px solid;
	border-color: #bbbbbb #a2a2a2 #888888;
	background-color: #eee;
	background-image: linear-gradient(#eeeeee, #d4d4d4);
	box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.1), 0 0.1em 0.2em rgba(0, 0, 0, 0.3), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
	transition: all 100ms;
}

img {

}

input[type=submit]{
	font: bold 13px Arial,sans-serif;
	color: rgba(0, 0, 0, 0.8);
	text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
	display: inline-block;
	outline: none;
	cursor: pointer;
	padding: 0.4em 2em 0.5em;
	border-radius: 0.3em;
	border: 1px solid;
	border-color: #bbbbbb #a2a2a2 #888888;
	background-color: #eee;
	background-image: linear-gradient(#eeeeee, #d4d4d4);
	box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.1), 0 0.1em 0.2em rgba(0, 0, 0, 0.3), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
	transition: all 100ms;
}

.hideme{
	visibility: hidden;
}
.test{
	width:200px;
}

/* box for all pages */
div.contentContainer{
	position: relative;
	width: 			600px;
	height: 		610px;
	
	padding-top: 	 0px;
	padding-left: 	 0px;
	padding-right: 	 0px;
	padding-bottom:  0px;
	margin: 		 0px;
	
	border-width: 	 4px;
	border-style: 		solid;
	border-color:		#BABABA;
	background-color:	#fafafa;
}

div.headlineContainer{
	position: absolute;
	top: 		 20px;
	left: 		 20px;
	right:		 20px;
	height: 	 40px;
}

div.instructionsContainer{
	position:absolute;
	top:		60px;
	bottom:		60px;
	left:		20px;
	right:		20px;
	border:		 0px;
}

div.footerContainer{
	position:absolute;
	bottom: 	20px;
	left: 		20px;
	right:		20px;
	height:		40px;
}

div.buttonsContainer{
}

div.left{
	position: absolute;
	left: 0px;
}

div.right{
	position: absolute;
	right: 0px;
}

div.up{
	position: absolute;
	top: 0px;
}

div.down{
	position: absolute;
	top: 0px;
}

div.middleConatainer{
	position: absolute;
	left:40px;
	right:40px;
}

input[type="radio"] {
     float: none;
}

/* START BUTTON */
.middleButton{
	position: absolute;
	top:			185px;
	left:			150px;
	right:			150px;
	width:			250px;
	height:	 		 80px;
}

/* PARTICIPANT + CATEGORY*/
.instructParticipant{
	position:	absolute;
	top: 		320px;
}

.instructCategory{
	position:	absolute;
	top: 		340px;
}

.introImg{
	position: absolute;
	top:	     20px;
	left: 		  0px;
	right:		  0px;
	width: 		99.6%;
	height:		300px;
	border:none;
}
.intro1Img{
	position: absolute;
	top:	     20px;
	left: 		  0px;
	right:		  0px;
	width: 		99.6%;
	height:		320px;
	border:none;
}

.intro2Img{
	position: absolute;
	top:	     20px;
	left: 		  0px;
	right:		  0px;
	width: 		99.6%;
	height:		320px;
	border:none;
}

/* ATTRIBUTES*/
.attributeImg {
	position: absolute;
	top:		 20px;
	left:		  0px;
	right:		  0px;
	width:		99.6%;
	height:		170px;
}

#attribInstructions{
	position: absolute;
	bottom:	   10px;
	left: 		0px;
	right: 		0px;
}

/* QUESTION */
#questionInstructionsContainerId{
	position: absolute;
	top:	   	20px;
	left: 		 0px;
	right: 		 0px;
}

#questionContainerId{
	position: absolute;
	top:		100px;
	left:		  0px;
	right:		  0px;
 	height: 	320px;

 	background: white;
}

#questionContainer2Id{
	position: absolute;
	top:		60px;
	left:		  0px;
	right:		  0px;
 	height: 	370px;

 	background: white;
}

.questionResponseContainer{
	position:absolute;
	bottom:		60px;
	left:		20px;
	right:		20px;
	height:		60px;
}

/* POST QUESTION */
.postQuestionImg {
	position: absolute;
	top:	   	 20px;
	left: 		  1px;
	right:		  1px;
	width:		 99%;
	height:		130px;
}

.postQuestionContainer {
	position:absolute;
	top:		 5px;
	bottom:		20px;
	left:	  	 0px;
	right:		 0px;
	font-size: 	14px;
	text-align: left;
}

.postQuestionContainer legend{
	margin-bottom: 	35px;
	margin-top: 	35px;
	font-size:		14px;

}

.postQuestionContainer textarea{
	width:			98%;
	margin-top: 	10px;
	font-size:		14px;
	border-color: #ECECEC;
	overflow-y:		scroll;
	resize: 		none;
	text-align: 	justify;
    font-family: 	Helvetica, Arial, sans-serif;
}

.postQuestionContainer input[type="radio"]{
	/*width:		44px;*/
}

.justifyAnswer {
	font-size: 16px;
}

.postQuestionContainer div.input.textarea.required label{
	font-size:		14px;
	padding-bottom: 20px;
}

.postQuestionContainer fieldset{
	margin-bottom:	20px;
	margin-top:		20px;
	padding-left:	10px;
	padding-top: 	10px;
	padding-bottom: 10px;
	border: 1px groove  white;
}

.postQuestionContainer label{
	font-size:		13px;
    font-family: 	Helvetica, Arial, sans-serif;
}

.postQuestionContainer legend{
	margin-top:		0px;
	margin-bottom: 	0px;
}

#confidenceId{
	position: relative;
	margin-top: 	30px;
	margin-left: 	3px;
	font-size:		13px;
    font-family: 	Helvetica, Arial, sans-serif;
}

#productLikerId{	
	position: relative;
	margin-top: 	30px;
	margin-left: 	3px;
	font-size:		13px;
    font-family: 	Helvetica, Arial, sans-serif;
}
#bacteriophobiaId{
	position: relative;
	margin-top: 	30px;
	margin-left: 	 3px;
	font-size:		13px;
    font-family: 	Helvetica, Arial, sans-serif;
}

#explainCleanlinessId{
	position: relative;
	margin-top: 	 0px;
	margin-right: 	 0px;
	margin-bottom: 	 0px;
	margin-left: 	 0px;
	font-size: 		11px;
	float:right;
	color:#8E001C;
}

#moderate{
	position: relative;
	margin-left:	110px;
	font-size:		14px;
    font-family: 	Helvetica, Arial, sans-serif;
}

#totally{
	position: relative;
	margin-left:	135px;
	font-size:		 14px;
    font-family: 	Helvetica, Arial, sans-serif;
}

/* SCATTERPLOT Test */
#scatterplotTestInstructionsContainerId{
	position: absolute;
	top:	   	20px;
	left: 		 0px;
	right: 		 0px;
}

#scatterplotTestContainerId{
	position: absolute;
	top:		110px;
	left:		  0px;
	right:		  0px;
 	height: 	310px;
 	background: white;
}

#scatterplotResponseContainerId{
	position:absolute;
	bottom:		 5px;
	left:		 0px;
	right:		 0px;
	height:		60px;
}

/* TABLE TEST */
#tableTestInstructionsContainerId{
	position: absolute;
	top:	   	20px;
	left: 		 0px;
	right: 		 0px;
}

#tableTestContainerId{
	position: absolute;
	top:		 90px;
	left:		  0px;
	right:		  0px;
 	height: 	310px;
 	background: white;
}

#tableTestResponseContainerId{
	position:absolute;
	bottom:		 5px;
	left:		 0px;
	right:		 0px;
	height:		60px;
}

/* QUESTIONNAIRE */
#questionnaireInstructionsContainerId{
	position: absolute;
	top:	   	20px;
	left: 		 0px;
	right: 		 0px;
}

#questionnaireContainer{
	position:absolute;
	top:		90px;
	bottom:		10px;
	left:		 0px;
	right:		 0px;
	font-size:	14px;
	text-align: left;
}

#questionnaireContainer textarea{
	width: 			99%;
	resize: 		none;
	overflow-y: 	scroll;
	border-color: #ECECEC;
	margin-top: 	 5px;
	font-size:		14px;
	text-align: 	justify;
    font-family: 	Helvetica, Arial, sans-serif;
}

#questionnaireContainer fieldset{	
	padding-left:	10px;
	padding-right:	10px;
	padding-top: 	10px;
	padding-bottom: 10px;
	border: 1px groove  white;
}

#questionnaireContainer input[type=string]{
	width:140px;
}

#questionnaireContainer label{

}

#questionnaireContainer select{
	width:100%;
}

/* END OF STUDY */
#endOfStudyInstructionsContainer{
	position: absolute;
	top:	   		 75px;
	left: 		 	  0px;
	right: 		 	  0px;
	height: 		200px;
	border-width: 	  1px;
	padding-left: 	 40px;
	padding-right:	 40px;
	padding-top:	 30px;
	padding-bottom:	 30px;
	border-style: solid;
	border-color: 		#566E78;
	background-color: 	#d5d5d5;
}

#mTurkIdContainer{
	position: absolute;
	border-width: 	  2px;
	height: 		 50px;
	font-size: 		 30px;
	top: 			100px;
	left:			 40px;
	resize:			none;
    width:			auto;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
}


#errorCookiesId{
	position: absolute;
	top:	   		 75px;
	left: 		 	  0px;
	right: 		 	  0px;
	height: 		200px;
	border-width: 	  1px;
	padding-left: 	 40px;
	padding-right: 	 40px;
	padding-top: 	 30px;
	padding-bottom:  30px;

	border-style: 		solid;
	border-color:		#566E78;
	background-color:	#d5d5d5;
}

#errorWindowSizeId{
	position: absolute;
	top:	   		 75px;
	left: 		 	  0px;
	right: 		 	  0px;
	height: 		200px;
	border-width: 	  1px;
	padding-left: 	 40px;
	padding-right: 	 40px;
	padding-top: 	 30px;
	padding-bottom:  30px;

	border-style:		solid;
	border-color:		#566E78;
	background-color:	#d5d5d5;
}

.error-message{
	font-size: 12px;
	color:#8E001C;
}

#errorWrongDeviceId{
	position: absolute;
	top:	   		 75px;
	left: 		 	  0px;
	right: 		 	  0px;
	height: 		200px;
	border-width: 	  1px;
	padding-left: 	 40px;
	padding-right: 	 40px;
	padding-top: 	 30px;
	padding-bottom:  30px;

	border-style:		solid;
	border-color:		#566E78;
	background-color:	#d5d5d5;
}

.radioError{
	position: absolute;
	top: 		24px;
	right: 		30px;
	font-size:	12px;
	color:		#8E001C;

}

.message {
	font-size:	24px;
	padding: 	10px;
	clear: 		both;
	color: 		#fff;
	background: #c43c35;
	border: 1px solid rgba(0, 0, 0, 0.5);
	background-repeat: repeat-x;
	background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
	background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
	background-image: -moz-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
	background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
	background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
	background-image: linear-gradient(top, #ee5f5b, #c43c35);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

.highlight:active,
.highlight:hover{
	background: #FFFF33;
}

.floatleft{
	float: left;
}

.idContainer{
	position:absolute;
	background: 	white;
	top:100px;
	left:100px;
	height:300px;
	width: 300px;
	font-size: 60px;
	color: #424242;
	text-align: 	center;
	border: 4px solid #424242;
}



/** Tables **/
table {
 /* margin-left:	10px;
    margin-right:	10px;
 	margin-top:		90px;
 	margin-bottom:	60px; */
 	margin: 0 auto 0 auto;
 	padding-top: 40px;
	clear: both;
	background: white;
	border-spacing: 0px;
	text-align: center;
}

th {
	padding: 20px;
	border:0;
	border-bottom:2px solid #333;
}

table tr td {
	padding: 20px;
	/*text-align: center;*/
	vertical-align: top;
	border-bottom:2px solid #333;
}

/* DECORATIONS */
.decorateBackground{
	background-image: url('../img/neutral.jpg');
	border: 4px solid #BABABA;
	/*background-repeat: repeat-x, repeat-y;*/
}

.startButton {
	font-size:	 	 		40px;
	border-width: 	 	 	 2px;
    -webkit-border-radius:	 8px;
    -moz-border-radius:		 8px;
    border-radius: 			 8px;
    color: 					#424242;
    -webkit-box-shadow:    	0 8px 0 #424242, 0 15px 20px rgba(0, 0, 0, .35);
    -moz-box-shadow: 		0 8px 0 #424242, 0 15px 20px rgba(0, 0, 0, .35);
    box-shadow: 			0 8px 0 #424242, 0 15px 20px rgba(0, 0, 0, .35);
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
    -moz-transition: -moz-box-shadow .1s ease-in-out;
    -o-transition: -o-box-shadow .1s ease-in-out;
    transition: box-shadow .1s ease-in-out;
}

.startButton:hover, .startButton:focus {
   	background-color: #9EADB2;
   	background-image: none;
    text-shadow: 0 -1px 1px rgba(133, 133, 133, .9), 0 0 5px rgba(255, 255, 255, .8);
}

.startButton:active, {
    -webkit-box-shadow:	0 8px 0 #3b3b3b, 0 12px 10px rgba(0, 0, 0, .3);
    -moz-box-shadow:	0 8px 0 #3b3b3b, 0 12px 10px rgba(0, 0, 0, .3);
    box-shadow:    		0 8px 0 #3b3b3b, 0 12px 10px rgba(0, 0, 0, .3);
}

.loader{
	position: absolute;
	left:			210px;
	top:			130px;
	width: 			500px;
	height: 		610px;
	background-repeat: no-repeat;
	background-image: url('../img/delay.gif');
	/*background-position:10px;
	background-color: yellow;*/
	/*-moz-opacity:0.001;filter:alpha(opacity=10);*/
	/*color: #F5F5F5;*/
	color :#8E001C;
}

.waitMessage{
	font-size: 24px;
	color:#8E001C;

}

.testContainer{
	width:600px;
}