/* WST 2015 */ 

   /* clearfix */

   .cf:before, .cf:after { content: " "; display: table; }
   .cf:after { clear: both; }

   /* structure */

   body { margin: 0px; padding: 0px; text-align: center; color: #000000; background-color: #000000; }
   body, html { scrollbar-base-color: #666666; }
   ::-webkit-scrollbar { background-color: #AAAAAA; }
   ::-webkit-scrollbar-thumb { background-color: #666666; }
   #hd { height: 95px; background: #120101 url('images/hd.jpg') center center no-repeat; overflow: hidden; position: relative; }
   #nav { background-color: #FFFFFF; text-align: center; clear: both; }
   #mobilenav { display: none; }
   .frame { text-align: left; margin: 0px auto; padding: 0px 50px 0px 100px; max-width: 1200px; }
   #topbar 
   { 
      background-color: #000000; color: #DEDEDE; font: 400 12px/13px 'Open Sans', sans-serif; 
      text-transform: uppercase; text-align: center; letter-spacing: 2px; padding: 8px 20px 8px 20px;
   }
   #topbar .th { font-size: 10px; }
   #hd .frame { padding-left: 30px; }
   #wst { float: left; text-align: left; width: 450px; }
   #toolbar { float: right; text-align: right; width: 400px; padding-top: 34px; white-space:nowrap; }
   .announcement { color: #FFFFFF; background-color: #AA0A0A; padding: 20px 0px; border-bottom: 10px solid #FFFFFF; }
   .announcement .frame { text-align: center; font-size: 20px; line-height: 28px; }
   #container { background: #FFFFFF url('images/bg.jpg') center top no-repeat; padding: 50px 0px; }
   .primary, .secondary, .frame, .column, .tile, .logos a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
   .primary { float: left; width: 75%; padding-right: 75px; }
   .secondary { float: right; width: 25%; }
   #footer { color: #AAAAAA; padding: 50px 0px; }
   img { display: table; }
   .right { float: right; width: 50%; margin: 0px 0px 30px 30px; font-size: 14px; line-height: 18px; color: #333333; }
   div.legacy { width: 33% !important; }
   .right img { width: 100%; height: auto; }
   img.right { width: auto; height: auto; }
   .secondary hr { border: none; border-top: 2px dotted #CECECE; background-color: transparent; color: #FFFFFF; }
   div.divided { border-top: 2px dotted #8A0808; padding-top: 30px; margin: 30px 0px; }
   img.showthumb { width: 100%; height: auto; }
   div.sponsors { margin: 30px 0px; }
   div.sponsors img { display: inline; }
   
   /* season display */

   table.fiveshows { margin: 0px -10px; }
   table.fiveshows td { width: 20% !important; }
   table.fiveshows td a.showtitle { font-weight: 700; }
   
   table.loose { margin: -1px -15px -1px 0px; }
   table.loose td { padding: 1px 15px 1px 0px; }
   table.loose td b { white-space: nowrap; }

   /* lists */
   
   ul.expanded li { margin-top: 10px; margin-bottom: 10px; }
   ul.columnar
   {
      -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;
      -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px;
   }
   ul.clean, ul.clean li { list-style-type: none; margin: 0px; padding: 0px; }
   
   /* buttons, icons, etc. */
   
   a.icon 
   { 
      width: 28px; height: 28px; background-position: right center; background-repeat: no-repeat; 
      margin-left: 5px; display: inline-block; overflow: hidden; align: top; 
      font-size: 13px; line-height: 26px;
   } 
   a.account { background-image: url('images/icon-account.png'); width: auto; padding-right: 36px; }
   a.accountlabel { background-image: url('images/icon-account-label.png'); width: 185px !important; }
   a.facebook { background-image: url('images/icon-facebook.png'); }
   a.twitter { background-image: url('images/icon-twitter.png'); }
   a.instagram { background-image: url('images/icon-instagram2.png'); }
   a.email { background-image: url('images/icon-email.png'); }
   a.sharethis { background-image: url('images/icon-sharethis.png'); }
   a.youtube { background-image: url('images/icon-youtube.png'); }
   a.connect 
   { 
      display: block; padding: 10px 0px 10px 38px; font-weight: bold;
      background-position: left center; background-repeat: no-repeat; 
   }
   
   /* type */

   body, table, td, th, input, select, textarea { font: 400 16px/22px 'Open Sans', sans-serif; }
   small { font: 400 14px/20px 'Open Sans', sans-serif; }
   h1 { font: 700 40px/44px 'Old Standard TT', Georgia, serif; letter-spacing: 3px; text-transform: uppercase; }
   h2 
   { 
      font: 400 36px/40px 'Old Standard TT', Georgia, serif; letter-spacing: -1px; 
      margin-bottom: 20px; margin-top: 0px;
   }
   .primary h2 { margin-top: 25px; }
   h3 { font: 700 24px/30px 'Old Standard TT', Georgia, serif; letter-spacing: -1px; color: #AA0A0A; }
   h4 { font: 400 20px/24px 'Open Sans', sans-serif; }
   h6 { font: 700 15px/18px 'Open Sans', sans-serif; padding-top: 8px; }
   h5 
   { 
      font: 800 15px/18px 'Open Sans', sans-serif; letter-spacing: 1px; 
      padding: 0px 0px 8px 0px; margin: 0px 0px 25px 0px; 
      border-bottom: 2px dotted #8A0808; text-transform: uppercase;
   }
   .secondary h5 { margin-bottom: 15px; }
   p.bigintro { font: 300 22px/28px 'Open Sans', sans-serif;  }
   .secondary ul { margin: 0px 0px 35px 0px; padding: 0px; list-style-type: none; }
   .secondary ul li a { display: block; padding: 4px 0px; }
   div#footer { font-size: 14px; line-height: 22px; }
   #footer b { color: #FFFFFF; }
   .gt { color: #AA0A0A; position: relative; top: -1px; font-size: 125%; }
   .date { text-transform: uppercase; font-weight: 700; color: #AA0A0A; }
   .smalldate { font-weight: 600; color: #AA0A0A; font-size: 14px; line-height: 8px; }
   blockquote { margin: 40px 0px 40px 0px; padding-left: 80px; background: transparent url('images/quote.png') left center no-repeat; }
   blockquote .quote { display: block; font: 400 20px/24px 'Open Sans', sans-serif; font-style: italic; margin: 0px 0px 12px 0px; }
   .alertbox { font-weight: 700; padding: 10px; border: 1px solid #AA0A0A; margin: 10px 0px; }
   label.error { color: #AA0A0A; white-space:nowrap; font: 700 14px/20px 'Open Sans', sans-serif; display: inline-block; padding-left: 4px; }
   
   /* links */

   a, a:link, a:visited { text-decoration: none; color: #696293; } /* 8078B4; */
   a:hover, a:active { color: #AA0A0A; }

   #hd a, #hd a:link, #hd a:visited { color: #FFDD54; }
   #hd a:active, #hd a:hover { color: #FFFFFF; }

   #footer a, #footer a:link, #footer a:visited { color: #9890D7; }
   #footer a:active, #footer a:hover { color: #FFFFFF; }

   .btn, a.btn, a.btn:link, a.btn:visited
   { 
      color: #FFFFFF; background-color: #8078B4; padding: 1px 4px; 
      font-weight: bold; cursor: pointer; white-space:nowrap; border: none;
   }
   h2 a.btn, h2 a.ticket { font: 400 20px/20px 'Open Sans', sans-serif; letter-spacing: 0px; position: relative; top: -4px; padding-right: 10px !important; }
   a.btn:active, a.btn:hover, .btn:hover { color: #FFFFFF; background-color: #8A0808; }
   a.ticket 
   { 
      background-image: url('images/icon-ticket.png'); 
      padding-left: 33px !important; background-position: 6px center; background-repeat: no-repeat;
   }
   a.video 
   { 
      background-image: url('images/icon-video.png'); 
      padding-left: 33px !important; background-position: 6px center; background-repeat: no-repeat;
   }
   
   a.widebtn, a.widebtn:link, a.widebtn:visited
   { 
      display: block; margin: 0px 0px 5px 0px; color: #FFFFFF; background-color: #8078B4; padding: 7px 8px 7px 37px; 
      font-size: 16px; line-height: 16px; background-position: 8px center; background-repeat: no-repeat;
   }
   a.playbill, a.playbill:link, a.playbill:visited 
   { 
      color: #000000; background-color: #FFEA03; padding-left: 8px;
      font: 700 18px/18px 'Old Standard TT', Georgia, serif; 
   }
   a.nytickets, a.nytickets:link, a.nytickets:visited { background-color: #444444; padding-left: 8px; }
   a.season { background-image: url('images/icon-torch.png'); }
   a.donate { background-image: url('images/icon-star.png'); }
   a.subscribe { background-image: url('images/icon-ticket.png'); }
   a.giftcert { background-image: url('images/icon-gift.png'); }
   a.calendar { background-image: url('images/icon-calendar.png'); }
   a.school { background-image: url('images/icon-school.png'); }
   a.mailinglist { background-image: url('images/icon-mailinglist.png'); }
   a.studio5 { background-image: url('images/icon-studio5.png'); }
   a.tour { background-image: url('images/icon-curtain.png'); }
   a.widebtn:active, a.widebtn:hover { color: #FFFFFF; background-color: #AA0A0A; }
   a.sidecart { background-image: url('images/icon-cart.png'); padding: 11px 11px 11px 42px !important; margin-bottom: 20px !important; }

   /* main menu */

   ul#menu { display: inline-block; }
   #menu a, #menu a:link, #menu a:visited { color: #000000; }
   #menu a:active, #menu a:hover { color: #8D85C7; }
   ul#menu, ul#menu li { margin: 0px auto -2px auto; padding: 0px; list-style-type: none; text-align: center; }
   ul#menu > li { display: inline; float: left; position: relative; }
   ul#menu > li > a 
   { 
      display: block; text-transform: uppercase; padding: 10px 17px 10px 15px; 
      font-size: 18px; line-height: 22px; background: transparent url('images/menu-dot.png') right center no-repeat; 
   }
   ul#menu > li:first-child > a { padding-left: 0px; }
   ul#menu > li > a.search 
   { 
      background: transparent url('images/search.png') right center no-repeat; display: inline-block; 
      padding-left: 20px;
   }
   ul#menu > li > a.cart
   {
      background: transparent url('images/cart.png') right center no-repeat; display: inline-block;
      padding-left: 20px;
   }
   ul#menu > li > ul > li { float: none; display: block; margin: 0px; }
   ul#menu > li > ul > li > a { padding: 4px 2px; display: block; font-size: 14px; line-height: 15px; }
   ul#menu > li.submenuseason > ul > li > a { padding: 2px 2px; display: block; font-size: 14px; line-height: 14px; }
   ul#menu > li > ul  
   {
      border-top: 1px solid #FFFFFF; background: #F2F2F2 url('images/submenu.png') center top no-repeat; 
      padding: 20px 0px; position: absolute; display: none; box-shadow: 5px 5px 10px rgba(0,0,0,0.1);
   }
   ul#menu li:hover ul { display: inline-block; width: 300px; left: -50%; margin-left: -30px; }
   ul#menu > ul, ul#menu li, ul#menu li ul, ul#menu li ul li { z-index: 500; }

   /* columns */

   .columns { margin: 0px -25px; overflow: hidden; }
   .column { width: 33%; padding: 0px 25px; float: left; }
   .column:nth-child(3) { width: 34%; }
   
   /* tiles */

   .tiles { margin: 35px -25px; overflow: hidden; }
   .twocol .tile { width: 50%; }
   .tile { width: 33%; padding: 0px 25px; margin: 0px 0px 50px 0px; float: left; position: relative; }
   .tile img { width: 100%; height: auto; }
   .tile a h4 { position: absolute; left: 25px; bottom: 20px; color: #FFFFFF; background-color: #8078B4; padding: 4px 12px; margin: 0px 25px 0px 0px; }
   .tile a:hover h4 { color: #FFFFFF; background-color: #8A0808; }

   /* images */

   img.hero, .hero img, .column img { width: 100%; height: auto; }
   div.hero { font-size: 14px; color: #999999; line-height: 18px; }

   
   /* full calendar */

   table.calendar { width: 100%; }
   table.calendar th { text-align: center; width: 14%; background-color: #8A0808; color: #FFFFFF; }
   table.calendar td 
   { 
      background-color: #EFEFEF; color: #000000; text-align: center; width: 14%; 
      font-size: 12px; line-height: 14px; text-align: left;
   }
   table.calendar td.blank { background-color: #FFFFFF; }
   table.calendar .date, table.calendar .pastdate
   {
      background-color: #000000;
      color: #FFFFFF;
      font-weight: bold;
      text-align: center;
      padding-top: 2px; padding-bottom: 2px;
   }
   table.calendar .today { background-color: #FFFFFF; }
   table.calendar a, table.calendar td a { text-decoration: underline; }
   table.calendar td .content { padding: 2px; }
   table.month td { text-align: center; }
   table.month td nobr { display: block; padding: 5px 3px; font-size: 14px; line-height: 14px; margin: 0px; }
   body.calendar .primary img, p.key img { display: inline; }
   
   /* carts and checkout */
   
   table.cart th { color: #FFFFFF; text-align: left; background-color: #AA0A0A; padding: 2px 12px 2px 4px; }
   table.cart td { padding: 12px 12px 12px 0px; }
   table.cart td.totals, table.cart tr.totals td { border-top: 2px dotted #AA0A0A; }
   fieldset { overflow: auto; border: 0; margin: 0; padding: 0; }
   fieldset div { float: left; }
   fieldset.centered div { text-align: center; }
   fieldset label { display: block; margin-bottom: 3px; }
   fieldset label img { display: block; margin-bottom: 3px; }
   fieldset label.error { float: none; vertical-align: top; font-size: 11px; }
   
   /* responsive embedding */

   .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
   .embed-container iframe, .embed-container object, .embed-container embed 
   { 
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
   }
   
   /* video player modals */
   
   .vidthumbs { margin: 0px -50px 0px 0px; }
   .youtubemodal 
   { 
      width: 350px; height: 196px; padding: 0px; margin: 0px 10px 10px 0px; float: left; 
      background-color: #000000; background-position: center center; background-repeat: no-repeat; background-size: cover;
   }
   #simplemodal-overlay { background-color: #000000; }
   #simplemodal-container a.modalCloseImg 
   {
      background: transparent url('/js/shadowbox/close.png') center center no-repeat;
      height:30px; width: 30px; position: absolute; top: -30px; right: -30px; z-index:3200; cursor:pointer;
   }
   
   /* home page */
   
   body.home #container { padding-top: 30px; }
   body.home .quicklinks1 { display: none; }

   /* logo blocks */
   
   body.home .logos { margin: 0px 0px 8px 0px; }
   body.home .logos a { width: 16.667%; display: inline-block; float: left; text-align: center; }
   body.home .logos a img { width: 100%; max-width: 150px; height: auto; display: block; }
   body.home .column .logos a { width: 50%; }
   
   /* sliders */

   @keyframes fadein { 0% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; } }
   body.home .cycle-slideshow 
   { 
      border-bottom: 5px solid #FFFFFF; position: relative; width: 100%; display: block; background-color: #FFFFFF; 
      -moz-transition: animation: fadein 0.4s ease; -webkit-transition: animation: fadein 0.4s ease;
      animation: fadein 0.4s ease; -o-animation: fadein 0.4s ease; 
   }
   body.home .slide 
   { 
      width: 100%; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block; background-color: #FFFFFF;
      background-position: center top; background-repeat: no-repeat; background-size: cover; 
   }
   body.home .slide .caption 
   { 
      position: absolute; bottom: 40px; left: 0px; right: 0px; padding: 15px 100px; background: rgba(0,0,0,0.65); 
      color: #FFCC00; 
   }
   body.home .slide .caption h1 { color: #FFFFFF; padding: 0px; margin: 3px 0px 3px 0px; }

   .cycle-pager { text-align: center; z-index: 200; position: absolute; bottom: 0px; overflow: hidden; width: 100%; }
   .cycle-pager span 
   { 
      font-family: arial; font-size: 50px; width: 20px; height: 16px; 
      display: inline-block; color: rgba(255,255,255,0.5); cursor: pointer; 
   }
   .cycle-pager span.cycle-pager-active { color: #FFCC00;}
   .cycle-pager > * { cursor: pointer; }   

   .cycle-prev, .cycle-next 
   { 
      z-index: 200; position: absolute; top: 0px; bottom: 0px; overflow: hidden; width: 80px; 
      cursor: pointer; 
   }
   .cycle-prev { background: transparent url('images/cycle-prev.png') center center no-repeat; left: 0px; }
   .cycle-next { background: transparent url('images/cycle-next.png') center center no-repeat; right: 0px; }
   .cycle-prev:hover, .cycle-next:hover { background-color: rgba(255,255,255,0.25); }
   .slide .border-candy { position: absolute; width: 100%; height: 15px; background: transparent url('images/home/candy-edge-1.png') center center repeat-x; }
   .slide .border-top { top: 0px; }
   .slide .border-bot { bottom: 0px; }



   /* zoomable contact sheet */

   .contactSheet { margin: 20px -40px 20px 0px; overflow: hidden; }
   .contactSheet .thumb { margin: 0px 10px 10px 0px; float: left; }
   .zoom { background-color: #000000; padding: 20px; border: 1px solid #796D9E; font-size: 12px; line-height: 15px; color: #FFFFFF; }
   #enlarge { display: block; }
   .divided { border-top: 1px solid #B90F29; padding-top: 20px; margin-top: 20px; }
   
   /* variants for historic photo gallery */
   
   .historic .thumb { border: 3px solid #8078B4; }
   .historic .thumb a img { display: block; }
   .historic .thumb:hover, .historic .thumb.curr { border: 3px solid #AA0A0A; }
   
   /* mobile only */

   .mobileonly { display: none; }
   #mobilesearch, #mobilecart { display: none; }

   /* 970px: suppress icon legends, make calendar full-width */

   @media (max-width: 970px)
   {
      #toolbar { width: auto; }
      a.accountlabel { background-image: url('images/icon-account.png'); width: 28px; }
      body.calendar .primary, body.calendar .secondary { float: none; width: auto; padding-right: 0px; }
      h1 { font-size: 32px; line-height: 36px; letter-spacing: 1px; }
      body.home .slide .caption h1 { margin: 0px 5px; }
   }

   /* 850px: switch to mobile nav, alter home page slider type/scale/nav options */

   @media (max-width: 850px)
   {
      body.home .cycle-pager { display: none; }
      body.home .slide .caption { bottom: 0px; padding: 10px 100px; }
      h1 { font-size: 32px; line-height: 36px; letter-spacing: 1px; }
      body.home .slide .caption h1 { margin: 0px 5px; }
      #hd .frame { text-align: center; padding: 0px 10px; }
      #hd { border-top: 5px solid #000000; }
      #topbar, #toolbar { display: none; }
      .frame { padding: 0px 30px; }
      #nav { display: none; }
      #mobilenav { display: block; clear: both; padding: 5px 30px; background-color: #FFFFFF; }
      #mobilemenu { border: 0px; width: 100%; }
      .primary, .secondary { float: none; width: auto; padding-right: 0px; }
      .secondary { margin-top: 30px; }
      table.fiveshows td a.showtitle { font-weight: 400; }
      a#mobilesearch, a#mobilecart { display: block; position: absolute; top: 30px; width: 38px; height: 38px; }
      a#mobbilesearch img, a#mobilecart img { display: inline; }
      a#mobilesearch { right: 30px; }
      a#mobilecart { right: 78px; } 
      .slide .border-candy { height: 8px; }
   }
   
   /* 650px: full-on mobile */

   @media (max-width: 650px)
   {
      body, table, td, th, input, select, textarea, div#footer, small { font: 400 19px/25px 'Open Sans', sans-serif; }
      h4 { font-size: 26px; line-height: 32px; }
      h5 { font-size: 18px; line-height: 20px; }
      .tiles { margin: 30px 0px; }
      .columns { margin: 0px; }
      .tile, .twocol .tile, .column, .column:nth-child(3) { width: 100%; padding: 0px; margin-bottom: 30px; float: none; }
      .tile a h4 { left: 0px; bottom: 35px; }
      body.home .slide .caption { padding: 10px; }
      .cycle-prev, .cycle-next { display: none; }
      h1 { font-size: 26px; line-height: 30px; letter-spacing: 0px; }
      img.right { float: none; margin: 0px 0px 20px 0px; }
      table.fiveshows td a.showtitle { display: none; }
      .nomobile { display: none; }
      .mobileonly { display: initial; }
      #mobilemenu { font-size: 24px; padding: 10px; background-color: #EDEDED; }
      body.home .widebtn { font-size: 25px; padding: 16px 16px 16px 37px; }
      body.home .logos a, body.home .column .logos a { width: 33.333%; }
      body.home .quicklinks1 { display: block; }
      body.home .quicklinks2, .quicklinks2, div.quicklinks2, #quicklinks2, div#quicklinks2 { display: none !important; }
   }

   /* on really short displays, tighten up slider */

   @media (max-height: 780px)
   {
      body.home .cycle-slideshow { max-height: 420px; }
      body.home .slide .caption { padding: 5px 80px; }
      body.home .slide .caption h1 { font-size: 24px; line-height: 24px; }
   }