#header {
		width: 100%;
		height: 48px;
		background-color: rgb(51, 48, 48);
		position: absolute;
}
#header .central {
		width: 1024px;
		margin: 0 auto;
		position: relative;
}
#header .central h1 {
		color: white;
		font-family: "Gill Sans", sans-serif;
		margin: 3px;
		right: 0;
		top: 0;
		position: absolute;
		font-weight: normal;
}

#logo {
		background-image: url('/resources/img/nyphil-archive-levy-lockup.png');
		height: 150px;
		width: 400px;
		background-size: 400px 150px;
		background-repeat: no-repeat;
		display: inline-block;
}

.wrapper img{
	position: relative;
	max-width: calc(100% + 80px);
	height: auto;
	top: auto;
	left: auto;
	right: auto;
	margin: 0 -40px;
	visibility: visible;
}

html {
		margin: 0;
		
}
#timeline {
		position: fixed;
		bottom: 2px;
		z-index: 5;
		padding-top; 5px;
		background: linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,1));
}
.mainPane {
		width: 1024px;
		margin: 0 auto;
		position: relative;
		height: calc(100vh - 40px - ( 100vw * 222.5 / 1314.9455 ) );
		margin-top: -30px;
}
.mainPane .audio {
	position: absolute;
	margin-top: 120px;
	margin-left: -20px;
	width: 410px;
	height: calc(100% - 250px);
}
.mainPane .audio .performance {
	margin: 10px 0;
	padding: 10px;
	background-color: #d2252f;
	border-bottom: 5px solid #d2252f;
	color: white;
}

.mainPane .audio .performance.current {
	border-bottom: 5px solid #643179;
}
g.conductor {
	stroke-width: 2;
}
.performance circle {
	fill: #f14139;
}
.performance line, .performance path {
	stroke: #f14139
}
g.performance.conductor line, g.performance.conductor path, g.performance.currentperformance line, g.performance.currentperformance path, .currentperformance line, g.subperformance.currentperformance path{
	stroke: #643179;
	stroke-width: 2;
}
g.performance.conductor circle, g.performance.currentperformance circle, g.subperformance.currentperformance circle {
	fill: #643179;
	stroke: #643179;
}
g.performance text {
	fill: #f14139;
	font-family: "Gill Sans", sans-serif;
	font-size: 16px;
}
g.performance.conductor rect, g.currentperformance rect {
	fill: #643179;
	cursor: pointer;
}
g.performance.conductor text, g.currentperformance text {
	fill: #FFF;
	cursor: pointer;
}
.media-info {
	vertical-align: top;
}
#podcast .media-info, .mainPane .audio .performance .media, .mainPane .audio .performance .media-info {
	display: inline-block;
}
#podcast .media {
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%
}
#podcast .media input {
	width: 60%;
	margin-bottom: 10px;
}
.wrapper {
		position: absolute;
		width: 100%;
		top: 85px;
}
#podcast {
		position: absolute;
		width: 50%;
		right: 0;
		font-family: georgia, serif;
		height: 100%;
}
#podcast .TEIContainer {
	/* height: calc(100vh - 120px - ( 100vw * 222.5 / 1314.9455 ) ); */
	height: calc(100% - 120px);
	position: relative;
	overflow-y: auto;
	width: 100%;
	padding: 5px 30px;
	font-size: 105%
}
#podcast .TEIContainer.shorter {
	/* height: calc(100vh - 120px - ( 100vw * 222.5 / 1314.9455 ) ); */
	height: calc(100% - 290px);
}

#podcast .episode {
	font-size: 145%;
	width: 100%;
	padding: 15px 30px;
	font-family: "Gill Sans", sans-serif;
	background-color:#d2252f;
	color:white;
}
#podcast tei-teiheader {
	display: none;
}
/* #podcast .TEIContainer tei-sp:last-child { */
/* 	margin-bottom: 300px; */
/* } */
#podcast audio {
		position: fixed;
		right: 5px;
		top: 75px;
}
#defTargetPopup{
		position: fixed;
		top: 15px;
		left: 15px;
		width: 150px;
		text-style: italic;
		font-size: 97%;
		padding: 20px;
		border-radius: 8px;
		/* border: 4px solid rgba(255,223,223,0.2); */
		border: 4px solid rgba(210,37,47,0.7);
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 20;
		color: white;
}
tei-term:hover, tei-persName[ref]:hover {
		color: #d2252f;
}		
tei-persName[ref], .TEIContainer *[ref] {
	/* text-decoration: underline wavy; */
	font-weight: bold;
	color: #643179;
	cursor: pointer;
}
.TEIContainer *[ref]:hover{
	text-decoration: underline wavy;
}
tei-desc {
	display: none;
}
tei-incident{
	border-bottom: 3px dashed #643179;
	width: 100%;
	display: block;
}
div.scoreButton.active {
	width: 30px;
	height:30px;
	background: no-repeat center/contain url("/style/GClef.svg");
	border: 2px solid rgba(210,37,47,0.7);
	border-radius: 30px;
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 40;
}
div.scoreButton.passive {
	width: 30px;
	height:30px;
	background: no-repeat center/contain url("/style/GClef.svg");
	border: 2px solid rgba(210,37,47,0.3);
	border-radius: 30px;
	position: absolute;
	background-color: #F6F6F6;
	right: 10px;
	bottom: 10px;
	z-index: 40;
}
div.scoreButton:hover {
	background-color: rgba(210,37,47,0.3); 
}