/* Here we define the standard styles that are applied all screens  */

/* ================= GRID SETUP ==================
 * This mixin sets up the foundation for your grid
 * it is nescessary that this is called outside any
 * element because it provides variables that must
 * be in the global scope. Otherwise the grid system
 * won't work as excpected.

 *  .grid_setup - MIXIN
 *  The core function of the grid module, that builds up
 *  the basic structure and provides you with any number of
 *  columns with custom gap size, min-width and max-width 
 *
 *  it's also the setup function for all other grid
 *  modules. So you can define most presets in one
 *  mixin call.
 *  
 *  @width   - defines the width of the grid (any css unit)
 *  @columns - specifies the number of columns in the grid (plane number)
 *  @gap     - The gap between elements in the grid (any css unit)
 *	@align   - align the grid on left / center / right side of parent
 *  @min     - minimal width of the grid (any css unit)
 *  @max     - maximal width of the grid (any css unit)
 */

/* setup for all browsers that don't understand media queries */
.grid_setup(80%, 8, 2em, center, 740px, 960px);

/* The body element can be used to apply the vertical rhythm
 * to your document or other type and color sheme related setups */
body {
	padding-top: 40px; /* add a little spacing above */
}
/* convenient skip link functionality included in the nav module */
#skip-link {
	.nav_skip_link();
}

@page-margin: 40px;

/* This is the wrapper element we declare as grid */
#page {
	/* This mixin makes this element a grid */
	.grid();
	/* Here we define a linear gradient background for the whole
	 * grid element. You can see the effect at the second sidebar */
	.css3_linear_gradient(#F1F1F1, #CCC );
	/* This adds rounded corners to the page element */
	.css3_border_radius();
	/* add a smooth box shadow */
	.css3_box_shadow(2px, 2px, 10px, #999);
	/* add contrast to the page border */
	border: 1px solid #036;
}

/* override grid settings for browsers that can react to  small screen sizes */
@media only screen and (min-width: 0px) {
	#page {
		/* change min-width to 0px to allow smaller sizes */
		.grid(@grid_width, @grid_columns, @grid_gap, @grid_align, 0px, 960px);	
	}
}

header {
	/* the header element spans all 8 columns */
	.grid_span(8);
	/* add gaps on both sides */
	.grid_gap_both;
}

/* set the background color variable for nav, article and sidebar 1 */
@bgColor: #A3CED7;

nav#main-menu {
	/* the navigation spans all 8 columns */
	.grid_span(8);	
	/* compose a horizontal navigation */
	.nav_horizontal();
	/* these are the colors for the states - normal, hover, active */
	.nav_background(#E3E3E3, @bgColor, @bgColor);
	.nav_text_color(black, black, black);
	
	/* like css rounded corners: top-left, top-right, bottom-right, bottom-left */
	.nav_rounded(0px 5px 0px 0px);
	/* padding around the text */
	.nav_padding(0.5em 1em);
	/* define gaps left, right of each nav item */
	.nav_gap(0, 0.3em);
}

/* this element is a wrapper for the equal columns used
 * in this example. If you don't need equal columns, than
 * you don't have to wrap them 
 */
#content {
	/* define this element as column wrapper */
	.grid_col_wrap();
	/* define it specifically as equal column wrapper */
	.grid_col_equal_wrap();	
}



article {
	.grid_span(4); /* the article is 4 columns wide */
	.grid_left(); /* it floats left */
	.grid_gap_both; /* has gaps on both sides */
	/* is shifted 2 columns to the right to swap
	 * position with the first sidebar although its
	 * the first element in markup ;-) */
	.grid_shift_right(2); 
	/* make this column an equal height column */
	.grid_col_equal();
	background-color: @bgColor; /* add background color */
}

#sidebar-1 {
	.grid_span(2); /* the sidebar is 2 columns wide */
	.grid_left(); /* it floats left (but would be beside the article on the right) */
	.grid_shift_left(4); /* if we didn't shift it to the left 4 columns */
	.grid_gap_both; /* add gaps on both sides */
	.grid_col_equal(); /* make this column an equal height column */
	background-color: @bgColor; /* add background color */
}

#sidebar-2 {
	.grid_span(2); /* the sidebar is 2 columns wide */
	.grid_right(); /* last column always floats right */
	.grid_gap_both; /* add gaps on both sides */
	.grid_col_equal(); /* make this column an equal height column */
}

footer {
	.grid_span(8); /* full 8 columns */
	text-align:center;
	border-top: 1px dashed #666;	
}