/*
 * jQuery FlexSlider v1.8
 * http://flex.madebymufffin.com
 *
 * Copyright 2011, Tyler Smith
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Modified by Tate
 * - Joseph Hughes  - 2011
 * - Liam Palmer    - 2012
 * - Phil Glanville - 2013
 *
 * TODO:
 *  1. Fix Fullscreen vertical centering                                             [x]
 *  2. Fix Audio stopping when inpage video is played and vice versa.                [ ]
 *  3. Fix portrait images being used for lead images on audio items.                [x]
 *  4. Look into imposed limitations when only a few images in slideshow.            [ ]
 *  5. Fix broken image load-flash in IE.                                            [x]
 *  6. Fix position of thumbnails in fullscreen.                                     [x]
 *  7. Fix position of navigation arrows before and after fullscreen (FF + Chrome).  [x]
 *  8. Fix restart of video and audio that was paused due to navigating away.        [x]
 *  9. Fix clicking at top of fullscreen failing to close overlay.                   [ ]
 * 10. could be useful img { -ms-interpolation-mode: bicubic; }
 */
 
/* 
===========================================================
 Browser Resets
===========================================================
*/
#region-content .field-name-body .flex-container a:active,
#region-content .field-name-body .flexslider a:active {/*outline: none;*/}
#region-content .field-name-body .slides,
#region-content .field-name-body .flex-control-nav,
#region-content .field-name-body .flex-direction-nav {margin: 0; padding: 0; list-style: none;}
#region-content .field-name-body.flexslider li {list-style-type:none;}

/* 
===========================================================
 Flex Slider base theme
===========================================================

/* FlexSlider Necessary Styles */
#region-content .field-name-body .flexslider {position: relative; zoom: 1; width: 100%; margin: 0; padding: 0; min-height:250px;}
#region-content .field-name-body .flexslider .slides {margin:0 !important; padding:0;}
#region-content .field-name-body .flexslider .slides > li {display:none; zoom:1; position:relative; margin:0; background:none; padding:5px;}
#region-content .field-name-body .flexslider .slides img {height:auto; width:auto; max-width:100%; display: block;}
#region-content .field-name-body .flexslider .flex-pauseplay span {text-transform: capitalize;}
#region-content .field-name-body .flexslider img {max-height:550px; max-width:100%; margin:0 auto;}

/* Clearfix for the .slides element */
#region-content .field-name-body .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] #zone-content #region-content .field-name-body  .slides {display: block;} 
* html #zone-content #region-content .field-name-body  .slides {height: 1%;}

/* No JavaScript Fallback */
.no-js .slides > li:first-child {display: block;}

/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}

/* Direction Nav */
#region-content .field-name-body .flex-direction-nav {padding-right:10px!important; overflow:hidden;}
#region-content .field-name-body .flex-direction-nav li a { border-bottom:none; width: 5%; height: 80%; margin:5em 0 0 0; padding:1px 0 0 0; display: block; background:#000;  position: absolute; top: 1px; cursor: pointer; text-indent: -9999px;}
#region-content .field-name-body .flex-direction-nav li a:hover { border-bottom:none;  }
#region-content .field-name-body .flex-direction-nav li .next {background-position: -52px 0; right: -21px;}
#region-content .field-name-body .flex-direction-nav li .prev {left: -20px;}
#region-content .field-name-body .flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

/* Control Nav */
#region-content .field-name-body .flex-control-nav {width: 20%; position: absolute; right:0; top:20px; padding-right:20px; text-align: right;}
#region-content .field-name-body .flex-control-nav li {margin: 0 7px 5px 0; padding:0; display: inline-block; zoom: 1; *display: inline;}
#region-content .field-name-body .flex-control-nav li a {text-indent: -9999px; width: 15px; height: 15px; background: #ddd; color:#ddd; cursor: pointer; display:block;}
#region-content .field-name-body .flex-control-nav li a:hover {background:#fff; color:#fff;}
#region-content .field-name-body .flex-control-nav li a.active {background:#ff00bb; color:#ff00bb; cursor: default;}

/* Custom Control Nav */
#region-content .field-name-body .custom-controls  {width:100%; overflow:hidden; list-style-type:none;}
#region-content .field-name-body .custom-controls li {padding:0; margin:0; background:#555; overflow:hidden; float:left; list-style-type:none;}
#region-content .field-name-body .custom-controls li a {display:block; height:4em; padding:1em 0 0 10px;margin:0 0 1px 1px; background:#444; overflow:hidden; color:#eee; text-decoration:none;}
#region-content .field-name-body .custom-controls li img {margin:0;}
#region-content .field-name-body .custom-controls li.first a {margin:0 0 1px 0;}
#region-content .field-name-body .custom-controls li a.active {background:#fff; color:#444;}
#region-content .field-name-body .custom-controls li a span {display:block;  margin:3px 0 0 0;}

/* jPlayer CSS override */
#region-content .field-name-body .flexslider .slides .jp-audio { margin:0; }
#region-content .field-name-body .flexslider .slides .jp-audio a { border-bottom:none; }
#region-content .field-name-body .flexslider .slides .jp-interface { margin:0; }
#region-content .field-name-body .flexslider .slides .jp-playlist { margin:0 0 10px 0; }
#region-content .field-name-body .flexslider .slides .audiotitle { font-size:1.1em; background:#444; color:#fff; margin:0; padding:7px 0 5px 10px; border-bottom:1px solid #666; }


#region-content .field-name-body .flexslider-wrapper.fullscreen .field-name-field-audio-url {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
#region-content .field-name-body .flexslider-wrapper.fullscreen .jp-audio {
  margin: -50px auto 0;
  max-width: 850px;
  position: relative;
  top: 50%;
  width: 100%;
}

/* 
===========================================================
 Inline slideshow Overrides
===========================================================
*/

/* Odd fix for fitvids - it adds a span display-inline only for IE, which breaks IE?! */
#region-content .field-name-body .flexslider.inlineslideshow .slides li > span { display:block !important; }
/* by default don't show the flexslider, we can turn on with js */
#region-content .field-name-body .flexslider.inlineslideshow { display:none; }
#region-content .field-name-body .flexslider.inlineslideshow { margin:20px 0 10px 0; padding:15px 0 10px 0; text-align:left; line-height:1.4em; }
#region-content .field-name-body .flexslider.inlineslideshow .item-list { margin:0 6px;}
#region-content .field-name-body .flexslider.inlineslideshow .custom-controls-container { height:68px; margin:0 auto; overflow:hidden;  }
#region-content .field-name-body .flexslider.inlineslideshow ul.custom-controls { padding:0; height:68px; }
#region-content .field-name-body .flexslider.inlineslideshow ul.slides { margin:0; padding:0; }
#region-content .field-name-body .flexslider.inlineslideshow ul.slides > li { margin:0; padding:0; }
#region-content .field-name-body .flexslider.inlineslideshow ul.slides > li p { margin:0 5px; padding:0; color:#999; }
/* override custom controls */
#region-content .field-name-body .flexslider.inlineslideshow .custom-controls li.last { margin-right:0; }
#region-content .field-name-body .flexslider.inlineslideshow .custom-controls li { margin:0 1px 0 0; padding:0; width:auto; background:none; }
#region-content .field-name-body .flexslider.inlineslideshow .custom-controls li a { border-bottom:4px #fff solid !important; margin:0; padding:0; height:64px !important; display:block; min-height:64px; background:#646361; }
#region-content .field-name-body .flexslider.inlineslideshow .custom-controls li a img { display:block; width:auto; height:64px !important; }
#region-content .field-name-body .flexslider.inlineslideshow .custom-controls li a.active { border-bottom:4px #444 solid !important; }
#region-content .field-name-body .flexslider.inlineslideshow .custom-controls li a.audio span { display:block; height:64px !important; width:100px; text-indent:-999px; }
#region-content .field-name-body .flexslider.inlineslideshow .custom-controls li a.audio::after { opacity:0.8; position:relative; content: " "; background:url(../images/inpageslideshowsprites.png) no-repeat -150px -30px; display:block; width:22px; height:62px; top:-46px; left:-11px; margin-left:50%; }
#region-content .field-name-body .flexslider.inlineslideshow .custom-controls li a.video::after { opacity:0.8; position:relative; content: " "; background:url(../images/inpageslideshowsprites.png) no-repeat -30px -30px; display:block;width:22px;height:22px; top:-44px; margin:0 40px 0 40px; }
/* style the direction navigation, next and back buttons */
#region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav { padding:0!important; width:auto; height:auto; position:absolute; right:6px; top:0; }
#region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li { width:26px; height:26px; display:block; float:left; margin-left:6px; }
#region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li a { width:26px; height:26px; position: static; margin: 0; padding:0; width: auto; height: auto; background-color:#eee; }
#region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li a:hover { background-color:#fff200; }
#region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li .next { width:26px; height:26px; background-image:url(../images/inpageslideshowsprites.png); background-repeat:no-repeat; background-position:-241px -28px; }
#region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li .prev { width:26px; height:26px; background-image:url(../images/inpageslideshowsprites.png); background-repeat:no-repeat; background-position:-282px -28px; }
#region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li .fullscreen-link { width:26px; height:26px; background-image:url(https://www.tate.org.uk/art/content/images/button_mag.png); background-repeat:no-repeat; background-position:5px -42px; }
/* specific adornments */
#region-content .field-name-body .flexslider.inlineslideshow .slides img { max-width:100%; max-height:380px; }
#region-content .field-name-body .flexslider.inlineslideshow .item-count { margin:-3px 0 3px 5px; padding:0 0 0 5px; color:#999; }
/* handling for low numbers of slides */
#region-content .field-name-body .numitems1 { margin:0; padding:0; list-style-type:none; }
#region-content .field-name-body .numitems1 ul.slides { margin:0; padding:0; list-style-type:none; }
#region-content .field-name-body .numitems1 ul.slides li { margin:0; padding:0; list-style-type:none; background:none; }
#region-content .field-name-body .numitems1 ul.slides li p { margin:0; padding:0 25px 0px 5px; color:#999; background:#fff; }
/* IE seems to get confused with broken images and width:auto, simple fix is to hide the broken image (there shouldnt be any really) */
#region-content .field-name-body .flexslider.inlineslideshow .broken-image { visibility:hidden !important; height:0 !important; }
/* by adding this quick ease here we can animate when the larger slides load in */
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .slides img { 
  -webkit-transition: max-width 1s, max-height 1s;
  -moz-transition: max-width 1s, max-height 1s;
  -o-transition: max-width 1s, max-height 1s;
  -ms-transition: max-width 1s, max-height 1s;
  transition: max-width 1s, max-height 1s;
  -webkit-transition-timing-function: ease;
  -moz-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  -ms-transition-timing-function: ease;
  transition-timing-function: ease;
}

/* Fix IE7 + 8 when they get confused on applying max-width to an image */
#region-content .field-name-body .flexslider.inlineslideshow .custom-controls li,
#region-content .field-name-body .flexslider.inlineslideshow .custom-controls li a,
#region-content .field-name-body .flexslider.inlineslideshow .custom-controls li a img {
  overflow: hidden;
  zoom: 1;
  max-width:120px;
}

/* For a solitary image, we need no padding... or so it would seem? */
#region-content .flexslider.inlineslideshow.numitems1 {
  padding-top: 0;
  padding-bottom: 0;
} 

/* 
===========================================================
 Fullscreen Slideshow
===========================================================
*/

/* When in fullscreen try and hide other non-important regions */
.flexslider-fullscreen { margin:0; padding:0; overflow:hidden; }
.flexslider-fullscreen .region { display: none; }
.flexslider-fullscreen .region-content { display: block; }
/* the bulk of the fullscreen handling */
.flexslider-fullscreen #region-content .field-name-body .flexslider-wrapper { 
  z-index:1000; position:fixed; width:100%; height:100%; left:0; top:0; right:0; bottom:0; background: #111 url(../images/inpageslideshowloader.gif) center center no-repeat;
}
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow { padding:0; margin:0; }
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav { position: fixed; right: 0px; top: 10px; overflow:visible; }
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li { width:auto; height:auto; }
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li a { background:none; top:0; width:10%; height:300px; opacity:.2; filter: Alpha(Opacity=20);   }
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li a:hover { opacity:1; filter: none; }
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li .next { position:fixed; right:10px; top:50%; margin-top:-50px; display:block; background: #EEE url(../images/slider-arrows.png) -80px 0 no-repeat; width: 80px; height: 80px; border-radius: 40px; moz-border-radius: 40px; ms-border-radius: 40px; opacity: 0.2;}
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li .prev { position:fixed; left:10px; top:50%; margin-top:-50px; display:block; background: #EEE url(../images/slider-arrows.png) no-repeat; width: 80px; height: 80px; border-radius: 40px; moz-border-radius: 40px; ms-border-radius: 40px; opacity: 0.2;}
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li .fullscreen-link { width:26px; height:26px; display:block; opacity:1; overflow:visible; background-image:url(https://www.tate.org.uk/art/content/images/button_mag.png); background-repeat:no-repeat; background-position:5px -111px; }
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .flex-direction-nav li .fullscreen-link::after { font-family: Arial,Helvetica,sans-serif; position:relative; display:block; content:'Return to the page'; text-decoration: underline; font-size:12px; color:#BFBFBF; text-align: right; width:120px; height:auto; left:-120px; top:-16px; text-indent:0 }
/* override the custom controls */
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .custom-controls { z-index: 1200; }
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .custom-controls li a { border-bottom:4px #131313 solid !important; }
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .custom-controls li a.active { border-bottom:4px #00AED3 solid !important; }
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .custom-controls-container {
  position:fixed; max-width:600px; bottom:0; left:50%; margin-left:-300px; top: auto; z-index: 1300;  box-shadow: 0 0 40px rgba(0,0,0,0.8);
}
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .slides figcaption {
  position:fixed; top:10px; left:10px; width:20%;
}
/* In fullscreen force our outer slides to take up the entire screen. height=0 fix chrome bug */
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .slides .image-wrapper,
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .slides .video-wrapper,
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .slides .audio-wrapper {
  position:fixed; height:77%; left:0px; top:8%; right:0px; bottom:15%; min-height:300px;
}
/* ... and then style our inner slides to percentage of that outerslide style */
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .slides img {
  width:auto; max-width:auto; height:100%; max-height:80%; position: absolute; left:0; top:0; right:0; bottom:0; margin:auto; box-shadow: 0 0 40px rgba(0,0,0,0.8);
}
/* limit how large items can get */
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .slides .audio-inner {
  width:auto; max-width:700px; height:auto; max-height:auto; position: relative; top:50%; margin:-50px auto 0 auto; box-shadow: 0 0 40px rgba(0,0,0,0.8);
}
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .slides .video-inner {
  width:auto; max-width:850px; height:auto; max-height:auto; position: relative; top:50%; margin:-250px auto 0 auto;
}
/* position some of the adornments around the main fullscreen slideshow */
.flexslider-fullscreen #region-content .field-name-body .flexslider.inlineslideshow .item-count {
  position:fixed; width:100%; top:10px; left:0; right:0; bottom:auto; text-align:center; padding:0; margin:0;
}