@media only screen and (orientation: portrait) and (max-width:1000px)
{
	html	{	background-color: #f2f2f2;	}
	body	{	margin: 55px auto 55px auto;border: 1px solid #000;
			box-shadow: 0 0 10px #000000;	}
	ul.nav	{	display: none !important;	}
	h1	{	font-weight: bold; font-size: 12pt; margin: 5px; text-align: left;	}
	h2	{	font-weight: bold; font-size: 12pt; margin: 5px;	}
	h3	{	font-weight: bold; font-size: 11pt; margin: 5px;	}
	p	{	line-height: 1.3; font-size:11pt;	}
	#page
	{	
		display: grid;
		grid-template-areas:
	 	"logo"
	    "main"
		"main2"
		"side1"
		"side2"
         "footer"
		"end";
		grid-gap: 5px;
		grid-template-rows: auto;
		grid-template-columns: auto;}
	#page		{
		padding: 5px 5px 0px 5px; background-color: #fff; }

	#page > logo	{
		grid-area: logo; 
		background-color: #fff;
		padding: 10px;}
	#page > main	{
		grid-area: main;
		background-color: #fff;}
	#page > main2	{
		grid-area: main2;
		background-color: #fff;}
	#page > side1	{
		grid-area: side1;
		background-color: #fff; padding: 10px 30px;}
	#page > side2	{
		grid-area: side2;
		background-color: #fff; padding: 10px 30px;}
	#page > footer	{
		grid-area: footer;
		text-align: center; background-color: #e1e3e4;}
	#page > end	{
		grid-area: end;
		background-color: #fff;
		padding: 10px;}
	#page > main, #page > main2, #page > logo, #page > side1, #page > side2, #page > footer, #page > end
		{  -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; border: 1px solid #000;}
	#page > main, #page > main2, #page > footer
		{  padding: 10px;	}
	.para1, .para2, .para3
		{padding: 10px; margin: 10px auto;}
	.para1	{background: #e6ffe6;}
	.para2	{background: #ffeee6;}
	.para3	{background: #e6f0ff;}

}
@media only screen and (orientation: portrait) and (min-width:1000px) and (max-width:1300px)
{
	html	{	background-color: #f2f2f2;	}
	body	{	margin: 55px auto 55px auto;border: 1px solid #000;
			box-shadow: 0 0 10px #000000;	}
	ul.nav	{	display: none !important;	}
	h1	{	font-weight: bold; font-size: 12pt; margin: 5px; text-align: left;	}
	h2	{	font-weight: bold; font-size: 12pt; margin: 5px;	}
	h3	{	font-weight: bold; font-size: 11pt; margin: 5px;	}
	p	{	line-height: 1.3; font-size:11pt;	}
	#page	{	
		display: grid;
		grid-template-areas:
	 	"logo logo"
	                   	"main main"
		"main2 main2"
		"side1 side2"
                     	"footer footer"
		"end end";
		grid-gap: 5px;
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr;}
	#page		{
		padding: 5px 5px 0px 5px; background-color: #fff; }

	#page > logo	{
		grid-area: logo; 
		background-color: #fff;
		padding: 10px;}
	#page > main	{
		grid-area: main;
		background-color: #fff;}
	#page > main2	{
		grid-area: main2;
		background-color: #fff;}
	#page > side1	{
		grid-area: side1;
		background-color: #fff; padding: 10px 30px;}
	#page > side2	{
		grid-area: side2;
		background-color: #fff; padding: 10px 30px;}
	#page > footer	{
		grid-area: footer;
		text-align: center; background-color: #e1e3e4;}
	#page > end	{
		grid-area: end;
		background-color: #fff;
		padding: 10px;}
	#page > main, #page > main2, #page > logo, #page > side1, #page > side2, #page > footer, #page > end
		{  -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; border: 1px solid #000;}
	#page > main, #page > main2, #page > footer
		{  padding: 10px;	}
	.para1, .para2, .para3
		{padding: 10px; margin: 10px auto;}
	.para1	{background: #e6ffe6;}
	.para2	{background: #ffeee6;}
	.para3	{background: #e6f0ff;}

}
@media only screen and (orientation: landscape) and (max-width:1000px)
{
	html	{	background-color: #f2f2f2;	}
	body	{	margin: 10px 5px 10px 60px;border: 1px solid #000; box-shadow:         0 0 10px #000000;	}
	ul.nav	{	display: none !important;	}
	h1	{	font-weight: bold; font-size: 12pt; margin: 5px; text-align: left;	}
	h2	{	font-weight: bold; font-size: 12pt; margin: 5px;	}
	h3	{	font-weight: bold; font-size: 11pt; margin: 5px;	}
	p	{	line-height: 1.3; font-size:11pt;	}
	#page	{	
		display: grid;
		grid-template-areas:
	 	"logo"
	                   	"main"
		"main2"
		"side1"
		"side2"
                     	"footer"
		"end";
		grid-gap: 5px;
		grid-template-rows: auto;
		grid-template-columns: auto;}
	#page		{
		padding: 5px 5px 0px 5px; background-color: #fff; }

	#page > logo	{
		grid-area: logo; 
		background-color: #fff;
		padding: 10px;}
	#page > main	{
		grid-area: main;
		background-color: #fff;}
	#page > main2	{
		grid-area: main2;
		background-color: #fff;}
	#page > side1	{
		grid-area: side1;
		background-color: #fff; padding: 10px 30px;}
	#page > side2	{
		grid-area: side2;
		background-color: #fff; padding: 10px 30px;}
	#page > footer	{
		grid-area: footer;
		text-align: center; background-color: #e1e3e4;}
	#page > end	{
		grid-area: end;
		background-color: #fff;
		padding: 10px;}
	#page > main, #page > main2, #page > logo, #page > side1, #page > side2, #page > footer, #page > end
		{  -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; border: 1px solid #000;}
	#page > main, #page > main2, #page > footer
		{  padding: 10px;	}
	.para1, .para2, .para3
		{padding: 10px; margin: 10px auto;}
	.para1	{background: #e6ffe6;}
	.para2	{background: #ffeee6;}
	.para3	{background: #e6f0ff;}

}
@media only screen and (orientation: landscape) and (min-width:1000px) and (max-width:1200px)
{
	html	{	background-color: #f2f2f2;	}
	body	{	margin: 10px 5px 10px 60px;border: 1px solid #000; box-shadow:         0 0 10px #000000;	}
	ul.nav	{	display: none !important;	}
	h1	{	font-weight: bold; font-size: 12pt; margin: 5px; text-align: left;	}
	h2	{	font-weight: bold; font-size: 12pt; margin: 5px;	}
	h3	{	font-weight: bold; font-size: 11pt; margin: 5px;	}
	p	{	line-height: 1.3; font-size:11pt;	}
	#page	{	
		display: grid;
		grid-template-areas:
	 	"logo logo"
	                   	"main main"
		"main2 main2"
		"side1 side2"
                     	"footer footer"
		"end end";
		grid-gap: 5px;
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr;}
	#page		{
		padding: 5px 5px 0px 5px; background-color: #fff; }

	#page > logo	{
		grid-area: logo; 
		background-color: #fff;
		padding: 10px;}
	#page > main	{
		grid-area: main;
		background-color: #fff;}
	#page > main2	{
		grid-area: main2;
		background-color: #fff;}
	#page > side1	{
		grid-area: side1;
		background-color: #fff; padding: 10px 30px;}
	#page > side2	{
		grid-area: side2;
		background-color: #fff; padding: 10px 30px;}
	#page > footer	{
		grid-area: footer;
		text-align: center; background-color: #e1e3e4;}
	#page > end	{
		grid-area: end;
		background-color: #fff;
		padding: 10px;}
	#page > main, #page > main2, #page > logo, #page > side1, #page > side2, #page > footer, #page > end
		{  -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; border: 1px solid #000;}
	#page > main, #page > main2, #page > footer
		{  padding: 10px;	}
	.para1, .para2, .para3
		{padding: 10px; margin: 10px auto;}
	.para1	{background: #e6ffe6;}
	.para2	{background: #ffeee6;}
	.para3	{background: #e6f0ff;}

}
@media screen and (orientation: landscape) and (min-width: 1200px)
{
	html	{	background-color: #f2f2f2;}
	body	{	margin: 5px auto 55px auto;border: 1px solid #000;
			box-shadow: 0 0 10px #000000;	}
	#MenuFixed{	display: none !important;	}
	ul.nav	{	display: block !important;	}
	h1	{	font-weight: bold; font-size: 12pt; margin: 5px; text-align: left;	}
	h2	{	font-weight: bold; font-size: 12pt; margin: 5px;	}
	h3	{	font-weight: bold; font-size: 11pt; margin: 5px;	}
	p	{	line-height: 1.3; font-size:11pt;	}
	#page	{	
		display: grid;
		grid-template-areas:
	 	"logo logo logo"
		"nav nav nav"
	                   	"main main side1"
		"main2 main2 side2"
                     	"footer footer footer"
		"end end end";
		grid-gap: 5px;
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr 350px;}
	#page		{
		padding: 5px 5px 5px 5px; background-color: #fff;	 }

	#page > logo	{
		grid-area: logo; 
		background-color: #fff;
		padding: 10px;}
	#page > nav	{
		grid-area: nav; 
		background-color: #fff;
		padding: 10px;}
	#page > main	{
		grid-area: main;
		background-color: #fff;}
	#page > main2	{
		grid-area: main2;
		background-color: #fff;}
	#page > side1	{
		grid-area: side1;
		background-color: #fff; padding: 10px 30px;}
	#page > side2	{
		grid-area: side2;
		background-color: #fff; padding: 10px 30px;}
	#page > footer	{
		grid-area: footer;
		text-align: center; background-color: #e1e3e4;}
	#page > end	{
		grid-area: end;
		background-color: #fff;
		padding: 10px;}
	#page > main, #page > nav, #page > main2, #page > logo, #page > side1, #page > side2, #page > footer, #page > end
		{  -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; border: 1px solid #000;}
	#page > main, #page > main2, #page > footer
		{  padding: 10px;	}
	.para1, .para2, .para3
		{padding: 10px; margin: 10px auto;}
	.para1	{background: #e6ffe6;}
	.para2	{background: #ffeee6;}
	.para3	{background: #e6f0ff;}

}

/*	LOGIN LAYOUT */

@media screen and (orientation: landscape) and (min-width: 1200px)
{
	html	{	background-color: #f2f2f2;	}
	body	{	margin: 5px auto 55px auto;border: 1px solid #000;
			box-shadow: 0 0 10px #000000;	}
	#MenuFixed{	display: none !important;	}
	ul.nav	{	display: block !important;	}
	h1	{	font-weight: bold; font-size: 12pt; margin: 5px; text-align: left;	}
	h2	{	font-weight: bold; font-size: 12pt; margin: 5px;	}
	h3	{	font-weight: bold; font-size: 11pt; margin: 5px;	}
	p	{	line-height: 1.3; font-size:11pt;	}
	#page_login	{	
		display: grid;
		grid-template-areas:
	 	"logo logo logo"
		"nav nav nav"
		"main main main"
		"footer footer footer"
		"end end end";
		grid-gap: 5px;
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr 350px;}
	#page_login		{
		padding: 5px 5px 5px 5px; background-color: #fff; }

	#page_login > logo	{
		grid-area: logo; 
		background-color: #fff;
		padding: 10px;}
	#page_login > nav	{
		grid-area: nav; 
		background-color: #fff;
		padding: 10px;}
	#page_login > main	{
		grid-area: main;
		background-color: #fff;}
	#page_login > footer	{
		grid-area: footer;
		text-align: center; background-color: #e1e3e4;}
	#page_login > end	{
		grid-area: end;
		background-color: #fff;
		padding: 10px;}
	#page_login > main, #page_login > nav, #page_login > logo, #page_login > footer, #page_login > end
		{  -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; border: 1px solid #000;}
	#page_login > main, #page_login > main2, #page_login > footer
		{  padding: 10px;	}
	.para1, .para2, .para3
		{padding: 10px; margin: 10px auto;}
	.para1	{background: #e6ffe6;}
	.para2	{background: #ffeee6;}
	.para3	{background: #e6f0ff;}

}