« MediaWiki:Common.css » : différence entre les versions

De WikiMetz, l'histoire de Metz, l'encyclopédie de Metz
Aucun résumé des modifications
Aucun résumé des modifications
 
(294 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
/* Le CSS placé ici sera appliqué à tous les habillages. */
/* Le CSS placé ici sera appliqué à tous les habillages. */


/* To change the tile bar background color*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,600;1,200;1,300&display=swap');


// For green background tile.
#toc {display:inline-block; max-width:500px; border-color:#6d0a0a}
.tilebar {
a,a.new,.new a,a.new:visited,.new a:visited,a:visited{
background: green !important;
color:#0088dd;
}
.mw-parser-output a{
font-family: 'Arvo', serif;
font-weight:400;
}
a:hover,a:visited:hover{
color:#006699;
}
a.new:hover,.new a:hover,a.new:visited:hover,.new a:visited:hover{
color:#ba0000;
}
}


/* les puces */
span.cartouche
ul {
{   display: inline-block;
list-style-type: disc;
    width: auto;
.list-style-image-svg('images/bullet-circle-icon.svg', 'images/bullet-circle-icon.png');
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 700;
}
}
span.cartouche>a {
color:white; }


/* les couleurs du header */
span.numero:before
{
content:"";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 1px solid white;
    border-radius: 4px;
}
span.numero
{
display: inline-flex;
    background: #165282;
    color: white;
    padding: 0px 6px;
    margin-right: 4px;
    float: left;
    font-size: 87%;
    text-align: center;
    font-weight: bold;
    vertical-align: baseline;
    font-family: serif;
    border: 1px solid white;
position:relative;
}


#mw-page-base
blockquote{
{background-color: #9933ff !important;
    border: 1px solid #e3dcdc;
background-image: none;}
    box-shadow: 3px 3px 3px 0px #0000005c;
#footer{background:#2d2d2d;}
    padding: 3px 28px;
div#footer #footer-info li {   color: #c8ccd1;}
width: fit-content;
div#footer #footer-info li a {   color: white;}
}
@media (max-width:768px)
 
{#mw-page-base
.cite_virgule {
{background-color: #9933ff;}
    padding-left: 0;
#footer{background:#2d2d2d;}
    padding-right: 1px;
div#footer #footer-info li {   color: #c8ccd1;}
}
div#footer #footer-info li a {   color: white;}
 
.color-left{background:#800103;}
.color-right{background: #333;}
.color-middle{background: #a2a9b1;}
#mw-content-container{border-bottom: solid 4px #800103;}
body{background:#222}
#mw-footer-container {    border-top: solid 1px #2b2626;}
#mw-content h1.firstHeading {    border-bottom: solid 4px #800103;}
p{text-align: justify;
 
}
 
ul.infobox-chrono {
text-align: center;
    margin: 0;
    padding: 0;
}
ul.infobox-chrono li {
    display: inline-block;
    padding: 2px;
    text-align: center;}
ul.infobox-chrono li:not(:first-child):before {
    content: "\00007C";
    color: #263238;
    font-weight: bold;
    display: inline-block;
    margin-right: 5px;
}
.bandeau-article{
display:block;
position: relative;
background: #263238;
margin: 10px 20px;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
.bandeau-article a, .bandeau-article a.new:hover, .bandeau-article a:hover, .bandeau-article a.new:visited, .bandeau-article a:visited {
    border-bottom: 1px dotted;
color:white !important;
}
.bandeau-article-info{
background: #263238;
}
.bandeau-article-warning{
background: #77ccff;
}
.bandeau-article-alert{
background:#800103;
}
.bandeau-article-image{
    display: inline-block;
    float: left;
    height: auto;
    font-size: 40px;
padding:11px 22px;
background: rgba(0, 0, 0, 0.25);
color:white;
}
.bandeau-copy-image{
    display: inline-block;
    float: left;
    height: auto;
    font-size: 24px;
padding:11px 22px;
background: rgba(0, 0, 0, 0.25);
color:white;
}
.bandeau-article-texte{
padding:15px;
display:left;
font-size: 0.9em;
text-align: center;
line-height: 0.9em;
letter-spacing: -0.4px;
height: 48px;
    overflow: hidden;
color:white;
}
.bandeau-copy-texte{
padding:15px;
display:left;
font-size: 0.9em;
text-align: center;
line-height: 0.9em;
letter-spacing: -0.4px;
height: 25px;
    overflow: hidden;
color:white;
}
.bandeau-article-texte>strong{
color: white;
font-size: 1.3em;
text-align: center;
line-height: 0.9em;
letter-spacing: -0.4px;
}
.bandeau-inside {
    display: block;
    font-size: 0.95em;
    border-width: 1px 0;
    padding: 0.2em 0.5em 0.3em 0;
    margin: 0.3em 0 0.7em 2em;
    background-color: #fdfdfd;
    background-color: #fbfbfb;
    border-style: solid;
    overflow: hidden;
    position: relative;
}
.b-i-warning{
    border-color: #77ccff;
}
.b-i-alert{
    border-color: #800103;
}
.b-i-info{
    border-color: #e7e7e7;
}
.infobox-container { display:inline-grid; border: 1px solid #800103;
font-family: 'Montserrat', sans-serif;
    margin: 0.5em 0 1em 1em;
    -webkit-box-shadow: 0 10px 6px -6px #777;
background:#e8e4e4;
    background-size: 36px;
    background-repeat: no-repeat;
    background-position-x: 10px;
    background-position-y: 7px;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;}
@media (min-width:851px) {
.infobox-container { float:right; width:20em;}
}
@media (max-width:850px) {
.infobox-container { width:100%; margin:0; }
}
.infobox-title{
background: #0000004a;
    padding: 0.7em;
    text-align: center;
    font-size: 1.2em;
    margin: 0px;
    color: white;
}
.infobox-image {
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.infobox-image img{
    border: 1px solid #990000;
    margin-top: 8px;
}
.infobox-section {
    background: #800103;
    padding: 0.2em;
    text-align: center;
    font-size: 0.8em;
    font-weight: 600;
    margin: 4px;
    color: white;
clear:both;
}
.infobox-content{
    padding: 0.2em;
    font-size: 0.8em;
    margin: 4px;
}
.infobox-content-l{
    display: block;
    float: left;
font-weight:600;
    width: 40%;
    margin-bottom: 5px;
clear:both; }
.infobox-content-r{
    display: block;
margin-bottom: 5px;
    float: right;
    width: 60%; }
 
.home-col{  width:calc(50% - 50px); float:left; margin-right:25px }
.home-col-r{  width:calc(50% - 50px); float:right; margin-left:25px }
 
@media (max-width: 800px) {
.home-col,.home-col-r{  width:100%; }
}
 
.bg-park{
background-image: url(/resources/assets/park.png);
}
.bg-time{
background-image: url(/resources/assets/temps.png);
}
.bg-building{
background-image: url(/resources/assets/batiment.png);
}
.bg-people{
background-image: url(/resources/assets/personne.png);
}
.bg-road{
background-image: url(/resources/assets/route.png);
}
.bg-water{
background-image: url(/resources/assets/water.png);
}
.bg-bridge{
background-image: url(/resources/assets/bridge.png);
}
 
span.partipol {
border-left: 6px solid;
padding-left: 4px;
font-weight: 600;
}
 
.parti_UDF,.parti_UDFC, .parti_MR, .parti_DLI, .parti_CNI, .parti_RI, .parti_CR, .parti_Modérés {
border-color:#26c4ec !important;
}
.parti_UDI,.parti_CDP,.parti_MRP {
border-color:#00FFFF !important;
}
.parti_PS, .parti_SFIO, .parti_PSF, .parti_PSOR, .parti_DVG {
border-color:#FF8080 !important;
}
.parti_MoDem {
border-color:#ff9900 !important;
}
.parti_DVD {
border-color:#adc1fd !important;
}
.parti_Ecolo, .parti_EELV, .parti_LV {
border-color:#77ff77 !important;
}
.parti_RPR, .parti_RPF, .parti_UDR, .parti_UMP, .parti_LR, .parti_UNR, .parti_UNR-UDT, .parti_PRSRF {
border-color:#0066cc !important;
}
.parti_FG, .parti_PCF, .parti_PG, .parti_LFI, .parti_PC, .parti_FA, .parti_UA, .parti_SFIC {
border-color:#dd0000 !important;
}
.parti_LO, .parti_LCR, .parti_NPA, .parti_EXG {
border-color:#bb0000 !important;
}
.parti_FR{
border-color:#0e2d4d !important;
}
.parti_LREM {
border-color:#ffeb00 !important;
}
.parti_PRL{
border-color:rgb(38, 196, 236) !important;
}
.parti_AD, .parti_ARD, .parti_PRD {
border-color:gold !important;
}
.parti_PRRRS, .parti_DVC {
border-color:#ffcc33 !important;
}
.parti_RN, .parti_FN, .parti_EXD {
border-color:#0D378A !important;
}
.parti_SE, .parti_DIV {
border-color:#888888 !important;
}
 
div.panno_rapide {
border: solid 2px white;
background-color: #025d52;
color: white;
text-transform: uppercase;
padding: 2px 8px;
font-family: 'Raleway', sans-serif;
font-weight:600;
letter-spacing:2px;
clear:left;
font-size:9px;
float:left;
justify-content: space-between;
align-items: center;
display:inline-flex;
width:185px;
}
 
div.panno_autoroute {
border: solid 2px white;
background-color: #0d3ba7;
color: white;
text-transform: uppercase;
padding: 2px 8px;
font-family: 'Raleway', sans-serif;
font-weight:600;
justify-content: space-between;
align-items: center;
display:inline-flex;
width:185px;
letter-spacing:2px;
clear:left;
font-size:9px;
float:left;
}
 
div.panno_route {
border: solid 2px black;
background-color: white;
color: black;
padding: 2px 8px;
font-family: 'Raleway', sans-serif;
font-weight:600;
justify-content: space-between;
align-items: center;
display:inline-flex;
width:185px;
letter-spacing:2px;
clear:left;
float:left;
font-size:9px;
}
 
div.panno_italic {
font-style: italic;
}
 
div.panno_droite::after {
font-family: FontAwesome;
content: "\f061";
padding-left: 30px;
}
 
div.panno_gauche::before {
font-family: FontAwesome;
content: "\f060";
padding-right: 30px;
}
 
div.panno_haut::before {
font-family: FontAwesome;
content: "\f062";
padding-right: 30px;
}
 
div.panno_bas::before {
font-family: FontAwesome;
content: "\f063";
}
 
div.panno_parking {
border: solid 1px black;
background-color: white;
color: white;
padding: 2px 8px;
font-family: 'Raleway', sans-serif;
font-weight: 600;
justify-content: space-between;
align-items: center;
display:inline-flex;
width:185px;
letter-spacing: 2px;
clear:left;
float:left;
}
div.panno_parking::after, div.panno_parking:before {
color:black;
}
 
div.panno_parking span{
font-size: 10px;
background-color:#116955;
}
div.panno_parking span::before{
    content: 'P';
    color: #116955;
    background: white;
    border: 1px solid #116955;
    padding: 1px;
    font-weight: bold;
    font-style: normal;
    margin-right: 5px;
}
table.topographie {
border-spacing:0;
}
td.topographie_left {
text-align: right;
padding-right: 10px;
width: 200px;
font-size:medium;
}
td.topographie_right {
text-align: left;
padding-left: 10px;
width: 200px;
font-size:medium;
}
td.topographie_right.topographie_entre::before{
font-family: FontAwesome;
content: "\f060 ";
margin-right: 8px;
}
td.topographie_right.topographie_sort::after{
font-family: FontAwesome;
content: "\f061 ";
margin-right: 8px;
}
td.topographie_left.topographie_entre::after{
font-family: FontAwesome;
content: "\f061 ";
margin-right: 8px;
}
td.topographie_left.topographie_sort::before{
font-family: FontAwesome;
content: "\f060 ";
margin-right: 8px;
}
td.topographie_top.topographie_sort::before{
font-family: FontAwesome;
content: "\f062 ";
margin-right: 8px;
}
td.topographie_top.topographie_entre::after{
font-family: FontAwesome;
content: "\f063 ";
margin-right: 8px;
}
td.topographie_bottom.topographie_sort::after{
font-family: FontAwesome;
content: "\f063 ";
margin-right: 8px;
}
td.topographie_bottom.topographie_entre::before{
font-family: FontAwesome;
content: "\f062 ";
margin-right: 8px;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
td.topographie_middle{
{#mw-page-base
background: #616161;
{background-color: #9933ff;}
width: 45px;
#footer{background:#2d2d2d;}
border-spacing: 10px;
div#footer #footer-info li {    color: #c8ccd1;}
text-align:center;
div#footer #footer-info li a {    color: white;}
padding: 5px 0;
}
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
td.topographie_top,td.topographie_bottom {
{#mw-page-base
text-align:center;
{background-color: #9933ff;}
padding: 5px 0;
#footer{background:#2d2d2d;}
font-size:medium;
div#footer #footer-info li {    color: #c8ccd1;}
div#footer #footer-info li a {    color: white;}
}
}
div.vectorTabs a:hover
td.topographie_pieton
{background-color: #c8ccd1;}
{
div.onhoverbg:hover
background:#a38e6d
{background-color: #c8ccd1;}
img.downarrow:hover
{background-color: #c8ccd1;}
div.vectorMenu:hover h5 span
{background-color: #c8ccd1;}
div.vectorMenu h5 span
{background-color: #9933ff;}
div.vectorMenu:hover h5 a
{background-color: #c5a6ff;}
div.vectorMenu h5 a
{background-color: #9933ff;}
div.vectorMenu:hover
{background-color: #c5a6ff;}
div.vectorMenu ul
{border: solid 2px #9933ff;
border-top: none;}
@media (max-width: 768px)
{#hamburgerIcon:hover
{background-color: #c5a6ff;}
img.editbutton:hover
{background-color: #c5a6ff;}
div.actionmenu ul
{border-top: solid 2px #9933ff;}
#left-navigation
{background-color: #9933ff;}
}
}

Version actuelle datée du 9 juillet 2024 à 15:55

/* Le CSS placé ici sera appliqué à tous les habillages. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,600;1,200;1,300&display=swap');

#toc {display:inline-block; max-width:500px; border-color:#6d0a0a}
a,a.new,.new a,a.new:visited,.new a:visited,a:visited{
color:#0088dd; 
}
.mw-parser-output a{
font-family: 'Arvo', serif;
font-weight:400;
}
a:hover,a:visited:hover{
color:#006699;
}
a.new:hover,.new a:hover,a.new:visited:hover,.new a:visited:hover{
color:#ba0000;
}

span.cartouche
{    display: inline-block;
    width: auto;
    padding: 2px 6px;
    font-size: 12px;
    font-weight: 700;
}
span.cartouche>a {
color:white; }

span.numero:before
{
content:"";
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
    border: 1px solid white;
    border-radius: 4px;
}
span.numero
{
display: inline-flex;
    background: #165282;
    color: white;
    padding: 0px 6px;
    margin-right: 4px;
    float: left;
    font-size: 87%;
    text-align: center;
    font-weight: bold;
    vertical-align: baseline;
    font-family: serif;
    border: 1px solid white;
position:relative;
}

blockquote{
    border: 1px solid #e3dcdc;
    box-shadow: 3px 3px 3px 0px #0000005c;
    padding: 3px 28px;
width: fit-content;
}

.cite_virgule {
    padding-left: 0;
    padding-right: 1px;
}

.color-left{background:#800103;}
.color-right{background: #333;}
.color-middle{background: #a2a9b1;}
#mw-content-container{border-bottom: solid 4px #800103;}
body{background:#222}
#mw-footer-container {    border-top: solid 1px #2b2626;}
#mw-content h1.firstHeading {    border-bottom: solid 4px #800103;}
p{text-align: justify;

}

ul.infobox-chrono {
text-align: center;
    margin: 0;
    padding: 0;
}
ul.infobox-chrono li {
    display: inline-block;
    padding: 2px;
    text-align: center;}
ul.infobox-chrono li:not(:first-child):before {
    content: "\00007C";
    color: #263238;
    font-weight: bold;
    display: inline-block;
    margin-right: 5px;
}
.bandeau-article{
display:block;
position: relative;
background: #263238;
margin: 10px 20px;
-webkit-box-shadow: 0 10px 6px -6px #777;
-moz-box-shadow: 0 10px 6px -6px #777;
box-shadow: 0 10px 6px -6px #777;
}
.bandeau-article a, .bandeau-article a.new:hover, .bandeau-article a:hover, .bandeau-article a.new:visited, .bandeau-article a:visited {
    border-bottom: 1px dotted;
color:white !important;
}
.bandeau-article-info{
background: #263238;
}
.bandeau-article-warning{
background: #77ccff;
}
.bandeau-article-alert{
background:#800103;
}
.bandeau-article-image{
    display: inline-block;
    float: left;
    height: auto;
    font-size: 40px;
padding:11px 22px;
background: rgba(0, 0, 0, 0.25);
color:white;
}
.bandeau-copy-image{
    display: inline-block;
    float: left;
    height: auto;
    font-size: 24px;
padding:11px 22px;
background: rgba(0, 0, 0, 0.25);
color:white;
}
.bandeau-article-texte{
padding:15px;
display:left;
font-size: 0.9em;
text-align: center;
line-height: 0.9em;
letter-spacing: -0.4px;
height: 48px;
    overflow: hidden;
color:white;
}
.bandeau-copy-texte{
padding:15px;
display:left;
font-size: 0.9em;
text-align: center;
line-height: 0.9em;
letter-spacing: -0.4px;
height: 25px;
    overflow: hidden;
color:white;
}
.bandeau-article-texte>strong{
color: white;
font-size: 1.3em;
text-align: center;
line-height: 0.9em;
letter-spacing: -0.4px;
}
.bandeau-inside {
    display: block;
    font-size: 0.95em;
    border-width: 1px 0;
    padding: 0.2em 0.5em 0.3em 0;
    margin: 0.3em 0 0.7em 2em;
    background-color: #fdfdfd;
    background-color: #fbfbfb;
    border-style: solid;
    overflow: hidden;
    position: relative;
}
.b-i-warning{
    border-color: #77ccff;
}
.b-i-alert{
    border-color: #800103;
}
.b-i-info{
    border-color: #e7e7e7;
}
.infobox-container { display:inline-grid; border: 1px solid #800103;
font-family: 'Montserrat', sans-serif;
    margin: 0.5em 0 1em 1em;
    -webkit-box-shadow: 0 10px 6px -6px #777;
background:#e8e4e4;
    background-size: 36px;
    background-repeat: no-repeat;
    background-position-x: 10px;
    background-position-y: 7px;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;}
@media (min-width:851px) {
.infobox-container { float:right; width:20em;}
}
@media (max-width:850px) {
.infobox-container { width:100%; margin:0; }
}
.infobox-title{
background: #0000004a;
    padding: 0.7em;
    text-align: center;
    font-size: 1.2em;
    margin: 0px;
    color: white;
}
.infobox-image {
    text-align: center;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.infobox-image img{
    border: 1px solid #990000;
    margin-top: 8px;
}
.infobox-section {
    background: #800103;
    padding: 0.2em;
    text-align: center;
    font-size: 0.8em;
    font-weight: 600;
    margin: 4px;
    color: white;
clear:both;
}
.infobox-content{
    padding: 0.2em;
    font-size: 0.8em;
    margin: 4px;
}
.infobox-content-l{
    display: block;
    float: left;
font-weight:600;
    width: 40%;
    margin-bottom: 5px;
clear:both; }
.infobox-content-r{
    display: block;
 margin-bottom: 5px;
    float: right;
    width: 60%; }

	.home-col{  width:calc(50% - 50px); float:left; margin-right:25px }
.home-col-r{  width:calc(50% - 50px); float:right; margin-left:25px }

@media (max-width: 800px) {
	.home-col,.home-col-r{  width:100%; }
}

.bg-park{
background-image: url(/resources/assets/park.png);
}
.bg-time{
background-image: url(/resources/assets/temps.png);
}
.bg-building{
background-image: url(/resources/assets/batiment.png);
}
.bg-people{
background-image: url(/resources/assets/personne.png);
}
.bg-road{
background-image: url(/resources/assets/route.png);
}
.bg-water{
background-image: url(/resources/assets/water.png);
}
.bg-bridge{
background-image: url(/resources/assets/bridge.png);
}

span.partipol {
border-left: 6px solid;
padding-left: 4px;
font-weight: 600;
}

.parti_UDF,.parti_UDFC, .parti_MR, .parti_DLI, .parti_CNI, .parti_RI, .parti_CR, .parti_Modérés {
border-color:#26c4ec !important;
}
.parti_UDI,.parti_CDP,.parti_MRP {
border-color:#00FFFF !important;
}
.parti_PS, .parti_SFIO, .parti_PSF, .parti_PSOR, .parti_DVG {
border-color:#FF8080 !important;
}
.parti_MoDem {
border-color:#ff9900 !important;
}
.parti_DVD {
border-color:#adc1fd !important;
}
.parti_Ecolo, .parti_EELV, .parti_LV {
border-color:#77ff77 !important;
}
.parti_RPR, .parti_RPF, .parti_UDR, .parti_UMP, .parti_LR, .parti_UNR, .parti_UNR-UDT, .parti_PRSRF {
border-color:#0066cc !important;
}
.parti_FG, .parti_PCF, .parti_PG, .parti_LFI, .parti_PC, .parti_FA, .parti_UA, .parti_SFIC {
border-color:#dd0000 !important;
}
.parti_LO, .parti_LCR, .parti_NPA, .parti_EXG {
border-color:#bb0000 !important;
}
.parti_FR{
border-color:#0e2d4d !important;
}
.parti_LREM {
border-color:#ffeb00 !important;
}
.parti_PRL{
border-color:rgb(38, 196, 236) !important;
}
.parti_AD, .parti_ARD, .parti_PRD {
border-color:gold !important;
}
.parti_PRRRS, .parti_DVC {
border-color:#ffcc33 !important;
}
.parti_RN, .parti_FN, .parti_EXD {
border-color:#0D378A !important;
}
.parti_SE, .parti_DIV {
border-color:#888888 !important;
}

div.panno_rapide {
border: solid 2px white;
background-color: #025d52;
color: white;
text-transform: uppercase;
padding: 2px 8px;
font-family: 'Raleway', sans-serif;
font-weight:600;
letter-spacing:2px;
clear:left;
font-size:9px;
float:left;
justify-content: space-between;
align-items: center;
display:inline-flex;
width:185px;
}

div.panno_autoroute {
border: solid 2px white;
background-color: #0d3ba7;
color: white;
text-transform: uppercase;
padding: 2px 8px;
font-family: 'Raleway', sans-serif;
font-weight:600;
justify-content: space-between;
align-items: center;
display:inline-flex;
width:185px;
letter-spacing:2px;
clear:left;
font-size:9px;
float:left;
}

div.panno_route {
border: solid 2px black;
background-color: white;
color: black;
padding: 2px 8px;
font-family: 'Raleway', sans-serif;
font-weight:600;
justify-content: space-between;
align-items: center;
display:inline-flex;
width:185px;
letter-spacing:2px;
clear:left;
float:left;
font-size:9px;
}

div.panno_italic {
font-style: italic;
}

div.panno_droite::after {
font-family: FontAwesome;
content: "\f061";
padding-left: 30px;
}

div.panno_gauche::before {
font-family: FontAwesome;
content: "\f060";
padding-right: 30px;
}

div.panno_haut::before {
font-family: FontAwesome;
content: "\f062";
padding-right: 30px;
}

div.panno_bas::before {
font-family: FontAwesome;
content: "\f063";
}

div.panno_parking {
border: solid 1px black;
background-color: white;
color: white;
padding: 2px 8px;
font-family: 'Raleway', sans-serif;
font-weight: 600;
justify-content: space-between;
align-items: center;
display:inline-flex;
width:185px;
letter-spacing: 2px;
clear:left;
float:left;
}
div.panno_parking::after, div.panno_parking:before {
color:black;
}

div.panno_parking span{
font-size: 10px;
background-color:#116955;
}
div.panno_parking span::before{
    content: 'P';
    color: #116955;
    background: white;
    border: 1px solid #116955;
    padding: 1px;
    font-weight: bold;
    font-style: normal;
    margin-right: 5px;
}
table.topographie {
border-spacing:0;
}
td.topographie_left {
text-align: right;
padding-right: 10px;
width: 200px;
font-size:medium;
}
td.topographie_right {
text-align: left;
padding-left: 10px;
width: 200px;
font-size:medium;
}
td.topographie_right.topographie_entre::before{
font-family: FontAwesome;
content: "\f060 ";
margin-right: 8px;
}
td.topographie_right.topographie_sort::after{
font-family: FontAwesome;
content: "\f061 ";
margin-right: 8px;
}
td.topographie_left.topographie_entre::after{
font-family: FontAwesome;
content: "\f061 ";
margin-right: 8px;
}
td.topographie_left.topographie_sort::before{
font-family: FontAwesome;
content: "\f060 ";
margin-right: 8px;
}
td.topographie_top.topographie_sort::before{
font-family: FontAwesome;
content: "\f062 ";
margin-right: 8px;
}
td.topographie_top.topographie_entre::after{
font-family: FontAwesome;
content: "\f063 ";
margin-right: 8px;
}
td.topographie_bottom.topographie_sort::after{
font-family: FontAwesome;
content: "\f063 ";
margin-right: 8px;
}
td.topographie_bottom.topographie_entre::before{
font-family: FontAwesome;
content: "\f062 ";
margin-right: 8px;
}
td.topographie_middle{
background: #616161;
width: 45px;
border-spacing: 10px;
text-align:center;
padding: 5px 0;
}
td.topographie_top,td.topographie_bottom {
text-align:center;
padding: 5px 0;
font-size:medium;
}
td.topographie_pieton
{
background:#a38e6d
}