html {
margin: 0;
padding: 0;
background-color: #fdf7ef;
height: 100%;
}

body {
background: bottom right no-repeat;
min-height: 100%;
font-family: lucida, helvetica, sans-serif;
font-size: 1em;
color: black;
margin: 0em;
height: 100%;
display: flex;
flex-direction: column;
}

header {
display: flex;
background: rgb(125,176,233);
right: 0;
left: 0;
/* max-height: 2em; */
}

h1#title {
margin: 0px;
padding: 0px;
padding-top: 0.2em;
padding-bottom: 0.2em;
padding-left: .4em;
border: none;
color: white;
font-weight: bold;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.8);
box-shadow: none;
font-size: 1.3em;
letter-spacing: 0.04em;
white-space: nowrap;
text-overflow: ellipsis "..";
overflow: hidden;
flex-grow: 100;
flex-shrink: 1;
align-items:  center;
}
@media all and (display-mode: fullscreen) {
    div#title, div#login, div.navbar { display: none; visibility: hidden; }
    body { background-color: white; }
}
div.topToolbar {
padding: 0.2em;
padding-left: 0.5em;
padding-right: 0.5em;
vertical-align: center;
font-size: 1.2em;
}
div.topToolbar > a {
color: #000000;
text-decoration: none;
}
span#notification {
display: none;
background-color: red;
color: white;
font-weight: bold;
margin-right: 0.5em;
border-radius: .3em;
padding-left: .3em;
padding-right: .3em;
margin-left: 0.3em;
margin-right: 0.5em;
}
div.navbar {
padding: 0;
align-items: center;
flex-grow: 10;
max-width: 10em;
}
div.navbar a {
padding: 0;
padding-left: .2em;
}
div.navbar a img {
margin: 0;
margin-bottom: -.3em;
}

nav {
text-align: left;
background-color: #D6E9FF;
margin-left: 0em;
margin-right: 0em;
margin-top: 0em;
margin-bottom: 2em;
padding: 0;
padding-left: 5%;
padding-right: 5%;
}
nav > a {
display: inline-block;
text-decoration: none;
color: rgb(95,136,203);
margin-right: .2em;
margin-bottom: -0.3em;
margin-top: -1px;
padding-left: 1em;
padding-right: 1em;
padding-top: .2em;
padding-bottom: .2em;
background-color: #F0F0F0;
border-bottom-left-radius: .6em;
border-bottom-right-radius: .6em;
border: 1px solid rgb(95,136,203,.5);
box-shadow: 3px 3px 3px 0px rgba(0,0,0,.1);
}
nav > a.current {
    text-decoration: underline #F8A310 .1em;
}

footer {
bottom: 0;
margin: 0em;
margin-top: 1em;
padding: .3em;
padding-right: 1em;
color: rgb(95,136,203);
font-size: 80%;
text-align: right;
clear: both;
background-repeat: x-repeat;
background-position: bottom;
background-color: #f7f1e9;
}
footer > a {
color: rgb(95,136,203);
}

div.navbar > a {
color: #000000;
text-decoration: none;
vertical-align: top;
padding-right: 3px;
}

div.highlight {
margin: 0em;
margin-bottom: 2em;
margin-top: 2em;
padding: 0.5em;
border: 1px solid grey;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 15px;
-moz-border-radius: 5px;
-webkit-border-top: 5px;
-moz-border-radius-topright: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;
}

div.important {
margin: 0em;
padding: 0.2em;
border: 1px solid #D0A0A0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-top: 5px;
background-color: #EFDFDF;
color: #AF4040;
}

div.element {
background-color: rgba(240, 240, 240, .95); 
border-radius: .4em; 
padding: .2em;
margin-bottom: .5em;
margin-top: .5em;
}

a.topnavbar {
color: black;
text-decoration: none;
}

div#login {
position: absolute;
top: 0em;
right: 0em;
}

div.topnavbar {
position: absolute;
top: 1em;
right: 0.5em;
vertical-align: top;
padding: 2px;
}

div.topnavicons {
position: absolute;
top: 0px;
left: 0px;
vertical-align: top;
padding: 2px;
}

img.topnavicons {
border: none;
vertical-align: top;
padding: 0em;
margin: 0em;
}

section {
margin-top: 1em;
margin-left: 10%;
margin-right: 30%;
margin-bottom: 0em;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 2em;
padding-right: 5em;
border-radius: .5em;
background-color: white;
}

section.large {
margin-left: 2em;
margin-right: 2em;
}

p {
text-align: justify;
}

p.intro {
color: #60606F;
}

.error {
background-color: #FFE0E0;
border: 1px solid #C0A0A0;
padding: 0.3em;
padding-left: 1em;
padding-right: 1em;
margin-bottom: .5em;
border-radius: .3em;
}

.success {
background-color: #E0FFE0;
border: 1px solid #A0C0A0;
padding: 0.3em;
padding-left: 1em;
padding-right: 1em;
margin-bottom: .5em;
border-radius: .3em;
}

.warning {
background-color: #FFFFE0;
border: 1px solid #A0C0A0;
padding: 0.3em;
padding-left: 1em;
padding-right: 1em;
margin-bottom: .5em;
border-radius: .3em;
}

img {
border: none;
margin: 0em;
}

img.illustration {
float: right;
clear: right;
background-color: white;
padding: 10px;
margin: 0.5em;
margin-left: 2em;
margin-right: -30%;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border: 1px solid #E8E8E8;
}

h1 {
color: rgb(95,136,203);
font-size: 140%;
border-bottom: .1em solid rgb(95,136,203);
box-shadow: inset white 0 0 .1em;
padding-left: 0.1em;
padding-top: 0.1em;
padding-bottom: 0.1em;
clear: both;
}

h2 {
color: rgb(95,136,203);
font-size: 140%;
border-bottom: .1em solid rgb(95,136,203);
box-shadow: inset white 0 0 .1em;
padding-left: 0.1em;
padding-top: 0.1em;
padding-bottom: 0.1em;
clear: both;
}

h3 {
color: #AF4000;
font-size: 120%;
border-left: 3px solid #DF6000;
padding-left: 0.6em;
padding-top: 0.1em;
padding-bottom: 0.1em;
margin-left: 6%;
margin-right: 1.4em;
background-color: #FFE0D0;
clear: both;
border-bottom-right-radius: .5em;
border-top-right-radius: .5em;
}

input {
background-color: #F5F5F5;
border: 1px solid #606060;
color: #000070;
padding: 0.1em;
margin-top: 0.2em;
margin-bottom: 0.2em;
}
input.valid {
background-color: #BFFFBF;
}
input.invalid, input:invalid {
background-color: #FFBFBF;
}
input.autocorrected {
background-color: #A0A0FF;
}
input[type="text"]:disabled {
color: #B6B6B6;
border: 1px solid #B6B6B6;
cursor: not-allowed;
}

span.error {
color: #AF0000;
}

a.footer {
color: #909090;
}

a.button {
border: 1px solid grey;
padding: .3em;
padding-left: .5em;
padding-right: .5em;
border-radius: .3em;
margin: .3em;
text-decoration: none;
color: #FFFFFF;
background-color: rgb(95,136,203);
}

li {
margin-bottom: 0.4em;
}

ul {
list-style-image: url('puce.gif');
}

var {
font-family: serif;
color: darkgreen;
}

mark {
border-radius: .3em;
padding-left: .1em;
padding-right: .1em;
}

table {
border-collapse: collapse;
margin-top: 0.5em;
}

table:has(caption) {
min-width: calc(min(80%, 30em));
}


table > caption {
background-color: #F6FBFF;
text-align: center;
padding-left: 1em;
padding-right: 1em;
border-top-right-radius: .5em;
border-top-left-radius: .5em;
border-top: 1px solid #D0D0D0;
border-right: 1px solid #D0D0D0;
border-left: 1px solid #D0D0D0;
border-bottom: none;
margin-right: 1em;
margin-left: 1em;
}

thead {
background-color: #2D539B;
color: white;
}
th {
padding-left: .3em;
padding-right: .3em;
border: 1px solid #A0A0A0;
font-weight: bold;
}

td {
border: 1px solid #A0A0A0;
padding: 0.1em;
padding-left: 0.4em;
padding-right: 0.4em;
vertical-align: top;
text-align: left;
}

tbody > tr:nth-child(even) {
background-color: #ecf7f4;
}

tbody > tr:nth-child(odd) {
background-color: #f7f6ee;
}

tfoot {
background-color: #CED9D0;
}

table.noborder {
box-shadow: none;
}

table.noborder > tbody > tr > td {
border: none;
background-color: #FFFFFF;
}

td.nobJust {
border: none;
text-align: justify;
padding-bottom: 0.5em;
}

td.noborder {
border: none;
}

div.encadre {
float: right;
right: 0em;
/*clear: right;*/
/*min-width: 10%;
max-width: 25%;*/
width: 100%;
margin-right: 0.4em;
margin-left: 4em;
margin-bottom: 1em;
margin-top: 1em;
padding: 0.5em;
text-align: left;
border: 1px solid grey;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-top: 5px;
-moz-border-radius-topright: 15px;
-webkit-border-bottom-top-right: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;
background-color: #f5f5f5;
background-position: bottom center;
background-repeat: no-repeat;
}

div.encadreTitle {
background-color: #BFCFFF;
margin-bottom: 0.5em;
margin-top: -0.5em;
margin-right: -0.5em;
margin-left: -0.5em;
padding: 0.3em;
padding-top: 0.1em;
padding-bottom: 0.1em;
text-align: center;
border: none;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left: 5px;
-moz-border-radius-topright: 15px;
-webkit-border-bottom-top-right: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-bottom-left-radius: 15px;
}

fieldset {
background-color: #EFEFEF;
border: 1px solid #C0C0C0;
border-radius: 10px;
-moz-border-radius: 10px;
margin-top: 1em;
margin-bottom: 1em;
}

legend {
background-color: #FFFFFF;
-moz-border-radius: 5px;
border: 1px solid #E0E0E0;
color: green;
padding-left: 1em;
padding-right: 2em;
}

menu, div.actionBar {
background-color: #CFCFFF;
border: 1px solid #C0C0C0;
border-radius: 10px;
-moz-border-radius: 10px;
margin-top: 1em;
margin-bottom: 1em;
padding: 0.4em;
padding-left: 5%;
padding-right: 5%;
text-align: left;
}

a.iconhelp {
text-decoration: none;
color: green;
font-size: 100%;
font-weight: bold;
}

blockquote {
font-family: Georgia, serif;
font-style: italic;
color: #202020;
}
blockquote:first-of-type::before {
position: relative;
bottom: .2em;
margin-right: .1em;
font-size: 150%;
content: "«";
color: rgb(95,136,203);
}
blockquote:last-of-type::after {
position: relative;
bottom: -.2em;
margin-left: .1em;
font-size: 150%;
content: '»';
color: rgb(95,136,203);
}
aside {
float: right;
border-left: .4em solid rgb(95,136,203);
right: 0em;
clear: right;
min-width: 20%;
max-width: 15em;
margin-right: 0.4em;
margin-left: 3em;
margin-bottom: 1em;
margin-top: 1Lem;
padding: 0em;
padding-left: 1em;
text-align: left;
}
kbd {
display: inline-block;
text-align: center;
background-color: #F0F0F0;
border: 1px solid #303030;
border-radius: .3em;
padding: .2em;
min-width: 1.2em;
padding-left: .4em;
padding-right: .4em;
}

/* Activity stream */

div.activityStream {
display: flex;
flex-direction: row-reverse;
align-content: space-between;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
}
div.activityStreamCol {
display: flex;
flex-direction: column;
align-items: stretch;
margin: .5em;
max-width: 40em;
width: 100%;
}
div.activityPost {
max-width: 40em;
margin: 0em;
min-height: 4em;
border-radius: 5px;
border: 1px solid #E0E0E0;
margin-top: 0.5em;
margin-bottom: 0.5em;
padding: 0.25em;
box-shadow: .2em .2em .3em #E7E7E7;
background-color: #FFFFFF;
background: linear-gradient(to top, rgba(255,255,255,1) 80%,rgba(249,249,249,1) 100%);
position: relative;
}
div.activityPostWithAvatar {
}
img.activityAvatar {
max-width: 1.5em;
max-height: 1.5em;
border-radius: 50%;
border: 1px solid #B0B0B0;
background-color: white;
float: left;
margin-right: -.3em;
margin-bottom: -.3em;
z-index: 10;
position: relative;
left: 0em;
top: 0em;
}
div.activityPostTitle {
font-weight: bold;
font-size: 105%;
margin-left: 1.8em;
min-height: 1.3em;
margin-top: -0.3em;
}
div.activityToolbar {
float: right;
}
div.activityInfobar {
font-size: 80%;
line-height: 0.8em;
margin-left: 2.5em;
margin-top: .1em;
}
div.activityContent {
padding: 0.4em;
margin-top: 0.4em;
background-color: rgba(255,255,255,.87);
}
div.activityContent > p {
margin: .2em;
}
div.activityPostSticky {
/*float: right;
clear: right;*/
}
.activityCornerLink {
position: absolute;
right: 0em;
bottom: 0em;
color: grey;
text-decoration: none; 
background-color: #E7E7E7;
padding-right: .6em;
padding-left: .3em;
padding-bottom: .1em;
border-top-left-radius: .3em;
}
.activityCornerLink:before {
content: " ▶ ";
}

a.imgbutton {
text-decoration: none;
color: black;
border: 1px solid #E0E0E0;
margin: .4em;
text-align: center;
border-radius: .5em;
font-size: 80%;
overflow: hidden;
max-width: 50%;
}
a.imgbutton > img {
width: 10em;
height: 6.8em;
}

div.imgband {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
overflow: hidden;
max-height: 9em;
background-color: #303030;
}
div.imgband > img {
border: none;
margin: 0;
padding: 0;
margin-left: -1.4%;
margin-right: -1.4%;
width: 40%;
clip-path: polygon(100% 0%,90% 100%,0% 100%,10% 0);
flex-grow: 0;
flex-shrink: 0;
}
div.imgband > img:first-of-type {
clip-path: polygon(100% 0%,90% 100%,0 100%,0 0);
margin-left: 0;
}
div.imgband > img:last-of-type {
clip-path: polygon(100% 0,100% 100%,0 100%,10% 0);
margin-right: 0
}

figure {
    border: 1px solid #E0E0E0;
    border-radius: 1em;
    background-color: white;
    margin: 0;
    max-width: 100%;
    margin-bottom: 1em;
    margin-top: 1em;
    overflow: hidden;
    text-align: center;
}
figure > img {
    max-width: 100%;
}
figure > figcaption {
    font-size: 80%;
}

div.form > div > * {
    flex-grow: 0;
    flex-shrink: 0;
}
div.form > div > label {
    text-align: left;
    margin-right: 1em;
    font-style: italic;
    color: #202020;
    vertical-align: top;
    min-width: 8em;
}
div.form > div  {
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
    vertical-align: top;
    padding-bottom: .3em;
}

@media screen and (min-device-width: 800px) {
    figure.right {
        float: right;
        position: relative;
        right: -40%;
        max-width: 50%;
        margin-left: -35%;
    }
    aside {
        float: right;
        position: relative;
        right: -40%;
        margin-left: -35%;
        font-size: 110%;
    }
}

@media screen and (max-device-width: 800px) {
    div#title {
        padding-left: 1em;
    }
    div#mainPart {
        padding-right: .3em;
        padding-left: .3em;
    }
    div#main {
        margin-left: 0.3em;
        margin-right: 0.3em;
        padding-right: 0em;
    }
    p {
        text-align: left;
    }
    section, section.large {
        margin-left: 0em;
        margin-right: 0em;
        padding-right: .3em;
        padding-left: .3em;
    }
}

@media handheld {
	p.footer {
		margin-right: 1em;	
	}
}

@media print {
	body {
		font-size: 11pt;
		margin: 0em;
		line-height: 1em;
	}
	div#title {
		margin-bottom: 2em;
		text-align: center;
		border: none;
	}
	div.encadre {
		margin: 1em;
		margin-right: 0em;
		border: 1pt solid #707070;
		padding: 0.3em;
		clear: right;
		background-color: #efefef;
	}
	div#main {
		margin: 1em;
		padding: 0em;
	}
	p {
		line-height: 1em;
	}
	h1 {
		margin: 0em;
		margin-top: 1.2em;
		margin-bottom: 0.8em;
		border: 1pt solid #707070;
	}
}

ul.menuButton {
    display: none;
    position: absolute;
}


ul.ariane {
    display: inline-block;
    background-color: white;
    margin: .5em;
    margin-left: 2em;
    margin-right: auto;
    padding: 0;
    padding-left: .5em;
    padding-right: .5em;
    border-radius: 1em;
}
ul.ariane > li::before {
    content: ">> ";
    color: grey;
    margin-left: .3em;
    margin-right: .3em;
}
ul.ariane > li {
    display: inline-block;
    padding: 0;
    padding-left: .3em;
}
ul.ariane > li > a {
    text-decoration: none;
}

.sub_galleries {
    /* Used for displaying a list of galleries */
    display: grid; 
    grid-gap: 1em; 
    grid-template-columns: repeat(auto-fill, minmax(min(20em,100vw), 1fr)); 
    justify-items: center; 
    align-items: center;
}
.sub_galleries > * {
    display: block; 
    text-decoration: none; 
    color: black; 
    max-width: 25em; 
    border: 1px #C0C0C0 solid; 
    border-radius: .4em; 
    padding: .5em; 
}
.sub_galleries > a {
    color: rgb(95,136,203);
}

.autofixed {
    animation: .5s linear flash_fixed;
}
@keyframes flash_fixed { from { background-color: rgb(125,176,233);} to { background-color: inherit;}  }

.avatar {
margin: 0em;
padding: .1em;
height: 1.2em;
min-height: 1.2em;
min-width: 1.2em;
aspect-ratio: 1/1; 
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: text-top;
background-color: #279cc1;
background-position: center center;
background-size: cover;
color: #FFFFFF;
border-radius: 50%;
border: 0px solid #269cc1;
overflow: clip;
text-align: center;
font-weight: bold;
text-decoration: none;
font-variant: normal;
text-transform: uppercase;
white-space: nowrap;
line-height: 1em;
word-break keep-all;
}

.inline-user {
display: inline;
text-decoration: underline;
text-decoration-color: #279cc1;
text-decoration-thickness: .1em;;
margin-right: .3em;
border-radius: .5lh;
background-color: #E2EFF2A1;
padding-right: .3lh;
}

dialog:modal {
border: 0px solid #279cc1;
border-radius: .3em;
width: 30em;
max-width: 96vw;
min-height: 5em;
max-height: 96vh;
box-shadow: .6em .6em .6em 0px rgba(0,0,0,.2);
overflow: scroll;

}
dialog::backdrop {
background-color: rgba(0,0,0,.2);
box-shadow: none;
backdrop-filter: blur(5px);
}
dialog h2 {
font-size: 1em;
background: none;
border: none;
border-bottom: #279cc1 1px solid;
border-radius: 0;
color: #279cc1;
font-weight: bold;
margin: 0;
padding: 0;
margin-bottom: 1em;
}
div.color {
display: inline-block;
border: 1px solid black;
height: 1.2em;
min-height: .5em;
min-width: 2em;
vertical-align: baseline;
}