/* .............................. */
/* Basic */
/* .............................. */

body {
	background-color:#808080;
	font-size:10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	letter-spacing:0.5px;
	color:#999999;
	padding:0px;
	margin:0px;
	text-align:center;
	}

html, body {
     min-height:100%;
     width: 100%;
		 height: 100%;
	}

/* .............................. */
/* Links */
/* .............................. */

a {
	color:#eee;
	text-decoration:none;
	}

a:hover {
	text-decoration:underline;
	}

/* .............................. */
/* Headings */
/* .............................. */

h1 {
  font-family: Georgia;
  float:left;
	clear:left;
	font-weight:bold;
	font-style: italic;
	font-size:20px;
	letter-spacing:2px;
	color:#eee;
	margin:0px;
	margin-left:5px;
	padding:0px;
	}
	
h1 a {
    text-decoration:none;
	color:#eee;
	}

h1 a:hover {
    text-decoration:none;
	}

.title {
	font-family: Georgia;
	font-weight:bold;
	font-size:14px;
	letter-spacing:1px;
	color:#eee;
	}

h3 {
	font-weight:bold;
	font-size:11px;
	letter-spacing:1px;
	color:#ddd;
	text-align:center;
	}

/* .............................. */
/* Navigation and menu */
/* .............................. */

#navigation {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 200px;
	}

.sitetitle {
	font-family: Georgia;
  float:left;
	clear:left;
	font-weight:bold;
	font-style: italic;
	font-size:20px;
	letter-spacing:2px;
	color:#eee;
	margin-top: 120px;
	padding:0px;
}

.menu {
  float:right;
	clear:right;
	text-align:right;
	font-size:11px;
	margin-top: 189px;
	
	}
.menu a {
	padding:7px;
	padding-left:10px;
	padding-right:10px;
	color: #660000;
	}
		
.menu a:hover {
	text-decoration:none;
	color:#CCC;
	}
	
#imagemain img {
    margin-top: 10px;
    padding:10px;
		background-image: url(http://www.hatley.org/pageimages/dropshadow.jpg);
		background-position: right bottom;
		padding-right: 20px;
		padding-bottom: 20px;
		border: 0;
	}


/* .............................. */
/* Footer */
/* .............................. */

#footer {
	font-size: 10px;
	color: #AAA;
	float: left;
	decoration: none;
	padding-left: 30%;
	white-space: pre;
}

#footer a {
	white-space: pre;
	font-family: arial;
	font-size: 11px;
	border: 0;
	font-style: normal;
	text-decoration: underline;
	font-weight: bold;
	color: #AAA;
}

#footer a:hover {
	color: darkred;
}	
#footer2 {
			display: inline;
			margin-left: 10px;
}

#footer2 a {
	white-space: pre;
	font-size: 12px;
	font-family: Georgia;
	font-style: italic;
	padding-left: 15px;
	padding-right: 5px;
	border-left: #666 1px solid;
	color: #FFF;
	text-decoration:none;
}

#footer2 a:hover {
	text-decoration:underline;
	color: #FFF;
	}
	


/* .............................. */
/* Boxover */
/* .............................. */

.boxoverheader {
	background-color:#FFF;
	font:11px Georgia, serif;
	font-weight: bold;
	letter-spacing:1px;
	color: #333333;
	border-top:4px solid #666;
	border-left:4px solid #666;
	border-right:4px solid #666;
	border-bottom:1px solid #666;
	padding:6px 8px 1px 8px;
	opacity: .75;
	-moz-opacity: 0.75;
	filter: alpha(opacity=75);
	min-width:200px;
	max-width:300px;
	}

.boxoverbody {
	background-color:#FFF;
	font:italic 10px Georgia, serif;
	letter-spacing:1px;
	color: #333333;
	text-align: center;
	border-bottom:4px solid #666;
	border-left:4px solid #666;
	border-right:4px solid #666;
	padding:2px 8px 6px 8px;
	opacity: .75;
	-moz-opacity: 0.75;
	filter: alpha(opacity=75);
	min-width:200px;
	max-width:300px;
	}