/* 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  {max-width:90%; margin:0 auto }
		# navBar {
	background: url(../images/nav-2.png) no-repeat;
	width: 940px;
	height: 72px;
	margin: 0
}
		.navigation {
	width: 900px;
	margin-top: -6px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 60px;
	float: none;
}
		#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 { max-width:90%; 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: auto;
	margin: 0 auto
}
	    #footer .column  { width:200px }
		
		#prayer img { float:left; width:130px }
}

/*  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:50%; 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; margin-left:10px; padding:5px }
		.column { margin:0 }
		.one.column { width:95% }
		.news  { width:85% }
		
		.module { float:left; margin:10px 10px; width:200px }
		#prayer img { float:right; width:92px; margin:0px; auto; padding:13px }
		
		.disclaimer { width: 100%; height:auto}
		.aboutuspicture img {width: 100%; height:auto}
		.aboutuspicture  {width: 100%; height:auto}
		.photopastor img {height: auto;	width: 300px; margin:0 0 0 10px}
		
		#welcomephoto img {height:auto; width: 250px; margin:0 0 0 10px}
		#welcome  {width: 100%; height:auto}
		
}

/* 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; padding:5px }
        .column { margin:0 }
		.one.column { width:99% }
		.news  { width:85% }
		
		#prayer img { float:left; width:136px }
		.disclaimer { width: 85%}
		
		#welcomephoto img {height:auto; width: 400px; margin:0 0 0 10px}
}
		
/*  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:20%; 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; padding:5px }
        .column { margin:0 }
		.one.column  { width:90% }
		.news  { width:85% }
		.disclaimer { 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;
	text-align: left;
		}
		.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 }
.photopastor {height: auto;	width: 300px;float: right;padding: 20px;}