/* CSS for calendar on dnalounge.com
   This is loaded before dnalounge.css.
   Only geometry goes here: all colors are in dnalounge.css.
 */

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


/* hcalendar/vcard micro-format classes */
.vevent, .value-title, .summary, .description, .dtstart, .dtend, .duration,
.url, .fn, .org, .adr, .street-address, .locality, .region, .postal-code,
.country-name, .tzid, .tel, .geo, .latitude, .longitude, .logo, .photo,
.tickets, .ticketAggregate, .itemOffered, .offerURL, .category, .currency,
.location, .vcard, .price, .identifier, .product, .name, .pricerange { }

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; }
.tixbox    { margin-bottom: 2em; display: inline-block; text-align: left; }
.vip       { display: block; margin-left: 3.6em; }
.aff       { font-size: smaller; }

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

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


/* The calendar grid */

.calbox { margin: 2em auto 4em 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-width: 1px;
  border-style: solid;
  font-size: 11pt;
  font-weight: bold;

  hyphens:         auto;
  -webkit-hyphens: auto;
  -moz-hyphens:    auto;
}


.ccell2a { height: 44%; }		/* two events on one day */
.ccell2b { height: 39%; top: 52%; }

.ccell3a { height: 30%; }		/* three events on one day */
.ccell3b { height: 26.5%; top: 34%; }
.ccell3c { height: 26.5%; top: 65%; }

.ccell4a { height: 28%; }		/* four events on one day */
.ccell4b { height: 18%; top: 31%; }
.ccell4c { height: 18%; top: 52%; }
.ccell4d { height: 18%; top: 73%; }

.calhead { padding-bottom: 1.5em; }
.calhead .ccell { 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:11pt; margin-bottom: 0.2em; }
.ccell I { display: block; font-size:9pt;  margin-top:    0.3em; }
.ccell > div { margin: 0.3em; }

 .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: 850px) {
 .ccell   { font-size:10pt; line-height: 0.9em; }
 .ccell B { font-size:10pt; }
 .ccell I { font-size:7pt; }
 .ccell > div { margin: 0; }
}


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


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

   Class hierarchy:
     vevent
       event_title_box
       event_body_box noflyer noblurb nolineup
	 event_photos
	 event_info_box
	   event_stats_box
	   event_share_box
	 event_desc
	   event_lineup
	   event_blurb
	 event_flyer_box
	   event_flyer
	   event_video
	   event_awards
	   related_box


  ---------------------------------------------------------------------------
  | event_title_box							    |
  --------------------------------------------------------------------------|

  Layout A: wide screens, default.

  ---------------------------------------------------------------------------
  |   0: event_body_box	 [noflyer]  [noblurb | nolineup]		    |
  |									    |
  |  ---------------------------------------------  ----------------------  |
  |  |	1: event_photos				 |  | 4: event_flyer_box |  |
  |  |	width: 66%				 |  | left: 66%; top: 0	 |  |
  |  ---------------------------------------------  | -----------------	 |  |
  |						    | |	 event_flyer  |	 |  |
  |  ---------------------------------------------  | |		      |	 |  |
  |  |	2: event_info_box			 |  | -----------------	 |  |
  |  |	width: 66%				 |  |			 |  |
  |  |						 |  | -----------------	 |  |
  |  | --------------------  ------------------	 |  | |	 event_video  |	 |  |
  |  | |  event_stats_box | | event_share_box |	 |  | |		      |	 |  |
  |  | |		  | |		      |	 |  | -----------------	 |  |
  |  | |		  | |		      |	 |  |			 |  |
  |  | |		  | |		      |	 |  | -----------------	 |  |
  |  | -------------------- -------------------	 |  | |	 event_awards |	 |  |
  |  ---------------------------------------------  | |	 float: R     |	 |  |
  |						    | -----------------	 |  |
  |  ---------------------------------------------  |			 |  |
  |  |	3: event_desc				 |  | -----------------	 |  |
  |  |	width: 66%				 |  | |	 related_box  |	 |  |
  |  | --------------------  ------------------	 |  | |		      |	 |  |
  |  | |  event_lineup	  | |  event_blurb    |	 |  | -----------------	 |  |
  |  | |		  | |		      |	 |  |			 |  |
  |  | |		  | |		      |	 |  ----------------------  |
  |  | -------------------- |		      |	 |			    |
  |  |			    -------------------	 |			    |
  |  ---------------------------------------------			    |
  |									    |
  ---------------------------------------------------------------------------

  For events in the past, event_info_box and event_share_box are omitted,
  and event_stats_box is inside event_lineup.


  Layout B: narrower screens.

  -----------------------------------------------------------
  |   0: event_body_box					    |
  |							    |
  |  -----------------------------------------------------  |
  |  |	1: event_photos					 |  |
  |  -----------------------------------------------------  |
  |							    |
  |  -----------------------------------------------------  |
  |  |	2: event_info_box				 |  |
  |  |	width: 100%					 |  |
  |  |							 |  |
  |  | -----------------------	 ----------------------	 |  |
  |  | |  event_stats_box    |	|  event_share_box    |	 |  |
  |  | |		     |	|		      |	 |  |
  |  | |		     |	|		      |	 |  |
  |  | -----------------------	-----------------------	 |  |
  |  -----------------------------------------------------  |
  |							    |
  |  -----------------------------  ----------------------  |
  |  |	3: event_desc		 |  | 4: event_flyer_box |  |
  |  |	width: 66%		 |  | left: 66%; top: 0	 |  |
  |  | ------------------------- |  | ------------------ |  |
  |  | |  event_lineup	       | |  | |	 event_flyer   | |  |
  |  | |		       | |  | |		       | |  |
  |  | |		       | |  | ------------------ |  |
  |  | ------------------------- |  |			 |  |
  |  | ------------------------- |  | ------------------ |  |
  |  | |  event_blurb	       | |  | |	 event_video   | |  |
  |  | |		       | |  | |		       | |  |
  |  | |		       | |  | ------------------ |  |
  |  | ------------------------- |  |			 |  |
  |  -----------------------------  | ------------------ |  |
  |				    | |	 event_awards  | |  |
  |				    | |	 float: right  | |  |
  |				    | ------------------ |  |
  |				    |			 |  |
  |				    | ------------------ |  |
  |				    | |	 related_box   | |  |
  |				    | |		       | |  |
  |				    | ------------------ |  |
  |				    |			 |  |
  |				    ----------------------  |
  |							    |
  -----------------------------------------------------------



  Layout C: iPhone.

  ------------------------------
  |   0: event_body_box	       |
  |			       |
  |  ------------------------  |
  |  |	1: event_photos	    |  |
  |  ------------------------  |
  |			       |
  |  ------------------------  |
  |  |	2: event_info_box   |  |
  |  |			    |  |
  |  |	------------------- |  |
  |  |	| event_stats_box | |  |
  |  |	|		  | |  |
  |  |	|		  | |  |
  |  |	------------------- |  |
  |  |			    |  |
  |  |	------------------- |  |
  |  |	| event_share_box | |  |
  |  |	|		  | |  |
  |  |	|		  | |  |
  |  |	------------------- |  |
  |  ------------------------  |
  |			       |
  |  ------------------------  |
  |  |	3: event_desc	    |  |
  |  |			    |  |
  |  |	------------------- |  |
  |  |	|  event_lineup	  | |  |
  |  |	|		  | |  |
  |  |	------------------- |  |
  |  |			    |  |
  |  |	------------------- |  |
  |  |	|  event_blurb	  | |  |
  |  |	|		  | |  |
  |  |	------------------- |  |
  |  |			    |  |
  |  ------------------------  |
  |			       |
  |  ------------------------  |
  |  |	4: event_flyer_box  |  |
  |  |	------------------- |  |
  |  |	|  event_flyer	  | |  |
  |  |	|		  | |  |
  |  |	------------------- |  |
  |  |	------------------- |  |
  |  |	|  event_video	  | |  |
  |  |	|		  | |  |
  |  |	------------------- |  |
  |  |			    |  |
  |  |	------------------- |  |
  |  |	|  event_awards	  | |  |
  |  |	|  float: right	  | |  |
  |  |	------------------- |  |
  |  |			    |  |
  |  |	------------------- |  |
  |  |	|  related_box	  | |  |
  |  |	|		  | |  |
  |  |	------------------- |  |
  |  |			    |  |
  |  ------------------------  |
  |			       |
  ------------------------------


  Layout B2: email and RSS.
  This is a completely different layout (different order of nodes)
  because of the disaster that is the subset of CSS allowed in HTML
  email, e.g., no media selectors, inline styles only.  In email,
  we manage to squeeze out "wide" and "narrow" layouts by using
  both "width" and "min-width".  On narrow screens, that causes
  event_flyer to go full-width and show up before event_lineup.

  -----------------------------------------------------------
  |   0: event_body_box					    |
  |							    |
  |  -----------------------------------------------------  |
  |  |	3: event_desc					 |  |
  |  |				-----------------------	 |  |
  |  | ----------------------  |  3a: event_flyer     |	 |  |
  |  | |  3c: event_lineup  |  |      float: right    |	 |  |
  |  | |		    |  |      width: 33%      |	 |  |
  |  | |      date	    |  |	min: 280px    |	 |  |
  |  | |      		    |  |      		      |	 |  |
  |  | |      lineup	    |  |      		      |	 |  |
  |  | |      		    |  |		      |	 |  |
  |  | |      and blurb	    |  |		      |	 |  |
  |  | |		    |  ------------------------	 |  |
  |  | |      width: 100%   -----  --------------------	 |  |
  |  | |			|  | 3b: event_video  |	 |  |
  |  | |			|  |	 float: right |	 |  |
  |  | |   event_share_box	|  |		      |	 |  |
  |  | |   (Fb, iCal only)	|  --------------------	 |  |
  |  | |			-----------------------	 |  |
  |  | |					      |	 |  |
  |  | |					      |	 |  |
  |  | ------------------------------------------------	 |  |
  |  |							 |  |
  |  -----------------------------------------------------  |
  |							    |
  -----------------------------------------------------------
 */

.event_title_box {
  border-width: 1px; border-style: solid; 
  padding: 0.5em 1em;
  margin-bottom: 0.5em;
  text-align: center;
}

.event_portal_title {
   max-width: 48em;
   margin: auto;
}

.dnalounge .event_title,
.dnalounge .event_title > a {
  font-size: 20pt; font-weight: bold; text-transform: uppercase;

  /* Web Fonts */
  font-family: "Helvetica Neue LT Com",Arial,Helvetica,sans-serif;
  line-height: 18pt;
  margin-top: 0.2em;
}

.codeword .event_title_box { font-size: larger; }

.codeword .event_title,
.codeword .event_title > a {
  font-size: 30pt; font-weight: bold; text-transform: lowercase;
          text-stroke: none;
  -webkit-text-stroke: none;
  font-family: YearlingLite,Arial,Helvetica,sans-serif;
  margin-top: 0;
  margin-bottom: 0.2em;
}

.pres { font-weight: bold; }
.title_image {
   width: 400px; height: auto; max-width: 100%;
   /* For alt-text in weekly email. Doesn't do anything in Safari, sigh. */
   font-size: 20pt; text-align: center; text-transform: uppercase;
 }


.event_photos {						/* 1 */
  width: 66.6%;
  margin: 0 0 0.5em 0;
  box-sizing: border-box;
  white-space: nowrap;
}

.event_body_box { position: relative; }

.event_info_box {					/* 2 */
  width: 66.6%;
  display: table;
  margin: 0 0 1em 0;
  box-sizing: border-box;
  border-collapse: separate;
  border-spacing: 0.5em 0;
}

.event_stats_box, .event_share_box {			/* 2a, 2b */
  display: table-cell;
  width: 50%;
  text-align: center;
  vertical-align: top;
  border-width: 1px;
  border-style: solid;
  padding: 1em 1em 0 1em;
  box-sizing: border-box;
}

.event_share_box { margin-left: 0.5em; }

.event_lineup .event_info_box,
.event_lineup .event_stats_box { display: block; width: 100%; }


.event_desc {						/* 3 */
  width: 66.6%;
  box-sizing: border-box;
}

/* If there is no flyer column, use a 2 column layout instead of 3. */
.noflyer { }
.noflyer .event_photos,
.noflyer .event_info_box,
.noflyer .event_desc { width: 100%; }

.event_body_box.noflyer.noblurb,
.event_body_box.noflyer.nolineup { width: 66%; margin: auto; }

.event_lineup, .event_blurb {				/* 3a, 3b */
  display: inline-block;
  vertical-align: top;
  width: 50%;
  max-width: 45em;
  box-sizing: border-box;
  padding: 0 1em 0 0;
  margin:  0 0 1em 0;
}

.noblurb, .nolineup { }
.noblurb  .event_lineup { width: 100%;   }
.noblurb  .event_blurb  { display: none; }
.nolineup .event_lineup { display: none; }
.nolineup .event_blurb  { width: 100%;   }


.event_flyer_box {					/* 4 */
  width: 33.3%;
  position: absolute;
  left: 66.6%;
  top: 0;
  text-align: right;
  box-sizing: border-box;
}

.event_flyer, .event_video {
  margin: 0 0 1em 0;
  width: 100%; height: auto;
}

.vevent .fthumb, .pticket_box .fthumb {
  width: 98%; height: auto; margin: 0; padding: 0; }

/* Note: as of Mar 2012, Youtube videos (sometimes) refuse to play
   unless the player is at least 200px x 200px.  Thanks, guys. */

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


/* Without this things to the right of .event_blurb aren't clickable, WTF. */
/*.event_flyer, .event_awards, .event_video { z-index: 1; position: relative; }*/

.event_video a {
  display: block;
  text-align: center;
  font-size: smaller;
}

.event_video_line { padding: 0 0 0.5em 0; text-align: left; }

.event_awards {
  float: right; clear: right;
  text-align: right;
  font-size: 7pt; padding: 0.5em; margin: 0 0 1em 1em;
  border-width: 1px; border-style: solid;
  z-index: 1; position: relative; /* or it fights with .related_box */
}


.event_photos .thumbclip {
  height: auto;
  margin-left: 1%;
  box-sizing: border-box;
  border-width: 1px; border-style: solid;
}

.event_photos:first-child .thumbclip { margin-left: 0; }
.event_photos .thumbclip:hover { transform: scale(1.1); }

.event_photos .thumbclip4  {width:24.2%;padding-bottom:24.2%;} /* (100-3)/4 */
.event_photos .thumbclip5  {width:19.2%;padding-bottom:19.2%;} /* (100-4)/5 */
.event_photos .thumbclip6  {width:15.8%;padding-bottom:15.8%;} /* (100-5)/6 */
.event_photos .thumbclip7  {width:13.4%;padding-bottom:13.4%;} /* (100-6)/7 */
.event_photos .thumbclip8  {width:11.6%;padding-bottom:11.6%;} /* (100-7)/8 */
.event_photos .thumbclip9  {width:11.6%;padding-bottom:11.6%;} /* (100-8)/9 */
.event_photos .thumbclip10 {width: 9.1%;adding-bottom: 9.1%; } /* (100-9)/10*/



.portal_event_photos { margin: 1em auto; max-width: 50.5em; }

a .galcthumb:hover { opacity:0.8; }

.event_gallery { text-align: center; max-width: 25em; }
.event_gallery b { display: block; margin: 1.5em 0 0.3em 0; }

.galquad {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.galquad .thumbclip {
  width:  48%;
  padding-bottom: 48%;
  margin: 1%;
}

/* #### */
.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_stats .price strike,
.buy_desc strike { font-style: italic; opacity: 0.6; }

.event_share_box {
  background: inherit;
  padding: 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;
}

.share { 
  width: 2.5em; height: 2.5em; border: 0;
  margin-bottom: 0; margin-right: 0.2em;
  vertical-align: middle;
}

.facebook, .twitter, .share_line img {
  transition-duration: 0.25s;
  transition-property: transform;
}
.facebook:hover, .twitter:hover, .share_line img:hover {
  transform: scale(1.1);
}


.share_line { margin-bottom: 0.5em; line-height: 2.5em; }

.share_line b { 
  display: inline-block; 
  vertical-align: middle;
  width: 5em; 
  line-height: 1em; 
  text-align: right; 
  white-space: normal; 
}

.share_line .likers { 
  display: inline-block;
  vertical-align: middle;
  /* margin-left: 6em; -- looks better if there is no RSVP */
  margin-left: 2.5em;
}

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

.event_like .likers { text-align: right; }

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

.pticket_buy .price { margin-bottom: 1em; }

.buy, .dnalounge .pticket_buy .buy {
  display: inline-block;
  font-weight: bold;
  text-transform: uppercase;
  border: 2px solid;
  color: #000;
  background: #0F0;
  border-color: #080;
  padding: 0.3em 0.75em;
  border-radius: 0.5em;
  white-space: nowrap;
  cursor: pointer;

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

  transition-duration: 0.25s;
  transition-property: transform;
}

.buy:hover, .dnalounge .pticket_buy .buy:hover { color: #F00 !important; }
.buy.soldout:hover { color: #000 !important; }

.tixbox .soldout { /* match .tixbox form */
  text-align: right;
  vertical-align: middle;
  margin-bottom: 0.3em;
}
.vevent .buy.soldout {
  display: inline-block;
  text-align: center;
  font-size: smaller; width: 3.75em; line-height: 1em;
  border-radius: 0.8em;  /* Because "Sold Out" is two lines */
  opacity: 0.4;
  animation-name: none;
  cursor: inherit;
}

.pticket_box:hover .buy { transform: scale(1.1); }

.pticket_buy .buy { margin-left: -0.75em; }
.vevent .buy { margin-left: 0.5em; font-size: larger; }
.vevent .tixbox form { text-align: right; }
.vevent .buy_heading { font-weight: bold; margin-bottom: 1em;
   text-align: center; color: #FFF; display: none; }


.related_box { }
.related_events   { display: inline; 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;
}

.gwbox { position: relative; }
.gwbox .ical { position: absolute; right: 3em; }
.ical img { width: 1.2em; height: 1.2em; border: 0; }


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

/* Layout B.  Narrow screens and email.
 */
@media screen and (max-width: 740px) {

  .event_photos, .event_info_box { width: 100%; }
  .event_desc { width: 66.6%; vertical-align: top; display: inline-block; }
  .event_lineup, .event_blurb { width: 100%; }
  .event_flyer_box {
     width: 33.3%;
     position: static;
     display: inline-block;
     vertical-align: top;
     max-width: 360px;
   }

  .thisweek { font-size: smaller; }
}


/* Layout C.  iPhones and other really small screens.
 */
@media screen and (max-width: 550px) {

  .gwbox .ical { right: 2.2em; }

  .event_info_box {
    display: block;
    text-align: center;
  }

  .event_stats_box, .event_share_box,
  .event_desc, .event_lineup, .event_blurb, .event_flyer_box {
    display: inline-block;
    width: auto;
    min-width: 51%;
    max-width: none;
    text-align: left;
    margin: 0 auto 0.5em auto;
    float: none;
  }

  .noblurb  .event_lineup,
  .noblurb  .event_blurb,
  .nolineup .event_lineup,
  .nolineup .event_blurb { width: auto;  }


  .event_share_box { text-align: center; }
  .event_lineup { margin-bottom: 2em; }

  .event_desc, .event_flyer_box { width: 100%; text-align: center; }
  .event_flyer_box .fthumb { max-width: 360px; }

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

  /* Or else "Front Row VIP" makes the page get too wide */
  .buy_desc { font-size: 10pt; }

  /* Make the calendar cells be double-height */
  .calrow  { padding-bottom: 28.5714%; }  /* double 1/7 */
  .calhead { padding-bottom: 1.5em; }     /* repeat, to avoid override */
  .ccell B { margin-bottom: 0.25em; }
}


/* The "/tickets/" page */

.tcolumn { display: inline-block; text-align: center; vertical-align: top;
           width: 40%; }
.tbevent, .tdevent { position:relative; padding-left: 7.5em; min-height: 2em; }
.tbevent { margin-bottom: 1em; }
.tdevent { margin-bottom: 0.5em; }

.tdate   { position: absolute; left: 0; top: 0;
           text-align: right; vertical-align: top; white-space: nowrap;
           width: 7em; font-weight: bold; }
.tname   { text-align: left; vertical-align: top; font-style: italic;
           margin-right: 1em; }
.tname0  { font-weight: bold; font-style: normal; }

/* The recurring event images at the top */
.trevent { display: inline-block; vertical-align: middle;
           min-width: 12em; margin: 0.5em 1em; }
.trevent .title_image { max-width: 10em; max-height: auto; }  /* 3 columns */
.trevent .title_image:hover { opacity:0.8; }

/* 2 and 1 columns on iPhone */
@media screen and (max-width: 640px) {

  .tcolumn { width: 100%; }
  .trevent { min-width: 5em; width: 40%; margin: 0; padding: 0.2em 0.5em; }
  .trevent .title_image { width: 100%; height: auto; }
  .event_like { width: 15.5em; }
}


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

.pticket_box {
  border-width: 1px; border-style: solid; max-width: 35em; margin: 2em auto;
  position: relative; overflow: hidden;
}
.pticket_info_box, .pticket_buy_box {
  display: inline-block; vertical-align: top;
}
.pticket_info, .pticket_buy { padding: 1em; }
.pticket_info_box { width: 14em; }
.pticket_buy_box  { width: 14em; }

.pticket_flyer_box {
  position: absolute; top: -4px; right: -4px;
  width: 9.5em; vertical-align: top; overflow: hidden;
  opacity: 0.45;
  z-index: -1;
}

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

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