/*
    flexbox:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/
*/


/* Cleaner */

* { margin: 0; padding: 0; }
img { border: none; }


/* Generic classes */

.fleft { float: left; }
.fright { float: right; }
.fleftm { float: left; margin-right: 10px; }
.frightm { float: right; margin-left: 10px; }
.clearer { clear: both; font-size: 0; height: 0; }
.center { text-align: center; }


a:link, a:visited {
    color: hsl(210, 70%, 40%);
    /*text-decoration: none;*/
}
a:hover, a:active {
    text-shadow: 0 0 2px hsl(210, 80%, 60%);
}

a.extlink:hover:after {
    content: " >";
}

::-moz-selection {
    background-color: hsl(210, 50%, 60%);
    color: hsl(210, 20%, 100%);
    text-shadow: 0 0 2px hsl(210, 80%, 20%);
    border-radius: 2px;
}
::selection {
    background-color: hsl(210, 50%, 60%);
    color: hsl(210, 20%, 100%);
    text-shadow: 0 0 2px hsl(210, 80%, 20%);
    border-radius: 2px;
}


/* Main classes */

html {
    box-sizing: border-box;
    width: 530px;
    height: 600px;
    font-family: "Trebuchet MS", "Liberation Sans", sans-serif;
}
body {
    width: 530px;
    height: 600px;
}

#main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    background-color: hsl(210, 0%, 100%);
    min-height: 100%;
}
#left {
    width: 30px;
    padding: 20px;
    background-color: hsl(210, 10%, 96%);
    border-right: solid 1px hsl(210, 0%, 70%);
    color: hsl(210, 10%, 96%);
}

#page {
    background-color: hsl(210, 0%, 100%);
    padding: 10px;
}

#page p {
    margin: 10px 0 5px 0;
}
#page h2 {
    margin: 20px 0 10px 0;
    color: hsl(210, 70%, 70%);
    font: bold 42px 'Yanone Kaffeesatz', "Liberation Sans Narrow", sans-serif;
}
