RSS
RSS
CSS HIVER 2013


Revoilà nos héros à nos jours !!! Ça paraît différent mais ça ne l'est pas tant que ça... Elève, professeur ou civil, choisissez et faites votre entrée dans ce nouvel univers !!!
 

Partagez
 

 CSS HIVER 2013

Aller en bas 
AuteurMessage
Papaaaa

Papaaaa

Messages : 174
Date d'inscription : 12/02/2012

CSS HIVER 2013 Empty
MessageSujet: CSS HIVER 2013   CSS HIVER 2013 Icon_minitime23/5/2013, 17:04

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


Spoiler:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
 
CSS HIVER 2013
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Le nouveau thème d'hiver !
» Le parfum des roses d'hiver
» photos bastogne 2009.
» Hiver Boréal
» NEW YORK RANGERS 2013

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Hakuouki Sweet School Life :: Codage :: Pages CSS-
Sauter vers:  

Le forum est l'entière propriété de ses fondateurs
Forum by Ritsuko Yamaguchi - Theme et codages by Sanosuke Harada à l'aide de bases trouvées sur ForumActif, School of pub, Thèmes F.A. et Never-Utopia
Do not rip - All rights reserved - © 2012 Hakuouki Parallel Universes