/*  ---  BODY  -------------------------------------------------   */

/*
 *  We set the left margin to a fixed size to accomodate the
 *  contents of the navigation bar.
 *
 */

body {

  /* important */
  margin-left:    100px;    /* give navigation bar a wide margin     */

  /* not important */
  margin-right:   2em;
  margin-top:     1em;
  background:     #FFFFF8;
}


/*  ---  Navigation Bar  ----------------------------------------  */

/*
 *  Here's where the magic happens. First we put the division
 *  containing the navigation bar in an absolute position using
 *  the left property. Then we set its position to fixed, which
 *  keeps it from scrolling with the rest of the page's contents.
 *
 *  Adjust padding, background, and borders to taste.
 *
 */

div.navigation-bar {

  /* important */
  left:           15px;         /* put it in wide left margin            */
  position:       fixed;        /* prevent it from scrolling with page   */

  /* not important */
  padding:        10px;
  background:     #F0F0FF;
  border-top:     5px solid #B0B080;
  border-bottom:  5px solid #B0B080;
}


/*
 *  We use this to make the vertical bars that appear between menu
 *  items on non-CSS browsers invisible on CSS browsers.
 *
 */

.invisible {

  /* important */
  display:        none;          /* hide on browsers that render CSS      */
}


/*
 *  The only really important property here is display. It forces line
 *  breaks between items. The rest can be changed as you like.
 *
 */

.navbar-item {

  /* important */
  display:        block;         /* forces line breaks between items       */

  /* not important */
  margin-bottom:  0px;
  padding:        0px;
  font-size:      smaller;
  font-family:    "Century Gothic", "News Gothic", Helvetica, Arial, sans-serif;
  text-align:     right;
}


/*
 *  This adds some spacing between the logo and the first navbar item.
 *
 */

#first-navbar-item {

  /* not important */
  margin-top:     15px;
}


/*
 *  This inserts the logo into the navigation bar.
 *
 */

span.navbar-image:after {

  /* important */
  content:        url(css.tip.1.generic.logo.gif);  /* inserts image after dummy SPAN element */
}




/*  ---  Content styles  ----------------------------------------  */


/*
 *  All of these styles are window dressing, and not important
 *  to the example.
 *
 */

p {

  /* not important */
  text-align:     justify;
  color:          #000000;
}