/* CSS Concept Informatique */

/* General */

*{
margin:0;
padding:0;}

body{
background-color:#cac8c9;
background-image:url('../images/bg_ci.jpg');
background-position:top center;
background-repeat:no-repeat;
background-attachment:fixed;}


.clear{
clear:both;}


/* Principale */

#conteneur{
width: 790px;
margin: auto;
margin-top:20px;
background-color:white;
border:thin grey solid;}

#conteneur p{
text-align:justify;
}

#conteneur h3{
font-family: Georgia, "Times New Roman", Times, serif;
color: #e88200;
margin-top:25px;
margin-bottom:15px;
}

#nav{
height:30px;}

#entete{
width:790px;
height:200px;}

#piedDePage{
width:790px;
padding-top:5px;
padding-bottom:5px;
font-size:12px;
}

#piedDePage p{
text-align:center;
}

#piedDePage p img{
width:16px;
height:16px;
border:none;
margin-left:5px;}


/* Index (accueil) */

#index{
width:1335px;
margin:auto;
}

#index img{
border:none;}

#indexEntete{
padding-top:20px;
width:493px;
height:150px;
margin:auto;
}

#indexRubriques{
width:1335px;
height:295px;
padding-top:10px;}

#indexRubriques a{
display:block;
float:left;}

#indexMarketing{
width:664px;
height:222px;
margin:auto;}


.fadeconception {
	position:relative;
	display:block;
	width: 332px;
	height: 295px;	
	background:url('../images/accueil/conception_web.png') 0 0 no-repeat;
}
.fadeconceptionHover {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 332px;
	height: 295px;
	background:url('../images/accueil/conception_web_hover.png') 0 0 no-repeat;
}

.fadeportfolio{
	position:relative;
	display:block;
	width: 335px;
	height: 295px;	
	background:url('../images/accueil/portfolio_web.png') 0 0 no-repeat;
}
.fadeportfolioHover {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 335px;
	height: 295px;
	background:url('../images/accueil/portfolio_web_hover.png') 0 0 no-repeat;
}

.fademedia{
	position:relative;
	display:block;
	width: 335px;
	height: 295px;	
	background:url('../images/accueil/medias_imprimes.png') 0 0 no-repeat;
}
.fademediaHover {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 335px;
	height: 295px;
	background:url('../images/accueil/medias_imprimes_hover.png') 0 0 no-repeat;
}

.fadeblog{
	position:relative;
	display:block;
	width: 333px;
	height: 295px;	
	background:url('../images/accueil/blog.png') 0 0 no-repeat;
}
.fadeblogHover {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	width: 333px;
	height: 295px;
	background:url('../images/accueil/blog_hover.png') 0 0 no-repeat;
}




/* Conception */

#conception{
width:750px;
margin:auto;}

.conception_section{
width:750px;
padding-top:15px;
padding-bottom:15px;
border-top:thin grey dotted;
border-bottom:thin grey dotted;
}

.conception_section2{
width:750px;
height:330px;

}

.conception_img{
width:135px;
height:135px;
float:left;}

.conception_texte{
width:590px;
padding:0 10px 0 10px;
float:left;}

.conception_texte ul{
padding-left:20px;
line-height:170%;}


.conception_texte ul li{
list-style:url(../images/bullet.jpg);
}


.conception_listing{
width:180px;
height:300px;
float:left;
}

.conception_listing ol{
padding-left:30px;
}

.conception_processus{
width:530px;
padding-left:20px;
height:300px;
float:left;}

/* Applications */

#applications{
width:750px;
margin:auto;}

.applications_section{
width:750px;
padding-top:15px;
padding-bottom:15px;
border-top:thin grey dotted;
border-bottom:thin grey dotted;
}

.applications_img{
width:135px;
height:135px;
float:left;}

.applications_texte{
width:590px;
padding:0 10px 0 10px;
float:left;}

.applications_texte ul{
padding-left:20px;
line-height:170%;}


.applications_texte ul li{
list-style:url(../images/bullet.jpg);
}


/* Outils */

#outils{
width:750px;
margin:auto;}


.outils_section{
width:750px;
padding-top:15px;
padding-bottom:15px;
border-top:thin grey dotted;}

#outils h4{
color: #e88200;
font-family: Georgia, "Times New Roman", Times, serif;
padding-bottom:5px;}

.outils_img{
width:135px;
height:135px;
float:left;}

.outils_img img{
border:none;}

.outils_texte{
width:590px;
padding:0 10px 0 10px;
float:left;}

.outils_texte a{
text-decoration:none;}

.outils_texte h4:hover{
text-decoration:underline;}


/* Portfolio */

#portfolio{
width:750px;
margin:auto;}


#slideshow {
	margin:0 auto;
	width:750px;
	height:682px;
	position:relative;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:600px;
  height:682px;
  overflow:auto; /* affiche une scrollbar au cas ou */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:600px; /* reduit de 20 pixels la div #slidesContainer pour permettre d'afficher la barre de scroll */
  height:682px;
  margin:auto;
}

.control {
  display:block;
  width:39px;
  height:263px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#navDiapo{
	display:block;
	width:20px;
	height:20px;
	position:absolute;
	right:25px;
	bottom:10px;
	cursor:pointer;

}
#leftControl {
  top:0;
  left:0;
  width:40px;
  height:682px;
  background:transparent url(../images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
  top:0;
  right:0;
  width:40px;  
   height:682px; 
  background:transparent url(../images/control_right.jpg) no-repeat 0 0;
}


.slide h2, .slide p {
  margin:15px;
}
.slide h2 {
  font:italic 24px Georgia, "Times New Roman", Times, serif;
  color:#ccc;
  letter-spacing:-1px;
}
.slide img {
width:600px;
height:682px;
margin:auto;
  border:none;
}


/* FAQs */

#faqMain{
width:750px;
margin:auto;}

#faqMain ul{
padding-left:20px;
line-height:170%;}


#faqMain ul li{
list-style:url(../images/bullet.jpg);
}

#faqMain ul li a{
color:#292c79;
text-decoration:none;
font-weight:bold;
}

#faqMain ul li a:hover, #faqSub a:hover{
color:#e88200;
text-decoration:underline;
}

#faqSub{
width:750px;
margin:auto;}

#faqSub a{
color:#e88200;
text-decoration:none;
font-weight:bold;}

#faqSub hr{
color:#292c79;}

#faqSub h2{
color: #e88200;
padding-top:5px;
padding-bottom:5px;}


#faqSub ul{
padding-left:24px;
line-height:170%;}

#faqSub ul li{
list-style:url(../images/bullet.jpg);
}

.faqOutlook{
width:750px;
height:150px;
}

.faqOutlook img{
width:240px;
border:none;
float:left;
}


.faqOutlook p{
float:left;
width:450px;
padding-right:30px;
}

.faqOutlookTable{
width:400px;
margin:auto;
}

.faqOutlookTable img{
width:240px;
border:none;
}


/* Equipe */

#equipe{
width:750px;
margin:auto;}


#equipe h4{
color: #e88200;
font-family: Georgia, "Times New Roman", Times, serif;
padding-bottom:5px;}

#equipe ul{
padding-left:24px;
padding-bottom:13px;
line-height:170%;}

#equipe ul li{
list-style:url(../images/bullet.jpg);
}

#equipe p{
padding-bottom:13px;}

#equipe .membres{
padding-bottom:10px;
list-style:url(../images/bullet.jpg);

}

#equipe img.equipe{
width:320px;
height:240px;
float:right;

}



/* Contact */

#contentarea_contactez_nous {
	border-top: 1px solid rgb(80,78,163);
	height: auto;
	width: 785px;
	background: #FFFFFF;
	font-family: "Times New Roman", Arial, Times, serif;
	padding: 20px 2px 1px 2px;
	margin-right: auto;
	margin-left: auto;
}

#contentarea_contactez_nous table {
	background-color: rgb(255,148,0);
	margin-bottom: 20px;
	margin-right: auto;
	margin-left: auto;
	padding: 20px;
	border: 2px ridge rgb(1,1,103);
}



#contentarea_contactez_nous a{	
	color: rgb(1,1,103);
	text-decoration: none;
}

#contentarea_contactez_nous a:hover {
	text-decoration: underline overline;
}

#contentarea_contact_moyens {
	border: 4px outset rgb(1,1,103);
	width:700px;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 20px;
	font-size:13px;

}

#contentarea_contact_moyens_gauche {
	width:320px;
	height:360px;
	padding-top:10px;
	margin-left:10px;
	float:left;
}

#contentarea_contact_moyens_droite {
	width:360px;
	height:360px;
	float:left;
	padding-left:10px;
	margin-top:10px;
}

#contentarea_contact_moyens_droite img{
	float:right;
	position:relative;
}

#contentarea_contact_moyens_droite i{
	font-size:14px;
}

#contentarea_contact_moyens_droite p{
	float:left;
}

hr {
width:400px;
height:2px;
margin:auto;
border-style:ridge;
border-color:#787cc5;
margin-top:15px;

}

/*Formulaire*/
#principale form#example {
	width:450px;
	margin:auto;
	padding-top:20px;
	font-family: Georgia, "Times New Roman", Times, serif;
}

#principale form#example legend{
	font-weight:bold;
	font-size:14px;
	padding:0 2px;
	background-color:#ffc774;
	-moz-border-radius:3px;
}

#principale form#example fieldset{
	margin-bottom: 10px;
	border-width:5px;
	border-color:#00008B;
	background-color:#F0F8FF;
	
}

#principale form#example input[type='radio'],#principale form#example input[type='checkbox']{	
	margin-top:12px;
}

#principale form#example label {
	display: inline-block;
	line-height: 1.8;
	vertical-align: top;
	color:black;
	padding:5px;
	text-align:left;
}

#principale form#example ol{
	margin:0;
	padding:0;
}

#principale form#example ol li{
	list-style-type:none;
}

#principale form#example input[type='text']{
width:190px;
}

/*Formulaire class*/

/*Personnel*/
#principale form#example fieldset#personnel ol label{
width:120px;
margin-left:15px;
}

#principale form#example ol input{
margin-top:10px;
}


/*information du site*/
#principale form#example fieldset ol label.web{
width:80px;
margin-left:15px;
}

#principale form#example fieldset ol label.choix{
width:30px;
padding-left:10px;
}

#principale form#example fieldset p#oui,#principale form#example fieldset p#non{
margin-left:15px;
margin-top:5px;
}

#principale form#example fieldset p#oui input ,#principale form#example fieldset p#non input {
margin-top:10px;
padding-bottom:3px;
}

/*specification*/


#principale form#example fieldset#specification ol label.inspirant {
width:150px;
margin-left:15px;
padding-right:5px;
}

/*Langue*/
#principale form#example fieldset#specification ol label.langue{
width:80px;
margin-left:15px;
padding-right:5px;
}

#principale form#example fieldset#specification ol label.langage{
margin-left:115px;
padding-right:8px;
}

#principale form#example fieldset#specification ol input.box{
margin-left:10px;
}


/*Genre*/
#principale form#example fieldset#specification ol input.genreSite{
margin-left:149px;
}

#principale form#example fieldset#specification ol label.genre{
margin-left:15px;
width:120px;
}


/*contenu*/
#principale form#example fieldset#specification ol input.contenu{
margin-left:224px;
}

#principale form#example fieldset#specification ol label.gestion{
margin-left:15px;
width:195px;
}



/*Editeur*/
#principale form#example fieldset#specification ol label.editeur{
margin-left:15px;
width:140px
}

#principale form#example fieldset#specification ol input.edit{
margin-left:169px;
}


/*hebergement*/

#principale form#example fieldset#specification ol label.hebergement{
margin-left:15px;
width:140px;
}

#principale form#example fieldset#specification ol input.heberg{
margin-left:169px;
}


/*document*/

#principale form#example fieldset#specification ol label.document{
margin-left:15px;
width:220px;
}

#principale form#example fieldset#specification ol input.sources{
margin-left:249px;
}

/*commentaire*/

#principale form#example fieldset#specification ol label.commentaire{
margin-left:15px;
}

#principale form#example fieldset#specification ol textarea#iCommentaire{
margin-left:20px;
}

/*Formulaires stable*/
/*#principale form#example ol li:hover {
	background-color:#aabbcc;
}*/

#principale form#example li#commentaire{
padding:2px;
padding-bottom:20px;
}


#principale form#example span.error {
	display: block;
	float: right;
	margin-right:20px;
	color: #cc0000;
	font-weight: 600;
	font-size:10px;
	margin-top:10px;
	text-align:center;
	width:120px;
}

#principale form#example input.error {
	border: 1px solid #cc0000;
	background-color: #ffffff;
}

#principale form#exemple {
	width:490px;
	margin:auto;
	padding-top:20px;
	font-family: Verdana, Geneva, sans-serif;
}

#principale form#exemple legend{
	font-weight:bold;
	font-size:16px;
	padding:0 2px ;
	background-color:#DCDCDC;
	-moz-border-radius:3px;
}

#principale form#exemple fieldset{
	margin-bottom: 15px;
	border:5px solid ;
	border-width:5px;
	border-color:#000000;
	background-color:#F0F8FF;
	padding-bottom:15px;
}

#principale form#exemple label {
	width: 120px;
	display: inline-block;
	color:black;
	text-align:left;
	padding-left:15px;
	padding:10px;
	margin-left:15px;
	font-size:12px;
}

#principale form#exemple input[type='text']{
width:180px;
}

#principale form#exemple textarea{
margin-left:25px;
}

#principale form#exemple input[type='radio'],#principale form#exemple input[type='checkbox']{	
	margin-top:12px;
}

#principale form#exemple input[type='button']{
margin-left:27px;

}
#principale form#exemple ol{
	margin:0;
	padding:0;
	padding-top:10px;
}

#principale form#exemple ol li{
	list-style-type:none;

}



#principale form#exemple span.error {
	display: block;
	float: left;
	margin-left: 20px;
	color: #cc0000;
	font-weight: 600;
}

#principale form#exemple input.error {
	border: 1px solid #cc0000;
	background-color: #ffffff;
}

hr {
	width:400px;
	height:2px;
	margin:auto;
	border:1px solid;
	border-color:black;
	margin-top:15px;
}

/*Formulaire avec classe*/

#principale form#exemple fieldset#information ol li{
	border:2px solid #778899;
	border-width:0px 0px 1px 0px;
	padding:3px;
}


#principale form#exemple fieldset#description label.domaine{
height:2px;
width:100px;

}

#principale form#exemple fieldset#description label {
width:160px;
}

/*LANGUE*/
#principale form#exemple fieldset#description label#langue,#principale form#exemple fieldset#description label.langue{
width:60px;
}

#principale form#exemple fieldset#description label.langueEn{
margin-left:115px;
width:60px;
}

#principale form#exemple fieldset#description label.langueAutre{
width:85px;
}

/*SPECIFICATION*/
#principale form#exemple  label.specs{
width:180px;
}

#principale form#exemple fieldset#description label.form{
width:100px;
}

#principale form#exemple fieldset#description label.formStand{
width:50px;
height:10px;
}

#principale form#exemple fieldset#description input.formulaire{
margin-left:137px;
}

#principale form#exemple fieldset#description label.formulaire{
width:75px;
height:10px;
}

#principale form#exemple fieldset#description input.specification{
margin-left:160px;
padding:0;
}

#principale form#exemple fieldset#description label.specification{
height:20px;
padding:0;
width:80px;
}

#principale form#exemple fieldset#description label.specsWidth{
width:120px;
}

/*Formulaire information*/
#form_info{
padding-top:50px;
padding-left:40px;
padding-bottom:50px;
width:710px;
}
#form_info fieldset{
padding-bottom:50px;
padding-left:60px;
border:5px solid ;
border-width:5px;
border-color:orange;
background-color:#F0F8FF;
}
#form_info ul{
list-style-type:none;
}
#form_info li{
padding-top:20px;
}
#form_info label{
	width: 130px;
	display: inline-block;
}

#form_info span.error {
	display: block;
	float: right;
	margin-right:20px;
	color: #cc0000;
	font-size:10px;
	margin-top:10px;
	text-align:center;
	width:120px;
}

#form_info input.error {
	border: 1px solid #cc0000;
	background-color: #ffffff;
}



/* Medias Imprimes*/


#media{
width:750px;
margin:auto;
margin-top:25px;
}

#mediaTop{
width:750px;
height:180px;}

#mediaTop img{
float:left;}

#media h2{
font-family:Arial;
color:#7a7879;
font-size:16px;
padding-top:30px;
padding-bottom:10px;
}

#media img{
border:none;}


.secondImgOffre{
padding-top:20px;
}


/* Marketing Web */ 

#marketingWeb{
width:790px;
padding-top:30px;
}

#marketingG{
width:236px;
height:390px;
margin-left:20px;
float:left;
background-image:url('../images/marketing/marketingwebgauche.png');
background-repeat:no-repeat;}

#marketingD{
width:513px;
height:433px;
margin-left:15px;
float:left;}

#marketingDHaut{
width:450px;
height:141px;
padding:10px;
margin-left:3px;
font-size:14px;
color:#131357;
background-image:url('../images/marketing/marketingwebcadre.jpg');
background-repeat:no-repeat;
float:left;}

#marketingBouton{
width:450px;}

#marketingBouton img, #marketingBouton p{
float:right;}

#marketingBouton p{
width:281px;
padding-right:10px;}

#marketingDBas{
width:513px;
height:221px;
margin-top:35px;
float:left;}

#marketingDBas a{
float:left;}



/* Sitemap */

#sitemap{
width:760px;
height:20px;
padding-top:5px;
margin:auto;
font-size:10px;
color:grey;
text-align:center;}

#sitemap a{
color:grey;
margin-right:5px;
padding-right:5px;
border-right: 1px grey solid;
}

#sitemap .last{
border:none;}

#sitemap ul{
padding-left:5px;
display:block;}

#sitemap ul li ul{
padding-left:5px;
display:block;}