body 	{background: white;  
	font-family:"Trebuchet MS", Helvetica, sans-serif;
	margin:0 auto;
	padding:0;
	}

h1 	{font-size:1.4em; color:orange; width:100%; display:inline;
	padding-bottom:0.2em; border-bottom: 0.1em solid orange;
	margin-bottom:1em;}


@media (max-width:860px) { 
	h1 {font-size:1.2em;}
}


/*   -------- Some general classes----------------------- */

.comment {font-style:italic;}
.bold {font-weight:bold;}
.highlight {color:yellow;}
.grey {color:grey;}
.red {color:red;}
.orange {color:orange;}
.purple {color:purple;}
.white {color:white;}
.black {color:black;}
.emphasize {font-style:italic;  display:inline;}
.left {float:left;}
.right {float:right;}
.center {text-align:center;}
.fillin {text-decoration:underline; color:red; display:inline; font-family:"Segoe Print";}
.warning {color:red; font-size:1em; font-style:italic;  padding:5px 10px;}
.error {margin-top:2em; text-align:center; margin-bottom:5em; color:red; font-size:1.3em; min-height:100%; }
.error_min {color:red; font-size:1.3em; }
.smaller {font-size:0.9em;}
.update_msg {font-size:1.2em; margin:4em; margin-bottom:8em; color:red; font-weight:bold; font-style:italic;}

/*   ------------ Header  ----------------------- */

header  {width:100%;}
header img {display:block; max-width:100%; height:auto; width:auto;}

/*   ------------ Footer ------------------------ */

#footer { width: 100%; margin: 0 auto;
	 clear: both;
	 background-color:orange;
	 color:#000000;
	 margin-top:1em;
	 padding-top: 0.5em;
	 text-indent: 2em;
	 padding-bottom:0.5em;
	 border-top: 1px solid black;
  }
.foot_credit {text-decoration:none; color:white; text-align:left; padding-bottom:0.5em;}
.foot_copy {text-decoration:none; color:white; text-align:left; }


/*  ----------- Navigation bar  ------------------------ */


#navbar {width:100%; font-family: "Trebuchet MS", Helvetica, sans-serif;
	background-color:black;
	margin-bottom:2em;
	}

#navbar .menu {list-style-type:none;}
#navbar .menu a {text-decoration:none;}
#navbar .menu .menu_item a:hover {color:#ffa500;}

.inact_item {color:#ffffff;}
.curr_item {color:#ffff33; border-bottom:3px solid #ffff33;}


/* ------ Default Navigation for small screens -------- */

@media (max-width:720px) {
	#navbar .menu {font-size:1.3em; }
	#navbar .menu {margin-top:0; padding-left:0em;}
	#navbar .menu .menu_item {border-bottom:1px solid orange; padding-left:1em; padding-top:0.5em; padding-bottom:0.5em;}	
	#navbar .menu .menu_item a {padding-right:0.5em;}
}

/* ------- Navigation for bigger screeens -------- */

@media (min-width:721px) {

	#navbar {height:2.5em;}
	#navbar .menu {font-size: 1.5em; padding: 0.2em 0;}
	#navbar .menu .menu_item {width:20%; float:left;  
			text-align:center; border: 0px solid white;
			}
	#navbar .menu .menu_item a {padding-left:0.3em; padding-right:0.3em;  } /* display:block can be used to make  the whole <li> sensitive to rollover changes */
}

/* ---------- Content ----------------- */

#content {width: 94%;  margin: 0 auto; height:100%;}
#content {font-family: Verdana;}


/* ----------- Home page ------------- */

#container {display:flex; flex-wrap:wrap;  
		font-family:verdana; margin-top:2em;}

.intro  {flex-basis:100%;
	border:2px solid orange; border-radius:8px;
	padding:0.5em; margin-bottom:1em;
	background-color: #ffffe0; color:gray; font-style:italic;
	font-size:0.9em;}

.intro_head {font-size:1.1em; font-weight:bold; padding: 0.5em 0;}

.intro_list  { font-weight:bold; line-height:2em; 
		list-style:none;  padding-left:1em;}

.grad_fill { 
  background-color: #ffffff; /* fallback color if gradients are not supported */
  background-image: -webkit-linear-gradient(top, #ffee99, #fff);
  background-image:    -moz-linear-gradient(top, #ffee99, #fff); /* For Fx 3.6 to Fx 15 */
  background-image:     -ms-linear-gradient(top, #ffee99, #fff); /* For IE 10 Platform Previews and Consumer Preview */
  background-image:      -o-linear-gradient(top, #ffee99, #fff); /* For Opera 11.1 to 12.0 */
  background-image:         linear-gradient(to top, #ffee99 0%, #fff 70%); /* Standard syntax; must be the last statement */
}

.info_img {flex-basis:100%;} 
.info_img img{margin:auto; display:block;}

@media (min-width:1000px) {
 #container {display:flex; flex-flow:row ;
		align-items:stretch;} 
 .intro {margin-right:1em;}
 .info  {margin-right:1em;} 

}


/* ---------- Student & student lessons pages ------------------- */

.student_content {display:flex; flex-direction:column; margin-top:2em;}

.lessons_content {display:flex; flex-direction:row; flex-wrap:wrap; 
		   justify-content:space-between; column-gap:0.5em;}

.student_container, .class_container 
	{border:3px solid orange; border-radius: 8px; padding: 0.8em; 
	font-size:1em; line-height:1.4em; 
	margin-bottom:1em; 
	background-color:#ffffe0;}

.lessons_container {
	border:2px solid orange; border-radius: 8px; padding:0.8em;
	font-size:0.9em; line-height:1.4em; 
	margin-bottom:1em; 
	min-width:240px; 
	display:flex; flex-direction:column; 
	flex-basis:20%; flex-grow:1;
	}
.lessons_c_0 { background-color:#ffee88; }
.lessons_c_xx { background-color:#ffffe0; }

@media (max-width:600px) { 
			}

.container_details {display:flex;}
.container_details_head {color:#444444; white-space:nowrap;}
.container_details_txt {color:purple;  padding-left:0.5em;}
.lesson_link {margin-top:auto; text-align:center; }



/* this class is used in orig student class pages */
.class_container_flex {display:flex; justify-content:space-between;}




.unit_head, .cat_head 
	{color:white;  background-color:orange; 
	border:0px solid orange; border-radius: 5px;
	font-size: 1.5em; text-align:center;
	padding:0.3em; margin-bottom:10px;}



.click_button {font-size:1em; 
		text-decoration:none; 
		border:2px solid orange; 
		background-color:white; 
		color:orange; 
		border-radius:10px; 
		line-height:1.8em;
		margin-top:1em;	
		}

.click_button a {text-decoration:none;}

.cb_big {width:100%; text-decoration:none; }

.click_button:hover, .click_button:hover a 
	{background-color:orange; color:white; cursor:pointer;}


/* ---------- Class content  for words/images------------------- */

.word_content { display:flex; flex-wrap:wrap;  justify-content:space-between; }
.word_container {border:2px solid purple; border-radius:5px;
		min-width: 240px;  max-width:240px;
		padding:0.5em; margin-right:0.5em; margin-bottom:1em;  
		}

.word_img {display:flex;  width:240px; max-height:240px; margin-bottom:5px;}
.word_text_cont { border:1px solid gray; border-radius:5px;  margin:auto; padding:2px;}
.aud_play {height:28px; width:28px;   margin-right:10px;}
.word_text_l {font-size:130%; line-height:135%;}
.word_text_m {font-size:100%; line-height:175%;}
.word_text_s {font-size:90%; line-height:195%;}
.word_text_xs {font-size:80%; line-height:215%}


@media (max-width:620px) { 
	.word_content {justify-content:center;}
	.word_container {margin-left:auto; margin-right:auto; 
			padding-left: 0; padding-right:0; 
			min-width:100%; }
	.word_img {margin-left:auto; margin-right:auto;}
	.word_text_cont {max-width:240px;}
}


/* ---------- Class content  ------------------- */

.pres_content {}
object  {} 
.pdf_pres {width:92vw; height:56vw;}

/* iframe {overflow-x:hidden; overflow-y:hidden; width:90%; margin-left:5%; border:0;} */

.section_head {font-size:1.5em;  margin-bottom:0.5em;}



/* ---------- Courses page content  ------------------- */


.courses_content {margin-top:2em;}

.course_container {border:1px solid orange; border-radius: 3px; 	
		background-color:#ffffff;
		padding: 0.8em; 
		font-size:1em; 
		margin-bottom:2em;
		}
.course_list {display:grid;
		grid-template-columns: 3fr 2fr 1fr 1fr 3fr;
		grid-template-areas: "pic course levels publisher description";
		grid-template-rows:auto;
		text-align:center; 
		font-family: "Arial";
		border-top:1px solid #ddd; border-right: 1px solid #ddd;
		border-bottom:1px solid #ddd;}
.col1 {grid-area: pic;   border-left: 1px solid #ddd; border-right: 1px solid #ddd; padding:0.5em 0.2em; }
.col2 {grid-area: course;  border-right: 1px solid #ddd; padding:0.5em 0.2em; font-size:1em; }
.col3 {grid-area: levels; border-right: 1px solid #ddd;  padding:0.5em 0.2em; font-size:0.9em;  }
.col4 {grid-area: publisher;  border-right: 1px solid #ddd; padding:0.5em 0.2em; font-size:0.9em;  }
.col5 {grid-area: description;  padding:0.5em 0.2em; font-size:0.8em; }

.course_container .course_img {width:20vw;}



/* ---------- About  ------------------- */

.aboutme { float:left; color:#333333; margin-top:2em;}
.aboutme img {margin-right: 2em; margin-top: 1em; margin-bottom: 1em; border:1px solid orange; float:left; }