.top-header {
  position: fixed;
  text-align: center;
  z-index: 1;
  background-color: #fdf5e4;
  background-image: linear-gradient(
    to bottom, #fdf0c2, #ffffff
  );
}

.top {
  line-height: 2;
}

.top span {
  padding-left: 20px;
  padding-right: 20px;
}

.logo {
  border: 2px solid #483;
  padding: 2px 12px;
  margin: 2px 6px;
  border-radius: 8px;
  display: inline-block;
}

.subheader select {
  width: 100%;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 0 0 0 0;
  line-height: 1.2;
  background-color: #ffe;
}

.disabled {
  color: #999;
  background-color: #ccc;
}

#status-message {
  display: inline-block;
  min-width: 20ch;
}

.param-page-switcher {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

.param-selector, .param-box, .param-text, .param-color, .param-page-switch {
  line-height: normal;
}

.param-page-switch {
  padding-left: 5px;
  padding-right: 5px;
}

.download-button {
  line-height: normal;
}

.static-text {
  padding-left: 50px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 50px;
  background-color: #c8e8e8;
  background-image: linear-gradient(
    to bottom right, #bee, #eff
  );
}

.static-text pre {
  border: 1px #222 solid;
  border-radius: 3px;
  background-color: #eee;
  background-color: #ddd;
  background-image: linear-gradient(
    to bottom right, #ccc, #f8f8f8
  );
  overflow-x: hidden;
}

.param-label {
  display: inline-block;
  vertical-align: middle;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.group-title .param-label {
  font-weight: bold;
}

.param-label .tooltip {
  visibility: hidden;
  position: absolute;
  margin-top: 40px;
  margin-left: -150px;
  width: 300px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 5px 5px;
  z-index: 1;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.5s;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.output-footer .param-label .tooltip {
  margin-top: -10px;
  transform: translate(0, -100%);
}

.input-footer .param-label .tooltip {
  margin-top: -10px;
  transform: translate(60px, -100%);
}

.param-label:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s;
}

.param-option .option-tooltip {
  visibility: hidden;
  position: absolute;
  margin-top: 40px;
  margin-left: -200px;
  width: 300px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  padding: 5px 5px;
  z-index: 1;
  overflow: visible;
  opacity: 0;
  transition: opacity 0.5s;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.param-selector {
  cursor: pointer;
}

.param-selector table {
  background-color: #222;
  color: #eee;
  padding: 3px;
  margin: 3px;
  border-radius: 3px;
  visibility: hidden;
  white-space: pre;
}

.param-selector table.open {
  visibility: visible;
}

.param-selector .open .param-option:hover {
  background-color: #248;
}

.param-selector .open .param-option.highlighted {
  background-color: #248;
}

.param-selector .open .param-option > *:hover > .option-tooltip {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s;
}

.param-box .param-selector {
  border: 1px solid #222;
  background-color: #ccc;
  padding: 0px 4px;
  margin: 1px;
}

.options-page td:first-child {
  text-align: right;
}

.tab-strip .param-label {
  background-color: #999;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-width: 1px;
  border-bottom-color: #222;
  border-top-color: #222;
  border-left-color: #222;
  border-right-color: #222;
  border-top-style: solid;
  border-left-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  padding-left: 12px;
  padding-right: 12px;
  padding-top: 3px;
  padding-bottom: 3px;
  cursor: pointer;
}

.tab-strip .param-label.active {
  background-color: white;
  border-bottom-style: none;
  padding-bottom: 5px;
}

.tab-strip .param-label.disabled {
  color: white;
  border-bottom-color: #222;
  background-color: #ddd;
  border-color: #aaa;
}

.param-label.button {
  border: 1px solid #222;
  border-radius: 3px;
  padding: 3px 12px;
  margin: 4px 10px;
  cursor: pointer;
  background-color: #eee;
  background-image: linear-gradient(
    to bottom, #ddd, #fff
  );
  color: #236;
}

.param-label.button.pressed {
  background-color: #999;
  background-image: linear-gradient(
    to bottom, #888, #aaa
  );
}

.output-footer, .input-footer {
  background-color: #fdf5e4;
  background-image: linear-gradient(
    to bottom, #ffffff, #fdf0c2
  );
}

.progress-bar-background {
  background-color: #777;
  background-image: repeating-linear-gradient(-45deg, #666, #888, #666 300px);
  border: solid #222 3px;
  border-radius: 5px;
}

.progress-bar-foreground {
  background-color: #68b8c8;
  background-image: linear-gradient(-45deg, #6bc, #7cd, #6bc, #7cd, #6bc);
  background-size: 200px 200px;
  animation-name: background-slide;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  border: solid #222 3px;
  border-radius: 5px;
}

@keyframes background-slide {
  to {
    background-position: 200px 200px;
  }
}

#progress-page {
  background-color: #555;
}
