/* MMW's css*/
body{font-family: Helvetica,Arial,sans-serif;}

p {font-size: 16px;}

H1 {font-size: 19px;}

H2 {font-size: 17px; font-style: italic;}

ul {font-size: 16px;}

html, body {
    margin: 0;
    padding: 0;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 10px;
  top: 10px;
  width: auto;
  height: auto;
  background: #003366;
  color: #fff;
  padding: 8px 12px;
  z-index: 10000;
}

.sidebar {
	margin: 0;
	padding: 0;
	width: 177px;
	background-color: #f1f1f1;
	position: fixed;
	height: 100%;
	overflow: auto;
}
  
.sidebar a {
	display: block;
	color: black;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 12px;
	padding-bottom: 12px;
	text-decoration: none;
}

/* Brand link in sidebar */
.sidebar .brand {
	background-color:#003366;
	color: #fff;
	font-weight: 700;
	display: block;               /* keep block layout like links */
	padding-left: 3px;            /* match sidebar link padding */
	padding-right: 3px;
	padding-top: 12px;
	padding-bottom: 12px;
    pointer-events: none;        /* not clickable */
    cursor: default;             /* no hand cursor */
}
   
.sidebar a.active {
	background-color: #666666;
	color: white;
}

/* Support aria-current="page" in addition to .active */
.sidebar a[aria-current="page"] {
  background-color: #666666;
  color: white;
}
  
.sidebar a:hover:not(.active):not(.brand) {
	background-color: #aaaaaa;
	color: white;
}
  
/* Content/link colors (exclude sidebar via specificity) */
a {
  color: #0645ad; /* accessible blue on light bg */
}
a:visited {
  color: #5a3696; /* accessible purple */
}
a:hover,
a:focus {
  color: #0b66d4;
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:active { color: #c25700; }

/* Use generic .content so it applies to main or div */
.content {
	margin-left: 177px;
	padding: 1px 16px;
	line-height: 21px;
}

/* Space list items without <br> */
.content ul li { margin-bottom: 8px; }
  
@media screen and (max-width: 800px) {
	.sidebar {
	  width: 100%;
	  height: auto;
	  position: relative;
	}
	.sidebar a {float: left;}
	.content {margin-left: 0;}
}
  
@media screen and (max-width: 400px) {
	.sidebar a {
	  text-align: center;
	  float: none;
	}
}

/* Responsive image helper */
img.ri { max-width: 100%; height: auto; margin-top: 15px; }

@media screen and (max-width: 800px) {
	img.ri {
	  float: none;
	  display: block;
	  margin-right: 0;
	  margin-bottom: 10px;
	}
}
  
@media screen and (min-width: 800px) {
	img.ri {
	  float: left;
	  margin-right: 20px;
	  margin-bottom: 10px;
	}
}


hr.style1{
	border-top: 2px solid #aaaaaa;
}

hr.style2 {
	border-top: 5px double #aaaaaa;
}

.text-red {
	color: red;
}

/* Optional dark mode */
@media (prefers-color-scheme: dark) {
	html, body { background: #111; color: #eaeaea; }
	.sidebar { background-color: #1e1e1e; }
	.sidebar a { color: #eaeaea; }
	.sidebar a.active,
	.sidebar a[aria-current="page"] { background-color: #3a3a3a; }
	.sidebar a:hover:not(.active):not(.brand) { background-color: #555; color: #fff; }

	/* Links in dark mode */
	a { color: #4da3ff; }
	a:visited { color: #b58cff; }
	a:hover,
	a:focus { color: #81c6ff; text-decoration: underline; text-underline-offset: 2px; }
	a:active { color: #ffb14d; }
	hr.style1 { border-top-color: #444; }
	hr.style2 { border-top-color: #444; }
}