html, body, div {
  margin: 0;
  padding: 0;
  outline: 0;
}

html {
  height: 100%;
}

#container{
  background-image: url('bg.gif');
  overflow:hidden;
  margin: 0px;
  height: 100%;
}

#content{
  padding: 10px;
  margin:0 auto;
  text-align: center;
  background-color:#FCFFCD;
  width:675px; 
  color: #2d1d0d;
}


h1, h2, p {
  text-align: center;
  margin: 6px;
  padding-bottom: 15px;
}

h1 {
	font-variant: small-caps;
	}

img.logo {
width: 626px;
height: 155px;
padding: 0;
float: center;
}

img.headshot {
width:280px;
height:370px;
float:left;
padding: 0 10px 10px 0;
}

img.grangeback {
float: center;
width: 626px; 
height: 390px;
}

img.grangefront {
float: center;
width: 626px; 
height: 390px;
}

p.grangetext {
text-align:center;
}

p.bio {
text-align:left;
}


#centeredmenu {
   float:left;
   width:100%;
   background:#FCFFCD;
   overflow:hidden;
   position:relative;
}
#centeredmenu ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:50%;
   text-align:center;
}
#centeredmenu ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   right:50%;
}
#centeredmenu ul li a {
   display:block;
   margin:0 0 0 1px;
   padding:3px 10px;
   background:#e0cfae;
   color:#2d1d0d;
   font-variant: small-caps;
   text-decoration:none;
   line-height:1.3em;
}
#centeredmenu ul li a:hover {
   background:#947b74;
   color:#fff;
}
#centeredmenu ul li a.active,
#centeredmenu ul li a.active:hover {
   color:#fff;
   background:#000;
   font-weight:bold;
}