html{
     background-color: rgb(51, 51, 51);
}

body{
     width: 1000px;
     margin-left: auto;
     margin-right: auto;
}

article{
     margin-left: auto;
     margin-right: auto;
}


aside{
     background-color: rgb(204,204,204);
     color: rgb(0,0,0);
     border-radius: 5px;
     padding: 5px;
     margin: 5px;
     font-size: 10pt;
     border-style: inset;
     border-width: thin;
     border-color: black;
     text-align: justify;
}

.output{
     color: rgb(190, 190, 190);
     -top: 5px;
     padding-bottom: 5px;
     text-align: center;
     font-weight: bold;
     font-size: 11pt;
}

/*GRID FORMATTING*/
/*classes*/
.formBlock{
     background-color: rgb(100,100,100);
     color: rgb(255,255,255);
     border-radius: 5px;
     padding: 2px;
     margin: 2px;
}

.formBlockHeader{
     font-weight: bold;
     font-style: italic;
     font-size: 12pt;
     text-align: center;
     grid-area: frmHdr;
}

.formItem{
     display: grid;
     vertical-align: middle;
     background-color: rgb(204,204,204);
     color: rgb(0,0,0);
     border-radius: 5px;
     padding: 2px;
     grid-template-columns: 0.8fr 0.2fr;
     grid-template-areas:'label input';
}

.formItem > label{
     text-align: right;
     vertical-align: middle;
     padding-top: 6px;
     padding-bottom: 2px;
     font-weight: bold;
     font-size: 11pt;
     grid-area: label;
     height: 1rem;
}

.formInput{
     display: inline;
     text-align: left;
     vertical-align: middle;
     margin-top: auto;
     margin-bottom: auto;
     padding: 2px;
     grid-area: input;
}

input[type=text] {
     margin-left: 2px;
     margin-right: 2px;
     padding-left: 2px;
     padding-top: 2px;
     padding-bottom: 2px;
     background-color: rgb(100,100,100);
     color: rgb(255,255,255);
     border-radius: 5px;
}

.formList{
     display: block;
     text-align: left;
     vertical-align: middle;
     background-color: rgb(204,204,204);
     color: rgb(0,0,0);
     border-radius: 5px;
     padding-left: 5px;
     padding-right: 5px;
     padding-top: 2px;
     padding-bottom: 2px;
}

.formList > span{
     font-weight: bold;
     font-size: 11pt;
     padding-left: 2px;
}

.formList > label{
     text-align: left;
     vertical-align: middle;
     font-size: 10pt;
     margin-top: 3px;
     margin-bottom: 3px;
}

.formList > input{
     margin-top: 3px;
     margin-bottom: 3px;
}



.outputDetail{
     grid-area: detail;
}

.errorBlock{
     display: block;
     background-color: rgb(255, 204, 0);
     color: rgb(255, 0, 0);
     border-radius: 5px;
     padding: 5px;
     margin: 5px auto;
}

.errorBlock > span{
     font-weight: bold;
}


.textBlock{
     background-color: rgb(100,100,100);
     color: rgb(255,255,255);
     border-radius: 5px;
     padding: 2px;
     margin: 10px 2px;
}

.textBlockHeader{
     font-weight: bold;
     font-style: normal;
     font-size: 14pt;
     text-align: center;
     padding: 4px;
     margin: 6px;
}

.textSection{
     background-color: rgb(204,204,204);
     color: rgb(0,0,0);
     border-radius: 5px;
     padding: 4px;
     margin-top: 6px;
     margin-bottom: 2px;
     margin-left: 2px;
     margin-right: 2px;
     text-align: justify;
}

.textSection > p{
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
     text-indent: 3em;
}

button{
     font-size: 11pt;
}

button#submitButton{
     background-color: rgb(255, 153, 0);
}

button#resetButton{
     background-color: rgb(225,225,225);
}

button#copyButton{
     background-color: LightBlue;
}

.buttonIcon{
     vertical-align: middle;
     width: 1.25rem;
     height: 1.25rem;
}


ul{
     margin-top:0px;
     margin-bottom:0px;
}

header{
     color: rgb(204, 204, 204);
     display: block;
     text-align: center;
     vertical-align: top;
     width: 100%;

}

footer{
     color: rgb(204, 204, 204);
     display: block;
     vertical-align: bottom;
     text-align: center;
     width: 100%;
}

.head_titleBar{
     background-color: rgb(75,75,75);
     color: rgb(255,255,255);
     border-radius: 5px;
     padding: 8px;
     margin: 2px;
}

.head_titleBar > a{
     vertical-align: middle;
     font-size: 26pt;
     font-weight: bold;
     font-family: serif;
}

.head_titleBar > p{
     vertical-align: top;
     font-size: 14pt;
     font-style: italic;
     font-weight: normal;
     line-height: normal;
     margin: 0;
     padding: 2px;
}

.head_navBar{
     padding: 2px;
     margin: 6px;
}

.head_navBar > a{
     vertical-align: middle;
     color: rgb(204,204,204);
     border-radius: 5px;
     padding: 2px;
     width: 15rem;
     margin: 0 8px;
     font-family: sans-serif;
     font-weight: bold;
}

.pageTitle{
     background-color: rgb(75,75,75);
     color: rgb(255,255,255);
     border-radius: 5px;
     margin-left: 2px;
     margin-right: 2px;
     margin-top: 10px;
     margin-bottom: 4px;
     text-align: center;
     font-size: 18pt;
     font-weight: normal;
     font-style: normal;
     font-family: serif;
     padding: 4px;
}

.head_titleBar > a:link, .head_titleBar > a:visited, .head_navBar > a:link, .head_navBar > a:visited, .foot_navBar > a:link, .foot_navBar > a:visited{
     color: inherit;
     font-style: inherit;
     text-decoration: inherit;
}

.footText{
     background-color: rgb(75,75,75);
     color: rgb(210,210,210);
     border-radius: 5px;
     padding: 2px;
     margin: 2px;
     font-size: 10pt;
}

.foot_navBar{
     padding: 2px;
     margin: 6px;
}

.foot_navBar > a{
     vertical-align: middle;
     color: rgb(204,204,204);
     border-radius: 5px;
     padding: 2px;
     width: 15rem;
     font-family: sans-serif;
}

.deadEnd{
     color: rgb(125,125,125) !important;
}

.subHeader{
     font-size: 8pt;
     color: rgb(225,225,225);
     text-align: center;
     margin: 0;
}


input[type=text]:disabled{
     background-color: rgb(150,150,150);
}

/*
input:disabled+label{
     color: rgb(50,50,50);
}
*/