/* 
mainstyle css Copyright © 2006-2026 by James Macak. All Rights Reserved.
 */

:root {
  font-size: 62.5%; /* this needs to be in root */
}

body {
	color: #000000;
/* new trial change for YMD site */
	background-color: #fffcf6;

	font-size: 1.6rem; /* this is the default text size of the whole body */
/* add a transition for the fun of it when changing color and background-color */
/* remove the transition as it is annoying when using a background color for the site’s pages */
/* 
transition: color 1s ease-in-out;
transition: background-color 1s ease-in-out;
 */
	}

/* Text and background color for dark mode */
@media (prefers-color-scheme: dark) {
  body {
    color: #ddd;
    /* try a whiter gray for text color  by using #eee, #e6e6e6, #efefef, etc.*/
    color: #eee;
    background-color: #222;
    /* for a lighter gray for background of whole page use #333, #444, #555, etc.*/
    background-color: #222;
    }
/* add colors for links to override built-in defaults */
  a:link {color: PowderBlue;}
  a:visited {color: #f5d6f4;}
/* next line closes the @media query */
}

div.wrapper {
	width: 100%;
/* 
	the next line matches the original max-width of 46em because 74 ~ 46em * 1/.625 ~ 74 * 1.6
 */
 	max-width: 74rem;
	margin: auto;
/*comment out next line because:
	it is not needed as color is set in body css
	testing for dark mode support uses body css for color and this overrides it
	*/	
/*	color: #000000; */
	padding-left: 1%;
	padding-right: 1%;
/*
	add some padding to bottom also
	consider adding some to top also, but may need to adjust header (and footer) margin/padding
 */
	padding-bottom: 1%;
	font-family: "Verdana", "Arial", "Lucida Grande", "Helvetica", sans-serif;
/* 
	line-height: 1.25;
 */
/* try greater line-height */
	line-height: 1.5;
	}
	
/* to match original font sizes, multiply original em sizes by 1.6 (which is the inverse of 0.625) and use rem units */
/* new css follows to change the heading tags */

 	h1, h2, h3, h4, h5 {color: #1f1870; background-color: transparent;}
  	h1 {font-size: 2.4rem; text-align: center;} /* 2.8 = 1.75 * 1.6 = 1.75 * 1/.625 */
  
  	h2 {font-size: 2.2rem;}
  	h3 {font-size: 2.0rem;}
  	h4 {font-size: 1.8rem;}
  	h5 {font-size: 1.6rem;}

/*
next line adds support for different text colors when in dark-mode
*/
@media (prefers-color-scheme: dark) {
  	h1, h2, h3, h4, h5 {color: #ffd280;;}
  	/* h2 {color: #ffd280;} */
/* next line closes the @media query */
}
  	
	img {max-width: 80%; height: auto; border-style: none;}
	
/* conversion of em to rem w/ factor of 1.6 results in stacked images on SE size display
	reducing from 3.2rem to 3.0rem obviates that and still looks OK on other display sizes
		img.margin {margin-right: 2em; margin-left: 2em;} /* used on home page for validator images */
		img.margin {margin-right: 3.0rem; margin-left: 3.0rem;} /* used on home page for validator images */
		
 /* next addition used on memb. info only */
		img.float-left-margin-small {float: left; margin-right: 1.6rem; margin-left: 0rem;}
 /* used on YMD software page only */
		img.right {float: right; margin-left: .5em; position: relative;}
		
 /* ***** new css for adding a caption to an image and tying both together (added 04-2021) ***** */
 		figure.right {float: right; margin-left: .5em; position: relative; display: block;}
 		figcaption {text-align: center; font-size: 1.2rem;}
		
/* new “medium” size image auto-resize follows; used only on meetings page for main meeeting img(s) */
		img.med-resize {max-width: 20%;}
		

	header {
		text-align: center;
		margin-top: 2rem;
		}
	
	footer.club-info {text-align: center; margin-top: 0rem; margin-bottom: 1rem;}
	
/* newly commented out: needs testing */
/* 
	menu {-webkit-padding-end: 40px;}
 */

/* 
the following was moved “up” in the cascade in order to not override (old) topnav menu styling
it looks like this css (without class or id) is only used on membership info page
 */
/* 
	ul {text-align: left; font-size: 1.4rem; padding-right: 3.2rem; list-style-type: round;}
 */
	ul {text-align: left; font-size: 1.4rem; padding-right: 3.2rem; list-style-type: disc;}
/* new css follows for ol added 05/03/2019 */
	ol {text-align: left; font-size: 1.4rem; padding-right: 3.2rem;}

/*
new css for tables (added May 2019)
*/

table {
	font-size: 1.4rem;
}

/*
new css to add color for tr and span with class=“tracker-x”(added Feb. 2023)
*/

.tracker-f {background-color: red;}
.tracker-f {background-color: #ff3333} /* make the red a bit lighter  (added Feb. 2023) */
.tracker-e {background-color: pink;}
.tracker-d {background-color: yellow;}
.tracker-c {background-color: lemonchiffon;}
.tracker-b {background-color: lightgreen;}
/*
.tracker-a {background-color: forestgreen;}
*/
.tracker-a {background-color: mediumseagreen;}

th {
	padding: .75rem;
	text-align: center;
}

td {
	padding: .75rem;
	text-align: center;
}

/*
new css to embolden only the first td of a tr if in table of class tracker (added Feb. 2023)
*/

.tracker td:first-child {
	font-weight: bold;
}

/*
new css to embolden only the first td of a tr if in table of class reviews (added Feb. 2023)
*/

.reviews td:first-child {
	font-weight: bold;
}

/*
new css to make the position of the table headers sticky if in table of class tracker (added Feb. 2023)
*/

.tracker th {
	position: sticky;
	top: 0px;
	background: #d4ecfb;
}

/*
new css to make the position of the table headers sticky if in table of class reviews (added Feb. 2023)
*/

.reviews th {
	position: sticky;
	top: 0px;
	background: #d4ecfb;
}

/*
new css to make zebra-striped table for the <table class=”reviews”> (added Feb. 2023)
*/

.reviews tr:nth-child(even) {
	background-color: #e8f5fd;
}

.reviews tr:nth-child(odd) {
	background-color: #b9e0f8;
}

span.bargraph-bad {
	display:inline-block;
	height: 1.4rem;
	background-color: red;
	border-top: 1px solid black;
	border-right: 0px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
}

span.bargraph-caution {
	display:inline-block;
	height: 1.4rem;
	background-color: yellow; 
	border: 1px solid black;
}

span.bargraph-good {
	display:inline-block;
	height: 1.4rem;
	background-color: green; 
	border-top: 1px solid black;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 0px solid black;
}

/*
add new css for width of the bargraph; added 12-05-2019
*/
span.barwidth-0 {width: 0rem}
span.barwidth-1 {width: 1rem}
span.barwidth-2 {width: 2rem}
span.barwidth-3 {width: 3rem}
span.barwidth-4 {width: 4rem}
span.barwidth-5 {width: 5rem}
span.barwidth-6 {width: 6rem}
span.barwidth-7 {width: 7rem}
span.barwidth-8 {width: 8rem}
/*
end of new css for tables (added May 2019)
*/


/*
******************** START OF NEW “Responsive, Pure CSS Off-Canvas Hamburger Menu” STUFF ********************
*/

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* Button styling */
/* this is the styling for the “hamburger” button */
.menu-toggle {
  display: inline-block;
  padding: .75em 15px;
  line-height: 1em;
  font-size: 1em;
/* next line seems to have no effect */
  color: #333;
  /* my tests to move the button */
  position: absolute;
  	top: 1em;
  	left: 0em;
}

.menu-toggle:hover,
.menu-toggle:focus {
/* next line seems to have no effect */
  color: #c00;
}

/*
 Default styles + Mobile first
 Offscreen menu style
*/
.main-menu {
  position: absolute;
/* next line seems to hide the slide-out menu offscreen to the left */
  left: -200px;
  top: 0;
/* next line sets the height of the slide-out menu */
  height: 100%;
  height: 50%; /* I changed it so it does not expand to cover the full height of the screen */
  height: auto; /* changed it again so slide-out menu is only as high (i.e. long) as needed */
	overflow-y: scroll;
	overflow-x: visible;
/* next line sets the animation (slide-in and slide-out) speed of the slide-out menu */
/* 
	transition: left 0.3s ease,
		box-shadow 0.3s ease;
 */
	transition: left 0.5s ease,
		box-shadow 0.5s ease;
	z-index: 999;
}

.main-menu ul {
  list-style: none;
  margin: 0;
  padding: 4rem 0 0; /* my change to rem */
  /* Hide shadow w/ -8px while 'closed' */
/* new removal of next 2 lines (css validation gives warning) */
/* 
  -webkit-box-shadow: -8px 0 8px rgba(0,0,0,.5);
     -moz-box-shadow: -8px 0 8px rgba(0,0,0,.5);
 */
	box-shadow: -8px 0 8px rgba(0,0,0,.5);
  min-height: 100%;
  width: 200px;
/* next line determines the background color of the slide-over menu for small screens */
/*	background: #1a1a1a; */
	background-color: #e9f6fb;
}

.main-menu a {
  display: block;
  padding: .75em 15px;
/* change to rem and fix hovered area being to large vertically */
/* first value refers to height of the colored box when hovered, second value refers to the width */
padding: 1.0rem 1.5rem;

  line-height: 2rem;
/* 
  font-size: 1em;
 */
  font-size: 2rem;

/* next line determines the color of the link text in the slide-over menu for small screens */
  color: black;
  text-decoration: none; /* removes underline from links */
  border-bottom: 1px solid #383838;
}

/* refers to the first line of the menu (which contains the X) */
.main-menu li:first-child a {
  border-top: 1px solid #383838;
}

/* my addition to remove the line under the X */
#main-menu-close {
	border-bottom: none;
}

.main-menu a:hover,
.main-menu a:focus {
/* next line determines the background color of the hovered-over link in the slide-over menu for small screens */
/*  background: #333; */
  background-color: #7ccae9;
  text-decoration: underline; /* adds a text underline when the link is hovered over */
}

/* my additions for a.active follow */
	.main-menu a.active {
		background-color: #a8dcf0;
	 }
	 
	.main-menu a.active:hover {
		text-decoration: none; /* removes underline of the active page */
	}

.main-menu .menu-close {
  position: absolute;
  right: 0;
  top: 0;
}

/*
 On small devices, allow it to toggle...
*/
/*
 :target for non-JavaScript
 aria-expanded="true/false" will be for JavaScript
*/
.main-menu:target,
.main-menu[aria-expanded="true"] {
  left: 0;
  outline: none;
/* new removal of next 2 lines (css validation gives warning) */
/* 
  -moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
  -webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
 */
  box-shadow: 3px 0 12px rgba(0,0,0,.25);
}

.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] .menu-close {
  z-index: 1001;
}

.main-menu:target ul,
.main-menu[aria-expanded="true"] ul {
  position: relative;
  z-index: 1000;
}

/* 
 We could us `.main-menu:target:after`, but
 it wouldn't be clickable.
*/
/* this is the css for the partially opaque right side of the display once the menu slides over */
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop {
  position: absolute;
  display: block;  
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 998;
  background: #000;
  background: rgba(0,0,0,.75);
  cursor: default;
}

@supports (position: fixed) {
  .main-menu,
  .main-menu:target + .backdrop,
  .main-menu[aria-expanded="true"] + .backdrop {
    position: fixed;
  }
}

@media (prefers-color-scheme: dark) {

	.main-menu ul {
		background-color: #333;
	}
	.main-menu a {
/* next line determines the color of the link text in the slide-over menu for small screens */
  		color: #f2f2f2;
	}
	.main-menu a:hover,
	.main-menu a:focus {
/* next line determines the background color of the hovered-over link in the slide-over menu for small screens */
  		background-color: #444;
	}
	.main-menu a.active {
		background-color: #555;
	}

/* next line closes the @media query */
}

/*
*****	Larger screen styling	*****
*****		Horizontal menu		*****
*/
@media (min-width: 768px) {
  .menu-toggle,
  .main-menu .menu-close {
    display: none;
  }
  
  /* Undo positioning of off-canvas menu */
  .main-menu {
    position: relative;
	left: auto;
	top: auto;
	height: auto;
		
/* concern with the next line: what if amount of text changes? */
/* so, next line is probably “dangerous” to use, because if text changes the width would be wrong */
/* centering of the main-menu ‘partially’ depends on this value! */
width: 61rem; /* this was the value for DC website */
width: 35rem;
width: 34.65rem; /* this seems to be the minimum needed to keep a horizontal scroll bar from appearing */
/* using a % width help centering when zooming in on the page; there is still a problem zooming out, though */
width: 43.75%; /* this seems to be the minimum for Safari needed to keep a horizontal scroll bar from appearing */
width: 46.825%; /* this seems to be the minimum for Firefox needed to keep a horizontal scroll bar from appearing */

/* problem width setting width is if not exact match then background color extends to the right of last menu item */
width: 36.2rem;
width: 50rem;
width: 91.5%;

/* Tried next line because width of the 4 sections of the menu adds up to 323px but results in end of menu area after the k in Links*/
/* width: 32.3rem; */
/* use next lines to center the main menu */
margin: auto;
background-color: #e9f6fb;  /* new addition */
  }
  
  .main-menu ul {
    /* display: flex; */ /* new change */
    /* Undo off-canvas styling */
    padding: 0;
    margin: 0; /* new addition */
    
/* new removal of next 2 lines (css validation gives warning) */
/* 
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
 */
    box-shadow: none;
    height: auto;
    width: auto;
    background: none;
    text-align: center;
/* 
	background-color: #e9f6fb; /* sets background color of the main menu bar */
 /* new change - try removing this next line */
	/* background-color: transparent; */ /* sets background color of the main menu bar */
  }
  
  .main-menu a {
    color: #06c; /* this line doesn’t seem to affect anything */
    border: 0 !important; /* Remove borders from off-canvas styling */
/* next 2 lines override the styling of small display slide-over menu text */
	line-height: 1.6rem;
	font-size: 1.6rem;
	background-color: #e9f6fb; /* new test sets background color of the links in the main menu bar */
  }
  

    /* my addition follows */
	ul.main-menu li {
	/* new change - remove this next line */
	/* float: left; */
	}
  
    .main-menu li {
  display: inline; /* new addition */
  }

  
  /* my addition follows */
  .main-menu li a {
padding: 14px 16px;
/* change to rem */
/* first value is top and bottom padding around the text of the link, second value is left and right padding */
padding: 1.4rem 1.6rem;
color: black;
display: inline-block; /* new addition */
    } /* this close paren was missing! */
    
  .main-menu a:hover:not(.active),
  .main-menu a:focus:not(.active) {
    background: none; /* Remove background from off-canvas styling */
/*    color: #c00; /* text color of link when hovered */
    background-color: #7ccae9;
    
  }
  /* my addition follows */
  .main-menu a.active {
	 background-color: #a8dcf0;
	 }
	.main-menu a.active:hover {
		text-decoration: none;
	}
	
@media (prefers-color-scheme: dark) {

/* new addition */
	  .main-menu {
	  	background-color: #333;
	  }

	.main-menu a {
		background-color: #333;
	}
	.main-menu li a {
		color: #f2f2f2;
	}
  .main-menu a:hover:not(.active),
  .main-menu a:focus:not(.active) {
/*    color: #c00; /* text color of link when hovered */
    background-color: #444;
    
  }
  .main-menu a.active {
	 background-color: #555;
	 }

} /* this closing paren closes @media (prefers-color-scheme: dark) */

} /* this closing paren closes @media (min-width: 768px) */

/*
******************** END OF NEW “Responsive, Pure CSS Off-Canvas Hamburger Menu” STUFF ********************
*/


/* 
******************** NEW RESPONSIVE COLUMNS STUFF FOR LINKS PAGE FOLLOWS ********************
*/

/* NOTE: when viewed on iPhone, extra space is added between former columns if the styles are in ul rather than li, so don't change this: leave it commented out! */
/* 
ul.links {
	list-style-type: none;
    margin-top: 1em;
    }
 */

/* new addition follows, used on articles page */
li.article-links {
	margin-top: 1.6rem;
    margin-bottom: 1.6rem;
    font-size: 1.6rem;
	}


li.links {
	list-style-type: none;
    margin-top: 1.6rem;
    font-size: 1.2rem;
    }
 
	div.column1-links, div.column2-links {float: left; width: 50%; line-height: 1.5}
	
	div.column1-links a, div.column2-links a {font-size: 1.4rem;}
 

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* 
***** Responsive layout - makes the two columns stack on top of each other instead of next to each other *****
*/

@media screen and (max-width: 767px) {

/* new addition for rem implementation follows
	results in smaller test sizes on small devices as compared to the original css
 */
	:root {
/* a 37.5% font size may be too small for small displays, so try sl. larger */
/* 
  		font-size: 37.5%;
 */
  		font-size: 43.75%;
  		}
/* added the next line to decrease size of header’s DC logo	on small screens
	will also effect all images, so watch for potential issues
*/
  	img {max-width: 70%; height: auto; 
	}
/* new addition to decrease size of Apple User Group logo */
	img.logo {max-width: 40%;
	}
	
    div.column1-links, div.column2-links {
        width: 100%;
    }
	div.column2-links {
    	position: relative;
        top: -1.6rem;
	}
		
} /* closes @media screen */

/* 
******************** END OF NEW RESPONSIVE COLUMNS STUFF FOR LINKS PAGE ********************
*/
  	
  	sup {font-size: 70%;}
	
/* new css to fix people page officer formatting; next 3 lines */
	div.officer {display: flex; align-items: center; margin-top: 2rem; margin-left:25%;}
	span.officer  {margin-top: 3rem; margin-left: 4rem;}
	img.officer {max-width: 20%;}

	blockquote {width: 90%; margin: auto; color: #000; background-color: #d4ecfb;} /* only used on member. info page */
		blockquote p {text-align: left; font-size: 1.4rem; padding: 1.6rem;}
@media (prefers-color-scheme: dark) {
	blockquote {color: #fff; background-color: #444;}
/* new css to change table text color in dark-mode, added March 2023 */	
	table.reviews, table.tracker {color: black;}
	span[class|='tracker'] {color: black;} /* this uses an attribute selector */
	}
/* 
I changed some p.text names as they were not reflecting the font-sizes very well!		
 */
 /* remove css for color in the next line as it overrides dark mode media query */
/*	p.text {text-align: left; font-size: 1.6rem; font-weight: normal; color: #000000; background-color: transparent;} */
	p.text {text-align: left; font-size: 1.6rem; font-weight: normal; background-color: transparent;}
	p.cntr {text-align: center; font-size: 1.6rem;}
	p.text-cntr-small {text-align: center; font-size: 1.2rem;}
	p.text-med {font-size: 1.4rem;}
	p.text-cntr-med {text-align: center; font-size: 1.4rem;}
	p.text-left-med {text-align: left; font-size: 1.4rem;}
	p.text-left-small {text-align: left; font-size: 1.2rem;}
/* add new class in order to eliminate inline style (was used for missing made_on_a_mac svg) */
	p.text-verysmall {font-size: 0.5rem;}
	p.subheading2 {text-align: center; color: #c01020; font-size: 2.2rem; font-weight: bold;}
	p.subheading3 {text-align: center; color: #1f1870; font-size: 1.8rem; font-weight: bold;}
	p.subheading4 {text-align: center; color: #1f1870; font-size: 1.6rem; font-weight: bold;}
@media (prefers-color-scheme: dark) {
  	p.subheading2 {color: #ffd280;}
  	p.subheading3, p.subheading4 {color: LightSkyBlue;}
}
	
/* 
new paragraph class follows, added May 2020, to replace YourMacDoc image in the header with text
 */
	
	p.header-logo {
		font-family: "Palatino", "Palatino Linotype", "Times New Roman", serif;
		font-size: 5rem;
    	font-kerning: normal;
    	font-style: italic;
    	font-weight: bold;
    	line-height: 0.1rem;
    	color: gray;
	}

/* increase line-height as links are too close on small displays */
	p.text-line-ht2 {text-align: left; font-size: 1.6rem; line-height: 3.2rem;} /* used only on archives page */

	p.text-cntr-line-ht2 {text-align: center; font-size: 1.6rem; line-height: 2;} /* used on people page */
	
/* new css for a link with a comment on archives page */
	p.text-small-left {text-align: left; font-size: 1.2rem;}
	span.line-ht2 {text-align: left; font-size: 1.6rem; line-height: 2;}
	
/* new css for obfuscation of new email address (using “email” ID) added Jan. 2026 */
	#email  > span:nth-child(2) {
    display: none;
	}

	/* new change - decreased max-width of .svg from 25% to 20% */
	div.cntr-svg {text-align: center; max-width: 20%; height: auto; border: 1px solid black; margin: auto; padding: 0.5rem 0.8rem 0rem 0.7rem; background-color: #eee;}

	span#lineheight {line-height: 1.25;} /* Used on old/new links page, old/new index page */
	span.nb {color: #c01020; background-color: transparent;} /* Used on meetings page for text color for picnic */
	span.bgrnd-a {background-color: springgreen; font-size: 90%;}
	span.bgrnd-new {background-color: yellow; font-size: 90%;}

@media (prefers-color-scheme: dark) {
  	span.bgrnd-a {color: #fff; background-color: DarkGreen;}
	span.bgrnd-new {color: #fff; background-color: #8B0000;}
/* next line closes the @media query */
}

/* 
More Additions
 */
	span.text-small-left {text-align: left; font-size: 1.2rem;}
	
	hr {display: block; margin: 3.2rem; border-width: 1px}

/* a value greater than 16 rem causes 1 column of dates on SE size display; */
	div.columns2 {text-align: center; column-count: 2; column-width: 16rem} /* only used on meetings page (for dates) */

	span.month {display: inline-block; width: 5.5em;} /* see above - LEAVE AS EM ! */