/**
 * Webkit specific way of ellipsis last line of a text that is too long to fit its container.
 * Non-webkit browsers will have overflow hidden applied, just not showing the ellipsis.
 */
/**
 * Mixin to use ellipsis for texts if they go beyond their allowed width
 * @param max-width
 */
#devguide {
  font-size: 14px;
  line-height: 1.5; }
  #devguide p {
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    margin: 0 0 10px; }
    #devguide p:last-child {
      margin-bottom: 0; }
  #devguide article > .box {
    margin-bottom: 16px; }
  #devguide .guide-example {
    background-color: rgba(7, 7, 7, 0.5);
    position: relative;
    padding: 16px;
    padding-top: 42px;
    margin-bottom: 16px; }
    #devguide .guide-example.no-padding {
      border: 0;
      padding: 42px 0 16px 0; }
    #devguide .guide-example.no-background {
      background: transparent; }
    #devguide .guide-example:before {
      position: absolute;
      top: 0;
      left: 0;
      content: "Example";
      padding: 3px 5px;
      background: rgba(255, 255, 255, 0.1); }
  #devguide .box header + .guide-example {
    margin-top: 1px; }
  #devguide .box .guide-example {
    margin-bottom: 0; }
  #devguide pre, #devguide code {
    background: rgba(0, 0, 0, 0.45);
    font-size: 12px;
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    cursor: text;
    padding: 0 8px;
    line-height: 20px; }
  #devguide code {
    display: inline-block; }
  #devguide pre {
    padding: 8px 16px;
    margin-bottom: 16px; }
    #devguide pre:last-child {
      margin-bottom: 0; }
  #devguide button.run {
    position: absolute;
    right: 20px;
    margin-top: 4px;
    z-index: 1; }
  #devguide .guide {
    margin-bottom: 50px; }
    #devguide .guide.spacing-top {
      margin-top: 16px; }
  #devguide .guide-grids .row [class*="span"], #devguide .guide-grids .row-tight [class*="span"] {
    line-height: 40px;
    background: rgba(0, 43, 87, 0.7);
    text-align: center;
    font-size: 12px; }
    #devguide .guide-grids .row [class*="span"]:hover, #devguide .guide-grids .row-tight [class*="span"]:hover {
      background: #002b57; }
  #devguide .guide-grids .row {
    margin-bottom: 16px; }
  #devguide .guide-grids .row-tight {
    margin-bottom: 1px; }
  #devguide #quick-links {
    list-style: disc;
    margin-left: 20px; }
  #devguide table.table td {
    white-space: normal; }