/*
 * XJTAG Help Stylesheet.
 *
 * Mary-Ann Johnson <mary-ann.johnson@xjtag.com>
 * John Hall <john.hall@xjtag.com>
 * Copyright (c) Midas Yellow Ltd. All rights reserved.
 */

#xjhelpcontent {

    /************ General Whitespace and List Styles ************/
    p {
        margin-top: 0pt;
        margin-bottom: 0.8em;
    }
    li p {
        margin-top: 0.6em;
        margin-bottom: 0em;
    }
    ol {
        margin-top: 0.5em;
        margin-bottom: 0em;
    }
    ul {
        margin-top: 0.6em;
        margin-bottom: 0.5em;
    }
    ol ul {
        list-style: disc;
        margin-top: 2em;
    }
    li + li {
        padding-top: 0.7em;
    }
    dl ul {
        margin-top: 1em;
        margin-bottom: 0em;
    }
    dl {
        margin-top: -1em;
    }
    ol dl {
        margin-top: -1.5em;
        margin-left: 0em;
    }
    ol dl dl {
        margin-top: 0em;
        margin-left: 0.2em;
    }
    dd {
        margin-bottom: 0em;
        /*not currently working*/
        margin-left: 1.5em;
    }
    dt {
        padding-top: 1.2em;
        font-weight: bold;
        color: #000;
        margin-left: 1.5em;
    }
    ul + p,
    ol + p {
        margin-top: 1em;
    }
    /* more compact list */
    ul.compactlist {
        padding-bottom: 0.5em;
        margin-top: 0;
        margin-bottom: 0;
    }
    .compactlist li {
        padding: 0em;
    }

    /************ Tables ************/
    table {
        font-size: 100%;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    table.border {
        border-collapse: collapse;
    }
    table.border td {
        border: 1px #cdcdcd solid;
        padding: 3px;
    }
    table.border th {
        border: 1px #cdcdcd solid;
        padding: 3px;
    }
    table.center {
        margin-left: auto;
        margin-right: auto;
    }
    table tbody.pad-vertical tr td {
        padding-bottom: 0.3em;
    }
    th.center {
        text-align: center;
    }
    th {
        text-align: left;
        background: #ffde6b;
        margin: 3pt;
        vertical-align: top;
    }
    tr {
        vertical-align: top;
    }
    td {
        margin: 3pt;
        vertical-align: top;
    }
    table td.image, table th.image {
        padding: 10px;
        text-align: center;
    }
    table.center-contents td, table.center-contents th {
        text-align: center;
        vertical-align: middle;
    }

    acronym {
        border-bottom: dotted #006600;
        border-bottom-width: 1px;
    }

    .big {
        font-weight: bold;
        font-size: 105%;
        color: 000;
    }

    /* Flex box layout */
    .flex-container {
        align-items: center;
        background-color: rgb(255, 255, 255);
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }
    
    .flex-container > div, .flex-container > table {
        background-color: #fff;
        font-size: 105%;
        line-height: 20px;
        margin: 25px;
        text-align: center;
    }

    .flex-container > .tile {
        background: #f3f4f6;
        border-radius: 10px;
        flex-basis: 300px;
        flex-grow: 1;
        font-size: 120%;
        height: 180px;
        margin: auto;
        padding: 10px;
        text-align: center;
    }

    .column-container-keywords {
    column-count: auto;
    column-gap: 20px;
    column-width: 270px;
    }

    /************ Breadcrumbs ************/

    .breadcrumbs {
        padding: 2px 10px;
        background-color: #eee;
        font-size: 90%;
    }

    .breadcrumbs ul {
        list-style: none;
        padding: 0px;
    }

    .breadcrumbs li {
        display: inline;
    }

    .breadcrumbs li+li:before {
        padding: 4px;
        content: "/\00a0";
    }

    .breadcrumbs a {
        text-decoration: none;
        color: #01447e;
        padding-right: 5px;
        padding-left: 5px;
    }
    .breadcrumbs a:first-child {
        padding-left: 0;
    }
    /* Add a color on mouse-over */
    .breadcrumbs a:hover {
        color: #01447e;
        text-decoration: underline;
    }


    /************ Annotations ************/

    div.annotation {
        font-size: 90%;
    }

    annotated_image {
        display: none;
    }

    /************ Specific styles ************/

    svg.shadow {
        -webkit-filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 1));
        filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 1));
    }

    img.inline {
        vertical-align: middle;
    }

    img.header-icon {
        vertical-align: -20%;
        padding-right: 5px;
    }

    /* left indented paragraph */
    .indent {
        margin-left: 1.5em;
    }

    /* see also sections at the bottom of pages */
    div.seealso {
        margin-top: 1.5em;
        margin-bottom: 1em;
    }
    .seealso h2 {
        font-size: 120%;
        font-weight: bold;
        color: 000;
        margin-top: 0.5em;
        padding-top: 0.5em;
        margin-bottom: 0.5em;
        border-top: 1px dashed gray;
    }
    .seealso ul {
        margin-top: 0em;
        margin-bottom: 0em;
    }

    div.figurekey {
        margin-top: 1em;
        margin-left: 5em;
        margin-bottom: 1em;
        font-size: 110%;
    }

    div.appBanner {
        border-radius: 10px;
        height: 54px;
        margin: 20px 0px;
        overflow: hidden;
        position: relative;
        text-align: center;
    }

    div.overlayImage {
        position: relative;
        top: -50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        color: #fff; 
        padding: 0px 20px; 
        text-align: left;
    }

    /* used for more cautionary paragraphs */
    p.cautionary {
        font-style: italic;
        color: maroon;
        border-width: 1px;
        border-style: dashed none dashed none;
        padding-top: 5px;
        padding-bottom: 5px;
        margin: 8px;
    }
    /* used for note paragraphs */
    p.note {
        font-style: italic;
        background-color: #e9e9e9;
        padding: 10px 20px 10px 20px;
        margin-top: 1em;
        margin-bottom: 1em;
        border: 1px;
        border-radius: 6px;
    }
    dd > p.note {
    background-color: #f4f4f4;
    padding: 5px 20px 5px 15px;
    margin-top: 0.5em;
    margin-bottom: 0.2em;
    border-radius: 4px;
    }
    p.caption {
        font-weight: bold;
        padding: 10px 20px 10px 20px;
        margin-top: 1em;
        margin-bottom: 1em;
        border: 1px;
    }

    div.annotation_container {
        margin-top: 2em;
        margin-bottom: 2em;
        margin-left: auto;
        margin-right: auto;
    }
    div.annotation_container + p.caption {
        padding-top: 20px;
        margin-top: -2em;
    }
    p.example::before {
        content: "Example:\00000a";
        font-size: 0.75em;
        font-style: italic;
    }
    p.example {
        white-space: pre !important;
        font-style: normal;
        background-color: #ffde6b;
        padding: 10px 20px 10px 20px;
        margin-top: 1em;
        margin-bottom: 1em;
        border: 1px;
        border-radius: 6px;
    }
    /* Screenshot images */
    img.screenshot {
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-top: 1em;
        padding-bottom: 1em;
    }
    img.screenshot + p.caption {
        padding-top: 20px;
        margin-top: -2em;
    }

    img.ugScreenshot {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-top: 1em;
        margin-bottom: 1em;
        box-shadow: 0px 0px 15px;
    }

    .tutorial_aside {
        background-color: #e9e9e9;
        padding: 10px 20px 10px 20px;
        line-height: 1.3em;
        margin-top: 1em;
        margin-bottom: 1em;
        border: 1px;
        border-radius: 6px;
    }
    .tutorial_aside p:last-child,pre:last-child {
        margin-bottom: 0em;
    }
    .tutorial_todo {
        background-color: #ddecf9;
        padding: 10px 20px 10px 20px;
        line-height: 1.3em;
        margin-top: 1em;
        margin-bottom: 1em;
        border-radius: 6px;
    }

    .aside {
        background-color: #e9e9e9;
        padding: 10px 20px 10px 20px;
        line-height: 1.3em;
        margin-top: 1em;
        margin-bottom: 1em;
        border: 1px;
        border-radius: 6px;
    }

    .search_highlight {
        background-color: #f5ff9e;
    }

    /************ References to specific objects ************/
    .menuitem {
        font-weight: bold;
        color: #000;
    }
    .control {
        font-weight: bold;
        color: #000;
    }
    .button {
        font-weight: bold;
        color: #000;
    }
    /* Spans that document a button with its image and text */
    .buttonref {
        white-space: nowrap;
        font-weight: bold;
        color: #000;
    }
    .buttonref img, .menuitem img {
        vertical-align: -2px;
        margin-left: 0.4ch;
        margin-right: 0.4ch;
        height: 16px;
    }
    .usertext {
        font-weight: bold;
        color: #000;
        font-family: Consolas, monospace;
        font-size: 110%;
    }
    .fieldname {
        font-style: italic;
    }
    .term {
        font-style: italic;
    }
    /* a reference to a pin, device or net */
    .boarditem {
        font-weight: bold;
    }
    .filename {
        font-style: italic;
    }
    .varname {
        font-style: italic;
    }
    .keypress {
        white-space: nowrap;
        font-weight: bold;
        color: #000;
    }
    /* reference to a command line argument */
    .argument {
        font-weight: bold;
        color: #000;
    }

    /* descriptions of deprecated items */
    .deprecated {
        font-weight: bold;
        color: #000;
    }

    /************ Code ************/
    .code {
        font-weight: bold;
        color: #000;
        font-family: Consolas, monospace;
        font-size: 110%;
    }
    code {
        font-weight: bold;
        color: #000;
        font-family: Consolas, monospace;
        font-size: 110%;
    }
    pre {
        color: #000;
        font-family: Consolas, monospace;
        margin-top: 0em;
        font-size: 100%;
        white-space: pre-wrap;
    }

    /********* Equations *********/
    /*   (simple ones, anyway)   */
    .equation {
        text-align: center;
        color: #000;
        font-family: Cambria Math, Helvetica;
        font-size: 120%
    }

    /* text output */
    .output {
        background-color: #ddecf9;
        padding: 10px 20px 10px 20px;
        line-height: 1.3em;
        margin-top: 1em;
        margin-bottom: 1em;
        border-radius: 6px;
    }
    .shell {
        background-color: #e9e9e9;
        padding: 10px 20px 10px 20px;
        line-height: 1.3em;
        margin-top: 1em;
        margin-bottom: 1em;
    }
    /* syntax definitions */
    div.syntax {
        background-color: #ffde6b;
        padding: 10px 20px 10px 20px;
        line-height: 1.3em;
        margin-bottom: 1em;
        border-radius: 6px;
    }
    div.syntax pre {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }
    div.syntax pre+pre {
        margin-top: 1.5em;
    }
    div#syntax h3 {
        font-size: 110%;
    }
    div#syntax p+p {
        margin-bottom: 0em;
    }
    div#syntax #intro {
        margin-bottom: 0.8em;
    }

    .copyable_code {
        position: relative;
    }
    .copyable_code button {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
    }

    /* XJEase code */
    pre.highlighted,
    pre.btbasic {
        background-color: #f7f7ff;
        padding: 10px 20px 10px 20px;
        line-height: 1.3em;
        margin-top: 1em;
        margin-bottom: 1em;
        border: solid 1px #ccc;
        border-radius: 6px;
    }

    /* Syntax highlighting styles including link overrides */
    pre.highlighted .keyword {
        color: blue;
        font-weight: bold;
    }
    pre.highlighted .keyword a {
        color: blue;
        font-weight: bold;
    }
    pre.highlighted .type {
        color: darkblue;
        font-weight: bold;
    }
    pre.highlighted .type a {
        color: darkblue;
        font-weight: bold;
    }
    pre.highlighted .string {
        color: teal;
    }
    pre.highlighted .string a {
        color: teal;
    }
    pre.highlighted .regexp {
        color: orange;
    }
    pre.highlighted .regexp a {
        color: orange;
    }
    pre.highlighted .specialchar {
        color: pink;
    }
    pre.highlighted .specialchar a {
        color: pink;
    }
    pre.highlighted .comment {
        color: darkgreen;
    }
    pre.highlighted .comment a {
        color: darkgreen;
    }
    pre.highlighted .number {
        color: teal;
    }
    pre.highlighted .number a {
        color: teal;
    }
    pre.highlighted .preproc {
        color: darkblue;
        font-weight: bold;
    }
    pre.highlighted .preproc a {
        color: darkblue;
        font-weight: bold;
    }
    pre.highlighted .preamble {
        color: darkblue;
        font-weight: bold;
    }
    pre.highlighted .preamble a {
        color: darkblue;
        font-weight: bold;
    }
    pre.highlighted .symbol {
        color: black;
    }
    pre.highlighted .symbol a {
        color: black;
    }
    pre.highlighted .function {
        color: black;
    }
    pre.highlighted .function a {
        color: black;
    }
    pre.highlighted .cbracket {
        color: red;
    }
    pre.highlighted .cbracket a {
        color: red;
    }
    pre.highlighted .todo {
        font-weight: bold;
        color: 000;
        background-color: cyan;
    }
    pre.highlighted .todo a {
        font-weight: bold;
        color: 000;
        background-color: cyan;
    }

    #xmlapi-attributes table {
        border-spacing: 20px 30px;
        border-collapse: collapse;
    }
    #xmlapi-attributes th {
        border: 1px #cdcdcd solid;
        padding: 15px;
    }
    #xmlapi-attributes td {
        border: 1px #cdcdcd solid;
        padding: 15px;
    }

    span.langword {
        font-weight: bold;
    }
    span.typename {
        font-weight: bold;
    }
    span.paramref {
        font-style: italic;
    }

    /* Variables in syntax definitions. */
    .synvar {
        font-style: italic;
        font-weight: normal;
    }
    .syndef {
        font-weight: bold;
        color: maroon;
    }
    .synterm {
        font-weight: bold;
        color: maroon;
    }

    /************ Directory Structure Lists ************/
    .dir ul {
        margin-top: 0em;
        margin-bottom: 0em;
        padding-bottom: 0em;
        padding-top: 0.2em;
        list-style: square;
        margin-left: 3em;
    }
    .dir li {
        padding-bottom: 0.2em;
    }

    /************ XML API docs ************/

    #inheritance ul {
        padding: 0px;
        margin: 0px 0px 0px 30px;
        list-style: square;
    }
    #inheritance ul li {
        padding: 0px;
        margin: 5px 0px 0px 0px;
    }

    #members table.border {
        border-collapse: collapse;
    }
    #members table.border td {
        border: 1px #ddd solid;
        padding: 6px;
    }
    #members table.border th {
        border: 1px #ddd solid;
        padding: 6px;
    }

    #members tr.inherited {
        white-space: pre-line;
    }

    #members tr.inherited-hidden {
        display: none;
    }

    #members tr.inherited-shown {
        display: table-row;
    }

    /************ Conditional content ************/
    conditional-block {
        display: none;
        margin: 0;
        padding: 0;
        border: 0;
    }
    conditional-span {
        display: none;
        margin: 0;
        padding: 0;
        border: 0;
    }
}