/********************************************** CSS World Of **********************************/
/***************************************** colleen@jeuxonline.info ****************************/

/* Reset CSS DEBUT */
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote { 
    margin:0;
    padding:0;
  }
  fieldset,img { 
    border:0;
  }
  address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
  }
  ol,ul {
    list-style:none;
  }
  caption,th {
    text-align:left;
  }
  h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
  }
  q:before,q:after {
    content:'';
  }
  abbr,acronym { border:0;
  }
  a{outline: none;}
/* Reset CSS FIN */

/* pointillés autour des éléments avec liens sur firefox */
:focus{-moz-outline-style: none;}

body {
	background:url("images/bg.jpg") no-repeat /*fixed*/ center 30px #000000;
	height: 100%;
	width: 100%;
	font-family: Helvetica, Arial, Trebuchet MS, Verdana, sans-serif;
	font-size: 14px;
	color: #ffffff;
}
img {
  margin:0;
}

div#global {
  position: relative;
  width:1054px;
  left:50%;
  margin-left:-527px;
  padding-left:36px;
  /*overflow:visible !important;
  overflow:hidden;*/
}
/******************** Entête ***********************/
div#header {
  width:981px;
  height:251px;
  float:left;
  background:url("images/header.jpg") no-repeat transparent;
}
div#header h1 {
  text-indent:-9000px;
}
div#header h1 a {
  display:block;
  width:981px;
  height:281px;
}
/******************** Cases du haut ***********************/
div#forums {
  width:981px;
  height:226px;
  background:url("images/forums.jpg") no-repeat #000000;
  float:left;
  overflow:hidden;
  margin-top:0 !important;
  margin-top:-30px;
}
div#last-forum {
  width: 200px;
  float:left;
  height:160px;
  overflow:hidden;
  margin-top:70px;
  margin-left:15px;
  margin-right:15px !important;
  margin-right:0px;
  overflow:hidden;
}
table.jolsujets a,
table.jolsujets a:visited {
  line-height:25px;
  text-decoration:none;
  color:#ffffff;
}
table.jolsujets a:hover,
table.jolsujets a:active {
  line-height:25px;
  text-decoration:none;
  color:#f25322;
}
div#captures {
  width: 200px;
  float:left;
  margin-top:79px;
  margin-left:0;
}
div#jolCaptures {
  height:122px;
  overflow:hidden;
  margin-left:24px;
}
div#jolCaptures img {
  border:solid 1px black;
}
/******************** Centre du site ***********************/
div#site {
  width:981px;
  height:auto;
  background:url("images/site-repeat.jpg") repeat-y #000000;
  float:left;
}
div#menu {
  width:228px;
  height:auto;
  padding-left:6px;
  float:left;
  margin-bottom:50px;
}
/*div#menu ul {
  float:left;
}*/
div#menu ul li#menu_accueil {
  width:234px;
  min-height:44px;
  background:url("images/menu_accueil.png") no-repeat top left transparent;
}
div#menu ul li#menu_lejeu {
  width:234px;
  min-height:44px;
  background:url("images/menu_lejeu.png") no-repeat top left transparent;
}
div#menu ul li#menu_medias {
  width:234px;
  min-height:44px;
  background:url("images/menu_medias.png") no-repeat top left transparent;
}
div#menu ul li#menu_guides {
  width:234px;
  min-height:44px;
  background:url("images/menu_guides.png") no-repeat top left transparent;
}
div#menu ul li#menu_communaute {
  width:234px;
  min-height:44px;
  background:url("images/menu_communaute.png") no-repeat top left transparent;
}
div#menu ul.sous_menu {
  padding-top:40px;
  padding-bottom:15px;
  padding-left:25px;
  color: #bfc0b2;
  line-height:24px;
}
  ul.sous_menu a,
  ul.sous_menu a:visited {
    color: #ffffff;
    text-decoration:none;
  }
  ul.sous_menu a:hover,
  ul.sous_menu a:active {
    color:#f25322;
    text-decoration:none;
  }
div#menu div#blason {
  margin:0 auto;
  margin-top:50px;
  background:url("images/blason-wot.png") no-repeat transparent;
  width:90px;
  height:122px;
}
div#centre {
  width:735px;
  height:auto;
  float:left;
}

div#content {
  margin-bottom:75px;
}

div.article{
  /*width:527px;*/
  width:665px;
  background-color:#383838;
  border:solid 1px #4d4d4d;
  margin-left:33px;
  margin-top:8px;
  margin-bottom:35px;
  padding:10px;
  overflow:visible;
}
    div.article p.auteur {
      font-size:12px;
      margin-bottom:3px;
    }
    div.article p.date {
      font-size:11px;
      margin-bottom:25px;
    }
    div.article div.date_article {
      width:72px;
      height:77px;
      background:url('images/date.png') no-repeat;
      /*position: relative;
      top:-12px;
      left:-34px;*/
      float:left;
      margin-top:-12px !important;
      margin-left:-34px !important;
      margin-top:0px;
      margin-left:0px;
      text-align:center;
      font-weight:bold;
    }
    div.accroche {
      padding:10px;
      font-style:italic;
    }
    div.jour {
      font-size:48px;
      line-height:48px;
      margin-left:-5px;
    }
    div.mois {
      font-size:22px;
      line-height:22px;
      margin-left:-5px;
    }/**/
    div.article h2 {
      margin-left:0px;
      margin-bottom: 7px;
      font-size:21px;
      font-weight:bold;
      /*width:527px;*/
      color:#FFFFFF;
      /*float:left;*/
    }
    div.article h2 a {
      text-decoration:none;
    }
    div.article h3 {
      margin-left:15px;
      margin-bottom: 7px;
      font-size:18px;
      font-weight:bold;
      /*width:512px;*/
    }
    div.article h4 {
      margin-left:30px;
      margin-bottom: 6px;
      font-size:16px;
      font-weight:bold;
      /*width:497px;*/
    }
    div.article a,
    div.article a:visited {
      color: #ffffff;
	  text-decoration:underline;
    }
    div.article a:hover,
    div.article a:active {
      color:#f25322;
	  text-decoration:underline;
    }
    div.article em {
      font-style:italic;
    }
    div.article strong {
      font-weight:bold;
    }
    div.article p {
      margin-left:0px;
      margin-bottom:15px;
      /*width:676px;*/
      text-align:justify;
    }
    div.article blockquote {
      margin-left:40px;
      margin-bottom:15px;
      width:80%;
      text-align:justify;
      border-left:solid 5px #101010;
      border-top:dashed 1px #101010;
      border-bottom:dashed 1px #101010;
      border-right:dashed 1px #101010;
      background-color:#1c1c1c;
      padding:10px;
    }
    div.article ul {
      margin-left:20px;
      margin-bottom:15px;
      /*width:656px;*/
      text-align:justify;
      list-style:disc inside;
    }
    div.article ul ul {
      margin-left:15px;
      margin-bottom:8px;
      margin-top:5px;
      /*width:626px;*/
      text-align:justify;
      list-style:circle inside;
    }
    div.article ul ul ul {
      margin-left:15px;
      margin-bottom:8px;
      margin-top:5px;
      /*width:596px;*/
      text-align:justify;
      list-style:square inside;
    }
    div.article ol {
      list-style:decimal;
      margin-left:25px;
      margin-bottom:10px;
    }
    div.article img {
      max-width:530px;
    }
    /* css du texte des articles FIN*/
    div.jol_actus_actualite {
      margin-bottom:30px;
    }
    div.jol_image {
      margin-right:0px;
      margin-bottom:5px;
      border:dashed 1px #101010;
      background-color:#1c1c1c;
      padding:6px;
    }
    div.jol_image_legende {
      font-size:11px;
      text-align:center;
    }
    
    div.jol_actus_reagir {
      margin-top:5px;
      background-color:#1c1c1c;
      border:solid 1px #101010;
      padding:2px;
	  text-align:center;
    }
    
/* Auteur, date des articles */
/*div.article div.article-info {
  clear:both;
  width:666px;
  margin-left:15px;
  margin-bottom:5px;
  padding-right:5px;
  border-right:solid 5px #51BDC1;
  font-size:11px;
  text-align:right;
  line-height:13px;
}
div.article div.article-info ul.jol_article_sources {
  text-align:right;
  margin:0;
  padding:0;
  list-style:none;
}*/

div#pub {
  width:129px;
  float:left;
  padding-left:15px;
  padding-top:9px;
}
div#pub a {
  color:#bfc0b2;
}
div#pub_gauche {
  /*width:129px;
  float:left;*/
  padding-left:55px;
  padding-top:15px;
}
div#pub_gauche a {
  color:#bfc0b2;
}

div#footer {
  width: 1067px;
  height:99px;
  background:url("images/footer.png") no-repeat transparent;
  float:left;
  margin-left:-44px !important;
  margin-left:-22px;
  margin-top:-22px;
  text-align:center;
}
div#footer p {
  margin-top:45px;
  font-size:12px;
  line-height:15px;
}
div#footer p a,
div#footer p a:visited {
  color: #bbbbbb;
  text-decoration:none;
}
div#footer p a:hover,
div#footer p a:active {
  color:#ffffff;
  text-decoration:underline;
}

/**
 * Pages - Container
 */
div.jol_actus_pages {
    color:  #999;
    margin: 10px 0;
}

/**
 * Pages - Liste des pages
 */
div.jol_actus_pages ul.jol_actus_pages_liste {
    margin:     0;
    padding:    0;
    text-align: left;
    text-align:center;
}

/**
 * Pages - Page
 */
div.jol_actus_pages li.jol_actus_page {
    list-style-type:    none;
    display:            inline;
    padding-bottom:     1px;
    margin-right:       3px;
}

/**
 * Pages - Séparateur
 */
div.jol_actus_pages li.jol_actus_page_separateur { }

/**
 * Pages - Lien vers une page
 */
div.jol_actus_pages a.jol_actus_page_lien {
    /*border:             1px solid #9aafe5;*/
    color:              #aaaaaa;
    padding:            2px 5px;
    text-decoration:    none;
}

/**
 * Pages - Lien vers une page (survolé ou actif)
 */
div.jol_actus_pages a.jol_actus_page_lien:hover,
div.jol_actus_pages a.jol_actus_page_lien:active {
    /*border:             1px solid #00468C;*/
    color:              #f25322;
}

/**
 * Pages - Lien vers la page courante
 */
div.jol_actus_pages a.jol_actus_page_lien_actif,
div.jol_actus_pages a.jol_actus_page_lien_actif:hover {
    /*background-color:   #2e2e22;*/
    color:              #fff;
    /*border-color:       #2b66a5;*/
    font-weight:        bold;
    cursor:             default;
}

/**
 * Pages - Lien vers la page précédente ou suivante
 */
div.jol_actus_pages a.jol_actus_page_lien_suivprec {
    color:              #000000;
    font-weight:        bold;
}
div.jol_actus_pages a.jol_actus_page_lien_suivprec:hover {
    color:              #000000
}

/**
 * Pages - Liens désactivés
 */
div.jol_actus_pages a.jol_actus_page_lien_desactive,
div.jol_actus_pages a.jol_actus_page_lien_desactive:hover {
    /*border-color:       #ccc;*/
    color:              #565656;
    cursor:             default;
    font-weight:        normal;
}


/**
 * Tags - Container des tags
 */
div.jol_actus_tags {
    background-image:       url(http://medias.jeuxonline.info/www/modules/Actualites/tag.gif);
    background-repeat:      no-repeat;
    background-position:    0 50%;
    margin:                 0;
    min-height:             15px;
    padding:                0 0 0 20px;
    margin-top:10px;
}

/**
 *  Tags - Liste des tags
 */
div.jol_actus_tags ul.jol_actus_tags_liste {
    list-style-type:    none;
    margin:             0;
    padding:            0;
}

/**
 *  Tags - Tag
 */
div.jol_actus_tags li.jol_actus_tags_tag {
    display:            inline;
    padding-right:      5px;
}

/**
 * Tags - Séparateur
 */
div.jol_actus_tags li.jol_actus_tags_tag:after {
    content:    ',';
}
div.jol_actus_tags li.jol_actus_tags_tag_dernier:after {
    content:    '';
}


/************************** 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
 */
div#article div#galerie #jolCapturesGalerie h1 {
  margin:15px 0;
  height:20px;
  font-weight:bold;
  font-size:15px;
  text-align:center;
}

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

/**
 * Container du menu de navigation
 */
#jolCapturesGalerie div.navigation {
    /*background-color:   #990000;*/
    border-bottom:      1px dashed #2e2e22;
    border-top:         1px dashed #2e2e22;
    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:            3px;
    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 1px;
}

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

/**
 * 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 dashed #2e2e22;*/
    margin:             0 0 10px 0;
}
#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:              #ddd;
}
#jolCapturesGalerie div.jeu span.maj {
    font-size:          0.8em;
    color:              #ddd;
}

/**
 * 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:            2px;
    font-size:          0.9em;
    line-height:        0.9em;
}

/**
 * Container des images avec leurs informations
 */
#jolCapturesGalerie div.capture {
    /*height:             152px;*/
    /*background-color:   #f3f3f3;*/
    padding:            3px;
    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 #000;
}

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

/**
 * 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;
    font-size:11px;
    margin-top:5px;
}

/**
 * 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 {}
#jolCapturesGalerie div.agrandissement h1 { text-align:center; margin-top:10px; font-weight:bold;}

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

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

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

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

/**
 * Liste des outils
 */
#jolCapturesGalerie div.agrandissement div.options ul {
    list-style:         none;
    margin:             0 auto;
    width: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;}