/**
 *  Stylesheet pour Chronologiq
 *  par Antoine Leclair
 *  antoineleclair@hooba.ca
 *  2009-06-30
 */

/* Général */

body {background:url(/images/body-bg.png) center top;color:#333;font-family:Arial, Helvetica, "Lucida Grande", sans-serif;}

h3 {font-weight:bold;color:#be2726;font-size:14px;line-height:16px;margin-bottom:6px;}
h3 a {font-weight:bold;color:#be2726;font-size:14px;line-height:16px;margin-bottom:6px;}
h4 {font-size:12px;line-height:14.5px;}
p {font-size:12px;line-height:14.5px;margin-bottom:14px;}
ul {font-size:12px;line-height:14.5px;list-style-type:disc;padding-left:15px;margin-bottom:16px;}
ul li {margin-bottom:4px;}
cite {font-style:normal;}
cite strong {display:block;}
dl {font-size:12px;}
dt {color:#be2726;font-weight:bold;line-height:14.5px;margin-bottom:4px;padding-left:20px;background:url(/images/fleche-active.png) left 2px no-repeat;}
dt.inactive {margin-bottom:17px;background:url(/images/fleche-inactive.png) left top no-repeat;color:#333;}
dd {padding-left:20px;margin-bottom:17px;}
dd.inactive {display:none;}

a {text-decoration:none; color:#333333;}
a:hover {text-decoration:none; color:#be2726;}

label {font-size:12px;line-height:14.5px;font-weight:bold;}
input, textarea {font-family:Arial, Helvetica, "Lucida Grande", sans-serif;color:#333;font-size:12px;}

.clearfix {clear:both;margin:0;padding:0;}
.col {float:left;}
.block {display:block;}
a.mailto {color:#be2726;text-decoration:none;}
a.mailto:hover {text-decoration:underline;}
.erreur {color:red;}

/* Layout général */

#ombre-top {width:986px; height:13px;margin:10px auto 0;background:url(/images/ombre-top.png) center top no-repeat;}
#wrapper {width:988px;margin:0 auto;background:url(/images/ombre-side.png) center top repeat-y;}
#fenetre {width:960px;margin:0 auto;background:url(/images/fenetre-bg.png) center top repeat-y white;}
#header {height:110px;width:100%;position:relative;background:url(/images/header-bg.jpg) top right no-repeat white;}
#header #logo {width:550px;height:37px;position:absolute;top:40px;left:30px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/chronologiq-logo.png) center center no-repeat;}

#main {width:693px;float:left;background:white;}
#nav {width:693px;height:38px;margin:0;padding:0;position:relative;}
#nav li {display:inline;margin:0;}
#nav li a {background-image:url(/images/nav.png);margin:0;height:38px;display:block;float:left;text-indent:-9999px;overflow:hidden;}
#nav li a.accueil {width:125px;background-position:left top ;}
#nav li a.produit {width:115px;background-position:-125px top;}
#nav li a.a-propos {width:125px;background-position:-240px top;}
#nav li a.services {width:115px;background-position:-365px top;}
#nav li a.faq {width:80px;background-position:-480px top;}
#nav li a.contact {width:133px;background-position:-560px top;}
#nav li a.accueil:hover {width:125px;background-position:left bottom;}
#nav li a.produit:hover {width:115px;background-position:-125px bottom;}
#nav li a.a-propos:hover {width:125px;background-position:-240px bottom;}
#nav li a.services:hover {width:115px;background-position:-365px bottom;}
#nav li a.faq:hover {width:80px;background-position:-480px bottom;}
#nav li a.contact:hover {width:133px;background-position:-560px bottom;}
#nav li ul {position:absolute;top:38px;left:265px;width:163px;height:29px;margin:0;padding:0;color:#999;background:url(/images/subnav.png) center center no-repeat;display:none;}
#nav li ul li {display:block;float:left;font-size:12px;margin:0;}
#nav li ul li a {height:auto;background:none;text-transform:uppercase;color:#999;text-decoration:none;}
#nav li ul li a.a-propos-sub {width:66px;height:29px;margin-right:20px;}
#nav li ul li a.actualites {width:74px;height:29px;}
#nav li ul li a:hover {text-decoration:underline;}

#sidebar {width:267px;float:left;}

#acces-client {width:267px;height:34px;background:url(/images/acces-client-bg.png) center center no-repeat;}
#acces-client label {display:none;}
#acces-client #acces-client-input {background:none;border:none;margin:9px 0 0 87px;width:140px;line-height:14.5px;font-size:12px;color:white;font-size:12px;}
#acces-client .submit {position:relative;top:5px;}

#side-content {padding:38px 20px 0 28px;background-color:#f1f1f2;font-size:12px;line-height:14px;}
#side-content h3.aider-a-gerer {width:221px;height:80px;margin-bottom:34px;background:url(/images/texte/vous-aider-a-gerer.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}
#side-content h2.confiance {width:137px;height:34px;margin-bottom:15px;background:url(/images/texte/ils-nous-font-confiance.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}
#side-content h2.actualites {width:105px;height:20px;margin-bottom:15px;margin-top:20px;background:url(/images/texte/actualites.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}
#side-content p {margin-bottom:6px;}
#side-content .clients strong {display:block;}
#side-content h3 {margin-bottom:6px;font-size:14px;line-height:16px;color:#333;}
#side-content .bouton-en-savoir-plus {margin:14px 0 20px 0;}
#side-content .clients .premier {margin-bottom:18px;}

#footer {width:960px;margin:0 auto;padding:15px 13px;color:white;font-size:11px;background:url(/images/ombre-bottom.png) center -22px no-repeat;}
#footer #renav {float:left;letter-spacing:0.7px;}
#footer #renav a {text-transform:uppercase;color:white;text-decoration:none;}
#footer #renav a:hover {text-decoration:underline;}
#footer #copyrights {float:right;}

/* Boutons */

.bouton-en-savoir-plus a {width:95px;height:22px;display:block;background:url(/images/boutons/en-savoir-plus.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}
.bouton-en-savoir-plus a:hover {width:95px;height:22px;display:block;background:url(/images/boutons/en-savoir-plus-hover.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}
.bouton-demonstration a {width:212px;height:60px;display:block;background:url(/images/boutons/demandez-une-demonstration.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}
.bouton-demonstration a:hover {width:212px;height:60px;display:block;background:url(/images/boutons/demandez-une-demonstration-hover.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}
.bouton-video a {width:204px;height:60px;display:block;background:url(/images/boutons/video.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}
.bouton-video a:hover {width:204px;height:60px;display:block;background:url(/images/boutons/video-hover.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}
.bouton-imprimable a {width:125px;height:22px;display:block;background:url(/images/boutons/version-imprimable.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}
.bouton-imprimable a:hover {width:125px;height:22px;display:block;background:url(/images/boutons/version-imprimable-hover.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}
a.bouton-voir {width:37px;height:22px;display:block;background:url(/images/boutons/voir.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}
a.bouton-voir:hover {width:37px;height:22px;display:block;background:url(/images/boutons/voir-hover.png) center center no-repeat;text-indent:-9999px;overflow:hidden;}

/* Accueil */

.accueil #nav li a.accueil {background-position:left bottom;}

.accueil #intro {width:405px;height:280px;padding:40px 0 0 260px;background:url(/images/homme-a-lheure.jpg) left bottom no-repeat;font-size:14px;line-height:16px;border-bottom:1px solid #b8b9ba;}
.accueil #intro p {margin-bottom:16px;}
.accueil #intro p strong {color:#be2726;}
.accueil #intro ul {font-size:14px;font-weight:bold;line-height:22px;margin-bottom:22px;list-style-image:url(/images/puce-rouge.png);padding-left:20px;}

.accueil #enumeration {padding:25px 0 0 40px;}
.accueil #enumeration h2 {width:551px;height:25px;margin-bottom:12px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/un-logiciel-de-gestion-de-temps.png) center center no-repeat;}
.accueil #enumeration .col1 {width:180px;padding-right:40px;}
.accueil #enumeration .col2 {width:200px;padding-right:45px;}
.accueil #enumeration .col3 {width:160px;}
.accueil #enumeration .bouton-demonstration {margin:20px 0 30px 215px;}

/* Produit */

.produit #nav li a.produit {background-position:-125px bottom;}
.produit h1 {width:119px;height:23px;margin-bottom:30px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/produit.png) center center no-repeat;}

.produit #intro {position:relative;padding:40px 0 0 40px;width:620px;border-bottom:1px solid #b8b9ba;}
.produit #intro .col1 {width:196px;padding-right:12px;}
.produit #intro .col2 {width:201px;padding-right:14px;}
.produit #intro .col3 {width:196px;}
.produit #intro .bouton {float:left;margin:14px 5px 24px 0;}
.produit #intro .bouton-video {margin-left:-5px;}
.produit #intro .bouton-imprimable {position:absolute;top:40px;right:0;margin:0;}

.produit #fonctionnalites {padding:25px 0 0 40px;width:620px;border-bottom:1px solid #b8b9ba;}
.produit #fonctionnalites h2 {width:164px;height:21px;margin-bottom:24px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/fonctionnalites.png) center center no-repeat;}
.produit #fonctionnalites .col {float:left;width:260px;padding-right:60px;}
.produit #fonctionnalites .col2 {padding-right:0;}
.produit #fonctionnalites ul li {position:relative;}
.produit #fonctionnalites ul li a.bouton-voir {position:absolute;right:-45px;top:0;}
.produit #fonctionnalites ul li a.one-liner {top:-5px;}
.produit #fonctionnalites h3.last {padding-left:14px;text-indent:-14px;}
.produit #fonctionnalites .bouton-demonstration {margin-bottom:30px;}

.produit #options {padding:25px 0 50px 40px;}
.produit #options h2 {width:88px;height:25px;margin-bottom:24px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/options.png) center center no-repeat;}
.produit #options .col {float:left;width:196px;padding-right:18px;}

/* À propos */

.a-propos #nav li a.a-propos {background-position:-240px bottom;}
.a-propos #nav li ul {display:block;}
.a-propos h1 {width:140px;height:28px;margin-bottom:36px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/a-propos.png) center center no-repeat;}

.a-propos #intro {width:620px;padding:40px 0 0 40px;border-bottom:1px solid #b8b9ba;background:url(/images/femme-a-son-affaire.jpg) left bottom no-repeat;}
.a-propos #intro p, .a-propos #intro h3, .a-propos #intro ul {margin-left:215px;}
.a-propos #intro ul {margin-bottom:50px;}
.a-propos #explications {padding:20px 0 0 40px;}
.a-propos #explications .col {width:196px;padding-right:17px;margin-bottom:20px;}
.a-propos #explications h3 {height:32px;}
.a-propos #explications h3 span {display:block;}
.a-propos #explications .bouton-demonstration {margin:0 0 20px 207px;}

/* Actualitées */

.actualites #nav li a.a-propos {background-position:-240px bottom;}
.actualites #nav li ul {display:block;}
.actualites h1 {width:162px;height:28px;margin:40px 0 20px 40px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/actualites-h1.png) center center no-repeat;}

.actualites #actualites-sidebar {float:left;width:205px;padding:0 0 0 40px;}
.actualites #actualites-sidebar .rss, .actualites #actualites-sidebar .ajouter-fav {height:24px;line-height:24px;}
.actualites #actualites-sidebar .rss a, .actualites #actualites-sidebar .ajouter-fav a {vertical-align:middle;padding-left:30px;display:block;height:24px;letter-spacing:0.5px;text-transform:uppercase;color:#999;text-decoration:none;} 
.actualites #actualites-sidebar .rss a:hover, .actualites #actualites-sidebar .ajouter-fav a:hover {text-decoration:underline;} 
.actualites #actualites-sidebar .rss {margin-top:10px;margin-bottom:4px;background:url(/images/rss.png) left center no-repeat;line-height:21px;}
.actualites #actualites-sidebar .ajouter-fav  {margin-bottom:40px;line-height:30px;background:url(/images/bookmark.png) left center no-repeat;}
.actualites #actualites-sidebar h3.rechercher {width:85px;height:15px;text-indent:-9999px;margin-bottom:-3px;overflow:hidden;background:url(/images/texte/rechercher.png) center center no-repeat;}
.actualites #actualites-sidebar form {margin-bottom:40px;}
.actualites #actualites-sidebar #search {width:144px;margin-top:0;height:16px;padding:5px 3px 5px 3px;border:none;background-color:none;background:url(/images/search-bg.png) left top no-repeat;}
.actualites #actualites-sidebar .submit {position:relative;top:5px;}
.actualites #actualites-sidebar h3.archives {width:65px;height:15px;margin-bottom:16px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/archives.png) center center no-repeat;}
.actualites #actualites-sidebar ul {list-style-type:none;padding:0;}
.actualites #actualites-sidebar ul li a {text-decoration:none;text-transform:capitalize;}
.actualites #actualites-sidebar ul li a:hover {text-decoration:underline;}
.actualites #actualites-sidebar ul li {color:#be2726;}

.actualites #actualites-main {float:left;width:410px;padding-bottom:50px;}
.actualites #actualites-main h2 {width:213px;height:21px;margin-bottom:28px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/dernieres-nouvelles.png) center center no-repeat;}
.actualites #actualites-main .post {padding-bottom:20px;margin-bottom:28px;border-bottom:1px solid #b8b9ba;}
.actualites #actualites-main .post .date {margin-bottom:6px;}
.actualites #actualites-main .post p {margin-bottom:10px;}
.actualites #actualites-main .post .bouton-en-savoir-plus {float:right;margin-top:10px;}

/* Services */

.services #nav li a.services {background-position:-365px bottom;}
.services h1 {width:126px;height:23px;margin:40px 0 20px 40px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/services.png) center center no-repeat;}
.services #tagline {font-size:14px;font-weight:bold;margin-left:40px;width:620px;margin-bottom:20px;}
.services .col1 {width:200px;margin-left:40px;margin-right:30px;}
.services .col1 h3 {width:107px;height:32px;margin-bottom:10px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/formation-a-vos-bureaux.png) center center no-repeat;}
.services .col1 p {margin-bottom:6px;}
.services .col1 p#communiquez {margin-top:23px;}
.services .col1 .bouton-demonstration {margin-left:-5px;margin-top:30px;}
.services .col2 {width:420px;}
.services .col2 p {margin-bottom:6px;}
.services .col2 .bloc {margin-bottom:24px;}

/* FAQ */

.faq #nav li a.faq {background-position:-480px bottom;}
.faq h1 {width:56px;height:22px;margin:40px 0 25px 40px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/faq.png) center center no-repeat;}
.faq dl {width:600px;margin-left:40px;}
.faq .bouton-demonstration {margin:45px 0 45px 250px;}

/* Contact / Demande de démonstration */

.contact #nav li a.contact {background-position:-560px bottom;}
.contact h1 {width:132px;height:23px;margin:40px 0 25px 40px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/contact.png) center center no-repeat;}

.contact .col1 {width:196px;padding-right:17px;margin-left:40px;}
.contact .col1 h3 {margin-bottom:0;}
.contact .col1 .adresse {margin-bottom:4px;}
.contact .col2 h3 {margin-bottom:18px;}
.contact .col2 form div, .demande .col2 form div {margin:12px 0;clear:both;}


.contact .col2 label, .demande .col2 label {width:86px;display:block;float:left;line-height:30px;}
.contact .col2 input, .contact .col2 textarea, .demande .col2 input, .demande .col2 textarea  {font-family:Arial, Helvetica, "Lucida Grande", sans-serif;width:320px;height:15px;font-size:12px;line-height:14.5px;padding:7px 3px 7px 6px;border:1px solid #c7c7c7;}

.contact .col2 textarea, .demande .col2 textarea {width:407px;display:block;clear:both;height:147px;}

.contact .col2 .demande input.telephone {width:200px;}

.contact .col2 div.radio, .demande .col2 div.radio {overflow:auto;}
.contact .col2 label.radio, .demande .col2 label.radio {float:left;width:50px;font-weight:normal;}
.contact .col2 input.radio, .demande .col2 input.radio {float:left;margin-right:7px;width:auto;height:auto;border:none;background-color:white;position:relative;top:4px;}
.contact .col2 input.submit, .demande .col2 input.submit {width:auto;height:auto;border:none;margin-top:10px;}

.demande h1 {display:none;}
.demande .col1 {width:200px;margin:40px 20px 0 40px;}
.demande .col1 h3 {margin-bottom:14.5px;}
.demande .col1 p#politique {font-size:11px;margin-top:40px;}
.demande .col2 {margin-top:40px;}

/* 404 Not found */

.not-found #fenetre {background:white;height:670px;position:relative;}
.not-found #content {text-align:center;width:450px;position:absolute;top:325px;left:260px;}
.not-found h1 {margin:0 auto 20px;width:156px;height:23px;text-indent:-9999px;overflow:hidden;background:url(/images/texte/erreur-404.png) center center no-repeat;}
.not-found h2 {font-size:18px;margin-bottom:10px;}
.not-found p {font-size:14px;line-height:16px;}
.not-found p a {color:#be2726;text-decoration:none;}
.not-found p a:hover {text-decoration:underline;}