body {
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	 font-size: 16pt;
	 margin: 0;
}
.container {
	max-width: 1400px;
	 margin: auto;
}
h1 {
	background-color: #000062;
	 color: #efefef;
	 font-size: 1.5em;
	 margin: 0;
	 padding: 0.3em;
}
.image-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
}
.image-list img {
	max-height: 280px;
}
.image-list-item {
	margin: 0.4em 0.4em 0.4em 0;
	 padding: 0.4em 0.2em;
	 background-color: #d2d8f2a8;
}
.image-list-item.focused {
	background-color: pink;
}
.image-list-item.deleted img {
	outline: 2px solid red;
}
.image-link-list {
	list-style: none;
	 margin: 0;
	 padding: 0;
	 display: flex;
	 flex-wrap: wrap;
}
.image-link-list a {
	margin-right: 0.8em;
}
.image-link-list-item {
	margin-bottom: 0.25em;
}

a.link-button {
	background: #d2d8f2a8;
	 color: #000062;
	 font-size: 0.75em;
	 padding: 0.2em 0.4em;
	 border-radius: 4px;
	 text-decoration: none;
}
a.link-button:hover, a.link-button:focus {
	background: #000062;
	 color: #efefef;
}
button.icon-button {
	cursor: pointer;
	 border: 1px solid transparent;
	 color: #666;
	 background-color: transparent;
	 border-radius: 2px;
	 padding: 0 0.3em 0 0.6em;
}
.icon-button:hover, .icon-button:focus {
	border-color: #000062;
	 color: #333;
}

div.image-details {
	display: flex;
	 flex-direction: row;
	 padding: 0 0.3em;
	 position: relative;
}
.image-details p.image-caption {
	margin-left: auto;
}
p.image-caption {
	font-size: 0.7em;
	 margin: 0;
	 text-align: right;
}
p.image-caption a {
	text-decoration: none;
	 font-weight: bold;
	 color: #666;
	 font-size: 0.9em;
}
p.image-caption a:hover, p.image-caption a:focus {
	color: #333;
}
ul.grouped-years li a.link-button {
	font-size: 0.65em;
}
div.pager {
	margin-bottom: 1em;
}
ul.pager {
	background-color: #79799b;
	 padding: 0.3em;
}
ul.pager li a {
	font-size: 0.75em;
	 text-decoration: none;
	 font-weight: bold;
	 color: #efefef;
	 text-transform: lowercase;
}
ul.pager li a:hover, ul.pager li a:focus {
	color: white;
}
.pager-pre::before {
	content: "<";
	 margin-right: 0.3em;
}
.pager-nxt::after {
	content: ">";
	 margin-right: 0.3em;
}
.image-delete {
	text-align: right;
}
input.image-delete-submit {
	border: none;
	 background: none;
	 text-decoration: underline;
	 text-decoration-style: dotted;
	 color: #000062;
	 text-decoration-color: #000062;
	 cursor: pointer;
	 padding: 0.15em 0.5em;
	 border-radius: 2px;
}
input.image-delete-submit:hover, input.image-delete-submit:focus {
	background-color: #7b8ef4a8}

div.flashes {
	margin: 0.35em 0;
	 padding: 0.5em;
	 font-size: 0.8em;
	 background-color: #ffbfa0;
}
p.flash {
	font-size: 0.75em;
	margin: 0.25em;
}
span.confirmation-text {
	display: none;
	 font-size: 0.6em;
	 font-weight: 600;
	 font-style: italic;
}
span.confirmation-text.active {
	display:block;
	 position: absolute;
	 background: #000062;
	 color: #efefef;
	 padding: 0.5em;
	 left: 40px;
	 top: -22px;
}

ul.main-nav {
	display:flex;
	 flex-direction: row;
	 list-style: none;
	 margin: 0 0 0.5em;
	 padding: 0.5em;
	 background-color: #bbf;
}
li.main-nav-item {
	font-size: 0.8em;
	 margin-right: 0.8em;
}
li.main-nav-item a {
	color: #000062;
	 text-decoration-style: dotted;
	 text-transform: lowercase;
	 text-underline-offset: 4px;
	 padding: 0.35em;
	 border: 2px solid transparent;
	 border-radius: 2px;
}
li.main-nav-item a:hover, li.main-nav-item a:active {
	border-color: #000062;
}

.form {

}
.form-group {
	display: flex;
	 flex-direction: column;
	 margin: 1em 0;
}
.form-group label {
	font-size: 0.8em;
}
.login-form {
	max-width: 600px;
	 background-color: #efefef;
	 padding: 1em;
	 margin: 1em auto;
}
.form input[type="submit"] {
	border: 0;
	 padding: 0.4em 1.5em;
	 background-color: #000062;
	 color: white;
	 text-align: center;
	 cursor:pointer;
	 font-weight: bold;
	 text-transform: uppercase;
}
.form input[type="submit"]:hover, .form input[type="submit"]:focus {
	 background-color: navy;
}
#footer {
	margin-top: 20px;
	height: 40px;
	background-color: #000062;
}

@media screen and (max-width: 500px) {

	.image-list-item img {
		max-width: 100%;
	}
}