//Zen Grids - http://zengrids.com/
//http://next.zengrids.com/reference/grids/
//http://zengrids.com/help/
//http://next.zengrids.com/help/examples/
//A basic Zen Grid tutorial - http://designshack.net/articles/css/zen-grids-a-responsive-grid-system-built-on-sass/

//----------------------------------------------------------------------------------------------------------------Imports


//----------------------------------------------------------------------------------------------------------------Variables
$nav_page_padding: 1.5em;
//----------------------------------------------------------------------------------------------------------------Base defaults
$zen-gutter-width: 4px;

#page{
	@include zen-grid-container;
	@include zen-grid-background;
}

//----------------------------------------------------------------------------------------------------------------Small mobile
@include small_mobile{
	#page{
		$zen-column-count: 4 !global;
		@include zen-grid-container;
		@include zen-grid-background;
		padding-top: $nav_page_padding;
	}
	#navigation{
		position: absolute; top: 0;
		nav{
			display: none;
			@include zen-grid-item(4, 1);
			ul{
				li{
					font-size: 0.8rem;
					@include pixel_to_rem(padding-left, $base_font_size, 12);
					a{
						@include pixel_to_rem(padding-bottom, $base_font_size, 2);
					}
				}
			}
		}
		#nav-dropdown{
			display: inline;
			float: right;
			@include pixel_to_rem(margin-right, $base_font_size, 18);
			@include pixel_to_rem(width, $base_font_size, 96);
			border-radius: 2px;
			border: solid 1px $color_default_border;
			appearance: none;
			-moz-appearance: none;
			-webkit-appearance: none;
			overflow: hidden;
			background: $color_hex_FFFFFF url("../images/red_down_arrow.png") no-repeat 94% 50%;
		}
	}
	#content{
		@include zen-grid-item(4, 1);
		@include zen-clear();
		.table-layout_auto{
			//@include zen-grid-item(3, 1);
		}
	}
	.region-sidebar-second{
		@include zen-grid-item(4, 1);
		@include zen-clear();
	}
	#footer{
		@include zen-grid-item(4, 1);
		@include zen-clear();
	}
}

//----------------------------------------------------------------------------------------------------------------Large mobile
@include large_mobile{
	#page{
		$zen-column-count: 8 !global;
		@include zen-grid-container;
		@include zen-grid-background;
	}
	#footer{
		@include zen-grid-item(8, 1);
		@include zen-clear();
	}
}

//----------------------------------------------------------------------------------------------------------------Small tablet
@include small_tablet{
	#page{
		$zen-column-count: 8 !global;
		@include zen-grid-container;
		@include zen-grid-background;
	}
	#navigation{
		nav{
			float: left;
			ul{
				li{
					//@include pixel_to_rem(padding-left, $base_font_size, 12);
					a{
						@include pixel_to_rem(padding-bottom, $base_font_size, 2);
					}
				}
			}
		}


	}
		.region-sidebar-second{
		@include zen-grid-item(2.5, 0.9, right);
	}
		#footer{
		@include zen-grid-item(8, 1);
		@include zen-clear();
	}
}

//----------------------------------------------------------------------------------------------------------------Large tablet
@include large_tablet{
	#page{
		$zen-column-count: 12 !global;
		@include zen-grid-container;
		@include zen-grid-background;
	}
		.region-sidebar-second{
		@include zen-grid-item(4, 0.9, right);
	}
}

//----------------------------------------------------------------------------------------------------------------Small desktop
@include small_desktop{
	#page{
		$zen-column-count: 12 !global;
		@include zen-grid-container;
		@include zen-grid-background;
	}
	#navigation{
		nav{
			//float: left;
			ul{
				li{
					@include pixel_to_rem(padding-left, $base_font_size, 11);
					a{
						@include pixel_to_rem(padding-bottom, $base_font_size, 14);
					}
				}
			}
		}


	}
	.region-sidebar-second{
		@include zen-grid-item(4, 0.9, right);
	}
	#footer{
		@include zen-grid-item(12, 1);
		@include zen-clear();
	}
}

//----------------------------------------------------------------------------------------------------------------Medium desktop
@include medium_desktop{
	#page{
		$zen-column-count: 16 !global;
		@include zen-grid-container;
		@include zen-grid-background;
	}
	.region-sidebar-second{
		@include zen-grid-item(5.17, 0.9, right);
	}
		#footer{
		@include zen-grid-item(16, 1);
		@include zen-clear();
	}
}

//----------------------------------------------------------------------------------------------------------------Large desktop
@include large_desktop{
	#page{
		$zen-column-count: 20 !global;
		@include zen-grid-container;
		@include zen-grid-background;
	}
	.region-sidebar-second{
		@include zen-grid-item(6.35, 0.9, right);
	}
}

//----------------------------------------------------------------------------------------------------------------Extra large desktop
@include xlarge_desktop{
	#page{
		$zen-column-count: 20 !global;
		@include zen-grid-container;
		@include zen-grid-background;
	}
	.region-sidebar-second{
		@include zen-grid-item(6.35, 0.9, right);
	}
}