/* Mobile Layout: Max 480px. */

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

			#desktop {
				display: none;
			}
			#tablet {
				display: none;
			}
			#mobile {
				display: block;
				background-color: #f4f4f4;
				height: 895px;
				width: 260px;
			}

			body {
				background-color: white;
			}

			.headline{
				background-color: #e5e5e5;
				padding-top: 5px;
				padding-bottom: 10px;
				padding-left: 15px;
				padding-right: 15px;
				width: 230px;
				line-height: 1em;
			}

			h1 {
				font-family: Times;
				font-size: 14px;
				font-weight: lighter;
				padding-top: 5px;
				/*padding-left: 20px;*/
				text-align: center;
			}
			h2 { 
				font-family: Arial, sans-serif;
				font-size: 11px;
				line-height: 1.5em;
				padding-top: 5px;
				font-weight: lighter;
				text-align: left;
				background-color: #e5e5e5;
			}

			.year1{
				text-align: center;
				font-family: Arial, sans-serif;
				font-weight: bold;
				font-size: 11px;
				margin-left: 15px;
				margin-right: 15px;
				text-decoration: underline;
			}
			.total1{
				text-align: center;
				font-family: Arial, sans-serif;
				font-weight: lighter;
				font-size: 10px;
				margin-left: 15px;
				margin-right: 15px;
				color: #006d2c;
			}
			.total2{
				text-align: center;
				font-family: Arial, sans-serif;
				font-weight: lighter;
				font-size: 10px;
				margin-left: 15px;
				margin-right: 15px;
				color: #e26917;
			}

			#instructions {
				width: 260px;
				/*position: absolute;*/
				/*float: left;*/
				padding-top: 20px;
				text-align: center;
				font-size: 10px;
				font-family: Arial, sans-serif;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}

			#container1m {
				width: 260px;
				position: absolute;
				float: left;
				padding-top: 5px;
				background-color: #ededed;
				/*padding-bottom: 25px;*/
			}
			#container2m {
				width: 260px;
				position: absolute;
				float: left;
				margin-top: 390px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container3m {
				width: 260px;
				position: absolute;
				float: left;
				margin-top: 770px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container4m {
				width: 260px;
				position: absolute;
				float: left;
				margin-top: 1150px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container5m {
				width: 260px;
				position: absolute;
				float: left;
				margin-top: 1530px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container6m {
				width: 260px;
				position: absolute;
				float: left;
				margin-top: 1910px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container7m {
				width: 260px;
				position: absolute;
				float: left;
				margin-top: 215px;
				/*padding-top: 10px;*/
				background-color: #ededed;
			}
			#container8m {
				width: 260px;
				position: absolute;
				float: left;
				margin-top: 590px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container9m {
				width: 260px;
				position: absolute;
				float: left;
				margin-top: 970px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container10m {
				width: 260px;
				position: absolute;
				float: left;
				margin-top: 1350px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container11m {
				width: 260px;
				position: absolute;
				float: left;
				margin-top: 1730px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container12m {
				width: 260px;
				position: absolute;
				float: left;
				margin-top: 2110px;
				padding-top: 5px;
				background-color: #ededed;
			}

			div.tooltip {	
			    position: absolute;			
			    text-align: center;							
			    padding: 5px;				
			    font: 10px sans-serif;		
			    background: white;	
			    border: 0px;		
			    /*border-radius: 6px;*/			
			    pointer-events: none;
			}

}

/* Tablet Layout: 481px to a max of 768px. */
	
@media screen and (min-width: 481px) and (max-width: 768px){

			#desktop {
				display: none;
			}
			#tablet {
				display: block;
				background-color: #f4f4f4;
				height: 1270px;
				width: 570px;
			}
			#mobile {
				display: none;
			}

			body {
				background-color: white;
			}

			.headline{
				background-color: #e5e5e5;
				padding-top: 10px;
				padding-bottom: 10px;
				padding-left: 20px;
				padding-right: 20px;
				width: 530px;
				line-height: 1em;
			}

			h1 {
				font-family: Times;
				font-size: 20px;
				font-weight: lighter;
				text-align: center;
			}
			h2 { 
				font-family: Arial, sans-serif;
				font-size: 13px;
				font-weight: lighter;
				text-align: left;
				background-color: #e5e5e5;
				line-height: 1.5em;
			}

			.year1{
				text-align: left;
				font-family: Arial, sans-serif;
				font-size: 13px;
				margin-left: 20px;
				border-bottom: 1px solid black;
			}
			.year2{
				text-align: center;
				font-family: Arial, sans-serif;
				font-size: 13px;
				margin-right: 20px;
				border-bottom: 1px solid black;
			}
		
			.total1{
				text-align: left;
				font-family: Arial, sans-serif;
				font-size: 13px;
				color: #006d2c;
			}

			#instructions {
				width: 570px;
				/*position: absolute;*/
				/*float: left;*/
				padding-top: 25px;
				text-align: center;
				font-size: 13px;
				font-family: Arial, sans-serif;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}

			#container1t {
				width: 285px;
				position: absolute;
				float: left;
				padding-top: 25px;
				background-color: #ededed;
				padding-bottom: 25px;
			}
			#container2t {
				width: 285px;
				position: absolute;
				float: left;
				margin-top: 215px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container3t {
				width: 285px;
				position: absolute;
				float: left;
				margin-top: 415px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container4t {
				width: 285px;
				position: absolute;
				float: left;
				margin-top: 615px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container5t {
				width: 285px;
				position: absolute;
				float: left;
				margin-top: 815px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container6t {
				width: 285px;
				position: absolute;
				float: left;
				margin-top: 1015px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container7t {
				width: 285px;
				position: absolute;
				float: left;
				margin-left: 285px;
				padding-top: 25px;
				background-color: #ededed;
			}
			#container8t {
				width: 285px;
				position: absolute;
				float: left;
				margin-left: 285px;
				margin-top: 215px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container9t {
				width: 285px;
				position: absolute;
				float: left;
				margin-left: 285px;
				margin-top: 415px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container10t {
				width: 285px;
				position: absolute;
				float: left;
				margin-left: 285px;
				margin-top: 615px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container11t {
				width: 285px;
				position: absolute;
				float: left;
				margin-left: 285px;
				margin-top: 815px;
				padding-top: 5px;
				background-color: #ededed;
			}
			#container12t {
				width: 285px;
				position: absolute;
				float: left;
				margin-left: 285px;
				margin-top: 1015px;
				padding-top: 5px;
				background-color: #ededed;
			}

			div.tooltip {	
			    position: absolute;			
			    text-align: center;							
			    padding: 5px;				
			    font: 11px sans-serif;		
			    background: white;	
			    border: 0px;		
			    /*border-radius: 6px;*/			
			    pointer-events: none;
			}

}

/* Desktop Layout: 769px and up. */

@media only screen and (min-width: 769px){

			#desktop {
				display: block;
				background-color: #f4f4f4;
				height: 1330px;
				width: 590px;
			}
			#tablet {
				display: none;
			}
			#mobile {
				display: none;
			}

			body {
				background-color: white;
			}

			.headline{
				background-color: #e5e5e5;
				padding-top: 10px;
				padding-bottom: 10px;
				padding-left: 20px;
				padding-right: 20px;
				width: 550px;
				line-height: 1em;
			}

			h1 {
				font-family: Times;
				font-size: 24px;
				font-weight: lighter;
				/*padding-left: 20px;*/
				text-align: center;
			}
			h2 { 
				font-family: Arial, sans-serif;
				font-size: 14px;
				font-weight: lighter;
				text-align: left;
				background-color: #e5e5e5;
				line-height: 1.5em;
			}

			.year1{
				text-align: left;
				font-family: Arial, sans-serif;
				font-size: 14px;
				margin-left: 20px;
				border-bottom: 1px solid black;
			}
			.year2{
				text-align: center;
				font-family: Arial, sans-serif;
				font-size: 14px;
				margin-right: 20px;
				border-bottom: 1px solid black;
			}

			#instructions {
				width: 590px;
				/*position: absolute;*/
				/*float: left;*/
				padding-top: 25px;
				text-align: center;
				font-size: 14px;
				font-family: Arial, sans-serif;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}

			#container1 {
				width: 295px;
				position: absolute;
				float: left;
				padding-top: 25px;
				/*background-color: #7c868e;*/
				background-color: #ededed;
				padding-bottom: 25px;
			}
			#container2 {
				width: 295px;
				position: absolute;
				float: left;
				margin-top: 230px;
				padding-top: 5px;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}
			#container3 {
				width: 295px;
				position: absolute;
				float: left;
				margin-top: 445px;
				padding-top: 5px;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}
			#container4 {
				width: 295px;
				position: absolute;
				float: left;
				margin-top: 660px;
				padding-top: 5px;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}
			#container5 {
				width: 295px;
				position: absolute;
				float: left;
				margin-top: 875px;
				padding-top: 5px;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}
			#container6 {
				width: 295px;
				position: absolute;
				float: left;
				margin-top: 1090px;
				padding-top: 5px;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}
			#container7 {
				width: 295px;
				position: absolute;
				float: left;
				margin-left: 295px;
				padding-top: 25px;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}
			#container8 {
				width: 295px;
				position: absolute;
				float: left;
				margin-left: 295px;
				margin-top: 230px;
				padding-top: 5px;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}
			#container9 {
				width: 295px;
				position: absolute;
				float: left;
				margin-left: 295px;
				margin-top: 445px;
				padding-top: 5px;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}
			#container10 {
				width: 295px;
				position: absolute;
				float: left;
				margin-left: 295px;
				margin-top: 660px;
				padding-top: 5px;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}
			#container11 {
				width: 295px;
				position: absolute;
				float: left;
				margin-left: 295px;
				margin-top: 875px;
				padding-top: 5px;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}
			#container12 {
				width: 295px;
				position: absolute;
				float: left;
				margin-left: 295px;
				margin-top: 1090px;
				padding-top: 5px;
				/*background-color: #7c868e;*/
				background-color: #ededed;
			}

			div.tooltip {	
			    position: absolute;			
			    text-align: center;							
			    padding: 5px;				
			    font: 12px sans-serif;		
			    background: white;	
			    border: 0px;		
			    /*border-radius: 6px;*/			
			    pointer-events: none;
			}

}