html, body { background: #d7ecea; }

body	{
	font-family: Georgia, serif;
	font-size: 75%; /* Generally =12px */
	line-height: 1.2;
	}

#maincontainer 	{ /* following style applied here, not to body, so that */
		  /* slimbox-style Maxigallery fills viewport.		*/
	position: relative; /* Define as CB */
	margin: 0 auto;
	width: 770px;
	}
	
#heading {
	height: 126px; /* Matches background image */
	width: 770px;
	text-indent: -5000px;
	background: url(../images/calderbackground.jpg) no-repeat scroll;
	}
#heading a { display: block; height: 100%; width: 100%; }

/***** main navigation *****/

#navbar {
	min-height: 36px; /* Matches background gradient image */
	color: white;
	background: #007194 url(../images/navgradient.gif) repeat-x scroll top left;
	border-bottom: solid 1px #4095af;
	font-weight: bold;
	font-size: 150%; /* Generally =18px */
	line-height: 2; /* Generally = 36px */
	}

#navbar ul {
	list-style-type: none;
	padding-left: 0.3em;
	}
#navbar ul li {
	display: inline;
	padding: 0 0.8em;
	border-right: solid 1px white; /* 'separator' */
	}
#navbar ul li.last { border-right: none; }

/* links */
#navbar ul li a:link, #navbar ul li a:visited {
	color: white;
	text-decoration: none;
	}
/* hover/active */
#navbar ul li a:hover, #navbar ul li a:active { 
	color: white;
	text-decoration: underline;
	}	
/* current link */
#navbar ul li.active a:link, #navbar ul li.active a:visited, #navbar ul li.active a:hover, #navbar ul li.active a:active
	{
	color: white;
	text-decoration: underline;
	}

/***** Info on LHS *****/

#moreinfo, #latestnews {
	width: 194px;
	font-weight: bold;
	font-size: 150%; /* Generally =18px */
	background: white;
	color: #616164;
	}
#moreinfo ul, #latestnews div.news_summary, #latestnews h2 {
	margin-left: 25px;
	}

#moreinfo {
	position: absolute;
	top: auto;
	left: 0;
	padding-bottom: 1em; 	/* avoid gap in background between */
				/* #moreinfo and #laetstnews	   */
	}
#moreinfo ul {
	padding: 0.9em 0;
	}
#moreinfo li {
	margin: 0.7em 0;
	}
/* links */
#moreinfo ul li a:link, #moreinfo ul li a:visited {
	color: #616164;
	text-decoration: none;
	}
/* hover/active */
#moreinfo ul li a:hover, #moreinfo ul li a:active { 
	color: #0081af;
	text-decoration: underline;
	}	
/* current link */
#moreinfo ul li.active a:link, #moreinfo ul li.active a:visited, #moreinfo ul li.active a:hover, #moreinfo ul li.active a:active
	{ 
	color: #0081af !important;
	text-decoration: underline !important;
	}	

#moreinfo ul {
	border-bottom: solid 2px #4fb3c4;
	}	

#latestnews {
	position: absolute;
	top: auto;
	left: 0; /* needed by IE */
	margin-top: 10.3em;
	padding-top: 0.7em;
	/* Background fading image */
	min-height: 21em; /* => total height of LHS = 32em. See #maincontent */
	background: white url(../images/fade_white2blue.gif) repeat-x scroll bottom left;
	}

#latestnews div.news_summary {
	margin-top: 0.7em;
	color: #0081af;
	}

/* links */
#latestnews a:link, #latestnews a:visited {
	color: #0081af;
	text-decoration: none;
	}
/* hover/active */
#latestnews a:hover, #latestnews a:active {
	color: #0081af;
	text-decoration: underline;
	}
/* current link */
#latestnews a.self:link, #latestnews a.self:visited, #latestnews a.self:hover, #latestnews a.self:active
	{
	color: #0081af !important;
	text-decoration: underline !important;
	}

/***** Content *****/

#maincontent {
        font-family: Verdana, Georgia, serif;
	margin-left: 194px; /* room for LHS blocks and blue->white gradient */
	padding: 1.6em 26px 4em 16px; /* content width = 534px */
	min-height: 42.4em; /* Total min-height >= 48em to match #latestnews */
	background: white url(../images/corner.gif) no-repeat scroll bottom right;
	color: black;
	}

/***** Main Content styling (including text edited via TinyMCE) *****/

#maincontent strong { font-weight: bold; }
#maincontent em { font-style: italic; }
#maincontent h2, #maincontent h3, #maincontent h4, #maincontent h5, #maincontent h6 {
	padding: 0.7em 0;
	font-weight: bold;
	color: #0081af;
	clear: both;
	}
#maincontent h2 { font-size: 2em; }
#maincontent h3 { font-size: 1.5em; }
#maincontent h4 { font-size: 1.3em; }
#maincontent h5 { font-size: 1.2em; }
#maincontent h6 { font-size: 1.1em; }
#maincontent ul { padding: 0.5em 0 0.5em 40px; list-style-type: disc; }
#maincontent p  { padding: 0.5em 0; }
#maincontent img { float: left; clear: left; margin: 1em 1em 1em 0; }


/***** Home page only - content text at top of content block *****/

#maincontent .homecontent {
	font-family: Georgia, serif;
	margin-bottom: 0.5em;
	font-size: 2em;
	color: #0081af;
	line-height: 1.25;
	}

/***** Article summary with image (blue blocks) *****/

#maincontent div.page_summaryWithImage {
	font-family: Georgia, serif;
	margin-top: 1.1em;
	width: 100%;
	font-size: 140%;
	background: #0092bc;
	color: white;
	}
#maincontent div.page_summaryWithImage h3 { display: none; }

#maincontent div.page_summaryWithImage img {
	float: left;
	width: 130px;
	margin: 0; /* override #maincontent img */
	margin-bottom: -0.5em; /* Required because :after element */
			     /* pushes <p> padding down		*/
	}
#maincontent div.page_summaryWithImage p {
	margin-left: 130px;
	padding: 0.5em;
}
/* Fill text area with link (no gaps between lines) */
#maincontent div.page_summaryWithImage p a { width: 100%; height: 100%; display: block; }

/* Generate clearing element for blue blocks to expand to contain image */
/* Neither works nor required in IE. 					*/
#maincontent div.page_summaryWithImage p:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Links */
div.page_summaryWithImage a:link, div.page_summaryWithImage a:visited {
	color: white;
	text-decoration: none;
	}
/* hover/active */
div.page_summaryWithImage a:hover, div.page_summaryWithImage a:active {
	color: white;
	text-decoration: none;
	} 

/***** News and Events pages - summary of news items, blog style *****/

#maincontent div.news_summary, #maincontent div.event_summary {
	padding: 0.7em 0;
	}
#maincontent div.morelink {
	float: right;
	}
#maincontent div.morelink a:link, #maincontent div.morelink a:visited {
	color: #0081af;
	text-decoration: none;
	}
#maincontent div.morelink a:hover, div.morelink a:active {
	color: #0081af;
	text-decoration: underline;
	} 

#pastevents h3, #pastevents p, #pastevents div { color: #616164; }
	
/***** Contact Form *****/

p.error, div.errors { color: #990000; }

#EmailForm div {
	padding: 0.5em 0;
	clear: both;
	}

#EmailForm label {
	float: left;
	width: 150px;
	text-align: right;
	}

#EmailForm input[type=hidden] { display: none }

#EmailForm input, #EmailForm textarea {
	display: block;
	margin-left: 165px;
	border: solid 1px #000;
	background: #d7ecea;
	font-size: 100%;
	}

#EmailForm input { width: 190px; }

textarea#cfMessage { margin-left: 165px; width: 360px; }

#EmailForm input#cfContact { width: 12em; }

#EmailForm input.button:hover, input.button:active, input.button:focus {
	background: #0081af;
	color: white;
	}

#EmailForm input.chkbox {
  width: auto;
  border: 1px solid #000;
}

/***** Maxigallery *****/

div.thumbscontainer ul.thumbs li {
	float: left;
	width: 150px;
	}
div.thumbscontainer ul.thumbs li p {
	clear: left;
	}

/***** Footer *****/

#footer {
	clear: both;
	padding-bottom: 1em;
	text-align: center;
	line-height: 3em;
	background: #d7ecea;
	color: #0081af;
	font-weight: bold;
	}

.orange {
  color: #f18e00;
}