opschonen www

www/style.css

@@ -13,52 +13,16 @@ html {
 
 body {
   border: 0px;
-  margin: 0px;
-  padding: 0px 0px 8em 0px;
+  margin: 2em;
+  padding: 0px 0px 2em 0px;
   color: black;
   background-color: #fcfffc;
 }
 
 .main {
-  margin: 2em 0px 0px 0px;
-  padding: 0.4em 0.2em;
-
-  column-count: 4;
-  column-width: 22em;
-
-  -webkit-column-gap: 0px;
-  -moz-column-gap: 0px;
-  column-gap: 0px;
-
-  column-rule: 1px solid lightgrey;
-}
-
-.main > div {
-  -webkit-column-break-inside: avoid;
-  -moz-column-break-inside: avoid;
-  -o-column-break-inside: avoid;
-  -ms-column-break-inside: avoid;
-  column-break-inside: avoid;
-  column-fill: balance;
-  page-break-inside: avoid;
-
-  /* zo moet het */
-  break-inside: avoid;
-
-  padding: 0px 1em;
-  margin: 0px 0.2em;
-  overflow-x: hidden;
-}
-
-.footer {
-  text-align: center;
-  font-size: small;
-  margin-bottom: 2em;
-}
-
-.title {
-  text-align: center;
-  padding-bottom: 4em;
+  margin: 1em 0px 0px 0px;
+  width: 100%;
+  overflow-x: auto;
 }
 
 h1 {
@@ -66,7 +30,8 @@ h1 {
 }
 
 h1,
-h2 {
+h2,
+h3 {
   color: #62757f;
   letter-spacing: 0.1em;
   margin-top: 2em;
@@ -76,6 +41,11 @@ h1 {
   font-weight: 200;
 }
 h2 {
+  line-height: 120%;
+  font-size: x-large;
+  font-weight: 300;
+}
+h3 {
   margin-top: 0px;
   font-size: large;
   font-weight: 400;
@@ -94,23 +64,106 @@ a:hover {
   text-decoration: underline;
 }
 
-table {
-  border-collapse: collapse;
-  border-spacing: 2em;
+div.option {
+  display: inline-block;
+  margin-right: 2em;
 }
 
-td {
-  padding: 0.2em 0.5em 0.2em 0px;
+table.outer > tr > td,
+table.outer > tbody > tr > td {
+  padding: 0px 1em;
+  border-left: 1px solid #62757f;
+}
+
+table.outer > tr > td:first-child,
+table.outer > tbody > tr > td:first-child {
+  border-left: 0px;
+  padding-left: 0px;
+}
+
+table table {
+  width: 20em;
+  min-width: 20em;
+  max-width: 20em;
+  table-layout: fixed;
+}
+
+table table td {
+  /* cursor: pointer; */
+  padding: 0.2em 0px;
   vertical-align: center;
   white-space: nowrap;
+  overflow-x: hidden;
 }
 
-tr > td:first-child {
+table table tr > td:first-child {
   width: 100px;
   min-width: 100px;
+  padding-right: 0.5em;
 }
-td > div {
+
+table.bron td > div,
+table table td > div {
   height: 10px;
   margin-top: auto;
   background-color: #62757f;
 }
+
+.form {
+  line-height: 150%;
+}
+
+table.choice {
+  padding-top: 1em;
+  border: 1px solid #62757f;
+}
+
+table.choice td {
+  vertical-align: top;
+  text-align: left;
+  padding: 0.4em 1.2em;
+}
+
+label {
+  cursor: pointer;
+}
+label:hover {
+  text-decoration: underline;
+}
+
+.disabled {
+  opacity: 0.4;
+}
+
+#subtitle,
+#data {
+  opacity: 1;
+  transition: opacity 200ms linear;
+}
+#subtitle.fade,
+#data.fade {
+  opacity: 0;
+  transition: opacity 20ms linear;
+}
+
+td.bar {
+  width: 200px;
+  min-width: 200px;
+}
+
+table.bron {
+  border-collapse: collapse;
+}
+
+table.bron td {
+  padding: 0.2em 1em 0.2em 0px;
+}
+
+tr.last td {
+  padding-bottom: 0.5em;
+  border-bottom: 1px solid #62757f;
+}
+
+tr.first td {
+  padding-top: 0.5em;
+}