@font-face {
  font-family: 'fontello';
  src: url('../font/fontello.eot?19049387');
  src: url('../font/fontello.eot?19049387#iefix') format('embedded-opentype'),
       url('../font/fontello.woff?19049387') format('woff'),
       url('../font/fontello.ttf?19049387') format('truetype'),
       url('../font/fontello.svg?19049387#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

body,article,section,p {
	padding: 0;
	margin: 0;
	border: 0;
	font-weight: normal;
	font-size: inherit;
}

html, body {
	height: 100%;
}

body {
	font-family:'Varela Round', 'helvetica neue', arial, sans-serif;
	font-size:12px;
	line-height:1;
	background-color:#eee;
	color:#000;
}

p {
	margin-bottom:1em;
}

#wrapper {
	position:relative;
	width:960px;
	height:100%;
	margin:0 auto;
	padding:0;
	background-color:#fff;
}

.transcript-video {
	position:relative; /* The GUI needs a relative or absolute reference */
	width:480px;
	height:270px;
	margin-left: auto;
	margin-right: auto;
}


/* Following rule only required when native controls being used.
 * The Player CSS deals with this when its GUI is inserted.
 */
/*
.transcript-video video{
	width:100%;
	height:100%;
}
*/
.transcript {
	position: absolute;
	top: 300px;
	bottom: 0;
	left: 0;
	padding: 2em 20px;
	line-height: 1.8em;
	font-size: 1.2em;
	width: 920px;
	overflow: auto;
	color: #000;
	border-right: 2px solid #ccc;

	border-top: 1px solid #eee;

	font-family:'Varela Round', 'helvetica neue', arial, sans-serif;
	font-size:1.3em;
	line-height:1.7em;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.transcript-grey {
	color:#666;
}

.transcript a {
	display: inline-block;
	position: relative;
	z-index: 1;
	cursor:pointer;

	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word;
}

.transcript a:hover {
	background: #ffc;
	color: #a00;
}

.transcript .selected {
	background: #C0E7A1 !important;
	color: #111 !important;
}

.transcript a.last {
	z-index: 2;
}

.transcript a.first,
.transcript a.last {
	cursor: move;
}

.transcript a.first:before {
	font-family: 'fontello';
	content: 'R';
	color: #111;
	font-size: 1.1em;
	text-align: center;
	line-height: 24px;
	position: absolute;
	width: 28px;
	height: 24px;
	background: #C0E7A1;
	left: -2px;
	top: -26px;
	border-width: 2px 2px 0 2px;
	border-color: #cee #fff #fff #fff;
	border-style: solid;
	text-shadow: 0 1px 0 #fff;
}

.transcript a.last:after {
	font-family: 'fontello';
	content: 'R';
	color: #111;
	font-size: 1.1em;
	text-align: center;
	line-height: 24px;
	position: absolute;
	width: 28px;
	height: 24px;
	background: #C0E7A1;
	right: -2px;
	bottom: -26px;
	border-width: 0 2px 2px 2px;
	border-color: #cee #fff #fff #fff;
	border-style: solid;
	text-shadow: 0 1px 0 #fff;
}