/* ===================================
	version:
		1.0
	date:		
		17/10 -09
	author:
		Joakim Hembrink
	email:
		jokke@hembrink.se
	website:
		http://vvv.hembrink.se/cssverk
=================================== */


	/* =================================== 
		The grid div should always 
		wrap the grid system.
		
		Use the debug class to toggle the
		grid.
	   =================================== */
	   
		div.grid {
			margin: 0 auto;
			width: 960px; 
		}

		div.grid.debug {
			background: url(grid.png) left repeat-y;
		}
		
	/* =================================== 
		Row classes
	   =================================== */
		
		div.row {
		/*	overflow: hidden;  Clear the float */
		}
		
		div.row:after {
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}
		
		/* Nested rows */
		div.row div.row {
			margin: 0 -10px;
			width: auto;
			zoom: 1; /* For IE6 */
		}
		
	/* =================================== 
		Column classes
	   =================================== */
	   
		.col-1,  .col-2,  .col-3,
		.col-4,  .col-5,  .col-6,
		.col-7,  .col-8,  .col-9,
		.col-10, .col-11, .col-12 {
			float: left;
			margin: 0 10px;
			display: inline; /* Fixing double margin bug in IE6 */
		}
	   
		.col-1 { 					
			width: 60px;
		}
		.col-2 { 
			width: 140px;
		}
		.col-3 { 
			width: 220px;
		}
		.col-4 { 
			width: 300px;
		}
		.col-5 { 
			width: 380px;
		}
		.col-6 { 
			width: 460px;
		}
		.col-7 { 
			width: 540px;
		}
		.col-8 { 
			width: 620px;
		}
		.col-9 { 
			width: 700px;
		}
		.col-10 { 
			width: 780px;
		}
		.col-11 { 
			width: 860px;
		}
		.col-12 { 
			width: 940px;
		}
	   
	/* =================================== 
		Pull classes
		
		Usage: Add the class pull-x to any
		column. The x indactes the number
		of columns you want to pull.
	   =================================== */
	   
	   	.pull-1,  .pull-2,  .pull-3,
		.pull-4,  .pull-5,  .pull-6,
		.pull-7,  .pull-8,  .pull-9,
		.pull-10, .pull-11 {
			position: relative;
		}
		
		.pull-1 { 					
			left: -80px;
		}
		.pull-2 { 
			left: -160px;
		}
		.pull-3 { 
			left: -240px;
		}
		.pull-4 { 
			left: -320px;
		}
		.pull-5 { 
			left: -400px;
		}
		.pull-6 { 
			left: -480px;
		}
		.pull-7 { 
			left: -560px;
		}
		.pull-8 { 
			left: -640px;
		}
		.pull-9 { 
			left: -720px;
		}
		.pull-10 { 
			left: -800px;
		}
		.pull-11 { 
			left: -880px;
		}

	/* =================================== 
		Push classes
		
		Usage: Add the class push-x to any
		column. The x indactes the number
		of columns you want to push.
	   =================================== */
	   
	   	.push-1,  .push-2,  .push-3,
		.push-4,  .push-5,  .push-6,
		.push-7,  .push-8,  .push-9,
		.push-10, .push-11 {
			position: relative;
		}
		
		.push-1 { 					
			right: -80px;
		}
		.push-2 { 
			right: -160px;
		}
		.push-3 { 
			right: -240px;
		}
		.push-4 { 
			right: -320px;
		}
		.push-5 { 
			right: -400px;
		}
		.push-6 { 
			right: -480px;
		}
		.push-7 { 
			right: -560px;
		}
		.push-8 { 
			right: -640px;
		}
		.push-9 { 
			right: -720px;
		}
		.push-10 { 
			right: -800px;
		}
		.push-11 { 
			right: -880px;
		}