:root {
--bg-accent:#161930;
--bg-main:#000;
--bg-panel:#033;
--border-light:#bbb;
--border-main:#000;
--fg-accent:#ff0;
--fg-ext-bottom:red;
--fg-ext-top:green;
--fg-link-active:#0ff;
--fg-main:#fff;
--fg-symbol:red;
--fs-2xl:1.08vw;
--fs-3xl:1.12vw;
--fs-4xl:1.209vw;
--fs-5xl:1.255vw;
--fs-6xl:1.344vw;
--fs-7xl:1.51vw;
--fs-lg:.896vw;
--fs-md:.833vw;
--fs-sm:.7vw;
--fs-xl:1vw;
--fs-xs:.53763vw;
--fs-xxs:.4165vw;
--space-2xl:1.344vw;
--space-3xl:1.54569vw;
--space-4xl:1.88172vw;
--space-lg:.896vw;
--space-md:.672vw;
--space-sm:.336vw;
--space-xl:1.008vw;
--space-xs:.1344vw;
--space-xxs:.0672vw
}

* {
box-sizing:border-box
}

html,body {
background:var(--bg-main);
color:var(--fg-main);
font-family:Arial,sans-serif;
margin:0;
padding:0
}
html, body {
  margin: 0;
  min-height: 100%;
  background: #000;
}


a:link,a:hover {
color:var(--fg-accent)!important
}

a:active {
color:var(--fg-link-active)
}

h1,h2 {
color:#ff0;
text-align:center;
width:100%
}

h1 {
display:flex;
font-size:1.51vw
}

h1,h2,h3 {
color:#ff0;
font-family:Arial;
justify-content:center;
word-wrap:normal
}

h2 {
font-size:1.25vw
}

h2,h3 {
display:flex
}

h3 {
background-color:#000
}

img {
height:auto;
max-width:100%;
object-fit:contain
}

code {
background-color:var(--fg-main);
color:var(--bg-main);
display:inline-block;
font-size:1vw;
margin-left:var(--space-2xl);
padding:var(--space-xs)
}

red.code {
color:red
}

.over,.reference,p {
color:#fff;
font-family:Arial;
font-size:1.344vw;
word-wrap:normal
}

.over,.reference {
background-color:#000;
font-size:1.21vw;
justify-content:center;
margin:0 auto;
padding-left:.672vw;
padding-right:.672vw;
text-align:left;
width:90%
}

table,td,th {
border:.1344vw solid var(--border-main);
border-collapse:collapse
}

#super {
font-size:small;
vertical-align:super
}

.big-container {
background-color:#d8f8f8;
display:inline-block;
margin:0 auto;
width:100%
}
.big-container {
  padding-bottom: 1rem;
}

.container,
.container2,
.footer-container {
  background-color: var(--bg-main);
  box-shadow:
    0 .4vw .8vw rgba(0,0,0,.8),
    0 1.6vw 3vw rgba(0,0,0,.6);
  margin: 0 auto;
  width: 95%;
}


.footer-container {
font-family:Arial,sans-serif
}

.footer {
background-color:var(--bg-panel);
color:var(--fg-main);
font-family:Arial,sans-serif;
font-size:1.08vw;
justify-content:center;
padding-left:0
}

.Parent {
display:flex;
flex-direction:row
}

.child1,.child2 {
color:var(--fg-accent);
height:100vh;
text-align:left;
width:50%
}

.layout {
display:grid;
gap:.53763vw;
grid-template-areas:"index content updates";
grid-template-columns:0.5fr 1fr 0.5fr
}

.layout {
  background: #000;
  padding-bottom: 1rem;
}

.layout {
  min-height: 100vh;
  background: #000;
}

.index {
background-color:var(--bg-panel);
color:var(--fg-main);
font-family:Arial,sans-serif;
font-size:.833vw;
font-size:.85vw;
grid-area:index;
line-height:1.4;
padding:.896vw
}

.content {
background-color:var(--bg-panel);
color:var(--fg-main);
display:inline;
float:right;
font-family:Arial,sans-serif;
font-size:1vw;
grid-area:content;
padding:1.008vw
}

.updates {
background-color:var(--bg-panel);
color:var(--fg-main);
font-family:Arial,sans-serif;
font-size:1vw;
grid-area:updates;
padding:.896vw
}

.logo {
display:block;
margin-left:auto;
margin-right:auto;
width:100%
}

.box {
justify-content:center;
margin:0 auto;
width:90%
}

.topnav {
background-color:#383838;
line-height:1;
overflow:hidden;
position:relative
}

.topnav a {
border-bottom:.2688vw solid transparent;
border-right:.2688vw solid #000;
color:#f2f2f2;
float:left;
font-family:Arial,sans-serif;
font-family:Arial;
font-size:1.209vw;
font-size:1.209vw;
padding:.672vw;
text-align:center;
text-decoration:none
}

.topnav a:hover {
background-color:var(--bg-panel);
border-bottom:.2688vw solid var(--bg-panel)
}

#band1 {
border-bottom:.2688vw solid red
}

#band2 {
border-bottom:.2688vw solid #ff0
}

#band3 {
border-bottom:.2688vw solid green
}

#band4 {
border-bottom:.2688vw solid #00f
}

.topnav .search-container {
float:none;
line-height:1;
margin:0;
padding:0;
position:absolute;
right:.5vw;
top:50%;
transform:translateY(-50%);
width:auto
}

#nav-search-form {
  display: flex;
  align-items: center;
  flex-direction: row;
  white-space: nowrap;

  font-size: 16px; /* ← OPT OUT of vw scaling */
  line-height: 1;
}

#nav-search-input {
  background: #111;
  color: #fff;

  border: 1px solid #888;   /* subtle grey, no cyan */
  border-right: 0;          /* joins to the button */

  font-size: 14px;          /* slightly smaller text */
  height: 32px;             /* slightly smaller box */
  width: 220px;

  padding: 0 8px;
  box-sizing: border-box;
}

#nav-search-form {
  display: flex;
  align-items: center;
  gap: 0;              /* important */
}

#nav-search-input {
  margin: 0;
}

#nav-search-button,
button {
  margin: 0;
}


#nav-search-input::placeholder {
color:#aaa
}

#nav-search-form button {
  background: #222;
  color: #fff;

  border: 1px solid #888;

  height: 32px;             /* EXACT match */
  padding: 0 10px;

  font-size: 14px;
  line-height: 1;

  cursor: pointer;
  box-sizing: border-box;
}
#nav-search-button,
button {
  margin-left: -9px;
}

#nav-search-form button:hover {
  background: #333;
}
#nav-search-form button .fa {
  font-size: 18px;      /* ideal for 32px height */
  line-height: 1;
}
#nav-search-form .fa-search {
  font-size: 18px;   /* sweet spot for 32px height */
}
#nav-search-form button {
  font-size: 18px;      /* THIS controls the icon size */
  display: flex;
  align-items: center;
  justify-content: center;
}



.topnav::after {
clear:both;
content:"";
display:block
}

#mainMenu,
#mainMenu ul {
  background-color: var(--bg-main);
  color: var(--fg-main);
  display: block;          /* ← FIX */
  font-family: Arial, sans-serif;
  font-size: .833vw;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

#mainMenu li {
  border-right: .0672vw solid #333;
}

#mainMenu li:last-child {
  border-right: none;
}


#mainMenu li a {
border-bottom:.2016vw solid var(--bg-main);
color:var(--fg-main);
display:block;
padding:.9408vw 1.07526vw;
text-align:center;
text-decoration:none
}

#mainMenu li a:hover:not(.active) {
border-bottom:.2016vw solid var(--fg-accent);
color:var(--fg-main)
}

#side {
background:var(--bg-panel);
border-bottom:.2016vw solid var(--bg-panel);
color:var(--fg-main);
font-family:Arial,sans-serif;
font-size:1.344vw;
padding-left:.672vw
}

#side ul {
background:var(--bg-panel);
color:var(--fg-main);
display:list-item;
font-size:1vw;
overflow:visible;
padding-left:10px;
text-align:left
}

#side li {
  float: none;
  display: list-item;
  clear: none;
  margin: 0.35em 0;
  text-align: left;
}


#side li a {
border:0;
color:var(--fg-main);
list-style-position:outside;
list-style-type:square;
padding:0;
text-decoration:none
}

.topnav,.topnav a,#mainMenu,#mainMenu a {
font-family:Arial,sans-serif;
font-size:1.209vw
}

#sideMenu h2,#sideMenu strong {
font-size:.833vw;
font-weight:700;
text-align:left
}

#sideMenu li {
text-align:left
}

.index #side ul {
margin:0 0 1em;
margin-bottom:.9em;
margin-bottom:1.2em;
padding-left:1.2em;
text-align:left
}

.index #side li {
font-size:.781vw;
line-height:1.4
}

.index h1 {
font-size:1.2vw;
margin-bottom:.6em;
text-align:left
}

#index #side h2 {
  border-bottom: 1px solid #055;
  padding-bottom: .2em;
  margin-top: .9em;
}


.key,.keyword,.symbol {
color:var(--fg-main);
font-family:Arial,sans-serif
}

.key {
float:left;
font-size:.833vw;
font-weight:700;
margin:0;
padding:0
}

.keyword {
float:right;
font-size:.4165vw
}

.symbol {
color:var(--fg-symbol);
float:right;
font-family:Tahoma,sans-serif;
font-weight:700;
padding-bottom:0;
padding-right:var(--space-xs)
}

.top_ext,.bottom_ext {
font-family:Arial,sans-serif;
font-size:.4165vw
}

.top_ext {
color:var(--fg-ext-top);
float:left;
margin-left:var(--space-xs);
padding-bottom:var(--space-xs)
}

.bottom_ext {
color:var(--fg-ext-bottom);
float:right
}

.frontpage {
font-size:1vw;
line-height:1.1;
margin-bottom:.9em
}

.sitetable,.table1,.table2 {
color:var(--fg-main);
display:flex;
font-family:Arial,sans-serif;
margin:0 auto;
text-align:left;
width:90%;
word-break:normal
}

.table1 {
background-color:#033;
font-size:1vw
}

.sitetable {
background:var(--bg-main);
font-size:.7vw
}

.row::after,.sitetable::after,.table1::after {
clear:both;
content:"";
display:table
}

.col1,.col2,.col3,.colA,.colB,.colC,.colD,.colE,.colnom1,.colnom2,.ccMake,.ccModel,.ccProc,.ccProcSpd,.ccStRAM,.ccTxtRes,.ccHiRes,.ccColours,.ccKeyb,.ccKeysC,.ccStartOS,.ccPrice,.ccSound {
border-color:var(--border-main);
border-style:solid;
border-width:.0672vw;
padding:var(--space-md)
}

.col1,.col3 {
width:30%
}

.col2,.colA {
width:40%
}

.colB {
width:60%
}

.colC,.colD,.colE {
font-size:.95vw;
text-align:center;
width:5.883%
}

.colE {
background-color:#161930
}

.colD {
color:#000
}

.colnom1 {
text-align:center;
width:20%
}

.colnom2 {
width:80%
}

.ccModel {
width:15%
}

.ccSound {
width:7%
}

.search-container {
margin:0 auto;
padding-top:2vw;
width:90%
}

.search-container h1 {
color:var(--fg-accent);
display:flex;
font-family:Arial,sans-serif;
font-size:1.51vw;
justify-content:center;
text-align:center
}

.search-form {
align-items:center;
display:flex;
gap:.5vw;
justify-content:center;
margin-bottom:1vw
}

.search-form #q {
background:var(--bg-panel);
border:.0672vw solid var(--border-main);
border-radius:.3vw;
color:var(--fg-main);
font-size:1vw;
padding:.8vw;
width:60%
}

.search-form button {
background:#383838;
border:0;
border-radius:.3vw;
color:var(--fg-main);
cursor:pointer;
font-size:1vw;
padding:.8vw 1vw
}

.search-form button:hover {
background:var(--bg-panel)
}

#suggestions {
background:var(--bg-main);
border:.0672vw solid var(--bg-panel);
border-radius:.3vw;
margin:0 auto;
max-height:12vw;
overflow-y:auto;
width:60%
}

#suggestions div {
border-bottom:.0672vw solid var(--bg-panel);
padding:.7vw
}

#results {
font-size:1vw;
margin:0 auto;
width:90%
}

#results div {
border-bottom:.0672vw solid var(--bg-panel);
padding:.8vw 0
}

#results a {
color:var(--fg-main);
text-decoration:none
}

mark {
background:var(--fg-accent);
color:var(--bg-main)
}

.search-results {
color:var(--fg-main);
font-family:Arial,sans-serif;
font-size:1vw;
padding:.5vw 0
}

.search-results a {
color:var(--fg-accent);
text-decoration:none
}

.search-snippet {
color:var(--fg-main);
font-size:.9vw;
padding-top:.4vw
}

#pagination {
display:flex;
gap:1vw;
justify-content:center;
margin:1vw auto;
width:90%
}

.pagination {
margin-bottom:40px
}

#pagination button {
background:var(--bg-panel);
border:.0672vw solid var(--border-main);
border-radius:.3vw;
color:var(--fg-main);
cursor:pointer;
font-size:1vw;
padding:.6vw 1vw
}

#pagination button:disabled {
background:var(--bg-main);
color:#555;
cursor:not-allowed
}

.topnav #nav-search-form {
align-items:center;
display:flex;
flex-direction:row
}

.alert,.info {
background-color:#f44336;
color:var(--fg-main);
padding:1.344086vw
}

.info {
background-color:var(--bg-panel)
}

.closebtn {
float:right;
font-size:1.125vw;
font-weight:700;
line-height:1.34408;
margin-left:1.008vw
}

.index p,.index ul,.index h1,.index h2 {
margin-top:0
}

.article,.article p,.article .frontpage {
font-size:.85em;
line-height:1.4
}

.content .article p {
font-size:14px!important;
line-height:1.4;
margin:.4em 0
}

.content .article {
font-size:.8vw;
line-height:1.4
}

.content .article strong {
font-size:.75vw;
font-weight:400
}

.content .article img {
height:auto;
margin:.4em 0;
max-width:100%
}

.updates .update {
line-height:1.4;
margin-bottom:1em
}

.index h1,.index #side h2 {
font-family:Arial,Helvetica,sans-serif;
font-size:1.2vw;
font-weight:700;
margin-bottom:.6em
}

.index h1,.index h2 {
font-size:inherit;
font-size:1.4vw;
line-height:1.2
}

.index p,.index li {
font-size:1.2vw
}

.index #side ul li {
font-size:.9vw;
line-height:1.4
}

.index #side h2 a {
display:inline;
text-align:left
}

.index #side,.index #side h1,.index #side h2,.index #side h3,.index #side ul,.index #side li {
text-align:left!important
}

a:visited,.search-results a:hover {
color:var(--fg-main)
}

#sideMenu,#sideMenu ul,.index #side {
font-family:Arial;
font-size:.781vw;
text-align:left
}

.ccMake,.ccProcSpd,.ccPrice {
width:8%
}

.ccProc,.ccKeysC {
text-align:center;
width:5%
}

.ccStRAM,.ccKeyb {
text-align:center;
width:8%
}

.ccTxtRes,.ccHiRes,.ccColours,.ccStartOS {
text-align:center;
width:7%
}

.index .updates h1,.index .content h1,.index #side h2 {
font-size:1.1vw
}
/* Sidebar spacing & alignment — FINAL */
.index #side h2 {
  margin: 1.2em 0 0.4em;
  text-align: left;
}

.index #side ul {
  margin: 0 0 1.4em;
  padding-left: 1.2em;
}
/* Sidebar list cleanup — remove legacy separators */
#side ul,
#side li {
  border: none !important;
  background-image: none !important;
}
/* Sidebar list — larger text, tighter spacing */
#side li {
  font-size: 1em;        /* increase text size */
  line-height: 1.15;    /* tighter vertical rhythm */
  margin: 0.2em 0;      /* reduce space between items */
}

/* If links are inside the list items */
#side li a {
  font-size: inherit;
  line-height: inherit;
}
.content .article img {
  display: block;
  margin: 0.6em auto;
}
.content .article p img {
  display: block;
  margin: 0.6em auto;
}
.content .article img {
  float: none !important;
}

button {
  height: 32px;
  font-size: 16px;
}

button .fa-search {
  font-size: 16px;
}