/*******
   This file should ONLY be linked from pages that use the new tabbed course layout.
*******/

/*** make this page content wider than usual for this site ***/
	.pwidth { 
		width: 90%;
		min-width: 700px;
		max-width: 1000px;
		margin: 0px auto;
	}

	/*** main content styles ***/
	div#main_content p {
		text-align: left;
		margin-bottom: 0.7em;
	}

/*** styles for the control buttons ***/
	.control {
		background: linear-gradient(#6C7A0E, #363D07);
		border-radius: 4px;
		border: solid 1px #363D07;
		color: #FFF;
		text-align: center;
		padding: 2px 2px 4px 2px;
		min-width: 4em;
		margin-left: 0.5em;
		box-shadow: 0 1px 2px rgba(0,0,0,.2);
	}

	.control:hover {
		text-shadow: 0px 0px .5em #FFF;
		cursor: pointer;
		background: #6C7A0E;
	}

/*** styles for the tab elements ***/
	#tabs {
	    list-style-type: none;
	    margin: 0;
	    padding: 0;
	    overflow: hidden;
	    position: relative;
	}

	#tabs:after {
		position: absolute;
		content: " ";
		width: 100%;
		bottom: 0;
		left: 0;
		border-bottom: 1px solid #AF8E58;
	 	z-index: 1;
	}

	#tabs li {
		position: relative;
		z-index: 0;
		display: inline-block;
		border: 1px solid #AF8E58;
	    background-color: #C2A26D;
	    border-bottom: none;
	    border-top-left-radius: 5px;
			border-top-right-radius: 5px;
	}

	#tabs li a {
	    display: inline-block;
	    padding: 0.2em 2em;
	    text-align: center;
	    color: #222;
	    font-family: 'Oswald', Geneva, sans-serif;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		font-weight: 400;
	    text-decoration: none;
	    transition: 0.3s;
	    font-size: 17px;
	}

	#tabs li:not(.active) a:hover {
		background-color: #70839C;
	}

	#tabs li.active {
		z-index: 2;
		background-color: #FFF3E1;
		border-bottom-color: #FFF3E1;
	}

	#tabs li.active a {
		cursor: default; 
	}

	#tab_content {
	    padding: 0.5em;
	    border: 1px solid #AF8E58;
	    border-top: none;
	    background-color: #FFF3E1;
	}

/*** styles for the SCHEDULE tab ***/
	/* styles for seminar boxes */
	.seminar_box {
		order: 0;
		margin-right: .5em;
	}

	.seminar_box img{
		height: 20px;
		width: 20px;
	}

	.seminar_box .caption {
		background-color: rgba(0,0,0,0.85);
		position: absolute;
		left: -308px;
		color: #fff;
		z-index: 100;
		transition: all 500ms ease-out;
		height: auto;
		width: 300px;
		display: block;
		text-align: left;
		padding: 2px;
		border-radius: 2px;
	}

	.seminar_box:hover .caption {
		left: 10px;
	}

	/* styles for the schedule itself */
	#schedule_container {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	#control_container {
		order: 2;
		flex-grow: 0;
	}

	#schedule_content {
		order: 1;
		flex-grow: 1;
	}

	.class_day {
		background-color: #EED2A5;
		padding: 0.3em;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
	}

	.end_week {
		border-bottom: solid 2px #AF8E58;
	}

	.date {
		order: 1;
		width: 120px;
		flex-grow: 0;
		font-weight: bold;
		color: #3E321F;
	}

	.topics {
		order: 2;
		flex-grow: 5;
		margin-left: 0.5em;
		margin-right: 0.5em;
	}

	.hw_due {
		order: 4;
		flex-grow: 1;
		margin-left: 0.5em;
		margin-right: 0.5em;
		text-align: center;
	}

	.quiz {
		order: 5;
		max-width: 35%;
		flex-grow: 1;
		margin-left: 0.5em;
		margin-right: 0.5em;
		text-align: right;
	}

	.notes_link {
		order: 6;
		flex-grow: 0;
	}

	.icon {
		order: 8;
		flex-grow: 0;
		height: 32px;
		width: 32px;
		border: none;
	}

	.hw {
		padding: 0.3em;
		margin: 0 0.5em;
		font-size: 90%;
	}

	.hw_header {
		font-style: italic;
	}

	.hw ul {
		padding-left: 2em;
	}

	.next_class {
		border: solid 2px #3586CC;
		background-color: #A0C1E5;
	}

	.next_class .date {
		color: #000;
	}

	.current_hw {
		background-color: yellow;
		box-shadow: 0 0 1em yellow;
		margin: 0.2em 0.5em;
	}

	.current_hw .hw_header {
		font-weight: bold;
	}

	.holiday {
		padding: 0.3em;
		font-style: italic;
		text-align: center;
		background: linear-gradient(to right, #FFF3E1, #DAEB65, #DAEB65, #DAEB65, #DAEB65, #FFF3E1);
		border-top: solid 2px #6C7A0E;
		border-bottom: solid 2px #6C7A0E;
	}

/*** styles for the FILES tab ***/
	h4.file_category {
		margin: 1.2em 0px 0.5em;
		padding-top: 0.8em;
		border-top: solid 2px #153450;
	}

	h4.file_category:first-of-type {
		margin-top: 0px;
		padding-top: 0px;
		border-top: none;
	}
	
	ul.file_list {
		margin-left: 1.5em;
	}
	
	.twocol {
		column-count: 2;
	}



/*** special styles for small screens ***/
@media screen and (max-device-width: 640px){

	.pwidth {
		min-width: 0;
		max-width: none;
		width: auto;
	}
		
	#mlw_title {
		display: none;
	}

	nav ul {
		padding: 0; 
		margin: 0;

	}

	nav ul li {
		float: none; 
		width: auto;
	}
	
	div#main_content {
		padding: 0.5em;
	}
	
	.chamber {
		float: none;
		width: auto;
		padding: 0.5em;
	}

	#tabs li a {
		padding: 0.2em;
	}
	
	#schedule_container {
		flex-direction: column;
	}

	#control_container {
		order: 0;
		flex-grow: 0;
	}

	.control {
		margin: 0 1em 0.5em 1em;
	}
	
	#footer {
		display: none;
	}
}

@media screen and (max-device-width: 400px){
	
	nav ul li:nth-child(2), nav ul li:nth-child(n+4) {
		display: none;		
	}
}