/* Vendor-prefixed properties used by different rendering engines of browsers:
   -webkit (for Chrome, Safari, and Opera-blink)
   -moz    (for Firefox-gecko)
   -ms     (for Internet Explorer-Trident)
*/

#appmenu{
	width:100%;		/* was auto */
	float:left;
	margin:0;
	padding:0;
	color:#fff;
	/*background-color:#369;*/
	padding:.25em
}

/*
#appmenu li{
	white-space:nowrap;
	display:block;
	padding:.25em .75em;
	margin:0;
	border:1px solid #fff;
}
*/

#appmenu li{
	float: left;
	position: relative;
	text-align: center;
	cursor: pointer;
	background-color: lightblue;
}

/*
#appmenu:hover,
#appmenu:focus{
	background-color: blue;
	color: #036;
	border: 1px solid #036;
	text-decoration: underline;
}
*/

#appmenu:hover li,
#appmenu:focus li{
	background-color: orange;
	color: #fff;
	border: 2px solid black;
}


#appmenu li:hover {
	/*display:block;*/
	background-color: yellow;
	color: #fff;
	/*background-color: #a00;*/ /* red */
	/*border: 1px solid #a00;*/
	/*border: 2px solid #800;*/ /*dk red*/
	border: 2px solid black;
}

#appmenu li:focus {
	/*display:block;*/
	background-color: yellow;
	color: #fff;
	/*background-color: #a00;*/ /* red */
	/*border: 1px solid #a00;*/
	/*border: 2px solid #800;*/ /*dk red*/
	border: 2px solid black;
}

/* This is hover used in main nav bar because all are anchor links to something */
#appmenu li a:hover {
	/*display:block;*/
	color: #fff;
	/*background-color: green;*/
	background-color: #a00;
	/*border: 2px solid #800;*/
	border: 2px solid black;
	text-decoration: underline;
}

/* This is focus used in main nav bar because all are anchor links to something */
#appmenu li a:focus {
	/*display:block;*/
	color: #fff;
	/*background-color: lightgreen;*/
	background-color: #a00;
	/*border: 2px solid #800;*/
	border: 2px solid #800;
	text-decoration: underline;
}


/* take out ul after li[aria-expanded="true"] and subitems don't show */
/* put ul back in and subitems show upon arrow presses */
#appmenu > li[aria-expanded="true"] ul {
	position: relative;		/* needed for positioning content */
	display: inline-block;	/* allows other elements to sit next to it */
	/*display:block; */          /* was block */
	visibility: visible;    /* added - no change*/
    margin: 0px;
    border: 0px;
    /*background-color: lightblue;*/  /* was #3d3d3d; */
    /* min-height:200px; */		/* added 2/25/26 THIS IS WHAT MADE DROP DOWN BOX SHOW AGAIN BUT ONLY LAST ITEM? */
    max-height:1000px;			/* added 2/24/26 THIS IS WHAT MADE DROP DOWN BOX SHOW ENTIRELY! */
    max-width: 170px;			/* added 3/06/26 */
    /*min-width: 100px;*/			/* added 2/25/26 */
    /*width: auto;*/
    /*padding: 12px 15px;*/		/* removing this positioned box up close to nav bar */
    font-size: 15px;    /* was 13px */
    text-transform: capitalize;
    text-align: left;
    list-style-type: none;
	-webkit-z-index: 2000;	/* was 1000 */
       -moz-z-index: 2000;	/* was 1000 */
        -ms-z-index: 2000;	/* was 1000 */
            z-index: 2000;	/* was 1000 - for smaller screens, allow drop down items to be on top of menu bar */
}

#appmenu > li[aria-expanded="true"] ul:hover,
#appmenu > li[aria-expanded="true"] ul:focus {
	/*background-color: purple;*/
	/*background-color: #a00;*/		/* this caused long red stripe down length of page when both focus and hover at same time */
	display:block;
}

/* when this sort of commented out, list items came back
#appmenu li[aria-expanded="true"] ul li {
    position: absolute;		/* positioned relative to drop down parent */
    /* display:none; */
	/*display:block;
	visibility:visible;   /* added */
    /*float: none;
    -webkit-z-index: 1000;
       -moz-z-index: 1000;
        -ms-z-index: 1000;
            z-index: 1000;  /* was 10000? */
    /* border: 0 none;
	background: #333;
	width: 100%;
	font-size: 1em;
	box-sizing: border-box;
	border-bottom: 1px solid #282828;
	border-left: 1px solid #282828;
	border-right: 1px solid #282828 !important;
}
*/

#appmenu > li[aria-expanded="true"] > ul > li {
	display: block;		/* added 2/19/26 */
	/*background-color: #a00;*/
	max-height: 150px;	/* added 3/06/26 */
	/*min-height: 100px;*/  /* added 3/31/26; made all boxes larger */
	min-height: auto;  /* added 4/7/26; made all boxes small again */
}

#appmenu > li[aria-expanded="true"] > ul > li:focus {
	/* background-color: pink; */
	/*background-color: #a00 !important;*/
	color: #fff;
	border: 3px solid black;	/* was 0 */
	display: block;		/* added 2/19/26 */
}

/* The following added 4/3/26 but seems to have no effect */
#appmenu > li[aria-expanded="true"] > ul > a:focus {
    /*background-color: #a00 !important;*/
    width: auto;
    border: 0 none;
}

.skip-link {
	/* position the link off-screen by default */
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1em;
	background-color: #000;
	color: #fff;
	/* using clip property is another valid method */
	/* clip: rect(0 0 0 0); */
}

.skip-link:focus {
	/* bring the link into viewport when it receives focus via the Tab key */
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

#backBtn {
	/* position relative to the viewport */
	position: fixed;
	bottom: 120px;
	right: 30px;
	/* z-index: 99; */
	z-index: 999;
	cursor: pointer;
	padding: 15px;
	border-radius: 10px;
	font-size: 18px;
	border: none;
	outline: none;
	background-color: darkred;
	color: white;
	transition: background-color 0.3s;
}

#backBtn:hover {
	background-color: red;
}

#backBtn:focus {
	outline: 2px solid black;
	background-color: red;
}

#escape:focus {
	background-color: lightpink;
	/*display:block;*/
	display:hidden;
}