/*Lab:exp_5_Part2_Decoder
	File name: style_exp5p2.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 */
          
      }
      

      .blink{
        text-decoration: blink;
    }
    
    
    .blink {
      -webkit-animation: blink 2s linear infinite;	
       color:red;
       
    }
    @-webkit-keyframes blink {
      0% { opacity: 0; }
    }
    
      
      #b1{
          position:absolute;
          top: 80px;
        right: 558px;
        cursor:pointer;
          
          
      }
      
      #b2{
          position: absolute;
          top: 80px;
          right: 520px;
          cursor:pointer;
          
          
      }
       #b3{
          position: absolute;
          top:80px;
          right: 485px;
          cursor:pointer;
          
          
          
      }
      #b4{
          position: absolute;
          top: 80px;
          right: 445px;
          cursor:pointer;
          
          
      }
      #b5{
          position: absolute;
          top: 80px;
          right: 410px;
          cursor:pointer;
          
          
      }
      
      
      #b6{
          position: absolute;
          top: 80px;
          right: 375px;
          cursor:pointer;
          
          
          
      }
      #b7{
        position: absolute;
        top: 80px;
        right: 345px;
        cursor:pointer;
        
        
        
    }
      
      
      #y1{
          position: absolute;
          top:115px;
          /*right:10px;*/
          visibility:hidden;
          
          
          
          
          
      }
      
      #led0{
        position:absolute;
        top:70px;
        right:62px;
        visibility:hidden;
      }
      #led1{
        position:absolute;
        top:98px;
        right:62px;
        visibility: hidden;
      }
      #led2{
        position:absolute;
        top:122px;
        right:62px;
        visibility: hidden;
      }
      #led3{
        position:absolute;
        top:150px;
        right:62px;
        visibility: hidden;
      }
      
      #led4{
        position:absolute;
        top:180px;
        right:62px;
        visibility: hidden;
      }
      #led5{
        position:absolute;
        top:205px;
        right:62px;
        visibility: hidden;
      }
      
      #led6{
        position:absolute;
        top:230px;
        right:62px;
        visibility: hidden;
      }
      
      
      #led7{
        position:absolute;
        top: 272px;
        right:62px;
        visibility: hidden;
      }
      
      #led8{
        position:absolute;
        top: 310px;
        right:62px;
        visibility: hidden;
      }
      #led9{
        position:absolute;
        top: 335px;
        right:62px;
        visibility: hidden;
      }
      #led10{
        position:absolute;
        top: 365px;
        right:62px;
        visibility: hidden;
      }
      #led11{
        position:absolute;
        top: 390px;
        right:62px;
        visibility: hidden;
      }
      #led12{
        position:absolute;
        top: 420px;
        right:62px;
        visibility: hidden;
      }
      #led13{
        position:absolute;
        top: 445px;
        right:62px;
        visibility: hidden;
      }
      #led14{
        position:absolute;
        top: 472px;
        right:62px;
        visibility: hidden;
      }

      #led15{
        position:absolute;
        top: 512px;
        right:62px;
        visibility: hidden;
      }

      
      #b1r
      {
      height: 19px;
      border-right: 4px solid red;
      position: absolute;
      -webkit-transform:
                  translateY(10px)
                  translateX(10px)
                  rotate(-65deg); 
      top: 6px;
      right: 570px;
      display:block;
      /*bottom: 335px;
      right: 1058px;*/
      
      }
      #b1g
      {
      height: 17px;
      border-right: 4px solid green;
      -webkit-transform:
                  translateY(-10px)
                  translateX(-10px)
                  rotate(65deg); 
      position: absolute;
      top: 15px;
      right: 550px;
      display:none;
      }
      
      #b2r
      {
      height: 21px;
      border-right: 4px solid red;
      position: absolute;
      -webkit-transform:
                  translateY(10px)
                  translateX(10px)
                  rotate(-65deg); 
      top: 4px;
      right: 535px;
      display:block;
      /*bottom: 335px;
      right: 1058px;*/
      
      }
      #b2g
      {
      height: 21px;
      border-right: 4px solid green;
      -webkit-transform:
                  translateY(-10px)
                  translateX(-10px)
                  rotate(62deg); 
      position: absolute;
      top: 15px;
      right: 515px;
      display:none;
      }
      
      #b3r
      {
      height: 21px;
      border-right: 4px solid red;
      position: absolute;
      -webkit-transform:
                  translateY(10px)
                  translateX(10px)
                  rotate(-70deg); 
      top: 3px;
      right: 500px;
      display:block;
      /*bottom: 335px;
      right: 1058px;*/
      
      }
      #b3g
      {
      height: 21px;
      border-right: 4px solid green;
      -webkit-transform:
                  translateY(-10px)
                  translateX(-10px)
                  rotate(68deg); 
      position: absolute;
      top: 15px;
      right: 480px;
      display:none;
      }
      
      #b4r
      {
      height: 24px;
      border-right: 4px solid red;
      position: absolute;
      -webkit-transform:
                  translateY(10px)
                  translateX(10px)
                  rotate(-70deg); 
      top: 2px;
      right: 455px;
      display:block;
      /*bottom: 335px;
      right: 1058px;*/
      
      }
      #b4g
      {
      height: 21px;
      border-right: 4px solid green;
      -webkit-transform:
                  translateY(-10px)
                  translateX(-10px)
                  rotate(68deg); 
      position: absolute;
      top: 15px;
      right: 438px;
      display:none;
      }
      
      #b5r
      {
      height: 21px;
      border-right: 4px solid red;
      position: absolute;
      -webkit-transform:
                  translateY(10px)
                  translateX(10px)
                  rotate(-68deg); 
      top: 4px;
      right: 420px;
      display:block;
      /*bottom: 335px;
      right: 1058px;*/
      
      }
      #b5g
      {
      height: 24px;
      border-right: 4px solid green;
      -webkit-transform:
                  translateY(-10px)
                  translateX(-10px)
                  rotate(68deg); 
      position: absolute;
      top: 15px;
      right: 400px;
      display:none;
      }
      
      #b6r
      {
      height: 17px;
      border-right: 4px solid red;
      position: absolute;
      -webkit-transform:
                  translateY(10px)
                  translateX(10px)
                  rotate(-65deg); 
      top: 4px;
      right: 386px;
      display:block;
      /*bottom: 335px;
      right: 1058px;*/
      
      }
      #b6g
      {
      height: 17px;
      border-right: 4px solid rgb(0, 128, 0);
      -webkit-transform:
                  translateY(-10px)
                  translateX(-10px)
                  rotate(70deg); 
      position: absolute;
      top: 15px;
      right: 366px;
      display:none;
      }
      #b7r
      {
      height: 17px;
      border-right: 4px solid red;
      position: absolute;
      -webkit-transform:
                  translateY(10px)
                  translateX(10px)
                  rotate(-65deg); 
      top: 4px;
      right: 360px;
      display:block;
      /*bottom: 335px;
      right: 1058px;*/
      
      }
      #b7g
      {
      height: 17px;
      border-right: 4px solid rgb(0, 128, 0);
      -webkit-transform:
                  translateY(-10px)
                  translateX(-10px)
                  rotate(70deg); 
      position: absolute;
      top: 15px;
      right: 342px;
      display:none;
      
      ;
      }