/*
Dark Green: #005c34
Light Green: #68b92e
Blue: #4aa3d1
Dark Gray: #838381
Light Gray: #a09f9f

-From GIMP
Dark Green: #056839
Light Green: #8dc63f
*/

body {
  margin: 0;
}

body,
table,
div,
input,
select {
  font-family: Helvetica, Arial;
  color: #494949;
}

#eventsHeader {
  position: relative;
  padding: 5px;
  background-color: #e4ecdd;
  -moz-box-shadow: 0px 2px 5px #e4e8dd;
  -webkit-box-shadow: 0px 2px 5px #e4e8dd;
  box-shadow: 0px 2px 5px #e4e8dd;
  cursor: pointer;
}
#eventsHeader img {
  vertical-align: middle;
}
#eventsHeader h1 {
  right: 5px;
  padding: 0;
  margin: 0;
  font-size: 28px;
  line-height: 53px;
  text-transform: uppercase;
  color: #056839;
  text-shadow: 2px 2px #b6c0a3;
  letter-spacing: 1px;
}

#mainContainer {
  margin: 10px;
  text-align: center;
}

.dataContainer {
  background-color: #f9fcf5;
  border: 2px solid #e4ecdd;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 2px 2px 5px #e4e8dd;
  -webkit-box-shadow: 2px 2px 5px #e4e8dd;
  box-shadow: 2px 2px 5px #e4e8dd;
}
.dataContainer h3 {
  margin: 0;
  padding: 5px;
  background-color: #e4ecdd;
}
.dataContainer ul {
  display: inline-block;
}
.dataContainer ul > li {
  text-align: left;
  padding: 5px;
}
.dataContainer ul > li > label {
  display: inline-block;
  width: 175px;
}
.dataContainer ul > li > input[type="text"],
.dataContainer ul > li > input[type="email"],
.dataContainer ul > li > input[type="password"] {
  width: 175px;
}
.dataContainer input[type="submit"],
.dataContainer input[type="button"] {
  font-size: 1.1em;
  font-weight: bold;
}

.dataContainer.min {
  display: inline-block;
}
.dataContainer.min ul {
  padding: 10px;
}

.subContainer {
  margin: 5px;
  display: inline-block;
  background-color: #e4ecdd;
  border: 2px solid #e4ecdd;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.subContainer .content {
  margin: 0;
  padding: 5px;
}
.subContainer h4 {
  margin: 0;
  padding: 5px;
  background-color: #cadabc;
  font-size: 14px;
  -moz-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -moz-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
}

#startOptions {
  text-align: center;
}
#startOptions div {
  display: inline-block;
  width: 48%;
  height: 220px;
  margin: 0 0.25%;
  vertical-align: top;
}
#startOptions label {
  font-weight: bold;
}

a img {
  border: none;
}

.button {
  width: 50px;
  height: 65px;
  margin: 2px;
  font-size: 0.6em;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  border: 1px solid #e6e6e6;
  background-color: #e0e1e2;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 1px 1px 1px #888;
  -webkit-box-shadow: 1px 1px 1px #888;
  box-shadow: 1px 1px 1px #888;
}

.button img {
  width: 32px;
  height: 32px;
  margin: 2px auto;
}

.button.pressed {
  background-color: #f4f4f4;
  -moz-box-shadow: inset 1px 1px 1px #888;
  -webkit-box-shadow: inset 1px 1px 1px #888;
  box-shadow: inset 1px 1px 1px #888;
  cursor: auto;
}

.button:hover {
  background-color: #ebedc2;
}

.button.pressed:hover {
  background-color: #f4f4f4;
}

.subButtonContainer {
  text-align: center;
  background-color: #f4fbff;
  padding: 4px;
  border-bottom: 1px solid #e6f1ff;
}

.dataTable {
  width: 100%;
  margin-bottom: 4px;
  text-align: left;
}

div[class*="dataTable"] {
  width: 99.5%;
}

.dataTable .header,
.dataTable .header td,
.header {
  padding: 3px;
  height: 24px;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 1px -1px #333;
  text-decoration: none;
  font-family: Calibri, Helvetica, sans-serif;
  background-color: #9b9f9b;
  color: #ffffff;
}

.dataTable .header a,
.header a {
  color: #c8c9c0;
}

.dataTable .subheader,
.dataTable .subheader td,
.subheader {
  padding: 3px;
  background-color: #dadbd5;
  font-weight: bold;
  height: 24px;
}

.dataTable.ruled {
  border: 1px solid #cccbca;
  border-bottom: none;
}

.dataTable.ruled.grid {
  border-right: none;
}

.dataTable.ruled .header,
.dataTable.ruled .header td {
  background-color: #9b9f9b;
}

.dataTable.ruled td {
  border-bottom: 1px solid #cccbca;
}
.dataTable.ruled.grid td {
  border-right: 1px solid #cccbca;
}
.dataTable.dotted td {
  border-bottom: 1px dotted #cccbca;
}
.dataTable.dotted.grid td {
  border-right: 1px dotted #cccbca;
}
.dataTable.boxed {
  border: 2px solid #cccbca;
}

.dataTable .noRule td {
  border: none;
}

.dataTable .bottomRule td,
.dataTable .bottomRule {
  border-bottom: 1px solid #2890ce;
}

.dataTable .bottomDotted td,
.dataTable .bottomDotted {
  border-bottom: 1px dotted #2890ce;
}

.dataTable tr:hover {
  background-color: #ffea97;
}

ul,
li,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.entryForm label {
  width: 15%;
  padding-left: 4px;
  display: inline-block;
  font-weight: bold;
  vertical-align: top;
}
.entryForm ul,
.entryForm ul li {
  list-style-type: none;
  margin: 0px;
}
.entryForm li {
  margin: 5px 0 5px 0;
}
.entryForm input[type="text"],
.entryForm select {
  width: 300px;
}

.entryForm textarea {
  width: 82%;
}

.formContainer {
  text-align: left;
}

.formContainer img {
  vertical-align: middle;
}
.fieldGroupTitle {
  position: relative;
  display: inline-block;
  /*width: 300px;*/
  margin-left: 5px;
  top: 6px;
  padding: 3px;
  border: 1px dotted #c0c0c0;
  border-bottom: none;
  background-color: #f4f1e3;
  font-weight: bold;
  font-size: 0.75em;
  -moz-border-radius: 5px 0;
  border-radius: 5px 5px 0 0;
  -moz-box-shadow: 3px 3px 3px #888;
  -webkit-box-shadow: 3px 3px 3px #888;
  box-shadow: 3px 0 0 #888;
}
.fieldGroupTitle.inactive {
  background-color: #d0d1b8;
  color: #4f4f4f;
}
.fieldGroupTitle img {
  height: 10px;
  display: block;
}
.fieldGroup {
  margin: 5px;
  border: 1px dotted #c0c0c0;
  background-color: #f4f1e3;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-border-top-left-radius: 0;
  border-top-left-radius: 0;
  -moz-box-shadow: 3px 3px 3px #888;
  -webkit-box-shadow: 3px 3px 3px #888;
  box-shadow: 3px 3px 3px #888;
}

.field {
  padding: 5px;
  border-bottom: 1px dotted #c0c0c0;
}
.field:last-child {
  border-bottom: none;
}
.upDown {
  display: inline-block;
  width: 2%;
  height: 50px;
}
.fieldInfo {
  display: inline-block;
  vertical-align: top;
  width: 100%;
}
.fieldInfo span {
  vertical-align: middle;
}
.fieldInfo li {
  margin-left: 30px;
}
.fieldInfo ul {
  list-style-position: inside;
}
.fieldInfo ul > li {
  border-bottom: 1px dotted #a6a495;
}
.fieldInfo ul > li:last-child {
  border-bottom: none;
}
.fieldRow {
  position: relative;
  padding: 5px;
}
.fieldRow:hover {
  background-color: #e1e6dd;
}
.fieldRow span,
.fieldRow img,
.fieldRow input {
  vertical-align: middle;
}
.subQuestion {
  padding-left: 25px;
  border-left: 1px dotted #a6a495;
}

.groupComment {
  background-color: #ece6cc;
  padding: 5px;
  margin: 0;
  font-size: 0.75em;
  font-weight: bold;
  -moz-border-top-right-radius: 5px;
  border-top-right-radius: 5px;
}
#formContainer .selected {
  background: red;
  display: block;
}

.progressIndicator {
  height: 40px;
  background-color: #c7c8bf;
  border: 1px dotted #ddddd9;
  margin-bottom: 10px;
}
.progressIndicator .currentProgress {
  line-height: 40px;
  height: 100%;
  background-color: #ddfccf;
  text-align: center;
  font-weight: bold;
}

.btnNext {
  font-size: 20px;
  font-weight: bold;
  padding: 5px;
  margin: 10px 5px;
  display: block;
}

.orderButtons {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  height: 20px;
  width: 15px;
}
.orderButtons a {
  position: absolute;
  display: inline-block;
  top: 0px;
}
.orderButtons .down {
  top: 10px;
}
.orderButtons img {
  vertical-align: middle;
  position: absolute;
  height: 9px;
}

.bulletPoint {
  margin: 5px;
}
.bulletPoint img {
  vertical-align: middle;
}

.bigNotification {
  background-color: #f5f136;
  color: #ff2d2d;
  border: 2px solid red;
  width: 98%;
  margin: 10px auto;
  padding: 10px;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.helpBubble li ul,
.helpBubble li ol {
  margin: 0 1.5em;
}
.helpBubble ul,
.helpBubble ol {
  margin: 0 1.5em 1.5em 1.5em;
}
.helpBubble ul {
  list-style-type: disc;
}
.helpBubble ol {
  list-style-type: decimal;
}
.helpBubble ol ol {
  list-style: upper-alpha;
}
.helpBubble ol ol ol {
  list-style: lower-roman;
}
.helpBubble ol ol ol ol {
  list-style: lower-alpha;
}
.helpBubble li {
  list-style-type: disc;
  border: 0 !important;
}
.helpBubble {
  display: none;
  position: absolute;
  width: 500px;
  padding: 4px;
  border: 2px solid #808370;
  background-color: white;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 10px #888;
  -webkit-box-shadow: 0 0 10px#888;
  box-shadow: 0 0 10px #888;
  z-index: 1000;
}

@media (max-width: 768px) {
  #eventsHeader {
    text-align: center;
  }
  #eventsHeader img {
    display: none;
  }
}

#attachFrame {
  height: 100px;
  width: 100%;
  border: 0;
}

a .btn .btn-secondary,
.btn-secondary {
  background-color: #056839;
}

a .btn .btn-secondary:hover,
.btn-secondary:hover {
  background-color: #d0d1b8;
  color: black;
}
