/* Page/general defaults */

    body, th, td, span, div { font-family: Roboto,Arial,Helvetica,Sans-Serif; font-size: 13pt }
    body                    { background-color: #ffffff; padding: 0px }
    div.wB_body             { padding: 0px }
    button, 
    div, 
    input,   
    td, 
    th, 
    select, 
    span, 
    textarea                { font-family: arial; font-size: 13pt; border: 2px }
    div.wB_site_description { background-color: #eeeeee; padding: 20px; border: 1px solid #aaaaff; border-radius: 5px 5px 0px 0px; border-bottom: 5px solid #9999cc; margin-top: 12px; margin-bottom: 24px }
    .wB_center              { text-align: center }
    .wB_right               { text-align: right  }
    div.wB_page_footer      { background-color: #cccccc; padding: 10px; margin: 0px; margin-top: 50px; border-top: 3px solid #999999; margin-bottom: 40px }

/* Colours */

    .wB_grey      { background-color: #eeeeee }
    .wB_grey_text { color:            #cccccc }
    .wB_header    { background-color: #eeeeff; padding: 10px  }

/* Hyperlinks */

    a                       { text-decoration: none; color: blue      }
    .wB_hyperlink           { color: blue }
    .wB_hyperlink:hover     { color: blue; text-decoration: underline }
    a.wB:hover,
    a.wB_link:hover,
    a:hover                 { text-decoration: underline } 
    a, 
    a.wB,
    a.wB_link               { color: blue              } /* For elements which aren't presented as hyperlinks, but should be */

/* Forms and fields */

    div.wB_field            { margin-bottom: 12px } /* Separate from next field. */
    textarea                { border: 1px solid #cccccc; border-radius: 1px solid #cccccc }
    input, 
    button, 
    textarea,
    input,
    select                  { border-radius: 5px; border: 2px solid #cccccc; background-color: #ffffee; }
    div.wB_form_field_label { font-size: 15pt; color: #002200; padding: 0px; }
    div.wB_form_field_container 
                            { margin-bottom: 12px }
    input, 
    button,
    textarea,
    select                  { padding: 10px }
    div.wB_form_field       { padding-top: 16px; padding-bottom: 16px }
    button                  { background-color: #ccccff; border-radius: 5px; border: 2px solid #555555; padding: 9px }
    button:hover            { background-color: #ccccdd; border: 2px solid #5555cc }
    select, 
    textarea, 
    input                   { background-color: #ffffee; border-radius: 5px; border: 2px solid #cccccc; }
    
/* Cards */

    div.wB_simple_card      { border: 1px solid #cccccc; border-radius: 5px; margin-bottom: 12px; padding: 10px }
    div.wB_card             { margin-bottom: 30px }
    div.wB_spacer           { padding: 26px; border: none; padding-right: 34px; }
    div.wB_card_title       { padding-top: 10px; padding-left: 10px; padding-right: 10px; font-weight: bold; font-size: 18pt; background-color: #9999cc; border-top: 9px solid #333377; clear: both; padding-bottom: 5px }
    div.wB_card_body        { padding: 5px; margin-top: 0px }
    div.wB_card_section     { margin-left: -10px; margin-right: -10px; background-color: #eeeeee; border-radius: 0px 0px 5px 5px; margin-top: 0px; margin-bottom: 12px; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px }
    div.wB_card_description { padding: 10px; margin-top: 0px; margin-bottom: 0px; color: black; background-color: #eeeeee; border-radius: 5px }
    div.wB_card_footer      { padding: 10px; margin-top: 0px; margin-bottom: 0px; color: black }

/* Tables */

    table.wB                { border: none; border: 2px solid #777777; border-collapse: collapse; background-color:white; margin-top: 30px; max-width: 100%; width: 100% }
    td.wB,  
    th.wB                   { padding: 10px; border: none; border-bottom: 1px solid #cccccc; text-align: left }
    th.wB                   { background-color: #eeeeee  }
    td,th                   { vertical-align: top; }

/* Headings get progressively smaller and darker */

    h1,.wB_h1            { font-size: 25pt; color: #0077AA; padding: 0px; }
    h2,.wB_h2            { font-size: 23pt; color: #006688; padding: 0px; margin-top: 6px; margin-bottom: 6px }
    h3,.wB_h3            { font-size: 21pt; color: #005566; padding: 0px; }
    h4,.wB_h4            { font-size: 19pt; color: #004444; padding: 0px; }
    h5,.wB_h5            { font-size: 17pt; color: #003322; padding: 0px; }
    h6,.wB_h6            { font-size: 15pt; color: #002200; padding: 0px; }

/* Text styling */

    dfn                  { font-weight: bold; color: darkorange; font-style: normal }
    .wB_selected         { border: 2px solid black; background-color: #ccccee; font-weight: bold; }

/* General styling */

    .wB_rounded         { border-radius: 5px }
    .wB_bordered        { border: 2px solid #999999 }

/* Tabs */

    div.wB_tabs       { color: #aaaaaa }
    span.wB_tab       { padding: 10px }
    span.wB_tab:hover { background-color: #ccccff }

/* Menu */

    div.wB_menu             { padding: 15px; background-color: #ddddff }
    div.wB_menu_bar         { margin-top: 20px; }
th.wB_form_field { max-width: 500px }
th, td { text-align: left; padding: 10px }
tr.wB_hover:hover { background-color: #cccccc; }
td.wB_hover:hover { background-color: #cccccc }
div.wB_top_menu { background-color: white; padding: 0px; overflow: hidden; position: fixed; top: 0; width: 100%; border-bottom: 2px solid #000055 }
body.wB { padding: 0px; margin: 0px; margin: auto; } /* 940px - Search for best page width, common results suggest 940px+ */
div.wB_body_container { scroll-behavior: smooth; background-color: white; border: none; margin-top: 50px }
div.wB_messages { border-top: 3px #999999 solid; border-bottom: 3px #999999 solid; background-color: #cccccc; padding: 10px; vertical-align: middle }
.wB_small { font-size: 9pt }
button.wB_simple { border: none; padding: 2px; min-height: 16px; background-color: transparent }
input:disabled { background-color: #eeeeee }
th.wB_form_field_label { width: 120px }
input.wB { width: 90%; min-width: 120px; max-width: 90% }
div.wB_ok_card { background-color: #eeffee; border: 2px solid #335533; border-radius: 5px; padding: 10px }
td.wB_calendar_entry { border: 2px solid #999999 }
.wB_quick_add { max-width: 200px }
button.wB_quick_add { display: none }
:focus { background-color: #eeddbb }
div.wB_status_bar { position: fixed; bottom: 0px; height: 1em; left: 0px; margin-left: 0px; width: 100%; background-color: #cccccc; border-top: 3px solid #999999; padding: 10px; overflow-x: auto; line-clamp: 1; resize: horizontal }
input { max-width: 250px }
input.wB_full { max-width: 100% }
button.wB_no_border { border: 0px; background: none }
.wB_rounded { border-radius: 5px }
@keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
img.wB_blink { animation: blink 1s; animation-iteration-count: infinite; }
td.wB_compact { padding: 2px }
div.wB_padded { padding: 10px }
tr.wB_menu { background-color: #eeeeff; border: 3px solid #999999 }
div.wB_card_minimised { background-color: #9999cc; color: black; display: none; padding: 10px; border: 1px solid #000055 }
div.wB_card_title_level_2 { background-color: #eeeeee; border-top: none }
div.wB_card_title_level_3 { background-color: #eeeeee; border-top: 1px solid #eeeeee }
textarea { max-width: 95% }
div.wB_body_container { border: 2px solid #dddddd; box-shadow: 8px 8px 8px #cccccc; }
body.wB_widget { background-color: white }
.wB_no_wrap { white-space: nowrap }
input[type="checkbox"] { transform:scale(1.3, 1.3); }
table.wB_no_border { border: 0px }
button.wB_top_menu { border: none; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; border-top: none; background-color: white; color: blue; border-radius: 0px 0px 0px 0px }
button.wB_top_menu:hover { background-color: #eeeeff }
div.wB_icon_bar { background-color: #bbbbff; color: white; border-radius: 0px 5px 5px 5px; padding: 10px; border-right: 10px solid #9999ff }
button.wB_icon_bar { background-color: #9999ff; border: 0px none; border-right: 1px solid #bbbbff; border-left: 1px solid #bbbbff; border-radius: 0px 0px 0px 0px; margin: 0px }
button.wB_icon_bar:hover { background-color: #7777dd }
button.wB_appliances { background-color: #eeeeee; border: 1px solid #999999; width: 220px; height: 240px; vertical-align: top; text-align: center }
button.wB_appliances:hover { background-color: #ddddff; }
div.wB_strapline { background-color: #333377; color: white; padding: 10px }
.wB_white { color: white; text-decoration: underline }
p { margin-top: 12px; margin-bottom: 12px }