/**
 * Grid
 */
#grid {
	/* Dimensions - same width as your grid with gutters */
	width: 980px;

	/* Grid (left-aligned)
	position: absolute;
	top: 0;
	left: 0;
	*/

	/* Grid (centered) */
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -490px;

	z-index: 1;
}

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

#grid div.vert.first-line {
	margin-left: 19px;
}

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

/**
* Classes for multiple grids
*
* When using more than one grid, remember to set the numberOfGrids
* option in the hashgrid.js file.
*/
#grid.grid-1 div.vert {
	/* Vertical grid line colour for grid 1 */
	border-color: darkturquoise;
}

#grid.grid-2 {
	/* Adjustments */
	padding: 0 160px;
	width: 660px;
}

#grid.grid-2 div.vert {
	/* Vertical grid line colour for grid 2 */
	border-color: crimson;
}