#obal { 
    margin: 2.5em auto; 
    color: #555;	 
    width: 42em;     /* sirka ramecku ve kterem se zobrazuje formular i vysledky */
                     /* puvodne 42em nebo 810px */
     }
     
/* ********************* MEDIA SCREEN UPRAVA ************************* */
@media screen and (max-width: 43em) {
  #obal {
    margin: 0em auto;
    width: 100%;
    min-width: 300px;  /* vyzkouset, aby jeste slo cist */
   }
}
/* ******************************************************************* */
  




/* ---------------------- FORMULAR --------------------------- */

form { 
    
    position: relative;  /* musi byt, aby jednotlive casti formulare
                            mohly byt pozicovany vuci formulari (absolute) */
    z-index: 0;
    border: 1px solid #ddd; 
    margin: 0.4em 0em 0em 0em;
   
    
    font-size: 1em;
    height: 15em; /* nutno zadat - pozicovani vnitrnich prvku absolutni, 
					 takze nemuze vypocist hodntu autmaticky */
    
    background: #fff;
    
    /* -- CSS3 - define rounded corners -- */	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; 
	border-radius: 10px;
 
	/* -- CSS3 - create a background gradient -- */
	background: #eeeeee;
	background: -moz-linear-gradient(top,  #eeeeee 0%, #ffffff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#ffffff));
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#ffffff 100%);
	background: -o-linear-gradient(top,  #eeeeee 0%,#ffffff 100%);
	background: -ms-linear-gradient(top,  #eeeeee 0%,#ffffff 100%);
	background: linear-gradient(to bottom,  #eeeeee 0%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
 
	/* -- CSS3 - add a drop shadow -- */
	-webkit-box-shadow:  0px 0 50px #ccc;
	-moz-box-shadow: 0px 0 50px #ccc; 
	box-shadow:  0px 0 50px #ccc;
	
}



/* -------------------- fieldset z formulare --------------------------- */
#textova-cast { 
    display: block;
    position: absolute;   /* kvuli automat. vypoctu vysky form */
    width: 24em;
           
    top: 1.4em;
    left: 17em;
    
}
 
#klikaci-cast { 
    display: block;
    position: absolute;    /* kvuli automat. vypoctu vysky form */
   
    top: 1.4em;
    left: 1em;
    width: 15.5em;
   
}

#tlacitko {
	display: block;
	position: absolute;   /* kvuli automat. vypoctu vysky form */
	top: 11.1em;
	left: 2.5em;
	
	width: 12em;
}


/* ********************* MEDIA SCREEN UPRAVA ************************* */
@media screen and (max-width: 43em) {   /* bylo 810px */
  form {
     height: auto;  /* nechame vypocist automaticky */
     padding: 1em;
        
     z-index: 0;
  }
  
  #textova-cast, #klikaci-cast, #tlacitko {
    position: relative; /*  budou bloky pod sebou, tj. vypocet vysky form
                            provedeme automaticky */
    left: 1em;
    top: 0em;
    width: 95%;    
    
    margin: 0.5em 0em 0em 0em;
  } 
  
  
}
/* ******************************************************************* */


/* -------------------- dalsi casti formulare -------------------------------- */


label {	
    font-weight: bold;
    color: #666; 
    float: none;
}
 
 
 
#textova-cast textarea {		
    
    font-family: Helvetica, sans-serif; /*Gill_BC; */
    font-size: 1em;
    width: 100%;   /* roztahne se na celou oblast delky rodicovskeho
					  elementu, tj. textova-cast (def. vyse) */
    height: 10.8em; 		
    resize: none; 		
    margin: 0em;
    
    /* padding je pro vnitrni text! */
}


#tlacitko, textarea { 		
    padding: 0.4em;    /* vnitrni padding zadavaciho pole */
    background: #fff; 
      
    font-size: 1em; 
    font-weight: bold;
    color: #555; 
    border: 3px #ddd solid;
    
    /* -- CSS3 Shadow - create a shadow around each input element -- */ 
	-webkit-box-shadow: 0px 0px 4px #aaa;
	-moz-box-shadow: 0px 0px 4px #aaa; 
	box-shadow: 0px 0px 4px #aaa;
 
	/* -- CSS3 Transition - define what the transition will be applied to (i.e. the background) -- */		
	-webkit-transition: background 0.1s linear;	
	
	/* -- CSS3 - define rounded corners -- */	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; 
	border-radius: 10px;
	
}


#tlacitko:hover, textarea:hover { 
    background: #ddd; 
 }

.radio_butt { 	
    display: block;

    width: auto; 
    height: auto;
    line-height: 1.5em; 
    
     
    margin: 0.3em 0em 0em 0em;
    padding: 0.2em;
   
    text-align: left;     
    vertical-align: middle;  
}




/* --------------- CHYBOVY BOX ------------------------------ */

div.chyba {
	/* float: left; */
	z-index: 5;
    border: 1px solid #ddd; 
    padding: 0.4em 1.5em 0.4em 1.5em;  
    margin: 0.4em 0em 0em 0em;
    
    height: auto;
    
    color: white;
   
		
	/* -- CSS3 - define rounded corners -- */	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; 
	border-radius: 10px;
 
	/* -- CSS3 - create a background gradient -- */
	background: #ff2424;
	background: -moz-linear-gradient(top,  #ff2424 0%, #fb5d5d 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff2424), color-stop(100%,#fb5d5d));
	background: -webkit-linear-gradient(top,  #ff2424 0%,#fb5d5d 100%);
	background: -o-linear-gradient(top,  #ff2424 0%,#fb5d5d 100%);
	background: -ms-linear-gradient(top,  #ff2424 0%,#fb5d5d 100%);
	background: linear-gradient(to bottom,  #ff2424 0%,#fb5d5d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff2424', endColorstr='#fb5d5d',GradientType=0 );

 
	/* -- CSS3 - add a drop shadow -- */
	-webkit-box-shadow:0px 0 50px #ccc;
	-moz-box-shadow:0px 0 50px #ccc; 
	box-shadow:0px 0 50px #ccc;
}