style2.css

body {
    margin: 0;
    padding: 0;
    background-color: gray;
}
html { /*For some reason, body backgrounds do not appear in fullscreen..*/
    background-color: gray;
}

/* Preloader */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff; /* change if the mask should have another color then white */
	z-index:99; /* makes sure it stays on top */
}
#preloader h4 {
  position: relative;
  top: 50rem;           /*aligns text to middle */
  text-align: center;
}

#status {
	width:200px;
	height:200px;
	position:absolute;
	left:50%; /* centers the loading animation horizontally one the screen */
	top:50%; /* centers the loading animation vertically one the screen */
	background-image:url(images/status.gif);
	background-repeat:no-repeat;
	background-position:center;
	margin:-100px 0 0 -100px; /* is width and height divided by two */
}

#tourSelector {
	visibility:hidden;
}

.screen {
    width:100%;
    height:100%;

}

#numWrong, #numCorrect {
  color: white;
}
/*

.shelfSleeves {
            width: 20%;
            height: 25%;
            position: absolute;
            left: 79%;
            top: 6%;
            background-color: #aa8866;
            background-image: url("stripes/BeigeStripe.png");
        }
*/




#stage {
    position: absolute;
   /* padding-top: 2.7%;
    padding-left: 2.8%;
    */
    width: 100%;
    height: 100%;
    background-image: url(images/leftscreen.png);
    background-repeat: no-repeat;
    background-size: 152% 157%;
    margin: auto;
    z-index: 6;
}

#gridList{
    position:absolute;
    left:45%;
    top:5%;
    float:right;
    height:71%;
    width:6%;
    background-color:white;

}
#gridList table{
 width:100%;
    height:100%;


}


table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

#gridList table tr td{
border-width:0;

    width:100%;
border:.1rem solid black;

}
.strobeBtn{

  border: 0px;
    background-image:url(images/eraseLayer.svg);
      background-repeat: no-repeat;
  background-position: top;
  background-size: 100% 100%;
}


.ui-slider-handle {
      width:40%;



}

#sliderDiv {
    position: absolute;
    width:10%;
    left: -18%;
    top:1.7%;


}


#brainDisplay  {
    padding-top: 2.5%;
    padding-left: 2.7%;

}

#brainDisplay {

    margin: 0;
    z-index: 5;
    width: 41%;
    height:73%;

}

#sagitalView {
	z-index: 90;
	position: absolute;
	left: 33.5%;
	top: 4.5%;
	width: 10%;
	height: 20%;
}

#Sagital {
	width: 100%;
	height: 100%;
}

#sagitaLine {
	position: absolute;
	width: 100%;
	height: 1.5%;

	background-color: red;
}

#brainDisplay #theCanvas {
    position: absolute;

    left: 2.7%;
    top: 4.5%;
}

#brainPic {
  width: 100%;
  top: 0%;
  position: relative;
  margin: 0;
  padding: 0;
}

#points {
    display: none;
}

#controlPanel {
    position: absolute;
    top: 50%;
}

#progressbar {
float:left;
	height:5%;
	width:75%;
}

#burnerbar {
float:left;
	height:5%;
	width:23%;
}

#burnerbar .ui-widget-header{
  background: #c31313;
}

#controlSlider {
    position: absolute;
    top: 5%;
    left: 20%;
}

#helpText {
    position: absolute;
    top: 42.6%;
    right: 60.7%;
    height: 18.5%;
    width: 30.7%;
    border: .1rem solid black;
    font-family: 'Electrolize', sans-serif;
    color: #850505;
    background-color: rgba(255,255,255,0.3);
    padding: .4rem;
    font-size: 1.4rem;
}

#helpText h3 {
    font-size: 1.1rem;
    color: white;
    -webkit-text-stroke: 1px yellow;
    text-shadow: .3rem .3rem 0 #000, -.1rem -.1rem 0 #000, .1rem -.1rem 0 #000, -.1rem -.1rem 0 #000, .1rem .1rem 0 #000;
}

#questionText {
    position: absolute;
    top: 6.9%;
    right: 41.4%;
    height: 15.6%;
    width: 28%;
    border: .1rem solid black;
    background-color: #635f22;
    color: #ef9c1c;
    font-family: 'Electrolize', sans-serif;
    padding: 2.37rem;
}

#questionSelect {
	position: absolute;
	top: 7.2%;
	right: 8.99%;
	height: 17.5%;
	width: 27.7%;
	border: .09rem solid black;
	background-color: purple;
}

.questionSelectBtn {
	width:20%;
	height:20%;
	padding:0;
	border:1% !important;
	margin:10%, 20%;
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;

}

.questionSelectBtn:hover {
	background-color:blue !important;

}

.rowNumber{
   font-size: .70rem;
}

#leaderB {
    position: absolute;
    top: 47%;
    right: 7.9%;
    height: 25.9%;
    width: 44.7%;
    border: .1rem solid black;
    font-family: 'Electrolize', sans-serif;
    color: black;
    background-color: white;
    padding: .45rem;
}

#leaderB  table {
    border: .15rem solid green;
    width: 100%;
}

#leaderB  th {
    background-color: green;
    color: white;
    font-size: 1rem;
    padding: 0.25rem;
    vertical-align: middle;
}

#leaderB  td {
    text-align:center;
    padding:0.25rem;
    border:0.10rem solid blue;
}

#infoToggle {
	position: absolute;
    top: 38%;
    right: 43%;
    height: 2%;
    width: 10%;
    border: 1px solid black;
    font-family: 'Electrolize', sans-serif;
    color: black;
    background-color: #B0C4DE;
    padding: 1%;
    font-size: .90rem;

}

#restartToggle {
	position: absolute;
    top: 38%;
    right: 25%;
    height: 2%;
    width: 15%;
    border: 1px solid black;
    font-family: 'Electrolize', sans-serif;
    color: black;
    background-color: #B0C4DE;
    padding: 1%;
    font-size: .90rem;


}


#skeuomorph {
    position: absolute;
    top: 13.8%;
    right: 2%;
    z-index: -1;
    width: 44%;
    height: 63%;
    padding-top: 13%;
    background-image: url(images/rightscreen.png);
    background-size: 100% 100%;
}

#modal {
    position: absolute;
    text-align: center;
    margin: 0px;
    left: 2.7%;
    top: 4.5%;
    width: 41%;
    height: 73%;
    z-index: 101;
    background-color: blue;
    /*font-size: 2vw;*/
    opacity: 1;
    -webkit-animation: fadein 5s;
    /* Safari, Chrome and Opera > 12.1 */

    -moz-animation: fadein 5s;
    /* Firefox < 16 */

    -ms-animation: fadein 5s;
    /* Internet Explorer */

    -o-animation: fadein 5s;
    /* Opera < 12.1 */

    animation: fadein 5s;
    font-family: 'Press Start 2P', cursive;

    color: white;
}

#modal button {
	width: 50%;
	height:45%;
	margin:0;
	padding:0;
	border:1%;
}

#modal p {
width: 100%;

}


#playbackControls {
  /*font-size: 2vw;*/
  opacity: 1;
  -webkit-animation: fadein 5s;
  /* Safari, Chrome and Opera > 12.1 */

  -moz-animation: fadein 5s;
  /* Firefox < 16 */

  -ms-animation: fadein 5s;
  /* Internet Explorer */

  -o-animation: fadein 5s;
  /* Opera < 12.1 */

  animation: fadein 5s;
  font-family: 'Press Start 2P', cursive;

  color: white;
  position: relative;
  text-align: center;
  width: 15%;
  left: 16%;


}
#buttonPausePlayer, #buttonPrevPlayer, #buttonNextPlayer {
  margin-right: 0.1rem;
  margin-left: 0.1rem;
  margin-top: 1.7rem;
  width: 2rem;
}
#buttonPausePlayer {
  filter: brightness(50%); /* makes pause/play buttons same brightness of prev/next. */
}


div[data-index="3"]{

	width:350px !important;

}

div[data-index="4"]{

	width:350px !important;

}

#modal div {
    position: absolute;
    top: 14%;
    left: 25%;
    width:50%;
    text-align: center;
    vertical-align: middle;

}
#scoreText {
    text-align: left;
    font-size: .8rem;
    margin: 1%;
    top: 96%;
    position: relative;
}
#spreadText {
    text-align: right;
    font-size: .67rem;
    position: relative;
    margin: 1%;
    top: 93%;
}

.pointerImage{
width:3%;
height:3%;
}
.pointerCell{
    background-image: url(images/LayerSelect2.png);
    background-size: 80% 80%;
    background-color: rgba(255, 255, 255, .3);
    background-blend-mode: lighten;
    background-repeat: no-repeat;
    background-position: left;
    border: 0!important;
    font-size: .60rem;
    vertical-align: middle;


}

.powerOn {
    -webkit-animation: fadein 3s;
    /* Safari, Chrome and Opera > 12.1 */

    -moz-animation: fadein 3s;
    /* Firefox < 16 */

    -ms-animation: fadein 3s;
    /* Internet Explorer */

    -o-animation: fadein 3s;
    /* Opera < 12.1 */

    animation: fadein 3s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Firefox < 16 */

@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Safari, Chrome and Opera > 12.1 */

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Internet Explorer */

@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* Opera < 12.1 */

@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.ui-slider .ui-slider-handle {
	background: url(images/LayerSelect.png);
    background-size: 30px 30px;
    background-repeat: no-repeat;





    text-decoration: none;

    border: medium none;
    border-radius: 0 0 0 0;
    display: block;
    font-size: 14px;

}

.jquerySliderActive
      {
        overflow:hidden !important;
      }


#info {
   	position: fixed;
    top: 4%; left:32%;
    margin: auto;
    width: 40%;
    height: 80%;
    z-index:200;
    display:none;
    background: #f0f0fd;
    background: rgba(240,240,253,0.90);
    padding: 2.25rem 1.6rem;
    -moz-border-radius: .8rem;
    -webkit-border-radius: .8rem;
    border-radius: 1rem;
    -moz-box-shadow: 0 0 1.1rem rgba(0, 0, 0, 0.9);
    -webkit-box-shadow: 0 0 1.1rem rgba(0, 0, 0, 0.9);
    -box-shadow: 0 0 1.1rem rgba(0, 0, 0, 0.9);
    text-align:center;
}
#info p , #info div, #info h3 {
  margin:0;
  padding: 0;
}


#anatomicalAxesGraphic {
	width: 60%;
	margin-left: 1%;

}

#anatomicalPlanes {
	width: 87%;
	text-align: center;



}

#info p {
	text-align:left;

}

#info img {

}


#infoClose {
color: white;
background: rgba(250,100,100,0.90);
-moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
width: 10%;

}


.typed-cursor {
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.ui-widget-content {
    border: .1rem solid #e0cfc2;
    color: #1e1b1d;
}
.ui-corner-all {
    -moz-border-radius: 1rem;
    -webkit-border-radius: 1rem;
}

.ui-progressbar {
    height: 2rem;
    text-align: left;
}
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1rem;
}