@charset "utf-8";
/*  
	CSS - Colorado Projectile Point Database
    https://p3.coalcreekresearch.org
*/

/* Merriweather Sans Serif fonts */

@font-face {
    font-family: 'Merriweather Sans Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Merriweather Sans Regular'), url('MerriweatherSans-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Merriweather Sans Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Merriweather Sans Italic'), url('MerriweatherSans-Italic.woff') format('woff');
}

@font-face {
    font-family: 'Merriweather Sans Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Merriweather Sans Bold'), url('MerriweatherSans-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Merriweather Sans Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Merriweather Sans Bold Italic'), url('MerriweatherSans-BoldItalic.woff') format('woff');
}

/* Merriweather Serif fonts */

@font-face {
    font-family: 'Merriweather Light';
    font-style: normal;
    font-weight: normal;
    src: local('Merriweather Light'), url('Merriweather-Light.woff') format('woff');
}

@font-face {
    font-family: 'Merriweather Light Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Merriweather Light Italic'), url('Merriweather-LightItalic.woff') format('woff');
}

@font-face {
    font-family: 'Merriweather Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Merriweather'), url('Merriweather-Regular.woff') format('woff');
}

@font-face {
    font-family: 'Merriweather Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Merriweather Italic'), url('Merriweather-Italic.woff') format('woff');
}

@font-face {
    font-family: 'Merriweather Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Merriweather Bold'), url('Merriweather-Bold.woff') format('woff');
}

@font-face {
    font-family: 'Merriweather Bold Italic';
    font-style: normal;
    font-weight: normal;
    src: local('Merriweather Bold Italic'), url('Merriweather-BoldItalic.woff') format('woff');
}

/* Open Sans condensed font */

@font-face {
    font-family: 'Open Sans Condensed Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Open Sans Condensed Bold'), url('OpenSans-CondBold.woff') format('woff');
}

/* Fira Sans condensed font */

@font-face {
    font-family: 'Fira Sans Condensed Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Fira Sans Condensed Medium'), url('FiraSansCondensed-Medium.woff') format('woff');
}

/* Fira Sans condensed font */

@font-face {
    font-family: 'Fira Sans Condensed Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Fira Sans Condensed Bold'), url('FiraSansCondensed-Bold-webfont.woff') format('woff');
}

/* Content styles */

body {
    margin: 0;
    padding: 0;
    background-image: url("../p3-images/background1.png");
    background-repeat: repeat;
    font-family: 'Merriweather Sans Regular', Verdana, sans-serif;
    font-size: 16px;
}

p {
	line-height: 21px;   /* within paragraph */
	margin-top: 8px; /* between paragraphs */
	margin-bottom: 10px; /* between paragraphs */
}

p.table-map-p {
	line-height: 4px;   /* within paragraph */
	margin-top: 0px; /* between paragraphs */
	margin-bottom: 0px; /* between paragraphs */
}

ul {
    line-height: 24px;
}


h1 {
    color: darkred;
    font-family: 'Merriweather Bold', Georgia, serif;
    font-size: 18px;
    line-height: 18px;
    letter-spacing: 1px;
}

h2 {
    color: navy;
    font-family: 'Merriweather Bold', Georgia, serif;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 1px;
}

h3 {
    color: black;
    font-family: 'Merriweather Bold', Georgia, serif;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 1px;
}

strong {
    font-family: 'Merriweather Sans Bold';
}

em {
    font-family: 'Merriweather Sans Italic';
}

hr {
    align-self: center;
}

img {
    max-width: 100%;
    height: auto;
}

/* Thumbnails for Home page and Search results */

img.thumbnail {
    width: 196px;
    height: auto;
    border-style: outset;
    border-color: silver;
    border-width: 5px;
}

/* Links for text within the body content */

a:link {
    text-decoration: underline;
    color: mediumblue;
}

a:visited {
	text-decoration: underline;
    color: darkviolet;
}

a:hover {
    background-color: lightblue;
}

/* Classes -- custom styles */

.MerriweatherRegular {
    font-family: 'Merriweather Regular', serif;
    font-size: 16px;
    line-height: 21px;
}

.MerriweatherItalic {
    font-family: 'Merriweather Italic', serif;
    font-size: 16px;
    line-height: 21px;
}

.MerriweatherLight {
    font-family: 'Merriweather Light', serif;
    font-size: 16px;
    line-height: 21px;
}

.MerriweatherSansBold {
    font-family: 'Merriweather Sans Bold', sans-serif;
    font-size: 16px;
    line-height: 21px;
}

.OpenSansCondensedLight {
    font-family: 'Open Sans Condensed Light', sans-serif;
    font-size: 16px;
    line-height: 24px;
}

.OpenSansCondensedBold {
    font-family: 'Open Sans Condensed Bold', sans-serif;
    font-size: 16px;
    line-height: 24px;
}

.FiraSansCondensedMedium {
    font-family: 'Fira Sans Condensed Medium', sans-serif;
    font-size: 16px;
    line-height: 24px;
}

.FiraSansCondensedBold-SM {
    font-family: 'Fira Sans Condensed Bold', sans-serif;
    font-size: 9px;
    line-height:9px;
}

.FiraSansCondensedMedium-SM {
    font-family: 'Fira Sans Condensed Medium', sans-serif;
    font-size: 9px;
    line-height:9px;
}

.centerText {
    text-align: center;
}

.centerBox {
    /* Center an element (not text) horizontally */
  margin: 0 auto;
  width: 100%;
}

.centerElement {
    /* Center an element (with text or items) horizontally and vertically within a Flex div */
    display: flex;
    justify-content: center;
    align-items: center;
}

.centerThumbnails {
    /* Center the thumbnail images horizontally within a Flex div */
    /* Home page */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
    align-items: center;
}

.row {  
  display: flex;
  flex-wrap: wrap;
}

.navigation {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0 15px;
    background-color: wheat;
    border: 2px solid navy;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    -moz-box-shadow: 5px 5px 5px gray;
}

.navLink a:link {
    text-decoration: none;
    display: block;
    margin: 0 10px;
    padding: 6px 0;
    color: navy;
}

.navLink a:visited {
    background-color: inherit;
    color: darkviolet;
    cursor: default;
}
.navLink a:hover {
    text-decoration: underline;
    background-color: silver;
    color: darkred;
}

/* MENU CLASSES for <body> tag on each web page that shows in the menu */
/* style is for the currently selected menu item */
.home a.home,
.about a.about,
.contact a.contact,
.resources a.resources,
.reports a.reports,
.register a.register,
.signin a.signin
{
    font-family: 'Merriweather Sans Bold';
    color: darkred;
    pointer-events: none;
    text-decoration: none;
    cursor: default;
}

@media all and (max-width: 600px) {
    .navigation {
        justify-content: space-around;
    }
}

@media all and (max-width: 600px) {
    .navigation {
        flex-flow: column wrap;
        padding: 0;
    }

    .navigation a {
        text-align: center;
        padding: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }

    .navigation li:first-of-type a {
        border-top: none;
    }
    
    .navigation li:last-of-type a {
        border-bottom: none;
    }
}

/* GALLERY container for thumbnails returned from Grid Number Search */
/* BIG SCREENS */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 12px 10px;  /*first sets the row-gap and the second sets the column-gap*/
    max-width: 100%;
}

/* SMALL SCREENS */
@media screen and (max-width: 600px) {
    .gallery {
        /* 1 IMAGE PER ROW */
        grid-template-columns: repeat(1, auto);
    }
}

/* THUMBNAILS for User Search Results */
.gallery img {
    width: 196px;
    height: auto;
    cursor: default;
    object-fit: none;
    display: block;
    border-style: outset;
    border-color: silver;
    border-width: 5px;
}

/* FIGURE and CAPTION */
.gallery figure {
    margin: auto;
}

.gallery figureCaption {
    font-family: 'Open Sans Condensed Bold', sans-serif;
    font-size: 14px;
    color: black;
}

/* Use the same text styling for the "Download" link as text, as in Gallery above, but color is green */
.downloadLink {
    font-family: 'Open Sans Condensed Bold', sans-serif;
    font-size: 14px;
    color: green;
}

/* Add a color to the unvisited, visited link */
.galleryLink a:link {
    text-decoration: none;
    color: green;
}

/* Add a color to the unvisited, visited link */
.galleryLink a:visited {
    text-decoration: none;
    color: darkred;
}

/* Add a style to the mouse over link */
.galleryLink a:hover {
    text-decoration-line: underline;
    text-decoration-style: wavy;
    background-color: lightgreen;
    border-radius: 5px;
}

/* Add a color to the selected link */
.galleryLink a:active {
    text-decoration: none;
    color: blue;
}

/* For CSV file Download and other general buttons */

.defaultButton a:link, .defaultButton a:visited {
    padding: 5px 12px;
    font-family: 'Merriweather Sans Regular';
    font-size: 16px;
    color: navy;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: thistle;
    display: inline-block;
    border: 2px solid mediumorchid;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    -moz-box-shadow: 5px 5px 5px gray;
}

.defaultButton a:hover {
  background-color: wheat;
  color: saddlebrown;    
}

/* Style the Sign Out button */

.form-signout button {
	padding: 5px 12px;
	font-family: 'Merriweather Sans Regular';
	font-size: 16px;
	color: navy;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: lightblue;
	display: inline-block;
	border: 2px solid slateblue;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	box-shadow: 5px 5px 5px gray;
	-webkit-box-shadow: 5px 5px 5px gray;
	-moz-box-shadow: 5px 5px 5px gray;
}

.form-signout button:hover {
  background-color: wheat;
  color: saddlebrown; 
}

/* SEARCH FORM styles */

/* MAIN - style all SEARCH Form containers - stack form vertically */
div.userSearchContainer {
	width: 50%;
	border: 1px solid gray;
	background-color: silver;
	padding: 0 20px 20px 20px;
	border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    -moz-box-shadow: 5px 5px 5px gray;
}

/* Style the Latitude - Longitude form */
.form-lat-long {
    display: flex;
    flex-flow: row wrap;
	align-content: space-between;
    align-items: center;
    margin: auto;
    grid-gap: 15px 20px;  /*first sets the row-gap and the second sets the column-gap*/
    max-width: 100%;
}

/* Add some margins for each label */
.form-lat-long label {
    display: block;
    font-family: 'Open Sans Condensed Bold', sans-serif;
    font-size: 16px;
    color: black;
}

/* Style the input field - INPUT */
.form-lat-long input {
	width: 128px;
	padding: 8px 15px;
	margin: 2px 0 10px 0;
	display: block;
	border: 2px solid gray;
	background-color: linen;
	border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	box-sizing: border-box;
	-webkit-transition: 0.25s;
    transition: 0.25s;
}

.form-lat-long input:focus {
	border: 2px solid mediumblue;
	background-color: lavender;
}

/* Style the input field - SELECT */
.form-lat-long select {
	width: 150px;
	padding: 8px 15px;
	margin: 2px 0 10px 0;
	display: block;
	border: 2px solid gray;
	background-color: linen;
	border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	box-sizing: border-box;
	-webkit-transition: 0.25s;
    transition: 0.25s;
}

.form-lat-long select:focus {
	border: 2px solid mediumblue;
	background-color: lavender;
}

/* Style the Submit and Reset buttons */
.form-lat-long button {
    padding: 5px 12px;
    font-family: 'Merriweather Sans Regular';
    font-size: 16px;
    color: navy;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: thistle;
    display: inline-block;
    border: 2px solid mediumorchid;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    -moz-box-shadow: 5px 5px 5px gray;
}

.form-lat-long button:hover {
    background-color: wheat;
    color: saddlebrown;  
}

/* Style the Grids form - inline, display items horizontally */
.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin: auto;
    grid-gap: 15px 20px;  /*first sets the row-gap and the second sets the column-gap*/
    max-width: 100%;
}

/* Add some margins for each label */
.form-inline label {
    display: block;
    font-family: 'Open Sans Condensed Bold', sans-serif;
    font-size: 16px;
    color: black;
}

/* Style the input fields */
.form-inline input {
    vertical-align: bottom;
	border: 2px solid gray;
	background-color: linen;
    padding: 6px 8px;
    box-sizing: border-box;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-transition: 0.25s;
    transition: 0.25s;
    outline: none;
}

.form-inline input:focus {
	border: 2px solid mediumblue;
	background-color: lavender;
}

/* Style the Submit and Reset buttons */
.form-inline button {
    padding: 5px 12px;
    font-family: 'Merriweather Sans Regular';
    font-size: 16px;
    color: navy;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: thistle;
    display: inline-block;
    border: 2px solid mediumorchid;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    -moz-box-shadow: 5px 5px 5px gray;
}

.form-inline button:hover {
    background-color: wheat;
    color: saddlebrown;  
}

/* Style the Site Number, Shape, Material forms */
.form-search {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin: auto;
    grid-gap: 15px 20px;  /*first sets the row-gap and the second sets the column-gap*/
    max-width: 100%;
}

/* Add some margins for each label */
.form-search label {
    display: block;
    font-family: 'Open Sans Condensed Bold', sans-serif;
    font-size: 16px;
    color: black;
}

/* Style the input field - SELECT */
.form-search select {
	width: 180px;
	padding: 8px 15px;
	margin: 2px 0 10px 0;
	display: block;
	border: 2px solid gray;
	background-color: linen;
	border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	box-sizing: border-box;
	-webkit-transition: 0.25s;
    transition: 0.25s;
}

.form-search select:focus {
	border: 2px solid mediumblue;
	background-color: lavender;
}

/* Style the Submit and Reset buttons */
.form-search button {
    padding: 5px 12px;
    font-family: 'Merriweather Sans Regular';
    font-size: 16px;
    color: navy;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: thistle;
    display: inline-block;
    border: 2px solid mediumorchid;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    -moz-box-shadow: 5px 5px 5px gray;
}

.form-search button:hover {
    background-color: wheat;
    color: saddlebrown;  
}

/* User Forms: Register, Sign In, Change Password */

/* Style the User Forms container - stack form vertically */
div.userFormContainer {
	width: 75%;
	border: 1px solid gray;
	background-color: silver;
	padding: 0 20px 20px 20px;
	border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    -moz-box-shadow: 5px 5px 5px gray;
}

/* Add some margins for each label */
.form-user label {
	display: block;
	font-family: 'Open Sans Condensed Bold', sans-serif;
	font-size: 16px;
	color: black;
}

/* Style the input fields */
.form-user input, select, textarea {
	width: 100%;
	padding: 8px 15px;
	margin: 2px 0 10px 0;
	display: block;
	border: 2px solid gray;
	background-color: linen;
	border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
	box-sizing: border-box;
	-webkit-transition: 0.25s;
    transition: 0.25s;
}

.form-user input:focus, .form-user select:focus, .form-user textarea:focus {
	border: 2px solid mediumblue;
	background-color: lavender;
}

/* Style the Submit and Reset buttons */
.form-user button {
	padding: 5px 12px;
	font-family: 'Merriweather Sans Regular';
	font-size: 16px;
	color: navy;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	background-color: thistle;
	display: inline-block;
	border: 2px solid mediumorchid;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	box-shadow: 5px 5px 5px gray;
	-webkit-box-shadow: 5px 5px 5px gray;
	-moz-box-shadow: 5px 5px 5px gray;
}

.form-user button:hover {
	background-color: wheat;
	color: saddlebrown;  
}

.form-user fieldset {
	background-color: gainsboro;
}

.form-user textarea {
	height: 110px;
	resize: none;
}

.signinText { /* the text at the top of the Registration Form */
	font-family: 'Open Sans Condensed Bold', sans-serif;
	font-size: 20px;
	color: black;
	text-align: center;
}

.smallText { /* the definition text for the Search Options, Registration Form */
	font-family: 'Merriweather Sans Regular';
	font-size: 14px;
	color: black;
}

.welcomeText { /* the text to welcome the user after Sign In */
	font-family: 'Open Sans Condensed Bold', sans-serif;
	font-size: 20px;
	color: black;
	text-align: left;
}

.greenText {
	color: darkgreen;
}

.redText {
	color: firebrick;
}

.blueText {
	color: royalblue;
}

.table-home {
	width: 100%;
	border-collapse: collapse;
	border: 0px solid black;
}

.table-home-td-1 {
	width: 150px;
	border: 0px solid black;
}

.table-home-td-2 {
	width: 231px;
	border: 0px solid black;
}

.table-home-td-3 {
	width: 25px;
	border: 0px solid black;
}

.table-count {
	table-layout: fixed;
	width: 100%;
	border-collapse: collapse;
	border: 0px solid black;
}

.table-count-td-1 {
	width: 400px;
	border: 0px solid black;
	text-align: left;
}
/*
.table-count-td-2 {
	width: 230px;
	border: 0px solid black;
	text-align: center;
}
*/
.table-count-td-3 {
	width: 200px;
	border: 0px solid black;
	text-align: center;
}

.table-count-td-4 {
	width: 200px;
	border: 0px solid black;
	text-align: center;
}

.table-count-td-5 {
	width: 200px;
	border: 0px solid black;
	text-align: center;
}

.table-legend {
	width: 100%;
	border-collapse: collapse;
	border: 0px solid black;
}

.table-legend-td-0 {
	background-color: whitesmoke;
	border: 1px solid black;
}

.table-legend-td-11 {
	background-color: lemonchiffon;
	border: 1px solid black;
}

.table-legend-td-21 {
	background-color: navajowhite;
	border: 1px solid black;
}

.table-legend-td-51 {
	background-color: aquamarine;
	border: 1px solid black;
}

.table-legend-td-101 {
	background-color: yellowgreen;
	border: 1px solid black;
}

.table-legend-td-201 {
	background-color: lightskyblue;
	border: 1px solid black;
}

.table-legend-td-301 {
	background-color: gold;
	border: 1px solid black;
}

.table-legend-td-401 {
	background-color: lightpink;
	border: 1px solid black;
}

.table-legend-td-501 {
	background-color: violet;
	border: 1px solid black;
}

.table-legend-td-500 {
	background-color: lightcoral;
	border: 1px solid black;
}

.table-legend-td-error {
	background-color: black;
	border: 1px solid black;
}

.table-legend-shape {
	width: 100%;
	border-collapse: collapse;
	border: 0px solid black;
}

.table-legend-shape-td-0 {
	background-color: whitesmoke;
	border: 1px solid black;
}

.table-legend-shape-td-5 {
	background-color: lemonchiffon;
	border: 1px solid black;
}

.table-legend-shape-td-10 {
	background-color: navajowhite;
	border: 1px solid black;
}

.table-legend-shape-td-20 {
	background-color: aquamarine;
	border: 1px solid black;
}

.table-legend-shape-td-30 {
	background-color: yellowgreen;
	border: 1px solid black;
}

.table-legend-shape-td-40 {
	background-color: lightskyblue;
	border: 1px solid black;
}

.table-legend-shape-td-50 {
	background-color: gold;
	border: 1px solid black;
}

.table-legend-shape-td-100 {
	background-color: lightpink;
	border: 1px solid black;
}

.table-legend-shape-td-200 {
	background-color: violet;
	border: 1px solid black;
}

.table-legend-shape-td-201 {
	background-color: lightcoral;
	border: 1px solid black;
}

.table-legend-shape-td-error {
	background-color: black;
	border: 1px solid black;
}

.table-map {
	table-layout: auto;
	width: 100%;
	border-collapse: collapse;
	border: 2px solid black;
}

.table-map-tr {
	border: 1px solid black;
}

.table-map-td-0 {
	background-color: whitesmoke;
	text-align: center;
	vertical-align: top;
	border: 1px solid black;
}

.table-map-td-11 {
	background-color: lemonchiffon;
	text-align: center;
	vertical-align: top;
	border: 1px solid black;
}

.table-map-td-21 {
	background-color: navajowhite;
	text-align: center;
	vertical-align: top;
	border: 1px solid black;
}

.table-map-td-51 {
	background-color: aquamarine;
	text-align: center;
	vertical-align: top;
	border: 1px solid black;
}

.table-map-td-101 {
	background-color: yellowgreen;
	text-align: center;
	vertical-align: top;
	border: 1px solid black;
}

.table-map-td-201 {
	background-color: lightskyblue;
	text-align: center;
	vertical-align: top;
	border: 1px solid black;
}

.table-map-td-301 {
	background-color: gold;
	text-align: center;
	vertical-align: top;
	border: 1px solid black;
}

.table-map-td-401 {
	background-color: lightpink;
	text-align: center;
	vertical-align: top;
	border: 1px solid black;
}

.table-map-td-501 {
	background-color: violet;
	text-align: center;
	vertical-align: top;
	border: 1px solid black;
}

.table-map-td-500 {
	background-color: lightcoral;
	text-align: center;
	vertical-align: top;
	border: 1px solid black;
}

.table-map-td-error {
	background-color: black;
	text-align: center;
	vertical-align: top;
	border: 1px solid black;
}

/* Add responsiveness - display the form controls vertically instead of horizontally on screens that are less than 600px wide */
@media (max-width: 600px) {
.form-inline input {
    margin: 3px 0;
}

.form-inline {
    flex-direction: column;
  }
}

/* END Classes -- custom styles */

/* CONTAINER, HEADER, MENU, CONTENT, FOOTER */

.banner {
    padding: 15px 0 15px 0;
    align-self: center;
    text-align: center;
    width: 95%;
}

.container {
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.content {
    margin: 0;
    padding: 0;
    align-self: center;
    width: 95%;
}

.footer {
    margin: 0;
    padding: 0;
    align-self: center;
    width: 95%;
}

/* END -- CONTAINER, HEADER, MENU, CONTENT, FOOTER */