
/************************************************************************************
GENERAL STYLING
*************************************************************************************/
body, html, p, div, span, td, tr, table, textarea {
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; 
}

.aesthsvgcontainer {
width: 1101.4111111111px;
height: 351.71111111111px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}

.forceaesthsvgcontainer {
width: 1101.4111111111px;
height: 536.82222222222px;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}

.aesthsvgcontainer:after, .forceaesthsvgcontainer:after {
content: '';
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0;
}

.querysvgcontainer {
width: 634.00555555556px;
height: 634.00555555556px;
margin: 0 auto;
}

.threesvg {
border: 1px solid black;
width: 351.71111111111px;
height: 351.71111111111px;
vertical-align: top;
display: inline-block;
*display: inline;
zoom: 1;
}

.twosvg {
border: 1px solid black;
width: 536.82222222222px;
height: 536.82222222222px;
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: 1078.2722222222px;
height: 809.86111111111px;
margin: 23.138888888889px 0 0;
}

.inlinesvg {
border: 0;
width: 20.825px;
height: 20.825px;
margin: 0 0 -4.6277777777778px;
}

.inlinesvglink {
border: 0;
width: 55.533333333333px;
height: 20.825px;
margin: 0 0 -4.6277777777778px;
}

.main {
margin: 0 auto;
padding: 6.9416666666667px 69.416666666667px 11.569444444444px;
width: 1101.4111111111px;
text-align: left;
background: #fff;
}

#disablednote {
margin-left: 11.569444444444px;
color: #f00;
}

.timenote {
    margin-top: 11.569444444444px;
    height: 39.336111111111px;
    float:right;
    display:block;
}

a {
text-decoration: none;
outline: none;
color: #026acb;
}
a:hover {
text-decoration: underline;
}
.centered{
text-align: center;
}

.noscript {
color: red;
}

h1, h2, h3, h4, h5, h6, h7 {
margin: 5 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%;
}
h7 {
display: block;
}
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']{
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;
}

.treepreftable, .forcepreftable {
width: 100%;
text-align: justify;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
clear: both;
margin-top: 4.6277777777778px;
}

.treepreftablediv {
width: 351.71111111111px;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
display: inline-block;
}

.treepreferenceouter {
width: 351.71111111111px;
text-align:center;
display: inline-block;
}

.treepreftable input[type='range'] {
width: 351.71111111111px;
margin: 0;
}

.forcepreftable input[type='range'] {
width: 536.82222222222px;
margin:0;
}

.forcepreftablediv {
width: 536.82222222222px;
text-align: center;
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
display: inline-block;
}

.forcepreferenceouter {
width: 536.82222222222px;
text-align:center;
display: inline-block;
}

.preferenceinner {
display: inline-block;
margin: 0 auto;
width: 20%;
}

.preferenceleft {
float: left;
text-align: left;
width: 40%;
}

.preferenceright {
float: right;
text-align: right;
width: 40%;
}

.preftable:after, .treepreftable:after, .forcepreftable:after, .treepreftablediv:after{
content: '';
width: 100%;
display: inline-block;
font-size: 0;
line-height: 0
}

/*
ANSWERS
*/

.answertable {
width: 100%;
clear: both;
}

.answertableleft {
text-align: left;
width: 35%;
}

.answertablemid {
text-align: center;
width: 30%;
}

.answertableright {
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;}
}

/*
GRAPH DRAWING
*/

rect.rank0 , rect.rect{
fill: #F7F7F7;
}

rect.rank1 {
fill: #cce6cc;
}

rect.rank2 {
fill: #ffffcc;
}

rect.rank3 {
fill: #ffcccc;
}

.ranktext {
font-family: sans-serif;
stroke: black;
fill: gray;
opacity:.2;
font-weight: bold;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}

.frame {
stroke-linecap:round;stroke-linejoin:round;
stroke-width: 2;
stroke: none;
fill: none;
}

.frameInvalid {
stroke-linecap:round;stroke-linejoin:round;
stroke-width: 2;
stroke: red;
fill: none;
}

.node {
stroke-linecap:round;stroke-linejoin:round;
stroke-width: 1.6;
stroke: black;
fill: #8da0cb;
}

.nodeHighlight {
stroke: none;
fill: skyblue;
}

.nodeHighlightWrong {
stroke: none;
fill: salmon;
}

.nodeSelect {
stroke: none;
fill: lime;
}

.nodeStartEnd {
stroke: black;
fill: none;
}

.node .nodeClickArea {
stroke: none;
fill: none;
}

.pathcounttext {
font-family: sans-serif;
font-size: 40;
stroke: none;
fill: skyblue;
opacity: 0.85;
font-weight: bold;
}

.disttext {
font-family: sans-serif;
font-size: 15;
stroke: none;
fill: #8da0cb;
opacity: 0.85;
font-weight: bold;
}

.linkHighlight {
stroke-linecap:round;stroke-linejoin:round;
stroke-width: 10;
stroke: skyblue;
opacity: 0.85;
fill: none;
}

.linkHighlightWrong {
stroke-linecap:round;stroke-linejoin:round;
stroke-width: 10;
stroke: salmon;
opacity: 0.85;
fill: none;
}

.linkSelect {
stroke-linecap:round;stroke-linejoin:round;
stroke-width: 10;
stroke: lime;
opacity: 0.85;
fill: none;
}

.linkNormal {
stroke-linecap:round;stroke-linejoin:round;
stroke-width: 1.6;
stroke: black;
fill: none;
}

.linkHalo, .linkHalo0, .linkHalo1, .linkHalo2, .linkHalo3 {
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 3.9;
fill: none;
}

.linkHalo, .linkHalo0 {
stroke: white;
}

.linkHalo1 {
stroke: #cce6cc;
}

.linkHalo2 {
stroke: #ffffcc;
}

.linkHalo3 {
stroke: #ffcccc;
}

/*
STROKE COLORS
*/

.strokeBlue {
stroke: blue;
}

.strokeLightBlue {
stroke: #8da0cb;
}

.strokeLightRed {
stroke: #fc8d62;
}

.strokeRed {
stroke: red;
}

.strokeGreen {
stroke: green;
}

.strokeNone {
stroke: none;
}

.strokeWhite {
stroke: white;
}

.strokeBlack {
stroke: black;
}

/*
STROKE WIDTHS
*/

.stokeThin {
stroke-width: 1;
stroke-linecap:round;stroke-linejoin:round;
}

.strokeMedium {
stroke-width: 2;
stroke-linecap:round;stroke-linejoin:round;
}

.strokeHeavy {
stroke-width: 4.5;
stroke-linecap:round;stroke-linejoin:round;
}

/*
FILL COLORS
*/

.fillBlue {
fill: blue;
}

.fillLightBlue {
fill: #8da0cb;
}

.fillLightRed {
fill: #fc8d62;
}

.fillLightGreen {
fill: #82cb88;
}

.fillRed {
fill: red;
}

.fillGreen {
fill: green;
}

.fillNone {
fill: none;
}

.fillWhite {
fill: white;
}

.fillBlack {
fill: black;
}