body { overflow: scroll; 
	background: rgb(75,72,72);
	background: radial-gradient(circle, rgba(75,72,72,1) 0%, rgba(70,70,73,1) 65%, rgba(41,38,38,1) 100%); 
	color: #1E3660 }

* { margin: 0; padding: 0; font-family: Segoe UI; font-size: 11px }

input, select, textarea {	
    -ms-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
    -webkit-box-sizing:content-box; 
}

#main { padding-left: 18px; padding-right: 18px }
#main > ul.main > li, 
#main > ul, 
#main > p { margin-left: 34px }

#wrapper { position:relative; min-height:100%; width: 1280px; margin: 12px auto; 
	background: #fff; padding: 0px 18px 0px 18px; border-radius: 6px; 
	-webkit-box-shadow: 10px 10px 40px 0px rgba(0,0,0,0.48);
	-moz-box-shadow: 10px 10px 40px 0px rgba(0,0,0,0.48);
	box-shadow: 10px 10px 40px 0px rgba(0,0,0,0.48); }
header #sysname { text-align: center; padding: 10px 12px; background: navy; color: #ddd; }
header .banner { display: block; margin: 0px 0px; border: 0px solid red; width: 1280px; 
	height: 160px; background-size: 80%; background-repeat: no-repeat; background-position-y: center }

footer { padding: 12px 10px 24px 10px; text-align: center; position: absolute; bottom: 0;
	width: 1296px; border: 0 solid red; margin-left: -18px; margin-right: 0px;
	border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; background-color: #016578; color: #fff; }

footer .div-links { width: 60%; margin: 0 auto 18px auto; }
footer .div-links a { display: inline-block; width: 150px; text-align: left; line-height: 23px; color: #eee;
	text-decoration: none; }
footer .div-links a:hover { text-decoration: underline }

h1 { font-size: 2.0em; color: navy; font-family: Segoe UI Light; padding: 18px 0 24px 0 }
p { margin-bottom: 12px; max-width: 60% }

.table { bordder: thin solid #bbb; border-collapse: collapse; width: 100%; table-layout: fixed; }
.table tr th { text-align: left; background-color: #dadada; border-bottom: 3px solid #333; vertical-align: bottom }
.table tr td, 
.table tr th { padding: 8px 8px; bordder-top: 0 solid #dedede; bordder-right: 0 solid #dedede; font-size: 1.0em; z-index: 0 }
.table tr:not(:last-child):not(:first-child) td { border: 0 solid #dedede; vertical-align: top }
.table tr:nth-child(odd) { background-color: #f2f2f2; }
.table tr:hover td { background: #f4f4f4 }
.table tr td.action div { width: 120px; float: right; display: none; text-align: right; z-index: 10; }
.table tr:hover td.action > div.w { width: 70px; text-align: center }
.table tr:hover td.action > div { display: block; } 
.table tr.input td { padding: 2px 8px }
.table tr.input td select,
.table tr.input td [type=text] { padding: 6px 8px; width: 100%; }
.table tr.input td [type=submit] { padding: 4px 8px }
.table tr th:last-child,
.table tr td:last-child { text-align: center }
.table tr:last-child td { text-align: left }
div.status::before,
.table tr td.status::before { content: "\226B"; }
.table tr td.status { background-color: #e2e2e2; }
.htable { border: thin solid #bbb }
.htable tr td:first-child { font-weight: bold }
.htable tr td:last-child { text-align: left }
.htable tr td.bold { font-weight: bold }
.table tr td.right,
.table tr th.right { text-align: right }
.table tr td.left,
.table tr th.left { text-align: left }
.table tr td.center,
.table tr th.center { text-align: center }
.col1-left tr th { text-align: left }

nav ul li { display: inline-block; padding: 0; margin: 0 }

.form div label { display: inline-block; width: 140px; padding: 6px 8px; text-transform: uppercase; text-align: right }
.form div select option:selected { font-weight: bold }
.form div [type=search],
.form div select, 
.form div [type=password], 
.form div [type=text] { padding: 7px 8px; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;  }
.form div { margin: 0 0 6px 0 }
.form180 div label { width: 180px }
.form div button { box-shadow:inset 0px 32px 0px -15px #56B95A; 
	background-color: #4CAF50; color: white; padding: 8px 13px; border: none; border-radius: 4px; cursor: pointer;
	box-shadow: 1px 1px;-webkit-box-shadow: 1px 1px 4px 1px rgba(143,143,143,1);
    -moz-box-shadow: 1px 1px 2px 1px rgba(143,143,143,.4);
    box-shadow: 1px 1px 2px 1px rgba(143,143,143,.4); }
.form div button.orange { box-shadow:inset 0px 32px 0px -15px #ff6600; background-color: #ff5500; }    
.form div button.orange:hover { box-shadow:inset 0px 32px 0px -15px #ff5100; background-color: #ff4900; }
.form div button.blue { box-shadow:inset 0px 32px 0px -15px #0066ff; background-color: #0055ff; }    
.form div button.blue:hover { box-shadow:inset 0px 32px 0px -15px #0051ff; background-color: #0049ff; }
.form div button.red { box-shadow:inset 0px 32px 0px -15px #ff3300; background-color: #ff0000; }    
.form div button.red:hover { box-shadow:inset 0px 32px 0px -15px #ff00; background-color: #ff0000; }
.form div button:hover { background-color: #45a049; box-shadow:inset 0px 32px 0px -15px #4Ea952; }
.form div button:disabled { background-color: #4CAF50; color: #ddd; cursor: auto }
.form div .description { margin-left: 160px; font-style: italic }
.form div .description180  {};
.form div label.left { text-align: left; text-transform: none }

/* begin popups */

.modal2,
.modal { display: none; position: fixed; z-index: 1; padding-top: 120px; left: 0; top: 0;
    width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); 
    text-align: center; }
.modal2 { padding-top: 70px }
.popup { background-color: #fefefe; margin: auto; padding: 18px 36px; border: 1px solid #0a6e81; display: inline-block; 
	border-radius: 6px; text-align: left; }
.popup .title { background-color: #016578; margin: -24px -37px 36px -37px; padding: 12px 18px;
	font-size: 1.3em; color: #fff; font-weight: 700; border-top-left-radius:4px; border-top-right-radius:4px }
.popup .close { font-size: 1.3em; font-weight: bold;  
	margin-top: -5px; float: right; cursor: pointer; border: 0 solid blue; }
	
/* end popups */

/* begin pagination */

.pagination { display: inline-block; margin-top: 18px }
.pagination a { float: left; display: block; border-top: thin solid #ddd; 
	border-left: thin solid #ddd; border-bottom: thin solid #ddd; 
	border-radius: 0px; 
	padding: 7px 0px 0 0; text-decoration: none; margin: 0 0px 0 0; font-size: .9em;
	transition: background-color .4s; color: #555; width: 32px; height: 24px; }
.pagination a:hover:not(.ellipsis):not(.active) { background-color: #ddd; font-weight: bold }
.pagination a.active { background: green; color: #fff }
.pagination a.lellipsis { border: 0; border-left : thin solid #ddd; }
.pagination a.rellipsis { border: 0; border-left : thin solid #ddd; } 
.pagination a:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px }
.pagination a:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px;
	border-right: thin solid #ddd; }

.tablepagination { display: inline-block; margin-top: 0; border:0 solid red; float:right; margin: -4px 0 -2px 0  }
.tablepagination a { font-size: 1.0em; display: inline-block; padding: 4px 6px; text-decoration: none; color: navy; width: 14px; margin-right:-2px }
.tablepagination a:hover:not(.ellipsis):not(.active) { background-color: #ddd; font-weight: bold }
.tablepagination a.active { background: green; color: #fff }
/*.pagination a { float: left; display: block; border-top: thin solid #ddd; 
	border-left: thin solid #ddd; border-bottom: thin solid #ddd; 
	border-radius: 0px; 
	padding: 7px 0px 0 0; text-decoration: none; margin: 0 0px 0 0; font-size: .9em;
	transition: background-color .4s; color: #555; width: 32px; height: 24px; }
.pagination a:hover:not(.ellipsis):not(.active) { background-color: #ddd; font-weight: bold }
.pagination a.active { background: green; color: #fff }
.pagination a.lellipsis { border: 0; border-left : thin solid #ddd; }
.pagination a.rellipsis { border: 0; border-left : thin solid #ddd; } 
.pagination a:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px }
.pagination a:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px;
	border-right: thin solid #ddd; } */


/* end pagination */

/* start vertical menu */

ul.menu { display: inline-block; list-style-type: none; margin: 0; padding: 0; width: 60% }
ul.menu li { border: 0px solid red; display: inline-block; width: 40%; text-align: center; margin: 2px 0px }
ul.menu li a { text-decoration: none; padding: 6px 20px; display: inline-block; width: 80%; border: thin solid #016578; 
	border-right: 4px solid #016578; border-left: 4px solid #016578; }
ul.menu li:hover a { font-weight: 600; text-decoration: none; width: 82%; background: #f2f9fc }
/*
ul.menu { list-style-type: none; display: inline-block; margin: 0 auto; padding: 0; width: 60%; border: 1px solid red; text-align: center }
ul.menu li { border:1px solid red; padding: 10px 20px } 
ul.menu li { width: ; display: inline-block; text-align: center; margin: 3px; border: 0px solid red; padding: 0;  }
ul.menu li a { text-decoration: none; display: block; border: thin solid #016578; padding: 6px;
	border-right: 4px solid #016578; border-left: 4px solid #016578; width: 290px; margin: 0 auto; border-radius: 2px }
ul.menu li:hover span { display: inline-block; }
ul.menu li:hover a { font-weight: 600; text-decoration: none; width: 294px; background: #f2f9fc }
ul.menu li a::before { } 
ul.menu li span { display: none; margin-left: 6px }
*/

/* end vertical menu */

i.record { padding: 1px 2px 4px 5px; color: #fff; border-radius: 4px }
i.record:hover { opacity: .5 }
i.view { background-color: blue }
i.edit { background-color: green }
i.delete { background-color: #ff0000 }
i.view2 { background-color: #ff6600 }

.s9 { font-size: 0.9em }

.contacts { border: 0px solid red; }
.contacts > div { border: thin solid #e2e2e2; width: 368px; display: inline-block; padding: 12px 12px; margin: 0 10px 12px 0; border-radius: 4px }
.contacts > div > .logo { float: left; display: block; height: 42px; width: 42px; border: 0px solid red;
	background-size: 42px; margin-right: 6px }
	
.dummy { height: 176px; border: 0px solid red; }

#listbox,
#container { display: block; position: relative; } 
.ui-autocomplete { position: absolute; max-height: 320px; overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden; }
    
.wmenu { list-style-type: none; display: inline-block }
.wmenu li a { text-decoration: none; }
.wmenu li a i { font-size: 3.0em; display: inline-block; text-align: center; border: 0px solid red; padding: 0 0 0 8px }
.wmenu li { border: 1px solid #016578; float: left; height: 90px; width: 90px; padding: 12px; margin: 0 8px;
	box-shadow:3px 2px 12px rgba(0, 0, 0, .3) }
.wmenu li:hover { background: #e2e2e2; } 
.wmenu a span { display: block; border: 0px solid red; font-weight: bold  }

.w320 { width: 320px }
.w322 { width: 322px }
.w240 { width: 240px }
.w242 { width: 242px }
.w180 { width: 180px }
.w480 { width: 480px }
.w482 { width: 482px }
.hide { display: none }
.show { display: inline-block }
.hide { display: none }

span.dot { margin-left: 10px; display: inline-block; border: 0 solid red; width: 8px; height: 8px;
	border-radius: 4px; }
span.bg-red { background-color: #f00 }
span.error-msg { font-style: italic; color: red }


.selected-item { border: thin solid #aaa; display: inline-block; margin: 4px 4px 0 0; border-radius: 4px; padding: 3px 6px }
.selected-item i { cursor: pointer; }
.selected-item i:hover { color: blue }

.note strong { margin-left: 36px; float:left; display: inline-block; margin-right: 14px }
.note p, 
.note span { display: inline-block; width: 80% }

.credit li span { font-weight: bold; border:0px solid red; }

/**** checkbox list *****/ /*
.chklist tbody { height: 100%; }
.chklist { height: 300px; width:100%; table-layout: fixed; border-collapse: collapse; border-left: thin solid #ccc; border-bottom: thin solid #ccc;  }
.chklist tr th { padding: 8px 8px; background: #efefef }
.chklist tr th,
.chklist tr td { border-right: thin solid #ccc; border-top: thin solid #ccc; }
.chklist [type=checkbox] { margin: 0; padding: 8px 0 0 0 }
.chklist tr:hover { background: #eee; }
.chklist tr td:first-child { padding: 8px 8px }
.chklist tr td label { display: block; padding: 8px 8px }
*/

table.scroll { width: ; border-collapse: collapse; border-spacing: 0; border-top: thin solid #ddd; border-bottom: thin solid #ddd; }
table.scroll tbody,
table.scroll thead { display: block; }
table.scroll tbody { max-height: 224px; overflow-y: auto; overflow-x: hidden; }
table.scroll2 tbody { max-height: 389px } 
table.scroll tbody tr th,
table.scroll tbody tr td { border: thin solid #ccc; padding: 4px 8px; }
table.scroll tbody tr:hover td { background: #efefef }
table.scroll tbody tr td label { display:block; display: block; }  

div.checkbox input { margin: 8px 8px 8px 11px }

span.subs { font-size: .9em; font-style: italic; display: inline-block; margin-left: 3px }