/*-----------------------------------------------------------------------------------------------------------------------
ESCALANQUES : STYLE DE LA PAGE "WHATS UP" (programme-activites.html)
--------------------------------------------------------------------------------------------------------------------------*/

*{
	margin: 0;
	padding: 0;
}

/* la police pour tout le texte est verdana */
body {
	color: black;
	font-size: 12px;
	font-family: Verdana;
}

/*les liens par défaut sont en blanc*/
a {
 	color: #cccc66;
	text-decoration: none;
}

/*les liens  sélectionnés sont encadrés */
a:hover {
	color: #999999;
	background-color: white;
	
}

/* les liens visités ne sont pas repérés */
a:visited {
	text-decoration: none;
}


/* CONTENEUR DE TOUTE LA PAGE
---------------------------------------------------------
*/

#conteneur {
	position: relative;
	width: 850px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
	height: 1400;
	/*border-right: 1px solid #d3d3d3;*/
}

#conteneur1 {/* --- page "whatsup_newstyle" --- */
	position: relative;
	width: 960px;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 20px;
	/*border-right: 1px solid #d3d3d3;*/
}




h1 {
	font-size: 14px;
	text-indent: -5000px;	
}

h1#aventure     {
	font-size: 14px;
	font-weight: bold;
	background-image: url("../images/fermer.jpg");
	background-repeat: no-repeat;
	background-position: 98% 50% }

h1 em {
	font-weight: normal;
	font-style: italic;	
}

h2 {
	margin-top: 0px;
	padding-top: 0px;
	width: 570px;
	height: 20px;
	background-color:#cc9 ;
	font-size: 14px;
	color: white;
	text-indent: 2px;
}

h3 {
	font-size: 12px;
}

ul {}

li {}

p  {}



/* EN-TETE
----------------------------------------------
*/

#en_tete { /* les barres de séparation verticales du menu sont grisées */
	color: #999999;
}

#intro p {
	color: #000;
	/*color:#FFF; couleur du texte pour bandeau "printemps"*/
	font-weight: 600;
	text-align: right;
	margin-top: 20px;
	padding-right: 20px;
}


/*#intro_evasion { ---- le texte d'intro est dans le bandeau, aligné à droite et en blanc ----
	color: white;
	
}*/

#bandeau_whatsup    {
	background-image: url(../images/bandeaux/whatsup/bandeau-hiver_02.jpg);
	background-repeat: no-repeat;
	background-position: 50% bottom;
	width: 850px;
	height: 170px
	}

#navbar_whatsup    {
	line-height: 20px;
	background-image: url(../images/bandeaux/whatsup/bandeau-hiver_01.jpg);
	background-repeat: no-repeat;
	text-align: right;
	height: 20px
	}


/* #bandeau_whatsup_newstyle    {
	background-image: url("../images/bandeaux/whatsup/bandeau_whatsup_02.jpg"); 
	background-repeat: no-repeat; 
	background-position: 50% bottom; 
	width: 960px; 
	height: 170px 
	}

#navbar_whatsup_newstyle    {
	line-height: 20px; 
	background-image: url("../images/bandeaux/whatsup/bandeau_whatsup_02.jpg"); 
	background-repeat: no-repeat; 
	text-align: right; 
	height: 20px 
	}
*/


/*#bandeau_escalade   {
	background-image: url("../images/bandeaux/delescalade/bandeau-escalade_02.jpg");
	background-repeat: no-repeat;
	background-position: 50% bottom;
	width: 850px;
	height: 170px
}*/



/*#navbar_escalade   {
	line-height: 20px;
	background-image: url("../images/bandeaux/delescalade/bandeau-escalade_01.jpg");
	background-repeat: no-repeat;
	text-align: right;
	height: 20px
}*/


#en_tete a {}

#en_tete a:hover {}

/* #intro p {
	color: black;
	font-weight: 600; */
}

/* le bandeau est au centre avec une image en arrière plan */
/* #bandeau_escalade  {
	background-image: url("../images/bandeaux/delescalade/bandeau-escalade_02.jpg");
	background-repeat: no-repeat;
	background-position: 50% bottom;
	width: 850px;
	height: 170px 
}*/ 



/* #navbar_escalade  {
	line-height: 20px;
	background-image: url("../images/bandeaux/delescalade/bandeau-escalade_01.jpg");
	background-repeat: no-repeat;
	text-align: right;
	height: 20px
} */





/* CORPS DE PAGE
-------------------------------------------
*/

#corps {
	margin-top: 20px;
	/*background-color: springgreen;*/
}

/* COLONNE DE GAUCHE (le menu contient quatre rubriques : boutons, coordonnées, divers et logo )
-----------------------------------------------------------------------------------------------------------------------*/


/*--- les deux colonnes de la page ont la même hauteur ---*/
/*#colonne_gauche    {
	background-image: url("../images/logo-arete.jpg");
	background-repeat: no-repeat;
	background-position: left 100%;
	padding-top: 0;
	position: absolute;
	left: 0;
	width: 260px;
	height: 1240px
}*/

#colonne_gauche    {/* ----- page whatsup automne 2010 --- */
	background-image: url("../images/logo-arete.jpg");
	background-repeat: no-repeat;
	background-position: left 100%;
	padding-top: 0;
	position: absolute;
	left: 0;
	width: 260px;
	height: 960px
}


/*----------------- les deux colonnes de la page cours-escalade-printemps.html ont la même hauteur : 1060px -------------*/
#colonne_gauche1    {
	background-image: url("../images/logo-arete.jpg");
	background-repeat: no-repeat;
	background-position: left 100%;
	padding-top: 0;
	position: absolute;
	left: 0;
	width: 260px;
	height: 1060px
}

#menu {
	margin-top: -10px;
}

#menu li {
	list-style-type: none;

}

#coordonnees    {
	font-size: 10px;
	background-image: url("../images/escalanques-petit-logo.jpg");
	background-repeat: no-repeat;
	background-position: 10px 0; 
	margin-top: 10px; 
	padding-top: 20px; 
	padding-left: 10px 
}

/*--------- infos contient un tableau (cours-adulte.html) ou un pdf javascript (stage-escalade-aventure)----- */


#infos {
	height: 200px;
	padding-left: 10px;
	padding-top: 50px;
	padding-bottom: 10px;
}

#infotexte{
	width: 250px;
	background-color: #cccc66;
}

#video {
	padding-top: 40px;
	text-align: right;
	font-style: italic;
	font-size: 10px;
	color: gray; 
}

#infotexte p {
	padding-bottom: 20px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	font-size: 12px;
	font-style: italic;
	text-align: right;
	color: white;
}

/*-------------------------le tableau tarifs de la page cours-adulte.html----------------------------*/	
td  {
	font-size: 12px;
	text-align: center;
}
td#tarifs {
	color: white;
	background-color: #cccc99;
}

td.seance {
	background-color: #ccffcc;
}

td.modules {
	background-color: #66cc99;
}

#infos#voir_fiche {
	float: left;
}

#logo {
	margin-top: 10px;
}


/* COLONNE DE DROITE (le corps de page comprend un titre, un paragraphe descriptif et une photo) 
-------------------------------------------------------------------------------------------------------------------- */


/*----------- les deux colonnes de la page ont la même hauteur ------*/
/* #colonne_droite   {
	/*background-image: url("../images/cadre-sous-page_900.jpg");
	margin-top: 20px; 
	margin-left: 280px; 
	width: 570px; 
	height: 1240px 
}*/

#colonne_droite   { /*--- page whatsup printemps 2011 ----*/
	/*background-image: url("../images/cadre-sous-page_900.jpg");*/
	margin-top: 20px;
	margin-left: 280px;
	width: 570px;
	height: 960px
}

#colonne_droite h2 {
	
	clear: both;
}

#colonne_droite a {
	color: black;
	font-size: 10px;
}

#colonne_droite a:hover {

	background-color: transparent;
	text-decoration: none;
	font-size: 12px;
}

/* --------------------------------- La photo de bas de page et son cadre-------------------------------------------------- */


#cadre_photo a img { /*-- l'image est liée à elle-même et sa taille est réduite par défaut --*/
	width: 560px;
	height: 225px;
	border: 0px;
}

#cadre_photo a:hover img { /*----------------l'image reprend sa taille réelle au survol---*/

	z-index: 100;
	position: absolute;
	left: 60px;
	bottom: 40px;
	width: 800px;
	height: 320px; 
}

#cadre_photo p {
	text-align: right;
	padding-right: 30px;
	font-size: 10px;
}


/* --------------------------------- La photo de bas de page et son cadre (fin)-------------------------------------------------- */



/*---------- les deux colonnes de la page ont la même hauteur : 1060px 
#colonne_droite1  { 
	background-image: url("../images/cadre-sous-page_1100.jpg"); 
	margin-top: 20px; 
	margin-left: 280px; 
	width: 570px; 
	height: 1060px 
}

#colonne_droite1 a {
	color: black;
	font-size: 10px;
}

#colonne_droite1 a:hover {
	background-color: transparent;
	text-decoration: none;
	font-size: 12px;
}


#colonne_droite1 h2 {
	font-size: 12px;
	background-color: #66cc99;
	width: 220px;
	font-weight: normal;
}
----*/




#liste {
	
}
#liste p {
	text-align: justify;
}


/* une DIV pour fermer le conteneur corps1 */
.clearfloats {
	font-size: 0pt;
	line-height: 0px;
	height: 0px;
}

.activitexte {
	text-align: justify;
	word-spacing: -1px;
	width: 320px;
	margin-left: 30px;
	padding-top: 2px;
}

/*---------------------- les images sont liées à elles-mêmes
et leur taille est réduite par défaut---------------------------------*/

#colonne_droite a img {
	padding-top: 20px;
	padding-left: 20px;
	padding-bottom: 20px;
	border: 0px;
	width: 190px;
	height: 140px;	
}

/*----------------les images reprennent leur taille réelle au survol---*/

#colonne_droite a:hover img {
	z-index: 100;
	position: absolute;
	
	width: 380px;
	height: 285px;
	padding-bottom: 20px;

}


.corps_activite {
	height: 190px;
	width: 570px;
}


/*--------------------------------Corps 1----------------------------------------------------------- */

#activite1  { /* couleur verte pour "aventure dans les Calanques" printemps 2011 */
	background-image: url("../images/triangle_ccff99.gif");
	background-repeat: no-repeat;
	background-position: 0 10px; 
	padding-top: 10px;
	padding-right: 10px; 
	width: 340px; 
	height: 150px; 
	float: left 
}


#puce1  { 
	line-height: 20px; 
	background-image: url("../images/puces/puce-infosccff99.jpg");
	background-repeat: no-repeat; 
	background-position: right 50%; 
	text-align: center; 
	position: relative; 
	bottom: 15px; 
	left: 200px; 
	width: 110px; 
	height: 20px
}

#photoactivite1  { 
	
	/*margin-bottom: 20px; 
	margin-left: 20px; 
	padding-top: 10px; 
	padding-right: 10px;
	height: 150px;*/ 
	
	float: left
}


/*-------------------------------- Activité 2----------------------------------------------------------- */
 
#activite2  {
	background-image: url("../images/triangle_ffcc33.gif");
	background-repeat: no-repeat;
	background-position: 0 10px; 
	padding-top: 10px;
	padding-right: 10px; 
	width: 340px; 
	height: 150px; 
	float: left 
}


#puce2  { 
	line-height: 20px; 
	background-image: url("../images/puces/puce-infosffcc33.jpg");
	background-repeat: no-repeat; 
	background-position: right 50%; 
	text-align: center; 
	position: relative; 
	bottom: 15px; 
	left: 200px; 
	width: 110px; 
	height: 20px
}

#photoactivite2  { 
	
	/*margin-bottom: 20px; 
	margin-left: 20px; 
	padding-top: 10px; 
	padding-right: 10px;
	height: 150px;*/ 
	float: left
}


/*-------------------------------- Activité 3----------------------------------------------------------- */
 
#activite3  {
	background-image: url("../images/triangle_66ccff.gif");
	background-repeat: no-repeat;
	background-position: 0 10px; 
	padding-top: 10px;
	padding-right: 10px; 
	width: 340px; 
	height: 150px; 
	float: left 
}


#puce3  { 
	line-height: 20px; 
	background-image: url("../images/puces/puce-infos66ccff.jpg");
	background-repeat: no-repeat; 
	background-position: right 50%; 
	text-align: center; 
	position: relative; 
	bottom: 15px; 
	left: 200px; 
	width: 110px; 
	height: 20px
}

#photoactivite3  { 
	
	/*margin-bottom: 20px; 
	margin-left: 20px; 
	padding-top: 10px; 
	padding-right: 10px;
	height: 150px;*/ 
	float: left
}



/*-------------------------------- Activité 4----------------------------------------------------------- */
 
#activite4  {
	background-image: url("../images/triangle_ccffff.gif");
	background-repeat: no-repeat;
	background-position: 0 10px; 
	padding-top: 10px;
	padding-right: 10px; 
	width: 340px; 
	height: 150px; 
	float: left 
}


#puce4  { 
	line-height: 20px; 
	background-image: url("../images/puces/puce-infosccffff.jpg");
	background-repeat: no-repeat; 
	background-position: right 50%; 
	text-align: center; 
	position: relative; 
	bottom: 15px; 
	left: 200px; 
	width: 110px; 
	height: 20px
}

#photoactivite4  { 
	
	/*margin-bottom: 20px; 
	margin-left: 20px; 
	padding-top: 10px; 
	padding-right: 10px;
	height: 150px;*/ 
	float: left
}


/*-------------------------------- Activité 5----------------------------------------------------------- */
 
#activite5  {
	background-image: url("../images/triangle_ffff00.gif");
	background-repeat: no-repeat;
	background-position: 0 10px; 
	padding-top: 10px;
	padding-right: 10px; 
	width: 340px; 
	height: 150px; 
	float: left 
}


#puce5  { 
	line-height: 20px; 
	background-image: url("../images/puces/puce-infosffff00.jpg");
	background-repeat: no-repeat; 
	background-position: right 50%; 
	text-align: center; 
	position: relative; 
	bottom: 15px; 
	left: 200px; 
	width: 110px; 
	height: 20px
}

#puce5bis  { 
	line-height: 20px; 
	background-image: url("../images/puces/puce-infosffcc00.jpg");
	background-repeat: no-repeat; 
	background-position: right 50%; 
	text-align: center; 
	position: relative; 
	bottom: 15px; 
	left: 200px; 
	width: 110px; 
	height: 20px
}



#photoactivite5  { 
	
	/*margin-bottom: 20px; 
	margin-left: 20px; 
	padding-top: 10px; 
	padding-right: 10px;
	height: 150px;*/ 
	float: left;	
}	

/*#photoactivite5 a:hover img {	
	position: relative;
	left: 340px;
	bottom: 280px;
}*/


/*-------------------------------- Activité 6----------------------------------------------------------- */
 
#activite6  {
	background-image: url("../images/triangle_cccc33.gif");
	background-repeat: no-repeat;
	background-position: 0 10px; 
	padding-top: 10px;
	padding-right: 10px; 
	width: 340px; 
	height: 150px; 
	float: left; 
}


#puce6  { 
	line-height: 20px; 
	background-image: url("../images/puces/puce-infoscccc33.jpg");
	background-repeat: no-repeat; 
	background-position: right 50%; 
	text-align: center; 
	position: relative; 
	bottom: 15px; 
	left: 200px; 
	width: 110px; 
	height: 20px
}

#photoactivite6  { 
	
	margin-bottom: 20px; 
	margin-left: 20px; 
	padding-top: 10px; 
	padding-right: 10px;
	height: 150px; 
	clear: float;
}

/*--------------------------fin de liste activités----------------------------------------------*/

/*#titre   { 
	background-image: url("../images/triangle_99ff99.gif"); 
	background-repeat: no-repeat; 
	background-position: left 50%; 
	width: 570px; 
	height: 20px 
}

#sous-titre {
	text-indent: 30px;
}

#fermer   {
	line-height: 20px; 
	background-image: url("../images/fermer2.jpg"); 
	background-repeat: no-repeat; 
	background-position: right 50%; 
	text-align: center; 
	text-indent: 20px;
	position: relative; 
	bottom: 20px; 
	left: 450px; 
	width: 110px; 
	height: 20px 
}
------------------------------------------------------------------------------ */



/* le texte descriptif est aligné avec le titre */
#descriptif {
	width: 510px;
	padding-top: 10px;
	padding-left: 30px;
	padding-right: 20px;
	text-align: justify;	
}

#descriptif  li {
	text-align: left;
	list-style-type: none;
	/*text-indent: -50px;*/
	width: 220px;
	padding-top: 20px;	
}

#descriptif li em {
	background-color: #cccc66;
}

#liste {}

#liste_gauche {
	float: left;
	text-align: justify;
		
}

#liste_droite {
	padding-left: 40px;
	padding-bottom: 10px;
	float: left;
	text-align: justify;		
}

/*--------------------- éléments de la page cours-escalade-adulte ----------------------- */

#descriptif1 {
	width: 510px;
	padding-top: 10px;
	padding-left: 30px;
	padding-right: 20px;
	text-align: justify;	
}

#descriptif1  li {
	text-align: left;
	list-style-type: none;
	/*text-indent: -50px;*/
	width: 220px;
	padding-top: 20px;	
}

#descriptif1 li em {
	background-color: #cccc66;
}

#liste {}

#liste_gauche1 {
	float: left;
	text-align: justify;
		
}

#liste_droite1 {
	padding-left: 40px;
	padding-bottom: 10px;
	float: left;
	text-align: justify;		
}

#liste_droite1 h2 {}

.module {}




/* une DIV pour fermer le conteneur corps1 */
.clearfloats {
	font-size: 0pt;
	line-height: 0px;
	height: 0px;
}

.descriptexte {
	clear: both;
	text-align: justify;
	word-spacing: -1px;
	padding-top: 2px;
}




#sinscrire    { 
	line-height: 20px; 
	background-image: url("../images/puces/puce-infos99ff99.jpg"); 
	background-repeat: no-repeat; 
	background-position: right 50%; 
	text-align: center; 
	position: relative; 
	bottom: 15px; 
	left: 400px; 
	width: 110px; 
	height: 20px 
}



#photo_2 {
	padding-top: 10px;
}

#photo_2 a {}

#photo_2 p {
	text-align: right;
	padding-right: 30px;
	font-size: 10px;
}


/* PIED DE PAGE
------------------------------------------
*/

/* le menu pied de page est dans un cadre gris   */
#pied_de_page {
	float: left;
	width: 850px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	height: 30px;
	line-height: 15px;
	padding-bottom: 3px;
	color: white;
	font-size: 10px;
	background-color: #cc9;
	text-align: center;
}

#pied_de_page a {
	color: white;
}

#pied_de_page a:hover {
	color: #999999;
}


/* le menu pied de page "newstyle"   */
#pied_de_page_newstyle {
	float: left;
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	height: 30px;
	line-height: 15px;
	padding-bottom: 3px;
	color: white;
	font-size: 10px;
	background-color: #cc9;
	text-align: center;
}

#pied_de_page_newstyle a {
	color: white;
}

#pied_de_page_newstyle a:hover {
	color: #999999;
}