/* adding the active/focus state */
#navlist {
  list-style-type:none; 
  padding:0; 
  width:auto; 
  height:3em; 
  margin:0 ;
  }
#navlist li {
  display:block; 
  width:11em; 
  height:2em; 
  float:left; 
  margin-right:1em;
  }
#navlist a {
  display:block; 
  width:11em; 
  height:2em; 
  position:relative; 
  text-decoration:none;
  }
#navlist a em {
  display:block; 
  font-style:normal; 
  width:11em; 
  height:1.5em; 
  color:#b2b2b2; 
  border-bottom:0.5em solid #b2b2b2; 
  position:absolute; 
  top:0; 
  left:0; 
  cursor:pointer;
  }
#navlist a:hover {
  color:#b32d36;
  }
#navlist a:hover em {
  border-bottom:0.5em solid #b32d36;
  }
#navlist a:active, #navlist a:focus {
  width:0; 
  height:0;
  outline:0; /* for browsers that understand */
  }

#navlist a:active em, #navlist a:focus em {

  /* change the em bottom border and text to blue on
  active/focus thus giving a suitable alternative to
  the dotted border */
  border-bottom:0.5em solid #b2b2b2; 
  color:#b32d36;
  outline:0; /* for browsers that understand */
  }