Step 8: Navigation Bar 2 CSS

BODY {
  MARGIN: 0;
  PADDING: 0;
  BACKGROUND-IMAGE:  url(../images/bckgd.gif);
  BACKGROUND-REPEAT: repeat;
  FONT-FAMILY: helvetica, arial, sans-serif;
  FONT-SIZE: small;
}

DIV#body {
  MARGIN: 0;
  PADDING: 0;
  BORDER: rgb(56,56,73) 2px solid;
  MARGIN-TOP: .75em;
  MARGIN-LEFT: 5%;
  WIDTH: 90%;
  BACKGROUND-COLOR: #FFFFFF;
}

IMG.logo {
  BORDER: white 2px solid;
  LEFT: 7%;
  POSITION: absolute;
  TOP: 2em;
}

DIV#title {
  MARGIN: 0px;
  PADDING: 0px;
  PADDING-TOP: 0.35em;
  PADDING-TOP: 0.35em;
  BORDER-BOTTOM: rgb(66,66,118) 1px solid;
  BACKGROUND-POSITION: right top;
  BACKGROUND-IMAGE:  url(../images/arcade.jpg);
  BACKGROUND-REPEAT: no-repeat;
  BACKGROUND-COLOR: rgb(66,66,118);
  COLOR: #ffffff;
}

DIV#title P.title {
  MARGIN: 0;
  PADDING: 0;
  FONT-SIZE: 225%;
  MARGIN-LEFT: 70px;
  TEXT-TRANSFORM: uppercase;
  PADDING-TOP: 0px;
  FONT-FAMILY: "Adobe Garamond", garamond, times, serif;
  FONT-WEIGHT: normal;
}

DIV#title P.uiuc {
  MARGIN: 0;
  PADDING: 0;
  MARGIN-LEFT: 75px;
  PADDING-BOTTOM: .5em;
  FONT-SIZE: 72%;
  TEXT-TRANSFORM: uppercase;
  FONT-FAMILY: "univers 55", ariel, helvetica, sans-serif;
  LETTER-SPACING: 0.2em
}


DIV#title A {
  COLOR: white;
  TEXT-DECORATION: none;
}

DIV#title A:link, DIV#title A:visited {
  COLOR: white;
}


DIV#title A:hover, DIV#title A:focus {
  COLOR: rgb(204,102,0);
}

SPAN.title {
  FONT-SIZE: 150%;
}

H2.nav {
  POSITION: absolute;
  TOP: -20em;
  LEFT: -200em;
}

DIV#nav1 {
  MARGIN: 0;
    PADDING: 0;
  PADDING-TOP: 0.25em;
  PADDING-BOTTOM: 0.25em;
  BORDER-BOTTOM: rgb(56,56,73) 1px solid;
  WIDTH: 100%;
  COLOR: white;
  BACKGROUND-COLOR: #f5b673;
  TEXT-ALIGN: center
}

DIV#nav1 UL {
  PADDING: 0px;
  MARGIN: 0px;
}

DIV#nav1 LI {
  DISPLAY: inline;
  PADDING-LEFT: 0.5em;
  BACKGROUND-IMAGE:  url(../images/separator-1.png);
  BACKGROUND-REPEAT: no-repeat;
  BACKGROUND-POSITION: left center;
}

DIV#nav1 LI.nobullet {
  BACKGROUND-IMAGE: none;
}

DIV#nav1 A {
  PADDING: 0px;
  PADDING-RIGHT: 0.25em;
  PADDING-LEFT: 0.25em;
  TEXT-DECORATION: none;
}

DIV#nav1 A:link, DIV#nav1 A:visited  {
  FONT-WEIGHT: bold;
  COLOR: rgb(56,56,73);
}

DIV#nav1 A:hover, DIV#nav1 A:focus {
  COLOR: #f5b673;
  BACKGROUND-COLOR: rgb(56,56,73)
}

/* Step 8 new code after this line */

DIV#nav2 {
  MARGIN: 0px;
  PADDING: 0px;
  PADDING-BOTTOM: 0.25em;
  PADDING-TOP: 0.25em;
  BORDER-BOTTOM: rgb(56,56,73) 1px solid;
  WIDTH: 100%;
  COLOR: rgb(56,56,73);
  BACKGROUND-COLOR: white;
  TEXT-ALIGN: center;
  FONT-FAMILY: "Times new roman", times, sans-serif;
}

DIV#nav2 UL {
  PADDING: 0px;
  MARGIN: 0px;
}

DIV#nav2 LI {
  MARGIN: 0px;
  PADDING: 0px;
  PADDING-LEFT: 0.5em;
  DISPLAY: inline;
  BACKGROUND-IMAGE:  url(../images/separator-2.jpg);
  BACKGROUND-REPEAT: no-repeat;
  BACKGROUND-POSITION: left center;
}

DIV#nav2 LI.nobullet {
  BACKGROUND-IMAGE: none;
}

DIV#nav2 A {
  MARGIN: 0px;
  PADDING: 0px;
  PADDING-RIGHT: 0.25em;
  PADDING-LEFT: 0.25em;
  TEXT-DECORATION: none
}

DIV#nav2 A:link, DIV#nav2 A:visited  {
  FONT-WEIGHT: bold;
  COLOR: rgb(56,56,73);
}

DIV#nav2 A:hover, DIV#nav2 A:focus  {
  COLOR: #f5b673;
  BACKGROUND-COLOR: rgb(56,56,73)
}