body, html {
	padding:0; margin:0;
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (min-width : 320px) 
and (max-width : 687px) {
	body, html{overflow:hidden;}
/* Styles */
#MathJax_Message{display:none!important;}
.wrapper{}
	.courseHeader{position:relative; top:0; left:0; z-index:10; display:block; height:60px; width:100%; background:#CCC;}
	.courseHeader > .logo{display:block; height:40px; width:177px; background-position:0px; top:10px; left:10px;}
	.courseHeader h1{position:relative; display:block; 
		font-size:.95em; font-weight: normal; margin:0; 
		left:0px; top:20px; background:rgba(255,255,255,.95); 
		line-height:.98em; padding:10px 5px;}


	/* navigation */
	.desktopMenu{display:none;}
	.miniNav{display:none;}
	
	.mobileMenu{position:absolute; width:100%; z-index:12; top:60px; right:0px; background:#666;}
	.mobileMenu .but{cursor:pointer; display:block; position:absolute; top:-50px; right:10px; width:50px; height:40px; background:#cd2027; margin:0px auto;}
	.mobileMenu .but:after{content:". . ."; color:#FFF;line-height:1.15em; font-weight:bold; font-size:1.5em; padding-left:9px;}
	.mobileMenu nav{display:none; position:relative; width:100%; height:100%; overflow-y:auto;}
	.mobileMenu nav.show{display:block;}
	
	nav li.current{color:#cd2027;}
	
	
	#scroll{position:relative; overflow-y:auto; overflow-x:hidden;}
	.courseContent{position:relative; top:0px; padding:0px 5px; background:rgba(255, 255, 255, .95); background-image:none!important;}
	
	.slide{padding-bottom:10px;}
	
	#header h1.title {text-align:center; position:absolute; top:25%; }
	
}




/* Tablets & up  ----------- */
@media only screen 
and (min-width :688px){
/* Styles */
	.courseHeader{
		position:relative;
		height: 70px;
		width: 100%;
		z-index: 99;
		overflow: hidden;
		white-space:nowrap;
	}

	.courseHeader > .logo {
		left: 1.75%;
		top: 0px;
		float: left;
		width: 17%;
		height: 70px;
		margin-right:1.75%;
		background-position:50%;
		
	}
	.courseHeader h1 {
		float:right;
		font-size: 1.15em;
		font-weight: bold;
		display: inline-block;
		margin:-5px 0px;
	}

	.mobileMenu{display:none;}
	/* left side navigation */
	.desktopMenu{display:block;}
	nav {
		position: relative;
		top: 0px;
		width: 20%;
		float: left;
		background: #333333;
		z-index: 99;
	}
	/* content area */
	.courseContent {
		z-index: 100;
		position: relative;
		top:-35px;
		width: 80%;
		float: left;
		background-size:cover;
	}
	.logo{width:220px;}
	.courseContent:after {
		content: "";
		display: table;
		clear: both;
	}
	.main-container{max-width:none!important;}
	/* header is the div for the title page */
	#header h1.title {background:rgba(255,255,255,.95); padding:20px; font-size:1.25em; line-height:1.25em; 
		position:absolute; top:10%; left:5%; width:40%;}
	
	.miniNav{display:block; position:fixed; bottom:20px; right:20px; width:131px; height:50px; line-height:45px; z-index:105;}
	.miniNav .back, .miniNav .next{
		cursor:pointer;
		display:inline-block; width:50px; height:50px; padding-left: 10px; 
		background:#cd2027; border-radius:13px; 
		color:#fff;font-weight: bolder; font-size: 4em;}
	.miniNav .next{margin-left:10px;padding-left: 15px; width: 46px;}
}

/* shared for all */

.wrapper {
	background: rgba(80%,80%,80%,1);
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden!important;
}
/* header */
.courseHeader {
	top: 0; left: 0;
}
.courseHeader > .logo {
	cursor:pointer;
	position: relative;
	background-image: url(../img/logo.png);
	background-repeat:no-repeat;
	background-size: contain;
}
.courseHeader h1 {
	position: relative;
}
.courseHeader h1:after {
	content: ".";
	visibility:hidden;
	clear: both;
}

nav ul{position:relative; top:0px;with:100%; list-style:none; margin:0px;}
nav ul > li.current a, nav li a:hover{color:#cd2027; text-decoration:none; font-weight:bold;}
nav > ul > li a, nav > ul > li.current > ul > li a{color:#fff; font-size:.95em; width:100%; display:block; font-weight:bold;}
nav > ul > li { padding:10px; border-bottom:1px solid #CCC;}
nav > ul > li > ul {padding-left:10px; font-weight:normal;}
	
#scroll{background: rgba(255,255,255,1);}
.courseContent{
	background-color:rgba(255,255,255,.95); background-image:none; background-repeat:no-repeat;}

/* per-page */
.slide {
	display: block;
}
.hidden {
	display: none;
}