html, body {
	font-family: Calibri, Arial, sans-serif !important;
	margin: 0;
	min-height: 100% !important;
	height: 100%;
}
a{
	color: #004fa5;
	text-decoration: underline;
}
#content h1,
#content h2,
#content h3,
.sitename a h1{
	//font-family: 'Maven Pro', sans-serif;
	font-weight: bold;
}
#navbarSupportedContent {
	width: 100%;
}

#navbarSupportedContent1 {
	width: 100%;
}

.sitename .shortname {
	display: none;
}
img#sitelogo {
	max-height: 100px;
}
p {
	font-size: inherit;
	line-height: 1.7em;
}
dl , ol, ul {
	line-height: 1.5;
}
header a,
header a:hover,
header a:focus,
footer a,
footer a:hover,
footer a:focus {
	text-decoration: none;
	transition: all 0.3s;
}
#content a:hover, a:focus{
	text-decoration: underline;
}
#content h1 {
	margin: 20px auto;
}
header{
	background: linear-gradient(0deg, rgb(0, 43, 255), rgb(40, 103, 187));
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}
section#content{
	min-height: 75vh;
	margin: 20px 10px;
	line-height: 1;
}
footer {
	background: #04385f;
	font-size: .8rem;
	height: 10vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 210px;
}
footer a{
	color: #33c6f3;
}
nav.navbar {
	align-items: baseline;
	justify-content: center;
	padding: 0;
	margin: 5px 0 0 0;
}
.collapse.navbar-collapse {
	flex-grow: unset;
	flex-direction: column;
	align-items: stretch;
}
.sitename .fullname,
.sitename .shortname{
	text-shadow: 0 2px 2px #2b2b2b;
	color: white;
}
.sitename .shortname{
	margin: 0 20px;
}
.sitename .fullname a{
	font-size: 2rem;
}
.sitename a{
	color: #ffffff;
}
div.container.d-flex div,
#secondarynav a.nav-link{
	color: #ffffff;
	text-shadow: 0 1px 3px #000000;
	text-align: center;
}
div.container.d-flex div a:hover,
#primarynav a.nav-link:hover,
#secondarynav a.nav-link:hover,
footer a:hover,
footer div.footer-nav a:hover,
a#searchtoggle.btn.btn-info:hover,
div.sitename h1:hover{
	color: #0ea904;
}
div.p-2.bd-highlight a,
#primarynav a.nav-link,
a#searchtoggle.btn.btn-info{
	color: #ffffff;
	text-shadow: 0 2px 2px #000000;
	border-radius: 20px;
	text-align: center;
}
div.p-2.bd-highlight a,
#primarynav {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	font-size: .8rem;
}
#secondarynav {
	background: linear-gradient(360deg, #003b73, #023890);
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;
	justify-content: space-evenly;
	align-items: center;
	padding: .4rem 1rem;
	font-size: .8rem;
}
ul#secondarynav.membernav {
	background: linear-gradient(360deg, #006923, #187134);
}
.toptitle{
	text-align: center;
	display: flex;
}
.coat {
	height: 60px;
}
nav.navbar div.row{
	justify-content: center;
	align-items: center;
}
a.nav-link {
	padding: 0;
	margin: auto
}
body div#wrapper {
	min-height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
body div#wrapper::before, body div#wrapper::after {
	content: none;
}
div.container.d-flex div a{
	text-shadow: none;
}
div.p-2.bd-highlight a {
	padding: 0 1rem;
	display: flex;
}
a#searchtoggle.btn.btn-info {
	padding: 0 5px;
	background-color: transparent;
	border-color: white;
}
.tablebox {background-color: #efefef;margin-left: auto;margin-right: auto;}
.tableheader {background-color: #C3CDDA}
p.tableheader {background: none;}
.tablebox td {padding: 0 10px;}
.breadcrumb {
	background: none; 
	font-size: small; 
	padding: 0;
	margin: 0;
	color: #004fa5;
	min-height: 5vh;
}
.breadcrumb a {margin: 0 4px;}
.center {margin-left:auto;margin-right:auto;}
.tablebox ul li, .tablebox ul ul, .tablebox td p {text-align:left; margin: 2px 10px;}
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 992px) {
	#masternav {
		height: 50px;
	}	
	img#sitelogo {
		max-height:50px;
	}
	.toptitle{
		display: contents;
	}
	#primarynav {
		display: list-item;
    text-align: center;
	}
	#secondarynav {
		background: transparent;
		border: 0;
		padding: 0;
		margin: 0;
		display: block;
		text-align: center;		
	}
	a#searchtoggle.btn.btn-info.nav-link {
		background: transparent;
    padding: 0 5px;
	}
	a.nav-link {
		padding: 5px;
    border-top: 1px solid #9f9f9f;
	}
	.navbar-light .navbar-toggler{
		background: #ffffff;
		margin: 0 20px;
	}
	#primarynav a.nav-link,
	a#searchtoggle.btn.btn-info.nav-link {
    color: #f9fdff;
    text-shadow: 0 1px 3px #000000;
	}
	div.p-2.bd-highlight a,
	#primarynav a.nav-link,
	ul#secondarynav.membernav,
	a#searchtoggle.btn.btn-info{
		border-radius: inherit;
		background: none;
		border: none;
		border-top: 1px solid #9f9f9f;
	}
	nav.navbar>div.row.container {
		max-width: none;
	}
}

@media (max-width: 992px) {
	.coat {
		width: inherit;
	}
	.col-5{	
		min-width: 100%;
		margin: 0;
		padding: 0;
	}
}

@media (max-width: 700px) {
	.sitename .fullname {
		display: none;
	}
	.sitename .shortname {
		display: block;
	}
	#primarynav {
		font-size: small;
	}
	#primarynav li.nav-item{
		padding: 0 3px;
		text-align: center;
	}
	.p-2{
		padding: 0 !important;
	}		
	div.p-2.bd-highlight a{
		flex-direction: column-reverse;
		border: none;
		margin: 5px auto;
	}
}

/* ---------------------------------------------------
    SEARCH
----------------------------------------------------- */

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  margin-top: 30px;
  margin: auto;
}

.overlay-content h3 {
	color: #FFFFFF;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

/*-----------------------------------------------
		SEARCH STYLES
-----------------------------------------------*/

.gsc-control-cse
{
	padding:0px !important;
	border-width:0px !important;
}

form.gsc-search-box,table.gsc-search-box
{
	margin-bottom:0px !important;
}

.gsc-search-box .gsc-input
{
	padding:0px 4px 0px 6px !important;
	font-size: inherit;
}

#gsc-iw-id1
{
        height: auto !important;
        padding: 0px !important;
        border-width: 0px !important;
        box-shadow:none !important;
}

#gs_tti50
{
	padding:0px !important;
}

#gsc-i-id1
{
	height:33px !important;
	padding:0px !important;
	background:none !important;
	text-indent:0px !important;
}

.gsib_b
{
	display:none;
}

button.gsc-search-button
{
	display:block;
	width:13px !important;
	height:13px !important;
	border-width:0px !important;
	margin:0px !important;
	padding: 10px 6px 10px 13px !important;
	outline:none;
	cursor:pointer;
	box-shadow:none !important;
	box-sizing: content-box !important;
}

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

.gsc-control-cse,#gsc-iw-id1
{
	background-color:transparent !important;
}

#gsc-iw-id1
will be updated to →
#gsc-iw-id1,#gsc-iw-id2
#gs_tti50
will be updated to →
#gs_tti50,#gs_tti51
#gsc-i-id1
will be updated to →
#gsc-i-id1,#gsc-i-id2
Creating the first design

Below are the additional CSS rules for the first design

/* Changing placeholder color of search box */

#gsc-i-id1::-webkit-input-placeholder,
#gsc-i-id1:-ms-input-placeholder,
#gsc-i-id1::-moz-placeholder,
#gsc-i-id1:-moz-placeholder
{
	/* Firefox 4 - 18 */
	color: #FFF;
	opacity: 1;
}

/*-------------------------------------*/

#search-box
{
	margin: auto 0;
	background-color: #FFF;
	padding: 3px;
}

button.gsc-search-button
{
	background-color: transparent !important;
	border: unset;
}

button.gsc-search-button svg{
	padding: 0;
	fill: #000000;
}

/* SEARCH LOADER */

/* Center the loader */
.gsc-modal-background-image {
	background: url(/images/loading.gif),linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 64%);
	background-repeat: no-repeat, repeat;
	background-position: center;
	background-size: 10%;
}

div.gsc-adBlock,
div.gsc-adBlock *,
div.gcsc-more-maybe-branding-root,
div.gcsc-more-maybe-branding-root *{
	display: none;
}

/* ---------------------------------------------------
    SKIP TO CONTENT STYLE
----------------------------------------------------- */

.skipmain{
	clip:rect(1px,1px,1px,1px);
	position:absolute!important;
	height:1px;
	width:1px;
	overflow:hidden;
}
.skipmain:focus{
	text-align: center;
	background-color: yellow;
	box-shadow:0 0 2px 2px rgba(0,0,0,.6);
	clip:auto!important;
	color:#000000;
	display:block;
	font-size:1vw;
	height:auto;
	padding:15px 23px 14px;
	width:auto;
	z-index:100000;
}

/* ---------------------------------------------------
    SCREEN CONTRAST STYLE
----------------------------------------------------- */
.screencontrast *
{
	background: #000000 !important;
	color: #ffffff !important;
}
.screencontrast * a{
	color: yellowgreen !important;
}
.screencontrast * a:hover{
	color: black !important;
    background-color: yellow !important;
}
.screencontrast .navbar-toggler,
.screencontrast form.gsc-search-box,
.screencontrast header,
.screencontrast footer{
	border: 1px solid #ffffff;
}
.screencontrast .navbar-toggler,
.screencontrast .navbar-toggler-icon {
	background: #ffffff !important;
}
.screencontrast form.gsc-search-box * button.gsc-search-button svg {
	fill: #ffffff;
}
.screencontrast form.gsc-search-box *{
    background-color: inherit !important;
    color: inherit !important;
}