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

	stylesheets/public/home.css

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

/* ----------------------------------------------------
   main divs
   ---------------------------------------------------- */

	#slideshowContainer, #homePageTextDiv {  
	
		position: relative;
		padding: 0;	
	}
	
	/*  super narrow screen = one column */
	
	@media screen and (max-width: 644px) {

		#slideshowContainer {

			width: 300px;
			margin: 0 auto;
		}

		#homePageTextDiv {
	
			width: 90%;
			margin: 0 auto;
		}
	}
	
	/*  narrow screen = one column, doubled slideshow images */
	
	@media screen and (min-width: 645px) and (max-width: 830px) {

		#slideshowContainer {

			width: 615px;
			margin: 0 auto;
		}
		
		.slideshow_image_div.evenSlide {
		
			margin-right: 15px;
		}

		#homePageTextDiv {
	
			width: 90%;
			margin: 0 auto;
		}
	}
	
	/*  medium screen = one slide column, one text column */
	
	@media screen and (min-width: 831px) and (max-width: 1175px) {

		#slideshowContainer {
	
			position: absolute;
			top: 175px;
			left: 20px;
			width: 300px;
		}

		#homePageTextDiv {
	
			margin-left: 350px;
			margin-right: 50px;
		}
	}
	
	/*  very wide screen = two columns */
	
	@media screen and (min-width: 1176px) {

		#slideshowContainer {
	
			position: absolute;
			top: 175px;
			left: 20px;
			width: 615px;
		}
		
		.slideshow_image_div.evenSlide {
		
			margin-right: 15px;
		}

		#homePageTextDiv {
	
			margin-left: 675px;
			margin-right: 50px;
		}
	}


/* ----------------------------------------------------
   home page box
   ---------------------------------------------------- */

	#homePageBox {
	
		width: 400px;
		background-color: #F9E8AB;
		margin-top: 20px;
		margin-bottom: 20px;
		border: 3px solid #400011;
		border-radius: 10px;
	}

	#homePageBoxTitle {
	
		font-size: 150%;
		font-weight: 800;
		background-color: #400011;
		color: #F9E8AB;
		text-align: center;
		padding: 10px 0 10px 0;
		border-top-left-radius: 6px;
		border-top-right-radius: 6px;
	}

	#homePageBoxText {
	
		color: #400011;
		padding: 2px 7px 0 7px;
	}

	#homePageBoxText li {
	
		font-size: 120%;
	}

/* ----------------------------------------------------
   slideshow
   ---------------------------------------------------- */

	#slideshowContainer {

		margin-bottom: 25px;
	}
	
	.slideshow_image {

		width: 100%;
		max-width: 300px;
		height: auto;
	}

	.slideshow_image_div {
	
	    -webkit-transition: opacity 2s;
	    -moz-transition: opacity 2s;
	    -o-transition: opacity 2s;
	    transition: opacity 2s;
	    
	    z-index: 1;
	    
		float: left;
	    position: relative;
	    width: 300px;
	    
	    margin-bottom: 15px;
	    
	    cursor: pointer;
	}