/* Basic Reset & Body */
body {
    color: #333;
    background-color: #f8f9fa;
    margin: 0;
    padding: 0;
}

div.content {
    width: auto;
    max-width: 900px;
    margin: 2em auto;
    margin-left: max(2em, calc((100% - 900px) / 2 + 2em));
    margin-right: max(2em, calc((100% - 900px) / 2 + 2em));
    padding: 2em;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    border-radius: 8px;
    float: none;
}

/* Responsive fix for narrow screens */
@media (max-width: 768px) {
    div.content {
        margin: 1em;
        padding: 1.5em;
        max-width: none;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    div.content {
        margin: 0.5em;
        padding: 1em;
        border-radius: 4px;
    }
}

#expandingContent {
    margin-inline-start: 15rem;
    }
#selector {
    margin: 1em;
    float: left;
    /* width: 28%; */
    width: 15rem;
    position: sticky;
    top: 0;
    }

#selector h3 {
	margin-inline-start: 1.4rem;
	margin-inline-end: 7.5%;
	}

/* Responsive styles for mobile devices */
@media (max-width: 768px) {
    #selector {
        float: none;
        width: auto;
        max-width: 100%;
        margin: 1em auto;
        position: relative;
        box-sizing: border-box;
        padding: 0 1em;
    }
    
    #expandingContent {
        margin-inline-start: 0;
        margin-top: 1em;
    }
}


/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: "Georgia", serif;
    color: #2c1e12;
    margin-block-start: 1.5em;
    margin-block-end: 0.5em;
}

h1 {
    font-size: 2.5em;
    border-bottom: 2px solid chocolate;
    padding-bottom: 0.3em;
    margin-inline-end: 0;
}

h2 {
    font-size: 2em;
    margin-block-start: 2.5em;
    color: chocolate;
	clear:both;
    padding-block: 1rem;
    border-radius: .25rem;
}

h3 {
	font-weight:normal; 
	font-size: 140%;
	margin-top: 0;
	border-bottom: 0;
	padding-top: 10px;
	
	margin-bottom: 20px
	}
h3 a:link {
	color: #697fb1;
	}
h3 a:visited {
	color: #697fb1;
	}
h3 a:active {
	color: #697fb1; background-color:#FFF; 
	}

h4 { 
	margin-left: 10%; 
	margin-bottom: 0; 
	margin-right: 32%; 
	font-size: 90%; 
	}

/* Align h2 and h3 with resource-box left edge */
h2, h3 { margin-inline-start: 4rem; }

h2, h3, h4 {
	z-index: -200;
  }
  
h4, h5, h6 {
    font-size: 1.2em;
    color: #444;
}

.goto {
    visibility: hidden;
    }


/* Resource Box */
.resource-box {
	margin-inline-start: 3rem;
	clear: both;
	border: 1px solid #eee;
	border-left: 5px solid chocolate;
	padding: 1.5em;
	margin-bottom: 1.5em;
	border-radius: 4px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	}

div.resource-box div {
	margin-left: 3%;
	margin-bottom: 1em;
	padding-top: 10px;
	margin-right: 2%;
	}

.resource-box h5 {
    color: chocolate;
    margin-top: 0;
    border-bottom: 1px solid #f5e5d5;
    padding-bottom: 0.5em;
    font-size: 1.2em;
	}

summary.h2 {
	border-radius: 8px;
    clear: both;
    margin-left: 3%;
    font-family: Arial, helvetica, sans-serif;
    font-size: 140%;
    font-weight: normal;
    color: white;
    border: none;
    padding: 0.1em 0.4em;
	background-color: #697fb1;
    margin-bottom: .25em;
	}
summary.h3 {
    font-weight: normal;
    font-size: 140%;
    margin-top: 0;
    margin-left: 3%;
    border-bottom: 0;
    padding-top: 10px;
    margin-bottom: 0px;
    font-family: Arial, helvetica, sans-serif;
    color: #697fb1;
    line-height: 1.1;
    }

h5, summary.h5 { 
	margin-left: 0; 
	color: #996600; 
	margin-top: 0; 
	margin-bottom: 0; 
    font-size: 95%;
    font-weight: bold;
	}
summary {
    cursor: pointer;
    }
summary a {
    float: right;
    font-size: 60%;
    margin-right: 2em;
    text-decoration: none;
    }
summary a:link, summary a:visited {
    color: inherit;
    }


/* Details / Summary Elements */
details {
    background-color: #fefefe;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 1em;
}

details summary {
    font-weight: bold;
    cursor: pointer;
    padding: 0.75em 1em;
    color: #555;
    background-color: #f9f9f9;
    border-bottom: 1px solid #ddd;
    transition: background-color 0.3s ease;
}
details[open] summary {
    border-bottom: 1px solid chocolate;
    background-color: #f5f5f5;
}


details summary:hover {
    color: chocolate;
    background-color: #f0f0f0;
}

details .h5, details summary.h5 {
    color: chocolate;
    border-bottom: none;
    padding: 0.75em 1em;
}
details > div, details > ul, details > p { /* Content inside details */
    padding: 1em;
}



/*
.w3 { list-style-image: url(../../icons/w3.png); }
.nonw3 { list-style-image: url(../../icons/external.png); }
*/


.bp { 
	list-style-image: url(../recommended.html); 
	color: brown;
    font-weight: 400;
	}

li {
    margin-top: 0;
    margin-bottom: 0
    }
li p.link { 
	margin-bottom: 0; 
    margin-top: .5em;
	padding-bottom: 0; 
	font-size: 110%;
	}
li p.desc { 
	margin-top: 0;
    margin-bottom: 0;
	padding-top: 0; 
	font-size: 90%; 
	}

.resource-box .checklist > ul  {
	margin: 10px 4% 10px 0;
	padding: 0;
	}
/*.resource-box .checklist > ul > li {
	list-style-image: none;  
	list-style-type: none; 
	background-image:  url("../../icons/checkbox.png"); 
	background-position: top left; 
	padding: 0 0 0 30px; 
	background-repeat: no-repeat; 
	margin: 0 0 10px 0;
	min-height: 27px; 
	} */
.resource-box .checklist > ul > li {
	list-style-image: none;  
	list-style-type: none; 
	padding: .3em 1em; 
	background-repeat: no-repeat; 
	margin: 0 0 10px 0;
	min-height: 27px; 
	font-size: 105%;
	color: brown;
	background-color: antiquewhite;
	border-radius: 5px;
	}

.resource-box .xref {
	border-radius: 8px;
	/* border: 1px solid #FC0; */
	border: 4px solid white;
	padding: 10px;
	font-size: 0.95em;
	background-color: #FEB;
	float: right;
	width: 20%;
    margin-top: .4em;
    min-width: 12rem;
    margin-bottom: 1em;
	}
.resource-box .xref p {
	margin: 0;
	}
.xref h5, .checklist h5 {
    color: chocolate;
    font-size: 1.1em;
    border-bottom: 1px solid #f5e5d5;
    padding-bottom: 0.5em;
	}

.resource-box .goto {
	font-size: 75%;
	background-color: white;
	padding-top: 10px;
	margin: 0;
	text-align: right;
	clear: both;
	width: 100%;
	/* border-bottom: 1px solid #CCC; */
	}





















	/*
.resource-box .checklist {
	float: right;
	width: 52%;
	clear: right;
	margin: 0 4% 10px 0;
	}
	*/
.resource-box .gotox {
	border-radius: 8px;
	border: 1px solid #FC0;
	padding: 10px;
	font-size: 80%;
	background-color: white;
	float: right;
	width: 52%;
	margin: 0 4% 10px 0;
	}
.resource-box .goto h5 {
	margin: 0;
	display: inline;
	padding: 0;
	}
.resource-box .goto li {
	margin: 0;
	display: inline;
	padding: 0;
	}
.resource-box .goto li:before {
	content: ' \2022  '
	}
.resource-box .goto ul {
	margin: 0;
	display: inline;
	padding: 0;
	}






p.toc2 { 
	margin-left: 50px; 
	}
dl dl { 
	margin-right: 0; 
	margin-left: 0px; 
	}
.toc1 { 
	margin-left: 1em; 
	margin-right: 1em; 
	margin-top: 1em; 
	color: #005a9c; 
	background: white; 
	}
.toc2 { 
	margin-left: 2em; 
	margin-right: 1em; 
	margin-top: .5em; 
	font-size: 90%; 
	}
	
div.resource-box div.rec { 
	Xwidth: 45%; 
	Xfloat: right; 
	margin-left: 2%; 
	}

.rec ul {
	margin-bottom: 30px;
}
.resource-box div.seealso { 
	text-align: left; 
	padding: 4px;
	font-size: 80%;
	background-color: #Feb;
	border-radius: 8px;
	border: 1px solid #fff;
	padding-right: 8px;
	margin: 0;
	margin-bottom: 30px ;
	width: 80%;
	}
/* experiment */
.resource-box div.seealso { 
	font-size: 80%;
	background-color: white;
	border-radius: 8px;
	border: 1px solid #fc0;
	padding: 10px;
	}
.resource-box div.othersections {
	font-size: 90%;
	background-color: #feb;
	}
	
	
.seealso li, .links li { 
	list-style-type: none; 
	margin: 0; 
	padding: 0;
	padding-left: 10px;
	background: url(../go.html) no-repeat left 2px;
	}
.seealso p { 
	margin: 0; 
	padding: 0; 
	}
resource-box div.othersections p { margin-bottom: 10px; }	
.seealso ul, .seealso h5 {
	margin: 0;
	padding: 0;
	}
	
	
.resource-box div.links, .summary .links {
	padding: 4px;
	font-size: 80%;
	text-align: right;
	background-color: #Feb;
	border-radius: 8px;
	border: 1px solid #fff;
	margin: 0;
	margin-bottom: 30px;
	width: 80%;
	}

	
	
div.icons { 
	float: right; 
	margin-right: 2em; 
	}
ins { 
	text-decoration: none; 
	}
del { 
	display: none; 
	}
.collapse + ul { 
	display: none; 
	}
.back { 
	text-align: right; 
	font-size: 80%;  
	margin: 0; 
	padding: 0; 
	}
.expandall {
	text-align: right; 
	}
.summary {
	margin-left: 4%;
}
.summary p {
	padding-top: 0;
	float:none;
	margin-bottom: 0;
	padding-bottom: 0;
	font-size: 90%;
	}
.summary li, .summary ul { 
	margin-left: 0; 
	padding-left: 0; 
	}
.summary li, .summary ul { 
	margin-left: 8px;
	}
.summary  ul { 
	margin-top: 3px;
	}
.summary li { 
	line-height: 1.4em;
	}
hr { clear: both; }

.type { font-size: 65%; margin-left: 5px; width: 250px; }

li.bp img {
	vertical-align: sub;
	margin-left: 8px;
	cursor: pointer;
}

div.resource-box .recommendations { width: 80%; }

.bp a { font-style: italic; font-size: 90%; }


.showhide { display: none; } /* this has to stay here to avoid interference */
/*.bp { list-style-image: none;  list-style-type: none; background-image:  url("images/checkbox.png"); background-position: top left; padding: 0 0 0 30px; background-repeat: no-repeat; margin: 0;  } */
.recommendations ul { padding: 0; }
.recommendations ul ul { padding-left: 30px; }
.seealso { font-size:90%; padding:10px; }
/* div.resource-box div { width: 36%; }
div.resource-box div.rec { width: 55%; }
*/
.bp1 {list-style-image: none;  list-style-type: none; background-image:  url("../checkbox-2.html"); background-position: top left; padding: 0 0 0 30px; background-repeat: no-repeat; margin: 0;  }
.seealso1 {font-size:90%; padding:10px; }
.directory h2 { margin-left: 0; }
.secno { display: none; }

#mainECButtons button {
	font-size: 120%; 
	cursor:pointer;
	border: 0;
	background-color: transparent;
	}
.otherlinks {
	cursor: pointer;
	}

ul, ol {
	margin-inline-start: 2rem;
	margin-inline-end: 0;
    margin-bottom: 1em;
	}

p {
	margin-inline-start: 7.5%;
	margin-inline-end: 7.5%;
	}

section {
    margin-bottom: 2em;
	}

/* TOC Menu */
#toc {
    background: transparent;
    font-size: 100%;
    margin-inline-start: 0;
	}

/* Originally from ../style/menu.css */

.viewmenu {
	margin-bottom: 10px;
	margin-left: 6%;
	position: relative;
	z-index: 4000;
}

ul#css3menu {
	margin: 0;
	list-style: none;
	padding: 0;
	display: block;
	position: normal;
	z-index: 1100;
	left: 10px;
	top: 10px;
}

ul#css3menu ul {
	margin: 0;
	list-style: none;
	padding: 0;
	display: none;
	position: absolute;
	left: -1px;
	top: 98%;
}

ul#css3menu ul ul {
	margin: 0;
	list-style: none;
	padding: 0;
	display: none;
	position: absolute;
	left: 40px;
	top: 98%;
}

ul#css3menu li:hover>* {
	display: block;
}

ul#css3menu li:hover {
	position: relative;
}

ul#css3menu li {
	display: block;
	white-space: nowrap;
	font-size: 0;
	vertical-align: bottom;
}

ul#css3menu a {
	display: block;
	cursor: pointer;
}

ul#css3menu {
	background-color: #FFF6E7;
	font-size: 0;
	border-radius: 6px;
}

ul#css3menu ul {
	background-color: #FFF6E7;
	border: 1px solid #5f5f5f;
	border: 1px solid #ddd;
	border-radius: 6px;
	*-moz-box-shadow: 3.5px 4px 5px #000000;
	-webkit-box-shadow: 3.5px 4px 5px #000000;
	box-shadow: 3.5px 4px 5px #000000;
	padding: 0 5px 5px;
	border-color: #d4d4d4;
	margin-inline-start: 3rem;
}

ul#css3menu>li,
ul#css3menu li {
	margin: 0;
}

/* ul#css3menu ul ul{ 	position:absolute;left:98%;top:-2px;} */
ul#css3menu a:active,
ul#css3menu a:focus {
	outline-style: none;
}

ul#css3menu a {
	vertical-align: bottom;
	text-align: left;
	text-decoration: none;
	font-style: normal;
	font-size: 16px;
	font-family: RalewayWF;
	color: #005a9c;
	background-color: #FFF6E7;
	border-width: 0 0 0 1px;
	border-style: solid;
	border-color: #FFF6E7;
	padding: 10px 10px;
	/*border-radius: 6px;*/
}

ul#css3menu ul li {
	float: none;
	margin: 5px 0 0;
}

ul#css3menu ul a {
	text-align: left;
	padding: 4px;
	background-color: #FFF6E7;
	border-width: 0;
	font-size: 14px;
	font-family: RalewayWF;
	color: #005a9c;
	;
	text-decoration: none;
}

ul#css3menu li:hover>a {
	background-color: #f8ac00;
	background-color: chocolate;
	border-color: #C0C0C0;
	border-color: chocolate;
	border-style: solid;
	font-style: normal;
	font-size: 16px;
	font-family: RalewayWF;
	color: white;
	text-decoration: none;
}

ul#css3menu img {
	border: none;
	vertical-align: bottom;
	margin-right: 20px;
	width: 16px;
	height: 16px;
}

ul#css3menu ul img {
	width: 16px;
	height: 16px;
}

ul#css3menu img.over {
	display: none;
}

ul#css3menu li:hover>a img.def {
	display: none;
}

ul#css3menu li:hover>a img.over {
	display: inline;
}

ul#css3menu span {
	display: block;
	overflow: visible;
	background-position: right center;
	background-repeat: no-repeat;
	padding-right: 0px;
}

ul#css3menu ul li:hover>a {
	background-color: #FFFFFF;
	background-image: none;
	font-size: 14px;
	font-family: RalewayWF;
	color: brown;
	text-decoration: none;
	/*border-radius: 6px;*/
}

ul#css3menu li.topfirst>a {
	border-radius: 6px 0 0 6px;
}

ul#css3menu li.toplast>a {
	border-radius: 0 6px 6px 0;
}

#selector h3 {
    color: chocolate;
    margin-top: 0;
    font-size: 1.6em;
}

ul#css3menu li a {
    padding: 0.75em 1em;
    color: #333;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

ul#css3menu li a:hover,
ul#css3menu li a:focus {
    background-color: chocolate;
    color: white;
    text-decoration: none;
    /* transform: translateX(5px); Subtle hover effect */
}

ul#css3menu li.topfirst > a {
    background: chocolate;
    color: white;
    font-weight: bold; /* Make it stand out a bit more */
    margin-inline-end: 0;
    transform: none; /* No hover transform for active */
}

/* Make the top level menu items bold, but not the submenu items */
ul#css3menu>li { font-weight: bold; }
ul#css3menu > li > ul > li { font-weight: normal; }

#css3menu > li:nth-child(1) > a {
	margin-top: 0.2em;
}

#css3menu > li:nth-child(6) > a {
	margin-bottom: 0.95em;
}