@charset "UTF-8";
body { 
  font-size: 16px;
  width: auto;
  margin: auto;
  padding: 0;
  h1, h2, h3, h4, h5, h6 { 
    margin-left: 2px; 
    margin-top: 0;
  }    
  figure { 
    margin-top: 0;
    margin-left: 0; 
    margin-bottom: 20px;
    text-align: left;
    }
  figcaption { 
    color:darkgrey;
    font:16px arial; 
    margin-left: 5px
  }
  img {
    margin-left: 2px;
    margin-right: 5px;
  }
  p {
    margin-left: 5px;
  }
}

header {
  background-color: white;
  text-align: left;
  ul {
    list-style: none; 
    margin: 0;
    padding: 0;
  }
  li {
    width:110px;
    float: left;
    margin-right: 1px;
    text-align: center;
  }
  a {
    display: block;
    padding: 8px;
    background-color: gray;
    color: #fff;
    text-decoration: none;
  }
}


.lfloat { float:left;}
  
.rfloat { float:right;}


.foot{
  display: flex;  
  width: 100%;
  justify-content: space-between;
}

.border-end{
  border-top: 2px solid #778899;
  border-bottom: 2px solid #778899;
}
.border-bottom {
  border-bottom: 2px solid #778899;
  padding: 8px;
}

.flexbox{
  display:flex;
  flex-direction: column;
}


.fut {
  background-color: hsla(75, 60%, 80%, 0.4);
}
.lab {
  background-color: hsla(150, 60%, 80%, 0.4);
}
.tea {
  background-color: hsla(225, 60%, 80%, 0.4);
}
.res {
  background-color: hsla(60, 60%, 80%, 0.4);
}
.lin {
  background-color: hsla(15, 60%, 80%, 0.4);
}

.asa {
  background-color: hsla(175, 60%, 80%, 0.4);
}
.kir {
  background-color: hsla(200, 60%, 80%, 0.4);
}


.top {
    ul {
    list-style: none; 
    margin: 0;
    padding: 0;
  }
  li {
    width:110px;
    float: left;
    text-align: center;
  }
  a {
    display: block;
    padding: 8px;
    background-color: gray;
    color: #fff;
    text-decoration: none;
  }
}
  
.run {
  a {
    margin-right: 10px;
    text-decoration: none;
  }
}