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

#uberOuter {
	background: url(../images/structure/background_shadow.jpg) repeat-y top center;
}

#uberInner {
	/*background: url(../images/structure/landscape_bg.jpg) top center no-repeat;*/
	background: url(../en/rotatingimages/homepagebackground/landscape_bg.jpg) top center no-repeat;
}


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


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

#header {
	float: left;
	margin: 0;
	width: 960px;
	z-index: 1201;
}


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

#search {
	position: absolute;
	display: block;
	top: 73px;
	right: -7px;
	margin: 0;
	padding: 0;
	width: 264px;
	height: 46px;
	background: url(../images/structure/searchBox.png) no-repeat 0 0;
	z-index:1202;
}


#search .searchText {
	position: absolute;
	padding: 0;
	top: 13px;
	left: 20px;
	border: none;
	width: 176px;
	background: transparent;
	font-size: 15px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	font-weight: bold;
}

#search .gobutton {
	position: absolute;
	top: 5px;
	right: 10px;
	width: 35px;
	height: 32px;
}
#search .scopeButton {
	position: absolute;
	top: 15px;
	right: 53px;
	width: 12px;
	height: 12px;
}

#search .searchTypeButtons{
	position: absolute;
	z-index: 1300;
	padding: 0;
	top: 38px;
	left: 6px;
	border: none;
	width: 213px;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	color: #666;
	height: 114px;
	background-color: White;
	border-bottom: solid black 1px;
}
#search .searchTypeButtonItem
{
	padding-left:15px; 
	padding-top:3px; 
	padding-bottom:3px; 
	border: solid #D2D2D2 1px; 
	border-top: none;
}

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

#topNav {
	float: right;
	margin: 0px 0px 0px 0px;
	padding: 38px 0px 5px 20px;
	width: 700px;
	text-align: right;
}



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

#logo {
	float: left;
	margin: 33px 0px 2px 3px;
	padding: 0px 0px 0px 0px;
	width: 207px;
	height: 97px;
	overflow: hidden;
}


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

#mainNav {
	position: relative;
	float: left;
	margin: 18px 0 0 11px;
	width: 481px;
	z-index: 1000;
}


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

#main {
	position: relative;
	float: left;
	width: 960px;
	background: #fff;
	z-index:1;
}


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


#footerWrapper{
	margin: 0 auto 0 auto;
	background: #fff url(../images/structure/footer_bg.jpg) no-repeat top center;
	position: relative;
}

#footer {
	margin: 0 auto;
	padding: 48px 0 20px 0;
	width: 960px;
}

#footerLogo{
	float: left;
	margin-right: 22px;
}

#footerText {
	float: left;
	max-width: 268px;
	min-width: 100px;
	line-height: 19px;
	overflow: hidden;
	color: #666;
	font-size: 14px;
}

#footerNav {
	float: left;
	margin: 0;
	padding: 0 0 0 44px;
	width: 200px;
	text-align: left;
	overflow: hidden;
	font-size: 14px;
	line-height: 19px;
}

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

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

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

/* Social Links */

#footer #socialLinks {
	float: right;
	text-align: right;
	color: #666;
	font-size: 14px;
	font-weight: bold;
}

#footer #socialLinks ul{
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}
	#footer #socialLinks li{
		margin:10px 6px;
		padding:0px;
		float:left;
	}
	
	#footer #socialLinks li.last{
		margin-right: 0;
	}





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


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

#homepageBannerContainer {
	width: 960px;
	height: 434px;
	overflow: hidden;
	position: relative;
	background: #fff;
}

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

.bannerFade{
	position: absolute;
	height: 8px;
	width: 960px;
	background: url(../images/structure/banner_fade_top.png);
	top: 0;
	z-index: 100;
}

.bannerFade.bottom{
	top: 426px;
}

.bannerFade.left{
	height: 418px;
	width: 8px;
	top: 8px;
	left: 0;
}

.bannerFade.right{
	height: 418px;
	width: 8px;
	top: 8px;
	left: 952px;
}

#tagline{
	position: absolute;
	left: 23px;
	top: 309px;
	background: url(../en/images/structure/engaging.png) no-repeat;
	width: 397px;
	height: 54px;
	z-index: 150;
	text-indent: -9999px;
	font-size: 1px;
}

#featuredBox{
	position: absolute;
	left: 28px;
	top: 366px;
	background: url(../images/structure/featured_box.png) no-repeat;
	width: 669px;
	height: 53px;
	z-index: 151;
}

#newsItem, #featuredBox div.newsItem {
	width: 512px;
	padding: 14px 18px 14px 18px;
	height: 16px;
	overflow: hidden;
	float: left;
	font-weight: bold;
	font-size: 14px;
}

#newsLink{
	padding: 14px 12px 14px 18px;
	height: 16px;
	overflow: hidden;
	width: 83px;
	float: left;
	font-weight: bold;
	font-size: 14px;
}



/* ===== Left Area ===== */

#leftArea{
	width: 645px;
	float: left;
	padding: 13px 36px 0 28px;
	background: #fff;
}


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

#contentLeft {
	float: left;
	padding: 0 27px 0 0;
	width: 332px;
	overflow: hidden;
	font-size: 14px;
	line-height: 20px;
}

#contentLeft .newslistHeader p,
#contentMiddle .newslistHeader p{
	color: #666;
	font-size: 18px;
	font-family: Futura, Arial, Helvetica, sans-serif;
}

.newslistFooter{
	text-align: right;
	border-top: 1px solid #cacaca;
	clear: both;
}

.newslistFooter p{
	margin-bottom: 0;
}

/* ===== Middle Content ===== */

#contentMiddle {
	float: left;
	padding: 0 0 0 0;
	width: 286px;
	overflow: hidden;
	font-size: 14px;
	line-height: 18px;
	color: #666;
}

#contentMiddle #newslist ul{
	margin: 0;
	list-style: none;
}

#contentMiddle #newslist ul li{
	border-top: 1px dotted #cacaca;
	margin: 0;
	padding: 12px 0;
}

#contentMiddle #newslist ul li.first{
	border-top: none;
	padding: 0 0 14px 0;
}


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

#contentRight {
	float: right;
	width: 221px;
	padding: 22px 30px 0px 0px;
}




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


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

#actionsContainerOuter{
	position: relative;
	float: left;
	z-index: 1;
}

#actionsContainer {
	position: relative;
	float: left;
	width: 942px;
	background: #fff url(../images/structure/actions_bg.jpg) repeat-x;
	border: 1px solid #dcdcdc;
	z-index: 20;
}

#breadcrumbs {
	float: left;
	padding: 12px 0 12px 18px;
	width: 500px;
	color: #333;
	overflow: hidden;
	font-size: 13px;
}

#actions {
	position: relative;
	float: right;
	padding: 10px 19px 12px 5px;
	width: 400px;
	text-align: right;
	color: #dddddd;
	font-size: 11px;
}

#actionsShadow{
	background: url(../images/structure/actions_shadow.png) repeat-x;
	height: 10px;
	width: 944px;
	z-index: 10;
	position: absolute;
	bottom: -10px;
	left: 0;
}

#actions form { display: inline; }


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

#subNavContainer {
	width: 221px;	
	float: left;
	position: relative;
}

.mainInterior {
	background: #FFF url(../images/structure/template_content_background.jpg) repeat-y 0 0;
	padding: 8px 8px 0 8px;
	width: 944px !important;
}

#contentInt {
	float: left;
	padding: 15px 0 0 28px;
	width: 682px;
	overflow: hidden;		
}


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

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




/* Homepage quicklinks */

#quicklink01{
	position: absolute;
	width: 233px;
	height: 55px;
	top: 365px;
	right: 20px;
	background: url(../en/images/structure/quicklinks.png);
	z-index: 200;
}

#quicklink01 a{
	color: #fff;
	font-size: 17px;
	font-family: Futura, Arial, Helvetica, sans-serif;
	font-weight: normal;
	padding: 16px 0 0 18px;
	display: block;
	height: 26px;
	cursor: pointer;
}

#quicklink01 a:hover{
	text-decoration: none;
}

.quickDropDown{
	width: 225px;
	background: url(../images/structure/quickdropdown_bg.jpg) repeat-y;
	border-bottom: 1px solid #fff;
	font-family: Arial, Helvetica, sans-serif;
	padding-bottom: 15px;
	padding-top: 10px;
}

#quicklink01 .quickDropDown a{
	font-size: 13px;
	display: inline;
	font-family: Arial, Helvetica, sans-serif;
}
.iwouldlike-slider-content{
	margin: 0;
	overflow: hidden;
	width: 225px;
}

.myZone ul{
	margin: 0;
	list-style: disc;
	color: #fff;
	margin-left: 32px;
}

.myZone ul li{
	padding: 0 10px 2px 0;
}

#quicklink01 .myZone ul li a{
	padding: 0;
}

#quicklink01 .myZone ul li a:hover{
	text-decoration: underline;
}

.myZone.first{
	padding-left: 0;
}

.myZone.last{
	padding-right: 0;
}

.myZone{
	float: left;
	overflow: hidden;
	padding: 0 13px;
}

.myZone ul{
	list-style: disc;
}


#quickLinks {
	width: 221px;
	font-family: Futura, Arial, Helvetica, sans-serif;
	font-size: 17px;
	cursor: pointer;
	padding-bottom: 10px;
}

.mainQuickLink{
	text-indent: -9999px;
	font-size: 1px;
}

#quickLinks a{
	font-weight: normal;
	color: #fff;
	width: 166px;
	height: 32px;
	padding: 16px 45px 0 10px;
	display: block;
	cursor: pointer;
	background-image: url(../images/structure/quicklinks.jpg);
	background-repeat: no-repeat;
	overflow: hidden;
}

#quickLinks li.quicklinks01 a{
	background-position: 0 0;
}

#quickLinks li.quicklinks02 a{
	background-position: 0 -48px;
}

#quickLinks li.quicklinks03 a{
	background-position: 0 -96px;
}

#quickLinks li.quicklinks04 a{
	background-position: 0 -144px;
}

#quickLinks li.quicklinks05 a{
	background-position: 0 -193px;
}

#quickLinks li.quicklinks01 a:hover{
	background-position: -221px 0;
}

#quickLinks li.quicklinks02 a:hover{
	background-position: -221px -48px;
}

#quickLinks li.quicklinks03 a:hover{
	background-position: -221px -96px;
}

#quickLinks li.quicklinks04 a:hover{
	background-position: -221px -144px;
}

#quickLinks li.quicklinks05 a:hover{
	background-position: -221px -193px;
}

#quickLinks li a:hover{
	text-decoration: none;
}
#quickLinks .quickLinksHeader {
	padding: 20px 15px 0 15px;
/*	background: url(../images/structure/quicklinks-top.gif) no-repeat top; */
}
#quickLinks .quickLinksBody {
	/*padding: 0px 15px 0px 15px;*/
}
	#quickLinks .quickLinksBody ul{
		list-style-type: none;
		padding: 0px;
		margin: 0px;
	}
	#quickLinks .quickLinksBody li, #quickLinks .quickLinksBody ul p{
		padding: 0px;
		margin: 0px;
		width: 221px;
	}
#quickLinks .quickLinksFooter {
	padding: 15px;
/*	background: url(../images/structure/quicklinks-bottom.gif) no-repeat bottom; */
}

/* Interior quicklinks */
#intFloatRight {
	float: right;
	width: 224px;
	overflow:hidden;
	padding-left: 28px;
	background: #fff;
}
#intFloatRight.hide {
	display: none;
}
#intQuicklinks {
	/*padding: 0 10px;*/
}
#intQuicklinks p, #intQuicklinks ul, #intQuicklinks li {
	margin: 0 !important;
}
#intQuicklinks .intQuicklinksHeader {	
}
#intQuicklinks .intQuicklinksHeader p {
	color: #333;
	font-size: 18px;
	padding: 15px 0;
}
#intQuicklinks .intQuicklinksBody li {
	background-repeat: no-repeat;
	background-image: url(../images/structure/intQuicklinksItem.jpg);
	background-position: top left;
	list-style-type: none;
	height: 23px;
	margin-bottom: 4px !important;
	overflow: hidden;
	padding-right: 25px;
	}
#intQuicklinks .intQuicklinksBody li a {
	background-repeat: no-repeat;
	background-position: left top;
	padding: 4px 5px 0 11px;
	text-decoration: none;
	display: block;
	font-weight: normal;
	overflow: hidden;
	color: #105e7f;
}

/* Interior Quicklinks image is now an editable token */
#intQuicklinks .intQuicklinksPhoto{
	border: 1px solid #ccc;
	padding: 1px;
	width:220px;
	height:288px;
}

#intQuicklinks .intQuicklinksPhoto p
{
	padding: 0px;
}

/* Auto resize the image */
#intQuicklinks .intQuicklinksPhoto img{
	width:220px; 
	height:288px;
}

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


/* For iCreate side only */
#toggleContent { height:25px;}

/* 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
{
	text-decoration: underline;	
}