@media only screen
and (min-device-width:320px)
and (max-device-width:1024px) {
	@font-face {
	  font-family: ChevalierDevice;
	  src: url("chevalierbeckerstripesdisc.ttf") format("truetype");
	}
	.MainHeading, #Navigation ul li a { 
		font-family: ChevalierDevice, sans-serif;
	}
}

/* below 100% */
@media screen and (max-width: 881px) {
	#Navigation {
		width: 314px; margin: 0 auto 26px auto; padding: 0 0 21px 0;
		float: none;
	}
		#Navigation ul li {
			display: block; float: left;
		}
		#Navigation ul li.last {
			padding-bottom: 23px;
			display: block;
			background: url(../images/nav-Highlight.jpg) no-repeat center bottom;
		}
	#ImageContainer {
		width: 70%; max-width: 552px; height: auto; margin: 0 auto;
		float: none; clear: both;
	}
		.slideshow {
			width: 100%; max-width: 552px;
		}
		.slideshow img {
			max-width: 100%; width: auto; height: auto;
		}
	#Content {
		width: auto; margin: 0 auto; padding: 0 40px 46px 40px;
		float: none; clear: both;
	}
		#Content img {
			max-width: 100%; height: auto;
		}
	#Features {
		margin: 0 auto;
		float: none; clear: both;
	}
}
/* 320 and below */
@media screen and (max-width: 320px) {
}
@media only screen
and (min-width:320px)
and (max-width:480px) {
	#Logo span, #Logo h1 {
		background: url(../images/logo-astoria-sml.png) no-repeat center top;
	}
	div.Heading {
		background-image: none;
	}
	h1.MainHeading, h2.MainHeading {
		 padding: 0 30px;
		font-size: 24px; line-height: 29px;
		background-image: none;
	}
	#Navigation {
		width: 260px;
	}
	#Navigation ul li {
		width: 130px; padding-bottom: 11px;
		background-image: none;
	}
		#Navigation ul li.last {
			padding-bottom: 0;
			background-image: none;
		}
	#Navigation ul li a {
		width: 130px; height: 18px;
		display: block;
		font-size: 16px; line-height: 18px;
	}
}