/* 
Auteur : Julien Skotarek - 4i (Ingénierie Informatique Internet Intranet), Vosges, pour Constructions Socopa
Site web : http://www.4i.fr

Index du fichier css :
- Générales : body, a, h1 ...
- Grandes parties : les div principaux, structure du site
- Menu : Le menu haut
- Accueil : La page d'accueil, spécifique
- Diaporama javascript, page Maisons sur mesure
- L'affichage dans la partie corps : puces, justifié ...
- Elements : Les éléments spécifiques, inclassables

Structure du site :
- principal
    - entete 
        - texteEntete 
            - texteEnteteInterne
        - menu
    - corps
        - menuGauche
            - texteMenuGauche
            - lien4i
        - titreCentral
        - contenu
*/

/* _____________________Générales _____________________ */

body, td {
margin: 0;
padding: 0;
background:#000000;
color:#ffffff;
font-family: comic sans MS, arial, sans-serif;
font-size:14px;
text-align:center;
}

h1{
font-size:18px;
  color:#dddddd;/*#a4d90d;*/
}

h2{
font-size:16px;
  color:#a4d90d;
}


h3
{
display:block;
font-size:14px;
  color:#a4d90d;

}

h4
{
display:block;
font-size:12px;
margin-bottom:0px;
}
p
{
margin-bottom:0px;
}

a
{
text-decoration: none;
color:white;
}

dl, dt, dd, ul, li
{
list-style-type: none;

margin: 0;
padding: 0;
}


fieldset
{
padding-top:0px;
border:none;
}

/* _____________________Grandes parties _____________________ */

#principal
{
position:relative;
width:980px;
margin:auto;
text-align:left;
}

#entete
{
position:absolute;
background-color:#444444;
top:0px;
width:100%;
height:100px;
}    

#texteEntete
{
text-align:right;
position:absolute;
right:20px;
width:720px;
top:10px;
color:#dddddd;
font-size:30px;
font-style:italic;
}

#texteEnteteInterne
{
color:white;
}

                 
#corps {
width:100%;
position: absolute;
z-index: 1;
top : 100px;
color: #ffffff;
/*background-color: #eee;*/
}

#menu
{
position:absolute;
top:0px;
left:0px;
width:155px;
height:500px;
/*
background-image:url('../images/lacRetoucheGauche1.jpg');
background-repeat:no-repeat;
*/
color:white;
}

#lien4i
{
position:absolute;
bottom:15px;
left:5px;
//height:20px;
}

#titreCentral{
position:absolute;
width:730px;
height:25px;
left:180px;
padding-top:5px;
margin-top:5px;
margin-bottom:0px;

padding-left:10px;
/*
background-image:url('../images/bois2.jpg');
background-repeat:no-repeat;
*/
font-family:Arial;
font-size:12px;
font-weight:bold;
  color:white;/*#a4d90d;*/
}
            
#contenu
{
position:absolute;
top:40px;
left:160px;
padding-right:5px;  
width:810px;
height:450px;
/*background-color:#000000;*/
margin-left:5px;
scrollbar-base-color:#333333;
overflow-y:auto;
}

/* _____________________Menu _____________________ */


#menu li
 {
float: left;
border-width: 2px 0 0  0;
border-style:solid;
border-color:#000000;/*#A4D90D;*/
background: #333333;
color:white;

width: 100%;
margin: 0px 0px 0px 0px;
padding: 5px 0px 5px 0px;
}

#menu li a{
text-decoration:none;
color:white;
}



#menu ul li:hover {
background: #444444;
}

#menu ul li a:hover{
text-decoration:underline;
/*color:black;*/

}




#menu li.menuPhoto:hover {
background: #444444;
}


#menu li.menuPhoto 
{
margin: 0px 0px 0px 0px;
padding: 0px;
border:none;

}


#menu li.menuPhoto 
{
padding: 2px 0px 2px 0px;
/*background:#000000;*/
width: 100%;

}
*/


/* _____________________Accueil _____________________ */

#accueil
{
position:relative;
width:100%;
height:480px;
background-image:url('../images/lacRetouche1.jpg');
}

#diapoAccueil
{
border:0px;
position:absolute;
top:300px;
left:0px;
height:190px;
width:980px;
overflow:hidden;
}

#texteAccueil
{
margin:0px;
font-weight:inherit;
position:absolute;
top:120px;
left:60px;
color:white;
font-size:48px;
}


/* _____________________Diaporama javascript, page Maisons sur mesure _____________________ */

#collectifPics img {
  margin:5px; padding:0;
  width:270px;
}

#collectifPics {
  position:relative;
  margin-left:60px;
  height:190px;
  width:550px;
  border:1px solid #EFEFEF;
  padding:13px;
  background:#F7F7F7;
  margin-bottom:50px;
  padding-top:0px;
}

#sliderHolder {
  position: relative;
  width:565px; height:190px;
  overflow: hidden;
  border:1px solid #EFEFEF;
  background:white;
}

#sliderItems {
  position: absolute;
  top:0; left:0;
}

#sliderItems div {
  float:left;
  position:relative;
  width:280px; height:190px;
  background:#F7E4D4;
  margin-right:5px;
}

#sliderItems div span {
  display:block;
  width:100%; text-align:center;
  font-weight:bold;
  font-size:10px;
  position:absolute;
  bottom:0; left:0;
  background:#F7E4D4;
}

.sliderHolderFwBt {
  width:0px; height:0px;
 /* background:white url(../images/bt_forward.png) no-repeat;*/
  font-size:0;
  color:#FFAA0B;
  cursor:pointer;
  position:absolute;
  right:-1px; bottom:-22px;
  visibility:hidden;
}

.sliderHolderBwBt {
  width:0px; height:0px;
 /* background:white url(../images/bt_backward.png) no-repeat;*/
  font-size:0;
  color:#FFAA0B;
  cursor:pointer;
  position:absolute;
  left:-1px; bottom:-22px;
  visibility:hidden;
}

.modelesHolderFwBt {
  width:29px; height:19px;
  background:white url(../images/bt_forward.png) no-repeat;
  font-size:0;
  color:#FFAA0B;
  cursor:pointer;
  position:absolute;
  right:-1px; bottom:-22px;
}

.modelesHolderBwBt {
  width:29px; height:19px;
  background:white url(../images/bt_backward.png) no-repeat;
  font-size:0;
  color:#FFAA0B;
  cursor:pointer;
  position:absolute;
  left:-1px; bottom:-22px;
}


/* _____________________Affichage dans la partie corps : puces, justifié ... _____________________ */
/* Corps forcé pour les puces, car le menu est géré en ul/li */

#contenu ul li
{
margin-top:2px;
padding-left:25px;
margin-left:20px;
vertical-align:bottom;
background-image:url('../images/puce1.jpg');
background-repeat:no-repeat;
}

#corps ul ul li
{
background-image:url('../images/puce2.jpg');
background-repeat:no-repeat;
}

#corps ul
{
margin-top:0px;
}

#corps ul.grosseListe li
{
margin-top:10px;
}

#corps ul.grosseListe ul
{
margin-top:0px;
}

#corps ul.grosseListe ul li
{
margin-top:0px;
}

#corps a, span.lien
{
text-decoration:underline;
cursor:pointer;
}

#contenu p, #contenu li
{
text-align:justify;
}

/* _____________________Elements _____________________ */

#boutonContact
{
position:absolute;
top:20px;
right:20px;
text-decoration:none;
}

form .contact
{
cursor:pointer;
width:250px;
margin:5px;
padding:0;
border-width:0 1px 1px 0;
border-color:#f70;
background-color:#dddddd;
font-size:12px;
font-family:Arial;
}

.vert
{
font-size:12px;
font-weight:bold;
color:#0a0;
}

.rouge, .required
{
font-size:12px;
font-weight:bold;
color:#f00;
}

.orange
{
color:#F60;
font-weight:bold;
}

#lien4i a
{
font-size:10px;
text-decoration:underline;
color:white;
}

fieldset label
{
width: 160px;
line-height: 14px;
vertical-align:bottom;
font-size: 12px;
margin-right: 10px;
float: left;
text-align: right;
padding-top: 2px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

fieldset.selections label
{
width:100px;
}


fieldset p
{
margin-top:0px;
}

form table td
{
font-size:12px;
text-align:left;
}

.blocMini
{
float:left;
position:relative;
margin:5px 0 0 10px;
border-style:dashed;
border-width:1px;
border-color:#333333;

background-color:#111111;
width:160px;
height:200px;
text-align:center;
}

.blocMini2
{
float:left;
position:relative;
margin:5px 0 0 10px;
/*
border-style:dashed;
border-width:1px;
border-color:#333333;

background-color:#111111;
*/
width:160px;
height:180px;
text-align:center;
}

.blocDetail
{

position:relative;
margin:auto;
margin-top:5px;
/*
border-style:dashed;
border-width:1px;
border-color:#333333;

background-color:#111111;
*/
width:794px;
height:420px;
//text-align:center;
}

div.blocDetail div.carre
{
left:0px;
position:absolute;
display:block;
//text-align:center;
//margin:auto;
//width:150px;
//height:150px;
}



div.blocMini div.carre
{
left:0px;
position:absolute;
display:block;
//text-align:center;
//margin:auto;
//width:150px;
//height:150px;
}


.carre img
{
//margin:auto;
}

#corps #contenu ul li ul li ul li
{
margin-top:2px;
padding-left:5px;
margin-left:30px;
vertical-align:bottom;
list-style-type: circle;
}