html,body{margin:0;padding:0;background:#666;color:#222;font-family:"Comic Sans MS","Comic Sans",cursive;font-size:13px}
body{background-image:linear-gradient(45deg,#777 25%,transparent 25%),linear-gradient(-45deg,#777 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#777 75%),linear-gradient(-45deg,transparent 75%,#777 75%);background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0}
.page{width:900px;margin:15px auto;background:#eee;border:2px solid #222;box-shadow:3px 3px 0 #111}
header{padding:10px 14px 5px;background:#111;border-bottom:3px solid #f1c84b;text-align:center}
.logo{width:899px;max-width:100%;height:auto;display:block;margin:auto}
.tagline{color:#f5d76e;font-size:12px;font-weight:bold;margin-top:3px}
nav{background:#c8c8c8;border-bottom:2px solid #777;padding:6px;text-align:center}
nav a{display:inline-block;min-width:95px;margin:0 2px;padding:7px 12px;color:#111;text-decoration:none;font-weight:bold;border:2px outset #eee;background:#d9d9d9}
nav a:hover{background:#fff}
.content{display:grid;grid-template-columns:1fr 205px;gap:10px;padding:10px;background:#f4f4f4}
.box,.side-box{margin-bottom:10px;border:1px solid #555;background:#fff}
.box-title,.side-title{padding:5px 7px;color:#fff;font-weight:bold;border-bottom:2px solid #222;background:linear-gradient(#f4d568,#b27b13);text-shadow:1px 1px #5d3a00}
.box-body{padding:10px;line-height:1.5}
.side-box{background:#eaeaea}
.side-box a{display:block;padding:7px;border-bottom:1px solid #bbb;color:#003399;text-decoration:none;font-weight:bold}
.side-box a:hover{background:#fff;text-decoration:underline}
.side-box p{margin:8px}
table{width:100%;border-collapse:collapse;font-size:12px}
th{color:#fff;background:#444;padding:6px;text-align:left}
td{padding:6px;border:1px solid #bbb;background:#f7f7f7;vertical-align:middle}
tr:nth-child(even) td{background:#e9e9e9}
a{color:#003399}a:visited{color:#551a8b}a:hover{color:#f00}
input,textarea{font-family:"Comic Sans MS","Comic Sans",cursive;font-size:13px;border:2px inset #aaa;padding:4px;width:95%;box-sizing:border-box}
textarea{height:90px}.field{margin-bottom:10px}
button{font-family:"Comic Sans MS","Comic Sans",cursive;font-weight:bold;padding:6px 14px;border:2px outset #eee;background:#d9d9d9}
button:active{border-style:inset}
video{width:100%;background:#000}
.notice{padding:7px;margin-bottom:10px;background:#fff8c6;border:1px solid #aa8b00}
.counter{width:100px;margin:10px auto;padding:4px;background:#111;color:#0f0;border:2px inset #aaa;font-family:"Courier New",monospace;text-align:center}
.thumb{width:256px;height:144px;object-fit:cover;background:#111;border:1px solid #555}
footer{padding:10px;color:#ddd;background:#222;border-top:3px solid #f1c84b;text-align:center;font-size:11px}
@media(max-width:920px){.page{width:auto;margin:8px}.content{grid-template-columns:1fr}}

/* clickable category logos */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 18px;
}
.category-logo-link {
  display: block;
  width: 150px;
  height: 90px;
  padding: 5px;
  border: 1px solid #888;
  background: #fff;
  text-align: center;
}
.category-logo-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.category-logo-link:hover {
  border: 2px solid #333;
}

.category-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:center}.category-logo-link{display:block;width:150px;height:90px;padding:6px;border:1px solid #aaa;background:#fff;text-align:center}.category-logo-link img{width:100%;height:100%;object-fit:contain}.category-logo-link:hover{border-color:#555}

.logo-only-categories {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:18px;
  padding:24px;
}
.logo-only-categories a {
  display:block;
  width:180px;
  height:110px;
  text-align:center;
}
.logo-only-categories img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.home-clean{width:100%}
.logo-only-categories{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:18px 0}
.logo-only-categories a{display:block;width:150px;height:90px;padding:5px;border:1px solid #aaa;background:#fff;text-align:center}
.logo-only-categories img{width:100%;height:100%;object-fit:contain;display:block}
.logo-only-categories a:hover{border-color:#555}
.new-encodes-box{margin-top:6px}

.category-section { margin-bottom: 12px; }
.category-section .box-body { min-height: 60px; }


/* wide-screen layout fixes */
.page{width:calc(100% - 30px);max-width:1280px;margin:15px auto;}
.logo{width:auto;max-width:100%;height:auto;}
.content{width:100%;box-sizing:border-box;}
.admin-main{display:block;width:100%;box-sizing:border-box;}
.admin-main>.box{width:100%;box-sizing:border-box;}
select{font-family:"Comic Sans MS","Comic Sans",cursive;font-size:13px;border:2px inset #aaa;padding:4px;max-width:100%;box-sizing:border-box;}
pre{white-space:pre-wrap;overflow-wrap:anywhere;}
@media(min-width:1400px){.page{max-width:1400px;}}
@media(max-width:700px){.page{width:calc(100% - 16px);margin:8px auto;}nav a{min-width:auto;padding:6px 8px}.content{grid-template-columns:1fr;}}