/* (c) Borderline Morris 2007+ 
	Styles common to both public pages & booking system
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

@charset "utf-8";
@import url( "/css/fntDiscognate.css" );
@import url( "/css/fntNoto.css" );


/* variables 
=====================================================================================================================*/
	:root { 
		/* font-family */
		--fBase:				'noto';
		--fBasePublic:			'notoSemibold';
		--fLight:				'notoLight';
		--fFancy:				'Discognate';
		--fFancyThin:			'DiscognateLight';
		
		/* color */
		--bmGreen:				#09fe02;
		--bmOrange:				#fd8a2d;
		--bmPink:				#fd43ee;
		--bmYellow:				#dffe00;
	}


/* globals 
=====================================================================================================================*/
	body 						{ margin: 8px; background: black; padding-right: 10px; }
	h1							{ margin: 0; }
	h1#desk						{ position: fixed; top: 0; left: 0; z-index: 40; }
	h1#mob						{ display: none; float: left; max-width: calc( 100vw - 80px ); }
	ul:not(.vanilla) 			{ list-style-type: none; padding: 0; margin-left: 0; }
	ul:not(.vanilla) li 		{ margin-top: 1ex; background: url( /img/widg/bullet.png ) 0 0.5ex no-repeat; 
									list-style-position: outside; padding-left: 1.5em; }
	
	#warnDev					{ position: fixed; top: 0; left: 150px; z-index: 50; }
	#httpErrBox					{ max-width: 600px; color: var( --bmOrange ); }
	#httpErrBox h2 + p			{ font-size: 200%; font-family: var( --fLight ); }
	#httpErrBox ul				{ clear: both; border: 2px solid var( --bmYellow ); border-radius: 8px; padding: 1em; }
	#httpErrBox li				{ margin: 1em; }

	.b_green					{ color: var( --bmGreen ); }
	.b_orange 					{ color: var( --bmOrange ); }
	.b_purple					{ color: var( --bmPink ); }
	.b_yellow					{ color: var( --bmYellow ); }


/* template
=====================================================================================================================*/
	/* top navigation - desktop */
	#navTop 					{ clear: right; float : right; width: 800px; font-family: var( --fFancy ); 
									font-size: 42px; text-transform: lowercase; }
	#navTop a 					{ display: inline-block; width: 150px; margin: 0; text-align: center; }
	#navTop a:hover 			{ text-decoration: none; text-shadow: 0 0 8px, 0 0 24px white; }

	/* hamburger menu */
	#ham, #hamClose 			{ display: none; float: right; cursor: pointer; }
	#hamClose 					{ margin: 20px; }
	#hm img						{ max-width: 100%; }
	#hamLogo 					{ margin: 8px; }
	#menuHam 					{ display: none; position: fixed; z-index: 10; top: 0; bottom: 0; left: 0; right: 0; 
									background: black; }

/* responsive - adapt for narrower screens
=====================================================================================================================*/
	@media( max-width: 1000px ) {
		body					{ padding: 0; }
		body *					{ max-width: 96%; }
		body #menuHam			{ max-width: 115%; }
		h1#desk					{ display: none; }
		h1#mob					{ display: block; }
		#navTop 				{ display: none; }
		#ham, #hamClose 		{ display: block; }
		#warnDev				{ position: absolute; left: -16px; top: -24px; }
	}