.settingsFloat{
  width:50px;
  height:50px;
  position: fixed;
  top:130px;
  right:0;
  background: #646e6d;
  cursor:pointer;
  text-align: center;
  z-index:1024;
  -webkit-transition: 300ms linear;
  -moz-transition: 300ms linear;
  -o-transition: 300ms linear;
  -ms-transition: 300ms linear;
  transition: 300ms linear;
}
.settingsFloat:after{
  color:white;
  content: "\f085";
  font-family: 'fontawesome';
  font-size:28px;
  position: relative;
  top:6px;
}
.settingsFloat.showsettings{
  right:285px;
}

.settingsFloat .innercontent{
  width:285px;
  position: absolute;
  background: #646e6d;
  right:0px;
  display:none;
  text-align: center;
  padding:25px;
  color:white;
  font-size:14px;
}
.settingsFloat .innercontent.showsettings{
  display:block;
  right:-285px;
}

.settingsFloat p, .settingsFloat a{
  color:white;
}

.settingsFloat .innercontent .swatch{
  width:50px;
  height:50px;
  display:inline-block;
  margin:10px;
}
.settingsFloat .innercontent .swatch.teal{
  background:#1ABC9C;
}
.settingsFloat .innercontent .swatch.green{
  background:#2ECC71;
}
.settingsFloat .innercontent .swatch.blue{
  background:#3498DB;
}
.settingsFloat .innercontent .swatch.purple{
  background:#9B59B6;
}
.settingsFloat .innercontent .swatch.yellow{
  background:#F1C40F;
}
.settingsFloat .innercontent .swatch.orange{
  background:#E67E22;
}
.settingsFloat .innercontent .swatch.red{
  background:#E74C3C;
}