@import url('https://fonts.googleapis.com/css?family=Lobster');

body {
    /* The browser sets a small margin body by default.  We remove it. */
    margin: 0;

    /* This forbids the browser from letting the page get narrower than 800px.
       If the actual window is too narrow, you get a horizontal scroll. */
    min-width: 800px;
}

a {
    font-family: sans-serif;
    letter-spacing: 0.1em;
    text-decoration: none;
}

/* This box is the whole area you see when the page loads. */
div.headarea {
    /* This box is as tall as the window, and as wide. */
    height: 100vh; width: 100%;
    box-sizing: border-box;

    position: relative;

    /* The image is the background.  These styles control how and where the
       background image is displayed. */
    background-size: 100% auto;
    background-position: 0 3em;
    background-repeat: no-repeat;
}

/* The stripe at the top of the main area. */
div.topstripe {
    height: 3em; width: 100%; 
    background-color: rgb(20%,45%,60%);
    position: relative; 
}

/* Links in the top stripe. */
div.topstripe a {
    /* General text appearance, including spacing out the letters a bit. */
    color: #cccccc;
    font-size: 70%;

    /* The text of each link should have some space separating it. */
    padding-left: 1em; padding-right: 1em;

    /* Arrange horizontally. */
    vertical−align: top;
    float: right;

    /* Move down from the top of the stripe. */
    position: relative; 
    top:2em;
}

div.topstripe a:hover {
    color: white;
}

/* This is where you see the background picture, though the picture is
   actually the background of the containing div. */
div.picturearea {
    position: relative;
}

/* This mess styles and locates the logo, which appears in the upper left
   corner of the image area. */
div.logo {
    position: absolute;
    top: 1em; left: 2em;
    text-align: center;
    color: white;
    width: 10em;
}
div.logo div.name {
    font-family: sans-serif;
    font-size: 130%;
    padding: 0.25em;
    border-bottom: 1pt solid white;
}
div.logo div.tag {
    padding: 0.25em;
    font-style: italic;
    font-size: 90%;
}

/* The line that says which page. */
div.pagename {
    position: absolute;
    top: 50vh; left: 3em;
    color: white;
    font-family: Lobster, Roman, serif;
    font-size: 200%;
}

/* This is the menu that appears in the middle of the picture. */
div.midmenu {
    position: absolute;
    top: 3em; right: 7%;
}

/* When you point to it, it takes on the background color. */
div.midmenu:hover {
    background-color: rgba(20%,45%,60%,0.5);
}

/* This is the box for each menu entry.  */
div.midmenu div.menentry {
    /* Horizontal row. */
    box-sizing: border-box;
    display: inline-block;
    vertical−align: top;
    height: 3em;
    
    /* Formatting of the text contents. */
    text-align: center;
    padding-top: 1.1em;
    padding-left: 1em; padding-right: 1em;
    font-family: sans-serif;
    letter-spacing: 0.1em;

    color: white;
}

div.midmenu div.menentry:hover {
    background-color: #eeeeff;
    color: black;
}

div.midmenu div.menentry div.label {
    font-weight: bold;
}

/* This is the contents of the menu.  It is physically inside the entry,
   but it's position is absolute, so it doesn't take up any space there.
   Here's the magic: the absolute positioning applies to the nearest block
   that has position set, which is div.midmenu.  Also, the setting of left
   and right forces the width to be the same as midmenu. */
div.midmenu div.menentry div.mencont {
    /* This locates the menu contents, and gives the correct width. */
    text-align: left;
    position: absolute;
    left: 0; top: 3em; right: 0;
    padding-top: 1ex;
    padding-bottom: 1ex;

    white-space: nowrap;
    
    color: black;
    background-color: #eeeeff;

    /* But don't look now.  Only when you hover. */
    visibility: hidden;
}

/* This makes the menu contents appear when you point to them.  */
div.midmenu div.menentry:hover div.mencont {
    visibility: visible;
}

/* The menu contents are two-column. */
div.midmenu div.menentry div.mencont div  {
    display: inline-block;
    box-sizing: border-box;
    width: 50%;
    text-align: center;
    white-space: normal;
    vertical-align: top;
}
div.midmenu div.menentry div.mencont div a {
    letter-spacing: 0;
    color: black;
    font-style: italic;
}
div.midmenu div.menentry div.mencont a:hover {
    color: #337799; 
}


/* Stripe at the bottom, with the three boxes that link to peer pages. */
div.botstripe {
    /* We make it at the bottom. */
    position: absolute;
    bottom: 0em;
    width: 100%;

    /* Make sure the parts don't decide to wrap. */
    white-space: nowrap;
}

/* The divs that hold the peer pages. */
div.botstripe div {
    /* This will get them to appear horizontally. */
    display: inline-block;

    /* Give them some space, and arrange the text inside. */
    height: 5em; width: 33.3%;
    text-align: center;

    /* This the the color of the boxes for other pages. */
    background-color: #DDDDDD;
}

/* Make the link away respond. */
div.botstripe div:hover {
    background-color: #FFFFFF;
}

/* The actual links in the bottom stripe. */
div.botstripe div a {
    color: black;
    position: relative;
    top: 1.5em;
}

/* The link to ourselves is styled differently. */
div.botstripe div.target, div.target:hover {
    background-color: rgb(20%,45%,60%);
}
div.botstripe div.target a {
    color: white;
}

div.belowarea {
    text-align: center;
    height: 10cm;
    padding-top: 1cm;
    font-size: 200%;
    background-color: rgb(30%,55%,90%);
    color: white;
}