body {
  width:800px;
  font-family: "Droid Serif", "Palatino Linotype", serif;
  font-size: medium;
  line-height: 1.4em;
  background: #005500;
  color: #FFFFFF;
  text-align: justify;
  text-justify: inter-word;
}
body#black {
  background: #000000;
}
body#green {
  background: #005500;
}
body#red {
  background: #550000;
}
body#blue {
  background: #000055;
}
body#yellow {
  background: #555500;
}
body#purple {
  background: #550055;
}
body#cyan {
  background: #005555;
}
body#grey {
  background: #555555;
}

a {
  color: #005500;
}
div.content {
  margin-left:6px;
  margin-right:6px;
  margin-top:6px;
  margin-bottom:6px;
  padding:12px;
  color: #000000;

  img {
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 640px;
  }

  border: 2px solid #55aa00;
  border-radius: 25px;
  background: #FFFFFF;
}
div.opening-quote {
  font-size: large;
  font-style: italic;
  font-weight: bold;
  margin: 16px;
}
div.menu {
  margin-left:12px;
  margin-right:12px;
  margin-top:6px;
  margin-bottom:6px;
  padding:12px;
  padding-left:24px;
  padding-right:24px;

  border: 2px solid #00aaaa;
  border-radius: 25px;
  background: #aaffff;
  color: #550000;
  line-height: 32px;
  text-align: left;
  max-width: 800px;

  div.menuindex {
    border: 2px solid #00aaaa;
    border-radius: 25px;
    background: #000000;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:8px;
    padding-right:8px;
    color: #FFFFFF;
    a {
      color: #FFFFFF;
      text-decoration: none;
    }
    a:visited {
      color: #FFFFFF;
    }
    a:hover {
      color: #AAFFFF;
    }
  }
  div.black {
    border: 2px solid #00aaaa;
    border-radius: 25px;
    background: #000000;
    padding:2px;
    color: #FFFFFF;
    max-width: 620px;
    a {
      padding:8px;
      color: #FFFFFF;
      text-decoration: none;
    }
    a:visited {
      color: #FFFFFF;
    }
    a:hover {
      color: #AAFFFF;
    }
  }
  div.green {
    border: 2px solid #00aaaa;
    border-radius: 25px;
    background: #00AA00;
    padding:2px;
    color: #FFFFFF;
    max-width: 620px;
    a {
      padding:8px;
      color: #FFFFFF;
      text-decoration: none;
    }
    a:visited {
      color: #FFFFFF;
    }
    a:hover {
      color: #AAFFFF;
    }
  }
  div.red {
    border: 2px solid #00aaaa;
    border-radius: 25px;
    background: #AA0000;
    padding:2px;
    color: #FFFFFF;
    max-width: 620px;
    a {
      padding:8px;
      color: #FFFFFF;
      text-decoration: none;
    }
    a:visited {
      color: #FFFFFF;
    }
    a:hover {
      color: #AAFFFF;
    }
  }
  div.blue {
    border: 2px solid #00aaaa;
    border-radius: 25px;
    background: #0000AA;
    padding:2px;
    color: #FFFFFF;
    max-width: 620px;
    a {
      padding:8px;
      color: #FFFFFF;
      text-decoration: none;
      white-space:nowrap;
    }
    a:visited {
      color: #FFFFFF;
    }
    a:hover {
      color: #AAFFFF;
    }
  }
  div.yellow {
    border: 2px solid #00aaaa;
    border-radius: 25px;
    background: #AAAA00;
    padding:2px;
    color: #FFFFFF;
    max-width: 620px;
    a {
      padding:8px;
      color: #FFFFFF;
      text-decoration: none;
    }
    a:visited {
      color: #FFFFFF;
    }
    a:hover {
      color: #AAFFFF;
    }
  }
  div.purple {
    border: 2px solid #00aaaa;
    border-radius: 25px;
    background: #AA00AA;
    padding:2px;
    color: #FFFFFF;
    max-width: 620px;
    a {
      padding:8px;
      color: #FFFFFF;
      text-decoration: none;
    }
    a:visited {
      color: #FFFFFF;
    }
    a:hover {
      color: #AAFFFF;
    }
  }
  div.cyan {
    border: 2px solid #00aaaa;
    border-radius: 25px;
    background: #00AAAA;
    padding:2px;
    color: #FFFFFF;
    max-width: 620px;
    a {
      padding:8px;
      color: #FFFFFF;
      text-decoration: none;
    }
    a:visited {
      color: #FFFFFF;
    }
    a:hover {
      color: #AAFFFF;
    }
  }
  div.grey {
    border: 2px solid #00aaaa;
    border-radius: 25px;
    background: #AAAAAA;
    padding:2px;
    color: #FFFFFF;
    max-width: 620px;
    a {
      padding:8px;
      color: #FFFFFF;
      text-decoration: none;
    }
    a:visited {
      color: #FFFFFF;
    }
    a:hover {
      color: #AAFFFF;
    }
  }
}
@media (min-width: 850px) {
  body {
    margin:32px;
    margin-left:7%;
  }
}
@media (max-width: 850px) {
  body {
    margin:0px;
    margin-top:8px;
    margin-bottom:8px;
  }
}
@media (max-width: 799px) {
  body {
    margin:0px;
    margin-top:8px;
    margin-bottom:8px;
    width:100%;
  }
  img {
    width:100%;
    margin-left:0px;
    margin-right:0px;
  }
}