/*
permet de bien distinguer les différents blocs
table {border: 1px solid black}
td {border: 1px dotted gray}
div {border: 1px solid orange}
img, form {border: 1px dashed blue}
h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow}*/

body{
margin:0;
padding:0;
font-family : tahoma;
font-size: 0.8em; /*em correspond à une unité de valeur comme px par exemple pour en savoir plus ----->   http://batraciens.net/css-astuces/apprendre-css.htm  en bas de la page*/
text-align : center;
height : 100%;
width : 100%;
background :#b2fb5d;
}

html, body {
           height : 100%;
           width : 100%;
           padding : 0;
           margin : 0;
           text-align : center;/*permet de centrer l'enssemble du site*/
		   }

#global { /*englobe toute les divs*/
background:url(./img/fond.jpg) repeat-y center;/*texture de fond #b2fb5d*/
background-color:white;
width:764px;
height:500px;
position:relative;/*la position relative ne change rien en apparence, ms permet de placer les éléments "enfant" par rapport à cette div*/
margin:0 auto;
text-align:left;
padding:0px;
}

#hautcadre{/*baniere*/
width:822px;
height:103px;
margin:0px auto;
background:url(./img/baniere.jpg) no-repeat center;
padding:0px;
}

#hautcadreh{/*baniere*/
width:822px;
height:103px;
margin:0px auto;
background:url(./img/baniereh.jpg) no-repeat center;
padding:0px;
}
/*
#hautcadre2{
width:822px;
height:18px;
margin:0px auto;
background:url(./img/hautcadre.jpg) no-repeat center;
padding:0px;
}
*/
#bascadre{/*pemret d'intégrer une image en bas de cadre*/
width:822px;
height:49px;
margin:0px auto;
background:url(./img/bascadre.jpg) no-repeat center;
padding:0px;
}

#global2{/*image du corp de la page*/
background:url(./img/fond.jpg) repeat-y center;/*texture de fond #b2fb5d*/
width:822px;
margin:0px auto;
padding:0px;
}
 
div#global p{/*s'applique à tout les p de la div global*/
position:relative;/*la position relative ne change rien en apparence, ms permet de placer les éléments "enfant" par rapport à cette div*/
text-align:left;
z-index:-1;
line-height: 1.6em;
margin: 15px 0px ;
padding:0;
}

html>body #global {/*taille minimum hack*/
	min-height: 500px;/*450*/
	height:auto;
	}

#contenu{/*permet de placé et customiser le contenu de la page*/
border:1px;
padding:50px 0 0 10px;
margin:0px;
z-index:0;
width:740px;/* IE hack*/
font-family: verdana, arial, times, sans-serif; 
height:270px;/* IE hack*/
font-size: 0.9em;
color:#333333; 
line-height: 18px;
position:relative;/*la position relative ne change rien en apparence, ms permet de placer les éléments "enfant" par rapport à cette div*/
}

#contenu2{/*permet de placé et customiser le contenu de la page*/
border:1px;
padding:0px 0 0 10px;
margin:0px;
z-index:0;
width:700px;/* IE hack*/
font-family: verdana, arial, times, sans-serif; 
height:270px;/* IE hack*/
font-size: 0.9em;
color:#333333; 
line-height: 18px;
position:relative;/*la position relative ne change rien en apparence, ms permet de placer les éléments "enfant" par rapport à cette div*/
}

#contenu li{
list-style-type: disc;
}

html>body #contenu,html>body #contenu2 {/*taille minimum du contenu  HACK*/
	min-height:270px;/*hack FF 270*/
	margin:10px;
	height:auto;
	width:740px;
	}

h1{/*apparence des titres de 1er niveau*/
color: #FD7E1A;
font-size: 18px;
font-weight:normal;
margin:0;
}

h1 strong{
font-weight:normal;
}

h3, h2{/*personnalisation des titre h3*/
margin:30px 0 0 15px;
color:#5c8f21;
font-size:15px;
text-decoration:none;
font-weight:bold;
}

/*--------------------------------------menu haut --------------------------------------------------------*/
#menu{
z-index:1;/*gestion du niveau de la div*/
position:relative;
}

ul#menu_h{/*personnalisation de la liste menu*/
z-index:500;
top:0px;
position:absolute; 
margin:0 0 0 10px;
padding:0;  
list-style-type:none;
font-size:0.90em;
}
#menu_h li{/*transformer le positionnement en colonne des liste à unpositionnement en ligne.*/
display: inline;
}

#menu_h a{/*personnalisation des liens du menu */
color:black;
text-decoration:none;
}

#menu_h a:hover{/*personnalisation des liens du menu au survol*/
color:#FD7E1A;
text-decoration:underline;
}

#pied {/*positionnement du pied de page*/
margin:-20px 0 0 0;
padding:0;
text-align:center;
font-size:0.9em;
color:#a3a8aa;
}

#pied a{/*personnalisation des liens du pied de page*/
color:#FD7E1A;
font-size:0.9em;
text-decoration:none;
}

.orange{/*changement de couleurs */
color:#FD7E1A;
}

.gras{/*mise en gras de caractères*/
font-weight:bold;
}

#plan, #mapsearch{/* placement de l'image plan  dans contact*/
float:right;
margin:0;
padding:0 165px 0 0!important;
padding:0 0px 0 0;
width:230px;
height:460px;
}

#plangd{
margin: 0px;
padding:0px;
}

#contenu img, .pushim {
border:1px solid #fd7e1a;
margin:15px;
}

#photo1{
float:right;
padding:0px;
width:200px;
height:267px;
}
#photo2{
float:right;
padding:0px;
width:315px;
height:236px;
}

#maison{
float:right;
padding:0px;
width:250px;
height:188px;
}

#angle{
float:left;
padding:0px;
width:200px;
height:267px;
}


#contenu #pano{
margin:0;
padding:0 0 0 -60px;

}

#maison2{
float:right;
padding:0px;
width:250px;
height:188px;
}

#maison3{
float:left;
padding:0px;
width:250px;
height:188px;
}
#maison4{
float:right;
padding:0px;
width:250px;
height:188px;
}

#chalet1{
float:right;
padding:0px;
width:317px;
height:238px;
}

#chalet2{
float:left;
padding:0px;
width:317px;
height:238px;
}

#chalet2gd, #chalet1gd{/*image plus grande.Rubrique réalisations*/
position:fixed !important;/*hack IE ne comprend pas*/
position:absolute;
width:440px;/*meme taille que l'image*/
height:360px;/*un peu plus grand que l'image pour la phrase*/
background:#fbb65d;
z-index:500;
margin:0px auto !important;/*hack IE ne comprend pas*/
margin:0px;
top:0px !important;/*hack IE ne comprend pas*/
top:30px;
left:0px;
padding:0;
}

#chalet2gd .pushim, #chalet1gd .pushim {
z-index:550;
padding:0px;
margin:0px;
}

#chalet2gd p, #chalet1gd p { /*personnalisation des paragraphes de  chalet1gd et chalet2gd*/
top:-10px;
z-index:1000;
padding:0px;
margin:0px;
z-index:550;
}

.croix{/*placement d'une croix pour fermer la grande image*/
position:fixed !important;/*hack IE ne comprend pas*/
position:absolute;
top:0px;
margin:0px;
padding:0px;
}

#chalet3{/*personalisation  de la 3eme imae de la page réalisation*/
float:right;
padding:0px;
width:317px;
height:238px;
}

#article1ptt{
z-index:1;
float:right;
padding:0px;
width:150px;
height:213px;
}

#article2ptt, #article3ptt{
z-index:1;
float:left;
padding:0px;
}

#imagedauphine{
z-index:1;
position:absolute;
left:360px;
padding:0px;
}

#contenu .lienArt{
color:black;
text-decoration:none;
}

#contenu .lienArt:hover{
color:#fd7e1a;
text-decoration:none;
}

.champs{/*personnalisation des champs de saisies*/
border:1px solid #a8a5a1;
}

.champs:focus{/*personnalisation des champs de saisies au survol*/
border:1px solid #fd7e1a;
background-color:#fff4eb;
}

.envoi{/*personnalisation des bouton de class  envoi*/
position:absolute;
left:160px;
background-color:#fbd7bb;
color:black;
border:1px solid #a8a5a1;
}

.envoi:hover{/*personnalisation des bouton de class  envoi au survol*/
position:absolute;
left:160px;
background-color:#b2fb5d;
color:black;
border:1px solid #529406;
}

#contenu a, #contenu2 a {/* personnalisation des liens de la div contenu */ 
color:black;
font-family:verdana;
}

#contenu a:hover, #contenu2 a:hover {/* personnalisation des liens de la div contenu au survol*/ 
color:#FD7E1A;
font-family:verdana;
text-decoration:underline;
}

.spacer{/*hack IE css: permet d'effectuer une séparation entre lesdifférents articles*/
clear:both;
}

#zone1{/* zone cliquable  compagnie des fustes*/
	z-index:600;/*permet de passer la div par dessus les autres, ainsi on peut interagir avec*/
	float:left;
	position:absolute;/*la posiotion absolute permet de placer cette div par rapport à la div "parent" qui a une position relative*/
	width : 440px;
	height: 32px;
	margin-left:30px;
	margin-top:-90px;
}

#zone1 span{
display:none;
}

/*menu réa*/

#rea{
margin-left:0;
padding-left:0;
font-size:10px;
width:750px;
}

#rea a{
	text-decoration:none;
	
}
#rea li{
	display:inline;
	margin: 0px;
}

  /*galerie photo*/
     ul#graphisme {
           position : absolute;
           list-style-type : none;
           height : 70px;
           width : 200px;/* permet de changer le nombre de colonnes*/
           left : 570px;
           top : 120px;
           margin : 0;
           padding : 0;
      }
     ul#graphisme li {
           margin : 0;
           padding : 0;
           float : left;
           display : inline;
           margin : -5px;
      }
     dl#photo {
           width : 544px;
           height : 363px;
           position : absolute;
           top : 120px;
           left : 0;
           clear : both;
           margin : 0;
           padding : 0;
      }
     dl#photo dt {
           font-size : 14px;
           color : #000000;
           position : absolute;
           top : 380px;
           left : 15px;
           font-weight : bold;

      }
	 #big_pict{
			margin:0;
			padding:0
			}
	 dd{
			margin:0;
			padding:0
			}
	  
/*fin galerie photos*/

/*tableaux clients*/
.vin{
margin: 0 0 0 30px;
}

.titretab{
text-align:center;
font-size:13px;
color:#5C8F21;
font-weight:bold;
}

.tabvin {
border-collapse: collapse;
margin:15px;
 }
 
.tabvin td{
border:1px solid #6f6f6f;
margin:0;
padding:5px 1px;
text-align:center;
}
.vin{
margin: 0 0 0 30px;
}

#contenu table img{
margin:4px;
}

#cate{
text-align:center;
}
#contenu table .paphoto{
border:1px solid white;
}

/*autre*/
#pageprec{
text-decoration:none;
}

#pagesuiv{
text-decoration:none;
margin:0 0 0 140px;
}

#pagett{
position:absolute;
top:110px;
margin:0 0 0 10px;
}

#pagett2{
position:absolute;
top:105px;
margin:0 0 0 10px;
}

#page{
margin: 0 0 0 120px;
padding:0;
}

#page2{
margin: 0 0 0 230px;
padding:0;
}
.cache {
display : none;
}

#panovign{
position:absolute;
top:400px;
left:565px;
}

#contenu2  #choix{
margin:0px;
padding:0px;
border:1px solid #fd7e1a;
}

#texthaut{
font-size:13px;
}
strong{
font-weight:bold;
}

div#global  #textchoix{
width:700px;
color: #FD7E1A;
margin:5px 0 0 0;
font-size: 18px;
font-weight:normal;
text-align:center;
}

#choix1, #choix1bis{
position:absolute;
border:1px solid white;
top:220px;
/*margin:25px 0 0 0;*/
}
#choix2, #choix2bis{
position:absolute;
border:1px solid white;
top:220px;
left:220px;
/*margin:0px 0 0 70px;*/
}

#lienAC{
margin: 0 0 0 220px;
}

#lienAC2{
margin: 0 0 0 360px;
}

#creation li{
display:inline;
margin:0px;
}

#creation li a img{
border:none;
margin:0px;
}

#creation {
margin:10px 0px 0px 0px;
padding:0px;
}

#contenu .long{
padding:0px;
margin:0px;
}

/*****************menu bas*********************/
#menu_bas{
list-style-type:none;
}

#menu_bas li{
display:inline;
}

#menu_bas li a{
color:#000;
}

#menu_bas li a:hover{
color:#FD7E1A;
}

