.pun .geshicodebox {
  overflow-y:auto;
  overflow: auto;
  width: 95%;
  direction: ltr;
  text-align: left;
  font-size: 10pt;
  max-height: 22em;
  white-space: nowrap;
  padding: 1em;
  background-color: rgb(251, 250, 249);
  color: black;
  margin: 0.5em;
  border-color: rgb(85, 85, 85);
  box-shadow: 0px 0px 5px rgb(187, 187, 187) inset;
  margin-left: 1em;
}

.pun div.code_root {
  margin-left: 0.5em;
  border-color: rgb(170, 85, 85) rgb(170, 85, 85) rgb(170, 85, 85) rgb(170, 0, 0);
  box-shadow: 0px 0px 5px rgb(170, 136, 136) inset;
  border-left: 0.5em solid rgb(170, 0, 0);
}

.pun div.code_user {
  margin-left: 0.5em;
  border-color: rgb(85, 85, 85);
  box-shadow: 0px 0px 5px rgb(187, 187, 187) inset;
  border-left: 0.5em solid rgb(85, 85, 85);
}

.pun div.code_root:before, .pun div.code_user:before {
  border-bottom: 0px dotted black;
  margin: -1em -1em 0 -1em;
  padding: 0.1em 0.5em 0.5em 0.5em;
  margin-bottom: 0.5em;
  height: 1em;
  text-align: left;
  display: block;
  font-size: small;
  font-style: italic;
}
.pun div.code_root:before {
  content: "en root";
  background: url(images/root.png) no-repeat right;
  background-size: contain;
}
.pun div.code_root:hover:before {
  content: "Ce code doit être entré dans un shell super-utilisateur.";
}

.pun div.code_user:before {
  content: "en user";
  background: url(images/user.png) no-repeat right;
  background-size: contain;
}
.pun div.code_user:hover:before {
  content: "Ce code doit être entré dans un shell utilisateur simple.";
}