#container {width:88%; background-color:white; margin:0 auto 30px auto; margin-top:-543px; padding:20px 0 20px 0px; box-shadow: -7px 7px 15px #000000; min-width:800px;}
.guido {display:inline-block; float:right; margin-right: -3.5%; width:20px; font-size:22px; color:grey; line-height:50px; vertical-align:middle;}
.guido sub{font-size:12px}
.key { display:inline-block; float:left; margin-left: -70px; text-align:center; height:50px; line-height:50px; width:40px; font-size:14px; vertical-align:middle;background-color:white; padding-left:20px}
.nn {margin:0 auto; height:50px; border-width: 1px 1px 0 1px; border-style: solid; border-color: black}
.keycode {margin:20px auto 0 auto; height:20px;}
.hdr {margin:0 auto; height:10px; }
.rad {margin:0 auto; height:40px; font-family: "Verdana", Arial, sans-serif; font-size:12px; margin:0 0 10px 0;}
.perc {border-width:0 1px 0 0; border-style:solid; border-color:#c0c0c0; float:left; display:inline-block; height:100%; 
width:calc(20% - 1px);}

/* below rules the red and gray background divs */

.yin {float:left; display:inline-block; height: 100%; background-image:url('../graphics/gray.png')}
.yang {float:left; display:inline-block; height: 100%;background-image:url('../graphics/red.png')}
.pos {background-size: 100%; text-align:center}
.stump {background-position: right; background-size: 200%; text-align:center}

.gear1 {width:88%; height: 30px; background-color:white; margin:0 auto; margin-top:20px; padding:5px 0px; box-shadow: -7px 7px 15px #000000; min-width:800px; }

.gear2 {width:88%; min-height: 60px; background-color:white; margin:0 auto; margin-top:30px; margin-bottom:40px; padding:5px 0px; box-shadow: -7px 7px 15px #000000; min-width:800px;}

.hans {margin-left:8%; margin-top:30px; float:left; display:inline-block; width:100px; height:20px;}
.titliest {color:white; display:inline-block; float:right; text-align:right; margin-right:7%; font-family: "Verdana", Arial, sans-serif; font-size:16px; margin-top:50px; }
.node {height:40px; margin:5px auto;}
.not {height:40px; margin:5px auto; color:black;}
.notn {font-style: italic} 

.trick1 {display:none}
.trick2 {display:block}

#grayblock {display:inline-block; background-color:#c0c0c0; width:300px; text-align:center; height:20px; border:1px solid black; float:left; font-family: "Verdana", Arial, sans-serif; font-size:12px;line-height:20px}
#redblock {display:inline-block; background-color:red; color:white; width:300px; text-align:center; height:20px; border:1px solid black; float:left; font-family: "Verdana", Arial, sans-serif; font-size:12px;line-height:20px; margin-left:20px}
#loader {display:inline-block; background-color:white; color:black; width:220px; text-align:center; height:20px; border:1px solid black; float:right; font-family: "Verdana", Arial, sans-serif; font-size:12px;line-height:20px; margin-left:20px; visibility:hidden;}

#tube {display:inline-block; float:right} 

  
  #imageholder div{ display:none;background-color:black;position:absolute;overflow:hidden;}
  #imageholder{overflow:hidden; height:358px; margin:105px auto; z-index:100; width:74.8%; position:relative; margin-left:12.6%}
  #imageholder img{ opacity:0}

  #vertical{width:1px;height:358px;}
  
option {
	color:black;
	}

 option[disabled] {
   display: none;
	}