body
	{
	padding: 0px;
	margin: 0px;
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	background-image: url("/i/bkgd.gif");
	}

body, p, table, input, textarea
	{
	font-size: 0.9rem;
	}

#header
	{
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	border-style: none;
	}
#header td
	{
	padding: 0;
	}


#headerleft
	{
	background-color: white;
	}

#headermiddle
	{
	height: 100%;
	width: 20vw;
	background-image: linear-gradient(to right, white, #e65100);
	}

#headerright
	{
	background-color: #e65100;
	font-size: 3vw;
	text-align: center;
	color: white;
	}


#productlogo
	{
	max-width: 20vw;
	max-height: 20vh;
	height: auto;
	padding: 1vw 2vw 1vw 2vw;
	}

#leftimage
	{
	max-width: 60%;
	height: auto;
	float: left;
	padding: 0 3.8vw 0 0;  /* right padding should match left padding of .narrowcontent */
	}

#companylogo
	{
	padding: 0.2em 2em 0.2em 0;
	height: 2em;
	width: auto;
	float: left;
	}

.topnav 
	{
/*	clear: both; */
	background-color: #333;
	overflow: hidden;
	}

.topnav a 
	{
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	padding: 14px 16px;
	background-color: #666;
/*	border-style: ridge; */
	border-width: 1px 1px 1px 0;
	border-style: solid;
	border-color: #333;
	text-decoration: none;
/*	font-size: 17px; */
	}

.topnav a:hover 
	{
	background-color: #ddd;
	color: black;
	}

.widecontent
	{
	padding: 3.8vh 4.8vw;
	margin: 0 0 0 0;
	}

 /* for little diagrams within the page */
.widecontent img
	{
	margin: 0 0 1em 4.8vw;  /* top margin is 0 because normally at top of paragraph, and want to align with top of paragraph */
	float: right;
	clear: right;
	}

.narrowcontent
	{
	padding: 1.8vh 3.8vw;
	margin: 0 0 0 0;
	}

.sidebar
	{
	float: right;
	clear: right;
	background-color: #86aecf;
	width: 45%;
	border-radius: 2em;
	padding: 1.8vh 3.0vw;
	margin: 1.0vh 0 1.0vh 3.0vw;
	color: #000033;
	}


a.active 
	{
/*	background-color: #4CAF50; */
	background-color: #ac4710;
	color: white;
	}

#main
	{
	border-spacing: 0;
	border-collapse: collapse;
	background-color: #dce8f2;
	color: #333;
	width: 100%;
	border-style: solid;
/*	border-width: 1px 0 0 0; */
	border-width: 0;
	border-color: #c7c3c0;
	}
#main td
	{
	padding: 0;
	color: #333;
	}

#footer
	{
	padding: 0.5em 4.8vw 0.5em 4.8vw;  /* size on sides should match .widecontent so Hot Neuron logo aligns with text */
	background-color: #74a5cd;
	color: #dce8f2;
	width: 100%;
	border-style: solid;
/*	border-width: 1px 0 0 0; */
	border-width: 0;
	border-color: #dce8f2;
	}
#footer td
	{
	padding: 0;
	}


h1
	{
	text-align: center;
	font-size: 150%;
	color: #000099;
	}

h2
	{
	text-align: center;
	font-size: 120%;
	color: #000099;
	}

#main a:link, #main a:active, #main a:visited
	{
	color: #133f99;
	text-decoration: none;
	font-style: italic;
	font-weight: bold;
	}

#main a:hover
	{
	color: #ef5500;
	text-decoration: underline;
	}

#main a:hover img
	{
	border: none;
	}


#footer a:link, #footer a:active, #footer a:visited
	{
	color: #133f99;
	text-decoration: none;
	font-style: italic;
	font-weight: bold;
	}

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

#footer a:hover img
	{
	border: none;
	}


.formcontainer
	{
	clear: both;
	background-color: #ccd0dd;
	border: 1px solid #999;
	margin-top: 1em;
	margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto;
	padding: 0.4em;
	max-width: 40em;
	}

.formcontainer form
	{
	padding: 0;
	margin: 0;
	}

.formlabelcontainer
	{
	width: 20%;
	float: left;
	}

.formlabelcontainer label
	{
	display: inline-block;
	}

.forminputcontainer
	{
	width: 80%;
	float: left;
	}

.forminputcontainer input, .forminputcontainer textarea
	{
	width: 100%;
	border: 1px solid #999;
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	color: #333;
	}

.formitem
	{
	margin: 0.2em 0 0.2em 0;
	}

.formitem:after
	{
	content: "";
	display: table;
	clear: both;
	}

.submit 
	{
	border: 1px outset #cccccc;
	padding: 4px;
	background-color: #dde1ee;
	color: #333333;
	font-weight: bold;
	}

.submit:hover 
	{
	border: 1px outset #c0c7db;
	background-color: #b1bcdb;
	} 

.errorBox 
	{
	border-top: 1px solid #ff9900;
	border-bottom: 1px solid #ff9900;
	background-color: #ffeedd;
	color: #000;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 10px;
	width: auto;
	}


@media only screen and (max-width: 500px)
	{
	.topnav 
		{
		font-size: 80%;
		}
	.topnav a
		{
		padding: 12px 14px;
		}
	}

@media only screen and (max-width: 420px)
	{
	.topnav 
		{
		font-size: 70%;
		}
	.topnav a
		{
		padding: 10px 10px;
		}
	}

 /* If screen is too narrow, avoid putting things side-by-side (which makes text column too narrow) */
@media only screen and (max-width: 500px)
	{
	 /* move leftimage above the content and crop a little off top and bottom via negative margin */
	.crop
		{
		width: 100%;
		overflow: hidden;
		}
	#leftimage
		{
		max-width: 100%;
		float: none;
		padding: 0 0 0 0;
		margin: -15% 0 -25% 0;
		}

	#main
		{
		border-width: 0 0 0 0;
		}

	 /* Move an small figures and sidebars onto own line (no wrapping text around) and shrink to fit window if needed. */
	.widecontent img
		{
		float: none;
		display: block;
		margin: 1em 0 1em 0;
		margin-left: auto;
		margin-right: auto;
		max-width: 100%;
		height: auto;
		}
	.sidebar
		{
		clear: both;
		float: none;
		width: 90%;
		margin: 0 0 0 0;
		margin-left: auto;
		margin-right: auto;
		}

	.formlabelcontainer, .forminputcontainer
		{
		width: 100%;
		clear: both;
		}
	}