/* Bootstrap */
button, input, optgroup, select, textarea {font-family:inherit; font-size:inherit;}

/* Font */
html {font-family:"Open Sans"; font-size:12pt;}

/* Color */
.control {color:white;}

/* Border */
.bar {border: 2px solid white;}

/* Width */
.control, #progress {width: 100%;}
.bar {width:216pt;}
#slider {width: 24pt;}

/* Margin */
header {margin:12pt;}
h1, h2, h3, h4 {margin:.25em 0;}

/* Display */
menu {display:inline;}

/* Background */
#progress {background-color:#B725FF;}

/* Palette */
.black {color:#32393F;}
.blue {color:#81ADC6;}
.purple {color:#9981C6;}
.red {color:#C681AF;}
.yellow {color:#C69881;}
.green {color:#AFC681;}
.teal {color:#81C698;}

.theme-light {
	color: #444444;
	background: -webkit-linear-gradient(to right, #e2efff, #ffffff, #fbdef5);
	background:linear-gradient(to right, #e2efff, #ffffff, #fbdef5);
}
.theme-dark {
	color: #ffffff;
	background: -webkit-linear-gradient(to right, #0f051d, #0e074e, #0f051d);
	background:linear-gradient(to right, #0f051d, #0e074e, #0f051d);
}
a {
	color: #4154f1;
	text-decoration: none;
}
a:hover {
	color: #717ff5;
	text-decoration: none;
}

/*
 * Controls
 */

#progress {
	transition: 100ms, linear;
	text-align: center;
	display: inline-block;
}
#slider {
	border:3pt solid #C95C85;
	left: 33pt;
	top: -6pt;
	position: absolute;
}