/*
Copyright (C) 2015 Max Planck Institute for Psycholinguistics, Nijmegen

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
*/
/* 
    Created on : Oct 13, 2015, 1:33:01 PM
    Author     : Peter Withers <peter.withers@mpi.nl>
*/
.choosePlayerList,
.gwt-Button.nextButton, .gwt-Button.menuButton, .gwt-PushButton.stimulusButton, .gwt-Button.stimulusHelpButton, .gwt-Button.stimulusQuitButton, .gwt-Button.optionButton, .gwt-Label.headerButton {
  background: #D5D8D8;
  color: #385E5E;
  cursor: pointer;
  border-width: 0px;
  border-style: none;
  border: none;
  outline: none; }

.gwt-Button.nextButton:active, .gwt-Button.menuButton:active, .gwt-PushButton.stimulusButton:active, .gwt-Button.optionButton:active, .gwt-Label.headerButton:active,
.gwt-Button.stimulusHelpButton:active, .gwt-Button.stimulusQuitButton:active, .gwt-Button.stimulusHelpButton:hover, .gwt-Button.stimulusQuitButton:hover {
  background: #385E5E;
  color: #D5D8D8;
  cursor: pointer;
  border-width: 0px;
  border-style: none;
  border: none;
  outline: none; }

.gwt-Button.optionButtonHighlight {
  background: #96ADAD; }

.gwt-Label.headerButton {
  background: #4A7777;
  color: #D5D8D8;
  white-space: nowrap; }

.Android .gwt-Label.headerArrow {
  margin-right: 10px; }

.Android .gwt-Label.headerArrow {
  border-right: 10px solid #4A7777; }

.gwt-Label.headerArrow {
  width: 0;
  height: 0;
  position: relative;
  top: 4px;
  left: 5px;
  border-top: 15px solid transparent;
  border-bottom: 17px solid transparent;
  border-right: 17px solid #4A7777;
  margin-right: 0px;
  cursor: pointer;
  /*z-index: 1;*/ }

.Android .gwt-Label.headerButton {
  display: none; }

.gwt-Label.headerButton {
  position: relative;
  /*top: 5px;*/
  padding: 5px;
  margin-left: 0px;
  display: block;
  display: inline-block;
  /*color: black;*/
  text-decoration: none;
  /*border-color: #eddbc2;*/
  border-radius: 15px;
  /*    border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;*/
  height: 30px; }

.gwt-Label.headerIcon {
  display: none; }

.Android .gwt-Label.headerIcon {
  display: block;
  background: url("./images/icon.png");
  background-size: 50px 50px;
  background-repeat: no-repeat;
  height: 50px;
  width: 50px;
  border: none;
  /*cursor: pointer;*/ }

.headerLabelCentered {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  white-space: nowrap; }

.headerLabel, .headerLabelCentered {
  padding: 8px 10px;
  font-size: 30px; }

.svgPanel {
  /* this is required because of the contentPanel style */
  /*position: absolute;*/
  /*left: 0px;*/
  /*    top: -50px;*/ }

.svgDiagram {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.choosePlayerList {
  /*color: green;*/
  width: 100%; }

.gwt-Image.moveRotated10Animation,
.gwt-Button.stimulusButton.moveRotated10Animation {
  animation: moveRotated10KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated15Animation,
.gwt-Button.stimulusButton.moveRotated15Animation {
  animation: moveRotated15KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated30Animation,
.gwt-Button.stimulusButton.moveRotated30Animation {
  animation: moveRotated30KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated45Animation,
.gwt-Button.stimulusButton.moveRotated45Animation {
  animation: moveRotated45KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated60Animation,
.gwt-Button.stimulusButton.moveRotated60Animation {
  animation: moveRotated60KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated75Animation,
.gwt-Button.stimulusButton.moveRotated75Animation {
  animation: moveRotated75KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated90Animation,
.gwt-Button.stimulusButton.moveRotated90Animation {
  animation: moveRotated90KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated105Animation,
.gwt-Button.stimulusButton.moveRotated105Animation {
  animation: moveRotated105KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated120Animation,
.gwt-Button.stimulusButton.moveRotated120Animation {
  animation: moveRotated120KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated135Animation,
.gwt-Button.stimulusButton.moveRotated135Animation {
  animation: moveRotated135KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated150Animation,
.gwt-Button.stimulusButton.moveRotated150Animation {
  animation: moveRotated150KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated165Animation,
.gwt-Button.stimulusButton.moveRotated165Animation {
  animation: moveRotated165KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated180Animation,
.gwt-Button.stimulusButton.moveRotated180Animation {
  animation: moveRotated180KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated195Animation,
.gwt-Button.stimulusButton.moveRotated195Animation {
  animation: moveRotated195KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated200Animation,
.gwt-Button.stimulusButton.moveRotated200Animation {
  animation: moveRotated200KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated210Animation,
.gwt-Button.stimulusButton.moveRotated210Animation {
  animation: moveRotated210KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated225Animation,
.gwt-Button.stimulusButton.moveRotated225Animation {
  animation: moveRotated225KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated240Animation,
.gwt-Button.stimulusButton.moveRotated240Animation {
  animation: moveRotated240KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated255Animation,
.gwt-Button.stimulusButton.moveRotated255Animation {
  animation: moveRotated255KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated270Animation,
.gwt-Button.stimulusButton.moveRotated270Animation {
  animation: moveRotated270KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated285Animation,
.gwt-Button.stimulusButton.moveRotated285Animation {
  animation: moveRotated285KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated300Animation,
.gwt-Button.stimulusButton.moveRotated300Animation {
  animation: moveRotated300KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated315Animation,
.gwt-Button.stimulusButton.moveRotated315Animation {
  animation: moveRotated315KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated330Animation,
.gwt-Button.stimulusButton.moveRotated330Animation {
  animation: moveRotated330KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated345Animation,
.gwt-Button.stimulusButton.moveRotated345Animation {
  animation: moveRotated345KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated350Animation,
.gwt-Button.stimulusButton.moveRotated350Animation {
  animation: moveRotated350KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

.gwt-Image.moveRotated360Animation,
.gwt-Button.stimulusButton.moveRotated360Animation {
  animation: moveRotated360KeyFrames 1.7s infinite;
  /*-webkit-animation: moveRotated10KeyFrames 2s infinite;*/
  margin: 100px;
  background: none;
  position: relative;
  animation-timing-function: linear;
  /*-webkit-animation-timing-function: ease;*/
  width: 100px; }

@keyframes moveRotated10KeyFrames {
  from {
    transform: rotate(10deg) translate(0px) rotate(-10deg); }
  to {
    transform: rotate(10deg) translate(100px) rotate(-10deg); } }
@keyframes moveRotated15KeyFrames {
  from {
    transform: rotate(15deg) translate(0px) rotate(-15deg); }
  to {
    transform: rotate(15deg) translate(100px) rotate(-15deg); } }
@keyframes moveRotated30KeyFrames {
  from {
    transform: rotate(30deg) translate(0px) rotate(-30deg); }
  to {
    transform: rotate(30deg) translate(100px) rotate(-30deg); } }
@keyframes moveRotated45KeyFrames {
  from {
    transform: rotate(45deg) translate(0px) rotate(-45deg); }
  to {
    transform: rotate(45deg) translate(100px) rotate(-45deg); } }
@keyframes moveRotated60KeyFrames {
  from {
    transform: rotate(60deg) translate(0px) rotate(-60deg); }
  to {
    transform: rotate(60deg) translate(100px) rotate(-60deg); } }
@keyframes moveRotated75KeyFrames {
  from {
    transform: rotate(75deg) translate(0px) rotate(-75deg); }
  to {
    transform: rotate(75deg) translate(100px) rotate(-75deg); } }
@keyframes moveRotated90KeyFrames {
  from {
    transform: rotate(90deg) translate(0px) rotate(-90deg); }
  to {
    transform: rotate(90deg) translate(100px) rotate(-90deg); } }
@keyframes moveRotated105KeyFrames {
  from {
    transform: rotate(105deg) translate(0px) rotate(-105deg); }
  to {
    transform: rotate(105deg) translate(100px) rotate(-105deg); } }
@keyframes moveRotated120KeyFrames {
  from {
    transform: rotate(120deg) translate(0px) rotate(-120deg); }
  to {
    transform: rotate(120deg) translate(100px) rotate(-120deg); } }
@keyframes moveRotated135KeyFrames {
  from {
    transform: rotate(135deg) translate(0px) rotate(-135deg); }
  to {
    transform: rotate(135deg) translate(100px) rotate(-135deg); } }
@keyframes moveRotated150KeyFrames {
  from {
    transform: rotate(150deg) translate(0px) rotate(-150deg); }
  to {
    transform: rotate(150deg) translate(100px) rotate(-150deg); } }
@keyframes moveRotated165KeyFrames {
  from {
    transform: rotate(165deg) translate(0px) rotate(-165deg); }
  to {
    transform: rotate(165deg) translate(100px) rotate(-165deg); } }
@keyframes moveRotated180KeyFrames {
  from {
    transform: rotate(180deg) translate(0px) rotate(-180deg); }
  to {
    transform: rotate(180deg) translate(100px) rotate(-180deg); } }
@keyframes moveRotated195KeyFrames {
  from {
    transform: rotate(195deg) translate(0px) rotate(-195deg); }
  to {
    transform: rotate(195deg) translate(100px) rotate(-195deg); } }
@keyframes moveRotated200KeyFrames {
  from {
    transform: rotate(200deg) translate(0px) rotate(-200deg); }
  to {
    transform: rotate(200deg) translate(100px) rotate(-200deg); } }
@keyframes moveRotated210KeyFrames {
  from {
    transform: rotate(210deg) translate(0px) rotate(-210deg); }
  to {
    transform: rotate(210deg) translate(100px) rotate(-210deg); } }
@keyframes moveRotated225KeyFrames {
  from {
    transform: rotate(225deg) translate(0px) rotate(-225deg); }
  to {
    transform: rotate(225deg) translate(100px) rotate(-225deg); } }
@keyframes moveRotated240KeyFrames {
  from {
    transform: rotate(240deg) translate(0px) rotate(-240deg); }
  to {
    transform: rotate(240deg) translate(100px) rotate(-240deg); } }
@keyframes moveRotated255KeyFrames {
  from {
    transform: rotate(255deg) translate(0px) rotate(-255deg); }
  to {
    transform: rotate(255deg) translate(100px) rotate(-255deg); } }
@keyframes moveRotated270KeyFrames {
  from {
    transform: rotate(270deg) translate(0px) rotate(-270deg); }
  to {
    transform: rotate(270deg) translate(100px) rotate(-270deg); } }
@keyframes moveRotated285KeyFrames {
  from {
    transform: rotate(285deg) translate(0px) rotate(-285deg); }
  to {
    transform: rotate(285deg) translate(100px) rotate(-285deg); } }
@keyframes moveRotated300KeyFrames {
  from {
    transform: rotate(300deg) translate(0px) rotate(-300deg); }
  to {
    transform: rotate(300deg) translate(100px) rotate(-300deg); } }
@keyframes moveRotated315KeyFrames {
  from {
    transform: rotate(315deg) translate(0px) rotate(-315deg); }
  to {
    transform: rotate(315deg) translate(100px) rotate(-315deg); } }
@keyframes moveRotated330KeyFrames {
  from {
    transform: rotate(330deg) translate(0px) rotate(-330deg); }
  to {
    transform: rotate(330deg) translate(100px) rotate(-330deg); } }
@keyframes moveRotated345KeyFrames {
  from {
    transform: rotate(345deg) translate(0px) rotate(-345deg); }
  to {
    transform: rotate(345deg) translate(100px) rotate(-345deg); } }
@keyframes moveRotated350KeyFrames {
  from {
    transform: rotate(350deg) translate(0px) rotate(-350deg); }
  to {
    transform: rotate(350deg) translate(100px) rotate(-350deg); } }
@keyframes moveRotated360KeyFrames {
  from {
    transform: rotate(360deg) translate(0px) rotate(-360deg); }
  to {
    transform: rotate(360deg) translate(100px) rotate(-360deg); } }
.verticalPanAnimation {
  background-size: contain;
  animation-name: verticalPanKeyFrames;
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform top; }

.zoomToGarden {
  background-size: contain;
  animation-name: zoomToGardenKeyFrames;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform; }

.zoomToPlayroom {
  background-size: contain;
  animation-name: zoomToGardenKeyFrames;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: reverse;
  animation-fill-mode: forwards;
  will-change: transform; }

.zoomToBlock1 {
  background-size: contain;
  animation-name: zoomToBlock1KeyFrames;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform; }

.zoomToBlock2 {
  background-size: contain;
  animation-name: zoomToBlock2KeyFrames;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform; }

.zoomToBlock3 {
  background-size: contain;
  animation-name: zoomToBlock3KeyFrames;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform; }

.zoomToBlock4 {
  background-size: contain;
  animation-name: zoomToBlock4KeyFrames;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform; }

.zoomToAttic {
  background-size: contain;
  animation-name: zoomToAtticKeyFrames;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: forwards;
  will-change: transform; }

@keyframes verticalPanKeyFrames {
  from {
    top: 100vh;
    transform: translate(0%, 100%); }
  to {
    top: 0vh;
    transform: translate(0%, -100%); } }
@keyframes zoomToGardenKeyFrames {
  from {
    /*        background-size: 100%;
            background-position: 0% 0%;*/
    transform: scale(1, 1) translate(0%, 0%); }
  to {
    /*        background-size: 150%;
            background-position: 5% -15%;*/
    transform: scale(1.5, 1.5) translate(5%, -15%); } }
@keyframes zoomToBlock1KeyFrames {
  from {
    /*        background-size: 100%;
            background-position: 0% 0%;*/
    transform: scale(1, 1) translate(0%, 0%); }
  to {
    /*        background-size: 400%;
            background-position: 10% -30%;*/
    transform: scale(4, 4) translate(10%, -30%); } }
@keyframes zoomToBlock2KeyFrames {
  from {
    /*        background-size: 100%;
            background-position: 0% 0%;*/
    transform: scale(1, 1) translate(0%, 0%); }
  to {
    /*        background-size: 400%;
            background-position: -10% -30%;*/
    transform: scale(4, 4) translate(-10%, -30%); } }
@keyframes zoomToBlock3KeyFrames {
  from {
    /*        background-size: 100%;
            background-position: 0% 0%;*/
    transform: scale(1, 1) translate(0%, 0%); }
  to {
    /*        background-size: 400%;
            background-position: -10% -10%;*/
    transform: scale(4, 4) translate(-10%, -10%); } }
@keyframes zoomToBlock4KeyFrames {
  from {
    /*        background-size: 100%;
            background-position: 0% 0%;*/
    transform: scale(1, 1) translate(0%, 0%); }
  to {
    /*        background-size: 400%;
            background-position: 10% -10%;*/
    transform: scale(4, 4) translate(10%, -10%); } }
@keyframes zoomToAtticKeyFrames {
  from {
    /*        background-size: 100%;
            background-position: 0% 0%;*/
    transform: scale(1, 1) translate(0%, 0%); }
  to {
    /*        background-size: 400%;
            background-position: 0% 10%;*/
    transform: scale(4, 4) translate(0%, 10%); } }
/*.zoomToBlock3 {
    background-size: contain;
    transition: transform 5s;
    transform: scale(4,4) translate(-10%,-10%);
}*/
/*.zoomToBlock4 {
    background-size: contain;
    transition: transform 5s;
    transform: scale(4,4) translate(10%,-10%);
}*/
/*.zoomToAttic {
    background-size: contain;
    transition: transform 5s;
    transform: scale(4,4) translate(0%,10%);
}*/
.footerLabel {
  left: 1px;
  bottom: 3px;
  position: fixed; }

.gwt-Button.titleBarButton {
  padding: 0px;
  margin: 0px;
  height: 42px;
  top: 3px;
  right: 3px;
  position: fixed; }

.titleBarButton {
  top: 1px;
  right: 3px;
  position: fixed; }

table.stimulusContainerTab {
  padding: 0px;
  margin: 0px;
  width: 100%;
  min-height: 700px; }

.stimulusContainerCol {
  width: 100%; }

.backgroundHighlight {
  /*background: #90ee9024;*/
  background: #effcef; }

.gwt-Button.optionButton.rightOverlayButton, .borderedVideoRight,
.right3TouchButton, .right3OverlayButton {
  right: 1vw; }

.centre3TouchButton, .centre3OverlayButton {
  left: 50%;
  transform: translate(-50%, 0); }

.gwt-Button.optionButton.leftOverlayButton, .borderedVideoLeft,
.left3TouchButton, .left3OverlayButton {
  left: 1vw; }

.gwt-Image.centeredOverlayCurtain, .gwt-Button.centeredOverlayCurtain, .gwt-Button.optionButton.centeredOverlayCurtain {
  top: 0px;
  position: fixed;
  height: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.gwt-Image.leftOverlayCurtain, .gwt-Image.rightOverlayCurtain,
.gwt-Button.leftOverlayCurtain, .gwt-Button.rightOverlayCurtain,
.gwt-Button.optionButton.leftOverlayCurtain, .gwt-Button.optionButton.rightOverlayCurtain {
  -webkit-transition: width 1s;
  transition: width 1s;
  top: 0px;
  position: fixed;
  height: 100%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.gwt-Image.topLeftTouchButton,
.gwt-Image.topRightTouchButton,
.gwt-Image.bottomLeftTouchButton,
.gwt-Image.bottomRightTouchButton,
.gwt-Image.borderedVideoLeft, .gwt-Image.borderedVideoRight, .borderedVideoFull {
  object-fit: contain;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.borderedVideoFull {
  width: 98vw;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  padding: 1vw; }

.gwt-Image.centeredOverlayCurtain {
  width: 100%; }

.gwt-Image.leftOverlayCurtain, .gwt-Image.rightOverlayCurtain {
  width: 50%; }

.gwt-Button.centeredOverlayCurtain:hover, .gwt-Button.centeredOverlayCurtain[disabled]:hover, .gwt-Button.centeredOverlayCurtain,
.gwt-Button.leftOverlayCurtain:hover, .gwt-Button.rightOverlayCurtain:hover,
.gwt-Button.leftOverlayCurtain[disabled]:hover, .gwt-Button.rightOverlayCurtain[disabled]:hover,
.gwt-Button.leftOverlayCurtain, .gwt-Button.rightOverlayCurtain {
  width: 100%;
  background: none;
  border: none; }

.gwt-Image.centeredOverlayCurtainIntersection {
  display: none; }

.gwt-Image.leftOverlayCurtainIntersection, .gwt-Image.rightOverlayCurtainIntersection {
  width: 1vw; }

.gwt-Image.rightOverlayCurtain,
.gwt-Button.optionButton.rightOverlayCurtain {
  right: 0vw; }

.gwt-Image.centeredOverlayCurtain,
.gwt-Button.optionButton.centeredOverlayCurtain,
.gwt-Image.leftOverlayCurtain,
.gwt-Button.optionButton.leftOverlayCurtain {
  left: 0vw; }

.gwt-Button.optionButton.topLeftOverlayButton, .gwt-Button.optionButton.topRightOverlayButton,
.gwt-Button.optionButton.bottomLeftOverlayButton, .gwt-Button.optionButton.bottomRightOverlayButton,
.gwt-Button.optionButton.rightOverlayButton, .gwt-Button.optionButton.leftOverlayButton,
.gwt-Button.optionButton.left3OverlayButton,
.gwt-Button.optionButton.centre3OverlayButton,
.gwt-Button.optionButton.right3OverlayButton {
  position: fixed;
  opacity: 0.0;
  background: grey;
  color: grey;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.gwt-Button.optionButton.left3OverlayButton,
.gwt-Button.optionButton.centre3OverlayButton,
.gwt-Button.optionButton.right3OverlayButton {
  top: 80px;
  width: 32vw;
  height: 25vw; }

.gwt-Button.optionButton.rightOverlayButton, .gwt-Button.optionButton.leftOverlayButton {
  top: 80px;
  width: 47vw;
  height: 36vw; }

.gwt-Button.optionButton.topLeftOverlayButton.optionButtonActivated, .gwt-Button.optionButton.topRightOverlayButton.optionButtonActivated,
.gwt-Button.optionButton.bottomLeftOverlayButton.optionButtonActivated, .gwt-Button.optionButton.bottomRightOverlayButton.optionButtonActivated,
.gwt-Button.optionButton.topLeftOverlayButtonIntersection, .gwt-Button.optionButton.topRightOverlayButtonIntersection,
.gwt-Button.optionButton.bottomLeftOverlayButtonIntersection, .gwt-Button.optionButton.bottomRightOverlayButtonIntersection,
.gwt-Button.optionButton.leftOverlayButton.optionButtonActivated,
.gwt-Button.optionButton.rightOverlayButton.optionButtonActivated,
.gwt-Button.optionButton.rightOverlayButtonIntersection, .gwt-Button.optionButton.leftOverlayButtonIntersection,
.gwt-Button.optionButton.left3OverlayButton.optionButtonActivated, .gwt-Button.optionButton.left3OverlayButtonIntersection,
.gwt-Button.optionButton.centre3OverlayButton.optionButtonActivated, .gwt-Button.optionButton.centre3OverlayButtonIntersection,
.gwt-Button.optionButton.right3OverlayButton.optionButtonActivated, .gwt-Button.optionButton.right3OverlayButtonIntersection {
  opacity: 0.5; }

.gwt-Button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.left3TouchButton, .centre3TouchButton, .right3TouchButton {
  width: 30vw;
  height: 23vw;
  top: 80px;
  padding: 1vw; }

.gwt-Button.optionButton.topLeftOverlayButton,
.gwt-Button.optionButton.topLeftOverlayButton.optionButtonActivated,
.gwt-Button.optionButton.topLeftOverlayButtonIntersection,
.gwt-Image.topLeftTouchButton {
  transform: translate(-105%, -105%); }

.gwt-Button.optionButton.topRightOverlayButton,
.gwt-Button.optionButton.topRightOverlayButton.optionButtonActivated,
.gwt-Button.optionButton.topRightOverlayButtonIntersection,
.gwt-Image.topRightTouchButton {
  transform: translate(5%, -105%); }

.gwt-Button.optionButton.bottomLeftOverlayButton,
.gwt-Button.optionButton.bottomLeftOverlayButton.optionButtonActivated,
.gwt-Button.optionButton.bottomLeftOverlayButtonIntersection,
.gwt-Image.bottomLeftTouchButton {
  transform: translate(-105%, 5%); }

.gwt-Button.optionButton.bottomRightOverlayButton,
.gwt-Button.optionButton.bottomRightOverlayButton.optionButtonActivated,
.gwt-Button.optionButton.bottomRightOverlayButtonIntersection,
.gwt-Image.bottomRightTouchButton {
  transform: translate(5%, 5%); }

.gwt-Button.optionButton.topLeftOverlayButton.optionButtonActivated, .gwt-Button.optionButton.topRightOverlayButton.optionButtonActivated,
.gwt-Button.optionButton.bottomLeftOverlayButton.optionButtonActivated, .gwt-Button.optionButton.bottomRightOverlayButton.optionButtonActivated,
.gwt-Button.optionButton.topLeftOverlayButtonIntersection, .gwt-Button.optionButton.topRightOverlayButtonIntersection,
.gwt-Button.optionButton.bottomLeftOverlayButtonIntersection, .gwt-Button.optionButton.bottomRightOverlayButtonIntersection,
.gwt-Button.optionButton.topLeftOverlayButton, .gwt-Button.optionButton.topRightOverlayButton,
.gwt-Button.optionButton.bottomLeftOverlayButton, .gwt-Button.optionButton.bottomRightOverlayButton {
  width: 47vmin;
  height: 36vmin;
  left: 50vw;
  top: 50vh; }

.gwt-Image.topLeftTouchButton,
.gwt-Image.topRightTouchButton,
.gwt-Image.bottomLeftTouchButton,
.gwt-Image.bottomRightTouchButton {
  width: 45vmin;
  height: 34vmin;
  left: 50vw;
  top: 50vh;
  padding: 1vmin; }

.borderedVideoLeft, .borderedVideoRight {
  width: 45vw;
  height: 34vw;
  top: 80px;
  padding: 1vw; }

.topLeftTouchButton,
.topRightTouchButton,
.bottomLeftTouchButton,
.bottomRightTouchButton,
.left3TouchButton, .centre3TouchButton, .right3TouchButton,
.borderedVideoLeft, .borderedVideoRight, .borderedVideoFull {
  position: fixed;
  border-color: #4A7777;
  border-radius: 15px;
  outline: none;
  border-width: 1px;
  border-style: solid; }

.svgPopupPanel .gwt-Button,
.stimulusHelpPanel .gwt-Button,
.choosePlayerList,
.gwt-Button.stimulusButton, .gwt-Button.stimulusQuitButton {
  display: block;
  display: inline-block;
  /*padding:  5px;*/
  /*margin: 0 10px 10px 0;*/
  color: black;
  text-decoration: none;
  border: none;
  border-radius: 15px;
  outline: none; }

.gwt-CheckBox.optionCheckBox input {
  height: 40px;
  width: 40px; }

.gwt-Button.imageButton {
  margin-left: auto;
  margin-right: auto;
  padding: 10px 10px 10px 10px;
  border-radius: 15px;
  outline: none;
  display: block;
  color: black;
  text-decoration: none;
  cursor: pointer;
  border-color: white;
  border: white;
  background: white;
  outline: none; }

.gwt-Button.optionButton {
  padding: 0px 10px 0px 10px;
  /*margin: 10px 10px 10px 0; this margin was causing the page to widen past the screen width */
  border-radius: 15px;
  /*background: rgb(193,227,241);*/
  outline: none;
  display: block;
  display: inline-block;
  /*color: black;*/
  text-decoration: none;
  cursor: pointer;
  /*border-color: rgb(0,158,200);*/
  outline: none;
  height: 40px;
  width: 100%;
  white-space: nowrap; }

.gwt-RadioButton.optionButton {
  white-space: nowrap; }

/*.gwt-Button.stimulusHelpButton:active, .gwt-Button.stimulusQuitButton:active, .gwt-Button.stimulusHelpButton:hover, .gwt-Button.stimulusQuitButton:hover {
    background:lightgrey;
    border: none;
}

.gwt-Button.nextButton:active, .gwt-Button.menuButton:active,.gwt-PushButton.stimulusButton:active, .gwt-Button.optionButton:active, .gwt-Label.headerButton:active {
    background:#eddbc2;
    background:rgb(246,170,139);
    background:lightgrey;
    border: none;
}*/
/*.choosePlayerList,
.gwt-Button.nextButton, .gwt-Button.menuButton,.gwt-PushButton.stimulusButton,.gwt-Button.stimulusHelpButton, .gwt-Button.stimulusQuitButton, .gwt-Button.optionButton, .gwt-Label.headerButton {
    cursor: pointer;
    border-width: 0px;
    border-style: none;
    border: none;
    outline: none;
    background: white;
}*/
.gwt-Button.nextButton {
  display: block;
  display: inline-block;
  /*color: black;*/
  text-decoration: none;
  /*border-color: rgb(0,158,200);*/
  border-radius: 15px;
  outline: none;
  width: 80%;
  height: 40px; }

.gwt-Button.menuButton, .gwt-PushButton.stimulusButton, .gwt-Button.stimulusButton {
  /*background:rgb(246,170,139);*/
  display: block;
  display: inline-block;
  /*background: rgb(193,227,241);*/
  padding: 5px 10px;
  margin: 0 10px 10px 0;
  /*color: black;*/
  /*border-color: rgb(0,158,200);*/
  /*border-color: rgb(142,207,230);*/
  text-decoration: none;
  /*border-color: transparent;*/
  border-radius: 15px;
  outline: none;
  width: 100%; }

.gwt-Button.stimulusHelpButton, .gwt-Button.stimulusQuitButton {
  border-radius: 25px;
  padding: 5px 10px;
  height: 42px;
  width: 42px; }

.gwt-Button.stimulusQuitButton {
  float: right; }

.gwt-Button.stimulusHelpButton {
  float: left; }

.headerPanel {
  border-bottom-color: #4A7777;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  width: 100%; }

.contentBody, .menuOuter, .stimulusGrid {
  width: 80%;
  margin-top: 50px;
  margin-bottom: -50px;
  margin-left: auto;
  margin-right: auto; }

.fullScreenWidth {
  width: 100%; }

.stimulusGrid {
  margin-top: 12px; }

.menuOuter, .stimulusGrid, .centeredVerticalHorizontal80 {
  width: 80%; }

.bargraphInner {
  background-color: #f6aa8b; }

.bargraphOuter {
  border: #6f6f6f;
  border-width: 1px;
  border-style: solid; }

canvas {
  outline: none;
  border: grey;
  border-width: 1px;
  border-style: solid; }

.popupTextBox,
.stimulusHelpText {
  font-size: 17pt;
  color: black;
  padding: 10px 10px 10px 10px; }

.svgPopupPanel,
.stimulusHelpPanel {
  border: none;
  background: white;
  margin: 10px;
  border-radius: 15px;
  padding: 10px 10px 10px 10px; }

.svgPopupPanel .gwt-Button,
.stimulusHelpPanel .gwt-Button {
  background: darkgrey;
  /*color: $primaryColour3;*/
  color: white;
  padding: 10px 10px 10px 10px;
  margin-left: auto; }

.stimulusPanel {
  margin-left: auto;
  margin-right: auto;
  padding: 10px 10px 40px 10px; }

.stimulusScreen {
  background: black; }

.menuTable {
  width: 100%; }

.menuTable, .centredTable {
  width: 100%;
  padding: 10px 10px;
  margin-bottom: 10px; }

.gridCellLabel {
  font-size: 15pt;
  padding: 0px; }

.menuTable, .gridTable, .gridCell {
  padding: 10px 10px;
  border-color: #4A7777;
  border-radius: 15px;
  outline: none;
  border-width: 1px;
  border-style: solid;
  margin-bottom: 10px; }

table.gridCell:hover, td.gridCell:hover {
  background: lightgray; }

.gridCell {
  vertical-align: middle;
  display: table-cell;
  margin: auto;
  width: 300px;
  height: 300px;
  min-width: 300px;
  min-height: 300px;
  zoom: 1; }

.twoThirdsMax {
  max-width: 60vmin;
  max-height: 60vmin;
  width: auto;
  height: auto; }

.centeredVerticalHorizontal, .centeredVerticalHorizontal80 {
  position: fixed;
  top: 50vh;
  left: 50vw;
  margin: 0px;
  transform: translate(-50%, -50%); }

.footerCenteredHorizontal {
  bottom: 0vh; }

.footerCenteredHorizontal80 {
  width: 80%;
  bottom: 0vh; }

.footerCenteredHorizontal, .footerCenteredHorizontal80 {
  position: fixed;
  left: 50vw;
  margin: 0px;
  transform: translate(-50%, -100%); }

.resultsTableTitle {
  font-size: 24pt; }

.gwt-Label.stimulusProgressLabel {
  text-align: center;
  width: 100%; }

.gwt-Button.metadataError,
.metadataError {
  background: #f6aa8b; }

.metadataOK {
  background: #FFFFFF; }

.applicationErrorMessage {
  font-size: 24pt;
  color: black;
  padding: 50px; }

.narrowWidth {
  /*background: green;*/ }

.choosePlayerList,
.svgPopupPanel .gwt-Button,
table#screenExample td, .stimulusHelpPanel .gwt-Button, .stimulusHelpText, .popupTextBox,
.gwt-Label, .gwt-HTML, .gwt-CheckBox, .pageLink, .contentBody, .metadataError, .metadataOK, .metadataErrorMessage,
.gwt-Button.nextButton, .gwt-Button.menuButton, .gwt-PushButton.stimulusButton, .gwt-Button.stimulusButton, .gwt-Button.stimulusHelpButton, .gwt-Button.stimulusQuitButton, .gwt-Button.stimulusButton, .gwt-Button.optionButton, .gwt-Label.headerButton, .gwt-RadioButton.optionButton {
  font-size: 17pt;
  /*    
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 16pt;
  line-height: 20pt;
  */ }

/*#widgetTag {
        transform: -ms-scale($widgetTagScale,$widgetTagScale);
        transform: -webkit-scale($widgetTagScale,$widgetTagScale);
        transform: scale($widgetTagScale,$widgetTagScale);
    zoom: $widgetTagScale;
}*/
.minimalWidth {
  max-width: 500px; }

.gwt-HTML.countDownLabel {
  color: red;
  padding: 10px; }

.gwt-HTML.groupMessageLabel,
.gwt-HTML.stimuliLabel,
.singleLineFreeTextLabel {
  font-size: 60px;
  line-height: 60px;
  /*line-height: initial;*/
  padding: 10px; }

textarea.singleLineFreeTextLabel {
  text-align: left;
  height: 150px;
  width: 35vw;
  left: 50%; }

.gwt-HTML.singleLineFreeTextLabel {
  text-align: right;
  height: 150px;
  width: 35vw; }

/*.menuTable .gwt-HTML,*/
.menuTable.gwt-HTML.highlightedText,
.gwt-HTML.groupMessageLabel,
.gwt-HTML.stimuliLabel,
.gwt-HTML.countDownLabel {
  text-align: center; }

.gwt-HTML.highlightedText,
.gwt-HTML.groupMessageLabel,
.gwt-HTML.stimuliLabel,
.gwt-HTML.countDownLabel {
  font-weight: bold;
  text-align: center;
  /*text-transform: uppercase;*/ }

.headerLabel, .headerLabelCentered, .headerButton, .headerPanel {
  line-height: 20pt; }

.gwt-HTML a, .gwt-HTML a:visited, .gwt-HTML a:hover,
.singleLineFreeTextLabel,
.gwt-Label, .gwt-HTML, .resultsTableTitle, .gwt-CheckBox, .pageLink, .contentBody {
  color: #385E5E;
  line-height: 25pt; }

.metadataErrorMessage {
  color: #f6aa8b;
  /*line-height: 20pt;*/
  padding: 10px; }

.gwt-PushButton.stimulusButton, .gwt-Button.stimulusButton {
  /*width: 60%;*/
  /*height: 100%;*/
  /*vertical-align: middle;*/
  margin-top: auto;
  margin-bottom: auto; }

/*.gwt-Button.nextButton:disabled,*/
/*, .gwt-Button.optionButton:disabled, .gwt-Label.headerButton:disabled {*/
.gwt-Button.stimulusButton:hover:disabled,
.gwt-Button.stimulusButton:disabled,
.gwt-Button.stimulusButton:hover:active,
.gwt-Button.stimulusButton:active,
.gwt-Button.stimulusButton
 {
  /*border-style: solid;*/
  background: lightgrey;
  /*border: 7px solid white;*/
  padding: 7px 7px;
  /*border-bottom-color: white;*/
  border: none;
  /*opacity: 0.4;*/
  /*filter: alpha(opacity=40);  For IE8 and earlier */ }

.gwt-Button.stimulusImageButton:hover:disabled,
.gwt-Button.stimulusImageButton:disabled,
.gwt-Button.stimulusImageButton:hover:active,
.gwt-Button.stimulusImageButton:active,
.gwt-Button.stimulusImageButton {
  background: none; }

.gwt-PushButton.stimulusButtonHighlight,
.gwt-Button.stimulusButtonHighlight:hover,
.gwt-Button.stimulusButtonHighlight:hover:disabled,
.gwt-Button.stimulusButtonHighlight:disabled,
.gwt-Button.stimulusButtonHighlight:hover:active,
.gwt-Button.stimulusButtonHighlight:active,
.gwt-Button.stimulusButtonHighlight {
  border: 7px #994646;
  border-style: solid;
  /*background: white;*/
  padding: 0px 0px; }

.choosePlayerList,
.svgPopupPanel .gwt-Button,
.stimulusHelpText, .popupTextBox,
table#screenExample td, .stimulusHelpPanel .gwt-Button,
.gwt-Label, .gwt-HTML, .headerLabel, .headerLabelCentered, .resultsTableTitle, .gwt-CheckBox, .pageLink, .contentBody, .metadataErrorMessage,
.gwt-Button.nextButton, .gwt-Button.menuButton, .gwt-PushButton.stimulusButton, .gwt-Button.stimulusButton, .gwt-Button.stimulusHelpButton, .gwt-Button.stimulusQuitButton, .gwt-Button.stimulusButton, .gwt-Button.optionButton, .gwt-Label.headerButton, .gwt-RadioButton.optionButton {
  font-family: Calibri, "Open Sans", "Droid Sans", Arial, Candara, Segoe, "Segoe UI", Optima, sans-serif; }

#widgetTag {
  height: 100%;
  background-color: #FFFFFF; }

/* example stimulus screen table */
table#screenExample td {
  font-weight: bold;
  text-align: center; }

#screenExample {
  margin-left: auto;
  margin-right: auto; }

#screenExamplePicker {
  height: 90px;
  width: 90px;
  background: -webkit-linear-gradient(red, black);
  background: -o-linear-gradient(red, black);
  background: -moz-linear-gradient(red, black);
  background: linear-gradient(red, black); }

#screenExampleHue {
  height: 90px;
  width: 10px;
  background: -webkit-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
  background: -o-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
  background: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, violet);
  background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet); }

#screenExampleStimulus {
  height: 20px;
  width: 50px;
  background: lightgray; }

#screenExampleSelection {
  height: 20px;
  width: 50px;
  background: lightgray; }

#screenExampleNone {
  height: 10px;
  width: 50px;
  background: darkgray; }

#screenExampleSubmit {
  height: 10px;
  width: 50px;
  background: darkgray; }

/* end example stimulus screen table */
.annotationTimelinePanel {
  width: 100%; }

.annotationTimelineTier {
  width: 100%;
  background: lightgray;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.annotationTimelineCursor {
  height: 100%;
  width: 1px;
  background-color: red; }

.annotationTimelineTierSegment {
  border: #6f6f6f;
  border-width: 1px;
  border-style: solid; }

.annotationTimelineTierSegment-Highlight {
  border: 3px #994646;
  border-style: solid; }

.annotationUiGroup {
  border: 1px #994646;
  border-style: solid;
  padding: 10px 10px; }

.debugLabel {
  bottom: 30px; }

.recordingLabel, .notRecordingLabel {
  top: 0; }

.recordingLabel, .notRecordingLabel, .debugLabel {
  right: 0;
  position: fixed;
  border-radius: 20px;
  height: 30px;
  min-width: 30px;
  margin: 5px;
  padding: 5px;
  font-size: 15pt; }

.recordingLabel, .debugLabel {
  background: red;
  color: white; }

.notRecordingLabel {
  background: #385E5E;
  color: #D5D8D8; }

.bounceAnimation {
  position: fixed;
  top: 35%;
  -webkit-animation: bouncekeyframes 2s 1;
  -webkit-animation-timing-function: cubic-bezier(0.835, 1.555, 0.695, 0.675); }

.gwt-Button.optionButton.hiddenTopRight, .gwt-Button.optionButton.hiddenBottomRight {
  position: fixed;
  margin: 0;
  width: 20%;
  height: 20%;
  background-color: Transparent;
  /*color: Transparent;*/ }

.gwt-Button.optionButton.hiddenTopRight {
  top: 0px;
  right: 0px; }

.gwt-Button.optionButton.hiddenBottomRight {
  bottom: 0px;
  right: 0px; }

.hiddenRegion {
  display: none; }

/*@-webkit-keyframes topLeft2BottomRightKeyFrames {
    from {padding-left: 0px; padding-top: 0px; padding-bottom: 50px; padding-right: 50px;}
    to {padding-left: 50px; padding-top: 50px; padding-bottom: 0px; padding-right: 0px;}
}*/
textarea.metadataError, textarea.metadataOK {
  width: 100%;
  min-height: 150px; }

.gwt-Button.optionButton.padded {
  width: 90%;
  margin-left: 30px; }

.gwt-Button.optionButton.toggleBox {
  background: none; }

.toggleBoxOn, .toggleBoxOff {
  position: absolute;
  border-radius: 10px;
  background: lightgrey;
  width: 10vw; }

.toggleBoxOn {
  border: #4A7777 solid 3px; }

.toggleBoxOff {
  border: #D5D8D8 solid 3px; }

.toggleBox1 {
  left: 10vw; }

.toggleBox2 {
  left: 22vw; }

.toggleBox3 {
  left: 34vw; }

.toggleBox4 {
  left: 46vw; }

.toggleBox5 {
  left: 58vw; }

.toggleBox6 {
  left: 70vw; }

.toggleBox7 {
  left: 82vw; }

.toggleBox8 {
  left: 46vw; }

.announcementDouble {
  position: absolute;
  width: 82vw;
  left: 10vw; }

.examplePic {
  max-height: 70vh;
  max-width: 70vw;
  display: block;
  margin-left: auto;
  margin-right: auto; }

.center {
  margin: auto;
  width: 50%;
  border: 3px solid #FFFFFF;
  padding: 1px; }

.buttonNext {
  position: fixed;
  bottom: 20vh;
  left: 0vw; }

.tableStyle {
  table-layout: fixed;
  width: 100%; }

.imgStyle {
  max-width: 100%;
  max-height: 100%; }

/*# sourceMappingURL=experiment.css.map */