main.css

/* the first section of this CSS file contains general stylings regarding the page structure, especially for the navbar and footer */

/* using flexbox to create a "sticky footer" (one which is at the bottom of either the window or the content, whichever is lower)
I found help on this at various sources, most notably https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
and http://stackoverflow.com/questions/36899807/flexbox-sticky-footer-not-working-in-safari-or-chrome-osx */
 
html {
    height: 100%;
}

body {
	padding-top: 55px;
    font-family: 'Varela Round', sans-serif;
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1 0 auto; /* needed to fix "sticky footer" on Safari (in other browsers "flex: 1;" is enough) */
}

nav.navbar {
    font-family: 'Tangerine', cursive;
    font-size: 24px;
    background-color: #ddd;
}

nav .navbar-brand {
    font-size: 24px; /* this font-size needs to be kept relatively small or else it forces the navbar to spill onto 2 separate 
    lines on the narrowest phone screens - this is very bad when it is fixed to the top of what is already a small screed*/
}

footer {
    text-align: center;
    background-color: #ddd;
    padding: 10px;
    flex-shrink: 0; /* needed for Safari */
    margin-top: 20px;
}

/* make various headings throughout the site horizontally-centred, and in a more heading-friendly font */
h1.centre, h2.centre, h3.centre, h4.centre {
    font-family: 'Arimo', sans-serif;
    text-align: center;
}

/* common styles for various form and display elements */
.form-group.search, .home-text, #contact-form, #card-info {
    padding: 5px;
    border: 5px ridge blue;
    background-color: #e6f2ff;
}

/* card info box looks better with square corners, due to being just below the square table - but all others have rounded corners: */
.form-group.search, .home-text, #contact-form {
     border-radius: 15px;
}

/* custom link colours - also applied to popover triggers, which should function as much like links as possible */
a, .glossary-item {
    color: #e68a00;
}

a:hover, a:active, .glossary-item:hover {
    color: #cc0;
}

a:visited {
    color: #b36b00;
}

.glossary-item:hover {
    text-decoration: underline;
    cursor: pointer;
}

/* give grid elements equal heights on links and home pages. Adapted from http://codepen.io/bootstrapped/details/RrabNe/ */
.equal-height-columns {
    display: flex;
    flex-wrap: wrap;
    margin: 20px 0;
} 

/* the following is needed to fix the layout on Safari. Adapted from http://codepen.io/bootstrapped/details/RrabNe/ */
.equal-height-columns:before, .equal-height-columns:after {
    display: flex;
    flex-wrap: wrap;
}

/* general rules for all card images on small screensL */
.card-image.portrait {
    width: 150px;
}

.card-image.landscape {
    width: 249px;
}

/*******************************************************************************************************************************/

/* the next section concerns the homepage */

/* use Flexbox to get both paragraphs and images (links) on homepage centred in both directions */
.home-text, .home-image a {
    margin: 10px auto; /* 10px margin gives a little more "breathing room" to these elements */
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-text {
    flex-direction: column; /* necessary to make headings paragraphs appear beneath each other within each box */
}

.mobile-hidden {
    display: none; /* used to hide one of the homepage card images for more mobile-friendly layout*/
}

/*******************************************************************************************************************************/

/* the next section concerns the search page */

/* get cost dropdowns on search form to display inline, not too high or too wide, but wide enough to allow numbers to be seen 
on all devices */
select.form-control {
	display: inline-block;
	width: 60px;
	height: 25px;
}

/* get dropdowns on a new line from their subtitles on search form */
label.form-subtitle {
	display: block;
}

/* left-justify checkbox groups when they spill to more than one line, and also keep each label apart from the following checkbox */
.form-group .checkbox-inline {
	margin-left: 0px;    
    margin-right: 12px;		
}

/* give search form buttons their own line and sufficient space above and between */
.search-form-button {
    display: inline-block;
    margin: 5px 2px;
}

/* right-justify "show/hide" buttons for each search form section - and allow space above and below */
.show-or-hide {
    float: right;
    margin-bottom: 15px;
    margin-top: auto;
}

/* use flexbox again for search results page - in particular this centres the landscape cards relative to the portrait ones,
and centres images on the screen on mobile devices with a single-column display */
.separate-scroll-results {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* card search results should to be in grid format */
.search-results {
    display: inline-block;
    padding: 5px;
}

/* Left margin on buttons at bottom of search form - to line up with other buttons, and with each other on small screens 
Also allow room below, which is irrelevant in a 2-column display, but looks better on mobile devices */
.bottom-buttons {
    margin-left: 10px;
    margin-bottom: 40px;
}

.bottom-button {
    margin-right: 10px;
}

/* set minimum height for each search field */
.form-group.search {
    min-height: 50px;
}

/*******************************************************************************************************************************/

/* the next section concerns the pages for individual cards */

/* give sufficient space between the "card discussion" box and the link below */
#card-info {
    margin-bottom: 20px;
}

/* indent Dominion Strategy Wiki link to be level with the text above in the table and discussion box */
a.wiki-link {
    display: block;
    margin-left: 10px;
}

/* card image should be centred horizontally, and pushed down from text above */
.single-card {
    display: block;
    margin: 20px auto;
}

/* styling for the table giving general card information:; */
.card-table {
    background-color: #e6f2ff;
    border: 3px solid #00254d;
    margin: 30px 0;
}

.card-table tr.alternate {
    background-color: #b3d7ff;
}

/*******************************************************************************************************************************/

/* the next section concerns the links page */

/* slightly different styling for the columns, because it doesn't seem possible to put space between the borders, 
so a narrow border looks best*/
.link-group {
    padding: 5px;
    border: 1px solid blue;
    border-radius: 15px;
    background-color: #e6f2ff;
}

/* The following rule applies to one element - the short paragraph at the bottom of the links page. I felt it important 
to centre this text on the screen. */
p.centre {
    text-align: center; 
}

/*******************************************************************************************************************************/

/* the next section concerns the contact form */

/* the contact form (or rather its containing div) should have a reasonable gap from the edge of the page */
#contact {
    margin: 0 30px;
}

#contact-form {
    margin-top: 20px;
}

/* styling for messages showing an invalid form submission */
.invalid-form {
    color: red;
    font-weight: bold;
    padding: 5px 0;
}

/* use Angular-specific CSS classes to make the form inputs red when they are not yet valid for submission */
#contact-form input.ng-invalid.ng-dirty, #contact-form textarea.ng-invalid.ng-dirty {
    border: 1px solid red;
    background-color: #ffe6e6;
}

/* give a green border when the input is valid, as visual cue to the user */
#contact-form input.ng-valid, #contact-form textarea.ng-valid {
    border: 2px solid green;
}

/*******************************************************************************************************************************/

/* media query for styling differences on "large" screens (any larger than a standard phone screen) */

@media (min-width: 768px) {
    /* make navbar text large enough to have the necessary visual impact, now that there are no restrictions due to lack of
    horizontal space*/
    nav.navbar {
        font-size: 28px;
    }

    nav .navbar-brand {
        font-size: 36px;
    }

    /* increase card image size back to "normal" */
    .card-image.portrait {
        width: 200px;
    }

    .card-image.landscape {
        width: 332px;
    }

    /* cause correct layout on homepage, by hiding and revealing the relevant images */
    .mobile-hidden {
        display: block;
    }

    .mobile-display {
        display: none;
    }

    /* centre homepage images both horizontally and vertically within their containing div */
    .home-image {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* these screens are large enough to use 2 columns on the search page, and it is MUCH better UX to  allow them to 
    scroll separately */
    .separate-scroll-form {
        overflow: auto;
        height: 90vh;
    }

    .separate-scroll-results {
        overflow: auto;
        height: 85vh;
    }
    
    /* correct margin for card image on card page, so that its top lines up with the top of the card info table */
    .single-card {
        margin-top: 90px;
    }
}