Minimize Soil Moisture
 <style type="text/css">
p.major_caption {
//display:none;
margin-left: 1%;
    margin-right: 1%;
    font-size: 11px;
}
/*
p.major_caption {
    opacity: 1;
    display: none;
}
 
.major_div:hover p {
    -webkit-transition: display 1s linear;
    -moz-transition: display 2s ease-in-out;
    -ms-transition: display 2s ease-in-out;
    -o-transition: display 2s ease-in-out;
    display: block;
    margin-top: -34%;
    z-index: 99;
    position: relative;
    background: black;
    padding: 3% 2%;
    color: #fff;
    width: 92%;
    margin-left: 2%;
    opacity: 0.9;
}
 
.major_div:hover .inside {
    opacity: 0.5;
}*/
 
a#caption_pdf {
    width: 15%;
    float: right;
}
a#button-caption {
    width: 17%;
    float: left;
}
 
.modal-body a{
display: block;
 
}
.mTSThumbContainer p, .mTSThumbContainer a{
  display: none;
}
 
.parent {
  width: 86%;
  min-height: 601px;
  margin-left: 55px;
      padding-top: 2%;
}
 
 
 
a.controls {
    background: grey;
    -moz-border-radius: 48px;
    -webkit-border-radius: 48px;
    border-radius: 48px;
    width: 24px;
    height: 48px;
}
 
a.controls .mTSButtonIconContainer {
/*left: 15px;*/
top: 6px;
}
a#mTS_1_buttonLeft .mTSButtonIcon {
    left: -1px;
}
 
a.controls.next:hover,a.controls.previous:hover{
  background-color: rgba(0,0,0,.7);
}
 
/*-----------------------------------------------------------
Panzoom
-------------------------------------------------------------*/
.panzoom{
/* transform: none !important; */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
 
.buttons {
  padding-left: 11px;
  width: 39px;
  float: left;
  z-index: 99;
  position: absolute;
  margin-top: 40%;
}
 
.buttons button{
  background: transparent;
  border: 0;
  width: 25px;
  height: 25px;
  margin-top: 8px;
}
 
a.previous {
  /*  padding-left: 30px;*/
}
a.next {
  /*  padding-right: 32px;*/
}
 
.zoom-range {
    -webkit-appearance: slider-vertical;
    writing-mode: bt-lr;
    margin-top: 6px;
}
/*-----------------------------------------------------------
Style -- Gallery
-----------------------------------------------------------*/
.hidden{
display: none  !important;
}
 
.modal-dialog {
    width: 800px !important;
    margin: 30px auto;
}
 
.mThumbnailScroller{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all pointer events to js */ }
.mThumbnailScroller.mTS_no_scroll, .mThumbnailScroller.mTS_touch_action{ -ms-touch-action: auto; touch-action: auto; }
.mTSWrapper{
position: relative;
overflow: hidden;
height: 100%;
max-width: 100%;
outline: none;
direction: ltr;
}
 
.mTSContainer{
margin: 0;
padding: 0;
overflow: hidden;
}
 
ul.mTSContainer, ol.mTSContainer{ list-style: none; }
 
.mTSThumb,
ul.mTSContainer > li img{ vertical-align: bottom; }
 
.mTS_vertical .mTSContainer{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
 
.mTS_horizontal .mTSContainer{
margin-left: 0 !important;
margin-right: 0 !important;
height: 100%;
}
 
 
.mTSButton {
    width: 15px;
    height: 15px;
    line-height: 20px;
    padding: 8px;
    overflow: hidden;
    text-align: center;
    background-color: #1e364e;
    color: #fff;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -38px;
    opacity: 1;
    -webkit-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
    -moz-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
    -o-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
    -ms-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
    transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
    border-radius: 5px 5px 5px 5px;
}
 
/* buttons positioning */
 
.mTSButtonDown{
top: auto;
bottom: 0;
}
 
.mTSButtonRight {
    left: auto;
    right: -46px;
}
 
 
.mTSButtonUp,
.mTSButtonDown{ /* margin is half the button size */
left: 63%;
margin-left: -24px;
}
 
 
.mTSButtonLeft,
.mTSButtonRight{/* margin is half the button size */
top: 51%;
margin-top: -24px;
}
 
.mTSButtonIconContainer{
      display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  height: 22px;
  top: -13px;
}
 
.mTSButtonIcon{ /* SVG icon */
      display: inline-block;
      fill: #fff;
      position: absolute;
      top: -4px;
      left: 3px;
      width: 19px;
}
 
.mTSButton.mTS-hidden,
.mThumbnailScroller.mTS_no_scroll .mTSButton{
/* hide button effect (fades-out button to zero size) */
opacity: 0;
height: 0;
width: 0;
padding: 0;
-webkit-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
-moz-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
-o-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
-ms-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
/* ---------- */
}
 
    .controls .mTSButtonIcon{
      top:2px;
    }
.mTS_horizontal .mTSThumbContainer,
.mTS_horizontal ul.mTSContainer > li{
float: left;
height: 184px;
width: 184px;
border: 1px solid #1e364e !important;
position: relative;
}
 
.mTS-buttons-in{
/* padding: 14px; */
/* background-color: #000; */
}
 
.mTS-buttons-in .mTSButtonIcon{
      fill: #fff;
          left: -3px;
          width: 20px;
          height: 40px;
          top: 1px;
     }
 
.mTS-buttons-in .mTSWrapper,
.mTS-buttons-in .mTSButton{/* background-color: inherit; */}
 
.mTS-buttons-in .mTSButtonLeft,
.mTS-buttons-in .mTSButtonRight{
width: 24px;
height: 48px;
padding: 24px 4px 0 4px;
margin-top: -36px;
}
 
.mTS-buttons-in .mTSButtonUp,
.mTS-buttons-in .mTSButtonDown{
width: 24px;
height: 24px;
padding: 4px 24px;
margin-left: -36px;
}
 
.mTS-buttons-in .mTSButton.mTS-hidden{
height: 0;
width: 0;
padding: 0;
}
 
.mTS-buttons-in .mTSButton:not(.mTS-hidden){ opacity: .4; }
 
.mTS-buttons-in:hover .mTSButton:not(.mTS-hidden){ opacity: 1; }
 
.mTS-buttons-in .mTS_vertical .mTSThumbContainer{ margin: 14px 0; }
 
.mTS-buttons-in .mTS_vertical .mTSThumbContainer:first-child{ margin-top: 0; }
 
.mTS-buttons-in .mTS_vertical .mTSThumbContainer:last-child{ margin-bottom: 0; }
 
 
.mTS-buttons-in .mTS_horizontal .mTSThumbContainer:first-child{ margin-left: 0; }
 
.mTS-buttons-in .mTS_horizontal .mTSThumbContainer:last-child{ margin-right: 0; }
 
.content img{
/* width:180px; */
/* height:180px;
border: 1px solid #1e364e !important; */
height: auto;
max-height: 180px;
max-width: 180px;
position: absolute;
}
.gallery {
    display: block;
    position: relative;
    /* max-width: 180px; */
    /*max-height: 120px;*/
    float: left;
    padding: 3px 6px;
}
 
 
div#st_main {
    /* position: relative; */
    /* margin-left: 201px; */
    /* margin-top: 194px; */
max-width: 940px;
}
.st_overlay{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(../images/pattern.png) repeat-x bottom left;
opacity:0.3;
}
.st_main img.st_preview{
position:absolute;
left:0px;
top:0px;
width:100%;
 
}
ul.st_navigation {
    /* position: absolute; */
    margin-left: 0px;
    /* width: 100%; */
    /* top: 225px; */
    /* left: -300px; */
    list-style: none;
    padding: 0px;
}
ul.st_navigation>li {
    /* height: 235px !important; */
    float: left;
    clear: both;
    margin-bottom: 10px !important;
    position: relative;
    width: 100%;
    max-width: 645px;
}
 
ul.st_navigation>li span.st_link {
float:left;
clear:both;
margin-bottom:8px;
position:relative;
    background: #1e364e repeat right top;
color: #1d2635;
    border-left: 1px solid #1d2635;
    border-radius: 5px 5px 5px 5px;
}
 
ul.st_navigation>li span.st_link {
height: 36px;
/* background-color:#000;*/
float:left;
position:relative;
line-height:50px;
padding: 0px 20px;
width:100%;
/* -moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;*/
}
ul.st_navigation>li span.st_arrow_down,
ul.st_navigation>li span.st_arrow_up{
    position: absolute;
    margin-left: 15px;
    width: 24px;
    height: 36px;
    cursor: pointer;
    /*  -moz-box-shadow: 0px 0px 2px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
    box-shadow: 0px 0px 2px #000;*/
border-right: 1px solid #1d2635;
    border-radius: 0px 5px 5px 0px;
}
ul.st_navigation>li span.st_arrow_down{
/*background:#000 url(../images/icons/down.png) no-repeat center center;*/
background:  url(https://earth.esa.int/documents/700255/1985313/down.png),#1e364e;
background-repeat: no-repeat,no-repeat;
background-position: center center, center center;
}
ul.st_navigation>li span.st_arrow_up{
/*background:#000 url(../images/icons/up.png) no-repeat center center;*/
background: url(https://earth.esa.int/documents/700255/1985313/up.png),#1e364e;
background-repeat: no-repeat,no-repeat;
background-position: center center, center center;
}
.st_wrapper{
display:block;
position: absolute;
    width:580px;
    height:180px;
    overflow-y:hidden;
top:50px;
    left:24px;
}
.st_thumbs {
    height: 180px;
    margin: 0;
    min-width: 400px !important;
}
.st_thumbs img{
    width: 180px;
    height: 180px;
    float:left;
    margin:3px 3px 0px 0px;
    cursor:pointer;
/*   -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);*/
}
.st_loading{
position:fixed;
top:10px;
right:0px;
background:#000 url(../images/icons/loader.gif) no-repeat 10px 50%;
padding:15px 40px 15px 60px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
opacity:0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.st_about{
display:none;
position:absolute;
top:50px;
    left:0px;
opacity:0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.st_subcontent{
background:#000;
padding:30px;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;
}
 
span.st_link_sub {
    z-index: 99;
    bottom: 0px;
    position: relative;
    padding: 5px;
    /* margin: 0 0 4px 0; */
    background: #1e364e;
    color: #fff;
    font-size: 13px;
    opacity: 1;
    transition: opacity ease-in-out 0.5s;
    left: 0px;
    cursor: pointer;
    display: -webkit-inline-box;
    display: block;
}
 
.gallery:hover>span.st_link_sub,span.st_link_sub:hover{/* opacity:1; */}
.gallery {
    display: block;
    position: relative;
    /* max-width: 180px; */
    /*max-height: 120px;*/
    float: left;
    height: 100%;
    /* padding: 1px 8px; */
    text-decoration: none;
    /* border: 1px solid #1e364e; */
}
a.title{
display:block;
max-height:35px;
float: left;
text-decoration:none;
color:#fff !important;
font-size:21px;
    margin: -7px 5px 5px 28px;
}
 
 
span.reference{
font-family:Arial;
position:fixed;
left:10px;
bottom:10px;
font-size:11px;
}
span.reference a{
color:#aaa;
text-decoration:none;
margin-right:20px;
}
span.reference a:hover{
color:#ddd;
}
.st_link.portlet-topper {
    cursor: pointer;
}
 
li.galleries:first-child {
    /* top: 11px; */
    /* position: relative; */
    float: left;
    /* z-index: -1; */
    clear: both;
}
 
a.gallery{
background: transparent;
box-shadow: none;
}
 
li.mTSThumbContainer a.gallery:hover{
background: transparent;
}
 
#galleries>li:nth-child(3) li span {
    bottom: 5px;
}
 
li:nth-child(3) #st_main .content li a.gallery  {
    margin-right: 10px;
    /* border: 1px solid red; */
    /* background: red; */
}
 
ul#galleries ul {
    list-style-type: none;
}
 
.content{
    overflow: auto;
    position: relative;
    padding: 0px;
    background-color: #333;
    margin: 20px 0px;
    /*width: 50%;*/
    /* max-width:570px; */
    height: 200px;
    /* float: left; */
  }
.content li{
margin: 4px;
overflow: hidden;
}
.content li a{
display: inline-block;
border: 7px solid rgba(255,255,255,.1);
}
 
#content-6{ background-color: transparent; }
#content-6 .mTSButton{
background-color: rgba(0,0,0,.7);
-moz-border-radius: 48px; -webkit-border-radius: 48px; border-radius: 48px;
}
#content-6 .mTSButtonLeft{ left: 5px; }
#content-6 .mTSButtonRight{ right: 5px; }
 
 
/*-----------------------------------------------------------
Style -- Immagine centrale
-----------------------------------------------------------*/
 
.major_div:hover {
background: #e7e7e7;
//opacity: 0.5;
}
 
.major_div {
/* max-width: 645px;*/
float: left;
margin: auto;
/* margin-bottom: 20px; */
/* background: #e7e7e7; */
width: 100%;
}
 
.inside {
position: relative;
/* border: 1px solid red; */
/* min-height: 630px;
min-width: 447px; */
height: auto;
    width: 100%;
    overflow: auto;
    float: left;
}
 
.inside img {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* position: absolute; */
/* width: 100%; */
display: block;
padding: 15px;
/*height: 100%;*/
}
/*-------------------------------------------------------
Download text and icon
---------------------------------------------------------*/
/*
.maindownload {
    height: 36px;
    display: block;
    float: left;
    margin-left: 38%;
}tw
 
.maindownload p{
float: left;
padding-right: 2px;
}
 
.maindownload img{
float: left;
width: 30px;
padding: 10px;
}*/
 
a.maindownload_img img {
    width: 28px;
}
 
div.downlaod_center {
    /* border: 1px solid; */
    height: 38px;
    /* float: left; */
float: right;
    //width: 132px;
    //margin-left: 40%;
}
 
.maindownload {
    /* height: 36px; */
    /* border: 1px solid red; */
    display: block;
    float: left;
    margin-top: 12px;
    position: relative;
}
 
.modal-body {
          padding:5px !important;
      }
      .modal-content {
          border-radius:0;
      }
      .modal-dialog img {
          text-align:center;
          /* margin:0 auto; */
      }
    .controls{
        width:50px;
        display:block;
        font-size:11px;
        padding-top:8px;
        font-weight:bold;
    }
    .next {
        float:right;
        text-align:right;
    }
.img-responsive{
display: block;
max-width: 100%;
height: auto;
position: absolute;
bottom: 0;
left: 0;
margin: auto;
right: 0;
top: 0;
}</style>
<style type="text/css">
.modal-open{
overflow:hidden}
.modal{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:1050;
display:none;
overflow:hidden;
-webkit-overflow-scrolling:touch;
outline:0}
.modal.fade .modal-dialog{
-webkit-transition:-webkit-transform .3s ease-out;
-o-transition:-o-transform .3s ease-out;
transition:transform .3s ease-out;
-webkit-transform:translate(0,-25%);
-ms-transform:translate(0,-25%);
-o-transform:translate(0,-25%);
transform:translate(0,-25%)}
.modal.in .modal-dialog{
-webkit-transform:translate(0,0);
-ms-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0)}
.modal-open .modal{
overflow-x:hidden;
overflow-y:auto}
.modal-dialog{
position:relative;
width:auto;
margin:10px}
.modal-content{
position:relative;
background-color:#fff;
-webkit-background-clip:padding-box;
background-clip:padding-box;
border:1px solid #999;
border:1px solid rgba(0,0,0,.2);
border-radius:6px;
outline:0;
-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);
box-shadow:0 3px 9px rgba(0,0,0,.5)}
.modal-backdrop{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:1040;
background-color:#000}
.modal-backdrop.fade{
filter:alpha(opacity=0);
opacity:0}
.modal-backdrop.in{
filter:alpha(opacity=50);
opacity:.5}
 
.modal-body{
position:relative;
padding:15px}
 
@media (min-width:768px){
.modal-dialog{
width:600px;
margin:30px auto}
.modal-content{
-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
box-shadow:0 5px 15px rgba(0,0,0,.5)}
.modal-sm{
width:300px}
}
input[type=range] {
    display: block;
    width: 100%;
}
.zoom-range {
    -webkit-appearance: slider-vertical;
    writing-mode: bt-lr;
    margin-top: 6px;
}
 
button, input {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
 
input {
    line-height: normal;
}
 
button, input{
    margin: 0;
    font: inherit;
    color: inherit;
}
svg:not(:root) {
    overflow: hidden;
}
a{
    box-sizing: border-box;
    color: #b88b00;
    text-decoration: none;
}
 
a:hover {
   color: #b88b00;
   text-decoration: underline;
}
a:hover {
   outline: 0;
}
 
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 
#label{
  height: 20px;
  clear: both;
  display: block;
  padding-top: 16px;
  text-align: left !important;
  margin-left: 5%;
  font-weight: normal;
  width: 90%;
}
 
#label2{
  height: 20px;
  clear: both;
  display: block;
  padding-top: 16px;
  text-align: left !important;
  margin-left: 5%;
  font-weight: normal;
  width: 90%;
}
 
#label_major_caption{
  height: 20px;
  clear: both;
  display: block;
  /*text-align: left !important;
  margin-left: 1%;
  width: 90%;*/
  margin-right: 1%;
  text-align: right !important;
  font-weight: normal;
}
 
#label_major_caption_hide{
  height: 20px;
  clear: both;
  //display: block;
  /*text-align: left !important;
  margin-left: 1%;
  width: 90%;*/
  margin-right: 1%;
  text-align: right !important;
  font-weight: normal;
}
 
div#caption p {
    padding-left: 40px;
    padding-right: 40px;
}</style>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><!-- Download zip --><script src="https://cdn.rawgit.com/Stuk/jszip-utils/dfdd631c4249bc495d0c335727ee547702812aa5/dist/jszip-utils.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script><script src="https://js.zapjs.com/js/download.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/2.0.5/jquery.panzoom.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script><!--<script src="jquery.bsPhotoGallery.js"></script>--><script>
 
function trig_reset(){
 
$( "button.reset" ).trigger( "click" );
return true;
 
}
 
 
 function zoom(id) {
 
          var $section = $('.box');
 
 
  $section.find('.panzoom').panzoom({
            $zoomIn: $section.find(".zoom-in"),
            $zoomOut: $section.find(".zoom-out"),
            $zoomRange: $section.find(".zoom-range"),
            $reset: $section.find(".reset")
          });
 
          var $panzoom = $section.find('.panzoom').panzoom();
          $panzoom.parent().on('mousewheel.focal', function( e ) {
            e.preventDefault();
            var delta = e.delta || e.originalEvent.wheelDelta;
            var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
            $panzoom.panzoom('zoom', zoomOut, {
              increment: 0.1,
              animate: false,
              focal: e
            });
          });
        }
</script><script>
(function($) {
  "use strict";
  $.fn.bsPhotoGallery = function(options) {
 
      var settings = $.extend({}, $.fn.bsPhotoGallery.defaults, options);
      var id = generateId();
      var classesString = settings.classes;
      var classesArray = classesString.split(" ");
      var clicked = {};
 
      function getCurrentUl(){
        return 'div[data-bsp-ul-id="'+clicked.ulId+'"][data-bsp-ul-index="'+clicked.ulIndex+'"]';
      }
 
  function generateId() {
        //http://fiznool.com/blog/2014/11/16/short-id-generation-in-javascript/
        var ALPHABET = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var ID_LENGTH = 4;
        var out = '';
        for (var i = 0; i < ID_LENGTH; i++) {
          out += ALPHABET.charAt(Math.floor(Math.random() * ALPHABET.length));
        }
        return 'bsp-'+out;
      }
 
  function createModalWrap(){
 
        if($('#bsPhotoGalleryModal').length !== 0){
          return false;
        }
 
        var modal = '';
        modal += '<div class="modal box fade" id="bsPhotoGalleryModal" tabindex="-1" role="dialog"';
        modal += 'aria-labelledby="myModalLabel" aria-hidden="true">';
        modal += '<div class="modal-dialog">'
        modal +='<div class="modal-content">';
        modal += '<div class="buttons">';
        modal += '<button class="zoom-in"><img src="https://earth.esa.int/documents/700255/1985313/zoom_in_2.jpg" style="width:25px;height:25px;position: relative;top: -25%;"></button>';
        modal += '<input class="zoom-range" max="5" min="0.4" step="0.05" type="range" orient="vertical">';
        modal += '<button class="zoom-out"><img src="https://earth.esa.int/documents/700255/1985313/zoom_out_2.jpg" style="width:25px;height:25px;position: relative;top: -25%;"></button>';
        modal += '<button class="reset"><img src="https://earth.esa.int/documents/700255/1985313/reset.jpg" style="width:25px;height:25px;position: relative;top: -25%;"></button>';
        modal += '</div>';
        modal += '<div class="modal-body"  >';
        modal += '</div>';
        modal += '</div></div></div>';
        $('body').append(modal);
 
      }
 
  function showHideControls(){
    var total = $(getCurrentUl()+' div[data-bsp-li-index]').length;
 
    if(total === clicked.nextImg){
    $('a.next').hide();
    }else{
    $('a.next').show()
    }
    /*if(clicked.prevImg === -1){*/
if(clicked.prevImg <= 0){
    $('a.previous').hide();
    }else{
    $('a.previous').show()
    }
    }
 
  function showModal(){
/*
          var src = $(this).find('img').attr('src');
          var largeImg = $(this).find('img').attr('data-bsp-large-src');
*/
          var src = $('div.mTSThumbContainer').find('img').attr('src');
          var largeImg = $('div.mTSThumbContainer').find('img').attr('data-bsp-large-src');
          if(typeof largeImg === 'string'){
                src = largeImg;
          }
          //var index = $(this).attr('data-bsp-li-index');
          //var ulIndex = $(this).parent('#mTS_1_container').attr('data-bsp-ul-index');
          //var ulId = $(this).parent('#mTS_1_container').attr('data-bsp-ul-id');
 
          var index = $('div.mTSThumbContainer').attr('data-bsp-li-index');
          var ulIndex = $('div.mTSThumbContainer').parent('#mTS_1_container').attr('data-bsp-ul-index');
          var ulId = $('div.mTSThumbContainer').parent('#mTS_1_container').attr('data-bsp-ul-id');
 
 
          var caption = $('div.mTSThumbContainer').find('p').html() ;
          var pdf = $('div.mTSThumbContainer').find('a').attr('href');
          var id_thum = $('div.mTSThumbContainer').attr('id');
 
          clicked.img = src;
          clicked.prevImg = parseInt(index) - parseInt(1);
      clicked.nextImg = parseInt(index) + parseInt(1);
          clicked.ulIndex = ulIndex;
          clicked.ulId = ulId;
 
          $('#bsPhotoGalleryModal').modal();
 
          var html = '';
          var img = '<div class="parent" style="overflow: hidden; position: relative;"><div class="panzoom" style="backface-visibility: hidden; transform-origin: 50% 50% 0px; cursor: move; transform: none !important;"><img src="' + clicked.img + '" class="img-responsive" /></div></div>';
          html += '<div style="height: 25px;clear: both;display: block;top: 231px;position: absolute;width: 99%;z-index: 99;">';
          html += '<a class="controls next" data-bsp-id="'+clicked.ulId+'" href="'+ (clicked.nextImg) + '" onclick="return trig_reset();">';
          html += '<span class="mTSButtonIconContainer"><svg class="mTSButtonIcon" preserveAspectRatio="xMinYMin meet" version="1.1" viewBox="0 0 24 24"><g><line opacity="" stroke="#449FDB" stroke-width="1" x1="" x2="" y1="" y2=""></line></g><path d="M14.561 20.561l7.5-7.5c0.586-0.586 0.586-1.536 0-2.121l-7.5-7.5c-0.586-0.586-1.536-0.586-2.121 0s-0.586 1.536 0 2.121l4.939 4.939h-14.379c-0.828 0-1.5 0.672-1.5 1.5s0.672 1.5 1.5 1.5h14.379l-4.939 4.939c-0.293 0.293-0.439 0.677-0.439 1.061s0.146 0.768 0.439 1.061c0.586 0.586 1.536 0.586 2.121 0z"></path></svg></span>';
          html += '</a>';
          html += '<a class="controls previous" data-bsp-id="'+clicked.ulId+'" href="' + (clicked.prevImg) + '" onclick="return trig_reset();">';
          html += '<span class="mTSButtonIconContainer"><svg class="mTSButtonIcon" preserveAspectRatio="xMinYMin meet" version="1.1" viewBox="0 0 24 24"><g><line opacity="" stroke="#449FDB" stroke-width="1" x1="" x2="" y1="" y2=""></line></g><path d="M9.439 3.439l-7.5 7.5c-0.586 0.586-0.586 1.536 0 2.121l7.5 7.5c0.586 0.586 1.536 0.586 2.121 0s0.586-1.536 0-2.121l-4.939-4.939h14.379c0.828 0 1.5-0.672 1.5-1.5s-0.672-1.5-1.5-1.5h-14.379l4.939-4.939c0.293-0.293 0.439-0.677 0.439-1.061s-0.146-0.768-0.439-1.061c-0.586-0.586-1.536-0.586-2.121 0z"></path></svg></span>';
          html += '</a>';
          html += '</div>';
          html += '<span class="glyphicon glyphicon-remove-circle" style="cursor: pointer;position: absolute; right: -22px;top: -23px;font-size: 24px;color: #fff;text-shadow: 1px 1px 18px #000;border: 5px solid #fff;border-radius: 30px;padding: 0px 4px 0px 3px;"><i class="fa fa-times"></i></span>';
          html += img;
 
          html += '<div id="label">';
          html += '<a id="button-caption" onclick="$(\'#caption\').removeClass(\'hidden\');$(\'#button-caption\').addClass(\'hidden\');$(\'#label2\').removeClass(\'hidden\');">View image caption <i class="fa fa-caret-down" aria-hidden="true"></i></a>';
          html += '<a id="caption_pdf" target="_blank" href="'+pdf+'">Download PDF <i class="fa fa-download" aria-hidden="true"></i></a>';
          html += '</div>';
 
 
 
 
          html += '<div id="caption" class="hidden" style="clear:both;display:block;padding-top:8px;margin-bottom: 0px;"><p>'+caption+'</p></div><div id="label2" class="hidden"><a onclick="$(\'#label2\').addClass(\'hidden\');$(\'#button-caption\').removeClass(\'hidden\');$(\'#caption\').addClass(\'hidden\');">Hide image caption <i class="fa fa-caret-up" aria-hidden="true"></i></a></div>';
          $('#bsPhotoGalleryModal .modal-body').html(html);
          if(caption === "&nbsp;"){
              $("#button-caption").addClass('hidden');
          }
          zoom(id_thum);
          $('.glyphicon-remove-circle').on('click', closeModal);
          showHideControls();
 
      }
 
  function closeModal(){
        $('#bsPhotoGalleryModal').modal('hide');
      }
 
  function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
  }
 
      function nextPrevHandler(){
 
          var ul = $(getCurrentUl());
          var index = $(this).attr('href');
 
          var src = ul.find('div[data-bsp-li-index="'+index+'"] img').attr('src');
          var largeImg = ul.find('div[data-bsp-li-index="'+index+'"] img').attr('data-bsp-large-src');
 
          var caption2 =  ul.find('div[data-bsp-li-index="'+index+'"] p').html();
          var pdf2 =  ul.find('div[data-bsp-li-index="'+index+'"] a').attr('href');
 
          if(typeof largeImg === 'string'){
                src = largeImg;
          }
          $('.modal-body img').attr('src', src);
 
          if (typeof caption2 === "undefined") {
              caption2 = '&nbsp;';
              $('#button-caption').addClass('hidden');
          }
          //{
          //  $('#button-caption').removeClass('hidden');
          //}
 
          if(caption2 === "&nbsp;"){
              $("#button-caption").addClass('hidden');
  $("#label2").addClass('hidden');
          }else{
    var el = document.getElementById('caption');
//alert(hasClass(el, 'hidden'));
if(hasClass(el, 'hidden')){
$("#button-caption").removeClass('hidden');
$("#label2").addClass('hidden');
}else{
$("#button-caption").addClass('hidden');
$("#label2").removeClass('hidden');
}
  }
 
          $('.modal-body p').html(caption2);
          clicked.prevImg = parseInt(index) - 1;
          clicked.nextImg = parseInt(clicked.prevImg) + 2;
          $('.modal-body a#caption_pdf').attr('href',pdf2);
 
          if($(this).hasClass('previous')){
              $(this).attr('href', clicked.prevImg);
              $('a.next').attr('href', clicked.nextImg);
          }else{
              $(this).attr('href', clicked.nextImg);
              $('a.previous').attr('href', clicked.prevImg);
          }
          // console.log(clicked);
        showHideControls();
        return false;
      }
 
  function clearModalContent(){
        $('#bsPhotoGalleryModal .modal-body').html('');
        clicked = {};
      }
 
 
 
      this.each(function(i){
        //ul
        var items = $(this).find('div.mTSThumbContainer');
        $(this).attr('data-bsp-ul-id', id);
        $(this).attr('data-bsp-ul-index', i);
 
        items.each(function(x){
          //insertClearFix(this,x);
          $(this).addClass(classesString);
  if (x == 0)
$(this).attr('data-bsp-li-index', 1);
  else
$(this).attr('data-bsp-li-index', x);
          $(this).find('img').addClass('img-responsive');
          if(settings.hasModal === true){
            $(this).addClass('bspHasModal');
            //$(this).on('click', showModal);
            $('.major_img').on('click', showModal);
          }
        });
      })
 
      if(settings.hasModal === true){
        //this is for the next / previous buttons
        $(document).on('click', 'a.controls[data-bsp-id="'+id+'"]', nextPrevHandler);
        $(document).on('hidden.bs.modal', '#bsPhotoGalleryModal', clearModalContent);
        //start init methods
        createModalWrap();
      }
 
      return this;
  };
  /*defaults*/
  $.fn.bsPhotoGallery.defaults = {
    'classes' : '',
    'hasModal' : true
  }
 
 
}(jQuery));
 
 
 
</script><script>
  $(document).ready(function(){
    $('#mTS_1_container').bsPhotoGallery({
      "classes" : "",
      "hasModal" : true
    });
  });
</script><!-- Zoom -->
<div id="content">
<div class="textblock">
<div class="caption_major">
<p>
Soil Moisture retrieval performances are presented in the figures and videos collection available here.</p>
<p>
&nbsp;</p>
<h4>
Chapter Editor</h4>
<p>
IDEAS+, SMOS team</p>
</div>
</div>
<div class="downlaod_center">
<a class="maindownload" id="ignorePDF" onclick="downloadzippdf('#2img0')" style="cursor:pointer;display:block;">Download Gallery</a> <!-- <a class="maindownload_img" id="ignorePDF" onclick="downloadzippdf('#2img0')" style="cursor:pointer;display:block;"> --><img src="https://earth.esa.int/documents/700255/2519787/zip-file.jpg/" width="38px" /> <!-- </a> --></div>
<p>
&nbsp;</p>
<!--Add Gallery Images in Grid Layout -->
<div class="st_main" id="st_main">
<div class="st_navigation" id="st_nav galleries">
<div class="album current" id="aui_3_4_0_1_464">
<div class="content mThumbnailScroller _mTS_1 mTS-buttons-in auto-mTS-x-hover-50-none" id="content-6">
<div class="mTSWrapper mTS_horizontal" id="mTS_1" style="width: 940px;">
<div class="mTSContainer" id="mTS_1_container" style="top: 0px; position: relative; width: 3000px; left: 0px;">
<div class="mTSThumbContainer" id="thumb_0" style="display:none;">
<img class="img-responsive" src="https://earth.esa.int/documents/700255/3251206/1.png" /> <a href="https://earth.esa.int/documents/700255/3251206/1.pdf">&nbsp;</a>
<p class="muted text-center">
thumb_0</p>
</div>
<div class="mTSThumbContainer" id="thumb_1" onclick="view_major($(this).attr('id'))">
<img class="img-responsive" src="/documents/700255/3251206/1.png/12c482b2-8512-40a1-8616-016a80d3926c?t=1508148006000" style="width: 721px; height: 803px;" /> <a href="https://earth.esa.int/documents/700255/3251206/1-Overview.pdf">&nbsp;</a>
<p class="muted text-center">
Evolution of number of successful retrieval of the surface dielectric constant per retrieval case for descending orbit direction since June 2010. For cases: Soil and Forest cover soil moisture parameter is also successfully retrieved. For all others retrieval cases additional parameters like optical depth or surface roughness, surface temperature might be retrieved.</p>
</div>
<div class="mTSThumbContainer" id="thumb_2" onclick="view_major($(this).attr('id'))">
<img class="img-responsive" src="/documents/700255/3251206/2.png/800abdfe-eeaa-4068-a19c-90c7314d3c38?t=1508148020000" style="width: 2400px; height: 1323px;" /> <a href="https://earth.esa.int/documents/700255/2519835/2.pdf">&nbsp;</a>
<p class="muted text-center">
Evolution of number of successful retrieval of the surface dielectric constant per retrieval case for descending orbit direction since June 2010. For cases: Soil and Forest cover soil moisture parameter is also successfully retrieved. For all others retrieval cases additional parameters like optical depth or surface roughness, surface temperature might be retrieved.</p>
</div>
<div class="mTSThumbContainer" id="thumb_3" onclick="view_major($(this).attr('id'))">
<img class="img-responsive" src="/documents/700255/3251206/3.png" style="width: 721px; height: 465px;" /> <a href="https://earth.esa.int/documents/700255/2519835/3.pdf">&nbsp;</a>
<p class="muted text-center">
Evolution of number of successful retrieval of the surface dielectric constant per retrieval case for descending orbit direction since June 2010. For cases: Soil and Forest cover soil moisture parameter is also successfully retrieved. For all others retrieval cases additional parameters like optical depth or surface roughness, surface temperature might be retrieved.</p>
</div>
<div class="mTSThumbContainer" id="thumb_4" onclick="view_major($(this).attr('id'))">
<img class="img-responsive" src="/documents/700255/3251206/4.png/" style="width: 721px; height: 465px;" /> <a href="https://earth.esa.int/documents/700255/321206/4.pdf">&nbsp;</a>
<p class="muted text-center">
Evolution of number of successful retrieval of the surface dielectric constant per retrieval case for descending orbit direction since June 2010. For cases: Soil and Forest cover soil moisture parameter is also successfully retrieved. For all others retrieval cases additional parameters like optical depth or surface roughness, surface temperature might be retrieved.</p>
</div>
</div>
</div>
<a class="mTSButton mTSButtonLeft" id="mTS_1_buttonLeft" onclick="clickonleft(this.parentNode.id)" style="background: grey;"> <span class="mTSButtonIconContainer"> <svg class="mTSButtonIcon" preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 24 24"><g><line opacity="" stroke="#449FDB" stroke-width="1" x1="" x2="" y1="" y2=""></line></g><path d="M9.439 3.439l-7.5 7.5c-0.586 0.586-0.586 1.536 0 2.121l7.5 7.5c0.586 0.586 1.536 0.586 2.121 0s0.586-1.536 0-2.121l-4.939-4.939h14.379c0.828 0 1.5-0.672 1.5-1.5s-0.672-1.5-1.5-1.5h-14.379l4.939-4.939c0.293-0.293 0.439-0.677 0.439-1.061s-0.146-0.768-0.439-1.061c-0.586-0.586-1.536-0.586-2.121 0z"></path> </svg> </span> </a> <a class="mTSButton mTSButtonRight" id="mTS_1_buttonRight" onclick="clickonright(this.parentNode.id)"> <span class="mTSButtonIconContainer"> <svg class="mTSButtonIcon" preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 24 24"><g><line opacity="" stroke="#449FDB" stroke-width="1" x1="" x2="" y1="" y2=""></line></g><path d="M14.561 20.561l7.5-7.5c0.586-0.586 0.586-1.536 0-2.121l-7.5-7.5c-0.586-0.586-1.536-0.586-2.121 0s-0.586 1.536 0 2.121l4.939 4.939h-14.379c-0.828 0-1.5 0.672-1.5 1.5s0.672 1.5 1.5 1.5h14.379l-4.939 4.939c-0.293 0.293-0.439 0.677-0.439 1.061s0.146 0.768 0.439 1.061c0.586 0.586 1.536 0.586 2.121 0z"></path>3 </svg> </span> </a></div>
</div>
</div>
</div>
</div>
<div class="major_div ">
<div class="inside" href="#2img0">
<img alt="" class="major_img" src="/documents/700255/3225978/1.jpg/8d25bd48-b77a-4024-b384-d49c6b1e8d11?t=1507195385723" style="width: 721px; height: 465px;" /></div>
<!-- <input type="button" id="button-caption_main" value="Caption"/> -->
<div id="label_major_caption">
<a id="button-caption_main">View image caption </a></div>
<p class="major_caption" hidden="true" id="major_caption_id">
&nbsp;</p>
<div hidden="true" id="label_major_caption_hide">
<a id="button-caption_main_hide">Hide image caption </a></div>
</div>
<div>
<p>
&nbsp;</p>
<div id="references_caption">
<a id="button-references">References and further readings </a></div>
<div class="readmore_major_caption" hidden="true" id="references_caption_id">
<h4>
References and further readings</h4>
<ul>
<li>
xxxx, author data etc .</li>
<li>
xxxx, author data etc .</li>
<li>
xxxx, author data etc .</li>
<li>
xxxx, author data etc .</li>
<li>
xxxx, author data etc .</li>
<li>
xxxx, author data etc .</li>
</ul>
</div>
<div hidden="true" id="references_hide">
<a id="button-references_hide">Hide </a></div>
<script>
/*$("#bottone").click(function () {*/
$("#button-caption_main").click(function () {
  $("#major_caption_id").toggle("slow");
  $("#label_major_caption").toggle("slow");
  $("#label_major_caption_hide").toggle("slow");
});
 
$("#button-caption_main_hide").click(function () {
  $("#label_major_caption").toggle("slow");
  $("#major_caption_id").toggle("slow");
  $("#label_major_caption_hide").toggle("slow");
});
 
/*$("#bottone").click(function () {*/
$("#button-readmore_caption_main").click(function () {
  $("#readmore_major_caption_id").toggle("slow");
  $("#readmore_major_caption").toggle("slow");
  $("#readmore_major_caption_hide").toggle("slow");
});
 
$("#button-readmore_caption_main_hide").click(function () {
  $("#readmore_major_caption").toggle("slow");
  $("#readmore_major_caption_id").toggle("slow");
  $("#readmore_major_caption_hide").toggle("slow");
});
 
$("#button-references").click(function () {
  $("#references_caption_id").toggle("slow");
  $("#references_caption").toggle("slow");
  $("#references_hide").toggle("slow");
});
 
$("#button-references_hide").click(function () {
  $("#references_caption").toggle("slow");
  $("#references_caption_id").toggle("slow");
  $("#references_hide").toggle("slow");
});
</script><script>
 
/*Gallery*/
 
  $( document ).ready(function() {
 
  $("#content-6>div").css('width' ,(parseInt($("#content-6 .mTSContainer").children().length)*196 ));
 
  $("#content-6 #mTS_1_buttonLeft").css("background"," grey");
});
 
  function clickonleft(id){
   var left = parseInt($("#"+ id + " .mTSContainer").css('left'))+25;
if(parseInt(left) < 25){  $("#" + id + " #mTS_1_buttonRight").css("background"," rgba(0,0,0,.7)"); $("#"+ id + " .mTSContainer").css('left',left); }
else{  $("#" + id +" #mTS_1_buttonLeft").css("background"," grey");}
  }
function clickonright(id){
  var left = parseInt($("#"+ id + " .mTSContainer").css('left'))-25;
    var   lenght = parseInt($("#"+ id + " .mTSContainer").children().length);
//if (lenght == 6) lenght = 7;
//lenght = lenght + 1;
if (parseInt(left) == 0 ) {  $("#" + id + " #mTS_1_buttonLeft").css("background"," grey"); }
else if((parseInt(left) > (( lenght ) * (-184) + 1080)) ){
       $("#" + id + " #mTS_1_buttonLeft").css("background"," rgba(0,0,0,.7)"); $("#"+ id + " .mTSContainer").css('left',left);
      }
else{  $("#" + id + " #mTS_1_buttonRight").css("background"," grey");}
  }
 
  var timerID;
$(document).ready(function () {
   $("#content-6 #mTS_1_buttonRight").hover(function() {
       timerID = setInterval(function(){clickonright('content-6');}, 100);
     }, function() {
       clearInterval(timerID);
     });
   });
 
   $(document).ready(function () {
     $("#content-6 #mTS_1_buttonLeft").hover(function() {
       timerID = setInterval(function(){clickonleft('content-6');}, 100);
     }, function() {
       clearInterval(timerID);
     });
   });
</script><script>
/*  Download ZIP Gallery  */
function deferredAddZip(url, filename, zip) {
var deferred = $.Deferred();
JSZipUtils.getBinaryContent(url, function (err, data) {
if(err) {
deferred.reject(err);
} else {
zip.file(filename, data, {binary:true});
deferred.resolve(data);
}
});
return deferred;
}
 
 
function downloadzippdf(url2) {
 
var zip = new JSZip();
var deferreds = [];
 
$(".mTSThumbContainer a").each(function(){
var name = $(this).attr("href").split('/')[6];
var url=$(this).attr("href");
deferreds.push(deferredAddZip(url, name, zip));
 
});
 
 
$.when.apply($, deferreds).done(function () {
            var blob = zip.generate({type:"blob"});
            // see FileSaver.js
            saveAs(blob, "overview_gallery.zip");
          //  showMessage("done !");
        }).fail(function (err) {
            showError(err);
        });
}
</script><script>
function substitute(id){
  var selector ='#'+id.toString()+' img';
  var temp = $(selector).attr('src');
  $(selector).attr('src',$('.major_img').attr('src'));
  $('.major_img').attr('src',temp);
  $('#thumb_0 img').attr('src',temp);
 
  var selector2 ='#'+id.toString()+' p';
  var temp2 = $(selector2).html();
  if(typeof temp2 === "undefined") {temp2 = "&nbsp;"}
  $(selector2).html($('.major_div p').html());
  $('.major_div p').html(temp2);
  $('#thumb_0 p').html(temp2);
 
  var selector3 ='#'+id.toString()+' a';
  var temp3 = $(selector3).attr('href');
 
  $(selector3).attr('href',($('#thumb_0 a').attr('href')));
 
  $('#thumb_0 a').attr('href',temp3);
 
}
 
function view_major(id){
  //window.alert(id);
  var selector ='#'+id.toString()+' img';
  var temp = $(selector).attr('src');
  //$(selector).attr('src',$('.major_img').attr('src'));
  $('.major_img').attr('src',temp);
  $('#thumb_0 img').attr('src',temp);
 
  var selector2 ='#'+id.toString()+' p';
  var temp2 = $(selector2).html();
  if(typeof temp2 === "undefined") {temp2 = "&nbsp;"}
  //$(selector2).html($('.major_div p').html());
  $('.major_div p').html(temp2);
  $('#thumb_0 p').html(temp2);
 
  var selector3 ='#'+id.toString()+' a';
  var temp3 = $(selector3).attr('href');
  $(selector3).attr('href',($('#thumb_0 a').attr('href')));
  $('#thumb_0 a').attr('href',temp3);
 
  var selector4 ='#'+id.toString();
  var temp4 = $(selector4).attr('data-bsp-li-index');
  $('#thumb_0').attr('data-bsp-li-index',temp4);
}
 
//window.alert("test");
window.onload = view_major("thumb_1");
</script></div>
<p>
&nbsp;</p>
 

 

<style type="text/css">
p.major_caption {
//display:none;
margin-left: 1%;
    margin-right: 1%;
    font-size: 11px;
}
/*
p.major_caption {
    opacity: 1;
    display: none;
}
 
.major_div:hover p {
    -webkit-transition: display 1s linear;
    -moz-transition: display 2s ease-in-out;
    -ms-transition: display 2s ease-in-out;
    -o-transition: display 2s ease-in-out;
    display: block;
    margin-top: -34%;
    z-index: 99;
    position: relative;
    background: black;
    padding: 3% 2%;
    color: #fff;
    width: 92%;
    margin-left: 2%;
    opacity: 0.9;
}
 
.major_div:hover .inside {
    opacity: 0.5;
}*/
 
a#caption_pdf {
    width: 15%;
    float: right;
}
a#button-caption {
    width: 17%;
    float: left;
}
 
.modal-body a{
display: block;
 
}
.mTSThumbContainer p, .mTSThumbContainer a{
  display: none;
}
 
.parent {
  width: 86%;
  min-height: 601px;
  margin-left: 55px;
      padding-top: 2%;
}
 
 
 
a.controls {
    background: grey;
    -moz-border-radius: 48px;
    -webkit-border-radius: 48px;
    border-radius: 48px;
    width: 24px;
    height: 48px;
}
 
a.controls .mTSButtonIconContainer {
/*left: 15px;*/
top: 6px;
}
a#mTS_1_buttonLeft .mTSButtonIcon {
    left: -1px;
}
 
a.controls.next:hover,a.controls.previous:hover{
  background-color: rgba(0,0,0,.7);
}
 
/*-----------------------------------------------------------
Panzoom
-------------------------------------------------------------*/
.panzoom{
/* transform: none !important; */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
 
.buttons {
  padding-left: 11px;
  width: 39px;
  float: left;
  z-index: 99;
  position: absolute;
  margin-top: 40%;
}
 
.buttons button{
  background: transparent;
  border: 0;
  width: 25px;
  height: 25px;
  margin-top: 8px;
}
 
a.previous {
  /*  padding-left: 30px;*/
}
a.next {
  /*  padding-right: 32px;*/
}
 
.zoom-range {
    -webkit-appearance: slider-vertical;
    writing-mode: bt-lr;
    margin-top: 6px;
}
/*-----------------------------------------------------------
Style -- Gallery
-----------------------------------------------------------*/
.hidden{
display: none  !important;
}
 
.modal-dialog {
    width: 800px !important;
    margin: 30px auto;
}
 
.mThumbnailScroller{ -ms-touch-action: none; touch-action: none; /* MSPointer events - direct all pointer events to js */ }
.mThumbnailScroller.mTS_no_scroll, .mThumbnailScroller.mTS_touch_action{ -ms-touch-action: auto; touch-action: auto; }
.mTSWrapper{
position: relative;
overflow: hidden;
height: 100%;
max-width: 100%;
outline: none;
direction: ltr;
}
 
.mTSContainer{
margin: 0;
padding: 0;
overflow: hidden;
}
 
ul.mTSContainer, ol.mTSContainer{ list-style: none; }
 
.mTSThumb,
ul.mTSContainer > li img{ vertical-align: bottom; }
 
.mTS_vertical .mTSContainer{
margin-top: 0 !important;
margin-bottom: 0 !important;
}
 
.mTS_horizontal .mTSContainer{
margin-left: 0 !important;
margin-right: 0 !important;
height: 100%;
}
 
 
.mTSButton {
    width: 15px;
    height: 15px;
    line-height: 20px;
    padding: 8px;
    overflow: hidden;
    text-align: center;
    background-color: #1e364e;
    color: #fff;
    display: inline-block;
    position: absolute;
    top: 0;
    left: -38px;
    opacity: 1;
    -webkit-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
    -moz-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
    -o-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
    -ms-transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
    transition: height 0s ease-out 0s, width 0s ease-out 0s, padding 0s ease-out 0s, opacity .2s ease-out 0s;
    border-radius: 5px 5px 5px 5px;
}
 
/* buttons positioning */
 
.mTSButtonDown{
top: auto;
bottom: 0;
}
 
.mTSButtonRight {
    left: auto;
    right: -46px;
}
 
 
.mTSButtonUp,
.mTSButtonDown{ /* margin is half the button size */
left: 63%;
margin-left: -24px;
}
 
 
.mTSButtonLeft,
.mTSButtonRight{/* margin is half the button size */
top: 51%;
margin-top: -24px;
}
 
.mTSButtonIconContainer{
      display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  overflow: hidden;
  height: 22px;
  top: -13px;
}
 
.mTSButtonIcon{ /* SVG icon */
      display: inline-block;
      fill: #fff;
      position: absolute;
      top: -4px;
      left: 3px;
      width: 19px;
}
 
.mTSButton.mTS-hidden,
.mThumbnailScroller.mTS_no_scroll .mTSButton{
/* hide button effect (fades-out button to zero size) */
opacity: 0;
height: 0;
width: 0;
padding: 0;
-webkit-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
-moz-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
-o-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
-ms-transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
transition: height 0s ease-out .2s, width 0s ease-out .2s, padding 0s ease-out .2s, opacity .2s ease-out;
/* ---------- */
}
 
    .controls .mTSButtonIcon{
      top:2px;
    }
.mTS_horizontal .mTSThumbContainer,
.mTS_horizontal ul.mTSContainer > li{
float: left;
height: 184px;
width: 184px;
border: 1px solid #1e364e !important;
position: relative;
}
 
.mTS-buttons-in{
/* padding: 14px; */
/* background-color: #000; */
}
 
.mTS-buttons-in .mTSButtonIcon{
      fill: #fff;
          left: -3px;
          width: 20px;
          height: 40px;
          top: 1px;
     }
 
.mTS-buttons-in .mTSWrapper,
.mTS-buttons-in .mTSButton{/* background-color: inherit; */}
 
.mTS-buttons-in .mTSButtonLeft,
.mTS-buttons-in .mTSButtonRight{
width: 24px;
height: 48px;
padding: 24px 4px 0 4px;
margin-top: -36px;
}
 
.mTS-buttons-in .mTSButtonUp,
.mTS-buttons-in .mTSButtonDown{
width: 24px;
height: 24px;
padding: 4px 24px;
margin-left: -36px;
}
 
.mTS-buttons-in .mTSButton.mTS-hidden{
height: 0;
width: 0;
padding: 0;
}
 
.mTS-buttons-in .mTSButton:not(.mTS-hidden){ opacity: .4; }
 
.mTS-buttons-in:hover .mTSButton:not(.mTS-hidden){ opacity: 1; }
 
.mTS-buttons-in .mTS_vertical .mTSThumbContainer{ margin: 14px 0; }
 
.mTS-buttons-in .mTS_vertical .mTSThumbContainer:first-child{ margin-top: 0; }
 
.mTS-buttons-in .mTS_vertical .mTSThumbContainer:last-child{ margin-bottom: 0; }
 
 
.mTS-buttons-in .mTS_horizontal .mTSThumbContainer:first-child{ margin-left: 0; }
 
.mTS-buttons-in .mTS_horizontal .mTSThumbContainer:last-child{ margin-right: 0; }
 
.content img{
/* width:180px; */
/* height:180px;
border: 1px solid #1e364e !important; */
height: auto;
max-height: 180px;
max-width: 180px;
position: absolute;
}
.gallery {
    display: block;
    position: relative;
    /* max-width: 180px; */
    /*max-height: 120px;*/
    float: left;
    padding: 3px 6px;
}
 
 
div#st_main {
    /* position: relative; */
    /* margin-left: 201px; */
    /* margin-top: 194px; */
max-width: 940px;
}
.st_overlay{
width:100%;
height:100%;
position:fixed;
top:0px;
left:0px;
background:transparent url(../images/pattern.png) repeat-x bottom left;
opacity:0.3;
}
.st_main img.st_preview{
position:absolute;
left:0px;
top:0px;
width:100%;
 
}
ul.st_navigation {
    /* position: absolute; */
    margin-left: 0px;
    /* width: 100%; */
    /* top: 225px; */
    /* left: -300px; */
    list-style: none;
    padding: 0px;
}
ul.st_navigation>li {
    /* height: 235px !important; */
    float: left;
    clear: both;
    margin-bottom: 10px !important;
    position: relative;
    width: 100%;
    max-width: 645px;
}
 
ul.st_navigation>li span.st_link {
float:left;
clear:both;
margin-bottom:8px;
position:relative;
    background: #1e364e repeat right top;
color: #1d2635;
    border-left: 1px solid #1d2635;
    border-radius: 5px 5px 5px 5px;
}
 
ul.st_navigation>li span.st_link {
height: 36px;
/* background-color:#000;*/
float:left;
position:relative;
line-height:50px;
padding: 0px 20px;
width:100%;
/* -moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;*/
}
ul.st_navigation>li span.st_arrow_down,
ul.st_navigation>li span.st_arrow_up{
    position: absolute;
    margin-left: 15px;
    width: 24px;
    height: 36px;
    cursor: pointer;
    /*  -moz-box-shadow: 0px 0px 2px #000;
    -webkit-box-shadow: 0px 0px 2px #000;
    box-shadow: 0px 0px 2px #000;*/
border-right: 1px solid #1d2635;
    border-radius: 0px 5px 5px 0px;
}
ul.st_navigation>li span.st_arrow_down{
/*background:#000 url(../images/icons/down.png) no-repeat center center;*/
background:  url(https://earth.esa.int/documents/700255/1985313/down.png),#1e364e;
background-repeat: no-repeat,no-repeat;
background-position: center center, center center;
}
ul.st_navigation>li span.st_arrow_up{
/*background:#000 url(../images/icons/up.png) no-repeat center center;*/
background: url(https://earth.esa.int/documents/700255/1985313/up.png),#1e364e;
background-repeat: no-repeat,no-repeat;
background-position: center center, center center;
}
.st_wrapper{
display:block;
position: absolute;
    width:580px;
    height:180px;
    overflow-y:hidden;
top:50px;
    left:24px;
}
.st_thumbs {
    height: 180px;
    margin: 0;
    min-width: 400px !important;
}
.st_thumbs img{
    width: 180px;
    height: 180px;
    float:left;
    margin:3px 3px 0px 0px;
    cursor:pointer;
/*   -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);*/
}
.st_loading{
position:fixed;
top:10px;
right:0px;
background:#000 url(../images/icons/loader.gif) no-repeat 10px 50%;
padding:15px 40px 15px 60px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
opacity:0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.st_about{
display:none;
position:absolute;
top:50px;
    left:0px;
opacity:0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.st_subcontent{
background:#000;
padding:30px;
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;
}
 
span.st_link_sub {
    z-index: 99;
    bottom: 0px;
    position: relative;
    padding: 5px;
    /* margin: 0 0 4px 0; */
    background: #1e364e;
    color: #fff;
    font-size: 13px;
    opacity: 1;
    transition: opacity ease-in-out 0.5s;
    left: 0px;
    cursor: pointer;
    display: -webkit-inline-box;
    display: block;
}
 
.gallery:hover>span.st_link_sub,span.st_link_sub:hover{/* opacity:1; */}
.gallery {
    display: block;
    position: relative;
    /* max-width: 180px; */
    /*max-height: 120px;*/
    float: left;
    height: 100%;
    /* padding: 1px 8px; */
    text-decoration: none;
    /* border: 1px solid #1e364e; */
}
a.title{
display:block;
max-height:35px;
float: left;
text-decoration:none;
color:#fff !important;
font-size:21px;
    margin: -7px 5px 5px 28px;
}
 
 
span.reference{
font-family:Arial;
position:fixed;
left:10px;
bottom:10px;
font-size:11px;
}
span.reference a{
color:#aaa;
text-decoration:none;
margin-right:20px;
}
span.reference a:hover{
color:#ddd;
}
.st_link.portlet-topper {
    cursor: pointer;
}
 
li.galleries:first-child {
    /* top: 11px; */
    /* position: relative; */
    float: left;
    /* z-index: -1; */
    clear: both;
}
 
a.gallery{
background: transparent;
box-shadow: none;
}
 
li.mTSThumbContainer a.gallery:hover{
background: transparent;
}
 
#galleries>li:nth-child(3) li span {
    bottom: 5px;
}
 
li:nth-child(3) #st_main .content li a.gallery  {
    margin-right: 10px;
    /* border: 1px solid red; */
    /* background: red; */
}
 
ul#galleries ul {
    list-style-type: none;
}
 
.content{
    overflow: auto;
    position: relative;
    padding: 0px;
    background-color: #333;
    margin: 20px 0px;
    /*width: 50%;*/
    /* max-width:570px; */
    height: 200px;
    /* float: left; */
  }
.content li{
margin: 4px;
overflow: hidden;
}
.content li a{
display: inline-block;
border: 7px solid rgba(255,255,255,.1);
}
 
#content-6{ background-color: transparent; }
#content-6 .mTSButton{
background-color: rgba(0,0,0,.7);
-moz-border-radius: 48px; -webkit-border-radius: 48px; border-radius: 48px;
}
#content-6 .mTSButtonLeft{ left: 5px; }
#content-6 .mTSButtonRight{ right: 5px; }
 
 
/*-----------------------------------------------------------
Style -- Immagine centrale
-----------------------------------------------------------*/
 
.major_div:hover {
background: #e7e7e7;
//opacity: 0.5;
}
 
.major_div {
/* max-width: 645px;*/
float: left;
margin: auto;
/* margin-bottom: 20px; */
/* background: #e7e7e7; */
width: 100%;
}
 
.inside {
position: relative;
/* border: 1px solid red; */
/* min-height: 630px;
min-width: 447px; */
height: auto;
    width: 100%;
    overflow: auto;
    float: left;
}
 
.inside img {
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
/* position: absolute; */
/* width: 100%; */
display: block;
padding: 15px;
/*height: 100%;*/
}
/*-------------------------------------------------------
Download text and icon
---------------------------------------------------------*/
/*
.maindownload {
    height: 36px;
    display: block;
    float: left;
    margin-left: 38%;
}tw
 
.maindownload p{
float: left;
padding-right: 2px;
}
 
.maindownload img{
float: left;
width: 30px;
padding: 10px;
}*/
 
a.maindownload_img img {
    width: 28px;
}
 
div.downlaod_center {
    /* border: 1px solid; */
    height: 38px;
    /* float: left; */
float: right;
    //width: 132px;
    //margin-left: 40%;
}
 
.maindownload {
    /* height: 36px; */
    /* border: 1px solid red; */
    display: block;
    float: left;
    margin-top: 12px;
    position: relative;
}
 
.modal-body {
          padding:5px !important;
      }
      .modal-content {
          border-radius:0;
      }
      .modal-dialog img {
          text-align:center;
          /* margin:0 auto; */
      }
    .controls{
        width:50px;
        display:block;
        font-size:11px;
        padding-top:8px;
        font-weight:bold;
    }
    .next {
        float:right;
        text-align:right;
    }
.img-responsive{
display: block;
max-width: 100%;
height: auto;
position: absolute;
bottom: 0;
left: 0;
margin: auto;
right: 0;
top: 0;
}</style>
<style type="text/css">
.modal-open{
overflow:hidden}
.modal{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:1050;
display:none;
overflow:hidden;
-webkit-overflow-scrolling:touch;
outline:0}
.modal.fade .modal-dialog{
-webkit-transition:-webkit-transform .3s ease-out;
-o-transition:-o-transform .3s ease-out;
transition:transform .3s ease-out;
-webkit-transform:translate(0,-25%);
-ms-transform:translate(0,-25%);
-o-transform:translate(0,-25%);
transform:translate(0,-25%)}
.modal.in .modal-dialog{
-webkit-transform:translate(0,0);
-ms-transform:translate(0,0);
-o-transform:translate(0,0);
transform:translate(0,0)}
.modal-open .modal{
overflow-x:hidden;
overflow-y:auto}
.modal-dialog{
position:relative;
width:auto;
margin:10px}
.modal-content{
position:relative;
background-color:#fff;
-webkit-background-clip:padding-box;
background-clip:padding-box;
border:1px solid #999;
border:1px solid rgba(0,0,0,.2);
border-radius:6px;
outline:0;
-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);
box-shadow:0 3px 9px rgba(0,0,0,.5)}
.modal-backdrop{
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:1040;
background-color:#000}
.modal-backdrop.fade{
filter:alpha(opacity=0);
opacity:0}
.modal-backdrop.in{
filter:alpha(opacity=50);
opacity:.5}
 
.modal-body{
position:relative;
padding:15px}
 
@media (min-width:768px){
.modal-dialog{
width:600px;
margin:30px auto}
.modal-content{
-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);
box-shadow:0 5px 15px rgba(0,0,0,.5)}
.modal-sm{
width:300px}
}
input[type=range] {
    display: block;
    width: 100%;
}
.zoom-range {
    -webkit-appearance: slider-vertical;
    writing-mode: bt-lr;
    margin-top: 6px;
}
 
button, input {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
 
input {
    line-height: normal;
}
 
button, input{
    margin: 0;
    font: inherit;
    color: inherit;
}
svg:not(:root) {
    overflow: hidden;
}
a{
    box-sizing: border-box;
    color: #b88b00;
    text-decoration: none;
}
 
a:hover {
   color: #b88b00;
   text-decoration: underline;
}
a:hover {
   outline: 0;
}
 
:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 
#label{
  height: 20px;
  clear: both;
  display: block;
  padding-top: 16px;
  text-align: left !important;
  margin-left: 5%;
  font-weight: normal;
  width: 90%;
}
 
#label2{
  height: 20px;
  clear: both;
  display: block;
  padding-top: 16px;
  text-align: left !important;
  margin-left: 5%;
  font-weight: normal;
  width: 90%;
}
 
#label_major_caption{
  height: 20px;
  clear: both;
  display: block;
  /*text-align: left !important;
  margin-left: 1%;
  width: 90%;*/
  margin-right: 1%;
  text-align: right !important;
  font-weight: normal;
}
 
#label_major_caption_hide{
  height: 20px;
  clear: both;
  //display: block;
  /*text-align: left !important;
  margin-left: 1%;
  width: 90%;*/
  margin-right: 1%;
  text-align: right !important;
  font-weight: normal;
}
 
div#caption p {
    padding-left: 40px;
    padding-right: 40px;
}</style>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><!-- Download zip --><script src="https://cdn.rawgit.com/Stuk/jszip-utils/dfdd631c4249bc495d0c335727ee547702812aa5/dist/jszip-utils.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script><script src="https://js.zapjs.com/js/download.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/2.0.5/jquery.panzoom.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script><!--<script src="jquery.bsPhotoGallery.js"></script>--><script>
 
function trig_reset(){
 
$( "button.reset" ).trigger( "click" );
return true;
 
}
 
 
 function zoom(id) {
 
          var $section = $('.box');
 
 
  $section.find('.panzoom').panzoom({
            $zoomIn: $section.find(".zoom-in"),
            $zoomOut: $section.find(".zoom-out"),
            $zoomRange: $section.find(".zoom-range"),
            $reset: $section.find(".reset")
          });
 
          var $panzoom = $section.find('.panzoom').panzoom();
          $panzoom.parent().on('mousewheel.focal', function( e ) {
            e.preventDefault();
            var delta = e.delta || e.originalEvent.wheelDelta;
            var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
            $panzoom.panzoom('zoom', zoomOut, {
              increment: 0.1,
              animate: false,
              focal: e
            });
          });
        }
</script><script>
(function($) {
  "use strict";
  $.fn.bsPhotoGallery = function(options) {
 
      var settings = $.extend({}, $.fn.bsPhotoGallery.defaults, options);
      var id = generateId();
      var classesString = settings.classes;
      var classesArray = classesString.split(" ");
      var clicked = {};
 
      function getCurrentUl(){
        return 'div[data-bsp-ul-id="'+clicked.ulId+'"][data-bsp-ul-index="'+clicked.ulIndex+'"]';
      }
 
  function generateId() {
        //http://fiznool.com/blog/2014/11/16/short-id-generation-in-javascript/
        var ALPHABET = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        var ID_LENGTH = 4;
        var out = '';
        for (var i = 0; i < ID_LENGTH; i++) {
          out += ALPHABET.charAt(Math.floor(Math.random() * ALPHABET.length));
        }
        return 'bsp-'+out;
      }
 
  function createModalWrap(){
 
        if($('#bsPhotoGalleryModal').length !== 0){
          return false;
        }
 
        var modal = '';
        modal += '<div class="modal box fade" id="bsPhotoGalleryModal" tabindex="-1" role="dialog"';
        modal += 'aria-labelledby="myModalLabel" aria-hidden="true">';
        modal += '<div class="modal-dialog">'
        modal +='<div class="modal-content">';
        modal += '<div class="buttons">';
        modal += '<button class="zoom-in"><img src="https://earth.esa.int/documents/700255/1985313/zoom_in_2.jpg" style="width:25px;height:25px;position: relative;top: -25%;"></button>';
        modal += '<input class="zoom-range" max="5" min="0.4" step="0.05" type="range" orient="vertical">';
        modal += '<button class="zoom-out"><img src="https://earth.esa.int/documents/700255/1985313/zoom_out_2.jpg" style="width:25px;height:25px;position: relative;top: -25%;"></button>';
        modal += '<button class="reset"><img src="https://earth.esa.int/documents/700255/1985313/reset.jpg" style="width:25px;height:25px;position: relative;top: -25%;"></button>';
        modal += '</div>';
        modal += '<div class="modal-body"  >';
        modal += '</div>';
        modal += '</div></div></div>';
        $('body').append(modal);
 
      }
 
  function showHideControls(){
    var total = $(getCurrentUl()+' div[data-bsp-li-index]').length;
 
    if(total === clicked.nextImg){
    $('a.next').hide();
    }else{
    $('a.next').show()
    }
    /*if(clicked.prevImg === -1){*/
if(clicked.prevImg <= 0){
    $('a.previous').hide();
    }else{
    $('a.previous').show()
    }
    }
 
  function showModal(){
/*
          var src = $(this).find('img').attr('src');
          var largeImg = $(this).find('img').attr('data-bsp-large-src');
*/
          var src = $('div.mTSThumbContainer').find('img').attr('src');
          var largeImg = $('div.mTSThumbContainer').find('img').attr('data-bsp-large-src');
          if(typeof largeImg === 'string'){
                src = largeImg;
          }
          //var index = $(this).attr('data-bsp-li-index');
          //var ulIndex = $(this).parent('#mTS_1_container').attr('data-bsp-ul-index');
          //var ulId = $(this).parent('#mTS_1_container').attr('data-bsp-ul-id');
 
          var index = $('div.mTSThumbContainer').attr('data-bsp-li-index');
          var ulIndex = $('div.mTSThumbContainer').parent('#mTS_1_container').attr('data-bsp-ul-index');
          var ulId = $('div.mTSThumbContainer').parent('#mTS_1_container').attr('data-bsp-ul-id');
 
 
          var caption = $('div.mTSThumbContainer').find('p').html() ;
          var pdf = $('div.mTSThumbContainer').find('a').attr('href');
          var id_thum = $('div.mTSThumbContainer').attr('id');
 
          clicked.img = src;
          clicked.prevImg = parseInt(index) - parseInt(1);
      clicked.nextImg = parseInt(index) + parseInt(1);
          clicked.ulIndex = ulIndex;
          clicked.ulId = ulId;
 
          $('#bsPhotoGalleryModal').modal();
 
          var html = '';
          var img = '<div class="parent" style="overflow: hidden; position: relative;"><div class="panzoom" style="backface-visibility: hidden; transform-origin: 50% 50% 0px; cursor: move; transform: none !important;"><img src="' + clicked.img + '" class="img-responsive" /></div></div>';
          html += '<div style="height: 25px;clear: both;display: block;top: 231px;position: absolute;width: 99%;z-index: 99;">';
          html += '<a class="controls next" data-bsp-id="'+clicked.ulId+'" href="'+ (clicked.nextImg) + '" onclick="return trig_reset();">';
          html += '<span class="mTSButtonIconContainer"><svg class="mTSButtonIcon" preserveAspectRatio="xMinYMin meet" version="1.1" viewBox="0 0 24 24"><g><line opacity="" stroke="#449FDB" stroke-width="1" x1="" x2="" y1="" y2=""></line></g><path d="M14.561 20.561l7.5-7.5c0.586-0.586 0.586-1.536 0-2.121l-7.5-7.5c-0.586-0.586-1.536-0.586-2.121 0s-0.586 1.536 0 2.121l4.939 4.939h-14.379c-0.828 0-1.5 0.672-1.5 1.5s0.672 1.5 1.5 1.5h14.379l-4.939 4.939c-0.293 0.293-0.439 0.677-0.439 1.061s0.146 0.768 0.439 1.061c0.586 0.586 1.536 0.586 2.121 0z"></path></svg></span>';
          html += '</a>';
          html += '<a class="controls previous" data-bsp-id="'+clicked.ulId+'" href="' + (clicked.prevImg) + '" onclick="return trig_reset();">';
          html += '<span class="mTSButtonIconContainer"><svg class="mTSButtonIcon" preserveAspectRatio="xMinYMin meet" version="1.1" viewBox="0 0 24 24"><g><line opacity="" stroke="#449FDB" stroke-width="1" x1="" x2="" y1="" y2=""></line></g><path d="M9.439 3.439l-7.5 7.5c-0.586 0.586-0.586 1.536 0 2.121l7.5 7.5c0.586 0.586 1.536 0.586 2.121 0s0.586-1.536 0-2.121l-4.939-4.939h14.379c0.828 0 1.5-0.672 1.5-1.5s-0.672-1.5-1.5-1.5h-14.379l4.939-4.939c0.293-0.293 0.439-0.677 0.439-1.061s-0.146-0.768-0.439-1.061c-0.586-0.586-1.536-0.586-2.121 0z"></path></svg></span>';
          html += '</a>';
          html += '</div>';
          html += '<span class="glyphicon glyphicon-remove-circle" style="cursor: pointer;position: absolute; right: -22px;top: -23px;font-size: 24px;color: #fff;text-shadow: 1px 1px 18px #000;border: 5px solid #fff;border-radius: 30px;padding: 0px 4px 0px 3px;"><i class="fa fa-times"></i></span>';
          html += img;
 
          html += '<div id="label">';
          html += '<a id="button-caption" onclick="$(\'#caption\').removeClass(\'hidden\');$(\'#button-caption\').addClass(\'hidden\');$(\'#label2\').removeClass(\'hidden\');">View image caption <i class="fa fa-caret-down" aria-hidden="true"></i></a>';
          html += '<a id="caption_pdf" target="_blank" href="'+pdf+'">Download PDF <i class="fa fa-download" aria-hidden="true"></i></a>';
          html += '</div>';
 
 
 
 
          html += '<div id="caption" class="hidden" style="clear:both;display:block;padding-top:8px;margin-bottom: 0px;"><p>'+caption+'</p></div><div id="label2" class="hidden"><a onclick="$(\'#label2\').addClass(\'hidden\');$(\'#button-caption\').removeClass(\'hidden\');$(\'#caption\').addClass(\'hidden\');">Hide image caption <i class="fa fa-caret-up" aria-hidden="true"></i></a></div>';
          $('#bsPhotoGalleryModal .modal-body').html(html);
          if(caption === "&nbsp;"){
              $("#button-caption").addClass('hidden');
          }
          zoom(id_thum);
          $('.glyphicon-remove-circle').on('click', closeModal);
          showHideControls();
 
      }
 
  function closeModal(){
        $('#bsPhotoGalleryModal').modal('hide');
      }
 
  function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
  }
 
      function nextPrevHandler(){
 
          var ul = $(getCurrentUl());
          var index = $(this).attr('href');
 
          var src = ul.find('div[data-bsp-li-index="'+index+'"] img').attr('src');
          var largeImg = ul.find('div[data-bsp-li-index="'+index+'"] img').attr('data-bsp-large-src');
 
          var caption2 =  ul.find('div[data-bsp-li-index="'+index+'"] p').html();
          var pdf2 =  ul.find('div[data-bsp-li-index="'+index+'"] a').attr('href');
 
          if(typeof largeImg === 'string'){
                src = largeImg;
          }
          $('.modal-body img').attr('src', src);
 
          if (typeof caption2 === "undefined") {
              caption2 = '&nbsp;';
              $('#button-caption').addClass('hidden');
          }
          //{
          //  $('#button-caption').removeClass('hidden');
          //}
 
          if(caption2 === "&nbsp;"){
              $("#button-caption").addClass('hidden');
  $("#label2").addClass('hidden');
          }else{
    var el = document.getElementById('caption');
//alert(hasClass(el, 'hidden'));
if(hasClass(el, 'hidden')){
$("#button-caption").removeClass('hidden');
$("#label2").addClass('hidden');
}else{
$("#button-caption").addClass('hidden');
$("#label2").removeClass('hidden');
}
  }
 
          $('.modal-body p').html(caption2);
          clicked.prevImg = parseInt(index) - 1;
          clicked.nextImg = parseInt(clicked.prevImg) + 2;
          $('.modal-body a#caption_pdf').attr('href',pdf2);
 
          if($(this).hasClass('previous')){
              $(this).attr('href', clicked.prevImg);
              $('a.next').attr('href', clicked.nextImg);
          }else{
              $(this).attr('href', clicked.nextImg);
              $('a.previous').attr('href', clicked.prevImg);
          }
          // console.log(clicked);
        showHideControls();
        return false;
      }
 
  function clearModalContent(){
        $('#bsPhotoGalleryModal .modal-body').html('');
        clicked = {};
      }
 
 
 
      this.each(function(i){
        //ul
        var items = $(this).find('div.mTSThumbContainer');
        $(this).attr('data-bsp-ul-id', id);
        $(this).attr('data-bsp-ul-index', i);
 
        items.each(function(x){
          //insertClearFix(this,x);
          $(this).addClass(classesString);
  if (x == 0)
$(this).attr('data-bsp-li-index', 1);
  else
$(this).attr('data-bsp-li-index', x);
          $(this).find('img').addClass('img-responsive');
          if(settings.hasModal === true){
            $(this).addClass('bspHasModal');
            //$(this).on('click', showModal);
            $('.major_img').on('click', showModal);
          }
        });
      })
 
      if(settings.hasModal === true){
        //this is for the next / previous buttons
        $(document).on('click', 'a.controls[data-bsp-id="'+id+'"]', nextPrevHandler);
        $(document).on('hidden.bs.modal', '#bsPhotoGalleryModal', clearModalContent);
        //start init methods
        createModalWrap();
      }
 
      return this;
  };
  /*defaults*/
  $.fn.bsPhotoGallery.defaults = {
    'classes' : '',
    'hasModal' : true
  }
 
 
}(jQuery));
 
 
 
</script><script>
  $(document).ready(function(){
    $('#mTS_1_container').bsPhotoGallery({
      "classes" : "",
      "hasModal" : true
    });
  });
</script><!-- Zoom -->
<div id="content">
<div class="textblock">
<div class="caption_major">
<p>
Soil Moisture retrieval performances are presented in the figures and videos collection available here.</p>
<p>
&nbsp;</p>
<h4>
Chapter Editor</h4>
<p>
IDEAS+, SMOS team</p>
</div>
</div>
<div class="downlaod_center">
<a class="maindownload" id="ignorePDF" onclick="downloadzippdf('#2img0')" style="cursor:pointer;display:block;">Download Gallery</a> <!-- <a class="maindownload_img" id="ignorePDF" onclick="downloadzippdf('#2img0')" style="cursor:pointer;display:block;"> --><img src="https://earth.esa.int/documents/700255/2519787/zip-file.jpg/" width="38px" /> <!-- </a> --></div>
<p>
&nbsp;</p>
<!--Add Gallery Images in Grid Layout -->
<div class="st_main" id="st_main">
<div class="st_navigation" id="st_nav galleries">
<div class="album current" id="aui_3_4_0_1_464">
<div class="content mThumbnailScroller _mTS_1 mTS-buttons-in auto-mTS-x-hover-50-none" id="content-6">
<div class="mTSWrapper mTS_horizontal" id="mTS_1" style="width: 940px;">
<div class="mTSContainer" id="mTS_1_container" style="top: 0px; position: relative; width: 3000px; left: 0px;">
<div class="mTSThumbContainer" id="thumb_0" style="display:none;">
<img class="img-responsive" src="https://earth.esa.int/documents/700255/3251206/1.png" /> <a href="https://earth.esa.int/documents/700255/3251206/1.pdf">&nbsp;</a>
<p class="muted text-center">
thumb_0</p>
</div>
<div class="mTSThumbContainer" id="thumb_1" onclick="view_major($(this).attr('id'))">
<img class="img-responsive" src="/documents/700255/3251206/1.png/12c482b2-8512-40a1-8616-016a80d3926c?t=1508148006000" style="width: 721px; height: 803px;" /> <a href="https://earth.esa.int/documents/700255/3251206/1-Overview.pdf">&nbsp;</a>
<p class="muted text-center">
Evolution of number of successful retrieval of the surface dielectric constant per retrieval case for descending orbit direction since June 2010. For cases: Soil and Forest cover soil moisture parameter is also successfully retrieved. For all others retrieval cases additional parameters like optical depth or surface roughness, surface temperature might be retrieved.</p>
</div>
<div class="mTSThumbContainer" id="thumb_2" onclick="view_major($(this).attr('id'))">
<img class="img-responsive" src="/documents/700255/3251206/2.png/800abdfe-eeaa-4068-a19c-90c7314d3c38?t=1508148020000" style="width: 2400px; height: 1323px;" /> <a href="https://earth.esa.int/documents/700255/2519835/2.pdf">&nbsp;</a>
<p class="muted text-center">
Evolution of number of successful retrieval of the surface dielectric constant per retrieval case for descending orbit direction since June 2010. For cases: Soil and Forest cover soil moisture parameter is also successfully retrieved. For all others retrieval cases additional parameters like optical depth or surface roughness, surface temperature might be retrieved.</p>
</div>
<div class="mTSThumbContainer" id="thumb_3" onclick="view_major($(this).attr('id'))">
<img class="img-responsive" src="/documents/700255/3251206/3.png" style="width: 721px; height: 465px;" /> <a href="https://earth.esa.int/documents/700255/2519835/3.pdf">&nbsp;</a>
<p class="muted text-center">
Evolution of number of successful retrieval of the surface dielectric constant per retrieval case for descending orbit direction since June 2010. For cases: Soil and Forest cover soil moisture parameter is also successfully retrieved. For all others retrieval cases additional parameters like optical depth or surface roughness, surface temperature might be retrieved.</p>
</div>
<div class="mTSThumbContainer" id="thumb_4" onclick="view_major($(this).attr('id'))">
<img class="img-responsive" src="/documents/700255/3251206/4.png/" style="width: 721px; height: 465px;" /> <a href="https://earth.esa.int/documents/700255/321206/4.pdf">&nbsp;</a>
<p class="muted text-center">
Evolution of number of successful retrieval of the surface dielectric constant per retrieval case for descending orbit direction since June 2010. For cases: Soil and Forest cover soil moisture parameter is also successfully retrieved. For all others retrieval cases additional parameters like optical depth or surface roughness, surface temperature might be retrieved.</p>
</div>
</div>
</div>
<a class="mTSButton mTSButtonLeft" id="mTS_1_buttonLeft" onclick="clickonleft(this.parentNode.id)" style="background: grey;"> <span class="mTSButtonIconContainer"> <svg class="mTSButtonIcon" preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 24 24"><g><line opacity="" stroke="#449FDB" stroke-width="1" x1="" x2="" y1="" y2=""></line></g><path d="M9.439 3.439l-7.5 7.5c-0.586 0.586-0.586 1.536 0 2.121l7.5 7.5c0.586 0.586 1.536 0.586 2.121 0s0.586-1.536 0-2.121l-4.939-4.939h14.379c0.828 0 1.5-0.672 1.5-1.5s-0.672-1.5-1.5-1.5h-14.379l4.939-4.939c0.293-0.293 0.439-0.677 0.439-1.061s-0.146-0.768-0.439-1.061c-0.586-0.586-1.536-0.586-2.121 0z"></path> </svg> </span> </a> <a class="mTSButton mTSButtonRight" id="mTS_1_buttonRight" onclick="clickonright(this.parentNode.id)"> <span class="mTSButtonIconContainer"> <svg class="mTSButtonIcon" preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 24 24"><g><line opacity="" stroke="#449FDB" stroke-width="1" x1="" x2="" y1="" y2=""></line></g><path d="M14.561 20.561l7.5-7.5c0.586-0.586 0.586-1.536 0-2.121l-7.5-7.5c-0.586-0.586-1.536-0.586-2.121 0s-0.586 1.536 0 2.121l4.939 4.939h-14.379c-0.828 0-1.5 0.672-1.5 1.5s0.672 1.5 1.5 1.5h14.379l-4.939 4.939c-0.293 0.293-0.439 0.677-0.439 1.061s0.146 0.768 0.439 1.061c0.586 0.586 1.536 0.586 2.121 0z"></path>3 </svg> </span> </a></div>
</div>
</div>
</div>
</div>
<div class="major_div ">
<div class="inside" href="#2img0">
<img alt="" class="major_img" src="/documents/700255/3225978/1.jpg/8d25bd48-b77a-4024-b384-d49c6b1e8d11?t=1507195385723" style="width: 721px; height: 465px;" /></div>
<!-- <input type="button" id="button-caption_main" value="Caption"/> -->
<div id="label_major_caption">
<a id="button-caption_main">View image caption </a></div>
<p class="major_caption" hidden="true" id="major_caption_id">
&nbsp;</p>
<div hidden="true" id="label_major_caption_hide">
<a id="button-caption_main_hide">Hide image caption </a></div>
</div>
<div>
<p>
&nbsp;</p>
<div id="references_caption">
<a id="button-references">References and further readings </a></div>
<div class="readmore_major_caption" hidden="true" id="references_caption_id">
<h4>
References and further readings</h4>
<ul>
<li>
xxxx, author data etc .</li>
<li>
xxxx, author data etc .</li>
<li>
xxxx, author data etc .</li>
<li>
xxxx, author data etc .</li>
<li>
xxxx, author data etc .</li>
<li>
xxxx, author data etc .</li>
</ul>
</div>
<div hidden="true" id="references_hide">
<a id="button-references_hide">Hide </a></div>
<script>
/*$("#bottone").click(function () {*/
$("#button-caption_main").click(function () {
  $("#major_caption_id").toggle("slow");
  $("#label_major_caption").toggle("slow");
  $("#label_major_caption_hide").toggle("slow");
});
 
$("#button-caption_main_hide").click(function () {
  $("#label_major_caption").toggle("slow");
  $("#major_caption_id").toggle("slow");
  $("#label_major_caption_hide").toggle("slow");
});
 
/*$("#bottone").click(function () {*/
$("#button-readmore_caption_main").click(function () {
  $("#readmore_major_caption_id").toggle("slow");
  $("#readmore_major_caption").toggle("slow");
  $("#readmore_major_caption_hide").toggle("slow");
});
 
$("#button-readmore_caption_main_hide").click(function () {
  $("#readmore_major_caption").toggle("slow");
  $("#readmore_major_caption_id").toggle("slow");
  $("#readmore_major_caption_hide").toggle("slow");
});
 
$("#button-references").click(function () {
  $("#references_caption_id").toggle("slow");
  $("#references_caption").toggle("slow");
  $("#references_hide").toggle("slow");
});
 
$("#button-references_hide").click(function () {
  $("#references_caption").toggle("slow");
  $("#references_caption_id").toggle("slow");
  $("#references_hide").toggle("slow");
});
</script><script>
 
/*Gallery*/
 
  $( document ).ready(function() {
 
  $("#content-6>div").css('width' ,(parseInt($("#content-6 .mTSContainer").children().length)*196 ));
 
  $("#content-6 #mTS_1_buttonLeft").css("background"," grey");
});
 
  function clickonleft(id){
   var left = parseInt($("#"+ id + " .mTSContainer").css('left'))+25;
if(parseInt(left) < 25){  $("#" + id + " #mTS_1_buttonRight").css("background"," rgba(0,0,0,.7)"); $("#"+ id + " .mTSContainer").css('left',left); }
else{  $("#" + id +" #mTS_1_buttonLeft").css("background"," grey");}
  }
function clickonright(id){
  var left = parseInt($("#"+ id + " .mTSContainer").css('left'))-25;
    var   lenght = parseInt($("#"+ id + " .mTSContainer").children().length);
//if (lenght == 6) lenght = 7;
//lenght = lenght + 1;
if (parseInt(left) == 0 ) {  $("#" + id + " #mTS_1_buttonLeft").css("background"," grey"); }
else if((parseInt(left) > (( lenght ) * (-184) + 1080)) ){
       $("#" + id + " #mTS_1_buttonLeft").css("background"," rgba(0,0,0,.7)"); $("#"+ id + " .mTSContainer").css('left',left);
      }
else{  $("#" + id + " #mTS_1_buttonRight").css("background"," grey");}
  }
 
  var timerID;
$(document).ready(function () {
   $("#content-6 #mTS_1_buttonRight").hover(function() {
       timerID = setInterval(function(){clickonright('content-6');}, 100);
     }, function() {
       clearInterval(timerID);
     });
   });
 
   $(document).ready(function () {
     $("#content-6 #mTS_1_buttonLeft").hover(function() {
       timerID = setInterval(function(){clickonleft('content-6');}, 100);
     }, function() {
       clearInterval(timerID);
     });
   });
</script><script>
/*  Download ZIP Gallery  */
function deferredAddZip(url, filename, zip) {
var deferred = $.Deferred();
JSZipUtils.getBinaryContent(url, function (err, data) {
if(err) {
deferred.reject(err);
} else {
zip.file(filename, data, {binary:true});
deferred.resolve(data);
}
});
return deferred;
}
 
 
function downloadzippdf(url2) {
 
var zip = new JSZip();
var deferreds = [];
 
$(".mTSThumbContainer a").each(function(){
var name = $(this).attr("href").split('/')[6];
var url=$(this).attr("href");
deferreds.push(deferredAddZip(url, name, zip));
 
});
 
 
$.when.apply($, deferreds).done(function () {
            var blob = zip.generate({type:"blob"});
            // see FileSaver.js
            saveAs(blob, "overview_gallery.zip");
          //  showMessage("done !");
        }).fail(function (err) {
            showError(err);
        });
}
</script><script>
function substitute(id){
  var selector ='#'+id.toString()+' img';
  var temp = $(selector).attr('src');
  $(selector).attr('src',$('.major_img').attr('src'));
  $('.major_img').attr('src',temp);
  $('#thumb_0 img').attr('src',temp);
 
  var selector2 ='#'+id.toString()+' p';
  var temp2 = $(selector2).html();
  if(typeof temp2 === "undefined") {temp2 = "&nbsp;"}
  $(selector2).html($('.major_div p').html());
  $('.major_div p').html(temp2);
  $('#thumb_0 p').html(temp2);
 
  var selector3 ='#'+id.toString()+' a';
  var temp3 = $(selector3).attr('href');
 
  $(selector3).attr('href',($('#thumb_0 a').attr('href')));
 
  $('#thumb_0 a').attr('href',temp3);
 
}
 
function view_major(id){
  //window.alert(id);
  var selector ='#'+id.toString()+' img';
  var temp = $(selector).attr('src');
  //$(selector).attr('src',$('.major_img').attr('src'));
  $('.major_img').attr('src',temp);
  $('#thumb_0 img').attr('src',temp);
 
  var selector2 ='#'+id.toString()+' p';
  var temp2 = $(selector2).html();
  if(typeof temp2 === "undefined") {temp2 = "&nbsp;"}
  //$(selector2).html($('.major_div p').html());
  $('.major_div p').html(temp2);
  $('#thumb_0 p').html(temp2);
 
  var selector3 ='#'+id.toString()+' a';
  var temp3 = $(selector3).attr('href');
  $(selector3).attr('href',($('#thumb_0 a').attr('href')));
  $('#thumb_0 a').attr('href',temp3);
 
  var selector4 ='#'+id.toString();
  var temp4 = $(selector4).attr('data-bsp-li-index');
  $('#thumb_0').attr('data-bsp-li-index',temp4);
}
 
//window.alert("test");
window.onload = view_major("thumb_1");
</script></div>
<p>
&nbsp;</p>
 
Minimize Soil Moisture ASC