/**
 * Video Controls for oon.media player
 */
.ss #videoPlayerWindow,
.ss .remote {
   position: relative;
}

.ss #videoPlayerWindow .controls,
.ss .remote .controls {
   /* !important needed to overwrite oon.media style attribute */
   position: absolute !important;
   top: 0px !important;
   left: 0px !important;
}

.ss #videoPlayerWindow .controls a,
.ss .remote .controls a {
   position: absolute;
   top: -3000px;
   left: -3000px;
}

.ss #videoPlayerWindow .controls a:focus,
.ss .remote .controls a:focus {
   position: relative;
   top: -1.6em;
   left: 0px;
   padding: 0.400em 0.667em;
   font-size: 1.2em;
   font-weight: bold;
   outline: none;
   color: #002C5A;
   border: 0;
   background: #EDEEF0;
   z-index: 200;
}

/***** remote videos *****/

.ss .remote .video.error {
   border: 1px solid #dededf;
   color: #999;
   background-color: #f4f4f5;
   padding: 4px;
}

.ss .remote .video object,
.ss .remote .video video {
   display: block;
}

/** remote filehandler ****/

.ss .remote p.file.unavailable {
   border: 1px solid #dededf;
   color: #999;
   background-color: #f4f4f5;
   padding: 4px;
}

/***** video captions *****/

.ss .caption {
   margin-bottom: 20px;
}
.ss .caption a {
   text-decoration: none;
}
.ss .caption a:hover {
   text-decoration: underline;
}

.ss .remote .video.tvthek + .caption a {
   font-weight: normal;
}

.ss :not(.stripe) > .remote .video.tvthek {
   margin-top: 20px;
}

.ss .remote .caption.tvthek .meta {
   position: absolute;
   top: -16px;
   right: 0;
   font-size: 12px;
   line-height: 1.4167;
   color: #A6A6A6;
}

.ss .remote .caption.tvthek .meta .brace {
   display: none;
}


/****** stripebox ******/
.ss .stripe > .remote {
   /** if overflow isn't hidden, the player
   forces the width/height of the .remote
   and the transition is not visible
   **/
   overflow: hidden;
   padding-bottom: 0;
   -webkit-transition: width 200ms ease-in, height 200ms ease-in;
   -moz-transition: width 200ms ease-in, height 200ms ease-in;
   -ms-transition: width 200ms ease-in, height 200ms ease-in;
   -o-transition: width 200ms ease-in, height 200ms ease-in;
   transition: width 200ms ease-in, height 200ms ease-in;
}

/* transition only in height when closing to avoid weird effect */
.ss .stripe > .remote:not(.playing) {
   -webkit-transition: height 200ms ease-in;
   -moz-transition: height 200ms ease-in;
   -ms-transition: height 200ms ease-in;
   -o-transition: height 200ms ease-in;
   transition: height 200ms ease-in;
}


/* in this case, it's really an credit */
.ss .stripe-credits {
   padding-right: 10px;
   width: auto;
   text-align: right;
   color: #A6A6A6;
   font-size: 12px;
   line-height: 1.4167;
}

.ss .socialButtons + .stripe-credits {
  padding-top: 40px;
}

.ss .stripe-credits a {
   font-weight: normal;
}

.ss .stripe .remote .caption {
   display: none;
}

.ss .stripe .remote .video .bigplaybutton {
   border-radius: 0 !important;
   right: 0px !important;
   bottom: 0px !important;
   padding: 10px 6px 6px 10px !important;
   width: 24px !important;
   height: 24px !important;
}

.ss .stripe .remote .video .bigplaybutton svg {
   width: 24px !important;
   height: 24px !important;
}


.ss .stripe {
   box-sizing: border-box;
   background-color: #F0F1F4;
   cursor: pointer;
   overflow: hidden;
   position: relative;
}

.ss .stripe::after {
   content: "";
   right: 0;
   bottom: 0;
   position: absolute;
   background: linear-gradient(to bottom, rgba(240,241,244,0), rgba(240,241,244,1) 95%);
}

.ss .stripe.expanded::after,
.ss .stripe.fitting::after {
   content: none;
}

.ss .stripe.expanded {
   cursor: auto;
   height: auto;
}
.ss .stripe:hover {
   background-color: #E8E9ED;
}
.ss .stripe.expanded:hover {
   background-color: #F0F1F4;
}

.ss .stripe > .remote {
   float: left;
}

.ss .stripe .remote .closeVideoLink {
   display: none;
}
.ss .stripe .remote.playing .closeVideoLink {
   background-image: url("../images/closeSpriteFilledBig.png");
   display: block;
   height: 20px;
   width: 20px;
   outline: 0 none;
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 10;
}

.ss .storyListItem .closeVideo a:hover,
.ss .storyListItem .closeVideo a:focus {
   background-position: 0 -20px;
   outline: inherit;
}