html * {
  font-family: 'Copperplate', 'Copperplate Gothic Light', Balthazar;
}

.perm_title {
  font-size: 40px;
  text-align:center;
}

.perm_secondary {
  font-size: 20px;
  text-align:center;
  padding-left: 128px;
  padding-right: 128px;
  margin-bottom:10px;
}


header {
  background-color:#444;
}

.hg {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  background-color:black;
  color:white;
}

.hg-body {
  display: flex;
  flex-direction: column;
  padding: 1.5em;
}

.hg-content {
  margin: 1.5em 0;
}

.hg-nav {
  order: -1;
}

.hg-nav, .hg-ads {
  padding: 1em;
  border-radius: 3px;
  background-color:#555;
}


@media (min-width: 768px) {
  .hg-body {
    flex-direction: row;
    flex: 1;

    /* stupid IE10 tweener syntax */
    -ms-flex-preferred-size: auto;
  }
  .hg-content {
    // flex: 1;
    // the `flex` rule above should be applied but its causing
    // problems in IE10 and IE11. Not specifying a `flex` property
    // and using the `-ms-flex` property here seems to make it
    // work in all browsers for whatever reason
    -ms-flex: 1 1 auto;

    padding: 0 1.0em;
    margin: 0;
  }
  .hg-nav {
    flex: 0 0 9em;
  }
  .hg-ads {
    flex: 0 0 5em;
  }
}

.global-nav {
    width: 121px;
    float: left;
    background: black;
}

.global-subnav {
    width: 121px;
    background: #444;
}

.global-nav a {
    color: white;
    cursor: pointer;
    display: block;
    height: 40px;
    line-height: 40px;   
    text-indent: 0px;               
    text-decoration:none;
    font-weight: bold;
    width: 100%;
}

.global-nav ul{
    background: #555;
    padding: 0;
    margin: 0;
}

.global-subnav ul{
    background: orangered;
    position: relative;
    top: -10px;
    left: 0px;
}

.global-nav li{
    list-style: none;   
    border-bottom: #5C87B2 solid;
    border-width: 3px;
}

.global-nav li{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.global-nav ul ul li{
    display:none;
}

.global-nav li:hover {
    background: #fff;
  white-space: wrap;
}

.global-nav li:hover ul li{
    display:block;
}

.panthumb_container {
  position:relative;
}

.panthumb_container div {
  position: absolute;
  left: 5px;
  bottom: 2px;
  color: white;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3));
  text-decoration: none;
  white-space: nowrap;
  text-shadow: 4px 4px #000000;
  font: normal normal bold 30px 'Copperplate', 'Copperplate Gothic Light', Balthazar;
  padding: 5px;
  border-radius: 10px;
}