body {
	background: #ccc;
	text-align: center;
	font: normal 11px/18px verdana, arial, tahoma, sans-serif;
	color: #ccc;
	padding-top: 0px;
	background-image: url(images/images/Long_hair1.jpg);
	background-repeat: no-repeat;
	background-position: center 40px;
}

a {
color: #ccc;
text-decoration: none;
}

a:visited {
text-decoration: underline;
}

a:hover {
color: #ccc;
}

#wrapper {
width: 670px;
background: #ccc
background-position: 0 0;
border: solid 2px #ccc;
margin: 0 auto;
text-align: left;
}

h1:first-letter {
color: #f00;
text-decoration: underline;
}

#sidebar {
width: 80px;
background-color: #ccc;
float: left;
position: relative;
left: 1px;
margin-left: 0px;
border-top: 1px solid #ccc;
font: normal 10px/18px verdana, arial, tahoma, sans-serif;
padding: 3px;
}

img {
border: none;
}

a img {
display: block;
margin-bottom: 0px;
border: 1px solid #ccc;
}

a:hover img {
border-color: #000000;
}

#content {
	float: left;
	width: 400px;
	margin-top: 40px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 10px;
}

p {
margin-bottom: 25px;
}

#footer {
clear: both;
width: 400px;
margin-left: 100px;
}

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid #cccccc;
margin: 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px light grey;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: light grey;
padding: 4px;
left: -1000px;
color: #666;
text-decoration: none;
width: 440px;
display: block;
}

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

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 20px;
left: 170px; /*position where enlarged image should offset horizontally */
z-index: 50;
}