@charset "utf-8";
/* CSS Document */
h1 {
	color: #32291D;
	font-size: 30px;
	font-family: Camberic;
	margin-left: 10px;
	margin-top: -30px;
}

h2 {
	color: #823748;
	font-size: 12px;
	font-family: "Arial Black", Gadget, sans-serif;
	margin-top: 0px;
}

h3 {
	color: #823748;
	font-size: 16px;
	font-family: "Arial Black", Gadget, sans-serif;
	margin-top: 0px;
}

a:link {color:#823748;}      /* unvisited link */
a:visited {color:#823748;}  /* visited link */
a:hover {color:#964B5C;}  /* mouse over link */
a:active {color:#823748;}  /* selected link */

/*email button */
#email
{
	margin-left: 184px;
	margin-top: 133px;
  display: block;
  width: 28px;
  height: 27px;
  background: url(files/bg/homeButton.png) no-repeat 0 0;
}

#email:hover
{ 
  background-position: 0 -27px;
}

#email span
{
  position: absolute;
  top: -999em;
}
/*end email button*/


/*about button */
#about
{
	margin-left: 294px;
	margin-top: -19px;
  display: block;
  width: 28px;
  height: 26px;
  background: url(files/bg/aboutButton.png) no-repeat 0 0;
}

#about:hover
{ 
  background-position: 0 -26px;
}

#about span
{
  position: absolute;
  top: -999em;
}
/*end about button*/

/*illustrations button */
#illus
{
	margin-left: 73px;
	margin-top: 87px;
  display: block;
  width: 28px;
  height: 27px;
  background: url(files/bg/illustrationsButton.png) no-repeat 0 0;
}

#illus:hover
{ 
  background-position: 0 -27px;
}

#illus span
{
  position: absolute;
  top: -999em;
}
/*end illustrations button*/

/*computer graphics button */
#comgra
{
	margin-left: 230px;
	margin-top: -57px;
  display: block;
  width: 30px;
  height: 29px;
  background: url(files/bg/compgraphButton.png) no-repeat 0 0;
}

#comgra:hover
{ 
  background-position: 0 -29px;
}

#comgra span
{
  position: absolute;
  top: -999em;
}
/*end computer graphics button*/

/*photography button */
#photo
{
	margin-left: 377px;
	margin-top: 9px;
  display: block;
  width: 28px;
  height: 27px;
  background: url(files/bg/photographyButton.png) no-repeat 0 0;
}

#photo:hover
{ 
  background-position: 0 -27px;
}

#photo span
{
  position: absolute;
  top: -999em;
}
/*end Photography button*/

div#container {
	background-image: url(files/bg/clockThingComposite.png);
	background-repeat: no-repeat;
	background-position: left;
	background-color:#000000;
	width: 80%;
	min-width: 200px;
	min-height: 500px;
	max-width: 880px;
	margin-left: 25px;
	margin-right: 25px;
	margin-top: 25px;
	margin-bottom: 25px;
	padding: 30px;
	padding-top: 20px;
}

/*popup gray area*/
#blanket {
	background-color:#111;
	opacity: 0.65;
	filter:alpha(opacity=65);
	position:absolute;
	z-index: 9001;
	top:0px;
	left:0px;
	width:100%;
}
/*end popup gray area*/

/*about popup*/
#aboutPopUpDiv {
	position: absolute;
	background-color:#eeeeee;
	width:400px;
	height:400px;
	z-index: 9002;
}
/*end about popup*/

/*illustrations popup*/
#illusPopUpDiv {
	position: absolute;
	background-color:#eeeeee;
	width:400px;
	height:450px;
	z-index: 9002;
}
/*end illustrations popup*/

/*computer graphics popup*/
#comgraPopUpDiv {
	position: absolute;
	background-color:#eeeeee;
	width:400px;
	height:500px;
	z-index: 9002;
}
/*end computer graphics popup*/

/*photography popup*/
#photoPopUpDiv {
	position: absolute;
	background-color:#eeeeee;
	width:400px;
	height:450px;
	z-index: 9002;
}
/*end photography popup*/

/*photo gallery*/
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
margin-left: 400px;
margin-top: 100px;
background-color: lightyellow;
padding: 5px;

border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
/*end photo gallery*/