/*!:: Bell Canada UIKit v1.6181

bell.connector.css
Build Date: 11:26 AM Friday, January 09, 2015

Development Team: Son Pham, Michel Pen
Founder Team: Son Pham, Michel Pen
Contributors: Bruno-Pierre Campeau-Riberdy, Simon Buteau, Fernando Saldarriaga
----------------------------------------------------------------------------
This file contains custom css styles "specific" only to:
A) Global Connector bar
B) 3rd-4th level navigation from Connector
C) New connector super footer
D) Any other transitioned styles between the new bell.ca(2013) and the old bell.ca(2009-2012)
----------------------------------------------------------------------------
	Table of contents
	=1.0 General	 		: basic body, headings, fonts, links styles
	=2.0 Shared		 		: shared styles (colors, properties, etc.)
	=3.0 Grid		 		: custom 12 columns grid styles
	=4.0 Connector		 	: specific styles for the global connector bar only
	=5.0 Navigation		 	: 3rd-4th level navigation style
	=6.0 UI			 		: Main components styles (includes CSS3 styles)
	=7.0 jQueryUI		 	: jquery ui related styles
	=8.0 Media Queries		: Media queries styles
	=Transitioned			: styles used in both legacy and GC (shared fixes, IE fixes, etc.)
::*/


/*:: =========================================================================== */
/*:: ==1.0 ==General ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
/* Fonts */
/* Bell Slim Medium */
@font-face {
    font-family: 'BellSlimMediumRegular';
    src: url('../../resources/css/font/bellslim_medium-webfont.eot');
    src: url('../../resources/css/font/bellslim_medium-webfont.eot?#iefix') format('embedded-opentype'),
	url('../../resources/css/font/bellslim_medium-webfont.woff') format('woff'),
	url('../../resources/css/font/bellslim_medium-webfont.ttf') format('truetype'),
	url('../../resources/css/font/bellslim_medium-webfont.svg#BellSlimMediumRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Bell Slim Semi Bold */
@font-face {
    font-family: 'BellSlimSemiBoldRegular';
    src: url('../../resources/css/font/bellslim_semibold-webfont.eot');
    src: url('../../resources/css/font/bellslim_semibold-webfont.eot?#iefix') format('embedded-opentype'),
	url('../../resources/css/font/bellslim_semibold-webfont.woff') format('woff'),
	url('../../resources/css/font/bellslim_semibold-webfont.ttf') format('truetype'),
	url('../../resources/css/font/bellslim_semibold-webfont.svg#BellSlimSemiBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Headings */
h1.h1Connector, .fontFaceConnector {font-family: "BellSlimMediumRegular", Helvetica, Arial, sans-serif;}

.fontFaceConnectorThemeA,
h3.h3Connector.fontFaceConnector, .headingConnectorType3.fontFaceConnector,
h4.h4Connector.fontFaceConnector, .headingConnectorType4.fontFaceConnector,
h5.h5Connector.fontFaceConnector, .headingConnectorType5.fontFaceConnector,
h6.h6Connector.fontFaceConnector, .headingConnectorType6.fontFaceConnector {font-family: "BellSlimSemiBoldRegular", Helvetica, Arial, sans-serif;}

h1.h1Connector, h2.h2Connector, h3.h3Connector, h4.h4Connector, h5.h5Connector, h6.h6Connector, 
.headingConnectorType1, .headingConnectorType2, .headingConnectorType3, .headingConnectorType4, .headingConnectorType5, .headingConnectorType6 {
	position: relative;
	vertical-align: middle;
}

h1.h1Connector, .headingConnectorType1 {
	font-size: 2.833em; /*34px*/
	line-height: 1.1em;
	margin-bottom: 0.4em;
}
h1.h1Connector, .fontFaceConnector {letter-spacing: -1px;}


h2.h2Connector, .headingConnectorType2 {
	font-size: 2.5em; /*30px*/
	line-height: 1.1em;
	margin-bottom: 0.333em;
}

h3.h3Connector, .headingConnectorType3 {
	font-size: 2em; /*24px*/
	line-height: 1.1em;
	margin-bottom: 0.416em; /* was 0.277em */
}

h4.h4Connector, .headingConnectorType4 {
	font-size: 1.5em; /*18px*/
	line-height: 1.2em;
	margin-bottom: 0.285em;
}

h5.h5Connector, .headingConnectorType5 {
	font-size: 1.166em; /*14px*/
	line-height: 1.3em;
	margin-bottom: 0.333em;
}

h6.h6Connector, .headingConnectorType6 {
	font-size: 1em; /*12px*/
	line-height: 1.3em;
	margin-bottom: 0.333em;
}


/*:: =========================================================================== */
/*:: ==2.0 ==Shared :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
/*:: ==Colors :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* Error state */
.formErrorConnector,
.formConnector .formHeaderConnector,
.formConnector .formContentConnector .messageConnector {
	color: #a00;
}
.disabled,
li.disabled a,
.stepList .disabled a, 
.stepList .disabled .number {
	color: #999 !important;
}
	.formRadioConnector .disabled .inputImageConnector, 
	.formRadio .disabled  .inputCustomTrigger {background-position: -32px -33px;}

.headerConnector h1 {color: #555;}

/*:: ==Extras :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/* 	Defaults are set here, please see component individually for their own extras styles
	extra1 = top left corner
	extra2 = bottom left corner
	extra3 = top right corner
	extra4 = bottom right corner
	extraX = other visual elements (shadows, gradients, etc.)
*/
.boxConnectorExtra1, .boxConnectorExtra2, .boxConnectorExtra3, .boxConnectorExtra4,
.messageConnectorExtra1,
.controlExtra1, .controlExtra2,
a.controlThemeA .controlExtra1, a.controlThemeA .controlExtra2,
.itemListExtra1, .itemListExtra2, .itemListExtra3, .itemListExtra4,
.listViewConnectorExtra1, .listViewConnectorExtra2, .listViewConnectorExtra3, .listViewConnectorExtra4,
.toolTipConnectorExtra1, .toolTipConnectorExtra2, .toolTipConnectorExtra3, .toolTipConnectorExtra4, .toolTipConnectorExtra5, .toolTipConnectorExtra6,
.flyOutConnectorExtra1, .flyOutConnectorExtra2, .flyOutConnectorExtra3, .flyOutConnectorExtra4, .flyOutConnectorExtra5, .flyOutConnectorExtra6, 
.iconConnectorListExtra1, .iconConnectorListExtra2, .iconConnectorListExtra3, .iconConnectorListExtra4 {
	position: absolute;
	background: transparent url(../images/bg_cornerSprite.png) no-repeat 0 0;
	/* default size if nothing set */
	height: 5px;
	width: 5px;
}

/* Corners only */
.listViewConnectorExtra1, .listViewConnectorExtra3, 
.boxConnectorExtra1, .boxConnectorExtra3,
.itemListExtra1, .itemListExtra3,
.iconConnectorListExtra1, .iconConnectorListExtra3 {top: -1px;}

.listViewConnectorExtra3, .listViewConnectorExtra4, 
.boxConnectorExtra3, .boxConnectorExtra4,
.itemListExtra3, .itemListExtra4, 
.iconConnectorListExtra3, .iconConnectorListExtra4 {right: -1px;}

.listViewConnectorExtra1, .listViewConnectorExtra2, 
.boxConnectorExtra1, .boxConnectorExtra2,
.itemListExtra1, .itemListExtra2,
.iconConnectorListExtra1, .iconConnectorListExtra2 {left: -1px;}

.listViewConnectorExtra2, .listViewConnectorExtra4, 
.boxConnectorExtra2, .boxConnectorExtra4,
.itemListExtra2, .itemListExtra4, 
.iconConnectorListExtra2, .iconConnectorListExtra4 {bottom: -1px;}

	.boxConnectorExtra1 {background-position: left -93px;}
	.boxConnectorExtra2 {background-position: left -118px;}
	.boxConnectorExtra3 {background-position: right -93px;}
	.boxConnectorExtra4 {background-position: right -118px;}

	/* .listViewConnectorExtra1 {background-position: 0 0;} <- uses default, uncomment and change if needed. */
	.listViewConnectorExtra2, .iconConnectorListExtra2 {background-position: left -25px;}
	.listViewConnectorExtra3, .iconConnectorListExtra3 {background-position: right top;}
	.listViewConnectorExtra4, .iconConnectorListExtra4 {background-position: right -25px;}
		.listViewConnector a:hover .listViewConnectorExtra1, .listViewConnector .active a .listViewConnectorExtra1 {background-position: left -31px;}
		.listViewConnector a:hover .listViewConnectorExtra2, .listViewConnector .active a .listViewConnectorExtra2 {background-position: left -56px;}
		.listViewConnector a:hover .listViewConnectorExtra3, .listViewConnector .active a .listViewConnectorExtra3 {background-position: right -31px;}
		.listViewConnector a:hover .listViewConnectorExtra4, .listViewConnector .active a .listViewConnectorExtra4 {background-position: right -56px;}

	.itemListThemeA .active .itemListExtra1,
	.itemListThemeA .active .itemListExtra2,
	.itemListThemeA .active .itemListExtra3,
	.itemListThemeA .active .itemListExtra4,
	.itemListThemeB .active .itemListExtra1,
	.itemListThemeB .active .itemListExtra2,
	.itemListThemeB .active .itemListExtra3,
	.itemListThemeB .active .itemListExtra4,
	.itemListThemeC .itemListExtra1,
	.itemListThemeC .itemListExtra2,
	.itemListThemeC .itemListExtra3,
	.itemListThemeC .itemListExtra4 {
		display: block;
	}
		/*.itemListThemeB .active .itemListExtra1 {background-position: left -62px;}
		.itemListThemeB .active .itemListExtra2 {background-position: left -87px;}
		.itemListThemeB .active .itemListExtra3 {background-position: right -62px;}
		.itemListThemeB .active .itemListExtra4 {background-position: right -87px;}	*/
		
		.itemListThemeC .itemListExtra1 {background-position: left -124px;}
		.itemListThemeC .itemListExtra2 {background-position: left -149px;}
		.itemListThemeC .itemListExtra3 {background-position: right -124px;}
		.itemListThemeC .itemListExtra4 {background-position: right -149px;}		
		
/* Corners + Shadows support */
/* top corners (includes left/right) */
.flyOutConnectorExtra1, .flyOutConnectorExtra2,
.toolTipConnectorExtra1, .toolTipConnectorExtra2 {width: 100%;}

/* bottom corners (includes left/right) - no shared properties for the moment */
			
/* Shadows (vertical) */
.controlExtra1, .controlExtra2 {
	background-image: url(../images/bg_shadowsSprite.png);
	background-repeat: repeat-y;
	height: 100%;
	width: 35px;
	top: 0;
}
	.controlExtra1 {left: 0;}
	.controlExtra2 {right: 0;}
	
/* =Border-radius 4px */
.borderradius .boxConnectorContent .box,
.cssgradients .buttonConnector,
.borderradius .listViewConnector a,
.formTextConnectorThemeA input {
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

/* Elements hiding  */
.borderradius .footer .boxConnectorExtra1, .borderradius .footer .boxConnectorExtra2, .borderradius .footer .boxConnectorExtra3, .borderradius .footer .boxConnectorExtra4,
.stepList .last .divider,
.itemListExtra1, .itemListExtra2, .itemListExtra3, .itemListExtra4,
.borderradius .listViewConnectorExtra1, .borderradius .listViewConnectorExtra2, .borderradius .listViewConnectorExtra3, .borderradius .listViewConnectorExtra4,
.borderradius .flyOutConnectorExtra1, .borderradius .flyOutConnectorExtra2, .borderradius .flyOutConnectorExtra3, .borderradius .flyOutConnectorExtra4, .borderradius .flyOutConnectorExtra5, .borderradius .flyOutConnectorExtra6,
.borderradius .toolTipConnectorExtra1, .borderradius .toolTipConnectorExtra2, .borderradius .toolTipConnectorExtra3, .borderradius .toolTipConnectorExtra4, .borderradius .toolTipConnectorExtra5, .borderradius .toolTipConnectorExtra6,
.cssgradients .buttonConnectorExtra1 {
	display: none;
}	
	
/* Hides list bullets */
#flyOutConnectorLoggedIn ul li, /* <- #!This is hardcoded so that no markup needs to be changed */
.listViewConnector li/*,
.textList .first*/ {
	background-image: none;
	padding-left: 0;
}

/* =Sprites */
/* iconSprite */	
.inputImageConnector, .inputGroupConnectorThemeA .inputImageConnector {display: inline-block;}

.inputImage,
.inputImageConnector,
.badgeConnector, .iconConnector,
.messageExtra1,
.messageConnectorExtra1,
.messageTitleExtra1 {
	background-color: transparent;
	background-image:url("../images/bg_iconSprite.png");
}
.provinceSelectorContext a.control:hover {
	background-image:url("../images/bg_iconSprite.png") !important;
}

/* Overall centered elements (based on total width of page) */
.federalBarWrap,
.connectorWrap, .footerWrap,
.compareTool, .notificationWrap {
	width: 977px; /* 975px + 2px for the borders */	
	margin: 0 auto;
}


/*:: =========================================================================== */
/*:: ==3.0 ==Grid system  :::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
/* =gridGroup : groups 2 or more grid, orphan/single grid does not require a gridGroup */
.gridGroup {
	position: relative;
	width: 948px; /* 935 + gutter (13) - margin-left (-gutter(13)) */
	clear: both;
	margin-left: -13px;
}
	ul.gridGroup > li {position: relative; margin-bottom: 0;}
	
	/* recalculates the grids width to make them fit without the side paddings (20+20) */
	.gridGroupThemeA {width: 990px;}

.grid1,.grid2,.grid3,.grid4,.grid5,
.grid6,.grid7,.grid8,.grid9,.grid10,
.grid11,.grid12 {
	position: relative;
	display: inline-block;
}
.grid1 {width: 66px;} 	.push1 {left: 66px;}		.pull1 {left: -66px;}
.grid2 {width: 145px;}	.push2 {left: 245px;}	.pull2 {left: -245px;}
.grid3 {width: 224px;}	.push3 {left: 224px;}	.pull3 {left: -224px;}
.grid4 {width: 303px;}	.push4 {left: 303px;}	.pull4 {left: -303px;}
.grid5 {width: 382px;}	.push5 {left: 382px;}	.pull5 {left: -382px;}
.grid6 {width: 461px;}	.push6 {left: 461px;}	.pull6 {left: -461px;}
.grid7 {width: 540px;}	.push7 {left: 540px;}	.pull7 {left: -540px;}
.grid8 {width: 619px;}	.push8 {left: 619px;}	.pull8 {left: -619px;}
.grid9 {width: 698px;}	.push9 {left: 698px;}	.pull9 {left: -698px;}
.grid10 {width: 777px;}	.push10 {left: 777px;}	.pull10 {left: -777px;}
.grid11 {width: 856px;}	.push11 {left: 856px;}	.pull11 {left: -856px;}
/* grid12 exists for safety purposes only; shouldn't be used */
.grid12 {width: 935px;}	.push12 {left: 935px;}	.pull12 {left: -935px;}

.gridGroupThemeA .grid1 {width:72px;}	.gridGroupThemeA .push1 {left: 72px;}
.gridGroupThemeA .grid2 {width:154px;}   .gridGroupThemeA .push2 {left: 154px;}
.gridGroupThemeA .grid3 {width:236px;}   .gridGroupThemeA .push3 {left: 236px;}
.gridGroupThemeA .grid4 {width:318px;}   .gridGroupThemeA .push4 {left: 318px;}
.gridGroupThemeA .grid5 {width:400px;}   .gridGroupThemeA .push5 {left: 400px;}
.gridGroupThemeA .grid6 {width:481px;}   .gridGroupThemeA .push6 {left: 481px;}
.gridGroupThemeA .grid7 {width:564px;}   .gridGroupThemeA .push7 {left: 564px;}
.gridGroupThemeA .grid8 {width:646px;}   .gridGroupThemeA .push8 {left: 646px;}
.gridGroupThemeA .grid9 {width:728px;}   .gridGroupThemeA .push9 {left: 728px;}
.gridGroupThemeA .grid10 {width:810px;}  .gridGroupThemeA .push10 {left: 810px;}
.gridGroupThemeA .grid11 {width:892px;}  .gridGroupThemeA .push11 {left: 892px;}
/* grid12 exists for safety purposes only; shouldn't be used */
.gridGroupThemeA .grid12 {width:974px;}	.gridGroupThemeA .push12 {left: 974px;}

/* gridReset : grid only utility class, resets the margin-left of a column */
.gridReset {margin-left: 0 !important;}

.gridGroup .grid1,
.gridGroup .grid2,
.gridGroup .grid3,
.gridGroup .grid4,
.gridGroup .grid5,
.gridGroup .grid6,
.gridGroup .grid7,
.gridGroup .grid8,
.gridGroup .grid9,
.gridGroup .grid10,
.gridGroup .grid11,
.gridGroup .grid12 {
	float: left;
	display: inline;
	margin-left: 13px;
}

/* #! fixes "to the edge" images from overlapping with the box's borders */
.box .gridGroup .grid1,
.box .gridGroup .grid2,
.box .gridGroup .grid3,
.box .gridGroup .grid4,
.box .gridGroup .grid5,
.box .gridGroup .grid6,
.box .gridGroup .grid7,
.box .gridGroup .grid8,
.box .gridGroup .grid9,
.box .gridGroup .grid10,
.box .gridGroup .grid11,
.box .gridGroup .grid12 {
	margin-right: -2px;
}

/* =federalBar : defines navigation between the different business site */	
.federalBar {
	min-width: 100%; 
	border-bottom: 1px solid #000; 
	background-color: #525252;
	-webkit-box-shadow: inset 0px 3px 2px 1px rgba(0, 0, 0, .1);    
	box-shadow: inset 0px 3px 2px 1px rgba(0, 0, 0, .1);
}
	.federalBarWrap {position: relative;}
		.federalBar .itemList  {
			margin-left: -15px;
		}
			.federalBar .itemList li {
				padding: 0;
			}
				.federalBar .itemList a {
					color: #a9a9a9;
					margin: 0;
					padding: 7px 15px;
					text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
					font-size: 1em;
				}
					.federalBar,
					.federalBar .itemList a:hover {color: #fff; text-decoration: none;}
					.federalBar .itemList .active a {color: #fff; font-weight: bold;}
					
					.federalBar .iconArrow {
						position: absolute; 
						left: 50%; 
						margin-left: -8px; 
						bottom: 0;
						background-position: 0 0;
					}
						.federalBar .icon {display: none;}


/*:: =========================================================================== */
/*:: ==4.0 ==Connector ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
/* =columnGroup : relative/% based columns - some styles cascade from bell.connector.css */
.columnGroup .columnConnector {
	float: left; 
	width: auto;
	margin-bottom: 10px; 
	position: relative;
	
	/* Fixes empty column bug */
	min-height: 1px;
}
	.columnContent {
		/* #! DO NOT declare position relative; If so, divider will be rendered incorrectly */
		padding-right: 15px; 
		margin-right: 15px;
	}
			
	.columnGroupSplit1 .columnConnector {width: 100%;} /* <- safety class, shouldn't be used if there is only 1 column */
	.columnGroupSplit2 .columnConnector {width: 50%;}
	.columnGroupSplit3 .columnConnector {width: 33.3%;}
	.columnGroupSplit4 .columnConnector {width: 25%;}
	.columnGroupSplit5 .columnConnector {width: 20%;}
	
	/* per-context */
	.connector .flyOut .column,
	.borderradius .connector .flyOutWrapThemeB .column,
	.connector .flyOutConnector .columnConnector {margin-bottom: 5px;}
	.connector .flyOutWrapThemeB .column {margin-bottom: 0;}
	
	.connector .flyOutConnector .columnContent, .columnGroup .last .columnContent {
		padding-right: 0;
		margin-right: 0;
	}
	ul.columnGroup {margin-bottom: 20px; overflow: hidden;}
		ul.columnGroup .columnContent {padding-right: 0;}
		
/* =connectorWrap */
.connectorWrap {
	position: relative; 
}
	
/* =connector */
.connector {
	position: relative;
	z-index: 25;
	min-width: 975px; /* <= avoids white scrollbar bug */
	min-height: 3.916em; /* 47px #! need to be specified for IEs */
	background: #fff url(../images/bg_gradient_a.png) repeat-x left bottom;
}
	.connectorThemeA {
		border-color: #000;
		background-color: #0066a4;
		background-image: url(../images/bg_gradient_c.png);
	}
	.connectorThemeB {
		border-top-color: #000;
		border-bottom-color: #4f4f4f;
	}
	
/* CSS3=connector */
.cssgradients .connector {
	min-height: 3.833em; /* 46px #! need to be specified for IEs  */
	border-bottom: 1px solid #cbcbcb;
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(253,253,253,1) 20%, rgba(235,235,235,1) 70%, rgba(229,229,229,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(20%,rgba(253,253,253,1)), color-stop(70%,rgba(235,235,235,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(253,253,253,1) 20%,rgba(235,235,235,1) 70%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(253,253,253,1) 20%,rgba(235,235,235,1) 70%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(253,253,253,1) 20%,rgba(235,235,235,1) 70%,rgba(229,229,229,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(253,253,253,1) 20%,rgba(235,235,235,1) 70%,rgba(229,229,229,1) 100%); /* W3C */
	-webkit-box-shadow: inset 1px 0px 0px 1px #fff;
	box-shadow: inset 1px 0px 0px 1px #fff;
}
	.cssgradients .connectorThemeA {
		border-color: #000;
		background: rgb(0,102,164); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(0,102,164,1) 0%, rgba(0,100,162,1) 20%, rgba(0,79,148,1) 78%, rgba(0,76,146,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,102,164,1)), color-stop(20%,rgba(0,100,162,1)), color-stop(78%,rgba(0,79,148,1)), color-stop(100%,rgba(0,76,146,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(0,102,164,1) 0%,rgba(0,100,162,1) 20%,rgba(0,79,148,1) 78%,rgba(0,76,146,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(0,102,164,1) 0%,rgba(0,100,162,1) 20%,rgba(0,79,148,1) 78%,rgba(0,76,146,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(0,102,164,1) 0%,rgba(0,100,162,1) 20%,rgba(0,79,148,1) 78%,rgba(0,76,146,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(0,102,164,1) 0%,rgba(0,100,162,1) 20%,rgba(0,79,148,1) 78%,rgba(0,76,146,1) 100%); /* W3C */
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.cssgradients .connectorThemeB {
		background: rgb(140,149,158); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(140,149,158,1) 0%, rgba(140,149,158,1) 8%, rgba(135,144,153,1) 27%, rgba(128,137,146,1) 45%, rgba(124,133,140,1) 51%, rgba(114,121,131,1) 80%, rgba(111,120,127,1) 84%, rgba(109,118,127,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(140,149,158,1)), color-stop(8%,rgba(140,149,158,1)), color-stop(27%,rgba(135,144,153,1)), color-stop(45%,rgba(128,137,146,1)), color-stop(51%,rgba(124,133,140,1)), color-stop(80%,rgba(114,121,131,1)), color-stop(84%,rgba(111,120,127,1)), color-stop(100%,rgba(109,118,127,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(140,149,158,1) 0%,rgba(140,149,158,1) 8%,rgba(135,144,153,1) 27%,rgba(128,137,146,1) 45%,rgba(124,133,140,1) 51%,rgba(114,121,131,1) 80%,rgba(111,120,127,1) 84%,rgba(109,118,127,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(140,149,158,1) 0%,rgba(140,149,158,1) 8%,rgba(135,144,153,1) 27%,rgba(128,137,146,1) 45%,rgba(124,133,140,1) 51%,rgba(114,121,131,1) 80%,rgba(111,120,127,1) 84%,rgba(109,118,127,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(140,149,158,1) 0%,rgba(140,149,158,1) 8%,rgba(135,144,153,1) 27%,rgba(128,137,146,1) 45%,rgba(124,133,140,1) 51%,rgba(114,121,131,1) 80%,rgba(111,120,127,1) 84%,rgba(109,118,127,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(140,149,158,1) 0%,rgba(140,149,158,1) 8%,rgba(135,144,153,1) 27%,rgba(128,137,146,1) 45%,rgba(124,133,140,1) 51%,rgba(114,121,131,1) 80%,rgba(111,120,127,1) 84%,rgba(109,118,127,1) 100%); /* W3C */
		-webkit-box-shadow: inset 0px -2.083em 0px 0px rgba(0, 0, 0, 0.1), 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
		box-shadow: inset 0px -2.083em 0px 0px rgba(0, 0, 0, 0.1), 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
	}

/* =brand */
.brand {position: relative; float: left; margin-right: 14px; height: 46px;}
	.brand .logo {
		position: relative;
		top: 10px;
		display: block; 
		height: 2.333em; /* 28px */
		width: 3.916em; /* 47px */
		background: transparent url(../images/logo-bell-blue-47x28.png) no-repeat left top;
		background-size: 100% 100%;
	}
	/* per-context */
	.connectorThemeA .brand .logo, 
	.connectorThemeB .brand .logo {background-image: url(../images/logo-bell-white-47x28.png);}

/* =logoLabel : any additional text directly next to the brand logo */
.logoLabel {
	position: absolute;
	bottom: 0;
	font-size: 14px;
	left: 4.071em; /* 57px/14 */
    color: #a1b7cf;
	text-shadow: 0px 1px 1px #000;
}
	.connector .logoLabel {color: #999; text-shadow: none;}
	
/* =padder */
.padderConnector {
	padding: 20px;	
}
	.padderConnectorThemeA {padding: 40px;}
	.padderConnectorThemeB {padding: 60px;}
	.padderConnectorThemeC {padding: 10px;}
	.padderConnectorThemeD {padding: 30px;}
	.padderConnectorThemeE {padding: 20px 30px;}
	.padderConnectorThemeF {padding: 40px 30px;}
	.padderConnectorThemeG {padding: 15px 20px;}
	.padderConnectorThemeH {padding: 15px;}
	.padderConnectorThemeI {padding: 40px 60px;}

/* =controlGroup */
.controlGroup {position: relative; float: left;}
.controlGroup.loginContext { position: absolute; right: 0; }

/* =controlGroupWrap */
.controlGroupWrap {float:left; position:relative;}
	/* improves "shadow" effect when on a blue background */
	.borderradius .connectorThemeA .loginContext .controlGroupWrap {border-right: 1px solid #000;}

/* =control : custom button for the connector bar (supports flyOuts menu on click/hover; special effects on hover/active states) */	
a.control, a.control:link, a.control:active, a.control:visited {color: #212121;}
a.control {
	/* position: relative; #! seems to cause shadows problem in IE7 - no impact in modern browsers */
	display: block;
	overflow: hidden;
	text-align: center;
	padding: 16px 20px 1.230em; /* 16px #! 13px = 1em */
	vertical-align: middle;
	float: left;
	height: 14px; /* must substract padding top/bottom to gain exact value of height */
	font-size: 1.083em; /* 13px */
	border-right: 1px solid #bfbfbf;
	-webkit-box-shadow:  inset 1px 0px 0px 0px rgba(255, 255, 255, 1), inset -1px 0px 0px 0px rgba(255, 255, 255, 1);        
	box-shadow:  inset 1px 0px 0px 0px rgba(255, 255, 255, 1), inset -1px 0px 0px 0px rgba(255, 255, 255, 1);
}
	a.control:hover, 
	a.control.active,
	a.control.current {
		color: #fff;
		border-color: #09427a;
		background: #0b4880 url(../images/bg_gradient_b.png) repeat-x 0 0;	
		text-decoration: none;
		border-bottom: 1px solid #0e4e89;
		-webkit-box-shadow: none;
        box-shadow: none;
	}
	
	/* Extras */
	.controlExtra2 {background-position: -36px top;}
	a.control .controlExtra1, a.control .controlExtra2 {display: none;}
	
	a.control:hover .controlExtra1, a.control:hover .controlExtra2, 
	a.control.active .controlExtra1, a.control.active .controlExtra2, 
	a.control.current .controlExtra1, a.control.current .controlExtra2 {
		display: block;
	}
		.connectorThemeA .controlExtra1 {background-position: -72px 0;}
		.connectorThemeA .controlExtra2 {background-position: -107px 0;}
	
/* per-context */
.connectorThemeA a.control {color: #fff;}

.connectorThemeA a.control, 
.connectorThemeA .navigationContext a.control.first,
.connectorThemeA .toolsContext a.control.last {
	border-color: #000;
	-webkit-box-shadow:  1px 0 0 0 #1477BB inset, 1px 0 0 0 #1477BB;
	box-shadow:  1px 0 0 0 #1477BB inset, 1px 0 0 0 #1477BB;
}
/* Disables white highlight effect when hovering */
.connectorThemeA a.control.first:hover,
.connectorThemeA a.active,
.connectorThemeA a.control.first.active,
.connectorThemeA .navigationContext a.control.first:hover {
	-webkit-box-shadow: 1px 0 0 0 #1477BB;
	box-shadow: 1px 0 0 0 #1477BB;
}
	/* Adds right highlight effect to the orphans #! to be deleted
	.connectorThemeA a.control.first.last {
		-webkit-box-shadow:  inset 1px 0px 0px 0px #1477bb, 1px 0px 0px 0px #1477bb;
		box-shadow:  inset 1px 0px 0px 0px #1477bb, 1px 0px 0px 0px #1477bb;
	}*/
.connectorThemeA a.control, .connectorThemeB a.control {
	text-shadow: 0px 1px 2px #000;
}
	.connectorThemeA a.control:hover,
	.connectorThemeA a.control.current {
		border-color: #000;
		-webkit-box-shadow: none;
        box-shadow: none;
	}
.connectorThemeB a.control,
.connectorThemeB a.control.first {
	color:#fff;
	border-color:#333;
	-webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, .14), inset 0px 1px 0px 0px rgba(255, 255, 255, .32);
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, .14), inset 0px 1px 0px 0px rgba(255, 255, 255, .32);
}
	.connectorThemeB a.control.active, 
	.connectorThemeB a.control.current, 
	.connectorThemeB a.control.first.active {
		border-color: #09427a;
		-webkit-box-shadow: none;
        box-shadow: none;
	}
	
/* navigationContext : Specific context for the main navigation section of the connector bar */
.navigationContext a.control {
	width: 142px;
}
.navigationContextThemeA a.control {
	width: 110px; /* 110px #! (13px = 1em) (4 buttons) */
}
	/* Adds highlight effect to the left */
	.navigationContext a.control.first {border-left: 1px solid #bfbfbf;}
	
/* toolsContext : Specific context for the tools menu section (includes Province selectors, Cart, Search, etc.) */
.toolsContext a.control {
	font-size: 10px;
	line-height: 10px;
	padding-bottom: 19px; /* 19px #! 10px = 1em */
	padding-top: 13px;
	text-transform: uppercase;	
	min-width: 17px;
}
	/* Controls how tight/loose of items in the tools navigation */
	.toolsContext a.control.first {	
		border-left: 1px solid #000;
		margin-left: -1px;
		
		padding-left: 23px;
	}
	.toolsContext a.control.last {
		padding-left: 14px;
		padding-right: 17px;
	}
		/* if Cart has items */
		.toolsContextActive a.control.first {padding-left: 20px;}
		.toolsContextActive a.control.last {padding-right: 20px;}
	
.toolsContext a.control:hover,
.toolsContext a.control.active,
.toolsContext a.control.active:hover {
	color: #000;
	border-bottom-color: #bfbfbf;
}
.toolsContext a.control.last {
	border-right: 1px solid #bfbfbf;
}
	.toolsContext a.control .controlExtra1,
	.toolsContext a.control .controlExtra2,
	.toolsContext a.control.active .controlExtra1,
	.toolsContext a.control.active .controlExtra2 {
		display: none;
	}
.connectorThemeA .toolsContext a.control,
.connectorThemeA .toolsContext a.control:hover {
	color: #fff;
	border-color: #000;
}		
	/* shoppingCartContext : Specific context for cart checkout button */
	/* #! Background effect to be moved to a separate component if necessary. */
	.shoppingCartContext a.control.active, 
	.shoppingCartContext a.control.active .controlExtra1, 
	.shoppingCartContext a.control.active .controlExtra2 {
		background-image: url(../images/bg_miscSprite.png) !important;
	}
	.shoppingCartContext a.control {
		padding-left: 0;
		padding-right: 0;
		min-width: 30px;
	}
	.shoppingCartContext a.control.active {
		background-position: 10px 0 !important;
		background-repeat: no-repeat !important;
	}
		.connectorThemeA .shoppingCartContext a.control.active {
			background-position: 10px -94px !important;
		}
		.shoppingCartContext a.control.active .controlExtra1, 
		.shoppingCartContext a.control.active .controlExtra2 {
			display: block;
			height: 46px;
			width: 15px;
		}
			.shoppingCartContext a.control.active .controlExtra1 {
				left: -5px;
				background-position: 0 -47px;
			}
				.connectorThemeA .shoppingCartContext a.control.active .controlExtra1 {background-position: -63px -47px;}
				
			.shoppingCartContext a.control.active .controlExtra2 {
				right: -15px;
				background-position: -22px -47px;
			}
				.connectorThemeA .shoppingCartContext a.control.active .controlExtra2 {background-position: -85px -47px;}
				
	/* if province selector is hidden */
	.toolsContext .shoppingCartContext a.first {padding-left: 23px;}
	.toolsContextActive .shoppingCartContext a.first {padding-left: 12px;}
	.connector .toolsContextActive .shoppingCartContext a.first {background-position: 22px 0 !important;}
		.connectorThemeA .toolsContextActive .shoppingCartContext a.first {background-position: 22px -94px !important;}
	.connector .toolsContextActive .shoppingCartContext a.first .controlExtra1 {left: 7px;}
	
	/* for fancyness, cosmetic styles only */
	.shoppingCartContext .badgeConnector {display: none;}
	.toolsContextActive .shoppingCartContext .badgeConnector {display: inline-block;}

/* loginContext : Specific context for login button (includes open/closed states) */
.loginContext a.control {
	width: 146px;
	padding-left: 9px;
	padding-right: 9px;
}

	#myBell #demoLoginLinkJs[data-uikit-flyout="flyOutConnectorLogin"] { width: 171px; }
	#myBell #demoLoginLinkJs[data-uikit-flyout="flyOutConnectorLoggedIn"] { width: 172px; }
	#myBell #demoLoginLinkJs[data-uikit-flyout="flyOutConnectorLoggedIn"] .contentText { max-width: 130px;	}
	
		.loginContext a.controlThemeA .contentText {
			max-width: 115px;
		}
	
	/* when there is only 2 options in the toolsContext, resets the width of the login button so it fits correctly in the available space */
	.loginContextThemeA a.control {
		width: 170px;
	}
		.loginContextThemeA .contentText {
			max-width: 117px;
		}

/* If we need to have a "merge" effect for all the control links */		
.controlGroupThemeA a.control {
	border-right-width: 0;
}
	.controlGroupThemeA a.control.last {
		border-right-width: 1px;
	}


/* CSS3=control */
.cssgradients a.control:hover,
.cssgradients a.control.active,
.cssgradients a.control.current {
	border-bottom: 0;
	background: rgb(2,54,103); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(2,54,103,1) 0%, rgba(14,78,137,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(2,54,103,1)), color-stop(100%,rgba(14,78,137,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(2,54,103,1) 0%,rgba(14,78,137,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(2,54,103,1) 0%,rgba(14,78,137,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(2,54,103,1) 0%,rgba(14,78,137,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(2,54,103,1) 0%,rgba(14,78,137,1) 100%); /* W3C */
}
.cssgradients .connectorThemeB a.control,
.cssgradients .connectorThemeB a.control.first {
	background: rgb(136,145,152); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(136,145,152,1) 0%, rgba(123,132,141,1) 39%, rgba(115,124,129,1) 61%, rgba(108,117,126,1) 79%, rgba(105,114,121,1) 86%, rgba(102,111,118,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(136,145,152,1)), color-stop(39%,rgba(123,132,141,1)), color-stop(61%,rgba(115,124,129,1)), color-stop(79%,rgba(108,117,126,1)), color-stop(86%,rgba(105,114,121,1)), color-stop(100%,rgba(102,111,118,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(136,145,152,1) 0%,rgba(123,132,141,1) 39%,rgba(115,124,129,1) 61%,rgba(108,117,126,1) 79%,rgba(105,114,121,1) 86%,rgba(102,111,118,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(136,145,152,1) 0%,rgba(123,132,141,1) 39%,rgba(115,124,129,1) 61%,rgba(108,117,126,1) 79%,rgba(105,114,121,1) 86%,rgba(102,111,118,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(136,145,152,1) 0%,rgba(123,132,141,1) 39%,rgba(115,124,129,1) 61%,rgba(108,117,126,1) 79%,rgba(105,114,121,1) 86%,rgba(102,111,118,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(136,145,152,1) 0%,rgba(123,132,141,1) 39%,rgba(115,124,129,1) 61%,rgba(108,117,126,1) 79%,rgba(105,114,121,1) 86%,rgba(102,111,118,1) 100%); /* W3C */
}
	.cssgradients .connectorThemeB a.control:hover, 
	.cssgradients .connectorThemeB a.control.first:hover {
		background: rgb(101,110,117); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(101,110,117,1) 0%, rgba(114,123,130,1) 41%, rgba(127,136,145,1) 74%, rgba(135,144,151,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(101,110,117,1)), color-stop(41%,rgba(114,123,130,1)), color-stop(74%,rgba(127,136,145,1)), color-stop(100%,rgba(135,144,151,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(101,110,117,1) 0%,rgba(114,123,130,1) 41%,rgba(127,136,145,1) 74%,rgba(135,144,151,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(101,110,117,1) 0%,rgba(114,123,130,1) 41%,rgba(127,136,145,1) 74%,rgba(135,144,151,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(101,110,117,1) 0%,rgba(114,123,130,1) 41%,rgba(127,136,145,1) 74%,rgba(135,144,151,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(101,110,117,1) 0%,rgba(114,123,130,1) 41%,rgba(127,136,145,1) 74%,rgba(135,144,151,1) 100%); /* W3C */
	}
	.cssgradients .connectorThemeB a.control.active, 
	.cssgradients .connectorThemeB a.control.current, 
	.cssgradients .connectorThemeB a.control.first.active {
		background: rgb(20,121,189); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(20,121,189,1) 0%, rgba(19,112,181,1) 23%, rgba(19,98,167,1) 53%, rgba(17,96,163,1) 57%, rgba(17,78,145,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(20,121,189,1)), color-stop(23%,rgba(19,112,181,1)), color-stop(53%,rgba(19,98,167,1)), color-stop(57%,rgba(17,96,163,1)), color-stop(100%,rgba(17,78,145,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(20,121,189,1) 0%,rgba(19,112,181,1) 23%,rgba(19,98,167,1) 53%,rgba(17,96,163,1) 57%,rgba(17,78,145,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(20,121,189,1) 0%,rgba(19,112,181,1) 23%,rgba(19,98,167,1) 53%,rgba(17,96,163,1) 57%,rgba(17,78,145,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(20,121,189,1) 0%,rgba(19,112,181,1) 23%,rgba(19,98,167,1) 53%,rgba(17,96,163,1) 57%,rgba(17,78,145,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(20,121,189,1) 0%,rgba(19,112,181,1) 23%,rgba(19,98,167,1) 53%,rgba(17,96,163,1) 57%,rgba(17,78,145,1) 100%); /* W3C */
	}
	
	/* Below are specific styles to handle box-shadows when on default/hover/active/current states for controlGroupThemeA and toolsContext 
	   - default : normal/idle state
	   - hover/active : when mouseovering the control (with/without flyout)
	   - current : locks the control style to an active style (ex.: arrow pointing down)	*/
	.controlGroupThemeA a.control,
	.controlGroupThemeA a.control:hover {
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.toolsContext a.control:hover,
	.toolsContext a.control.active,
	.toolsContext a.control.active:hover,
	.cssgradients .toolsContext a.control:hover,
	.cssgradients .toolsContext a.control.active {
		color: #0066a4;
		background: none; /* <- hides CSS3 gradients */
	}
	.connectorThemeA .toolsContext a.control:hover,
	.connectorThemeA .toolsContext a.control.active {
		color: #fff;		
	}
	/* Hides highlights effect */
	.connectorThemeA .controlGroupThemeA a.control.last,
	.cssgradients .toolsContext a.control,
	.cssgradients .toolsContext a.control:hover,
	.cssgradients .connectorThemeA .controlGroupThemeA a.control.last,
	.cssgradients .connectorThemeA .controlGroupThemeA a.control.last:hover {
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	/* Below specifies highlight effects depending on different themes/contexts */
	.controlGroupThemeA a.control.first,
	.cssgradients .toolsContext a.control.first,
	.cssgradients .toolsContext a.control.first:hover {
		-webkit-box-shadow: 1px 0 0 0 #fff inset;
		box-shadow: 1px 0 0 0 #fff inset;		
	}
	.controlGroupThemeA a.control.last,
	.cssgradients .toolsContext a.control.last,
	.cssgradients .toolsContext a.control.last:hover {
		-webkit-box-shadow: -1px 0 0 0 #fff inset, 1px 0 0 0 #fff;
		box-shadow: -1px 0 0 0 #fff inset, 1px 0 0 0 #fff;		
	}
	.connectorThemeA .controlGroupThemeA a.control.first,
	.cssgradients .connectorThemeA .toolsContext a.control.first,
	.cssgradients .connectorThemeA .toolsContext a.control.first:hover,
	.cssgradients .connectorThemeA .toolsContext a.control.first.active {
		-webkit-box-shadow: 1px 0 0 0 #1477BB inset;
		box-shadow: 1px 0 0 0 #1477BB inset;	
	}
	.cssgradients .connectorThemeA .toolsContext a.control.last,
	.cssgradients .connectorThemeA .toolsContext a.control.last:hover {
		-webkit-box-shadow: 1px 0 0 0 #1477BB;
		box-shadow: 1px 0 0 0 #1477BB;
	}

	.cssgradients .bsspContext .connectorThemeA .toolsContext a.control.last,
	.cssgradients .bsspContext .connectorThemeA .toolsContext a.control.last:hover {
		padding-right: 10px;
	}

	/* Below specifies highlight effects for orphan button matched with controlGroupThemeA 
	.controlGroupThemeA a.control.first.last,
	.cssgradients .controlGroupThemeA a.control.first.last {
		-webkit-box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #fff inset;
		box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #fff inset;
	}
	.connectorThemeA .controlGroupThemeA a.control.first.last,
	.cssgradients .connectorThemeA .controlGroupThemeA a.control.first.last {
		-webkit-box-shadow: 1px 0 0 0 #1477BB inset, 1px 0 0 0 #1477BB;
		box-shadow: 1px 0 0 0 #1477BB inset, 1px 0 0 0 #1477BB;
	}*/
	
/* =controlThemeA : overlap white control style (requires a flyOut to display properly) */	
.connector a.controlThemeA {
	overflow: visible; /* <- let the extras go outside the element */
	color: #0066A4; /* <- #! */
	text-shadow: none;
	height: 19px; /* <- final value = (height - total top/bottom paddings) */
	margin-bottom: -6px; /* <- tweak this value to control how the overlap occurs with its flyOut */
	position: relative; /* <- so we can use z-index value below */
	z-index: 15; /* <- should be higher than its own flyOut's z-index */
}
	.connector a.controlThemeA,
	.connector a.controlThemeA.first,
	.connectorThemeA .navigationContext a.controlThemeA.first,
	.connector a.controlThemeA:hover,
	.connector a.controlThemeA.first:hover,
	.connector a.controlThemeA.active,
	.connector a.controlThemeA.first.active
	{
		background: #f2f2f2 url("../images/bg_gradient_p.png") repeat-x 0 top;
		border: 1px solid #aeaeae;
		border-top: 0;
		
		-webkit-box-shadow: 0 0 0 1px #fff inset, 0 2px 4px 0 rgba(0, 0, 0, 0.15);
		box-shadow: 0 0 0 1px #fff inset, 0 2px 4px 0 rgba(0, 0, 0, 0.15);
	}
	.connector a.controlThemeA.active,
	.connector a.controlThemeA.first.active {
		height: 20px;
		margin-bottom: -7px;
		
		-webkit-box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #fff inset;
		box-shadow: 1px 0 0 0 #fff inset,-1px 0 0 0 #fff inset;		
	}
	
	/* Extras */
	a.controlThemeA .controlExtra1, 
	a.controlThemeA .controlExtra2,
	a.controlThemeA:hover .controlExtra1, 
	a.controlThemeA:hover .controlExtra2, 
	a.controlThemeA.active .controlExtra1, 
	a.controlThemeA.active .controlExtra2 {	
		display: block;
		top: auto;
		bottom: -1px;
	}
		/* by default, uses images for the corners (this is replaced by border-radius in supporting browsers) */
		a.controlThemeA .controlExtra1, 
		a.controlThemeA:hover .controlExtra1 {
			background-position: 0 -149px;
			left: -1px;
		}
		a.controlThemeA .controlExtra2, 
		a.controlThemeA:hover .controlExtra2 {
			background-position: -25px -149px;
			right: -1px;
		}
	
	.borderradius a.controlThemeA .controlExtra1,
	.borderradius a.controlThemeA .controlExtra2,
	a.controlThemeA.active .controlExtra2 {display: none;}
	
	/* controlExtra1/controlExtra2 becomes a mask when active (this hides the gap between flyOut and the overlap button) */
	.borderradius a.controlThemeA.active .controlExtra1,
	.borderradius a.controlThemeA.active .controlExtra2,
	a.controlThemeA.active .controlExtra1,
	a.controlThemeA.active .controlExtra2 {
		display: block; 
		background: #f2f2f2;
		width: 100%;
		left: 0;
		bottom: -2px;
		-webkit-box-shadow: 1px 0 0 0 #fff inset, -1px 0 0 0 #fff inset,;
		box-shadow: 1px 0 0 0 #fff inset,-1px 0 0 0 #fff inset;		
	}
	.borderradius a.controlThemeA.active .controlExtra2,
	a.controlThemeA.active .controlExtra2 {
		border-right: 1px solid #aeaeae;
		height: 10px;
		width: 5px;
		bottom: -6px;
		right: -1px;
		left: auto;
		-webkit-box-shadow: -1px 0 0 0 #fff inset,;
		box-shadow: -1px 0 0 0 #fff inset;		
	}
	
	/* =CSS3=controlThemeA */
	.borderradius .connector a.controlThemeA {
		-webkit-border-bottom-left-radius: 3px;
		border-bottom-left-radius: 3px;
		-webkit-border-bottom-right-radius: 3px;
		border-bottom-right-radius: 3px;
	}
	.borderradius .connector a.controlThemeA.active,
	.borderradius .connector a.controlThemeA.first.active {
		-webkit-border-bottom-left-radius: 0;
		border-bottom-left-radius: 0;
		-webkit-border-bottom-right-radius: 0;
		border-bottom-right-radius: 0;
	}
	
	
/* =buttonGroup */
.buttonGroupConnector {text-align: right;}
	.buttonGroupConnector .buttonConnector {margin-left: 5px; margin-bottom: 0;}

/* =button */
.buttonConnector {
	position: relative;
	display: inline-block;
	height: 16px;
	line-height: inherit;
	padding: 9px 8px 9px 15px;
	margin-right: 7px;
	text-align: center;
	min-width: 40px;
	max-width: 1000px;
	color: #fff;
	
	/* added for connector only */
	margin-bottom: 5px;	
}
	.buttonConnector, 
	.buttonConnector:link, 
	.buttonConnector:active {
		color: #fff;	
	}
	.buttonConnector:hover {text-decoration: none;}

.buttonConnector, .buttonConnectorExtra1 {
	background-image:url(../images/bg_buttonSprite.png);
}
	.buttonConnectorExtra1 {
		height: 35px;
		width: 7px;
		position: absolute;
		right: -7px;
		top: 0;
		background-position: right -0px;
	}
	
	.buttonConnectorThemeA, .buttonConnectorThemeA:link, .buttonConnectorThemeA:active,
	.buttonConnectorThemeB, .buttonConnectorThemeB:link, .buttonConnectorThemeB:active {
		color: #555;
		height: 17px;
		margin-bottom: -1px;	
	}
	
	/* #! not optimized */
	.buttonConnector:visited {color: #fff;}
	.buttonConnectorThemeA:visited {color: #555;}
	
	/* buttonThemeA */
	.buttonConnectorThemeA {
		background-position: 0px -50px;
	}
		.buttonConnectorThemeA .buttonConnectorExtra1 {
			background-position: right -50px;
		}

	/* buttonThemeB */
	.buttonConnectorThemeB {
		background-position:0px -101px;
		padding: 7px 8px 8px 15px;		
	}
		.buttonConnectorThemeB .buttonConnectorExtra1 {
			background-position: right -101px;
		}

	/* buttonThemeC */
	.buttonConnectorThemeC {
		height: 23px;
		background-position:0 -148px;
		padding-top: 14px;
		padding-bottom: 7px;
		padding-right: 8px;
	}
		.searchContext .buttonThemeC,
		.searchContext .buttonConnectorThemeC {padding-left: 25px; padding-right: 21px;}
		.buttonConnectorThemeC .buttonConnectorExtra1 {
			height: 44px;
			background-position: right -148px;
		}
		
	/* buttonThemeD : "pushed/active" button 
	#! should be a button utility class but won't work for CSS2 buttons (IE6-7-8) as they use background images - will need to create a "pushed/active" state for each button size. */
	.buttonConnectorThemeD {
		color: #fff;
		border-color: #000;
		padding-right: 8px;
		background-position: 0px -201px;
	}
		.buttonConnectorThemeD .buttonConnectorExtra1 {
			background-position: right -201px;
		}		

/* CSS3=button */
/* Everything is placed under the CSS Gradient as IE9 does not officially support CSS gradients and causes styling problems. IE9 is on CSS2 support on this one. */
.cssgradients .buttonConnector {
	background: rgb(20,122,190); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(20,122,190,1) 0%, rgba(17,78,146,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(20,122,190,1)), color-stop(100%,rgba(17,78,146,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(20,122,190,1) 0%,rgba(17,78,146,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(20,122,190,1) 0%,rgba(17,78,146,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(20,122,190,1) 0%,rgba(17,78,146,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(20,122,190,1) 0%,rgba(17,78,146,1) 100%); /* W3C */
	-webkit-box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .2);
    box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, .2);
	border: 1px solid #00142a;
	margin-right: 0;
	padding: 8px 14px 7px;
	height: inherit;
	line-height: 17px;
	min-height: 17px;
}
.cssgradients .buttonConnectorThemeA, 
.cssgradients .buttonConnectorThemeB {
	box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.5);
	-webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.5);
	border: 1px solid #bfbfbf;
	margin-bottom: 0;
}
.cssgradients .buttonConnectorThemeA {
	background: #fefefe; /* Old browsers */
	background: -moz-linear-gradient(top,  #fefefe 0%, #e3e3e3 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#e3e3e3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fefefe 0%,#e3e3e3 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fefefe 0%,#e3e3e3 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fefefe 0%,#e3e3e3 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fefefe 0%,#e3e3e3 100%); /* W3C */
}
	.flyOut .buttonThemeA,
	.flyOutConnector .buttonConnectorThemeA {margin-bottom: 4px;}
	.cssgradients .flyOut .buttonThemeA
	.cssgradients .flyOutConnector .buttonConnectorThemeA {margin-bottom: 5px;}
	
.cssgradients .buttonConnectorThemeB {
	background: #fefefe; /* Old browsers */
	background: -moz-linear-gradient(top,  #fefefe 0%, #eeeeee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #fefefe 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #fefefe 0%,#eeeeee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #fefefe 0%,#eeeeee 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #fefefe 0%,#eeeeee 100%); /* W3C */
	padding: 6px 14px;
}
.cssgradients .buttonConnectorThemeC {
	padding: 13px 14px 11px;
}
		.cssgradients .searchContext .buttonThemeC,
		.cssgradients .searchContext .buttonConnectorThemeC {
			padding-right: 25px;
			padding-left: 25px;
			line-height: normal;
		}

/* keep this after all other theme styles */
.cssgradients .buttonConnectorThemeD {
	-moz-box-shadow:    inset 0 1px 4px rgba(0,0,0,.6);
   	-webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.6);
   	box-shadow:         inset 0 1px 4px rgba(0,0,0,.6);
	background: #676767;
	border-color: #333;
	padding-top: 8px;
}

/* button tag fixes */
button.buttonConnector {
	border: 0;
	padding-top: 0;
	padding-bottom: 0;
	font-size: 1em;
	height: 34px;
	overflow: visible;
	top: 1px;
	min-width: 71px;
}
	button.buttonConnectorThemeB {height: 31px;}
	button.buttonConnectorThemeC {height: 44px;}
	.cssgradients button.buttonConnector {padding-top: 7px; padding-bottom: 6px; top: auto;}
	.cssgradients button.buttonConnectorThemeB {padding-top: 5px; padding-bottom: 5px;}
	.cssgradients button.buttonConnectorThemeC {padding-top: 12px; padding-bottom: 10px;}

/* Buttons Hover effect - binded to connector context (duplicate from ui-kit.css) */
.buttonConnectorThemeA:hover,
.buttonConnectorThemeA:active,
.buttonConnectorThemeB:hover,
.buttonConnectorThemeB:active {
	border-color: #0066a4 !important;
	z-index: 99;
	color: #0066a4;
}
	/* enables hover shadows */
	.cssgradients .buttonConnector:hover {
		box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25) !important;
		-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25) !important;		
	}
	.cssgradients .buttonConnector:active {
		box-shadow: none;
		-webkit-box-shadow: none;		
	}
	/* hover effect for icons (switches to hover sprite) */
	a:hover .iconFigureThemeA .icon,
	.borderradius .buttonConnectorThemeA:hover .iconConnector,
	.borderradius .buttonConnectorThemeB:hover .iconConnector {
		background-image: url(../images/bg_iconSprite_hover.png);
	}		
	
	
	
/* =buttonFullWidth : Forces any button to take all available space */
.buttonConnectorFullWidth {display: block;}


/* =form */
.connector form {margin-bottom: 0;}

.connector fieldset {border: 0 none;margin: 0;padding: 0;}
.connector legend {display: block;}
	.connector legend span {position: absolute;top: -999em;}

.connector input, .connector textarea {font-family: helvetica,arial,sans-serif;}
.connector input {margin: 0; padding: 0; margin-right: 8px;}

.connector input, 
.connectorLabel, 
.formContentConnector, 
.inputGroupConnector, .formAsideConnector {
	position: relative;
}

/* =labelOver : label over the input field (equivalent to "placeholder" attribute from HTML5) */
.labelOver, .labelPlaceHolder {
	position: absolute;
	cursor: text;
	z-index: 4;
	top: 4px;
	left: 8px; /* should be same value as its input's padding-left */
}
.labelPlaceHolder {
	position: absolute !important;
	top: 8px;
}

	/* per-context */
	.formTextConnectorThemeA .labelOver.headingConnectorType4,
	.formTextConnectorThemeA .labelOver.headingType4 {
		top: 12px; 
		left: 12px; /* should be same value as its input's padding-left */
	}

/* =formGroupConnector [component is an exception] */
.formGroupConnector {margin-bottom: 1em;}
	.formHeaderConnector {margin-bottom: 3px;}
		.formHeaderConnector label {font-size: 1.16em;}
	.formContentConnector {
		float: left;
	}	
		.connector .formContent {margin-right: 0;}
		
		/* Floats inputGroups */
		.connector .formContentThemeA .inputGroup,
		.formContentConnectorThemeA .inputGroupConnector,
		.connector .formContentThemeB .inputGroup,
		.formContentConnectorThemeB .inputGroupConnector {
			float: left;
			margin-right: 15px;
		}
			.formContentConnectorThemeA .inputGroupConnector {
				width: auto;
			}
			.formContentConnectorThemeB .inputGroupConnector {
				width: 165px;
			}
			
	.formGroupConnectorThemeA .formHeaderConnector { 
		float: left;
		margin-top: 5px;
		margin-right: 10px;
	}
		.formGroupConnectorThemeA .formContentConnector, .formGroupConnectorThemeB .formContentConnector {
			margin: 0 10px;
			width: auto;
		}		
	
/* =inputGroup : grouping two or more input elements with other elements */
.connector .inputGroup,
.inputGroupConnector {margin-bottom: 5px;}
	.connector .inputGroup .inputImage,
	.inputGroupConnector .inputImageConnector {display: none;}

	/* Custom form elements */
	.connector .formRadio .inputGroupThemeA,
	.formRadioConnector .inputGroupConnectorThemeA {
		margin-bottom: 10px;
	}
		.formRadio .checked label,
		.formRadioConnector .checked label {font-weight: bold;}
		
		.connector .inputGroupThemeA label:hover,
		.inputGroupConnectorThemeA label:hover {
			cursor: pointer;
		}
		.connector .inputGroupThemeA input,
		.inputGroupConnectorThemeA input {
			top: -9999em; 
			left: -4px;
			padding: 0;
			vertical-align: middle;
			height: 16px;
		}
			/* =inputImageConnector */
			.inputImage, .connector .inputGroupThemeA .inputImage,
			.inputImageConnector, .inputGroupConnectorThemeA .inputImageConnector {display: inline-block;}
			.inputImage,	
			.inputImageConnector {		
				position: absolute; 
				left: 0;
				width: 16px;
				height: 15px;
				background-repeat: no-repeat;
				background-position: 0 -33px; 
			}
			.inputImage:hover,
			.inputImageConnector:hover {cursor: pointer;}
			
/* inputGroupSize */
.inputGroupConnectorSize1 {width: 3em;}
.inputGroupConnectorSize2 {width: 6em;}
.inputGroupConnectorSize3 {width: 9em;}
.inputGroupConnectorSize4 {width: 12em;}
.inputGroupConnectorSize5 {width: 15em;}
.inputGroupConnectorSize6 {width: 18em;}
.inputGroupConnectorSize7 {width: 21em;}
.inputGroupConnectorSize8 {width: 24em;}
.inputGroupConnectorSize9 {width: 27em;}
.inputGroupConnectorSize10 {width: 30em;}	
				
	/* per-context */
	.formRadioConnector .inputGroupConnector, 
	.formCheckboxConnector .inputGroupConnector {
		padding-left: 23px;
	}
		.formRadioConnector .inputGroupConnector input, 
		.formCheckboxConnector .inputGroupConnector input {
			position: absolute; 
			left: 0;
		}
		.formRadioConnector .inputGroupConnector input {
			margin-top: 1px;
		}
	
.formAsideConnector {
	float: left;
}

/* Textfields style */
.formTextConnector input, .formTextAreaConnector textarea {
	background-color: #fff;
	border-top: 1px solid #8e8e8e;
	border-bottom: 1px solid #f8f8f8;
	border-left: 1px solid #d4d4d4;
	border-right: 1px solid #d4d4d4;
}
	/* Gives a grayish background-color : used on white backgrounds */
	.formGroupConenctor .inputConnectorThemeA,
	.lightBoxContent .formGroupConnector input, .lightBoxContent .formGroupConnector textarea {
		background-color: #eee;
		border-top-color: #5f5f5f;
		border-bottom-color: #cdcdcd;
		border-left-color: #a6a6a6;
		border-right-color: #a6a6a6;	
	}


/* =formTextConnector */	
.formTextConnector input {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
 	box-sizing: border-box;
	display: block;
	font-size: 1.16em;
	line-height: 1.14em;
	padding: 5px 8px 4px;
	margin-bottom: 3px;
	width: 100%;
}
	/* deprecated */
	.formTextConnector .inputSize1 {width: 5em;}
	.formTextConnector .inputSize2 {width: 6em;}
	.formTextConnector .inputSize3 {width: 7em;}
	.formTextConnector .inputSize4 {width: 8em;}
	.formTextConnector .inputSize5 {width: 9em;}
	.formTextConnector .inputSize6 {width: 10em;}
	.formTextConnector .inputSize7 {width: 15em;}
	.formTextConnector .inputSize8 {width: 18em;}
	.formTextConnector .inputSize9 {width: 21em;}
	
	/* formTextConnectorThemeA : Bigger text field with rounded corners */
	.formTextConnectorThemeA input {
		position: relative; 
		display: block;
		height: 44px;
		font-size: 1.333em; /* 16px */
		padding: 13px 0 8px 12px;
		font-weight: normal;
		border-bottom-color: #bdbdbd;
	}
		/* per-context */
		.searchContext .formTextThemeA .inputGroup,
		.searchContext .formTextConnectorThemeA .inputGroupConnector {margin-right: 0; margin-bottom: 0;}
			.searchContext .formTextThemeA input,
			.searchContext .formTextConnectorThemeA input {float: left; margin-right: 10px; width: 485px; margin-bottom: 0;}	
	
/* =formRadioConnector */
.connector .formRadio input,
.formRadioConnector input {margin-left: 1px;}
.connector .formRadio .inputImage,
.formRadioConnector .inputImageConnector {top: 1px;}
.formRadio .checked .inputImage,
.connector .formRadio .checked .inputImage,
.formRadioConnector .checked .inputImageConnector {background-position: -16px -33px;}


/* =formConnector */
.formConnector .formHeaderConnector {font-weight: bold;}

/* =flyOutConnector */
.flyOutConnector, .flyOutConnectorWrap, .flyOutConnectorArrow, .toolTipConnectorArrow {z-index: 10;}

.flyOutConnector,
.resultListThemeA .ui-widget-content {
	position: absolute;
	top: 67px;
	background: #f2f2f2;
	border: 1px solid #ababab;
}
	/* this is the default width of any flyOut in the connector bar, please use individual context to specifify other widths */
	.navigationContext .flyOut,
	.navigationContext .flyOutConnector {
		width: 232px; 
	}
	/* negative margin to compensate for extras height */
	.flyOutConnectorWrap {
		position: relative;
		padding: 0 5px 0;
		margin-top: -10px;
		margin-bottom: -5px;
	}		
		.flyOutConnectorHeader {
			position: relative; 
			margin-top: 0; 
			margin-bottom: 10px; 
			padding: 0 4px;
		}
			.flyOutConnectorHeader .actionLink {color: #212121; font-size: 1.166em;}
	
	.flyOutConnectorContent h2 {font-size:1.8em;}

		.flyOutConnectorThemeA .flyOutConnectorWrap {padding: 15px 20px 5px; margin-bottom: 0;}
		.flyOutConnectorThemeA .flyOutConnectorHeader {padding-left: 0; padding-right: 0; font-weight: bold;}
	
	/* Extras */
	.flyOutConnectorExtra1, .flyOutConnectorExtra2, .flyOutConnectorExtra3, .flyOutConnectorExtra4, .flyOutConnectorExtra5, .flyOutConnectorExtra6, .flyOutConnectorArrow {
		background: transparent url(../images/bg_flyOutSprite_a.png) no-repeat 0 0;
	}
		/* left corners */
		.flyOutConnectorExtra1, .flyOutConnectorExtra2 {left: -10px;}
		
		/* top corners */
		.flyOutConnectorExtra1, .flyOutConnectorExtra3 {top: -17px; height: 17px;}
		
		/* bottom corners */
		.flyOutConnectorExtra2, .flyOutConnectorExtra4 {bottom: -26px; height: 26px; background-position: 0 -18px;}
		
		/* right corners */
		.flyOutConnectorExtra3, .flyOutConnectorExtra4 {right: -10px; width: 20px; background-position: -955px 0;}
			/* bottom right corner */
			.flyOutConnectorExtra4 {background-position: -955px -18px;} 
			
		/* side shadows */
		.flyOutConnectorExtra5, .flyOutConnectorExtra6 {
			background-position: -975px 0; 
			background-repeat: repeat-y; 
			width: 11px;
			height: 100%;
			top: 0;
		}
			/* left side shadow */
			.flyOutConnectorExtra5 {left: -10px;}
			
			/* right side shadow */
			.flyOutConnectorExtra6 {right: -10px; background-position: right 0;}
			
		/* Arrow */
		.flyOutConnectorArrow {
			position: absolute;
			top: -40px;
			margin-left: -17.5px;
			width: 35px;
			height: 35px;
		}
			/* Top */
			.flyOutConnectorArrow {
				left: 24px;
				background-position: 0 -51px;
			}
			/* Right */
			.flyOutConnectorArrowThemeA {
				top: 5px;
				right: -24px;
				left: auto;
				background-position: -36px -51px;
			}
			/* Bottom */
			.flyOutConnectorArrowThemeB {
				top: auto;
				bottom: -24px;
				left: 24px;
				background-position: -72px -51px;
			}
			/* Left */
			.flyOutConnectorArrowThemeC {
				top: 8px;
				left: -8px;
				background-position: -108px -51px;
			}
			
	/* per-context */
	.navigationContext .flyOut,
	.navigationContext .flyOutConnector {
		left: 50%; margin-left: -116px;
	}
		.navigationContext .flyOut .flyOutArrow,
		.navigationContext .flyOutConnector .flyOutConnectorArrow {left: 110px;}
	
	#flyOutConnectorProvince, 
	.loginContext .flyOut,
	.loginContext .flyOutConnector {
		right: 0;
	}

	#flyOutConnectorSearch {
		right: -22px;
	}
	
	#flyOutConnectorProvince .flyOutArrow,
	#flyOutConnectorProvince .flyOutConnectorArrow,
	#flyOutConnectorSearch .flyOutConnectorArrow,
	.loginContext .flyOut .flyOutArrow,
	.loginContext .flyOutConnector .flyOutConnectorArrow {
		left: auto;
	}
	
	#flyOutConnectorProvince {width: 450px;}	
		#flyOutConnectorProvince .flyOutArrow,
		#flyOutConnectorProvince .flyOutConnectorArrow {right: 10px;}
		
		/* when using touch-enabled devices */
		.contextTouch #flyOutConnectorProvince .formRadio .formContent,
		.contextTouch #flyOutConnectorProvince .formRadioConnector .formContentConnector {
			display: none;	
		}
		.contextTouch #flyOutConnectorProvince select {
			display: block !important;	
		}
		.provinceSelectorContext label {
			font-size: 1em;	
		}
		
	#flyOutConnectorSearch {width: 628px;}
		#flyOutConnectorSearch .formGroup, 
		#flyOutConnectorSearch .formGroup .button,
		#flyOutConnectorSearch .formGroupConnector, 
		#flyOutConnectorSearch .formGroupConnector .buttonConnector {margin-bottom: 0;}
		
		#flyOutConnectorSearch .flyOutArrow,
		#flyOutConnectorSearch .flyOutConnectorArrow {left: auto; right: 23px;}
		.toolsContextActive #flyOutConnectorSearch .flyOutArrow,
		.toolsContextActive #flyOutConnectorSearch .flyOutConnectorArrow {left: auto; right: 14px;}
		
	.loginContext .flyOutHeader,
	.loginContext .flyOutConnectorHeader {white-space: nowrap; padding-right: 45px;}
		
		.loginContext .flyOut .flyOutArrow,
		.loginContext .flyOutConnector .flyOutConnectorArrow {right: 50px;}
		.loginContext .button,
		.cssgradients .loginContext .button,
		.loginContext .buttonConnector {
			float: left;
			margin-right: 15px;
			min-width: 0;
			width: 33%;
		}
		.loginContext .actionLink {
			width: 46%;
			line-height:35px;	
		}
		.loginContext .aside .button,
		.loginContext .asideConnector .buttonConnector {
			padding-left: 7px;
			padding-right:0; right: 7px;
			width: auto;
			margin-right: 0;
		}
		.cssgradients .loginContext .aside .button,
		.cssgradients .loginContext .asideConnector .buttonConnector {padding-right: 7px; right: auto;}
	
	#flyOutConnectorLogin .aside,
	#flyOutConnectorLogin .asideConnector {top: -7px; right: -9px;}
	#flyOutConnectorLogin .formAside,
	#flyOutConnectorLogin .formAsideConnector {font-size: 11px; margin-left: 0;}
	#flyOutConnectorLogin .formText input,
	#flyOutConnectorLogin .formTextConnector input {margin-right: 0; width: 220px;}
	
	#flyOutConnectorLoggedIn, 
	#flyOutConnectorLoggedIn .button,
	#flyOutConnectorLoggedIn .buttonConnector  {width: auto;}

	#flyOutConnectorLoggedIn {min-width:190px;} /*Sets a minimum width to the loggedIn flyOut to avoid unwanted text wrapping in buttons */
		
	#flyOutConnectorLoggedOutConfirmation {width: 175px;}
		
/* CSS3=flyOutConnector */
.borderradius .flyOutConnector {
	top: 52px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	-webkit-box-shadow: inset 0px 0px 0px 1px #fff, 0px 5px 10px 0px rgba(0, 0, 0, .2);
	box-shadow: inset 0px 0px 0px 1px #fff, 0px 5px 10px 0px rgba(0, 0, 0, .2);
}	
	.borderradius .flyOutConnectorWrap {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 5px;
	}
	.borderradius .flyOutConnectorThemeA {padding-bottom: 10px;}
		.borderradius .flyOutConnectorThemeA .flyOutConnectorWrap:first-child {padding-top: 20px;} /* #! Add alias ".first"? */
		.borderradius .flyOutConnectorArrow {top:-25px;}
		
		
/* =flyOutConnectorLayout : specific to connector */
.flyOutConnectorLayoutB {width: 464px;}
	/* per-context */
	.navigationContext .flyOutConnectorLayoutB {margin-left: -135px;}
		.navigationContext .flyOutConnectorLayoutB .flyOutConnectorArrow {left: 129px;}
.flyOutConnectorLayoutC {width: 920px;}

.flyOutConnectorLayoutB .columnConnector, 
.flyOutConnectorLayoutC .columnConnector {
	width: 50%;
}
	.flyOutConnectorLayoutA .listViewConnector, .flyOutConnectorLayoutA .listViewConnector li, 
	.flyOutConnectorLayoutB .listViewConnector, .flyOutConnectorLayoutB .listViewConnector li, 
	.flyOutConnectorLayoutC .listViewConnector, .flyOutConnectorLayoutC .listViewConnector li {
		float: left;
	}

	/* per-elements */
	.flyOutConnectorLayoutA .columnContent {padding-right: 0;}
	.flyOutConnectorLayoutB .columnContent, 
	.flyOutConnectorLayoutC .columnContent {padding-right: 5px;}
		.flyOutConnectorLayoutA .listViewConnector, 
		.flyOutConnectorLayoutB .listViewConnector, 
		.flyOutConnectorLayoutC .listViewConnector {margin-left: -5px;}
			.flyOutConnectorLayoutA .listViewConnector li, 
			.flyOutConnectorLayoutB .listViewConnector li, 
			.flyOutConnectorLayoutC .listViewConnector li {
					margin-bottom: 0;
					padding-left: 0;
					list-style-type: none;
					background-image: none;
			}
			.flyOutConnectorLayoutA .listViewConnector li a, 
			.flyOutConnectorLayoutB .listViewConnector li a, 
			.flyOutConnectorLayoutC .listViewConnector li a {margin-left: 5px;}		

			
/* =textList : basic list with bullets (should not contain any extras, use itemList instead) - **binded to UL for increased priority** */
ul.textList li, ul li {
	list-style: none; 
}

.textList li, ul li, 
.footer .textList li {
	margin-bottom: 3px;
	background-image: url(../../resources/images/bullet_dot.png); 
	background-color: transparent; 
	background-repeat: no-repeat; 
	padding-left: 10px;
}
	.textList li, ul li {background-position: 0 3px;}
	
	.textList .active {font-weight: bold;}
	.textList a, 
	.footer .textList a {
		display: inline;
		padding: 0;
		border: 0;
	}
		.textList a:hover {text-decoration: underline;}
		
	.textList .active a {font-weight: bold;}
	
	/* =textListThemeA */
	.textListThemeA li, 
	.footer .textListThemeA li {
		padding-left: 12px; 
		background-image: url(../../resources/images/bullet_arrow.png); 
	}
	
	.textListThemeB li, 
	.footer .textListThemeB li {padding-left: 15px;}
	.textListThemeB li, .footer .textListThemeB li,
	.iconConnectorArrowA {
		background-image: url(../../resources/images/bullet_arrow_big.png); 
	}
	/* =textListThemeC */
	.textListThemeC, 
	.footer .textListThemeC {
		position: relative;
	}
	.textListThemeC li,
	.footer .textListThemeC li { 
		background-image: none;
		padding-left: 0;
		padding-top: 5px;
		padding-bottom: 5px;
		width: 100%; 
		border-bottom: 1px solid #ccc;
	}
		.textListThemeC li.last { 
			border: 0;
		}		
		
	/* =textListThemeD */
	.textListThemeD li,
	.footer .textListThemeD li {
		background: none;
		display: inline-block;
		border-right: 1px solid #ccc;
		margin-bottom: 3px;
		padding-right: 12px;
		margin-right: 8px;
		
		/* following hides the default bullets, need to be redeclared here due to cascading styles priority */
		background-image: none;
		padding-left: 0;
	}
		.textListThemeD li.last,
		.footer .textListThemeD li.last {
			border-right: 0;
			margin-right: 0;
			padding-right: 0;
		}
		.textListThemeD .active {
			font-weight: normal;
		}
		
	/* =textListThemeE */
	.textListThemeE, 
	.footer .textListThemeE,
	.boxHeader .flyOut .textListThemeE {
		margin-top: 0;
	}
	/* hides bullet - redeclared here because of cascading priority */
	.textListThemeE li,
	.footer .textListThemeE li {
		margin-bottom: 0;
		padding-left: 0;
		background-image:none;
	}
		.textListThemeE li, 
		.textListThemeE li a,
		.footer .textListThemeE li, 
		.footer .textListThemeE li a {
			display: block;
		}
		.textListThemeE li.disabled,
		.textListThemeE li a,
		.footer .textListThemeE li a{
			padding: 10px;
		}
		.textListThemeE li.first.last a {
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
		}
		
		.textListThemeE li a:hover,
		.textListThemeE li.active a,
		.footer .textListThemeE li a:hover,
		.footer .textListThemeE li.active a {
			background-color: #d9e8f1;
			font-weight: normal;
			text-decoration: none;
		}
		
	/* =textListThemeF : similar to utility class "noBullet" */
	.textListThemeF li,
	.footer .textListThemeF li {
		padding-left: 20px;
		background-image: none;
	}
		.textListThemeF li .icon,
		.footer .textListThemeF li {
			margin-left: -20px;
		}
	
	/* =textListThemeG : list with special hover effect for nested <a> tags */
	.textListThemeG {
	    border-top: 1px solid #CCCCCC;	    
	}
		ol.textListThemeG {
			list-style-position: inside; 
			list-style-type: decimal;
		}

		.textListThemeG > li {
			zoom: 1;
			position: relative;
			margin-bottom: 0;
			background-image: none;
			border-bottom: 1px solid #CCCCCC;    
			padding: 15px 15px 15px 20px;
		}
			.textListThemeG > li > a {
				margin-left: -15px;
				padding: 15px 15px 15px 45px;
				margin: -15px -15px -15px -20px;
				display: block;
			}
			.textListThemeG > li > a:hover {background-color: #e2eff7;}
				
				/* special styles for list item numbering */
				.textListThemeG > li > .number {
					position: relative;
					float: left;
					margin-right: 5px;
					z-index: 1;
				}

.flyOutWrapThemeA .textList li.last a {
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright: 5px;
	border-bottom-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-moz-border-radius-bottomleft: 5px;
	border-bottom-left-radius: 5px;
}
		
/* custom bullet position fix depending on heading type size */
ul.headingType5 li, ul.headingConnectorType5 li {background-position: 0 4px;}
ul.headingType4 li, ul.headingConnectorType4 li {background-position: 0 7px;}
ul.headingType3 li, ul.headingConnectorType3 li {background-position: 0 8px;}
ul.headingType2 li, ul.headingConnectorType2 li {background-position: 0 11px;}
ul.headingType1 li, ul.headingConnectorType1 li {background-position: 0 14px;}

.textListFunctionA li {
	float: left !important;
	width: 50%;
}

		
/* =resultList : connector search result list */
.resultList {margin-bottom: 10px;}
	.resultList li {margin-bottom: 0; padding-left: 0; background-image: none;}
	
		.resultList a,
		.connector .ui-menu .ui-menu-item a,
		.resultListThemeA .ui-menu .ui-menu-item a {
			color: #555;
			display:block;
			font-size: 1.2em !important;
			line-height: 18px !important;
			padding: 12px 14px 12px !important;
		}

		.resultList a:hover,
		.connector .ui-menu .ui-menu-item a.ui-state-hover,
		.connector .ui-menu .ui-menu-item a.ui-state-active
		.resultListThemeA a:hover,
		.resultListThemeA .ui-menu .ui-menu-item a.ui-state-hover,
		.resultListThemeA .ui-menu .ui-menu-item a.ui-state-active {
			background-color:#d9e8f1;
			color: #212121;
			text-decoration:none;
			padding-top: 12px !important;
		}

		.resultList a:hover,
		.connector .ui-menu .ui-menu-item a,
		.connector .ui-menu .ui-menu-item a.ui-state-hover,
		.connector .ui-menu .ui-menu-item a.ui-state-active
		.resultListThemeA a:hover,
		.resultListThemeA .ui-menu .ui-menu-item a,
		.resultListThemeA .ui-menu .ui-menu-item a.ui-state-hover,
		.resultListThemeA .ui-menu .ui-menu-item a.ui-state-active {
			border:0;
			border-bottom: 1px solid #c2c2c2;
			margin: 0;
		}
		

		.searchContext .resultList .ui-corner-all {
			-webkit-border-radius: 0;
			-moz-border-radius: 0;
			border-radius: 0;
		}

	/* =resultListThemeA*/

	.resultListThemeA {position:absolute; z-index:2;}

		.resultListThemeA .ui-corner-all, 
		.resultListThemeA .ui-corner-bottom,
		.resultListThemeA .ui-corner-right,
		.resultListThemeA .ui-corner-br {
		    border-bottom-right-radius: 4px;
		}
		.resultListThemeA .ui-corner-all,
		.resultListThemeA .ui-corner-bottom,
		.resultListThemeA .ui-corner-left,
		.resultListThemeA .ui-corner-bl {
		    border-bottom-left-radius: 4px;
		}
		.resultListThemeA .ui-corner-all, 
		.resultListThemeA .ui-corner-top,
		.resultListThemeA .ui-corner-right,
		.resultListThemeA .ui-corner-tr {
		    border-top-right-radius: 4px;
		}
		.resultListThemeA .ui-corner-all,
		.resultListThemeA .ui-corner-top,
		.resultListThemeA .ui-corner-left,
		.resultListThemeA .ui-corner-tl {
		    border-top-left-radius: 4px;
		}

		
/* =listViewConnector */
.listViewConnector {position: relative; /*margin-bottom: 0;*/}
/*.listViewConnector li.last, .listViewConnector li.last a {margin-bottom: 0;}*/
	.listViewConnector a, .listViewConnector a:link, .listViewConnector a:active {color: #212121;}
	.listViewConnector a {
		position: relative;
		background-color: #fff;
		border: 1px solid #cecece; 
		margin-bottom: 5px;
		padding: 5px 0;
		display: block;
		height: 100%;
		text-decoration: none;
	}
		.listViewConnector a:hover {
			border-color: #0066a4;
		}
		.listViewConnector .active a {
			color: #fff;
			background: #114f93 url(../images/bg_gradient_f.png) repeat-x 0 0;
			text-decoration: none;
			text-shadow: 0px 1px 1px #000; /* #! group all same shadow values together */
		}
		.listViewConnector .active a, .listViewConnector a.active:hover {
			border-color: #002f5c;
		}
			.listViewConnector a .listViewConnectorFigure, .listViewConnector a .listViewConnectorContent {display: inline-block;}
	
			.listViewConnector a .listViewConnectorFigure {width: 110px; text-align: center;}
				.listViewConnector a .listViewConnectorFigure, .listViewConnector a .listViewConnectorFigure img {vertical-align: middle; max-width: 110px; height: auto;}
			.listViewConnector a .listViewConnectorContent {vertical-align: middle; width: 35%; font-size: 1.166em; padding-left: 20px;}
						
			.listViewConnector a.active {color: #212121; font-weight: bold;}
			
	.listViewConnectorThemeA {float: left;}
		.listViewConnectorThemeA li {float: left; width: 33%;}
		
/* listViewThemeB */
.listViewConnectorThemeB {
	border-top: 1px solid #cecece;
}
	.listViewConnectorThemeB li, .listViewConnectorThemeB a {
		margin-bottom: 0;
	}
		.listViewConnectorThemeB a {
			background: transparent;
			border-right: 0;
			border-top: 0;
			border-left: 0;
		}
		.listViewConnectorThemeB .active a {
			color: #212121; /* #! */
			text-shadow: none;
			border-bottom-color: #cecece;
		}
		/*.listView .active a, .listView a.active:hover {
			border-color: #cecece;
		}*/
			.listViewConnectorThemeB a .listViewConnectorFigure {
				width: 35px; height: 55px;
			}
			.listViewConnectorThemeB a .listViewConnectorContent {
				padding-left: 0;
			}
			
	/* per-context */
	.listViewConnectorThemeB a, 
	.listViewConnectorThemeB .textList a  {color: #0066a4;} /* <- need to redeclared because of cascading order */	
	.flyOutLayoutA .listView, 
	.flyOutConnectorLayoutA .listViewConnector {margin-bottom: -5px;}
	.flyOut .listView li a, 
	.flyOutConnector .listViewConnector li a {width: 220px;}
	.flyOut .listView li a:hover, 
	.flyOutConnector .listViewConnector li a:hover {text-decoration: none;}	
	
	.navigationContext .listView .listViewFigure,
	.navigationContext .listViewConnector .listViewConnectorFigure {
		position:relative; 
		overflow: hidden; 
		height: 75px;
		vertical-align: middle;
		background-color: transparent;
		background-image: url("../images/bg_navigationSprite_a.png");
		background-repeat: no-repeat;
	}
		/* LOB images : specific to connector */
		/* Shop */
		.mobilityLOBContext .listViewFigure, 
		#shopMobility .listViewConnectorFigure {background-position: 0 0;}
		.internetLOBContext .listViewFigure, 
		#shopInternet .listViewConnectorFigure {background-position: 0 -75px;}
		.tvLOBContext .listViewFigure, 
		#shopTv .listViewConnectorFigure {background-position: 0 -150px;}
		.homephoneLOBContext .listViewFigure, 
		#shopHomephone .listViewConnectorFigure {background-position: 0 -225px;}
		.bundlesLOBContext .listViewFigure, 
		#shopBundles .listViewConnectorFigure {background-position: 0 -300px;}
			/* active state */
			.mobilityLOBContext.active .listViewFigure, 
			#shopMobility.active .listViewConnectorFigure {background-position: -111px 0;}
			.internetLOBContext.active .listViewFigure, 
			#shopInternet.active .listViewConnectorFigure {background-position: -111px -75px;}
			.tvLOBContext.active .listViewFigure, 
			#shopTv.active .listViewConnectorFigure {background-position: -111px -150px;}
			.homephoneLOBContext.active .listViewFigure,
			#shopHomephone.active .listViewConnectorFigure {background-position: -111px -225px;}
			.bundlesLOBContext.active .listViewFigure, 
			#shopBundles.active .listViewConnectorFigure {background-position: -111px -300px;}
			/* #shopHeaderBundles .listViewContent { width: 30% !important; } */
		
		/* Support */
		#supportMobility .listViewConnectorFigure {background-position: 0 -750px;}
		#supportInternet .listViewConnectorFigure {background-position: 0 -825px;}
		#supportTv .listViewConnectorFigure {background-position: 0 -900px;}
		#supportHomephone .listViewConnectorFigure {background-position: 0 -975px;}
		#supportBundles .listViewConnectorFigure {background-position: 0 -450px;}
			/* active state */
			#supportMobility.active .listViewConnectorFigure {background-position: -111px -750px;}
			#supportInternet.active .listViewConnectorFigure {background-position: -111px -825px;}		
			#supportTv.active .listViewConnectorFigure {background-position: -111px -900px;}		
			#supportHomephone.active .listViewConnectorFigure {background-position: -111px -975px;}
			#supportBundles.active .listViewConnectorFigure {background-position: -111px -450px;}
			
		/* Services */
		#myServices .listViewConnectorFigure {background-position: 0 -600px;}
		#myBills .listViewConnectorFigure {background-position: 0 -450px;}
		#myProfile .listViewConnectorFigure {background-position: 0 -375px;}
			/* active state */
			#myServices.active .listViewConnectorFigure {background-position: -111px -600px;}
			#myBills.active .listViewConnectorFigure {background-position: -111px -450px;}
			#myProfile.active .listViewConnectorFigure {background-position: -111px -375px;}
		

/* CSS3=listViewConnector */
.borderradius .listViewConnector a:hover {
	-webkit-box-shadow:  0px 0px 4px 0px rgba(0, 102, 153, .8);
	box-shadow:  0px 0px 4px 0px rgba(0, 102, 153, .8);
}
/*.cssgradients .listViewConnector .active a, .borderradius .listViewConnector .active a:hover {
	-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0, 47, 92, .8);
	box-shadow: inset 0px 1px 5px 0px rgba(0, 47, 92, .8);
}*/
	.cssgradients .listViewConnector .active a {			
		background: rgb(21,128,196); /* #! Old browsers */
		background: -moz-linear-gradient(top,  rgba(21,128,196,1) 0%, rgba(20,129,196,1) 10%, rgba(20,125,193,1) 18%, rgba(19,108,176,1) 42%, rgba(18,79,146,1) 75%, rgba(17,70,138,1) 91%, rgba(17,70,138,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(21,128,196,1)), color-stop(10%,rgba(20,129,196,1)), color-stop(18%,rgba(20,125,193,1)), color-stop(42%,rgba(19,108,176,1)), color-stop(75%,rgba(18,79,146,1)), color-stop(91%,rgba(17,70,138,1)), color-stop(100%,rgba(17,70,138,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(21,128,196,1) 0%,rgba(20,129,196,1) 10%,rgba(20,125,193,1) 18%,rgba(19,108,176,1) 42%,rgba(18,79,146,1) 75%,rgba(17,70,138,1) 91%,rgba(17,70,138,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(21,128,196,1) 0%,rgba(20,129,196,1) 10%,rgba(20,125,193,1) 18%,rgba(19,108,176,1) 42%,rgba(18,79,146,1) 75%,rgba(17,70,138,1) 91%,rgba(17,70,138,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(21,128,196,1) 0%,rgba(20,129,196,1) 10%,rgba(20,125,193,1) 18%,rgba(19,108,176,1) 42%,rgba(18,79,146,1) 75%,rgba(17,70,138,1) 91%,rgba(17,70,138,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(21,128,196,1) 0%,rgba(20,129,196,1) 10%,rgba(20,125,193,1) 18%,rgba(19,108,176,1) 42%,rgba(18,79,146,1) 75%,rgba(17,70,138,1) 91%,rgba(17,70,138,1) 100%); /* W3C */
		
		-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0, 47, 92, .8);
		box-shadow: inset 0px 1px 5px 0px rgba(0, 47, 92, .8);
	}

.borderradius .listViewConnectorThemeB a {
	-webkit-border-radius: 0;
	border-radius: 0;	
}
.borderradius .listViewConnectorThemeB a:hover, 
.listViewConnectorThemeB a:hover {
	border-color: #cecece;
	-webkit-box-shadow: none;
	box-shadow: none;	
}
	.cssgradients .listViewConnectorThemeB .active a, 
	.listViewConnectorThemeB .active a {
		background: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

		
	
/* =noteConnector */
.noteConnector {
	font-size: 11px;
	clear: left; /* #! evaluate needs */
}

/* =badgeConnector */
.badgeConnector, 
.iconConnector {
	position: relative;
	display: inline-block;
	background-color: transparent;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.badgeConnector {
	color: #fff;
	background-position: -128px 0;
	text-align: center;
	text-shadow: none;
	z-index: 1;
	font-size: 1.1em; /* size based on its parent font-size' which is 10px. Therefore, in this context, 1em = 10px - see .toolsContext a.control styles */
	
	/* default width/height */
	width: 24px;
	height: 23px;
	line-height: 22px;
}
	/* per-context */
	.badgeConnectorThemeA, .connectorThemeA .badgeConnector {background-position: -128px -24px;}
	.shoppingCartContext .badgeConnector {left: 2px; top: -9px;}


/* =iconConnector */
.iconConnector {
	overflow: hidden;
	background-position: 0 0;
	
	/* default width/height */
	width: 17px;
	height: 17px;
}
	/*.iconConnector:hover {cursor: pointer;} #! to be removed */
	
		.buttonConnectorThemeC .iconConnector {max-height: 18px;}
		
		.iconConnectorPrinter, .iconConnectorLetter {
		 width: 17px; height: 17px;
		 }
		 
		.iconConnectorLink, .actionLink .iconConnector, .iconConnectorHouse {
			width: 18px; height: 18px;
		}
		
		.iconConnectorChatBubble {
			width:18px;
		}
		
		.iconConnectorClose {
			width: 20px; height: 20px;
		}			
			
		.iconConnectorFacebook, .iconConnectorTwitter, .iconConnectorGoogle, .iconConnectorLetter, .iconConnectorLetterA, .iconConnectorYoutube,
		.iconConnectorMail, .iconConnectorAvailable {
			width: 23px; height: 23px;
		}
		
		.iconConnectorExclamation {
			width: 25px; height:25px;
		}
		
		.iconConnectorAddition, .iconConnectorChatBubbleA, .iconConnectorPhone, .iconConnectorBag, .iconConnectorMapPin, .iconConnectorText, .iconConnectorBox, .iconConnectorCellphone, .iconConnectorCellphoneContract {
			width: 31px; height: 31px;
		}
		
		.iconConnectorVisa, .iconConnectorMastercard, .iconConnectorAmex {
			width: 44px; height: 28px;
		}

		/* =iconConnectorLink */
		.iconConnectorLink, .actionLink .iconConnector {
			background-position: -175px 0; 
			top: 1px;
			
		}
			/* per-context */
			.actionLink .iconConnector {
				vertical-align: middle;
				top: auto; /* if font-size is other than 1em/12px, this value will need to be tweaked. */
			}
			.buttonConnectorFullWidth .iconConnector {
				position: absolute;
				right: 5px;
				top: 9px;
			}
			.borderradius .buttonConnectorFullWidth .iconConnector {right: 11px; top: 8px;}
			
		/* iconConnectorArrow */
		.connector .iconArrowTop, .connector .iconArrow,
		.iconConnectorArrowTop, .iconConnectorArrow {background-position: 0 -16px;}
			.connectorThemeA .iconArrow, 
			.connectorThemeA .iconConnectorArrow, 
			.loginContext a.control:hover .iconArrow, 
			.loginContext a.control:hover .iconConnectorArrow, 
			.loginContext a.control.active .iconArrow,
			.loginContext a.control.active .iconConnectorArrow {background-position: 0 0;}
			a.control:hover .iconArrow,
			a.control.active .iconArrow, 
			a.control.current:hover .iconArrow,
			a.control:hover .iconConnectorArrow,
			a.control.active .iconConnectorArrow, 
			a.control.current:hover .iconConnectorArrow {background-position: -48px 0;}
			a.control.current .iconArrow,
			a.control.current .iconConnectorArrow {background-position: 0 0;}
			.loginContext a.control .iconArrow,
			.loginContext a.control .iconConnectorArrow {
				top: 1px;
				vertical-align: top;
			}
				/* iconConnectorArrowA - see textListThemeB */
				.iconConnectorArrowA {background-position: center center;}

		.provinceSelectorContext a.control {
			background-repeat: no-repeat !important;
			background-position: -585px -224px !important;
		}
			
		/* iconConnectorCart */
		.iconConnectorCart {
			width: 38px;
			height: 38px;
		}
		.toolsContextActive .iconConnectorCart {
			width: 25px;	
		}
		.connectorThemeA .iconCart,
		.connectorThemeA .iconConnectorCart {
			background-position: -596px -85px;
		}
		.connectorThemeA .toolsContextActive .iconConnectorCart {
			background-position: -600px -85px;
		}

			a.control:hover .iconConnectorCart,
			a.control:hover .iconCart,
			.connectorThemeA .shoppingCartContext a.control.active:hover .iconCart,
			.connectorThemeA .shoppingCartContext a.control.active:hover .iconConnectorCart {
				background-position: -600px -82px} /* #! need to specify new theme - white theme */
			
			.shoppingCartContext a.control:hover .iconCart,
			.shoppingCartContext a.control:hover .iconConnectorCart {background-position: -104px -48px;}

			.connectorThemeA .shoppingCartContext a.control:hover .iconCart,
			.connectorThemeA .shoppingCartContext a.control:hover .iconConnectorCart {
				background-position: -596px -120px;
				position : relative;
				top: -3px;
			}
			
		/* iconConnectorMagnifyingGlass */
		.connectorThemeA .iconMagnifyingGlass,
		.connectorThemeA .iconConnectorMagnifyingGlass {
			width: 38px;
			height: 38px;
			background-position: -596px -10px;
		}
		
		.searchContext a.control { padding-left: 6px; padding-right: 4px; }
		.toolsContextActive .searchContext a.control { padding-left: 14px; padding-right: 3px; }		

		.searchContext a.control.active .iconMagnifyingGlass,
		.searchContext a.control:hover .iconMagnifyingGlass,
		a.control:hover .iconMagnifyingGlass,
		a.control.active .iconMagnifyingGlass,
		.buttonConnector .iconConnectorMagnifyingGlass,
		a.control:hover .iconConnectorMagnifyingGlass,
		a.control.active .iconConnectorMagnifyingGlass {
			background-position: -596px -45px;
			position: relative;
			top: -3px;
		} /* #! need to specify new theme - white theme */

		.buttonConnectorThemeC .iconConnectorMagnifyingGlass {background-position: -83px -26px;}	

		/* Search context */
		.searchContext a.control {
			padding-right: 10px;	
		}

		/* iconConnectorLocator */
		/* iconConnectorLocator */
		.iconConnectorLocator {
			width: 38px;
			height: 38px;
			background-position: -602px -147px;
		}
		.locatorContext a.control.last { 
			padding-top: 0;
			padding-left: 0;
			padding-bottom: 30px; 
		}
		.toolsContextActive .locatorContext a.control.last { padding-left: 0; }

		.connectorThemeA .locatorContext a.control:hover .iconConnectorLocator,
		.connectorThemeA .locatorContext a.control.active .iconConnectorLocator {
			background-position: -602px -185px;
		}

		#flyOutConnectorLocator {
			width: 498px;
			left: -310px;
			top: 54px;		
		}
		#flyOutConnectorLocator input {
			float: left; margin-right: 10px; width: 355px; margin-bottom: 0;			
		}
		#flyOutConnectorLocator .flyOutConnectorArrow {
			margin-left: 281px;	
		}
		#flyOutConnectorLocator a.buttonConnector { float: left; }
		#flyOutConnectorLocator .formGroupConnector {margin-bottom: 0.7em;}
		
		#flyOutConnectorLocator .labelOver { font-size: 16px; top: 14px; }

		/* iconConnectorMail */
		.iconConnectorMail, .iconConnectorLetterA {background-position: -154px -24px; width: 20px;}
			.loginContext .iconMail, .loginContext .iconLetterA,
			.loginContext .iconConnectorMail, .loginContext .iconConnectorLetterA {top: -4px; vertical-align: top;}
			
		/* iconConnectorChatBubble */
		.iconConnectorChatBubble {background-position: -177px -21px; top: 0;}
			/* iconConnectorChatBubbleA */
			.iconConnectorChatBubbleA {background-position: -405px -108px;}
		
		/* iconConnectorClose */
		.iconConnectorClose {background-position: -130px -50px;}
		
		/* social media iconConnectors (facebook, twitter, etc.) */
		.iconConnectorFacebook {background-position:-82px -96px;}
		.iconConnectorTwitter {background-position:-105px -96px;}
		.iconConnectorGoogle {background-position:-129px -96px;}
		.iconConnectorYoutube {background-position:-153px -48px}
			.active .iconConnectorFacebook, .hover .iconConnectorFacebook {background-position:-82px -120px;}
			.active .iconConnectorTwitter, .hover .iconConnectorTwitter {background-position:-105px -120px;}
			.active .iconConnectorGoogle, .hover .iconConnectorGoogle {background-position:-129px -120px;}
			.active .iconConnectorYoutube, .hover .iconConnectorYoutube {background-position:-153px -73px;}
		
		/* iconLetter */
		.iconConnectorLetter {background-position: -177px -39px;}
		
		/* iconPrinter */
		.iconConnectorPrinter {background-position: -177px -58px;}
		
		/* iconHouse */
		.iconConnectorHouse {background-position: -196px -79px;}
		
		/* iconConnectorPhone */
		.iconConnectorPhone {background-position: -437px -108px;}

		/* iconConnectorBag */
		.iconConnectorBag {background-position: -469px -108px;}
		
		/* iconConnectorText */
		.iconConnectorText {background-position: -501px -108px;}
		
		/* .iconConnectorMapPin */
		.iconConnectorMapPin {background-position: -405px -140px;}
		
		/* Blue exclamation mark in blue border circle */
		.iconConnectorExclamation {background-position: -128px -143px;}
		
		
		/* iconVisa */
		.iconConnectorVisa {background-position: -406px -174px;}
		
		/* iconMastercard */
		.iconConnectorMastercard {background-position: -453px -174px;}
		
		/* iconAmex */
		.iconConnectorAmex {background-position: -501px -174px;}
		
		/* iconSchedule */
		.iconConnectorSchedule {
			width: 31px; 
			height: 31px;
			background-position: -533px -108px;
		}
		/* iconHeadset */
		.iconConnectorHeadset {
			width: 31px; 
			height: 31px;
			background-position: -533px -140px; 
		}
		
		
	/* per-context */
	.buttonConnector .iconConnector {margin-right: 5px;}
	
	
/* =messageConnector */
.messageConnector {
    position: relative;
}
.messageConnectorThemeA,
.messageConnectorThemeB, 
.messageConnectorThemeC, 
.messageConnectorThemeD {padding-left: 21px;}
	.messageConnectorTitle {color: #fff; margin-bottom: 0.25em;}
	
	.messageConnectorExtra1 {
		height: 15px;
		width: 15px;
		top: 0; left: 0px;
		background-position: 15px 15px; /* The position 15px 15px is to put the default background image wihtout triggering it's sprite and limit the number of selectors used */
	}

	/* per-context */
	.loginContext .message,
	.loginContext .messageConnector {font-size: 0.916em; line-height: 1.2em;}
		.loginContext .messageTitle,
		.loginContext .messageConnectorTitle {color: #212121;}

	.messageThemeA .messageExtra1,
	.messageConnectorThemeA .messageConnectorExtra1 {background-position:0px -48px;} /* Red "!"" */
	.messageConnectorThemeB .messageConnectorExtra1 {background-position:-16px -48px;} /* Green "Check" */
	.messageConnectorThemeC .messageConnectorExtra1 {background-position:-32px -48px;} /* Yellow "!"" */
	.messageConnectorThemeD .messageConnectorExtra1 {background-position:-48px -48px;} /* Blue "i" */

	/* Migration of new message in NMO */
	.box .message,
	.messageTitle  {
		display: inline-block; position: relative;
	}	
	.messageTitleExtra1 { position: absolute; }

	/* New icons 2013 December */	
		.messageThemeK,
		.messageThemeL,
		.messageThemeM,
		.messageThemeN,
		.messageThemeO,
		.messageThemeP {
			padding-left: 34px;
		}
			/* Valid Green */
			.messageThemeK .messageTitleExtra1 {height: 14px; width: 24px; left: -34px; background-position: -283px -294px;}
			
			/* Warning Yellow */
			.messageThemeL .messageTitleExtra1 {height: 24px; width: 24px; left: -34px; background-position: -306px -289px;}
			
			/* Error red */
			.messageThemeM .messageTitleExtra1 {height: 24px; width: 24px; left: -34px; background-position: -330px -289px;}
			
			/* Info Blue */
			.messageThemeN .messageTitleExtra1 {height: 24px; width: 24px; left: -34px; background-position: -354px -289px;}
			
			/* Queston Blue */
			.messageThemeO .messageTitleExtra1 {height: 24px; width: 24px; left: -34px; background-position: -378px -289px;}

			/* Warning Yellow with white stroke */
			.messageThemeP .messageTitleExtra1 {height: 26px; width: 27px; left: -34px;}

		
	/* increases icon size (only supported icons) */
	
	/* if no other size are specified for a particular icon style, display nothing (moves sprite out of view) */
	.messageFunctionA .messageTitleExtra1,
	.messageFunctionB .messageTitleExtra1 {
		background-position: -100% -100%;
	}
	
	.messageFunctionA.messageThemeK .messageTitleExtra1 {height: 24px; background-position: -402px -286px;}
	.messageFunctionA.messageThemeL .messageTitleExtra1 {background-position: -427px -286px;}
	.messageFunctionA.messageThemeM .messageTitleExtra1 {background-position: -452px -286px;}
	.messageFunctionA.messageThemeN .messageTitleExtra1 {background-position: -477px -286px;}
	.messageFunctionA.messageThemeO .messageTitleExtra1 {background-position: -502px -286px;}
	.messageFunctionA.messageThemeP .messageTitleExtra1 {background-position: -566px -45px;}

	.messageFunctionB {padding-left: 60px; min-height: 42px;}
	.messageFunctionB .messageTitleExtra1 {
		left: -60px;
		top: 0;
		height: 42px;
		width: 42px;
	}

	.messageFunctionB.messageThemeK .messageTitleExtra1 {background-position: -403px -243px;}
	.messageFunctionB.messageThemeL .messageTitleExtra1 {background-position: -445px -243px;}
	.messageFunctionB.messageThemeM .messageTitleExtra1 {background-position: -488px -243px;}
	.messageFunctionB.messageThemeN .messageTitleExtra1 {background-position: -531px -248px;}
	.messageFunctionB.messageThemeO .messageTitleExtra1 {background-position: -545px -205px;}	
	
/* =actionLink */
.actionLink {position: relative; display: inline-block;}

/* =box : generic white content box */
.boxConnector, .boxConnectorHeader, .boxConnectorHeader .aside, 
.boxConnectorContent, .boxConnectorFooter {
	position: relative;
}
.boxConnector {
	background-color: #fff;
	border: 1px solid #cecece;
	margin-bottom: 20px;
}
	.boxConnectorHeader {
		border-bottom: 1px solid #cfcfcf;
	}
		.boxConnectorHeaderTitle {
			margin: 0; 
			padding: 0px; 
			/* width: 70%; */
			float: left;
		}
			/* title vertical centering */
			.boxConnectorHeaderTitle h1,
			.boxConnectorHeaderTitle h2,
			.boxConnectorHeaderTitle h3,
			.boxConnectorHeaderTitle h4,
			.boxConnectorHeaderTitle h5,
			.boxConnectorHeaderTitle h6 {
				line-height: 21px; /* this needs to be the height of the header minus its top/bottom padding */
				padding: 0px; 
				margin: 0px;
			}

		.boxConnectorHeader .aside {
			float: right; 
			/* width: 30%; */
			text-align: right;
		}
			/* per-context */
			.boxConnectorHeader .aside .button {margin-bottom: 0; top: 2px;}
			.boxConnectorHeader .aside .formGroup {top: 9px;}
	
	.boxConnectorContent img {display: block;}
	
.boxConnectorHeader, .boxConnectorFooter {
	min-height: 21px;
	background: #fbfbfb url(../images/bg_gradient_i.png) repeat-x 0 bottom;
}
.cssgradients .boxConnectorHeader, .cssgradients .boxConnectorFooter {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #eeeeee 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #ffffff 0%,#eeeeee 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #ffffff 0%,#eeeeee 100%); /* W3C */
}

.boxConnectorFooter {
	border-top: 1px solid #e0e0e0;
}

	/* per-context */
	.boxConnectorHeader .padder, 
	.boxConnectorFooter .padder {
		padding-top: 10px;
		padding-bottom: 10px;
	}

.boxConnectorExtra1, .boxConnectorExtra2, .boxConnectorExtra3, .boxConnectorExtra4 {z-index: 1;}	

/* #! Box in box */
.borderradius .boxConnector .boxConnector .boxHeader {
	-webkit-border-radius: 4px 4px 0 0; 
	border-radius: 4px 4px 0 0; 
}
.borderradius .boxConnector .boxConnector .boxConnectorFooter {
	-webkit-border-radius: 0 0 4px 4px; 
	border-radius: 0 0 4px 4px; 		
}

	/* per-context */
	/* #! Hardcoding height to simulate "equalizing" - very specific - do not re-use */
	#flyOutShop .columnGroup .columnConnector .boxConnector {height: 492px; margin-bottom: 0;}


/* =aside */
.asideConnector {
	position: absolute;
	top: 0; 
	right: 0;
}	
	.headerConnector .asideConnector {bottom: 12px; top: auto;}
	.connector .asideConnector, .connector .aside {top: 6px;}


/* =item : any block of content with an figure (image); can be aligned to the left/right/bottom; image can also be placed behind the text to the left/right side */
.itemConnector {
	clear: both;
	position: relative;
}
	.itemConnectorContent {
		overflow: hidden;
	}
	.itemConnectorFigure {
		position: relative;
		float: left;
		margin-right: 10px;
	}
	
/* itemFunctionA : vertically float the item content (no floats) *Transitionned for old markup* */		
.itemConnectorFunctionA .itemConnectorFigure,
.itemConnectorFunctionA .itemConnectorContent {
	display: inline-block;
	vertical-align: middle;
}
	.itemConnectorFunctionA .itemConnectorFigure {float: none;}
	.itemConnectorFunctionA .itemConnectorContent {
		position: relative;
		width: 45%; /* <- default, if need to tweak it - use utility class width[1-100] */
	}
		/* any margin or padding with kill the "vertical" centering of the item */
		.itemConnectorFunctionA .itemConnectorContent p {
			margin-bottom: 0;
		}	

	
/*:: =========================================================================== */
/*:: ==5.0 ==Navigation :::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */	
/* =navigation : basically a context to define the third/fourth navigation level of the site */	
#navigationMain, .navigationMain {
	padding: 15px 15px 12px 15px;
	border-bottom: 1px solid #ccc;
	background: #ebebeb url(../images/bg_gradient_o.png) repeat-x 0 top;

	-webkit-border-radius: 4px 4px 0 0; 
	border-radius: 4px 4px 0 0; 
}
	.cssgradients #navigationMain, 
	.cssgradients .navigationMain {
		background: rgb(255,255,255); /* Old browsers */
		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(250,250,250,1) 20%, rgba(236,236,236,1) 55%, rgba(235,235,235,1) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(20%,rgba(250,250,250,1)), color-stop(55%,rgba(236,236,236,1)), color-stop(100%,rgba(235,235,235,1))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(250,250,250,1) 20%,rgba(236,236,236,1) 55%,rgba(235,235,235,1) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(250,250,250,1) 20%,rgba(236,236,236,1) 55%,rgba(235,235,235,1) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(250,250,250,1) 20%,rgba(236,236,236,1) 55%,rgba(235,235,235,1) 100%); /* IE10+ */
		background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(250,250,250,1) 20%,rgba(236,236,236,1) 55%,rgba(235,235,235,1) 100%); /* W3C */
	}
	
	#navigationMain .iconArrow, #navigationSub .itemListFigure,
	.navigationMain .iconArrow, .navigationSub .itemListFigure {
		background-image: url(../images/bg_navigationSprite_b.png);
	}
	#navigationMain .iconArrow,
	.navigationMain .iconArrow {
		display: none;
		position: absolute;
		left: 50%;
		margin-left: -16px;
		bottom: -21px;
		width: 32px;
		height: 25px;   
		background-position: 0 -123px; 
		z-index: 1;
	}
		#navigationMain .active .iconArrow,
		.navigationMain .active .iconArrow {
			display: block;	
		}

#navigationSub,
.navigationSub {
	position: relative;
	padding-top: 10px;
	padding-bottom: 9px;
	background: #525252 url(../images/bg_a.png) repeat-x 0 0;
}
	#navigationSub .itemList,
	.navigationSub .itemList {
		padding-left: 15px;
	}
		#navigationSub .itemList li a,
		.navigationSub .itemList li a {
			font-size: 1em;
		}
			/* per-context */
			#navigationSub .itemListFigure,
			.navigationSub .itemListFigure {
				background-color: transparent;
				background-repeat: no-repeat;
				height: 43px;
				width: 60px;
			}
				#navigationLTEDevices,
				#navigationAndroid, 
				#navigationApple, 
				#navigationBlackBerry, 
				#navigationWindows, 
				#navigationPhones,
				#navigationTablets, 
				#navigationSimCards, 
				#navigationAllDevices {
					width: 5.8333em; /* 70px */
				}
				#navigationAllDevices {
					width: 7.25em; /* 87px */
				}
				
					/* Different product images */
					#navigationLTEDevices .itemListFigure {
						background-position: 0 -10px;
					}
					#navigationAndroid .itemListFigure {
						background-position: -61px -10px;
					}
					#navigationApple .itemListFigure {
						background-position: -122px -10px;
					}
					#navigationBlackBerry .itemListFigure {
						background-position: -183px -10px;
					}
					#navigationWindows .itemListFigure {
						background-position: -244px -10px;
					}
					#navigationPhones .itemListFigure {
						background-position: -305px -10px;
					}
					#navigationTablets .itemListFigure {
						background-position: -366px -10px;
					}
					#navigationSimCards .itemListFigure {
						background-position: -427px -10px;
					}
					#navigationAllDevices .itemListFigure {
						width: 65px;
						background-position: -11px -72px;
					}

/* Auto centered float items */				
#navigation .itemList,
.navigation .itemList {
	position: relative; /* <- makes sure that we can move the item, might re-overwrite already declared position */
	float: right;
	right: 50%;
	top: 0;
	width: auto;
}
	#navigation .itemList li,
	.navigation .itemList li {
		float: left;
		position: relative; /* <- makes sure that we can move the item, might re-overwrite already declared position */
		left: 50%;		
	}

	
	
/*:: =========================================================================== */
/*:: ==6.0 ==UI :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
/* =header : contains the page main title *SPECIFIC TO TRANSITION TEMPLATES ONLY* */

.headerConnector {
	position: relative;
	/*min-height: 3.333em;  40px */
	min-height: 0;
	margin-top: 14px;
	margin-bottom: -17px;
}	
	.headerConnector .asideConnector {bottom: 6px;}
	
	/* special styles exclusively for the "fake" H1 of the page */
	.headerTitleConnector, .headerConnector h1 {
		vertical-align: baseline;
		display: inline-block;
	}
	.headerTitleConnector {
		position: relative;
		height: 0.8235em; /* 28px/34px - 34px comes from the font-size/height of its parent; in this case the "headingType1" */
		line-height: 0.8235em; /* same as its height */
		padding-right: 12px;
		margin-bottom: 0;
	}
	.headerConnector h1 {
		line-height: 15px;
		margin-left: 7px;
		position: relative;
		letter-spacing: 0;
		
		/* not using fontFace */
		font-family: Helvetica, Arial, sans-serif;
	}
	.headerConnector .headingType1 {
		font-size: 2.833em; /*34px*/
	}
	.headerConnector .headingType6 {
		font-size: 1em; /*12px*/
		margin-bottom: 0.333em;
	}


/* =breadcrumb */
.breadcrumb {
	overflow: hidden; 
	text-overflow: ellipsis; 
	white-space: nowrap;
}
	.footerHeader .breadcrumb {
		position: relative;
		padding-top: 14px;
		padding-bottom: 5px;
		color:#212121;
	}
	

/* =itemList */
.itemList, .itemList li {position: relative; float: left; margin-bottom: 0;}
	.itemList li {
		background-image: none;
		padding: 0 5px;
	}
		/*.itemList a, .itemList a:link {color: #fff;}*/
		.itemList a {
			position: relative;
			display: block;
			padding-top: 8px;
			padding-bottom: 8px;
			margin-right: 8px;
			margin-left: 8px;
			font-size: 1.166em;
			text-align: center;
		}
		.itemList .last {margin-right: 0;}
		
	.itemListFigure {
		display: block; 
		margin: 0 auto;
		margin-bottom: 3px;
	}
	
	/* itemListThemeA, itemListThemeB : relatively similar in terms of behavior (simple visual change) */
	.itemListThemeA .active a,
	.itemListThemeA .itemListExtra1,
	.itemListThemeA .itemListExtra3,
	.homePageContext .itemListThemeA a:hover,
	.homePageContext .itemListThemeA a:hover .itemListExtra1,
	.homePageContext .itemListThemeA a:hover .itemListExtra3,
	.itemListThemeB .itemListExtra1, 
	.itemListThemeB .itemListExtra3	{
		background-image: url(../images/bg_miscSprite.png);
	}
	.itemListThemeA a:link, 
	.itemListThemeA a {
		color: #0066a4;
	}
	.itemListThemeA .active a:link, 
	.itemListThemeA .active a {
		color: #212121;
	}
			
	.itemListThemeA li,
	.itemListThemeB li {
		padding-left: 0;
		padding-right: 0;
		
		/* value needs to compensate for both "active" state corners (left/right) which are 7px each, so 14px total - see itemListThemeB's extras below */
		margin-right: 9px;
	}
		.itemListThemeB .active {
			background-repeat: repeat-x;
			background-position: 0 1px;
			background-image: url(../images/bg_shadow_a.png);
		}
		
		/* sets the "active" color */
		.itemListThemeA .active,		
		.itemListThemeA .active .itemListExtra1, 
		.itemListThemeA .active .itemListExtra3 {
			background-color: #e0e0e0;
		}
		.itemListThemeB .active,
		.itemListThemeB .active .itemListExtra1, 
		.itemListThemeB .active .itemListExtra3 {
			background-color: #303030;
		}
	
	.itemListThemeA a,
	.itemListThemeB a {
		border-top: 1px solid transparent;
		margin-left: 0;
		margin-right: 0;
		padding-left: 12px;
		padding-right: 12px;
		text-shadow: 0px 1px 1px #000; /* #! group same shadows! */ 
	}
		.itemListThemeA a {text-shadow: none;}
		
		.itemListThemeA .itemListExtra1, 
		.itemListThemeA .itemListExtra3,
		.itemListThemeB .itemListExtra1, 
		.itemListThemeB .itemListExtra3 {
			background-repeat: no-repeat;
			top: 0;
		}
		
		/* Active state */
		.itemListThemeA .active a, 
		.itemListThemeA .itemListExtra2,
		.itemListThemeA .itemListExtra4 {
			background: transparent url(../images/bg_gradientMask_c.png) repeat-x 0 top; /* <- needs to be top absolutely - do not even think about changing it */
			
			/* scales depending on the height of the element - see IEs css for filters properties */
			background-size: auto 100%;
		}
		
		.itemListThemeB .active a, 
		.itemListThemeB .itemListExtra2, 
		.itemListThemeB .itemListExtra4 {
			background: transparent url(../images/bg_gradientMask_b.png) repeat-x 0 top; /* <- needs to be top absolutely - do not even think about changing it */
			
			/* scales depending on the height of the element - see IEs css for filters properties */
			background-size: auto 100%;
		}

		.itemListThemeA .active a,
		.itemListThemeB .active a {
			position: static;
		}
			.itemListThemeA .active a {border-color: #bababa;}
			.itemListThemeB .active a {border-color: #686868; font-weight: bold;}
			
			.itemListThemeA  .itemListExtra1,
			.itemListThemeA  .itemListExtra2,
			.itemListThemeA  .itemListExtra3,
			.itemListThemeA  .itemListExtra4,
			.itemListThemeB .itemListExtra1,
			.itemListThemeB .itemListExtra2,
			.itemListThemeB .itemListExtra3,
			.itemListThemeB .itemListExtra4 {
				height: 100%;
				width: 7px;
			}
				/* This is the masks for the side corners */
				.itemListThemeA .itemListExtra2,	.itemListThemeA .itemListExtra4,
				.itemListThemeB .itemListExtra2,	.itemListThemeB .itemListExtra4 {
					bottom: 0;
				}
				
				.itemListThemeA .itemListExtra1, 
				.itemListThemeA .active .itemListExtra1 {background-position: -50px -238px;}
				.itemListThemeA .itemListExtra3, 
				.itemListThemeA .active .itemListExtra3 {background-position: -58px -238px;}
				.itemListThemeB .active .itemListExtra1 {background-position: -34px -238px;}
				.itemListThemeB .active .itemListExtra3 {background-position: -42px -238px;}
			
	.itemListThemeB li a, .itemListThemeB .active a {
		color: #fff;
	}
	
	/* Background-size equivalent for IEs : this is not included in the conditional IE css because of transition needs, otherwise move them */
	.itemListThemeA .active a, 
	.itemListThemeA .active .itemListExtra2, 
	.itemListThemeA .active .itemListExtra4 {
		/* This needs to be an absolute path to work */
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/web/resources/images/bg_gradientMask_c.png',sizingMethod='scale');
	}
	.itemListThemeB .active a, 
	.itemListThemeB .active .itemListExtra2, 
	.itemListThemeB .active .itemListExtra4 {
		/* This needs to be an absolute path to work */
		filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/web/resources/images/bg_gradientMask_b.png',sizingMethod='scale');
	}
		/* For Production file path : because filter's URL parameter seems to work only with an absolute path */
		#bellShop .itemListThemeA .active a, 
		#bellShop .itemListThemeA .active .itemListExtra2, 
		#bellShop .itemListThemeA .active .itemListExtra4 {
			/* This needs to be an absolute path to work */
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/styles/web/resources/images/bg_gradientMask_c.png',sizingMethod='scale');
		}
		#bellShop .itemListThemeB .active a, 
		#bellShop .itemListThemeB .active .itemListExtra2, 
		#bellShop .itemListThemeB .active .itemListExtra4 {
			/* This needs to be an absolute path to work */
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/styles/web/resources/images/bg_gradientMask_b.png',sizingMethod='scale');
		}	
		
	/* per-context */
	/* When in homepageContext, forces itemListThemeA styles to legacy one (non-flexible css) */
	/* width = (grid6 - padder (left/right)) / number of "li" */
	.homePageContext .itemListThemeA li {
		width: 146px;
		margin-right: 0;
	}
		.homePageContext .itemListThemeA a {
			border-top: 0;
			padding-left: 7px;
			padding-right: 7px;
			margin-left: 9px;
			margin-right: 9px;
		}
			.homePageContext .itemListThemeA a:hover {
				background-color: transparent;
				background-repeat: repeat-x;
				background-position: 0 -798px;
			}
				.homePageContext .itemListThemeA a:hover .itemListExtra1, 
				.homePageContext .itemListThemeA a:hover .itemListExtra3 {
					display: block;
					top: 0;
					width: 9px;
					height: 32px;
					background-color: transparent;
					background-repeat: no-repeat;
					background-position: -38px -54px;
				}
					.homePageContext .itemListThemeA a:hover .itemListExtra1 {left: -9px;}
					.homePageContext .itemListThemeA a:hover .itemListExtra3 {right: -9px; background-position: -52px -54px;}
	
	/* itemListThemeC : buttons-like style */
	.itemListThemeC li {
		padding: 0; 
		margin: 0 5px 0 0;
	}
		.itemListThemeC a {
			padding: 5px 6px;
			margin-left: 0;
			margin-right: 0;
			border: 1px solid #b2b2b2;
			background-color:#e9e9e9;
			
			box-shadow: inset 0px 1px 0px 0px #fff;
			-webkit-box-shadow: inset 0px 1px 0px 0px #fff;
		}
		
	/* itemListThemeD : simple blueish theme (icon arrow support, special content formatting) */
	.itemListThemeD {
		padding-bottom: 40px;
	}
		.itemListThemeD li, 
		.itemListThemeD .last, 
		.itemListThemeD li a {
			padding-left: 0;
			padding-right: 0;
			margin-left: 0;
			margin-right: 0;
		}
			.itemListThemeD li a,
			.itemListThemeD .wrap {
				color: #555; /* <- must be redeclared due to cascading style priority */
				padding: 20px;
				font-size: inherit;
				line-height: 1.583em;
				overflow: hidden; /* <- this clears the floats within, if it causes issues - use a div clearer instead */
			}
				/* specific styles for disabled state */
				.itemListThemeD .disabled, 
				.itemListThemeD .disabled a, 
				.itemListThemeD .disabled .wrap, 
				.itemListThemeD .disabled span {color: inherit;}
				
			.itemListThemeD .itemListContent,
			.itemListThemeD .itemListAside {
				display: inline-block;
				vertical-align: top;
			}
				.itemListThemeD .itemListContent {
					float: left;
					text-align: left;
				}
				.itemListThemeD .itemListAside {
					float: right;
					text-align: right;
				}
			
			/* Pointing arrow styles, change icon class here if the arrow's "look" changes */
			.itemListThemeD .iconArrowC {
				display: none;
				position: absolute;
				top: 50%;
				right: -1px;
				margin-top: -14px;
			}
				
			/* active/hover states : background image uses the same as its sideBar's theme, see bell.core.css */
			.itemListThemeD .active a,
			.itemListThemeD li a:hover {
				background-color: #dae8f1;
				background-position: right top;
				background-repeat: repeat-y;
			}
			.itemListThemeD .active a,
			.itemListThemeD .active .obsolete {
				color: #212121; /* <- must be redeclared due to cascading style priority */
			}
				/*.itemListThemeD .active .emphasis {color: inherit;}*/
				.itemListThemeD .active .iconArrowC {display: block;}
				.itemListThemeD li a:hover .itemListContent {text-decoration: none;}		
	
	
	/* =itemListFunction */
	
	/* itemListFunctionA 
	.itemListFunctionA, .itemListFunctionA li, .itemListFunctionA a  {
		float:none;
	}
		.itemListFunctionA li {
			width:100%;
			display:table;
		}
		.itemListFunctionA li a {
			display:table-cell;
			vertical-align:middle;
			width:100%;
		}*/
	
	/* =itemListAlignMiddle	: formats itemListContent and itemListFigure
		DEPRECATED : use "itemListFunctionA" instead. */
	.itemListAlignMiddle a, 
	.itemListFunctionA a {padding-bottom: 0;}
	
		.itemListAlignMiddle .itemListFigure,
		.itemListAlignMiddle .itemListContent,
		.itemListFunctionA .itemListFigure,
		.itemListFunctionA .itemListContent {display: inline-block; float: none;}
			
		.itemListAlignMiddle .itemListContent,
		.itemListFunctionA .itemListContent {vertical-align: middle;}

	/* itemListFunctionB */
	.itemListFunctionB, 
	.itemListFunctionB li, 
	.itemListFunctionB a  {
		float: none;
		display: block;
	}
		
/* =divider : vertical separator */
.divider, .dividerConnector {
    background-color: #CECECE;
    height: 100%;
    position: absolute;
    right: -6px;
    top: 0;
    width: 1px;
}
	.dividerThemeA, .dividerConnectorThemeA {
		border-left: 1px solid #fff;
		border-right: 1px solid #fff;
	}
	.dividerThemeB {
		height: 80%;
		top: 10%;
	}		
	
	.dividerThemeC {
		background: transparent url(../images/bg_shadow_left_a.png) repeat-y 0 0;
		width: 15px;
	}
	
	.stepList li .divider {right: 0;}

	/* per-context */
	.column .divider, .headerTitle .divider, .headerTitleConnector .divider {
		right: 0;
	}
		.column .columnContent .divider {
			right: 15px; /* shoud be the same value as columnContent's margin-right */
		}
		/* not ideal but situational fix only */
		.toTextCenter .columnGroup[class*="Split"] .columnContent .divider,
		.toTextCenter[class*="Split"] .columnContent .divider {
			right: 7px;
		}
		
	.slider .column .columnContent .dividerThemeC {right: -15px;}
		
	.divider .icon {
		top: 50%;
		margin-top: -15px;
		left: -15px;
	} 
	.itemList .divider, .itemList .dividerConnector {
		border-left: 1px solid #707070;
		background-color: #1a1a1a;
		right: auto;
		left: -1px;
	}
		#navigation .itemListThemeB .divider {left: -6px;}
		.toOverflowHidden .divider {height: 105%;}

/* =dividerFunctionA : aligns the divider to the left side of its container */		
.dividerFunctionA {
	right: auto;
	left: 0;
}
	.columnContent .dividerFunctionA {
		left: -15px;
	}
	
/* =footer : footer of site; serves as contexter (very specific styles) */
.footer {
	position: relative;
	background: #fff url("../images/bg_gradient_m.png") repeat-x left bottom;
	margin-bottom: -20px; /* <- this fixes a strange bottom white space bug in IE and Chrome */
	min-height: 290px;
}
	.footer .textList li {margin-bottom: 15px;}
	
	.footerHeader, .footerNavigation {margin-bottom: 20px;}
		.footerHeader .formGroupConnector, 
		.footerHeader .inputGroup, 
		.footerHeader .inputGroup input {
			margin-bottom: 0;
		}
		.footerHeader .formGroupConnector {float: right;}
		.footerHeader .formAsideConnector {margin-right: 0;}
			.footerHeader .formAsideConnector .buttonConnector {top: -1px;}
	
	.footerContent p {margin-bottom: 5px;}
	.footerContent .columnGroup .column {margin-bottom: 0;}
	
/* footerNavigation */
.footerNavigation .iconConnectorArrow, 
.footerNavigation .listViewConnector .listViewConnectorFigure {background-image: url("../images/bg_navigationSprite_small_a.png");}
	.footerNavigation .iconConnectorArrow {
		display: none;
		position: absolute;
		background-position: -107px -847px;
		top: 50%; margin-top: -12px;
		right: -22px;
		left: auto; margin-left: 0;
		height: 25px;
		width: 15px;
	}
	
	.footerNavigation .listView a, .footerNavigation .listViewConnector a {z-index: 1;}
		.footerNavigation .listView a .listViewContent, .footerNavigation .listViewConnector a .listViewConnectorContent {width: 70px; font-size: 1.333em;}
		.footerNavigation .listView .listViewFigure, .footerNavigation .listViewConnector .listViewConnectorFigure {width: 80px; height: 57px;}
			
			/* footer LOB icons */
			/* shop */
			#shopMobilityFooter .listViewFigure, #shopMobilityFooter .listViewConnectorFigure {background-position: 0 0;}
			#shopInternetFooter .listViewFigure, #shopInternetFooter .listViewConnectorFigure {background-position: 0 -60px;}
			#shopTvFooter .listViewFigure, #shopTvFooter .listViewConnectorFigure {background-position: 0 -110px;}
			#shopHomephoneFooter .listViewContent, #shopHomephoneFooter .listViewConnectorContent {width: 95px;}
			#shopHomephoneFooter .listViewFigure, #shopHomephoneFooter .listViewConnectorFigure {width: 50px; background-position: -23px -167px;}
			#shopBundlesFooter .listViewFigure, #shopBundlesFooter .listViewConnectorFigure,
			#shopBundles_AliantFooter .listViewFigure, #shopBundles_AliantFooter .listViewConnectorFigure {background-position: 0 -223px;}
			
			/* support */
			#supportMobilityFooter .listViewFigure, #supportMobilityFooter .listViewConnectorFigure {background-position: 0 -563px;}
			#supportInternetFooter .listViewFigure, #supportInternetFooter .listViewConnectorFigure {background-position: 0 -622px;}
			#supportTvFooter .listViewFigure, #supportTvFooter .listViewConnectorFigure {background-position: 0 -673px;}
			#supportHomephoneFooter .listViewContent, #supportHomephoneFooter .listViewConnectorContent {width: 95px;}
			#supportHomephoneFooter .listViewFigure, #supportHomephoneFooter .listViewConnectorFigure {width: 56px; background-position: -23px -730px;}
			#supportCustomerServiceFooter .listViewFigure, #supportCustomerServiceFooter .listViewConnectorFigure {background-position: 0 -788px;}

/* footerNavigationContent */	
.footerNavigationContent {display: none; position: absolute; top: 0; padding-left: 7px;}
	.footerNavigationContent .box, .footerNavigationContent .boxConnector {margin-right: 7px;} /* <- should be same value as footerNavigationContent's padding-left (see above) */	
	
	.footerNavigationContent, .footerNavigationContent, .footerNavigationContent .box, .footerNavigationContent .boxConnector,
	.footerNavigationContent .grid3,
	.footerNavigationContent .grid4,
	.footerNavigationContent .grid5,
	.footerNavigationContent .grid6,
	.footerNavigationContent .grid7,
	.footerNavigationContent .grid8,
	.footerNavigationContent .grid9,
	.footerNavigationContent .grid10,
	.footerNavigationContent .grid11 {height: 100%;}

	.footerNavigation .grid2 .listView, .footerNavigation .grid2 .listViewConnector {min-height:340px;} /* Fixes height of the box if there is less than 5 elements */
	
	.footerNavigation li {position: static;}
	.footerNavigation h4, .footerNavigation .headingType4  {color:#212121;}
	
.footerNavigation .active .iconConnectorArrow, 
.footerNavigation .active .footerNavigationContent {display: block;}

.footerLinksContext {
	border-top: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
	padding-top: 20px;
	margin-bottom: 20px;
	margin-top: -3px;
}
	.footerLinksContext .textList {overflow: hidden;}
		.footerLinksContext .textList li {float: left; min-width: 15%;}
		
.footerNote {padding-bottom: 30px;}		
	.footerNote .columnGroup .last {float: right;}

/* No gradient background */
.footerThemeA {
	background: transparent; 
	min-height: 0;
}

/* #! exception */
.borderradius .footer .boxConnector {
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
	
/* Size in % (deprecated, use "width" instead) */
.size1  {width:  6%;} .footerLinksContext .size1  {width:  6% !important;}
.size2  {width: 13%;} .footerLinksContext .size2  {width: 13% !important;}
.size3  {width: 15%;} .footerLinksContext .size3  {width: 15% !important;}
.size4 {width: 17%;} .footerLinksContext .size4 {width: 17% !important;}
.size5  {width: 19%;}
.size6  {width: 21%;}
.size7  {width: 23%;}
.size8  {width: 25%;}
.size9  {width: 33%;}
.size10 {width: 50%;}
.size11 {width: 66%;}
.size12 {width: 75%;}


/* =toolTipConnector : this is an exact duplicate from bell.core.css */
.toolTipConnector {
	position: absolute;
	background: #fff;
	top: 8px;
	z-index: 99999999;
}
	.toolTipConnectorContent {
		margin-top: -8px;
		margin-bottom: -8px;
		z-index: 11; /* this should always be higher than toolTip's : DO NOT CHANGE since 11 is used in toolTip plugin to determinate if new toolTip or old toolTip */
	}
	.toolTipConnectorContent .bt_remove {
		position: absolute;
		top: 5px;
		right: 20px;	
	}
	
	
	.toolTipConnectorContent p {margin-bottom: 10px;}

	/* Extras */
	.toolTipConnectorExtra1, .toolTipConnectorExtra2, .toolTipConnectorExtra3, .toolTipConnectorExtra4, .toolTipConnectorExtra5, .toolTipConnectorExtra6, .toolTipConnectorArrow {
		background: transparent url(../images/bg_toolTipSprite_a.png) no-repeat 1px 0;
	}
		/* left corners */
		.toolTipConnectorExtra1, .toolTipConnectorExtra2 {left: -10px;}
		
		/* top corners */
		.toolTipConnectorExtra1, .toolTipConnectorExtra3 {top: -16px; height: 16px;}
		
		/* bottom corners */
		.toolTipConnectorExtra2, .toolTipConnectorExtra4 {bottom: -16px; height: 16px; background-position: 1px -18px;}
		
		/* right corners */
		.toolTipConnectorExtra3, .toolTipConnectorExtra4 {right: -10px; width: 20px; background-position: -956px 0;}
			/* bottom right corner */
			.toolTipConnectorExtra4 {background-position: -956px -18px;} 
			
		/* side shadows */
		.toolTipConnectorExtra5, .toolTipConnectorExtra6 {
			background-position: -977px 0; 
			background-repeat: repeat-y; 
			width: 10px;
			height: 100%;
			top: 0;
		}
			/* left side shadow */
			.toolTipConnectorExtra5 {left: -10px;}
			
			/* right side shadow */
			.toolTipConnectorExtra6 {right: -10px; background-position: -1015px 0;}
			
		.toolTipConnectorArrow {
			position: absolute;
			top: -23px;
			margin-left: -17.5px;
			
			/* Top */
			left: 50%;
			background-position: 0 -58px;
		}
			.toolTipConnectorArrow, .toolTipConnectorArrowThemeB {width: 35px; height: 16px;}
			.toolTipConnectorArrowThemeA, .toolTipConnectorArrowThemeC {
				top: 50%;
				margin-top: -17.5px;
				width: 16px;
				height: 35px;
			}
			/* Right */
			.toolTipConnectorArrowThemeA {
				right: -15px;
				left: auto;
				background-position: -45px -51px;
			}
			/* Bottom */
			.toolTipConnectorArrowThemeB {
				top: auto;
				bottom: -23px;
				background-position: -73px -64px;
			}
			/* Left */
			.toolTipConnectorArrowThemeC {
				left: 2px;
				background-position: -118px -51px;
			}

/* CSS3=toolTip */
.borderradius .toolTipConnector {
	margin-top: -8px; /* compensates for the toolTipExtra1's visual height */
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.6);
}
	.borderradius .toolTipConnectorContent {
		margin-top: 0;
		margin-bottom: 0;
	}
	.borderradius .toolTipConnectorArrow {top: -15px;}
	.borderradius .toolTipConnectorArrowThemeA, .borderradius .toolTipConnectorArrowThemeC {top: 50%;}
	.borderradius .toolTipConnectorArrowThemeB {top: auto; bottom: -15px;}	


/* Contexters */
.accessoriesContext {
	display: inline-block;
	margin: 0 auto;
}
	.accessoriesContext .column {
		width: 140px;
	}
		/*.accessoriesContext a {
			display: block;
		}*/
		.accessoriesContext img {
			max-width: 140px;
			height: auto;
		}
		
	.lightBox .accessoriesContext {display: block;}
	.lightBox .accessoriesContext .item img {max-width: 75px; height: auto;}
	.lightBox .accessoriesContext .column img {max-width: 100px; height: auto;}


/*:: =========================================================================== */
/*:: ==7.0 ==jQuery UI ::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
.connector .ui-widget-content {
	background : none;
    border: inherit;
    color: inherit;
}
.connector .ui-autocomplete {
    max-height: inherit;
	overflow: hidden;
    position: static;
}
.connector .ui-corner-all, 
.connector .ui-corner-bottom, 
.connector .ui-corner-right, 
.connector .ui-corner-br {
    border-bottom-right-radius: 4px;
}
.connector .ui-corner-all, 
.connector .ui-corner-bottom, 
.connector .ui-corner-left, 
.connector .ui-corner-bl {
    border-bottom-left-radius: 4px;
}
.connector .ui-corner-all, 
.connector .ui-corner-top, 
.connector .ui-corner-right, 
.connector .ui-corner-tr {
    border-top-right-radius: 4px;
}
.connector .ui-corner-all, 
.connector .ui-corner-top, 
.connector .ui-corner-left, 
.connector .ui-corner-tl {
    border-top-left-radius: 4px;
}

.connector .ui-menu {
    float: none;
    margin: auto;
    padding: inherit;
}

.connector .ui-menu .ui-menu-item a {
    line-height: inherit;
    padding: inherit;
}

.connector .searchContext .ui-widget-content {border: 0;}



/*:: =========================================================================== */
/*:: ==8.0 ==Media queries ::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
/* ! Everything below are very context-specific - use with precaution */

.maxHeight500 #flyOutConnectorShop, 
.maxHeight500 #flyOutConnectorSupport {width: 459px;}

@media screen and (max-height:500px) {
	#flyOutConnectorShop, #flyOutConnectorSupport {width: 459px;}
	/*.flyOutConnectorLayoutB {width: 920px;}*/
}

.maxHeight360 #flyOutConnectorShop, 
.maxHeight360  #flyOutConnectorSupport {width: 686px;}

@media screen and (max-height:360px) {
	#flyOutConnectorShop, #flyOutConnectorSupport {width: 686px;}
}

.maxHeight320 #flyOutConnectorMyServices {width: 686px;}

.maxHeight320 #flyOutConnectorShop, 
.maxHeight320 #flyOutConnectorSupport {width: 913px;}

@media screen and (max-height:320px) {
	#flyOutConnectorMyServices {width: 686px;}
	#flyOutConnectorShop, #flyOutConnectorSupport {width: 913px;}
}


/*:: =========================================================================== */
/*:: ==Transitioned Utilities (Legacy) ::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
/* Override margins - deprecated, use noMargin instead */
.resetMargin {margin: 0!important;}

/* Display the grid overlay for visual alignment */
.grid {z-index: 99;width: 100%;height: 100%;position: fixed;top: 0;left: 50%;width: 935px;margin-left: -468px;background: url(../common/all_languages/all_regions/skin/grid.png) 0 0 repeat-y transparent;}

/* Highlight one word/sentence */
.highlighted, .highlight {background: #f9ed97;}

/* Indents an element. (Mainly used on ul,p or div) */
.indent, .indent1 {margin-left: 14px;}
.indent2 {margin-left: 21px;}
.indent3 {margin-left: 28px;}
.indent4 {margin-left: 35px;}
.indent5 {margin-left: 42px;}
	/* per-context */
	.formRadio .optionGroup .indent, .formRadio .optionGroup .indent1 {margin-left: 18px;}

/* border - adds a border to the specified position (top, right, bottom, left); Does not impact the element's box size. */
.borderTop, .borderBottom, .borderRight, .borderLeft {background-image: url("../../common/all_languages/all_regions/skin/bg_border.gif") !important;}
	.borderTop {background-position:center top; background-repeat: repeat-x;}
	.borderRight {background-position:right top; background-repeat: repeat-y;}
	.borderBottom {background-position:center bottom; background-repeat: repeat-x;}
	.borderLeft	{background-position:left top; background-repeat: repeat-y;}

/* noRepeat - removes a background-image repeat */
.noRepeat{background-repeat: no-repeat !important;}

/* Removes all borders (noBord is deprecated, please use noBorder) */
.noBord, .noBorder, .border0, tr.noBorder td, tr.noBorder th {border: 0 none !important;}
.noBorderTop {border-top: 0 none !important;}
.noBorderRight {border-right: 0 none !important;}
.noBorderBottom {border-bottom: 0 none !important;}
.noBorderLeft {border-left: 0 none !important;}

/* noCorner - removes corners; Usage: mainly use with cBoxes only, using this utility class with other elements might give unexpect results. */
.noCorner {border-top: 1px solid #D6D6D6 !important; border-bottom: 1px solid #D6D6D6 !important;}
.noCorner .cBoxExtra3, .noCorner .cBoxExtra5 {display: none !important;}

/* noMargin - removes margins from an element */
.noMargin {margin: 0 !important;}
.noMarginTop {margin-top: 0 !important;}
.noMarginRight {margin-right: 0 !important;}
.noMarginBottom {margin-bottom: 0 !important;}
.noMarginLeft {margin-left: 0 !important;}

/* noPadding - removes paddings from an element */
.noPadding {padding: 0 !important;}
.noPaddingTop {padding-top: 0 !important;}
.noPaddingRight {padding-right: 0 !important;}
.noPaddingBottom {padding-bottom: 0 !important;}
.noPaddingLeft {padding-left: 0 !important;}

/* spacer a.k.a. vSpacer (deprecated) - Adding more spacers variation will also require some IE css editing. See ie6.css */
.vSpacer {height: 1px;margin-top: 4em;} .vSpacerAlt {height: 1px;margin-top: 25px;}
.spacer, .spacer1, .spacer2, .spacer3, .spacer4, .spacer5 {height: 1px; padding: 0;}
.spacer, .spacer1 {margin: 0.5em 0 !important;;} /* 1em|12px */
.spacer1-25 {margin: 0.65em 0 !important;;} /* 1.3em|15.6px */
.spacer1-5 {margin: 0.75em 0 !important;;} /* 1.5em|18px */
.spacer2 {margin: 1em 0 !important;;} /* 2em|24px */
.spacer3 {margin: 1.5em 0 !important;;} /* 3em|36px */
.spacer4 {margin: 2em 0 !important;;} /* 4em|48px */
.spacer5 {margin: 2.5em 0 !important;;} /* 5em|60px */
.spacerThemeA {margin-bottom: 0 !important;;}
.spacerThemeB {margin-top: 0 !important;;}
.spacerThemeC {margin-top: 25px !important;; margin-bottom: 0 !important;;}

/* Horizontal line to separate content (hSepar is deprecated, please use hSeparator) */
.hSepar, .hSepar1, .hSepar2, .hSepar3, .hSeparator, .hSeparator1, .hSeparator2, .hSeparator3, .hSeparator4, .hSeparator5 {overflow: hidden; height: 1px;background-color: #d6d6d6;margin:0;clear: both;display: block;line-height: 0;}
.hSepar {margin: 21px 0;}
.hSeparatorThemeA {background-color:#f5f5f5;}
.hSeparatorThemeB {border-bottom: 1px solid #fff;}
.hSeparatorThemeC {border-top: 1px solid #fff;}

/* Text handling */
.center, .textCenter, .toTextCenter {text-align:center !important;}
.left, .textLeft, .toTextLeft {text-align:left !important;}
.right, .textRight, .toTextRight {text-align:right !important;}
.justify, .textJustify, .toTextJustify {text-align:justify !important;}
.toUpperCase {text-transform: uppercase !important;}
.toLowerCase {text-transform: lowercase !important;}
.toCapitalize {text-transform: capitalize !important;}
	/* Avoids text wrapping (forces text to render on one line; this will wrap through other elements) */
	.toForceNoWrap {white-space: nowrap !important;}
		.toForceNoWrap .toolTipAction {top: -1px;}
.toTextBold {font-weight: bold !important;}
.toTextNormal {font-weight: normal !important;}
.toTextItalic {font-style: italic !important;}
.toLineThrough {text-decoration:line-through !important;}

/* Reduces opacity of an element (does not work in IE6/IE7) */
.dim, .dim1 {opacity: 0.2;}
.dim2 {opacity: 0.4;}
.dim3 {opacity: 0.6;}
.dim4 {opacity: 0.8;}

/* =toMarginRight : simple content indentation */
.toMarginRight1 {margin-right: 10px !important;}
.toMarginRight2 {margin-right: 20px !important;}
.toMarginRight3 {margin-right: 30px !important;}
.toMarginRight4 {margin-right: 40px !important;}

/* Valid/Good/Correct/Green state */
.valid, .good, .valid *, .good * {color: #22761e !important;}
	input.valid, input.good, select.valid, select.good, textarea.valid, textarea.good, .good input, .good select, select.good optgroup, select.good option, .good textarea, .valid input, .valid select, select.valid optgroup, select.valid option, .valid textarea {color: #212121 !important;}

/* Obsolete state/rebate (gives text color back do its default; set by body) */
.obsolete, .obsolete *, .rebate {color: #555 !important;}

/* Error state, Danger state */
.error, .error .sectionHeader, .error .priceTag,.error .number, .error .sectionContent, .danger, .danger .priceTag, .danger .sectionHeader, .danger .sectionContent, .danger .sectionValue, .error *, .danger * {color:#b00303 !important;}

/* Caution state */
.caution, .caution * {color: #bd8e1a !important;}

/* Unavailable state */
.unavailable, .unavailable * {color: #909090 !important;}
.unavailable .buttonDisabled span {color: #d6d6d6 !important;}

/* Vertical alignments */
.verticalAlignTop, .verticalAlignTop td, .verticalAlignTop th {vertical-align: top !important;}
.verticalAlignMiddle, .verticalAlignMiddle td, .verticalAlignMiddle th {vertical-align: middle !important;}
.verticalAlignBottom, .verticalAlignBottom td, .verticalAlignBottom th {vertical-align: bottom !important;}

/* General element sizing (per %) - Not aligned with grid */
.size0 {width: 0% !important;}
.size, .size1 {width: 25% !important;}
.size2 {width: 50% !important;}
.size3 {width: 75% !important;}

/* Forces width to take full/auto available space */
.toAutoWidth, ul.toAutoWidth .sectionHeader, ul.toAutoWidth .sectionContent {width: auto !important;}
.toFullWidth, ul.toFullWidth .sectionHeader, ul.toFullWidth .sectionContent, 
/* #!.size4, */ .sizeGroup3 .size3 {width: 100% !important;}

/* Removes Top and Bottom padding of a table row cell (this is mainly used when a <table> contains only a single row) */
tr.slimRow td, tr.slimRow th {padding-top: 0 !important; padding-bottom: 0 !important;}

/* toColumn - very context specific (contextual-utility) */
.toColumn .sectionHeader {width: 199px !important;}
.toColumn .sectionHeader h2, .toColumn .sectionHeader h3, .toColumn .sectionHeader h4, .toColumn .sectionHeader h5, .toColumn .sectionHeader h6,
.toColumn .sectionValue h2, .toColumn .sectionValue h3, .toColumn .sectionValue h4, .toColumn .sectionValue h5, .toColumn .sectionValue h6 {margin-bottom:0 !important;}
.toColumn .toColumn .sectionHeader {width: 185px !important;}
.toColumn .sectionValue {width: 110px !important; float: left !important;}
.toColumn .sectionValue .pricingOptions {padding-left: 0 !important; float: none !important;}
.toColumn .dataListThemeN li .sectionValue {float: left !important;}
.toColumn .pricingInfo p {padding-right: 0;}

.toColumnThemeA .sectionHeader {width: 71px !important;}
.toColumnThemeA .sectionValue {width: 174px !important;}
.shell .toColumnThemeA .sectionValue {width: 163px !important;}

/* Floats */
.floatNone, .toFloatNone {float: none !important;}
.floatLeft, .toFloatLeft {float: left !important;}
.floatRight, .toFloatRight {float: right !important;}
/* floatCenter - Centering floated elements; Used when floated (left/right) elements need to be centered. "centerFloat" needs to be applied to its parent element */
.floatCenter, .toFloatCenter {float: left; left: 50% !important; position: relative;}
.floatCenter > *, .toFloatCenter > * {right: 50%; position: relative; float: left;}
.toStatic {position: static !important;}
.toRelative, .floatCenterThemeA {position: relative !important;}
.toAbsolute, .floatCenterThemeB {position: absolute !important;}
	/* per-element context */
	.floatCenter .button, .toFloatCenter .button {position: relative; left: -50% !important;}
	
/* Overflow */
.toOverflowHidden {overflow: hidden !important;}
.toOverflowVisible {overflow: visible !important;}
.toOverflowAuto {overflow: auto !important;}


/*:: =========================================================================== */
/*:: ==Transitioned fixes :::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
/* Legacy tags */
.wrapHeader {*padding-top: 30px;}
/*.wrapMain {padding-top: 30px;}*/
.wrapFooter .subWrap {background-image: none; min-height: 0; margin-bottom: 0;}


/* IE7  */
/* 	Following fixes are "hacks" for IE7 that must be declared here for best compatibility with legacy markup merging (to avoid conflicts for loading 2 ie7 css files on the same template)
	Note: Look for = [#ie7] in bell.ie7.css to know which "fixes" have been duplicated. Could be cleaned up after transition phase is over. */
#navigationMain, #navigationSub,
.navigationMain, .navigationSub, .flyOutWrap, .flyOutConnectorWrap, 
.headerTitle, .header h1, .headerTitleConnector, .headerConnector h1 {*zoom: 1;}
#navigationMain .itemList, 
.navigationMain .itemList {*z-index: 2;}
.headerTitle, .header h1, .headerTitleConnector, .headerConnector h1 {*display: inline;}
.headerTitle, .headerTitleConnector {*height: 34px; *line-height: 42px;}
.header h1, .headerConnector h1 {*top: -3px; *margin-left: 10px;}
.searchContext .formTextThemeA input,
.searchContext .formTextConnectorThemeA input {*width: 483px;}	
.formTextThemeA input, .formTextConnectorThemeA input {*height: auto;}
.footerNote .itemList, .footerNote .itemList .last {*float: left;}
.connector .flyOut .columnGroup .buttonFullWidth,
.flyOutConnector .columnGroup .buttonConnectorFullWidth {*width:192px;}
#flyOutConnectorLogin .formText input,
#flyOutConnectorLogin .formTextConnector input {*width: 200px;}
.headerConnector .asideConnector {*position: absolute; *bottom: 0; *float: right;}
.connector .asideConnector {*float: right;}
.loginContext .flyOutConnector {*width: 260px;}

.itemListThemeA .active a, .itemListThemeB .active a {*width: 100%;}

/* Temporary fix in details -specifications|features tab */
.tempFixContext .mainWrapper,
.tempFixContext .capsule {
    padding-left: 19px !important;
}
.tempFixContext .capsule {
    padding-bottom: 20px !important;
}
h1.tempFixH1Context {
	font-size: 1.6em !important;	
}

@media (max-width: 1024px) {
	.outsideToolsContext {
		display: none;	
	}
}