/* ********************* All DSB sites ********************* */
body {
	scroll-behavior: smooth;
	}


img { max-width: 100%; }

.cms-content p, .cms-content li {
	font-size: 1rem;
	line-height: 1.4;
	}

.cms-content * {
	box-sizing: border-box;
	}

.cms-content li,
.cms-content p { margin-bottom: 1em; }

.cms-content li:last-child,
.cms-content p:last-child { margin-bottom: 0; }


.display-none { display:none !important; }

:is(#divTwo,#divMain) h2, .cms-content > .content h2 {
	color: #0000cd;
	font-size: 1.6rem;
	margin-bottom: 0.5em;
	}

:is(#divTwo,#divMain) h3, .cms-content > .content h3 {
	font-weight: bold;
	color: #0076d6;
	font-size: 1.3rem;
	}

aside h2 {
	font-size: 1.2em;
	text-wrap: balance;
	text-align: center;
	margin-bottom: .5em;
	}

aside h3 {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: .25em;
	}

:is(h1,h2,h3) a:is(:link,:visited) {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
	text-decoration: underline;
	}

.notices > ul {
	list-style: none;
	margin-left: 0;
	}

/* layout (mostly) */
/* Adding in #divMain as synonym for #divTwo */
#divContainer {
	display: flex;
	gap: 2em;
}

.banner + #divContainer :is(#divMain, #divMain + aside),
.banner + #divContainer :is(#divTwo, #divTwo + aside)
{ padding-top: 1em; }

#divOne {
	background-color: #dbecf9; /*#f0f0ff;*/
	flex: 0 0 15%;
	padding: 2em 1em;
}

#divMain,
#divTwo {
	background-color: white;
	flex: 1 1 100%;
}

#divMain, #divMain + aside,
#divTwo, #divTwo + aside {
	font-size: 1.1em;
	
	}

#divMain + aside,
#divTwo + aside {
	flex: 1 0 240px;
	}

/* these are new. As alternative to the div-half and related */
.flex-container,
.flex-container-equal {
	display: flex;
	gap: 1em;
	justify-content: space-between;
	align-items: start;
	}

/* this basically works to make any column/whatever equal size, if they are all set to this class */
.flex-container-equal > *,
.flex-half {
	flex: 1;
	}


/* if the aside has an image as first item in it */
#divMain + aside img:first-child,
#divTwo + aside img:first-child {
	max-width: 100%;
	margin-bottom: 1em;
	display: block;
	}

#divMain + aside hr,
#divTwo + aside hr {
	margin: 1em 0;
	height: 0;
	border: none;
	border-top: 1px solid #999;
	}


.banner {
	background-color: #0076d6;
	padding: 2rem 0;
	text-align: center;
	font-size: 2em;
	color: #fff;
	font-weight: bold;
	}


.bannernotes {
	list-style: none;
	margin: 0 0 .5rem;
	text-align: center;
	font-size:1.1em;
	line-height: 1.5;
	font-weight:bold;
	padding: 0;
	}

.bannernotes li {
	padding:0.75rem;
	margin:0 0 2px !important;
	background-color: #d3ebfe;
	}

.bannernotes li:nth-child(even) { background-color:#e2f2fe; }


#topics_nav h2 {
	margin-top: 1em;
	text-align: center;
	line-height: 30px;
	background-color: #0076d6;
	color:#fff;
	}

#topics_nav ul {
	box-shadow: rgba(0, 0, 0, 0.23) 0px 1px 2px;
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin: 0 0 1em;
	padding: 1em;
  	box-sizing: border-box;
  	list-style: none;
	font-weight: bold;
	
	}

	#topics_nav ul li {
		margin: 0;
		}

#topic_description {
	width: 100%;
	table-layout: fixed;
	}
	
	#topic_description > thead {
		background-color: #ccebff;
		text-align: center;
		font-size:1.3em;
		}

		#topic_description > thead > tr > th {
			padding: 6px 0;
			border: 1px solid #999;
			}

	#topic_description > tbody > tr:nth-of-type(2n) { background: #f6f6f6; }

	#topic_description > tbody > tr > th { font-size: 1.3em; }

	#topic_description td { word-wrap: break-word; }

	#topic_description > tbody > tr > :is(th, td) {
		padding: 1em;
		border: 1px solid #999;
		}

/* details dropdowns */

.cms-content ul:has(li > details),
.cms-content ol:has(li > details) {
	list-style:none;
	margin: 0;
	}

	.cms-content li:has(> details) { margin: 0; }


	details { margin: 0 0 .5em 1em; }

	details[open] { margin-bottom: 1em; }

		details[open] summary { margin-bottom: .5em; }

	summary {
		text-indent: -1em;
		cursor: pointer;
		}

		li summary { font-weight: bold; }

		summary h3 { display: inline; }



.button {
	background-color: #d1d3ff;
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 20px;
	margin-bottom: 1em;
	font-size: 1.1em;
	font-weight: bold;
	border: none;
	border-radius: 7px;
	text-decoration: none;
	text-align: center;
	color: #000;
	cursor: pointer;
	}

.button:link { color: #000; }
.button:hover {
	color: #030;
	background-color: #eef;
	}

.button1 {
	background-color: #fcf803;
	border: none;
	border-radius: 7px;
	color: #000;
	cursor: pointer;
	display: inline-block;
	font-size: 1.2em;
	font-weight: 600;
	line-height: 1.2;
	padding: 1em 1.2em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	}

.button1:active,
.button1:hover { box-shadow: 0 0 3px 2px rgba(0,0,0,.3); }

.button1:focus { outline: none; }

.button1:disabled {
	background-color: #eee;
	color: rgba(255, 255, 255, .8);
	cursor: default;
	}




.button-three {
	background-color: #ddd;
	border: 1px solid #aaa;
	border-radius: 8px;
	display: block;
	padding: 1em 0.5em;
	width: 100%;
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: none;
	color: #000;
	text-align: center;
	transition-duration: 0.4s;
	}

.button-three:link, .button-three:visited { color: #000; }

.button-three:hover{
	background:#fff;
	box-shadow:0px 2px 10px 5px ligthblue;
	color:#000;
	}

/* *** Back to Top button *** */
#back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: block;
	background-color: #007bff;
	color: white;
	border: none;
	padding: 0;
	font-size: 2em;
	border-radius: 50%;
	cursor: pointer;
	transition: opacity 0.3s;
	aspect-ratio: 1;
	line-height: 1.7;
	width: 2em;
	text-decoration: none;
	text-align: center;
	}

	#back-to-top:hover { background-color: #0056b3; }


#divContainer dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0 .5em;
	}

#divContainer dt { font-weight: bold; text-align: right; }

/* ************ weatherstyle.css and template.css override ************ */
	.cms-content { margin: 1rem 0; }

	html .full-width-border {
		width: 100%;
		float: none;
		border: none;
		}

	ul#subMenuNav .sub ul li:last-child { border: none; }

	h2, h3 { line-height: 1.3; }
	ul {
		margin: 0 0 0 2em;
		padding-bottom: 1em;
		}

	.div-full { float: none; }

/* Possibly not in use */
/*
.container {
	margin: auto;
	width: 95%;
	padding: 10px;
	}
*/

/* media queries don't work, so this uses a workaround in the dsb.common.js */
.small_screen #topics_nav ul {
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
	}

.small_screen .cms-content {
	font-size: 1.7em;
	}

.small_screen #topic_description { font-size: .8em; }

.small_screen #divContainer { gap: 1em; }

.small_screen #back-to-top { font-size: 3em; }

/*  

.small_screen #divContainer {
	display: block;
	max-width: 98vw;
  	margin-left: 1vw;
  	margin-right: 1vw;
  	}


.small_screen #topic_description {
	max-width: 100%;
	border: 1px solid #000;
	}

.small_screen #topic_description :is(th,td) { border-width: 1px 0; }

.small_screen #divMain + aside { margin-top: 1em; }

.small_screen #divMain + aside img:first-child,
.small_screen #divTwo + aside img:first-child {
  	margin-left: auto;
  	margin-right: auto;
  	}
*/
/*
@media (max-width:1000px)
{
#divContainer { background: #f00; }
}
@media (max-width:768px)
{
#divContainer { background: #0f0; }
}
*/