//  Evolutility-UI-jQuery :: header.css

//  https://github.com/evoluteur/evolutility-ui-jquery
//  (c) 2017 Olivier Giulieri

/* --- header, navbar, content and footer --- */

@import "sass/variables";

$width-toolbar-left: 170px;
$width-toolbar-top: 620px;

// --- top navbar ---
.evo-logo{
  float:left;
  line-height: 30px;
  font-size: 2em;
  margin: 10px 80px 20px 10px;

  >a{
    line-height: 24px;
    text-decoration: none;
    color: #ffc107 !important;
    &:hover{
      color:$color-cool !important;
      >span{
        color:#ffc107;
      }
    }

    >span{
      color:white;
    }
  }

  @media print {
    a[href]:after {
      content: none !important;
    }
  }
}
.logop1,.logop3{
  font-weight: bold;
  color:white;
}
.logop2{
  font-weight: bold;
  color: #ed991a;
}

.evo-header{
  position: absolute; // fixed;
  top:0;
  left:0;
  //opacity: .9;
  overflow: none;
  background-color: $color-navbar;
  //border-bottom: #366092 solid 1px;
  min-height: 75px;
  width:100%;
  min-width: $width-toolbar-top;
  padding:2px 5px 2px 10px;
  z-index: 1001;
  //-webkit-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  //-moz-box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  //box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);

    a{
      color:$color-header-link;
      text-decoration: none;

      &:hover{
        color:$color-header-link;
      }
    }

  @media only screen and (min-width: $screen2) {
  position: fixed;
    width:$width-toolbar-left;
    min-width:$width-toolbar-left;
    height:100%;
  }

}

.evo-head-links,
.evo-head-links2{
  display: block;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  @media only screen and (max-width: $screen2) {
    flex-direction: row;
  }
  >div{
    margin-left:10px;
  }
  >li{
    display: inline;
    padding:0 10px;
  }
  a{
    text-decoration: none;
    &:hover{
      color:$color-header-link-hover;
    }
    &.sel{
      color: white;
    }
  }
  @media print{
    display: none;
  }
}
.evo-link2{
  li li{
      margin-left:-12px;
  }
  @media only screen and (max-width: $screen2) {
    margin-left: 30px;
    order: 100;
    width:100%;
    li ul{
        display: none;
    }
  }
}
.evo-head-links2 {
  .sel{
    color: #ffc107;
  }
}
.evo-head-links{
  font-size: 1.5em;
  margin-top:5px;
  margin-left:-40px;
  >li.spaced{
    margin-top:50px;
    @media only screen and (max-width: $screen2) {
      margin-top:0;
      margin-left:30px;
    }
  }
}

.evo-head-links2{
  font-size: .7em;
  margin: 0 5px 0 -40px;
  @media only screen and (min-width: $screen2) {
    margin: 0 0 10px;
    padding:0;
    >li{
      display:block;
    }
  }
}

// --- page title ---
.evo-title,.evo-title2{
  background-color: $color-navbar;
  position: absolute; //fixed;
  z-index: 1002; // above bootstrap dropdown
  width: 100%;
  overflow: hidden;
  >h1{
    margin-left: 16px;
    color:white;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: $weight-label;
  }
  @media only screen and (min-width: $screen2) {
    width: calc(100% - 170px);
    top:0 !important;
    margin-left: $width-toolbar-left;
    //background-color: white;
    >h1{
      margin-left: 0;
    //  color: $color-text;
    }
  }
}

.evo-title{
  top: 65px;
  padding:20px 10px;
  min-height: 120px;
}
.evo-title2{
  top: 65px;
  padding:5px 10px;
  z-index: 1001;
}

// --- content ---
.evo-content{
  padding: 85px 30px 30px;
  margin-top: 10px;
  @media only screen and (min-width: $screen2) {
    margin-left: $width-toolbar-left;
    padding-top: 10px;
  }
}
.evo-content2{
  padding: 150px 30px 30px;
  margin-top: 10px;
}

@media only screen and (min-width: $screen2) {
  .evo-content2{
    margin-left: $width-toolbar-left;
    padding-top: 85px;
  }
  //.evo-anchor{
  //  top:-65px !important;
  //}
}
//.evo-anchor{
  //position:relative;
  //top:-140px;
//}

$height-footer: 120px;
.evo-page{
  min-height: 100%;
  margin-bottom: -$height-footer; 
  &:after {
    content: "";
    display: block;
  }
}

// --- footer ---
.footer{
  padding-top:80px;
  height:$height-footer;
	text-align: center;
	font-size:smaller;
  color:$color-text-footer;
  a{
    color:$color-text-footer;
  }
}
