/* PAGE D'ACCUEIL PAR ORANGE DE CSSACTIF (http://css-actif.com/)
MERCI DE NE PAS RETIRER CETTE MENTION, PAR RESPECT. */
/* Mise en forme générale */
.cssactif_pa_main {
width: 800px;
padding: 30px;
margin: 0 auto;
}
.cssactif_pa_main h1 { /* Titre principal (Bienvenue sur...) */
font-family: "Courier New", Courier, monospace; /* Police de caractère */
text-align: center; /* Alignement du texte */
text-transform: uppercase; /* Transformation: met le texte en majuscules */
font-weight: normal; /* Épaisseur normale */
letter-spacing: 16px; /* Espacemement des caractères en PX */
font-size: 32px; /* Grosseur du texte */
color: #fcca00; /* Couleur du texte */
text-shadow: 2px 2px 0px #FFFFFF; /* Ombre du texte */
}
.cssactif_pa_main h2 { /* Titre des colonnes (Contexte, Nouveautés etc.) */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
font-weight: normal; /* Épaisseur normale */
color: #FFFFFF; /* Couleur du texte */
text-transform: uppercase; /* Transformation: met le texte en majuscules */
text-shadow: 1px 1px 1px #000000; /* Ombre du texte */
font-size: 18px; /* Grosseur du texte */
margin:0;
}
.cssactif_pa_colonne { /* Style général des colonnes */
float: left; /* Place les colonnes un à côté de l'autre */
width: 33%; /* Donne la grandeur des colonnes */
background-color: #FFFFFF; /* Couleur de fond */
height: 400px; /* Hauteur des colonnes: doit être fixe */
color: #777777; /* Couleur du texte */
opacity: 0.9; /* Opacité des colonnes */
/* Transition */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
/*Ombre porté */
-webkit-box-shadow: 0px 0px 1px 0px #CCCCCC;
box-shadow: 0px 0px 1px 0px #CCCCCC;
}
.cssactif_pa_colonne p { /* Paragraphe des colonnes */
padding: 0 10px; /* Padding */
text-indent: 10px; /* Alinéa */
text-align: justify; /* Alignement du texte */
}
.cssactif_pa_colonne:hover { /* Colonne au survol */
/* Effet de grossissement */
-moz-transform: scale(1.05) translate(0px, -20px) ;
-webkit-transform: scale(1.05) translate(0px, -20px) ;
-o-transform: scale(1.05) translate(0px, -20px) ;
-ms-transform: scale(1.05) translate(0px, -20px);
transform: scale(1.05) translate(0px, -20px) ;
opacity: 1; /* Opacité */
/* Nouvelle ombre portée */
-webkit-box-shadow: 0px 5px 10px 0px #CCCCCC;
box-shadow: 0px 5px 10px 0px #CCCCCC;
z-index: 999;
}
.cssactif_pa_header { /* Style commun des header de couleur */
padding: 10px;
height: 80px;
}
.cssactif_pa_header p { /* Style du description dans les headers */
margin: 5px; /* Marge */
padding: 0; /* Padding */
color: #FFFFFF; /* Couleur du texte */
text-shadow: 1px 1px 1px #000000; /* Ombre portée */
font-style: italic; /* Style italic */
opacity: 0.8; /* Opacity du texte */
}
.colgauche .cssactif_pa_header {background-color: #01c6d9;} /* Colonne de gauche, couleur du header */
.colcentre .cssactif_pa_header {background-color: #d9015d;}/* Colonne du centre, couleur du header */
.coldroite .cssactif_pa_header {background-color: #7fbf33; } /* Colonne de droite, couleur du header */
/* Contenu des colonnes */
.new {
margin: 0px 10px 5px 10px; /* Marge Haut Droit Bas Gauche */
padding: 5px; /* Padding */
border-bottom: 1px solid #d9015d; /* Bordure du séparateur */
text-align: justify; /* Alignement du texte */
}
.new em { /* Dates */
color: #d9015d; /* Couleur du texte */
text-transform: uppercase; /* Transformation du texte en majuscule */
font-style: normal; /* Enlève le italic par défaut de la balise em */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
}
.new em:after {
content: " ►"; /* Ajoute la flèche après les dates */
}
.pers { /* Cadre des personnages */
border: 1px solid #7fbf33; /* Bordure des personnages */
margin: 10px; /* marge externe */
/* Arrondissement des bordures */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
padding: 3px; /* Marge interne */
text-align: center; /* Alignement du texte */
}
.pers img { /* Image des personnages */
float: left; /* Place à gauche du texte */
width: 50px; /* Grandeur de l'image */
height: 50px; /* Grandeur de l'image */
border: 3px solid #7fbf33; /* Bordure de l'image */
/* Arrondissement des bordures */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* Transformation */
-moz-transform: rotate(-12deg) translate(0px, -5px) ;
-webkit-transform: rotate(-12deg) translate(0px, -5px) ;
-o-transform: rotate(-12deg) translate(0px, -5px) ;
-ms-transform: rotate(-12deg) translate(0px,-5px) ;
transform: rotate(-12deg) translate(0px, -5px);
}
.pers:first-line { /* Première ligne:contient le nom du personnage */
color: #7fbf33;/* Couleur du texte */
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; /* Police de caractère */
text-transform: uppercase; /* Transformation du texte */
}
|
