<style>
  /* ============ OUTER TABLE ============ */
  .div-table {
    display: grid;
    width: var(--table-width, 100%);
    background: var(--table-bg, none);
    border: 1px solid #ccc;
    gap: var(--gap, 0);
  }

  /* Column definitions - use with class */
  .cols-2 { grid-template-columns: repeat(2, auto); }
  .cols-3 { grid-template-columns: repeat(3, auto); }
  .cols-4 { grid-template-columns: repeat(4, auto); }
  .cols-5 { grid-template-columns: repeat(5, auto); }

  /* Fixed width columns */
  .cols-2-fixed-first { grid-template-columns: var(--col1-width, 150px) auto; }
  .cols-3-fixed-first { grid-template-columns: var(--col1-width, 150px) auto auto; }
  .cols-3-fixed-mixed { grid-template-columns: var(--col1, auto) var(--col2, 100px) var(--col3, auto); }

  /* Custom column patterns */
  .pattern-label-value { grid-template-columns: var(--label-width, 120px) 1fr; }
  .pattern-checkbox-data { grid-template-columns: 40px 1fr; }
  .pattern-header-data { grid-template-columns: auto 1fr 1fr; }

  /* ============ TH & TD STYLES ============ */
  .th, .td {
    padding: var(--cell-padding, 8px);
    border-bottom: var(--border-bottom, 1px solid #eee);
  }

  .th {
    font-weight: bold;
    background: var(--th-bg, #f5f5f5);
    text-align: var(--th-align, left);
  }

  .td {
    font-weight: normal;
    background: var(--td-bg, transparent);
  }

  /* ============ COLSPAN ============ */
  .colspan-2 { grid-column: span 2; }
  .colspan-3 { grid-column: span 3; }
  .colspan-4 { grid-column: span 4; }
  .colspan-5 { grid-column: span 5; }
  .colspan-all { grid-column: 1 / -1; }  /* Spans all columns */

  /* ============ WIDTH CONTROLS ============ */
  /* Individual cell widths */
  .w-50 { width: 50px; }
  .w-100 { width: 100px; }
  .w-150 { width: 150px; }
  .w-200 { width: 200px; }
  .w-250 { width: 250px; }
  .w-300 { width: 300px; }

  /* Min/Max widths */
  .max-100 { max-width: 100px; }
  .max-150 { max-width: 150px; }
  .max-200 { max-width: 200px; }
  .min-50 { min-width: 50px; }
  .min-100 { min-width: 100px; }

  /* Text overflow handling */
  .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .wrap {
    word-wrap: break-word;
    white-space: normal;
  }

  /* ============ NESTED TABLES ============ */
  .nested-table {
    display: grid;
    grid-template-columns: subgrid;  /* Inherits parent columns */
    gap: 0;
  }

  .nested-container {
    padding: 0;
    margin: 0;
  }
.backimage {
   background-image: url('/images/vellum-light.png');
   background-repeat: no-repeat; /* Prevents the image from tiling */
   background-attachment: fixed; /* Keeps image in place while scrolling */
   background-size: cover; /* Scales image to cover the entire page */
   background-position: center; /* Centers the image */
 }
.menuback{
   float:center;
 }  

/* Width Classes - Forced to respect your limits */
.img800 { max-width: 800px !important; width: 100% !important; }
.img700 { max-width: 700px !important; width: 100% !important; }
.img600 { max-width: 600px !important; width: 100% !important; }
.img500 { max-width: 500px !important; width: 100% !important; }
.img400 { max-width: 400px !important; width: 100% !important; }
.img300 { max-width: 300px !important; width: 100% !important; }
.img200 { max-width: 200px !important; width: 100% !important; }

/* Global reset for all these classes */
.img800, .img700, .img600, .img500, .img400, .img300, .img200 {
    box-sizing: border-box !important;
    height: auto !important;
    margin-bottom: 10px;
}

/* Alignment Classes - Forced to work with the CMS */
.imgleft { 
    float: left !important; 
    margin-right: 15px !important; 
    margin-bottom: 10px !important; 
}

.imgright { 
    float: right !important; 
    margin-left: 15px !important; 
    margin-bottom: 10px !important; 
}

.imgcenter { 
    display: block !important; 
    margin-left: auto !important; 
    margin-right: auto !important; 
    text-align: center;
}.content-gate *, .content-gate *::before, .content-gate *::after {
    box-sizing: border-box;
}
/* 3. The "Saxon Master" Fix */
.content-gate img {
    max-width: 100% !important; /* Forces the 1300px image to shrink */
    height: auto !important;
}

/* 4. Clearing the Floats */
/* Add this to the end of your content-gate or after any floated image 
   to prevent the footer from wrapping around the image */
.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
/* Force those legacy tables to stay inside the vellum */
.content-gate table {
    max-width: 100% !important;
    width: 100% !important;
    table-layout: fixed !important;
}
.saxon-wrapper {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-content: left;
    margin: 0 auto;
    min-height: 100vh;
    float:left;
}
.backimage-stretched {
    background-image: url('/images/vellum-light.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center top;
    background-color: white;
    min-height: 100vh;
    padding: 0 10px;
}
</style>
