@charset "utf-8";
/*@import url("reset.css");*/
/* CSS Document */
/* Church colors
dark blue	#002255
light sand	#FAF0AA
lemonchiffon #FFFACD
ivory       #FFFFF0
dark sand	#BEA546
dark red	#731900
seagreen    #2E8B57
*/

body {
	font-family: Tahoma, Geneva, sans-serif;
}
a:link, a:visited {
	color: inherit;
}
#wrapper {
	background-color: ivory;
	width: 90%;
	max-width: 1000px;
	margin-top: -10px;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 3px 3px 6px #666666;
}

main img {
  max-width: 100%;
}

header {
	display: block;	/* IE hack */
	padding-top: 0px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: seagreen;
	line-height: 100%;
	float: left;
	background-color: #CCFFCC;
	width: 100%;
}

    
header a {
	text-decoration: none;
	float: left;
}

header img {
	float: left;
	border: 0;
	height: 80px;
	zz-margin-right: 15px;
	font-size: 0; /* hack to remove space between images */
}
nav {
	display: block;	/* IE hack */
	zz-clear: both;
}
main  {
	display: block;	/* IE hack */
	padding: 0px;
}

main a:link, main a:visited {
	zz-color: darkslateblue;
	color: blue;
}
main a:hover {
	color: crimson;
}
footer	{
	display: block;	/* IE hack */
	font-size: small;
	text-align: center;
}
h2 {
	text-align: center;
	color: firebrick;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	text-shadow: 1px 1px 2px #808080;
    margin-top: 0px;
}

.pagenav {
	list-style-type: none;
}
.pagenav li {
	display: inline-block;
	border: 1px;
	border-color: seagreen;
	width: 200px;
	font-weight: bold;
	color: seagreen;
}
.muted_em {
	font-weight: bold;
	color: darkred;
}
.alert {
	font-weight: bold;
	color: crimson;
}
h3 {
	background-color: burlywood;
	color: darkred;
	padding: 3px;
	font-size: 110%;
    line-height: 1;
    margin-top: 0px;
}
h6 {
    font-size: 75%;
    font-style: italic;
    line-height: 1em;
    padding: 0;
    margin: 0;
}
.bright_em {
	font-weight: bold;
	color: seagreen;
}
#banner_image {
	width: 100%;
	max-width: 700px;
}


.align_right {
	float: right;
	margin-left: 10px;
}
.align_left {
	float: left;
	margin-right: 10px;
}

.centered {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.clear {
	clear: both;
}

.plainlink {
	text-decoration: none;
}
.gallery ul {
	list-style-type: none;
	margin-left: auto;
	margin-right: auto;
}
.gallery img {
	height: 140px;
	margin-left: auto;
	margin-right: auto;
	zz-padding-top: 5px;
}
.gallery li {
	display: inline-block;
	float: left;
	margin: 6px;
	padding: 0.5em;
	width: 250px;
	text-align: center;
	background-color: burlywood;
}
.committee ol {
	list-style-type: none;
	margin-left: auto;
	margin-right: auto;
}

.committee ol li {
	display: inline-block;
	float: left;
	margin: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.5em;
	width: 100%;
    max-width: 350px;
	text-align: left;
    vertical-align: top;
	background-color: seashell;
}
.committee ol li h4 {
	background-color: lightgreen;
	#margin: 0 0 0 -0.5em;
    margin: 0 0 0 0;
	text-align: center;
}
.committee ol li ul {
	list-style-type: circle;
}
.committee  ol li ul li {
	display: list-item;
	margin: 0;
	padding-bottom: 0;
    width: 100%;
	x-width: auto;
}

/*
#quicklinks { 
    xborder: 2px solid orange;
    box-shadow: 3px 3px 6px #666666;
	float: right;
    xdisplay: inline-block;
    margin-left: 10px;
    margin-right: 10px;
	padding: 5px;
    xwidth: 16%;
    background-color: white;
}
#quicklinks li  {
    list-style: none;
    display: block;
}
*/
#quicklinks {
    float: none;
    margin-left: 0px;
    margin-bottom: 10px;
    padding: 5px;
   background-color: white;
}
#quicklinks li {
    display: inline;
}

.promo {
    background-color: white;
    box-shadow: 3px 3px 6px #666666;
	padding: 5px;
    zz-display: inline-block;
	min-width:380px;
    zz-margin-right: 5px;
}
.promo ul {
    padding: 0px;
}
.promo li {
    display: inline-block;
    list-style-position: inside;
    width: 31%;
	min-width: 200px;
    padding: 3px;
    vertical-align: top;
}
.promo img {
    max-width: 100%;
    zz-border: 1px solid black;
}
.promo li ul {
  padding-right: 0px;
}
promo li li {
  display: initial;
  padding: 0px;
}
promo li a{
	color: firebrick;
}
#news_sidebar {
	background-color: #FC0;
	float: left;
	width: 250px;
}
.quote {
	font-family: Georgia, "Times New Roman", Times, serif;
}
#chimes {
	width: 300px;
	border: medium double #C30;
	margin: 10px;
	float: left;
}
#chimes ul {
    padding-left: 1.5em;
}
#bulletins {
	width: 300px;
	margin: 10px;
	float: left;
	border: medium double #C30;
}
#bulletins ul {
    padding-left: 1.5em;
}
.plainmain {
	list-style-type: none;
	list-style-position: outside;
}
.plainmenu li {
	list-style-type: none;
list-style-position: outside;
}

iframe {
    width: 560px;
    height: 315px;
}

/**********************************/
@media screen and (max-width: 768px) {
  header h1 {
      line-height: 100%;
      padding: 0;
  }
  #wrapper {
      width: 100%;
      box-shadow: none;
      zz-margin: -5px -5px 0 -5px; /* top, right, bottom, left */
      margin: 0px;
      padding: 0px;
  }
  main  {
      display: block;	/* IE hack */
      margin: 0px;
      padding: 0px;
  }
  #quicklinks {
      float: none;
      margin-left: 0px;
      margin-bottom: 0px;
      padding: 0px;
     background-color: white;
  }
  #quicklinks li {
      display: inline;
  }
  .promo {
      padding: 0;
      margin: 0px;
      box-shadow: none;
  }
  .promo ul {
  padding-right: 10px;
  }
  p {
    margin: 0 3px 0 3px;
  }
	
}
/***************************************/
@media  screen and (max-width: 480px) {

  header h1 {
      font-size: 150%;
  }
  .mobile_hide {
      height: 0;
      width: 0;
      font-size: 0;
  }
  #wrapper {
      width: 100%;
      box-shadow: none;
      zz-margin: -5px -5px 0 -5px; /* top, right, bottom, left */
      margin: -6px;
  }
  #banner_image {
      height: 0;
  }
  li {
      zz-font-size: 125%;
  }
  .promo {
      padding: 0;
      margin: 0;
      box-shadow: none;
  }
  .promo ul {
      padding-right: 10px;
  }
  .promo li {
      width: 100%;
  }
  /* video-container from https://coolestguidesontheplanet.com/videodrome/youtube/ */
  
  .video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}
  
  .video-container iframe, .video-container object, .video-container embed {
      position:absolute;
      top:0;
      left:0;
      width:480px;
      width:270px;
  }
  .youtube iframe {
    width: 400px;
    height: 225px;
}

}