/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
#slideshow { margin:5px auto; width:100%; height:auto }
#faded img { max-width:1024px; height:auto }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
	    #wrap, .spacer, nav, #topMenu, form, #top, #footer, #contentFull, #bottomBg, #topBg  { width:755px; margin:0 auto }
		.navigation { margin:-6px 0 0 0; font-size:16px }
		/*#logo { width:55%; height:auto; margin:0 auto 0 }*/
		#events { width:120px; height:77px; margin:-35px 0 0 0 }
		#events img { width:120px; height:77px }
		#newsletters { margin:-20px 90px 0 0 }
		#contentLeft { float:left; width:480px; margin:35px 0 0 10px }
		#sidebar { width:205px; height:auto; margin-left:20px }
		.module { width:180px }
		#slideshow { margin:0 auto; width:100%; height:auto }
		#faded img { margin:0 auto; width:100%; height:auto }
		#footer { width:750px; margin:0 auto }
		#join { font-size:14px; margin:0 }
		#join2 { font-size:1.2em; margin:0 }
		#leftBox, #buttons { width:450px }
		#buttons img { max-width:200px; height:auto }
		#copyright { width:500px; margin-left:20px }
                #topMenu {background-color: #000;}
}

/*  Mobile (Portrait) /* Note: Design for a width of 320px  */
@media only screen and (max-width: 767px) {
        #wrap, .spacer, nav, #topMenu, form, #top, #leftBox, #footer, #buttons { width:300px; margin:0 auto; height:auto; padding:0 }
		#logo { float:left; width: 95%; height:auto; margin:0 auto 0; }
		/*#topBg { height:170px; width:300px; margin:0 auto; background:url(../images/top-bg-smartphone.gif) }*/
		.navigation, nav { margin:0; overflow:hidden; font-size:13px }
		.navigation a, .navigation select { width:290px; margin-left:10px; height:30px; font-size:13px }
		#topMenu, #top { height:30px; background-color:#666; }
                #top {width:100%}
		nav { overflow:hidden; height:30px }
                #newsletters{float:left; width: 65%;}
                #newsletters img {width: 95%; height:auto}
                #social (width: 30%; float:left; }
                #social img (width: 95%; height:auto;}
		#events, #events img { width:0; height:0; display:none; margin:0; padding:0; visibility:hidden; width:0 }
		#bottomBg { width:100%;height:auto; overflow:hidden }
		#join { color:#fff; overflow:hidden; margin:10px auto; font-size:12px }
		#join p { font-size:12px }
		#join h3 { color:#fff }
		#join2 { color:#fff; overflow:hidden; margin:0 auto 0; font-size:1em; width:95% }
		#join2 p { font-size:1em }
		#join2 h3 { color:#fff }
		#buttons img { max-width:150px; height:auto; margin-top:5px }
		#contentLeft, #sidebar, #contentFull { margin:10px auto; width:275px; clear:both }
		.module { float:left; width:200px; margin-left:5px }				
		#slideshow { margin:5px auto; width:100%; height:auto}
		#faded img { margin:0; height:79px; width:300px }	
        #contentLeft .column, #contentFull .column { margin:0; margin-left:10px; padding:5px }
		.column { margin:0 }
		.one.column { width:95% }
		.news  { width:85% }
		#copyright { width:270px; margin:5px 0 0 25px; font-size:10px }
}

/* Mobile (Landscape) /* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	    #wrap, .spacer, nav, #topMenu, form, #top, #leftBox, #footer { width:420px; margin:0 auto; height:auto; padding:0 }
		#logo { width: 95%; height:auto; margin:0 auto 0; }
                #logo img {width: 95%; height:auto; margin: 0 auto 0}
		#topBg { height:170px; width:440px; margin:0 auto; background:url(../images/top-bg-smartphone.gif) }
		.navigation { margin:0; overflow:hidden }
		.navigation a, .navigation select { width:420px; margin-left:10px; height:30px }
		#topMenu, #top { height:30px; background-color: #666 }
		nav { overflow:hidden; height:30px }
                #newsletters{float:left; width: 65%;}
                #newsletters img {width: 95%; height:auto}
                #social (width: 30%; float:left; }
                #social img (width: 95%; height: auto;}
		#reserve img { width:0; height:0; display:none; margin:0; padding:0; visibility:hidden; width:0 }
		#join { float:left; margin-left:15px }
		#join2 { width:95%}
		#bottomBg { width:100%; height:auto; overflow:hidden }
		#buttons img { margin-top:5px; max-width:205px; height:auto }
		#buttons { width:410px; margin:0 0 0 20px }
		#contentLeft, #sidebar, #contentFull { margin:10px auto; width:400px; clear:both }
		.module { float:left; width:240px; margin-left:5px }		
		#slideshow { margin:5px auto; width:100%; height:auto }
		#faded img { margin:0; height:116px; width:440px }	
        #contentLeft .column, #contentFull .column { margin:0; margin-left:10px; padding:5px }
		.column { margin:0 }
		.one.column { width:95% }
		.news  { width:85% }
		#copyright { width:380px; margin:5px 0 0 25px; font-size:10px }
}
		
/*  Mobile (Smaller Phones) /* Note: Design for a width of 240px  */
@media screen and (min-width: 0px) and (max-width: 319px) {
		#wrap, .spacer, nav, #topMenu, form, #top, #leftBox, #footer, #join, #join2, #buttons { width:95%; margin:0 auto; height:auto; padding:0 }
		#logo, #logo img { height:auto; width: 95%; margin:5px auto 0 auto; }
		#topBg { height:170px; width:95%; margin:0 auto; background:url(../images/top-bg-smartphone.gif) }
		.navigation { margin:0; overflow:hidden }
		.navigation a, .navigation select { width:220px; margin-left:10px; height:30px }
		#topMenu, #top { height:30px }
		nav { overflow:hidden; height:30px }
                #newsletters{float:left; width: 65%;}
                #newsletters img {width: 95%; height:auto}
                #social (width: 30%; float:left; }
                #social img (width: 95%; height: auto;}
		#slideshow, #faded img, #events, #events img { width:0; height:0; display:none; margin:0; padding:0; visibility:hidden; width:0 }
		#bottomBg { width:100%; height:auto; overflow:hidden }
		#join { color:#fff; overflow:hidden; margin:10px 0; font-size:11px; width:200px; background:none }
		#join p { font-size:12px }
		#join h3 { color:#fff }
		#join2 { color:#fff; overflow:hidden; margin:10px 0; font-size:1em; width:95%; background:none }
		#join2 p { font-size:1em }
		#join2 h3 { color:#fff }
		#buttons img { max-width:150px; height:auto; margin-top:5px }
		#contentLeft, #sidebar, #contentFull { margin:10px auto; width:200px; clear:both }
		.module { float:left; width:180px; margin-left:5px }	
        #contentLeft .column, #contentFull .column { margin:0; margin-left:10px; padding:5px }
		.column { margin:0 }
		.one.column { width:95% }
		.news  { width:85% }
		#copyright { width:200px; margin:5px 0 0 25px; font-size:9px }
}

/* Drop Menu */
@media only screen and (max-width: 640px) {
	.navigation { margin:10px 0 0 0; width:auto; background-color:#666;
		ul {
			border:none;
			background:none;
			.border-radius(0);
		}
		li {
			border-right: none;
		}
		li:hover {
			a {
				.linear-gradient(#ff8400, #e07400, 100%);
				color:#fff;
			}
			.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:15px;
		}
		.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.5em }