title: Zettelstore Base CSS
role: configuration
syntax: css
box-number: 2
copyright: 
created: 20200804111624
lang: en
license: 
modified: 20240826142300
published: 20240826142300
visibility: public

```{="css"}
/*-----------------------------------------------------------------------------
 * Copyright (c) 2020-present Detlef Stern
 *
 * This file is part of Zettelstore.
 *
 * Zettelstore is licensed under the latest version of the EUPL (European Union
 * Public License). Please see file LICENSE.txt for your rights and obligations
 * under this license.
 *
 * SPDX-License-Identifier: EUPL-1.2
 * SPDX-FileCopyrightText: 2020-present Detlef Stern
 *-----------------------------------------------------------------------------
 */

*,*::before,*::after {
    box-sizing: border-box;
  }
  html {
    font-family: serif;
    scroll-behavior: smooth;
    height: 100%;
  }
  body {
    margin: 0;
    min-height: 100vh;
    line-height: 1.4;
    background-color: #f8f8f8 ;
    height: 100%;
  }
  nav.zs-menu {
    background-color: hsl(210, 28%, 90%);
    overflow: auto;
    white-space: nowrap;
    font-family: sans-serif;
    padding-left: .5rem;
  }
  nav.zs-menu > a {
    float:left;
    display: block;
    text-align: center;
    padding:.41rem .5rem;
    text-decoration: none;
    color:black;
  }
  nav.zs-menu > a:hover, .zs-dropdown:hover button { background-color: hsl(210, 28%, 80%) }
  nav.zs-menu form { float: right }
  nav.zs-menu form input[type=text] {
    padding: .12rem;
    border: none;
    margin-top: .25rem;
    margin-right: .5rem;
  }
  .zs-dropdown {
    float: left;
    overflow: hidden;
  }
  .zs-dropdown > button {
    font-size: 16px;
    border: none;
    outline: none;
    color: black;
    padding:.41rem .5rem;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }
  .zs-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  .zs-dropdown-content > a {
    float: none;
    color: black;
    padding:.41rem .5rem;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  .zs-dropdown-content > a:hover { background-color: hsl(210, 28%, 75%) }
  .zs-dropdown:hover > .zs-dropdown-content { display: block }
  main { padding: 0 1rem }
  article > * + * { margin-top: .5rem }
  article header {
    padding: 0;
    margin: 0;
  }
  h1,h2,h3,h4,h5,h6 { font-family:sans-serif; font-weight:normal; margin:.4em 0 }
  h1 { font-size:1.5em }
  h2 { font-size:1.25em }
  h3 { font-size:1.15em }
  h4 { font-size:1.05em; font-weight: bold }
  h5 { font-size:1.05em }
  h6 { font-size:1.05em; font-weight: lighter }
  p { margin: .5em 0 0 0 }
  p.zs-meta-zettel { margin-top: .5em; margin-left: .5em }
  li,figure,figcaption,dl { margin: 0 }
  dt { margin: .5em 0 0 0 }
  dt+dd { margin-top: 0 }
  dd { margin: .5em 0 0 2em }
  dd > p:first-child { margin: 0 0 0 0 }
  blockquote {
    border-left: .5em solid lightgray;
    padding-left: 1em;
    margin-left: 1em;
    margin-right: 2em;
  }
  blockquote p { margin-bottom: .5em }
  table {
    border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
  }
  td, th {text-align: left; padding: .25em .5em;}
  th { border-bottom: 2px solid hsl(0, 0%, 70%); font-weight: bold }
  td { border-bottom: 1px solid hsl(0, 0%, 85%) }
  main form {
    padding: 0 .5em;
    margin: .5em 0 0 0;
  }
  main form:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  main form div { margin: .5em 0 0 0 }
  input { font-family: monospace }
  input[type="submit"],button,select { font: inherit }
  label { font-family: sans-serif; font-size:.9rem }
  textarea {
    font-family: monospace;
    resize: vertical;
    width: 100%;
  }
  .zs-input {
    padding: .5em;
    display:block;
    border:none;
    border-bottom:1px solid #ccc;
    width:100%;
  }
  input.zs-primary { float:right }
  input.zs-secondary { float:left }
  input.zs-upload {
    padding-left: 1em;
    padding-right: 1em;
  }
  a:not([class]) { text-decoration-skip-ink: auto }
  a.broken { text-decoration: line-through }
  a[rel~="external"]::after { content: "➚"; display: inline-block }
  img { max-width: 100% }
  img.right { float: right }
  ol.zs-endnotes {
    padding-top: .5em;
    border-top: 1px solid;
  }
  kbd { font-family:monospace }
  code,pre {
    font-family: monospace;
    font-size: 85%;
  }
  code {
    padding: .1em .2em;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: .25em;
  }
  pre {
    padding: .5em .7em;
    max-width: 100%;
    overflow: auto;
    border: 1px solid #ccc;
    border-radius: .5em;
    background: #f0f0f0;
  }
  pre code {
    font-size: 95%;
    position: relative;
    padding: 0;
    border: none;
  }
  div.zs-indication {
    padding: .5em .7em;
    max-width: 100%;
    border-radius: .5em;
    border: 1px solid black;
  }
  div.zs-indication p:first-child { margin-top: 0 }
  span.zs-indication {
    border: 1px solid black;
    border-radius: .25em;
    padding: .1rem .2em;
    font-size: 95%;
  }
  .zs-info {
    background-color: lightblue;
    padding: .5em 1em;
  }
  .zs-warning {
    background-color: lightyellow;
    padding: .5em 1em;
  }
  .zs-error {
    background-color: lightpink;
    border-style: none !important;
    font-weight: bold;
  }
  td.left, th.left { text-align:left }
  td.center, th.center { text-align:center }
  td.right, th.right { text-align:right }
  .zs-font-size-0 { font-size:75% }
  .zs-font-size-1 { font-size:83% }
  .zs-font-size-2 { font-size:100% }
  .zs-font-size-3 { font-size:117% }
  .zs-font-size-4 { font-size:150% }
  .zs-font-size-5 { font-size:200% }
  .zs-deprecated { border-style: dashed; padding: .2em }
  .zs-meta {
    font-size:.75rem;
    color:#444;
    margin-bottom:1em;
  }
  .zs-meta a { color:#444 }
  h1+.zs-meta { margin-top:-1em }
  nav > details { margin-top:1em }
  details > summary {
    width: 100%;
    background-color: #eee;
    font-family:sans-serif;
  }
  details > ul {
    margin-top:0;
    padding-left:2em;
    background-color: #eee;
  }
  footer { padding: 0 1em }
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
```