/* CSS for all pages on dnalounge.com */

body      { font-family: Arial,Helvetica,sans-serif;
            color: #0F0; background: #000; }
body,td,th { font-size:10pt; }
hr        { color: #0F0; background: #0F0; height: 1px; border:0; width: 50%; }
a:link    { text-decoration: none; color: #0DF; }
a:hover   { text-decoration: none; color: #FFF !important; }
a:visited { text-decoration: none; color: #AD0; }
a:active  { text-decoration: none; color: #F63; }

/* Various classes used on all pages */

.page     { max-width: 51em; margin: auto; }
.s        { font-size: smaller; }
.sn       { font-size: smaller; white-space: nowrap; }
.box      { border: 1px solid; padding: 0.4em; }
.gbox     { border: 1px solid; background: #040; display: inline-block;
            font-size: larger; font-weight: bold; text-align: center;
            padding: 0.5em 2.5em; }
.sbox     { border: 1px solid; background: #040; font-weight: bold;
            padding: 0.5em 1em; margin-top: 2em; }
.video    { border: 1px solid; }
.column   { display: inline-block; text-align: left; vertical-align: top; }
.btn      { font-size: 7pt; margin: 0; min-width: 3em; }
input.btn[type="submit"] { font-size: 6.5pt; }

/* For pages with white backgrounds */
.white           { color: #000; background: #FFF; }
.page.white      { padding: 1em; }
.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; height: 1px; border:0; }


/*.likers { position: relative; border: 0; width: 90px; border:1px solid red; }*/

/* 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.
 */
.fblike   { border: 0; overflow: hidden;
            width: 90px; height: 20px; margin-top: 4px;
	  }
.fblikeBG .fblike { background: #C7C7C7;
                    border-radius: 4px;
               -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
                  }

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

.likersR { position: relative; }
.likersR  .fblike     { position:absolute; top: 0;   right: 0;     }
.likersR  .plusonebox { position:absolute; top: 2em; right: -15px; }


.nascar { width: 90px; border: 0; text-align: left; padding: 4px 0 0 0; }
.nascar img { width: 24px; height: 24px; border: 0; }
.nascar img#facebook { margin-left: -2px; }
.nascar img#rss { margin: 0 4px; }
.nascar a:hover { opacity:0.8; }

.comments   { margin: 1em 1em 0 0; text-align: right; 
              font-size: smaller; font-style: italic; }

/* Disqus */
#dsq-content h3 { font-size: 10pt; }
#dsq-footer { font-size: 8pt; }
#dsq-content select,
#dsq-content #dsq-sortby select {
  color: #FFF; background: #040;
  border: 1px solid #0F0 !important;
}
.dsq-comment-text { color: #0F0; }

/* Disqus for mobile */
/* -- I disabled their mobile theme instead.
#dsq-content, #dsq-topbar, #dsq-comments,
#dsq-content .dsq-comment-message {
  background: #000 !important;
  color: #080 !important;
}
#dsq-content .dsq-comment { border-bottom-color: #0F0 !important; }
#dsq-content .dsq-bar-reply,
#dsq-content .dsq-bar-like,
#dsq-content .dsq-bar-edit {
  color: #0F0 !important;
  background-color: #040 !important;
  padding: 4px important;
}
#dsq-content .dsq-avatar { border: 0 !important; }
#dsq-content #dsq-sortby select,
#dsq-content button.dsq-submit {
  color: #FFF !important;
  background: #040 !important;
  border: 1px solid #0F0 !important;
  text-shadow: none !important;
}
.dsq-mobile #dsq-topbar, .dsq-divider2 { display: none !important; }
.dsq-mobile .dsq-timestamp { color: #080 !important; }

.dsq-mobile .dsq-comment-header {
  border-top: 1px solid #444 !important;
  background: #222 !important;
  min-height: 3em;
}
*/


/* The left-side navigation menu. */

.icon      { width:13.5em; height:4.35em; border: 0; }
.left      { float: left; width: 13.5em; }
.left2     { clear: left; padding-top: 2em; }
.right     { margin-left: 15.5em; }
.bottom    { clear: both; }
.menubox   { border: 1px solid; padding: 1em 1em 0 1em; margin-top: 1em;
             text-align: left; }
.menu      { list-style: none; padding: 0; margin: 1em 0 0 0; }
.menu li   { font-weight: bold; margin: 0 -1em 0 0; padding-left: 1em; }
.menu li a { display: block; padding-left: 1em; margin-left: -1em; }
#menu1     { margin: 0 0 0 -1em; }

.menu li a:hover { background:#040; }

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

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

/* The RSS/iCal button */

.xml_button { color: #FFF; background: #F60; text-decoration: none;
              padding: 0 0.5em; border: 2px outset #F60; 
              margin-right: 4px;
              font-size: 8pt; font-weight: bold; }
.xml_button:hover  { background: #F90;    }
.xml_button:active { border-style: inset; }


/* Blog subheadings */

.sub  { border: 1px solid; background: #040; font-weight: bold;
        padding: 0.5em 2em 0.5em 10em; margin-top: 2em;
        min-height: 3em;
        position: relative; }
.subD { position: absolute; left: 0.5em; top: 0.5em; }

.sub .likers { float: right; margin: -6px -2.5em 0 0.5em; }


/* The flyers and photo galleries */

.navL   { color: #666; font-weight: bold; float: left; }
.navR   { color: #666; font-weight: bold; float: right; text-align:right; }
.navC   { color: #666; font-weight: bold; text-align: center; }
.navL2  { margin: 0 1em 0 0; }
.navR2  { margin: 0 0 0 1em; }
.navLA  { color: #666; background: #000; font-weight: bold;
          position: absolute; z-index: 1;  left: 0.5em; top: 0.75em;  }
.navRA  { color: #666; background: #000; font-weight: bold; text-align:right;
          position: absolute; z-index: 1; right: 0.5em; top: 0.75em;  }
.navC2  { font-weight: bold; text-align: right; display: inline-block; 
          margin-top: 2em; clear: both; }
.photo  { width: 100%; height: auto; margin: 0.3em 0; border: 1px 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; }
.flyertix { text-align: center; margin: 1em 0; }

.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%;
}
.video_frame {
  overflow: hidden;
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  padding-top: 30px;      /* plus fixed height Youtube controls */
  border: 1px solid #080;
  background: #000;
}
.video_embed {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border: 0; margin: 0; padding: 0;
  z-index: 1;  /* Otherwise controls aren't clickable, WTF. */
}

iframe { background: transparent; }


/* Inside a "videogroup", videos are smaller than 100% wide.
 */
.videogroup .video_floater {
  width: 30%; min-width: 316px; max-width: 480px;
}


/* Top level page, and Facebook */

.overview { border: 1px solid; padding: 1em 0.5em; white-space: normal; 
            font-size:smaller; text-align: center; margin-bottom: 2em; }
.overH    { font-size:larger; font-weight: bold; margin-bottom: 0.5em; }
.overB    { font-size:larger; margin: 0.8em 0 1.5em 0; }
.over     { position: relative; padding-left: 6.5em; text-align: left;
            margin-bottom: 0.2em; }
.overD    { position: absolute; width: 6em; left: 0; top: 0;
            text-align: right; padding-right: 0.2em; display: block; }
.over a   { display: block; }
.over a:hover { background: #040; }

.snaps         { text-align:left; white-space: nowrap; }
.snaps img     { border: 0; }
.snaps a:hover { opacity:0.8; }

.upcoming { border: 1px solid; padding: 1.5em 2.5em; }


/* The flyer gallery index pages */

.fthumbox { font-weight: bold; text-align: right; margin-bottom: 1em;
            min-height: 7em; position: relative; }
.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; }


/* The photo gallery index pages */

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


/* The photo gallery year index pages */

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

/* Shrink the thumb boxes when the window gets narrow, to try and
   keep at least two columns.
 */
@media screen and (max-width: 1024px) { .gthumbox { width: 12em; } }
@media screen and (max-width: 800px)  { .gthumbox { width:  8em; } }
@media screen and (max-width: 700px)  { .gthumbox { width: 12em; } }


/* 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="12"] { width: 12em; }
input[size="20"] { width: 20em; }
input[size="21"] { width: 21em; }
input[size="22"] { width: 22em; }
input[size="26"] { width: 26em; }
input[size="31"] { width: 31em; }
input[size="36"] { width: 36em; }
input[size="37"] { width: 37em; }


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


/* On devices with small screens, set the font to 12pt.
   Our default of 10pt looks ok on real computers, but iPhones
   really want it to be 12pt.
 */
@media screen and (max-device-width: 480px) {
  body,td,th { font-size: 12pt; }
}

/* 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) {
  body,td,th { font-size: 8pt; }
}


/* Any time the window is really narrow, switch the menu to be at
   the top.  It will always look like this on an iPhone, and will
   look like this on a desktop browser if the window is very narrow.
 */
@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 */
  body { margin: 2px 2px 0 0; }

  .left         { width: 100%; float: none; margin: 0 auto 0 auto; }
  .left2        { margin: 0 1em 0 1em; padding: 0; }
  .left2 > .box { width:13.5em; margin: 1em auto 0 auto; }
  .right        { margin: 0; padding-top: 1em; border-top: 1px solid; }

  .left2 .navC { margin-top: 1em; }

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

  .icon       { float: left; width: 8.4em; height:auto; }
  .menubox    { border: 0; padding: 0 0.5em 0 0.5em; margin: 0; clear: none; }
  .menu       { float: left; }
  #menu1      { float: none; padding: 0 0.3em; margin: 0 0 0 8em; }
  #menu1 li   { margin: 0; padding: 0; white-space: normal; width: auto; }
  #menu2      { clear: left; width: 50%; text-align: right; margin-top:0.5em; }
  #menu2 li   { margin-right: 1em; }
  #menu2 li a { padding-right: 1em; margin-right: -1em; }
  #menu3      { width: 50%; margin-top: 0.5em; }
  #menu4      { margin: 0.5em 0 0 0; width: 100%; clear: left;
                text-align: center; }

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

  .galfbox         { margin-right: 0; }
  .galibox         { float: left; width: 160px; min-width: 90px; 
                     margin: 0.5em 0 0 0; }
  .galfbox .fthumb { width: 70px; }
  .galibox .icon   { width: 60px; }

  .gthumbox { width: 13em; display: block; margin: 1em 0; }
}


/* Printed output */

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

 .left       { display: none !important; }
 .right      { margin-left: 0; }

  hr         { background: black !important; }

 .noprint    { display: none !important; }
 .xml_button { display: none !important; }
 .navL       { display: none !important; }
 .navR       { display: none !important; }
 .navC       { display: none !important; }
 .navL2      { display: none !important; }
 .navR2      { display: none !important; }
 .navLA      { display: none !important; }
 .navRA      { display: none !important; }
 .navC2      { display: none !important; }
 .likers     { display: none !important; }
 .likersR    { display: none !important; }
 .comments   { display: none !important; }
 .sub        { min-height: 0; }
}