@import "../../../globals";

#namerow {
  height: 66pt;
}

.centercontents {
  text-align: center;
  margin-left: auto;
  margin-right: auto
}

#topname {
  //font-family: $mainFont;
  margin-top: 25px;
  padding-bottom: 9px;
  font-size: 80%;
  color: lighten(black, 90%);
  transition: font-size 0.15s ease, color 0.15s;
}

#topname.active {
  font-size: 100%;
  color: black;
  transition: font-size 0.40s ease, color 0.15s;
}

#topname #first {
  font-size: 250%
}

#topname #dot {
  line-height: 20pt;
  font-size: 600%;
}

#topname #last {
  font-size: 150%;
}

#topmenubuttons, #topname {
  //border-left: 1px solid black;
  //border-right: 1px solid black;
}

//this is the row below the name, will use this for styling
.row.below-name {
}

.pagetype {
  text-align: center;
  font-size: 200%;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  margin: 35px 30px 25px 30px;
}

#topmenubuttons {
  a {
    color: lightgrey;
  }

  a:hover {
    color: darkorange;
  }
}

#highlightedlink {
  color: gray;
  opacity: 0;
  //background-color: aqua;
  position: absolute;
  width: 100%;
  bottom: 0px;
  left: 0px;
  font-size: 89%;
  text-align: center;
  transition: opacity 0.5s ease-in-out;
}

#highlightedlink.active {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
