/* Derived from the mozilla.org css */
/* which was written by dave shea, http://www.mezzoblue.com/ */
/* Modified L. David Baron. */
/* Modified and simplified for use by JMRI by John Plocher. */
/* Updated for responsiveness/accessibility and colors JMRI 2020 Egbert Broerse */


/* JMRI website Base Styles
 * maintained by John Plocher and Egbert Broerse 2021
 * (Original Mozilla classes are defined in the Markup Guide
 *   http://fantasai.inkedblade.net/mozilla/web/guide/markup)
 * and W3CSS https://www.w3schools.com/w3css/default.asp
 */

/* TOC:
    Random HTML Styles
    General Structure
    Navigation
    Comments and Other Asides
    Emphasis
    Computers - General
    Code
    Examples and Figures
    Q and A (FAQ)
    Tables
    Meta
    Animation via css
*/

/* Style Colors css vars */
    :root {
        --primary-color1: #554FA0; /* Purple */
        --primary-color2: #FFD700; /* Orange */
        --primary-color3: #778899; /* LightSlateGray */
        --hover-color: #C0C0C0; /* LightGray */
        --background-color1: #B695C0; /* LightPurple */
        --background-color2: #F5F5DC; /* Sand Beige */
    }

/* Random HTML Styles */

	body {
        margin: 0;
        font-family: PT Sans, Lucida Sans Unicode, Tahoma, sans-serif;
    }

	form {
		margin: 0;
		display: inline;
	}
	.bar-1 {
	    padding: 0px 16px;
	    float: left;
	    width: auto;
	    border: none;
	    display: block;
	    outline: 0;
	}
	.button, span.button {
		color: White;
		background-color: inherit;
		border: none;
		cursor: pointer;
		overflow: hidden;
		padding: 8px 16px;
		vertical-align: middle;
		text-decoration: none;
		text-align: center;
		white-space: nowrap
	}
	strong.button { /*in line "button" used in NetBeans an LocoIO help pages*/
    	color: Black;
		background-color: White;
        border: Black;
        overflow: hidden;
        padding: 2px;
        vertical-align: middle;
        text-align: center;
    }
	.button:hover {
        background-color: #C0C0C0; /*var(--hover-color);*/
        color: #778899; /*var(--primary-color3); LightSlateGray */
        position: relative;
        display: inline-block;
        cursor: pointer
    }
	.block-show { /* unhide objects */
	    display: block!important;
	}
	.block {
	    display: block;
	    width: 100%;
	}
	.card-1 {
		display: block;
		background-color: #778899; /*var(--primary-color3); LightSlateGray */
		color: White;
    	width: 95%;
	    box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)
	}
    .card-1:hover {
        color: Black;
    }
    .inline {
      display: inline-block;
    }
    dt {
        font-weight: bold;
    }

/* General Structure */
    * {
      box-sizing: border-box;
    }

	.subtitle {
		font-style: italic;
	}

	p {
		text-indent: 0;
	}
	div.para {
		margin: 1em 0;
	}
	div.para > * {
		margin-top: 0.2em;
		margin-bottom: 0.2em;
	}

	div.section {
		display: block;
		padding-left: 3%;
	}

	div.section > h2,
	div.section > h3,
	div.section > h4,
	div.section > h5,
	div.section > h6 {
		margin-left: -1.0%;
	}

	blockquote address:before {
		content: "\2015";
	}

    .video-container {
        position: relative;
        overflow: hidden;
        width: 100%;
        padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    }
    .responsive-iframe {
        position: absolute; /* to fit in video-container div */
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }
/* flex: blocks that try to fit on a row, or wrap. Collapse to full width on smaller screens */
    .flex-container {
        display: flex;
        flex-wrap: wrap;
    }
    .flex-item-30 {
        padding: 1px;
        flex: 30%;
    }
    .flex-item-50 {
        padding: 1px;
        flex: 50%;
    }
    .flex-item-70 {
        padding: 1px;
        flex: 70%;
    }
    /* Responsive layout - makes a one column-layout instead of a two-column layout */
    @media (max-width: 800px) {
        .flex-item-30, .flex-item-50, .flex-item-70 {
            flex: 100%;
        }
    }

/* group several items in a div, responsive, replaces table */
    .row::after {
        content: "";
        clear: both;
        display: table;
    }

/* Navigation */
	.ex-ref {
		font-style: italic;
	}

	dl.toc dt {
		margin-top: 0.5em;
		font-size: 90%;
	}
	dl.toc p {
		margin: 0;
		font-size: 80%;
		text-indent: 1em;
	}
	dl.toc p:first-child {
		text-indent: 0;
	}
	dl.toc > dd {
		margin-left: 1em;
	}

	ol.toc ol {
		list-style-type: circle;
	}
	ol.toc > li > ol {
		font-size: 80%;
	}

	ul.snav {/* section navigation or short navigation, whichever you prefer */
		margin: 0.7em 10%;
		padding: .2em;
		text-align: center;
	}
	ul.snav li {
		list-style-type: none;
	}
	ul.snav > li {
		display: inline;
	}
	ul.snav > li:before {
		content: " | ";
	}
	ul.snav > li:first-child:before {
		content: "";
	}

	a.cont {
		display: block;
		margin-right: 0;
		text-align: right;
		border: thin solid #FFD700; /* --primary-color2 - Orange */
	}

/* Comments and other Asides */

	/* AsciiDoctor styles */
	.admonitionblock > table {
		border-collapse: separate;
		border: 0;
		background: none;
		width: 100%;
	}
	.admonitionblock > table td.content {
		padding-left: 1.125em;
		padding-right: 1.25em;
		border-left: 1px solid #dddddf;
		color: rgba(0,0,0,.6)
	}
	.admonitionblock.note :before {
		content: ""; /* nothing */
	}

	.note {
		font-style: italic;
	}
	.note:before {
		content: "Note: ";
	}

	.remark {
		font-size: smaller;
	}
	.remark:before {
		content: "[";
	}
	.remark:after {
		content: "]";
	}

/* Emphasis */

	/* em, strong */

	strong.stronger {
		font-style: italic;
		font-weight: bold;
	}

	strong.very-strong {
		font-weight: bold;
		text-transform: uppercase;
	}

	*.important,
	div.important,
	p.important {
		margin: 1em;
		padding: 0.1em;
		border: solid #FFD700; /* --primary-color2 - Orange */
	}

    p.noted,
    div.noted {
		margin: 1em;
		padding: 0.1em;
		border: 2px solid #778899; /* --primary-color3: LightSlateGray */
	}

	span.important,
	em.important,
	strong.important {
		font-size: large;
	}

    .xlarge {
        font-size:24px;
    }

/* small [Since JMRI 1.2.3] sticker to mark introductory version number in Release Notes */
	span.since {
		color: Black;
		font-weight: normal;
		float: right;
		background: #FFD700; /* --primary-color2 - Orange */
	    background-size: 100% 100%;
	    border-radius: 4px;
	    margin: 2px 2px 2px 2px;
	    padding: .2em .3em;
	}
	.since a:link {
        color: Black;
        font-weight: normal;
	}
	.since a:visited {
        color: Black;
        font-weight: normal;
	}
	.since a:link:hover, :visited:hover {
        color: White;
        font-weight: normal;
	}

	span.donate {
		background: #FFD700; /* --primary-color2 - Orange */
		border-radius: 10px;
		font-weight: normal;
		padding: 2px 5px 2px 5px;
		box-shadow: 0 2px 5px 0 rgba(0,0,0,0.3),0 2px 10px 0 rgba(0,0,0,0.3);
	}
    .donate a:visited {
        font-weight: normal;
    }

/* Computers - General */

	span.application {
		font-style: italic;
	}

	kbd.command,
	span.command {
		font-family: monospace;
		white-space: pre;
	}

	tt.filename,
	span.filename {
		font-style: italic;
		white-space: nowrap;
	}

	tt.productnumber,
	span.productnumber {
		font-size: 90%;
		font-family: monospace;
	}

    span.textbutton {
        display: inline-block;
        border: 1px solid black;
        border-radius: 4px;
        padding: 0 10px;
    }

/* Code */

	code {
		font-family: monospace;
		white-space: nowrap;
		background-color: #F5F5DC; /*var(--background-color2);*/ /* Sand Beige */
		color: #554FA0; /*var(--primary-color1);*/
	}

	code.block {
		display: block;
		overflow-x: scroll;
		padding: .2em;
		white-space: pre;
	}

	pre.incorrect-code { color: red; }

	pre.code,
	pre.incorrect-code {
		overflow: auto;
		margin: 1em .5em;
		padding: .2em;
		border: solid 1px;
	}

	pre.code .remark,
	pre.incorrect-code .remark  {
		font-size: 1em;
		font-style: italic;
	}

	/* turn off content generation */
	pre.code .remark:before,
	pre.incorrect-code .remark:before,
	pre.code .remark:after,
	pre.incorrect-code .remark:after,
	pre.code .note:before,
	pre.incorrect-code .note:before {
		content: "";
	}


/* Examples and Figures */

	/* turn off borders so we don't need border=0 on image links */
	:link img, :visited img {
		border: 0;
	}

	/* add a border when an image has a white background on a white page */
	.image-border {
		border: solid thin black !important;
	}

	.deepLevel #mainContent :link img, .deepLevel #mainContent :visited img {
		border: medium solid;
	}

	.example,
	.incorrect-example {
		margin: 1em 3%;
		padding: .25em;
		border: 2px solid blue;
		font-family: monospace;
	}
	.Xexample:before,
	.Xincorrect-example:before {
		display: block;
		font-weight: bold;
		content: "Example";
	}
	.Xincorrect-example:before {
		content: "Incorrect Example";
	}
	.example[title]:before,
	.incorrect-example[title]:before {
		content: attr(title);
	}

	.figure,
	.screenshot {
		display: block;
		margin: .75em auto;
	}
	.screenshot[title]:after,
	.figure[title]:after {
		display: block;
		margin: 0 8% .05em;
		font-style: italic;
		font-size: small;
		text-align: right;
		content: attr(title);
	}

	pre.screen {
		overflow: auto;
		margin: 1em .5em;
		padding: .2em;
		border: solid 1px;
		font-family: monospace;
		white-space: pre-wrap;
	}

	.co,
	.callout {
		text-decoration: underline;
	}

	.incorrect.incorrect,
	.incorrect-example,
	.incorrect-code {
		border: solid red;
	}

	.right { float:right!important }

	.image.right { margin-left:.625em }

/* Q and A (FAQ) */

	.qandaset .question {
		font-size: large;
		font-weight: bold;
	}

	.qandaset .answer {
		margin-top: 1em;
	}

/* Tables */

    .wide {
        overflow-x: scroll;
    }

    table {
        max-width: 99%;
        border-collapse: collapse;
		margin-top: 1em;
		margin-bottom: 1em;
    }

    th {
        padding-top: 1px;
        padding-bottom: 1px;
        text-align: left;
        background-color: #FFD700; /* --primary-color2 - Orange */
        color: white;
    }

	tr {
        color: #554FA0; /*var(--primary-color1); Purple */
	}

    tr:nth-child(odd) {
        background-color: #F5F5DC; /*var(--background-color2); Sand Beige */
    }

	td {
		padding: 0.2em;
		border: 1px solid #778899; /* --primary-color3: LightSlateGray */
		vertical-align: top;
		word-wrap: normal; /* fit long text block into a cell, alternatively add a td.wrap class */
	}

	table.data {
		margin: 0.5em auto;
		border: 1px solid;
	}

	table.data caption {
		margin: 1em auto 0.2em;
		font-size: small;
		font-style: italic;
		text-align: center;
	}

/* Meta */

	address {
		text-align: right;
	}
	.author {
		margin-bottom: 1em;
		text-align: left;
	}
/* end Base styles */

/*html elements*/
html {
    padding: 0;
    margin: 0;
}

body {
	padding: 0;
	margin: 0;
	background: White;
	color: Black;
	font-family: Verdana, Sans-serif;
	font-size: 90%;
	position: relative;
	min-height: 100%;
}

label, input {
	font-weight: bold;
	color: #3D2DF3;
}
h1, h2, h3, h4, h5, h6 {
	margin: 1em 0 0.5em 0;
	border-right: 0;
	border-left: 0;
	color: Black;
}

h1 { font-size: 140%; padding: 9px; padding-left: 1em; }
h2 { font-size: 120%; padding: 3px; padding-left: 3em; border-bottom: solid thin  #778899;}  /*var(--primary-color3); LightSlateGray */
h3 { font-size: 110%; padding: 1.5px; padding-left: 5em; border-bottom: solid thin  #778899; }
h4 { font-size: 100%; padding: 1px; padding-left: 7em; border-bottom: solid thin  #778899;}
h5 { font-size: 90%;  padding: 1px; padding-left: 9em; border-bottom: solid thin  #778899;}
h6 { font-size: 90%;  padding: 1px; padding-left: 11em;  border-bottom: solid thin  #778899;}

sup {
	font-size: 70%;
}
img {
	max-width: 100%;
	height: auto;
}
:link {
	color: #554FA0; /*var(--primary-color1);*/
	font-weight: bold;
}
:visited {
	color: #090051;
	font-weight: bold;
}
:link:hover, :visited:hover {
	color: #5B52CB;
}
h1 :link, h2 :link, h3 :link, h4 :link, h1 :visited {
	font-weight: normal;
}
hr {
    padding: 0;
    height: 4px;
    margin: 2em 0;
    color: #778899; /*var(--primary-color3); LightSlateGray */
}

/* alignment */
.floatLeft {
	float: left;
	margin: 5px 10px 5px 0;
}
.floatRight {
	float: right;
	margin: 5px 0 5px 10px;
}

/* page structure*/
/* Use a media query to add a breakpoint at 1024px, same point as top menus collapse into a dropdown (see /Header) */
@media only screen and (max-width: 1024px) {
    #hor-nav {
        display: none;
    }
    #side {
        display: none;
    }
    h1, h2, h3, h4, h5, h6 {
        padding: 0.3em;
    }
}

/*2 Column Layout on bigger screens */
@media only screen and (min-width: 1025px) {
	.mBody {
		margin: 0 auto;
	}
	#mainContent {
		left: 250px; /* = #mainContent is loaded before sidebar following guidelines (more important), so shift to right for width of #side(bar)*/
	}

	/*.nomenu #mainContent, /* .nomenu @deprecated 4.21.3/Jan 2021 as it describes sidebar no menu = top */

    #mainContent.no-sidebar {
        width: 98%;
        left: 1%;
    }

	#side {
	    display: block;
		animation: animate-left 0.4s;
	}
	#drop-nav, #show-side, #close-side {
        display: none;
    }
    .list dd {
    	margin: 0 0 0 10em;
    }
}

/*Base Mobile Layout*/
#mBody {
	width: 100%;
	margin: 0 auto;
	position: absolute;
	top: 64px;
	left: 0;
	padding: 0;
}

.nomenu #mBody {
	background: #EEF; /*what color is this?*/
}

/*sidebar menus and links*/
#side {
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has more content than the screen */
    float: left;
	left: 0;
	top: 64px;
	bottom: 0;
	padding: 0 0.3em 1em 0.3em; /* try some extra padding at the bottom to display all contents (item 3: 1em) */
	voice-family: inherit;
    max-height: 100%;
    width: 250px;
    z-index: 2;
    background-color: #F5F5DC; /*--background-color2: Sand Beige */
    color: #778899; /*var(--primary-color3); LightSlateGray */
}

.nomenu #side,
.no-sidebar #side {
	display: none;
}

#side h2 {
	margin-top: 0.5em;
	background-color: inherit;
}
#side h3, #side h3:link {
	margin: 0.5em 0 0 0;
	padding-left: 1em;
	background-color: inherit;
	color: Black;
}
#side h4 {
	font-size: 90%;
	margin-top: 0;
	margin-bottom: 0.5em;
}
#side p {
	margin: 0 0 1em 2em;
	font-size: 87%;
}
#side dl {
	margin-top: 0;
}
#side dt {
	font-weight: bold;
	color: #554FA0; /*var(--primary-color1);*/
}
#side .dtheader {
	color: black;
}
#side dd {
	padding: 0 0 0.3em 0.3em;
	margin: 0 0 1em 0;
	font-size: 87%;
}
#side ul {
	padding: 0;
	margin: 0;
}
#side li {
	list-style: none;
	padding: 0 0 0.3em 0.5em;
}
#side li.here,
#side li.here:link {
	/* highlight current page in sidebar */
	background-color: #778899; /*var(--primary-color3); LightSlateGray */
	color: #F5F5DC; /* Sand Beige = sidebar bg color */
	font-weight: normal;
}
#side :link, #side :visited {
    color: #554FA0; /*var(--primary-color1);*/
}

/*header*/
#header { /* No longer used for the JMRI website */
	background: var(--background-color1);
}
#header img {			/* No longer used for the JMRI logo */
	float: left;
	margin: 0;
	padding: 0px 5px 5px 0px;
}
#mainNav { /* top row of top-of-page navbar */
	background: #778899; /*var(--primary-color3); LightSlateGray */
	color: White;
	width: 100%;		/* resize with window width */
	height: auto;		/* how much box below the text? 51px */
	vertical-align: middle;
	/* position: relative; // must be off for sticky */
    z-index: 3;
    overflow: visible; /* ! required to see More... the dropdown */
}
#mainNav li {			/* list items are used for navbar menu choices */
	white-space: nowrap;
	list-style-type: none;
	display: inline;
	padding-right: 0.6em;
}
#mainNav :link, #mainNav :visited, #navbtn-more {
				/* list items are usually links ... */
	font-size: 100%;
	text-transform: lowercase;
	text-decoration: none;
	font-weight: normal;
	color: White;
}
#mainNav :link:hover, #mainNav :visited:hover {
	color: #778899; /*var(--primary-color3); LightSlateGray */
}
.sticky { /* sticky navigation */
    position: fixed;
    top: 0;
    width: 100%;
}
.sticky + .mainContent {
    padding-top: 60px;
}
.hor-nav {
    padding: 8px 16px;
    display: inline-block;
}

/* 2020 dropdown from w3c, used in collapsed menu */
.dropdown {
    position: relative;
    top: 100%;
}
.dropdown ul {
  list-style-type: none;
  overflow: hidden;
}
.dropdown-content {
    position: absolute;
    top: 100%;
    opacity: 0;
    background-color: #778899; /*var(--primary-color3); LightSlateGray */
    color: #000;
    transition: box-shadow 125ms 0ms, transform 125ms 0ms, opacity 125ms 0ms, visibility 0ms .25s;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    z-index: 5;
    cursor: auto;
    min-width: 160px;
    margin: 0;
}
.dropdown-content a {
    color: Black;
    text-decoration: none;
    text-align: left;
}
.dropdown:hover > .dropdown-content {
    visibility: visible;
    transition: visibility 0ms 0ms, opacity 83.33333333ms 0ms, transform .25s 0ms, box-shadow 83.33333333ms 62.5ms;
    opacity: 1;
}
.dropdown-menuitem {
    display: block;
    position: relative;
    white-space: nowrap;
    width: 100%;
}

.hidden {
    display: none;
}

/* Search Form constructs */
#searchform {	/* search form */
    position: absolute;
	left: 100px;
	top: 5px;
	z-index: 4;
}
/* google search items in results */
.gsc-wrapper {
    background: #F5F5DC; /* makes search result URL/title readable */
}
.gsc-thumbnail-inside { /* highlights JMRI result items */
    background: LightSlateGray;
}
.gsc-thumbnail-inside :hover { /* highlights JMRI result items */
    background: LightGray;
}

#title {
	background: #AAC;
	margin: 0 0 0 205px;	/* Size of background box */
	width: auto;		/* resize with window width */
	top: -14px;
	height: 59px;		/* how much box below the text? */
	position: relative;
}

#title p {
	width: auto;		/* resize with window width */
	height: 50px;		/* how much box below the text? */
	position: relative;
	top: -6px;
	border: solid 3px #AAE;
	text-align: center;
	font-size: 120%;
	font-weight: bold;
	background: #554FA0; /* primary-color1: Purple */
	color: White;
}

/* } */
/*body*/
#mainContent {
	background: White;
	line-height: 1.3; /* value other than 'normal' needed for WinIE */
    position: fixed;
    top: 64px;
    bottom: 0;
    z-index: -1;
	margin-left: 10px;
	margin-right: 10px;
	padding: 20px 30px 0px 10px;
    max-width: 100%;
    float: left;
	voice-family: inherit;
	max-height: 100%;
	overflow: auto;
}

.nomenu #mainContent,
.no-sidebar #mainContent {
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	background: White;
}

/*what's new*/
#teaser p {
	color: #5C5885;
	margin-top: 0;
	margin-left: 5px;
}

/* 2 column list panel */
.image100w td {
    vertical-align: top
}
.image100w h2 {
    color: #554FA0; /*var(--primary-color1);*/
    background-color: #EEECF6;
    background-position: center left;
    padding: 7px;
    border-right: 0;
    border-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.list {
	margin: 2em 0 0 0;
}
.list dl {
	margin: 0;
}
.list dt {
	margin: 0 0 0 10em;
	padding: 0.4em 0 0 0.7em;
}
.list .im100w {
	clear: left;
	float: left;
	width: 102px;
	text-align: center;
	border: 0;
	margin: 0;
	padding: 1em 0 0.5em 0;
	}
.list .im { /* col 1 of list */
	clear: left;
	float: left;
	width: 6em;
	text-align: center;
	border: 0;
	margin: 0;
	padding: 1em 0 0.5em 0;
	}
.list .left {
	clear: left;
	float: left;
	width: 10em;
	text-align: center;
	border: 0;
	margin: 0;
	padding: 0.25em 0 0.25em 0;
	}
.list dd.first {
}
.list dd {
	margin: 0 0 0 2em; /*mobile first */
	padding: 1px 0 0.4em 0.7em;
	border-bottom: solid 1px LightSlateGray;
}
.list dd p, .list dd ul {
	margin-top: 0.2em;
	margin-bottom: 0.2em;
}

.list dd .quotes {
	color: #5C5885;
}

.list dd .quotes p {
	float: left;
	width: 40%;
	margin: 1em 5%;
}

/* generic reusable style */

.highlight {
	display: block;
	border-top: double 3px #ccc;
	border-bottom: double 3px #ccc;
	padding: 8px;
	margin: 20px 40px;
}
.highlight img {
	float: right;
	margin: 0 20px 0 20px;
}
.highlight dl {
	padding: 1em;
}
.highlight dd {
	white-space: nowrap;
}

.this { font-weight: bold;
	border: solid 1px #E6E0D7;
}

.mice {
	font-size: 70%;
	line-height: 1.1;
	color: #999;
	margin-top: 2em;
}
.mice :link, .mice :visited {
	color: #666;
}
.linkset {
	padding: 10px;
	margin: 0 0 0.5em 0;
	background: #eee;
	border-top: double 3px #ccc;
	border-bottom: double 3px #ccc;
}
.linkset li {
	list-style-type: none;
	padding-left: 20px;
	margin: 12px;
}
#rhs, #rhs2 {
	position: absolute;
	left: 650px;
	top: 160px;
	width: 160px;
}
#rhs2 {
	top: 0;
}
#rhs img {
	padding-left: 35px;
	margin-bottom: -20px;
}

/*footer*/
#bn {
	clear: both;
	border-top: solid 1px #EAE6DE;
	padding: 0 0 0 0.5em;
	margin: 3em 0 0.5em 0;
}
#bn li {
	list-style: none;
	display: inline;
	white-space: nowrap;
}
#bn :link, #bn :visited {
	padding: 0 1em 0 0.5em;
}
#bn :visited {
	font-weight: bold;
}
#footer p {
	font-size: 73%;
	line-height: normal;
	margin: 0 0 1em 1em;
}

/*accessibility tweaks*/
.skipLink {
	position: absolute;
	left: -999px;
	width: 990px;
}

hr.hide {
	display: none;
}

/* css animation */
@keyframes animate-left {
    from {left:-300px; opacity:0} to {left:0; opacity:1}
}