/* ##########################################################
   ################### CSS 2.0 StyleSheet ###################
   #### © Copyrights 2006 Service Informatique Sept-Iles ####
   ########################################################## */

/* ##########################################################
   ### Éléments prédéfinis ################################## */

/* ### Mise à 0 de tout les padding et margin par défaut #### */
   *{
      margin: 0;
      padding: 0;
   }

/* ### Définition des éléments de base ### */
   p, div, h1, h2, h3, h4, h5, h6, a, ul, li, span{
      font: 12px Arial, Helvetica, sans-serif;
      list-style: none;
   }

/* ### Liens ################################################ */
   a{
      text-decoration: none;
   }

/* ### Images ############################################### */
   img{
      border: 0;
      position: relative;
   }

/* ### Body ################################################# */
   body{
      background: url(back.gif) repeat-x;
      text-align: center;
   }

/* ########################################################## */

/* ##########################################################
   ### Conteneur ############################################ */

   #container{
      width: 740px;
      height: 100%;
      margin: 0 auto;
      background: url(back_middle.gif) repeat-y;
      text-align: left;
      position: relative;
   }

/* ########################################################## */

/* ########################################################## */

/* ##########################################################
   ### Conteneur ############################################ */

   #noflashbox{
      position: absolute;
      width: 380px;
      height: 150px;
      border: solid 1px #405F98;
      background: #fff;
      z-index: 999;
      top: 165px;
      left: 180px;
      display: none;
   }

   #noflashbox h3{
      padding: 5px;
      font-size: 200%;
      font-weight: bold;
      text-align: center;
      text-decoration: underline;
   }

   #noflashbox p{
      padding: 5px;
      font-size: 130%;
   }

   #noflashbox p.close{
      font-size: 100%;
      top: 200px;
      left; 200px;
      text-align: right;
   }

   #noflashbox p a{
      border-bottom: dashed 1px #742c29;
      color: #742c29;
      font-size: 100%;
   }

   #noflashbox p a:hover{
      border-bottom: solid 1px #742c29;
      text-decoration: none;
   }

/* ########################################################## */

/* ##########################################################
   ### Entete ############################################### */

   #header{
      width: 100%;
      height: 160px;
      background: url(back.gif) repeat-x;
      border-top: none;
      position: relative;
   }

   #header h1{
      height: 100%;
      width: 100%;
      background: url(header.jpg) center right no-repeat;
      position: absolute;
   }

/* ### Logo dans l'entete ################################### */
   #header h1 a{
      display: block;
      position: relative;
      width: 200px;
      height: 120px;
      top: 18px;
      left: 5px;
      background: url(logo.jpg) center center no-repeat;
   }

   #swfheader{
      position: absolute;
      top: 0;
   }

   #header a#flashinstall{
      position: absolute;
      bottom: 0px;
      left: 50px;
      color: #405F98;
   }

   #header a#flashinstall:hover{
      text-decoration: underline;
   }

/* ########################################################## */

/* ##########################################################
   ### Menu principal ####################################### */

   #menu{
      width: 100%;
      height: 29px;
      padding: 10px 0 0 0;
      border-bottom: solid 1px #405F98;
      background: #fff;
      position: relative;
   }

/* ### Place chaque bouton de la list ######################
   ### menu sur 1 même ligne ############################### */
   #menu ul.main li{
      float: left;
   }

/* ### Définition des boutons du menu ####################### */
   #menu ul.main li a{
      display: inline;
      float: left;
      position: relative;
      height: 29px;
      line-height: 29px;
      padding: 0 12px 0 0;
      border-bottom: solid 1px #405F98;
      background: #405F98 url(menu_right.gif) right top no-repeat;
      margin: 0 2px 0 2px;
      color: #fff;
      font-size: 120%;
      font-weight: bold;
   }
/* ### Définition du margin premier bouton pour donner ######
   ### l'espacement a gauche du menu ######################## */
   #menu ul.main li a.first{
      margin: 0 2px 0 10px;
   }

/* ### Partie gauche de chaque bouton du menu (graphique) ### */
   #menu ul.main li a div.l{
      width: 10px;
      height: 29px;
      display: inline;
      background: url(menu_left.gif) center left no-repeat;
      float: left;
   }

/* ### Effet de survole sur les boutons du menu ############# */
   #menu ul.main li a:hover{
      background: #fff url(menu_right.gif) right top no-repeat;
      color: #405F98;
      height: 29px;
      top: 1px;
   }

/* ### Bouton du menu sur la page active #################### */
   #menu ul.main li a.on{
      background: #fff url(menu_right.gif) right top no-repeat;
      color: #405F98;
      border-bottom: none;
      height: 30px;
      top: 1px;
      z-index: 5;
   }

/* ### Annulation du changement par défaut des over de ######
   ### bouton pour celui de la page active ################## */
   #menu ul.main li a.on:hover{
      height: 30px;
   }

/* ### Hack pour IE pour le décalage de 1 pixel des #########
   ### boutons du menu ###################################### */

   body[id=hack] #menu ul.main li a:hover{
      height: 29px;
      top: 0;
   }

   body[id=hack] #menu ul.main li a.on{
      height: 29px;
   }

   body[id=hack] #menu ul.main li a.on:hover{
      top: 1px;
   }

/* ### Fin hack pour IE #####################################
/* ########################################################## */

/* ##########################################################
   ### Définition du menu à droite: plan du site, support ### */

   #menu ul.submenu{
      float: right;
   }

   #menu ul.submenu li{
      float: left;
   }

/* ### Définition des liens du menu ######################### */
   #menu ul.submenu li a{
      display: inline;
      float: left;
      position: relative;
      font-size: 120%;
      margin: 5px;
      color: #742c29;
      border-bottom: dashed 1px #742c29;
   }

/* ### Effet de survole sur les boutons du menu ############# */
   #menu ul.submenu a:hover{
      border-bottom: solid 1px #742c29;
   }

/* ### Bouton du menu sur la page active #################### */
   #menu ul.submenu li a.on{
      font-weight: bold;
      border-bottom: solid 1px #742c29;
   }

/* ########################################################## */

/* ##########################################################
   ### Millieu entre l'entète et le footer ################## */

   #middle{
      width: 100%;
      height: 100%;
      background: url(back_middle.gif) repeat-y;
      position: relative;
   }

/* ########################################################## */

/* ##########################################################
   ### Contenu à Gauche ##################################### */

   #main{
      width: 73%;
      float: left;
      background: url(back_middle.gif) repeat-y;
   }

/* ### Titre de la section ################################## */
   #main h1{
      font-size: 200%;
      font-weight: bold;
      margin: 10px 15px 5px 15px;
      position: relative;
      color: #405F98;
   }

   #main h1 a{
      font-size: 100%;
      font-weight: bold;
      position: relative;
      color: #405F98;
   }

   #main h1 a:hover{
      text-decoration: underline;
   }

/* ### Sous-titre ########################################### */
   #main h2{
      font-size: 150%;
      font-weight: bold;
      color: #405F98;
      margin: 0 0 0 15px;
   }

/* ### Texte ################################################ */
   #main p{
      text-align: justify;
      margin: 10px 15px;

   }

   #main a{
      color: #742c29;
   }

   #main a:hover{
      text-decoration: underline;
   }

/* ### Liens à l'intérieur du texte ######################### */
   #main p a{
      border-bottom: dashed 1px #742c29;
      color: #742c29;
   }

/* ### Survole sur les liens ################################ */
   #main p a:hover{
      border-bottom: solid 1px #742c29;
      text-decoration: none;
   }

/* ### Margin de la photo de l'extérieur sur l'accueil ###### */
   #main #exterieur{
      margin: 0 9px;
      border: solid 1px #405F98;
   }

/* ### Liste pour le plan du site ########################### */
   #main ul{
      margin: 0 0 10px 20px;
   }

/* ### Élément principale de la liste ####################### */
   #main ul li{
      line-height: 20px;
      background: url(sitemap.gif) left 5px no-repeat;
      margin: 0;
      padding: 0 15px 0 15px;
   }
/* ### Liens de la liste #################################### */
   #main ul li a{
      font-size: 130%;
      font-weight: bold;
      color: #742c29;
   }

/* ### Survole liens de la liste ############################ */
   #main ul li a:hover{
      text-decoration: underline;
   }

/* ### Élément secondaire de la liste ####################### */
   #main ul li ul li{
      background: none;
      padding: 0;
      font-weight: bold;
   }

/* ### Liens élément secondaire ############################# */
   #main ul li ul li a{
      font-weight: normal;
   }

   #main ul li ul li ul{
      margin: 0 5px 0 0;
      padding: 0 0 0 15px;
   }

/* ### Élément tertiaire de la liste ######################## */
   #main ul li ul li ul li{
      background: none;
      margin: 0;
      padding: 0;
   }

/* ### Liens élément tertiaire ############################### */
   #main ul li ul li ul li a{
      font-size: 100%;
   }

/* ### Fin liste ############################################ */

/* ### Menu de la page promotion ############################ */
   #main ul.promo{
      margin: 0;
   }

   #main ul.promo li{
      background: none;
      padding: 0;
      margin: 20px 10px;
      height: 120px;
   }

   #main ul.promo li h2{
      margin: 10px 0 10px 138px;
   }

   #main ul.promo li p{
      margin: 10px 0 10px 140px;
   }

   #main ul.promo li a{
      display: block;
      margin: 6px 0 6px 140px;
      font-size: 110%;
   }

   #main .requiert{
      margin: 20px 0 0 0;
   }

   #main .requiert p{
      margin: 6px 0 6px 20px;
      padding: 0;
   }

   #main ul.promo li.promo_ckcn{
      background: url(promo_ckcn.jpg) left 16px no-repeat;
      height: 140px;
      margin: 0 10px 20px 10px;
   }

   #main ul.promo li.ordinateurs{
      background: url(promo_ordi.jpg) left center no-repeat;
   }

   #main ul.promo li.speciaux{
      background: url(promo_semaine.jpg) left center no-repeat;
   }

   #main ul.promo li.liquidations{
      background: url(promo_liquidations.gif) left center no-repeat;
   }

   #main ul.promo li.cellulaires{
      background: url(promo_cellulaires.gif) left center no-repeat;
   }

   #main ul.promo li.garantie{
      background: url(promo_garantie.jpg) left center no-repeat;
   }

/* ### Contenu des pages Services/Produits ############### */
   #dynamic{
      margin: 0 0 0 10px;
   }

/* ### Menu des pages Services/Produits ################## */
   #dynamic ul.menu{
      float: left;
      padding: 0;
      margin: 10px 10px 0 0;
      width: 135px;
      border: solid 1px #405F98;
   }

   #dynamic ul.menu li{
      background: none;
      padding: 0 5px;
      margin: 0;
      border-top: solid 1px #405F98;
   }

   #dynamic ul.menu li.first{
      border-top: none;
   }

   #dynamic ul.menu li a{
      color: #742c29;
      font-size: 14px;
   }

   #dynamic ul.menu li a:hover{
      text-decoration: underline;
   }

/* ### Désactive par défaut l'affichage du contenu des ######
   ### sections ############################################# */
   #ser_default, #location, #reseaux, #sauvegarde,  #recyclage, #pro_default, #neufs, #usages, #cellulaires, #cartouches, #garantie{
      display: none;
      width: 370px;
      float: left;
      margin: 10px 0 0 0;
      border: solid 1px #405F98;
   }

/* ### Texte intro des pages Services/Produits ########### */
   #ser_default, #pro_default{
      display: block;
   }

   #dynamic .content{
      margin: 10px;
   }

/* ### Titre des sections des pages Services/Produits #### */
   #dynamic .content h2{
      font-size: 165%;
      color: #405F98;
      margin: 0;
   }

/* ### Titre des sous-sections des pages Services/Produits #### */
   #dynamic .content h3{
      font-size: 130%;
      font-weight: bold;
      color: #405F98;
      margin: 10px 0 0 0;
   }

   #dynamic .content ul{
      border: none;
      margin: 0 0 0 10px;
   }

   #dynamic .content li{
      float: none;
      border: none;
      margin: 0;
      line-height: 17px;
      background: url(sitemap.gif) left 4px no-repeat;
   }

/* ### Texte du contenu de Services/Produits ############# */
   #dynamic .content p, #dynamic #recyclage .content p, #dynamic #recyclage .content h2{
      margin: 5px 0;
      padding: 0;
   }

   #dynamic .content p{
      text-align: justify;
   }

/* ### Logo et liens de recyc-quebec ######################## */
   #dynamic #recyclage{
      text-align: left;
   }

   #dynamic #recyclage a{
      width: 185px;
      height: 81px;
      margin: 20px auto 0 auto;
      display: block;
   }

/* ### Carte d'affaire page contact ######################### */
   #contact{
      width: 530px;
      height: 340px;
      background: url(back_contact.jpg) no-repeat;
      margin: 0 0 0 1px;
   }

/* ### Heure d'ouverture page contact ####################### */
   #main #heure{
      margin: 0 auto 20px auto;
      text-align: center;
   }

/* ### Titre ################################################ */
   #main #heure h2{
      margin: 0 0 0 72px;
      text-align: left;
   }

/* ### Tableau heure d'ouverture page contact ############### */
   #main #heure table{
      margin: 0 auto 20px auto;
      display: block;
      width: 400px;
   }


/* ### Titre des colones et des rangées ##################### */
   #main #heure table tr th{
      /*border: solid 1px #405F98;*/
      text-align: center;
      padding: 4px;
      font-size: 12px;
   }

/* ### Contenu du tableau ################################### */
   #main #heure table tr td{
      /*border: solid 1px #405F98;*/
      padding: 4px 16px;
      text-align: center;
      font-size: 12px;
   }

/* ### Google Map ########################################### */
   #mapDiv{
      width: 520px;
      height: 400px;
      margin: 10px;
      background: url(../../images/map.jpg) no-repeat;
   }

   #mapDiv a{
      color: #742c29;
   }

   #mapDiv a:hover{
      text-decoration: underline;
   }

/* ########################################################## */

/* ##########################################################
   ### Bande à droite ####################################### */

   #right{
      float: right;
      width: 27%;
      background: url(back_middle.gif) right repeat-y;
      text-align: center;
   }

/* ### Logo Millenium ####################################### */
   #right #millenium{
      margin: 10px auto 0 auto;
      width: 163px;
      height: 43px;
      display: block;
   }

/* ### Section ############################################## */
   #right .content{
      margin: 10px 10px 10px 11px;
      text-align: justify;
   }

/* ### Titre de section ##################################### */
   #right .content h2{
      font-size: 165%;
      color: #405F98;
      margin: 0 0 10px 0;
   }

/* ### Contenu de section ################################### */
   #right .content p{
      text-align: left;
   }

/* ### Liens contenu de section ############################# */
   #right .content p a{
      border-bottom: dashed 1px #742c29;
      color: #742c29;
   }

/* ### Survole liens ######################################## */
   #right .content p a:hover{
      border-bottom: solid 1px #742c29;
   }

   #right #lien01, #right #lien02{
      margin-bottom: 30px;
   }

   #right #lien02{
      display: none;
   }

   #right #lien01 a, #right #lien02 a{
      color: #742C29;
   }

   #right #lien01 a:hover, #right #lien02 a:hover{
      text-decoration: underline;
   }

   #right .prec, #right .next{
      margin: 6px 0 0 0;
   }

   #right .prec{
      float: left;
   }

   #right .next{
      float: right;
   }

/* ### Liste ################################################ */
   #right .content ul{

   }

/* ### Élément de la liste ################################## */
   #right .content ul li{
      margin: 2px 0 2px 5px;
   }

/* ### Liens de la liste #################################### */
   #right .content ul li a{
      color: #742c29;
   }

/* ### Liens de la liste #################################### */
   #right .content ul li a:hover{
      text-decoration: underline;
   }


/* ### Boite de nouvelles ################################### */
	#right .rss_box{
		width: 170px;
		margin: 0 0 10px 0;
		border: 1px solid #317082;
		padding: 3px;
		background-color: #E2EBED;
		overflow: auto;
		height: 160px;
		position: relative;
		text-align: left;
		font-size: 90%;
	}

   #right #rssBox a{
      font-size: 90%;
		color: #742c29;
   	padding: 0 0 0 10px;
      background: url(sitemap.gif) left 3px no-repeat;
   }

   #right #rssBox a:hover{
      text-decoration: underline;
   }

/* ### Partenaires ########################################## */
   #right #partenaires{
      width: 195px;
      padding: 0 0 4px 4px;
   }

/* ### Images Partenaires ################################### */
   #right #partenaires img{
      margin: 2px 0;
      padding: 0;
   }

/* ### Liens partenaires #################################### */
   #right #partenaires a{
      margin: 0;
      padding: 0;
   }

/* ########################################################## */

/* ##########################################################
   ### Footer ############################################### */

   #footer{
      clear: both;
      background: #b5c4df;
      color: #405F98;
      border: solid 1px #405F98;
      text-align: center;
   }

   #footer ul{
      width: 56%;
      height: 20px;
      margin: 0 auto;
      padding: 10px 0 0 0;
      display: block;
   }

   #footer ul li{
      float: left;
   }

   #footer ul li a{
      display: inline;
      float: left;
      position: relative;
      color: #742c29;
      margin: 3px;
      font-size: 13px;
   }

   #footer ul li a:hover{
      text-decoration: underline;
   }

   #footer ul li a.on{
      font-weight: bold;
      border-bottom: solid 1px #742c29;
   }

   #footer ul li a.on:hover{
      text-decoration: none;
   }

   #footer div#adresse{
      width: 100%;
      height: 60px;
      margin: 10px auto 0 auto;
      text-align: center;
   }

   #footer div#adresse h1{
      font-size: 150%;
      font-weight: bold;
   }

   #footer div#adresse a{
      color: #742c29;
   }

   #footer div#adresse a:hover{
      text-decoration: underline;
   }

   #footer #copyright{
      margin: 0 auto;
      padding: 0;
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
   }

   #footer #warning{
      text-align: justify;
      margin: 10px;
      font-size: 80%;
   }

/* ########################################################## */

/* ##########################################################
   #### © Copyrights 2006 Service Informatique Sept-Iles ####
   ########################################################## */