/*
TIPS UIT DE COURSES:

-ongeveer 65 tekens per regel is goed.
-base font minstens 16px (18px) en line-height minstens 1.2em (1.25em). Vooral bij smartphones etc.

*/

/* SETUP */

html, body, main {
  height: 100%;
  width: 100%;
}

body {
  font-family: Roboto;
}

img, embed, object, video {
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}

button {
  min-width: 48px;
  min-height: 48px;
}

body {
  margin: 0 auto;
  background-color: #eeeeee;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
}

.capitalize {
  text-transform: capitalize;
}

#page-header {
  background-color: #ffffff;
  color: #000000;
  font-size: 21px;
  margin: 0 auto;
  width: 100%;
  min-height: 20px;
}

#page-header div h1 {
  padding: 20px 10px;
}

#page-footer {
  background-color: #ffffff;
  color: #000000;
  font-size: 21px;
}

nav {
  width: 100%;
  padding: 0;
  margin: 0 auto;
  background-color: #333333;
  color: #ffffff;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: center;
}

nav li {
  margin: 0;
  display: inline-block;
}

nav li a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
  padding: 12px;
  margin: 0;
}

nav li a:hover {
  background-color: #000000;
}

.nav-vertical ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.nav-vertical {
  background-color: #ffffff;
  margin: 0;
  color: #000000;
}

.nav-vertical li {
  position: relative;
}

.nav-vertical a {
  display: block;
  box-sizing: border-box;
  color: #000000;
  margin: 0;
  width: 100%;
}
.nav-vertical li span {
  width: 50%;
  padding: 12px 0;
  text-align: center;
  display: inline-block;
}

.nav-vertical .nav-title {
  width: 100%;
  background-color: #1B5E20;
  color: #ffffff;
  font-weight: bold;
}

.nav-vertical .normal {
  text-transform: uppercase;
  background-color: #dddddd;
  color: #000000;
}
.nav-vertical .delayed {
  text-transform: uppercase;
  background-color: #B71C1C;
  color: #ffffff;
}

.active {
  background-color: #B71C1C;
}

#page-footer div {
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px 20px;
}

#grid {
  margin: 0 auto;
  width: 100%;
}

.box-clickable {
  color: inherit;
  text-decoration: inherit;
}

.box {
  background-color: #ffffff;
  width: 100%;
  margin: 0;
  border-bottom: 1px solid #000000;
  min-height: 48px;
}

.box-entry {
  background-color: #C8E6C9;
}

.box-entry:hover {
  background-color: #F5F5F5;
}

.delayed {
  background-color: #FFCDD2;
}

.delayed:hover {
  background-color: #E57373;
}

.content {
  margin: 10px;
}

.box footer {
  background-color: #1B5E20;
  width: 100%;
  margin: 0;
}

.delayed footer {
  background-color: #B71C1C;
}

.box footer p, .box footer a {
  display: block;
  box-sizing: border-box;
  padding: 10px;
  color: #ffffff;
  margin: 0;
}

header {
  width: 100%;
}

.box-header {
  color: #1B5E20;
}

.delayed h2 {
  color: #B71C1C;
}

.translation-table {
  background-color: #eeeeee;
  border: 1px solid #000000;
  width: 100%;

}

.alt {
  background-color: #cccccc;
}

.translation-table th, .translation-table td {
  text-align: center;
}

/* Colors */

.red {
  color: #f44746;
}

/* Background colors */
.bg-red {
  background-color: #9da1b6;
}

.bg-lime {
  background-color: #7c74ae;
}

.bg-blue {
  background-color: #a2b3cc;
}

.bg-green {
  background-color: #91a0c9;
}

.bg-lightblue {
  background-color: #789dd0;
}

.bg-orange {
  background-color: tomato;
}

.box-entry h2::before {
  border-radius: 50%;
  border: 5px solid #000;
  display: inline-block;
  padding: 0 7px;
  background-clip: padding-box;
  margin-right: 7px;
  color: #000000;
}

.tm_gin h2::before { border-color: #ff9500; content: "G";}
.tm_yur h2::before { border-color: #c1a470; content: "Y";}
.tm_han h2::before { border-color: #8f76d6; content: "Z";}
.tm_mar h2::before { border-color: #f62e36; content: "M";}
.tm_hib h2::before { border-color: #b5b5ac; content: "H";}
.tm_nam h2::before { border-color: #00ac9b; content: "N";}
.tm_toz h2::before { border-color: #009bbf; content: "T";}
.tm_fuk h2::before { border-color: #9c5e31; content: "F";}
.tm_chi h2::before { border-color: #00bb85; content: "C";}

.tm_gin h2 .line-name { padding: 0 4px; background-color: #ff9500; color: #000000; }
.tm_yur h2 .line-name { padding: 0 4px; background-color: #c1a470; color: #000000; }
.tm_han h2 .line-name { padding: 0 4px; background-color: #8f76d6; color: #000000; }
.tm_mar h2 .line-name { padding: 0 4px; background-color: #f62e36; color: #000000; }
.tm_hib h2 .line-name { padding: 0 4px; background-color: #b5b5ac; color: #000000; }
.tm_nam h2 .line-name { padding: 0 4px; background-color: #00ac9b; color: #000000; }
.tm_toz h2 .line-name { padding: 0 4px; background-color: #009bbf; color: #000000; }
.tm_fuk h2 .line-name { padding: 0 4px; background-color: #9c5e31; color: #000000; }
.tm_chi h2 .line-name { padding: 0 4px; background-color: #00bb85; color: #000000; }

#railway-nav {
  background-color: inherit;
}

.nav-vertical .tm_gin { background-color: #ff9500; }
.nav-vertical .tm_yur { background-color: #c1a470; }
.nav-vertical .tm_han { background-color: #8f76d6; }
.nav-vertical .tm_mar { background-color: #f62e36; }
.nav-vertical .tm_hib { background-color: #b5b5ac; }
.nav-vertical .tm_nam { background-color: #00ac9b; }
.nav-vertical .tm_toz { background-color: #009bbf; }
.nav-vertical .tm_fuk { background-color: #9c5e31; }
.nav-vertical .tm_chi { background-color: #00bb85; }

.nav-vertical a:hover > span { background-color: #000000; color: #ffffff; }



.screen-sm {
  display: none;
}