/* ============================================
WONDERCRAFT ENTERPRISES — 90s SITE STYLE
Drop this file in as style-90s.css and link it
in the of any page:
...
*/
.page {
max-width: 780px;
margin: 14px auto;
background: #ffffff;
border: 2px solid #1a1a1a;
box-shadow: 4px 4px 0 #888;
}
/* Top banner — wrap your logo/title in ...
*/
.banner {
background: linear-gradient(180deg, #2a0a0a 0%, #150404 100%);
padding: 14px 16px;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 4px solid #c02828;
}
.banner img {
height: 82px;
background: #f4f1e6;
padding: 4px;
border: 2px outset #ccc;
}
.banner-text h1 {
color: #ffffff;
font-size: 26px;
margin: 0;
text-shadow: 2px 2px 2px #000;
font-family: 'Arial Black', Arial, sans-serif;
letter-spacing: 1px;
}
.banner-text .sub {
color: #ffd700;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
letter-spacing: 1px;
margin-top: 4px;
}
/* Scrolling marquee ticker strip */
.marquee-strip {
background: #000000;
color: #00ff00;
font-family: 'Courier New', monospace;
font-size: 13px;
padding: 4px 10px;
overflow: hidden;
white-space: nowrap;
}
.marquee-strip span {
display: inline-block;
padding-left: 100%;
animation: scrollleft 20s linear infinite;
}
@keyframes scrollleft {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
/* Nav bar with beveled buttons */
.navbar {
background: #d4d0c8;
padding: 8px;
display: flex;
gap: 6px;
flex-wrap: wrap;
border-bottom: 2px solid #808080;
}
.navbtn {
background: #d4d0c8;
border: 2px outset #fff;
padding: 6px 14px;
font-family: Verdana, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
color: #7a0000;
text-decoration: none;
}
.navbtn:hover { border-style: inset; }
.navbtn.active { border-style: inset; background: #c4c0b8; }
/* Sidebar + main content layout */
.content { display: flex; }
.sidebar {
width: 190px;
background: #ece7d8;
border-right: 2px solid #808080;
padding: 14px 12px;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
}
.sidebar h3 {
background: #2a0a0a;
color: #fff;
font-size: 11px;
padding: 4px 6px;
margin: 0 0 8px 0;
}
.sidebar ul { list-style: none; padding: 0; margin: 0 0 20px 0; }
.sidebar li { margin-bottom: 6px; }
.sidebar li:before { content: "\25B8 "; color: #c02828; }
.counter-box {
background: #000; color: #0f0; font-family: 'Courier New', monospace;
font-size: 16px; text-align: center; padding: 6px; letter-spacing: 3px;
border: 2px inset #666; margin-top: 10px;
}
.counter-label {
font-family: Verdana, sans-serif; font-size: 9px; text-align: center;
color: #444; margin-top: 3px;
}
.main { flex: 1; padding: 20px 24px; }
.main h2 {
color: #2a0a0a; font-size: 20px; border-bottom: 2px solid #c02828; padding-bottom: 4px;
}
.main p { font-size: 14px; line-height: 1.6; }
.divider-img {
height: 6px;
background: repeating-linear-gradient(90deg, #c02828 0 10px, #2a0a0a 10px 20px);
margin: 18px 0;
}
/* Blinking / highlighted badge */
.blink-badge {
background: #ffff00;
border: 2px solid #c02828;
color: #c02828;
font-weight: bold;
text-align: center;
padding: 6px 4px;
font-family: Verdana, sans-serif;
font-size: 11px;
margin-bottom: 16px;
}
.new-tag {
background: red; color: yellow; font-weight: bold; font-size: 10px;
padding: 1px 4px; margin-left: 6px; font-family: Verdana, sans-serif;
}
.under-construction {
background: #ffff99;
border: 2px dashed #000;
padding: 10px;
font-family: Verdana, sans-serif;
font-size: 12px;
text-align: center;
margin: 20px 0;
}
/* Generic data table */
table.info-table {
width: 100%;
border-collapse: collapse;
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
margin: 14px 0;
}
table.info-table td, table.info-table th {
border: 1px solid #808080;
padding: 6px 8px;
text-align: left;
}
table.info-table th {
background: #2a0a0a;
color: #fff;
}
table.info-table tr:nth-child(even) { background: #ece7d8; }
/* Footer */
.footbar {
background: #2a0a0a; color: #ccc; font-family: Verdana, Arial, sans-serif;
font-size: 10px; text-align: center; padding: 10px;
}
.badges { display: flex; justify-content: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.badge {
background: #000; color: #fff; border: 1px solid #fff; font-size: 9px;
padding: 4px 8px; font-family: Verdana, sans-serif;
}
@media (max-width: 700px) {
.content { flex-direction: column; }
.sidebar { width: auto; border-right: none; border-bottom: 2px solid #808080; }
}