/************************************************************************************
GENERAL STYLING
*************************************************************************************/
body, html, p, div, span, td, tr, table {
font: 20.825px/150% "Lucida Grande", Arial, "Lucida Sans Unicode", sans-serif;
}

body, html {
color: #000;
margin: 0;
padding: 0;
text-align: center;
background: #000;
}

hr {
margin-top: 23.138888888889px;
margin-bottom: 23.138888888889px;
clear: both;
}

.smallsvg {
border: 1px solid black;
width: 231.38888888889px;
height: 231.38888888889px;
float: right;
margin-bottom: 23.138888888889px; 
margin-left: 23.138888888889px; 
margin-top: 0; 
margin-right: 0; 
}

.threesvg {
border: 1px solid black;
width: 268.41111111111px;
height: 268.41111111111px;
margin: 0; 
}

.prototypesvg {
border: 1px solid black;
width: 323.94444444444px;
height: 323.94444444444px;
margin-bottom: 23.138888888889px; 
margin-left: 0; 
margin-top: 0; 
margin-right: 23.138888888889px; 
}

.centersvg {
width: 634.00555555556px;
margin: 0 auto 4.6277777777778px;
}

.bigsvg {
border: 1px solid black;
width: 634.00555555556px;
height: 634.00555555556px;
margin: 0;
}

.configsvg {
border: 1px solid black;
width: 809.86111111111px;
height: 809.86111111111px;
margin: 23.138888888889px 0 0;
}

.inlinesvg {
border: 0;
height: 20.825px;
margin: 0 0 -4.6277777777778px;
}

.main {
margin: 0 auto;
padding: 6.9416666666667px 69.416666666667px 11.569444444444px;
width: 833px;
text-align: left;
background: #fff;
}

#disablednote {
margin-left: 11.569444444444px;
color: #f00;
}

a {
text-decoration: none;
outline: none;
color: #026acb;
}
a:hover {
text-decoration: underline;
}
.centered{
text-align: center;
}

h1, h2, h3, h4, h5, h6 {
margin: 0 0 13.883333333333px;
color: #333;
text-align: center;
}
h1 {
font-size: 160%;
}
h2 {
font-size: 140%;
}
h3 {
font-size: 125%;
}
h4 {
font-size: 115%;
}
h5 {
font-size: 105%;
}
h6 {
font-size: 100%;
}
p {
margin: 4.6277777777778px 0;
text-align: justify;
}
.small {
font-size: 100%;
}

.emph {
font-weight: bold;
}

td {
vertical-align: top;
}

.midalign {
vertical-align: middle;
}

/* progress */
.progressoutline {
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 23.138888888889px; 
height: 23.138888888889px;
width: 416.5px;
border: 4.6277777777778px solid #ccc;
}

.progressfill {
height: 23.138888888889px;
background-color: #ddd;
margin-left: 0;
margin-right: auto;
}

/* forms */
form {
margin: 0;
padding: 0;
}

input[type='submit']{
width:  277.66666666667px;
}

input[type='button']:enabled, input[type='submit']:enabled {
background: #ccc;
border: 4.6277777777778px #000;
height: 1.5em;
font-size: 1em;
line-height: 1.2em;
}

input[type='button']:disabled, input[type='submit']:disabled {
background: #eee;
border: 4.6277777777778px #000;
height: 1.5em;
font-size: 1em;
line-height: 1.2em;
}

input[type=range] {
  width: 416.5px;
}

input[type='radio'], input[type='checkbox'] {
border: 4.6277777777778px #000;
height: 1em;
width: 1em;
}

/*
 PARTICIPANT
*/

.error {
color: red;
}

.preftable {
margin-left: auto;
margin-right: auto;
}

.preftable input[type='range'] {
width: 277.66666666667px;
}

/*
DISTRIBUTION
*/

.distTable {
width: 100%;
}

.distTable, .distTable tbody, .distTable tr, .distTable td {
padding: 0px;
margin: 0px;
}

.distSliderCell {
text-align: center;
width: 100%;
}

.distSliderCell>input {
width: 100%;
margin-left: auto;
margin-right: auto;
}

.distMarkCell {
height: 0.25cm;
font-size: 1px;
width: 12.5%;
}

.distMarkLeft {
border-left: 1px solid black;
}

.distMarkRight {
border-right: 1px solid black;
}

.distTextLeft {
text-align: left;
}

.distTextMid {
text-align: center;
}

.distTextRight {
text-align: right;
}

/*
PATH
*/

.pathanswertable {
width: 100%;
}

.pathanswertableleft {
text-align: left;
width: 35%;
}

.pathanswertablemid {
text-align: center;
width: 30%;
}

.pathanswertableright {
text-align: right;
width: 35%;
}

.flashing {
animation-name: flash;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;

-webkit-animation-name: flash;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: linear;
}

@keyframes flash {
  0% {opacity: 1.0;}
 25% {opacity: 0.9;}
 50% {opacity: 0.7;}
 75% {opacity: 0.4;}
100% {opacity: 0.1;}
}

@-webkit-keyframes flash {
  0% {opacity: 1.0;}
 25% {opacity: 0.9;}
 50% {opacity: 0.7;}
 75% {opacity: 0.4;}
100% {opacity: 0.1;}
}