/*======================================*/
/*===========================================*/
/*======================*/
/*============*/
/*===*/

@media (max-width:800px) {
   	#courseInfo{
	display:none;
}
h3{	
	font-size:large !important;
	margin-left:25px !important;
	font-family: 'Lato', sans-serif;				
}
h4{
    margin: 0 !important;
}
	html{	
	height:100% !important;	
	overflow:hidden !important;			
}
	body{		
		height:100% !important;		
		font-size:medium !important;
		font-family: 'Source Sans Pro', sans-serif;
		font-weight:400 !important;
		overflow:hidden !important;		
}
		
	  .page {
        border: none !important;		
    }	
    #logo img {
        max-height: initial;
        height: 42px !important;
		margin-top:0 !important;
}
	#header {
        background: url(header370.png) no-repeat !important;
        width: 100% !important;
        height: 48px !important;
        background-size: cover !important;
	   position: fixed;
	   top: 0;		
		z-index: 100;
    }
    #topicInfo h3{
	    margin-top: 60px !important;
	    
    }
	.vidModal {
		display: none;
		position:relative !important;
		z-index: 101;	
		left:0 !important;
	    width: 100% !important;
	    height: 100% !important;
		margin:30 0 0 0 !important;
	    background: rgba(22, 28, 28, 0.8);
	    transform: translateY(90%);
	}
   
	.vidModal iframe {
	    max-width: 100% !important;
	    height: 100% !important;
		margin: 5px !important;
	    border: none;
	}
	.mainItem{
		height:auto;
	}
    .container {
        width: 100%;
		position:relative !important;
		height: 100% !important;		
        margin-left: auto;
        margin-right: auto;	
		overflow-y:scroll !important;	
		-webkit-overflow-scrolling: touch !important;
		background-color: #4d4d4d;
    }	
    #navBtns {
        position: absolute;
        right: 0;
    }
    #navBtns img {
        height: auto;
        width: 42px !important;
        margin-top: 2px !important;
        margin-right: 4px !important;
    }	
	#toc{
		top:48 !important;
		position: fixed !important;
	}
	.Sm_Graphic_Lg_Text.textBox, .Sm_Text_Lg_Graphic.textBox{
	max-height:600% !important;
	height: auto !important;
	width:92% !important;	
	line-height:1.2;	
	margin: 10px !important;		
	overflow:hidden ;
	border:none !important;
	padding:0 0 30px 0 ;	
	float:left ;
	clear:both ;			
	}
	.Sm_Graphic_Lg_Text.mediaBox, .Sm_Text_Lg_Graphic.mediaBox {
		float:left;
	display:block;
	width: 80% !important;
	height:100% !important;	
	padding:0 !important;		
	margin:  20px !important;
	top:0;
				
}	
	div, img, .mediaBox {
       vertical-align: top;
}
	.gallery{
		width: 100% !important;
	height:auto;
		min-height:60% !important;
	padding:0 !important;				
	float:left !important;
	clear:both !important;	
		
	}
	.Sm_Text_Lg_Graphic.mediaBox .mainItem img, .Sm_Graphic_Lg_Text.mediaBox .mainItem img {
		max-width:100% !important;		
		width:auto !important;
		max-height:50% !important;	
		color: #4d4d4d;	
	}   
	.Sm_Text_Lg_Graphic.textBox .ul, .Sm_Graphic_Lg_Text.textBox .ul, .normal{ 
		margin-top: 10px !important;
    	margin-left: -20px !important;
}    
	 .captionBox {
        width: 98% !important;
}
	.Graphics_Only.textBox{
		min-height:1px;
	}
	.Graphics_Only{
		margin:0 auto !important;
		width:94% !important;
		max-height:200% !important;
		height: 100% !important;		
	
	}
	.Graphics_Only .gallery .captionBox {
		width:100% !important;
		position:inherit!important;
		min-height:40px !important;
		height:auto !important;
}
	.Graphics_Only .gallery .thumbImgRow {
		position:inherit !important;
		margin: 20px 0 50px 0 !important;		
		width:100% !important;
		padding-bottom:10px !important;
		min-height:120px !important;
	}
	.Graphics_Only .mainItem img {		
		max-width:94vw !important;
		max-height:50vh !important;
		height:auto !important;
	}
	.Graphics_Only .mainItem .captionBox {
		width:98% !important;		
}	
	.Text_Only.textBox {
	max-height:600% !important;
	height: auto !important;
	width:98% !important;	
	line-height:1.2;	
	margin: 0 8px 50px 8px !important;			
	overflow:hidden ;
	border:none !important;
	padding:0 0 30px 0 ;	
	}	
 .conceptBut {
        margin: auto 48px !important;		
		bottom: -13 !important;	
		-ms-transform: rotate(90deg);	
		-webkit-transform: rotate(90deg);	
		transform: rotate(90deg);	 	
    }
 #termContainer {
   	width:280px;
    background-color: #e6e6e6;
    border: 2px solid #4d4d4d;
    display: none;    
    resize:both;
	height:280px;
    z-index: 100;
    padding: 5px;
    border-radius: 5px;
	max-height:500px;
	float:left;	
	clear:both;	
	top:60px !important;
	left:30px !important;
	position:fixed !important;
}
	#sideModal{
	width:280px;
    background-color: #e6e6e6;
    border: 2px solid #4d4d4d;
    display: none;    
	height:280px;    z-index: 100;
    padding: 5px;
    border-radius: 5px;		
	float:left;	
	clear:both;	
	bottom:52px !important;
	left:18px !important;
	position:fixed !important;
	max-height:140px;
}
		.keyAudio,.keyTerm {
         color:#439EFF;
   		 text-decoration: none;
   		 cursor: pointer !important;
}
.keyTerm:hover{
	color:#2973B0;
}
	#additionalLinks{
	margin:0px 8px 50px 8px !important;
	float: left !important;
	clear: both !important;
	width: 90% !important;
	overflow-y: auto;	
	display: block !important;
	height: auto;
	position: inherit !important;	
	}
	#footer{
		height:40px !important;
		position:fixed !important;
		bottom:0 !important;		
	}
	.gallery .thumbImg, .gallery .media.thumbImg {    
    		height: 35px !important;
		width: 35px !important;
	}
	.gallery .thumbImgRow{
		position:inherit !important;
		display:inline-block !important;
		margin:20px 0 20px 0 !important;
		width: 100% !important;
		min-height:20px !important;
	}
	#content, #pageArea{		
}		
	#copyright{
		margin-top:12px !important;
	}
}

/*======================================*/
/*======================================*/
/*======================*/
/*============*/
/*===*/
 
@media (min-height:800px) {
 
.Sm_Text_Lg_Graphic.mediaBox .mainItem img {
    max-height: 60vh !important;
    
}
 
.Sm_Graphic_Lg_Text.mediaBox .mainItem img {
    max-height: 60vh !important;
    
    }
.Graphics_Only.mediaBox .mainItem img{
        height: 65vh !important;        
        
    }
.vidModal iframe {
        max-width: 1280px !important;
        max-height: 720px !important;
    }
}
 
 
/*======================================*/
/*=============================*/
/*======================*/
/*============*/
/*===*/

/* end mq ====================================*/


::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}
	::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(0,0,0,.5);
}
#slides div {
    height: 100%;
}
html, .container{
	overflow:hidden;
}
body {
    margin: 0;
	font-family: 'Source Sans Pro', sans-serif;
    font-size: medium;
	font-weight:400;
    line-height:1.2;
    color: #4d4d4d;
	overflow:hidden;
}

h3{
	margin:20px 0 0 30px;
	font-size:large;
	font-family: 'Lato', sans-serif;
	color: #ffffff;
	font-weight:500;
}
h4{
    margin: 0 !important;
}
#header {
    background: url(header1024.png) no-repeat;
    width: 100%;
    height: 56px;
}
.textBox p{
	display: block;
    line-height: inherit;
    padding-left: 12px !important;
    margin-bottom: 2px;
}
.textBox{
	height:auto;
	overflow-y:scroll;
}
#navBtns {
	float: right;
    height: 56px;
    margin-right: 10px;
    margin-top: 1px;
}
#navBtns img {
    height: auto;
    width: 50px;
    margin-top: 4px;
   	float: right;
    cursor: pointer;
    border: none;
    margin-right: 4px;
}
#navBtns img:hover {
    background: url(focus.png) scroll center center no-repeat;
}
#courseInfo {
    width: 80%;
    margin-left: 1.6%;
    margin-top: 18px;
    float: left;
    color: #f8f8f8;
    font-size: large;
    font-family: 'Lato', sans-serif;
}
span#footPgNum {
    text-align: center;
}
span#copyText,
span#footPgNum,
#btnGroup {
    display: inline-block;
    width: 33%;
}
#btnGroup div {
    float: right;
}
#topicInfo {
    	width: 100%;
   	margin-left: -5px;
    	font-size: large;
	font-family: 'Lato', sans-serif;
}
.copyright{
	font-size: small;
	font-family: 'Source Sans Pro', sans-serif;
	color: #f8f8f8;
    font-style: italic;
    width: 90%;    
	float:left;	
	margin: auto;
}
 .copyright p{
	font-size: small;
	font-family: 'Source Sans Pro', sans-serif;
	color: #f8f8f8;
    font-style: italic;
    width: 90%;     
	float:left;	
	 margin: 3px auto;
	
}
.captionBox p{
	color: #f8f8f8;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: small;  
    
	padding-bottom:10px !important;
	text-align: left;     
	float:left;	
	margin: auto;
}
 .captionBox{
	color: #f8f8f8;
	 max-width: 98% !important;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: small;
    	width: 100%;    
	text-align: left;    
	float:left;	
	 margin: auto;
	
}
img {
    float: left;
    text-align: left;
}
.keylink {
    display: block;
    cursor: pointer;    
}
.Sm_Graphic_Lg_Text.textBox {
	float:left;
	width:58%;
	margin:0px 20px 0 20px;
	padding:0 10px 10px 10px !important;
    z-index: -1;
    background: #FBF4E1;
    border-radius: 6px;
	border:1px solid #0f0f0f;			
	color: #0F0F0F;	
	height:auto;
	max-height:50%;	
	overflow-y:auto;
}
.Sm_Text_Lg_Graphic.textBox {
	float:left;
	width:32%;
	margin:00px 20px 0 20px;
	padding:0 10px 10px 10px !important;
    z-index: -1;
	border-radius: 6px;
    background: #4d4d4d;    
	color: #EFEFEF;	
	height:auto;
	max-height:50%;
	overflow-y:auto;
}
.Sm_Graphic_Lg_Text.mediaBox {	
	margin:20px 20px 0 64%;
    z-index: -1;
    background: #4D4D4D;
}
.Sm_Text_Lg_Graphic.mediaBox {
	margin:10px 20px 0 38%;
    z-index: -1;
    background: #4d4d4d;
}

.Sm_Text_Lg_Graphic.mediaBox .mainItem img {
	max-height: 60vh;
	height:auto;
	max-width: 60vw;
	width:auto;
	
}
.Sm_Text_Lg_Graphic.mediaBox .captionBox {
	max-width: 45vw;
	
}
.Sm_Graphic_Lg_Text.mediaBox .mainItem img {
	max-height: 38vh;
	height:auto;
max-width: 100%;
	width:auto;
	
}

.Sm_Text_Lg_Graphic.textBox .ulist .normal,
.Sm_Graphic_Lg_Text.textBox .ulist .normal { 
	margin-top: 20px;
    margin-left: -40px;
	font-size:medium;
}
#content{	
}
	.Graphics_Only {     
       	width:96%; 
		margin:0 20px;	
	}
	.Graphics_Only .gallery .thumbImgRow {
		position: absolute;
		width:98%; 
		margin:0;
		bottom:70px;
	}	
	.Graphics_Only .mainItem img{
		max-height: 50vh;
	height:auto;
	max-width: 100vw;
	width:auto;
	}
.Graphics_Only .mainItem .captionBox {
	max-width:100%;
}
.Graphics_Only,	.Graphics_Only img {
		overflow:hidden;	
		
	}
.Graphics_Only.textBox {
	float:left;	
	width:100% !important;
	height:16px !important;
}
	.Graphics_Only .thumbImgRow{
		width:100%;
		bottom: 5px;
	}
	
.gallery {
    height: 100%;    
}
.gallery .thumbImg,
.gallery .media.thumbImg {
    float: left;
    height: 32px;  
	width: 32px;	
    margin-right: 2px;
    border-radius: 9px;
    border: 1px solid #000;
    cursor: pointer;
}
.thumbImg:hover {
    -webkit-filter: opacity(50%);
    
    border-bottom: 3px solid #222;
}
.gallery .thumbImgRow {
   bottom:70px;    	    
    width: 35vw;
    float: left !important;	
    display: inline;
	position:absolute;
}
.Text_Only.textBox {
	margin:10px 30px 0 20px;    
    width: 90%;    	
	height:auto;
	max-height:50%;
	overflow-y:auto;		
	 background: #FBF4E1;
    border-radius: 6px;
	border:1px solid #0f0f0f;			
	color: #0F0F0F;
}
.keyConIcon {
    float: left;
    height: 136px;
    width: 32px;
    cursor: pointer;
    border: none;
    background: none;
}
.mainItem {
    overflow: hidden;
}
.Panoramic.textBox {
    width: 100%;
    height: 30%;
}
.Panoramic.mediaBox {
    width: 100%;
    height: 65%;
    margin-bottom: 1%;
}
.Panoramic.mediaBox .gallery .thumbImgRow {
    bottom: inherit;
    position: relative;
    margin-top: 0;
}
	#toc {
    background-color: #e6e6e6;
    border-right: 2px solid #2a2a2a;
    border-left: 2px solid #2a2a2a;
    border-bottom-left-radius: 9px;
    border-bottom-right-radius: 9px;
    float: right;
    right: 0;
    top: 56;
    padding: 2px 4px;
	display: none;
    position: absolute;
    z-index: 99;
    border-bottom: 2px solid #444;
    height: 360px;
    width: 360px;
}
#toc ul {
    background: #ffffff;
    padding: 2px;
    border-radius: 6px;
    min-height: 80px;
    width: 98%;
    height: 83.2% !important;
	margin:4px 0 0 4px;
    overflow-y: auto; 
}
#closeTocBut {
    float: right;
    cursor: pointer;
    margin-top: 10px;
    margin-left: 20px;
}
#sideModal h3,
#termContainer h3 {
    display: inline;
	font-family: 'Lato', sans-serif;
}
.vidModal {
     display: none;
	z-index: 101;
    	position: absolute !important;
    	width: 100% !important;
    	height:100%;
	top:56px;
    	background: rgba(28, 28, 28, 0.8);
}
.vidModal iframe {
     width: 100%;
    	height: 60%;
	max-width: 575px;
	max-height: 431px;
	margin: 10% 25%;
    	border: none;	
}
#btnGroup {
    position: absolute;
    right: 0;
    bottom: 0px;
    width: 120px;
    height: 30px;
}
.flip {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
#btnGroup a img {
    float: left;
    cursor: pointer;
    width: 32px;
    opacity: 0.4;
    height:32px;
	margin-left:12px;
	margin-top:8px !important;
}
#btnGroup a img:hover {
    opacity: 0.8;
}
#footer {
    background-color: #e1e0e0;
	color: #5E5E5E;
    position: fixed;
    width: 100%;
    height: 50px;
    float: left;
    z-index: 98;
    bottom: 0;
}
#copyright {
    position: absolute;
    left: 2%;
    width: 95%;
    margin-top: 15px;
    color: #777;
    font-size: small;
}
#sideModal h3{
	margin-left:5px;
	font-family: 'Lato', sans-serif;
}
#sideModal{
	width:280px;
    background-color: #e6e6e6;
    border: 2px solid #4d4d4d;
    display: none;    
	height:auto;    
	z-index: 100;
    padding: 5px;
    border-radius: 5px;		
	float:left;	
	clear:both;	
	bottom:52px;
	left:80%;
	position:fixed;
	max-height:300px;
}
 #termContainer {
   	width:280px;
    background-color: #e6e6e6;
    border: 2px solid #4d4d4d;
    display: none;    
    resize:both;
	height:280px;
    z-index: 100;
    padding: 5px;
    border-radius: 5px;
	max-height:500px;
	float:left;	
	clear:both;		
	position:absolute;
}
#sideModal h3{
	font-size:medium;
	font-family: 'Lato', sans-serif;
	color: #0f0f0f;
}
#sideModalContent #conceptContainer {
    background: #fff;
    border-radius: 6px;
    padding: 0 10px;
    margin-top: 8px;
    border: 1px solid #000;
    height: auto;
	max-height: 250px;
	overflow-y:auto;
} 
	#termDef {
	 background-color: #fff;
	    float: left;
	    border: 1px solid #4d4d4d;
	    height: 110px !important;
	    overflow-y: auto;	
		margin: 2px 4px;
	    padding:6px;
		font-size:medium;
		width:90% !important;
	}
	#termDef p{
    	margin: 8px 0px 0px 0px;
}
	#pickTerm {
	    background-color: #fff;
	    float: left;
	    border: 1px solid #4d4d4d;
	    height: 90px !important;
		overflow-y: auto;
		margin: 10px 4px;
	    padding:6px;		       
		font-size:small !important;	
		width:90% !important;
        word-wrap: break-word;
    }
#termCTitle  h3 {
	font-size:large !important;
	margin-left:5px !important;
	font-family: 'Lato', sans-serif;
	color: #0f0f0f;
}
.termHead p{
	margin-left:4px;
}
.playAud{
	cursor:pointer;
	padding:15px 5px 0px 5px;
	float:left;
}
a.active, .keylink:hover  {
    cursor: pointer;
    background: #D5DFEF;
} 
.keylink {
    display: block;
    cursor: pointer;
    
}
    body {
		min-width: 320px;
		height:100%;
		overflow:hidden;
		font-family: 'Source Sans Pro', sans-serif;		
		font-weight:400;
	}
    #logo img {
        max-height: initial;
        height: 48px;
		margin:5px 6px;
    }
#closeTocBut {
    float: right;
    cursor: pointer;
    margin-top: 10px;
    margin-left: 20px;
}
#closeSideModal, #closeTermContainer {
    background: url(closeBut.png) no-repeat;
    cursor: pointer;
}
#closeSideModal, #closeTermContainer {
    float: right;
    cursor: pointer;
    padding: 12px;
}
li .pgName a {
    text-decoration: none;
    color: #444;
}
li .pgName:hover{
     background: #D5DFEF;
}
.pg {
    cursor: pointer;
    margin-left: 15px !important;
}
.pgName, .pgNum{
	font-size:12px;
}
.pgNum{
	float:right;
	margin-right:5px;
	
}
  #header {
        background: url(header1024.png) no-repeat;
        width: 100%;
        height: 56px;
        background-size: cover;
 }
    .container {
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	background-color: #4d4d4d;
    }
    #navBtns {
        position: absolute;
        right: 0;
    }
    #navBtns img {
        height: auto;
        width: 54px;
        margin-top: 0px;
        margin-right: 0px;
    }
    #additionalLinks { 	 
		float:left; 
        position:absolute;
        width: 32%; 
        min-height: 80px !important;
        margin:0 20px 0 40px;
        bottom: 56px;
        border: 1px solid #ccc; 
        border-radius: 5px; 
        height:18%;
        background: #fff;
        overflow-y: hidden;
		} 
    
 
    .page {
        border: none !important;
		height:auto;
    }
    .conceptBut {
        left: 0px;
		position:fixed;
		float:left;
		bottom:50px;
   }
#linksHeader {
    padding:12px 10px;
	background:url( linkList_header.png) left no-repeat;
	}
#linkList {
    padding: 10px;
    max-height: 70%;
   overflow-y: auto;
}
#linkList a {
    cursor: pointer;
    display: block;
    margin-bottom: 5px;
    margin-left: 10px;
    text-decoration: none;
	color:#439EFF !important;
	font-size:small !important;
	padding-left: 0.8em;
    text-indent:-0.8em;
}
div[type='audio'] img {
    width: 40px;
}
#sideBorder {
    display: none;
}
#closeTocBut {
    cursor: pointer;
	margin: 2px 0;
}
#toc h3 {
    margin-top: 5px;
	margin-left:5px;
	font-family: 'Lato', sans-serif;
	color: #0f0f0f;
}
#toc ul {
    list-style-type: none;
    margin-bottom: 100px;
}
#toc ul li {
    margin: 2px;
}
.pg {
    cursor: pointer;
    margin-left: 6px !important;
	font-weight: 600;
	
}
.checked {
    margin-left: -13px;
    margin-right: 3px;
}
.sub {
    margin-left: 12px !important;
	font-weight: 400;
}
.sub-sub {
    margin-left: 22px !important;
	font-weight: 300;
}
.keyAudio,
.keyTerm {
    color:#439EFF;
    text-decoration: none;
    cursor: pointer !important;
}
.keyTerm:hover{
	color:#2973B0;
}
#closeVideo {
	float:right;	
	cursor:pointer;
	margin-top:2px;
	margin-right:2px;
	padding:12px;	
	background:url(closeBut.png) no-repeat;
}
.keyConcept {
    margin: 15px 10px !important;
}
ul.normal li {
    height: auto !important;
    position: relative !important;
    margin-bottom: 15px !important;
}