body,html
{
    margin: 0 auto;
    padding:0;
    font-family:arial,sans-serif;
    /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; */
    background-color:#fff;
    color:#013220;
    line-height:1.5em;
	max-width:1366px;
}
#content
{
    margin:0 auto;
    padding:0;
    min-height:600px;
}
#footer
{
    float:none;
    clear:both;
    margin:1em 0 0 0 auto;
    padding:1em;
    width:100%;
    background-color:#013220;
    color:#fff;
}
ul.flist
{
    list-style-type:none;
    margin:0 auto;
    text-align:center;
    padding:0;
    overflow:hidden;
}
ul.flist li a
{
    color:#fff;
    text-decoration:none;
    padding:.25em;
    margin:0;
}
ul.flist li a:hover
{
    color:#013220;
    background-color:#fff;
}
/* =======================================================
   === navigation
*/
ul.topnav 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #013220;
}
ul.topnav li 
{
    float: left;
}
ul.topnav li a 
{
    display: block;
    color: #fff;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
ul.topnav li a:hover:not(.active) 
{
    background-color: #fff;
    color:#013220;
}
ul.topnav li.right 
{
    float: right;
}

ul.subnav
{
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
    background-color:#e0f5e0;
	margin-top:1px;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
ul.subnav li
{
    float:left;
	padding:0;
}
ul.subnav li a
{
    font-size:smaller;
    display:block;
    color:#013220;
    text-align:center;
    padding:7px 8px;
    text-decoration:none;
	border:1px #e0f5e0 solid;
}
ul.subnav li a:hover:not(.active)
{
    background-color:#013220;
    color:#e0f5e0
}
ul.subnav li a.active
{
    background-color:#4CAF50
}
ul.subnav li.right
{
    float:right
}

/* =======================================================
   === forms
*/

.editor
{
    margin:1em auto;
    padding:1em;
    width:100%;
    background-color:#f5f5f5;
    border:1px #c0c0c0 solid;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.editor label
{
    float:left;
    width:20%;
    margin:0;
    padding-top:.5em;
}
.editor input[type=text], .editor input[type=password], .editor select, .editor textarea
{
    border:1px #c0c0c0 solid;
    padding:.25em;
    margin:.5em 0 .5em 0;
    font-size:1em;
    line-height:1em;
	width:80%;
}
.editor input[type=text]:focus, .editor input[type=password]:focus, .editor select:focus, .editor textarea:focus
{
    border:1px #013220 solid;
}
.editor fieldset
{
    margin:.5em 0 .5em 0;
    padding:.25em;
}

.editor input[type=submit],.editor input[type=button]
{
    border:1px #c0c0c0 solid;
    padding:.5em;
    margin:.5em 0 .5em 0;
    font-size:1em;
    line-height:1em;
}
.editor input[type=submit]:hover,.editor button:hover
{
    background-color:#013220;
    color:#fff;
}
/* ========================================================= */
.genform
{
    margin:1em auto;
    padding:1em;
    width:100%;
    max-width:500px;
    background-color:#f5f5f5;
    border:1px #c0c0c0 solid;
	box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.genform label
{
    float:left;
    width:25%;
    margin:0;
    padding-top:.5em;
}
.genform input[type=text], .genform input[type=password], .genform select, .genform textarea
{
    border:1px #c0c0c0 solid;
    padding:.25em;
    margin:.5em 0 .5em 0;
    font-size:1em;
    line-height:1em;
	width:75%;
}
.genform input[type=text]:focus, .genform input[type=password]:focus, .genform select:focus, .genform textarea:focus
{
    border:1px #013220 solid;
}
.genform fieldset
{
    margin:.5em 0 .5em 0;
    padding:.25em;
}

.genform input[type=submit],.genform input[type=button]
{
    border:1px #c0c0c0 solid;
    padding:.5em;
    margin:.5em 0 .5em 0;
    font-size:1em;
    line-height:1em;
}
.genform input[type=submit]:hover,.genform button:hover
{
    background-color:#013220;
    color:#fff;
}

/* =======================================================
   === searchbox
*/
.searchfrm
{
    width:100%;
    max-width:600px;
    margin:.5em auto;
    text-align:center;
    font-size:1em;
    line-height:1em;
}
.searchbtn 
{
    background-color:#f5f5f5;
    border:1px #c0c0c0 solid;
    padding:.75em;
    width:15%;
    margin:0 auto;
    font-size:1em;
    line-height:1em;
}
.searchbtn:hover
{
    background-color:#013220;
    color:#f5f5f5;
}
.searchbox 
{
    background: #fff;
    padding:10px;
    width:80%;
    margin:0 auto;
    border:1px #c0c0c0 solid;
    font-size:1em;
    line-height:1em;
}

/* =======================================================
   === button links
*/

.btnlnksml,.btnlnknrm
{
    border:1px #c0c0c0 solid;
    padding:.5em;
    margin:0 .5em 0 .5em;
    font-size:1em;
    line-height:1em;
	text-decoration:none;
	background-color:#f5f5f5;
	color:#013220;
}
.btnlnksml:hover,.btnlnknrm:hover
{
    background-color:#013220;
    color:#f5f5f5;
}
.btnlnksml
{
        padding:.25em .5em .25em .5em;
        text-transform: uppercase;
        font-weight:bold;
        font-size:smaller;
}
.btnlnknrm
{
    padding:.5em;
}
.mselected
{
    background-color:#f0fff0;
    margin:0;
    padding:.25em;
}
/* =======================================================
   === box layout
*/

* 
{
    box-sizing: border-box;
}
.box100
{
    width: 100%;  
}
.box75
{
    width: 75%; 
}
.box50
{
    width: 50%; 
}
.box25
{
    width: 25%; 
}
.box66
{
    width: 66.66%; 
}
.box33
{
    width: 33.33%; 
}
.box25,.box50,.box75,.box100,.box33,.box66
{
    float: left;
    padding: .5em;
    margin:0;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* =======================================================
   === dialog boxes
*/

.info,.success,.warning,.error,.validation 
{
    margin: 0 auto;
    padding: 1em;
    max-width:600px;
}
.info 
{
    color: #00529b;
    background-color: #bde5f8;
    border:1px #00529b solid;
}
.success 
{
    color: #4f8a10;
    background-color: #dff2bf;
    border:1px #4f8a10 solid;
}
.warning 
{
    color: #9f6000;
    background-color: #feefb3;
    border:1px #9f6000 solid;
}
.error 
{
    color: #d8000c;
    background-color: #ffbaba;
    border:1px #d8000c solid;
}
table 
{
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #cbcbcb;
    margin: 1em 0;
	border-radius:5px;
	overflow:hidden;
	width:100%;
}
td, th 
{
    border-left: 1px solid #cbcbcb;
    border-width: 0 0 0 1px;
    margin: 0;
    overflow: visible;
    padding: .25em .25em;
}
thead 
{
    background-color: #f5f5f5;
    color: #000;
    text-align: left;
    vertical-align: bottom
}
tfoot
{
    background: #f5f5f5;
    color: #000;
}
td 
{
    background-color: transparent;
    border-bottom: 1px solid #cbcbcb;
	vertical-align:top;
}
tr:hover
{
	background-color:#f5f5f5;
}
h1,h2,h3,h4
{
	font-weight:normal;
}
.bggray
{
	background-color:#f5f5f5;
}
.bglightblue
{
	background-color:#e0e0f5;
}
.bglightred
{
	background-color:#f5e0e0;
}
.bglightgreen
{
	background-color:#e0f5e0;
}
.highlighter
{
	background-color:#ffffe0;
}

@media screen and (max-width: 800px)
{
    ul.topnav li.right, 
    ul.topnav li 
    {
        float: none;
    }

    .box75,.box50,.box25,.box33,.box66
    {
        float: none;
        width: 100%; 
        clear:both;
        padding: .5em;
    }        
    .genform
    {
        max-width:100%;
        width:100%;
        margin:0;
        padding:.5em;
    }
}