/* KK changes 12/10/14 for mobile friendly design 
-------------------------------------------------------------- */

@media only screen and (min-width: 769px) and (max-width: 959px) {
	#topbar .topbar-wrapper {
		width: 96%;
	}
}

@media only screen and (min-width: 641px) and (max-width: 768px) {
	#head-content {
		background: url("images/boat-people-med.png") no-repeat center bottom;
		margin: 0px auto;
		padding: 0px;
		max-width: 100%;
		min-height: 150px;
	}

	#topbar .topbar-wrapper {
		width: 96%;
	}

	#sitetitle, #sitetitle .title, #logo, .head-banner468 {
		width: 180px !important;
	}
	
	#sitetitle,
	#logo {
		width: 180px !important;
		display:block;
		float:left;
		clear:both;
		margin:0 0 10px;
		padding:0;
	}	

}

@media only screen and (min-width: 567px) and (max-width: 640px) {

	#topbar .topbar-wrapper {
		width: 96%;
		text-align: center;
	}

	#sitetitle,
	#logo {
		width: 180px !important;
		display:block;
		float:left;
		clear:both;
		margin:0 0 10px;
		padding:0;
	}
}

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

	#topbar {
		height: auto;
	}

	#topbar .topbar-wrapper {
		width: 100%;
		text-align: left;
	}

	#topbar .toolbar-link {
		display: block;
		width: 150px;
		margin: 0px auto;
	}

	#newsletter .signup {
		margin: 0px auto;
		margin: 20px 0px;
	}

	#newsletter {
		float: left;
		width: 100%;
	}

	#sitetitle, #logo {
		display: none !important;
	}

	#head-content {
		background: transparent;
		margin: 0px auto;
		padding: 0px;
		max-width: 100%;
		min-height: 150px;
	}

	#sitetitle,
	#logo {
		width: 180px !important;
		display:block;
		float:left;
		clear:both;
		margin:0 0 10px;
		padding:0;
	}

	#mobile-logo {
		display: block;
		background: #fff;
	}

	#mobile-logo a {
		background: url("images/logo-mobile.gif") no-repeat top center;
		width: 170px;
		height: 180px;
		display: block;
		margin: 0px auto;
		text-indent: -100000px;
	}
}