body {
	background-color: #f6f6f6;
	-webkit-font-smoothing: antialiased;
	min-width: 320px;
}

/**** LOADING ****/
#loading {
	position: absolute;
	top: 12px;
	left: 12px;
	right: 12px;
	height:40px;
	margin: 0 auto;
	overflow:hidden;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	-ms-border-radius:20px;
	-o-border-radius:20px;
	border-radius:20px;
}

#loading .progress{
	background-color:#c04d50;
	margin-top:0;
	margin-left:-100%;
	width:100%;
	height:100%;
}

/**** LAYOUT AND HEADER ****/
#fixed{
	position: fixed;
	overflow: hidden;
	top:0;
	left:0;
	right:0;
	margin:0 auto;
	background-color: rgba(246,246,246,0.95);
	z-index:255;
}

#header {
	padding: 0 12px;
	margin: 0 auto;
}

/*This extra layer is used so that #fixed can be the full width to accomodate a funny Safari issue with horizontal scrolling, even when there's no place to go*/
#headerInner {
	height: 97px;
	padding-top: 12px;
	overflow: hidden;
	position: relative;
	line-height: 1;
	color: #a8a8a8;
	border-bottom: 1px solid #a8a8a8;
}

#container {
	position:relative;
	margin: 0 auto;
	margin-top:97px; /* Matches header height*/
	padding: 12px 12px;
}

#avatar {
	height: 100%;
	float: left;
	margin-right: 12px;
	height: 72px;
	width: 72px;
}

#headerContent {
	margin-left: 84px;
	height: 100%;
	position:relative;
}

#headerContent > * {
	margin:0;
	padding:0;
}

#header h1 {
	font-weight: 500;
	color: #4f4f4f;
	font-size: 24px;
}

#header h2 {
	color: #6c6c6c;
	margin-top:4px;
	font-size: 18px;
}

#links, #header .close {
	position: absolute;
	bottom: 0;
	padding-bottom:12px;
	color: #c04d50;
	font-size: 15px;
}

#links li {
	display: inline-block;
}

#links a {
	color: inherit;
	padding: 0px;
	-webkit-transition: 250ms;
  	-moz-transition: 250ms;
  	-o-transition: 250ms;
	transition: 250ms;
}

#links a:hover {
	color: #9b373a;
	-webkit-transition: 250ms;
  	-moz-transition: 250ms;
  	-o-transition: 250ms;
	transition: 250ms;
}

#links li+li:before {
	content: '|';
	padding: 0 10px;
	color: #6c6c6c;
}

#header .close {
	font-weight:bold;
	right:0;
}
#header .close:after {
	content: '\002715';
}

/* Special header font sizing to make everything fit on narrow phone displays */
/* I'm not proud */
@media (max-width: 399px) {
	#header h1 {
		font-size: 24px;
	}

	#header h2 {
		font-size: 20px;
	}

	#links, #header .close {
		font-size: 12px;
	}
	
	#links li+li:before {
		padding: 0 4px;
	}
}

/**** LISTING ****/

#listing {
	margin: -12px -12px 0 0;
	padding: 0;
	overflow: hidden;
}

#listing>li {
	display:block;
	padding: 12px 12px 0 0;
	overflow: hidden;
	position:relative;
	float: left;
	color: white;
}

#listing>li>div {
	position:relative;
}

#listing>li>div:hover {
	cursor: pointer;
}

#listing>li .thumbnail {
	display: block;
	width: 100%;
}

#listing>li .title {
	width: 100%;
	font-size: 16px;
	padding: 4px 8px;
	position:absolute;
	opacity:1;
	bottom:0px;
	background-color:rgba(48, 48, 48, 0.7);
}

/* 2 Column Layout */
@media (min-width: 596px) {
	#listing>li {
		width: 50%;
	}
}

/* 3 Column Layout */
@media (min-width: 888px) {
	#listing>li {
		width: 33.333333333%;
	}
}

/* Maximum width */
@media (min-width: 984px) {
	#container, #header {
		width: 984px;
	}
}

/**** BIO ****/

#bioPage {
	font-size:14px;
}

#bioPic {
	float: right;
	width: 50%;
	max-width: 400px;
	margin: 0 0 12px 24px;
}

/**** VIDEO *****/
#videoPage {
	position:relative;
	width:100%;
}

#videoBox {
	position:relative;
	margin-bottom:12px;
	width: 100%;
}

#videoBox:after { /*Crazy fixed AR trick*/
	padding-top: 56.25%; /* 16:9 */
	display: block;
	content: '';
}
#videoBox > * {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
}

#videoBox .thumbnail, #videoBox .player {
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left:0;
}

#videoBox .player {
	z-index: 1;
}

#videoBox .thumbnail {
	z-index: 2;
}

#videoPage h1 {
	font-size: 30px;
	font-weight: 500;
	margin-bottom: 12px;
}

#videoPage .title {
	color: #c04d50;
}

#videoPage .year {
	color: #6c6c6c;
}

#videoPage .tags {
	margin-top:18px;
	margin-bottom:4px;
}

.tag {
	font-size: 18px;
	font-weight: 500;
	padding: 8px 16px;
	border-radius: 8px;
	margin-right:16px;
	margin-bottom:8px;
	background-color: #c04d50;
	color: #f6f6f6;
	display:inline-block;
	line-height: 1;
	white-space: nowrap;
}

.tag:last-child {
	margin-right:0;
}

#videoPage .summary, #videoPage .production {
	font-size: 16px;
}

#videoPage .drawer {
	position:relative;
	overflow:hidden;
}

#videoPage .colContainer {
	margin-top: 12px;
}

#videoPage .commentary {
	font-size: 24px;
	font-style:italic;
	font-weight: 200;
	line-height: 1.846;
}

#videoPage .credits {
	font-size: 14px;
	margin-top: 12px;
}

#videoPage .credits table {
	width: 100%;
}

#videoPage .credits table+table {
	margin-top: 12px;
}

#videoPage .credits td {
	width: 50%;
	overflow: hidden;
}

#videoPage .credits td:nth-child(1) {
	text-align: right;
	padding-right: 5px;
}

#videoPage .credits td:nth-child(2) {
	text-align: left;
	padding-left: 5px;
}

/* Two text columns in video pages */
/* The credits column on the right has fixed width */
@media (min-width: 745px) {
	/* Use display:table to make the columns instead of float 
	   so heights match and the vertical rule looks right */
	#videoPage .colContainer {
		overflow:hidden;
		display: table;
		table-layout: fixed;
  		width: 100%;
	}

	#videoPage .colContainer>* {
		display: table-cell;
		vertical-align:top;
	}
	
	#videoPage .commentary {
		padding-right: 24px;
		border-right: 1px solid #a8a8a8;
	}

	#videoPage .credits {
		padding-left: 24px;
		margin-top: 0px;
		width: 360px;
	}
}