/* CSS for all pages on dnalounge.com and codeword-sf.com */

body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 11pt; }
hr   { height: 1px; border-width: 0; width: 50%; }
a:link, a:hover, a:visited, a:active { text-decoration: none; }


/****************************************************************************
 All colors go here, to keep them in one place.
 ****************************************************************************/

body.dnalounge       { color: #0F0; background: #000; border-color: #080; }
.dnalounge hr        { color: #0F0; background: #0F0; }
.dnalounge a:link    { color: #0DF; }
.dnalounge a:hover   { color: #FFF !important; }
.dnalounge a:visited { color: #AD0; }
.dnalounge a:active  { color: #F63; }

body.codeword       { color: #C8DF6D; background:#943225;border-color:#F79321;}
.codeword hr        { color: #C8DF6D; background: #C8DF6D; }
.codeword a:link    { color: #CCDDDD; }
.codeword a:hover   { color: #CCFFFF !important; }
.codeword a:visited { color: #FFE2B6; }
.codeword a:active  { color: #FF8888; }

/* I wanted to just use "*" but we must not set this on input, etc.
   or we lose Webkit styling on form elements. */
div, span, p, b, i, hr, table, tbody, tr, td, th { border-color: inherit; }

.dnalounge .gbox, .dnalounge .gwbox, .dnalounge .sbox, .dnalounge .blogheader {
  background: #040; }

.codeword .gbox, .codeword .gwbox, .codeword .sbox, .codeword .blogheader {
  color: #000; border-color: #000; background: #F79321;
  font-size: 18pt; text-transform: lowercase;
}

.codeword .gwbox > a,
.codeword .event_title_box a {
  color: #000;
          text-shadow: 1px 1px 3px #FFF;
  -webkit-text-shadow: 1px 1px 3px #FFF;
}

.codeword .gwbox > a:hover,
.codeword .event_title_box a:hover {
  color: #FFF !important;
          text-shadow: 1px 1px 3px #000;
  -webkit-text-shadow: 1px 1px 3px #000;
}


.dnalounge .err           { color: #F00; }
.dnalounge .notice        { color: #FFF; }
.dnalounge .dim           { color: #060; }
.dnalounge .gwbox .err    { color: #F00; }
.dnalounge .gwbox .notice { color: #FFF; }

.codeword .err           { color: #F00; }
.codeword .notice        { color: #FFF; }
.codeword .dim           { color: #888; }
.codeword .gwbox .err    { color: #F00; }
.codeword .gwbox .notice { color: #FFF; }



/* For pages with white backgrounds */
.white, body.white, .body.dnalounge.white, .body.codeword.white {
  color: #000; background: #FFF; border-color: #000; }
.white a:link    { color: #00E; }
.white a:hover   { color: #00E !important; }
.white a:visited { color: #518; }
.white a:active  { color: #F00; }
.white hr { color: #000; background: #000; }

.dnalounge .menu li > a, .dnalounge .menu li > b {
  background: #040;
  border-color: #080;
}

.codeword .menu li > a, .codeword .menu li > b {
  color: #000;
  background: #F79321;
  border-color: #000;
          text-shadow: 1px 1px 3px transparent; /* avoid :hover flicker */
  -webkit-text-shadow: 1px 1px 3px transparent;
}

.dnalounge .menu li > b { background: #000; border-color: #040; }
.dnalounge .menu li > a:hover { color: #000; background: #080; }

.codeword .menu li > b {
  color: #C8DF6D; background: #943225; border-color: #F79321;
          text-shadow: 1px 1px 3px transparent; /* avoid :hover flicker */
  -webkit-text-shadow: 1px 1px 3px transparent;
}
.codeword .menu li > a:hover { color: #FFF; background: #C83B27;
          text-shadow: 1px 1px 3px #000;
  -webkit-text-shadow: 1px 1px 3px #000;
}

body.codeword { margin-top: 0; }

.codeword .bottom .menu { background: #F79321; }
.codeword .bottom .menu li > a:hover { background: #C83B27; }

.dnalounge .frontpage .addr { color: #0F0; }

.dnalounge .thumbox:hover { background: #040; }
.codeword  .thumbox:hover { background: #C83B27; }

.dnalounge .blogheader I A { color: #0F0; }
.dnalounge .sub { background: #040; }

.dnalounge .navL, .dnalounge .navR, .dnalounge .navC { color: #666; }
.codeword  .navL, .codeword  .navR, .codeword  .navC { color: #666;
/*          text-shadow: 1px 1px 3px #FFF;
  -webkit-text-shadow: 1px 1px 3px #FFF; */
}

.flyertix { background: #040; }

.video_frame { background: #000; }
.dnalounge .videogroup .video_floater { color: #0A0; }

/* colors of classes defined in calendar.css */

.dnalounge .ccell          { color: #666; border-color: #040; }
.dnalounge .calhead .ccell { color: #0F0; }

.codeword .ccell           { color: #800; border-color: #492b13; }
.codeword .calhead .ccell  { color: inherit; }

.dnalounge .ccell#today        { background: #040; border-color: #0F0; }
.dnalounge A.ccell:hover       { background: #020; border-color: #0F0; }
.dnalounge A.ccell#today:hover { background: #020; }

.codeword .ccell#today         { background: #C83B27; border-color: inherit;
/*          text-shadow: 1px 1px 3px #000;
  -webkit-text-shadow: 1px 1px 3px #000;*/
}
.codeword A.ccell:hover        { background: #C83B27; border-color: inherit; }
.codeword A.ccell#today:hover  { background: #C83B27; color: inherit; }


.dnalounge .event_title_box { background: #040; }
.dnalounge .event_title, .event_title > a {
          text-stroke: 1px #000;
  -webkit-text-stroke: 1px #000;
}
.codeword .event_title_box { color: #000; background: #F79321; }
.codeword .event_title, .codeword .event_title > a { color: #000; }

.dnalounge .event_awards { border-color:  #080; }
.dnalounge .thumbclip { border-color: #666; }
.dnalounge .event_stats_box, .event_share_box { background: #020; }
.dnalounge .event_export li a:hover,
.dnalounge .related_events li a:hover { background:#040; }

.codeword .thumbclip { border-color: #666; }
.codeword .event_export li a:hover,
.codeword .related_events li a:hover { background: #C83B27; }

.dnalounge .event_awards { background: #000; }  /* .related_box hover */
.codeword  .event_awards { background: #943225; }


/* gallery/photoswipe colors and fonts */

.dnalounge .pswp__img { box-sizing: border-box; border: 1px solid #080; }
.codeword  .pswp__img { box-sizing: border-box; border: 1px solid #F79321; }

.dnalounge .pswp__counter,
.dnalounge .pswp__caption,
.dnalounge .pswp__caption__center {
  color: #0F0;
  font-size: 14pt;
  font-family: "Helvetica Neue LT Com",Arial,Helvetica,sans-serif;
  text-transform: uppercase;
}

.codeword .pswp__counter,
.codeword .pswp__caption,
.codeword .pswp__caption__center {
  color: #C8DF6D;
  font-size: 18pt;
  font-family: YearlingLite,Arial,Helvetica,sans-serif;
}

.dnalounge .pswp__caption__center,
.codeword  .pswp__caption__center {
  font-size: 14pt;
  line-height: 15pt;
  text-align: center;
  max-width: inherit;
}

.codeword  .pswp__caption__center {
  font-size:   24pt;
  line-height: 22pt;
}

.pswp__caption .navL { position: absolute; left: 1em;  bottom: 2em; }
.pswp__caption .navR { position: absolute; right: 1em; bottom: 2em; }

@media screen and (max-device-width: 480px) { /* iPhone */
  .dnalounge .pswp__counter, .codeword .pswp__counter,
  .dnalounge .pswp__caption, .codeword .pswp__caption,
  .dnalounge .pswp__caption__center,
  .codeword  .pswp__caption__center {
    font-size: 8pt;
    line-height: 8pt;
  }
}

.dnalounge .pswp__button,
.dnalounge .pswp__button--arrow--left:before,
.dnalounge .pswp__button--arrow--right:before {
  background-image: url(/gallery/photoswipe/dna-skin.png);
}

.codeword .pswp__button,
.codeword .pswp__button--arrow--left:before,
.codeword .pswp__button--arrow--right:before {
  background-image: url(/gallery/photoswipe/cw-skin.png);
}

.dnalounge .pswp__button--arrow--left,
.dnalounge .pswp__button--arrow--right,
.codeword .pswp__button--arrow--left,
.codeword .pswp__button--arrow--right {
  background-image: none;
}

.dnalounge .pswp__preloader--active .pswp__preloader__icn,
.codeword  .pswp__preloader--active .pswp__preloader__icn {
  background-image: url(/gallery/photoswipe/preloader.gif);
}

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
  .dnalounge .pswp--svg .pswp__button,
  .dnalounge .pswp--svg .pswp__button--arrow--left:before,
  .dnalounge .pswp--svg .pswp__button--arrow--right:before {
    background-image: url(/gallery/photoswipe/dna-skin.svg);
  }
  .codeword .pswp--svg .pswp__button,
  .codeword .pswp--svg .pswp__button--arrow--left:before,
  .codeword .pswp--svg .pswp__button--arrow--right:before {
    background-image: url(/gallery/photoswipe/cw-skin.svg);
  }
  .dnalounge .pswp--svg .pswp__button--arrow--left,
  .dnalounge .pswp--svg .pswp__button--arrow--right,
  .codeword .pswp--svg .pswp__button--arrow--left,
  .codeword .pswp--svg .pswp__button--arrow--right {
    background: none;
  }
}

.dnalounge .pswp__share-tooltip { background: #333; border: 1px solid #AAA; }
.dnalounge a.pswp__share--download:hover { color: #000 !important; }

.dnalounge a.pswp__share--pinterest,
.codeword  a.pswp__share--pinterest { display: none; }


/****************************************************************************
 Various classes used on all pages
 ****************************************************************************/

/*.top      { max-width: 51em; margin: auto; }*/
.top      { max-width: 748px; margin: auto; }
.page     { max-width: 51em; margin: auto; }
.galhead  { max-width: 51em; margin: auto; }
.s        { font-size: smaller; }
.sn       { font-size: smaller; white-space: nowrap; }
.box      { border-width: 1px; border-style: solid; padding: 0.4em; }
.gbox, .gwbox, .sbox, .blogheader { display: block;
            border-width: 1px; border-style: solid; font-weight: bold;
	    text-align: center; padding: 0.5em; text-transform: uppercase; }
.gbox, .gwbox, .blogheader {
	    text-align: center; padding: 0.5em; text-transform: uppercase; }
.gbox     { display: inline-block; font-size: larger; padding: 0.5em 2.5em; }
/*.gwbox    { margin: 0 0.4em 0 0.2em; }*/
.sbox     { padding: 0.5em 1em; margin-top: 2em; }
.video    { border-width: 1px; border-style: solid; }

.err           { font-weight: bold; text-shadow: none; }
.notice        { font-weight: bold; text-shadow: none; }

.authlinks { text-align: center; margin: 0 auto 1em auto; }

.page.white      { padding: 1em; }

/* Apache index pages */
pre       { font-size: 9pt; }
pre > hr  { width: 100%; }

/* #### Now only used in switcher/example.html, dnabooth-gallery.pl, venue-info.html  */
.icon { width:13.5em; height:4.35em; border: 0; }


/* This fucker has to always be 90px wide, even though the "Like" button
   itself is only 40px wide.  I tried truncating it to 40px, to show only
   the button and leave off the numbers (because, who cares!) but that
   screws up if you have actually clicked it: in that case, it puts the
   numbers on the LEFT instead of the right, and it looks like ass.

   To make it not be so visually jarring when I have the button on the
   right, when "fblike" is inside "fblikeBG", the background is set to the
   same color as the button.  At least, until they randomly change it again.

   Update: Ugh, the G+ button always displays a number, even if it's 0.
   Facebook omits the 0 *SOMETIMES*!  WTF!  There's no way to make them
   look good together.  Fuck it.
 */
.fblike   { border: 0; overflow: hidden;
            width: 90px; height: 20px; margin-top: 4px;
	  }

.plusonebox { width: 90px; margin: 4px 0 0 0; padding-left: 15px; }

.likers { }
.likersR {
  float: right; position: relative;
  white-space: nowrap; overflow: hidden;
  width: 75px; height: 4em;
}
.likersR  .fblike     { position: absolute; top: 0;   left: 1px; }
.likersR  .plusonebox { position: absolute; top: 2em; left: 0;   }

.galhead { position: relative; }
.galhead .likersR { position: absolute; right: 0; }
.galhead .gwbox { padding-left: 5em; padding-right: 5em; } /* for likers */


/* Not sure about this... */
.codeword .frontpage input[type="email"] {
  color: #C8DF6D; background: #4A1912; border-color:#F79321;
  margin-top: 0.25em;
}


/* For the donate form in the shopping cart and on /donate/ */
.donate_box form {
  display: inline-block; white-space: normal;
  margin: 0.5em auto; text-align: left;
}
.cart_donate_box {
   text-align: left; margin: 0; padding: 1.5em; border-top-width: 0;
}
.donate_radio {
  display: inline-block; margin: 0 0.25em; white-space: nowrap;
}


/****************************************************************************
 Menus at the top of every page.
 ****************************************************************************/

.top {
  position: relative;
  margin-bottom: 0.25em;
}

.masthead img {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  height: 6em;
}

.menu {
  list-style: none;
  padding: 0 0 0 0.5em;
  white-space: nowrap;
  height: 6em;
  white-space: normal;
  box-sizing: border-box;
  overflow: hidden;
}

.dnalounge .menu {
  margin:  0 0 0 18.2em;   /* 6em / 0.33 -- the aspect ratio of the logo */
}

.codeword .menu {
  margin: 4px 0 0 6em;     /* square logo */
}


.menu li {
  width: 33.3333%;
  display: inline-block;
  position: relative;
  font-weight: bold;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  vertical-align: top;
}

.menu li > a, .menu li > b {
  display: block;
  width: 100%;
  height: 2em;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: bold;
  border-width: 1px;
  border-style: solid;
  box-sizing: border-box;
  padding: 0.4em 0 0 0;    /* center vertically within 2em height */
  margin: 0;
  overflow: hidden;
}

.codeword .menu li > a, .codeword .menu li > b {
  text-transform: lowercase;
  height: 29px;	     /* about 2em in the parent's sizing */
  padding: 3px 0;    /* center vertically within height */
  font-size: 16pt;
}

.codeword .bottom { clear: left; }


.frontpage .menufooter {
  position: relative;
  height: 2.7em;
  margin-bottom: 1.5em;
}

.frontpage .addr,
.frontpage .subscribe,
.frontpage .nascar {
  position: absolute;
  bottom: 0;
}

.frontpage .addr {
  text-transform: uppercase;
  position: absolute;
  left: 0;
  width: 17.5em;
  text-align: left;
  bottom: -4px;   /* align baselines */
  z-index: 1;
}

.codeword .addr {
  text-transform: lowercase;
  font-size: 22pt;
  width: 9em;
}

.frontpage .subscribe {
  left: 0;
  right: 0;
  text-align: center;
  bottom: -4px;   /* align *almost* to baseline of text field */
}

.frontpage .subscribe input[type=email] { font-size: 16px; width: 10em; }
.subscribe b {
  display: block;
  text-transform: uppercase;
  font-size: 8pt;
  line-height: 5pt;
  margin-top: 2px;
}

.frontpage .nascar {
  right: 0;
  white-space: nowrap;
  text-align: right;
}

.nascar img {
  width:  2.5em;
  height: 2.5em;
  border: 0;
  margin-left: 0.5em;
}

.frontpage .nascar a {
  display: inline;
  width: auto;
  border: 0;
  background: none;
}

.frontpage .menu .nascar > a { background: none; }
.frontpage .menu .nascar > a:hover { background: none; }

.menu li > a.rss {
  position: absolute;
  top:    1px;
  right:  0.5em;
  width:  auto;
  height: auto;
  margin: 0;
  border: 0;
  background: inherit;
}
.menu .rss img { width: 1.2em; height: 1.2em; border: 0; }
.menu li > a.rss:hover { background: inherit; }


/* max-width means "the window is this wide, or wider".
   min-width means "the window is this wide, or narrower".
   Empirically:

     Model		Orientation	min-w	max-w	min-h	max-h (in em)

     iPhone 6+ 6s+ 7+	Portrait	25	26	39	40
     iPhone 6+ 6s+ 7+	Landscape	46	46	25	26

     iPhone 6 6s 7	Portrait	23	24	34	35
     iPhone 6 6s 7	Landscape	41	42	23	24

     iPhone 5 5s	Portrait	20	20	28	29
     iPhone 5 5s	Landscape	35	36	20	20

     Nexus 5		Portrait	22	23	32	33
     Nexus 5		Landscape	37	38	17	18

     iPad (various)	Portrait	48	48	60	60
     iPad (various)	Landscape	64	64	44	44

     iPad Pro 12.9"	Portrait	64	64	81	82
     iPad Pro 12.9"	Landscape	85	86	60	60

  Sorted by max-w, descending:

     iPad Pro 12.9"	Landscape	85	86	60	60
     iPad Pro 12.9"	Portrait	64	64	81	82
     iPad (various)	Landscape	64	64	44	44
     iPad (various)	Portrait	48	48	60	60

     iPhone 6+ 6s+ 7+	Landscape	46	46	25	26
     iPhone 6 6s 7	Landscape	41	42	23	24
     Nexus 5		Landscape	37	38	17	18
     iPhone 5 5s	Landscape	35	36	20	20
     iPhone 6+ 6s+ 7+	Portrait	25	26	39	40
     iPhone 6 6s 7	Portrait	23	24	34	35
     Nexus 5		Portrait	22	23	32	33
     iPhone 5 5s	Portrait	20	20	28	29

  So the plan is to arrange our @media selectors descending by max-width,
  and pick transition points mostly from the max-w column, above.
 */


/* iPad Portrait, iPhone 6 Plus - 7 Plus, Landscape */
@media screen and (max-width: 48em) {
  .frontpage .subscribe {
    bottom: -10px;   /* align to baseline of text field, not of <B> */
  }
  .codeword .addr { font-size: 18pt; bottom: 0; }
}

/* iPhone 6 - 7, Nexus 5, Landscape
   Move the subscribe box to the right a bit, and shrink it.
 */
@media screen and (max-width: 38em) {
  .frontpage .subscribe { padding-left: 2.5em; }
  .codeword .nascar img { width: 2em; height: 2em; margin-left: 0.1em; }
  .codeword .addr { font-size: 15pt; bottom: 0; }
}

/* iPhone 5, Landscape.
   Shrink the subscribe box, menu fonts and nascar.
 */
@media screen and (max-width: 36em) {
  .frontpage .subscribe { padding-left: 5em; }
  .frontpage .subscribe input[type=email] { width: 5em; }
  .nascar img { width: 2em; height: 2em; margin-left: 0.3em; }
  .menu li > a, .menu li > b {
    font-size: 9pt;
    height: 29px;      /* about 2em in the parent's sizing */
    padding: 8px 0;    /* center vertically within height */
  }
}

/* iPhone 6 Plus - 7 Plus Portrait.
   DNA: Make the logo full width and put the menu below it. Hide address.
   CW: Just shrink it.
 */
@media screen and (max-width: 26em) {
  .dnalounge .masthead img { position: static; width: 100%; height: auto; }
  .dnalounge .menu { margin: 1em 0 1em 0; padding: 0; }
  .frontpage .addr { display: none; }
  .frontpage .subscribe {
    left: 0; right: auto; padding-left: 0; text-align: left;
  }
  .frontpage .subscribe b { padding-left: 0.5em; }
  .frontpage .subscribe input[type=email] { width: 12em; }

  .codeword .masthead img { width: 3em; height: 3em; margin-top: 1.4em; }
  .codeword .menu { margin-left: 3em; }
  .codeword .menu li > a, .codeword .menu li > b {
    font-size: 13pt;
    padding-top: 4px;
  }
}

/* Nexus 5, iPhone 6 Portrait.
   Shrink the subscribe box.
 */
@media screen and (max-width: 24em) {
  .frontpage .subscribe input[type=email] { width: 10em; }
}

/* iPhone 5, Portrait.
   Shrink the subscribe box and height of its container.
 */
@media screen and (max-width: 20em) {
  .frontpage .menufooter { height: 1.3em; }
  .codeword .frontpage .menufooter { height: 2.2em; }
  .frontpage .subscribe input[type=email] { width: 6.5em; }
}

/* Very narrow desktop window. */
@media screen and (max-width: 16em) {
  .frontpage .subscribe input[type=email] { width: 8em; }
}


/* Sometimes there are additional menus in page bodies (store/, xml/) */
.bottom .menu { max-width: 15em; overflow: auto; height: auto; }
.bottom .menu li { width: 100%; margin-bottom: 0.2em; }

.codeword .bottom .menu { background: none; }



/****************************************************************************
 Front page.
 ****************************************************************************/

.dnalounge .page.frontpage {
  max-width: 70em;		/* max-width of gwbox, really */
}

.frontpage .gbox {
  display: block;
  text-transform: uppercase;
  margin: 2em auto 1em auto;
  padding-left: 0;
  padding-right: 0;
}


/* Front page flyers */

.frontpage .thumbline, .frontpage .snaps, .frontpage {
  /* overflow-x: hidden; */
  margin-left: auto; margin-right: auto;
}
.frontpage .snaps { white-space: nowrap; padding-bottom: 1px; }

.thumbline2 {
  display: inline-block;
  white-space: nowrap;
  margin-bottom: 0.5em;
}

.thumbline { padding-bottom: 0.5em; margin: auto; }
.thumbox {
  margin: 0.5em 0;
  display: inline-block;
  text-align: center;
  vertical-align: top;
  position: relative;
}
.thumbody    { width: 100%; box-sizing: border-box; padding: 0.3em; }
.thumbox b   { display: block; margin-top: 0.5em; text-transform: uppercase; }
.thumbox img { display: block; width: 100%; height: auto;
               box-sizing: border-box;  border: 1px solid #444; }
.thumbox_txt { height: 4em; margin-bottom: 0.5em;
               white-space: normal; overflow: hidden;
  hyphens:         auto;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
 }
.thumbox:hover { border-radius: 0.5em; }

/* No horizontal scrollbar because of invisible "Buy Tickets" overflow. */
.frontpage .bottom { overflow-x: hidden; }

.thumbox .thumbuy {
  font-size: 16pt;
  font-weight: bold;
  text-transform: uppercase;
  border: 2px solid;
  color: #000;
  background: #0F0;
  border-color: #080;
  padding: 0.5em 0.25em;
  border-radius: 0.5em;
  white-space: nowrap;
  position: absolute;
  top: 70%;
  left: 50%;
  width: 8em;
  margin-left: -4.25em;
  opacity: 0;  /* display: none; -- see below */
  z-index: 1;

  animation-name: greenthrob;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: alternate;
  animation-duration: 2s;

  box-shadow: 3px 3px 5px 6px rgba(0,0,0,0.75);
}

/* Set opacity instead of display to avoid double-tap on iOS */
.thumbox:hover .thumbuy { display: block; opacity: 1; }

@keyframes greenthrob { 0% { background: #AFA; } 100% { background: #0A0;} }


/* Front page photos */

#snaps { margin: 1em auto; }

.snap_line_left, .snap_line_right {
  display: inline-block;
  position: relative;
  width: 50%;
}

.snap_frame {
  width: auto;
  height: 0;
  padding: 0 0 50% 0;
}

.snap_box {
  display: inline-block;
  padding-bottom: 50%;
  vertical-align: top;
  box-sizing: border-box;
  position: relative;
}

.snap_border {
  padding: 1em;
  box-sizing: border-box;
  position: absolute;
  left: 0; top: 0; bottom: 0; right: 0;
  margin: 4px;
  overflow: hidden;
  border: 1px solid #888;
}

.snap_box b {
  display: inline-block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  text-align: right;
  overflow: hidden;
  padding: 0.2em 0.25em;
  font-size: 10pt;
  line-height: 10pt;

  /* background: rgba(1, 1, 1, 0.25); */
  text-shadow: 1px 1px 1px #000;
}

.snap_box img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: auto;
  box-sizing: border-box;
}


.snap_box {
  transition-duration: 0.25s;
  transition-property: transform;
}
.snap_box:hover {
  transform: scale(1.05);
}


@media screen and (max-width: 710px) {
  .dnalounge .thumbox { font-size: 7.5pt; }
}

@media screen and (max-width: 630px) {
  .dnalounge .thumbox { font-size: 6.5pt; }
}

@media screen and (max-width: 530px) {
  .gbox, .gwbox, .flyertix { font-size: 11pt; }
  .thumbline2 { width: 100% !important; }  /* two lines for upcoming flyers */
  .snap_line_left, .snap_line_right { width: 100% !important; }
  .thumbox_txt { font-size: 10pt; }
}

/* iPhone-size: bump the font size down one last time. */
@media screen and (max-width: 480px) {
  .thumbox          { font-size: 7pt; }
  .gwbox, .flyertix { font-size: 8pt; }

  .frontpage .thumbline, .frontpage .snaps, .frontpage {
     overflow-x: hidden;
  }

  .thumbox .thumbuy { font-size: 10pt; }
}


/****************************************************************************
 Blog pages.
 ****************************************************************************/

.blogheader { min-height: 1.25em; }
.blogheader I { font-style: normal; font-size: smaller; text-transform: none; }
.blogheader .navL, .blogheader .navR {
  text-transform: none; min-width: 5em; min-height: 3em;
}

.sub  { border-width: 1px; border-style: solid; font-weight: bold;
        padding: 0.5em 0.5em 0.5em 10em; margin-top: 2em;
        min-height: 3.1em;
        position: relative; overflow: hidden; }
.subD { position: absolute; left: 0.5em; top: 0.5em; }

.sub .likers { float: right; margin: -0.35em 0 0 0;
  white-space: nowrap; overflow: hidden;
  width: 75px; height: 4em;
}


/****************************************************************************
 Flyers and photo galleries.
 ****************************************************************************/

.navL, .navR, .navC { font-weight: bold; text-transform: none; }
.navL   { float: left; margin-right: 2em; }
.navR   { float: right; text-align: right; margin-left: 2em; }
.navC   { text-align: center; }
.navC2  { font-weight: bold; text-align: right; display: inline-block; }
.photo  { width: 100%; height: auto; margin: 1em 0;
          border-width: 1px; border-style: solid;
          display: block; }
span.photo { display: none; } /* for hcalendar, not really a photo. */
.flyer  { width: 100%; height: auto; margin: 0.3em 0; border: 0; }
.flyerT { width: 100%; height: auto; margin: 0.3em 0; border: 0; }

/* To compensate for margins on .navL .flyerT */
.flyer { margin-left: -2em; margin-right: -2em; }

.flyertix {
   border-width: 1px; border-style: solid; font-weight: bold;
   margin: 0.4em 0.4em 0.4em 0.2em;
   text-align: center; padding: 0.5em;
}

.navL .flyerT, .navR .flyerT { width: 90%; }

.flyertix .likers { width: 90px; margin: 0 auto; }


/* Rocket surgery to make embedded Youtube videos scale fluidly while
   preserving their aspect ratio, and flow inline like images.
   It takes two DIVs around the IFRAME to make this work: one to
   set the aspect, and one to float and size that within the parent.
 */
.video_floater {
  display: inline-block; margin: 2px; width: 100%;
/*  min-width:  356px;*/      /* 16:9 at 200px tall */
/*  min-height: 200px;*/
}

.video_frame {
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  border-width: 1px; border-style: solid;
}

.video_embed {
  position: absolute; top: 0; left: 0;
  border: 0; margin: 0; padding: 0;
  z-index: 1;  /* Otherwise controls aren't clickable, WTF. */

   /* As of Mar 2012, Youtube videos (sometimes) refuse to play unless
      the player is at least 200px x 200px.  Thanks, guys.  This is
      ridiculously large, since 200px tall means 356px wide at 16:9.

      So instead of submitting to this indignity, set the width/height
      to 200%, and use CSS to scale it down, so that Youtube thinks it
      has a "large enough" viewport and will play.  An interesting
      side effect is that the play controls are now half the usual
      size, which is also fine with me.
    */
   width:  100%;
   height: 100%;
  /* Except this turns out to not be very portable across browswers. Shit.
   width:  200%;
   height: 200%;
  -moz-transform:    scale(0.5);
  -o-transform:      scale(0.5);
  -webkit-transform: scale(0.5);
  -moz-transform-origin:    0 0;
  -o-transform-origin:      0 0;
  -webkit-transform-origin: 0 0;
  */
}

/* This works around a bug in the Safari Youtube5 extension, 2.6.8 */
.video_frame > .youtube5placeholder { height: 0 !important; }


/* Safari stupidity */
.checkout select:disabled, input:disabled,.donate_radio input:disabled {
  color: #444; opacity: 1.0;
}

iframe { background: transparent; }


/* For videos that are portrait instead of landscape. */
.video_portrait .video_frame { padding-bottom: 177%; }		/* 16/9 */
.video_portrait .video_floater { width: 56.25%; }		/* 9/16 */
.video_portrait .video_floater { width: 40%; }			/* smaller */

/* For videos that are square instead of 16:9.  Note that portrait-mode
   videos on Youtube are sometimes actually square with pillar-boxing. */
.video_square .video_frame { padding-bottom: 100%; }

/* For videos that are 4:3 instead of 16:9. */
.video_43 .video_frame { padding-bottom: 75%; }			/* 4/3 */


/* Inside a "videogroup", videos are smaller than 100% wide.
 */
.videogroup {
  text-align: center;
}
.videogroup .video_floater {
  width: 30%;
  min-width:  356px;	/* 16:9 at 200px tall */
  max-width:  480px;

  font-size: 8pt;	/* for captions */
  margin-bottom: 1em;
}


/****************************************************************************
 Flyer galleries.
 ****************************************************************************/

.fthumbox { position: relative; margin: 1em auto 0 auto;
            max-width: 36em; min-height: 7em;
            font-weight: bold; text-align: right;
            box-sizing: border-box; }
.ftitle   { position: absolute; left: 0; top: 1em; width: 6.5em; }
.fthumbs  { text-align: center; margin-left: 6.5em; }
.fthumb   { width: 43%; height: auto; border: 0; margin: 0 0.5em 0.5em 0;
            box-sizing: border-box; }


/****************************************************************************
 Photo galleries.
 ****************************************************************************/

.gthumbox { display: inline-block; position: relative;
            width: 18em; min-height: 6em; margin: 1em;
            padding-left: 7em; text-align: left; vertical-align: top;
            font-weight: bold;
            box-sizing: border-box; }
.gthumb { position: absolute; left: 0; top: 0;
          width: 6em; height: 6em; }
.gthumbox a { display: block; margin-bottom: 0.5em; }

.gthumb { display: block; margin-bottom: 0.5em; }
.gthumbspacer { min-height: 0; margin-top: 0; margin-bottom: 0; }

.gheading { text-transform: uppercase; font-weight: bold; }
.gbyline  { margin-bottom: 1em; }

.gthumbox .thumbclip:hover { transform: scale(1.12); }


/* All gallery thumbs have the same height, auto-width.
   The min-width is so that unloaded images show up as rectangles
   instead of vertical lines. */
.thumb {
   width: auto; height: 11em; min-width: 7em;
   border-width: 1px; border-style: solid; margin: 0.2em;
   box-sizing: border-box;
}

.thumbclip {
  display: inline-block;
  position: relative;
  width:  100%;
  height: 0;
  padding-bottom: 100%;
  box-sizing: border-box;
  border: 1px solid;
  overflow: hidden;
  transition-duration: 0.25s;
  transition-property: transform;
}

.thumbclip:hover {
  transform: scale(1.05);
}

.thumbclip img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0; top: 0;
}


@media screen and (max-width: 52em) {
  /* iPhone landscape mode: 2 to 4 photos on a line. */
  .thumb { height: 8em; min-width: 4em; margin: 0 0 2px 0; }
}

@media screen and (max-width: 480px) {
  /* iPhone portrait mode: 2 to 4 photos on a line. */
  .thumb { height: 6em; min-width: 2em; margin: 0 0 2px 0; }
}


/* Make images pop up on mouseover
 */

.thumbox img,
.nascar img,
.thumb, .fthumb {
  transition-duration: 0.25s;
  transition-property: transform;
}
.thumbox:hover img,
.thumb:hover,  .thumb:focus, .thumb:active,
.fthumb:hover, .fthumb:focus, .fthumb:active {
  transform: scale(1.05);
}
.nascar img:hover {
  transform: scale(1.1);
}


/* Photo booth. */

.photo_strip {
   display: inline-block;
   vertical-align: top;
   width: 8em;
   height: 21em;  /* avoid thrashing */
   margin: 0.25em 0.5em;
}

.photo_strip .thumb {
  width: 100%; height: auto;
}

.photo_strip .ftitle {
  display: none;
  position: static;
  font-size: 7pt;
  white-space: nowrap;
  width: auto;
}


@media screen and (max-width: 52em) {
  /* iPhone landscape mode: 4 strips on a line. */
  .photo_strip { width: 8em; height: 20em; margin: 0.5em 0.1em; }
}

@media screen and (max-width: 480px) {
  /* iPhone portrait mode: 2 photo strips on a line. */
  .photo_strip { width: 9.5em; height: 24em; margin: 0.5em 0.1em; }
}


/****************************************************************************
 Directions and Contact
 ****************************************************************************/
.mapbox {
  float: right; margin: 0 2px 1em 1em; font-weight: bold;
  text-align:center; font-size: smaller; max-width: 40%;
}

.mapbox img {
  display: block; width: 100%; height: auto;
  max-width: 640px; max-height: 480px;
  border: 1px solid; margin-bottom: 0.5em;
}

@media screen and (max-width: 38em) { .mapbox { font-size: 9pt; } }
@media screen and (max-width: 25em) { .mapbox { font-size: 5pt; } }




/****************************************************************************
 Browser-specific bullshit.
 ****************************************************************************/

/* Make scaled images not look like crap in MICROS~1.EXE */
img { -ms-interpolation-mode:bicubic; }

/* Opera Mobile thinks our zip code should be a clickable phone number.
   It also forces a line-break before it!  Fix that. */
a[href^="tel:"] { display: inline !important; }

/* Chrome ignores the SIZE attribute on INPUT fields!  WTF Chrome! */
input[size="1"]  { width: 1em;  }
input[size="2"]  { width: 2em;  }
input[size="3"]  { width: 3em;  }
input[size="4"]  { width: 4em;  }
input[size="5"]  { width: 5em;  }
input[size="6"]  { width: 6em;  }
input[size="7"]  { width: 7em;  }
input[size="8"]  { width: 8em;  }
input[size="9"]  { width: 9em;  }
input[size="10"] { width: 10em; }
input[size="11"] { width: 11em; }
input[size="12"] { width: 12em; }
input[size="13"] { width: 13em; }
input[size="14"] { width: 14em; }
input[size="15"] { width: 15em; }
input[size="16"] { width: 16em; }
input[size="17"] { width: 17em; }
input[size="18"] { width: 18em; }
input[size="19"] { width: 19em; }
input[size="20"] { width: 20em; }
input[size="21"] { width: 21em; }
input[size="22"] { width: 22em; }
input[size="23"] { width: 23em; }
input[size="24"] { width: 24em; }
input[size="25"] { width: 25em; }
input[size="26"] { width: 26em; }
input[size="27"] { width: 27em; }
input[size="28"] { width: 28em; }
input[size="29"] { width: 29em; }
input[size="30"] { width: 30em; }
input[size="31"] { width: 31em; }
input[size="32"] { width: 32em; }
input[size="33"] { width: 33em; }
input[size="34"] { width: 34em; }
input[size="35"] { width: 35em; }
input[size="36"] { width: 36em; }
input[size="37"] { width: 37em; }
input[size="38"] { width: 38em; }
input[size="39"] { width: 39em; }
input[size="40"] { width: 40em; }


/****************************************************************************
 Scaling for tiny screens, normal pages.
 (Scaling of the front page and menus was handled above.)
 ****************************************************************************/

@media screen and (max-width: 480px) {

  html, body { margin: 0; padding: 0; }

  /* 2px on right so that "100% wide, 1px border" doesn't exceed page size */
  /* But if that's happening, there's probably a missing "box-sizing". */
  body { margin: 2px 2px 0 0; }

  .codeword .gbox, .gwbox, .sbox { font-size: 12pt; }

  .sub  { padding: 0.5em 0.5em 0.5em 7.5em; }
  .subD { width: 7em; }
  .gthumbox { width: 100%; display: block; margin: 1em 0; }
  .videogroup .video_floater { min-width: 310px; }
}


/* Our default font size looks OK on real computers, but iPhones really
   want it to be 12pt.

   On iPhone, clicking on a text field or menu zooms the page in, and does
   not zoom it back out, unless that element has font-size >= 16px.

   Use max-device-width instead of max-width so that this triggers only on
   small hardware, not on small desktop windows.
 */
@media screen and (max-device-width: 736px) {
  body,td,th { font-size: 12pt; }
  .blogheader, .sub, tt, pre { font-size: 10pt; }
  .blogheader > a { font-size: 9pt; }
  select, input { font-size: 16px; }
  /* Reducing the font size on input[type=submit] looks bad when it is
     next to input[type=text]. */

  .donate_box input[type=submit] { font-size: 9pt; }
}


/* Don't zoom the page or resize fonts when iPhone rotates to landscape. */
html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/****************************************************************************
 Web fonts! How futurey.
 ****************************************************************************/

@font-face {
  font-family: "Helvetica Neue LT Com";
  font-weight:  bold;
  font-style:   normal;
  font-variant: normal;
  src: url("/backstage/images/HelveticaNeueLTCom-BlkEx.ttf");
}

@font-face {
  font-family: "Yearling";
  font-weight:  normal;
  font-style:   normal;
  font-variant: normal;
  src: url("/backstage/images/yearling.ttf");
}

@font-face {
  font-family: "YearlingLite";
  font-weight:  normal;
  font-style:   normal;
  font-variant: normal;
  src: url("/backstage/images/yearlinglite.ttf");
}

.dnalounge .gwbox {
  font-family: "Helvetica Neue LT Com",Arial,Helvetica,sans-serif;
  padding-bottom: 0.2em;  /* smaller bottom margin with this font */
}

.frontpage .addr {
  font-family: "Helvetica Neue LT Com",Arial,Helvetica,sans-serif;
}

.codeword .gbox, .codeword .gwbox, .codeword .menu,
.codeword .frontpage .addr {
  font-family: YearlingLite,Arial,Helvetica,sans-serif;
}

.codeword .gwbox { padding-top: 0.2em; padding-bottom: 0.2em; }


/****************************************************************************
 Printing.  Force black on white, hide some elements.
 ****************************************************************************/

@media print {
  * { color: black !important;
      border-color: black !important;
      background: inherit !important;
      text-stroke-width: 0 !important;
      -webkit-text-stroke-width: 0 !important;
  }

  .dim, .dim * { color: #CCC !important; }

  hr { background: black !important; }

/*  .codeword .masthead img { content:url(/logo-small.png); } / * Black image */
  .codeword .masthead { border-color: white !important; border-right-width: 2.1em; }

  .masthead, .menu, .noprint,
  .navL, .navR, .navC, .navC2,
  .likers, .likersR, .comments, .authlinks { display: none !important; }

  .sub { min-height: 0; }


  /* Make printing work when Photoswipe is showing an image. */
  body.pswp_active { width: 8in !important; height: 10in !important; }
  .pswp_active .pswp__zoom-wrap {
    display: block !important;
    text-align: center;
    transform: none !important;
  }
  .pswp_active .pswp__img {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    border: 0 !important;
  }
  .pswp_active .page img,
  .pswp_active .galhead,
  .pswp_active .gbyline,
  .pswp_active .gheading,
  .pswp__ui,
  .pswp__bg { display: none !important; }

}