body
{
	max-width: 60rem;
}

.krow .kcolumn
{
	width: 49%;
	float: left;
	margin-right: 2px;
}

.krow
{
	clear: left;
	overflow: auto;
}

#controls
{
	clear: left;
}
#letterfilter-selector
{
	list-style-type: none;
	overflow: auto;
	margin-bottom: 0;
}

li.letterfiltertab
{
	float: left;
	border: 1px solid #999;
	width: 3em;
	height: 3em;
	border-radius: 5px;
	margin-bottom: 0;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

li.letterfiltertab.active
{
	border-bottom: 1px solid #fff;
}

li.letterfilter
{
	display: none;
	clear: left;
	border: 1px solid #999;
	padding: 1em;
	margin-top: -1px;
}

li.letterfilter.active
{
	display: block;
}

#results li
{
	font-weight: bold;
	font-size: 120%;
}

#common-letters
{
	display: block;
	margin-top: -2em;
}

.num-cols-2
{
	columns: 2;
}
.num-cols-3
{
	columns: 3;
}
.num-cols-4
{
	columns: 4;
}
.num-cols-5
{
	columns: 5;
}

@media (max-width: 600px) {
	.num-cols-5
	{
		columns: 4;
	}
}


.switch-option {
	display: inline-block;
}

 /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 56px;
  height: 30px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .3s;
}

input:checked + .slider {
  background-color: #9b4dca;;
}

input:focus + .slider {
  box-shadow: 0 0 1px #9b4dca;;
}

input:checked + .slider:before {
  transform: translateX(22px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}