* {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
}

body {
  background-color: #fff;
  color: black;
}

h1 {
  color: black;
  font-size: 1.8em;
  font-weight: bold;
  padding-top: 40px;
  padding-bottom: 20px;
  font-family:Arial Narrow,Arial,sans-serif;
}

h2 {
  color: darkblue;
  font-size: 1.3em;
  font-weight: normal;
  padding-top: 15px;
  padding-bottom: 8px;
}
.no-line-space h2 {padding-top: 11px; padding-bottom: 11px;
}

p {padding:6px 0px;}
.no-line-space p {padding: 0px;}

li {list-style-position: outside; margin-left:12px}

table {
  border-spacing: 0px 0px;
}

th {
  text-align: left;
  padding-top: 10px;
  border: 10px;
}

td {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 0px 10px;
}

td:nth-child(1)      {border-left:  1px solid black;}
td:nth-last-child(1) {border-right: 1px solid black;}

td:nth-child(1)      {padding-right: 4px;}
td:nth-child(2)      {padding-left:  4px;}

.special   {background-color: #2c2;}
.concert   {background-color: #88f;}
.repetitie {background-color: #8f8;}
.vakantie  {background-color: #dd0;}

.tc-quote {
  background-color: #f5f5f5; /* light grey */
  border-left: 4px solid #ccc; /* optional decorative line */
  padding: 15px;
  margin: 20px 0;
  font-style: italic; /* optional */
  border-radius: 6px;
}

.grid {
  display: grid;
  grid-template-columns: 60px 1fr 1fr;
  grid-template-rows: auto auto auto auto auto auto 20px;
  grid-template-areas: 
  "logo     menu1     menu4"
  "logo     menu2     menu5"
  "logo     menu3     menu-end"
  "banner   banner    banner"
  "title    title     title"
  "page     page      page"
  "facebook instagram sponsor";
}

.logo        {grid-area:logo;     padding-top:20px;}
.banner      {grid-area:banner;   line-height: 0;}
.menu1       {grid-area:menu1;}
.menu2       {grid-area:menu2;}
.menu3       {grid-area:menu3;}
.menu4       {grid-area:menu4;}
.menu5       {grid-area:menu5;}
.menu-end    {grid-area:menu-end; background-color:black;}
.page        {grid-area:page;     line-height:140%; padding: 0px 4px;}
.sponsor     {grid-area:sponsor;  padding: 0px 0px; max-width:  40px;}
.sponsor img {max-width: 50px;  max-height: 50px;}
.facebook    {grid-area:facebook; padding:13px 15px; width:  40px;}
.instagram   {grid-area:instagram;  padding:14px 25px; width:  40px;}
.title       {grid-area:title;    font-size:1.8em; font-weight:bold; font-family:Arial Narrow,Arial,sans-serif; padding:15px 4px 10px 4px;}

.sponsor-in-page {max-width: 150px;}

.multi-col-75-25 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.multi-col-50-50 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.multi-col-25-75 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.multi-col-25-75-logo {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
}

.multi-col-25-25-50 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
}

.multi-col-50-25-25 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
}

.multi-col-25-25-25-25 {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
}

.foto-img     {padding: 5px 0px;}
.foto-caption {font-size:0.9em; font-style: oblique; }

.tc-menu {
  background-color: black;
  color: white;
  font-size: 1em;
  padding: 4px;
}

.tc-menu:hover {
  color:#000!important;
  background-color:#ccc!important
}


.tc-button{border:none;display:inline-block;padding:2px 2px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
.tc-button:hover{color:#000!important;background-color:#ccc!important}

.tc-menu-drop{position:relative;display:inline-block;cursor:pointer}
.tc-menu-drop:hover .tc-menu-sub{display:block}
.tc-menu-drop:hover > .tc-button:first-child{background-color:#ccc;color:#000}
.tc-menu-sub {cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
.tc-menu-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}

p img {margin-right: 4px; position: relative; top: 6px;}
.multi-col-50-50 img {width:100%;}
.multi-col-75-25 img {width:100%;}
.multi-col-25-75 img {width:100%;}
.multi-col-25-75-logo img {width:100%;}
.multi-col-25-25-50 img {width:100%;}
.multi-col-50-25-25 img {width:100%;}
.multi-col-25-25-25-25 img {width:100%;}


.song-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
  padding: 10px 20px;
  margin-bottom: 6px;
  border-radius: 6px;
}
.song-title {
  font-size: 16px;
}
.song-link {
  font-size: 14px;
  text-decoration: none;
  color: #0073e6;
  font-weight: bold;
}
.song-link:hover {
  text-decoration: underline;
}

.limited-img {
  max-width: 800px; /* or 100% for page width */
  height: auto;
  display: block;
  margin: 0 auto;
}


@media screen and (min-width:500px) {

  * {font-size: 12pt;}

  li {list-style-position: outside; margin-left:15px}

  .grid {
    display: grid;
    grid-template-columns: 1fr 100px 100px 50px 120px 130px 100px 130px 90px 1fr;
    grid-template-rows: auto auto 50px 50px auto ;
    grid-template-areas: 
    ". logo  logo  banner banner banner banner banner   banner    ."
    ". menu1 menu2 menu2  menu3  menu4  menu5  menu-end menu-end  ."
    ". title title title  title  title  title  sponsor  facebook  ."
    ". title title title  title  title  title  sponsor  instagram ."
    ". page  page  page   page   page   page   page     page      ." ;
  } 

  .logo        {padding-top:60px;}
  .page        {padding:10px 0px 30px 0px;}
  .title       {padding:30px 0px 15px 0px;}
  .sponsor     {padding:0px 0px; width:100px;}
  .sponsor img {max-width: 100px;  max-height: 100px;}
  .facebook    {padding:9px 0px; width:60px;}
  .instagram   {padding:5px 0px; width:60px;}
  .tc-menu     {padding-top:8px; padding-bottom:8px;}

  .sponsor-in-page {max-width: 350px;}

  .multi-col-75-25 {
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto;
  }

  .multi-col-50-50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .multi-col-25-75 {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
  }

  .multi-col-25-75-logo {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto;
  }

  .multi-col-25-25-50 {
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    grid-template-rows: auto;
  }

  .multi-col-50-25-25 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto;
  }

  .multi-col-25-25-25-25 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
  }

  .multi-col-75-25 {padding: 10px 0px;}
  .multi-col-50-50 {padding: 10px 0px;}
  .multi-col-25-75 {padding: 10px 0px;}
  .multi-col-25-75-logo {padding: 10px 0px;}
  .multi-col-25-25-50 {padding: 10px 0px;}
  .multi-col-25-25-25-25 {padding: 10px 0px;}

  /* image formating */
  .multi-col-50-50                     img {width:380px;border:1px solid white;box-shadow:0 0 5px 3px #bbb;}
  .multi-col-75-25 div:nth-child(1)    img {width:580px;border:1px solid white;box-shadow:0 0 5px 3px #bbb;}
  .multi-col-75-25 div:nth-child(2)    img {width:180px;border:1px solid white;box-shadow:0 0 5px 3px #bbb;}
  .multi-col-25-75 div:nth-child(1)    img {width:180px;border:1px solid white;box-shadow:0 0 5px 3px #bbb;}
  .multi-col-25-75-logo                img {width:180px;border:1px solid white;box-shadow:none;}
  .multi-col-25-75 div:nth-child(2)    img {width:580px;border:1px solid white;box-shadow:0 0 5px 3px #bbb;}
  .multi-col-25-25-50 div:nth-child(1) img {width:180px;border:1px solid white;box-shadow:0 0 5px 3px #bbb;}
  .multi-col-25-25-50 div:nth-child(2) img {width:180px;border:1px solid white;box-shadow:0 0 5px 3px #bbb;}
  .multi-col-25-25-50 div:nth-child(3) img {width:380px;border:1px solid white;box-shadow:0 0 5px 3px #bbb;}
  .multi-col-25-25-25-25               img {width:180px;border:1px solid white;box-shadow:0 0 5px 3px #bbb;}

  p img {margin-right: 4px; position: relative; top: 6px;}
}


.event-box-wrapper {
  max-width: 640px;       /* constrain to content band */
  margin: 0 auto;         /* center horizontally */
}

.event-box-wrapper-small {
  max-width: 480px;       /* constrain to content band */
  margin: 0;              /* align left */
}

.event-box {
  background-color: #3b0066;
  border-radius: 8px;
  padding: 16px;
  color: white;
  text-align: center;
}

.event-box h3 {
  margin-bottom: 12px;
  font-size: 1.2em;
}

.event-box img {
  display: block;
  margin: 0 auto 12px auto;
  width: 100%;           /* fill the wrapper width */
  max-width: 760px;      /* never exceed content width */
  height: auto;
  border-radius: 4px;
}

.event-box a {
  color: #ffccff;
  font-weight: bold;
  text-decoration: underline;
}

.event-box a:hover {
  color: #fff;
}