/* LTC style 2022 - HTML5 support */

header:hover,
.event.summary:hover,
.playdetails div.nextplay:hover {
	/*opacity:0.5;*/ /*debug*/
	/*outline: 1px solid black;*/
}
body {
	/*background:url(Design2019.png) top left/100% no-repeat;*/ /* DEBUG */
}
body.playdetails {
	/*background:url(Design2019_play.png) top left/100% no-repeat;*/ /* DEBUG */
}

/* Default style */
html {
	/*background-color:white;*/
	color:#363636;
	
	text-rendering: optimizeLegibility;
	font-family: Helvetica,sans-serif;
	font-weight:bold;
	font-size: 11pt;
	--margin-lr:9vw;
	/*--colour1:gray;*/
	/*--colour2:#46c1d6;*/
}

video {max-width:50%;}

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

body {
	width:100%; margin:0; padding:0;
	background-color: var(--colour1,white);
}
.Data_Article {font-weight:normal;}

body.playdetails {
	color:white;
	background-color: gray;
	background-color: var(--colour1,gray);
}
.playdetails header {
	background:var(--colour1,gray);
}
#page {width:100%; margin:0; padding:0;}


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

.clearfix { clear:both;}

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

/*
** Page title banner
*/
header {
	margin:	0;
	padding: 0;
	background:#E1E1E1;
	background:var(--colour1,#E1E1E1);
	display:flex;
	align-items:center;
}
/* Text logo - stacked, compressed height, fixed size */
/* logo 3 lines = 1/2 banner height */
header .logo {
	text-align: left; 
	margin: 0;
	font-size: 2rem /*2.5vw*/;
	line-height: 80%;
	padding: 1.3em;	
	padding-left: 3.6em;
	padding-left: var(--margin-lr,3.6em);
	width:7ch;
	width: min-intrinsic;
	width: -webkit-min-content;
	width: -moz-min-content;
	width: min-content;
}
#head2 {clear:both;}

.listing > h1,
.editpreview > div > h1,
.Data_Page > h1,
h1 {
	font-size:4rem;
	margin:0;
	margin-top:2rem;
}
.listing > h2 ,
.Data_Page > h2,
h2 {
	font-size:2.2rem;
	margin-top:1rem;
}
.playdetails .listing > h1,
.editpreview > div > h1
{
	margin-bottom:1em;
}

.playdetails div.nextplay,
.editpreview div.nextplay {
	float:right;
	xwidth:18%;
	font-size:1.2rem;
	margin-bottom:3ch;
	margin-left:3ch;
	margin-left:-1ch;
	position:relative;
	left:5ch;
	z-index:1;
}
.playdetails div.nextplay.other,
.editpreview div.nextplay.other {
	xwidth:20vw;
}
.playdetails div.nextplay::before {
	content:"Next up:";
}

/*
** Navigation bar / menu
*/
#xnavbar {outline: 1px solid green;}
#xnavbar li {outline: 1px solid aqua;}
#navbar > details {display:none;}
#navbar {
	margin-right: 9vw;
	margin-right: var(--margin-lr);
	flex-grow:1;
	position:relative; /* for dropdown menu */
}
#navbar ul,
#navbar menu { 
	text-align: center;
	margin:0; padding:0; 
	display:flex;
	flex-wrap:wrap;
	justify-content: flex-end;
}
#navbar li {
	list-style: none;
	display:inline-block;
	xfont-size: 8pt;
	margin:0;
	padding:1ex 2.2ex;
}
#navbar li.selected {
	color: white;
	background:#46c1d6;
	background:var(--colour2,#46c1d6);
}

div.seasonnav,
nav.seasonnav { /*TODO:debug*/
	float:right;
}
div.eventnav { /*TODO:debug*/
	float:right;
}

#listing {
	margin: 0 9vw 10ex;
	margin: 0 var(--margin-lr,3.6em);
}
.listing {
}
.xlisting h2 {
	font-size: 4rem;
	margin-top:0.45em;
	margin-bottom:0;
}
.xlisting h3 {
    font-size: 2.2rem; 
    margin-top:0.45em;
    margin-bottom:0.75em;
}
main.about div.article {
	-moz-columns: 35ch 3;
	-webkit-columns: 35ch 3;
	columns: 35ch 3;
	widows:2;
	font-size:1.3rem;
}
.event .ppre {display:none;}

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

.notice h1.name {display:none;}

/* TODO: gallery */
.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-size:72px;
	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:2em;
	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 {
    
}




/* Admin state styling - not seen by regular users */
.preview {border-left: 5px solid blue; }
.submitted { border-left: 3px solid red; }
.obsolete {/*color: gray;*/ }
.editpreview .preview {border:none;}
.editpreview .submitted {border:none;}

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

/* Modification user, time & edit links - only seen by admin */
.modanchor {
	position:relative;
	margin:0;
	padding:0;
	/*width:100%;*/
}
.Data_Article .modanchor {
	display:inline-block;
	
}
.modanchor .modbox {
	display:none;
	position: absolute;
	bottom:0;
	width:-webkit-max-content;
	width:-moz-max-content;
	width:max-content;
	z-index:9;
}
.modanchor .modbox:hover {
	display:block;
}
:hover > .modanchor .modbox,
:hover + .modanchor .modbox {
	display:block;
}
.modbox {
	/*clear:both;*/
	text-align:left; 
	color:blue;
	font-size:0.75rem;
/*	border-bottom: solid gray 1px; */
	padding: 2px;
	/*padding-top: 1ex;*/
	background:white;
	border:1px solid blue;
	/*border-top:1px solid blue;*/
	/*max-width:200%;*/
	display:inline-block;
}
.xDbObject {
	position:relative;
}
.xevent .info + .modboxh /*,.Data_Article .modboxh*/ {
	xbackground: rgba(0,0,0,0.5);
	left: 0;
	bottom:100%;
	position: absolute;
	display: none;
}
.event:hover .modboxh, 
.Data_Article:hover .modboxh,
.modboxh:hover {
	display:block;
}
.Data_Article .modboxh {
	right:0;
	/*top:100%;*/
	left:unset;
	/*bottom:unset;*/
}
.Data_Article {
	position:relative;
}

.editlink {
	xfont-size: smaller;
}

.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 {
	border-radius: 9px;
	font-size: 14pt;
	font-weight:bold;
	padding: 1em;
	/*border:3px solid red;*/
	text-align:center;
	box-shadow: -2px 2px 8px 0 black;
	background-color:white;
	color: black;
}

.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
*/
div.multievent {
	/*display:flex;*/
	/*flex-wrap:wrap;*/
	margin-top:1em;
	margin-bottom:2.2rem;
	justify-content: left /*space-between*/;
	width:100%;
	row-gap:2em;
	column-gap: 2em;
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(14ch, 1fr));
}

/*
div.multievent > :nth-child(2) { font-size:1.1rem; }
div.multievent > :nth-child(3) { font-size:1.2rem; }
div.multievent > :nth-child(4) { font-size:1.4rem; }
div.multievent > :nth-child(5) { font-size:1.6rem; }
*/
div.multievent.other {
	grid-template-columns: repeat(auto-fill, minmax(20ch, 1fr));
	/*justify-content: flex-start;*/
	/*width:auto;*/
}
.event /*.summary*/ {
	/*max-width:40em*/;
	xmin-width:10em;
	xmargin:1vw; 
	xmargin-top:1em;
	xmargin-bottom:6vw;
}
.xnextplay .event /*.summary*/ {
	width:100%;
	max-width:25vw;
}

.other .event /*.summary*/ {
	/*max-width:13em;*/
}
.event.summary .details {
	box-shadow: -2px 2px 8px 0 black;
}
.main .event .details,
.auditions .event .details {
	border-radius: 9px;
	border:2px solid white;
	height:100%;
}

.event.summary .details {
	margin:0;
	width: 100%;
	background:white;
	color: #363636;
}
.event.full .details {
	margin:0;
	width: 100%;
}

.event/*.summary*/ div.promoimage {
	width:100%;
}
.other .event/*.summary*/ div.promoimage {
	width:45%;
	display:inline-block;
	vertical-align:top;
	box-sizing:border-box;
	overflow:hidden;
}

.event.full {
	width:17ch;
	position:relative;
	float:left;
	margin-right:3ch;
	margin-bottom:3ch;
	font-size: 1.2rem;
	z-index:1;
}
.editpreview .event.full {
	/*float:none;*/
}
.editpreview .hidelink {display:none;}
.event.summary {
	/*width:14%;*/
	/*width: calc((100% - 6vw) / 7 );*/
	/*width:9vw;*/
	/*width:12ch;*/
	/*max-width:20vw;*/
	position:relative;
}
.multievent.other .event.summary {
	/*min-width:20ch;*/
	/*max-width:20vw;*/
}
.nextplay.main .event.summary {
	width:17ch;
}
.nextplay.other .event.summary {
	width:25ch;
}

.multievent .event {
	/*flex-grow:1;*/
	/*margin-right:3vw;*/
}
.event.summary .info {
	font-size:70%;
	padding:1ex;
}
.other .event /*.summary*/ .info {
	display:inline-block;
	width: 50%;
	width: calc(54% - 2ex);
	box-sizing:border-box;
	width:55%;
}
.event.summary .info .audition {
	font-size:140%;
}
.event /*.summary*/ .info .dates {
	min-height:2em;
}
.event /*.summary*/ .info .author {
	min-height:2em;
}

.event.full .details .performance {
	margin-top:1em;
	font-size:80%;
}
.event.full ~ .Data_Article {clear:both;}
.event.full ~ .Data_Article.first {clear:none; text-align:justify;}
.event.full ~ .Data_Article.first h2:first-child {display:none;}
.event.full ~ .Data_Article.first > .wiki > p:first-child {font-weight:bold; font-size:115%; margin-bottom:2em;}

.event.full + .headline {
	font-size:120%;
	font-weight:bold;
}
.editpreview .event.full ~ .Data_Article {display:none;}
.editpreview .event.full ~ .Data_Article.first {display:block;}

details.Data_Article summary {
	/*list-style: none;*/
	/*display:inline-block;*/
	margin;0;
	margin-top:1em;
	padding:1ex 2.5ex;
	font-weight:bold;
	color:white;
	background:var(--colour2,#999);
}

/*
.event.full .details {
}
.event.full a.promoimage,
.event.full .details > * {
	display: inline-block;
	vertical-align:top;
}
.event.full a.promoimage {
	width: 28%;
	width: calc((100% - 16vw) / 3 );
}
.event.full div.info {
	width: 66%;
	width:calc(99% - 4vw - (100% - 16vw) / 3 );
}
*/

/* Narrow screen */
/*
@media (max-width:780px){
.event.summary {
	width:44%;
	width: calc((100% - 12vw) / 2 );
}
.event.full a.promoimage {
	width: 44%;
	width: calc((100% - 12vw) / 2 );
}
.event.full div.info {
	width: 50%;
	width:calc(99% - 4vw - (100% - 12vw) / 2 );
}
}
*/

/* Text overlaid on promo image */
.event .promoimage .overlay {
	display:block;
    vertical-align: bottom;
	margin: 0 3px;
	color:white;
	font-size:170%;
	position:absolute;
	bottom:0;
}
.event .promoimage .overlay.smalltxt {
	/*font-size:120%;*/
}
/* Text without promo image */
xdiv.promoimage.noimage {
	vertical-align:middle;
	text-align: center;
}
.full .promoimage .overlay { display:none;}
.overlay h2 {
	font-size:100%;
	margin:0;
	line-height:80%;
	position:relative;
	bottom:-0.2ex;
	width: min-intrinsic;
	width: -webkit-min-content;
	width:-moz-min-content;
	width:min-content;
	transform-origin:left calc(100% - 0.2ex);
	transform:scale(calc(max(0.25,min(1,12 / 1.7 / var(--longestword,1)))));
}
xdiv.promoimage.noimage .overlay {
	vertical-align:middle;
	text-align: center;
}
.summary div.promoimage {
	width:100%;
}
.full div.promoimage {
	max-width:100%;
}
div.promoimage {
	background-repeat:no-repeat;
	background-size: 100%;
	background-color: gray;	/* Colour of box if no image */
	background-color: var(--colour1,gray);	/* Colour of box if no image */
	position:relative;
}
.main div.promoimage,
.auditions div.promoimage {
	border-top-left-radius:6px;
	border-top-right-radius:6px;
	overflow: hidden
}
/* fix aspect ratio of image box */
div.promoimage .fixratio {
	display:inline-block;
	padding: 0;
	padding-bottom:123%; /* 250 x 280 = 100:112 */
	width:0px;
	margin:0;
}
.full .promoimage .fixratio { padding-bottom:112%;}
.other div.promoimage .fixratio {
	padding-bottom:112%; /* 250 x 280 = 100:112 */
}
/* Align text on box */
div.promoimage .fixratio {
	vertical-align:middle;
}

.promoimage a {
	color:white;
}
.event .promoimage a {
	font-size:48px;
	color:white;
}
.event .info a.audition { /*color:white;*/}

.event.full .info {
	/*margin-left: 4vw;*/
}

/*
.event .info {
	font-size:15px;
	margin-top:4vw;
	xbackground: black;
}
*/
/* Only show dates & director */
.event.summary .info > * {display:none;}
.event.summary .info.nooverlay p.name {display:block;}
.event.summary .info p.dates {display:block;}
.event.summary .info p.author {display:block;}
.other .event.summary .info p.credit {display:block;}
.event.summary .info p.credit {display:block;}  /* COVID - show POSTPONED */

.xevent.summary .headline {display:none;}
.xevent.summary .name {display:none;}
.xevent.summary .author {display:none;}
.xevent .name {  font-weight:bold;}
.event p.author:before {content:'by ';}
.event p.director:before {content:'Directed by ';}
.xevent .director {font-style:italic;}

.event h2 {margin:0;padding:0; }
.event * {margin:0; /*padding:0;*/}
.event > hr {display:none;}

.auditions .event.summary .info .audition {display:block;}

/* 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
{ 
	background: var(--colour1,white);
	border: 2px dashed red; 
	outline: 2px dashed red; 
	padding: 1ex; /*width: 100%; margin-right:50px;*/
}
.editpreview .modbox {display:none !important;}

a.booknow {
	display:block;
	color: var(--colour1,black);
	background:white;
	width:100%;
	max-width:30ch;
	text-align:center;
	padding: 1ex 0;
	margin: 0 0 1ex;
}
.summary a.booknow {
	display:none;
	position:absolute;
	background: var(--colour1,gray);
	color:white;
}
.summary:hover a.booknow {
	display:block;
}
.summary:focus-within a.booknow {
	display:block;
}

/* table of dates */
table.datebox { border-spacing:0; }
table.datebox td {padding: 1px 1ex; }
.audition table.datebox
{
    margin-bottom:1em;
    font-weight:bold;
}
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;}

.Data_Page > .editlink {color:blue;border: solid 1px blue; padding:2px;}

/*
** 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%;
	display:none;
}
.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;
}

:target ~ details {
    display:block;
}

/* Narrow screen: move menu to below content */
@media (max-width: 652px){
	/*Lose next play card*/
	.playdetails div.nextplay {display:none;}
	#navbar summary {
    	display: inline-block;
    	text-align: center;
    	margin: 0;
    	padding: 0;
    	font-size:2rem;
    	list-style: none;
	}
	#navbar > details {
		display:block;
		text-align: right;
	}
	#navbar > ul,
	#navbar menu {
		display:none;
		position:absolute;
		right:0;
		top:100%;
		border: solid white 2px;
		flex-direction: column;
	    background: var(--colour2,#999);
	    z-index:5;
	}
	#navbar >details[open] + ul,
	#navbar >details[open] + menu {
		display:flex;
	}
}

@media (max-width: 450px){
	/*shift text below details*/
	.event.full {width:100%; float:none;}
	.event.full + * {clear:both;}
}

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