/* Override directives for readthedocs */


/**
 * Branding: Zettlr green: #1cb27e
 * Shade color (darker green): #127e58
 */

 /* Main section links */
section.wy-nav-content-wrap a {
  color: #1cb27e;
}

section.wy-nav-content-wrap a:hover {
  color: #127e58;
}

/* Keyboard shortcuts */
/*
  The selector comes from the readthedocs theme CSS file to match specificity
  and successfully overwrite their styles.
*/
.rst-content :not(dl.option-list)>:not(dt):not(kbd):not(.kbd)>.kbd,
.rst-content :not(dl.option-list)>:not(dt):not(kbd):not(.kbd)>kbd {
  display: inline-block;
  min-width: 20px;
  background-color: #fbfbfb;
  color: #666;
  border: 1px solid #c7c6c6;
  border-radius: 3px;
  text-align: center;
  padding: 1px 3px;
  vertical-align: middle;
  box-shadow: inset 0px -1px 0 #c4c4c4;
}

nav.wy-nav-top a,
nav.my-nav-top a:active {
  color: white;
}

.wy-side-nav-search a,
.wy-side-nav-search a:visited {
  color: white;
}

/*
 * Blockquotes are "misused" as info blocks
 */
div[role="main"] blockquote {
  color: #0e5a3f;
  border-left: 5px solid #1cb27e;
  padding: 10px;
  position: relative;
  padding-left: 10px;
}

/*
 * As the theme is using Font Awesome either way we can make use of it for
 * displaying a small (i) icon.
 */
div[role="main"] blockquote::before {
  font-family: "FontAwesome";
  position: absolute;
  top: 10px;
  left: -30px;
  color: #127e58;
  font-style: normal;
  content: "\f05a";
}

/*
 * The parser adds a paragraph inside the blockquote, so we have to remove the
 * bottom margin on these.
 */
div[role="main"] blockquote p { margin-bottom: 0px; }

/*
 * Links in these boxes should have different colours.
 */
div[role="main"] blockquote a {
  color: inherit;
  text-decoration: underline;
}

div[role="main"] blockquote a:hover {
  color: inherit;
  text-decoration: none;
}

/*
 * Mobile ready navbar
 */
.wy-side-nav-search, .wy-nav-top { background-color: rgb(28, 178, 126); }
.wy-menu-vertical a:active { background-color: rgb(28, 178, 126); }

/*
 * This is an animation so that the switching of the nav on mobile is smooth
 */
.wy-nav-side, .wy-nav-content-wrap { transition: 0.5s left ease; }

/* We have to preset the div with left 0 for the animation to work */
.wy-nav-content-wrap { left: 0%; }