/* BASIC ELEMENTS */

/* this aligns the top of the page title with the top of the left-hand navigation */
body.documentation .primary_content {
  position: relative;
  bottom: 10px;
}

/* when the docs are in mobile mode, this keeps space between the page title and search box */
body.documentation .docs-searchbox {
  margin-bottom: 28px;
}

/* the kb doesn't need the .docs-searchbox fix */
body.kb .docs-searchbox {
  margin-bottom: 0px;
}

body.documentation p {
  padding: 0px;
  margin: 28px 0px;
  color: #616161;
  max-width: 600px;
  line-height: 28px;
}

body.documentation ol {
  font-family: 'Source Sans Pro';
  color: #616161;
}

body.documentation .primary_content ol {
  max-width: 600px;
  margin: 28px 0px;
}

body.documentation .primary_content ol li p {
  padding: 0px;
  font-size: 18px;
  margin: 28px 0px;
}

body.documentation ul {
  font-family: 'Source Sans Pro';
  color: #616161;
}

body.documentation .primary_content ul {
  max-width: 600px;
  margin: 28px 0px;
}

body.documentation .primary_content ul li p {
  padding: 0px;
  font-size: 18px;
  margin: 28px 0px;
}

/* has no margin because Statamic wraps <img> tags in a <p> */
body.documentation img {
  margin: 0px;
  max-width: 100%;
}

/* BLOCKQUOTE ELEMENTS */

body.documentation blockquote {
  margin: 28px 0px;
  border-left-color: #DAC6E4;
  background-color: #F0E8F4;
  max-width: 600px;
}

body.documentation blockquote.warning {
  border-left-color: #E6B1BE;
  background-color: #F9EFF1;
}

body.documentation blockquote.quote {
  border-left-color: #898989;
  background-color: #F0F0F0;
}

body.documentation blockquote.kb-question {
  border-left-color: #EEE;
  background-color: white;
  max-width: none;
}

body.documentation blockquote code {
  background: none;
}

body.documentation blockquote *:first-child {
  margin-top: 0px;
}

body.documentation blockquote *:last-child {
  margin-bottom: 0px;
}

/* CODE ELEMENTS */

/* has no margin because Statamic wraps <pre> tags in a <div class="codeblock"> */
body.documentation pre {
  margin: 0px;
}

/* this is the standard markdown code block */
body.documentation .codeblock {
  margin: 28px 0px;
}

/* this is the ace editor code block */
body.documentation div.code {
  margin: 28px 0px;
}

/* HEADER ELEMENTS */

body.documentation h1 {
  margin: 50px 0px 28px 0px;
  font-weight: 600;
  color: #58346A;
}

body.documentation h1#page_title {
  margin: 0px;
  border-bottom: solid #EEE 2px;
}

body.kb h1#page_title {
  border-bottom: none;
}

/* selects the first <h1> that is after #page_title, which is inside a div.row */
body.documentation .primary_content div.row + h1 {
  margin-top: 28px;
}

body.documentation h1 code {
  background: none;
  font-size: 36px;
  font-weight: 400;
  color: #58346A;
}

body.documentation h2 {
  margin: 28px 0px;
  font-size: 26px;
  font-weight: 600;
  color: #58346A;
}

body.documentation h2 code {
  background: none;
  font-size: 23px;
  font-weight: 400;
  color: #58346A;
}

body.documentation h3 {
  margin: 28px 0px;
  font-size: 22px;
  font-weight: 600;
  color: #58346A;
}

body.documentation h3 code {
  background: none;
  font-size: 20px;
  font-weight: 400;
  color: #58346A;
}

body.documentation h4 {
  margin: 28px 0px;
  font-size: 18px;
  font-weight: 600;
  text-transform: none;
  color: #58346A;
}

body.documentation h4 code {
  background: none;
  font-size: 16px;
  font-weight: 400;
  color: #58346A;
}

/* TABLE ELEMENTS */

body.documentation table {
  margin: 28px 0px;
  width: auto;
}

body.documentation table th {
  background-color: #DAC6E4;
  font-weight: 600;
  border: 1px solid #929292;
  color: #616161;
}

body.documentation table td {
  border: 1px solid #929292;
  color: #616161;
}

body.documentation table#kb_meta_table {
  width: 100%;
}

body.documentation table#kb_meta_table td:first-child {
  width: 50%;
}

body.documentation table#kb_meta_table td {
  border: 1px solid #DDD;
}

/* ADDITION AND DEPRECATION BUBBLES */

body.documentation .add-dep {
  margin-left: 10px;
  vertical-align: 2px;
}

body.documentation h1 .add-dep {
  vertical-align: 6px;
}

body.documentation td .add-dep {
  margin-left: 0px;
  margin-right: 8px;
  vertical-align: 0px;
  font-weight: 600;
}

body.documentation .add-dep span {
  border: 1px solid #616161;
  color: #616161;
  font-size: 12px;
  padding: 5px;
}

body.documentation .add-dep .type {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: none;
}

body.documentation .add-dep .add {
  background-color: #D3E6D9;
}

body.documentation .add-dep .dep {
  background-color: #E6D3E0;
}

body.documentation .add-dep .version {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
