/* rogerarrick.css - Used for all pages.
	See readme.txt for site design details.
	Updated: 12/5/2023, Roger Arrick.
*/

/* Defaults */
* {font-size: 1em; vertical-align:baseline; font-weight:inherit; font-family:Arial,sans-serif; font-style:inherit; font-size:100%; text-decoration:none; border:0 none; outline:0; padding:0; margin:0;} 
body,p,td,ul,li,dl,dt,dd,em	{font-size:16px; color:#554141;}
body {margin: 5px 0px 10px 0px; background-color:#000000; background-image:url('/background0.png'); background-repeat:no-repeat; background-size:100%;}

p {margin-bottom:1rem;}

em {font-style:italic;}
strong {font-weight:bold;}
pre {font-family:monospace;}
hr  {width:100%; height:3px; margin:0 auto .5rem auto; background-color:#2F6162; shade:no-shade; border:0px;}
img {display:block; margin:0 auto 1rem auto;}		/* Images are centered as blocks on a page */

/* Headings. H1 for main index page title and all menu page titles, H2 for project page titles, H3 for sections, H4 subsections, H5 subsubsection. */
H1	{text-align:center; font-size:2rem; color:#4F6258; font-weight:Bold; letter-spacing:-1px; margin-bottom:1rem;}
H2	{font-size:1.75rem; color:#101010; font-weight:bold; letter-spacing:-1px; margin-bottom:.5rem;}
H3	{font-size:1.5rem; color:#A94F22; font-weight:bold; margin-bottom:.3rem; margin-top:1.5rem;}
H4	{font-size:1.1rem; color:#4F6258; font-weight:bold; margin-bottom:.2rem;}
H5  {font-size:1.1rem; width:540px; background-color:#285354; color:#F3E889; margin-bottom:.3rem;}

/* Heading like H2 with reverse grey block across */
.heading-bar {color:white; background-color:#808080; padding-left:20px; font-size:2rem; font-weight:normal; letter-spacing:-1px; margin-bottom:10px;}

/* Links */
a        	{color:#554141; text-decoration:underline;}
a:link   	{color:#554141; text-decoration:underline;}
a:visited {color:#554141; text-decoration:underline;}
a:hover  	{color:#554141; text-decoration:underline; background-color:#f0f0f0;}

/* Lists */
ul {margin-bottom:1rem; margin-left:1rem; list-style-image:url('/bulletsquare.png');} 

/* List of links */
.link-list {list-style-image:url('/externallink.png');}

/* List of return links */
.return-links {list-style-image:url('/bulletbackarrow.png');}

/* List of related pages */
.related-pages {list-style-image:url('/bulletsquare.png');}

/* Alternative to <center> */
.centered {display:flex; text-align:center; margin:auto; justify-content:center;}	

/* Code snippets */
.code {display:block; text-align:left; width:75%; justify-content:left; padding:0 1rem 0 1rem; margin:0px auto 1rem auto; border:0px; white-space:pre; overflow:auto; color:#808080; font-family:monospace; background-color:#f0f0f0; max-height:10rem;}	

/* Command snippets */
.command {display:block; text-align:left; width:97%; justify-content:left; padding:10px 10px 10px 10px; margin:0 0 1rem 0; border:0; white-space:pre; overflow:auto; color:#808080; font-family:monospace; background-color:#f0f0f0; max-height:15rem;}	

/* Comments */
.comment p {font-style:italic;}
.comment span {font-weight:bold;font-style:normal;}

/* Note */
.note {display:block; font-weight:bold;}

/* Dropcap */
.first-character {float:left; font-family:Old English, Georgia,serif; font-weight:bold; font-size:2.6rem; line-height:2rem; margin-right:0.3rem;}

/* Box to hold text and/or images, centered on page, centered text */
.inset			{display:block; text-align:center; justify-content:center; margin:0px auto 20px auto;}  
.inset img  {border:1px solid #757459;max-width:50%;margin-bottom:0px;}

/* Box to hold text and/or images, centered on page, with background and border, left justified text. */
.inset-box {display:block; text-align:left; width:50%; justify-content:left; padding:1rem; margin:1rem auto 1rem auto; background-color:#e0e0e0; border:2px solid #757459;}	
.inset-box img {max-width:50%;}

/* Page Head */
.page-head-box    {}
.page-head-title  {text-align:center;}
.page-head-date		{text-align:center; font-size:smaller; font-style:italic;}
.page-head-date::before {content:"Last updated ";}
.page-head-image   {width:50%; border:1px solid #757459;}
.page-head-caption {display:block; text-align:center; font-size:smaller; margin:-1rem auto 1rem auto;}
.page-head-summary {display:block; text-align:left; width:60%; justify-content:left; padding:1rem 1rem 0 1rem; margin:0 auto 1rem auto; background-color:#e0e0e0; border:2px solid #757459;}	

/* Menu Items */
.menu-item-box    {position:relative; margin:auto; width:600px; height:115px; cursor:pointer; padding:0;}
.menu-item-box:hover {color:#554141; background-color:#f0f0f0;}
.menu-item-status {position:absolute; left:0px; top:17px;}
.menu-item-image  {position:absolute; left:25px; top:12px; width:120px; height:90px; box-shadow: 3px 3px 6px 0px gray;}
.menu-item-title  {position:absolute; left:160px; top:8px; font-size:1.3rem; color:#A94F22; font-weight:Bold; letter-spacing:-1px; font-family:Arial,sans-serif; }
.menu-item-text   {position:absolute; left:160px; top:32px;}
.menu-item-peeker {visibility:hidden; position:absolute; z-index:1; right:-25px; height:110px;}

/* Gallery */
.gallery {display:block; margin:0 auto 1em auto; padding:0; text-align:center; justify-content:center;}
.gallery img {display:inline-block; width:133px; height:100px; text-align:center; padding:1px; margin:1px; }
.gallery a {text-decoration:none;} // removes underline
.gallery-caption {display:block; text-align:center; font-size:smaller; margin:-.2rem auto .8rem auto;}
.gallery::after  {display:block; text-align:center; font-size:smaller; content:"Click on images for larger view"; margin:-.2rem auto .8rem auto;}

.gallery-big {display:block; margin:0 auto 1em auto; padding:0; text-align:center; justify-content:center;}
.gallery-big img {display:inline-block; width:273px; text-align:center; padding:1px; margin:1px; }
.gallery-big a {text-decoration:none;} // removes underline
.gallery-big-caption {display:block; text-align:center; font-size:smaller; margin:-.2rem auto .8rem auto;}
.gallery-big::after  {display:block; text-align:center; font-size:smaller; content:"Click on images for larger view"; margin:-.2rem auto .8rem auto;}

/* Image popup window, see rogerarrick.js */
#Image_Popup {position:absolute; display:none; padding:0 10px 10px 10px; cursor:pointer; text-align:center; z-index:11; background-color:#ffffff; box-shadow: 2px 2px 20px 1px #000000; overflow:auto;}
#Image_Popup span {display:block;	font-size:1rem;	margin:0 -10px 10px -10px; padding:2px 14px 2px 2px; color:#e0e0e0; text-align:right; background-color:maroon;}  /* Top bar with close X */
#Image_Popup img {max-width:994px; margin:0 auto; padding:0; border:0;}