body {
    font-size: 10pt;
    width: 100%;
    height: 100%;
    padding: 0;
    margin-left: 0px;
    margin-right: 0px;
}
header, footer {
    text-align: center;
    padding: 10px;
    clear: all;
    text-align: center;
}
nav {
    text-align: left;
    vertical-align: top;
}

section#leftblocks, section#rightblocks {
    display: block;
    width: 100%;
    min-width: 150px;
}
div#centerblocks {
    display: table-cell;
    width: 100%;
}
section#topblocks {
    margin: auto;
}
section#bottomblocks {
    margin: auto;
}
div#content {
    max-width: 800px;
    margin: auto;
    font-size: 11pt;
}
article {
    /* z-index: 10; */
}
div.block {
    display: table;
    width: 100%;
}
div.block_title {
    font-size: 11pt;
    font-weight: normal;
    font-style: italic;
    text-align: left;
    padding: 5px;
}
div.block_body {
    font-size: 11pt;
    padding: 5px;
}

th {
   text-align: left;
   font-size: 11pt;
}

table.icon_list {
    width: 100px;
    border-spacing: 0px;
}

table.icon_list td {
    padding: 0px;
}

table.icon_list td.icon_name {
    white-space: nowrap;
}

table.icon_list td table.upform {
    padding: 0px;
}

textarea#custom_css {
    width: 600px;
    height: 350px;
}

/* MDN Holy Grail */

#main {
    flex-direction: column;
}

#main > article, #main > aside {
    /* Return them to document order */
    order: 0;
}

/* nav is in-situ and overlaid */
#menu-control {
    position: absolute;
    left: 0px;
    top: 0px;
}
#main > nav {
    order: 1;
    position: absolute;
    top: 40px;
}
#leftblocks {
    background: white;
    z-index: 20;
}

#main > nav, #main > aside, header, footer {
    min-height: 50px;
}

section#leftblocks, section#rightblocks {
    display: block;
    width: 100%;
}


#main {
    min-height: 800px;
    margin: 0px;
    padding: 0px;
    display: flex;
}

#main > article {
    margin: 4px;
    padding: 5px;
    flex: 3 1 60%;
    min-height: 100px;
}

#main > nav {
    flex: 1 6 20%;
    min-height: 100px;
}

#main > aside {
    flex: 1 6 20%;
    min-height: 100px;
}

header, footer {
    display: block;
    min-height: 50px;
}

/* Hamburger menu */
#hamburger-button {
    width: 35px;
    height: 35px;
    border: 1px solid black;
}
@keyframes expand {
    from {
	opacity: 0;
	position: relative;
	left: -100%;
    }
    to {
	opacity: 1;
	position: relative;
	left: 0%;
    }
}
@keyframes retract {
    0% {
	opacity: 1;
	position: relative;
	left: 0%;
	display: block;
    }
    95% {
	opacity: 0;
	position: relative;
	left: -100%;
	display: block;
    }
    100% {
	display: none;
    }
}
@keyframes shown {
    from { z-index: -10; }
    to { z-index: 20; }
}
@keyframes hidden {
    from { z-index: 20; }
    to { z-index: -10; }
}
#nav-left.expanded section#leftblocks {
    animation-name: expand;
    animation-duration: 1s;
}
#nav-left.retracted section#leftblocks {
    animation-name: retract;
    animation-duration: 1s;
    opacity: 0;
    position: relative;
    left: -100%;
}
#nav-left.expanded {
    animation-name: shown;
    animation-duration: 1s;
}
#nav-left.retracted {
    animation-name: hidden;
    animation-duration: 1s;
    z-index: -10;
}

/* Wide enough to support three columns */
@media all and (min-width: 640px) {
    #main, #page {
	flex-direction: row;
    }
    
    #main > article {
	order: 2;
    }
    #main > nav {
	order: 1;
    }
    #main > aside {
	order: 3;
    }
    
    #main > nav {
	position: static;
    }
    #main > aside {
    }
    header, footer {
	min-height: 100px;
    }
    
    section#leftblocks, section#rightblocks {
	display: table-cell;
	width: 150px;
    }
    section#rightblocks {
	float: right;
    }

    /* No hamburger or expanding animation */
    #menu-control {
	display: none;
    }
    #nav-left.expanded section#leftblocks {
	animation-name: none;
    }
    #nav-left.retracted section#leftblocks {
	animation-name: none;
	opacity: 1;
	position: relative;
	left: 0%;
    }
    #nav-left.retracted {
	animation-name: hidden;
	z-index: 20;
    }    
    table.db_table_form input.db_submit {
        position: relative;
        left: -100%;
    }
}