body {
	font-family: Arial, helvetica, sans-serif;
	font-size: 14px;
}

.hidden, .interaction {
	display:none;
}

.header {
	position: absolute;
	top: 0px;
	left: 0px;
}

.topleft {
	position: absolute;
	top: 0px;
	left: 0px;
}

.bottomleft {
	position: absolute;
	top: 420px;
	left: 25px;
}

.topright {
	position: absolute;
	top: 0px;
	left: 420px;
	width: 110px;
}

.controls {
	position: absolute;
	top: 390px;
	left: 0px;
	width: 500px;
}

.label, .control {
	float: left;
	margin-top: 5px;
}

.label {
	width: 100px;
	text-align: right;
	margin-right: 5px;
}

.control {
	width: 400px;
	margin-bottom: 10px;
}

#period-slider, #amplitude-slider, #initial-displacement-slider, #omega-slider, #phi-slider, #time-slider {
	display: inline-block;
	width: 200px;
}

.draggable-layer {
	width: 600px;
	height: 400px;
}

.indented {
	position: absolute !important;
	left: 180px !important;
	display: inline-block !important;
}

#feedback-area, .equation-highlight {
	display: none;
	background-color:rgba(255,255,100,0.2);
	padding: 4px;
	border-radius: 2px;
}

.ui-button-text, ui-button-text-only {
    line-height: 1.0;
    font-size: 12px;
}

/* for dragging/dropping */
.draggables, .droptargets {
	width: 440px;
	min-height: 80px;
	margin: -5px;
	display: inline-block;
}

.draggable {
	background-color: #eeeeee;
}

.droptarget {
	background-color: white;
}

.draggable, .droptarget {
	border: 1px solid #555555;
	border-radius: 5px;
	cursor: pointer;
}

.draggable, .droptarget {
	float: left;
	height: 15px;
	width: 20px;
	margin: 5px;
	padding: 5px;
	text-align: center;
}

table {
	border-collapse: collapse;
}

th, td {
	border: 1px solid #cccccc;
	width: 100px;
}

th {
	text-align: center;
}

td {
	text-align: right;
}

canvas.framed {
	border: 1px solid #cccccc;
	border-radius: 5px;
}

.navigation-button {
  line-height: 1.0;
  font-size: 10px;
  padding: 2px;
}

ul, li {
	padding-left: 0px;
}

.pi, .eqn, .eqni {
	font-family: serif;
}

.eqni {
	font-style: italic;
}

.pi:before {
	content: "π";
}

#feedback-area, .feedback {
  display: none;
  background-color:rgba(255,255,100,0.2);
  border-radius: 5px;
}

.smaller {
	font-size: 12px;
}

.ui-tabs .ui-tabs-nav li a {
    padding: 0 1em;
    font-size: 12px;
    line-height: 1.0;
}

.no-close .ui-dialog-titlebar-close {
  display: none;
}

#buttons {
	text-align: right;
}

.centered {
	text-align: center;
}

td, th {
	font-size: 12px;
	text-align: center;
}

.quizcontainer div {
}

.quizcontainer img {
	width: 70%;
}

.quizcontainer label {
	height: 35px;
	width: 60px;
	margin: 1px;
}

.buttons {
	text-align: right;
	margin-right: -10px;
}