@charset "utf-8";
/* CSS Document */

body{
	/* This clears up the worst of the iOS flickering */
	-webkit-backface-visibility:hidden;
	color: #000;
	font: normal 100% Georgia, "Times New Roman", Times, serif;
	clear: both;
}
body, html{
	
	width: 100%;
	height: 100%;
}
/** headers, paras, and more **/
h1, h2, h3, h4, h5, h6, hr, p, ol, ul{
	
	margin-left: 4.54545454545%;
	margin-right: 4.54545454545%;
	line-height: 1.5em;
}

.clearFix{
	
	clear:both;
	width: 100%;
	padding: 10px 0px;
}
#container{
	
	width: 100%;
	height: 100%;
	margin: 0px;
}

#notes_input{

	background: url(../Images/menu_bg.png) repeat #2A2B30;
	padding: 5px;
}
#notes_input p{

	margin: 0;
	text-align: right;
}
#notes_input #notes_text{

	padding: 5px;
	font: normal 100% Georgia, "Times New Roman", Times, serif;
}

/*** general ***/
#sideBar, #page_frame{

	height: 100%;
}
#page_frame_container{

	height:100%;
	padding-left: 26.54545454545455%;
}

#courseHeader{
	position: fixed;
	left: 26.54545454545455%;
	top: 0px;
	width: 100%;
	font: bold 1em "Arial Black", sans-serif;
	text-transform: uppercase;
	color: #000000;
	background: #FFCB05;
	padding: .25em 1em;
	margin:0;
	z-index:1;
}

/* below this width we fix the padding as we also fix the sidebar */
@media screen and (max-width:1062px) {
	#page_frame_container{

		padding-left:282px;
	}
	#courseHeader {

		left:282px;
	}
}

#page_frame{

	position:relative;
}

/*** sideBar ***/
#sideBar{

	display:none;
	z-index:99;
	position:fixed;
	top: 0px;
	left: 0px;
	min-width: 282px;
	width: 26.54545454545455%; /* 292px / 1100px */
	background: url(../Images/menu_bg.png) repeat-y #2A2B30;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
}
#sideBar img{
	
	padding: 0px 10px;
	display: block;
	clear: bottom;
}
/*** line below title in sidebar. ***/
#sideBar hr{
	
	border: 1px solid #111;
	position: relative;
	top: 10px;
	margin-bottom: 70px;
	clear: both;
	width: auto;
}

#sideBar form{
	
	position: absolute;
	clear: both;
	top: 138px;
	left: 10px;
	width: 80%;
	height: 27px;
	padding: 0px 20px;
	background: #141517;
	border: 1px solid #141517;
	border-radius:25px;
}
#sideBar input{
	
	width: 100%;
	color: #CCC;
	font-weight: bold;
	font-size: .75em;
	background: none;
	border: none;
	
}
#sideBar input:focus{
	
	outline: none;
	color: #FFF;	
}
#sideBar div.icon_bookmarks, #sideBar div.icon_toc, #sideBar div.icon_notes, #sideBar div.icon_glossary, #sideBar div.icon_comments{
	
	margin: 0px 10px;
	position: absolute;
	top: 180px;
	height: 27px;
	width: 27px;
	background-size: 100%;
	background-repeat: no-repeat;
	cursor: pointer;
}
#sideBar .icon_toc{

	left: 10px;
	background: url(../Images/icon_toc.png); 
}
#sideBar .icon_bookmarks{

	left: 47px;
	background: url(../Images/icon_bookmarks.png);
}

#sideBar .icon_notes{
	visibility: hidden;
	left: 94px;
	background: url(../Images/icon_notes.png);	
}

#sideBar .icon_glossary{
	left: 85px;
	/*left: 131px;*/
	background: url(../Images/icon_glossary.png);	
}

#sideBar .icon_comments{
    
	left: 131px;
	background: url(../Images/icon_comment.png);	
}


#sidebarTop{
	padding-top: 20px;
	height: 190px;
}

.menuIconExpand, .menuIconClose{

	width: 0px;
	height: 0px;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 300;
	opacity:0.7;
	background-size: cover !important;
	background-repeat: no-repeat;
}

#navContainer{
	
	background: #e7e7e7;
	border: 5px solid #000; /* 5px / 1100px */
	width: 100%; /* 292px / 1100px */
	height: 76%;
	padding: .171232876712329%;
	overflow-y: scroll;
	overflow-x: hidden;
	position: absolute;
	bottom: 0px;
	-webkit-overflow-scrolling:touch;
	overflow-scrolling:touch;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
button.unselectable { 
    
	-khtml-user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
}
div.navChapter, div.navItem {
	
	font: bold .75em Arial, Helvetica, sans-serif;
	width: 96.32352941176471%;
	padding: 5px;
}
div.navChapter{
	
	border-left: 5px solid #FFCB05;
	background: url(../Images/menu_bg.png) repeat-y;
	color: #FFF;
	padding-right: 0;
	margin-bottom: 3px;
	height: 35px;
	padding-top:19px;
}

#sideBar #navContainer .navChapter img{
	
	padding: 0px;	
}
div.navChapter p{
	
	float:left;
	text-align:left;
	font-size: 1.25em !important;
}
div.navChapter:hover{
	
	background: #222;
}
div.navItem, div.navPage {
	
	color: #404040;
	border-bottom: 1px solid #e7e7e7;
	background: #FFF;
	cursor: pointer;
}
div.navItem:hover, div.navPage:hover{
	
	background: #e7e7e7;	
}
#sideBar .navItem.bookmark img, #sideBar .navItem.note img{

	margin: 0px;
	padding: 0px 0px 0px 3px;
	float: right;
}
div.navPagelist {
	display: none;
	padding-left: 5px;
}
div.navPage {
	font: .75em Arial, Helvetica, sans-serif;
	width: 96.32352941176471%;
	padding: 5px;
}
div.navPageSelected {
	
	background: #e7e7e7;
}
#containerNotes{
	color: #333;
	font: .75em Arial, Helvetica, sans-serif;	
}
#message {
	
	display: none;
	position: absolute;
	text-align: center;
	padding: 10px;
	width: 120px;
	background: black;
	color: white;
	font-weight: bold;
}
div .searchResults {
	color: #000000;
	padding: 5px;
	font-size: .75em;
	border-bottom: medium inset;
}
h1.sectionHeader{
	
	padding-top: 40px;
	font: normal 2.75em "Arial"; /*16px / 44px */
	color: #005835;
}
h3.bookTitle{
	
	color: #F4F4F4;
	font-weight: bold;
	font-size: .9em;	
}
h4.chapterTitle{
	
	color: #BBB;
	font-weight: bold;
	font-size: .75em;
}

/**** responsive css ****/

@media screen and (min-width: 801px){
	#sideBar{

		display:block;
	}
}

/*** ipad (in portrait) and under ***/
@media screen and (width: 1024px){

	#sideBar{
	
		padding-bottom: 0px;
		overflow-y:scroll;
	}
	#navContainer{
		
		height: auto;
		max-height: 68%;
	}
}
/* @media screen and (max-device-width: 1024px)*/
@media screen and (max-width: 800px){

	#sidebarTop{
	
		height: 125px; 
	}
	#sideBar h3, #sideBar h4,	#sideBar img, #sideBar hr, .navChapter img{
	
		display: none;
	}
	#sideBar{
	
		padding-top: 10px;
		display: none;
	}
	#sideBar div.icon_bookmarks,
	#sideBar div.icon_toc,
	#sideBar div.icon_notes,
	#sideBar div.icon_glossary {
	
		top: 54px;
		height: 54px;
		width: 54px;
		margin-left: 20px;
	}
	#sideBar .icon_toc{
	
		left: 0px;
	}
	#sideBar .icon_bookmarks{
	
		left: 64px;
	}
	#sideBar .icon_notes{
		visibility: hidden;
		left: 128px;
	}
	#sideBar .icon_glossary{

		/*left: 196px;*/
		left: 128px;
	}
	#sideBar form{
	
		top: 10px;
		left: 10px;
		width: 217px;
	}
	#navContainer{

		top: 130px;
		padding-top: 0;
		padding-bottom: 0;
		overflow-y:scroll;
	}
	div.navChapter p{
	
		float: none;
		text-align: left;
	}
	#page_frame_wrapper,
	#courseHeader{
		
		left: 0px;
	}
	#page_frame_container{

		padding-left:0px;
	}
	.menuIconExpand {

		height:45px;
		width:45px;
		background: url(../Images/menuIcon.png);
	}
	
	.menuIconClose {
z-index:9999;
		height:45px;
		width:45px;
		background: url(../Images/closeMenuIcon.png);
	}
}

@media screen and (max-device-width: 400px) and (orientation:portrait) {

	.menuIconExpand {

		background: url(../Images/menuIcon.png);
	}
	
	.menuIconClose {

		background: url(../Images/closeMenuIcon.png);
	}
	
	#sideBar {

		display:none;
	}
}


@media screen and (max-device-width: 640px)  and (orientation:landscape){

	#sideBar {
		display:none;
		z-index: 99;
	}
	#page_frame_wrapper{
		
		left: 0px;
	}
	.menuIconExpand {

		background: url(../Images/menuIcon.png);
	}
	
	.menuIconClose {

		background: url(../Images/closeMenuIcon.png);
	}
}
@media screen and (max-width: 320px){

	#courseHeader,
	.hide{

		display:none;
	}
}

@media screen and (max-device-width: 800px){

	div.navItem:hover, div.navPage:hover{
     
		background: none;
	}
}
@media screen and (max-device-width: 1280px){
	
	div.navItem:hover, div.navPage:hover{
     
		background: none;
	}
}