/* Grundeinstellungen */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; }
html, body { text-align: center; min-height: 100%; }

/* Header */
header { width: 100%; background-color: #4D4DFF; }
header h1 { padding: 0.5em 0; font-size: 1.75em; font-weight: normal; text-transform: uppercase; color: #ffffff; }
header a { text-decoration: none; color: #ffffff; }
h1#spending {background-color: #D22730;}
h1#earnings {background-color: #44D62C;}
h1#year {background-color: #C724B1;}

/* Fixe Navigationsleiste */
nav { position: fixed; bottom: 2%; right: 0; width: 100%; background-color: #4D4DFF; }
nav a { text-decoration: none; color: #ffffff; }

/* Footer */
footer { background-color: #575757; font-size: 0.8em; color: white; position: fixed; bottom: 0; right: 0; width: 100%; height: 2%; }

/* Main */
main { width: 100%; min-height: 100%; background-color: #ffffff; margin-bottom: 5em; display: grid; grid: auto auto auto; }
main h1 { padding: 0.25em 0; font-size: 1.75em; font-weight: normal; background-color: #575757; color: #ffffff; grid-column: 1 / span 3; }

section { margin: 1em; padding: 1em; text-align: left; background-color: #efefef; }
section h2 { margin-bottom: 0.25em; font-size: 1.5em; color: #575757; }
section h3 { font-size: 0.75em; font-weight: normal; text-transform: uppercase; color: #575757; }
section h3 span { font-size: 0.75em; text-transform: normal; }
section p { font-size: 2.50em; font-weight: bold; }
section form { display: grid; grid-template-columns: auto auto; justify-content: space-evenly; text-align: left; }
section form#year { display: block; }
section table { margin-top: 0.5em; width: 100%; }
section#yearly_overview { grid-column: 1 / span 3; }

td {border-bottom: 1px solid #575757;}

.submit { grid-column: 1 / span 2; }
.spending_amount { text-align: right; color: #D22730; }
.earnings_amount { text-align: right; color: #44D62C; }
.value_null { text-align: right; color: #575757; }
.value_null_total { text-align: right; color: #575757; border-top: 1px solid #575757; border-bottom: 0; }
.spending_total_label { border-top: 1px solid #575757; border-bottom: 0; }
.earnings_total_label { border-top: 1px solid #575757; border-bottom: 0; }
.yearly_total_label { border-top: 1px solid #575757; border-bottom: 0; }
.spending_total { text-align: right; color: #D22730; border-top: 1px solid #575757; border-bottom: 0; }
.earnings_total { text-align: right; color: #44D62C; border-top: 1px solid #575757; border-bottom: 0; }
.percentage { text-align: right; }
.empty_row {border-bottom: 0; }
.bold { font-weight: bold; }
.error { color: #D22730; }

/* Ausgaben-Diagramm */
dl.spending { width:100%; margin-top: 0.5em; }
dl.spending dt {float:left; width:30%; clear:both; margin:0 0 5px 0; padding:3px;}
dl.spending dd {float:left; width:70%; }
dl.spending dd span {background:#D22730; display:block; color:#575757; font-size: 0.5em;}