/*!:: Bell Canada UIKit v1.6141

bell.helpers.css
Build Date: 6:18 PM Monday, June 19, 2014

Development Team: Son Pham, Michel Pen, Simon Buteau, Fernando Saldarriaga
Founder Team: Son Pham, Michel Pen
Contributors: Bruno-Pierre Campeau-Riberdy

This file contains all the CSS utilities classes used within Bell UI Kit.

::*/

/* =Debug tools -ONLY UNCOMMENT WHEN DEBUGGING 
._debug, ._debug * {border: 1px solid red !important;}
._zoom, ._zoom * {zoom: 1;} */

/* =grid : Display the grid overlay for visual alignment -ONLY UNCOMMENT WHEN DEBUGGING 
.grid, ._grid {z-index: 99;width: 100%;height: 100%;position: fixed;top: 0;left: 50%;width: 935px;margin-left: -468px;background: url(../../resources/images/grid.png) 0 0 repeat-y transparent;} */

/* =codesample : basic styles for sample code content (used in References templates) */
._codesample, .codesample {
	margin: 10px 0 20px;
	background-color: #d4ebf1;
	border: 1px solid #acd2dc;
	padding: 10px;
	font-family: courier, sans-serif;
}

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

/* =clearer : clears floats */
.clearer {
	clear: both;
	display: block;
	overflow: hidden;
	width: 0; 
	height: 0;
	line-height: 0;
}

.toWrapText {
	white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      			/* Opera 4-6 */
	white-space: -o-pre-wrap;    			/* Opera 7 */
	white-space: pre-wrap;       			/* css-3 */
	word-wrap: break-word;       			/* Internet Explorer 5.5+ */
	word-break: break-all;
	white-space: normal;
}

/* =offScreen : put an element off the screen (the viewport), mostly for accessibility purposes */
.offScreen {
	position: absolute !important;
	left: -999em !important;
	top: -999em !important;
}

/* =onScreen : put an element back on the screen (the viewport) */
.onScreen {
	position: inherit !important;
	left: auto !important;
	top: auto !important;
}
	.onScreen .offScreen {position: static !important;}

/* =indent : simple content indentation (jump of 10px per level)
   =toMarginLeft
*/
.indent0-5, .toMarginLeft0-5 {margin-left: 5px !important;}
.indent, .indent1, .toMarginLeft1 {margin-left: 10px !important;}
.indent1-5 {margin-left: 15px !important;}
.indent2, .toMarginLeft2 {margin-left: 20px !important;}
.indent3, .toMarginLeft3 {margin-left: 30px !important;}
.indent4, .toMarginLeft4 {margin-left: 40px !important;}
.indent5, .toMarginLeft5 {margin-left: 50px !important;}
.indent6, .toMarginLeft6 {margin-left: 60px !important;}
.indent7, .toMarginLeft7 {margin-left: 70px !important;}
.indent8, .toMarginLeft8 {margin-left: 80px !important;}
.indent9, .toMarginLeft9 {margin-left: 90px !important;}
.indent10, .toMarginLeft10 {margin-left: 100px !important;}
.indent11, .toMarginLeft11 {margin-left: 110px !important;}
.indent12, .toMarginLeft12 {margin-left: 120px !important;}
.indent13, .toMarginLeft13 {margin-left: 130px !important;}
.indent14, .toMarginLeft14 {margin-left: 140px !important;}
.indent15, .toMarginLeft15 {margin-left: 150px !important;}
.indent16, .toMarginLeft16 {margin-left: 160px !important;}
.indent17, .toMarginLeft17 {margin-left: 170px !important;}
.indent18, .toMarginLeft18 {margin-left: 180px !important;}
.indent19, .toMarginLeft19 {margin-left: 190px !important;}
.indent20, .toMarginLeft20 {margin-left: 200px !important;}
.indent21, .toMarginLeft21 {margin-left: 210px !important;}
.indent22, .toMarginLeft22 {margin-left: 220px !important;}
.indent23, .toMarginLeft23 {margin-left: 230px !important;}
.indent24, .toMarginLeft24 {margin-left: 240px !important;}
.indent25, .toMarginLeft25 {margin-left: 250px !important;}
.indent26, .toMarginLeft26 {margin-left: 260px !important;}
.indent27, .toMarginLeft27 {margin-left: 270px !important;}
.indent28, .toMarginLeft28 {margin-left: 280px !important;}
.indent29, .toMarginLeft29 {margin-left: 290px !important;}
.indent30, .toMarginLeft30 {margin-left: 300px !important;}

/* =toMarginRight : simple content indentation (jump of 10px per level) */
.toMarginRight0-5 {margin-right: 5px !important;}
.toMarginRight1 {margin-right: 10px !important;}
.toMarginRight2 {margin-right: 20px !important;}
.toMarginRight3 {margin-right: 30px !important;}
.toMarginRight4 {margin-right: 40px !important;}
.toMarginRight5 {margin-right: 50px !important;}
.toMarginRight6 {margin-right: 60px !important;}
.toMarginRight7 {margin-right: 70px !important;}
.toMarginRight8 {margin-right: 80px !important;}
.toMarginRight9 {margin-right: 90px !important;}
.toMarginRight10 {margin-right: 100px !important;}
.toMarginRight11 {margin-right: 110px !important;}
.toMarginRight12 {margin-right: 120px !important;}
.toMarginRight13 {margin-right: 130px !important;}
.toMarginRight14 {margin-right: 140px !important;}
.toMarginRight15 {margin-right: 150px !important;}
.toMarginRight16 {margin-right: 160px !important;}
.toMarginRight17 {margin-right: 170px !important;}
.toMarginRight18 {margin-right: 180px !important;}
.toMarginRight19 {margin-right: 190px !important;}
.toMarginRight20 {margin-right: 200px !important;}
.toMarginRight21 {margin-right: 210px !important;}
.toMarginRight22 {margin-right: 220px !important;}
.toMarginRight23 {margin-right: 230px !important;}
.toMarginRight24 {margin-right: 240px !important;}
.toMarginRight25 {margin-right: 250px !important;}
.toMarginRight26 {margin-right: 260px !important;}
.toMarginRight27 {margin-right: 270px !important;}
.toMarginRight28 {margin-right: 280px !important;}
.toMarginRight29 {margin-right: 290px !important;}
.toMarginRight30 {margin-right: 300px !important;}

.toMarginAuto {margin:0 auto;}


/* =width : sets a width in percent;
	Each variation of width is a 1 to 1 ratio:
		Example: size3 = 3% (mostly used within <table>)
	Matching different width together does not necessary work (meaning their sum won't give 100% all the times):
		Example: size33 + size33 + size33 =/= 100% (but 99%) */
.width0 {width:0% !important;} /* <- for safety purposes, should not be used */
.width1 {width:1% !important;}
.width2 {width:2% !important;}
.width3 {width:3% !important;}
.width4 {width:4% !important;}
.width5 {width:5% !important;}
.width6 {width:6% !important;}
.width7 {width:7% !important;}
.width8 {width:8% !important;}
.width9 {width:9% !important;}
.width10 {width:10% !important;}
.width11 {width:11% !important;}
.width12 {width:12% !important;}
.width13 {width:13% !important;}
.width14 {width:14% !important;}
.width15 {width:15% !important;}
.width16 {width:16% !important;}
.width17 {width:17% !important;}
.width18 {width:18% !important;}
.width19 {width:19% !important;}
.width20 {width:20% !important;}
.width21 {width:21% !important;}
.width22 {width:22% !important;}
.width23 {width:23% !important;}
.width24 {width:24% !important;}
.width25, .width25 > li {width:25% !important;}
.width26 {width:26% !important;}
.width27 {width:27% !important;}
.width28 {width:28% !important;}
.width29 {width:29% !important;}
.width30 {width:30% !important;}
.width31 {width:31% !important;}
.width32 {width:32% !important;}
.width33, .width33 > li {width:33% !important;}
.width34 {width:34% !important;}
.width35 {width:35% !important;}
.width36 {width:36% !important;}
.width37 {width:37% !important;}
.width38 {width:38% !important;}
.width39 {width:39% !important;}
.width40 {width:40% !important;}
.width41 {width:41% !important;}
.width42 {width:42% !important;}
.width43 {width:43% !important;}
.width44 {width:44% !important;}
.width45 {width:45% !important;}
.width46, .width46 > li {width:46% !important;}
.width47, .width47 > li {width:47% !important;}
.width48, .width48 > li {width:48% !important;}
.width49 {width:49% !important;}
.width50, .width50 > li {width:50% !important;}
.width51 {width:51% !important;}
.width52 {width:52% !important;}
.width53 {width:53% !important;}
.width54 {width:54% !important;}
.width55 {width:55% !important;}
.width56 {width:56% !important;}
.width57 {width:57% !important;}
.width58 {width:58% !important;}
.width59 {width:59% !important;}
.width60 {width:60% !important;}
.width61 {width:61% !important;}
.width62 {width:62% !important;}
.width63 {width:63% !important;}
.width64 {width:64% !important;}
.width65 {width:65% !important;}
.width66 {width:66% !important;}
.width67 {width:67% !important;}
.width68 {width:68% !important;}
.width69 {width:69% !important;}
.width70 {width:70% !important;}
.width71 {width:71% !important;}
.width72 {width:72% !important;}
.width73 {width:73% !important;}
.width74 {width:74% !important;}
.width75, .width75 > li {width:75% !important;}
.width76 {width:76% !important;}
.width77 {width:77% !important;}
.width78 {width:78% !important;}
.width79 {width:79% !important;}
.width80 {width:80% !important;}
.width81 {width:81% !important;}
.width82 {width:82% !important;}
.width83 {width:83% !important;}
.width84 {width:84% !important;}
.width85 {width:85% !important;}
.width86 {width:86% !important;}
.width87 {width:87% !important;}
.width88 {width:88% !important;}
.width89 {width:89% !important;}
.width90 {width:90% !important;}
.width91 {width:91% !important;}
.width92 {width:92% !important;}
.width93 {width:93% !important;}
.width94 {width:94% !important;}
.width95 {width:95% !important;}
.width96 {width:96% !important;}
.width97 {width:97% !important;}
.width98 {width:98% !important;}
.width99 {width:99% !important;}
.width100 {width:100% !important;} /* <- for safety purposes, should not be used */

.width88px {width: 88px !important;}
.width89px {width: 89px !important;}
.width100px {width: 100px !important;}

ul.width25, 
ul.width33, 
ul.width46, 
ul.width47, 
ul.width48, 
ul.width50, 
ul.width75 {width: auto !important;}

.toWidthAuto {width: auto !important;}

/* =separator : horizontal separator */
.separator {
	display: block;
	overflow: hidden; 
	height: 1px;
	background-color: #d6d6d6;
	margin:0;
	line-height: 0;
}
	.separatorThemeA {border-bottom: 1px solid #fff;}
	.separatorThemeB {border-top: 1px solid #fff;}

/* [bell.connector.css] =divider : vertical separator */	
	
/* =spacer : basic horizontal spacing */
.spacer, .spacer0-5, .spacer1, .spacer1-5, .spacer2, .spacer2-5, .spacer3, .spacer3-5, .spacer4, .spacer4-5,
.spacer5, .spacer5-5, .spacer6, .spacer6-5, .spacer7, .spacer7-5, .spacer8, .spacer8-5, .spacer9, .spacer9-5, .spacer10 {height: 1px; margin: 0 !important;}
.spacer0-5 {padding: 0.25em 0;} /* 0.5em|3px */
.spacer, .spacer1 {padding: 0.5em 0;} /* 1em|12px */
.spacer1-5 {padding: 0.75em 0;}
.spacer2 {padding: 1em 0;} /* 2em|24px */
.spacer2-5 {padding: 1.25em 0;}
.spacer3 {padding: 1.5em 0;} /* 3em|36px */
.spacer3-5 {padding: 1.75em 0;}
.spacer4 {padding: 2em 0;} /* 4em|48px */
.spacer4-5 {padding: 2.25em 0;}
.spacer5 {padding: 2.5em 0;} /* 5em|60px */
.spacer5-5 {padding: 2.75em 0;}
.spacer6 {padding: 3em 0;} /* 6em|72px */
.spacer6-5 {padding: 3.25em 0;}
.spacer7 {padding: 3.5em 0;} /* 7em|84px */
.spacer7-5 {padding: 3.75em 0;}
.spacer8 {padding: 4em 0;} /* 8em|96px */
.spacer8-5 {padding: 4.25em 0;}
.spacer9 {padding: 4.5em 0;} /* 9em|108px */
.spacer9-5 {padding: 4.75em 0;}
.spacer10 {padding: 5em 0;} /* 10em|120px */
	.spacerThemeA {padding-bottom: 0;}
	.spacerThemeB {padding-top: 0;}

/* !fix migration */
.hSeparator.spacer2 { margin-bottom: 1em !important; padding: 0;}
.hSeparator.spacer3 { margin-bottom: 1.5em !important; padding: 0; }
.hSeparator.spacer4 { margin-bottom: 2em !important; padding: 0; }
.hSeparator.spacer1-5 {margin-bottom: 0.75em !important; padding: 0;}
.hSeparator.spacer2 {margin-bottom: 1em !important; padding: 0;}
.hSeparator.spacer2-5 {margin-bottom: 1.25em !important; padding: 0;}
.hSeparator.spacer3 {margin-bottom: 1.5em !important; padding: 0;}
.hSeparator.spacer3-5 {margin-bottom: 1.75em !important; padding: 0;}
.hSeparator.spacer4 {margin-bottom: 2em !important; padding: 0;}
.hSeparator.spacer4-5 {margin-bottom: 2.25em !important; padding: 0;}
.hSeparator.spacer5 {margin-bottom: 2.5em !important; padding: 0;}
.hSeparator.spacer5-5 {margin-bottom: 2.75em !important; padding: 0;}
.hSeparator.spacer6 {margin-bottom: 3em !important; padding: 0;}
.hSeparator.spacer6-5 {margin-bottom: 3.25em !important; padding: 0;}
.hSeparator.spacer7 {margin-bottom: 3.5em !important; padding: 0;}
.hSeparator.spacer7-5 {margin-bottom: 3.75em !important; padding: 0;}
.hSeparator.spacer8 {margin-bottom: 4em !important; padding: 0;}
.hSeparator.spacer8-5 {margin-bottom: 4.25em !important; padding: 0;}
.hSeparator.spacer9 {margin-bottom: 4.5em !important; padding: 0;}
.hSeparator.spacer9-5 {margin-bottom: 4.75em !important; padding: 0;}
.hSeparator.spacer10 {margin-bottom: 5em !important; padding: 0;}

	
/* =pushUp 
.pushUp1 {margin-top:-10px;}
.pushUp2 {margin-top:-20px;}
.pushUp3 {margin-top:-30px;}
.pushUp4 {margin-top:-40px;}
.pushUp5 {margin-top:-50px;}*/

/* =toStickyBottom : sticks an element to the bottom to its closest parent with a "position: relative" */
.toStickyBottom { 
 	position: absolute;
 	bottom: 0; 
 }

/* Vertical alignment */
.toVerticalAlignTop,
.toVerticalAlignTop td,
.toVerticalAlignTop th {vertical-align: top !important;}
.toVerticalAlignMiddle,
.toVerticalAlignMiddle td,
.toVerticalAlignMiddle th {vertical-align: middle !important;}
.toVerticalAlignBottom,
.toVerticalAlignMiddle td,
.toVerticalAlignMiddle th {vertical-align: bottom !important;}

/* toGridFit : forces images to stick to its parent element; also takes dividers into consideration (#! ONLY USED IN GRID - need to evaluate if it's possible to make it a generic utility class) */
.gridGroup .toGridFit {
	position: relative; 
	left: -5px;
}
	/* per-context grid - add other grid specs when needed -> seems to work under IE? #! need to re-check */
	.grid2:first-child .toGridFit,
	.grid3:first-child .toGridFit,
	.grid4:first-child .toGridFit,
	.grid5:first-child .toGridFit,
	.grid6:first-child .toGridFit,
	.grid7:first-child .toGridFit,
	.grid8:first-child .toGridFit,
	.grid9:first-child .toGridFit {left: 0;}

/* Overflow */
.toOverflowHidden {overflow: hidden;}
.toOverflowVisible {overflow: visible;}
.toOverflowAuto {overflow: auto;}
.toForceOverflowHidden {overflow: hidden !important;}
.toForceOverflowVisible {overflow: visible !important;}

/* Positionning */
.toPositionAbsolute {position: absolute !important; width: 100% !important;}
.toPositionRelative {position: relative !important;}

/* Display */ 
.toDisplayInline {display: inline !important;}  
.toDisplayBlock {display: block !important;}  
.toDisplayInlineBlock {display: inline-block !important;}  

/* Floating : requires a clearer after the floated elements at all times */
.toFloatLeft, ul.toFloatLeft > li {float: left !important;}
.toFloatRight {float: right !important;}
.toFloatNone, ul.toFloatLeft {float: none !important;}

/* =toFullWidth : forces any element to a 100% width, target element needs to be "block" */
.toFullWidth {width: 100% !important;}

/* =noBorder - removes borders from an element */
.noBorder, tr.noBorder td, tr.noBorder th {border: 0 none !important;}
.noBorderTop, tr.noBorderTop td, tr.noBorderTop th {border-top: 0 none !important;}
.noBorderRight, tr.noBorderRight td, tr.noBorderRight th {border-right: 0 none !important;}
.noBorderBottom, tr.noBorderBottom td, tr.noBorderBottom th {border-bottom: 0 none !important;}
.noBorderLeft, tr.noBorderLeft td, tr.noBorderLeft th {border-left: 0 none !important;}

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

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

/* =noTextDecoration - removes any text decoration on a element (also removes on hover)*/
.noTextDecoration, 
.noTextDecoration:hover {text-decoration: none !important;}

/* Content/Text Handling */
/* =toTextLeft, =toTextCenter, =toTextRight, =toTextJustify */
.toTextLeft, 
.toTextLeft td, 
.toTextLeft th {text-align: left !important;}
.toTextCenter, 
.toTextCenter td, 
.toTextCenter th {text-align: center !important;}
	.toTextCenter img {margin: 0 auto;}
.toTextRight, 
.toTextRight td, 
.toTextRight th {text-align: right !important;}
.toTextJustify, 
.toTextJustify td, 
.toTextJustify th {text-align: justify !important;}

/* =toStrikeThrough */
.toStrikeThrough, .toStrikeThrough sup, .toStrikeThrough sub { text-decoration: line-through;}

/* =toTextUpperCase, =toTextLowerCase, =toTextCapitalize */
.toTextUpperCase {text-transform: uppercase !important;}
.toTextLowerCase {text-transform: lowercase !important;}
.toTextCapitalize {text-transform: capitalize !important;}

/* =toTextBold, =toTextNormal, =toTextItalic, =toTextLineThrough */
.toTextBold {font-weight: bold !important;}
.toTextNormal {font-weight: normal !important;}
.toTextItalic {font-style: italic !important;}
.toTextLineThrough {text-decoration:line-through !important;}

/* Cursor handling : =toCursorDefault, =toCursorPointer */
.toCursorDefault {cursor: default !important;}
.toCursorPointer {cursor: pointer !important;}

/* =toEllipsis : trims text width with "..." (width should be specific to the context) */
.toEllipsis {
	text-overflow: ellipsis;
	display: block;
	overflow: hidden;
	white-space: nowrap;
}

/* =dim : sets opacity of an element */
.dim, .dim1 {opacity: 0.2;}
.dim2 {opacity: 0.4;}
.dim3 {opacity: 0.6;}
.dim4 {opacity: 0.8;}

/* =desaturate : converts an element to grayscale */
.desaturate,
li.disabled img,
.listViewThemeE .disabled {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%); -o-filter: grayscale(100%);
	filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* FF3.5+ */
	filter: gray;
	-webkit-filter: grayscale(1);
}

/* =toZIndexTop : forces an element to be "in-front" */
.toZIndexTop {
	z-index: 999999;	
}

.toResponsiveImage {width: 100%; height: auto;}

.toHeightAuto { height: auto; }

.toHidden { visibility: hidden; }
.toVisible { visibility: visible; }
.toInvisible, .toGhost { 
	position: relative !important; 
	z-index: -1 !important;
	left: 0 !important;
	top: 0 !important;	
}

/* =show, =hide */
.hide, .toHide {display: none;}
.show, .toShow {display: block;}
.toForceHide {display: none !important;}
.toForceShow {display: block !important;}

@media print {
	.mute { color: #e5e5e5 !important; }
	
	/* ToPrint */
	.toPrint {display: inline-block !important;}

	/* toPrintPageBreak */
	.toPrintPageBreak {page-break-before: always;}
	
	/* toPrintForceHide */
	.toPrintForceHide {display: none !important;}
}