body,
html {
    padding: 0px 0px 50px 0px;
    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: 200;
		overflow: hidden;
		white-space:nowrap;
		background-image: url(../img/09Evidence.jpg)
}
    .courseHeader > .logo {
        left: 1.75%;
        top: 0px;
        float: left;
        width: 20%;
        height: 70px;
        margin-right: 1.75%;
        background-position: 50%;
    }

	.courseHeader h1 {
		float: right;
		color: #494949;
		font-size: 2em;
		display: inline-block;
		position: relative;
	}

    .mobileMenu {
        display: none;
    }
    /* left side navigation */
    
    .desktopMenu {
        display: block;
    }
    nav {
        position: relative;
        top: 0px;
        width: 20%;
        float: left;
        background: #fff;
        z-index: 99;
    }
    /* content area */
    
    .courseContent {
        z-index: 100;
        position: relative;
        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, .7);
        padding: 20px;
		color: #494949;
        font-size:3.5em;
        line-height: 1.25em;
        position: absolute;
        top: 10%;
        left: 5%;
        width: 40%;
    }
    .miniNav{
	display:block; 
	position:fixed; 
	bottom:20px; 
	right:50px; 
	width:110px; 
	height:54px; 
	line-height:45px; 
	z-index:200; 
	border-radius:7px; 
	background:#fff; 
	border-style: solid; 
	border-color: #ccc; 
	border-width: 2px;
	}

.miniNav .back, .miniNav .next{ 
	align-content: center;
	cursor:pointer;
	display:inline-block; 
	width:50px; 
	height:50px;
	padding-left: 20px; 
	font-size: 1.5em;
	color: #ccc;}

.miniNav .next{
	padding-left: 20px; 
	width: 50px; 
	border-left-style: solid; 
	border-color: #ccc; 
	border-left-width: 2px;}
}
/* shared for all */

.wrapper {
    background: #f6f6f6;
    position: relative;
    width: 100%;
    overflow: hidden!important;
}
/* header */

.courseHeader {
	top: 0; 
	left: 0; 
	border-bottom: 5px #f6f6f6 solid;
}
.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: #2287c4;
    text-decoration: none;
    font-weight: bold;
}
nav > ul > li a,
nav > ul > li.current > ul > li a {
    color:#494949;
    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;
}