/* The outer frame with the repeating stone */
.stone-marquee {
    background-image: url('../images/stone.jpg'); /* Ensure this path is correct! */
    background-repeat: repeat;
    border: 3px outset #808080;
    padding: 10px;               /* This creates the 'thickness' of the stone border */
    max-width: 1200px;
    margin: 0 auto 20px auto;
}

.nav-torch {
    height: 80px;         /* Adjust this based on your GIF's actual size */
    width: auto;
    vertical-align: middle;
    /* Optional: filter: drop-shadow(0 0 5px orange); to make them 'glow' */
}

/* The table itself must be transparent to show the stone */
.nav-table {
    width: auto;            /* FIXED: No longer stretches to the edges */
    margin: 0 auto;         /* Keeps the button row centered */
    background-color: transparent !important;
    border: none;
    border-collapse: separate;
    border-spacing: 8px 0;  /* Space between buttons */
}

/* The individual cells must also be transparent */
.nav-table td {
    background-color: transparent !important;
    padding: 0;
}

/* The Grey Buttons */
.nav-button {
    display: block;
    background-color: #c0c0c0; 
    color: #000000 !important;
    text-decoration: none;
    font-family: "MS Sans Serif", Geneva, sans-serif;
    font-size: 11pt;
    font-weight: bold;
    text-align: center;
    padding: 3px 10px;
    border: 4px outset #ffffff;  
}

.nav-button:hover {
    background-color: #d0d0d0;
    color: #000080 !important; 
}

.nav-button:active {
    border: 4px inset #ffffff;
    padding: 4px 9px 2px 11px;
}