:root {--travel: 0px;}

@font-face {font-family: 'CBSans';
	src: url('CBSans-News.woff') format('woff'), url('CBSans-News.ttf') format('truetype');
	font-style: normal; font-weight: normal; text-rendering: optimizeLegibility;}
@font-face {font-family: 'CBSans';
	src: url('CBSans-ExtraBold.woff') format('woff'), url('CBSans-ExtraBold.ttf') format('truetype');
	font-style: normal; font-weight: bold; text-rendering: optimizeLegibility;}
@font-face {font-family: 'Crimson';
	src: url('CrimsonText-Bold.ttf') format('truetype');
	font-style: normal; font-weight: bold; text-rendering: optimizeLegibility;}
@font-face {font-family: 'Crimson';
	src: url('CrimsonText-Regular.ttf') format('truetype');
	font-style: normal; font-weight: normal; text-rendering: optimizeLegibility;}

* {margin: 0; padding: 0; outline: 0;}
body {background: white; font: 16px CBSans, Verdana, Sans-Serif; color: #555; letter-spacing: -0.3px; line-height: 1.4; hyphens: manual;}
.hyphenate {hyphens: auto}
hr {border: 30px solid #F0F0F0;}
a:link, a:visited {background: inherit; text-decoration: none; color: #2e5c95;}
a:hover {background: inherit; color: #996800;}
h1, h2, h3, h4 {font-family: CBSans, Sans-serif; font-weight: Bold; padding: 5px 12px;}
h1 {font-size: 130%;}
h2 {font-size: 120%; text-transform: uppercase;}
h3 {font-size: 120%; color: #2e5c95;}
p, table {margin: 0; padding: 10px 12px;}
ul, ol {margin: 10px 20px; padding: 0 20px;}
img.float-right {margin: 5px 10px 5px 10px;}
img.float-left {margin: 5px 10px 5px 0;}
.icon {border: 0; height: 24px; width: 24px; padding: 0; margin: 0 0 -6px 0; display:inline-block; background-size: 90% 90%; background-repeat: no-repeat; background-position: center;}
acronym {cursor: help; border-bottom: 1px solid #777;}
.container {width: 780px; position: relative; margin: 0 auto 0; border: 0 solid green; /*testing*/}
#panel {border-radius: 20px; box-shadow: 0 0 10px 5px lightgray; display: block; position: absolute; width: 100%; height: auto; top: 10px; color: black; border: 0 solid purple; /*testing*/}
#content-wrap {float: left; margin: 0 auto; text-align: left; width: 100%; border: 0 solid red; /*testing*/}
#header {position: relative; width: 780px; height: 100px; background: #F0F0F0; margin: 0; font-size: 14px; color: white; border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 -5px 8px 4px rgba(0,0,0,0.03) inset;}
#header h1#name {position: absolute; margin: 0; padding: 0; font: bold 40px 'Trebuchet MS', Arial, Sans-serif; letter-spacing: -2px; color: black; text-transform: none; top: 20px; left: 50px;}
#header h2#job {position: absolute; z-index: 999; margin: 0; padding: 0; font: bold 20px 'Trebuchet MS', Arial, Sans-serif; text-transform: none; color: black; top: 60px; left: 60px;}
#menu {clear: both; width: 780px; height: 30px; background: #9d9d9d; margin: 0; font: bolder 16px/30px CBSans, Sans-Serif; font-weight: Bold;}
#menu ul {margin: 0; padding: 0 0 0 10px;}
#menu ul li {float: left; list-style: none;}
#menu ul li a {display: block; text-decoration: none; padding: 0 10px; background: inherit; color: white;}
#menu ul li:hover {background: #376fb4; color: white; cursor:pointer;}
#menu ul li#current {background: #2e5c95; color: white;}
#footer {clear: both; color: #66737B; font: normal 90% CBSans, Sans-Serif; background: #F0F0F0; width: 780px; height: 40px; float: top; text-align: center; padding: 0 0 3px 0; margin-left:auto; margin-right:auto; margin-bottom: 0; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; box-shadow: 0 -5px 8px 4px rgba(0,0,0,0.03) inset;}
.float-left  {float: left;}
.float-right {float: right;}
.align-left  {text-align: left;}
.align-right {text-align: right;}
.clear {clear: both;}
.gray {color: #CCC;}
.blue {color: #2e5c95;}
.message {margin: 10px; padding: 10px; border: 1px solid #FFC407; color: black; background: #FFFBBA; text-align: left;}
.warning {padding: 10px; border: 1px solid #FF6347; color: black; background: #FFE4E1; text-align: left;}

/* Audioplayer */
.audioplayer {padding: 20px 20px 20px 20px;}  /* ends with 42px for left padding of single player */
.audiotimeline {width: auto; height: 6px; border-radius: 3px; background: #CCCCCC;}
.audiobutton {width: 20px; height: 20px; border-radius: 50%; border: none; margin: -13px 0 0 -7px; background: #376fb4; background-size: 70% 70%; background-position: 4px 3px; background-repeat: no-repeat;}
.audiobutton.play {background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 2l17.32 10L4 22' fill='white' /%3E%3C/svg%3E");}
.audiobutton.pause {background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 3h6v18H2M12 3h6v18H12' fill='white' /%3E%3C/svg%3E");}
.sliding {animation: slideAudiobutton 1s linear 1 paused;}
@keyframes slideAudiobutton {from {transform: translateX(0);} to {transform: translateX(var(--travel));}}
.audiosubs {width: 100%; height: 10px; font-style: italic; text-align: center; padding-left: 12px;}
::cue {color: #ffc300; background-color: rgba(0, 0, 0, 0); text-shadow: 2px 2px 4px #000; font: 20px Geneva, Verdana, Sans-Serif;}
video {width: 100%; height: auto;}
#subsreq {color: #2e5c95;}
#subsreq:hover {cursor:pointer; color: #996800;}

/* Videoplayer */
.videoplayer {padding: 20px 20px 20px 20px;}  /* ends with 42px for left padding of single player */
.videotimeline {width: auto; height: 6px; border-radius: 3px; background: #CCCCCC;}
.videobutton {width: 20px; height: 20px; border-radius: 50%; border: none; margin-top: -13px; background: #376fb4; background-size: 120% 120%; background-repeat: no-repeat; background-position: -5px -2.5px; margin-left: -7px;}  /* -7px changes with design*/
.videobutton.play {background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M41 25L23 37V12l18 13' fill='%23fff' /%3E%3C/svg%3E");}
.videobutton.pause {background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 12h7v25h-7zm12 0h7v25h-7z' fill='%23fff' /%3E%3C/svg%3E");}
.videosubs {width: 100%; height: 10px; font-style: italic; text-align: center; padding-left: 12px;}