@charset "UTF-8";
* {font-size: 10px; margin:0; border:none; padding:0;}
body {
/*	font-size: 1.4em;*/
	font-family: Verdana, sans-serif;
	margin: 0;
	padding: 0;
}
body *{
	font-family: Verdana, sans-serif;
}
	

/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	padding: 0;
	margin: 0;
}
 h1, h2, h3, h4, h5, h6 {
	margin-top: 0;	 /*removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
}
p {margin-top:0;}
a img { 
	border: none;
}

span {font:inherit;}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a {font-size:inherit;}
a:link {
	text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
	text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
	text-decoration: none;
}

/* ~~this fixed width container surrounds the other divs~~ */


@media screen and (max-width : 919px){
	.container{width:72em;}
	.sidebar1{margin-left:2em;width:27em;}
	.content{width:42em;margin-left:0.6em;}
	.contentL{width:60em;}
	.header h1 a, .headerL h1 a {font-size:1em;margin-left:0.6em;}
	.footer p {width:57em;}
}

/*@media screen and (max-width : 740px){
	.container{width:68em;}
	.sidebar1{margin-left:0.5em;}
	.content{width:46em;}
	.contentL{width:44em;}
	.header h1 a, .headerL h1 a  {font-size:0.7em;margin-left:0.1em;}
	.footer p {width:50em;}
}*/

@media screen and (max-width : 750px){ /*testing 600 vs 500 px*/
	.container{width:50em;}
	.sidebar1{}
	.content{width:30em;}
	.contentL{width:28em;}
	.header h1 {width:5em;}
	.header h1 a, .headerL h1 a  {font-size:0.7em;margin-left:0.1em;}
	.footer p {width:24em;}
	ul li#utop{display:none;}
}

@media screen and (min-width : 920px){  /* preferred behavior */
	.container{width:92em;}
	.sidebar1{width:32em;margin-left:3.5em;}
	.content{width:51em;margin-left:0.5em;}
	.contentL{width:80em;margin-left:0.5em;}
	.header h1 a, .headerL h1 a  {margin-left:2em;}
	.footer p {width:67em;}

}


/*Responsive Styles*/
@media screen and (max-width : 920px){
p, .contentL p {font-size:1.2em;
	padding:0.75em 1.125em;
	width:auto;
	line-height:1.4em;}
.contentL h2 {font-size:1.5em;}
ul.nav li {font-size:0.59em;}
}

@media screen and (min-width : 921px){
p {font-size: 1.4em;
	padding:0.5em 1em;
	width:32em;
	line-height:1.8em;
	}
.contentL p {width:45em;}
ul.nav li {font-size:0.75em;}

}

@media screen and (min-width : 1201px){
	.container{width:110em;}
	.sidebar1{width:39em;margin-left:2em;}
	.content{width:56em;margin-left:10em;}
	.contentL{width:90em;margin-left:10em;}
	.header h1 a .headerL h1 a {font-size:1.5em;margin-left:0.8em;}
	ul.nav li {font-size:0.9em;}

}


.container {
	/*background: #FFf9f6;*/
	margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
	margin-bottom:5em;
}

/* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
.header {
	margin-bottom: 0em;

}

.headerL {
	margin-bottom: 0em;
}

.header h1 {/*width:10em;*/min-height:2.7em;/*background:#f00;*/padding-top:1.5em;padding-left:6em;/*text-indent:-1em;*/font-size:3em;	font-family: Georgia, serif;}
.header h1 a {text-decoration:none;	font-family: Georgia, serif;}

.headerL h1 {/*width:10em;*/min-height:2.2em;/*color:background:#f00;*/padding-top:1em;padding-left:6em;/*text-indent:-1em;*/font-size:2.5em;font-family: Georgia, serif;}
.headerL h1 a {text-decoration:none;font-family: Georgia, serif;}


.overlay {height:5em;}
.overlay h3 {height:2em; /*text-shadow: 0.03em 0.03em 0.1em black;*/ padding:0.5em;text-align:right;}
/* ~~ These are the columns for the layout. ~~ 

*/
.sidebar1 {
	float: left;
	/*width: 27em;*/
/*	margin-top:1em;*/
	padding-bottom: 1em;
}
.content {
	padding: /*1em 0 0 */0;
	/*width: 49em;*/
	float: left;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 0 1.5em 1.5em 4em; /* this padding mirrors the right padding in the headings and paragraph rule above. Padding was placed on the bottom for space between other elements on the lists and on the left to create the indention. These may be adjusted as you wish. */
}


/* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
div.links {
	/*width: 76em;*/
	height: 6em;
	width:100%;
	/*float:left;*/
	/*text-align: center;*/
	border-top: 0.3em solid;
	border-bottom: 0.3em solid;
	margin-bottom: 3em;
}

#hilite {border:0.05em dashed;} 


.footer div.links {height:3em;margin-bottom:1em;}

ul.nav {
	list-style: none; /* this removes the list marker */
	/*width: 76em;*/
	margin: 0 auto;
/*	margin-bottom: 1.5em;  this creates the space between the navigation on the content below */
}
ul.nav li, ul li ul li {
	display: inline-block;
	float: left;
	margin-left:0em;
/*	min-width:10em;*/
}

ul.nav li ul li {margin-left:0.8em;}
ul li ul li {width:95%;}
.footer ul.nav li {font-size:0.8em;}

/*Responsive Styles*/
@media screen and (max-width : 750px){
	ul.nav a, ul.nav a:visited, ul.nav a#current, ul.nav a:hover, ul.nav a:focus, ul.nav a:active { /* grouping these selectors makes sure that your links retain their button look even after being visited */
		padding: 0.3em;
	}
}

/*Responsive Styles*/
@media screen and (min-width : 751px){
	ul.nav a, ul.nav a:visited, ul.nav a#current, ul.nav a:hover, ul.nav a:focus, ul.nav a:active { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	padding: 0.3em;
	margin: 0 0.3em;
	}
}

ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
	display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
	text-decoration: none;
/*	min-width:12em;*/
}



/*Style 'show menu' label button and hide it by default*/
.show-menu {
    text-decoration: none;
    font-size:2em;
    font-weight:bold;
    text-align: left;
    padding: 0.2em 0;
    margin-left:0.5em;
    display: none;
    }
    
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
    }


/*Responsive Styles*/
@media screen and (max-width : 750px){
	/*Make dropdown links appear inline*/
    ul#menu {
        position: static;
        display: none;
    }
	/*Make all menu links full width*/
    ul li, li a {
        width: 100%;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
	}
}

/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
    display: block;
	}
/*Hide dropdown links until they are needed*/
li ul {
    display: none;
	}
/*Make dropdown links vertical*/
li ul li {
    display: block;
    float: left;
    clear:left;
    }

.footer ul.nav a:hover, .footer ul.nav a:active, .footer ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
	border-bottom: none;
}
.footer ul.nav a#current {
	border-bottom: none;
}




p.first:first-letter,p.carte:first-letter{float:left;font-size:3em;font-style:italic;line-height:0.9em;padding-right:3px;}

p.carte{font-size:1.4em;padding:0.5em 0 0 1em;width:29em;line-height:1.8em;}
.floatl {width:26em;float:left;padding:0 1em;}

.content ul {list-style-type:circle;padding-top:1em;}
.content ul li {font-size:1.4em; line-height:1.5em;}


.sidebar1 p {width:auto;padding:0.1em;margin-left:1em;}
.sidebar1 img {padding:1em;}
.sidebar1 a img {width:4em;}
.sidebar1 a.ad img {width:25em;padding:0;margin-left:0;}

em, strong {font-size:inherit;}

dl {font-size:1.3em; /*width: 16em;*/line-height:1.6em;padding:0 1em 1em 1em;}
dl dt, dl dd {font-size: inherit;}
dl dt {padding-top:0.75em;}
dl dd dl dt {float:left;}
dl.staff {width:32em;}
dl.staff dt, dl.vestry dt {float:left;padding-top:0.5em;clear:left;}
dl.staff dd {float:left; padding-top:0.5em;clear:right;margin-left:0.125em;}
dl.vestry dd {float:left; padding-top:0.5em; clear:right;width:20em;}
dl.vestry dt+dd{margin-left:0.125em;}
dl.vestry dd+dd{margin-left:0.5em;}
dt.time, dl.staff dt, dl.vestry dt, dl.events dt {font-weight:bold;font-size:inherit;}
dl.events dd+dd {font-style:italic;}
dl.events dd+dd+dd {font-style:normal;}
dt.time{padding-left:5em;width:20em;border-bottom:0.1em solid;}

img.vestry {margin: 1.5em 0 0 1.5em;}

@media screen and (max-width : 740px){
	dl.vestry dd {width:12em;}
}

video {margin-left:1.5em;}

/*h1, h2, h3, h4, h5, h6*/
h1 {
	font-size:2.4em;
	padding-left: 0.5833em;
	padding-top: 0.5em;
}
h2 {
	font-size:2.1em;
	padding-left: 0.6667em;
	padding-top: 0.5em;
}
h3 {
	font-size:1.8em;
	padding-left: 0.7778em;
	padding-top:1em;
}
h4, h5, h6 {
	font-size:1.4em;
	padding-left: 1em;
	padding-top:0.5em;
}

div.violator {
	font-size:2em;
	float:right;
	position: relative;
	right: 2.5em;
	top: 1.5em;
}
div.violator a{	
	padding:0.5em;
	width: 4em;
	height: 1.5em;}
div.violator a:link, div.violator a:visited {text-decoration:none;}

ul.nav a {
	font-size: 1.6em;
	font-weight:bold;
}



p.credit {
	font-size: 1em;
	text-align:right;
	padding-right:1em;
}
p.alert {padding:1em;}
.callout {font-weight: bold;border:0.1em solid;}

.preload {display:none;}

a img {margin:0.5em;}
iframe {margin:0.5em;}

.eGiveWrap {border:0;padding:0.5em 1.4em;}


/* ~~ The footer ~~ */
.footer {
	padding: 1em 0 0 0;
	height:14em;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
.footer p {text-align:center;width:auto;padding-top:0.2em;}
a.dial {text-decoration:none;}

/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  
	float: right;
	padding-left: 0.8em;
}
.fltlft { 
	float: left;
	padding-right: 0.8em;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
	clear:both;
	height:0;
	font-size: 0.1em;
	line-height: 0;
}


#unnecessary li {
	position: fixed;
	list-style: none;
	z-index: 75;
}
li#utop {height:3.5em;right:0; top:0;}
li#utop a{text-decoration:none;padding:0.5em 5em 0.5em 3em;}
li#bottom { height: 3.5em; left: 0; right: 0; bottom: 0; }
li#bottom p{text-align:center;width:100%;font-family: Georgia, serif; font-weight:bold;}
li#utop p{text-align:center;width:100%;font-family: Georgia, serif; font-weight:bold;}