/*****************************************************************************
 *************************  ArtSci Streaming Styles  *************************
 *****************************************************************************/

/**
 * Streaming Media in Home Content Primary Slideshow View
 */
.views-field-field-home-content-image .artsci_streaming-flowplayer-rtmp {
  margin:auto;
  -moz-box-shadow: 0px 0px 5px 2px #333;
  -webkit-box-shadow: 0px 0px 5px 2px #333;
  box-shadow: 0px 0px 5px 2px #333;
  background:none;
}
.views-field-field-home-content-image .artsci_streaming-colorbox {
  width:auto;
  height:auto;
}
/**
* Home slide
*
*/

.iframe {
width: 100%;
height: auto;
/*min-height:280px;*/
min-height:183px;
}
.as-streaming-media.formatter-colorbox iframe.iframe, .as-streaming-media.formatter-colorbox video.iframe {
/*width: 300px;
height: 240px;*/
  display:inline-block;
  height:auto;
  width:auto;
  /*min-height:80px;*/
  min-width:80px;
  max-width:300px;
  padding:3px;
  border:1px solid #CCC;
  background:#fff;
}

/**
 * Streaming Media colorbox view (fields, teaser)
 */
.node-teaser .field-type-artsci-streaming .field-item,
.as-streaming-media>div {
  position:relative;
}
/* in a narrow column, text will not be able to wrap, so put space below */
.node-teaser .artsci_streaming-colorbox {
  margin-bottom:1em;
  float:right;
}
/* in the full width view, put h space for better wrapping */
/* but not in IE7 because it will render the margin on the right :-( */
.view-display-id-panel_pane_streaming_media_teasers .artsci_streaming-colorbox {
  margin:0 0 0 1em;
  *margin:0px;
}
/* get rid of that curved shadow from the full node style */
.node-teaser .artsci_streaming-colorbox:after {
  display:none;
}
/* in the panel fields view, ensure space between columns */
.view-display-id-panel_pane_streaming_media_colorbox .panel-sixcol-right>div {
  margin-left:9px;
}
/* all colorbox media uses an image, so the size is decided by that */

/* style the splash image and make sure it sizes as expected */
.node-teaser .artsci_streaming-colorbox img,
.as-streaming-media.formatter-colorbox a img {
  display:block;
  max-width:100%;
}
.as-streaming-media.formatter-colorbox .audio img {
  height:80px;
  width:316px;
  max-width:100%;
}
.node-teaser .artsci_streaming-colorbox.audio>img {
  height:80px;
  width:316px;
}
/* image hover style */
.node-teaser .artsci_streaming-colorbox:hover>img,
.as-streaming-media.formatter-colorbox a:hover>img {
  border-color:#333;
}
/* private message */
.as-streaming-media .artsci_streaming-private-media-msg {
  right:auto;
  left:9px;
  top:0;
}
/* space the rows properly */
.view-display-id-panel_pane_streaming_media_colorbox div.views-row {
  margin-bottom: 1.5em;
}

/**
 * streaming media jsembed view (fields)
 */
/* put dotted lines between rows to look like a teaser view */
.view-display-id-panel_pane_streaming_media_jsembed .views-row {
  margin-bottom:1.5em;
  border-bottom:1px dotted #999;
  padding-bottom:1.5em;
}
/* but not on the last one :P */
.view-display-id-panel_pane_streaming_media_jsembed .views-row-last {
  border:none;
  padding:0px;
}
/* shadow and center the media */
.as-streaming-media.formatter-jsembed a {
  margin:auto;
  -moz-box-shadow: 0px 0px 5px 2px #666;
  -webkit-box-shadow: 0px 0px 5px 2px #666;
  box-shadow: 0px 0px 5px 2px #666;
}
.as-streaming-media.formatter-jsembed .audio {
  height:80px;
}
/* make a nice full width background; let only the left and right shadow show */
.as-streaming-media.formatter-jsembed {
  overflow:hidden;
  background: #dedede;
  margin-top:1.5em;
  margin-bottom: 1.5em;
}
/* private message */
.view-display-id-panel_pane_streaming_media_jsembed .artsci_streaming-private-media-msg {
  left:auto;
  right:9px;
  background-color:#dedede;
}
/**
 * Clear some annoying styles
 */
a.artsci_streaming-flowplayer-rtmp:link,
a.artsci_streaming-flowplayer-rtmp:visited,
a.artsci_streaming-flowplayer-rtmp:hover,
a.artsci_streaming-flowplayer-rtmp:active {
  text-decoration:none;
  outline:none;
}

/**
 * There are two schemes for play buttons:
 *  - Colorbox: the image is the background of the :before element, which is
 *    hidden within the colorbox content element
 *  - JS Embed: the image is the background of the splash image's <span/>
 *    wrapper. When the video loads, the <span/> is removed taking the button
 *    with it; a little extrainious, but pseudo elements are not valid on <img/>
 * but don't use double-colon syntax, because ie8 doesn't get it
 */
.artsci_streaming-flowplayer-rtmp {position:relative;}
.artsci_streaming-flowplayer-rtmp>.play {
  height:88px;
  width:110px;
  overflow:hidden;
  position:absolute;
  top:50%;
  left:50%;
  margin: -44px 0px 0px -55px;
  /*background: transparent url(../images/streaming-sprite.png) no-repeat;*/
  opacity:.75;
}
.artsci_streaming-flowplayer-rtmp:hover>.play {
  opacity:1;
}
#cboxContent .artsci_streaming-colorbox>.play {
  display:none;
}
/**
 * set the sprite position for different cases
 */
.artsci_streaming-colorbox.artsci_streaming-video-link>.play {
  background-position: 0px -88px;
}
.artsci_streaming-flowplayer-rtmp.artsci_streaming-audio-link>.play,
.artsci_streaming-colorbox.artsci_streaming-audio-link>.play {
  background-position: 0px -176px;
}

/**
 * Streaming media full node style
 *
 * We place a curved bottom shadow on the element. This is done by making
 * :after a block and stretching it to be slightly smaller than the element
 * itself (using the seemingly contradictory technique of setting all four
 * position attributes); then box-shadow and elliptical border-radius for the
 * win.
 */
body.node-type-streaming-media .field-type-artsci-streaming a {
  position:relative;
  /* hide our shadow element (it might show up while the content it loading) */
  background:#fff;
}
body.node-type-streaming-media .field-type-artsci-streaming a:after {
  position:absolute;
  display:block;
  content:'';
  z-index:-1;
  top:20px;
  bottom:0;
  left:10px;
  right:10px;
  -webkit-border-radius:50%/12px;
  -moz-border-radius:50%/12px;
  border-radius:50%/12px;
  -webkit-box-shadow:0 4px 18px rgba(0, 0, 0, 0.8);
  -moz-box-shadow:0 4px 18px rgba(0, 0, 0, 0.8);
  box-shadow:0 4px 18px rgba(0, 0, 0, 0.8);
}
body.node-type-streaming-media .artsci_streaming-private-media-msg {
  position:static;
  background:transparent;
  margin:0 0 1.5em 0;
  width:auto;
  height:auto;
  line-height:1.5em;
  text-indent:0;
}
/*
 * Streaming media embeds css
 **/

iframe.youtube.single-pc-youtube,
iframe.box.single-iframe {
    min-height: 355px !important;
    /*width: 690px;*/
    width: 100%;
    height: 389px;
    margin-bottom: 5px;
}

iframe.youtube.list-pc-youtube {
     margin-right: 20px;
	 width: 100% !important;
	 height: 170px !important;
}
iframe.youtube.list-pc-youtube,
iframe.box.list-iframe {
    /*width: 265px;*/
	width: 100%;
    float: right;
    border: 1px;
    margin-left: 10px;
    height: auto;
}
object#artsci_streaming-player_api {
    height: 282px;
    width: 550px;
}
/**** for sites that have widescreen for homepage, like artsci,if they have a video on the homepage, extend the splash image to fit the screen (960px).
* otherwise, we will leave this as 100% for now.Note that this will be handled site by site cases. 
*/
div.views-field-field-home-content-image a#artsci_streaming-0 img {
    width: 100%;
    height: auto;
}
.artsci_streaming-flowplayer-rtmp>.players {
    height: 88px;
    width: 110px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -44px 0px 0px -55px;
    background: transparent url(/sites/all/themes/awesomesauce/images/streaming-sprite.png) no-repeat;
    opacity: .75;
}


input#edit-field-streaming-media-settings-und-0-file-name {
    font-size: 1.4em;
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*add padding in the streaming media editing fields */
p.batman-artsci,
.form-item.form-type-radios.form-item-field-streaming-media-settings-und-0-base-url,
.form-item.form-type-select.form-item-field-streaming-media-settings-und-0-aspect-ratio,
.form-item.form-type-textfield.form-item-field-streaming-media-settings-und-0-file-name,
span.lead-bats {
    padding: 10px;
}
p.batman-box, p.batman-youtube {
    border-bottom: solid 1.5px #ccc;
    /*padding-bottom: 10px;*/
	padding: 10px;
}
a.artsci_streaming-video-link, a.artsci_streaming-colorbox {
    background-color: black;
}

p.batman-box code, p.batman-artsci code, p.batman-youtube code {
	 
    font-style: italic;
    font-weight: 600;

}

	
	.joker-shares {
    padding-top: 35px;
}
fieldset#edit-field-streaming-media-settings-und-0 {
    padding: 1.5em 0 0 0;
}
span.lead-bats {
    margin-top: 0.5em;    
    text-transform: uppercase;
}
/* hide the old title so we can change it  */
fieldset#edit-field-streaming-media-settings-und-0 .fieldset-legend {
    display: none;
}