/*
	--------------------------------------------------
	STRUCTURE STYLES
	--------------------------------------------------

	Author:	eSolutionsGroup.ca
		
*/

/* 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 */


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

#container {
	padding: 0 0 20px 0;
	position: relative;
	margin: auto;
	width: 916px;
	background: #FFF;
	z-index: 802;
}

.interiorOpenData #container{
	width: 100%;
}

/* ===== Header ===== */
/*
#header {
	float: left;
	margin: 0;
	width: 904px;
	padding: 0 6px;
	z-index: 1201;
}
*/
.interiorOpenData #opendatatopimage{
	width: 100%;
	min-width: 916px;
	background: #1B76AB;
	height: 90px;
	padding: 0px;
	margin-bottom: 10px;
}

#headerBanner{
    width: 418px;
    height: 90px;
    float: right;
}

#headerBanner img {
    width: 418px;
    height: 90px;
}

/* Interior */
/*
#intSocialLinks {
	float: right;
	margin: 0px 34px 0px 0px;
	padding: 0px 0px 0px 0px;
	max-width: 287px;
	height: 32px;
	overflow: hidden;
}

#printArea #intSocialLinks ul{
	padding: 0;
	margin: 0 65px 0 0;
	list-style-type: none;
	float: right;
	width: 124px;
}

#intSocialLinks span{
	float: right;
	padding: 9px 9px 0 8px;
	color: #003366;
	font-size: 16px
}

#printArea #intSocialLinks li{
	margin: 0;
	padding: 0 9px 0 0px;
	float: right;
}

*/

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

#opendatalogo {
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 439px;
	height: 57px;
	overflow: hidden;
	position: absolute;
	top: 27px;
	left: 0;
}

.interiorOpenData #opendatalogo{
	width: 446px;
	height: 57px;
	float: left;
	top: auto;
	left: auto;
	padding: 15px 0 0 0;
}

#opendatalogo h1{
	margin: 0 !important;
}

/* ===== Footer ===== */
/*
#footer{
	padding: 35px 0 0 0;
	width: 900px;
	margin: 0px auto 20px auto;
	font-size: 11px;
}

#footerContent{
	border-top: 1px solid #A9A9A9;
	width: 900px;
	padding-top: 5px;
}

.interiorOpenData #footer{
	width: 916px;
}

#footerText {
	float: left;
	width: 620px;
	line-height: 1.5;
	overflow: hidden;
	color: #333;
	padding: 5px 0;
}

#footerNav {
	float: left;
	margin: 0;
	padding: 5px 0;
	width: 280px;
	text-align: right;
	overflow: hidden;
}

#footer .horizNavSeparator{
	padding: 0 7px;
}
*/
/* ===== Main Content Container ===== */
/*
#main {
	position: relative;
	float: left;
	width: 916px;
}
*/

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


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

#homepageBannerContainer {
	/* float: left; */
	margin: 0 0 35px 0;
	width: 916px;
	height: 250px;
	overflow: hidden;
	padding: 0px;
	position: relative;
}

#bannerHome{
	padding: 0 8px;
	width: 900px;
	height: 250px;
}

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


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

#contentMain {
	width: 900px;
	margin: 0 8px;
	position: relative;
	z-index: 801;
}

#contentMain {
	height: 228px;
}

.quickLinksContainer{
	width: 292px;
	float: left;
	background: #d4e8f4;
	position: absolute;
	padding: 8px 0 0 0;
}

.quickLinksContainer.open{ z-index: 800;}
.quickLinksContainer.tempOpen{ z-index: 800;}

.openDataWaterloo #quicklink01{ left: 0px; top: 0px; background: url(../../images/structure/bg-corners-top.png) 0 0 no-repeat; }
.openDataWaterloo #quicklink02{ left: 304px; top: 0px; background:  url(../../images/structure/bg-corners-top.png) 0 0 no-repeat; }
.openDataWaterloo #quicklink03{ left: 608px; top: 0px; background:  url(../../images/structure/bg-corners-top.png) 0 0 no-repeat; }
.openDataWaterloo #quicklink04{ left: 0px; bottom: 0px; background:  url(../../images/structure/bg-corners-top.png) 0 0 no-repeat; }
.openDataWaterloo #quicklink05{ left: 304px; bottom: 0px; background: url(../../images/structure/bg-corners-top.png) 0 0 no-repeat; }
.openDataWaterloo #quicklink06{ left: 608px; bottom: 0px; background: url(../../images/structure/bg-corners-top.png) 0 0 no-repeat; }

.openDataWaterloo #quicklink01.open { background-position: -292px 0; }
.openDataWaterloo #quicklink02.open { background-position: -292px 0; }
.openDataWaterloo #quicklink03.open { background-position: -292px 0; }
.openDataWaterloo #quicklink04.open { background-position: -292px 0; }
.openDataWaterloo #quicklink05.open { background-position: -292px 0; }
.openDataWaterloo #quicklink06.open { background-position: -292px 0; }

.quickLinksContainer p{ margin: 5px 0 !important;}

.quickLinkContent{
	width: 248px;
	float: left;
	padding: 0 22px;
}

#quicklink01 .quickLinkContent{ background: url(../../images/structure/quicklink01.png) #D4E8F4 0 0 no-repeat; }
#quicklink02 .quickLinkContent{ background: url(../../images/structure/quicklink02.png) #D4E8F4 0 0 no-repeat; }
#quicklink03 .quickLinkContent{ background: url(../../images/structure/quicklink03.png) #D4E8F4 0 0 no-repeat; }
#quicklink04 .quickLinkContent{ background: url(../../images/structure/quicklink04.png) #D4E8F4 0 0 no-repeat; }
#quicklink05 .quickLinkContent{ background: url(../../images/structure/quicklink05.png) #D4E8F4 0 0 no-repeat; }
#quicklink06 .quickLinkContent{ background: url(../../images/structure/quicklink06.png) #D4E8F4 0 0 no-repeat; }

#quicklink01.open .quickLinkContent{ background-position: -292px 0; background-color: #AFCFE4; }
#quicklink02.open .quickLinkContent{ background-position: -292px 0; background-color: #AFCFE4; }
#quicklink03.open .quickLinkContent{ background-position: -292px 0; background-color: #AFCFE4; }
#quicklink04.open .quickLinkContent{ background-position: -292px 0; background-color: #AFCFE4; }
#quicklink05.open .quickLinkContent{ background-position: -292px 0; background-color: #AFCFE4; }
#quicklink06.open .quickLinkContent{ background-position: -292px 0; background-color: #AFCFE4; }


.quickLinksHead{
	height: 70px;
	padding: 5px 70px 0 0px;
	overflow: hidden;
}

.quickLinksHead h2, .quickLinksHead a{
	font-size: 22px !important;
	line-height: 26px !important;
	font-weight: normal;
	color: #003366 !important;
	margin: 0 !important;
	text-decoration: none !important;
}

.quickLinksHead a:hover, .quickLinksHead a:active { color: #000 !important; }

.quickLinksBody{
	height: 120px;
	float: left;
	padding: 0 0px 0 0px;
	overflow: hidden;
	width: 248px;
	display: none;
}

.quickLinksBody p{
	margin: 0 0 5px 0 !important;
}

.quickLinksBody a{
	color: #003366 !important;
}

#printArea .quickLinksBody ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#printArea .quickLinksBody li{
	margin: 0 0 5px 0;
	padding: 0;
	display: block;
	width: 212px;
	height: 32px;
	padding: 0 14px;
	line-height: 32px;
	color: #FFF;
	overflow: hidden;
	background: url(../../images/structure/bg-quicklink-body-list.png) 0 0 no-repeat;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
}

#printArea .quickLinksBody li a{
	color: #FFF !important;
	text-decoration: none;
	display: block;
	width: 212px;
	height: 32px;
}

#printArea .quickLinksBody li a:hover, #printArea .quickLinksBody li a:active{ text-decoration: underline;}

.quickLinksFoot p{
	margin: 0 !important;
	display: block;
	background: url(../../images/structure/quicklinks-footer-arrow.png) 0 0 no-repeat;
	width: 292px;
	height: 25px;
	text-indent: -9999em;
	overflow: hidden;
}

.noContent .quickLinksFoot p{
	background-image: none;
}

.quickLinksFoot{
	display: block;
	background: url(../../images/structure/quicklinks-footer.png) 0 0 no-repeat;
	width: 292px;
	height: 25px;
	overflow: hidden;
}


.open .quickLinksFoot p{ background-position: -292px 0; }
	

.open .quickLinksFoot{
	border-top: 1px solid #d4e8f4;
	height: 24px;
}





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


/* ===== Interior Layout ===== */
/*
#main.mainInterior {
	width: 916px;
	margin: 0 auto 0 auto;
	float: none;
	padding-top: 12px;
	z-index: 807;
}

#contentInt {
	float: left;
	padding: 10px 0 20px 0px;
	width: 920px;
	overflow: hidden;		
}
*/
/* -- This is a full width interior - used when there is right quicklink Container -- */
/*
.wide #contentInt { width: 916px;}

*/
/* Interior quicklinks */
#intFloatRightOpenData {
	float: right;
	width: 287px;
	padding: 20px 0;
	margin: 0 0 30px 25px;
	position: relative;
	z-index: 806;
}
#intFloatRightOpenData.hide {
	display: none;
}


/* -- Interior Quick Links -- */
.intQuickLinksContainer{
	width: 287px;
	float: left;
	background: #d4e8f4;
	padding: 8px 0 8px 0;
	margin: 0 0 10px 0;
	position: relative;
	height: 52px;
}

#intQuicklink01{ background: url(../../images/structure/bg-corners-interior.png) 0 0 no-repeat; }
#intQuicklink02{ background:  url(../../images/structure/bg-corners-interior.png) 0 0 no-repeat; }
#intQuicklink03{ background:  url(../../images/structure/bg-corners-interior.png) 0 0 no-repeat; }
#intQuicklink04{ background:  url(../../images/structure/bg-corners-interior.png) 0 0 no-repeat; }
#intQuicklink05{ background: url(../../images/structure/bg-corners-interior.png) 0 0 no-repeat; }
#intQuicklink06{ background: url(../../images/structure/bg-corners-interior.png) 0 0 no-repeat; }

#intQuicklink01.open { background-position: -287px 0; }
#intQuicklink02.open { background-position: -287px 0; }
#intQuicklink03.open { background-position: -287px 0; }
#intQuicklink04.open { background-position: -287px 0; }
#intQuicklink05.open { background-position: -287px 0; }
#intQuicklink06.open { background-position: -287px 0; }

.intQuickLinksContainer p{ margin: 5px 0 !important;}

.intQuickLinkContent{
	width: 263px;
	float: left;
	padding: 0 12px;
}

#intQuicklink01 .intQuickLinkContent{ background: url(../../images/structure/quicklink01-interior.png) #D4E8F4 0 0 no-repeat; }
#intQuicklink02 .intQuickLinkContent{ background: url(../../images/structure/quicklink02-interior.png) #D4E8F4 0 0 no-repeat; }
#intQuicklink03 .intQuickLinkContent{ background: url(../../images/structure/quicklink03-interior.png) #D4E8F4 0 0 no-repeat; }
#intQuicklink04 .intQuickLinkContent{ background: url(../../images/structure/quicklink04-interior.png) #D4E8F4 0 0 no-repeat; }
#intQuicklink05 .intQuickLinkContent{ background: url(../../images/structure/quicklink05-interior.png) #D4E8F4 0 0 no-repeat; }
/*#intQuicklink06 .intQuickLinkContent{ background: url(../../images/structure/quicklink06-interior.png) #D4E8F4 0 0 no-repeat; }*/

#intQuicklink01.open .intQuickLinkContent{ background-position: -287px 0; background-color: #AFCFE4; }
#intQuicklink02.open .intQuickLinkContent{ background-position: -287px 0; background-color: #AFCFE4; }
#intQuicklink03.open .intQuickLinkContent{ background-position: -287px 0; background-color: #AFCFE4; }
#intQuicklink04.open .intQuickLinkContent{ background-position: -287px 0; background-color: #AFCFE4; }
#intQuicklink05.open .intQuickLinkContent{ background-position: -287px 0; background-color: #AFCFE4; }
#intQuicklink06.open .intQuickLinkContent{ background-position: -287px 0; background-color: #AFCFE4; }

#intQuicklink01.intQuickLinksContainer.open{ z-index: 805;}
#intQuicklink01.intQuickLinksContainer.tempOpen{ z-index: 805;}

#intQuicklink02.intQuickLinksContainer.open{ z-index: 804;}
#intQuicklink02.intQuickLinksContainer.tempOpen{ z-index: 804;}

#intQuicklink03.intQuickLinksContainer.open{ z-index: 803;}
#intQuicklink03.intQuickLinksContainer.tempOpen{ z-index: 803;}

#intQuicklink04.intQuickLinksContainer.open{ z-index: 802;}
#intQuicklink04.intQuickLinksContainer.tempOpen{ z-index: 802;}

#intQuicklink05.intQuickLinksContainer.open{ z-index: 801;}
#intQuicklink05.intQuickLinksContainer.tempOpen{ z-index: 801;}

.intQuickLinksHead{
	height: 26px;
	padding: 5px 18px 0 0px;
	overflow: hidden;
}

.intQuickLinksHead h2, .intQuickLinksHead a{
	font-size: 16px !important;
	line-height: 20px !important;
	font-weight: normal;
	color: #003366 !important;
	margin: 0 !important;
	text-decoration: none !important;
}

.intQuickLinksHead a:hover, .intQuickLinksHead a:active { color: #000 !important; }

.intQuickLinksBody{
	height: 116px;
	float: left;
	padding: 0 0px 0 0px;
	overflow: hidden;
	width: 263px;
	display: none;
	
}

.intQuickLinksBody p{
	margin: 0 0 5px 0 !important;
}

.quickLinksBody a{
	color: #003366 !important;
}

#printArea .intQuickLinksBody ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#printArea .intQuickLinksBody li{
	margin: 0 0 5px 0;
	display: block;
	width: 235px;
	height: 32px;
	padding: 0 14px;
	line-height: 32px;
	color: #FFF;
	overflow: hidden;
	background: url(../../images/structure/bg-quicklink-body-list-interior.png) 0 0 no-repeat;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
}

#printArea .intQuickLinksBody li a{
	color: #FFF !important;
	text-decoration: none;
	display: block;
	width: 212px;
	height: 32px;
}

#printArea .intQuickLinksBody li a:hover, #printArea .intQuickLinksBody li a:active{ text-decoration: underline;}

.intQuickLinksFoot p{
	display: block;
	background: url(../../images/structure/quicklinks-footer-arrow-interior.png) 0 0 no-repeat;
	width: 287px;
	height: 21px;
	text-indent: -9999em;
	overflow: hidden;
	margin: 0 !important;
}

.intQuickLinksFoot{
	display: block;
	background: url(../../images/structure/quicklinks-footer-interior.png) 0 0 no-repeat;
	width: 287px;
	height: 21px;
	overflow: hidden;
}


.open .intQuickLinksFoot p{ background-position: -287px 0; }
	

.open .intQuickLinksFoot{
	border-top: 1px solid #d4e8f4;
	height: 20px;
}