/* newstyles.css */

/* Universal style rule */
*{
  /* Block all browser default margins and padding */
  margin:0;
  padding:0;
  /* Temporary borders */
  
}

body {
 background: #f1efe2 url(leather2.jpg);
 font-family: Arial, Helvetica, sans-serif;
}
#wrapper{
  width:55em;
  background-color: #f2e8d9;
/* Center the wrapper */
  margin: 0 auto;
}

#branding{
  position:relative;
  height:4em;
  background-color:#291508;
  color:#f1efe2;
  text-align:center;
}
#banding h1{
  font-family:'Arial Black', Charcoal, Impact, Sans-Serif;
  font-size:2em;
  padding-top:0.25;
}

/* Absolutely position links in the branding division */
#branding a{
  position:absolute;
  text-decoration:none;
  font-size:0.8em;
}

/* Unvisited and visited links in branding bar */
#branding a:link, #branding a:visited{
   color:#000;
}

/* Hover links in branding bar */
#branding a:hover{
  color:#fco;
}

/* Active link in branding bar */
#branding a:active{
  color:#1bb498;
}

/*Fixes the image gap */
#branding img{
  display:block;
}

/* Navbar division */
#navbar{
  background-color:#f1efe2 url(images/beige005.jpg) repeat-x center;
  /* Left Margin must match leftcolumn width */
  margin-left:12em;
  height:1.6em;
}

/* Applies to navbar links, unvisited and visited */
#navbar a,
#navbar a:link,
#navbar a:visited{
  text-decoration:none;
  font-family:Verdana, Geneva, Arial, Sans-Serif;
  font-size:80%;
  color:#000;
  background-color:#f1efe2 url(images/beige005.jpg) repeat-x center;
  display:block;
  height:2em;
  width:6em;
  border-right:solid 1px #ddd;
  text-align:center;
  line-height:2em;
  outline-style:none;
}
/* Remove bullets from ul in the navbar */
#navbar ul{
  list-style-type:none;
}

/* Drop-down menu styles */
#navbar li ul{
  position:absolute;
  z-index:100;
  visibility:hidden;
}
/*  Make drop-down visible on navbar hover */
#navbar li:hover ul,
#navbar li a:hover ul{
 /* IE6 hack */
  visibility:visible;
  top:1.6em;
  left:0;
}
/* Applies to links on the drop-down menu */
#navbar li:hover ul li a,
#navbar li a:hover ul li a{
 /* IE6 hack */
  background:#f2edd9; /* removes background image */
  color:#000;
  text-align:left;
  display:block;
  width:10em;
  padding:0 0 0 1em;
  height:auto;
}
/* IE6 hack applies to its table drop-down */
#navbar table {
  margin:1px; 
  border-collapse:collapse; 
  position:absolute;
  top:0.5em;
  left:0;
  z-index:100;
}
/* Hover on drop-down menu links */
#navbar li:hover ul li a:hover,
#navbar li a:hover ul li a:hover{
 /* IE6 hack */
  background: #e6d6b3;
  color:#000;
}

#navbar li ul:hover{
border:solid 1px #523f14;
border-right:solid 2px #523f14;
border-bottom:solid 2px #523f14;
}

/* List items in the navbar */
#navbar li{
  float:left;
/* Required for drop-down menus */
position:relative;
}

/* Applies to navbar links, unvisited and visited */
#navbar a,
#navabar a:link,
#navbar a:visited{
  text-decoration:none;
  font-family:Verdana, Geneva, Arial, Sans-Serif;
  font-size:80%;
  color:#000;
  background-color:#d3c17c url(images/beige005.jpg) repeat-x center;
  display:block;
  height:2em;
  width:6em;
  border-right:solid 1px #ddd;
  text-align:center;
  line-height:2em;
  outline-style:none;
}

/* Navbar hover and active links */
#navbar a:hover,
#navbar a:active,
#navbar li.selected a:link,
#navbar li.selected a:visited{
  background:#ddd url(images/beige005.jpg) repeat-x center;
  color:#000;
}

#leftcolumn{
  /* Content and navbar left margins must match this width */
  width:12em;
  float:left;
 /* Temporary border */
 
 /* Center images and text inside this div */
 text-align:center;
}

/* Applies to images in the leftcolumn div */
#leftcolumn img{
  width:80%;
}

/* Applies to paragraphs in the leftcolumn division */
#leftcolumn p{
  border:none;
  padding:0.5;
  width:10em;
  font-size:0.8em;
  margin:1em auto;
  text-align:left;
}

/* Applies to all lists in the leftcolumn division */
#content ul, #content ol{
  padding:5px 0 5px 25px;
  font size:0.6em;
  margin:0.5em;
  text-align:left;
}

div.vertcenter{
  background-color:#f5e6d6; /* tan */
  border:solid 1px #630; /* brown */
  height:14em;
  width:20em;
  position:absolute;
  top:50%; 
  left:50%;
  margin-top:-7em; /* Half the height */
  margin-left:-10em /* Half the width */
}

.scrollbar{
  width:10em;
  height:5em;
  padding:0.25em;
  border:solid thin #000;
  background-color:#ddd;
  overflow:auto;
}

/* Captioned pictures */
div.captionpic{  
  width:15em;
  padding:0.25em;
  margin:0.25em 0.25em 0 0;
  float:left;
  border:solid 1px #000;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size:0.8em;
  color:#555;
  text-align:center;
}

/* Captioned images */
div.captionimg{  
  width:15em;
  padding:0.25em;
  margin:0.25em 0.25em 0 0;
  float:right;
  border:solid 1px #000;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size:0.8em;
  color:#555;
  text-align:center;
}
/* Applies to all text on page */
.xsmallText {
font-size:x-small;
margin:0 10px 0 10px;
}

.xxsmallText {
font-size:xx-small;
margin:0;
}

/* Change the mouse pointer to an arrow when pointing to
an abbreviation or acronym. */
acronym, abbr {
cursor:help;
}

 /* Applies to entire gallery div */
        #gallery{
            position:relative;           
        }
        
        /* Small thumbnail images */
        #gallery a img {
            width: 6em;
            margin:0.25em 0;
            border:solid 1px #000;
         }
        
        /* Large image size */
        #gallery a span img {
            width: 30em;
        }
        
        /* Span that surrounds large image */
        #gallery a span {            
            position: absolute;
            /* Hidden at first */
            visibility: hidden;   
            border: solid 1px #000;            
            background-color: #f5e6d6;
            padding:1em;
            color: black;     
        }
         
        /* IE6 needs this style rule */
        #gallery a:hover {
            background-color: transparent;
            z-index:5;
            text-decoration:none;            
        }  
                        
        /* Make large image visible on hover */
        #gallery a:hover span {
            visibility: visible;
            top: 0em;
            left: 8em; 
        }
/* Applies to entire gallery1 div */
        #gallery1{
            position:relative;           
        }
        
        /* Small thumbnail images */
        #gallery1 a img {
            width: 6em;
            margin:0.25em 0;
            border:solid 1px #000;
         }
        
        /* Large image size */
        #gallery1 a span img {
            width: 30em;
        }
        
        /* Span that surrounds large image */
        #gallery1 a span {            
            position: absolute;
            /* Hidden at first */
            visibility: hidden;   
            border: solid 1px #000;            
            background-color: #f5e6d6;
            padding:1em;
            color: black;     
        }
         
        /* IE6 needs this style rule */
        #gallery1 a:hover {
            background-color: transparent;
            z-index:5;
            text-decoration:none;            
        }  
                        
        /* Make large image visible on hover */
        #gallery1 a:hover span {
            visibility: visible;
            top: 10em;
            left: 8em; 
        }
a, a:visited, a:hover,  a:active, a:focus {font-weight:normal;} /* for IE6 */

ul#gallerya {
  padding:0; 
  margin:100px auto; 
  width:448px; 
  height:336px; 
  position:relative; 
  background:#888 url(graff/g26.jpg);
  }
#gallerya li {
  list-style-type:none; 
  width:64px; 
  height:48px; 
  float:left; 
  z-index:100;
  }
#gallerya li.lft {
  float:left; 
  clear:left;
  }
#gallerya li.rgt {
  float:right; 
  clear:right;
  }
#gallerya a {
  position:relative; 
  width:64px; 
  height:48px; 
  display:block; 
  float:left; 
  z-index:100; 
  cursor:default;
  }
#gallerya a img {
  position:relative; 
  width:62px; 
  height:46px; 
  border:1px solid #888; 
  z-index:100;
  }
#gallerya a:hover {
  width:160px; 
  height:120px; 
  padding:108px 144px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:20;
  }
#gallerya a:hover img {
  background:#eee; 
  position:relative; 
  width:160px; 
  height:120px; 
  border:0; 
  z-index:20;
  }
#gallerya a:active, #gallery a:focus {
  background:transparent; 
  width:320px; 
  height:240px; 
  padding:48px 64px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:10;
  }
#gallerya a:active img, #gallery a:focus img {
  background:#eee; 
  position:relative; 
  width:320px; 
  height:239px; 
  border:0; 
  z-index:10;
  }
/* hack for Internet Explorer */
#gallerya li.pad {
  height:0; 
  display:block; 
  margin-top:-2px; 
  width:448px; 
  font-size:0;
  }
a, a:visited, a:hover,  a:active, a:focus {font-weight:normal;} /* for IE6 */

ul#galleryb {
  padding:0; 
  margin:100px auto; 
  width:448px; 
  height:336px; 
  position:relative; 
  background:#888 url(graff/g26.jpg);
  }
#galleryb li {
  list-style-type:none; 
  width:64px; 
  height:48px; 
  float:left; 
  z-index:100;
  }
#galleryb li.lft {
  float:left; 
  clear:left;
  }
#galleryb li.rgt {
  float:right; 
  clear:right;
  }
#galleryb a {
  position:relative; 
  width:64px; 
  height:48px; 
  display:block; 
  float:left; 
  z-index:100; 
  cursor:default;
  }
#galleryb a img {
  position:relative; 
  width:62px; 
  height:46px; 
  border:1px solid #888; 
  z-index:100;
  }
#galleryb a:hover {
  width:160px; 
  height:120px; 
  padding:108px 144px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:20;
  }
#galleryb a:hover img {
  background:#eee; 
  position:relative; 
  width:160px; 
  height:120px; 
  border:0; 
  z-index:20;
  }
#galleryb a:active, #gallery a:focus {
  background:transparent; 
  width:320px; 
  height:240px; 
  padding:48px 64px; 
  position:absolute; 
  left:0; 
  top:0; 
  z-index:10;
  }
#galleryb a:active img, #gallery a:focus img {
  background:#eee; 
  position:relative; 
  width:320px; 
  height:239px; 
  border:0; 
  z-index:10;
  }
/* hack for Internet Explorer */
#galleryb li.pad {
  height:0; 
  display:block; 
  margin-top:-2px; 
  width:448px; 
  font-size:0;
  }

/* Applies to the image inside a cationpic div */
div.captionpic img{
  width:80%;
  border:none;
  img-align:center;
}

/* Applies to the image inside a cationimg div */
div.captionimg img{
  width:80%;
  border:none;
  img-align:center;
}

#content{
 /* Left margin must match leftcolumn */
  margin-left:12em;
  background-color:#fff;
  color:#000;
  padding:10px 20px;
}

/* Applies to h1 elements in the content division */
#content h1{
  font-family: Charcoal, Impact, sans-serif;
  color:#806659;
  font-weight:normal;
  font-style:italic;
  font-variant:small-caps;
  letter-spacing:0.08em;
}

/* Applies to all lists in the content division */
#content ul, #content ol{
  padding:10px 0 10px 40px;
}

/* Line spacing in content division */
#content p{
  line-height:1.5em;
}

/* Styles h1, h2, and h3 style rules in the content division */
#content h1, #content h2, #content h3{
  font-family: Charcoal, Impact, sans-serif;
  color:#806659;
  font-weight:normal;
  font-style:italic;
  font-variant:small-caps;
  letter-spacing:0.08em;
}


/*  Size h1 headings in the content division */
#content h1{
  font-size:2em;
}

/* Size h2 headings in the content division */
#content h2{
  font-size:1.5em;
}
/* Size h3 headings in the content division */
#content h3{
  font-size:1.25em;
  font-style:normal;
}

footer{
  background-color:#d3c17c url(images/beige005.jpg)   repeat-x center;
  display:block;
  clear:both;
  border-top: solid 1px #117b6f;
  padding:0.5em;
  text-align:center;
}

#footer a:link,
#footer a:visited{
/* No underline on links */
  text-decoration:none;
}

#footer a:hover,
#footer a:active{
  color:#0c0;
  border: dotted 1px #333;
}

.hotkey{
  text-decoration:underline;
}

@media print{
/* Start printer-friendly styles */

/* Set wrapper to fill page width */
#wrapper{
width:100%;
}

/* Hide leftcolumn, navbar,and footer */
#leftcolumn,
#navbar,
#footer{
display:none;
}

/* Get rid of content div margins and
padding. Use a different font for print */
#content{
margin:0;
padding:0;
font-family:'Century Schoolbook', Times, Serif;
font-size:1em;
}

/*End printer-friendly styles */
}

/* Sample generic class selector */
/* Applies only where class="hilite" */
.hilite{
background-color:#ff0;
}

/* This style applies only to */
/* em class="hilite" tags */
em.hilite{
background-color:#0ff;
}

/* style for tables of thumbnail images */
table.thumbs
{
 background-color: #ffffcc;
 background-image: url("beige005.jpg");
 backgroung-repeat: repeat;
 vertical-align: middle;
 text-align: center;
 border-collapse: collapse;
 margin:auto;
}

/* style for table cells that contain thumbnails */
td.thumbs
{
 border: solid 5px #2972a3;
 padding: 10px;
}

/* style for thumbnail images */
img.thumbs
{
 width:100px;
}