/*
 * nspt_flow_styles.css
 *
 * The "No Suck Player Template" css file.  This stylesheet must come AFTER mvp.css to not break all the styles in the Player.
 */

ul {
  padding: 0;
  margin: 0;
}

#mute-warning {
  font: 13px Verdana;
  display: none;
  padding: 10px;
  background-color: #fff3cd;
  color: #856404;
  text-align: center;
}

#mute-warning-text {
  font: 13px Verdana;
  padding: 10px;
  position: relative;
}

#player-template {
  margin: 0;
  padding: 0;
  font: 13px Verdana;
  background-color: rgb(128, 128, 128);
  background-repeat: no-repeat;
}

#all {
  position: absolute;
  top: 0;
  bottom: -0;
  left: 0;
  right: -0;
}

#player-wrap {
  position: relative;
  float: left;
  height: 100%;
  overflow-y: hidden;
}

#player-section {
  float: left;
  width: 370px;
  background-color: white;
}

#video-wrap {
  background-color: rgb(0, 0, 0);
}

#video {
  display: table;
  margin: 0 auto;
}

#player-error {
  display: table-cell;
  vertical-align:middle;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
}

div.error {
  color: white;
  display: table-cell;
  vertical-align:middle;
  text-align: center;
}

#captions {
  display: none;
  background: black;
  color: white;
  padding-left: 15px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 15px;
}

#granicus-captions-frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.title {
  font: 16px "Trebuchet MS";
  color: rgb(255, 255, 255);
}

#player-section .title {
  background-color: rgb(34, 34, 35);
  background-image: url('/images/mvp/player_title_bg.png');
  background-repeat-x: repeat;
  padding: 10px;
  border-top: 1px solid rgb(85, 85, 85);
  border-bottom: 1px solid rgb(85, 85, 85);
}

#player-title {
  height: 23px;
  overflow: hidden;
}

/*
 * Menu
 */

#player-section .menu {
  height: 24px;
  width: 100%;
  background-color: rgb(34, 34, 35);
  background-image: url('/images/mvp/index_menu_bg.png');
  background-repeat-x: repeat;
}

.menu div {
  display: block;
  color: rgb(204, 204, 204);
  margin-top: 2px;
  margin-left: 3px;
  margin-right: 10px;
  cursor: pointer;
  float: left;
}

.menu div.on {
  color: rgb(255, 255, 255);
}

.menu div .img {
  float: left;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  background-image: url('/images/mvp/player_sprites.png');
  background-repeat: no-repeat;
}

/*
 * Menu Icons
 *
 * Icons are loaded as one image and just have offsets to show the correct icon
 * (probably should change this later)
 */

.menu > .index .img {
  background-position: -40px 0px;
}

.menu > .index.on .img {
  background-position: -60px 0px;
}

.menu > .share .img {
  background-position: -80px 1px;
}

.menu > .share.on .img {
  background-position: -100px 1px;
}

.menu > .download .img {
  background-position: -120px 2px;
}

.menu > .download.on .img {
  background-position: -140px 2px;
}

.menu > .clip .clip-menu-icon {
  float: left;
  height: 17px;
  width: 17px;
  margin-right: 5px;
  background-image: url('/images/scissors_17px_right.png');
  background-repeat: no-repeat;
}

.menu > .clip.on .clip-menu-icon {
  float: left;
  height: 17px;
  width: 17px;
  margin-right: 5px;
  background-image: url('/images/scissors_17px_right.png');
  background-repeat: no-repeat;
}

.clip > a {
  color: rgb(204,204,204);
  text-decoration: none;
}

.clip.on > a {
  color: rgb(255,255,255);
  text-decoration: none;
}

/*
 * Index Area
 *
 * TODO split off into separate css file and rename classes/ids
 * due to backwards compatibility, leaving in main nspt file for now
 */

#content-pane {
  bottom: -0;
  background-color: rgb(34, 34, 35);
}

#content-pane div.currentItemPane {
  display: block;
}

#content-pane div.indexPoints {
  display: block;
}

#content-pane div.sharePane {
  display: none;
}

#content-pane div.downloadPane {
  display: none;
}

#content-pane div.embedPane {
  display: none;
}

#index-pane {
  /* min-height: 188px; */
  overflow: auto;
  background: white;
}

#index-pane a {
  display: inline-block;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-right: 3px;
  padding-left: 20px;
  border-bottom: 1px solid rgb(204, 204, 204);
  cursor: pointer;
  width: 94%;
  background-image: url('/images/mvp/index_point.png');
  background-repeat: no-repeat;
  background-position: 2px 5px;
  /* Firefox won't trigger click events without this for some reason */
  pointer-events: all;
}

#index-pane a:hover {
  background-color: #d9d9dd;
}

#index-pane a[current="1"] {
  background-color: #99ddea;
}

#share-pane {
  background-color: rgb(34, 34, 35);
  background-image: url('/images/mvp/content_pane_bg.png');
  background-repeat-x: repeat;
  background-repeat-y: no-repeat;
  height: 100%;
  color: white;
  padding-left: 10px;
  padding-top: 20px;
}

.shareBox {
  color: black;
  background-image: url('/images/mvp/sharebox_c.png');
  background-repeat-x: repeat;
  width: 92%;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  padding-left: 5px;
  line-height: 90%;
  font-size: 12px;
}

.shareBox img {
  position: relative;
  top: 8px;
  cursor: pointer;
  display: none;
}

#copyEmbedLink {
  display: none;
  padding-right:15px;
}

.embedSection {
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0px;
}

.shareBox .wrapleft {
  position: absolute;
  width: 10px;
  height: 56px;
  background-image: url('/images/mvp/sharebox_bg.png');
  float: left;
  margin-top: -10px;
  margin-left: -15px;
}

.shareBox .wrapright {
  width: 15px;
  height: 55px;
  background-image: url('/images/mvp/sharebox_bg.png');
  background-position-x: -44px;
  float: right;
  margin-top: -10px;
  margin-right: -5px;
}

.shareBox .toolbox {
  margin-left: 10px;
  margin-top: -15px;
  float: right;
}

.shareBoxLink {
  width: 94%;
  float: left;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3px;
}

#download-pane {
  background-color: rgb(34, 34, 35);
  background-image: url('/images/mvp/content_pane_bg.png');
  background-repeat-x: repeat;
  background-repeat-y: no-repeat;
  height: 100%;
  padding-left: 10px;
  padding-top: 30px;
  padding-right: 10px;
  padding-bottom: 10px;
}

#download-pane .downloadLink {
  display: inline-block;
  cursor: pointer;
  width: 140px;
  height: 61px;
}

#download-pane .video {
  margin-left: 5px;
  background-image: url('/images/mvp/download_video.png');
}

#download-pane .audio {
  background-image: url('/images/mvp/download_audio.png');
}

#embed-pane {
  background-color: rgb(34, 34, 35);
  background-image: url('/images/mvp/content_pane_bg.png');
  background-repeat-x: repeat;
  background-repeat-y: no-repeat;
  height: 100%;
  color: white;
  padding-left: 10px;
  padding-top: 20px;
}

#current-item-pane {
  background-color: rgb(34, 34, 35);
  height: 100%;
  padding-left: 10px;
  padding-top: 0px;
  padding-right: 10px;
  padding-bottom: 0px;
  color: white;
}

#current-item-header {
  -webkit-margin-before: 0em;
  margin-top: 0px;
  padding-top: 5px;
}

#current-index-title {
  font-size: 125%;
}

/*
 * Document Area
 *
 * TODO same as index area
 */

#doc-wrap {
  position: absolute;
  float: left;
  width: 100%;
  height: 100%;
}

#doc-section {
  position: absolute;
  float: left;
  left: 0;
  right: -0;
  height: 100%;
  margin-left: 400px;
}

#doc-viewer {
  background-color: rgb(255, 255, 255);
  height: 100%;
}

#doc-menu {
  background-color: rgb(64, 64, 65);
  height: 30px;
  width: 100%;
}

.doc-menu-img {
  float: left;
  height: 20px;
  width: 20px;
  margin-right: 5px;
  background-image: url('/images/mvp/player_sprites.png');
  background-repeat: no-repeat;
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
}

#doc-menu .print {
  float: right;
  margin-top: 5px;
  cursor: pointer;
}

#print-icon {
  background-position: -160px 1px;
}

.doc-menu-image {
  width: 20px;
  height: 20px;
  float: left;
  background-repeat: no-repeat;
}

.doc-menu-image-web {
  background-image: url('/images/mvp/player_template_web_gray.png');
}

.doc-menu-image-search {
  background-image: url('/images/mvp/player_template_search_gray.png');
}

.doc-menu-image-doc {
  background-image: url('/images/mvp/player_template_doc_gray.png');
}

.doc-menu-image-web.active {
  background-image: url('/images/mvp/player_template_web_green.png');
}

.doc-menu-image-search.active {
  background-image: url('/images/mvp/player_template_search_green.png');
}

.doc-menu-image-doc.active {
  background-image: url('/images/mvp/player_template_doc_green.png');
}

.doc-menu-items {
  list-style: none;
  margin-left: 10px;
  padding-top: 7px;
}

.doc-menu-items > li {
  display: inline-block;
  margin-right: 10px;
}

.doc-menu-items > li > a {
  color: white;
  white-space: nowrap;
  text-decoration: none;
}

td.docViewMenuItems #docViewSelectedItem {
  cursor: pointer;
}

td.docViewMenuItems #docViewSingleMenuItem {
  display: block;
}

td.docViewMenuItems > .imgWeb {
  display: block;
  float: left;
  height: 20px;
  width: 20px;
  background-image: url('/images/mvp/player_template_web_green.png');
  background-repeat: no-repeat;
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
}

td.docViewMenuItems #docViewSelectedItem .imgWeb {
  margin-top: 4px;
  margin-right: 0px;
  margin-bottom: 2px;
  margin-left: 8px;
}

td.docViewMenuItems #docViewSingleMenuItem .imgWeb {
  margin-top: 2px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 8px;
}

#doc-frame-wrapper {
  position: absolute;
  width: 100%;
  top: 30px;
  bottom: -0;
}

#doc-frame {
  position: absolute;
  height: 100%;
  width: 100%;
}

p.captions-line {
  margin-top: 0em;
}