body{
    background: rgb(0,0,0);
    background: linear-gradient(132deg, rgba(0,0,0,1) 0%, rgba(21,21,23,1) 65%, rgba(49,59,61,1) 100%);
    color: rgb(200,200,255);
    padding: 20px;
    font-family: Verdana, Geneva, sans-serif;
}

.framecontainer{
    padding:0px;
}
.seamless{
    border:0px;
}


.samplecontainer{
    width:100%;
    display:inline-block;
    border-style: solid;
    border-color: silver;
    border-width: 0px;
    /*padding:15px;*/
/*    margin-left: 50%;
    transform: translateX(-50%);*/
}
.samplecontainer figure{
    /*width:50%;*/
    float:left;
    border-width: 2px;
    border-style:solid;
    /*max-width:50%;*/
    max-width: 800px;
}
.samplecontainer img{
    width:100%;
}
.samplecontainer iframe{
    float:left;
    /*width:50%;*/
    border-width: 0px;
    border-style: none;
    margin-left: 3px;
    display:inline-block;
}
.samplecontainer .sampletext,.frametext{
    /*width:50%;*/
    /*float:right;*/
    float:left;
    max-width:calc(85vw - 800px);
    min-width: 250px;
}
.samplecontainer .frametext{
    margin-left: 20px;
    max-width:calc(85vw - 800px);
}
figure p{
    margin-left:auto;
    margin-right:auto;
}


.linkblock{
    
}
.linkblock li{
    display:inline-block;
}
.linkblock .linkline{
    width:100%;
}
/* Handle different screen sizes */
@media only screen and (max-width: 1287px) {
    .samplecontainer .sampletext,.frametext{
        max-width: 100%;
        float:left;
    }
}
@media only screen and (max-width: 900px) {
    .samplecontainer figure{
        /*width:100%;*/
        max-width:100%;
    }
}


/*nav{
    background-color: rgb(20,20,20);
    border-style: solid;
    border-color: grey;
    padding:5px;
}*/
/* Message Container */
.msg{
    background-color: darkblue;
    padding:10px;
    margin:10px;
    width:calc(100% - 40px);
}



a{
    color:rgb(245,245,190);
    /*color:rgb(220,220,220);*/
}
a :visited{
    color:rgb(245,245,190);
    /*color:rgb(220,220,220);*/
}

figcaption{
    font-style: italic;
    color:rgb(220,220,220);
}

.navsection{
    background-color: rgb(20,20,20);
    border-style: solid;
    border-color: rgb(197,179,88);
    max-width:1400px;
    margin-right: auto;
    margin-left: auto;
}
.subsection{
    max-width:1370px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 15px;
    padding:15px;
    border-style: solid;
    border-color: rgb(197,179,88);
    background-color: rgb(30,30,30);
}
.frontsection{
    max-width:99%;
}

.subsection a h2{
    border-top-width: 3px;
}
.subsection h2{
    padding:5px;
    line-height: 2;
    margin-top: -15px;
    margin-left: -15px;
    width:calc(100% + 20px);
    /*background-color: rgb(197,179,88);*/
    background-color: rgb(30,30,30);
    /*color:rgb(20,20,100);*/
    border-style:solid;
    border-color: rgb(197,179,88);
    border-bottom-width: 3px;
    border-top-width: 0px;
    border-left-width: 0px;
    border-right-width: 0px;
}
.subsection h3{
/*  text-decoration: underline;
  text-decoration-color: rgb(197,179,88);*/
  line-height: 1.5;
}
.subhead{
    margin-top: 15px;
    margin-left: -18px;
    width:calc(100% + 15px);
    /*background-color: rgb(197,179,88);*/
    background-color: rgb(30,30,30);
    /*color:rgb(20,20,100);*/
    border-style:solid;
    border-color: rgb(197,179,88);
    border-bottom-width: 2px;
    border-top-width: 2px;
    padding-left: 15px;
}
/*Contents page*/
.subsection .maintitle{
    font-size: 200%;
    padding:5px;
    margin-top: -15px;
    margin-left: -18px;
    margin-bottom: 0px;
    width:calc(100% + 23px);
    background-color: rgb(197,179,88);
    color:rgb(20,20,100);
    line-height: 2;
}
/*Subcontent pages*/
.maintitle{
    margin-left: 10px;
}
.titlelink{
    /*color:rgb(20,20,100);*/
    color:rgb(220,220,220);
    
}
.titlelink :visited{
    /*color:rgb(20,220,100);*/
    color:rgb(220,220,220);
}
.breadcrumbs{
    max-width: 1400px;
    margin-right:auto;
    margin-left:auto;
    padding:5px;
}

ul{
    line-height: 1.25;
    /*margin-bottom: 30px;*/
}
.contentlist{
    margin-bottom: 30px;
}
p {
    line-height: 1.5;
}
img{
    margin-left:auto;
    margin-right:auto;
    display:block;
}
figcaption{
    
    text-align: center;
}
figure{
    margin-top: 25px;
    margin-bottom: 25px;
}

/* Generic Heading Stuff */

h1{font-size: 42px;color: rgb(220,220,255);}
h2{font-size: 38px;letter-spacing: -1px;color: rgb(220,220,255);}
h3{font-size: 34px;letter-spacing: -2px;color: rgb(220,220,255);}
h4{font-size: 28px;letter-spacing: -1px;font-style: italic;}
h5{font-size: 24px;letter-spacing: -1px;font-style: italic;}
h6{font-size: 20px;letter-spacing: -1px;font-style: italic;}

.TestResults ul{
    /*list-style-image: url('images/red_light.png');*/
    list-style-type: none;
}
.TestResults li{
    /*display:block;*/
    /*padding-bottom: 10px;*/
    /*margin-right: 10px;*/
    /*background-image: url('images/green_light.png');*/
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px;
    /*list-style-position: inside;*/
    padding:10px;
    padding-left:35px;
}
.TestPass{
    background-image: url('images/green_light.png');
}
.TestFail{
    background-image: url('images/red_light.png');
}
.TestWarn{
    background-image: url('images/amber_light.png');
}
.TestResults h3{
    font-size: 20px;letter-spacing: -1px;font-style: italic;
}


/* NAV BUTTONS */
/* position:relative;top:7px;margin-top: 5px;margin-bottom: 7px; - settings for non, multiline buttons*/
.myButton {
	box-shadow: 2px 3px 0px 1px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:6px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 1px #ffee66;
        width:160px;
        text-align: center;
        height:40px;
        margin-bottom:4px;
}
.myButton:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.myButton:active {
	position:relative;
	top:1px;
}

/* NAV MENU */

.MainNav{
    display: flex;
    justify-content: space-between;
}
.MainNav a:first-child{
    margin-left: 15%;
}
.MainNav a:last-child{
    margin-right:15%;
}
@media only screen and (max-width: 950px) {
    .MainNav a:first-child{
        margin-left: 10%;
    }
    .MainNav a:last-child{
        margin-right:10%;
    }
}
@media only screen and (max-width: 850px) {
    .MainNav a:first-child{
        margin-left: 5%;
    }
    .MainNav a:last-child{
        margin-right:5%;
    }
}
@media only screen and (max-width: 750px) {
    .MainNav a:first-child{
        margin-left: 0px;
    }
    .MainNav a:last-child{
        margin-right:0px;
    }
}

@media only screen and (max-width: 687px) {
    .MainNav{
        display: block;
    }
}

/* TITLE SECTION */

.titleSection{
    display:flex;
    text-align: center;
    align-content: center;
    flex-direction: column;
    margin-bottom: 20px;
}
.titleSection img{
    max-width:calc(75vw - 80px);
}
@media only screen and (max-width: 1000px) {
    .titleSection img{
        max-width:calc(90vw - 80px);
    }
}
@media only screen and (max-width: 750px) {
    .titleSection img{
        max-width:calc(98vw - 80px);
    }
}
.MainCaption{
    padding:10px;
    letter-spacing: 2px;
    font-variant: small-caps;
    font-weight: bolder;
    font-size: 32px;
}
.SubCaption{
    padding:10px;
    letter-spacing: 1px;
    font-variant: small-caps;
    font-weight: bold;
    font-size: 18px;
    width:75%;
    margin-left: auto;
    margin-right: auto;
}
.titleSection figure{
    width:calc(100% - 40px);
}

/*MISC - Help Section*/

.emphasis{
    font-weight: bolder;
    font-variant:small-caps;
    font-size:x-large;
}

.keyboard{
    border-radius: 10px;
    box-shadow: 1px 1px 0px 2px #fff6af;
    background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
    background-color:#ffec64;
    border-radius:6px;
    border:1px solid #ffaa22;
    display:inline-block;
    cursor:pointer;
    color:#333333;
    padding:6px;
    font-weight: bold;
    letter-spacing: -1px;
    margin: 4px;
    margin-right:5px;
    text-align: center;
    min-width: 30px;
}

.keysm{
    font-size: x-large;
    padding:2px;
    font-weight: bolder;
}

.helpsection{
    display:flex;
    /*flex-wrap:wrap;*/
    align-items: center;
}
.helpsection h1,h2,h3,h4,h5,h6{
    
}


.helpsection figure{
    max-width: 98%;
    flex-grow: 1;
}
.helpsection figcaption{
    min-width: 300px;
    /*max-height: 100%;*/
}
.helpsection p{
    flex-grow: 1;
}
.helpsection table{
    min-width: 400px;
    font-size:small;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:20px;
    /*border: 1px solid whitesmoke;*/
}
.helpsection th,tr,td{
    border: 1px solid whitesmoke;
    padding:4px;
}
.helpsection th{
    color:black;
    background-color: whitesmoke;
}
.tableimg{
    width:96px;
    height:96px;
}
.charttable{
    table-layout:fixed;
    width:100%;
}
/*All level children*/
.charttable td{
    text-align: center;
}
/*First column in each row & all headers*/
.charttable tr>th,td:first-of-type{
    font-size: large;
}

.charttable tr>th:nth-child(1){
    width:15%;
}

.charttable tr>th:nth-child(9){
    max-width: 100px;
}
.charttable .leftcell{
    text-align: left;
    color:black;
    background-color: whitesmoke;
}

.expandfig img{
    max-width: 99%;
}

@media only screen and (max-width: 1200px) {
    .helpsection{
        display: inherit;
    }
    .helpsection img{
        max-width: 99%;
    }
}

/* Flags */
.new{
    background: rgb(10,155,5);
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: gold;
    letter-spacing: -1px;
    font-variant:small-caps;
    font-size: larger;
    padding:4px;
    margin-right: 10px;
}
.temporary{
    background: rgb(155,10,5);
    border-radius: 5px;
    border-style: solid;
    border-width: 1px;
    border-color: gold;
    letter-spacing: -1px;
    font-variant:small-caps;
    font-size: larger;
    padding:4px;
    margin-right: 10px;
}
.notation{
    font-variant:small-caps;
    border-radius: 2px;
    border-style: solid;
    border-width: 0px;
    border-color: white;
    background-color: rgba(255,255,255,0.95);
    padding:4px;
    color:black;
}
.concept{
    font-variant:small-caps;
    font-size: x-large;
    font-weight: bolder;
    margin-bottom: 15px;
}
ul .concept{
    line-height: 1.5;
}
.url{
    font-size: larger;
    font-variant:small-caps;
    border-radius: 2px;
    border-style: solid;
    border-width: 0px;
    border-color: white;
    background-color: rgba(255,255,255,0.95);
    padding:4px;
    color:black;
}
.urlhl{
    background-color: palegoldenrod;
}