/**
  Styles for LMS webzine

  Banner styles are in GENERIC/css/generic.css

  Copyright Paul Englefield, 2014

*/


a {
   color: black;
   text-decoration: none;
}

/*hr {border-color:lightgray;}*/

a:link {
   font-style: italic;
   overflow-wrap: break-word;
}

a:hover:link {
   color: #ff4444;
   text-decoration: underline;
}

a:hover:visited {
   color: #ff4444;
   text-decoration: underline;
}


td {
   padding-right: .5em;
}


/* x-lines responsive block element */
.x-lines {
  display: block;                  /* Block layout */
  width: 100%;                     /* Full width of container */
  margin: 0 auto;                  /* Center horizontally if needed */
  overflow: hidden;                /* Hide overflow */
  display: -webkit-box;            /* Flexbox like layout for truncation */
  -webkit-line-clamp: 3;           /* Limit text to 3 lines - default */
  -webkit-box-orient: vertical;    /* Required for line-clamp */
  text-overflow: ellipsis;         /* Show "..." for clipped text on second line */
  box-sizing: border-box;          /* Include padding in total width */
  word-break: break-word;          /* Responsive break for long words */
}
.one-line {
  -webkit-line-clamp: 1;           /* Limit text to 1 line */
}
.two-lines {
  -webkit-line-clamp: 2;           /* Limit text to 2 lines (for other elements only) */
}

/* Teaser header title with responsive height for two lines */
.teaserHeaderTitle {
  display: block;
  width: 100%;
  line-height: 1.5;  /* Controls line spacing */
  min-height: 3.2em; /* Space for approximately two lines */
  overflow: hidden;
}

.teaserHeaderTitle h3 {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
  white-space: normal;
}

.teaserHeaderTitle h3 a {
  white-space: normal;
}

/* Tablet and above: adjust height if needed */
@media only screen and (min-width: 650px) {
  .teaserHeaderTitle {
    min-height: 3.2em;
  }
}

.byline {
   color: gray;
   background: lightgrey;
   font-style: italic;
   display: block;
   overflow: hidden;
   padding: 0 10px;
   margin-bottom: 10px;
}
@media only screen and (max-width: 767px) {
   .byline {
      float: left;
      font-size: smaller;
      width: 100%;
      margin-left: 0px;
   }
   #teaser-list .byline {
      width: calc(100% - 130px);
      margin-left: 10px;
   }
}

.event-dets {
   background-color: lightblue;
   display: block;
   overflow: hidden;
   padding: 0 10px;
   margin-bottom: 10px;
}
@media only screen and (max-width: 767px) {
   .event-dets {
      float: left;
      font-size: smaller;
      width: 100%;
      margin-left: 0px;
   }
   #teaser-list .event-dets {
      width: calc(100% - 130px);
      margin-left: 10px;
   }
}

.emphasis {
   font-weight: bold
}

.magazine-content-well {
   padding: 16px 0;
   background: lightgray;
   display: inline-block;
   width: 100%;
}

.content_type_playlist {
   background-color: #8800BB;
}

.content_type_services {
   background-color: #337755;
}

.content_type_notices {
   background-color: #773333;
}

.content_type_act {
   background-color: #3355aa;
}

.content_type_venue {
   background-color: #AAAA33;
}

.content_type_session {
   background-color: #AA3333;
}

.content_type_festival {
   background-color: #3388cc;
}

h3 {
   font-size: 125%;
   color:#555555;
   font-family: Trebuchet MS;
   font-weight: bold;
   margin-bottom: .25em;
   margin-top: 0em;
}
.super-h3 {
   font-size: 125%;
}

h4 {
   font-size: 125%;
   color: #8B7765;
   font-family: Trebuchet MS;
   margin-bottom: .25em;
}

.ADD-TO-DIARY-BUTTON {
   float: right;
}

/* Content area */
.articleblockframe {
   float: left;
   padding: 0 0 0 15px;
}
.articleblock {
   padding-left: 0px;
   overflow-y: hidden;
   background: white;
   margin-bottom: 10px;
}

.article {
   background: transparent;
   border: 20px solid white;
}
.article3 {
   border: 10px solid lightgray;
   padding: 10px;
}
.soundsarticle {
   height: 600px;
   overflow-y: scroll;
}
@media only screen and (max-width: 650px) {
   .soundsarticle {
      height: unset;
      overflow-y: unset;
   }
}

.fadeout {
   width: 85%;
   height: 100px;
   position: absolute;
   bottom: 53px;
   background: -webkit-linear-gradient(
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 100%
      );
   background-image: -moz-linear-gradient(
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 100%
      );
   background-image: -o-linear-gradient(
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 100%
      );
   background-image: linear-gradient(
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 100%
      );
   background-image: -ms-linear-gradient(
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 1) 100%
      );
}


.image-license {
   color: gray;
   font-size: 80%;
   float: right;
}

.image-photographer {
   color: gray;
   font-size: 80%;
   float: right;
   padding-right: 1em;
}

.photo-gallery {
   border-width: 0em;
   border-color: white;
   border-style: solid;
   margin-bottom: 0;
}

.photo-gallery-cell {
   border-style: solid;
   border-width: .1em .1em .1em .1em;
   border-width: 0 0 0 0 ;
   padding: 0 0 0 0;
}

.photo-gallery-cell-left {
   border-left-width: 0;
   padding-left: 0;
}

.photo-gallery-cell-right {
   border-right-width: 0;
   padding-right:0;
}

.photo-gallery-cell-top {
   border-top-width: 0;
   padding-top: 0;
}

.photo-gallery-cell-bottom {
   border-bottom-width: 0;
   padding-bottom:0;
}

.photo-gallery-cell-top-and-bottom {
   border-top-width: 0;
   padding-top: 0;
   border-bottom-width: 0;
   padding-bottom:0;
}

.photo-gallery-thumbnail {
   cursor: pointer;
}

.toggle-icon {
   color: /*#00aaff; */  gray;
}

.toggle-icon:visited {
   color: #00aaff;
}

.services-count-by-category {
   font-size: 75%;
   padding-left: 1em;
}

.A-Z-initial {
   color: red;
   padding-bottom: .25em;
   font-size: 125%;
}

.festival-bullet{
   color:red;
}

.new {
   color: #ff4444;
   font-size: 75%;
}

.banner-link, .banner-link a {
   color: #ccbbaa;
}

.magic-bullet {
   list-style-type: square;
   padding-top: 1em;

}

.venue-entry-boring {
   color: gray;
}

.atoz-stats-sym {
   color: #3071a9;
}

.atoz-stats-sym-updated {
   color: #ff4444;
}

.atoz-stats-sym-multiple {
   color: #00cccc;
}

.event-type {
   background-color: white;
   color: #6666bb;
   padding-left: .5em;
   padding-right: .25em;
   padding-top: .2em;
   padding-bottom: .15em;
   margin-top: 1em;
   margin-bottom: .5em;
   border-radius: .25em .25em .25em .25em;
   position: relative;
   top: .3em;
   left: 0em;
}


.initial-picker-enabled {
   font-size: 100%;
   background-color: #00aaff;
   color: white;
   border-radius: .25em;
   padding-left: .25em;
   padding-right: .25em;
}

.initial-picker-enabled:hover {
   color: white;
   background-color: #ff4400;
   text-decoration: none;
}

.initial-picker-disabled {
   font-size: 100%;
   background-color: #dddddd;
   color: white;
   border-radius: .25em;
   padding-left: .25em;
   padding-right: .25em;
}


.info-sym {
   color: #00aaff; /*#8B7765; *//*4466bb; */
   font-size: 120%;
}


.A-Z-row {
   padding-bottom: .5em;
}

.ALPHA-PICKER-PANE {
   font-size: 120%;
   margin-left: .5em;
}

.style-sym {
   color: #3071a9;
}


/* Also in CMS */

.photo-gallery-zoomed {
   z-index: 999;
   position: fixed;
   display: none;
   top: 0;
   left: 0;
   background-color: black;
}

.zoomed-image-title {
   color: white;
}

.zoomed-image {
   border-color: white;
   border-style: solid;
   border-width: 2px;
}

.service-announcement {
   background-color:#ffffee;
   border-color: #ff4444;
   border-style:solid;
   border-width:1px;
   border-radius:.5em;
}
.service-announcement-inner {
   padding-left: .5em;
   padding-right: .5em;
   padding-top: .5em;
}

.rubric {
   width:100%;
   color:black;
   background-color: #ffeedd;
   padding-left: .5em;
   padding-right: .5em;
   padding-top: .5em;
   padding-bottom: .5em;
}

.auto-logo {
   color: mediumslateblue;
   font-size:150%;
   -ms-transform: rotate(22.5deg) translateX(1em) translateY(1em); /* IE 9 */
   -webkit-transform: rotate(22.52deg)  translateX(1em)  translateY(1em); /* Chrome, Safari, Opera */
   transform: translateX(1em)  rotate(22.5deg)  translateY(1em);
   font-family: Impact, Charcoal, sans-serif;
}

.article-type {
   color:white;
   background-color:#aaaaaa;
   padding-left:.25em;
   padding-right: .25em;
   padding-bottom: .15em;
   padding-top: .15em;
   font-weight:normal;
   border-radius: .25em;
   /*font-size:75%;*/
   vertical-align: top;
}

#framescontainer-full {
   margin-left: 0;
   padding-left: 0;
}
#framescontainer-left {
   margin-left: 0;
   padding-left: 0;
}
#framescontainer-right,
#searchcol {
   padding: 0;
}
@media only screen and (max-width: 767px) {
   #framescontainer-left,
   #framescontainer-full {
      padding-right: 16px;
   }
}

.smallscreen_vanish {
   visibility: visible;
   display: block;
}
@media only screen and (max-width: 767px) {
   .smallscreen_vanish {
      visibility: hidden!important;
      display: none;
   }
}

.image-gallery-controls {
   padding-bottom: 20px;
}

.teaser,
.teaser-big {
   overflow: hidden;
   background: white;
   border-top: 1.5px solid lightgray;
   padding: 15px 15px 0px 15px;
   position: relative;
}
.teaser {
   height: 280px;
}
.teaser-big {
   height: 600px;
}
.teaser hr {
   background-color: white;
}
.teaserHeaderTitle {
   /* height: 54px; */
   overflow: hidden;
}
.teaserHeaderTitle h3 {
   overflow: hidden;
   text-overflow: ellipsis;
}
.teaserFooter {
   position: absolute;
   bottom: 0;
   background: linear-gradient(transparent, white, white);
   left: 10px;
   width: calc(100% - 20px);
   height: 100px;
}
.teaserFooterText {
   position: absolute;
   bottom: 0;
   left: -10px;
   width: calc(100% + 20px);
   vertical-align: bottom;
   padding: 10px;
}
.teaser .teaserFooterText {
   height: 280px; /* same as .teaser */
   padding-top: 240px; /* above minus 40px */
}
.teaser-big .teaserFooterText {
   height: 600px;  /* same as .teaser-big */
   padding-top: 560px; /* above minus 40px */
}
.teaserFooter .image-count {
   left: 0px;
}
.teaserFooter .more-link {
   float: right;
   margin: 10px;
}

@media only screen and (max-width: 767px) {
   .teaser,
   .teaser-big {
      height: 150px;
   }
   .teaser-big .teaserFooter {
      padding-top: 110px; /* above minus 40px */
   }
   .teaserBody .photo-gallery-frame {
      width: 120px;
      float: left;
   }
   .teaserHeader {
      width: calc(100% - 130px);
      float: right;
      font-size: 80%;
      overflow: hidden;
   }
   .teaserFooter {
      background: transparent;
   }
   .teaserText,
   .image-count,
   .image-metadata {
      display: none;
      visibility: hidden;
   }
}


.crop{
   float: left;
   /*margin:.5em 10px .5em 0;*/
   margin: auto 10px auto 0;
   overflow: hidden; /* this is important */
   position: relative; /* this is important too */
   border: 1px solid #ccc;
   width: 120px;
   height: 120px;
}
.crop img {
   position: absolute;
   vertical-align: middle;
}


/* search page */
#searchForm {
   padding: 0 0 0 15px;
}
#searchbox input.form-control {
   padding-left: 30px;
   margin-bottom: 10px;
}
.md-form.mt-0 {
   width: 100%;
   display: flex;
   align-items: center;
}
.material-icons.mdc-button__icon {
   position: absolute;
   padding: 10px;
}

.latestPublicationDate {
   overflow: hidden;
}


/* Used by contact & contribute (3) forms */
form {
   padding-top: 10px;
   padding-bottom: 70px;
}
form input.error {
   background: #f8dbdb;
   border-color: #e77776;
}
form textarea.error {
   background: #f8dbdb;
   border-color: #e77776;
}
form div span.error {
   color: #e46c6e;
   font-style: italic;
}
.form-group {
   margin: 20px 15px 0px 15px;
}
form p.errorMsgs {
   background: #f8dbdb;
   padding: 10px;
   margin-top: 30px;
   margin-bottom: 0px;
   color: #555;
   border: 1px solid red;
   border-radius: 4px;
}
.bg-danger,
.bg-success {
   background-color: #ee4433 !important;
   border: 1px solid #440000;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
   font-weight: bold;
   margin-bottom: 20px;
   padding-top: 20px;
   border-radius: 4px;
}
.bg-success {
   background-color: #9FFF7A !important;
   border: 1px solid #62A04B;
}

/* share links */
.share_links {
   display: none;
   width: 100%;
   background-color: blue;
}

/* pager */
li.page-item.current {
   border-bottom: 4px solid red;
}
#magazine-pager,
#magazine-pager2 {
   margin: 0px;
   padding-left: 20px;
}
@media only screen and (max-width: 767px) {
   #magazine-pager,
   #magazine-pager2 {
      font-size: 80%;
   }
}
@media only screen and (max-width: 650px) {
   #magazine-pager,
   #magazine-pager2 {
      font-size: 60%;
   }
}
#magazine-pager nav {
   padding: 0;
}
#magazine-pager-form .glyphicon a {
   content: '';
}
.hidden {
   display: none;
}
input#pageno {
   text-align: center;
   width: 50px;
}