/********* Routine Items*********/
*
{
	font-family: "Verdana";
}
.body-content		/* renamed from BODY */
{
	margin: 0;
	padding: 0 0 40px;
}
html
{
	min-height: 100%;
	position: relative;
}
footer
{
	width: 100%;
	height: 40px;
	position: absolute;
	bottom: 0px;
	background: none;
	vertical-align: bottom;
	font-size: 12px;
}
h1, h2, h3 
{
    font-weight: 700;
}
h1 
{
	font-size: 28px;
    line-height: 36px;
	margin-bottom: 20px;
}

h2 
{
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 15px;
}

h3 
{
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
}
 
a 
{
	color: #4C92B1;
    font-weight: 500;
    -webkit-transition: color ease-in-out .33s;
    -moz-transition: color ease-in-out .33s;
    -ms-transition: color ease-in-out .33s;
    transition: color ease-in-out .33s;
}
a:hover, a:visited
{
	color: #678fae;
}
button
{
	padding: 6px 10px;
	font-size: inherit;
	border: none;
	cursor: pointer;
	height:30px;
	vertical-align:top;
	color: black;
}

h1 a, h1 a:visited,
h2 a, h2 a:visited,
h3 a, h3 a:visited,
h4 a, h4 a:visited
{
    font-weight: 700;
	color: black;
	text-decoration: none;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover
{
	text-decoration: underline;
}
.text-center
{
	text-align: center;
}
.italic {
	font-style: italic;
}
.text
{
	font-size: 16px;
}
/*for image captions*/
.captioned
{
	text-align: center;
}
.rotate-left
{
	-moz-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	-o-transform: rotate(270deg); 
	transform: rotate(270deg);
}
/*This is for the embedded Google Forms and Google Calendar*/
iframe
{
	width:70%;
	height:70%; 
	margin-left: 15%;
	border-width:0;
}
.calendar iframe
{
	height: 600px;
}
.cal
{
	height: 600px;
}
/********* End Routine Items*********/

.text
{
	text-align: left;
}
.ellipsis
{
	overflow: hidden;
	text-overflow: ellipsis;
	height: 3.6em;
	line-height: 1.2em;

}
/***** Sustitute for ellipsis. Taken from http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/ *****/
/* styles for '...' */ 
.block-with-text {
  /* hide text if it more than N lines  */
  overflow: hidden;
  /* for set '...' in absolute position */
  position: relative; 
  /* use this value to count block height */
  line-height: 1.2em;
  /* max-height = line-height (1.2) * lines max number (3) */
  max-height: 3.6em;
  /* fix problem when last visible word doesn't adjoin right side  */
  text-align: justify;  
  /* place for '...' */
  margin-right: -1em;
  padding-right: 1em;
}
/* create the ... */
.block-with-text:before {
  /* points in the end */
  content: '...';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of block */
  right: 0;
  bottom: 0;
  /*** tweak from https://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text ***/
	right: 1em; background-color: white;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
  /* points in the end */
  content: '';
  /* absolute position */
  position: absolute;
  /* set position to right bottom corner of text */
  right: 0;
  /* set width and height */
  width: 1em;
  height: 1em;
  margin-top: 0.2em;
  /* bg color = bg color under block */
  background: white;
}
/***** End Sustitute for ellipsis *****/

/*********Set general properties for columns and rows to be used for entire site*********/
/*ensure that both columns have the same height*/
.row
{
	display: flex;
}
/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}
/* Create two unequal columns that floats next to each other */
.column {
	box-sizing: border-box;
	
}
/*********Formatting for Top of Each Page*********/
/**Top Width= 4% + 25% + 51% + 4% + 16% =100% **/
.logo-col /*varies for larger screen size*/
{
	width: 4%;
}
.logo-col img
{
	width: 100%;
	height: auto;
}
.title-col /*smaller for larger screen size*/
{
	width: 25%;
	font-size:40px;
	text-align: center;
}
.empty-col /*larger for larger screen size*/
{
	width: 55%; /*If readd login, make this 51%*/
}
/*.login-col *//*smaller for larger screen size*/
/*{
	width: 4%;
	margin-top: 16px;
}*/
.search-container-col /*smaller for larger screen size*/
{
	width: 16%;
}
/*********End Formatting for Top of Each Page*********/
/*********Navigation*********/
/* All navigation items from versions prior to /beta5/ 9/10/18 have been removed */
/* Navigation item from Aug26Updates */
.navbar-default
{
	position: sticky;
	position: -webkit-sticky; /*for Safari only*/
	top: 0;
	background: white;
	z-index: 15;
}
/* Navigation items copied from 2018-08-04-h-Beta4/delta9/styles/style-nav-9-6.css */

/* 'hamburger' icon is an html checkbox */
.nav-CkBx {
	display: none; 			/* to hide checkbox itself. but leave visible while testing */
}

.nav-CkBx-Hamburger {
	display: none;			/* media query also controls */
}

.nav-menu-content {
	max-height: 100%;		/* media query also controls */
	max-width: 100%;
}
.current
{
	background-color: #386D85;
}
.current a
{
	color: white;
}
/*sets up the properties for the first level navigation appearance*/
.nav1 {
    margin: 0px;
	background-color: #678fae;			/* nav bar blue */
	display: inline-block;
	width: 100%;
	z-index: 10;
	overflow: hidden;
}
.dropbtn
{

	padding: 0px;
	background-color: inherit;
	border: none;
	outline: none;
	cursor: none;
}
/*sets properties for all navbar list items*/
.nav1 a, .nav-dropdown .dropbtn
{
		height: 50px;
    position: relative;
    font-size: 16px;
    color: white;
    text-decoration: none;
	vertical-align:top;		/* for iPhones */
	padding: 16px;
}
.nav-dropdown, .nav1 a
{
	float: left;
	overflow: hidden;
}
/*displays second level navigation on hover over of navigation item*/ 
/* need for drop down to show */
.nav-dropdown:hover .nav2 {	
    display: block;
}
/*Sets the hover over color for the first level of navigation*/
.nav1 a:hover, .nav-dropdown:hover .dropbtn
{
	background-color: #4c92b1;			/* med blue */
	color: black;
}
/*inherits some properties from top level navigation and sets changed properties here*/
.nav2
{
    display: none;
	position: absolute;
    background-color: #dddddd;
	width: auto;
	z-index: 10;
}
/*changes items in second level to list down rather than across*/
.nav2 a
{
	float: none;
    display: block;
	z-index: 30;
	color: black;
	text-align: left;
}
/*sets hover color for second level of navigation*/
.nav2 a:hover
{
	background-color: #767676;
	color: white;
}
/*********End Navigation*********/

/********* Image Titles for Main Pages*********/
/*for left side with image, utilizes column that is 60% width of screen, see column and row earlier in CSS*/
.banner
{
	margin-top: -4px; /*fixes extra whitespace at top*/
	z-index: -5;
}
.left-banner {
	position: relative;
	width: 60%;
	z-index: -1;
	vertical-align: bottom;
}
.left-banner img
{
	display: block;
}
.left-banner-text
{
	z-index: 0;
	position: absolute;
	vertical-align: text-bottom;
	text-align: right;
	font-size: 60px;
	color: white;
	bottom: 8px;
	right: 16px;
}
.left-banner-text .dark
{
	color: #333333;
}
/*for right side with words, utilizes column that is 40% width of screen, see column and row earlier in CSS*/
.right-banner {
  width: 40%;
  background-color: #a8c879;
  text-align: left;
  color: white;
  padding-left: 5%;
  padding-right:5%;
  display: flex;
  align-items: center;
  font-size: 60px;
  height: auto;
  z-index: -1;
}
.home img
{
	height: 400px;
	width: auto;
}
.home
{
	background-color: #a8c879;
	text-align: left;
	color: white;
	padding-right:5%;
	display: flex;
	align-items: center;
	font-size: 41px;
	width: auto;
	height: 400px;
}
.home a
{
	color: white;
	text-align: center;
}
/*********End Image Titles*********/

/*********Side Bar*********/
/*inherits from the navigation items, but alters to allow for side bar*/
.side-nav
{
	display: block;
	margin: 0 auto;
	padding: 0;
	margin-left: 5%;
}

.side-nav .nav-item:hover
{
	width: 100%;
}
.side-nav ul
{
	margin-left: 100%;
	top: -200%;
	width: 250px;
}
/*********End Side Bar*********/

/*********Page Content*********/
.left-content-col
{
	width:10%;
}
.spacing-col
{
	width: 7.5%;
}
.right-content-col
{
	width: 75%;
}
.one-content-col
{
	width: 85%;
}
.home-page-title			/* Renamed from page-title-col  & changed 9/21/18  */
{
	margin-left: auto;
	margin-right: auto;
	font-size: 26px;
    	line-height: 36px;
    	margin-bottom: 20px;
	margin-top: 30px;
	text-align: center;
    	font-weight: 700;
}
/*These two are for pages that are primarily text to help break up, the image column will not show for smaller devices*/
.text-content-col /*other column these two are paired with is balance-space-col*/
{
	width: 76%;
}
.resource-text-col
{
	width: 66%;
}
.resource-element 
{
	width:48%;
}
.balance-space-col
{
	width: 4%;
}
.image-content-col
{
	width: 20%;
	vertical-align: center;
}
.image-content-col .right
{
	float: right;
}
.resources-image-col
{
	width:30%;
}
.image-content-col img, .resources-image-col img
{
	max-width: 100%;
	height: auto;
	max-height: 200px;
	padding-top: 20px;
}
.full-image img
{
	max-width: 100%;
	height: auto;
	width: auto;
	max-height: 100%;
}
/*********End Page Content*********/
/*********Footer Content*********/
.footer-col
{
	width:100%;
}
/*********End Footer Content*********/

/*********Carousel Content*********/
* {box-sizing:border-box}

/* Slideshow container */
/* .slideshow-container 
{
	max-height: 375px;
	max-width: 452px;
	position: relative;
	margin: auto;
	z-index: 1;
}

.slideshow-container img 
{
	width:452px; 
	height:300px;
} */

/* Hide the images by default */
.slideshow-container .HomeSlides {
    display: none;
}
/*Make the links here not be underlined*/
.HomeSlides a
{
	text-decoration: none;
}

/* Next & previous buttons */
.slideshow-container .prev, .slideshow-container .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.slideshow-container .prev:hover, .slideshow-container .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
/* .slideshow-container .car-text {
  color: black;
  background-color: #a8c879;
  font-size: 24px;
  padding: 8px 12px;
  position: relative;
  bottom: 8px;
  width: 100%;
  text-align: center;
} */

/* The dots/bullets/indicators */
/* .dot 
{
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #717171;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover 
{
  background-color: #FFFFFF;
} */

/* Fading animation */
.slideshow-container .fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
/*********End Carousel Content*********/
/*********Event Content*********/
.event-view
{
	
}
.event-view a
{
	background-color: #678fae;
    color: white;
    padding: 5px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 16px;
    margin: 10px 0px;
    cursor: pointer;
}
/******Event Filter******/
input[type="checkbox"][id="event-class"]:not(:checked) ~.event-class 
{
   display: none;
}
input[type="checkbox"][id="event-other"]:not(:checked) ~.event-other 
{
   display: none;
}
input[type="checkbox"][id="event-meeting"]:not(:checked) ~.event-meeting 
{
  display: none;
}
/******End Event Filter******/
/******Event List******/
.event-break
{
	margin: 5px;
}
.event-list-container
{
    border-color: #c8c2bd;
	border: 1px;
	border-style: solid;
	overflow: hidden;
}
.event-date-col
{
	width: 10%;
	margin: 10px;
}
.event-date-col .circle {
    height: 100px;
    width: 100px;
    background-color: #a8c879;
    border-radius: 50%;
    display: inline-block;
	margin: auto;
}
.event-date-col .circle .text
{
	padding-top:20%;
	text-align: center;
	font-size: 25px;
	color: white;
}
.event-content-col
{
	width: 90%;
	margin: 10px;
}
.event-content-col .title
{
	padding-bottom: 10px;
	font-weight: bold;
}
.event-content-col .text
{
	padding-right: 30px;
	padding-bottom: 10px;
}
.event-content-col a:hover
{
	text-decoration: underline;
}
.event-content-col a
{
	font-weight: bold;
	text-decoration: none;
	color: #4c92b1;
	float: right;
	cursor: pointer;
}
.event-content-col .title a
{
	color: black;
	float: none;
}
/*Used for individual event pages*/
.event-heading-col
{
	width: 15%;
	font-size: 22px;
	font-weight: bold;
}
/*Used for individual event pages*/
.event-detail-col
{
	width: 85%;
	padding-top: 4px;
}
.event-detail-col a				/* added 2/5/19 */
{
	float: none;
	font-weight: 500;
	text-decoration: underline;

}
/******End Event List******/
/*********End Event Content*********/
.no-display
{
	display: none;
}
/*********Login Box*********/

.login-background
{
	margin-top: 50px;
	margin-left: auto;
	margin-right: auto;
	width:50%;
	height: auto;
	background-color: #c8c2bd;
	display: block;
	z-index: -10;
	text-align: center;
}

/*********End Login box*********/

.center 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.align-center {
	align-items:  center;
}

/****This is for the research form****/
.form-table
{
}
.form-table td
{
	vertical-align: top;
	padding-top: 10px;
	border-bottom: 1px black dotted;
	padding-bottom: 10px;
}
.research-content
{
	width: 70%;
}
.research-space
{
	width: 10%;
}
.research-amount
{
	width: 20%;
}
.form-table textarea
{
	min-height:20px;
	height: 60px;
	max-height: 300px;
	min-width: 100px;
	width: 550px;
	max-width: 900px;
}

.spamcodeimage {
	background-image: url("../images/gifs-etc/spamnumber.gif"); 
	height: 15px;
	width: 56px;
}
/****End research form****/
/****Collapsed Content****/
.collapsed
{
    cursor: pointer;
    width: 200px;
	max-width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    background-color:#c8c2bd;
    color: black;
}
.expanded, .collapsed:hover 
{
	background-color: #f9f9f9;
}
.expanded:hover 
{
	background-color:#c8c2bd;
}
.collapsed:after 
{
    content: '\002B';
    font-weight: bold;
    float: right;
    margin-left: 5px;
}
.expanded:after 
{
    content: "\2212";
}
.collapsed-content 
{
    padding: 0 18px;
    display: none;
    overflow: hidden;
}
/****End Collapsed****/
.page-title-mobile
{
	display: none;
	font-size: 30px;
	text-align: center;
}