/*========================================================================================================================*/
/* Basics */
/* ====== */

/*
 * z-index
 *  20 error
 *  15 header
 *  11 ajax busy indicator
 *  10 menu
 *   9 debug drop down menu (set in JS)
 *   8 debug text
 *   7 movie 'skip' indicator
 *   6 action menu information
 *   5 action menu
 */
html {
    /*-webkit-touch-callout: none;*/ /* prevent callout to copy image, etc when tap to hold (actually dont do this, do for individual buttons etc) */
}

html, body, div {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
}

html, body {
    font-family: Arial, Helvetica, "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, sans-serif;
    font-size: 100%;
    background-color: #81e4e4; /* lightskyblue 95%*/
/*    background-color: #e7f5fe; /* even lighter */
/*    background-color: #076cab; /* darker blue */
}

.white      { color: white; }
.green      { color: green; }
.blue       { color: blue; }
.yellow     { color: yellow; }
.orangered  { color: orangered; }
.red        { color: red; }
.darkred    { color: darkred; }
.black      { color: black; }

.fs-8       { font-size:  8px; }
.fs-10      { font-size: 10px; }
.fs-12      { font-size: 12px; }
.fs-14      { font-size: 14px; }
.fs-16      { font-size: 16px; }
.fs-18      { font-size: 18px; }
.fs-20      { font-size: 20px; }
.fs-22      { font-size: 22px; }
.fs-24      { font-size: 24px; }
.fs-26      { font-size: 26px; }

.plainlist          { list-style-type: none; }
.nodisplay          { display: none; }
.wrap               { white-space: pre-wrap; }
.nowrap             { white-space: nowrap; }
.bold               { font-weight: bold; }
.normal             { font-style: normal; }
.italic             { font-style: italic; }
.oblique            { font-style: oblique; }
.justify            { text-align: justify; }
.nomargin           { margin: 0; }
.noborder           { border: 0; }
.nopadding          { padding: 0; }
.border-thin-dashed { border: thin dashed black; }
.padding-2          { padding: 2px; }
.padding-3          { padding: 3px; }
.padding-4          { padding: 4px; }
.underline          { text-decoration: underline }


/*========================================================================================================================*/
/* Workarounds */
/* =========== */

body {
    -webkit-user-select: none;                  /* iOS chrome stop the blueish highlight (when not allowed) */
/*    -webkit-tap-highlight-color: rgba(0,0,0,0); /* iOS stop the tap grey colour */
    -webkit-text-size-adjust: 100%;             /* iOS prevent font scaling in landscape */
}
-webkit-full-screen
{
    width: 100%;
    height: 100%;
}

/*========================================================================================================================*/
/* Debug */
/* ===== */

#debug-container {
    display: none;
    position: fixed;
    top: 100px;
    bottom: 100px;
    left: 15%;
    right: 15%;
    font-size: 14px;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    color: yellow;
    background-color: black;
    margin: 0;
    padding: 0px 2px 0px 2px;
    border-width: 1px;
    border-style: solid;
    border-color: yellow;
    white-space: pre;
    user-select: text;
    -webkit-user-select: text;
    overflow: auto;
    z-index: 8;
}


/*========================================================================================================================*/
/* Overlays */
/* ======== */

#ajax-busyoverlay {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 6px;
    height: 6px;
    margin: 2px;
    background-color: yellow;
    border: 2px solid yellow;
    border-radius: 8px;
    z-index: 11;
}
#movies-movie-video-skipoverlay {
    display: none;
    position: fixed;
/* just above action bar (bottom of screen) and somewhere near the middle (kind of) */
    bottom: 50px;
    left: 50%;
    margin: 2px;
    padding: 4px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    text-align: center;
    background-color: black;
    border: 2px solid yellow;
    border-radius: 10px;
    cursor: pointer;
    z-index: 7;
}


/*========================================================================================================================*/
/* Main Sections  */
/* ============= */

.logout-button {
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 70px;
    height: 40px;
    margin: 0;
    padding: 0;
    align: center;
    color: white;
    background-color: #076cab;
    text-align: center;
    text-decoration: none;
    font: italic bold 14px georgia, comic sans MS, arial, sans-serif;
    text-shadow: 1px 1px 1px rgba(255,255,255, .22);
    border-radius: 5px;
    box-shadow: 4px 4px 4px rgba(0,0,0, .29), inset 2px 2px 2px rgba(255,255,255, .44);
    cursor: pointer;
}

#error-container,
#header-container {
    white-space: pre;
    margin: 0;
    padding: 10px;
    -webkit-user-select: text;
    overflow: auto;
}
#error-container {
    display: none;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    color: yellow;
    background-color: black;
    z-index: 20;
}
#header-container {
    z-index: 15;
}
#page-container {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: #81e4e4; /* lightskyblue 95%*/
}
#header-title,
#error-title {
}
#header-msg,
#error-msg {
}
#header-sysmsg,
#error-sysmsg {
}
#header-footer,
#error-footer {
}


/*========================================================================================================================*/
/* Menu */
/* ==== */

#menu-container,
#menu-container-blank {
    display: block;
    position: fixed;
    visibility: hidden;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 50px;
    margin: 0;
    border: 0;
    padding: 0;
    background-color: #076cab;
    font-size: 0px; /* get rid of those pesky gaps for inline-block */
    z-index: 10;
}
#menu-container img {
    margin: 0;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.menu-float-left,
.menu-float-right {
    display: inline-block;
    visibility: hidden;
    cursor: pointer;
}
.menu-float-left {
    white-space: pre;
    float: left;
}
.menu-float-right {
    white-space: pre;
    float: right;
}
#menu-bar-wrapper-container {
    opacity: 1.0;
}
.menu-wrapper {
    display: block;
    position: fixed;
    visibility: hidden;
    /* padding set in JS */
    background-color: #ffeb80; /* gold lighter */
    cursor: pointer;
    z-index: 10;
}
.menu-entry {
    border: 2px solid #ffeb80; /* may change in JS */
    padding-left: 2px;
    padding-right: 2px;
}
.menu-entry-text {
    white-space: pre;
}
.menu-entry-shortcut {
    white-space: pre;
    font-family: monospace;
    float: right;
}
.menu-highlight {
    background-color: white;
    border-style: outset;
    border-color: black;
    border-width: 2px;
    border-radius: 6px;
}
#menu-msgcontainer {
    display: inline-block;
    position: fixed;
    top: 0px;
    margin: 4px;
    padding: 4px;
    vertical-align: middle;
    color: white;
    font-size: 26px;
    font-style: normal;
    font-weight: bold;
    white-space: pre;
    border-width: 2px;
    border-style: solid;
    border-color: black;
    border-radius: 10px;
    background-color: black;
}
#menu-msgtextdiv {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
#menu-searchcontainer {
    display: inline-block;
    position: relative;
}
#menu-searchinput {
    font-size: 28px;
    font-style: normal;
    font-weight: normal;
    margin: 8px 4px 4px 2px; /* top, right, bottom, left */
    padding: 0px 4px 0px 4px; /* top, right, bottom, left */
    border-style: outset;
    border-color: black;
    border-width: 1px;
    border-radius: 8px;
    cursor: pointer;
}


/*========================================================================================================================*/
/* Message classes */
/* =============== */

.message {
    display: none;
    position: fixed;
    top: 100px;
    left: 0px;
    right: 0px;
    text-align: center;
}
.message-text {
    color: red;
    font-style: italic;
    font-weight: bold;
    font-size: 30px;
}

/*========================================================================================================================*/
/* Settings */
/* ======== */

#settings-container {
    display: none;
    position: fixed;
    top: 50px; /* menu above */
    left: 0px;
    bottom: 0px;
    right: 0px;
    overflow: auto;
}
#settings-section-user {
    position: fixed;
    /* js sets location and size */
    padding: 0px 10px 0px 10px;
    font-size: 16px; /* js may over-ride */
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    color: black;
    white-space: pre;
    overflow: auto;
    user-select: text;
    -webkit-user-select: text;
}
#settings-section-whatsnew {
    position: fixed;
    /* js sets location and size */
    padding: 0px 0px 0px 0px;
    overflow: auto;
}
#settings-section-options {
    position: fixed;
    /* js sets location and size */
    padding: 0px 10px 0px 10px;
    font-size: 14px; /* js may over-ride */
    overflow: auto;
}
#settings-section-status {
    position: fixed;
    /* js sets location and size */
    padding: 0px 10px 0px 10px;
    font-size: 16px; /* js may over-ride */
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    color: black;
    white-space: pre;
    overflow: auto;
    user-select: text;
    -webkit-user-select: text;
}
#settings-section-buttons {
    position: fixed;
    /* js sets location and size */
    padding: 0px 10px 0px 10px; /* top, right, bottom, left */
    overflow: auto;
}
#settings-section-info {
    position: fixed;
    /* js sets location and size */
    padding: 10px;
    font-size: 14px; /* js may over-ride */
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    color: yellow;
    white-space: pre;
    background-color: black;
    overflow: auto;
    user-select: text;
    -webkit-user-select: text;
}
#settings-serverstate {
    display: none;
    overflow: auto;
}
.settings-serverstate-gap {
    visibility: hidden;
}
#settings-option-thumbsize {
    margin: 4px 0px 4px 0px; /* top, right, bottom, left */
}
.settings-option-thumbsize-prompt {
    margin: 0px 0px 0px 0px; /* top, right, bottom, left */
    padding: 0px;
}
.settings-option-thumbsize-selector {
    margin: 0px 0px 0px 8px; /* top, right, bottom, left */
}
.settings-option-thumbsize-input, .settings-option-thumbsize-label {
    vertical-align: middle;
    padding: 0px 0px 0px 4px;
    cursor: pointer;
}
.settings-option-thumbsize-input {
}
.settings-option-thumbsize-label {
    padding: 0px 0px 0px 4px;
}
.settings-option-control {
    margin: 0px 0px 0px 0px; /* top, right, bottom, left */
    padding: 0px 0px 0px 4px;
    cursor: pointer;
}
.settings-option-checkbox, .settings-option-checkbox-label {
    vertical-align: middle;
    margin: 4px 0px 4px 0px; /* top, right, bottom, left */
    cursor: pointer;
}
.settings-option-checkbox {
    transform: scale(1.2);
}
.settings-option-checkbox-label {
    padding: 0px 0px 0px 4px;
}
.settings-button {
    width: 136px;
    margin: 2px 2px 2px 2px; /* top, right, bottom, left */
    padding: 4px;
    align: center;
    color: white;
    background-color: #076cab;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    border: 2px solid black;
    border-radius: 5px;
    box-shadow: 4px 4px 4px rgba(0,0,0, .29), inset 2px 2px 2px rgba(255,255,255, .44);
    cursor: pointer;
}
.settings-nav-element-highlight {
    border: 2px solid yellow;
}


/*========================================================================================================================*/
/* Home */
/* ==== */

#home-container {
}
#home-tips-page {
    display: none;
    position: fixed;
    top: 50px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    white-space: pre;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.home-tips-chapter,
.home-tips-chapter-alt {
    padding: 8px 8px 8px 8px;
}
.home-tips-chapter {
    background-color: #81e4e4; /* lightskyblue 95%*/
}
.home-tips-chapter-alt {
    background-color: #adebad; /* kind of light green - alternative white or #81e4e4 */
}
.home-tips-chapter-header {
    overflow-x: auto;
}
.home-tips-chapter-title {
    display: inline-block;
    color : blue;
    font-weight: bold;
    border: none;
    padding: 2px;
    cursor: pointer;
}
.home-tips-chapter-contents-link {
    display: inline-block;
}
.home-tips-chapter-button-goto-contents-link {
    align: center;
    color: green;
    border: none;
    padding: 2px;
    background-color: inherit;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}
.home-tips-chapter-content {
    color: black;
    padding: 0px 0px 0px 20px;
    overflow-x: auto;
}
.home-tips-button-chapter-link {
    color: green;
    border: none;
    background-color: inherit;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}
.home-tips-button-func-link {
    color: darkred;
    border: none;
    padding: 0px 2px 0px 2px;
    background-color: white;
    font-style: italic;
    text-decoration: none;
    cursor: pointer;
}
.home-tips-highlight {
    text-decoration: underline;
}

/*========================================================================================================================*/
/* Music */
/* ===== */

#music-container {
    display: none;
    position: fixed;
    top: 50px; /* menu above */
    left: 0px;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
}

/* view - standard */

/* page */
#music-page {
    display: none;
    position: fixed;
    top: 50px; /* menu above */
    left: 0px;
    bottom: 50px; /* action bar below */
    right: 0px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#music-artwork-container {
    display: none;
    position: fixed;
    /* js dynamically sets the position and size */
    text-align: center;
    background-color: black;
}
#music-artwork-text {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    color: white;
    font-size: 30px;
}
#music-artwork-img {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 100px;
    vertical-align: middle;
    cursor: pointer;
}
#music-jukebox-container {
    display: none;
    position: fixed;
    /* js dynamically sets the position and size */
}
#music-jukebox-audio {
    /* js dynamically sets the position and size */
}
#music-screensaver-container {
    display: none;
    position: fixed;
    /* js dynamically sets the position and size */
    background-color: black;
}
#music-screensaver-video {
    display: none;
    /* js dynamically sets the position and size */
    cursor: pointer;
}
#music-screensaver-titlecontainer {
    display: none;
    position: fixed;
    /* js dynamically sets the position and size  */
    font-size: 16px;
    font-weight: bold;
    font-style: italic;
    margin: 0;
    padding: 0;
    text-align: center;
}
.music-screensaver-title {
    color: black;
}
.music-screensaver-title-highlight {
    color: yellow;
}
#music-picker-container {
    display: none;
    position: fixed;
    /* js dynamically sets the position and size */
    margin: 0;
    padding: 0px 4px 0px 4px;
    background-color: #81e4e4;
    overflow: auto;
}
#music-picker-tracks-container {
    width: 100%;
    font-size: 22px;
    padding: 2px 0px 2px 0px; /* top, right, bottom, left */
}
.music-picker-track {
    position: relative;
    padding: 2px 4px 2px 4px; /* top, right, bottom, left */
    white-space: nowrap;
    cursor: pointer;
}
.music-picker-track-img {
    display: inline-block;
    height: 50px;
    padding: 0px 2px 0px 0px;
    vertical-align: middle;
}
.music-picker-track-text-wrapper {
    display: inline-block;
}
.music-picker-track-text {
}

/*========================================================================================================================*/
/* Movies */
/* ===== */

#movies-container {
    display: none;
    position: fixed;
    top: 50px; /* menu above */
    left: 0px;
    bottom: 0px;
    right: 0px;
    overflow: hidden;
}

/* view - standard */

/* page */
#movies-page {
    display: none;
    position: fixed;
    top: 50px; /* menu above */
    left: 0px;
    bottom: 50px; /* action bar below */
    right: 0px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#movies-poster-container {
    display: none;
    position: fixed;
    top: 50px; /* menu above */
    left: 0px;
    bottom: 50px; /* action bar below */
    right: 0px;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: black;
}
#movies-poster-text {
    position: absolute;
    top: 50px;
    left: 0px;
    right: 0px;
    color: white;
    font-size: 30px;
}
#movies-poster-img {
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 100px;
    vertical-align: middle;
}
#movies-movie-container {
    display: none;
    position: fixed;
    top: 50px; /* menu above */
    left: 0px;
    bottom: 50px; /* action bar below */
    right: 0px;
    margin: 0;
    padding: 0;
    background-color: black;
    overflow: hidden;
}
#movies-movie-video {
}
#movies-artwork-container {
    display: none;
    position: fixed;
    /* js dynamically sets the position and size */
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: black;
    cursor: pointer;
}
#movies-artwork-text {
    position: absolute;
    top: 20px;
    left: 0px;
    right: 0px;
    color: white;
    font-size: 30px;
}
#movies-artwork-img {
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 100px;
    vertical-align: middle;
}
#movies-fanart-container {
    display: none;
    position: fixed;
    /* js dynamically sets the position and size */
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: black;
    cursor: pointer;
}
#movies-fanart-text {
    position: absolute;
    top: 20px;
    left: 0px;
    right: 0px;
    color: white;
    font-size: 30px;
}
#movies-fanart-img {
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 100px;
    vertical-align: middle;
}
#movies-seriestitle-container {
    display: none;
    position: fixed;
    /* js dynamically sets the position and size */
    font-size: 28px;
    margin: 0;
    padding: 2px 4px 0px 4px;
    font-weight: bold;
    white-space: nowrap;
    background-color: #81e4e4;
    overflow: auto;
}
#movies-episode-container {
    display: none;
    position: fixed;
    /* js dynamically sets the position and size */
    font-size: 22px;
    margin: 0;
    padding: 0px 4px 0px 4px;
    background-color: #81e4e4;
    overflow: auto;
}
.movies-episode {
    position: relative;
    padding: 2px 4px 2px 4px;
    white-space: nowrap;
}
.movies-episode-text {
    cursor: pointer;
}
#movies-series-container {
    display: none;
    position: fixed;
    /* js dynamically sets the position and size */
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #81e4e4;
    white-space: nowrap;
    cursor: pointer;
    overflow-x: hidden;
    overflow-y: auto;
}

/*========================================================================================================================*/
/* View classes */
/* ============ */

.view-container {
    display: none;
    position: fixed;
    top: 50px; /* menu height */
    bottom: 50px; /* action bar below */
    left: 0px;
    right: 0px;
    font-size: 0px;
    background-color: black;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* thumbs - width & height are dynamically set in JS according to thumb size */
.view-thumb-small,
.view-thumb-normal,
.view-thumb-large,
.view-thumb-huge {
    display: inline-block;
    position: relative;
    border: none;
    margin: 0px;
    padding: 0px;
    cursor: pointer;
}
/* thumb title (if required) */
.view-thumb-small-txtdiv,
.view-thumb-normal-txtdiv,
.view-thumb-large-txtdiv,
.view-thumb-huge-txtdiv {
    display: none;
    position: absolute;
    left: 0px;
    width: 100%;
    bottom: 0px;
    text-align: center;
    margin: 0;
    background-color: black;
}
.view-thumb-small-txt,
.view-thumb-normal-txt,
.view-thumb-large-txt,
.view-thumb-huge-txt {
/*    color: yellow;*/
    color: yellow;
    font-family: Verdana, Consolas;
    font-style: normal;
    font-weight: normal;
    white-space: pre-wrap;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}
.view-thumb-small-txt {
    font-size: 8px;
}
.view-thumb-normal-txt {
    font-size: 12px;
}
.view-thumb-large-txt {
    font-size: 16px;
}
.view-thumb-huge-txt {
    font-size: 21px;
}

/* all these px values need to be the same (execept where 0) */
.view-container {
    padding: 4px;
}
.view-thumb-small,
.view-thumb-normal,
.view-thumb-large,
.view-thumb-huge {
    margin: 4px;
}
.view-thumb-highlight {
    border-style: solid;
    border-color: yellow;
    border-width: 4px;
    margin: 0px;
}

/* thumb image*/
.view-img {
}
.view-img-overlay-cancelicon-small,
.view-img-overlay-cancelicon-normal,
.view-img-overlay-cancelicon-large,
.view-img-overlay-cancelicon-huge {
    display: none;
    position: absolute;
/*
    top: calc(50% - 20px);
    left: calc(50% - 20px);
*/
    left: 2px;
    bottom: 40%;
    cursor: pointer;
}
.view-img-overlay-cancelicon-small {
    width: 35px;
    height: 35px;
}
.view-img-overlay-cancelicon-normal {
    width: 45px;
    height: 45px;
}
.view-img-overlay-cancelicon-large {
    width:60px;
    height: 60px;
}
.view-img-overlay-cancelicon-huge {
    width: 75px;
    height: 75px;
}

.view-img-overlay-hqicon-small,
.view-img-overlay-hqicon-normal,
.view-img-overlay-hqicon-large,
.view-img-overlay-hqicon-huge {
    display: none;
    position: absolute;
/*
    top: calc(50% - 20px);
    left: calc(50% - 20px);
*/
    top: 2px;
    right: 2px;
}
.view-img-overlay-hqicon-small {
    width: 30px;
    height: 30px;
}
.view-img-overlay-hqicon-normal {
    width: 40px;
    height: 40px;
}
.view-img-overlay-hqicon-large {
    width: 50px;
    height: 50px;
}
.view-img-overlay-hqicon-huge {
    width: 60px;
    height: 60px;
}

/*========================================================================================================================*/
/* Picker classes */
/* ============== */

.picker-container {
    display: none;
    position: fixed;
    top: 50px;
    left: 0px;
    bottom: 50px;
    right: 0px;
    margin: 0;
    padding: 0;
    text-align: center;
    overflow: auto;
}
.picker-text {
    display: none;
    position: absolute;
    top: 100px;
    left: 0px;
    right: 0px;
    color: white;
    font-size: 30px;
}
.picker-thumbs-container {
    font-size: 0px;
    margin: 0;
    padding: 0;
}
.picker-thumb-container {
    display: inline-block;
    position: relative;
}
.picker-thumb-img {
    cursor: pointer;
}

/*========================================================================================================================*/
/* Action classes */
/* ============== */

.action-container {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    margin: 0;
    border: 0;
    padding: 0;
    background: #076cab;
    font-size: 0px; /* get rid of those pesky gaps for inline-block */
    z-index: 5;
}
.action-button {
    display: inline-block;
    position: absolute;
    visibility: visible;
    height: 50px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}
.action-textbox {
    display: table;
    position: absolute;
    visibility: visible;
    height: 50px;
    margin: 0;
    padding: 0;
}
.action-textwrapper {
    display: table-cell;
    font-size: 26px; /* JS may change */
    font-weight: normal;
    font-family: Verdana, Consolas;
    vertical-align: middle;
    color: white;
}
.action-informationbubble-container {
    display: none;
    position: fixed;
    left: 0px;
    bottom: 50px;
    max-height: calc(100% - 100px);
    margin: 0;
    border-radius: 14px;
    padding: 4px 4px 4px 4px;
    text-align: left;
    background-color: #076cab;
    cursor: pointer;
    overflow: auto;
    z-index: 6;
}
.action-informationbubble-text {
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    color: black;
    margin: 0;
    border-radius: 11px;
    padding: 4px;
    white-space: pre-wrap;
    background-color: #81e4e4;
}

/*========================================================================================================================*/
/* Msg classes */
/* =========== */

.msg-container {
    display: inline-block;
    visibility: hidden;
    position: fixed;
    bottom: 14px;
    height: 32px;
    margin: 0px 2px 0px 2px;
    color: #81e4e4;
    font-family: Verdana, Consolas;
    font-size: 18px; /* max - JS may scale down to fit as much as possible */
    font-style: italic;
    font-weight: normal;
    white-space: pre;
    border-width: 1px;
    border-style: solid;
    border-color: white;
    border-radius: 10px;
    background-color: black;
}
.msg-progressbar {
    visibility: hidden;
    height: 34px;
    width: 0px;
    background-color: mediumblue;
}
.msg-bufferedbar {
    visibility: hidden;
    position: absolute;
    bottom: 0px;
    height: 5px;
    width: 0px;
    background-color: gray;
}
.msg-animate {
}
@keyframes msg-kf-1 /* Scroll right to left */
{
      0% { margin-left: 100%; }
    100% { margin-left:   0%; }
}
@keyframes msg-kf-2 /* Scroll right to left, pause when reach left */
{
      0% { margin-left: 100%; }
     90% { margin-left:   0%; }
    100% { margin-left:   0%; }
}
@keyframes msg-kf-3 /* Scroll right to left, dont stop until out of view */
{
      0% { margin-left:  100%; }
    100% { margin-left: -200%; }
}

/*========================================================================================================================*/
/* Progress */
/* ======== */

/* fallback stuff */
progress[value] {
    appearance: none; /* safari */
    border: none; /* firefox */
    color: #e52e71; /* fallback to a solid color */
}

/*========================================================================================================================*/
/* Sections classes */
/* ================ */

.section-title-normal,
.section-title-large,
.section-title-huge {
    font-weight: bold;
    color: black;
    white-space: nowrap;
    margin-top: 20px;
    margin-bottom: 0px;
}
.section-title-normal {
    font-size: 20px;
}
.section-title-large {
    font-size: 25px;
}
.section-title-huge {
    font-size: 30px;
}


/*========================================================================================================================*/
/* Standard table classes */
/* ====================== */

.tr                     { margin: 0; }
.td                     { margin: 0; }
.table                  { border: 2px solid black; border-collapse: collapse; margin: 10px; }
.table-caption          { font-weight: bold; text-align: center; white-space: pre; }
.table-caption-left     { font-weight: bold; text-align: left; white-space: pre; }
.table-caption-right    { font-weight: bold; text-align: right; white-space: pre; }
.table-heading          { font-weight: bold; text-align: center; white-space: pre; color: white; background-color: #2F4F4F; }
.table-head-left        { vertical-align: middle; text-align: left; white-space: pre; }
.table-head-center      { vertical-align: middle; text-align: center; white-space: pre; }
.table-head-right       { vertical-align: middle; text-align: right; white-space: pre; }
.table-head-justify     { vertical-align: middle; text-align: justify; white-space: pre; }
.table-row              { background-color: #00FFFF; }
.table-row-alt          { background-color: beige; }
.table-cell-left        { vertical-align: top; text-align: left; white-space: pre; }
.table-cell-center      { vertical-align: top; text-align: center; white-space: pre; }
.table-cell-right       { vertical-align: top; text-align: right; white-space: pre; }
.table-cell-justify     { vertical-align: top; text-align: justify; white-space: pre; }




/*========================================================================================================================*/
/* Old Stuff */

ul, ol {
    list-style: none;
    margin-top: 4px;
    margin-bottom: 4px;
}

#page,
#pagecenter,
#pagepacked {
    position: absolute;
    top: 50px; /* menu height */
}

#page,
#pagecenter {
    margin: 10px 10px 20px 10px;
}

#pagecenter {
    text-align: center;
}

#pagepacked {
    font-size: 0px;
    width: 100%;
    visibility: hidden;
}

#footer {
    font-size: 0.8em;
    margin-top: 10px;
    font-weight: bold;
    color: green;
    white-space: nowrap;
}

a:link      { text-decoration: none; font-weight: bold; font-style: italic; color: green; }
a:visited   { text-decoration: none; font-weight: bold; font-style: italic; color: green; }
a:active    { text-decoration: none; font-weight: bold; font-style: italic; color: green; }

.external-link:link {
    text-decoration: underline;
    font-weight: normal;
    font-style: normal;
    color: blue;
}
.external-link:visited {
    text-decoration: underline;
    font-weight: normal;
    font-style: normal;
    color: blue;
}
.external-link:active {
    text-decoration: underline;
    font-weight: normal;
    font-style: normal;
    color: blue;
}


.fatal      { font-size: 2.0em; font-weight: bold; margin-top: 10px; margin-bottom: 10px; color: darkred; }
.error      { font-size: 1.5em; font-weight: bold; margin-top: 10px; margin-bottom: 10px; color: red; }
.warning    { font-size: 1.2em; font-weight: bold; margin-top: 10px; margin-bottom: 10px; color: orangered; }
.info       { font-size: 1em;   font-weight: bold; margin-top: 10px; margin-bottom: 10px; color: blue; }

.searchhighlight    { font-size: 1.2em; font-weight: bold; font-style: italic; }

.attention          { font-weight: bold; font-style: italic; color: blue; }

.mybutton {
    color: white;
    background-color: #076cab;
    padding: 8px 8px 8px 8px;
    text-align: center;
    text-decoration: none;
    font: italic bold 18px georgia, comic sans MS, arial, sans-serif;
    text-shadow: 1px 1px 1px rgba(255,255,255, .22);
    border-radius: 5px;
    box-shadow: 2px 2px 2px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
}

#dialog {
    display: none;
    position: fixed;
    top: 100px;
    left: 50px;
    right: 50px;
    margin: 0;
    text-align: center;
    border-style: outset;
    border-color: #ffeb80; /* gold lighter */
    border-width: 4px;
    border-radius: 20px;
    overflow: hidden;
}

#dialogtitle {
    height: 18px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    white-space: nowrap;
    padding: 6px 0px 4px 0px;
    background-color: #2F4F4F;
    overflow: hidden;
}

#dialogmisc {
    height: 16px;
    font-size: 14px;
    color: black;
    white-space: nowrap;
    padding: 4px 0px 2px 0px;
    background-color: #00FFFF;
    overflow: hidden;
}

#dialogdescription {
    font-size: 20px;
    font-weight: bold;
    color: black;
    text-align: justify;
    padding: 10px 10px 10px 10px;
    background-color: white;
    border-top: thin dashed black;
    border-bottom: thin dashed black;
    max-height: 450px;
    overflow: auto;
}

#dialogstats {
    line-height: 20px;
    font-size: 14px;
    color: black;
    white-space: nowrap;
    padding: 4px 0px 2px 0px;
    background-color: beige;
    overflow: hidden;
}


/*========================================================================================================================*/
/* Tips */

/*
video::-webkit-media-controls-start-playback-button {
    display: none;
}
*/

/*
<video>
    video::-webkit-media-controls-panel
    video::-webkit-media-controls-play-button
    video::-webkit-media-controls-volume-slider-container
    video::-webkit-media-controls-volume-slider
    video::-webkit-media-controls-mute-button
    video::-webkit-media-controls-timeline
    video::-webkit-media-controls-current-time-display
    video::-webkit-full-page-media::-webkit-media-controls-panel
    video::-webkit-media-controls-timeline-container
    video::-webkit-media-controls-time-remaining-display
    video::-webkit-media-controls-seek-back-button
    video::-webkit-media-controls-seek-forward-button
    video::-webkit-media-controls-fullscreen-button
    video::-webkit-media-controls-rewind-button
    video::-webkit-media-controls-return-to-realtime-button
    video::-webkit-media-controls-toggle-closed-captions-button
    video::-webkit-media-controls-start-playback-button

<audio>
    audio::-webkit-media-controls-panel
    audio::-webkit-media-controls-mute-button
    audio::-webkit-media-controls-play-button
    audio::-webkit-media-controls-timeline-container
    audio::-webkit-media-controls-current-time-display
    audio::-webkit-media-controls-time-remaining-display
    audio::-webkit-media-controls-timeline
    audio::-webkit-media-controls-volume-slider-container
    audio::-webkit-media-controls-volume-slider
    audio::-webkit-media-controls-seek-back-button
    audio::-webkit-media-controls-seek-forward-button
    audio::-webkit-media-controls-fullscreen-butto
    audio::-webkit-media-controls-rewind-button
    audio::-webkit-media-controls-return-to-realtime-button
    audio::-webkit-media-controls-toggle-closed-captions-button
*/



/* ============================================================================================================================
== BUBBLE WITH A BORDER AND TRIANGLE
** ============================================================================================================================ */

/*
 * E.g. <div class="triangle-border">Bottom triangle with border</div>
 */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  border:5px solid #5a8f00;
  color:#333;
  background:#fff;
  /* css3 */
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

/* Variant : for left positioned triangle
------------------------------------------ */

.triangle-border.left {
  margin-left:30px;
}

/* Variant : for right positioned triangle
------------------------------------------ */

.triangle-border.right {
  margin-right:30px;
}

/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-border:before {
  content:"";
  position:absolute;
  bottom:-20px; /* value = - border-top-width - border-bottom-width */
  left:40px; /* controls horizontal position */
  border-width:20px 20px 0;
  border-style:solid;
  border-color:#5a8f00 transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* creates the smaller  triangle */
.triangle-border:after {
  content:"";
  position:absolute;
  bottom:-13px; /* value = - border-top-width - border-bottom-width */
  left:47px; /* value = (:before left) + (:before border-left) - (:after border-left) */
  border-width:13px 13px 0;
  border-style:solid;
  border-color:#fff transparent;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

/* Variant : top
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.top:before {
  top:-20px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:auto;
  right:40px; /* controls horizontal position */
  border-width:0 20px 20px;
}

/* creates the smaller  triangle */
.triangle-border.top:after {
  top:-13px; /* value = - border-top-width - border-bottom-width */
  bottom:auto;
  left:auto;
  right:47px; /* value = (:before right) + (:before border-right) - (:after border-right) */
  border-width:0 13px 13px;
}

/* Variant : left
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.left:before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:-30px; /* value = - border-left-width - border-right-width */
  border-width:15px 30px 15px 0;
  border-color:transparent #5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.left:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:-21px; /* value = - border-left-width - border-right-width */
  border-width:9px 21px 9px 0;
  border-color:transparent #fff;
}

/* Variant : right
------------------------------------------ */

/* creates the larger triangle */
.triangle-border.right:before {
  top:10px; /* controls vertical position */
  bottom:auto;
  left:auto;
  right:-30px; /* value = - border-left-width - border-right-width */
  border-width:15px 0 15px 30px;
  border-color:transparent #5a8f00;
}

/* creates the smaller  triangle */
.triangle-border.right:after {
  top:16px; /* value = (:before top) + (:before border-top) - (:after border-top) */
  bottom:auto;
  left:auto;
  right:-21px; /* value = - border-left-width - border-right-width */
  border-width:9px 0 9px 21px;
  border-color:transparent #fff;
}