/*******
   Created in Feb. 2020 for the tabbed course layout with file display.
*******/


/*** styles for small (and maybe big) screens ***/

	a[target="_blank"]::after {
		display: inline-block;
	 	font-style: normal;
	 	font-variant: normal;
	 	text-rendering: auto;
	 	-webkit-font-smoothing: antialiased;
		font-family: "Font Awesome 5 Pro";
	    font-weight: 900;
	    content: "\a0\f35d";
	    font-size: 70%;
	    vertical-align: top;
	    color: #3586CC;
	}

	div#main_content p {
		text-align: left;
		margin-bottom: 0.7em;
	}

	div#main_content p.oldcourse {
		text-align: center;
		border: solid 1px #FF830E;
		background-color: #FFB00E;
		font-size: 110%; 
		padding: 0.5em; 
		font-family: Lato, Arial, sans-serif; 
		font-weight: bold;
	}

	/* styles for the tab elements ***/
	#tab_container {
		width: 100%;
		background-color: #FFF;
	}

	.tabs_fixed {
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		z-index: 10;
	}

	#tabs {
	    list-style-type: none;
	    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 0.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: #FFFDED;
		border-bottom-color: #FFFDED;
	}

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

	#tab_content {
	    padding: 0.5em;
	    border: 1px solid #AF8E58;
	    border-top: none;
	    background-color: #FFFDED;
	    font-family: Lato, Arial, sans-serif;
	}

	/* control buttons */
	.control {
		display: inline-block;
		background: linear-gradient(#6C7A0E, #363D07);
		border-radius: 4px;
		border: solid 1px #363D07;
		color: #FFF;
		text-align: left;
		padding: 4px 2px 4px 6px;
		min-width: 80px;
		margin-bottom: 8px;
		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 SCHEDULE tab */
	#schedule_container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}

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

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

	.class_day {
		background-color: #FFE9AD;
		padding: 0.3em;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		border-radius: 3px;
	}

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

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

	.daily_content {
		order: 2;
		flex-grow: 5;
		margin-left: 0.5em;
		margin-right: 0.5em;
		display: flex;
		flex-direction: column;
	}

	.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 {
		display: block;
		order: 8;
		flex-grow: 0;
		font-size: 24px;
		border: none;
	}

	a.videolink {  /* REMOVE THIS LATER */
		border: solid 1px #30733F;
		border-radius: 6px;
		padding: 4px 6px 4px 6px;
		margin-top: 2px;
		margin-bottom: 2px;
		color: #333;
		background-color: #C9FFD5;
	}

	a.videolink i { /* REMOVE THIS LATER */
		color: #30733F;
	}

	a.videolink:hover { /* REMOVE THIS LATER */
		text-decoration: none;
		background-color: #6BFF8B;
	}

	.filelink {
		display: inline-block;
		border: solid 1px #444;
		border-radius: 6px;
		padding: 2px 6px 2px 22px;
		margin-top: 2px;
		color: #333;
		background-color: #EEE;
		background-image: url("images/file_logo.svg");
		background-size: 12px 16px;
		background-repeat: no-repeat;
		background-position: 6px;
	}

	.filelink:hover {
		text-decoration: none;
		background-color: #BBB;
	}

	.file_nb {
		border-color: #F2632E;
		background-color: #FFD3C3;
		background-image: url("images/Mathematica_logo.svg");
		background-size: 16px 16px;
		background-position: 4px;
	}

	.file_nb:hover {
		background-color: #FFAA8C;
	}

	.file_pdf {
		border-color: #f00;
		background-color: #FFD7D9;
		background-image: none;
		padding: 2px 6px;
	}

	.file_pdf::before {
		display: inline-block;
	 	font-style: normal;
	 	font-variant: normal;
	 	text-rendering: auto;
	 	-webkit-font-smoothing: antialiased;
		font-family: "Font Awesome 5 Pro";
	    font-weight: 900;
	    content: "\f1c1\a0";
	    vertical-align: top;
		color: #f00;
	}

	.file_pdf:hover {
		background-color: #FF9393;
	}

	.file_colab {
		border-color: #FFB000;
		background-color: #FFE09F;
		background-image: url("images/colab_logo.svg");
		background-size: 16px 16px;
		background-position: 4px;
	}

	.file_colab:hover {
		background-color: #FFC647;
	}

	.file_panopto {
		border-color: #30733F;
		background-color: #C9FFD5;
		background-image: none;
		padding: 2px 6px;
	}

	.file_panopto::before {
		display: inline-block;
	 	font-style: normal;
	 	font-variant: normal;
	 	text-rendering: auto;
	 	-webkit-font-smoothing: antialiased;
		font-family: "Font Awesome 5 Pro";
	    font-weight: 900;
	    content: "\f03d\a0";
	    vertical-align: top;
		color: #30733F;
	}

	.file_panopto:hover {
		background-color: #6BFF8B;
	}

	.file_gform {
		border-color: #673AB7;
		background-color: #DFCCFF;
		background-image: none;
		padding: 2px 6px;
	}

	.file_gform::before {
		display: inline-block;
	 	font-style: normal;
	 	font-variant: normal;
	 	text-rendering: auto;
	 	-webkit-font-smoothing: antialiased;
		font-family: "Font Awesome 5 Pro";
	    font-weight: 900;
	    content: "\f682\a0";
	    vertical-align: top;
		color: #673AB7;
	}

	.file_gform:hover {
		background-color: #BEA0F2;
	}

	.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 SYLLABUS tab */
	#syllabus_container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
	}

	#syllabus_nav {
		order: 1;
		flex-grow: 0;
	}

	#syllabus_content {
		order: 2;
		flex-grow: 1;
	}
	
	#syllabus_content h4 {
		font-weight: bold;
		font-size: 20px;
		margin-top:  0.7em;
		margin-bottom: 0.7em;
	}

	#syllabus_content h5 {
		font-weight: bold;
		font-size: 16px;
		margin-top:  0.7em;
		margin-left:  1.5em;
		margin-bottom:  0.7em;
	}

	#syllabus_content h6 {
		font-weight: bold;
		font-size: 16px;
		margin-top:  0.7em;
		margin-left:  2.5em;
		margin-bottom:  0.2em;
	}

	#syllabus_content p {
		margin-left:  2em;
	}

	#syllabus_content ul {
		margin-left: 2em;
		margin-bottom:  0.7em;
	}

	#syllabus_content li {
		padding-bottom:  0.4em;
	}

	#syllabus_content ol {
		margin-left: 2em;
	}

	#syllabus_content table {
		margin: 0 auto;
	}

	#syllabus_content tr {
		border-bottom:  solid 1px #555;
	}

	#syllabus_content th {
		padding: 0.4em 2em 0.4em 0em;
		text-align: left;
	}

	#syllabus_content td {
		padding: 0.4em 2em 0.4em 0em;
		text-align: left;
	}


	/* 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;
	}


/*** styles for medium-size screens ***/
@media only screen and (min-width: 500px) {
	#mlw_title {
		display: block;
	}

	#tabs li a {
	    padding: 0.2em 1em;
	}

	.control {
		margin-left: 8px;
	}

	#schedule_container {
		flex-direction: row;
	}

	#control_container {
		order: 2;
	}

	#control_container .sticky {
		width: 98px;
	}

	#schedule_content {
		order: 1;
	}
}



/*** styles for large screens only ***/
@media only screen and (min-width: 725px) {
	.pwidth { /* make this page content wider than usual for this site */
		width: 90%;
		min-width: 700px;
		max-width: 1000px;
		margin: 0px auto;
	}

	#tabs li a {
	    padding: 0.2em 2em;
	}





}