$margin: 20px;
$header-height: 60px;

$pageBgColor: #102027;
$darkBlue: #044b7f;


@font-face{
	font-family: 'Fira Sans';
	src: url('fonts/FiraSans-Regular.eot');
	src: url('fonts/FiraSans-Regular.eot') format('embedded-opentype'),
			 url('fonts/FiraSans-Regular.woff2') format('woff2'),
			 url('fonts/FiraSans-Regular.woff') format('woff'),
			 url('fonts/FiraSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}


@font-face{
	font-family: 'Roboto';
	src: url('fonts/Roboto-Regular.eot');
	src: url('fonts/Roboto-Regular.eot') format('embedded-opentype'),
			 url('fonts/Roboto-Regular.woff') format('woff'),
			 url('fonts/Roboto-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

body {
	font-family: 'Fira Sans', Arial, sans-serif;
	margin: 0;
	padding: 20px;
	background: $pageBgColor;
	color: #fff;
}

.container {
	width: 100%;
	max-width: 1200px;
	padding: 0 1em;
	margin: 1em auto;
}

.graph-svg {
	position: fixed;
	top: 0; // $header-height;
	left: 0;
	width: 100%;
	display: block;
	margin-top: -1px;
	margin-left: auto;
	margin-right: auto;
}

.demo-header {
	z-index: 9999;
	padding: 0 $margin;
	// background: #fff;
	// color: #333;
	background: $darkBlue; // #e3b505;
	color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: $header-height;
	overflow: hidden;

	img, h1 {
		display: inline-block;
    vertical-align: middle;
	}

	img {
		height: $header-height - 10;
		margin-right: 5px;
	}

	h1 {
		margin: 0;
		font-weight: 400;
		font-size: 24px;
		line-height: $header-height;
	}
}

.demo-nav {
	float: right;
	margin-right: $margin;

	ul {
		margin: 0;
		padding: 0;
	}

	li {
		display: inline-block;
		padding: 0 1em;
		line-height: $header-height;
	}

	a {
		color: #c5dbe7;

		&:link, &:visited {
			text-decoration: none;
		}

		&:hover, &:active {
			text-decoration: underline;
		}
	}
}

// .demo-delete {
// 	position: fixed;
// 	top: $header-height;
// 	right: 0;
// 	height: 60px;
// 	width: 200px;
// 	background:#eee;
// 	z-index: 9999; // above d3, webcola

// 	input {
// 		width: 60px;
// 	}
// }

// .input-txt {
// 	display: inline-block;
// 	margin: 0 1em;
// 	height: 1.5em;
// 	padding: 3px 6px;
// 	border: 1px soild $graphLinkColor;
// }

// .btn {
// 	margin-top: .5em;
// 	display: inline-block;
// 	background: #28405a;
// 	border: 1px solid #435f7d;
// 	padding: 0.35em 0.75em 0.45em;
// 	border-radius: 3px;
// 	font-size: 14px;
// 	color: #ddd;
// 	cursor: pointer;

// 	&:focus {
// 		outline: none;
// 		background: $orange;
// 	}

// 	&:hover {
// 		background: lighten(#28405a, 10%);
// 	}
// }