/*--------------------------------------------------------------
* Copyright (c) 2008 TELUS Communications Inc.,
*
* All Rights Reserved.
* This document contains proprietary information that shall be
* distributed or routed only within TELUS, and its authorized
* clients, except with written permission of TELUS.
*
* Description: main style guide
*--------------------------------------------------------------*/

* html th, * html td, * html div { font-size: small !important; font-size /**/:x-small; } /* For IE 5 PC */

/* Layout */
body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: small !important; font-size /**/:x-small; background: #fff url(null) fixed no-repeat;}

/* Content Area Styles */
h1.section { font-size: 200%; padding: 0px 0px 10px 0px; margin: 0px 0px 0px 0px !important; letter-spacing: -1px;}
#content { width: 755px; margin: 0 0 0 17px;}
.column1 { float: left; padding: 0 12px 0 0; margin: 0 0 10px 0; width: 555px !important; width /**/:567px; clear: both; /*border: 1px solid #000000;*/ }
.column2 {width: 183px;  margin: 0 0 0 567px; padding-top: 1px !important; background:#fff url(null) fixed no-repeat;}
.oneColumn .column1 {float: none; width: 752px !important; padding: 0;}
.oneColumn .column2 {display: none !important;}
.twoColumn .contentBox {background:#fff url(../images/formBoxBgTopShort.gif) no-repeat top left !important;}
.contentBox { color: #333; background-color: #fff; padding: 0px; margin: 5px 0; padding: 5px 0 15px; background:#fff url(../images/formBoxBgTop.gif) no-repeat top left; border-bottom: 1px solid #6c0; clear: both; position: relative; /* IE display bug fix for disappearing text. */ }
.contentBoxInner { padding: 15px 15px 15px 15px; }

/* Content Area Misc */
hr.separate {clear: both; height: 1px; border: 0; border-bottom: 1px solid #C1E296; color:#C1E296; margin: 0 0 10px 0; padding: 0px 0 3px 0; display: block;}
hr.separateSub {clear: both; height: 1px; border: 0; border-bottom: 1px solid #bebebe; color:#bebebe; margin: 15px 0 20px 0; padding: 0px 0 3px 0; display: block;}
.mice { font-size: 86%; color: #777; }
.fldNote { clear:both; font-size:11px !important; margin:0 0 0.7em 165px; color: #777; }
.clear {display:block;clear:both;}
br.clear {line-height: 1px !important;height: 1px !important;}
p { margin-bottom: 10px;}
.preLoopQual { background: #e6e6e6; padding: 10px; margin-bottom: 20px; }
.preLoopQual strong { padding-left: 20px;}
ul {list-style: none; margin:0; padding: 0px 10px 5px;}
ul li {background: url(../images/bullet.gif) no-repeat 0 6px; padding: 0 0 2px 10px;}
ol { list-style: decimal; margin: 0 0 0 19px; padding: 0 0 0 3px;}
ol li {padding: 0 0 3px 0;}

.accOptions { float: left; width: 290px; position: relative;}
.accNote {float: right;  border: #49166d 1px solid; padding: 7px; background: #f2f2f2; font-size: 11px !important; width: 200px; position: relative;}
.hilite { color: #6c0;}
.hilite2 { color: #49166d;}

/* Plan select */
.planSelect { float: left; width: 168px; margin: 20px 5px 25px 0; position: relative; text-align: center;}
.planSelect.last { margin-right: 0 !important;}
#yearly, #easyPC, #monthly { display: block; width: 168px; height: 168px;}

#yearly { background: transparent url(../images/planBg1.gif) 0 0 no-repeat;}
#easyPC { background: transparent url(../images/planBg2.gif) 0 0 no-repeat; }
#monthly { background: transparent url(../images/planBg3.gif) 0 0 no-repeat; }
#yearly.selected { background-position: 0 -168px; }
#easyPC.selected { background-position: 0 -168px; }
#monthly.selected { background-position: 0 -168px; }
.fade { opacity:.25; filter: alpha(opacity=25);}
a:hover#yearly, a:hover#easyPC, a:hover#monthly { background-position: 0 -168px; opacity:100; filter: alpha(opacity=100);}


/* Top Header Styles */
#header {width: 752px; margin-left: 17px; }
#header #logo {float: left; width: 245px;}
#header a:link, #header a:visited {text-decoration: none;}
#header a:hover {text-decoration: underline;}

/* Form Styles */
input, select { font-size: 12px;}
.indentForm { margin-left: 25px;}
fieldset { margin: 0 0 15px 0;}
legend { font-size: 12px; padding-bottom: 1em; font-weight: bold;}
.reg label { float: left; clear: left; width: 140px; margin-left: 25px; padding-bottom: 2px; padding-top: 3px; font-size: 12px; }
.reg input, .reg select { float: left; margin-bottom: 0.5em; margin-right: 10px;}
.radType label {  float: left; clear: left; margin-left: 25px; padding-bottom: 2px; }
.radType .hilite {}
.yesNo label { padding-right: 15px;}
#buttons { margin: 20px 0 0 0; font-size: 12px; color: #bebebe;}
#buttons .sep { font-size: 16px; padding: 0 10px;}
.button { width: 100px; height: 21px; border: 0; padding-bottom: 2px; font-size: 12px; background: url(../images/buttons/butLarge.gif) top left no-repeat; text-align: center; color: #fff  !important; font-weight: normal; background-color: inherit; cursor:pointer;}
input.button.disabledBtn { background: url(../images/buttons/butMedDisabled.gif) top left no-repeat;}
table.reviewOrder th, table.reviewOrder td { padding: 4px; }
table.reviewOrder th { text-align: left; width: 200px;}
.reviewOrder ul {padding: 0px 0px 10px 0 !important;}
.radTypeSm { float: left; margin-bottom: 5px;}
.radTypeSm label {  float: left; clear: left; padding-bottom: 0; padding-top: 0; margin-left: 0; }

/* Icons */
.printPage {background: url(../images/buttons/printIcon.gif) no-repeat; padding: 0px 15px 2px 22px;}
.arrowForward {background/**/: url(../images/buttons/forwardIcon.gif) no-repeat; padding: 0 0 2px 22px;}

/* JS */
#sampleBill { display: none; position: absolute; width: 680px; cursor: pointer; background: #fff; text-align: right; padding: 5px 0 0 0; margin: 0 !important;}
#sampleBill img { margin: 5px 0; }
#sampleBill span { padding:5px 10px 0 0; text-decoration:underline; color:#49166d;}
.close { float: right; padding-right: 18px !important; padding-bottom: 4px !important; margin-right: 10px; background: transparent url(../images/icon_close.gif) no-repeat 100% 50%;}
.blockUI {cursor:default !important;}
.fill { background: transparent;}

/* Navigation */
#steps {padding: 0; margin-bottom: 10px;}
#steps ol {list-style: none; margin: 0; padding: 0;}
#steps li { display: block; float: left; margin: 8px 13px 8px 0; color: #666; background-color: #fff; font-size: 90% !important; padding: 2px 0 5px 23px;}
#steps li.last {margin-right: 0;}
#steps li.step1 {background: url(../images/buttons/1.gif) no-repeat 0 0;}
#steps li.step2 {background: url(../images/buttons/2.gif) no-repeat 0 0;}
#steps li.step3 {background: url(../images/buttons/3.gif) no-repeat 0 0;}
#steps li.step4 {background: url(../images/buttons/4.gif) no-repeat 0 0;}
#steps li.step5 {background: url(../images/buttons/5.gif) no-repeat 0 0;}
#steps li.step6 {background: url(../images/buttons/6.gif) no-repeat 0 0;}
#steps li.step7 {background: url(../images/buttons/7.gif) no-repeat 0 0;}
#steps li.step8 {background: url(../images/buttons/8.gif) no-repeat 0 0;}
#steps li.step9 {background: url(../images/buttons/9.gif) no-repeat 0 0;}
.step1 #steps li.step1 {background: url(../images/buttons/1On.gif) no-repeat 0 0; padding: 2px 0 5px 23px; color: #333; font-weight: bold;}
.step2 #steps li.step2 {background: url(../images/buttons/2On.gif) no-repeat 0 0; padding: 2px 0 5px 23px; color: #333; font-weight: bold;}
.step3 #steps li.step3 {background: url(../images/buttons/3On.gif) no-repeat 0 0; padding: 2px 0 5px 23px; color: #333; font-weight: bold;}
.step4 #steps li.step4 {background: url(../images/buttons/4On.gif) no-repeat 0 0; padding: 2px 0 5px 23px; color: #333; font-weight: bold;}
.step5 #steps li.step5 {background: url(../images/buttons/5On.gif) no-repeat 0 0; padding: 2px 0 5px 23px; color: #333; font-weight: bold;}
.step6 #steps li.step6 {background: url(../images/buttons/6On.gif) no-repeat 0 0; padding: 2px 0 5px 23px; color: #333; font-weight: bold;}
.step7 #steps li.step7 {background: url(../images/buttons/7On.gif) no-repeat 0 0; padding: 2px 0 5px 23px; color: #333; font-weight: bold;}
.step8 #steps li.step8 {background: url(../images/buttons/8On.gif) no-repeat 0 0; padding: 2px 0 5px 23px; color: #333; font-weight: bold;}
.step8 #steps li.step9 {background: url(../images/buttons/9On.gif) no-repeat 0 0; padding: 2px 0 5px 23px; color: #333; font-weight: bold;}


/* These are standard sIFR styles... do not modify */
.sIFR-flash {visibility: visible !important;	margin: 0;}
.sIFR-replaced {visibility: visible !important;}
span.sIFR-alternate {position: absolute;	left: 0;	top: 0;	width: 0;	height: 0;	display: block;	overflow: hidden;	letter-spacing: 0;}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */
.sIFR-hasFlash h1.default {visibility: hidden;}
.sIFR-hasFlash h2.default {visibility: hidden;}
.sIFR-hasFlash h3.default {visibility: hidden;}
.sIFR-hasFlash h2.hidden1 {visibility: hidden;}
.sIFR-hasFlash h2.hidden2 {visibility: hidden;}
.sIFR-hasFlash h2.hidden3 {visibility: hidden;}