/* Normalisation */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, p, td {
margin: 0;
padding: 0;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}

ul, ol {
list-style: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

fieldset, img {
border: 0;
}

.clear {
display: block;
clear: both;
height: 1%;
}

/* fin normalisation */


body {
background: #d5e5f2;
text-align: center;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
font-size: 11px;
}

a:link, a:hover, a:visited {
color: #000;
text-decoration: underline;
}

div {
}

#content {
text-align: left;
width: 1024px;
margin: 0 auto;
background: #2B5F8C;
}

#header {
background: url(images/la-solution-web.png) no-repeat right top;
height: 244px;
}

#logo {
text-align: center;
}

#logo a {
display: block;
height: 269px;
background: url(images/logo.png) no-repeat top left;
}

#logo h1 {
display: none;
}

#menu {
width: 160px;
float: left;
background: #82B0D9 url(images/degrade_menu.png) repeat-y left top;
font-size: 127.27%;
margin: 29px 0 0 0;
font-family: Arial, sans-serif;
}

#menu .top {
background: url(images/arrondi_menu-gauche_haut.png) no-repeat left top;
height: 6px;
}

#menu .bottom {
background: url(images/arrondi_menu-gauche_bas.png) no-repeat left bottom;
height: 7px;
}

#menu ul li {
display: block;
border-bottom: 1px solid #557898;
}

#menu ul li a {
text-decoration: none;
color: #d5e5f2;
display: block;
padding: 5px 0 5px 20px;
background: url(images/puce.png) no-repeat 5px 10px;
}

#menu ul li.last {
border-bottom: none;
}

#menu ul li a:hover, #menu ul li a.selected {
color: #d5e5f2;
background-color: #284259;
}

#contenu {
width: 820px;
float: left;
margin: 0 0 0 10px;
border: 0;
position: relative;
}

#menu2 {
text-align: center;
}

#menu2 ul li {
float: right;
width: 130px;
display: inline;
height: 29px;
margin: 0 0 0 5px;
}

#menu2 ul li a {
display: block;
padding: 6px 0 0 0px;
background: url(images/menu_off.png) no-repeat top left;
height: 23px;
width: 130px;
color: #d5e5f2;
font-size: 127.27%;
font-weight: bold;
text-decoration: none;
}

#menu2 ul li a:hover, #menu2 ul li a.selected {
background: url(images/menu_on.png) no-repeat top left;
color: #2b5f8c;
}

#texte {
background: #d5e5f2;
min-height: 300px;
padding: 10px;
color: #284259;
clear: both;
position: relative;
}

#texte h2 {
font-size: 218.18%;
border-bottom: 3px solid #2b5f8c;
margin: 0 0 15px 0;
}

#texte div.print {
background: url(images/printer.png) no-repeat left top;
height: 16px;
width: 16px;
float: right;
position: relative;
top: -40px;
}

#texte div.print a{
text-decoration: none;
display: block;
height: 16px;
width: 16px;
}

#tout {
padding: 10px;
position: relative;
}

div#wrap {
width: 630px;
margin: 10px auto;
}

div.sites_home h3 {
margin: 0;
background: url(images/degrade.png) repeat-x top left;
text-align: center;
color: #fff;
text-transform: uppercase;
font-size: 127.27%;
height: 30px;
}

div.sites_home h3 a:link, div.sites_home h3 a:hover, div.sites_home h3 a:visited {
color: #fff;
padding: 8px 0 0 0;
text-decoration: none;
display: block;
height: 22px;
}

div.sites_home {
width: 200px;
float: left;
margin: 20px 15px 0 0;
background: #fff;
}

div.sites_home#boutique {
margin-right: 0;
}

div.sites_home p.texte a {
color: #284259;
text-decoration: none;
}

div.sites_home p.texte {
padding: 5px;
font-size: 127.27%;
}

div.sites_home span.prix span {
font-size: 222.22%;
font-weight: bold;
}

div.sites_home span.prix {
background: #98b465;
padding: 3px;
color: #fff;
text-transform: uppercase;
text-align: center;
display: block;
font-size: 81.81%;
}

div#autres {
clear: both;
text-align: center;
font-size: 127.27%;
padding: 30px 0 0 0;
}

div#autres a:hover {
text-decoration: underline;
}

div#autres a {
color: #658d2c;
font-weight: bold;
text-decoration: none;
}

.accroche {
font-size: 163.63%;
font-style: italic;
text-align: center;
}

.interieur {
-position: relative;
}

.interieur p {
background: url(images/pin.png) no-repeat left top;
text-indent: 25px;
margin: 0 0 10px 0;
font-size: 118.18%;
}

.interieur h3 {
font-size: 145.45%;
margin: 10px 0;
}

.interieur .inclus, .interieur .options {
background: #fff;
width: 305px;
float: left;
-position: relative;
}

.interieur .inclus {
margin: 0 80px 0 0;
}

.interieur .inclus ul, .interieur .options ul {
padding: 10px 7px;
font-size: 127.27%;
-position: relative;
}

.interieur .inclus ul li, .interieur .options ul li {
background: url(images/accept.png) no-repeat left 4px;
padding: 0 0 0 25px;
margin: 0 0 5px 0;
min-height: 21px;
}

.interieur .options ul li {
background: url(images/add.png) no-repeat left 4px;
border-bottom: 1px solid #2b5f8c;
padding-top: 2px;
}

.interieur .options ul li span.option {
display: block;
width: 200px;
-position: relative;
float: left;
}

.interieur .options ul li span.option span.infobulle {
display: none;
}

.interieur .options ul li span.option:hover {
/* cursor: help; */
}

.interieur .options ul li span.option:hover span.infobulle {
display: inline;
background: #fff;
position: absolute;
bottom: 10px;
left: 60px;
padding: 5px;
white-space: nowrap;
border: 1px solid #2b5f8c;
}

.interieur .options ul li span.prix {
float: right;
/* position: relative;
top: -17px; */
color: #2b5f8c;
} 

.interieur .inclus h3, .interieur .options h3, #texte #devis h3, #texte #demande h3 {
margin: 0;
background: url(images/degrade.png) repeat-x top left;
text-align: center;
color: #fff;
text-transform: uppercase;
font-size: 127.27%;
height: 22px;
padding: 8px 0 0 0;
}

.detail {
width: 690px;
margin: 0 auto;
position: relative;
}

#actions {
width: 580px;
margin: 20px auto 0 auto;
text-align: center;
}

#actions .jeveux .gauche {
background: url(images/arrondi_gauche.png) no-repeat left top;
height: 31px;
width: 11px;
float: left;
}

#actions .jeveux .droite {
background: url(images/arrondi_droit.png) no-repeat left top;
height: 31px;
width: 11px;
float: left;
}

#actions .jeveux {
width: 240px;
margin: 0 auto;
}

#actions .jeveux a {
display: block;
float: left;
height: 24px;
background: url(images/degrade.png) repeat-x left top;
color: #fff;
font-family: Verdana, sans-serif;
font-size: 127.27%;
text-decoration: none;
padding: 7px 5px 0 5px;
}

#actions .jeveux a:hover {
text-decoration: underline;
}

#actions .perso {
clear: both;
padding: 10px 0 0 0;
}

#actions .perso a {
color: #2b5f8c;
text-decoration: none;
font-family: Verdana, sans-serif;
font-size: 109.09%;
padding: 0 0 4px 20px;
background: url(images/hand_point.png) no-repeat left top;
height: 16px;
}

#actions .perso a:hover {
text-decoration: underline;
background: url(images/hand_modif.png) no-repeat left top;
}

div.prix {
background: url(images/bulle.png) no-repeat left top;
width: 178px;
height: 86px;
margin: 0 auto;
font-family: Verdana, sans-serif;
font-weight: bold;
font-size: 327.27%;
color: #fff;
text-align: center;
padding: 20px 0 0 0;
}

/* Styles pour page Réalisations */

h3.realisations {
margin: 10px 0 7px 0;
font-size: 145.45%;
}

ul.realisations {
list-style-type: square;
margin: 0 0 0 20px;
}

ul.realisations li {
padding: 0 0 0 0;
}

ul.realisations li a {
text-decoration: none;
font-size: 127.27%;
}

ul.realisations li a:hover {
text-decoration: underline;
}

/* fin styles page réalisations */

/* styles pour la page Compétences */
.competence h3 {
margin: 10px 0 7px 0;
font-size: 145.45%;
}

.competence p{
font-size: 109.09%;
}

.competence p a {
text-decoration: none;
display: block;
margin: 8px 0 8px 25px;
background: url(images/puce.png) no-repeat left center;
padding: 0 0 0 15px;
}

.competence p a:hover {
text-decoration: underline;
}

.competence p.condition {
font-size: 91.66%;
}

.competence ul {
list-style-type: square;
margin: 10px 0 0 20px;
}

.competence ul li a {
text-decoration: none;
font-size: 127.27%;
}

.competence ul li a:hover {
text-decoration: underline;
}

/* fin styles page compétences */

/* styles page forum */

.forum p {
font-size: 109.09%;
margin: 10px 0;
}

.forum p a {
text-decoration: none;
}

.forum p a:hover {
text-decoration: underline;
}

.forum p.important {
text-align: center;
margin: 30px 0 0 0;
}

.forum p.important a {
font-size: 133.33%;
font-weight: bold;
}

/* fin styles page forum */

/* Formulaire de contact */
#form_contact {
margin: 20px 0;
position: relative;
}

#form_contact p {
position: relative;
}

#form_contact label {
display: block;
width: 90px;
font-weight: bold;
float: left;
position: relative;
cursor: pointer;
}

#form_contact input {
width: 150px;
position: relative;
z-index: 100;
}

#form_contact input, #form_contact textarea {
margin: 0 0 3px 0;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 100%;
color: #284259;
border: 1px solid #82B0D9;
}

#form_contact input.submit {
width: 130px;
margin: 10px 0 0 90px;
background: url(images/degrade.png) repeat-x left top;
border: 0;
height: 26px;
color: #d5e5f2;
font-size: 109.09%;
cursor: pointer;
}

#form_contact input.submit:hover {
border: 1px solid #284259;
}

div#erreur {
color: #f00;
}

div#recaptcha {
margin: 10px 0 0 90px;
}

/* Fin Formulaire de contact */

/* Formulaires de demande de site - devis */

form#demande, form#devis {
width: 500px;
margin: 0 auto;
text-align: center;
}

form#demande fieldset.vous, form#devis fieldset.vous {
border: 1px solid #2B5F8C;
border-top: 0;
padding: 10px;
text-align: left;
}

form#demande fieldset.vous label, form#devis fieldset.vous label{
clear: both;
float: left;
width: 150px;
display: block;
margin: 0;
padding: 0;
cursor: pointer;
}

form#demande fieldset.vous input, form#devis fieldset.vous input {
float: left;
margin: 0 0 2px 0;
width: 190px;
}

form#demande fieldset.options {
text-align: left;
}
/*
form#demande h3, form#devis h3 {
font-size: 150%;
color: #DCDCDC;
font-variant: small-caps;
background-color: #191970;*/
/* margin: 15px auto 0 auto; *//*
width: 424px;
text-align: center;
}*/

form#demande fieldset input, form#demande fieldset label {
margin: 0 5px 0 0;
}

form#demande div.option {
width: 200px; 
float: left;
}

form#devis label {
font-weight: bold;
cursor: pointer;
}

form#demande label {
cursor: pointer;
}

form#devis label.projet, form#demande label.commentaire {
margin: 0;
background: url(images/degrade.png) repeat-x top left;
text-align: center;
color: #fff;
text-transform: uppercase;
font-size: 127.27%;
height: 22px;
display: block;
padding: 8px 0 0 0;
}

form#devis fieldset.vous label {
font-weight: normal;
}

form#devis input.submit, form#demande input.submit {
width: 130px;
margin: 15px 0 0 0;
background: url(images/degrade.png) repeat-x left top;
border: 0;
height: 26px;
color: #d5e5f2;
font-size: 127.27%;
cursor: pointer;
}

form#devis input.submit:hover, form#demande input.submit:hover {
border: 1px solid #284259;
}

div.erreur {
padding: 5px;
background: #e6e6fa;
border: 1px solid #fff;
margin: 20px auto 20px auto;
width: 50%;
color: #191970;
position: relative;
}

div.erreur h3 {
font-weight: bold;
color: #191970;
margin: 0;
font-size: 120%;
text-align: center;
}

input, textarea {
border: 1px solid #7e91b1;
font-family: "Trebuchet MS", Arial, sans-serif;
color: #183360;
padding: 0;
margin: 0;
}

form#demande textarea, form#devis textarea {
width: 494px;
font-size: 100%;
padding: 2px;
} 

input[type=checkbox] {
border: 0;
}

/* fin de styles pour formulaires de demande de site / devis */

#copyright a {
color: #fff;
text-decoration: none;
}

#copyright a:hover {
text-decoration: underline;
}

#validation {
position: absolute;
left: 10px;
bottom: 30px;
}

#copyright {
text-align: right;
padding: 5px 15px 0 0;
color: #fff;
clear: both;
}