/*colors*/
h1 { color: white }
h2, .subheading { color: black; }

.color-primary-0, .link:hover { color: #5FAAF2 }
.color-primary-1 { color: #F3F9FE }
.color-primary-2 { color: #9CC9F6 }
.color-primary-3 { color: #288FF2 }
.color-primary-4, .course-title, .link { color: #027BF0 }

.color-secondary-1-0 { color: #FFD858 }
.color-secondary-1-1 { color: #FFFCF3 }
.color-secondary-1-2 { color: #FFE79A }
.color-secondary-1-3 { color: #FFC919 }
.color-secondary-1-4 { color: #FFC300 }

.color-secondary-2-0 { color: #FF8E58 }
.color-secondary-2-1 { color: #FFF7F3 }
.color-secondary-2-2 { color: #FFBB9A }
.color-secondary-2-3 { color: #FF6319 }
.color-secondary-2-4 { color: #FF5300 }

/*background colors*/
.color-primary-0-bg, .button:hover { background: #5FAAF2 }
.color-primary-1-bg { background: #F3F9FE }
.color-primary-2-bg { background: #9CC9F6 }
.color-primary-3-bg, h1, .button { background: #288FF2 }
.color-primary-4-bg { background: #027BF0 }

.color-secondary-1-0-bg { background: #FFD858 }
.color-secondary-1-1-bg { background: #FFFCF3 }
.color-secondary-1-2-bg { background: #FFE79A }
.color-secondary-1-3-bg { background: #FFC919 }
.color-secondary-1-4-bg { background: #FFC300 }

.color-secondary-2-0-bg { background: #FF8E58 }
.color-secondary-2-1-bg { background: #FFF7F3 }
.color-secondary-2-2-bg { background: #FFBB9A }
.color-secondary-2-3-bg { background: #FF6319 }
.color-secondary-2-4-bg { background: #FF5300 }

/*other colors*/
.color-primary-3-bc, .course-picture:hover { border-color: #288FF2; }

/*tags*/

body {
	background-color: #DDD;
	padding: 0; 
	margin: 0;
	font-family: "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1.1em;
}

h1 {
	margin-bottom: 1em;
	padding: 1.7em 0;
	text-align: center;
	font-size: 170%;
	font-weight: bold;
}

h2 {
	margin-top: 2.1em;
	margin-bottom: 0;
	font-size: 130%;
	font-weight: bold;
	display: inline-block;
}

ul {
	list-style-type: none;
	float: none;
}

li {
	width: 100%;
	margin: 1.2em 0;
	float: left;
}

/* classes */

.link {
	text-decoration: none;
}

.link:hover {
	text-decoration: underline;
}

.button {
  margin: 0.6em;
  padding: 0.5em 1em;
  color: white;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  display: inline-block;
  font-size: 90%;
  text-shadow: 0 1px 0 gray;
}

.button:active {
	top: 1px;
	position: relative;
}

.course-picture-container {
	width: 20%;
	float: left;
}

.course-picture {
	width: 100%;
	box-sizing: border-box;
	border: 2px solid black;
	border-radius: 10px;
	margin-bottom: 10%;
}

.course-picture-small {
	width: 48%;
	margin-left: 2%;
	margin-top: -5%;
	float: left;
}

.course-text {	
	width: 75%;
	float: right;
	margin-left: 0;
}

.course-title {
	margin: 0.3em;
	margin-top: 0;
	font-weight: bold;
	line-height: 150%;
}

.course-detail {
	margin: 0.3em;
	line-height: 150%;
}

.course-authors {
	margin: 0.3em;
	font-size: 90%;
	line-height: 150%;
}

.subheading {
	margin-top: 0.3em;
	margin-bottom: 1.8em;
	font-size: 95%;
	display: block;
}

.audioBlock {
	line-height: 100%;
}

.audioBlock p {
	min-width: 18em;
	margin-bottom: 0.3em;
	display: inline-block;
}

.audioBlock audio {
	max-width: 100%;
	display: inline-block;
}

.icon-beginning {
	margin-left: -.2em;
}

.icon-only {
	margin: -.2em;
}

/* IDs */
#mainFrame {
	width: 70%;
	margin: 0 auto;
	padding-bottom: 0;
	background-color: white;
}

#content {	
	padding-left: 8%;
	padding-right: 5%;
}

#logo {
  width: 6em;
  margin-left: auto;
  margin-right: auto;
  padding-top: 3em;
  display: block;

}

#audioBlocks {
	margin: 0.5em 0; 
}


@media screen and (max-width: 1413px) {
	/* Audio blocks get aligned vertically for smaller width */
	.audioBlock {
		margin-bottom: 0.8em;
	}

	.audioBlock p {
		margin-bottom: 0.5em;
	}
}

@media screen and (max-width: 1000px) {
	/*less background for medium sized widths*/
	#mainFrame {
		width: 85%;
	}
}

@media screen and (max-width: 750px) {
	/*less background for medium sized widths*/
	#mainFrame {
		width: 92%;
	}
}

@media screen and (max-width: 500px) {
	/*remove background for small widths*/
	/* put course pictures on top of course text */

	.course-picture-container {
		width: 100%;
	}

	.course-picture {
		width: 40%;
		margin: 0;
		margin-bottom: 2%;
	}

	.course-picture-small {
		width: 20%;
		float: none;
	}

	.course-text {
		width: 100%;
	}

	#mainFrame {
		width: 100%;
	}
}


@media (-webkit-min-device-pixel-ratio: 2) and (max-device-width : 1024px), (min-resolution: 192dpi) and (max-device-width : 1024px) {
    /* iphone retina stuff here */

  body {
  	font-size: 36px;
  }

  li {
		margin-top: 40px;
		margin-bottom: 40px;
	}

  .button {
  	margin: 20px;
  	text-shadow: 0px 2px 0px gray;
  	padding: 12px 30px 12px 30px;
  	border-radius: 6px;
	}

  .course-picture-container {
		width: 100%;
	}

	.course-picture {
		width: 40%;
		margin-left: 0%;
		margin-top: 0%;
		margin-bottom: 2%;
		border-width: 4px;
	}

	.course-picture-small {
		width: 20%;
		float: none;
	}

	.course-text {
		width: 100%;
	}

	.audioBlock {
		margin-bottom: 15px;
		clear: both;
	}

	.audioBlock p {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.audioBlock audio {
		display: block;
		float: right;
		width: 100%;
		height: 120px;
		outline: 1px solid black;
	}

	#mainFrame {
		width: 100%;
	}
}

@media (prefers-color-scheme: dark) {
	/*
	h1 { 
		color: black 
	}
	img {
		filter: grayscale(30%);
	}
	#mainFrame {
		background-color: black;
	}
	*/
}