body { background:#D9E0E6; font-family: Arial, Helvetica, sans-serif; }

#container { width:800px; background:#FFF; border:1px solid #DDD; padding:0; margin:10px auto; }
strong { font-weight: bold; color: #f47530;}
.floatstop {float:none; font-size:0px; height:0px; line-height:0px; margin:0; padding:0; clear:both;}
hr {height: 1px; padding: 0; color: #DDD; background-color: #DDD; border: 0;}

/*** header ***/
.header {margin: 0; padding: 0; }
.topnav {border-top: 2px solid #CCC; text-align: right; height: 30px; margin: 0; padding: 0;}
.topnav a {font-size: 12px; color: #7A9BAE; text-decoration: none; margin-right: 15px; font-weight: bold;}
.topnav a:hover {color: #F4B158;}
.logo {float: left; text-align: center; width: 300px; margin: 0; padding: 20px 0 0 0;}
.logo h2 {font-size: 20px; font-weight: normal; margin: 20px 0 0 0;; padding: 0;}
.logo h2 span.bleu {color: #009BDB;}
.logo h2 span.jaune {color: #F4B158;}
.diapo {height: 200px; border-top: 2px solid #CCC; border-bottom: 2px solid #CCC; text-align: right; margin: 0; padding: 0;}
.diapo img {margin: 0; padding: 0;}

/*** menu ***/
.menu {border-bottom: 2px solid #CCC; margin: 0; padding: 9px 0 10px 0;;}
.menu ul { padding:0; margin:0 0 0 350px; list-style:none; border:0;}
.menu ul li { display:inline;  margin:0; padding:10px; border:0; background:none;}
.menu ul li a {  display:inline; margin:0; padding:10px; color:#888; font:normal 18px Arial, Helvetica, sans-serif; text-decoration:none;}
.menu ul li a:hover { background: #dfdfdf;}
.menu ul li a.active {  background: #dfdfdf;}

/*** colonne de droite ***/
#colD {float:right; width: 200px; text-align: center;}
#news { width:180px; margin: 20px 0 10px 0; background:#f2f2f2; border:#ccc solid 1px; padding:3px; }
#news h3 { color:#F47530; font:16px "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; letter-spacing:5px; font-weight:normal; text-align:center; margin:0 0 10px 0; padding:0 0 3px 0; }
#news h4 { font-size:11px; font-style:italic; color:#947D70; margin:0; padding:0; text-align:left; margin: 5px 0 0 0;}
#news a { font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 12px; color:#555; font-weight:normal; text-decoration:none; text-align:left; margin: 0 0 15px 0; padding: 0; display: block;}
#news a:hover { text-decoration:underline; }

/*** home page ***/
.accueil {padding: 10px; margin: 0 0 15px 0; font:17px "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; font-style: italic; color: #888; line-height:18px;}
.indexbox {overflow:hidden; border-bottom: 1px solid #CCC; margin: 0 10px 10px 0; }
.indexbox img {border: 1px solid #CCC; padding:1px; float:left; margin-bottom: 5px; margin-right: 5px; }
#index .indexbox p {margin:0; padding:0; font-size: 12px; font-weight: normal; color: #444; line-height:15px;}
.titre_web { color:#61B8E6; font:18px "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; font-weight:bold; text-align:justify; margin: 0 0 5px 0; padding: 5px 0 0 0; display: block;}
.titre_television { color:#FFB748; font:18px "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; font-weight:bold; text-align:justify; margin: 0 0 5px 0;; padding: 5px 0 0 0; display: block;}
.titre_edition { color:#66FF00; font:18px "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; font-weight:bold; text-align:justify; margin: 0 0 5px 0;; padding: 5px 0 0 0; display: block;}

/*** contenu ***/
#content { padding:10px; }
#index { float: left; width: 570px; padding:10px;  }
#content h1 { font-size: 22px; color:#009BDB; letter-spacing:2px; margin:10px 0 10px 0; padding-left:10px; border-bottom: 2px dotted #009BDB;}
#content h2 { font-size: 18px; color:#FFB748; letter-spacing:2px; margin:10px 0 5px 0; padding-left:10px; }
#content h3 { font-size:15px; color: #f47530; letter-spacing:1px; margin:15px 0 5px 0; padding:0px; }
#content h4 { font-size:15px; color: #f47530; letter-spacing:1px; margin:15px 0 15px 30px; padding:0px; }
#content p {margin:0; padding:0; font-size: 14px; font-weight: normal; color: #444; line-height:15px;}
#content ul {list-style-type: circle; clear: both;}
#content li {font-size: 13px; font-weight: normal; color: #444;}

.box {float: left; width: 350px; background: #EEE; padding: 5px; margin: 0 0 10px 10px; -moz-border-radius: 10px; }
.box img {float: left; margin: 0 5px 0 0;}
.box a {float: right; color: #3366FF;}

.box_support {float: left; width: 300px; border: 1px solid #DDD; padding: 10px; margin: 10px 10px 10px 20px; text-align: left;}
.box_support img {float: left; margin: 0 5px 0 0;}
.box_support a {font-size: 18px; color:#FFB748; font-weight: bold; margin:0 0 5px 0; text-decoration: none; display: block;}
.box_support p {clear: both; }

.contact {background: #DDD; margin: 10px auto; padding: 10px; width: 500px; -moz-border-radius: 10px; text-align: center;}
.contact a {text-decoration: none; color: #3366FF; font-weight: bold;}
.contact a:hover {text-decoration: underline;}

/* news */
.listenews {border-bottom: 1px dashed #CCC; margin: 10px 30px 10px 30px; padding: 0 0 10px 0;}
.listenews h3 {font-style: italic; }
.listenews a {color: #444; text-decoration: none;}
.listenews a:hover {text-decoration: underline;}
#content .actu {width: 600px; background: #EEE; -moz-border-radius: 10px; padding: 10px; margin: 10px 10px 30px 10px;}
#content .actu h3 {font-style: italic; font-weight: bold; color: #888; font-size: 15px; margin:0 0 5px 0; padding:0; }
#content .actu p {font-size: 14px; text-align: justify; line-height: 18px;}

/* ----- liste des sites ------ */
.sites {float: left; width: 300px; border: 1px solid #D4E0E1; background: #efefef; text-align: center; margin: 5px 0 10px 30px; padding: 5px;}
.sites img {border: 3px solid #EEE;}
.sites img:hover  {border: 3px solid #CCC; text-decoration: none;}
#content .sites h3 {font-family: Arial; font-size: 16px; font-weight: bold; color: #666; margin: 0; padding: 0;}
#content .sites a {font-family: Arial; font-size: 13px; font-weight: normal; color: #555; margin: 5px 0 0 0; padding: 0; text-decoration: none;}
#content .sites a:hover {text-decoration: underline;}
#content .sites h5 {font-family: Arial; font-size: 11px; font-weight: normal; color: #666; margin: 5px 0 0 0; padding: 0; font-style: italic;}

/* references */
.presta {font-family: Arial; text-align: left; border: 1px solid #CCC; -moz-border-radius: 10px; width: 500px; margin: 0 0 10px 70px; padding: 10px; overflow: hidden; }
.presta img {float: right; padding: 5px 10px 5px 3px; border: 1px dotted #DDD;}
#content .presta h2 {color:#FFB748; font:14px "Lucida Grande", "Lucida Sans Unicode", verdana, geneva, sans-serif; font-weight:bold; padding: 5px 0 0 0; margin: 0;}
#content .presta h3 {color:#BBB; font-size: 14px; font-weight:bold; padding: 0; margin: 5px;}
#content .presta ul {font-family: Arial; font-size: 11px; font-weight: normal; color: #555; list-style-type: none; margin: 0; padding: 20px 0 0 20px; clear: none;}
#content .presta li {background: url("../images/puce.gif") no-repeat left center; padding-left: 10px;}

/* --- formulaires --- */
form {margin-left:30px; }
input { font-weight: bold; font-size: 12px; color: #336699; border: 1px solid #7A9BAE;}
select { font-weight: bold; font-size: 12px; color: #336699;}
textarea { font-weight: normal;  font-size: 12px; color: #336699; padding: 3px;}




/*-------------------------SECTION CLIENTS -------------------------------*/
#client {padding: 10px; color: #444; font-size: 13px;}
#client h1 { font-size: 22px; color:#009BDB; letter-spacing:2px; margin:10px 0 10px 0; padding-left:10px; border-bottom: 2px dotted #009BDB;}
#client p {margin:0; padding:0; font-size: 13px; font-weight: normal; color: #444; line-height:15px;}

#client .adresse {padding: 10px; margin: 20px 0 20px 30px; border: 1px dotted #CCC; width: 300px; }
#client h3 { font-size:15px; color: #f47530; letter-spacing:1px; margin:0 0 5px 0; padding:0px; }

/*bon de commande*/
.commande {width: 650px; border: 2px solid #CCC; font-weight: normal; font-size: 14px; color: #444; margin: 0 auto;}
.commande .services {width: 300px; float:left; padding: 10px; border-right: 1px solid #CCC;}
.commande .duree {width: 90px; float:left; padding: 10px; border-right: 1px solid #CCC;}
.commande .expiration {width: 100px; float:left; padding: 10px; border-right: 1px solid #CCC;}
.commande .prix {width: 75px; float:left; padding: 10px;}
.commande .ligne {text-align: left; padding: 10px; border-bottom: 1px dotted #CCC;}
.commande .total {text-align: right; padding: 10px; border-bottom: 1px dotted #CCC; background: none; border: none;}

.total_ht {border: 2px solid #CCC; width: 260px; margin: 10px 0 0 420px; padding: 10px; }
.total_ht H4 {float:left; width: 200px; margin: 0; padding: 0; font-size: 14px; font-weight: normal;}
.total_ht H5 {float:left; font-weight: normal; margin: 0; padding: 0; font-size: 14px; }
.total_ttc {border: 2px solid #CCC; width: 260px; margin: 10px 0 30px 420px; padding: 10px; background: #EEE; }
.total_ttc H4 {float:left; width: 200px; margin: 0; padding: 0; font-size: 15px; font-weight: bold;}
.total_ttc H5 {float:left; font-weight: normal; margin: 0; padding: 0; font-size: 15px; font-weight: bold; }

.souligne {border-bottom: 1px dotted #DDD; }
.apayer {margin: 10px 0 0 0; padding: 5px; text-align: right; border: 1px solid #DDD;}
.btnOK { border:1px solid #7A9BAE; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:15px; color:#333; 
padding:5px; font-weight: bold; background:#DDD; cursor:pointer; }
.btnOK:hover {color: #FFF; background: #009900;}

/* facture */
.cadre_facture {background: #FFF; width: 800px;}
.bordure {border: 2px solid #DDD; background: #FFF;}
.client { border: 2px solid #DDD; width: 500px; text-align: center; padding: 5px;}
.numero, .date { border: 2px solid #DDD; width: 200px; text-align: center; padding: 5px;}
.client H3, .numero H3, .date H3 {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #f47530; margin: 0; padding: 0; text-align: left; }
.total {border: 2px solid #DDD; background: #DDD;;}
.cell { font-family: Arial; font-size: 14px; font-weight: bold; color: #00468C; text-align: LEFT; background: #DDD; }
.textfact {font-size: 13px; font-weight: normal; color: #444; margin: 0; padding: 0;}
.gras {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #f47530; }
.grasbleu {  font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #00468C; }
.facture {  font-family: Arial, Helvetica, sans-serif; font-size: 40px; font-weight: normal; color: #f47530; }
.small {font-family: Arial; font-size: 10px; font-weight: normal; color: #666; margin: 0; padding: 0;}
.designation {border-bottom: 1px dotted #DDD; margin: 10px;}



/************* FOOTER *********************/
#footer { text-align:center; padding:8px; background:#7A9BAE; color:#FFF; margin:0 auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color:#FFF;}
#footer a { color:#FFF; text-decoration:none; }
#footer a:hover { color:#FFFF00; text-decoration:none; } 
#copyright { float: left;  }
#liensannexes { text-align: right; }