body { margin: 0; overflow-x: none; }
svg {
  background-color: #cccccc;
}
#math{
  width: 960px;
  height: 220px;
  margin: 0px auto;
  margin-top: -5px;
  font-family: monospace;
  /** HACK **/
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}
.matrix, .equals{
  position: relative;
  height:180px;
  margin:10px;
  margin-right:0;
  float: left;
}
.matrix{
  padding: 0 10px;
}
.matrix > input, .matrix > div{
  float:left; margin:5px; position: relative;
  width:50px; height:44px;
  font-size: 15px; line-height: 44px; text-align: center;
  background: #eee
}
.matrix > input{
  border: 2px solid #bbb;
  display: block;
  width:44px; height:44px;
  font-size: 15px;
  font-family: monospace; cursor: col-resize;
}
.matrix[expanded]{
  width:300px;
}
.matrix[expanded] > div{
  position: relative;
  width:80px; margin:5px 10px;
  font-size: 12px; cursor: pointer;
}
.matrix[expanded] > div[plus]:before{
  content: '+';
  position: absolute; left: -16px;
  font-size: 20px; text-align: center;
  width:0px; height:0px;
  color: #000;
}
.matrix:before, .matrix:after{
  content:'';
  position:absolute;
  width:20px; height:190px;
  border: 5px solid #000;
  top:-10px;
}
.matrix[highlight=yes]:before, .matrix[highlight=yes]:after{
  border-color: #DD3838;
}
.matrix:before{
  left:0;
  border-right: none;
}
.matrix:after{
  right:0;
  border-left: none;
}
.equals{
  width:60px;
}
.equals:after{
  content: '';
  width:40px;height:20px;
  position: absolute; margin:auto;
  top:0; bottom:0; left:0; right:0;
  border: 5px solid #000;border-left: none;border-right: none;
}
.matrix > .label, .matrix[expanded] > .label{
  font-size: 15px;float: none;background: none;
  width: 100%;
  position: absolute;margin: 0;
  top: 195px;left: 0px;
  line-height: 20px;font-family: Helvetica, Arial, sans-serif;
}
.matrix > .label > span{
  color: #888;
}
.matrix > div[plain]{
  border: 3px solid #eee;
  width: 44px; height: 44px;
}
.unselectable{
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;          
}

.angle-container{
  position: relative;
  width: 200px;
  height:180px;
  margin:10px;
  margin-right:0;
  float: left;
  padding: 0 0px;
}
.angle-container > input, .angle-container > div{
  float:left; margin:5px; position: relative;
  width:50px; height:44px; 
  font-size: 15px; line-height: 44px; text-align: center;

}
.angle-container > input{

  border: 2px solid #bbb;
  display: block;
  width:54px; height:44px;
  font-size: 15px;
  font-family: monospace; cursor: col-resize;
}


.unit {
float:left;
clear:left;
margin:10px 10px;
display: block;
font-size: 15px; line-height: 44px;
}

/* http://codepen.io/NobodyRocks/pen/qzfoc */
input.angle {
background-color:gray;
-webkit-animation: neon1 1.5s ease-in-out infinite alternate;
  -moz-animation: neon1 1.5s ease-in-out infinite alternate;
  animation: neon1 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #FF1177,
               0 0 70px  #FF1177,
               0 0 80px  #FF1177,
               0 0 100px #FF1177,
               0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #FF1177,
               0 0 35px #FF1177,
               0 0 40px #FF1177,
               0 0 50px #FF1177,
               0 0 75px #FF1177;
  }
}
@-moz-keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #FF1177,
               0 0 70px  #FF1177,
               0 0 80px  #FF1177,
               0 0 100px #FF1177,
               0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #FF1177,
               0 0 35px #FF1177,
               0 0 40px #FF1177,
               0 0 50px #FF1177,
               0 0 75px #FF1177;
  }
}
@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #fff,
               0 0 20px  #fff,
               0 0 30px  #fff,
               0 0 40px  #FF1177,
               0 0 70px  #FF1177,
               0 0 80px  #FF1177,
               0 0 100px #FF1177,
               0 0 150px #FF1177;
  }
  to {
    text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 15px #fff,
               0 0 20px #FF1177,
               0 0 35px #FF1177,
               0 0 40px #FF1177,
               0 0 50px #FF1177,
               0 0 75px #FF1177;
  }
}