/*******************
** Document Level **
*******************/
html {
	height: 100%; /* Prevent Scroll Bars - (May have to set to 101%) */
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

*, *:before, *:after {
	margin: 0 0 0 0;
  	padding: 0 0 0 0;
	/* Affect every HTML element on the page */
  	/* Ensure that the padding and border are included in
  	the total width and height of the elements */
	box-sizing: border-box;
}

.row::after { /* Pseudo-element */
	content: "";
	clear: both;
	display: table;
}

.clearfix::after { /* Make a Div or Element grow as necessary to hold the img or text */
	content: "";
	clear: both;
	display: table;
}

/*****************
** Body Content **
*****************/
body, h1, h2, h3, h4, h5, h6, #header H1, #header H2, .main_item, .main_item p, .sidebar_item, #footer_content {
	font-family: "neue-haas-grotesk-display", "Neue Haas Grotesk Display Pro", Neue Haas Grotesk Display Pro, "Neue Haas Grotesk Text Pro", "Neue Haas Grotesk Text Pro", sans-serif;
	font-display: auto;
	font-size: 1.3em;
}

body {
	font-size: .95em; /* REF: 1em = 16px = allows for sizing in the browser */
	font-style: normal;
  	color: #8c8c8c;
  	background-color: #ffffff;
  	/* background: transparent url(../images/background_body.jpg) repeat; */
  	margin: 0 0 0 0;
}

body.testing {
	background: transparent url(../images/background_main.jpg) repeat;
	/* background-color: #ffffff */
}

/*************************
** Text / Image Content **
*************************/
p {
	margin: 0 0 0 0;
  	padding: 0 0 0 0;
  	line-height: 1.2em;
	color: #808080;
}

img {
	max-width: 100%; /* Make Sure img will shrink but not grow */
	height: auto;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	/* border: 1px solid red; */
}

.imgRight {
	float: right;
	border-radius: 2em;
}

.imgLeft {
	float: left;
	border-radius: 2em;
}

/*****************************************
** Format Header HTML Element Selectors **
*****************************************/
h1, h2, h3, h4, h5, h6 {
	font-size: 4.00em;
	font-family: inherit;
	font-style: normal;
	font-weight: bold;
  	color: #0000cc;
  	letter-spacing: -1px;
  	margin: 0 0 0 0;
  	padding: 0 0 0 0;
	text-align: center;
}

h2 {
	font-size: 3.00em;
  	color: #3e3e3e;
}

h3 {
	font-size: 1.50em;
  	color: #3e3e3e;
}

h4 {
	font-size: 1.25em;
	color: #595959;
  	line-height: 1.5em;
}

h5 {
	font-size: 1.00em;
	font-style: normal;
  	color: #8c8c8c;
}

h6 {
	font-weight: lighter;
	font-size: 0.90em;
	font-style: normal;
	color: #cc9966;
}

.welcome_msg_1 {
	font-size: 1.25em;
	font-style: normal;
	font-weight: bold;
  	color: #666666;
}

.welcome_msg_2 {
	font-size: 1.00em;
  	color: #808080;
}
/***********************
** Special Formatting **
***********************/
i.code1 {
	color: #404040;
	background-color: #cccccc;
	font-style: normal;
	font-family: monospace;
}

/***************************************
** Format Link HTML Element Selectors **
***************************************/
		/******************************************************
		*** Link State order rules							***
		*** 1. a:hover MUST come after a:link and a:visited ***
		*** 2. a:active MUST come after a:hover				***
		******************************************************/
a, a:hover {
	background: transparent;
  	outline: none;
  	text-decoration: underline;
  	color: #0033cc;
}

a:hover {
  	color: #1a53ff;
}

/******************
** Table Content **
******************/
table, th, td {
	border-width: 0px;
	border-color: #1a1a1a;
	border-style: solid;
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
	vertical-align: middle;
}

.tableMyAcct {
	align: center;
	width: 100%;
	margin: auto;
	font-size: 0.95em;
	float: left;
}

.tableMyAcct th {
    vertical-align: top;
    text-align: center;
	word-wrap: break-word;
}

.tableMyAcct td {
    vertical-align: top;
    text-align: left;
	padding-top: 0.1em;
    padding-right: 0.7em;
	word-wrap: break-word;
}

.tableMenu {
	align: center;
	width: 100%;
	margin: auto;
	font-size: 0.9em;
	float: left;
}

.tableMenu th {
    vertical-align: top;
    text-align: center;
	word-wrap: break-word;
}

.tableMenu td {
    vertical-align: top;
    text-align: center;
	word-wrap: break-word;
}

table.tableCoDir {
	width: 1300;
	border-width: 1.50px;
	border-color: #1a1a1a;
	border-style:  solid;
	border-collapse: collapse;
	vertical-align: middle;

}

.tableCoDir tr {
	border-width: 1px;
	border-color: #1a1a1a;
	border-style: solid;
	border-collapse: collapse;
    vertical-align: top;
    text-align: center;
	word-wrap: break-word;
}

.tableCoDir th {
	border-width: 0px;
	border-color: #1a1a1a;
	border-style: solid;
	border-collapse: collapse;
    vertical-align: top;
    text-align: center;
	word-wrap: break-word;
}

.tableCoDir td {
	border-width: 0px;
	border-color: #1a1a1a;
	border-style: solid;
	border-collapse: collapse;
    vertical-align: top;
    text-align: left;
    padding: 0.4em;
	word-wrap: break-word;
}

.tableRpt {
	width: 95%;
	margin: auto;
	background-color: #ffffff;
	color: #1a1a1a;
	font-size: 0.9em;
	border-width: 1px;
}

.tableRpt tr:nth-child(even) {
	background-color: #e6e6e6;
}

.tableRpt th {
	background-color: #009933;
	color: #ffd966;
    vertical-align: middle;
    text-align: center;
	border-width: 1px;
}

.tableRpt td {
    vertical-align: middle;
    text-align: center;
	border-width: 1px;
}

.tableDebug {
	table-layout: fixed;
	width: 95%;
	margin: auto;
	background-color: #ffcccc;
	font-size: 0.9em;
	border-width: 1px;
}

.tableDebug th {
    vertical-align: middle;
    text-align: left;
	border-width: 1px;
}

.tableDebug td {
    vertical-align: middle;
    text-align: left;
	border-width: 1px;
}

.tableGrid {
	width: 100%;
	margin: auto;
	font-size: 0.9em;
	border-width: 1px;
	color: #404040; /* Text Color */
	background-color: #e6e6e6; /* Dark */
}

.tableGrid tr:nth-child(even) {
	background-color: #f2f2f2; /* Light */
}

.tableGrid tr:hover {
	background-color: #d9d9d9; /* Hover Over */
}

.tableGrid th {
    vertical-align: middle;
    text-align: center;
	border-width: 1px;
}

.tableGrid td {
    vertical-align: middle;
    text-align: center;
	border-width: 1px;
}

.tableGridHeading {
	width: 100%;
	margin: auto;
	font-size: 0.9em;
	border-width: 1px;
	color: #262626; /* Text Color */
	background-color: #ccffdd; /* Dark */
}

.tableGridHeading tr:nth-child(even) {
	background-color: #e6ffee; /* Light */
}

.tableGridHeading tr:hover {
	background-color: #b3ffcc; /* Hover Over */
}

.tableGridHeading th {
    vertical-align: middle;
    text-align: center;
	border-width: 1px;
}

.tableGridHeading td {
    vertical-align: middle;
    text-align: center;
	border-width: 1px;
}

.tableHeading {
	border-width: 0px;
	width: 100%;
	margin: auto;
	/* background-color: #b3d1ff; */
	/* font-size: 0.9em; */
}

.tableHeading th {
    vertical-align: middle;
    text-align: center;
	border-width: 0px;
}

.tableHeading td {
    vertical-align: middle;
    text-align: center;
	border-width: 0px;
}

/*****************
** Form Styling **
*****************/
label {
  cursor: default;
}

input[type=text], input[type=password], input[type=submit] {
	font-family: "NHaasGrotesk-75Bd", "Helvetica-Neue", Helvetica, sans-serif;;
	background-color: none;
	border-width: 0.01em;
	border-style: outset;
	border-color: gray black black gray;
	box-shadow: none;
	border-radius: 0.5em;
	padding: 0.3em;
	margin: 0;
}

input[type=text].txtShort {
	background-color: #ffffff;
	width: 3em;
	max-width: 6em;
}

input[type=text].txtShortCtr {
	background-color: #ffffff;
	max-width: 5em;
	text-align: center;
	border-radius: 0.2em;
}
input[type=text].txtName {
	background-color: #ffffff;
	min-width: 12em;
}

input[type=text].txtFilter {
	margin: 0 auto 0 auto;
	background-color: #f2f2f2;
	color: #595959;
	min-width: 12em;
}

input[type=text].txtReadOnly {
	background-color: #f2f2f2;
	min-width: 12em;
}

input[type=text].txtReadOnlyHalfWidth {
	min-width: 3em;
	max-width: 6em;
	background-color: #f2f2f2;
}

input[type=text].txtGrid {
	font-family: "NHaasGrotesk-75Bd", "Helvetica-Neue", Helvetica, sans-serif;;
	background: transparent;
	border-width: 0em;
	border-style: outset;
	border-color: gray black black gray;
	box-shadow: none;
	border-radius: 0.0em;
	padding: 0.3em;
	margin: 0;
	text-align: center;
	height: 2.6em;
	min-width: 12em;
}

.seldropdown {
	font-family: "NHaasGrotesk-75Bd", "Helvetica-Neue", Helvetica, sans-serif;;
	border-width: 0.5px;
	border-style: outset;
	border-color: gray black black gray;
	box-shadow: none;
	border-radius: 0.5em;
	padding: 0.3em;
	margin: 0;
	min-width: 12em;
	max-width: 16em;
	max-height: 2em;
}

.seldropdowngrid {
	font-family: "NHaasGrotesk-75Bd", "Helvetica-Neue", Helvetica, sans-serif;;
	background: transparent;
	border-width: 0.5px;
	border-style: outset;
	border-color: gray black black gray;
	box-shadow: none;
	border-radius: 0.5em;
	padding: 0.3em;
	margin: 0;
	height: 2.5em;
}

.seldropdowndate {
	font-family: "NHaasGrotesk-75Bd", "Helvetica-Neue", Helvetica, sans-serif;;
	border-width: 0.5px;
	border-style: outset;
	border-color: gray black black gray;
	box-shadow: none;
	border-radius: 0.5em;
	padding: 0.3em;
	margin: 0;
	min-width: 3em;
	max-width: 7em;
	max-height: 2.2em;
}

.textarea, .textareaRO {
	font-family: "NHaasGrotesk-75Bd", "Helvetica-Neue", Helvetica, sans-serif;;
	background: transparent;
	background-color: #ffffff;
	resize: both;
	border-width: 0.02em;
	border-style: ridge;
	border-color: gray black black gray;
	box-shadow: none;
	border-radius: 0.5em;
	padding: 0.3em;
	margin: 0;
}

.textareaRO {
	background-color: #f2f2f2;
}

/*******************
** Button Styling **
*******************/
.button_log, .button_reg, .button_maint, .button_maint_alt, .button_maint_green, .button_maint_mgmt, .button_orange {
	font-family: "NHaasGrotesk-75Bd", "Helvetica-Neue", Helvetica, sans-serif;;
	display: inline-block;
	border-width: 0;
	border-style: outset;
	border-color: gray black black gray;
	color: #3e3e3e;
	box-shadow: none;
	box-shadow: 0.20em 0.20em 0.30em 0.09em #bfbfbf;
	border-radius: 0.5em;
	font-size: .65em;
	text-align: center;
	padding: .2em .4em;
	margin-left: .5em;
	margin-bottom: .5em;
	text-decoration: none;
	cursor: pointer;
	max-height: 2em;
}

.button_log:hover
, .button_reg:hover
, .button_reg_big:hover
, .button_reg_big1:hover
, .button_log:hover
, .button_default_page:hover
, .button_maint:hover
, .button_maint_alt:hover
, .button_maint_green:hover
, .button_maint_mgmt:hover
, .button_orange:hover
{
	box-shadow: 0.20em 0.20em 0.30em 0.16em #a6a6a6;
}

.button_log {
	background-color: #87cefa; /* Blue Button */
	font-size: .85em;
}

.button_reg {
	background-color: #f0e68c; /* Amber Button */
	font-size: .85em;
}

.button_orange {
	background-color: #ff9900; /* Orange Button */
	font-size: .85em;
}

.button_reg_big {
	background-color: #f0e68c; /* Amber Button */
	font-size: .95em;
	border-radius: 0.85em;
	padding: .3em .5em;
}

.button_reg_big1 {
	background-color: #87cefa; /* Blue Button */
	font-size: .95em;
	border-radius: 0.85em;
	padding: .3em .5em;
}

.button_default_page {
	background-color: : #004d1a; /* Green Button */
	color-color: #ffc61a;
	font-size: .95em;
	border-radius: 0.85em;
	padding: .3em .5em;
	box-shadow: 0.20em 0.20em 0.30em 0.09em #bfbfbf;
}

.button_hr_page {
	font-size: .85em;
	text-align: center;
	width: 6.4em;
	height: 7.0em;
	border-radius: 0.85em;
	padding: 0.3em auto 0.2em auto;
	box-shadow: 0.20em 0.20em 0.30em 0.09em #d9d9d9;
	display: inline-block;
}

.button_hr_page:hover {
	box-shadow: 0.20em 0.20em 0.30em 0.16em #a6a6a6;
}

.button_hr_page p {
	padding: 0.5em 0.5em 0.5em 0.5em;
}

.button_hr_page img {
	width: 5.0em;
	height: 5.0em;
	margin-left: auto;
	margin-right: auto;
}

.button_maint {
	min-width: 10em;
	background-color: #00a7ef;
	font-size: 1.05em;
}

.button_maint_mgmt {
	min-width: 10em;
	background-color: #999900;
	font-size: 1.05em;
}

.button_maint_green {
	min-width: 10em;
	background-color: #00cc44;
	font-size: 1.05em;
}

.button_maint_alt {
	min-width: 10em;
	background-color: #999999;
	font-size: 1.05em;
}
/*****************
** Span Styling **
*****************/
span.heading {
	color: #00a7ef;
}

span.caption {
	/* background-color: #f2f2f2; */
	color: #737373;
	font-weight: bold;
}

span.green {
	background-color: #9fff80;
	color: #1a1a1a;
	font-weight: bold;
}

span.red {
	background-color: #ff3333;
	color: #f2f2f2;
	font-weight: bold;
}

span.error {
	font-size: .80em;
	color: #ff3333;
}

span.info {
	font-size: .80em;
	color: #0066ff;
}

span.msgsent {
	font-size: .85em;
	color: #0066ff;
}

span.displayText {
	font-size: 0.90em;
	color: #595959;
	background-color: #ffffff;
	text-align: left;
}

/***************************
** Search/Filter Dropdown **
***************************/
.dropbtn1 {
	/* background-color: #04AA6D; */
	background-image: url('../images/searchicon.png');
	background-position: 0 0;
	background-size: contain;
	background-repeat: no-repeat;
	color: #000000;
	padding: 0 0 0 2.2em;
	font-size: 0.8em;
	border: none;
	cursor: pointer;
	max-width: 15.0em;
}

.dropbtn1:hover, .dropbtn1:focus {
	background-color: #3e8e41;
}

#myInput1 {
	box-sizing: border-box;
	background-image: url('../images/searchicon.png');
	background-position: 0 0;
	background-size: contain;
	background-repeat: no-repeat;
	min-width: 20em;
	font-size: 0.9em;
	padding: 0 0 0 1.2em;
	border: none;
	border-bottom: 1px solid #ddd;
}

#myInput1:focus {
	outline: 3px solid #ddd;
}

.dropdown1 {
	position: relative;
	top: -0.01em
	display: inline-block;
}

.dropdown1 a:hover {
	background-color: #ddd;
	text-decoration: none;
}

.dropdown-content1 {
	display: block;
	position: absolute;
	font-size: 0.9em;
	background-color: #f6f6f6;
	/* min-width: 20em; */
	max-height: 15em;
	overflow: auto;
	border: 1px solid #ddd;
	z-index: 1;
}

.dropdown-content1 a {
	color: black;
	padding: 0 0 0 0;
	text-decoration: none;
	display: block;
}

.show1 {
	display: block;
}

/*****************
** Testing Area **
*****************/
#testing {
	position: relative;
	margin: 0 auto 0 auto;
	max-width: 95%;
  	height: 50px;
  	overflow: hidden;
	background-image: url('../images/r-s.jpg');
	background-repeat: no-repeat;
	background-position: right top;
	/* border: 1px solid red; */
}

/***********
** Header **
***********/
#header-container {
	position: relative;
	margin: 0 auto 0 auto;
	max-width: 100%;
  	min-height: 1.8em;
  	overflow: hidden;
  	padding: 0 0 0 0;
  	text-align: center;
	background-color: #3e3e3e; /* 9 dot orange */
	border-top: 1px solid green;
	border-right: 1px solid green;
	border-bottom: 1px solid #ffffff;
	border-left: 1px solid green;
}

#header {
	position: relative;
	margin: 1.5em auto 0 auto;
	max-width: 95%;
  	min-height: 5em;
  	overflow: hidden;
  	padding: 2.5em 0 15px 0;
  	text-align: center;
	background-color: #ffffff;
	/* background-image: url(../images/ninedot_logo.png); */
	background-repeat: no-repeat;
	background-clip: padding-box;
	background-size: contain;
	background-position: center center;
	border: 1px solid red;
}

#header H1, #header H2 { /* IF Text is in the Header - Use this */
	width: 100%;
	font-style: normal;
  	color: #f2f2f2;
  	background: transparent;
}

#header H1 {
	font-size: 450%;
  	letter-spacing: -4px;
}

#header H2 {
	font-size: 160%;
  	letter-spacing: -1px;
  	margin-top: -5px;
}

p.welcome {
	position: absolute;
	bottom: 0.1em;
	right: 0.1em;
	color: #f2f2f2;
	font-size: 0.75em;
	font-family: inherit;
	text-align: right;
	padding: 0 0.2em 0 0;
	margin: 0 0 0 0;
}

p.welcome a:link {
	color: #f2f2f2;
	text-decoration: none;
}

p.welcome a:visited {
	color: #f2f2f2;
	text-decoration: none;
}

p.welcome a:hover {
	color: #d9d9d9;
	text-decoration: underline;
}

p.welcome a:active {
	color: #d9d9d9;
	text-decoration: underline;
}

p.welcome1 {
	position: absolute;
	bottom: 0.1em;
	left: 0.1em;
	color: #005ce6;
	font-size: .75em;
	font-family: inherit;
	text-align: left;
	padding: 0 0.2em 0 0;
	margin: 0 0 0 0;
}

p.welcome1 a:link {
	color: #005ce6;
	text-decoration: none;
}

p.welcome1 a:visited {
	color: #005ce6;
	text-decoration: none;
}

p.welcome1 a:hover {
	color: #0047b3;
	text-decoration: underline;
}

p.welcome1 a:active {
	color: #0047b3;
	text-decoration: underline;
}

/*************
** Menu Bar **
*************/
.topnav { /* Background Color for Top Level Not Including "Active Page" */
	color: #f2f2f2; /* White Text Color*/
  	background-color: #3e3e3e; /* 9 dot orange */
	border-radius: 0 0 0 0;
}

.topnav, .topnav a, .dropdown .dropbtn, .dropdown-content a  { /* Text Top Level*/
  	color: #f2f2f2; /* White */
	background-color: #3e3e3e; /* 9 dot orange */
}

.topnav img  { /* Image Top Level*/
	float: left;
	display: absolute;
	max-width: 12em;
	height: auto;
	padding: 0.5em 1.5em 0 1.0em;
}

.topnav a:hover, .dropdown:hover .dropbtn {
	color: #d9d9d9;	/* Dark White - Text color when hovering over a topmenu item */
	background-color: #3e3e3e; /* 9 dot orange - Background color when hovering over a topmenu item */
}

.dropdown-content a:hover {
	color: #d9d9d9; /* 9 dot orange - Text color when hovering over a submenu item */
	background-color: #b33c00; /* Dark Green - Background color when hovering over a topmenu item */
}

.dropdown-content, .dropdown-content a { /* Background / Text once dropped down */
	color: #f2f2f2; /* Black */
	background-color: #3e3e3e; /* 9 dot orange */
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	font-size: 1.0em;
}

/* Add an active class to highlight the current page */
.active, a.active {
	color: #d9d9d9; /* Black */
	background-color: #3e3e3e; /* 9 dot orange - Background color of Active Page */
}

.topnav { /* Whole Container for Menu Bar */
	margin: 0 auto 0 auto;
	max-width: 100%;
  	height: auto;
  	overflow: hidden;
	position: static; /* Must be Static for Dropdowns to work */
  	text-align: center;
	/* border: 1px solid #4CAF50; */
}

.topnav a { /* Links inside the nav bar */
  	float: left;
	display: block;
	text-align: center;
	padding: .98em 1em;
	text-decoration: none;
	height: auto;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  	display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
	float: left;
	overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
	border: none;
	outline: none;
	padding: .98em 1em;
	font-family: inherit;
	background-color: inherit;
	margin: 0;
}

/* Dropdown content style (hidden by default) */
.dropdown-content {
	display: none;
	position: absolute;
	min-width: 6.6em;
	max-width: 10em;
	z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
	float: none;
	padding: .3em .5em;
	text-decoration: none;
	display: block;
	text-align: left;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
	display: block;
}

/***********
** Banner **
***********/
/* Slideshow container */
.slideshow-container {
	position: relative;
	margin: 0 auto 0 auto;
	width: 95%;
  	max-height: auto;
  	overflow: hidden;
  	padding: 0 0 0 0;
	/* border: 1px solid green; */
}

.slideshow-container-pic img {
	display:block;
	margin: 0 auto 0 auto;
	max-width: 100%;
  	max-height: auto;
  	overflow: hidden;
  	padding: 0 0 0 0;
	object-fit: contain;
	border-radius: 0 0 2.0em 2.0em;
	background-color: inherit;
	/* border: 3px solid red; */
}

/* Caption text */
.text {
	position: absolute;
	color: #f2f2f2;
	font-size: 15px;
	margin 0 auto 0 auto;
	padding: 10px 0 0 0;
	width: 100%;
	text-align: center;
	border: 3px solid red;
}

/**************
** Main Body **
**************/
.body-content-all {
	position: relative;
	max-width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
  	padding -20px 0 0 0;
  	text-align: center;
  	overflow: hidden;
	/* border: 1px solid purple; */

}

.body-content-all-scroll {
	position: relative;
	max-width: 100%;
	height: auto;
	margin: 0 auto 0 auto;
  	padding -20px 0 0 0;
  	text-align: center;
  	overflow: scroll;
	/* border: 1px solid purple; */

}

/*******************
** Main Container **
*******************/
.l_main_container {
	position: relative;
	float: left;
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	background-color: #ffffff;
  	/* background: transparent url(../images/background_main.jpg) repeat; */
	/* border: 1px solid red; */
}

.l_main_container-scroll {
	float: left;
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
  	background: transparent url(../images/background_main.jpg) repeat;
	overflow: scroll;
	/* border: 1px solid red; */
}

.c_main_container {
	float: none;
	width: 100%;
	height: auto;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
  	background: transparent url(../images/background_main.jpg) repeat;
	/* border: 1px solid green; */
}

.r_main_container {
	float: right;
  	width: 100%;
  	height: auto;
  	margin: 0 0 0 0;
  	padding 0 0 0 0;
  	background: transparent url(../images/background_main.jpg) repeat;
	/* border: 1px solid blue; */
}

.l_main_container img {
	position: static;
	float: none;
	margin: 0 auto 0 auto;
	object-fit: cover;
	min-width: 100%;
}

.c_main_container img {
	position: static;
	float: left;
	margin: 0 0 0 0;
}

.r_main_container img {
	position: static;
	float: right;
	margin: 0 0 0 0;
}

.main_item, .main_item_home {
	overflow-x: auto;
	position: relative;
	font-size: .99em;
	font-style: normal;
	margin 0;
  	padding: 1em;
  	width: 100%;
  	text-align: left;
	/* border: 1px solid blue; */
}

.main_item_home {
	display: inline-flex;
	justify-content: center;
}

.main_item h1, .main_item_home h1 {
	font-size: 2.1em;
	color: #3e3e3e;
	padding: 0 0.75em 0.25em 0.75em;
	color: #3e3e3e;
	text-align: center;
	vertical-align: middle;
}

.main_item h2, .main_item_home h2 {
	font-size: 1.8em;
	color: #3e3e3e;
	padding: 0 0.75em 0.25em 0.75em;
	color: #3e3e3e;
	text-align: center;
	vertical-align: middle;
}

.main_item h3, .main_item_home h3 {
	font-size: 1.5em;
	color: #3e3e3e;
	padding: 0 0.75em 0.25em 0.75em;
	color: #3e3e3e;
	text-align: center;
	vertical-align: middle;
}

.main_item h4, .main_item_home h4 {
	font-size: 1.2em;
	color: #3e3e3e;
	padding: 0 0.75em 0.25em 0.75em;
	color: #3e3e3e;
	text-align: center;
	vertical-align: middle;
}

.main_item img, .main_item_home img {
	float: left;
	border-radius: 0.5em;
	background-color: inherit;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	/* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
	box-shadow: 0.4em 0.4em 0.65em 0.0em #8c8c8c;
	max-width: 20em;
	max-height: 20em;
	object-fit: contain;
	/* border: 1px solid red; */
}

.main_item p, .main_item_home p {
	float: left;
	background-color: inherit;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	max-height: auto;
	/* border: 1px solid red; */
}
.main_item_home img {
	border-radius: 5.0em;
	margin-right: 1.0em;
	/* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit; */
	box-shadow: 0.4em 0.4em 0.65em 0.0em #8c8c8c;
	max-width: 100%;
	max-height: 100%;
}
.main_item p {
	color: #737373;
	font-style: normal;
	font-weight: bold;
	padding: 0 0 0 0.5em;
}

.main_item a {
	color: #666666;
}

.main_item a:hover {
	text-decoration: none;
	color: #1a0d00;
	font-style: normal;
}

.main_item_home ul {
	margin-left: 2em;
	/* border: 1px solid green; */
}

.main_item ul li, .main_item ul li.selected, .main_item li.selected, .main_item li:hover {
	font-size: .98em;
}

.main_item ul li, .main_item ul li.selected {
	color: #595959;
	font-style: normal;
	list-style-type: circle;
	list-style-position: inside;
	padding: 0 0 0 15px;
	/* border: 1px solid red; */
}

.main_item li.selected, .main_item li:hover {
	color: #1a0d00;
	font-style: normal;
  	text-decoration: none;
}

/************
** Sidebar **
************/
.l_sidebar_container, .c_sidebar_container, .r_sidebar_container {
	float: left;
  	width: 100%;
  	margin: 0 0 0 0;
	border-radius: 0.7em;
  	background: transparent url(../images/background_main.jpg) repeat;
}

.l_sidebar_container {
	/* border: 1px solid pink; */
}

.c_sidebar_container {
	/* border: 1px solid pink; */
}

.r_sidebar_container {
	float: right;
	/* border: 1px solid pink; */
}

.sidebar_item {
  	padding: 10px 10px 10px 20px;
  	text-align: center;
}

.sidebar_item p {
	text-align: center;
	font-style: normal;
	color: #737373;
	padding-left: 0.2em;
}

.sidebar_item h1 {
	color: #262626;
}

.sidebar_item h2 {
	color: #262626;
}

.sidebar_item h3 {
	font-size: 1.60em;
	color: #4d4d4d;
}

.sidebar_item h4 {
	font-size: 1.40em;
  	color: #595959;
}

.sidebar_item h5 {
	color: #666666;
}

.sidebar_item h6 {
	color: #262626;
}

.sidebar_item p {
	color: #262626;
}

.sidebar_item a {
	color: #4da6ff;
	text-decoration: none;
}

.sidebar_item a:hover {
	color: #1a8cff;
	text-decoration: none;
}

.sidebar_item li {
	color: #262626;
	list-style-type: square;
	list-style-position: inside;
  	margin: 0 0 0 0;
  	padding: 0;
  	text-align: left;
}

.sidebar_item ul li, .sidebar_item ul li.selected {
	color: #333333;
	list-style-type: square;
	list-style-position: inside;
  	margin: 0 0 0 0;
  	padding: 0;
}

.sidebar_item li.selected, .sidebar_item li:hover {
	color: #0d0d0d;
  	text-decoration: none;
}

/**********************
** Collapsible FAQ's **
**********************/
.collapsibleFAQ { /* Top Level (Title) when closed showing a + */
	background-color: #dbdbdb;
	color: #3e3e3e;
	cursor: pointer;
	padding: 0.25em;
	width: 100%;
	border-style: groove;
	border-width: 0.2em;
	border-radius: 0.70em;
	border-color: #dbdbdb;
	text-align: left;
	outline: none;
	font-size: 1em;
}

.activeFAQ, .collapsibleFAQ:hover { /* When hovering */
	background-color: #bfbfbf;
}

.contentFAQ { /* After Clicking - Actual Content*/
	padding: 0 1em 0 1em;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-out;
	background-color: #f2f2f2;
}

.collapsibleFAQ:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 1em;
  color: #e24b00;
  float: left;
  margin-left: 0;
  padding-right: 1em;
}

.activeFAQ:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

/*************************************
** Tree View Initial Show Collapsed **
*************************************/
/* Remove default bullets */
#treeView, .tree_view {
	list-style-type: none;
	text-align: left;
	padding: 0 0 0.5em 0;
}

/* Remove margins and padding from the parent ul */
#treeView {
	margin: 0;
	padding: 0 0 0.5em 0;
}

/* Style the caret/arrow */
.caret {
	cursor: pointer;
	user-select: none; /* Prevent text selection */
	padding: 0 0 0.5em 0;
}

/* Create the caret/arrow with a unicode, and style it */
.caret::before {
	content: "\2795";
	/* transform: rotate(180deg); */
	color: black;
	display: inline-block;
	margin-right: 6px;
	padding: 0 0 0.5em 0;
}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
	content: "\2796";
	padding: 0 0 0.5em 0;
}

/* Hide the nested list */
.nested {
	display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
	display: block;
	background-color: #f2f2f2;
	padding: 0 0 0.5em 3.0em;
}

/***********
** Footer **
***********/
#footer {
	position: relative;
	margin: 0 auto 0 auto;
	max-width: 95%;
  	height: auto;
  	overflow: hidden;
	padding: 0 20px 30px 20px;
  	background: transparent;
	/* border: 1px solid red; */
}

#footer_content {
	width: 100%;
	font-size: .85em;
	font-style: normal;
  	height: auto;
  	padding: 0.50em 0 0.50em 0;
  	text-align: center;
  	background: transparent;
  	color: #737373;
}

#footer a, #footer a:hover {
	color: #737373;
  	text-decoration: underline;
}

#footer a:hover {
	color: #4d4d4d;
}

#footer p {
	color: #737373;
	font-style: italic;
}
/**************************
** Responsive Page Setup **
**************************/
[class*="col-"] {
	float: left;
	margin: 0;
	padding: 5px; /* Distance between containers within the column */
	border: 0;
}

/* For mobile phones: */
[class*="col-xs"] {
  width: 100%;
}

/* For mobile phones: */
[class*="col-s"] {
  width: 100%;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	.col-xs-1 {width: 8.33%;}
	.col-xs-2 {width: 16.66%;}
	.col-xs-3 {width: 25%;}
	.col-xs-4 {width: 33.33%;}
	.col-xs-5 {width: 41.66%;}
	.col-xs-6 {width: 50%;}
	.col-xs-7 {width: 58.33%;}
	.col-xs-8 {width: 66.66%;}
	.col-xs-9 {width: 75%;}
	.col-xs-10 {width: 83.33%;}
	.col-xs-11 {width: 91.66%;}
	.col-xs-12 {width: 100%;}

	/* Adjust the body font to the screen */
	body {
		font-size: .80em;
	}

	h1 {
		font-size: 3.00em;
	}

	h2 {
		font-size: 2.50em;
	}

	h3 {
		font-size: 2.00em;
	}

	h4 {
		font-size: 1.50em;
	}

	h5 {
		font-size: 1.25em;
	}

	h6 {
		font-size: 1.00em;
	}

	/***************
	* Testing Area *
	***************/
	#testing {
		background-image: url('../images/r-xs.jpg');
	}

	/**********/
	/* Header */
	/**********/
	#header {
		padding: 5px 0 5px 0;
	}

	#header h1 {
		font-size: 300%;
		letter-spacing: -2px;
	}

	#header h2 {
		font-size: 95%;
		letter-spacing: 1px;
		margin-top: -4px;
	}

	p.welcome {
		margin-bottom: -0.15em;
	}

	/************/
	/* Menu Bar */
	/************/
	/* Menu formatting before clicking icon */
	.topnav, .topnav a, .dropdown .dropbtn, .dropdown-content a  { /* Text Top Level*/
		font-size: 0.9em;
	}

	/* Hide all links except for the first one "Home" */
	.topnav a:not(:first-child), .dropdown .dropbtn {
    	display: none;
	}

	/* Show the icon */
	.topnav a.icon {
		float: right;
		display: block;
		font-size: 2.0em;
		padding: 0 0.25em 0 0;
  	}

	/* Setup the "responsive" class using JavaScript for when the user clicks on the icon */
	.topnav.responsive {
		position: relative;
	}

	.topnav.responsive a.icon { /* Place the Icon */
		position: absolute;
		right: 0;
		top: 0;
		font-size: 2.0em;
		padding: 0 0.25em 0 0;
	}

	.topnav.responsive a { /* Toplevel menu formatting */
		float: none;
		display: block;
		text-align: left;
		font-size: 0.9em;
	}

	.topnav.responsive .dropdown {
		float: none;
	}

	.menu_image {
		position: static;
	}

	.topnav.responsive .dropdown-content {
		position: relative;
	}

	.topnav.responsive .dropdown .dropbtn { /* Submenu formatting  */
		display: block;
		width: 100%;
		text-align: left;
		font-size: 0.85em;
	}

	/***********
	** Banner **
	***********/
	/* Caption text */
	.text {
		font-size: 12px;
	}

	/*****************
	** Main Content **
	*****************/

} /* close @media */

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	.col-s-1 {width: 8.33%;}
	.col-s-2 {width: 16.66%;}
	.col-s-3 {width: 25%;}
	.col-s-4 {width: 33.33%;}
	.col-s-5 {width: 41.66%;}
	.col-s-6 {width: 50%;}
	.col-s-7 {width: 58.33%;}
	.col-s-8 {width: 66.66%;}
	.col-s-9 {width: 75%;}
	.col-s-10 {width: 83.33%;}
	.col-s-11 {width: 91.66%;}
	.col-s-12 {width: 100%;}

	/* Adjust the body font to the screen */
	body {
		font: normal .90em arial, sans-serif;
	}

	h1 {
		font-size: 3.10em;
	}

	h2 {
		font-size: 2.60em;
	}

	h3 {
		font-size: 2.10em;
	}

	h4 {
		font-size: 1.60em;
	}

	h5 {
		font-size: 1.35em;
	}

	h6 {
		font-size: 1.10em;
	}

	/***************
	* Testing Area *
	***************/
	#testing {
		background-image: url('../images/r-s.jpg');
		/* background-size: contain; */
	}

	/**********/
	/* Header */
	/**********/
	#header {
		padding: 7px 0 7px 0;
	}

	#header H1 {
		font-size: 350%;
		letter-spacing: -2px;
	}

	#header H2 {
		font-size: 105%;
		letter-spacing: 1px;
		margin-top: -5px;
	}

	p.welcome {
		margin-bottom: -0.05em;
	}

	/************/
	/* Menu Bar */
	/************/
	.topnav, .topnav a, .dropdown .dropbtn, .dropdown-content a  { /* Text Top Level*/
		font-size: 0.87em;
	}

	/***********
	** Banner **
	***********/
	/* Caption text */
	.text {
		font-size: 13px;
	}

	/*****************
	** Main Content **
	*****************/

} /* close @media */

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	.col-m-1 {width: 8.33%;}
	.col-m-2 {width: 16.66%;}
	.col-m-3 {width: 25%;}
	.col-m-4 {width: 33.33%;}
	.col-m-5 {width: 41.66%;}
	.col-m-6 {width: 50%;}
	.col-m-7 {width: 58.33%;}
	.col-m-8 {width: 66.66%;}
	.col-m-9 {width: 75%;}
	.col-m-10 {width: 83.33%;}
	.col-m-11 {width: 91.66%;}
	.col-m-12 {width: 100%;}

	/* Adjust the body font to the screen */
	body {
		font: normal .95em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}

	h1 {
		font-size: 3.20em;
	}

	h2 {
		font-size: 2.70em;
	}

	h3 {
		font-size: 2.20em;
	}

	h4 {
		font-size: 1.70em;
	}

	h5 {
		font-size: 1.45em;
	}

	h6 {
		font-size: 1.20em;
	}

	/***************
	* Testing Area *
	***************/
	#testing {
		background-image: url('../images/r-m.jpg');
		/* background-size: contain; */
	}

	/**********/
	/* Header */
	/**********/
	#header {
		padding: 9px 0 9px 0;
	}

	#header H1 {
		font-size: 425%;
		letter-spacing: -2px;
	}

	#header H2 {
		font-size: 125%;
		letter-spacing: 0px;
		margin-top: -5px;
	}

	/*************
	** Menu Bar **
	*************/
	.topnav, .topnav a, .dropdown .dropbtn, .dropdown-content a  { /* Text Top Level*/
		font-size: 0.9em;
	}


	/***********
	** Banner **
	***********/
	/* Caption text */
	.text {
		font-size: 14px;
	}

	/*****************
	** Main Content **
	*****************/

} /* close @media */

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.col-l-1 {width: 8.33%;}
	.col-l-2 {width: 16.66%;}
	.col-l-3 {width: 25%;}
	.col-l-4 {width: 33.33%;}
	.col-l-5 {width: 41.66%;}
	.col-l-6 {width: 50%;}
	.col-l-7 {width: 58.33%;}
	.col-l-8 {width: 66.66%;}
	.col-l-9 {width: 75%;}
	.col-l-10 {width: 83.33%;}
	.col-l-11 {width: 91.66%;}
	.col-l-12 {width: 100%;}

	/* Adjust the body font to the screen */
	body {
		font: normal 1.00em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}

	h1 {
		font-size: 3.30em;
	}

	h2 {
		font-size: 2.80em;
	}

	h3 {
		font-size: 2.30em;
	}

	h4 {
		font-size: 1.80em;
	}

	h5 {
		font-size: 1.55em;
	}

	h6 {
		font-size: 1.30em;
	}

	/***************
	* Testing Area *
	***************/
	#testing {
		background-image: url('../images/r-l.jpg');
	}

	/**********/
	/* Header */
	/**********/
	#header {
		padding: 11px 0 11px 0;
	}

	#header H1 {
		font-size: 450%;
		letter-spacing: -2px;
	}

	#header H2 {
		font-size: 150%;
		letter-spacing: -1px;
		margin-top: -5px;
	}

	/*************
	** Menu Bar **
	*************/
	.topnav, .topnav a, .dropdown .dropbtn, .dropdown-content a  { /* Text Top Level*/
		font-size: 0.9em;
	}

	/***********
	** Banner **
	***********/
	/* Caption text */
	.text {
		font-size: 15px;
	}

	/*****************
	** Main Content **
	*****************/

} /* close @media */

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	.col-xl-1 {width: 8.33%;}
	.col-xl-2 {width: 16.66%;}
	.col-xl-3 {width: 25%;}
	.col-xl-4 {width: 33.33%;}
	.col-xl-5 {width: 41.66%;}
	.col-xl-6 {width: 50%;}
	.col-xl-7 {width: 58.33%;}
	.col-xl-8 {width: 66.66%;}
	.col-xl-9 {width: 75%;}
	.col-xl-10 {width: 83.33%;}
	.col-xl-11 {width: 91.66%;}
	.col-xl-12 {width: 100%;}

	/* Adjust the body font to the screen */
	body {
		font: normal 1.10em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	}

	h1 {
		font-size: 3.40em;
	}

	h2 {
		font-size: 2.90em;
	}

	h3 {
		font-size: 2.40em;
	}

	h4 {
		font-size: 1.80em;
	}

	h5 {
		font-size: 1.10em;
	}

	h6 {
		font-size: 0.9em;
	}

	/***************
	* Testing Area *
	***************/
	#testing {
		background-image: url('../images/r-xl.jpg');
	}

	/***********
	** Header **
	***********/
	#header {
		padding: 13px 0 13px 0;
	}

	#header H1 {
		font-size: 500%;
		letter-spacing: -2px;
	}

	#header H2 {
		font-size: 175%;
		letter-spacing: -1px;
		margin-top: -5px;
	}

	/*************
	** Menu Bar **
	*************/
	.topnav, .topnav a, .dropdown .dropbtn, .dropdown-content a  { /* Text Top Level*/
		font-size: 0.95em;
	}

	/***********
	** Banner **
	***********/
	/* Caption text */
	.text {
		font-size: 15px;
	}

	/*****************
	** Main Content **
	*****************/


} /* close @media */