html {background: #005A9C; padding: 1em}
body {background: white; color: #333; border-radius: 0.6em; padding: 1em 3em;
      font: 1.1em/1.3 Helvetica, Arial, Verdana, sans-serif; margin: 0 auto;
      max-width: 65em; hyphens: none;}
h1 {color: #005A9C}
h3 {color: #005A9C}
.graphic {margin: 0}
.graphic img {width: 100%; display: block}
/* Or for a graphic that is stretched/squeezed:
        (If you rather clip than squeeze the image, remove 'height: 100%'
      .graphic {height: 13em; position: relative; overflow: hidden; margin: 0 -1.5em}
      .graphic img {width: 100%; position: absolute; bottom: 0; left: 0; height: 100%}
/**/
.box {float: right; border: 1px solid #CCC; border-radius: 0.6em; color: #666;
      box-shadow: 0.2em 0.4em 0.5em #888; padding: 0.3em; text-align: center;
      background: white;
      font-size: smaller; margin: 0 0 1em 0.6em; width: 19em; clear: right}
.box h2 {font-size: 120%}
footer {clear: both; margin: 1em 0; font-size: smaller; color: #555}
.menu {margin: 0 0 2em 0; display: table; table-layout: fixed; width: 100%;
       border-collapse: collapse; background:#005A9C; border-left: hidden;
       color: #eee; border-right: hidden;
       font-size: smaller; font-weight: bold}
.menu li {display: table-cell; border: 1px solid white;
          padding: 0.3em 0.2em; text-align:center; vertical-align: middle}
.menu a {display: block; color: inherit; text-decoration: none}
.menu a:hover {background:#a2b3a1; color: black}
ul {margin-left: 0; padding-left: 1em; list-style: square}
blockquote {margin-left: 1em}
dd {margin: 0 0 0.6em 0}
dt {font-weight: bold}
img {max-width: 100%}
h1, h2, h3, h4 {break-after: avoid}
h2 {clear: left}
.icon {height: 1em; vertical-align: middle}
.hide {display: none}
address {display: table; width: 100%; background: #EEE; border-radius: 0.3em;
  table-layout: fixed}
address img {border-radius: 0.3em}
address p {width: 66%; padding-left: 2em; font-style: normal}
address p, address img {display: table-cell; vertical-align: middle}
.illustration {float: left; clear: left; margin: 0.5em 1em 0.5em 0;
  max-width: 30%}

@media all and (max-width: 40em) {

    /* The right-floating boxes become normal blocks */
    body {padding: 1em}
    .graphic {height: 10em; margin: 0}
    .box {float: none; width: auto}

    /* The horizontal menu becomes vertical */
    .menu ul {display: block; margin: 0; padding: 0}
    .menu li {display: block; border-style: none none solid none}

}

ul#people-list {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}

ul#people-list li:before { 
    content: "";
    background-color: gray;
    border-color: gray;
    border-style: solid;
    /*border-width: 0.1em;*/
    border-radius: 100%;
    display: block;
    height: 0.5px;
    width: 0.5px;
    left: -1em;
    top: 0.8em;
    position: relative;
}

ul#people-list li.participant:before { 
    content: "";
    background-color: #FFF;
    border-color: transparent blue;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    border-radius: 0;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}




@page {margin: 2cm 2cm}

@media print {

    html {background: none; padding: 0}
    body {background: none; border-radius: 0; padding: 0}

}

a {
    color: #005A9C;
}


/* initialize footnote counters */
body {
    counter-reset: footnote_counter footnote-ref_counter;
}

h2.footnote {
    counter-increment: footnote_counter;
}

a.footnote-ref {
    counter-increment: footnote-ref_counter;
    text-decoration: none;
}

h2.footnote:before {
    content: counter(footnote_counter);
    font-size: 0.9em;
    margin-left: -3em;
    margin-right: 1em;
}

a.footnote-ref:after {
    content: counter(footnote-ref_counter);
    vertical-align: super;
    font-size: 0.6em;
    margin-left: 0.25em;
}

h2.footnote:before, a.footnote-ref:after {
    padding: 0.1em 0.5em 0.1em 0.5em;
    border-radius: 1em;
    color: white;
    background-color: #005A9C;
    font-weight: bold;
}

table {
    border-collapse: collapse;
}
th, td {
    padding: 0.2em 0.4em;
    vertical-align: baseline;
}
th {
    white-space: nowrap;
    color: white;
    background-color: #005A9C;
}
td {
    border-top: thin solid #005A9C;
}

table.schedule  {
    border-collapse: separate;
    border-spacing: 0 0.3em;
}
table.schedule thead {
    display: none;
}
table.schedule th, table.schedule td {
    border: thin solid #005A9C;
}
table.schedule th {
    border-radius: 0.3em 0 0 0.3em;
}
table.schedule th[colspan] {
    border-radius: 0.3em;
}
table.schedule td {
    border-radius: 0 0.3em 0.3em 0;
}

article.sponsors {
    border: 1px solid #333; 
    padding: 0.1em; 
}

#notification {
    border: 1px solid #CCC; 
    border-radius: 0.6em; 
    color: #666;
    background-color: yellow;
    box-shadow: 0.2em 0.4em 0.5em #888; 
    padding: 0.3em; 
    text-align: center;
    font-size: smaller; 
    margin: 0 0 1em 0em; 
    font-weight: bold;
}

.concluded {
    text-decoration: line-through;
}

.position {
    font-weight: bold;
}

@media print {
    h1 {
	color: #000;
	background: none;
    }

    nav, aside {
	display: none;
    }

    body, article {
	width: 100%;
	margin: 0;
	padding: 0;
    }

    @page {
	margin: 2cm;
    }
    
    h2, h3 {
	page-break-after: avoid;
    }
    
    article {
	page-break-before: always;
    }
    
    ul, img {
	page-break-inside: avoid;
    }
    
    aside#dates {
	display: none;
    }
}