@charset "utf-8";

ol.code-writer {
  /* クラス名は任意（以下同）*/
  position: relative;
  margin: 40px 40px 20px 40px;
  padding: 0px 0px 0px 25px;
  border: none;
  background: #805656;
  font-size: 0.8em;
}
ol.code-writer:after {
  /* 左上のラベル部分 */
  position: absolute;
  font-family: FontAwesome;
  content: "\f121"; /* f121はアイコンの番号 */
  position: absolute;
  top: -25px;
  left: 0px;
  padding: 5px 10px;
  background: #969998;
  line-height: 1;
  font-size: 1.2em;
  color: #fff;
}
ol.code-writer li {
  /* 行番号とコードの間のライン */
  padding-left: 10px;
  color: #fff;
  padding: 2px;
}
ol.code-writer li:nth-child(odd) {
  background-color: #805656;
}
ol.code-writer li:nth-child(even) {
  background-color: #866161;
}

div.screen {
  /* クラス名は任意（以下同）*/
  position: relative;
  margin: 40px 40px 20px 40px;
  padding: 15px 0px 10px 25px;
  border: none;
  background: #5b4962;
  color: #fff;
  font-size: 0.9em;
}
div.screen:after {
  /* 左上のラベル部分 */
  position: absolute;
  font-family: FontAwesome;
  content: "\e163"; /* f121はアイコンの番号 */
  position: absolute;
  top: -26px;
  left: 0px;
  padding: 5px 10px;
  background: #969998;
  line-height: 1;
  font-size: 1.1em;
  color: #fff;
}