/*------------------------------------------------------*/
/* Global page styles */
@font-face {
    font-family: 'metropolis';
    src: url('fonts/Metropolis/metropolis-light-webfont.woff2') format('woff2'),
         url('fonts/Metropolis/metropolis-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'opensans';
    src: url('fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html { height:100%; padding:0; margin:0; overflow:auto; }

body {
	color:#1a1a1a;
	/* font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif; */
	/* font-family: 'Lato', sans-serif; */
	font-family: 'metropolis';
	font-size: 1.2em;
	text-align: justify;
	background-color: #ffffff;
	overflow-y: scroll;
	padding: 0;
	margin:0;
	height:100%;
	/* border:3px solid purple; */

}
a {	color:#006ddb; }
img { width: 100%; }

.internal-link { padding-top: 5vh;}
#eqn { font-size: 2.5em; }
#links-list { list-style: none; font-size:1.2em; }
#links-list li { padding: 5px 0; }

@media (max-width: 1025px) {
	body { background-color: #ececec; }
}

/*------------------------------------------------------*/
/* Desktop nav bar styles */
#logo_nav {
	height:5vh;
	width:auto;
	float:left;
	padding:5px;
}
#desktop_nav {
	z-index:10;
	position: -webkit-sticky;
	font-family:'opensans';
	position:sticky;
	top:0px;
	height:5vh;
	background-color:#fff;
	text-align: center;
	vertical-align: middle;
	display:table;
	width:100%;
	box-sizing: border-box;
	border-bottom:1px solid #294157;
}

@media (max-width: 1025px) {
    #desktop_nav   { display: none; }
}

#nav_link_cell{
	height:5vh;
	display:table-cell;
	vertical-align: middle;
	text-align: center;
}
.nav_link {
	color: #333;
	transition: background-color .2s;
	/* font-size:large; */
	font-size:1.1em;
	display: inline-block;
	padding: 5px 15px;
	cursor: pointer;
	text-decoration: none;
}
.nav_link:hover {
	color:#FF994B;
}
#active {
	color:#fff;
}

#nav_link_cell_active {
	height:5vh;
	display:table-cell;
	vertical-align: middle;
	text-align: center;
	background-color: #294157;
}

/*------------------------------------------------------*/
/* Global dropdown menu styles */
.dropdown {
    position: relative;
    display: inline-block;
	z-index:1000;
}
.dropdown_container {
	opacity:0;
	visibility:hidden;
	position:absolute;
	z-index:1000;
	background-color:#ffffff;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	color:#000;
	word-wrap:break-word;
	white-space:normal;
	text-align:left;
	line-height:normal;
	transition:opacity 0.3s ease-in;
}
/* The container <div> - needed to position the dropdown content */
.dropdown:hover .dropdown_container {
	opacity:1;
	visibility:visible;
	display:block;
}
.dropdown_list {
	list-style-type:none;
	padding:0;
}
.dropdown_list_item {
	width:100%;
	padding:5px 0px;
	margin:0;	
}

/*------------------------------------------------------*/
/* Desktop dropdown menu styles */
.desktop_drop {
	width:100%;
	margin:0;
	padding:0;
	border:2px solid #595959;
	border-top: 0;
}
#dropdown_nav_link {
	color: #333333;
	/* transition: 0.1s linear; */
	font-size:x-large;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	text-align:center;
	width:100%;
}
#dropdown_nav_link:hover {
	background-color:#294157;
	color: #ffffff;
	transition: 0.12s ease-in;
}

/*------------------------------------------------------*/
/* Mobile dropdown menu styles */
#mobile_nav {
	position:absolute;
	display:none;
	z-index:10;
	position: -webkit-sticky;
	position:sticky;
	top:0px;
	height:5vh;
	background-color:#fff;
	width:100%;
	padding:5px 0px;
	border-bottom:1px solid black;
}
@media (max-width: 1025px) {
	#mobile_nav { display: block; }
}
#mobile_nav #nav_link_cell{
	position:absolute;
	width:100%;
	display: flex;
	align-items: center; 
}
#mobile_nav .nav_link{
}
#mobile_logo_nav {
	height:5vh;
	float:left;
}
.mobile_drop {
	border-radius:0px 0px 8px 8px;
	border-top:1px solid #999999;
	width:100%;
	top:5vh;
	margin:0;
	border:0;
	border-radius:0;
	box-shadow:none;
	padding:0;
	border-bottom:2px solid #595959;
}
#mobile_nav .dropdown_container:before, #mobile_nav .dropdown_container:after {
	display:none;
}
#mobile_nav_link {
	color: #333333;
	transition:background-color .2s;
	font-size:x-large;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	text-align:center;
	width:100%;
	
}
#mobile_nav_link:hover {
	background-color: rgb(206, 200, 208);
}

/*------------------------------------------------------*/
/* Main grid styles */

#prev-banner-row {
	z-index:5;
	position: -webkit-sticky;
	font-family:'opensans';
	position:sticky;
	top:5vh;
	text-align: center;
	vertical-align: middle;
	display:table;
}

#prev-banner {
	text-align:center;
	background-color: #f0e442;
	border-bottom: 1px solid #333333;
	color: #333333;
}

#section-cont {
	/* min-height:100%; */
	/* border: 1px solid green; */
}
#section-row {
	background-color:#ececec;
	min-height:100%;
	/* border:1px solid green; */
}
#section-content{
	background-color:#ececec;
	height:100%;
	/* padding:0 100px; */
	/* min-height:92vh; */
	/* margin: 20px; */
	/* border:1px solid blue; */
}
#inner-margin{
	background-color:#ececec;
	/* min-height:100%; */
	/* border:1px solid blue; */
}

@media (max-width: 1025px) {
	#section-col { width: 100%; padding: 0; text-align:left; }
	#outer-margin { width: 0; }
}

/*------------------------------------------------------*/
/* Header styles */

#header {
    color:#fff;
	background-color: #294157;
	font-size:1.8em;
	padding-top:10px;
	padding-bottom:10px;
	text-align: center;
	vertical-align: middle;
	/* border-bottom:1px solid #333; */
}
#header::after {
	font-size:unset;
}
#top-row{
	height:2vh;
	background-color: #ececec;
}
#section-header-row {
	background-color: #ececec;
	/* border:1px solid red; */
}
#section-header {
	background-color: #ececec;
	color: #333;
	padding: 5px 20px;
	font-size:1.6em;
	font-weight:bold;
	border-bottom: 2px solid #294157;
	border-left: 2px solid #294157;
	width: 90%;
	margin:auto;
}
@media (max-width: 1025px) {
	#section-header  { padding:0; }
	#section-header-row { width: 100%; text-align:center; }
}

/*------------------------------------------------------*/
/*Instructor grid and image styles */
#instructor {
	max-height:20vh;
	border:1px dotted #666666;
}
#inst-img-cont{
	max-height:20vh;
}
#inst-img {
	max-height:20vh;
	width:auto;
}
#inst-text{
	margin:20px;
}
@media (max-width: 1025px) {
	#instructor {  max-height: 100vh;  flex-wrap: wrap; }
	#inst-img-cont { display:inline-block; width: 100%; }
	#inst-img { display: block; margin: auto; }
	#inst-text { display:inline-block; width: 100%; text-align: left; }
}

/*------------------------------------------------------*/
/* Figure styles */
.fig-caption {
	font-size: 0.75em;
	font-style: italic;
}

/*------------------------------------------------------*/
/* Code block styles */
pre {
	overflow:auto;
	background-color:#fff;
	font-size:1.5em;
	line-height:1.3em;
	border: 1px dotted #666666;
}
.inline {
	color:#ff5c33;
	font-weight:bold;
}
.cmd {
	background-color: #c6ecd9;
}
.cmd-ne {
	background-color: #ffb3b3;
}
.text {
	background-color: #cce6ff;
}

/*------------------------------------------------------*/
/* Global table styles */
.table-cont {
	padding:20px;
	text-align: left;
	max-width: 100%;
}
table {
	border-collapse: collapse;
	background-color:#ffffff;
	border: 1px dotted #666666;
	width: 100%;
}
@media (max-width: 1025px) {
	.table-cont { overflow: scroll; }
}

/*------------------------------------------------------*/
/* Command table styles */
.cmd-table {
	/* border-collapse: collapse;
	background-color:#ffffff;
	border: 1px dotted #666666;
	width: 100%; */
}
.cmd-table thead {
	background-color: #333333;
	color: #ffffff;
}
.cmd-table tr {
	border-bottom:1px solid #333333;
}
.cmd-table .tcol-1 {
	padding:5px 10px;
	width: 66%
}
.cmd-table .tcol-2 {
	padding:5px 10px;
	width: 34%
}
@media (max-width: 1025px) {
	.cmd-table .tcol-1 { max-width: 50%; overflow-wrap: break-word; word-break: break-all;}
	.cmd-table .tcol-2 { max-width: 50%;}
}
/*------------------------------------------------------*/
/* Normal table styles (only used in start.html and mapping.html) */
.norm-table {
	/* border-collapse: collapse;
	background-color:#ffffff;
	border: 1px dotted #666666; */
}
.norm-table thead {
	background-color: #333333;
	color: #ffffff;
}
.norm-table tr {
	border-bottom:1px solid #333333;
}
.norm-table .tcol-1 {
	padding:5px 10px;
	width: 25%
}
.norm-table .tcol-2 {
	padding:5px 10px;
	width: 75%
}
/*------------------------------------------------------*/
/* Small table styles (only used once in mapping.html) */
.small-table {
	/* border-collapse: collapse;
	background-color:#ffffff;
	border: 1px dotted #666666; */
	width:25%;
}
.small-table thead {
	background-color: #333333;
	color: #ffffff;
}
.small-table tr {
	border-bottom:1px solid #333333;
}
.small-table .tcol-1 {
	padding:5px 10px;
	width: 10%
}
.small-table .tcol-2 {
	padding:5px 10px;
	width: 90%
}

/*------------------------------------------------------*/
/* Program table styles (only used once in programs.html) */
.prog-table {
	/* border-collapse: collapse;
	background-color:#ffffff;
	border: 1px dotted #666666; */
}
.prog-table thead {
	background-color: #333333;
	color: #ffffff;
}
.prog-table tr {
	border-bottom:1px solid #333333;
}
.prog-table th {
	padding: 0 20px
}
.prog-table td {
	padding: 0 20px
}
#used-prog {
	background-color: #c6ecd9;
}

/*------------------------------------------------------*/
/* Message box styles */
#msg_cont {
    width:100%;
    display:flex;
	justify-content:center;
    align-items:center;
    min-height:10vh;
}
#msg {
    width:80%;
}
#msg_banner {
    width:100%;
	align-items:left;
    background-color:#ffd9b3;
    padding:5px;
    font-size:1.4em;
    border-left: 5px solid #db6d00;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
    box-shadow: 2px 2px 2px #cccccc;
}
#msg_text {
    width:100%;
	align-items:left;
    background-color:#ffffff;
	padding:1px 5px;
	font-size:0.9em;
    border-left: 5px solid #db6d00;
    border-bottom-left-radius:2px;
    border-bottom-right-radius:2px;
    box-shadow: 2px 2px 2px #cccccc;
}
#msg_text p {
    padding: 0px 20px;
    font-style:italic;
}

#rec_banner {
    width:100%;
	align-items:left;
    background-color:#8cd9af;
    padding:5px;
    font-size:1.4em;
    border-left: 5px solid #3CB371;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
    box-shadow: 2px 2px 2px #cccccc;
}
#rec_text {
    width:100%;
	align-items:left;
    background-color:#ffffff;
	padding:1px 5px;
	font-size:0.9em;
    border-left: 5px solid #3CB371;
    border-bottom-left-radius:2px;
    border-bottom-right-radius:2px;
    box-shadow: 2px 2px 2px #cccccc;
}
#rec_text p {
    padding: 0px 20px;
    font-style:italic;
}
/*------------------------------------------------------*/
/* Page side navigation styles */
#body-row {
	/* border: 1px solid green; */
	display: flex;
	justify-content: space-between;
	align-items:flex-start;
}
#main-cont {
	/* min-height:100vh; */
	/* border: 1px solid purple; */
}
#side-nav-cont {
	z-index:9;
	display: flex;
	position: -webkit-sticky;
	position:sticky;
	font-family:'opensans';
	top: 13.1vh;
	text-align: left;
	/* border: 1px solid red; */
	/* padding: 5px; */
}
#side-nav{
	display: block;
	width: 100%;
	/* border: 1px solid blue */
}
#side-header{
	display:block;
	/* width:100%; */
	background-color: #41678b;
	color: #fff;
	padding: 5px;
	/* border: 1px solid black; */
}
#side-nav ul{
	list-style: none;
}
#side-nav li{
	padding-top:10px;
}
@media (max-width: 1025px) {
	#side-nav-cont { display: none; }
	#main-cont { width: 100%; }
}
/*------------------------------------------------------*/
/* Bottom nav links in index */
#start-btn {
	background-color: #41678b;
	color:#fff;
	border: 1px solid #006ddb;
	padding:10px;
	border-radius:10px;
	text-decoration: none;
	transition: 0.3s ease;
}
#start-btn:hover{
	border-radius:20px;
	background-color:#638eb6;
}
#btm-link {
	height:5em;
	border-radius:10px;
	display: flex;
	align-items: center; 
}
#btm-link a {
	display: flex;
	align-items: center; 
	justify-content: center;
	text-align:center;
	width:100%;
	background-color: #41678b;
	color: #fff;
	padding:10px;
	font-size:1.1em;
	text-decoration: none;
	border:1px solid #006ddb;
	border-radius:10px;
	transition: 0.3s ease;
}
#btm-link a:hover{
	border-radius:20px;
	background-color:#638eb6;
}

@media (max-width: 1025px) {
	#btm-link { display: none;}
}
/*------------------------------------------------------*/
/* Previous/Next button styles */
/* #link-section {
	display:flex;
	min-height:12vh;
} */
#btm-nav {
	z-index:10;
	position: -webkit-sticky;
	font-family:'opensans';
	position:sticky;
	bottom:0px;
	min-height:4vh;
	background-color:#fff;
	border-top:1px solid #294157;
}

#nav-margin {
	/* background-color:#ececec; */
}
#nav-btn-cont {
	display: flex;
	align-items: center; 
	justify-content: center;
}
.nav-btn {
	display: flex;
	align-items: center; 
	justify-content: center;
	width:40%;
}
.nav-btn a {
	display: flex;
	align-items: center; 
	justify-content: center;
	width:100%;
	height:100%;
	font-size:1.2em;
	text-decoration: none;
	border:1px solid #006ddb;
	background-color: #41678b;
	color: #fff;
	border-radius:10px;
	transition: 0.2s ease;
}

.nav-btn a:hover{
	border-radius:20px;
	background-color:#638eb6;
}

@media (max-width: 1025px) {
	.nav-btn-cont { width: 100%; }
	.nav-btn { width: 100%; }
	.nav-btn a { width: 100%; padding: 5px;}
	#nav-btn-margin { width: 0; }
}

/*------------------------------------------------------*/
/* Footer grid styles */
#footer {
	font-family: "Courier New", Courier, monospace;
	background-color: #fff;
	color:#333;
	font-size:0.6em;
	height:3vh;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	border-top:1px solid #333;
	width:100%;
	
}
#footer_text {
}
@media (max-width: 1025px) {
	#footer { height:6vh; }
	#footer_text { top: 25%; }
}

/*------------------------------------------------------*/
/* Grid spacing styles */
#sep_div {
	height:5vh;
}
#vert_line{
	width:1px;
	height:100%;
	background-color:#d3d3d3;
}
#line {
	height:1px;
	background-color:#d3d3d3;
	margin:20px;
}
#section_sep_top {
    width:100%;
    height:3vh;
}
#section_sep_btm {
    width:100%;
    height:2vh;
}
#section_line {
    height:1px;
    border-top:1px solid #999999;
}