html, body { margin:0; padding:0; }
h1, h2, h3  { text-align: center; margin:0; font-family:Arial, Helvetica, sans-serif; }

@media (hover:none), (pointer:coarse)
{
    body { width:100%; font-size:3vw; margin:0; }
    hi   { font-size:7vw; }
    nav  { font-size:4vw; }
}

#SFW_Content
{
    position:relative;
}

#SFW_Header, #SFW_Ghost_Header
{
    position: static;
    margin:0;
    padding:0;
    top:0;
    left:0;
    width:100%;
    background-color:#FFFFFF;
}

#SFW_Header { z-index: 99; }



#SFW_Header nav { text-align:center; }
/* #SFW_Header nav a { padding:.5em; } */
/* #SFW_Header nav a.here { background-color:#999999; } */

pre.root_pre { border-top: 2px solid red; padding-top:2em; }

nav.views { text-align: center; }
nav.views div
{
    display: inline-block;
    font-size:large;
    font-weight: bold;
    padding: .25em 1em;
    margin: .5em;
    border:solid 1px black;
    cursor: pointer;
    background-color:#FFFFFF;
}

nav.views div.selected
{
    cursor: default;
    background-color: #DDDDDD;
    
}

/* Start of ul.menu styles */

nav ul { padding:0; margin:0; list-style-type:none; }
nav a  { text-decoration:none; color: #000000;}
nav li
{
    text-align:left;
    display:inline-block;
    cursor:pointer;
    white-space:nowrap;
    background-color:#DDDDDD;
}

nav ul.menu                         { background-color:#EEEEEE; }

nav ul.menu li:hover                { background-color:#FFFF66; }

nav ul.menu li *                    { display:block; }
nav ul.menu li a,
nav ul.menu li div                  { padding:.1em .75em; }

/* drop-down part */

nav ul.menu li.topic                { position:relative; }
nav ul.menu li.topic       .menu    { display:none; position:absolute; left:0; }
nav ul.menu li.topic:hover .menu    { display:block; }

/* drop-down drop shadow */
nav ul.menu li.topic .menu li.mitem { border-right :8px solid #AAAAAA; }    
nav ul.menu li.topic .menu          { border-bottom:8px solid #AAAAAA; }



.SFW_Ghost
{
    position:relative;
    top:0;
    left:0;
    margin:0;
    width:100%
}

div.SFW_Host, div.SFW_Subhost
{
    position:absolute;
    top : 0px;
    left : 0px;
    width : 100%;
    height: auto;
    background: url(/includes/screen.png) repeat;
}

div.SFW_Host div.closer
{
    position: absolute;
    top : 10px;
    right : 10px;
    height: 1em;
    width : 1em;
    border:solid 1px black;
    cursor:pointer;
    text-align:center;
    vertical-align:middle;
}


div.SFW_Host h2 { text-align: center; background-color:#9999FF; margin:0; }
div.SFW_Host div.intro { max-width:30em; margin:0 auto; }

div.fixed_head { padding:0; }
div.fixed_head.opaque { background-color:#FFFFFF; }
div.fixed_head div.intro { margin: .5em auto; }
@media (hover:none), (pointer:coarse)
{
    div.fixed_head div.intro { margin:0; auto; }
}

div.message
{
    border: solid 2px black;
    width:600px;
    margin:0 auto;
    background-color:#FFFFFF;
    z-index:101;
}

.def_left   { text-align:left; }
.def_right  { text-align:right; }
.def_center { text-align:center; }

.action     { cursor:pointer; }

form.isotable tbody tr { cursor:pointer; }
form.isotable tbody tr:hover { background-color:#FFFF66; }
tr.isotable_form td.field { display:none; }
button.ebutton_edit
{
    margin-left:0.5em;
    background : url( 'record-edit.png' );
    background-size:14px 14px;
    height: 14px;
    width: 14px;
    border:none;
}

button.add_record
{
    background : url( 'record-add.png' );
    background-size:14px 14px;
    height: 14px;
    width: 14px;
    border:none;
}


div.message p { margin:8px; display:table-row;}
div.message p span { display:table-cell; padding:2px 16px; }
div.message p.type { display:block; text-align:center; text-weight:bold; font-size:larger; border-bottom:solid 1px black; }

table.Schema { border-collapse:collapse; border-spacing:0; background-color: #FFFFFF;}
table.Schema { margin:0 auto; padding:0; }

table.Schema td, table.Schema th
{
    padding:4px;
    /* border:solid 5px green; */
}

table.Schema th.sorted_up { background-color: red; }
table.Schema th.sorted_down { background-color: yellow; }

.floater { visibility : hidden; }

table.Schema thead tr.floater
{
    position:fixed;
    top: 0;
    left: 0;
    background-color:#FFFFFF;
}

table.Schema thead tr.floater th,
table.Schema thead tr.floater td
{
    position:absolute;
}


table.Schema thead th
{
    white-space:nowrap;
    background-color:#DDDDDD;
    border:solid #AAAAAA;
    border-width:0 2px 2px 0;
    cursor:pointer;
}

/* table.Schema thead tr.floater.button_row td { display:block; } */
/* table.Schema thead tr.button_row td { text-align:center; } */
/* table.Schema thead tr.button_row button { margin:.25em; } */

/* approximate tr row spacing for p */
p.button_row                   { margin: .25em 0; }
/* tr.floater.button_row td       { display;block; } */
tr.button_row td, p.button_row { text-align:center; white-space:nowrap; }
tr.button_row button           { margin: .25em; }

table.Schema tbody tr { cursor:pointer; }
table.Schema tbody td
{
    vertical-align:top;
    border-right:solid 1px #999999;
    border-bottom:solid 1px #999999;
}

form.dialog
{
    position:fixed;
    top:10px;
    left:10px;
    background-color:#FFFFFF;
}

form.Moveable
{
    position:fixed;
    left:10px;
    top:10px;
    background-color:#EEEEEE;
    border:solid 2px #CCCCCC;
}

form.Embedded
{
    /* background-color:#EEEEEE; */
    /* border:solid 2px #CCCCCC; */
    display:table;
    margin:0 auto;
    visibility:visible;
}

@media (pointer:coarse) {
    form.dialog,
    form.Moveable,
    form.Embedded
        {
            top:0; left:0; height:100%; width:100%;
        }
}

fieldset.Schema
{
    margin:0 .25em;
    padding:0;
    border:none;
}

fieldset.Schema legend
{
    font-family:sans-serif;
    width:100%;
    height:150%;
    border:solid 1px #AAAAAA;
    line-height:150%;
    text-align:center;
    position:relative;
    background-color:#8888FF;
}

fieldset.Schema legend.Embedded
{
    top:0;
    border:none;
}

/* fieldset.Schema p.row { display: table-row } */
/* fieldset.Schema p.row > * { display: table-cell; } */
fieldset.Schema label
{
    font-family:sans-serif;
    font-size:80%;
    text-align:right;
    margin-left:0;
    margin-top:.5em;
    padding-right:.5em;
    vertical-align:top;
}

fieldset.Schema label button { margin-right: .25em; }

fieldset.Schema p.buttons { display:block; text-align:center; margin-bottom:0.25em; }
fieldset.Schema input.Embedded { display:none; }
fieldset.Schema p.form-row { display: block; margin:0 0.25em; }
fieldset.Schema p.form-row label { display:block; text-align:left; }
fieldset.Schema p.form-row div.field_content
{
    margin-left:.5em;
    display:block;
    background-color:#FFFFFF;
    min-height:1em;
}

img.pwtoggle { height: 1.25em; vertical-align:middle; cursor:pointer; }

/* fieldset.Schema p.form-row { display: table-row; } */
/* fieldset.Schema p.form-row * { display : table-cell; } */

form.Moveable legend       { cursor: pointer; }
form.Moveable legend:hover { background-color:#CCCCCC; }

form.Schema td { vertical-align:top; }

div.selectx div.display
{
    background-color:#FFFFFF;
    border: solid 1px #AAAAAA;
    min-height:1.1em;
    position: relative;
} 
div.selectx .tabtarget
{
    position: absolute;
    top:0; left:0; height:100%; width:100%;
    border: solid 1px transparent;
}

div.selectx input.entry { display:none; }
div.selectx ul
{
    display:none;
    list-style:none;
    padding:0;
    margin:0;
    min-width:16em;
    max-height: 240px;
    overflow-x : hidden;
    overflow-y : auto;
}

div.selectx.active div.display span { background-color: #DDDDDD; }
div.selectx.multiple div.display span:hover { background-color: #DD9999; cursor:pointer; }


div.selectx.active .tabtarget  { display:none; }
div.selectx.active input.entry { display:block; }
div.selectx.active ul          { display:block; }

div.selectx li:hover { background-color:#33FF33; cursor:pointer; }
div.selectx li.on { background-color:#99FF33; }
div.selectx li.target { font-weight:bold; }


/* ul selection styles */
ul.ulselect { list-style:none; padding:0; min-width:16em; }
ul.ulselect span.item
{
    border-radius: 4px;
    background-color:#CCCCCC;
    padding:0 8px;
    margin:0 4px;
    white-space:no-wrap;
}
ul.ulselect span.item span
{
    font-weight:bold;
    cursor:pointer;
    color: #666666;
}

ul.ulselect span.item span:hover
{
    color:#000000;
}

ul.ulselect li.options_host
{
    position:relative;
    z-index:100;
}

ul.ulselect li.options_host div
{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    display:none;
}
ul.ulselect li.options_host ul
{
    position: relative;
    list-style:none;
    padding:0 4px;
    width:100%;
    border: solid 1px black;

    max-height:240px;
    overflow-x : hidden;
    overflow-y : auto;
}

li.options_host ul li   { background-color: #FFFFFF; }
li.options_host ul li:hover   { background-color: #CCCCCC; }
li.options_host ul li.selected   { background-color: #6666FF; }

ul.ulselect { background-color: #FFFFFF; }
ul.ulselect li.cluster { background-color: #FFFFFF; position:relative; }
ul.ulselect li.cluster span { width:100%; min-height:1em; }
ul.ulselect li.cluster input.transfer { display:none; }
ul.ulselect li.cluster input.typing { outline:none; display:none; border:0; width:3em; }

ul.ulselect li.shadow { display:none; }
ul.ulselect li.in { color:#999999; }
ul.ulselect li.out { color:#000000; cursor:pointer; }

table.iltable { list-style:none; padding:0; min-width:16em; }
table.iltable tfoot    { display:node; }
table.iltable tr:hover { background-color:#9999ff; cursor:pointer; }

table.calendar { border-collapse:collapse; border-spacing:0; font-family:sans-serif; }
table.calendar tbody tr { height:2em; }
table.calendar tbody td { padding:0; }

table.calendar td.calnav button { margin:.5em; }

table.calendar td.cn_left { text-align:right; }
table.calendar td.cn_right { text-align:left; }

td.cal_title { font-size: large; font-weight: bold; text-align:center; }
td.cal_day_head { font-size:small; font-weight:bold; text-align:center; }
td.cal_day
{
    border:solid 1px black;
    cursor: pointer;
    width:14%;
    vertical-align:top;
    padding: 0;
    margin: 0;
}

td.cal_day div.day_head
{
    font-size:small;
    text-align:right;
    padding:0 .25em;
    margin:0;
    background-color:#99FF99;
}

div.assoc
{
    margin:0;
    padding:0;
}

div.assoc span
{
    border: solid 1px black;
    padding: 0 .25em;
    margin:0 .25em;
}

div.assoc.active span:hover,
table.assoc.active tr:hover
{
    cursor: pointer;
    background-color:#99FF99;
}