xrforge-v2/src/css/xrforge.css

/* 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 */ 

.col0{ color:#fff; }
.col1{ color:#f3f; }
.col12{ color:#83f; }
.col2{ color:#AAD; }
.col3{ color:#878; }
.col4{ color:#7070ff; }
.col5{ color:#447; }
.col6{ color:#224; }
.col7{ color:#112; }
.col8{ color:#000; }

.page{ width:640px; }

body .script{ visibility: hidden; }
body.script .script{ visibility: visible !important; }

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

.content{
  font-family: sans-serif;
  letter-spacing: 0.01em;
}

*{
  margin:0;
  padding:0;
}

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

body{
  overflow-wrap: break-word; 
  background:#000;
  margin:20px;
}

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

/* form elements */

input,
textarea,
button,
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)
}
textarea{
  min-height:150px;
}

/* buttons */

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

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

.iconbtn{
  float: right;
  border: 1px solid #8880 !important;
  border-spacing: 10px 10px 10px 10px;
  padding: 0px 5px;
  border-radius: 4px;
  background: #2230;
  transition: border 0.4s;
}
.iconbtn:hover{
  border: 1px solid #888 !important;
  background: #223;
}

.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:#8af;
  border-bottom: 1px dotted #AAD;
}

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

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: #000; color: #83f; }

.pad1{
  padding:20px;
}
.bg1{
  background:#224;
}
pre{
  line-height:initial !important;
  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: 17px;
  padding-top: 25px;
  padding-bottom:25px;
}
h1{
  font-size: 29px;
  margin: 15px 0px;
}

h1 a,
h2 a,
.jumbotron center a{
  text-decoration:none;
  border:none !important;
}
.sym{ font-size:100px; color:#000; }


table.header tr td {
  vertical-align:top;
}
.header td a{
  border:none;
}

/* logo */
.logo *{ 
  font-size:15px; 
  display:inline;
}
.logo .cube{
  font-size: 27px;
  font-weight: normal;
  display: inline-block;
  transform: translate(0px,3px);
  padding: 0px 1px;
}

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;
  color:#FFF;
  font-weight:normal !important;
  font-family:sans-serif;
}

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

img.icon{ display:none; }

/* vertical tab */

.vtab{
  border-bottom: 1px solid #224;
  margin-bottom: 25px;
  margin-left: 140px;
}
.vtab .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);
}

.info{
  background:#224;
  padding:20px 30px;
  overflow:clip;
}

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

blockquote{
  background: #224;
  padding: 15px;
  margin: 15px 0px;
  display: inline-block;
}

table.footer tr td {
  line-height:35px;
}
table.footer tr td a{
 color:#878; 
}

/* 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;
  }
}