@font-face {
    font-family: 'PurisaMedium';
    src: url('purisa-webfont.ttf') format('truetype');
         }
/* Responsive Design
---------------------------------------- */

/* ====================================================================
   FEUILLE DE STYLES STRUCTURE
   ==================================================================== */


html {
	height: auto;
	font-size: 100%;
}

body {
	min-width: 290px;
	margin: 0;
	font-family: PurisaMedium, Verdana, "Bitstream Vera Sans", "Lucida Grande";
	font-size: 0.87em;
	line-height: 1.25;
	color: #fff;
 	background-color:#525252;
  	padding:  0;
	transition:all 350ms linear;
}

img{ width: auto;}

#global{
	padding: auto;
	width: 100%;
	margin: 0;
	margin-top: -10px;
	}

#principal {
	margin:auto;
	min-height: 700px;
	min-width: 0;
	width: auto;
	padding: 8px 5px;
	border-radius: 0px;border-top: 2px solid #fff;
	word-wrap: break-word;
	box-shadow: none;
	background: #363636;
	}

#bloc_left{ display: none;}

#bloc_rsp {
	padding: auto;
	width: 97%;
	margin: 0;
	padding: 8px 5px;
	display: block;
	background: #CECECE;
	color: #525252;
	border-top: 4px solid #525252;
	float:top;
	position: relative;
	margin-bottom: 10%;
	word-wrap: break-word;
	border-radius: 0px;
	box-shadow: none;
	}

#bloc_rsp h1{ text-align: center;}

/* ====================================================================
   FEUILLE DE STYLES entete
   ==================================================================== */
#master_header{
	background: url(img/slides/mobi/5.jpg) no-repeat right;
	border-bottom: 4px solid #d46f25;
	border-radius:  0;
	height: 153px;
	border-bottom: 2px solid #d46f25;
	margin:0;
}
span.rando_bloc, #slogan, .reseaux_sociaux{	display: none;	}

a.logo{
	background: url(img/VTTN_logo_resp.png) no-repeat;
	position: relative;
	display: block;
	height: 75px;
	margin:10px;
	width: 182px;
	padding-left: 10px;
}

#annonce_bar{
	position: relative;
	border-radius:  0;
	height: auto;
	z-index:2000;
	font-size: 1em;
	color: #fff;
	background: #CECECE;
	font-family: Helvetica, Verdana, "Bitstream Vera Sans", "Lucida Grande";
	margin: 0px;
	text-align: center;
	word-wrap: break-word;
}


#navigation {
	padding: 1px 1px;
	margin: 20px 1px 0 0px;
	display: block;
	z-index: 2000;
	position: absolute;
	float: left;
	width: auto;
	font-size: 1em;
	transition:all 350ms linear;
	}

#navigation a{
	border: 1px solid #b15d1f;
	border-radius: 3px ;
	background: #d46f25;
	width: auto;
	display: inline-block;
	padding: 2px;
	color: #FFF;
	font-weight: none;
	font-family: Helvetica, Verdana, "Bitstream Vera Sans", "Lucida Grande";
	transition:all 350ms linear;
	box-shadow: 2px 2px 4px #fff ;
	}

#navigation ul {
	margin: 0;
	padding: 0;
	margin-bottom: -10px;
	list-style: none;
}

#navigation li {
	display: inline;
}
/* Titres */
h1, h2, h4, h5{
	border-bottom: 4px solid #d46f25;
	border-bottom-colors: #FFFFFF #FFFFFF #d46f25;
	padding: 0 0 5px 4px;
	display: inline-block;
	color: #d46f25;
	width: 99%;
	}

/*Fin Hack */
h1 { font-size: 1.2em; }

h2 {
	text-align: center;
	font-size: 1.2em;
	}

h5{
	text-align: center;
	font-size: 1.2em;
}
/* ====================================================================
   FEUILLE DE STYLES contact.html, liens.html
   ==================================================================== */
 .identite, .identite1, .identite_lien, .identite_lien2, .info-forum{
	width: auto;
	padding:10px;
	height: 200px;
	box-shadow: 3px 3px 3px #777 ;
	}

 .identite{ background: #fff; }
 .identite1{ background: #E5E5E5; }
 .identite1:hover,  .identite:hover{ background: #DDD; }

 .identite_lien{ background: #D8D8D8; }
 .identite_lien2{ background: #DDD; }
 .identite_lien:hover, .identite_lien2:hover{ background: #828282; }

.logo-lien{ margin-left: auto; margin-right: auto; max-height: 100px; }
.role{
	font-size: 1.6em;
	color:#d46f25;
	font-weight: bold;
	margin-left:10px;
	margin-top: 0px;
	}

.contact0{

	font-style: italic;
	margin-left:40px;
	margin-top: 20px;
	margin-bottom: 110px;
	}
.prenomnom{ /* Prenom/Nom */
	color: #363636;
	font-size: 1.4em;
	font-style: italic;
	margin-left:10px;
	margin-top: 40px;

	}
.mail{ /* Mail*/
	margin-left:5px;
	margin-top: 60px;

	}
.forum{ /* Forum */
	margin-left:5px;
	margin-top: 90px;


	}
.telephone{ /* Telephone*/
	margin-left:5px;
	margin-top: 120px;

	}

.titre-lien{display: inline-block;}
.desc-lien{display: inline-block;}
.trombine-bureau{ width: 45px; height: 45px; margin: 0; }
.role, .contact0, .prenomnom, .mail, .forum, .telephone, .space{
	position: absolute;
	color:#363636;
		}

.icon-contactforum, .icon-contacttel, .icon-contactmail{
	background: url("img/sprite-icon.png") no-repeat;
	position: relative;
	width: auto;
	height: 34px;
	padding-left: 34px;
	vertical-align:middle;
	display:inline-block;
	line-height: 34px;
	text-align:left;
   	overflow: hidden;
	text-overflow: ellipsis;

}
.icon-inscription{
background-position: 0 0;


}
.icon-inscription a, .icon-planirando a{
 width: auto;
    }

.icon-planirando{	background-position: 0px -34px;		}
.icon-contacttel{	background-position: 0px -68px;		}
.icon-contactmail{	background-position: 0px -102px;	}
.icon-contactforum{	background-position: 0px -136px;	}

a.titre-lien {
	font-size: 1.4em;
	color: #d46f25;
	display:block;
	margin: 30px 0 0 20px;
	font-weight: bold;
	}

.logo-lien{display: block; margin-left: 25%; margin-right: 25%; max-height: 100px; background: #f2f2f2; }
.desc-lien{display: block; margin: 20px 0 0 15px; 	font-size: 1.2em;	color: #363636;}
/**/
/* ====================================================================
   FEUILLE DE STYLES index.html, *titre-article*-aXX.html, archive.html
   ==================================================================== */

#body_coment{
	width: auto;
	padding: 4px;
	box-shadow: 3px 3px 3px #777;
	background: #fff;
	color: #525252;
	height: auto;
	margin-bottom: 5px;
	font-family: Helvetica, Verdana, "Bitstream Vera Sans", "Lucida Grande";
	behavior: url(include/PIE.php);
	}

#body_comment>textarea{
padding: 5px;
}

#title_coment{
	color: #525252;
	border-bottom: 1px solid #FF0000; /*C94C1D*/
	display: block;
}

/*h3 pour les titres d'article*/
 h3{
	width: auto;
	padding: 4px;
	box-shadow: 3px 3px 3px #777 ;
	background: #fff;
	color: #525252;
	height: auto;
	margin-bottom: 5px;
	text-decoration:none;
	font-family: Helvetica, Verdana, "Bitstream Vera Sans", "Lucida Grande";
	font-size: 0.9em;
	behavior: url(include/PIE.php);
	}
  fieldset.article {
    width: auto;
 border: none;
  background: #424242;
  z-index: 1000;
  position: relative;
  }
.info, .info_input{
	display: block;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid #d46f25;
	border-radius: 5px;
	width: 90%;
	behavior: url(include/PIE.php);
}

.info{
	background: #F0F0F0;
	padding: 2px;
	color: #000;
	}

.article_body{	margin-top: 20px;	}

.auteur_info{
	float: right;	display: block;
	margin-top: 0px;
	font-size: 0.8em;
	color: #E2E2E2;
	}

.auteur_info2{
	float: left;
	margin: -10px;
	padding: 0 0 5px 5px;
	font-size: 0.8em;
	color: #E2E2E2;
	}

  fieldset.article img{
  	margin: 10px 0 10px 0;
    max-width: 100%;
    !height: auto;
  	background: #fff;
  	display: block;
  	padding: 5px 5px 20px 5px;
  	box-shadow: 3px 3px 3px #777;
   content: attr(alt);
  }
  fieldset.article img::before{
   content: attr(alt);
  }
#coment{	margin: 4px;	}



	/* ====================================================================
   FEUILLE DE STYLES lien.css
   ==================================================================== */

#rejoindre, #minilink, #facebooklink, #rsvp_link, #rsvp_link_off {
	background: #d46f25;
	font-family: "Trebuchet MS", Trebuchet, "URW Gothic L", Arial , "Bitstream Vera Sans" ,serif ;
	border-bottom: 1px solid #b15d1f;
	text-align: center;
	z-index:1;
	padding: auto;
	font-style: italic;
	font-size: 1.2em;
	border-radius: 5px;
	box-shadow: 2px 2px 0px #FFF;
	color: #fff;
	border: 1px solid white;
	behavior: url(include/PIE.php);
	}

	/* Liens */
a{
	color: #e4632c;
	font-style: italic;
	font-family: "Trebuchet MS", Trebuchet, "URW Gothic L", Arial , "Bitstream Vera Sans" ,serif ;
	text-decoration: none;
	}

a:hover{	text-decoration: underline;	}

 #rejoindre	{ display: block; height: 40px; min-width: 150px;  margin: 5px ;}
#rejoindre:after{ content: attr(data-title); line-height: 40px;	vertical-align: middle; }
#minilink	{ display: inline-block;	height: 20px; width: 110px; padding: 2px; }
#facebooklink	{ background: #3b579d;	display: inline-block; height: 20px; width: 110px; padding: 2px;}
#rsvp_link	{ width: auto; padding:3px; font-size: 1em; margin: 3px; font-weight: bold; }
#rsvp_link_off	{ background: #828282; width: auto; padding:3px; font-size: 1em; margin: 3px;}

#minilink:hover, #facebooklink:hover, #rsvp_link:hover{
	text-shadow: 0px 0px 9px #fff;
	color: #fff;
	transition:all 350ms linear;
	behavior: url(include/PIE.php);
	}

.icon-inscription, .icon-planirando{
	background: url("img/sprite-icon.png") no-repeat;
	float: left;
	position: relative;
	width: 34px;
	height: 34px;
	z-index:10;
	display: block;
	line-height: 34px;
	text-align:center;
   	overflow: hidden;
	text-overflow: ellipsis;
}

.icon-inscription{	background-position: 0 0;	}
.icon-inscription a, .icon-planirando a{	width: auto;	}
.icon-planirando{	background-position: 0px -34px;	}

	/* =================================
   FEUILLE DE STYLES DES FORMULAIRES
   ================================= */
label.bulletin, label.bulletin_frais, label.bulletin_maillot {
	font-family: "Trebuchet MS", Trebuchet, "URW Gothic L", Arial , "Bitstream Vera Sans" ,serif ;
	color: #525252;
	font-weight: bold;
}

label.bulletin{ display: block; text-align: center;}
label.bulletin_frais { display: inline; width: auto; }
span.bulletin_frais { display: inline; margin-left: auto; }

fieldset.bulletin{
	margin:auto;
	min-width: 0;
	width: 90%;
	padding:10px;
	height: auto;
	box-shadow: 3px 3px 3px #777 ;
	background: #fff;
	border-radius: 0px;
	border: none;
	color: #525252;
	font-weight: bold;
	font-family: "Trebuchet MS", Trebuchet, "URW Gothic L", Arial , "Bitstream Vera Sans" ,serif ;
	behavior: url(include/PIE.php);
	}

legend.bulletin{
	color: #d46f25;
	box-shadow: 3px 3px 3px #777 ;
	background: #fff;
	border-radius: 5px;
	font-size: 1.2em;
	margin-top: 5px;
	behavior: url(include/PIE.php);
	}

label {
	font-family: "Trebuchet MS", Trebuchet, "URW Gothic L", Arial , "Bitstream Vera Sans" ,serif ;
	color: white;
}

fieldset{
	border-radius: 5px;
	border: 3px solid #d46f25;
	width: auto;
	behavior: url(include/PIE.php);
}

legend{	color: #d46f25; }


.formulaire{	width: auto;	}

input[type=text], input[type=tel], input[type=email], input[type=date], input[type=number]{
	 	background-color: #363636;
		color: white;
		border-bottom:1px solid #d46f25;
		border-top: none;
		border-left: none;
		border-right: none;
		}

fieldset input[type=text], fieldset input[type=tel], fieldset input[type=email], fieldset input[type=date], fieldset input[type=number]{
	 	background-color: transparent;
		color: #525252;

		}

		input[type=text]:focus, input[type=tel]:focus, input[type=email]:focus, input[type=date]:focus, input[type=number]:focus {
	 	background-color: #5E5E5E;
		}
		input[type=text]:hover, input[type=tel]:hover, input[type=email]:hover, input[type=date]:hover, input[type=number]:hover {
		border-bottom:1px solid #b15d1f;
		}


textarea{
	width:100% ;
	height:150px;
	margin: auto;
	}

input.info_input{
	background: #F0F0F0;
	color: #000;
	}

input[type=submit], input[type=reset]{
	border: 1px solid #d46f25;
	background: #F0F0F0;
	color: #d46f25;
	border-radius: 5px;
	transition:all 350ms linear;
	behavior: url(include/PIE.php);
}

input[type=submit]:hover, input[type=reset]:hover{
	border: 1px solid #F0F0F0;
	background: #d46f25;
	color: #F0F0F0;
	border-radius: 5px;
	transition:all 350ms linear;
	behavior: url(include/PIE.php);
	}
/* ============================
   FEUILLE DE STYLE DES TEXTES
   ============================ */

/* Listes */
ul, ol {
	margin: .75em 0 .75em 24px;
	padding: 0;
}
ul {
	list-style: square;
}
li {
	margin: 0;
	padding: 0;
}

/* Paragraphes */
p {
	font-family: "Trebuchet MS", Trebuchet, "URW Gothic L", Arial , "Bitstream Vera Sans" ,serif ;
}

#pied, #pied a, #pied a:hover, #pied a:visited{
		text-align: center;

color: #fff;
	}

/*
===========================
FEUILLE DE STYLE AGENDA (planirando.html, evenement.php
===========================
*/

#content_agd{
	padding: 4px;
	box-shadow: 3px 3px 3px #777 ;
	background: #525252;
	behavior: url(include/PIE.php);
}


#content_evt{
	padding: 2px;
	box-shadow: 3px 3px 3px #DDD ;
	background: #E5E5E5;
	min-height: 300px;
	display: block;
	behavior: url(include/PIE.php);
	}

.entete_agd{
	background: radial-gradient(ellipse at center top, rgb(221, 221, 221), rgb(212, 111, 37));
 	box-shadow: 3px 3px 3px #FFF ;
	font-weight: bold; font-style: italic;
	margin-top: 0px;
	behavior: url(include/PIE.php);
	}

 .evenement_agd, .selection_agd, .club_agd, .ffct_agd{ font-size: 1.2em; color: rgb(212, 111, 37); }

.evenement_agd{
	background: linear-gradient(to top left, rgb(221, 221, 221), rgb(130, 130, 130));
 	behavior: url(include/PIE.php);
	}

 .entete_agd{
	background: radial-gradient(ellipse at center top, rgb(221, 221, 221), rgb(212, 111, 37));
	box-shadow: 3px 3px 3px #FFF;
	font-weight: bold;
	font-style: italic;
	margin-top: 0px;
	behavior: url(include/PIE.php);
	}

  .evenement_agd{
	background: #FFF6D6;
	box-shadow: 3px 3px 3px #AAAAAA;
	behavior: url(include/PIE.php);
}
.evenement_agd .date_agd,
.evenement_agd .titre_agd,
.evenement_agd .date_evt,
.evenement_agd .date_Xevt{ border-right: 3px solid #AAAAAA;}

.evenement_agd .info_agd,
.evenement_agd .titre_evt{ border-right: none; }

 .selection_agd{
	background: #FFF6D6;
	box-shadow: 3px 3px 3px #FD9900;
	behavior: url(include/PIE.php);
}

.selection_agd .date_agd,
.selection_agd .titre_agd,
.selection_agd .date_evt_rsp,
.selection_agd .date_Xevt_rsp{ border-right: 3px solid #FF9900;}

.selection_agd .info_agd,
.selection_agd .titre_evt{ border-right: none; }

 .club_agd{
	background: #FFF6D6;
	box-shadow: 3px 3px 3px #66CC00;
	behavior: url(include/PIE.php);
}

.club_agd .date_agd,
.club_agd .date_evt_rsp,
.club_agd .date_Xevt_rsp,
.club_agd .titre_agd{ border-right: 3px solid #66CC00; }

.club_agd .info_agd, .club_agd .titre_evt{ border-right: none; }

.ffct_agd{
	background: #FFF6D6;
	box-shadow: 3px 3px 3px #3DA4DB;
	behavior: url(include/PIE.php);
	}

 .date_agd_rsp, .date_evt_rsp,.date_Xevt, .titre_agd, .info_agd{ padding: 0 5px 0 5px; display: inline-block; text-align: center; vertical-align: middle; }

 .date_agd_rsp{ width: 17%;}

 .titre_agd{ width: 58%;}

  .date_evt_rsp{ width: 30%; font-size: 1.6em;}
  span#heure_evt{  font-size: .5em; margin-top: -4px; display: block;}
  .date_Xevt_rsp{ width: 30%;  font-size:.9em;}
 .titre_evt{ width: 60%; font-size: 1.2em; border-right: none;}

 .info_agd{ width: 15%; border-right: none;}

 .date_agd, .date_evt, .date_Xevt{display: none;}

   #text_evt p{
padding: 4px;
color: #525252;
font-size: 1.4em;
}
#bottom_evt{
border-top: 2px solid grey;
width: 100%;
height: 120px;
color: #525252;
font-size: 1.2em;
margin-bottom: 5px;



}

.opt_rsvp{
border-right: 2px solid grey;
display: block;
padding: 2px;
width: 35%;
height: 100%;
float: left;
}
.localisation_evt{
width: 64%;
height: 100%;
display:block;
margin-left: 36%;
}

a#nafix_evt, a#nafix_evt:hover{
color: #336666;
font-weight: bold;
font-style: italic;
}

/* ============================
   FEUILLE DE STYLE  Calendrier.beta.php
   ============================ */
	table.Cal{ width: 100%;
	font-family: Helvetica, Verdana, "Bitstream Vera Sans", "Lucida Grande";
	margin: 0px;
	box-shadow: 3px 3px 3px #DDD;
	background: #E5E5E5;
	behavior: url(include/PIE.php);
}

th, th.TitreTop{
	background: linear-gradient(to top, rgb(221, 221, 221), rgb(212, 111, 37));
	box-shadow: 3px 3px 3px #777;
	height: 30px;
	padding: 0px;
	font-weight: bold; font-style: italic;
	margin-top: 0px;
	behavior: url(include/PIE.php);
}
th{
	background: linear-gradient(to top, rgb(221, 221, 221), rgb(212, 111, 37));
	height: 30px;
	behavior: url(include/PIE.php);
}

th.TitreTop{ background: #fff;
	height: 15px;
	color: #D46F25;
	}


td{
	font-family: Helvetica, Verdana, "Bitstream Vera Sans", "Lucida Grande";
	background: #fff;
	box-shadow: 3px 3px 3px #777;
	width: 40px;
	height: 40px;
	padding: 2px;
	margin: 1px;
	behavior: url(include/PIE.php);
	}
	.Cal_Today{ background: #ffc59b; }
		.Cal_Holiday{ background: #e9e9e9; }
	td.Cal_Titre{
		color: #d46f25;
		font-size: 1.2em;
		text-align: center;
	}
	td.CyclopeCat { padding: 0 auto 0 auto; }
	.Cal_Empty{ background: transparent; 	box-shadow: none;}



	span.Cal_Date{
		z-index: 1;
		font-size: 0.8em;
		padding: 0px auto auto 1px;
		width: auto;
		height: 8px;
		margin-top: 0px;
		display: block;
		color: #d46f25;
		font-weight: bold;

		 	}

	span.Cal_Content{
		z-index: 4;
		float: left;
		min-height: 40px;
		display: block;
		margin-top: 10px;
		color: grey;
		}

	a.Cal_Event{
		float: left;
color: grey;
		font-size:0.5em;
	}

a.evenement_Cal, a.selection_Cal, a.club_Cal{


	display: block;
	text-align: center;
	vertical-align: middle;
	font-size: 0.7em;
	line-height: 0.8em;
	border-radius: 4px;
	padding: 1px;
	margin: 1px;
	border: 1px solid grey;
	display: block;
	behavior: url(include/PIE.php);
	}

a.evenement_Cal{ color: #5C758C; background-color: #ECEDEE; }
a.selection_Cal{ color: #fff6e8; background-color: #d46f25; }
a.club_Cal{ color: #fff6e8; background-color: #4D9B00; }


span.min_Cal, a.norm_Cal, a.max_Cal{
	display: block;
	text-align: center;
	vertical-align: middle;
	font-size: 0.7em;
	line-height: 0.8em;
	border-radius: 4px;
	padding: 2px;
	margin: 2px;
	border: 1px solid grey;
	display: block;
	behavior: url(include/PIE.php);
	}

span.min_Cal{ color: #5C758C; background-color: #fff; }
a.norm_Cal{ color: #5C758C; background-color: #ECEDEE; }
a.max_Cal{ color: #fff6e8; background-color: #d46f25; }
th.Day_RSP{ display: table-cell;}
th.Day{ display: none; }

/* ============================
   FEUILLE DE STYLE DES PLUGINS
   ============================ */
#maintenance{
	color: #FF0000;
	text-align: center;
}

/* Module Photo */


.shadow {
    display:block;
    position:relative;
}
.shadow::before {

    position:absolute;
    width:auto;
    height:auto;
    box-shadow:0px 0px 15px 1px rgba(0,0,0,1.5) inset; 	/* bordure intérieure autour de la photo */
behavior: url(include/PIE.php);
	}


/***Polaroid2**/
.polaroid{ width: 121px;margin-left: auto; margin-right: auto; }
.polaroid_leclub{ width: 300px;margin-left: auto; margin-right: auto; }
.polaroid img, .polaroid_leclub img{
	background: #fff;
	display: block;
	padding: 5px 5px 5px 5px;
	box-shadow: 3px 3px 3px #777;
	behavior: url(include/PIE.php);
		}
.polaroid img{
	width: 121px;
	z-index: 500;
	}
.polaroid_leclub img{
	width: 300px;
	}


.polaroid p, .polaroid_leclub p{
	background: #fff;
	color: grey;
	display: block;
	text-align: center;
	margin-top: 0px;
	padding: 0px 5px 15px 5px;
	box-shadow: 3px 3px 3px #777;
	z-index: 1600;
	behavior: url(include/PIE.php);
}

.polaroid_leclub p{	width: 300px;}
.polaroid p{	width: 121px;}

img.polarImg{
	background: #ddd;display: block;
	box-shadow: 3px 3px 3px #777 ;
	behavior: url(include/PIE.php);
	}
/* plugin planirando*/
/*Bloc planirando*/
.MiniGenda{
	font-family: Arial;
	font-size: 1.4em;	text-align: center;
 background: #FFF6D6;
	color: #525252;
	display: block;
	padding: 5px 5px 5px 5px;
	box-shadow: 3px 3px 3px #777;
	behavior: url(include/PIE.php);
	}



.MiniGendaTitre{
	background: #d46f25;
	border-bottom: 1px solid #b15d1f;
	text-align: center;
	z-index:1;
	padding: auto;
	font-style: italic;
	font-size: 1.2em;
	display: block;
	width: auto;
	margin: 5px;
	border-radius: 5px;
	box-shadow: 2px 2px 0px #fff;
	color: #fff;
	border: 1px solid #fff;
	behavior: url(include/PIE.php);
}

/**/
p.vide{
	font-size: 0.8em;
	}