/**
 * @file solas-ui-widgets.css
 * Used for: 
 * Adding Widgets and general 3rd Party integrations that SUI doesn't provide.
 */  

/* webtrends noscript image causing issues solas-4624 */
#dcsimg {
  height: 1px;
  width:  1px;
  margin: 0;
}

/**
 * Responsive video elements.
 * 
 * 56.2% is 16:9 which is what we want for the contents of the video player
 * then the top padding is the height of the player controls in pixels.
 * Default caters for youtube, Vimeo and Viddler.
 * 
 * @TODO: Integrate this as SUI provides it via:
 * http://getbootstrap.com/components/#responsive-embed.
 */
.oembed-video {
  padding:            0 0 56.2% 0 !important;
  position:           relative;
  display:            block;
  height:             0;
  padding:            0;
  margin-bottom:      30px;
  overflow:           hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

/* StreamUK */
.oembed-video.streamuk {
  padding-top: 37px !important;
}

/* Styles for StreamUK flash fallback. */
.oembed-video.streamuk .oembed-content span object {
  width:  100% !important;
  height: 100% !important;
}

.oembed-video .oembed-content {
  display: block;
}

.oembed-video .oembed-content iframe,
.oembed-video .oembed-content span,
.oembed-video .oembed-content object {
  height:   100% !important;
  width:    100% !important;
  overflow: hidden;
  position: absolute;
  top:      0;
}

.bc-item-media .oembed-video .oembed-content iframe {
  left:  0;
  right: 0;
}

[role='main'] iframe {
  width: 100%;
}

iframe {
  box-sizing: border-box !important;
}

.oembed-video .oembed-content .kWidgetIframeContainer {
  width: 100% !important;
}

/**
 * Social Widget
 */

.social-media-widget {
  position:      relative;
  overflow-x:    hidden;
  margin-bottom: 20px;
}

.social-media-widget .skip-content {
  display:            block;
  position:           absolute;
  left:               -100%;
  top:                0;
  background:         #034c85;
  color:              #fff;
  -webkit-transition: left 0.25s linear;
  transition:         left 0.25s linear;
  padding:            8px 12px;
  z-index:            1;
}

.social-media-widget .skip-content:focus,
.social-media-widget .skip-content:active {
  outline: 0;
  left:    0;
}

@media (min-width: 851px) {
  .social-media-widget .mobile {
    display: none;
  }
}

.lt-ie9 .social-media-widget .embed {
  display: none;
}

.lt-ie9 .social-media-widget .mobile {
  display: block;
}

/**
 * Instagram widget
 */

.instagram-widget {
  overflow:   scroll;
  overflow-x: hidden;
  padding:    0 9px 5px 0;
}

@media (min-width: 851px) {
  .social-media-widget-instagram .mobile {
    display: none;
  }
}

@media (max-width: 850px) {
  .social-media-widget-instagram .non-mobile {
    display: none;
  }
}

.lt-ie9 .social-media-widget-instagram .mobile,
.lt-ie9 .social-media-widget-instagram .non-mobile {
  display: none;
}

.non-mobile.instagram-widget {
  background-color: #ebeff0;
}

.instagram-article {
  background-color: #fff;
  margin:           15px 0 20px 10px;
}

.instagram-height-750 {
  height: 750px;
}

.instagram-height-400 {
  height: 400px;
}

.instagram-height-200 {
  height: 200px;
}

.instagram-header {
  display: inline-block;
  width:   93%;
  padding: 10px 0 10px 15px;
}

.instagram-title {
  margin:           0 0 2px 0;
  padding:          9px;
  font-size:        20px;
  line-height:      24px;
  background-color: #ebeff0;
  color:            #4279a6;
  border-bottom:    10px solid #fff;
  width:            100%;
}

.instagram-title a {
  font-weight: 300;
}

.instagram-title a .bc-svg {
  font-size: 20px;
  display:   block;
  position:  absolute;
  left:      -30px;
  top:       2px;
}

[dir='rtl'] .instagram-title a .bc-svg {
  left:  0;
  right: -30px;
}

.instagram-logo {
  display:     block;
  width:       32px;
  height:      32px;
  float:       right;
  margin-top:  -44px;
  overflow:    hidden;
  text-indent: -9999px;
}

.instagram-user-pic img {
  margin:                0;
  width:                 38px;
  height:                38px;
  border-radius:         50%;
  -webkit-border-radius: 50%;
  -moz-border-radius:    50%;
}

.instagram-user {
  float:         left;
  margin-bottom: 15px;
}

.instagram-user-pic img,
.instagram-user-name {
  display: inline-block;
}

.instagram-time-stamp {
  float:  right;
  margin: 9px 10px 0 0;
}

.instagram-comments-count {
  float: right;
}

.instagram-media {
  margin-bottom: 15px;
  width:         100%;
}

.instagram-video,
.instagram-article-img {
  margin: 0 0 22px 0;
}

.instagram-tag-list ul li {
  display: inline-block;
  padding: 0;
}

section.instagram-tag-list ul,
section.instagram-tag-list li {
  margin: 0 !important;
}

.instagram-tag-list {
  display:    inline-block;
  margin:     0;
  list-style: none;
  padding:    0px 10px 5px;
}

.instagram-count {
  padding: 0px 10px 5px;
}

.instagram-count .bc-svg-comment {
  margin-bottom: -2px;
}

.lt-ie9 .social-media-widget-instagram {
  display: none;
}

/**
 * Share this
 */

.sharethis-wrapper {
  margin: 20px 0;
}
.sharethis-wrapper * {
  box-sizing: content-box;
}

/**
 * Maps
 */

.geolocation-map,
#bc-geo-rss {
  margin: 0 0 30px;
  width:  100% !important;
}
.bc-show-hide-content .geolocation-map {
  /*margin-bottom: 20px;*/
  border: 2px solid #fff;
}

@media (max-width: 850px) {
  .geolocation-map,
  #bc-geo-rss {
    /* To allow room for scrolling. */
    width:  90% !important;
    margin: 0 0 20px;
  }
  .bc-show-hide-content .geolocation-map {
    margin-bottom: 30px;
  }
}

.bc-col-sidebar .geolocation-help,
.bc-col-sidebar .geolocation-map {
  margin: 0 0 30px;
}

#bc-geo-rss {
  height:  358px;
  display: none;
}

#bc-geo-rss.bc-show {
  display: block;
}