.article {
    font-family: 'Roboto', sans-serif !important;
}
.article p, .article ul {
    display: block;
    float: none;
    clear: both;
}

ul.paragraphed {
  margin-top: 0;
  padding-top: 0;
}

ul.list-101-dark-grey,
ul.list-101-dark-grey ul,
ol.list-101-dark-grey,
ol.list-101-dark-grey ol {
  border-width: 0;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

ul.list-101-dark-grey li {
  padding-left: 20px;
  border-width: 0;
  border-left-width: 20px;
  border-left-color: #3a3a3a;
  border-style: solid;
  margin-bottom: 10px;
}

ol.characters-marked-list li {
  list-style-type: lower-alpha;
}




/* tutorial display & position */

h2.display-position,
h2.display-position code {
  font-size: 22px;
  /*color: #ffcc54;*/
}
h3.display-position {
  font-size: 18px;
  color: #ffcc54;
}

.display-block-parent {
  display: block;
  width: 100%;
  border: 1px solid #ddd;
  padding: 3px;
  margin-bottom: 20px;
}
.display-block-parent.flex {
  display: flex;
}

#display-full-width,
#display-half-width,
#display-300px-width {
  border: 2px solid #999;
  height: 150px;
  margin-bottom: 2px; 
  padding: 5px;
  background: #666;
  color: #fff;
}
#display-half-width {
  max-width: 50%;
}
#display-300px-width {
  width: 300px;
}
#display-full-width code,
#display-half-width code,
#display-300px-width code {
  color: #ccc;
}
#display-full-width.width-20,
#display-half-width.width-20,
#display-300px-width.width-20 {
  width: 20%;
}
.grow-1 {
  /*width: auto;*/
  flex-grow: 1;
}
.grow-2 {
  /*width: auto;*/
  flex-grow: 2;
}

.flex-start { justify-content: flex-start; }
.flex-end { justify-content: flex-end; }
.flex-center { justify-content: center; }
.flex-between { justify-content: space-between; }
.flex-around { justify-content: space-around; }
.flex-evenly { justify-content: space-evenly; }

/* end tutorial display & position */


/* box-model */

.box-model {
  display: block;
  width: 600px;
  height: 250px;
  margin: 5px;
  padding: 15px;
  border: 2px solid #000;
  background: #666;
  color: #fff;
}
.content-box {
  box-sizing: content-box;
}
.border-box {
  box-sizing: border-box;
}
.box-model code {
  color: #ccc;
}

/* end box-model */