/* Violet Brain Grid 960-System
-------------------
Features: 
-12 Column grid system. 60px width, with 20px margins. 10px L-R Side Margins.
-An attempt at perfect typography that is built on lineheight changes for perfect alignment
-A system that can be used to build beautiful websites that need good solid layouts that are not heavy in graphical nature but are beautiful in reading nature
-Very good markup for editing

-------------------

Version: 1.0 

-------------------

Licensing: Use it all you want, just give me credit somewhere in your css like I give meyer credit below in my resit

-------------------

Tribute to : Jesse James McLaughlin for convincing me to go ahead and start working on this system. 

-------------------


*/



/* meyer reset v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* END RESET */



/* ---------------------------VIOLET BRAIN GRID SYSTEM STRUCTURE FORMATTING---------------------------- */

/* ----------------- HTML FORMATTING ----------- */

html {
	}
	
/* ----------------- BODY FORMATTING (VBGBODY) ------------- */

#vbgbody {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
	}
	
/* -----GRID MARGIN gm10 pushes all content inside in 10px L/R-------- */

#vbgbody #gm10 {
	margin-left: 10px;
	margin-right: 10px;
	}
	
	
	
/* -------Main Column Structure Formatting--------- */
#vbgbody #mc1 {
	width: 60px;
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	}	
#vbgbody #mc2 {
	width: 140px; /*60+60+20*/
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	}	
#vbgbody #mc3 {
	width: 220px; /*60+60+60+20+20 = 220px */
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	}	
#vbgbody #mc4 {
	width: 300px;
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	}	
#vbgbody #mc5 {
	width: 380px;
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	}	
#vbgbody #mc6 {
	width: 460px;
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	}
#vbgbody #mc7 {
	width: 540px;
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	}	
#vbgbody #mc8 {
	width: 620px; /* 8 columns 7 gutters = (8x60)+(7x20) = 620 width for mc8 */
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	}
#vbgbody #mc9 {
	width: 700px;
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	}
#vbgbody #mc10 {
	width: 780px;
	float: left;
	}
#vbgbody #mc11 {
	width: 860px;
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	}	
#vbgbody #mc12 {
	width: 940px;
	float: left;
	margin-right: 10px;
	margin-left: 10px;
	}
	
/* RIGHT SIDE COLUMN STRUCTURE FORMATTING: all have float left with a 20px margin left */

#vbgbody #rsc1 {
	width: 60px;
	float: left;
	margin-left: 10px;
	}
#vbgbody #rsc2 {
	width: 140px;
	float: left;
	margin-left: 10px;
	}
#vbgbody #rsc3 {
	width: 220px;
	float: left;
	margin-left: 10px;
	}
#vbgbody #rsc4 {
	width: 300px;
	float: left;
	margin-left: 10px;
	}
#vbgbody #rsc5 {
	width: 380px;
	float: left;
	margin-left: 10px;
	}
#vbgbody #rsc6 {
	width: 460px;
	float: left;
	margin-left: 10px;
	}
#vbgbody #rsc7 {
	width: 540px;
	float: left;
	margin-left: 10px;
	}
#vbgbody #rsc8 {
	width: 620px;
	float: left;
	margin-left: 10px;
	}
#vbgbody #rsc9 {
	width: 700px;
	float: left;
	margin-left: 10px;
	}
#vbgbody #rsc10 {
	width: 780px;
	float: left;
	margin-left: 10px;
	}
#vbgbody #rsc11 {
	width: 860px;
	float: left;
	margin-left: 10px;
	}

	
/* ----- LEFT SIDE COLUMN FORMATTING all have float left with a 20px margin-right */

#vbgbody #lsc1 {
	width: 60px;
	float: left;
	margin-right: 10px;
	}

#vbgbody #lsc2 {
	width: 160px;
	float: left;
	margin-right: 0px;
	}
#vbgbody #lsc3 {
	width: 220px;
	float: left;
	margin-right: 10px;
	}
#vbgbody #lsc4 {
	width: 300px;
	float: left;
	margin-right: 10px;
	}
#vbgbody #lsc5 {
	width: 380px;
	float: left;
	margin-right: 10px;
	}
#vbgbody #lsc6 {
	width: 460px;
	float: left;
	margin-right: 10px;
	}
#vbgbody #lsc7 {
	width: 540px;
	float: left;
	margin-right: 10px;
	}
#vbgbody #lsc8 {
	width: 620px;
	float: left;
	margin-right: 10px;
	}
#vbgbody #lsc9 {
	width: 700px;
	float: left;
	margin-right: 10px;
	}
#vbgbody #lsc10 {
	width: 780px;
	float: left;
	margin-right: 10px;
	}
#vbgbody #lsc11 {
	width: 860px;
	float: left;
	margin-right: 10px;
	}