viewer,
ng-view {
	display: block;
	top: 0px;
}

div.main {
	position: fixed;
	left:  0px;
	top:  0px;
	right: 0px;
	bottom: 0px;
	background: #fcfcfc;
}


div.form-group {
	padding: 8px;
	margin: 0px;
	border-bottom: solid 1px #ddd;
	background: #eee;
}

/*
 * Main content
 */
graph {
	position: fixed;
	top: 0px;
	height: 50%;
	left: 320px;
	right: 0px;
	display: block;
	border-left: solid 1px #ddd;
	background: #fff;
}

data {
	position: fixed;
	top: 50%;
	height: 50%;
	left: 320px;
	right: 0px;
	bottom: 0px;
	display: block;
	border-left: solid 1px #ddd;
	border-top: solid 1px #ddd;
	background: #fcfcfc;
	overflow: hidden;
	overflow-y: auto;
}

graph > canvas,
graph > div.chart {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	width: 100%;
	height: 100%;
}

graph label {
	padding: 8px;
}

li {
	display: block;
	overflow: hidden;
	list-style: none;
	padding: 0px;
	margin: 0px;
	z-index: 1;
}

li label {
	width: 100%;
	padding: 0px 0px 0px 8px;
	margin: 0px;
	line-height: 24px;
	cursor: pointer;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

li created {
	display: none;
}

li[selected] {
	z-index: 2;
}


li[selected] > label {
	color: #66c;
	cursor: default;
}

ul[canisters] > li {
	border-bottom: solid 1px #eee;
}

ul[canisters] {
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	overflow-y: auto;
	width: 320px;
	height: 100%;	
}

ul[fuelStreams] {
	display: block;
	margin: 0px;
	padding: 0px;
	padding-left: 20px;
}

ul[fuelStreams] li label {
	font-weight: normal;
}


@media (max-width: 767px) {

	.li {
		height: initial;
		sline-height: 44px !important;
	}

	div.main {
		overflow-y: auto;
	}

	ul[canisters] {
		position: relative;
		left: auto;
		top: auto;
		right: auto;
		display: block;
		width: 100%;
		height: auto;
	}

	graph,
	data {
		position: relative;
		left: auto;
		top: auto;
		right: auto;
		display: block;
		width: 100%;
		height: 50%;
	}
}

.collapse-control {
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 14px;
}