/* (A) BIG SCREEN */
/* (A1) 2 COLUMN LAYOUT */
#container { display: flex; }
#sidebar, #MainContents { padding: 20px; }
#sidebar {
  width: 20%;
  background: #fff;
  transition: opacity 0.2s;
}
#MainContents {
  width: 80%;
  background: #ffffff;
}

.indentLink {
	margin-left: 15px;
	text-decoration: none;
	color: black;
}

.indentLinkHighlight{
	background-color: #b2efba;
	border-bottom: 1px solid #dedede;
	padding: 10px;
	color: #00ff00;
}

.botBorder {
	padding-bottom:12px;
	border-bottom: 1px solid #dedede;
}
.accordion > input[name="collapse"] {
  display: none;
  
  /*position: absolute;
  left: -100vw;*/
}

.accordion label,
.accordion .content{
	font-size: 12px;
 max-width: 320px;
  margin: 0 auto;
 }

/* font-size: SIZE OF LINKS */
.accordion .content {
	font-size: 14px;		
  background: #fff;
  overflow: hidden;
  max-height: 0;
 transition: 0.5s;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
}

.accordion > input[name="collapse"]:checked ~ .content {
	max-height: 1000px;
  height: auto;
  transition: max-height 0.5s ease-out;
}

.accordion label {
  display: block;
 
}


/* For Desktop */
@media only screen and (min-width: 620px){


.accordion > input[name="collapse"]:checked ~ .content {
  //height: 220px;
}

}

.accordion {
  margin-bottom: 1em;
}

.accordion > input[name="collapse"]:checked ~ .content {
  border-top: 0;
  transition: 0.3s;
}

.accordion .handle {
  margin: 0;
  font-size: 16px;
  
}

.accordion label {
  color: #fff;
  cursor: pointer;
  font-weight: normal;
  padding: 10px;
  background: #27b136;		
  user-select: none;
  
}

.accordion label:hover,
.accordion label:focus {
  background: #252525;
}

.accordion .handle label:before {
	background:url(arrow.png);
  
}

.accordion > input[name="collapse"]:checked ~ .handle label:before {
    transform: rotate(180deg);
    transform-origin: center;
    transition: 0.4s;
}

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

h1 {
	text-align: center;
	color: #dd4254;
}

.HeaderLink {
	text-decoration: none;
	color: #13701d;
}
/* (A2) HIDE TOGGLE BUTTONS */
.toggleButton { 
  display: none; 
  font-size: 24px;
}

/**/	
	a:hover {
			color: #f56a6a;
	}

hr {
		border: 0;
		border-bottom: solid 3px rgba(4, 185, 28, 0.75);
		margin: 2em 0;
	}
	
img {
	max-width: 100%; 
	display: block;
}

.linksRight {
	float: right;
}
.linksLeft {
	float: left;
}

.TopPageHeading{
	font-size: 36px;
	font-family: sans-serif;
	font-weight: bold;
}

.TopPageHeadingVbColor {
	color: #b2efba;
}
.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;
}

.indent_biggest_no_bold  {
	margin-left: 10em;
}

.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;
}

.hide_on_mobile {
		display: none
}
/* (B) SMALL SCREEN */
.leaderboard-style, .between-courses-style {
	min-height: 336px !important;
}
@media (min-width: 1001px) {
	.leaderboard-style {
		min-height: 90px !important;
	}
}
@media (min-width: 1200px) {
	.between-courses-style {
		min-height: 90px !important;
	}
}
@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;
  }
  
  .course_links {
		text-align: right;
		font-size: 16px;
	}
	img {
		max-width: 80%;
	}
	
	body {
		font-size: 16px;
	}
	
	ul li {
		padding-top: 1em;
		font-size: 14px;
		font-family: arial;
	}
}

/* For Mobile Portrait View */
@media screen and (max-device-width: 480px) and (orientation: portrait) {
#container { 
	display: flex;
	width: 95%;
}

.course_links {
		text-align: center;
		font-size: 16px;
}
	
.indent_small {
	margin-left: .5em;
	font-weight: bold;
}

.indent_big {
	margin-left: 1em;
}


.indent_bigger {
	margin-left: 1.5em;
}

.indent_biggest {
	margin-left: 1.8em;
}


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


.indent_small_no_bold {
	margin-left: .5em;
}


.indent_big_no_bold {
	margin-left: 1em;
}

.TextIndent2 {
	margin-left: 1em;
	font-weight: bold;
}
	img {
		max-width: 80%; 
	}
}