@CHARSET "ISO-8859-1";
/* ----------------  Common CSS Styles for PHP forms and HTML/PHP Pages -----------------*/

/* We use common header, list, link, error, highlight and para styles. 
Header/Trailer, tables and div/layout are customized different for standard pages versus forms
z-index settings: 10 for menus, 50 for images, 70 for overlays (e.g. calendar picker) 100 for more info/tooltips*/

/* global styles, use common section headers and links */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {
    margin-bottom: 10px;
}

/* clears containers with floated elements, avoids zero height containers when al elements are floated ! */
.clearfix::after, html::after, body::after, header::after, .mainPage::after, .colSingle::after, #mainBottom::after,
.form_frame::after, .form_inline::after,
.button_frame::after, .img_frame::after, ul::after, .outer_text_frame::after,
.iconimg_frame::after, .col_frame::after, .sidebar_resize::after, .autolist::after,
.colLeft::after, .colRight::after, .colfullwidth::after, .colfullwidthempty::after, .more_info::after, .sidebar_frame::after{
    content: "";
    display: table;
    clear: both;
}

html {
    padding: 1px 1px;
    text-align: center;
    width: 100%;
    height: auto;
}

body {
    height: 100%;
    color: #333333;
    font-size: 100%;
    font-family: Roboto, Noto, Helvetica, Arial, sans-serif;
    line-height: 1; /* use unitless line heights as this doesnt inherit, it multiplies fonty height by this value */
    background: none;
    width: auto;
    margin: 0 auto;
    position: relative;
    border: none;
}

hr {
    border: 0 #cccccc solid;
    border-top-width: 1px;
    clear: both;
    height: 0;
}

/* headers and paras:
* Header 1 is large main header
* Header 2 is mid size header
* Header 3 is mid size header with underline
* Header 4 is small size header
* Header 5 is small size header with underline
* Header 6 is small size header in red
*/
h1, h2, h3, h4, h5, h6 {
    color: #000000;
    font-family: Oswald, Palatino, Georgia, Roboto, Noto, serif;
    font-size: 1.7em;
    line-height: 1.1;
    padding-bottom: 3px !important;
}

h1 {

}

h2 {
    color: #111111;
    font-size: 1.4em;
    font-weight: bold;
}

/* h3 is same as h2 but lighter text */
h3 {
    color: #222222;
    font-size: 1.3em;
    font-weight: bold;
}

/* 3rd level header lighter text color */
h4 {
    color: #333333;
    font-size: 1.2em;
    font-weight: bold;
}

/* h5 smaller than h4, use as higlighted text */
h5 {
    color: #333333;
    font-size: 1.0em;
    font-weight: bold;
}

/* red highlighted header */
h6 {
    color: #990000;
    font-size: 1.2em;
    font-weight: bold;
}

p {
    color: #545454;
    font-size: 1em;
    font-weight: 300;
    line-height: 1.5;
    text-align: left;
    margin-right: 10px;
    padding: 5px 0;
}

/* lists */
ul, ol {
    margin-left: 25px;
    padding-left: 0;
    list-style: none;
}

li {
    margin-bottom: 15px;
    margin-left: 15px;
}

ul {
    list-style: disc;
    color: #555555;
    font-size: 1em;
    font-weight: normal;
    line-height: 1.3;
}

ol,
ol.lowerRoman,
ol.upperAlpha {
    list-style: decimal;
    color: #555555;
    font-size: 1.0em;
    font-weight: normal;
    line-height: 1.3;
}

ol.lowerRoman {
    list-style: lower-roman;
}

ol.upperAlpha {
    list-style: upper-alpha;
}

/* Highlight and quotes in bold */
strong, b, .b {
    font-weight: bold;
}

blockquote, q {
    quotes: none;
    margin-right: 10px;
    padding: 5px 0 20px 0;
}

blockquote:before,
blockquote:after,
q:before, q:after {
    content: none;
}

/* Links */

/* Class applied to auto anchors, these are applied prior to a block and are not displayed */
.anchor {
    visibility: hidden;
    width: 0px;
    height: 0px;
}

/* Link color */
a, a:link, .groupheaderitem {
    color: #0033FF;
}

a {
    text-decoration: none;
}

a:link {
    outline: none;
}

a:visited {
    outline: none;
    text-decoration: underline;
}

a:hover, a:active, a:focus {
    text-decoration: underline;
}

/* disable link effects and highlighting */
a.disable_effect:link,
a.disable_effect:hover,
a.disable_effect:focus,
a.disable_effect:active,
a.disable_effect:visited {
    outline: inherit;
    text-decoration: inherit;
    background: inherit;
}

/* Image Links */
a img.link_img {
    outline: none;
    opacity: 1.0;
}

a img.link_img:visited {
    opacity: 1.0;
}

a img.link_img:hover, a img.link_img:active, a img.link_img:focus {
    opacity: 0.7;
}

/* Make div highlight like a link */
.link_empty {
    outline: none;
    opacity: 1.0;
}

.link_empty:visited {
    opacity: 1.0;
}

.link_empty:hover, .link_empty:active, .link_empty:focus {
    opacity: 0.5;
}

/* Class added to menus and other items that we dont wnat to be dragged. NOTE Traped by js, select_button class doesnt need this */
.nodrag {

}

.noselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    outline-style: none;
    cursor: default;
    user-select: none;
}

.headermenu-ul {
    list-style: none;
    position: absolute;
    top: 3px;
    right: 10px;
    text-align: center;
    border: none;
    font-weight: normal;
    line-height: 1.0;
    z-index: 10;
}

.headermenu-li {
    color: #ffffff;
    list-style: none;
    word-break: keep-all;
    white-space: nowrap;
    display: inline-block;
    margin: 6px 2px;
    width: auto;
}

.headermenu-li-lang {
    list-style: none;
    word-break: keep-all;
    white-space: nowrap;
    display: inline-block;
    margin: 0 2px;
}

.headermenu-li > a, .headermenu-li .menu-btn  {
    color: #ffffff;
    background-color: darkslategray;
    padding: 2px 4px;
    line-height: 1.0;
    font-weight: normal;
    text-decoration: none;
    border-bottom: thin solid lightgray;
    border-right: thin solid lightgray;
    border-top: 2px solid lightgray;
    border-left: 2px solid lightgray;
    border-radius: 5px;
    min-width: 10px;
    margin: 0px;
}

.headermenu-li-lang a {
    padding: 0px;
    font-size: 1.0em;
    line-height: 1.0;
    font-weight: normal;
    text-decoration: none;
}

.headermenu-li a:link,
.headermenu-li a:visited {
    color: #ffffff;
    background-color: darkslategray;
}

.headermenu-li a:link:hover,
.headermenu-li a:link:focus,
.headermenu-li a:link:active {
    opacity: 0.7;
    border-top: thin solid white;
    border-left: thin solid white;
    border-bottom: 2px solid white;
    border-right: 2px solid white;
    text-decoration: none;
}

.headermenu-ul2 {
    display: none;
    width: 100%;
    list-style: none;
    text-align: left;
    border: none;
    font-weight: normal;
    line-height: 1.0;
    margin-left: 0px;
}

.headermenu-li2 {
    display: block;
    float: left;
    clear: left;
    width: 100%;
    color: #ffffff;
    list-style: none;
    word-break: keep-all;
    white-space: nowrap;
    margin: 0px 0px 0px 0px;
}

.headermenu-li2.first {
    margin-top: 6px;
}

.headermenu-li2 > a, .headermenu-li2 .menu-btn {
    display: block;
    color: #ffffff;
    padding: 4px 4px;
    line-height: 1.0;
    font-weight: normal;
    text-decoration: none;
    border-bottom: thin solid lightgray;
    border-right: thin solid lightgray;
    border-top: 2px solid lightgray;
    border-left: 2px solid lightgray;
    border-radius: 5px;
    width: 100%;
    min-width: 10px;
    margin: 0px;
}

.headermenu-li:hover > .headermenu-ul2,
.headermenu-li:focus > .headermenu-ul2,
.headermenu-li:active > .headermenu-ul2 {
    background-color: white;
    display: block;
}

.colLeft {
    /* padding and negative margin force columns to equal size by having them
    extend way beyond page length and hide overrun in mainPage with overflow:hidden */
    float: none;
    display: table-cell;
    margin: 0px;
    padding: 20px 20px 20px 20px;
    width: 48%;
    border: 0px none;
    border-right: 1px solid #545454;
    box-sizing: border-box;
    vertical-align: top;
}

.colRight {
    /* padding and negative margin force columns to equal size by having them
    extend way beyond page length and hide overrun in mainPage with overflow:hidden */
    float: none;
    display: table-cell;
    margin: 0px;
    padding: 20px 20px 20px 20px;
    width: 48%;
    border: none;
    box-sizing: border-box;
    vertical-align: top;
}

.colSingle {
    /* padding and negative margin force columns to equal size by having them
    extend way beyond page length and hide overrun in mainPage with overflow:hidden */
    float: none;
    width: 48%;
    margin: 0px;
    padding: 20px 20px 20px 20px;
    border: 0px none;
    box-sizing: border-box;
    overflow: hidden;
}

@media all and (max-width: 800px) {

    .colSingle {
        padding: 20px 4px 20px 4px;
    }
}

.colfullwidth {
    /* padding and negative margin force columns to equal size by having them
    extend way beyond page length and hide overrun in mainPage with overflow:hidden */
    display: table-cell;
    margin: 0px;
    clear: left;
    float: left;
    height: auto;
    width: 100%;
    padding: 20px 20px 20px 5px;
    border-top: 1px solid #545454;
    box-sizing: border-box;
}

/* Used to force alignment, display with no size */
.colfullwidthempty {
    /* padding and negative margin force columns to equal size by having them
    extend way beyond page length and hide overrun in mainPage with overflow:hidden */
    margin: 0px;
    clear: left;
    float: left;
    height: 1px;
    width: 100%;
    padding: 0px;
    box-sizing: border-box;
    overflow: hidden;
}

/* frame multiple columns, used to frame multiple columns across the page */
.colgroup_frame {
    float: none;
    display: table;
    width: 100%;
    height: auto;
    overflow: hidden;
}

/* frame for sidebar items and internal columns */
.col_frame {
    float: left;
    display: inline-block;
    height: auto;
}

/* Frame to fix height of elements in a column, set height in html */
.col_frame_fixed {
    width: 100%;
    height: 200px; /* override to required height */
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

/* Frame border that highlights when cursor ir over */
.highlight_border {
    border: 1px solid #cccccc;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #6BBAF2;
}

.highlight_border:hover,
.highlight_border:focus {
    box-shadow:-2px -2px 10px #6BBAF2 inset;
}

div {
    float: left;
    text-align: left;
    display: inline-block;
    width: auto;
    height: auto;
}

/* Frame contains menu_back_button, this is enabled if required when a back button is added to the page */
.menu_back_button_frame {
    display: inline-block;
    position: absolute;
    top: 4px;
    left: 4px;
    margin: 0;
    padding: 0px;
    height: auto;
    width: auto;
    background: transparent;
}

/* Back button displayed in main meu bar. Simplify css by assuming that this class is always applied to either a or input tags */
.menu_back_button {
    float: left;
    color: #FFFFFF;
    display: inline-block;
    white-space: nowrap;
    font-size: 1em;
    text-align: center;
    line-height: 1;
    text-overflow: clip;
    overflow: hidden;
    background: #eeeeee;
    outline: none;
    text-decoration: none;
    padding: 3px;
    border: 1px solid #ffffff;
    border-radius: 15px;
    width: 30px;
    height: 30px;
}

.menu_back_button:active {
    box-shadow: inset 1px 2px 1px #444444;
    color: #FFFFFF;
}

.menu_back_button:visited,
.menu_back_button:link {
    color: #FFFFFF;
    outline: none;
    text-decoration: none;
}

.menu_back_button:hover,
.menu_back_button:focus,
.menu_back_button a:hover,
.menu_back_button a:focus {
    border: 1px solid #eeeeee;
    opacity: 0.7;
}

/* frame buttons, size to fit */
.button_frame {
    display: block;
    float: right;
    clear: none;
    width: auto;
    padding: 6px 10px;
}

/* Simplify css by assuming that select_button class is always applied to either a or input tags */
.select_button {
    float: left;
    color: #FFFFFF;
    display: inline-block;
    white-space: nowrap;
    font-size: 1em;
    text-align: center;
    line-height: 1;
    text-overflow: clip;
    overflow: hidden;
    background: transparent;
    outline: none;
    text-decoration: none;
    padding: 3px 5px 3px 5px;
    border: 1px solid #cccccc;
    margin: 5px;
    border-radius: 10px;
    box-shadow: 2px 2px 5px #000000;
    min-width: 80px;
    max-width: 120px;
}

/* Selection area for input type, hides value, set within an outer div/box with position relative */
.select_box {
    float: left;
    color: transparent !important;
    display: inline-block;
    position: absolute;
    top: 0px;
    left: 0px;
    background: transparent;
    outline: none;
    text-decoration: none;
    padding: 0px;
    border: none;
    margin: 0px;
    width: 100%;
    height: 100%;
}

/* Display Text in same spacing and size as select_button */
.select_button_size {
    font-size: 1.2em;
    text-align: center;
    line-height: 1;
    padding: 5px 5px 4px;
    margin: 5px;
}

.select_button:active {
    box-shadow: inset 0 1px 4px #000000;
    color: #FFFFFF;
}

.select_button:visited,
.select_button:link {
    color: #FFFFFF;
    outline: none;
    text-decoration: none;
    padding: 4px 5px 4px 5px;
}

.select_button:hover,
.select_button:focus,
.select_button a:hover,
.select_button a:focus {
    box-shadow: 1px 1px 5px #000000;
    opacity: 0.7;
}

/* set default for select_button with no links (disabled), greyed and no highlight */
.select_button.disabled,
.select_button.disabled:hover,
.select_button.disabled:focus,
.select_button.disabled:active {
    outline: none;
    opacity: 0.5;
    text-decoration: none;
    box-shadow: 1px 1px 5px #000000;
}

/* set select button float right */
.selbtn_float_right {
    margin-left: 10px;
    float: right;
}

/* set select button clear left */
.selbtn_clear_left {
    clear: left;
}

/* set select button important */
.selbtn_important {
    background-color: #EE6843    !important;
    background: linear-gradient(#EE6843, #CE4823) !important;
}

/* set select button format for forms */
.selbtn_form {
    background-color: #4cb3bf !important;
    background: linear-gradient( #4cb3bf, #02617d) !important;
}

/* set select button wide, allow expansion in width */
.selbtn_wide {
    width: auto;
    max-width: 500px;
}

/* set select button fixed at bottom right */
.selbtn_fix_btmright {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

img {
    margin: 0px auto !important; /* allows images to be centred in frame */
    display: block !important; /* allows images to be centred in frame */
    opacity: 1.0;
    z-index: 50;
}

img.disabled {
    opacity: 0.5;
}

img.double_border {
    padding: 1px;
    border: 1px solid lightslategray;
    background-color: darkslategray;
}
.iconimg {
    width: 32px;
    height: 32px;
    opacity: 1.0;
    z-index: 50;
}

.iconimg_small {
    width: 16px;
    height: 16px;
    opacity: 1.0;
    z-index: 50;
}

/* Image frame contains the image portion within. img_frame_center may replace this, match any changes. */
.img_frame {
    display: table !important; /* needed to centre image */
    float: left;
    position: relative;
    height: auto;
    width: 100%;
    max-width: 96vw;
    padding: 0px !important; /* allows image to centre in frame */
    margin: 0px;
    border: 1px solid #4B9AD2;
    overflow: hidden;
}

/* Image frame contains the image portion within, this will center frame in outer div which must have vert_center.
 To center in a column add text-align:center to column. Replaces img_frame if set,  */
.img_frame_center {
    display: inline-block !important; /* needed to centre frame */
    float: none;
    position: relative;
    height: auto;
    width: 100%;
    max-width: 96vw;
    padding: 0px;
    margin: 0px;
    border: 1px solid #4B9AD2;
    overflow: hidden;
}

/* Vertically Centre align image, add this to img container */
.vert_center, .frame_vert_center {
    text-align: center !important;
    display: table-cell !important;
    vertical-align: middle !important;
}

/* Image frame contains the image portion within */
.iconimg_frame {
    display: table !important; /* needed to centre image */
    float: left;
    position: relative;
    height: auto;
    width: 100%;
    padding: 0px !important; /* allows image to centre in frame */
    margin: 0px;
    border: none;
}

/* href/link Image frame contains the image portion within */
.linkimg_frame {
    float: left;
    height: auto;
    width: auto;
    padding: 0px;
    margin: 0px 4px 0px 0px;
    border: none;
}

/* frame around link with image */
.link_frame {
    display: block;
    width: auto;
    margin: 0px 10px 10px 0px;
}

.img_frame.no_border {
    border: 0px none;
}

.frame_no_border {
    border: 0px none;
}

.img_frame.fixed_size {
    width: auto;
    max-width: 100%;
    float: left;
}

.img_frame.fixed_size_right {
    width: auto;
    max-width: 100%;
    float: right;
    margin: 10px;
}

.ftimg_aspect {
    padding-top: 75%; /* 4:3 aspect ratio */
}

.keep_aspect {
    width: 100%;
    height: auto;
}

.fixed_aspect {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Frame contains image and surrounding text */
.imgtext_frame {
    display: inline-block;
    position: relative;
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 0%;
    height: auto;
    overflow: hidden;
    color: #000000;
    outline: none;
    text-decoration: none;
    background: transparent;
    width: 100%;
}

/* Center imgtext_frame, this will center frame in outer div which must have vert_center.
 To center in a column add text-align:center to column. This added to ingtext_frame style  */
.imgtext_frame_center {
    display: inline-block !important; /* needed to centre frame */
    float: none;
}

.imgtext_frame.fixed_size {
    width: auto;
    max-width: 100%;
    float: left;
}

/* Header frame holds text above image within imgtext_frame */
.img_header {
    color: #ffffff;
    width: 100%;
    background-color: #FFFFFF;
    background-size: 100%;
    padding: 4px 6px 2px 4px;
    margin: 0;
    font-size: 0.8em;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid #4B9AD2;
    clear: both;
    font-weight: bold;
    text-align: center;
}

/* Trailer frame holds text below image within imgtext_frame */
.img_trailer {
    color: #ffffff;
    width: 100%;
    background-color: #FFFFFF;
    background-size: 100%;
    padding: 2px 6px 4px 0px;
    margin: 0;
    font-size: 0.8em;
    border: 1px solid #4B9AD2;
    clear: both;
    font-weight: bold;
    text-align: center;
}

/* Frame contains group of image/text within */
.group_frame {
    float: left;
    display: inline-block;
    position: relative;
    height: auto;
    width: 100%;
    padding: 0px;
    margin-bottom: 20px;
    border: 1px solid #4B9AD2;
    background-color: #ffffee;
}


.disabled {
    opacity: 0.5;
}

/* set frame float right */
.frame_float_right {
    float: right;
}

/* set select button float right */
.frame_float_left {
    float: left;
}

/* set frame with bottom margin */
.frame_margin_bottom {
    margin-bottom: 20px;
}

/* set frame with 20px margins */
.frame_margins {
    margin: 20px;
}

/* Frame container transparent with thin border */
.simple_frame {
    float: left;
    display: block;
    height: auto;
    width: auto;
    padding: 10px;
    margin: 20px;
    border: 1px solid darkgray;
    background: transparent;
}

/* Autolist Groups Header for grouping */
.groupheader {
    width: 100%;
    background-size: 100%;
    margin: 0px 0px 20px;
    padding: 0px;
    border: 1px solid #4B9AD2;
    clear: both;
    background-color: #FFFFFF;
}

/* Autolist title for each group, goes inside groupheader */
.groupheaderitem {
    width: auto;
    float: left;
    padding: 2px 4px;
    margin: 2px;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    background-color: #f9f9f1;
    border: thin solid #737171;
}

.autolist {
    float: left;
    display: inline-block;
    width: 100%;
}

/* uses flex container to display contents in grid rows */
.in_rows{
    flex-wrap: wrap;
    display: flex;
}

.autolist h1 {
    margin-bottom: 5px;
}

.autolist h2 {
    margin-bottom: 3px;
}

.autolist h3 {
    margin-bottom: 6px;
}

.autolist h4 {
    margin-bottom: 3px;
}

.autolist h5 {
    margin-bottom: 6px;
}

.autolist .imgtext_frame {
    margin-left: 10px;
    margin-right: 10px;
    width: 100%;
}

.autolist ul {
    list-style: outside none none;
    padding: 0px;
    margin: 0;
    display: block;
    float: left;
    width: 100%;
}

/* Side menu */
ul.menu {
    background: transparent;
    border: none;
    padding: 0px;
    margin: 0px;
}

/* Side menu list item */
.sidebar {
    background: transparent no-repeat;
    border-top: 1px solid #FFFFFF;
    padding-left: 4px;
    display: block;
    margin: 0px;
}

.sidebar a {
    background: transparent;
    display: block;
    border-radius: 10px;
    border-right: thin solid lightgray;
    border-bottom: thin solid lightgray;
    border-top: 2px solid lightgray;
    border-left: 2px solid lightgray;
    padding: 10px 10px 10px 10px;
    font-size: 1.2em;
    color: #FFFFFF;
}

.sidebar input {
    background: transparent;
    width: 99%;
    display: block;
    white-space: normal;
    border-radius: 10px;
    border-bottom: thin solid lightgray;
    border-right: thin solid lightgray;
    border-top: 2px solid lightgray;
    border-left: 2px solid lightgray;
    padding: 10px 10px 10px 10px;
    font-size: 1.2em;
    color: #FFFFFF;
}

.sidebar a:link {
    color: #FFFFFF;
    outline: none;
    text-decoration: none;
}

.sidebar a:visited {
    color: #FFFFFF;
    outline: none;
    text-decoration: none;
}

.sidebar input:hover,
.sidebar input:active,
.sidebar input:focus {
    opacity: 0.7;
    border-top: thin solid lightgray;
    border-left: thin solid lightgray;
    border-bottom: 2px solid lightgray;
    border-right: 2px solid lightgray;
    text-decoration: none;
}

.sidebar a:hover,
.sidebar a:active,
.sidebar a:focus {
    opacity: 0.7;
    border-top: thin solid lightgray;
    border-left: thin solid lightgray;
    border-bottom: 2px solid lightgray;
    border-right: 2px solid lightgray;
    text-decoration: none;
}

/* Side bar for mobile */
.sidebar_resize {
    width: 90%;
    height: auto;
}

.sidebar_resize:hover > .sidebar_frame, .sidebar_resize:active > .sidebar_frame {
    display: block;
}

.sidebar_resize:hover, .sidebar_resize:active {
    height: auto;
}

.sidebar_frame:hover, .sidebar_frame:active {
    display: block;
}

/* Frame to display menu on sidebar hover */
.sidebar_frame {
    display: none;
    width: 100%;
    background-color: #c9eef2;
    color: #000000;
    padding: 4px;
    height: auto;
    border: solid 1px #000000;
    border-radius: 8px;
}

.imagelink-li {
    list-style: none outside none;
    background-image: none;
    vertical-align: top;
    display: inline-block;
    position: relative;
    padding: 0 16px 0px 0px;
    margin: 0px;
}

.imagelink-li td.dataentry,
.imagelink-li td.datalabel {
    padding: 0px;
}

/* Text frame containing .text_frame elements to handle consistent alignment of text elements */
.imagelink-li .outer_text_frame {
    display: block;
    position: relative;
    float: left;
    clear: none;
    width: auto;
}

.imagelink-li .imgtext_frame {
    margin-left: 10px;
    margin-right: 10px;
    border: 1px solid lightslategray;
    padding: 0px;
}

/* Text frame to handle consitent alignment of text elements */
.imagelink-li .text_frame {
    display: block;
    clear: left;
    position: relative;
}

/* allow components to be inline */
.imagelink-li .inline {
    display: block;
    float: left;
    clear: none;
    width: auto;
}

/* allow components to be inline, clear to new line  */
.imagelink-li .inline-first {
    display: block;
    clear: left;
    float: left;
    width: auto;
}

/* allow components to be inline, float right */
.imagelink-li .inline-right {
    display: block;
    clear: right;
    float: right;
    width: auto;
}

/* Text style for information */
.infotext {
    white-space: nowrap;
    font-size: 1em;
    line-height: 1.1;
    text-align: left;
    padding: 0px 4px;
    margin: 6px 0px 0px 0px; /* use margins above & below, not spacing. Need to fix box height to 2 lines below */
    color: #333333;
    background: transparent;
    overflow: hidden;
}

/* height fixed at 3 lines, need no padding top & bottom */
.imagelink-li .title {
    font-size: 1.0em;
    min-width: 200px;
    white-space: normal;
    line-height: 1.1;
    height: 3.3em;
    max-height: 3.3em;
    min-height: 3.3em;
}

/* height fixed at 2 lines, need no padding top & bottom */
.imagelink-li .title2 {
    min-width: 200px;
    font-size: 1.0em;
    white-space: normal;
    line-height: 1.1;
    height: 2.2em;
    max-height: 2.2em;
    min-height: 2.2em;
}

.add_text {
    font-weight: 500;
    font-size: 1.1em;
}

.add_text_red {
    color: #FF0000;
    font-size: 1.1em;
}

.btn_text {
    font-size: 1em;
    padding: 1px 1px;
    margin: 0%;
    max-width: 100%;
    text-overflow: clip;
}

.imagelink-li .title:hover,
.imagelink-li .title:focus {
    height: auto;
    max-height: 6em;
    z-index: 100;
}

.imagelink-li table.dataentry,
.imagelink-li td.datalabel,
.imagelink-li td.dataentry {
    background: transparent;
    border: none;
}

/* Highlight frame around textimage box */
.imagelink-li .imgtext_frame:hover,
.imagelink-li .imgtext_frame:focus {
    background: transparent;
    border: solid slategray 2px;
}

/* Frame contains a form; within the form we use entryfield/labelfield plus text or buttons etc */
.form_frame {
    display: inline-block;
    margin: 10px 15px 15px;
    padding: 0px;
    height: auto;
    width: auto;
}

/* Frame around slide buttons */
.xpm_slide_form_btn_frame {
    display: block;
    padding: 2px 20px 2px 20px;
}
/* Frame around slide form */
.xpm_slide_form_frame {
    position: relative;
    display: block;
    float:none;
    width:80%;
    margin:auto;
}

/* class used with xpm_slide_btn_image if standard format is required */
.slide_btn_image {
    float:none;
    display:block;
    max-width: 100%;
}

.slide_btn_l, .slide_btn_r {
    position: absolute;
    top: 0px;
    opacity: 0.3;
    background-color:transparent;
    border: none;
    box-shadow: none;
    float:none;
    vertical-align:middle;
    display: block;
    width:20%;
    height: 100%;
    padding:0px;
    z-index: 100;
}

.slide_btn_l {
    left: 0px;
    background-image: url("../images/common/prev-icon-dark.png");
    background-repeat: no-repeat;
    background-position: center left;
}

.slide_btn_r {
    right: 0px;
    background-image: url("../images/common/next-icon-dark.png");
    background-repeat: no-repeat;
    background-position: center right;
}

.slide_btn_l:hover, .slide_btn_r:hover {
    border: 1px solid #555555;
    box-shadow: 1px 1px 5px #555555;
    background-color:#CCCCCC;
    opacity: 0.4;
}

@media all and (max-width: 800px) {

    .form_frame {
        margin: 10px 0px 15px;
    }

    .xpm_slide_form_frame {
        width:100%;
        margin:0px;
    }

    .img_frame_center{
        width:100% !important;
        margin:0px;
    }

    .imgtext_frame_center{
        width:100% !important;
        margin:0px;
    }
}

/* Frame contains a form with one button, used for POST message */
.form_inline {
    display: inline-block;
    margin: 0;
    padding: 0px;
    height: auto;
    width: auto;
    background: transparent;
}

/* set form fixed at bottom right */
.form_fix_btmright {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

/* set form float right */
.form_float_right {
    margin-left: 10px;
    float: right;
}

/* set form clear left */
.form_clear_left {
    clear: left;
}

/* Frame contains a forms entryfield/labelfields */
.form_entry_frame {
    float: left;
    margin: 0px;
    padding: 10px 5px;
    width: auto;
    border: 2px solid black;
    border-radius: 6px;
    background-color: #f2f2f2;
}

/* Instructions for use of form/data entry */
.instruct_box {
    clear: left;
    float: left;
    padding: 10px;
    margin: 0px 10px 10px;
    width: 200px;
    text-align: Left;
    border: 1px solid black;
    border-radius: 5px;
    color: #0D6262;
    background-color: #FFFFE1;
}

/* Frame that keeps a entryfield/labelfield pair together */
.entry_box {
    display: inline-block;
    float: left;
    clear: left;
    margin: 10px 5px 2px 10px;
    width: auto;
    height: auto;
    background: transparent;
}

@media all and (max-width: 800px) {

    .entry_box {
        margin-left: 5px !important;
    }
}

.entry_box_last {
    display: inline-block;
    float: left;
    clear: left;
    margin: 10px 5px 10px 10px;
    width: auto;
    height: auto;
    background: transparent;
}

/* Error class added to entry fields with incorrect data */
.input_error{
    background-color: #FFDDDD !important;
    border-color: #DD0000 !important;
}

/* Display field information popover */
.field_info {
    display: inline;
    background-color: #FFFFE1;
    color: #000000;
    position: absolute;
    padding: 4px;
    width: auto;
    height: auto;
    min-width: 200px;
    max-width: 400px;
    overflow: hidden;
    border: solid 1px #000000;
    border-radius: 8px;
    z-index: 100;
}

/* field information popover text */
.field_info_txt {
    display: inline;
    color: #333333  ;
    line-height: 1.0;
    font-weight: normal;
    text-decoration: none;
    width: auto;
}

/* Form data entry field. Class used by js to find form entry fields */
.entryfield {
    font-family: "Courier New", Courier, monospace;
    color: #0000dd;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.2;
    margin: 0px 4px 0px 0px;
    padding: 2px 1em 2px 2px;
    width: 240px;
    display: inline-block;
    float: left;
    border-radius: 4px;
    box-shadow: 2px 2px 4px #555 inset;
    border: 1px solid #ccc;
    background-color: #FEFEFE;
}

/* Display more info on hover, use more_info_frame on frame and moreinfo on contents to display */
.more_info_frame {
    position: relative;
}

.more_info_frame:hover > .more_info, .more_info_frame:active > .more_info {
    display: block;
}

/* Display more info on hover */
.more_info {
    display: none;
    background-color: #FFFFE1;
    color: #000000;
    position: absolute;
    padding: 4px;
    height: auto;
    overflow: hidden;
    border: solid 1px #000000;
    border-radius: 8px;
    z-index: 100;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    outline-style: none;
    cursor: default;
    user-select: none;
}

/* Form data entry validated types, validated Client side by js. Added to 'entryfield' to validate Client side. empty allows empty field.  */
/* Server side validations: Client side only validates a subset and is less strict.
    * 'num'
     * 'float'
     * "lt"/"lessthan"  validates as numeric
     * "gt"/"greaterthan"
     * Text ...
     * 'alnum' alphanumeric
     * 'alnum_s' alphanumeric+space
     * 'alpha' alpha
     * 'text' any text that could be used in a sentence
     * 'alpha_s' alpha+space
     * 'search' alphanumeric+space+%
     * 'textinput' All printable chars including cr/lf, disallows html
     * 'printchars' MOST Risky type - allow all printable chars, excluding cr/lf, allows html
     * Specific types ...
     * 'NONE'/'' No validation, fails and issues a warning
     * 'date' Standard form 'yyyy-mm-dd'
     * 'datetime' Valid date time
     * 'name' alphanumeric+'-'+'_'
     * 'personname' alphanumeric+'-'+' '
     * 'filename' alphanumeric+'.'+'_'+'-'
     * 'username' Must start with Alpha, alphanumeric only
     * 'phone'
     * 'email'
     * 'pwd' alphanumeric+'-'

 */
.ft_empty, .ft_name, .ft_num, .ft_float, .ft_text,
    .ft_textinput, .ft_date, .ft_datetime, .ft_alpha,
    .ft_filename, .ft_username, .ft_phone, .ft_email, .ft_pwd {

}

/* Form label field, default to label on the left */
.labelfield {
    display: inline-block;
    float: left;
    margin: 0px 4px 0px 0px;
    padding: 2px 4px 2px 2px;
    height: auto;
    color: #0D6262;
    font-size: 1.1em;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    outline-style: none;
    cursor: default;
    user-select: none;
}

/* Form left aligned label field */
.labelfield_left {
    display: inline-block;
    float: left;
    margin: 0px 4px 0px 0px;
    padding: 2px 2px 2px 2px;
    height: auto;
    color: #0D6262;
    font-size: 1.1em;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    outline-style: none;
    cursor: default;
    user-select: none;
}

/* Table header color, use to match table header color */
.table_header {
    background-color: #4cb3bf !important;
    background: linear-gradient( #4cb3bf, #02617d) !important;
}

/* Table to display data, header dark, rows alternate while/grey */
.datatable {
    border: solid 2px darkgray;
    width: auto;
    margin-top: 10px;
    max-width: 99%;
}
.datatable th {
    word-break: normal;
    background-color: #4cb3bf !important;
    background: linear-gradient( #4cb3bf, #02617d);
    line-height: 1.4;
    color: white;
    padding: 5px 10px;
    border-bottom: solid 1px lightgray;
    border-right: solid 1px lightgray;
}
.datatable tr {
    background-color: white;
    line-height: 1.2;
    color: #0d076b;
    padding: 5px 10px;
}
.datatable tr.alt {
    background-color: lightgray;
}
.datatable td {
    vertical-align: top;
    border-bottom: solid 1px lightgray;
    border-right: solid 1px lightgray;
    padding: 5px 10px;
}

/* Date selector table */
table.selector {  font-family: "Courier New", Courier, monospace;
    border: 1px solid #999;}
tr.selector-row	{ align-content: center; }
th.selector-hdr {  background:#ddd; border-bottom:1px solid #aaa; border-right:1px solid #aaa;}
td.selector-day { background:#ddd; border-bottom:1px solid #aaa; border-right:1px solid #aaa;}
a.selector-day-enable {background-color: #528df0 !important;}
a.selector-day-disable {background-color: #7cc6f0 !important;}
input.selector-day-enable {background-color: #528df0 !important;}
input.selector-day-disable {background-color: #7cc6f0 !important;}

/* Table used in a form for entering data */
table.dataentry {
    width: auto;
    border: 1px solid black;
}

td.dataentry {
    font-family: "Courier New", Courier, monospace;
    color: #0000dd;
    font-weight: bold;
    font-size: 1em;
    line-height: 1.2;
    text-align: left;
    padding: 5px 5px;
    background:transparent;
}

td.datalabel {
    text-align: left;
    vertical-align: top;
    padding: 9px 5px 5px; /* Top 4px more than dataentry to align */
    background: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    outline-style: none;
    cursor: default;
    user-select: none;
}

/* Prevent robots answering, replace with below */
input.robostyle {
    display: none;
}

/* form completed */
input.formstyle {
    display: none;
}

td > input {
    background-color: #FEFEFE;
    font-family: "Courier New", Courier, monospace;
    color: #0000dd;
    font-size: 1em;
    font-weight: bold;
    line-height: 1.2;
    padding: 2px 4px;
    resize: horizontal;
    width: 100%;
    border-radius: 4px;
    box-shadow: 1px 1px 4px #555 inset;
    border: 1px solid #ccc;
}

td > textarea {
    background-color: #FEFEFE;
    font-family: "Courier New", Courier, monospace;
    color: #0000dd;
    font-weight: bold;
    resize: horizontal;
    width: 100%;
    border-radius: 4px;
    box-shadow: 1px 1px 4px #555 inset;
    border: 1px solid #ccc;
}

/* Text styling for inline header, use TEXT type, E.g TOTAL=22 */
.inline_compound_header {
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;
    font-size: 1.2em;
    font-weight: bold;
}

/* Text styling for inline header, use TEXT type, E.g TOTAL=22 */
.inline_compound_bold {
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;
    font-size: 1.1em;
    font-weight: bold;
}

/* Text styling for inline text, E.g xxx TOTAL=22 */
.inline_compound_text {
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;
}

/* global classes */
.error_msg {
    color: #FF0000;
    font-weight: bold;
    text-align: left;
    background-color: #FFCC99;
    padding: 0px;
    border-style: solid;
}

.error_box {
    clear: both;
    float: left;
    padding: 10px 20px;
    margin: 2% 2%;
    text-align: Left;
    border: 2px solid red;
    color: #FF0000;
    background-color: #FFCC99;
}

/* Highlight in bold color, same as strong */
.highlight {
    color: #056C6C;
    font-weight: bold;
}

/* Highlight in red, same as strong */
.redhighlight {
    color: #990000;
}

.highlight_centre {
    text-align: center;
    color: #056C6C;
    font-weight: bold;
}

.more {
    text-decoration: underline !important;
}

.debug_box {
    clear: both;
    float: left;
    padding: 10px 20px;
    margin: 4% 2%;
    min-height: 100%;
    height: auto;
    width: 100%;
    text-align: Left;
    border: 1px solid black;
    color: #e0edb5;
    background-color: #FFCC99;
}

/* xpm_date_selector css */
.calendar-box {
    display:none;
    background-color:#fff;
    border:1px solid #005689;
    position:absolute;
    padding: 0;
    z-index: 70;
}
.calendar-box select.calendar-month {
    line-height: 0.8;
    color: #005689;
    width:9ch;
}
.calendar-box select.calendar-year {
    color: #005689;
    line-height: 0.8;
    width:9ch;
    margin-left: 4px;
}
.calendar-box .calendar-cancel {
    width:40%;
    color: #005689;
    font-size: 14px;
    line-height: 0.8;
    margin-bottom: 10px;
}
.calendar-box table {
    border-collapse: collapse;
    border-spacing: 0px;
}
.calendar-box table td {
    width:40px;
    text-align:center;
    font-size: 14px;
    font-family: monospace;
    padding-bottom: 2px;
    padding-top: 2px;
    border:1px solid #aaa;
}
.calendar-box table th {
    width:40px;
    font-size: 16px;
    font-family: monospace;
    text-align:center;
    padding-bottom: 10px;
}
.calendar-box table .calendar-arrow-l  {
    text-align: left;
    padding-left: 10px;
}
.calendar-box table .calendar-arrow-r  {
    text-align: right;
    padding-right: 10px;
}
.calendar-box table tr .header {
    border-bottom:1px solid #555;
    padding-bottom: 4px;
    padding-top: 4px;
}
.calendar-box .calendar-title {
    text-align:center;
}
.calendar-box a {
    text-decoration:none;
}
.calendar-box .today {
    background-color: #aaf1f7;
}
.calendar-box .selected {
    background-color: wheat;
}