* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #ddd;
}

/* Style the top navigation bar */
.page-header {
  overflow: hidden;
  background-color: #333;
  padding: 0px 5%;
  position: relative;
}

/* Style the topnav links */
.page-header a.login {
  float: right;
  position: absolute;
  bottom: 0;
  right: 5%;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover for topnav links */
.page-header a.login:hover {
  background-color: #ddd;
  color: #333;
}

/* Style the relogin links */
.content-container a.relogin {
  margin: auto;
  display: block;
  color: #333;
  background-color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for relogin links */
.content-container a.relogin:hover {
  background-color: #333;
  color: #f1f1f1;
}

/* Style the title */
.page-header p.title {
  font-family: 'Sofia';font-size: 22px;
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  font-weight: bold;
  font-size: 200%;
}


/* Style the content */
.content-container {
  background-color: #ddd;
  padding: 20px 5%;
}

/* Style the instance links */
.content-container a.instance {
  margin: auto;
  display: block;
  color: #333;
  background-color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for instance links */
.content-container a.instance:hover {
  background-color: #333;
  color: #f1f1f1;
}

/* Style the list links */
.content-container a.list {
  margin: auto;
  display: block;
  color: #333;
  background-color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for list links */
.content-container a.list:hover {
  background-color: #333;
  color: #f1f1f1;
}

/* Style the list links */
.content-container a.list-deactivated {
  margin: auto;
  display: block;
  background-color: #b22222;
  color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for list links */
.content-container a.list-deactivated:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the attribute links */
.content-container a.attribute {
  margin: auto;
  display: block;
  color: #333;
  background-color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for attribute links */
.content-container a.attribute:hover {
  background-color: #333;
  color: #f1f1f1;
}

/* Style the entry undone links */
.content-container a.entry-done {
  margin: auto;
  display: block;
  color: #333;
  background-color: #ADFF2F;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for entry undone links */
.content-container a.entry-done:hover {
  background-color: #333;
  color: #f1f1f1;
}

/* Style the entry undone links */
.content-container a.entry-undone {
  margin: auto;
  display: block;
  color: #333;
  background-color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for entry undone links */
.content-container a.entry-undone:hover {
  background-color: #333;
  color: #f1f1f1;
}

/* Style the entry deactivated links */
.content-container a.entry-deactivated {
  margin: auto;
  display: block;
  background-color: #b22222;
  color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for entry deactivated links */
.content-container a.entry-deactivated:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the back links */
.content-container a.back {
  margin: auto;
  display: block;
  color: #333;
  background-color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for back links */
.content-container a.back:hover {
  background-color: #333;
  color: #f1f1f1;
}

/* Style the new button */
.content-container a.button-new {
  margin: auto;
  display: block;
  background-color: #333;
  color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for new button */
.content-container a.button-new:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the edit button */
.content-container a.button-edit {
  margin: auto;
  display: block;
  background-color: #333;
  color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for edit button */
.content-container a.button-edit:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the delete button */
.content-container a.button-info {
  margin: auto;
  display: block;
  background-color: #333;
  color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for delete button */
.content-container a.button-info:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the delete button */
.content-container a.button-bonnie {
  margin: auto;
  display: block;
  background-color: #333;
  color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-family: 'Sofia';
  font-weight: bold;
}

/* Change color on hover for delete button */
.content-container a.button-bonnie:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the delete button */
.content-container a.button-delete {
  margin: auto;
  display: block;
  background-color: #b22222;
  color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for delete button */
.content-container a.button-delete:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the do entry button */
.content-container a.button-do {
  margin: auto;
  display: block;
  background-color: #333;
  color: #f1f1f1;
  width: 90%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for do entry button */
.content-container a.button-do:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the undo entry button */
.content-container a.button-undo {
  margin: auto;
  display: block;
  background-color: #333;
  color: #f1f1f1;
  width: 90%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for undo entry button */
.content-container a.button-undo:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the delete button */
.content-container a.button-activate {
  margin: auto;
  display: block;
  color: #333;
  background-color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for delete button */
.content-container a.button-activate:hover {
  background-color: #333;
  color: #f1f1f1;
}

/* Style the delete button */
.content-container a.button-deactivate {
  margin: auto;
  display: block;
  background-color: #b22222;
  color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for delete button */
.content-container a.button-deactivate:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the add sub button */
.content-container a.button-addsub {
  margin: auto;
  display: block;
  background-color: #333;
  color: #f1f1f1;
  width: 90%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for add sub button */
.content-container a.button-addsub:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the edit sub button */
.content-container a.button-editsub {
  margin: auto;
  display: block;
  background-color: #333;
  color: #f1f1f1;
  width: 90%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for edit sub button */
.content-container a.button-editsub:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the delete sub button */
.content-container a.button-deletesub {
  margin: auto;
  display: block;
  background-color: #b22222;
  color: #f1f1f1;
  width: 90%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Change color on hover for delete sub button */
.content-container a.button-deletesub:hover {
  color: #333;
  background-color: #f1f1f1;
}

/* Style the info field */
.content-container div.info-text {
  margin: auto;
  display: block;
  color: #333;
  background-color: #f1f1f1;
  width: 70%;
  text-align: left;
  padding: 5px 5%;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Style the info field */
.content-container p.bonnie-text {
  font-family: 'Sofia';
}

/* Style the no entry field */
.content-container p.no-entry {
  margin: auto;
  display: block;
  color: #f1f1f1;
  background-color: #b22222;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Style the sort form */
.content-container div.sort-form {
  margin: auto;
  display: block;
  color: #333;
  background-color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Style the form */
.content-container div.form {
  margin: auto;
  display: block;
  color: #333;
  background-color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Style the entry info */
.content-container div.entry-info {
  margin: auto;
  display: block;
  color: #333;
  background-color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Style the entry done */
.content-container div.entry-done {
  margin: auto;
  display: block;
  color: #333;
  background-color: #ADFF2F;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Style the entry undone */
.content-container div.entry-undone {
  margin: auto;
  display: block;
  color: #333;
  background-color: #f1f1f1;
  width: 70%;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  border: 2px solid black;
  border-radius: 5px;
  font-weight: bold;
}

/* Style the footer */
.page-footer {
  position: fixed;
  width:100%;
  left:0;
  bottom:0;
  padding: 0px 5%;
  background-color: #f1f1f1;
}

/* Style the footer links */
.page-footer a {
  float: left;
  display: block;
  color: #333;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover for footer links */
.page-footer a:hover {
  background-color: #333;
  color: #f1f1f1;
}