/* LTC demo style */
/* Specify downloadable font */
@import url(/LatoLatin/LatoLatin-Regular.css);
@import url(/oldstyle_201608/f1.css);
@import url(/oldstyle_201608/f2.css);

/* Default style */
body {
	background-color:#121314;
	xbackground-color: #081416;
	color:white;

	font-family: "Crimson Text",serif;
	font-size: 18px;
	line-height: 1.6em;
	letter-spacing: .075em;
	font-weight: 400;
	font-style: normal;
}
a {
	color: #ce8e40;
    text-decoration: none;
}

/* Remove styling from links in headings */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color:inherit; text-decoration:none;}

/* Log-in, current user and admin links */
#loginstatus {
	font: 11pt Lato,LatoLatin,Helvetica,sans-serif;
	letter-spacing: 0;
	position:fixed;
	xwidth:15vw;
	right:0; top:0;
	color:grey; 
	text-align: right; 
	margin-bottom:0.5ex;
	z-index:1;
}
#loginstatus img {
	max-width: 7vw;
	max-height: 7vh;
}

/*
** Page title banner
*/
#xheader {outline: 1px solid blue;}
#header {
	text-align: center; 
	margin:	0;
	xborder: solid black; border-width: 2px 0;
	padding: 0;
}
#header h1 {
	margin: 4.3vw 0 0 ; 
	padding:0; font-size: 30pt;
}
#header img.logo_banner {width:69vw;}
#header img.logo_l {float:left; max-height:100px;}
#header img.logo_r {float:right; margin: 4px; }
#head2 {clear:both;}

/*
** Navigation bar / menu
*/
#navbar {
	padding-bottom:4.3vw;
}
#navbar li {
	display:inline-block;
	margin;0;
	padding:0;
	list-style: none;
}
#navbar ul { 
	text-align: center;
	margin:0; padding:0; 
}
#navbar a, #navbar a:visited {
	text-decoration:none;
	color:inherit;
	font-family: "Crimson Text",serif;
	font-size: 12px;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: .15em;
	font-weight: 400;
	font-style: normal;
	line-height: 1em;
	color: rgba(255,255,255,.6);
	display: block;
	padding: .75em 1em 0;
	transition: color .1s 0s ease-in-out;
}
#navbar a:hover {
	color: white;
}
#navbar a.selected {
	color: white;
}

/*
** Banner image
*/
#bannerimage img {
	width: 100vw;
	overflow:hidden;
	max-width:100%;
}
#bannerimage {
	margin-bottom:65px;
	max-width:100%;
}

#body {
	background-color:#121a1c;
}
.clearfix { clear:both;}
#listing {
	padding:0 4%;
	xfont-family: "calluna";
	text-transform: none;
	max-width: 1012px;
	margin:auto;
}
#listing h2 {
	font-family: "calluna",Lato,LatoLatin,Helvetica,sans-serif;
	font-style: normal;
	font-weight: normal;
	font-size: 42px;
	letter-spacing: .02em;
	line-height: 1.15em;
	text-rendering: optimizeLegibility;
	margin-bottom:0.3em;
}
#listing h3 {
    font-family: "din-condensed-web",Helvetica,sans-serif;
    font-size: 24px;
    line-height: 1.3em;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 400;
    font-style: normal;
}
#body.about div.article {
	-moz-columns: 35ch 3;
	-webkit-columns: 35ch 3;
	columns: 35ch 3;
	widows:2;
	font-size:12pt;
}
.event .ppre {display:none;}

.wiki :first-child {
	margin-top:0;
}


.gallery .imagelist {
	text-align: center;
}
div.galleryimage {
	margin:2%;
	width:29%;
	display:inline-block;
	vertical-align: middle;
	text-align: center;
}
div.galleryimage > div {
	position:relative;
	display:inline-block;
	max-width: 100%;
	x-text-align: center;
}
div.galleryimage input {
	position: absolute;
	left:1ex;
	top:1ex;
}
div.galleryimage img {
	max-width:100%;
	vertical-align: middle;
}
.caption {
	position: absolute;
	bottom:0;
	width: 90%;
	padding:5%;
	text-align: center;
	transition: 0.5s ease;
	xbackground: rgba(128,128,128,0.5);
	background: rgba(0,0,0,0.7);
	xtext-shadow: 1px 1px 1px black,0 0 0.5em black;
	color: white;
}
div.galleryimage .caption {
	opacity:0;
}
div.galleryimage:hover .caption {
	opacity:1;
}

div.galleryimage.newcontrols {
	float:left;
	margin:2%;
	width:auto;
	height:25vw;
}
div.galleryimage div.gallerynew {
	border: solid white 2px;
}
#lightbox {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.9);
	opacity:0;
	text-align:center;
	transition: 0.5s ease;
}
#lightbox.shown {
	display:block;
	opacity:1;
}
#lightbox img.content {
	max-width:90vw;
	max-height:90vh;
	vertical-align:middle;
}
#lightbox .outer:before {
	display:inline-block;
	vertical-align:middle;
	height:90vh;
	width:1px;
	content:' ';
}
#lightbox .wrapper {
	display:inline-block;
	position:relative;
	vertical-align:middle;
}
#lightbox {
}
#lightbox .caption {
	font: 72px "din-condensed-web",Helvetica,sans-serif;
	opacity:0;
	x-margin: 20px auto 0;
	x-padding: 20px;
	text-transform: uppercase;
	text-align: center;
}
#lightbox .wrapper:hover .caption {
	opacity:1;
}


/*
** Page footer. copyright etc
*/
#footer {
	text-align: center;
	font-size: smaller;
	margin-top:2ex;
	border-top: 1px solid silver;
	clear:both;
}
#footer ul,
#footer menu { 
	text-align: center;
	margin:0; padding:0; 
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
}
#footer li {
	list-style: none;
	display:inline-block;
	margin:0;
	padding:1ex 2.2ex;
}
#footer li.selected {
    
}

body {width:100%; margin:0; padding:0;}
#page {width:100%; margin:0; padding:0;}
#body { position:relative; margin:0; margin-bottom:10ex; width:100%;} /* Make body a container block */
#xlmenu { position:absolute; left:0; width:140px; top:0;}
#xrmenu { position:absolute; right:0; width:140px; top:0;}
#xlisting {margin:0 140px;}

/* Narrow screen: move menu to below content */
@media (max-width:40em){
	#lmenu { position:static; float:left;}
	#rmenu { position:static; float:right;}
	#listing {margin:0 0;}
}

/* Printer: hide menus & log-in status - content only */
@media print {
	#loginstatus {display:none;}
	#lmenu {display:none;}
	#rmenu {display:none;}
	#listing {margin:0 0;}
}

/* Allow basic image positioning in articles */
.wiki img {max-width:100%; max-height:90vh;}
.wiki img {float:right;}
.wiki em img {float:none;}
.wiki strong img {float:left;}

/* Admin state styling - not seen by regular users */
.preview {background: #333; border: double gray;}
.submitted { border-left: 3px solid red; }
.obsolete {color: gray; }
.editpreview .preview {background: #121a1c; border:none;}
.editpreview .submitted {border:none;}

.obsolete > * {text-decoration:line-through; }
.obsolete .datebox {text-decoration:none; }
.obsolete .modbox    {text-decoration:none; }
.obsolete .submitted {color:white; }
.obsolete .published {color:white; }

/* Modification user, time & edit links - only seen by admin */
.modbox {
	clear:both;
	text-align:right; color:gray;
	font: 9pt lato,helvetica,arial,sans-serif;
	letter-spacing: 0;

/*	border-bottom: solid gray 1px; */
}
.editlink {
	font: 9pt lato,helvetica,arial,sans-serif;
	letter-spacing: 0;
}

.debug { text-align:left;}
.anchor {position:relative;}

/* Pop-up login - not used */
.popup {display:none;}
#loginstatus:hover .popup {display:block;}
.xpopup:hover, .xpopup:active { display:block;}
.popup {
	color: black;
	position:absolute; 
	text-align: center;
	right:0; top:0; 
	border: 2px solid blue; 
	background:white;
	min-width: 10em;
	min-height: 5em;
	padding: 1em;
	z-index:10;
}

/*
** Warnings & notices at top of page
*/
.notice {
	font: 14pt helvetica,arial,sans-serif black;
	padding: 1em;
	border:3px solid red;
	text-align:center;
}

.alert {
	font: 14pt helvetica,arial,sans-serif black;
	padding: 1em;
	border:3px solid red;
	text-align:center;
}
/* Alternative (disabled) alert style */
.xalert {
	min-width: 33%;
	min-height:33%;
	left:33%; top:33%;
	border: 2px solid red;
	background: white;
	padding: 1em;
	text-align:center;
	z-index:9;
	position:fixed;
}

/*
** Event details: Title, Author, Dates, Director, headline
*/
.event {
	width:30%;
	max-width:40em;
	min-width:15em;
	position:relative; 
	margin-top:1em;
	display:inline-block;
	vertical-align:top;
	box-shadow: -3px -3px 12px -2px black;
	background-color: #121314;
	margin:1%;
}
.event {float:left;}
.event.summary {float:none;}
.event > div {
	display:inline-block;
	vertical-align:top;
}
.event .fixratio {
	padding:0;
	padding-bottom:133%;
	width:0;
	margin:0;
}
.xevent {
	padding:0;
	padding-bottom:37%;
}
.event .details {
	margin: 6%;
	margin-right:0;
	width: 86%;
}
.xevent .details {
	position:absolute;
	top:0; left:0; bottom:0; right:0;
}
.event { font-size:13pt;}
.event h2 {margin:0;padding:0; }
.event * {margin:0; padding:0;}
.event .author {font-size:larger; font-weight:bold; margin-bottom:1ex;}
.event .author, .event .dates, .event .name, .event .date {xfont-family:helvetica,arial,sans-serif;}
.event .headline { margin-top:1ex; font-size:12pt;}

.event > hr {display:none;}
.event.summary {
	x-border-bottom:2px solid black; 
	xpadding-bottom:1em;
}

div.promoimage {
	background-repeat:no-repeat;
	background-image:var(--image,none);
	background-size:contain;
	position:relative; 
	
}
.event .promoimage .overlay {
	display:block;
    /*vertical-align: bottom;*/
	margin: 0 3px;
	font-size:170%;
	position:absolute;
	top:0;
	/*bottom:0;*/
}

/* Coming up / In Production / etc
** Shown on summary, but not in details
*/
.x-detail .ppre {display:none;}
.x-summary .ppre {width:5em; float:left;display:none;}
.x-ppre img {width:100%;}
.x-summary .details {xmargin-left:5em; position:relative; }
.x-ppre {font-style:italic; font-weight:bold; color:maroon;}


.auditionnotice {
	border-bottom: solid black 2px;
}
.details + div {clear:both;}

.coverpic {margin-left:8px;}

/* Editor: preview box */
div.editpreview:before {content:"Preview:";}
.editpreview > div {color:#bbb; border: 2px dashed red; padding: 1ex; /*width: 100%; margin-right:50px;*/}
.editpreview .modbox {display:none;}

/* table of dates */
table.datebox { border-spacing:0; }
table.datebox td {padding: 1px 1ex; }
tr.submitted td:first-child { border-left:3px solid red; } /* Row status (admin) */

/* Admin: edit link on RHS (unless in modbox or post icons) */
.editlink {float:right;}
.ppost .editlink {float:none;}
.modbox .editlink {float:none;}

/*
** Narrow screen: replace pre image with text above
*/
@media (max-width:50em){
	.summary .ppre {float:none; width: auto;}
	.ppre img {display:none;}
	.summary .details {margin-left:1em;}
	.ppre > span:before {content: attr(alt) ":"; }
}

/* 
Failed attempt to get mobiles to work.
Actually needs <meta name="viewport" content="width=device-width, initial-scale=1"> in HTML
@media handheld {
	.xppre img:before { content: "IMG: " attr(alt); border:1px solid red; display:inline; }
	.xppre > span:before { content: attr(aalt) ":"; border:1px solid red; display:inline; color:blue; }
}
*/

/*
post - box (book now, contact, details)
*/
span.ppost {
	float:right; 
	margin: 0 0 0 1em; 
	text-align:right;
	position:absolute;
	right:0; top:-6%;
}
.ppost img {border:none;}
img.ppost { vertical-align:bottom;}

.newsletter span.ppost {
	position:inherit;
}
/*
** Menu styling 
	alternate left and right background images
	can now (since CSS3) be done with :nth-child(odd/even)
*/
/*
.menu li { margin: 0; list-style: none; padding: 1em 0; text-align:center;}
.menu ul { margin:0; padding:0; }
li.menut { background:url(MenuTopL.png) no-repeat top center; padding-left:14px;padding-right: 42px;}
li.menuo { background:url(MenuMidL.png) no-repeat top center; padding-left:14px;padding-right: 42px;}
li.menue { background:url(MenuMidR.png) no-repeat top center; padding-left:42px;padding-right: 14px;}
li.menue + li.menub { background:url(MenuBotR.png) no-repeat top center; padding-left: 42px; padding-right:14px; height:48px;}
li.menuo + li.menub { background:url(MenuBotL.png) no-repeat top center; padding-left: 14px; padding-right:42px; height:48px;}
*/

/*
** Tables in article content etc
*/
table.row_headers th {text-align:left;}
.userinfo th {font-family:helvetica,arial,sans-serif;}
.userinfo h2 {font-family:helvetica,arial,sans-serif;}
.userinfo th {vertical-align:top; text-align:left;}
.userinfo td {vertical-align:top; text-align:left;}

.edittable th {font-family:helvetica,arial,sans-serif;}
.edittable th {vertical-align:top; text-align:left;}
.edittable td {vertical-align:top; text-align:left;}

.datecol { min-width: 5em; }

.wiki table.borders {
	border-collapse:collapse;
}
.wiki table.borders td,
.wiki table.borders th {
	border: 1px solid white;
	padding: 1px 3px;
}

/*
** Styles for booking interface
*/
.clickable {cursor:pointer;}
.seatingrow td.clickable:hover {border:solid black 2px; padding:2px;}
table.xseatingplan {border-collapse: collapse; border-spacing:0; padding:0px; margin:0;}
table.xseatingplan > tr {padding:0px; border:solid 1px red; margin:0px;}
.seatingplan {border-collapse: collapse; border-spacing:0; padding:0;}
.seatingplan td {padding:0;}
.seatingplan {width:100%; max-width:40em;}
.seatingrow {width:100%;}
.xseatingrow {border-collapse: collapse;}
.xseatingrow {margin:0 0 -1px;}
.seatingrow {margin:0 0 ;}
.seatingrow tbody {margin:0;padding:0;}
.xseatingrow {border-collapse: collapse; border-spacing:0;}
.xseatingrow {border:solid blue 1px;}
.xseatingrow tr {border:solid aqua 1px;}
.seatingrow td {margin: 2px;}
.seatingrow td { width: 5%; min-height:5mm; border:solid black 1px; padding: 3px;}
.seatingrow td.hgap { width: 2.5%; background: white; border:none;}
.seatingrow td.pgap { width: 1%; background: white; border:none;}
.seatingrow td.wheelchair {width:10%;}
.seatingrow td.hidden {display:none;}
.seatingrow td.free {background: #97FFB1;}
.seatingrow td.selected {background: #8080FF; border:solid green 4px; padding:0px; }
.seatingrow td.selinfo {border-width:2px;}
.seatingrow td.gap {background: white; border:none;}
.seatingrow td.reserved {background: #FFC1C1;}
.seatingrow td.booked {background: #FFC1C1;}
.seatingrow td.paid {background: #FFC1C1;}
.seatingrow td.duplicate {background: #FF0000;}
.seatingrow td.overbooked {background: #FF0000;}
.seatingrow td.section {text-align:center; border:none;}
#SeatDetails {border: solid blue 3px; margin-top:1ex;}

#OrderDetails table {
	border-spacing:0;
	border-collapse: collapse;
	border: solid blue 1px;
}
#OrderDetails td {
	padding: 0.5ex 1ex;
}
#AvailableDates table {
	border-spacing:0;
	border-collapse: collapse;
	border: solid blue 1px;
}
#AvailableDates p {
	margin: 3px 3px;
}
#AvailableDates td {
	border: solid blue 2px;
	xpadding:0.5ex;
	margin: 2px;
}
#AvailableDates td.chosen {
	border-color: red;
}
#AvailableDates td.current {
	xborder-color: red;
	background-color: #fdd;
}
#AvailableDates td.days:hover {
	background-color: #afa;
}
#AvailableDates td.days a {
	display:block;
	width:100%;
	height:100%;
}

#AvailableDates tr {
	xborder-collapse: none;
	xborder-spacing:3px;
	xborder: solid green 1px;
	xpadding:0.5ex;
}

#InfoBox {
	position: fixed;
	bottom: 0;
	left:0;
	width: 100vw;
	border: 1px solid black;
	z-index: 8;
}
#InfoBox.error { background-color: red; }
#InfoBox.warning { background-color: yellow; }
#InfoBox.okay { background-color: white; }
#FindUser.hide { display:none; }
div.padding_bottom { height: 100vh; }

.tabcontrol.ajok h2.tabs {
	display:inline;
	padding: 0 1ex;
	border-bottom: 2px solid green;
	margin:0;
}
.tabcontrol.ajok h2.tabs.seltab {
	xbackground-color: aqua;
	border:2px solid green;
	border-bottom: 2px solid white;
	border-top-left-radius: 1ex;
	border-top-right-radius: 1ex;
}
.tabcontrol.ajok div.tabs {
	display:none;
}
.tabcontrol.ajok div.tabs.seltab {
	display:block;
}
.tabarea {
	xborder: solid blue 2px;
	xmargin-bottom: 2px;
	margin-top: 1ex;
}
.tabpage {
	border: solid green 2px;
	xborder-top: 0;
}

/* Test mode indicator */
div.testmode {
	position:fixed;
	left:0;top:0;
	color:red;
	font: bold 12pt helvetica,arial,sans-serif;
	z-index:100;
}

table.xdebug-error {
	color: black;
	-xfont-weight: 400;
	letter-spacing: 0;
	font: 8pt monospace;
}