/* CSS for all pages on dnalounge.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; }

/* 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, form {
 border-color: inherit; }

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

.dnalounge .err           { color: #F44; }
.dnalounge .notice        { color: #FFF; }
.dnalounge .dim           { color: #060; }
.dnalounge .gwbox .notice { color: #FFF; }
.dnalounge .gwbox .err    { color: #F00; text-shadow: 2px 2px 4px #000; }
.dnalounge .gwbox.err      { background: #0F0; }
.dnalounge .gwbox.err .err { text-shadow: none; }

.dnalounge select.err, .dnalounge input.err, .dnalounge textarea.err
 { color: #FFF; background: #F00; font-weight: normal; }

.dnalounge .flash .err {
  color: #FFF; background: #A00;
  display: inline-block;
  padding: 0.25em 0.5em;
  border: 2px solid #F00;
}

/* For pages with white backgrounds */
.white, body.white, body.dnalounge.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; }

body.dnalounge.white .gwbox {
  color: #000; background: #DDD; border-color: #000; }


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

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

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

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

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

.dnalounge .navL, .dnalounge .navR, .dnalounge .navC { color: #666; }

.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; }

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

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

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

.dnalounge .event_awards { background: #000; }


/* Scrollbar colors, Firefox */
* { scrollbar-color: #080 #000; }

/* Scrollbar colors, Safari, Chrome */
::-webkit-scrollbar { width: 8px; height: 8px; }  /* required */
::-webkit-scrollbar-track {
   background-color: #000; border-radius: 0.2em; border: 1px solid #040; }
::-webkit-scrollbar-thumb {
   background-color: #080; border-radius: 0.2em; }


/* gallery/photoswipe colors and fonts */

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

.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;
}

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

.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,
  .dnalounge .pswp__caption,
  .dnalounge .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);
}

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

.dnalounge .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);
  }
  .dnalounge .pswp--svg .pswp__button--arrow--left,
  .dnalounge .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 { 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; }
.indent   { margin: 1em 0 1em 2.5em; }

.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%; }

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


/* 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 */
}

.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;
}

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

.frontpage .addr      { position: absolute; top: 0.40em; }
.frontpage .subscribe { position: absolute; top: 0.60em; }
.frontpage .nascar    { position: absolute; top: 0.40em; }

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

.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 12 Pro Max	Portrait	 ?	27	 ?	 ?

     iPhone XS Max	Portrait	 ?	26	 ?	 ?
     iPhone XS Max	Landscape	 ?	51	 ?	 ?

     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

     iPad Pro 10.5"	Portrait	 ?	56	 ?       ?
     iPad Pro 10.5"	Landscape	 ?	74	 ?       ?

     iPad Pro 9.7"	Portrait	 ?	51	 ?       ?
     iPad Pro 9.7"	Landscape	 ?	68	 ?       ?

  Sorted by max-w, descending:

     iPad Pro 12.9"	Landscape	85	86	60	60
     iPad Pro 10.5"	Landscape	 ?	74	 ?       ?
     iPad Pro 9.7"	Landscape	 ?	68	 ?       ?
     iPad Pro 12.9"	Portrait	64	64	81	82
     iPad (various)	Landscape	64	64	44	44
     iPad Pro 10.5"	Portrait	 ?	56	 ?       ?
     iPad Pro 9.7"	Portrait	 ?	51	 ?       ?
     iPhone XS Max	Landscape	 ?	51	 ?	 ?
     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 12 Pro Max	Portrait	 ?	27	 ?	 ?
     iPhone 6+ 6s+ 7+	Portrait	25	26	39	40
     iPhone XS Max	Portrait	 ?	26	 ?	 ?
     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.

  Alternately: Or maybe this is wrong...

  69.8 x 93.1	iPad Pro 12.9"
  69.8 x 93.1	iPad Pro 12.9" gen 2
  66.9 x 75.8	iPad Air gen 3
  56.9 x 75.8	iPad Pro 10.5"
  56.9 x 81.4	iPad Pro 11"
  53.1 x 51.2	iPad Retina
  52.4 x 69.8	iPad Pro 9.7"
  52.4 x 69.8	iPad Air 2
  52.4 x 69.8	iPad Air
  52.4 x 69.8	iPad 6th gen
  52.4 x 69.8	iPad 5th gen
  51.2 x 51.2	iPad 2
  28.1 x 28.1	iPhone 6
  25.9 x 46.0	iPhone 6 Plus
  25.9 x 46.0	iPhone 7 Plus
  25.9 x 50.5	iPhone Xr
  23.4 x 41.7	iPhone 6s
  23.4 x 41.7	iPhone 7
  23.4 x 41.7	iPhone 8
  23.4 x 45.3	iPhone X
  20.0 x 35.5	iPhone 5
  20.0 x 35.5	iPhone 5s
  20.0 x 35.5	iPhone SE
 */


/* iPad Portrait, iPhone 6 Plus - 7 Plus, Landscape */
/* @media screen and (max-width: 48em) { } */

/* 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; }
}

/* 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.
   Make the logo full width and put the menu below it. Hide address.
 */
@media screen and (max-width: 27em) {
  .dnalounge .masthead img { position: static; width: 100%; height: auto; }
  .dnalounge .menu { margin: 0.5em 0 0 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; }

  .frontpage .subscribe { top: 0; }
  .frontpage .nascar    { top: 0; }

}

/* 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; }
  .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; }


/****************************************************************************
 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 {
  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;
 }
.thumbox:hover { border-radius: 0.5em; }

.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: 0; */ width: 8em;  /* see below */
  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; }
  .bottom .menu { max-width: 10em; }
}


/****************************************************************************
 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; }


/****************************************************************************
 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%; }


/* 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%;
}

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

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

.vcenter {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.playbutton {
   font-size: 24pt;
   font-weight: bold;
   border: 2px solid;
   padding: 0.25em 0.75em;
   border-radius: 0.75em;
   color: #FFF;
   border-color: #FFF;
   background: rgba(0,0,0,0.6);
 }


/* Safari stupidity (setting 'background' changes button shapes) */
.checkout select:disabled,
.checkout input:disabled,
.checkout input:read-only,
.donate_radio input:disabled,
.donate_radio input:read-only {
  color: #000; opacity: 1.0;
}

.checkout input[type=text]:disabled,
.checkout input[type=text]:read-only,
.checkout input[type=number]:disabled,
.checkout input[type=number]:read-only,
.checkout input[type=tel]:disabled,
.checkout input[type=tel]:read-only,
.checkout input[type=password]:disabled,
.checkout input[type=password]:read-only,
.checkout input[type=email]:disabled,
.checkout input[type=email]:read-only,
.checkout select:disabled {
  background: #AAA; color: #000; 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. */
.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. */
.thumb {
   width: auto; height: 11em;
   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: auto;
   margin: 0.25em 0.5em;
}

.photo_strip_taller { height: 29em; }

.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; }
  .photo_strip_taller { height: 28em; }
}

@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; }
  .photo_strip_taller { height: 34em; }
}


/****************************************************************************
 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; }

  .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; }

  /* Make it take up a little less space */
  .cart_donate_box { padding: 0.5em; }
  .cart_donate_box .donate_radio { font-size: 12pt; }

}


/* 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("https://cdn.dnalounge.com/backstage/images/HelveticaNeueLTCom-BlkEx.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;
}


/****************************************************************************
 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;
  }

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

  hr { background: black !important; }

  .masthead, .menu, .noprint,
  .navL, .navR, .navC, .navC2,
  .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; }

  .snap_box b { color: #0DF !important; }
}