/** List in schedule header **/

.two-col {
	width: 47%;
	display: inline-block;
	vertical-align: top;
}

.space {
	padding-right: 4%;	
}

/** sticky Monday and Wednesday **/

.identifier {
	height: 230px;
	width: 100%;
	position: absolute;
	z-index: -10;
}

#days {
	width: 100%;
	height: 30px;

	span {
		width: 49%;
		text-align: center;
		display: inline-block;
		padding-top: 7px;
		padding-bottom: 5px;
		font-family: @body-font;
	}

	&.days-moving {
		max-width: 932px !important;
		background: #fff;
		opacity: 0.8;
	}

	&.stick-days {
		position: fixed;
		top: 53px;
	}
}

#days-placeholder {
	height: 30px;
	display: none;
}

/** Main schedule css **/

#sticky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
}

#schedule {
	padding: 15px 0 30px 0;

	.week {
		padding-bottom: 70px;
		border-top: 1px solid #cccccc;

		.day {
			height: auto;
			width: 50%;
			display: inline-block;
			vertical-align: top;

			&.full {
				width: 100%;
			}

			.date  {
				padding-top: 18px;
				padding-bottom: 15px;
				text-align: center;
				border-bottom: 1px solid #ccc;

				h2 {
					text-transform: uppercase;
					font-family: @body-font;
					font-size: 16px;
					letter-spacing: 1.5px;
					font-weight: bold;	
				}

				&.right-border {
					border-right: 1px solid #ccc;
				}
			}

			.day-info {
				padding: 0 30px;

				ul {
					font-family: @body-font;
					font-size: 10pt;
					line-height: 17pt;
					letter-spacing: .3px;
					color: #282828;
					list-style-type: disc;
					padding-left: 15px;
				}

				h4 {
					margin: 15px 0 5px 0;
					text-transform: uppercase;
					font-family: @body-font;
					font-size: 11px;
					letter-spacing: 1.5px;
					font-weight: bold;
				}

				p {
					margin: 25px 0 25px 0;
					font-family: @body-font;
					font-size: 16px;
					line-height: 26px;
					letter-spacing: 0.5px;

					&.annotation {
						text-align: center;
						font-weight: 600;
						margin-bottom: -10px;
					}
				}

				a {
					text-decoration: none;
					border-bottom: dotted 1px;
					color: @accent-color;	
				}

				.recommended {
					opacity: .4;
					transition: .7s all;

					&:hover {
						opacity: 1;	
						transition: .7s all;
					}
				}
			}
		}
	}
}

/** This week button **/

#today{
	visibility: hidden;
	position: fixed;
	top: 12px;
	z-index: 10000;
	right: 4em;

	#today-button {
		cursor: pointer;
		height: 34px;
		text-align: center;
		margin-bottom: 10px;
		width: auto;
		border-radius: 3px;

		&.onWeek {
			background-color: #f0f0f0;

			a {
				color: #888;
			}
		}

		&.offWeek {
			background-color: @accent-color;

			&:hover {
				background-color: @darker-accent-color;
			}

			a {
				color: #fff;
			}
		}

		a {
			color: #888;
			padding: 10px 15px 0px 15px;
			font-size: 13px;
			display: block;
			letter-spacing: .75px;
			line-height: 15px;
			text-decoration: none;
			font-family: @body-font;
			border-bottom: 0px;
		}

		&:hover {
			background-color: @accent-color;

			a {
				color: #fff;
			}
		}
	}
}

@media screen and (max-width: 1250px) {
	#today {
		top: 100px;
		background-color: #fbfbfb !important;
		border-radius: 50%;
		box-shadow: 0px 2px 0px #cecece;
		height: 40px;
		width: 40px;

		&:active {
			background-color: @accent-color !important;
		}

		#today-button {
			border-radius: 0;
			background-repeat: no-repeat;
			background-color: transparent;
			background-image: url('../images/arrow.png');
			background-size: 20px 20px;
			background-position: 50% 50%;
			height: 100%;
			width: 100%;

			a {
				height: 100%;
			}

			&.onWeek, &.offWeek {
				background-color: transparent;
				&:hover {background-color: transparent;}
			}

			&.left {
				transition: all 0.3s ease-out;
				-webkit-transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				-ms-transform: rotate(90deg);
				-o-transform: rotate(90deg);
				transform: rotate(90deg);
			}

			&.up {
				transition: all 0.3s ease-out;
				-webkit-transform: rotate(180deg);
				-moz-transform: rotate(180deg);
				-ms-transform: rotate(180deg);
				-o-transform: rotate(180deg);
				transform: rotate(180deg);
			}

			&.down {
				transition: all 0.3s ease-out;
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);	
			}

		}

		span.button-text {
			display: none;
		}
	}
}

@media screen and (max-width: 868px) {
	#today {
		right: 2em;
		left: auto;
		top: 12px;
		width: auto;
		background-color: transparent;
		border-radius: 0;
		box-shadow: none;

		#today-button {
			.body-border;
			background-image: none;
			background-color: inherit;
			height: 34px;
			margin-bottom: 10px;
			width: 157px;
			border-radius: 3px;

			&.down, &.left, &.up {
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);	
			}

			&.onWeek {
				background-color: #f0f0f0;

				a {
					color: #888;
				}
			}

			&.offWeek {
				background-color: @accent-color;

				a {
					color: #fff;
				}
			}
		}

		span.button-text {
			display: inline;
		}
	}
}

@media screen and (max-width: 600px) {

	.two-col {
		width: 100%;
		display: block;
	}

	#schedule .week {
		padding-bottom: 0px;
		border-top: 0;

		.day {
			width: 100%;
			padding-bottom: 70px;
			
			.date {
				border-top: 1px solid #ccc;

				.right-border {
					border-right: 0;
				}
			}
		}
	}

	#today {
		top: 100px;
		background-color: #fbfbfb !important;
		border-radius: 50%;
		box-shadow: 0px 2px 0px #cecece;
		height: 40px;
		width: 40px;

		&:active {
			background-color: @accent-color !important;
		}

		#today-button {
			border-radius: 0;
			background-color: transparent;
			background-repeat: no-repeat;
			background-image: url('../images/arrow@2x.png');
			background-size: 20px 20px;
			height: 40px;
			width: 40px;

			a {
				height: 100%;
			}

			&.onWeek, &.offWeek {
				background-color: transparent;
				&:hover {background-color: transparent;}
			}

			&.left {
				transition: all 0.3s ease-out;
				-webkit-transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				-ms-transform: rotate(90deg);
				-o-transform: rotate(90deg);
				transform: rotate(90deg);
			}

			&.up {
				transition: all 0.3s ease-out;
				-webkit-transform: rotate(180deg);
				-moz-transform: rotate(180deg);
				-ms-transform: rotate(180deg);
				-o-transform: rotate(180deg);
				transform: rotate(180deg);
			}

			&.down {
				transition: all 0.3s ease-out;
				-webkit-transform: rotate(0deg);
				-moz-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				-o-transform: rotate(0deg);
				transform: rotate(0deg);	
			}
		}

		span.button-text {
			display: none;
		}
	}
}