/* ---------------------------------------------------------------------------------------- */
/*                                                                                          */
/* Ce CSS est utilisé par la partie utilisateur du composant SportingEvents.                */
/*                                                                                          */
/* ---------------------------------------------------------------------------------------- */

/* Général */

a.noborder, img.noborder {
  border :0px;
  text-decoration: none;
}


/* ----------------------------- PAGE DE DESCRIPTION D'UN ÉVÈNEMENT  ----------------------------- */

/* La page de description d'un évènement est constitué de plusieurs parties : d'un résumé, de la zone description, de la zone "Personne de contact", ... */
/* Les styles ci-dessous vont permettre de styliser chaque partie. */

/* Style utilisé pour afficher les chapitres (description, informations complémentaires, classement, album photo, ...) */
/* Le style heading 1, heading 2, ... est défini dans les paramètres du composant. */

h1.chapitre, h2.chapitre, h3.chapitre, h4.chapitre, h5.chapitre {
   padding-top         : 20px;
   padding-bottom      : 5px;
}

/* Page de description de l'évènement.   Ce style englobe tout ce qui s'affiche dans la page; du résumé à la zone commentaire */

div.se_eventpage {   
}

/* Style qui s'appliquera à la zone "Description", titre de chapitre inclus */ 

div.se_description {
}

/* Style qui s'appliquera à la zone "Personne de contact", titre de chapitre inclus */ 

div.se_contactperson {
}

/* Style qui s'appliquera à la zone "Point de départ", titre de chapitre inclus */ 

div.se_startpoint {
}

/* Style qui s'appliquera à la zone "Informations complémentaires", titre de chapitre inclus */ 

div.se_additionnalinfo {
}

/* Style qui s'appliquera à la zone "Classement de l'épreuve", titre de chapitre inclus */ 

div.se_rankingtable {
   align : left;
}

/* Style qui s'appliquera à la zone "Qui va participer", titre de chapitre inclus */ 

div.se_whowillcome {
   align : left;
}

/* Style qui s'appliquera à la zone "Données topographiques", titre de chapitre inclus */ 

div.se_topographic {
}

/* Style qui s'appliquera à la zone "Album photo", titre de chapitre inclus */ 

div.se_albumphoto {
}

/* Style qui s'appliquera au titre du chapitre reprennant la gallery d'images (Phoca Gallery, MorfeoShow, ...).  Veuillez vous rendre dans les paramètres du composant pour adapter les couleurs et autres settings si supporté */ 

div.se_imagegallery{
}

/* Style qui s'appliquera à la zone des commentaires, titre de chapitre inclus */ 

div.se_comments {
}


/* Affichage de l'album photo */

.divPhoto {
   position: relative;
   display: block;
}

divPhoto.Photo {
   position: absolute;

}

/* Dans les paramètres du composant, pour la vue évènement; il est possible de déterminer un texte d'introduction qui sera affiché avant la description de l'évènement.  Ci-dessous le style à adapter pour personnaliser l'affichage du texte d'intro */

div.se_event_view_text_before {
}

/* Dans les paramètres du composant, pour la vue évènement; il est possible de déterminer un texte d'introduction qui sera affiché après la description de l'évènement.  Ci-dessous le style à adapter pour personnaliser l'affichage du texte d'intro */

div.se_event_view_text_after{
}

/* Ce style est utilisé dans la page de description d'un évènement et correspond à la ligne des titres des tableaux reprenant le classement
   de l'épreuve ainsi que le tableau qui reprend la liste des inscrits */

table.sortable thead {
   background-color : #eee;
   color            : #666666;
   font-weight      : bold;
   cursor           : default;
}

/* Utilisé pour l'affichage du lien "Cliquez ici pour ajouter votre nom à la liste des participants */

.addmyname {
   font-size : 8pt;
   align     : center;
   cursor    : pointer;
   padding-bottom : 20px;
}

/* Affichage de la carte Google Map.   Ce style est celui de la DIV dans laquelle la carte s'affiche */

.googlemap {
   background : #f0f0f0 10px 50% no-repeat;
   font-size  : 8pt;
   align      : center;
}

/* Style utilisé pour l'affichage de la légende de la photo */

div.divPhoto legende {
   background   : #111;
   filter       : alpha(opacity=55);
   opacity      : .55;
   color        : #fff;
   position     : absolute;
   bottom       : 0;
   left         : 0;
   padding      : 10px;
   border-top   : 1px solid #999;
}

/* Il s'agit du style utilisé lorsqu'on affiche la liste des évènements sous forme de vignettes (layout a et b) ainsi que dans la page de description de l'évènement  */

table.event_header, table.vignette, div.vignette {
   width            : 100%;
}

/* Affichage du titre de l'événement lorsqu'on affiche la liste des événements sous forme de vignettes (layout a et b) ainsi que dans la page de description de l'événement  */

table.vignette .titre {
   width:100%;
   text-transform: uppercase;
}

/* Style qui est utilisé lorsque la miniature représentant l'évènement est affiché */

table.vignette .miniature {
}

/* Affichage des dates (début/fin) de l'évènement lorsqu'on affiche la liste des évènements sous forme de vignettes (layout a et b) ainsi que dans la page de description de l'évènement  */

table.vignette .date {
  white-space: nowrap;
}

/* Affichage de la pratique sportive de l'évènement lorsqu'on affiche la liste des évènements sous forme de vignettes (layout a et b) ainsi que dans la page de description de l'évènement */

table.vignette .sport {
  white-space: nowrap;
}

/* Affichage du type de parcours de l'évènement lorsqu'on affiche la liste des évènements sous forme de vignettes (layout a et b) ainsi que dans la page de description de l'évènement */

table.vignette .parcours {
  white-space: nowrap;
}

/* Affichage de la distance de l'évènement lorsqu'on affiche la liste des évènements sous forme de vignettes (layout a et b) ainsi que dans la page de description de l'évènement */

table.vignette .distance {
  white-space: nowrap;
}

/* ----------------------------- AFFICHAGE DES EVENEMENTS SUR LE FRONT END ----------------------------- */
/*                               Layout : vignette (default, layouta et layoutb)                         */

table.vignette .row_0 {
   background-color : #fafafa;
}

table.vignette .row_1 {
   background-color : #eaeaea;
}

/* ----------------------------- AFFICHAGE DES EVENEMENTS SUR LE FRONT END ----------------------------- */
/*                               Tous les layouts                                                        */

/* Dans les paramètres du composant, pour la vue calendrier mensuel; il est possible de déterminer un texte d'introduction qui sera affiché avant le calendrier.  Ci-dessous le style à adapter pour personnaliser l'affichage du texte d'intro */

div.se_monthly_view_text_before {
}

/* Dans les paramètres du composant, pour la vue calendrier mensuel; il est possible de déterminer un texte de conclusion qui sera affiché arpès le adapter pour personnaliser l'affichage du texte de conclusion */

div.se_monthly_view_text_after {
}

/* ----------------------------- AFFICHAGE DES EVENEMENTS SUR LE FRONT END ----------------------------- */
/*                               Layout : liste à option                                                 */

/* Affichage du lien "Plus d'infos..." lorsqu'on affiche la liste des évènements sous forme de vignettes (layout a et b) */

div.vignette .moreinfo {
  padding-top : 20px;
}

/* Affichage du nom du mois dans la liste des évènements si l'option est activée */

span.events_month {
   font-size       : 12pt;
   font-weight     : bold;
   line-height     : 2;
}

/* Style utilisé lorsqu'une liste d'évènements est affichée.   Ce style est celui des listes à puces; une puce par évènement */

li.events {
   list-style      : none;
   background      : url(../../assets/images/events_bullet.gif) no-repeat left center;
   padding-left    : 16px;
   line-height     : 1.5;
}

/* ----------------------------- AFFICHAGE DES EVENEMENTS SUR LE FRONT END ----------------------------- */
/*                               Layout : tableau (layout e, f et g)                                     */

table.events {
   width: 100%;
}  

th.events {
   vertical-align : top;
   font-size      : 8pt;
   padding        : 5px;
}

td.events_month {
   vertical-align  : bottom;
   font-size       : 12pt;
   font-weight     : bold;
}

td.events {
   text-align      : left;
}

/* Ce style va s'appliquer aux colonnes "Date de début" et "Date de fin" */

td.event_date {
   white-space: nowrap;  /* Interdit le retour à la ligne entre la date et l'heure */
}

table.events .row_0 {
   background-color : #fbfbef;
}

table.events .row_1 {
   background-color : #effbef;
}

/* ----------------------------- AFFICHAGE DES EVENEMENTS SUR LE FRONT END ----------------------------- */
/*                               Layout : div (layout h)                                                 */

div.layouth {
   width      : 620px;
   overflow-x : hidden;
   overflow-y : hidden;
}

/* Chaque évènement s'affiche dans une div event */

div.event {
   margin-top    : 0px;
}

/* Titre de l'évènement */

div.layouth .titre {
   height          : 20px; 
   font-size       : 16px;
   font-style      : bold;
   margin-top      : 2px;
   margin-bottom   : 2px;
   padding-top     : 10px;
   text-transform  : uppercase;
   font-weight     : bold;
}

/* Affichage du titre de l'évènement; sous forme d'hyperlien */

div.layouth .titre a {
   text-decoration : none;
   font-weight     : bold;
}

div.layouth .row_0 {
   background-color : #fbfbef;
}

div.layouth .row_1 {
   background-color : #effbef;
}


/* ---------------------------- AFFICHAGE DE MESSAGE DE DEBUG ----------------------------- */

.debugTitle {
   background-color: red;
   color : white;
   font-size: 16px;
   font-style: bold;
   text-transform: uppercase;
}

.debugInfo {
   background-color: #8B8B8B;
   color : white;
   font-size: 12px;
   font-style: bold;
}

div.DebugPanel-panel {

  padding     : 5px;
  margin-left : 20px;
  margin-right: 20px;

  font-family : verdana;
  font-size   : 8pt;
  color       : yellow;
  font-style  : italic;

  border      : 2px solid #ddd;
  border-color: #white #000 #000 #white;
  background  : red;

  position    : absolute;
  left        : 0;
  top         : 0;
}