/*ALL EM CONVERSIONS BASED ON 16PX*/


/* =============================================================================================
	BASE STYLES AND LAYOUT
============================================================================================= */

/* ------------------------------------------------------------------------ Page Styles & Resets */

html {
    font-size: 100%; 
    overflow-y: scroll;
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
	 box-sizing: border-box;
	}
	
body {
	margin: 0;
	min-height: 100%;
	font: normal 100%/1.6 'Muli', Arial, Helvetica, sans-serif; 
	color: #111;
	background: #eee;	
	} 

	.Preload * { /* Transitions fire only after page load http://css-tricks.com/transitions-only-after-page-load/ */
		-webkit-transition: none !important;
			transition: none !important;
		}
		
*, *:before, *:after { box-sizing: inherit; } /*inherits border-box from html*/

article, aside, figure, footer, header, hgroup, menu, nav, section, main { display: block; }

p, ol, ul, li { margin:0; padding: 0 0 1em; }


/* ------------------------------------------------------------------------ Clearfix Hack: http://nicolasgallagher.com/micro-clearfix-hack/ */

.CF:before, .CF:after { 
	content: ""; 
	display: table; 
	}
	.CF:after { clear: both; }
	.CF { *zoom: 1;}
	
.Clear { clear: both; }

		
/* ------------------------------------------------------------------------ Keyboard Accessibility */

.SkipLink { 
	position:absolute; 
	left:-10000px; 
	top:auto; 
	width:1px; 
	height:1px; 
	overflow:hidden;
	background: #007cc3;
	color: #fff;
	font-size: 0.875em;
	text-decoration:none;
	z-index: 100;
	} 
 
	.SkipLink:focus { 
		left:0;
		outline: none; 
		padding:0.375em 0.625em; 
		width:auto; 
		height:auto; 
		} 
		
a:focus, input:focus, select:focus, textarea:focus {outline: solid medium #aaa} /* outline shows with keyboard... */
	a:hover, a:active { outline: none !important; } /*...not with mouse (kinda) */
		

/* ------------------------------------------------------------------------ Headers */

h1, h2, h3  { 	
	line-height:1.2;
	font-weight:bold; 	
	text-rendering: optimizeLegibility;
	margin:0;
	text-transform: uppercase;
	}	

	h1 {
		font-size: 2em; /*32px*/
		padding-bottom: 0.5em; /* 16px (consistent with p, ol, ul, li, img) */
		}
		
	h2 { 
		font-size: 1.75em; /*28px*/
		padding: 0.571em 0; /* 16px */
		}
			
	h3 { 
		font-size: 1.5em; /*24px*/
		padding: 0.667em 0; /* 16px */
		}	
		
		h1 + h2, h1 + h3, h2 + h3  { padding-top: 0; }	
		
@media all and (min-width: 40em) {	

	h1 {
		font-size: 2.375em; /*38px*/
		padding-bottom: 0.421em; /* 16px */
		} 
	h2 { 
		font-size: 2em; /*32px*/
		padding: 0.5em 0; /* 16px */
		}
	
}

@media all and (min-width: 60em) {	
		
	h1 { 
		font-size: 2.625em; /*42px*/
		padding-bottom: 0.381em; /* 16px */
		}
		
	h2 {
		font-size: 2.25em; /*36px*/
		padding-bottom: 0.444em; /* 16px */
		} 
		
}	

				
/* ------------------------------------------------------------------------ Lists */

ul { 
	list-style: none; 
	list-style-position: outside;
	padding-left: .25em;
	}
	ul li {	
	    padding-left:1em;
		position: relative;
		background-image: url(../../images/arrow-right-grey.svg);
		background-repeat: no-repeat;
		background-position: left 0.438em;
		background-size: 6px;
		}
			
ol { 
	list-style-position: outside;
	padding-left: 1.5em;
	}
	ol li { 
		padding-left:0; 
		background-image: none; 
		}
				

	li ul, li ol { margin: 0.875em 0 -.5em 0; }
	
		li:last-child {padding-bottom:0; }
			
					
/* ------------------------------------------------------------------------ Other Base Text Styles */

b, strong { font-weight: bold;}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
	}
	sup { top: -0.5em; }
	sub { bottom: -0.25em; }
	
.NoWrap { white-space:nowrap; }

.Note {
	font-size: 0.875em;
	font-style:italic; 
	}	
		
.IntroText, .IntroTextSm { 
	font-size: 1.25em; /*20px*/
	padding-bottom: 0.800em; /* 16px */
	line-height: 1.4;
	}
	
@media all and (min-width: 60em) {	

	.IntroText { 
		font-size: 1.875em; /*30px*/
		padding-bottom: 0.533em; /* 16px */
		}

}

	
/* ------------------------------------------------------------------------ Links */

a { 
	color: #e7004c; 
	font-weight: bold;
	
	-webkit-transition: all 0.5s;
		transition: all 0.5s;
	}	
	a:hover { text-decoration:none;	}
	
	main a { word-wrap: break-word; /*Makes long URL's wrap*/ }

	a img {
		display: block;
		border: none;
		-webkit-backface-visibility: hidden;
			
		-webkit-transition: opacity 0.5s;
			transition: opacity 0.5s;
		}				
		a img:hover { opacity: .8; }		
			 
.More {
	display: inline-block;
	text-decoration:none;	
	position: relative;
	font-weight: normal
	font-size: 1.25em;
	color: #007cc3;
	padding-left: 1.375em;
	
	background-image: url(../../images/more.svg);
	background-repeat: no-repeat;
	background-position: left 0.22em;
	
	-webkit-transition: color 0.5s;
		transition: color 0.5s;
	}		
	.More:hover { 
		color: #111; 
		background-image: url(../../images/more-hover.svg);
		}
	
.Button {
	color: #fff;
	text-decoration:none;
	text-align:center;
	white-space: normal; /*Makes text wrap on resize */
	border:none;
	font-size: 1.125em;
	line-height: 1.2;
	text-transform:uppercase;

	
	display:inline-block;	
	background: #007cc3;
	width:100%;
	padding: 0.75em 2em;
	cursor: pointer;
	}
	
	.Button:hover { 
		background: #409dd2;

		-webkit-transform: scale(1.02);
			transform: scale(1.02);
		}
		
@media all and (min-width: 40em) {	
	
	
	.Button { width: auto;}
	
}
		
	
/* ------------------------------------------------------------------------ Images */

img {
	 border: 0; 
	 max-width:100%;
	 height:auto!important;
	 margin: 0 0 1em 0; 
	 padding:0;
    -ms-interpolation-mode: bicubic;	
	}
	
figure {
	width: 100%; 
	margin: .5em auto 2em auto;
	padding: 1em;
	background: #f8f8f8;
	}
	
	figure img { 
		width: 100%;
		margin-bottom: .5em; 
		}
	
	figcaption { 
		color: #007cc3;
		text-align: center;
		padding:0 0 .5em 0;
		}
	
img.ImageFloatLeft, img.ImageFloatRight { margin: .375em 0 1em 0;	}
	
				
@media all and (min-width: 30em) {	

	img.ImageFloatLeft, img.ImageFloatRight { max-width:65%; }	
	
}

@media all and (min-width: 40em) {	
	
	img.ImageFloatLeft {
		float: left;
		margin: .375em 3.5% .375em 0;
		max-width:50%;
		}
		
	img.ImageFloatRight {
		float: right;
		margin: .375em 0 .375em 3.5%;
		max-width:50%;
		}
	
}

@media all and (min-width: 60em) {	
		
	img.ImageFloatLeft, img.ImageFloatRight { max-width:33%; }
	
}		
			
	
/* ------------------------------------------------------------------------ SVG's */

svg {
	width: 100%;
	height: 100%;
	}
		
a.SVG { /*this makes links work when wrapped around an svg used as an <object> */
	position: relative;
	display: inline-block; 
	}
	a.SVG:after {
		content: ""; 
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left:0;
		}
		
img[src$=".svg"] { max-width:100%; } /*when using svg as an <img>, this keeps it from doing wonky things in IE when being resized*/
			
.SVGFullWidth  { /*this makes full width inline or external <use> svg's resize properly in IE  */
	width:100%;
	height: 0;
    padding-top: 48%; /*adjust as necessary*/
    position: relative;
	}
	.SVGFullWidth svg {
		position: absolute;
		top: 0;
		left: 0;
		}
		
		
/* ------------------------------------------------------------------------ Video */

video { margin:1em 0 }


/* ------------------------------------------------------------------------ Horizontal Rules */

hr { 
	border:none;
	color: #ddd;
	background: #ddd;
	height:0.063em;
	margin:1em auto 2em auto;
	}	
	
	hr + h2, hr + h3 { padding-top: 0; }
	hr + .InfoBox { margin-top: 2.5em; }	
	.TableWrapper + hr, table + hr, .InfoBox + hr, .FlexibleIframe + hr { margin-top: 2.5em; }


/* ------------------------------------------------------------------------ Flexible iFrames */

.FlexibleIframe {
	position: relative;
	margin: .5em 0 2em 0;
    padding-bottom: 56.25%;
    padding-top: 30px; 
	height: 0; 
	overflow: hidden;
	}
	.FlexibleIframe iframe,
	.FlexibleIframe object,
	.FlexibleIframe embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}
		
.FlexibleIframe.Map { border: 2px solid #ddd; }


/* ------------------------------------------------------------------------ Layout */
	
.Wrapper {
	width:90%;
	margin:0 auto;
	}	
		
@media all and (min-width: 40em) {	

	.Wrapper { width:95%; }
		
	[class*='Col-'] { 
		margin-right: 3.5%;
		float:left; 
		}
		[class*='Col-']:last-child { margin-right: 0; }
				
		.Col-1-3 { width:30%; }	
			.Col-1-3:nth-child(3n) { margin-right: 0; }				
			.Col-1-3:nth-child(3n+4) {clear: both;}			
		
		.Col-2-3 { width:62.5%; }	
					
		.Col-1-2, .Col-1-4 { width:48.25%;}
			.Col-1-2:nth-child(2n), .Col-1-4:nth-child(2n) { margin-right: 0; }


			.Col-1-2.DelayedCol {
				margin-right: 0;
				float:none; 
				width:100%;
				}
		
		.Col-3-4 { width:74.125%; }		
		
		.Col-1-6 { width:16.08%; }		
	
		.Col-5-6 { width:80.42%; }	
		
		.NarrowCol { 
			width:65.5%;
			margin:0 auto;
			}	
			
}	

@media all and (min-width: 60em) {		
			
	.Col-1-4 { width:22.375%; }		
		.Col-1-4:nth-child(2n) { margin-right: 3.5%; }			
		.Col-3-4 + .Col-1-4 { margin-right: 0; }			
		.Col-1-4:nth-child(4n) { margin-right: 0; }			
		.Col-1-4:nth-child(4n+5) {clear: both;}
		
}

@media all and (min-width: 80em) {	

	.Col-1-2.DelayedCol {
		margin-right: 3.5%;
		float:left; 
		width:48.25%;
		}
		.Col-1-2.DelayedCol:last-child, .Col-1-2.DelayedCol:nth-child(2n), .Col-1-4.DelayedCol:nth-child(2n) { margin-right: 0; }

}



/* =============================================================================================
	HEADER
============================================================================================= */

.PrintHeader { display:none; }


header { background:#222; }
		
.Logo { 
	padding: .875em 5% .75em 5%;
	background: #409dd2;
	height: 83px;
	}

	.Logo a {display: block;}

	.Logo img { 
		display: block;
		width:226px; 
		height: 49px;
		margin: .5em 0 0 0;
		}

	.Logo a:focus {outline: solid medium #007cc3; } /* outline shows with keyboard... */

@media all and (min-width: 40em) {

	.Logo {padding: .875em 2.5% .75em 2.5%; }

}

@media all and (min-width: 60em) {

	header {
		position: fixed;
		float:left;
		width: 25%;
		height: 100%;
		}

		.Logo img { margin: .5em auto 0 auto; }

}

@media all and (min-width: 80em) {

	header { width: 16.66%; }

}

@media all and (max-width:88em) and (min-width:60em) {

	.Logo { 
		height: 64px; 
		padding: .875em .5em .75em .5em; 
		}
		.Logo img {
			margin: .125em auto 0 auto;
			width:180px; 
			height: 43px;
			}	

 }


@media all and (min-width: 88em) {

	.Logo { padding: .875em 2em .75em 2em; }

}

/* ------------------------------------------------------------------------ Nav (SmartMenus) - Original css is in Rough folder */

/* ------------------------------------------------- Mobile Core CSS (don't touch!) */

.sm{position:relative;z-index:9999;}
.sm,.sm ul,.sm li{display:block;list-style:none;margin:0;padding:0;line-height:normal;direction:ltr;text-align:left;-webkit-tap-highlight-color:rgba(0,0,0,0);}
.sm-rtl,.sm-rtl ul,.sm-rtl li{direction:rtl;text-align:right;}
.sm>li>h1,.sm>li>h2,.sm>li>h3,.sm>li>h4,.sm>li>h5,.sm>li>h6{margin:0;padding:0;}
.sm ul{display:none;}
.sm li,.sm a{position:relative;}
.sm a{display:block;}
.sm a.disabled{cursor:not-allowed;}
.sm:after{content:"\00a0";display:block;height:0;font:0px/0 serif;clear:both;visibility:hidden;overflow:hidden;}
.sm,.sm *,.sm *:before,.sm *:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}


/* ------------------------------------------------- Mobile Styling (adapted from Simple Theme) */

.sm-simple a {
	padding: 1.125em 5% 1.125em calc(5% + 36px); /* make room for the toggle button (sub indicator) */
	color: #fff;
	font-weight: normal;
	font-size: 1.125em;
	line-height: 1.2;
	text-decoration: none;
	outline: 0;
	border-left: 4px solid transparent;
	}

	.sm-simple a.Farms {
		background-image: url(../../images/nav-icon-farms.svg); 
		background-repeat: no-repeat ;
		background-position: 5%;
	    background-size: 1.5em;
		}

	.sm-simple a.Account {
		background-image: url(../../images/nav-icon-account.svg); 
		background-repeat: no-repeat ;
		background-position: 5%;
	    background-size: 1.5em;
		}
		
	.sm-simple a:hover, .sm-simple a:focus, .sm-simple a:active, .sm-simple a.highlighted, .sm-simple a.current { 
		background-color: #1b1b1b;
		border-left: 4px solid #007cc3;
		}
	
		
	.sm-simple a.disabled { 
		background: #666;
		color: #cccccc;
		}
		
		
.sm-simple a span.sub-arrow {
	position: absolute;
	top: 50%;
	margin-top: -17px;
	left: auto;
	right: 4px;
	width: 34px;
	height: 34px;
	overflow: hidden;
	font: bold 14px/34px monospace !important;
	text-align: center;
	text-shadow: none;
	background: rgba(0, 0, 0, 0.1);
	}	

	.sm-simple a.highlighted span.sub-arrow:before {
		display: block;
		content: '-';
		text-align: center;
		}
		
	
.sm-simple li { background-image: none; }

	.sm-simple > li:first-child { border-top: 0; }
	

.sm-simple ul { background: rgba(0, 0, 0, 0.1); }

	.sm-simple ul a { font-size: .875em; }
	
	
@media all and (max-width:60em) and (min-width:0em) { /*This adds a left indent on each level*/
	
	.sm-simple ul a { border-left: 8px solid transparent; }	
		.sm-simple ul ul a { border-left: 16px solid transparent; }		
			.sm-simple ul ul ul a { border-left: 24px solid transparent; }
				.sm-simple ul ul ul ul a { border-left: 32px solid transparent; }
					.sm-simple ul ul ul ul ul a { border-left: 40px solid transparent; }
		
}

@media all and (min-width: 40em) {

	.sm-simple a { padding: 1.125em 2.5% 1.125em calc(2.5% + 36px); }
		.sm-simple a.Farms, .sm-simple a.Account {background-position: 2.5% 1em; }

}

@media all and (min-width: 60em) {

	.MainNav { padding-top: 2.75em; }
		.sm-simple a { padding: 1.125em 1em 1.125em 3em; }
			.sm-simple a.Farms, .sm-simple a.Account {background-position: 1em 1em; }
}

@media all and (min-width: 80em) {

	.MainNav { padding-top: 3.75em; }

}


/* ------------------------------------------------- Mobile Menu/Hamburger Button */

.MainNavButton {
	padding: 1em 5%;
	background: #111;
	color: #fff;
	}

.main-menu-btn {
	font-size: 1.25em;
	line-height: 1.3;

	margin:0;
	position: relative;
	/*display: inline-block;*/
	width: 100%;
	height: 28px;
	text-indent: 2em;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
	/* hamburger icon */
	.main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after {
		position: absolute;
		top: 50%;
		left: 2px;
		height: 2px;
		width: 24px;
		background: #bbb;
		-webkit-transition: all 0.25s;
		transition: all 0.25s;
		}
		
		.main-menu-btn-icon:before {
			content: '';
			top: -7px;
			left: 0;
			}
		
		.main-menu-btn-icon:after {
			content: '';
			top: 7px;
			left: 0;
			}
		
		/* x icon */
		#main-menu-state:checked ~ .MainNavButton .main-menu-btn .main-menu-btn-icon {
			height: 0;
			background: transparent;
			}
			
		#main-menu-state:checked ~ .MainNavButton .main-menu-btn .main-menu-btn-icon:before {
			top: 0;
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
			}
			
		#main-menu-state:checked ~ .MainNavButton .main-menu-btn .main-menu-btn-icon:after {
			top: 0;
			-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
			}
			
		/* hide menu state checkbox offscreen (so it stays visible to screen readers) */
		#main-menu-state {
			position: absolute;
			top: -99999px;
			}
			
		/* hide the menu in mobile view */
		#main-menu-state:not(:checked) ~ #main-menu { display: none; }
		
		#main-menu-state:checked ~ #main-menu { display: block; }
		

@media all and (min-width: 40em) {

	.MainNavButton {padding: 1em 2.5%; }

}

@media all and (min-width: 60em) {
	
.MainNavButton { display: none; }
	
	/* hide the button in desktop view */
	.main-menu-btn {
		position: absolute;
		top: -99999px;
		}
		
	/* always show the menu in desktop view */
	#main-menu-state:not(:checked) ~ #main-menu {
		display: block;
		}
	
}



/* =============================================================================================
	MAIN CONTENT AREA
============================================================================================= */

/* ------------------------------------------------------------------------ Layout */

main:focus { outline: none; }

main .Wrapper {padding-top: 2.5em;}
			
@media all and (min-width: 60em) {				

	main {
		float:right;
		width:75%;	
		background-color: #eee;
		}

		.Login main {
			width: 100%;
			float:none;
			}
			.Login main .Wrapper { width:75%; }

}

@media all and (min-width: 80em) {	

	main { width:83.33%; }
		.Login main .Wrapper { width:50%; }

}

@media all and (min-width: 88em) {				

	main .Wrapper {padding-top: 3.5em;}

}




/* ------------------------------------------------------------------------ Top Bar */

.TopBar { background: #666; }	

@media all and (min-width: 60em) {	

	.TopBar {
		padding-top: .875em;
		height: 83px;
		float:right;
		width:75%;
		background: #007cc3;
		}			

}

@media all and (min-width: 80em) {	

	.TopBar {width:83.33%;}		

}

@media all and (max-width:88em) and (min-width:60em) {

	.TopBar { 
		height: 64px; 
		padding-top: .375em; 
		}		
 
 }



/* ------------------------------------------------------------------------ Search */

.TopBar .Search { display: none; }

.MainNav .Search { padding: .75em 5%; }


.SearchLabel { display: none; }

.SearchField { 
	float:left;
	width: calc(100% - 48px);
	height: 48px;
	border-right: none;
	border: 0;
	border-radius: 0;
	margin:0;
	}
	.SearchField:focus, .SearchButton:focus {
		outline: solid medium #ddd;
		outline: none !important;
		background-color: #ddd;
		 } /* outline shows with keyboard... */

.SearchButton {
	font-size: 0;
	width: 48px;
	height: 48px;
	display: block;
	float: left;
	padding: 0;
	margin: 0;
	border:0;
	cursor: pointer;

	background-image: url(../../images/search.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 48px;

	-webkit-transition: background 0.5s;
	transition: background 0.5s;
	}
	.SearchButton:hover { background-color: #eee; }


@media all and (min-width: 40em) {
	
	.MainNav .Search { padding: .75em 2.5%; }

}

@media all and (min-width: 60em) {	
			
	.MainNav .Search { display: none; }
	.TopBar .Search { display: block; }

	.Search {
		float: left;
		width: 30%;
		margin-top: .125em ;
		}

}


/* ------------------------------------------------------------------------ Profile */

.Profile { 
	padding: .25em 0 .5em 0;
	color: #fff;	
	}

@media all and (min-width: 60em) {	

	.Profile {
		float:right;
		padding: .5em 0 0 0;
		text-align:left;
		font-size: 1.125em;
		}			

}
		

				
/* ------------------------------------------------------------------------ Callouts */	

.CalloutGroup { margin: .5em 0 1em 0; }

	.Callout a { 
		display: block;
		width: 100%;
		padding-bottom:100%;
		height:0;
		margin: 0 auto 1.5em auto;
		color: #fff;
		text-align:center;
		position: relative;
		background: #007cc3;
		}
		.Callout a:hover { background: #111; }

    .Callout .CalloutText { 
		font-size: 1.75em;
		line-height: 1.2;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		}
		
		
/* ------------------------------------------------------------------------ InfoBox Modules */

/* ------------------------------------------------- Base Styles */

.InfoBox {	
	background: #fff;
	margin:.5em 0 2em 0;
	}	
	.InfoBox.Padded, .InfoBox .Padded { padding: 1.25em 1.5em .75em 1.5em; } /*If extra padding is needed*/
	
	.InfoBox > h2:first-child, .InfoBox > h3:first-child { padding-top: 0; }

	.InfoBox.Blue { border-left: 4px solid #007cc3; }
	.InfoBox.Critical { border-left: 4px solid #d80b1f; }
	.InfoBox.Warning { border-left: 4px solid #ed7c02; }
	.InfoBox.Normal { border-left: 4px solid #029a7b; }
			
	.InfoBox .FarmStatus {
		padding:1.125em 1em 1.125em 3em;
		margin-bottom: 1.5em;
		font-size: 1.125em;
		line-height: 1.2;
		color: #fff;
		display: block;
		text-decoration: none;
		}

		.InfoBox .FarmStatus:hover { 
			-webkit-transform: scale(1.02);
				transform: scale(1.02);
			}

		.InfoBox.Critical .FarmStatus { 
			background: #d80b1f url(../../images/status-icon-critical.svg) no-repeat 1em 1em; 
			background-size: 1.5em;
			text-transform: uppercase;
			}
			.InfoBox.Critical .FarmStatus:hover { background-color: #ed0c22;}

		.InfoBox.Warning .FarmStatus { 
			background: #ed7c02 url(../../images/status-icon-warning.svg) no-repeat 1em 1em;
			background-size: 1.5em;
			text-transform: capitalize;
			}
			.InfoBox.Warning .FarmStatus:hover { background-color: #fd8d15;}

		.InfoBox.Normal .FarmStatus { 
			background: #029a7b url(../../images/status-icon-normal.svg) no-repeat 1em 1em;
			background-size: 1.5em;
			}
			.InfoBox.Normal .FarmStatus:hover { background-color: #02b38f;}

@media all and (min-width: 60em) {	

	.InfoBox.Padded, .InfoBox .Padded { padding: 2em 2em 1em 2em ; } /*If extra padding is needed*/

}

	
/* ------------------------------------------------- Title Module  */	

.InfoBox h3.Header { 
	padding: 0;
	color: #fff;		
	background: #007cc3;
	}				
	.InfoBox h3.Header a {
		color: #fff; 
		background: #007cc3;
		text-decoration: none;
		font-weight: normal;
		padding:.375em .625em;
		display: block;
		}
		.InfoBox h3.Header a:hover { 
			text-decoration: none;
			background: #111; 
			}
			
		.InfoBox h3.Header.NoLink { padding:.375em .625em; } /* If the title has no link in it */
			
@media all and (min-width: 40em) {	

	.InfoBox h3.Header a, .InfoBox h3.Header.NoLink { padding:.25em .625em; }
		
}


/* ------------------------------------------------- List of Links Module */	

.InfoBox ul.LinksList { padding: 0; }
	
	.InfoBox ul.LinksList li { 
		margin:0; 
		padding: 0;
		border-bottom:1px solid #fff;
		background-image: none; 
		}
		.InfoBox ul.LinksList li:last-child { border-bottom: none; }
												
		.InfoBox ul.LinksList li a {  		
			display: block;
			width: 100%;
			padding:.875em 1.5em;
			text-decoration:none;
			color: #007cc3;
			font-weight: bold;
			
			-webkit-transition: background 0.5s;
				transition: background 0.5s;
			}
			.InfoBox ul.LinksList li a:hover { 
				background-color: #f8f8f8;
				text-decoration: underline; 
				}
				.Grey .InfoBox ul.LinksList li a:hover { background-color: #fff; }
				
				.InfoBox ul.LinksList li ul {
					border-top: 1px solid #fff;
					margin: 0;
					padding:0; 
					}
														
					.InfoBox ul.LinksList li li a { 
						font-weight: normal;
						padding-left: 2.5em;
						
						background: url(../../images/arrow-right-grey.svg) no-repeat 1.5em 1.25em;
						background-size: 6px;
						}
				
						.InfoBox ul.LinksList li li li a { 
							padding-left: 3.5em; 
							background-position: 2.5em 1.25em;
							}
							
							.InfoBox ul.LinksList li li li li a { 
								padding-left: 4.5em; 
								background-position: 3.5em 1.25em;
								}
								
								.InfoBox ul.LinksList li li li li li a { 
									padding-left: 5.5em;
									background-position: 4.5em 1.25em;
									}
									
															
/* ------------------------------------------------- SideNav Module - variation on LinksList module */

.SideNav, .Grey .SideNav {	
	background: #007cc3; 
	margin-top: 0;
	}	
	
	.SideNav h3.Header a { background: #111; }	
		.SideNav h3.Header a:hover { background: #007cc3; }
		
	.SideNav ul.LinksList li { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
			
		.SideNav ul.LinksList li a { color: #fff; }
		
			.SideNav ul.LinksList li a:hover, .Grey .SideNav ul.LinksList li a:hover { 
				background: #111; 
				text-decoration: underline; 
				}
				
				.SideNav ul.LinksList li ul { border-top: 1px solid rgba(255, 255, 255, 0.25); }
					

		.SideNav ul.LinksList li li { background: rgba(0, 0, 0, 0.1); }
		 
			.SideNav ul.LinksList li li a { background-image: none; }
									
				.SideNav ul.LinksList li li a, .SideNav ul.LinksList li li li a, .SideNav ul.LinksList li li li li a, .SideNav ul.LinksList li li li li li a { padding-left: 1.5em; }
																				

/* ------------------------------------------------- Accordions Module */

.InfoBox .Accordion { 
		margin: 0;
		padding:0;
		overflow:hidden;	
		list-style: none; 
		}		
		.InfoBox .Accordion dt { 
			margin:0; 
			padding: 0;
			border-bottom:1px solid #fff;
			position:relative;			
			}
				
			.InfoBox .Accordion dt a {  		
				display: block;
				width: 100%;
				padding: .875em 1.5em .875em 3.125em;
				font-weight: normal;
				text-decoration:none;
				color: #007cc3;
				
				background-image: url(../../images/arrow-right-grey.svg);
				background-repeat: no-repeat;
				background-position: 1.5em 1.125em;
				
				-webkit-transition: background-color 0.5s;
					transition: background-color 0.5s;
				}
				.InfoBox .Accordion dt a:hover { 
					background-color: #f8f8f8; 
					text-decoration:underline; 
					}
					.Grey .InfoBox .Accordion dt a:hover { background-color: #fff; }
					
					.InfoBox .Accordion dt.Active a { 
						color: #fff;
						font-weight:bold;
						
						background-color: #007cc3;
						background-image: url(../../images/arrow-down-white.svg);
						background-position: 1.5em 1.25em;
						}
						.Grey .InfoBox .Accordion dt.Active a:hover { background-color: #007cc3; }
						.InfoBox .Accordion dt.Active a:focus { outline: none; } 
					
	.InfoBox .Accordion dd {		
		margin: 0 ;
		padding:  1em 1.5em .75em 1.5em ;
		display: block;
		border-bottom:1px solid #fff;
		background: #f8f8f8;
		}
		.Grey .InfoBox .Accordion dd { background-color: #fff; }
			
	
/* ------------------------------------------------------------------------ Photo Gallery */

.Gallery { margin:.5em 0 1em 0; }

	.GalleryItem { margin-bottom: 1.5em; }
	
		.GalleryItem a { 
			display: block;
			text-decoration: none;
			}
	
		.GalleryItem .Image {
			display: block;	
			width: 100%;
			height: 12em;
			
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
			}
	
		.GalleryItem .Caption {
			display: block;
			width: 100%;
			text-align: center;
			text-decoration: none;
			background: #007cc3;
			padding: .75em 1.5em;
			font-weight: bold;
			color: #fff;
			
			-webkit-transition: all 0.5s;
				transition: all 0.5s;
			}
			.GalleryItem a:hover .Caption { background: #111; }
	

/* ------------------------------------------------------------------------ Tables */

table {
    border-collapse: collapse;
    border-spacing: 0;
	border:none; 
	width:100%;	
	margin:.5em 0 2em 0;
	overflow:auto;
	}	
	table[style] {width:100% !important; }	
	
	tr {
		background: #fff;
		border: none;
		border-bottom:2px solid #eee;
		}		
		tr:nth-child(odd) { background: #f8f8f8; }
	
	th, td {
		text-align: left;
		vertical-align: top;
		font-size: 0.813em;	
		padding:1.25em 1.5em ;
		}	
			
		th {
			background: #007cc3;
			color: #fff;
			font-weight:bold;
			}
			

/* ------------------------------------------------- Basic Table Responsive Tables */

@media all and (max-width:60em) and (min-width:0) {
	
	.TableWrapper {
		margin: .5em 0 2em 0;
		max-height: 320px;
		overflow: auto;
			-webkit-overflow-scrolling: touch;
		}
		.TableWrapper table { margin: 0; }
		
		
		/* jQuery Basic Table - Author: Jerry Low */

		table.bt thead,
		table.bt tbody th {
		  display: none;
		}
		
		table.bt tfoot th,
		table.bt tfoot td,
		table.bt tbody td {
		  border: none;
		  display: block;
		  vertical-align: top;
		}
		
		table.bt tfoot th:before,
		table.bt tfoot td:before,
		table.bt tbody td:before {
		  content: attr(data-th) ": ";
		  font-weight: bold;
		  width: 6.5em;
		  display: inline-block;
		}
		
		table.bt tfoot th.bt-hide,
		table.bt tfoot td.bt-hide,
		table.bt tbody td.bt-hide {
		  display: none;
		}
		
		table.bt tfoot th .bt-content,
		table.bt tfoot td .bt-content,
		table.bt tbody td .bt-content {
		  vertical-align: top;
		  width: calc(100% - 7.5em); 
		}
		
		table.bt tfoot th,
		table.bt tfoot td,
		table.bt tbody td {
		  padding: .75em 1em;
		  border-bottom:1px solid #eee;
		}
		
		table.bt tfoot th:before,
		table.bt tfoot td:before,
		table.bt tbody td:before {
		  color: #007cc3;
		  margin-right: 1em;
		  padding: 0 ;
		}
		
		table.bt tfoot th .bt-content,
		table.bt tfoot td .bt-content,
		table.bt tbody td .bt-content {
		  display: inline-block;
		  padding: 0;
		}
		
		table.bt tfoot th:first-of-type:before,
		table.bt tfoot th:first-of-type .bt-content,
		table.bt tfoot td:first-of-type:before,
		table.bt tfoot td:first-of-type .bt-content,
		table.bt tbody td:first-of-type:before,
		table.bt tbody td:first-of-type .bt-content {
		  height: 100%;
		}
		
}


/* ------------------------------------------------------------------------ Forms */
	
hr.Form { margin-top: 2.5em; }

.Error, .Error[style], .Required {
	color: #e7004c !important;
	font-size: 0.875em;
	font-weight:bold;
	}
	
fieldset { 
	padding: 0;
	margin:1.250em 0 0 0;
	border:0;
	}
	
	legend {
		margin:0 0 .25em 0;
		padding:0;
		}
		
	.RadioCheckBox { 
		background: #f8f8f8;
		padding: 1em ;
		}		
	
	.Other {margin: 0 0 .5em 1.5em; }

	.RadioTable {width: auto; }
	
		.RadioTable td {
			padding: 0;
			border: none;
			font-size: 1em;
			}
	
label {
	display:block; 
	margin: 1.125em 0 0.25em 0;
	font-size: 1.125em;
	}	
	label.RadioCheck, .RadioTable td label {
		display:inline-block; 
		margin: 0 0 0.5em 0;
		width:85%;	
		line-height: 1.4;
		}
		.RadioTable td label {
			margin-left: .25em; 
			width: auto;
			}
			
		label.RadioCheck.Last {margin-bottom:0; }
	
input, select, textarea {
	border: 2px solid #eee;
	font: normal 1.125em/1.6 'Muli', Arial, Helvetica, sans-serif; 
	color: #111;
	width: 100%;
	padding:.75em; 
	background: #fff;	
		
	-webkit-transition: all 0.5s;	
		transition: all 0.5s;
	}	
								
	input[type="checkbox"], input[type="radio"], input[type="image"] {
		height: auto;
		width:auto;
		padding: 0;
		background:transparent;
		vertical-align:top;
		margin-top:.375em;
		}
			
	textarea { 
		height: 10em; 
		width:100%;
		display: block;
		}
		textarea.Description { height: 20em; }
		
@media all and (max-width:50em) and (min-width:40em) {
	
	label.RadioCheck, .RadioTable td label { width:75%;	}
		
}
			
@media all and (max-width:64em) and (min-width:0) {
	
	input[type="text"], input[type="submit"], textarea { -webkit-appearance: none; }
	
}

/* ------------------------------------------------------------------------- Misc */
.farm-toggle {
	background-color: #409dd2; 
	color: #fff; 
	text-align: right; 
	cursor: pointer; 
	padding: 10px;
	font-weight: bold;
}
.farm-details {
	background-color: #fff; 
	padding: 15px;
}
	.farm-details div span {
		display: inline-block; 
		width: 150px; 
		font-weight: bold;
	}
.status-date { font-weight: normal; text-transform: none; }
.setting-label { font-weight: bold; display: inline-block; }

/* =============================================================================================
	FOOTER
============================================================================================= */

.Login footer, .PrintFooter { display:none; }

footer { 
	margin-top: 2em;
	padding: 1.25em 0 1em 0;
	border-top: 2px solid #fff;
	}

	footer p {
		font-size: .875em;
		color: #888;
		}
		

	.RKD {
		width: 99px; 
		height: 18px;
		background-size:100%;
		margin-top:.25em;
		display:inline-block;
		}
		.RKD a {display: block;}
			
	
@media all and (min-width: 40em) {

	footer { padding: 1.25em 0 .5em 0; }

		.Copyright { float:left; }	
	
		.RKD { float: right; }		
		
}

@media all and (min-width: 60em) {

	footer { 
		float: right;
	    width:75%;
		}	
	
}

@media all and (min-width: 80em) {	

	footer { width:83.33%; }

}

@media all and (min-width: 88em) {

	footer {
		margin-top: 4em;
		padding: 1.75em 0 1em 0; 
		}	

}



/* =============================================================================================
	ONE-OFF ALIGNMENT, MARGIN AND PADDING STYLES - CAN BE USED ON ANYTHING
============================================================================================= */

.AlignL {text-align:left; }
.AlignC {text-align:center; }
.AlignR {text-align:right; }

.MT1, .MT2, .MT3 { margin-top: 1em; }

.MB1, .MB2, .MB3 { margin-bottom: 1em; }

.MT0 { margin-top: 0; }
.MB0 { margin-bottom: 0; }

.PT1, .PT2, .PT3 { padding-top: 1em; }

.PB1, .PB2, .PB3 { padding-bottom: 1em; }

.PT0 { padding-top: 0; }
.PB0 { padding-bottom: 0; }

@media all and (min-width: 40em) {
	.FloatL {float: left;}
	.FloatR {float: right;}
} 

@media all and (min-width: 60em) {
	
	.MT2 { margin-top: 2em; }
	.MT3 { margin-top: 3em; }
	
	.MB2 { margin-bottom: 2em; }
	.MB3 { margin-bottom: 3em; }
	
	.PT2 { padding-top: 2em; }
	.PT3 { padding-top: 3em; }
	
	.PB2 { padding-bottom: 2em; }
	.PB3 { padding-bottom: 3em; }

}