/* normalise les marges et les remplissages  */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{
margin: 0px;
padding : 0px;
}

/* normalise les tailles de polices pour les en-têtes */
h1, h2, h3, h4, h5, h6
{
font-size : 100%;
}

/* supprime list-style pour les listes */
ol, ul
{
list-style : none;
}

/* normalise les styles et graisse de fontes */
address, caption, cite, code, dfn, em, strong, th, var
{
font-style : normal;
font-weight : normal;
}

/* supprime les bordures dans les tableaux */
table
{
border-collapse : collapse;
border-spacing : 0px;
}

/* supprime les bordures dans les éléments fieldset et img */
fieldset, img
{
border : none;
border : 0px;
}

/* aligne le texte à gauche dans caption et th */
caption, th
{
text-align : left;
}

/* supprime les apostrophes double (guillemets anglais) autour de q */
q:before, q:after
{
content :'';
}

/* supprime le souslignage des liens et les met en noir */
a
{
text-decoration : none;
color : #000;
}


html
{

}

body
{
min-width : 1100px;
text-align : center;
background : url(../images/fond_body.jpg) repeat-x #526d98;
}

#frame {
position : relative;
width : 920px;
margin : 0 auto;
text-align : left;
margin-top : 70px;
margin-bottom : 30px;
background-color : #fff5e6;
}


div#header
{
position : relative;
top : -15px;
width : 910px;
height : 300px;
margin : 0 auto;
}



div#banniere
{
position : relative;
width : 100%;
height : 240px;
}

h1 {
position : absolute;
top : -45px;
left : -85px;
width : 285px;
height : 146px;
background : url(../images/logo_soler.gif) no-repeat;
text-indent : -9999px;
z-index : 40;
}


.banniere {
position : absolute;
top : 0px;
left : 0px;
width : 910px;
height : 240px;
background : url(../images/banniere.jpg) no-repeat;
z-index : 20;
}


div#banniere p {
position : absolute;
top : -9999px;
}


div#menu_bas
{
position : relative;
width : 100%;
margin : 1em 0;
height : 60px;
}

div#corps
{
position : relative;
margin : 0 auto;
background-color : #fff5e6;
width : 900px;
z-index : 10;
}

div#contenu
{
position : relative;
padding : 1em 1em;
}

#accueil {
padding-left : 210px;
line-height : 1.5em;
}

a
{
color : red;
font-size : 105%;
}

a:focus {     /*    pour supprimer le cadre en pointillé lorsque l'on clique sur un lien    */
outline : none;
}

h2 {
text-align : center;
font-family : arial, serif;
text-transform : uppercase;
font-size : 120%;
text-decoration : underline;
margin : 1em 1em;
margin-bottom : 2em;
}

.titre_thermique {
background : url(../images/solaire-thermique.gif) 130px 0 no-repeat;
height : 70px;
width : 490px;
text-indent : -9999px;
}

.titre_photovoltaique {
background : url(../images/solaire_photovoltaique.gif) 150px 0 no-repeat;
height : 78px;
width : 600px;
text-indent : -9999px;
}

.titre_realisations {
background : url(../images/nos_realisations.gif) 240px 0 no-repeat;
height : 71px;
width : 560px;
text-indent : -9999px;
}



p {
font-size : 105%;
margin : 1em 0;
}

strong {
font-weight : bold;
}

.saut {
clear : both;
}

.right {
float : right;
margin : 0.8em;
}

.left {
float : left;
margin : 0.8em;
margin-top : 0px;
}

.important {
font-size : 110%;
line-height : 1.5em;
}

.citation {
text-align : center;
margin-right : 3em;
line-height : 1.7em;
}


/*            solaire photo                  */


.thermique {
float : right;
width : 265px;
height : 285px;
margin-left : 1em;
margin-bottom : 1em;
}

#anim_flash {
margin-left : 0.5em;
}

div.devis_photovoltaique a {
float : right;
height : 80px;
width : 200px;
margin : 0.5em;
margin-top : 200px;
background : url(../images/devis_photo.gif) no-repeat;
text-indent : -9999px;
}

div.devis_photovoltaique a:hover {
background : url(../images/devis_photo_hover.gif) no-repeat;
}

/*                   solaire thermique                  */

ul#menu_devis2 {
overflow : hidden;
}

li.devis_thermique2 {
border : none;
}

.devis_thermique2 a {
float : right;
height : 80px;
width : 200px;
margin : 0.8em;
background : url(../images/devis_thermique.gif) no-repeat;
text-indent : -9999px;
}

.devis_thermique2 a:hover {
background : url(../images/devis_thermique_hover.gif) no-repeat;
}


/*  -------------------  menu principal  ----------------------*/


#menu_bas h2
{
position : absolute;
top : -9999px;
}


ul#menu_principal {
position : relative;
left : 20px;
}


li#menu_accueil a {
position : absolute;
left : 0px;
height : 35px;
width : 85px;
background : url(../images/bouton_accueil.gif) no-repeat;
text-indent : -9999px;
}

li#menu_accueil a:hover {
background : url(../images/bouton_accueil_hover.gif) no-repeat;
}

li#menu_thermique a {
position : absolute;
left : 95px;
height : 35px;
width : 180px;
background : url(../images/bouton_thermique.gif) no-repeat;
text-indent : -9999px;
}

li#menu_thermique a:hover {
background : url(../images/bouton_thermique_hover.gif) no-repeat;
}

li#menu_photo a {
position : absolute;
left : 285px;
height : 35px;
width : 220px;
background : url(../images/bouton_photo.gif) no-repeat;
text-indent : -9999px;
}

li#menu_photo a:hover {
background : url(../images/bouton_photo_hover.gif) no-repeat;
}

li#menu_realisations a {
position : absolute;
left : 515px;
height : 35px;
width : 165px;
background : url(../images/bouton_realisations.gif) no-repeat;
text-indent : -9999px;
}

li#menu_realisations a:hover {
background : url(../images/bouton_realisations_hover.gif) no-repeat;
}

li#menu_liens a {
position : absolute;
left : 690px;
height : 35px;
width : 85px;
background : url(../images/bouton_liens.gif) no-repeat;
text-indent : -9999px;
}

li#menu_liens a:hover {
background : url(../images/bouton_liens_hover.gif) no-repeat;
}

li#menu_contact a {
position : absolute;
left : 785px;
height : 35px;
width : 85px;
background : url(../images/bouton_contact.gif) no-repeat;
text-indent : -9999px;
}

li#menu_contact a:hover {
background : url(../images/bouton_contact_hover.gif) no-repeat;
}



/*  ---------------------------------------------------------------------  	*/
/*   			cadre								*/
/*  ---------------------------------------------------------------------	*/

#cadre1
{
position : relative;
width : 100%;
z-index : 5;
}

#cadre_image
{
width : 180px;
background-color : #a1d011;
float : left;

}

/* propriétés communes aux 4 coins */
#hautgauche1, #hautdroit1, #basgauche1, #basdroit1
{
height : 19px;
width : 19px;
background-repeat : no-repeat;
font-size : 1px;  /*  correction d'un bogue IE */
}
#hautgauche_image, #hautdroit_image, #basgauche_image, #basdroit_image
{
height : 25px;
width : 25px;
background-repeat : no-repeat;
font-size : 1px;  /*  correction d'un bogue IE */
}



/*   propriétés spécifiques à chaque coin  */
#hautgauche1
{
background-image : url(../images/cadre1/hautgauche.gif);
}

#hautdroit1
{
float : right;
background-image : url(../images/cadre1/hautdroit.gif);
}

#basgauche1
{
background-image : url(../images/cadre1/basgauche.gif);
}

#basdroit1
{
float : right;
background-image : url(../images/cadre1/basdroit.gif);
}
#hautgauche_image
{
background-image : url(../images/cadre_image/hautgauche.gif);
}

#hautdroit_image
{
float : right;
background-image : url(../images/cadre_image/hautdroit.gif);
}

#basgauche_image
{
background-image : url(../images/cadre_image/basgauche.gif);
}

#basdroit_image
{
float : right;
background-image : url(../images/cadre_image/basdroit.gif);
}

#cadre_image img
{
padding-left : 20px;
padding-bottom : 15px;
}

#cadre_image p {
font-size : 110%;
text-align : center;
}

.cler {
margin-left : 30px;
}


/* --------------------------------                  listes
-------------------------------------------------------------------------------------------------------------  */

/*                    listes de bases                             */

#cadre1 ul.basique li {
  position: relative;
  width : 90%;
  margin: 35px auto;
  border : 1px solid black;
  background-color : #fff;
  }
  
#cadre1 ul.basique li h4
{
position : absolute;
height : 30px;
line-height : 30px;
text-align: center;
padding : 0px 7px;
background-color : #fff;
color : #000;
font-weight : bold;
top : -16px;
left : 10px;
}

#cadre1 ul.basique li p
{
text-align : justify;
line-height : 1.2em;
margin : 1em;
font-size : 100%;
font-weight : normal;
}

#cadre1 ul.basique li p strong
{
font-weight : normal;
}

#cadre1 ul.basique li img {
float : right;
margin : 0.8em;
}

/*                             contact                               */

ul.contact {
margin-top : 1.5em;
margin-left : 4em;
}

ul.contact li {
margin-bottom : 1.5em;
}

ul.contact li span 
{
display:table-cell;
width:150px;
line-height : 1.5em;

}

ul.contact li { /*pour l'alignement des puces*/
list-style-image:none;
list-style-type:none;
background: url(../images/puce-bleu.gif) no-repeat 0% 18%;
padding-left : 20px;
}




/*                  réalisations               */

.realisation1, .realisation2
{
position : relative;
width : 860px;
height : 400px;
min-width : 860px;
margin : 0 auto;
background : url(../images/fond_realisations.gif) repeat-x #e4f583;
border-bottom : 1px solid #999;
z-index : 10;
overflow : hidden;
}

.realisation1 {
margin-top : 2em;
}

.realisation2 {
height : 570px;
}

.realisation1 li, .realisation2 li
{
position : absolute;
top : 0px;
width : 215px;
height : 400px;
background-repeat : no-repeat;
background-position : 20px 20px;
padding-top : 165px;
z-index : 20;
}

.realisation2 li {
height : 570px;
}


.photos_realisations {
position : absolute;
height : 126px;
width : 171px;
top : 20px;
left : 20px;
cursor: url(../images/zoomin.cur) , pointer;
z-index : 30;
}

#pelleautier {
left : 0px;
}

#batie_neuve {
left : 215px;
}


#gap {
left : 430px;
}

#puy {
left : 645px;
}

#saint_chaffrey {
left : 0px;
}

#fontenil {
left : 215px;
}

#rambaud {
left : 430px;
}

#monteseveroux {
left : 645px;
}



.realisation1 p , .realisation2 p{
margin : 0.5em 0em;
padding : 0 10px;
font-size : 105%;
}

.realisation1 h3 , .realisation2 h3 {
margin : 0.5em 0em;
text-align : center;
font : italic 115% arial, serif;
}

.realisation1 li:hover, .realisation2 li:hover {
background-color : #526d98;
color : #fff;
}


/*                           liens                                          */
ul.liens {
margin-top : 4em;
}

.liens li {
  position: relative;
  margin: 25px auto;
  border : groove 3px yellow;
  background-color : #fff;
  }

.bouton_100, .bouton_150, .bouton_200, .bouton_250
{
position : absolute;
width : 100px;
height : 35px;
line-height : 20px;
text-align: center;
padding-top : 5px;
background : url(../images/bouton_liens_100.gif) no-repeat;
color : #fff;
font-size : 105%;
font-weight : normal;
top : -16px;
left : 10px;
}
  
.bouton_100:hover {
background : url(../images/bouton_liens_100_hover.gif) no-repeat;
color : yellow;
}

.bouton_150 {
width : 150px;
background : url(../images/bouton_liens_150.gif) no-repeat;
}

.bouton_150:hover {
background : url(../images/bouton_liens_150_hover.gif) no-repeat;
color : yellow;
}

.bouton_200 {
width : 200px;
background : url(../images/bouton_liens_200.gif) no-repeat;
}

.bouton_200:hover {
background : url(../images/bouton_liens_200_hover.gif) no-repeat;
color : yellow;
}

.bouton_250 {
width : 250px;
background : url(../images/bouton_liens_250.gif) no-repeat;
}

.bouton_250:hover {
background : url(../images/bouton_liens_250_hover.gif) no-repeat;
color : yellow;
}



.liens li:hover
{
background-color : #e4f583;
border : groove 3px blue;
}


.liens li p
{
text-align : justify;
line-height : 1.2em;
margin : 1em;
margin-top : 2em;
font-size : 105%;
font-weight : normal;
}

.liens li p strong
{
font-weight : normal;
}

.img_left {
float : left;
margin : 0.8em;
margin-top : 2em;
}

.img_right {
float : right;
margin : 0.8em;
margin-top : 2em;
}



/*                         liens contact                             */

ul#menu_devis {
overflow : hidden;
}

li.devis_thermique, li.devis_photo {
border : none;
}


li.devis_thermique a {
float : left;
height : 80px;
width : 200px;
margin-left : 210px;
background : url(../images/devis_thermique.gif) no-repeat;
text-indent : -9999px;
}

li.devis_thermique a:hover {
background : url(../images/devis_thermique_hover.gif) no-repeat;
}

li.devis_photo a {
float : left;
height : 80px;
width : 200px;
margin-left : 60px;
background : url(../images/devis_photo.gif) no-repeat;
text-indent : -9999px;
}

li.devis_photo a:hover {
background : url(../images/devis_photo_hover.gif) no-repeat;
}


/*  ----------------------------------            	SLIDESHOW
--------------------------------------------------------------------------------------------------------------    */

#show {
height : 200px;
width : 620px;
}


.slideshow {
display:block;
position:relative;
z-index:0;
}
.slideshow-images {
display:block;
overflow:hidden;
position:relative;
}
.slideshow-images img {
display:block;
position:absolute;
z-index:1;
}
.slideshow-thumbnails {
overflow:hidden;
}
.slideshow-images {
height:132px;
width:170px;
}
.slideshow-images-visible {
opacity:1;
}
.slideshow-images-prev {
opacity:0;
}
.slideshow-images-next {
opacity:0;
}
.slideshow-images img {
float:left;
left:0pt;
top:0pt;
}
.slideshow {
height:132px;
margin:0pt auto;
width:170px;
}
.slideshow a img {
border:0pt none;
}
.slideshow-captions {
background:#000000 none repeat scroll 0%;
bottom:0pt;
color:#FFFFFF;
font-family:Arial,sans-serif;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
left:0pt;
line-height:22px;
overflow:hidden;
position:absolute;
text-indent:10px;
width:100%;
z-index:10000;
}
.slideshow-captions-hidden {
height:0pt;
opacity:0;
}
.slideshow-captions-visible {
height:22px;
opacity:0.7;
}
.slideshow-controller {
background:transparent url(controller.png) no-repeat scroll 0%;
height:42px;
left:50%;
margin:-21px 0pt 0pt -119px;
overflow:hidden;
position:absolute;
top:50%;
width:238px;
z-index:10000;
}
.slideshow-controller * {
margin:0pt;
padding:0pt;
}
.slideshow-controller-hidden {
opacity:0;
}
.slideshow-controller-visible {
opacity:1;
}
.slideshow-controller a {
cursor:pointer;
display:block;
height:18px;
overflow:hidden;
position:absolute;
top:12px;
}
.slideshow-controller a.active {
background-position:0pt 18px;
}
.slideshow-controller li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.slideshow-controller li.first a {
background-image:url(controller-first.gif);
left:33px;
width:19px;
}
.slideshow-controller li.last a {
background-image:url(controller-last.gif);
left:186px;
width:19px;
}
.slideshow-controller li.next a {
background-image:url(controller-next.gif);
left:145px;
width:28px;
}
.slideshow-controller li.pause a {
background-image:url(controller-pause.gif);
left:109px;
width:20px;
}
.slideshow-controller li.play a {
background-image:url(controller-play.gif);
}
.slideshow-controller li.prev a {
background-image:url(controller-prev.gif);
left:65px;
width:28px;
}
.slideshow-loader {
height:28px;
position:absolute;
right:0pt;
top:0pt;
width:28px;
z-index:10001;
}
.slideshow-loader-hidden {
opacity:0;
}
.slideshow-loader-visible {
opacity:1;
}
.slideshow-thumbnails {
bottom:-65px;
height:65px;
left:0pt;
position:absolute;
width:100%;
}
.slideshow-thumbnails * {
margin:0pt;
padding:0pt;
}
.slideshow-thumbnails ul {
height:65px;
left:0pt;
position:absolute;
top:0pt;
width:10000px;
}
.slideshow-thumbnails li {
float:left;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:5px 5px 5px 0pt;
position:relative;
}
.slideshow-thumbnails a {
display:block;
padding:5px;
position:relative;
}
.slideshow-thumbnails a:hover {
background-color:#FFFF99 !important;
opacity:1 !important;
}
.slideshow-thumbnails img {
display:block;
}
.slideshow-thumbnails-active {
background-color:#99FFFF;
opacity:1;
}
.slideshow-thumbnails-inactive {
background-color:#FFFFFF;
opacity:0.5;
}

/*    custom effect pour slideshow    */



/*  ----------------------------------            	footer 
--------------------------------------------------------------------------------------------------------------    */

div#footer
{
position : relative;
top : 20px;
width : 100%;
height : 100px;
background : url(../images/footer.gif) no-repeat;
}

#footer h5
{
position : absolute;
left : 30px;
top : 10px;
width : 400px;
text-align : left;
line-height : 40px;
}

#footer a
{
line-height : 60px;
color : #000;
}

.webmaster
{
position : absolute;
top : 0px;
left : 430px;
width : 200px;
height : 19px;
}


.w3c
{
position : absolute;
top : 5px;
right : 130px;
height : 25px;
width : 70px;
}

.css
{
position : absolute;
top : 5px;
right : 50px;
height : 25px;
width : 70px;
}