#banner {
    position: relative;
}

#banner-image {
    width: 100%;
}

#banner-shadow {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: rgba(0,0,0,0.7); /* 70% opacity background */
}

#banner-shadow p {
    font-size: xx-large;
    color: white;
    margin: 8px;
    margin-left: 64px;
}

#menu {
    background-color: gray;
    margin: 32px;
    padding: 16px;
}

#menu a {
    color: black;
    cursor: pointer;
}

#content-pane {
    margin-left: 64px;
    margin-right: 64px;
}

#article p {
    font-size: large;
}

#article h3 {
    font-weight: bold;
}

#article h4 {
    font-weight: bold;
}

#article .indent {
    margin-left: 5%;
}

#article .minor {
    margin-left: 10%;
    margin-right: 10%;
    font-style: italic;
}

#article-selection h3 {
    color: #337ab7;
    font-weight: bold;
    border-top: 3px solid #337ab7;
}

#article-date {
    margin-top: 16px;
    margin-bottom: 0;
}

#menu ul {
    list-style-type: none;
    font-size: large;
}

.advance-blue {
    background-color: #337ab7;
    color: white;
}

.read-more-label {
    display: inline-block;
    font-weight: bold;
    margin: 8px;
    cursor: pointer;
}

.read-more-label div {
    margin: 8px;
}

.article-box {
    position: relative;
    margin: 8px;
    cursor: pointer;
}

.article-box img {
    width: 100%;
}

.article-box-shadow {
    position: absolute;
    bottom: 0;
    min-height: 25%;
    max-height: 100%;
    width: 100%;
    background-color: rgba(26,61,141,0.5); /* 50% opacity background */
    ;
}

.article-box-date {
    position: absolute;
    top: 0;
    right: 0;
    font-weight: bold;
}

.article-box-date div {
    margin: 8px;
}

.article-box-shadow p {
    font-size: medium;
    font-weight: bold;
    color: white;
    margin: 8px;
}