/* Copyright (C) 2017 Marcus Fedarko, Jay Ghurye, Todd Treangen, Mihai Pop
 * Authored by Marcus Fedarko
 *
 * This file is part of MetagenomeScope.
 *
 * MetagenomeScope is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * MetagenomeScope is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with MetagenomeScope.  If not, see <http://www.gnu.org/licenses/>.
 */

body {
    /* CODELINK: General body styling (with the exception of the vertical
     * padding) adapted from http://bettermotherfuckingwebsite.com/, c/o
     * Drew McConville and Gabe Hammersmith. */
    /* This has a top/bottom margin of 2em; the "auto" centers the body
     * horizontally. */
    margin: 0 auto;
    max-width: 50em;
    /* The top padding ensures that the navbar won't cover the title.
     * (This is advised by the Bootstrap navbar docs.)
     */
    padding: 40px 1em;
    color: #333;
}
/* CODELINK: This workaround ensures that the navbar won't cover headers when
 * it jumps to them. The negative margin gets rid of the resulting empty space
 * created by the increased padding, preserving the original look of the page.
 * This general solution is described in a lot of places online, but I'm pretty
 * sure my implementation here was inspired by Method C in Nicolas Gallagher's
 * tutorial here:
 * http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/#method-C
 */
h2 {
    padding-top: 60px;
    margin-top: -60px;
}
nav li:hover {
    background-color: #ddddec;
}
.thumbnail img {
    cursor: pointer;
}
.thumbnail hr {
    margin-bottom: 0;
}
/* This border color matches the default Bootstrap CSS on .thumbnail eles. */
.thumbnail:hover {
    border: 1px solid #337ab7;
}

/* Override Bootstrap's default styling for links below the nav (instead of
 * applying the underline only on :hover, always apply it). This helps
 * colorblind users identify links: see
 * https://www.smashingmagazine.com/2016/06/improving-color-accessibility-for-color-blind-users/#5-link-recognition
 * for details (that article was the impetus for this change).
 */
#stuffbelowthenav a {
    text-decoration: underline;
}

.caption {
    text-align: center;
}

.dotname {
    font-style: italic;
}

.highlighted-features > li {
    margin-bottom: 1em;
}