body{
  background: black;
  color: #CCC;
  font-family: Arial, "MS Trebuchet", sans-serif;
  font-size: small;
  min-width: 800px;
  
  text-align: center; /* main block centered in IE */
}    

#main-wrapper{
  background: transparent url('../graphics/swirl.png') 0px -15px no-repeat;
  margin-left: auto;
  margin-right: auto;
  width: 940px;
}

#main{
  background: transparent url('../graphics/background.gif') top center no-repeat;
  padding: 25px 0 0 0;
}

#sidebar{
  float: left;
  width: 270px;
}

#sidebar-content{
  font-size: 120%;
  margin-left: 70px;
  text-align: right;
}

#logo{
  border-style: none;
}

#sidebar-content ul{
  list-style: none;
}

#sidebar-content li{
  font-weight: bold;
  margin: 8px 8px 0 0;
}

#sidebar-content #selected_show{
  text-decoration: underline;
}

#sidebar-content a:link,
#sidebar-content a:hover,
#sidebar-content a:active,
#sidebar-content a:visited{
  color: #CCC;
  font-weight: normal;
  text-decoration: none;
}

#sidebar-content a:hover{
  color: red;
}

#showlist{
}

#material{
  float: right;
  width: 670px;
}

#material-menu{
  margin: 0;
}

/* See bottom of file for menu styles *****/

#material-content{
  margin-right: 75px;
  min-height: 650px;
  text-align: center;
}

#material-content img{
  border: 1px solid #CCC;
}

/* this doesn't work in IE 6. */
#material-content img:hover,
#material-content img:active{
  border-color: red;
  cursor: pointer;
}

#material-content p{
  font-size: 110%;
  line-height: 1.3em;
  padding: 0 25px;
  text-align: left;
}

#material-content-showinfo{
  background: url('../graphics/showinfobox-bottom.gif') no-repeat bottom;
  margin-bottom: 8px;
  padding-bottom: 1px; /*IE will lose the bottom of the box on the SlideUp without this*/
}

/* for the contactinfo.gif graphic only */
#material-content-contactbox{
  background: url('../graphics/contactinfo.gif') no-repeat top;
  height: 250px;
}

#material-content-contactbox h1{
  font-size: 180%;
  padding: 20px 40px 0 40px;
}

  /*This is a wrapper div for #showinfo-toggle-ctl to fix what my IE 6 fix broke.*/
  #showinfo-ctl{
    margin: -20px 0 0 0;
    padding: 0 0 5px 25px;
    text-align: left;           
  }
  
  /*IE 6 will lose the box bottom if we apply negative margins, because it is awful.*/
  * html #showinfo-ctl{
    margin: 0;
  }
  
  #showinfo-toggle-ctl{
    cursor: pointer;
    font-size: 80%;
    font-weight: bold;
  }
    
  #showinfo-toggle-ctl:hover{
    color: red;
  }
  
  h1#showtitle{
    background: url('../graphics/showinfobox-top.gif') no-repeat top;
    font-size: 180%;
    padding: 10px 40px 0 40px;
  }
  
  /* these link rules are mostly for the resume page, for now */
  h1#showtitle a:link,
  h1#showtitle a:visited{
    color: #CCC;
  }
  
  h1#showtitle a:hover,
  h1#showtitle a:active{
    color: red;
  }
          
  #showinfo-extended{
    padding: 0 40px 5px 40px;
  }

  #showinfo-extended h3{
    font-size: 90%;
    margin: 8px 0 0 0;
    text-align: center;
  }

#material-content .caption{
  font-style: italic;
  text-align: right;
}

#material-content-imagebox,
#material-content-imagebox-index{
  margin: 0 auto 20px auto;
}

/*don't want the photo on the landing page to be clickable, so overriding rules above*/
#material-content-imagebox-index img:hover,
#material-content-imagebox-index img:active{
  border-color: #CCC;
  cursor: inherit;
}

.press{
  margin: 30px auto 0 auto;
}

h3.press-headline{
  font-size: 120%;
  padding-left: 15px;
  text-align: left;
}

div.press-caption{
  padding: 0 30px 0 30px;
  text-align: left;
}

.press-credit{
  font-size: 110%;
  font-weight: bold;
  margin-top: 8px;
  padding-right: 15px;
  text-align: right;
}

.press-credit a:link,
.press-credit a:visited{
  color: #ccc;
}

.press-credit a:hover,
.press-credit a:active{
  color: red;
}

.press-credit a:after{
  content: ' [link]';
}

#material-content-imagetable{
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}
      
#footer{
  background: black url('../graphics/footer.gif') 1px 0px no-repeat;
  clear: both;
  font-size: 85%;
  height: 125px;
  line-height: 1.5em;
  padding: 35px 0 0 225px;
  text-align: center;
}

#footer a:link,
#footer a:visited{
  color: #CCC;
  text-decoration: none;
}

#footer a:hover,
#footer a:active{
  color: red;
}

img#large{
  border: 1px solid #CCC;
}

#nav-next,
#nav-prev,
#nav-close{
  font-size: 180%;
  font-weight: bold;
}

#nav-next{
  float: right;
}

#nav-prev{
  float: left;
}

#nav-next:link,
#nav-next:visited,
#nav-prev:link,
#nav-prev:visited,
#nav-close:link,
#nav-close:visited{
  color: #ccc;
  text-decoration: none;
}

#nav-next:hover,
#nav-next:active,
#nav-prev:hover,
#nav-prev:active,
#nav-close:hover,
#nav-close:active{
  color: red;
  text-decoration: underline;
}

/* MENU styles */
ul#menu{
  height: 75px;
  list-style: none;
  margin: 8px auto -22px 5px;
  padding: none;
  position: relative;
  /*width: 600px;*/ 
}

ul#menu li{
  display: block;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  position: absolute;
  top: 0;
}

#menu li a{
  display: block;
  height: 100%;
  width: 100%;
}

/* never have a border around the links. ever. */
#menu li a:link,
#menu li a:active,
#menu li a:hover,
#menu li a:visited{
  border: none;
  outline: none; /* so Firefox doesn't highlight the link when you click it. */
  text-decoration: none;
}

  /* ****************START of menu states */
  /*SCENIC menu*/
  /* neutral state*/    
  li#menu-scenic{
    background: transparent url('../graphics/drafting-labels.gif') 0 0 no-repeat;
    left: 0;
    width: 85px;
  }

  /* hover state */    
  li#menu-scenic a:hover{
    background: transparent url('../graphics/drafting-labels.gif') 0px -150px no-repeat;
  }    

  /* selected state */
  body#scenic li#menu-scenic,
  body#scenic li#menu-scenic a:hover{
    background: transparent url('../graphics/drafting-labels.gif') 0px -75px no-repeat;
  }


  /*COSTUME menu*/
  /*neutral state*/
  li#menu-costume{
    background: transparent url('../graphics/drafting-labels.gif') -86px 0 no-repeat;
    left: 86px;
    width: 115px;
  }

  /* hover state */
  li#menu-costume a:hover{
    background: transparent url('../graphics/drafting-labels.gif') -86px -150px no-repeat;
  }

  /* selected state */
  body#costume li#menu-costume,
  body#costume li#menu-costume a:hover{
    background: transparent url('../graphics/drafting-labels.gif') -86px -75px no-repeat;
  }

  /*DIRECTING menu*/
  /* neutral state */
  li#menu-directing{
    background: transparent url('../graphics/drafting-labels.gif') -201px 0 no-repeat;
    left: 201px;
    width: 110px;
  }

  /* hover state */
  li#menu-directing a:hover{
    background: transparent url('../graphics/drafting-labels.gif') -201px -150px no-repeat;
  }

  /* selected state */
  body#directing li#menu-directing,
  body#directing li#menu-directing a:hover{
    background: transparent url('../graphics/drafting-labels.gif') -201px -75px no-repeat;
  }

  /*PRESS menu*/
  /* neutral state */
  li#menu-press{
    background: transparent url('../graphics/drafting-labels.gif') -311px 0 no-repeat;
    left: 311px;
    width: 85px;
  }

  /* hover state */
  li#menu-press a:hover{
    background: transparent url('../graphics/drafting-labels.gif') -311px -150px no-repeat;
  }

  /* selected state */
  body#press li#menu-press,
  body#press li#menu-press a:hover{
    background: transparent url('../graphics/drafting-labels.gif') -311px -75px no-repeat;
  }

  /*RESUME menu*/
  /* neutral state */
  li#menu-resume{
    background: transparent url('../graphics/drafting-labels.gif') -396px 0 no-repeat;
    left: 396px;
    width: 95px;
  }

  /* hover state */
  li#menu-resume a:hover{
    background: transparent url('../graphics/drafting-labels.gif') -396px -150px no-repeat;
  }

  /* selected state */
  body#resume li#menu-resume,
  body#resume li#menu-resume a:hover{
    background: transparent url('../graphics/drafting-labels.gif') -396px -75px no-repeat;
  }

  /*CONTACT menu*/
  /* neutral state */   
  li#menu-contact{
    background: transparent url('../graphics/drafting-labels.gif') -491px 0 no-repeat;
    left: 491px;
    width: 110px;
  }

  /* hover state */
  li#menu-contact a:hover{
    background: transparent url('../graphics/drafting-labels.gif') -491px -150px no-repeat;
  }

  /* selected state */
  body#contact li#menu-contact,
  body#contact li#menu-contact a:hover{
    background: transparent url('../graphics/drafting-labels.gif') -491px -75px no-repeat;
  }

  /* *******************END of menu states */