body {
   margin               : 0px;
   padding              : 0px;
   background-color     : #BFC5CB;   /* darker outer frame */
   font-family          : calibri, verdana, arial, comic sans;
   min-width            : 760px;
   color                : #2b2b2b;
}

h1 {
   font-size            : 25pt;
}

a img { border: 0; }

a.tip { text-decoration: none; }
a.tip:hover { position: relative; }
a.tip span { display: none }

a.tip:hover span {
   background           : #2b2b2b;
   opacity              : 0.9;
   border               : none;
   border-radius        : 5px;
   font-family          : calibri, verdana, arial, comic sans;
   font-size            : 12pt;
   color                : #ffffff;
   padding              : 6px;
   margin               : 10px;
   display              : block;
   z-index              : 50; 
   position             : absolute;
   top                  : 10px;
}

#top {
   height               : 115px;
   background-color     : #C9CED4;   /* darker header */
   width                : 100%;
   background-image     : url('../img/dvc.jpg');
   background-repeat    : no-repeat;
   background-position  : 98.5%;
   position             : absolute;
   left                 : 0px;
   top                  : 0px;  
   min-width            : 760px;   
}

#menu {
   margin-top           : 5px;
   height               : 34px;
   float                : left;
}

#menu {
   margin-top : 4px;
   margin-bottom: 4px;
}


#menubar {
   height               : 40px;
   width                : 100%;
   background-color     : #D6B765;   /* darker gold */
   position             : absolute;   
   left                 : 0px;
   top                  : 115px;
   min-width            : 760px;      
}

#content {
   width                : 100%;
   position             : absolute;
   left                 : 0px;
   top                  : 175px;
   background-color     : #C2C9D0 /* key change — removes white feel */
}

.menulink {
   font-size            : 14pt;
   text-decoration      : none;
   white-space          : nowrap;
   border               : 1px #383838 solid;
   padding              : 3px 10px;
   margin-left          : 10px;
   background-color     : #EAD8A3;
   color                : #2b2b2b;
}

.menulinkactive {
   font-size            : 14pt;
   text-decoration      : none;
   white-space          : nowrap;
   border               : 1px #383838 solid;
   padding              : 3px 10px;
   margin-left          : 10px;
   background-color     : #9FBFD8;
   color                : #2b2b2b;
}

.pl {
   font-size            : 12pt;
   text-decoration      : none;
   color                : #2b2b2b;
}
  
.listingtable {
   margin-top           : 10px;
   border               : 1px #B8C4C2 solid;
   font-size            : 12pt;
   background-color     : #DCE2E8;   /* darker tables */
}
  
.listingtable th {
   height               : 35px;
   text-align           : center;
   background-color     : #C8D1D9;
   background-image     : linear-gradient(to bottom, #BFC9D2 0%, #D5DDE4 80%);
}

.listingtable td {
   padding-left         : 5px;
   background-color     : #E7ECF1;   /* gives rows definition */
}

.listinglink {
   font-size            : 12pt;
   text-decoration      : underline;
   color                : #3E6FA8;
}

.error {
   font-size         : 12pt;
   text-decoration   : none;
   font-weight       : bold;
   color             : #A40018;
   background-color  : #FFFFFF;
   width             : 90%;
   padding           : 15px;
   margin            : 5px;
}

.FilterField {
   font-size         : 10pt;
   text-decoration   : none;
   color             : #000000;
   background-color  : #FFFFFF;
   width             : 150px;
   height            : 20px;
   padding-left      : 5px;
   padding-top       : 3px;
   border            : 1px #7FA2BF solid;
}

.FilterSubmit {
   font-size         : 10pt;
   text-decoration   : none;
   color             : #000000;
   background-color  : #FFFFFF;
   height            : 26px;
   width             : 60px;
   padding-left      : 5px;
   padding-top       : 3px;
   border            : 1px #7FA2BF solid;
}

.smalllink {
   font-size         : 12pt;
   text-decoration   : none;
   color             : #2A377C;
}



/* --- Menubar: replace yellow with a muted slate/blue-grey --- */#menubar {
   width                : 100%;
   background-color     : #9EA9B4;
   border-bottom        : 1px solid #7F8891;
   position             : absolute;   
   left                 : 0px;
   top                  : 115px;
   min-width            : 760px;

   padding              : 6px 0;   /* gives breathing room */
   height               : auto;    /* KEY FIX */
}


/* --- Rounded “popout” buttons --- */
.menulink,
.menulinkactive {
   border-radius: 14px;
   padding: 6px 14px;
   border: 1px solid #3a3a3a;
   display: inline-block;          /* makes padding/rounding behave nicely */
   box-shadow: 0 2px 0 rgba(0,0,0,0.25);
   transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.12s ease;
}

/* normal button */
.menulink {
   background-color: #D7DEE6;      /* calm light slate */
   color: #1f1f1f;
}

/* active button */
.menulinkactive {
   background-color: #8FB4CF;      /* muted blue */
   color: #0f0f0f;
}

/* hover “lift” */
.menulink:hover,
.menulinkactive:hover {
   transform: translateY(-1px);
   box-shadow: 0 3px 0 rgba(0,0,0,0.28);
}

/* click “press” */
.menulink:active,
.menulinkactive:active {
   transform: translateY(1px);
   box-shadow: 0 1px 0 rgba(0,0,0,0.22);
}


/* --- Header text styling --- */

.site-title {
   font-size: 34px;
   font-weight: 600;
   letter-spacing: 1px;
   color: #1f2a34;              /* dark modern tone */
   padding: 18px 20px 0 20px;
   font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.site-sub {
   font-size: 13px;
   color: #3a4650;
   padding: 4px 22px 12px 22px;
   font-family: "Segoe UI", "Roboto", Arial, sans-serif;
}

/* =========================
   Header text (replaces header.jpg)
   Put this at the END of layout.css
   ========================= */

#top {
   background-image: none !important;   /* IMPORTANT: remove old jpg background */
   background-color: #C9CED4 !important;
}

/* If #top is too tight, this helps the new text breathe */
#top { 
   padding: 0 !important;
}

/* New header text */
.site-title {
   font-family: "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif !important;
   font-size: 34px !important;
   font-weight: 700 !important;
   letter-spacing: 1px !important;
   color: #1f2a34 !important;
   padding: 18px 20px 0 20px !important;
   margin: 0 !important;
}

.site-sub {
   font-family: "Segoe UI", "Roboto", Arial, sans-serif !important;
   font-size: 13px !important;
   color: #35424c !important;
   padding: 6px 22px 12px 22px !important;
   margin: 0 !important;
}

/* Optional: uptime stands out a touch */
#suptime {
   font-weight: 700;
}

/* =========================
   Menubar + rounded popout buttons
   ========================= */

#menubar {
   background-color: #9EA9B4 !important;  /* no more yellow */
   border-bottom: 1px solid #7F8891 !important;
   height: auto !important;              /* bar grows with buttons */
   padding: 6px 0 !important;
}

#menu {
   margin-top: 4px !important;
   margin-bottom: 4px !important;
}

/* Rounded “popout” buttons */
.menulink,
.menulinkactive {
   border-radius: 14px !important;
   padding: 6px 14px !important;
   display: inline-block !important;
   border: 1px solid #3a3a3a !important;
   box-shadow: 0 2px 0 rgba(0,0,0,0.25) !important;
   transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.12s ease;
}

.menulink {
   background-color: #D7DEE6 !important;
   color: #1f1f1f !important;
}

.menulinkactive {
   background-color: #8FB4CF !important;
   color: #0f0f0f !important;
}

.menulink:hover,
.menulinkactive:hover {
   transform: translateY(-1px);
   box-shadow: 0 3px 0 rgba(0,0,0,0.28) !important;
}

.menulink:active,
.menulinkactive:active {
   transform: translateY(1px);
   box-shadow: 0 1px 0 rgba(0,0,0,0.22) !important;
}

/* =========================
   Footer – darker base style
   ========================= */

#footer {
   width: 100%;
   background-color: #6F7A86;        /* darker than header */
   border-top: 2px solid #4E5863;    /* separation from page */
   margin-top: 60px;
   font-family: "Segoe UI", Roboto, Arial, sans-serif;
}

.footer-inner {
   max-width: 1200px;
   margin: 0 auto;
   padding: 14px 22px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 12px;
   color: #EEF2F6;                   /* light text */
}

.footer-left {
   font-weight: 600;
   letter-spacing: 0.5px;
}

.footer-centre {
   opacity: 0.85;
}

.footer-right a {
   color: #FFFFFF;
   text-decoration: none;
}

.footer-right a:hover {
   text-decoration: underline;
}

/* =========================
   Top-right logo
   ========================= */

#top {
   position: relative; /* ensures logo positions inside header */
}

.site-logo {
   position: absolute;
   right: 18px;
   top: 12px;
   height: 98px;        /* adjust to suit */
   width: auto;
   opacity: 0.95;
}

.site-logo:hover {
   opacity: 1;
}