/************************** Galerie d'images ********************************/
/**
 * JOLOO - Module Captures_Galerie
 * 
 * Exemple d'une feuille de styles CSS pour le module Galerie.
 * 
 * @author Guillaume Martin <mind@jeuxonline.info>
 */

/**
 * Container global de la galerie
 */
#jolCapturesGalerie {}

/**
 * Titre principal des pages
 */
#jolCapturesGalerie h1 {
  margin:15px 0;
  height:20px;
  font-weight:bold;
  font-size:15px;
  text-align:center;
  background:none;
}

/**
 * Titres de deuxième niveau
 */
#jolCapturesGalerie h2 {
  background:none;
}

/**
 * Container du menu de navigation
 */
#jolCapturesGalerie div.navigation {
    /**/background-color:   #ffffff;
    border-bottom:      1px dotted #0b5a6c;
    border-top:         1px dotted #0b5a6c;
    padding:            2px 5px;
}

/**
 * Liens du menu de navigation
 */
#jolCapturesGalerie div.navigation a {}

/**
 * Page actuelle
 */
#jolCapturesGalerie div.navigation strong {}

/**
 * === ACCUEIL DE LA GALERIE ===
 */

/**
 * Container des dernières images ajoutées
 */
#jolCapturesGalerie div.dernieres {
    /*background-color:   #990000;
    border:             1px dotted #fff;*/
    padding:            5px;
    margin-bottom:      10px;
    text-align:         center;
}

/**
 * Titre du bloc des dernières images ajoutées
 */
#jolCapturesGalerie div.dernieres div.titre {
    font-weight:        bold;
    margin-bottom:      5px;
}

/**
 * Container des images
 */
#jolCapturesGalerie div.dernieres div.images {}

/**
 * Images du bloc des dernières images ajoutées
 */
#jolCapturesGalerie div.dernieres div.images img {
    border:             1px solid black;
    margin:             0 5px;
}

/**
 * Effet mouseover des images du bloc des dernières images ajoutées
 */
#jolCapturesGalerie div.dernieres div.images img:hover {
    border-color:       #fff;
}

/**
 * Container du lien pour ajouter une image
 */
#jolCapturesGalerie div.ajouter { 
    /*background-color:   #990000;
    border:             1px dotted #fff;*/
    margin-bottom:      10px;
    padding:            2px 5px;
    text-align:         center;
}

/**
 * Lien pour ajouter une image
 */
#jolCapturesGalerie div.ajouter a {
    background-image:   url(http://medias.jeuxonline.info/www/jolfiches/img/ajouter_image.png);
    background-repeat:  no-repeat;
    padding-left:       20px;
    /*color:              #fff;*/
}

/**
 * Container de la liste des jeux
 */
#jolCapturesGalerie div.liste_jeux {}

/**
 * Container des informations sur un jeu
 */
#jolCapturesGalerie div.jeu
{
    /*background-color:   #990000;*/
    padding:            5px;
    margin-bottom:      10px;
    padding-bottom:     10px;
}

/**
 * Titre du jeu
 */
#jolCapturesGalerie div.jeu h2 {
    /*border-bottom:      1px dotted #0b5a6c;*/
    margin:             0 0 10px 0;
    width:100%;
}
#jolCapturesGalerie div.jeu h2 a {
    text-decoration:none;
}

/**
 * Vignette d'illustration des galeries
 */
#jolCapturesGalerie div.boite
{
    float:              left;
    width:              100px;
    height:             100px;
    margin-right:       25px;
}

/**
 * Liste des catégories des images
 */
#jolCapturesGalerie div.jeu ul {
    margin:             0;
    padding:            0;
    float:left;
}

/**
 * Elements de la liste des catégories 
 */
#jolCapturesGalerie div.jeu li { }

/**
 * Nombre d'images par catégorie
 */
#jolCapturesGalerie div.jeu span.nb_images {
    font-size:          0.8em;
    color:              #444;
}
#jolCapturesGalerie div.jeu span.maj {
    font-size:          0.7em;
    /*color:              #444;*/
}
#jolCapturesGalerie div.jeu span.maj:before {
    content:" ";
}

/**
 * Pour être certain que le container inclus entièrement la vignette
 */
#jolCapturesGalerie div.jeu div.clear {
    clear:              both;
}

/**
 * === GALERIE D'IMAGES ===
 */

/**
 * Tableau container des images de la galerie
 */
#jolCapturesGalerie table.galerie {
    margin:             5px auto 10px auto;
}

/**
 * Cellules du tableau
 */
#jolCapturesGalerie table.galerie td {
    padding:            5px;
    font-size:          0.9em;
    line-height:        0.9em;
}

/**
 * Container des images avec leurs informations
 */
#jolCapturesGalerie div.capture {
    height:             152px;
    /*background-color:   #f3f3f3;*/
    padding:            5px;
    width:              165px;
    text-align:         center;
}

/**
 * Container de l'image
 */
#jolCapturesGalerie div.capture div.image {
    width:              160px;
    height:             120px;
    background-color:   #000000;
    overflow:           hidden;
    border:             1px solid #000;
    margin-bottom:      5px;
    margin-left:        auto;
    margin-right:       auto;
}

/**
 * Effet de mouveover sur l'image
 */
#jolCapturesGalerie div.capture div.image:hover {
    border:             1px solid #fff;
}

/**
 * L'image en elle-même
 */
#jolCapturesGalerie div.capture div.image img {
    border:             0;
}

/**
 * Container du titre de l'image
 */
#jolCapturesGalerie div.capture div.titre { line-height:11px;}

/**
 * Lien vers le titre de l'image
 */
#jolCapturesGalerie div.capture div.titre a { }

/**
 * Date de prise de vue
 */
#jolCapturesGalerie div.capture div.date {
    color:              #ddd;
    line-height:12px;
}

/**
 * Navigation entre les pages de la galerie
 */
#jolCapturesGalerie table.pages {
    /*background-color:   #990000;*/
    width:              100%;
    /*border:             1px solid #ddd;*/
}

/**
 * Cellule du tableau de navigation
 */
#jolCapturesGalerie table.pages td {
    padding:            2px 5px;
}

/**
 * Page précédente
 */
#jolCapturesGalerie table.pages td.precedente {
    text-align:         left;
    width:              160px;
    white-space:        nowrap;
}

/**
 * Page suivante
 */
#jolCapturesGalerie table.pages td.suivante {
    text-align:         right;
    width:              160px;
    white-space:        nowrap;
}

/**
 * Liste des pages
 */
#jolCapturesGalerie table.pages td.pages {
    text-align:         center;
}

/**
 * Page sélectionnée
 */
#jolCapturesGalerie table.pages td.pages strong { 
    font-size:          1.2em;
    padding:            0 4px;
}

/**
 * Liens vers les autres pages
 */
#jolCapturesGalerie table.pages td.pages a {
    padding:            0 4px;
}

/**
 * Container des statistiques de la galerie
 */
#jolCapturesGalerie div.stats {
    font-size:          0.9em;
    margin-bottom:      10px;
    margin-top:         10px;
    text-align:         center;
}

/**
 * === AGRANDISSEMENT DES IMAGES ===
 */

/**
 * Container de l'agrandissement d'une image
 */
#jolCapturesGalerie div.agrandissement {}

/**
 * Container de la version 800px de l'image
 */
#jolCapturesGalerie div.agrandissement div.image800 {
    /*border:             1px solid #000;*/
    margin:             0 auto;
    width:              580px;
}

/**
 * Image version 800px
 */
#jolCapturesGalerie div.agrandissement div.image800 img {
    border:             0;
    display:            block;
    margin:             0 auto;
    width:580px;
}

/**
 * Description de l'image
 */
#jolCapturesGalerie div.agrandissement div.description {
    /*background-color:   #f3f3f3;
    border-bottom:      1px solid #ccc;*/
    margin-top:         10px;
    padding:            2px 5px;
    text-align:         center;
    /*color:#FFF;*/
}

/**
 * Date de prise de vue
 */
#jolCapturesGalerie div.agrandissement div.date {
    font-size:          0.9em;
    margin-top:         10px;
}

/**
 * Outils de téléchargement et d'affichage de la version originale
 */
#jolCapturesGalerie div.agrandissement div.options {
    /*background-color:   #FFFAE6;
    border:             1px solid #F5D291;*/
    padding:            2px 0;
    margin:             10px auto;
    text-align:         center;
    width:              90%;
}

/**
 * Liste des outils
 */
#jolCapturesGalerie div.agrandissement div.options ul {
    list-style:         none;
    margin:             0 auto;
}

/**
 * Elements de la liste des outils
 */
#jolCapturesGalerie div.agrandissement div.options li {
    float:              left;
    text-align:         center;
    width:              50%;
}

/**
 * Container inline du lien Afficher l'image originale
 */
#jolCapturesGalerie div.agrandissement div.options li span.afficher {
    padding-left:       20px;
    background-image:   url(http://medias.jeuxonline.info/www/jolfiches/img/icone_images.png);
    background-repeat:  no-repeat;
}

/**
 * Container inline du lien Télécharger l'image
 */
#jolCapturesGalerie div.agrandissement div.options li span.telecharger {
    background-image:   url(http://medias.jeuxonline.info/www/jolfiches/img/telecharger.png);
    background-repeat:  no-repeat;
    padding-left:       18px;
}

/**
 * Liens des outils
 */
#jolCapturesGalerie div.agrandissement div.options a {
    /*color:              #fff;*/
}

/**
 * Taille de l'image originale
 */
#jolCapturesGalerie div.agrandissement div.options span.taille {
    font-size:          0.9em;
    color:              #ddd;
}

/**
 * Poids de l'image originale
 */
#jolCapturesGalerie div.agrandissement div.options span.poids {
    font-size:          0.9em;
    color:              #ddd;
}

/**
 * Clear
 */
#jolCapturesGalerie div.agrandissement div.options div.clear {
    clear:              both;
}

/**
 * === FORMULAIRE D'AJOUT ===
 */

/**
 * Container du formulaire
 */
#jolCapturesGalerie div.formulaire {}

/**
 * Formulaire
 */
#jolCapturesGalerie div.formulaire form {}

/**
 * Tableau du formulaire
 */
#jolCapturesGalerie table.formulaire {}

/**
 * Ligne standard du formulaire
 */
#jolCapturesGalerie table.formulaire tr { height:20px;}

/**
 * Ligne alternative
 */
#jolCapturesGalerie table.formulaire tr.alt {}

/**
 * Titre des colonnes
 */
#jolCapturesGalerie table.formulaire th {}

/**
 * Cellules du tableau
 */
#jolCapturesGalerie table.formulaire td {}

/**
 * Menus déroulant d'options
 */
#jolCapturesGalerie table.formulaire select {}

/**
 * Options des menus déroulants
 */
#jolCapturesGalerie table.formulaire option {}

/**
 * Champs du formulaire
 */
#jolCapturesGalerie table.formulaire input {}

/**
 * Bouton d'envoi
 */
#jolCapturesGalerie table.formulaire input.envoyer { margin-bottom:10px;}