/* MOBILE-FIRST RESPONSIVE STYLES
		---------------------------------------------------
		Styles below will apply to all devices starting at the smallest screen size or browser width.
		Some of the styles will be overriden further below for a more appropriate presentation dependent on viewport width and content layout. */

		html {
			-webkit-text-size-adjust: 100%;
			-ms-text-size-adjust: 100%;
			}


		.conditions {
			background-color: #f9f9f9;
			margin-bottom: 2em;
			padding: 1em 2em 2em;
			border: 1px solid #eee;
			color: #555;
			}

		.conditions ul li {
			margin-bottom: 2em;
			line-height: 1.5;
			}

		.conditions ul li,
		.conditions p {
			font-size: 13px;
		}

	/* HTML5 Block-level Elements - for browsers that don't render them correctly */
		article,
		aside,
		figure,
		footer,
		header,
		menu,
		nav,
		section {display: block;}

		dfn {
			cursor: help;
			border-bottom: 1px dotted #ddd;
			font-style: normal;
			}

		dt {
			margin-top: 2em;
			padding-top: 2em;
			border-top: 1px dashed #ccc;
			text-align: center;
			}

		dd {
			margin: .25em 0;
			text-align: center;
			}

		dd > dfn {
			font-weight: bold;
			}


label {font-weight: 400; line-height: 1.75;}
h4 { color: #d21034;}

.btn > .icon {
	display: inline-block;
	top: 2px;
	position: relative;
	}

.status {border-collapse: collapse; table-layout: fixed;}

.status th,
.status td { vertical-align: middle; font-size: 0; Xpadding: 15px; border: 15px solid #eee;}

.status th {background-color: #eee;}

.change-enrollment td {text-align: right; background-color: #eee;}
.action {text-align: center;}

.status th > div,
.status td > div {display: inline-block; width: 25%; padding:1%; vertical-align: middle; font-size: 1rem;}

.status th > div {font-size: 12px; font-weight: 400; color: #777; text-transform: uppercase; padding: 0 1%;}


	/* continue banner color full width of container past the banner image */
		.banner {
			background-color: #d21034;
			position: relative;
			}

		.nav-system {position: static;}

	/* provice menu toggle button button for small viewports */
		.menu-button {
			position: absolute; /* TODO : try to position proportionately to height of container */
			right: 1%;
			top: 1%;
			background: transparent; /* reset button styles */
			border: 0; /* reset button styles */
			padding: .333em .75em .5em;
			}

	 /* 3 bar menu icon made from 3 spans */
		.menu-button__bar {
			display: block;
			width: 1.5em;
			height: 2px;
			margin-top: 3px;
			background-color: #fff;
			}

		X.nav-main {
			list-style: none;
			margin: 0;
			padding: 0;

			height: 0;
			overflow: hidden; /* hide menu */
			-webkit-transition: height 0.5s;
			-moz-transition: height 0.5s;
			-ms-transition: height 0.5s;
			-o-transition: height 0.5s;
			transition: height 0.5s;
			}

		X.nav-pills > li {
			float: none;
			display: block;
			position: relative;
			border-top: 1px solid rgba(255,255,255,.25);
			}

		X.nav-pills a {
			float: none;
			display: block;
			border-radius: 0;
			line-height: 2;
			}

	/* show menu | height must be in absolute measurement otherwise transition won't work | dynamically set with JavaScript */
		.open {height: 12.5em;}

		.content {margin: 1em;}

	/* hide tooltips on small screen | affects both desktop and mobile, but is targetted toward touch devices because of hover issues */
		.tooltip {
			visibility: hidden;
			max-width: 20em;
			font-size: 13px;
			}

	/* required item status icon */
		.item-status {
			border: 2px solid #ccc;
			padding: .25em;
			background-color: #eee;
			border-radius: .25em;
			}

	/* call to action buttons container */
		.c2a {
			text-align: center;
			margin-top: 1em;
			}

	/* accept / decline call to action buttons | inherit some styles from .btn-primary */
		.btn--accept,
		.btn--decline {
			padding: .75em 2em 1.25em;
			font-weight: 400;
			-webkit-box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.1) inset, 0 3px 3px rgba(0, 0, 0, 0.2);
			-moz-box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.1) inset, 0 3px 3px rgba(0, 0, 0, 0.2);
			box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.1) inset, 0 3px 3px rgba(0, 0, 0, 0.2);
			border-radius: 10em;
			text-transform: none;
			}

	/* accept button */
		.btn--accept,
		.btn--accept:visited,
		.btn--accept--small,
		.btn--accept--small:visited {background-color: #0a0;}

		.btn--accept:hover,
		.btn--accept:active,
		.btn--accept:focus,
		.btn--accept--small:hover,
		.btn--accept--small:active,
		.btn--accept--small:focus {background-color: #080;}

		.btn--accept:hover,
		.btn--accept:active,
		.btn--accept:focus,
		.btn--decline:hover,
		.btn--decline:active,
		.btn--decline:focus {
			-webkit-box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.1) inset, 0 3px 3px rgba(0, 0, 0, 0.2);
			-moz-box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.1) inset, 0 3px 3px rgba(0, 0, 0, 0.2);
			box-shadow: 0 -6px 0 rgba(0, 0, 0, 0.1) inset, 0 3px 3px rgba(0, 0, 0, 0.2);
			}

	/* button active state - orange glow highlight */
		.btn--accept:active,
		.btn--decline:active {
			color: rgba(255,255,255,.5);
			box-shadow: 0 0 2px 1px #C80, 0 -3px 0 rgba(0, 0, 0, 0.1) inset, 0 2px 1px rgba(0, 0, 0, 0.35);
			outline: 0;
			}

	/* Accept / Decline text */
		.btn--accept > b,
		.btn--decline > b {
			font-size: 2em;
			font-family: serif;
			letter-spacing: .05em;
			font-weight: 400;
			text-shadow: 0 -1px 1px rgba(0,0,0,.5);
			}

	/* section headings */
		.h3 {
			margin: 0 -1em;
			text-align: center;
			padding-left: 1em;
			color: #fff;
			background-color: #000;
			}

		.h3 strong {
			font-weight: 400;
			text-transform: capitalize;
			}

		.h--announcements {
			background-color: #d21034;
			text-transform: uppercase;
			}



	/* section containers */
		.panel {
			background-color: #fff;
			padding: 1em 0;
			overflow: auto;
			Xborder: 1px solid #eee;
			margin-bottom: 1em;
			}

		X.panel > ul {
			padding: 0;
			list-style: none;
			}

		.panel li {line-height: 2;}

		.panel :last-child {margin-bottom:0;}

		.panel--announcements {
			margin: 0 -1em;
			padding: 1em;
			background-color: #F6F7F2; /* #ffd */
			}

		.footer {margin: 0;}

		.footer > p {display: none;}

		.link-logo {left: 10px;}

	/* trigger auto scrolling back to the top of page */
		.back-top {
			position: fixed;
			right: 10px;
			bottom: 15px;
			text-transform: uppercase;
			background-color: #ddd;
			width: 3em;
			height: 3em;
			line-height: 3em;
			Xborder-radius: 100%;
			text-decoration: none;
			color: #000;
			text-align: center;


			opacity: 0;
			visibility: hidden;

			-webkit-transition: opacity 0.5s;
			-moz-transition: opacity 0.5s;
			-ms-transition: opacity 0.5s;
			-o-transition: opacity 0.5s;
			transition: opacity 0.5s;
			}

	/* use JavaScript to add this class to .back-top to show the link once the page has been scrolled a bit */
		.back-top--visible {
			opacity: 1;
			visibility: visible;
			}

		.back-top > .arrow {border-width: 0 .5em 1em;}


.accordion-title {
	cursor: pointer;
	background-color: #eee;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #d9d9d9;
	text-align: left;
	color: #000;
	text-indent: 1%;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.accordion-title * {
  vertical-align: middle;
}

.accordion-title em {
	white-space:nowrap;
}

.accordion-title:hover,
.accordion-title:focus {
	color: #d21034;
}


.requiredItemsTable th {
	font-size: 12px;
	font-weight: 400;
	color: rgb(119, 119, 119);
	text-transform: uppercase;
	padding: 1em;
}

.statusRequired,
.statusReceived {font-weight: bold;}

.statusRequired {color: #d21034;}

.statusReceived {color: rgb(0, 136, 0);}


.accordion-title span {font-family:monospace, monospace;}

.accordion-title:hover:after {
	content: "show / hide";
	color: rgba(0,0,0,.75);
	font-family: sans-serif;
	font-size: 10px;
	text-transform: uppercase;
	font-weight: 400;
	margin-left: 1em;
	display: inline;
	vertical-align: middle;
}

.accordion-content {
	background-color: #f9f9f9;
	border: 1px solid #eee;
	padding-bottom: 2em;
	Xmargin-bottom: 0;
}


/*h3*/.label {letter-spacing:normal; word-spacing:normal; font-weight:400; line-height:normal; margin-bottom:.5em; text-transform:none;}


/* 320+
	---------------------------------------------------
	Proportional (EM-based) Media Queries - http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
	Find pixel breakpoint and divide it by base font size */
@media all and (min-width: 320px) { /* 320 / 16px = 20em */
/*	html {font-size: 90%;}

	.btn--accept {margin: 0 0 1em;}

	.btn--accept > b,
	.btn--decline > b {
		font-size: 1.4em;
		text-transform: uppercase;
		}

	.hr > strong {top: 2em;}

	.hr span {
		border-width: 0;
		background: none;
		}*/
}

/* 480+
	--------------------------------------------------- */
@media only screen and (min-width:480px) {
/*	.c2a {margin-top: 3em;}

	.btn--accept > b,
	.btn--decline > b {font-size:2em; text-transform:capitalize;}
*/
}

/* 768+
	--------------------------------------------------- */
@media only screen and (min-width:768px)
{
	html {font-size: 100%;}

	dl {
		background-color: #f9f9f9;
		overflow: hidden;
		margin: 0;
		border: 1em solid #eee;
		border-top: 0;
		}

	dt,
	dd {
		float: left;
		text-align: center;
		border-top: 1em solid #eee; /* 1px dashed #ccc; */
		width: 25%;
		padding: 1em 1%;
		margin: 0;
		}

.term {width: 10%;}

	dt {
		width: 40%;
		clear: left;
		text-align: left;
		}

	.vcenter {
		 line-height: 3;
		 }

	.menu-button {display: none;}

	.nav-system {
		position: absolute;
		background-color: transparent;
		}

	.nav-main {
		padding: .5em 0 .5em 25px;
		background-color: transparent;
		Xmax-width: 960px;
		Xmargin: 0 auto;
		float: none;
		overflow: hidden;
		position: absolute;
		bottom: 0;
		right: 35px;
		width: auto;
		}

		.nav-system li > span > a {
			float: none;
			padding: 0;
			border-radius: 0;
			border-bottom: 1px dashed rgba(255,255,255,.35);
			}
.nav-main span { color: #fff; }
		.nav-system li > span > a:hover,
		.nav-system li > span > a:focus {
			border-color: #fff;
			background-color: transparent;
			}

	.nav-main li > a {
		background-color: transparent;
		border-top: 0;
		padding: 0;
		white-space: nowrap;
		}

	.nav-main a:hover,
	.nav-main a:focus {
		 padding: 0;
		 border: 0;
		 background-color: transparent;
		 Xcolor: #000;
		}

	.nav-main a span {
		background-color: transparent;
		Xcolor: #999;
		font-family: Verdana, sans-serif;
		padding-top: 0;
		}

.nav-main a:hover span, .nav-main a:focus span, .nav-main a:hover, .nav-main a:focus { Xcolor: #000; }

	.nav-main a .icon {
		Xvisibility: hidden;
		display: inline-block;

		display: block;
		width: 16px;
		height: 16px;
		margin: 0 auto;
		}

	.nav-main a:hover .icon,
	.nav-main a:focus .icon {
		Xvisibility: visible;
		}

.intro > h3 {
	text-transform: none;
	}

.intro > h4,
.intro > p {
	padding: 0;
	}

.meta-info {
	Xborder-top: 1px dashed #ddd;
	Xborder-bottom: 1px solid #ddd;
	padding: 1em 2em;
	margin-bottom: 0;
	text-align: center;
	}

.panel {
	padding: 2em;
	margin-bottom: 3em;
	}

.tooltip {
	visibility: visible;
	}

	.h3 {
		margin: 0;
		padding: 0;
		}

	.panel--announcements {
		margin: 0 0 3em;
		padding: 2em;
		}

	.nav-main {margin-bottom: 0;}

/*
	.app-name { font-size: 0; }

	.nav-main { height: auto; }

	.nav-main > ul { position:static; }

	.nav-main > ul > li { display: block; }

	.nav-main a { float: none; display: block; margin: 0; border-top: 1px solid #d21034; padding: .5em 1em;}

	.content { margin: 0 1em; }

.welcome {visibility: visible; font-size: inherit; float: none;}
.welcome > a {font-size: inherit;}
.dd {display: block;}

	.panel {
		padding: 4em 4em 2em;
		border: 5px solid #eee;
		box-shadow: inset 0 0 1px 1px #fff;
	}


		.banner { margin-bottom: 2em; }*/

	.footer {
		text-align: center;
		padding: 3em .5em;
		margin-top: 3em;
		}

	.footer > p {
		display: block;
		margin: 0 0 .5em;
		}

	.back-top {
		position: fixed;
		right: 1.5em;
		bottom: 1.5em;
		}

	.back-top b:after {
		border: 3px solid;
		bottom: 14px;
		content: "";
		display: block;
		font-size: 0;
		height: 5px;
		left: 21px;
		position: absolute;
		width: 0;
		}

	.link-logo {
		position: static;
		}

}

/* 960+
	--------------------------------------------------- */
@media only screen and (min-width:960px)
{
	.content {max-width: 960px; margin:0 auto;}
}

/* HIGH RESOLUTION DISPLAYS
	--------------------------------------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {}

@media print {
  .conditions {overflow-y: auto; overflow: visible; height: auto;}
  .hide-print {display: none !important; visibility: hidden;}

}