/* Custom Font Definition */
@font-face {
    font-family: 'Web437_Wang_Pro_Mono';
    src: url('/fonts/Web437_Wang_Pro_Mono.woff') format('woff');
    font-style: normal;
    font-weight: normal;
}

body {
    background-color: #1a1a1a; /* Fallback dark background */
    background-image: url('/images/bg.gif'); /* Adding the tiled background image */
    background-repeat: repeat; /* Repeat/tile the background */
    color: #cccccc; /* Muted grey text */
    font-family: 'Web437_Wang_Pro_Mono', monospace; /* Use the custom retro font */
    margin: 0;
    padding: 0;
    font-size: 14px; /* Small, retro-styled text */
}


/* Container to limit layout width */
.container {
    width: 1080px; /* Fixed width of layout */
    margin: 0 auto; /* Centers the container horizontally */
    padding: 10px;
}

/* General styling */
h1 {
    color: #999999; /* Faded grey for title */
    font-weight: bold;
    letter-spacing: 1px;
    border-bottom: 1px solid #444444;
    text-align: left; /* Left-aligned header */
    padding-bottom: 5px;
}

a {
    color: #8888ff; /* Soft blue for links */
    text-decoration: none;
}

a:hover {
    color: #dddd88; /* Muted yellow hover effect */
}

table {
    width: 100%; /* Ensures layout takes full width of the 1080px container */
    border-spacing: 10px;
    table-layout: fixed; /* Equal column widths */
}

td {
    vertical-align: top;
}

.menu {
    text-align: left; /* Left-justified menu */
    background-color: #2a2a2a; /* Dark grey background for the menu */
    padding: 10px;
    border: 1px solid #444444;
    margin-bottom: 20px;
}

.menu a {
    margin: 0 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.content {
    background-color: #222222;
    border: 1px solid #444444;
    padding: 15px;
    text-align: left; /* Left-align content inside the box */
    box-shadow: 2px 2px 5px #000000; /* Subtle shadow for depth */
}

.sidebar {
    background-color: #2a2a2a; /* Darker grey for sidebars */
    border: 1px solid #444444;
    padding: 10px;
    box-shadow: 2px 2px 3px #000000;
    font-size: 13px; /* Slightly smaller font for sidebar */
    text-align: left; /* Left-align sidebar content */
}

.sidebar h3 {
    color: #bbbbbb;
    font-size: 16px;
    border-bottom: 1px solid #444444;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

footer {
    margin-top: 20px;
    padding: 10px 0;
    font-size: 12px;
    color: #666666; /* Muted grey */
    text-align: left; /* Left-align footer */
    border-top: 1px solid #444444;
    background-color: #2a2a2a; /* Matches the sidebar/menu background */
}

footer {
    margin-top: 20px;
    padding: 10px 0;
    font-size: 12px;
    color: #666666; /* Muted grey */
    text-align: center; /* Center-align footer */
    border-top: 1px solid #444444;
    background-color: #2a2a2a; /* Matches the sidebar/menu background */

    /* Ensure footer aligns with the container */
    width: 1080px;
    margin: 20px auto 0; /* Center horizontally */
}

footer a:hover {
    color: #ffff99;
}