Papaaaa
Messages : 174 Date d'inscription : 12/02/2012
| Sujet: CSS HIVER 2013 23/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; } | |
|