										
										/* FEUILLE DE STYLE DU SITE DROP10 */
										
* {										/* au tout début pour démarrer marges intérieures et extérieures à zéro */
margin:0;
padding:0;
}
										/* centrage du body et image  de fond 1600x1600 qui se répette 3fois */
body{
background:url(imaged/bodyxxl.jpg);
margin:0 auto;
/* position:relative; */
}
.box1200{					/* class qui permet de conserver une largeur et laisse la hauteur libre en fonction du remplissage */
width:1200px;
min-height:1px;
background-color:rgba(255,255,255,0.3);
box-shadow:1px 1px 0 gray;
border-left:1px; 
border-right:1px;
border-style:outset;
border-color:#ccc;
margin:0 auto;
}
header{									/* centrage du header et largeur du site prend les propriétés de box1200 en hauteur */
width:1200px;
margin:0 auto;
}
						 /* identifiant de la navigation avec image de fond qui ne se répette pas et reste fixe dans le site */
#bg_nav {					
background-image:url(imaged/nav.png);
background-repeat:no-repeat;
width:1200px;
height:88px;
position:fixed;
}
						/* la class tipo navigation permet de ne pas répéter la tipo pour chaque mot lié de la nav */
.tipo{							
font-family:arial;
font-size:24px;
}
										/* tous les "a" qui appartiennent à cet identifiant sont transormés en boite,  */
#bg_nav a{								/* mis côte à côte grâce à inline-block, la boite est dimensionnée et le contenu qualifié */
display:inline-block;
text-decoration:none;
width:200px;
height:40px;
text-align:center;
padding:15px 0 0 0;
}
a:hover{								/* cette fonction permet de changer la couleur de fond de "a" au passage de la souris */				
background-color:#fc7c40; /*f88d5a;*/
}
a.style:hover{
background-color:rgba(0,255,0,0.8);
}
a.style{
display:inline-block;
font-family:arial;
font-size:24px;
}
						/* ______________________________________________________header____________________*/
#ligne{									/*compense la hauteur de la nav fixe pour commencer juste en desoous*/
width:1200px;
height:88px;
}
.prem {									/* Pour que le logo, le titre et les réseaux soient sur la même ligne haute */
display:inline-block;
vertical-align:top;
}
#d1{									/* pour positionner le logo */
padding-top:25px;
width:270px;
height:115px;
}
#d2{									/* pour positionner le titre principal école */
width:650px;
height:140px;
/*background-color:gray;*/
}
#d2 h1{
/*background-color:gray;*/				/* pour qualifier le titre */
font-family:verdana;
font-size:55px;
color:#f26522;
text-shadow:5px 1px 5px black;
padding:30px 0 0 20px;
}

#d3{										/* c'est la boite des logos réseaux  */
width:270px;
height:120px;
/*background-color:gray;*/
text-align:right;
padding: 20px 10px 0 0;
}
#d4{										/* ce sont les réseaux sociaux modifiés dans page contact */
width:190px;
min-height:100;
/* background-color:pink; */
text-align:right;
padding: 30px 30px 0 0;
}

#d3 a{										/* ce sont les "a" des liens sociaux */
padding:0px 15px 0 0;
}
/* _________________________________________________________________SECTION______________________________________________________________________________ */

.coeur{										/* pour que les articles dans section soient calés	en haut */	
display:inline-block;
vertical-align:top;
}
#a1{ /*article1*/							/* dimension boite a1 */
  /* background-color:red;   */
width:360px;
height:300px;
padding:40px 15px 0px 25px;
}
.tipoens{									/* tipo ensemble des textes dans cette section */
font-family:verdana;
font-size:14px;
color:black;
}
}
.ache2{										/* class des titre h2 */
/*font-family:arial;*/
font-size:24px;
color:black;
}
#ache2{
padding:0 0 0 60px;
}
.ache3{												/*La chute libre en solo*/
/*font-family:arial;*/
font-size:24px;
color:#3222bc;/* blue*/
}
.ache4{											/*Offrez un cadeau inoubliable*/
/* background-color:green; */
font-family:verdana;
font-size:18px;
color:black;
}
/* _______________________________________________boite figure pour image centrale______________________ */
#a2{
 /* background-color:green;   */
width:355px;
height:290px;
padding:50px 0px 0px 45px;
}
/* _______________________________________________boite article________________________________________ */
#a3{
/* background-color:red;   */
width:400px;
height:280px;
padding:50px 0px 10px 0px;
}

div.bouton{								/* class bouton pour reproduire la couleur orange */
width:200px;
height:40px;
padding:8px 0 0 20px;
background-color:#EF9D77;
border-width:3px;
border-style:solid;
border-color:#777;
border-radius:10px;
margin:0 0 10px 0;
}
#prix1{									/* ce sont des titres prix déplaçables */
margin:0 0 5px 180px;
}
#prix2{
margin:0 0 5px 180px;
}
span.ache4{								/* chagement police prix */
margin:0 0 0 20px;
}
										/* boite article 4 initiation calée sous a1 avec a5*/
#a4{											
display:inline-block;
vertical-align:top;
/* background-color:gray; */
height:130px;
width:775px;
padding: 10px 0 0 25px;
}
#p1{									/* paragraphe qui appartient à a4 */
text-align:justify;
margin-right:30px;
}
										/* boite article 5 parachutistes initiation à côté de a4 */
#a5{										
display:inline-block;
vertical-align:top;
width:400px;
height:140px;
}
/* ___________________________________________________________section avion de fond_________________________________________ */
#avion{									
width:1200px;
height:350px;
padding:10px 0 0 0;
/*background-color:gray;*/
background-image:url(imaged/avion7.png);
background-position:right;
background-repeat:no-repeat;
font-family:verdana;
font-size:14px;
color:black;
position:relative;
}
ul{											/* pour ouvrir la liste de li */
width:350px;
position:absolute;
}
.titre{										/* titre formation pac utilisé en class au cas où*/
list-style-type:none;
font-size:18px;
color:black;
margin-left:25px;
}
.tiret{										/*  class des puces de la liste */
/*background-color:green;*/
list-style-type:square;
margin-left:40px;
}
#adresse{						/* adresse en position absolute sur avion passe à droite même si avant dans html */
position:absolute; 
z-index:3;
width:250px;
height:150px;
/*background-color:black;*/
right:150px;
top:20px;
font-size:18px;
color:#2111de;/* blue*/
text-shadow:1px 1px 1px black;
}
#trait{										/* trait de séparation */
width:1000px;
height:1px;
background-color:black;
margin:0 auto;
}
#pied{										/* identifiant du footer en position relative */
position:relative;
min-height:10px;
font-size:18px;
font-family:arial;
}
#bas1{											/* identifiant navigation du bas */
height:30px;
padding-top:20px;
margin-left:0px;
}
a.navbas{										/* class navbas pour caler les "a" et ralentir le hover */
/* background-color:red; */
display:inline-block;
text-align:center;
text-decoration:none;
width:190px;
font-weight:bold;
-webkit-transition: all .4s;
-moz-transition: all .4s;
transition: all .4s;
}
#adressebasse{								/* boite adresse en inline-block pour la déplacer */
display:inline-block;
font-size:16px;
font-family:arial;
color:#2111de;
text-shadow:1px 1px 1px black;
margin:40px 0 0 350px;
padding-bottom:10px;

}
.fin{												/* class fin déplacer mention légales texte du bas */
display:inline-block;
font-size:14px;
font-family:arial;
margin-left:90px;
}
#ecole{											/* textz à l'intérieur de la boite identifié adressebasse */
text-align:center;
margin:50px auto;
} 

#dessus{										/* logo qui empiète sur footer en position absolute */
margin:0 auto;
position:absolute;
bottom:0px;
left:20px;
z-index:3;
}
#separadress{									/* séparation téléphone */
padding-right:20px;
}
/* ____________________________________________PAGE  CONTACT_________________________________________________________ */

#format{												/*div de 720x750* ((700+padding 50) qui s'agrandit suivant/	
font-size:16px;
 /* background-color:green; */
margin:0 auto;
width: 620px;
min-height:700px;
padding:50px 50px 0 50px;
}
#paragraphe{											/* c'est le bonjour, de bienvenue */
text-align:center;
padding:0 40px 20px 20px;
font-size:24px;
color:#3222bc;
}
#formule{  												/*  c'est l'identifiant de la boite form */
/* background-color:red; */
width:650px;
min-height:700px;
margin:auto;
} 
#champ{												/* c'est le fieldset  */
/* background-color:#ffffcc; */
width:500px;
padding-left:50px;
}
#ici{/* 	
background-color:green;											le texte au dessus de carte */
text-align:center;
padding-top:20px;
}

label{
/* background-color:#ccffff; */							/* label calé en haut les input suive */
display:inline-block;
vertical-align:top;
width:200px;
text-align:right;
}
#madame{												/* pour coller à monsieur	 */
text-align:left;
width:60px;
}
input{													/* séparer les input */
margin-bottom:5px;
}
#n{														/* couleur de fond sur le nom */
background-color:rgba(0,255,0,0.8);
}
#mess{													/* zone de message variable */
display:inline-block;
margin:0 auto;
/* font-size:14px; */
resize:vertical;
} 
#valide{												/* pour valider le message */
margin-left:200px;
}
.pass{													/* sert à déplacer les labels	 */	
/* background-color:green; */	
padding-left:50px;
}
 #note{													/* pour identifier un petit module redimensionné */ 
background-color:#cee;
width:50px;
height:30px;
/* size:65px;  */
} 
#parti{													/* c'est après l'ajout des photos submit pour déplacer c'est parti */
margin-left:255px;
}
#carte{													/* pour bien disposer la carte */
 /* background-color:red;  */
width:260px;
min-height:300px;
margin:0 auto;
}
#plan{													/* pour déplacer la carte google iframe */
margin-left:20px;
}
#partenaire{										/* deuxième champ */
width:550px;
}
#choisir{											/* pour positioner le selec */								
padding:10px 50px 0 0;
}

.itin{												/* class itin pour conserver les tipos itinéraire */
font-size:20px;
color:#555;
font-weight:bold;
text-shadow:0px 3px 0px white;
padding:30px 0 0 20px;
}
#avion1{											/* boite pour déplacer l'avion */
width:220px;
height:220px;
background-image:url(imaged/fond2contact.png);
margin: 75px 0 0 20px;
}
#train{												/* boite pour déplacer le train */
width:220px;
height:220px;
background-image:url(imaged/fond2contact.png);
margin: 45px 0 0 20px;
}
#sponsors{											/* boite pour déplacer le logo région */
width:200px;
height:200px;
margin:70px 0 0 -10px;
}
#sortiesGard{	
background-color:red;									/* boite pour déplacer les sorties aude */
width:200px;
height:200px;
background-image:url(imaged/fond3contact.png);
margin:0 40px 0 -10px;
}
#sortiesAude{											/* boite pour déplacer les sorties aude */
width:200px;
height:200px;
background-image:url(imaged/fond3contact.png);
margin:85px 40px 0 -10px;
}
.divers{												/* pour les tipo des sorties
font-size:20px; */
color:#04049d;
font-weight:bold;
text-shadow:1px 1px 1px #f26522;
text-align:center;
padding-top:40px; 
}
#super{
padding-top:300px;
font-size:100px;
}





