/*	5. STRUCTURE
 *	----------------------------------------------
*/	
	
	body {
		margin: 0;
		padding: 0;
		font: 62.5%/1.5 "Trebuchet MS", "Lucida Grande", Arial, Helvetica;
		color: #fff;
		background: #63a0c3 url(../images/body-bg.gif) repeat-x;
		}
		
	/*----------------------------------------*/
	/*-------------- CONTAINER ---------------*/
	/*----------------------------------------*/
		#container { 
			width: 902px; 
			margin: 0 auto; 
			}
	
	
	
		/*-------------------------------------*/
		/*-------------- HEADER ---------------*/
		/*-------------------------------------*/
			#header { 
				position: relative; 
				height: 110px; 
				}
		
			/* --- logo */
			#header h1 a { float: left; color: #094a79; width: 310px; margin: 27px 0 0; }
			
			/* vision */
			#header h2 { float: right; color: #ccc; margin: 40px 12px 0; }
			
			/* --- navigation */
			#header ul { position: absolute; bottom: 0; right: 0; width: 640px; height: 32px; padding: 0; overflow: hidden; }
			#header ul li { float: left; height: 32px; }
			#header ul li a { float: left; display: block; height: 32px; background-image: url(../images/nav-bg.gif); background-repeat: no-repeat; text-indent: -999em; cursor: pointer; }
			
				/* ---- off state */
				#header ul li a.about { width: 92px; background-position: 0 0; }
				#header ul li a.chaplains { width: 97px; background-position: -92px 0; }
				#header ul li a.creteachers { width: 117px; background-position: -189px 0; }
				#header ul li a.resourceshop { width: 130px; background-position: -306px 0; }
				#header ul li a.support { width: 102px; background-position: -436px 0; }
				#header ul li a.contact { width: 102px; background-position: -538px 0; }
				
				/* ---- over state */
				#header ul li a.about:hover { width: 92px; background-position: 0 -32px; }
				#header ul li a.chaplains:hover { width: 97px; background-position: -92px -32px; }
				#header ul li a.creteachers:hover { width: 117px; background-position: -189px -32px; }
				#header ul li a.resourceshop:hover { width: 130px; background-position: -306px -32px; }
				#header ul li a.support:hover { width: 102px; background-position: -436px -32px; }
				#header ul li a.contact:hover { width: 102px; background-position: -538px -32px; }
		
		
		/*-------------------------------------*/
		/*-------------- INTRO ---------------*/
		/*-------------------------------------*/
		#intro { float: left; width: 262px; height: 237px; color: #333; font-size: 1.2em; margin-top: 9px; }
		#intro h3 { margin: 0 20px; padding: 17px 0 8px; line-height: 1em; }
		#intro div#title_bg { 	
						position: relative;
						background: url(../images/h3-intro-bg.gif) repeat-y; 
						display: block; 			
 						}
						
		#intro div#top {
				background: url(../images/h3-intro-bg-top.gif) no-repeat;
				height: 6px;
				width: 262px;
				font-size: 1px; 
				}
			
			#intro div#bottom {
				background: url(../images/h3-intro-bg-bottom.gif) no-repeat;
				height: 6px;
				width: 262px;
				font-size: 8px;
				margin-bottom: 1.2em; 
				}
				
								
						
		#intro #intro_desc img { margin-bottom: 5px; }
								
		#intro #intro_desc { padding: 0 20px; }
		#intro a { color: #e81e25; text-decoration: underline; }
		
		/*-------------------------------------*/
		/*-------------- BANNER ---------------*/
		/*-------------------------------------*/
		#banner { float: right; display: inline; position: relative; height: 270px; width: 640px; overflow: hidden;}
		
		#banner .corners { 
				position: absolute;
				top: 0;
				left: 0;
				width: 640px;
				height: 270px;
				background: url(../images/corners.png) no-repeat;
				z-index: 98;
				overflow: hidden;
				}
				
		#banner .fadeArea {  
				width: 640px;
				height: 270px; 
				overflow: hidden;
				background: #000; 
				}
		#banner .fadeArea li {
				position: absolute;
				}

		#banner .fadeArea a {
				position: absolute;
				z-index: 99;
				display: block;
				width: 640px;
				height: 270px; 
				}		
		
		/*-------------------------------------*/
		/*-------------- UPDATE ---------------*/
		/*-------------------------------------*/
		
		#update { width: 230px; margin: 20px 0 0; padding: 0 15px; float: left; font-size: 1.2em; }	
		#update img#update_img { border: 5px solid #3c82a4; }
		#update div#update_desc { margin: 5px 0 10px 5px; }
		#update #btn_donate { float: right; }
		#update .button { margin: 0 5px; float: left; }
		#update h3 { margin: 0 0 .7em .2em; }
		
		/*--------------------------------------*/
		/*-------------- CONTENT ---------------*/
		/*--------------------------------------*/
		#content { font-size: 1.2em; float: right; background: url(../images/content-bg.gif) top right no-repeat; width: 642px; }
			
			/* --- columns */
			#content .col { float: left; margin: 26px 0 21px; padding: 0 20px; }
			#content .col.events { width: 171px; padding-left: 27px; }
			#content .col.product { width: 183px; background: url(../images/product-bg.gif) repeat-y; }
			#content .col.login { width: 159px; }
			
			
			#content .col.events strong { margin: 0 0 .5em; display: block; }
			#content .col.events h3 { margin-bottom: 1em; }
			#content .col.events img { width: 168px; border: 3px solid #3c82a4; }
			#content .col.login strong { margin: 0 0 0 .2em; } 			
			
			#content .col.login h3 { margin: 0 0 .3em .2em; }
			#content .col.product h3 { margin-left: .2em; }
	
			#content .col .button { display: block; margin: 0; padding: 0; height: 27px; }
			#content .col.product img#prod_img { border: 3px solid #3c82a4; margin-bottom: .5em; }
			
			/* --- login form */ 
			#content .col form { position: relative; width: 159px; height: 112px; margin: 7px 0 0; padding: 0; display: inline-block; float: left; }
			#content .col.login #login_details { position: relative; width: 159px; height: 139px; margin: 7px 0 0; padding: 0; display: inline-block; float: left; }
			
		 		
			#content .col form ol { margin: 0; padding: 0; float: left; display: block; }
			#content .col form fieldset { margin: 0; padding:0; }
			#content .col form li { margin: 0; padding: 0 0 10px; float: left; display: inline-block; width: 146px; height: 26px; }
			#content .col form li input { width: 146px; margin: 0; padding: 4px 5px; border: 2px solid #3c82a4; background: #fff; color: #e81e25; }
			#content .col.login button { width: 64px; height: 27px; margin: 10px 2px 0; padding: 0; border: 0; background: url(../images/login-btn.png) no-repeat; cursor: pointer; overflow: hidden; color: #fff; text-indent: -999em; display: block; border-collapse: collapse; float: right;  }
			#content .col.login a#logout { width: 64px; height: 27px; margin: 10px 2px 0; padding: 0; border: 0; background: url(../images/logout-btn.png) no-repeat; cursor: pointer; overflow: hidden; color: #fff; text-indent: -999em; display: block; border-collapse: collapse; float: left; }
			#content .col.login a#myaccount { height: 27px; width: 48px; float: left; margin: 0; padding: 0; margin: 10px 0 0 2px; }
			#content .col.login a#help { height: 27px; width: 48px; float: left; margin: 10px 0 0 2px; padding: 0; }
			
			#content .extras { float: left; width: 620px; background: url(../images/extras-bg.gif) no-repeat; color: #3e84a4; font-size: 1.3em; font-weight: bold; padding: 6px 5px 0 15px; height: 30px; }
			#content .extras p { float: left; }
			#content .extras ul { float: right; display: block; }
			#content .extras ul li { float: left; display: block; background: url(../images/extra-li-bg.gif) left no-repeat; }
			#content .extras ul li.noline { background: none; }	
			#content .extras ul li a { float: left; display: inline-block; margin: 0 7px 1px 12px; color: #3e84a4; }
			
			
			#content .col.login ul {
				margin: 0 5px;
				padding: 0;
				}
				
			#content .col.login ul li {
				padding: 3px 0 4px 18px;
				background: url(../images/square.gif) 0 11px no-repeat;
				color: #fff;
				}
				
			#content .col.login ul li a {
				color: #fff;
				}
			
			/* hidden elements */
			iframe { display: none; }
		
		/*-------------------------------------*/
		/*-------------- FOOTER ---------------*/
		/*-------------------------------------*/
		#footer { padding: 0; background: url(../images/footer-bg.gif) no-repeat; font-size: 1.1em; width: 900px; height: 34px; float: left; margin: 22px 0; }
		
		#footer p { float: right; padding: 11px 20px 0 20px; line-height: 1.2; }
		#footer p#copyright { float: left; }
		
		
		
		/* ckeditor: 
			body
			{
				margin: 0;
				padding: 20px;
				font-size: 12px;
				color: #004776;
				background: #ffffff;
			}
		*/	
		
		/* ckeditor:
			h1
			{
				font-size: 21px;
				margin: 0 0 .3em;
				color: #e81e25;
			}
		*/