#video-container {
	text-align: center;
	margin: 0 auto;
	width: 100%;  
	max-width: 1024px;
}

#videosearch {
	margin: 2em auto;
	height: 34px;
	max-width: 600px;
}

#video {
	margin: 0 auto 2em auto;
	padding: 0em;
	display: inline-block;
}

video {
	margin: 0;
	padding: 0;
	width: 100%;
}

/* Fix the width of the search box and button so they appear together*/
#videosearch input[type="text"] {
	margin-right: 1em;
	width: calc(100% - 120px - 1em);
}
#videosearch input[type=submit] {
	width: 120px;
}


#playlist {
	/*width: 300px;*/
	margin: 1em 0.25em; padding: 1em;
	font-family: "Raleway", "HelveticaNeue-Thin", "Helvetica Neue Thin", "Helvetica Neue", Helvetica, Arial, sans-serif; 
	font-weight: 200;
	color: #ddd;
	background: #222;
	display: inline-block;    
	vertical-align: top;
	text-align: left;
}

#playlist h2, h3 {
	font-family: "Raleway", "HelveticaNeue-Ultralight", "Helvetica Neue Ultralight", "Helvetica Neue", Helvetica, Arial, sans-serif; 
}

#playlist h2 {
	margin: 0.25em 0;
	font-weight: 100; font-size: 16pt; text-transform: uppercase; text-align: center;
	border-bottom: 1px solid #bbb;
	-webkit-column-span: all; /* Chrome, Safari, Opera */
	column-span: all;
}

#playlist h3 {
	margin: 1em 0 0 0;
	font-weight: 100; font-size: 14pt; text-transform: uppercase; text-align: left;
	border-bottom: 1px solid #555;
}

#playlist li {
	margin: 0.25em;
	cursor: pointer;
}

#playlist li:hover {
	/*background: #444;*/
}

#playlist li a {
	padding: 0.25em;
	width: 100%;
	color: #ddd;
	text-decoration: none;
}

#playlist li a:hover {
	background: #444;
}




@media only screen and (min-width : 1300px) {
	#playlist {
		column-count: 2; -webkit-column-count: 2; -moz-column-count: 2;
	}
}

@media only screen and (max-width : 750px) {
	#video, video {
		width: 100%;
	}

	#video {
		margin: 1em 0;
	}

	#videosearch {
		margin: 1em auto 0 auto;
		height: 34px;
		max-width: 600px;
	}

	#playlist {
		width: 100%;
		column-count: 2; -webkit-column-count: 2; -moz-column-count: 2;
	}
}

@media only screen and (max-width : 480px) {
	#playlist {
		/*width: 100%;*/
		column-count: 1; -webkit-column-count: 1; -moz-column-count: 1;
	}

	/*#videosearch input[type=text] {
		width: 100%;
	}
	#videosearch input[type=submit] {
		margin: 0.5em 0;
		padding: 0.2em 4em;
		height: auto;
		width: auto;

	}*/
}