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

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


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

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


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