/*
  Fully reponsive images. These rely on JS in ssio.js.
 .img-fully-reponsive must not contain a border, padding or margin as this would impact the size computation in resizeImg (in ssio.js).
*/

.respimg-border {
  margin: auto;
}

.respimg-crop {
  width: 100%;
  height: 100%;
	
	overflow: hidden;
  line-height: 0px;
  text-align: left; /* This overrides the text-align inherited from the container. Inheriting "center" clashes with margin-right: -10000px */
}

.respimg-img {
  position: relative;
  
  /* This ensures that the size of the image (as set by respimg.js) is not taken into account 
     when computing the size of the .respimg. We need it's real size (as enforced top-bottom) in order
     to know how to shrink the img. */ 
  margin-right: -10000px;
  margin-bottom: -10000px;
  vertical-align: top;
  display: none;
}

.respimg-img.src-selected {
	display: inline-block;
}


/* This is styling of responsive image as a floating figure with caption. */
.figure {
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 5px;
  border: solid 1px #CACACA;
  -moz-box-shadow: 1px 1px 2px #999;
  -webkit-box-shadow: 1px 1px 2px #999;
  box-shadow: 1px 1px 2px #999;

  /* Normally the script should adapt. However, it seems that there is some problem with jQuery not detecting border-box
     if ssio_embed=1 (https://beta.sathyasai.de/gedankefuerdentag?ssio_embed=1). Setting box-sizing to content-box
     circumvents this problem.
   */
  box-sizing: content-box;
}

.figure:first-child {
	margin-top: 0px;
}

.figure-left, .figure-right {
  width: 40%;
  min-width: 260px;
  margin-top: 0px;
}

.figure-left {
  float: left;
  margin-right: 15px;
}

.figure-right {
  float: right;
  margin-left: 15px;
}

.figure-center {
		margin-left: auto;
		margin-right: auto;
}

.figure .caption {
  color: #555;
  background-color: #E8E8E8;
  text-align: center;
  font-size: 100%;
  padding: 5px;
}


.figure .respimg {
  widht: 100%;
  height: 100%;
  margin: auto; /* This is here to center the div in case when max-width and max-height is used and the actual figure width/height is bigger. */
}

.figure.figure-left .respimg-crop, .figure.figure-right .respimg-crop {
  max-height: 300px;
}

.figure.figure-center .respimg-crop {
  max-height: 400px;
}