.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}


body { width: 980px; 
    margin: 20px auto; 
    font-size: 100%
}

#tabs-1 {
   font-size: smaller;
}

form {float: left; width: 620px; /* height: 550px; display: inline-block; vertical-align: top */ }
	.sidebar {margin-left: 630px}
	
	.ti_score input {width: 50px  }
	
	footer, #eMessage { clear: both}
	#eMessage {visibility: hidden}
	.group:after {
  content: "";
  display: table;
  clear: both;
}
	
	/* #testitem_content tr:nth-child(2) td:first-child input {visibility: hidden  } */

div#testitem_content { display: none;  background: white; }
#edited_testitem table + input + input {display: block; margin-top: 1.5em}
	 .editor { position: relative }

    .noUse {display: none}
    #qArea { /*min-width: 500px; min-height: 464px; */ position: relative;
        /*background: red; */
        z-index: 1;
     } 
    
    #qArea img { cursor: move; position: relative; }
    .popis-t { position: absolute; /**/  background: #fff;
      font-family: Arial, sans-serif; font-size: 12px; 
      /*resize: both; overflow: auto ;  */
      padding: 0.1em; border: 1px solid #bbb;
      text-align: center;
      }
    
  /*  .popis-t:after { display: block; content: attr(style) }   */
    
   fieldset { display: block}   
   .editacni { overflow: visible; width: 100%; text-align: center; border: 0px none;
   font-family: Arial, sans-serif; font-size: 12px;
   }
   
   #qArea .ui-right:before {
     display: block; width: 100%; height: 15px; 
     background: #ddd; /*url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") repeat-x scroll 50% 50% rgb(204, 204, 204); */
     content: " ";
     border-bottom: 3px ridge #eee;
     margin-bottom: 0.5em;
   }
   .ui-right label.inline {display: inline; font-size: 0.8em}
   
   .warning { display: inline-block; vertical-align: baseline;
    margin-left: 0.5em; padding: 0; border: 0px none; 
    width: 20px; height: 20px; background: url(./dialog-warning.png) left bottom no-repeat;
   position: relative; cursor: help; 
    }
    
   .warning .content { display: none; position: absolute; right: 0; top: -4.5em;
   width: 18em; font-size: 80%
   background: white !important; border: 1px solid #bbb;
   padding: 0.3em;
   } 
  #qArea .content {} 
   .warning:hover .content { display: block; background: white; font-size: 80% }
		
	#form_absolute {display: none}

 .testitem {
    display: inline-block; vertical-align: middle; 
    position: relative;
    border: 1px solid blue; border-radius: 3px; 
    /* margin-left: 0.8em; */
    padding: 0.1em; background: #def; cursor: pointer}
    
    .testitem:before { position: absolute; left: -0.5em;}
    
   
  .testitem.n { background: #fed; border-color: #f00}
  /* .testitem.n:before { font-size: smaller; vertical-align: super; content: "123"} */
  .testitem .option { display: block; font-weight: bold }
  .testitem.v { padding-right: 22px; 
      background: url(./select.png) no-repeat right top #efd; 
      border-color: darkgreen;
      vertical-align: top }
  .testitem.a { 
      background-color: #fdf; 
      border-color: violet;
      vertical-align: top }    
 .v .option[data-correct="ok"] { color: darkgreen; font-weight: bold  }

#edited_testitem table { border-collapse: collapse  }
#edited_testitem table input { vertical-align: middle}
#edited_testitem tr + tr td { border-top: 1px solid #bbb }

 tr.correct * {/* font-weight: bold */; background: #dfe; color: darkgreen}

#edit_title { background: #eee; padding: 0.1em; border: 1px dotted #bbb; 
min-height: 2em; position: relative }

/*#edit_title:before { display: block; font-size: 60%; font-weight: normal; content: "Titulek"; position: absolute; top: -1.3em }   */
#edit_title:empty:before {display: inline; color :#999; content: "Titulek otázky"}

#edit_task { background: #eee; padding: 0.2em; border: 1px dotted #bbb; min-height: 2em; position: relative;}
/*
#edit_task:before { display: block; font-size: 70%; font-weight: normal; content: "Zadání"; position: absolute; top: -1.3em }
*/
 #edit_task:empty:before {display: inline; color :#999; content: "Zadání otázky"}

legend {
    font-size: 80%;
  }
  fieldset {
    padding: 0.2em
  }
  th {
    font-size: 80%; 
    font-weight: normal;
    text-align: left;
  }
  td {vertical-align: top}
  #controlls {
    float: left;
    width: 275px;
    background: #def;
    margin-right: 10px;
  }
  #controlls fieldset {
   width: auto; margin-top: 1em;
  }
    #question {
      float: left;
      border: 3px outset;
      padding: 0.5em;
      margin-left: 0em;
      /*width: 500px;*/
     /* margin-left: 20px;
      margin-right: auto;*/
      /*display: none;*/
      background: rgb(255,204,153)
      }
    #question textarea {
      border: 1px solid;
      font-family: Verdana, sans-serif;
      font-size: smaller;
      padding: 0.2em;
    }
    #question li, #question textarea { 
      vertical-align: top;
    }
    #output {
     /* clear: both;
      display: none;*/
    }
    #numberingType {
      visibility: hidden;
    }
    .abc_big {list-style-type: upper-alpha;}
    .abc {list-style-type: lower-alpha;}
    .decimal {list-style-type: decimal}
    .bullets {list-style-type: disc}
    .no-bullets { list-style-type: none; margin-left: 0; padding-left: 0}
    
    textarea {width: auto}
    #q_title textarea {font-weight: bold; font-size: 120%;width: 600px;}
    #q_task textarea {font-weight: bold; font-size: 100%; width: 600px;}
    
    input.btn { 
      border: 2px outset rgb(212,208,200)
      padding: 2px; 
      background: rgb(212,208,200)
      }
    
    /* styly pro ukazkova okno */
    #shower {
      z-index: 100;
      
      /*visibility: hidden;*/ 
      position: absolute;
      
      top: 10em; 
      left: -10000px;
      width: 40em;
      /*height: 20em;*/
      background: #fff;
      border: 3px groove;
      /*padding: 0.3em*/
      
      }
      /* titulek ukazkoveho okna*/ 
    #shower_heading { 
      background: url(ikony/window_title.png) repeat-y darkblue; 
      color: white; 
      font-weight: bold; 
      padding: 0.3em;
      cursor: pointer;
      height: 1em;
    }
    #shower-title { 
      float:left;
    }
      img.closer {float: right;}
    
    #shower-content {
      clear: both;
      padding: 0.5em;
      max-height: 400px;
      overflow: auto;
      }
    #shower-content h3 {
      font-family: verdana, arial, sans-serif; 
      font-size: 100%;
      margin-top: 1em;
      margin-bottom: 0.2em
    }
    #shower-content p {
      margin-top: 0em;
      margin-bottom: 0.2em
    }
    pre.example {
      background: #eee;
      border: 1px solid #ccc;
      padding: 0.5em;
      line-height: 150%
    }
    /* nadpis nahledu otazky */
    #shower .title {
      font-weight: bold;
      font-size: 120%;
      margin: 0.8em 0 0.3em 0;
      }
      /* nadpis zdani otazky */
    #shower .task {
      font-weight: bold;
      margin: 0.5em 0 0.5em 0
    }
    /* obsah nahledu otazky */
    #shower .content {
      margin-left: 2em
    }
  
    .question { padding: 0.3em }
    
    .clearer { clear: both}
  
  .helper {display: none}
  a.help {
    padding-left: 20px; 
    background: url(ikony/n-aplikace-help-ico.gif) no-repeat;
    cursor: help;
  }
  /* matematicke otazky typu l */
  span.math {}
span.math img { vertical-align: middle}
img.maple_result { visibility: hidden}
img.syntax_checker { cursor: pointer} 

/*****************   Drag and Drop  ************************/
 .droparea { 
  display: table-cell;
  font-weight: bold;
  font-size: 12px;
  min-height: 1.4em; padding-left: 0.0em;
  background: #eee ;
  border: 2px solid #ddd; vertical-align: -0.3em;
  text-align: center;
  padding: 3px;
  border-radius: 5px;  } 
  
  .droparea img { display: inline-block; vertical-align: middle; }
    
  #form_absolute .testitem { display: inline-block; background-color: #fff; padding: 0.2em; margin: 0 0.2em; }
  
   #form_absolute.testitem { color: white; background-color: darkblue}
  .tt { }
  .tn { background-color: purple }
  
  
  .ui-right { /* float: right; */
    position: absolute; right: 20px; top: 0; 
    width: 220px; background: #fff } 
  #qArea { /*padding: 0.5em;*/ min-width: 600px; border: 1px solid #bbb; min-height: 2em;
  position: relative;
   }
  
  #qArea input[type="button"] { font-size: 90%; width : 100% } 
  
  #bg-init { width: 100%; height: 100%;
  /* content: " ";*/ 
   background: url("document_background.png") 30% center no-repeat #ffc;
 
   }
                   
  #bg-init:hover { background-color: #ffe; cursor: pointer} 
  
  #img_placeholder { 
    position: relative; left: 0; top: 0;
    padding: 0; margin: 0;
  width: 100%; height: 450px; overflow:auto;}
  
  #dragbase { 
    display: none;
    color: #eee; min-height: 3em; width: 100%;
    position: relative; z-index: 150;
    font-size: 12px; 
}  

  #dragbase input { display: inline-block; /*vertical-align: top*/ }
   #dragbase #del_draggable { display: none}
  .qArea table, .qArea td, .qArea th { border: 1px solid #bbb}
  .qArea th { background: #ddd }
  
.ui-right label { display: inline-block}  
.ui-spinner { width: 3.2em}
#imgSize, #textValue {display: none}

   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 { display: inline-block; 
    height: 1.4em; padding-left: 0.2em;
  background: #fed; border: 1px solid #bbb; vertical-align: -0.3em;
  text-align: center; 
   }
  
  p.checks { width: 200px} 
  
.droparea {white-space: nowrap;}
  .droparea .draggable { display: block;  }
  *[draggable='true'], .draggable { display: inline-block; padding: 0.1em; margin: 5px; font-weight: bold; 
    position: relative; 
    white-space: nowrap;
  border: 1px solid #bbb; background: #ddd;
  } 
  .draggable.actual { border: 1px solid red; }
  .droparea .actual { color: darkorange}
  
  .connector-end {
    display: block; 
    width: 15px; height: 15px;
    border-radius: 8px;
    background: transparent;  
  }
  
  .connector-end:hover {
    background: red
  }
  
  .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 .draggable, .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_sc input[type="text"] { display: none; font-size: 0; width: 0; height: 0; vertical-align: middle}
  .dragbase { min-height: 2em; background: #ddd }
  p.lines7 { height: 8.4em }
  
  #dragbase { display: none}

  .popis-t:before { display: block; position: absolute; left: -1px; top: -1px; 
  
  border: 1px solid #bbb; 
  height: 30px; width: 30px; content: " "; 
   }
  .question .popis-t:before {display: none}
   
 /* dialogy UI */  
   #dialog-addImage label { font-size: small } 
   #dialog-addImage input[type='text'], #dialog-setBgImage input[type='text'] { width: 100%;} 
   #dialog-showCode textarea { width: 100%; height: 100%;  font-family: monospace; font-size: 100%}
   .ui-modal { }
   
   #preview_content {font-size: 70%}
   
 #del_draggable { display: none }  
 
 #preview_content { clear: both;}
 #code_shower, #code_shower_new {width: 100%; height: 350px; font-size: 0.7em;} 


/********** multimedialni prvky *********/
#multimedia_insert fieldset {
    margin-left: 660px;  width :auto;   
}
#multimedia_insert figure {float: left; }

#video_settings, #audio_settings { display: none;}

#video_settings {font-size: smaller }
/*
#video_settings p {display: inline-block; padding-left: 0.5em;}
#video_settings p + p {margin-left: 0,5em;  border-left: 1px solid #bbb}
*/
#video_settings label {display: inline}
#video_settings input:checked + label { font-weight: bold}

#new_audio_url, #new_video_url { width: 100%}