html.js #no-js-notice { display: none; }
html.no-js #main-view { display: none; }

html { font-family: "Droid Sans", "Lucida Sans", "Trebuchet MS", Verdana, Arial, Sans-Serif; }

section { margin: 0.5em 0 1.5em; }

p { margin: 0.5em 0; }

h1 {
  font-size: 1.5em;
  margin-top: 0.2em;
  line-height: 1.25;
}

h2 {
  font-size: 1.3em;
  margin: 0.5em 0 0.7em;
}
h2.loud { font-size: 1.3em; color: #222 }
h2.loud { font-size: 1.3em; background: #222; color: white; }

dl {margin:0 0 20px 0; padding:0; color:#777;}
dt {line-height: 1.2;}
dd {margin: 4px 0 8px; font-weight: bolder; }
dd, dd p {color: #222;}

label {
  display: block;
  font-weight: bolder;
  margin: 0 0 5px 0;
}
fieldset > .required > label:after, fieldset > .required > .fieldWithErrors > label:after {
  content: ' *';
  font-size: 70%;
  color: red;
}

input, select, textarea {
  font-size: 105%;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 5px 0 10px 0;
  padding: 3px;
  border: solid 1px #A1A1A4;
}

textarea { height: 3em; }

input:focus, select:focus, textarea:focus {
  background: #ffffdd;
}
input.short {width: 80px; }
input.amount {text-align: right;}
input.medium {width: 140px; }
.oneline { display: flex;  flex-wrap: nowrap; flex-direction: row; justify-content: flex-start; gap: 15px; }
.oneline > input[type="submit"], .oneline > div.low-priority > input[type="submit"] {margin-top: 0; margin-bottom: 0}
.oneline > form.button-to {margin-bottom: 10px;}

.error { color: red; }
.fieldWithErrors input, .fieldWithErrors select, .fieldWithErrors textarea { border-color: red; }
fieldset > .formError { color: red; margin: 0 0 10px 0; font-size: 90%; font-weight: bolder; line-height: 1.4; }
.field > .formError {margin: -10px 0 10px 0; background: red; color: white; padding: 3px 6px; font-size: 70%; font-weight: bolder; line-height: 1.4; float: left; max-width: 80%;}
.field > .oneline > .formError {margin: 5px 0 0 0; background: red; color: white; padding: 3px 6px; font-size: 70%; font-weight: bolder; line-height: 1.4;}
.field > .oneline + .formError {margin: 5px 0 0 10px;}
.field > .formError + * {clear: left;}
.field .hint {float: right; width: 55%; font-size: 0.8em; line-height: 1.4; margin: 0 0 0 5%; color: #888; text-align: right;}
.halves .field .hint {padding-top: 4px; margin-bottom: 4px;}
.radio > input {width: auto;}

input[type=checkbox] { border: 0; }
input[type=submit], button {
  font-size: 130%;
  font-weight: 700;
  padding: 0 0.5em;
  height: 2em;
  line-height: 2em;
  color: white;
  text-decoration: none;
  border: none;
  background-color: #44afe2;
  -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 4px rgba(0, 0, 0, .5);
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  cursor: pointer;
}
.loud { font-size: 105%; color: #222; }
.quiet { font-size: 85%; color: #777; }
a.loud { color: #000; }
a.quiet { font-size: 85%; color: #444; }
.scream { font-size: 95%; background: #222; color: white;  }

#main-view {
  max-width: 25em;
  margin: 0 auto;
}

input[type=number]:not(.quantity)::-webkit-inner-spin-button,
input[type=number]:not(.quantity)::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

#redeem, #opt_out, section > .inset {
  margin: 0 1em;
  color: #444;
}
#redeem h1, #opt_out h1 {
  color: #FFA02F;
  font-size: 1.5em;
  margin-top: 0.2em;
}

footer, .move-down { margin-top: 2em }

a.cms-admin {display: block; position: absolute; z-index: 98; font-size: 9px; line-height: 1; padding: 2px; background: #eeaa33; color: white; filter:alpha(opacity=40); -moz-opacity: 0.4; -webkit-opacity: 0.4; opacity: 0.4;}
a.cms-admin:hover {color: #000000; filter:alpha(opacity=100); -moz-opacity: 1; -webkit-opacity: 1; opacity: 1;}