/*Latest update: 2015.Sep.24/

/* DCX-Framework - All browsers generic styles
Do not modify/use this file to host styles for custom components
Contact Bell IT DCX - UI Solution Architect for support and updates*/

/*BellSlim font*/
@font-face {font-family:'bellslimregular';
src:url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/bellslim_regular-webfont.eot?ver=00000000');
src:url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/bellslim_regular-webfont.eot??ver=00000000') format('embedded-opentype'), url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/bellslim_regular-webfont.ttf?ver=00000000') format('truetype'), url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/bellslim_regular-webfont.svg?ver=00000000') format('svg');
font-weight:normal;
font-style:normal}
@font-face {font-family: 'bellslim_mediumregular';
src:url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/bellslim_medium-webfont.eot?ver=00000000');
src:url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/bellslim_medium-webfont.eot??ver=00000000') format('embedded-opentype'), url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/bellslim_medium-webfont.ttf?ver=00000000') format('truetype'), url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/bellslim_medium-webfont.svg?ver=00000000') format('svg');
font-weight:normal;
font-style:normal}
@font-face {font-family:'bellslim_semiboldregular';
src:url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/bellslim_semibold-webfont.eot?ver=00000000');
src:url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/bellslim_semibold-webfont.eot??ver=00000000') format('embedded-opentype'), url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/bellslim_semibold-webfont.ttf?ver=00000000') format('truetype'), url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/bellslim_semibold-webfont.svg?ver=00000000') format('svg');
font-weight:normal;
font-style:normal}
.bellSlim {font-family:"bellslim_mediumregular", Helvetica, Arial, sans-serif}
.bellSlimRegular {font-family:"bellslimregular", Helvetica, Arial, sans-serif}
.bellSlimSemibold {font-family:"bellslim_semiboldregular", Helvetica, Arial, sans-serif}

/*VirginUltra font*/
@font-face {
font-family:'VMUltramagneticNormalRegular';
src:url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/vmultramagnetic-normal-webfont.eot?ver=00000000');
src:url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/vmultramagnetic-normal-webfont.eot??ver=00000000') format('embedded-opentype'),
url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/vmultramagnetic-normal-webfont.ttf?ver=00000000') format('truetype')}
@font-face {
font-family:'BigUltramagneticBold';
src:url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/vmultramagnetic-bold-webfont.eot?ver=00000000');
src:url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/vmultramagnetic-bold-webfont.eot??ver=00000000') format('embedded-opentype'),
url('https://mybell-qc.akamaized.net/Styles/RSX/framework/css/fonts/vmultramagnetic-bold-webfont.ttf?ver=00000000') format('truetype')}
.virginUltra {
font-family:"BigUltramagneticBold", Helvetica, Arial, sans-serif;
font-weight:normal}
.virginUltraReg {
font-family:"VMUltramagneticNormalRegular", Helvetica, Arial, sans-serif;
font-weight:normal}

/*visibility styles*/
.hide{
display:none}
.hidden{
visibility:hidden}
.block{
display:block}
.opacity50{
opacity: .5;
filter:alpha(opacity=50);}

/*text colors*/
.txtBlack{
color:#000}
.txtBlackLight{
color:#212121}
.txtBlackLight2{
color:#333}
.txtBlackLight3{
color:#939598}
.txtGreen{color:#090}
.txtBlue, .txtBlue a, .txtBlue a:active, .txtBlue a:visited, .txtBlue a:hover {
color:#0066a4}
.txtBlue2, .txtBlue2 a, .txtBlue2 a:active, .txtBlue2 a:visited, .txtBlue2 a:hover {
color:#2390b8}
.txtBlue3{
color: #2090b8}
.txtRed, .txtRed a, .txtRed a:active, .txtRed a:visited, .txtRed a:hover {
color:#bf1a18}
.txtRedV, .txtRedV a, .txtRedV a:active, .txtRedV a:visited, .txtRedV a:hover {
color:#FF0000}
.txtGrayDark{
color:#555}
.txtGrayDark2{
color:#626262}
.txtGrayDark3{
color:#787878}
.txtGrayLight{
color:#e1e1e1}
.txtGrayLight2{
color:#999}
.txtGrayLight3{
color:#7A7A7A}
.txtGrayLight4{
color:#777}
.txtGrayLight5{
color:#878787}
.txtGrayLight6{
color:#a9a9a9}
a.txtGrayLight6:hover{
color:#fff}
.txtGrayLight7{
color: #666666}
.txtGrayLight8{
color: #c1c1c1}
.txtWhite{
color:#fff}

/* alignment*/
.txtRight{
text-align:right}
.txtLeft{
text-align:left}
.txtCenter{
text-align:center}
.txtNoWrap{
white-space:nowrap}

/*txt formatting*/
.noTxt{/*used on tags that are not supporting text. as example a "spacer1-10","button corner" or "icon" is not supporing txt*/
font-size:0;
line-height:0}
.txtSize9{
font-size:9px}
.txtSize10{
font-size:10px}
.txtSize11{
font-size:11px}
.txtSize12{
font-size:12px}
.txtSize13{
font-size:13px}
.txtSize14{
font-size:14px}
.txtSize15{
font-size:15px}
.txtSize16{
font-size:16px}
.txtSize17{
font-size:17px}
.txtSize18{
font-size:18px}
.txtSize19{
font-size:19px}
.txtSize20 {
font-size: 20px;}
.txtSize21{
font-size:21px}
.txtSize22{
font-size:22px}
.txtSize24 {
font-size: 24px;}
.txtSize25{
font-size:25px}
.txtSize26{
font-size:26px}
.txtSize30{
font-size:30px}
.txtSize31{
font-size:31px}
.txtSize32{
font-size:32px}
.txtSize34{
font-size:34px}
.txtSize36{
font-size:36px}
.txtSize48{
font-size:48px}

.txtSpacingNarrow{
letter-spacing:-1px}
.txtNoUnderline, a.txtNoUnderline:hover,.txtHoverUnderline, .txtHoverUnderline a, .txtHoverUnderline a:active, .txtHoverUnderline a:visited, .txtHoverUnderline a:link{
text-decoration:none}
a.txtHoverUnderline:hover,a:hover .txtHoverUnderline, .txtHoverUnderline a:hover{
text-decoration:underline}
.txtShadow{
text-shadow:0 1px 1px #333}
.txtBold{
font-weight:bold}
.txtNormal{
font-weight:normal}
.txtItalic{
font-style:italic}
.txtCapital{
text-transform:uppercase}

/*backgrounds*/
.bgWhite{
background-color:#fff}
.bgBlack{
background-color:black}
.bgBlackLight{
background-color:#212121}
.bgBlackLight2{
background-color:#1a1a1e}
.bgGray{
background-color:#ccc}
.bgGray2{
background-color:#d6d6d6}
.bgGray3{
background-color:#d7d7d7}
.bgGray4{
background-color:#eee}
.bgGray5{
background-color:#f2f2f2}
.bgGray6{
background-color:#aaa}
.bgGray7{
background-color:#525252}
.bgGray8 {
background-color: #797979;}
.bgGray9 {
background-color: #e2e2e2;}
.bgGray10 {
background-color: #c4cad3;}
.bgGray11 {
background-color: #a1a1a1;}
.bgGray12 {
background-color: #e4e4e4;}
.bgGray13 {
background-color: #393e46;}
.bgGray14 {
background-color: #cfd4db;}
.bgGray15 {
background-color: #e0e0e0;}
.bgGray16 {
background-color: #3a3f47;}
.bgGray17 {
background-color: #737373;}
.bgGray18 {
background-color: #e0e0e0;}
.bgGray19 {
background-color: #f5f5f5;}
.bgGrayLight{
background-color:#eee}
.bgGrayLight2{
background-color:#fafafa}
.bgGrayLight3{
background-color:#d7d7d7}
.bgGrayLight4{
background-color:#d1d1d1}
.bgGrayMedium{
background-color:#999}
.bgGrayMedium2{
background-color:#404040}
.bgGrayDark{
background-color:#666}
.bgGreen{
background-color:#a1e67c}
.bgGreen1 {
background-color: #91bd79}
.bgGreen2{
background-color: #acf386}
.bgGreen3{
background-color: #ccfeb0}
.bgGreen4{
background-color: #ebffe0}
.bgBlue1{
background-color: #4589b5}
.bgBlue2{
background-color: #0065A7}
.bgBlue3{
background-color: #5888CA}
.bgBlue4{
background-color: #3A97B6}
.bgBlue5{
background-color: #80BCDC}
.bgBlue6{
background-color: #BADCE6}
.bgBlue7{
background-color: #E3F1F4}
.bgBlue8{
background-color:#06598B}
.bgBlue9{
background-color:#0066A4}
.bgBlue10{
background-color:#4D7AB1}
.bgBlue11{
background-color:#8AA0C9}
.bgBlue12{
background-color:#B6C6DF}
.bgBlue13{
background-color:#A4B3C6}
.bgBlue14{
background-color:#7A7F92}
.bgBlue15{
background-color:#525D73}
.bgBlue16{
background-color:#2B3F58}
.bgBlue17{
background-color:#032D46}
.bgBlueLight{
background-color:#DAE8F1}
.bgBlue{
background-color:#1478bc}
.bgBlueDark{
background-color:#0066A4}
.bgRed{
background-color:#c40000}
.bgRed2{
background-color:#900}

/*positioning*/
.floatR{
float:right}
.floatL{
float:left}
.clear{
clear:both}
.noMargin{
margin:0}
.noPadding{
padding:0}
.middleAlign{
margin:auto}
.fixed {
position:fixed}
.absolute {
position:absolute}
.relative {
position:relative}

/*mouse cursor*/
.pointer{
cursor:pointer}
.noPointer{
cursor:default}

/*spacers*/
.spacer0{
height:0}
.spacer1{
height:1px}
.spacer2{
height:2px}
.spacer3{
height:3px}
.spacer4{
height:4px}
.spacer5{
height:5px}
.spacer6{
height:6px}
.spacer7{
height:7px}
.spacer8{
height:8px}
.spacer9{
height:9px}
.spacer10{
height:10px}
.spacer11{
height:11px}
.spacer12{
height:12px}
.spacer13{
height:13px}
.spacer14{
height:14px}
.spacer15{
height:15px}
.spacer16{
height:16px}
.spacer17{
height:17px}
.spacer18{
height:18px}
.spacer19{
height:19px}
.spacer20{
height:20px}
.spacer21{
height:21px}
.spacer22{
height:22px}
.spacer23{
height:23px}
.spacer24{
height:24px}
.spacer25{
height:25px}
.spacer26{
height:26px}
.spacer27{
height:27px}
.spacer28{
height:28px}
.spacer29{
height:29px}
.spacer30{
height:30px}

.vSpacer1{
width:1px}
.vSpacer2{
width:2px}
.vSpacer3{
width:3px}
.vSpacer4{
width:4px}
.vSpacer5{
width:5px}
.vSpacer10{
width:10px}
.vSpacer12{
width:12px}
.vSpacer14{
width:14px}
.vSpacer15{
width:15px}
.vSpacer16{
width:16px}
.vSpacer18{
width:18px}
.vSpacer20{
width:20px}
.vSpacer22{
width:22px}
.vSpacer23{
width:23px}
.vSpacer24{
width:24px}
.vSpacer25{
width:25px}
.vSpacer28{
width:28px}
.vSpacer30{
width:30px}
.vSpacer35{
width:35px}
.vSpacer38{
width:38px}
.vSpacer45{
width:45px}
.vSpacer48{
width:48px}

/*vertical paddings*/ /*Note:we do not use top and bottom padding because is not consitent results in every browser. use spacers as an alternative for padding top/bottom*/
.vPadding2{
padding:0 2px}
.vPadding3{
padding:0 3px}
.vPadding5{
padding:0 5px}
.vPadding6{
padding:0 6px}
.vPadding10{
padding:0 10px}
.vPadding14{
padding:0 14px}
.vPadding15{
padding:0 15px}
.vPadding19{
padding:0 19px}
.vPadding20{
padding:0 20px}
.vPadding22{
padding:0 22px}

/*columns
-use "0" in front of odd percentage like "col030 = 30%" tha cannot define a common table columns devider. used for use cases where mixing with siblings that have various columns width 
-use without "0" for where its a clear table/columns use as example "col2 = 50% = 2 columns. used where all siblings have the same col width"*/
.col1{
width:100%}
.col075{
width:75%}

/*icons*/
.icon{
background-image:url("https://mybell-qc.akamaized.net/Styles/RSX/framework/css/sprites/icons.png?ver=00000000")}
.error{
width:38px;
height:38px;
background-position:0 0}
.close{
width:20px;
height:20px;
background-position:0 -40px}
.linkArrow{
width:17px;
height:17px;
background-position:0 -70px}

/*Misc*/
#deprecatedBrowserJs{
    z-index:51;/*required for RSX fix*/
}

/* page width */
.pageWidth {
        width: 1200px;
    }
.customerSurvey .pageWidth {
        width: 600px;
    }
@media (max-width: 519px) {
    .pageWidth {
        width: 90%;
    }
}
@media (min-width: 520px) {
    .pageWidth {
        width: 480px;
    }
}
@media (min-width: 640px) {
    .pageWidth {
        width: 600px;
    }
}
@media (min-width: 1000px) {
    .pageWidth {
        width: 960px;
    }
}
@media (min-width: 1240px) {
    .pageWidth {
        width: 1200px;
    }
}