/***** Global *****/
/* Body */
body {
	background-image: url('../pictures/AtwaterChurchFade.jpg');
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #FFF;
	color: #000305;
	font-size: 87.5%; /* Base font size: 14px */
	font-family: 'Volkhov', 'Century Schoolbook', serif;
	line-height: 1.429;
	margin: 2px;
	padding: 0;
	text-align: left;
}

/* Headings */
h2 {font-size: 1.571em} /* 22px */
h3 {font-size: 1.429em} /* 20px */
h4 {font-size: 1.286em} /* 18px */
h5 {font-size: 1.143em} /* 16px */
h6 {font-size: 1em} /* 14px */

h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
}

/*  Header  ********/
#banner {
	margin: 0;
	padding: 2.5em 0 0 0;
}

/* Banner */
#banner h1 {font-family: lobster, 'lucida handwriting', cursive; font-size: 3.75em; line-height: .6; margin: 0 0 .8em .2em;}
#banner h1 a:link, #banner h1 a:visited {
	color: #000305;
	display: block;
	font-weight: bold;
	margin: 0 0 .8em .2em;
	text-decoration: none;
	width: 750px;
}
#banner h1 a:hover, #banner h1 a:active {
	background: none;
	color: #4444cc;
	text-shadow: none;
}
#banner h1 strong {font-size: 0.36em; font-weight: normal;}

/* Main Nav */
#banner nav {
	background: #000305;
	font-size: 1.143em;
	height: 40px;
	line-height: 30px;
	margin: 0 auto 2em auto;
	padding: 0;
	text-align: center;
	width: 1000px;
	border-radius: 5px;
}
#banner nav ul {list-style: none; margin: 0 auto; width: 1000px;}
#banner nav li {float: left; display: inline; margin: 0;}
#banner nav a:link, #banner nav a:visited {
	color: #fff;
	display: inline-block;
	height: 30px;
	padding: 5px 1.5em;
	text-decoration: none;
}
#banner nav a:hover, #banner nav a:active,
#banner nav .active a:link, #banner nav .active a:visited {
	background: #4444cc;
	color: #fff;
	text-shadow: none !important;
}
#banner nav li:first-child a {
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}
#banner nav li:nth-child(6) a {
	padding: 5px 0;
}

/* logo buttons */
#assalogo img {
	margin: 0;
	padding: 0;
	height: 95px;
	width: 95px;
	position: absolute;
	top: 8px;
	left: 545px;
	border-radius: 5px;	
}
#bmakclogo img {
	margin: 0;
	padding: 0;
	width: 151px;
	height: 95px;
	position: absolute;
	top: 8px;
	left: 650px;
	border-radius: 5px;	
}
#aassclogo img {
	margin: 0;
	padding: 0;
	height: 95px;
	width: 75px;
	position: absolute;
	top: 8px;
	left: 811px;
	border-radius: 5px;
}
#bloggericon img {
	margin: 0;
	padding: 0;
	height: 95px;
	width: 60px;
	position: absolute;
	top: 8px;
	left: 895px;
	border-radius: 5px;
}

.ShowInfo {
  border-radius: 10px;
  background: lightgray;
  padding: 10px;
	max-width: 1012px;
  height: 1.2em; 
}

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  margin: 5px;
  width: 150px;
}

img:hover {
  box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.section {
	clear: both;
	padding: 0;
	margin: 0;
}    

.col {
	display: block;
	float: left;
	margin: 0;
}
.col:first-child { margin-left: 0;}
.photo {
  position: relative;
  display: inline-block;
}
.photo .phototext {
  visibility: hidden;
  width: 162px;
  height: 75px;
  background-color: maroon;
  font-size: .7em;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 50%;
  left: 50%;
  margin-left: -86px;
}
.photo .phototext > h1{
	font-size: 1.2em;
}
.photo .phototext:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: maroon transparent transparent transparent;
}
.photo:hover .phototext {
  visibility: visible;
}
a > img {width: 150px}