/* Warrenton Community Church mobile-responsive CSS */

/* Global properties ======================================================== */
* { margin:0; padding:0;}     /* turns off extra spacing around paragraphs*/

html{
height:100%;				/* Force vertical scrollbars in Moz + Opera to prevent 'jumping' */
margin-bottom:1px;
overflow-y:scroll;			/* this line is for IE */
}

a {
	color: #002b57;
	font-weight: bold;
	text-decoration: none; 
}
a:hover {	color: #632B38;}

body {
	background-image: url(images/BkGrayMed.jpg);
 	background-repeat:repeat;
	background-attachment: scroll;
}

h1{
	font-family: "Century Gothic", 'Questrial', 'Muli', Arial, Helvetica, sans-serif;
	text-align:center;
	color: #002b57;
	font-weight:bolder;
	font-size: 20px;
	line-height: 20px;
	margin-top: 10px;
	margin-bottom: 10px;
}

h2{
	font-family: "Century Gothic", 'Questrial', 'Muli', Arial, Helvetica, sans-serif;
	text-align:center;
	color: #fff;
	font-weight: bold;
	font-size: 20px;
	line-height: 20px;
}

h3{
	font-family: "Century Gothic", 'Questrial', 'Muli', Arial, Helvetica, sans-serif;
	color: #555555;
	font-weight: bold;
	font-size: 16px;
	display: inline; 
}
h4{
	font-family: "Century Gothic", 'Questrial', 'Muli', Arial, Helvetica, sans-serif;
	color: #555555;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
}

img {border: 0px; padding: 0px;}

img.center {					/* This is to center an image for all browsers */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.BkGrayDk {background:url(images/BkGrayDk.jpg) repeat;}
.BkBlue {background:url(images/BkBlue.jpg) repeat;}

.bulletlist {
  	padding:0;   
  	margin:0;   
  }
.bulletlist li {
	list-style-type:circle;
	list-style-position:inside;
	}

.Centered {margin: auto; }

.ContentsCentered {text-align: center;}
.ContentsLeft {	text-align: left;	}
.ContentsRight {	text-align: right;}


.copyright{
	color:#fff;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	font-weight:normal;
}

.FloatR {float:right; padding-left: 10px;}
.FloatL {float:left; padding-right: 10px;}

.Link_Copyright {
	color:#fff;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 12px;
	text-decoration: none;
	font-weight:normal;
	line-height: 25px;
}
.Link_Copyright:hover {
	text-decoration: underline;
}

.Link_Body {
 	color: #002b57;
	font-weight: bold;
	text-decoration: none; 
}
.Link_Body:hover {
 	color: #555555;
	text-decoration: underline; 
}


.Pad10 {padding: 10px;}

.SectionBody {
	padding-right: 20px;
	padding-left: 20px;
	min-height: 300px;         /* specifies minimum row height so all pages are same unless they are larger */
	vertical-align: top;
}

.SlideBackground {
	vertical-align: middle;
	text-align: center;
	margin: auto;
	background-image: url(images/BkGrayDk.jpg);
 	background-repeat:repeat;
}

.TextWhite {	color: #fff;}
.TextBlue {	color: #002b57;}

.VerticalTop {vertical-align: top;}
.VerticalMid {vertical-align: middle;}

.VisionTable {width: 250px; float: right; margin-top: 15px; margin-left: 10px;}
.VisionTable td {padding: 2px;}


.NavBox {	 
    background-image: url(images/BkBlue.jpg);  
    background-repeat:repeat; 
    text-align: center; 
    padding-top: 8px;
    padding-bottom: 8px;
}

#mainmenu {
	margin: 0;
	padding: 0;
	text-align: center;
    margin-left: auto;
    margin-right: auto;  
    padding: 10px;
}

#mainmenu li {
	height: 30px;
	margin: 0;
	padding-top: 6px;
	padding-bottom: 0px;
	display:inline;
	vertical-align:iddle;
}
#mainmenu a {
    font-family: "Century Gothic", 'Questrial', 'Muli', Arial, Helvetica, sans-serif;
 	color: #fff;
	font-weight: bold;
	text-decoration: none; 
	font-size: 16px;
    line-height: 1.8em;
	padding:0 6px;            /* space between nav links */
}
#mainmenu a:hover {
    color: #ccc;
	
}


#PageContainer {
    width: 910px;
    text-align: center;
    background:url(images/BkGrayDk.jpg) repeat;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-top: 5px;
}

#Header, #BannerPhoto, #WhitePage {
    width: 900px; 
    text-align: center;
    margin-left: auto;
    margin-right: auto;  
}
#Header {margin-top: 5px;}

#WhitePage {
 background-color: white!important;
    margin-bottom: 5px;
    padding-top: 15px;
}

#PageContent  {
    color: #555555;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	line-height: 20px;
	text-align: left;
	vertical-align: top;
    margin-left: 20px; margin-right: 20px; margin-top: 5px; margin-bottom: 20px;
}
#Footer {
    width: 900px; 
    text-align: center;
    margin-left: auto;
    margin-right: auto; 
    padding: 10px 10px 10px 10px;
    line-height: 1.6em;
}

.LoveNeverFails {  padding-bottom: 10px; margin-left: 10px; margin-right: 10px}


/* FOR SPECIFIED VIEWPORTS */ 

@media all and (min-width: 1000px) {
	.MobileHide {display: inline-block;}
	.MobileShow {display: none;}
  
}

/* Smaller than 1000 */ 
@media all and (max-width: 999px) {
    img { max-width: 100%; height: auto; }
    #PageContainer, #Header, #BannerPhoto, #WhitePage {width: 100%;}   
    #PageContainer {
        background: unset;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-top: 0px;
    }
    #Header { margin-top: 0px;}
    #Footer {width: 95%;}  
    .LoveNeverFails {  width: 90%; padding-bottom: 10px; margin-left: auto; margin-right: auto}

}


@media all and (max-width: 767px) { 
    .VisionTable {float: unset; margin: 15px auto 10px auto; padding: 4px;}
    h1, h2 {font-size: 18px;}
    #PageContent  {font-size: 14px;}
    .NavBox {padding-top: 4px; padding-bottom: 4px;}
}


/* very small devices ONLY HAVE A FEW DIFFERENCES to override the above */ 
@media all and (max-width: 480px) {
    #PageContent  {font-size: 12px;}
}

@media all and (max-width: 320px) {
}