hugrid.css

/* 
 * Heads-Up Grid
 * Simple HTML + CSS grid overlay for web design and development.
 *
 * Files: hugrid.css, hugrid.js, example.html
 * 
 * Example and documentation at: http://bohemianalps.com/tools/grid
 * 
 * Shurane, thanks for your help! https://github.com/shurane
 * 
 * Copyright (c) 2011 Jason Simanek
 *
 * Version: 1.5 (09/03/2011)
 * Requires: jQuery v1.6+
 *
 * Licensed under the GPL license:
 *   http://www.gnu.org/licenses/gpl.html
*/

/* Default Heads-Up Grid Properties - These will be overwritten by the values entered in the document.ready function. */
#hugrid {
    width:960px; /* width of webpage */
    margin-left:-480px; /* to center the grid, set half of webpage width as negative value */
}
#hugrid div {
    margin-left:140px; /* width of column */
    width:24px; /* width of column gutter */
}

/* Default Heads-Up Grid Styles - These styles allow you to change the color and style of the lines that make the Heads-Up Grid */
#hugrid div div {
    border-color:#FF00EB; /* color of grid line */
    border-style:solid; /* style of grid line (dotted, dashed, solid) */
    opacity:0.3; /*opacity of grid line */
}
#hugrid div:hover {
    background-color:#36F3FF; /* color of gutter on :hover */
}
#hugrid div.mline {
    border-color:#AA82FF; /* color of margin line */
    border-style:solid; /* style of margin lines (dotted, dashed, solid) */
}
#hugridRows {
	border-color:#AA82FF; /* color of top margin line */
	border-style:solid; /* style of top margin line */
}
#hugridRows div.lineB {
	border-color:#5DFF35; /* color of row line */
	border-style:solid; /* style of row line */
    opacity:0.3; /*opacity of row line */
}
#hugridRows div.lineB:hover {
	border-color:#5DFF35; /* color of row line on :hover */
	border-style:solid; /* style of row line on :hover */
    opacity:1.0; /*opacity of row line on :hover */
}

/* ------------------------------------------------------------------------- */
/* Fixed Styles (No need to alter the below styles for standard grid needs.) */
#hugrid {
    position:fixed;
    z-index:100000;
    top:0;
    left:50%;
    height:0;
    margin-top:0;
    margin-right:0;
    margin-bottom:0;
    padding:0;
    cursor:crosshair;
}
#hugrid div {
    display:block;
    float:left;
    position:relative;
    top:0;
    border-width:0;
}
#hugrid div div {
    margin:0;
    width:0;
}
#hugrid div div.lineL {
    float:left;
    height:10000px;
    border-width:0 0 0 1px;
}
#hugrid div div.lineR {
    float:right;
    height:10000px;
    border-width:0 1px 0 0;
}
#hugrid div.mline {
    margin:0 0 0 -1px;
    width:0;
    height:100000px;
}
#hugrid div.mlineL {
    border-width:0 1px 0 0;
}
#hugrid div.mlineR {
    float:right;
    margin-right:-1px;
    border-width:0 0 0 1px;
}
#hugrid div:hover {
    opacity:0.5;
}
#hugrid div:hover div.lineL,
#hugrid div:hover div.lineR {
    border-style:solid;
    opacity:1.0;
}
#hugridRows {
	position:absolute;
	z-index:90000;
	top:-1px;
	left:0;
	width:100%;
	height:0;
	margin:0;
	padding:0;
	border-width:1px 0 0 0;
	cursor:crosshair;
}
#hugridRows div {
	display:block;
	width:100%;
	height:1px;
	margin:0;
	padding:0;
}
#hugridRows div div.lineB {
	margin:0;
	border-width:0 0 1px 0;
}
#hugridUX {
    display:block;
    position:fixed;
    z-index:200000;
    top:0;
    right:0;
    margin:0;
    padding:4px;
    font:bold 11px/100% Arial,sans-serif;
    color:#AAA;
    text-align:center;
}
#hugridUX div#hugridButtonBkgd {
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background-color:#333;
    border-radius:0 0 0 16px;
    opacity:0.3;
}
#hugridUX button#hugridButton {
    cursor:pointer;
    position:relative;
    width:28px;
    margin:0;
    padding:8px 2px;
    background-color:#5DFF35;
    border-radius:40px;
    border-width:0;
    box-shadow:0 0 2px #666;
    outline:0;
    font:bold 11px/100% Arial,sans-serif;
}
#hugridUX button#hugridButton::-moz-focus-inner {
    border:0;
}
#hugridUX button#hugridButton.buttonisoff {
    background:none;
    box-shadow:none;
}
#hugridUX button#hugridButton.buttonisoff:hover {
    background-color:#999;
}
#hugbuttonON {
    color:#333;
}
#hugbuttonOFF {
    color:#333;
}