/* 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 .top #menu1 { margin-top: 8px; }

.codeword .bottom .menu { background: #F79321; }

.dnalounge .bottom    .menu li > a:hover,
.dnalounge .frontpage .menu li > a:hover { background: #040; }

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

.xml_button { color: #FFF; background: #F60; border-color: #F60; }
.xml_button:hover  { background: #F90; }

.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 a .galcthumb { 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 a .galcthumb { border-color: #666; }
.codeword .event_export li a:hover,
.codeword .related_events li a:hover { background: #C83B27; }


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

.top      { max-width: 51em; 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; }
.btn      { font-size: 7pt; margin: 0; min-width: 3em; }
input.btn[type="submit"] { font-size: 6.5pt; }

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


.nascar { width: auto; border: 0; text-align: left; white-space: nowrap; 
  padding: 4px 0 0 0; }
.nascar img { width: 1.7em; height: 1.7em; border: 0; margin-left: 2px; }
.nascar img#facebook { margin-left: -2px; }
.nascar a:hover { opacity:0.8; }

.dnalounge .frontpage .nascar { padding-top: 1em; }
.codeword  .frontpage .nascar { padding: 0.5em 0 0 2.2em; font-size: 12pt; }


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

/****************************************************************************
 Menus: horizontal on most pages, vertical on the top-level page.
 ****************************************************************************/

/* By default the .menu UL is horizontal with 6 elements. */

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  width: 100%;
}
.menu li {
  display: inline-block;
  width: 16.6666%;	/* important: no whitespace between </LI> and <LI> */
  font-weight: bold;
  margin: 0 0 0.3em 0;
}

.codeword .menu li { width: 28.3333%; font-size: 18pt; }
.codeword #menu1 { padding-top: 0.6em; }
.codeword #menu2 { padding-bottom: 1em; }

.menu li > a, .menu li > b {
  display: block;
  vertical-align: top;
  white-space: nowrap;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  border-width: 1px;
  border-style: solid;
  padding: 0.2em 0;
  margin: 0 0 0 0.4em;
}

.codeword .menu li > a, .codeword .menu li > b { text-transform: lowercase; }

.codeword .bottom { clear: left; }


/* When a menu is on the top-level page, or in the body of another page
   rather than the header (e.g., the store pages) then it is vertical.
 */

.bottom    .menu,
.frontpage .menu {
  margin: 0;
  padding: 0 0.2em;
}

.bottom .menu { width: auto; border-width: 1px; border-style: solid;
   padding: 0.5em 0; }

/* The front page menu is vertical by default, but becomes horizontal
   when the window gets small.
 */
.frontpage .menu {
  position: absolute;
  top: 0;
  right: 0;
  width: 9em;
  margin-top: 0.6em;
  vertical-align: top;
}
.dnalounge .frontpage .menu2 { top: 9em; }
.codeword  .frontpage .menu  { padding-top: 0; z-index: 2; }
.codeword  .frontpage .bottom  { position: relative; z-index: 2; }
.codeword  .frontpage #menu1 { padding-top: 0; }
.codeword  .frontpage #menu2 { top: 6em; }


.bottom    .menu li,
.frontpage .menu li {
  display: block;
  width: auto;
  margin: 0.2em 0;
}

.frontpage .menu li { margin: 0; }

.bottom    .menu li > a,
.bottom    .menu li > b,
.dnalounge .frontpage .menu li > a,
.dnalounge .frontpage .menu li > b {
  text-align: left;
  background: inherit;
  border: 0;
  padding: 0 1em;
  margin: 0;
}

.codeword .bottom .menu li { font-size: 14pt; }

.dnalounge .frontpage .menu li > a { padding: 0; }
.dnalounge .frontpage .menu li > a:hover {
   margin-left: -2em; padding-left: 2em;
}
.codeword .frontpage .top { margin: 0; z-index: 2; min-height: 17em; }
.codeword .frontpage .menu { width: 11em; }
.codeword .frontpage .menu li > a { padding: 0 0 0 1em; text-align: left; }



/* The masthead defaults to being a clipped viewport, but becomes the
   unadulterated logo when the window gets small.
 */
.dnalounge .masthead {
  height: 5.2em; 
  overflow: hidden;
  position: relative;
  top: -1em;
}
.dnalounge .masthead img {
  position: absolute;
  vertical-align: top;
  width: 123%; top: -67%; left: -1.9%;
}

.codeword .masthead {
  width:  15%; height: auto;
  float: left;
  border-right: 0.6em solid rgba(0,0,0,0);
  box-sizing: border-box;
  margin-bottom: 0.3em;
}

.codeword .masthead img {
  position: relative;
  background: none; border: 0; width: 100%; height: auto;
  max-width: 440px; max-height: 480px;
}

.codeword .frontpage .gwbox { margin: 0; }

.codeword .frontpage .masthead { width: 100%; border-right: 0; }
.codeword .frontpage .masthead img { max-width: 1280px; max-height: 1280px; }

.codeword  .frontpage .top { overflow: hidden; }
.codeword  .frontpage canvas {
  width: 100%; height: 100%; position: absolute; left: 0; top: 0;
}
.codeword .frontpage .masthead img,
.codeword .frontpage canvas {
  margin-top: -8%;
}

.codeword .frontpage input[type="email"] {
  font-size: 12pt;
  width: 9.5em;
}

a .icon:hover   { opacity:0.8; }
a .fthumb:hover { opacity:0.8; }

.hidesmall { display: block; }
.showsmall { display: none;  }


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

.page.frontpage {
  text-align: center;
  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;
}

.frontpage .top {
  position: relative;
  padding-right: 11.5em;	/* width of menu plus margin */
  xmax-width: 660px;		/* Roughly 800px - 11.5em. Ugh. */
  text-transform: uppercase;
  margin: 0 auto 2em auto;
  font-weight: bold;
  text-align: center;
}

.frontpage .logo {
   width: 100%;
   height: auto;
   display: block;
   margin-bottom: 0.2em;
   min-height: 12em;		/* in case the image hasn't loaded yet */
}

/* Front page flyers */

.frontpage .thumbline, .frontpage .snaps, .frontpage .bottom_box {
  max-width: 800px; margin: auto; overflow: hidden;
}
.frontpage .thumbline, .frontpage .snaps { white-space: nowrap; }
.frontpage .snaps { padding-bottom: 1px; }

.thumbox {
  padding: 0.5em 0;
  margin: 0.5em auto 2em auto;
  display: inline-block;
  text-align: center;
  vertical-align: top;
}
.thumbody    { width: 95%; margin: auto; }  /* No way to have fixed margin */
.thumbox b   { display: block; margin-top: 0.5em; text-transform: uppercase; }
.thumbox img { display: block; width: 100%; height: auto; border: 0;
               min-height: 4.5em;  /* in case the image hasn't loaded yet */
 }
.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; }


/* Front page photos */

.snaps         { text-align:left; white-space: nowrap; }
.snaps a:hover { opacity:0.8; }
.snaps img     { border: 0;
                 min-height: 6em;  /* in case the image hasn't loaded yet */
}


.codeword .frontpage .marquee {
  position: absolute; top: 12em; left: 0; right: 0;
  text-align: center;
  font-family: YearlingLite, Arial, Helvetica, sans-serif;
  font-size: 24pt;
}


/* Front page font scaling and reflow:
   Adjust the font size in the menu so that it remains roughly the same
   height as the scaled logo image.
 */

@media screen and (max-width: 850px) {
  .dnalounge .frontpage .top,
  .dnalounge .frontpage .addr,
  .dnalounge .frontpage .menu { font-size: 10.25pt; }
  .dnalounge .thumbox         { font-size: 9.5pt; }
  .dnalounge .frontpage .top { padding-right: 10em; }
  .dnalounge .frontpage .menu { margin-top: 0.5em; }
  .dnalounge .frontpage .menu li > a:hover { margin-left: -0.5em; padding-left: 0.5em; }

  .codeword .frontpage .marquee { top: 10em; }
}

/* iPad */
@media screen and (max-width: 780px) {
  .dnalounge .frontpage .menu { margin-top: 0; }
  .dnalounge .thumbox         { font-size: 8.25pt; }
  .codeword .frontpage input[type="email"] { width: 9.1em; }
  .codeword .frontpage .marquee { top: 8em; }
}

@media screen and (max-width: 710px) {
  .dnalounge .top .menu { font-size: 9pt; }  /* top menu must preceed frontpage menu */
  .dnalounge .frontpage .top,
  .dnalounge .frontpage .addr,
  .dnalounge .frontpage .menu { font-size: 9.25pt; }
  .dnalounge .thumbox         { font-size: 7.5pt; }
}

@media screen and (max-width: 630px) {
  .dnalounge .frontpage .top,
  .dnalounge .frontpage .menu { font-size: 7.5pt; }
  .dnalounge .frontpage .addr { font-size: 8pt;   }
  .dnalounge .thumbox         { font-size: 6.5pt; }
  .codeword .frontpage .marquee { top: 3em; right: 6em; }
}

/* Window gets smaller now.
   On the top level page: move the menu under the logo.
   On other pages: 3 columns instead of 6 in the menu.
   Make the menu font larger again.
 */
@media screen and (max-width: 530px) {

  .menu { white-space: normal; }
  .menu li { width: 33.3333%; }
  .dnalounge .top .menu,
  .dnalounge .frontpage .nascar { font-size: 13pt; }

  .gbox, .gwbox, .flyertix { font-size: 11pt; }

  .dnalounge .frontpage .top  { padding: 0; margin: 0 0 1.5em 0; min-height: 0; }
  .dnalounge .frontpage .menu { position: static; margin: 1em auto 0 auto; }
  .dnalounge .frontpage .logo { min-height: 5em; }

  .dnalounge .frontpage .top,
  .dnalounge .frontpage .menu { font-size: 12pt; }
  .dnalounge .frontpage .addr { font-size: 9pt; }
  .dnalounge .thumbox_txt { height: 5.5em; }

  .dnalounge .frontpage .menu1,
  .dnalounge .frontpage .menu2 {
     display: inline-block;
     padding: 0 1em;
   }
  .dnalounge .frontpage .menu1 li > a { text-align: right; }
  .dnalounge .frontpage .menu1 { width: 6.5em; padding: 0 1em 0 0; }
  .dnalounge .frontpage .menu2 { width: 7.5em; padding: 0; }
  .dnalounge .frontpage .menu { width: 45%; }
  .dnalounge .frontpage .menu  li > a:hover { margin: 0 -0.5em 0 -0.5em; }
  .dnalounge .frontpage .menu1 li > a:hover { padding: 0 0.5em 0 0; }
  .dnalounge .frontpage .menu2 li > a:hover { padding: 0 0 0 0.5em; }

  .dnalounge .masthead     { height: auto; position: static; }
  .dnalounge .masthead img { width: 100%; position: static; margin-bottom: 0.7em; }
  .codeword .frontpage .marquee { font-size: 18pt; right: 7em; }

}

/* iPhone-size: bump the font size down one last time. */
@media screen and (max-width: 480px) {
  .dnalounge .frontpage .addr  { font-size: 8pt; }
  .thumbox          { font-size: 7pt; }
  .gwbox, .flyertix { font-size: 8pt; }
  .codeword .frontpage .marquee { top: 11em; font-size: 14pt; right: 6em; }
}



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


/* The RSS/iCal button */

.xml_button { text-decoration: none;
              padding: 0 0.5em; border-width: 2px; border-style: outset; 
              margin-right: 4px;
              font-size: 8pt; font-weight: bold; }
.xml_button:active { border-style: inset; }

.navR .xml_button { display: block; width: 2.2em; text-align: center; 
  margin: 1em 0 0 auto; }


/****************************************************************************
 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; 
          margin-top: 2em; clear: both; }
.photo  { width: 100%; height: auto; margin: 1em 0;
          border-width: 1px; border-style: solid;
          display: block; }
.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; }


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

.galfbox  { float: left; margin: 0 2em 1em 0; white-space: nowrap; }
.galibox  { margin: 1em 2em 1em 0; min-width: 22em; }
.galfbox .fthumb { width: 9em; height: auto; margin: 0 0.5em 0.05em 0; }


/* 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; }
.gthumbox img { position: absolute; left: 0; top: 0;
                width: 6em; height: 6em;
                border-width: 1px; border-style: solid;
                box-sizing: border-box; }
.gthumbox img:hover { opacity: 0.8; }
.gthumbox a { display: block; margin-bottom: 0.5em; }
.gthumbspacer { min-height: 0; margin-top: 0; margin-bottom: 0; }

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

@media screen and (max-width: 52em) {
  .thumb { height: 8em; min-width: 5em; margin: 0 0 2px 0; }
}

@media screen and (max-width: 480px) {
  .thumb { height: 6em; min-width: 4em; margin: 0 0 2px 0; }
}


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

  .dnalounge .menu li { font-size: 11pt; }
  .dnalounge .top .menu { margin-left: -0.3em; width: auto; }

  .codeword .masthead { width: 20%; height: auto; margin-top: 0.4em; }
  .codeword .menu li {
    width: 26.6666%;
    font-size: 12pt;
   }
  .codeword .gbox, .gwbox, .sbox { font-size: 12pt; }

  .codeword .frontpage .menu { width: 6em; margin-right: 1.1em; }
  .codeword .frontpage .top { padding-right: 0; }
  .codeword .frontpage .menu li { font-size: 14pt; width: 6.5em; }
  .codeword .frontpage .menu li > a { padding-left: 0.25em; }
  .codeword .frontpage .nascar { font-size: 10.5pt; padding-left: 1em; }

  .codeword .top #menu1 { margin-top: 0; }
  .codeword  .frontpage #menu2 { top: 5em; }

  .codeword .frontpage .masthead img { margin-left: -7.8em; }
  .codeword .frontpage canvas { margin-left: -1em; }
  .codeword .frontpage .masthead img,
  .codeword .frontpage canvas {
    width: 70%; height: auto;
  }

  .codeword .frontpage input[type="email"] { width: 5.6em; }

  .hidesmall { display: none;  }
  .showsmall { display: block; }

  .sub  { padding: 0.5em 0.5em 0.5em 7.5em; }
  .subD { width: 7em; }

  .galfbox         { margin: 0; }
  .galibox         { min-width: 8em; margin: 0.5em 0 0 0; }
  .galfbox .fthumb { width: 70px; display: block; margin: 0 0.5em 0.5em 0; }
  .galibox .icon   { width: 100%; margin: 0.5em 0; }

  .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.  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: 480px) {
  body,td,th { font-size: 12pt; }
  .blogheader, .sub, tt, pre { font-size: 10pt; }
}


/* When an iPhone is rotated into landscape mode, the viewport stays
   320 wide (scaled up) instead of being 480 wide, which means the
   apparent font-size is scaled up.  So, scale it back down to
   compensate.  This is amazingly dumb.
 */
@media screen and (max-device-width: 480px) and (orientation:landscape) {
  .dnalounge body, .dnalounge td, .dnalounge th { font-size: 8pt; }
}


/****************************************************************************
 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.eot");
  src: url("/backstage/images/HelveticaNeueLTCom-BlkEx.ttf");
  src: url("/backstage/images/HelveticaNeueLTCom-BlkEx.eot")
       format(embedded-opentype),
       url("/backstage/images/HelveticaNeueLTCom-BlkEx.ttf")
       format(truetype);
}

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

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

.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, .xml_button,
  .navL, .navR, .navC, .navC2,
  .likers, .likersR, .comments, .authlinks { display: none !important; }

  .sub { min-height: 0; }
}