@import "bell_master.css";

/*!:: BELL CANADA v1.2512

Date: TBD

Development Team: Son Pham, Michel Pen, Philippe Prevost
http://www.bellsolutionsweb.ca/

This file is part of Bell.ca style library. It require bell_master.css to be 
imported properly, as it provide basic styles and some crucial structure and
interaction elements. Please consider both files as a whole.

::*/

/*:: =Master Overwrites ::::::::::::::::::::::::::::::::: */
em {color: #555;}
p em {color: #000;}

dl {margin-bottom: 21px;}
	dt {font-weight: bold;}
	dd {font-weight: normal; margin-bottom: 5px;}

.processAction .first {float: left;}
.processAction .last {float: right;}
.formGroup .sectionHeader em {display: block; font-size: 0.916em; line-height: 1.5em;}
.formGroupThemeA .sectionHeader, .formGroupThemeA .sectionContent {float: none;}
.pgTitleOptions .formGroup {margin-bottom: 0;}
.headingThemeB, .headingThemeC {color: #0066A4;}
.headingThemeC {border-color: #ddd;}
	.headingThemeC em {display: block; font-size: 12px;}
.toggle:visited {color: #0066A4;}
.itemGroup .sectionContent .hSeparator, .itemGroup .sectionContent .hSeparator1, .itemGroup .sectionContent .hSeparator2, .itemGroup .sectionContent .hSeparator3 {clear: none;}
.buttonWrap {position: absolute; right: 21px; top: 0; width: auto;} /* <- this might be moved to bell_prime if no impact */
.multiColumn .shell {margin-bottom: 12px;}
.actionLink {color: #0066A4 !important;}
.actionLink:hover {text-decoration: underline;}
.toolTipAction, .actionSort {outline: none;}
.message p {margin-bottom: .75em;}
.cBoxThemeA .cFooter {top:0;}

/*:: =pushUp ::::::::::::::::::::::::::::::::::::::::: */
/* note: default class not specified due to the fact that this class is very context-specific */	
.infoGroup .pushUp {margin-top:-36px;} /* <- please see IE css for overwrites; IE renders an additionnal 4px */
	
/*:: =logo (My Bell logo) :::::::::::::::::::::::::: */
.logo {height:37px;width:61px;background:transparent url(../common/all_languages/all_regions/skin/myBell/logoBell.gif) left top no-repeat;}

/*:: =shell ::::::::::::::::::::::::::::::::: */
.shellThemeD {position:relative;min-height:41px;border-color:#e2e2e2;border-top-color:#e0e0e0;background:#fff url(../common/all_languages/all_regions/skin/myBell/bg_shellThemeD.gif) left bottom repeat-x;}
	.shellThemeD .shellExtra1, .shellThemeD .shellExtra2, .shellThemeD .shellExtra3, .shellThemeD .shellExtra4 {height:9px;width:8px;background:url(../common/all_languages/all_regions/skin/myBell/bg_shellThemeDExtra.png) left top no-repeat transparent;}
		.shellThemeD .shellExtra2 {background-position:right top;}
		.shellThemeD .shellExtra3 {background-position:left bottom;}
		.shellThemeD .shellExtra4 {background-position:right bottom;}
		
.shell .dataListThemeF .sectionHeader {float: left; padding-left: 0;}

/*:: =nav ::::::::::::::::::::::::::::::::::::::::: */
.nav {padding:11px 20px 9px 19px; min-height: 43px;}
	.nav .logo {position:absolute;top:13px;left:19px;}
	.nav .navBar {position:relative;top:0;}
	.nav .navOptions {position:absolute;top:15px;right:12px;}
	.nav .buttonWrap {right: 8px; top: 14px;}
		
/*:: =navBar :::::::::::::::::::::::::::::::::::::: */
.navBar {display:inline-block;}

	.navBar ul {margin:0;list-style: none;}
		.navBar ul li {float:left;margin:0;padding:0;background:none;}
			.navBar ul li a {display:block;padding:13px 47px 6px 59px;text-decoration:none;font-size:14px;color:#212121;border-top:solid 1px #b5b5b5;border-right:solid 1px #ababab;border-bottom:solid 1px #b5b5b5;background:url(../common/all_languages/all_regions/skin/myBell/bg_navBar.png) 0 -20px no-repeat #e1e1e1;}
				.navBar ul li a.first {padding-right:39px;padding-left:39px;border-left:solid 1px #b5b5b5;}
				.navBar ul li a.last {padding-right:49px;padding-left:49px;border-right-color:#b5b5b5;}
			
			/* if the link is active */
			.navBar ul li.active a {color:#fff;border-top-color:#515151;border-right-color:#555;border-bottom-color:#737373;background-position:right -20px;background-color:#7d7d7d;}
				.navBar ul li.active a.first {border-left:solid 1px #646464;}
				.navBar ul li.active a.last {border-right-color:#646464;}
				
			/* creating the Extras 	*/
			.navBar .navBarExtra1, .navBar .navBarExtra2, .navBar .navBarExtra3, .navBar .navBarExtra4 {position:absolute;display:block;height:10px;width:10px;background: url(../common/all_languages/all_regions/skin/myBell/bg_navBar.png) left top no-repeat transparent;}
				/* positionning the Extras */
				.navBar .navBarExtra1 {top:0;left:0;background-position:0 0;}
				.navBar .navBarExtra2 {top:0;right:0;background-position:-10px 0;}
				.navBar .navBarExtra3 {bottom:0;left:0;background-position:0 -10px;}
				.navBar .navBarExtra4 {bottom:0;right:0;background-position:-10px -10px;}
				.navBar .active .navBarExtra1 {background-position:-20px 0;}
				.navBar .active .navBarExtra2 {background-position:-30px 0;}
				.navBar .active .navBarExtra3 {background-position:-20px -10px;}
				.navBar .active .navBarExtra4 {background-position:-30px -10px;}
			
			/* creating the icons */
			.icon {text-indent: -999em;float:left;margin:-6px 0 0 -20px;display:block;background:transparent url(../common/all_languages/all_regions/skin/myBell/icons.png) no-repeat -30px 0px;}
				.inputAside .icon {position: relative; top: -7px; margin: 0 0 0 5px; float: none; display: inline-block;}

				.first .icon {left:33px;margin-left:-6px;}
				.last .icon {left:36px;margin-left:-12px;}			
					/* context */
					.formGroup .sectionAside .icon {margin-left: 10px;margin-right: 0;text-indent: -9999px;width: 40px;}
					
			.dropDown {width: 12px; height: 7px; display: inline-block; position: relative; left: 7px; line-height: 0; font-size: 0; background: url(../common/all_languages/all_regions/skin/myBell/bg_navBarDropDown.gif) left top no-repeat transparent;}
				.active .dropDown {background-position: left bottom;}
					
			/* flyOut */
			.navBar .on .flyOut {display: block;}
				.navBar .flyOut {left:-11px;}
				.navBar .flyOut ul li {float: none;}
					.navBar .flyOut ul li a, .navBar .flyOutFooter a, .navBar .active .flyOutFooter a {background: #F2F2F2; border: 0; padding: 0; display: block; min-height: 0 !important; height: auto !important;}
						.navBar .flyOut ul li a:hover, .navBar .flyOutFooter a:hover {background: #e5e3e3; display: block; padding: 0;}
					.navBar .flyOutFooter a, .navBar .active .flyOutFooter a, .navBar .flyOutFooter a:hover, .navBar .active .flyOutFooter a:hover {background: transparent;}
					.navBar .flyOut ul li a, .navBar .flyOut ul li a:hover {color: #212121; font-size: 1em; padding: 5px 14px 5px 14px;}
						.navBar .flyOut ul li.active a {background: #dae8f0;}
					.navBar .flyOutFooter {padding-left: 14px;}
					.navBar .flyOutFooter .moreLink {position: relative;}
							.navBar .flyOutFooter .moreLink .seeMoreLinkExtra {position: absolute; left: auto; right: 0; top: 1px;} /* <- change to moreLink when JS gets updated */
				

			
/*:: =pageCounterThemeA (TO BE MERGED IN BELL_MASTER) ::::::::::::::::::::::::::: */
.pageCounterThemeA li a {background:transparent url(../common/all_languages/all_regions/skin/myBell/bg_toggleSprite.gif) no-repeat left 0px;}
	/* if the links are active */
	.pageCounterThemeA li a.first {padding-left:21px;background-position:0 -294px;}
	.pageCounterThemeA li a.last {padding-right: 22px;background-position:0 0;}
		.pageCounterThemeA li a.last span {width:14px;background:transparent url(../common/all_languages/all_regions/skin/myBell/bg_toggleSprite.gif) no-repeat right -294px;}

	/* if the links are inactive */
	.pageCounterThemeA li.disabled, .pageCounterThemeA li.disabled a {cursor:auto;color:#999;}
		.pageCounterThemeA li.disabled a.first {background-position:0 -355px;}
		.pageCounterThemeA li.disabled a.last span {background-position:right -355px;}

/*:: =cBoxThemeB :::::::::::::::::::::::::::::::::: */
.cBoxThemeB .bord1, .cBoxThemeB .bord2, .cBoxThemeB .bord3, .cBoxThemeB .bord4, .cBoxThemeB .bord5, .cBoxThemeB .bord6, 
.cBoxThemeB .bord7, .cBoxThemeB .bord8, .cBoxThemeB .bord9, .cBoxThemeB .bord10, .cBoxThemeB .bord11 
{background: url(../common/all_languages/all_regions/skin/myBell/bg_itemAside.jpg) repeat-y;}

.cBoxThemeB .bord1 {background-position:79px 0;}
.cBoxThemeB .bord2 {background-position:158px 0;}
.cBoxThemeB .bord3 {background-position:237px 0;}
.cBoxThemeB .bord4 {background-position:316px 0;}
.cBoxThemeB .bord5 {background-position:395px 0;}
.cBoxThemeB .bord6 {background-position:514px 0;}
.cBoxThemeB .bord7 {background-position:555px 0;}
.cBoxThemeB .bord8 {background-position:632px 0;}
.cBoxThemeB .bord9 {background-position:711px 0;}
.cBoxThemeB .bord10 {background-position:790px 0;}
.cBoxThemeB .bord11 {background-position:869px 0;}
.cBoxThemeB .bord12 {background-position:0 0;}

/*:: =cHeaderThemeA ::::::::::::::::::::::::::::::: */
/*:: =cFooterThemeA ::::::::::::::::::::::::::::::: */
.cBox .cHeaderThemeA, .cBox .cFooterThemeA {z-index:3;text-align:center;font-size:1.1em;}
	.cBox .cHeaderThemeA {padding-top:35px;padding-bottom:5px;border-bottom:solid 1px #e0e0e0;background:transparent url(../common/all_languages/all_regions/skin/myBell/bg_cHeadThemeA.jpg) repeat-x top left;}
	.cBox .cFooterThemeA {top:0;padding-top:17px;padding-bottom:23px;background:transparent url(../common/all_languages/all_regions/skin/myBell/bg_cFootThemeA.jpg) repeat-x bottom left;}

/*:: =toolTipThemeA ::::::::::::::::::::::::::::::: */
.toolTipActionThemeA {background-position:0 -400px;}

.toolTipThemeA .lining, .toolTipThemeA .padder {padding-top:5px;padding-bottom:4px;text-align:center;font-weight:bold;color:#FFF;background:#af1a1a url(../common/all_languages/all_regions/skin/toolTips/bg_toolTipThemeA.gif) repeat-x;}

.toolTipThemeA .toolTipBordRight, .toolTipThemeA .toolTipBordLeft {background:url(../common/all_languages/all_regions/skin/toolTips/bg_toolTipThemeASideExtra.png) repeat-y transparent;}
.toolTipThemeA .toolTipBordRight {background-position:left top;}
	.toolTipThemeA .toolTipBordLeft {background-position:right top;}

.toolTipThemeA .toolTipTopRight, .toolTipThemeA .toolTipBottomRight {background: url(../common/all_languages/all_regions/skin/toolTips/bg_toolTipThemeABoxRight.png) no-repeat transparent;}
.toolTipThemeA .toolTipTopRight {background-position:right top;}
	.toolTipThemeA .toolTipBottomRight {background-position:right bottom;}

.toolTipThemeA .toolTipTopLeft, .toolTipThemeA .toolTipBottomLeft {background:url(../common/all_languages/all_regions/skin/toolTips/bg_toolTipThemeABoxLeft.png) no-repeat transparent;}
.toolTipThemeA .toolTipTopLeft {background-position:left top;}
	.toolTipThemeA .toolTipBottomLeft {background-position:left bottom;}

.toolTipThemeA .toolTipArrow {background:transparent url(../common/all_languages/all_regions/skin/toolTips/bg_toolTipThemeAArrowSprite.png) no-repeat right top;}
	.toolTipThemeA .arrowUp {background-position:left top;}
		.toolTipThemeA .arrowRight {background-position:right bottom;}
		.toolTipThemeA .arrowLeft {background-position:left bottom;}
		
/*:: =toolTipThemeB ::::::::::::::::::::::::::::::: */
.toolTipActionThemeB {background-position:0 -960px;}
	
/*:: =formContent (Information block displayed in a form) ::::::::::::::::::::::::::::::: */
.formContent {margin-bottom: 2em;}
	.formContent .sectionContent {position: relative; display: block;}
.formContentThemeA {margin-left: 20%; padding-left: 56px; font-size: 1.166em;}
.formCollection .formContentThemeA {margin-bottom: 1em; margin-top: 10px;}

		
/*:: =dataList (DL, DT, DD) ::::::::::::::::::::::::::::::: */
.dataList dt, .dataList dd {font-weight: normal; font-size: 1.166em; margin-bottom: 4px;}
	.dataList dt {margin-right: 10px;}
	.dataList dd {color: #212121;}


/*:: =ProgressBar ::::::::::::::::::::::::::::::: */
/* maximum bar height is 85px - modify the background image if we need to increase the value. */
.hProgressBar, .vProgressBar {position: relative; overflow: hidden; margin-bottom: 21px; height: 22px; background: #fff url("../common/all_languages/all_regions/skin/myBell/bg_hProgressBarShadows.png") repeat-x left top;}
	.progressValue {position: absolute; top: 0; left: 0; background-color: #1280c3; height: 100%; width: 50%; z-index: 3; padding-right: 1px;}
	.progressValueThemeA {background: transparent url("../common/all_languages/all_regions/skin/myBell/bg_progressHashed.gif") 0 0; border-left: 1px solid #95a9b5;}
	.progressValueThemeB {background-color: green;}
		.progressGradient {position: absolute; display: block; bottom: 0; left: 0; height: 100%; width: 100%; z-index: 4; background: transparent url("../common/all_languages/all_regions/skin/myBell/bg_hProgressBarGradient.png") repeat-x left bottom;}
	.progressBarExtra1, .progressBarExtra2, .progressBarExtra3, .progressBarExtra4, .progressBarExtra5, .progressBarExtra6, .progressBarExtra7 {position: absolute; display: block; z-index: 1;}
	.progressBarExtra1, .progressBarExtra2, .progressBarExtra3, .progressBarExtra4 {width: 6px; height: 6px; background: red; z-index: 7; background: transparent url("../common/all_languages/all_regions/skin/myBell/bg_progressBarCorners.png") no-repeat left top;}
		.progressBarExtra1 {top: 0; left: 0;}
		.progressBarExtra2 {top: 0; right: 0; background-position: right top;}
		.progressBarExtra3 {bottom: 0; left: 0; background-position: left bottom;}
		.progressBarExtra4 {bottom: 0; right: 0; background-position: right bottom;}
		.progressBarExtra5 {bottom: 0; left: 0; width: 100%; height: 4px; background: transparent url("../common/all_languages/all_regions/skin/myBell/bg_hProgressBarShadows.png") repeat-x left bottom;}
		.progressBarExtra6, .progressBarExtra7 {height: 100%; width: 5px; background: transparent url("../common/all_languages/all_regions/skin/myBell/bg_hProgressBarSideShadows.png") repeat-y left top;}
			.progressBarExtra6 {top: 0; left: 0;}
			.progressBarExtra7 {top: 0; right: 0; background-position: right top;}
			
	.cBoxThemeC .progressBarExtra1, .cBoxThemeC .progressBarExtra2, .cBoxThemeC .progressBarExtra3, .cBoxThemeC .progressBarExtra4 {background-image: url("../common/all_languages/all_regions/skin/myBell/bg_progressBarCornersCbox.png")}

/* maximum bar width is 85px - modify the background image if we need to increase the value. */
.vProgressBar {width: 22px; height: 300px; background-image: url("../common/all_languages/all_regions/skin/myBell/bg_vProgressBarShadows.png"); background-repeat: repeat-y;}
	.vProgressBar .progressValue {top: auto; bottom: 0; width: 100%; height: 100%; padding-right: 0; padding-top: 1px;}
	.vProgressBar .progressValueThemeA {background-image: url("../common/all_languages/all_regions/skin/myBell/bg_progressHashedVertical.gif"); border-left: 0; border-bottom: 1px solid #95a9b5;}
	.vProgressBar .progressGradient {left: auto; right: -1px; background: transparent url("../common/all_languages/all_regions/skin/myBell/bg_vProgressBarGradient.png") repeat-y left bottom;}
	.vProgressBar .progressBarExtra5 {right: 0; top: 0; left: auto; bottom: auto; height: 100%; width: 4px; background: transparent url("../common/all_languages/all_regions/skin/myBell/bg_vProgressBarShadows.png") repeat-y right bottom;}
	.vProgressBar .progressBarExtra6, .vProgressBar .progressBarExtra7 {height: 5px; width: 100%; background: transparent url("../common/all_languages/all_regions/skin/myBell/bg_vProgressBarSideShadows.png") repeat-x left top;}
		.vProgressBar .progressBarExtra7 {bottom: 0; top: auto; background-position: right bottom;}

.progressBarGroup {overflow: hidden; clear: both; height: 100%;}
.progressBarGroup .vProgressBar {float: left; margin-right: 21px;}
		
.hProgressBar .progressValueSecondary {right: 0; left: auto;}
.vProgressBar .progressValueSecondary {top: 0 !important; bottom: auto;}
.dataListThemeB .hProgressBar, .dataListThemeC .vProgressBar {margin-bottom: 10px;}



/*:: phil.css */
/*:: =DEV MY BELL (DO NOT MERGE WITH MASTER) :::::::::::::::::::::::::::::::::::::::::: */
/*:: =itemCollection :::::::::::::::::::::::::::::: */
.cBoxThemeB .itemCollection {padding-right:7px;padding-bottom:0;}

	.itemCollection .itemGroup {margin-bottom:25px;padding:4px 0 9px 0;border-bottom:solid 1px #e0e0e0;}
		.itemCollection .last {margin-bottom:0;border:0;}
		
			.itemCollection .itemFigure {margin-bottom:0;}
				.itemCollection .dataList {margin-bottom:0;}
					.itemCollection .dataList {margin-bottom:11px;}
				.itemCollection .itemGroup h2, .itemCollection .itemGroup h2 a {margin-bottom:0.5em;color:#0066a4;}
				.itemCollection .itemGroup .buttonThemeC {margin-top:-1px;margin-bottom:20px;}
			
/*:: =itemAside ::::::::::::::::::::::::::::::::::: */
.cBoxThemeB .itemAside {padding-top:32px;padding-bottom:16px;}
	.itemAside .headingThemeA  {margin-bottom:17px;}
		.itemAside .dataList li.last, .itemAside .dataList li.last .sectionHeader, .itemAside .dataList li.last .sectionValue {margin-bottom:0;}
		.itemAside .dataList li.last {padding: 14px 0; border-top: 1px solid #E5E5E5; border-bottom: 1px solid #E5E5E5;}
		.itemAside .dataList li .sectionHeader {width: auto;} .itemAside .dataListThemeB li .sectionHeader em {margin-bottom: 0;}
	.itemAside .button {margin-bottom:8px;}
		.itemAside .buttonThemeC {margin-right:0;}

	.colGroup .itemAside .dataList li {margin-bottom: 10px;}
	.colGroup .itemAside .dataListThemeF li {margin-bottom: 5px;}
	
/*:: =DEV (DO NOT MERGE WITH MASTER) :::::::::::::::::::::::::::::::::::::::::: */

/* NEW CLASS!!! - vHistogram : vertical bar chart (do not forget to check ie6 styles) */
.shell .vHistogram {margin-top: 0;}
.vHistogram {position: relative; padding-right: 15px; padding-bottom: 10px; margin-top: 21px; width: auto;}
	.chartGroup .axisY {position: relative;}
		.axisY .axisRow {height: 36px; background: transparent url("../common/all_languages/all_regions/skin/myBell/bg_hDotted.gif") repeat-x 50px bottom; position: relative; margin-left: 40px;}
			.axisY .axisRow .axisRowLabel {text-align: center; width: 40px; position: absolute; bottom: -8px; margin-left: -45px;}
		.axisY .axisRowLimit {position: absolute; display: inline; background: transparent url("../common/all_languages/all_regions/skin/myBell/bg_chartLimit.gif") no-repeat 40px top; top: 127px; height: 1px; width: 100%; margin-left: 0; margin-top: -1px; z-index: 3;}
			.axisY .axisRowLimit .axisRowLabel {display: none;}	
	
	.chartContent {position: relative; width: 100%; margin-bottom: 50px; min-height: 216px; /* <- total height of axisRow - DO NOT FORGET TO ADD TO IE6 TOO */}
	.chartGroup .progressBarCollection {position: absolute; top: 0; left: 0; padding-left: 50px; min-height: 100%; height: 216px; width: 100%;} /* <- Specified exact height for IE6 only */
		.chartGroup .progressBarLabel {bottom: -35px; left: 3px; margin: 0 auto; position: absolute; text-align: center; width: 100%; min-height: 40px; margin-bottom: -21px;}
		.vHistogram .progressBarCollection .progressBarGroup {clear: none; height: auto; overflow: visible; position: absolute; width: 80px; bottom: 0;  margin-right: 50px;}
			.vHistogram .progressBarCollection .vProgressBar {margin: 0 auto; position: relative; float: none; left: 4px;}
	
.vHistogramThemeA, .vHistogramThemeB  {width: 413px; float: left; padding-right: 0; margin-right: 13px;}
.vHistogramThemeB .axisRow {margin-left: 0;}
	.vHistogramThemeB .axisY .axisRowLimit {background-position: 0 top;}
		.vHistogramThemeB .axisRowLabel {display: none;}
		.vHistogramThemeB .progressBarCollection {padding-left: 15px;}
		.vHistogram.last, .vHistogramThemeA.last, .vHistogramThemeB.last {margin-right: 0;}

.chartGroup .formGroup .sectionHeader label{font-size: 12px;}
.chartGroup .formGroup .sectionHeader {width: auto; float: left;}

/* hHistogram - ON HOLD, TO BE CONTINUED.
.hHistogram {margin-top: 40px;}
	.hHistogram .axisY .axisRow {float: right; height: 216px; margin-left: 0; width: 16.6%; background: transparent url("../common/all_languages/all_regions/skin/myBell/bg_vDotted.gif") repeat-y center top;}
	.hHistogram .axisY .axisRow .axisRowLabel {margin-left: 0; width: 100%; top: -25px;}
	.chartGroup  .hHistogram .progressBarCollection {height: auto;}  */	
 
.shell .progressBarExtra1, .shell .progressBarExtra2, .shell .progressBarExtra3, .shell .progressBarExtra4 
{background-image: url("../common/all_languages/all_regions/skin/myBell/bg_progressBarCornersShell.png");}


/* MyBell Dock */
/*  Note to the Javascript Architect

	General
	-------------------------------------------------------
	- the "z-index" needs to be generated by JS
	- the "top" value needs to be generated by JS (see details below)
	
	About top value positionning
	-------------------------------------------------------
	- The following browser have their "top" value different than firefox's 
		- IE8, Chrome, Safari (around 1px shift)
		- IE6 (around 2px shift)
		EXAMPLE : 
			> IF firefox "top" value is "-142px" => IE8, Chrome and Safari value should be something around "-141px" (+1px)
			> IE6 should be around "-140px" (+2px)
		
	- The following browser have the same "top" value as firefox's
		- IE7, Opera

	- For IE6
		- .dockButtonExtra1's width needs to be generated dynamically by JS. Please delete its hardcoded value in myBell.ie6.css after JS is in place.
	
	About z-index
	-------------------------------------------------------
	- the z-index of .dock needs to be the highest possible (ex. 900)
	- the z-index of .dockContent needs to be lower than .dock's (ex. 500)
	- the z-index of .dock .flyOut needs to be lower than .dock's and .dockContent's (ex. 0)
	
	Other notes
	-------------------------------------------------------
	- Make sure no inline styles are in the actual markup! (flyOut may have some "display: block")
	- Do not forget that IE (6-7) MAY have some specific styles of their own in their CSS files
	- Make sure when switching from flyOut to another flyOut that the first one is hidden before showing the next one; IF not, .dockButtonExtra1's shadows
	  WILL overlap over the previous flyOut.
	
	MARKUP CHANGED!!! 
	-------------------------------------------------------
	- flyOutTitle have been moved out of "padder" */
	.dock {z-index: 999; position: fixed; width: 100%; min-width: 970px; border-top: 1px solid #cdcdcd; bottom: 0; left: 0; background: #fcfcfc url("../common/all_languages/all_regions/skin/myBell/dock/bg_dock.jpg") repeat-x 0 bottom;}
		.dockContent {z-index: 400; position: relative; margin: 0 auto; width: 95%; border-left: 1px solid #fff; background: transparent url("../common/all_languages/all_regions/skin/myBell/dock/bg_dockBorder.gif") repeat-y 0 0;}
			.dockContent ul {margin: 0;}
				.dockContent ul li, .dock .messageGroup, .dock .nextPrevious {position: relative; background: none; padding-left: 0; display: block; float: left; margin-bottom: 0; border-right: 1px solid #fff; background: transparent url("../common/all_languages/all_regions/skin/myBell/dock/bg_dockListBorder.gif") repeat-y right 0;}
					.dockContent .messageGroup {width: 63%;}
					.dockContent .messageGroup, .dockButton a, .dock .nextPrevious {padding: 16px 22px 14px 15px;}
					.messageGroup .sectionContent {float: left; overflow: hidden; width: 75%;}
					.messageGroup .sectionAside {float: right;}
					.dock .sectionAside {position: absolute; top: -5px; right: 10px; width: auto; line-height: 26px; padding: 15px 0; width: auto;}

				.dockContent ul .first {width: 69%; padding: 16px 15px 14px;}
				.dockButton {text-align: center;}
					.dockButton a {color: #212121; display: block; margin-right: 12px; margin-bottom: 0; background: url("../common/all_languages/all_regions/skin/bg_iconSprite.gif") no-repeat right -463px transparent;}
					.dockButton a:hover {text-decoration: none;}
						.dockButtonExtra1 {display: none; background: transparent url("../common/all_languages/all_regions/skin/myBell/dock/bg_dockButtonExtra1.png") repeat-x 0 bottom; height: 18px; left: -8px; position: absolute; top: -18px; width: 100%;z-index:1;}
							.dockButtonExtra2 {position: absolute; display: block; width: 14px; height: 14px; background: transparent url("../common/all_languages/all_regions/skin/myBell/dock/bg_dockButtonExtra2.png") repeat-x 0 bottom; bottom: 0; right: -14px;}
					.dockButton a:hover span, .dockContent .active .flyOut {display: block;}
					.dockButton .flyOut {display:none;}
					.dockButtonAction {outline: none;}
					
				.dockContent ul .active {background-color: #fff;}
					.dockContent ul .active .dockButtonExtra1 {display: block; background: #fff; left: -1px; height: 3px; top: -1px;}
						.dockContent ul .active .dockButtonExtra2 {display: none;}
						
		.dockExtra1 {position: absolute; top: -8px; left: 0; background: transparent url("../common/all_languages/all_regions/skin/myBell/dock/bg_dockShadow.png") repeat-x 0 0; height: 7px; width: 100%;}

		/* flyOut */
		.dock .flyOut {right: -10px; top: -142px; z-index: 0;} /* <- top/z-index value are hardcoded, please see details above ^ */
			.dock .flyOutBottomRight {display: none;}
		
		.dock .flyOut .padder {background-color: #fff; padding: 10px 21px;}
			.dock .flyOut .flyOutTitle, .dock .flyOut .first {width: auto; text-align: left; padding: 12px 21px 8px 21px; margin-bottom: 0;}
				.dock .flyOut ul li {float: none; border: 0; text-align: left; padding-left: 14px; margin-bottom: 3px; background: url("../common/all_languages/all_regions/skin/bl_default.gif") no-repeat scroll 0 0.48em transparent;}
					.dock .flyOut ul li a {background: none; padding: 0; margin: 0; display: inline; color: #0066A4;}
					.dock .flyOut ul li a:hover {text-decoration: underline;}

/* nextPrevious - overwriting bell_master.css + used in cHeaderOptions */
.dock .nextPrevious, .cHeaderOptions .nextPrevious {margin-top: 0; float:left;margin-top: inherit; width: 96px;}
	.next, .previous {width: 14px; height: 14px; display: block; background: transparent url("../common/all_languages/all_regions/skin/bg_iconSprite.gif") no-repeat left -1094px;}
	.next {float: right; background-position: left -1054px;}
	.previous, .dock .nextPrevious span, .cHeaderOptions .nextPrevious span, .dock .message {float: left;}
	.dock .nextPrevious {padding-right: 15px;}
	.dock .nextPrevious span, .cHeaderOptions .nextPrevious span {padding: 0 7px; position: relative; top: -1px;}
	
	.cHeaderOptions .nextPrevious {margin-top:2px; padding-right:0; width: auto;}
	/* nextPreviousThemeA - changes arrows images */
	.nextPreviousThemeA .next, .nextPreviousThemeA .previous {width: 15px; background-position: left -681px; float: none; display: inline-block;}
		.nextPreviousThemeA .next {background-position: right -721px;}
		.cHeaderOptions .nextPrevious span {float: none; top: -3px;}
				
/* messageGroup in cHeaderOptions */				
.cHeaderOptions .messageGroup {float: left; margin-left: 157px;}
	.cHeaderOptions .messageGroup .sectionContent {float: left; width: auto; margin-right: 8px; display: inline;}
	.cHeaderOptions .messageGroup .sectionAside {float: left; display: inline;}
	.cHeaderOptions .messageGroup .message, .dataList .sectionValue .message, .cHeaderOptions .messageGroup .toolTipAction, .dataList .sectionValue .toolTipAction {display: inline-block; text-indent: 0; position: relative; margin-right: 8px;}
		.cHeaderOptions .messageGroup .messageThemeC, .dataList .sectionValue .messageThemeC {height: 14px;} .dataList .sectionValue .toolTipAction {margin-right: 0;}
		.cHeaderOptions .messageGroup .toolTipAction {margin-right: 10px;}
		.cHeaderOptions .messageGroup .message {margin-left: -7px;}
		
/* NEW CLASS!!! - cBoxThemeC */
.cBoxThemeC {padding-bottom: 0; background-color: #f9f9f9;}
	.cBoxThemeC .padder {padding-top: 24px; padding-bottom: 24px;}
	.cBoxThemeC .cHeader {margin-bottom: 0; padding-bottom: 15px; padding-top: 19px;}
		.cBoxThemeC .cHeader .splitter {overflow: visible;}
			.cBoxThemeC .cHeader .splitterRight { text-align: left;}
			.cBoxThemeC .cHeader .splitterContent {margin-right: 5px; line-height: 2.3em;}
	.cBoxThemeC .cBoxExtra3, .cBoxThemeC .cBoxExtra4, .cBoxThemeC .cBoxExtra5, .cBoxThemeC .cBoxExtra6 {background-image: url(../common/all_languages/all_regions/skin/bg_cBoxExtraWhite.png);}
	
	/* Overwrites */
	.dataList .sectionValue  .message, .dataList .sectionValue .toolTipAction {margin-left: 6px; top: 2px; margin-top: -2px;}
	.cBoxThemeC .toggleContent {margin-bottom: 0; margin-top: 12px; position: relative;} /* <- position relative is required to fix IE6-7's bullet ghosting bug */

/* NEW CLASS!!! - toggleThemeB */
.toggleThemeB {background-position: left -320px; line-height: 1.2em; padding-left: 22px; padding-right: 0;}
	.toggleThemeBOpen {background-position: left -360px; position: relative; z-index: 1;} /* ### */
	
/* NEW CLASS!!! - treeList */
.treeList {width: 90%; float: left;} .dataList li .treeList {overflow: visible;}
	.treeList li, .dataList li .treeList li {padding-bottom: 8px; margin-bottom: 0; background: transparent url(../common/all_languages/all_regions/skin/myBell/bg_treeLine.gif) no-repeat 6px top; padding-left: 28px;}
		.treeList .last, .dataList li .treeList .last {background-position: 6px -5092px;}
		.treeList li .treeListExtra1 {display: block; width: 12px; height: 27px; position: absolute; top: -18px; left: 6px; background: transparent url(../common/all_languages/all_regions/skin/myBell/bg_treeHook.gif) no-repeat left bottom;}
	
/* NEW CLASS!!! - formCollectionThemeA */
.formCollectionThemeA .formGroup {float: none;}
.infoGroup.shell .formCollectionThemeA .formGroup .first {top: 31px;}
.formCollectionThemeA .formText .optionGroup input {width: 18em;}
	/* formText with optionGroup format */
	.formText .optionGroup label {display: block; margin-bottom: 8px;}
	.formText .optionGroup input {float: none;}
	.infoGroup .sectionContent  .formCollection .formText .optionGroup label {font-size: 1.166em;}
	
	.infoGroup.shell .sectionContent .formCollectionThemeA  .formGroup .sectionContent {width: auto;}
	
/* NEW CLASS!!! - contentLink (very specific) */
.contentLink, a.contentLink {color: #000; display: block; font-size: 1.5em; padding: 40px 0; margin-bottom: 12px; text-align: center; text-decoration: none;}
	.contentLink em {font-size: 0.65em; display: block; margin: 15px auto 0;}
	.contentLink .icon {float: none; margin: 0 auto 28px;}
		
/* ICONS */
.iconMobile, .iconThemeA {background-position:0 0; height:30px;width:30px;}
.iconDocument, .iconThemeB {background-position:-30px 0; height:30px;width:30px;}
.iconPerson, .iconThemeC {background-position: -60px 0; height:30px;width:30px;}
.iconVisa, .iconThemeD {background-position: left -75px; width: 42px; height: 28px;} .active .iconVisa, .active .iconThemeD {background-position: left -75px;}
.iconMastercard, .iconThemeE {background-position: left -105px; width: 42px; height: 28px;} .active .iconMastercard, .active .iconThemeE {background-position: left -105px;}
.iconAmex, .iconThemeF {background-position: left -135px; width: 42px; height: 28px;} .active .iconAmex, .active .iconThemeF {background-position: left -135px;}
.iconAnchor, .iconThemeG {background-position: left -193px; width: 72px; height: 72px;}
.iconTrash, .iconThemeH {background-position: right -193px; width: 72px; height: 72px;}