/* CSS for calendar on dnalounge.com; ../dnalounge.css is loaded first. */

.page  { max-width: 70em; }
.right { max-width: none; }

.vevent      { }
.summary     { }
.description { }
.dtstart     { }
.duration    { }
.tzid        { }
.url         { }
abbr         { border: 0; }    /* lose stupid underline in Firefox */

.repeat    { margin-bottom: 1em; }
.genre     { margin-bottom: 1em; }
.time      { margin-bottom: 1em; }
.age       { margin-bottom: 1em; }
.price     { margin-bottom: 2em; }
.tickets   { margin-bottom: 2em; display: inline-block; text-align: left; }
.vip       { display: block; margin-left: 3.6em; }
.aff       { font-size: smaller; }

.tickets input.btn[type="number"] { font-size: 10pt; }
.tickets input.btn[type="submit"] { font-size: 10pt; }

form        { margin-bottom: 0.3em; white-space: nowrap; }
.fblike, .plusonebox { padding: 0; margin: 0 0 0.3em auto; width: 90px; }
.plusonebox { width: 100%; text-align: right; padding-left: 15px; }

.video_floater { width: 98%; min-width: 0; margin-top: 0.5em; }

.galcthumb  { border: 1px solid; margin-left: 0.3em; }


/* The calendar grid */

.navC  { color: #0F0; }
.navLA { left:  0.2em; top: 0em; padding-right: 0.3em; }
.navRA { right: 0.5em; top: 0em; padding-left:  0.3em; }

.calbox { margin: 0 auto; }

.calrow {
  position: relative;
  width: 100%;
  padding-bottom: 14.2857%;  /* 7 columns = 1/7 */
}

.ccell { 
  position: absolute;
  overflow: hidden;
  text-align: center;

  width:  13%;   /* a bit less than 1/7, to provide a gutter */
  height: 91%;   /* W/(1/7) */

  border: 1px solid #040;
  color: #666;
  font-size: 8pt;
  font-weight: bold;
}

.ccella { height: 50%; }
.ccellb { height: 32%; top: 59%; }

.calhead { padding-bottom: 1.5em; }
.calhead .ccell { color: #0F0; border: 0; font-size: 10pt; }

.ccell0 { left: 0; }
.ccell1 { left: 14.2857% }  /* 1/7 */
.ccell2 { left: 28.5714% }  /* etc */
.ccell3 { left: 42.8571% }
.ccell4 { left: 57.1429% }
.ccell5 { left: 71.4286% }
.ccell6 { left: 85.7143% }

A.ccell  { font-weight: normal; text-decoration: none; }
.ccell B { display: block; font-size:9pt; margin-bottom: 0.2em; }
.ccell I { display: block; font-size:6pt; margin-top:    0.3em; }
.ccell > div { margin: 0.3em; }

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

 .ccellN       { opacity: 0.5; }  /* day pulled from next month */
A.ccellN:hover { opacity: 1.0; }


/* On small screens, shrink the font in the calendar grid.
 */
@media screen and (max-width: 640px) {
 .ccell   { font-size:7pt; line-height: 6.5pt; }
 .ccell B { font-size:7pt; line-height: 7pt; margin-bottom: 0; }
 .ccell I { font-size:4pt; line-height: 4pt; margin-top: 0; }
 .ccell > div { margin: 0; }
}


/* The "This Week" listing under the current month's grid. */

.thisweek {
  width: 100%;
  float: right;
}

.thisweek_daybox {
  float: left;
  width: 20%;
}

.thisweek_day {
  padding: 0.5em 0.5em 1em 0.5em;
  vertical-align: top;
  text-align: center;
}

.thisweek_label {
  font-weight: bold;
  min-height: 4.2em;
  padding-bottom: 0.5em;
}

.thisweek_label b {
  display: block;
  padding-bottom: 0.5em;
}



/* The individual event pages, /calendar/YYYY/MM-DD.html */

.event_title_box {
  border: 1px solid; background: #040;
  padding: 0.5em 1em;
  margin-bottom: 0.5em;
  text-align: center;
}

.event_title {
  font-size: 20pt; font-weight: bold; text-transform: uppercase;
          text-stroke: 1px #000;
  -webkit-text-stroke: 1px #000;
}

.pres { font-weight: bold; }
.title_image { width: 400px; height: auto; max-width: 100%; }


.event_flyer {
  float: right;
  text-align: right;
  margin: 0 0 1em 0;
  width: 33%;
}

.fthumb { width: 100%; height: auto; margin: 0; padding: 0; }

.event_video {
  float: right; clear: right;
  text-align: right;
  margin: 0 0 1em 0;
  width: 33%;
}

.event_video .video_floater { margin-top: 0; }

.event_awards {
  float: right; clear: right;
  text-align: right;
  font-size: 8pt; padding: 1em; margin: 0 0 1em 1em;
  border: 1px solid #080;
}

.event_photos {
  width: 66%;
  margin: 0 0 1em 0;
  white-space: nowrap;
}

.galcthumb {
   width: 15.4%; height: auto;
   margin-left: 1%;
   border: 1px solid #666;
}
.event_photos a:first-child .galcthumb { margin-left: 0; }
a .galcthumb:hover { opacity:0.8; }

.event_gallery b { display: block; margin: 0.5em 0 0.3em 0; }
.event_gallery .galcthumb {
  width: 8em; height: auto;
  margin: 0 0 1em 0;
}


.event_info_box {
  width: 65%;
  display: table;
  margin: 0 0 2em 0;
}

.event_stats_box, .event_share_box { 
  display: table-cell;
  width: 49%;
  text-align: center;
  vertical-align: top;
  border: 1px solid; padding: 1em 2em;
  background: #020;
}

.event_stats_top { display: none; }  /* phone only */
.event_stats_bottom { }              /* non-phone only */

/* #### */
.event_stats .time  { font-size: 12pt; font-weight: bold; }
.event_stats .age   { font-size: inherit; }
.event_stats .age   { margin: 1em 0; }
.event_stats .price { font-size: inherit; }


.event_share_box {
  background: inherit;
  padding: 1em;
}

.share_line { margin-top: 1em; }

.event_spacer { 
  display: table-cell;
  width: 2%;
  min-width: 1em;
}

.event_stats {
  vertical-align: top;
  text-align: left;
}

.event_date {
  font-size: 12pt; font-weight: bold;
}

.holiday {
  font-style: italic;
  margin-bottom: 1em;
}

.facebook, .twitter { 
  width: 1.4em; height: 1.4em; border: 0; margin-bottom: -0.1em;
  vertical-align: bottom;
}

.facebook:hover, .twitter:hover { opacity:0.8; }

.event_like {
  width: 6.7em;
  display: inline-block; vertical-align: top;
  text-align: left;
  margin: 0 1em 1em 0;
  white-space: nowrap;
}

.event_export {
  display: inline-block; vertical-align: top;
  text-align: left;
  font-size: 9pt;
  margin: 0 0 1em 0;
 }

.event_like b {
  padding-right: 0.5em;
}

.event_export ul   { padding: 0; margin: 0.4em 0; }
.event_export li   { padding: 0; margin: 0; list-style-type: none; }
.event_export li a { display: block; width: 100%; padding: 1px 0.3em; }
.event_export li a:hover { background:#040; }

.event_desc {
  position: relative;
}

.event_lineup {
  width: 30%;
  position: absolute; left: 0;
  margin-bottom: 1em;
}

.noblurb {
  position: static;
  width: auto;
  max-width: 66%;
}

.event_blurb {
  margin: 0 0 1em 33%;
}

.nolineup {
  margin-left: 0;
}

.related_bottom { display: none; }  /* phone only */
.related_top    { }                 /* non-phone only */

.related_box { margin-top: 3em; border: 1px solid; padding: 0.5em 0;
  text-align: center; }
.related_events   { display: inline-block; text-align: left; }
.related_events b { margin: 1em 0 1em 0.6em; display: block; }

.related_events ul {
  padding: 0;
  margin: 0.4em 0.3em 1em 0.3em;
}

.reld { }
.related_events li { position: relative; }
.related_events li .reld {
  position: absolute; left: 0;
  display: block;
  text-align: right;
  width: 3.7em;
  white-space: nowrap;
}
.related_events li {
  padding: 0 0 0 4em;
  list-style-type: none;
  font-size: 9pt;
}
.related_events li a {
  display: block;
  width: 100%;
  padding: 1px 0.2em 1px 4.2em;
  margin-left: -4.2em;
}
.related_events li a:hover { background:#040; }



/* The calendar has several different layout configurations based on the
   size of the window.  I tried to make everything just flow dynamically,
   but that didn't look good.  So, instead, there are a bunch of hardcoded
   sizes based on the area we have to work with.
 */

/* Somewhat smaller windows: use 2 columns instead of 3.
 */
@media screen and (max-width: 740px) {
  .event_photos { width: auto; clear: right; }
  .event_info_box { width: auto; }
  .event_awards { display: none; }
  .event_video { float: none; clear: none; width: 65%; }
  .event_lineup { width: 48%; }
  .event_blurb  { margin-left: 52%; }

  .thisweek { font-size: smaller; }
}

/* iPhones and other really small screens.  Stack it all in a single column.
 */
@media screen and (max-width: 550px) {
  .event_info_box { display: block; }
  .event_stats_box, .event_share_box {
    display: block;
    width: auto;
    margin: 0;
  }

  .event_stats { display: inline-block; }
  .event_stats_bottom { display: none; }
  .event_stats_top {
    display: block;
    background: inherit;
    border: 0;
    padding: 0;
  }

  .related_top    { display: none; }
  .related_bottom { display: block; }
  .related_events li { font-size: inherit; }


  .event_spacer { display: none; }
  .event_share_box { display: inline-block; margin-bottom: 0; }
  .event_info_box { margin-bottom: 1em; text-align: center; }

  .event_lineup { width: auto; position: static; margin: 0 0 2em 0; }
  .event_blurb  { margin: 0 0 1em 0; max-width: none; }
  .event_like, .event_export { margin: 0 1em; }
  .event_like p { margin-bottom: 0; }

  .event_gallery b { margin-top: 1em; }

  .thisweek { font-size: 7pt; }
  .thisweek_day { padding: 0.5em 0.2em 1em 0.2em; }
  .thisweek_label { min-height: 5em; font-weight: normal;
    padding-bottom: 0.2em;
 }

}


/* The "/tickets/" page */

.tbevent { position: relative; padding-left: 6.5em; margin-bottom: 1em; }
.tdevent { position: relative; padding-left: 6.5em; margin-bottom: 0.5em; }
.trevent { position: relative; margin-bottom: 0.5em; }
.tbevent, .tdevent { min-height: 2em; }
.trevent { min-width: 12em; min-height: 4em; margin: 0.5em 1em; }
.trevent .title_image { max-width: 12em; max-height: auto; }
.trevent .title_image:hover { opacity:0.8; }
.tdate   { position: absolute; left: 0; top: 0;
           text-align: right; vertical-align: top; white-space: nowrap;
           width: 6em; font-weight: bold; }
.tname   { text-align: left; vertical-align: top; font-style: italic;
           min-width: 6em; max-width: 10em; margin-right: 1em; }
.tname0  { font-weight: bold; font-style: normal; }


/* The "/tickets/EVENT/" pages */

.pticket_box { border: 1px solid; max-width: 35em; margin: 2em auto; }
.pticket_info_box, .pticket_buy_box {
  display: inline-block; width: 45%; vertical-align: top; }
.pticket_info, .pticket_buy { padding: 1em; }

.pticket_info b { font-size: 14pt; font-weight: bold; }
.pticket_buy a { display: block; font-weight: bold; margin-bottom: 1em; }


@media print {
 .calbox   { max-width: 80em;   }
 A.ccell   { font-weight: bold; }
}