/*
 * *********
 * Local CSS
 * *********
 */
 
 /* Insert local CSS into this file.*/

/* *************
 * header styles
 * *************/
 
#mainNav a
	{
		vertical-align: middle;
		text-align: center;
		border-radius: 6px;
		margin: 4px;
		padding: 2px ;
		width: 150px;
		height: 40px;
		line-height: 24px;
		color: #374269;
		background-color: white;
		text-decoration: none;
		transition: background-color 0.3s ease;
		transition: box-shadow 0.3s ease;
	}
	
	
		.Nav_onClick
		{
			position: relative;
			vertical-align: middle;
			width:170px;
			height: 45px;
			border: 0;
			margin-top: 5px;
			margin-bottom: 5px;
			border-right-style: solid;
			font-size: 20px;
			font: inherit;
			color: #374269;
			background-color: white;		
			transition:all 0.3s ease;
			cursor: pointer;
		
		}
	
	
.Nav_hasSubMenu
	
	{
		position: relative;
		vertical-align: middle;
		width:170px;
		height: 45px;
		border: 0;
		margin-top: 5px;
		margin-bottom: 5px;
		border-right-style: solid;
		font-size: 20px;
		font: inherit;
		color: #374269;
		background-color: white;
		transition:all 0.3s ease;
		cursor: pointer;
	}


		.Nav_hasSubMenu:hover
			{
				background-color: #374269;
				color: #f5fffaa8;
			}


		.Nav_hasSubMenu ul
			{
				display: none;
				position: absolute;    /* Required so that this element stays fixed below the parent */
				top: 40px;             /* Vertical offset from the top of the parent */
				left: 0px;             /* Horizontal offset from the left of parent */
				z-index: 100000;       /* Display on top of everything else */
				width: 170px;           /* Match the width of the parent (optional) */
				background-color: white;
				color: black;
				padding: 0px;			
				text-align: left;
				border-bottom-width:5px;
				border-bottom-style: solid;
				border-bottom-color: #374269;		
			}

		.Nav_hasSubMenu ul li

			{ 	padding: 5px;				
			}
		
			.Nav_hasSubMenu ul li:hover
				{				
					color: #80a509;
					border-left-style:solid;
					border-left-width: 5px				
				}


/* ******************************************
 * mainPageContent and commentsContent styles
 * ******************************************/

#mainPageContent a, #commentsContent a
{
	color: #374269;
	font-weight: 700;
}

h2
{
  color: #374269;
	font-size: 50px;
	font-size: 300%;
	text-transform: uppercase;
	padding: 2px;
	padding-left:0px;
	margin: 5px;
	margin-left: 0px
	
}

	
h3
{
  color: #374269;
	font-size: 35px;
	font-weight: bold;
	padding-left:0px;
	line-height:130%;
	margin-bottom: 8px;

	
}

h4

{
    /* color: rgb( 144,187,39 );*/
  color: #3c5000;
	font-size: 26px;
	font-weight: bold;
	line-height:130%;
	padding: 2px;
	margin-bottom: 8px

}

h5

{
	/* color: rgb( 144,187,39 ); */
  color: #3c5000;
	font-size: 26px;
	font-weight: normal;
	line-height:normal;
	margin-bottom:8px;
	padding: 2px;
	
}

h6

{
	/* color: rgb( 144,187,39 ); */
  color: #374269;
	font-size: 18px;
	font-weight: bold;
	line-height:30px;
	margin-bottom: 3px;
	padding: 0px;
	
}

#mainPageContent ul, #commentsContent ul

	{
		line-height: 150%
	}
	
#mainPageContent input, #mainPageContent textarea, #mainPageContent select, #mainPageContent button,
#commentsContent input, #commentsContent textarea, #commentsContent select, #commentsContent button , #button2 , #button3
{	
	color: #000000;
	text-align: left;
	border-radius: 0px;
	cursor: pointer
}


#mainPageContent button, #commentsContent button
	{
		width: 100%;
		color: #ffffff;
		background-color: #3c5000;
		font-weight: normal;
		text-align: center;
		text-transform: uppercase;
		box-shadow: 5px 5px 5px #4d4d4e;				
	}
	
	#mainPageContent button:active, #commentsContent button:active
		{
			background-color: #99a3ca;
		}
		
		
		.button2

			{	display: inline-flex;
				width: 100%;
				color: #FFFFFF;
				/* background-color: #91bb27;  */
				background-color: #627F06; 
				font-weight: normal;
				justify-content: center;
				align-items: center;
				text-align: center;
				margin-left: auto;
				margin-right: auto;				
				border: none;
				font-size: 26px;
				height: 80px;
				line-height: 1;
				box-shadow: 5px 5px 5px #4d4d4e;
				padding: 10px;
				transition: background-color 0.3s;
				cursor: pointer;
				margin-bottom: 10px;
		
			}
	
				.button2:hover
	
					{
						opacity: 0.3
					}
	

	
	.button2:active
		{
			background-color: #2a6f43;
		}
	
	
.button3

	{ 	display: block;
		width: 50%;
		color: white;
		color: white;
		background-color: #522a4d;
		font-weight: normal;
		text-align: center;
		padding: 30px;
		border: none;
		font-size: 15px;
		height: 60px;
		line-height: 1.5;
		margin-left:auto;
		margin-right:auto;
		cursor: pointer
	}
	
	.button3:active
		{
			background-color: #99a3ca
		}
		
		.button3:hover	
		{
			opacity: 0.6
		}

.button-container {
  display: flex;
	flex-wrap: wrap;
  justify-content: center; 
}		

.boxed {
	background-color: #cddb9d ;
	width: 100%;
	height: 100%;
	padding: 15px ;
	display: inline-block;
	margin: 1%;
	transition: background-color 0.3s;
	cursor: pointer;		
}
	
.boxed:hover {
	opacity: 0.6
}

.boxed:active {
	background-color: darkseagreen;
}		

/* Card styles. */
.card-container {
	display: flex;
	flex-wrap: wrap;
}

.same-height {
	display: flex;
}

.card {
	width: 100%;
	background-color: #d2d7e8;
	box-shadow: 5px 5px 5px #4d4d4e;
	display: inline-block;
	/* margin:12px; */
	margin:12px 0px 12px 0px;

}
	
.card:hover {
	opacity: 0.6;
	cursor: pointer;
}
	
.card-txt {
	text-align: left;
	background-color: #d2d7e8;
	padding: 12px;
	height: auto;
}

.card img {
	width: 100%;
}

.card-txt p {
	margin-bottom: 2px; 
	margin-top: 0; 
	color: black; 
	padding-top: 0; 
	font-size: small;	
}

.card-txt h5 {
	margin-bottom: 2px; 
	margin-top: 0; 
	color:#374269; 
	padding-top:0; 
	font-size: xx-large;
	line-height: 30px;
}

.card-txt h6 {
	margin-bottom: 2px; 
	margin-top: 0; 
	color:#374269; 
	padding-top:0; 
}

.card-txt .emphasis {
	font-style: italic;
}
	
.card2 {
	width: 100%;
	background-color: #d2d7e8;
	box-shadow: 5px 5px 5px #4d4d4e;
	display: inline-block;
	margin:12px;	
}
	
.card2:hover{
	opacity: 0.6;
	cursor: pointer;
}
	
.card2-txt {
	text-align: left;
	background-color: #d2d7e8;
	height: auto;
	padding: 12px;	
}
	
.card3-txt {
	text-align: left;
	background-color: #d2d7e8;
	height: auto;
	padding: 12px;	
}
	
/* Classes to allow cards to function as standard links */	
.card-link-container {
	position: relative; 
}
				
.card-link {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
}

.card-link-container a[target="_blank"]::after {
	content: None;
}	
	
.newsThumbnail
	{
		display: block;
		margin-bottom: 24px;
		width: 254px;
		height: 220px;
		background-color: #99a3ca;
	}

	.leftAlignedThumb
		{
			float: left;
			margin-right: 24px;
		}

		.rightAlignedThumb
		{
			float: right;
			margin-left: 24px;
		}
		
		
		.smallImage
	{
		display: block;
		margin-bottom: 24px;
		width: 400px;
		height: 220px;
		background-color: #99a3ca;
	}
	
	.bannerImage
	{
		display: block;
		margin-bottom: 24px;
		width:700px;
		height: 320px;
		margin: auto;
		background-color: rgb( 153,163,202 );
		
	}

	.leftAlignedSmall
		{
			float: left;
			margin-right: 24px;
		}

		.rightAlignedSmall
		{
			float: right;
			margin-left: 24px;
		}

div.a {
  line-height: 80%;
}


@media only screen and (max-width: 1150px)
{
	#mainNav
	{
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

@media only screen and (max-width: 800px)
	{
		#mainNav
		{
			max-width: 470px;
		}
		
		.button2
		{
			margin-bottom: 20px;
		}
	}
	
	
@media only screen and (max-width: 600px)
	{
		.rightAlignText
			{
				text-align: left;
			}

		.leftAlignedThumb, .rightAlignedThumb
			{
				float: none;
				margin-right: 0px;
				margin-left: 0px;
				width: 100%;
			}
	}

#footerWrapper {
	background-color: #374269;
}

#userControlsPanel {
	background-color: #d2d7e8;
	color: black;
		
}

#userControlsPanel button {
  background-color: #ffffff;
	color: black;
}

#userControlsPanel button:hover
			{
				background-color: #ddd;
				color: black;
				
			}
			
			
#notificationWrapper
{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	background-color: rgba (144,187,39,0.5);
	z-index: 100000;
}

/* The handle for the loading bar’s default colour is. */ 

#notificationWrapper {
    background-color: rgba(128,165,9,0.7);
}

/* The handle for the error colour is. */ 

.notificationError {
    background-color: #ab3b37cc !important;
}

/* KPM additions... */
/* Add 'new tab' arrow icon after external links */
a[target="_blank"]::after {
  content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
  margin: 0px 3px 0px 5px;
}

/* High-contrast link styles for template footer */
#footerContent a:link {
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
}

#footerContent a:visited {
  color: #ffffff;
  background-color: transparent;
  text-decoration: none;
}

#footerContent a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

#footerContent a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

#footerContent a[target="_blank"]::after {
  content: "";
}

/* Horizontal section divider */
.sectionDiv {
	margin-bottom: 5px; 
	margin-top: 5px; 
	border-top: 5px solid rgb( 153,163,202 );
}

/* Flex box */
* {
  box-sizing: border-box;
}

/* Container for flexboxes */
.flexrow {
  display: flex;
  flex-wrap: wrap;
}

.flexcolumn {
  flex: 20%;
  padding: 20px;
  background-color: #e6edce ;
  margin: 5px;
  cursor: pointer;
  box-shadow: 5px 5px 5px #4d4d4e;
}

.flexcolumn:hover {
	opacity: 0.6;
}

.flexcolumn:active {
	background-color: darkseagreen;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .flexcolumn {
    flex: 40%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .flexrow {
    flex-direction: column;
  }
}

.flexcolumnClear {
  flex: 20%;
  padding: 5px;
  margin: 5px;
}

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .flexcolumnClear {
    flex: 40%;
  }
}

		
/* Formatted table */
.formatTable {
  border-collapse: collapse;
  width: 100%;
}

.formatTable td, .formatTable th {
  border: 1px solid #ddd;
  padding: 8px;
}

.formatTable tr:nth-child(even){background-color: #f2f2f2;}

.formatTable tr:hover {background-color: #ddd;}

.formatTable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: darkgreen;
  color: white;
} 

/* Reduced-size header fonts for mobile screens */
@media only screen and (max-width: 600px) {
  h2 {
	font-size: 35px;
  }
}

/* Style applied to paragraphs to prevent wrapping images */
.noWrap p {
	overflow: hidden; 
}

/* Style applied to paragraphs to prevent wrapping images */
.noWrap p {
	overflow: hidden; 
}

/* Handle header RECORD logo sizing */
.headerLogo img {
  width: 120px;
	padding-top: 15px;
}

#mainPageContent input[type=checkbox]
{
	display: inline-block;
	vertical-align: top;
	margin: 0px;
	margin-left: 3px;
	margin-right: 3px;
	width: 20px;
	height: 20px;
}

/* New menu */
.topnav {
  overflow: hidden;
  background-color: rgba(51,51,51, 0.5);
	width: 100%;
	margin: 0 auto;
}

.sectionContent:has(.topnav) {
	padding: 0;
}

.sectionContent i {
	font-style: italic;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
	line-height: 20.4px;
}

.active {
  background-color: #04AA6D;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}
	
.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
		position: relative; 
		background-color: rgba(51,51,51);
	}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
		float: none;
	}
  .topnav.responsive .dropdown-content {
		position: relative;
		display: none;
	}
	.show {
		display: block !important;
	}	
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* Google Programmable Search Engine styling */
.search-button {
	background-color: rgba(51,51,51, 0.7); 
	border-radius: 2px;
	border: 0;
	color: white; 
	width: 40px; 
	height: 40px; 
	position: absolute; 
	top: 95px; 
	right: 30px;
}

.search-button:hover {
	background-color: #555;
}

.gsc-control-searchbox-only {
	display: none;
}
	
.gsc-input table {
		margin: 0;
}
	
.gsc-control-searchbox-only {
	display: none;
	background-color: rgba(0,0,0,0.0);
	padding: 10px;
}
		
.gsc-search-box tr {
	background-color: rgba(0,0,0,0.0);
}

.gsib_a {
	background-color: white;
	padding: 2px 2px 2px 2px;
}

.gsib_b {
	background-color: white;
}

.gcsc-find-more-on-google {
	display: none !important;
}