body {
	font-family: Cambria, Georgia, "Times New Roman", Times,  serif;
	color:#5f5f5f; /* med gray*/
	font-size: 1.000em;  /*-- base font 16px --*/
	top:0;
	left:0;
	margin:0 10px;
	padding:0;
	background:#F0FFFf; /*very pale teal*/ }

H1, H2, H3, H4 { color: #000080;	/*navy*/
 font-family: "Arial Narrow", Arial, sans-serif;  font-variant: normal; font-weight: 100;   text-shadow: 2px 2px #EBEBEB;
font-style: italic; -webkit-font-smoothing: antialiased; } 

H1 {font-size:22px; 	text-align:center; }
H2 {font-size:21px; text-align:left; } 
H3 {font-size:20px;	text-align:left;} 
H4 {font-size:18px; text-align:left;} 


#container {
	width:64.000em; /*1040px*/
	max-width:1040px;
	position:relative;
	margin: 0 auto;
	border:1px solid #999;
	background:#fff;     
	box-shadow: 3px 3px 3px #ccc;
	border-radius:10px;  }
	
#header {margin:0 auto; 
	text-align:center; }


#content { margin:0 auto;
	font-size:110%;
 	line-height:24px;
	width:90%;  /*936px or 52px margins*/  }

#footer {clear:both;
	 font-size:90%;
	width:100%;
	line-height:18px; }
	
	
	
	/*----------FONTS --------------*/

			/*16px base font */
.largefont {font-size:1.000em}       /*--16px--*/
.exlargefont {font-size:1.125em; }   /*--18px--*/
.exexlargefont {font-size:1.250em; }   /*--20px--*/
.exexexlargefont {font-size:1.375em; }  /*--22px--*/
.verylargefont {font-size:1.500em; }   /*--24px--*/


.blue {color:#0000ff;}
.red {color:#ff0000;}
.white {color:#fff; }
.teal {color:#00b3b3;}  /*almost grass green*/
.purple {color: #666699; }
.paleteal {color:#DBFFFB;}


			/* ----------POSITIONING --------*/

.left {text-align:left;} 
.center {text-align:center;}
.right {text-align:right;} 

.textbottom {vertical-align:text-bottom;}
.textmiddle {vertical-align:middle;}
.texttop {vertical-align:top;}
.textbaseline {vertical-align:baseline;} 

.clearboth {clear:both;}
.clearleft {clear:left;}
.clearright {clear:right;}


			/*-------PADDING MARGINS -----------*/

.pad5 {padding:5px; }

.pad8 {padding:8px; }
.pad8l {padding-left:8px; }
.pad8r {padding-right:8px; }
.pad8t {padding-top:8px; }
.pad8b {padding-bottom:8px; }
.pad8lrb {padding:0 8px 8px 8px;}

.pad10 {padding:10px; }

.pad12 {padding:12px; }
.pad12l {padding-left:12px; }
.pad12r {padding-right:12px; }
.pad12t {padding-top:12px; }
.pad12b {padding-bottom:12px; }

.pad20 {padding:20px; }
.pad20l {padding-left:20px; }
.pad20r {padding-right:20px; }

.mar12 {margin:12px; }
.mar12l {margin-left:12px; }
.mar12r {margin-right:12px; }
.marb12 {margin-bottom:12px; }
.mart12 {margin-top:12px; }

.mar8 {margin:8px; }
.mar8l {margin-left:8px; }
.mar8r {margin-right:8px; }
.marb8 {margin-bottom:8px; }
.mart8 {margin-top:8px; }

.mar20l {margin-left:20px; }
.mar20r {margin-right:20px; }
.marb20 {margin-bottom:20px; }

 /* ---------STYLING ------------*/
 

.inline  {margin-bottom:1px;}

.indent { margin-left:1.5em;
   margin-right: 1.5em; }

.indent2 { margin-left:2em;
   margin-right: 2em; }

.indent3 { margin-left:3em;
   margin-right: 3em; }
    
.bullet { font-size: 25px; font-weight: bold; }

.border {border:1px solid #999;}
.bordergray {border:1px solid #999;}
.border2 {border:2px solid #999;}

.italics { font-style:italic; }

.strike {text-decoration:line-through; }

.heavy {font-weight:bold;}

.footnote {font-size:100%; font-decoration:none; font-weight:bold; color:#ff0000;}

* {box-sizing:border-box; }/*to keep border padding inside of boxes*/

img { max-width:100%; 
	height:auto; 
	border:0; }


/*-------------SPECIAL FEATURES --------*/


.spacer1 {padding:0 45px 0 45px;}   /*for space between asterisks */


.prophetquote {
 	 color: #666699;  /*purple*/
 	 font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif; 
	margin-left:2em;
	margin-right:2em; 
	font-weight:normal;
 	font-style:italic;
	line-height:1.4; }
	
				/*block quotes indented colored teal */
.scripture { color:#00b3b3;
	margin-left:3.5em;
	margin-right:3.5em;
	font-style:italic; }
		
.scriptinline  { color:#00b3b3;
	font-style:italic; }

.scripturebox {
	font:90% arial italic;
	border:1px solid #999;
	padding:5px;
	background:#ffffcc; }

		/*for home pg scriptures right sidebar*/
.scripturebox170shaddow { width:170px;
	font-size:90%;
	padding:5px;
	margin:0 5px 3px 5px;
	font-style:italic;
	background:#DBFFFB;
	-moz-box-shadow: 3px 3px 3px #cccccc;  
	-webkit-box-shadow: 3px 3px 3px  #cccccc;     
	box-shadow: 3px 3px 3px #cccccc;
	border:1px solid #33cccc; }

.scriptureboxshaddow {
	-moz-box-shadow: 5px 5px 5px #cccccc;  
	-webkit-box-shadow: 5px 5px 5px  #cccccc;     
	box-shadow: 5px 5px 5px #cccccc; }

.cite {  /* source for prophet quotes */
   color: #666699;
   font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
   font-style:normal;
   font-size:90%;
   font-weight:normal;
   color:#000; }
   
	       /*change all blockquotes to testimony - not working*/
.blockquote { font-style:italic;
	margin-left:1.5em;
	margin-right: 1.5em;
	background:#DBFFFB;
	padding:5px;
	border:1px solid #33cccc; 
	-moz-box-shadow: 3px 3px 3px #cccccc;  
	-webkit-box-shadow: 3px 3px 3px  #cccccc;     
	box-shadow: 3px 3px 3px #cccccc; }
	
.plaintext {color:#000;
		font-style:italic;}

.testimony {  /*float lft or rt in div*/
	border:1px solid #999;
	margin-left:12px;
	padding:8px;
	font-style: italic;
	background:#F5F5F5;
	border-radius:10px;  }

.notice {margin:10px;  /* add width via box */
	border:1px solid #999;
	padding:5px;
	background:#ffffcc; }	
	
		/* embeded VIDEOS add div with class iframe-container around the video and also class box560 or else it opens up at 100 percent width. Put text within p tag. Be sure box560 is added to media with other boxes*/
	
.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: auto !important;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

	
/* replace all testi with BQ  see Dud n FP*/
/* BQ has default margin of 40px and displayblock. add floats n Mar in html. add box300 to div surrounding blockquote  */
blockquote {  
    font-size: 100%;
    font-style: italic;
    width: 17.500em; /*280px*/
    margin:0;
    padding: 18px;
    line-height: 1.45;
    position: relative;
    background:#F5F5F5; /* very lt gray */ 
    color: #383838;
    border:1px solid #ccc; 
	  border-radius:15px;  }
blockquote:before { /*for extra lg quotes*/
    display: block;
    padding-left: 10px;
    content: "\201C";
    font-size: 80px;
    position: absolute;
    left: -20px;
    top: -20px;
    color: #7a7a7a; }
blockquote cite {
    font-size: 95%;
    margin: 10px auto 2px; }
blockquote cite:before {
    content: "\2014 \2009";  }


		/*addtoimgtag*/
.boxshadowimg { 
	padding:5px;      
	box-shadow: 3px 3px 3px #cccccc; }

.boxshadow {      
	box-shadow: 5px 5px 5px #cccccc; }

.roundedcorners {
	border:1px solid #000000; 
	border-radius:10px; }

OL LI {list-style-type:decimal;
		font-style:italic;
		margin:10px 0; 
		line-height:20px; }
				/* for lists with links - for larger tap targets */

UL {list-style-type: disc;  
			font-style:italic; } 
LI {margin:10px 0; 
		line-height:20px; }
				/* for lists with links - for larger tap targets */ 
LI a{line-height:18px;}

hr {color:#000;
	background:#0000cc;
	width:65%;
	height:1px;
	margin:20px auto; }
	

.gallery {     /* needs no media queries */
    text-align: center;  }
.galleryitem {
      margin:8px 0;
    	padding:0.500em; /*8px*/
     display: inline-block;
     text-align: center; 
     vertical-align: top; }
  	


   
   
   /* ---------BOXES --------- */

.box900  {width:900px; margin:0 auto;}
.box760  {width:760px; margin:0 auto;}
.box650 {width:650px;  margin:0 auto;}
.box600 {width:600px;  margin:0 auto;}
.box560 {width:560px;  margin:0 auto;} /*for videos*/
.box550 {width:550px;  margin:0 auto;}
.box520 {width:520px;  margin:0 auto;}	/* css float pg*/
.box500 {width:500px;  margin:0 auto;}	/*testimony intros hm pg*/
.box450 {width:450px;  margin:0 auto;} 
.box400 {width:400px;  margin:0 auto;}
.box350 {width:350px;  margin:0 auto;}
.box300 {width:300px;  margin:0 auto;}
.box250 {width:250px;  margin:0 auto;}
.box200 {width:200px;  margin:0 auto;}
.box150 {width:150px;  margin:0 auto;}
.box100 {width:100px;  margin:0 auto;}

	/* -----FLOATS --must be in pixels - 
	    imgs need width------  */

.floatleft {float:left;}
.floatright {float:right;}

.floatleft350 {
	float: left;
	width: 350px; 
	margin:5px; }

.floatleft300 {
	float: left;
	width: 300px; 
	margin:5px; } 

.floatleft250 {
	float: left;
	width: 250px; 
	margin:5px; }

.floatright250 {
	float: right;
	width: 250px; 
	margin:5px; }

.floatleft150 {
	float: left;
	width: 150px; 
	margin:5px; }

.floatright150 {
	float: right;
	width: 150px; 
	margin:5px; }

.floatleft120 {
	float: left;
	width: 125px; 
	margin:5px;  }

.floatright120 {
	float: right;
	width: 125px; 
	margin:5px;  }

.floatright100 {
	float: right;
	width: 110px; 
	margin:0 0 0 5px; }
	
	
		/*  put cssmenu in div around ul 
	responsive menu needs Jquery.js link, script.js, 
	caret.png and menu-gray.png image files loaded */
	
#cssmenu {
  font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
 			 /*font size only works in ul li a */
  line-height:1.4; /*adds space between lines when menu wraps*/
  text-align: center; 
  padding: 0; /*padding around menu*/
  width:100%;   }
#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding:0;
  margin: 0;
  background-color:#28ccd7;  /*teal*/ }
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */   }
#cssmenu > ul li {
  display: inline-block;   }
#cssmenu > ul li.right {
  float: right;  }
#cssmenu > ul li.has-sub {
  text-align:left;
  position: relative;  }  
#cssmenu > ul li.has-sub:hover ul {
  display: block; }    
#cssmenu > ul li.has-sub:hover ul li > a {
  font-size: 100%;    /*  menu font size*/
  line-height:1.4;    /*vert space between sub menu lines */
  color:#24bcc7; /*teal*/   } /* sub menu text color on hover*/  
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 290px;  /*width of drop down box*/
  position: absolute;
  margin: 0;
  padding-left: 8px; /* indents sub menu items*/
  list-style-type: none;
  background: #d9f2f2; /* BG pale teal under whole sub menu */
  border: 1px solid #ecf9f9;  /*dk teal blue*/
  border-bottom: 2px solid #b3cce6; /* light blue*/
  border-top: 0 none;  }
#cssmenu > ul li.has-sub ul li {   	/* menu list */
  text-align:left;
  display: block;  } 
#cssmenu > ul li.has-sub > a {
  background: url(images/caret-lg.png) no-repeat; /*dk gray*/
  background-position: 95%  05%; } /* horiz then vert*/
#cssmenu > ul li.has-sub > a.active,   /*BG color of top menu on hover */
#cssmenu > ul li.has-sub > a:hover { 
  background: #d9f2f2 url(images/caret-lg.png) no-repeat; /* dk gray*/
  background-position: 95% 25%;  }
#cssmenu > ul li a {  /* controls padding around menu */
  font-size: 100%;    /*font size main menu*/
  display: block;
  padding: 2px 22px 1px 0 ;  /* pad between categories */
  text-decoration: none;
  color:  #fff;  
   z-index:10;}    /* main menu font color white */
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background:  #d9f2f2; /* main menu BG on hover very light teal */
  color: #24bcc7; /*  main menu font color on hover dk teal */  
   z-index:10;  }  
  

  /*----Media queries for mobile menu ---*/
@media (max-width: 600px) {
  #cssmenu > ul {
    width: 100%; }
  #cssmenu > ul li#responsive-tab {
    display: block;  }
  #cssmenu > ul li#responsive-tab a { 
    background: url(images/menu.png) no-repeat;
    background-position: 95% 105%; 
  line-height:70%; }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #ecf2f9;  /* 3 line tab gray */
    background-position: 95% 105%; }
  #cssmenu > ul li {
    display: none; }
  #cssmenu > ul li.right {
    float: none; }
  #cssmenu > ul li.has-sub {
    position: relative; }
  #cssmenu > ul li.has-sub ul {
    display: block;
    position: static;
    width: 100%;
    background:#d9f2f2; /* mobile menu BG on hover very light teal*/
    border: 0 none; }
  #cssmenu > ul li.has-sub ul li {
    display: block !important;  }
  #cssmenu > ul li.has-sub ul li a span {  
    color: #24bcc7;  /*dk teal*/
    display: block;
    padding-left: 14px; }   /*  - */
  #cssmenu > ul li.has-sub ul li > a {
  font-size: 90%;    /* sub menu font size*/
  color:#24bcc7; /*dk teal*/  
  line-height:1.4;  } /* sub menu text color on hover*/  
  #cssmenu > ul li.has-sub > a {
    background-image: none;  }
  #cssmenu > ul li.active {
    text-align:left; }
  }
  
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 600px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;  }
  #cssmenu > ul ul li.collapsed {
    display: block !important; }
}


/* --- Reg Links ---same need to be listed in nav-- keep above other links----*/
/*  do not need :link after a . visited inherits a color etc  */

a, a:visited {color:#6666cc; /* med blue*/
	font-weight: normal;
	background: transparent;
	text-decoration: underline;
	font-size:100%; 
	line-height:1.4; }   /*needed for legible tap size*/
a:hover {color:#999; }
  
#footer, .footerlinks a, a:visited {color:#6666cc; /* med blue*/
	font-weight: normal;
	background: transparent;
	text-decoration: none;
	font-size:90%; 
	padding:2px;
	line-height:1.4; }   /*needed for legible tap size*/
a:hover {color:#999; }

/*==============MEDIA===============================*/


	/* max 320 Smartphones portrait */
@media only screen and (max-width:320px) {
body {font-size:95%; }
#container {width:100%;}
#content {width:95%;}
#header img { max-width:290px;  }
.logo {clear:both;}
#content {width:98%;}
h1,h2,h3,h4 {text-align:center; }
.floatright,.floatleft {float:none; width:100%; text-align:center; }
#footer {width:98%; }
.galleryitem {border:0;}
.box800,.box750,.box700,.noticebox700,.box650,.box600,.box560,.box550,.box500,.box450,.box400,.box350,.box300,.box250 {width:95%;}
		}
     

	/* min320 x max480 Gen Smartphones/Nexus S portrait and landscape */
@media only screen and (min-width:320px) and (max-width:480px) {
body {font-size:95%; }
#container {width:100%;}
#content {width:95%;}
#header img { max-width:320px;  }
.logo {clear:both;}
h1,h2,h3,h4 {text-align:center; }
.floatright, .floatleft {float:none; width:100%; text-align:center; }
#footer {width:98%;}
.galleryitem {border:0;}
.box800,.box750,.box700,.noticebox700,.box650,.box600,.box560,.box550,.box500,.box450,.box400,.box350,.box300 {width:95%;}
         }
         
   	/* min 481 x max 600  */      
@media only screen and (min-width:481px) and (max-width: 600px) {
body {font-size:95%;}
#container {width:100%;}
#content {width:90%;}
h1,h2,h3,h4 {text-align:center; }
.floatright, .floatleft {float:none; width:100%; text-align:center; }
.box750,.box700,.noticebox700,.box650,.box600,.box560,.box550,.box500 {width:95%;}
	}         

	/* min 600 x max 767  TABLET  */
@media only screen and (min-width:600px) and (max-width: 767px) {
body {font-size:95%;}
#container {width:100%;}
#content {width:90%;}
.box750,.box700,.noticebox700,.box650,.box600,.box560,.box550,.box500 {width:95%;}
           }

	/* min 768 to max 959 iPads portrait and landscape  */
  @media only screen and (min-width : 768px) and (max-width : 959px) and (orientation:portrait) { 
body {font-size:100%; }
#container {width:100%; } 
#content{width:85%; } 
.box800,.box750,.box700,.noticebox700 {width:95%;}
      }