/* --------------------- Pismenka DNA / amk --------------------------- */
/* jednotliva pismenka vysledne sifry, zobrazovana */

.std, .ex, .non, .stop {
    position: static;
    display: inline-block;
           
	width: 3.4em; /* auto; */
	height: auto;
	border: 1px solid #ddd; 
    padding: 0.5em; /* 0.5em 0.2em 0.5em 0.2em; */
    margin: 0.1em; /* 0em 0.1em 0.25em 0.1em; */
    
    text-align: center;   
    text-indent: 0em; /* musime zrusit odrazeni dedene z <p> */
	font-weight: bold;

	color: white;
    
    /* -- CSS3 - define rounded corners -- */	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; 
	border-radius: 10px;
	
	/* -- CSS3 - add a drop shadow -- */
	-webkit-box-shadow:0px 0 5px #ccc;
	-moz-box-shadow:0px 0 5px #ccc; 
	box-shadow:0px 0 5px #ccc;

}


p.amk .std, p.amk .ex, p.amk .non, p.amk .stop {
    position: relative;
    float: left;
    text-indent: 0em;
    margin-right: 0.8em;
   
}


/* Barva std-aminokyseliny ve vysledcich */
.std {
	
	/* -- CSS3 - create a background gradient -- */  
	background: #066b14;
	background: -moz-linear-gradient(top,  #066b14 0%, #28cb3f 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#066b14), color-stop(100%,#28cb3f));
	background: -webkit-linear-gradient(top,  #066b14 0%,#28cb3f 100%);
	background: -o-linear-gradient(top,  #066b14 0%,#28cb3f 100%);
	background: -ms-linear-gradient(top,  #066b14 0%,#28cb3f 100%);
	background: linear-gradient(to bottom,  #066b14 0%,#28cb3f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#066b14', endColorstr='#28cb3f',GradientType=0 );

 	
}

/* Barva ex-aminokyseliny ve vysledcich */
.ex {
		
	/* -- CSS3 - create a background gradient -- */
	background: #0d2db7;
	background: -moz-linear-gradient(top,  #0d2db7 0%, #355bff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0d2db7), color-stop(100%,#355bff));
	background: -webkit-linear-gradient(top,  #0d2db7 0%,#355bff 100%);
	background: -o-linear-gradient(top,  #0d2db7 0%,#355bff 100%);
	background: -ms-linear-gradient(top,  #0d2db7 0%,#355bff 100%);
	background: linear-gradient(to bottom,  #0d2db7 0%,#355bff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0d2db7', endColorstr='#355bff',GradientType=0 );
}

/* Barva non-aminokyseliny ve vysledcich */
.non {
	
	/* -- CSS3 - create a background gradient -- */
	background: #bab2b2;
	background: -moz-linear-gradient(top,  #bab2b2 0%, #d4cece 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bab2b2), color-stop(100%,#d4cece));
	background: -webkit-linear-gradient(top,  #bab2b2 0%,#d4cece 100%);
	background: -o-linear-gradient(top,  #bab2b2 0%,#d4cece 100%);
	background: -ms-linear-gradient(top,  #bab2b2 0%,#d4cece 100%);
	background: linear-gradient(to bottom,  #bab2b2 0%,#d4cece 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bab2b2', endColorstr='#d4cece',GradientType=0 );

}

/* Barva non-aminokyseliny ve vysledcich */
.stop {
	
	/* -- CSS3 - create a background gradient -- */
	background: #ffa800;
	background: -moz-linear-gradient(top,  #ffa800 0%, #ffc962 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffa800), color-stop(100%,#ffc962));
	background: -webkit-linear-gradient(top,  #ffa800 0%,#ffc962 100%);
	background: -o-linear-gradient(top,  #ffa800 0%,#ffc962 100%);
	background: -ms-linear-gradient(top,  #ffa800 0%,#ffc962 100%);
	background: linear-gradient(to bottom,  #ffa800 0%,#ffc962 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa800', endColorstr='#ffc962',GradientType=0 );

}

/* skryty box pro vysvetlivky - v neaktivnim stavu */
.non .hidden, .std .hidden, .ex .hidden, .stop .hidden {
    display: none;
}

/* skryty box pro vysvetlivky - v aktivnim stavu  */
.non:hover .hidden, .std:hover .hidden, .ex:hover .hidden, .stop:hover .hidden {
	display: block; 
	width: 16em;  /* musi byt natvrdo, pri pouziti max-width by se vysvetlivkovy box zarovnaval automaticky 
	                  s pravym okrajem form_big_box, takze u pismenek u praveho kraje by byl text v dlouhe zlute nudli */
	height: auto;
	position: absolute; 
		
	z-index: 10; 
	padding: 0.6em; 
	
	background: #ebec7f;
	
	color: black;
	font-weight: normal;
	text-align: justify;
	
	/* -- CSS3 - add a drop shadow -- */
	-webkit-box-shadow:0px 0 5px #ccc;
	-moz-box-shadow:0px 0 5px #ccc; 
	box-shadow:0px 0 5px #ccc;
	
	/* -- CSS3 - define rounded corners -- */	
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px; 
	border-radius: 10px;
}