/**
 * Formatting for images, audio and video content
 */

/* Standard defaults */
img {
  max-width: 100%;
  height: auto;
  width: auto;    /* Correct IE 8 does not scaling image height when resized. */
  vertical-align: bottom;
}

audio  {
	vertical-align: middle;
	max-width: 100%;
}

video,
iframe  {
	max-width: 100%;
}
 
/* Images inserted by the Embed Media button in the CKeditor */ 
.ck-content .drupal-media-style-align-center {
	max-width: 100%;
}

.centre {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Image sizing and positioning */
.context-whos-who table img  {			/* Who's Who photos */
	float: right;
	height: 200px;
	width: 200px;
	margin-left: 1.5rem;
	margin-top: 0.25rem;
}

.facebook  /* Social media logos as displayed in Footer region */  {
  max-width: 48px;  
}

/* With these styles we need to work out which are actually used */
.max-width-500 /* Mostly for old photos or cropped versions of width 501-599px where uniform presentation is desirable */ {
  width: 500px;
}

.max-width-600 /* Posters or photos of width 601-719px where uniform presentation is desirable */ {
  width: 600px;
}

.max-width-720 /* Photos of width in 721-799px range where uniform presentation is desirable */ {
  width: 720px;
}

.max-width-200 /* Used for CofE logo in footer and also some bookcovers */ {
  width: 200px;
}

.portrait /* Posters or photos presented in portrait */ {
  width: 400px;
}

.node-event-icons img  {
  display: block;
  margin: auto;
}

.lookwhostalking  /* LWT logo as displayed on the LWT page */  {
  width: 160px;  
  margin: 0.5rem;
}

.bookcovers  /* images on the Books by Stephen Kuhrt page */  {
  width: 160px;  
  margin: 0 0.5rem 0.5rem 0.5rem;
}

.bookcovers-240 /* Used for higher quality bookcovers */ {
  width: 240px;  
  margin: 0 0.5rem 0.5rem 0.5rem;
}

.section-poster .node-type-poster img  {
  padding-top: 1rem;
}

.section-group .view img  {
  padding: 0.75rem;
}

.section-whos-who .node-page img,
.section-our-mission .node-page img  {
  padding-left: 1rem;
}

.view-group-events img {
  min-width: 120px;
  max-width: 132px;
}

.node--type-ccnm-group .field--name-field-ccnm-group-poster img,
.node--type-event-icons img,
.section-sermons .view-header img,
.section-preaching .view-header img  {
  display: block;
  margin: auto;
}

.views-field-field-ccnm-group-logo img  {
	max-width: 160px;
	padding: 0.25rem 0.5rem 0.25rem 0.25rem;
}

.field--name-field-ccnm-group-poster  {
  padding: 0.5rem;
}

.views-field-field-mp3-audio .file  img {
  display: none;
}

/* Service logo on sermon series page */
.page-node-type-ccnm-sermon-series .field--name-field-media-image {
	margin-bottom: 0.5rem;
}

/* Navigation arrows in CCNM history menu */
.navigation img,
.history-nav img {
	width: 24px;
}

/* Media library content */
.media--type-image  {
	margin-top: 1rem;
	width: fit-content;
}

td .media--type-image  {
	margin: 0.25rem;
}

td .media--type-image img {
	vertical-align: middle;
}

/* audio files inserted from the media library - width should be 100% and centred */
.media--type-remote-video iframe,
article .field__item audio  {
	width: calc(100% - 1rem);
	margin: 0.5rem;
}
 
/* Formatting specific to smartphone (landscape or portrait) and tablet (portrait) */
@media all and (max-width: 959px) { 

/* If audio file displayed in a views table we need to remove the LR margins */
.views-field article .field__item audio  {
	width: 100%;
	margin: 0.5rem 0;
}

.media--type-image  {
  margin: 1rem auto 0 auto;
}

/* Will be 100% width so needs space between lines of text */
.teaser-image  {
	margin-top: 0.5rem;
}

.region-content .field__item img.teaser-image.in-para {
	margin-bottom: 0.5rem;
}

}

/* Formatting specific to smartphone (landscape or portrait) and tablet (portrait) */
@media all and (max-width: 800px) { 

.region-content .media--type-image  {
  max-width: calc(100% - 1rem);
}

}

/* Formatting specific for desktops and large tablet */
@media all and (min-width: 960px) {

}