/* Progressive enhancement 
 * 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:#557; }
.col5{ color:#224; }
.col5{ color:#112; }

.page{ width:640px; }

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


*{
  margin:0;
  padding:0;
}
body,html {
  background:#112;
  font-family: monospace,sans-serif;
  color:#f7f7f7;
  font-size:15px;
}

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

.btn{
  display: inline-block;
  margin: 0px 10px 10px 0px;
}

.btn a{
  display: inline-block;
  padding:8px 16px;
  color: #AAD;
  text-decoration:none;
}

.btn a:hover{
  color:#F7F;
  background:#000;
}

a, a:active, a:visited, a:link {
  text-decoration: none;
  color:#FFF;
  border-bottom: 1px dotted #AAD;
}

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

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


.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; }


table.header td{ border-bottom: 1px solid #223; }
.header td a{
  border:none;
  font-weight:bold;
}

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

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

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

.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;
}

/* progressive enhancement quirks */
@media (min-width:1px)  {
  .grid .tile{
    height:unset;
  }
  .grid .tile .img{
    visibility: visible;
  }
  .page{ width:80%; }
}