@charset "UTF-8";
/* MAIN */

/* PAGE LAYOUT */

* {
	box-sizing: border-box;
}

html, body {
	min-height: 100vh;
	position: relative;
}

body {
	text-align: center;
	width: 100%;
	padding: 0;
	background-color: #555555;
	min-height: 100vh;
	margin: 0 auto;
	position: relative;
}

.main-container {
 min-height: 100vh;
 overflow: hidden;
 display: block;
 position: relative;
}

#wrapper {
	max-width: 100%;
	min-width: 360px;
	margin: 90px auto;
	position: relative;
}

.main {
	width: 80%;
	position: relative;
	margin: 30px auto;
}

.subSection {
	padding-top:30px;
	}

.main h1 {
	width: 100%;
	margin: 0 0 0 0;
	border-radius: 10px 10px 0px 0px;
	text-align:left;
}

.main h2 {
	width: 100%;
	margin: 0 0 0 0;
	border-radius: 10px 10px 0px 0px;
	text-align: left;
}

.main h3 {
	width: 100%;
	margin: 0 0 0 0;
	padding: 0;
}

.main h4 {
	width: 100%;
	margin: 0 0 0 0;
	padding: 0;
}

.main p {
	width: 100%;
	margin: 0 0 0 0;
	border-radius: 0px 0px 0px 0px;
}

.main ul {
	width: 100%;
	margin: 0 0 0 0;
	border-radius: 0px 0px 0px 0px;
}

.main li {
	width: calc(100% - 30px);
}

.noBullet ul {
	list-style: none; 
}

.noBullet li {
	list-style: none; 
	margin-left: 30px;
}

.noBullet li:before {    
    font-family: 'FontAwesome';
    content: '\f105';
	color: #555555;
	margin-left:-30px;
	padding-right: 21px;
}

.main p.end {
	width: 100%;
	margin: 0px 0px 0px 0px;
	border-radius: 0px 0px 10px 10px;
}

.fa-angle-right {
	vertical-align: middle;
	display: inline-block;
	position: relative;
	font-size: 35px;
	padding: 0px 20px 0px 0px;	
}

/* PAGE LAYOUT */ 

.subLayout {
	width: 100%;
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	-moz-align-items: top;
	-webkit-align-items: top;
	-ms-align-items: top;
	align-items: top;
	flex-flow: row;
	background-color: #eeeeee;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	overflow: none;
	padding-bottom: 30px;
	text-align: left;
}

.content {
	width: 60%;
	text-align: left;
}

.content .noImage {
	width: 100%;
	text-align: left;
}

.noImage {
	width: 100%;
	text-align: left;
}

.poster {
	width: 40%;
	margin: 30px 30px 0px 30px;
}

.poster img {
	width: 100%;
	border-radius: 10px;
}




/* START PAGE */

.verticalContainer {
	width: 100%;
	text-align: center;
	margin-top: 15%;
	margin-bottom: 15%;
	top: 0;
	left: 0;
}

.courseTitle {
	text-align: center;
	box-sizing: border-box;
}

.courseTitle h1 {
	margin-top: 20px;
	margin-left: 30px;
	margin-right: 30px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 500;
}

.courseSubtitle {
	text-align: center;
	box-sizing: border-box;
}

.courseSubtitle h2 {
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 500;
	margin-top: 20px;
	margin-left: 30px;
	margin-right: 30px;
}

.startBtn {
	text-align: center;
	box-sizing: border-box;
	display: inline-block;
	margin-top: 15px;
	padding: 15px 30px 15px 30px;
	border-radius: 10px 10px 10px 10px;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 500;
	cursor:pointer;
}



/* BLOCK LAYOUTS */

.blockArray {
  display: flex;
  width: 100%;
  flex-flow: row wrap;
  justify-content: center;
 padding: 30px 30px 0px 30px;
  
}

.block3 {
  width: 30%;
  height: auto;
  text-align: center;
	padding: 0px 0px 30px 0px;
	margin-right:30px;
}

.blockArray img {
	width: 100%;
}

.block2 {
  width: 40%;
  height: auto;
  text-align: center;
	padding: 0px 0px 30px 0px;
}


.block4 {
  width: 20%;
  height: auto;
  text-align: center;
	padding: 0px 0px 30px 0px;
}


.block2 p {
	text-align: center;
}

.block3 p {
	text-align: center;
}

.block4 p {
	text-align: center;
}






/* END OF COURSE QUIZ */

.startQuiz a {
	width: 100%;
	margin: 0 0 0 0;
	border-radius: 10px 10px 10px 10px;
	text-align: center;
	box-sizing: border-box;
	color: #FFFFFF;
	background-color: #0072CE;
}

.submitBtn {
	text-align: left;
	margin: 30px 30px 10px 30px;
	cursor: pointer; 
}

.submitBtn a {
	width: 100%;
	margin: 0 0 0 0;
	border-radius: 10px 10px 10px 10px;
	text-align: center;
	box-sizing: border-box;
	color: #FFFFFF;
	background-color: #0072CE;
	padding: 10px 30px 10px 30px;
	font-weight: 700;
}

.retryBtn {
	text-align: left;
	margin: 30px 30px 10px 30px;
	cursor: pointer; 
}

.retryBtn a {
	width: 100%;
	margin: 0 0 0 0;
	border-radius: 10px 10px 10px 10px;
	text-align: center;
	box-sizing: border-box;
	color: #FFFFFF;
	background-color: #0072CE;
	padding: 13px 30px 10px 30px;
	font-weight: 700;
}

.closeCourseBtn {
	text-align: left;
	margin: 30px 30px 10px 30px;
	cursor: pointer; 
}

.closeCourseBtn a {
	width: 100%;
	margin: 0 0 0 0;
	border-radius: 10px 10px 10px 10px;
	text-align: center;
	box-sizing: border-box;
	color: #FFFFFF;
	background-color: #0072CE;
	padding: 13px 30px 10px 30px;
	font-weight: 700;
}


.feedback {
	width: 100%;
	margin: 0 0 0 0;
	border-radius: 0px 0px 0px 0px;
	text-align: left;
	box-sizing: border-box;
	color: #333333;
	font-weight: 700;
	padding: 30px 30px 0px 30px;
}

.feedback1 {
	padding: 30px 30px 0px 30px;
}

.marker {
	text-align:left;
	padding: 30px 30px 0px 30px;
}

.answerOption{
	
}

.inline-field input,
.inline-field label {
	display: inline-block;
	margin-bottom: 0;
	width:80%;
	vertical-align: bottom;
}

label {
	cursor:pointer;
}

.noPad {
	padding-top: 0px !important;
}

/*ADDITIONS for CONFLICT RESOLUTION*/

.main table {
	width: 100%;
	margin: 0 0 0 0;
	padding: 30px 30px 0px 30px;
	border-radius: 0px 0px 0px 0px;
	border-spacing: 2px;
	/*border-collapse: collapse;*/
}

.main th {
	margin: 0 0 0 0;
	padding: 15px 30px 15px 30px;
	border-radius: 0px 0px 0px 0px;
	background-color: #333333;
	color: #eeeeee;
}

.THsmall {
	width:15%;
}


.main tr {
	margin: 0 0 0 0;
	padding: 10px 30px 10px 30px;
	/*border:1px solid #333333;*/
	border-radius: 0px 0px 0px 0px;
}

.main td {
	margin: 0 0 0 0;
	padding: 10px 30px 10px 30px;
	border-radius: 0px 0px 0px 0px;
	background-color: #dddddd;
	color: #333333;
	vertical-align: top;
	
}

.tableSmall{
	width: 25%!important;
}

.tableMedium{
	width: 50%!important;
}

.imgInText {
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 30px;
}

.imgInText img{
	/*width: 50%; DEFINED IN HTML*/
	height: auto;
}


#recordCompletion {
	text-align: center;
}

#recordCompletion .submitBtn {
	text-align: center;
}