Retour Accueil

Connectez vous
Inscrivez-vous







Retournez a la page type du TOPO en utilisant le bouton en haut à gauche de votre page ...

ReculRetour

Le CSS (feuille de style)
de toutes les pages de ce site



body { 	background-color:#ffffff;font-family:"Times New Roman", Times, serif;color:#000000; font-size:24px;margin:0;border:0;text-align: center;}
H1 {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 40px;color:#222224;}
span.leTitre {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 40px;color:#222224;} 
* {box-sizing: border-box;}  
.wrapper > div { 
  border: 2px solid #ffffff;  
  background-color: #ffffff;
  padding: 10px;
  color: #000000;
}
.wrapper {
  display: grid;
  grid-template-rows: auto auto 1fr; 
  grid-template-areas:  
    "bandeau"
    "ToutMenu"
    "content"
    "footer";
  min-height: 100vh;
}
.bandeau {
  grid-area: bandeau;
  text-align:center;
}
.ToutMenu {
  grid-area: ToutMenu;
  text-align:center;
}
.content {
  grid-area: content;
  text-align:left;
}
.footer  {
  grid-area: footer;
  text-align:center;
}

/* ____________doctype_________________  */
div.Limage_de_droite{position:fixed;top:300px;right:0;z-index:10;overflow:hidden;display:block;}
div.home{position:fixed;top:4px;left:4px;overflow:hidden;z-index:30;}
div.scrollUpB  {position: fixed;top : 10px;right: 60px;z-index:60;}
div.scrollUpH  {position: fixed;bottom : 10px;right: 60px;z-index:60;}
div.user-info { position :fixed; top :70px; left :4px; overflow :hidden; z-index :80;  }
div#pour-user {display: none;z-index :80;}
/* ____________menu_________________  */

.LeLabel,
.LaCheckBox { display: none; }
.menu {  display: block;flex-wrap: wrap;margin: 0;padding: 0; }
.menu {  max-width:1400px;margin:0 auto;display:flex; justify-content:center;}


a.lemenuA {   padding:5px 10px;margin:15px 5px 5px 0px;color:#aa2222;  text-decoration:none;  font-size:24px;border:solid 1px #aa2222; border-radius:30px;}
a.lemenu {   padding:5px 10px;margin:15px 5px 5px 0px;color:#555555;  text-decoration:none;  font-size:24px;border:solid 1px #000000; border-radius:30px;}
a.lemenu:link {}
a.lemenu:hover {color:#FF2222;}


/* ___________________________________________________________________________ */
img.mescarres{width:250px;border:0px;}
div.mescarres{width:270px;border:1px solid #000000;text-align:center;padding:1px;display:inline-flex; height: 200px;  margin:1px;}

div.centre4blanc{height:auto;width:auto;max-width:1100px;margin:auto;text-align:center;}
div.txtleft { text-align:justify;}

div.PetitDiv {height :auto;width :auto; max-width :900px; margin :auto; text-align :center;border: 2px solid #000000; border-radius : 20px;}
label,
textarea {letter-spacing: 1px;}


/* ____________ blog tchat livre-or login phototheque ______________ */
div.LesReponses {  height:auto;width:auto;max-width:1000px;margin:auto;text-align:center;}
div.LeRetourL {  width:auto;max-width:1000px;margin:auto;text-align:center;}

div.blog {height :auto;width :auto; max-width :700px; margin :auto; text-align :center;border: 2px solid #ffffff; border-radius : 20px;}
textarea.blog  {background-color:#f2f2f2;border:#557bee solid 1px;padding:4px;width:400px;height:240px;border-radius:10px;}
figure.blog {display: flex;border: 1px solid #000000;border-radius: 20px;padding:5px;margin:auto;width:80%;align-items: center;}
img.blog {width:80px;width:80px;border-radius:50%; line-height:3em;}
p.blog  {text-align:justify;margin:0.5em 0;}
figcaption.blog {padding:0;padding-left:2em;}
h2.blog { margin:0;}

figure.blogREP {display: flex;border: 1px solid #FF2222;border-radius: 20px;padding:5px;margin:auto;width:80%;align-items: center;}
img.blogREP {width:80px;width:80px;border-radius:50%; line-height:3em;}
p.blogREP  {text-align:justify;margin:0.5em 0;}
figcaption.blogREP {padding:0;padding-left:2em;}
/* ____________________recherche______________________________  */
img.lesliens2{float:left;margin:10px;vertical-align:middle;}

/* _________________________divers_______________________________________________ */
figure.blogTOPO {display: flex;border: 1px solid #000000;border-radius: 20px;padding: 5px; margin: 2em auto;align-items: center;}  
figcaption.blogTOPO {margin: auto;}
.blogTOPO p {text-align: center;margin: 0 auto;color: #0094db;}
img.blogTOPO {width: 130px;height: 130px;}
b.b-bleu,
a.b-bleu {color:#0094db;}
a.b-bleu:hover { color :#B62C0E; }

p.txtjust { text-align:justify;}
span.bordbrun {color:#882222;}
div.choix {width:auto;max-width:400px;padding: 30px;margin:auto;font-family: "Times New Roman", Times, serif;border: 2px solid #000000;border-radius: 20px;text-align:left;}
div.choix2 {width:auto;max-width:600px;padding: 30px;margin:auto;font-family: "Times New Roman", Times, serif;text-align:left;}
input[type=checkbox] { padding: 10px; width: 20px;height: 20px;border-radius: 10px;background: green;}
input.LeSubmit {width: 150px;padding: 10px;}
button.boutonVert {width:20px;height:20px;background:#cc0000;border-radius:50%;border:none;cursor:pointer;}
/* ____________le bas footer_________  */
a.LesAcoryght{font-family:"Times New Roman", Times, serif;color:#111113;text-decoration:none;}
a.LesAcoryght:hover{color:#B62C0E;}

/* ____________les pages____________  */

a.LesA3 {font-family :"Times New Roman", Times, serif;color :#333333; text-decoration :none; } 
a.LesA3:hover { color :#B62C0E; }


img.img-circle {  border-radius: 50%;width:60px;height:60px; }
img.img-home { width:60px;height:60px; }
/* __________________les div fixes _________________________________ */

div.Limage { position :fixed; top :170px; right :0; z-index :-12; overflow :hidden; }
div.home { position :fixed; top :0px; left :4px; overflow :hidden; z-index :50; }
div.respons-logo { position :fixed; top :4px; right :4px; overflow :hidden; z-index :50;display:none;  }
div.centre2menu { top:0px;height :auto;width :auto; max-width :1200px; margin :auto; text-align :center;display:block;  }
div.Connecter1 {height:auto;width:auto;max-width:400px;margin:auto;text-align:center;display:none;z-index :160;}
div.tchatxx {height :auto;width :auto; max-width :800px; margin :auto; text-align :center;border: 2px solid #000000; border-radius : 20px;}


img.bande2{width:100%;max-width:1000px;display: Flex;margin-left:auto;margin-right: auto; }
a.LesAcoryght{font-family:"Times New Roman", Times, serif;color:#111113;text-decoration:none;}
a.LesAcoryght:hover{color:#B62C0E;}

/* __________________________________________________ */
div.centre01 { width :auto; margin :auto; text-align :center; }
div.blogsaisie{height:auto;width:auto;max-width:600px;margin:auto;text-align:center;}
form.blogsaisie{border:#000000 solid 1px;padding:22px;width:auto;border-radius:10px;text-align:center;}
label.saisie_commentaire{text-align:right;width:100px;display:inline-block;vertical-align:top;font-weight:bold;margin-right:22px;}
input.saisie_commentaire{background-color:#F2F2F2;border:#000000 solid 1px;padding:4px;width:200px;border-radius:10px;}
input.saisie_commentaire{background-color:#F2F2F2;border:#000000 solid 1px;padding:4px;width:200px;border-radius:10px;}
textarea.saisie_commentaire{background-color:#f2f2f2;border:#000000 solid 1px;padding:4px;width:400px;height:240px;border-radius:10px;}

label,
textarea {letter-spacing: 1px;}
textarea { padding: 10px;width:400px;height:240px;border-radius: 10px;border: 1px solid #000000;}    



div.centreleft {height : auto;width : 900px;margin : auto;text-align : left;}
div.centrePF { text-align:center; MARGIN:auto; WIDTH:auto; MAX-WIDTH:100%;}
div.centre0 { width:90%; margin:auto; text-align:left; }

div.centrele600 { height :auto;width :100%; max-width :600px; margin :auto; text-align :left; } 
div.centre2Left { text-align:left; MARGIN:auto; WIDTH:80%;}


a.LesA3 {font-family :"Times New Roman", Times, serif;color :#333333; text-decoration :none; } 
a.LesA3:hover { color :#B62C0E; }
a.LesA32 {font-family :"Times New Roman", Times, serif;color :#0070C0; text-decoration :none;font-weight:bold; } 
a.LesA32:hover { color :#B62C0E; }
a.google {font-family :Arial,sans serif; color :#000000; text-decoration :none; } 
a.google { color :#000000; }
a.LesAHaut {font-family :Arial,sans serif; color :#ffffff; text-decoration :none; border-bottom:1px;line-height:200%; }
a.LesAHaut:hover { color :#ff9999; } 
a.LesA2 {color : #222223;text-decoration : none;}
a.LesA2:hover {color : #B62C0E;}
a.LesAN {color : #222223;text-decoration : none;}
a.LesAN:hover {color : #B62C0E;}
p.Leleft {  text-align:left;font-family:"Times New Roman", Times, serif; color :#333333; }



img.leleft2 {float : left;margin : 0 1em 0.5em 0;border : none;visibility : visible !important ;}
p.Leleft2 {text-align : left;font-family : Georgia, "Times New Roman", Times, serif;color : #111122;}
p.center {text-align : center;font-family : Georgia, "Times New Roman", Times, serif;color : #111122;}


img.levide {width:250px;height:150px;}

span.LaFonte_blog {  font-family:"Times New Roman", Times, serif; color :#222222; }
span.rouge1 {  font-family:"Times New Roman", Times, serif; color :#883333;  }
span.vert1 {  font-family:"Times New Roman", Times, serif; color :#333388; }

span.LaFonte_blog_left {  text-align:left;font-family:"Times New Roman", Times, serif; color :#222222; }

img.leleft {padding: 20px;border-radius:50%;width: 70px;height: 70px;}
img.bande { width :90%; } 


ul.ulleft li {
	padding:4px 4px 6px 5px;
	border-bottom: 1px #666 dashed;
        text-align: left;
	}


div.PetitDiv2 {height :auto;width :auto; max-width :900px; margin :auto; text-align :center;border: 2px solid #000000; border-radius : 20px;}
table.tab {width : auto;margin : auto;}
table.tab tr td {border-style : double;border-color : #000000;width : 280px;height : 39px;overflow : hidden;text-align : left;}
img.meni {border : 0;height : 39px;margin : 0;width : 46px;vertical-align : middle;}
img.LivreOr {border : 0;width : 144px;cursor : pointer;}
table.LivreOr {border-style : double;border-color : #000000;font-family : Georgia, TimesNewRoman, Times, serif;letter-spacing : normal;
text-indent : 0;text-transform : none;widows : 1;word-spacing : 0;width : 90%;background-color : rgb(191, 199, 207);}
table.LivreOr tr td {border-style : double;border-color : #000000;width : 90%;text-align : left;}
table.Apro tr td {text-align : left;}
table.Lcadre {width : auto;margin : auto;}
table.Lcadre, td.Lcadre {border : solid 1px;border-color : #000000;}
td.Lcadre {border : solid 1px;border-color : #000000;}
td.Lcadre {width : 250px;overflow : hidden;text-align : center;font-family : Georgia, "Times New Roman", Times, serif;color : #3b747a;}
table.tabX500 {width : auto;margin : auto;}
table.tabX500 tr td {border-style : double;border-color : #000000;width : 500px;overflow : hidden;text-align : left;}
table.ztab {width:auto;margin:auto;max-width :900px;}

img.meniX {border : 0;margin : 0;vertical-align : middle;}

bouton.lesubmite {
cursor:pointer;background:#6f8fcf;font-family:"Times New Roman", Times, serif; 
color :#222222;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}


.blog-dialogue {
height:auto;width:auto;max-width:900px;margin:auto;text-align:center;    
border-bottom : 1px solid rgb(124, 124, 124);
border-left : 1px solid rgb(124, 124, 124);

border-top : 1px solid rgb(124, 124, 124);
border-right : 1px solid rgb(124, 124, 124);
padding-top : 20px;

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
.centreXblanc > article > figure img  {    max-width:100%;  } 


/* ______________________________________Users etc.._________________________________________________________ */
div.LesReponses {  height: auto;  width: auto;  max-width: 900px;  margin: auto;}
div.centre2blanc{height:auto;width:auto;max-width:900px;margin:auto;text-align:center;}


label,
textarea {letter-spacing: 1px;}

input#LinputMdpa { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpa {width:20px;vertical-align: middle;}

input#LinputMdpb { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpb {width:20px;vertical-align: middle;}

input#LinputMdpc { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpc {width:20px;vertical-align: middle;}

input#LinputMdpd { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpd {width:20px;vertical-align: middle;}

input#LinputMdpe { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpe {width:20px;vertical-align: middle;}

input#LinputMdpf { box-sizing: border-box;width: 200px; height: 30px; padding-left: 8px; vertical-align: top;}
img#LimgMdpf {width:20px;vertical-align: middle;}



.ow-anywhere { 
  overflow-wrap: anywhere; 
}
/* exemple
<em class="ow-anywhere">
*/
pre, samp {overflow-wrap: anywhere;}



/* ____________________media640px en min width___POUR ARTICLE FIGURE etc___________________ */
@media screen and (min-width:640px){
  .centreXblanc > article { display:flex; justify-content:center;  align-items:center;  }
  .centreXblanc > article > figure,
  .centreXblanc > article > div   { flex:1 1 45%;  width:45%;  }
  .centreXblanc > div {  display: block;   width: auto;  }
}

/* ________________________________________________________  */
@media (min-width: 1200px) and (max-width: 1400px) { 
div.Limage_de_droite{display:none;}

}

/* ________________________________________________________  */
@media (min-width: 750px) and (max-width: 1200px) { 
body { 	background-color:#ffffff;font-family:"Times New Roman", Times, serif;color:#000000; font-size:23px;margin:0;border:0;text-align: center;width:auto;}
span.leTitre {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 36px;color:#222224;}
H1 {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 36px;color:#222224;}
div.Limage_de_droite{display:none;}
}

@media (max-width:750px){  
body { 	background-color:#ffffff;font-family:"Times New Roman", Times, serif;color:#000000; font-size:22px;margin:0;border:0;text-align: center;width:auto;}
span.leTitre {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 34px;color:#222224;}
H1 {font-family: "Felix Titling", "Times New Roman", Harrington, sans-serif;font-size: 34px;color:#222224;}
img,blockquote, pre, textarea, input, iframe, object, embed, video {max-width:100%;}
textarea {overflow-wrap:break-word;hyphens:auto;}
pre, samp {overflow-wrap: anywhere;}

img.fade {width:90%;position:absolute;}
img.img-circle {  border-radius: 50%;width:60px;height:60px; }
img.img-home { width:60px;height:60px; }
div.home {position:fixed;top:4px;left:4px;overflow:hidden;z-index:50;}
div.user-info { position :fixed; top :70px; left :4px; overflow :hidden; z-index :160; }
div.Limage_de_droite{display:none;}


.menu {display: none;width: 300px;}
.LaCheckBox,.LeLabel  {display:block;width:30px;}

.LaCheckBox:checked ~ .menu {    display: block;display: flex;flex-wrap: wrap;flex-direction:column; }
.LaCheckBox {opacity: 0;	position: absolute;	top: -5000px;}
.LaCheckBox:focus + .LeLabel { outline: #000000 auto 5px;}
.LeLabel {justify-content: space-between}
.LeLabel {margin-left: auto;} 

}




Ce CSS (feuille de style) est commun à toutes les pages de ce site, à l'exeption de la photothéque (galerie)