/*	Version 2.8 Copyright (c) 2020 NetChain Communications. */
/*	Reqired:
	@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700|PT+Serif:400,700|PT+Sans:400,700|Monda);
	@import url(http://fonts.googleapis.com/css?family=Rationale&text=PageTitle);
*/


@media all {
	HTML					{ box-sizing: border-box; }
	*, *:before, *:after	{ box-sizing: inherit; }
	.x				{ display: none; }
	DIV.Body P,
	DIV.Body LI		{ font: 17px 'PT Serif',serif; }
	DIV.Foot		{ font: 13px 'PT Sans',sans-serif; text-align: center; margin-top: 10px; }
}

@media screen {
	/***************************************************************/
	/* Layout Only */

	HTML		{ min-height: 100%; }
	BODY		{ background: linear-gradient(to bottom,  #404040 0%, #404040 400px, #222 100%) no-repeat;
				  margin: 10px; padding: 0px; }
	A			{ color: #000080; }
	DIV.Page	{ max-width: 1200px;
				  background: #FFFFFF linear-gradient(to bottom,  #D4D4D4 0%, #EEE 110px, #FFF 180px);
				  margin: 0px auto; border-radius: 5px; padding: 0px 10px 5px 10px; }

	DIV.Logo	{ font: 72pt Rationale,sans-serif; line-height: 1; }
	DIV.Logo A	{ text-decoration: none; color: #000; }

	DIV.Menu	{ padding: 5px 2px; margin: 0px auto; border-radius: 5px; border: 1px solid #BCBCBC;
				  background: linear-gradient(to bottom,  #E8E8E8 0%, #9E9E9E 100%); }
	DIV.Menu UL	{ text-align: center; list-style: none; margin: 0px; padding: 0px; }
	DIV.Menu LI	{ text-transform: uppercase; display: inline-block; text-shadow: #EAE9E8 1px 1px;
				  font: bold 19px Monda,sans-serif; padding: 0px 20px; border-left: 1px ridge #777; }
	DIV.Menu LI.First	{ border-left-width: 0px; }
	DIV.Menu A			{ color: #000; text-decoration: none; }
	DIV.Menu A:Hover	{ color: #800000; text-decoration: underline; }

	DIV.Name	{ display: flex; align-items: center; background-color: #E0E0E0; border-radius: 5px; padding: 10px 20px; margin-top: 10px; }
	DIV.Name H1	{ font: 30px Oswald,sans-serif; color: #000; margin: 0px; padding: 0px; display: inline-block; width: 100%; }

	DIV.Body	{ background-color: #F0F0F0; border-radius: 5px; padding: 10px 20px; margin-top: 10px; min-height: 240px; }
	DIV.Body P,
	DIV.Body LI	{ line-height: 1.647; color: #444; }

	DIV.Foot	{ background: #404040 linear-gradient(to right,  #333 0%, #555 50%, #333 100%);
				  color: #FFF; padding: 20px; border-radius: 5px;
				  text-shadow: 1px 1px 0px #000; }
	DIV.Foot A	{ color: #ffffA0; text-decoration: none; }
	DIV.Cred	{ font: 13px 'PT Sans', sans-serif; text-align: right; margin-top: 5px; }

	H4.Print	{ display: none; }

	A.Hamb		{ border: 0px solid #000; border-width: 4px 0px; width: 24px; margin-right: 20px; }
	A.Hamb DIV	{ background-color: #000; height: 4px; border: 0px solid #E0E0E0; border-width: 4px 0px;
				  box-sizing: content-box; }

	#Menu		{ margin: 10px; padding: 0px; }
	#Menu UL	{ center; list-style: none; border-radius: 5px; margin: 0px 10px 0px 0px; padding: 10px;
				  background-color: #222; border: 1px solid #BCBCBC; }
	#Menu LI	{ color: #FFF; font: 12pt Monda,sans-serif; padding: 0px; }
	#Menu A		{ color: #FFF; text-decoration: none; }

	.slideout-menu	{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 0; display: none;
					  width: 256px; -webkit-overflow-scrolling: touch; height: auto; }
	.slideout-panel	{ position: relative; z-index: 1; will-change: transform; }
	.slideout-open,
	.slideout-open body,
	.slideout-open .slideout-panel	{ overflow: hidden; }
	.slideout-open .slideout-menu	{ display: block; }

	/**************************************************************/
	/* Common */
	DIV.Debug			{ font: 10pt monospace; border: 1px solid #000; padding: 10px;
						  margin: 10px 0px; background-color: #FFF; }

	DIV.Message,
	DIV.Warning,
	DIV.RedBox,
	DIV.PinkBox,
	DIV.SaladBox,
	DIV.GreenBox,
	DIV.OrangeBox		{ font: 13.5pt 'PT Serif',serif; line-height: 1.647; border: 1px solid black;
						  border-radius: 5px; padding: 20px; margin: 10px 0px 10px 0px; }
	DIV.Message,
	DIV.GreenBox		{ background-color: #006800; color: white; }
	DIV.SaladBox		{ background-color: rgb(220,255,220); }
	DIV.PinkBox			{ background-color: #F2DEDE; }
	DIV.OrangeBox		{ background-color: #E67300; color: white; }
	DIV.Warning,
	DIV.RedBox			{ background-color: #A00000; color: white; }

	DIV.Message,
	DIV.Warning		{ text-align: center; margin-bottom: 20px; }

	/***************************************************************/
	/* Message Box */
	DIV.MsgBox		{ border: 1px solid #000; display: table; padding: 0px; }
	DIV.MsgBox H6	{ font: 22px Oswald,sans-serif; margin: 0px; padding: 5px; text-align: left; width: 100%;
					    background: linear-gradient(to bottom, #E8E8E8 0%, #9E9E9E 100%); white-space: nowrap;
					    color: #000000; text-shadow: 1px 1px 0px #FFF; border-bottom: 1px solid #000;
						display: block;
						-webkit-box-sizing: border-box;
						   -moz-box-sizing: border-box;
								box-sizing: border-box; }
	DIV.MsgBox H6 IMG	{ width: 22px; height: 22px; margin: 5px; float: right; }
	DIV.MsgBox DIV.MsgBody	{ font: 13.5pt 'PT Serif',serif; background-color: #E0E0E0; padding: 20px; }
	DIV.MsgBox DIV.MsgButtons	{ background-color: #F0F0F0; border-top: 1px solid #B0B0B0; padding: 5px 10px; text-align: center; xwidth: 100%; }
	DIV.MsgBox DIV.MsgButtons A	{ margin: 5px; }
	#confirm-overlay {background-color:#000000; cursor:wait;}

	/***************************************************************/
	/* Command Buttons */
	INPUT[type="submit"],
	A.Cmd	{
		cursor: pointer;
		display: inline-block;
		font-family: 'PT Serif',Serif;
		font-size: 18px;
		box-shadow: 1px 1px 2px #DDDDDD;
		color: #444 ! important;
		text-shadow: 1px 1px 0px #EEEEEE;
		padding: 3px 8px;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		border: 1px solid #9E9E9E;
		background: #EEE;
		background: linear-gradient(top,  #F7F7F7,  #DEDEDE);
		background: -ms-linear-gradient(top,  #F7F7F7,  #DEDEDE);
		background: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#DEDEDE));
		background: -moz-linear-gradient(top,  #F7F7F7,  #DEDEDE);
		text-decoration: none;
		white-space: nowrap;
	}

	A.Cmd:Hover	{
		color: #A00000 ! important;
		background: #EEE;
		background: linear-gradient(top,  #F0F0F0,  #D0D0D0);
		background: -ms-linear-gradient(top,  #F0F0F0,  #D0D0D0);
		background: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#D0D0D0));
		background: -moz-linear-gradient(top,  #F0F0F0,  #D0D0D0);
	}

}


@media screen and (min-width: 1200px) {	/* 5. Desktop */
	DIV.Name H1	{ font-size: 32px; }
}
@media screen and (min-width: 980px) and (max-width: 1199px) { /* 4. Lap-top */
	DIV.Name H1	{ font-size: 30px; }
	DIV.Menu LI	{ font-size: 18px; }
}
@media screen and (min-width: 768px) and (max-width: 979px)	{ /* 3. Portrait tablet to landscape tablet and notebook */
	DIV.Name H1	{ font-size: 28px; }
	DIV.Menu LI	{ font-size: 16px; }
}
@media screen and (min-width: 481px) and (max-width: 767px)	{	/* 2. Landscape phone to portrait tablet */
	DIV.Name 	{ padding: 10px; }
	DIV.Name H1	{ font-size: 24px; text-align: center; }
	DIV.Menu LI	{ font-size: 15px; }
	DIV.Body	{ padding: 10px; }
}
@media screen and (max-width: 480px)						{	/* 1. Portrait phones */
	DIV.Name 	{ padding: 10px; }
	DIV.Name H1	{ font-size: 17px; text-align: center; }
	DIV.Menu LI	{ font-size: 12pt; }
	DIV.Body	{ padding: 10px; }
	DIV.Cred	{ text-align: center; }
}

@media screen and (max-width: 780px) {
	DIV.Menu LI	{ font-size: 15px; }
}
@media screen and (min-width: 750px) {
	A.Hamb	{ display: none; }
}
@media screen and (max-width: 749px) {
	DIV.Menu	{ display: none; }
}

@media screen and (max-width: 359px) { /* Nexus 5 */
	A.Hamb		{ margin-right: 10px; }
}

/**************************************************************/
@media print {		/* Print Only */
	DIV.Name H1	{ font: 20pt Oswald,sans-serif; border-bottom: 2px solid black; margin: 0px; }
	H4.Print	{ font: 9pt 'PT Sans', sans-serif; border-top: 1px solid black; text-align: right;
				  margin: 2px 0px 0px; }
	DIV.Name,
	DIV.Body	{ background-color: transparent; border-width: 0px; margin: 0px; padding: 0px; color: #000; }
	DIV.Logo, #Menu,
	DIV.Menu, A.Hamb,
	DIV.Cred	{ display: none; }
	DIV.Foot	{ border-top: 1px solid #000; border-radius: 0px; color: #000; padding: 5px 0px 0px; font-size: 10px; }
}