/* Tablet (Portrait) /* Note: Design for a width of 768px  */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	    #container, .spacer, nav, form, #copyright  { width:755px; margin:0 auto }
		#navBar { background:url(../images/nav-2.png) no-repeat; width:755px; height:72px; margin:0 }
		.navigation { margin:-6px 0 0 15px }
		#social, #faded ul.pagination li.current a, #faded ul.pagination, #faded ul.pagination li a, #faded ul.pagination li a:hover { display:none; margin:0; padding:0; visibility:hidden }
		#logo img, #logo { width:250px; height:auto; margin:0 }
		#headerButtons { float:right; width:440px; margin:0 10px 0 0; padding:0 } 
		#headerButtons img { width:130px; height:auto } 
		#contentLeft { float:left; width:500px; margin:35px 0 0 10px }
		#sidebar1, .join, .join img { width:205px; height:auto }
		.module { width:170px }
		#slideshow { margin:0 0 15px 10px; width:480px; height:273px }
		#faded, #faded img { margin:0 auto; width:480px; height:273px }
		#footer { width:740px; margin:0 auto }
	    #footer .column  { width:200px }
}

/*  Mobile (Portrait) /* Note: Design for a width of 320px  */
@media only screen and (max-width: 767px) {
        #container, .spacer, nav, form, #copyright, #navBar { width:300px; margin:0 auto; background-image:none; height:auto }
		#logo, #logo img { height:auto; max-width:240px; margin:0 auto; float:none }
		#headerButtons { float:left; width:290px; margin:0 0 -15px 9px } 
		#headerButtons img { float:left; width:92px; margin:0 0 0 2px; height:auto }
		.navigation { margin:-30px 0 0 0 }
		.navigation a, .navigation select { font-size:13px; width:290px; margin-left:10px }
       #social, #faded ul.pagination li.current a, #faded ul.pagination, #faded ul.pagination li a, #faded ul.pagination li a:hover { display:none; margin:0; padding:0; visibility:hidden; width:0 }
		#contentLeft, #sidebar1, #footerContent, #contentFull { float:left; margin:10px 0; width:275px }			
		#slideshow { margin:5px 0 15px 9px; height:150px; width:270px }
		#faded img, #faded { margin:0; height:150px; width:270px }	
		#footer { width:255px; margin:0 auto; padding:13px; background:#000; background-image:none; overflow:hidden; height:auto }
	    #footer .column  { width:240px }
        #contentLeft .column, #contentFull .column { margin:0; background:#f2ead5; margin-left:10px; padding:5px }
		.column { margin:0 }
		.one.column { width:95% }
		.news  { width:85% }
}

/* Mobile (Landscape) /* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
        #container, .spacer, nav, form, #copyright, #navBar { width:420px; margin:0 auto; background-image:none; height:auto }
		#logo { margin:0 auto }
		#headerButtons { float:left; width:420px; margin:0 auto -15px auto }
		#headerButtons img { float:left; width:136px }
		.navigation { margin:-30px 0 0 0 }
		.navigation a, .navigation select { font-size:13px; width:420px }
		#social, #faded ul.pagination li.current a, #faded ul.pagination, #faded ul.pagination li a, #faded ul.pagination li a:hover { display:none; margin:0; padding:0; visibility:hidden }
		#contentLeft, #sidebar1, #contentFull { float:left; margin:10px 0; width:420px }
		.module { float:left; margin:10px 0; width:300px }
		#slideshow { margin:15px auto; height:240px; width:410px }
		#faded img, #faded { margin:0; height:240px; width:410px }
		#footer { width:400px; margin:0 auto; padding:13px; background:#000; background-image:none; overflow:hidden; height:auto }
	    #footer .column  { width:380px }
		 #contentLeft .column, #contentFull .column { margin:0; background:#f2ead5; padding:5px }
        .column { margin:0 }
		.one.column { width:99% }
		.news  { width:85% }
}
		
/*  Mobile (Smaller Phones) /* Note: Design for a width of 240px  */
@media screen and (min-width: 0px) and (max-width: 319px) {
        #container, #footerContent, #copyright { width:220px }
		#logo, #logo img { height:auto;  max-width:100%; margin:0 auto; float:none }
		#headerButtons, #headerButtons img, #slideshow, #slideshow img { display:none; visibility:hidden; margin:0; height:0 }
		.navigation { margin:-20px 0 0 0 }
		.navigation a, .navigation select { font-size:13px; width:220px }
         #navBar, #social, #faded ul.pagination li.current a, #faded ul.pagination, #faded ul.pagination li a, #faded ul.pagination li a:hover { display:none; margin:0; padding:0; visibility:hidden }
		#contentLeft, #sidebar1 { float:left; margin:10px 0; width:220px }			
		#slideshow, #faded img { display:none; visibility:hidden }
		.join { width:200px; height:auto }
		#footer { width:194px; margin:0; padding:13px; height:auto }
	    #footer .column  { width:150px }
		#contentLeft .column, #contentFull .column { margin:0; background:#f2ead5; padding:5px }
        .column { margin:0 }
		.one.column  { width:90% }
		.news  { width:85% }
}

/* Drop Menu */
@media only screen and (max-width: 640px) {
	.navigation { margin:20px 0 0 0; width:auto;
		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 }