body {
 font-family: 'Lucida Grande';
 font-size:  20px;
}

:root {

  --degree: 90deg;
  --boardpositionx: 70px;
  --boardpositiony: 150px;
  --boardpositionyFloat: 135px;
  --allowClickArrow: none;
  --boardpositionxOverlay : 270px;
  --variableyPosition: 220px;
  --floatyPosition: 150px;
  --variablexPosition: 155px;
  --variableyForRotateButtons:  450px;
  --variableBoardDimensions: 210px;
  --alerty: 300px;
  --alertx: 200px;
  --speed: all 0s ease-in-out;
	
}



svg.board {
  width: var(--variableBoardDimensions);
  height: var(--variableBoardDimensions);
  position: absolute;
  left:  0px;
  top:  0px;

}

svg.rotateCWbutton {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 200px;
  top:  var(--variableyForRotateButtons);
   -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

svg.rotateCCWbutton {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 480px;
  top:  var(--variableyForRotateButtons);
}

#board {
    position:absolute; 
    height: var(--variableBoardDimensions);
    width: var(--variableBoardDimensions);
    left: var(--variablexPosition);
    top:  var( --variableyPosition);
  
  /*background: blue;
  opacity: .5;*/

   -webkit-transition: var(--speed);
    -moz-transition: var(--speed);
    -o-transition: var(--speed);
}

#board.rotatedCW {
    -webkit-transform : rotate(var(--degree)); 
    -moz-transform : rotate(var(--degree)); 
    -ms-transform : rotate(var(--degree)); 
    -o-transform : rotate(var(--degree)); 
    transform : rotate(var(--degree)); 
}



.floatContainer {
	width: var(--variableBoardDimensions);
	height: 70px;
  position: absolute;
	left: var(--variablexPosition);
	top: var(--floatyPosition);
  pointer-events: none; 
  /*
  background: green;
  opacity: .5;
  */
}



.floatContainer2 {
	width: var(--variableBoardDimensions);
	height: 70px;
  position: absolute;
	left: var(--variablexPosition);
	top: var(--floatyPosition);  
  /*
  background: green;
  opacity: .5;
  */
}

@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-10px);
	}
	100% {
		transform: translatey(0px);
	}
}

.float {
	width: var(--variableBoardDimensions);
	height: 100px;
	box-sizing: border-box;
	transform: translatey(0px);
	animation: float 1.25s ease-in-out infinite;
}

.float2 {
	width: var(--variableBoardDimensions);
	height: 100px;
	box-sizing: border-box
}



svg.boardoverlay {
  width: var(--variableBoardDimensions);
  height: var(--variableBoardDimensions);
  position: absolute;
  left: var(--variablexPosition);
  top:  var(--variableyPosition);
  
  pointer-events: none;
 /* background: yellow;
  opacity: .5;*/
}




svg.backingPanel {
  
  width:1000px;
  height: 930px;
  position: absolute;
  left: 100px;
  top:  80px;
  opacity: 1;
 /* background: red; */
  
}

svg.resetPanelSVG {
  
  width:540px;
  height: 320px;
  position: absolute;
  left:760px;
  top:  650px;
}

td.center {
   text-align: center;
  
}

svg.undoButton {
  width: 145px;
  height: 80px;
  position: absolute;
  left: 110px;
  top:  70px;
}

svg.resetButton {
  
  width: 210px;
  height: 90px;
  position: absolute;
  left: 100px;
  top: 95px;  
}

svg.alertClass {
  
  width: 500px;
  height: 180px;
  position: absolute;
  left: var(--alertx); 
  top: var(--alerty);  
  /*background: red;
  opacity: .5;*/
}

div.modeDropdown {
    position: absolute;
    left: 150px;
    top: 20px;
    font-size: 20px;
    font-family: 'Lucida Grande'
  /*font-family: 'Times New Roman';*/
}

select.modeSelectClass
{
  position: absolute;
  left: 0px;
  top: 25px;  
  font-size: 15px;
}



.zoomContainer{
    zoom: 1;
    -moz-transform: scale(1);
    top: 246px;
    position: absolute;
    left: 20%;
}

svg.targetboard {
 
  width: 225px;
  height: 225px;
  position: absolute;
  zoom: .5;
  -moz-transform: scale(.5);
  top: 240px;
  left: 1140px;
  opacity:.7;
  
}