/* Hamlar orange:
  RGB 230/120/23
       e6/78/17
*/

:root {
  --hamlarorange2: #e67817;
  --backgroundColor: black;
  --textColor: #ddd;
  --navColor: #fff;

  --nextDayPadding: 10px;
  
  /*
  --navWidth: 12em;
  --mainWidth: min(48em, calc(100% - var(--navWidth)));
  --headerLineHeight: 3em;
  */
  --footertopmargin: 10px;
}

html {
	  background: var(--backgroundColor);
	  /*background: transparent url('../images/bg-muster.png') repeat left top;*/
}

body {
  background: var(--backgroundColor);
  color:      var(--textColor);
  font-family: Avenir, Arial, sans-serif; 
  min-height: 100vh;
  /*margin: 0;*/
  /*padding: 0;*/
  /*font-size: 100%;*/
  /*line-height: 1.5;*/
  /*color: #000;*/
  /*background: transparent url('../images/bg-muster.png') left top;*/
  /*padding: 0.5cm;*/
  /*position: absolute;*/
  /*left:50%;*/
  /*margin: 20px; /*0.5cm;*/
}

/* This one is for centered content with a maximum width. Well, and some padding. */
.mybody {
	  max-width: 60em;
	  margin: auto;
	  padding: 0.5cm;
}

header {
	  /*padding: 2em;*/
	  text-align: center;
}
	  
a {
	  color: var(--hamlarorange2);
}

a:hover,
a:focus {
    color: var(--hamlarorange2);
}

.welcome {
  text-align: center;
}

.welcome h2,
.welcome h3 {
  color: var(--hamlarorange2);
}


@page {
  /*margin: 20px; /*0.5cm;*/
}

/* Display next 7 days' events */

.nextdaygroup {
  display: table;
  /*margin-bottom: 10px;*/
}

.nextday {
  float: left;
  width: 100%;
  margin-bottom: 20px;
}

.nextday .date {
  display: table-row;
  float: left;
  width: 15em;
  background: var(--hamlarorange2);
  color: black;
  font-weight: bold;
  font-size: 120%;
  padding: 5px;
  border-radius: 10px 10px 0px 0px;
}

.nextday .desc {
  display: table-row;
  width: calc(100% - 2 * var(--nextDayPadding));
  display: inline-block;
  padding: var(--nextDayPadding);
  border: 2px solid var(--hamlarorange2);
  border-radius: 0px 10px 10px 10px;
}

.nextday .desc .title {
  font-weight: bold;
  font-size: 150%;
}

/* Display upcoming special events */

/* inline headline, currently not used */
.evt_head {
  color: var(--hamlarorange2) /*#f60*/;
  border-bottom-style: dotted;
  border-bottom-color: var(--textcolor) /*#fff*/;
  font-size: normal;
  font-weight: bold;
  width: 100%;
}

.evt_table {
}

.evt_day {
  border-bottom-style: inset;
  border-bottom-color: var(--hamlarorange2) /*#f60*/;
  /*color: var(--textcolor); */
  font-size: normal;
  font-weight: bold;
  padding: 5px;
  vertical-align: top;
  width: 4%;
}

.evt_date {
  border-bottom-style: inset;
  border-bottom-color: var(--hamlarorange2) /*#f60*/;
  /*color: var(--textcolor);*/
  font-size: normal;
  font-weight: bold;
  padding: 5px;
  vertical-align: top;
  width: 9%;
}

.evt_type {
  border-bottom-style: inset;
  border-bottom-color: var(--hamlarorange2) /*#f60*/;
  /*color: var(--textcolor);*/
  font-size: normal;
  font-weight: bold;
  padding: 5px;
  vertical-align: top;
  width: 9%;
}

.evt_title {
  border-bottom-style: inset;
  border-bottom-color: var(--hamlarorange2) /*#f60*/;
  /*color: var(--textcolor);*/
  font-size: normal;
  font-weight: bold;
  padding: 5px;
  vertical-align: top;
  width: 78%;
}

.upcoming {
  margin-top : 20px;
}



/* Social media */

.social {
}

.sm {
  background: black;
}

.sm ul {
  border: thin solid var(--hamlarorange2);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 0;
  margin-left: 0;
  padding-left: 0;
  /*border: thin solid white;*/
}

.sm li {
  list-style: none;
  display: inline-block;
}


.sm img {
  height: 40px;
  padding: 20px;
}


/* Footer */
footer {
  /*border-top: thin solid var(--hamlarorange2);*/
}

.flex-container {
    display: flex;
}

.flex-child {
    flex: 1;
    /*flex-direction: row;*/
}

.flex-child address {
    margin-top: var(--footertopmargin);
}

.flex-child ul {
    margin-top: var(--footertopmargin);
}
    
.flex-child li {
    list-style-type: none;
}