CSS HIVER 2013

/* ------------- ESPACEMENT IMG BARRE NAVIGATION -------------- */
a.mainmenu {
  margin-right: 2px !important;
}

/* ------------- RETIRER SOULIGNEMENT LIENS -------------- */
a:hover{text-decoration: none !important;}
a {text-decoration: none !important;}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}

a.forumlink
{
text-shadow: 1px 1px 1px #000;
}

/* ---------- DECALAGE TITRES ---------- */
.forumlink
{
display: block;
  color: red; /* Couleur de départ */
text-align: left;
transition: all 2s; /* Durée de la transition, mettez les mêmes valeurs partout, ça sera plus facile */
-moz-transition: all 2s;
-webkit-transition: all 2s;
}

a.forumlink:hover
{
  color: green; /* Couleur d'arrivée */
  margin-left: 50px; /* Décalement ( nombre de px à décaler pour l'arrivée)*/
  font-style: italic;
transition: all 2s;
-moz-transition: all 2s;
-webkit-transition: all 2s;
}

/* -------------- GENERALITES DU FORUM -------------- */
a.forumlink:link, a.forumlink:visited {
font-family:  Tempus Sans ITC;
text-transform : uppercase;
text-align: left;
font-size: 15px;
border-bottom: 2px dotted SaddleBrown;
border-left: 5px dotted SaddleBrown;
padding-top: 5px;
padding-left: 5px;
/* border-right: 5px dotted SaddleBrown;
color: #000000; */
letter-spacing: 3px;
display: block;
border-radius:10px;
}

.bodylinewidth{margin-right: 70px;}

/* ------------- CADRE COLONNE DERNIERS MESSAGES -------------- */

table.case_stats{
  width:153px; /* largeur */
  height:98px; /* La hauteur */
  margin:auto; /* on centre */
  }

table.case_stats td.dernier_msg{
  background-image:url('http://i46.tinypic.com/2r798wx.jpg');
  background-position: center top;
  background-repeat:no-repeat;
  padding-left:32px;
  padding-right:px; /* Je déclasse du bord droit de 60px à gauche de ma pate */
  padding-top:px;
  height:98px; /* mon image fait 85px de haut, mais comme j'ajoute 10px de remplissage, j'impose à ma case une hauteur = hauteur de mon image - padding top */
  text-align:center;
  line-height: 10px;
  }

table.case_stats td.stats_forum{
  background-image:url('http://i48.tinypic.com/2rwuln5.jpg');
  background-position: center bottom;
  background-repeat:no-repeat;
  padding-left:28px;
  padding-right:4px;
  text-align:center;
  }

table.case_stats td.dernier_msg p{
  color:#;
  width:100px; /*la largeur de mon bloc moins la largeur de ma pate */
  height:;
  padding:0;
  margin:0;
  margin-left:px; /* Je décalle un peu par rapport aux bords gauche pour éviter que mon texte ne soit en dehors de mon cadre */
  font-size:11px;
  padding-top:3.5px;
  font-weight:bold;
  -moz-transform : rotate(-11deg);
  }
 
table.case_stats td.dernier_msg p a{
  text-decoration:none;
  color:#
  }
 
table.case_stats td.dernier_msg p a:hover{
  /*border:darkgoldenrod 1px dashed;
  padding:1px;
  -moz-border-radius:5px;*/
  color:#;
  }

table.case_stats td.stats_forum p{
  color:#;
  width:100px; /*la largeur de mon bloc moins quelques px */
  margin-left:px;
  font-size:8px;
  /*font-weight:bold;*/
  text-align:center;
  padding:0;
  }

/* -------------- ARRONDIS DES CADRES -------------- */
.forumline {
background-color: violet;
border-radius: 10px ;
border: 5px double indigo;
padding: -5px;
}

/* Cadre des sous-forums */

.th {
border-radius: 10px 10px 0px 0px;
}

/* Titres de catégories */

/* -------------- FOND SOUS-FORUMS ET PA -------------- */
td.row1,td.row3.over:hover,td.row2,td.row1.over:hover,td.row3,.row3Right {
    /*background-image: url("http://i50.tinypic.com/302cap5.png");
    background-image: url("http://www.commentnation.com/hotlinks/abstract_mauve_floral_wallpaper_background_seamless.jpg");
    background-image: url("http://jardinsduciel.j.a.pic.centerblog.net/4365f8d3.gif"); */
    background-image: url("http://papillondereve.p.a.pic.centerblog.net/o/5b16cd7e.jpg");
    background-repeat: repeat;
    border:5px !important;
        }

.row3Right, td.catBottom {
    border:none !important;
  border-radius: 10px 10px 0px 0px;
        }

/* -------------- TITRES SOUS-FORUMS -------------- */
/*a.forumlink:hover, a.forumlink:hover:visited {
background-image: url('http://www.andalousplus.com/medias/produit/crema-marfil.jpg');
color: #ffffff;
text-align: center;
display: block;
border-bottom: 5px double SaddleBrown;
border-radius:10px;
}

/* -------------- CADRE DU FORUM -------------- */
/*.bodyline {
border-left:px solid #;
border-right:px solid #;
border-bottom:4px solid #;
border-top:4px solid #;
-webkit-border-radius: 10px;
border-radius: 100px;
-webkit-box-shadow: 0px 0px 8px #;
  -moz-box-shadow: 0px 0px 8px #;
  box-shadow: 0px 0px 8px #;
}

/* -------------- ARRIERE-PLAN DU FORUM -------------- */
body{
  background-position: bottom-center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* -------------- RETIRER MESSAGE D'EDITION -------------- */
tr.post span.gensmall {display: none;}

/* -------------- INFOBULLE -------------- */

a.imginfo {  /*infobulle*/
  position: relative;
  color: #757575;
  text-decoration: none;
  border-bottom: 0px #399492 solid; /* on souligne le texte */
}

a.imginfo span {
  display: none; /* on masque l'infobulle */
}
a.imginfo:hover {
  background: none; /* correction d'un bug IE */
  z-index: 999; /* on définit une valeur pour l'ordre d'affichage */
  cursor: crosshair; /* on change le curseur par défaut en curseur d'aide */
}
a.imginfo:hover span {
  display: inline; /* on affiche l'infobulle */
  position: absolute;
  white-space: ; /* on change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non-désiré */
  top: 5px; /* on positionne notre infobulle */
  left: 80px;
  ont-family:  Tempus Sans ITC;
  text-align: center;
  font-size: 12px;
  background-image: url("http://shizoo-design.de/stuff/patterns/146.jpg");
  color: ;
  padding: 3px;
  border: 0px solid grey;
  border-left: 5px solid #399492;
  border-right: 3px solid #399492;
  border-top: 3px solid #399492;
  border-bottom: 5px solid #399492;
  width:200px;
  height: ;
border-radius: 5px;
-webkit-border-radius: 5px;
}
/* -------------- FIN INFOBULLE -------------- */

/* ---------------- QEEL TFA --------------- */

/* BLOC CONTENANT TOUT LE QEEL */
#all_qeel {
  margin: 10px auto 40px;
  padding: 0;
  width: 750px;
}
/* BLOC CONTENANT LE TITRE DU QEEL */
#d-title{
  width:750px;
  position: relative;
  z-index: 999;
  margin: 0 auto -40px;
  padding: 0;
  text-align: center;
}
/* TITRE DU QEEL */
#d-title h1{
  width:100%;
  margin: 0 auto;
  padding: 0;
  font-family: 'Lovers Quarrel', cursive;
  font-size:80px;
  font-weight: normal;
  text-align: center;
  letter-spacing: 3;
  color: goldenrod;
  text-shadow: 0 0 2px #fff;
}

/* BLOC PRINCIPAL */
#tfa_qeel{
  width: 750px;
  margin: 10px auto;
  padding: 8px 0;
  position: relative;
  background: url(http://i46.tinypic.com/24cw3tk.png) #94642e;
  -moz-border-radius: 30px;
  -webkit-border-radius:30px;
  border-radius: 30px;
  -moz-box-shadow:0px 0px 4px #000;
  -webkit-box-shadow: 0px 0px 4px #000;
  box-shadow: 0px 0px 4px #000;
}
/* DEUXIEME BLOC POUR BORDURE */
#tfa_one-bloc{
  width:98%;
  margin: auto;
  padding: 0;
  border: 2px dotted #bb5700;
  position: relative;
  -moz-border-radius: 25px;
  -webkit-border-radius:25px;
  border-radius: 25px;
  font: 15px Trochut;
  color: #284b5f;
  text-shadow: 0 0 2px #fff;
}

/* ----- BLOC STATISTIQUES ----- */
.tfa_d-container{
  float: left;
  width: 45%;
  height: 230px;
  margin-top: 35px;
  margin-left: 3%;
  padding: 0;
  background: url(http://us.123rf.com/400wm/400/400/olenka/olenka0811/olenka081100001/3842339-glitter-bleu-scintille-de-flocons-de-neige-fond-photo-macro-super-shallow-dof.jpg)#94642e;
  -moz-border-radius: 20px;
  -webkit-border-radius:20px;
  border-radius: 20px;
  box-shadow: 0 0 2px #000;
}
/* 2EME BLOC POUR BORDURE */
.d-content{
  width:96%;
  margin: 10px auto;
  padding: 0;
  border: 2px dotted #bb5700;
  position: relative;
  -moz-border-radius: 15px;
  -webkit-border-radius:15px;
  border-radius: 15px;
  position: relative;
}
/* TITRE STATISTIQUES */
.d-content h2{
 position: absolute;
  top: -55px;
  font-family: 'Lovers Quarrel', cursive;
  font-size: 60px;
  font-weight: normal;
  width: 100%;
  color: goldenrod;
  text-shadow: 0 0 2px #fff;
  text-align: left;
  margin: 0 0 0 25px;
  padding: 0;
}
/* CONTENU STATISTIQUES */
.d-content .in_d-content{
 position: relative;
  width: 96%;
  margin: auto;
  padding: 5px 0;
}

/* ------ BLOC DE DROITE ------ */
.tfa_d-container2{
  float: right;
  width: 45%;
  height: 230px;
  margin-top: 35px;
  margin-right: 3%;
  padding: 0;
  background: url(http://us.123rf.com/400wm/400/400/olenka/olenka0811/olenka081100001/3842339-glitter-bleu-scintille-de-flocons-de-neige-fond-photo-macro-super-shallow-dof.jpg) #94642e;
  -moz-border-radius: 20px;
  -webkit-border-radius:20px;
  border-radius: 20px;
  box-shadow: 0 0 2px #000;
}
/* TITRE GROUPE */
.tfa_d-container2 h2{
 position: absolute;
  top: -55px;
  right: 20px;
  font-family: 'Lovers Quarrel', cursive;
  font-weight: normal;
  font-size: 60px;
  width: 100%;
  color: goldenrod;
  text-shadow: 0 0 2px #fff;
  text-align: right;
  margin: 0 15px 0 0;
  padding: 0;
}
/* CONTENEUR GROUPE */
.in_d-content2{
 position: relative;
  width: 300px;
  height: 186px;
  margin: auto;
  padding: 10px 0;
}
.in_d-content2 p{
  font: 15px Trochut;;
}

/* --------- LES GROUPES ---------- */

/* BLOC GROUPE */
.d-transition-tfa{
  position: relative;
  float: left;
  height: 50px;
  margin: auto;
  overflow: hidden;
  width: 70px;
  text-align: center;
  vertical-align: middle;
}
/* CONTENU BLOC GROUPE */
.d-block_transition{
  background: #fff;
  width: 70px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  color: #9C9C9C;
  opacity: 0;
  -webkit-transition: all 1.0s ease; /* pour navigateur webkit */
  -moz-transition: all 1.0s ease; /* pour navigateur mozilla */
  -o-transition: all 1.0s ease; /* pour navigateur opera */
  transition: all 1.0s ease; /* pour les navigateurs récents */
}
/* BLOC GROUPE AU SURVOL */
.d-block_transition:hover {
  opacity: 0.8;
}
/* IMAGE (icône) DU GROUPE */
.d-transition-tfa img {
vertical-align: middle;
}
/* NOM DU GROUPE */
.d-block_transition h3{
color: #e7c064;
font: 10px italic verdana;
border-bottom: 1px dotted #e19f2d;
text-align: center;
  opacity: 1;
  font-weight:bold;
width: 70px;
margin: 0;
padding: 0;
}
/* TEXTE GROUPE */
.d-block_transition span{
display: block;
font-size: 9px;
color: #fff;
  opacity: 1;
text-align: center;
width: 70px;
margin: 0;
padding: 0;
}
/* LIEN GROUPE */
.d-block_transition a{
  font-size: 9px;
  color: #64e776;
  text-decoration: none;
}

/* ------ LES DERNIERS CONNECTES -------- */
.tfa_d-container3{
  position: relative;
  float: left;
  width: 45%;
  margin-left:3%;
  padding: 0;
}
#bloc_bas_qeel{
  position: absolute;
  left: 5%;
  width: 88%;
  margin: 0 auto;
  padding: 0;
  z-index: 999;
}
#derniers_connectes{
  background: #94642e;
  position: relative;
  height: 0;
  overflow: hidden;
  color: #fff;
  -moz-border-radius: 0 0 9px 9px;
  -webkit-border-radius: 0 0 9px 9px;
  border-radius: 0 0 9px 9px;
  -webkit-transition: all 1.2s ease; /* pour navigateur webkit */
  -moz-transition: all 1.2s ease; /* pour navigateur mozilla */
  -o-transition: all 1.2s ease; /* pour navigateur opera */
  transition: all 1.2s ease; /* pour les navigateurs récents */
}
#open_derniers_connectes{
  background: #94642e;
  position: relative;
  width: 150px; 
  display: block;
  margin: 0 auto;
  padding: 3px;
  font-size: 13px;
  color: #fff;
  text-align: center;
  -moz-border-radius: 0 0 9px 9px;
  -webkit-border-radius: 0 0 15px 15px;
  border-radius: 0 0 15px 15px;
}
#bloc_bas_qeel:hover #derniers_connectes{
  height: 80px;
  padding: 3px;
}
#conect-content{
  width: 94%;
  margin: auto;
  height: 76px;
  overflow-y: auto;
}
#derniers_connectes #TFAd6 .row1{
  background: transparent;
}

/* ------ LES ANNIVERSAIRES -------- */
.tfa_d-container4{
  position: relative;
  float: right;
  width: 45%;
  margin-right:3%;
  padding: 0;
}
.bloc_bas_qeel{
  position: absolute;
  left: 5%;
  width: 88%;
  margin: 0 auto;
  padding: 0;
  z-index: 3;
}
#d_anniversaires{
  background: #94642e;
  position: relative;
  height: 0;
  overflow: hidden;
  color: #fff;
  -moz-border-radius: 0 0 9px 9px;
  -webkit-border-radius: 0 0 9px 9px;
  border-radius: 0 0 9px 9px;
  -webkit-transition: all 1.2s ease; /* pour navigateur webkit */
  -moz-transition: all 1.2s ease; /* pour navigateur mozilla */
  -o-transition: all 1.2s ease; /* pour navigateur opera */
  transition: all 1.2s ease; /* pour les navigateurs récents */
}
#open_anniversaires{
  background: #94642e;
  position: relative;
  width: 150px; 
  display: block;
  margin: 0 auto;
  padding: 3px;
  font-size: 13px;
  color: #fff;
  text-align: center;
  -moz-border-radius: 0 0 9px 9px;
  -webkit-border-radius: 0 0 15px 15px;
  border-radius: 0 0 15px 15px;
}
.bloc_bas_qeel:hover #d_anniversaires{
  height: 80px;
  padding: 3px;
}
#anniv-content{
  width: 94%;
  margin: auto;
  height: 76px;
  overflow-y: auto;
}
/* SUPRESSION DU FOND DE ROW1 */
#anniv-content table td.row1{
  background: transparent !important;
}

/* ------ INFORMATION ------- */
#tfa_d-bas{
  width: 94%;
  margin: 40px auto 10px;
  padding: 5px 0;
  background: url(http://us.123rf.com/400wm/400/400/olenka/olenka0811/olenka081100001/3842339-glitter-bleu-scintille-de-flocons-de-neige-fond-photo-macro-super-shallow-dof.jpg) #94642e;
  -moz-border-radius: 20px;
  -webkit-border-radius:20px;
  border-radius: 20px;
  box-shadow: 0 0 2px #000;
}
/* TITRE INFORMATION */
#tfa_d-bas h2{
 position: absolute;
  width: 80%;
  font-family: 'Lovers Quarrel', cursive;
  font-size: 60px;
  width: 100%;
  color: goldenrod;
  text-shadow: 0 0 2px #fff;
  text-align: center;
  top: -62px;
  margin: 10px auto 0;
  padding: 0;
}
/* 2EME BLOC POUR LA BORDURE */
#tfa_d-bas .d-content{
  width:98%;
  margin: auto;
  padding:0;
  border: 2px dotted #bb5700;
  position: relative;
  -moz-border-radius: 15px;
  -webkit-border-radius:15px;
  border-radius: 15px;
  position: relative;
}
/* CONTENU INFORMATION */
#tfa_d-bas .in_d-content{
 position: relative;
  width: 98%;
  margin: auto;
  padding: 5px 0;
}
/* LIENS DANS INFORMATION */
#tfa_d-bas .in_d-content a{
color: #353434;
}

/* BLOC BAS GAUCHE */
#bas_d-gauche{
  position: relative;
  width: 40%;
  float: left;
  margin: 0;
  padding: 0;
}
/* BLOC BAS DROITE */
#bas_d-droite{
  position: relative;
  width: 60%;
  float: right;
  margin: 0;
  padding: 0;
}
/* PARAGRAPHE DU BLOC DE DROITE */
#bas_d-droite p{
  width: 96%;
  margin: 5px auto 0;
  padding: 0;
  font: 15px Trochut;
  color: #284b5f;
}

/* ----- BLOC TRANSITION BAS GAUCHE ----- */
#bloc_part_qeel { 
  height: 100%;
  width: 96%;
  margin: 3px 0 0 0;
  padding: 0;
  position: relative;
  font: Bold 15px Trochut;
  color: #94642e
}
/* CONFIGURATION DE LA LISTE avant */
#bloc_part_qeel ul:before { 
  content: ""; 
  position: absolute; 
  z-index: 100; 
  background: url(http://us.cdn2.123rf.com/168nwm/jetzt/jetzt1111/jetzt111100002/11166376-beau-fond-d-39-or-avec-l-39-hiver-flocons-de-neige-le-concept-de-noel-voie-lactee.jpg) #94642e; 
  height: 100%; 
  width: 110px; 
  margin : 0 auto; 
  padding: 0; 
  border-radius: 10px; 
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  -moz-box-shadow:0px 0px 2px #000;
  -webkit-box-shadow: 0px 2px 4px #000;
  box-shadow: 0px 0px 2px #000;
}
/* LISTE */
#bloc_part_qeel ul { 
  position: relative; 
  list-style: none; 
  width: 110px; 
  padding:0px; 
  margin: 0; 
}
/* ELEMENT DE LA LISTE */
#bloc_part_qeel ul li { 
  height: 30px; 
  width: 110px;
  margin: 0 auto;
  padding: 0;
}
/* LIENS MENU */
#bloc_part_qeel ul li a.info_link { 
  position: absolute; 
  z-index: 110; 
  font-weight: bold; 
  color: black; 
  font-size: 16px;
  margin: 0; 
  padding-left: 10px; 
  display: block; 
  width: 100px; 
  height: 30px; 
  text-decoration: none;   
  text-shadow: 0 1px 0 #000; 
}
a.info_link:hover {
  text-decoration: none; 
}
/* BLOC CONTENEUR */
#bloc_part_qeel ul li div { 
  width: 100px; 
  height: 80px; 
  padding: 0; 
  background: rgba(31,73,94,0.6); 
  overflow: hidden; 
  color: white; 
  position: absolute; 
  top: 5px; 
  left: 0; 
  z-index: 50; 
  opacity: 0;
  margin: 0;
  padding: 0;
  -moz-transition: 1s left, 1s width, 1s opacity; 
  -webkit-transition: 1s left, 1s width, 1s opacity; 
  -o-transition: 1s left, 1s width, 1s opacity;
}
/* BLOC CONTENEUR AU SURVOL */
#bloc_part_qeel ul li:hover div {
  left:110px;
  opacity: 1; 
  width: 160px; 
  background: rgba(31,73,94,0.6); 
  -moz-transition: 1s left, 1s width, 1s opacity; 
  -webkit-transition: 1s left, 1s width, 1s opacity; 
  -o-transition: 1s left, 1s width, 1s opacity;
}
/*l PARAGRAPHE */
#bloc_part_qeel ul li div p {       
  width: 96%; 
  overflow: hidden;
  margin: 3px auto 0;
  paddign: 0;
  font: 13px Trochut;
  color: #fff;
  text-shadow: 0 1px 0 #000;
}

/* -------------- CHATBOX -------------- */
body.chatbox {
background-image:url('http://i48.tinypic.com/2wp0bhf.jpg');
background-repeat: repeat;
}
#chatbox_header {
background-image:url("http://shizoo-design.de/stuff/patterns/146.jpg");
}
#chatbox_header .cattitle strong {
display: none ;
}
#chatbox_header .cattitle:before {
content: "Discutons entre Hakuoukiens" ;
}
#chatbox_header .catBottom .cattitle {
color:#3b2705 !important;
margin:3px !important;
padding:3px;
text-align:center;
font-size:11px !important;
font-weight:bold;
font-variant :small-caps;
}
#chatbox_header .chatbox-options .genmed,
#chatbox_header .chatbox-options {
color:#3b2705 !important;
font-size:9px !important;
font-weight:bold;
}
#chatbox_header .chatbox-options a {
color:#3b2705;
margin-bottom:3px !important;
padding:3px;
text-align:center;
font-size:9px !important;
font-weight:bold;
}
#chatbox {
position: absolute;
top: 30px;
left: 181px;
right: 0;
bottom: 45px;
overflow: auto;
color:#3b2705;
padding: 3px;
text-align: left;
font-size:11px !important;
}
#chatbox_members .member-title {
color:#3b2705;
margin:3px !important;
padding:2px;
text-align:center;
font-size:11px !important;
font-weight:bold;
font-variant :small-caps;
}
#chatbox_members {
position: absolute;
top: 30px;
bottom: 30px;
width: 180px;
overflow: auto;;
}
#chatbox .catBottom {
border: none;
}
#chatbox_footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 3px;
color:#3b2705;
margin:3px !important;
opacity:1;
text-align:left;
font-size:9px !important;
}
#chatbox_footer label {
color:#3b2705;
font-size:11px !important;
font-variant: small-caps;
font-weight:bold;
}
#message {
color:#3b2705;
margin:3px !important;
padding:2px;
text-align:left;
font-size:9px !important;
}
#submit_button {
color:#3b2705;
margin:3px !important;
padding:2px;
text-align:left;
font-size:9px !important;
}
.fontbutton {
padding: 1px;
text-align:left;
}
        #chatbox_bottom {
        width:  px !important;
        }

/* ---------- INFOBULLE - TRANSITION ---------- */

.NU_infobulle{
width: 100px;
margin: auto;
padding: 0;
float: left;
position: relative;
}
.NU_bulle{
background: none;
border: 0px solid black;
width: 0px;
height: 0px;
position: absolute;
  color: black;
top: px;
left: 70px;
overflow: hidden;
z-index: 20;
text-align: center;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-transition: all 1.5s ease; /* pour navigateur webkit */
-moz-transition: all 1.5s ease; /* pour navigateur mozilla */
-o-transition: all 1.5s ease; /* pour navigateur opera */
transition: all 1.5s ease; /* pour les navigateurs récents */
}
.NU_infobulle:hover .NU_bulle{
width: 200px;
height: 35px;
padding: 5px;
border-width: 1px;
}

/* ---------- BOUTON HAUT/BAS ---------- */

.haut{
        position:fixed;
        bottom:400px;
        right:-1px;}
     
.bas{
        position:fixed;
        bottom:300px;
        right:-1px;}

/* ---------- PAGE ACCUEIL MOZAIK ---------- */

#mozaik
{
  width: 730px;
  height: 260px;
  margin: auto;
}
#mozaik a
{
  font-weight: bold;
  color: #575757 !important;
  text-decoration: none !important;
}
#mozaik a:hover
{
  color: #3a3a3a;
  text-decoration: none !important;
}
#mozaik_top
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  margin-top: 10px;
  float: left;
  background: lightcyan;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_top:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #d6d6d6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_credits
{
  position: relative;
  z-index: 1;
  width: 30px;
  height: 238px;
  overflow: hidden;
  margin-top: 10px;
  float: right;
  background: lightcyan;
  border: 1px solid #d6d6d6;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_credits:hover
{
  position: relative;
  z-index: 999;
  width: 330px;
  background: #d6d6d6;
  border: 1px solid #e3e3e3;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_titretop
{
  display: block;
  width: 30px;
  height: 238px;
  float: left;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_top:hover .mozaik_titretop
{
  background-color: lightcyan;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_titrecredits
{
  display: block;
  width: 30px;
  height: 238px;
  float: right;
  overflow: hidden;
  background-color: transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_credits:hover .mozaik_titrecredits
{
  background-color: #9e9e9e;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik_accueil
{
  width: 600px;
  height: 240px;
  margin: auto;
  padding: 10px;
  text-align: justify;
}
#mozaik1
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 120px;
  overflow: hidden;
  background: #c19898;
  border-left: 3px solid #9e3535;
  box-shadow: 0px 0px 0px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik1:hover
{
  z-index: 999;
  width: 600px;
  height: 240px;
  background: #dcdcdc;
  border-left: 0px solid #9e3535;
  box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik2
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 120px;
  overflow: hidden;
  background: #a8b6cc;
  border-right: 3px solid #3b5d94;
  box-shadow: 0px 0px 0px #000000;
  margin-left: 300px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik2:hover
{
  z-index: 999;
  width: 600px;
  height: 240px;
  margin-left: 0px;
  background: #dcdcdc;
  border-right: 0px solid #3b5d94;
  box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik3
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 120px;
  overflow: hidden;
  background: #a3c5a5;
  border-left: 3px solid #429046;
  box-shadow: 0px 0px 0px #000000;
  margin-top: 120px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik3:hover
{
  z-index: 999;
  width: 600px;
  height: 240px;
  margin-top: 0px;
  background: #dcdcdc;
  border-left: 0px solid #429046;
  box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik4
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 120px;
  overflow: hidden;
  background: #d7d1a0;
  border-right: 3px solid #c7b731;
  box-shadow: 0px 0px 0px #000000;
  margin-left: 300px;
  margin-top: 120px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik4:hover
{
  z-index: 999;
  width: 600px;
  height: 240px;
  margin-left: 0px;
  margin-top: 0px;
  background: #dcdcdc;
  border-right: 0px solid #c7b731;
  box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

.mozaik_titre1
{
  width: 300px;
  height: 120px;
  background: url(http://img15.hostingpics.net/pics/372569contexte.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik1:hover .mozaik_titre1
{
  width: 600px;
  height: 60px;
  background: url(http://img15.hostingpics.net/pics/372569contexte.png) top left no-repeat #9e3535;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_titre2
{
  width: 300px;
  height: 120px;
  background: url(http://img15.hostingpics.net/pics/898361lesnews.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik2:hover .mozaik_titre2
{
  width: 600px;
  height: 60px;
  background: url(http://img15.hostingpics.net/pics/898361lesnews.png) top left no-repeat #3b5d94;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_titre3
{
  width: 300px;
  height: 120px;
  background: url(http://img15.hostingpics.net/pics/707275staff.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik3:hover .mozaik_titre3
{
  width: 600px;
  height: 60px;
  background: url(http://img15.hostingpics.net/pics/707275staff.png) top left no-repeat #429046;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_titre4
{
  width: 300px;
  height: 120px;
  background: url(http://img15.hostingpics.net/pics/585458predef.png) top left no-repeat transparent;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
#mozaik4:hover .mozaik_titre4
{
  width: 600px;
  height: 60px;
  background: url(http://img15.hostingpics.net/pics/585458predef.png) top left no-repeat #c7b731;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}

.mozaik_contenu
{
  width: 98%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 160px;
  overflow: auto;
  font-size: 11px;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}
.mozaik_contenu2
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 220px;
  overflow: auto;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}
.mozaik_contenu3
{
  width: 280px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  height: 220px;
  overflow: auto;
  font-size: 10px;
  font-style: italic;
  text-align: left;
  color: #7d7d7d;
  text-shadow: 1px 1px 0px #f1f1f1;
}
.mozaik_illu
{
  width: 150px;
  float: left;
  border: 1px solid #ffffff;
  margin: 5px;
}
.mozaik_news
{
  margin: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #3b5d94;
}
.mozaik_datenews
{
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: #3b5d94;
  margin-right: 20px;
}
.mozaik_avatar
{
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 65px;
  height: 150px;
  overflow: hidden;
  border: 2px solid #9e9e9e;
  box-shadow: 0px 0px 0px #000000;
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  filter: alpha(opacity=50);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_avatar:hover
{
  position: relative;
  z-index: 999;
  display: inline-block;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border: 2px solid #9e9e9e;
  box-shadow: 0px 0px 5px #000000;
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_avatardescr
{
  display: block;
  background: url(http://img15.hostingpics.net/pics/301068noir50.png);
  margin-top: 150px;
  height: 150px;
  overflow: auto;
  color: #e4e4e4;
  font-size: 10px;
  line-height: 12px;
  text-shadow: 1px 1px 0px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_avatar:hover .mozaik_avatardescr
{
  margin-top: 130px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_avatardescr:hover
{
  margin-top: 0px !important;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_avatartitre
{
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.mozaik_predef
{
  clear: both;
  display: block;
  height: 65px;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_predef:hover
{
  display: block;
  height:65px;
  box-shadow: 0px 0px 5px #000000;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  -ms-transition: 1s;
}
.mozaik_predef a
{
  text-transform: uppercase;
  color: #52400a !important;
  text-decoration: none !important;
  text-shadow: 1px 1px 0px #ffffff;
}
.mozaik_predef a:hover
{
  text-decoration: none !important;
}
.predef_icone
{
  display: block;
  float: left;
  width: 50px;
  height 50px;
  overflow: hidden;
  margin: 5px;
  border: 2px solid #9e9e9e;
}
.predef_icone img
{
  width: 50px;
}
.predef_nom
{
  display: block;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  color: #937723;
}

/* PAGE ACCUEIL FORME 1 */

#f1_accueil
{
  width: 750px;
  height: 469px;
  margin: auto;
  background: url(http://i39.tinypic.com/f4ntza.jpg);
  text-shadow: none !important;
}
#f1_accueil a
{
  color: #ba8550 !important;
  text-shadow: none !important;
}
#f1_accueil a:hover
{
  color: #e58f3a !important;
  text-shadow: none !important;
}
.f1_col1
{
  width: 300px;
  vertical-align: top;
}
.f1_contexte
{
  width: 220px;
  height: 300px;
  overflow: auto;
  margin-top: 78px;
  margin-left: 52px;
  text-align: justify;
  color: #7e6144;
  text-shadow: 1px 1px 0px #ffffff;
}
.f1_bloconglets
{
  margin-top: 70px;
}
.f1_onglet1, .f1_onglet2, .f1_onglet3
{
  display: inline-block;
  width: 110px;
  height: 50px;
}
.f1_onglet1
{
  margin-left: 20px;
  margin-right: 15px;
}
.f1_onglet2
{
  margin-left: 20px;
  margin-right: 15px;
}
.f1_contenu1, .f1_contenu2, .f1_contenu3
{
  position: absolute;
  width: 0px;
  height: 230px;
  margin-top: 40px;
  padding-top: 35px;
  overflow: hidden;
  font-size: 11px;
  color: #7e6144;
}
.f1_contenu1
{
  margin-left: -10px;
}
.f1_contenu2
{
  margin-left: -149px;
}
.f1_contenu3
{
  margin-left: -290px;
}
.f1_onglet1:hover .f1_contenu1, .f1_onglet2:hover .f1_contenu2, .f1_onglet3:hover .f1_contenu3
{
  width: 400px;
}
.f1_liens
{
  display: block;
  text-align: center;
}
.f1_liens a
{
  font-size: 16px;
  font-weight: bold;
}
.f1_news, .f1_friends
{
  width: 200px;
  height: 200px;
  overflow: hidden;
  text-align: justify;
}
.f1_credits, .f1_topsites
{
  height: 150px;
  border-left: 1px solid #d19962;
  margin-left: 5px;
  padding: 5px;
  text-align: center;
}
.f1_staff1, .f1_staff2, .f1_staff3
{
  display: block;
  width: 50px;
  height: 50px;
  background: url() #d19962;
  margin-bottom: 20px;
  margin-top: 20px;
  border: 1px solid #d19962;
}
.f1_staffcontenu1, .f1_staffcontenu2, .f1_staffcontenu3
{
  position: absolute;
  width: 0px;
  height: 150px;
  background: #ffffff;
  margin-left: 80px;
  overflow: hidden;
}
.f1_staffcontenu2
{
  margin-top: -72px;
}
.f1_staffcontenu3
{
  margin-top: -144px;
}
.f1_staff1:hover .f1_staffcontenu1, .f1_staff2:hover .f1_staffcontenu2, .f1_staff3:hover .f1_staffcontenu3
{
  width: 300px;
  border: 1px solid #d19962;
}

/* ---------- BARRE NAVIG' ---------- */

#navig
{
  width: 950px;
  height: 25px;
  margin: auto;
  text-align: right;
  font-family: Helene queen.k;
}

#navigation
{
  position: fixed;
  z-index: 999;
  width: 100%;
  background: url(http://img9.xooimage.com/files/d/4/0/texture_rouge-f5744.jpg);
  border-bottom: 2px double indigo;
  margin-top: -10px;
  margin-left: -10px;
  padding: 1px;
  font-family: Helene queen.k;
}

/* ---------- PROFIL ---------- */

/* -------------- Avatar hover profil -------------- */
.avatar_mess
{
  display: block;
  width: 200px;
  height: 400px;
  overflow: hidden;
  background: #ffffff;
  border: 5px solid #3e1d19;
  transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -htm-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  box-shadow: 0px 0px 6px #000000;
  -moz-box-shadow: 0px 0px 6px #000000;
  -o-box-shadow: 0px 0px 6px #000000;
  -htm-box-shadow: 0px 0px 6px #000000;
  -webkit-box-shadow: 0px 0px 6px #000000;
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.avatar_mess:hover
{
    transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -htm-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess
{
  position: absolute;
  display: block;
  width: 190px;
  height: 390px;
  margin: auto;
  padding: 5px;
  overflow: auto;
  background: #ffffff;
  color: #c5bea0;
  font-size: 11px;
  opacity: 0;
  -moz-opacity: 0;
  -khtml-opacity: 0;
  filter: alpha(opacity=0);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.profil_mess:hover
{
  opacity: 1;
  -moz-opacity: 1;
  -khtml-opacity: 1;
  filter: alpha(opacity=100);
      transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.pseudo_mess
{
  display: block;
  position: relative;
  z-index: 2;
  width: 190px;
  margin-top: -15px;
  margin-left: 10px;
  text-align: center;
  font-size: 18px;
  font-family: courier;
  font-weight: bold;
  text-shadow: 0px 0px 3px #c5bea0;
  background: #f0ffff;
  padding-top: 5px;
  border-left: 3px solid #371e1a;
  border-right: 3px solid #371e1a;
  border-top: 1px solid #371e1a;
  border-bottom: 1px solid #371e1a;
  box-shadow: 0px 0px 3px #000000;
  -moz-box-shadow: 0px 0px 3px #000000;
  -o-box-shadow: 0px 0px 3px #000000;
  -htm-box-shadow: 0px 0px 3px #000000;
  -webkit-box-shadow: 0px 0px 3px #000000;
}

.infobulle span
{                   
    position : absolute;
    top : auto;
    left : auto;
    width : 100px;
    height : 100px;
    background-color: #fff;
    display : none;
}
.infobulle:hover span{
    display:block;
    top        :  auto;
    left      :  auto;
    width      :  100px;
    height    : 100px;
    overflow  :  visible;
    background-color: trasparent;
}