/**
 * 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 {
	width: 596px;
	margin: 25px 0px 0px 44px;
}

/**
 * Titre principal des pages
 */
#jolCapturesGalerie h1 {
	color: #a6dbdc
}

/**
 * Titres de deuxième niveau
 */
#jolCapturesGalerie h2 {}

/**
 * Container du menu de navigation
 */
#jolCapturesGalerie div.navigation {
    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: #212929;
	border: solid 1px black;
    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:       #e00;
}

/**
 * Container du lien pour ajouter une image
 */
#jolCapturesGalerie div.ajouter { 
	background-color: #212929;
	border: solid 1px black;
    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;
}

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

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

/**
 * Titre du jeu
 */
#jolCapturesGalerie div.jeu h2 {
    margin:             0 0 10px 0;
	padding: 0px 0px 5px 5px;
	border-bottom: solid 1px #4d6a70;
	border-left: solid 1px #4d6a70;
}

/**
 * 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 {
	list-style-image: url('http://jolstatic.fr/rift/design/fleche.gif');
    margin:             0;
	margin-left : 130px;
    padding:            0;
}

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

/**
 * 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: #0d171b;
	border: 1px dotted #4d6a70;
    padding:            5px;
    width:              165px;
    text-align:         center;
}

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

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

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

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

/**
 * Date de prise de vue
 */
#jolCapturesGalerie div.capture div.date {}

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

/**
 * 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;
    max-width:          596px;
}

/**
 * Image version 800px
 */
#jolCapturesGalerie div.agrandissement div.image800 img {
    border:             0;
    display:            block;
	max-width: 			594px;
}

/**
 * Description de l'image
 */
#jolCapturesGalerie div.agrandissement div.description {
    margin-top:         10px;
    padding:            2px 5px;
    text-align:         center;
}

/**
 * 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: #212929;
	border: solid 1px black;
    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 {}

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

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

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

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