/*
Design site DESSINEO par Julien BERNARD
15/01/2016
*/

html, body {
 margin: 0;
 padding: 0;
 }
body {
 background-color: white; 
 font-family: Open Sans, Verdana, sans-serif; 
 font-size: 170%;
 margin:auto; 
}
.clr { clear: both; }

h1 {
 font-size: 140%;
 font-weight: bold; 
 color: #000000; 
 text-align: center;
 padding-top:20px;
 padding-bottom:20px;
 }
h2 {
 font-size: 110%; 
  font-weight: bold; 
 color: #000000; 
 text-align: center;
 padding: 0px 15px 15px 15px;
 }
 h3 {
 font-family: Open Sans, Verdana, sans-serif;
 font-size: 120%; 
 color: #b15336; 
 text-align: center;
 padding-top:10px;
 padding-bottom: 10px;
 }
 h4 {
 font-family: Open Sans, Verdana, sans-serif;
 font-size: 130%; 
 font-weight:bold;
 color: #b15336;  
 text-align: center;
 padding-top:10px;
 padding-bottom: 50px;
 }
p{
 color: #000000; margin-bottom: 25px;
 }
p span{font-size: 100%;
 font-weight:bold;
 color: #ffffff;
 background: rgb(0, 0, 0); /* fallback color */
 background: rgba(0, 0, 0, 0.7);
 padding: 7px;
 }

 .customer {
color: #98ff8a;
}
.us {
color: #ead24c;
}
.quote {
color: #6a3f15;
font-size: 105%;
font-weight: bold;
}
.pcd {
text-align:center;
color: #a54122;
font-size: 100%;
font-weight: bold;
}
.pcd2 {
text-align:center;
color: #000000;
font-size: 90%;
}

ul,li,td {
 color: #000000; padding-left: 20px;padding-bottom:10px;
 }

 
a{ color: #b15336; padding : 5px 5px 5px 5px;} 
a:link {}
a:visited { }
a:hover { color: #7fb4ca; text-decoration:underline;}
a:active, a:focus {
 color: red;
}

#header {padding-top: 15px; padding-bottom: 15px;width:1000px;margin:auto;background-color: white;}
#droite{float:right;border: 1px solid black;}

#menu {padding-top: 0px; padding-bottom: 5px;margin:auto;background-color: black;}
	#menu li { float: left; color: #000000; text-transform: uppercase;padding : 0px 20px 0px 20px; list-style: none;  }
		#menu li a { color: #ffffff; } /*Titres des Menus*/
			#menu li a.current, #menu li a:hover { color: #7fb4ca; font-weight: bold;}		/*Menu actif ou sur le point d'être sélectionné*/

#band1000 {padding-top: 20px; padding-bottom: 20px;width:1000px;margin:auto;}
#cta100 {padding-top: 100px;}
#cta350 {padding-top: 350px;}
#border1000 {padding: 5px 5px 5px 5px; margin:auto;border: 1px solid black;}

#partage {width : 200px;
position: fixed;
font-size: 80%;
right: 0;
bottom: 20%;}

#text { font-size: 80%;}

#banner { height: 500px; background:url(http://www.dessineo.fr/images/banner-main.jpg) center no-repeat; background-color: #88a3be; margin:auto;}
#banner p{ text-align:center;color: #ffffff; font-size: 140%; }

#banner2 { height: 500px; background:url(../images/banner-main-2.jpg) center no-repeat; background-color: #000000; margin:auto;}
#banner2 p{ text-align:center;color: #ffffff; font-size: 120%; }

#bloctitre { width: 550px;  padding: 10px 10px 10px 10px; }

#blocend { height: 280px; width: 1000px; background:url(../images/banner-end.jpg) center no-repeat;background-color: black; margin:auto;}

#separateur { height: 20px;background:url(../images/separateur.png) center no-repeat; margin:auto;margin-top:10px;margin-bottom:10px;}

#blocquote { float: left; width: 780px;text-align: center; padding: 30px 20px 30px 20px;}

#blocavatar{float: left; width: 220px;padding-top: 15px;font-size: 90%;}
#blocavatar p{text-align:center;color: #000000;}


#colonne3 {float: left; width: 333px; text-align: center; margin: 0px 0px 0px 0px;border: 0px solid black;padding: 0px 0px 0px 0px;}
#colonne3b {float: left; width: 320px; text-align: center; margin: 0px 5px 0px 5px;border: 5px solid black;padding: 5px 5px 5px 5px;}
#colonne {float: left; width: 246px; text-align: center; margin: 2px 2px 2px 2px;}

#footer {width: 600px; float : left; text-align: center; margin: 2px 2px 2px 2px;  padding: 10px 10px 10px 10px; font-size: 80%; }

#social {float : left;width: 350px; height: 280px;}