/*RDreher, Myrran.com*/
/*Update 2022 Apr 30*/

body	{background-color:black;
		margin:0px;
		max-width:100vw;
		overflow-x:hidden}

*	{box-sizing:border-box}
		
hr {margin:0px;
	height:5px;
	background-color:silver;
	border:2px outset lightgray}

a	{color:black;
	text-decoration:none}
	
button, .cycle, .enlarge
	{cursor:pointer;
	outline:none}

.hidden, rt {display:none}

@font-face	{font-family:HGPGyoshotai;
			src:local("HGPGyoshotai"),
				url("assets/fonts/hgpgyoshotai.woff2") format("woff2"),
				url("assets/fonts/hgpgyoshotai.woff") format("woff");
			unicode-range:U+3000-30ff, U+4e00-9fff, U+ff00–ffef;
			font-display:swap;}

:root	{--myrranblue:rgb(0,0,42);
		--silverglass:rgba(192,192,192,.5);
		--myrrangold:rgb(255,255,170);
		--myrranEarth:rgb(20,10,15)}
			
/*Header*/
#head	{width:100%;
		position:relative;
		display:flex;
		flex-wrap:wrap;
		padding:0;
		background:var(--myrranblue);
		z-index:1}
#head .menu	{height:100px;
			display:flex;
			align-items:center;
			justify-content:center;
			color:silver}
#head header	{width:400px;
				line-height:25px;
				font-family:Times New Roman;
				font-style:italic;
				font-size:28px}
#head div.menu	{width:100px;
				line-height: 65px;
				font-weight:bold}
#head .menu:hover	{background:dimgray;
					color:white}
#head hr	{width:100%;
			position:absolute;
			bottom:-5px}
#background	{width:100%;
			height:605px;
			margin-top:-105px;
			margin-bottom:-350px;
			position:relative;
			background:transparent}
.hidebar	{width:100%;
			height:20px;
			position:absolute;
			left:0;
			background:transparent;
			border:none}
#head .hidebar	{bottom:-25px}
#background .hidebar	{bottom:350px}
.hidebar:hover {background:var(--silverglass)}/*All hidebars*/
	
/*Sidebar*/
#side	{width:300px;
		min-height:max-content;
		z-index:2;
		margin-top:-55px;
		position:absolute;
		background:black;
		float:left}
#side .menu, #side header
	{width:100%;
	height:50px;
	background:var(--myrranblue);
	border:1px solid transparent;
	text-align:center;
	line-height:15px;
	color:silver}
#side .menu:hover	{background:dimgray;
					color:white}
#side header	{font-style:italic}
#side div	{position:relative} /*.menu elements also effected*/
#side div button	{width:50px;
					height:50px;
					position:absolute;
					top:0;
					left:0;
					background:none;
					border:none;
					color:darkcyan;
					font-family:Arial;
					font-weight:bold;
					font-size:28px}
#side div button:hover	{color:cyan;
						background:dimgray}
#side ul	{margin:0;
			list-style:none}
#side li	{height:25px;
			background:darkcyan;
			border:3px inset silver;
			font-style:italic}
#side li:before	{content:"✦";
				padding:1em;
				font-size:12px;
				font-style:normal}
#side li:hover	{background:dimgray;
				border:3px outset dimgray;
				color:white}
#side > button{width:20px;
			height:100%;
			position:absolute;
			right:0px;
			top:0px;
			z-index:1;
			background:none;
			border:none}
#side > button:hover	{background:var(--silverglass)}

/*Main Content*/

	/*Main Fromatting*/
	main	{max-width:100%;
			background:url("assets/myrranSea.png");
			position:relative;
			padding:30px;
			padding-bottom:1px;
			font-family:Times New Roman;
			font-size:18px;
			font-style:italic}
	main a:hover, p.preview, main .hidebar:hover, ruby:hover
		{color:var(--myrrangold);text-shadow: 1px 1px black}
	.ifside	{margin-left:300px}
	article, main header, main footer
		{max-width:1500px;
		margin:auto;
		margin-bottom:30px;
		border-radius:5px;
		position:relative;
		background:silver;
		padding:40px}
	.semifoot	{height:50px;background:black}
	main .hidebar	{top:0;
					height:100%;
					font-family:Times New Roman;
					font-size:20px}
	
	/*preview Article Formatting*/
	p.preview	{height:0;
				z-index:1;
				display:none;
				position:sticky;
				top:10%;
				margin:0;
				padding-right:10%;
				font-size:100px;
				text-align:right;}
		/**Further Formatting related to preview Articles with Long Article Fromatting**/
		
	/*Long Article Formatting*/
	.long	{padding:0px;
			background:transparent}
	.long header	{display:flex;
					flex-wrap:wrap}
	.long header menu	{min-width:50%;
						height:1em;
						margin:auto;
						position:relative;
						left:20px;
						padding:0;
						text-align:center}
	.long header menu div	{text-align:left}
	.long header menu a:not(:first-child)	{margin-left:1em}
	.long article:not(:first-of-type)	{display:none}
	.long article button,
	a.preview button	{width:40px;
						height:100%;
						display:block;
						position:absolute;
						top:0px;
						background:transparent;
						border:none}
	.long article button:hover, .preview button:hover /**preview**/
		{background:rgba(105,105,105,.5)}
	.long article .prev {left:0px;
						border-top-left-radius:5px;
						border-bottom-left-radius:5px}
	.long article .next, .preview button /**preview**/
		{right:0px;
		border-top-right-radius:5px;
		border-bottom-right-radius:5px}
	
	/*Main Footer Formatting*/
	main footer	{text-align:center}
	main footer button	{width:50px;
						height:30px;
						background:var(--myrranblue);
						color:silver}
	footer .prev	{border-top-left-radius:30px 15px;
					border-bottom-left-radius:30px 15px;
					text-align:right}
	footer .next	{border-top-right-radius:30px 15px;
					border-bottom-right-radius:30px 15px;
					text-align:left}
	footer button:hover 	{background:dimgray;
							color:white}
	#all, #top	{margin-left:5px;
				margin-right:5px}
				
	/*General Article Formatting*/
	.flex	{display:flex;flex-wrap:wrap}/*Used for items of fixed width, eg Haiku*/
	ul.flex	{padding:0;
			align-items: baseline}
	ul.flex li {display:inline-block;
				margin-left:1em;
				list-style:none}
	.shortList	{margin-top:-.5em;margin-bottom:-.5em}/*Makes list take one line/li; good for compacting short lists*/
	  /*Column Formatting*/
	.column2	{display:grid;
				grid-column-gap:40px;
				grid-row-gap:20px;
				grid-template-columns:max-content auto}
	.halves	{grid-template-columns:repeat(2, 1fr)}
	.thirds {grid-template-columns:repeat(3, 1fr)}
	.thirdsPillars	{grid-template-columns:1fr 4fr 1fr}
	aside	{position:relative;
			text-align:center}
	.ma	{display:flex;
		align-items:center;
		justify-content:center;
		flex-direction:column;
		position:relative}
	.ma .sign	{position:absolute;bottom:0;right:0}
	.ma ul	{padding-left:1em}

	/*Text Formmating*/
	.comma	{margin-left:-.2em}
	.subtitle	{margin-top:-1em}
	.poem	{display:inline-block;
			width:max-content;
			padding-left:50px;
			vertical-align:top;
			text-align:left}
	.haiku	{margin:auto;
			margin-top:0;
			margin-bottom:0;
			height:max-content;
			text-align:left;
			writing-mode:vertical-rl;
			font-family:HGPGyoshotai;
			font-size:28px;
			font-style:normal;
			line-height:2}
	p.sign	{text-align:right;
			line-height:3}
	.info	{width:100%; /*For dates and other info at bottom of article or picture etc*/
			text-align:center;
			font-size:12px}
	article > .info {margin-bottom:-1.5em} /*For dates etc at the bottom of an article only*/
	.box	{padding:15px;
			border:1px solid black}
	.quote  {margin-left:.7em;
			text-indent:-.7em;
			line-height:1em;}
	.quotes	{font-style:normal;
			font-size:1.2em}
			
		/*List Box Settings (for event details)*/
	.listBox 	{padding:15px;
				border:1px solid transparent}
	.listBox:hover {border:1px solid black;
					background:lightgray}
	.listBox > ul,  .compList
		{margin:0;padding:0;padding-left:.5em;
		list-style-position:inside;}
	.listBox.setOn	{border:1px solid black;
					background:lightgray}
					
		/*Links & Info List Setting*/
	.box h4	{margin:.5em; margin-left:0}
	.linkList 	{list-style-type:none;margin:0;padding-left:1em}
	.address	{display:inline-block;vertical-align:top}
	span.icon	{font-style:normal;font-size:.9em}
	

	/*Image Formatting*/
	main img	{max-width:100%;
				border:1px solid white}
	.portrait	{max-height:360px;
				border:10px outset lightgray;
				border-radius:50%}
	.plaque	{width:max-content;
			margin:auto;
			padding-right:50px;
			padding-left:50px;
			border:4px outset lightgray;
			border-top-right-radius:70% 50%;
			border-top-left-radius:70% 50%;
			border-bottom-right-radius:70% 50%;
			border-bottom-left-radius:70% 50%;
			background:var(--myrranblue);
			color:silver}
	.cycle	{width:max-content;
			margin:auto}
	.enlarge.setOn 	{height:100vh;width:100vw;
					position:fixed;top:0;left:0;
					z-index:1;
					background:black}
	.enlarge.setOn img	{height:100vh;max-width:100vw;display:block;margin:auto}
	.icon	{display:inline-block;
			height:1em;
			margin-bottom:-.2em;
			border:none}
	.smallpic, .smallpic img	{height:100%}
	
	/*Embedded Posts Formatting*/
	.youtube 	{height:100%;width:100%;
				position:absolute;top:0;left:0}
	.fb-post	{background:white;
				overflow-x:auto;
				max-width:100% !Important}
	.fb {overflow-x:auto}

/*Footer*/
body > footer
	{height:300px;
	background:black;
	padding-top:100px;
	text-align:center;
	color:silver}

/*Poetry Indents*/
.u	{display:inline-block}
.uh	{margin-left:1em}
.u1	{margin-left:2em}
.u1h{margin-left:3em}
.u2	{margin-left:4em}
.u2h{margin-left:5em}
.u3	{margin-left:6em}
.u3h{margin-left:7em}
.u4	{margin-left:8em}
.u4h{margin-left:9em}
.u5	{margin-left:10em}
.u5h{margin-left:11em}
.u6	{margin-left:12em}

.v1	{margin-top:1em}
.v2	{margin-top:2em}
.v3	{margin-top:3em}
.v4	{margin-top:4em}

/*Responsive Changes for Small Screen*/
@media (max-width:800px) {
	#head .menu	{height:50px}
	.column2	{display:block;grid-column-gap:0} 
	.ma .sign	{position:relative}
}