/* Seitenaufbau aus Kopf, Navigationsbalken mit Navigations und Downloadleiste,
   Textbereich und Fußleiste */

/* hellgrauer Seitenhintergrund */
body {
    font-family: Arial, Helvetica, sans-serife;
    font-size: 16px;
    min-width: 520px;
    background-color: #e4e6f0;
}

/* Kopf bestehend aus drei dunklen Bildern mit linksbündigem weißem Text */
header {
    height: 6em;
    margin: 8px 32px 0px 16px;
    background-image: url("pics/Tastatur.jpg"),
    		      url("pics/Code-Tangling-dark.jpg"),
		      url("pics/aclogo-engraved.png");
    background-size: auto 6em, auto 6em, 6em 3em;
    background-position: left top, right top, center top;
    background-repeat: no-repeat, no-repeat, repeat;
    -webkit-border-radius: 16px 16px 0 0;
    -moz-border-radius: 16px 16px 0 0;
    border-radius: 16px 16px 0 0;

}
header h1 {
    color: white;
    text-align: left;
    min-height: 0;
    padding: 8px 0 0 8px;
}
header h2 {
    color: white;
    text-align: left;
    font-size: 100%;
    padding: 0 0 0 8px;
}

/* Navigationsbalken: nimmt den ganzen linken Rand ein,
   ist absolut positioniert und somit für die übrigen Elemente unsichtbar. */
nav {
    position: absolute;
    width: 200px;
}
/* navframe: gehört durch die weiße Unterlegung optisch zum Textbereich,
   enthält die navlist mit den Navigationslinks */
div.navframe {
    margin: 0;
    padding: 0.5em 1em;
    line-height: 150%;
    text-align: center;
    -webkit-border-radius: 0 16px 0 16px;
    -moz-border-radius: 0 16px 0 16px;
    border-radius: 16px 0 0 16px;
    background-color: white;
}
ul.navlist {
    list-style: none;
    margin: 8px 0px;
    padding: 0;
    font-size: 120%;
    font-weight: bold;
}
ul.navlist li {
    border-bottom: none;
}
ul.navlist li a {
    display: block;
    width: 100%;
    color: black;
}
ul.navlist li a:hover {
    color: black;
    background-color: #fe0202;
}
ul.navlist li:first-child a:hover {
    color: black;
    background-color: #fe0202;
    border-radius: 8px 8px 0 0;
}
ul.navlist li:last-child a:hover {
    color: black;
    background-color: #fe0202;
    border-radius: 0 0 8px 8px;
}
ul.navlist li.selected a {
    color: #fe0202;
}
ul.navlist li.selected a:hover {
    color: #fe0202;
    background-color: #e4e6f0;
}

/* weißer Hintergrund vor dem dunkelgrauen linkframe:
   sorgt für die Rundung beim Übergang vom navframe zum mainframe */
div.whitebox {
    background-color: white;
    margin: 0 0 0 16px;
}

/* linkframe: durch die dunkelgraue Unterlegung optisch Teil des Hintergrundes,
   inhaltlich Teil des Navigationsbalkens. Enthält die Download Links und
   die Links zu den Sponsoren */
div.linkframe {
    margin: 0;
    line-height: 100%;
    text-align: left;
    border-bottom: 0;
    padding: 1em 0;
    background-color: #55565a;
    border-radius: 0 16px 0 0;
}
ul.download {
    list-style: none;
    line-height: 100%;
    text-align: left;
    border-bottom: 0;
    margin: 0 16px 8px 16px;
    padding: 0.5em 0;
}
ul.download li.title {
    font-weight: bold;
    border-bottom: 1px solid #e4e6f0;
    padding-bottom: 0.5em;
    margin-bottom: 8px;
}
ul.download li {
    font-size: 80%;
    border-bottom: 0;
    padding: 0 1em;
}
div.sponsors {
   color: #e4e6f0;
   font-size: 60%;
   margin: 16px 16px;
}
div.sponsors a {
   display: block;
   font-size: 140%;
   margin: 16px 0;
   background-color: #55565a;
   color: #e4e6f0;
}
div.sponsors a img {
   max-height: 48px;
   max-width: 100%;
   vertical-align: middle;
}


/* dunkelgraue Box unterhalb des mainframes, optisch mit dem header und
   dem linkframe verbunden, enthält den footer */
div.bgbox {
    background-color: #55565a;
    margin: 0 32px 8px 16px;
    border-radius: 0 16px 16px 16px;
}
footer {
    float: none;
    clear: both;
    max-width: 100%;
    height: 1em;
    padding: 4px 16px 4px 16px;
    text-align: right;
    font-size: 80%;
    color: #e4e6f0;
}

/* mainframe: enthält den eigentlichen Seiteninhalt. Weiß unterlegt und
   damit optisch mit dem navframe verbunden */
div.mainframe {
    position: relative;
    left: 32px;
    margin: 0 0 0 152px;
    padding: 1em;
    min-height: 44em;
    background-color: #ffffff;
    border-radius: 0 16px 16px 16px;
}


/*----------------------------------------------------------*/

/****** Allgemeine Stilangaben ******/
a:link, a:visited {
    text-decoration: none;
    color: #fe0202;
}
a:hover {
    color: black;
    background-color: #fe0202;
}
h1, h2, h3, h4, h5 {
    clear: both;
}
h1 {
    color: #fe0202;
    font-size: 240%;
    text-align: center;
    margin: 0 auto 0 auto;
    padding: 0.5em;
    min-height: 50px;
}
h2, h3, h4, h5 {
    color: black;
}
h2 {
    font-size: 140%;
}
p {
    text-align: justify;
    float: inherit;
}
pre, code {
    font-size: 90%;
}
pre {
    margin: 0 24px;
    padding: 0.5em;
    border: 1px solid #e4e6f0;
}
ul {
    list-style-position: inside;
}


/****** Spezielle Stilelemente für spezielle Aufgaben ******/
div.faq pre {
    background-color: white;
    font-size: 70%;
    margin: 0 24px;
    padding: 0.5em;
}


/* <dl class="calendar"> Liste mit Kalendereinträgen
*/
dl.calendar {
    margin: 0.5em 0;
    line-height: 120%;
    font-size: 80%;
}
/* float-Modus deaktivieren */
dl.calendar::after {
    content: "";
    clear: both;
    display: table;
}
dl.calendar dt {
    display: block;
    float: left;
    clear: left;
    margin: 0;
    padding: 0;
    font-weight: bold;
}
dl.calendar dd {
    display: block;
    float: left;
    margin: 0 1em;
    padding: 0;
}


/* <dl class="team"> Liste der Teammitglieder mit Name und Adresse
*/
dl.team {
    margin: 0.5em 0;
    line-height: 120%;
    margin: 0 0 16px 0;
}
/* float-Modus deaktivieren */
dl.team::after {
    content: "";
    clear: both;
    display: table;
}
dl.team dt {
    display: block;
    float: left;
    clear: left;
    margin: 0;
    padding: 0;
    font-weight: bold;
    width: 11em;
}
dl.team dd {
    display: block;
    float: left;
    margin: 0 1em;
    padding: 0;
    width: 18em;
}


/* <table> Allgemeine Tabelle: grau unterlegt, abgerundete Ecken
   und nur eine horizontale Linie als Abtrennung des Kopfes vom Rumpf
*/
table {
    border-collapse: collapse;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 0.5em;
    background-color: #e4e6f0;
    float: inherit;
}
th {
    font-weight: bold;
    border-bottom: 2px solid white;
    padding: 0.25em;
    text-align: left;
}
td {
    padding: 0.25em;
}

/* <table class="cells"> Spezielle Tabelle mit Rändern um alle Zellen */
table.cells th,
table.cells td {
    border: 1px solid white;
    padding: 4px 8px;
}
table.cells th {
    border-bottom-width: 3px;
}


/* <ol class="faq"> geordnete Liste der FAQs
   Links werden schwarz und kursiv dargestellt. */
ol.faq {
    line-height: 140%;
}
ol.faq li a {
    color: black;
    font-style: Italic;
}

/* <div class="faq"> eine FAQ mit Frage und Antwort
   War diese FAQ ein Sprungziel, wird sie grau unterlegt und
   deutlich umrandet, ansonsten wird sie blasser, aber noch gut
   lesbar dargestellt. */
div.faq h2,
div.faq h2 a
{
    color: #55565a;
    font-style: Italic;
}
div.faq {
    color: #55565a;
    margin: 8px 16px;
    padding: 8px 16px;
    border: 3px solid #e4e6f0;
    border-radius: 8px;
    background-color: white;
    font-size: 90%;
}
div.faq pre {
    background-color: white;
    font-size: 70%;
    margin: 0 24px;
    padding: 0.5em;
}
div.faq:target,
div.faq:target h2 {
    color: black;
    background-color: #e4e6f0;
    border-color: black;
}
div.faq:target pre {
    background-color: white;
}

/* <ul class="flags"> Publikationsliste
   Jedem Listeneintrag wird ein Flaggensymbol vorangestellt,
   default ist English.
 */

ul.flags {
    list-style: url("pics/flag_en.gif");
}
ul.flags li.English {
    list-style-image: url("pics/flag_en.gif");
}
ul.flags li.French {
    list-style-image: url("pics/flag_fr.gif");
}
ul.flags li.Polish {
    list-style-image: url("pics/flag_pl.gif");
}

.columns {
    float: left;
}

.small {
      max-width: 15em;
}

.note {
    float: inherit;
    border: 1px solid black;
    border-radius: 8px;
    margin: 8px;
    padding: 0.5em;
}


img.right {
    float: right;
    margin-left: 8px;
}

.clear {
    clear: both;
}


.box {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #e4e6f0;
    padding: 1em;
    margin-right: 16px;
}