/*
	--------------------------------------------------
	STRUCTURE STYLES
	--------------------------------------------------
	Client: Port Hope
	Author:	Ryan Whillier
	Date:	March 2010
		
*/

/* structure.css are the styles for the DIVs in a website and should not contain
any typographic or content-related styles for a site. The styles within are strictly
used to create the layout/structure of the website and, as such, this style sheet 
will (almost) never need to be altered by the client or back-end programmers. */

/* ----- comment styles well for better reference later! ----- */
/* ----- try to lay this out in the following sections and from top to bottom on pages ----- */


/* ===================================================================================== STYLES FOR ALL PAGES */


.int{
	background: url(/images/structure/interior-background-image.gif) top left repeat-x;
}

/* ===== Main Wrapper For Site ===== */


#uber {
	position: relative;
	margin: auto auto;
	width: 970px;
}

/* ===== Background Clouds ===== */

#backgroundClouds{
	width:100%;
	background:url(/images/structure/home-clouds.jpg) top center no-repeat;
}

.int #backgroundClouds{
	background:url(/images/structure/interior-clouds.jpg) top center no-repeat;
}


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


#header {
	float: left;
	width: 970px;
	height: 342px;
	margin: 0px 0px 0px 0px;
	background: url(/images/structure/header-background.jpg) top left no-repeat;

}

.int #header {
	float: left;
	width: 970px;
	height: 212px;
	margin: 0px 0px 0px 0px;
	background:url(/images/structure/interior-header.jpg) top left no-repeat;

}

/* ===== Search ===== */


#search {
	position: relative;
	float: right;
	display: block;
	top: 7px;
	margin: 0;
	padding: 0;
	margin-right:10px;
	width: 210px;
	height: 22px;
	text-align:right;
	padding-top:3px;
	background: url(/images/structure/searchBox.jpg) no-repeat top right;
}
#searchText{
	float:left;
}
#searchText p{
	font-size: 12px;
	color: #c7d4dd;
	text-decoration: none;
	text-transform: uppercase;
}

#search form { display: inline; }

#search .searchText {
	position: absolute;
	padding: 0;
	top: 3px;
	left: 64px;
	border: none;
	width: 132px;
	background: transparent;
	font-size: 12px;
	color: #666;
}

#search .gobutton {
	position: absolute;
	top: 0;
	right: 0;
	width: 22px;
	height: 22px;
}


/* ===== Top Navigation ===== */


#topNav {
	float: right;
	margin: 0px 18px 0px 0px;
	padding: 10px 0px 0px 0px;
	text-align: right;
}


/* ===== Logo ===== */


#logo {
	position:absolute;
	top:124px;
	left:43px;
	margin: 0px;
	padding: 0px;
	width: 251px;
	height: 80px;
	overflow: hidden;
}

#logoPrint {
	display:none;
}


.int #logo {
	top:65px;
	left:43px;
}


#tagline{
	position:absolute;
	top:247px;
	left:315px;
	width:632px;
	height:40px;
}


/* ===== Main Navigation ===== */


#mainNav {
	position: absolute;
	top: 277px;
	left:0px;
	clear: both;
	margin: 0px;
	width: 940px;
	height: 50px;
	z-index: 1000;
	padding:15px 15px 0px 15px;
}
.int #mainNav{
	position: absolute;
	top: 147px;
	left:0px;
	clear: both;
	margin: 0px;
	width: 940px;
	height: 50px;
	z-index: 1000;
	padding:15px 15px 0px 15px;
	background:none;
}


/* ===== Main Content Container ===== */

#main {
	position: relative;
	float: left;
	width: 970px;
	height: 217px;
	background:url(/images/structure/home-body-background.jpg) top left no-repeat;
}


/* ===== Footer ===== */

#footerLogoBar{
	clear:both;
	margin: 0px 0px 0px 0px;
	padding: 0px 10px 10px 10px;
	width: 950px;
	height: 88px;
	position:relative;
	background: url(/images/structure/footer-background.gif) top left no-repeat;
}
	#followUs{
		top:30px;
		left:32px;
		width:152px;
		height:28px;
		padding-top:8px;
		position:absolute;
	}
		#facebook{
			width:28px;
			height:28px;
			top:0px;
			left:92px;
			position:absolute;
		}
			#facebook a{
				width:28px;
				height:28px;
				overflow:hidden;
				float:left;
				font-size:1%;
				text-indent:-9999px;
				background: url(/images/structure/facebook-button.gif) top left no-repeat;
			}
				#facebook a:hover{
					background-position: 0px -28px;
				}
		#twitter{
			width:28px;
			height:28px;
			top:0px;
			left:124px;
			position:absolute;
		}
			#twitter a{
				width:28px;
				height:28px;
				overflow:hidden;
				float:left;
				font-size:1%;
				text-indent:-9999px;
				background: url(/images/structure/twitter-button.gif) top left no-repeat;
			}
				#twitter a:hover{
					background-position: 0px -28px;
				}
		#linkedIn{
			width:28px;
			height:28px;
			top:0px;
			left:124px;
			position:absolute;
		}
			#linkedIn a{
				width:28px;
				height:28px;
				overflow:hidden;
				float:left;
				font-size:1%;
				text-indent:-9999px;
				background: url(/images/structure/linkedin-button.gif) top left no-repeat;
			}
				#linkedIn a:hover{
					background-position: 0px -28px;
				}
	#signUp{
		width:151px;
		height:25px;
		top:33px;
		left:213px;
		position:absolute;
	}
		#signUp a{
			width:151px;
			height:25px;
			overflow:hidden;
			float:left;
			font-size:1%;
			text-indent:-9999px;
			background: url(/en/images/structure/subscribe-to-enews.gif) top left no-repeat;
		}
			#signUp a:hover{
				background-position: 0px -25px;
			}
	#portHopeLogo{
		width:40px;
		height:61px;
		top:14px;
		left:391px;
		position:absolute;
	}
		#portHopeLogo a{
			width:40px;
			height:61px;
			overflow:hidden;
			float:left;
			font-size:1%;
			text-indent:-9999px;
			background: url(/en/images/structure/logo-port-hope.png) top left no-repeat;
		}
	#northumberland{
		width:164px;
		height:37px;
		top:27px;
		left:445px;
		position:absolute;
	}
		#northumberland a{
			width:164px;
			height:37px;
			overflow:hidden;
			float:left;
			font-size:1%;
			text-indent:-9999px;
			background: url(/en/images/structure/logo-northumberland.png) top left no-repeat;
		}
	#eap{
		width:300px;
		height:57px;
		top:15px;
		left:642px;
		position:absolute;
	}
		#eap a{
			width:300px;
			height:57px;
			overflow:hidden;
			float:left;
			font-size:1%;
			text-indent:-9999px;
			background: url(/en/images/structure/logo-economic-action-plan.png) top left no-repeat;
		}
#footer {
	margin: 0px 0px 0px 0px;
	padding: 0px 24px 0px 24px;
	width: 922px;
	position:relative;
}

#footerText {
	float: left;
	width: 500px;
	margin-top:2px;
	line-height: 1.25;
	overflow: hidden;
	font-size: 10px;
	color:#004272;
	text-transform:uppercase;
}

#footerNav {
	margin: 0;
	padding: 0px;
	width: 400px;
	text-align: left;
	overflow: hidden;
	position:absolute;
	top:0px;
	left:325px;
	color:#004272;
	font-size:10px;
	text-transform:uppercase;
}

#esol {
	float: right;
	margin: 3px 0px 0px 0px;
	background: transparent url(/en/images/structure/esolutionsgroupLogo.gif) top left no-repeat;
}

#esol a {
	display: block;
	width: 171px;
	height: 17px;
}

#esol img {
	display: block;
	width: 0;
}





/* ===================================================================================== STYLES HOME PAGE */


/* ===== Banner ===== */


#homepageBannerContainer {
	float: left;
	margin: 0px 0px 1px 0px;
	width: 800px;
	height: 98px;
	overflow: hidden;
}

#homepageBanner {
	/*display: none;*/ /* Display none if using rotating banners */
}


/* ===== Left Content ===== */

#contentLeft {
	position:absolute;
	top:0px;
	left:15px;
	width: 272px;
	height: 192px;
	overflow:hidden;
	padding: 15px 20px 10px 20px;
}
	#contentLeft p{
		font-size:13px;
		line-height:21px;
		color:#003a65;
	}

/* ===== Centre Content ===== */

#contentCentre {
	position:absolute;
	top:0px;
	left:327px;
	width: 292px;
	height: 202px;
	overflow: hidden;
	padding: 15px 0px 0px 0px;
}

.seeAll{
	top:23px;
	left:231px;
	width:53px;
	height:11px;
	position:absolute;
}
		.seeAll a{
			width:53px;
			height:11px;
			overflow:hidden;
			float:left;
			font-size:1%;
			text-indent:-9999px;
			background: url(/en/images/structure/see-all.gif) top left no-repeat;
		}
		.seeAll a:hover{
			background-position: 0px -11px;
		}

.itemList{
	width:254px;
	height:123px;
	padding:16px 20px 20px 20px;
	background:url(/images/structure/news-list-background.gif) top left no-repeat;
	overflow: hidden;
}
	.itemList ul{
		margin:0px !important;
		padding:0px !important;
		list-style-type: none;
	}
	.itemList li{
		color:#003a65;
		width:254px;
		background:url(/images/structure/news-item-arrow.gif) 245px 7px no-repeat;
		margin: 0px 0px 8px 0px !important;
		padding: 0px 0px 5px 0px !important;
		border-bottom: 1px solid #dbe3e9;
	}
	.itemList a{
		color:#003a65 !important;
		text-decoration:none !important;
	}
		.itemList a:hover{
			text-decoration:underline!important;
		}
	.date{
		color: #3c3c3c;
		font-weight:bold;
		line-height:14px;
		margin-bottom:0px;
	}
	.lastItem{
		border-bottom:none !important;
	}

/* ===== Right Content ===== */

	
#contentRight {
	position:absolute;
	top:0px;
	left:644px;
	width: 292px;
	height: 202px;
	overflow: hidden;
	padding: 15px 0px 0px 00px;
}





/* ===================================================================================== STYLES FOR CONTENT PAGES */


/* ===== Actions and Breadcrumbs ===== */


#actionsContainer {
	position: relative;
	float: left;
	width: 637px;
	height: 42px;
	padding-top: 7px;
	padding-right: 17px;
	margin-bottom:25px;
	font-size: 12px;
	line-height: 16px;
	background:url(/images/structure/actions-background.gif) top right no-repeat;
}
.wide #actionsContainer{
	width:881px;
}

#breadcrumbs {
	clear:both;
	padding: 0px;
	width: 637px;
	color: #003a65;
	overflow: hidden;
}
.wide #breadcrumbs{
	width:898px;
}

#actions {
	clear:both;
	position: relative;
	float: right;
	padding: 0px;
	width: 390px;
	margin-bottom:10px;
	text-align: right;
}	

#actions form { display: inline; }


/* ===== Interior Layout ===== */


.mainInterior {
	background: #FFF url(/images/structure/template_content_background.jpg) repeat-y 0 0;
	width:900px !important;
	height:auto !important;
	padding: 0px 35px;
	z-index: 1;
}

#contentInt {
	float: right;
	padding: 10px 0 20px 0px;
	width: 654px;
	overflow: hidden;		
}
	#contentInt p{
		color:#003a65;
	}

.wide #contentInt{
	width:898px;
	float:left;
}

/* -- This is a full width interior - used when there is no sub navigation on the page -- */


#contentInt.wide {
	width: 780px;
	background-color: #fff; /* This hides mainInterior's bg image */		
}