@font-face {
  font-family: 'Asap'; font-style: italic; font-weight: 400;
  src: url(Fonts/Asap-Italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Asap'; font-style: italic; font-weight: 700;
  src: url(Fonts/Asap-Italic.woff2) format('woff2');
}
@font-face {
  font-family: 'Asap'; font-style: normal; font-weight: 400;
  src: url(Fonts/Asap.woff2) format('woff2');
}
@font-face {
  font-family: 'Asap'; font-style: normal; font-weight: 700;
  src: url(Fonts/Asap.woff2) format('woff2');
}


* { margin:0; padding:0; }


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* generic */

body {
    background: #ffffff;
    font: normal 13px "Asap", "PT Sans", "Helvetica", "Arial", sans-serif;
	font-weight: normal;
	color: #666;
    width: 100%;
  	text-align: left;
    line-height: 1.25;
}

.content {
    position:relative;
    width: 1044px;
    margin-left:auto;
    margin-right:auto;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ 
/* header */

#header {
    position:relative;
    width: 100%;
    height:245px;
    background-color:#666;
    background-image:url("im/HeaderBackground.jpg");
    background-position:center top;
}

.headerTopBar {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:6px;
    background-color:#222;
}

h1 {
    position:absolute;
    left:0px;
    top:39px;
    width: 560px;
    font: bold 48px "Asap", "Helvetica", "Arial", sans-serif;
    color: #000;
    text-align:right;
    line-height:1.0;
    text-shadow: rgba(255,255,255,0.15) 0px 1px 0px;
}

h4 {
    position:absolute;
    left:0px;
    top:159px;
    width: 560px;
    font: normal 18px "Asap", "Helvetica", "Arial", sans-serif;
    color: rgba(0,0,0,0.7);
    text-align:right;
    text-shadow: rgba(255,255,255,0.1) 0px 1px 0px;
}

h5 {
    position:absolute;
    left:0px;
    top:183px;
    width: 560px;
    font: normal 11px "Asap", "Helvetica", "Arial", sans-serif;
    color: rgba(0,0,0,0.4);
    text-align:right;
}

.selflink {
	color: inherit;
	text-decoration: none;
}

.selflink:hover {
    text-decoration:underline;
    color: #000;
}

.playButton {
    position:absolute;
    left:615px;
    top:160px;
    width:196px;
    height:41px;
    background-image:url("im/HeaderPlayButton.png");
    cursor:pointer;
    text-decoration:none;
}

.playButton:hover {
    text-decoration:none;
    background-image:url("im/HeaderPlayButtonDown.png");
}

#player {
    position:absolute;
    left:0px;
    top:-1000px;
    z-index:2;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ 
/* chapter */

.chapter {
    padding-bottom:50px;
}

.chapter.interlude {
    background-color:#374142;
    background-image:url("im/InterludeBackground.jpg");
    background-position:center top;
    padding-top:28px;
    padding-bottom:34px;
}

.chapter.afterInterlude {
    padding-top:46px;
}

h2 {
    font: bold 24px "Asap", "Helvetica", "Arial", sans-serif;
    color: #000;
    text-align:center;
    margin-bottom:24px;
}

h2 .prefix {
    font-weight:normal;
}

h2 .duration {
    font: normal 16px "Asap", "Helvetica", "Arial", sans-serif;
    color: #bbb;
}

.interlude h2 {
    color: #fff;
}

.interlude h2 .duration {
    color: rgba(255,255,255,0.3);
}

.stage {
    position:absolute;
    left:0px;
    top:0px;
    width:560px;
    height:315px;
    background-color:#000;
    background-size:100% 100%;
    cursor:pointer;
}

.stageOverlay {
    position:absolute;
    left:-3px;
    top:-1px;
    width:566px;
    height:321px;
    background-image: url('im/StageOverlay.png');
    pointer-events:none;
}

.stageOverlayHighlight {
    background-image: url('im/StageOverlayHighlight.png');
}

.stageOverlayDown {
    background-image: url('im/StageOverlayDown.png');
}

.separator {
    position:absolute;
    left:576px;
    top:0px;
    width:1px;
    height:315px;
    background-color:#ddd;
}

.interlude .separator {
    background-color:rgba(255,255,255,0.15);
}

.sections {
    position:absolute;
    left:592px;
    top:0px;
    width:452px;
}

.section {
    position:relative;
    width:452px;
    min-height:64px;
    cursor:pointer;
}

.section .highlight {
    position:absolute;
    top:-4px;
    left:-16px;
    width:472px;
    height:64px;
    background:#f4f4f4;
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    border-left: solid 1px #ddd;
    display:none;
}

.section .highlightDown {
    background:#e8e8e8;
}

.interlude .section .highlight {
    background:rgba(0,0,0,0.12);
    border-top: solid 1px rgba(0,0,0,0.2);
    border-bottom: solid 1px rgba(0,0,0,0.2);
    border-left: solid 1px #626262;
}

.interlude .section .highlightDown {
    background:rgba(0,0,0,0.20);
}

.section .icon {
    position:absolute;
    left:0px;
    top:0px;
    width:87px;
    height:58px;
    background-color:#000;
    background-size:100% 100%;
}

.section .iconOverlay {
    position:absolute;
    left:-1px;
    top:0px;
    width:89px;
    height:60px;
    background-image: url('im/ThumbnailOverlay.png');
}

.section .iconHighlight {
    background-image: url('im/ThumbnailOverlayHighlight.png');
}

.section .caption {
    position:relative;
    margin-left:97px;
    color:#666;
    z-index:1;
}

.interlude .section .caption {
    color:rgba(255,255,255,0.65);
}

.interlude .section .caption b {
    color:#fff;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ 
/* footer */

#footer {
    position:relative;
    width: 100%;
    background-color:#181818;
    padding-top:16px;
    padding-bottom:8px;
    color: #484848;
    font: normal 12px "Asap", "PT Sans", "Helvetica", "Arial", sans-serif;
    line-height:1.4;
}

.footerTopShadow {
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:7px;
    background-image:url("im/FooterTopShadow.png");
}

#footer .left {
}

#footer .right {
}

#footer p {
    margin-left:592px;
}

#footer a {
    color: #484848;
}

#footer a:hover {
    color: #aaa;
}



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ 
/* content */

.listheader {
    font-weight: bold;
    color: #111;
    font-size: 14px;
    margin-top:10px;
}

p {
    margin-top:12px;
    margin-bottom:12px;
}

strong {
    font-weight:bold;
	color: #f00;
}

b {
    font-weight:bold;
	color: #000;
}

i {
    color: #aaa;
}

a { text-decoration:underline; color: #333; border:none; }
a:hover   { text-decoration:underline; color: #000; }

i a { text-decoration:underline; color: #bbb; border:none; }

.center {
	width:100%;
	text-align: center;
}

.bordered {
    border: 1px solid #bbb;
}

.shadowed {
    -moz-box-shadow: 0 1px 3px #656565;
    -webkit-box-shadow: 0 1px 3px #656565;
    box-shadow: 0 1px 3px #656565;
    border: 1px solid #999;
}

.spaced {
	margin-top:20px;
	margin-bottom:20px;
}