Serge NOEL
1118 lines
21 KiB
CSS
1118 lines
21 KiB
CSS
/* 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}
|
|
}
|