/*Lab:exp_9a_Shift_Register
	File name: style_exp9a.css
    Author:Prakriti Dhang*/


*{
  box-sizing: border-box;
}


/* Create two equal columns that floats next to each other */
/*.column {
  float: left;
  width: 50%;
  padding: 10px;
  
}*/

/* Clear floats after the columns */
/*.row:after {
  content: "";
  display: table;
  clear: both;
}*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
  .div{
  width: 100%;
  }
/*.mimg{
  width:100%;
  }
  .img{
  width:100%;
  }*/
}


/*.mimg{
   
    width:645px;*/ /* 645px */
   /* width: 100% */
/*}*/


.blink{
  text-decoration: blink;
}


.blink {
-webkit-animation: blink 2s linear infinite;	
 color:red;
 
}
@-webkit-keyframes blink {
0% { opacity: 0; }
}

#clkb{

  position:absolute;
	top: 40px;
right: 248px;
}

#textclk{
  position:absolute;
	top: 3px;
right:30px;
width: 165px;
}


#red1 {
  width: 18px;
  height: 3px;
  top: 78px;
right: 280px;
  background-color: red;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
position:absolute;
}

#green1{
width: 18px;
  height: 3px;
  top: 73px;
right: 277px;
  background-color: green;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
position:absolute;
display:none;
}


#red2 {
  width: 20px;
  height: 3px;
  top: 122px;
right: 245px;
  background-color: red;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
position:absolute;
}

#green2{
width: 18px;
  height: 3px;
  top: 117px;
right: 243px;
  background-color: green;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
position:absolute;
display:none;
}


#b1{
	position:absolute;
	top: 360px;
  right: 377px;
  cursor:pointer;
    
    
}

#b2
{
position: absolute;

top: 384px;
right: 377px;
display:block;
cursor:pointer;
/*bottom: 335px;
right: 1058px;*/

}

#b3
{

  position: absolute;
top: 406px;
right:377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}

#b4
{

position: absolute;

top: 433px;
right:377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}


#b5
{

position: absolute;

top: 460px;
right:377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b6
{

position: absolute;

top: 485px;
right: 377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b7
{

position: absolute;

top: 508px;
right: 377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b8
{

position: absolute;

top: 530px;
right: 377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}


#y1{
	position: absolute;
	top:115px;
    /*right:10px;*/
    visibility:hidden;
 
}

#loff0{
  position:absolute;
  top:430px;
  right:135px;
  visibility:visible;
}
#lon0{
  position:absolute;
  top:430px;
  right:132px;
  visibility:hidden;
}
#loff1{
  position:absolute;
  top:430px;
  right:50px;
  visibility:visible;
}
#lon1{
  position:absolute;
  top:430px;
  right:46px;
  visibility:hidden;
}

#loff2{
  position:absolute;
  top:515px;
  right:137px;
  visibility:visible;
}
#lon2{
  position:absolute;
  top:515px;
  right:135px;
  visibility:hidden;
}

#loff3{
  position:absolute;
  top:515px;
  right:48px;
  visibility:visible;
}
#lon3{
  position:absolute;
  top:515px;
  right:45px;
  visibility:hidden;
}

#b1r
{
position: absolute;
top: 360px;
  right: 377px;
display:none;
/*bottom: 335px;
right: 1058px;*/

}
#b1g
{
position: absolute;
top: 360px;
  right: 377px;
display:block;
}

#b2r
{
position: absolute;

top: 384px;
right: 377px;
display:block;
cursor:pointer;
/*bottom: 335px;
right: 1058px;*/

}
#b2g
{

position: absolute;
top: 384px;
right: 377px;
display:none;
cursor:pointer;
}

#b3r
{

  position: absolute;
  top: 406px;
right:377px;
/*top: 626px;
right: 495px;*/
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b3g
{

position: absolute;
top: 406px;
right:377px;
display:none;
cursor:pointer;
}

#b4r
{

position: absolute;

top: 433px;
right:377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b4g
{

position: absolute;
top: 433px;
right:377px;
display:none;
cursor:pointer;
}

#b5r
{

position: absolute;

top: 460px;
right:377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b5g
{

position: absolute;
top: 460px;
right:377px;
display:none;
cursor:pointer;
}
#b6r
{

position: absolute;

top: 485px;
right: 377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}

#b6g
{

position: absolute;

top: 485px;
right: 377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b7g
{

position: absolute;

top: 508px;
right: 377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b7r
{

position: absolute;

top: 508px;
right: 377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b8g
{

position: absolute;

top: 530px;
right: 377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}
#b8r
{

position: absolute;

top: 530px;
right: 377px;
display:block;
/*bottom: 335px;
right: 1058px;*/
cursor:pointer;
}