body {
  background-color: #313131;
  font-family: 'Open Sans', sans-serif;
  margin: 0;
}

  a {
    font-weight: bold;
    text-decoration: none;
	color: #4981c7;
	text-shadow: 0px 0px 5px #00000094;
  }

  a:active, a:visited {
    //color: #004294;
    color: #4981c7;
  }

  .outer-container {
    height: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
  }

    .inner-container {
      background-color: #eee;
      background-size: 100% 100%;
      box-shadow: 3px 0 10px #000;
      display: table;
      height: 100vh;
      margin: 0 auto;
      position: relative;
      text-align: left;
      width: 100%;
    }

      header {
        color: #fff;
        min-height: 119px;
        position: relative;
      }

        header .text-logo {
          display: inline-block;
          margin: 37px 0 10px 10px;
        }

        header .logo-image {
          margin: 3px;
        }

        nav {
          float: right;
          margin-top: 35px;
          font-size: 115%;
          font-weight: bold;
        }

          nav ul {
            list-style: none;
            margin: 0;
            padding: 0;
          }

            nav ul li {
              display: inline-block;
              padding: 0 30px;
            }

              nav ul li a {
                color: #fff;
                text-decoration: none;
              }

                nav ul li a:active, nav ul li a:visited {
                    color: #fff;
                }

      .main-content-area {
        padding: 40px;
        position: relative;
      }

        main {
          clear: both;
          display: inline-block;
          float: left;
          width: 60%;
        }

          main .tile-body {
            min-height: 400px;
          }

        aside {
          display: block;
          float: left;
          position: relative;
          width: 40%;
        }

          aside .tile-foreground {
            min-height: 100px;
          }

        .main-content-area .tile-foreground,
        .main-content-area .tile-header-foreground {
          padding-left: 30px;
          padding-right: 30px;
        }

        .main-content-area .tile-foreground {
          padding-top: 15px;
        }

    .footer {
      clear: both;
      color: #fff;
      margin: 90vh auto 0 auto;
      position: relative;
      text-align: left;
    }

      footer {
        padding: 15px 5px;
      }

      .debug-area {
        background-color: #000;
        color: #008000;
        padding: 15px 20px;
      }

/* Input Styles */
input, textarea {
  background-color: #313131;
  border: none;
  color: #fff;
  min-height: 30px;
  opacity: 0.5;
  padding: 6px 10px;
  width: 100%;
}

  input:focus, textarea:focus {
    opacity: 0.6;
    outline: none;
    box-shadow: 0 0 7px #004294;
  }

textarea {
  resize: none;
  width: 100% !important;
}

/* Button Styles */
button {
  background-color: #0364a1; // #005c96;
  border: none;
  box-shadow: 2px 2px 5px #292929;
  color: #fff;
  outline: none;
  padding: 10px 18px;
}

  button:hover {
    background-color: #0b6dac;
  }

  button:active {
    box-shadow: 1px 1px 5px #292929;
    position: relative;
    left: 1px;
    top: 1px;
  }

/* Opaque Tile, Header & Footer Styles */
.tile, .tile-body, .tile-header {
  color: #fff;
  margin: 15px;
  position: relative;
}

.tile-body {
  margin-top: 0;
}

  .tile-body .article-info,
  .tile-body .icons,
  .tile-body .pager,
  .tile-body .page-header {
    display: none;
  }

.tile-header {
  margin-bottom: 0;
}

.tile-header-background {
  background-color: #005c96;
  bottom: auto;
  height: 100%;
  left: auto;
  opacity: 0.8;
  position: absolute;
  right: auto;
  top: auto;
  width: 100%;
}

.tile-background,
.header-background,
.footer-background {
  background-color: #000;
  bottom: auto;
  height: 100%;
  left: auto;
  opacity: 0.4;
  position: absolute;
  right: auto;
  top: auto;
  width: 100%;
}

.tile-foreground,
.tile-header-foreground,
.header-foreground,
.footer-foreground {
  padding: 5px 15px;
  position: relative;
  word-wrap: break-word;
}

  /* Transition Effect */
  .tile-foreground,
  .tile-header-foreground {
    -webkit-animation: fadein 1.5s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1.5s; /* Firefox < 16 */
    -ms-animation: fadein 1.5s; /* Internet Explorer */
    -o-animation: fadein 1.5s; /* Opera < 12.1 */
    animation: fadein 1.5s;
  }

  @keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }

  /* Firefox < 16 */
  @-moz-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }

  /* Safari, Chrome and Opera > 12.1 */
  @-webkit-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }

  /* Internet Explorer */
  @-ms-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }

  /* Opera < 12.1 */
  @-o-keyframes fadein {
      from { opacity: 0; }
      to   { opacity: 1; }
  }


/* JU Contact Modifications*/
#juct-container-1 form {
  margin-top: 20px;
}

  #juct-container-1 .input-group {
    margin-bottom: 5px;
    margin-top: 20px;
    width: 100%;
  }

    #juct-container-1 .input-group input {
      background-color: #313131;
      border: none;
      border-radius: 0;
      color: #fff;
      margin-right: 30px;
      max-width: 200px;
      width: 100%;
    }

      #juct-container-1 .input-group input:focus {
        box-shadow: 0 0 7px #004294;
      }

  #juct-container-1 label {
    font-weight: normal;
    text-align: left;
  }

  .jubootstrap .btn-default {
    background-color: #0364a1;
    background-image: none !important;
    border: none;
    border-radius: 0;
    box-shadow: 2px 2px 5px #292929;
    color: #fff;
    height: 20px;
    outline: none;
    padding: 10px;
    position: static;
    text-shadow: none;
    width: 40px;
  }

    .jubootstrap .btn-default:hover {
      background-color: #0b6dac;
      color: #fff;
    }

    .jubootstrap .btn-default:active {
      background-color: #0b6dac !important;
      background-image: none !important;
      box-shadow: 1px 1px 5px #292929;
      color: #fff !important;
      left: 1px;
      position: relative;
      top: 1px;
    }

    .jubootstrap .btn-default::after {
      content: "\02938";
    }

    .jubootstrap .btn-default .fa-refresh {
      font-style: normal;
    }

  .jubootstrap .label {
    border-radius: 0;
  }

/* Mobile Styles */
@media screen and (max-width: 820px) {
  .inner-container {
    background-size: cover;
  }

    .main-content-area {
      padding: 0;
    }

      main, aside {
        width: 100%;
      }

  .tile {
    margin-top: 0px;
  }
}

@media screen and (max-width: 760px) {
  nav {
    float: none;
    font-size: 91%;
    margin-top: 5px;
    text-align: right;
  }

    nav ul li {
      padding: 0 7px 10px 7px;
      text-align: center;
    }
}