html,body {
	height: 100%;
	width: 100%;
	background-color: #FFFFFF;
	margin: 0;
	overflow-y:auto;
	overflow-x:hidden;
	font-family: Verdana, Geneva, sans-serif;
}
div#divStuff font{
	font-family: Verdana,Geneva,sans-serif;
	font-size: .9rem;
}
container{
	min-height: 240px;
	position: relative;
}

form{
	min-height: 100%;
}

a:link, a:visited { /* this defines unclicked, and clicked link properties */
	text-decoration: none; /* you can set this to underline, or none. */
	color: #000000; /* sets color, hexadecimal, right now it is black */
	font-weight: bold; /* sets your font to bold. bold or none are most common here */
}
a:hover, a:active { /* defines mouseover, and clicked/processing links */
	text-decoration: underline; /* set this to the opposite of what rested state links are for it to underline on mouseover */
	color: #000000;
	font-weight: bold;
}
img { /* defines the css for the <img> tag */
	border: 0px; /* set border width to 0 pixels */
}
.header {
	background: #66CCFF; /* older browsers background */
	background: -moz-linear-gradient(#DDFFFF, #66CCFF);
	background: -o-linear-gradient(#DDFFFF, #66CCFF);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DDFFFF),
		to(#66CCFF) ); /* Older webkit syntax */
	background: -webkit-linear-gradient(#DDFFFF, #66CCFF);
	background: -ms-linear-gradient(top, #DDFFFF, #66CCFF);
	background: linear-gradient(to bottom, #DDFFFF, #66CCFF);
	filter: progid :         DXImageTransform.Microsoft.gradient (       
		   startColorstr =    
		    '#DDFFFF', endColorstr =         '#66CCFF', GradientType =        
		0 );
	border-top: thin solid ##EEFFFF;
	border-bottom: thin solid #44BBDD;
	position: absolute;
	top:0;
	left: 0;
	overflow: hidden;
	width:100%;
	/*min-width: 480px;*/
	height: 71px;
	text-shadow: 1px 2px 3px #44BBDD;
}

#wrapper {
	position: absolute;
	top: 73px;
	bottom: 75px;
	left: 0;
	right: 0;
	overflow-y: auto;
	overflow-x: hidden;
	margin: 0 auto;
	width: 80%;
}

#eProFooter{
	position: absolute;
	bottom: 0;
	left:0;
	text-align: center;
	width: 100%;
	height: 75px;
	overflow: hidden;
}

div.spacer{
	clear: both;
	min-height: 65px;
	width: 100%;
	position: static;
}

h1 {
	text-align: center;
	font: bold 16pt Verdana;
	color: #FFF;
	padding: 5pt;
}

button.cpass {
	right: 65px;
	top: 15px;
	position: absolute;
	font: 8pt Verdana;
	margin-top: 0px;
	border-radius: 5px;
	padding: 0px;
}

button.lo {
	right: 15px;
	top: 15px;
	position: absolute;
	font: 8pt Verdana;
	margin-top: 0px;
	border-radius: 5px;
	padding: 0px;
}

.fieldset {
	width: 100%;
	background-color: #FFF;
	font: 12pt Verdana;
	padding: 5pt;
}

UL.menuList {
	background-color: white;
	border: 1pt solid black;
	margin: 5px;
	padding: 2px;
	border-radius: 5px;
	overflow:auto;
	min-height: 55px;
	display:block;
	width:95%;
}

LI.menuItem,LI.lastMenuItem,LI.menuItemGray {
	padding: 10px 5px 5px 5px;
	font: bold 11pt Verdana;
}

LI.menuItem,LI.menuItemGray {
	border-bottom: thin solid #ADAAAD;
}

LI.menuItemGray{
	color:#777777;
}

LI.menuItem{
	cursor: pointer;
	clear: both;
}

H2 {
	font: 12pt Verdana;
	margin-left: 5px;
	margin-right: 5px;
	font-weight:bold;
	display:block;
	/*width:100%;*/
}

DIV.tabBar {
	width: 100%;
	background-color: #66CCFF;
	position: absolute;
	bottom: 0;
	padding-top: 5px;
	text-align: center;
	height: 60px;
	padding-bottom: 10px;
	margin-bottom: 0;
}

DIV.tabBarItem {
	display: inline-block;
	margin: 0 8px;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	font-family: Verdana,Geneva,sans-serif;
	font-size: 10pt;
	height: 50px;
	max-width: 62px;
}

DIV.tabBarItem a{
	color: #ffffff;
	font-family: Verdana,Geneva,sans-serif;
	font-weight: bold;
	font-size: 10pt;
	text-align: center;
	text-decoration: none;
}

DIV.tabBarItem:hover a , DIV.tabBarItem:active a{
	color: #00ffff;
}

#liLeft:hover a, #liRight:hover a {
	color: #10ff10 !important;
}

DIV.tabBarItemLabel{
	width: 100%;
}

.eproMenuLabel{
	display: inline-block;
	width: 40%; 
	min-width: 560px;
}

BUTTON {
	margin-top: 5px;
	border-radius: 5px;
	padding: 5px;
	font: bold 12pt Verdana;
	background-color: #CFCFCF;
}

input:required:invalid{
	background-color: red;
	-moz-box-shadow: none;
}

input:focus:invalid {
	background-color: yellow;
	-moz-box-shadow: none;
}

select {
	padding: 2px;
	font-size: 1.1em;
	margin: 10px;
}

input[type=text], input[type=password]{
	font-size: 1.1em;
}

div.infomessage{
	color:red;
	text-align:center;
	font-style:italic;
	display:inline-block;
	width:100%;
}
.ui-dialog .ui-dialog-titlebar-close {display: none; }
.ui-dialog .ui-dialog-titlebar {/* display: none; */}
.ui-dialog {
	width: 50% !important;
	min-width: 300px !important;
}
.checkboxitem input {
	left: 10px;
	width: auto;
	position: absolute;
	height: 20px;
	top: 1px;
	visibility: visible;
}

input.klb {
	width: 19px;
	height: 25px;
	padding: 0 5px 0 0;
	display: block;
	clear: left;
	float: left;
}

input[type=checkbox].css-checkbox {
	display: none;
}

input[type=checkbox].css-checkbox + label.css-label {
	padding: 0 5px 0 29px;
	height:26px; 
	display:inline-block;
	line-height:26px; 
	margin-bottom: 12px;
	background-repeat:no-repeat;
	background-position: 0 0;
	vertical-align:middle;
	cursor:pointer;
}

input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -26px;
}

input[type=checkbox].css-checkbox + label.css-label-selected {
	padding: 0 5px 0 29px;
	height:26px; 
	display:inline-block;
	line-height:26px; 
	margin-bottom: 12px;
	background-repeat:no-repeat;
	background-position: 0 -26px;
	vertical-align:middle;
	cursor:pointer;
}

label.css-label {
	background-image:url(../images/csscheckbox.png);
	background-size: 25px 52px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
label.css-label-selected{
	background-image:url(../images/csscheckbox.png);
	background-size: 25px 52px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-position: 0 -26px;
}
div.checkboxContainer{
	margin-bottom: 12px;
	height:26px; 
	vertical-align:middle;
}

div.checkboxContainer span{
	display: inline-block;
}
div.checkboxContainer label{
	display: inline-block;
	padding: 0 5px 0 29px;
	cursor:pointer;
	background-repeat:no-repeat;
	line-height:26px; 
}
div.cbLabelDiv {
	display: inline-block;
	line-height: 22px;
	vertical-align: top;
	cursor: pointer;
	width: 90%;
}
div.cbVert {
	position: relative;
	top: -25px;
	left: 12px;
	float: left;
	padding: 0 12px;
}
span.audioContainer{
	display: inline-block;
}
img.audioButton{
	width: 32px;
	height: 25px;
	border: 0;
	cursor: pointer;
	vertical-align: middle;
	padding: 0 4px;
}
#pageInstructionContainer{
	width: 98%;
	z-index: 200;
	color: red;
	position: absolute;
	bottom:110px;
	margin: 0 auto;
	background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 33%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(33%,rgba(255,255,255,0.95)), color-stop(100%,rgba(255,255,255,1))); /* Chrome4-9,Safari4-5 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 33%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 33%,rgba(255,255,255,1) 100%); /* Opera 11.10-11.50 */
	background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 33%,rgba(255,255,255,1) 100%); /* IE10 preview */
	background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.95) 33%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
#pageInstruction {
	font-weight: bold;
	padding: 4px;
	text-align: center;
}

.closeButton {
	cursor: pointer;
	padding: 8px;
	float: right;
}

#lichPass {
	display: inline-block;
	float: left; 
	margin-left: 4%; 
	visibility: hidden;
}
#lilogout {
	display: inline-block;
	float: right; 
	margin-right: 4%;
}
#lilogoutTop {
	display: none;
}
.eProGridQtext{
	display: block;
}

#overlay {
  position: fixed; /* Sit on top of the page content */
  display: block; 
  width: 100%; /* Full width (cover the whole page) */
  height: 100%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.loader {
	position: static;
	left: 50%;
	top: 50%;
	z-index: 1;
	border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 120px;
	height: 120px;
	animation: spin 2s linear infinite;
	-webkit-animation: spin 2s linear infinite;
	margin: 191px auto;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@media only screen and (max-width: 600px) {
	#wrapper {
		position: absolute;
		top: 73px;
		bottom: 75px;
		left: 0;
		right: 0;
		overflow-y: auto;
		overflow-x: hidden;
		margin: 0 auto;
		width: 100%;
	}
	#tblStuff {
		font-size: .9rem;
	}
	
	#tblStuff td {
		width: fit-content;
	}
	
	#lichPass {
		display: none;
	}
	
	#lilogout {
		display: none;
	}
	#lilogoutTop {
		display: inline-block;
		float: right; 
		position: relative;
		top: -46px;
	}
	.eProGridQtext{
		display: block;
	}
	div.cbLabelDiv {
		display: inline-block;
		line-height: 22px;
		vertical-align: top;
		cursor: pointer;
		width: 80%
	}
}