.text-center {
	text-align: center;
}
.text-white {
	color: white;
}
.img-center-shrink {
	max-height: 150px;
	margin: 0 auto;
	text-align: center;
}
.page-content {
	position: relative;
}

.fancyul ul {
	list-style-type: none;
	padding-left: 4px;
	color: white;
	
}

.fancyul ul li {
	padding: 4px 8px;
	border: solid 1px #323232;
}
.page-content nav {
	margin-left: -15px;
	margin-right: -15px;
}

.content-body h1 {
	color: white;
	text-align: center;
	margin-top: 20px;
}


.content-body h4 {
	color: white;
	margin-top: 40px;
}
.content-body h5 { 
	color: white;
}

ul.steps {
	list-style-type: none;
}

ul.steps li {
	margin-bottom: 10px;
}

li.step-block {
	border: solid 1px #323232;
	padding: 4px 8px;
	background-color: #857DB1;
}
div.p-num {
	min-height: 60px;
	border: solid 1px black;
}
div.p-num p {
	text-indent: 0px;
}
div.p1 {
	background-color: #000;
}
div.ch3p1 {
	background-color: #323232;
}
div.p2 {
	background-color: #35466D;
}
div.ch3p2 {
	background-color: #765500;
}
div.p3 {
	background-color: #4F5F84;
}
div.ch3p3 {
	background-color: #DDB858;
}
div.p4 {
	background-color: #7683A0;
}
div.ch3p4 {
	background-color: #FFDF8F;
}
div.p5 {
	background-color: #FFF;
	color: #000;
}
div.p5 p {
	color: #000;
}
li.step-block-finished {
	background-color: #96D38d;
}
.ul-links {
	list-style-type: none;
}
.ul-links li{
	height: 50px;
}
.center-ul {
	list-style-position: inside;
	list-style-type: square;
}
.center-ul li {
	margin-bottom: 25px;
}
.small-heading {
	font-size: 15px;
}
.x-margin-top-10 {
	margin-top: 10px;
}
.shadow-it {
	text-shadow: 2px 2px 3px #323232;
}
.aspect-ratio {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 60%;
}
.aspect-ratio iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0; top: 0;
}
.content-body h1.chapter-number {
	margin-top: -20px;
}

ul.toc h1.chapter-number {
	margin-top: -10px;
	margin-right: 25px;
	
}

ul.toc > li > a {
	text-decoration: none;
}

.chapter-number {
	margin-left: -15px;
	float: left;
	background-color: green;
	padding: 10px 18px;
	border-bottom-right-radius: 25px;
	box-shadow: 4px 4px 8px #323232;
	background: linear-gradient(
	  to bottom,
	  #5d9634,
	  #5d9634 50%,
	  #538c2b 50%,
	  #538c2b
	);
}
ul.toc h1.appendix-number {
	float: left;
	margin-top: -10px;
	margin-left: -15px;
	margin-right: 25px;
	background-color: green;
	padding: 10px 18px;
	border-bottom-right-radius: 25px;
	box-shadow: 4px 4px 8px #323232;
}
.toc .card p {
	height: inherit;
}
hr.toc {
	border-top: solid 2px white;
	max-width: 350px;
	margin-left: auto;
	margin-right: auto;
}
ul.toc { 
	margin-left: 0px;
	list-style-type: none; 
}
.page-content nav {
	background-color: #0F083B!important;
}

ul.toc li {
	font-size: 14pt;
}

ul.toc > li p {
	font-size: 10pt;
	margin-top: 8px;
}

.chapter-change {
	color: white;
	
}
.chapter-change h4 {
	margin-top: 10px;
	font-size: 14pt;
	text-align: left;
	font-variant: small-caps;
	text-shadow: 2px 2px #0F083B;
}

.content-body > header > h1 {
	text-shadow: 4px 4px 5px #0F083B;
}

.card-apendix {
	background-color: #B0DF95;
	color: black;
}

.card-apendix h4 {
	color: black;
	text-shadow: 2px 2px #FFFFFF;
}

.page-content .dropdown-menu {
	background-color: #857DB1;
	border: solid 2px white;
}

.page-content .dropdown-menu a {
	<!--max-width: 400px;-->
	
	white-space: pre-wrap; /* CSS3 */    
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */    
	white-space: -o-pre-wrap; /* Opera 7 */   
	word-wrap: break-word;
	
}
.content-body figure.float-right {
	float: right;
	margin-left: 20px;
}
.content-body figcaption {
	text-align: right;
	font-style: italic;
	color: #857DB1;
}
.content-body figure img {
	border: 2px double #857DB1;
}
.small-caps {
	font-variant: small-caps;
}

.page p {
	color: white;
	text-indent: 50px;
	text-align: justify;
}
.page {
	padding-top: 12px;
	min-height: 100%;
}
.page-number-container {
	font-size: 20px;
	background-color: green;
    padding: 10px 18px;
    border-bottom-left-radius: 25px;
    box-shadow: -4px 4px 8px #323232;
    background: linear-gradient( to bottom, #9C344C, #9C344C 50%, #75142A 50%, #75142A );
	float: right; 
	margin: 5px;
	margin-top: -136px;
	margin-right: -15px;
	z-index: 10;
	text-shadow: 4px 4px 5px #0F083B;
	color: white;
}

img.img-white {
	background-color: white;
	border-radius: 25%;
	padding: 8px;
	margin-bottom: 18px;
	margin-top: 10px;
}

img.img-white-wide {
	background-color: white;
	border-radius: 25px;
	padding: 8px;
	margin-bottom: 18px;
	margin-top: 10px;
}

img.img-center {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

img.img-case-study {
	margin-bottom: 20px;
}

.page p.no-indent {
	text-indent: 0px;
}

ul.page-numbers {
	float: right;
	
	margin: 8px;
	list-style-type: none;
	text-align: center;
}

ul.page-numbers {
	clear: both;
}
.clear-both {
	clear:both;
}

ul.page-numbers li {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	text-align: center;
	padding: 4px 8px;
	background-color: #857DB1; 
}

ul.page-numbers li.active {
	background-color: #96D38D;
	
}
.page-numbers a.page-button:link, .page-numbers a.page-button:visited {
	text-decoration: none;
	color: white;
	font-weight: bold;
}

.page-numbers a.page-button:active, .page-numbers a.page-button:hover {
	color: black;
}	
.max-480px {
	max-width: 480px;
}
.no-float {
	float: none!important;
}
.float-left {
	float: left!important;
}
.npm-code {
	color: white;
	background-color: #323232;
	padding: 8px 16px 12px 16px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.npm-prefix {
	font-variant: small-caps;
	color: white;
	background-color: #857DB1;
	padding: 8px 16px 12px 16px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.page-actions {
	margin-top: 20px;
	background-color: #0F083B;
	color: white; 
	float: right;
	padding: 10px 20px;
}

.page-actions ol, .page-actions ul {
	list-style-position: inside;
}
.page-actions ul {
	list-style-type: square;
}
.page-actions .screenshot {
	width: 100%;
	text-align: right;
	color: red;
	font-variant: small-caps;
}

ul.toc div {
	cursor: pointer;
}

h4.reduce-top-mp {
	margin-top: 25px;
}

.split-col-2 {
	column-count: 2;
	column-gap: 30px;
	column-rule: solid 1px #323232;
}

.tight {
	margin-top:0px !important;
}

.case-study {
	border: solid 1px #323232;
	padding: 8px 16px;
	background: linear-gradient(
	  to bottom,
	  #5d9634,
	  #5d9634 50%,
	  #538c2b 50%,
	  #538c2b
	);
	box-shadow: 3px 3px 6px #323232;
}

.choices-3 div {
	padding-top: 10px;
	font-weight: bold;
	color: white;
	background-color: #5C5393;
	border-radius: 8px;
	border: double 2px #323232;
	font-variant: small-caps;
	padding-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	max-width:30%;
}

.choices-2 div {
	padding-top: 10px;
	font-weight: bold;
	color: white;
	background-color: #5C5393;
	border-radius: 8px;
	border: double 2px #323232;
	font-variant: small-caps;
	padding-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	max-width:48%;
}

div.step-p {
	font-size: 14px;
	color: white;
	max-height: 120px;
	overflow-y: scroll;
	margin-top: 12px;
}

.action-steps h5 {
	margin-top: 20px;
}

.chapter-discussion p {
	background-color: #4E0012;
	padding: 12px 20px;
	border: solid 1px #323232;
	box-shadow: 3px 3px 6px #323232;
	border-top: solid 1px #4E0012;
}

.chapter-discussion h5 {
	margin-bottom: 0px;
	border: solid 1px #323232;
	border-bottom: solid 1px #4E0012;
	padding: 8px 16px;
	background: linear-gradient(
	  to bottom,
	  #9C344C,
	  #9C344C 50%,
	  #75142A 50%,
	  #75142A
	);
	box-shadow: 3px 3px 6px #323232;
}

.chapter-caseStudy p {
	background-color: #1C4A00;
	padding: 12px 20px;
	border: solid 1px #323232;
	box-shadow: 3px 3px 6px #323232;
	border-top: solid 1px #1C4A00;
}

.chapter-caseStudy h5 {
	margin-bottom: 0px;
	border: solid 1px #323232;
	border-bottom: solid 1px #1C4A00;
	padding: 8px 16px;
	background: linear-gradient(
	  to bottom,
	  #569532,
	  #569532 50%,
	  #357013 50%,
	  #357013
	);
	box-shadow: 3px 3px 6px #323232;
}

.chapter-practice h5 {
	margin-bottom: 0px;
	border: solid 1px #323232;
	border-bottom: solid 1px #0F083B;
	padding: 8px 16px;
	background: linear-gradient(
	  to bottom,
	  #3B3176,
	  #3B3176 50%,
	  #211858 50%,
	  #211858
	);
	box-shadow: 3px 3px 6px #323232;
}

.chapter-practice p {
	background-color: #0F083B;
	padding: 12px 20px;
	border: solid 1px #323232;
	box-shadow: 3px 3px 6px #323232;
	border-top: solid 1px #0F083B;
	color: white;
}

.chapter-assignment > div {
	background-color: #554300;
	padding: 12px 20px;
	border: solid 1px #323232;
	box-shadow: 3px 3px 6px #323232;
	border-top: solid 1px #554300;
	color: white;
}

.chapter-assignment ul {
	list-style-type: none;
}

.chapter-assignment h5 {
	margin-bottom: 0px;
	border: solid 1px #323232;
	border-bottom: solid 1px #554300;
	padding: 8px 16px;
	background: linear-gradient(
	  to bottom,
	  #AA9239,
	  #AA9239 50%,
	  #806915 50%,
	  #806915
	);
	box-shadow: 3px 3px 6px #323232;
}
.theElements {
	color: white;
}

.theElements div {
	margin-bottom: 25px;
	background-color: #3B3176;
	padding: 8px 16px;
}
.theElements table {
	color: white;
}
.box-it {
	width: 42%; 
	margin-top: 20px;
	background-color: #0F083B;
	color: white; 
	padding: 10px 20px;
}
.css-box {
	margin-top: 20px;
	background-color: #0F083B;
	color: white; 
	padding: 10px 20px;
}

.css-box li {
	list-style-position: inside;
	list-style-type: square;
}

.box-it li {
	list-style-position: inside;
	list-style-type: square;
}

h4.element-heading, h5.element-heading {
	color: white;
	font-weight: bold;
	padding: 8px 20px;
	background: linear-gradient(
	  to bottom,
	  #211858,
	  #211858 50%,
	  #0F083B 50%,
	  #0F083B
	);
	margin-bottom: 0px;
}

.code-block { 
	background-color: #323232;
	padding: 10px 10px;
	width: 100%; 
	border: solid 4px white;
}
code.code-block {
	break-inside: avoid-column;
	display: block;
	margin-top: 20px!important;
	margin-bottom: 20px!important;
	color: lightBlue!important;
	text-indent: 0px!important;
}

.code-block pre { 
	color: white;
}

@media only screen and (max-width: 480px) {
	.choices-3 div {
		max-width: 80%;
		margin-bottom: 10px;
	}
	.page-content .dropdown-menu a {
		max-width: 400px;
		white-space: pre-wrap; /* CSS3 */    
		white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
		white-space: -pre-wrap; /* Opera 4-6 */    
		white-space: -o-pre-wrap; /* Opera 7 */   
		word-wrap: break-word;
	}

	.content-body > header > h1 {
		font-size: 20px;
		text-align: left;
	}
	.max-480px {
		width: 100%;
	}

	.split-col-2 {
		columns: 1;
	}

	.page-number-container {
		margin-top: -90px;
	}
}