.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

.question {width: 60em; background: #fff;  border: 1px solid #ddd; margin-top: 1em; margin-bottom: 1em }
.question .title {
 padding: 0.5em; 
font-weight: bold; font-size: 120%}

.whole {width: 100%}

.question .task {
  /*font-style: italic;*/ font-weight: bold;
  border-bottom: 1px solid #ddd;
  padding: 0.5em;
  padding-bottom: 0.5em;

}

.question p {
  margin-top: 0; margin-bottom: 0.3em;
}


div.sloztest span.nedurazne {display: none !important}
.task .cz {
  font-weight: normal
}

.question .content {margin-left: 2em; padding: 0.3em}

.question li {margin-top: 0; margin-bottom: 0.8em !important }

.question h1, .question h2, .question h3 {padding: 5px 10px}
.question h3 { font-size: 115%}

ol.abc { list-style-type: lower-alpha}

.example { font-style: normal; font-weight: normal}
.ul {text-decoration: underline}
em.person {font-style: normal; font-variant: small-caps }


.question table {border-collapse: collapse; margin-bottom: 0.5em; margin-top: 0.5em}
.question td {padding-top: 0.5em; padding-left: 0.5em; padding-right: 0.5em}
.question th {border-bottom: 1px solid}
.content table td {vertical-align: top;}
table.center { text-align: center;}
table.center td {border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; padding: 0.3em}

.wmiddle td, .wmiddle th { vertical-align: center}
.wmiddle th { border: 0px none }

.centered {text-align: center}

tr.example td { background-color: lightyellow; border: 0px none}
.content table.bracket td { vertical-align: middle}
table.normal { border: 1px solid #000}
table.normal th, table.normal td { border: 1px solid #999}
table.normal th { background: #ddd}

table.hlines td, table.hlines th {  border-top: 1px solid #bbb; border-bottom: 1px solid #bbb}

td.levy { text-align: left } 
.question dt {margin-top: 1em}
.question p.task_help {margin-left: 2em;}

 .textbox { border: 2px inset; padding: 0.1em}

.schema { border: 2px outset #bbb; margin-right: auto; margin-left: auto }
.fonetika, .fonetika input, .fonetika select, .fonetika textarea { font-family: "Lucida Sans Unicode"; font-size: 110% }

/*********** foneticke styly **********************/
  span.apl { float: left; width: 1em; padding: 0.2em; border: 1px outset; cursor: pointer; text-align: center;
  font-family: "Lucida sans unicode"; font-size: 120%;
  
  }
  div.klavesnice {width: 500px; font-size: 100% }
div.klavesnice br {float: none; clear: both}
  div.klavesnice input {/*width: 500px;*/ font-size: 100%; font-family: "Lucida sans unicode"  }
  div.klavesnice p {clear: both; margin-top: 1em;}

.ipas input, .ipas textarea { font-family: "Lucida Sans Unicode" }


/****** Drag and Drop ***********/

      
  
 
   p.label, p.droparea_copy, p.checks { display: inline-block} 
  p.label {}
  p.droparea_copy {width: 150px; height: 80px;
    padding: 0.3em;
   background: #fed; border: 1px solid #bbb; vertical-align: top;}
  
  .droparea_move, .droparea_move_sc, .droparea_clone { display: inline-block; 
    height: 1.4em; padding-left: 0.0em;
  background: #eee /*#fed*/; border: 2px solid #ddd; vertical-align: -0.3em;
  text-align: center;
  padding: 3px;
  border-radius: 5px; 
   }
  .droparea_move {text-align: left; }

  p.checks { width: 200px} 
  
  .droparea .draggable { display: block}
  *[draggable='true'], .draggable { display: inline-block; padding: 0.1em; margin: 5px; font-weight: bold; 
    position: relative; 
  /*border: 1px solid #800; */ color: black; background: transparent
  } 
  
  .but_delete {display: inline-block; width: 16px; height: 16px; 
    background: url(images/delete.png) no-repeat; 
    position: absolute; top: -2px; right: -8px;
    cursor: pointer;
      }
  .droparea_copy .draggable { display: block; margin-bottom: 0.3em }
  .droparea_move_sc .draggable { margin: 1px 5px 1px 0 ; border: 0px none; background-color: transparent; font-weight: bold; padding: 0; 
    vertical-align: 0.3em;   }
  .droparea_move .draggable {margin: 1px 10px 1px 0 ;}

  .droparea_copy input, .droparea_move input, .droparea_move_sc input { display: none; vertical-align: middle}
  .dragbase { min-height: 2em; background: #ddd; position: relative; z-index: 1000 }
  p.lines7 { height: 8.4em }
.checks  { display: none; }
/**/ [data_target] { display: none; } 
ul.flown li { float: left; width: 30% }

.droparea_move_sc font, .droparea_move_sc img, .droparea_move_sc input {display: none}
.droparea_clone font, .droparea_clone img, .droparea_clone input {display: none}
.droparea_move_sc img[draggable], .droparea_clone img[draggable] {display: inline-block; margin: 0 auto }
.ans_correct, .ans_correct * { border-color: green; color: darkgreen; font-weight: bold;}
.ans_wrong, .ans_wrong * { border-color: red; color: red; font-weight: bold;}

.column2 { float: left; width: 45%; }

.question blockquote { 
font-family: Georgia, serif !important; font-size: 110%;
margin: 1em 1em 1em 1em;
   border: 1px solid #ccc;
   padding: 0.5em;
   background: #eee;
    -moz-box-shadow:    2px 2px 2px 2px #ccc;
  -webkit-box-shadow: 2px 2px 2px 2px #ccc;
  box-shadow:         2px 2px 2px 2px #ccc;

}


/*************** pocitadlo znaku a slov ********/
.charCounter, .wordCounter { display: block}
.warning  {color: red}

/**** otazky s napovedou ****/
.hinted { display: inline-block; vertical-align: bottom}
.hinted .hint { display: block; font-size: 90%; font-weight: bold; color: #999}