* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0; /* Gets rid of scroll bars */
    padding: 0;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
}

/* Links */
:link {
    text-decoration: none !important;
}

/* Icons */
.icon svg {
  height: 1em;
  width: 1em;
}

/* Layout using CSS grid */
.container {
    min-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
}

/* Header */
header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    color: white;
    background-color: #228B22;
}

.main-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    user-select: none;
}

.main-menu-collapsed {
    display: none;
}

@media screen and (min-width: 800px) {
    .main-menu {
	flex-direction: row;
    }

    .main-menu-collapsed {
	display: flex;
    }
}

.header-menu-item {
    padding: 1em;
    white-space: nowrap;
    color: white;
}

.header-menu-item a {
    color: white;
}

.header-right {
    padding: 1em;
}

@media screen and (min-width: 800px) {
    .header-right {
	margin-left: auto;
    }
}

.header-right a {
    color: white;
}

.header-menu-button {
    cursor: pointer;
    padding: 1em;
    color: white;
    user-select: none;
}

@media screen and (min-width: 800px) {
    .header-menu-button {
	display: none;
    }
}

/* Footer */
footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    color: white;
    background-color: #228B22;
}

@media screen and (min-width: 800px) {
    footer {
	flex-direction: row;
    }
}

.footer-item {
    display: flex;
    padding: 1em;
    white-space: nowrap;
}

footer a {
    color: white;
}

/* Readable content */
.content {
    padding: 1em;
    max-width: 60em;
    margin-left: 0px;
    margin-right: 0px;
}

@media screen and (min-width: 800px) {
    .content {
	margin-left: auto;
	margin-right: auto;
    }
}

.content-list {
    list-style-type: none;
    padding-left: 0em;
    margin-top: 0em;
}

/* Login page */
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90%; /* Push the form up a little bit */
}

.login-form {
    display: flex;
    flex-direction: column;
}

.login-form input[type=text], .login-form input[type=password] {
    margin-bottom: 0.3em;
    margin-top: 0.3em;
    width: 10em;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
}

.login-form input[type=submit] {
    width: 6em;
    background-color: #228B22;
    color: white;
    border: none;
    text-decoration: none;
    padding: 1em;
    margin-top: 0.3em;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
}

.login-error {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    color: red;
}

/* Files pages */

/* Completely hide the file upload widget.
Instead style the label for the upload widget since
clicking on the label for the upload widget also opens
the file dialog.
*/
input[type=file] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}


.button {
    background-color: #228B22;
    color: white;
    border: none;
    text-decoration: none;
    padding: 1em;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
}

.upload-error {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
    color: red;
}

.file-item {
    display: flex;
}

.file-link {
    margin-left: 0.5em;
}

/* Delete file page */
.delete-file-form input {
    background-color: red;
}

/* Photos */
.photo-container img {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    heigth: 100%;
}

@media screen and (min-width: 800px) {
    .photo-container {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
    }
}

.photo-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.photo-link {
    font-size: 0px;
}


/* Calendar */
.noday, .mon, .tue, .wed, .thu, .fri, .sat, .sun {
    width: 30px;
    heigth: 30px;
    text-align: right;
    padding-right: 2px;
}

.current-date {
    border: 2px solid #228B22;
}

table.month {
    margin: 10px;
    height: 7em;
}

.period table {
    margin-left: auto;
    margin-right: auto;
}

@media screen and (min-width: 800px) {
    .period {
	display: flex;
	justify-content: center;
	flex-direction: row;
    }
}