/*--------------------------------------------*/
/*--------------------------------------------*/
/* TEHAMA SPECIFIC FUNCTIONS                  */
/*--------------------------------------------*/
/*--------------------------------------------*/

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for footnotes */

  .tehama-docs-footnote {
      font-size: 12px;
      line-height: 18px;
  }

.tehama-docs-footnote p {
    font-size: 12px;
    line-height: 15px !important;
}

.tehama-docs-footnote > ol {
    font-size: 12px;
    line-height: 15px !important;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for note divs */

/* This is used to style the text boxes (divs) used to display 'notes'.
 */

/* The styling gives these boxes a light grey background and a darker grey border.
 */

.tehama-docs-note-style {
    border:2px solid darkgrey;
    border-radius: 5px;
    padding: 5px;
    font-weight:normal;
    font-size:15px;
    font-style:normal;
    background-color: #E6E9EA;
    margin-bottom:24px;
}

/* The following css-styling prevents empty space at the end of the div. */
.tehama-docs-note-style p:last-child,
.tehama-docs-note-style blockquote:last-child,
.tehama-docs-note-style ul:last-child,
.tehama-docs-note-style ol:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for role-and-org-type divs */

/* This is used to style the text boxes (divs) used to display the role-and-org-types that can access/perform
 * tasks.
 */

/* The styling gives these boxes a light grey background and a blue border and also automatically prepends
 * an info icon on the left side of the box.  The text is also smaller than regular text.
 */

.tehama-docs-role-and-org-type-note-style {
    border-radius: 5px;
    border: 2px solid #4C37BE;
    padding: 0 5px 0 5px; /* top, right, bottom, left */
    margin-top: 0;
    margin-bottom: 24px;
    font-weight:normal;
    font-size: 14px;
    font-style:normal;
    background-color: lightgrey;
    display:  inline-block;
}

.tehama-docs-role-and-org-type-note-style::before {
    content: url(https://s3.amazonaws.com/docsimages.tehama.io/docs/images/tehama-icons/iconfinder_info-alt_383122-free-for-commercial-use.png) ; /* ⓘ */
    position: relative;
    top: 3px;
    float: left;
    display: block;
}

.tehama-docs-role-and-org-type-note-style  p,
.tehama-docs-role-and-org-type-note-style  blockquote,
.tehama-docs-role-and-org-type-note-style  ul,
.tehama-docs-role-and-org-type-note-style  ol {
    left: -13px; /* this is approx the width of the ::before content.  Without this the paragraph wraps too early. */
    padding-left: 23px; /* this is padding of 10px plus the adjustment of 13px for the width of the ::before content. */
    font-size: 14px;
    line-height: 15px;
    margin-bottom: 13px;
    margin-top: 3px;
}

/* The following css-styling prevents empty space at the end of the div. */
.tehama-docs-role-and-org-type-note-style p:last-child,
.tehama-docs-role-and-org-type-note-style blockquote:last-child,
.tehama-docs-role-and-org-type-note-style ul:last-child,
.tehama-docs-role-and-org-type-note-style ol:last-child {
    margin-bottom: 3px;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for nested list hierarchy 1. -> - -> 1. -> A. - specific to one spot in the docs  */

/* This is a hack to override css from mkdocs theme.css that displays nested numbered lists with discs.
 * Also hacking this to make nested numbered lists display with uppercase bold alpha symbols.
 *  1st line:  Make outer numbered list use 1. 2. 3.
 *  2nd line:  Reduce margin at the end of the inner numbered list.
 *  3rd line:  Make inner numbered list use A. B. C. and bold each list item.
 *  4th line:  Make inner numbered list list item contents not bold when wrapped in span.
*/

.tehama-docs-nested-lists-one { }

.tehama-docs-nested-lists-one ol > li > ul > li > ol > li { list-style:decimal !important }
.tehama-docs-nested-lists-one ol > li > ul > li > ol > li > ol { margin-bottom:0 !important; }
.tehama-docs-nested-lists-one ol > li > ul > li > ol > li > ol > li { list-style:upper-alpha !important; font-weight:bold; }
.tehama-docs-nested-lists-one ol > li > ul > li > ol > li > ol > li span { font-weight:normal; }

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS to prevent empty space at the end of an element, like a div, ul or ol */

/* Problem:  When a div or a list (ol, ul) has set the attribute 'markdown=1', it wraps the markdown=style contents in
 *           various html elements, like <p> and <blockquote>.  These elements typically have a default bottom margin
 *           of 24px (approx the height of one line).  This looks silly at the end of a div with a border or at the end
 *           of a list that is embedded in another list.
 *
 *      (aside:  You may be looking at the generated html and wonder where the attribute 'markdown' is.  You can only
 *               see it in the source markdown files.  The reason is that this is a 'special' attribute added by the
 *               'Markdown Extra' extension and once it has been processed it is stripped from the div or list element.)
 *
 */
.tehama-docs-fix-bottom-margin { }
.tehama-docs-fix-bottom-margin p:last-child,
.tehama-docs-fix-bottom-margin blockquote:last-child,
.tehama-docs-fix-bottom-margin ul:last-child,
.tehama-docs-fix-bottom-margin ol:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for a container div */

/* This is used to style the text boxes (divs) used to display the page descriptions under the tabs in the room's
 * user interface documentation.
 */

/* The styling gives these boxes a very light grey background and no border.
 */

.tehama-docs-container {
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
    background: #e6e6e6;
    border-radius:10px;"
}

/* The following css-styling prevents empty space at the end of the div. */
.tehama-docs-container p:last-child,
.tehama-docs-container blockquote:last-child,
.tehama-docs-container ul:last-child,
.tehama-docs-container ol:last-child {
    margin-bottom: 3px;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for floating instructions divs */

/* This is used to style the text boxes (divs) used to display the instructions to access a page in the documentation.
 */

/* The styling gives these boxes a light grey background and a blue border and also automatically prepends a
 * gear-wheel icon on the left side of the box.  The text is also smaller than regular text.  And the entire box
 * is floated to the right of whatever elements come after it (up until a 'clear:both' directive).
 */

/* Notes - expected to be of the format: <p>stuff</p><ol>list-stuff</ol>  with :before content floated left.
 */

.tehama-docs-instructions-float {
    border-radius: 5px;
    border: 2px solid #4C37BE;
    padding: 0 5px 0 5px; /* top, right, bottom, left */
    margin-bottom: 10px;
    margin-left: 5px;
    font-weight:normal;
    font-size: 12px;
    font-style:normal;
    background-color: lightgrey;
    display:  inline-block;
    width: 45%;
    max-width: 45%;
    overflow-y: auto;
    height: 100%;
    float: right;
}

.tehama-docs-instructions-float::before {
    content: url(https://s3.amazonaws.com/docsimages.tehama.io/docs/images/tehama-icons/iconfinder_internt_web_technology-02_274895-free-for-commercial-use.png) ; /* gear-wheel */
    position: relative;
    top: 3px;
    float: left;
    display: block;
}

.tehama-docs-instructions-float  p {
    left: -10px; /* this is approx the width of the ::before content.  Without this the paragraph wraps too early. */
    padding-left: 23px; /* this is padding of 13px plus the adjustment of 10px for the width of the ::before content. */
    font-size: 12px;
    line-height: 18px;
    overflow-y: auto;
}

.tehama-docs-instructions-float  ol {
    left: -10px; /* this is approx the width of the ::before content.  Without this the paragraph wraps too early. */
    padding-left: 20px; /* this is padding of 10px plus the adjustment of 10px for the width of the ::before content. */
    font-size: 12px;
    line-height: 18px;
    overflow-y: auto;
}

.tehama-docs-instructions-float  ol > li {
    line-height: 18px;
}

/* This reduces the space between the "Access the page as follows: ..." text and the following list of instructions. */
.tehama-docs-instructions-float p:first-child {
    padding-left: 10px;
    margin-bottom: 5px;
    margin-top: 0; /* ADDED IN RELEASE-CROCUS */
}

/* This reduces the space ADDED IN RELEASE-CROCUS */
.tehama-docs-instructions-float ul,
.tehama-docs-instructions-float ol {
    margin-bottom: 5px;
    margin-top: 0;
    margin-left: 0;
}

/* The following css-styling prevents empty space at the end of the div. */
.tehama-docs-instructions-float p:last-child,
.tehama-docs-instructions-float blockquote:last-child,
.tehama-docs-instructions-float ul:last-child,
.tehama-docs-instructions-float ol:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for the links to the glossary page */

/* This is used to style the links to definitions in the documentation's glossary page.
 */

/* The styling simply appends a question-mark icon after the link text.
 */

.tehama-docs-glossary-link::after {
    content: url(https://s3.amazonaws.com/docsimages.tehama.io/docs/images/tehama-icons/kisscc0-computer-icons-download-question-mark-primary-gnome-question-5b771ba51ee9d5.1004139215345325171266.svg.png);
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for a container with a single, thin, black border and a white background */

/* This is used to style the blocks of text (in divs) so it is clearer to the user where a topic starts and ends by
 * surrounding them with a border.
 */

/* The styling gives these boxes a very thin black border and a white background (the same as the page's background).
 */

.tehama-docs-single-border {
    background-color: white;
    border: 1px solid #000;
    border-radius: 15px;
    padding: 0 20px 0 20px;
}
/* The following css-styling prevents empty space at the end of the div. */
.tehama-docs-single-border p:last-child,
.tehama-docs-single-border blockquote:last-child,
.tehama-docs-single-border ul:last-child,
.tehama-docs-single-border ol:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for a container with a double border (blue and grey) and a white background */

/* This is used to style multiple blocks of text grouped together (in divs) so it is clearer to the user where a topic
 * starts and ends by surrounding the inner blocks with a thin grey border and drawing a blue line down the left side
 * of the entire group.
 */

/* The styling gives these boxes a very thin grey inner border, a blue outer 'line' (a border with just the left side
 * of it visible) and a white background (the same as the page's background).
 */

.tehama-docs-double-border {
    background-color: white;
    border-left: 2px solid blue;
    padding: 1em 2em 1em 2em;
    position: relative;
    margin: 0 0 0 0;
}
.tehama-docs-double-border:before {
    background: none;
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    pointer-events: none;
    margin-left: 10px;
    border: 2px solid lightgrey;
    border-radius: 15px;
}
/* The following css-styling prevents empty space at the end of the div. */
.tehama-docs-double-border p:last-child,
.tehama-docs-double-border blockquote:last-child,
.tehama-docs-double-border ul:last-child,
.tehama-docs-double-border ol:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for a container with a double border (blue and white) and a white background */

/* This is just like the 'tehama-docs-double-border', except for cases where you do not want one of the text blocks to
 * have a visible inner border.
 */

/* The styling is the same as for 'tehama-docs-double-border' except that the inner border is white, to hide it.
 */

.tehama-docs-double-border-white {
    background-color: white;
    border-left: 2px solid blue;
    padding: 1em 2em 1em 2em;
    position: relative;
    margin: 0 0 0 0;
}
.tehama-docs-double-border-white:before {
    background: none;
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    pointer-events: none;
    margin-left: 10px;
    border: 2px solid white;
    border-radius: 15px;
}
/* The following css-styling prevents empty space at the end of the div. */
.tehama-docs-double-border-white p:last-child,
.tehama-docs-double-border-white blockquote:last-child,
.tehama-docs-double-border-white ul:last-child,
.tehama-docs-double-border-white ol:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for a header that is h2 but wants to display on the page like h3 - also displays title instead of inner-text */

/* This is a hack to display an h3 element in the documentation's sidebar menu.
 *
 * It restyles an 'h2' element to look like an 'h3' element, so you can declare it as an h2 element, which gets picked
 * up by mkdocs and put into the documentation's sidebar menu, but it appears with the styling of an h3 element in the
 * documentation page.
 *
 * Another part of the hack is that it displays the title attribute's contents in the documentation page.  This is
 * because we want to 'fake' an indentation in the sidebar menu, which displays the inner text.
 *
 * For example:
 * ## <span title="What you see on the page" class=tehama-docs-subtopic-h3>&nbsp;&nbsp;&nbsp;&#8226; What you see in the sidebar menu</span>
 *
 * (It is expected that the next release of mkdocs (> 1.0.4) will contain the ability to display multiple levels in the
 * sidebar menu - and then this hack can be dropped.)
 */

.tehama-docs-subtopic-h3 {
    line-height: 25px;
    color: #011627;
    font-size: 0;
    font-weight: 700;
}
.tehama-docs-subtopic-h3:before {
    content: attr(title);
    font-size: 15px;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for button that toggles content open and closed. */

/* This is used to hide content to make a page more readable.  The onclick value is expected to be the
 * tehamaDocsToggleOnclick() function.
 */

/* The styling shows a button with a light-grey background and shadow.  It displays a ring of colour around it when it
 * is hovered over.
 */

.tehama-docs-toggle-button {
    background-color: lightgrey;
    color: #fff;
    border: 1px solid #46b8da;
    font-size: 12px;
    font-weight: 400;
    white-space: nowrap;
    text-align: center;
    line-height: 0.65;
    vertical-align:middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    display: inline-block;
    padding: 6px 12px 8px 12px;
    text-decoration: none;
    box-shadow: 0 1px 2px -1px rgba(255,255,255,0.5) inset, 0 -2px 0 0 rgba(0,0,0,0.1) inset;
    zoom: 1;
    -webkit-user-drag: none;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    transition: all 0.1s linear;
    outline: 0;
}

.tehama-docs-toggle-button:hover {
    color: #fff;
    background-color: lightgrey;
    border-color: #1b6d85;
    text-decoration: none;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for a text-like button that toggles content open and closed. */

/* This is used to hide/show content to make a page more readable.  The onclick value is expected to be the
 * tehamaDocsToggleOnclick() function.
 */

/* The styling shows a button that looks like blue text on a white background.  It displays a ring of colour around it
 * when it is hovered over.
 */

.tehama-docs-toggle-button-learn-more {
    background-color: white;
    color: blue;
    border: 0 solid #46b8da;
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    white-space: nowrap;
    text-align: center;
    margin-bottom: 3px;
    line-height: 1.40;
    vertical-align:middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border-radius: 4px;
    display: inline-block;
    padding: 0 0 0 0;
    text-decoration: none;
    zoom: 1;
    -webkit-user-drag: none;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    transition: all 0.1s linear;
    outline: 0;
}

.tehama-docs-toggle-button-learn-more:hover {
    color: blue;
    background-color: white;
    border-color: #1b6d85;
    text-decoration: none;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS to give an element a tooltip. */

/* This is used to make an element display a tooltip (short explanatory text) when it is hovered over.
 *
 * For example:
 * <div class="tehama-docs-tooltip">
 *   <a class="tehama-docs-glossary-link" href="../glossary/#anchor-multiplegateways">Multi-GWs</a>
 *   <span class="tehama-docs-tooltiptext">Multiple Gateways</span>
 * </div>
 */

/* The styling displays a dotted black line under all tooltip elements.
 */

.tehama-docs-tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tehama-docs-tooltip .tehama-docs-tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tehama-docs-tooltip .tehama-docs-tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tehama-docs-tooltip:hover .tehama-docs-tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for button that toggles content open and closed.  Use this instead of tehama-docs-toggle-button. */

/* This is used to hide content to make a page more readable.  The onclick value is expected to be the
 * tehamaDocsToggleOnclick() function.
 */

/* The styling shows a button with a light-grey background and shadow.  It displays a ring of colour around it when it
 * is in focus and its background colour darkens when it is hovered over.
 */

.tehama-docs-toggle-expand-collapse-button {
    background-color: lightgrey;
    color: #3C2C96;
    border: 1px solid #46b8da;
    border-radius: 4px;
    font-weight: normal;
    white-space: nowrap;
    text-align: center;
    line-height: 0.65;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    padding: 6px 12px 8px 12px;
    zoom: 1;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

.tehama-docs-toggle-expand-collapse-button:hover {
    color: #3C2C96;
    background-color: #A9A9A9D6;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* CSS for a text-like button that toggles content open and closed.  Use this instead of tehama-docs-toggle-button-learn-more. */

/* This is used to hide/show content to make a page more readable.  The onclick value is expected to be the
 * tehamaDocsToggleOnclick() function.
 */

/* The styling shows a button that looks like blue text on a white background with a shadow underneath it (like an
 * underline only fancier).  It displays a bigger shadow around three sides  when it is hovered over and a ring of
 * colour around it when it is in focus.
 */

.tehama-docs-toggle-expand-collapse-text-like-button {
    background-color: white;
    color: blue;
    border: 0 solid #46b8da;
    border-radius: 4px;
    box-shadow: 0 8px 6px -6px #1a69a4;
    font-size: 15px;
    font-weight: normal;
    font-style: italic;
    white-space: nowrap;
    text-align: center;
    margin-bottom: 3px;
    line-height: 1.40;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: inline-block;
    padding: 0 0 0 0;
    zoom: 1;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    transition: all 0.1s linear;
}

.tehama-docs-toggle-expand-collapse-text-like-button:hover {
    color: blue;
    background-color: white;
    box-shadow: 5px 5px 10px #1A69A4;
}

/* ------------------------------------------------------------------------------------------------------------------ */