/*default*/

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body{
  height: 100%;
  width: 100%;
}
body {
  font-size: 20px;
  font-weight: 100;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.0000001em;
  font-family: Georgia, Times, "Times New Roman", serif;
}

body>*:not(:first-child):not(footer){
  margin-top: 1em;
}


/* elements */

p, h1, main, .input{
  width: 529px;
  margin: 0 auto;
  line-height: 1.45;
}
header {
  margin: 1em 0;
  position: absolute;
  top: 0;
  width: 100%;
}
td.label{
  width: 25%;
}
label{
  cursor: pointer;
}
.marginBottom{
  margin-bottom: 10em;
}
.verticalCenter{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.singleton{
  padding: 1em 0;
}

footer {
  margin: 1em 0;
  position: absolute;
  bottom: 0;
  width: 100%;
}
#progress{
  border: solid 1px black;
  padding: 2px;
  height: 1em;
  width: 529px;
  border-radius: 2px;
  margin: 0 auto;
}
#progress>div{
  display: block;
  float: left;
  background-color: steelblue;
  height: 100%;
  border-radius: 2px;
}
#progress>div>span{
  display: block;
  line-height: 1em;
  position: relative;
  top: -4px;
  margin: 0 3px;
  left: 100%;
  float: left;
}
#progress>div.left>span{
  left: 0%;
  float: right;
  /*color: white;*/
}



/* inputs */

.input{
  /*padding: 1em 0;*/
}
.input table{
  width: 100%;
  text-align: center;
}
button, input{
  text-decoration:none;
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  -webkit-appearance: none;
}
button:focus, input:focus{
  outline: 0;
}

form .input table{
  text-align: left;
}
form .input table .textbox div{
  margin: 0;
}

.demographic td{
  padding-bottom: 2em;
}

.checkbox input{
  border: solid 1px black;
  border-radius: 2px;
  height: 2em;
  width: 2em;
  position: relative;
  top: 1px;
  margin-right: 1em;
}
.checkbox input::after{
  content:"\2718";
  color: steelblue;
  display: block;
  height: 1em;
  line-height: 1em;
  width: 1em;
  font-size: 2em;
  text-align: center;
  visibility: hidden;
  position: relative;
  top: -1px;
  left: -1px;
}
.checkbox input:checked::after, .checkbox input:hover::after{
  visibility: visible;
}

.scale div{
  border: solid 1px black;
  border-radius: 2px;
  cursor: crosshair;
  /*padding: 2px;*/
  width: 400px;
  margin: 0 auto;
}
.scale div span{
  height: 2em;
  width: 0;
  display: block;
  background-color: steelblue;
  /*border-radius: 2px;*/
}

.textbox div{
  border: solid 1px black;
  border-radius: 2px;
  padding: 2px;
  width: 300px;
  margin: 0 auto;
}
.textbox input{
  border: none;
  width: 100%;
  padding: 1em;
  border-radius: 2px;

  text-align: center;

  font-size: 20px;
  font-weight: 100;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.0000001em;
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

.textarea textarea{
  resize: vertical;

  border: solid 1px black;
  width: 100%;
  height: 6em;
  padding: 1em;
  border-radius: 2px;
  margin: 0 auto;

  font-size: 20px;
  font-weight: 100;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.0000001em;
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

.textarea table{
  text-align: left
}

.textarea textarea:focus {
  outline: 0;
}

.labeled label{
  position: relative;
  top: .25em;

  font-size: 20px;
  font-weight: 100;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.0000001em;
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

.points button{
  border: solid 1px black;
  height: 2em;
  width: 2em;
  border-radius: 50%;
  padding: 2px;
}
.points button>span{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}
.points button:hover{
  background-color: steelblue;
}

.button button{
  padding: 2px;
  border: solid 1px black;
  color: black;
  border-radius: 2px;

  font-size: 20px;
  font-weight: 100;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.0000001em;
  font-family: Georgia, Times, "Times New Roman", serif;

  width: 100px;
}
.button button>span{
  display: block;
  width: 100%;
  height: 100%;
  line-height: 3em;
  border-radius: 2px;
}
.button button:hover{
  background-color: steelblue;
  /*color: white;*/
}



/*loading*/

#loading{
  width: 100%;
  text-align: center;
  padding: 1em;
}

.spinner {
  margin: 1em auto 0;
  width: 70px;
  text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #333;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}