body {
	font-family: Tahoma,Segoe,Arial;
	background-color: white;
	margin: 0px;
	
}

td {
	align: center;
}

/* Bandeau supérieur */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    display: flex;
    align-items: center;
    z-index: 1000;
    padding-top: 10px;
}

side-menu {
    position: fixed;
    top: 55px;
    left: 0;
    width: 200px;
    height: calc(100% - 55px);
    background-color: white;
    border-right: 3px solid red;
    padding-top: 10px;
    transition: transform 0.3s ease;
}
side-menu.collapsed {
    transform: translateX(-195px);
}

main {
    margin-top: 55px;
    margin-left: 200px;
    /* padding: 20px; */
    overflow-y: auto;
    transition: margin-left 0.3s ease;
}
main.expanded {
    margin-left: 5px;
}

h1, h2, h3  {
	margin-block-start: 0.5em;
    margin-block-end: 0.25em;
}
h1 {font-size: 1.5em;}
h2 {font-size: 1.3em;}
h3 {font-size: 1.15em;}

.header {
    background-color: white;
    border-bottom: 1px solid red;
    width: 100%;
}

.top-menu {
	list-style: none;
	display: inline-block;
	margin: 0px;
}
.top-menu.large {
	/* display: inline-block; */
}
.top-menu.small {
	display: none;
	/* padding-right: 5px; */
	padding-inline-start: 20px
}
.top-menu.minimal {
	display: none;
	/* padding-right: 5px; */
	padding-inline-start: 0px
}

.top-menu-button-group {
	float: right;
    margin: 10px;
}

.top-menu-toggle {
	padding-left: 10px;
	color: black;
	font-size: 18px;
}

.top-menu-logo {
	display: inline-block;
	height: 40px;
    /* padding-top: 10px; */
	padding-left: 10px;
	padding-right: 10px;
	vertical-align: middle;
}

.top-menu-item {
	color: black;
	font-size: 18px;
	text-decoration: none;
	display: inline-block;
	line-height: 20px;
    padding-top: 0px;
    padding-bottom: 10px;
	padding-right: 20px;
}
.top-menu-link {
	color: black;
	font-size: 18px;
	text-decoration: none;
	display: inline-block;
}
.menu-link {
	color: inherit;
	font-size: inherit;
	text-decoration: none;
	display: inline-block;
}

.top-menu-button {
	color: black;
	font-size: 18px;
	margin-left: 10px;
	float: right;
}

.top-menu-button-highlight {
	color: yellow;
	background-color: red;
	border: 2px solid yellow;
	border-radius: 12px;
	padding: 2px;
	margin-top: -3px;
}

.top-menu-user-info-large {
	display: inline-block;
}
.top-menu-user-info-small {
	display: none;
}

/* Menu déroulant */
#btn-menu {
	display:inline-block;
}
#drop-menu {
	display: block;^M
      position: sticky;^M
      left: 0px;^M
      z-index: 100;
	width: fit-content;
	border-right: 1.5px solid red;
}
.drop-menu {
	position : absolute;
	list-style: none;
	background-color: white;
	margin: 1px 5px;
	padding: 0px 5px 0px 5px;
	z-index: 200;
}
.drop-menu-item {
	margin: 2px;
}

/* Sous Menu */
.sub-menu {
	display: none;
    width: 100%;
	list-style: none;
	color: black;
	background-color: white;
	margin: 1px 10px;
	padding: 0px 5px 0px 5px;
	z-index: 200;
}
.sub-menu-item {
	color: black;
	font-size: 16px;
	text-decoration: none;
	line-height: 18px;
    padding-top: 0px;
    padding-bottom: 10px;
	padding-right: 10px;
}
.horizontal-menu {
	width: 95%;
}
.horizontal-menu li:first-child {
	border-left: 0px;
}
.horizontal-menu li {
	display: inline-block;
	border-left: 1px solid white;
	padding-left: 10px;
}
.vertical-menu {
	padding-left: 15px;
	margin: 5px 0px 0px -5px;
    	text-align: left;
	width: 98%;
}
.vertical-menu li {
	display: block;
}


/* Gestion du menu pour les mobiles (en mode paysage) */
@media screen and (max-width: 800px) {
	/* masque le menu horizontal */
	.top-menu.large {
		display:none;
	}
	.top-menu.small {
		display:inline-block;
	}
	.top-menu-item {
		padding-right: 10px;
	}
	.top-menu-user-info-large {
		display: none;
	}
	.top-menu-user-info-small {
		display: inline-block;
	}
}

/* Gestion du menu pour les mobiles (en mode portrait) */
@media screen and (max-width: 600px) {
	.top-menu.small {
		display:none;
	}
	.top-menu.minimal {
		display:inline-block;
	}
	.top-menu-item {
		padding-right: 10px;
	}
	side-menu.collapsed {
		display:none;
	}
	main.expanded {
		margin-left: 0px;
	}
}

/* Alerte info */
#alert_container {
	width: 98%;
    background-color: yellow;
    border: 1px solid black;
    margin: 5px auto;
    text-align: center;
}
#alert_title {
	font-weight: bold;
	animation-duration: 6s;
	animation-name: rollover;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}
@keyframes rollover {
	0% {transform: translateX(30%)}
	100% {transform: translateX(-30%)}
}


/* Corps de la page */
.main_container {
}

/* Bandeau date et navigation */
.nav_button {
	height: 20px;
}

.date_nav_container {
	display: block;
	z-index: 1;
	margin: 5px auto;
    max-width: 620px;
	/* border: 1px solid red; */
}
.date_nav_container table {
	border: 3px solid red;
}
.date_nav_container img {
	height: 24px;
}


.date_nav {
	/* display: inline-block; */
	font-size: 16px;
    font-weight: bold;
    text-align: center;
	background-color: white;
	margin: 10px auto;
    padding: 10px;
    width: 40px;
	max-height: 19px;
	border: 1px solid black;
	vertical-align: middle;
}

.date_of_quote {
    width: 100%;
	max-width: 444px;
	height: 100%;
	margin: 0 3px;
}

/* Gestion des listes */
.list_container h1 {
	font-size: 1.4em;
	margin: 10px 0;
}
.list_container {
	background-color: white;
	margin: 10px auto;
    padding: 10px;
    max-width: 600px;
	border: 1px solid black;
}
.list_navigator {
	background-color: white;
	margin: 5px auto;
    padding: 3px;
    max-width: 600px;
	/* border: 1px solid black; */
	text-align: center;
}

/* Bloc Citation */
.quote_container {
	background-color: white;
	margin: 10px auto;
	/* margin-right: 5vw; */
    padding: 10px;
    max-width: 600px;
	border: 1px solid black;
	border-radius: 10px;
	box-shadow: 5px 5px 5px darkgrey;
}
.quote_text {
	font-size: 18px;
	font-family: arial;
	line-height: 24px;
    text-align: center;
	padding: 20px 0;
}
.quote_note {
	display: inline;
	font-size: 14px;
	font-family: arial;
    text-align: left;
	padding: 10px 0;
}
.quote_author {
	padding: 10px 0;
	font-size: 18px;
	font-family: arial;
}
.quote_source {
	font-size: 14px;
	font-family: arial;
	font-style: italic;
	padding-top: 5px;
}
.quote_keywords_container {
	margin-right: 90px;	/* pour laisser de la place aux boutons flottants */
}
.quote_keywords {
	display: inline-block;
	font-size: 14px;
	font-family: arial;
	color: blue;
	background-color: white;
	border: 1px solid blue;
	border-radius: 10px;
	padding: 0 5px;
	margin-right: 5px;
}
.quote_keywords a {
	text-decoration: none;
}
.talk_summary {
	font-size: 16px;
	font-family: arial;
	/* line-height: 24px; */
    /* text-align: center; */
	padding: 10px 0;
}


/* Menu Listes */
.bookmark-menu {
	display:block;
	position: absolute;
}
.bookmark-menu ul {
	/* background-color: #dddddd; */
	list-style: none;
	margin: 1px 1px;
    padding: 2px 10px;
    /* border: 1px solid black; */
    width: fit-content;
}
.bookmark-menu li {
	height: 1.6em;
	margin-top: 5px;
	/* color:red; */
}
.bookmark-menu li:hover {
	background-color: #bbbbbb;
	/* color:green; */
}
    /* Commentaires  */
.comment_block_container {
	display: block;
	background-color: white;
	margin-top: -11px;
	margin-left: 5vw;
    padding: 3px;
    max-width: 600px;
	border: 1px solid black;
	border-radius: 0 0 10px 10px;
	box-shadow: 5px 5px 5px darkgrey;
}
.comment_nav {
    padding: 5px;
	/* border-bottom: 1px solid black; */
	text-align: center;
}

.comment_container {
	border-collapse: collapse;
	width: 99%
}
.comment_container tr {
	border-top: 1px solid black;
	text-align: left;
}
.comment_container_left {
    display: inline-block;
    position: relative;
	text-align: center;
	width: 70px;
	margin-top: 10px;
}
.comment_container_right {
	text-align: center;
	width: 50px;
}
.comment_avatar {
    margin-left: 0px;
	font-family: arial;
	font-weight: 300;
	padding: 10px;
    border-radius: 20px;
}
.comment_colorset0 {	color: white;	background-color: green;	}
.comment_colorset1 {	color: white;	background-color: blue;	}
.comment_colorset2 {	color: white;	background-color: red;	}
.comment_colorset3 {	color: white;	background-color: purple;	}
.comment_colorset4 {	color: white;	background-color: orange;	}
.comment_colorset5 {	color: white;	background-color: brown;	}
.comment_colorset6 {	color: white;	background-color: gray;	}
.comment_colorset7 {	color: white;	background-color: darksalmon;	}
.comment_colorset8 {	color: white;	background-color: cyan;	}

.comment_date {
	font-size: 14px;
	font-family: arial;
	/* font-style: italic; */
	/* padding-top: 5px; */
}
.comment_text {
	font-size: 15px;
	margin-left: 10px;
}
.comment_author {
	font-size: 14px;
	font-family: arial;
	font-style: italic;
	margin-left: 10px;
	/* padding-top: 5px; */
}
.comment_buttons {
    padding: 5px;
	text-align: center;
}

/* Plan d'étude VSM */
.plan_title {
	display: block;
	font-size: 16px;
    font-weight: bold;
    text-align: center;
	background-color: white;
	margin: 10px auto;
    padding: 10px;
    max-width: 600px;
	border: 1px solid black;
}
.plan_subtitle {
	/* font-size: 14px; */
    font-weight: bold;
}
.plan_item {
	display: block;
	background-color: white;
	margin: 10px auto;
    padding: 10px;
    max-width: 600px;
	border: 1px solid black;
	box-shadow: 5px 5px 5px darkgrey;
}
.plan_item_highlighted {
	background-color: beige;
	border: 2px solid black;
}

/* Propriétés des boutons */
.button-bar {
	height: 2.2em;
}
.button-bar a {
	text-decoration: none;
	color: black;
}
.floating-button {
	height: 1.1em;
    font-size: 110%;
    padding: 2px;
    margin-top: -20px;
    border: 1px solid black;
    border-radius: 3px 3px 3px 3px;
    float: right;
}
.floating-button-separator {
    padding: 2px;
    float: right;
}
.floating-top-right {
	height: 1.1em;
    font-size: 110%;
    padding: 2px;
    float: right;
}

.fb-stack {
	height: 1.1em;
    line-height: 1em;
    width: 1.2em;
	position: relative;
	padding: 2px;
}

.fb-stack-icon {
    font-size: 1.2em;
	margin-top: -1px;
	left: 2px;
	position:absolute;
}
.fb-stack-decoration {
	color:forestgreen; 
	margin-top: 3px;
    font-size: 0.6em;
	left:8px;
	position:absolute;	
}
.fb-stack-number {
	color:forestgreen; 
    font-size: 0.7em;
	left:10px;
	position:absolute;	
}

/* Image */
.filter_container {
	margin: 10px;
    max-width: 100%;
    border: 1px solid black;
    border-radius: 5px;
    padding: 5px;
	background-color: #fde0e0;
	position: sticky;
	top: 10px;
}
.filter_container .field_label {
	width: 100px;
}
.image_container {
	background-color: white;
	margin: 10px auto;
    max-width: 300px;
	border: 1px solid black;
}
.image_container img {
    max-width: 100%;
    height: auto;
}
.image_title {
	display: block;
	font-size: 16px;
    font-weight: bold;
    text-align: center;
	background-color: white;
	margin: 10px auto;
    padding: 10px;
    max-width: 600px;
	border: 1px solid black;
}
#image_title {
	margin-right: 30px;
}
.vignette_container {
	margin: 10px auto;
    max-width: 600px;
	/* border: 1px solid black; */
	text-align: center;
}
.vignette_container img {
	padding: 0 3% 0 0;
    max-width: 30%;
    height: auto;
}

.modele {
	display: none;
}

.hidden {
	display: none;
}


/* Bandeau intermédiaire */
.hsep {
	background-color: forestgreen;
	height: 5px;
}

/* Bandeau inférieur */
.fixedButton{
	position: fixed;
	bottom: 25px;
	right: 15px; 
	padding: 10px;
	height: 20px;
	line-height: 20px;  
	width: 20px;  
	font-size: 1.5em;
	font-weight: bold;
	border-radius: 50%;
	background-color: red;
	color: white;
	text-align: center;
	cursor: pointer;
}

#div_context_help {
	position: fixed;
	bottom: 25px;
	right: 60px; 
	margin: 10px;
    padding: 10px;
	background-color: whitesmoke;
	border: 1px solid black;
	box-shadow: 5px 5px 5px darkgrey;
}

.footer {
    position: absolute;
    bottom: 20px;
}
.footer-link {
	color: black;
	font-size: inherit;
	text-decoration: none;
	display: inline-block;
	padding: 0 0 0 20px;
}


.field_group {
	display: inline-block;
}
.field_separator {
	display: block;
}
.field_label {
	display: inline-block;
	vertical-align: top;
}
.field_value {
	display: inline-block;
}
.field_invalid_value {
	border: 1px solid red;
}

.fit-max-height {
	height: 99%
}
/* Style pour les fenêtres de gestion des utilisateurs */
.login-error-message {
	display: none;
	color: red;
	font-weight: 700;
}
/* surcharge des styles jQuery */
.ui-widget-header {
    border: 1px solid red;
    background: red;
	color: white;
}
.ui-widget.ui-widget-content {
    border: 1px solid red;
}
.ui-button {
	background-color: red;
	color: white;
	font-weight: 700;
	border-radius: 12px;
	
}