/**
* @author    JNConsult.nicoara.ch http://JNConsult.nicoara.ch
* @copyright Copyright (C) Joomla.com. All rights reserved.
* @license   Joomla.com GPL License
*/
/*==============================MYCUSTOM CSS==============================*/
/*** mycustom.css ***/
/*** ============ ***/
/***jnc adds:
    - style class demo-env-slider for JSN ImageShow with protostar template
    - style class mod-bg-color-1 for a solid background color blue-marine
 ***/

div.demo-env-slider{
  margin-top: 0;   /* 20px 15px 0 */
  background-color: #cce5ff !important;  /* DOES NOT WORK */
}
div.mod-bg-color-1{
  margin-top: 0;   /* 20px 15px 0 */
  background-color: #cce5ff !important;  /* */
}

/***jnc adds: (25.05.2016)
/* ========= Floating Image with an explaining line below (reference,...) ========== */
/*** --- Right floating ---***
    - style class img-w-ref-floatright for a right-floating block image+reference
      (eg. reference: image source attribution to...)
    - and img-reference for styling the image reference
 ***/
div.img-w-ref-floatright {
  float: right;
  border: 2px solid #ccc;
  /*overflow: hidden;*/ /* no need, but for img-zoom */
}
div.img-w-ref-floatright img {
  margin-right: auto; 
  margin-left: auto; 
  display: block;
  /*float: right;*//*leads to ref on image's left side and following <p> text below the image*/
}
div.img-w-ref-floatright .img-reference {
  font-size: 0.8em;
  text-align: center; 
  margin-bottom: 2px;
  display: block;
  /*float: right;*//*property does not matter*/
}
/* ========= Responsive Images (transform) ========== */
/* Class: img_zoom copied from JSN Dona custom_rest.css
          --------                                    */
/*NOTE: touch as replacement of hover on mobile dev does not work correctly: image remains zoomed
        whereas other transforms (as rotate) do work ok.
  FIX: add in the element's div after the class declaration the empty scripts ontouchstart and ontouchend, eg.:
      <div class="img-zoom" ontouchstart ontouchend> ... </div>
      combined with a style for element's :active
  Works well on iOS, less on Android. See details in jnconsult3_sitecontent.docx
*/
.img-zoom *,
.img-zoom *:before,
.img-zoom *:after { 
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/**/
.img-zoom {
  overflow: hidden;/**/
  max-width: 100%;
}
.img-zoom img {
  border: 0;
  outline: none;
  /*max-width: 100%;
  width: auto\9;
  height: auto;
  display: block;*/
}
.img-zoom img {   /*  interpolation algorithm for scaling an image. http://help.dottoro.com/lcasdhhx.php*/
  -ms-interpolation-mode: bicubic;
  image-rendering: optimizeQuality;
}
.img-zoom a {
  /*vertical-align: middle;*/
  /*display: inline-block;*/ /* on transform leads to "no float" ie. image and text on 2 lines*/
  /*display: block;*/        /*              leads to an image shift left (no centering anymore) ??*/
  display: inline;           /*              floating ok*/
  max-width: 100%;
}
/*.img-zoom a,*/ /*with style on a: img is contained in a ->transition twice, irregulary */
.img-zoom img {
  -ms-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.img-zoom a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
/*                      NO effect on fixing the 'touch' problem on mobile dev!*/
.img-zoom a:active,
.img-zoom img:active {
  cursor: pointer;
  -ms-transform: scale(1.0);
  -moz-transform: scale(1.0);
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
}

/*.img-zoom a:hover,*/ /*with style on a: img is contained in a ->transform twice, irregulary */
.img-zoom img:hover {
  cursor: pointer;
 /**/
  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
 
 /*
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg); 
  */
}
/* as done in JSN Dona demo data (see custom.css. to cope with smartphones partially supporting transform?
                                 (see caniuse.com/#feat=transforms2d, caniuse.com/#feat=transforms3d     */
/*                           DOES NOT work! see also comment on FIX above */
.img-zoom img:hover:before,
.img-zoom img:hover:after {
 /*
  -ms-transform: scale(1.0);
  -moz-transform: scale(1.0);
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
  */
  display: none !important; /* cf. joomlashine support topic 'how do more effects on the image mouseover'*/
}

/** NAVIGATION BUTTONS **/
/** ------------------ **/
/** 'goback' button (as input of type 'submit' **/
/** --------------- **/
div.btn-goback input {
  background: transparent url("../../../images/arrowBackward16.png") no-repeat center center; /* img file in <siteroot>/immages/)*/
  width: 18px;
  height: 18px;
  cursor: pointer;
  border: none;
}
/**/
/** 'goto' button (as :after pseudoelement)**/
/** ------------- **/
div.goto-after-img a {
  /* NO need */
}
div.goto-after-img a:after {
  content: "";
  padding: 1px 20px 1px 5px;  /* right padding to get space for the bg.image*/
  background: transparent url("../../../images/arrowForward16.png") no-repeat center center;
}