/* Contains the entire header. */
/* The header contains the banner and the menu bar. */
#cjasHeader {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 131px;
  width: 100%;
  min-width: 700px;
}

/* For stretching the banner to the left. */
/* This is layered under the actual banner. */
#cjasBannerStretchLeft {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 86px;
  width: 50%;
  background: url(banner-fill-left.png) repeat-x;
  z-index: 1001;
}

/* For stretching the banner to the right. */
/* This is layered under the actual banner. */
#cjasBannerStretchRight {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 86px;
  width: 50%;
  background: url(banner-fill-right.png) repeat-x;
  z-index: 1001;
}

/* The actual banner. */
#cjasBanner {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 86px;
  background: url(banner.png) no-repeat top center;
  z-index: 1002;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
}

/* This contains the entire menu bar. */
#cjasMenuBar {
  position: absolute;
  top: 86px;
  left: 0px;
  width: 100%;
  min-width: 700px;
  height: 45px;
  z-index: 1002;
}

/* This produces the rounded effect on the left edge of the menu bar. */
#cjasMenuBarLeft {
  padding-left: 10px;
  background: url(button-bar-left-corner.png) no-repeat top left;
}

/* This produces the rounded effect on the right edge of the menu bar. */
#cjasMenuBarRight {
  background: url(button-bar-right-corner.png) no-repeat top right;
  padding-right: 10px;
}

/* This fills the menu bar's background. */
#cjasMenuBarFill {
  background: url(button-bar-fill.png) repeat-x top center;
}

/* This produces the part of the mascot that overlaps the menu bar. */
#cjasMascotComplete {
  width: 100%;
  height: 45px;
  background: url(mascot-complete.png) no-repeat top center;
}

/* The actual menu is a list. */
/* Disables list decorations and positions it properly. */
#cjasMenu {
  position: absolute;
  left: 50%;
  margin: 0px 0px 0px -280px;
  padding: 0px;
  height: 45px;
  list-style: none;
  white-space: nowrap;
}

#cjasMenu li {
  margin: 0px;
  padding: 0px;
  display: inline;
}

/**
 * Site menu stuff follows.
 *
 * Each link has four states:
 *   1. Inactive - neither it nor its neighbours are highlighted.
 *   2. Active - the link is highlighted.
 *   3. InactiveL - the link to the left is highlighted.
 *   4. InactiveR - the link to the right is highlighted.
 *
 * The image for each link consists of images for each state, vertically
 * stacked, in the above order.
 *
 * Link text is in 16pt Verdana font with a 17px left/right margin, 3px top
 * margin, and 6px bottom margin.  Active link text is coloured #ffffff;
 * inactive is #444444.  Behind the link text is a 2px shadow effect, coloured
 * #aaaaaa (in GIMP, it's a "Drop Shadow" with a (0,0) offset and 80% opacity).
 */

/* Make sure the menu items all have the right height and layout.      */
/* Also, hide the text for the menu items; we're using images instead. */
#cjasMenu li a,
#cjasMenu li span {
  height: 30px;
  float: left;
  overflow: hidden;
  text-indent: -9999px;
  text-align: left;
  background-repeat: no-repeat;
}

.cjasLinkActive {
  background-position: 0% -30px;
}

.cjasLinkInactiveL {
  background-position: 0% -60px;
}

.cjasLinkInactiveR {
  background-position: 0% -90px;
}

#cjasMenu li span.cjasMenuBorder {
  width: 8px;
  background-image: url(menu-border.png);
}

/* The Blog link. */
#cjasMenu li a.cjasBlogLink {
  width: 67px;
  background-image: url(blog.png);
}

/* The Forums link. */
#cjasMenu li a.cjasForumsLink {
  width: 93px;
  background-image: url(forums.png);
}

/* The Wiki link. */
#cjasMenu li a.cjasWikiLink {
  width: 66px;
  background-image: url(wiki.png);
}

/* Used to push the page content below the header. */
#cjasHeaderSkip {
  height: 120px;
}