aside {border: solid 1px black; background-color: #ffffaa;width:50%;margin: 0px auto; 
padding: 0px 10px;font-style: italic; font-family: "DejaVu Sans","Arial",sans-serif,cursive;}
h1 {font-size: 1.1em; vertical-align: top; margin-top: 0px;}

/* Homepage */
section.fbook {float:right; width:290px;margin:0px; background-color: #303030; padding: 0px 10px 20px;	}	
section#home-content {

	width: 420px; 
margin-left: 20px;
float: left;
background-color:#c4cbd9;
padding-right: 20px;

}


	
body {
    margin: 0px;
    padding: 0px;
    font-size:0.9em;
    font-family: Verdana,Tahoma,Arial,Universe,sans,sans-serif;
    background-color: #3c5a98;
/*
background-image: linear-gradient(bottom, rgb(255,255,255) 2%, rgb(126,121,224) 51%, rgb(10,4,97) 92%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 2%, rgb(126,121,224) 51%, rgb(10,4,97) 92%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 2%, rgb(126,121,224) 51%, rgb(10,4,97) 92%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 2%, rgb(126,121,224) 51%, rgb(10,4,97) 92%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 2%, rgb(126,121,224) 51%, rgb(10,4,97) 92%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.02, rgb(255,255,255)),
	color-stop(0.51, rgb(126,121,224)),
	color-stop(0.92, rgb(10,4,97))
);    
*/  

// middle color - blue was 126,121,224

background-image: linear-gradient(bottom, rgb(200,200,200) 2%, rgb(127,127,127) 51%, rgb(0,0,0) 92%);
background-image: -o-linear-gradient(bottom, rgb(200,200,200) 2%, rgb(127,127,127) 51%, rgb(0,0,0) 92%);
background-image: -moz-linear-gradient(bottom, rgb(200,200,200) 2%, rgb(127,127,127) 51%, rgb(0,0,0) 92%);
background-image: -webkit-linear-gradient(bottom, rgb(200,200,200) 2%, rgb(127,127,127) 51%, rgb(0,0,0) 92%);
background-image: -ms-linear-gradient(bottom, rgb(200,200,200) 2%, rgb(127,127,127) 51%, rgb(0,0,0) 92%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.02, rgb(200,200,200)),
	color-stop(0.51, rgb(127,127,127)),
	color-stop(0.92, rgb(0,0,0))
); 
  
}
header{
    clear: both;
    height: 50px;
    color:#ffeb0f;
    background-color: #3c5a98;
    padding-top:10px;
    text-align: center;
    font-size: 1.7em;
    letter-spacing: 0.4em;
    width: 970px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    display: block;

}
header > img {text-align: left; height: 75%; float:left;padding-left: 20px;}



div#wrapper {
    background-color:#c4cbd9;
    width:970px;
	 padding-left: 0px;
	 margin-bottom:100px;
	 margin-top: 10px;
	 margin-left: auto;
	 margin-right: auto;
    border: solid 1px black;
	}




nav#left 
{

    width: 150px;
    text-align:left;
	float: left;
	background-color:#c4cbd9;
}


//section {display: inline-block;}



section,section#content {

	width: 766px; 
margin-left: 0px;
float: left;
background-color:#c4cbd9;
padding-right: 50px;

}

article#content {

	width: 766px; 
margin-left: 0px;
float: left;
background-color:#c4cbd9;
padding-right: 50px;

}

footer {clear:both; text-align: center; margin-bottom: 30px; padding-top: 20px;}

ul.menu li {list-style-type: none; 
width:120px;	
background-color: grey;
color:white;
padding:1px 5px;
border-bottom: solid 1px black;
border-radius: 15px;
margin-bottom: 4px;

	}
ul.menu li:hover {background-color:#3c5a98;} 
ul.menu li a:link {display:block;
color: white;
background-color:grey;
}

ul.menu li a:visited {display:block;
color: white;
background-color:grey;
}

ul.menu li a:hover {display:block;
color: #ffeb0f;
background-color:#3c5a98;
}

 ul.menu {margin-left:0px;padding-left:10px;  width:150px;}

}







div.nav {width:99.9%;padding-left:0px;background-color: #c0c0c0;border: solid 0 	px black;margin-left: auto; margin-right: auto;margin-top:0px;}
div.nav ul   {margin-left:auto;margin-right:auto;border: 0px;	width:85%;	background-color:#c0c0c0;color:white;margin-top:0px;margin-bottom:0px;}

div.nav ul li ul a {display: none;}

div.nav ul li  {list-style-type:none;text-align: center; display: inline-block;height:3.0em;border: solid 1px yellow; border-radius:8px; 


	/* Required for IE 5, 6, 7 */
	/* ...or something to trigger hasLayout, like zoom: 1; */
	zoom:1; 
		
	/* Theoretically for IE 8 & 9 (more valid) */	
	/* ...but not required as filter works too */
	/* should come BEFORE filter */
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	
	/* This works in IE 8 & 9 too */
	/* ... but also 5, 6, 7 */
	filter: alpha(opacity=50);
	
	/* Older than Firefox 0.9 */
	-moz-opacity:0.5;
	
	/* Safari 1.x (pre WebKit!) */
	-khtml-opacity: 0.5;
    
	/* Modern!
	/* Firefox 0.9+, Safari 2?, Chrome any?
	/* Opera 9+, IE 9+ */
	opacity: 0.5;




}

div.nav ul li a {
  
    color: white;
    background-color: black;
    font-weight: bold;
    height: 3.0em;
  	 padding-top: 5px;
  	 padding-left: 3px;
  	 padding-bottom: 3px;
display: block;
    
    width:6em;
    float:left;
    margin-top:2px;
    
    
}

div.page {min-width:60%; width:80%; margin-left: auto;margin-right:auto;text-align: center;padding:0px; background-color: white;margin-top:0px;position:relative;}



/*
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
*/
a:link {color:#4444aa; text-decoration:none;}
a:visited {color:#3333aa; text-decoration:none;}
a:hover  {color:red; text-decoration:none;}
a:active {color:#5555aa; text-decoration:none;}


	}
.heading {
	font-family: Verdana,Arial;
	font-size: 1.2em;
	font-weight: bolder;
	color: #000000;
	letter-spacing: 0.2em;
}

.normal {
	font-family: Verdana,Arial;
	font-size: 1.0em;
	color: #000000;
}

.link {
	font-family: Verdana,Arial;
	font-size: 1.0em;
	font-weight: bolder;
}



.style4 {
	color: #FFFFFF;
	font-weight: bold;
}
.style5 {
	color: #003333;
	font-weight: bold;
	}
	

h1.banner {text-align: center;}
.smalltext {font-size:0.85em;}

em, li {
font-size:0.9em; 
font-family: Verdana,Arial;
}	




/* Images */

img.brian {float:right;margin:10px;border:solid 1px black;}
img.girlsbrigade {float:right;margin:10px;}
img.chr-exp {float:left;margin:10px;}
img.heron {float:right;margin:10px; width:200px;border:solid 1px black;}
img.bannergrp {float:left;margin:10px;border:solid 1px black;}
img.social {float:left;margin:10px; width:200px;border:solid 1px black;}
img#sermonbutton {border:solid black 1px}
article#content > section > a > img {border: solid 1px black;}

iframe {margin: 10px 0px;}

/* image caption styles */
/* see http://www.midwinter-dg.com/blog_demos/css3-animated-image-captions/ */

figure.html5 {display: block; margin-left: 20px;float:left;}
figure.html5 >img {vertical-align: middle;}
figure.html5 >img#html5logo {height:100px;width: 40px;}
figure.html5 >img#css-icon {height:30px;width: 20px;}
figure.html5 >img#semantics-icon {height:30px; width: 20px;}

figure#stravaigers {display: block; float:left; border: solid 1px black;width: 70%;margin:0px;background-color: black; margin:0px 12px; }
figure#stravaigers>img {float:left; }
figcaption.stravaigers {
	position: absolute;
	text-align: center;
	color: rgba(255,255,255,1);
	background-color: rgba(50,27,3,0.8);
	border: 4px solid rgba(122,92,37,0.8);
	display: block;
	width: 950px;
	line-height: 50px;
	position: absolute;
	bottom: 0px;
	left: 50px;
	white-space: nowrap;
	font-size: 20px;
	opacity: 0;

	box-shadow: #fff8cf 0 0 15px;
	
	transform: scale(5,1);

	transition: all .7s;
}

figure.stravaigers:hover figcaption.stravaigers {
	opacity: 1;
	left: -250px;

	transform: scale(1,1);
}


figure.herons {
	margin: 10px auto;
	width: 220px;

	overflow: hidden;
	position: relative;
	display:inline-block;
	float:right;
}

figcaption.herons {
	position: absolute;
	text-align: center;
	color: rgba(255,255,255,1);
	background-color: rgba(50,27,3,0.8);
	border: 4px solid rgba(122,92,37,0.8);
	display: block;
	width: 700px;
	line-height: 50px;
	position: absolute;
	bottom: 0px;
	left: 50px;
	white-space: nowrap;
	font-size: 20px;
	opacity: 0;

	box-shadow: #fff8cf 0 0 15px;
	
	transform: scale(5,1);

	transition: all .7s;
}

figure.herons:hover figcaption.herons {
	opacity: 1;
	left: -250px;

	transform: scale(1,1);
}


section#accesskeys ul li {list-style-type: none;}