/*
	--------------------------------------------------
	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 {
	position: relative;
	overflow: hidden;
	margin: 0 auto;
	width: 100%;
	min-width: 980px;
	z-index: 1203;
}

#uber {
	position: relative;
	margin: auto;
	width: 980px;
	z-index: 1202;
}


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

#uberHeader{
	float: left;
	width: 980px;
	height: 118px;
	padding: 0 230px;
	margin-left: -230px;
	background: #FFF;
}

.interior #uberHeader{
	background: transparent;
	height: 102px;
}

#header {
	float: left;
	margin: 0;
	width: 980px;
	position:relative;
	z-index: 1201;
}
.overlay #header, .overlay #uberHeader { z-index: 100;}
.overlay #bannerBar {z-index: 1151; }

/* ===== Subheader (for interior) ===== */

#subHeader {
	float: left;
	padding: 24px 0 21px 283px;
	overflow: hidden;
	width: 697px;
}


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

.logo {
	float: left;
	padding: 29px 1px 1px 1px;
	margin: 0px 0px 0px 0px;
	width: 266px;
	height: 114px;
}

.navLogo{ display: none;}
.mainNavHover .navLogo{ display: block;}
.mainNavHover .mainLogo{ display: none;}

.logo a:focus img{ outline: 1px solid #c2c2c2;}
.homepage h1{ display: none; }


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

#mainNav {
	position: relative;
	float: left;
	margin: 30px 0 1px 12px;
	width: 700px;
	z-index: 1000;
}

.overlay #mainNav { z-index: 99; }


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

#main {
	position: relative;
	float: left;
	width: 980px;
	z-index: 100;
}

.homepage #main {
	width: 980px;
	padding: 0 230px;
	margin-left: -230px;
	background: #FFF;	
}


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

.search {
	float: left;
	position: relative;
	display: block;
	margin: 0px 0 17px 0;
	padding: 0;
	width: 376px;
	height: 42px;
	background: url(../images/structure/home_searchBox.png) no-repeat 0 0;
}

.search form { display: inline; }

.search .searchText {
	position: absolute;
	padding: 0;
	top: 0px;
	left: 20px;
	border: none;
	width: 300px;
	background: transparent;
	font-size: 17px;
	line-height: 42px;
	height: 42px;
	color: #000;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

.interior .search .searchText { left: 7px; }

.search .gobutton {
	position: absolute;
	top: 0;
	right: 0;
	width: 38px;
	height: 42px;
}

/* Interior Search Bar */
.interior .search {
	width: 278px;
	background: url(../images/structure/interior_searchBox.gif) no-repeat 0 0;
	margin: 0 3px 0 0;
}
.interior .search .searchText { width: 240px; }

/* Drop Down Search Bar */
.dropDownWrapper .search, .interior .dropDownWrapper .search {
	clear: both;
	background: url(../images/structure/mainNav_searchBox.png) no-repeat 0 0;
	width: 407px;
	margin-top: 26px;
	float: left;
}
.dropDownWrapper .search .searchText, .interior .dropDownWrapper .search .searchText { width: 347px; }


/* ===== SubFooter & Social Media ===== */

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

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

#uberSubfooter #socialLinksContainer{ float: right !important; }

#socialLinksContainer{
	position: relative;
	float: left;
	width: 191px;
	height: 42px;
	background: url(../images/structure/bg-social-media.png) 0 0 no-repeat;
	z-index: 201;
}

#socialLinksContainer a.mediaLink{
	display: block;
	float: left;
	width: 180px;
	height: 28px;
	padding: 7px 6px 7px 6px;
}

#socialLinksContainer .quickDropDown{
	float: left;
	display: none;
	position: absolute;
	bottom: 40px;
	right: 0;
	background: url(../images/structure/bg-socialmedia-dd-bottom.png) left bottom no-repeat;
	padding: 0 0 10px 0;
	width: 980px;
	overflow: hidden;
	font-size: 14px;
	line-height: 20px;
	z-index: 199;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-topright: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

#socialLinksContainer .quickDropDown .quickDropDownInner{
	background: #FFF;
	float: left;
	width: 950px;
	border: 1px solid #b5ced1;
	border-bottom: none;
	padding: 25px 28px 25px 0;
}

#socialLinksContainer .quickDropDown .zones{
	width: 288px;
	float: left;
	overflow: hidden;
	margin: 0 0 0 29px;
}

#socialLinksContainer .quickDropDown .zone01 { margin: 0 0 0 28px; }

#socialLinksContainer .quickDropDown .zones h2{
	margin: 0 0 7px 0 !important;
	padding: 0 0 0 0;
	width: 288px;
	font-size: 18px !important;
	line-height: 32px !important;
	font-weight: normal !important;
	color: #FFF !important;
	overflow: hidden;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

#socialLinksContainer .quickDropDown .zones h2 a{
	color: #FFF !important;
	display: block;
	padding: 0 0 0 50px;
	width: 238px;
	height: 32px;
}

#socialLinksContainer .quickDropDown .zones h2 #facebookLink{ background: url(../images/structure/icon_facebook.png) #4b6dac 20px 0 no-repeat; }
#socialLinksContainer .quickDropDown .zones h2 #twitterLink{ background: url(../images/structure/icon_twitter.png) #55acee 15px 0 no-repeat; }
#socialLinksContainer .quickDropDown .zones h2 #youtubeLink{ background: url(../images/structure/icon_youtube.png) #cd201f 17px 0 no-repeat; }

#facebookContainer{
	border: 1px solid #b8b8b8;
	border-top: 1px solid #3e71a9;
	width: 286px;
	height: 230px;
	overflow: hidden;
}

#twitterUpdates li{
	float: left;
	width: 288px;
	overflow: hidden;
	border-top: 1px solid #b8b8b8;
	padding: 20px 0;
}
#twitterUpdates li:first-child{ border: none; padding-top: 10px; }

#youtubeContainer{
	float: left;
	width: 296px;
	overflow: hidden;
}

#youtubeContainer p{ margin: 0 !important; clear: both; }

#youtubeContainer #youtubevideos{
	float: left;
}
#youtubeContainer #youtubevideos p{ margin: 0 !important; }

#youtubeContainer #youtubevideos a, #youtubeContainer #youtubevideos img{
	float: left;
	display: block;
	width: 67px;
	height: 50px;
}

#youtubeContainer #youtubevideos a{
	margin: 0 7px 13px 0;
}

#socialButtonsContainer{ float: left; padding: 11px 0 0 0; }
#socialButtonsContainer a, #socialButtonsContainer img{ float: left; width: 90px; height: 65px; display: block; }
#socialButtonsContainer a{ margin: 10px 0 0 9px;}
#socialButtonsContainer a:first-child{ margin: 10px 0 0 0; }


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

#uberFooter{
	float: left;
	width: 100%;
	height: 50px;
	background: #353535;
	color: #FFF;
	position: relative;
}

.homepage #uberFooter{
	float: none;
	width: 980px;
	margin: 0 auto;
	clear: both;
}

#footer {
	margin: 0 auto;
	padding: 0;
	width: 980px;
	height: 50px;
	font-size: 13px;
	line-height: 50px;
	overflow: hidden;
	white-space: nowrap;
}

.homepage #footer{
	width: 980px;
	padding: 0 230px;
	margin-left: -230px;
	background: #353535;
}

#footerTextWrapper{
	display: inline;
	white-space: nowrap;
	float: left;
	max-width: 835px;
	overflow: hidden;
}

#footerTextContainer{
	display: inline;
	white-space: nowrap;
	float: left;
	width: 980px;
}

#footerText, #footerNav {
	float: left;
	display: inline;
	white-space: nowrap;
}
#footerText p
{
    margin:0;    
}

#esol {
	float: right;
	margin: 0px 0px 0px 0px;
	max-width: 145px
}




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


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

#uberHomepageBannerContainer{
	float: left;
	width: 1440px;
	height: 505px;
	margin-left: -230px;
	background: #FFF;
	position: relative;
}

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

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

#homepageJ{
	position: absolute;
	right: 230px;
	top: 52px;
	width: 142px;
	height: 295px;
	background: url(../images/structure/bg-homepage-j.png) 0 0 no-repeat;
	z-index: 51;
}

#bannerBar{
	background: url(../images/structure/bg-banner-bar.png) 0 0 repeat;
	width: 980px;
	height: 41px;
	padding: 17px 230px 17px 230px;
	position: absolute;
	left: 0;
	top: 430px;
	z-index: 51;
}


/* ===== Top Content ===== */

#contentTopContainer {
	position: relative;
	z-index: 400;
	width: 390px;
	height: 232px;
	padding: 18px 98px 0 27px;
	margin: 0 42px 0 4px;
	background: url(../images/structure/bg-content-top.png) 0 0 repeat;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #FFF;
}

#contentTop{ width: 390px;}

#contentTopText{
	width: 390px;
	overflow: hidden;
	height: 76px;
	padding-bottom: 20px;
}

#contentTop h2{
	font-size: 40px !important;
	line-height: 48px !important;
	font-weight: normal !important;
	margin: 0 !important;
}

#contentTop p{
	font-size: 24px !important;
	line-height: 28px !important;
	margin: 0 !important;
}


/* ===== Feature ===== */

#feature{
	position: relative;
	z-index: 201;
	width: 391px;
	height: 42px;
	margin: 0 11px;
	float: left;
}
#feature p { margin: 0; }
a.FeatureLink, a.FeatureLink:link, a.FeatureLink:visited{
	display: block;
	width: 311px;
	height: 42px;
	padding: 0 60px 0 20px;
	font-size: 17px;
	line-height: 42px;
	color: #000 !important;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
	background: url(../images/structure/bg-feature.png) 0 0 no-repeat;
	position: relative;
	text-decoration: none;
	z-index: 200;
}

a.FeatureLink:hover, a.FeatureLink:active, a.FeatureLink:focus{ text-decoration: underline; }

.open a.FeatureLink, .open a.FeatureLink:link, .open a.FeatureLink:visited{
	color: #000 !important;
	-webkit-border-radius: 0px 0px 3px 3px;
	-moz-border-radius: 0px 0px 3px 3px;
	border-radius: 0px 0px 3px 3px;
	background-position: 0 -42px;	
}

.cover{
	display: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: url(../images/structure/bg-overlay.png) 0 0 repeat;
}

.overlay .cover{ display: block; }

#feature .FeatureImage{
	position: absolute;
	right: 11px;
	top: 4px;
	width: 48px;
	overflow: hidden;
}

#feature .FeatureImage img {
	width: 100%;
	height: auto;
}

#feature.open .FeatureImage {
    height: 58px;
    top: -17px;
}

#feature.open .FeatureImage img {
    left: 0;
    position: absolute;
    top: -55px;
}

#feature .FeatureText {
	display: block;
	width: 310px;
	height: 42px;
	overflow: hidden;
}

#feature .quickDropDown{
	display: none;
	position: absolute;
	z-index: 199;
	bottom: 42px;
	left: 0;
	width: 389px;
	max-height: 400px;
	padding: 32px 0 0 0;
	overflow: hidden;
	background-color: #FFF;
	border: 1px solid #7F9AA2;
	border-bottom: none;
	-webkit-border-radius: 3px 3px 0px 0px;
	-moz-border-radius: 3px 3px 0px 0px;
	border-radius: 3px 3px 0px 0px;
	box-shadow: 0px 0px 49px #000;
	-moz-box-shadow: 0px 0px 49px #000;
	-webkit-box-shadow: 0px 0px 49px #000;
}

#feature.open .quickDropDown{ display: block;}

#feature .quickDropDown p{
	font-size: 17px !important;
	line-height: 23px !important;
	color: #000 !important;
	padding: 0 40px;
	margin: 0 !important;
}

#feature .quickDropDown p.Image{ padding: 0;}
#feature .quickDropDown p.Image img{ float: left; }

#closeFeature, .quickDropDownContent{
	float: left;
}

#feature .quickDropDown #closeFeature a, #feature .quickDropDown #closeFeature a:link, #feature .quickDropDown #closeFeature a:visited{
	position: absolute;
	top: 0;
	right: 0;
	background: url(../images/structure/close-feature.png) 0 0 no-repeat;
	width: 30px;
	height: 32px;
	text-indent: -9999em;
	font-size: 1%;
	overflow: hidden;
}

#feature .quickDropDown #closeFeature a:hover, #feature .quickDropDown #closeFeature a:active, #feature .quickDropDown #closeFeature a:focus{ background-position: 0 -32px; }


/* ===== Redevelopment Button ===== */

.redevelopment.interior #feature { border-color: #95b3bd;}
.redevelopment.interior a.FeatureLink, .redevelopment.interior a.FeatureLink:link, .redevelopment.interior a.FeatureLink:visited {
	background: url(../images/structure/landing/bg-feature-on.gif) #FFF 0 0 repeat-x;
}


/*Interior Feature*/

.interior #feature{
	float: left;
	width: 414px;
	height: 40px;
	border: 1px solid #dfdfdf;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 0;
}

.interior a.FeatureLink, .interior a.FeatureLink:link, .interior a.FeatureLink:visited{
	width: 314px;
	height: 40px;
	background: #FFF;
	padding: 0 83px 0 17px;
	color: #000 !important;
	line-height: 40px;
}

/* .interior #feature .FeatureImage {
    height: 55px;
    left: auto;
	right: 17px;
    overflow: hidden;
    position: absolute;
    top: -15px;
    width: 51px;
} */

.interior #feature p { margin: 0 !important;}

/* ===== Bottom Content ===== */

#contentBottom {
	float: left;
	clear: both;
	width: 980px;
	padding: 20px 0 20px 0;
	position: relative;
	z-index: 200;
}

.bucket{
	margin: 0 !important;
	padding: 0 !important;
	list-style-type: none;
}

.bucket li{
	margin: 0 0 0px 4px !important;
	float: left;
	display: table;
	table-layout: fixed;
	width: 160px;
	height: 108px;
	background: #b1e4f0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;	
	overflow: hidden;
	position: relative;
	font-size: 16px !important;
	line-height: 18px !important;
	color: #000 !important;
}

.bucket li:first-child{ margin: 0 !important; }

.bucket a, .bucket a:link, .bucket a:visited{ 
	color: #000 !important;
	width: 160px;
	overflow: hidden;
	height: 108px;
	padding: 0px 0px 0px 0px;
}

.bucketImage{
	display: block;
	width: 160px;
	height: 58px;
}

.bucketText{
	width: 160px;
	height: 50px;
	font-size: 14px;
	line-height: 50px;
	white-space: nowrap;
	text-align: center;
	display: block;
	overflow: hidden;
	background: url(../images/structure/bg-bucket-text.png) 0 0 repeat;
}




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


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

#actionsContainer {
	position: relative;
	float: right;
	width: 174px;
	z-index: 999;
}

#actions {
	position: relative;
	float: right;
	padding: 3px 0px;
	width: 174px;
	text-align: right;
	z-index: 998;
}	

#actions form { display: inline; }

#breadcrumbs {
	clear: both;
	float: left;
	width: 647px;
	padding: 5px 0;
	color: #137F9B;
	overflow: hidden;
	width: 647px;
	font-size: 14px;
	line-height: 18px;
}


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

#subNavContainer {
	width: 266px;	
	float: left;
	font-size: 16px;
	line-height: 19px;
	margin: 0 0 30px 0;
}

.mainInterior {
	background: #FFF url(../images/structure/template_content_background.gif) repeat-y 0 0;
	border-top: 1px solid #dfdfdf;
	border-bottom: 1px solid #dfdfdf;	
}

#contentInt {
	float: left;
	padding: 35px 33px 35px 32px;
	margin: 0 1px;
	width: 647px;
	overflow: hidden;		
}


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

.wide #contentInt {
	width: 910px;
	margin: 0 1px;
	padding-left: 33px;
	background-color: #FFF; /* This hides mainInterior's bg image */		
}
.wide #subNavContainer {
	display: none;
}
.wide #breadcrumbs { width: 910px; }


/* Interior quicklinks */
#intFloatRight {
	float: right;
	width: 210px;
	overflow:hidden;
	padding: 0 0 2px 0;
	margin: 7px 0 30px 30px;
	background: #e6e6e7;
	font-size: 16px;
	line-height: 22px;
}
#intFloatRight.hide {
	display: none;
}
#intQuicklinks {
	width: 210px;
}
#intQuicklinks p, #intQuicklinks ul, #intQuicklinks li {
	margin: 0 !important;
}
#intQuicklinks .intQuicklinksHeader {
	background: url(../images/structure/intQuicklinksHeader.png) 176px 19px no-repeat;
	padding: 9px 52px 11px 20px;
}
#intQuicklinks .intQuicklinksHeader p {
	font-size: 21px;
	line-height: 26px;
}
#intQuicklinks .intQuicklinksBody li {
	list-style-type: none;
	border-top: 1px solid #cfcfcf;
}
#intQuicklinks .intQuicklinksBody li a {
	padding: 4px 15px 6px 20px;
	color: #000;
	display: block;
	overflow: hidden;
}

/* Interior Quick Links image is now an editable token */
#bannerInt{
	margin: 22px 0;
	border: 1px solid #c2c2c2;
	width:645px; 
	height:246px;
}

#bannerInt p{ margin: 0 !important; }

.wide #bannerInt{ width: 910px; }

/* Auto resize the image */
#bannerInt img{
	width:645px; 
	height:246px;
}

.wide #bannerInt img{ width: 910px; }


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


/* For the Interior wide banner at the top - remove if not applicable */
#bannerInt.hide
{
    display:none;
}
#bannerInt p, #intQuicklinks .intQuicklinksPhoto p
{
    margin: 0 !important;    
}

/*  Photo Gallery */
.eSolutionsGroupPhotoGalleryV2PlaceholderDiv
{
    float:left;   
    width: 100%
}

/*  Media Queries */

/* Landscape Tablets and Narrow desktop viewports */

@media only screen
and (max-device-width : 1024px)
and (max-width : 1024px) {

    /* ADD CODE TO REPOSITION SOCIAL MEDIA LINKS IF NECESSARY */

    #actions .textSize {
        display: none;
    }

}