/* fonts */
@font-face{
  font-family: purisa;
  src: url(../fonts/Purisa.ttf);
}

@font-face{
  font-family: dejavu;
  src: url(../fonts/DejaVuSans.ttf);
}

@font-face{
  font-family: monospace;
  src: url(../fonts/DejaVuSansMono.ttf);
}

@font-face{
  font-family: robotoBlack;
  src: url(../fonts/Roboto-Black.ttf);
}

/* global defaults */
body{
  font-family: dejavu;
  font-size: 20px;
  line-height: 1.65;
  color: #444;
}

div.topnav{
  display: flex;
  text-align:right;
}

.align-right{
  margin-left: auto;
  margin-right: 0;
 }

.txtAlignLeft{
  text-align: left;
}

a.btn{
  display: inline-flex;
  align-items: center;

  border: none;
  color: #fff;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 16px;

  background: #f78d1d;
  	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
  	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
}

a.btn:hover{
  background: -webkit-gradient(linear, left top, left bottom, from(#fecf6f), to(#f47a20));
  background: -moz-linear-gradient(top,  #fecf6f,  #f47a20);
}


/* homepage*/

div.home-container{
  width: 86%;
  max-width: 1280px;
  margin-right: auto;
  margin-left: auto;
  clear:both;
}

div{
  /* for debugging layout*/
  /*border:solid #ccf 1px;*/
}

div.home-h1{
  text-align: center;
}

h1.home-h1{
  font-family: purisa;
  font-weight: bold;
  font-size:64px;
  margin:0px;
}

div.home-blurb{
  font-size: 28px;
  text-align: center;
}

div.home-hero-img{
  float:right;
  margin-bottom:50px;
}

.home-stdpad{
  padding:12px;
}

.home-post-link{
  display: flex;
}

.home-post-link-img{
  flex:180px;
}

.home-post-link-blurb{
  flex:1100px;
  padding-left:12px;
}

.home-post-link-blurb a{
  color:#66f;
  font-size:26px;
  font-weight: bold;
  text-decoration: none;
  font-family: purisa;
}

.home-post-link-blurb a:hover{
  color:#99f;
}

/* articles */

div.articlepad{
  padding:20px;
  color:#000;
}

div.article-header{

}

div.article-h1{
  text-align: center;
}

div.h1-container{
  padding:100px;
}

.article-h1 h1{
  font-family: purisa;
  font-weight: bold;
  font-size:64px;
  margin:0px;
}

div.article-container{
  display: flex;
  min-height: 80vh;
}

div.article-main{
  order: 2; min-width: 12em; flex:1;
}

p.article-intro{
  font-size: 24px;
}
/*
h2.article{
  font-family: purisa;
  font-size: 40px;
}
*/
h2{
  font-family: purisa;
  font-size: 40px;
}


ul.article-inventory{}

ul.article-inventory li{
  color:#333;
}

.paid-links{
  color: #666;
  font-style: italic;
}

ol.article-list{}

ol.article-list li{
  font-family: robotoBlack;
  font-size:36px;
}

h3.article{
  font-family: purisa;
  font-size:30px;
}

p{
  font-family: dejavu;
  font-size:20px;
}

p.last-updated{
  font-style: italic;
  color:#669;
}

div.article-left{
  order: 1; width: 200px;
}

div.article-right{
  order: 3; width: 500px;
}

div.article-footer{
  text-align: center;
  font-size: 80%;
  margin-bottom: 40px;
}

div.centred{
  display: flex;
  justify-content: center;
}

pre.code{
  padding: 20px;
  border-radius: 10px;
  white-space: pre-wrap;
}

pre.code, code{
  font-family: monospace;
  color:#cfc;
  background-color: #333;
  padding-left: 10px;
  padding-right: 10px;
}

pre.scrollingcode{
  overflow:auto;
  font-family: monospace;
  color:#cfc;
  background-color: #333;
  padding-left: 10px;
  padding-right: 10px;
}

pre.maxheight500{
  max-height:500px;
}

.code-hi{
  color: #0f0;
}

code.ref{
  font-family: monospace;
  color:#666;
  background-color: inherit;
  padding: 0px;
}

pre.arduino-console{
  font-family: monospace;
  font-size: 60%;
  color:#fff;
  background-color: #000;
  padding: 10px;
  margin-top: 0px;
  border-radius: 0px 0px 15px 15px;
}

pre.arduino-console span.error{
  color:#f00;
}

pre.arduino-console.status-ok{
  color:#030;
  background-color: #5edfe1;
  margin-bottom: 0px;
  border-radius: 15px 15px 0px 0px;
}

pre.arduino-console.status-bad{
  color:#fff;
  background-color: #f60;
  margin-bottom: 0px;
  border-radius: 15px 15px 0px 0px;
}

table.std {border-collapse:collapse; align-self: center;}
table.std td{border: 1px solid #000; padding:12px; font:inherit; text-align:center;}
table.std td.code{border: 1px solid #000; padding:12px; font-family: monospace; text-align:center;}
table.std th{border: 1px solid #000; padding:12px; font:inherit; font-weight: bold; text-align:center;}
table.std td.txtAlignLeft{text-align: left;}
table.std td.font12px{font-size: 12px;}

.code{
  font-family: monospace;
}

.hi1{
  background-color: #dcf;
}

.xor{
  mix-blend-mode: difference;
}

.lo{
  color:#999;
}

.font12px{
  font-size: 12px;
}

span.warning{
  font-weight: bold;
  color: #f00;
}

span.fatpink{
  font-weight: bold;
  color: #f99;
}

span.cartoon{
  font-family: purisa;
  font-size: 150%;
}

span.asterisk{
  font-weight: bold;
  font-size: 150%;
}

/* need this? */
ol.fatpink li::marker {
  color: #fa098b;
  font-weight: bold;
  font-family: purisa;
  font-size: 30px;
}

figure.centred{
  text-align:center;
  padding: 20px;
}

figcaption{
  color:#666;
  font-size:80%;
}

.centred{
  text-align: center;
}

.tooltip{
  color:#096;
  border-bottom:dotted 1px #096;
  cursor: help;
}

.tooltip .tooltip-popup{
  visibility: hidden;
    max-width: 400px;
    background-color: #999;
    color: #fff;
    text-align: center;
    padding: 10px;
    border-radius: 6px;
    position: absolute;
    z-index: 100;
}

.tooltip:hover .tooltip-popup{
  visibility: visible;
}

ul.nav{
  list-style-type: none; /* Remove bullets */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margins */
}

ul.nav li{margin-bottom: 20px;}

ul.nav li{
  color:#999;
}

ul.nav li a{
  color:#99f;
}


/* CSS for numbering steps using <Hx> tags. the <figure> tag breaks the stylesheet inside <ol> or <ul> :( )*/
div.steps {
	counter-reset : h3-step-counter;
}

div.steps h3 {
	counter-reset : h4-step-counter;
}

div.steps h4 {
	counter-reset : h5-step-counter;
}

div.steps h5 {
	counter-reset : h6-step-counter;
}

div.steps h3:before {
	content : counter(h3-step-counter,decimal) ". " ;
	counter-increment : h3-step-counter;
}

div.steps h4:before {
	content : counter(h3-step-counter,decimal) "." counter(h4-step-counter,decimal) ". ";
	counter-increment : h4-step-counter;
}

div.steps h5:before {
	content : counter(h3-step-counter,decimal) "." counter(h4-step-counter,decimal) "." counter(h5-step-counter,decimal) ". ";
	counter-increment : h5-step-counter;
}

div.steps h6:before {
	content : counter(h3-step-counter,decimal) "." counter(h4-step-counter,decimal) "." counter(h5-step-counter,decimal) "." counter(h6-step-counter,decimal) ". ";
	counter-increment : h6-step-counter;
}

/* commentix section CSS */
div.cmtx_form_section{
  font-family: dejavu;
}


@media all and (max-width: 600px) {
    /* Too narrow to support three columns */
    .article-container { flex-flow: column; }
    .article-container, .article-container, .article-container {
      /* Return them to document order */
      order: 0; width: auto;
    }
  }