body {
	font: 78% sans-serif, Helvetica, arial, sans-serif;
	text-align: center;
	color: #a28465;
	letter-spacing: 0.05em;
	background-color: #000000;
}
#wrapper {
	width: 100%;
	color: #000;
	margin: 5px auto; /*center for compliant browsers*/
	text-align: left;
	border: 0px solid #a28465;
	padding: 0 px;
	background-color: #000000;
    }
#header {
    margin-bottom: 10px;
    }

/* Lettered Title with Navigation */
ul#off {list-style-type:none; padding:0; margin:0; width:750px; height:120px; margin:0.5em auto; position:relative;}
ul#off li {display:block; width:75px; height:100px; margin:10px; position:relative; float:left;}
ul#off li.gap {margin-right:75px;}
ul#off a {display:block; width:0; height:0; text-decoration:none; position:absolute; left:0; top:0;}

ul#off a em {cursor:pointer; font-style:normal; font-weight:bold;}
ul#off a span {display:none;}

ul#off a em.hz {position:absolute; display:block; height:20px; width:75px; cursor:pointer; text-align:center; line-height:20px; color:#000;}
ul#off a em.hzq {position:absolute; display:block; height:20px; width:50px; cursor:pointer; text-align:center; line-height:20px; color:#000;}
ul#off a em.vtc {position:absolute; display:block; height:60px; width:25px; cursor:pointer; left:0; top:20px;}
ul#off a em.vtl {position:absolute; display:block; height:80px; width:25px; cursor:pointer; left:0; top:0;}
ul#off a em.vtp {position:absolute; display:block; height:40px; width:25px; cursor:pointer;}
ul#off a em.bk {position:absolute; display:block; height:25px; width:25px; cursor:pointer;}
ul#off a em.vtq {position:absolute; display:block; height:100px; width:25px; cursor:pointer; left:0; top:0;}


ul#off a em.toph {top:0; left:0;}
ul#off a em.midh {top:40px; left:0;}
ul#off a em.both {top:80px; left:0;}
ul#off a em.topr {top:0; left:50px;}
ul#off a em.topq {top:0; left:25px;}

ul#off a em.bktl {top:20px; left:0;}
ul#off a em.bktr {top:20px; left:50px;}
ul#off a em.bkbl {top:60px; left:0;}
ul#off a em.bkbr {top:60px; left:50px;}

.ggg em {background:#724a10;}
.aaa em {background:#e09222;}
.lll em {background:#697210;}
.eee em {background:#ff0000;}
.rrr em {background:#0000ff;}
.yyy em {background:#9933ff;}

ul#off a:hover {color:#c00; background:#ddd;}
ul#off a:hover em {background:#c6b69e; color:#724a10;}
ul#off a:hover span {display:block; width:75px; height:1px; font-size:3px; position:absolute; top:110px; left:0; border-top:5px dashed #c6b69e;}
ul#off a:active, ul#off a:focus {background:#eee;}
ul#off a:active em, ul#off a:focus em {background:#f0ca93; color:#000;}
ul#off a:active span, ul#off a:focus span {border-top:5px solid #f0ca93;}
      
#container {
	position:relative;
	width:700px;
	height:396px;
	margin:10px auto 0 auto;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: left 10px;
    } 
/* Removing the list bullets and indentation */
#container ul {
    padding:0; 
    margin:0; 
    list-style-type:none; 
    } 
/* Remove the images and text from sight */
#container a.gallery span {
    position:absolute; 
    width:0px; 
    height:0px; 
    top:5px; 
    left:5px; 
    overflow:hidden; 
    background:#000;
    }
/* Adding the thumbnail images */
#container a.gallery, #container a.gallery:visited {
	display:block;
	text-decoration:none;
	border:1px solid #000;
	margin:1px 2px 1px 2px;
	text-align:left;
	cursor:default;
	overflow: hidden;
    }
/* change the thumbnail border color */
#container a.gallery:hover {
    border:1px solid #fff; 
    }
/* styling the :hover span */
#container a.gallery:hover span {
    position:absolute; 
    width:400px; 
    height:372px; 
    top:10px; 
    left:75px; 
    color:#fff; 
    background:#000;
    }
#container a.gallery:hover img {
    border:1px solid #fff; 
    float:left; 
    margin-right:5px;
    }
#container a.slidea {
	height:93px;
	width:60px;
	background-image: url(images/bridestn.jpg);
    }
#container a.slideb {
	height:93px;
	width:60px;
	background-image: url(images/mitn.jpg);
    }
#container a.slidec {
	height:93px;
	width:60px;
	background-image: url(images/mannixtn.jpg);
    }
#container a.slided {
	height:93px;
	width:60px;
	background-image: url(images/jeannietn.jpg);
    }
* html #container a.slided {
    width:60px; 
    w\idth:60px;
    }
#container a.slidee {
	height:93px;
	width:60px;
	background-image: url(images/aliastn.jpg);
    }
#container a.slidef {
	height:93px;
	width:60px;
	background-image: url(images/oharatn.jpg);
    }
* html #container a.slidef {
    width:60px; 
    w\idth:60px;
    }
#container a.slideg {
	height:93px;
	width:60px;
	background-image: url(images/6miltn.jpg);
    }
#container a.slideh {
	height:93px;
	width:60px;
	background-image: url(images/policestorytn.jpg);
    }
#container a.slidei {
	height:93px;
	width:60px;
	background-image: url(images/christietn.jpg);
    }
#container a.slidej {
	height:93px;
	width:60px;
	background-image: url(images/rockfordtn.jpg);
    }
#container a.slidek {
	height:93px;
	width:60px;
	background-image: url(images/emergencytn.jpg);
    }
* html #container a.slidek {
    width:60px; 
    w\idth:60px;
    }
#container a.slidel {
	height:93px;
	width:60px;
	background-image: url(images/blackdahliatn.jpg);
    }
/* set the size of the unordered list to neatly house the thumbnails */
#container ul {
    width:198px; 
    height:386px;
    margin:5px; 
    float:right;
    }
#container li {
    float:left;
    }
#container a.slideb:hover img, #container a.slidei:hover img {
    float:left;
    }

#container2 {
        border: 2px solid #a28465;
   	  margin-top: 10px;
        padding-top: 5px;
        padding-left: 10px;
        padding-right: 10px;
}
#container2 p {
    font-weight: bold; 
    background-color: #000000;
    color: #a28465;
    text-align: justify;
    }  

/* #footer */

#footer {
    border-top: 2px solid #a28465;
    margin-top: 10px;
    padding-top: 5px;
    }  
    
#footer p {
    font-size: 0.9em;
    text-align: right;
    font-weight: bold; 
    color: #a28465;
    } 

#footer a {
    color: #a28465;
    text-decoration: none;
    }
    
#footer a:hover {
    text-decoration: underline;
    }