/* 1. RESET */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Verdana, Arial, sans‑serif;
  font-size: 13px;
  background-color: #fff;
}
h1,h2,h3,h4,h5,h6,p,ul,ol,li { margin: 0; padding: 0; }


/* 2. CONTAINERS */
.container-fluid, .container {
  width: 100%;
  max-width: 1170px;
  padding: 0 15px;
  margin: 0 auto;
}


/* 3. FLEX UTILITIES */
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.min-vh-100 { min-height: 100vh !important; }


/* 4. SPACING */
.mr-3 { margin-right: 1rem !important; }
.mt-auto { margin-top: auto !important; }
.w-100 { width: 100% !important; }


/* 5. COLORS & TYPOGRAPHY */
.bg-dark { background-color: #343a40 !important; }
.text-warning { color: #ffc107 !important; }
a, a:visited { color: #0096d2; text-decoration: none; }
a:hover       { text-decoration: underline; }

  /* keep .box links white even when visited */
  .box:link,
  .box:visited {
    color: #fff;
  }

.content-box h3 {
  color: #14507a !important;
}



/* 6. NAVBAR & DROPDOWN */
.navbar { background-color: #343a40; }
.nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
.nav-item { position: relative; margin-right: 1rem; }
.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #fff;
  font-size: 15px;
  text-decoration: none;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  margin: 0;
  padding: 0.5rem 0;
  min-width: max-content;
  padding: 0.5rem 0;
  background: #fff;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  list-style: none;
}
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}

/* dropdown‐item styling */
.dropdown-menu .dropdown-item {
  display: block;
  padding: 0.375rem 1.5rem;
  white-space: nowrap;
  color: #212529;
  text-decoration: none;
}

.dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa;
}

/* add the little down‑caret after any dropdown-toggle */
.nav-link.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.3em;
  vertical-align: 0.2em;
  content: "";
  border-top: 0.3em solid #fff;
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
}

/* on dark bg navbar make caret white */
.navbar .nav-link.dropdown-toggle::after {
  border-top-color: #fff;
}

/* wrap header + nav in a single bordered block */
.top-border-fixed {
  border-bottom: 8px solid #14507a;
}




/* ##. Background Layers */
.bg-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 1170px;
  z-index: 0;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
#bg1 {
  opacity: 1;
}




/* 7. CONTENT BOX */
.content-box {
  background: rgba(255,255,255,0.95);
  border: 3px solid rgba(124,177,40,0.7);
  padding: 20px 30px;
}


/* 8. FOOTER */
footer {
  margin-top: auto;
  width: 100%;
  background: rgba(20,80,122,0.8);
  color: #fff;
  padding: 15px 0;
  text-align: center;
  border-top: 7px solid #14507a;
}


/* 9. PAGE‐WRAPPER & MAIN */
body { display: flex; flex-direction: column; min-height: 100vh; }
.page-wrapper { flex: 1; display: flex; flex-direction: column; }
main { flex: 1; padding-bottom: 100px; } /* push footer */


/* 00#. MAIN CONTENT BOX HUG RIGHT AND SIZE TO CONTENT, NOT SCREEN */

/* define the missing flex‑start helper */
.align-items-start {
  align-items: flex-start !important;
}

/* or, if you’d rather not add a helper, you can pin the box itself: */
.content-box {
  align-self: flex-start;  /* stop it from stretching */
  margin-left: auto;       /* shove it to the right */
}



/* 00#. EXECUTIVE LEADERSHIP MAIN PAGE LAYOUT */
<style>
  .leadership {
    max-width: 700px;
    margin: 0 auto;
    background: rgba(255,255,255,0.8);
    padding: 20px;
  }
  .leadership h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
  }
  .leader {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
  }
  .leader:last-child {
    margin-bottom: 0;
  }
  .leader img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    margin-right: 1rem;
    flex-shrink: 0;
  }
  .leader .info p {
    margin: 0;
    line-height: 1.4;
  }
</style>



/* 00#. EXECUTIVE LEADERSHIP INDIVIDUAL BIOS PAGES LAYOUT */
.content-box {
  max-width: 700px;
  background: rgba(255,255,255,0.95);
  border: 3px solid rgba(124,177,40,0.7);
  padding: 20px 30px;
  margin: 0 auto;
}

.content-box .bio {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.content-box .bio img {
  flex: 0 0 300px;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.content-box .bio h2 {
  margin: 0;
  font-size: 2rem;
  color: #14507a;
}

.content-box .bio h3 {
  margin: 0.25em 0 1em;
  font-size: 1.25rem;
  color: #14507a;
}

.content-box .bio p {
  margin: 0 0 1em;
  line-height: 1.5;
  color: #333;
}

.content-box .bio {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* Constrain the size of image within BIO */
.content-box .bio img {
  flex: 0 0 300px;       /* always exactly 300px wide */
  max-width: 100%;       /* but never wider than its container */
  height: 300px;         /* force a square box */
  object-fit: cover;     /* crop/center the photo to fill that box */
  border-radius: 4px;    /* optional rounding */
}

/* make the text take all the remaining space */
.content-box .bio > div {
  flex: 1;
}






/* 00#. CUNIVERSE LOGIN BUTTON TOP RIGHT OF SCREEN */
/* Login button */
.oauthloginbutton {
  display: inline-block;
  width: auto;
  padding: 0 15px;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  background: #0096d2;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  text-align: center;
}

/* CUniverse Login Button text colours - All White */
.oauthloginbutton,
.oauthloginbutton:visited,
.oauthloginbutton:hover,
.oauthloginbutton:active {
  color: #fff;
  text-decoration: none;
}





/* 00#. Body rotating background on index.html */
.bg-layer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 1170px;
  z-index: -1;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

#bg1 {
  opacity: 1;
}