body 
{
  background-image : url(../images/background.jpg);
  width : auto;
  height : auto;
  font-family:       verdana, arial, helvetica, sans-serif;
  font-size        : 10pt;
  color            : #000000;
  margin           : 5px 0px 5px 5px;
  height: 99%;		
  Xbackground-repeat : no-repeat;
  Xbackground-position : center center; 
  Xbackground-attachment : fixed;
}
html
{
  height : 99%;
  margin : 0px;
}



p 
{
  font-family:       verdana, arial, helvetica, sans-serif;
  font-size:         10pt;
  color:             #000000;
	padding:           0px;
  margin:            0px;		
}



h1 {font-family:verdana, arial, helvetica, sans-serif; font-size:20pt; color:#000000;} 
h2 {font-family:verdana, arial, helvetica, sans-serif; font-size:15pt; color:#000000;} 
h3 {font-family:verdana, arial, helvetica, sans-serif; font-size:12pt; color:#000000;} 
h4 {font-family:verdana, arial, helvetica, sans-serif; font-size:10pt; color:#000000;} 



hr
{
  border-top    : 1px solid #ccc;
  border-bottom : 0px solid #ccc;	
}




/*#6fa5e7=blue like*/       
fieldset
{
  padding          : 1px 5px 5px 5px;
	margin           : 0px 0px 0px 0px;
  border           : 1px solid gray;
  border-radius    : 5px;	
  display          : inline-block;	
  background-color : #cccccc;                 
}
.fieldset01 {border-width : 0px; padding : 3px 5px 5px 5px;} 
.fieldset02 {border-width : 1px; padding : 3px 5px 5px 5px; background-color : transparent;} 

legend
{
  font-family      : verdana, arial;
  font-size        : 10pt;
  font-weight      : bold;	
  color            : navy;
  padding          : 0px 2px 0px 2px;
  margin           : 0px 0px 0px 0px;
  text-align       : left; 				
}












form
{
  margin       : 0px 0px 0px 0px;
  padding      : 0px 0px 0px 0px;
}
.formstyle01 {border-width : 0px; padding : 0px 0px 0px 0px; margin : 0px 0px 0px 0px;}












table 
{
  font-family : verdana, arial;
  font-size   : 10pt;
  color       : #000000;
}
td
{
	font-family : verdana, arial; 
	font-size   : 10pt; 	
  margin      : 0px 0px 0px 0px;
  padding     : 0px 3px 0px 3px;
}
caption 
{
  caption-side : top;
  text-align   : left; 			
}
th 
{
	font-family      : verdana, arial; 
	font-size        : 10pt; 
	color            : navy; 
	background-color : #dedede; 
	text-align       : center; 
	padding          : 0px 5px 0px 5px;
	height           : 30px;
}

/*display group*/
/*margin and padding doesnt work on table*/

/*new record, edit record*/
/*when changing table02.tr.height, change also table02.input.padding*/



.tableEdit
{
  font-family    : verdana, arial;
  font-size      : 10pt;
  color          : #000000;
  border-spacing : 1px;	
}
.tableEdit tr 
{
}
.tableEdit td
{
  font-family  : verdana, arial;
  font-size    : 10pt;	
  margin       : 0px 0px 0px 0px;
  padding      : 0px 2px 0px 2px;
  height       : 22px;	
  border-width : 0px;	
}
.tableEdit input[type=text], input[type=password]
{
  font-family  : verdana, arial;
  font-size    : 10pt;
  color        : navy;
  height       : 22px;		
  border-width : 0px 0px 0px 0px;
  padding      : 0px 2px 0px 3px;
	margin       : 0px;	
	line-height : 175%
}
.tableEdit select
{
  font-family  : verdana, arial;
  font-size    : 10pt;
  color        : navy;
  border-width : 0px 0px 0px 0px;
	margin       : 0px 0px 0px 0px;
  padding      : 0px 0px 0px 0px;	
  -moz-padding-start : 3px;	
	hXeight : 21px;
}
.tableEdit input[type=text]:hover, input[type=password]:hover, select:hover
{
  outline    : 1px solid #72a4e0; 
}

/*2021-10-24 same as tableEdit, background added*/
.tableEditWBg
{
  font-family    : verdana, arial;
  font-size      : 10pt;
  color          : #000000;
  border-spacing : 1px;	
  background-color : #6fa5e7;	
}
.tableEditWBg tr 
{
}
.tableEditWBg td
{
  font-family  : verdana, arial;
  font-size    : 10pt;	
  margin       : 0px 0px 0px 0px;
  padding      : 0px 2px 0px 2px;
  height       : 22px;	
  border-width : 0px;	
}
.tableEditWBg input[type=text], input[type=password]
{
  font-family  : verdana, arial;
  font-size    : 10pt;
  color        : navy;
  height       : 22px;		
  border-width : 0px 0px 0px 0px;
  padding      : 0px 2px 0px 3px;
	margin       : 0px;	
	line-height : 175%
}
.tableEditWBg select
{
  font-family  : verdana, arial;
  font-size    : 10pt;
  color        : navy;
  border-width : 0px 0px 0px 0px;
  padding      : 3px 0px 3px 0px;	
	margin       : 0px;
}
.tableEditWBg input[type=text]:hover, input[type=password]:hover, select:hover
{
  outline    : 1px solid #72a4e0; 
}












/*2021-09-30*/
.tableEditAjx
{
  font-family    : verdana, arial;
  font-size      : 10pt;
  color          : #000000;
  border-spacing : 0px;	
}
.tableEditAjx tr 
{
  height      : 21px;
}
.tableEditAjx td
{
  font-family  : verdana, arial;
  font-size    : 10pt;	
  margin       : 0px 0px 0px 0px;
  padding      : 0px 2px 1px 2px;
  height       : 21px;	
}  
.tableEditAjx input[type=text]
{
  font-family  : verdana, arial;
  font-size    : 10pt;
  color        : navy;
  height       : 20px;		
  border-width : 0px 0px 1px 0px;
  padding      : 2px 3px 2px 3px;
	margin       : 0px;	
}
.tableEditAjx input[type=password]
{
  font-family  : verdana, arial;
  font-size    : 10pt;
  color        : navy;
  height       : 20px;		
  border-width : 0px 0px 1px 0px;
  padding      : 2px 3px 2px 3px;
	margin       : 0px;	
}
.tableEditAjx select
{
  font-family  : verdana, arial;
  font-size    : 10pt;
  color        : navy;
  border-width : 0px 0px 1px 0px;
  padding      : 2px 3px 3px 3px;
	margin       : 0px;
}


















.th10 {font-family: verdana, arial; font-size: 10pt; color: navy; background-color: #dedede; text-align : center; padding : 0px 5px 0px 5px;}

.thA {font-family: verdana, arial; font-size: 10pt; color: navy; background-color: #dedede; text-align : left; padding : 0px 5px 0px 5px; height : 25Px; border-width : 0px;}

/*ex : employee/displayindl.php, for individual display*/
/*when changing table01.tr.height, change also table01.input.padding*/

.table01
{
  font-family : verdana, arial;
  font-size   : 10pt;
  color       : #000000;
}
.table01 tr 
{
  height      : 21px;
}
.table01 td
{
  margin       : 0px 0px 0px 0px;
  padding      : 0px 0px 0px 0px;
}
.table01 input
{
  font-family  : verdana, arial;
  font-size    : 10pt;
  color        : navy;
  border-width : 0px 0px 1px 0px;
  padding      : 1px 3px 1px 3px;
}

/*2021-09-09 no forms*/
.table02
{
  font-family : verdana, arial;
  font-size   : 10pt;
  color       : #000000;
  background-color : lightgray;	
}
.table02 tr 
{
  height      : 23px;
}
.table02 td
{
  height           : 11px;	
  margin           : 0px 0px 0px 0px;
  padding          : 0px 4px 0px 4px;
	text-align       : left;
  bXackground-color : transparent;		
  background-image : url(../images/background_index.png);	
}

/*2021-09-09 no forms*/
.table02Ar
{
  font-family : arial, vXerdana;
  font-size   : 10pt;
  color       : #000000;
}
.table02Ar tr 
{
}
.table02Ar td
{
}







.table04
{
  font-family : verdana, arial;
  font-size   : 10pt;
  color       : #000000;
}
.table04 tr 
{
  height      : 21px;
}
.table04 td
{
  margin      : 0px 0px 0px 0px;
  padding     : 0px 2px 1px 2px;
  font-family : verdana, arial;
  font-size   : 10pt;
  color       : #000000;	
}
.table04 input[type="text"]
{
  font-family  : verdana, arial;
  font-size    : 10pt;
  color        : navy;
  border-width : 0px 0px 1px 0px;
  padding      : 1px 3px 1px 3px;
}


 










/*2021-10-23*/
.tableDisp1
{
  font-family    : verdana, arial;
  font-size      : 10pt;
  color          : #000000;
  border-spacing : 1px;		
}
.tableDisp1 tr 
{
}
.tableDisp1 td
{
  font-family  : verdana, arial;
  font-size    : 10pt;	
  margin       : 0px 0px 0px 0px;
  padding      : 0px 2px 0px 2px;
  height       : 17px;	
  border-width : 0px;	
}
.tableDisp1 input[type=text]
{
  font-family  : verdana, arial;
  font-size    : 10pt;
  color        : navy;
  border-width : 0px 0px 0px 0px;
  padding      : 0px 2px 0px 3px;
	margin       : 0px;	
}
.tableDisp1 input[type=text]:hover, input[type=password]:hover, select:hover
{
  outline    : 1px solid #72a4e0; 
}
.tableDisp1 input[type=button]
{
  height       : 17px;		
}









/*
input[type=text]:hover
{
  background-color: lightblue;
  bXackground-color: powderblue;
  transition: background-color .5s;	
}
*/










/*font-size & line-height disabled 2021-09-02*/
/*enabling font-size will disable class input8/9/10 - for verification*/
input[type="text"], [type="password"]
{
  fXont-family  : verdana, arial, helvetica, sans-serif;
  fXont-size    : 10pt;
  color        : navy;    
	width        : auto;
  height       : 19px;	
	padding      : 1px 3px 1px 3px;
	margin       : 0px 0px 0px 0px;
  border-width : 0px 0px 1px 0px;
  border-color : #72a4e0;
  border-style : solid;
}
input[type=text]:hover
{
  border-color : navy;
}
input[type=password]:hover
{
  border-color : navy;
}
/*dont work in IE*/

input[type=text]:focus
{
  outline    : 1px solid #72a4e0; 
  background : #a4ffff;	
}
input[type=password]:focus
{
  outline    : 1px solid #72a4e0; 
  background : #a4ffff;	
}
/*dont work in IE*/
input[type=text]:disabled
{
  color            : gray; 
  background-color : lightgray;	
  pointer-events   : none;	
  cursor           : not-allowed;	
  outline          : none;	
}












input[type="button"]
{
  font-family   : vXerdana, arial, helvetica, sans-serif;
  font-size     : 10pt;
  color         : #000000;
  width         : 60px;	
  height        : 21px;		
  text-align    : center; 	
  cursor        : pointer;	
  border-width  : 1px;
  border-color  : #72a4e0;
  border-style  : solid;	
  border-radius : 5px;
	padding       : 0px 0px 0px 0px;		
	margin        : 1px 1px 0px 0px;
  display       : inline-block;
}
input[type="button"]:hover
{
	font-weight      : bold;
  font-family      : vXerdana, arial, helvetica, sans-serif;
  font-size        : 10pt;	
  color            : navy;
  background-color : #ccf3ff;	
}
input[type="button"]:disabled
{
  background-color : #dddddd;
  color            : gray;		
  font-weight      : normal;
}
input[type="button"]:disabled:hover
{
  background-color : #dddddd;	
  color            : gray;		
  font-weight      : normal;
  cursor           : not-allowed;		
}
.button1
{
  font-family   : vXerdana, arial, helvetica, sans-serif;
  font-size     : 10pt;
  color         : #000000;
  width         : 60px;	
  height        : 21px;		
  text-align    : center; 	
  border-width  : 1px;	
  cursor        : pointer;	
  border-color  : #72a4e0;
  border-style  : solid;
	padding       : 0px 0px 0px 0px;		
	margin        : 1px 1px 0px 0px;
  display       : inline-block;
  border-radius : 5px;
}
















select {
    -webkit-appearance    : button;
    -moz-appearance       : button;
    -ms-appearance        : auto;	
    appearance            : auto;
    -webkit-user-select   : none;
    -moz-user-select      : none;
    -webkit-padding-end   : 20px;
    -moz-padding-end      : 20px;
    -webkit-padding-start : 2px;
    -moz-padding-start    : 2px;
    background-color : #fff;
    border           : 1px solid #72a4e0;
    border-radius    : 3px;
    margin           : 1px 0px 1px 0px;
    padding          : 1px;
    white-space      : nowrap;
    font-family      : verdana, arial, hlevetica, sans-serif;
    font-size        : 10pt;
    color            : #0000ff;  
    overflow         : auto;
    bXox-shadow: inset 1px 1px 2px green;	
    bXox-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    fXont-size: inherit;
    tXext-overflow: ellipsis;
    bXackground-position: center right;
    bXackground-repeat: no-repeat;	
    dXisplay: block;
    hXeight: 100pt;
    line-height: 25pt;		
    outline: 0;
}

/*padding for Edge*/
select option 
{ 
  height: 15px; 		
  pXadding : 1px 2px;
  padding : 0px 0px 1px 3px;	
  margin : 0px;	
}	

select:hover {border-color : navy;} 	

select:focus 
{
  box-shadow       : 0 0 5px rgba(81, 203, 238, 1);
  background-color : #a4ffff;	
} 		

select:disabled 
{
  background-color: #ccc;	
  color:            gray;		
  cursor :          not-allowed;		
} 	
select:disabled:hover
{
  background-color: #DCDCDC;   /*gainsboro, ok in FF & IE*/
  color:            #ffffff;   /*white, ok in FF only*/	 
} 	

select option:hover {background-color: #87CEFA;}   /*light sky blue, ok in FF & IE*/ 	
select option:checked {background-color: #00BFFF;}   /*deep sky blue, ok in IE only*/ 	
select option:hover:checked {background-color: #000080;}   /*navy, ok in IE only*/ 
















input[type="radio"] 
{
  cursor : pointer;
}
input[type="radio"]:disabled {background-color: #ccc; cursor: none;}
input[type="radio"]:enabled:hover {box-shadow: 0px 0px 5px 5px navy; background-color: #ccf3ff;}	























input[type="checkbox"] 
{
  cursor  : pointer;
  display : inline-block;
}
input[type="checkbox"]:after 
{
  content : '';
  display : block;
}
input[type="checkbox"]:checked:after 
{
  pXosition : relative;	
}
input[type="checkbox"]:focus {box-shadow: 0px 0px 5px 5px green}
input[type="checkbox"]:enabled:hover {box-shadow: 0px 0px 5px 5px green; background-color: #ccf3ff;}	
input[type="checkbox"]:disabled {background-color: #ccc; cursor : none;}





















.input8 {font-family : verdana, arial; font-size : 8pt; color : #000000;}
.input9 {font-family : verdana, arial; font-size : 9pt; color : #000000;}
.input10 {font-family : verdana, arial; font-size : 10pt; color : #000000;}

.input8Ar {font-family : arial, verdana; font-size : 8pt; color : #000000;}
.input9Ar {font-family : arial, verdana; font-size : 9pt; color : #000000;}
.input10Ar {font-family : arial, verdana; font-size : 10pt; color : #000000;}

/*2021-09-07 height of TD not the font*/
/*adjust shares, group display, not onClickRow*/
.row01 {font-family : verdana, arial; font-size : 8pt; color : blue; height : 26px;}

.blockquote01 {padding : 0px 0px 0px 0px; margin  : 5px 0px 0px 5px;}

.div01
{
  border-width : 0px; 
  border-color : #ffffd2; 
  border-style : solid;
  margin       : 0px 0px 0px 0px;
  padding      : 5px 5px 5px 5px;
  background-color : #cccccc;
}



















textarea
{
  color        : navy;  	
  border-width : 0px;
  font-family  : verdana, arial;
  font-size    : 10pt;		
}

























/*display:flex; justify-content:center; align-items:center;	dont work in IE8*/
.divHelp
{
  border           : 2px solid navy;	
  box-shadow       : 5px 5px 20px 2px navy;	
  visibility       : hidden; 
  position         : absolute; 
  left             : 1px; 
  top              : 1px; 	
  background-color : silver; 
  padding          : 25px;
	display          : flex;
  justify-content  : center;
  align-items      : center;	
}
.divHelp table
{
  border-spacing   : 0px;	
  box-shadow       : 5px 5px 10px 2px navy;
}
.divHelp table tr 
{
  background-color : #dedede;			
}
.divHelp table td
{
  height      : 24px;	
  margin      : 0px;
  padding     : 0px 10px 0px 10px;
  font-family : verdana, arial;
  font-size   : 9pt;
  color       : navy;	
	cursor      : pointer;
	text-align  : left;
}
.divHelp table tr:hover
{
  background-color : #fff;
  transition       : background-color .10s;		
}	

/*2023-01-22*/
.divHelp20
{
  border           : 2px solid navy;	
  box-shadow       : 5px 5px 20px 2px navy;	
  visibility       : hidden; 
  position         : absolute; 
  left             : 1px; 
  top              : 1px; 	
  background-color : silver; 
  padding          : 25px;
	display          : flex;
  justify-content  : center;
  align-items      : center;	
}
.divHelp20 table
{
  border-spacing   : 0px;	
  box-shadow       : 5px 5px 10px 2px navy;
}
.divHelp20 table tr 
{
  background-color : #dedede;			
}
.divHelp20 table td
{
  height      : 20px;	
  margin      : 0px;
  padding     : 0px 10px 0px 10px;
  font-family : verdana, arial;
  font-size   : 9pt;
  color       : navy;	
	cursor      : pointer;
	text-align  : left;
}
.divHelp20 table tr:hover
{
  background-color : #fff;
  transition       : background-color .10s;		
}