.ijs-display-button div { background-position: -100px -75px; }
.ijs-display-button ul { width: 20em; left: -8.5em; /* Width of menu - width of button / 2 */ }

.ijs-displaybar-hidden {
  visibility: hidden;
}

.ijs-slide-div {
  width: 100%; height: 100%;
}

.ijs-displaybar-visible {
  /*margin: 0 50%; padding: 0; */
  /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
  position: absolute; left: 36%;width: 28%; height: 50px; top: 5px;
  visibility: hidden;
  z-index: 100;

  color: #fff; font-weight: bold;
  overflow: hidden;
  overflow-y: hidden;
  cursor: default;
  opacity: 0.8;
  background-color: #111;
  border: 2px solid #333;
  -moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;

}

.ijs-displaybar-image {
cursor: pointer;
}

.ijs-preview-panel {
  /*margin: 0 50%; padding: 0; */
  /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
  position: absolute; width: 240px; height: 180px; top: 300px;
  visibility: hidden;
  z-index: 100;

  color: #fff; font-weight: bold;
  overflow: hidden;
  overflow-y: hidden;
  cursor: default;
  opacity: 0.8;
  background-color: #111;
  border: 2px solid #333;
  -moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
}

.ijs-preview-image {
width: 100%; height: auto;
}

.ijs-preview-overlay {
	/*display:none;*/
	position:absolute;
	width:100%;
	height:20%;
	top:80%;
	background:#111;
	opacity: 0.9;
	color: #fff;
}

.ijs-timeline-panel {
  /*margin: 0 50%; padding: 0; */
  /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
  position: absolute; left: 10%; width: 80%; height: 50px; top: 50%;
  visibility: visible;
  z-index: 100;

  color: #fff; font-weight: bold;
  overflow: hidden;
  overflow-y: hidden;
  cursor: default;
  opacity: 0.9;
  background-color: #111;
  border: 2px solid #333;
  -moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
}

.ijs-timeline-canvas {
position: absolute;top: 0px;left: 0px; width: 100%;height: 100%;cursor: pointer;z-index: 0;
}

.ijs-thumbnail-holder {
  position: absolute;left: 0px; width: 100%;height: 200px;background:#f11;z-index: 100;
}

.ijs-slide-hidden {
   position: absolute;visibility: hidden;
}

.ijs-slide-left-large {
  position: absolute;left: 0%; width: 70%;height: auto; max-height: 100%; margin:auto;
}

.ijs-slide-right-large {
   position: absolute; left: 30%;width: 70%; height: auto; max-height: 100%; margin:auto;
}

.ijs-slide-left-50-percent {
  position: absolute; left: 0%;width: 50%; height: auto; margin:auto;
}

.ijs-slide-right-50-percent {
 position: absolute;left: 50%;width: 50%; height: auto;margin:auto;
}

.ijs-slide-alone {
   position: relative;width: auto; height: 100%;margin:auto;
   /*display: block;width: auto; height: 100%;margin:auto;*/ 
}

.ijs-video-left-small{
  position: absolute; top: 0; left: 0; width: 30%; height: 100%; 
}

.ijs-video-right-small{
  position: absolute; top: 0; left: 70%; width: 30%; height: 100%; 
}

.ijs-video-left-50-percent{
  position: absolute; top: 0; left: 0; width: 50%; height: 100%; 
}

.ijs-video-right-50-percent{
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%; 
}

.ijs-video-alone {
  visibility: hidden;position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}

.ijs-video-hidden {
  visibility: hidden;position:absolute;
}

.vjs-logo-hidden {
  position: absolute; top: 5px; left: 5px; 
  visibility: hidden;
}

.vjs-logo-left {
  position: absolute; top: 5px; left: 5px; 
  visibility: visible;
}

.vjs-tag-middle {
  position: absolute; top: 100; left: 25%; width: 50%; height: 50%;
	margin: 0 auto; padding: 0; cursor: pointer;
	opacity: 0.8;
  background-color: #111;
  border: 2px solid #333;
  -moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
  overflow: auto;
}

.vjs-tag-visible {
  margin: 0 25%; padding: 0; cursor: pointer;
  /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
  position: absolute; width: 50%; height: 50%; top: 25%;
  visibility: visible;
  z-index: 100;

  color: #fff; font-weight: bold;
  overflow: hidden;
  overflow-y: hidden;
  cursor: default;
  opacity: 0.8;
  background-color: #111;
  border: 2px solid #333;
  -moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
}

.ijs-search-panel {
  /*margin: 0 50%; padding: 0; */
  /* Scale with the size of the player div. Works when poster is vertically shorter, but stretches when it's less wide. */
  position: absolute; width: 60%; height: 40%; left: 20%; top: 20%;
  visibility: visible;
  z-index: 100;

  color: #fff; font-weight: bold;
  overflow: hidden;
  overflow-y: hidden;
  cursor: default;
  opacity: 0.8;
  background-color: #111;
  border: 2px solid #333;
  -moz-border-radius: 0.7em; -webkit-border-radius: 1em; border-radius: .5em;
  -webkit-box-shadow: 0 2px 4px 0 #000; -moz-box-shadow: 0 2px 4px 0 #000; box-shadow: 0 2px 4px 0 #000;
}