/* some style */
/* sticky footer from https://stackoverflow.com/a/32151246/284595 */
html {
  height: 100%;
  background-color: #e4e4e4;
}

body {
  margin: 0;
  min-height: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  background-color: #fff;
}
.footer {
  background-color: #e4e4e4;
  margin-top: auto;
  text-align: center;
  padding: 0.2ex;
}

div#menu ul {
  /* x-float: right; */
}

div.content-wrapper { padding: 0 2em 2em; } 
div.content-wrapper > p {
  font-size: 115%;
}

.pure-menu-link { width: 100%; }

a:link { 
  text-decoration: none;
}

a:visited { color: #6e6eb8; }

body #app,
body .app { 
  margin: 0;
  margin-top: 4em;
  margin-bottom: 4em;
}

.item .list {
  padding-left: 2em;
}

h1, h2 {
  font-style: normal;
  font-weight: lighter;
  margin-top: 1.4em;
  margin-bottom: 1em;
}

label { font-size: 130%; }
ul li,
.item { margin: 2ex 0; }

.item input, 
.item label {
  margin-right: .8ex;
  vertical-align: baseline;
}

.done > label { color: #999; }

.mark { 
  color: green; 
  display: inline-block;
  margin-left: 0.6ex;
}

.list-collapse, 
.list-expand {
  color: darkblue;
  cursor: pointer;
  margin-left: 1ex;
  text-decoration: underline;
  font-size: 90%;
}

.in-line div.item {
  display: inline-block;
  padding-right: 2ex;
  margin: 2px; 
}

.in-line .mark { margin-left: 0; }

.in-line div.expanded {
  display: block;
}

.footer p { 
  vertical-align: middle; 
  font-weight: 100;
  font-size: 75%;
  color: #666;
}
.footer p a:link { margin-left: 1ex; margin-right: 1ex; }

@media screen and (min-width: 800px) {
  div.content-wrapper { padding-left: 6em; }
  /* .footer { position: fixed; bottom: 0; } */
}

@media screen and (min-width: 1200px) {
  div.content-wrapper { padding-left: 12em; padding-right: 12em }
  /* .footer { position: fixed; bottom: 0; } */
}

@media screen and (min-height: 800px) {
  div.content-wrapper { padding-top: 2em; padding-bottom: 4em; }   
}