*{
  font-family:Verdana, Arial, Helvetica, sans-serif
}

body {
  max-width:        800px;
  margin:           0 auto;
  padding:          10px;
  font-size:        13px;
  background-color: #f6f6f6;
}

input {
  border:     0.5px solid #a9a9a9;
  padding:    1px 3px;
  box-sizing: border-box;
}

select {
  box-sizing: border-box;
}

input:read-only {
  background-color: #eeeeee;
}

.smalltext {
  font-size: 10px;
}

.digitaldutch-bar {
  width:  100%;
  margin: 10px auto;
  border: none;
}

.digitaldutch-bar img{
  border: none;
}

#digitaldutch_logo {
  height:  85%;
  margin:  5px;
  opacity: 0.8;
  border:  none;
}

#topbar {
  height:              70px;
  width:               100%;
  overflow:            hidden;
  margin-bottom:       10px;
  text-align:          center;
  background-image:    url("images/fish.png");
  background-repeat:   no-repeat;
  box-shadow:          1px 1px 5px #aaa;
}

h1 {
  margin:              0 auto;
  font-size:           16pt;
  font-weight:         normal;
  text-align:          center;
  letter-spacing:      0.3em;
  padding-top:         6px;
  padding-bottom:      3px;
  background-image:    url(images/arles_top.png);
  background-repeat:   no-repeat;
  background-position: center top;
}

h2 {
  font-size: 16pt;
  font-weight: normal;
  padding: 0;
  margin: 0;
}

.menu {
  width:            100%;
  margin-left:      auto;
  margin-right:     auto;
  text-align:       right;
  border:           1px solid #999999;
  background-color: #FFFF99;
}

.menu ul {
  width:      100%;
  height:     27px;
  padding:    5px 5px 0 5px;
  margin:     5px 0 0 0;
  text-align: left;
}

.menu li {
  display:                 inline-block;
  height:                  26px;
  padding:                 0;
  font-size:               15px;
  background-color:        rgba(230, 230, 230, 0.7);
  border:                  1px solid rgba(0, 0, 0, 0.2);
  border-bottom-color:     #999999;
  border-top-left-radius:  5px;
  border-top-right-radius: 5px;
  margin:                  0 2px;
}

#menu-active {
  border:              1px solid #999999;
  border-bottom-color: #f6f6f6;
  background-color:    #f6f6f6;
}

.menu li a {
  margin:           0;
  color: inherit;
  display:          inline-block;
  width:            100%;
  height:           100%;
  padding:          4px 10px;
  text-decoration:  none;
}

#orangeBar {
  width:            100%;
  height:           4px;
  background-color: #FF9933;
  border:           solid 1px #999999;
}

#title {
  width:            100%;
  position:         relative;
  padding:          3px 0 3px 0;
  background-color: #99FF66;
  text-align:       center;
  font-size:        21px;
  letter-spacing:   0.3em;
  border-left:      1px solid #999999;
  border-right:     1px solid #999999;
}


.main-gradient-top {
  background-image:    url(images/main-gradient-top.gif);
  background-repeat:   no-repeat;
  background-position: center top;
}

.main-bottom {
  background-image: url(images/main-bottom.png);
  background-repeat: no-repeat;
  background-position: center bottom;
}

.main-body {
  padding: 10px;
}

.table-calculator {
  width:             100%;
  background-color:  #FFFF99;
  border:            solid 1px #999999;
  padding:           0;
  border-collapse:   collapse;
  margin-top:        10px;
}

.table-calculator td {
  width:   33%;
  padding: 2px 3px;
}

.table-calculator select, .table-calculator input {
  width: 100%;
}

.table-wizard {
  width:            100%;
  margin-top:       10px;
  background-color: #FFFF99;
  border-collapse:  collapse;
  border:           solid 1px #999999;
}

.table-wizard th, .table-calculator th {
  background-color: #99FF66;
  font-weight:      normal;
  text-align:       left;
  padding:          3px;
  border-bottom:    solid 1px #999999;
}

.table-wizard td, .table-calculator td {
  padding: 3px;
}

.table-wizard select {
  min-width: 100%;
}

.tableAtmosphere {
  table-layout:     fixed;
	border-collapse:  collapse;
  margin-bottom:    20px;
  width:            100%;
}

.evenRow {
  background-color: #ededed;
}

.tableAtmosphere th{
  border:           solid 1px #999999;
  background-color: #e0e0e0;
  padding:          4px 8px;
  text-align:       center;
  font-weight:      normal;
}

.tableAtmosphere td{
  border:     solid 1px #999999;
  padding:    4px;
  text-align: right;
}

.buttonnext {
  margin-top: 20px;
}

.formcalc {
  width: 600px;
  clear: both;
}

.formcalc input {
  width: 100%;
  clear: both;
}

.bottom-text {
  text-decoration: none;
  text-align:      center;
  font-size:       8pt;
}

.bottom-text a {
  text-decoration: none;
  color: #000;
}

.bottom-text a:hover {
  text-decoration: underline;
}

.unitOptions {
  font-size:     8pt;
  text-align:    right;
  margin-bottom: 10px;
}

.inputTable {
  min-width: 150px;
}

#tableAtmosphereOuter {
  display:         flex;
  justify-content: center;
  margin:          10px 0;
}

#error-box {
  display:          none;
  margin-top:       5px;
  padding:          2px 4px;
  background-color: #FF9999;
  border: 1px solid #000000;
}

@media (min-width: 551px) {
  #topbar {
    background-size:     200px, cover;
    background-position: right;
    margin:              0 auto 10px auto;
  }
}

@media (max-width: 550px) {
  #topbar {
    height: 50px;
    background-size: cover, cover;
    background-position: center;
  }

  #title {
    font-size: 18px;
    padding:   1px 0 1px 0;
  }

  #yellowBar {
    margin-bottom: 5px;
  }

}