/*------------------*
 * CORE PAGE STYLES *
 *------------------*/
body {
	background: #eee;
	color: #222;
	font: 1em 'Lucida Grande', Helvetica, Arial, Verdana, sans-serif;
	padding: 40px 0;
	text-align: center;
}
div#container {
	background: #fff;
	border: 2px solid #000;
	margin: auto;
	margin-bottom: 10px;
	text-align: center;
	width: 750px;
}
div#controls, div#details, div#comments, div#related, div#results {
	border-top: none;
	font-size: 1.25em;
	padding: 10px 12px;
	text-align: left;
}
div#details {
	line-height: 1.5em;
}
div#search {
	background: #222;
	border-bottom: 1px solid #000;
	color: #fff;
	font-size: 1.25em;
	margin: 0 0 20px;
	padding: 10px;
	text-align: center;
}
div#title {
	background: #222;
	border-bottom: 1px solid #000;
	color: #fff;
	font-size: 2em;
	font-weight: bold;
	padding: 20px 0 20px 25px;
	text-align: center;
}
#youtubeplayer {
	margin: 10px 30px 26px;
}

/*--------------------------*
 * HEADERS AND FAUX-HEADERS *
 *--------------------------*/
h1 {
	border: none;
	font-size: 1.75em;
	margin: 0 30px 10px;
	text-align: left;
}
h1 span {
	left: -9999px;
	position: absolute;
}
h2, a#showDetailsLink, a#showCommentsLink, a#showRelatedLink {
	background: #222;
	border: 2px solid #000;
	border-left: none;
	border-right: none;
	clear: both;
	color: #fff;
	font-weight: bold;
	font-size: 1.5em;
	margin: 0;
	padding: 8px 10px 9px;
	text-align: left;
}

/*--------*
 * FOOTER *
 *--------*/
div#footer {
	background: #222;
	border-top: 2px solid #000;
	clear: both;
	color: #fff;
	padding: 8px 10px 9px;
}
div#footer a {
	background: #222;
	color: #fff;
}
div#about {
	padding: 5px 20px 5px;
	text-align: justify;
}
div#about p {
	margin-bottom: 15px;
}

/*--------*
 * INPUTS *
 *--------*/
div#controls input, div#search input {
	background: #222;
	border: 2px solid #000;
	color: #fff;
	font-weight: bold;
	font-size: 1em;
	margin-right: 6px;
	overflow: visible;
	padding: 6px 8px 7px;
	width: auto;
}

/*-------------*
 * SEARCH FORM *
 *-------------*/
div#search input#searchTerm {
	background: #fff;
	color: #222;
	margin-left: 6px;
	padding: 7px 9px 8px;
}
div#search input#searchButton {
	background: #eee;
	color: #222;
}

/*----------------*
 * VIDEO CONTROLS *
 *----------------*/
div#controls {
	text-align: center;
}
div#controls input {
	font-size: 1.25em;
}
div#controls input#skipBackButton {
	background: #00f url('../images/skipBack.png') 8px center no-repeat;
	color: #fff;
	padding-left: 51px;
}
div#controls input#skipForwardButton {
	background: #00f url('../images/skipForward.png') 8px center no-repeat;
	color: #fff;
	padding-left: 51px;
}
div#controls input#muteButton {
	background: #222;
}
div#controls input#playPauseButton.playButton {
	background: #008000 url('../images/play.png') 8px center no-repeat;
	color: #fff;
	padding-left: 33px;
}
div#controls input#playPauseButton.pauseButton {
	background: #ff0000 url('../images/pause.png') 8px center no-repeat;
	color: #fff;
	padding-left: 34px;
}

/*---------------------------------------------*
 * COMMENTS, SEARCH RESULTS AND RELATED VIDEOS *
 *---------------------------------------------*/
dl#commentsList, ul#relatedList, ul#resultsList {
	margin-top: 10px;
}
dl#commentsList dt {
	font-weight: bold;
}
dl#commentsList dd {
	margin-bottom: 15px;
}
a#topHideDetailsLink, a#topHideCommentsLink, a#topHideRelatedLink {
	float: right;
}
p#commentsDisplay, p#relatedDisplay {
	font-style: italic;
}
a.video {
	border: 2px solid #000;
	background: #222;
	background-repeat: no-repeat;
	color: #fff;
	display: block;
	height: 57px;
	margin-bottom: 10px;
	padding: 33px 0 0 150px;
	text-decoration: none;
}
a.video:hover {
	background-color: #fff;
	color: #000;
	font-weight: bold;
}

/*------------------*
 * PAGINATION LINKS *
 *------------------*/
a#commentsNextLink, a#relatedNextLink, a#resultsNextLink {
	float: right;
	margin-bottom: 10px;
}
a#commentsPreviousLink, a#relatedPreviousLink, a#resultsPreviousLink {
	display: none;
}

/*----------*
 * OFF-LEFT *
 *----------*/
.hidden {
	left: -9999px;
	position: absolute;
}