body 
{
	color: #000000;
	background: #bbbbbb;
    font-family: Helvetica, sans-serif;
}
 a:link {color: #000000;}
 a:visited {color: #000000;}
 a:active {color: #000000;}
 a:hover {color: #000000; text-decoration: none;}
 h1 {text-align:center; }
 h2 {text-align:center; font-weight: normal; margin:0; padding: 0;}
 
#main
{ 
    position:relative;
    padding: 1px; 
} 

#left 
{
	position:absolute; 
	width: 120px;
    padding-top: 20px;
    text-align:center;
}

#content
{
	margin: 0 0 0 20px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.cent 
{
    display: block;
    border: thin red solid;
    margin-left: auto;
    margin-right: auto;
}

.info
{ 
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 700px;
}
.info h2 {position: relative; top: -2em;}

.size 
{
    position: relative;
    top: 4em;
    padding-top: 8px;
    font-size: 80%;
}

.media 
{
    position: relative;
    top: 0em;
    padding-top: 8px;
    font-size: 80%;
}

.prev 
{
    float: left; 
    text-align: left;
    font-size: 120%;
}

.nex 
{
    float: right; 
    text-align:right;
    font-size: 120%;
}

 .nex a:link {color: #555555;}
 .nex a:visited {color: #555555;}
 .nex a:active {color: #555555;}
 .nex a:hover {color: #555555; text-decoration: none;}
 .prev a:link {color: #555555;}
 .prev a:visited {color: #555555;}
 .prev a:active {color: #555555;}
 .prev a:hover {color: #555555; text-decoration: none;}
 
.foot
{
    width: 100%;
    text-align: center;
    font-size: 60%; 
    padding: 1px;
    margin: 0; 
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ */

.wrapper{ 
position: relative;
width: 1000px;
margin-left:auto;
margin-right:auto;
margin-bottom: 20px;
}

.gallerycontainer{
position: relative;
margin-right: 500px;
padding: 5px 0 5px 0;
border: 1px black solid;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border:none; 
margin: 10px;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background: #bbbbbb;
padding: 30px;
left: -1000px;
visibility: hidden;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 5px;
left: 520px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
