/* CSS Document */

*{
body:0;
padding:0;
margin:0;
}

body{
background:url(blue3.jpg);
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
margin-top:75px;
text-align:center;
color: #777777;
}
/*Main Box*/
#wrapper{
position:relative;
margin-left: auto;
margin-right: auto;
padding-top:50px;
width:800px;
height:800px;
background-color:#FFFFFF;
border: 2px solid #777777;
}

#rgheader{
text-align:right;
width:70%;
position:absolute;
right:15px;
top:-30pt;
}

#rgheader h1{
font-weight:lighter;
font-size:24px;
}

#rglinks{
position:absolute;
padding:10px;
top:0;
left:0;
}

#rglinks ul{
display:inline;
list-style:none;
margin:0px;
}

#rglinks li{
font-weight:bold;
display:inline;
}
/*links colour*/
#rglinks a{
color:#777777;
text-decoration:none;
margin-right:10px;
border-top:3px solid #777777;
}

#rglinks a:hover{
border-top:3px solid #F4C0DA;
}

#content{
width:100%;
height:900px;
}

#content h1{
text-align:center;
margin-right:40px;
margin-left:50px;
font-size:16pt;
border-bottom: 2px solid #777777;
}

/*group title position*/
#content p{
text-align:center;
margin:10px 20px 30px 10px;
font-size:10pt;
}

/*arrange pictures*/

#picturelist {
text-align:center;
list-style-type:none;
margin-right:15px;
margin-left:30px;
}

#picturelist li {
float:right;
margin-right:20px;
margin-bottom:20px;
font-weight:none;
color:#777777;
}

#picturelist img{
display:block;
border:1px solid #777777;
}

#picturelist img:hover{
border:1px solid #999999;
}

#picturelist a{
color:#777777;
text-decoration:none;
}

#picturelist a:hover{
color:#999999;
}

<style type="text/css">

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

/*CSS for enlarged image*/
.thumbnail span{
position: absolute;
background-color: lightblue;
padding: 5px;
left: -1000px;
border: 1px;
visibility: hidden;
color: black;
text-decoration: none;
}

/*CSS for enlarged image*/
.thumbnail span img{
border-width: 0;
padding: 2px;
}

/*CSS for enlarged image on hover*/
.thumbnail:hover span{
visibility: visible;
top: 50px;
left: -20px; /*position where enlarged image should offset horizontally */

}

</style>
