/* (A) BIG SCREEN */
/* (A1) 2 COLUMN LAYOUT */
*,
*::before,
*::after {
  box-sizing: border-box;
}

#container { display: flex; }
#sidebar, #MainContents { padding: 20px; }
#sidebar {
  width: 20%;
  background: #eaeaea;
  transition: opacity 0.2s;
}
#MainContents {
  width: 80%;
  background: #ffffff;
}


body {
    margin: 0;
	font-size: 20px;
	font-family: arial;
	
}


/* (A2) HIDE TOGGLE BUTTONS */
.toggleButton { 
  display: none; 
  font-size: 24px;
}

#sidebar ul {
		list-style: none;
		margin: 2em 0 2em 0;
		padding-left: 0.4em;
	}
	

#sidebar ul li {
		padding-top: 1em;
		font-size: 16px;
		font-family: arial;
	}
	
#sidebar ul li a {
		text-decoration: none;
		color: #000000;
	}

#MainContents ul {
	list-style: disc;
	margin: 1em 0 2em 2em;
	padding-left: 1.5em;
}

#MainContents ul li {
	padding-top: 0.4em;
	font-size: 20px;
	font-family: arial;
}


.lesson-meta {
	margin: -0.35em 0 1.5em;
	color: #555;
	font-size: 0.95em;
	text-align: center;
}


	a:hover {
			border-bottom-color: #f56a6a;
			color: #f56a6a !important;
	}

h1 {
        color: #8f1128;
        text-align: center;
      }
	  
h2 {
	color: #8f1128;
}
	  
.IndexList ul {
  list-style-type: none;
  margin-left: 2em;
  width: 80%;
}
 
h3 {
  font: bold 20px/1.5 Helvetica, Verdana, sans-serif;
}

.invoke-settings-table {
  width: 80%;
  max-width: 100%;
  margin: 1.5em auto;
  border-collapse: collapse;
  font-size: 20px;
}

.invoke-settings-table caption {
  margin-bottom: 0.5em;
  color: #8f1128;
  font-weight: bold;
  text-align: left;
}

.invoke-settings-table th,
.invoke-settings-table td {
  padding: 0.7em 0.9em;
  border: 1px solid #d9d9d9;
  text-align: left;
}

.invoke-settings-table th {
  width: 38%;
  background: #f4e7ea;
  color: #8f1128;
}

.invoke-settings-table tr:nth-child(even) td {
  background: #f8f8f8;
}

.reference-choice-table th:nth-child(1),
.reference-choice-table td:nth-child(1) {
  width: 27%;
}

.reference-choice-table th:nth-child(2),
.reference-choice-table td:nth-child(2) {
  width: 20%;
}

.reference-choice-table th:nth-child(3),
.reference-choice-table td:nth-child(3) {
  width: 53%;
}
.IndexList li img {
  float: left;
  margin: 0 15px 0 0;
}
 
.IndexList li p {
  font: 200 16px/1.5 Georgia, Times New Roman, serif;
}
 
.IndexList li {
  padding: 10px;
  overflow: auto;
}
 
.IndexList li:hover {
  background: #eee;
  cursor: pointer;
}

.IndexList a:hover {
			border-bottom-color: #eee;
}
	
hr {
		border: 0;
		border-bottom: solid 5px rgba(224, 14, 14, 0.75);
		margin: 2em 0;
	}
	
img {
	width: auto; 
	max-width: 100%;
	height: auto;
	max-height: 100%;
}

      .callout {
        width: min(82%, 860px);
        margin-top: 1.5em;
        margin-bottom: 1.8em;
        padding: 1em 1.2em 0.25em;
        border: 1px solid #d2d2d2;
        border-radius: 14px;
        background: #f1f1f1;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        text-align: left;
      }
      .prompt-callout { margin-left: auto; margin-right: 0; }
      .reply-callout { margin-left: 0; margin-right: auto; }
      .callout-label {
        margin-bottom: 0.65em;
        color: #555;
        font-size: 0.78em;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .callout ul { margin-bottom: 1em !important; }
      .article-figure {
        width: min(920px, 100%);
        margin: 1.8em auto 2.1em;
        text-align: center;
      }
	  
.imageCarousel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	margin: 1.5em auto 2em auto;
}

.carouselImageFrame {
	width: min(768px, 100%);
}

.carouselImage {
	display: none;
	width: 100%;
	height: auto;
}

.carouselImage.active {
	display: block;
}

.carouselCaption {
	font-size: 16px;
	font-weight: bold;
	margin: 0.5em 0 0 0;
	text-align: center;
}

.carouselButton {
	border: 1px solid #bbbbbb;
	background: #ffffff;
	color: #000000;
	cursor: pointer;
	font-size: 32px;
	line-height: 1;
	min-width: 44px;
	min-height: 44px;
}

.carouselButton:hover {
	background: #eeeeee;
}

.articleImageLeft {
	float: left;
	width: 256px;
	height: 256px;
	margin: 0 1em 1em 0;
}

.clearFloat {
	clear: both;
}

/* MENU COLOR CODE */
.CourseIndicatorArticles {
	font-weight: 900;
	color: #6c29dd;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorAndroid {
	font-weight: 900;
	color: #8e37a4;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorBC {
	font-weight: 900;
	color: #dabe26;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorC {
	font-weight: 900;
	color: #b3d844;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorEVB {
	font-weight: 900;
	color: #2fbb43;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorGames {
	font-weight: 900;
	color: #ab0b29;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorJava {
	font-weight: 900;
	color: #d369da;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorJavaS {
	font-weight: 900;
	color: #db4b0c;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorAcc {
	font-weight: 900;
	color: #a4373a;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorW {
	font-weight: 900;
	color: #4184df;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorEx {
	font-weight: 900;
	color: #2fbb43;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorPH {
	font-weight: 900;
	color: #bb852f;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorPY {
	font-weight: 900;
	color: #b3ab2a;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorVB {
	font-weight: 900;
	color: #4fd5e1;
	font-size: 1.2em;
	font-family: sans-serif;
}

.CourseIndicatorWeb {
	font-weight: 900;
	color: #26daba;
	font-size: 1.2em;
	font-family: sans-serif;
}

/* END MENU COLOR CODE */

.AllCourses {
	color: #FF0000;
	text-decoration: hotpink underline;
}
.TopPageHeading{
	font-size: 36px;
	font-family: sans-serif;
	color: #3897e0;
	font-weight: bold;
}

/* COURSE COLORS */
.TopPageHeadingInterColor {
	color: #0a3775;
}

.interColor {
	color:#4184df;
	text-align: center;
}

.align-center {
	text-align: center;
}
/* =============== */

	.indent_big {
	margin-left: 6em;
	font-weight: bold;
}

	.indent_small_no_bold {
	margin-left: 4em;
}

.blue_no_bold {
	color: blue;
}

.green_no_bold {
	color: green;
}
.indent_big_no_bold {
	margin-left: 8em;
}

.indent_small {
	margin-left: 4em;
	font-weight: bold;
}

.indent_small_blue_no_bold {
	margin-left: 4em;
	color: blue;
}

.indent_bigger {
	margin-left: 8em;
	font-weight: bold;
}

.indent_biggest {
	margin-left: 10em;
	font-weight: bold;
}


.TextIndent2 {
	margin-left: 4em;
	font-weight: bold;
}

.TextIndent3 {
	margin-left: 6em;
	font-weight: bold;
}
.TextAlignment {
	text-align: center;
}

.TextAlignmentBold {
	text-align: center;
	font-weight: bold;
}

.course_links {
	text-align: right;
}

/* (B) SMALL SCREEN */
@media screen AND (max-width:768px) {
  /* (B1) SHOW TOGGLE BUTTONS */
  .toggleButton { display: block; }
  
  /* (B2) TRANSFORM TO FULL SCREEN */
  #container { display: block; }
  #MainContents { width: 100%; }
  #sidebar {
    position: fixed;
    top: 0; left: 0;
    z-index: 999;
    width: 100vw;
    height: 100vh;
    visibility: hidden;
    opacity: 0;
  }
  
  /* (B3) SHOW SIDEBAR */
  #container.open #sidebar { 
    visibility: visible;
    opacity: 1;
  }
  .TopPageHeading{
	font-size: 20px;
  }
}