/* http://peterned.home.xs4all.nl/examples/csslayout1.html */
BODY, TH, TD {
	font-family: Verdana, Arial;
	font-size: 10px;
}

BODY, .top-left, .top-right {
	background: #e0e0e0;
}

A {
	color: #224499;
	text-decoration: none;
}

H2 {
	font-size: 18px;
	margin: 0 0 2px 0;
	padding-left: 4px;
}

H3.Section {
	border-top: 1px solid gray;
	padding-top: 3px;
}

FIELDSET {
	margin-top: 8px;
}

	FIELDSET H3 {
		margin: 0;
		padding: 0;
	}


#layBanner {
	height: 86px;
	background: url(/images/Banner/Banner819x86.png) repeat-x;
}

#layFooter {
	font-family: Verdana, Arial;
	font-size: 9px;
	color: #530;
	background: #f0f0f0;
	background: url(/images/Gradients/GrayRev.png) repeat-x top;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+1,cccccc+100 */
	/*
	background: #ffffff;
	background: -moz-linear-gradient(top, #ffffff 1%, #cccccc 100%);
	background: -webkit-linear-gradient(top, #ffffff 1%,#cccccc 100%);
	background: linear-gradient(to bottom, #ffffff 1%,#cccccc 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=0 );
	*/
}

.Footer {
	padding: 2px 5px;
	border-top: 1px solid gray;
}

	.Footer .Version {
		color: #8a8;
	}

	.Footer:hover .Version {
		color: #070;
	}

.layFooter A {
	text-decoration: none;
	color: #0000cc;
}



.DialogHdr {
	font-size: 14px;
	background: #bbccdd;
	padding: 2px;
	border: 3px outset;
	border-bottom: 2px outset;
	width: 100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8899bb+1,bbccee+100 */
	background: #8899bb; /* Old browsers */
	background: -moz-linear-gradient(top, #8899bb 1%, #bbccee 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #8899bb 1%,#bbccee 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #8899bb 1%,#bbccee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8899bb', endColorstr='#bbccee',GradientType=0 ); /* IE6-9 */
}

.DialogBox {
	background: #ccddee;
	padding: 5px;
	border: 3px outset;
	border-top: medium none;
	width: 100%;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#aabbcc+0,ddeeff+100 */
	background: #aabbcc; /* Old browsers */
	background: -moz-linear-gradient(top, #aabbcc 0%, #ddeeff 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #aabbcc 0%,#ddeeff 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #aabbcc 0%,#ddeeff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aabbcc', endColorstr='#ddeeff',GradientType=0 ); /* IE6-9 */
}

/*.Tabs TR TD { border: 1px solid black; }*/
.Tabs {
	border-top: 1px solid #eee;
	line-height: 8px;
	margin-top: 0px;
}

	.Tabs .TabHeader {
		height: 1px;
		/*
	background-image: url(/images/Tabs/Tile.gif);
	background-repeat: repeat-x;
	*/
	}

		.Tabs .TabHeader IMG {
			display: none;
		}

	.Tabs TD {
		background-image: url(/images/Tabs/Spacer.gif);
		background-repeat: repeat-x;
	}

	.Tabs .TabPrefix {
		text-align: center;
		padding-left: 5px;
		padding-right: 5px;
	}

	.Tabs .TabLeft, .Tabs .TabLeftSelected {
		text-align: right;
	}

	.Tabs .TabPostfix {
		padding-left: 5px;
		padding-right: 5px;
		width: 95%;
		text-align: right;
	}

	.Tabs .TabItem {
		background-image: url(/images/Tabs/Btn0.gif);
		background-repeat: repeat-x;
		text-align: center;
		padding-left: 3px;
		padding-right: 3px;
	}

	.Tabs .TabSelected {
		background: white;
		background-image: url(/images/Tabs/Btn1.gif);
		background-repeat: repeat-x;
		text-align: center;
		padding-left: 5px;
		padding-right: 5px;
	}

.TabsBody, .TabsBodyNoTabs {
	border-radius: 6px 0 0 6px;
	-moz-border-radius: 6px 0 0 6px;
	-webkit-border-radius: 6px 0 0 6px;
	background: #ffffff;
	border: 1px solid #888888;
	/* border-top: none;*/
	border-right: none;
}
/* Cancel the top and left border of the container when the Tabs are showing at the top so Tabs appear to be sticking up from the Container
	NOTE: obscuring it with this overlay can't extend all the way over the tabs section because it blocks functionality (can't click anything)
	That's why the pointer-events: none; is critical!
*/
.Tabs {
	position: relative;
}
	.Tabs::after {
		content: '';
		position: absolute;
		top: -1px;
		bottom: 1px;
		left: -1px;
		right: 0;
		border: 2px solid #e0e0e0;
		border-bottom: none;
		border-right: none;
		border-radius: 4px 0 0 0; /* only top-left corner*/
		pointer-events: none; /* allow mouse interaction with the main .Tabs element - this one ignores mouse events */
	}

.TabsContents {
	padding: 5px;
	height: 100%;
	/*	overflow:		auto; */
}

.noscreen, .noscreeninline {
	display: none;
}

@media print {
	body {
		background: white;
	}

	.TabsBody, .TabsBodyNoTabs {
		border: none !important;
	}

	.TabsContents {
		Xoverflow: visible;	/* this makes the panel too large */
		padding: 2px 0 0 0;
	}

	/* don't print any .noprint, .Nav, .Wait, .Fetching, .Tabs, Filter .Panel, yellow .Info boxes, or any image buttons (note two cases) */
	.noprint, .Nav, .Wait, .Fetching, .Tabs, .Panel, .Info, img[src^="/Images/Btn/"], img[src^="/images/Btn/"] {
		display: none !important;
	}

	.noscreen {
		display: block;
	}

	.noscreeninline {
		display: inline-block;
	}
}


.Panel {
	margin: 0 0 4px 0;
	padding: 1px 4px 1px 4px;
	background: #aaa;
	background: url(/images/Gradients/GrayRevDark.png) repeat-x;
	border: 1px solid #888;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

	.Panel SPAN {
		display: inline-block;
		position: relative;
		padding: 0px 5px 2px 5px;
		text-align: left;
		height: 18px;
		background: #ddd;
		background: url(/images/Gradients/Gray.png) repeat-x center;
		border: 1px solid #666;
		border-radius: 6px;
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
	}

		.Panel SPAN.Rbl {
			background: transparent;
			padding: 0;
			border: none;
		}

		.Panel SPAN LABEL {
			margin: 1px 3px 1px 1px;
		}

		.Panel SPAN INPUT, .Panel SPAN SELECT, .Panel span button {
			margin-top: 0px;
			padding: 0;
			position: relative;
			top: 1px;
		}

		.Panel INPUT.Check, .Panel SPAN.Rbl INPUT {
			margin-top: 0px;
			position: relative;
			top: 3px;
		}

	.Panel INPUT.Btn {
		line-height: 15px;
		position: relative;
		top: 1px;
		margin: -1px 0 0 0;
		padding: 1px 5px;
	}

/* http://www.evotech.net/blog/2010/04/hack-for-webkit-filter-for-chrome-and-safari/#comment-21507 */
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.Panel INPUT.Btn, .Panel button {
		padding: 3px 5px;
	}
}

/* NOTE: TODO: The .Toggler as well as all .Nav classes have to match those inside NavigationMenu.js (ha-navigation-menu) */
/* Add this class to a panel to show ⯈ when .Collapsed is also set and rotates 90 degrees when Expanded (not .Collapsed) */
.Toggler {
	cursor: pointer;
	position: relative;
}

	.Toggler::after {
		content: '⯈'; /* 10.25 x 15.33 pixels */
		transform-origin: 45% 55%;
		transform: rotate(90deg); /* down when Expanded */
		position: absolute;
		left: 1px;
		top: -1px;
		color: #00a;
		font-size: 115%;
		transition: transform 0.3s ease;
	}

	.Toggler.Collapsed::after {
		transform: rotate(0); /* right when Collapsed */
	}


.Nav {
	/* border-bottom: 1px solid #888888; */
	padding-left: 3px;
	padding-right: 4px;
}

	.Nav .Heading {
		margin-top: 4px;
		background: #ccddee;
		background: url(/images/Gradients/NavInfo.png) repeat-x;
		border: 1px solid #888888;
		border-bottom: none;
		padding: 1px 5px 3px 5px;
		text-align: center;
		font-weight: bold;
		border-radius: 6px 6px 0 0;
		-moz-border-radius: 6px 6px 0 0;
		-webkit-border-radius: 6px 6px 0 0;
	}
	.Nav .Heading.Route {
		background: #edf;
		background-image: none; /* no gradient */
	}
	.Nav .Heading.Route.Sel {
		background-image: linear-gradient(#edf, #a9b);
	}

	.Nav .TabsRow {		/* Can't use just .Nav .Tabs because .Tabs already modifies padding */
		display: flex;
		grid-gap: 2px;
	}
	.Nav .Tab {
		flex: 1 1 auto;
		Xfont-weight: normal;
		opacity: 0.5;
		cursor: pointer;
		box-shadow: rgba(0,0,0,.9) 1px 2px 6px inset;
	}
		.Nav .Tab.Sel {
			font-weight: bold;
			opacity: 1;
			cursor: default;
			box-shadow: rgba(0,0,0,.7) 2px 2px 5px;
			z-index: -1; /* hides the bottom portion of the box-shadow */
			margin-right: 3px;	/* make room for the shadow */
		}

	.Nav .Menu .Heading {
		background: #cceecc;
		background: url(/images/Gradients/NavMenu.png) repeat-x;
	}

	.Nav .Admin .Heading {
		background: #eecccc;
		background: url(/images/Gradients/NavAdmin.png) repeat-x;
	}

	.Nav .Restricted .Heading {
		background: #eeddcc;
		background: url(/images/Gradients/NavRestricted.png) repeat-x;
	}

	.Nav .SysAdmin .Heading {
		background: #bbf;
		background: url(/images/Gradients/NavSysAdmin.png) repeat-x;
	}

	.Nav .Retailer .Heading {
		background: #ddbbdd;
		background: url(/images/Gradients/NavRetailer.png) repeat-x;
	}

	.Nav .First {
		margin-top: 0px;
	}

.NavPanel {
	text-align: left;
	background: #f8f8f8;
	border: 1px solid #888888;
	padding: 4px;
	border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
	box-shadow: rgba(0,0,0,.25) 0 2px 5px inset;
}
	.NavPanel.Mid {
		margin-bottom: 0px;
		border-bottom: none;
		border-radius: 0 0 0px 0px;
		-moz-border-radius: 0 0 0px 0px;
		-webkit-border-radius: 0 0 0px 0px;
	}

.Nav .MidPanel {
	margin-bottom: 0px;
	border-bottom: none;
	border-radius: 0 0 0px 0px;
	-moz-border-radius: 0 0 0px 0px;
	-webkit-border-radius: 0 0 0px 0px;
}

.Nav .TopPanel {
	text-align: left;
	border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
}

.NavPanel P {
	margin: 2px 0;
}

.NavPanel UL {
	margin: 2px 0 2px 16px;
	padding: 0;
}

	.NavPanel UL UL {
		margin-left: 7px;
		list-style-type: square;
	}

.Nav #Roles {
	display: none;
	position: absolute;
	margin: -13px 0 0 -6px;
	background: #ffffcc;
	padding: 0px 5px 2px 5px;
	border: 1px solid gray;
	text-align: left;
	border-radius: 6px 6px 6px 6px;
	-moz-border-radius: 6px 6px 6px 6px;
	-webkit-border-radius: 6px 6px 6px 6px;
	/* http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/ */
	-moz-box-shadow: 3px 3px 6px #000;
	-webkit-box-shadow: 3px 3px 6px #000;
	box-shadow: 3px 3px 6px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#000000');
}

	.Nav #Roles INPUT {
		margin-left: 0px;
	}

.Nav #LoginInfo:hover #Roles {
	display: block;
	z-index: 999999;
}

.Nav .Selected {
	background: #ff6;
	background: linear-gradient(#ffa, #fe0);
}

.Nav LI.Selected A {
	color: black;
}


.EP {
	border-right: white 2px ridge;
	padding-right: 1px;
	border-top: white 2px ridge;
	padding-left: 1px;
	font-size: 8pt;
	padding-bottom: 1px;
	border-left: white 2px ridge;
	color: black;
	padding-top: 1px;
	border-bottom: white 2px ridge;
	font-family: Tahoma;
	background-color: #dedfde;
}

	.EP .Header {
		color: #E7E7FF;
		background-color: #4A3C8C;
		font-weight: bold;
	}

	.EP INPUT {
		width: 100%;
		font-family: Tahoma;
	}

INPUT, SELECT, TEXTAREA, button {
	font-size: 11px;
	padding: 0px;
	font-family: Tahoma;
}

.FarmInfoHeader {
}

.FarmInfoValue {
	font-weight: bold;
}


.Info {
	display: inline-block;
	border: 1px solid #dc7;
	border-radius: 6px;
	background: #ffffcc;
	padding: 3px 4px;
	margin: 1px auto 5px 0;
}

	.Info H2 {
		margin: -2px -3px -2px -3px;
		padding: 0 5px 1px 5px;
		border: 1px outset #fe8;
		border-radius: 5px;
		color: #530;
		background: #fe8;
	}

	.Info DIV {
		margin: 5px 0 0 0;
	}

	.Info H3 {
		margin: 5px 0 1px 10px;
		padding: 0;
		color: #540;
	}

	.Info UL {
		margin: 0 0 0 25px;
		padding: 0;
	}

	.Info OL {
		margin: 5px 0 0 15px;
		padding: 0;
	}

	.Info a {
		color: #00f;
		font-weight: bold;
	}

TH.dAdded, TH.dUpdated {
	/*display: none;*/
}

TD.dAdded, TD.dUpdated {
	/*display: none;*/
	font-size: 8px;
}


UL.Scout, UL.Scout UL {
	padding: 0;
}

	UL.Scout LI {
		padding: 0;
		margin: 0 0 0 16px;
	}

		UL.Scout LI LI LI {
			padding: 1px 5px 2px 1px;
		}

			UL.Scout LI LI LI:hover {
				background: #ccffcc;
			}

		UL.Scout LI.Selected {
			background: #ffffbb;
		}


/* Suspended Retailer message box */
#phSuspended SPAN {
	display: inline-block;
	font-size: 24px;
	font-weight: bold;
	border: 2px solid gray;
	padding: 50px 50px;
	margin: 100px 20px;
	background: #ffffcc;
	border-radius: 80px;
	-moz-border-radius: 80px;
	-webkit-border-radius: 80px;
	/* http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/ */
	-moz-box-shadow: 8px 8px 12px #000;
	-webkit-box-shadow: 8px 8px 12px #000;
	box-shadow: 8px 8px 12px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=12, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=12, Direction=135, Color='#000000');
}

OBJECT, EMBED {
	/* height: 50px;	2013/10/22 This messed up Uplodify height!
	This acts as a Min Height, adjusted in javascript to fill in the screen */
}


/* Soil Sample Labels printing report */

.SoilSamples {
	border-collapse: collapse;
	border: none;
}

	.SoilSamples TH, .SoilSamples TD {
		border: 1px outset;
	}

		.SoilSamples TD TD {
			border: none;
		}

		.SoilSamples TD.Separator {
			background: white;
			border: none;
			font-size: 5px;
		}

.SamplesHeading {
	border-collapse: collapse;
	background: #eee;
}

	.SamplesHeading TD {
		border: 1px solid black;
		margin-bottom: 2px;
		padding: 2px;
	}

.SoilSamples .ALs, .SamplesHeading .ALs TD {
	font-size: 140%;
}

.SamplesReport TD {
	border: 1px solid black;
}

TD.FarmSep {
	border: none;
	font-size: 4px;
	background: white;
}

.SamplesReport .FarmInfo {
	background: #ddd;
}

.SamplesReport .FarmDescription {
	background: #ffc;
	border: 1px inset;
	padding: 2px;
}

	.SamplesReport .FarmDescription TD {
		border: none;
	}

.SamplesReport .FieldHeading TD {
	background: #ccc;
	font-weight: bold;
	text-align: center;
	padding: 0 5px 0 5px;
}

.SamplesReport .FieldData TD {
	background: #f4f4f4;
	padding: 0 5px 0 5px;
}

.SamplesReport TABLE.SampleLabels TD {
	border-collapse: collapse;
	border: none;
	padding: 0;
}

.Retailers .Master {
	background: #dfd;
}

.Retailers .Active {
	background: #def;
}

.Retailers .Suspended {
	background: #fdd;
}

/* See /js/Admin.js $.ajaxSetyp() slides this down/up when Fetching, make sure to add such element to your page */
#Fetching, .Fetching {
	display: none;
	position: absolute;
	z-index: 100;
	margin: 3px 0;
	padding: 4px 6px;
	background: yellow;
	border: 1px solid #863;
	font-size: 14px;
	font-weight: bold;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	box-shadow: rgba(0,0,0,.5) 3px 3px 8px;
	-moz-box-shadow: rgba(0,0,0,.5) 3px 3px 8px;
	-webkit-box-shadow: rgba(0,0,0,.5) 3px 3px 8px;
}

/* Typically this is used by the Show: o Active o Hidden radios but can be used by anything - shows selected option in bold */
.RadioSelected {
	font-weight: bold;
	font-size: 120%;
	color: #00c;
}

.toast-sidebar {
	left: 240px;
	top: 120px;
}

.toast-title {
	font-size: 14px;
}

.toast-message {
	font-size: 12px;
}

.Plan {
	display: inline-block;
	margin: -3px 0 -5px 0;
	padding-top: 3px;
	text-align: center;
	color: red;
	cursor: pointer;
}

.Plan17 {
	background: url('/css/images/Plans17.png') no-repeat;
	margin: -3px 0 -5px 0;
	padding-top: 0px;
	position: relative;
	top: 1px;
	width: 17px;
	height: 17px;
}

.Plan18 {
	background: url('/css/images/Plans17.png') no-repeat;
	margin: -3px 0 -5px 0;
	padding-top: 0px;
	position: relative;
	top: 1px;
	width: 18px;
	height: 18px;
}

.Plan18Gold, .Plan18Silver, .Plan18Bronze {
	margin: -3px 0 -5px 0;
	padding-top: 0px;
	position: relative;
	top: 1px;
	width: 18px;
	height: 18px;
}

.Plan18Gold {
	background: url('/css/images/Gold2.gif') no-repeat;
}

.Plan18Silver {
	background: url('/css/images/Silver2.gif') no-repeat;
}

.Plan18Bronze {
	background: url('/css/images/Bronze2.gif') no-repeat;
}

.Plan19 {
	background: url('/css/images/Plans19b.png') no-repeat;
	margin: -3px 0 -5px 0;
	padding-top: 0px;
	position: relative;
	top: 2px;
	width: 19px;
	height: 19px;
}

.Plan20 {
	background: url('/css/images/Plans20.png') no-repeat;
	width: 20px;
	height: 20px;
}

.Plan21 {
	background: url('/css/images/Plans21.png') no-repeat;
	width: 21px;
	height: 21px;
}

.Plan36 {
	background: url('/css/images/Plans36.png') no-repeat;
	width: 36px;
	height: 36px;
}

.Plan72 {
	background: url('/css/images/Plans72.png') no-repeat;
	width: 72px;
	height: 72px;
}

.Gold {
	background-position-x: 0;
}

.Silver {
	background-position-x: -33.3%;
}

.Bronze {
	background-position-x: -66.6%;
}


/* 2020/03/28 Fertilizer support instead of PCP value */
.Fert {
	color: blue;
	font-weight: bold;
}
td.Fert {
	vertical-align: middle;
	background-color: #def;
}
.Alternating td.Fert {
	background-color: #cde;
}

/* HTML 5 and Knockout Validation */
input:invalid, select:invalid {
	Xbackground: #fcc;
	Xborder: 1px solid red;
	Xoutline: 2px solid red;
	box-shadow: yellow 0 0 5px 3px;
	Xz-index: 10000;
}

	input:invalid:focus, select:invalid:focus {
		background: white;
		Xoutline: 1px solid red;
	}

Xselect:required:invalid {
	background-image: linear-gradient(to right, red 50%, transparent 50%);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: 16px 16px;
	box-shadow: none;
}