/* (c) Borderline Morris 2013+ | developed by Mark Iliff, Talespinner www.talespinner.co.uk 
	Styles specific to booking system
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

@charset "utf-8";


/* Globals
-----------------------------------------------*/
	body 							{ position: relative; margin: auto; width: 100%; max-width: 800px; padding: 0 200px; 
										background-color: black }

	footer 							{ margin: 3em 0; font-size: 0.8em; }
	body, input, select, textarea 	{ font-family: var( --fBase ); font-weight: 400; letter-spacing: 0.03em; }
	
	header + p 						{ margin-top: -1.5em; margin-bottom: 3em; }
	h1 								{ font-size: 1.6em; }
	h1 a, h1 a:hover				{ color: var( --bmOrange ); border: none; }
	h1#desk							{ position: fixed; top: 0; left: 0; z-index: 40; }
	h1#mob							{ display: none; float: left; max-width: calc( 100vw ); }
	h2 								{ font-family: var( --fFancy ); font-size: 3em; font-weight: normal; margin-top: 1ex; }
	h3 								{ border-bottom: 1px solid; }

	a 								{ text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; }
	a:hover 						{ border-bottom-style: solid; }
	a img 							{ border: none; vertical-align: top; }	/* suppresses border on image links */ 
	a.bdr0 							{ border: none; }
	
	table 							{ border-collapse: collapse; padding: 0.1ex 0.1em }
	tr 								{ text-align: left; }
	thead th 						{ padding-right: 5px; }
	thead th.mid 					{ padding-left: 2px; padding-right: 2px; }
	tbody th 						{ padding-right: 5px; }
	tbody td 						{ padding: 8px 4px; }
	tbody td 						{ border: 1px solid #444; }
	
	#publicDiary td 				{ padding: 0.5em 5px; }

	textarea 						{ font-size: 0.9em; }
	fieldset 						{ margin-bottom: 2em; border: 2px solid; border-radius: 12px; padding: 1em 1ex; }
	legend 							{ margin-left: 12px; font-size: 1.2em; }
	legend + p 						{ margin-top: 0; margin-left: 14px; font-size: 0.8em; }
	fieldset label:not(.radio), fieldset label.radio span 
									{ display: block; float: left; margin-top: 1ex; width: 200px; text-align: right; 
										padding-right: 1em; font-weight: bold; }
	fieldset input, fieldset textarea, fieldset select 
									{ margin-top: 1ex; }
	fieldset .radio input 			{ margin-top: 1.5ex; }
	fieldset input[type=text], fieldset input[type=password], fieldset textarea, fieldset select 
									{ width: 250px; }
	fieldset input.skinny, form input.skinny
						 			{ width: 2em; }
	input:disabled 					{ color: black; font-style: italic; }
	fieldset br 					{ clear: both; }
	
	footer 							{ padding-bottom: 4em; border-top: 2px solid; }

	@media print { 
		body 						{ background: none; padding: 0; } 
	}

/* Colours
-----------------------------------------------*/
	/* text */
	body, .white, p.cue.white 		{ color: #ccc; }
	.b_blue 						{ color: #3867e9; }
	h1, .usm 						{ color: var( --bmOrange ); }
	h2, legend + p, a:hover, p.cue, .filterRow label, #filterAGMs, #publicDiary .b_yellow a  
									{ color: var( --bmYellow ); }
	h3, noscript, legend, #publicDiary .grey .b_green, #publicDiary .b_green a 
									{ color: var( --bmGreen ); }
	a 								{ color: var( --bmPink ); }
	.b_red, .exception 				{ color: #e91255; }
	.grey a, .grey .b_green, .grey .b_orange, .grey .b_red 
									{ color: gray; }
	p.cue strong					{ color: var( --bmGreen ); }
	h1 								{ text-shadow: 0 0 3px #ff7307; }
	h2 								{ text-shadow: 0 0 4px #6f8000; }
	h3, noscript 					{ text-shadow: 0 -1px #048000; }
	a 								{ border-bottom-color: var( --bmPink ); }
	a:hover 						{ border-bottom-color: var( --bmYellow ); }
	nav a 							{ color: black; background: #fb44ee; box-shadow: 0 0 5px #fb44ee; }
	nav a:hover 					{ color: black; background: #deff00; box-shadow: 0 0 10px #deff00; }
	tbody tr:hover 					{ background: rgba( 255, 255, 255, 0.3 ); }
	tbody tr:hover td.bgDark 		{ background: rgba( 255, 255, 255, 0.15 ); }
	tbody tr:hover th, tbody tr:hover td 
									{ color: white; }
	tbody tr:hover a 				{ color: black; }
	.tablesorter thead th 			{ padding-bottom: 1ex; }
	
	/* backgrounds */
	.b_bgBlue 						{ background-color: #3867e9; }
	.b_bgGreen 						{ background-color: #08fe00; }
	.b_bgOrange 					{ background-color: #ff7307; }
	.b_bgRed 						{ background-color: #e91255; }
	.b_bgYellow, #signIn fieldset 	{ background-color: #deff00; }
	.b_bgPurple, #signIn legend 	{ background-color: #fb44ee; }
	.b_bgGreenGrey 					{ background: #dcdcdc; }
	.b_bgOrangeGrey 				{ background: #9f9f9f; }
	.b_bgRedGrey 					{ background: #6e6e6e; }
	.b_brYellow, footer, #publicDiary .b_yellow a 
									{ border-color: #deff00; }
	.b_brGreen, h3, #publicDiary .b_green a 
									{ border-color: #08fe00; }
	.b_brOrange 					{ border-color: #ff7307; }
	.b_brPurple, fieldset 			{ border-color: #fb44ee; }
	.b_brRed 						{ border-color: #e91255; }
	
	@media print { 
		h1, h2, h3 					{ text-shadow: none; }
		a, .b_yellow, h2, legend + p, a:hover, p.cue, .filterRow label, #publicDiary .b_yellow a 
									{ color: black; } 
	}


/* Recurring elements
-----------------------------------------------*/
	/* header block */
	#nameBlock 						{ float: right; margin-top: -1ex; text-align: right; font-size: 0.9em; }
	#nameBlock a 					{ font-size: 0.9em; cursor: pointer; }
	#signOut + br 					{ margin-bottom: 1ex; }
		
	/* navigation */
	nav 							{ display: block; margin-bottom: 2em; }
	nav a 							{ margin-right: 1em; padding: 5px 10px; border-radius: 18px; text-decoration: none; }
	#hamburger, #mnuClose 			{ position: absolute; display: none; cursor: pointer; }
	#hamburger						{ top: 10px; right: 30px; }
	#mnuClose 						{ top: 30px; right: 0; }
	
	#signOutHam						{ display: none; cursor: pointer; }
	
	/* forms */
	.usm 							{ display: none; font-style: italic; }
	.overlay 						{ display: none; position: absolute; top: 50px; margin-left: -20px; z-index: 10; 
										background: rgba( 0, 0, 0, 0.7 ); font-size: 2em; text-shadow: 0 -1px black; 
										text-align: center; border: 2px solid; border-radius: 48px; }
		
	/* tables */
	.tablesorter thead th 			{ padding-top: 1ex; padding-bottom: 1ex; }
	.tablesorter tbody td span, .tablesorter tbody th[scope=row] span 
									{ display: none; }
	
	.filterRow td 					{ padding: 5px 0; }
	.filterRow label 				{ font-size: 90%; cursor: pointer; }
	.filterRow input 				{ vertical-align: middle; }
	.evDate i 						{ display: none; }
	tbody td span					{ display: none; }
	tbody td span.modeView			{ display: inline; }
	
	/* loading gif */
	#loading						{ display: none; }
	#loading img 					{ max-width: 20vw; max-height: 20vh; }
	
	@media print { 
		nav 						{ display: none; }
	}


/* Open classes
-----------------------------------------------*/
	.light							{ font-family: 'notoLight'; }
	.stickyT						{ position: sticky; top: 0; z-index: 21; background: var( --darkCharc ); }
	.stickyL						{ position: sticky; left: 180px; z-index: 20; background: var( --darkCharc ); }
	.bagOnly 						{ display: none; }
	
	p.cue 							{ margin-top: 0.5ex; margin-left: 215px; font-size: 0.8em; }
	
	.tot th, .tot td 				{ padding-top: 1em; }
	.tot span 						{ padding: 0.2ex 0.5em; border-top: 1px solid; border-bottom: 3px double; }
	.tot.nocol span 				{ border-top: none; }

	.tablesorter tbody td span.modeView 
									{ display: block; }
	.tablesorter span.modeEdit input 
									{ width: 15px; }
	
	.cb label 						{ display: block; width: 100%; }
	
	tr.r_notActive 					{ display: none; }
	td.gap 							{ width: 0.5ex; border-top-width: 0; border-bottom-width: 0; }
	
	img.icon 						{ margin-left: 5px; vertical-align: middle; }
	img.delButton 					{ display: none; margin-left: 0.5ex; vertical-align: middle; }
	
	img.kiss 						{ position: absolute; }
	img.tick 						{ vertical-align: middle; }
	img.iconSocial 					{ vertical-align: middle; }
	img.iDone 						{ display: none; }
	
	.editBtn 						{ cursor: pointer; }
	.postit							{ position: absolute; bottom: -10px; left: 400px; z-index: 30; width: 200px;
										padding: 10px; color: black; background: var( --bmYellow ); 
										border-radius: 8px; box-shadow: 4px 4px var( --lighten30 );}
	div.errMsg						{ margin: 1em auto; width: 400px; padding: 1ex; color: white; 
										border: 2px solid var( --redWarn ); }
	.tramlines						{ border: solid white; border-width: 0 1px; }

/* Pages with search filters
-----------------------------------------------*/
	tr.filters, tr#genre 			{ background: rgba( 192, 192, 192, 0.4 ); }
	.srchUnit 						{ position: relative; }
	.srchUnit input 				{ max-width: 125px; border-width: 1px; }
	.cross 							{ display: none; }
	.roll16 						{ position: absolute; top: 4px; right: -8px; width: 16px; height: 16px; 
										background-position: 0 -16px; background-repeat: no-repeat; 
										z-index: 20; cursor: pointer; }
	.roll16.cross 					{ background-image: url( "/img/widg/cross16.png" ); }
	.roll16.tick 					{ background-image: url( "/img/widg/tick16.png" ); }
	.roll16:hover 					{ background-position: 0 0; }
	.not-prep, .not-1, .not-2, .not-3, .not-4, .not-5, .not-6, .not-7, .not-8 
									{ display: none !important; } 

		

/* Page-specific
-----------------------------------------------*/
	/* multiple */
	#unShow, #linkShow 				{ float: left; margin-top: 1ex; }

	/* home page */
	#signIn fieldset 				{ margin: 4em auto; color: #222; text-shadow: 0 0 7px #6f8000;
										box-shadow: 0 0 5px #802379; border: 4px solid #fb44ee; border-radius: 24px; }
	#signIn legend + p 				{ color: #222; }
	#signIn p:not(.cue) 			{ margin-left: 24px; } 
	#signIn legend 					{ margin-left: 18px; font-size: 1.8em; color: white; 
										text-shadow: 0 -1px rgba( 0, 0, 0, 0.7 ); text-transform: lowercase; 
										padding: 6px; border-radius: 12px; box-shadow: 1px 1px 3px black; }
	#signIn fieldset a 				{ font-weight: bold; }
	#signIn label, #signIn #unShow	{ height: 30px; font-size: 18px; padding-top: 4px; }
	#signIn input[type=text], #signIn input[type=password] 
									{ font-size: 20px; }
	#signIn input[type=submit] 		{ margin: 1ex 0 1ex 215px; font-size: 1.6em; text-shadow: 0 -1px #888; }
	#signIn input[type=submit].small
									{ font-size: 0.85em; }
	#orReset						{ font-size: 0.8em !important; }
	ul.home 						{ font-size: 0.9em; }
	ul.home .menuSpacer 			{ display: inline-block; min-width: 13em; font-size: 105%; }
	img.load 						{ display: none; margin-left: 1ex; vertical-align: middle; }

	/* danceQR */
	#pgLookDanceQR th, #pgLookDanceQR td 
									{ padding: 1ex 1em; }
	
	/* member list */
	#members th.cb, #memberRoles th.cb 
									{ vertical-align: bottom; text-align: center; }
	#members td.cb 					{ width: 5%; text-align: center; }
	#memberRoles td.cb 				{ width: 10%; text-align: center; }
	
	/* member profile */
	#unShow span 					{ display: block; float: left; width: 250px; margin-right: 1ex; padding: 2px; 
										font-size: 0.8em; border: 1px solid silver; }

	#pwdChange						{ display: none; position: fixed; z-index: 50; top: 0; left: 50%; 
										transform: translateX( -420px );
										max-width: 840px; height: 100vh; overflow: hidden;
										background: rgba( 0, 0, 0, 0.5 ); backdrop-filter: blur( 5px ); 
										font-weight: bold; padding-top: 100px; }
		
	/* team schedule */
	body#pgSch 						{ max-width: calc( 100% - 220px ); padding-right: 20px; }
	#schedule th 					{ padding: 0 5px; }
	#schedule td 					{ width: 100px; min-width: 60px; }
	#schedule tbody td span 		{ display: none; } 
	#schedule td span.modeView 		{ display: block; }
	#schedule #editPrompt 			{ display: inline; }
	#schedule .crossHatch 			{ display: none; }
	#schedule tbody td:hover 		{ scale: 1.2; }

	/* individual schedule */
	#schedule_m 					{ position: relative; }
	
	/* events */
	.prevNxt 						{ float: right; font-size: 80%; }
	#events .grey 					{ color: #666; }
	#events th.cb 					{ vertical-align: bottom; text-align: center; }
	#events td.cb 					{ width: 5%; text-align: center; }
	#linkShow li 					{ margin-top: 0; min-height: 24px; }
	.comment .delButton 			{ display: inline; margin-right: 1ex; }
	#publicDiary tbody td 			{ border: none; }
	#eventTeam td.col0:hover		{ scale: 1.4; }
	
	/* venues */
	#delVenue 						{ margin-left: 14px; }
	input.filt 						{ width: 200px; margin-right: 2em; }
	.chosen-container li.active-result 
									{ background: none; padding-top: 4px; }
	
	/* dances & tunes */
	a.play							{ cursor: pointer; }
	#player 						{ display: none; position: fixed; top: 80px; right: calc( 50vw - 100px ); 
										width: 200px; height: 260px; z-index: 30; background: black;
										box-shadow: 4px 4px 4px rgba( 10, 253, 3, 0.8 ); 
										border: 1px solid var( --bmGreen ); }
	#player audio 					{ display: block; width: 180px; margin: auto; }
	#playCaption, #playClose 		{ position: absolute; z-index: 40; }
	#playCaption 					{ top: 120px; left: 10px; width: 180px; font-size: 120%; color: black; 
										text-align: center; background: var( --bmYellow ); border-radius: 8px; }
	#playClose 						{ top: -12px; right: -12px; cursor: pointer; }
	
	/* supervise stuff */
	h4.box 							{ font-weight: normal; padding: 5px; border: 1px solid; }
	#sessKill .delButton 			{ display: inline; cursor: pointer; }



/* Responsive
--------------------------------------------------------------------------------------------------------*/
	@media screen and (max-width: 1250px) {
		/* lose body right padding */
		body#pgSch 					{ margin-left: 0; max-width: calc( 100% - 40px ); padding-right: 20px; 
										padding-left: 20px; }
	}

	@media screen and (max-width: 1000px) {
		/* global */
		body 						{ max-width: 96%; margin-left: 0; padding: 0 10px; }
		h1#mob, header 				{ width: 100vw; }
		h1#mob						{ display: block; }
		
		/* switch to hamburger menu */
		#hamburger 					{ display: inline; }
		#pgBSHome #hamburger		{ display: none; }
		#nameBlock 					{ display: none !important; }

		nav 						{ display: none; position: fixed; z-index: 60; top: 0; left: 0; 
										width: calc( 100vw - 20px ); height: 100vh; overflow: hidden;
										background: rgba( 0, 0, 0, 0.6 ); backdrop-filter: blur(10px); 
										font-weight: bold; padding-top: 100px; border-right: 20px solid black; }

		nav a, nav a.hide 			{ display: block; margin: 1ex 1em 1ex 1em; font-size: 150%;
										background: none; box-shadow: none; color: white; border: none;}
		nav a:hover 				{ background: none; box-shadow: none; border: none; color: white; }

		/* misc */
		.prevNxt 					{ float: none; font-size: 100%; }
		.iEdit						{ height: 12px; }
		.stickyL					{ left: 0; }
	}

	@media screen and (max-width: 800px) {
		thead th					{ font-size: 80%; }
		
		/* take air out of forms */
		legend + p					{ margin-left: 0; }
		fieldset label:not(.radio), fieldset label.radio span 
									{ float: none; width: 200px; text-align: left; }
		fieldset label:not( .radio )::after
									{ content: ":"; }
		fieldset input[type=text]:not( .skinny ), fieldset input[type=password], fieldset textarea, fieldset select, #unShow span
									{ margin-top: 0; width: 200px; }
		p.cue 						{ margin-top: 0; margin-left: 0; font-size: 0.8em; }
		ul.home a 					{ min-width: 4em; }
		
		/* remove nice-to-haves */
		.nicety 					{ display: none !important; }
		
		/* home & section menus */
		ul.home .menuSpacer			{ display: inline;  }
		ul.home .menuSpacer:after	{ content: '\A'; white-space: pre; }	
		
		/* Page-specific
		-----------------------------------------------*/
		/* home */
		.home .helptxt 				{ display: none; }
		#signIn 					{ width: 90%; }
		input[type=submit]#signDo	{ margin-left: 0; clear: left; }
		
		/* contact list */
		#memberList .e 				{ font-size: 90%; font-weight: normal; }
		
		/* event_m */
		#pgEventM #event, #pgEventM #team 
									{ float: none; width: 90%; }
	}