body {
	font-family: "verdana";
	color: black;	
    border: 0;
    margin: 0;
}


.titlebar {
	min-height: 95px;
	background: #12232E; /*#1C3551;*/	
	text-align: center;
	margin: 0 auto;
}



.bannerimage {
   padding-top: 25px;
   padding-left: 25px;
   float: left;  
}

.titlebuttonbox
{
   float: right;
   min-width: 10%;
   margin-top: 6px;
}

.linksbox {
	background-color: #5076B5;
	cursor: pointer;
	border-radius: 8px 8px 8px 8px;
	font-size: medium;
	width: 120px;
	margin: 5px;
	padding: 2px;
	float: left;
}

.links
{
  text-decoration: none;
  color: #FFFFFF;
}

.adminButton {
	background-color: #5076B5;
	color: #FFFFFF;
	width: 120px;
	cursor: pointer;
	border-radius: 8px 8px 8px 8px;
	font-size: medium;
	margin: 5px;
	padding: 2px;
}

	.adminButton:hover {
		background-color: #7096D5;
		color: #FFFF00;
	}

.menubar {
	min-height: 35px;
	margin: 0 auto;
	background: #5076B5;
}

.adminmenubar {
	min-height: 35px;
	margin: 0 auto;
	background: #2A5190;
}

.navigationbar {
   min-height: 35px;
}

.menubuttoncontainer {
   margin: 0 auto; 
   padding: 3px 3px;
}

.projectbutton {
   height: 100%;
   min-width: 100px;
   background: #5076B5;
   text-align: center; 
   color: #FFFFFF;
   text-decoration: none;
   cursor:pointer;
   font-size: 18px;
   border-radius: 5px;
   padding-left: 10px;
   padding-right:10px;

}



.manualbutton {
   height: 24px;
   line-height: 25px;
   text-decoration: none;
   cursor: pointer;
   padding: 10px;
   color: darkblue;
}


.bodyHolder {
	display: flex; /*set all three child divs to same height */
	width: 100%;
	clear: both;
	min-height: calc( 100vh - 165px );
	overflow: auto;
	background: #A0A0A0; /* For browsers that do not support gradients */
	background: -webkit-linear-gradient( #C5C5C5, #dddddd ); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient( #C5C5C5, #dddddd ); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient( #C5C5C5, #dddddd ); /* For Firefox 3.6 to 15 */
	background: linear-gradient( #C5C5C5, #dddddd ); /* Standard syntax */
}

.leftPanelHolder {
	float: left;
	width: 20%;
	min-height: calc( 100vh - 165px );
}

.middlePanelHolder {
	float: left;
	width: 60%;
	min-height: calc( 100vh - 165px );
	background-color: #ffffff;
}

.rightPanelHolder {
	float: right;
	width: 20%;
	min-height: calc( 100vh - 165px );
}

.defaultpara 
{
 margin: 30px auto;
 text-align: justify;
 text-justify: inter-word; 
 width: 50%;
}

.loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background: url('/images/site/spinner.gif') 50% 50% no-repeat rgba(100,100,100,0.4);
}


/*********************************************************************************************
	the footer bar
*********************************************************************************************/

.footer {
	background: #1C3551;
	color: white;
	width: 100%;
	height: 35px;
}

.copyrightdiv {
	font: xx-small;
	min-width: 400px;
    color: white;
    float: right;
    padding-top:5px;
    padding-right:5px;
}

/*********************************************************************************************
	the project page, manual page, and reader
*********************************************************************************************/


.readerdiv 
{
 margin: 0 auto;
 width: 90%;
 text-align: justify;
}

.manualBoxEntry 
{
    background: #8498C2; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient( #8498C2, #CACACA ); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient( #8498C2, #CACACA ); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient( #8498C2, #CACACA ); /* For Firefox 3.6 to 15 */
    background: linear-gradient( #8498C2, #CACACA ); /* Standard syntax */

	min-height: 40px;
	line-height: 35px;
}


/*********************************************************************************************
	                CSS for dynamic formatting for manual reader here
*********************************************************************************************/

.para 
{
 margin: 30px auto;
 text-align: justify;
 text-justify: inter-word; 
}

.projectTitle
{
 margin: 0 auto;
 width: 100%;
 display:block;
 font-size: x-large;
 text-align: center;
}

.parablock
{
	margin: 0 auto;
	text-align: justify;
}


/* the code listing css */

.codeblock {
	width: 100%;
	margin: 0 auto;
	font-family: Consolas;
	overflow: auto;
	background-color: #C1FFF3;
	padding: 6px;
	border-radius: 5px 5px 5px 5px;
}


table.codetable
{
	border-collapse: collapse;
}

td.codecol {
	white-space: pre;
	background-color: #C1FFF3;
	padding-left: 5px;
	color: black;
	width: 100%;
}

td.altcodecol {
	white-space: pre;
	background-color: #78FFF2;
	padding-left: 5px;
	color: black;
	width: 100%;
}

td.numcol {
	width: 50px;
	background-color: #C1FFF3;
	text-align: right;
	padding-right: 5px;
	color: darkblue;
}

td.altnumcol {
	width: 50px;
	background-color: #78FFF2;
	text-align: right;
	padding-right: 5px;
	color: darkblue;
}

/* regular tables */
table.regular {
	border: 1px solid;
	border-collapse: collapse;
	margin-left:auto;
	margin-right:auto;
}

td.regularcol {
	white-space: pre;
	border: 1px solid;
	padding-left: 10px;
	padding-right: 10px;
}

th.regularcol {
	white-space: pre;
	border: 1px solid;
	text-align: center;
}

/* headers and captions */
h1
{
	text-align: center;
}

h2 
{
	text-align: center;
}

.captionblock
{
	text-align: center;
	font-size: 90%;
	min-width: 50px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50px;
}

/* for images and diagrams */
.illusblock 
{
	margin-top: 50px;
	display: block;
}

IMG.illus 
{
	min-width: 50px;
	max-width: 90%;
    display: block;
	margin-top: 10px; 
    margin-left: auto;
    margin-right: auto
}

/* for you-tube videos */
iframe {
	margin: 0 auto;
	display: block;
}

/* bullet lists */
li{
  margin: 10px 0;
}

/*********************************************************************************************
	blog entries
*********************************************************************************************/

.blogPanel
{
	margin: 0 auto;
	width: 90%;
}

.blogDateDiv
{
	width: 200px;
	height: 25px;
	float: left;
	background-color: #12232E; /*#1C3551;*/
	color: white;
	border-radius: 5px 5px 0px 0px; 
	padding-left: 10px;
	padding-right: 10px;
}

.blogTitleDiv
{
	width: 90%;
	height: 25px;
	float: left;
	border: 1px solid #5076B5;
	background-color: #5076B5;
	color: white;
	border-radius: 0px 5px 0px 0px; 
	padding-left: 10px;
	padding-right: 10px;
}

.blogContentDiv
{
	width: 90%;
	float: left;
	border: 1px solid #5076B5;
	border-radius: 0px 0px 5px 5px; 
	background-color: #E4F1F1; /* #EEFBFB; /*#F9F8A7;*/
    text-align: justify;
    text-justify: inter-word; 
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
	margin-bottom: 30px;
	white-space: pre-line;
	overflow-wrap: break-word;	
	font-size: 12px;
}

/*************************************************************************
	the contact form
*************************************************************************/
.contactdiv 
{
    margin: 0 auto;
    width: 900px;	
    padding-top: 10px;
	padding-left: 10px;
    padding-bottom: 10px;
    border: 2px solid black;
    background-color: #dddddd;
    border-radius: 5px 5px 5px 5px; 
}

.textinput 
{
    width: 190px; 
    height: 20px;    
}

.textfieldlabel 
{
   text-align: right;
   width: 300px;
   float: left;
}

.contactComments 
{
	width: 900px;
}