[v-cloak] { display: none }

#page-articles-editor {
  max-width: 1200px;
  margin: 0 auto;
}
#page-articles-editor .ui.attached.button {
  box-shadow: none !important;
  margin: -1px -1px 0 -1px;
  padding-right: 1px;
  width: 100%;
}

.article-background-spacer {
  height:100px;
  margin: 0 0 -100px 0;
  background-position: bottom;
  background-image: url(/img/backgrounds/optimized/waves-brown-3.png);
  background-repeat: no-repeat;
  background-size: 1455px 523px;
  background-color: #362f27;
}

#page-articles { 
  /*padding: 30px 0 30px 0; */
  /*background: #fff;*/
  /*background: #f9f8f4;*/
}

#page-articles #article-container { 
/*#page-articles #article-main-text { */
  /*width: 800px; */
  max-width: 1220px;
  margin: 0px auto 0 auto;
  /*max-width: 800px */
  /*width: 900px; */
  /*width: 100%; */
  padding-top: 20px;
}

#page-articles {

  background: #f5f3ea;

}


#page-articles #articles-index-container .hero {

  background: rgba(0,0,0,.0);

  background: #362f27;

  background-position: 0 -300px;
  background-image: url(/img/backgrounds/optimized/waves-brown-3.png);
  background-repeat: no-repeat;
  background-size: 1455px 523px;
  background-color: #362f27;

  /*background: #11292B url('/img/photos/forest-swampy-1-small.jpg');*/
  /*background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/topography.png');*/
  /*background-repeat: */

  /*background-size: cover;*/

  /*background-position: top center;*/

  padding: 50px 0 10px 0;

  margin: -20px 0 0 0;

}

#page-articles #articles-index-container .container { 
  max-width: 900px 
  margin: 0 auto 0 auto;
}

.ui.form textarea#markdown-textarea { 
  font: 18px 'Consolas', 'Lucida Console', 'Courier', 'Courier New' !important;
  padding: 20px 8px;
  border: 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  height: auto;
  min-height: 300px;
}

.CodeMirror, .CodeMirror-scroll {
    height: auto !important;
    min-height: 70px !important;
}

#page-articles table { border-top:1px solid #ddd; border-left:1px solid #ddd; }
/*#page-articles table td, table th { padding: 8px 12px; background:#fff; border-right:1px solid #ddd; border-bottom:1px solid #ddd; font-size: 14px; }*/

#page-articles h1.main { 
  /*font-family: 'Yellowtail';*/
  /*font-family: 'Shrikhand', cursive !important;*/
  /*font-family: 'Yellowtail', cursive !important;*/
  /*font-family: 'Arvo', cursive !important;*/
  /*font-family: 'Fredoka One', cursive !important;*/
  color: #fff; 
  margin: 0px 0 30px 0; 
  font-size: 40px; 
  font-weight: 600; 
  /*font-weight: 400; */
  /*font-style: italic;*/
  /*text-shadow: 0 0 30px #11292B, 0 0 30px #11292B;*/

}

#page-articles h1.title {text-align:left; font-size: 32px; font-weight: 600; margin-top:0px;}
#page-articles .main-article-text > h1 {text-align:left; font-size: 32px; margin:-50px 0 18px 0; padding-top:50px; font-weight: 600;}
#page-articles .main-article-text > h2 {text-align:left; font-size: 28px; margin:-30px 0 18px 0; padding-top:50px; font-weight: 600;}
#page-articles .main-article-text > h3 {text-align:left; font-size: 24px; margin:-30px 0 18px 0; padding-top:50px; font-weight: 600; color: #555; }
#page-articles .main-article-text > h4 {text-align:left; font-size: 20px; margin:30px 0 10px 0;}
#page-articles .main-article-text > h5 {text-align:left; margin:0 0 10px 0; font-weight: bold !important; }

#page-articles .main-article-text .ui h2 { margin: 0 0 20px 0; padding-top: 0px; text-align:left; }
#page-articles .main-article-text .ui h3 { margin: 0 0 20px 0; padding-top: 0px; }
#page-articles .main-article-text .ui h4 { margin: 0 0 20px 0; }
#page-articles .main-article-text .ui h5 { margin: 0 0 20px 0; }


#page-articles .sidebar-header-size-H1 { font-size: 16px !important; font-weight: 600; color:#000 !important; margin-top: 20px !important; }
#page-articles .sidebar-header-size-H2 { font-weight: 600; color:#333 !important; }
#page-articles .sidebar-header-size-H3 { font-weight: 400; }

#page-articles .main-article-text p, .main-article-text li { 
  font-size: 16px; 
  line-height: 180%; 
}
#page-articles .main-article-text li {font-size:16px; margin:0px 0 4px 0; padding-left: 0; }
#page-articles .main-article-text li li {font-size:16px; margin:0px 0 4px 0; padding-left: 0; }
#page-articles .main-article-text ul {margin:20px 0 24px 0; padding-left: 18px; }
#page-articles .main-article-text ol {margin:20px 0 24px 0; padding-left: 18px; }
#page-articles .main-article-text ol ul, .main-article-text ol ol, .main-article-text ul ul, .main-article-text ul ol {margin:8px 0 12px 0; padding-left: 20px; }
#page-articles .main-article-text hr { margin: 40px 0; border:2px solid #eee; }
#page-articles .main-article-text blockquote {text-align:left; padding: 0 0 0 10px; border-left: 2px solid #ddd; color: #555; font-size: 16px; margin-left: 0;}


#page-articles .main-article-text { }
#page-articles .main-article-text img { display:inline-block; max-width:100%; height:auto; margin:20px 0; border:1px solid #d8d8d8; }
#page-articles .main-article-text .title-anchor { position:relative; }


#page-articles div.tip { padding:9px 9px 10px 15px; background:#f6f5f3; border-left: 3px solid #9da; margin:22px 0 8px -12px; }
/*div.tip { background:#f6f4f0; padding:6px 9px 7px 9px; border-left: 2px solid #e9e5d5; margin:4px 0 8px 0; }*/


#page-articles .container-narrow {max-width:990px;margin:0 auto;}

#page-articles .search-container { margin: 0 0 30px 0; padding: 30px 0; background: rgba(0,0,0,.1); }
#page-articles #search-box { font-size:20px; padding:8px 10px; border:2px solid #e5e5e5; width:100%;}
#page-articles #search-box:focus { outline: none; border-color: #ccc; }
#page-articles #search-results { font-size: 18px; display:none; border:1px solid #eee; min-height:20px; border-top: 0; }
#page-articles #search-results ul {padding:0px;  margin:0; }
#page-articles #search-results ul li { margin:0; padding:0; list-style:none;}
#page-articles #search-results ul li a {padding:12px 10px; border-bottom:1px solid #eee; display:block;}
#page-articles #search-results ul li a:hover {background:#f7f7f7;}


#page-articles .categories { margin:0 -1% 0 -1%; }
#page-articles .categories .category { display: inline-block; width:31%; vertical-align: top; margin:0 1% 20px 1%; }
/*#page-articles .categories .category { display: inline-block; width:28%; vertical-align: top; margin:0 30px 50px 0; }*/
#page-articles .categories .category h2 { font-size: 22px; font-weight: 600; text-align:left; margin:0 0 20px 0; padding-top: 0;  }
#page-articles .categories .category ul { list-style:none; margin: 0; padding:0;}
#page-articles .categories .category li { list-style:none; margin: 0; padding:0px 0 10px 0; font-size: 16px; border-bottom: 1px solid #ddd; margin: 0 0 10px 0 }
#page-articles .categories .category li:last-child { border:none }


#page-articles .articles-sidebar .author { }
#page-articles .articles-sidebar .author .written-by { color:#999; }

#page-articles .articles-sidebar { }
#page-articles .articles-sidebar .headers { max-width: 250px; padding-bottom: 30px; }
#page-articles .articles-sidebar .headers a { display:block; padding: 0 0 4px 0; margin: 0 0 12px 0; font-size:14px; color:#777; max-width:100%;}
#page-articles .articles-sidebar .headers a:hover { color: #000; }
#page-articles .articles-sidebar .headers.affix-top {}
#page-articles .articles-sidebar .headers.affix { top:0px; }
#page-articles .articles-sidebar .headers.affix-bottom { }

#page-articles .articles-sidebar-container .help-title {
  /*font-family: "Arvo", serif !important;*/
  font-size: 20px;
  /*font-weight: 600;*/
}

#page-articles .main-article-text .headers { margin: 0 0 10px 0; }


#page-articles #article-main-text .author { display:none; margin: 20px 0 20px 0; font-size:14px; color: #777; }
#page-articles #article-main-text .author .written-by { color: #aaa; }
#page-articles #article-main-text .author div {display:inline-block; }

#page-articles #article-main-text .headers a { display:inline-block; border-bottom:1px solid #ddd; padding: 0 0 4px 0; margin: 0 16px 0 0; font-size:14px; vertical-align:top; }

#page-articles #article-main-text pre {
  background: #f1f1f1;
  border: 0;
  border-bottom: 2px solid #e5e5e5;
  border-radius: 4px;
  padding: 8px 12px;
}

#page-articles #article-main-text code {
  display: inline;
  /*display: inline-block;*/
  /*padding: 4px 6px;*/
  padding: 4px 5px;
  margin: 0 2px;
  color: #555;
  background: #f1f1f1;
  border-radius: 3px;
  border-bottom: 0;
}

#page-articles #article-main-text pre code {
  display: inline;
  padding: 0;
  margin: 0;
  color: #555;
  background: transparent;
  border-radius: 0;
  border-bottom: 0;
}

@media screen and (max-width:991px) {

  #page-articles h1.title {margin-bottom: 0px !important}

  #page-articles .very.padded { padding: 20px }

  #page-articles #article-main-text .author { display: block; }

}