/* Tablet (Portrait) /* Note: Design for a width of 768px  */
@media only screen and (min-width: 768px) and (max-width: 959px) {
       #header, #content, #footer, #bottom { width:755px; margin:0 auto }
	   #logo, #logo img { height:auto; max-width:300px; margin:0 }	 		
		.navigation, nav { width:610px; float:left; margin:0 }
		.navigation a, .navigation { font-size:14px }
		#main { width:470px  }
		#mainFull { width:700px }
		#sidebar1 { width:240px; margin-left:12px }
		#sidebar1 .module { width:220px; height:auto;  }
		#slideshow, #faded img { margin:0 auto; width:735px; height:282px }
		#faded ul.pagination { float:left; margin:240px 0 0 100px }
		#faded ul.pagination li { width:24px; height:auto; margin:0 8px 0 0 }
		#homeBanners { width:740px; margin:0 auto }
	    #homeBanners img { max-width:242px; height:auto; margin:10px 2px 0 2px }
		#newsletter { background:url(../images/newsletter-tablet.png) no-repeat; width:242px; height:139px; float:left; margin:10px 0 0 0; overflow:hidden }
	    #newsletter .newsform { width:200px; margin:60px auto 0 auto; overflow:hidden }
	    #newsletter .input { height:18px; width:180px; background:#fff; color:#000 }
		#newsletter .button { margin-right:15px; margin-top:-3px }
	    #footer .column  { width:190px; margin:0 20px }
		#footer h3 { font-size:20px; line-height:20px }
		#social { float:right; width:125px; margin:5px 0 0 0 }
		#social img { margin-left:3px; max-width:30px; height:auto }
		 .one.column, .column  { width:95%; overflow:hidden; margin:5px 0 }
		img { max-width:100%; height:auto }
}

/*  Mobile (Portrait) /* Note: Design for a width of 320px  */
@media only screen and (max-width: 767px) {
        #footer, #header, #content { width:300px; margin:0 auto }
		#bottom { display:none; visibility:hidden; margin:0; padding:0; height:0; width:0 }
		#logo, #logo img { height:auto; max-width:300px; margin:20px auto 0 auto; float:none }
		.navigation { font-size:12px; position:absolute; top:5px; left:10px }
		.navigation a, .navigation select {  font-size:12px; width:290px; color:#000; background:#fff }
		.navigation select { display:block; max-width:100% }
		#social { display:none }
		#main, #sidebar1, #mainFull { margin:5px auto; width:275px; float:left }
		#slideshow { margin:0 auto; height:123px; width:300px }
		#faded img { margin:0; height:123px; width:300px }	
		#homeBanners { width:290px; margin:3px auto }
		#homeBanners img { width:290px; height:auto; margin:6px 0 0 0 }
		#newsletter { background:url(../images/newsletter-mobile.png) no-repeat; width:290px; height:166px; float:left; margin:6px 0 0 0; overflow:hidden }
	    #newsletter .newsform { width:220px; margin:70px auto 0 auto; overflow:hidden }
	    #newsletter .input { height:18px; width:210px; background:#fff; color:#000 }
		#hours { margin:-10px auto 10px auto; width:280px; font-size:14px }
		#hours h2 { font-size:18px }
		#footer { padding-top:20px }
	    #footer .column  { width:240px }
       .one.column, .column  { width:95%; overflow:hidden; margin:5px 0 }
		#faded ul.pagination li.current a, #faded ul.pagination li a, #faded ul.pagination li a:hover, #faded ul.pagination { display:none; visibility:hidden; margin:0; height:0 }	
		img { max-width:100%; height:auto }
		.events { width:80% }
		.div { padding:0; border:none }
}

/* Mobile (Landscape) /* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
       #footer, #header, #content, #homeBanners { width:440px }
		#bottom { display:none; visibility:hidden; margin:0; padding:0; height:0; width:0 }
		#logo, #logo img { height:auto; max-width:100%; margin:20px auto 0 auto; float:none }
		.navigation { font-size:13px; position:absolute; top:5px; left:10px }
		.navigation a, .navigation select { width:440px; color:#000; background:#fff }
		.navigation select { display:block; max-width:100% }
		#main, #sidebar1, #mainFull { margin:5px auto; width:420px; clear:both; float:left }
		#sidebar1 .module { float:left }	
		#slideshow { margin:0 auto; height:181px; width:440px }
		#slideshow { background:none }
		#faded img { margin:0; height:181px; width:440px }
		#hours { margin:-20px auto 10px auto; width:300px }
		#footer { margin-left:15px }
	    #footer .column  { width:370px }
		.column, .news { width:98% } 
		#faded ul.pagination li.current a, #faded ul.pagination li a, #faded ul.pagination li a:hover, #faded ul.pagination { display:none; visibility:hidden; margin:0; height:0 }	
		img { max-width:100%; height:auto }
		.events { width:80% }
	
}
		
/*  Mobile (Smaller Phones) /* Note: Design for a width of 240px  */
@media screen and (min-width: 0px) and (max-width: 319px) {
        #bottom, #newsletter { display:none; visibility:hidden; margin:0; padding:0; height:0; width:0 }
		#header, #content, #homeBanners, #sidebar1 .module { width:220px; }
		#logo, #logo img { height:auto; max-width:100%; margin:15px auto 0 auto; float:none }
		.navigation { font-size:12px; position:absolute; top:0; left:0 }
		.navigation a, .navigation select {  font-size:12px; width:210px; color:#000; background:#fff }
		.navigation select { display:block; max-width:100% }
		#social { display:none }
		#main, #sidebar1, #mainFull { margin:5px auto; width:200px; float:left }
		#sidebar1 .module { float:left; margin-left:-10px }	
		#footer h3 { font-size:20px; line-height:20px }	
		#homeBanners img { max-width:180px; height:auto; margin:0 0 -10px 15px }
	    #footer, #footer .column  { width:200px }
		#footer .column input { width:160px }
       .column, .news, .menu { width:95% }
		#hours, #slideshow, #faded img, #faded ul.pagination li.current a, #faded ul.pagination li a, #faded ul.pagination li a:hover, #faded ul.pagination { display:none; visibility:hidden; margin:0; height:0 }	
		img { max-width:100%; height:auto }
		.events { width:80% }
}

/* Drop Menu */
@media only screen and (max-width: 640px) {
	.navigation { margin:0; width:auto; overflow:hidden;
		ul {
			border:none;
			background:none;
			.border-radius(0);
		}
		li {
			border-right: none;
		}
		li:hover {
			a {
				.linear-gradient(#ff8400, #e07400, 100%);
				color:#fff;
	font-family: "Times New Roman", Times, serif;
			}
			.children {			
				a {
					color:#000;
				}
				a:hover {
					.linear-gradient(#ff8400, #e07400, 100%);
					color: #fff;
				}
			}
		}
		a {
			border:1px solid #ddd;
			.border-radius();
			font-size:1.2em;
			height:auto;
			.linear-gradient();
			line-height:1em;
			padding:10px;
		}
		.children {
			border:1px solid #ddd;
			.border-radius(5px);
			top: 40px;
		}
	}
	.instructions {
		.border-radius();
		color:#fff;
		font-size:1.2em;
		.linear-gradient(#ff8400, #e07400, 100%);
		line-height:1em;
		margin:0 0 5px;
		padding:5px 10px
	}
}

.navigation select { font-size:1.2em }
