/* WST 2017 */ /* 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: 480px; 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; } .announcement .frame a { color: #FFFFFF; text-decoration: underline; } #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; background-color: #151515; } div.legacy { width: 33% !important; } 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; } div.sponsors .txt { display: inline-block; font-size: 14px; line-height: 16px; color: #999999; margin-right: 30px; vertical-align: top; padding-top: 12px; } /* 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.search { column-count: 2; column-gap: 40px; } ul.search, ul.search li { list-style-type: none; margin: 0px; padding: 0px; } ul.search li { padding-bottom: 20px; break-inside: avoid; } ul.search li small { color: #787878; } ul.expanded li, ol.expanded li { margin-top: 10px; margin-bottom: 10px; } ul.columnar { column-count: 2; column-gap: 40px; } ul.clean, ul.clean li { list-style-type: none; margin: 0px; padding: 0px; } ul.columnar li { break-inside: avoid; margin: 0px 0px 15px 0px; display: table; } /* 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; background-size: auto 28px; } a.account { background-image: url('images/icon-account.png'); width: auto; padding-right: 36px; } a.accountlabel { background-image: url('images/icon-subs-account.png'); width: 188px !important; } a.donatelabel { background-image: url('images/icon-donate.png'); width: 80px !important; } a.ul, a.ul:link, a.ul:visited, a.ul:hover { text-decoration: underline; } /* a.accountlabel { background-image: url('images/icon-account-renew.png'); width: 185px !important; } */ #mobilecart, #mobilesearch, #mobilemenubtn, #menumodal { display: none; } a.email { background-image: url('/images/icon56-email.png'); } a.facebook { background-image: url('/images/icon56-facebook.png'); } a.instagram { background-image: url('/images/icon56-instagram.png'); } a.sharethis { background-image: url('/images/icon56-sharethis.png'); } a.twitter { background-image: url('/images/icon56-twitter-x.png'); } a.youtube { background-image: url('/images/icon56-youtube.png'); } a.connect { display: block; padding: 10px 0px 10px 38px; font-weight: bold; background-position: left center; background-repeat: no-repeat; background-size: 28px 28px; } /* 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: 600 20px/24px 'Open Sans', sans-serif; } div.divided h3, div.divided h4 { margin-top: 0px; } div.divided h4 { font-weight: 700; } 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; } h5.overline { padding: 8px 0px 0px 0px; border-bottom: 0px; border-top: 2px dotted #8A0808; } .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; } .secondary ul li.indent a::before { content: "\02022"; display: inline-block; margin: 0px 10px; color: #000000; } 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; } .alertbox.std { font-weight: 400; } .alertbox h4 { margin: 0px 0px 8px 0px; } label.error { color: #AA0A0A; white-space:nowrap; font: 700 14px/20px 'Open Sans', sans-serif; display: inline-block; padding-left: 4px; } .hot { color: #AA0A0A; } /* 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: 18px; 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.widebtn.playbill { background-color: #FEE300; color: #000000; padding: 9px 7px 6px 7px; } a.widebtn.playbill:hover { background-color: rgba(254,227,0,0.5); color: #000000; } a.widebtn.playbill img { display: inline-block; height: 13px; width: auto; position: relative; top: 1px; } body.home .quicklinks1 a.widebtn.playbill { padding: 14px 12px 10px 12px; } body.home .quicklinks1 a.widebtn.playbill img { height: 16px; top: 0px; } 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.spotlight { background-image: url('images/icon-spotlight.png'); } a.visit { background-image: url('images/icon-map.svg'); background-size: 20px auto; } 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.search:hover { opacity: 0.5; } 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: 3px 6px; display: block; font-size: 14px; line-height: 15px; } 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; } .tiles.flex { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; } .tiles.flex .tile { float: none; } /* images */ img.hero, .hero img, .column img { width: 100%; height: auto; } div.hero { font-size: 14px; color: #999999; line-height: 18px; } /* icon bar */ #iconbar { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 14px 10px 7px 10px; text-align: center; background-color: #000000; display: block; } /* 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, table.month td span { 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; } /* a basic clean table */ table.data { border-spacing: collapse; } table.data td, table.data th { padding: 5px 30px 5px 0px; } table.data td:last-child, table.data th:last-child { padding-right: 0; } /* 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; } body.home .youtubemodal { width: 100%; height: auto; margin-right: 0; } body.home .youtubemodal img { display: table; } #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; } .yt { cursor: pointer; } .ytmodal { width: 90vw; height: 56vh; position: relative; } .ytmodal iframe { width: 100%; height: 100%; position: absolute; top: 0; right: 0; left: 0; bottom: 0; } /* home page */ body.home #container { padding-top: 30px; } body.home .quicklinks1 { display: none; } .bumper { display: none; } /* logo blocks */ body.home .logos, .logoblock { margin: 0px; } body.home .logos a, body.onecol .logos a, .logoblock a { width: 16.667%; display: inline-block; float: left; text-align: center; padding-bottom: 8px; margin: 0 20px 10px 0; } .logoblock a { width: 33.333%; } body.onecol .logoblock a { width: 20%; } body.home .logos a img, .logoblock a img { width: 100%; max-width: 150px; height: auto; display: block; } body.home .column .logos a { width: 50%; } .sponsors .logos img { max-width: 150px; height: auto; } /* sliders */ @keyframes fadein { 0% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; } } body.home .cycle-slideshow { border-bottom: 5px solid #FFFFFF; position: relative; 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 { 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: 50px; 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; } .slider { width: 100%; } .slider img { width: 100%; height: auto; } /* 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; } /* expanding list */ dl.expanding { background-color: #FFFFFF; } dl.expanding dt { color: #FFFFFF; background-color: #696293; padding: 6px 10px; font-weight: 600; margin: 2px 0; cursor: pointer; position: relative; } dl.expanding dt:nth-child(4n-1) { background-color: #8b81c2; } dl.expanding dt:hover { background-color: #AA0A0A !important; } dl.expanding dt.active { background-color: #000000 !important; } dl.expanding dt:after { display: block; position: absolute; right: 10px; top: 5px; bottom: 5px; width: 25px; content: ""; background: transparent url('images/angle-down.svg') right center no-repeat; background-size: contain; } dl.expanding dt.active:after { background-image: url('images/angle-up.svg'); } dl.expanding dd { display: none; margin: 0; padding: 30px; color: #333333; background-color: #F5F5F5; } /* mobile only */ .mobileonly { display: none; } #mobilesearch, #mobilecart { display: none; } /* menu modal */ #menumodal { padding: 90px 30px 30px 30px; font-size: 22px; line-height: 1; text-align: left; z-index: 250; position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color: #38354F; overflow: auto; } #menumodal ul, #menumodal li { list-style-type: none; margin: 0px; padding: 0px; } #menumodal a { color: #FFFFFF; display: block; padding: 15px 0px; font-weight: 300; } /* mobile navigation */ /* #mobilemenu { position: fixed; top: 0; right: 0; left: 0; z-index: 99; overflow: scroll; height: 0px; opacity: 0; transition-duration: 0.3s; background-color: #102542; } #mobilemenu.active { height: 100vh; opacity: 1; padding-top: 10px; } */ #mobile-menu a { color: #FFFFFF; display: block; font-size: 18px; line-height: 1; padding: 10px 25px 10px 0; font-weight: 400; text-decoration: none; } #mobile-menu { list-style-type: none; margin: 0px; padding: 80px 0px 0px 0px; color: #FFFFFF; } #mobile-menu > li { border-bottom: 1px solid rgba(255,255,255,0.33); padding-right: 50px; } #mobile-menu > li.menu-item-has-children { background: transparent url('images/icon-down.svg') right 7px no-repeat; background-size: 13px auto; cursor: pointer; } #mobile-menu > li.menu-item-has-children.expanded { background-image: url('images/icon-up.svg'); } #mobile-menu > li > ul { display: none; } #mobile-menu > li.expanded > ul { display: block; list-style-type: disc; margin-bottom: 15px; padding-left: 30px; } #mobile-menu > li > ul > li a { font-size: 16px; line-height: 1; font-weight: 300; padding: 7px 0px; } /* special perfs */ table.month td span { display: block; padding: 5px 3px; font-size: 14px; line-height: 14px; margin: 0px; } sup, sub { vertical-align: baseline; position: relative; top: -0.4em; font-size: 80%; } sub { top: 0.4em; } table.calendar a, table.calendar a:visited, table.calendar a:link { display: block; padding: 2px 0px; text-decoration: none; } .special, a.special, a.special:visited, a.special:link { background-color: #E0890D; color: #FFFFFF; } a.special:hover, a.special:active { background-color: #AA0A0A; } /* tooltips (desktop) + modals (mobile) */ [data-tooltip], .tooltip { position: relative; cursor: pointer; } [data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after { position: absolute; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -webkit-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -moz-transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, -moz-transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s cubic-bezier(0.71, 1.7, 0.77, 1.24); -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); pointer-events: none; } [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { visibility: visible; opacity: 1; } .tooltip:before, [data-tooltip]:before { z-index: 1001; border: 6px solid transparent; background: transparent; content: ""; } .tooltip:after, [data-tooltip]:after { z-index: 1000; padding: 8px; width: 160px; background-color: #000; background-color: #696293; color: #FFFFFF; content: attr(data-tooltip); font-size: 14px; line-height: 20px; } [data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after { bottom: 100%; left: 50%; } [data-tooltip]:before, .tooltip:before { margin-left: -6px; margin-bottom: -12px; border-top-color: #696293; } [data-tooltip]:after, .tooltip:after { margin-left: -88px; } [data-tooltip]:hover:before, [data-tooltip]:hover:after, [data-tooltip]:focus:before, [data-tooltip]:focus:after, .tooltip:hover:before, .tooltip:hover:after, .tooltip:focus:before, .tooltip:focus:after { -webkit-transform: translateY(-12px); -moz-transform: translateY(-12px); transform: translateY(-12px); } .modal-dialog { background-color: #FFFFFF; color: #000000; padding: 20px; } @media (max-width: 850px) { table.calendar a.special.tooltip { display: none !important; } } @media (min-width: 851px) { table.calendar a.special.dialog { display: none !important; } } /* 970px: suppress icon legends, make calendar full-width */ @media (max-width: 1100px) { a.donatelabel { display: none !important; } } @media (max-width: 970px) { #toolbar { display: none; 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; } ul#menu li.campaign { display: none; } #footer .frame { padding-bottom: 50px; } body.home a.widebtn, body.home a.widebtn:link, body.home a.widebtn:visited { font-size: 14px; line-height: 1.1; } } /* 850px: switch to mobile nav, alter home page slider type/scale/nav options */ @media (max-width: 850px) { body.home .bumper { display: block; height: 60px; } body.home .cycle-pager { display: none; } body.home .slide .caption { bottom: 0px; padding: 10px 100px; } body.home .announcement { border-bottom: 0px; } .announcement .frame { font-size: 17px; line-height: 1.2; } h1 { font-size: 32px; line-height: 36px; letter-spacing: 1px; } body.home .slide .caption h1 { margin: 0px 5px; } #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; } #hd, #hd > * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #hd { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 1500; height: 60px; overflow: hidden; border-top: 5px solid #000000; border-bottom: 5px solid #000000; box-shadow: 0px 8px 10px rgba(0,0,0,0.2); } #hd .frame { text-align: right; height: 50px; overflow: hidden; padding: 0px; } a#mobilecart, a#mobilesearch, a#mobilemenubtn { position: relative; top: 0px; right: 0px; color: #FFFFFF; background-color: #696293; border-left: 5px solid #000000; width: 50px; height: 50px; display: inline-block; text-align: center; background-position: center center; background-repeat: no-repeat; padding: 0px; margin: 0px; overflow: hidden; } a#mobilecart { background-image: url('/images/mobile-hd-cart.png'); } a#mobilesearch { background-image: url('/images/mobile-hd-search.png'); } a#mobilemenubtn { background-image: url('/images/mobile-hd-menu.png'); } a#mobilemenubtn.cancel { background-image: url('/images/mobile-hd-cancel.png'); } #wst { float: none; position: absolute; top: 0px; left: 0px; width: 255px; height: 80px; } a#wstlogo { display: block; width: 410px; height: 50px; background: transparent url('/images/wst-mobile.png') 13px center no-repeat; } a#wstlogo img { display: none; } #container { margin-top: 70px; } body.home .cycle-slideshow { border-top: 3px solid #000000; } body.home #container { margin-top: 0px; } #footer .frame { padding-bottom: 90px; } p { line-height: 1.4; } } /* 650px: full-on mobile */ @media (max-width: 650px) { a#wstlogo { width: calc(100vw - 160px); background-size: 85% auto; } body, table, td, th, input, select, textarea, div#footer, small { font: 400 16px/1.2 '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 .logos a, body.home .column .logos a { width: 25%; margin: 0 20px 10px 0; } /* start covid changes */ body.home .quicklinks1 { display: block; } /* body.home .column.newsfeed, body.home .column.vidfeature { display: none; } */ /* end covid changes */ /* a#wstlogo { width: 100%; background-position: 13px center; background-size: 75% auto; } */ body.home .quicklinks2, .quicklinks2, div.quicklinks2, #quicklinks2, div#quicklinks2 { display: none !important; } p { line-height: 1.4; } body.home .quicklinks1 a.widebtn.playbill { padding: 6px 4px 4px 6px; } /* #iconbar { padding: 24px 10px 17px 10px; } #iconbar a.icon { width: 56px; height: 56px; background-size: 56px 56px; margin: 0px 10px; } */ ul.search, ul.columnar { column-count: 1; } .tooltip:after, [data-tooltip]:after { width: 200px; font-size: 18px; line-height: 22px; } [data-tooltip]:after, .tooltip:after { margin-left: -108px; } } /* staging flag */ #staging { display: block; position: fixed; bottom: 0; left: 0; right: 0; text-align: center; background: repeating-linear-gradient(45deg, #FFCC00, #FFCC00 10px, #000000 10px, #000000 20px); } #staging span { display: inline-block; color: #FFFFFF; background-color: #000000; padding: 3px 5px; font-size: 16px; line-height: 1; font-weight: 600; text-transform: uppercase; } /* 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; } } */