/*
TABLET CSS STYLE

Tablet Layout: 768px (48em).
Gutters: 24px (1.5em).
Outer margins: 28px (1.75em).
Inherits styles from: Default layout.
------------------------------------------------------------------
cols	1     2      3      4      5      6      7      8
px		68    160    252    344    436    528    620    712
*/

@media only screen and (min-width: 768px) and (max-width: 991px) {

}

/*
VERTICAL MOBILE CSS STYLE

Mobile Layout: 320px (20em).
Gutters: 24px (1.5em).
Outer margins: 34px (2.125em).
Inherits styles from: Default Layout.
--------------------------------------------------
cols	1     2      3
px		68    160    252
em		4.25  10.0   15.75
*/

@media only screen and (max-width: 767px) {

	#menucontainer{
		width: 100%;
	}
	
	#summary{
		margin-left: 13px;
	}
	
	
	.data_container{
		margin-left: 0px;
	}
	
	/*
	 Left-hand tables, hidden right hand charts.
	*/
	#chart_left, .chart_left{
		width: 100%;
		float: none;
	}
	
	#chart_left #datatable, .chart_left .datatable{
		width: 100%;
	}
	/* Hide right-hand charts on mobile*/
	#chart_right, .chart_right{
		display: none;
		visibility: hidden;
	}
	
	#mainContentBack, #content{
		width: 95%;
		margin-bottom: 15px;
	}
}

/* Note: Vertical settings also impact horizontal settings below - watch for this */

/*
HORIZONTAL MOBILE CSS STYLE

Wide Mobile Layout: 480px (30em).
Gutters: 24px (1.5em).
Outer margins: 22px (1.375em).
Inherits styles from: Default Layout, Mobile Layout.
--------------------------------------------------------------
cols	1     2      3      4      5
px		68    160    252    344    436
*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
	/* Hide right-hand charts on mobile*/
	.chart_right{
		display: none;
		visibility: hidden;
	}
	
	#mainContentBack, #content{
		width: 95%;
	}
}