/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification 
for details on configuring this project to bundle and minify static web assets. */

.text-muted {
    color: #999;
}
.text-small {
    font-size: 85%;
}
.text-label {
    font-weight: bold;
    margin-right: 0.2rem;
}
.spot-colour {
    color: #48A943;
}
.space-below {
    margin-bottom: 1.5em;
}
.space-after {
    margin-right: 0.2rem;
}
.bold {
    font-weight:bold;
}


.asset-image {
    max-width: 300px;
    /* drop shadow */
    -webkit-filter: drop-shadow(5px 5px 5px #666);
    filter: drop-shadow(5px 5px 5px #666);
}

#abstract {
    max-height: 150px;
    margin-bottom: 0.5rem;
}

.square-badge {
    font-size: 70%;
    background-color: #999;
    color: white;
    font-weight: bold;
    border-radius: 0.3rem;
    padding: 0.1rem 0.3rem;
    vertical-align: middle;
}
.round-badge {
    background-color: #48A943;
    font-size: 70%;
    color: white;
    font-weight: bold;
    border-radius: 0.5rem;
    /* width: 300px; */
    padding: 0.1rem 0.4rem;
    vertical-align: middle;
}
.email-address-icon {
    font-size: 90%;
    margin-right: 0.2rem;
    color: #777;
}
.email-address {
    color: #007bff;
}

/* foundation tabs look horrible */
.tabs {
    border: none;
    margin-bottom: 0.5rem;
}
.tabs > .tabs-title.is-active {
    /* use a box shadow instead of a border to keep the size of the div the same */
    -webkit-box-shadow:inset 0px -3px 0px 0px #777;
    -moz-box-shadow:inset 0px -3px 0px 0px #777;
    box-shadow:inset 0px -3px 0px 0px #777;
}
.tabs > .tabs-title > a {
    color: #666262;
    background-color: white;
    font-size: 95%;
    /* padding: 1rem 1.5rem; */
    outline: none; /* remove blue highlight when selected */
    margin-bottom: 3px;
}
.tabs > .tabs-title > a > i {
    font-size: 90%;
    margin-right: 0.3rem;
}
.tabs-content {
    border: none;
    padding: 1rem;
}
.tabs-content > .tabs-panel {
    padding: 0;
}
.tabs-content > .tabs-panel > ul {
    margin-left: 1.5rem;
}
.tabs-content > .tabs-panel > ul > li {
    margin-bottom: 0.5rem;
}

.keyword {
    color: #666262;
    white-space: nowrap;
    display: inline-block;
    background-color: #ddd;
    padding: 0.2em 0.4em;
    margin: 0 0.8em 0.45em 0;
    line-height: normal;
    border-left: 7px solid #48A943;
}
.keyword:hover {
    background-color: #ccc;
}
.keyword > i {
    font-size: 80%;
    padding-left: 0.2em;
}

.homepage-header {
    margin: 2rem 0 3rem 0;
}
.exemplar-list-header > h2 {
    text-align: center;
    font-size: 120%;
    font-weight: bold;
    border-bottom: 4px solid #48A943;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}
.exemplar {
    background-color: #ddd;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
}
.exemplar > a.button {
    margin-top: 1rem;
    width: 100%;
}
.exemplar-title {
    font-weight: bold;
    font-size: 120%;
    margin-bottom: 0.5rem;
}

.highlightable {
    padding: 0 0.5em 0 0.5em;
}
.highlighted .highlight-bar {
    max-width: 0.5em;
    height: 100%;
    background-color: #2d7a29;
}
.embedded-grid {
    width: 100%;
    display: inline-flex;
}