/* Navigation Bar */

/* Background color for the top navigation */
.topnav {
  background-color: #302F7C;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-right: 1px solid #f2f2f2;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #097AC1;
  color: white;
}


/* Basic HTML Element styling */

body {
  margin: 0px;
}

footer {
  margin: 0px;
  padding: 40px;
  font-family: arial;
  color: #ddd;
  background-color: black;
  width:100%;
}

input {
  font-size: 20px;
  padding: 5px;
  width: 75%;
}

select {
  font-size: 20px;
  padding: 5px;
  width: 75%;
}

h1.bannerTable {
  color: navy;
  text-align: center;
}

h2.bannerTable {
  font-family: arial;
  text-align: center;
}

tr:nth-child(even) {
  background-color: #dcdcdc;  
}

/* Divs */

.bodyWrap {
  margin: 40px 40px 40px;
  font-family: arial;
  width: 80%;
}

/* Tables */

/* Page Header */

.bannerTable {
  padding: 10px;
  width: 85%;
}

h1.bannerTable {
  color: navy;
  text-align: center;
}

h2.bannerTable {
  font-family: arial;
  text-align: center;
}

/* List Tables */

.listTable {
   border: 1px solid black;
   border-collapse: collapse;
   margin-top: 10px;
   margin-left: 20px;
   margin-bottom: 200px;
}

.listTable tr th {
   font-size: 20px;
   padding: 15px;
   border: 1px solid black;
   border-collapse: collapse;
   background-color: #80DEFF;
}

.listTable tr td {
   font-size: 16px;
   font-family: arial;
   padding: 10px;
   border: 1px solid black;
   border-collapse: collapse;
   text-align: center;
}

/* Form Table */

.formTable {
   border: 1px solid black;
   border-collapse: collapse;
   margin: 20px 20px 200px;
}

.label {
  color: white;
  background-color: #1D85CE;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 10px;
}

/* Messages */
.winMessage {
  font-size: 16px;
  font-family: arial;
  font-weight: bold;
  color: green;
  border-style: solid;
  border-width: medium;
  border-color: green;
  padding: 10px;
  margin: 20px;
}

.failMessage {
  font-size: 16px;
  font-family: arial;
  font-weight: bold;
  color: red;
  border-style: solid;
  border-width: medium;
  border-color: red;
  padding: 10px;
  margin: 20px;
}

.infoMessage {
  font-size: 16px;
  font-family: arial;
  font-weight: bold;
  color: black;
  border-style: solid;
  border-width: medium;
  border-color: yellow;
  padding: 10px;
  margin: 20px;
}

/* Buttons */

.bonusButton {
  color: white;
  font-size: 16px;
  font-weight: bold;
  background-color: green;
  padding: 10px;
  margin: 8px;
  border-radius: 25px;
  align: center;
}

.cancelButton {
  color: black;
  font-size: 16px;
  font-weight: bold;
  background-color: yellow;
  padding: 10px;
  margin: 8px;
  border-radius: 25px;
  align: center;
}

.faultButton {
  color: white;
  font-size: 16px;
  font-weight: bold;
  background-color: red;
  padding: 10px;
  margin: 8px;
  border-radius: 25px;
  align: center;
}

.scratchButton {
  color: black;
  font-size: 16px;
  font-weight: bold;
  background-color: orange;
  padding: 10px;
  margin: 8px;
  border-radius: 25px;
  align: center;
}

/* Elements by ID */
#submitButton {
  color: white;
  font-size: 16px;
  font-weight: bold;
  background-color: navy;
  padding: 20px;
  margin: 8px;
  border-radius: 25px;
  align: center;
}