/* bootstrap 5 grid system: 
    xs < 576    
    sm >= 576    
    md >= 768    
    lg >= 992    
    xl >= 1200   
    xxl >= 1400 */

/*--------------------------------------------------------
CSS overview: 
  01. REBOOT
	01. CUSTOM OBJECTS
  02. GLOBAL
  03. OVERRIDE DEFAULT OBJECTS
	04. TOP HEADER
	05. FOOTER MENU
  06. BREADCRUMBS
  07. ABOUT PAGE
  08. ABOUT-US PAGE
  09. CONTACT-US PAGE
  10. NEWS PAGE
  11. RESPONSIVE DESIGN
--------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap');   

/*--------------------------------------------------------
			REBOOT 
--------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; font:inherit; }
html { color-scheme: dark light; }
body { min-height: 100vh; }
img, picture, svg, video { display: block; max-width: 100%; }

/*--------------------------------------------------------
			CUSTOM OBJECTS 
--------------------------------------------------------*/
:root {
    /* colors */
    --clr-light-100:  rgb(255,255,255);
    --clr-light-200:  rgb(220,220,220);
    --clr-light-300:  rgb(180,180,180);
    --clr-medium-400: rgb(160,160,160);
    --clr-medium-500: rgb(120,120,120);
    --clr-medium-600: rgb(100,100,100);
    --clr-dark-700:   rgb(80,80,80);
    --clr-dark-800:   rgb(45,50,65);
    --clr-dark-900:   rgb(36,40,49);
    --clr-heading:    #242831;
    --clr-icon:       #00B6FD;
    --clr-warning:    #B21E27;

    /* font families */
    --ff-h1: 'Open Sans', sans-serif;
    --ff-h2: 'Open Sans', sans-serif;
    --ff-h3: 'Open Sans', sans-serif;
    --ff-h4: 'Open Sans', sans-serif;
    --ff-h5: 'Open Sans', sans-serif;
    --ff-h6: 'Open Sans', sans-serif;
    --ff-p1: 'Roboto', sans-serif;
}

/*--------------------------------------------------------
			GLOBAL STUFF: add to customize special elements 
--------------------------------------------------------*/
/* font sizes */ 
.fs-xs { font-size: 0.8rem; }
.fs-sm { font-size: 0.9rem; }
.fs-md { font-size: 1.0rem; }
.fs-lg { font-size: 1.3rem; }

/* font colors */
.fc-light   { color: var(--clr-light-100); }
.fc-light2  { color: var(--clr-light-200); }
.fc-light3  { color: var(--clr-light-300); }
.fc-medium  { color: var(--clr-medium-600); }
.fc-dark    { color: var(--clr-dark-900); }

/* font weight */
.fw-light   { font-weight: 300;}
.fw-normal  { font-weight: 400;}
.fw-bold    { font-weight: 700;}

/* font families */
.ff-p { font-family: var(--ff-p1); }
.ff-h { font-family: var(--ff-h1); }

/* font styles */
.fs-italic { font-style: italic;}

/* background colors */
.bc-dark { background-color: #2D333F;}
.bc-dark2 { background-color: #242831;}
.bc-dark3 { background-color: #1C2128;}

/* borders */
.border-a1 { border: 1px solid #ccc;}
.border-a2 { border: 1px solid #aaa;}
.border-a3 { border: 1px solid #999;}
.border-a4 { border: 1px solid #555;}
.border-a5 { border: 1px solid #444;}

.border-tb5 { border-top: 1px solid #444; border-bottom: 1px solid #444;}

/* spacers */
.spacer-25 { height: 25px; }
.spacer-50 { height: 50px; }

/* dividers */
.divider-1 { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; }
.divider-2 { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; padding-top: 15px;}

/* remove text decoration on base links */
.nolinks { color: #B21E27; text-decoration: none !important;}
.nolinks:hover { color:#B21E27; }

/* height */
.min-height-50 { min-height: 50px; }
.min-height-100 { min-height: 100px; }
.min-height-150 { min-height: 150px; }
.min-height-200 { min-height: 200px; }

/* A blurred white shadow, shifted 1px right and 1px down */
.shadowed-text-1 { text-shadow: 1px 1px 3px #252525; }
.shadowed-text-2 { text-shadow: 1px 1px 5px #777777; }

/*--------------------------------------------------------
			OVERRIDE DEFAULT OBJECTS 
--------------------------------------------------------*/
body { font-family: var(--ff-p1); padding-top: 150px; background-color: #1C2128; }
h1, h2, h3, h4, h5, h6 { font-family:var(--ff-h1); color: var(--clr-heading); }
h5.card-title { font-family: var(--ff-h1); }
h5.card-text { font-family: var(--ff-p1); font-weight: 300; }
p.card-text { font-family: var(--ff-p1); font-weight: 300; font-size: 0.9rem;}
p { font-family: var(--ff-p1); font-weight: 300;}
b { font-weight: 700; }
em { font-style: italic; }
strong { font-weight: 700; }

/*--------------------------------------------------------
			TOP HEADER 
--------------------------------------------------------*/
/* search input */
.form-control-xs { height: calc(1.3em + .25rem + 2px); padding: .25rem .25rem; font-size: .775rem; line-height: 1.4; border: 1px solid #444; background-color: #242831; }

/* search button */
.form-btn-control-sm { height: calc(1.3em + .25rem + 2px); padding-top: .1em; padding-inline: .5em; font-size: .875rem; line-height: 1.4; border-radius: 0; }

/* google search box, could be others */
input::placeholder { color: #a5a5a5 !important; opacity: 1; }

/* logo and brand */
#brand { padding-left: 50px; color: var(--clr-light-100);  font-size: 1.0rem; }
#logo { height:60px;  margin-right: 5px; }
.brand { font-family: 'Open Sans', sans-serif; }

/* hamburger button for responsive site */
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus { color: #aaa; outline:none; box-shadow:none; }

/* nav links that work with a text shadow for bold effect */
nav .navbar-nav li { display: inline-block; margin-right: 10px; font-size: 0.7em; }
nav .navbar-nav li a { color: #c6c6c6; text-decoration: none; font: 0.9rem 'Roboto Condensed'; letter-spacing: 0.03em; }
nav .navbar-nav li a:hover { text-shadow: 0 0 .01px #ffffff, 0 0 .01px #ffffff, 0 0 .01px #ffffff; }
  
.dropdown-menu {
  white-space: nowrap;
}

/*--------------------------------------------------------
			FOOTER MENU
--------------------------------------------------------*/
#myFooter { background-color: var(--clr-dark-900); color:var(--clr-light-300 ); }
#myFooter .row { margin-bottom: 0px; padding-bottom: 15px; padding-top: 15px; }
#myFooter table { border:none; border-collapse: collapse; width: 100%; }
#myFooter td { border:none; border-collapse: collapse; }
#myFooter .info { text-align: left; border-right:none; }
#myFooter ul { list-style-type: none; padding-left: 0; line-height: 1.3rem; color:var(--clr-light-300); }

/* heading titles */
#myFooter h5 { font-size: 14px; color:var(--clr-light-100); margin-top: 30px; font-family: 'proxima-nova', sans-serif; font-weight: 700; }

/* useful links */
#myFooter a { text-decoration: none; color:var(--clr-light-300); }
#myFooter a:hover, #myFooter a:focus { text-decoration: none; color: var(--clr-light-100); }

/* hours of operation */
#myFooterLI { font-family: var(--ff-t1); font-weight:300; color:var(--clr-light-300); }

/*--------------------------------------------------------
			BOTTOM FOOTER
--------------------------------------------------------*/
#bottomHeader { color:var(--clr-medium-400 );  }

/*--------------------------------------------------------
			BREADCRUMB 
--------------------------------------------------------*/
#fa-last { color:var(--clr-light-100) !important; }
#fa-house { color:var(--clr-light-100) !important; }
.first {  margin-top: 3px;}
/* .first ol {  } */
.first a:hover { color:var(--clr-light-100) !important; font-weight:400; }
.active-1 { color:var(--clr-light-100) !important; }
.fa, i { color: rgb(0, 183, 255) !important; }
.breadcrumb>li+li:before { content: "" !important; }
.breadcrumb { padding: 0px; font-size: 14px; color: #f1f1f1 !important; letter-spacing: 0px; }
.breadcrumb-item a { text-decoration: none !important; color: #f1f1f1 !important; }
.breadcrumb-item a:focus,
.breadcrumb-item a:active { outline: none !important; box-shadow: none !important; }
.fa-caret-right { padding-left: 7px; font-size: 20px; vertical-align:middle; }
.fa-chevron-right { vertical-align:middle; color: #f1f1f1 !important; }
.breadcrumb-item+.breadcrumb-item::before { padding-right: 0px; float:none;}

/*--------------------------------------------------------
			ABOUT PAGE 
--------------------------------------------------------*/
/* Links on the about page */
.card-body a:link { color:var(--clr-light-100); text-decoration:none;}
.card-body a:visited, a:hover { color:var(--clr-light-100); font-weight: 700; }
.card-body a:active, a:focus { text-decoration:none;}

/*--------------------------------------------------------
			BOOTSTRAP CARDS 
--------------------------------------------------------*/
h6.card-title { font-family: var(--ff-h1); font-weight: 400; }
h6.card-text { font-family: var(--ff-p1); }
p.card-text { font-family: var(--ff-p1); color: var(--clr-light-300); }
.card img:hover { opacity: 0.75; }
.card-footer a:link { color:var(--clr-light-300); text-decoration:none; }
.card-footer a:visited { color:var(--clr-light-300); font-weight: 300; }
.card-footer a:hover { color:var(--clr-light-100); font-weight: 300; }
.card-footer a:active, a:focus { text-decoration:none; }

/*--------------------------------------------------------
			VARIOUS CLASSES 
--------------------------------------------------------*/
.warning { color: var(--clr-warning); font-style: italic;}

/*--------------------------------------------------------
			CONTACT US PAGE 
--------------------------------------------------------*/
.form, .contact-success { padding: 5%; background-color: #1C2128; overflow: hidden; border: 1px solid #555555; }
.contact-success { padding: 20px; color: #fff; font-size:11px; }
.form ul { margin: 0; padding: 0; list-style-type: none; }
.form  li { position: relative; }
.form input, .form textarea { width: 85%; margin-bottom: 12px; position: relative; background-color: aliceblue; border: 1px solid #ccc; color: #3f3f3f; }
.form textarea { width: 96%; height: 150px; }
.form input.submit { width: 110px; background-color: #dcdcdc; border: 1px solid gray; }
.form  li p, .form input.submit { margin-bottom: 0; }
.form input.submit:hover { color: #252525; font-weight: 700; margin-bottom: 0; background-color: #cacaca; }
.form em { color:#aaaaaa; display: inline; font-size: 11px;  font-style: normal; font-weight: bold; }
.form .contact-error { color: #f96e5b; font-size: 11px; font-weight: bold; position: absolute; top: 0; right: 60px; }
.form button.submit { width: 110px; background-color: #dcdcdc; border: 1px solid gray; }
.contact-info { list-style-type: none; padding: 0; margin: 0; }

/*--------------------------------------------------------
			NEWS iITEMS
--------------------------------------------------------*/
.news-Pic { width: 100%; }
.news-Container { border: 1px solid var(--clr-light-300) !important; background-color: var(--clr-light-100) !important; }
.newsDate { font-size: 0.8rem; color: #777777; font-family: var(--ff-h2);}
#news-Container { border: 1px solid var(--clr-light-300) !important; background-color: var(--clr-light-100) !important; }

/*--------------------------------------------------------
			GENERAL ITEMS
--------------------------------------------------------*/
.boxHeading { background-color: AliceBlue !important; border: 1px solid rgb(200,200,200); padding: 5px 0 5px 5px; font-family: var(--ff-h1); }
.boxHeadingChild { padding: 5px 0 5px 0px; }

/* table padding */
#oralHistoryTD { width: 100px; font-family:'Roboto Mono', Courier, monospace; font-weight: 400;}
#oralHistoryFilename { font-family:'Roboto Mono', Courier, monospace; font-weight: 400; }
.table-sm>:not(caption)>*>* { padding: 0 5px; font-size: .8rem;}
.boardMinutesTD { width: 100px; font-family:'Roboto Mono', Courier, monospace; font-weight: 400;}
.boardMinutesFilename { font-family:'Roboto Mono', Courier, monospace; font-weight: 400; }

/*--------------------------------------------------------
			RESPONSIVE MODE 
--------------------------------------------------------*/

/* When the screen is 100px wide or higher */
@media screen and (min-width: 100px) {
  body { padding-top: 115px; }
  #myFooter .info { text-align: left; color: #afb0b1; border-right:none; line-height: 1.1rem; }
  #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem;}
  .first {  margin-top: 35px;}
  .first a:hover { color:var(--clr-light-100) !important; font-weight:400; }
}

/* When the screen is 250px wide or higher */
@media screen and (min-width: 300px) {
  body { padding-top: 115px; }
  #myFooter { text-align: center; }
  #myFooter .info { text-align: center; color: #afb0b1; border-right:none; line-height: 1.1rem; }
  #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem;}
  .first {  margin-top: 35px;}
  .first a:hover { color:var(--clr-light-100) !important; font-weight:400; }
}

/* min width of 345px */
@media screen and (min-width: 345px) { 
  body { padding-top: 115px; }   
  #myFooter .info { text-align: center; color: #afb0b1; border-right:none; line-height: 1.1rem; }
  #myFooter { text-align: center; }
  #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem;}
  .first {  margin-top: 35px;}
  .first a:hover { color:var(--clr-light-100) !important; font-weight:400; }
 }

/* min width of 410px */
@media screen and (min-width: 410px) { 
  body { padding-top: 115px; }   
  #myFooter { text-align: center; }
  #myFooter .info { text-align: center; color: #afb0b1; border-right:1 px solid #555; line-height: 1.1rem; }
  #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem;}
  .first {  margin-top: 20px;}
  .first a:hover { color:var(--clr-light-100) !important; font-weight:400; }
 }

 /* min width of 575px */
@media screen and (min-width: 575px) { 
  .search-container { margin-top: 15px; }   
  #myFooter { text-align: center; }
  #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem;}
  .first {  margin-top: 20px;}
  .first a:hover { color:var(--clr-light-100) !important; font-weight:400; }
  #myFooter .hours { text-align: left; border-right: 1px solid #555;}
  #myFooter .contact {text-align: left; border-right: 1px solid #555;}
  #myFooter .useful-links {text-align: left; }
  #myFooter .info { text-align: left; border-right:none; }
}

 /* min width of 720px */
 @media screen and (min-width: 700px) { 
  .search-container { margin-top: 10px; }   
  #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem;}
  .first {  margin-top: 20px;}
  .first a:hover { color:var(--clr-light-100) !important; font-weight:400; }
  #myFooter .hours { text-align: left; border-right: 1px solid #555;}
  #myFooter .contact {text-align: left; border-right: 1px solid #555;}
  #myFooter .useful-links {text-align: left; }
  #myFooter .info { text-align: left; border-right:none; }
}

/* min width of 768px */
@media screen and (min-width: 768px) {
  #myFooter .col .col-12 .col-sm-6 .col-md-3 { border-right: 1px solid #555; text-align:left; }
  #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem;}
  .first {  margin-top: 20px;}
  .first a:hover { color:var(--clr-light-100) !important; font-weight:400; }
  #myFooter .hours { text-align: left; border-right: 1px solid #555;}
  #myFooter .contact {text-align: left; border-right: 1px solid #555;}
  #myFooter .useful-links {text-align: left; border-right: 1px solid #555;}
  #myFooter .info { text-align: left; border-right:none; }
}

/* When the screen is 992px wide or higher */
@media screen and (min-width: 992px) { 
  body { padding-top: 115px; }   
  .first {  margin-top: 20px;}
  .first a:hover { color:var(--clr-light-100) !important; font-weight:400; }
  #myFooter .info { text-align: left; border-right:none; }
  #myFooter .col .col-12 .col-sm-6 .col-md-3 { border-right: 1px solid #555; text-align:left; }
  #myFooter .hours { text-align: left; border-right: 1px solid #555;}
  #myFooter .contact {text-align: left; border-right: 1px solid #555;}
  #myFooter .useful-links {text-align: left; border-right: 1px solid #555;}
}

/* When the screen is 1200px wide or higher 
@media (min-width: 1200px) {
}*/


/* max width of 767px */
/*@media screen and (max-width: 767px) {
  #myFooter { text-align: center; }
  #myFooter .col-sm-3 { display: block; width: 100%; }
  #myFooterLI { font-family:'Roboto Mono', Courier, monospace; font-weight:300; line-height:1.1rem; }
  #myFooter .info { text-align: center; display: block; width: 100%; }
  .first {  margin-top: 10px;}
  .first a:hover { color:var(--clr-light-100) !important; font-weight:400; }

}
  */