@charset "utf-8";

/* Media queries ------------------------------------ */

@media screen and (max-width: 1150px) {
	#banner {
		width: 55%;
		height: auto;
		float: left;
	}
}
@media screen and (max-width: 1025px) {
	#banner {
		width: 52%;
		height: auto;
		float: left;
	}
}


@media screen and (max-width: 950px) {
	#banner {
		width: 50%;
		height: auto;
		float: left;
	}
	#top-nav li a {
		display: block;
		padding: 5px 3px;
		color: #FFF;
	}
}
@media screen and (max-width: 900px) {
	.projectFloat {
		width: 50%;
		float: left;
	}
}
@media screen and (max-width: 850px) {
	#mixed-area .imgHolder {
		width: 100%;
		margin: 25px auto 25px auto !important;
		max-width: 800px;
	}
	
	#banner {
		/*width: 275px;*/
		width: 100%;
		height: auto;
		float: left;
	}
	#top-nav {
		font-size: 135%;
		float: none;
	}
	/*
	#top-nav li {
		padding-left: 12px;
	}*/
	#top-nav li {
		margin-top: 5px;
		float: left;
		padding-left: 0px;
	}
		#top-nav li a {
		display: block;
		/*padding: 10px 3px;*/
		/*padding: 20px 15px 15px 15px;*/
		padding: 10px 10px 10px 0px;
		/*color: #637812;*/
		color: #FFF;
	}
	
	.picPageLeft {
		width: 100%;
		float: none;
	}
	
	.picPageRight {
		width: 100%;
		float: none;
	}
	
	#mainImage {
		/* this is for picpage - I think it'll be ok for the others...? */
		margin-left: 0px;
		margin-bottom: 0px;
	}
	
	.slideshowFloat {
		width: 100%;
		float: none;
	}
	
	.mainImageFloat {
		width: 100%;
		float: none;
	}
	
	#slideshow {
		margin-bottom: 0px;
	}
	
	.bottom-border1 {
		margin-bottom: 40px;
		margin-top: -2px;
	}
	/*
	.bottom-border-slideshow {
		margin-bottom: 20px;
	}
	*/
	.textFloat {
		width: 100%;
		float: none;
	}
	
	.thumb3 img {
		margin: 0px 4% 4% 0px;
	}
	.thumb4 img {
		width: 25%;
		margin: 0px 4% 4% 0px;
	}
	
	#text-area {
		padding-top: 20px;
		padding-right: 0px;
		padding-left: 0px;
	}
	
	.thumbLeft img {
		width: 26%;
	}
	.slideshowPlaces {
		width: 100%;
		float: none;
		margin-bottom: 25px;
		/*=======transitions===========*/
		-webkit-transition: all 0.75s ease;
		-moz-transition:  all 0.75s ease;
		-ms-transition: all 0.75s ease;
		-o-transition: all 0.75s ease;
		transition: all 0.75s ease;	
		/*=============================*/
	}
	.textPlaces {
		width: 100%;
		float: none;
		margin-top: -40px;
		/*=======transitions===========*/
		-webkit-transition: all 0.75s ease;
		-moz-transition:  all 0.75s ease;
		-ms-transition: all 0.75s ease;
		-o-transition: all 0.75s ease;
		transition: all 0.75s ease;	
		/*=============================*/
	}
	#text-area-places {
		color: #879a35;
		padding: 10px 35px 0px 5px;
		/*margin-bottom: 0px*/
	}
}
@media screen and (max-width: 700px) {
		/*
	#banner {
		width: 300px;
	}
	
	#top-nav {
		float: left;
		margin-top: 15px;
		margin-bottom: 15px;
		font-size: 115%;
	}
	
	#top-nav li {
		padding-left: 0px;
		padding-right: 35px;
	}
	
	.homeButton {
		display: none;
	}
	
	.floatLeft50 {
		width: 100%;
	}
	
	.floatLeft65 {
		width: 100%;
	}
	
	.floatLeft35 {
		width: 100%;
	}
	
	.floatLeft50 #text-area p {
		padding-right: 0%;
	}*/
	/*
	.thumb3 img {
		margin: 0px 4% 4% 0px;
	}*/
}

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

	.thumbLeft img {
			width: 24%;
			margin: 0px 4% 4% 0px;
		}
	.projectFloat {
			width: 100%;
			float: left;
		}
	
}

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

	.homeButton {
		display: none;
	}
}

@media screen and (max-width: 400px) {
	
	#banner {
		width: 95%;
	}
	
	#top-nav {
		font-size: 105%;
	}
	
	#top-nav li {
		padding-right: 15px;
	}
	
	#text-area {
		padding-top: 15px;
		padding-right: 5px;
	}
	
	#thumb-area {
		margin-top: 0px;
		padding-left: 5px;
	}
	
}