/* kldcc gallery */

.gcon
 {
 margin:10px auto;/*was 20px*/
 padding:0;
 width:500px;
 height:110px; /* tried from 110px (D setting) to 500 by jcb */
 position:relative;top:0; /* was relative and top was 0 */
 left:15px; /* added 15px to correct centring (by d)*/
 /*Add a height attribute and set largest image's height to prevent overlaying*/
 }
 .thn /* width and height for each thumbnail image */
 {
 width:150px; /* changed from 150px by jcb */
 height:100px; /* changed from 100px to 150 by jcb */
 }
.thumb img
 {
 border:1px solid #ff0;
 margin:0 3px 5px 0;
 }

.thumb:hover
 {
 background-color:transparent; /* was transparent (default), other options = any colout, by name or hex code */
 }

.thumb:hover img
 {
 border:1px solid #00b;
 }

.thumb span /*CSS for enlarged image*/
 {
 position:absolute; /* was absolute can use static,relative or fixed*/ 
 background-color:#ffffe0;
 padding:5px;
 left: -1000px; 
 border:1px solid gray;
 visibility: hidden;
 color:black;
 text-decoration:none;
 }

.thumb span img /*CSS for enlarged image*/
 {
 border-width: 0;/* was 0 */
 padding: 2px;
 }

.thumb:hover span /*CSS for enlarged image*/
 {
 width:506px;/* changes image size */
 height:360px;/* changes images size */
 visibility:visible;
 top:-380px;
 left:-25px; /*position where enlarged image should offset horizontally (was -25px) tried -105 */
 z-index:500;
 }