/* CSS Document */

/* This style sheet was written by Community MX and was distributed freely for use with the free North Pole CSS positioning template.
The North Pole template is freely available from http://www.communitymx.com - This comment should remain intact though you are free to edit the style sheet as you see fit. */

body { /* set everything to zero for a good cross-browser starting point */
	margin: 0; /* zeroes the margins on the body */
	padding: 0; /* zeroes the padding on the body ~ Opera carries a default padding and requires this zeroing */
	border: 0; /* zeroes off any existing border */
	background-color:#616161; /* sets the body background colour */
	color:#383412;  /* set the default text color */
	text-align: center; /* Hack to centre the wrapper in IE5.x pc */
	font-family: Verdana, Arial, Helvetica, sans-serif; /* set the default fonts */
	font-size: 100.01%; /* Sets default font size. This odd value compensates for several browser bugs. First, setting a default font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. Current "best" suggestion is to use the 100.01% value for this property */
	min-width: 770px; /* Prevents the body becoming narrower than our wrapper div - keeps the content from disappearing off the left edge with Gecko browsers */
}

#header {
		padding: 20px;
		background: #FFCC66;
		border-bottom: 1px solid #fff;
		}
#header h2 {
		padding: 0;
		margin: 0;
		color: #3399FF;
		font-family: Georgia, serif;
		font-weight: normal;
		font-size: 180%;
		}

	
#wrapper {
   width: 772px;/*sets the width for IE5.x's broken box model*/
	w\idth: 770px; /* sets the width of the wrapper for compliant browsers*/
	margin: 5px auto;/* centers the wrapper. First value - 5px is applied to the top and bottom margins, auto sets the excess space on the view port evenly to the left and right*/
	position: relative; /* important to position it relatively */
	background-color:#FFFFFF; /* sets the wrappers background color was */
	color:#036;
	border: 1px solid #000; /* sets a border to all 4 sides */
	text-align: left; /* Realigns the text to the left after the IE hack in the body rule */
}

		
/* navigation */
#nav {
		float: left;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
		background: #ccc;
		border-bottom: 1px solid #999;
		}
	
#nav li { 
		float: left;
		margin: 0;
		padding: 0;
		}
	
#nav a {
		float: left;
		display: block;
		padding: 6px 30px 6px 5px;
		text-decoration: none;
		font-weight: bold;
		font-size: 90%;
		color: #3399FF;
		background: #ccc; 
		}
	
#nav #nav-1 a {
		padding-left: 20px;
		}
	
#nav a:hover {
		color: #000;
		}

	/* more */
	
ul#more {
		clear: left;
		margin-top: 60px;
		}


#content { /* Begin laying out and styling the content div */
	width:  700px; /* sets the width of our content*//*changed from 560px*/
	margin-left: 20px;
	margin-bottom: 20px; /* sets a padding clearance on the bottom of the div*/
	}
	
#content p {
	font-size: 80%; /* set the font size for p, scaled from the body declaration */
	margin: 10px 6px 10px 6px; /* set the margins for the p element */
	padding: 0; /* zero off the padding */
}
#content a {
	color:#3399FF;
	font-weight: bold;
	text-decoration: none;
	}
#content a:hover {
		color: #000;
		font-weight: bold;
		text-decoration: underline;
		}
#content #primaryContent {
	float: left;
	display: inline; 
	width: 520px;
	margin: 0 0 0px 10px;
	}
#content #sideContent {
	float: left;
	display: inline; 
	width: 150px;
	margin: 100px 0 0px 0px;
	}
	
#content #sideContent ul{
font-size: 80%;
list-style: none;
background-color: #FFFFFF;/*provides a background colour for the links list*/
margin: 0;/*zeroes off the margins*/
padding: 4px; /*add some air around the links*/
}

#content #sideContent li{
padding: 4px 10px 4px 4px;  
}

#content #sideContent a { 
color: #036; 
font-weight: normal; 
text-decoration: none;  /*keeps the underline*/
}

#content #sideContent a:hover,
#content #sideContent a:focus {
color: #000;
font-weight: normal;
text-decoration: underline;  /*removes the underline*/
}


#content h1 {padding: 0;
		margin: 0;
		color: #036;
		font-family: Georgia, serif;
		font-weight: normal;
		font-size: 150%;
		}
	
.leftimage{
	float: left;
	margin-right: 10px;
	border: 1px solid #000000;
	}
	
.rightimage{
	float: right;
	margin-left: 15px;
	border: none;
	width: 150px
	}
.clearit {
	display: block; 
	clear: both;
	}

div.thumbnail-p {
	width: 150px;
	float: left;
	background-color:#999999;
	margin:0 2px 10px 0;
	}
	
div.thumbnail-p img {
	border: 1px solid #777;
	margin: 14px 34px 14px 34px;
	} 
div.thumbnail-p p {
	float: left;
	margin: 0;
	padding: 0;
	}

div.thumbnail-l {
	width: 150px;
	float: left;
	background-color:#999999;
	margin:0 2px 10px 0;
	}
	
div.thumbnail-l img {
	border: 1px solid #777;
	margin: 34px 14px 34px 14px;
	} 
div.thumbnail-l p {
	float: left;
	margin: 0;
	padding: 0;
	}

div.thumbnail-s {
	width: 170px;
	float: left;
	background-color:#999999;
	margin:0 2px 10px 0;
	}
	
div.thumbnail-s img {
	border: 1px solid #777;
	margin: 9px 34px 9px 34px;
	} 
div.thumbnail-s p {
	float: left;
	margin: 0;
	padding: 0;
	}
	
div.fullframe-p {
	width: 520px;
	float: left;
	text-align: center;
	background-color:#FFFFFF;
	/*margin:0 2px 10px 0;*/
	}
	
div.fullframe-p img {
	border: 1px solid #777;
	margin: 9px 109px 9px 109px;
	} 
div.fullframe-p p {
	float: left;
	margin: 0;
	padding: 0;
	} 
div.fullframe-l {
	width: 520px;
	float: left;
	text-align: center;
	background-color:#FFFFFF;
	/*margin:0 2px 10px 0;*/
	}
	
div.fullframe-l img {
	border: 1px solid #777;
	margin: 9px 32px 9px 32px;
	} 
div.fullframe-l p {
	float: left;
	margin: 0;
	padding: 0;
	} 	
#footer {  /* Begin laying out and styling the footer div */
background-color: #fff;  /*sets a background colour for the footer*/
width: 770px;  /*Sets the footers width*/
border-top: 1px solid #000;  /*sets the top border to define the beginning of the footer*/
font-size: 85%;  /* sets the footer text size */
text-align: center;  /* aligns the text to the right*/
margin-top: 20px;  /* Adds a margin to the top of the footer*/
clear: left;  /*clears any floats to the left - our leftcol div in this instance*/
}

#footer p {
background-color: #E4E4E4;  /*sets the background colour for the p element when it is in the footer div*/
padding: 4px 4px 4px 10px;  /* sets the padding values*/
margin: 0;  /*zeroes off the margins */
}

#footer ul{
background-color: #036;/*provides a background colour for the links list*/
margin: 0;/*zeroes off the margins*/
padding: 4px; /*add some air around the links*/
}

#footer li{
display: inline;/*set the list to display inline*/
padding: 4px 10px 4px 4px;  
}

#footer a {  /* Styles the links within the footer */
color: #fff;  /*sets the text to white*/
text-decoration: none;  /*keeps the underline*/
}

#footer a:hover,
#footer a:focus {
text-decoration: underline;  /*removes the underline*/
}