/* ======                                 ====== */
/* ======       BASIC TEXT STYLING        ====== */
/* ======                                 ====== */


/* ====== POSITIONING ====== */
.centertext {
  text-align: center;
}
.textcenter {
  text-align: center;
}
.textright {
  text-align: right;
}
.nomargin, h1.nomargin, ol.nomargin, ul.nomargin, p.nomargin {
  margin:0 !important;
}


/* ====== FONT SIZE ====== */
.tinytext {
  font-size: .8em;
}
.bigtext {
  font-size: 110%;
}
.biggertext {
  font-size: 150%;
}
.tightlines {
  line-height: 100%;
}


/* ====== FONT STYLING ====== */
.textbold {
  font-weight: bold;
}
.textitalic {
  font-style: italic;
}
.textunderline {
  text-decoration: underline;
}
a.nounderline {
  text-decoration: none;
  border-bottom:0;
}
.textred, a.textred {
  color: #bd0038;
}


/* = MAKE LIST BULLETS AND NUMBERS APPEAR PROPERLY TO RIGHT OF LEFT FLOATS = */
/* = FYI: This does not work: ul, ol {overflow: hidden;} must be as below == */
ul.divwrap {
  list-style: outside;
  margin-left: -1em;
}
ul.divwrap > li {
  position: relative;
  left: 1em;
}




/* ======                                 ====== */
/* ======  IMAGE AND CAPTIONS FORMATTING  ====== */ 
/* ======                                 ====== */
.imagecaptionwrapperouter {
   display: table;
   padding: 10px;
   background:#F3F3F3;
   border: 1px solid #CCC;
   border-radius: 5px;
   clear: both;
   max-width: 100%;
}

.imagecaptionwrapperinner {
   display: table;
   font-size:.85em;
   line-height: 1.2em;
   clear: both;
}

.imagecaptionwrapperinner img, picture {
   display: block;
}

.imagecaptionwrapperinner picture img {
   width: 100%;
}




/* ====== PAGE CONTENTS ACCORDION COLOR STYLING ====== */
/* ============== GREEN COLOR SCHEME ================= */
.accordion-green div.ckeditor-accordion-container dl.styled dt a.ckeditor-accordion-toggler {
	background-color: #486856;
}
.accordion-green div.ckeditor-accordion-container dl.styled dt.active a.ckeditor-accordion-toggler {
	background-color: #3a4c40;
}
/* =============== BLUE COLOR SCHEME ================= */
.accordion-blue div.ckeditor-accordion-container dl.styled dt a.ckeditor-accordion-toggler {
	background-color: #1f2937;
  border-bottom: 1px solid #464e5b;
}
.accordion-blue div.ckeditor-accordion-container dl.styled dt.active a.ckeditor-accordion-toggler {
	background-color: #464e5b;
}
.accordion-blue div.ckeditor-accordion-container dl.styled {
  border: 1px solid #464e5b;
}




/* ======                                 ====== */
/* ======    FORCE-STYLING EDGE CASES     ====== */
/* ======                                 ====== */
.backgroundinherit div, div.backgroundinherit {
  background:inherit !important;
  border:none !important;
}

.displaytable {
  display:table !important;
}
/* ====== FORCING WHITE BACKGROUND ====== */
.whitecontainer {
   display: table;
   padding: 10px;
   background:#fff;
   clear: both;
   width: 96%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 8px;
   margin-bottom: 8px;
}
.whitebackground {
   background:#fff !important;
   border: 1px solid #CCC !important;
   border-radius: 5px !important;
}




/* ======                                 ====== */
/* ======   URGENT ANNOUNCEMENT BLOCKS    ====== */
/* ======                                 ====== */
#block-urgentannouncements div.content, #block-scheduledservermaintenance div.content {
  background:#feff94;
  border: 1px solid #ff0000;
  border-radius: 7px;
  padding: 16px;
}
#block-urgentannouncements p, #block-scheduledservermaintenance p {
  color: red;
  font-size:.9em;
  line-height:100%;
  margin:0;
}
#block-urgentannouncements h2, #block-scheduledservermaintenance h2 {
  color: red;
  font-size:1.1em;
  line-height:100%;
  margin:0;
}
#block-urgentannouncements h1, #block-scheduledservermaintenance h1 {
  color: red;
  font-size:1.8em;
  line-height:100%;
  margin:0;
}
/* ====== FORMATS THE CLOSE BLOCK BUTTONS ====== */
#block-urgentannouncements .closeblock {
  font-size: x-large;
  font-weight: bolder;
  margin-right: 10px;
  margin-top: 5px;
  border: solid 2px #a52e2e;
  border-radius: 5px;
  padding: 5px;
  line-height: .95;
  color: #a52e2e;
}




/* ======                                 ====== */
/* ======     COLORED BOXES ON PAGES      ====== */
/* ======                                 ====== */
.greenbox {
  background: #e1ecd2;
  border-radius: 5px;
  box-shadow: 0 1px 6px -1px #242424;
  box-sizing: border-box; 
  font-size: .9em;
  line-height: 100%;
}

.tanbox {
  background: #f6f1e9 !important;
  border: solid 2px #cfc3b4;
  border-radius: 15px;
}

.stickybox {
  padding: 0 20px 10px 20px;
  margin-bottom: 25px;
  background: #f6f1e9 !important;
  border: solid 2px #cfc3b4;
  border-radius: 15px;
}




/* ======                                 ====== */
/* ======  PAGE INDEX / QUICK LINKS BOX   ====== */
/* ======                                 ====== */
.pageindex{
  background: #e1ecd2;
  float: left;
  border-radius: 5px;
  box-shadow: 0 1px 6px -1px #242424;
  box-sizing: border-box;
  text-align: left;
  padding: 5px;
  margin: 10px 5px;
}
/* ======= MEDIA QUERY -- FOR PHONE AT PORTRAIT ======= */ 
@media screen and (max-width: 505px) {
  .pageindex {
    width: 50%;
  }
}
/* ======= MEDIA QUERY -- FOR PHONE AT LANDSCAPE AND TABLET AT PORTRAIT ======= */ 
@media screen and (min-width: 505px) and (max-width: 700px) {
  .pageindex {
    width: 43%;
  }
}
/* ======= MEDIA QUERY -- FOR TABLETS AT LANDSCAPE ======= */ 
@media screen and (min-width: 701px) and (max-width: 1024px){
  .pageindex {
    width: 33%;
  }
}
/* ======= MEDIA QUERY -- FOR DESKTOPS AND TVS ======= */ 
@media screen and (min-width: 1025px) {
  .pageindex {
    width: 25%;
  }
}






/* ======                                 ====== */
/* ======       IFRAME FOR YOUTUBE        ====== */
/* ======          VIDEO EMBEDS           ====== */
/* ======                                 ====== */
.embeddediframecontainer iframe {
	aspect-ratio: 16 / 9;
	height: 100%;
	width: 100%;
}




/* ======                                 ====== */
/* ======     HEADER WITH LINE FILL       ====== */
/* ======   VISUALLY SECTIONS A DOCUMENT  ====== */
/* ======                                 ====== */
h1.headerline, h2.headerline {
    position: relative;
}
h1.headerline span, h2.headerline span {
    background:#ffffff;
    padding-right: 10px;
    position: relative;
    z-index: 2; 
}
h1.headerline:after, h2.headerline:after {
    content:"";
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 0.5em;
    border-top: 1px solid black;
    z-index: 1; 
}




/* ======                                 ====== */
/* ====== DONATION THERMOMETER FORMATTING ====== */
/* ======                                 ====== */
.donation-meter-wrapper-outer-right25 {
  display: table;
  padding: 10px;
  background:#eae8d5;
  border: 1px solid #c3b79c;
  border-radius: 5px;
  clear: both;
  margin: 5px 0px 5px 8px;
}
/* ======= MEDIA QUERY -- FOR PHONE AT PORTRAIT ======= */ 
@media only screen and (max-width: 505px) {
 .donation-meter-wrapper-outer-right25 {
    width: 92%;
    display: block;
    margin: auto;
  }
}
/* ======= MEDIA QUERY -- FOR PHONE AT LANDSCAPE AND TABLET AT PORTRAIT ======= */ 
@media only screen and (min-width: 506px) and (max-width: 700px) {
  .donation-meter-wrapper-outer-right25 {
    width: 40%;
    float: right;
    clear: right;
  }
}
/* ======= MEDIA QUERY -- FOR TABLETS AT LANDSCAPE ======= */ 
@media only screen and (min-width: 701px) and (max-width: 1024px){
.donation-meter-wrapper-outer-right25 {
    width: 24%;
    float: right;
    clear: right;
  }
}
/* ======= MEDIA QUERY -- FOR DESKTOPS AND TVS ======= */ 
@media only screen and (min-width: 1025px) {
.donation-meter-wrapper-outer-right25 {
    width: 24%;
    float: right;
    clear: right;
  }
}
.donation-meter-wrapper-inner {
  display: inline-block;
  width:100%;
  font-size:1em;
  line-height: 100%;
  clear: both;
  color: #000;
}
.donation-meter {
  width:100px;
  margin-left: auto;
  margin-right: auto;
}
.glassborder {
  background: #000;
  border-radius: 100px 100px 0px 0px;
  display: block;
  height: 300px;
  margin: 0 35px 0px;
  padding: 0 5px 0;
  position: relative;
  width: 20px;
}
.emptyglass {
  background: #fcfcfc;
  border-radius:  100px 100px 0px 0px;
  display: block;
  width: 20px;
  position: absolute;
  bottom: 5px;
}
.pledgecolor {
  background: #d78383;
  display: block;
  width: 20px;
  position: absolute;
  bottom: 5px;
}
.paidcolor {
  background: #a50000;
  display: block;
  width: 20px;
  position: absolute;
  bottom: 5px;
}
  .metertext {
  font-size:1.2em;
  line-height: 110%;
  text-align: center;
}
.goaltext strong {
  display: block;
  text-align: center;
}
.goaltextright {
  display: block;
  position: absolute;
  left: 35px;
}
.pledgetext {
  display: block;
  position: absolute;
  right: 35px;
}
.paidtext {
  display: block;
  position: absolute;
  /*  left: 35px;  */
  right: 35px;
}
.bulb {
  background: #000;
  border-radius: 100px;
  display: block;
  height: 50px;
  margin: 0 35px 10px;
  padding: 5px;
  position: relative;
  top: -27px;
  right: 15px;
  width: 50px;
}
.filledbulb {
  background: #a50000;
  border-radius: 100px;
  display: block;
  height: 50px;
  width: 50px;
}
.filler {
  background: #a50000;
  display: block;
  height: 30px;
  width: 20px;
  position: relative;
  top: -65px;
  right: -15px;
  z-index: 30;
}




/* ======                                                       ====== */
/* ======             OVERALL PAGE LAYOUT FORMATTING            ====== */
/* ====== LISTED LAST TO HAVE LESS CHANCE OF BEING OVERWRITTEN  ====== */
/* ======                                                       ====== */




/* ======                                 ====== */
/* ======     HEADER BACKGROUND IMAGE     ====== */
/* ===== note: positioning on separate css ===== */
/* ======                                 ====== */
#headerimage{
  background-image: url("/files/images/2019/flowers.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow:visible;
  display: flex;
  flex-direction: column;
}




/* ======                                 ====== */
/* ======   HEADER SECTIONS POSITIONING   ====== */
/* ======                                 ====== */
#headerwrapper {
  display:block;
  position:relative
}
#header1 div, #header1 ul {
  margin:0;
  padding:0;
}
#header2{
  min-height:35px;
  overflow:visible;
  margin-top: auto;
}
#header2 div.layout-container {
  margin-left: 0;
  padding: 0.357em 15px 0;
}




/* ======                                 ====== */
/* =====  MAIN MENU / ADMIN MENU DISPLAY   ===== */
/* ======                                 ====== */

/* =====  make mobile menu not separate from its hamburger icon ===== */
.sf-accordion-toggle {
	line-height:0;
}

/* =====  make mobile menu hamburger icon larger ===== */
#superfish-main-toggle, #superfish-staff-admin-toggle{
  padding-top:20px;
  padding-bottom:20px;
}

/* =====  make non-mobile menus not separate ===== */
#superfish-main, #superfish-staff-admin {
  margin:0;
}



/* ======                                      ====== */
/* ======  ADMIN TOOLBAR DISPLAY CORRECTIONS   ====== */
/* ======   MOVED TO SEPARATE JS/CSS COMBO     ====== */
/* ======                                      ====== */