/*
 *****************************************************************
 * The CSS Style Sheet for the Talents Childrens Mission Web Site
 *****************************************************************
 *
 * Set default styles
 * ==================
 *
 * default margins, padding and borders 
 */

	* {margin:0; padding:0; border:0;} 
	
/* default font */

	body{
		font: .8em Verdana, Arial, Helvetica, sans-serif; 
		color:#000000;
	}
	
/* insert blank line after each paragraph */
	
	p{
		padding:0 0 1em 0;
	} 

/* set format styles for the ordered and unordered lists */
	
	ul{
		margin:0 0 0 1.25em;
		padding:0;
	}
 
	ol{
		margin:0 0 0 2em;
		padding:0;
	}

	li{
		margin:0;
		padding:0 0 1em 0;
	}
	
/* default link styles */

	a:link{
		color:#11F311;
		text-decoration:none;
	}

	a:visited{
		color:#366aa3;
		text-decoration:none;
	}

	a:hover{
		color:#11F311;
		text-decoration:underline;
	}

/*
 * Set styles for specific classes
 * ===============================
 *
 * picture captions 
 */
	.cap{
		font-size:.8em;
		color:#7a583c;
	}

/* sub titles */

	.SubTitle{
		font-weight:bold;
	}
	
/* raised (superscript) text */

	.raised{
		vertical-align:45%;
		font-size:.9em;
	} 
	
/* the date the site was last updated */

	.update{
		font-size:.8em;
		color:#de0000;
	}
	
/* footnotes */

	p#footnote{
		font-size:.7em;
		padding:0;
	} 

/*
 * Set heading styles
 * ==================
 *
 * level 1 header used for home page title
 */
	h1{
		font:3.0em Arial, Verdana, Helvetica, sans-serif;
		font-weight: bold;
		font-style: italic; 
		letter-spacing:-.0em;
		color:#de0000; 
		padding:0.5em 0 0.5em 0;			/* add extra space above and below*/
	}				

/* level 2 header*/

	h2{
		font:2.0em Arial, Verdana, Helvetica, sans-serif; 
		letter-spacing:-.0em;
		color:#de0000;
		padding:1em 0 1em 0;				/* add extra space above and below*/
	}
					
/* level 3 header used for the page titles */

	h3{
		font:1.6em Arial, Verdana, Helvetica, sans-serif; 
		letter-spacing:-.0em;
		color:#de0000; 
		padding:0 0 1em 0;				/* add extra space under the header */
	}					
	
/* level 4 header used for sub titles (old colour was #6b3121)*/

	h4{
		font-size:1.0em;
		letter-spacing:-.0em;
		color:#de0000; 
		padding:0 0 1em 0;				/* add extra space under the header */
	} 					

/* level 5 header - used for Return To Top links */

	h5{
		font-size:0.85em;
		letter-spacing:-.0em; 
		color:#de0000; 
		padding:0 0 3em 0;				/* add extra space under the header */
	} 					
/*
 * Set styles for Divs
 * ===================
 *
 * format for the greeting gif on the home page
 */
	div#greeting {
		margin: 0 0 10px 0;
	}

/* format the main page wrapper */

	div#mainwrap {
		position: relative;				/* means absolutely positioned divs
								         are positioned relative to this containing wrapper */
		width:744px; 					/* fixes width of page to 744 pixels */
		margin-left:auto;
		margin-right:auto;				/* centres the page in the browser window */
	}
				
/* format the div containing the banner */
	
	div#banner {
		position. relative;
		background-color:#ffffff;
		margin-top:10px;
	}
	div#talents_title {
		position: absolute;
		padding: 0px;
		width: 383px;
		height: 85px;
		top: 10px;
		left: 10px;
	}
	div#left_banner_image {
		width:80px;
		float:left;						/* float the logo and title left */
		border:0;
		padding:0;
	} 
	div#right_banner_image {
		width:204px;
		float:right;					/* float the children's picture right */
	}		
	
/* format the content panel at the left of the page */

	div#content {
		width:476px; 					/* fix width of content panel to 476 px */
		float:left; 					/* float panel to the left */
		margin:0;
	} 					
	div#content_area img {
		border: 1px solid #87614c;			/* put a border round all images in the content area div */
	}

/* format the picture panel at the right of the page */

	div#picture_panel {
		font-size:.8em;					/* font styles for the captions under the thumbnail pictures */
		color:#7a583c;
		width:248px; 					/* fix width of panel to 248px plus 20px of margin = 268px */
		margin:0 0 10px 0;
		padding:4.5em 0 0 0; 				/* 4.5em top padding aligns the top edge of picture with 1st line of text */
		float:right;					/* float the panel at the right */
	} 							
	div#picture_panel p {padding:1em 0;} 		/*specify extra spacing before and after the caption paragraphs */
	
/* format the gift aid pop-up window */

	div#gift_aid_wrapper {
		padding:10px;
		font-size:1.0em;
	} 

/* format the child sponsorship pop-up window */

	div#child_sponsorship_wrapper {
		padding:10px;
		font-size:1.0em;
	} 
		
/* format the exam results pop-up window */

	div#exam_results_wrapper caption {
		font:1.5em Arial, Verdana, Helvetica, sans-serif; 
		font-weight:bold;
		letter-spacing:-.0em;
		color:#de0000;
		padding:1em 0 1em 0;
	}

	div#exam_results_wrapper th {
		background-color:#FBFADE;
		padding:0 8px;
	}
	div#exam_results_wrapper td {
		padding:0 8px;
	}

/* format the addresses on the contacts page */

	div#address_list p {
		margin: 0 0 0 20px;
	} 

/* 
 * styles for the main navigation menu
 * ===================================
 */
	
	body div#listmenu ul li ul {display:none;}
	div#listmenu {
		width:100%;							/* makes the div full width */
		float: left;						/* makes the div enclose the list */
		border-top:1px solid #87614c;				/* draws line on top edge of div */
		border-bottom:1px solid #87614c;			/* draws line on bottom edge of div */
		font-size:1em;
		background-color: #fff7dc;				/* colours the div */
		margin-bottom: 20px;					/* add white space at bottom of div */
	}
	div#listmenu ul {margin:0 0 0 170px;}			/* Indents ul from left edge */
	
	div#listmenu li {
		float:left;							/* causes the list to align horizontally instead of stack */
		position: relative;					/* positioning context for the absolutely positioned drop-down */
		list-style-type: none;					/* removes bullets from list items */
		padding:0;
		background-color:#fff7dc;				/* Fill colour for the list items ffa*/
		border-right: 1px solid #87614c;			/* draws line to right of each list item */
	}
	div#listmenu li:first-child {
		border-left: 1px solid #87614c;			/* draws line to left of first list item */
	}
	div#listmenu li:hover {
		background-color:#d5ceb7;
	}
	div#listmenu a {
		text-decoration: none;
		display: block;
		padding: 0 6px;
		color: #87614c;
	}
	div#listmenu a:hover {
		color: #ffffff;
	}
	div#listmenu p {
		text-decoration: none;
		display: block;
		padding: 0 6px;
		color: #87614c;
	}
* html div#listmenu ul {
		float: left;
		border-left:1px solid #000;
		margin-left: 15px;
	}
	div#listmenu ul li ul {
		margin: 0;
		position: absolute;
		width: 10em;
		left:-1px;
	}
	* html div#listmenu ul li ul {
		border-top: 1px solid #87614c;
		border-left: 0px;
	}
	div#listmenu ul li:hover ul, div#listmenu ul li ul:hover {display:block;}
	div#listmenu ul li ul li {
		width: 100%;
		border-left: 1px solid #87614c;
		border-bottom: 1px solid #87614c;
		border-right: 1px solid #87614c;
		
	}
	div#listmenu ul li ul li:first-child {
		border-top: 1px solid #87614c;
	}

/* 
 * the "breadcrumb" link styles
 * ============================
 */
	div#breadcrumb p {
		font:0.85em Arial, Verdana, Helvetica, sans-serif; 
		letter-spacing:-.0em; color:#B1835D; 
		padding:0 0 1em 0; 
	}

	div#breadcrumb a:link {
		color:C9AA91;
		text-decoration:none;
	}
	div#breadcrumb a:visited {
		color:#C9AA91; 
		text-decoration:none;
	}
	div#breadcrumb a:hover {
		color:#5CA1D8; 
		text-decoration:none;
	}

	
/* 
 * format the 3 column layout used in history_building96-97.html
 * =============================================================
 *
 * set the format of all the containing divs to be the same.
 */
	div#three_col_block1 {font-size:.8em; color:#7a583c; width=744px;}	/* set font and full width (same as the main page wrapper) */
	div#three_col_block2 {font-size:.8em; color:#7a583c; width=744px;}
	div#three_col_block3 {font-size:.8em; color:#7a583c; width=744px;}
	div#three_col_block4 {font-size:.8em; color:#7a583c; width=744px;}
	div#three_col_block5 {font-size:.8em; color:#7a583c; width=744px;}
	div#three_col_block6 {font-size:.8em; color:#7a583c; width=744px;}
								
/* set each column to 244 px wide, with a 4px margin between them, and float them left */

	.fst_column_of_3 {width:244px; float:left; margin:0 4px 0 0;}	
	.scd_column_of_3 {width:244px; float:left; margin:0 4px 0 0;}
	.thd_column_of_3 {width:244px; float:left; margin:0;}

/* format the page footer */
	
	div#footer {
		font-size:.76em;
		text-align:center;
		margin-top:15px; 
		padding-top:5px; 
		border-top:1px solid #87614c;
	}
	
/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
	.clearfix:after {
    		content: ".";             						/* the period is placed on the page as the last thing before the div closes */
		display: block;          						/* inline elements don't respond to the clear property */ 
    		height: 0;									/* ensure the period is not visible */
    		clear: both;								/* make the container clear the period */
    		visibility: hidden;							/* further ensures the period is not visible */
	}
	.clearfix {display: inline-block;}					/* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
	* html .clearfix {height: 1%;}
	.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */