/**********************************************
 ******************* MASTER *******************
**********************************************/

/* Created: 21 Sep 2009 & 11am
 * Author: Joshua Deidun <www.ivt.com.au>
*/

/*	TOC
 *	1. Colors
 *	2. Reset
 *	3. Links
 *	4. Typography
 *	5. Structure
*/


/*	1. COLORS
 *	----------------------------------------------
 *	red			=		#c9282d
 *	grey		=		#666
 * 	drk grey	=		#444
*/


/*	2. RESET - do not remove or modify
 *	----------------------------------------------
*/
	
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input { 
		margin: 0; 
		padding: 0; 
		border: 0; 
		outline: 0; 
		font-size: inherit; 
		font-family: inherit; 
		list-style: none; 
		}	
 	
	table { 
		border-collapse: collapse; 
		border-spacing: 0; 
		}

	ol, ul { 
		list-style: none; 
		}

	q:before, q:after, blockquote:before, blockquote:after { 
		content: ""; 
		}
		
	:focus {
		outline: 0;
		}
		
	legend {
		display: none;
		}
		
	hr {
		height: 1px;
		border: 1px solid #CCC;
		}
		
	/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
	.clearfix:after {
		clear: both;
		content: ' ';
		display: block;
		font-size: 0;
		line-height: 0;
		visibility: hidden;
		width: 0;
		height: 0;
		}

	.clearfix {
		display: inline-block;
		}

	* html .clearfix {
		height: 1%;
		}

	.clearfix {
		display: block;
		}


/*	3. LINKS
 *	----------------------------------------------
*/

    a {
		text-decoration: none;
	   }	 
	
	a:link, a:active, a:visited, a:hover {
		color: #fff;
		outline: none;
		}
		
	a:hover {
		text-decoration: underline;
		}			

		
/*	4. TYPOGRAPHY
 *	----------------------------------------------
*/


	h1, h2, h3, h4, h5, h6 {
		color: #fff;
		font-weight: bold;
		}
		
	h1 {
		font-size: 3.5em; 
		}
		
	h2 {
		font-size: 2.1em;
		}
		
	h3 {
		font-size: 1.4em;
		margin: 0 0 .5em;
		line-height: 1;
		}
		
	h4 {
		color: #e81e25;
		margin: 0 0 1em;
		padding: 0;
		line-height: 1;
		}				
		
	label {
		font-size: 1.1em;
		}
		
	p { margin: 0 0 .8em; }					
		

/*	5. STRUCTURE
 *	----------------------------------------------
*/	
	
	body {
		margin: 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: 99;
				overflow: hidden;
				}
				
		#banner .fadeArea {  
				width: 640px;
				height: 270px; 
				overflow: hidden;
				background: #000; 
				}		
		
		/*-------------------------------------*/
		/*-------------- 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;
			}
		*/