<style type="text/css">

html {
	font-family: Roboto, Arial, Helvetica, sans-serif;
}

body {
	color: #0F0000;
	background-color: #ffffff;
	font-family: Roboto, Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 12pt;
	margin: 0 auto;
	padding: 0;
	height: 100%;
}

.outerwrapper {
	min-height: 100%;
	position: absolute;
	width: 100%;
	background-color: #edeef0;  /*#ffffff;*/
	margin: 0 auto;
	left: 0;
	top: 0;
}

.innerwrapper {
	top: 0;
	left: 0;
	padding-top: 0px;		/* Match navbar height */
	padding-bottom: 165px;	/* Match footer height */
	/*position: absolute;*/
    z-index: -1;
	overflow-y: auto;
	overflow-x: hidden;
	box-sizing: border-box;
	margin: auto;
	background-color: #edeef0;
}

.myIntro  {
	margin-left: auto;
	margin-right: auto;
	max-width: 980px;
	/*background-color: red;*/
	padding: 0;
	padding-top: 60px;		/* Match navbar height */
	clear: both;
	box-sizing: border-box;	
    z-index: -1;
	font-family: Arial, Helvetica, sans-serif;
}

.mycontent  {
	margin-left: auto;
	margin-right: auto;
	max-width: 1210px;
	/*background-color: red;*/
	padding: 0;
	padding-top: 60px;		/* Match navbar height */
	clear: both;
	box-sizing: border-box;	
    z-index: -1;
	font-family: Arial, Helvetica, sans-serif;
}

/*
.mycontent {	
	padding-bottom: 140px;
    z-index: -1;
	font-family: Arial, Helvetica, sans-serif;
	overflow: auto;
	box-sizing: border-box;
	margin: auto;
	max-width: 1300px;
}
*/


/*
.primary {
	top: 0px;
	max-width: 750px;
	box-sizing: border-box;
	float: left;
	padding-left: 20px;
	padding-right: 20px;
}
*/

.lIntroPanel {
	float: left;
	/*width: 100%;*/	/* 67% */
	max-width: 630px;
	/*
	min-width: 68px;
	max-width: 650px;
	*/
	padding: 10px;
	/* background-color: blue;*/
	overflow: hidden;
	margin: auto;
	box-sizing: border-box;	
	text-align: center;
	margin: auto;
}



.tutBlock {
	padding-top: 8px;
	padding-bottom: 16px;
	float: left;
	clear: both;
}

/*
.rmargin {
	top: 0px;
	padding-top: 90px;
	padding-left: 30px;
	max-width: 450px;
	overflow: auto;
	box-sizing: border-box;
	float: left;
}
*/

.rmargin {
	float: right;
	width: 33%;
	text-align: center;
	margin: auto;
	box-sizing: border-box;	
}

.lPanel {
	float: left;
	width: 200px;
	background-color: #808080;
	overflow: hidden;
	margin: auto;
	box-sizing: border-box;
	position: fixed;
	/*height: 100%;*/
	overflow-y: auto;
	margin-left: 5px;
	margin-right: 5px;
	padding: 3px;
	color: #ffffff;
	border-color: #d9d9d9;
	border-width: 1px;
	border-style: solid;
	border-radius: 7px;
}

.lPanel ul, ol {
	list-style-type: none;
	padding-left: 3px;
	list-style: none;
	font-size: 11pt;
}

.lPanel ul,ol > li {
	padding-bottom: 7px;
}

.lPanel li a {
	color: white;
	text-align: left;
	text-decoration: underline;
}

.lPanel li a:hover:not(.active) {
	color: yellow;
}

.cPanel {
	float: left;
	width: 100%;
	max-width: 710px;
	padding: 10px;
	/*background-color: blue;*/
	overflow: hidden;
	margin: auto;
	box-sizing: border-box;
	margin-left: 210px;	
	/*
	margin-right: 10px;
	*/
	background-color: #ffffff;
	border-color: #d9d9d9;
	border-width: 1px;
	border-style: solid;
	border-radius: 7px;
	line-height: 1.35;
}

hr {
	border-top: 1px solid #e6e6e6;
}
/*
.topic {
	background-color: #ffffff;
	width: 100%;
	display: block;
	clear: both;
	border-color: #d9d9d9;
	border-width: 1px;
	border-style: solid;
	border-radius: 7px;
	margin: 0 5px 10px 5px;
	padding: 5px;
	line-height: 1.35;
}
*/

.rPanel {
	float: left;
	width: 250px;
	padding: 0px;
	padding-left: 5px;
	/*background-color: blue;*/
	overflow: hidden;
	margin: auto;
	box-sizing: border-box;	
}

/*
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	width: 330px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	float: left;
	background-color: #f2f2f2;
	border-color: #cccccc;
*/


.maillist {
	/*top: 0;*/
	overflow: auto;
	box-sizing: border-box;
	float: left;
	background-color: #f2f2f2;
	border-color: #cccccc;

	padding: 2px 10px 5px 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 10px;
	margin-right: 0px;
	
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	
	width: 80%;

}

.mlRequest {

}

.mlResponse {
	display: none;
	margin: 20px;
	color: #009933;
}

/*
button.mlist {
  border: none;
  outline: 0;
  display: inline-block;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
}
*/

.news {
	/*top: 0;*/
	overflow: auto;
	box-sizing: border-box;
	float: left;
	background-color: #f2f2f2;
	border-color: #cccccc;

	padding: 2px 5px 10px 10px;
	margin-top: 110px;
	margin-bottom: 2px;
	margin-left: 0px;
	margin-right: 0px;
	
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	
	width: 100%;
}

.newsScroll {
	height: 300px;
	overflow-y: auto;
}

h4.rmrgn {
	color: #009933;
	margin: 5px 0px 15px 0px;
}


p.newsTitle {
	padding: 0px 0px 5px 0px; /* 0px; */
	margin: 0px; /*5px 0px 0px 0px;*/
	color: black;
	/*font-weight: bold; */
}

p.newsDate {
	padding: 0px 0px 25px 0px; /* 0px; */
	margin: 0px;
	color: gray;
	font-size: 9pt;
}

p.tutByline {
	padding: 2px 0px 2px 8px; /* 0px; */
	margin: 0px;
	color: gray;
	font-size: 9pt;
}

p.tutDescr {
	padding: 6px 0px 0px 8px; /* 0px; */
	margin: 0px;
	color: black;
	font-size: 11pt;
}

.headerlogo {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


a.xcontent:link    	{color:#009933;text-decoration:none;font-weight:normal;}
a.xcontent:visited 	{color:#009933;text-decoration:none;font-weight:normal;}
a.xcontent:hover   	{color:#00e64d;text-decoration:underline;font-weight:normal;}
a.xcontent:active  	{color:#00e64d;text-decoration:underline;font-weight:normal;}

a.teletype 			{font-family: "Lucida Console", Monaco, monospace;}

a.tutTitle:link		{color:#009933;text-decoration:none;font-weight:bold;font-size:14pt;}
a.tutTitle:visited  {color:#009933;text-decoration:none;font-weight:bold;font-size:14pt;}
a.tutTitle:hover {color:#00e64d;text-decoration:underline;font-weight:bold;font-size:14pt;}
a.tutTitle:active  {color:#00e64d;text-decoration:underline;font-weight:bold;font-size:14pt;}


.teammember {
	border-style: solid;
	border-width: 1px;
	border-radius: 5px;
	width: 240px;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 10px;
	padding: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	/*float: left;*/
	background-color: #808080; /*#f2f2f2;*/
	border-color: #666666;
	display: inline-block;
	text-align: left;
	line-height: 1.0;
}

a.mbrLink:link    {color:white;text-decoration:underline;font-weight:bold;}
a.mbrLink:visited {color:white;text-decoration:underline;font-weight:bold;}
a.mbrLink:hover   {color:#ff8000;text-decoration:underline;font-weight:bold;}
a.mbrLink:active  {color:#ff8000;text-decoration:underline;font-weight:bold;}

.mbrName { 
	font-weight: bold;
	padding: 0px 0px 0px 2px;
	margin: 0px;
	color: #ff8000;
}

.mbrTitle {
	color: #e6e6e6;
	padding: 4px 0px 8px 2px;
	margin: 0px;
	font-size: 10pt;
	font-weight: bold;
}

.mbrDescr {
	color: #e6e6e6;
	padding: 2px 0px 2px 2px;
	margin: 0px;
	font-size: 10pt;
}


/* navbar */
/* MOVED TO navbar.css 
 * This will allow us to share just that styling with scratch.css (which
 * has its own set of styles).
*/




/* footer */
.myfooter {
	position: absolute;
	bottom: 0;
	left: 0;

	overflow: hidden;
	width: 100%;
	height: 130px;	/* Must match content padding */
	color: #FFFFFF;
	background-color: #404040;;
	
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	font-size: 10pt;
}


.myfooter ul {
	list-style-type: none;
	padding-left: 0;
	list-style: none;
}

.myfooter li {
	text-decoration: none;
}

.myfooter li a {
	color: white;
	text-align: left;
	text-decoration: none;
}

.myfooter li a:hover:not(.active) {
	color: yellow;
}

.link-col {
	/*float: left;*/
	/*width: 19.0%;*/
	/*margin: auto;*/
	text-align: left;
	width: 150px;
	display: inline-block;
	vertical-align: top;
}

.footer-table {
	/*width: 1040px; */
	width: 100%;
	/*margin: auto;*/
	margin: 0;
	text-align:center;
}

.footer-logos {
	/*float: left;*/
	/*width: 20.0%;*/
	padding-top: 8px;
	padding-left: 10px;
	text-align: left;
	width: 270px;
	display: inline-block;
}

.footer-legal {
	float: left;
	padding-left: 8px;
	padding-bottom: 8px;
	font-size: 8pt;
}


/* Stuff for shaded boxes (see "Features" on index.html).
   From https://www.w3schools.com/howto/howto_css_team.asp
*/
*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 100%;		/* MAY WANT TO REDUCE THIS? */
  margin-bottom: 16px;
  padding: 0 8px;
}

@media screen and (max-width: 650px) {
  .column {
    width: 100%;
    display: block;
  }
}

.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  	border-radius: 5px;
}

.container {
  padding: 0 16px;

}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}


.topic {
	/*box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.9);*/
	background-color: #ffffff;
	width: 100%;
	display: inline-block;
	clear: both;
	border-color: #d9d9d9;
	border-width: 1px;
	border-style: solid;
	border-radius: 7px;
	margin: 0 0px 15px 0px;
	padding: 0px;
	line-height: 1.35;
	box-sizing: border-box;
}

.topic h3 {
	margin: 0px;
	padding: 7px 7px 7px 15px;
	/*margin-top: 1px;*/
	color: white;
	background-color: #008000;
	width: 100%;
	border-radius: 6px 6px 0 0;
	border-width: 0px;
	/*z-index: 99;*/
}

.topic .inner, .faqs {
	padding: 5px 15px;	
}

.topic .inner ul.main {
	margin-top: 10px;
	padding-left: 15px;
}

.topic .inner ul.main > li {
	padding-bottom: 10px;
}


.topic .inner ul.clog1 {
	margin-top: 10px;
	padding-left: 15px;
}
.topic .inner ul.clog1 > li {
	padding-bottom: 5px;
	font-weight: bold;
}

.topic .inner ul.clog2 {
	margin-top: 3px;
	padding-left: 25px;
	font-size: 11pt;
}

.topic .inner ul.clog2 > li {
	padding-bottom: 5px;
}


.faqs ul {
	padding-left: 15px;
}
.faqs li {
	font-weight: bold;
	font-size: 12pt;
}

/*.faqs p {
	color: #333333;
	font-weight: normal;
	font-size: 11pt;
}
*/

.code {
  color: white;
  background-color: grey;
  font-family: "Lucida Console", Monaco, monospace;
  border-style: solid;
  border-width: 1px;
  padding: 4px;
}
/* end of meet the team */



/* Not sure if we'll use this button stuff: */
.button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.button:hover {
  background-color: #555;
}

ul.myList {
	margin-top: 5px;
}
ul.myList > li {
	padding-bottom: 5px;
}

ol.myList {
	margin-top: 7px;
}
ol.myList > li {
	padding-bottom: 7px;
}


.helpWarning {
	color: #cc6600;	
	margin: 20px 20px;
	padding: 10px;
	border-radius: 8px;
	border-style: solid;
	border-width: 1px;
	border-color: #757575;
	background-color: #f8f9fa; /* #bfbfbf; */
	box-sizing: border-box;
	overflow: auto;
	clear: left; 
	display: block;
}

.helpInfo {
	color: #000099;	
	margin: 20px 20px;
	padding: 10px;
	border-radius: 8px;
	border-style: solid;
	border-width: 1px;
	border-color: #000099;
	background-color: #f8f9fa;
	box-sizing: border-box;
	overflow: auto;
	clear: left; 
	display: block;
}

.helpTip {
	color: #000000;	
	margin: 20px 20px;
	padding: 10px;
	border-radius: 8px;
	border-style: solid;
	border-width: 1px;
	border-color: #757575;
	background-color: #f8f9fa; /* #bfbfbf; */
	box-sizing: border-box;
	overflow: auto;
	clear: left; 
	display: block;
}

.helpIconFloat  {
	float: left;
	overflow: auto;
}

.helpMsgFloat  {
	float: left;
	overflow: auto; 
	padding-left: 20px; 
	padding-top :0;
	width: calc((100% - 70px));
}

.helpMsgPara  {
	text-align: left;
	padding: 0; 
	margin: 0;
}

p.first {
	margin-top: 10px;
}


@media screen and (max-width: 900px) {
  .tinyfooter {
  	display: block;
  }
  .footer-table, .lPanel {
  	display: none;
  }	

 
  .cPanel {
    margin: 0;
  	margin-left: 0px;
  	margin: auto;
  }
/*
  .mycontent {
  	max-width: 98%;
  }
*/  
}

@media screen and (min-width: 901px) {
  .tinyfooter {
  	display: none;
  }
  .footer-table {
  	display: block;
  }
}

</style>