/*
This is the style sheet to turn a checkbox with a label and a div into a toggle switch.
    
This css expects the following html structure:
    <div class='toggleWrapper'>
        <input type='checkbox' class='baseBox' name='{name here}' id='{uniqueId}' />
        <label class='toggleGrip' for='{uniqueId}'></label>
        <div class='toggleBar'></div>
    </div>    
*/

input[type='checkbox'].baseBox{
  margin-top:25%;
  margin-left:25%;
}
.toggleWrapper{
  position:relative;
  width:4em;
  height:3em;
}
.toggleGrip:after{
  content: ' ';
  position:absolute;
  top:0;
  left:10%;
  background:gray;
  width:40%;
  height:100%;
  z-index:5;
}
.toggleBar{
  position:absolute;
  top:10%;
  left:5%;
  width:90%;
  height:80%;
  z-index:4;
  background: lightgrey;
}
.baseBox:checked + .toggleGrip:after{
  left:50%;
  background:green;
}
.baseBox:checked ~ .toggleBar{
  -webkit-box-shadow: 0px 0px 15px 5px rgba(190, 255, 190, .75);
  -moz-box-shadow: 0px 0px 15px 5px rgba(190, 255, 190, .75);
  box-shadow: 0px 0px 15px 5px rgba(190, 255, 190, .75); 
}
.toggleOFF{
    font-size:xx-small;
    float:right;
    font-weight:bold;
}
.toggleON{
    font-size:xx-small;
    float:left;
    font-weight:bold;
    display:none;
}
.baseBox:checked ~ .toggleBar .toggleOFF{
    display:none;
}

.baseBox:checked ~ .toggleBar .toggleON{
    display:inline;
}