/*	
	======================================================================

	public/formatting.css

	======================================================================
*/

	
/* ----------------------------------------------------
   text
   ---------------------------------------------------- */

	.blue_box {

		padding: 30px 60px;	
		margin-top: 50px;

		text-align: center;
		font-size: 2.2rem;
		line-height: 160%;
		
		color: white;
		background-color: #B83B30;
		border-radius: 15px;
	}
	
/* ----------------------------------------------------
   pull quotes
   ---------------------------------------------------- */

	.pull_quote_right_header {
	
		height: 10px;
		font-size: 1.2rem;
		line-height: 160%;
		color: white;
		padding-left: 8px;
		padding-top: 0px;
		background-color: #595;
	}
	
	.pull_quote_right_content {
	
		font-size: 1.2rem;
		border-top: 4px solid #595;
		border-bottom: 1px dotted #595;
		background-color: #F6F6F6;
		padding: 8px;
	}

	.pull_quote_right {
	
		float: right;	
		width: 150px;
		margin-left: 10px;
		margin-bottom: 10px;
	}

/* ----------------------------------------------------
   events
   ---------------------------------------------------- */

	/* in general stylesheet since it's used by two pages */
	
	.event_item {
	
		margin-bottom: 30px;
	}
	
	.event_image_div {

		float: right;	
		width: 20%;
		margin-left: 5%;
		margin-bottom: 20px;
	}
	
	.event_image {
	
		width: 100%;
	}
	
	.event_date {
	
		font-size: 1.75rem;
	}
	
	.event_content {
	
		float: left;	
		width: 100%;
		margin-top: 5px;
	}

	.event_content_with_image {
	
		width: 75%;
	}
	
	.fade_out_div {
	
		margin-top: 25px;
		margin-bottom: 25px;
		padding: 5px 15px;
		color: white;
		background-color: #CCC;
		border-radius: 8px;
	
		-webkit-animation: fade_out_keyframes 5s linear forwards;
		animation: fade_out_keyframes 5s linear forwards;
	}

	@-webkit-keyframes fade_out_keyframes {

		   0% { opacity: 1; }
		  50% { opacity: 1; }
		 100% { opacity: 0; }
	}

	@media only screen and (max-width: 800px) {

		.event_image_div {

			float: none;	
			width: auto;
			max-width: 400px;
			text-align: center;
			margin-left: 0;
			margin-bottom: 20px;
		}

		.event_content {
	
			float: none;	
			width: 100%;
			margin-top: 10px;
		}
	}
	
	
/* ----------------------------------------------------
   images
   ---------------------------------------------------- */
	
	.caption {
	
		color: #436214;
		font-size: 1.25rem;
		line-height: 160%;
		font-style: italic;
	}
	

/* ----------------------------------------------------
   search
   ---------------------------------------------------- */

	#search {
	
		display: none;
		position: absolute;
		bottom: 30px;
		left: 0px;
		width: 300px;
		padding: 20px 25px;
		background-color: #316FB0;
		border-top-right-radius: 10px;
	}

	
/* ----------------------------------------------------
   forms
   ---------------------------------------------------- */

	form {
	
		display: inline;
	}


/* ----------------------------------------------------
   resources
   ---------------------------------------------------- */

	#resource_items {
	
		clear: both;
		margin-top: 50px;
	}
		
	.resource_item_div {
	
		margin-bottom: 30px;
	}
		
	.resource_item_image_div {
	
		float: left;
		margin-bottom: 20px;
		width: 150px;
	}
	
	.resource_image_above_title {  
	
		display: block;  
	}
	
	.resource_image_below_title {  
	
		margin-top: 25px;
		margin-bottom: 25px;
		display:  none;  
	}
	
	.resource_item_image {
	
		width: 150px;
	}
	
	.resource_item_details {
	
		margin-left: 175px;	
		margin-bottom: 20px;
	}
	
	.resource_item_title {
	
		color: #0071B5;
		font-weight: bold;
		font-size: 2.25rem;
		line-height: 160%;
		margin-bottom: 6px;
	}
	
	.resource_item_citation {
	
		display: none;
		margin-top: 10px;
		padding: 0 25px 25px 25px;
		border: 1px solid black;
		background-color: #EEE;
		border-radius: 4px;
	}
	
	.resource_item_citation_text {
	
		font-size: 1.75rem;
		line-height: 160%;
	}

	.resource_citation_button {
	
		float: right !important;
		margin: 10px 0 0 10px;
	}
	
	@media only screen and (max-width: 1000px) {
	
		.resource_item_image_div {
	
			width: 100px;
		}
	
		.resource_item_image {
	
			width: 100px;
		}
	
		.resource_item_details {
	
			margin-left: 125px;	
		}
	}
	
	@media only screen and (max-width: 700px) {
	
		.resource_item_image_div {
	
			float: none;
			margin: 0 auto;
			width: 75%;
		}
	
		.resource_item_image {
	
			width: 100%;
		}
	
		.resource_image_above_title {  display:  none;  }
		.resource_image_below_title {  display: block;  }

		.resource_item_details {
	
			margin-left: 0;	
		}

		.blue_box {

			padding: 20px 40px;	
			margin-top: 40px;

			font-size: 2.0rem;
			border-radius: 10px;
		}
	}