/**
 * Grid
 */
#grid {

    /* Vertical grid lines */
    background: url(grid.png) repeat-y 0 0;

    /* Dimensions - same width as your grid with gutters */
    width: 976px;

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

}


/**
 * 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 {

    height: 15px;
    border-bottom: 1px dotted #f00;
    opacity: 0.15;
    margin: 0;
    padding: 0;

}

.defaultBack {
	overflow: hidden;
	margin: 0 0 30px 0;
}

.contrastBack {
	background: #ccc;
	overflow: hidden;
	margin: 0 0 30px 0;
}
	
	.defaultBack button,
	.defaultBack a.button,
	.contrastBack button,
	.contrastBack a.button {
		margin: 10px 10px 0 10px;
	}