/*************************** ANTRE ***************************/
#exercise{  
  max-width: 780px; 
}

#exercise h1, h2, h3{
  font-weight: 400;
  color: #34495E;
}

#questionParent{  
  margin-top: 0px;  
  display: none; 
}

/*************************** BOXY ***************************/

#exercise .box{    
  display: inline-block;  
  word-wrap: break-word;
  font-size: 28px;
  line-height: 28px;    
  text-align: center;  
  margin-top:0px;
  margin-bottom: 10px;
  border-radius: 3px;  
  padding: 10px;    
  background-color: white;
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.0);

  /* experiment s rozlozenim */
  width: 400px;
  margin-left:10px;
}

#exercise .box p{    
   word-wrap: break-word;
}

#exercise .box.block{
  display: block;  
}

#exercise .box.inline{
  display: inline-block;     
  padding-top: 15px;
}

/* do toho se sazi texty */
#exercise .para{
  display: block;  
}

/*************************** FORMATOVANI UVNITR BOXU ***************************/
#exercise .box p{  
  display: inline-block;  
  margin-bottom:0px;
  font-size: 24px;
  line-height: 1.6em;
  font-weight: 400; 
}

#exercise .box a{  
  display: block;  
  font-size: 16px;
}

/* TOHLE TU JE PRO KLASICKY LATEX, KDYZ JE INLINE, JE TO SPAN A MENSI PISMO TEDY */
#exercise .box span.vzorec{    
  font-size: 24px;
  line-height: 2em; 
}

#exercise .box h1{
  font-size: 36px;
  line-height: 36px; 
}

#exercise .box h2{  
  margin-top: 0px;
  padding-top: 0px;
  font-size: 20px;
  line-height: 28px;  
  background-color: blue;
  display: inline-block;
}

#exercise .box img{  
  max-height: 180px;
  max-width: 460px;
  height: auto;
  display: inline-block;  
}

/*************************** ANSWERS ***************************/

#exercise .box .correct{  border:2px solid #2ecc71; }
#exercise .box .wrong{  border:2px solid #e74c3c;  }
#exercise #box2 .correct{  box-shadow: 7px 7px 7px 0px rgba(0,0,0,0.0); }
#exercise #box2 .wrong{  box-shadow: 7px 7px 7px 0px rgba(0,0,0,0.0); }

#exercise prefix,#exercise suffix{    
  display: inline-block;  
  padding: 0px 5px;  
  display: none;
  background-color: white;
}

#exercise suffix img{   
  height: 40px;
  width: auto;
}

#exercise .box input[type=text], .box prefix, .box suffix{  
  display: inline-block;  
  margin: 0px 5px;
  padding-left:5px;  
  color: #34495E;   
  font-size: 24px;
  line-height: 1.3em;      
  font-weight: 300;  
  min-width: 50px;
}

#exercise .box input[type=text].tiny{ width: 60px; }
#exercise .box input[type=text].small{ width: 100px; }
#exercise .box input[type=text].medium{ width: 200px; }
#exercise .box input[type=text].large{ width: 300px; }

#exercise .box input[type=text].right{ text-align: right; }
#exercise .box input[type=text].inline{  }
#exercise .box input[type=text].newline{  }

#exercise .box input[type=text].big{   
  display: inline-block;  
  width:250px;
  height: 50px;
  color: #34495E;   
  font-size: 24px;
  line-height: 1.3em;      
  font-weight: 300;  
}
#exercise prefix.big, #exercise suffix.big{   
  height: 50px;
  font-size: 24px;
  line-height: 1.3em;    
}

#exercise input[type=text].oneLetter{     
  display: inline-block;  
  min-width:40px;
  width:40px;
  height: 40px;
  color:white;
  font-size: 36px;
  line-height: 1.3em;      
  font-weight: 300;
  background-color: transparent;
  border:0px;
}

/*************************** PLAN ***************************/

#exercise #plan{
  text-align: center; 
  display: inline-block;  
  background-color: white;
  padding:7px;
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.0);
  display: inline-block;
  margin-bottom: 10px;
}

#exercise #plan.correct{
  border:3px solid #00d872;
}

#exercise #plan.wrong{
  border:3px solid #e74c3c;
}

#exercise table.plan{  
  display: inline-block;  
  border-spacing: 0px;
  border-collapse: separate; 
  vertical-align: top;  
  width: auto;
  border:0px solid #f0c52f;
  margin:0px;
}

#exercise table.plan td{ 
  padding:0px;
  width:50px;  
  height:50px; 
  line-height: 48px;
  font-size: 36px;
  font-weight: 700;
  text-align: center;  
  border-radius: 0px;
  border: 1px solid white;
}

#exercise table.plan td.letter:hover{ 
 cursor: pointer;
}
#exercise table.plan td.dir2{

}
#exercise table.plan td.dir3{

}

/* POLICKA TYPY */
#exercise table td.blank{ background-color: #96afbf; }
#exercise table td.blank{ background-color: white; }
#exercise table td.block{ background: #95a5a6; }

#exercise table td.letter{ 
  background: #bdc3c7; 
  background: #ecf0f1; 
}
#exercise table td.question{  }
#exercise table td.secret{ background: #76b8fd; }
#exercise table td.highlight{ background: #ffeaaa; }  
#exercise table td.activeSquare{ background: #fccc75; color:white; }
#exercise table td.wide{ width: auto; padding:10px; text-align: left;}
#exercise table td.wrong{  background-color: #e74c3c;  }

#exercise .tlacitko-control{
  display: inline-block;
  margin: 5px;  
  margin-top: 0px;
  font-size: 18px;    
  width: 150px;      
  text-align:center;  
  border-radius:2px;  
  line-height: 50px;  
  cursor: pointer;

  background-color: #e0e0e2;
  color: #7f8c8d;
}

/* EXPLANATION, STATS */
#exercise .legend{      
  display: inline-block;
  font-size: 18px;  
  line-height: 28px;    
  text-align: left;  
  margin:10px;      
  margin-top: 50px;
  border-radius: 3px;
  padding: 20px;    
  background-color: white;
  box-shadow: 0px 0px 32px 0px rgba(0,0,0,0.0);
  min-width: 400px;
}