/* Global stuff */

body {
  background-color: #f2f2f2; /* Light grey window background */
  font-family: sans-serif; /* No Times New Roman, please*/
  margin: 0; /* Make header and footer extend to window border */
}

header, footer, article {
  padding: 5px 15px 5px 15px; /* A bit of space from border to text: top, left, bottom, right */
}

p {
  line-height: 1.2lh;
  padding: 0.2lh;
}

li {
  line-height: 1.5lh;
}

/* Header */

header {
  background-color: #01434F; /* Petroleum blå */
}

nav {
  margin-left: auto; /* Center on page */
  margin-right: auto; /* Center on page */
  max-width: 1024px; /* Avoid too long lines, while still being responsive on small devices */
}

nav ul {
  list-style: none; /* No bullets on menu items */
  margin: 0; /* No additional spacing */
  padding: 0 10px; /* Keep some spacing between menu items */
  text-align: right; /* Keep the menu items to the right */
}

nav ul li:first-child {
  float: left; /* Keep first menu item to the left */
}

nav ul li {
  float: none; /* Keep the menu items on the same line */
}

nav ul li a {
  color: white; /* White menu item text */
  text-decoration: none; /* No underline on menu item text */
}



/* Footer */

footer {
  background-color: #77B225; /* Light green */
}

.edit {
  font-size: small; /* Small text */
  margin-left: auto; /* Center on page */
  margin-right: auto; /* Center on page */
  max-width: 1024px; /* Avoid too long lines, while still being responsive on small devices */
  text-align: right; /* Position the edit link to the right */
}

.edit a {
  color: white; /* White text */
}

/* Main content */

article {
  background-color: white; /* White background on main content */
  border: 1px solid #dadada; /* Border around main content */
  margin-top: 20px; /* Space between menu and main content */
  margin-bottom: 20px; /* Space between main content and footer */
  margin-left: auto; /* Center on page */
  margin-right: auto; /* Center on page */
  max-width: 1024px; /* Avoid too long lines, while still being responsive on small devices */
}

img {
  display: block; /* Center the image */
  height: auto; /* Preserve aspect ratio */
  margin-left: auto; /* Center the image */
  margin-right: auto; /* Center the image  */
  max-width: 100%; /* Scale to fit body */
}

/* Tables */

table {
  border-collapse: collapse; /* Control border by CSS */
}

table, th, td {
  border: 1px solid darkgrey; /* Single border */
}

th, td {
  text-align: left;
  padding: 8px; /* Some space */
}

thead tr {
  background-color: #6B993B; /* Green table header */
}

tr:nth-child(even) {
  background-color: lightgrey; /* Grey every other row */
}

/* Callout ( text box / insert ) */

div.callout {
  padding-left: 5px;
  padding-right: 5px;
  width: 50%;
  float:right;
}

div.border {
  margin: 5px;
  border: 5px solid darkgreen;
  border-radius: 10px;
}

/* Blog category */

span.category {
  align-items: center;
  background: lightgrey;
  border-radius: 5rem;
  display: inline-flex;
  font-size: 90%;
  height: 1.2rem;
  line-height: .8rem;
  margin: .1rem;
  max-width: 320px;
  overflow: hidden;
  padding: .2rem .4rem;
  text-decoration: none;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}