/*popuphover"
při najetí myší na obrázek se zobrazí jeho zvětšenina, nebo vysvětlující text, 
nebo oba (složený div nebo několik divů)*/

.PopupHover{position: relative; z-index: 0;}
.PopupHover:hover{background-color: transparent; z-index: 50;}
.PopupHover div{position: absolute; visibility: hidden; text-decoration: none;}
.PopupHover:hover div{visibility: visible; z-index: 100;}

/*tohle jsou obrázky v archivech*/
.hoverimgdiv {position: relative;}
.hoverimgdiv div {position: absolute; top: 0px; left: -300px;visibility: hidden;}
.hoverimgdiv:hover div {visibility: visible;}

/*přemístěno ze stránek*/
.hoverspan {}/*position: relative; bude se dávat až na místě, tady se využije pos.rel <div>, do kterého jk to vsazeno*/
.hoverspan span {position: absolute; display:block; visibility: hidden; top: 0px; left: 0px;}
.hoverspan:hover span {visibility: visible;}
.hoverchangediv {position: relative; border: 4px solid inherit; width:944px; top: 4px; left: 4px; background-color:#222;
padding-right: 4px; padding-bottom: 4px; padding-left: 4px}
.hoverchangediv div {position: absolute; background-color: #000; top: -4px; left: -4px; 
	border: 4px solid #444; width:944px; padding: inherit}
.hoverchangediv div {visibility: hidden;}
.hoverchangediv:hover div {visibility: visible;}
.hoverchangedivn {position: relative; border: 4px solid inherit; width:944px; top: 4px; left: 4px; background-color:#222;
padding-right: 4px; padding-bottom: 4px; padding-left: 4px}
.hoverchangedivn div {position: absolute; background-color: #000; top: -4px; left: -4px; 
	border: 4px solid #444; height:inherit; width:inherit; padding: inherit }
/*.hoverchangedivn - změna jednoho písmenka dočasně zviditelní překryvný obrazec, do webu nemusí*/
/* odstavce .hoverchangediv lze zařadit kamkoliv (i do části odstavce, i na jediné slovo), a pravděpodobně jimi bude možné dosáhnout
i efektu klikací mapy*/


/*picturehover: 
při přejíždění obrázku myší (svisle) se obrázek mění a/nebo se mění texty v okolí (popisy, vysvětlení)*/
/*lze předělat i na vodorovné, i zmenšovat oblasti na malé čtverečky (např malé oblasti na mapě)*/

.PictureHover {position: absolute; top: 0px; left: 0px; z-index: 200;}
.PictureHover div {background-repeat: repeat; background-image: url('../../common/b.gif')}
.PictureHover div img {position: absolute; top: 0px; left: 0px; visibility:hidden; border-width: 0;}
.PictureHover div div {visibility:hidden;}
/*.PictureHover div div {visibility:visible;}*/
.PictureHover div a {display:block; position:absolute; height: 5px;}
.PictureHover div:hover img {visibility:visible;}
.PictureHover div:hover div {visibility:visible;}
/*protože div nemůže být uvnitř <span></span> ani <a></a>, je to na odkazové řešeno zde trochu oklikou, 
a místo div by mohl vyskakovat spolu s obrázkem span, ale zatím zhotoveno jen varianta s obrázky*/
.PictureHoverLink {position: absolute; top: 0px; left: 0px; z-index: 200;}
.PictureHoverLink a {display: block; background-repeat: repeat; background-image: url('../../common/b.gif');float:left}
.PictureHoverLink a img {position: absolute; visibility:hidden; border-width: 0;}
.PictureHoverLink a span {visibility:hidden; }
.PictureHoverLink a:hover img {visibility:visible;}
.PictureHoverLink a:hover span {visibility:visible}
/*div dodržuje nejpřesnější umístění i v různých prohlížečích, na rozdíl od <span></span> a <a></a>, které mohou odskakovat různě, hlavně nahoře*/
/*ale ten display:block snad už ani neplechu nedělá; teprve kdyby to někde zlobilo, sestrojím další s div ala PictureHoverPoint*/
.PictureHoverPoint {position: absolute; top: 0px; left: 0px; z-index: 200;}
.PictureHoverPoint div {position: absolute;  background-repeat: repeat; background-image: url('../../common/b.gif');float:left}
.PictureHoverPoint div div {position: relative;}
.PictureHoverPoint div a {display:block; position: absolute; top: 0px; left: 0px; height: 20px; width: 20px;}
.PictureHoverPoint div div img {position: absolute; visibility:hidden; border-width: 0;}
.PictureHoverPoint div div div {position: absolute; visibility:hidden; border-width: 0;}
.PictureHoverPoint div:hover img {visibility:visible;}
.PictureHoverPoint div:hover div {visibility:visible;}

/*<a class="himg padding5pxfloatleft" href=""><img alt="" style="width:150px; height:100px" src="" />
	<b><img alt="" style="width:640px; height:480px; top:0px; left:0px" src="" /></b></a>*/

a.himg {position:relative; display:block;} /*himg ve významu hoverimage, obrázek i jeho zvětšenina (stačí použít jeden) se dají ručně nastavit polohy*/
a.himg img {display:block;}
a.himg b {visibility:hidden} /*kdyby to zlobilo dát taky pos.abs*/
a.himg b img {position:absolute}
a.himg:hover b {visibility:visible}



/*<div style="width:200px; height:150px" class="PopupHover padding5pxfloatright">
	<a href="">
<img alt="" title="" src="" style="width:200px; height:150px" /></a>
	<div style="top: 0px; left: 0px;">
<img alt="" style="width:640px; height:480px" src="" />
	</div>
</div>*/