body {
	font-family: Sans-Serif;
}

label {
  padding: 0.75rem;
}

input {
    font-size: 1rem;
}

input[type=checkbox]
{
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.75rem;
  margin: auto 0;
}

canvas {
    max-width: 100%;
}

.container {
	display: flex;
    flex-direction: column;
}
.centred {
	margin: 0 auto;
}
.row {
    display: flex;
    flex-direction: row;
    margin-bottom: 0.5rem;
}

.btn {
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  padding: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  background-color: #ccc;
  margin: 0.1rem;
}

.btn:hover {
  text-decoration: none;
  background-color: #ddd;
}

.btn.toggle {
    min-width: 4rem;
    text-align: center;
}

.btn.active {
    box-shadow: inset 0 0 0 0.05em black,0 0 0 0.2em #00ff00;
}
.picker:not(.active) {
    transform: scale(0.75);
}

.go:before {
    font-family: FontAwesome;
    content: "\f04b";
}
.go:after {
    content: "Play";
}
.stop:before {
    font-family: FontAwesome;
    content: "\f04c";
}
.stop:after {
    content: "Pause";
}