/*
Test css file for developing into a Joomla template
Will follow basic layout for proposed auzcorp website
17 NOV 2012
Assume a 1000x1000 template?
*/

body 
{
/* background-color: #434243; */
/* background: url(../images/Background_330x330_repeat.png) center top repeat #4f4f50; */
min-width:1000px;
background: 
url(../images/background_overlay_330x4.png) 330px 4px repeat, 
url(../images/Background_330x330_repeat.png) 330px 330px repeat
;
}

/* ========= Header elements ====================================================================== */

	div.masterHeaderStrip
	{
		width:100%;
		margin-left:auto;
		margin-right: auto;
/*   		background-color: #dadc1c; */
		height:35px; /* same as continuousHeader*/
		margin-top:10px;
	}
	
		/* Same as headerContentBlock for holding location of newly moved main menu */
		div.headerMenuStrip
		{
			width:1014px;
			margin-left:auto;
			margin-right: auto;
/* 			background-color: #59edef;  */  
			height:35px; /* same as continuousHeader*/
/* 			float: left; */
	/* 		margin-top:20px; */
		}
		
			/* for holding the small links area*/
			div.smallLinksArea
			{
/* 				background-color: #e1319c;   */  
				float: right;
				height: 35px; /* should be roughly 2/5 the height of the header*/
				text-align: right;
			}
			
	div.continuousHeader
	{
	width:100%;
	background-color: #8d2a3f;
	margin-left:0;
	margin-right: 0;
	height:90px; /* height of the header, set according to backround-url image height */
	margin-top:5px; /* distance of header from top of the page*/
	background: url(../images/outer_banner.png) center top repeat;
	}
		/* centralised area for holding content in header, use same settings as mainContentBlock */
		div.headerContentBlock
		{
		width:1000px;
		margin-left:auto;
		margin-right: auto;
/* 		background-color: #b00095; */
		height:90px; /* same as continuousHeader*/
		overflow:hidden;
		background: url(../images/centre_banner.png) center top no-repeat;
		}
		
			/* for holding the auscorp logo, width should be equal to that of portalFarLeft
			 * */
			div.logoBox
			{
			width:245px; /* equal to portalFarLeft */
/* 			background-color: #00aeb0; */
			float: left;
			height:90px; /* same as continuousHeader*/
/*  			background: url(../images/auzcorp_logo_240x90.png) center top no-repeat;  */ 
			}

			/* for holding auscorp statement, width should be equal to that of portalInnerLeft+portalInnerRight
			 * */
			div.statementBox
			{
				width:410px; /* equal to portalInnerLeft+little bit more */
	/* 			background-color: #98bf2f; */
				float: left;
				height:90px; /* same as continuousHeader*/
				margin-left: 10px;
				line-height:50px; /* set same as height element to centre title text vertically! */
				padding-left: 12px;
			}

/* ============= End header elements ====================================================================== */

/* ============= Main content block elements ============================================================== */

	/* Main content area beneath banner in which everything else resides bar charities footer */
	div.mainContentBlock
	{
	width:990px;
	padding: 10px;
	margin-left:auto;
	margin-right: auto;
	margin-top:20px; /* set according to desired gap from continousHeader */
	overflow:hidden;
 	background-color: #252524; 
/* 	background-color: #e307db; */
	border: 2px solid #151514;
	outline: 1px solid #41413f;
	}
	
		/* Holds the four individualPortals, can be used full size if not main page*/
		div.portalsBlock
		{
		width:990px;
/*   	background-color: #3969d5;  */ 
		overflow:hidden;
		height: 263px;
		}		
			/* portal far left title area */
			div.portalFarLeftTitle
			{
				width:239px;
				background-color: #373535;
				outline: 1px solid #151514;
				height: 30px;
				float: left;
  				text-align: left; 
				margin-top: 1px;
				margin-left: 1px; 
			}
			
			/* portal inner left title area */
			div.portalInnerLeftTitle
			{
				width:239px;
				background-color: #373535;
				outline: 1px solid #151514;
				height: 30px;
				float: left;
				text-align: left; 
				margin-left: 11px;
				margin-top: 1px;
			}	
			
			/* portal inner right title area */
			div.portalInnerRightTitle
			{
				width:239px;
				background-color: #373535;
				outline: 1px solid #151514;
				height: 30px;
				float: left;
				text-align: left; 
				margin-top: 1px;
				margin-left: 11px;
			}	
			
			/* portal far right title area */
			div.portalFarRightTitle
			{
				width:239px;
				background-color: #373535;
				outline: 1px solid #151514;
				height: 30px;
				float: left;
				text-align: left; 
				margin-left: 10px;
				margin-top: 1px;
				margin-right: 1px;
			}

			/* Holds the far left portal image*/
			div.portalFarLeft
			{
				width:239px;
/*  			background-color: #ab6534;  */
				float: left;
				height:228px;
				margin-top: 3px;
				margin-left: 1px;
				margin-bottom: 1px;
			}
			
			/* Holds the inner left portal image*/
			div.portalInnerLeft
			{
				width:239px;
/* 				background-color: #deceb2; */
				float: left;
				height:228px;
				margin-top: 3px;
				margin-left: 11px;
				margin-bottom: 1px;
			}

			/* Holds the inner right portal image*/
			div.portalInnerRight
			{
				width:239px;
/* 				background-color: #40f14d; */
				float: left;
				height:228px;
				margin-top: 3px;
				margin-left: 11px;
				margin-bottom: 1px;
			}

			/* Holds the far right portal image*/
			div.portalFarRight
			{
				width:239px;
/* 				background-color: #ebf31b; */
				float: left;
				height:228px;
				margin-left: 10px;
				margin-top: 3px;
				margin-right: 1px;
			}
			
		/* ============= Breadcrumbs elements ===================================================================== */

		div.breadcrumbsBlock
		{
/*  	background-color: #afc116; */
			float: left;
			height: 30px;
			line-height: 40px;
			padding-left: 5px;
			padding-right: 5px;
			width: 790px;
			padding-top: 5px;
			padding-bottom: 5px;
		}
		
			/* for holding the search box and serch button*/
			div.searchArea
			{
/*  			background-color: #589152;  */
				float: right;
				height: 30px;
				padding-left: 5px;
				text-align: right;
				/* width: 180px; */
				padding-top: 5px;
				padding-bottom: 5px;
			}

		/* ============= End breadcrumb elements ================================================================== */	
		
		/* Block for holding central content area and charities area similar to news and jobs block */
		div.contentBlock
		{
			width:740px; /* should be equal to width of first three portals + margin spacings*/
/*  			background-color: #dea047;  */
			margin-top:9px; /* set according to desired gap from portalsBlock */
			float: left;
			overflow: hidden;
			/* margin-left: 10px; */
		}

			/* Central content text area. Should be equal to the widths of 
			 * the first three portals
			 *  */
			div.centralContentArea
			{
				width:718px;
				padding: 10px;
/* 				background-color: #f31b5d; */
	/* 			min-height: 280px; */
				background-color: #151514;
				float: left;
				outline: 1px solid #41413f;
				margin: 1px;
/* 				outline: 1px solid #363533; */
			}
			
				/* sub areas within centralContentArea for additional flexibility in terms of position content */
				/* first for main content */
				div.centralContentAreaLead
				{
					/* background-color: #9bc98c; */
					padding: 0px;					
				}
				
				.centralContentAreaLead img
				{
					padding: 5px;
					float: left;
				}
				
				.img-fulltext-left img
				{
					padding-right: 10px;
					padding-top: 15px;
				}
				
				/* second section */
				div.centralContentAreaSecondary
				{
					/* background-color: #59bed7; */	
					padding-left: 0px;		
					padding-right: 0px;		
/* 					padding-top: 10px; */
					/* padding-bottom: 10px; */
				}
								
				/* third section */
				div.centralContentAreaThird
				{
					/* background-color: #d359d7; */
					padding: 0px;
				}
			
			/* Block area for storing slide shows etc underneath centralContentArea */
			div.slideShowArea
			{
				width:718px;
				padding-left: 10px;
				padding-right: 10px;
				padding-top: 10px;
				padding-bottom: 10px;
				background-color: #151514;
				float: left;
				outline: 1px solid #41413f;
				margin-left: 1px;
				margin-right: 1px;
				margin-bottom: 1px;
				margin-top: 10px;
			}
			
		/* Holds extra menu, featured vacancies, news, and login blocks */
		div.seekersAndNewsBlock
		{
		width:240px;
/* 		background-color: #855b41; */
		float: left;
		margin-top:10px; /* set according to desired gap from portalsBlock */
		margin-left: 10px;
		}				
			/* Job seekers feed area. Should be equal to the width of the fourth
			portal. Will need to specify a height here, same as per newsArea  */
			div.jobSeekersArea
			{
	/* 			background-color: #40bdf1; */
				margin-top: 0px;
/* 				height: 140px; */
				width:220px;
				outline: 1px solid #41413f;
				background-color: #151514;
				padding-left: 10px;
				padding-right: 10px;
				padding-top: 1px;
				padding-bottom: 1px;
			}
			
				div.jobLink
				{
/* 					background-color: #37d481; */
					width:220px;
					padding-bottom: 10px;
				}
			
			/* News feed area. Should be equal to the width of the fourth
			portal. Will need to specify a height here, same as per jobSeekersArea  */
			div.newsArea
			{
 			/* background-color: #e07070; */
/* 				height: 140px; */
				width:240px;
				outline: 1px solid #41413f;
 				background-color: #151514;
				margin-top:10px; /* set according to desired gap from jobSeekersArea */
/* 				padding-left: 10px;
				padding-right: 10px; */
				padding-top: 1px;
				padding-bottom: 1px;
			}
			
				div.newsLink
				{
/*  					background-color: #37d481;  */
					width:220px;
					padding-left: 10px;
					padding-right: 10px;
				}
			
				/* sub news area for storing gold medal or any other items which need particular prominence */
				div.specialNewsItem
				{
/*  				background-color: #f1e240;  */
					width:240px;
					background-color: #151514;
				}
				
				div.specialNewsText
				{
/* 					background-color: #66e0bc; */
					float: left;
					width:145px;					
				}
				
				div.specialNewsImage
				{
/* 					background-color: #6666e0;  */
					float: left;
				}
				
			/* News feed area. Should be equal to the width of the fourth
			portal. Will need to specify a height here, same as per jobSeekersArea  */
			div.loginArea
			{
/* 				background-color: #16c18f; */
/* 				height: 100px; */
				width:220px;
				outline: 1px solid #41413f;
 				background-color: #151514;
				margin-top: 3px;
				padding-left: 10px;
				padding-right: 10px;
				padding-top: 1px;
				padding-bottom: 1px;
				margin-top:10px; /* set according to desired gap from jobSeekersArea */
			}
			
			/* Charities area. */
			div.charitiesArea
			{
			width:990px;
			padding: 10px;
			background-color: #252524;
			border: 2px solid #151514;
			outline: 1px solid #41413f;
			/* margin-top: 860px; /* set according to desired gap from centralContentArea + heights of jobSeekersArea and 0.5xnewsArea*/
			height: 100px; /* Approximately half of news and job seeker areas */
			margin-top: 10px;
			margin-left: auto;
			margin-right: auto;
			overflow: hidden;
			}
			
				/* holds the charitable commitments title block */
				div.charitableCommitments
				{
					width: 210px; /* approx 2/3 size of farLeftPortal div */
					height: 100px; /* same as charitiesArea */
/* 					background-color: #ffffff; */
					background-color: #64f15d;
/* 					border-right: 1px solid #151514; */
					float: left;
  					background: url(../images/gold_plaque_210x100_blank.png) no-repeat #ffffff;  
				}
				
				/* holds the charitable commitments text description */
				div.charitableText
				{
					width: 220px; /* approx 2/3 size of farLeftPortal div */
					height: 100px; /* same as charitiesArea */
					background-color: #ffffff;
					float: left;
				}
				
				/* area for first charitable logo */
				div.charLogoFarLeft
				{
					width: 140px; /* approx 2/3 size of farLeftPortal div */
					height: 100px; /* same as charitiesArea */
					background-color: #ffffff;
					float: left;
/* 					background: url(../images/SW_140x100.png) no-repeat #ffffff;  */
				}
				
				/* area for first charitable logo */
				div.charLogoInnerLeft
				{
					width: 140px; /* approx 2/3 size of farLeftPortal div */
					height: 100px; /* same as charitiesArea */
 					background-color: #ffffff;
					float: left;
/* 					background: url(../images/Wirrpanda_140x100.png) no-repeat #ffffff;  */
				}
				
				/* area for first charitable logo */
				div.charLogoInnerRight
				{
					width: 140px; /* approx 2/3 size of farLeftPortal div */
					height: 100px; /* same as charitiesArea */
 					background-color: #ffffff; 
					float: left;
/* 					background: url(../images/AutismWest_140x100.png) no-repeat #ffffff;  */
				}
				
				/* area for first charitable logo */
				div.charLogoFarRight
				{
					width: 140px; /* approx 2/3 size of farLeftPortal div */
					height: 100px; /* same as charitiesArea */
					background-color: #ffffff;
					float: left;
/*  				background: url(../images/SES_140x100.png) no-repeat #ffffff;  */
				}
				
			/* Footer area. */
			div.footerArea
			{
			width:1014px;
/* 			padding: 10px; */
			background-color: #3ab543;
/* 			border: 2px solid #151514;
			outline: 1px solid #41413f; */
			/* margin-top: 860px; /* set according to desired gap from centralContentArea + heights of jobSeekersArea and 0.5xnewsArea*/
			background: url(../images/footer_1014x25.png) no-repeat; 
			height: 25px;
			margin-top: 10px;
			margin-left: auto;
			margin-right: auto;
			line-height:30px;
			}
		
/* =========== End Main content block elements ================================================================== */

/* =========== Blog styles for spacing =========================================================== */
	
		.leading-0
		{
			margin-top: 10px;
		}
			
		.item, .leading-0
		{
			padding-bottom: 10px;
			padding-top: 10px;
		}
		
		.item h2, .leading-0 h2
		{
			line-height: 9px;
		}
				
		.item a img, .leading-0 a img
		{
			padding: 0px; /*  need this to push the text out to the right */
		}
				
/* ============== Blog layout ================================================================== */

	.leading-0
	{
		float: left;
/* 		background-color: #e80fdb; */
	}
	
	.leading-0 p, .item p
	{
/* 		background-color: #480fe8; */
		/* display: inline; */ /* should push text to the right of image!! */
/* 		padding-left: 5px; */
	}
	
	.item
	{
		float: left;
/* 		background-color: #0fe866; */
	}
	
	.img-intro-left
	{
		float: left;
		display: inline;
		padding-right: 10px; /*  need this to push the text out to the right */
	}
	
	.jobSeekersArea table
	{
		margin-top: 15px;
		margin-bottom: 16px;
	}
	
	.jobSeekersArea table img
	{
		border-style: none;
	}