/*                         Additional styles for event posters - HTML5 & CSS3
                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~   ~~~~~~~~~~~~
*/

/* _______________________________________________________________________________________________ Document-wide */
blockquote, h3, h5, h6, p {
    font-family: "Trebuchet MS", "Myriad Web", Verdana, Arial, Helvetica, sans-serif ;
}
/* ================================================================================================== Divisions */
/* --------------------------------------------------------------------------------- Content areas -- */

#pageHead  {                                 /* Set  #pageHead height  so  min-height  works */
    clear: left ; float: none ; display: table ; width: 70% ; max-width: 125ex ; height: 20vh ;
    margin: 4.5rem auto 0 auto ; 
    padding: 0 0 0 30ex ; /* Move to sideMenu53.css */
}
    #pageHead h5.Label {
        float: left ; max-width: 12ex ; margin: 5ex 6% 5ex 0 ;
        color: #888 ;
        font-size: 140% ; letter-spacing: 0.2ex ; text-align: center ;
    }
    #pageHead article.Poster { 
        float: left ; width: 60% ; max-width: 75ex ; margin: 0 0 10ex 0 ; padding: 3ex 5ex 4ex 5ex ;
    }
        #pageHead .Poster h3 { clear: none ; float: none ; margin: 0 0 0.5ex 0 ; }

main, #pageBody, #extraBody {
    display: flex ; justify-content: center ; flex-wrap: wrap ; 
	width: auto ; min-width: 57ex ; margin: 0 auto 0 auto ;
}
main { margin: 0 0 0 -2rem ; }
main>h3, #pageBody>h3 { clear: both ; text-align: center ; }
    main>h3 { margin: 3rem 2rem 0.3rem 0 ; color: #888 ; font-size: 130% ; }
    #pageBody .Poster { min-height: 27ex ; }

/* ------------------------------- A poster - wherever it is -------- */
.Poster {
    clear: none ; float: left ;
    width: calc(25% - 23ex) ; min-width: 50ex ; max-width: 61ex ;
    margin: 1rem 0 2rem 3rem ; padding: 3ex 5ex 4ex 5ex ; border: solid 2px #a95 ; background: #fff ;
    font-size-adjust: 0.48 ;
}
  .Poster section { float: none ; width: auto ; margin: 0 0 2ex 0 ; }

  .Poster h3 { clear: none ; float: none ; margin: 0 0 0.5ex 0 ; letter-spacing: 0.2em ; text-align: left ; }
    .Poster h3 cite { color: #741 ; white-space: normal ; }

  .Poster img { float: right ; width: 21ex ; height: auto ; margin: 0 0 3ex 3ex ; }
  .Poster img[src$="jpg"] { border: 1px solid #ddd ; }

  .Poster h5 { margin: 0 0 3ex 0 ; font-size: 105% ; letter-spacing: 0.1ex ; }
    .Poster h5::first-letter { text-transform: uppercase ; }
  .Poster h6 {
        margin: 3ex 5ex 0 0 ; color: #443 ;
        font-size: 90% ; font-weight: normal; letter-spacing: 0.2ex ; text-align: right ;
  }
    .Poster h6+h6 { margin-top: 0 ; }

    .Poster a { color: #66a ; white-space: nowrap ; }
    .Poster a:hover { color: #33f ; }

    .Poster blockquote::before { content: open-quote ;  }
    .Poster blockquote {
        margin: 0 ; padding: 1ex 7ex 0 7ex ;
        text-indent: -1.6ex ; font-style: normal ; letter-spacing: 0 ; line-height: 110% ;
    }
      .Poster blockquote p { margin: 4ex 0 -2ex 0 ; text-indent: 0 ; }
      .Poster blockquote p:first-child { margin: -2.5ex 0 -2ex 0 ; }
    .Poster blockquote::after { content: close-quote ; float: right ; margin: -0.5ex -1.5ex 4ex 0 ; }
      .Poster blockquote+footer, .Poster blockquote+p.Credit {
        display: block ; margin: 1ex 0 0 0 ; padding: 2ex 7ex 2ex 7ex ;
        line-height: 100% ; text-align: right ;
    }

  .Poster .Times { letter-spacing: 0.1ex ; }

  .Poster .Times::after { content: '  ' ; }

  .Poster .Blurb { display: none ; clear: right ; width: 100% ; max-width: none ; }
  .Poster:first-of-type .Blurb { display: block ; }

  .Poster ul { display: table ; }
  .Poster li { float: left ; min-width: 12ex ; margin-right: 5ex ; }

  .Poster p.Details { margin: 0 ; }

/* ============================================================================================================ */