/* this file might need lots of help */

/* NEW PROBABLY IMPORTANT MODERN STUFF */


/* ############ */
/* ## FONTS ## */
/* ############ */ 

body {
  font-family: ff-more-web-pro-1, ff-more-web-pro-2,serif;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;

}

h2, h3, .left-navbar-header, #navbar-container, #expand-top-navbar, #expand-left-navbar, #banner-links, .footer-item, th, .splash-news-intro {
  font-family: ff-nuvo-web-pro-1, ff-nuvo-web-pro-2,arial,sans-serif;
}

/* ############ */
/* ## SPLASH ## */
/* ############ */

.splash-ribbon {
  background-color: #c8c8cd;
}

.splash-ribbon-front {
  background-color: #005a46;
}

.splash-top-text {
  display: flex;
  align-items: center;
}

.splash-quote {
  color: #ebebee;
}

.splash-attribution {
  font-style: italic;
  color: #c3caf5;  /* intentionally the older, darker periwinkle */
}

.splash-when-and-where-text {
  display: flex;
  align-items: center;
  font-size: 14pt;
}

.splash-bottom-notice {
  display: flex;
  text-align: left;
  align-items: center;
  background-color: #D3D8F8;
}

.splash-news {
  margin: 0px;
}

.splash-single-news-item {
  margin: 10px;
}

.splash-news-intro {
  margin: 0px;
  color: #500C23;
  font-weight: bold;
}

@media all and (min-width: 980px) {
  .splash-bottom-notice {
    min-width: 427px;	
  }
  .splash-news li {
    margin-left: -10px;
  }
}

/* ## SMALL ## */
@media all and (max-width: 669px) {
  
  .splash-middle-text {
    background-color: #c8c8cd;
    font-size: 14.5pt;
  }

  .splash-quote-box {
    background-color: #005a46;
  }
  
  .splash-quotation-mark {
    position: relative;
    top: 6px;
    font-size: 24pt;
    line-height: 0pt;
    color: #eb0a2d;
  }
  
  .splash-bottom-notice {
  	font-size: 12pt;
  }
}


/* ## MEDIUM ## */
@media all and (min-width: 670px) and (max-width: 979px) {
  
  .splash-top-text {
    font-size: 14pt;
    line-height: 20pt;
  }
  
  .splash-quote-and-attribution-container {
    font-size: 16pt;
    line-height: initial;
  }

  .splash-quotation-mark {
    position: relative;
    top: 14px;
    font-size: 36pt;
    line-height: 0pt;
    color: #eb0a2d;
  }
  
  .splash-when-and-where-text {
    font-size: 14pt;
    line-height: 20pt;
  }

  .splash-bottom-notice {
    font-size: 12pt;
    line-height: initial;
  }
}

/* ## LARGE ## */
@media all and (min-width: 980px) {
  .splash-info-box {
    font-size: 12pt;
    line-height: 16pt;
  }
  
  .splash-top-text {
    font-size: 14pt;
    line-height: 20pt;
  }
  
  .splash-quote-and-attribution-container {
    font-size: 22pt;
    line-height: initial;
  }

  .splash-quotation-mark {
    position: relative;
    top: 20px;
    font-size: 48pt;
    line-height: 0pt;
    color: #eb0a2d;
  }

  .splash-bottom-notice {
    width: 427px; 
  }

}

/* ################## */
/* HEADER AND NAV BAR */
/* ################## */

#header {
    background-color: #323237;
}

#expand-top-navbar {
	color: #e8e8ee;
}


/* ################## */
/* ## TESTIMONIAL ## */
/* ################## */

.testimonial-container {
	margin-top: 5px;
	margin-bottom: 20px;
	background-color: #EBEBEE;
	padding:12px;
    box-shadow: 3px 3px #DCDCE1;
	
}

@media all and (min-width: 694px) {
.testimonial-container {
    text-align: justify;
  }
}

.testimonial-quotation-mark {
    display: inline-block;
    position: relative;
    top: 12px;
    font-size: 24pt;
    line-height: 0pt;
    color: #C8C8CD;
    transform: rotate(4deg);
}

.testimonial-quote {
}

.testimonial-attribution {
	font-style: italic;
	margin-left: 50px;
	margin-top: 5px;
}


/* ############ */
/* ## MIXINS ## */
/* ############ */

.fillout-embed {
  width: 100%;
  height: auto;
  min-height: 500px; /* or whatever starting height you want */
  display: block;
  position: relative;
}

.fillout-embed iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
}



.dontbreakme {
	white-space: nowrap;
}

.closed-expander {
	cursor: pointer;
}

.centered-array  { /* for an array like in the past_summers archives */
  text-align: center;
}

.centered-text {
  text-align: center;
}

.full-width {
  width: 100%;
}

.flavortext {
  font-style: italic;	
}


.major {
	text-align:center;
	font-weight:bold;
	font-size:14pt;
	}
		
.drop-in-center {      /* Borrowed from mathcamp2 for the giving section.  */
	background-color: #D3D8F8; /* new lighter periwinkle */
	padding-left:11px;
	padding-right:11px;
	padding-top:11px;
	padding-bottom:11px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.FAQ-question {
	font-style: italic;
	margin-top:20px;
}

.FAQ-question p:first-child:before {
	content: "Q: ";
	font-weight: bold;
	font-style: italic;
	font-size: 11pt;
}

.FAQ-answer {
	margin-left: 20px;
	margin-right: 20px;
}

.FAQ-answer p:first-child:before {
	content: "A: ";
	font-weight: bold;
	font-style: italic;
	font-size: 11pt;
}

table.calendar {
	margin-left: auto;
	margin-right: auto;
	border: 0;
}

@media all and (min-width: 980px) {
table.calendar {
	min-width:40%;
  }
}

.calendar tr:nth-child(even) {
	background: #FFFFFF;
}
	
.calendar tr:nth-child(odd) {
	background: #EBEBEE;
}

.calendar th, .calendar td {
	padding: 6px;
}

.indent {
	margin-left: 30px;
}

.double-spaced li {
	margin-bottom: 12px;
}

.medium-spaced li {
	margin-bottom: 2px;
	list-style-type: circle;
}

.shadow {
    border: 3px solid white;
    box-shadow: 0px 0px 8px rgba(0,0,0,.3);	
}

/* ################### */
/* ## CONTACT FORMS ## */
/* ################### */

.form-line {
	width: 100%;
	max-width: 290px;
	border: 1px solid #323237;
}


.form-box {
	width: 100%;
	max-width: 391px;
	height: 100px;
	border: 1px solid #323237;
}


.form-table {
	width: 100%;
}


.form-table td {
	padding: 6px;
}
		
	
/* ################# */
/* ## SOUND BITES ## */
/* ################# */


/* ## SMALL AND smallest MEDIUM ## */
@media all and (max-width: 693px) {
  .sound-bite-box {
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid #c8c8cc;
    margin: 4px;
    padding: 8px;
    display: inline-block;
    vertical-align: bottom;
    background-color: #EBEBEE;
    box-shadow: 3px 3px #DCDCE1;
  }
}

/* ## bigger MEDIUM and LARGE ## */
@media all and (min-width: 694px) {
  .sound-bite-box {
    position: relative;
    width: 178px;
    height: 178px;
    border: 1px solid #c8c8cc;
    margin: 4px;
    padding: 8px;
    display: inline-block;
    vertical-align: bottom;
    background-color: #EBEBEE;
    box-shadow: 3px 3px #DCDCE1;
  }
}

.sound-bite-box:hover {
  border-color: #DCDCE1;
}

.sound-bite-hunt {
	background: #FFFFFF;
}


/* ## SMALL AND smallest MEDIUM ## */
@media all and (max-width: 693px) {
  .sound-bite-label {
    position: absolute;
    bottom: 0px;
    width: inherit;
    text-align: center;
    font-size: 17px;
  }
}

/* ## bigger MEDIUM and LARGE ## */
@media all and (min-width: 694px) {
  .sound-bite-label {
    position: absolute;
    bottom: 0px;
    width: inherit;
    text-align: center;
    font-size: 11pt;
  }
}

/* ## SMALL AND smallest MEDIUM ## */
@media all and (max-width: 693px) {
  .sound-bite img {
    display: block;
    width: 300px;
  }
}

/* ## bigger MEDIUM and LARGE ## */
@media all and (min-width: 694px) {
  .sound-bite img {
    display: block;
    width: 178px;
  }
}

.sound-bite {
  color: initial;
}

.sound-bite-box p {
  margin: 8px 0px;
}	

/* ############# */
/* ## CONTENT ## */
/* ############# */

/* ## SMALL AND MEDIUM ## */
@media all and (max-width: 979px) {
  .inset-photo {
	display: block;
	width: 100%;
	max-width: 550px;
    margin: auto;
  }
}

/* ## LARGE ## */
@media all and (min-width: 980px) {
  .inset-photo {
	clear: both;
	float: right;
	margin-left: 20px;
	margin-bottom: 5px;
	width: 300px;
  }
}

/* ## SMALL AND smallest MEDIUM ## */
@media all and (max-width: 693px) {
  .class-image {
	display: block;
	width: 60%;
	max-width: 200px;
    margin: auto;
  }
}

/* ## bigger MEDIUM and LARGE ## */
@media all and (min-width: 694px) {
  .class-image {
	clear: both;
	float: right;
	margin-left: 20px;
	margin-bottom: 5px;
	width: 150px;
  }
}

/* ## SMALL AND smallest MEDIUM ## */
@media all and (max-width: 693px) {
  .class-image-grid {
	display: block;
	width: 60%;
	max-width: 200px;
    margin: auto;
  }
}

/* ## bigger MEDIUM and LARGE ## */
@media all and (min-width: 694px) {
  .class-image-grid {
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 5px;
	width: 150px;
  }
}

.classes-header-box {
	text-align: center;
	margin: auto;
}

.classes-header-individual {
	display: inline-block;
}

.classes-header-individual p {
	text-align: center;
}


/* ## SMALL AND MEDIUM ## */
@media all and (max-width: 979px) {
  .center-photo {
	display: block;
	width: 80%;
	max-width: 550px;
    margin: auto;
  }
}

/* ## LARGE ## */
@media all and (min-width: 980px) {
  .center-photo {
	clear: both;
	float: center;
	margin: auto;
	width: 300px;
  }
}

/* ## SMALL AND MEDIUM ## */
@media all and (max-width: 979px) {
  .wide-photo {
	display: block;
	width: 100%;
  }
}

/* ## LARGE ## */
@media all and (min-width: 980px) {
  .wide-photo {
	clear: both;
	width: 100%;
  }
}

/* ## SMALL AND MEDIUM ## */
@media all and (max-width: 979px) {
  .status {
	display: block;
	width: 100%-16px;
	background-color: #D3D8F8;
	padding: 5px 8px 5px 8px;
  }
}

/* ## LARGE ## */
@media all and (min-width: 980px) {
  .status {
	clear: both;
	float: right;
	margin-left: 20px;
	padding: 0 10px 0 10px;
	width: 220px;
	background-color: #D3D8F8;
	text-align: left;
  }
}

/* ## if you want a full-width status even at wide ## */
.major_announcements {
  display: block;
  width: 100%-16px;
  background-color: #D3D8F8;
  padding: 5px 8px 5px 8px;
  margin-bottom: 10px;
}


/* ## SMALL AND MEDIUM should not have too much list padding ## */
@media all and (max-width: 979px) {
  ol, ul {
    padding-left: 25px;
  }
}


/* ################ */
/* ## HONOR ROLL ## */
/* ################ */

table.honor-roll {
	width: 100%;
}

.honor-roll-heading {
	margin-bottom: 0px;
	margin-top:10px;
}

.honor-roll-list li {
	margin-top:5px;
}

.honor-roll-years {
	color: #A9A9A9;
	margin-left: 3px;
}

.honor-roll-consecutive {
	color: #500C23;
	margin-left: 2px;
}

.honor-roll td {
	vertical-align: top;
}


/* ########################### */
/* ## TOP NAVBAR & GATEWAYS ## */
/* ########################### */


.light {
    color: #223824;
}
.dark, .leading {
    color: #500C23;
}

.navbar {
  white-space: nowrap;
  font-size: 15px;  /* updated from 9pt to 15px on 4/11/19 */
}

.navbar.light {
    background-color: #ebebee;
}
.navbar.dark {
    background-color: #dcdce1;
}

.navbar:hover {
    background-color: #ffffff;
}


#top-navbar {
  background-color: #005a46;
  color: #c3d5d1;
}

.top-navbar-item {
  font-size: 14px;   /* updated from 12.2px to 14px on 4/11/19 after removing "Gateways for:" */
}

.top-navbar-item.selected {
  color: #FFFFFF;
}

.top-navbar-label {
  color: #a6b1b2;
}

.top-navbar-gateway {
  /* font-style: italic; */
}

a.top-navbar-item:hover {
  color: #a6b1b2;
}

.gateway {
    font-size: 15px;  /* updated from 9pt to 15px on 4/11/19 */
}

.gateway-container:hover .gateway {
  color: #FFFFFF;
}

.gateway.odd {
    color: #000000;  /* even our dark grey does not pass the colorblindness test; has to be black */
    background-color: #C3CAF5;  /* this is the regular periwinkle */
}

.gateway.even {
    color: #323237;
    background-color: #d3d8f8;  /* this is the a new, lighter periwinkle from asking https://www.w3schools.com/colors/colors_picker.asp for a lighter version of C3CAF5 */
}

.gateway.mobile-only:hover {
    background-color: #FFFFFF;
}

/* ################# */
/* ## LEFT NAVBAR ## */
/* ################# */

#left-navbar {
    background-color: #ebebee;
	box-shadow: 5px 0px #dcdce1;
}

.left-navbar-header {
    font-weight: bold;
    color: #500C23;
    font-size: 18px;
}

.left-navbar-entry.selected {
    font-weight: bold;
}

/* ############ */
/* ## FOOTER ## */
/* ############ */

#footer-container {
    font-size: 11pt;
    background-color: #313137;
    color: #ebebee;
}

.footer-item a:hover {
	color: #aaa0a8;
}

/* ############################################################ */
/* ##            GIVING PAGE BUTTONS                         ## */
/* ############################################################ */

#donate_now_button {
  background:#005a46; 
  border-radius:0px 0px 0px 0px;
  font-weight:normal; 
  font-family:Georgia, serif;
  border:none;
  box-shadow:none;
  left: 50%; 
  margin-left:-72.5px;
  clear: both;
  display: block; 
  width:145px;
  height:45px; 
  line-height:2.8; 
  position:relative; 
  font-size:18px;
  text-align:center;
  cursor:pointer;
  color:#fff;
  text-decoration:none;
  z-index:1;
  margin-top: 15px;
}


#daf_link {
  background:#D3D8F8;
  border-radius:0px 0px 0px 0px;
  font-weight:normal; 
  font-family:Georgia, serif;
  border:none;
  box-shadow:none;
  left: 50%; 
  margin-left:-115px;
  clear: both;
  display: block; 
  width:230px;
  height:60px; 
  padding-top:8px;
  line-height:1.5; 
  position:relative; 
  font-size:18px;
  text-align:center; 
  cursor:pointer;
  color:#000;
  text-decoration: none; 
  z-index:1;
}


/* ############################################################ */
/* ##  UNSORTED MISCELLANY THAT MAY OR MAY NOT BE IMPORTANT  ## */
/* ############################################################ */

body {
  text-align: center;
  background-color: #dddddd;
}

#body-container, #splash-body-container {
  background-color: #ffffff;
}


.separator {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: url(images/separator.png) 0 0;
  background-size: 5px 5px;
}


#banner-links {
  background-color: #323237;
  font-size: 15px;
  color: #DCDCE1;
}

#subpage-container {
    color: #323237;
}

.disclaimer {
  font-size: 0.8em;
  font-style: italic;
}


/* ############################ */
/* POSSIBLY ANCIENT STUFF BELOW */
/* ############################ */

ul.nicelist {
    list-style-type: none;
}

.nicelist {
    padding: 0px;
    margin-left: 15px;
}

.noindent {
    margin-left: 0px;
}

.wide li, .nicelist li {
    padding: 5px;
}

@media all and (min-width: 694px) {
.wide li, .nicelist li {
    text-align: justify;
  }
}

.narrow li {
    padding: 3px;
}

.noindent li {
    padding-left: 0px;
}

.spotlight {
/*    font-style: italic; */
    margin: auto 30px;
    padding: 10px;
}

.noitalic {
    font-style: initial;
}

.bgblue {
    background-color: #D3D8F8;
}

.announcement {
    width: 300px;
    margin: auto 30px;
    padding: 10px;
}


.thumbnail-container {
  clear: both;
}


/* THIS IS WIDE ONLY */
@media all and (min-width: 980px) {
.thumbnail-text {
    display: inline-block;
    vertical-align: top;
    width: 570px;
    width: calc(100% - 150px);
    margin-top: 20px;
  }

.thumbnail-image {
    display: inline-block;
    vertical-align: top;
    width: 100px;
    height: 100px;
    margin: 20px;
  }

 .thumbnail-narrower-text {
    display: inline-block;
    vertical-align: top;
    width: 510px;
    width: calc(100% - 210px);
    margin-top: 20px;
  }

.thumbnail-wider-image {
    display: inline-block;
    vertical-align: top;
    width: 160px;
    height: 100px;
    margin: 20px;
  }
}

/* THIS IS SMALL AND MEDIUM ONLY */
@media all and (max-width: 979px) {
.thumbnail-text {
    vertical-align: top;
    margin-top: 20px;
  }

.thumbnail-image {
    float: left;
    display: block;
    vertical-align: top;
    width: 100px;
    height: 100px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
  }

.thumbnail-wider-image {
    float: left;
    display: block;
    vertical-align: top;
    width: 160px;
    height: 100px;
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
  }
}


.right {
    float: right;
    margin-right: 0px;
}

.left {
    float: left;
    margin-left: 0px;
}

.tall {
    height: 150px;
}

.quote {
    margin-bottom: 0px;
}

span.quote, blockquote.quote {
    font-style: italic;
}

.attribute {
    display: inline-block;
    font-style: italic;
    padding-left: 25px;
    margin-top: 5px;
}

.more {
    text-align: right;
    font-style: italic;
    clear: both;
}

.center {
    text-align: center;
}

.clear {
    clear: both;
}

.mediumfont {
    font-size: 12pt;
}

.smallfont {
    font-size: 9pt;
}

table {
    border-collapse: collapse;
}

.full {
    width: 100%;
}

th {
    text-align: left;
}

.border td, .border th {
    border: 1px solid #323237;
}

div.frame {
    display: inline-block;
    padding: 30px;
    border: 1px solid #323237;
}

.blueheader th {
    background-color: #D3D8F8;
}

.blueheader tr.alt td {
    color: #000000;
    background-color: #EBEBEE;
}

.light-emph, .math {
    font-style: italic;
}

.code {
    font-family: Courier New;
}

.grey {
   color: #C8C8CD;
}

ul.circle {
    list-style-type: circle;
}

a {
    text-decoration: inherit;
    color: inherit;
}

h2 {
    color: #500C23;
    margin-top: 0px;
}

/* ## bigger MEDIUM and LARGE ## */
@media all and (min-width: 694px) {
p {
    text-align: justify;
  }
}

h3 {
    margin-top: 40px;
    margin-bottom: 0px;
}

label a, p a, td a, li a, .sound-bite-label {
    font-weight: bold;
}

label a, p a, td a, li a, a.left-navbar-entry, .sound-bite-box {
    text-decoration: initial;
    color: #005A46;
}

a.indented {
  padding-left: 8px;
}

label a:hover, p a:hover, td a:hover, li a:hover, a.left-navbar-entry:hover, .sound-bite-box:hover {
  color: #500C23;
}

hr {
  border: 0;
  color: #005A46;
  background-color: #005A46;
  height: 1px;
}

.emph, .leading {
    font-weight: bold;
}


/* ############################################################ */
/* ##   YOU HAVE REACHED THE END OF THIS STYLESHEET. WHEW.   ## */
/* ############################################################ */