/* Filename : style.css */

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

/* Barre d'outils qui appara�t dans les �crans "Listes d'�v�nements" et qui reprend les fonctions : search, rss et export as csv */

#se_list_toolbar {
   float : right;
   /*position : fixed;*/
}

.hand {
  cursor : pointer;
}

/* Les liens qui sont programmés pour s'ouvrir dans une nouvelle fenêtre auront une classe "external"; ceci permet d'afficher p.e. une icône comme ci-dessous afin d'informer l'utilisateur */

a.external {
   background: url(../../assets/images/external_link.png) no-repeat 100% 0;
   padding: 2px 11px 5px 0;
}

/* Général */

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

.favicon {
   background-repeat : no-repeat;
   padding           : 2px 0 3px 22px;
}

/* ----------------------------- PAGE DES INSCRIPTIONS --------------------------------------------- */

#se_Enrolments {
   margin-top       : 15px;
   padding          : 2px;
   border           : 1px black solid;
   background-color : #FBFBEF;
}

/* ----------------------------- 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         : 5px;
   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 {
   text-align : left;
}

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

div.se_whowillcome {
   text-align : left !important;

}

/* 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 SportingEventsClassTables si supporté */

div.se_imagegallery{
}

/* 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;
   text-align : center;
}


/* 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, div.vignette_right {
   width            : 100%;
}

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

table.vignette .miniature {
}

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

/*table.vignette .row_0 {
   background-color : #fbfbef;
}

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

/* ----------------------------- 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 {
}

/* Les pages qui affichent la liste des évènements affichent deux blocs : les évènements à venir et les évènements du passé.   Vous pouvez augmenter la distance de séparation entre ces deux blocs en ajustant la valeur ci-dessous.
*/


/* ----------------------------- 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-top: 5px;
   padding-right: 0px;
   padding-bottom: 5px;
   padding-left: 0px;
}

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      : 100%;
   overflow-x : hidden;
   overflow-y : hidden;
}

div.miniatureh {
   margin-top      : 5px;
   margin-bottom   : 5px;
   margin-left     : 5px; 
   margin-right    : 5px; 
   position : inline;
   float           : right;
   text-decoration : none;
}

/* 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-weight     : bold;
   margin-top      : 2px;
   margin-bottom   : 2px;
   padding-top     : 10px;
   text-transform  : uppercase;
}

/* 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;
}



div.mail_variables {
   margin-left : 20px;
   float       : left;
   min-width   : 130px;
   font-weight : bold;
   color       : #8A4B08;

}

div.mail_var_desc {
   float       : left;
   margin-left : 20px;
   min-width   : 140px;
   font-style  : italic;
}

/* Affichage de l'image de chargement Ajax */

.ajaxLoading {
   position         : absolute;
   z-index          : 100;
   background       : url(../../assets/images/loading.gif) no-repeat left center;
   width            : 20px;
   height           : 20px;
   margin           : 5px;
   padding          : 5px;
}


/* ---------------------------- FORMULAIRE DE SELECTION D'UNE IMAGE / D'UN FICHIER ----------------------------- */

.form_upload{
   margin            : 2px;
   padding           : 2px;
}

.photos {
   float            : left;
   position         : inline;
   width            : 100%;
   border           : 1px solid #DFDFDF;
}

.photos .item {
   float            : left;
   padding          : 2px;
   position         : inline;
   margin           : 5px;
   cursor           : pointer;
   border           : 1px solid white;
   height           : 75px;
}


/* Zone qui reprendra les noms des sous-dossiers */

.area_folders {
   border            : 1px solid #DFDFDF;
  margin-bottom    : 5px;
}

.area_folders ul {
   list-style-type   : none;
   padding-left      : 10px;
}


.area_folders li {
   background-repeat : no-repeat;
   padding-left      : 40px;
   margin            : 5px 0;
   height            : 20px;       /* Minimum 16px pour l'icône qui sert comme image pour la puce */
   cursor            : pointer;
}

/* Zone permettant de sélectionner un fichier */

.area_files {
   border            : 1px solid #DFDFDF;

}

/* Liste à puces : les noms des fichiers doivent s'afficher sous forme de liste à puces mais la puce sera remplacé par une icône */

.area_files ul {
   list-style-type   : none;
   padding-left      : 10px;
}

/* La liste à puces sert à afficher les noms des fichiers (kml, pdf, ...) disponibles.   L'image background-image est gérée au niveau du fichier utils.php; fonction SelectAFile */

.area_files li {
   background-repeat : no-repeat;
   padding-left      : 32px;
   margin            : 5px 0;
   height            : 20px;       /* Minimum 16px pour l'icône qui sert comme image pour la puce */
}

/* Le nom de fichier est cliquable : il faut afficher la main */

.area_files .filename {
   cursor            : pointer;
}

/* Affichage d'une icône pour supprimer le fichier */

.area_files .deletefile, .photos .deletefile {
   cursor            : pointer;
   padding-left      : 5px;
}

/* Affichage du message indiquant que le fichier a été supprimé */

.file_removed {
   background-color: #F5D0A9;
   font-weight     : bold;
}

/* Après avoir affiché la liste des images / fichiers, l'écran d'upload affichera une zone d'upload */


#upload_area {
   clear            : both;
   margin-top       : 10px;
}

#loading_status {
   background-color : red;
   clear            : both;
   display          : none;
}

.photos .item:hover {
   border           : 1px solid red;
}

/* Nom du dossier qui est parcouru */

.folder_upload {
   color           : #38610B;
   font-size       : x-small;
}

/* Paragraphe qui affichera un texte "Le dossier est vide*; ceci dans l'écran d'upload dès lors que le dossier de destination ne contient aucun fichier */

#upload_folderempty {
   color          : #0B3861;
   font-size      : 8px;
   padding-left   : 8px;
}


/* ---------------------------- AFFICHAGE DE MESSAGE DE DEBUG ----------------------------- */
/*
.debugTitle {
   background-color: #F8ECE0;
   color : #8A4B08;
   font-size: 16px;
   font-weight: bold;
   font-family: Serif;
}
*/
.debugError {
   background-color: red;
   color : white;
   font-size: 20px;
   font-weight     : bold;
   font-family: Serif;
}

.debugTODO {
   background-color: #D0F5A9;
   color : #0000FF;
   font-size: 16px;
   font-weight     : bold;
   font-family: Serif;
}

.debugInfo {
   background-color: #FEEFB3; /
   color           : #9F6000;
   font-size       : 12px;
   font-weight     : bold;
}

.debugFilename {
   color : #9F6000;
   font-size: 10px;
    font-family:Verdana;
}

.debugFunctionTitle {
   color       : green;
   font-weight : bold;
   font-size   : 10px;
}

div.DebugPanel-panel, .debugTitle {
 color           : #9F6000;
 background      : url(../../assets/images/img16/debug.png) no-repeat 10px 10px;
 background-color: #FEEFB3;
 font-size       : 16px;
 font-weight     : bold;
 border          : 1px solid;
 margin          : 10px 0px;
 padding         : 10px 10px 10px 32px; 
}

/*
 * Affichage d'une erreur de style SQL comme p.e. une requête mal construite
 */
div.se_SQLError {
 color           : #DF0101;
 background      : url(../../assets/images/img16/sql_error.png) no-repeat 10px 10px;
 background-color: #F5A9A9;
 font-size       : 1em;
 /*font-weight     : bold;*/
 border          : 1px solid;
 margin          : 10px 0px;
 padding         : 10px 10px 10px 32px; 
}


/* Mise en forme du footer "Propulsé par SportingEvents" */

#se_poweredby {
  clear       : both;	
  padding-top : 30px;
  font-family : verdana, sans-serif;
  font-size   : xx-small;
}