@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');

/*
---
name: Paragraph
category: body
---

```html
<p>
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
</p>
```

*/

/*
---
name: Heading
category: body
---

```html
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
```

*/

/*
---
name: Header
category: layout/header
tag:
  - deprecated
---

```html
<header class="aigis-header">
  <a href="#">Styleguide</a>
</header>
```

*/
.aigis-header {
  position: fixed;
  top: 0;
  padding: 10px 30px;
  width: 100%;
  height: 50px;
  background-color: #486491;
  z-index: 10000;
}

.aigis-header span a {
  color: #fff;
  font-size: 2.6em;
  font-family: 'Noto Sans KR', 'Nanum Gothic';
  text-decoration: none;
  line-height: 110%;
}

.aigis-header div {
  float: right;
}

/*
---
name: Footer
category: layout/footer
tag: latest
---

```html
<footer class="aigis-footer">Last update at 2016/03/23 20:48</footer>
```

*/
.aigis-footer {
  padding-top: 2rem;
  padding-bottom: 2rem;
  margin-top: 2rem;
  line-height: 1.75;
  /* color: #7a7a7a; */
  border-top: 1px solid #eee;
  text-align: center;
  font-size: 16px;
}

/*
---
name: Preview
category: body
tag: latest
---

```html
<div class="aigis-preview">
  <a class="ex-ag-btn">Button</a>
  <button class="ex-ag-btn ex-ag-btn--primary">Button</button>
</div>
```

*/
.aigis-codeblock,
.aigis-preview {
  position: relative;
  margin: 0;
  overflow: visible;
  /* background: url( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAAAAAA6mKC9AAAAF0lEQVR4AWP4DwVvoWCgBGAMmMQACQAAuK72AWHjK4wAAAAASUVORK5CYII=' ); */
}

.aigis-preview::before {
  content: 'preview';
  position: absolute;
  right: 0;
  top: 0;
  font-size: 10px;
  padding: 2px 4px 2px 5px;
  border-bottom-left-radius: 3px;
  color: #fff;
  background: #181818;
}

.aigis-preview::after {
  content: '';
  clear: both;
  display: block;
}

.ex-ag-btn {
  -webkit-appearance: none;
  display: inline-block;
  border: none;
  background-color: #3db680;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  line-height: 40px;
  min-width: 200px;
  font-size: 20px;
  box-sizing: border-box;
}

.ex-ag-btn--primary {
  color: black;
  background-color: #ffea3a;
}

/*
---
name: Codeblock
category: body
tag: latest
---

```html
<pre><code class="lang-html"><pre class="editor editor-colors"><div class="line"><span class="text html gohtml"><span class="meta tag block any html"><span class="punctuation definition tag begin html"><span>&lt;</span></span><span class="entity name tag block any html"><span>div</span></span><span>&nbsp;</span><span class="entity other attribute-name html"><span>class</span></span><span>=</span><span class="string quoted double html"><span class="punctuation definition string begin html"><span>"</span></span><span>aigis-header</span><span class="punctuation definition string end html"><span>"</span></span></span><span class="punctuation definition tag end html"><span>&gt;</span></span></span></span></div><div class="line"><span class="text html gohtml"><span>&nbsp;&nbsp;hoge</span></span></div><div class="line"><span class="text html gohtml"><span class="meta tag block any html"><span class="punctuation definition tag begin html"><span>&lt;/</span></span><span class="entity name tag block any html"><span>div</span></span><span class="punctuation definition tag end html"><span>&gt;</span></span></span></span></div></pre>
</code></pre>
```

*/
.aigis-module>pre:not([aria-hidden='true']) {
  background-color: #272822;
  color: #f8f8f2;
  font-size: 14px;
  position: relative;
  padding: 0.5em;
  border-radius: 3px;
  margin: 0 auto 3em;
  border: 1px solid #a0a0a0;
  max-height: 300px;
  overflow: auto;
}

.aigis-module>pre+pre {
  margin-top: -3em;
  margin-bottom: 3em;
}

.aigis-module>ul:not([class]) {
  list-style: disc;
  margin: 10px 30px;
}

.aigis-preview {
  border: 1px solid #a0a0a0;
  border-radius: 3px;
  border-radius: 3px 3px 0 0;
  padding: 20px 10px;
  padding: 16px;
  margin: 0;
  margin-top: 10px;
}

.aigis-preview p+p {
  margin-top: 10px;
}

.aigis-preview+pre {
  position: relative;
  border-radius: 0 0 3px 3px;
  border-top: none;
  margin-top: 0;
  height: auto;
  overflow-x: auto;
}

.aigis-module.Chart .aigis-preview {
  display: block;
}

.aigis-module.Chart .aigis-preview>div,
.aigis-module.Chart table,
.aigis-module.Chart table+pre,
.aigis-module.Chart pre+pre {
  display: inline-block;
  width: 49%;
  margin-right: 5px;
  vertical-align: middle;
}

.aigis-module.JsonView table:not(:last-of-type) td>pre {
  max-width: 270px;
}

/*
---
name: Sidemenu
category: layout/sidemenu
tag: latest
---

```html
<div class="aigis-sidemenu">
  <header class="aigis-header">
    <a href="../../index.html">Styleguide</a>
  </header>
  <h2 class="aigis-sidemenu__heading">Category</h2>
  <nav class="aigis-categoryList">

  </nav>
  <h2 class="aigis-sidemenu__heading">Tag</h2>
  <nav class="aigis-tags aigis-tagList">

  </nav>
  <h2 class="aigis-sidemenu__heading"><a href="../../color.html">All Colors</a></h2>
</div>
```

*/
.aigis-sidemenu {
  position: fixed;
  top: 50px;
  bottom: 0;
  left: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  width: 280px;
  border-right: 1px solid #d4dbe4;
  box-sizing: border-box;
  background-color: #fff;
  color: #33331a;
  -ms-overflow-style: none;
  overflow-x: auto;
}

.aigis-sidemenu::-webkit-scrollbar {
  display: none;
}

.aigis-sidemenu__heading {
  font-size: 30px;
  margin: 12px 0;
  color: #33331a;
  font-weight: normal;
  padding-left: 10px;
  line-height: 1em;
}

.aigis-sidemenu__heading a {
  color: inherit;
  text-decoration: none;
}

.aigis-preview .aigis-sidemenu {
  position: relative;
}

/*
---
name: Category list
category: layout/sidemenu
tag: latest
---

```html
<h2 class="aigis-sidemenu__heading">Category</h2>
<nav class="aigis-categoryList">
  <ul data-path-depth="0">
    <li data-path-depth="0">body</li>
    <li data-path-depth="0"><a href="#">layout</a>
      <ul data-path-depth="1">
        <li data-path-depth="1"><a href="#">sidemenu</a></li>
      </ul>
    </li>
  </ul>
</nav>
```

*/
.aigis-categoryList ul li {
  padding: 3px 10px;
  font-size: 14px;
  list-style: none;
}

.aigis-categoryList li a {
  display: block;
  position: relative;
  padding: 3px 10px 3px 10px;
  color: #454545;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  border-radius: 0px;
  outline: none;
  text-decoration: none;
}

.aigis-categoryList li:hover a[href]:hover {
  text-decoration: underline;
  color: #2a436b;
}

.aigis-categoryList li[data-path-depth] a:before {
  content: '';
  margin-right: 10px;
}

.aigis-categoryList li[data-path-depth='1'] a:before {
  margin-left: 1em;
}

.aigis-categoryList li[data-path-depth='2'] a:before {
  margin-left: 2em;
}

.aigis-categoryList li[data-path-depth='3'] a:before {
  margin-left: 3em;
}

.aigis-categoryList li[data-path-depth='4'] a:before {
  margin-left: 4em;
}

.aigis-categoryList li[data-path-depth] [data-tree-current],
.aigis-categoryList .current>a {
  background-color: #d2d2d2;
  color: #004ba9 !important;
  text-decoration: none !important;
}

/*
---
name: Tag list
category: layout/sidemenu
tag: latest
---

```html
<nav class="aigis-tags aigis-tagList">
  <a class="aigis-tags__item aigis-tags__item--deprecated" href="#">deprecated</a>
  <a class="aigis-tags__item aigis-tags__item--latest" href="#">latest</a>
</nav>
```

*/
.aigis-tags {
  padding: 10px;
  padding-left: 0;
  margin: 0;
}

/*
---
name: Module list
category: body
tag: latest
---

```html
<nav>
  <h2 class="aigis-module__heading">Modules</h2>
  <ul class="aigis-moduleList">
    <li class="aigis-moduleList__item">
      <a href="#header">header</a>
    </li>
    <li class="aigis-moduleList__item">
      <a href="#sidemenu">sidemenu</a>
    </li>
    <li class="aigis-moduleList__item">
      <a href="#category list">category list</a>
    </li>
    <li class="aigis-moduleList__item">
      <a href="#tags">tags</a>
    </li>
  </ul>
</nav>
```

*/
.aigis-moduleList {
  line-height: 1.6;
  font-size: 16px;
}

.aigis-moduleList__item a {
  color: #08f;
  text-decoration: none;
}

.aigis-moduleList__item a:hover {
  text-decoration: underline;
}

.aigis-module__heading {
  padding-bottom: 0.3em;
  font-size: 1.75em;
  line-height: 1.225;
  border-bottom: 1px solid #eee;
  position: relative;
}

.aigis-module__heading:hover a {
  position: relative;
}

.aigis-module__heading:hover a:before {
  content: '\00a7';
  position: absolute;
  right: 100%;
  bottom: 5px;
  font-size: 20px;
  color: #000;
  padding-right: 5px;
  padding-left: 5px;
}

/*
---
name: File path
category: body
---

```html
<div class="aigis-module__filepath">
  /aigis_assets/css/theme.css
</div>
```

*/

.aigis-module__filepath {
  display: block;
  text-align: right;
  font-size: 12px;
  color: #adadad;
}

/*
---
name: Color palette
category: layout/special
tag: special
---

```html
<div class="aigis-contents__body">
  <h2 class="aigis-module__heading">colors</h2>
  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #428b1c;"></div><div class="aigis-colorPalette__label">#428b1c</div></div>
  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #55b5db;"></div><div class="aigis-colorPalette__label">#55b5db</div></div>
  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #5B594B;"></div><div class="aigis-colorPalette__label">#5B594B</div></div>
  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #6272a4;"></div><div class="aigis-colorPalette__label">#6272a4</div></div>
  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #666;"></div><div class="aigis-colorPalette__label">#666</div></div>
  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #66d9ef;"></div><div class="aigis-colorPalette__label">#66d9ef</div></div>
  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #66D9EF;"></div><div class="aigis-colorPalette__label">#66D9EF</div></div>
  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #6be5fd;"></div><div class="aigis-colorPalette__label">#6be5fd</div></div>
  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #728fcb;"></div><div class="aigis-colorPalette__label">#728fcb</div></div>
  <div class="aigis-colorPalette"><div class="aigis-colorPalette__color" style="background-color: #75715E;"></div><div class="aigis-colorPalette__label">#75715E</div></div>
</div>
```

*/
.aigis-colorPalette {
  margin-top: 5px;
}

.aigis-colorPalette__color {
  display: inline-block;
  vertical-align: middle;
  height: 40px;
  width: 50%;
  margin-right: 5px;
}

.aigis-colorPalette__label {
  display: inline-block;
  vertical-align: middle;
  line-height: 40px;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  font-family:
    BlinkMacSystemFont,
    -apple-system,
    Dhurjati 'Nanum Gothic' 'Segoe UI',
    'Roboto',
    'Oxygen',
    'Ubuntu',
    'Cantarell',
    'Fira Sans',
    'Droid Sans',
    'Helvetica Neue',
    'Helvetica',
    'Arial',
    sans-serif;
}

.aigis-module>ul code,
.aigis-module>p code,
.aigis-contents__body>ul code,
.aigis-contents__body>p code,
.aigis-contents__body>h2 code,
.aigis-contents__body>h3 code {
  color: #666;
  background-color: #f7f7f7;
  padding: 0 3px;
  font-size: 1.2em;
  border-radius: 3px;
}

.aigis-container {
  box-sizing: border-box;
  width: auto;
  min-width: 960px;
  margin-right: auto;
}

.aigis-container:after {
  content: '';
  display: table;
  clear: both;
}

.aigis-contents {
  box-sizing: border-box;
  padding-right: 10px;
  padding-left: 280px;
  padding-top: 50px;
  margin: 0 auto;
  /* font-size: 18px; */
}

.aigis-contents__body {
  /* color: #33331a; */
  max-width: 960px;
  min-width: 600px;
  padding: 20px 20px;
  margin: 0 auto;
}

.aigis-contents__body>p {
  margin-bottom: 1em;
}

/*
main
*/
.aigis-main-page {
  padding: 10px;
}

/*
components 
*/
.aigis-contents .type-checkbox {
  height: 215px;
}