@import url('https://fonts.googleapis.com/css?family=Merriweather');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');


html, body {
	height: 100%;
	width: 100%;
}

body {
	margin: 0 auto;
	
	display:grid;
	grid-template-columns: 22em 1fr ;

	font-family: "Merriweather", Georgia, serif;
	line-height:1.5em;
	background-color:rgb(231, 227, 222);
}

nav {
	background-color: #343131;
	overflow-y: scroll;
	overflow-x: hidden;
		
	font: 16px "Source Sans Pro", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif
}

/* Top right bottom left */
nav h1 {
	padding: 0.8em 0 0.8em 0;
	margin:  0 0 0 0;
	text-align: center;
	background-color: #2980B9;
	color:#FCFCFC;
}

nav ul {
	list-style: none;
	width:100%;
	margin: 0;
	padding: 1em 0 1em 0;
}

nav li {
	padding: 0.5em 0.5em 0.5em 0.8em;
	width:100%;
	color:#B3B3B3;
}

nav li:hover {
	background-color:#4E4A4A;
	cursor:pointer;
}


.nav-time-code-list {
	padding: 0 0 0 0;
	background-color: #E3E3E3;
	display:none;
}

.nav-time-code-list li{
	padding-left: 2em;
	color:#808080;
}

.nav-time-code-list li:hover{
	background-color: #D6D6D6;
}

.nav-time-code-list-active {
	display:block;
}

.nav-active {
	background-color: #FCFCFC;
	color:#404040
}

.nav-active:hover {
	background-color: #FCFCFC;
	color:#404040
}

nav h1:hover {
	cursor:pointer;
}


#nav-btn {
	/*
	clear:none;
	float:right;
	*/
}

main {
	background-color:#FCFCFC;
	padding: 0.5em 3em 2em 3em;
}

main header {
	padding: 1em 1em 1em 1em;
	font: 16px "Source Sans Pro", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif
}

main header a{
	margin: 1em 0.25em 1em 0.25em;
	color: rgb(61, 130, 179);
	text-decoration: none;
}

main header a:hover {
	text-decoration: underline;
}

.video {
    position:relative;
    width:100%;
    height: 0;
    padding-bottom: 56.25%;
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
}