/***********************************************/
/* screen.css                                  */
/***********************************************/

:root {
   --banner-color: #557799;
}

body{
font-family: Georgia,Verdana,Arial,Helvetica,sans-serif;
font-size: 1.0em;
color: #000;
background-color: #fff;
/* background: #fff url(../images/bg-glp.png) repeat top left; */
padding: 0;
margin: 0 auto;
min-width: 350px; /* 800px; */
max-width: 1300px;
min-height: 600px;
direction: ltr;
}

div {
   text-align: left; 
   padding: 5px 0 0 0;
}

div#main {
   padding: 5px 0 0 10px;
}

br {
line-height: 0.6em;
}

p.gap {
padding: 1px 0;
margin: 1px 0;
}
.gapsm{
padding: 1px;	
}

ol{
padding: 2px 10px 2px 40px;
}

ul {
list-style-image:url('../images/note.png');
padding: 2px 10px 2px 40px;
}
ul.foot {
line-height: 1.0em;
padding: 0;
margin: 0;
}

a{
color: #00a;
text-decoration: none;
cursor: pointer;
}

a:link{
color: #00a;
text-decoration: none;
}

/*
a:visited{
color: #009900;
text-decoration: none;
}
*/

a:hover{
color: #0a0;
text-decoration: underline;
}

h1{
font-family: Verdana,Arial,sans-serif;
font-size: 124%;
color: #000;
text-shadow:1px 1px #ccc;
margin: 0;
padding: 2px 0 0 2px;
}

h1.big{
font-family: Verdana,Arial,sans-serif;
font-size: 200%;
color: #000;
text-shadow:1px 1px #ccc;
margin: 0;
padding: 2px 0 0 2px;
}

h2{
font-family: Verdana,Arial,sans-serif;
font-size: 116%;
color: #000;
text-shadow:1px 1px #ccc;
margin: 0;
padding: 0 0 0 2px;
}

h3{
font-family: Arial,sans-serif;
font-size: 110%;
color: #334d55;
text-shadow:1px 1px #ccc;
margin: 0;
padding: 0 0 0 2px;
}

h4{
font-family: Arial,sans-serif;
font-size: 106%;
color: #333;
text-shadow:1px 1px #ccc;
margin: 0;
padding: 0 0 0 2px;
}

h5{
font-family: Verdana,Arial,sans-serif;
font-size: 102%;
color: #334d55;
text-shadow:1px 1px #ccc;
margin: 0;
padding: 0 0 0 2px;
}

pre {
font-size: 105%;
}

label{
font-family: Arial,sans-serif;
font-size: 100%;
font-weight: bold;
color: #630;
}

img {
border: 0;
}

table {
border: 0;
/*
cell padding: 0;
cell spacing: 0;
*/
}

#masthead{
position: sticky;
background-color: var(--banner-color);
text-align: center;
font-weight: normal;
font-size: 1.3em;
border: #000 1px solid;
border-spacing: 0px;
border-collapse: collapse;
position: sticky;
top: 0;
padding: 5px;
z-index: 25;
}

#masthead a{
font-family: "Arial Black", "New York", serif;	
letter-spacing: 1px;
font-size: 125%; /* 0.9em; */ /* 110%; */
font-weight: bold;
color: #fffffb; /* #fffff8; */
}

#masthead a:hover {
color: #3c3;
text-decoration: underline;
}

.left, .lt {
text-align: left;
}

.right, .rt {
text-align: right;
}

.center, .ct {
text-align: center;
}

#siteInfo{
background-color: var(--banner-color);
text-align: center;
clear: both;
font-size: 86%;
color: #fffffb; /* #fffff8; */
border: #000 1px solid;
border-spacing: 0px;
border-collapse: collapse;
}

#siteInfo img{
padding: 2px; /* 4px 4px 4px 10px; */
vertical-align: middle;
}

#siteInfo a{
color: #fffffb; /* #fffff8; */
padding: 3px;
}

#siteInfo a:hover {
color: #3c3;
text-decoration: underline;
}

.alert {
color: #FF3333;
}

.name {
width: 22%;
}

.bolder {
font-size: 110%;
font-weight: bold;
font-style: italic;
cursor: pointer;
}
.bolder:hover{
text-decoration: underline;
color: #06f;
background-color:#ff9;
cursor: pointer;
}

.mouseOver{
cursor: pointer;
color: #00C;
}

.mouseOver:hover{
cursor: pointer;
color: #0C0;
text-decoration: underline;
}

.copystate {
font-size: 9px; 
/* color: #bbb; */
line-height: 1.0em	
}

.notdisplay { display: none; }
.display { display: inline; }

.hidden { visibility: hidden; }
.unhidden { visibility: visible; }

#spinner {
padding: 0;
margin: 0;
height: 24px; 
width: 24px;
background-color: #fff;
border: #ccc 1px solid;
position: fixed; /*   top: 25%;  left: 97%; */
top: 1%;
left: 1%;
z-index: 100;
display: none;
}

/* Responsive Styles */
@media (max-width: 768px) {
   body {
      font-size: 1.2em;
   }   
}