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

#wrapper{
	width: 100%;
	min-width: 980px;
	background: url(../images/structure/bg-wrapper.gif) 0 0 repeat-x;
}


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

#uberHeader {
	width: 100%;
	min-width: 980px;
	position: relative;
	z-index: 1202;
}

#header {
	margin: 0 auto;
	width: 980px;
	z-index: 1201;
}


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

#searchContainer{
	float: right;
	width: 456px;
	padding: 7px 0 0 0;
}


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

#search {
	position: relative;
	float: left;
	display: block;
	margin: 0;
	padding: 0;
	width: 302px;
	height: 36px;
	padding: 0 8px 8px 1px;
	background: url(../images/structure/searchBox.png) no-repeat 0 0;
}

#search form { display: inline; }

#search .searchText {
	position: absolute;
	padding: 8px 10px;
	border: none;
	width: 247px;
	background: transparent;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 19px;
	color: #000;
	border: solid #c7c7c7;
	border-width: 1px 0 1px 1px;
	border-radius: 3px 0 0 3px;
}

#search .gobutton {
	position: absolute;
	top: 0;
	right: 8px;
	width: 36px;
	height: 35px;
	border: solid #c7c7c7;
	border-width: 1px 1px 1px 0;
	border-radius: 0 3px 3px 0;
}


/* ===== I'd Like to... ===== */

#idLikeTo{
	width: 145px;
	height: 44px;
	float: right;
	position: relative;
	z-index: 1100;
}

#idLikeTo a.quickLink{
	position: absolute;
	top: 0;
	left: -2px;
	display: block;
	width: 154px;
	height: 44px;
	background: url(../en/images/structure/id-like-to.png) 0 0 no-repeat;
	text-indent: -9999em;
	overflow: hidden;
	z-index: 1099;
}

#idLikeTo a.quickLink:hover, #idLikeTo a.quickLink:active, #idLikeTo a.quickLink:focus { background-position: 0 -44px; }

#idLikeTo a.quickLink.current{ background-position: 0 -88px; }

#idLikeTo .quickDropDown{
	display: none;
	position: absolute;
	background: #eba42c;
	right: 0;
	top: 40px;
	width: 456px;
	padding: 10px 0 20px 0;
	z-index: 1098;
	line-height: 16px;
	height: auto !important;
}

#idLikeTo .quickDropDown a{
	color: #000;
	font-size: 12px;
}

#idLikeTo .quickDropDown ul{
	float: left;
	padding: 0 18px 0 20px !important;
	width: 190px;
	margin: 0 !important;
	list-style-type: none;
	list-style-image: none !important;
	overflow: hidden;
}

#idLikeTo .quickDropDown li{
	border-top: 1px solid #d4942c;
}

#idLikeTo .quickDropDown li:first-child{ border: none; }


#idLikeTo .quickDropDown li a{
	display: block;
	background: url(../images/structure/bullet-links.gif) 0 6px no-repeat;
	padding: 4px 0 4px 10px;
}

#idLikeTo .quickDropDown li a:hover, #idLikeTo .quickDropDown li a:active, #idLikeTo .quickDropDown li a:focus{
	text-decoration: none;
	background: url(../images/structure/bullet-links-hover.gif) #efb656 0 6px no-repeat;
}


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

#topNavContainer{
	padding-right: 6px;
	padding-left: 6px;
	float: right;
	text-align: right;
	margin-top: 15px;
	min-width: 443px;
	background: #1e3e63;
	border-radius: 3px;
}

#topNav {
	float: left;
	margin-left: 7px;
	padding: 0;
	height: 34px;
	overflow: hidden;
	min-width: 222px;
	max-width: 362px;
	white-space: nowrap;
}

#haveYourSay{
	float: left;
	padding: 7px 9px 7px 1px;
}

#haveYourSay a{
	display: block;
	background: url(../en/images/structure/have-your-say.png) 0 0 no-repeat;
	width: 123px;
	height: 22px;
	text-indent: 9999em;
	overflow: hidden;
	font-size: 1%;
}

#haveYourSay a:focus{
	outline: 1px solid #D9D9D9;
}

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

#logo {
	float: left;
	margin: 13px 0 17px;
	width: 326px;
	height: 80px;
}
#logo a {
	display: inline-block;
}
#logo a:focus img {
    outline: 1px solid #D9D9D9;
}

.homepage h1{
	display: none;
}

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

#mainNav {
	position: relative;
	float: left;
	clear: both;
	margin: 0;
	width: 980px;
	height: 53px;
	z-index: 1000;
}


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

#uber {
	position: relative;
	width: 100%;
	min-width: 980px;
	background: url(../images/structure/bg-uber-homepage.gif) center top no-repeat;
}

#main {
	position: relative;
	margin: 0 auto;
	width: 961px;
	padding: 20px 19px 20px 0;
}


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

#uberFooter {
	width: 100%;
	min-width: 980px;
	padding: 10px 0 20px 0;
	overflow: hidden;
	background: url(../images/structure/bg-uber-footer.gif) 0 0 repeat-x;
}

#footer {
	margin: 0 auto;
	padding: 0px;
	width: 980px;
}

.footerBuckets{
	float: left;
}

/* Footer Left */

#footerLeft{
	padding: 5px 18px 0 0;
	width: 76px;
	height: 82px;
}

#footerLeft img{
	width: 76px;
	height: 82px;
}

#footerLeft p{
	margin: 0 !important;
}

/* Footer Middle */

#footerMiddle{
	width: 620px;
	padding: 20px 26px 0 0;
	overflow: hidden;
	font-size: 13px;
	line-height: 16px;
}

#footerMiddle p{
	margin: 0 0 5px 0 !important;
}

#footerTextTop {
	float: left;
	width: 620px;
	overflow: hidden;
}

#footerTextBottom {
	float: left;
	width: 620px;
	overflow: hidden;
	font-size: 12px;
}

#footerNav {
	float: left;
	clear: both;
	margin: 0;
	width: 620px;
	text-align: left;
	overflow: hidden;
}

/* Footer Right */

#footerRight{
	width: 240px;
	padding: 35px 0 0 0;
}

#socialLinks{
	max-width: 240px;
	float: right;
}

#socialLinks p{
	float: left;
	position: relative;
	top: 4px;
	margin: 0 !important;
}

#socialLinks ul{
	float: left;
	margin: 0;
	padding: 0;
	list-style-type: none;
	list-style-image: none !important;
}

#socialLinks li{
	float: left;
}

#socialLinks li a{
	margin: 0 1px 0 6px;
}

#socialLinks li a img{
	width: 26px;
	height: 26px;
}

#socialLinks li a:focus img{
	outline: 1px solid #D9D9D9;
}

/* eSol */

#esol {
	float: right;
	margin: 0px 0px 0px 0px;
}

#esol a {
	display: block;
	width: 171px;
	height: 17px;
	font-size:0px;
	text-indent: -9999px;
	overflow: hidden;
	background: transparent url(../en/images/structure/esolutionsgroupLogo.gif) top left no-repeat;
}

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




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

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

#bannerWrapper{
	width: 100%;
	min-width: 980px;
	height: 410px;
	background: #dbe2e9;
	position: relative;
	z-index: 404;
}


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

#homepageBannerContainer {
	margin: 0 auto;
	width: 100%;
	height: 410px;
	position: relative;
	overflow: hidden;
}

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

#fadeLeft, .fadeLeft{
	width: 154px;
	height: 410px;
	position: absolute;
	left: -306px;
	top: 0;
	background: url(../images/structure/bg-fade-left.png) 0 0 repeat-y;
	text-indent: -9999em;
	overflow: hidden;
	font-size: 1%;
}

#fadeRight, .fadeRight{
	width: 154px;
	height: 410px;
	position: absolute;
	right: -306px;
	top: 0;
	background: url(../images/structure/bg-fade-right.png) 0 0 repeat-y;
	text-indent: -9999em;
	overflow: hidden;
	font-size: 1%;
}

/* ===== Quick Links Wrapper ===== */

#uberQuickLinks{
	width: 100%;
	min-width: 980px;
	position: absolute;
	bottom: 0;
	height: 54px;
	background: url(../images/structure/bg-uber-quicklinks.png) 0 0 repeat-x;
	z-index: 403;
}

#quickLinksContainer{
	width: 980px;
	height: 54px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	z-index: 402;
}

#quickLinksAdvanced {
	width: 980px;
	height: 54px;
	position: relative;
	padding: 0;
	z-index: 401;
}

#quickLinksAdvanced a.mainQuickLink {
	font-size: 1%;
	text-indent: -9999px;
}

#quickLinksAdvanced a {
	color: #003366;
	text-decoration: none;
}

#quickLinksAdvanced ul{
	list-style-type: none;
	list-style-image: none !important;
	padding: 0px;
	margin: 0 7px !important;
	float: left;
}

#quickLinksAdvanced li{
	margin: 0 !important;
	float: left;
}

#quickLinksAdvanced li {
	z-index:400;
}

a.mainQuickLink, a.mainQuickLink:link, a.mainQuickLink:visited {
	display: block;
	float: left;
	padding: 0;
	height: 54px;
	background-image: url(../en/images/structure/quicklink_advanced.png);
	text-indent: -9999px;
	font-size: 1%;
	overflow: hidden;
	float: left;
}

#quickLink01 a.mainQuickLink { background-position: 0px 0px; width: 226px; }
#quickLink02 a.mainQuickLink { background-position: -226px 0px; width: 211px; }
#quickLink03 a.mainQuickLink { background-position: -437px 0px; width: 174px; }
#quickLink04 a.mainQuickLink { background-position: -611px 0px; width: 145px; }
#quickLink05 a.mainQuickLink { background-position: -756px 0px; width: 210px; }

#quickLink01 a.mainQuickLink:hover, #quickLink01 a.mainQuickLink:focus, #quickLink01 a.current { background-position: 0px -54px; }
#quickLink02 a.mainQuickLink:hover, #quickLink02 a.mainQuickLink:focus, #quickLink02 a.current { background-position: -226px -54px; }
#quickLink03 a.mainQuickLink:hover, #quickLink03 a.mainQuickLink:focus, #quickLink03 a.current { background-position: -437px -54px; }
#quickLink04 a.mainQuickLink:hover, #quickLink04 a.mainQuickLink:focus, #quickLink04 a.current { background-position: -611px -54px; }
#quickLink05 a.mainQuickLink:hover, #quickLink05 a.mainQuickLink:focus, #quickLink05 a.current { background-position: -756px -54px; }

#quickLinksAdvanced .quickDropDown{
	display: none;
	height: 220px;
	position: absolute;
	top: 54px;
	left: 0;
	width: 960px;
	z-index: 399;
	padding: 16px 10px 0 10px;
	overflow: hidden;
	background-color: #FFF;
	background-repeat: no-repeat;
}


#quickLinksAdvanced .quickDropDown ul{
	list-style-type: none;
	list-style-image: none !important;
	padding:  0 !important;
	margin: 0 0 5px 0 !important;
	border-bottom: 1px solid #c3c3c3;
	height: 146px;
	overflow: hidden;
	width: 220px;
}

#quickLinksAdvanced .myzone{
	width: 220px;
	padding: 0 10px;
	float: left;
	line-height: 17px;
}

#quickLinksAdvanced .myzone h2{
	font-size: 17px;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	font-weight: normal;
	margin: 4px 0 8px 0;
}

#quickLinksAdvanced .myzone .date{
	display: block;
	color: #000;
}

#quickLinksAdvanced .myzone a:hover, #quickLinksAdvanced .myzone a:active, #quickLinksAdvanced .myzone:focus{
	text-decoration: underline;
}

#quickLinksAdvanced .myzone li{
	border-top: 1px solid #c3c3c3;
	padding: 5px 0;
	width: 220px;
}

#quickLinksAdvanced .myzone li:first-child{
	border: none;
}


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

#contentLeft {
	float: left;
	padding: 0 0 0 20px;
	width: 220px;
}

#newsContainer{
	max-height: 195px;
}

#printArea #newsContainer ul{
	margin: 0;
	padding: 0 0 6px 0;
	list-style-type: none;
	list-style-image: none !important;
	font-size: 14px;
	line-height: 18px;
}

#printArea #newsContainer li{
	padding: 6px 0;
	margin: 0;
	border-bottom: 1px solid #c3c3c3;
}

#printArea #newsContainer li:first-child{ padding-top: 0; }

#printArea #newsContainer li a{
	display: block;
	max-height: 36px;
	overflow: hidden;
}

#printArea #newsContainer a{
	color: #003366;
}

#printArea #contentLeft h2, #printArea .bucketContainer h2, #printArea .bucketContainer h2 a{
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 16px;
	line-height: 20px;
	margin: 0 0 11px 0;
	color: #000;
}


/* ===== Buckets ===== */

.bucketContainer{
	float: left;
	width: 220px;
	padding: 0 1px 0 19px;
	overflow: hidden;
}

#contentLeftMiddle.bucketContainer{ padding-left: 20px; }
#contentLeft .bucketContainer{ padding-right: 0px; }

.bucketImageContainer{
	width: 220px;
	height: 150px;
	position: relative;
	padding: 0 0 15px 0;
	background: url(../images/structure/shadow-bucket-bottom.jpg) left bottom no-repeat;
}

.bucketImage, .bucketImage img{
	width: 220px;
	height: 150px;
}

.bucketImage a:focus img{
	outline: 1px solid #003366;
}

.bucketTop{
	position: absolute;
	width: 220px;
	height: 4px;
	top: 0;
	left: 0;
	overflow: hidden;
	text-indent: -9999em;
	background: url(../images/structure/shadow-bucketimage-top.png) 0 0 no-repeat;
}

.bucketRight{
	position: absolute;
	width: 4px;
	height: 142px;
	top: 4px;
	right: 0;
	overflow: hidden;
	text-indent: -9999em;
	background: url(../images/structure/shadow-bucketimage-right.png) 0 0 no-repeat;
}

.bucketBottom{
	position: absolute;
	width: 220px;
	height: 4px;
	top: 146px;
	left: 0;
	overflow: hidden;
	text-indent: -9999em;
	background: url(../images/structure/shadow-bucketimage-bottom.png) 0 0 no-repeat;
}

.bucketLeft{
	position: absolute;
	width: 4px;
	height: 142px;
	top: 4px;
	left: 0;
	overflow: hidden;
	text-indent: -9999em;
	background: url(../images/structure/shadow-bucketimage-left.png) 0 0 no-repeat;
}


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


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

#uberActionsContainer{
	width: 100%;
	min-width: 980px;
	background: url(../images/structure/bg-uber-actions.gif) #47732a 0 0 repeat-x;
}

#actionsContainer {
	position: relative;
	margin: 0 auto;
	width: 980px;
	z-index: 999;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	font-weight: bold;
}

#breadcrumbs {
	float: left;
	padding: 14px 5px 12px 5px;
	width: 550px;
	color: #fff;
	overflow: hidden;
}

#actions {
	position: relative;
	float: right;
	padding: 10px 0 10px 0;
	height: 26px;
	width: 420px;
	text-align: right;
	z-index: 998;
}

#actions form { display: inline; }


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

#intBanner{
	width: 684px;
	height: 185px;
	/* background: #ebeff4; */
	padding: 1px;
	border: 1px solid #cdcdcd;
	margin: 0 0 20px 0;
}

#intBanner img{
	width: 684px;
	height: 185px;
}

.wide #intBanner, .wide #intBanner img{
	width: 928px;
}

#subNavContainer {
	width: 240px;
	padding: 0 2px;
	float: left;
	margin-bottom: 20px;
}

.interior #uber{
	background: url(../images/structure/bg-uber-interior.gif) center top repeat-y;
}

.interior #uber.wide{
	background: url(../images/structure/bg-uber-interior-wide.gif) center top repeat-y;
}

#uberInner{
	width: 100%;
	min-width: 980px;
	background: url(../images/structure/bg-uber-inner.png) left bottom repeat-x;
}

#main.mainInterior {
	background: url(../images/structure/template_content_background.gif) #FFF left top repeat-y;
	padding: 0;
	width: 980px;
}

#mainTop{
	background: url(../images/structure/template_content_background-top.gif) left top no-repeat;
	padding-top: 32px;
	width: 980px;
}

#mainBottom{
	background: url(../images/structure/template_content_background-bottom.gif) left bottom no-repeat;
	padding-bottom: 38px;
	width: 980px;
}

.wide #mainTop, .wide #mainBottom, .wide #main.mainInterior { background-image: none; background-color: #fff; }

#contentInt {
	float: left;
	padding: 5px 24px 5px 24px;
	width: 688px;
	overflow: hidden;
}


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

.wide #contentInt {
	width: 932px;
	background-color: #FFF; /* This hides mainInterior's bg image */
}
.wide #subNavContainer {
	display: none;
}

/* Social Links */

#main #socialLinks ul{
	list-style-type: none;
	list-style-image: none !important;
	padding: 0px;
	margin: 0px;
}
	#main #socialLinks li{
		margin:0px;
		padding:0px;
		float:left;
	}


/* Interior quicklinks */
#intFloatRight {
	float: right;
	width: 195px;
	overflow:hidden;
	padding: 4px 0 0 25px;
	background: #FFF;
}
#intFloatRight.hide {
	display: none;
}
#intQuicklinks {
	width: 195px;
	background: url(../images/structure/intQuicklinks-middle.gif) 0 0 repeat-y;
	margin-bottom: 11px;
}
#intQuicklinksTop {
	width: 195px;
	background: url(../images/structure/intQuicklinks-top.gif) 0 0 no-repeat;
	padding-top: 18px;
}
#intQuicklinksBottom {
	width: 195px;
	background: url(../images/structure/intQuicklinks-bottom.gif) 0 bottom no-repeat;
	padding-bottom: 18px;
	overflow: hidden;
}
#intQuicklinks p, #intQuicklinks ul, #intQuicklinks li {
	margin: 0 !important;
}
#intQuicklinks .intQuicklinksHeader {
	padding: 0 18px;
}
#intQuicklinks .intQuicklinksHeader p {
	color: #000;
	font-size: 16px;
	font-family: 'Raleway', Arial, Helvetica, sans-serif;
	padding: 0 0 8px 0;
	border-bottom: 1px solid #bebebe;
	margin-bottom: 6px !important;
}
#intQuicklinks .intQuicklinksBody{
	padding: 0 18px;
}
#intQuicklinks .intQuicklinksBody li {
	list-style-type: none;
	list-style-image: none !important;
}
#intQuicklinks .intQuicklinksBody li a {
	background-repeat: no-repeat;
	background-image: url(../images/structure/intQuicklinksArrow.gif);
	background-position: 2px 5px;
	padding: 0px 0 0px 15px;
	text-decoration: none;
	display: block;
	overflow: hidden;
	font-weight: bold;
	color: #47732a;
}

#intQuicklinks .intQuicklinksBody li a:hover, #intQuicklinks .intQuicklinksBody li a:active, #intQuicklinks .intQuicklinksBody li a:focus { text-decoration: underline; }


/* Set Default image when JavaScript disabled*/
#intBanner
{
	background: url(../en/rotatingimages/defaultInterior/defaultInteriorBanner.jpg) no-repeat 1px 1px #FFFFFF;
}

/* For Google Translate page */
#translanguages ul
{
	width:300px;
	float:left;
	margin-right:20px;
}

#translanguages.rightcolumn ul
{
	margin-left:20px;
}

#translanguages a, #translanguages a:link, #translanguages a:visited
{
	text-decoration:none;
}

#translanguages a:hover,#translanguages a:active, #translanguages a:focus
{
	text-decoration: underline;
}

/* For the Interior wide banner at the top - remove if not applicable */
#intBanner #interiorBannerImage.hide, #intBanner #interiorBannerLink.hide,#intBanner.hide
{
    display:none;
}