kartta.css

html {
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:14px;
  height:100%;
}

html,body,ul,ol,li,form,fieldset,legend,h1,h2,h3,h4,h5,h6,p,input {
  margin:0;
}

footer {
  flex: 0 1 auto;
}

footer {
  border-top: 1px solid black;
  padding-top: 5px;
  margin-top: 1px;
}

content {
  flex: 1 1 auto;
  overflow-y: auto;
}

body {
    overflow: hidden;
    display: flex;
    flex-flow: column;
    height: 100%;
    margin:0;
    padding:0;
}

/*
.size-to-content {
    flex: 0 1 auto;

  The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto

}

.fill-remaining {
  flex: 1 1 auto;
}
*/

h1,h2,h3 {
  font-weight:600;
  line-height:1.2
}

h1 {
  font-size:18px
}

a {
  color:#24d;
  text-decoration:none;
  -webkit-appearance:none;
  outline:0
}

a:hover {
  text-decoration:underline
}

header {
  margin: 0;
  padding: 0;
  line-height:1.6666;
  border-bottom:1px solid black;
  height:55px;
/*  position:relative; */
  z-index:1001;
  font-size:14px;
  display: flex;
  flex-flow: row;
}

header h1,
header nav,
header nav>ul,
header nav>ul>li,
header .dropdown {
  display:inline-block
}

.kartta-header-menu {
  margin-top: 4px;
  padding: 0;
  display: inline-block;
  width: 150px;
}

.kartta-header-content {
  flex: 1;
  margin: 0;
  padding: 0;
}



/*
header>* {
  height:100%;
  padding:10px
}

header h1,header nav.primary {
  float:left
}
*/

header a,header a:hover {
  text-decoration:none
}

header h1 {
  margin:0;
  padding-top:15px
}

header h1 a {
  color:#000
}

nav.secondary {
  position:absolute;
  right:0
}

nav.secondary>ul {
  vertical-align:middle
}

nav.secondary>ul a,nav.secondary>ul .dropdown-toggle {
  display:inline-block;
  text-decoration:none;
  color:#888;
  padding:5px
}

nav.secondary>ul a:hover {
  color: #484848;
}

#compact-secondary-nav {
  display:none
}

/*
#kartta-footer {
  flex: 0 1 auto;
  position: absolute;
  bottom: 0;
  margin-bottom: 5px;
  width: 100%;
}
*/

.kartta-overlay-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  margin-bottom: 5px;
}

.kartta-footer-inner0 {
  width: 100%;
  display: flex;
  justify-content: center;
}

.kartta-footer-inner1 {
  background-color: rgba(255,255,255,0.4);
  padding: 5px;
  border-radius: 5px;
}

.kartta-footer-item {
  display: inline-block;
}

.kartta-footer-separator {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
}

.kartta-content-wrapper {
  padding: 20px;
  width: 50%;
}

.kartta-content-wrapper h2 {
  margin-bottom: 15px;
}

.kartta-content-wrapper h3 {
  margin-bottom: 10px;
}

.kartta-content-wrapper h4 {
  margin-bottom: 10px;
}

.kartta-content-wrapper p {
  margin-bottom: 10px;
}

.timeslider-wrapper {
  padding: 5px;
}

#timeslider {
  display: inline-block;
  height: 55px;
  width: 100%;
  margin: 0;
}

.kartta-cta-element {
  font-weight: bold;
}