html, body { margin:0; padding:0; font-family:'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
			 font-size:12px; line-height:14px; color:#cacaca; background-color:#737477; width:100%; }
body { margin:0 auto; }

h1, h2, h3, h4 { font-weight:400; color:#fff; margin-top:0; }
h1 { font-size:18px; line-height:20px; }
h2 { font-size:15px; line-height:17px; }
h3 { font-size:14px; line-height:16px; }
h4 { font-size:13px; line-height:15px; }

a:link { text-decoration:underline; color:#666; }
a:visited { color:#2C72B5; text-decoration:underline; }
a:hover { text-decoration:none; color:#666; }
a:active { text-decoration:none; color:#000; }

p { color:#444; margin:0; padding-bottom:1em; }

.error { color:#ec3330; }
.hidden { opacity:0; filter:alpha(opacity=0); }
.unselectable { -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none;
				-o-user-select:none; user-select:none;
}

#center {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 660px;
}

#head { width:990px; height:32px; padding:14px 0; margin:auto;
		background:#000 url(../images/bg_header.png) top left no-repeat; position:relative; }
#body { width:100%; position:relative; }
#footer { width:990px; height:60px; margin:0 auto;
		  background:#000 url(../images/bg_footer.png) top left no-repeat; position:relative; }

#menu { overflow:hidden; margin:0 auto; padding:0 20px; }
#menu .left { float:left; }
#menu .right { float:right; }
#menu .right .nav { float:left; margin-right:15px; }
#menu .right .nav .button { margin-left:15px; padding-left:15px; border-left:1px solid #323232; }
#menu .right .nav .button.toc.active img,
#menu .right .nav .button.toc.active span { opacity:0.2; filter:alpha(opacity=20); }
#menu .right img { float:left; margin:0 8px 0 0; border:none; outline:none; }
#menu a { color:#cacaca; text-decoration:none; }
#menu .indicator { border-left:1px solid #323232; }

#menu .progress { padding-left:15px; margin-left:15px; border-left:1px solid #323232; }
#menu .progress .bar { width:100px; height:22px; background-color: #101010;
				       background-image: linear-gradient(top, rgb(16,16,16) 0%, rgb(41,41,41) 100%);
					   background-image: -o-linear-gradient(top, rgb(16,16,16) 0%, rgb(41,41,41) 100%);
					   background-image: -moz-linear-gradient(top, rgb(16,16,16) 0%, rgb(41,41,41) 100%);
					   background-image: -webkit-linear-gradient(top, rgb(16,16,16) 0%, rgb(41,41,41) 100%);
					   background-image: -ms-linear-gradient(top, rgb(16,16,16) 0%, rgb(41,41,41) 100%);
					   background-image: -webkit-gradient(linear,
														  left top,
														  left bottom,
														  color-stop(0, rgb(16,16,16)),
														  color-stop(1, rgb(41,41,41))
					   ); margin-top:5px;
				       -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; position:relative; }
#menu .progress .bar .fill { background-color: #787c81;
							 background-image: linear-gradient(top, rgb(120,124,129) 0%, rgb(87,90,96) 100%);
							 background-image: -o-linear-gradient(top, rgb(120,124,129) 0%, rgb(87,90,96) 100%);
							 background-image: -moz-linear-gradient(top, rgb(120,124,129) 0%, rgb(87,90,96) 100%);
							 background-image: -webkit-linear-gradient(top, rgb(120,124,129) 0%, rgb(87,90,96) 100%);
							 background-image: -ms-linear-gradient(top, rgb(120,124,129) 0%, rgb(87,90,96) 100%);
							 background-image: -webkit-gradient(linear,
																left top,
																left bottom,
																color-stop(0, rgb(120,124,129)),
																color-stop(1, rgb(87,90,96))
							 );
					         -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; color: #FFFFFF; width:0; height:22px;
					         position:absolute; top:0; left:0; transition: width 1s ease-in-out;
					         -webkit-transition: width 1s ease-in-out; }
#menu .progress .bar .percent { text-align:center; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); width:100px;
						        position:absolute; top:0; left:0; line-height:20px; }

#menu .title { overflow:hidden; font-size:18px; color:#FFF; line-height:28px; }
#menu .button,
#menu span,
#menu .progress,
#menu .indicator { display:block; float:left; height:32px; line-height:30px; }
#menu .indicator .bar { width:50px; height:15px; }
#menu .indicator.disabled,
#menu .button.disabled { visibility:hidden; }
#menu .button .close span { padding:0 50px 0 33px; margin-right:100px;
							background:transparent url(../images/icon_close.png) 14px 16px no-repeat; }
#menu .button.arrow { width:30px; background:transparent left top no-repeat; }
#menu .button.arrow.prev { width:35px; margin-right:5px; background:transparent url(../images/btn_left.png) 0 -2px no-repeat; }
#menu .button.arrow.next { background:transparent url(../images/btn_right.png) 0 -2px no-repeat; }
#menu .button.arrow.disabled { visibility:visible; cursor:default; opacity:0.2; filter:alpha(opacity=20); }
#menu .indicator { padding:0 15px; }
#menu .indicator strong,
#menu .indicator em { font-style:normal; font-weight:400; color:#ededed; padding:0 5px;}
#menu .indicator em { padding-right:0; }

#content { width:990px; margin:0 auto; height:540px; background-color:#262626; position:relative; overflow:hidden; }
.screen { position:absolute; top:0; left:0; overflow:hidden; width:990px; background-color:#262626; color:#555; height:540px; font-weight:300; line-height:18px; font-size:14px; }
.wrapper { padding:20px 20px 0 20px; }

#toc { float:left; width:auto; left:auto; right:20px; position:absolute; background-color:#2f2f2f; height:540px;
	   -moz-box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
	   box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.3);
	   z-index:3; opacity:0.97; filter:alpha(opacity=97); }
#toc .wrapper { padding:20px; float:left; }
#toc h1 { font-size:16px; line-height:16px; border-bottom: 1px solid #444; padding-bottom:10px; }
#toc .button.close { position:absolute; top:12px; right:20px; }
#toc .button.close img { border:none; }
#toc .pages { float:left; }
#toc .pages ul { float:left; margin:0; }
#toc ul { list-style:none; padding-left:0; margin-left:0; }
#toc ul li { padding:0 25px; margin-bottom:0.5em; max-width:130px; }
#toc ul li a { text-decoration:none; color:#aaa; }
#toc ul li a:hover { color:#ddd; }
#toc ul li.complete { background:transparent url(../images/icon_completed.png) 0 4px no-repeat; }
#toc ul li.disabled a { color:#444; cursor:default; }
#toc ul li.active a { color:#fff; cursor:default; }

#quiz .box { padding:12px; background-color:#FAFAFA; border:1px solid #D5D5D5; -webkit-border-radius:6px; -moz-border-radius:6px; border-radius:6px; }
#quiz .box p:last-child { padding:0; }
#quiz .box h2 { color: #555; font-size:18px; margin-bottom:10px; }
#quiz a.button { display:block; float:left; color:#fff; padding:1px 6px; cursor:pointer; text-decoration:none; background-color:#dd364f; font-size:14px; line-height:28px; height:28px; margin-top:15px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; font-weight:400; }
#quiz a.button:hover { background-position:0 -25px; }
#quiz a.button:active { background-position:0 -50px; }
#quiz a.button.next { float:right; }
#quiz a.button.disabled { cursor:default; opacity:0.2; filter:alpha(opacity=20); }
#quiz a.button.reveal { margin-left:15px; }
#quiz .box + a.button.reveal { margin-left:0px; }
#quiz table.quiz { width:100%; border:1px solid #D5D5D5; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; }
#quiz table.quiz tr.question { background-color:#EFEFEF; }
#quiz table.quiz tr.question td { padding:12px 200px 12px 12px; border-bottom:1px solid #D5D5D5; }
#quiz table.quiz.mode_quiz tr.answer { cursor:pointer; }
#quiz table.quiz tr.answer.odd { background-color:#F5F5F5; }
#quiz table.quiz tr.answer.even { background-color:#F0F0F0; }
#quiz table.quiz tr.answer .mark { padding:8px 10px; width:15px; }
#quiz table.quiz tr.answer .mark input { margin:0; }
#quiz table.quiz tr.answer .label { padding:12px 150px 12px 12px; border-left:1px solid #D5D5D5; }
#quiz table.quiz tr.answer .correct { width:35px; }
#quiz table.quiz tr.answer .selected { width:35px; border-left:1px solid #D5D5D5; }

#quiz .button.next.saving {
  padding-right: 30px;
  background-image: url('./../images/oval.svg');
  background-size: 15px 15px;
  background-repeat: no-repeat;
  background-position: 85% center;
}