style.css

/*
Theme Name: FeG Dortmund 2018
Author: Rainer Klute
Description: WordPress template for the new FeG Dortmund website
Version: 0.0.1
Tags: custom-header featured-image-header featured-images full-width-template grid-layout left-sidebar
*/

/* Boxes:
   header-box-1:   dark blue box with logo
   header-box-2:   red box
   header-box-3:   violet box
   header-box-4:   image
   header-box-5:   text (important information)
   navigation-box: contains the website navigation
   contents-box:   contains the actual contents of the current page
*/
@import "grid_normal.css";

@import "grid_small.css";

@import "screen_normal.css";

@import "screen_small.css";

body {
    vertical-align: top;
    background-color: #ffffff;
    font-family: tahoma, arial, sans-serif;
}

h1 {
    color: #C82128;
    font-family: serif;
    font-style: oblique;
}

img {
    max-width: 100%;
    max-height: 100%;
}

.navigation, .navigation * {
    color: #7F7AC5;
}

/* Remove bullets and indentation from "li" elements in the navigation menu: */
.navigation, .navigation * {
    list-style-type: none;
    padding: 0;
}

/* Box colors: */
#header-box-1 {
    background-color: #233d91; /* dark blue */
    color: #ffffff;
    background-image: url("images/FeG-Logo_white_bgtransparent.png");
    background-size: auto 50%;
    background-repeat: no-repeat;
    background-position: 10% 70%;
}

#header-box-2 {
    background-color: #C82128; /* red */
    color: #ffffff;
}

#header-box-3 {
    background-color: #7F7AC5; /* violet */
    color: #ffffff;
}

#header-box-4 {
    background-color: #ddd9d8; /* grey (well, almost) */
    color: #ffffff;
    position: relative;
}

/*
 * Centers the featured image horizontally and vertically inside the grey header box, together with
 * "position: relative" of #header-box-4.
 */
#header-box-4 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#header-box-5 {
    background-color: #3b4ea9; /* blue */
    color: #ffffff;
    padding-left: 5%;
    font-size-adjust: 0.4;
    line-height: 50%;
    overflow: hidden;
}

#navigation-box {
    background-color: #ffffff;
    padding-right: 2%;
    padding-left: 2%;
    color: #000000;
}

#contents-box {
    background-color: #ffffff;
    padding-right: 2%;
    padding-left: 2%;
    word-break: normal;
}

#menubutton {
    background-color: #233d91; /* dark blue */
    color: #ffffff;
}