/* 
style.css
---------
by Florian POILVE, design by Vincent ANTUNES
*/

body
{
    font-family: Calibri, sans-serif;
	margin: auto;	
}

/* Retire l'effet du strong en gras */
strong
{
	font-weight:normal;
}

span
{
	font-weight:bold;
}

/* Bande du haut */
#top
{
	position:absolute;
	top:0;
	width:100%;
	min-width:100px;	
}

#top img
{
	position: relative;
	top: 3px;
	left: 84%;
}

/* En-tête */
header
{
	width:100%;
	min-width:1000px;
}

#logo
{
	position :relative;
	top:0px;
	width:20%;
	padding-left: 10%;
	
}

/* Menu de navigation */
nav
{
	display: inline-block;
	width:62%;
	text-align:center;
}

nav li
{
	position :relative;
	top:0px;
	display: inline-block;
	vertical-align:bottom;
	width:23%;
	height:100px;
}

nav p
{ 
	position :relative;
	top: 15px;
}
nav a
{
    font-size: 22px;
    color: #365f91;
    text-decoration: none;
}

nav a:hover
{
	position:relative;	
	font-weight: bold;
}

/* Accueil */
#accueil
{
	position:fixed;
	top:180px;
	height:80%;
	overflow:hippen;
	background-color: #F2F2F2;
}

#accueil h1, #accueil h2
{
	text-transform : uppercase ;
	color:#365f91;
	padding:0% 10%;
	font-size:17px;
}

#accueil p
{
	text-align:justify;
	padding:0% 10%;
	font-size:17px;
}

#photo
{
	position: relative;
	top: -40px;
	width:100%;	
}
/* contact */

#contact
{
	width:880px;
	margin:auto;	
	background-color: #F2F2F2;
}

#fond_contact
{
	background-color: #F2F2F2;
}

.adresse
{
	
	display: inline-block;
	width: 300px;
	background-color: #F2F2F2;
	padding: 20px;
	color: #696969;
	font-size: 14px;
}

.adresse h2
{
	border-bottom: 2px dotted #696969;
	font-weight: normal;
}
.formulaire 
{	
	display: inline-block;
	vertical-align: top;
	width: 470px;
	background-color: #F2F2F2;	
	margin: 0px 10px;
	padding: 0px 20px 20px 20px;
}

.formulaire h1
{
	margin-right:70px;
	display: inline-block;
	font-weight: normal;
	color:#4682b4;
}
.formulaire h2
{
	display: inline-block;
	font-weight: normal;
	color:#696969;
	font-size:20px;
}
form
{	
	position: relative;
	height : 400px;
	width : 470px;
	background-color: #F2F2F2;
}

form input,form textarea
{
	display: inline-block;
	position: absolute;
	right: 0;
	margin: 10px 20px 0px 0px;
	padding: 2px;
	border: 1px solid #CCC;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	outline: none; /* Retire la bordure de base sur certain navigateur */	
}

form input:focus, form textarea:focus {
  border-color: rgba(82, 168, 236, 0.75);
  -moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
  -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
  box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
}


form label
{
	display: inline-block;
	margin: 10px 0px 0px 20px;
}

form #bouton_envoyer
{
	position: absolute;
	bottom: 15px;
}

/* Entreprise */
#entreprise
{	
	padding:0% 10%;
	font-size:17px;
	min-width:800px;
	background-color: #F2F2F2;
}

#entreprise h1, #entreprise h2
{
	text-transform : uppercase ;
	color:#365f91;
}

#entreprise p
{
	text-align:justify;
}

#entreprise li strong, #entreprise a:hover strong /* On veut que la liste soit en gras*/
{
	font-weight:bold;
}


#entreprise ul
{	
	vertical-align:top;
	font-weight:bold;
	display: inline-block;
}

#photo_camion
{
	position:relative;
	top:0px;
	left:25%;
	display:inline-block;
	max-width:560px;
	max-height:400px;
	width:50%;
	border-radius: 5px 5px;
	
}


#entreprise a
{
    color: #000000;
    text-decoration: none;
}

#entreprise a:hover
{
	font-weight: bold;
}


/*Chantiers*/
#chantier table
{
	margin : auto;
}

#chantier img
{
	width:250px;
	height:160px;
	border-radius: 5px 5px;
}

#chantier
{	
	padding:0% 10%;
	font-size:17px;
	text-align:justify;
	min-width:900px;
	background-color: #F2F2F2;
}

#chantier h1
{
	position:relative;
	color:#365f91;
	
}

#chantier a
{
    color: #000000;
    text-decoration: none;
}

#chantier a:hover
{
	font-weight: bold;
}

#overlay 
{
	display : none; /* Par défaut, on cache l'overlay */
	
	position: fixed;
	z-index:1; /* cache le numéro en overlay */
	top: 0; 
	left: 0;
	width: 100%; 
	height: 100%;
	color:white;
	font-size:20px;
	text-align: center; /* Pour centrer l'image que l'overlay contiendra */

	/* Ci-dessous, nous appliquons un background de couleur noire et d'opacité 0.6. Il s'agit d'une propriété CSS3. */
	background-color: rgba(0,0,0,0.6);
}

#prev
{
	display : none;
	
	position: fixed;
	top:40%;
	left:8%;
	width:200px;
	height:200px;
	z-index:2;
}

#next
{
	display : none;
	
	position: fixed;
	top:40%;
	right:8%;
	width:200px;
	height:200px;
	z-index:2;
}

#overlay img
{
	margin-top: 40px;
	width:60%;
	min-width:400px;
	border-radius: 5px 5px;
}

/* traitement */
#traitement 
{
	border: 3px solid #d8d8d8;
	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 15px;
	font-size: 1.2em;
	text-align: center;
	margin: 20px;
	color: #365f91;
}

/* Blog */
#blog
{	
	padding:0% 10%;
	font-size:17px;
	min-width:800px;
	background-color: #F2F2F2;
}

#blog h1
{
	text-transform : uppercase ;
	color:#365f91;
}

#blog p
{
	text-align:justify;
}

#photo_terrasse
{
	position:relative;
	top:0px;
	left:30%;
	display:inline-block;
	max-width:560px;
	max-height:300px;
	width:50%;
	border-radius: 5px 5px;
	
}

#blog a
{
    color: #365f91;
    text-decoration: none;
}

/* Anti cache */
#anti_cache
{
	height:150px;
}

/* Mentions */

#page_mentions
{
	padding:0% 10%;
	font-size:17px;
	background-color: #F2F2F2;
}

#page_mentions h1
{
	text-transform : uppercase ;
	color:#365f91;
}

#page_mentions p
{
	text-align: justify;
}

/* Footer */
footer
{
	position: fixed;
	bottom:-10px;
	background-color:#FFFFFF;
	padding:0% 10%;
	min-width:900px;
}

#footer_text
{	
	width: 55%;
	display: inline-block;
	font-size: 15px;
	color:#000000;
	text-align:justify;
}

#bloc_logos
{
	position: relative;
	width:40%;
	display: inline-block;
	vertical-align:top;
}

#logo_qualibat
{
	position: absolute;
	right:40%;
	top:-27px;
	display: inline-block;
	vertical-align:top;
}

#logo_artisan
{
	position: absolute;
	right:-15px;
	margin-top: 1.5%;
	display: inline-block;
	vertical-align:top;
}

#bloc_contact
{
	position: absolute;
	top:50%;
	display: inline-block;
	vertical-align:top;
	text-align:center;
	width:31%;
	font-size: 20px;
	font-size: 100%;
	color:black;
}

#bloc_contact em
{
	padding:0px;
	font-style : normal;
	color:#6495ed;
}

footer #mentions
{
	padding-bottom:4px;	
	text-align:center;
	font-size: 12px;
	color:#a9a9a9;
}

footer a
{
	color:#a9a9a9;
    text-decoration: none;
}