html, body {height:100%;}
html {font-family:sans-serif;font-size:62.5%;}
body {background-color:#222;color:#fff;font-size:1.5rem;margin:0;}

header {background-color:#222;border-bottom:1px solid #555;display:flex;align-items:center;justify-content:center;}
header > * {box-sizing:border-box;height:5rem;line-height:5rem;padding:0 2rem;}

#wrapper {display:flex;align-items:center;justify-content:center;height:calc(100vh - 10rem - 2px);}
#wrapper > * {box-sizing:border-box;height:100%;padding:1.5rem 2rem;}
#wrapper > * {}

#nav, nav, aside {width:30rem;}
#main, main {flex:1;}

nav {border-right:1px solid #333;}
nav ul {list-style-type:none;margin:0;padding:0;}

aside {border-left:1px solid #333;}

ul.menu {display:flex;list-style-type:none;margin:0;padding:0.5rem 0;}
ul.menu li:not([id]) {flex:1;}
ul.menu li[id] {background:transparent none center center no-repeat;cursor:pointer;height:4rem;transition:0.1s opacity;width:4rem;}
ul.menu li:not(:hover) {opacity:0.5;}
#file_create {background-image:url('/icon/file_create.svg');}
#group_create {background-image:url('/icon/group_create.svg');}
#collection_upload {background-image:url('/icon/collection_upload.svg');}
#collection_download {background-image:url('/icon/collection_download.svg');}


footer {border-top:1px solid #333;color:#444;display:flex;justify-content:end;height:5rem;line-height:5rem;margin:0;padding:0 2rem;}
footer > div:not(:last-child):after {content:'\b7';margin:0 1rem;}
footer a {color:#444;text-decoration:none;}