/* Define colors and other attributes */
:root {
    --iocd_blue: #0066cc;
    --iocd_gray: #d8d8d8;
    --iocd_green: #a7d7a7;
    --iocd_orange: #f2a205;
    --link_col: #3399ff;
    --text_col: #202020;
    --title_col: #483d8b;
}
/* General attributes (width, text, background) */
body {max-width: 1000px; margin: auto; padding-top: 0; font-family: calibri, arial, sans-serif; font-size: 15pt; color: var(--text_col); text-indent: 0; text-align: left; background-color: #FFFFFF;}
/* Reduce the body font size in case of small screen size */
@media (max-width: 800px) {
    body {font-size: 12pt;}
}
/* Margins for pre-formatted text */
pre {margin: 5px 0 0 0;}
/* Rulers */
hr {margin: 0 0 0 0; border: 0; height: 1px; background: #bbbbbb;}
hr.news {margin: 0 -1em 0 -1em; height: 1px; background: white;}
hr.separator {margin: 20px 10% 20px 10%; border: 0; height: 2px; background: var(--iocd_orange);}
/* Links */
a {text-decoration: none; }
a:link, a:visited, a:active {color: var(--link_col);}
/* Table elements */
th {vertical-align: top; color: #000000; font-weight: bold;}
tr {vertical-align: top;}
/* Definition list */
dl {margin-top: 0;}
dt {margin-top: 10px; color: #000000;}
/* Titles */
h1 {margin: 20px 0 15px 0; font-size: 160%; font-weight: bold; color: var(--title_col); text-align: left}
h2 {margin: 25px 0 7px 0; font-size: 135%; font-style: italic; color: var(--title_col); text-align: left}
h3 {margin: 10px 0 5px 0; font-size: 110%; font-weight: bold; color: var(--title_col); text-align: left;}
h4 {margin: 7px 0 5px 0; font-size: 100%; font-weight: bold; text-align: left;}
h5 {margin: 7px 0 0 0; font-size: 100%; font-weight: normal; text-align: left;}
/* Unordered lists */
ul {margin-bottom: 7px;}
ul.circle {list-style-type: circle; list-style-image: none; margin-top: 5px;}
ul.arrowhead {margin-bottom: 7px; list-style-image: none; list-style-type:'\27A4\0020';}
ul.blue {list-style-image: url(../Img/blueball.png); margin-top:0;}
ul.orange {list-style-image: url(../Img/orangeball.png); margin-top:0;}
/* Text alignement in paragraph */
p.left {text-align: left;}
p.right {text-align: right;}
p.center {text-align: center;}
p.justify {text-align: justify;}
p.indent {text-indent: 2.5em;}
p.retrait {padding: 0 0 0 2.5em; text-align: left;}
/* Larger and smaller characters */
spam.larger {font-size: 120%;}
spam.smaller {font-size: 90%;}
/* Decoration button */
button {background-color: #e7e7e7; border: 1px solid #999999; border-radius:0; color:#cc0000;}
/* Division style for the menu on the top of each page */
#top {margin: 0 0 0 0; padding: 0 0 0 0; font-size: 100%; text-indent: 0;}
.menu {text-align: right;}
.menu> li {display: inline-block; padding-left: 2em;}
.menu> li ul {list-style-type: '> '; list-style-position: inside; width: 6em; margin-left: -2.5em; padding: 12px 0 10px 0; display: none; position: absolute;}
.menu> li ul li {background: #FFFFFF;}
.menu> li:hover ul{display: block;}
/* Division style for the IOCD logo and name */
#iocd {margin: 0 0 0 0; padding: 0 0 0 0; font-size: 170%; font-weight: bold; text-align: left; text-indent: 0; display: flex; column-gap: 5px;}
/* Reduce the heading font size in case of small screen size */
@media (max-width: 900px) {
    #iocd {font-size: 135%;} 
}
/* Division style for the content of the documents (left justified or justified ) */
#normal {margin: 10px 5% 0 5%; text-align: left;}
#normal p {margin-top: 10px; margin-bottom: 0;}
#normal p+p {margin-top: 5px; margin-bottom: 5px;}
#normaljustify {margin: 10px 5% 0 5%; text-align: justify;}
#normaljustify p {margin-top: 10px; margin-bottom: 0;}
#normaljustify p+p {margin-top: 5px; margin-bottom: 5px;}
/* Division style for inserting a full-width box with colored background */
#fwbox {margin: 15px 5% 0 5%; padding: 2px 1em 2px 1em; background-color: var(--iocd_gray); color: #000000; text-align: justify;}
#fwbox h2 {margin: 7px 0 7px 0;}
/* Division style for inserting a figure and its caption without column */
#narrow {margin: 10px 15% 15px 15%; display: block; text-align: center;}
/* Division styles for multi-column format */
#normalrow {margin: 0 5% 0 5%; text-align: left; display: flex; flex-direction: row; justify-content: flex-start; column-gap: 1em;}
/* Align the flex items vertically in case of small screen size */
@media (max-width: 700px) {
    #normalrow{flex; flex-direction: column; row-gap: 5px;}
}
.column20 {flex: 20%;}
.column25 {flex: 25%;}
.column30 {flex: 30%;}
.column33 {flex: 33%;}
.column40 {flex: 40%;}
.column50 {flex: 50%;}
.column60 {flex: 60%;}
.column70 {flex: 70%;}
.column75 {flex: 75%;}
.column80 {flex: 80%;}
.announcement {flex: 60%; padding: 2px 1em 2px 1em; background-image: linear-gradient(var(--iocd_orange),var(--iocd_blue)); color:#ffffff;}
.news {flex: 40%; flex-grow: 0; padding: 2px 1em 2px 1em; background-color: var(--iocd_gray); color: #000000;}
.video {flex: 60%; padding: 2px 0 2px 0; text-align: left;}
.quicklinks {flex: 25%; padding: 5px 0.5em 5px 0.5em; background-color: var(--iocd_gray);}
.quicklinks a {color: #000000;}
.quicklinks p {margin: 5px 1em 5px 1em; padding-bottom: 8px; border-bottom: 1px solid white;}
/* Division style for the bibliography sections */
#references {margin: 15px 5% 0 5%; padding: 0 0 0 1em; text-align: left; font-size: 95%;}
#references ol {margin-top: 10px;}
#references hr {margin: 0 70% 0 0; border: 0; height: 2px; background: #000000;}
/* Division style for the perspectives page */
#perspectives {margin: 10px 5% 0 5%; text-align: justify;}
#perspectives p {margin-top: 2px; margin-bottom: 0;}
/* Division style for the publication page */
#publications {margin: 10px 5% 0 5%; text-align: left;}
#publications p {margin-top: 5px; margin-bottom: 0;}
.publications a {color: #707070;}
.publications ul {list-style-type: circle;}
.publications li {margin-bottom: 5px;}
/* Division style for the sitemap page */
#sitemap {margin: 10px 5% 0 5%; text-align: left;}
#sitemap a {color: var(--text_col);}
#sitemap ul {display: block; list-style-type: none; border-left: 2px solid; margin-left: 0.75em; padding-top: 5px;}
spam.parent {border-bottom: 2px solid;}
/* Division style for the footer of each page */
#bottom {margin: 15px 0 0 0; padding: 20px 0 20px 5%; text-align: left;  text-indent: 0; color: #000000; background-color: var(--iocd_green); display: flex; column-gap: 0;}
#bottom p {margin: 0 0 0 0;}
#bottom a {color: #585858;}