/* Vindpunt.css  */
/* roboto ophalen en gebruiken */
@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,latin-ext);

body {  
  font-family: 'Verdana', sans-serif;
  height:100%; 
  background: radial-gradient(#73b4ff, #025fcb); 
  background: radial-gradient(#def, #abf);  
  color:#ccc;  
 /* background: url(media/ag03.png) no-repeat center;     */
} 

/* de pagina heeft een beperkte breedte, net iets smaller dan een telefoon */  
.pagina  { 
  width:100%; 
  height:100%; 
  margin-left:auto; 
  margin-right:auto; 
}

/* positie van zoekinvoer en presentatie van het lemma */
.ingavepos { 
  margin-top:20px;  
  margin-left:1%; 
  margin-right:1%;
  width:  98%;
  height: 46px; 
  background-color:white; 
  border-radius: 6px 6px 6px 6px;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.50 ); 
}


/* het inputveld van de zoekfrase komt binnen de ingavepos */ 
.zoekinvoer  { 
  display:inline-block;
  height:44px;   
  width : 80%;
  margin-left:2px; 
  font-size:1em;
  padding-left:0.5em;     
  color: rgba(74,74,74,50);   
  border-style:none;   
  border-radius: 6px; 
  cursor:pointer;     
}

/* vindknop en stopknop rechts naast het invoerveld dan wel presentatieveld */
.vindknop,
.stopknop { 
  float: right;
  margin-top: 3px;
  margin-right: 3px;
  height: 40px;
  width : 15%;  
  border: 1px solid #d24d00;
  border-radius: 4px;
  border-style: none; 
  color: white; 
  background: #ff841b;
  font-size: 1em;
  cursor: pointer; 
}


/* Lemma zoals gepresenteerd */
.lemma {
  float:left;
  width:260px;
  margin-top: 8px;
  margin-left: 8px; 
  font-size:1.2em;  
  font-weight:900;
  color: #ff841b; 
  background: white; 
} 

/* alle respons op een regel tussen zoekinvoer en lijstbox */
.respons,
.start { 
  position: absolute;
  top: 80px;
  height: 40px;
  padding-top:6px;  
  width: 90%;
  margin-left:5%; 
  margin-right:5%;
  text-align:center; 
  color: white;
  border-style: none;  
  border-radius: 14px; 
  background:#ff841b;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.25 );
  animation: fade 4s;
  opacity:0;   
}


/* alle respons op een regel tussen zoekinvoer en lijstbox */
.start { 
   animation: fade 8s;
    
}





/* alles behalve zoekinvoer vind plaats in de lijstbox */
.lijstbox {
  position:absolute; 
  top: 135px;
  margin-left: auto; 
  margin-right: auto;
  padding-left: 1%;
  padding-right: 1%;
  width:  95%;  
  border: 1px solid white;
  color:white; 
  background:#2a76d0;
  opacity:90%;
  border-radius: 6px;
  box-shadow: 0px 12px 40px rgba(47,124,214,0.54); 
}

.jaknop,
.neeknop { 
  width:120px;  
  height: 34px;
  margin: 15px;
  margin-bottom:15px;
  border-style: none; 
  border-radius: 4px;
  font-size: 1em;
  color:white; 
  cursor:pointer;   
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.50 ); 
}

.jaknop { 
  float:left;  
  background:green;
}

.neeknop { 
  float:right;
  background:red;
}

#voetregel {   
  position: fixed;
  bottom: 10px; 
  width: 320px; 
}
#vervangerpos { 
  margin-top:10px; 
  width:  98%;
  height: 46px; 
  margin-bottom:5px;
  margin-left: 1%;
  border-radius: 6px 6px 6px 6px; 
  box-shadow: 0px 12px 40px rgba(47,124,214,0.54);
  background-color:white;     
}
.vervangerinvoer  {
  display:inline-block;
  height:44px; 
  width : 81%; 
  padding-left: 3px;
  margin-left: 2px;
  color:grey;
  border-style:none; 
  border-radius: 6px; 
  cursor:pointer;  
  font-size:1em;
}

.vervangerknop {  
  float:right;
  margin-right:3px;
  margin-top:3px;
  height:38px; 
  width:75px; 
  border-style:none; 
  border-radius: 4px;
  color:white; 
  font-size: 1em;
  cursor:pointer;
  border:1px solid #d24d00;
  background-color:#ff841b; 
}

/* scheidingsstreep tussen de context */
i {opacity:0.8;}
hr { size:16px; margin-right:6px; margin-bottom:-1.3em; margin-top:0.1em; opacity:0.8;}
.context { float:right; margin-right:6px; margin-top:4px; font-weight:lighter; font-size:80%; }
/* andere kleur voor nieuw ingevoerd */
.dim {opacity:0.5}
.oranje {background: #ff841b; }
.aantal {font-size:80%; color:white; text-align:left; padding-left:0px; opacity:0.5 ;} 
	  

.infoteken {
  display:inline-block; 
  margin-left:auto; 
  margin-right:auto; 
  animation: fadeout 5s;
  opacity:0;
}

/*  fade in-en-uit effect  */ 
@keyframes fade {
  0% {opacity:0; }
  50% {opacity:1; }  
  100% {opacity:0; }
}

@keyframes fadein {
  0% {opacity:0; }
  40% {opacity:0.5; } 
  80% {opacity:0.9; }   
  100% {opacity:1; }
}

@keyframes fadeout {
  0% {opacity:1; }
  40% {opacity:0.9; } 
  80% {opacity:0.5; }   
  100% {opacity:0; }
}












/* verwijzeropmaak */

a    {
	display : block;
	text-align:center;
	color: white; 
	text-decoration:none; 
	cursor:pointer;
	margin-bottom : 10px;
}
a:link    {
	color: white; 
	text-decoration:none; 
	cursor:pointer;
	}
a:visited {
	color: white; 
	text-decoration:none; 
	cursor:pointer;
	}
a:hover   {
	color: #00afca; 
	text-decoration: none;
	cursor:pointer;
	}



#commentbox {
  position:absolute;
  display:inline-block;
  top:500px;
  left:10%;
  width:80%;
}

.commentinvoer {
  height:44px;
  width:500px;
  padding-left: 6px;
  margin-left: 2px;
  color:grey;
  border-style:none;
  border-radius: 6px;
  cursor:pointer;
  font-size:1em;
}

.commentknop {
  float:left;
  margin-right:3px;
  margin-top:3px;
  height:38px;
  width:75px;
  border-style:none;
  border-radius: 4px;
  color:white;
  cursor:pointer;
  border:1px solid #d24d00;
  background-color:#ff841b;
}
  /*
@Media only screen and (max-width:800px) {
    body { background: url(media/ag03.png) no-repeat center;  }
 }

@Media only screen and (min-width:800px) {
  body { background: url(media/ag03.png) no-repeat center; }
}
  */
.lem {
  font-size:130%;
  font-weight: bold;
  color: #ff841b;

}

.srt {
  font-size:100%;
  font-style: italic;
  font-weight: 100;
  color: #eee; 
}

.context {
  font-size:100%;
  color: #eff; 
}

.sug {
  font-size:130%;
  color: #ff841b;
}


.vartekst {
  font-size:110%;
  color: #fff;
}

.varzin {
  font-size:90%;
  font-style: italic;
  color: #fff;
}

.knopLemmaKeuze{  
  font-size:110%;
  padding: 3px;
  padding-left:5px;
  padding-right:5px;
  margin: 4px;
  color: #fff;
  background: #ff841b; 
  border-radius: 6px 6px 6px 6px; 
  border-width: 1px;
  border-color:black;
  box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.50 );
  cursor : pointer;
}