body {
  max-width:        800px;
  margin-left:      auto;
  margin-right:     auto;
  padding-left:     10px;
  padding-right:    10px;
	font-family:      Verdana, Arial, sans-serif;
	font-size:        13px;
  background-color: #f6f6f6;
}

h1 {
  font-size:     24px;
  font-weight:   normal;
  margin-top:    0;
  margin-bottom: 5px;
}

input, select, textarea {
  box-sizing: border-box;
}

#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;
}

#advertisement {
  float: right;
  border: solid 1px #000000;
}

#advertisement-bottom {
  width:      100%;
  text-align: center;
}

#left-content {
  float:         left;
  padding-top:   4px;
  padding-right: 10px;
}

#left-content li {
  background-color: #FFFF99;
  font-size:        13px;
  border:           solid 1px #000000;
  margin-bottom:    1px;
  transition:       background-color 200ms;
}

#left-content li:hover {
  background-color: #99FF66;
  cursor:           pointer;
}

#left-content li.selectedItem {
  background-color: #99FF66;
}

#left-content a {
  display:         block;
  width:           calc(100% - 8px);
  padding:         4px;
  color:           #000000;
  text-decoration: none;
}


#unitSelector {
  display:      none;
  width:        100%;
  margin-right: 10px;
}

@media (min-width: 551px) {
  #topbar {
    background-size:     200px, cover;
    background-position: right;
  }
  #left-content {
    display: block;
  }

  #unitSelector {
    display: none;
  }
}

#yellowBar {
  width:            100%;
  height:           4px;
  background-color: #FFFF99;
  border:           solid 1px #000000;
  margin-bottom:    10px;
}

#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 #000000;
  border-right:     1px solid #000000;
}

@media (max-width: 550px) {
  h1 {
    font-size:     18px;
    margin-top:    0px;
    margin-bottom: 5px;
  }

  #topbar {
    height:              50px;
    background-size:     cover, cover;
    background-position: center;
  }

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

  #yellowBar {
    margin-bottom: 5px;
  }

  #left-content {
    display: none;
  }
  #unitSelector {
    display: block;
  }
}

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

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

#main-content {
  overflow: auto;
}

#selectQuantity {
  width: 100%;
}

#unitCaption {
  font-weight: bold;
}

#calculator {
  width:     100%;
  float:     right;
}

#conversionInfo {
  display:         none;
  align-items:     center;
  justify-content: space-between;
  font-size:       8px;
}

.selectOption {
  height:    25px;
  font-size: 15px;
}

.inputNumber {
  width:        100%;
  height:       25px;
  font-size:    15px;
  margin-right: 10px;
}

.inputOption {
  width: 100%;
}

.unitLeft {
  height:   100%;
  width:    38%;
  float:    left;
  padding:  0 5px 0 0;
}

.unitRight {
  overflow: auto;
  height:   100%;
}

.unitCaption {
  background-color: #99FF66;
  position:         relative;
  border-left:      1px solid #000000;
  border-top:       1px solid #000000;
  border-right:     1px solid #000000;
  padding:          5px;
  margin-top:       10px;
  font-size:        15px;
}

.unitArea {
  background-color: #FFFF99;
  border:           1px solid #000000;
  padding:          5px;
}

.rightButton {
  position:   absolute;
  right:      5px;
  display:    inline-block;
  width:      18px;
  text-align: center;
  cursor:     pointer;
}

.rightButton img {
  opacity: 0.9;
  height:  20px;
}

.rightButton:hover img {
  opacity: 1;
}

#listQuantities {
  padding:     0;
  margin:      0;
  list-style:  none;
  user-select: none;
}

.infoVenster {
  display:          none;
  position:         relative;
  border:           solid 1px #CCCCCC;
  background-color: #F6F6F6;
  margin-top:       30px;
  padding:          3px;
  max-height:       450px;
  font-size:        11px;
  overflow:         auto;
  transition:       max-height 0.5s;
}

.infoVenster ul {
  margin-top:   5px;
  padding-left: 15px;
}

.popupCloseCross {
  position:         absolute;
  right:            5px;
  top:              5px;
  height:           13px;
  width:            13px;
  background-image: url("images/close.png");
  overflow:         hidden;
  text-indent:      -100px;
  opacity:          0.7;
}

.popupCloseCross:hover {
  opacity: 1;
}

.infoTitle {
  font-size:     15px;
  margin-bottom: 5px;
  color:         #666666;
  text-transform: uppercase;
}

.infoSubTitle {
  font-family: Roboto, Arial, sans-serif;;
  font-weight: bold;
  font-size:   11px;
  margin-top:  10px;
}

.footer {
  margin-top:      20px;
 	text-decoration: none;
  text-align:      center;
  font-size:       10px;
}

.footer a {
  color:           #000000;
  text-decoration: none;
}

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

.image-right {
	clear:  right;
	float:  right;
	margin: 0 0 5px 5px;
}

#settings {
  display:          none;
  z-index:          2147483647;
  position:         absolute;
  top:              25px;
  right:            -10px;
  width:            170px;
  padding:          0;
  margin:           0;
  background-color: #FFFFFF;
  border:           1px solid #000000;
  letter-spacing:   0;
  text-align:       left;
}

#settingsTitle {
  padding:          5px;
  font-size:        15px;
  background-color: #99FF66;
  border-bottom:    1px solid #000000;
}

#settingsMain {
  font-size:        13px;
  padding:          5px;
  background-color: #FFFF99;
}

#settings input {
  width:     100px;
  height:    25px;
  font-size: 15px;
}

#imageRefresh {
  cursor: pointer;
  height: 20px;
}

#imageRefreshProgress {
  display:     none;
  position:    relative;
  top:         3px;
  margin-left: 5px;
  opacity:     0.7;
  cursor:      pointer;
}

.animateRotate {
  animation: rotate 1s linear infinite;
}

#imageRefresh:hover, #imageRefreshProgress:hover {
  opacity:  1;
}

@keyframes rotate {
  100% {transform:rotate(360deg);}
}