/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url('assets/skybg.png');
  color: black;
  font-family:'Arial';
}

a {
  color: darkblue;
  font-style: bold, underline;
}

.topnav {
  background-color: lightgreen;
  color: darkblue;
  border: 3px solid black;
  outline: 1px solid gray;
  border-collapse: collapse;
  width: auto;
  height: auto;
  float:center;
}

.box {
  background-color: white;
  width: 600px;
  height: auto;
  border: 3px solid black;
  padding: 0px;
  margin: auto;
  text-align: center;
  outline: 1px solid gray;
  border-collapse: collapse;
}

.textbox {
  background-color: white;
  width: 600px;
  height: auto;
  border: 3px solid black;
  padding: 0px;
  margin: auto;
  text-align: left;
  outline: 1px solid gray;
  border-collapse: collapse;
}

.textbox2 {
  background-color: white;
  width: auto;
  height: auto;
  border: 3px solid black;
  padding: 0px;
  margin: auto;
  text-align: left;
  outline: 1px solid gray;
  border-collapse: collapse;
  float: center;
}

.headbox {
  background-color: blue;
  color: white;
  width: 600px;
  height: auto;
  border: 3px solid black;
  padding: 0px;
  margin: auto;
  text-align: center;
  outline: 1px solid gray;
  border-collapse: collapse;
}

.imgboxr {
  width: auto;
  height: auto;
  float: right;
  border: 2px dotted gray;
  margin: 5px;
}

.imgboxl {
  width: auto;
  height: auto;
  float: left;
  border: 2px dotted gray;
  margin: 5px;
}

.imgboxc {
  width: auto;
  height: auto;
  float: center;
  text-align: center;
  border: 2px dotted gray;
  margin: 5px;
}

figcaption {
  width: auto;
  height: auto;
  border: 1px dotted gray;
  margin: 5px;
  font-size: 12px;
  color: gray;
  font-style: italic;
  border-collapse: collapse;
}



.back {
  background-color: lightgray;
  width: 768px;
  height: auto;
  border: 2px dashed gray;
  border-collapse: collapse;
}

table, tr, td {
  background-color: white;
  color: black;
  width: 600px;
  height: 30px;
  border: 3px solid black;
  padding: auto;
  margin: auto;
  text-align: center;
  line-height: 7px;
  border-collapse: collapse;
  outline: 1px solid gray;
  word-wrap: break-word;
}

th {
  background-color: lightgreen;
  color: darkblue;
  width: 600px;
  height: 30px;
  border: 3px solid black;
  padding: auto;
  margin: auto;
  text-align: center;
  line-height: 7px;
  border-collapse: collapse;
  outline: 1px solid gray;
  word-wrap: break-word;
}

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background-color: yellow;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background-color: lightgray;
  display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background-color: white;}