@charset "utf-8";

* {
	margin: 0px;
	padding: 0px;
}
body {
	font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
	background-image: url(images/backgroundBody.gif);
	background-repeat: repeat-x;
	text-align: center;
}
h1 {
	font: normal 24px Arial, Helvetica, sans-serif;
	color: #7dccd4;
	margin-top: 5px;
	margin-bottom: 10px;
}
h2 {
	font: italic normal 24px "Times New Roman", Times, serif;
	color: #7dccd4;
	margin-top: 30px;
	margin-bottom: 10px;
	text-align: center;
}
p {
	margin-bottom: 10px;
	margin-left: 5px;
}
ul {
	margin-right: 50px;
	margin-left: 40px;
}
li {
	margin-bottom: 5px;
}
b, a {
	color:#5EBCBB;
}
td {
	padding: 5px;
}
.inputText {
	font: 11px Arial, Helvetica, sans-serif;
	padding: 3px;
}

#content {
	background-image: url(images/backgroundContent.gif);
	background-repeat: no-repeat;
	background-position: left bottom;
	text-align: left;
	height: 700px;
	width: 900px;
	margin-right: auto;
	margin-left: auto;
}
#mainBanner {
	background-image: url(images/backgroundBanner.jpg);
	background-repeat: no-repeat;
	height: 296px;
	width: 900px;
	position: relative;
}
#slideshow {
	height: 296px;
	width: 900px;
	position: relative;	
	z-index: 0;
}
#logo {
	height: 190px;
	width: 275px;
	position: absolute;
	left: 30px;
	top: 50px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	z-index: 99;
}
#emailAddress {
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	top: 2px;
	right: 25px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	z-index: 99;
}
#emailAddress:hover {
	text-decoration: underline;
}
#mainMenu {
	display: inline;
	float: left;
	width: 145px;
	margin-left: 35px;
}
#mainMenu a {
	font: bold 14px/30px Arial, Helvetica, sans-serif;
	color: #7dccd4;
	text-decoration: none;
	display: block;
	height: 30px;
	width: 140px;
	text-indent: 10px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #666E03;
}
#mainMenu a:hover {
	color: #666F03;
}
#wrapper {
	display: inline;
	float: right;
	width: 670px;
	margin-right: 35px;
	margin-top: 5px;
}
#theText {
	float: left;
	width: 460px;
}
#theImages {
	float: right;
	width: 190px;
}
#theImages img {
	margin-bottom: 5px;
}
#charity {
	font-weight: bold;
	color: #FFFFFF;
	position: absolute;
	top: 2px;
	left: 25px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	z-index: 99;
}
#charity:hover {
	text-decoration: underline;

}
.smallerText {
	font-size: 9px;
	line-height: 12px;
}
h3 { font: normal 18px Arial, Helvetica, sans-serif; color: #7dccd4; margin-top: 5px; margin-bottom: 10px;
}
.toplarger a { 
	display:block;
	text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.toplarger a:hover { /* don't move this positioning to normal state */
 	position:relative;
}

.toplarger span img {
	border: 0px solid #FFFFFF; /* adds a border around the image */
	margin-bottom: 50px; /* pushes the text down from the image */
}

.toplarger a span {  /* this is for the large image and the caption */
	position: absolute;
	text-align: center;
	display:none;
	color: #7dccd4; /* caption text colour */
	text-decoration: none;
	white-space:nowrap;
	font: normal 18px Arial, Helvetica, sans-serif; color: #7dccd4; margin-top: 5px; margin-bottom: 50px;
	background-color: #FFFFFF;
	font-weight: bold;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 50px;
	padding-left: 0px;
}

.toplarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.toplarger a:hover span { 
	display:block;
	top: 0px; /* means the pop-up's top is 50px away from thumb's top */
	right: 200px; /* means the pop-up's left is 90px far from the thumb's left */
	z-index: 100;
	
/* If you want the pop-up open to the left of thumb, remove the left: 90px; and add  
right: 90px; This would mean the right side of the pop-up is 90px far from the right side of thumb */	

/* If you want the pop-up open above the thumb, remove the top: 50px; and add  
bottom: 50px; This would mean the bottom of the pop-up is 50px far from the bottom of thumb */	

/* add cursor:default; to this rule to disable the hand cursor only for the large image */
}


.midlarger {
	float: left;
	clear: none; /* set to left or right if needed */
	padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
	padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.midlarger a { 
	display:block;
	text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.midlarger a:hover{ /* don't move this positioning to normal state */
 	position:relative;
}

.midlarger span img {
	border: 0px solid #FFFFFF; /* adds a border around the image */
	margin-bottom: 50px; /* pushes the text down from the image */
}

.midlarger a span {  /* this is for the large image and the caption */
	position: absolute;
	text-align: center;
	display:none;
	color: #7dccd4; /* caption text colour */
	text-decoration: none;
	white-space:nowrap;
	font: normal 18px Arial, Helvetica, sans-serif; color: #7dccd4; margin-top: 5px; margin-bottom: 50px;
	background-color: #FFFFFF;
	font-weight: bold;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 50px;
	padding-left: 0px;
}

.midlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.midlarger a:hover span { 
	display:block;
	top: -130px; /* means the pop-up's top is 50px away from thumb's top */
	right: 200px; /* means the pop-up's left is 90px far from the thumb's left */
	z-index: 100;
	
}



.botlarger {
	float: left;
	clear: none; /* set to left or right if needed */
	padding-bottom: 5px; /* space between thumbs. Don't change this to margin */
	padding-right: 5px; /* space between thumbs and wrapping text when there is any text around it */
}

.botlarger a { 
	display:block;
	text-decoration: none;
/* add cursor:default; to this rule to disable the hand cursor */
}

.botlarger a:hover{ /* don't move this positioning to normal state */
 	position:relative;
}

.botlarger span img {
	border: 0px solid #FFFFFF; /* adds a border around the image */
	margin-bottom: 50px; /* pushes the text down from the image */
}

.botlarger a span {  /* this is for the large image and the caption */
	position: absolute;
	text-align: center;
	display:none;
	color: #7dccd4; /* caption text colour */
	text-decoration: none;
	white-space:nowrap;
	font: normal 18px Arial, Helvetica, sans-serif; color: #7dccd4; margin-top: 5px; margin-bottom: 50px;
	background-color: #FFFFFF;
	font-weight: bold;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 50px;
	padding-left: 0px;
}

.botlarger img { /* leave or IE puts a border around links */
border-width: 0;
}

.botlarger a:hover span { 
	display:block;
	top: -260px; /* means the pop-up's top is 50px away from thumb's top */
	right: 200px; /* means the pop-up's left is 90px far from the thumb's left */
	z-index: 100;
	
}

.resize_thumb {
	width: 186px; /* enter desired thumb width here */
	height : auto;
}