/*	This stylesheet has been marked out and noted to explain what the CSS is doing
throughout the different parts of the website	*/



/* Controls the overall font size and page background*/
body 
{
  font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
  font-size: 75%;
  background-color: #CFE4ED;
  color: #555555;
  
}
/* The big box that holds everything */
#container
{
	background-color: #ffffff;
	margin-top: 5%;
	margin-left: auto;
	margin-right: auto;
	width: 600px;
	border: 1px solid #1D1D1D;
	color: #555555;
}
/* The header does little more than contain the title image */
#header
{
	background-color: #ffffff;
	color: #FFFFFF;
	width: auto;
	height: auto;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-style: italic;
	text-align: right;
	border-bottom: solid #8CB1FF 1px;
	background-image:url(header.png);
	background-repeat: no-repeat;
}
/* Controls the main content, which deals mostly with Text, paragraphs and the like */
#main
{
	background-color: #ffffff;
	color: #000000;
	padding-top: 10px;
	padding-right: 30px;
	padding-left: 10px;
	padding-bottom: 5px;
	margin-left: 30px;
	margin-right: 30px;
	width: auto;
	height: auto;
	min-height: 300px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	border: solid #8CB1FF 1px;
	border-top:0px;
	
}
/* The following is the formatting for headers, and the hyperlinks */
#main h2
{
	background-color: #ffffff;
	color: #00236A;
	font-size: 22px;
}
#main h3
{
	color: #606060;
	font-size: 5px;
}
#main h4
{
	color: #606060;
	font-size: 14px;
}

#main a
{
	color: #000080;
	text-decoration:none;
}

#main a:hover
{
	text-decoration: underline overline;
	color: #000080;
}

/* Sidebar is a lie, back when the navigation was meant to be at the left. This is still the navigation bar, though */

#sidebar
{
	clear: both;
	width: auto;
	height: 20px;
	color: #00236A;
	background-color: #ffffff;
	border-bottom: solid #8CB1FF 1px;
	background-image: url(navbarbackground.png);
	background-repeat: repeat-x;
	text-align: center;
	padding-top: 2px;
}
#sidebar a
{
	color: #1D1D1D;
	font-family: Arial;
	font-size: 12px;
	text-decoration: none;
	font-weight: bold;
}

#sidebar a:hover
{
	color: #1D1D1D;
	font-family: Arial;
	font-size: 12px;
	text-decoration: none;
	font-weight: bold;
	text-decoration: overline underline;
}
/* The footer. Containing the last update, who made it, and the link to the parish council website */
#footer
{
	background-color: #ffffff;
	color: #999999;
	width: auto;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
}

#footer a
{
	color: #999999;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none;
}

#footer a:hover
{
	text-decoration:overline underline;
}
/* 'Image' and 'imageleft' are the little boxed contained within some pages that have images, to make it look more pretty */
#image
{
	width:auto;
	height:auto;
	float:right;
	clear:left;
	text-align:center;
	color:#404040;
	font-family: Arial;
	border:1px solid #8CB1FF;
	font-size: 10px;
}
#imageleft
{
	width:auto;
	height:auto;
	float:left;
	clear:right;
	margin-right: 5px;
	text-align:center;
	color:#404040;
	font-family: Arial;
	border:1px solid #8CB1FF;
	font-size: 10px;
}
#imagedescription
{
	border-top:1px solid #8CB1FF;
	background-color: #8CB1FF;
	color: #FFF;
	font-weight:bold;
	text-align:right;
}
/* The next three deal with the gallery, the page darkening effect, the box that contains the image, and how the thumbnails are presented */
#effect_darken
{
	background-color: #000;
	opacity: 0.7;
	-moz-opacity:0.70;
	filter: alpha(opacity=70);
	z-index: 20;
	height: 100%;
	width: 100%;
	background-repeat:repeat;
	position:fixed;
	top: 0px;
	left: 0px;
	z-index: 4;
	display:none;
}

#image_popup
{
	width: 80%;
	height: auto;
	z-index:5;
	min-width: 700px;
	position: absolute;
	margin-left: auto; 
	margin-right: auto;
	left: 10%;
	right:10%;
	top:10%;
	opacity: 1;
	-moz-opacity:1;
	filter: alpha(opacity=100);
	display:none;
	background-color: #FFF;
	border: 1px solid #8CB1FF;
	text-align: center;
}
#gallery_description
{
	font-size: 150%;
	color: #545454;
}
table.image_thumbs
{
	border: 1px solid #606060;
	margin-top: 5px;
	margin-bottom: 5px;
}
/* Firefox and Internet explorer fix to prevent borders around images ruining the layout. Those 4 pixels make ALL the difference.*/
img
{
	border: 0;
}
/* First line indent in all paragraphs make everything look a little more friendly. I've yet to find how to make a drop-cap effect... */
p
{
	text-indent: 10px;
}