/*
    CSS File to style my Homepage
*/
.centered
{
    text-align: center;
}

.left
{
    text-align: left;
}

.right
{
    text-align: right;
}
.large                  /* these definitions I have left */
                        /* as a reference */
{
    font-size: 24pt;
    line-height: 43pt;
}

.medium
{
    font-size: 12pt;
    line-height: 22pt;
}

.small
{
    font-size:8pt;
    line-height: 16pt;
}

.hmenu 
{
    vertical-align: baseline;
    text-align: center;
    margin: 0;
    padding: 0 0 15px 15px;
    display: flex;
    font-size: 12pt;            /* box. the background is inherited */
    line-height: 15pt;          /* the rows shall be single spaced */
}

.hlist
{
    vertical-align: baseline;
    text-align: center;
    display: flex;
    list-style: none;
}

.hitem
{
    vertical-align: baseline;
    display: flex;
    margin-right: 2em;
    text-align: center;
}
/*
    Bootstrap destroys all my formatting...
    I am not even able to determine the font.
    I'll use it only for this exercise.
*/
pre
{
    overflow-y:hidden;                  /* this is because bootstrap causes a */
                                        /* big mess in my code tags */
    box-shadow: none;
    border: none;
    font-family: "Courier New",monospace;
    font-size:initial;
    color: #800000;
    padding: initial auto;
    line-height: initial;
}

header
{
    font-size: 24pt;
    line-height: 43pt; /* 1.5 rows spaced */
    margin-bottom: 24pt;
    color: #015999;
    background-color: #ffffff;
    padding: 10px;
}

main
{
    font-size: 12pt;
    line-height: 22pt; /* 1.5 rows spaced */
    margin-bottom: 22pt;
    color: #000;
    background-color: #ffffff;
    padding: 10px;
}

footer
{
    font-size: 12pt;
    line-height: 16pt; /* single spaced */
    color: #000;
    background-color: #ffffff;
    padding: 10px;
}

code
{
    overflow-y:hidden;                      /* this is because bootstrap */
    font-family: "Courier New",monospace;   /* makes a scrollbar and makes some */
    font-size: 12pt;                        /* mess with my code */
    line-height: 14pt;
    margin-bottom: 22pt;
    color: #800000;
    padding-top: 14pt;
    padding-right: 12pt;
    padding-bottom: 14pt;
    padding-left: 48pt;
}

body
{
    font-family: Helvetica, sans-serif;
    color: #000;
    background-color: #f1f1f1;
    margin: 0;
    width: 21cm;                    /* here I set the limit of with */
    padding: 1cm;                   /* to be an A4-page */
    margin: 1cm auto;

}

ul
{
    margin-bottom: 22pt;
}

ul[class="menu"]
{
    font-size: 12pt;            /* box. the background is inherited */
    line-height: 15pt;          /* the rows shall be single spaced */
    border: 1pt solid;
    list-style-type: '➡️ ';     /* and I make fun with emojis */
    padding: 15px;
    position: relative;
    background-color: #E5E4E2; /* unordered lists get a platinum
                                    background */
}

li[class="a"]
{
    color: #FF0000;
    list-style-type: '🔝 '; /* the a element in a list gets an arrow */
                            /* to the top of the document */
}

a:hover
{
    background-color: yellow; /* show a yellow background when hovered */
}

a
{
    color: #015999;
}

a[class="grayed"]
{
    color: silver          /* the text of a menu shall be grayed when */
                             /* it makes no sense to click it*/
}

address[class]
{
    font-size: 12pt;
    line-height: 22pt; /* 1.5 rows spaced */
}

address[class="small"]
{
    font-size:8pt;
    line-height: 10pt; /* single spaced */
}

h1
{
    font-size: 24pt;
    line-height: 43pt; /* 1.5 rows spaced */
    margin-bottom: 43pt;
    color: #015999;
    background-color: #ffffff;
    padding: 10px;
    display: block;
}

h4
{
    margin-top: 32pt;
    color: #015999;
}


p[class="small"]
{
    font-size:8pt;
    line-height: 10pt; /* single spaced */
    margin-bottom: 10pt;
}