body { font-family: "Open Sans", "Helvetica", Arial, sans-serif;}

.All { background-color: lightgrey;}
.Formal { background-color: #93d1ff;}
.Material { background-color: #fea18d;}
.Interface { background-color: #b7e695;}
.Interaction { background-color: #fefca2;}

/* UI colour palette based on #236467 @ http://paletton.com */
/* http://paletton.com/palette.php?uid=53j0u0kllll97A-ferBrsf4-F8P */

/* height should relate to #content */
#topbar { 
	position: fixed;
	height: 140px;
	background: #7CAAAC;
	width: 100%;
	/* ensure this draws above any charts/labels */
	z-index: 10;
}

#topbar div#wrapper {
/* center */
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
/* and nudge content so it lines up with other content */
	padding-left: 20px;
}

/* emulate h1 but inline element */
#title { font-size: 2em; font-weight: bold; }

#title a:link, #title a:visited, #title a:hover, #title a:active  { color: #00282A;}

.sliderContainer { 
	width: 1000px; 
	padding-bottom: 20px;
}

/* override colours for ionslider */
.irs-bar {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	background: black;
	background: linear-gradient(to top, black 0%, #478285  0%);
}

.irs-from, .irs-to, .irs-single {
	background: #478285 ;
}

audio { width: 1000px; height: 25px;}

#audioPlayer { padding-left: 0px;}

button.playPause { border: 1px solid black; font-size: 0.7em; margin-right: 0.5em;}

button.playPause.highlight { background: #236467; color: white;}

#content {
/* don't overlap with the topbar */
	padding-top: 150px;

/* centre the content */
	margin-left: auto;
	margin-right: auto;
	width: 1100px;
	
}

.chartContainer { float: left;}

.chartContainer .playhead {
	opacity: 0.7;
	fill: #00282A;
}

/* emulate h2 but inline element */
.chartTitle { font-size: 1.5em; font-weight: bold;}

#chartControls { 
	float: left;
	position: relative;
	left: 45em;
	top: -500px;
}

.chartControls input { 
	display: inline; 
	width: 10em;
	border: 1px solid black;
	font-size: 0.7em;
}

.chart1btn {
}

.chart1btn.enabled {
	background: #236467;
	color: white;
}

.clear { clear: both;}

#trendChart {
	padding-left: 70px;
	padding-right: 5em;
	float: left;
}

.streamSelection { 
	width: 8em;
	border: 1px solid black; 
	margin: 0.5em 1em 0 0 ;
	float: left;
}

.stats { 
	float: left; 
	padding-left: 1em; 
	padding-bottom: 2em;
}

.stats td, .stats th {
	padding: 5px;
}

#activityLog td.comment {
	width: 40em;
}

#activityLog tr:nth-child(even) {
	background: #efefef;
}