/*!:: Bell Canada UIKit v1.6181

bell.ui-kit.css
Build Date: 11:26 AM Friday, January 09, 2015

Development Team: Son Pham, Michel Pen, Simon Buteau, Fernando Saldarriaga
Founder Team: Son Pham, Michel Pen
Contributors: Bruno-Pierre Campeau-Riberdy, Paul Thevasagayam
----------------------------------------------------------------------------
IMPORTANT NOTE:
- Anything with the tag "[bell.connector.css]" indicates that the styles for
  this component have references in bell.connector.css such as aliases names,
  extra styles or simply duplications. Pay attention when modifying these 
  components because bell.connector.css would probably need to be updated too.
----------------------------------------------------------------------------
	Table of contents
	=1.0 Reset			 	: CSS basic reset
	=2.0 General		 	: basic body, headings, fonts, links styles
	=3.0 Shared		 		: shared styles (colors, properties, etc.)
	=4.0 UI			 		: Main components styles (includes CSS3 styles)
	=5.0 Misc			 	: Other uncategorized styles (contexters, etc.)
	=6.0 jQueryUI		 	: jquery ui related styles
	=7.0 Utility		 	: Utility classes (text overwrites, alignments, etc.)
	=8.0 Animation		 	: CSS3 related animations
	=9.0 Media Queries		: Media queries styles
::*/

/*:: =========================================================================== */
/*:: ==1.0 ==Reset ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain) */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*:: =========================================================================== */
/*:: ==2.0 ==General ::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
html {height: 100%;} /* ensures that "overlays" are always 100% in height - does not refresh on viewport scroll/resize */
body {
	font-style: normal;
	font-size: 75%;
	line-height: 1.333em;
	background: #fff url(../../resources/images/bg_gradient_h.png) repeat-x 0 0;
	
	/* to fix font size issue and text wrapping issue in Windows Phone */
	-ms-text-size-adjust: none;	
}
body, button, textarea {
	font-family: Helvetica, Arial, sans-serif;
}

p {margin-bottom: 20px;}

strong {font-weight: bold;}
small {font-size: 0.8571em; line-height: normal;}
h3 small,
.headingType3 small {font-size: 60%;}

dt {float: left; clear: left; margin-right: 5px;}

img {vertical-align: middle;}

ol {margin-left: 18px;}
	ol li {margin-bottom: 3px;}

/* =superscript */
sup, .superscript {
    font-size: 0.8em;
    left: 1px;
    line-height: 1.2em;
    position: relative;
    top: -6px;
	display: inline-block;
}
	/* depending on heading size, adjusts the sup size too */
	h1 sup, .headingType1 sup,
	h2 sup, .headingType2 sup,
	h3 sup, .headingType3 sup,
	h4 sup, .headingType4 sup,
	h5 sup, .headingType5 sup,
	h6 sup, .headingType6 sup {
		font-size: 0.45em;
		top: -12px;
	}
	h4 sup, .headingType4 sup {
		top: -9px;
	}
	h5 sup, .headingType5 sup,
	h6 sup, .headingType6 sup {
		font-size: 0.6em;
		top: -7px;
	}

.connector {
	z-index: 26 !important; /* DO NOT CHANGE THIS VALUE. since function $.isConnector() is using that value 26 to know if we are in connector mode with bell.core.css a.k.a bell.ui-kit.css pieuvre */	
}

/* [bell.connector.css] Fonts */
/* Bell Slim Medium 
/* Bell Slim Semi Bold 


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

.fontFaceThemeA,
h3.fontFace, .headingType3.fontFace,
h4.fontFace, .headingType4.fontFace,
h5.fontFace, .headingType5.fontFace,
h6.fontFace, .headingType6.fontFace {font-family: "BellSlimSemiBoldRegular", Helvetica, Arial, sans-serif;}

h1, h2, h3, h4, h5, h6, 
.headingType1, .headingType2, .headingType3, .headingType4, .headingType5, .headingType6 {
	position: relative;
	vertical-align: middle;
	color: #212121;
}

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



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

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

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

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

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


/* =headingThemeA : grayish gradient backgrouns (similar to a boxHeader) */
.headingThemeA {
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;	
}

/* =headingThemeB : blueish background */
.headingThemeB {
	background-color: #C8DFEF;
	font-weight: bold;
}

.headingThemeA, 
.headingThemeB {
	padding: 15px 20px;
	margin-bottom: 1.166em;
}

/* Link */
a, a:link, a:active,
.tabsList a:hover, .button:hover, .showcaseNavigation .active a:hover {text-decoration: none;}
a:hover {text-decoration: underline;}

a.headingType1, a.headingType2, a.headingType3, a.headingType4, a.headingType5, a.headingType6 {margin-bottom: inherit;}



/*:: =========================================================================== */
/*:: ==3.0 ==Shared :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
/* =Colors : color declaration order must be placed from less to most important, link/error colors don't matter. */

/* Bell blue */
a, 
.price, 
.rate, 
em,
.emphasis, 
.sideBar .formContent label,
.sideBar3 .sideBar label,
a.note,
.listViewThemeD li a,
.dataTableThemeF .active,
.grid6 h3.headingType5 a {
	color: #0066a4;
}

/* Gray */
.copyright, 
.obsolete, 
.mute,
.note {
	color: #999;
}



/* Default black */
body, 
.depreciate,
.sideBar label.depreciate,
.compareTableContext .channelName .number,
.stepList .active a,
.stepList a .number,
.header h1 {
	color: #555;
}

/* Darker black */
.messageTitle,
h1, h2, h3, h4, h5, h6, legend,
/*.headingType1, .headingType2, .headingType3, .headingType4, .headingType5, .headingType6,*/
h1 a, h2 a, h3 a, h4 a, h6 a, h6 a,
.listView a, 
.listView a.active, 
.headerTitle,
.sideBar label.active, 
.sideBar3 .sideBar label.active, 
.flyOutHeader .actionLink,
.paginationListThemeC .first a,
.paginationListThemeC .last a {
	color: #212121;
}


/* Error red */
.error,
.formError .formHeader,
.formError .formContent .message {
	color: #a00;
}







/* [bell.connector.css] =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.)
*/
.galleryExtra1, .galleryExtra2,
.tabsListExtra1, .tabsListExtra2, .tabsListExtra3, .tabsListExtra4,
.boxExtra1, .boxExtra2, .boxExtra3, .boxExtra4,
.boxNavigationExtra1, .boxNavigationExtra2,
.contentExtra1, .contentExtra2, .contentExtra3, .contentExtra4,
.messageTitleExtra1,
.listViewExtra1, .listViewExtra2, .listViewExtra3, .listViewExtra4,
.flyOutExtra1, .flyOutExtra2, .flyOutExtra3, .flyOutExtra4, .flyOutExtra5, .flyOutExtra6,
.toolTipExtra1, .toolTipExtra2, .toolTipExtra3, .toolTipExtra4, .toolTipExtra5, .toolTipExtra6,
.lightBoxExtra1, .lightBoxExtra2, .lightBoxExtra3, .lightBoxExtra4, .lightBoxExtra5, .lightBoxExtra6,
.iconListExtra1, .iconListExtra2, .iconListExtra3, .iconListExtra4 {
	position: absolute;
	background: transparent url(../images/bg_cornerSprite.png) no-repeat 0 0;
	/* default size if nothing set */
	height: 5px;
	width: 5px;
}

/* Corners only */
.listViewExtra1, .listViewExtra3, 
.contentExtra1, .contentExtra3,
.boxExtra1, .boxExtra3,
.iconListExtra1, .iconListExtra3 {top: -1px;}

.listViewExtra3, .listViewExtra4, 
.contentExtra3, .contentExtra4,
.boxExtra3, .boxExtra4,
.boxNavigationExtra2,
.iconListExtra3, .iconListExtra4 {right: -1px;}

.listViewExtra2, .listViewExtra4, 
.contentExtra2, .contentExtra4,
.boxExtra2, .boxExtra4,
.iconListExtra2, .iconListExtra4 {bottom: -1px;}

.listViewExtra1, .listViewExtra2, 
.contentExtra1, .contentExtra2,
.boxExtra1, .boxExtra2,
.boxNavigationExtra1,
.iconListExtra1, .iconListExtra2 {left: -1px;}

	.boxExtra1, .boxNavigationExtra1, .tabsListExtra1 {background-position: left -93px;}
	.boxExtra2, .tabsListExtra2 {background-position: left -118px;}
	.boxExtra3, .boxNavigationExtra2, .tabsListExtra3 {background-position: right -93px;}
	.boxExtra4, .tabsListExtra4 {background-position: right -118px;}
	
	/* on white background without borders */
	.boxThemeA .boxExtra1, .boxThemeC .boxExtra1, .boxThemeD .boxExtra1 {background-position: left -155px;}
	.boxThemeA .boxExtra2, .boxThemeC .boxExtra2, .boxThemeD .boxExtra2 {background-position: left -180px;}
	.boxThemeA .boxExtra3, .boxThemeC .boxExtra3, .boxThemeD .boxExtra3 {background-position: right -155px;}
	.boxThemeA .boxExtra4, .boxThemeC .boxExtra4, .boxThemeD .boxExtra4 {background-position: right -180px;}

	/* .listViewExtra1 {background-position: 0 0;} <- uses default, uncomment and change if needed. */
	.listViewExtra2, .contentExtra2, .iconListExtra2 {background-position: left -25px;}
	.listViewExtra3, .contentExtra3, .iconListExtra3 {background-position: right top;}
	.listViewExtra4, .contentExtra4, .iconListExtra4 {background-position: right -25px;}
		.listView a:hover .listViewExtra1, .listView .active a .listViewExtra1 {background-position: left -31px;}
		.listView a:hover .listViewExtra2, .listView .active a .listViewExtra2 {background-position: left -56px;}
		.listView a:hover .listViewExtra3, .listView .active a .listViewExtra3 {background-position: right -31px;}
		.listView a:hover .listViewExtra4, .listView .active a .listViewExtra4 {background-position: right -56px;}

/* Corners + Shadows support */
/* top corners (includes left/right) */
.flyOutExtra1, .flyOutExtra2,
.lightBoxExtra1, .lightBoxExtra2,
.toolTipExtra1, .toolTipExtra2 {width: 100%;}

/* bottom corners (includes left/right) - no shared properties for the moment */
			
/* Shadows (vertical) */
.galleryExtra1, .galleryExtra2 {
	background-image: url(../images/bg_shadowsSprite.png);
	background-repeat: repeat-y;
	height: 100%;
}

/* Elements hiding */
.footer .boxExtra1, .footer .boxExtra2, .footer .boxExtra3, .footer .boxExtra4,
.iconListVertical .iconListExtra1, .iconListVertical .iconListExtra3,
.borderradius .tabsListThemeA .first .tabsListExtra1, .borderradius .tabsListThemeA .first .tabsListExtra2, .borderradius .tabsListThemeA .last .tabsListExtra3, .borderradius .tabsListThemeA .last .tabsListExtra4,
.borderradius .tabsListThemeA .tabsListExtra1, .borderradius .tabsListThemeA .tabsListExtra2, .borderradius .tabsListThemeA .tabsListExtra3, .borderradius .tabsListThemeA .tabsListExtra4,
.borderradius .tabsListThemeA .active .tabsListExtra1, .borderradius .tabsListThemeA .active .tabsListExtra2, .borderradius .tabsListThemeA .active .tabsListExtra3,	.borderradius .tabsListThemeA .active .tabsListExtra4,
.homePageContext .contentExtra1, .homePageContext .contentExtra2, .homePageContext .contentExtra3, .homePageContext .contentExtra4,
.borderradius .listViewExtra1, .borderradius .listViewExtra2, .borderradius .listViewExtra3, .borderradius .listViewExtra4,
.borderradius .sectionThemeA .box .boxExtra1, .borderradius .sectionThemeA .box .boxExtra2, .borderradius .sectionThemeA .box .boxExtra3, .borderradius .sectionThemeA .box .boxExtra4,
.borderradius .sectionThemeC .box .boxExtra1, .borderradius .sectionThemeC .box .boxExtra2, .borderradius .sectionThemeC .box .boxExtra3, .borderradius .sectionThemeC .box .boxExtra4,
.borderradius .lightBox .box .boxExtra1, .borderradius .lightBox .box .boxExtra2, .borderradius .lightBox .box .boxExtra3, .borderradius .lightBox .box .boxExtra4,
.borderradius .boxContent .boxExtra1, .borderradius .boxContent .boxExtra2, .borderradius .boxContent .boxExtra3, .borderradius .boxContent .boxExtra4,
.borderradius .flyOutExtra1, .borderradius .flyOutExtra2, .borderradius .flyOutExtra3, .borderradius .flyOutExtra4, .borderradius .flyOutExtra5, .borderradius .flyOutExtra6,
.borderradius .lightBoxExtra1, .borderradius .lightBoxExtra2, .borderradius .lightBoxExtra3, .borderradius .lightBoxExtra4, .borderradius .lightBoxExtra5, .borderradius .lightBoxExtra6,
.borderradius .toolTipExtra1, .borderradius .toolTipExtra2, .borderradius .toolTipExtra3, .borderradius .toolTipExtra4, .borderradius .toolTipExtra5, .borderradius .toolTipExtra6,
.cssgradients .buttonExtra1 {
	display: none;
}



/* Text overflow */
.inputCustomTriggerValue,
.inputCustomSelectTriggerValue,
.compareTableContext .channelName {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}


/* [bell.connector.css] =Border-radius 4px */
.footer .box,
.borderradius .lightBox .box,
.borderradius .boxContent .box,
.cssgradients .button,
.paginationList .active a, .paginationList .first.active a, .paginationList .last.active a,
.borderradius .lightBox,
.borderradius .listView a,
.formTextThemeA input,
.formTextThemeB input {
	-webkit-border-radius: 4px;
	border-radius: 4px;
}


/* [bell.connector.css] Overall centered elements (based on total width of page) */
.wrapper {
	width: 977px; /* 975px + 2px for the borders */
	margin: 0 auto;
}


/* Auto centered float items */
.showcaseNavigation ul,
.toColumnGroupCenter {
	position: relative; /* <- makes sure that we can move the item, might re-overwrite already declared position */
	float: right;
	right: 50%;
	top: 0;
	width: auto;
}
	.showcaseNavigation ul li,
	.toColumnGroupCenter .column {
		float: left;
		position: relative; /* <- makes sure that we can move the item, might re-overwrite already declared position */
		left: 50%;		
	}
	
/* [bell.connector.css] Hides list bullets */
.stepList li,
.iconList li,
.noBullet li, 
.showcaseNavigation li, 
ul.columnGroup li, .listView li,
.formSelect .inputCustomContent li,
.dataListWrap {
	background-image: none;
	padding-left: 0;
}	
	
/* [bell.connector.css] =Backgrounds */
/* iconSprite */
.iconFigure,
.badge, .icon,
.inputCustomTrigger,
.messageTitleExtra1,
.galleryNavigation .next,
.galleryNavigation .previous,
.paginationList .next a,
.paginationList .previous a,
.slider .ui-slider-handle,
.sliderBarExtra1, .sliderBarExtra2,
.showcase .nextPrevious .next,
.showcase .nextPrevious .previous,
.toolTipContent .bt_remove span {
	background-image: url(../images/bg_iconSprite.png);
}	
/* miscSprite */
.textLabelExtra1,
.tabsListThemeA .iconArrow, 
.formSelect .inputCustom .inputCustomTriggerExtra1, .inputCustomSelectTriggerExtra1 {
	background-image: url(../images/bg_miscSprite.png);
}
/* bg_gradient_i */
.inputCustomSelectThemeA,
.flyOutFooter,
.headingThemeA,
.stepList,
.dataTableThemeD th,
.dataTableThemeJ th,
.boxHeader, .boxFooter, 
.lightBoxHeader, .lightBoxFooter, 
/*.borderradius .lightBoxHeader, .borderradius .lightBoxFooter,*/
.boxThemeE, .tabsList a, 
.listViewThemeC a,
.listViewThemeE a {
	background-color: #fff;
	background-repeat: repeat-x;
	background-image: url(../images/bg_gradient_i.png);
}

.iconGear, .iconDocument, .iconBundle, .iconArrowC,
.footerNavigation .iconArrow, 
.footerNavigation .listView .listViewFigure {
	background-image: url("../images/bg_navigationSprite_small_a.png");
}

.header .listView .listViewFigure {
		background-image: url("../images/bg_navigationSprite_a.png");
}


/*:: =========================================================================== */
/*:: ==4.0 ==UI :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
/* =wrapper : main interface wrapper */
.wrapper {
	position: relative; 
	padding-top: 29px; /* total value must equal to 30, add header's margin-top (should be 1px) */
	padding-bottom: 30px; 
}
	
	
/* =section : generic wrapper for content */
.section {
	padding: 20px 20px 0 20px;
	margin-bottom: 20px;	
}
	/* sectionThemeA : with gray gradient */
	.sectionThemeA {
		padding: 0;
		margin-bottom: -20px;
		min-height: 200px; /* should be same as "galleryMediaContent" to avoid any wrap */
	}
	
	/* sectionThemeB : gray with a bottom border */
	.sectionThemeB {
		border-bottom: 1px solid #cdcdcd;
		padding: 0;
		margin-bottom: 0;
		background-color: #EDEDED;
	}
	
	/* sectionThemeC : with slim gray gradient */
	.sectionThemeC {
		padding: 0;
		margin-bottom: -20px;
		background: #fff url(../../resources/images/bg_gradient_l.png) repeat-x 0 bottom;
	}
	
	/* sectionThemeD : with large gray gradient, used in banners mostly */
	.sectionThemeD {
		border-bottom: 1px solid #cdcdcd;
		padding: 40px 0;
		margin-bottom: 0;
		background: #f2f2f2 url(../../resources/images/bg_gradient_m.png) repeat-x 0 top;
	}
		.cssgradients .sectionThemeD {
			background: #ffffff;
			background: -moz-linear-gradient(top,  #ffffff 50%, #f4f4f4 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#ffffff), color-stop(100%,#f4f4f4));
			background: -webkit-linear-gradient(top,  #ffffff 50%,#f4f4f4 100%);
			background: -o-linear-gradient(top,  #ffffff 50%,#f4f4f4 100%);
			background: -ms-linear-gradient(top,  #ffffff 50%,#f4f4f4 100%);
			background: linear-gradient(to bottom,  #ffffff 50%,#f4f4f4 100%);
		}
	
	/* sectionThemeE : white background with top/bottom borders */
	.sectionThemeE {
		background-color: #fff;
		border-top: 1px solid #cdcdcd;
		border-bottom: 1px solid #cdcdcd;
	}

	/* sectionThemeF : white background with bottom border with limited spacing */
	.sectionThemeF {
		background-color: #fff;
		border-bottom: 1px solid #cdcdcd;
		padding-left: 0;
		padding-right: 0;
		margin-bottom: 0;
	}
	
	/* gradients */
	.sectionThemeA, .popOut {
		background: #fff url(../../resources/images/bg_gradient_e.jpg) repeat-x 0 bottom;
	}





/* [bell.connector.css] =padder : refer to "noPadding" class for additionnal padding customization */
.padder {
	padding: 20px;
}
	.padderThemeA {padding: 40px;}
	.padderThemeB {padding: 60px;}
	.padderThemeC {padding: 10px;}
	.padderThemeD {padding: 30px;}
	.padderThemeE {padding: 20px 30px;}
	.padderThemeF {padding: 40px 30px;}
	.padderThemeG {padding: 15px 20px;}
	.padderThemeH {padding: 15px;}
	.padderThemeI {padding: 40px 60px;}
	.padderThemeJ {padding: 20px 10px;}
	.padderThemeK {padding: 5px;}

	
/* [bell.connector.css] =box : generic content box */
.box, .boxHeader, .boxHeader .aside, 
.boxContent, .boxFooter,
.lightBox, .lightBoxHeader, .lightBoxHeader .aside, 
.lightBoxContent, .lightBoxFooter {
	position: relative;
}
.box, .lightBox {
	background-color: #fff;
}
.box {
	border: 1px solid #cecece;
	margin-bottom: 20px;
	min-height: 20px;
}
.flyOut .box {
	margin-bottom: 0;
}
.borderradius .flyOut .box {
	margin-bottom: 5px;
}
	.boxNavigation {position: relative;}
		.boxNavigationExtra1, .boxNavigationExtra2 {bottom: -4px;}
		.boxNavigationExtra3 {
			position: absolute; 
			display: block; 
			width: 100%; height: 100%;
			bottom: 1px; left: -1px; 
			padding-left: 1px;
			padding-right: 1px;
			z-index: -1;
		}
	
	.boxHeader, .lightBoxHeader {
		border-bottom: 1px solid #cfcfcf;
	}
	
		.boxHeaderTitle, .lightBoxHeaderTitle {
			margin: 0; 
			padding: 0px; 
			/* width: 70%; */
			float: left;
		}
			/* title vertical centering */
			.boxHeaderTitle h1, .lightBoxHeaderTitle h1, .borderradius .lightBoxHeaderTitle h1,
			.boxHeaderTitle h2, .lightBoxHeaderTitle h2, .borderradius .lightBoxHeaderTitle h2,
			.boxHeaderTitle h3, .lightBoxHeaderTitle h3, .borderradius .lightBoxHeaderTitle h3,
			.boxHeaderTitle h4, .lightBoxHeaderTitle h4, .borderradius .lightBoxHeaderTitle h4,
			.boxHeaderTitle h5, .lightBoxHeaderTitle h5, .borderradius .lightBoxHeaderTitle h5,
			.boxHeaderTitle h6, .lightBoxHeaderTitle h6, .borderradius .lightBoxHeaderTitle h6 {
				padding-top: 10px;
				padding-bottom: 10px;
				margin-bottom: 0;
			}
				/* With font face */
				.boxHeaderTitle h1.fontFace, .lightBoxHeaderTitle h1.fontFace, .borderradius .lightBoxHeaderTitle h1.fontFace,
				.boxHeaderTitle h2.fontFace, .lightBoxHeaderTitle h2.fontFace, .borderradius .lightBoxHeaderTitle h2.fontFace,
				.boxHeaderTitle h3.fontFace, .lightBoxHeaderTitle h3.fontFace, .borderradius .lightBoxHeaderTitle h3.fontFace,
				.boxHeaderTitle h4.fontFace, .lightBoxHeaderTitle h4.fontFace, .borderradius .lightBoxHeaderTitle h4.fontFace,
				.boxHeaderTitle h5.fontFace, .lightBoxHeaderTitle h5.fontFace, .borderradius .lightBoxHeaderTitle h5.fontFace,
				.boxHeaderTitle h6.fontFace, .lightBoxHeaderTitle h6.fontFace, .borderradius .lightBoxHeaderTitle h6.fontFace {
					line-height: 40px; /* this needs to be the height of the header minus its top/bottom padding */
					padding: 0px; 
					margin-bottom: 0px;
				}
		
		.toTextCenter.boxHeaderTitle {float: none;}

		.boxHeader .aside, .lightBoxHeader .aside {
			float: right; 
			/* width: 30%; */
			text-align: right;
		}
			.boxHeader .aside .toggle, .lightBoxHeader .aside .toggle {
				position: relative;
				top: 7px;
			}
			/* per-context */
			.boxHeader .aside .button, .lightBoxHeader .aside .button {margin-bottom: 0; top: 3px;}
			.boxHeader .aside .buttonThemeB, .lightBoxHeader .aside .buttonThemeB {top: 5px;}
			.boxHeader .aside .formGroup, .lightBoxHeader .aside .formGroup {top: 9px;}
			
	/* boxHeaderThemeA : Header without a background */
	.boxHeaderThemeA {
		margin-top: 10px;
		border-color: transparent;
	}
	
	/* boxContentThemeA : boxContent without a background */
	.boxContentThemeA {
		background-color:#f2f2f2;
		border-top: 1px solid #fff;
	}
	
.boxHeader, .boxFooter, 
.lightBoxHeader, .lightBoxFooter, 
.borderradius .lightBoxHeader, .borderradius .lightBoxFooter {
	min-height: 5em; /* 60px */
	background-position: 0 bottom;
}
/*.boxContent, .lightBoxContent {
	border-top: 1px solid #cecece;
	margin-top: -1px;
}
	.boxContent .box .boxContent,
	.lightBoxContent .box .boxContent,
	.boxThemeA .boxContent, 
	.boxThemeC .boxContent, 
	.boxThemeD .boxContent {border-top: 0;}*/

.boxBadge {
	position: absolute;
	top: -1px;
	right: -1px;
}

.cssgradients .boxHeader, 
.cssgradients .boxFooter {
	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 */
}



.boxHeaderThemeA,
.cssgradients .boxHeaderThemeA {
	background: none;
}

.boxHeaderThemeB,
.cssgradients .boxHeaderThemeB {
	background: #f2f2f2;
}

.boxFooter, .lightBoxFooter {
	border-top: 1px solid #cecece; /* #! was e0e0e0 */
	margin-top: -1px;
}
	/* per-context */
	.boxHeader .padder, 
	.boxFooter .padder,
	.lightBoxHeader .padder,
	.lightBoxFooter .padder,
	.borderradius .lightBoxHeader .padder {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	
/* boxThemeA : dark gray content box */
.boxThemeA, .lightBoxThemeA {background-color: #cecece;}

/* boxThemeB : light grey background with a white and grey border */
.boxThemeB {
	background: #f2f2f2;
	-webkit-box-shadow: inset 0px 0px 0px 1px #fff, 0px 0px 0px 0px rgba(0, 0, 0, .2);	
	-moz-box-shadow: inset 0px 0px 0px 1px #fff, 0px 0px 0px 0px rgba(0, 0, 0, .2);	
	box-shadow: inset 0px 0px 0px 1px #fff, 0px 0px 0px 0px rgba(0, 0, 0, .2);
}

/* boxThemeC : simple light grey background */
.boxThemeC, .boxThemeC .boxHeader {
	background-color: #f2f2f2;
}
.boxThemeC {
	border-color: #f2f2f2;
}
.boxThemeC .boxHeader {
	border-bottom: none;
	background-image: none;
}
	
/* boxThemeD : simple light blue background */
.boxThemeD {
	background-color: #c8dfef;
	border-color: #c8dfef;
}

/* boxThemeE : grey border with a gradient background */
.boxThemeE {
	background-position: 0 bottom;
}

/* boxThemeF : simple light blue background  with gray border*/
.boxThemeF {
	background-color: #c8dfef;
}

/* boxThemeF : grey border with grey background */
.boxThemeF {
	background-color: #c8dfef;
}

/* boxThemeG : background with a grey gradient */
.boxThemeG {
	background: #f1f1f1 url(../../resources/images/bg_gradient_k.png) repeat-x 0 0;
}	
	.boxThemeG .boxNavigation {
		background-color: transparent;
	}
	
/* boxThemeH : grey border with blue background */
.boxThemeH {
	background-color: #dae8f1;
}	

.boxExtra1, .boxExtra2, .boxExtra3, .boxExtra4 {z-index: 1;}		

/* Box in box */
.borderradius .sectionThemeA .box,
.borderradius .sectionThemeC .box {
	-webkit-border-radius: 4px; 
	border-radius: 4px; 
	overflow: hidden;
}
.borderradius .sectionThemeA .boxHeader, 
.borderradius .box .box .boxHeader, 
.borderradius .lightBoxHeader {
	-webkit-border-radius: 4px 4px 0 0; 
	border-radius: 4px 4px 0 0; 
}
.borderradius .box .box .boxFooter {
	-webkit-border-radius: 0 0 4px 4px; 
	border-radius: 0 0 4px 4px; 		
}

/* =tabs : specific styles when styling tabs (acts as a contexter) */
.tabs {
	margin-top: -1px; 
	background-color: #ededed; 
	z-index: 1;
}
	.boxThemeA .tabs .boxNavigationExtra1, .boxThemeA .tabs .boxNavigationExtra2, .boxThemeA .tabs .boxNavigationExtra3,
	.boxThemeB .tabs .boxNavigationExtra1, .boxThemeB .tabs .boxNavigationExtra2, .boxThemeB .tabs .boxNavigationExtra3,
	.boxThemeC .tabs .boxNavigationExtra1, .boxThemeC .tabs .boxNavigationExtra2, .boxThemeC .tabs .boxNavigationExtra3,
	.boxThemeD .tabs .boxNavigationExtra1, .boxThemeD .tabs .boxNavigationExtra2, .boxThemeD .tabs .boxNavigationExtra3,
	.boxThemeE .tabs .boxNavigationExtra1, .boxThemeE .tabs .boxNavigationExtra2, .boxThemeE .tabs .boxNavigationExtra3,
	.boxThemeF .tabs .boxNavigationExtra1, .boxThemeF .tabs .boxNavigationExtra2, .boxThemeF .tabs .boxNavigationExtra3,
	.boxThemeG .tabs .boxNavigationExtra1, .boxThemeG .tabs .boxNavigationExtra2, .boxThemeG .tabs .boxNavigationExtra3 {
		display: none;
	}

	.boxThemeD label {font-weight: bold;}


/* [bell.connector.css] =header : contains the page main title */
.header {
	position: relative;
	min-height: 3.333em; /* 40px */
	margin-top: 0;
	margin-bottom: 7px;
}	
	/* special styles exclusively for the "fake" H1 of the page */
	.headerTitle, .header h1 {
		vertical-align: baseline;
		display: inline-block;
	}
	.headerTitle {
		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;
	}
	.header h1 {
		line-height: 15px;
		margin-left: 7px;
		position: relative;
		letter-spacing: 0;
		
		/* not using fontFace */
		font-family: Helvetica, Arial, sans-serif;
	}

/* =navigation */
#navigationSub {
	left: -1px;
	width: 100%;
	padding-left: 1px;
	padding-right: 1px;
}

.navigationThemeA {

}

/* =content */
#content, .content {
	position: relative;
	border: 1px solid #cdcdcd;
}
	#content, .content, .boxNavigationExtra3 {
		background-color: #ededed;
	}


/* [bell.connector.css] =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 
}
	.footer .textList li {margin-bottom: 15px;}
	
	.footerHeader, .footerNavigation {margin-bottom: 20px;}*/
	
		.footerHeader .formGroup /*, 
		.footerHeader .inputGroup, 
		.footerHeader .inputGroup input*/ {
			margin-bottom: 0;
		}
		
		.footerHeader .formGroup {float: right;}
		.footerHeader .formAside {margin-right: 0;}
/*	
	.footerContent p {margin-bottom: 5px;}
*/	

/* footerNavigation */
	.footerNavigation .iconArrow {
		display: none;
		position: absolute;
		background-position: -107px -847px;
		top: 50%; margin-top: -12px;
		right: -22px;
		left: auto; margin-left: 0;
		height: 25px;
	}
	
	/*.footerNavigation .listView a {z-index: 1;}
		.footerNavigation .listView a .listViewContent {width: 70px; font-size: 1.333em;}
		.footerNavigation .listView .listViewFigure {width: 80px; height: 57px;}*/
			
			/* footer LOB icons 
			#shopMobilityFooter .listViewFigure {background-position: 0 0;}
			#shopInternetFooter .listViewFigure {background-position: 0 -60px;}
			#shopTvFooter .listViewFigure {background-position: 0 -110px;}
			#shopHomephoneFooter .listViewContent {width: 95px;}
			#shopHomephoneFooter .listViewFigure {width: 50px; background-position: -23px -167px;}
			#shopBundlesFooter .listViewFigure {background-position: 0 -223px;}*/

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

.footerNavigation .active .iconArrow
/* .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;}

*/

/* #! exception 
.footer .box {
	-webkit-border-radius: 4px;
	border-radius: 4px;
}*/



/* =paginationList : page counter links (always centered horizontally) */
.paginationList, .paginationList li {
	position: relative;
}
.paginationList {
	float: right;
	right: 50%;
}
	/* per-context */
	.boxFooter .paginationList {
		top: 13px;
	}
	.paginationList li {
		float: left;
		left: 50%;
	    background: #525252 url(../images/bg_a.png) repeat-x 0 0;
		margin-bottom: 0;
		padding-left: 0;		
	}	
		.paginationList a {
			padding: 7px 13px;
			color: #fff;
			display: block;
			border: 1px solid #525252;
			border-left: 0;
			border-right: 0;
		}
		
	.paginationList .previous,
	.paginationList .next {
		padding: 7px; /* should be the same value as generic "paginationList li a" padding */
		margin-bottom: 0;
	}
	.paginationList .previous {margin-right: 7px;}
	.paginationList .next {margin-left: 7px;}
		.paginationList .previous a,
		.paginationList .next a {
			padding: 0;
			border: none;
			color: #9a9a9a;
			text-shadow: none;
			filter: none;
			width: 18px;
			height: 18px;
			text-indent: -9999px;
		}
		.paginationList .previous a {background-position: -272px -76px;}
			.paginationList .previous a.disabled {background-position: -272px -95px;}	
		.paginationList .next a {background-position: -252px -76px;}
			.paginationList .next a.disabled {background-position: -252px -95px;}	

		.paginationList a,
		.paginationList .active a {
			text-shadow: 0px 1px 1px #000;
		}
			.paginationList .active a {
				background: #0f4a8d url(../images/bg_gradient_g.png) repeat-x 0 0;
				border-color: #000;
				border-left: 1px solid #000;
				border-right: 1px solid #000;
			}
			.paginationList .active a,
			.paginationList .first.active a,
			.paginationList .last.active a {
				padding-left: 12px; /* should be 1px less than generic padding-left to compensate for border - avoids flicker */
				padding-right: 12px; /* should be 1px less than generic padding-right to compensate for border - avoids flicker */
			}
			.paginationList .first,
			.paginationList .first a {			
				-webkit-border-top-left-radius: 4px;
				-webkit-border-bottom-left-radius: 4px;
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
			}
			.paginationList .last,
			.paginationList .last a {						
				-webkit-border-top-right-radius: 4px;
				-webkit-border-bottom-right-radius: 4px;
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
			}	

/* paginationListThemeA : squared pagination, no numbers shown */			
.paginationListThemeA {
	top: 0;	
}
	.paginationListThemeA li {
		margin-right: 5px;
	}
		.paginationListThemeA .next, .paginationListThemeA .previous {display: none;}

		.paginationListThemeA a {
			display: block;
			background-color: #7b7b7b;
			border: 1px solid #b1b1b1;
			width: 47px;
			height: 4px;
			text-indent: -999em;
			opacity: .75;
			padding: 0;
		}
		.paginationListThemeA .active a {
			background-color: #0066a4;
			border-color: #0066a4;
		}

.paginationListThemeA a,		
.paginationListThemeA .active a,		
.paginationListThemeA .first,
.paginationListThemeA .first a,
.paginationListThemeA .active.first a,
.paginationListThemeA .last,
.paginationListThemeA .last a,
.paginationListThemeA .active.last a {
	-webkit-border-radius: 0;
	border-radius: 0;
	padding: 0;
}

/* =paginationListThemeB : similar to generic paginationList, visually simplified */
.paginationListThemeB a, 
.paginationListThemeB .active a {
	text-shadow: none;
}
.paginationListThemeB a {
	color: #0066a6;
	border: 0;
}
	.paginationListThemeB .active a { 
		color: #212121; 
		border: 1px solid #b1b1b1;
	}

.paginationList .previous,
.paginationList .next,		
.paginationListThemeA,
.paginationListThemeB li {
	background: none;
}

/* =paginationListThemeC : similar to generic paginationList, another color scheme */
.paginationListThemeC li { 
	background: #ededed; 
	border-top: 1px solid #ccd0d4; 
	border-bottom: 1px solid #ccd0d4; 
}
	.paginationListThemeC a {
		color: #0066a4; /* <- must be redeclared here */
		border: none; 
		text-shadow: none;
	}
	.paginationListThemeC .active a {
		color: #fff;
	}
.paginationListThemeC .first {border-left: 1px solid #d6d6d6;}
.paginationListThemeC .last {border-right: 1px solid #d6d6d6;}

.paginationListThemeC .previous, 
.paginationListThemeC .next {border: none;}


/* CSS3=paginationList */		
.cssgradients .paginationList .active a {
	background: rgb(20,122,190); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(20,122,190,1) 0%, rgba(19,113,181,1) 24%, rgba(17,77,145,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(20,122,190,1)), color-stop(24%,rgba(19,113,181,1)), color-stop(100%,rgba(17,77,145,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(20,122,190,1) 0%,rgba(19,113,181,1) 24%,rgba(17,77,145,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(20,122,190,1) 0%,rgba(19,113,181,1) 24%,rgba(17,77,145,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(20,122,190,1) 0%,rgba(19,113,181,1) 24%,rgba(17,77,145,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(20,122,190,1) 0%,rgba(19,113,181,1) 24%,rgba(17,77,145,1) 100%); /* W3C */
}

.cssgradients .paginationListThemeA .active a {
	background: #0066a4;
}
.paginationListThemeB .active a,
.cssgradients .paginationListThemeB .active a {
	background: #ededed;
}
	
/* =tabsList : list for tabs */
.tabsList, .tabsList li {position: relative; float: left;}
	.tabsList {
		width: 100%;
		border-bottom: 1px solid #cecece; 
		padding-bottom: 10px;
	}
		.tabsList li {	
			margin-bottom: 0;
			padding-left: 0;
			background-image: none;
			margin-right: 10px;
			width: auto;
		}
			.tabsList a {
				display: block;
				background-position: 0 bottom;
				border: 1px solid #cecece;
				padding: 20px 10px;
				text-align: center;
				position: static; margin-bottom: 0; /* <- failsafe when adding other css classes to the element (such as headingTypes) */
			}
				/* exception case */
				.tabsList .headingType3 {font-size: 1.75em;}
				
			.tabsList .active {
				background-image: none;
				border-bottom: 0;
				color: #212121;
				margin-bottom: -10px;
				padding-bottom: 32px; /* always 12px more than the default padding-bottom */
			}
			
		.tabsList .first, .tabsList .last {z-index: 2;}	
		.tabsList .last {margin-right: 0;}

	/* tabsListThemeA */
	.tabsListThemeA {
		border: 0;
		padding-bottom: 0;
	}			
		.tabsListThemeA li {
			margin: 0;
			min-width: 60px;
		}		
			.tabs .tabsListThemeA li {
				width: 204px;
			}
			.tabsListThemeA a {
				padding: 7px 10px;
				border-right-width: 0;
			}
			.tabsListThemeA .last a,
			.tabs .tabsListThemeA .first a {
				border-right-width: 1px;
			}
			.tabsListThemeA .first a,
			.tabs .tabsListThemeA .last a {
				border-right: 0;
			}
			.tabsListThemeA .last .active,
			.tabs .tabsListThemeA .first a {
				border-left: 0;
			}
			.tabsListThemeA .active {
				background: #525252 url(../images/bg_a.png) repeat-x 0 0;
				border: 1px solid #525252;
				color: #fff;
				margin-bottom: 0;
				padding-bottom: 7px;
			}
				.tabsListThemeA .iconArrow {
					background-repeat: no-repeat;
					background-position: 0 -193px;
					display: none;
					height: 7px;
					margin-left: -6px;
					position: absolute;
					left: 50%;
					bottom: -7px;
					width: 12px;
				}
				.tabsListThemeA .active .iconArrow {
					display: block;	
				}
				
	.tabs .tabsListThemeA .first.last {
		float: none;
		width: auto;
	}
	
	/* tabsListThemeB */
	.tabsListThemeB li {
		width: auto;
	}
		.tabsListThemeB a {
			padding: 12px 20px;
		}
		.tabsListThemeB .active {
			padding-bottom: 27px;
		}

	/* tabsListThemeC */
	.tabsListThemeC {
		border: 0;
	}			
		.tabsListThemeC li {
			width: 100%;
			margin-bottom: 10px;
		}
			.tabsListThemeC a {
				padding: 10px 25px 10px 15px;
				text-align: left;
				-webkit-border-radius: 4px;
				border-radius: 4px;
			}
			.tabsListThemeC .active a {
				background: #525252 url(../images/bg_a.png) repeat-x 0 0;
				border: 1px solid #525252;
				color: #fff;
				margin-bottom: 0;
			}
				.tabsListThemeC .iconArrow {
					background-position: -252px -76px;
					margin-right: 10px;
					position: absolute;
					right: 0;
					top: 10px;
					height: 16px;
					width: 14px;
				}
				.tabsListThemeC .active .iconArrow {
					display: none;	
				}
	
	/* Corners */
	.tabsListExtra1, .tabsListExtra3 {top: 0;}
	.tabsListExtra3, .tabsListExtra4 {right: 0;} /* should be the same value as "tabsList a" margin-right value */
		.tabsList .last .tabsListExtra3, .tabsList .last .tabsListExtra4 {right: 0;}
	.tabsListExtra2, .tabsListExtra4 {bottom: 0;}
	.tabsListExtra1, .tabsListExtra2 {left: 0;}
	
		/* hiding extras */
		.tabsList .active .tabsListExtra2, 
		.tabsList .active .tabsListExtra4,
		.tabsListThemeA .tabsListExtra3,
		.tabsListThemeA .tabsListExtra4,
		.tabsListThemeA .tabsListExtra1,
		.tabsListThemeA .tabsListExtra2,
		.tabsListThemeC .tabsListExtra1,
		.tabsListThemeC .tabsListExtra2,
		.tabsListThemeC .tabsListExtra3,
		.tabsListThemeC .tabsListExtra4,
		.tabs ul.tabsListThemeA .first a.active .tabsListExtra2,
		.tabs ul.tabsListThemeA .last a.active .tabsListExtra4,
		.tabs .tabsListThemeA .first .tabsListExtra1,
		.tabs .tabsListThemeA .first .tabsListExtra2,
		.tabs .tabsListThemeA .last .tabsListExtra3,
		.tabs .tabsListThemeA .last .tabsListExtra4 {
			display: none;
		}

		.tabsListThemeA .first .tabsListExtra1, 
		.tabsListThemeA .first .tabsListExtra2, 
		.tabsListThemeA .last .tabsListExtra3, 
		.tabsListThemeA .last .tabsListExtra4 {
			display: block;
		}
					
	/* per-context */
	.tabs .tabsList .first .active .tabsListExtra2,
	.tabs .tabsList .last .active .tabsListExtra4 {
		background-image: none;
		background-color: #fff;
		border-left: 1px solid #cecece;
		display: block;
		bottom: -11px; 
		height: 10px;
	}
		/* #! Shouldn't style "-Js" classes, but for this case it is needed (till an alternative way is found) */
		.tabs .tabsList .first .active .tabsListExtra2,
		.tabs ul.splitterJs .first .active .tabsListExtra2, 
		.tabs ul.splitterJs .last .active .tabsListExtra4 {display: block; bottom: -15px;}
	
	/* When in a box */
	.box .tabsList .active {margin-bottom: -11px;}
	.box .tabsList .first {left: -1px;}
	.box .tabsList .last {left: 1px;}

	.box .tabsList .last .active .tabsListExtra4 {
		border-left: 0;
		border-right: 1px solid #cecece;
	}
	
	.box .boxContent .tabsList .active {
		margin-bottom: 0px;
	}
		.box .boxContent .tabsListThemeC .active {
			padding-bottom: 0;
			margin-bottom: 10px;
		}
	.box .boxContent .tabsList .first,
	.box .boxContent .tabsList .last {
		left: 0px;
	}

	.box .tabsListThemeA .active {margin-bottom: 0;}
	.box .tabsListThemeA .first, .box .tabsListThemeA .last {left: 0;}
	.box .tabsListThemeA .last .active .tabsListExtra4 {border-right: 0;}
	
	/* if below used elsewhere, will need to convert to a new theme */
	.boxHeader .aside .tabsListThemeA {top: 6px;}
		.boxHeader .aside .tabsListThemeA li {width: auto;}
			.boxHeader .aside .tabsListThemeA a {padding: 6px 15px;}
		

	/* =CSS3=tabsList */
	.borderradius .tabsListThemeA .first a {
		-webkit-border-radius: 4px 0 0 4px;
		border-radius: 4px 0 0 4px;
	}
	.borderradius .tabsListThemeA .last a {
		-webkit-border-radius: 0 4px 4px 0;
		border-radius: 0 4px 4px 0;
	}
	.borderradius .tabs .tabsListThemeA  a {
		-webkit-border-radius: 0;
		border-radius: 0;
	}
	.borderradius .tabs .tabsListThemeA .first a {
		-webkit-border-radius: 4px 0 0 0;
		border-radius: 4px 0 0 0;
	}
	.borderradius .tabs .tabsListThemeA .last a {
		-webkit-border-radius: 0 4px 0 0;
		border-radius: 0 4px 0 0;
	}
	.borderradius .tabs .tabsListThemeA .first.last a {
		-webkit-border-radius: 4px 4px 0 0;
		border-radius: 4px 4px 0 0;
	}		

	
/* [bell.connector.css] =textList : basic list with bullets (should not contain any extras, use itemList instead) - **binded to UL for increased priority** 
.textList li, ul li {
	margin-bottom: 3px;
	background: url(../../resources/images/bullet_dot.png) no-repeat 0 4px transparent; 
	list-style: none; 
	padding-left: 10px;
}
	.textList .active {font-weight: bold;}
	.textList a {
		display: inline;
		padding: 0;
		border: 0;
	}
		.textList a:hover {text-decoration: underline;}
		
	.textList .active a {font-weight: bold;}
	
	.textListThemeA li {
		padding-left: 12px; 
		background-image: url(../../resources/images/bullet_arrow.png); 
	}		
	.textListThemeB li {padding-left: 15px;}
	.textListThemeB li,*/ .iconArrowA {
		background-image: url(../../resources/images/bullet_arrow_big.png); 
	}
	/*.textListThemeC {
		position: relative;
		border-top: 1px solid #ccc;
	}
	.textListThemeC li { 
		background-image: none;
		padding-left: 0;
		padding-top: 5px;
		padding-bottom: 5px;
		width: 100%; 
		border-bottom: 1px solid #ccc;
	}*/





/* [bell.connector.css] =itemList : list with/without a visual icon (contains extras) */




/* =tileList : list with specific width/height, list items are aligned as tiles */
.tileList {
	text-align: left;
}
	.tileList li {
		background: none;
		display: inline-block;
		overflow: hidden;
		text-align: center;
		vertical-align: middle;
		width: auto;
	}

.tileListThemeA li {
	margin: 0 15px 18px 0;
	padding-left: 0;
}
	.tileListThemeA a {
		background: url(../../resources/images/bg_tile_a.png) no-repeat 0 -1px;
		display: table-cell;
		height: 85px;
		margin: 0 auto;
		overflow: hidden;
		text-align: center;
		vertical-align: middle;
		width: 85px;
	}
		.tileListThemeA img {
			max-height: 86px;
			max-width: 86px;
			margin: 0 auto;
		}

	/* tile size variations */
	.tileListSize1 li {width: 50px;}
	.tileListSize2 li {width: 60px;}
	.tileListSize3 li {width: 70px;}
	.tileListSize4 li {width: 80px;}
	.tileListSize4-5 li {width: 85px;} /* <- in-between value, 4-5 translates to 4.5 */
	.tileListSize5 li {width: 90px;}

	
/* =treeList : "arborescence" list */
.treeList {margin-top: 12px;}
	.treeList li {
		position: relative;
		float: none; 
		font-size: inherit; 
		text-indent: 0; 
		border-bottom: 0; 
		width: auto;
		padding-left: 25px;
		padding-bottom: 8px; 
		margin-bottom: 0; 
		background: transparent url(../../resources/images/bg_treeLine.gif) repeat-y 3px top; 
	}
		.treeList .last {background: none;}
		
		.treeList li .treeListExtra1 {
			display: block; 
			width: 12px; 
			height: 17px; 
			position: absolute; 
			top: -8px; 
			left: 7px; 
			background: transparent url(../../resources/images/bg_treeHook.gif) no-repeat left bottom;
		}
			.treeList .first .treeListExtra1 {height: 14px; top: -4px;}
		
	/* per-context (very specifics) */
	.treeList li .treeList {margin-top: 1.25em; margin-bottom: .5em;}
	.inputGroup .treeList {margin-left: -21px;} /* cancels the left padder */
	.formSelect .inputGroup .treeList {margin-top: 10px;}
	.formGroup .treeList li {background-position: 7px top;}
		.formSelect .inputGroup .treeList li > .treeListExtra1 {top: -3px;}

/* [bell.connector.css] =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 */
.item {
	clear: both;
	position: relative;
}
	.itemContent {
		overflow: hidden;
	}
		.itemThemeC .itemContent, .itemThemeD .itemContent {z-index: 1;}
		.itemThemeC .itemContent {float: left;}
		.itemThemeD .itemContent {float: right; right: 0;}
		
	.itemFigure {
		position: relative;
		float: left;
		margin-right: 10px;
	}
		.itemThemeA .itemFigure {
			float: right;
			margin-right: 0;
			margin-left: 10px;	
		}
		.itemThemeB .itemFigure {
			float: none;
			margin-left: 0;
			margin-right: 0;
			margin-bottom: 10px;
		}
		.itemThemeC .itemFigure, .itemThemeD .itemFigure {
			position: static; 
		}
			.itemThemeC .itemFigure {
				float: right;
				margin-right: 0px;
				margin-left: -977px; /* <- same width as content */
			}
			.itemThemeD .itemFigure {
				float: left;
				margin-left: 0px;
				margin-right: -977px; /* <- same width as content */
			}

	.itemBadge {
		position: absolute;
		right: -21px; /* put same value as top of popOut - 1 */
		top: -21px;	/* put same value as top of popOut - 1 */
		display: none;
	}
	.popOut .itemBadge {
		display: block;	
	}
	
/* itemFunctionA : vertically float the item content (no floats) */		
.itemFunctionA .itemFigure,
.itemFunctionA .itemContent {
	display: inline-block;
	vertical-align: middle;
}
	.itemFunctionA .itemFigure {float: none;}
	.itemFunctionA .itemContent {
		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 */
		.itemFunctionA .itemContent p {
			margin-bottom: 0;
		}
	

/* =itemGroupWrap : simple wrapper to add more control over styling; wraps item together */
.itemGroupWrap .item .itemHeader,
.itemGroupWrap .formGroup .formHeader {
	font-size: 14px;
}
.itemGroupWrap .itemHeader {
	float: left;
	text-align: right;
	width: 27%; /* +2% to compensate for the spacing */
}
	/* per-context */
	.itemGroupWrap .itemHeader .headingType6 {top: -1px;} /* <- this gives a perfect vertical alignment to the header - hardcoded!!! */
	
.itemGroupWrap .item .itemContent {
	float: right;
	overflow: visible;
}
	.itemGroupWrap .item .dataListWrap {
		position: relative;
	}
	.itemGroupWrap .item .itemContent,
	.itemGroupWrap .item .dataListHeader,
	.itemGroupWrap .item .dataListContent,
	.itemGroupWrap .formGroup .formContent {
		width: 70%;
	}
		/*.itemGroupWrap .item .dataListWrap {
			min-height:34px;
		}*/
		.itemGroupWrap .item .dataListHeader {
			float: none;
			font-size: 14px;
			margin-bottom: 5px;
		}
		.itemGroupWrap .item .dataListAside {
			position: absolute;
			top: 12px;
			right: 0;
		}
		.itemGroupWrap .item li .dataListAside {
			position: absolute;
			top: -8px;
			right: 0;
		}
			.itemGroupWrap .dataListContent p {margin-bottom: 0;}
		
	.itemGroupWrap .box {
		margin-top: -4px; /* this hides the top border when toggling between box and itemGroupWrap view */
		margin-bottom: 15px; /* reduces white space gap between opened itemGroupWrap */
	}
	
	.itemGroupWrap .formGroupThemeA .formHeader,
	.itemGroupWrap .formGroupThemeB .formHeader {
		width: 26%; /* same as '.itemGroup .item .itemHeader' minus 1% for padding buffer */
		margin-right: 3%; /* should equal approx. to the % left from content's and header's width : 100% - (70% + 27%) = 3% */
	}
	.itemGroupWrap .formGroupThemeA .formContent,
	.itemGroupWrap .formGroupThemeB .formContent {
		margin-right: 0;
	}
		/* Siblings forms (next to) - specific */
		.itemGroupWrap .formContent > .formGroup {float: left; margin-right: 20px;}
			.itemGroupWrap .formContent > .formGroup .formHeader {margin-right: 10px; width: auto;}
			.itemGroupWrap .formContent > .formGroup .formContent {width: auto;}
		

.itemGroupWrap .item {
	border-bottom: 1px solid #cdcdcd;
	padding-top: 20px;
	padding-bottom: 20px;
}
.itemGroupWrap.last .item {
	border-bottom: 0;
	padding-bottom: 0;
}

/* =itemGroup : groups one or more items */
.itemGroup {position: relative;}
	.itemGroupThemeA .itemHeader {text-align: left;}
	
	.itemGroup > .item {margin-bottom: 20px;}
		.itemGroup > .item.last {margin-bottom: 0;}
			

/* =sash : cornered image (ex. Promo tags) */
.sash {
    position: absolute;
    right: 0;
    top: 0;		
}

/* =ratingGroup, =rating : static and dynamic rating */	
.ratingGroup {
	position: relative;
}
	.rating, .rating0 {
		display: inline-block; 
		position: relative; 
		top: -1px; 
		text-indent: -999em; 
		margin-right: 3px;
		vertical-align: middle;
		background: transparent url(../../resources/images/bg_starsSprite.png) no-repeat 0 0;
	}
	.ratingGroup .rating, .ratingControl {
		width: 62px;
		height: 12px;
	}
		.ratingGroupThemeA .rating, .ratingGroupThemeA .ratingControl {
			width: 118px; 
			height: 22px;
		}
		.ratingGroupThemeA .rating {
			background-position: 0 -135px;
		}
		
		.ratingGroupThemeB .rating, .ratingGroupThemeB .ratingControl {
			width: 85px; 
			height: 14px;
		}
		.ratingGroupThemeB .rating {
			background-position: 0 -384px;
		}
	.ratingControl {
		position: absolute; 
		top: 0px;
		left: 0px;
	}
		.ratingControl a {
			display:block;
			float:left;
			width: 20%; /* 20% for 5 equal link */
			height:100%;
			text-indent:-9999px;
		}
		
		/* ratings variation */
		/* small stars */
		.rating0-5 {background-position: 0 -12px;}
		.rating1 {background-position: 0 -24px;}
		.rating1-5 {background-position: 0 -36px;}
		.rating2 {background-position: 0 -48px;}
		.rating2-5 {background-position: 0 -60px;}
		.rating3 {background-position: 0 -72px;}
		.rating3-5 {background-position: 0 -84px;}
		.rating4 {background-position: 0 -96px;}
		.rating4-5 {background-position: 0 -108px;}
		.rating5 {background-position: 0 -120px;}
		
		/* big stars */
		.ratingGroupThemeA .rating0-5 {background-position: 0 -157px;}
		.ratingGroupThemeA .rating1 {background-position: 0 -179px;}
		.ratingGroupThemeA .rating1-5 {background-position: 0 -201px;}
		.ratingGroupThemeA .rating2 {background-position: 0 -223px;}
		.ratingGroupThemeA .rating2-5 {background-position: 0 -245px;}
		.ratingGroupThemeA .rating3 {background-position: 0 -267px;}
		.ratingGroupThemeA .rating3-5 {background-position: 0 -289px;}
		.ratingGroupThemeA .rating4 {background-position: 0 -311px;}
		.ratingGroupThemeA .rating4-5 {background-position: 0 -315px;}
		.ratingGroupThemeA .rating5 {background-position: 0 -355px;}
		
		/* medium stars */
		.ratingGroupThemeB .rating0-5 {background-position: 0 -401px;}
		.ratingGroupThemeB .rating1 {background-position: 0 -417px;}
		.ratingGroupThemeB .rating1-5 {background-position: 0 -434px;}
		.ratingGroupThemeB .rating2 {background-position: 0 -451px;}
		.ratingGroupThemeB .rating2-5 {background-position: 0 -468px;}
		.ratingGroupThemeB .rating3 {background-position: 0 -484px;}
		.ratingGroupThemeB .rating3-5 {background-position: 0 -501px;}
		.ratingGroupThemeB .rating4 {background-position: 0 -518px;}
		.ratingGroupThemeB .rating4-5 {background-position: 0 -534px;}
		.ratingGroupThemeB .rating5 {background-position: 0 -551px;}



/* [bell.connector.css] =aside : any content next to another element (such as buttons next to a heading, etc.) */
.aside {
	position: absolute;
	top: 0; 
	right: 0;
}
	/* per-context */
	.header .aside {bottom: 12px; top: auto;}
	.flyOut .box .aside {bottom: auto; top: 9px; right: 9px;}
	table th .aside {
		position: relative;
		display: inline;
	}
	.boxHeader .aside .textList {
		position: relative;
		margin-top: 8px;
	}
		.boxHeader .aside .textListThemeE {margin-top: 0;}
		.dataTableThemeE .aside {right: -17px; top: -20px;}
		span.aside .button {top: -10px;}

/* =popOut : pops the element with an effect (the element remains in the html flow) */
.popOut {
	position: relative;
	border: 1px solid #0066a4;
	z-index: 99; 
	top: -10px;
	left: -1px;
	
	-webkit-transition: top 0.1s ease-out;
	transition-property: top;
	transition-duration: 0.1s;
	transition-timing-function: ease-out;

	-webkit-border-radius: 7px;
	border-radius: 7px;
	-webkit-box-shadow: 1px 0 0 0 #fff inset, 0 0 5px 1px rgba(0,0,0,.5);
	box-shadow: 1px 0 0 0 #fff inset, 0 0 5px 1px rgba(0,0,0,.5);	
}
	.popOut .popOutContent {
		position: static !important;
		left: inherit !important;
	}
	
.cssgradients .popOut {
	background: rgb(255,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 60%, rgba(253,253,253,1) 61%, rgba(253,253,253,1) 64%, rgba(251,251,251,1) 64%, rgba(251,251,251,1) 66%, rgba(248,248,248,1) 68%, rgba(249,249,249,1) 70%, rgba(246,246,246,1) 71%, rgba(240,240,240,1) 82%, rgba(237,237,237,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(60%,rgba(255,255,255,1)), color-stop(61%,rgba(253,253,253,1)), color-stop(64%,rgba(253,253,253,1)), color-stop(64%,rgba(251,251,251,1)), color-stop(66%,rgba(251,251,251,1)), color-stop(68%,rgba(248,248,248,1)), color-stop(70%,rgba(249,249,249,1)), color-stop(71%,rgba(246,246,246,1)), color-stop(82%,rgba(240,240,240,1)), color-stop(100%,rgba(237,237,237,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(253,253,253,1) 61%,rgba(253,253,253,1) 64%,rgba(251,251,251,1) 64%,rgba(251,251,251,1) 66%,rgba(248,248,248,1) 68%,rgba(249,249,249,1) 70%,rgba(246,246,246,1) 71%,rgba(240,240,240,1) 82%,rgba(237,237,237,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(253,253,253,1) 61%,rgba(253,253,253,1) 64%,rgba(251,251,251,1) 64%,rgba(251,251,251,1) 66%,rgba(248,248,248,1) 68%,rgba(249,249,249,1) 70%,rgba(246,246,246,1) 71%,rgba(240,240,240,1) 82%,rgba(237,237,237,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(253,253,253,1) 61%,rgba(253,253,253,1) 64%,rgba(251,251,251,1) 64%,rgba(251,251,251,1) 66%,rgba(248,248,248,1) 68%,rgba(249,249,249,1) 70%,rgba(246,246,246,1) 71%,rgba(240,240,240,1) 82%,rgba(237,237,237,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 60%,rgba(253,253,253,1) 61%,rgba(253,253,253,1) 64%,rgba(251,251,251,1) 64%,rgba(251,251,251,1) 66%,rgba(248,248,248,1) 68%,rgba(249,249,249,1) 70%,rgba(246,246,246,1) 71%,rgba(240,240,240,1) 82%,rgba(237,237,237,1) 100%); /* W3C */
}


/* [bell.connector.css] =columnGroup : relative/% based columns */
.columnGroup .column {
	float: left;  
	margin-bottom: 10px; 
	position: relative;
	
	/* Fixes empty column bug */
	min-height: 1px;
}
	.columnGroupThemeA .column,
	.columnGroupThemeA .formGroup { 
		margin-bottom: 0; 
	}
	
	.columnGroupThemeB .formGroupThemeD {
		margin-right: 0;
	}	
	
	.columnGroupSplit1 .columnContent,
	.columnGroupSplit2 .columnContent,
	.columnGroupSplit3 .columnContent,
	.columnGroupSplit4 .columnContent,
	.columnGroupSplit5 .columnContent,
	.columnGroupSplit6 .columnContent,
	.columnGroupSplit7 .columnContent,
	.columnGroupSplit8 .columnContent,
	.columnGroupSplit9 .columnContent,
	.columnGroupSplit10 .columnContent { 
		margin-right: 0px;
	}	
	
	.columnGroupSplit1 .last .columnContent,
	.columnGroupSplit2 .last .columnContent,
	.columnGroupSplit3 .last .columnContent,
	.columnGroupSplit4 .last .columnContent,
	.columnGroupSplit5 .last .columnContent,
	.columnGroupSplit6 .last .columnContent,
	.columnGroupSplit7 .last .columnContent,
	.columnGroupSplit8 .last .columnContent,
	.columnGroupSplit9 .last .columnContent,
	.columnGroupSplit10 .last .columnContent,
	.columnGroupSplit1 .last .columnGroup .last .columnContent,
	.columnGroupSplit2 .last .columnGroup .last .columnContent,
	.columnGroupSplit3 .last .columnGroup .last .columnContent,
	.columnGroupSplit4 .last .columnGroup .last .columnContent,
	.columnGroupSplit5 .last .columnGroup .last .columnContent,
	.columnGroupSplit6 .last .columnGroup .last .columnContent,
	.columnGroupSplit7 .last .columnGroup .last .columnContent,
	.columnGroupSplit8 .last .columnGroup .last .columnContent,
	.columnGroupSplit9 .last .columnGroup .last .columnContent,
	.columnGroupSplit10 .last .columnGroup .last .columnContent,
	.columnGroupSplit1 .last .columnGroup .last .columnGroup .last .columnContent,
	.columnGroupSplit2 .last .columnGroup .last .columnGroup .last .columnContent,
	.columnGroupSplit3 .last .columnGroup .last .columnGroup .last .columnContent,
	.columnGroupSplit4 .last .columnGroup .last .columnGroup .last .columnContent,
	.columnGroupSplit5 .last .columnGroup .last .columnGroup .last .columnContent,
	.columnGroupSplit6 .last .columnGroup .last .columnGroup .last .columnContent,
	.columnGroupSplit7 .last .columnGroup .last .columnGroup .last .columnContent,
	.columnGroupSplit8 .last .columnGroup .last .columnGroup .last .columnContent,
	.columnGroupSplit9 .last .columnGroup .last .columnGroup .last .columnContent,
	.columnGroupSplit10 .last .columnGroup .last .columnGroup .last .columnContent  {  
		padding-right: 0px;
	}	
	
	.columnGroupSplit1 .last .columnGroup .columnContent,
	.columnGroupSplit2 .last .columnGroup .columnContent,
	.columnGroupSplit3 .last .columnGroup .columnContent,
	.columnGroupSplit4 .last .columnGroup .columnContent,
	.columnGroupSplit5 .last .columnGroup .columnContent,
	.columnGroupSplit6 .last .columnGroup .columnContent,
	.columnGroupSplit7 .last .columnGroup .columnContent,
	.columnGroupSplit8 .last .columnGroup .columnContent,
	.columnGroupSplit9 .last .columnGroup .columnContent,
	.columnGroupSplit10 .last .columnGroup .columnContent,
	.columnGroupSplit1 .last .columnGroup .last .columnGroup .columnContent,
	.columnGroupSplit2 .last .columnGroup .last .columnGroup .columnContent,
	.columnGroupSplit3 .last .columnGroup .last .columnGroup .columnContent,
	.columnGroupSplit4 .last .columnGroup .last .columnGroup .columnContent,
	.columnGroupSplit5 .last .columnGroup .last .columnGroup .columnContent,
	.columnGroupSplit6 .last .columnGroup .last .columnGroup .columnContent,
	.columnGroupSplit7 .last .columnGroup .last .columnGroup .columnContent,
	.columnGroupSplit8 .last .columnGroup .last .columnGroup .columnContent,
	.columnGroupSplit9 .last .columnGroup .last .columnGroup .columnContent,
	.columnGroupSplit10 .last .columnGroup .last .columnGroup .columnContent  { 
		padding-right: 15px; 
	}


	.columnGroupSplit10 .column {width: 10%;}
	.columnGroupSplit9 .column {width: 11.1%;}
	.columnGroupSplit8 .column {width: 12.5%;}
	.columnGroupSplit7 .column {width: 14%;}
	.columnGroupSplit6 .column {width: 16.6%;}
	.columnGroupSplit5 .column {width: 20%;}
	.columnGroupSplit4 .column {width: 25%;}
	.columnGroupSplit3 .column {width: 33.3%;}
	.columnGroupSplit2 .column {width: 50%;}
	.columnGroupSplit1 .column {width: 100%;} /* <- safety class, shouldn't be used if there is only 1 column */
	
	.columnGroupSplit2 .columnSize2,
	.columnGroupSplit3 .columnSize3,
	.columnGroupSplit4 .columnSize4,
	.columnGroupSplit5 .columnSize5,
	.columnGroupSplit6 .columnSize6,
	.columnGroupSplit7 .columnSize7,
	.columnGroupSplit8 .columnSize8,
	.columnGroupSplit9 .columnSize9,
	.columnGroupSplit10 .columnSize10 {width: 100%;}
	
	.columnGroupSplit10 .columnSize1 {width: 10%;}
	.columnGroupSplit10 .columnSize3 {width: 30%;}
	.columnGroupSplit10 .columnSize7 {width: 70%;}
	.columnGroupSplit10 .columnSize9 {width: 90%;}
	
	.columnGroupSplit9 .columnSize1 {width: 11.1%;}
	.columnGroupSplit9 .columnSize2 {width: 22.2%;}
	.columnGroupSplit9 .columnSize4 {width: 44.4%;}
	.columnGroupSplit9 .columnSize5 {width: 55.5%;}
	.columnGroupSplit9 .columnSize7 {width: 77.7%;}
	.columnGroupSplit9 .columnSize8 {width: 88.8%;}
	
	.columnGroupSplit8 .columnSize1 {width: 12.5%;}
	.columnGroupSplit8 .columnSize3 {width: 37.5%;}
	.columnGroupSplit8 .columnSize5 {width: 62.5%;}
	.columnGroupSplit8 .columnSize7 {width: 87.5%;}	
	
	.columnGroupSplit7 .columnSize1 {width: 14.2%;}
	.columnGroupSplit7 .columnSize2 {width: 28.5%;}
	.columnGroupSplit7 .columnSize3 {width: 42.7%;}
	.columnGroupSplit7 .columnSize4 {width: 56.8%;}
	.columnGroupSplit7 .columnSize5 {width: 71%;}
	.columnGroupSplit7 .columnSize6 {width: 85.2%;}
	
	.columnGroupSplit6 .columnSize1 {width: 16.6%;}
	.columnGroupSplit6 .columnSize5 {width: 83.3%;}

	.columnGroupSplit5 .columnSize1,
	.columnGroupSplit10 .columnSize2 {width: 20%;}
	
	.columnGroupSplit5 .columnSize2,
	.columnGroupSplit10 .columnSize4 {width: 40%;}
	
	.columnGroupSplit5 .columnSize3,
	.columnGroupSplit10 .columnSize6 {width: 60%;}
	
	.columnGroupSplit5 .columnSize4,
	.columnGroupSplit10 .columnSize8 {width: 80%;}
	
	.columnGroupSplit4 .columnSize1,
	.columnGroupSplit8 .columnSize2  {width: 25%;}
	.columnGroupSplit4 .columnSize3,
	.columnGroupSplit8 .columnSize6  {width: 75%;}
	
	.columnGroupSplit3 .columnSize2,
	.columnGroupSplit6 .columnSize4, 
	.columnGroupSplit9 .columnSize6	{width: 66.6%;}
	
	.columnGroupSplit3 .columnSize1,
	.columnGroupSplit6 .columnSize2,
	.columnGroupSplit9 .columnSize3	{width: 33.3%;}

	.columnGroupSplit2 .columnSize1,
	.columnGroupSplit4 .columnSize2,
	.columnGroupSplit6 .columnSize3,
	.columnGroupSplit8 .columnSize4,
	.columnGroupSplit10 .columnSize5 { width: 50%;}
	
	/* per-context */	
	/*.columnGroup .last .columnContent {
		padding-right: 0;
		margin-right: 0;
	} */


/* [bell.connector.css] =brand : shows the Bell logo */

/* [bell.connector.css, bell.migration.css] =button : basic button, used with an <a> tag or <button> tag */
/* 	Note about "migration" styles:
	- migrationContext gives the new visual style of GC buttons to legacy markup buttons. 
	  Therefore, button themes will not match - Meaning that a buttonThemeB in GC is not the same as
	  a migrationContext buttonThemeB, for example.
	- buttonExtra1 becomes the "span span" in migrationContext */
		
.button, 
.migrationContext .buttonThemeB {
	cursor: pointer;
	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;
	text-shadow: 0px 1px 1px #000;
}
	/* shared sprite */
	.button, .buttonExtra1, 
	.migrationContext .button span span {
		background-image: url(../images/bg_buttonSprite.png);
	}

	/* default extra */
	.buttonExtra1, 
	.migrationContext .button span span {
		height: 34px;
		width: 7px;
		position: absolute;
		right: -7px;
		top: 0;
		background-position: right -0px;
	}
	
	/* shared styles across themes */
	.buttonThemeA, .buttonThemeB,
	.buttonDisabled.buttonThemeA, .buttonDisabled.buttonThemeB {
		color: #212121;
		margin-bottom: -1px;
		text-shadow: none;
	}
	.buttonDisabled.buttonThemeA, .buttonDisabled.buttonThemeB {color: #555;}
	
	/* buttonThemeA : gray button */
	.buttonThemeA {
		background-position: 0px -50px;
	}
		.buttonThemeA .buttonExtra1 {
			background-position: right -50px;
		}	

	/* buttonThemeB : gray button slim */
	.buttonThemeB {
		padding: 7px 8px 8px 15px;
		background-position: 0px -101px;
	}
		.buttonThemeB .buttonExtra1 {
			height: 31px;
			background-position: right -101px;
		}
			/* per-context */
			.migrationContext .buttonThemeB {
				border: 0;
				font-size: 12px;
				height: auto;
				padding-bottom: 5px;
				padding-top: 4px;
				background-position: 1px -292px;
			}
				.migrationContext .buttonThemeB span span {
					height: 26px;
					background-position: right -292px;
				}
	
	/* buttonThemeC : big blue button */
	.buttonThemeC {
		height: 23px;
		padding-top: 14px;
		padding-bottom: 7px;
		padding-left: 19px;
		padding-right: 14px;
		background-position: 0 -148px;
	}
		.buttonThemeC .buttonExtra1 {
			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. */
	.buttonThemeD,
	.buttonDisabled.buttonThemeD,
	.buttonGroup.open .buttonToggle {
		color: #fff;
		border-color: #000;
		background-position: 0px -201px;
	}
		.buttonGroup.open .buttonToggle {background-position: -15px -201px;}
		
		.buttonThemeD .buttonExtra1,
		.buttonGroup.open .buttonToggle .buttonExtra1{
			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 .button,
.cssgradients .migrationContext .buttonThemeB {
	margin-right: 0;
	padding: 8px 14px 7px;
	height: inherit;
	line-height: 17px;
	min-height: 17px;
}
	/* button skin */
	.cssgradients .button,
	.cssgradients .migrationContext .buttonThemeB,
	.cssgradients .buttonGroupFunctionA .button,
	.cssgradients .buttonGroupFunctionA .button.first {
		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 #000;
	}
	
.cssgradients .buttonThemeA, 
.cssgradients .buttonThemeB,
.cssgradients .buttonGroupFunctionA .buttonThemeA,
.cssgradients .buttonGroupFunctionA .buttonThemeA.first,
.cssgradients .buttonGroupFunctionA .buttonThemeB,
.cssgradients .buttonGroupFunctionA .buttonThemeB.first	{
	box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.8);
	-webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.8);
	border: 1px solid #bfbfbf;
	margin-bottom: 0;
}
	/* buttonThemeA skin */
	.cssgradients .buttonThemeA,
	.cssgradients .buttonDisabled.buttonThemeA,
	.cssgradients .buttonGroupFunctionA .buttonThemeA,
	.cssgradients .buttonGroupFunctionA .buttonThemeA.first {
		background: red; /* 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 */
	}
.cssgradients .buttonThemeB,
.cssgradients .buttonDisabled.buttonThemeB {
	padding: 6px 14px;
}
	/* buttonThemeB skin */
	.cssgradients .buttonThemeB,
	.cssgradients .buttonDisabled.buttonThemeB,
	.cssgradients .buttonGroupFunctionA .buttonThemeB,
	.cssgradients .buttonGroupFunctionA .buttonThemeB.first {
		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 */	
	}
		/* per-context */
		.cssgradients .migrationContext .buttonThemeB {
			padding-top: 3px;
			padding-bottom: 3px;
		}

.cssgradients .buttonThemeC {
	padding: 13px 19px 11px;
}
	/* buttonThemeC skin : this theme uses the same skin as generic button */

/* keep this after all other theme styles */
.cssgradients .buttonThemeD,
.cssgradients .buttonDisabled.buttonThemeD {
	padding-top: 8px;
}
	/* buttonThemeD skin */
	.cssgradients .buttonThemeD,
	.cssgradients .buttonDisabled.buttonThemeD,
	.cssgradients .buttonGroupFunctionA .buttonThemeD,
	.cssgradients .buttonGroupFunctionA .buttonThemeD.first {
		-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;
	}


/* button tag fixes */
button {
	font-size: 1em;
}
button.button {
	border: 0;
	padding-top: 0;
	padding-bottom: 0;
	height: 34px;
	overflow: visible;
	top: 1px;
	min-width: 63px;
}
	button.buttonThemeB {height: 31px; top: 2px;}
	button.buttonThemeC {height: 44px;}
	.cssgradients button.button {
		padding-top: 7px; 
		padding-bottom: 6px; 
		top: auto;
		min-width: 70px;
	}
	.cssgradients button.buttonThemeB {padding-top: 5px; padding-bottom: 5px;}
	.cssgradients button.buttonThemeC {padding-top: 12px; padding-bottom: 10px;}
	
/* [bell.connector.css] Buttons Hover effect, if updating css, please duplicate changes in bell.connector.css also */
.buttonThemeA:hover,
.buttonThemeA:active,
.buttonThemeB:hover,
.buttonThemeB:active {
	border-color: #0066a4 !important;
	z-index: 9;
	color: #0066a4;
}
	/* enables hover shadows */
	.cssgradients .button:hover {
		box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
		-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);		
	}
	.cssgradients .button:active {
		box-shadow: none;
		-webkit-box-shadow: none;		
	}
	/* hover effect for icons (switches to hover sprite) */
	.borderradius .buttonThemeA:hover .icon,
	.borderradius .buttonThemeB:hover .icon {
		background-image: url(../images/bg_iconSprite_hover.png);
	}	


/* buttonThemeE */
.buttonThemeE,
.cssgradients .buttonThemeE {
	height: auto;
	padding: 20px;
	background: #282f37;
	display: block;
	vertical-align: middle;
	border: 1px solid transparent;
	border-bottom-width: 0;
}
.cssgradients .buttonThemeE {
	border-bottom-width: 1px;
}
	.buttonThemeE [class*="headingType"] {color:#fff;}
	.buttonThemeE .buttonExtra1 {display: none;}	

.buttonThemeE.active,
.buttonThemeE:hover {
	background: #0066a4 url(../images/bg_gradient_c.png) repeat-x left bottom;
	border-color: #000;
}
.borderradius .buttonThemeE {border-radius: 0;}
.cssgradients .buttonThemeE.active,
.cssgradients .buttonThemeE:hover {
	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: none;
	box-shadow: none;
}	
	

/* [bell.connector.css] =buttonFunctionA : Forces any button to take all available space */
.buttonFullWidth, .buttonFunctionA {display: block;}	
	button.buttonFunctionA {width: 100%;}
	
/* =buttonFunctionB : button utility class that minifies a button (mostly used for "icon only" presentation) */
.buttonSmall, .buttonFunctionB {
	min-width: 20px;
	padding-left: 2px !important;
	padding-right: 3px !important;
}
	.buttonSmall .icon, .buttonFunctionB .icon {
		left: 4px;
		top: -2px;
		margin-right: 0 !important;
	}
.cssgradients .buttonSmall, 
.cssgradients .buttonFunctionB {
	padding-left: 5px !important;
	padding-right: 5px !important;
}
	.cssgradients  .buttonSmall .icon, 
	.cssgradients  .buttonFunctionB .icon {left: auto; top: auto;}
	
/* =buttonDisabled : button utility class that gives a disabled state for buttons */
.buttonDisabled {
	color: #fff;
	cursor: default;
	text-shadow: none;
}
	.buttonDisabled.buttonThemeA,
	.buttonDisabled.buttonThemeB,
	.buttonDisabled.buttonThemeD {
		color: #999;
	}
	.buttonDisabled.buttonThemeA:hover,
	.buttonDisabled.buttonThemeB:hover {
		border-color: #aeaeae !important;
	}
.buttonDisabled, .buttonDisabled .buttonExtra1 {
	background-image: url(../images/bg_buttonDisabledSprite.png);
}
	.cssgradients .buttonDisabled {
		background: #aeaeae;
		border: 1px solid #aeaeae;
	}
	.cssgradients .buttonThemeA.buttonDisabled:hover,
	.cssgradients .buttonThemeB.buttonDisabled:hover {
		/* #! same as default shadow - duplicated here */
		box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.8);
		-webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.8);
	}
	
	
/* =buttonAside : vertically aligns text next to a button */
.buttonAside {
	display: inline-block;
	vertical-align: middle;
	margin-top: 0;
	margin-bottom: 0;
}

	
/* [bell.connector.css] =buttonGroup : grouping two or more buttons together */
.buttonGroup {position: relative; text-align: right;}
	.buttonGroup .button {margin-left: 5px;}
	.buttonGroup .buttonFullWidth,
	.buttonGroup .buttonFunctionA {
		margin-bottom: 10px;
	}
	
	/* this is to fix the hover effect shadows cut on button when within a itemContent; caused by overflow hidden */
	.itemContent .buttonGroup {margin-bottom: 5px;}
	
.buttonGroupThemeA {text-align: left;}
	.buttonGroupThemeA .button {
		margin-left: 0; 
		margin-right: 12px;
	}
	.cssgradients .buttonGroupThemeA .button {margin-right: 5px;}
	
.buttonGroupThemeB {text-align: center;}

	/* per-context */
	.buttonGroup.open .flyOut {display: block;}
		.buttonGroup .flyOut {right: -24px;}
			.buttonGroup .flyOutArrow {
				left: auto;
				right: 24px;
			}

/* buttonGroupFunctionA : Merges two or more buttons together */
.buttonGroupFunctionA .button {
	margin-left: 0;
	margin-right: -0.25em; /* -3px : in em for better zooming */
	border-left-width: 1px;
	border-left-style: solid;
	padding-right: 14px; /* same as generic button */ 
}
	.buttonGroup.buttonGroupFunctionA .button.first {border-left-width: 0;}

/* Opened/Active state */
.cssgradients .buttonGroup.open .buttonToggle {
	background: #676767 !important;
	border-color: #333 !important;
	-webkit-box-shadow: inset 0 1px 4px rgba(0,0,0, .6) !important;
	-moz-box-shadow: inset 0 1px 4px rgba(0,0,0, .6) !important;
	box-shadow: inset 0 1px 4px rgba(0,0,0, .6) !important;
}
	/* Gives a white arrow when opened */
	.buttonGroup.open .buttonToggle .iconArrow {
		background-position: 0 0;
	}
	.buttonGroupFunctionA .last,
	.buttonGroupThemeA.buttonGroupFunctionA .last {
		margin-right: 7px; /* compensates for the negative margin-right */
	}
		.buttonGroupFunctionA .last .buttonExtra1 {
			display: block;
		}

/* Button themes variation overwrites - CSS2 */
.buttonGroupFunctionA .button {background-position: -4px 0; border-color: #000;}
	.buttonGroupFunctionA .button.first {background-position: 0 0;}
.buttonGroupFunctionA .buttonThemeA {background-position: -4px -50px; border-color: #bfbfbf;}
	.buttonGroupFunctionA .buttonThemeA.first {background-position: 0 -50px;}
.buttonGroupFunctionA .buttonThemeB {background-position: -4px -101px; border-color: #bfbfbf;}
	.buttonGroupFunctionA .buttonThemeB.first {background-position: 0 -101px;}
.buttonGroupFunctionA .buttonThemeC {background-position: -4px -148px;}
	.buttonGroupFunctionA .buttonThemeC.first {background-position: 0 -148px;}
.buttonGroupFunctionA .buttonThemeD {background-position: -4px -201px;}
	.buttonGroupFunctionA .buttonThemeD.first {background-position: 0 -201px;}

/* CSS3 style inherit from base button css */
.cssgradients .buttonGroup.buttonGroupFunctionA .button {
	margin-right: -0.3333em; /* -4px : in em for better zooming */
	
	/* re-forces the button to align as if it was in the normal flow (caused by the negative margins) */
	right: 0.333em; 
}
	/* do not apply the above fix for these specific themes */
	.cssgradients .buttonGroupThemeA.buttonGroupFunctionA .button,
	.cssgradients .buttonGroupThemeB.buttonGroupFunctionA .button {
		right: auto;
	}

/* Re-sets the left border for visual presentation (was removed earlier - see non-css3 styles) */
.cssgradients .buttonGroup.buttonGroupFunctionA .first {border-left-width: 1px;}
	.cssgradients .buttonGroupFunctionA .button {
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;	
	}
		/* Re-sets the correct border radiuses to the first/last buttons */
		.cssgradients .buttonGroupFunctionA .first,
		.cssgradients .buttonGroupThemeA.buttonGroupFunctionA .first {
			-webkit-border-radius: 4px 0 0 4px;
			-moz-border-radius: 4px 0 0 4px;
			border-radius: 4px 0 0 4px;		
		}
		.cssgradients .buttonGroupFunctionA .last,
		.cssgradients .buttonGroupThemeA.buttonGroupFunctionA .last {
			border-right-width: 1px;
			margin-right: 0;
			-webkit-border-radius: 0 4px 4px 0;
			-moz-border-radius: 0 4px 4px 0;
			border-radius: 0 4px 4px 0;		
		}

/* Hides the extra */
.buttonGroupFunctionA .buttonExtra1,
.cssgradients .buttonGroupFunctionA .last .buttonExtra1 {
	display: none;
}
	/* per-context corrections */
	.buttonGroupFunctionA .flyOut .textList .first,
	.buttonGroupFunctionA .flyOut .textList .last {
		border: 0;
		margin-right: 0;
		margin-left: 0;
	}


/* =notification */
.notification {
	background-color: #2a2a2a;
	color: #fff !important;
	border-bottom: 1px solid #404040;
}
	.notificationWrap {
		margin: 0 auto;
	}
		.notificationContent {
			position: relative;
			padding-top: 20px;
			padding-bottom: 17px;
		}
	
	/* per-context */
	.notification .messageTitle, .notification .message a {color: #fff;}
	.notification .message a {text-decoration: underline;}
	.notification .aside {top: 22px;} /* <- compensates for the padding top of the box */


/* [bell.connector.css] =form */
form {margin-bottom: 0;}

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

input {margin: 0; padding: 0; margin-right: 8px;}

input, label, .formContent, .inputGroup, .formAside, .formAside a, .formAside p {
	position: relative;
}
	
	/* [bell.connector.css] =labelOver : label over the input field (equivalent to "placeholder" attribute from HTML5) */
	.labelOver {
		position: absolute;
		/*cursor: text;
		z-index: 4;
		top: 4px;
		left: 8px; - should be same value as its input's padding-left */
	}
		/* per-context */
		.formTextThemeA .labelOver.headingType4 {
			top: 12px; 
			left: 12px; /* should be same value as its input's padding-left */
		}
		.formTextThemeA .labelOver.headingType5 {
			top: 14px; 
			left: 12px; /* should be same value as its input's padding-left */
		}



/* [bell.connector.css] =formGroup */
.formGroup {position: relative; margin-bottom: 12px;}
	
	.formHeader {
		font-size: 1.16em; 
		margin-bottom: 5px; 
		margin-right: 10px;
		position: relative;
	}
	
	.formContent {
		float: left;
		top: -1px;
	}
		table .formContent {margin-right: 0;}
		
		/* Floats inputGroups */
		.formContentThemeA .inputGroup,
		.formContentThemeB .inputGroup {
			display: inline-block;
			margin-right: 20px;
			vertical-align: top;
		}
			/*.formContentThemeA .inputGroup  !# make some trouble in ie9 {
				width: auto;
			}*/
			.formContentThemeB .inputGroup {
				width: 40%;
				margin-right: 0;
			}
			
.formGroupThemeA .formHeader { 
	float: left;
	margin-right: 10px;
}
	.formGroupThemeA .formContent, 
	.formGroupThemeB .formContent {
		margin-right: 10px;
		width: auto;
	}
	.formGroupThemeA .formAside, 
	.formGroupThemeB .formAside {
		margin-left: 0;
	}
	
/* Cascading elements from formGroupThemeB, formGroupThemeC and formGroupThemeC */
.formGroupThemeB .formHeader, .formGroupThemeC .formHeader, .formGroupThemeD .formHeader, .formGroupThemeE .formHeader {
	position: relative;
	float: left; 
	text-align: right;
}

/* =formGroupThemeC */
.formGroupThemeB .formHeader { 
	width: 200px;
}

	.formGroupThemeB.noHeader .formContent{ /* In case there is no sectionHeader */
		margin-left:208px; /* Header width + 8px (margin - button Alignment) */
	}

/* =formGroupThemeC */
.formGroupThemeC .formHeader { 
	width: 150px; 
}
	.formGroupThemeC.noHeader .formContent{
		margin-left:158px; /* Header width +8px (margin - button Alignment) */
	}

/* =formGroupThemeD */
.formGroupThemeD {
	display:inline-block;
	margin-right:20px;
}

	.formGroupThemeD.formText input {
		display:inline-block;
	}

/* =formGroupThemeD */
.formGroupThemeE .formHeader { 
	width: 78px; 
}
	
/* [bell.connector.css] =inputGroup : grouping two or more input elements with other elements; may be used also as a simple input wrapper */
.inputGroup {
	margin-bottom: 5px;
}
	/* inputGroupSize */
	.inputGroupSize1, 	 	.formTerms .inputGroupSize1 	.scrollView 		{width: 3em;}
	.inputGroupSize2, 	 	.formTerms .inputGroupSize2 	.scrollView 		{width: 6em;}
	.inputGroupSize3, 	 	.formTerms .inputGroupSize3 	.scrollView 		{width: 9em;}
	.inputGroupSize3-5,	 	.formTerms .inputGroupSize3-5  .scrollView 	{width: 10.5em;}
	.inputGroupSize4, 	 	.formTerms .inputGroupSize4 	.scrollView 		{width: 12em;}
	.inputGroupSize5, 	 	.formTerms .inputGroupSize5 	.scrollView 		{width: 15em;}
	.inputGroupSize6, 	 	.formTerms .inputGroupSize6 	.scrollView 		{width: 18em;}
	.inputGroupSize7, 	 	.formTerms .inputGroupSize7 	.scrollView 		{width: 21em;}
	.inputGroupSize8, 	 	.formTerms .inputGroupSize8 	.scrollView 		{width: 24em;}
	.inputGroupSize9, 	 	.formTerms .inputGroupSize9 	.scrollView 		{width: 27em;}
	.inputGroupSize10, 		.formTerms .inputGroupSize10  .scrollView 	{width: 30em;}
	.inputGroupSize11, 		.formTerms .inputGroupSize11  .scrollView 	{width: 33em;}
	.inputGroupSize12, 		.formTerms .inputGroupSize12  .scrollView 	{width: 36em;}
	.inputGroupSize13, 		.formTerms .inputGroupSize13  .scrollView 	{width: 39em;}
	.inputGroupSize14, 		.formTerms .inputGroupSize14  .scrollView 	{width: 42em;}
	.inputGroupSize15, 		.formTerms .inputGroupSize15  .scrollView 	{width: 45em;}
	.inputGroupSize16, 		.formTerms .inputGroupSize16  .scrollView 	{width: 48em;}
	.inputGroupSize17, 		.formTerms .inputGroupSize17  .scrollView 	{width: 51em;}
	.inputGroupSize18, 		.formTerms .inputGroupSize18  .scrollView 	{width: 54em;}
	.inputGroupSize19, 		.formTerms .inputGroupSize19  .scrollView 	{width: 57em;}
	.inputGroupSize20, 		.formTerms .inputGroupSize20  .scrollView 	{width: 60em;}
	
	.inputGroupSize1 	select {width: 36px;}  /*3em*/ 
	.inputGroupSize2 	select {width: 72px;}  /*6em*/
	.inputGroupSize3 	select {width: 108px;} /*9em*/
	.inputGroupSize3-5 	select {width: 126px;} /*10.5em*/
	.inputGroupSize4 	select {width: 144px;} /*12em*/
	.inputGroupSize5 	select {width: 180px;} /*15em*/
	.inputGroupSize6 	select {width: 216px;} /*18em*/
	.inputGroupSize7 	select {width: 252px;} /*21em*/
	.inputGroupSize8 	select {width: 288px;} /*24em*/
	.inputGroupSize9 	select {width: 324px;} /*27em*/
	.inputGroupSize10 	select {width: 360px;} /*30em*/
	.inputGroupSize11 	select {width: 396px;} /*33em*/
	.inputGroupSize12 	select {width: 432px;} /*36em*/	
	.inputGroupSize13 	select {width: 468px;} /*39em*/
	.inputGroupSize14 	select {width: 504px;} /*42em*/	
	.inputGroupSize15 	select {width: 540px;} /*45em*/
	.inputGroupSize16 	select {width: 576px;} /*48em*/
	.inputGroupSize17 	select {width: 612px;} /*51em*/
	.inputGroupSize18 	select {width: 648px;} /*54em*/
	.inputGroupSize19 	select {width: 684px;} /*57em*/
	.inputGroupSize20 	select {width: 720px;} /*60em*/

/* Custom form elements */
.inputCustom label:hover {
	cursor: pointer;
}
/* Moving the input element off screen, exact same behavior as "offScreen" class */
.inputCustomRadio input, 
.inputCustomSelect select {
	position: absolute;
	top: -9999em !important;
}
	/* [bell.connector.css*] =inputCustomTrigger */
	.inputCustomTrigger {		
		position: absolute; 
		left: 0;
		width: 16px;
		height: 15px;
		background-color: transparent;
		background-repeat: no-repeat;
		background-position: 0 -33px;
	}
	.inputCustomTrigger:hover, .formSelect .inputCustom, .inputCustomRadio label {cursor: pointer;}
	.noJs .inputCustom .inputCustomTrigger, 
	.noJs .inputCustom .inputCustomContent{
		display: none;
	}
			
	/* per-context */
	.formTerms .inputGroup,
	.formRadio .inputGroup, 
	.formCheckbox .inputGroup {
		padding-left: 20px;
	}
		.formTerms .inputGroup input,
		.formRadio .inputGroup input, 
		.formCheckbox .inputGroup input {
			position: absolute; 
			left: 0;
		}
		.formRadio .inputGroup input {
			position: relative;
			margin-left: -20px;
			margin-right: 5px;
			margin-top: 1px;
			top: 2px;
		}

.formGroupThemeA.formText .formHeader label, 
.formGroupThemeB.formText .formHeader label, 
.formGroupThemeC.formText .formHeader label, 
.formGroupThemeE.formText .formHeader label, 
.formAside a,
.formAside p { 
	top: 5px;
}
.formSelect .formAside a,
.formAside p a { 
	top: 0;
}
		
.formAside {
	float: left;
	margin-left: 10px;
	margin-right: 8px;
}
	.formAside p {margin-bottom: 0px;}
	.formAside .button {top: -1px;}
	.formAside > .iconExclamationA,
	.formAside > .iconExclamationB,
	.formAside > .iconCheckE {top: 5px;}
	/*.footer .formAside .button {top: -2px;}*/

/* Textfields style */
.formText input, .formTextArea 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 */
	.formGroup .inputThemeA,
	.lightBoxContent .formGroup input,	.lightBoxContent .formGroup textarea {
		background-color: #f2f2f2;
		border-top-color: #5f5f5f;
		border-bottom-color: #cdcdcd;
		border-left-color: #a6a6a6;
		border-right-color: #a6a6a6;	
	}

/* [bell.connector.css] =formText */	
.formText 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%;	
}
	/* [bell.connector.css] =formTextThemeA : Bigger text field with rounded corners */
	.formTextThemeA input {
		position: relative; 
		display: block;
		height: 44px;
		font-size: 1.333em; /* 16px */
		padding: 13px 0 8px 12px;
		font-weight: normal;
		border-bottom-color: #bdbdbd;
	}
	.formTextThemeB input {
		color: #555;
		font-family: Helvetica, Arial, sans-serif;
		font-size: 1.2em; /* 14px */
		height: 34px;
		margin-bottom: 0;
		border-bottom-color: #d4d4d4;

		-webkit-box-shadow: inset 0 5px 15px -5px rgba(0, 0, 0, .2);
		box-shadow: inset 0 5px 15px -5px rgba(0, 0, 0, .2);
	}
		.formTextThemeB .labelOver.headingType5 {
			top: 9px;
			left: 12px;
		}
		
	
/* [bell.connector.css] =formRadio */
.formRadio input {margin-left: 1px;}

	/* Custom */
	.formRadio .inputCustomRadio input {
		left: -4px;
		padding: 0;
		vertical-align: middle;
		height: 16px;
	}
	.formRadio .inputCustomTrigger {top: 2px;}
	.formRadio .checked .inputCustomTrigger {background-position: -16px -33px;}
	.formRadio .checked label { font-weight: bold; }

		/* Color pills context */
		.colorsContext .formContent {min-height: 21px;}
		.colorsContext .inputCustomRadio {
			margin-right: 0;
			margin-bottom: 3px;
			line-height: 20px; /* should be the same height as color pill's height */
		}
			.colorsContext .inputCustomRadio label {top: 2px; position: absolute; top: 0; left: 0;}
			
		.colorsContext .inputCustomRadio .inputCustomTrigger {
			background-image: none;
			width: 20px;
		}
		.colorsContext .inputCustomRadio,
		.colorsContext .inputCustomRadio .inputCustomTrigger {
			height: 20px;
		}
		.colorsContext .checked .inputCustomTrigger {
			background: url(../images/bg_colorSprite.png) no-repeat 0 0;
		}
	
	/* custom radio button overwrites (same as in bell.connector.css) */
	.formRadio .padder .inputGroupThemeA {
		left: -2px;
	}
	.formRadio .inputGroupThemeA label:hover {
		cursor: pointer;
	}
	.formRadio .inputGroupThemeA input {
		top: -9999em; 
		left: -4px;
		/* padding: 0; */
		vertical-align: middle;
		height: 16px;
	}
		.formRadio .inputImage {top: 1px;}
		.formRadio .headingType5 .inputImage {top: 2px;}
		
		
/* =formCheckbox */
.formCheckbox input {top: 2px;}
	/* per font size variation */
	.headingType1 input {top: 12px;}
	.headingType2 input {top: 10px;}
	.headingType3 input {top: 6px;}
	.headingType4 input {top: 4px;}
	.headingType5 input {top: 2px;}

/* =formSelect */
/* OBSOLETE?
.formSelect {
	top: 5px;
}
.formSelect.formSelectCustom {
	top: 0;	
}*/

.formSelect .formContentThemeA select {margin-bottom: 3px;}

.formSelect select {text-overflow: ellipsis;}

	/* Custom */
	.formSelect .inputCustom, .formSelect .inputCustomTrigger,
	.inputCustomSelect, .inputCustomSelectTrigger{
		height: 2.8333em;
		text-align: left;
	}
	.formSelect .inputCustom,
	.inputCustomSelect { 
		position: relative;
		border: 1px solid #ccc;
		z-index: 1;
		
		-webkit-border-radius: 3px;
		border-radius: 3px;
		-webkit-box-shadow: inset 0px -1.4em 0px 0px rgba(0, 0, 0, .05);
        box-shadow: inset 0px -1.4em 0px 0px rgba(0, 0, 0, .05);
	}
		.formSelect .inputCustomTrigger, .formSelect .inputCustomContent li,
		.inputCustomSelectTrigger, .inputCustomSelectContent li {
			padding-left: 15px; 
			padding-right: 15px;
			background-image:none;	
		}
		.formSelect .inputCustomTrigger, 
		.inputCustomSelectTrigger { 
			/* this remove the normal css for radio button custom */
			position: static; 
			width: auto; 
			overflow: hidden;
			background: none; 
			padding-right: 40px;
			line-height: 2.8333em; /* should be same value as ".formSelect .inputCustom" height */
		}
				
			.inputCustomTriggerValue,
			.inputCustomSelectTriggerValue {
				display: block;
			}
			
			.formSelect .inputCustomTriggerExtra1,
			.inputCustomSelectTriggerExtra1 { 
				position: absolute; 
				top: 50%;
				margin-top: -15px;		
				right: 2px; 
				width: 33px; 
				height: 30px;
				background-repeat: no-repeat;        
				background-position:0 -239px; 
			}
		
		.formSelect .inputCustomContent,
		.inputCustomSelectContent { 
			position: relative;
			margin-left: -1px;
			margin-right: -1px;
			background-color: #ffffff;
			border: 1px solid #cccccc;
			
			-webkit-border-bottom-right-radius: 3px;
			-webkit-border-bottom-left-radius: 3px;
			border-bottom-right-radius: 3px;
			border-bottom-left-radius: 3px;
		}		
			.formSelect .inputCustomContent li,
			.inputCustomSelectContent li {
				padding-top: 8px;
				padding-bottom: 8px;
				margin: 2px;
			}
			.formSelect .inputCustomContent li:hover,
			.inputCustomSelectContent li:hover {
				background-color: #dadada;
			}
			
.inputCustomSelectThemeA,
.inputCustomSelectThemeA .inputCustomSelectTrigger {
	height: 2em;
}
.inputCustomSelectThemeA {
	background-position: 0 -10px;
	-webkit-box-shadow: none;
	box-shadow: none;
	font-size: 14px;
}
.inputCustomSelectThemeA:hover {
	cursor: pointer;
}
	.inputCustomSelectThemeA .inputCustomSelectTrigger {
		line-height: 2em;
		padding-left: 10px;
	}
		.inputCustomSelectThemeA .inputCustomSelectTriggerExtra1 {
			background-position: 0 -269px;
			right: 0;
			-webkit-border-radius: 3px 3px 0 0;
			border-radius: 3px 3px 0 0;
		}
			
		
/* =formTextArea */
.formTextArea .sectionHeader {top: 7px;}
.formTextArea textarea {
	display: block;
	font-weight: 400;
	font-size: 14px;
	line-height: 16px;
	padding: 7px 5px 3px 5px;
}

/* =formTerms */

/* [bell.connector.css] =formError */
.formError .formHeader {font-weight: bold;}
.formError input[type="text"], .formError select {border-color: #aa0000 !important;}


/* =scrollView : makes any compatible (div, p, ...) element "scrollable" - using browser's scrollbar */
.scrollView {
	background-color: #eee;
	border-top: 1px solid #5f5f5f;
	border-right: 1px solid #a6a6a6;
	border-bottom: 1px solid #cdcdcd;
	border-left: 1px solid #a6a6a6;
	margin-bottom: 10px;
	overflow: auto;
	padding: 14px 16px 10px;
	
	-webkit-overflow-scroll:touch;

	/* This will prevent manual resizing */
	width: 550px;
	max-width:550px;
	min-width:550px;
	height: 170px;
	min-height: 170px;
	max-height: 170px;
}
	textarea.scrollView {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		line-height: 1.333em;
		color: #555;
		display: block;
		padding: 0 0 0 16px;
	}

	.scrollViewSize1 	{height: 170px;}
	.scrollViewSize2 	{height: 220px;}
	.scrollViewSize3 	{height: 270px;}
	.scrollViewSize4 	{height: 320px;}
	.scrollViewSize5 	{height: 370px;}
	.scrollViewSize6 	{height: 420px;}
	.scrollViewSize7 	{height: 470px;}
	.scrollViewSize8 	{height: 520px;}
	.scrollViewSize9 	{height: 570px;}
	.scrollViewSize10 	{height: 620px;}
	.scrollViewSize11 	{height: 670px;}
	.scrollViewSize12 	{height: 720px;}
	.scrollViewSize13 	{height: 770px;}
	
	/* per element overwrites */
	.formTerms .scrollView {margin-left: -20px;}
	ul.scrollView li {background: none; padding-left: 0; margin-bottom: 6px;}
	
.scrollViewThemeA {padding: 0; background: none; border: 0;}





/* =lightBox : uses many style set by =box */
.lightBox {
	position: fixed;
	z-index: 98;
}
	.lightBoxHeader, .lightBoxFooter {
		min-height: 51px; /* 60px (boxHeader) - 9px (height of the extra, calculate directly from the sprite png) */
	}
	.lightBoxHeader {
		border-bottom: 1px solid #ccc;
	}
		.lightBoxHeaderTitle {width: 90%;}
		.lightBoxHeader .aside {width: 10%;}
			.lightBoxHeader .aside {margin-top: -6px;}
			.borderradius .lightBoxHeader .aside {margin-top: 0;}
		
		.lightBoxHeader .padder {
			padding-top: 6px;
			padding-bottom: 14px;
		}
		.lightBoxHeaderTitle h1,
		.lightBoxHeaderTitle h2,
		.lightBoxHeaderTitle h3,
		.lightBoxHeaderTitle h4,
		.lightBoxHeaderTitle h5,
		.lightBoxHeaderTitle h6 {
			line-height: 30px; /* 40px (boxHeaderTitle) - 9px (height of the extra, calculate directly from the sprite png) */
		}
		
	/* Visual height fixes #! revise this fix */
	.lightBoxFooter {padding-bottom: 4px; margin-top: 6px;}
		.borderradius .lightBoxFooter {margin-top: 0;}
	.lightBoxContent {margin-bottom: -6px; z-index: 1;} /* DO NOT CHANGE 1 since it is used in lightBox plugin to see if new HTML or old code */
		.borderradius .lightBoxContent {margin-bottom: 0;}

	/* Extras */
	.lightBoxExtra1, .lightBoxExtra2, .lightBoxExtra3, .lightBoxExtra4, .lightBoxExtra5, .lightBoxExtra6 {
		background: transparent url(../images/bg_lightBoxSprite_a.png) no-repeat 0 0;
	}
		/* left corners */
		.lightBoxExtra1, .lightBoxExtra2 {left: -11px; background-position: 2px 0;}
		
		/* top corners */
		.lightBoxExtra1, .lightBoxExtra3 {top: -15px; height: 15px;}
		
		/* bottom corners */
		.lightBoxExtra2, .lightBoxExtra4 {bottom: -26px; height: 26px; background-position: 2px -18px;}
		
		/* right corners */
		.lightBoxExtra3, .lightBoxExtra4 {right: -11px; width: 22px; background-position: -955px 0;}
			/* bottom right corner */
			.lightBoxExtra4 {background-position: -955px -18px;} 
			
		/* side shadows */
		.lightBoxExtra5, .lightBoxExtra6 {
			background-position: -976px 0; 
			background-repeat: repeat-y; 
			width: 11px;
			height: 100%;
			top: 0;
		}
			/* left side shadow */
			.lightBoxExtra5 {left: -11px;}
			
			/* right side shadow */
			.lightBoxExtra6 {right: -11px; background-position: -1015px 0;}
				
/* CSS3=lightBox */
.borderradius .lightBox {
	margin-top: -9px; /* compensates for the lightBoxExtra1's visual height */
	-webkit-box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.5);
}
	.borderradius .lightBoxFooter {
		padding-bottom: 0;
		-webkit-border-radius: 0 0 4px 4px;
		border-radius: 0 0 4px 4px;	
	}
	
/* per-context */
.lightBoxContent .gridGroup {width: auto;}
			
			
/* =lightBoxOverlay */
.lightBoxOverlay {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #000;
	opacity: .7;
	z-index: 14; /* should be lower than lightbox's */
}





/* [bell.connector.css] =flyOut */
.flyOut, .flyOutWrap, .flyOutArrow,
.toolTip, .toolTipContent, .toolTipArrow {z-index: 10;}

.flyOutGroup {position: relative}

.flyOut {
	display: block;
	position: absolute;
	top: 67px;
	background: #f2f2f2;
	border: 1px solid #ababab;
}
	
	/* negative margin to compensate for extras height */
	.flyOutWrap {
		position: relative;
		padding: 0 5px 0;
		margin-top: -10px;
		margin-bottom: -5px;
	}
	.flyOutWrapThemeA {
		padding: 1px;
		margin-top: -15px;
		margin-bottom: -10px;
	}
	.flyOutWrapThemeB {
		padding: 5px 10px 5px;
	}
		.flyOutHeader, 
		.loginClientContext .headingType4 {
			position: relative; 
			margin-top: 0; 
			margin-bottom: 10px; 
			padding: 0 4px;
		}
			.flyOutHeader .actionLink {font-size: 1.166em;}
	
	.flyOutContent h2 {font-size:1.8em;}

		.flyOutThemeA .flyOutWrap {padding: 15px 20px 5px; margin-bottom: 0;}
		.flyOutThemeA .flyOutHeader, 
		.loginClientContext .headingType4 {padding-left: 0; padding-right: 0; font-weight: bold;}

	.flyOutFooter {
		background-color: #f5f5f5;
		background-position: 0 -15px;
		border-top: 1px solid #ccc;
		padding: 9px 15px;
		text-align: left;
		-webkit-border-radius: 0 0 4px 4px;
		border-radius: 0 0 4px 4px;
	}
		
	/* Extras */
	.flyOutExtra1, .flyOutExtra2, .flyOutExtra3, .flyOutExtra4, .flyOutExtra5, .flyOutExtra6, .flyOutArrow {
		background: transparent url(../images/bg_flyOutSprite_a.png) no-repeat 0 0;
	}
		/* left corners */
		.flyOutExtra1, .flyOutExtra2 {left: -10px;}
		
		/* top corners */
		.flyOutExtra1, .flyOutExtra3 {top: -17px; height: 17px;}
		
		/* bottom corners */
		.flyOutExtra2, .flyOutExtra4 {bottom: -26px; height: 26px; background-position: 0 -18px;}
		
		/* right corners */
		.flyOutExtra3, .flyOutExtra4 {right: -10px; width: 20px; background-position: -955px 0;}
			/* bottom right corner */
			.flyOutExtra4 {background-position: -955px -18px;} 
			
		/* side shadows */
		.flyOutExtra5, .flyOutExtra6 {
			background-position: -975px 0; 
			background-repeat: repeat-y; 
			width: 11px;
			height: 100%;
			top: 0;
		}
			/* left side shadow */
			.flyOutExtra5 {left: -10px;}
			
			/* right side shadow */
			.flyOutExtra6 {right: -10px; background-position: right 0;}
			
		/* Arrow */
		.flyOutArrow {
			position: absolute;
			top: -40px;
			margin-left: -17.5px;
			width: 35px;
			height: 35px;
		}
			/* Top */
			.flyOutArrow {
				left: 24px;
				background-position: 0 -51px;
			}
			/* Right */
			.flyOutArrowThemeA {
				top: 5px;
				right: -24px;
				left: auto;
				background-position: -36px -51px;
			}
			/* Bottom */
			.flyOutArrowThemeB {
				top: auto;
				bottom: -24px;
				left: 24px;
				background-position: -72px -51px;
			}
			/* Left */
			.flyOutArrowThemeC {
				top: 8px;
				left: -8px;
				background-position: -108px -51px;
			}

		
/* CSS3=flyOut */
.borderradius .flyOut {
	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 .flyOutWrap {
		margin-top: 0;
		margin-bottom: 0;
		padding-top: 5px;
	}
		.borderradius .flyOutWrapThemeA {
			padding-top: 1px;
		}
		.borderradius .flyOutWrapThemeB {
			padding: 10px 10px 5px;
		}
		
	.borderradius .flyOutThemeA {padding-bottom: 10px;}
		.borderradius .flyOutThemeA .flyOutWrap:first-child {padding-top: 20px;}
		.borderradius .flyOutArrow {top:-25px;}
	
/* Default flyOut positioning per-context */
.flyOutGroup .flyOut {left: 50%; width: 190px; margin-left: -72px; top: 50px;}
	.flyOutGroup .flyOut .flyOutArrow {left: 50%; margin-left: -17.5px;}
	
.aside .flyOutGroup .flyOut {left: auto; right: 0; top: 57px;}
	.aside .flyOutGroup .flyOut .flyOutArrow {left: auto; right: 7px;}
	
.borderradius .flyOutGroup .flyOut {top: 35px;}
.borderradius .aside .flyOutGroup .flyOut {top: 42px;}
	


	
		
/* [bell.connector.css] =flyOutLayout : special layout placement for flyOuts (specific - use with caution) */
.flyOutLayoutB {width: 464px;}
.flyOutLayoutC {width: 920px;}

.flyOutLayoutB .column, 
.flyOutLayoutC .column {
	width: 50%;
}
	.flyOutLayoutA .listView, .flyOutLayoutA .listView li, 
	.flyOutLayoutB .listView, .flyOutLayoutB .listView li, 
	.flyOutLayoutC .listView, .flyOutLayoutC .listView li {
		float: left;
	}

	/* per-elements */
	.flyOutLayoutA .columnContent {padding-right: 0;}
	.flyOutLayoutB .columnContent, 
	.flyOutLayoutC .columnContent {padding-right: 5px;}
		.flyOutLayoutA .listView, 
		.flyOutLayoutB .listView, 
		.flyOutLayoutC .listView {margin-left: -5px;}
			.flyOutLayoutA .listView li, 
			.flyOutLayoutB .listView li, 
			.flyOutLayoutC .listView li {margin-bottom: 0;}
			.flyOutLayoutA .listView li a, 
			.flyOutLayoutB .listView li a, 
			.flyOutLayoutC .listView li a {margin-left: 5px;}		



/* [bell.connector.css*] =toolTip */
.toolTip {
	position: absolute;
	background: #fff;
	top: 8px;
	z-index: 99999999;
}
	.toolTipContent {
		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 */
	}

	/* #! .toolTipContent .padder {
		padding-top: 25px;	
	}*/

	.toolTipContent .bt_remove {
		position: absolute;
		top: 5px;
		right: 20px;
		padding-right: 18px;
	}
	.toolTipContent .bt_remove span {
		width: 14px;
		height: 18px;
		display: inline-block;
		margin-left: 5px;
		background-position: -236px -39px;
		position: absolute;
		right: 0;
	}
	
	.toolTipContent p {margin-bottom: 10px;}

	/* Extras */
	.toolTipExtra1, .toolTipExtra2, .toolTipExtra3, .toolTipExtra4, .toolTipExtra5, .toolTipExtra6, .toolTipArrow {
		background: transparent url(../images/bg_toolTipSprite_a.png) no-repeat 1px 0;
	}
		/* left corners */
		.toolTipExtra1, .toolTipExtra2 {left: -10px;}
		
		/* top corners */
		.toolTipExtra1, .toolTipExtra3 {top: -16px; height: 16px;}
		
		/* bottom corners */
		.toolTipExtra2, .toolTipExtra4 {bottom: -16px; height: 16px; background-position: 1px -18px;}
		
		/* right corners */
		.toolTipExtra3, .toolTipExtra4 {right: -10px; width: 20px; background-position: -956px 0;}
			/* bottom right corner */
			.toolTipExtra4 {background-position: -956px -18px;} 
			
		/* side shadows */
		.toolTipExtra5, .toolTipExtra6 {
			background-position: -977px 0; 
			background-repeat: repeat-y; 
			width: 10px;
			height: 100%;
			top: 0;
		}
			/* left side shadow */
			.toolTipExtra5 {left: -10px;}
			
			/* right side shadow */
			.toolTipExtra6 {right: -10px; background-position: -1015px 0;}
			
		.toolTipArrow {
			position: absolute;
			top: -23px;
			margin-left: -17.5px;
			
			/* Top */
			left: 50%;
			background-position: 0 -58px;
		}
			.toolTipArrow, .toolTipArrowThemeB {width: 35px; height: 16px;}
			.toolTipArrowThemeA, .toolTipArrowThemeC {
				top: 50%;
				margin-top: -17.5px;
				width: 16px;
				height: 35px;
			}
			/* Right */
			.toolTipArrowThemeA {
				right: -15px;
				left: auto;
				background-position: -45px -51px;
			}
			/* Bottom */
			.toolTipArrowThemeB {
				top: auto;
				bottom: -23px;
				background-position: -73px -64px;
			}
			/* Left */
			.toolTipArrowThemeC {
				left: 2px;
				background-position: -118px -51px;
			}
			
/* CSS3=toolTip */
.borderradius .toolTip {
	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 .toolTipContent {
		margin-top: 0;
		margin-bottom: 0;
	}
	.borderradius .toolTipArrow {top: -15px;}
	.borderradius .toolTipArrowThemeA, .borderradius .toolTipArrowThemeC {top: 50%;}
	.borderradius .toolTipArrowThemeB {top: auto; bottom: -15px;}
			
/* [bell.connector.css] =resultList 
.resultList {margin-bottom: 10px;}
	.resultList li {margin-bottom: 0;}
		.resultList a {
			font-size: 1.333em;
			display:block;
			padding: 12px 14px 12px;
			color: #555;
			border-bottom:1px solid #c2c2c2;
		}
		.resultList a:hover {
			background-color:#d9e8f1;
			color: #212121;
			text-decoration:none;
		}
*/	

/* =dataList */
.dataList, .dataList .dataListWrap  {
	width: 100%;
}
	.dataList, .dataList .dataListWrap,
	.dataList .dataListHeader, 
	.dataList .dataListContent {
		float: left;
	}
	.dataList .dataListWrap {
		margin-bottom: 12px;
	}
	.dataList .last {
		margin-bottom: 0;
	}
	
	.dataList .odd {background-color: transparent;}
	.dataList .even{background-color: #f5f5f5;}
	
		.dataListHeader,
		.dataListThemeA .dataList .dataListHeader {
			width: 33%; 
			padding-right: 2%;
		}
		.dataListContent, 
		.dataListThemeA .dataList .dataListContent {width: 50%;}
		.dataListValue {
			width: 15%;
			float: right;
		}
			.dataListValue .price {
				text-align: right; 
				padding-right: 2px;
			}
			
		/* =dataListThemeA */
		.dataListThemeA .dataListWrap {
			padding-top: 12px;
			padding-bottom: 11px;
			border-bottom: 1px solid #cdcdcd;
			margin-bottom: 0;
			
		}
		
		/* =dataListThemeB */
		.dataListThemeB {
			border-top: 1px solid #cdcdcd;
		}
			.dataListThemeB .dataListWrap {
				padding-top: 8px;
				padding-bottom: 9px;
				border-bottom: 1px solid #cdcdcd;
				margin-bottom: 0;
			}
				.dataListThemeB .dataListHeader {
					padding-left: 5px;
				}
				
		/* =dataListThemeC */
		.dataListThemeC .dataListWrap {
			float: left;
			border-right: 1px solid #cdcdcd;
			padding-right: 15px;
			margin-right: 15px;
			margin-bottom: 2px;
		}
			.dataListThemeC .dataListWrap,
			.dataListThemeC .dataListHeader,
			.dataListThemeC .dataListContent {
				width: auto;
			}
			.dataListThemeC .dataListHeader {
				padding-right: 10px;
			}
			.dataListThemeC .dataListWrap.last {
				border-right: 0;
				margin-right: 0;
			}
			
			/* dataListThemeD */
			.dataListThemeD {}
				.dataListThemeD .dataListWrap {
					border-bottom: 1px solid #d6d6d6;
					padding-bottom: 10px;
				}
				.dataListThemeD li.last {
					border-bottom: 0;
				}
					.dataListThemeD .dataListHeader {
						float: none;
						width: auto;
					}
					.dataListThemeD .dataListContent {
						float: none;
						color: #212121;
						margin-bottom: 0;
						width: auto;
					}

.dataListFunctionA .dataListHeader,
.dataListFunctionA .dataListContent {
	clear: both;
	width: auto;
}

.dataList.toFloatLeft li {margin-right: 25px;}
		
	 
	
/* =dataListReset is for multi-layer dataList #! evaluate needs
.dataListReset, .dataListReset .dataListWrap  {
	width: 100% !important;
}
.dataListReset, .dataListReset .dataListWrap,
.dataListReset .dataListHeader, 
.dataListReset .dataListContent {
	float: left !important;
}
.dataListReset .dataListWrap{
	border:none !important;
	margin-bottom: 12px !important;
	padding: 0 !important;
}
	.dataListReset .dataListHeader {
		width: 33% !important; 
		padding-right: 2% !important;
	}
	.dataListReset .dataListContent {width: 50%;}
	.dataListReset .dataListValue {
		width: 15% !important;
		float: right !important;
	}
		.dataListReset .dataListValue .price {
			text-align: right !important; 
			padding-right: 2px !important;
		}
	.dataListThemeAReset .dataListWrap {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
		border-bottom: 1px solid #cdcdcd !important;
		margin-bottom: 0 !important;
	}
	.dataListThemeBReset .dataListWrap {
		padding-top: 7px !important;
		padding-bottom: 12px !important;
		border:none;
		border-bottom: 1px solid #cdcdcd !important;
		margin-bottom: 0 !important;
	}
		.dataListThemeBReset .dataListHeader{
			padding-left: 5px !important;
		} */

/* dataListSize : width variations */
.dataListSize1 .dataListHeader {
	padding-right: 0;
}
.dataListSize1 .dataListHeader,
.dataListSize1 .dataListContent {
	width: 49%; /* + padding 2% in dataListHeader = 100% */
}
.dataListSize1 .dataListValue {
	width: auto;
}

/* dataListSizeReset #! evaluate needs 
.dataListSize1Reset .dataListHeader {
	padding-right: 0 !important;
}
.dataListSize1Reset .dataListHeader,
.dataListSize1Reset .dataListContent {
	width: 49% !important;  + padding 2% in dataListHeader = 100% 
}
.dataListSize1Reset .dataListValue {
	width: auto !important;
}*/
	
/* [bell.connector.css] =listView : "button" style list links */
.listView {position: relative;}
.listView li.last, .listView li.last a {margin-bottom: 0;}
	.listView a {
		position: relative;
		background-color: #fff;
		border: 1px solid #cecece; 
		margin-bottom: 5px;
		padding: 5px 0;
		display: block;
		height: 100%;
		text-decoration: none;
	}
		.listView a:hover {
			border-color: #0066a4;
		}
		.listView .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 */
		}
		.listView .active a, .listView a.active:hover {
			border-color: #002f5c;
		}
			.listView a .listViewFigure, .listView a .listViewContent {display: inline-block;}
	
			.listView a .listViewFigure {width: 110px; text-align: center;}
				.listView a .listViewFigure, .listView a .listViewFigure img {vertical-align: middle; max-width: 110px; height: auto;}
			.listView a .listViewContent {vertical-align: middle; width: 35%; font-size: 1.166em; padding-left: 20px;}
						
			.listView a.active {font-weight: bold;}
			
/* listViewThemeA */	
.listViewThemeA, .listViewThemeC {float: left;}
	.listViewThemeA li, .listViewThemeC li {float: left; width: 33%;}
	
/* listViewThemeB */
.listViewThemeB {
	border-top: 1px solid #cecece;
}
	.listViewThemeB li, .listViewThemeB a {
		margin-bottom: 0;
	}
		.listViewThemeB a {
			background: transparent;
			border-right: 0;
			border-top: 0;
			border-left: 0;
		}
		.listViewThemeB .active a {
			color: #212121; /* #! */
			text-shadow: none;
			border-bottom-color: #cecece;
		}
		.listViewThemeB a:hover .listViewContent {
			text-decoration: underline;
		}
			.listViewThemeB a .listViewFigure {
				width: 35px; height: 55px;
			}
			.listViewThemeB a .listViewContent {
				padding-left: 0;
			}
			
/* listViewThemeC */
.listViewThemeC a, .listViewThemeE a {background-position: 0 bottom;}
	.listViewThemeC li {width: auto;}			

/* listViewThemeD */
.listViewThemeD {text-align: left;}
	.listViewThemeD li {width: 100%;}
		.listViewThemeD li a {
			border: 0;
			border-bottom: 1px solid #fff;
			background-color: transparent;
			margin-bottom: 0;
			padding: 12px 10px 10px;
		}
			.listViewThemeD li.last a {border-bottom: 0;}
			.listViewThemeD li a .listViewFigure {
				margin-right: 10px;
			}
			.listViewThemeD li a .listViewContent {
				font-size: 12px;
				padding-left: 0;
				vertical-align: top;
			}
	.flyOut .listViewThemeD li a {
		-webkit-border-radius: 0;
		border-radius: 0;	
	}
	.listViewThemeD li .listViewFigure,
	.listViewThemeD li .listViewContent,
	.flyOut .listViewThemeD li a {width: auto;}

	/* border-radius trimming fix */
	.flyOut .listViewThemeD li:first-child a {
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
		-webkit-top-left-radius: 4px;
		-webkit-top-right-radius: 4px;
	}
	.flyOut .listViewThemeD li:last-child a {
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		-webkit-border-bottom-right-radius: 4px;
	}
	
	
/* listViewThemeE : smaller and thinner style, similar to grayish buttons */
.listViewThemeE {margin-bottom: 10px;}
	.listViewThemeE li {
		display: inline-block; 
		vertical-align: middle;
		width: 11.25em; /* 135px */
		min-width: 135px;
		margin-right: 15px;
	}
		.listViewThemeE li,
		.listViewThemeE li.last {
			margin-bottom: 15px;
		}
			.listViewThemeE a {
				color: #0066a4;
				padding-top: 10px;
				padding-bottom: 9px;
			}
			.listViewThemeE a,
			.listViewThemeE li.last a {
				margin-bottom: 0;
			}
		.listViewThemeE a .listViewFigure {
			width: 50px; 
			max-width: 50px;
		}
		.listViewThemeE a .listViewContent {
			width: 5em;
			padding-left: 0;
			padding-right: 0;
		}
			.listViewThemeE .disabled a:hover  {cursor: default;}
			.listViewThemeE a:hover .listViewContent  {text-decoration: underline;}
	
	/* per-context */
	.listViewThemeB a, .listViewThemeB .textList a  {color: #0066a4;} /* <- need to redeclared because of cascading order */
	.flyOutLayoutA .listView {margin-bottom: -5px;}
	.flyOut .listView a {width: 220px;}
	
	.header .listView li {margin-right: 10px;}
		.header .listView li.last {margin-right: 0;}
		.header .listView .listViewFigure {width: 110px;} /* <- reverting to default listView value #! possible to merge styles */
		.header .listView .listViewContent {width: 25%;}

	/* [bell.connector.css] LOB images : exact same thing in bell.connector.css - #! Evaluate if merge is needed */
	.header .listView .listViewFigure {
		position: relative; 
		overflow: hidden; 
		height: 75px;
		vertical-align: middle;
		background-color: transparent;
	}
		/* Shop */
		#shopHeaderMobility .listViewFigure {background-position: 0 0;}
		#shopHeaderInternet .listViewFigure {background-position: 0 -75px;}
		#shopHeaderTv .listViewFigure {background-position: 0 -150px;}
		#shopHeaderHomephone .listViewFigure {width: 80px; background-position: -14px -225px;}
			#shopHeaderHomephone .listViewContent {width: 40%;}
		#shopHeaderBundles .listViewFigure {background-position: 0 -300px;}
		
		/* IE8- issue with splitter */
		#shopHeaderBundles { width: 193px !important; }
		
			/* active state */
			#shopHeaderMobility.active .listViewFigure {background-position: -111px 0;}
			#shopHeaderInternet.active .listViewFigure {background-position: -111px -75px;}
			#shopHeaderTv.active .listViewFigure {background-position: -111px -150px;}
			#shopHeaderHomephone.active .listViewFigure {background-position: -125px -225px;}
			#shopHeaderBundles.active .listViewFigure {background-position: -111px -300px;}		

	/* inside textList fixes - might need a per-theme context */
	.textList .listView li {
		border-right: 0;
		padding-right: 0;
		margin-right: 0;
		margin-bottom: 0;
	}
	.textList .listView li a {display: block;}
	.textList .listView li a:hover {text-decoration: none;}

/* CSS3=listView */
.borderradius .flyOutLayoutA .listView {margin-bottom: 0;}
	.borderradius .listView 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 .listView .active a {			
		background: rgb(21,128,196);
		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);
	}

	.listViewThemeD li a:hover, 
	.cssgradients .listViewThemeD .active a,
	.listViewThemeD .active a {
		border-color: #fff;
		background-color: #dae8f1;
		background-image: none;
	}	
	
 {
	-webkit-box-shadow: none;
	box-shadow: none;
}
.borderradius .listViewThemeB a {
	-webkit-border-radius: 0;
	border-radius: 0;	
}
.borderradius .listViewThemeC a {
	box-shadow: 0px 1px 0px 0px #fff;
	-webkit-box-shadow: 0px 1px 0px 0px #fff;
}
.borderradius .listViewThemeB a:hover, 
.listViewThemeB a:hover
.borderradius .listViewThemeE a:hover, 
.listViewThemeE a:hover {
	border-color: #cecece;
}
	.cssgradients .listViewThemeB .active a, 
	.listViewThemeB .active a {
		background: none;
	}

.listView .disabled a:hover,
.listView .disabled a:hover .listViewContent,
.borderradius .listView .disabled a:hover,
.borderradius .listViewThemeB a:hover, 
.listViewThemeB a:hover,
.cssgradients .listViewThemeB .active a, 
.listViewThemeB .active a, 
.cssgradients .listViewThemeD .active a,
.cssgradients .listViewThemeD a:hover,
.borderradius .listViewThemeE a:hover {
	-webkit-box-shadow: none;
	box-shadow: none;
	text-decoration: none;
}
	
/* [bell.connector.css] =note : small text (size is "fixed" compared to <small> which is in "em" and relatie to its parent) */
.note {
	font-size: 11px;
	clear: left;
    display: block;
	line-height: 1.3em;
}
	.formGroup p.note {margin-bottom: 0;}



.badge, .icon {
	position: relative;
	display: inline-block;
	background-color: transparent;
	background-repeat: no-repeat;
	vertical-align: middle;
}

/* [bell.connector.css] =badge : little notification on the element (such as number of emails, etc.) */
.badge {
	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;
}
	.badgeThemeA {background-position: -128px -24px;}
	

/* [bell.connector.css] m */
.icon {
	overflow: hidden;
	background-position: 0 0;
	
	/* default width/height */
	width: 15px;
	height: 15px;
}
	.buttonThemeC .icon {max-height: 18px;}
	
	/* Shared icon dimensions */
	.iconHouseA,
	.iconGearC,
	.iconDocumentA,
	.iconBoxA,
	.iconLibrary,
	.iconDocumentB {
		background-image: url("../images/bg_navigationSprite_c.png");
		width: 55px;
		height: 50px;	
	}
	
	/* 18x18 */
	.iconCloseB, 
	.iconPlusF, 
	.iconMinusA, 
	.iconToggleD, 
	.iconQuestionA, 
	.iconBulb, 
	.iconPage {
		width: 18px; 
		height: 18px;
	}
	
	/* 23x23 */
	.iconBill,
	.iconRefresh,
	.iconTicket,
	.iconFilm,
	.iconFilmA,
	.iconBalance,
	.iconChart,
	.iconProgressBar,
	.iconProgressBarA,
	.iconTruck,
	.iconAt,
	.iconLock,
	.iconGlobe,
	.iconUp,
	.iconUpA,
	.iconDownA,
	.iconSliceA-3,
	.iconFacebook, 
	.iconTwitter, 
	.iconGoogle, 
	.iconLetter, 
	.iconLetterA, 
	.iconLetterC,
	.iconCellphoneB,
	.iconGearB,
	.iconPhoneA,
	.iconYoutube,
	.iconCart, 
	.iconCartA, 
	.iconMagnifyingGlass, 
	.iconMagnifyingGlassA, 
	.iconMagnifyingGlassB, 
 	.iconMail, 
	.iconAvailable, 
	.iconQuestion, 
	.iconDownload,
	.iconPageA,
	.iconListview,
	.iconQuestionC,
	.iconPageB,
	.iconShutdown,
	.iconBook,
	.iconDownloadA,
	.iconProfileA,
	.iconGlobeA,
	.iconLeaf,
	.iconAsterisk,
	.iconLaptop,
	.iconTruckA,
	.iconForward,
	.iconKey,
	.iconTape,
	.iconRefreshA,
	.iconForwardA,
	.iconAdditionA,
	.iconHand,
	.iconDotA,
	.textList .iconPrinter {
		width: 23px; 
		height: 23px;
	}


	.iconPhoneB {
		width: 20px;
		height: 30px;
		background-position: -574px -15px;	
	}

	/* 25x25 */
	.iconExclamation, 
	.iconToggleA {
		width: 25px; 
		height: 25px;
	}
	
	/* 30x30 */
	.iconPlusD, 
	.iconPlusD, 
	.iconToggleB,
	.iconWWW {
		width: 30px; 
		height: 30px; 
	 }
	 
	 /* 31x31 */
	.iconHeadset,
	.iconAddition,
	.iconChatBubbleA,
	.iconPhone, 
	.iconBag,
	.iconMapPin,
	.iconSchedule, 
	.iconText, 
	.iconBox, 
	.iconCellphone,
	.iconCellphoneA, .iconCellphoneContract {
		width: 31px; 
		height: 31px;
	}
	
	/* 35x35 */
	.iconBack {
		width: 35px; 
		height: 35px;	
	}
	
	/* 37x37 */
	.iconCloseA, 
	.iconPlay {
		width: 37px; 
		height: 37px; 
	}	
	
	/* 48x49 */
	.iconChatBubbleC,
	.iconPhoneC,
	.iconScheduleC,
	.iconMapPinC,
	.iconHeadsetC {
		width: 48px;
		height: 49px;
	}
	
	
	/* Other dimensions */
	.iconCsv, 
	.iconPdf, 
	.iconGearA {
		height: 18px; 
	}
	.iconPrinter, 
	.iconChatBubble, 
	.iconChatBubbleB, 
	.actionLink .icon, 
	.iconHouse, 
	.iconPdf, 
	.iconCsv,
	.button .iconLetter, 
	.iconQuestionB,
	.iconEye, 
	.iconGearA {
		width: 18px;
	}	
	.iconLetterB, 
	.iconProfile {
		width: 25px;
		height: 22px;
	}
		a .iconLetterB, a .iconProfile {margin-right: 10px; top: -1px;}
	
		/* =iconLink */
		.iconLink {
			background-position: -178px -2px; 
			margin-left: 5px;
		}
			/* Arrow to the left */
			.iconLinkA {
				background-position: -198px -2px;
			}
				/* per-context */
				.actionLink .iconLink, 
				.actionLink .iconToggle {margin-left: 3px;}
				.actionLink .iconLink {
					background-position: -177px -2px; 
					vertical-align: text-bottom;
					position:relative;
					top:1px;
				}			
			
			.buttonFullWidth .icon, 
			.buttonFunctionA .icon {
				position: absolute;
				right: 5px;
				top: 9px;
			}
			.borderradius .buttonFullWidth .icon,
			.borderradius .buttonFunctionA .icon {right: 11px; top: 8px;}
			
		/* iconArrow */
		.iconArrow {background-position: 0 -16px;}
			/* iconArrowA - see textListThemeB */
			.iconArrowA {background-position: center center;}
			/* iconArrowB - Blue arrow  */
			.iconArrowB {background-position: -1px -112px;}
			/* iconArrowC - White arrow left direction  */
			.iconArrowC {
				background-position: -106px -845px;
				height: 30px;
			}
			.iconArrowD { /* Black arrow left direction */
				background-position: -32px -17px;
			}
			.connector .control:hover .iconArrowD {
				background-position: -32px 0;	
			}
		
		/* iconArrowUp */
		.iconArrowUp {background-position: -16px -16px;}
			
		/* iconCart */
		.iconCart {background-position: -104px 0;}
			.iconCartA {background-position: -78px -149px; height: 18px; width: 30px;}

		/* iconMagnifyingGlass */
		.iconMagnifyingGlass {background-position: -80px 0;}
			.button .iconMagnifyingGlass, .iconMagnifyingGlassA {background-position: -80px -25px;} /* #! need to specify new theme - white theme */
			.buttonThemeC .iconMagnifyingGlass {background-position: -80px -26px;}
			.iconMagnifyingGlassB {background-position: -105px -169px;}
			
		/* iconChatBubble */
		.iconChatBubble {background-position: -177px -21px; top: 0;}
			.iconChatBubbleA {background-position: -405px -108px;}
			.iconChatBubbleB {background-position: -196px -21px;}
			.iconChatBubbleC {background-position: -49px -311px; }
		
		/* iconClose */
		.iconClose {
			background-position: -130px -50px;
			width: 20px; 
			height: 20px;
		}
			.iconCloseA {background-position: -327px -73px;}
				.borderradius .lightBoxHeader .aside .iconCloseA {background-position: -327px -74px;} /* #! fixes a 1px jump bug */
			.iconCloseB {background-position: -233px -39px;}
			
		/* iconLetter */
		.iconLetter {background-position:-154px -96px;}
			.active .iconLetter, .hover .iconLetter {background-position:-154px -120px;}
			.button .iconLetter {height: 15px; background-position:-157px -101px;}
			.iconLetterA, .iconMail {background-position: -153px -24px;}
			.iconLetterB {background-position:-42px -153px;}
			/* iconLetterC */
			.iconLetterC {background-position: -24px -216px;}
			
		/* iconPrinter */
		.iconPrinter {background-position: -177px -60px;}
			/* per-context */
			.textList .iconPrinter {background-position: -174px -56px;}
		
		/* iconAvailable */
		.iconAvailable { background-position:-129px -75px; height: 19px;}

		/* iconAddition */
		.iconAddition { background-position:-404px -75px;}
			/* iconAdditionA */
			.iconAdditionA {background-position: -49px -192px;}
			
		/* social media icons (facebook, twitter, etc.) */
		.iconFacebook {background-position:-82px -96px;}
		.iconTwitter {background-position:-105px -96px;}
		.iconGoogle {background-position:-129px -96px;}
		.iconYoutube {background-position:-153px -48px}
			.active .iconFacebook, .hover .iconFacebook {background-position:-82px -120px;}
			.active .iconTwitter, .hover .iconTwitter {background-position:-105px -120px;}
			.active .iconGoogle, .hover .iconGoogle {background-position:-129px -120px;}
			.active .iconYoutube, .hover .iconYoutube {background-position:-153px -73px;}
			
		/* iconPlay */
		.iconPlay {background-position: -290px -75px;}

		/* iconPlus, iconToggle Open */
		.iconPlus, .actionLink .iconToggle, .toggle .iconToggle {background-position: -216px -2px;}
			.iconPlusA {background-position: -32px -64px;}
				.iconPlusASmall {background-position: -32px -80px;}
			
			.iconPlusB {background-position: -48px -64px;}
				.iconPlusBSmall {background-position: -48px -80px;}
			
			.iconPlusC, .toggle .iconToggleC  {background-position: -65px -65px; margin-right: 5px;}
			.iconPlusD, .toggle .iconToggleB {background-position: -181px -156px;}
			.iconPlusE, .toggle .iconToggleA {background-position: -152px -143px;}
			.iconPlusF, .toggle .iconToggleD {background-position: -233px -20px;}

			.iconPlusG {background-position: -49px -192px;}
			.iconPlusH, .toggle .iconToggleE {background-position: -569px -79px; width: 25px; height: 25px;}
				.toggle .iconToggleE {margin-right: 10px;}
				.boxHeaderTitle .iconPlusH,
				.boxHeaderTitle .toggle .iconToggleE {height: 29px;}
				
		/* iconMinus, iconToggle Close */
		.iconMinus, .toggleOpen .iconToggle {background-position: -235px -2px;}
		.toggleOpen .iconToggleA {background-position: -152px -167px;}
		.toggleOpen .iconPlusD, .toggleOpen .iconToggleB  {background-position: -218px -156px;}
		.toggleOpen .iconToggleC {background-position: -65px -81px;}
		.iconMinusA, .toggleOpen .iconToggleD {background-position: -233px -58px;}
		.iconMinusB, .toggleOpen .iconToggleE {width: 25px; height: 25px; background-position: -537px -79px;}
		
		/* Icon Meter & Slice */
		.iconMeter1, .iconMeter2, .iconMeter3, .iconMeter4, .iconMeter5,
		.iconSlice1, .iconSlice2, .iconSlice3, .iconSlice4, .iconSlice5 { 
			background-image: url(../images/bg_usageSprite.jpg);
			width: 39px; 
			height: 45px;			
		}
			.iconMeter1 {background-position: 0 0;}
			.iconMeter2 {background-position: -40px 0;}
			.iconMeter3 {background-position: -80px 0;}
			.iconMeter4 {background-position: -120px 0;}
			.iconMeter5 {background-position: -160px 0;}
			
			.iconSlice1 {background-position: 0 -45px;}
			.iconSlice2 {background-position: -40px -45px;}
			.iconSlice3 {background-position: -80px -45px;}
				.iconSliceA-3 {background-position: -216px -216px;}
			.iconSlice4 {background-position: -120px -45px;}
			.iconSlice5 {background-position: -160px -45px;}
			
		/* iconHouse */
		.iconHouse {background-position: -196px -79px;}
			.iconHouseA {background-position: -13px -4px;}
			.iconHouseB {background-position: -217px -79px;}
		
		/* iconCheck */
		.iconCheck {background-position: -1px -64px;}
			.iconCheckSmall {background-position: -1px -80px;}
			.iconCheckA {background-position: -1px -96px;}
			.iconCheckB,
			.messageThemeJ .messageTitleExtra1 {background-position: -564px -108px; height: 30px; width: 30px;}
				.boxHeader .aside .iconCheckB {top: 5px;}
			.iconCheckC {
				background-position: -83px -171px; 
				height: 19px;  /* added 1px to have a better vertical alignment with text */
				width: 18px;
			}
			
		/* iconDot */
		.iconDot {background-position: -16px -64px;}
			.iconDotSmall {
				background-position: -16px -83px; 
				height: 10px;
			}
			/* iconDotA */
			.iconDotA {background-position: -73px -192px;}

		/* iconPdf */
		.iconPdf {background-position: -178px -134px;}
			.actionLink .iconPdf {top: -2px;}

		/* iconCsv */
		.iconCsv {background-position: -194px -132px;}
			.actionLink .iconCsv {top: -2px;}

		/* iconPhone */
		.iconPhone {background-position: -437px -108px;}
			/* iconPhoneA */
			.iconPhoneA {background-position: -97px -216px;}
			.iconPhoneC {background-position: 0 -312px;}
			
		/* iconBag */
		.iconBag {background-position: -469px -108px;}
		
		/* iconText */
		.iconText {background-position: -501px -108px;}
		
		/* ~iconWWW */
		.iconWWW {background-position: -217px -261px;}
		
		/* iconMapPin */
		.iconMapPin {background-position: -405px -140px;}
			.iconMapPinC {background-position: -147px -312px;}

		/* iconSchedule */
		.iconSchedule {background-position: -533px -108px;}
			.iconScheduleC {background-position: -98px -312px;}

		/* iconBack */
		.iconBack {background-position: -368px -113px;}
		
		/* iconCellphone */
		.iconCellphone {background-position: -437px -140px;}
			.iconCellphoneA, .iconCellphoneContract {background-position: -469px -140px;}
			.iconCellphoneB {background-position: -264px -193px;}			
			.iconCellphoneC {background-position: -412px -247px; width: 21px; height: 33px;}			
			
		/* iconBox */
		.iconBox {background-position: -501px -140px;}
			.iconBoxA {background-position: -13px -180px;}
		
		/* iconCircle */
		.iconCircle {
			background-position: 0 -129px;
			text-align: center;
			line-height: 35px;
			font-size: 22px;
			color: #fff;
			width: 37px; 
			height: 55px;
		}

		/* Information : white "i" in a blue circle */
		.iconInformation {background-position: -49px -49px; margin-right: 5px;}

		/* Question mark */
		.iconQuestion {background-position: -175px -36px;}
			.iconQuestionA {background-position: -216px -58px;}
			.iconQuestionB {background-position: -215px -21px;}
			.iconQuestionC {background-position: -48px -264px;}

		/* Download file */
		.iconDownload {background-position: -174px -93px;}
			.iconDownloadA {background-position: -145px -264px;}

		/* Take a tour (opened eye) */
		.iconEye {background-position: -108px -149px;}
		
		/* iconVisa */
		.iconVisa {background-position: -406px -174px; width: 44px; height: 28px;}
		
		/* iconMastercard */
		.iconMastercard {background-position: -453px -174px; width: 44px; height: 28px;}
		
		/* iconAmex */
		.iconAmex {background-position: -501px -174px; width: 44px; height: 28px;}

		/* iconInterac */
		.iconInterac {background-position: -546px -174px; width: 28px; height: 28px;}

		/* iconPaypal */
		.iconPaypal {background-position: -483px -211px; height: 19px; width: 59px;}
		
		/* iconProfile */
		.iconProfile {background-position: -41px -131px;}
			.iconProfileA {background-position: -168px -289px;}
		
		/* iconBulb */
		.iconBulb {background-position: -218px -39px;}
		
		/* iconPage */
		.iconPage {background-position: -196px -40px;}		
			.iconPageA {background-position: 0px -216px;}
			.iconPageB {background-position: 1px -264px;}
			
		/* iconDocument */
		.iconDocument {background-position: -15px -345px;}
			.iconDocumentA {background-position: -11px -121px;}
			.iconDocumentB {background-position: -13px -294px;}
	
		/* iconGear */
		.iconGear { background-position: -15px -288px;}
			.iconGearA {	background-position: -196px -58px;}
				/* fixes button bottom jump */
				.button .iconGearA {top: -1px; margin-bottom: -2px;}
			.iconGearB {background-position: -166px -193px;}
			.iconGearC {background-position: -14px -64px;}
		
		/* iconBundle */
		.iconBundle {background-position: -5px -455px; width: 75px;}
		
		/* iconBill */
		.iconBill {background-position: 1px -193px;}
		
		/* iconRefresh */
		.iconRefresh {background-position: -25px -192px;}
			.iconRefreshA {background-position: -120px -288px;}
		
		/* iconTicket */
		.iconTicket {background-position: -97px -193px;}
		
		/* iconFilm */
		.iconFilm {background-position: -121px -193px;}
			.iconFilmA {background-position: -73px -264px;}
		
		/* iconBalance */
		.iconBalance {background-position: -145px -192px;}
		
		/* iconChart */
		.iconChart {background-position: -193px -194px;}
		
		/* iconProgressBar */
		.iconProgressBar {background-position: -220px -192px; width: 24px;}
			.iconProgressBarA {background-position: -218px -288px; width: 26px;}
		
		/* iconTruck */
		.iconTruck {background-position: -288px -193px;}
			.iconTruckA {background-position: -24px -289px;}
		
		/* iconAt - (@) */
		.iconAt {background-position: -49px -217px;}
		
		/* iconLock */
		.iconLock {background-position: -73px -215px;}
			/* iconLockA */
			.iconLockA {
				background-position: -452px -213px;
				height: 22px;
				width: 18px;
			}
		
		/* iconGlobe */
		.iconGlobe {background-position: -121px -217px;}
			.iconGlobeA {background-position: -168px -264px;}
		
		/* iconUp */
		.iconUp {background-position: -145px -217px;}
			.iconUpA {background-position: -168px -217px;}
			
		/* iconUp */
		.iconDown {background-position: -145px -217px;} /* this is duplicated to match icon themes - to update correct image */
			.iconDownA {background-position: -192px -215px;}
		
		/* iconLibrary */
		.iconLibrary {background-position: -14px -238px;}

		/* iconListview */
		.iconListview {background-position: -24px -264px;}

		/* iconShutdown */
		.iconShutdown {background-position: -97px -264px;}

		/* iconBook */
		.iconBook {background-position: -121px -265px;}

		/* iconLeaf */
		.iconLeaf {background-position: -193px -264px;}

		/* iconAsterisk */
		.iconAsterisk {background-position: -288px -265px;}

		/* iconLaptop */
		.iconLaptop {background-position: 0px -289px;}

		/* iconKey */
		.iconKey {background-position: -71px -288px;}

		/* iconForward */
		.iconForward {background-position: -48px -288px;}
			.iconForwardA {background-position: -263px -264px;}

		/* iconTape */
		.iconTape {background-position: -96px -289px;}

		/* iconHand */
		.iconHand {background-position: -144px -288px;}
			.iconHandA {background-position: -442px -247px; width: 29px; height: 33px;}

			/* per-context */
			.button .icon,
			a .iconPlusC {margin-right: 5px;}
				.button .iconCartA,
				.button .iconLink {margin-right: 0;}
				.button .iconCartA {margin-left: 5px;}
				
			.dataTable thead th .icon, .textList li .icon {margin-right: 2px; margin-left: 2px;}
			
			/* #! maybe replace with utility class instead -> to be re-evaluated */
			h1 .iconCircle, h2 .iconCircle, h3 .iconCircle, h4 .iconCircle, h5 .iconCircle, h6 .iconCircle, 
			.headingType1 .iconCircle, .headingType2 .iconCircle, .headingType3 .iconCircle, .headingType4 .iconCircle, .headingType5 .iconCircle, .headingType6 .iconCircle {
				position: absolute;
				top: 0;
				left: -50px;
			}
		
		/* iconWifi */
		.iconWifi {
			background-position: -409px -214px;
			height: 19px;
			width: 28px;
		}

		/* iconHeadset */
		.iconHeadset {
			background-position: -533px -140px; 
		}
			.iconHeadsetA {
				background-position: -442px -282px; 
				width: 29px; 
				height: 33px;
			}
			.iconHeadsetC { background-position: -196px -312px; }			
		
		/* iconLightning */
		.iconLightning {
			background-position: -481px -246px; 
			width: 21px; 
			height: 33px;
		}

		/* iconBluetooth */
		.iconBluetooth {
			background-position: -510px -246px; 
			width: 18px; 
			height: 33px;
		}
		
		/* iconPlane */
		.iconPlane {
			background-position: -536px -242px; 
			width: 26px; 
			height: 33px;
		}
		
		/* iconMemory */
		.iconMemory {
			background-position: -568px -241px; 
			width: 17px; 
			height: 33px;
		}
		
		/* iconBattery */
		.iconBattery {
			background-position: -404px -283px; 
			width: 32px; 
			height: 33px;
		}
		
		/* iconPencil */
		.iconPencil {
			background-position: -196px -294px;
			height: 14px;
		}
		
		/* iconModem */
		.iconModem {
			background-position: -252px -292px;
			height: 20px;
			width: 24px;
		}
		
		
		/* iconStatus */
		.iconStatus { /* Orange color*/ /* former iconStatusThemeA */
			background-position: -16px -96px;
			height: 17px;
			width: 17px;
		}
		
		.iconStatusA { /* Red color*/ /* former iconStatusThemeB */
			background-position: -32px -96px;
			height: 17px;
			width: 17px;
		}
		
		.iconStatusB { /* Green color */ /* former iconStatusThemeC */
			background-position: -48px -96px;
			height: 17px;
			width: 17px;
		}
		
	
/* =iconGroup : groups an icon together and its label text; gives perfect vertically centered alignment */
.iconGroup {position: relative;}

	/* iconFigure : wrap an icon with special visual display */
	.iconFigure {
		display: inline-block;
		width: 45px;
		height: 47px;
		line-height: 45px; /* <- this should be the same as its height - 2px */
		vertical-align: middle;
		text-align: center;
		background-color: transparent;
		background-position: -313px -193px;
		background-repeat: no-repeat;
		margin-right: 5px;
	}
		.iconFigureThemeA {background-position: -358px -193px;}
		
		/* hover state */
		a:hover .iconContent {text-decoration: underline;}
		a:hover .iconFigure {background-position: -313px -240px;}
		a:hover .iconFigureThemeA {background-position: -358px -240px;}
	
	/* iconContent : label/text next to the icon */
	.iconContent {
		display: inline-block;
		vertical-align: middle;
		width: 78%;
	}
		/* minor fix for text wrap */
		.width25 .iconContent {width: 25%;}
		.width33 .iconContent {width: 75%;}



/* =colorPill : shows a squared color pill */
.colorPill {
	background: url(../images/bg_colorSprite.png) no-repeat 20px 0;
	cursor: pointer;
	display: inline-block;
	height: 20px;
	width: 20px;
	position: relative;
	text-indent: -999em;
	top: 0;
	vertical-align: middle;
}
	/* themes variation */
	.colorPillBlack {background-position: -21px -1px;}
	.colorPillGrey, .colorPillSilver {background-position: -42px -1px;}
	.colorPillRed {background-position: -63px -1px;}
	.colorPillBlue {background-position: -84px -1px;}
	.colorPillPurple {background-position: -105px -1px;}
	.colorPillPink {background-position: -126px -1px;}
	.colorPillGreen {background-position: -147px -1px;}
	.colorPillWhite {background-position: -168px -1px;}
	.colorPillGold {background-position: -189px -1px;}

	
/* =price : style for any price elements */
.priceThemeA, .rate {
	font-size: 30px; 
	line-height: 34px;
}

.priceThemeB {
	font-size: 24px;
	line-height: 26px;
}
.priceThemeC, .rate {
	font-size: 40px; 
	line-height: 44px;
}
	.priceThemeA sup,
	.priceThemeB sup,
	.priceThemeC sup,
	.priceThemeA .superscript,
	.priceThemeB .superscript,
	.priceThemeC .superscript {
		font-size: 0.4em;
		top: -12px;
		margin-right: 1px;
	}
		.priceThemeC sup,
		.priceThemeC .superscript {
			top: -17px;
		}

		.priceThemeA sup sup {
			font-size: .8em;
			top: -7px;
		}


/* =priceGroup : groups two or more price component */
.priceGroup {
	position: relative;
	margin-bottom: 15px;
}
	/* per-context */
	.columnContent .priceGroup {margin-bottom: 0;}
	
	
/* =rate : styles big numbers */
.rate {
	display: block;
	font-weight: normal;
	margin-right: 15px;
}
	.rate sup, .rate .superscript {
		font-size: 0.3em;
		line-height: 1.2em;
		display: block;
		color: #979797; 
		top: 0;
	}
.rateThemeA {
    font-size: 20px;
    line-height: 24px;
}
.rateThemeA,
.rateThemeA sup {
	color: #555;
}

	.rateThemeA small {
		font-size: 75%;
	}
	.rateThemeA sup {
		font-size: 50%;
	}



	
/* =showcase : thumbnail view carousel */
.showcase {
	margin: 0 auto;
}
	.showcaseNavigation {
		position: relative;
		margin: 20px auto 15px;
	}
		.showcaseMask {overflow: hidden;}
			.showcaseMask ul {
				float: left;
				right: inherit;
				/*top: inherit;*/
			}
				.showcaseMask ul li {				
					/*float: left;*/
					left: auto;
					/*position: static !important;*/
				}
	
		.showcaseNavigation li {
			margin-right: 10px;
			width: 150px;
		}
		.showcaseNavigation .active a {
			font-weight: bold;
			color: #555;
		}
			.showcaseNavigationThemeA li a {
				display: block;
				line-height: 50px;
			}
			.showcaseNavigationThemeA li img {
				max-width: 25px;
				max-height: 50px;
				height: inherit;
			}
		
		/* next/previous control */
		.showcase .nextPrevious {
			top: 28px;
			position: absolute;
			width: 100%;
		}
			.showcase .nextPrevious .next,
			.showcase .nextPrevious .previous {
				width: 20px;
				height: 31px;
				display: block;
				position: relative;
			}
			.showcase .nextPrevious .next {
				float: right;
				right: -30px;
				background-position: -261px -154px;
			}
			.showcase .nextPrevious .previous {
				float: left;
				left: -36px;
				background-position: -299px -154px;	
			}
				/* disabled states */
				.showcase .nextPrevious .nextDisabled {background-position: -337px -154px;}
				.showcase .nextPrevious .previousDisabled {background-position: -375px -154px;}
			
	.showcaseContent {
		text-align: center;
	}

.showcaseThemeA .showcaseNavigation li {
	width: auto; 
	border: 1px solid #ccc;
	padding: 5px;
}

.showcaseThemeA .showcaseNavigation .active {border: 1px solid #0066a4;}
	
	
/* =status */	
.showcase .status {
	margin-top: 12px;
}
		
		
/* =thumbnail : gives an overlay + optional icon to an element */
.thumbnail, .thumbnailExtra1 {
    display: block;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
	.thumbnail .icon {
		position: absolute;
		top: 50%;
		left: 50%; 
		z-index: 2; /* <- must be higher than thumbnail's */
	}
		.thumbnail .iconPlay {margin-top: -18px; margin-left: -18px;}

	.thumbnailExtra1 {
		background-color: #000;
		opacity: .5;
		left: 0;
		top: 0;
	}
	.active .thumbnailExtra1, .active .thumbnail .icon {display: none;}
	



/* =gallery : cycling carousel */
.gallery {
	overflow: hidden;
}
	.gallery, .galleryMedia, .galleryContent {
		position: relative;	
	}
		.galleryMedia {
			top: 0;
			float: left;	
		}
			.galleryMediaFigure img {margin: 0 auto;}
				
			.galleryMediaContent {
				position: absolute;	
				left: 99px;
				margin-top: -125px;
				top: 50%;
			}
				.galleryMediaContent .box {
					margin-bottom: 0;
				}
				
				/* positions the content to the right */
				.galleryMediaContentThemeA {
					left: 573px;
				}
				/* positions the content to the top */
				.galleryMediaContentThemeB, .galleryMediaContentThemeC {
					top: 10px;
					left: 0px;
					width: 100%;
					margin: 0 auto;
					text-align: center;
				}
				/* positions the content to the bottom */
				.galleryMediaContentThemeC {
					top: auto;
					bottom: 0px;
				}
				
				
				/* Resets/cancels default style */
				.galleryMediaContentReset {
					position: relative;
					top: auto;
					left: auto;
					margin-top: 0;
				}
				
			/* removes grid's margin-left to ease the grid alignment */
			.galleryMediaContent .grid1,
			.galleryMediaContent .grid2,
			.galleryMediaContent .grid3,
			.galleryMediaContent .grid4,
			.galleryMediaContent .grid5,
			.galleryMediaContent .grid6,
			.galleryMediaContent .grid7,
			.galleryMediaContent .grid8,
			.galleryMediaContent .grid9,
			.galleryMediaContent .grid10,
			.galleryMediaContent .grid11 {
				margin: 0;
			}
			
		.galleryNavigation {
			position: absolute;
			top: 50%;
			margin-top: -35px;
			width: 100%;
			z-index: 1;
		}
			.galleryNavigation .next,
			.galleryNavigation .previous {
				display: block;
				position: absolute;
				text-align: center;
				background-color: transparent;
				background-repeat: no-repeat;
				height: 73px;
				width: 70px;
				text-indent: -999em;
				outline: none;
			}
				.galleryNavigation .previous {
					left: 18px;
					background-position: -331px 0;
				}
				.galleryNavigation .next {
					right: 18px;
					background-position: -255px 0;	
				}
				.galleryNavigation .previous.disabled {
					background-position: -482px 0;
				}
				.galleryNavigation .next.disabled {
					background-position: -408px 0;
				}
				.galleryNavigation .previous.disabled,
				.galleryNavigation .next.disabled {
					cursor: default;	
				}
				
		.galleryFooter {
			position: absolute;
			bottom: 20px;
			width: 100%;
			z-index: 1;
		}

.galleryThemeA {
	padding-bottom: 50px;
}
	.galleryThemeA .galleryMedia {
		/* height: 590px; */
		margin-left: 10px;
		margin-right: 10px;
	}
		.galleryThemeA .galleryMediaContent {
			position: relative;	
			left: 0;
			margin-top: 0;
			top: 0;
		}
	.galleryExtra1, .galleryExtra2 {
		width: 53px;
		top: -50px;
		left: 0;
	}
		.galleryExtra1 {background-position: -144px 0;}
		.galleryExtra2 {
			left: auto; 
			right: 0; 
			background-position: -198px 0;
		}



/* =iconList : horizontal/vertical list of icons ONLY */
.iconList {
	z-index: 2;
}
	.iconList li {
		float: left;
		position:relative; 
		background-color:#ededed; 
		border-top: solid 1px #bfbfbf;
		border-right:solid 1px #bfbfbf;
		border-bottom: solid 1px #bfbfbf;	
		width: 31px; /* NEED to be equal at the width of .icon + .iconList a padding left/right */ 
	}
	.iconList li.first {
		border-left:solid 1px #bfbfbf;
	}
	.iconList a { 
		display:block;  
		position:relative; 
		padding: 4px;
		-webkit-box-shadow: inset 0px 1px 0px 0px #fff;
		box-shadow: inset 0px 1px 0px 0px #fff;
	}
.iconList .icon {	 
	display:block; 
	text-indent: -999em;
	margin:0 auto;
}
.iconListContent {  
	z-index: 10;
	display: none;
	position: absolute;  
	left: -1px; 
	top: 31px; /* NEED to be equal at the HEIGHT of .icon + its padding top/bottom */ 
	background: #fff; 
	border: solid 1px #bfbfbf;
	
	-webkit-border-bottom-right-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
}
.iconListContentExtra1 { 
	position:absolute;
	display: block;  
	background-color:#FFFFFF; 
	top:-5px; 
	left:-1px; 
	border-left:solid 1px #bfbfbf; 
	border-right:solid 1px #bfbfbf; 
	height:5px; 
	padding: 0 4px; 
	width: 23px; /* NEED to be equal at the WIDTH of .icon */
}
.iconList .active .iconListContent {display: block;}
.iconList .active a {background-color: #fff;}



/* =iconListVertical */
.iconListVertical li {
	margin-bottom: 0;
	border-top: none;
	border-right:solid 1px #bfbfbf;
	border-bottom: solid 1px #bfbfbf;
	border-left: solid 1px #bfbfbf;
	float:none; 
}
.iconListVertical li.first {
	border-top:solid 1px #bfbfbf; 
}
.iconListVertical .iconListContent { 
	left:auto; 
	right:31px; /* NEED to be equal at the WIDTH of iconList(borders not included) - see outsideToolsContext */
	top:-1px;
	-webkit-border-bottom-right-radius: 0px;
	-moz-border-radius-bottomright: 0px;
	border-bottom-right-radius: 0px;
	-webkit-border-top-left-radius: 4px;
	-moz-border-radius-topleft: 4px;
	border-top-left-radius: 4px;
	-webkit-border-bottom-left-radius: 4px;
	-moz-border-radius-bottomleft: 4px;
	border-bottom-left-radius: 4px;
}
.iconListVertical .iconListContentExtra1 {
	top:-1px; 
	left:auto; 
	right:-5px; 
	padding: 4px 0; 
	height:23px; /* NEED to be equal at the HEIGHT of .icon */ 
	width:5px;
	border-bottom:solid 1px #bfbfbf; 
	border-top:solid 1px #bfbfbf; 
	border-right:0px; 
	border-left:0px;
}
.iconListVertical .iconListExtra2{ 
	top:-1px; 
	bottom:auto; 
	left:auto; 
	right:-1px; 
	background-position: right top;
}
.iconListVertical .iconListExtra3{ 
	bottom:-1px; 
	top:auto; 
	left:-1px; 
	right:auto; 
	background-position: left -25px;
}



/* [bell.connector.css] =stepList : steps flow listing */
.stepList, .stepList .active {
	background-repeat: repeat-x;
	background-position: 0 top;
}
.stepList {
	position: relative; /* <- this is to fix IEs rendering */
	overflow: hidden; /* <- needed for equalizing trick to work */
	background-color: #f0f0f0;
	margin-bottom: 0;
}
	.stepList li {
		position: relative;
		float: left;
		
		/* fake equalizing trick */
		padding-bottom: 8.33em; /* 100px */
		margin-bottom: -8.33em; /* 100px */
	}

	.stepList .active {
		background-color: #fff;
		background-image: url(../images/bg_gradient_n.png);
	}	
		.stepList a,
		.stepList .wrap {
			display: block;
			overflow: hidden; /* <- cuts too long word when there is too many steps */
			padding: 17px 20px 17px 2.333em; /* 28px */
		}
		
		/* resets link cursor */
		.stepList .active a,
		.stepList .disabled a,
		.stepList a .number {cursor: default;}
		
		/* removes underline in links */
		.stepList a .number,
		.stepList .active a:hover, 
		.stepList .disabled a:hover {
			text-decoration: none;
		}
			/* forces the step number outside of element flow */
			.stepList .number {
				position: absolute;
				margin-left: -1.25em; /* 15px */
			}
		
		/* if a step is completed, changes its visual */
		.stepList li.completed {
			background: #fff url('../images/bg_gradient_n.png') repeat-x 0 top;
		}
			
/* stepListThemeA : same style with arrow support, centered label */			
.stepListThemeA {
	text-align: center;
	overflow: visible;
}
	.stepListThemeA li {
		padding-bottom: 0;
		margin-bottom: 0;
	}
		.stepListThemeA li.first {
			border-left: none;
		}
	.stepListThemeA .active {
		background: #767676 url('../images/bg_gradientMask_b.png') repeat-x 0 bottom;
		-webkit-box-shadow: inset 0px 2px 7px 1px rgba(0, 0, 0, .65);
		box-shadow:         inset 0px 2px 7px 1px rgba(0, 0, 0, .65);
		text-shadow: 0px 1px 2px #000;	
	}
		.stepListThemeA .active:after {
			position: absolute;
			content: "";
			bottom: -30px;
			left: 50%;
			margin-left: -15px;
			
			border: 15px solid transparent; /* <- the border width specifies the size of the arrow */
			border-top-color: #3f3f3f;
		}
	.stepListThemeA .active,
	.stepListThemeA .active a,
	.stepListThemeA .active .number {
		color: #fff;
	}
	
	.stepListThemeA a, 
	.stepListThemeA .wrap {
		display: inline-block;
		padding-bottom: 14px;
	}
			
/* [bell.connector.css] =message : content block with a "state" icon (error, valid, warning, information, etc.) */
.message, .messageTitle {
	display: inline-block;
    position: relative;
}
	/* Avoid overlapping with aside icons */
	.messageTitle {padding-right: 20px;}
	
	.messageTitle:only-child, /* <- this is for cosmetic purposes only - purely optional that's why it is binded to a CSS3 selector */
	.sectionThemeB .messageTitle {margin-bottom: 0;}
	
.messageThemeA,
.messageThemeB, 
.messageThemeC, 
.messageThemeD {padding-left: 21px;}
.messageThemeE {padding-left: 30px;}
.messageThemeF,
.messageThemeG,
.messageThemeH,
.messageThemeI,
.messageThemeJ {padding-left: 35px;}

		.messageTitle .button {margin-left: 10px;}
	
		.messageTitleExtra1 {
			height: 15px;
			width: 15px;
			top: 1px; 
			left: -21px; /* Should be same value as "message" padding-left */
			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 */
		}
		
		.messageThemeA .messageTitleExtra1, .iconExclamationA {background-position:0px -49px;} /* Red "!"" */
		.messageThemeB .messageTitleExtra1, .iconCheckE {background-position:-17px -49px;} /* Green "Check" */
		.messageThemeC .messageTitleExtra1, .iconExclamationB {background-position:-33px -49px;} /* Yellow "!"" */
		.messageThemeD .messageTitleExtra1 {background-position:-49px -49px;} /* Blue "i" */
		.messageThemeE .messageTitleExtra1 { 
			background-position: -129px -73px;
			width:23px; 
			height:23px;
			left: -30px;
			top: -3px;
		}		
		/* Green Check Icon */
		.messageThemeF .messageTitleExtra1 {background-position:-439px -78px;}
		/* Red Alert Icon */
		.messageThemeG .messageTitleExtra1 {background-position:-471px -78px;}
		/* Orange Caution Icon */
		.messageThemeH .messageTitleExtra1 {background-position:-503px -78px;}
		/* Exclamation Icon */
		.messageThemeI .messageTitleExtra1, .iconExclamation {background-position:-128px -143px;}
		/* Big green check (see iconCheckB) */
		.messageThemeJ .messageTitleExtra1 {left: -40px;}
		
		/* Circles State Icons for messages */
		.messageThemeF .messageTitleExtra1,
		.messageThemeG .messageTitleExtra1,
		.messageThemeH .messageTitleExtra1,
		.messageThemeI .messageTitleExtra1 {
			height: 26px; 
			width: 26px;
			top: -5px;
			left: -35px;
		}
			/* per-context - depending on font size and icon size */
			.messageThemeI .messageTitleExtra1 {top: -5px;}
			
			.messageThemeA .headingType1 .messageTitleExtra1,
			.messageThemeB .headingType1 .messageTitleExtra1,
			.messageThemeC .headingType1 .messageTitleExtra1,
			.messageThemeD .headingType1 .messageTitleExtra1 {top: 12px;}
			.messageThemeE .headingType1 .messageTitleExtra1 {top: 8px;}
			.messageThemeI .headingType1 .messageTitleExtra1 {top: 5px;}
			
			.messageThemeA .headingType2 .messageTitleExtra1,
			.messageThemeB .headingType2 .messageTitleExtra1,
			.messageThemeC .headingType2 .messageTitleExtra1,
			.messageThemeD .headingType2 .messageTitleExtra1 {top: 9px;}
			.messageThemeF .headingType2 .messageTitleExtra1,
			.messageThemeG .headingType2 .messageTitleExtra1,
			.messageThemeH .headingType2 .messageTitleExtra1,
			.messageThemeI .headingType2 .messageTitleExtra1,
			.messageThemeA .headingType4 .messageTitleExtra1,
			.messageThemeB .headingType4 .messageTitleExtra1,
			.messageThemeC .headingType4 .messageTitleExtra1,
			.messageThemeD .headingType4 .messageTitleExtra1 {top: 4px;}
			
			.messageThemeA .headingType3 .messageTitleExtra1,
			.messageThemeB .headingType3 .messageTitleExtra1,
			.messageThemeC .headingType3 .messageTitleExtra1,
			.messageThemeD .headingType3 .messageTitleExtra1,
			.messageThemeE .headingType2 .messageTitleExtra1,
			.messageThemeF .headingType1 .messageTitleExtra1,
			.messageThemeG .headingType1 .messageTitleExtra1,
			.messageThemeH .headingType1 .messageTitleExtra1,
			.messageThemeI .headingType1 .messageTitleExtra1 {top: 5px;}
			
			.messageThemeF .headingType3 .messageTitleExtra1,
			.messageThemeG .headingType3 .messageTitleExtra1,
			.messageThemeH .headingType3 .messageTitleExtra1,
			.messageThemeI .headingType4 .messageTitleExtra1 {top: -1px;}
			
			.messageThemeE .headingType4 .messageTitleExtra1,
			.messageThemeI .headingType3 .messageTitleExtra1 {top: 0;}
			.messageThemeF .headingType4 .messageTitleExtra1,
			.messageThemeG .headingType4 .messageTitleExtra1,
			.messageThemeH .headingType4 .messageTitleExtra1 {top: -3px;}
			
			.messageThemeA .headingType5 .messageTitleExtra1,
			.messageThemeB .headingType5 .messageTitleExtra1,
			.messageThemeC .headingType5 .messageTitleExtra1,
			.messageThemeD .headingType5 .messageTitleExtra1,
			.messageThemeE .headingType3 .messageTitleExtra1 {top: 2px;}
			.messageThemeI .headingType5 .messageTitleExtra1 {top: -4px;}
			
		/* 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;}
	
	/* centers vertically the message icon */
	.messageFunctionB.messageFunctionC .messageTitle {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.messageFunctionC .messageTitleExtra1 {
		top: 50% !important;
		margin-top: -7px;
	}
	
	.messageThemeF.messageFunctionC .messageTitleExtra1,
	.messageThemeG.messageFunctionC .messageTitleExtra1,
	.messageThemeH.messageFunctionC .messageTitleExtra1,
	.messageThemeI.messageFunctionC .messageTitleExtra1 {margin-top: -13px;}
	.messageThemeJ.messageFunctionC .messageTitleExtra1 {margin-top: -15px;}
	.messageThemeE.messageFunctionC .messageTitleExtra1,
	.messageFunctionA.messageFunctionC .messageTitleExtra1 {margin-top: -12px;}
	.messageFunctionB.messageFunctionC .messageTitleExtra1 {margin-top: -21px;}
		
.message .last {
	margin-bottom: 0;	
}

.message .aside .button {
	top: -8px;
}


/* =warning : use on warning message */
.warning {overflow: hidden;}	
	.warning .message h2,
	.warning .message h3 {margin-bottom: 3px;}
	.warning .message ul,
	.warning .message p {margin-bottom: 0;}
	.warning .message li a, 
	a.danger {
		text-decoration: underline; 
		color: #a00;
	}
	
/* =actionLink : simple link with an icon */
.actionLink {
	position: relative; 
	display: inline-block;
}


/* =dataTable : default custom table IN DEV */
table {empty-cells: show;}
	col.active {
		border: 3px solid #0066A4;
	}
		.dataTableThemeE col.active {border-top-width: 0;}

.dataTable {
	width: 100%;
	text-align: left;
	margin-bottom: 20px;
}
	.dataTable thead th {
		vertical-align: top;
	}

	.dataTable th, 
	.dataTable td {
		border: 1px solid #d6d6d6;
		padding: 10px 15px;
		vertical-align: middle;
	}
	.dataTable th {font-weight: normal;}
	
	
	/* dataTableThemeA : bigger cell padding */
	.dataTableThemeA th, 
	.dataTableThemeA td {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	/* dataTableThemeB : minimalist look (less borders)  */
	.dataTableThemeB th {
		border: 0;
		font-size: 14px;
		font-weight: bold;
		padding: 10px;
		text-align: left;
	}
	.dataTableThemeB td {
		border-top: 1px solid #ccc;
		border-right: 0;
		border-left: 0;
		border-bottom: 1px solid #ccc;
		padding: 20px;
		vertical-align: top;
	}
	
	/* dataTableThemeC */
	.dataTableThemeC {
		border-collapse: separate;
		border-bottom: 1px solid #dbdbdb;
		padding-bottom: 1px;
	}
		.dataTableThemeC thead th {
			border: 0;
			border-bottom: 1px solid #dbdbdb;
			background-color: transparent;
			font-weight: bold;
			padding-left: 0;
			padding-right: 0;
		}
		.dataTableThemeC th, .dataTableThemeC td {
			border-color: #fff;
			border-bottom-width: 0;
			border-right-width: 0;
			padding-top: 5px;
			padding-bottom: 5px;
		}	
		.dataTableThemeC th, .dataTableThemeC td,
		.dataTableThemeC .odd th, .dataTableThemeC .odd td	{
			background-color: #e0ebf4;
		}
		.dataTableThemeC .first.last {border-left: 0;}
		.dataTableThemeC .last {border-right: 0;}


	/* dataTableThemeD : same as dataTableThemeB but headers have a grey background  */
	.dataTableThemeD th, .dataTableThemeD td {
		border-color: #ccc;
		padding: 15px;
		padding-right: 8px;
	}
	.dataTableThemeD th, .dataTableThemeD tfoot td {
		padding-top: 12px;
		padding-bottom: 11px;
	}	
	.dataTableThemeD th {
		background-position: 0 top;
		background-color: #f0f0f0;
		border-bottom: 0;
		font-size: 1.166em;
		text-align: left;
	}
		.dataTableThemeD th.first,
		.dataTableThemeD th.last {
			border-left: 0;
			border-right: 0;
		}
			.dataTableThemeD th a {
				color: #212121;
			}
	.dataTableThemeD td {
		border-top: 1px solid #ccc;
		border-right: 0;
		border-left: 0;
		border-bottom-width: 1px;
	}

/* dataTableThemeE : minimalist style 1, blank white + shadow effect */ 	
.dataTableThemeE {
	margin-bottom: 0;
	table-layout: fixed;
}
	.dataTableThemeE th, 
	.dataTableThemeE td {
		border-top: 0;
		text-align: center;
		padding-top: 25px;
		padding-bottom: 25px;
	}

	.dataTableThemeE th {
		text-align: right; 
		border-right: 0; 
		padding-right: 20px;
		border-left: 0;
	}
	.dataTableThemeE td.first {
		background-image: url(../images/bg_shadow_left_a.png);
		background-repeat: repeat-y;
		background-position: 0 0; 
	}
	.dataTableThemeE tr.first td {
		padding-left: 25px;
		padding-right: 25px;
	}
	.dataTableThemeE tr.last th,
	.dataTableThemeE tr.last td {
		border-bottom: 0;
	}
	.dataTableThemeE td.last {
		border-right: 0;
	}
	
	/* Special overwrite for table in GC2.0 phase */
	table.sliderContent col.grid4 {width: 250px;}
	
/* dataTableThemeF : minimalist style 2, no shadow effect */
.dataTableThemeF {
	text-align: center;
}
	.dataTableThemeF .tableRowHeader {
		text-align: left;
	}
	.dataTableThemeF th,
	.dataTableThemeF td,
	.dataTableThemeH th,
	.dataTableThemeH td {
		border-bottom-width: 0;
		border-left-width: 0;
	}
	.dataTableThemeF th.last,
	.dataTableThemeF td.last,
	.dataTableThemeH th.last,
	.dataTableThemeH td.last {
		border-right-width: 0;
	}
	.dataTableThemeF thead th {
		background-color: transparent;
		border-width: 0;
		border-right-width: 1px; 
	}

/* dataTableThemeG : default without side borders */
.dataTableThemeG .tableRowHeader,
.dataTableThemeG th.first,
.dataTableThemeG td.first {
	border-left: 0;
	vertical-align: bottom;
}
.dataTableThemeG th.last,
.dataTableThemeG td.last {
	border-right: 0;
}

/* dataTableThemeH : mix and match style with theme: A, F, G */
.dataTableThemeH {
	text-align: center;
}
	.dataTableThemeH th, 
	.dataTableThemeH td {
		padding-top: 20px;
		padding-bottom: 20px;
	}
		.dataTableThemeH thead th, 
		.dataTableThemeH thead td {
			padding-top: 38px;
			border-top: 0;
		}
			.dataTableThemeH thead th .tableColumnLabel {
				margin-top: -29px;
				margin-left: -16px; /* Paul's fix */
				margin-right: -15px;
			}
		
/* dataTableThemeI : grayish background table - IN DEV */
.dataTableThemeI {
	border-bottom: 1px solid #d6d6d6; 
	border-collapse: separate;
	margin-bottom: 5px;
}
	.dataTableThemeI th,
	.dataTableThemeI td {
		padding-top: 5px;
		padding-bottom: 5px;
		padding-right: 10px;
		padding-left: 10px;
		vertical-align: top;
	}
		.dataTableThemeI th {
			border-width: 0; 
			border-bottom-width: 1px;
		}

		.dataTableThemeI td {
			background-color: #f5f5f5; 
			border-color: #fff; 
			border-left-width: 0;
			border-bottom-width: 0;
		}
			.dataTableThemeI tr.last td {
				border-bottom-width: 1px;
			}
				.dataTableThemeI th.last,
				.dataTableThemeI td.last {
					text-align: right;
				}
				.dataTableThemeI td.last {
					background-color: #E0EBF4; 
					border-right-width: 0;
			}

/* =dataTableThemeJ */
.dataTableThemeJ thead th {
	background-position: 0 -10px;
	background-color: #eee;
    color: #212121;
	padding-bottom: 14px;
    padding-top: 15px;
}
	.dataTableThemeJ th, 
	.dataTableThemeJ td {
		border-left: 0;
	}
	.dataTableThemeJ .last {
		border-right: 0;
	}
	
.dataTableThemeK {
	border-top: 0;
	border-bottom: 0;
}
	.dataTableThemeK > thead {border-bottom: 1px solid #ccc;}
	.dataTableThemeK > tbody.border {border-bottom: 1px solid #ccc;}

		.dataTableThemeK th {
			border: 0;
			background: none;
			font-weight: bold;
			padding: 11px 0 9px;
		}
		.dataTableThemeK td {
			border: 0;
			padding: 2px 0;
		}
		.dataTableThemeK > tbody > tr:first-child td {padding-top: 15px;}
		
		.dataTableThemeK th,
		.dataTableThemeK td {line-height: 18px; padding-left: 20px; padding-right: 20px;}

		.dataTableThemeK.noPadding th,
		.dataTableThemeK.noPadding td {padding-left: 0; padding-right: 0;}
				
		.dataTableThemeK td + td,
		.dataTableThemeK th + th,
		.dataTableThemeK > tfoot td {text-align: right; vertical-align: top;}
		
		.dataTableThemeK > tfoot td {vertical-align: middle;}
		.dataTableThemeK > tfoot th {font-weight: normal; padding-left: 0; text-align: left;}
		
		.dataTableThemeK > tfoot tr:first-child th,
		.dataTableThemeK > tfoot tr:first-child td {border-bottom: 1px solid #ccc;}
		.dataTableThemeK > tfoot tr:first-child td:first-child {border:0; width: 370px;}

		.dataTableThemeK.noPadding > tfoot tr:first-child th,
		.dataTableThemeK.noPadding > tfoot tr:first-child td,
		.dataTableThemeK.noPadding > tfoot tr:first-child td:first-child {border:0;}

		.dataTableThemeK .priceRow td { background: #ededed; padding: 10px 20px; }
		
		/* !# fix for IE10 */
		.dataTableThemeK > tfoot th:first-child,
		.dataTableThemeK > thead th:first-child {text-align: left;}
	
	/* specifics */
	.dataTableThemeK ul,
	.dataTableThemeK ul > li {margin-bottom: 0;}
	.dataTableThemeK > tfoot .fui-price-group {
		font-weight: normal;
		padding-right: 0;
	}

.tableSpacer1 > th, .tableSpacer1 > td {padding-top: 10px;}
.tableSpacer2 > th, .tableSpacer2 > td {padding-top: 20px;}
.tableSpacer3 > th, .tableSpacer3 > td {padding-top: 30px;}
	
/* =snapped : snapper plugin default class */
.snapped {
	/*left: 50%;
	margin-left: -487.5px;*/
	position: fixed;
	top: 0;
	
	/* by default, it takes the full with - needs contextual class to customize it */
	width: 975px;
	
	/* centers the snapped element*/
	margin-left: auto;
	margin-right: auto;
	
	/* ensures that is at the top level, might need to be tweaked. */
	z-index: 100;
}
	/* per dataTable themes tweaks */
	.dataTableThemeE.snapped {
		background-color: #fff;
	}
	
/* =dataTableHeaderFixed : Table with fixed thead; not supported on IE6 (Contexter for compareTableContext) */
.dataTableHeaderFixed {
	margin-bottom: 0;
}
.dataTableHeaderFixed.snapped {
	width: 893px;
	/*margin-left: -446.5px;*/
}
	.dataTableHeaderFixed.snapped th {
		background-color: #fff;
		border-bottom: 1px solid #d6d6d6;	
	}


/* tableColumnLabel : label for the first cell of an column */
.tableColumnLabel {
	position: relative;
	background-color: #0066A4;
	color: #fff;
	text-transform: uppercase;
	font-size: 0.8333em;
	padding-top: 6px;
	padding-bottom: 6px;
	text-align: center;
	top: -10px;
}
	.dataTableThemeC .tableColumnLabel {top: -5px;}
	.dataTableThemeA .tableColumnLabel,
	.dataTableThemeB .tableColumnLabel,
	.dataTableThemeD .tableColumnLabel {top: -20px;}
	.dataTableThemeE .tableColumnLabel {top: -25px;}
	
	.tableColumnLabel:after {
		display: block;
		position: absolute;
		content:"";
		left: 50%;
		z-index: 1;
		
		/* skin */
		bottom: -14px;
		margin-left: -7px;
		border: 8px solid transparent; /* <- the border width specifies the size of the arrow */
		border-top-color: #0066A4;
	}

/* tableRowHeader : header cell of a row (should always be a th tag) */
.tableRowHeader {
	border-right-color: #ccc;
}
	.dataTableThemeB .tableRowHeader {
		border-top: 1px solid #ccc;
		border-right: 0;
		border-bottom: 1px solid #ccc;	
		border-left: 0;
	}
	.dataTableThemeC .tableRowHeader {
		background-color: #efefef;
	}

	
/* =tableOverflower : Experimental */	
.sliderMask table {
	position: relative;
}
	.sliderMask .dataTableThemeE td.first {background-image: none;}
	

/* compareTableContext */
.compareTableContext thead th, 
.compareTableContext thead td {
	border-top: 0;
	border-bottom: 0;
}
	.compareTableContext thead th.first {
		vertical-align: bottom;
	}
	.compareTableContext th,
	.compareTableContext td {
		text-align: center;
	}
	.compareTableContext th.first, 
	.compareTableContext td.first {border-left: 0;}
	.compareTableContext thead th.last, 
	.compareTableContext td.last {border-right: 0;}	
	
	.compareTableContext td.first {
		background-image: url(../images/bg_shadow_left_a.png);
		background-position: 0 0;
		background-repeat: repeat-y;
	}
	
	.compareTableContext .tableRowHeader {
		padding-top: 0;
		padding-bottom: 0;
	}
		.compareTableContext .tableRowHeader img {display: inline-block; margin-right: 30px;}
			
		.compareTableContext .channelName {
			display: inline-block;
			vertical-align: middle;
			width: 150px; /* width for text overflow is hardcoded #! */
		}
			/*.compareTableContext .channelName .number {color: #555;}*/

.compareTableContext .tableRow td {
	padding-top: 5px;
	padding-bottom: 5px;
}

/* Other */
/* makes "grid" classes work correctly on a <col> */
.gridGroup col[class*="grid"],
col[class*="grid"] {
	display: table-column; 
	float: none; 
	margin-left: 0;
}
.compareTableContext thead th,
.compareTableContext th.tableRowHeader,
.tableRow td {
	text-align: left;
}	

/* Functions */
/* dataTableFunctionA : adds rollover effect on table (blue) */
.dataTableFunctionA tbody tr:hover, 
.dataTableFunctionA tbody tr:hover td {
	background-color: #d9e8f1;
}

/* dataTableFunctionB : separates table cells and tweaks border for better spacing */
.dataTableFunctionB {
	border-collapse: separate;
	border-spacing: 20px 0;
}
	.dataTableFunctionB th,
	.dataTableFunctionB td {
		border-right-width: 0;
		border-top-width: 0;
		border-left-width: 0;
	}
	
	/* tweaks per themes */
	.dataTableFunctionB.dataTableThemeC th,
	.dataTableFunctionB.dataTableThemeC td,
	.dataTableFunctionB.dataTableThemeD th,
	.dataTableFunctionB.dataTableThemeD td,
	.dataTableFunctionB.dataTableThemeE th,
	.dataTableFunctionB.dataTableThemeE td {
		border-top-width: 1px;
	}
	.dataTableFunctionB.dataTableThemeD th,
	.dataTableFunctionB.dataTableThemeD td {
		border-bottom-width: 0;
	}
	
	
/* Cell coloring */
.even th, .even td {background-color: #f5f5f5;}

/* [keep this at the end] These styles needs to be declared after all other dataTable styles */
/* tableRow : special colspanned cell */
.tableRow td, .tableRow th, 
.tableRow td.first, .tableRow th.first, 
.tableRow td.even, .tableRow th.even {background-color: #e2e2e2; background-image: none;}
.tableRowThemeA td, .tableRowThemeA th, 
.tableRowThemeA td.first, .tableRowThemeA th.first, 
.tableRowThemeA td.even, .tableRowThemeA th.even {background-color: #535353; color: #fff;}
.tableRowThemeB td, .tableRowThemeB th, 
.tableRowThemeB td.first, .tableRowThemeB th.first, 
.tableRowThemeB td.even, .tableRowThemeB th.even {background-color: #105290; color: #fff;}
.tableRowThemeC td, .tableRowThemeC th, 
.tableRowThemeC td.first, .tableRowThemeC th.first, 
.tableRowThemeC td.even, .tableRowThemeC th.even {background-color: #dae8f1;}
.tableRowThemeD td.first, .tableRowThemeD th.first,
.tableRowThemeD td, .tableRowThemeD th {padding-left: 0; padding-right: 0; border: 0; background-color: transparent;}
.tableRowThemeE td, .tableRowThemeE th, 
.tableRowThemeE td.first, .tableRowThemeE th.first, 
.tableRowThemeE td.even, .tableRowThemeE th.even {background-color: #f5f5f5;}


/* =dot */
.dot {
	position: relative;
	display: table;
	border-spacing: 0;
	overflow: hidden;
	line-height: normal;
	margin-left: auto;
	margin-right: auto;
	
	width: 96px;
	height: 96px;
	text-align: center;
	background: transparent url(../images/bg_dotSprite.png) no-repeat 0 0;
	font-size: 1.166em;
	color: #fff;
}
	.dot .icon {
		margin-bottom: -5px;
		margin-top: -5px;
	}
	/* centering content */
	.dotContent {
		display: table-cell;
		position: relative;
		vertical-align: middle;
		
		/* when zooming text, gives white text somme readability (caused by white text on white bg) */
		text-shadow: 0 0 1px rgba(0,0,0,.75);
	}
	.dotTitle {
		display: block;
		font-size: 36px;
		
		/* minor position tweak */
		margin-bottom: -5px;
	}
	
.dotThemeA {
	background-position: -97px 0;
}
.dotThemeB {
	color: #0066a4;
	width: 56px;
	height: 56px;
	background-position: -203px 0;
}

/* dotGroup : groups a dot with other elements */
.dotGroup {
	display: inline-block;
	text-align: center;
	margin: 5px;
	vertical-align: top;
}
	.dotGroup .dot {
		margin-bottom: 5px;
	}
	
	/* per-context */
	.columnContent .dotGroup {margin: 0;}
	.productDetailsContext .dotGroup {max-width: 100px;}


/* =glossaryView : for a glossary view (links are stack next to one another on a single line), width flexible in % */
.glossaryView {
	overflow: hidden;
}
	.glossaryView a {
		border-right: 1px solid #D6D6D6;
		display: block;
		float: left;
		padding-top: 3px;
		padding-bottom: 2px;
		white-space: nowrap;
		text-align: center;
		width: 3.5%;
	}
		.glossaryView .disabled {
			cursor: default;
			text-decoration: none;
		}
		.glossaryView .last {
			border-right: 0;
			width: 5.5%;
		}

/* =textLabel : basic textual label positioned next to an element (inline) */
.textLabel {
	position: relative;
	display: inline-block;
	text-transform: uppercase;
	font-size: 10px;
	line-height: 2.5em; /* <- should be same as height, here we add +0.1 for a more polished vertical alignment */
	white-space: nowrap; /* <- never wraps */
	margin-left: 15px; /* <- should be the same value of its extra's width (textLabelExtra1) */
	padding-left: 5px;
	padding-right: 10px;
	background-color: #c8dfef;
	vertical-align: middle;
	-webkit-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
}
	.textLabel, .textLabelExtra1 {
		height: 2.4em; /* 24px/10px */
	}
		.textLabelExtra1 {
			position: absolute;
			background-position: 0 -142px;
			left: -12px;
			top: 0;
			width: 12px;
		}
		
	.textLabelThemeA {
		background-color: #0066a4;
		color: #fff;
		margin-left: 0;
		padding-left: 10px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
	}
		
	.textLabelThemeB {
		background-color: #ccc;
		color: #fff;
		margin-left: 0;
		padding-left: 10px;
		font-weight: bold;
		line-height: 2.4em;
		-webkit-border-radius: 3px;
		border-radius: 3px;	
		
		/* compensates with margin so the total height is the same as default. Makes easier to align different textLabel themes on the same line */
		mzargin-top: 4px;
	}	


/*:: =========================================================================== */
/*:: ==5.0 ==Misc :::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
/* [deprecated] =sideBar : specific styles for elements in a "sideBar" context */
.sideBar fieldset, 
/* deprecated -> */ .sideBar3 .sideBar fieldset {
	margin-bottom: 30px;
}
	.sideBar fieldset .formGroup,
	/* deprecated -> */ .sideBar3 .sideBar fieldset .formGroup {
		margin-bottom: 0;
	}
	
	.sideBar legend,
	/* deprecated -> */ .sideBar3 .sideBar legend {
		margin-bottom: 10px;
	}
	.sideBar .inputGroup,
	/* deprecated -> */ .sideBar3 .sideBar .inputGroup {
		margin-bottom: 7px;
	}
	
	.sideBar .formContent label,
	/* deprecated -> */ .sideBar3 .sideBar label {
		cursor: pointer;	
	}
	.sideBar .formContent label:hover,
	/* deprecated -> */ .sideBar3 .sideBar label:hover {
		text-decoration: underline;	
	}
	.sideBar .formContent label.active,
	/* deprecated -> */ .sideBar3 .sideBar label.active {
		font-weight: bold;	
	}

/* deprecated */
.sideBar3 {
	background: transparent url(../images/bg-sidebar-grid3.png) repeat-y -2px 0;
}
.sideBar3 .sideBar {
	background: none;
}	
	
/* =sideBar : background-image variation (based on grid; sideBar3 should be used with grid3) */
.sideBar {
	background-image: url(../images/bg-sidebar.png);
	background-color: transparent;
	background-repeat: repeat-y;
}
.sideBar.sideBarThemeA,

/* Used by itemList for active/hover effect so that it keeps the same shadow style as its sideBar style, see bell.connector.css */
.sideBar.sideBarThemeA .itemListThemeD .active a,
.sideBar.sideBarThemeA .itemListThemeD a:hover {
	background-image: url(../images/bg_sideBar_a.png);
}

.sideBar .gridReset { clear: left; }

.sideBar.sideBar1{
	background-position: -881px top;
}
.sideBar.sideBar2{
	background-position: -802px top;
}
.sideBar.sideBar3{
	background-position: -720px top;
}
.sideBar.sideBar4{
	background-position: -644px top;
}
.sideBar.sideBar5{
	background-position: -565px top;
}
.sideBar.sideBar6{
	background-position: -486px top;
}
.sideBar.sideBar7{
	background-position: -407px top;
}
.sideBar.sideBar8{
	background-position: -328px top;
}
.sideBar.sideBar9{
	background-position: -249px top;
}
.sideBar.sideBar10{
	background-position: -170px top;
}
.sideBar.sideBar11{
	background-position: -91px top;
}
.sideBar.sideBar12{
	background-position: left top;
}

/* exceptions */
.sideBar .formContent label.depreciate:hover {text-decoration: none; cursor: default;}

/* Out of stock context when in tooltip (used in color pill) */
.toolTipOutOfStockContext .padder {
	padding: 15px;
	text-align: center;
	font-size: 14px;
}


/* [bell.connector.css] =homePageContext */
.homePageContext{ 
	background: url(../images/bg_gradient_j.jpg) 0 47px repeat-x #ededed;
}
	.homePageContext .wrapper {
		padding-top: 0; 
		padding-bottom: 5px;
	}
		.homePageContext #content, 
		.homePageContext .content, 
		.homePageContext .section {
			background: none;
			border: 0;
		}	
		.homePageContext .textList a {padding-right: 45px;}
		
		.homePageContext .footerLinksContext .textList li, 
		.shopLandingContext .footerLinksContext .textList li {min-width: 12%;}
			.homePageContext .footerLinksContext .textList a, 
			.shopLandingContext .footerLinksContext .textList a {padding-right: 0;}

/* Special context for "other than 5 LOB" on Shop landing */
.lob2Context, 
.lob3Context, 
.lob4Context {width: 100%;}
	.header .lob2Context .listViewContent {width: 55%;}
		.header .lob2Context #shopHeaderHomephone .listViewContent {width: 65%;} /* <- Because homephone label is usually longer, gives an extra 10% off the base width */
	.header .lob3Context .listViewContent {width: 40%;}
		.header .lob3Context #shopHeaderHomephone .listViewContent {width: 50%;} /* <- Because homephone label is usually longer, gives an extra 10% off the base width */
	.header .lob4Context .listViewContent {width: 35%;}
		.header .lob4Context #shopHeaderHomephone .listViewContent {width: 45%;} /* <- Because homephone label is usually longer, gives an extra 10% off the base width */

	/* IE8- issue with splitter when have 4 LOBs */
	.lob4Context #shopHeaderBundles { width: 241px !important; }	
		
/* =loginClientContext */
.loginClientContext {
	height: 503px;
	background: url(../images/content/c_cardWithHand_975x503.jpg) no-repeat 0 0 transparent !important;
}
	.loginClientContext .gridGroup {
		position: absolute;
		left: 20px;
		top: 73px;
	}
	.loginClientContext .formText input {
		margin-right: 0;
		width: 200px;
		background-color: #fff;
		border-top: 1px solid #8e8e8e;
		border-bottom: 1px solid #f8f8f8;
		border-left: 1px solid #d4d4d4;
		border-right: 1px solid #d4d4d4;
	}


/* =outsideToolsContext */
.outsideToolsContext{
	position: absolute;
	width: 32px; 
	right: -32px; /* NEED to be equal at the width of .outsideToolsContext */
	top: 200px; 
}
		

/* Others */	
/* =compareWidget : specific comparison bar (always at bottom) (legacy) */
.compareWidget {
	position: fixed;
	overflow: hidden;
	z-index: 1000;
	/*bottom: -100px;*/
	left: 0;
	background: #e1e1e1 url(../images/bg_compareBar.jpg) repeat-x 0 0;
	width: 100%;
	border-top: 1px solid #cdcdcd;
}
	.compareTool {margin: 0 auto;height: auto;padding: 15px 0px;}	
	.compareTool .button {position: relative;top: -10px;float: right;margin-right: 0;}/* <- temp */
	.compareTool p {margin-bottom: 6px;}
	.compareTool ul {margin-bottom: 10px;}	
		.compareTool ul li,.compareTool ul li span,.compareTool ul li.active .highlight,.compareTool ul li.active .highlight span 
		{background: transparent url(../images/bg_compareItem.gif) no-repeat;}
		
		.compareTool ul li {background-position: 0 0;color: #fff;float: left;margin-right: 10px;padding: 8px 20px 6px 11px;position: relative;width: 167px;}
			.compareTool ul li span {background-position: -960px 0;display: block;height: 16px;padding: 7px 0;position: absolute;right: 0;text-align: center;top: 0;width: 15px;}
							
		.compareTool ul li.active {
			background-position: 0 -120px;
			color: #000000;
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
			.compareTool ul li.active span {background-position: -950px -120px;width: 25px;}
				.compareTool ul li.active span a {display: block;}
					.compareTool ul li span a span {text-indent: -999em;}

		.compareTool ul li.active .highlight {background-position: 0 -60px;width: 199px;height: 20px;left: 0;position: absolute;}
			.compareTool ul li.active .highlight span {background-position: -950px -60px;width: 25px;height: 20px;position: absolute;}

/* =touch Context */
.contextTouch .compareWidget,
.contextTouch .sliderBar,
.contextTouch .sliderBarExtra1,
.contextTouch .sliderBarExtra2 {
	display:none;
}	

.contextTouch .sliderMask {
    height: auto !important;
}
	
/*:: =========================================================================== */
/*:: ==6.0 ==jQueryUI :::::::::::::::::::::::::::::::::::::::::::::::::::::::::: */
/*:: =========================================================================== */
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 4px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 4px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 4px;
}
.sliderRange .ui-slider-range {
    /*background: url(../images/jqueryui/ui-bg_highlight-soft_75_cccccc_1x100.png) repeat-x scroll 50% 50% #CCCCCC;*/
	background: url(../images/jqueryui/ui-bg_highlight-soft_1x6.png) repeat-x scroll 50% 50% #CCCCCC !important;	
    border: none !important;
    color: #222222;
    font-weight: bold;
}
.sliderRange {
    /*background: url(../images/jqueryui/ui-bg_flat_75_ffffff_40x100.png) repeat-x scroll 50% 50% #FFFFFF;*/
	/*background: url(../images/jqueryui/ui-bg_flat_75_1x8.png) repeat-x scroll 50% 50% #FFFFFF;*/
	background-image: url(../images/jqueryui/ui-bg_flat_75_1x8.png) !important;
	background-position: 50% 50% !important;
	background-repeat: repeat-x !important;
	background-color: #fff !important;
    border: none !important;
    color: #222222;
}

.ui-widget {
    font-size: inherit;
}
.ui-slider-horizontal {
    height: 0.8em;
}
.ui-slider {
    position: relative;
    text-align: left;
}
.sliderRange .ui-slider-handle {
    /*background: url(../images/jqueryui/ui-bg_glass_75_e6e6e6_1x400.png) repeat-x scroll 50% 50% #E6E6E6;*/
	background: url(../images/jqueryui/ui-bg_glass_75_22x30.png) repeat-x scroll 50% 50% transparent !important;
	background-position: 50% 50% !important;
    border: none !important;
    color: #555555;
    font-weight: normal;
}

.ui-slider .ui-slider-handle {
    cursor: pointer;
    height: 30px;
    position: absolute;
    width: 22px;
    z-index: 2;
	outline: none;
}

.ui-slider .ui-slider-range { 
	position: absolute; 
	z-index: 1; 
	font-size: .7em; 
	display: block; 
	border: 0; 
	background-position: 0 0; 
}

.ui-slider .ui-state-hover {
	z-index: 21;	
}

.ui-slider-horizontal { height: 8px; }
.ui-slider-horizontal .ui-slider-handle { top: -19px; margin-left: -18px; }
.sliderRange .ui-slider-handle { top: -8px; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100% !important; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-handle .sliderValue {
    position: absolute;
    top: -32px;
    left: 50%;
    border-radius: 5px;
    padding: 5px;
    background-color: #0066a4;
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    display: block;
	color: #fff;
	white-space: nowrap;
}
.ui-slider-handle .sliderValue span {
	width: 6px;
	height: 3px;
	position: absolute;
	bottom: -3px;
	left: 50%;
	margin-left: -3px;
	background: transparent url(../images/jqueryui/ui-bg_highlight-soft_arrow_6x3.png) no-repeat;	
}

/* =sliderControl */
.slider {
	border: none;	
}
	
.sliderMask {
	overflow: hidden;
	height: 600px;	
}
	.sliderMaskExtra1 {
		display: block;
		background: transparent url(../images/bg_gradientMask_a.png) repeat-x 0 bottom;
		height: 40px;
		width: 100%;
		bottom: 40px;
		position: absolute;
	}
.sliderBar {
	height: 555px; /* height + top = mask height */ 
	top: 45px; /* extra padder */
	left: 50%;
	margin-left: -1px;
	background-color: #999 !important;
	background-image: none !important;
}
.slider .ui-slider-handle {
	background-repeat: no-repeat;
	background-position: -329px -114px !important;
	width: 37px;
	height: 37px;
	margin-bottom: -18px;
	border: none !important;
	background-color: transparent !important;
	display: inline-block;
	position: relative;
}
.ui-slider-vertical .ui-slider-handle {
	left: -17px;
	position: absolute;	
}
.sliderBar,
.sliderBar .ui-slider-range {
	width: 1px;									
}								
.sliderBar .ui-slider-range {
	background-color: #1374b9;
	background-image: none;
}
.sliderBarExtra1, .sliderBarExtra2 {
    background-repeat: no-repeat;
    display: block;
    height: 18px;
    left: 24px;
    position: absolute;
    width: 18px;
}
.slider .sliderBarExtra1 {
    background-position: -271px -95px;
    left: -34px;
    top: -8px;
}
.ui-slider-vertical + .sliderBarExtra1 {
	top: 34px;
	left: 25px;
	background-position: -252px -114px;	
}
.slider .sliderBarExtra2 {
    background-position: -252px -95px;
	/*left: 583px;	*/
	left: auto;
	right: -34px;
    top: -8px;
	bottom: 0;
}
.ui-slider-vertical + .sliderBarExtra1 + .sliderBarExtra2 {
	top: inherit;
	bottom: -55px;
	left: 25px;
	background-position: -271px -114px;	
}

/* slider horizontal */
.sliderHorizontal .sliderBar {
	height: 2px;
	top: inherit;	
}
.sliderDisabled .sliderBar {
	display: none;	
}
.sliderHorizontal .sliderBar, 
.sliderHorizontal .sliderBar .ui-slider-range {
    left: 50%;
    margin-left: -283px;
    position: relative;
    width: 566px;
}
.sliderHorizontal .sliderContent {
	float: left;	
}
	.sliderHorizontal .sliderMaskExtra1 {
		bottom: 0;
		height: 100%;
		right: 0;
		width: 15px;
		background: url(../images/bg_shadowsSprite.png) repeat-y scroll -128px 0 transparent;
		opacity: .15;
	}

/* sliderBarGroup : forces the slider bar to take full width (fluid) */
.sliderHorizontal .sliderBarGroup {
	padding-left: 30px;
	padding-right: 30px;
}
	.sliderHorizontal .sliderBarGroup .sliderBar {
		width: 100%;
	}
	.sliderHorizontal .sliderBarGroup .sliderBar .ui-slider-range,
	.sliderHorizontal .sliderBarGroup .sliderBar {
		left: auto;
		margin-left: 0;
	}
	
#overlay {
	position: absolute;
	left: 0;
	top: 0;	
}


/* Date picker (legacy) */
input.datepicker {
	float: left;
	width: 100%;
}
img.ui-datepicker-trigger {
	float: right;
	position: absolute;
	top: 5px;
	right: 5px;
}

/* =contentLoader : AJAX loader (legacy) */
.contentLoader {
    background: url(../images/loading_a.gif) no-repeat scroll 0 0 transparent;
    height: 36px;
    margin: 0 auto;
    position: relative;
    width: 36px;
}
	.contentLoaderWithText {
		background-position: 36px 0;
		padding-top: 36px;
		text-align: center;
		width: 25%;
	}


/* =loader : simple loading spinner (legacy) */
.loader, .loaderExtra1, .loaderExtra2, .loaderExtra3 {background: transparent url(../images/bg_loader_a.png) no-repeat;}	
.loader {position: fixed; left:50%; top:25%; width: 310px; margin-left: -155px; background-position: -310px 0; background-repeat: repeat-y;}
	.loader, .loaderContent {z-index: 100;}
	.loaderContent {position: relative; padding: 17px 21px 15px 68px; background: transparent url(../images/loading_a.gif) 19px 7px no-repeat;}
	
	.loaderExtra1, .loaderExtra2, .loaderExtra3 {
		display: block; 
		position: absolute; 
		height: 10px; width: 310px; 
		z-index: 99; /* z-index should be lower than loaderContent's */
	} 
		.loaderExtra1 {background-position: 0 0px; top: -10px;}
		.loaderExtra2 {background-position: 0 -10px; bottom: -10px;}
		.loaderExtra3 {background-position: 0 bottom; bottom: 0; height: 32px;}
		
	.loaderThemeA .loaderContent {padding-top: 7px; padding-bottom: 7px;}


/* Annoncement last minutes: off will end */
.annoncement {
	background-color: #D7E5EE;
}

/* clearfix */
.stepListThemeA,
.gridGroup,
.formGroup,
.columnGroup,
.item,
.toFloatLeft,
.toFloatRight {
  *zoom: 1;
}

.stepListThemeA:before,
.stepListThemeA:after,
.gridGroup:before,
.gridGroup:after,
.formGroup:before,
.formGroup:after,
.columnGroup:before,
.columnGroup:after,
.item:before,
.item:after,
.toFloatLeft:before,
.toFloatLeft:after,
.toFloatRight:before,
.toFloatRight:after {
  display: table;
  line-height: 0;
  content: "";
}

.stepListThemeA:after,
.gridGroup:after,
.formGroup:after,
.columnGroup:after,
.item:after,
.toFloatLeft:after,
.toFloatRight:after {
  clear: both;
}

/* Form comboBox */
.comboBoxAction {
	position:absolute;
	background:none !important;
	border:none !important;
	padding:0;	
	right: -1px;
	top: 0;
}
.comboBoxAction span span {
	width:24px;
	height:26px;
	background:transparent url(../images/ic_comboBox.gif) no-repeat; 
	display:block;
}
.ui-state-hover span span {
	background-position: 0 -26px;
}
.ui-menu {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CDCDCD;
}

.searchFilters.flyOutGroup {
	left: -9999px;	
}
.supportContext .formTextThemeB .sectionContent label + input[type=text] {
	width: 550px;
	padding-right: 10px !important;	
}
/* DEV - DO NOT USE YET */