body {
    background: url("../imgs/bg-1.png") repeat-x top #ffffff;
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 10pt;
    text-align: center;
    margin: 0;
    padding: 0;
}

img {
    border: 0;
}

a {
    color: #0070b3;
}

a.graylink {
    color: #bbbbbb;
}

h1 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: white;
}

.linenum {
    font-size: 8px;
}

.shortline {
    font-size: 12px;
}

.sline {
    background-color: #ffffcc;
    padding-top: 2px;
    padding-bottom: 2px;
}

.nline {
    background-color: #ffffff;
    padding-top: 2px;
    padding-bottom: 2px;
}

.hline {
    background-color: #ffffcc;
    padding-top: 2px;
    padding-bottom: 2px;
}

.close_link {
    float: right;
    color: white;
    text-decoration: none;
}

#footer div {
    color: #f5f5f5;
}

#footer-metadata {
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
    float: left;
}

#footer-copyright {
    text-align: right;
    padding-right: 10px;
    padding-top: 10px;
}

#headerimg {
    float: left;
    width: 77px;
    padding-left: 30px;
}

p {
    margin-left: 50px;
    margin-right: 50px;
    margin-top: 10px;
}

#footer-logo {
    text-align: right;
    padding-top: 30px;
}

#footer h3 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: normal;
    color: #b5b5b5;
}

#footer address {
    font-style: normal;
}

#footer address span {
    display: block;
}

#footer a {
    color: #f5f5f5;
}

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

#footer small {
    clear: right;
    float: right;
    font: bold 10px/12px Arial, Helvetica, Sans-serif;
    color: #f5f5f5;
    text-align: right;
}

#footer small span {
    display: block;
}

#line_0 {
    margin-top: 0px;
    margin-left: 50px;
    margin-right: 50px;
}

#transcript-panel p.first-p, #transcript-panel-alt p.first-p {
    margin-top: 0px;
    margin-left: 50px;
    margin-right: 50px;
}

#transcript-panel p.line-p, #transcript-panel-alt p.line-p {
    margin-left: 50px;
    margin-right: 50px;
}

#transcript-panel .speaker, #transcript-panel-alt .speaker {
    font-weight: bold;
    display: inline;
}

#transcript-panel a, #transcript-panel-alt a {
    color: #000000;
}

.footnoteLink {
    color: #0000ff !important;
}

#index-panel .speaker, #index-panel-alt .speaker {
    font-weight: bold;
    display: inline;
}

#index-panel a, #index-panel-alt a {
    color: #000000;
}

#index-panel .jumpLink, #index-panel-alt .jumpLink {
    position: absolute;
    left: 50px;
    font-size: 10px;
    color: #0000ff;
    text-decoration: none;
}

#index-panel p.first-p, #index-panel-alt p.first-p {
    margin-top: 0px;
}

#searchbox-panel .speaker {
    font-weight: bold;
    display: block;
}

#searchbox-panel p {
    padding-left: 2em;
}

#searchbox-panel.youtube {
    margin-top: -226px;
}

.highlight {
    color: #ff0000;
    font-weight: bold;
}

#audio-panel a {
    font-size: 9pt;
}

#subjectPlayer {
    display: block;
    height: 30px;
    width: 500px;
    background-color: #3c3c3c;
}

.video-spacer {
    width: 1px;
    height: 250px;
    float: right;
}

.video-spacer-kaltura {
    width: 1px;
    height: 0px;
    float: right;
}

.round-button {
    margin-top: 7px;
    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
    -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background-color: linear;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(left bottom, left top), color-stop(color-stop(1, #dfdfdf) color-stop(0.05, #ededed)));
    background-image: -webkit-linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    background-image: -moz-linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    background-image: -ms-linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    background-image: -o-linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    background-image: linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color: #ededed;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border: 1px solid #dcdcdc;
    display: inline-block;
    color: #777777;
    font-family: arial;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 1px 1px 0px #ffffff;
}

.round-button:hover {
    background-color: linear;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(left bottom, left top), color-stop(color-stop(1, #ededed) color-stop(0.05, #dfdfdf)));
    background-image: -webkit-linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    background-image: -moz-linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    background-image: -ms-linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    background-image: -o-linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    background-image: linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color: #dfdfdf;
}

.round-button .round-button:active {
    position: relative;
    top: 1px;
}

.search-button {
    margin-top: 7px;
    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
    -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background-color: linear;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(left bottom, left top), color-stop(color-stop(1, #dfdfdf) color-stop(0.05, #ededed)));
    background-image: -webkit-linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    background-image: -moz-linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    background-image: -ms-linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    background-image: -o-linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    background-image: linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color: #ededed;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border: 1px solid #dcdcdc;
    display: inline-block;
    color: #777777;
    font-family: arial;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 1px 1px 0px #ffffff;
}

.search-button:hover {
    background-color: linear;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(left bottom, left top), color-stop(color-stop(1, #ededed) color-stop(0.05, #dfdfdf)));
    background-image: -webkit-linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    background-image: -moz-linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    background-image: -ms-linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    background-image: -o-linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    background-image: linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color: #dfdfdf;
}

.search-button .search-button:active {
    position: relative;
    top: 1px;
}

.searchclear-button {
    margin-top: 7px;
    -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
    -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
    box-shadow: inset 0px 1px 0px 0px #ffffff;
    background-color: linear;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(left bottom, left top), color-stop(color-stop(1, #dfdfdf) color-stop(0.05, #ededed)));
    background-image: -webkit-linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    background-image: -moz-linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    background-image: -ms-linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    background-image: -o-linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    background-image: linear-gradient(top, left top left bottom, color-stop(0.05, #ededed) color-stop(1, #dfdfdf));
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color: #ededed;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    border: 1px solid #dcdcdc;
    display: none;
    color: #777777;
    font-family: arial;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 1px 1px 0px #ffffff;
}

.searchclear-button:hover {
    background-color: linear;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(left bottom, left top), color-stop(color-stop(1, #ededed) color-stop(0.05, #dfdfdf)));
    background-image: -webkit-linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    background-image: -moz-linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    background-image: -ms-linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    background-image: -o-linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    background-image: linear-gradient(top, left top left bottom, color-stop(0.05, #dfdfdf) color-stop(1, #ededed));
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color: #dfdfdf;
}

.searchclear-button .searchclear-button:active {
    position: relative;
    top: 1px;
}

#search-results ol {
    text-align: left;
}

#search-results ul {
    list-style-type: none;
}

.search-result {
    text-decoration: none;
    color: black;
    background-color: #ffffff;
    padding-top: 2px;
    padding-bottom: 2px;
}

.search-result:hover,
.search-result:active {
    background-color: #ffffcc;
    padding-top: 2px;
    padding-bottom: 2px;
}

.selected-result {
    background-color: #ffffcc;
    padding-top: 2px;
    padding-bottom: 2px;
}

legend {
    font: 80%/1 sans-serif;
}

.error-msg {
    background-color: #ffffcc;
    padding-top: 2px;
    padding-bottom: 2px;
    color: #ff0000;
    font-weight: bold;
    font-size: 14px;
}

#search-transcript {
    text-decoration: none;
    font-weight: bold;
    margin-right: 10px;
}

#search-index {
    margin-left: 10px;
}

.kw-empty {
    color: lightgrey;
}

.kw-entry {
    color: black;
}
div.point {
    line-height: 1.5em;
}

#lnkShowMeta {
    color: #aaaaaa !important;
    font-weight: normal;
}

.ui-widget {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10pt !important;
}

.ui-accordion-content {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

#rightsStatement {
    display: none;
}

#usageStatement {
    display: none;
}

.indexJumpLink {
    float: left;
}

.indexSegmentLink {
    float: right;
}

.segmentLink {
    border: #000000 1px solid;
    padding: 5px;
    display: none;
}

.segmentLink input {
    width: 99%;
}

/***************************
****************************
These are the styles that
control the viewer's
Responsive Web Design
****************************
***************************/



.centered {
  margin: auto;
  width: 602px;
}

#youtubePlayer {
}

#kaltura_player_embed {
  width: 500px;
  height: 279px;
  overflow: hidden;
  margin-left:auto;
  margin-right:auto;
  }

#header {
  width: 82%;
  height: 200px;
  margin: 0 auto;
  border-bottom: 5px solid #337ab7;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  background: #3c3c3c;
  padding-top: 10px;
}
#headervid {
  width: 82%;
  height: auto;
  min-height: 215px;
  margin: 0 auto;
  border-bottom: 5px solid #337ab7;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  background: #3c3c3c;
  padding-top: 10px;
  display: inline-block;
  padding-bottom: 12px;
}

#audio-panel {
  width: 100%;
  height: 100%;
  /*padding-top: 10px;*/
  padding-bottom: 10px;
  text-align: center;
  margin: 0px;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 15px;
  background-color: #3c3c3c;
}

#holder-panel {
  width: 325px;
  height: 550px;
  position: relative;
  float: left;
  overflow: auto;
  outline: 0;
  margin: auto;
  padding-left: 80px;
  padding-right: 20px;
  background: #ffffff;
  text-align: left;
}


.center {
    width: 100% !important;
}




#footer {
  width: 82%;
  height: auto;
  margin: 0 auto;
  background: #3c3c3c;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  border-top: 5px solid #337ab7;
}

h2 {
  font-size: 12px;
  padding: 0 0 8px;
  text-align: center;
  color: #f5f5f5;
  font-weight: normal;
  border-bottom: 0px solid #3c3c3c;
}

#main {
  width: 82%;
  height: 550px;
  margin: auto;
  border: 1px solid #c2c2c2;
  border-width: 0 1px;
  background: #ffffff;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

#main-panels {
  margin: 0px;
  width: 100%;
}

#content-panel {
  float: left;
  width: 60%;
  margin-right: 7%;
}

#secondaryMetaData {
}

#transcript-panel, #transcript-panel-alt {
  width: 50%;
  height: 548px;
  border: 1px solid #dcdcdc;
  position: absolute;
  float: left;
  overflow: auto;
  outline: 0;
  margin-left: 20px;
  background: #ffffff;
  text-align: left;
}

#index-panel, #index-panel-alt {
  display: none;
  width: 45%;
  height: 548px;
  margin-top: 10px;
  border: 1px solid #dcdcdc;
  position: absolute;
  float: left;
  overflow: auto;
  outline: 0;
  margin: auto;
  padding-left: 5%;
  padding-right: 2%;
  background: #ffffff;
  text-align: left;
}

#searchbox-panel {
  width: 100%;
  height: 550px;
  float: left;
  background: #ffffff;
  max-width:28%;
}

#search-results {
  overflow-y: auto;
    height: 65%;
  width: 100%;
}

#search-toggle, #language-toggle {
  margin-top: 5px;
  margin-bottom: 10px;
  width: 100%;
}

fieldset {
  position: relative;
  display: table-cell;
  margin: 0 auto;
}

input {
    max-width: 180px;
    width: 80%;
}

#transcript-panel .jumpLink, #transcript-panel-alt .jumpLink {
  position: absolute;
  left: 1px;
  font-size: 10px;
  color: #0000ff;
  text-decoration: none;
  font-weight: bold;
}

@media only screen and (min-width: 769px) and (max-width: 1000px) {
    #content-panel {
        width: 55%;
    }
    #index-panel {
        width: 50%;
    }
    #search-toggle {
        width: 100%;
    }
    #searchbox-panel {
        margin-left: 8%;
    }
}

@media only screen and (max-width: 768px) {
    #header {
        padding: 0 1% 0 1%;
        width: 95%;
    }
    #footer {
        padding: 0 1% 0 1%;
        width: 95%;
    }
    #main {
        padding: 0 1% 0 1%;
        width: 95%;
        height: 820px !important;
    }
    #content-panel {
        width: 95%;
        margin-right: 1%;
        float: none;
        top: 500px;
        height: 1px;
    }
    #index-panel {
        padding-left: 1%;
        padding-right: 1%;
        width: 90%;
        top:465px;
        height: 575px !important;
    }
    #transcript-panel {
        padding-left: 5%;
        padding-right: 1%;
        top: 230px;
        width: 95%;
        float: none;
    }
    #searchbox-panel {
        width: 90%;
        margin-left: 2%;
        height: 250px !important;
        float: left;
    }
    #search-results {
        height: 100px;
        border: 1px solid #dcdcdc;
    }
    h1 {
        font-size: 20px;
    }
    input {
        max-width: 500px;
    }
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
    #transcript-panel {
        padding-left: 10%;
        width: 90%;
    }
}