/* GENERAL PROPERTIES : il vaut mieux definir ici le format par defaut de tous les elements */
body, div, h1, h2, h3, h4, h5, h6, ul, li, p, img, a, table, tr, td {
  font-family: arial narrow, arial, sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: url(images/bg.gif) repeat;
  color: #505050
}

h1 {
  font-size: 25px;
  color: #ffffff;
  display: inline;
}

h2 {
  font-size: 20px;
  line-height: 22px;
  color: #9a9797;
  display: inline;
}

h3 {
  font-size: 15px;
  color: #9a9797;
}

h4 {
  font-size: 25px;
  color: #ffffff;
  margin: 0 0 15px 0;
}

p {
  color: #ffffff;
  font-family: arial;
  font-size: 15px;
}

table {
  border-collapse: collapse;
}

ul {
  list-style-type: none;
}

a {
  color: #888888;
  text-decoration: none;
}

a:hover { /* A renseigner */
  
}

a:visited { /* A renseigner */
  
}

#page { /* J'AI VIRE CES DECLARATIONS DES HEADER, CONTENU ET FOOTER ET LES AI PLACEES ICI POUR EVITER LES REDONDANCES */
  width: 990px;
  margin: auto;
}

#contenu {
  background-color: transparent;
  margin: 60px 0 0 0;
  padding: 20px 70px 50px 40px;
}

#presentation {
  position: absolute;
  margin: 30px 0 0 210px;
}

#presentation2 {
  position: absolute;
  margin: 30px 0 0 250px;
}

.titre {
  margin: 0 0 20px 0;
}



/* HEADER */
#header {
  background: url(images/header.jpg) top no-repeat #000000;
  height: 89px;
}

#header img {
  float: middle;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  border: 0;
}

#header ul {
  margin: 35px 0 0 0;
  padding: 0 0 0 0;
  height: 28px;
  width: 570px;
  background: url(images/nav.gif) no-repeat;
  float: right;
}

#header li {
  display: inline;
  padding: 0 0 0 5px;
  margin: 0 20px 0 0;
  font-size: 20px;
  color: #ffffff;
  font-style: normal;
}

.on {
  border-left: solid 1px #da0000;
}

#header a {
  text-decoration: none;
  color: 5a5a5a;
  font-style: normal;
}

#header a:hover {
  color: #ffffff;
}

#menu {
  width: 990px;
  margin: auto;
}

#menu ul {
  text-transform : uppercase; 
}


/* ACCUEIL */
#btaccueil {
  margin: 58px 0 0 220px;
  padding: 0 0 0 0;
}

#perso {
  float: left;
  margin: 0 0 0 0;
}

#intro {
  position: relative;
  width: 990px;
  height: 343px;
  float: right;
  background: url(images/bg_accueil.jpg) no-repeat;
}


/* PORTFOLIO*/
.nav {
  margin: 40px 4px 0 0;
  padding: 5px 13px 5px 13px;
  float: left;
  font-size: 25px;
  color: #ffffff;
  background-color: #787878;
}

.nav a {
  color: #ffffff;
}

.actif {
  margin: 40px 4px 0 0;
  padding: 5px 13px 5px 13px;
  float: left;
  font-size: 25px;
  color: #505050;
  background-color: #ffffff;
}

.travaux {
  width: 850px;
  text-align: left;
  padding: 20px 0 20px 0;
}

.travaux p {
  width: 350px;
  height: 157px;
  color: #9a9797;
}

.travaux a {
  color: #ffffff;
  text-decoration: underline;
}

.travaux img {
  position: relative;
  float: right;
}

.travaux2 {
  width: 850px;
  text-align: left;
  padding: 40px 0 40px 0;
}

.travaux2 p {
  width: 350px;
  height: 101px;
}

.travaux2 a {
  color: #505050;
  text-decoration: underline;
}

.travaux2 img {
  position: relative;
  float: right;
}

.detail {
  width: 850px;
  text-align: left;
  padding: 40px 0 40px 40px;
}

.detail img{
  margin: 40px 0 40px 0;
}

.detail a {
  color: #ffffff;
}

#pagination {
  width: 800px;
  text-align: center;
}

#pagination a {
  color: #ffffff;
}



/* SERVICES */

#intro2 {
  position: relative;
  width: 990px;
  height: 343px;
  float: right;
  margin: 0 0 50px 0;
  background: url(images/bg_accueil.jpg) no-repeat;
}

#services p {
  font-size: 15px;
  color: #9a9797;
}

#colonne {
  width: 380px;
  margin: 0 0 0 30px;
}

#colonne2 {
  width: 380px;
  position: relative;
  float: right;
  margin: 0 30px 0 0;
}

#services img{
  margin: 15px 10px 0 0;
}


/* CONTACT */
#contact {
  width: 900px;
  margin: 50px 0 25px 23px;
}

#form {
  padding: 0 0 0 23px;
}

#form p {
  font-size: 18px;
  color: #ffffff;
  padding: 20px 0 0 0;
}

.champ {
  width: 350px;
  background: #6b6b6b;
  border: 0 solid #b1b1b1;
  padding: 5px 5px 5px 5px;
  margin: 5px 0 0 0;
  font-size: 15px;
  color: white
}

.message {
  width: 500px;
  height: 100px;
  background: #6b6b6b;
  border: 0 solid #b1b1b1;
  padding: 5px 10px 5px 10px;
  margin: 5px 0 0 0;
  font-family: arial, sans-serif;
  font-size: 15px;
  color: white
}

input[type=submit], input[type=reset] {
  border: 0;
  width: 108px;
  height: 37px;
  background: url(images/bt_send.gif);
  color: white;
  padding: 0 0 5px 25px;
  margin: 20px 0 0 415px;
}

input[type=submit]:hover, input[type=reset]:hover {
  border: 0;
  width: 108px;
  height: 37px;
  background: url(images/bt_send.gif);
  color: white;
  padding: 0 0 5px 25px;
}

input[type=submit]:active, input[type=reset]:active {
  border: 0;
  width: 108px;
  height: 37px;
  background: url(images/bt_send.gif);
  color: white;
  padding: 0 0 5px 25px;
} 


/* FOOTER  */
#footer {
  float: left;
  margin: 55px 0 100px 60px;
}

#footer ul {
  margin: 6px 0 0 0;
}

#footer li {
  display: inline;
}

#footer p {
  font-size: 11px;
  color: #737373;
}

#footer a {
  font-family: arial;
  font-size: 11px;
  color: #737373;
}

.signature {
  text-align: left;
  width: 570px;
  margin: 0 0 0 330px;
}

#liens {
  text-align: left;
  position: relative;
  width: 440px;
  margin: 30px 0 0 0;
  float: right;
}

.reseaux {
  position: absolute;
}

.blog {
  position: absolute;
  margin: 0 0 0 125px;
}


/* FOOTER PORTFOLIO */
#footer2 {
  background-color: #000000;
  text-align: center;
  padding: 30px 0 20px 0;
  margin: 0 0 100px 0;
}

#footer2 ul {
  height: 50px;
  margin: 30px 0 0 0;
}

#footer2 li {
  display: inline;
}

#footer2 p {
  font-size: 12px;
  color: #737373;
}

#footer2 a {
  font-size: 12px;
  color: #737373;
}