#content {
   /* make text not selectable */
   -webkit-user-select: none;  /* Chrome all / Safari all */
   -moz-user-select: none;     /* Firefox all */
   -ms-user-select: none;      /* IE 10+ */
   user-select: none;          /* Likely future */  
}
.lnk {
   text-decoration: underline;
}
.result { 
   margin-left: 20px;
   padding: 6px;
   min-height: 24px;;
}

.odd-line td {
      background-color: #eee;
   }
   .even-line td {
      background-color: #fcfcfc;
   }

blockquote {
   font-size: 1em;
}

/* ********************************************************************** */

/* START INFORMATION TYPES */

/* RB: ik weet niet wat dit doet */
.box {
   border: 1px solid;
   border-radius: 3px;
   padding: 6px;
   margin: 10px;
   float: left;
   clear: both;
}

/* The initial pile of unsorted cards */
#cardSlots_informationtypes {
   position: absolute;
   width: 1px;
   height: 1px;
   background: #fff;
   left: 100px;
}

/* Individual cards and slots: de target voor de drop-down */
#cardSlots_informationtypes div {
   float: left;
   position: relative;
   left: 100px;
   width: 100px;
   height: 60px;
   margin-top: 10px;
   padding-bottom: 40px;
   border-radius: 80px !important;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
   background-color: #ccc;
   border: none;
}

/* container voor de plaatjes */
#cardPile_informationtypes {
   width: 100px;
   height: 560px;
}
/* placeholder voor de individuele plaatjes */
#cardPile_informationtypes div {
   float: left;
   width: 110px;
   height: 60px;
   margin-top: 10px;
   padding-bottom: 40px;
   cursor: move;
}

/* RB: ik weet niet wat dit doet */
#questions_informationtypes {
   position: absolute;
   width: 140px;
   padding: 10px;
   margin: 10px;   
   background: #fff;
   float: left;
}

/* RB: ik weet niet wat dit doet. Lijkt een duplicaat van #cardSlots_informationtypes div */
#questions_informationtypes div {
   float: left;
   padding-bottom: 40px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
   margin-top: 10px;
}

/* placeholder voor de individuele antwoorden rechts */
div#questionContainer_informationtypes {
   float: left;
   width: 250px;
   height: 70px;
   margin-left: 25px;
   margin-top: 5px;
   padding: 10px;
   background-color: #e2d9d7;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
   border-radius: 5px !important;
}

/* END INFORMATION TYPES */

/* ********************************************************************** */

/* START SCIENTIFIC OR NOT  */

#startzone{
   position: relative;
   border-radius: 10px;
   background-color: #eee;
   margin-top: 0px;  
   margin-left: 0px; 
   margin-right: 10px; 
   width: 398px;
   height:445px; 
   padding: 8px;
   border: 1px solid #ccc;
}
.dropzone {
   min-height: 300px;
   max-width: 300px;
}
.dropWetenschappelijkLayout{
   background-color: #00b969;
}
.dropOpinieLayout{
   background-color: #f9e7b6;
   /*border: 2px solid #cc0000;*/
}
.cardLayout{
   width: 120px; 
   min-height: 100px;
   z-index: 100;
   text-align: center;
   border-radius: 4px;
   border: 1px solid #ccc !important;
   margin: 0px 10px 10px 0 !important; 
   cursor: move;
   background-color: #eee;
   font-size: 10.5pt;
}
.cardLayout > span {
   padding-top: 5px;
}
#dropzoneWetenschappelijk,#dropzoneOpinie { 
   position: relative;
   margin-right: 10px;
   width: 320px;
   min-width: 300px; 
   min-height: 445px;
   padding: 0.5em; 
   border-radius: 10px;
   border: 1px solid #ccc;
}

.headLabel {
   width: 470px;
}
.wtLabel, .ptLabel {
   width: 290px;
  
/*   margin: 10px; */

   }

/* END SCIENTIFIC OR NOT  */

/* ********************************************************************** */



/* ********************************************************************** */

/* START STYLES INFORMATIONNEED */

   #questionContainer {
      display: none;
   }
   .success {
      color: #00B969;
   }
   .error{
      color: #cc0000;
   }
   
   /* reserve some width for the glyphicons */
   .glyphicon {
	  top: 4px;
      width: 14px;
   }
   
   /* show result next to submit button */
   #explanation {
      margin-left: 20px;
      font-size: 14px;
   }   

/* END STYLES INFORMATIONNEED */

/* ********************************************************************** */


/* START 4WS / ARTICLE REFERENCE */

/* RB: niet precies duidelijk wat deze doet, wel noodzakelijk
	placeholder voor de vragen en slots links: .cardSlots div */
.cardSlots {
   position: absolute;
   float: left;
   width: 1px;
   height: 1px;
}


/* container voor vragen en slots: met border */
.cardSlots div {
   float: left;
   width: 557px;
   height: 39px; /* hoogte van een item */
   margin: 10px 10px 10px 0px;
   padding-bottom: 40px;
   border: 1px solid #777; 
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
	}
	.cardSlots div.hovered {
	  background: #aaa;
	}
	.cardSlots.4WS div { height: 46px; }
	.cardSlots.articlereference div { height: 37px; padding-bottom: 10px; } /* beetje experimenteren met height en padding-bottom */
   .cardSlots.findauthorcredentials div { height: 67px;padding-bottom: 10px; }

/* RB: niet precies duidelijk wat deze doet, wel noodzakelijk
	placeholder voor de antwoorden rechts: .cardPile div */
.cardPile {
   position: relative;
   left: 570px;
   width: 1px;
   height: 510px;  /* de hoogte van alle items opgeteld: bepaalt de y-waarde waarbinnen gesleept kan worden */ 
	}
	.cardPile.4WS { height: 550px; }
	.cardPile.articlereference { height: 490px; }
   .cardPile.findauthorcredentials { height: 320px; }



/* placeholder voor de individuele vragen */
div.questionContainer {
   float: left;
   width: 250px;
   height: 67px;
   margin: 0;
   padding: 6px 10px 6px 10px;
   background-color: #00b969;
   border: 0px;
   border-right: 1px solid #00b969;
   border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;
}
.4WS div.questionContainer { height: 46px; }
.articlereference div.questionContainer { height: 31px; } /* beetje experimenteren met height en padding-bottom */
.findauthorcredentials div.questionContainer { height: 62px; } /* beetje experimenteren met height en padding-bottom */

/* placeholder voor de individuele antwoorden rechts */
.cardPile div {
   float: left;
   width: 265px;
   height: 34px;
   margin: 10px 10px 10px 10px;
   padding: 5px 10px 40px 10px;
   font-size: 13px;
   border: 1px solid #777; 
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
   cursor: move;
   background-color: #e2d9d7;
	}
	.cardPile.4WS div { height: 46px; }
	.cardPile.articlereference div { height: 32px; padding-bottom: 10px; } /* beetje experimenteren met height en padding-bottom */
   .cardPile.findauthorcredentials div { height: 32px; }

/* RB: niet precies duidelijk wat deze doet, lijkt niet noodzakelijk */
.questions {
   position: absolute;
   height: 250px;
   padding: 10px;
   margin: 10px;   
   background: #fff;
   float: left;
}


/* RB: niet precies duidelijk wat deze doet, lijkt niet noodzakelijk */
.questions div {
   width: 558px;
   height: 46px;
   float: left;
   padding-bottom: 40px;
   border: 1px solid #777; 
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
   margin: 10px 10px 10px 10px;
}


#card1.correct, #card2.correct, #card3.correct,
#card4.correct, #card5.correct, #card6.correct,
#card7.correct, #card8.correct, #card9.correct { 
   background-image: url("../img/correct.png");
   background-repeat: no-repeat;
   background-position: right bottom;
}

#card1.wrong, #card2.wrong, #card3.wrong,
#card4.wrong, #card5.wrong, #card6.wrong,
#card7.wrong, #card8.wrong, #card9.wrong { 
   background-image: url("../img/wrong.png");
   background-repeat: no-repeat;
   background-position: right bottom;
}

/* END 4WS / ARTICLE REFERENCE */

/* ********************************************************************** */

/* START ONLINE TOOL PARAPHRASE */

/* de 2 div's die de verschillen laten zien in de tekst */
.diff { 
	width: 90%;
	margin-bottom: 1em;
	padding: 5px; 
	min-height: 2em;
	font-size: .9em;
	border: 1px solid #00b969; 
}

/* de "plain-text look" */
#diff {
	border: 3px double #00b969; 
}

/* END ONLINE TOOL PARAPHRASE */

/* ********************************************************************** */

/* START FRUITQUIZ */

/* ----- slot machine ----- */
.slot-wrapper {
	width: 600px;
	height: 200px;
	padding: 10px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00b969+0,334f53+30,002328+49,334f53+70,00b969+99 */
	background: #00b969; /* Old browsers */
	background: -moz-linear-gradient(top,  #00b969 0%, #334f53 30%, #002328 49%, #334f53 70%, #00b969 99%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b969), color-stop(30%,#334f53), color-stop(49%,#002328), color-stop(70%,#334f53), color-stop(99%,#00b969)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #00b969 0%,#334f53 30%,#002328 49%,#334f53 70%,#00b969 99%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #00b969 0%,#334f53 30%,#002328 49%,#334f53 70%,#00b969 99%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #00b969 0%,#334f53 30%,#002328 49%,#334f53 70%,#00b969 99%); /* IE10+ */
	background: linear-gradient(to bottom,  #00b969 0%,#334f53 30%,#002328 49%,#334f53 70%,#00b969 99%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b969', endColorstr='#00b969',GradientType=0 ); /* IE6-9 */
	border-radius: 12px;
	-webkit-box-shadow: 0px 0px 4px 0px #00b969; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
	box-shadow: 0px 0px 4px 0px #00b969;
	}
	.slot {
		background: url("http://www.eur.nl/fileadmin/ASSETS/UB/Training___Support/e-learning/orientation/reel.jpg") #fff repeat-y 0 0;
		width: 180px;
		height: 195px;
		float: left;
		margin-right: 7px;
		margin-left: 7px;
		border: 2px solid #fde293;
		border-radius: 12px;
	}
	.motion {
		background: url("http://www.eur.nl/fileadmin/ASSETS/UB/Training___Support/e-learning/orientation/reel_blur.jpg") #fff repeat-y;
	}

/* start button */
.start_button {
	width: 50px;
	margin: 0 auto;
	margin-top: 1.5em;
	}
	.start_button-circle {
		width: 100%;
		height: 0;
		padding-bottom: 100%;
	    border-radius: 50%;
		border: 5px solid #e2d9d7;
	    overflow: hidden;
	    background: #00b969; 
	    box-shadow: 0 0 3px #e2d9d7;
	}
	.start_button-circle:hover {
		background: #002328;
	}
	.start_button a {
	    display: block;
		float: left;
		width: 100%;
		padding-top: 50%;
	    padding-bottom: 50%;
		line-height: 1em;
		margin-top: -0.5em;
		text-align: center;
		color: #e2eaf3;
	    font-size: 1em;
	    font-weight: bold;
	    text-decoration: none;
	}

/* correct / wrong buttons */
   .btn_no {
      width: 100px;
      height: 50px;
      font-size: 1.1em;
      letter-spacing: 1px;
      background-color: #ba1426;
      color: #fff;
      cursor: pointer !important;
   }
   .btn_no:disabled {
      opacity: 0.7;
      filter: alpha(opacity=70);
   }
   .btn_no:focus, .btn_no:hover {
      opacity: 1;
      filter: alpha(opacity=100);
   }
   .btn_yes {
      width: 100px;
      height: 50px;
      font-size: 1.1em;
      letter-spacing: 1px;
      background-color: #53bd3a;
      color: #fff;
      cursor: pointer !important;
   }
	.btn_yes:disabled {
		opacity: 0.7;
		filter: alpha(opacity=70);
	}
	.btn_yes:focus, .btn_yes:hover {
		opacity: 1;
		filter: alpha(opacity=100);
	}


/* ----- feedback ----- */

#feedbackContainer {
	width: 630px;
	margin-top: 3em;
	text-align: center;
	}
	.feedback {
		width: 95%;
		padding: 10px;
	}
	}
	#endinfo {
		font-size: 1.1em;
		font-weight: bold;
		letter-spacing: 1px;
	}
	/* background colors voor result */
	.fruitquiz_correct {
		display: block;
		color: #fff;
		background-color: #53bd3a;
	}
	.fruitquiz_incorrect {
		display: block;
		color: #fff;
		background-color: #ba1426;
	}
	/* background color for result explanation */
	.showinfo {
		display: block;
		background-color: #e2d9d7;
	}
	

/* ----- misc ----- */

/* intro tekst */
.hideinfo {
	display: none;
}

/* vraag n van de x vragen */
#aantal {
	display: none;
	}
	.showaantal {
		display: block!important;
	}
#aantal_vragen{
   margin-top: 10px;
}	
/* deze staat helemaal onderaan de pagina 
	de vraag is of je deze wilt gebruiken: hij staat nu uit
*/
#score {
	display: none;
	}
	.container {
	margin: 0 auto;
	width: 266px;
	}

/* END FRUITQUIZ */



/* START CREDIBILITY: WHAT IS THE CREDIBILITY */
#contentCred {
   max-width: 980px;
   border: 1px solid #ccc; 
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
   background-color: #fcfcfc;
}
.cardSlotsCred {
   position: absolute;
   float: left;
   width: 980px;
   height: 150px;
   top: 350px;

   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d4ea9f+0,8ab66b+38,30722f+100 */
   background: rgb(212,234,159); /* Old browsers */
   /* IE9 SVG, needs conditional override of 'filter' to 'none' */
   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q0ZWE5ZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM4JSIgc3RvcC1jb2xvcj0iIzhhYjY2YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMDcyMmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
   background: -moz-linear-gradient(left,  rgba(212,234,159,1) 0%, rgba(138,182,107,1) 38%, rgba(48,114,47,1) 100%); /* FF3.6-15 */
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(212,234,159,1)), color-stop(38%,rgba(138,182,107,1)), color-stop(100%,rgba(48,114,47,1))); /* Chrome4-9,Safari4-5 */
   background: -webkit-linear-gradient(left,  rgba(212,234,159,1) 0%,rgba(138,182,107,1) 38%,rgba(48,114,47,1) 100%); /* Chrome10-25,Safari5.1-6 */
   background: -o-linear-gradient(left,  rgba(212,234,159,1) 0%,rgba(138,182,107,1) 38%,rgba(48,114,47,1) 100%); /* Opera 11.10-11.50 */
   background: -ms-linear-gradient(left,  rgba(212,234,159,1) 0%,rgba(138,182,107,1) 38%,rgba(48,114,47,1) 100%); /* IE10 preview */
   background: linear-gradient(to right,  rgba(212,234,159,1) 0%,rgba(138,182,107,1) 38%,rgba(48,114,47,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4ea9f', endColorstr='#30722f',GradientType=1 ); /* IE6-8 */

}


/* container voor vragen en slots: met border */
.cardSlotsCred div {
   /*position: absolute;*/
   float: left;
   width: 980px;
   padding-top: 30px;
   padding-bottom: 30px;
   border: 1px solid #777; 
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
  /* border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;*/
   /*background-color: red;*/
   }
/*
   .cardSlotsCred div.hovered {
     background: #31a231;
   }*/
   

.cardPileCred {
   /*left: 10px;*/
   width: 980px; /* de breedte van alle items opgeteld: bepaalt de x-waarde waarbinnen gesleept kan worden */ 
   height: 100px;  /* de hoogte van alle items opgeteld: bepaalt de y-waarde waarbinnen gesleept kan worden */ 
   }
   .cardPileCred.credibility { height: 320px; } /* needed for positioning the submit/reset buttons */


/* placeholder voor de individuele vragen */
div.questionContainerCred {
   position: relative;
   float: left;
   width: 140px;
   height: 87px;
   margin: 0px;
   border: 0px;
  /* border-top-right-radius: 0px;
   border-bottom-right-radius: 0px;*/
}


/* placeholder voor de individuele antwoorden rechts */
.cardPileCred div {
   float: left;
   width: 100px; /* width of dragged item */
   height: 126px;
   font-size: 13px;
   border: 1px solid #ddd; 
   -moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px;
   /*cursor: move;*/
   background-color: #fff;
   margin-left: 15px;
   margin-right: 15px;
   padding: 4px;
   }



#cardCred1.correct, #cardCred2.correct, #cardCred3.correct,
#cardCred4.correct, #cardCred5.correct, #cardCred6.correct,
#cardCred7.correct, #cardCred8.correct, #cardCred9.correct { 
   background-image: url("../img/correct.png");
   background-repeat: no-repeat;
   background-position: right bottom;
}

#cardCred1.wrong, #cardCred2.wrong, #cardCred3.wrong,
#cardCred4.wrong, #cardCred5.wrong, #cardCred6.wrong,
#cardCred7.wrong, #cardCred8.wrong, #cardCred9.wrong { 
   background-image: url("../img/wrong.png");
   background-repeat: no-repeat;
   background-position: right bottom;
}



#cardCred1.extra-info, #cardCred2.extra-info, #cardCred3.extra-info,
#cardCred4.extra-info, #cardCred5.extra-info, #cardCred6.extra-info,
#cardCred7.extra-info, #cardCred8.extra-info, #cardCred9.extra-info { 
   background-image: url("../img/extra_info.png");
   background-repeat: no-repeat;
   background-position: left bottom;
}



/* END CREDIBILITY: WHAT IS THE CREDIBILITY */