/* Filename : event_page.css */

/*
 * Style de la page de description d'un évènement.
 */

/*
 * Lors de la création d'une entrée dans le menu Joomla vers SportingEvents, il est possible de définir un texte 
 * d'introduction et/ou de conclusion.   Les styles ci-dessous seront alors utilisés 
 */
.se_event_view_text_before, .se_event_view_text_after {
    width: auto;
    font-size: 12px;
    font-family: Comic Sans MS;
    color: #088A08;
    margin: 1em;
    padding: 5px;
    border: 1px solid green;
    margin: 0px 10% 5px 12px;
    left: 0px;
}

/*
 * Toolbar qui s'affiche dans la page de description d'un évènement et qui contient, p.e., les icônes pour l'édition, 
 * l'exportation en PDF et l'envoi de l'adresse de la page par email 
 */
#se_event_toolbar {
    /*float  : right;*/
    margin: 0px;
}

/*
 * Mise en page de la page de description de l'évènement.   La classe .se_event_fullpage reprend tout : la zone résumé et chaque chapitre 
 * (description, point de départ, ...) 
 */
div.se_event_fullpage {
    width: 100%;
    padding: 2px;
    /*float    : left*/
}

/* 
 * Titre des chapitres ("description", "point de d?part", "personne de contact", ... 
 */
.se_event_chapitre {
   color          : #58ACFA;
   clear          : both;   /* Parce que p.e. la zone de description pourrait contenir du HTML avec un style de type clear:left. */
   font           : 1.4em "Arial Narrow", Helvetica, Arial, Geneva, sans-serif;
   font-weight    : bold;
   text-align     : left;
   text-transform : uppercase;
}

/* 
 * Espacement entre chaque chapitre
 */
div.se_event_chapter_separator {
   height: 1em;
}

/* 
 * Affichage de la zone description de l'évènement
 */
div.se_event_description {
}

/* 
 * Affichage de la personne de contact 
 */
div.se_event_contactperson {
}

/* 
 * Affichage de la zone Point de départ
 */
div.se_event_startingpoint {
   text-align : left;
}

/*
 * Affichage du nom de l'endroit
 */
div.se_event_startingpoint p.titre {
    font: bold 100% Arial, Helvetica, sans-serif;
}

/*
 * Affichage du bloc adresse.   Ce bloque englobe la rue, la ville et le pays 
 */
div.se_event_startingpoint div.adresse {
    padding: 10px;
}

/*
 * Affichage de la rue 
 */
div.se_event_startingpoint div.rue {
    display: inline; /* Inline afin de rester sur la même ligne */
    font: 80% Arial, Helvetica, sans-serif;
}

div.se_event_startingpoint div.phone, div.se_event_startingpoint div.fax, div.se_event_startingpoint div.email, div.se_event_startingpoint div.website {
    font: 80% Arial, Helvetica, sans-serif;
}

div.se_event_startingpoint div.rue:after {
    /*content:" - ";                                        /* Affichage d'un trait d'union entre la rue et la localité */
}

/* 
 * Affichage de la ville 
 */
div.se_event_startingpoint div.ville {
    /*display:inline;                                        /* Inline afin de rester sur la même ligne.  Supprimer cette ligne pour que la ville s'affiche sur une nouvelle ligne */
    font: 80% Arial, Helvetica, sans-serif;
}

/* 
 * Affichage du pays 
 */
div.se_event_startingpoint div.pays {
    font: 80% Arial, Helvetica, sans-serif;
}

/* 
 * Affichage de la description de la localisation 
 */
div.se_event_startingpoint div.se_description_location {
    padding: 0px;
}

/* 
 * Intégration d'une carte style GoogleMap.  La largeur et la hauteur de la carte sont à définir dans les paramètres globaux du composant
 */
div.se_map_canvas {
   margin: auto;
}

/* 
 * Affichage d'un lien vers une carte style GoogleMap 
 */
div.se_event_startingpoint div.map_url {
   padding: 10px;
}

/* 
 * Affichage des ressources 
 */
div.se_event_ressources {
}

/* 
 * Affichage des différents liens qui composent une ressource 
 */
div.se_event_ressources ul.links {
    list-style-type: none !important;
    padding-left: 10px;
}

div.se_event_ressources ul.links li {
    background-image: url(../../assets/images/img16/links.png); /* Image par défaut.   Sera écrasée par celle spécifiée dans l'écran de gestion des sports */
    margin: 5px 0 !important;
    background-repeat: no-repeat; /* La bullet qui représente le sport ne doit s'afficher qu'une seule fois; exactement comme une bullet traditionnelle */
    background-position: 0px 50%; /* 50% en vertical d'où un centrage vertical de la bullet */
    padding-left: 20px !important; /* La bullet fait 16 pixels.   Veuillez à laisser donc au moins 20 px entre la puce et le texte */
}

/* 
 * Affichage du formulaire d'inscription
 */
div.se_event_enrolment {
}

/* 
 * Utilisé lors de l'affichage du texte "Nombre maximum de participants atteint" càd lorsque les inscriptions à un 
 * évènement sont autorisées et que le nombre max. de participants est atteint 
 */
.se_enrol_max_reached {
    font-style: italic;
}

/* 
 * Style pour l'affichage du texte "Nombre de places restantes : xx" dès lors qu'un nombre max a 
 * été spécifié pour l'inscription à l'évènement. 
 */
.se_remainingplaces {
    font-style: italic;
    /*font-size : 6pt;*/
}

/* 
 * Dès lors qu'un nombre max. de participants a été spécifié, ceux qui s'inscrivent en overbooking (au-delà du nombre), 
 * seront affiché p.e. en rouge pastel 
 */
.se_overbooking {
    background-color: #F5A9D0; /* Mauve pastel */
}

/* 
 * Les autres; ceux dont l'inscription est valide (pas overbooking) seront p.e. affiché en vert pastel 
 */
.se_goodbooking {
    /*background-color:#ECF8E0;*/
    background-color: #f7fbff;
}

/* 
 * Stylisation de l'inscription de type "Je viendrais" 
 */
.se_willcome {
}

/* 
 * Stylisation de l'inscription de type "Je ne viendrais pas".  Par défaut, à l'affichage de la page, il ne faut pas l'afficher. 
 */
.se_notcome {
    /*   display : none;*/
}

/* 
 * Stylisation de l'inscription de type "Je viendrais peut-être".  
 * Par défaut, à l'affichage de la page, il ne faut pas l'afficher. 
 */
.se_perhaps {
    /*   display : none;  */
}

/* 
 * L'inscription n'est pas publiée 
 */
.se_unpublishedbooking {
    background-color: #F8E0E0; /* Rouge pastel */
}

/* 
 * L'inscription est pending soit en instance d'approbation 
 */
.se_pendingbooking {
    /*background-color : #FFE2A5;   /* Orange pastel */
}

/* 
 * Utilisé pour l'affichage du lien "Cliquez ici pour ajouter votre nom à la liste des participants
 */
.se_addmyname {
    font-size: 8pt;
    cursor: pointer;
    padding-bottom: 20px;
}

/* 
 * Tableau des personnes qui vont participer / qui ont participé à un évènement 
 */
div.se_Participants {
   text-align: left;	
}

/* 
 * Tableau des inscrits 
 */
table.se_Participants {	
   width          : 98%;                 /* Utilisez 'auto' pour une largeur automatique basée sur le nombre de colonnes du tableau des inscrits */    
   text-align     : center;
   border         : 5px solid #e5eff8;
   margin         : 0.5em;
   border-collapse: collapse;
}

/* 
 * Tableau des inscrits - Première ligne; celle des titres des colonnes 
 */
table.se_Participants th {
    background: #f4f9fe;
    text-align: center;
    font: bold "Century Gothic", "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #66a3d3;
    padding: 10px;
}

/* 
 * Tableau des inscrits : mise en forme des colonnes 
 */
table.se_Participants td {
    color: #678197;
    border-bottom: 1px solid #e5eff8;
    border-left: 1px solid #e5eff8;
    padding: .3em 1em;
}

/*
 * Première colonne, celle contenant le numéro d'ordre (#) 
 */
table.se_Participants .nbr {
    width: 10px;
}

/* 
 * Colonne reprennant l'avatar du participant.
 * La taille et la largeur de la colonne sera définie dans le code PHP de SportingEvents car devant tenir compte des paramètres
 * "Largeur de la photo" et "Hauteur de la photo"; paramètres qui sont définis dans l'écran Paramètres du composant 
 */
table.se_Participants .avatar {
}

/*
 * Interdit de passer à la ligne pour les champs date.   Le passage à la ligne est provoqué lorsque la largeur du template est trop
 * petit que pour permettre l'affichage de toute la largeur du tableau
 */
table.se_Participants .temps, table.se_Participants .date {  
	white-space: nowrap; 
}

/* 
 * Colonne reprennant le nom / l'alias du participant 
 */
table.se_Participants .name {
}

/* 
 * Colonne reprennant la date d'inscription 
 */
table.se_Participants .enroldate {
    color: red;   
	white-space: nowrap; 
}

/* 
 * Style qui s'appliquera à la zone "Album photo", titre de chapitre inclus 
 */
div.se_albumphoto {
}

/* 
 * Affichage de l'album photo 
 */
#se_Photo {
    position: relative;
    display: block;
}

#se_Photo.Photo {
    position: absolute;
}

/* 
 * Affichage de l'album photo interne 
 */
div.se_event_albumphoto_container {
    width: 98%;
    text-align: center;
}

/* 
 * Style utilisé pour l'affichage de la légende de la photo 
 */
div.se_event_albumphoto legende {
    background: #111;
    filter: alpha(opacity = 55);
    opacity: .55;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
    border-top: 1px solid #999;
}

/* 
 * Style qui s'appliquera à la zone des commentaires, titre de chapitre inclus 
 */
div.se_comments {
}

/* 
 * Espacement entre la zone de résumé (vignette + détail) et le premier chapitre (normallement il s'agit de la description) 
 */
div.se_event_div_summary_separator {
    height: 16px;
}

/* 
 * Effet d'ombrage de la zone résumé - http://www.dynamicdrive.com/style/csslibrary/item/css-image-drop-shadows/ 
 */
.se_event_div_summary_shadow {
    position: relative;
    left: 7px; /*Number should match -left shadow depth below*/
    top: 7px; /*Number should match -top shadow depth below*/
}

.shadowcontainer {
    /*width: 1024px; /* container width*/
    padding-right: 14px;
    background: transparent url(../../assets/images/shadow.gif) repeat;
}

.shadowcontainer .se_event_div_summary {
    /* Add container height here if desired */
    background-color: white;
    border: 1px solid gray;
    padding: 6px;
    position: relative;
    left: -7px; /*shadow depth*/
    top: -7px; /*shadow depth*/
}

/*
 * Styles qui vont déterminer l'affichage de la vignette; càd de la zone rectangulaire qui se situe au-dessus de la
 * page de description de l'évènement.
 */
  
/* 
 * La zone rectangulaire, "vignette" de l'évènement, est une div qui va contenir deux autres div : celle pour la vignette et celle pour le détail
 * 
 * ATTENTION : Les propriétés background-color, color et min-height seront ajoutés dynamiquement par du code PHP
 * 
 * La zone est construite comme ceci :
 * 
 *   <div class="se_event_div_summary" style="'.$background.$forecolor.'min-height:'.($this->se_Settings->get('ThumbnailSizeHeight')+20).'px;">
 *      <div class="header"></div>
 *      <div class="vignette" style="width:'.$this->se_Settings->get('ThumbnailSizeWidth').'px;">'.$img_photo.'</div>
 *      <div class="detail" style="min-height:'.$this->se_Settings->get('ThumbnailSizeHeight').'px;">'.$sDetail.'</div>
 *      <div class="footer"></div>
 *   </div>
 */
div.se_event_div_summary {
    width: 100%;
    margin-left: 0px;
    border: 1px solid #000000; /* Nouveau : Mercredi 12 Mai 2010.   Ajout d'un encadré autour du résumé de l'évènement */
}

/* 
 * Zone d'entête 
 */
div.se_event_div_summary div.header {
    height: 2px;
    float: left;
    width: 100%;
}

/* 
 * Container pour l'affichage de la vignette. Affiché à gauche 
 */
div.se_event_div_summary div.vignette {
    float: left;
    padding: 10px;
    padding-left: 5px; /* Position l'image à gauche afin qu'elle soit alignée avec les chaptires (description, point de départ, ...) */
}

/* 
 * Container pour l'affichage des détails (titre, dates, ...).  Affiche à droite 
 */
div.se_event_div_summary div.detail {
    margin: 0 auto;
    padding: 10px;
}

/* 
 * Zone inférieure 
 */
div.se_event_div_summary div.footer {
    float: left;
    width: 100%;
    height: 2px;
}

/* 
 * Styles qui vont déterminer l'affichage du contenu de la zone résumé (vignette, titre, distance, parcours, ...)
 */

/* 
 * Style pour l'affichage de la vignette qui représente l'évènement 
 */
img.se_event_img_summary_vignette {
    /*border : 1px solid red;*/
}

/* 
 * Affichage du titre de l'évènement dans la page de description d'un évènement
 */
div.detail div.se_event_titre {
    font-size: 16pt;
    text-transform: uppercase;
}

/* 
 * Affichage des dates (début/fin) de l'évènement  
 */
div.detail div.se_event_date {
    font-size: 10pt;
    font-style: italic;
    white-space: nowrap;
}

/* 
 * Affichage de la pratique sportive dans la vignette de l'évènement 
 */
div.detail div.se_event_sport {
    white-space: nowrap;
}

/* 
 * Affichage de la distance dans la vignette de l'évènement 
 */
div.detail div.se_event_distance {
    white-space: nowrap;
}

/* 
 * Affichage du parcours dans la vignette de l'évènement 
 */
div.detail div.se_event_parcours {
    white-space: nowrap;
}

/* 
 * Affichage de la section dans la vignette de l'évènement 
 */
div.detail div.se_event_section {
    white-space: nowrap;
}

/* 
 * Affichage de la catégorie dans la vignette de l'évènement 
 */
div.detail div.se_event_category {
    white-space: nowrap;
}

/* 
 * Affichage du lien "More info" dans la vignette de l'évènement.  
 * Ce lien "Plus d'info" n'apparaît dans la vignette que lorsqu'on est en mode "Liste d'évènements" 
 */
div.detail div.se_event_moreinfo {
    white-space: nowrap;
    font-color: cyan;
}