/* BASE / GLOBAL
   ------------------------------------------------------------------ */
   html {
      font-size: 75%; /* 12px | set default fornt size on html for rem size to work */
      line-height: 1.5; /* 18px | to establish a vertical rhythm pay attention to vertical spacing ( margin, padding, border, top, bottom ) and sizing ( height ). They should be set in fractions or multiples of 18px */
      font-family: sans-serif;
      overflow-y: scroll; /* force a vertical scrollbar on short pages to avoid jump when navigating between short and long pages */
      }

   body {
      margin-bottom: 1.5em;
      background-color: #fff; /* ??? should background-color and color be on html */
      color: #333;
   /* text-size-adjust for mobile */
      -webkit-text-size-adjust: 100%;
          -ms-text-size-adjust: 100%;
      }

/* lists */
   dl { margin: .75em 0; }
   dd { margin: .75em 0 .75em 2em; } /* based on a 12px default font size, margin is 9px or half line height | line-height:1.5; margin:0 0 0 40px; */

   ol, ul {
      margin: 0 0 1.5em; /* set bottom margin of 18px or the same as line height */
      padding: 0 0 0 3em; /* 0 0 0 40px */
      }

   ul ul,
   ol ol { margin-bottom: 0; }

   hr {
      margin-bottom: 18px;
      margin-bottom: 1.5rem;
      border: 0;
      height: 1px;
      background: #777;
      color: #777;
      background-image: -webkit-linear-gradient(left, #fff, #777, #fff);
      background-image:    -moz-linear-gradient(left, #fff, #777, #fff);
      background-image:     -ms-linear-gradient(left, #fff, #777, #fff);
      background-image:      -o-linear-gradient(left, #fff, #777, #fff);
      }

/* Links */
   a { color: #36c; }

   a:visited { color: #969; } /* 93c */

   a:hover,
   a:focus,
   a:active {
      color: #d21034;
      text-decoration: none;
      }

   a:active { outline: 1px dotted #d21034; }

/* external */
   a[rel="external"] { /* Needs to be set explicitly in HTML */ 
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RENERkNCRTE2NDM4MTFFMzk1QTI5MzI5QzYwM0YxRkUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RENERkNCRTI2NDM4MTFFMzk1QTI5MzI5QzYwM0YxRkUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpEQ0RGQ0JERjY0MzgxMUUzOTVBMjkzMjlDNjAzRjFGRSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEQ0RGQ0JFMDY0MzgxMUUzOTVBMjkzMjlDNjAzRjFGRSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk61YREAAAAGUExURQAAAP///6XZn90AAAACdFJOU/8A5bcwSgAAACZJREFUeNpiYEQDDDgEGMAApwCKJHYBDC3I1jGgmIjHHTQWAAgwAG7KANwQZmt2AAAAAElFTkSuQmCC") no-repeat right 40%;
      padding-right: 16px;
      }

   img {
      border: 0;
      max-width: 100%;
      height: auto;
      vertical-align: middle;
      }