/*
CSS web dev
*/ 

body {
  background-color: lavender;
  font-family: verdana, times new roman;
  font-size: medium;
  padding: 0;
  margin: 0;
}

h1 {
  color: white;
  background-color: blue;
  background-image: url(PICS/homer2.png);
  background-repeat: no-repeat;
  background-position: top right;
  font-family: "comic sans ms";
  padding-top: 2em;
  padding-bottom: .2em;
  padding-left: .4em;
  margin: 0;
}

#tagline p {
  font-family: serif, Baskerville;
  background-color: gold;
  padding-top: .2em;
  padding-bottom: .2em;
  padding-left: .8em;
  margin: 0;
  font-weight: bold;
}

#bodycontent, #header {
  position: absolute;
}

#nav {
  top: 140px;
  z-index: 10;
}

#bodycontent {
  left: 50px;
  right: 50px;
  top: 180px;
  border: 1px solid blue;
  z-index: 5;
}

#header {
  width: 100%;
}

#nav, #nav ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#nav li {
  float: left;
  position: relative;
  width: 10em;
  border: 1px solid #B0C4DE;
  background-color: blue;
  color: yellow;
  font-size: 80%;
  margin-right: 1em;
}

#nav a:link, #nav a:visited {
  display: block;
  text-decoration: none;
  padding-left: 1em;
  color: yellow;
}

* html #nav a {
  width: 100%;
}

#nav ul {
  display: none;
  position: absolute;
  padding: 0;
}

#nav ul li {
  border: none;
  border-bottom: none;
  border-top: none;
  background-color: blue;
  font-size: 100%;
  margin-bottom: -1px;
  margin-top: 1px;
  padding: 0;
}

#nav li:hover ul {
  display: block;
  z-index: 10;
}

#nav li:hover {
  background-color: aqua;
  position:relative;
  font-weight: bold;
  color: blue;
}
 
#nav ul li a:hover {
   background-color: aqua;
   color: blue;
   font-weight: bold;
}

a:visited, a:link {
  color: blue;
  text-decoration: none;
}

a:hover {
  color: red;
  font-weight: bold;
}

hr {
  width: 80%;
  background-color: springgreen;
  height: 3px;
}
}