/**
 * MHRD RecExcite public programs list
 */

/* master container */
main > .content#RecExcite-program-list {
	display: block;
	position: relative;

	font-size: 0px; /* collapse spacing */
}

	/* menus/controls */
	main > .content#RecExcite-program-list > nav {
		display: block;
		position: relative;
		clear: both;
		margin-top: 15px;

		font-size: 0px; /* collapse spacing */
	}

		/* nav sections */
		main > .content#RecExcite-program-list > nav > div {
			display: inline-block;
		}



		/* display mode */
		main > .content#RecExcite-program-list > nav > #display {
			float: right;
			text-align: right;
			margin-top: 10px;
		}
			/* icon link */
			main > .content#RecExcite-program-list > nav > #display > a {
				margin-left: 15px;

				font-size: 18px;
				color: rgba(70,10,90,.75);
			}
				main:not(.is-mobile) > .content#RecExcite-program-list > nav > #display > a:hover {
					color: #299926;
				}
				main > .content#RecExcite-program-list > nav > #display > a.selected {
					color: rgba(70,10,90,1);
				}

				/* icon text label */
				main > .content#RecExcite-program-list > nav > #display > a > label {
					display: inline-block;
					margin-left: 5px;

					font-family: Lato;
					font-size: 14px;
					text-transform: uppercase;

					cursor: pointer;
				}



		/* view mode */
		main > .content#RecExcite-program-list > nav > #view {

		}

			/* view mode label */
			main > .content#RecExcite-program-list > nav > #view > label {
				display: inline-block;
				margin-right: 10px;

				font-family: DINCond;
				font-size: 22px;
				color: rgba(0,0,0,.5);
			}

				/* view mode link */
				main > .content#RecExcite-program-list > nav > #view > a {
					display: inline-block;
					margin: 0px 5px 0px 5px;
					padding: 5px 5px 6px 5px;

					font-family: DINCond;
					font-size: 22px;
					font-weight: bold;
					color: rgba(70,10,90,.75);

					cursor: pointer;
				}

					/* hover view mode link */
					main:not(.is-mobile) > .content#RecExcite-program-list > nav > #view > a:hover {
						border-bottom: 2px solid #299926;
					}
					/* selected view mode link */
					main > .content#RecExcite-program-list > nav > #view > a.selected {
						color: rgba(70,10,90,1);
						border-bottom: 2px solid #470A59;
					}

					main > .content#RecExcite-program-list > nav > #view > a > label {
						cursor: pointer;
					}




		/* search */
		main > .content#RecExcite-program-list > nav > #search {
			margin: 6px 0px 0px 75px;
		}

			/* search input */
			main > .content#RecExcite-program-list > nav > #search > input {
				width: 450px;
				padding: 5px 65px 5px 5px;

				white-space: nowrap;
				text-overflow: ellipsis;
			}

				/* disable native styling */
				main > .content#RecExcite-program-list > nav > #search > input:focus {
					outline: none;
					-webkit-outline: none;
					border-bottom: 3px solid #470A59;
				}

				/* hide native mobile "x" icons for clearing field */
				main > .content#RecExcite-program-list > nav > #search > input::-webkit-search-cancel-button {
					-webkit-appearance: none;
					display: none;
					visibility: hidden;
					opacity: 0;
				}

				main > .content#RecExcite-program-list > nav > #search > input::-ms-clear {
					display: none;
					visibility: hidden;
					opacity: 0;
				}

				/* search icons */
				main > .content#RecExcite-program-list > nav > #search > nav {
					display: block;
					position: absolute;
					width: 50px;
					margin: 4px 0px 0px 402px;
				}

					/* cancel */
					main > .content#RecExcite-program-list > nav > #search > nav >.fa.icon-cancel {
						font-size: 21px;
						visibility: hidden;
					}
						/* when shown */
						main > .content#RecExcite-program-list > nav > #search > nav >.fa.icon-cancel.show {
							visibility: visible;
						}

					/* exec */
					main > .content#RecExcite-program-list > nav > #search > nav > .fa.icon-exec {
						margin-left: 7px;
						font-size: 20px;
						transform: scaleX(-1);
					}


/* session section */
main > .content#RecExcite-program-list > section {
	display: block;
	margin-top: 10px;

	text-align: left;
}

	/* main program list header */
	main > .content#RecExcite-program-list > section > h3 {
		display: block;
		margin-top: 0px;
		padding: 10px;
		text-align: left;

		font-family: Lato;
		font-size: 25px;
		color: #299926;

		background-color: #D9F0D9;
		box-shadow: 1px 1px 3px rgba(0,0,0,.25);

		cursor: pointer;
	}

		/* always expanded for persistent section */
		main > .content#RecExcite-program-list > section.persist > h3 {
			cursor: initial;
		}

		/* hover on main program list header */
		main:not(.is-mobile) > .content#RecExcite-program-list > section > h3:hover {
			background-color: #c7e9c7;
		}

		/* expand/collapse icon for section header */
		main > .content#RecExcite-program-list > section:not(.persist) > h3:before {
			margin-right: 10px;

			font-family: 'FontAwesome';
			font-size: 25px;
			color: rgba(41, 153, 38,.5);
			text-shadow: 1px 1px 0px rgba(255,255,255,1);
		}

			/* expand/collapse icon when section collapsed */
			main > .content#RecExcite-program-list > section:not(.show):not(.persist) > h3:before {
				/* .fa-chevron-circle-right */
				content: "\f138";
			}

			/* expand/collapse icon when section expanded */
			main > .content#RecExcite-program-list > section.show:not(.persist) > h3:before {
				/* fa-chevron-circle-down */
				content: "\f13a";
			}

		/* summary data in main program list header */
		main > .content#RecExcite-program-list > section > h3 > data {
			float: right;
			display: block;
			margin-top: 4px;

			font-family: Lato;
			font-size: 18px;

			opacity: .75;
		}

			/* summary data for categories view (icon image) */
			main > .content#RecExcite-program-list > section.view-mode-category > h3 > data {
				margin-top: -2px;
				width: 50px;
				text-align: center;
			}

				/* icon image */
				main > .content#RecExcite-program-list > section.view-mode-category > h3 > data > img {
					height: 30px;
					width: auto;
				}

		/* program list container */
		main > .content#RecExcite-program-list > section:not(.show):not(.persist) > div.Programs {
			display: none;
		}

		/* program list container */
		main > .content#RecExcite-program-list > section.show > div.Program,
		main > .content#RecExcite-program-list > section.persist > div.Programs {
			display: block;
			margin-bottom: 75px;
		}

			/* program box */
			main > .content#RecExcite-program-list > section > div.Programs > .program-box {
				background-color: white;
				box-shadow: 1px 1px 3px rgba(0,0,0,.25);
				border: 1px solid #c8dac9;

				overflow: hidden;
				opacity: .8;

				transition: width 0.25s ease 0s, height 0.25s ease 0s, margin 0.25s ease 0s !important;

				cursor: pointer;
			}

				/* hover program box */
				main:not(.is-mobile) > .content#RecExcite-program-list > section > div.Programs > .program-box:not(.no-register):hover {
					opacity: 1;
				}

				/* click program box */
				main > .content#RecExcite-program-list > section > div.Programs > .program-box:not(.no-register):active {
					box-shadow: 1px 1px 3px rgba(0,0,0,.35);
				}

				/* program box when cancelled */
				main > .content#RecExcite-program-list > section > div.Programs > .program-box.no-register {
					background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAFUlEQVQImWNgQAP/GRjSqC7AwMAAAHMEBvrTLK3dAAAAAElFTkSuQmCC);
				}

					/* force lighter text for cancelled program elements */
					main > .content#RecExcite-program-list > section > div.Programs > .program-box.no-register * {
						color: rgba(0,0,0,.35) !important;
					}

					/* text element for "no registration" */
					main > .content#RecExcite-program-list > section > div.Programs > .program-box > div.no-register-msg {
						display: block;
						position: relative;
						margin: 0px;

						font-family: 'DINCond';
						font-size: 40px;
						color: rgba(0,0,0,.5) !important;
						text-shadow: 2px 2px 0px white;
						text-align: center;
					}

				/* background container */
				main > .content#RecExcite-program-list > section > div.Programs > .program-box > .background {
					position: absolute;
					height: 250px;

					background-repeat: no-repeat;
					background-size: cover;
					overflow: hidden;

					/* opacity: .15; */
					/* z-index: -1; */
				}
					/* background container when clicking program box */
					main > .content#RecExcite-program-list > section > div.Programs > .program-box:active > .background {
						opacity: .15;
						filter: contrast(1.35);
					}

					/* background image */
					main > .content#RecExcite-program-list > section > div.Programs > .program-box > .background > img {
						width: auto;
						height: 300%;
					}

					/* no background for cancelled programs */
					main > .content#RecExcite-program-list > section > div.Programs > .program-box.no-register > .background {
						display: none;
					}


				/* details container */
				main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details {
					display: block;
					padding: 10px;

					font-family: Lato;
					text-align: left;
					color: rgba(0,0,0,.85);
					text-shadow: none;
				}

					/* program name */
					main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > h5 {
						display: block;
						margin: 0px;

						font-size: 18px;
						font-weight: bold;

						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 1.25;
					}

					/* program class */
					main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > h6 {
						display: block;
						margin: 3px 0px 0px 0px;
						height: 18px;

						font-size: 16px;
						font-weight: bold;

						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					/* description */
					main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > article {
						display: block;
						width: auto;

						font-size: 14px;
						line-height: 1.25;
					}
						/* article elements */
						main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > article * {
							font-size: 14px;
							line-height: 1.25;
						}

						/* article paragraphs */
						main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > article > p {
							margin-bottom: 15px;
						}

						/* truncated description (grid mode) */
						main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > article.truncated {
							display: block;
							margin-top: 10px;
							height: 85px;
						}

						/* full description (list mode) */
						main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > article.full {
							display: none;
						}

					/* facility/location */
					main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > .Facilities {
						display: block;
						margin-top: 3px;
						margin-bottom: 10px;

						font-size: 13px;
						font-weight: bold;
					}

						/* icon for location */
						main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > .Facilities:before {

							/* fa-map-marker */
							font-family: 'FontAwesome';
							content: "\f041";

							float: left;
							width: 18px;
							text-align: center;
							margin: -2px 8px 0px 0px;

							color: rgba(0,0,0,.35);
							font-size: 20px;
						}

					/* schedule summary & details */
					main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > .ScheduleSummary,
					main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > .ProgramBookings {
						display: block;
						margin-top: 3px;

						font-size: 13px;
						font-weight: bold;
					}

						/* calendar icon for schedule */
						main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > .ScheduleSummary:before {

							/* fa-calendar-check-o */
							font-family: 'FontAwesome';
							content: "\f274";

							float: left;
							width: 18px;
							text-align: center;
							margin: 5px 8px 0px 0px;

							color: rgba(0,0,0,.35);
							font-size: 18px;
						}

					/* category icons list container */
					main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > ul.ProgramDisplayCategories {
						display: block;
						margin-top: 20px;
						height: 25px;
					}
						/* category icon list item */
						main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > ul.ProgramDisplayCategories > li {
							display: inline-block;
						}
							/* category icon image container */
							main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > ul.ProgramDisplayCategories > li > div {
								display: inline-block;
								height: 25px;
								width: auto;

								margin-right: 10px;
							}
								/* category icon image */
								main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > ul.ProgramDisplayCategories > li > div > img {
									height: 25px;
								}

					/* Session Name */
					main > .content#RecExcite-program-list > section > div.Programs > .program-box > .details > data.SessionName {
						float: right;
						display: block;
						margin: 24px -11px 0px 0px;
						padding: 6px;

						font-family: DINCond;
						font-size: 15px;
						font-weight: normal;
						color: #704580;
						background-color: rgb(217,240,217);
						white-space: nowrap;

						opacity: .85;
					}



	/* VIEW MODES */





	/* LIST VIEW */

	/* program box */
	main > .content#RecExcite-program-list[display-mode="list"] > section > div.Programs > .program-box {
		display: block;
		width: auto;
		min-width: auto;
		height: auto;
		overflow: visible;
		margin: 10px 0px 0px 0px;
	}

		/* program box background */
		main > .content#RecExcite-program-list[display-mode="list"] > section > div.Programs > .program-box > .background {
			position: absolute;
			width: 100%;
			height: auto;

			opacity: .065;
		}

		/* remove heights, set margins instead */
		main > .content#RecExcite-program-list[display-mode="list"] > section > div.Programs > .program-box > .details > *:not(.Facilities) {
			height: auto;
			margin-bottom: 5px;
		}

		/* hide truncated description */
		main > .content#RecExcite-program-list[display-mode="list"] > section > div.Programs > .program-box > .details > article.truncated {
			display: none;
		}

		/* show full description */
		main > .content#RecExcite-program-list[display-mode="list"] > section > div.Programs > .program-box > .details > article.full {
			display: block;
			margin-bottom: 15px;
		}

		/* reset margin on categories */
		main > .content#RecExcite-program-list[display-mode="list"] > section > div.Programs > .program-box > .details > .ProgramDisplayCategories {
			margin-bottom: 0px;
		}

			/* change display of categories */
			main > .content#RecExcite-program-list[display-mode="list"] > section > div.Programs > .program-box > .details > .ProgramDisplayCategories > ul > li {
				display: inline-block;
				margin-top: 20px;
			}

				/* display category names */
				main > .content#RecExcite-program-list[display-mode="list"] > section > div.Programs > .program-box > .details > .ProgramDisplayCategories name {
					display: inline-block;
					margin: 5px 35px 0px -1px;

					vertical-align: top;
					text-align: left;
					font-family: Lato;
					font-size: 14px;
					color: #2A6629;
				}





	/* GRID VIEW */

	main > .content#RecExcite-program-list[display-mode="grid"] > section > div.Programs > .program-box {
		display: inline-block;
		margin: 10px 1% 0px 0px;

		width: calc( 32% - 2px ); /* subtract border */
		height: 254px;

	}

	/* every 3rd program box is slightly wider (3 per row) */
	main > .content#RecExcite-program-list[display-mode="grid"] > section > div.Programs > .program-box:nth-of-type(3n) {
		width: calc( 34% - 2px ); /* subtract border */
		margin-right: 0px;
	}

		/* background on program box */
		main > .content#RecExcite-program-list[display-mode="grid"] > section > div.Programs > .program-box > .background {
			width: calc( 32% - 2px ); /* subtract border */
		}

		/* every 3rd program box is slightly wider (3 per row) */
		main > .content#RecExcite-program-list[display-mode="grid"] > section > div.Programs > .program-box:nth-of-type(3n) > .background {
			width: calc( 34% - 2px ); /* subtract border */
		}

		/* hide truncated description */
		main > .content#RecExcite-program-list[display-mode="grid"] > section > div.Programs > .program-box > .details > article.truncated {
			display: block;
			height: 76px;
		}

		/* show full description */
		main > .content#RecExcite-program-list[display-mode="grid"] > section > div.Programs > .program-box > .details > article.full {
			display: none;
		}

		/* categories list container */
		main > .content#RecExcite-program-list[display-mode="grid"] > section > div.Programs > .program-box > .details > .ProgramDisplayCategories {
			margin-bottom: 5px;
		}

			/* categories */
			main > .content#RecExcite-program-list[display-mode="grid"] > section > div.Programs > .program-box > .details > .ProgramDisplayCategories > ul > li {
				display: inline-block;
			}

				/* category names */
				main > .content#RecExcite-program-list[display-mode="grid"] > section > div.Programs > .program-box > .details > .ProgramDisplayCategories name {
					display: none;
				}