/*Librería de elementos nuevos:

PRAGMA SAC*/



/*01.- Efecto de Opacidad de imagen y 

Marco de imagen en instancia de MouseOver*/



/*Códigos para HTML opacity over image or button

<a class="toggleopacity" href="media/imagefile.gif">

<img border="0" src="media/imagefile.gif" width="137" height="26" /></a>*/



.toggleopacity img{

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=75);

/*Set opacity (0-100) 50 as default */

}

.toggleopacity:hover img{

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

}





/*02.- PopUp de imagen pequeña mostrando una ampliada en 

instancia de MouseOver, también se aplica sobre un texto de 

vínculo (link) */



/*Códigos para HTML imagelink */

/* <a class="thumbnail" href="#thumb">

<img src="media/imagefile1.gif" width="100px" height="66px" border="0" />

<span><img src="media/imagefile1.jpg" /><br />

Texto para pié de imagen aquí.</span></a> */



/*Códigos para HTML textlink */

/* <a class="thumbnail" href="#thumb">Link Aquí

<span><img src="media/imagefile1.gif" /><br />

Texto para pié de imagen aquí.</span></a><br /> */



.thumbnail{

position: relative;

z-index: 0;

}



.thumbnail:hover{

background-color: transparent;

z-index: 50;

}



.thumbnail span{ /*CSS for enlarged image*/

position: absolute;

background-color: #CFB42F;

padding: 0px; 

left: -760px;

border: 0px dashed gray;/*border 1px default*/

visibility: hidden;

color: #FFFFFF;

text-decoration: none;

font-family: Arial, Helvetica, sans-serif, "Arial Narrow";

}



.thumbnail span img{ /*CSS for enlarged image*/

border-width: 0;

padding: 0px;

}



.thumbnail:hover span{ /*CSS for enlarged image on hover*/

visibility: visible;

top: -160 px; /*position where enlarged image should offset vertically */

left: -360px; /*position where enlarged image should offset horizontally */

}



/*Credits: Dynamic Drive CSS Library */

/*URL: http://www.dynamicdrive.com/style/ */