/*2022-09-08
index.html uses two css files exclusively:
index2.css
titleandnavindex.css (this file)
Do not make any changes without talking to Adrian or Jordan.*/

*{/*Reset styles, this helps set default values for the page.*/
	border: 0;
	font-size:100%;
	margin: 0 auto;/*leave horizontal alignment up to the body (center align by default)*/
	padding: 0;
	font-weight:normal;
}

body, html { overflow-x:hidden; }

body {
	background-color: #507C77;/*This is the teal green on either side of the content pane. Was #3c756e.*/
	font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	min-height: 1080px;/*This ensures that the page content is at least as tall as the window or taller.*/
}

#TitleAndNav {
	background-repeat:repeat-x;
	margin:0 auto;/*leave horizontal alignment up to the body (center align by default)*/
	text-align:center;
	width:100%;
}

#TitleAndNav .TitleAndSocial {
	align-content:center;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	margin:0 auto;
	max-width:62rem;
}

#TitleAndNav .TitleAndSocial .Social a{
	vertical-align: middle;
	width: 24px;
	height: 24px;
	display: inline-block;
	margin-top: 0px;
	text-align:right;
	margin:0 5px 0 0;
}

#TitleAndNav .TitleAndSocial .Social a:last-of-type{
	margin:0;/*only add left and right margin for middle links*/
}

#TitleAndNav .TitleAndSocial .Title {
	vertical-align:middle;
	white-space:nowrap;
	text-align:left;
	height:75px;
	width: 230px;
	display:inline-block;
}
	
#TitleAndNav .TitleAndSocial .Title img {/*Logo*/
	vertical-align:middle;
	white-space:nowrap;
	margin-bottom:-13px;
	padding-top:2px;
}

#TitleAndNav .TitleAndSocial .Title h1{/*Used to put text in the title bar at the top when there are words.*/
	font-size: 24pt;
	color:#223c45;/*Color of heading in Navigation bar.*/
	line-height:50px;
	height:50px;
}

#TitleAndNav .TitleAndSocial .Title h2{
	font-size: 12pt;
	color:#223c45;/*Color of heading in Navigation bar.*/
	line-height:20px;
	margin-top:-10px;
}

#TitleAndNav .TitleAndSocial .socialAndPhone {
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:right;
}

#TitleAndNav .TitleAndSocial .socialAndPhone .phoneWrapper {
	/*display: inline-block;*/
	text-align: right;
}

#TitleAndNav .TitleAndSocial .socialAndPhone .phone {
	margin: 0;
    width: 150px;
    margin-left: auto;
    background: url(../images/phone32_Green.png) no-repeat top left;
	background-size:26px;
    height: 26px;
    line-height: 26px;
	font-size:20px;
}

#TitleAndNav .TitleAndSocial .socialAndPhone .phoneLink {
	color: #0b0e3b;
	text-decoration:none;
}


#TitleAndNav .TitleAndSocial .Social {
	display:inline-block;
	text-align:right;
	min-width:82px;
	padding-left: 12px;
}

#TitleAndNav .TitleAndSocial a.blog{
	background:url('../images/logos/blog24.png') no-repeat;
	background-size: cover;
}

#TitleAndNav .TitleAndSocial a.facebook{
	background:url('../images/logos/facebook24.png') no-repeat;
	background-size: cover;
}

#TitleAndNav .TitleAndSocial a.twitter{
	background:url('../images/logos/twitter24.png') no-repeat;
	background-size: cover;
}

#TitleAndNav .TitleAndSocial a.youtube{
	background:url('../images/logos/youtube24.png') no-repeat;
	background-size: cover;
}

#TitleAndNav .navWrapper {
	height:30px;
	width:100%;
	background-color: #466271;
}

#TitleAndNav nav {
	display:inline-block;
	font-size:10.5pt;
	margin:0;
	max-width:62rem;
	padding-top:0px;
	width:100%;
}

#TitleAndNav nav .menu-icon {
	display: none;
	width: 40px;
	height: 30px;
	position: relative;
}

#TitleAndNav .searchBarWrapper {
	display: none;
	float:right;
}

#TitleAndNav .searchBarWrapper input {
	display:inline-block;
	color:white;
	height:21px;
	font-size:14px;
	padding-left:7px;
	vertical-align:super;
	background-color:#354c58;
	border-radius: 3px;
	border: 1px solid transparent;
	border-top: none;
	border-bottom: 1px solid #354c58;
	box-shadow: inset 0 1px 1px rgba(0,0,0,.40), 0 -1px 1px #354c58, 0 1px 0 #354c58;
}

#TitleAndNav .searchBarWrapper a.searchButton {
	display:inline-block;
}

#TitleAndNav .searchBarWrapper a.searchButton img.menuIcon {
	position:relative;
	left:-2px;
	bottom:-2px;
}

#TitleAndNav nav .menu-icon span:before, .menu-icon span:after, .menu-icon span {
	background-color: #fff;
    border-radius: 3px;
    display: block;
    height: 3px;
    width: 24px;
}

#TitleAndNav nav .menu-icon span {
	color: transparent;
    font: 0/0 a;
    text-shadow: none;
	margin: 0 auto;
    position: relative;
    top: 14px;
}

#TitleAndNav nav .menu-icon span:before {
	content: '';
	position: absolute;
    margin-top: -7px;
}

#TitleAndNav nav .menu-icon span:after {
	content: '';
	position: absolute;
    margin-top: 7px;
}

a:hover.menu-icon {
	background-color: #c7d7e0;
}
	
#TitleAndNav nav ul {
	margin:0 auto;
	max-width:73rem;
}

#TitleAndNav nav li {
	display: inline; 
}

#TitleAndNav nav ul.dropDownMenu {
	display: none;
	position: absolute;
	padding: 4px;
	border: 1px solid #3c756e;
	max-width: 300px;
	min-width: 200px;
	z-index: 1;/*Must be greater than 0 to win any ties with other relative/absolutely positioned divs.*/
	background: #c7d7e0;
}

#TitleAndNav nav ul.dropDownMenu a.dropDownItem:link,
#TitleAndNav nav ul.dropDownMenu a.dropDownItem:visited {
	color: #466271;
	border:none;
	width:85%;
	text-align: left;
}

#TitleAndNav nav ul.dropDownMenu a.dropDownItem:hover {
	background: #c5c9dc !important;
}

#TitleAndNav .navItem:hover ~ ul,
#TitleAndNav .navItem ~ ul:hover {
	display:block;
}

#TitleAndNav nav ul.dropDownMenu li {
	display:block;
}
			
#TitleAndNav nav a.navItem:link, 
#TitleAndNav nav a.navItem:visited,
#TitleAndNav nav a.dropDownItem:link, 
#TitleAndNav nav a.dropDownItem:visited {/*padding must be here to make it look like buttons.*/
	border: 1px solid #466271;
	color: #FFFFFF;/*#c7d7e0;*/
	white-space:nowrap;
	display: inline-block; /*Menu item take up full height of menu bar.*/
	line-height:28px; /*vertical-align text this way.*/
	padding: 0px 2px;
	text-decoration: none; /*remove underline from links*/
	width:11%;/*necessary for nav item resizing*/
}
	
#TitleAndNav nav a.navItem:visited {/*This is needed because Edge renders the background color of the element the same color as the forecolor*/
	background-color: #466271;
}
	
	
#TitleAndNav nav a.navItem:hover, 
#TitleAndNav nav a.navItem:active,
#TitleAndNav nav .active a.navItem:link, 
#TitleAndNav nav .active a.navItem:visited
#TitleAndNav nav a.navItem.open, 
#TitleAndNav nav a.navItem.open {
	background-color: #c7d7e0 !important;
	color: #466271;/* OD hover over text color*/
	text-shadow: none !important;
}
	
#TitleAndNav nav li:first-child a.navItem {
}
	
#TitleAndNav nav a.navItem .menuIcon {
	height:21px;
	width:27px;
	position:relative;
	left:0px;
	bottom:-2px;
	vertical-align:text-bottom;
}

@media only screen and (max-width: 768px) {
	#TitleAndNav nav .menu-icon {
		display:inline-block;
	}
	
	#TitleAndNav .searchBarWrapper {
		display:inline-block;
	}
	
	#TitleAndNav nav {
		width: 40px;
		float: left;
	}

	#TitleAndNav nav ul, #TitleAndNav  nav:active ul { 
		display: none;
		position: absolute;
		padding: 4px;
		border: 2px solid #444;
		width: 50%;
		max-width: 300px;
		min-width: 200px;
		border-radius: 4px 0 4px 4px;
		z-index: 1;/*Must be greater than 0 to win any ties with other relative/absolutely positioned divs.*/
	}

	#TitleAndNav .navItem:hover ~ ul,
	#TitleAndNav .navItem ~ ul:hover {
		display:none;
	}

	#TitleAndNav nav li {
		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;
	}

	#TitleAndNav nav a.open ~ ul{/*~ in this context means find a ul on the same level as a.open (sibling)*/
		display: block;
	}
	
	#TitleAndNav nav a.navItem:link, 
	#TitleAndNav nav a.navItem:visited {
		background-color:#466271;
		color: #FFFFFF;
		white-space:nowrap;
		display: block;
		line-height:40px;
		width:98%;
	}
	
	#TitleAndNav nav ul {
		background-color:#466271;
	}
}

@media only screen and (max-width: 480px) {
	#TitleAndNav .TitleAndSocial {
		align-content: center;
	}
	
	#TitleAndNav .TitleAndSocial {
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */
		display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
		flex-direction: column;
		-ms-align-items: center;
		align-items: center;
	}
	
	#TitleAndNav .TitleAndSocial {
		display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
		display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
		display: -ms-flexbox;      /* TWEENER - IE 10 */
		display: -webkit-flex;     /* NEW - Chrome */
		display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
		flex-direction: column;
		-ms-align-items: center;
		align-items: center;
	}
	
	#TitleAndNav .TitleAndSocial .Title {
/*		height:auto;*/
		widows: auto;
		max-width: 75%;
		max-height: 75%;
		text-align: center;
	}
	
	#TitleAndNav .TitleAndSocial .socialAndPhone {
		width:auto;
		padding: 5px;
		text-align: center;
	}
	
	#TitleAndNav .TitleAndSocial .socialAndPhone .phoneWrapper {
		width: auto;
		text-align: center;
	}
	
	#TitleAndNav .TitleAndSocial .socialAndPhone .phone {
		font-size: 16px;
	}
	
	#TitleAndNav .TitleAndSocial .socialAndPhone .Social {
		text-align: center;
		padding-left: 0;
	}
	
	#TitleAndNav .TitleAndSocial a.blog{
		width:20px;
		height:20px;
	}

	#TitleAndNav .TitleAndSocial a.facebook{
		width:20px;
		height:20px;
	}

	#TitleAndNav .TitleAndSocial a.twitter{
		width:20px;
		height:20px;
	}

	#TitleAndNav .TitleAndSocial a.youtube{
		width:20px;
		height:20px;
	}
}

@media only screen and (max-width: 335px) {
	#TitleAndNav .TitleAndSocial {
		padding-bottom:5px;
	}
	
	#TitleAndNav .TitleAndSocial .Social {
		display:block;	
		width:inherit;
		margin-right: 5px;
	}
}