﻿.lightsaber {
  position: absolute;
  transform: rotate(90deg);
  margin-top: 1em;
}
.lightsaber.yoda {
  left: 300px;
  transform: rotate(270deg);
}
.lightsaber label:not(.ignore) {
  cursor: pointer;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 88;
  text-indent: -9999px;
  width: 15px;
  height: 50px;
  border-bottom: solid 4px grey;
  border-top: solid 5px grey;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background: #e2e2e2;
  /* Old browsers */
  background: linear-gradient(to right, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
  /* W3C */
  background: -moz-linear-gradient(left, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e2e2e2), color-stop(50%, #dbdbdb), color-stop(51%, #d1d1d1), color-stop(100%, #fefefe));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1);
  /* IE6-9 */
}
.lightsaber input[type=checkbox] {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: 77;
}
.lightsaber input[type=checkbox]:checked ~ .plasma {
  height: 200px;
}
.lightsaber input[type=checkbox]:checked ~ .switch {
  background: #468847;
}
.lightsaber input[type=checkbox]:hover ~ .switch {
  background: #c09853;
  /*left: 12px;*/
  left: -2px;
}
.lightsaber .switch {
  background: #B94A37;
  width: 5px;
  height: 10px;
  display: block;
  position: absolute;
  bottom: 25px;
  /*left: 13px;*/
  left: -3px;
  transition: left 200ms;
  -moz-transition: left 200ms;
  -webkit-transition: left 200ms;
  -o-transition: left 200ms;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.lightsaber .plasma {
  transition: height 300ms;
  -moz-transition: height 300ms;
  -webkit-transition: height 300ms;
  -o-transition: height 300ms;
  border-radius: 12px 12px 0 0;
  position: absolute;
  bottom: 45px;
  left: 3px;
  width: 10px;
  display: block;
  filter: blur(1px);
  -moz-filter: blur(1px);
  -webkit-filter: blur(1px);
  -ms-filter: blur(1px);
  height: 0;
}
.lightsaber .plasma.yoda,
.lightsaber .plasma.vader,
.lightsaber .plasma.windu,
.lightsaber .plasma.obi-wan {
  animation-duration: 2s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}
.lightsaber .plasma.yoda {
  background: #87dc5a;
  /* Old browsers */
  background: linear-gradient(to right, #87dc5a 0%, #fefefe 30%, #fefefe 50%, #fefefe 70%, #87dc5a 100%);
  /* W3C */
  background: -moz-linear-gradient(left, #87dc5a 0%, #fefefe 30%, #fefefe 50%, #fefefe 70%, #87dc5a 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #87dc5a), color-stop(30%, #fefefe), color-stop(50%, #fefefe), color-stop(70%, #fefefe), color-stop(100%, #87dc5a));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #87dc5a 0%, #fefefe 30%, #fefefe 50%, #fefefe 70%, #87dc5a 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #87dc5a 0%, #fefefe 30%, #fefefe 50%, #fefefe 70%, #87dc5a 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #87dc5a 0%, #fefefe 30%, #fefefe 50%, #fefefe 70%, #87dc5a 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87dc5a', endColorstr='#87dc5a', GradientType=1);
  /* IE6-9 */
  animation-name: yoda;
  -moz-animation-name: yoda;
  -webkit-animation-name: yoda;
  -o-animation-name: yoda;
}
.lightsaber .plasma.vader {
  background: #e51115;
  /* Old browsers */
  background: linear-gradient(to right, #e51115 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #e51115 100%);
  /* W3C */
  background: -moz-linear-gradient(left, #e51115 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #e51115 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #e51115), color-stop(30%, #fefefe), color-stop(47%, #fefefe), color-stop(71%, #fefefe), color-stop(100%, #e51115));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #e51115 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #e51115 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #e51115 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #e51115 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #e51115 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #e51115 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e51115', endColorstr='#e51115', GradientType=1);
  /* IE6-9 */
  animation-name: vader;
  -moz-animation-name: vader;
  -webkit-animation-name: vader;
  -o-animation-name: vader;
}
.lightsaber .plasma.windu {
  background: #ca74dd;
  /* Old browsers */
  background: linear-gradient(to right, #ca74dd 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #ca74dd 100%);
  /* W3C */
  background: -moz-linear-gradient(left, #ca74dd 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #ca74dd 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #ca74dd), color-stop(30%, #fefefe), color-stop(47%, #fefefe), color-stop(71%, #fefefe), color-stop(100%, #ca74dd));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #ca74dd 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #ca74dd 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #ca74dd 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #ca74dd 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #ca74dd 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #ca74dd 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ca74dd', endColorstr='#ca74dd', GradientType=1);
  /* IE6-9 */
  animation-name: windu;
  -moz-animation-name: windu;
  -webkit-animation-name: windu;
  -o-animation-name: windu;
}
.lightsaber .plasma.obi-wan {
  background: #3784d6;
  /* Old browsers */
  background: linear-gradient(to right, #3784d6 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #3784d6 100%);
  /* W3C */
  background: -moz-linear-gradient(left, #3784d6 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #3784d6 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #3784d6), color-stop(30%, #fefefe), color-stop(47%, #fefefe), color-stop(71%, #fefefe), color-stop(100%, #3784d6));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #3784d6 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #3784d6 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #3784d6 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #3784d6 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #3784d6 0%, #fefefe 30%, #fefefe 47%, #fefefe 71%, #3784d6 100%);
  /* IE10+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3784d6', endColorstr='#3784d6', GradientType=1);
  /* IE6-9 */
  animation-name: obi-wan;
  -moz-animation-name: obi-wan;
  -webkit-animation-name: obi-wan;
  -o-animation-name: obi-wan;
}
@keyframes yoda {
  from {
    box-shadow: 0 0 10px #7EC855;
  }
  50% {
    box-shadow: 0 0 16px #7EC855;
  }
  to {
    box-shadow: 0 0 10px #7EC855;
  }
}
@-moz-keyframes yoda {
  from {
    box-shadow: 0 0 10px #7EC855;
  }
  50% {
    box-shadow: 0 0 16px #7EC855;
  }
  to {
    box-shadow: 0 0 10px #7EC855;
  }
}
@-webkit-keyframes yoda {
  from {
    box-shadow: 0 0 10px #7EC855;
  }
  50% {
    box-shadow: 0 0 16px #7EC855;
  }
  to {
    box-shadow: 0 0 10px #7EC855;
  }
}
@-o-keyframes yoda {
  from {
    box-shadow: 0 0 10px #7EC855;
  }
  50% {
    box-shadow: 0 0 16px #7EC855;
  }
  to {
    box-shadow: 0 0 10px #7EC855;
  }
}
@-ms-keyframes yoda {
  from {
    box-shadow: 0 0 10px #7EC855;
  }
  50% {
    box-shadow: 0 0 16px #7EC855;
  }
  to {
    box-shadow: 0 0 10px #7EC855;
  }
}
@keyframes vader {
  from {
    box-shadow: 0 0 10px #e51115;
  }
  50% {
    box-shadow: 0 0 16px #e51115;
  }
  to {
    box-shadow: 0 0 10px #e51115;
  }
}
@-moz-keyframes vader {
  from {
    box-shadow: 0 0 10px #e51115;
  }
  50% {
    box-shadow: 0 0 16px #e51115;
  }
  to {
    box-shadow: 0 0 10px #e51115;
  }
}
@-webkit-keyframes vader {
  from {
    box-shadow: 0 0 10px #e51115;
  }
  50% {
    box-shadow: 0 0 16px #e51115;
  }
  to {
    box-shadow: 0 0 10px #e51115;
  }
}
@-o-keyframes vader {
  from {
    box-shadow: 0 0 10px #e51115;
  }
  50% {
    box-shadow: 0 0 16px #e51115;
  }
  to {
    box-shadow: 0 0 10px #e51115;
  }
}
@-ms-keyframes vader {
  from {
    box-shadow: 0 0 10px #e51115;
  }
  50% {
    box-shadow: 0 0 16px #e51115;
  }
  to {
    box-shadow: 0 0 10px #e51115;
  }
}
@keyframes windu {
  from {
    box-shadow: 0 0 10px #ca74dd;
  }
  50% {
    box-shadow: 0 0 16px #ca74dd;
  }
  to {
    box-shadow: 0 0 10px #ca74dd;
  }
}
@-moz-keyframes windu {
  from {
    box-shadow: 0 0 10px #ca74dd;
  }
  50% {
    box-shadow: 0 0 16px #ca74dd;
  }
  to {
    box-shadow: 0 0 10px #ca74dd;
  }
}
@-webkit-keyframes windu {
  from {
    box-shadow: 0 0 10px #ca74dd;
  }
  50% {
    box-shadow: 0 0 16px #ca74dd;
  }
  to {
    box-shadow: 0 0 10px #ca74dd;
  }
}
@-o-keyframes windu {
  from {
    box-shadow: 0 0 10px #ca74dd;
  }
  50% {
    box-shadow: 0 0 16px #ca74dd;
  }
  to {
    box-shadow: 0 0 10px #ca74dd;
  }
}
@-ms-keyframes windu {
  from {
    box-shadow: 0 0 10px #ca74dd;
  }
  50% {
    box-shadow: 0 0 16px #ca74dd;
  }
  to {
    box-shadow: 0 0 10px #ca74dd;
  }
}
@keyframes obi-wan {
  from {
    box-shadow: 0 0 10px #3784d6;
  }
  50% {
    box-shadow: 0 0 16px #3784d6;
  }
  to {
    box-shadow: 0 0 10px #3784d6;
  }
}
@-moz-keyframes obi-wan {
  from {
    box-shadow: 0 0 10px #3784d6;
  }
  50% {
    box-shadow: 0 0 16px #3784d6;
  }
  to {
    box-shadow: 0 0 10px #3784d6;
  }
}
@-webkit-keyframes obi-wan {
  from {
    box-shadow: 0 0 10px #3784d6;
  }
  50% {
    box-shadow: 0 0 16px #3784d6;
  }
  to {
    box-shadow: 0 0 10px #3784d6;
  }
}
@-o-keyframes obi-wan {
  from {
    box-shadow: 0 0 10px #3784d6;
  }
  50% {
    box-shadow: 0 0 16px #3784d6;
  }
  to {
    box-shadow: 0 0 10px #3784d6;
  }
}
@-ms-keyframes obi-wan {
  from {
    box-shadow: 0 0 10px #3784d6;
  }
  50% {
    box-shadow: 0 0 16px #3784d6;
  }
  to {
    box-shadow: 0 0 10px #3784d6;
  }
}