/* someone needs to learn css, stat. */


/* tablesorter */
table.tablesorter {
	font-family:arial;
	margin:10px 0pt 15px;
	font-size: 10pt;
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #DDE;
	border: 1px solid #FFF;
	font-size: 10pt;
	padding: 4px;
        color: #000;
}
table.tablesorter thead tr .header {
	background-image: url(/images/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}

table.tablesorter thead tr .headerSortUp {
	background-image: url(/images/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(/images/desc.gif);
}


table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
  background-color: #FFF;
  border-color: #000;
}

table.tablesorter thead tr th:hover {
   background: #AAE;
   border-color: #227;
}




body {
 font-family: sans-serif; 
}
html {
 overflow-y: scroll; 
}




#title  { 
  font-family: sans-serif;
}

#replay {
  font-family: sans-serif;
padding: 0px 0.5em; /* 3px was cute */
margin-left: 3px;  
border: 1px solid #778;
background: #FDD;      
text-decoration: none; 
color: #000;
}

#debugtable {
  margin-left: 0%;
  margin-right: 0%;
}

#pb1 {
  margin-left: 100px;
}
#results {
}


#score10, #score9, #score8 {
  color: #008000;
  font-size: 300%;
}

#score7, #score6, #score5 {
  font-size: 300%;
  color: #ff6600;
}
#score4, #score3  {
  font-size: 300%;
  color: #ff6600;
}

#score2, #score1, #score0  {
  font-size: 300%;
  color: #ff0000;
}


#survey {
  font-size: 80%;
  color: #888888;
}

#showurls {
  font-size: 50%;
}

#url {
  font-size: 80%;
}

th {font-weight: bold;}

td {vertical-align: top;}

a {  white-space:nowrap; }   

#small {
  Font-size: 80%;
}
.small {
  Font-size: 80%;
}

.question {
  font-weight: bold;
  padding: 5px;
}

.answer {
  font-weight: normal;
  padding: 5px;
}


#highlighter {
  background-color: #ffff00;
}

.quote { 
 width: 450px;
 background-color: #ddffdd;
 padding: 2px;
 border-style: solid;
 border-color: black;
}


.status_ok {
  font-weight: bold;
  color: green;
}

.status_safe {
  font-weight: bold;
  color: green;
}

.status_slow {
  font-weight: bold;
  color: orange;
}

.status_affected {
  font-weight: bold;
  color: red;
}

.status_bad {
  font-weight: bold;
  color: blue;
}

.status_timeout {
  font-weight: bold;
  color: red;
}



#navlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}

#navlist li
{
list-style: none;
margin: 0;
display: inline;
}

#navlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

#navlist li a#current
{
background: white;
color: black;
border-bottom: 1px solid white;
}


.navright 
{
 float: right;
}
#tabnavlist
{
padding: 3px 0;
margin-left: 0;
border-bottom: 1px solid #778;
font: bold 12px Verdana, sans-serif;
}

#tabnavlist li
{
list-style: none;
margin: 0;
display: inline;
}

#tabnavlist li a
{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #DDE;
text-decoration: none;
}

#tabnavlist li a:link { color: #448; }
#tabnavlist li a:visited { color: #667; }

#tabnavlist li a:hover
{
color: #000;
background: #AAE;
border-color: #227;
}

#tabnavlist li a#tabcurrent
{
background: white;
color: black;
border-bottom: 1px solid white;
}

#tabnavlist li a#contactme
{
background: #ff9900;
color: #000000;
border-bottom: 2px solid yellow;
}




.tabnavright 
{
 float: right;
}
.tabbox_outside div {
 width: 95%;
 margin-left: auto;
 margin-right: auto;
}

.tabbox_middle div {width: 95%;}

.tabbox_inside div {width: 100%;}


#about P {
 color: gray;
 Font-size: 60%;
text-align: center;
}



td.results_wrapper {
  vertical-align: top;
}

td.results_left  {
  width: 50px;
  color: white;
  text-align: center;
  vertical-align:top;
  font-size: 1.1em;
  font-weight: bold;
  text-shadow: #000000 0.1em 0.1em 0.1em;
}
td.results_right {
  font-size: 1.1em;
  /* -webkit-text-size-adjust: 100%; */
  width: 100%;
  vertical-align: top;
  padding-left: 10px;
}


a.permalink, a.goback, a.help_popup {
  font-size: small;
  font-style: italic;
}


#social {
  width:600px;
  margin-left:auto;
  margin-right:auto;
}

#logo {
  font-size: small;
  text-align: center;
}

#replayurl {
  font-size: small;
  word-wrap: break-word;
  margin-left: 10%;
  margin-right: 10%;
}

.ghost {
  opacity:0.4;
}

.helpdeskcode {
   font-weight: bold;
   color: #0000ff;
}

.terminal {
  white-space: pre-wrap;
  font-family: monospace;
  font-style: normal;
  font-size: 100%;
  color: #000000;
}

div.bigdiv {
   width: 100%;
   margin: 0;
   padding: 0;
   background-color:#000
   top: 0;
   left: 0;
}

div.g_outer { 
}

div.graph {
}
.dygraph-label { font-size: 1; font-weight: normal; }
.dygraph-legend { 
  opacity: 0.9;
}
/*.dygraph-title { font-size: 36px; text-shadow: gray 2px 2px 2px; }*/
/*.dygraph-ylabel { font-size: 18px; text-shadow: gray -2px 2px 2px; }*/


/*  Start including hires icons; match icon size to text size. */

img.em1 {
  height: 1em;
  width: auto;
}
img.em2 {
  height: 2em;
  width: auto;
}
img.emish {
  height: 2em;
  width: auto;
}


div.nomail {
  width: 100%;
  margin: 0;
  padding: 0;
  background-color:#fbb;
  color: #000000;
  top: 0;
  left: 0;
}

a.help_popup {color: blue;}

/* Light mode */
@media (prefers-color-scheme: light) {
  body {
      background-color: white;
      color: black;
  }

  .tabbox_outside div {border: 1px solid #777777;}

  .tabbox_inside div {border: 0px solid #000000;}

  .tabbox_middle div {border: 0px solid #000000;}

  /* Readiness Score */
  th {
    background-color: #000000;
    color: #ffffff;
  }

  table.tablesorter tbody td {
    color: #3D3D3D;
    background-color: #FFF;
  }
  
  table.tablesorter {background-color: #CDCDCD;}

  .subtle a { color: #000; text-decoration: none; }
  .subtle a:link { color: #000; }
  .subtle a:visited { color: #000; }
  .subtle a:hover { color: #00F; text-decoration: underline;}
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
      background-color: #0D1117;
      color: #ABB2BA;
  }

  .tabbox_outside  div {border: 1px solid #ffffff;}
  
  .tabbox_inside div {border: 0px solid #ffffff;}

  .tabbox_middle div {border: 0px solid #ffffff;}

  /* Readiness Score */
  th {
    background-color: #ffffff;
    color: #000000;
  }

  a:link {
    color: white;
  }
  
  a:visited {
    color: #d3d3d3;
  }
  
  a:hover {
    color: #999999;
  }
  
  a:active {
    color: blue;
  }

  table.tablesorter tbody td {
    color: #ffffff;
    background-color: black;
    }

  table.tablesorter {
    background-color: #cfcfcf;
  }

  a.permalink, a.goback, a.help_popup {
    background-color: rgb(0, 4, 68);
  }
}




* {
  box-sizing: border-box;
}
@media screen and (max-width: 600px) {
  body #navlist,#tabnavlist {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  body :is(#navlist,#tabnavlist) li a {
    display: inline-block;
    margin: 0;
    border-bottom: 1px solid #778;
  }
  body :is(#navlist,#tabnavlist) li a#current,
  body :is(#navlist,#tabnavlist) li a#tabcurrent {
    border-bottom: 1px solid #778;
  }
  body #tabnavlist {
    padding: .5em;
    margin: 0;
  }
}