/* COMMON STYLE SETTINGS */

body {
    font-family: sans-serif;
}

:link, :visited {
    text-decoration: underline;
    color: black;
}

nav ul {
    list-style: none;
}
nav ul li {
    display: inline;
}
nav ul li:not(:last-child):after {
    content: " · ";
    color: #aaa;
}


/* COMMON PAGE ELEMENTS */

html, body {
    margin: 0;
    padding: 0;
    background-color: white;
}

/* header */

header h1 img {
    margin: 0;
    max-width: 100%;
    height: 1.5em;
}

#header-background {
    position: relative;
    background-color: #333;
    width: 100%;
    height: 3em;
    margin-bottom: 4em;
}

@media (min-width: 800px) {
    #header-background {
        height: 4em;
    }
    header {
        position: absolute;
        top: 0;
        margin: 0;
        padding: 1em 0;
        width: 100%;
    }
    header h1 {
        font-size: 2em;
        margin: 0;
        min-height: 3em;
        padding: 0 1em 0;
        display: inline-block;
        background-color: #333;
        border-bottom-right-radius: .8em;
    }
    header h1 img {
        height: 2em;
    }
    header #roundcornerb,
    header #roundcornerw {
        display: inline-block;
        width: 50px;
        height: 50px;
        position: absolute;
        top: 4em;
        margin: 0;
    }
    header #roundcornerb {
        background-color: #333;
    }
    header #roundcornerw {
        background-color: white;
        border-top-left-radius: 1.6em;
    }
}

header nav#mainnav {
    position: absolute;
    top: .5em;
    right: 1em;
}

header nav#mainnav,
header nav#mainnav :link,
header nav#mainnav :visited {
    color: #eee;
}

header nav#usermenu :link,
header nav#usermenu :visited {
    color: black;
}

header nav#usermenu {
    position: absolute;
    top: 4em;
    right: 1em;
    background-color: white;
}

header nav#mainnav ul li:not(:last-child):after {
    color: #999;
}


/* content */

#content {
    margin: 0 auto;
    padding: 1em;
    max-width: 50em;
}

@media (min-width: 800px) {
    #content {
        padding: 1em 0 0;
    }
}

#content h1 {
    font-size: 1.8em;
}
#content h2 {
    font-size: 1.4em;
}
#content h3 {
    font-size: 1.2em;
}




/* SPECIAL PAGE ELEMENTS */

/* form stuff */
form .errors {
    color: #D00;
    margin: .2em 0 .5em;
}
form .errors :link, form .errors :visited{
    color: #D00;
}
form ul.errors {
    padding-left: 1em;
}

.active {
  color: green;
}

.inactive {
  color: red;
}

.service {
  padding-top: 15px;
  margin-left: 30px;
  clear: both;
}

.service h3 {
  float: left;
  margin: 0;
  width: 33%;
}

.service ul {
  margin: 0px;
}

.service ul li{
  float: left;
  list-style: none;
  margin: 0px;
  width: 33%;
}

.service .form-service {
  clear: both;
  padding-top: 10px;
}

.form-submit-services {
  margin-left: 30px;
  padding: 10px 0px;
  clear: both;
}

/* flashing */

ul.flashes {
    padding-left: 0;
}
ul.flashes li {
    list-style: none;
    margin: .2em 0;
    display: block;
    padding: .2em .6em;

    --bs-alert-border-color: #ee3;
    --bs-alert-bg: #ffd;
}

ul.flashes li.error {
    --bs-alert-border-color: #e33;
    --bs-alert-bg: #fdd;
}

ul.flashes li.success {
    --bs-alert-border-color: #3e3;
    --bs-alert-bg: #dfd;
}