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

	public/home.css

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


/* ----------------------------------------------------
   bob
   ---------------------------------------------------- */
	
	#bob {
	
		position: absolute;
		top: -50px;
		right: 0px;
		width: 471px;
		height: 471px;
	}

	#bob_buffer {
	
		position: relative;
		top: -50px;
		float: right;
		width: 501px;
		height: 471px;
	}

	#bob_background {
	
		position: absolute;
		z-index: 10;
		width: 471px;
		height: 471px;
	}
	
	.bob_arm {
	
		display: none;
		position: absolute;
		z-index: 200;
	}

	#bob_map {
	
		position: relative;
		height: 471px;
		width: 471px;
		z-index: 1000;
	}
	
	#bob_tickles {  
	
		display: none;
		position: absolute;
		left: 70px;
		top: 105px;
		z-index: 2000;
		opacity: 0;
	}
	
	#bob_greeting {
	
		display: none;
		position: absolute;
		left: 204px;
		top: 215px;
		z-index: 2000;
		opacity: 0;
	}
	
	#bob_team       { left: 221px; top:   0px; }
	
	#bob_programs   { left: 267px; top: 129px; }
	
	#bob_workshops  { left: 268px; top: 217px; }
	
	#bob_resources  { left: 229px; top: 270px; }
	
	#bob_events     { left:  69px; top: 266px; }
	
	#bob_engage     { left:   0px; top: 229px; }
	
	#bob_contact    { left:   0px; top:  84px; }
	
	#bob_about      { left:   0px; top:   0px; }
	
	.bob_fade_in_out {
	
		-webkit-animation: bob_fade_in_out_keyframes 5s linear forwards;
		animation: bob_fade_in_out_keyframes 5s linear forwards;
	}

	@-webkit-keyframes bob_fade_in_out_keyframes {

		   0% { opacity: 0; }
		  10% { opacity: 1; }
		  90% { opacity: 1; }
		 100% { opacity: 0; }
	}

	@keyframes bob_fade_in_out_keyframes {

		   0% { opacity: 0; }
		  10% { opacity: 1; }
		  90% { opacity: 1; }
		 100% { opacity: 0; }
	}


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

	.event_header {
	
		margin-top: 25px;
		font-size: 2.25rem;
		line-height: 160%;
	}
	
	.event_date {
	
		color: #767676;
		font-size: 1.8rem;
	}
	
	.event_image {
	
		width: 150px;
	}


/* ----------------------------------------------------
   programs
   ---------------------------------------------------- */

	.home_page_programs_section_container {
	
		width: 100%;
		text-align: center;
	}
	
	#home_page_programs_section_left_half,
	#home_page_programs_section_right_half {
	
		float: left;
		width: 50%;
		margin: 0 auto;
	}
	
	#home_page_programs_section_left_half {
	
		text-align: right;
	}
	
	#home_page_programs_section_right_half {
	
		text-align: left;
	}
	
	.home_page_programs_section {
	
		float: left;
		margin: 0 auto;
		margin-bottom: 20px;
		width: 150px;
	}
	
	#home_page_programs_section_left_half .home_page_programs_section {
	
		float: right;
	}
	
	.home_page_programs_icon_div {
	
		text-align: center;
		margin-bottom: 15px;
	}
	
	.home_page_programs_icon_image {
	
		width: 100px;
		height: 100px;
	}
	
	.home_page_programs_label {
	
		text-align: center;
		font-size: 2.25rem;
	}

	.home_page_programs_label a {
	
		font-weight: normal !important;
	}
	
	@media only screen and (max-width: 800px) {

		#home_page_programs_section_left_half,
		#home_page_programs_section_right_half {
	
			float: none;
			width: 100%;
		}

		#home_page_programs_section_left_half .home_page_programs_section {
	
			float: left;
		}

		#home_page_programs_section_left_half {
	
			text-align: left;
		}
	}
	
/* ----------------------------------------------------
   highlights
   ---------------------------------------------------- */

	.highlight_div, .also_div, .awards_div {
	
		float: left;
		width: 30%;
		margin-left: 5%;
		text-align: center;
	}
	
	.highlight_div_first, .also_div_first, .awards_div_first {
	
		margin-left: 0;
	}
	
	.highlight_image, .also_image  {
	
		width: 100%;
	}
	
	.awards_image  {
	
		width: 75%;
	}
	
	.highlight_caption_div {
	
		margin-top: 15px;
		text-align: center;
	}
	

/* ----------------------------------------------------
   responsive
   ---------------------------------------------------- */
	
	@media only screen and (max-width: 1050px) {
	
		#content {
		
			margin-top: 100px;
		}
		
		#bob {
	
			position: relative;
			top: 0;
			margin: 0 auto;
			width: 471px;
			height: 471px;
		}

		#bob_buffer {
	
			display: none;
		}
	}		
	
	@media only screen and (max-width: 650px) {

		#content {
		
			margin-top: 170px;
		}
		
		#bob {
	
			display: none;
		}
		
		.indented {
		
			padding-left: 0 !important;
		}

		.highlight_div, .also_div, .awards_div {
	
			float: none;
			width: 100%;
			margin-top: 30px;
			margin-left: 0;
		}
	}