
body {
  background-color: #000;
  margin: 0;
  padding: 0;
  }

#outer {
margin-left:20px;
margin-top:20px;
margin-right:20px;
margin-bottom:20px;
z-index: 0;
}

#book {position:relative;
  height: 710px;
  width: 1004px;
  z-index: 0;
}


#menu a {
  position: absolute;
  height: 36px;
  width: 150px;
  left: 59px;
  text-decoration: none;
background-repeat:no-repeat;
z-index: 0;

  }

#menu a i { visibility: hidden; }

a#mailme { top: 0px; left:0px;width: 200px;height:44px; }
a#visuals { top: 219px; }
a#scamps { top: 314px; height:35px;}
a#plans { top: 410px; }
a#portfolio { top: 503px; }
a#home { top: 595px; }
a#contact { top: 680px; left:793px;width:180px;height:28px;  }

a#mailme:link { background-image: url(./img/E1.png); }
a#visuals:link { background-image: url(./img/B1.png); }
a#scamps:link { background-image: url(./img/B2.png); }
a#plans:link { background-image: url(./img/B3.png); }
a#portfolio:link { background-image: url(./img/B4.png); }
a#home:link { background-image: url(./img/B0.png); }
a#contact:link { background-image: url(./img/EM2g.png); }

a#mailme:visited { background-image: url(./img/E1.png); }
a#visuals:visited { background-image: url(./img/B1.png); }
a#scamps:visited { background-image: url(./img/B2.png); }
a#plans:visited { background-image: url(./img/B3.png); }
a#portfolio:visited { background-image: url(./img/B4.png); }
a#home:visited { background-image: url(./img/B0.png); }
a#contact:visited { background-image: url(./img/EM2g.png); }

a#mailme:hover { background-image: url(./img/E1g.png); }
a#visuals:hover { background-image: url(./img/B1g.png); }
a#scamps:hover { background-image: url(./img/B2g.png); }
a#plans:hover { background-image: url(./img/B3g.png); }
a#portfolio:hover { background-image: url(./img/B4g.png); }
a#home:hover { background-image: url(./img/B0g.png); }
a#contact:hover { background-image: url(./img/EM2.png); }


a#visuals:hover,
a#scamps:hover,
a#plans:hover,
a#portfolio:hover,
a#home:hover,
a#mailme:hover,
a#contact:hover { border: none; }

#gallery1 {position:absolute;
top:236px;
left:255px;
width:690px;
height:137px;
z-index: 0;
}

#gallery2 {position:absolute;
top:373px;
left:255px;
width:690px;
height:137px;
z-index: 0;
}

#gallery3 {position:absolute;
top:510px;
left:255px;
width:690px;
height:137px;
z-index: 0;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
/*position: absolute;*/
padding-left:10px;
padding-right:10px;
z-index: 0;
}

#t1.thumbnail {left:400;Top:400}

.thumbnail:hover{
background-color: transparent;
background-color:#000000;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
z-index: 50;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
z-index: 50;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -250px;
left: -250px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

P.comment {
font-family:Arial;
font-size:1px;
color:black;
background:black;
}
