/*
Theme Name: 	Citelis Clients
Theme URI: 		http://www.citelis.fr
Description:  Un design simple et leger entierement en CSS et sans tableaux<br/>Ce template est valide XHTML 1.0 transitional et CSS 3<br/>Il est compatible Firefox, IE 5.x, IE 6.x en [800x600] et [1024x768] 
Author: 			Citelis clients
Author URI: 	http://www.citelis.fr
*/

/************************************************
	INFORMATIONS GENERIQUES
************************************************/
html, body {
	padding:0;
	margin:0;
	background-color: #FFF;
	font: 12px Verdana, Geneva, Arial, sans-serif;	
}

* {
	margin: 0;
	padding: 0;
}


table, img, a {
	border:0;
}

div {
	position:relative;
}

a {
	color: #F70;
}

a:hover {
	color: #C60;
}

p, cite, code, ul {
	font-size: 13px;
	padding-bottom: 12px;
}

h1 {
	font-size: 14px;
	margin-bottom: 4px;
}

code {
	border-right:1px solid #F0F0F0; border-top:1px solid #F0F0F0; border-bottom:1px solid #F0F0F0; background:url('img/bgcode.gif'); border-left:6px solid #39F; color: #555;
	display: block;
	margin-bottom: 12px;
	white-space: pre;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	font-size:1.1em;
	font-family:Lucida Sans Unicode, serif;
	padding-left:10px;
	padding-right:10px;
	padding-top:8px;
	padding-bottom:8px;
}

cite {
	background: url('img/generique/quote.gif') no-repeat;
	color: #666;
	display: block;
	padding-left: 28px; font-style:normal; font-variant:normal; font-weight:normal; font-size:1.3em; font-family:Lucida Sans Unicode, serif
}

h1, h2, h3 {
	color: #06C;
	padding-top: 6px;
}

h3 {
	font-size:13px;
}

/************************************************
	STRUCTURE DE LA PAGE
************************************************/

#conteneur {
	width: 100%;
	height: 100%;			
}		

/******* EN TETE ******/
#enTetePremier {	
	 width:100%;
   background:transparent url('img/structure/enTeteGauche.gif') bottom left no-repeat;			   
}

#enTeteSecond {
   background:transparent url('img/structure/enTeteDroite.gif') bottom right no-repeat;			   
}

#logoCitelis {
	float:left;
	width:20%;
}

.hauteurEnTete {
	height:100px;
}

/******* MENU ******/
#menu {
	float:right;
	width:70%;
	margin-top:27px;
}

#menu ul{
	padding-left: 0;
	float: right;
	font-weight: bold;
	font-size:13px;
	width: 100%;
}

#menu ul li{	
	display: inline;
}

#menu ul li a{
	border-top: 1px solid #DFDFDF;
	border-left: 1px solid #DFDFDF;
	border-right: 1px solid #DFDFDF;
	float: right;
	color: white;
	font-weight: bold;
	padding: 2px 6px 4px 6px;
	text-decoration: none;
	background-color:#3E579C;
	margin-right: 3px; /* distance entre chaque element du menu */
}

#menu ul li a:hover{
	color: #3E579C;
	background-color: transparent;
	border-bottom: 4px solid #EE7733;
	padding-bottom: 0;
}

/******* NAVIGATION ******/
#navigation {
	margin-left:10%;
	font-size:11px;
	color:white;
	clear:both;
}


*html #navigation {
	margin-left:10%;
	margin-top:-5px;
	font-size:11px;
	color:white;
	clear:both;
}

/******* CONTENEUR ******/
#conteneurPremier {	
	 width:100%;				 
   background:url('img/structure/conteneurGauche.gif') top left repeat-y;
}

#conteneurSecond {
   background:url('img/structure/conteneurDroite.gif') top right repeat-y;			   
   height:100%;
}

/******* CONTENU ******/
#colonneContenu {
   width:60%;
   min-width: 35%;   
   float:left;
   margin-left:4%;
}

* html #colonneContenu {
   margin-left:2%;
}

#colonneContenu .descr {
	color: #C60;
}
#colonneContenu li {
	margin-left:7%;
}

/******* ARTICLES ******/
.post{ 
	margin:0 0 25px 0;
}

.post .info {
	padding:2px 3px 3px 8px;
	border:1px solid #e3e4e4;
	background-color:#f5f5f5;
	font-size:10px;
	color:#505050;
}

.post-date {
	width: 45px;
	height: 49px;
	background: #FFFFFF url('img/generique/date.gif') no-repeat;
}

.post-month {
	font-size: 11px;
	text-transform: uppercase;
	color: #FFFFFF;
	text-align: center;
	display:block;
	line-height: 11px;
	padding-top: 2px;
	margin-left: -3px;
}

.post-day {
	font-size: 18px;
	text-transform: uppercase;
	color: #999999;
	text-align: center;
	display:block;
	line-height: 18px;
	padding-top: 7px;
	margin-left: -3px;
}

/******* BARRE DE NAVIGATION ******/			
#colonneNavigation {
 	 width:30%;
   float:left;
   margin-left:2%;
   color: #777;
   vertical-align:top;
}

#colonneNavigation h1 {
	border-bottom: 1px dashed #DDD;
	color: #E73;
	font-size: 12px;
	height: 20px;
	margin-top: 12px;
}

#colonneNavigation ul li { 
	border-bottom: 1px dashed #EEE;
	list-style: none;
}

#colonneNavigation ul li a {
	color: #777;
	font-size: 9px;
	padding: 3px 3px 3px 18px;
	text-decoration: none;
}

#colonneNavigation ul li a:hover {
	color: #111;
	background: url('img/generique/puceBarreNavigation.gif') no-repeat;
}

#colonneNavigationGauche {
	float:left;
	width:45%;
}

#colonneNavigationCentre {
	width:1%;
}

#colonneNavigationDroite {
	float:left;
	width:53%;
}

.colonneNavigationMoitie {
	height:100%;
	border-left:1px dotted blue;
}

.colonneNavigationMoitie a {
	text-decoration: none;
}

/******* ACTUALITE ******/	
div.actualite {
	border-bottom:1px blue dotted;
}

div.actualite img {
	margin-top:2%;
	margin-bottom:2%;
}

div.actualite a {	
	color: #466;
	text-align:left;
	font-size:10px;
	text-decoration:none;
}
			
div #basContenu {
   clear:both;
}

div #basNavigation {
   clear:both;
}

/******* PIED DE PAGE ******/
#piedPagePremier {	
	 width:100%;
   background:transparent url('img/structure/piedPageGauche.gif') bottom left no-repeat;			   
}

#piedPageSecond {
   background:transparent url('img/structure/piedPageDroite.gif') bottom right no-repeat;
}

.hauteurPiedPage {
	height:50px;
}

#espaceur {
	clear:both;
	height:15px;
}

#piedPageCoordonnees {
	clear:both;
	height:35px;
	color:#FFF;
	font-size:10px;
	text-align:center;	
}

#creativecommons {
	color:#71a9d3;
	height:70px;	
	font-size: 12px;
	text-align: center;
	background: transparent url('img/structure/piedPageCreativeCommons.gif') repeat-x;
}


/************************************************
	FORMULAIRES
************************************************/
#recherche {
	width:98%;
	height:20px;
	display:block;
	clear:both;
}

#commentform {
	margin: 10px 0;
}

#commentlist li {
	margin-bottom: 10%;
	padding-bottom: 10%;
	border-bottom: 1px solid #700000;
}

#commentform textarea {
	background: #f8f7f6;
	border: 1px solid #d6d3d3;
	width: 60%;
}

#commentform textarea:hover {
	background: #FFFFFF;
}	

#commentform textarea:focus {
	background: #ffffff;
	border: 1px solid #939793;
}

#commentform #email, #commentform #author, #commentform #url {
	font-size: 11px;
	background: #f8f7f6;
	border: 1px solid #d6d3d3;
	width: 60%;
	height:15px;
}

#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {
	font-size: 11px;
	background: #ffffff;
	border: 1px solid #d6d3d3;	
}

#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {
	font-size: 11px;
	background: #ffffff;
	border: 1px solid #939793;
}

#commentform input{
	margin-bottom: 3px;	
}

input.bouton {
	font-size: 11px;
	background: #f8f7f6;
	border: 1px solid #d6d3d3;
}

input.bouton:hover {
	font-size: 11px;
	background: #ffffff;
	border: 1px solid #d6d3d3;
}

input.bouton:focus {
	font-size: 11px;
	background: #ffffff;
	border: 1px solid #939793;
}

input.bouton {
	width:25%;
}

input.court {
	width:25%;
}
 
input.moyen {
	width:35%;
}

input.long {
	width:45%;
}

select {
	font-size: 11px;
	background: #f8f7f6;
	border: 1px solid #d6d3d3;
}

select:hover {
	font-size: 11px;
	background: #ffffff;
	border: 1px solid #d6d3d3;
}

/******* MESSAGES ******/
div.information {
	border-top:#CCCCCC 1px solid;
	border-right:#CCCCCC 1px solid;
	border-bottom:#CCCCCC 1px solid;
	background:url('img/generique/information.gif') repeat;
	font-weight:bold;
	font-size:12px;
	text-align:left;
	padding-left:5%;
}

div.erreur {
	border-left:red 10px solid;
	color:red;
}

div.avertissement {
	border-left:yellow 10px solid;
	color:yellow;
}

div.confirmation {
	border-left:blue 10px solid;
	color:blue;
}

div .zoneImage {
	width: 70%;	
	margin-top: 3%;
	margin-bottom: 3%;
	padding: 16px 0 6px 35px;
	font-size: 80%;
	border: 3px solid #DCEEEE;
}

* html div .zoneImage {
	margin-top: 3%;
	margin-bottom: 1%;
	padding: 16px 0 15px 35px;
}

div .zoneImage a:link, .zoneImage a:visited, .zoneImage a:hover {
	font-weight: bold;
	text-decoration: none;
	font-size: 125%;
}

div .telechargement {
	height:30px;
	background: #f1faf9 url('img/generique/telecharger.gif') no-repeat 12px 8px;
}

div .listing {
	height:40px;
	background: #f1faf9 url('img/generique/listing.gif') no-repeat top right;
}

div .client {
	background: #f1faf9 url('img/generique/listing.gif') no-repeat top right;
}

div .siteWeb {
	padding-top:20px;
	background: transparent url('img/generique/siteWeb.gif') no-repeat top left;
}

div .adresse {
	padding-top:20px;
	background: transparent url('img/generique/adresse.gif') no-repeat top left;
}

div .contact {
	padding-top:30px;
	background: transparent url('img/generique/contact.gif') no-repeat top left;
}

* html div .listing {
	height:60px;
	background: #f1faf9 url('img/generique/listing.gif') no-repeat top right;
}

div .carte {
	height:40px;
	background: #f1faf9 url('img/logo/googlemap.gif') no-repeat  top right;
}

* html div .carte {
	height:60px;
	background: #f1faf9 url('img/logo/googlemap.gif') no-repeat top right;
}

div #feedburner {
	text-align:center;
}

p.centre {
	text-align:center;
}

/******* TAILLES ******/
.longueur1 { width:10%;}
.longueur2 { width:20%;}
.longueur3 { width:30%;}
.longueur4 { width:40%;}
.longueur5 { width:50%;}
.longueur6 { width:60%;}
.longueur7 { width:70%;}
.longueur8 { width:80%;}
.longueur9 { width:90%;}

/************************************************
	FORMULAIRES CONTACT FORM
************************************************/
#formulaireform {
	width:90%;
	font-size:11px;
}

input, textarea {
	background: #f8f7f6;
	border: 1px solid #d6d3d3;
}

input:hover, textarea:hover {
	background: #ffffff;
	border: 1px solid #d6d3d3;
}

input:focus, textarea:focus {
	background: #ffffff;
	border: 1px solid #939793;
}

input.champ, textarea.champ {
	width:70%;
}

/************************************************
	PLUGIN PLAN DU SITE
************************************************/
.ddsg-sitemap ul li {
	list-style-image:url('img/generique/categorie.gif');
}

.ddsg-sitemap ul li ul li {
	list-style-image:url('img/generique/puce.gif');
}