/*
	PECKY PUBLISHING IN STYLE!
	06-Aug-2020, last updated: 26-Oct-2024
*/

html {
	overflow-y:scroll; }

body {
	text-align:center; font-family:Arial,Helvetica,sans-serif; background-color:#f0f0f0; /* very light grey */
	/* margin:0 */ /* margin-left:18px */ }

p {
	line-height:1.2em; }

.topnav {
	margin-right:18px; background-color:#333; /* very dark grey */ overflow:hidden; font-size:18px; font-family:Arial,Helvetica,sans-serif; }

.topnav a {
	float:left; display:block; text-align:center; padding:14px 16px; text-decoration:none; color:#f0f0f0; /* very light grey */ }

.active {
	background-color:blue; color:white; }

.topnav .icon {
	display:none; }

.dropdown {
	float:left; overflow:hidden; }

.dropdown .dropbtn {
	font-size:inherit; border:none; outline:none; color:white; padding:14px 16px; font-family:inherit; margin:0; background-color:#333; /* inherit */ }

.dropdown-content {
	border:1px dotted darkgray; display:none; position:absolute; background-color:#f9f9f9; min-width:160px; 
	box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1; }

.dropdown-content a {
	float:none; color:black; padding:12px 16px; text-decoration:none; display:block; text-align:left; }

.topnav a:hover, .dropdown:hover .dropbtn {
	color:white; background-color:#555; /* slightly lighter than darkgrey */}

.dropdown-content a:hover {
	color:black; background-color:lightgrey; /* was #ddd grey */ }

.dropdown:hover .dropdown-content { 
	display:block; }

@media screen and (max-width:600px) {
	.topnav a:not(:first-child), .dropdown .dropbtn { display:none; }
	.topnav a.icon { float:right; display:block; }
}

@media screen and (max-width:600px) {
	.topnav.responsive { position:relative; }
	.topnav.responsive a.icon { position:absolute; right:0; top:0; }
	.topnav.responsive a { float:none; display:block; text-align:left; }
	.topnav.responsive .dropdown { float:none;}
	.topnav.responsive .dropdown-content { position:relative; }
	.topnav.responsive .dropdown .dropbtn { display:block; width:100%; text-align:left; }
}

#header {
	text-align:center; font-family:times,serif; position:fixed; top:0; width:100%; background-color:#f0f0f0; /* Grey */ 
	transition:0.2s; /* Add a transition effect (when scrolling - and font size is decreased) */ 
}

#footer {
	font-size:0.8em; font-style:italic; text-align:center; color:darkblue; padding:10px 10px; margin-bottom:20px; background:lightgrey; /* font-weight:bold */ }

#myTitle { 
	font:bold italic 48px times,serif; color:darkgreen; letter-spacing:0.2em; padding-bottom:4px; font-variant:small-caps; /* text-transform:uppercase */ }

#myCopy {
	background:lightyellow; padding:20px; padding-top:40px; text-align:center; margin-top:90px; /* allow for header + titles + etc */ }

.lastUpdated {
	padding-top:1em; color:gray; font:0.7em arial,sans; text-align:left }

.alertbox { 
	padding:20px; background-color:#f03030; color:white; margin:20px auto 20px auto; width:75%; text-align:left; }

.closebtn { 
	margin-left:15px; color:white; font-weight:bold; float:right; font-size:22px; line-height:20px; cursor:pointer; transition:0.3s; }

.glow { 
	animation:myglow 2s infinite; font-size:2em; color:darkred; }
@keyframes myglow { 
	50% { color:red; } }

/* EOF */