/*
	Author: Jonathan Lum
	Date Modified: 6/4/2017
	File Name: schedule.css
	
	Brief Description:  This is the stylesheet for the Schedule page on JonEl Media
*/

    body, html {
        height: 100%;
        background-color: #3b3b3b;
    }

/* temporary fix for page-content */
#page-content { width: auto; height: 100%; }

/* CSS for Desktop 451px > width */
@media all and (min-width: 451px) {
	
	#schedule-content {
		margin: 0 auto;
		border: none;
//border: 1px solid green;
		padding: 0;
	}
	#schedule-content .header {
		margin: 0;
		border: none;
//border: 1px solid green;
		padding: 0;
		background-image: url( "../images/Schedule-Header.jpg" );
		background-position: 0 -30px;
		height: 90px;
	}
	#schedule-years-nav {
		margin: 0;
		border: none;
//border: 1px solid blue;
		padding: 0;
		color: #FFFFFF;
		overflow: hidden;
	}
	#schedule-years-nav h3 {
		margin: 0;
		border: none;
//border: 1px solid red;
		padding: 5px 20px 5px 20px;
		text-align: right;
		width: 100px;
		float: left;
	}
	#schedule-years-nav ul {
		margin: 0;
		border: none;
//border: 1px solid green;
		padding: 5px 0 5px 30px;
		float: left;
		width: 1100px;
	}
	#schedule-years-nav li {
		margin: 0;
		border: none;
		border-right: 2px solid blue;
//border: 1px solid #FFF;
		padding: 2px 5px 2px 5px;
		list-style-type: none;
		color: orange;
		font-size: 1.2em;
		float: left;
	}
	#schedule-years-nav li:hover {
		color: #00ceff;
		cursor: pointer;
	}
	#schedule-years-nav li.selected {
		color: #00ceff;
	}
	#schedule-years-select {
		display: none;
	}
	#schedule-months-nav {
		margin: 0;
		border: none;
//border: 1px solid green;
		border-bottom: 2px solid #FFF;
		padding: 0 0 10px 0;
		color: #FFFFFF;
		overflow: hidden;
	}
	#schedule-months-nav h3 {
		margin: 0;
		border: none;
//border: 1px solid red;
		padding: 5px 20px 5px 20px;
		text-align: right;
		width: 100px;
		float: left;
	}
	#schedule-months-nav ul {
		margin: 0;
		border: none;
//border: 1px solid yellow;
		padding: 5px 0 5px 30px;
		width: 1100px;
		float: left;
	}
	#schedule-months-nav li {
		margin: 0;
		border: none;
		border-right: 2px solid blue;
		padding: 2px 5px 2px 5px;
		list-style-type: none;
		color: orange;
		font-size: 1.2em;
		float: left;
	}
	#schedule-months-nav li a.month_selection {
		text-decoration: none;
		color: orange;
	}
	#schedule-months-nav li a:hover {
		color: #00ceff;
	}
	#schedule-months-nav li.selected {}
	#schedule-months-select {
		display: none;
	}	
	#schedule-calendar {
		margin: 0;
		border: none;
//border: 1px solid red;
		padding: 0;
	}
	#schedule-calendar .year {
		margin: 0;
		border: none;
		padding: 0;
	}
	.year-header {
		margin: 0;
		border: none;
//border: 1px solid blue;
		padding: 20px 0 0 0;
		color: #FFF;
		font-size: 2.2em;
		text-align: center;
	}
	
	
	#schedule-calendar .month {
		margin: 0;
		border: none;
		//border: 1px solid blue;
		padding: 0;
	}
	#schedule-calendar table {
		margin: 20px auto;
		border: none;
		padding: 0;
		background-color: #FFFFFF;
		border-collapse: collapse;
		width: 90%;
	}
	#schedule-calendar table th {
		margin: 0;
		border: 1px solid #000;
		padding: 0;
	}
	.month-header {
		margin: 0;
//border: 1px solid green;
		border-top: 2px solid orange;
		padding: 5px 0 5px 0;
		font-size: 1.6em;
		background-color: #000;
		color: #FFF;
	}
	#schedule-calendar table td {
		margin: 0;
		border: 1px solid #000;
		padding: 3px 10px 3px 10px;
		width: 14.28%;
		vertical-align: top;
	}
	#schedule-calendar table td.day {
		height: 100px;
	}
	#schedule-calendar table td.empty-day {
		background-color: #d8d8d8;
	}
	.day-name {
		margin: 0;
		padding: 2px 0 2px 0;
		background-color: #ababab;
	}
	.day-of-month {
		font-size: 1.2em;
		font-weight: bold;
	}
	.other-month-info {
		font-size: .9em;
		color: #858585;
		vertical-align: top;
		float: right;
	}
	#schedule-calendar .calendar-info {
		margin: 0;
		border: none;
//border: 1px solid blue;
		padding: 5px 0 5px 0;
		text-align: center;
	}
	.show-name {
		font-weight: bold;
	}
	.top-link {
		margin: 0;
		border: none;
//border: 1px solid red;
		padding: 0;
		text-decoration: none;
		font-size: 1.3em;
		color: orange;
		display: block;
		text-align: center;
	}
	.top-link:hover {
		color: #00ceff;
	}
	
}
/* End CSS for Desktop */

/* CSS for Mobile 450px < width */
@media all and (max-width: 450px ) {
	
	#schedule-content {
		margin: 0;
		border: none;
//border: 1px solid green;
		padding: 0;
	}
	#schedule-content .header {
		margin: 0;
		border: none;
//border: 1px solid green;
		padding: 0;
		background-image: url( "../images/Schedule-Header_mobile.jpg" );
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: 0 -10px;
		height: 70px;
	}
	#schedule-years-nav {
		display: none;
	}
	#schedule-years-select {
		margin: 0;
		border: none;
//border: 1px solid red;
		padding: 0;
	}
	#schedule-years-select h3 {
		margin: 0;
		border: none;
//border: 1px solid yellow;
		padding: 0;
		color: #FFF;
		text-align: center;
	}
	#schedule-years-select select {
		margin: 0 auto;
		margin-bottom: 5px;
//border: 1px solid blue;
		padding: 0;
		width: 95%;
		font-size: 1.1em;
		display: block;
	}
	#schedule-months-nav {
		display: none;
	}
	#schedule-months-select {
		margin: 0;
		border: none;
//border: 1px solid red;
		padding: 0;
	}
	#schedule-months-select h3 {
		margin: 0;
		border: none;
//border: 1px solid yellow;
		padding: 0;
		color: #FFF;
		text-align: center;
	}
	#schedule-months-select select {
		margin: 0 auto;
		margin-bottom: 5px;
//border: 1px solid blue;
		padding: 0;
		width: 95%;
		font-size: 1.1em;
		display: block;
	}
	#schedule-calendar {
		margin: 0;
		border: none;
//border: 1px solid red;
		padding: 0;
	}
	#schedule-calendar .year {
		margin: 0;
		border: none;
		padding: 0;
	}
	.year-header {
		margin: 0;
		border: none;
//border: 1px solid blue;
		padding: 0;
		color: #FFF;
		font-size: 1.2em;
		text-align: center;
	}
	
	
	#schedule-calendar .month {
		margin: 0;
		border: none;
//border: 1px solid blue;
		padding: 0;
	}
	#schedule-calendar table {
		margin: 10px auto;
		border: none;
		padding: 0;
		background-color: #FFFFFF;
		border-collapse: collapse;
		width: 100%;
	}
	.month-header {
		margin: 0;
//border: 1px solid green;
		border-top: 2px solid orange;
		padding: 5px 0 5px 0;
		font-size: 1.2em;
		background-color: #000;
		color: #FFF;
	}
	table th {
		margin: 0;
		border: 1px solid #000;
		padding: 0;
		font-size: .6em;
	}
	table td {
		margin: 0;
		border: 1px solid #000;
		padding: 3px 1% 3px 1%;
		width: 14.28%;
		vertical-align: top;
		font-size: .8em;
	}
	table td.day {
		height: 100px;
	}
	table td.empty-day {
		background-color: #d8d8d8;
	}
	.day-name {
		margin: 0;
		padding: 2px 0 2px 0;
		background-color: #ababab;
	}
	.day-of-month {
		font-size: .8em;
		font-weight: bold;
	}
	.other-month-info {
		font-size: .8em;
		color: #858585;
		vertical-align: top;
		float: right;
	}
	#schedule-calendar .calendar-info {
		margin: 0;
		border: none;
//border: 1px solid blue;
		padding: 5px 0 5px 0;
		text-align: center;
	}
	.show-name {
		font-weight: bold;
	}
	.top-link {
		margin: 0;
		border: none;
//border: 1px solid red;
		padding: 0;
		text-decoration: none;
		font-size: .9em;
		color: orange;
		display: block;
		text-align: center;
	}
	.top-link:hover {
		color: #00ceff;
	}
	
}
/* End CSS for Mobile */