/******************************************************************************
 * This is the CSS file for support documentation
 ******************************************************************************/

/* vim: ai:ts=4:sw=4:expandtab:nospell:
*/

@media print { /* show URLs of links when printing pages */
    a[href]::after {
        content: " (" attr(href) ") ";
    }
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Usually a good idea! */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Responsive images */
img {
    max-width: 100%;
    height: auto;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/******************************************************************************
 * These declarations keep the footer at the bottom of short pages
 * - thanks to https://css-tricks.com/couple-takes-sticky-footer/
 ******************************************************************************/

body {
    display: flex;
    flex-direction: column;
}
header, article {
    flex: 1 0 auto;
}
footer {
    flex-shrink: 0;
}

footer {
    height: 64px;
    padding-left: 20%;
    margin-top: 5em;
    line-height: 64px; /* this auto-centres text vertically within the div */
    color: #858585;
    background-color: #1E1E1C;
    font-family: "Raleway", sans-serif;
    font-size: 14px;
    font-weight: normal;
}

/******************************************************************************
 * Page header elements
 ******************************************************************************/

/* Hamburger styling */
.menu-toggle {
    display: inline-block;
    padding: 1.5em 15px .75em 15px;
    fill: black;
}

.menu-toggle:hover,
.menu-toggle:focus {
    fill: #06d0d8;
}

/*
 Default styles + Mobile first
 Offscreen menu style
*/
.main-menu {
    position: absolute;
    display: none;
    left: -200px;
    top: 0;
    height: 100%;
    Xoverflow-y: scroll; /* horrid */
    overflow-x: visible;
    transition: left 0.3s ease,
    box-shadow 0.3s ease;
    z-index: 999;
}

.main-menu ul {
    list-style: none;
    margin: 0;
    padding: 2.5em 0 0;
    /* Hide shadow w/ -8px while 'closed' */
    -webkit-box-shadow: -8px 0 8px rgba(0,0,0,.5);
       -moz-box-shadow: -8px 0 8px rgba(0,0,0,.5);
            box-shadow: -8px 0 8px rgba(0,0,0,.5);
    min-height: 100%;
    width: 200px;
    background: #1a1a1a;
}

.main-menu a {
    display: block;
    padding: .75em 15px;
    line-height: 1em;
    text-decoration: none;

    color: #E2F4FB;
    font-family: "Raleway", sans-serif;
    font-size: 12pt;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
}

.main-menu li:first-child a {
    border-top: 1px solid #383838;
}

.main-menu a:hover,
.main-menu a:focus {
    color: #06d0d8;
    fill: #06d0d8;
}

.main-menu .menu-close {
    position: absolute;
    right: 0;
    top: 0;
    fill: #E2F4FB;
}

/*
 On small devices, allow it to toggle...
*/
/*
 :target for non-JavaScript
 [aria-expanded] will be used if/when JavaScript is added to improve interaction, though it's completely optional.
*/
.main-menu:target,
.main-menu[aria-expanded="true"] {
    display: block;
    left: 0;
    outline: none;
    width: 100%;
    -moz-box-shadow: 3px 0 12px rgba(0,0,0,.25);
    -webkit-box-shadow: 3px 0 12px rgba(0,0,0,.25);
    box-shadow: 3px 0 12px rgba(0,0,0,.25);
}

.main-menu:target .menu-close,
.main-menu[aria-expanded="true"] .menu-close {
    z-index: 1001;
}

.main-menu:target ul,
.main-menu[aria-expanded="true"] ul {
    position: relative;
    z-index: 1000;
}

/* 
 We could use `.main-menu:target::after`, but
 it wouldn't be clickable.
*/
.main-menu:target + .backdrop,
.main-menu[aria-expanded="true"] + .backdrop {
    position: absolute;
    display: block;  
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
    background: #000;
    background: rgba(0,0,0,.85);
    cursor: default;
}

@supports (position: fixed) {
    .main-menu,
    .main-menu:target + .backdrop,
    .main-menu[aria-expanded="true"] + .backdrop {
        position: fixed;
    }
}

#class_title {
    width: 60%;
    font-family: "Raleway", sans-serif;
    color: #82BC00;
    font-weight: 800;
    margin: 28px 0 20px 5%;
    padding-bottom: 26px;
    font-size: 10pt;
}

/*
 Larger screen styling
 Horizontal menu
*/
@media (min-width: 768px) {
    .menu-toggle,
        .main-menu .menu-close {
        display: none;
    }

    /* Undo positioning of off-canvas menu */
    .main-menu {
        position: relative;
        left: auto;
        top: auto;
        height: auto;
        display: block;
        width: 100%;
        padding-left: 8vw;
    }

    .main-menu ul {
        display: flex;
        justify-content: space-between;

        /* Undo off-canvas styling */
        padding: 0;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
        height: auto;
        width: auto;
        background: none;
    }

    .main-menu a {
        border: 0 !important; /* Remove borders from off-canvas styling */

        color: #666666;
        font-family: "Raleway", sans-serif;
        font-size: 12pt;
        font-style: normal;
        font-variant: normal;
        font-weight: 400;
    }

    .main-menu a:hover,
    .main-menu a:focus {
        background: none; /* Remove background from off-canvas styling */
        color: #06d0d8;
    }

    #class_title {
        width: 60%;
        font-family: "Raleway", sans-serif;
        color: #82BC00;
        font-weight: 800;
        margin: 28px 0 20px 20%;
        padding-bottom: 26px;
        font-size: 16pt;
    }
}

header {
    padding: 20px 20px 10px 0px;
    border-bottom: 1px solid grey;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 5%;
}

@media (min-width: 768px) {
    header {
        margin: 0 20%;
    }
}


.logo {
    width: 126px;
}

@media (min-width: 768px) {
    .logo {
        width: 165px;
    }
}

/******************************************************************************
 * Article Body text
 ******************************************************************************/

article {
    width: 90%;
    margin-left: 5%;
    font-family: "Roboto Slab", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    color: #666666
}

@media (min-width: 768px) {
    article {
        margin-left: 20%;
        width: 60%;
    }
}

/******************************************************************************
 * Headings
 ******************************************************************************/

h1, h2, h3, h4, h5 {
    font-family: "Raleway", sans-serif;
    color: #006EB7;
    line-height: 120%;
    padding-right: 2em; /* to keep the permalink (plink) hover visible */
}

h1 .tt,
h2 .tt,
h3 .tt,
h4 .tt,
h5 .tt {
    color: #022169; /* GSL dark purple for embedded .tt spans */
}

h1 {
    font-size: 18pt;
    font-weight: 800;

    border-top: 3px solid #82BC00;
    padding-top: 0.6em;
    border-bottom: none;
}

h2 {
    font-size: 16pt;
    font-weight: 700;

    margin-top: 3em;
    padding-top: 10px;
    border-top: 2px solid #82BC00;
}

h3 {
    font-size: 14pt;
    font-weight: 700;
}

h4 {
    font-size: 12pt;
    font-weight: 600;
}

h5 {
    font-size: 12pt;
    font-weight: 400;
}

/* permalinks to headings */
h2:hover > .plink,
h3:hover > .plink,
h4:hover > .plink,
h5:hover > .plink {
    opacity: 1;
}

a.plink {
    opacity: 0;
    padding-left: 8px;
    font-weight: 600;
    transition: opacity 180ms ease-in-out 500ms;
    text-decoration: none;
    color: #82BC00;
}

a.plink:hover::before {
    opacity: 1;
}

a.plink::before {
    content: '  ';
    display: inline-block;
    width: 2em;
    height: 1em;
    background-image: url(/documents/img/sym/plink.svg);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 1.7em;
}

/* for the permalink copy functionality */
div.utility {
    overflow: hidden;
    position: relative;
}

#clipboardTarget {
    position: absolute;
    height: 0;
    width: 0;
}

/* A quick flash to signal the success of a code copy operation */
@keyframes quickFlash {
	0% {	background-color: #82BC00;
			opacity: 1;
	}
	100% {	background-color: inherit;
	}
}

.quickFlash {
	animation-name: quickFlash;
	animation-duration: 900ms;
	animation-iteration-count: 1;
	animation-timing-function: linear;
}

/* and the confirmation message... */
.copyConfirm {
    position: fixed;
    bottom: 0;
    left: 0;
    color: white;
    background-color: #82BC00;
    opacity: 0;
    animation: fade 4s ease-out;
    animation-iteration-count: 1;
    margin: 10px;
    padding: 4px 6px;
    border-radius: 4px;
}


/******************************************************************************
 * Images - inline (buttons), inline (formulæ) left, centre, float-right, float-left
 ******************************************************************************/
img.btn {
    height: 1.2em;
    width: auto;
    vertical-align: baseline;
    position: relative;
    top: 0.2em;
}

img.large_button {
    vertical-align: baseline;
    position: relative;
    top: 0.2em;
}

img.inline {
    width: auto;
    vertical-align: middle;
    Xposition: relative;
    Xtop: 0.2em;
    margin: 2px;
}

img.ss {
    position: relative;
    left: 20px;
    border-image-source: url(/documents/img/screenshot-bg.svg);
    border-image-slice:  20 20 20 20 fill;
    border-image-width:  20px 20px 20px 20px;
    border-image-outset: 20px 20px 20px 20px;
    border-image-repeat: stretch;
    margin: 20px 0;
}

img.l {
    display: block;
    margin-left: 0;
}

img.r {
    display: block;
    position: relative;
    margin-left: auto;
    right: 0;
}

img.c {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.fr {
    clear: left;
    float: right;
    margin: 0 0 10px 10px;
}

img.fl {
    clear: right;
    float: left;
    margin: 0 10px 10px 0;
}

.clearfix::after { 
    content: "."; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both;
}

/* A more modern way of achieving the clearfix effect is */
/* from https://css-tricks.com/snippets/css/clear-fix/ */
.group:after {
  content: "";
  display: table;
  clear: both;
}

/******************************************************************************
 * Tables
 ******************************************************************************/

table {
    margin-left: 2em;
    border-collapse: collapse;
}

th {
    background-color: #CCE2F1;
}

th, td {
    padding: 1px 10px;
    border: 1px solid #E7E4E0;
    font-family: "Roboto Slab", sans-serif;
    font-size: 16px;
    color: #666666
}

/* stripyness */
                        td { background-color: #F2F8E5; }
tr:hover                td { background-color: #E6F1CC; }
tr:nth-child(odd)       td { background-color: #EDF5F5; }
tr:nth-child(odd):hover td { background-color: #DAEBEC; }

/* although */

table.layout,
table.layout th,
table.layout td,
table.layout tr:nth-child(odd):hover td
{
    margin-left: 0;
    padding: 0;
    border: 0;
    background-color: white;
    vertical-align: middle;
}

/* Bit-mapped tables */

table.bitmap {
    width: 90%;
    margin-bottom: 1em;
    overflow: hidden;
}

table.bitmap th,
table.bitmap td {
    border: 1px solid black;
    padding: 0;
    position: relative;
    background-clip: padding-box; /* keeps borders visible */
}

table.b16 td,
table.b16 th {
    width: 6.25%
}

table.b32 td,
table.b32 th {
    width: 3.125%
}

table.bitmap th {
    font-family: "Liberation Mono", "Ubuntu Mono", "Courier New", monospace;
    font-size: 0.7em;
    color: black;
}

table.bitmap td {
    font-family: "Liberation Mono", "Ubuntu Mono", "Courier New", monospace;
    font-size: 0.8em;
    text-align: center;
}

table.bitmap td:nth-child(odd)        { background-color: #F2F8E5; }
table.bitmap td:nth-child(odd):hover  { background-color: #E6F1CC; }
table.bitmap td:nth-child(even)       { background-color: #EDF5F5; }
table.bitmap td:nth-child(even):hover { background-color: #DAEBEC; }

table.bitmap td:hover::after {
    content: "";
    border-image-source: url('/documents/img/sym/red-V-borders.png');
    border-image-slice:  0   1   0   1 fill;
    border-image-width:  0px 1px 0px 1px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch;
    position: absolute;
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
}

/* Scope tables - see howtos/tsip-test.shtml for usage */
table.scope {
    margin-left: 12px;
    border: 0;
}

table.scope ul {
    margin: 8px;
}

table.scope td {
    vertical-align: middle;
}

table.scope td:nth-child(2) {
    text-align: center;
    padding-right: 1em;
    width: 120px;
}


div.testit {
    border-image-source: url('/documents/img/sym/red-V-borders.png');
    border-image-slice:  0   1   0   1 fill;
    border-image-width:  0px 1px 0px 1px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch;
}

/******************************************************************************
 * Colours - foreground and background pairs
 ******************************************************************************/

.rd            { color:            #E2251D !important; } /* Güralp red */
.rd_bg, .bg_rd { background-color: #E2251D !important; }
.gn            { color:            #82BC00 !important; } /* Güralp green */
.gn_bg, .bg_gn { background-color: #82BC00 !important; }
.be            { color:            #006EB7 !important; } /* Güralp blue */
.be_bg, .bg_be { background-color: #006EB7 !important; }
.tl            { color:            #499A9F !important; } /* Güralp teal */
.tl_bg, .bg_tl { background-color: #499A9F !important; }
.yw            { color:            yellow  !important; } /* yellow (non-GSL-standard) */
.yw_bg, .bg_yw { background-color: yellow  !important; }
.cn            { color:            #E7F8F9 !important; }
.cn_bg, .bg_cn { background-color: #E7F8F9 !important; } /* cyan */


/******************************************************************************
 * Fixes
 ******************************************************************************/

sup, sub {
    line-height: 0;
}

/******************************************************************************
 * Specials
 ******************************************************************************/

.draft {
    background-image: url('/documents/img/sym/draft.png');
}

img.keycap {
    height: 1.8em;
    position: relative;
    vertical-align: middle;
    bottom: 1px;
    margin: 0px 1px;
}

.formula,
.math {
    font-family: "Liberation Serif", "Times New Roman", serif;
    font-style: italic;
    font-size: 1.2em;
    color: black;
    white-space: nowrap;
}

div.formula,
div.math {
    margin-left: 2em;
}

/* and, so that they are legible inside definitions, */
span.defn .formula,
span.defn .math {
    color: white;
}

.menu,
.webnav,
.sys,
.radio,
.checkbox {
    font-family: "Segoe UI", "Ubuntu", "Consolas", sans-serif;
    color: black;
}

.radio,
.checkbox {
    padding-left: 20px; /* to leave space for icon */
    background-repeat: no-repeat;
    background-position: left 50%;
    background-size: 18px;
}

.radio, /* default is selected - override with .clear or .cleared */
.radio.selected,
.radio.checked,
.radio.ticked {
    background-image: url("/documents/img/sym/radio-selected.svg");
}

.radio.clear,
.radio.cleared {
    background-image: url("/documents/img/sym/radio-clear.svg");
}

.checkbox, /* default is selected - override with .clear or .cleared */
.checkbox.ticked,
.checkbox.checked,
.checkbox.selected {
    background-image: url("/documents/img/sym/checkbox-ticked.svg");
}

.checkbox.clear,
.checkbox.cleared {
    background-image: url("/documents/img/sym/checkbox-clear.svg");
}

.noun {
    color: black;
}

span.sys,
td.sys {
    white-space: nowrap;
}

div.sys { /* Use div.sys for multi-line responses */
    white-space: pre;
}

.u {
    text-decoration: underline;
}

.i {
    font-style: italic;
}

.b {
    font-weight: bold;
}

.strikethrough {
    text-decoration: line-through;
    color: #660066;
}

.tt {
    font-family: "Liberation Mono", "Ubuntu Mono", "Courier New", monospace;
    color: black;
    white-space: nowrap;
}

.nowrap, .nobr {
    white-space: nowrap;
}
a.longlink {
    white-space: normal;
}

code,
.code {
    white-space: pre;
    font-family: "Liberation Mono", "Ubuntu Mono", "Courier New", monospace;
    color: black;

    width: max-content;
    padding: 2px;
    margin-left: 3em;
    border-image-source: url(/documents/img/code-bg.svg);
    border-image-slice:  2%   97%   97%   2% fill;
    border-image-width:  2px 97px 97px 2px;
    border-image-outset: 0px 20px 10px 0px;
    border-image-repeat: stretch;
}

span.code {
    margin-left: 0;
    border-image-outset: 0px 12px 0px 0px;
    padding: 0 12px 0 0;
}

.code:not(.nocopy):not(.i),
.code.nocopy .b {
	cursor: url("/documents/img/sym/to-clip.png"), copy;
}

/* for copy confirmations */
@keyframes fade {
	0%,90%,100% { opacity: 0 }
	20% { opacity: 1 }
}

/* Do we really still need this? */
.blue {
    color: blue;
}

/******************************************************************************
 * Boxes
 ******************************************************************************/

.warning, .caution, .note, .ESD, .superseded {
    width: 95%;
    min-height: 3em;
    height: auto !important;
    border-style: solid;
    border-width: 2px;
    border-radius: 0.3em;
    padding: 3px 1em 0.3em 4em;
    margin-bottom: 1.5em;
    margin-top: 0.6em;
    background-repeat: no-repeat;
    background-position: top 0.1em left 0.2em;
    box-shadow: 5px 5px 5px rgba( 128, 128, 128, 0.4 );
}

/* adjacent sibling selectors allow us to move the box down a little if preceded
by a code div. */
div.code + .warning,
div.code + .caution,
div.code + .note,
div.code + .ESD,
div.code + .superseded {
    margin-top: 1.5em;
}

.warning {
    border-color: red;
    background-image: url('/documents/img/sym/warning.svg');
    background-color: #FFCCCC;
    background-size: 2.5em;
}

.warning::before {
    content: 'Warning: ';
    font-weight: bold;
}

.caution {
    border-color: yellow;
    background-image: url('/documents/img/sym/caution.svg');
    background-color: #FFFFCC;
    background-size: 2.5em;
}

.caution::before {
    content: 'Caution: ';
    font-weight: bold;
}

.ESD {
    border-color: yellow;
    background-image: url('/documents/img/sym/esd.svg');
    background-color: #FFFFCC;
    background-size: 2.5em;
}

.ESD::before {
    content: 'Caution - ESD: ';
    font-weight: bold;
}

.note {
    border-color: blue;
    background-image: url('/documents/img/sym/note.svg');
    background-color: #CCCCFF;
    background-size: 2.5em;
}

.note::before {
    content: 'Note: ';
    font-weight: bold;
}

.superseded {
    border-color: green;
    background-image: url('/documents/img/sym/superseded.svg');
    background-color: #CCFFCC;
    background-size: 3.5em;
}

.superseded::before {
    content: 'Superseded: ';
    font-weight: bold;
}

/* first paragraph in any box should follow the headline word on the same line */
/* (We'll do the same for procedural list items while we're at it.) */
ol.procedure li >p:first-of-type,
div.warning     >p:first-of-type,
div.caution     >p:first-of-type,
div.note        >p:first-of-type,
div.ESD         >p:first-of-type,
div.superseded  >p:first-of-type {
    display: inline;
}

/* we need some appropriate space afterwards in this case */
ol.procedure li >p:first-of-type::after,
div.warning     >p:first-of-type::after,
div.caution     >p:first-of-type::after,
div.note        >p:first-of-type::after,
div.ESD         >p:first-of-type::after,
div.superseded  >p:first-of-type::after {
    content: "invisible place-holder";
    display: block;
    visibility: hidden;
    Xheight: 0;
}

/* but that doesn't work with <div class="note"><p>...</p><img ...>, so */
ol.procedure li >p:first-of-type + img,
div.warning     >p:first-of-type + img,
div.caution     >p:first-of-type + img,
div.note        >p:first-of-type + img,
div.ESD         >p:first-of-type + img,
div.superseded  >p:first-of-type + img {
    margin-top: 1em;
}

/* likewise ... */
ol.procedure li >p:first-of-type + table,
div.warning     >p:first-of-type + table,
div.caution     >p:first-of-type + table,
div.note        >p:first-of-type + table,
div.ESD         >p:first-of-type + table,
div.superseded  >p:first-of-type + table {
    margin-top: 1em;
}

/* also ... */
ol.procedure li >p:first-of-type + ul,
div.warning     >p:first-of-type + ul,
div.caution     >p:first-of-type + ul,
div.note        >p:first-of-type + ul,
div.ESD         >p:first-of-type + ul,
div.superseded  >p:first-of-type + ul,
div.warning     >p:first-of-type + ol,
div.caution     >p:first-of-type + ol,
div.note        >p:first-of-type + ol,
div.ESD         >p:first-of-type + ol,
div.superseded  >p:first-of-type + ol {
    margin-top: 0;
}


/******************************************************************************
 * Links (other than permalinks (plink) and software downloads - see below)
 ******************************************************************************/

article a {
    color: #22b8f0;
    text-decoration: none;
    position: relative;
    transition: color .5s; /* mouse out timing */
    white-space: nowrap;
}

article a .tt { /* the black text of included <tt>s becomes GSL dark blue */
    color: #006EB7;
}

/* external web and email links */
article a[href^=http]:not(.plink),
article a[href^=mailto] {
    padding-right: 1.2em;  /* space for icon */
}

article a:hover {
    color: #009b89;
    transition: color .4s ease-in-out; /* mouse over timing */
}

article a:not(.plink)::before, article a:not(.plink)::after {
    content: "";
    position: absolute;
    top: 0.1em;
    right: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: right;
    background-size: 1em;
    transition: opacity .5s ease-in-out; /* mouse out timing */
}

article a[href^=http]:not(.plink)::before {
    background-image: url("/documents/img/sym/web-link.svg");
    opacity: 1;
}

article a[href^=mailto]::before {
    background-image: url("/documents/img/sym/mail-link.svg");
    opacity: 1;
}

/* internal up- and down-links: style each link or their container */
article a.link_down,
article a.link_up,
article .link_down a,
article .link_up a {
    padding-right: 0.9em;  /* space for icon */
}

article a.link_down::after,
article a.link_up::after,
article .link_down a::after,
article .link_up a::after {
    opacity: 1;
    background-size: 0.6em;
}

article a.link_down::after,
article .link_down a::after {
    background-image: url("/documents/img/sym/link-down.svg");
}

article a.link_up::after,
article .link_up a::after {
    background-image: url("/documents/img/sym/link-up.svg");
}

article a:hover::before {
    opacity: 0;
    transition: opacity .4s ease-in-out; /* mouse over timing */
}

article a[href^=http]::after {
    background-image: url("/documents/img/sym/web-link-hi.svg");
    opacity: 0;
}

article a[href^=mailto]::after {
    background-image: url("/documents/img/sym/mail-link-hi.svg");
    opacity: 0;
}

article a:hover::after {
    opacity: 1;
    transition: opacity .5s ease-in-out; /* mouse over timing */
}

/******************************************************************************
 * Software download links
 ******************************************************************************/

article a.download::before {
    content: url("/documents/img/sym/dl-hi2.png");
    position: relative;
    top: 14px;
    opacity: 0;
    z-index: 999;
    transition: opacity .5s ease-in-out; /* mouse out */
}

article a.download:hover::before {
    opacity: 1;
    transition: opacity .5s ease-in-out; /* mouse over */
}

article a.download {
    display: inline-block;
    line-height: 68px;
    vertical-align: center; /* should be center????? */
    background-image: url("/documents/img/sym/dl2.png");
    background-repeat: no-repeat;
    background-position: left;
    background-size: 60px;
    z-index: 1;
    transition: color .5s; /* mouse out */
}

article a.download:hover {
    color: #06d0d8;
    transition: color .5s; /* mouse over */
}

article a.download::after {
    background-image: none;
}

/******************************************************************************
 * Numbered procedural steps
 ******************************************************************************/

ol.procedure {
    counter-reset: li; /* Initiate a counter */
    margin-left: 4em; /* Remove the default left margin */
    padding-left: 0; /* Remove the default left padding */
    width: 85%;
}

ol.procedure > li {
    position: relative; /* Create a positioning context */
    margin: 3em 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding: 4px 8px; /* Add some spacing around the content */
    list-style: none; /* Disable the normal item numbering */
    border-top: 2px solid #009BA9;
    background: #f6f6f6;
}

ol.procedure > li::before {
    content: counter(li); /* Use the counter as content */
    counter-increment: li; /* Increment the counter by 1 */

    /* Position and style the number */
    position: absolute;
    top: -2px;
    left: -3em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 3em;
    border-radius: 1.5em;

    /* Some space between the number and the content in browsers that support
    generated content but not positioning it (Camino 2 is one example) */
    margin-right: 8px;
    padding: 4px;
    border-top: 2px solid #009BA9;
    color: #fff;
    background: #009BA9;
    font-weight: bold;
    font-family: "Helvetica Neue", Arial, sans-serif;
    text-align: center;
}

li ol,
li ul {
    margin: 4px 0 8px 0;
}

ol ol li:last-child {margin-bottom:0;}


/******************************************************************************
 * Definition Lists and Definitions with fly-out explanations
 ******************************************************************************/

dl { /* Container for description lists */
    margin-left: 2em;
}

dt { /* Term in a description list */
    font-family: "Raleway", sans-serif;
    color: #006EB7;
    font-size: 13pt;
    font-weight: 400;
    margin: 1em 0 0.3em 0;
    padding-right: 2em; /* to keep the plink hover visible - come back to this! */
}

/* permalink to each dt */
dt:hover > .plink {
    opacity: 1;
}

dd { /* Item description in a description list */
}

dd li {
    margin-top: 0.1em;
}

.term {
    display: inline-block;
    position: relative;
    border-bottom: 2px dotted #82BC00;
    text-align: left;
    font-family: "Roboto Slab", sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
}

/* hard to see against some coloured backgrounds, so */
.warning .term,
.note .term,
.superseded .term {
    border-color: #293C00;
}

.term .flyout {
    min-width: 200px;
    top: 50%;
    right: 100%;
    margin-right: 20px;
    transform: translate(0, -50%);
    padding: 10px 20px;
    color: #A8DCF1;
    background-color: #444444;
    font-weight: normal;
    font-size: 16px;
    border-radius: 8px;
    position: absolute;
    z-index: 99999999;
    box-sizing: border-box;
    border: 1px solid #82BC00;
    box-shadow: 0 1px 8px #022169;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.8s;
}

.term strong,
.flyout strong {
    /* color: #82BC00; */
    color: white;
}

.term:hover {
    color: #82BC00;
}

.term:hover .flyout {
    visibility: visible;
    opacity: 1;
}

/* an area to keep the flyout active while the user moves the mouse into the flyout */
.term:hover::after {
    content: '';
    padding: 80px 20px 80px 80px;
    position: absolute;
    top: -60px;
    left: -22px;
}



.term .flyout h3 {
    color: #82BC00;
}

.term .flyout i {
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -12px;
    width: 12px;
    height: 24px;
    overflow: hidden;
}

.term .flyout i::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    left: 0;
    top: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
    background-color: #444444;
    border: 1px solid #00FF00;
    box-shadow: 0 1px 8px #006600;
}

.term .flyout .defn .tt,
.term .flyout .defn .sys,
.term .flyout .defn .menu,
.term .flyout .defn .webnav {
    color: white;
}
/******************************************************************************
 * Zoomable pictures using modal pages
 ******************************************************************************/

 /* Style the Image Used to Trigger the Modal */
.zoomable {
    cursor: url(/documents/style/zoom-in.png) 7 7, pointer;
    transition: 0.3s;
}

.zoomable:hover {opacity: 0.7;}

/* once zoomed: background */
.zoomed {
    display: none;                      /* Hidden by default */
    position: fixed;                    /* Stay in place */
    z-index: 1;                         /* Sit on top */
    padding-top: 100px;                 /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;                     /* Enable scroll if needed */
    background-color: rgb(0,0,0);       /* Fallback color */
    background-color: rgba(0,0,0,0.9);  /* Black w/ opacity */
}

/* once zoomed: the image */
.zoomedContent {
    margin: auto;
    display: block;
    height: inherit !important;
    object-fit: contain;
    vertical-align: middle;
    max-width: 100%;
    max-height: 80%;
}

/* Caption for zoomed image (from image text) - same width as the image */
.zoomedCaption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add "zoom-in" animation */
.zoomedContent, .zoomedCaption {
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
}

/* The Close Button */
.unZoom {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.unZoom:hover,
.unZoom:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .zoomedContent {
        width: 100%;
    }
} 

/******************************************************************************
 * Emulator emulators
 ******************************************************************************/

div.PuTTY, div.GnomeTerm, div.ScreamTerm {
    font-family: "Courier New", "Courier", "Lucida Console", Monospace;
    line-height: 1.1;
    min-width: 630px;
    white-space: pre;
    position: relative;
    margin-left: 40px;
    height: auto;
    width: auto;
    display: inline-block;
    transition: color 1s;
}

div.GnomeTerm:hover .b, div.ScreamTerm:hover .b {
    transition: color 1s;
    color: #022169;
    animation: glow 1s ease-in-out infinite alternate;
}

div.PuTTY:hover .typed,
div.PuTTY:hover .b {
    transition: color 1s;
    color: #87DADF;
    animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #E6E500, 0 0 40px #E6E500;
    }
    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #FEFE4D, 0 0 40px #FEFE4D, 0 0 50px #FEFE4D;
    }
}

ul.EmulatorTxt>li {
    margin-left: -15px;
}

div.PuTTY {
    color: white;
    min-height: 186px;
    border-image-slice:  79   145   50   453 fill;
    border-image-width:  79px 145px 50px 453px;
    border-image-outset:  0px   0px  0px   0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(/documents/img/emu/PuTTYWindow.png);
    padding: 72px 45px 50px 25px;
    left: -25px;
}

ul.EmulatorTxt>li.PuTTY {
    list-style-image: url(/documents/img/emu/PuTTYIcon.png);
}

div.GnomeTerm {
    color: black;
    min-height: 200px;
    border-image-slice: 75   60   60   250 fill;
    border-image-width: 75px 60px 60px 250px;
    border-image-outset: 0px  0px  0px   0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(/documents/img/emu/GnomeTermWindow.png);
    padding: 72px 60px 60px 50px;
    left: -50px;
}

ul.EmulatorTxt>li.GnomeTerm {
    list-style-image: url(/documents/img/emu/GnomeTermIcon.png);
}

.GnomeTerm.Minicom115::after {
    content: "CTRL-A Z for help | 115200 8N1 | NOR | Minicom 2.7.1 | VT102 | Offline | ttyUSB0";
    color: white;
    background-color: black;
    display: block;
}

.GnomeTerm.Minicom384::after {
    content: "CTRL-A Z for help | 38400  8N1 | NOR | Minicom 2.7.1 | VT102 | Offline | ttyUSB0";
    color: white;
    background-color: black;
    display: block;
}

div.ScreamTermCom,
div.ScreamTermNet,
div.ScreamTerm {
    color: black;
    min-height: 200px;
    border-image-slice: 103   141   42   433 fill;
    border-image-width: 103px 141px 42px 433px;
    border-image-outset: 0px  0px  0px   0px;
    border-image-repeat: stretch repeat;
    border-image-source: url(/documents/img/emu/ScreamTermWindow.png);
    padding: 72px 55px 26px 25px;
    left: -25px;
}
div.ScreamTermCom {
    border-image-source: url(/documents/img/emu/ScreamTermWindowCom.png);
}
div.ScreamTermNet {
    border-image-source: url(/documents/img/emu/ScreamTermWindowNet.png);
}

ul.EmulatorTxt>li.ScreamTerm {
    list-style-image: url(/documents/img/emu/ScreamTermIcon.png);
}

span.reverse {
    color: white;
    background-color: black;
} /* but */
div.PuTTY span.reverse {
    color: black;
    background-color: white;
}

span.typed {
    color: yellow;
}

div.GnomeTerm.cursor::after,
div.GnomeTerm>.cursor::after,
div.PuTTY.cursor::after,
div.PuTTY>.cursor::after,
div.ScreamTerm.cursor::after,
div.ScreamTerm>.cursor::after {
    content: ' ';
    font-weight: 900;
    animation-duration: 700ms;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

div.GnomeTerm.cursor::after,
div.GnomeTerm>.cursor::after {
    animation-name: Gnome_blink;
} 
div.PuTTY.cursor::after,
div.PuTTY>.cursor::after {
    animation-name: PuTTY_blink;
}
div.ScreamTerm.cursor::after,
div.ScreamTerm>.cursor::after {
    animation-name: Scream_blink;
}

@keyframes PuTTY_blink {
    from { background-color: lawngreen; }
    40% {  background-color: lawngreen; }
    50% {  background-color: black; }
    to {   background-color: black; }
}

@keyframes Gnome_blink {
    from { background-color: black; }
    40% {  background-color: black; }
    50% {  background-color: white; }
    to {   background-color: white; }
}

@keyframes Scream_blink {
    from { border-left: 2px solid white; }
    40% {  border-left: 2px solid white; }
    50% {  border-left: 2px solid black; }
    to {   border-left: 2px solid black; }
}

/******************************************************************************
 * Over-rides for legibility on small screens
 ******************************************************************************/

@media only screen and (max-width: 600px) {
  body {
    Xbackground-color: lightblue;
  }
}