* {
    font-family: sans-serif, Helvetica, Arial;
    font-size: 1em;
    /*border:1px solid black;*/

    margin:0;
    padding:0;
}

body{
    height: 100vh;
    margin: 0;
    background-image: url("img/backgrounds/cic_a4.png"),url("img/backgrounds/cic_b3.png"),url("img/backgrounds/cic_c3.png");
}

body.home {
    background-image: url("img/bg/torq/a.png"),url("img/bg/torq/b.png"),url("img/bg/torq/c.png");
}

body.info {
    background-image: url("img/bg/oran/a.png"),url("img/bg/oran/b.png"),url("img/bg/oran/c.png");
}

body.office {
    background-image: url("img/bg/pink/a.png"),url("img/bg/pink/b.png"),url("img/bg/pink/c.png");
}

body.contact {
    background-image: url("img/bg/blue/a.png"),url("img/bg/blue/b.png"),url("img/bg/blue/c.png");
}

body.impressum {
    background-image: url("img/bg/gree/a.png"),url("img/bg/gree/b.png"),url("img/bg/gree/c.png"),url("img/bg/gree/d.png"),url("img/bg/gree/e.png");
}

/*TODO: resize Pictures*/
div.top#home {
     background-image: url("img/bg/head/rosa1.JPG");
}

div.top#info {
    background-image: url("img/bg/head/rosa3.JPG");
}

div.top#office {
    background-image: url("img/bg/head/rosa2.JPG");
}

div.top#contact {
    /*TODO: blur on this bg a bit perhaps*/
    background-image: url("img/bg/head/lila2.JPG");
}

/*TODO: find an ocean themed bg*/
div.top#imp {
    background-image: url("img/bg/head/lila2.JPG");
}

div.container {
    position: relative;
    max-width: 53em;
    min-height: 100%;
    margin-left: auto;
    margin-right:auto;
    /*box-shadow: 3px 3px 10px -5px rgba(0,0,0,0.75);*/
    box-shadow: 0px 0px 18px 0px rgba(0,0,0,0.75);
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
}

div.top {
    background-size: 100% auto;
    width: 53em;
    height: 20.75em;
}

/*header*/
div.header {
    min-height: 14em;
    background-color: rgba(255, 255, 255, 0.7);
}

#sitetitle {
    margin-top: 3em;
    margin-left: 3em;
    /*TODO: site title as picture with good font float left*/
    /*TODO: logo as picture float left*/
}

#logo {
    float: right;
    height: 9em;
    width: auto;
    margin-top: 2.5em;
    margin-right: 6em;
}

/*navigation*/
ul.menu {
    height: 6.75em;
    /*background-color: #b5f979;*/
    position:relative;
    margin-top: 0;
    list-style: none;
}

a.menulink>li {
    padding: 1.25em 0 0 0;
    height: 3.25em;
    width: 25%;

    color: #000000;

    background-color: rgba(255,255,255,0.9);

    font-size: 1.5em;
    text-align: center;
    position:absolute;
    display: inline;
    word-wrap: break-word;
}

a.menulink#selected>li{
    background-color: #FFFFFF;
    background-repeat: repeat-x;
}

/*home link*/
a.menulink.home>li{
    left: 0;
}
a.menulink.home :hover{
    background-color: #79f9ea;
    background-image: none;
}
/*TODO:decide to leave this in and add it to the others, or not
a.menulink.home#selected :hover{
    background-color: #FFFFFF;
    background-image: none;
}
*/
a.menulink.home#selected>li {
    background-image: url("./img/background_tuerkis.png");
}

/*info link*/
a.menulink.info>li{
    left: 25%;
}
a.menulink.info :hover{
    background-color: #f9ae79;
    background-image: none;
}
a.menulink.info#selected>li{
    background-image: url("./img/background_orange.png");
}

/*praxis link*/
a.menulink.praxis>li{
    left: 50%;
}
a.menulink.praxis :hover{
    background-color: #ee79f9;
    background-image: none;
}
a.menulink.praxis#selected>li{
    background-image: url("./img/background_pink.png");
}

/*contact link*/
a.menulink.kontakt>li{
    left: 75%;
}
a.menulink.kontakt :hover{
    background-color: #7980f9;
    background-image: none;
}
a.menulink.kontakt#selected>li{
    background-image: url("./img/background_blau.png");
}

/*main content*/
.content {
    position: relative;
    min-height: 31.25em;
    margin: 0;
    background-color: #ffffff;
    text-align: left;
    padding: 2em;
    margin-bottom: 5em;
}

.content h1 {
    text-align: center;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 1.4em;
    margin: 1em;
    margin-top: 0;
}

.content p {
    margin: 1em;
}

.content q {
    float: right;
    quotes: "«" "»";
    margin: 0 1em 1em 1.5em;
}

.content img.picRightAlign {
    float: right;
    margin: 1em 0 1em 2em;
    max-height: 18.75em;
    max-width: 9.375em;

    /*
    -webkit-box-shadow: 3px 3px 10px -5px rgba(0,0,0,0.75);
    -moz-box-shadow: 3px 3px 10px -5px rgba(0,0,0,0.75);
    */

    box-shadow: 0px 3px 10px -5px rgba(0,0,0,0.75);
}

div.leftcontent {
    float: left;
    width: 21.875em;
}

div.rightcontent {
    float: right;
    width: 21.875em;
}

div.centercontent {
    text-align: center;
}

a.maillink {
    color: rgb(121, 128, 249);
    text-decoration: none;
}

a.infolink {
    color: #000000;
    text-decoration: none;
    background-color: #f9ae79;
}
a.infolink:hover{
    color: #FFFFFF;
}

a.contactlink {
    color: #000000;
    text-decoration: none;
    background-color: #7980F9;
}
a.contactlink:hover{
    color: #FFFFFF;
}

a.externlink {
    color: #000000;
    text-decoration: none;
    background-color: #dc0001;
}
a.externlink:hover{
    color: #FFFFFF;
}

a.abglink {
    color: #000000;
    text-decoration: none;
    background-color: rgb(181, 249, 121);
}
a.abglink:hover{
    color: #FFFFFF;
}

#map {
    float: right;
    width: 18.75em;
    height: 18.75em;
    margin: 1em 2em 1em 2em;
}

.content img.leftalign{
    float: left;
    margin: 1em 2em 1em 0;
}

.footer {
    position: absolute;
    margin-top: 1em;
    bottom: 0;
    width: 100%;
    height: 5.5em;
}

.footer#homefooter {
    background-color: rgba(121, 249, 234, 0.4);
}

.footer#infofooter {
    background-color: rgba(249, 174, 121, 0.41);
}

.footer#officefooter {
    background-color: rgba(238, 121, 249, 0.4);
}

.footer#contactfooter {
    background-color: rgba(121, 128, 249, 0.4);
}

.footer#impfooter {
    background-color: rgba(181, 249, 121, 0.41);
}

div.impressum {
    width: 25%;
    height: 3em;
    padding-top: 1.5em;
    padding-bottom: 1em;
    padding-left: 3em;
    background-color: rgba(255,255,255,0.6);
    float: right;
}

div.impressum a {
    text-decoration: none;
    font-size: 2em;
    color: #000000;
}

div.impressum#selected {
    background-color: #ffffff;
}