/*==============================================================================

	GRC multi-level script-free pure-CSS menuing system stylesheet.
   This code is hereby placed into the public domain by its author
   Steve Gibson. It may be freely used for any purpose whatsoever.

	Computed Geometries:	with a default 12px font, 1.0em == 12px and
	1px == 0.08333em.
	Thus, our 98px wide Freeware & Research buttons are 8.166666em wide.

                      PUBLIC DOMAIN CONTRIBUTION NOTICE							 
   This work has been explicitly placed into the Public Domain for the
	benefit of anyone who may find it useful for any purpose whatsoever.
	
==============================================================================*/

 /*================= STYLES FOR THE GRC MASTHEAD & CONTROLS ==================*/

.menuminwidth0 {             /* for all browsers (non-IE) that obey min-width */
	position:relative;
	border:0;
	margin:0;
	padding:0;
	width:100%;
	height:23px;/* 22px menu height + 1px lower border */
	min-width:560px;
	z-index: 9998 !important;  /* ensure entire menu container is above page content */
}

/* suppress our whole menu when not an interactive mode (when printing, etc.) */
@media print, projection {	.menuminwidth0 { display:none; } }

/* IE5/6 specific rules removed - no longer needed */

#masthead {
	position:relative;      /* position our child objects relative to this div */
	float:left;
	vertical-align:top;	         /* protect from super-large user text sizing */
	border:0;
	margin:0;
	padding:0;
	width:100%;                                  /* grey-fill the entire width */
	height:36px;                  /* set the overall height above the menu-bar */
	background:#F3F3F3;                          /* a very light shade of grey */
}

#mastheadlogo {
	float:left;
	vertical-align:top;
	border:0;
	padding:0;
	margin:6px 0 0 7px;
}

#focus {                                                 /* GRC's focus label */
	position:absolute;
	border:0;
	margin:0;
	padding:0;
	top:15px;
	left:301px;
	width:121px;
	height:13px;
}

#email {                                                 /* GRC's menu blog icon */
	position:absolute;
	border:0;
	margin:0;
	padding:0;
	top:8px;
	left:457px;
	width:179px;
	height:22px;
}

#search {                                                    /* search button */
	float:right;
	position:absolute;
	top:-8px;
	right:0px;
	width:30em;
}

#text {                                                 /* search text field */
	position:absolute;
	border:1px solid #404040;
	margin:0;
	padding:0 0 0 2px;				 /* move the left starting point a bit right */
	top:7px;
	right:65px;
	width:12em;														  /* search field width */
/*	height:1.215em;         we'll define this at the bottom of our style sheet */
	font-size:14px !important;
	background:#fefefe;
}

#indicator {                               /* surfing privacy tests indicator */
	position:absolute;
	border:0;
	margin:0;
	padding:0;
	top:-3px;
	right:2px;
	width:228px;
	height:22px;
}


 /*========================= TOP OF THE MENU CASCADE =========================*/

.menu {
	position:relative;        /* establish a menu-relative positioning context */
	float:left;                                     /* play nicely with others */
	margin:0;
	padding:0;
	border:0;
	height:22px;                                  /* increased menu height */
	width:100%;         /* we always want our menu to fill the available space */
	background:#7a8791;  /* professional dark blue-grey background */
	font-family: 'Segoe UI', Tahoma, Geneva, sans-serif !important;
	font-size:13px !important;  /* this (and also below) sets the menu's font size */
	font-weight: 500 !important;
	border-bottom:1px solid #f7f8f9;        /*  border */
	z-index: 9999 !important;  /* ensure menu always appears above other content */
}

/* FORCE WHITE TEXT ON ALL MENU ITEMS - OVERRIDE EVERYTHING */
.menuminwidth0 .menu a,
.menuminwidth0 .menu a:link,
.menuminwidth0 .menu a:visited,
.menuminwidth0 .menu a:active,
.menuminwidth0 .menu ul a,
.menuminwidth0 .menu ul a:link,
.menuminwidth0 .menu ul a:visited,
.menuminwidth0 .menu ul a:active,
.menuminwidth0 .menu ul li a,
.menuminwidth0 .menu ul li a:link,
.menuminwidth0 .menu ul li a:visited,
.menuminwidth0 .menu ul li a:active,
.menuminwidth0 .menu ul li > a,
.menuminwidth0 .menu ul li > a:link,
.menuminwidth0 .menu ul li > a:visited,
.menuminwidth0 .menu ul li > a:active,
.menuminwidth0 .menu > ul > li > a,
.menuminwidth0 .menu > ul > li > a:link,
.menuminwidth0 .menu > ul > li > a:visited,
.menuminwidth0 .menu > ul > li > a:active,
.menuminwidth0 div.menu a,
.menuminwidth0 div.menu ul li a,
div.menuminwidth0 div.menu a,
div.menuminwidth0 div.menu ul li a {
	color: #ffffff !important;
}

/* ABSOLUTELY FORCE IT */
div[class*="menu"] a {
	color: #ffffff !important;
}

.menu img {
	vertical-align: top;      /* prevent images from being pushed down by text */
}

.menu ul {
	margin:0;
	list-style-type:none;          /* we don't want to view the list as a list */
	line-height:1.5em;           /* globally set the menu's item spacing. note */
}                               /* this must be 1.0 or 1.5 or 2.0 for Mozilla */

.menu li {
	float:left;    /* this creates the side-by-side array of top-level buttons */
	position:relative;    /* create local positioning contexts for each button */
	margin:0;
}

.menu ul li table {
	margin:0;
	border-collapse:collapse;
	font-family: 'Segoe UI', Tahoma, Geneva, sans-serif !important;
	font-size:13px !important;  /* this sets the base font size for our entire menu */
	font-weight: 500 !important;
}

.drop {
	display:block;
	padding:0px 0.6em;	       /* increased l/r margins for menu items */
	margin:0;
	text-align:right;   /* this right alignment goes with the float:left below */
	cursor:pointer;
	letter-spacing: 0.5px;  /* increase letter spacing for readability */
	color: #ffffff !important;  /* ensure white text color */
}

.drop span {        /* this simultaneously left and right aligns the text and */
	float:left;       /* the >> in the drop-down menus which link to sub-menus */
}

.rightmenu {
	position:relative;  /* establish a local positioning context for YAH label */
	float:right;                  /* and right-align it at the top of our page */
}

#research {            /* this rightmost "Research" button must be positioned */
	position:absolute;       /* absolutely so that the YAH (you are here) text */
	top:0px;               /* label will slide underneath it under Opera v8.54 */
	left:364px;    /* which has a z-order sequencing bug with abs-pos elements */
}

#other {                  /* this rightmost "Other" button must be positioned */
	position:absolute;       /* absolutely so that the YAH (you are here) text */
	top:0px;               /* label will slide underneath it under Opera v8.54 */
	left:462px;    /* which has a z-order sequencing bug with abs-pos elements */
}

/*======================== TOP LEVEL MENU DEFINITIONS ========================*/

.menu ul li ul {
	display:none;                  /* initially hide the entire list hierarchy */
	padding:1px;                               /* this is our box border width */
}

.menu ul li a,
.menu ul li a:visited,
.menu ul li a:link {                    /* unselected top-level menu items */
	display:block;
	float:left;
	text-decoration:none;
	height:22px;
	color: #ffffff !important;  /* WHITE text - not blue! */
	padding: 0 16px !important;  /* increased horizontal padding for spacing */
	line-height: 22px !important;  /* center text vertically */
	transition: background-color 0.2s ease;
	letter-spacing: 0.3px !important;  /* subtle letter spacing */
}

.menu ul li:hover a,
.menu ul li a:hover {                        /* selected top-level menu items */
	background-color: #7c8a98 !important;  /* MENU COLOR on hover */
	color: #ffffff !important;
	height:22px;
}

/*======================== 2ND LEVEL MENU DEFINITIONS ========================*/

.menu ul li:hover ul,
.menu ul li a:hover ul {                           /* 2nd level drop-down box */
	display:block;
	position:absolute;
	margin:0;
	padding:0;
	top:22px;              /* Match the menu height exactly */
	left:0;                /* align with parent */
	height:auto;      /* the drop-down height will be determiend by line count */
	width:13.5em;
	background:#f8f9fa;         /* very light grey background */
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);  /* subtle shadow */
	border: 1px solid #dee2e6;  /* subtle grey border */
	z-index: 10000 !important;  /* ensure dropdowns appear above everything */
}

.menu ul li:hover ul.leftbutton,
.menu ul li a:hover ul.leftbutton {/* our first dropdown should not be skewed */
	left:0px;
}

.menu ul li:hover ul.skinny,
.menu ul li a:hover ul.skinny {             /* 2nd level skinny drop-down box */
	width:8.08333em;   /* with a 12px default font, this is 97px width (97/12) */
}

.menu ul.rightmenu li:hover ul,
.menu ul.rightmenu li a:hover ul {    /* 2nd level neighborhood drop-down box */
	left:auto;
	right:0;         /* nudge the right menu right to line up under the border */
	width:400px;      /* with a 12px default font, this is 228px width (228/12) */
}

/* IE5/6 specific rule removed */

.menu ul li:hover ul li a,
.menu ul li a:hover ul li a,
.menu ul li:hover ul li a:link,
.menu ul li a:hover ul li a:link {                   /* 2nd level unselected items */
	border:0;
	margin:0;
	padding:8px 12px !important;  /* Consistent padding for dropdown items */
	height:auto;
	line-height:1.2;              /* Prevent vertical stretching */
	color:#ebe7e7 !important;    /* dark grey text for dropdown */
	background:#f8f9fa;           /* very light grey background */
	width:13.5em;
}

.menu ul li:hover ul li:hover a,
.menu ul li a:hover ul li a:hover {                /* 2nd level selected item */
	color:#212529 !important;
	background:#e9ecef !important;  /* light grey on hover */
}

.menu ul li:hover ul.skinny li a,
.menu ul li a:hover ul.skinny li a,
.menu ul li:hover ul.skinny li a:hover,
.menu ul li a:hover ul.skinny li a:hover {     /* 2nd level un+selected items */
	width:8.08333em;
}

/*======================== 3RD LEVEL MENU DEFINITIONS ========================*/

.menu ul li:hover ul li ul,
.menu ul li a:hover ul li a ul {             /* hide inactive 3rd-level menus */
	visibility:hidden;
}
     
.menu ul li:hover ul li:hover ul,
.menu ul li a:hover ul li a:hover ul {             /* 3rd level drop-down box */
	visibility:visible;
	position:absolute;
	margin:0;
	padding:0;
	top:0;
	left:100%;             /* Position to the right of parent */
	width:14em;
	background:#f8f9fa;    /* very light grey background */
	box-shadow: 0 2px 5px rgba(0,0,0,0.2);  /* subtle shadow */
	border: 1px solid #dee2e6;  /* subtle grey border */
	border-left: none;     /* Remove left border to connect with parent */
	z-index: 10001 !important;  /* ensure 3rd level dropdowns appear above 2nd level */
}

.menu ul li:hover ul li:hover ul li a,
.menu ul li a:hover ul li a:hover ul li a {     /* 3rd level unselected items */
	width:14em;
	padding:8px 12px !important;  /* Consistent padding */
	line-height:1.2;              /* Prevent vertical stretching */
	color:#2c3e50 !important;    /* dark text color */
	background:#f8f9fa;           /* very light grey background */
}

.menu ul li:hover ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover ul li a:hover {    /* level3 selected items */
	width:14em;
	color:#212529 !important;
	background:#e9ecef !important;  /* light grey on hover */
}

#text {
	height:1.215em;
}

/* ======================== LIGHT MODE STYLES ======================== */
@media (prefers-color-scheme: light) {
	.menu {
		background: #ffffff !important;  /* white background for light mode */
		border-bottom: 1px solid #dee2e6 !important;  /* light grey border */
	}
	
	/* Override text colors for light mode - make all menu text dark */
	.menuminwidth0 .menu a,
	.menuminwidth0 .menu a:link,
	.menuminwidth0 .menu a:visited,
	.menuminwidth0 .menu a:active,
	.menuminwidth0 .menu ul a,
	.menuminwidth0 .menu ul a:link,
	.menuminwidth0 .menu ul a:visited,
	.menuminwidth0 .menu ul a:active,
	.menuminwidth0 .menu ul li a,
	.menuminwidth0 .menu ul li a:link,
	.menuminwidth0 .menu ul li a:visited,
	.menuminwidth0 .menu ul li a:active,
	.menuminwidth0 .menu ul li > a,
	.menuminwidth0 .menu ul li > a:link,
	.menuminwidth0 .menu ul li > a:visited,
	.menuminwidth0 .menu ul li > a:active,
	.menuminwidth0 .menu > ul > li > a,
	.menuminwidth0 .menu > ul > li > a:link,
	.menuminwidth0 .menu > ul > li > a:visited,
	.menuminwidth0 .menu > ul > li > a:active,
	.menuminwidth0 div.menu a,
	.menuminwidth0 div.menu ul li a,
	div.menuminwidth0 div.menu a,
	div.menuminwidth0 div.menu ul li a,
	div[class*="menu"] a {
		color: #333333 !important;  /* dark text for light mode */
	}
	
	/* Top level menu items */
	.menu ul li a,
	.menu ul li a:visited,
	.menu ul li a:link {
		color: #333333 !important;  /* dark text */
	}
	
	/* Top level hover state */
	.menu ul li:hover a,
	.menu ul li a:hover {
		background-color: #f0f0f0 !important;  /* light grey hover */
		color: #000000 !important;  /* black text on hover */
	}
	
	/* Dropdown styling for light mode */
	.menu ul li:hover ul,
	.menu ul li a:hover ul {
		background: #ffffff !important;  /* white dropdown background */
		border: 1px solid #dee2e6 !important;  /* light grey border */
		box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;  /* subtle shadow */
	}
	
	/* Dropdown items in light mode */
	.menu ul li:hover ul li a,
	.menu ul li a:hover ul li a,
	.menu ul li:hover ul li a:link,
	.menu ul li a:hover ul li a:link {
		color: #333333 !important;  /* dark text */
		background: #ffffff !important;  /* white background */
	}
	
	/* Dropdown hover in light mode */
	.menu ul li:hover ul li:hover a,
	.menu ul li a:hover ul li a:hover {
		color: #000000 !important;  /* black text */
		background: #f0f0f0 !important;  /* light grey hover */
	}
	
	/* 3rd level dropdowns light mode */
	.menu ul li:hover ul li:hover ul,
	.menu ul li a:hover ul li a:hover ul {
		background: #ffffff !important;  /* white background */
		border: 1px solid #dee2e6 !important;  /* light grey border */
		box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
	}
	
	.menu ul li:hover ul li:hover ul li a,
	.menu ul li a:hover ul li a:hover ul li a {
		color: #333333 !important;  /* dark text */
		background: #ffffff !important;  /* white background */
	}
	
	.menu ul li:hover ul li:hover ul li a:hover,
	.menu ul li a:hover ul li a:hover ul li a:hover {
		color: #000000 !important;  /* black text */
		background: #f0f0f0 !important;  /* light grey hover */
	}
	
	/* Text in dropdowns */
	.drop {
		color: #333333 !important;  /* dark text */
	}
}