html,
body
{
  	height: 100%;
	margin: 0px;
	padding: 0px;
}

html
{
	background-color: #034553;
	background-image: url(Images/ExtraSpaceBackgroundBlack.gif);
	font-size: 62.5%; /* This makes every em = 10px */
}

body,
#pageContainer,
#mainContent,
#dashboard,
#stSilouanIcon,
#footer,
#footer #footerText
{
	background-color: #e5d4b5;
	background-image: url(Images/BodyBackground.gif);
}

body
{
	font-size: 1.4em;
	font-family: georgia, 'times new roman', times, serif;
	margin: 0 auto;
	padding: 0;
	width: 65em;
	min-width: 644px;
	max-width: 90%;
}

#header
{
  	float: left;
  	/*margin-left: 1em;*/
	/*margin-right: 204px; /* Width of icon */
}

#header #title
{
	display: block;
	/* Hides the text if CSS is enabled */
	text-indent: -3000px;
	overflow: hidden;
	width: 431px;
	height: 66px;
	margin: 1.25em 0 0 1.25em;
	background-image: url(Images/Title.gif);
}

#pageContainer
{
  	
  	/* Helps position the footer at the bottom of the content or page */
  	min-height: 100%;
  	position: relative;
}

#bodyContainer
{
	padding: 0 0 0 0;
	clear: left;
}


#breadcrumbs
{
  	height: 1em;
	text-align: right;
	padding: .0 1em .5em 0;
}

#mainContent
{
  	margin: 0 203px 1em 16.1em;
  	/* Added footer padding. It needs to be the actual height of the footer. */
	padding: 0 1em 4em 0;
	text-align: justify;
}

#dashboard
{
	width: 15em;
	margin-right: 1em;
	float: left;
	padding: 0 0 1em 0;
}

#stSilouanIcon
{
	width: 203px;
	height: 348px;
	float: right;
}

#footer
{
	width: 100%;
	clear: both;
	text-align: center;
	/* Positions the footer at the bottom of the content or page */
	position: absolute;
	bottom: 0;
}

#footer #footerText
{
	width: 50%;
	margin: auto;
	text-align: center;
	border-top: 1px solid #c1b191;
	padding: .5em 0;
}

#mainMenu,
#dashboard .information
{
	background-color: #d5c4a5;
  	border-right: 1px solid #c1b191;
	border-top: 1px solid #c1b191;
	border-bottom: 1px solid #c1b191;
	padding: 1em;
	margin: 0 0 1em 0;
}

#mainMenu li.selected a:hover + ul,
#mainMenu li.selected ul
{
  	display: block;
	position: static;
	width: auto;
	padding: 0em;
	margin: 0 0 0 .5em;
	border: 0;
	border-left: 3px solid #c1b191;
}

#mainMenu li.selected a + ul
{
	display: block;
}

#mainMenu li a + ul
{
	display: none;
}

#mainMenu li a:hover + ul,
#mainMenu ul:hover
{
  	padding: 0;
  	margin: -3em 0 0 0;
	display: block;
	position: absolute;
	left: 13em;
	background-color: #d5c4a5;
	border: 1px solid #c1b191;
	width: 15em;
}

#mainMenu,
#mainMenu ul
{
	list-style: none;
	display: relative;
}

#mainMenu li,
#mainMenu ul li
{
	margin: .3em .5em;
	padding: 0em;
}

#mainMenu li a
{
	width: 100%;
	display: block;
}

#header #title,
h1,
h2,
h3,
h4,
h5,
h6,
#mainMenu
{
	font-family: Verdana, Sans-Serif;
	text-align: left;
}


h1
{
	padding: 0em;
	margin: 0em;
	font-size: 2em;
}

h2
{
	margin-bottom: .25em;
	font-size: 1.5em;
	color: darkred;
}

h3
{
	color: darkblue;
}

h1 + h2,
h2 + h3,
h1 + p,
h2 + p,
h3 + p,
h4 + p,
h5 + p,
h6 + p
{
	margin-top: 0;
}

p
{
	line-height: 1.2em;
}

.event
{

}

.event .title h2
{
	color: darkred;
	margin: 0;
	position: relative;
	top: .25em;
}

.event .body
{
	padding: 0 .5em;
	/*background-color: #f5e4c5;*/
  	/*border-top: 1px dotted #c1b191;*/
}

.event .day
{
	color: darkblue;
	font-weight: bold;
	text-align: right;
	margin: .2em 0 0 0;
	padding: 0;
}

.event .body ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

.event .body p
{
	margin: 0;
	padding: 0;
}

.vevent .summary
{
	font-weight: bold;
	border: 0;
}

.vevent .description
{
	margin: .5em 0 0 0;
}

.vevent .dtstart,
.vevent .dtend
{
	border: 0;
}

q
{
	color: darkred;
	display: block;
}

/* This removes the quotation marks. IE doesn't draw them and it doesn't support :after and :before. */
q:after,
q:before
{
	content: "";
}

a.external
{
	padding-right: 13px;
}

a.external span.indicator
{
  	position: absolute;
	text-indent: -1000%;
	width: 15px;
	height: 1.1em;
	min-height: 10px;
	min-width: 10px;
	background: transparent url(Images/External.png) right center no-repeat;
}

.pager
{
	margin-bottom: 5px;
	position: relative;
}

.pager .pageCount
{
  	position: absolute;
	left: -10px; /* right margin of image (so that it will look centered) */
	width: 100%;
	text-align: center;
	z-index: 0;
}

.pager .results
{
	position: absolute;
	text-align: center;
	right: 10px; /* right margin of image*/
	z-index: 0;
}

.pager .buttons
{
	position: relative;
	left: 0;
	z-index: 1;
	clear: both;
}

.album,
.slideshowContainer
{
	width: 420px;
	margin: auto;
	max-width: 100%;
}

/* 
This makes the body expand in spite of the floated images. 
Otherwise, we would need to add a "clearing" element. 
*/
.albumPhotos:after
{
	content: "."; 
	display: block; 
	height: 0; 
	font-size: 0;	
	clear: both; 
	visibility: hidden;
}

.album a.photo
{
  	display: block;
  	float: left;
	width: 200px;
	height: 200px;
	background-color: black;
	margin: 0 10px 10px 0;
	padding: 0;
	/* 
		This is what centers the image in the black box.
		Normally, this would be the height of the container. However, it's off by a little. 
	*/
	line-height: 198px;
	text-align: center;
}

.album a.photo img.thumbnail
{
	margin: auto;
	border: 0;
	vertical-align: middle;
	padding: 0;
}

.slideshowImage
{
	border: 0;
/*	max-width: 100%;*/
  	float: left;
/*	width: 400px;
	height: auto;*/
	width: auto;
	height: 270px;
	background-color: black;
	margin: 0 10px 10px 0;
	padding: 0;
	/* 
		This is what centers the image in the black box.
		Normally, this would be the height of the container. However, it's off by a little. 
	*/
	line-height: 398px;
	text-align: center;
}

.slideshowImageContainer
{
  	cursor: default;
}

h2 a
{
	font-size: .80em;
}

.information .title
{
	color: darkred;
	font-weight: bold;
	font-family: verdana, sans-serif;
	margin: .3em 0;
	padding: 0;
}

.information p
{
	margin-top: 0;
}