﻿/*--------------------------------------------------------------
* Copyright (c) 2009 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.
*
*--------------------------------------------------------------  

------------- Table of Contents -------------
- Reset : Resets default styles (margins, padding, etc..)
- Self-clear floats
- Body 
- Header
- Page content
- Layout
- linksZones area
- Boxes
- Footer
 ------------- Reset -------------  */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,address,th,td {
margin:0;
padding:0;
}

h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}

q:before,q:after {
content:'';
}

img {
border:0;
}

.clear {
clear: both;
}

/* ------------- Self-clear floats ------------- */
.clearfix:after, #header:after, .pageContent:after, ul.wrapLinks:after, .linksZonesMain:after, .linksZonesBoxInner:after, .linksZonesSecondary:after, .headlineBoxInner:after, .footer:after {
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

.clearfix, #header, .pageContent, ul.wrapLinks, .linksZonesMain, .linksZonesBoxInner, .linksZonesSecondary, .headlineBoxInner, .footer {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix, * html #header, * html .pageContent, * html ul.wrapLinks, * html .linksZonesMain, * html .linksZonesBoxInner, * html .linksZonesSecondary, * html .headlineBoxInner, * html .footer {height: 1%;}
.clearfix, #header, .pageContent, ul.wrapLinks, .linksZonesMain, .linksZonesBoxInner, .linksZonesSecondary, .headlineBoxInner, .footer {display: block;}
/* End hide from IE-mac */  

/* ------------- Body  -------------  */

html {
min-height:100%;
margin-bottom:1px;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:small !important;
color:#666;
background-color:#fff;
text-align: center;
}

/* ------------- Page  -------------  */

#siteContainer {
padding-top:10px;
}
a:link,a:active,a:visited {
color:#666;
background-color:transparent;
text-decoration:none;
}
a:hover {
color:#6c0;
background-color:transparent;
text-decoration:underline;
}
#siteContainer {
width:999px;
position:relative;
margin:0 auto;
text-align: left;
}


/* ------------- Headline -------------  */

.headline {
   display: block;
   height: 35px;
   width: 981px;
   background:url(../images/headline-bg.gif) left top no-repeat;
   margin-left: 10px;
}
.headline p {
   text-align: left;
   padding: 8px 0 0 15px;
}
.headline p a {

   background:url(../images/arrow.gif) 0 4px no-repeat;
   padding-left:10px;
   margin-left: 19px;
}


/* ------------- Header -------------  */

.js #banner {
  border-bottom: 1px solid #e6e6e6;
  background-color:#f9f9f9;
  position: relative;
}
.js #banner-inner {
  overflow: hidden;
  height: 308px;
  position: relative;
}
.js #banner a {
  display: none;
}
.js #banner a{
  display: block;
}
.js #indicator {
  position:absolute;
  top: 276px;
  left:16px;
  display: block;
  width: 180px;
  height: 33px;
  z-index: 100;
}
#header {
text-align: right;
}
#header .links {
position: relative;
top: 23px;
}
#header span {
padding: 0 5px;
}
#header .logo {
float:left;
margin-top:20px;
}

/* ------------- Page content -------------  */

.pageContent {
font-size:12px;
width:981px;
margin-left:10px;
margin-right:8px;
margin-top: 26px;
}
p {
margin-bottom:6px;
}
.pageContent ul li {
list-style-type:none;
margin-bottom:5px;
}
.pageContent ul li {
background:url(../images/arrow.gif) 0 2px no-repeat;
padding-left:10px;
}

/* ------------- Content -------------  */

h2 {
height: 30px;
width: 174px;
display: block;
text-indent: -9999px;
}
h3 {
height: 30px;
width: 174px;
display: block;
text-indent: -9999px;
margin: 10px 0 0 20px;
}
.business-shortcuts h3 {
margin-left: 100px;
}
h2 a, h3 a {
height: 30px;
width: 174px;
display: block;
}
h4 {
height: 30px;
margin: 10px 0 0 103px;
font-weight: bold;
color: #49166d; 
font-size: 13px;
}
#combos h5 {
display: block;
height: 11px;
width: 153px;
text-indent: -9999px;
background:url(../images/decouvrezCombos.gif) left top no-repeat;
margin: 10px 0 5px 0;
}
p {
text-align:right;
margin-top:5px;
}
.customer-action-links  {
margin-top: 27px;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
padding: 8px 0 9px 0;
height: 40px;
}
.customer-action-links a {
background:url(../images/arrow-right.jpg) left top no-repeat;
padding: 0 0 8px 25px;
display: block;
height: 17px;
color: #49166d;
}
.customer-action-links a:link , .customer-action-links a:visited , .customer-action-links a:active {
color: #49166d;
}
.customer-action-links a:hover {
color: #6c0;
}


.products ul {
height: 85px;
margin:0;
}
.products ul.combos {
height: 25px;
}
.products div {
float:left;
margin:3px 0 5px;
padding:10px 0 0 20px;
position:relative;
}
#combos #frm_tel {
	width: 130px;
	position: relative;
	background-image: url(../images/bg_formTel.png);
	background-repeat: no-repeat;
}
#combos #frm_tel #tel_number {
	background: transparent;
	border: 0;
	color: #6c0;
	font-family: arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 8px;
	height: 100%;
	width: 54px;
	margin: 0 0 13px;
	padding-left: 43px;
	overflow: hidden;
}
#combos .b_submit {
	background: #fff url(../images/arrow-right.jpg) no-repeat 50px 5px;
	border: 0;
	cursor: pointer;
	display: block;
	height: 21px;
	width: 70px;
	font-size: 13px;
	color: #49166D; 
	padding-right: 30px;
	margin-bottom: -16px;
}

.products #combos {
width:175px;
border-left:1px solid #dedede;
}
.products #telephonie {
width:175px;
border-left:1px solid #dedede;
}
.products #internet {
width:175px;
border-left:1px solid #dedede;
}
.products #telusTV {
width:175px;
border-left:1px solid #dedede;
}
.products #mobilite {
width:174px;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
}
#combos h2 {
background:url(../images/combos-titre.gif) top left no-repeat;
}
#telephonie h2 {
background:url(../images/telephonie-titre.gif) top left no-repeat;
}
#internet h2 {
background:url(../images/internet-titre.gif) top left no-repeat;
}
#telusTV h2 {
background:url(../images/telusTV-titre.gif) top left no-repeat;
}
#mobilite h2 {
background:url(../images/mobilite-titre.gif) top left no-repeat;
}




.shortcuts-top {
height: 4px;
width:981px;
background:url(../images/shortcutsTop.gif) top left no-repeat;
margin-top: 30px;
}
.shortcuts {
width:981px;
position: relative;
height: 143px; /*Ajuster en même temps que .shortcuts ul (même augmentation du height) si plus que 4 éléments de liste*/
}
.shortcuts ul {
height: 101px; /*Ajuster en même temps que .shortcuts (même augmentation du height) si plus que 4 éléments de liste*/
margin-left:20px;
}
.shortcuts-bottom {
height: 4px;
width:981px;
background:url(../images/shortcutsBot.gif) top left no-repeat;
}
#monCompte {
width:244px;
border-left:1px solid #dedede;
float:left;
position:relative;
top: -15px;
background-color: #f8f8f8;
}
#aide {
width:244px;
border-left:1px solid #dedede;
float:left;
position:relative;
top: -15px;
background-color: #f8f8f8;
}
#avantages {
width:243px;
border-left:1px solid #dedede;
float:left;
position:relative;
top: -15px;
background-color: #f8f8f8;
}
#nousJoindre {
width:244px;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
float:left;
position:relative;
top: -15px;
background-color: #f8f8f8;
}
#monCompte h3 {
background:url(../images/monCompte-titre.gif) top left no-repeat;
}
#aide h3 {
background:url(../images/aide-titre.gif) top left no-repeat;
}
#avantages h3 {
background:url(../images/avantages-titre.gif) top left no-repeat;
}
#nousJoindre h3 {
background:url(../images/nousJoindre-titre.gif) top left no-repeat;
}



.business-shortcuts {
width:981px;
background-color: #f8f8f8;
position: relative;
margin-top: 50px;
}
.business-shortcuts p {
text-align: left;
margin: -5px 0 10px 103px;
}
.business-shortcuts ul {
height: 85px;
margin: 0 0 40px 100px;
}
#nousDonnons {
height: 142px;
width:326px;
border-left:1px solid #dedede;
float:left;
position:relative;
top: -15px;
background:url(../images/weGive.jpg) -5px 12px no-repeat;
}
#solutionsAffaires {
height: 142px;
width:325px;
border-left:1px solid #dedede;
float:left;
position:relative;
top: -15px;
background:url(../images/lilypad.jpg) 10px top no-repeat;
}
#aProposTelus {
height: 142px;
width:325px;
border-left:1px solid #dedede;
border-right:1px solid #dedede;
float:left;
position:relative;
top: -15px;
background:url(../images/butterfly.jpg) 10px top no-repeat;
}
#solutionsAffaires h3 {
background:url(../images/solutionsAffaires-titre.gif) left top no-repeat;
}
#aProposTelus h3 {
background:url(../images/aProposTelus-titre.gif) top left no-repeat;
}



.products ul li {
width: 150px;
}
.shortcuts ul li, .business-shortcuts ul li, .business-shortcuts p {
width: 200px;
}

iframe{
padding: 0;
margin: 5px 0 5px 755px;
width:250px;
}
.stock {
color:#49166D;
font-size:10px;
font-weight:bold;
}

/* ------------- Footer -------------  */
.footer {
font-size:11px;
clear:both;
margin-top:20px;
}

.footer li {
display:inline;
font-size:11px;
padding:6px;
}

.footer ul.footerListOne {
background-color:#6c0;
color:#fff;
margin-bottom:10px;
width:989px;
position:relative;
padding:10px 10px 10px 0px;
}

.footerListOne a:link,.footerListOne a:visited {
color:#fff;
text-decoration:none;
}

.footerListOne a:hover {
text-decoration:underline;
}

.footer ul.footerListTwo {
margin-left:5px;
margin-bottom:20px;
width:994px;
position:relative;
color:#333;
}

.footer ul.footerListOne li {
font-size:12px;
padding:12px;
background-image: none;
}
.footer ul.footerListTwo li {
background-image: none;
}

.footerListTwo a:link,.footerListTwo a:visited {
color:#b2b2b2;
text-decoration:none;
}

.footerListTwo a:hover {
color:#595959;
text-decoration:underline;
}

.footer #findPhoneNumber {
position:absolute;
right:15px;
top:-2px;
}

.footer #findPhoneNumber a {
background:transparent url(../images/magnifyingglass.gif) no-repeat left 0px;
padding:0px 0 4px 30px;
display:block;
}

.footer .copyright {
position:absolute;
right:20px;
top:-5px;
color:#b2b2b2;
}
