/* This is the default stylesheet of the homepage of seiteneingang.org */

/* Colors and sizes */
:root {
  --light-grey: #e2e2e2;
  --dark-grey: #373737;
  --seiteneingang-org-blue: #21759b;

  --default-font-size: 15px;
}
/* Extra smaller devices get smaller fonts */
@media only screen and (max-width: 720px) {
  :root { --default-font-size: 12px; }
}

/* Page */
body {
  background-color: var(--light-grey);
  color: var(--dark-grey);
  font-family: sans-serif;
  font-size: var(--default-font-size);
  line-height: 1.5;
  padding: 0 2em;
  margin: 2em auto;
  max-width: 1000px;
}

/* Header */
#header {
  border-bottom: thin solid gray;
  text-align: right;
  margin-bottom: 2ex;
  padding-bottom: 0.2ex;
}
#header h1.title {
  color: var(--seiteneingang-org-blue);
  font-weight: bold;
  line-height: 1;
  margin: 0;
  padding: 0;
}
#header h1.title a {
  color: var(--seiteneingang-org-blue);
  text-decoration: none;
}
#header h2.subtitle {
  font-family: monospace;
  font-size: var(--default-font-size);
  margin: 0;
}
#header ul.navigation {
  line-height: 1;
  margin: 0;
  padding: 0;
}
#header ul.navigation li {
  list-style: none;
  display: inline;
  margin: 0;
  margin-right: 1ex;
  padding: 0;
}
#header ul.navigation li a {
  color: var(--dark-grey);
  text-decoration: none;
}
#header ul.navigation li a:hover {
  color: var(--seiteneingang-org-blue);
}
#header ul.navigation li.title {
  color: var(--dark-grey);
  font-variant: small-caps;
  font-weight: bold;
}
#header ul.navigation li.selected {
  font-weight: bold;
}
#header ul.navigation hr {
  display: none;
}

/* Content */
#content {
  background-color: white;
  margin: 0;
  padding: 2.5em;
  -moz-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
  -webkit-box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
  box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
#content h1.title {
  font-family: monospace;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  margin: 0;
  padding: 0;
  padding-bottom: 0.5em;
}
#content em {
  font-weight: bold;
  font-style: normal;
}
#content a {
  color: var(--seiteneingang-org-blue);
  text-decoration: none;
}
#content a:hover {
  color: black;
}
#content blockquote {
  margin-left: 2em;
}
#content dl dt {
  font-weight: bold;
}
#content p.list-head {
  margin-bottom: -0.5lh;
}
#content .nowrap {
  text-wrap: nowrap;
}

/* Content landing page specific */
#content dl.status { line-height: 1.2; }
#content dl.status dt .progressbar { width: 100%; height: 1lh; border-style: solid; }
#content dl.status dt .progressbar div { padding-left: 0.1em; height: 100%; width: 53%; }
#content dl.status dt .progressbar .scheduled { background-color: #ff0000; /* Red */ }
#content dl.status dt .progressbar .over-10-percent { background-color: #ff0000; /* Red */ }
#content dl.status dt .progressbar .over-20-percent { background-color: #ff0000; /* Red */ }
#content dl.status dt .progressbar .over-30-percent { background-color: #ff4500; /* OrangeRed */ }
#content dl.status dt .progressbar .over-40-percent { background-color: #ff4500; /* OrangeRed */ }
#content dl.status dt .progressbar .over-50-percent { background-color: #ff8c00; /* DarkOrange */ }
#content dl.status dt .progressbar .over-60-percent { background-color: #ff8c00; /* DarkOrange */ }
#content dl.status dt .progressbar .over-70-percent { background-color: #ffa500; /* Orange */ }
#content dl.status dt .progressbar .over-80-percent { background-color: #ffa500; /* Orange */ }
#content dl.status dt .progressbar .over-90-percent { background-color: #008000; /* Green */ }
#content dl.status dt .progressbar .completed { background-color: #008000 /* Green */ }
#content dl.status dd { margin-left: 0; font-style: italic; }
#content dl.status dd a { color: black; }
#content dl.status dd a:hover { color: var(--seiteneingang-org-blue); }

/* Content site notice specific */
#content h2.company { margin-bottom: 0; }

#content dl.address,
#content dl.register,
#content dl.contact { line-height: 1.2; }

#content dl.address dt,
#content dl.register dt,
#content dl.contact dt { float: left; margin-right: 0.5em; }

#content dl.address dt:after,
#content dl.register dt:after,
#content dl.contact dt:after { content: ': '; }

#content dl.address dd:after,
#content dl.register dd:after,
#content dl.contact dd:after { clear: left; display: block; }

#content dl.address { margin-top: 0; }
#content dl.address dt { display: none; }
#content dl.address dd { margin-left: 0; }
#content dl.address dd.street { float: left; margin-right: 0.5em; }
#content dl.address dd.post-code { float: left; margin-right: 0.5em; }
#content dl.address dd.country { text-transform: uppercase; margin-top: 0.2em; }

/* Content privacy policy specific */
#content dl.summary { margin: 0; padding: 0; }
#content dl.summary dd { margin: 1em 2em; font-style: italic; }
#content dl.summary ul { padding: 0; }
#content dl.summary li { list-style: '✓'; padding-left: 1ex; }
#content dl.summary li.note { list-style: '!'; padding-left: 1ex; }

/* Footer */
#footer {
  margin-top: 2ex;
  border-top: thin solid gray;
  padding-top: 0.2ex;
}
#footer ul.site-notice {
  line-height: 1;
  margin: 0.3em 0 0;
  padding: 0; 
}
#footer ul.site-notice hr {
  display: none;
}
#footer ul.site-notice li {
  list-style: none;
  margin-top: 0.2em;
}
#footer ul.site-notice li.company-name {
  font-weight: bold;
}
#footer ul.site-notice li.link {
  padding: 0;
  margin: 0;
  display: block;
  float: right;
}
#footer ul.site-notice li.link#current-page {
  font-weight: bold;
}
#footer ul.site-notice li.link a {
  color: inherit;
  text-decoration: none;
}
#footer ul.site-notice li.link a:hover {
  color: var(--seiteneingang-org-blue);
}