/*////////////////////////////////////////////////////////////////////////////
// Version 2.1 Signed by Sid @ FLAKE on 2025-09-03 T 14:02:07 -06:00
// Authentication (do not edit) $WHAA=V8K$
//////////////////////////////////////////////////////////////////////////////
//
// Copyright (c) 2025 by Sid Paral. All rights reserved
//
// Permission to use, copy, modify, and distribute this software for any
// purpose with or without fee is hereby granted, provided that the above
// copyright notice and this permission notice appear in all copies.
//
// THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
// WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
// MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
// ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
// WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
// ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
// OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
//
//////////////////////////////////////////////////////////////////////////////
//
// nor-den.css
//
////////////////////////////////////////////////////////////////////////////*/

:root						{
									--norge-color-break:		#AAA;
									--norge-color-fore-text:	#000;
									--norge-color-gal-rim:		#000;
									--norge-color-back-body:	#FFF;
									--norge-color-back-spine:	#DDE;
									--norge-color-back-main:	#EFE;
									--norge-color-back-extra:	#FFD;
									--norge-color-back-photo:	#000;
									--norge-color-link-reg:		#009;
									--norge-color-link-vis:		#339;
									--norge-color-link-hov:		#066;
									--norge-color-link-act:		#F66;
									--norge-padding:			0.5rem;
									--norge-line-size:			0.2rem;
									--norge-button-radius:		0.5rem;
									--norge-thumb-radius:		0.5rem;
									--norge-border-radius:		1.0rem;
									--norge-line-radius:		calc(0.5 * var(--norge-line-size));
									--norge-font-size-text:		0.9rem;
									--norge-font-size-cap:		0.8rem;
									--norge-wait-progress:		0%;
									--norge-limit-tight2:		30rem;
									--norge-limit-tight1:		35rem;
									--norge-limit-small:		50rem;
							}

body 						{	background-color:		var(--norge-color-back-body);
								background-repeat:		no-repeat;
								background-attachment:	fixed;
								background-position:	center center;
								color:					var(--norge-color-fore-text);
								margin:					0;
								font-family:			Tahoma, Verdana, "Bitstream Vera Sans", "DejaVu Sans", Geneva, Arial, sans-serif;
								font-size:				var(--norge-font-size-text);
								text-align:				justify;
								position:				static;
								padding:				0;
							}
.base						{
								position:				fixed;
								left:					0px;
								right:					0px;
								top:					0px;
								bottom:					0px;
								display:				flex;
								flex-flow:				row nowrap;
								padding:				0;
							}
.main						{	background-color:		var(--norge-color-back-main);
								padding:				var(--norge-padding);
								min-height:				100dvh;
							}
.extra						{	background-color:		var(--norge-color-back-extra);
								padding:				var(--norge-padding);
								min-height:				100dvh;
							}

a							{	text-decoration: 		none; 	}
a:link						{	color:					var(--norge-color-link-reg);	}
a:visited					{	color:					var(--norge-color-link-vis);	}
a:hover						{	color:					var(--norge-color-link-hov);
								text-decoration:		underline;
							}
a:active					{	color:					var(--norge-color-link-act);	}
a:not([href])				{	text-decoration: 		none;
								color:					var(--norge-color-fore-text);
							}
*							{	box-sizing:				border-box;	}

/****************************************************************************/

.framed						{	/* class flag to indicate invocation within (i)frame */ }
.framed .hidden-in-framed	{	display:				none;	}

.v-main						{	position:				static;
								width:					100%;
								display:				flex;
								flex-flow:				column nowrap;
								justify-content:		flex-start;
								align-items:			flex-start;
								background-color:		var(--norge-color-back-main);
							}
.v-spine					{	position:				static;
								height:					100%;
								display:				flex;
								flex-flow:				column nowrap;
								justify-content:		space-between;
								align-items:			center;
								gap:					var(--norge-padding);
								padding:				var(--norge-padding);
								background-color:		var(--norge-color-back-spine);
							}
.h-spine					{	position:				static;
								width:					100%;
								display:				flex;
								flex-shrink:			1;
								flex-flow:				row nowrap;
								justify-content:		space-between;
								align-items:			center;
								gap:					var(--norge-padding);
								padding:				var(--norge-padding);
								background-color:		var(--norge-color-back-spine);
							}
.main-pane					{	position:				static;
								width:					100%;
								flex-grow:				1;
							}

.cover-pane					{	position:				absolute;
								top:					0px;
								left:					0px;
								width:					100%;
								height:					100%;
								padding:				var(--norge-padding);
								display:				flex;
								flex-flow:				row wrap;
								justify-content:		flex-start;
								align-items:			flex-start;
								background-image:		url('../newpix/jv44b.jpg');
								background-origin:		border-box;
								background-repeat:		no-repeat;
								background-position:	0% 36%;
								background-size:		cover;
							}
.landscape .cover-pane		{	justify-content:		flex-start;	}

.covertitle					{	width:					32rem;
								height:					auto;
								max-width:				100%;
								display:				block;
							}
.framed .covertitle			{	display:				none;	}
.short2 .covertitle			{	display:				block;	}
.narrow2 .covertitle		{	display:				block;	}

.portrait .v-spine,
.landscape .h-spine,
.portrait .h-cover-pane,
.landscape .v-cover-pane	{	display:				none;	}

/****************************************************************************/

.wtveil,
.inveil						{	position:				fixed;
								top:					0px;
								left:					0px;
								bottom:					0px;
								right:					0px;
								z-index:				-1;
								/* SiP: opacity breaks blur, use rgba */
								background-color:		rgba(0,0,0,0.3333);
								backdrop-filter:		blur(8px);
								display:				flex;
								flex-flow:				column nowrap;
								justify-content:		center;
								align-items:			center;
							}
.wtveil						{	background-color:		rgba(128,128,128,0);
							}
.waiter,
.insert						{	position:				fixed;
								top:					0px;
								left:					0px;
								bottom:					0px;
								right:					0px;
								display:				flex;
								flex-flow:				column nowrap;
								align-items:			center;
							}
.insert						{	z-index:				110;
								top:					10%;
								left:					5%;
								height:					80%;
								width:					90%;
								justify-content:		flex-start;
								gap:					var(--norge-padding);
							}
.waiter						{	z-index:				10;
								justify-content:		center;
							}
.insert-title				{	width:					100%;
								flex-shrink:			1;
								background-color:		var(--norge-color-back-extra);
								border-radius:			var(--norge-border-radius);
								padding:				var(--norge-padding);
								display:				flex;
								flex-flow:				row nowrap;
								justify-content:		space-between;
								align-items:			center;
							}
.insert-panel				{	width:					100%;
								flex-grow:				1;
								border-radius:			var(--norge-border-radius);
								display:				flex;
								flex-flow:				column nowrap;
								justify-content:		flex-start;
								align-items:			center;
							}
iframe.in-pane				{	position:				static;
								display:				flex;
								width:					100%;
								height:					100%;
								border:					0;
							}
iframe#xframe				{	border-radius:			var(--norge-border-radius);
							}
#pawait						{	z-index:				200;	}

/****************************************************************************/

.left						{	/* flag indicating leftward bias */ }
.right						{	/* flag indicating rightward bias */ }
.center						{	/* flag indicating centered bias */ }

.vspi-obj					{	width:					2.5rem;
								height:					auto;
							}
.hspi-obj					{	width:					auto;
								height:					2.5rem;
							}
.tit-bar					{	width:					100%;
								display:				flex;
								flex-flow:				row nowrap;
								justify-content:		space-between;
								align-items:			center;
								gap:					var(--norge-padding);
							}
.chapter					{	font-size:				1.6rem;
								font-weight:			bold;
								font-variant-caps:		small-caps;
							}
.section					{	font-size:				1.4rem;
								font-weight:			bold;
							}
.h-launch					{	display:				flex;
								flex-flow:				row nowrap;
								justify-content:		flex-end;
								align-items:			center;
								gap:					var(--norge-padding);
							}
.v-launch					{	display:				flex;
								flex-flow:				column nowrap;
								justify-content:		flex-start;
								align-items:			center;
								gap:					var(--norge-padding);
							}
.ill-launch,
.launch						{	display:				flex;
								flex-flow:				column nowrap;
								justify-content:		center;
								align-items:			center;
								cursor:					pointer;
								border:					var(--norge-line-size)
														solid
														var(--norge-color-break);
								border-radius:			var(--norge-button-radius);
								transition:				all 0.25s ease-in-out;
							}
a:focus > .launch,
a:hover > .launch			{	border-color:			var(--norge-color-link-hov);
							}
a:active > .launch			{	border-color:			var(--norge-color-link-act);
							}

.ill-launch					{	position:				absolute;
								z-index:				2;
								top:					var(--norge-padding);
								opacity:				0%;
								transition:				all 0.25s ease-in-out;
							}
.ill-launch:focus			{	border-color:			var(--norge-color-link-hov);
								background-color:		rgba(255,255,255,0.5);
								opacity:				100%;
							}
.ill .ill-launch			{	left:					var(--norge-padding);	}
.ill.right .ill-launch		{	right:					var(--norge-padding);
								left:					auto;
							}
.ill.left .ill-launch,
.ill.right .ill-launch		{	top:					calc(2*var(--norge-padding));	}
.ill:hover .ill-launch		{	border-color:			var(--norge-color-link-hov);
								background-color:		rgba(255,255,255,0.5);
								opacity:				100%;
							}

.launchicon					{	width:					1.5rem;
								height:					auto;
								margin:					0.25rem;
							}
.linkicon					{	width:					1.0rem;
								height:					auto;
							}

.ill						{	position:				relative;
								text-align:				center;
								display:				flex;
								flex-flow:				column nowrap;
								justify-content:		flex-start;
								align-items:			center;
							}
.ill.right					{	text-align:				right;
								float:					right;
								padding:				var(--norge-padding);
								padding-right:			0px;
							}
.ill.left					{	text-align:				left;
								float:					left;
								padding:				var(--norge-padding);
								padding-left:			0px;
							}
.ill-cap					{	font-style:				italic;
								font-size:				var(--norge-font-size-cap);
								width:					0px;
								min-width:				100%;
							}
img.rim,
.ill > img					{	border:					1px solid var(--norge-color-gal-rim);
								border-radius:			var(--norge-thumb-radius);
							}
.ill > img.norim			{	border:					0;	}
.natur-block				{	display:				flex;
								flex-flow:				column nowrap;
								justify-content:		flex-start;
								align-items:			center;
								gap:					var(--norge-padding);
							}
.natur-row					{	display:				flex;
								flex-flow:				row wrap;
								justify-content:		center;
								align-items:			center;
								gap:					var(--norge-padding);
							}
.person						{	display:				flex;
								flex-flow:				row nowrap;
								justify-content:		flex-end;
								align-items:			flex-start;
								gap:					var(--norge-padding);
							}
.annal						{	flex-grow:				1;
								text-align:				left;
							}
.faces						{	flex-grow:				2;
								display:				flex;
								flex-flow:				row wrap;
								justify-content:		flex-end;
								align-items:			flex-start;
								gap:					var(--norge-padding);
							}
.face						{	border:					1px solid var(--norge-color-gal-rim);
								border-radius:			var(--norge-thumb-radius);
							}
dl							{	margin:					0;
								padding-top:			calc(0.5 * var(--norge-padding));
								padding-bottom:			calc(0.5 * var(--norge-padding));
							}
dl:nth-child(even)			{	background-color:		rgba(100%,100%,100%,0.6);
							}
dt							{	font-weight:			bold;
							}
.threemonths				{	width:					100%;
								display:				flex;
								flex-flow:				row nowrap;
								justify-content:		center;
								align-items:			center;
							}
.calenmon					{	border:					var(--norge-line-size)
														solid
														var(--norge-color-break);
								border-collapse:		collapse;
							}
.calenmon td				{	border:					var(--norge-line-size)
														solid
														var(--norge-color-break);
								text-align:				center;
								padding:				0.25rem;
							}
.calenmon tr:first-child td	{	font-weight:			bold;	}

p > sub,
p > sup						{	font-size:				0.6em;					}
.intexttop					{	vertical-align:			text-top;				}
.intextbottom				{	vertical-align:			text-bottom;			}
.blinker					{	animation:				blinker 1s linear infinite;
								color:					yellow;
							}
.spinner					{	animation:				rotating 5s linear infinite;
							}

@keyframes blinker			{	50% { opacity: 0; } }
@keyframes rotating			{ 	0% 		{ transform:	rotate(0deg); }
								100%	{ transform:	rotate(360deg); }
							}

/****************************************************************************/

.small .hspi-obj			{	height:					1.6rem;	}
.small .vspi-obj			{	width:					1.6rem;	}
.small .launchicon			{	width:					1.0rem;
								margin:					0.15rem;
							}
.short1 .too-high-1,
.short2 .too-high-2,
.narrow1 .too-wide-1,
.narrow2 .too-wide-2		{	display:				none;	}

/****************************************************************************/

.gallery					{	display:				flex;
								flex-flow:				row wrap;
								justify-content:		center;
								align-items:			center;
								gap:					var(--norge-padding);
							}
.nailthumb,
.thumbnail					{	border:					1px solid var(--norge-color-gal-rim);
								border-radius:			var(--norge-thumb-radius);
								height:					auto;
								width:					auto;
								cursor:					pointer;
							}
.nailthumb					{	width:					9rem;	}
.thumbnail					{	height:					9rem;	}

.hidden						{	display:				none;	}
.secret						{	z-index:				-1;
								opacity:				0%;
							}

.waitwheel					{	width:					14vmax;
								height:					auto;
								filter:					saturate(50%);
								opacity:				33%;
							}
.progmask					{	mask-image:				radial-gradient(circle,
																		transparent calc(71% - var(--norge-padding)),
																		black calc(71% - var(--norge-padding)),
																		black 100%);
								border-radius:			50%;
							}
.progrim					{	padding:				calc(2 * var(--norge-padding));
								border-radius:			50%;
								opacity:				33%;
								background-image:		conic-gradient(from 0deg at center,
																	   var(--norge-color-back-photo) 0deg,
																	   var(--norge-color-back-photo) var(--norge-wait-progress),
																	   transparent var(--norge-wait-progress), transparent 360deg);
							}
#gawait						{	position:				absolute;	}
#gawait > .waitwheel		{	position:				absolute;
								z-index:				10;
							}

/****************************************************************************/

.break						{
								display:				flex;
								flex-flow:				row nowrap;
								width:					100%;
								height:					var(--norge-line-size);
								border-radius:			var(--norge-line-radius);
								background-color:		var(--norge-color-break);
								margin-top:				var(--norge-padding);
								margin-bottom:			var(--norge-padding);
							}
.clear						{	clear:					both;	}
.clear-left					{	clear:					left;	}
.clear-right				{	clear:					right;	}

.cent						{
								display:				block;
								width:					100%;
								text-align:				center;
							}
.signed						{
								display:				block;
								width:					100%;
								text-align:				right;
							}

/****************************************************************************/
