/**
 * HashGrid from http://hashgrid.com/
 * only visible for webmaster users
 */
#grid {
  .hashgrid (@gridColumnWidth, @gridGutterWidth, @baseLineHeight) {
    #bsgrid{
      /* Dimensions - same width as your grid with gutters */
      width: (@gridColumnWidth * @gridColumns) + (@gridGutterWidth * (@gridColumns + 1));
      margin-left: -((@gridColumnWidth * @gridColumns) + (@gridGutterWidth * (@gridColumns + 1)))/2;
    }

    /**
     * Vertical grid lines
     *
     * Set the column width taking the borders into consideration,
     * and use margins to set column gutters.
     */
    #bsgrid div.vert{
        width: @gridColumnWidth - 1px;
        border: solid darkturquoise;
        border-width: 0 1px;
        margin-right: @gridGutterWidth - 1px;
    }
    #bsgrid div.vert.first-line{
        margin-left: @gridGutterWidth - 1px;
    }

    /**
     * Horizontal grid lines, defined by your base line height
     *
     * Remember, the CSS properties that define the box model:
     * visible height = height + borders + margins + padding
     */
    #bsgrid div.horiz{
        /* 20px line height */
        height: @baseLineHeight - 1px;
        border-bottom: 1px dotted darkgray;
        margin: 0;
        padding: 0;

    }
  }
}

// Fixed (940px)
#grid > .hashgrid(@gridColumnWidth, @gridGutterWidth, @baseLineHeight);
@media (min-width: 768px) and (max-width: 979px) {
  #grid > .hashgrid(@gridColumnWidth768, @gridGutterWidth768, @baseLineHeight);
}
@media (min-width: 1200px) {
  #grid > .hashgrid(@gridColumnWidth1200, @gridGutterWidth1200, @baseLineHeight);
}
#bsgrid{
    /* Grid (left-aligned)
    position: absolute;
    top: 0;
    left: 0;
    margin-left:0;
    */

    /* Grid (centered) */
    position: absolute;
    top: 0;
    left: 50%;
}