/* Progressive enhancment 
 * NetSurf and Dillo will ignore this entirely because of the modern orientation/feature query 
 */
@import url("xrforge.max.css") supports(display: grid);

/* color palette */ 
.col1{ color:#f3f; }
.col2{ color:#AAD; }
.col3{ color:#878; }
.col4{ color:#7070ff; }
.col5{ color:#447; }
.col6{ color:#224; }
.col7{ color:#112; }

.page{ width:640px; }

/* spacers */
.margin1L{ margin: 0px 20px 10px 0px;}
.margin1{ margin: 10px 20px; }
.padding1{ padding: 10px 20px 10px 20px; }


*{
  margin:0;
  padding:0;
}

body,html {
  font-family: monospace,sans-serif;
  color:#f7f7f7;
  font-size:15px;
}

body{
  margin:20px;
}

td,div,p{
  word-spacing: 0.2em;
  line-height:24px;
}

/* form elements */

input,
select{ 
  box-sizing: border-box;
  margin: 0px 0px 10px 0px;
  padding:7px;
  display:block; 
  max-width:300px;
  width:100%;
  background: #000;
  border: 1px solid #557; 
  color: #AAD;
}

input,select,textarea{
  background:#112;
}
input[type=checkbox]{
  transform:scale(1.7) translate(3px,4px)
}

/* buttons */

.btn,
input[type=submit]{
  display: inline-block;
  margin: 0 15px 0px 0px;
}

.btn a,
.btn a:active, 
.btn a:visited,
.btn a:link,
input[type=submit] {
  font-size:15px;
  display: inline-block;
  padding:8px 16px;
  color: #f3f;
  text-decoration:none;
  background:#112;
}

.btn a:hover,
input[type=submit] {
  color:#F7F;
  background:#000;
}

.btn a, 
.border,
input[type=submit]{ 
  border:1px dotted #AAD; 
}

a, a:active, a:visited, a:link, input[type=submit] {
  text-decoration: none;
  color:#FFF;
  border-bottom: 1px dotted #AAD;
}

a:hover{
  color:#FFF !important;
  cursor:pointer;
  border-bottom:1px dotted #f3f;
}

table{
  table-layout: fixed;
}
table tr td {
  vertical-align: top;
}
form > table > tbody > tr > td{
  height:32px;
}
form > table > tbody > tr > td:nth-child(1) {
  font-weight:bold;
  padding-top: 4px;
}
form > table > tbody > tr > td:nth-child(3) {
  font-size: 13px;
  padding-top: 4px;
  text-align:right;
}


/* primary secondary colors */

.border.primary{ border:1px dotted #87a; }
.border.secondary{ border:1px dotted #7070ff; }
.primary     { color: #ff33Ff;}
.secondary   { color: #7070ff;}
.btn a.primary{ background: #ff33Ff; color:#000}
.btn a.secondary{ background: #7070ff; color:#000}

.pad1{
  padding:20px;
}
.bg1{
  background:#224;
}
pre{
  font-family: monospace; 
  line-height: 1;
  word-spacing: normal;
  color:#AAD;
  margin:0px 20px 20px 0px;
  padding:0;
  width:200px;
}
.ansi{
  font-size:20px;
}
h1,h2,h3,h4,h5{
  font-size: 16px;
  padding-top: 25px;
  padding-bottom:25px;
}
.sym{ font-size:100px; color:#000; }


.header td a{
  border:none;
  font-weight:bold;
}

/* logo */
.logo{ font-size:15px; display:inline-block;  }

hr{
  margin:20px 0px;
  border:none;
  border-bottom:1px solid #224;
}

ul{
  list-style-position:outside;
  padding-left:0.8em;
}

.menu{
  text-align: right;
}
.menu,
.menu *{
  white-space: nowrap;
}
.menu a {
  padding-right:30px;
}

.grid .tile{ border-radius:5px; }
.grid .tile .text{ padding:3px 0px; }
.grid .tile .img{
  border-radius:5px 5px 0px 0px;
  visibility: hidden;
}

img.icon{ display:none; }

/* tab */

.tab{
  border-bottom: 1px solid #224;
  margin-bottom: 25px;
  margin-left: 140px;
}
.tab .label{
  display: block;
  background: #000;
  margin-bottom: -2px;
  width: 168px;
  margin-left: -140px;
  border-top: 1px dotted #557;
  border-right: 1px dotted #556;
  padding: 9px 0px 0px 20px;
  font-weight: bold;
  font-size: 14px;
}

.notification{
  background: #7070ff;
  padding: 20px;
  text-align: center;
  font-weight: bold;
  border: 4px dashed #222;
  margin-bottom: 25px;
}

.jumbotron h1{
  font-size: 29px;
  font-weight: normal;
}
.jumbotron h1,
.logo a{
  filter: drop-shadow(1px 1px 5px #0FF9) drop-shadow(-1px -1px 5px #F079);
}

b.tag{
  display:inline-block;
  background: #77f;
  color: white;
  font-size: 12px;
  padding: 1px 4px;
  border-radius: 5px;
}

/* progressive enhancement quirks */

.spectrum{ display:none }

@media (min-width:1px)  {
  .grid .tile{
    height:unset;
  }
  .grid .tile .img{
    visibility: visible;
  }
  .page{ 
    width:100%; 
    max-width:1280px;
  }
}