body { background: #e2f2ff; }

#banner { width: 98%; max-width: 1000; height: auto; }

/* The color buttons at the top */

.gallerynav a { border: 2px outset #eee; background: #bfb; }

.gallerynav a, .gallerynav span { 
  display: inline-block; 
  min-width: 4em;
  text-align: center;
  font-weight: bold;

  background: #eef;
  padding: .3em .8em;
  border: 2px outset #aaa;
  text-decoration: none;
}

.gallerynav a:hover {
  background: white;
}

.gallerynav .selected {
  background: #eef;
  border: 2px solid #eee;
}

.gallerynav .selected { 
  /* Try to move it down one pixel, because of an illusion from the
   * border that it's higher than the other buttons.
   * margin-top doesn't work, but position: relative does.
  margin-top: 1px;
   */
  margin: auto auto auto 5px;
  border: 2px inset #eee;
  position: relative;
  top: 1px;
}

#blue { background: #57f; color: white; }
a#blue:hover { background: blue; color: white; }

#purple { background: #d3f; color: white; }
a#purple:hover { background: #e8f; color: black; }

#red { background: red; color: white; }
a#red:hover { background: #f66; color: black; }

#orange { background: #f70; color: white; }
a#orange:hover { background: #fa3; color: black; }

#yellow { background: yellow; color: black; }
a#yellow:hover { background: #ed0; color: black; }

#white { background: white; color: black; }
a#white:hover { background: #ddd; color: black; }