html {
	/*overflow-Y: scroll;
	overflow: -moz-scrollbars-vertical;*/
	overflow-y: auto;
	overflow-x: scroll;
}
html,body {
	width: 100%;
	/*height: 1090px;*/
	height: 1110px;
	/*margin: -160px auto auto auto;*/
	margin: -152px auto auto auto;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, "Times New Roman", Times, serif;
	/*font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;*/
	font-family: Arial, Open Sans, sans-serif; font-size: 16px; font-style: normal; font-weight: normal;
	color: rgb(96,96,96);
	background-color: rgb(144,144,144);		/* NOTE: must change background-color for #wrap_all as well */
}
h1 {
	font-size: 1.5em;
	font-weight: normal;
	text-decoration: none;
	color: rgb(72,72,72);
}
h2 {
	font-size: 1.25em;
	font-weight: normal;
	/*font-style: italic;*/
	text-decoration: none;
	color: rgb(72,72,72);
}
p {
	font-size: 1em;
}

#wrap_all {
	clear: both;
	width: 100%;
	min-height: 100%;
	height: auto;
	min-height: 725px;
	background-color: rgb(144,144,144);
	margin: -195px auto -350px auto; /* NOTE: bottom margin must = negative of footer height */
}
#wrapper {
	overflow: hidden;
	width: 100%;
	max-width: 1600px;
	min-width: 1024px;
	/*max-height: 714px;*/
	max-height: 750px;
	margin: auto;
	text-align: center;
	color: rgb(0,0,0);
	background-color: white;
}
#content_wrap {
	clear: both;
	width: 100%;
	height: auto;
	margin: auto;
	background-color: white;
}

a {text-decoration: none;}
a:link    {color:rgb(72,72,72);}
a:visited {color:rgb(72,72,72);}
a:hover   {color:rgb(180,24,0);}
a:active  {color:rgb(255,0,0);}

img {border: 0px;}

.placeholder {color: rgb(96,96,96);}

#grid_index{
	display:grid;
	grid-template-columns:52% auto;
}
#grid_index h1{
	margin-top: 100px;
	margin-bottom: 10px;
}

.index_left {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}
.index_right {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}
.index_bottom {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}
#page_description h2{
	font-style: italic;
	text-align: right;
	margin-bottom: 0px
}
#grid_description{
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: left;
	font-style: italic;
}
#grid_description h1{
	text-align: center;
	font-style: bold;
	margin-bottom: 5px;
}
.models {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	margin-left: 10px;
	margin-right: 10px;
	line-height: 18px;
}
.model_description {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	margin-left: 10px;
	margin-right: 10px;
	line-height: 15px;
}
.domains {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	margin-left: 10px;
	margin-right: 10px;
}
.domain_description {
	grid-column: 2 / 3;
	grid-row: 2 / 3;
	margin-left: 10px;
	margin-right: 10px;
}
.calendar {
	grid-column: 3 / 4;
	grid-row: 1 / 2;
	margin-left: 10px;
	margin-right: 10px;
}
.weekly_period {
	grid-column: 3 / 4;
	grid-row: 2 / 3;
	margin-left: 10px;
	margin-right: 10px;

}

/*--- Header ---------------------------------------------------------------------------------------------------------*/
#menubar-wrap {
	font-family: "Open Sans", sans-serif;
	font-size: 16px;	/*1.1em;*/
	font-weight: 200;
	width: 100%;
	height: 33px;		/* 49px */
	background-color: rgb(62,94,142);									/* menubar background */
	text-align: center;
	margin: auto;
	float: none;
}

#header {
	width: 100%;
	max-width: 1600px;
	min-width: 1024px;
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 200;
	text-align: center;
	text-decoration: none;
	/*color(96,96,96);*/
	margin: auto;
	clear: left;
	clear: right;
	position: relative;			/* NOTE: set position relative so that dropdown menus overlie absolue pos divs */
	z-index: 10;				/* see http://stackoverflow.com/questions/5924431/how-to-put-a-static-div-on-top-of-an-absolute-position-div */
	background-color: white;
}

#header-top {
	width: 100%;
	max-width: 1600px;
	min-width: 1024px;
	height: 92px;
	margin: auto;
	clear: left;
	clear: right;
	backgroundcolor: white;
}

#menubar-options-wrap ul {
	float: left;
	width: 450px;	/* 715px */
	height: 33px;		/* 50px */
	margin: auto;
	padding: 0;
	overflow: hidden;
	list-style-type: none;
	/*background-color: rgb(16,80,144);*/
	/*background-color: rgb(32,64,112);*/
	background-color: none;
}

#menubar-options-wrap li {
	margin-left: 0px;	/* 35px */
	margin-right: 0px;
	float: left;
}

#menubar-options-wrap li a, .dropbtn {
	display: inline-block;
	color: white;
	text-align: center;
	padding: 7px 24px;			/* 14px 26px */
	text-decoration: none;
}

#menubar-options-wrap li a:hover, .dropdown:hover .dropbtn {
	background-color: rgb(32,96,236);									/* menubar selection background */
}

#menubar-options-wrap li.dropdown {
	display: inline-block;
}

#menubar-options-wrap .dropdown-content {
	display: none;
	position: absolute;
	background-color: rgb(80,80,80);									/* dropdown background */
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

#menubar-options-wrap .dropdown-content a {
	color: rgb(244,244,244);
	padding: 16px 24px;
	text-decoration: none;
	display: block;
	text-align: left;
}

#menubar-options-wrap .dropdown-content a:hover {background-color: rgb(32,96,236);}	/* dropdown selection background */

#menubar-options-wrap .dropdown:hover .dropdown-content {
	display: block;
}
/*--------------------------------------------------------------------------------------------------------------------*/


/*--- Page Titles ----------------------------------------------------------------------------------------------------*/
#page_title {
	margin: -5px auto auto auto;
	padding: 20px 0px 20px 0px;
	max-width: 1600px;
	min-width: 1024px;
	background-color: white;
}
#page_title img {
	max-width: 130px;
	width: 100%;
	height: 100%;
	float: left;
	margin-left: 200px;
	margin-bottom: 10px;
	border: 0;
}
#page_title h1 {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.6em;
	font-weight: 200;
	text-align: left;
	text-decoration: none;
	margin-left: 340px;
	margin-top: 30px;
	color: rgb(96,96,96);
}
hr.style-standard {
	border-color: rgb(144,144,144);			/* Chrome and Safari */
	background-color: rgb(144,144,144);		/* Firefox and Opera */
	color: rgb(144,144,144);				/* IE7+ */
	border-width: 1px;
}
/* https://css-tricks.com/examples/hrs/ */
/* Gradient transparent - color - transparent */
hr.style-gradient {
	border: 0;
	height: 1px;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
/*--------------------------------------------------------------------------------------------------------------------*/


/*--- Footer ---------------------------------------------------------------------------------------------------------*/
.push {
	/* NOTE: .push height must = #footer height, and #wrap_all margin must = negative of #footer height WITHOUT the top margin value.       */
	/* Example: #footer height = 625px, #footer top margin = 30px, #wrap_all top margin = -625px, .push height = 655px*/
	/* Refer to "sticky footer" http://ryanfait.com/resources/footer-stick-to-bottom-of-page/                         */
	height: 350px;
}

#footer {
	width: 100%;
	max-width: 1680px;
	min-width: 1024px;
	margin: 0px auto 0px auto;
	height: 350px;
	padding: 0px;
	font-family: Arial, Open Sans; font-size: 15px; font-style: normal; font-weight: normal;
	line-height: 20px;
	color: rgb(204,204,204);
	background-color: rgb(80,80,80);
}

/* http://stackoverflow.com/questions/18790844/how-to-center-3-divs-in-the-middle-of-the-page */
#footer .left {
	width: 300px;
	width: 300px;
	height: auto;
	padding: 30px 12px 0px 12px;
	text-align: left;
	float: none;
	display: inline-block;
	vertical-align: top;
}
#footer .center {
	width: 300px;
	height: auto;
	padding: 30px 12px 0px 12px;
	text-align: left;
	float: none;
	display: inline-block;
	vertical-align: top;
}
#footer .right {
	width: 300px;
	height: auto;
	padding: 30px 12px 0px 12px;
	text-align: left;
	float: none;
	display: inline-block;
	vertical-align: top;
}
#footer h1 {
	line-height: 20px;
	text-align: left;
	font-family: Arial, Open Sans; font-size: 15px; font-style: normal; font-weight: bold;
	color:rgb(244,244,244);
}
#footer a:link    {color:rgb(244,244,244);}
#footer a:visited {color:rgb(244,244,244);}
#footer a:hover   {color:rgb(255,160,64);}
#footer a:active  {color:rgb(255,255,255);}
/*--------------------------------------------------------------------------------------------------------------------*/