<style>

html {
	 text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
		text-rendering: optimizeLegibility !important;
		-webkit-font-smoothing: antialiased !important;

}

body {
	background: #fafafa;
	margin:0px;
	padding: 0px;
	font-family:'Lato', Helvetica Neue, Sans-serif;
}

a,
a:visited,
a:focus,
a:active {
	color:#4AA4BC;
	text-decoration: none;
	font-weight: 400;
}

a:hover {
	color:#51B1CB;
}

ul li {
	padding: 10px 0px;
}

.n-font {
	font-family: 'Montserrat';
}

#top_bar {
	width:100%;
	background: transparent;
	padding: 10px 0px;
	text-align: right;
}

#side_bar {
	position: fixed;
	left: 0px;
	top: 0px;
	padding:0px 1px;
	background: #2c3136;
	height: 100%;
	color:#BCC7D8;
	width: 280px;
	z-index: 9;
}


  #side_bar_toggle {
    position: fixed;
    color:#8D939A;
    z-index: 9999;
    cursor: pointer;
    padding:15px;
  	top:10px;
  	left:10px;
  	background: rgb(41, 46, 51);

  }

  .side_bar_closed {
    left:-280px!important;
  }

  .section_open {
    padding-left:340px!important;
    padding-right: 30px;
  }


  #side_bar {
    -moz-transition: all ease .7s;
    -o-transition: all ease .7s;
    -ms-transition: all ease .7s;
    -webkit-transition: all ease .7s;
    transition: all ease .7s;
  }

  .side_bar_toggle_scrolled {

  }


#content {
	padding-left:280px;
}

#side_bar_logo {
	display: block;
	text-align: center;
	font-size: 120%;
	padding:15px;
	/*background: #4D555D;*/
	color:#EFF3F2;
}

#side_bar ul {
	list-style: none;
	padding:0px;
	margin: 0px;
}

#side_bar ul li {
	position:relative;
	padding: inherit;
}

#side_bar ul li a {
	display: block;
	padding: 18px 30px;
	font-size: 90%;
	text-align: left;
	border-bottom:1px solid #373d44;
	overflow: hidden;
	white-space: nowrap;
	/*color:#BCC7D8;*/
	/*color:#97A0AD;*/
	color: rgba(230, 230, 230, 0.81);
}



#side_bar ul li ul {
	position: absolute;
	top:0px;
	left:100%;
	display: none;
}

#side_bar ul li ul li {
	background: #2c3136;
}



#side_bar ul li:hover {
	background: #33383e;
}

#menu_list li:hover > ul {
	display: block;
}




#side_bar ul li.selected {
box-shadow: inset 3px 0 0; /*	#36C7BA; */
    background-color: #33383e;
}

.selected .chapter_link,
.selected .selected .section_link,
.selected .selected .selected .subsection_link {
  color: rgb(232, 232, 232)!important;
}

h1, h2, h3, h4 {
	font-weight: 400;
	color:black;
}


p {
	color:#272727;
	font-weight: 400;
	line-height: 28px;
}

h1 {
	
}


h2 {
	margin: 90px 0px 30px 0px;
}

h3 {
	margin: 70px 0px 20px 0px;
}

#cover {
	padding:80px 15% 100px 15%;
	text-align: right;
	font-weight: 300;
	/*background: #384B54;*/
	background: #41464c;

}

#title {
		color:white;
		font-size: 500%;
		font-weight: 600;
		opacity: .9;
}

#title2 {
		color: rgba(249, 249, 249, 0.29);
		font-size: 50px;
		text-transform: uppercase;
		font-weight: bold;
		margin-top: -50px;
		margin-bottom: 0px;
}
#revision_number {
	margin:0px;
	margin-top: -5px;
	color:#293038;
	opacity: .7;
	color: rgba(255, 255, 255, 0.4);
}

.goog-te-gadget-simple {
    background: #EFF0F3!important;
    border: 0px!important;
    padding: 8px!important;
    border-radius: 3px!important;
}

.manual_button,
.manual_button:active,
.manual_button:focus {
		background: transparent;
		border: 1px solid #14a29d;
		color:#33383E;
		border-radius: 3px;
		padding:20px 40px;
		min-width: 260px;
		-webkit-transition: all ease .4s;
		-moz-transition: all ease .4s;
		-ms-transition: all ease .4s;
		-o-transition: all ease .4s;
		transition: all ease .4s;
}

.manual_button:hover {
	background: #33383E;
	color: white;
}

.contentUl li {
	font-weight: 300;
	line-height: 28px;
}


.italic {
	font-style: italic;
}

.bolder {
	font-weight: 500;
}

.smaller {
	font-size: 85%;
}

.chapter {
	margin:0px;
	padding:50px;
	border-right:1px solid;
	border-top: 4px solid #fdbc00!important;
}

.chapter:last-child {
	padding-bottom: 500px;
}


.section {

}

.subsection {

}


.text_box {
	display: inline-block;
	max-width: 45%;
	/*margin: 2%;
	padding: 0px;
	background: white;
	border:1px solid #e0e0e0;*/
	vertical-align: top;
	margin-right: 4%;
}

.text_box_header {
	padding: 20px 20px 0px 0px;
	font-weight: bold;
	margin: 0px;
}

.text_box_header span {
	font-size: 85%;
	font-weight: 300;
}

.text_box_link {
	padding: 1px;
	font-size: 90%;
	font-weight: 700;
}

.text_box_body {
	padding: 20px 20px 20px 0px;
	margin: 0px;
	font-size: 90%;
}


.instruction_panel {
	margin:20px;
	font-weight: 300;
}

.instruction_panel_header {
	font-weight: 300;
}

.instruction_panel_body {
	background: #fff;
	padding:10px 30px;
	border:1px solid #e0e0e0;
	border-radius: 5px;
	/*box-shadow: 0px 5px 10px 0px #e0e0e0;*/
}

.instruction_panel_body li {
	margin: 10px;
	line-height: 24px;
}

.note, .warning {
	padding: 15px;
	font-size: 80%;
	display: inline-block;
	font-weight: 300;
}

.note_title, .warning_title {
	font-weight: 500;
	margin-bottom: 5px;
}

.note {
	background: #FFE4A9;
	margin-top: 24px;
}

.warning {
	background: #FFBABA;
}

.text_column,
.image_column {
	display: inline-block;
	width: 46%;
	vertical-align: top;
}


.text_column_long {
	display: inline-block;
	vertical-align: top;
	width: 70%;
}

.image_column_short {
	display: inline-block;
	vertical-align: top;
	width: 22%;

}


.text_column_left {
	text-align: right;
}

.text_column_right {
	text-align: left;
}


.imgTODO {
	background: transparent;
	margin:20px;
}

.image_center {
	display: block;
	margin: auto;
}

.iconTODO {
	background: transparent;
	height: 30px;
	min-width: 30px;
	display: inline-block;
	vertical-align: bottom;
}

.see_also {
	font-size: 90%;
	display: block;
	text-align: left;
	float: left;
	clear: left;
	padding: 10px 20px;
	border:1px solid #e8e8e8;
	border-radius: 5px;
	background: #E7FFE6;
}

.see_also a {
	display: block;
	padding: 5px 0px;
	font-size: 90%;
}

.see_also_right {
	float: right;
	clear: right;
}


.reference_group td {
	padding: 10px;
	min-width: 200px;
}


.reference_group_title {
	font-weight: 500;
	padding:20px 0px;
}

.reference_icon {
	background: white;
	min-height: 40px;
	min-width: 40px;
	vertical-align: bottom;
}

.reference_description {
	padding-left: 20px;
	font-weight: 300;
}

.reference_title_cell {
	padding-top:40px!important;
}


.shortcuts_table {
	font-weight: 300;
	border:1px solid #d8d8d8;
	border-spacing: 0px;
}


.shortcuts_table td {
	padding:20px 40px;
}



.shortcuts_table td:first-child {
	border-right: 1px solid #e8e8e8;
}

.table_body td:first-child {
	font-style: italic;
}



.table_title td {
	text-align:  center;
	background: #DDE1E4;
	font-weight: 500;
	color:#2C3136;

}

.table_body {
	font-size: 90%;
}

.table_body tr:nth-child(even){
	background: #f7f7f7;
}

.table_body tr:nth-child(odd) {
	background: white;
}


#tutorial-index {
	display: inline-block;
	width:29%;
	vertical-align: top;
	min-height: 720px;
	font-size: 14px;
 	line-height: 25px;
 	background: rgb(55, 61, 67);
 	border:1px solid black;
}

#tutorial-index h4 {
	font-weight: bold;
    color: white;
    background: rgb(77, 85, 93);
    padding: 15px 20px;
    margin: 30px 0px 10px 0px;
}

.tutorialEntry:first-child h4 {
	margin-top: 0px!important;
}

#tutorial-index a {
	color:rgb(215, 220, 223);
	display: block;
	cursor: pointer;
	margin-left: 20px;
	font-size: 13px;
}

#tutorial-index a:hover {
	color:rgb(220, 226, 231);
}

#tutorial-index a:focus,
#tutorial-index a.selected {
	color:rgb(80, 172, 234);
}


.tutorial-macro {
	display: inline-block;
	width: 70%;
	min-height: 720px;
	position: relative;
	background: rgb(44, 49, 54);
  	border: 1px solid rgb(0, 0, 0);
  	border-left: 1px solid rgb(75, 75, 75);
}

.tutorial-macro h1 {
	  margin: 0px;
  font-size: 15px;
  text-align: right;
  color: white;
  background: rgb(77, 85, 93);
  padding: 12px 20px;
  font-weight: bold;
  border-bottom: 1px solid rgb(26, 26, 26);
}

.tutorial {
	display: block;
	padding: 20px;
}

.step {
	display: block;
}

.tutorial h1 {
	font-size: 20px;
	font-weight: bold;
	margin: 20px 0px 25px 0px;
	color:white;
}

.tutorial h2 {
	font-size: 16px;
    font-weight: bold;
    margin: 0px 0px 20px 0px;
    color: white;
    padding: 0px 20px;
    border-bottom: 1px solid rgb(77, 85, 93);
    padding: 0px 0px 10px 0px;
}

.tutorial h3 {
	margin: 10px 0px;
	color:white;
	opacity: .9;
	font-size: 15px;
}

.tutorial p {
	margin: 5px 0px;
 	line-height: 20px;
  	font-size: 14px;
  	color:white;opacity: .8;
}

.tutorial img {

	margin: 30px 0px;
	/*border: 1px solid rgba(132, 132, 132, 1);*/
  	background: rgb(33, 37, 41);
  	max-width: 320px;
  	max-height: 320px;
}

.tutorial a {
	color:#5FBDFD!important;
	margin: 0px 2px 0px 1px;
}

.step_img {
	width:100%;height:300px;
	margin: 30px 0px;
  	background: rgb(33, 37, 41);
}

.step_img_full {
	width: 100%;
	max-width: 100%;
	margin: 30px 0px;
	background: rgb(33, 37, 41);
}



.tutorial_controls {
	position: absolute;
	bottom:0px;
	left:0px;
	width: 100%; 
	background: rgb(55, 61, 67);
 	border: 1px solid rgb(26, 26, 26);
 	border-right: 0px;
 	border-left: 1px solid rgb(44, 49, 54);
}

.tutorial_controls button,
.tutorial_controls button:focus {
	font-size: 12px;
	background: rgba(77, 85, 93, 1);
 	border: 1px solid rgb(138, 138, 138);
	padding: 7px 18px;
	color: white;
	border-radius: 3px;
	opacity: .7;
	outline: none!important;
	font-weight: bold;
	cursor: pointer;
}

.tutorial-progress {
	float: right;
  	opacity: .5;
}

.tutorial_controls button:hover {
	opacity: .9;
}

.tutorial_controls button:first-child {
	margin:10px 0px 10px 20px;
}

.tutorial_controls button:nth-child(2),
.tutorial_controls button:nth-child(3) {
	margin:10px 20px 10px 0px;
}


.fullscreen {
	padding: 3% 3% 3% 3%;
	width: 95%;
	height: 95%;
	position: fixed;
	top:0;
	left: 0;
	z-index: 99;
	background: rgba(0,0,0,.9);
}

#quick-tutorials {
	display: inline-block;
}

.section .fullscreen_on {
	display: inline-block;
	font-size: 11px;
  	border: 0px;
 	background: rgb(78, 164, 222);
 	padding: 6px 10px;
 	border-radius: 3px;
 	color: white;
 	margin-top: 90px;
 	display: inline-block;
 	float: right;
 	cursor: pointer;
 	opacity: .9;
 	border:1px solid rgb(68, 120, 155);
 	font-weight: bold;
}

.fullscreen .fullscreen_off {
	background: transparent;
	color:rgb(78, 164, 222);
	border:1px solid;
	padding: 3px 15px;
	opacity: .9;
	cursor: pointer;
	font-weight: bold;
}

.fullscreen .fullscreen_off:hover {
	opacity: 1;
}
.section .fullscreen_title {
	display: none;
}
.section .fullscreen_on:hover {
	opacity: 1;
}
.section .fullscreen_off {
	display: none;
	position: static;
}
.fullscreen .fullscreen_title {
	display: inline-block;
	  color: white;
  position: fixed;
  top: 1.7%;
  left: 3%;
}
.fullscreen .fullscreen_title span {
	opacity: .6;
}
.fullscreen .fullscreen_on {
	display: none;
}
.fullscreen .fullscreen_off {
	display: block;
	position: fixed;
  	top: 1.6%;
  	right: 3%;
}

.fullscreen .tutorial {
	height: 75%;
	overflow-y:auto;
	padding-bottom: -50px;
}

.fullscreen .tutorial-macro,
.fullscreen #tutorial-index {
	min-height: 96%;
	max-height: 96%;
}

.nextStep2,.nextTut2 {
	opacity: .5;
}
.nextStep2:hover,
.nextTut2:hover {
	opacity: .7;
}



/*APP guide*/

body.app-guide {
	background: #3B3E40;
	-webkit-font-smoothing: antialiased!important;
  	-moz-osx-font-smoothing: grayscale!important;
  	font-weight: 400;
}

#app-guide {
	background:#2C2F31;
	margin: 12px;
	padding-bottom: 90px;
	border:1px solid #282829;
	border-radius: 5px;
	position: relative;
}

#app-guide ul  {
	padding-left: 5px;
	
}

#app-guide ul li {
	list-style-position: inside!important;
}


#app-guide_index h4 {
	color: rgb(226, 226, 226);
	font-weight: bold;
	margin: 15px 0px 10px 15px;
	cursor: default;
	font-size: 15px;
}

#app-guide_index h4:first-child {
	margin-top: 15px;
}

#app-guide_index li {
	color: rgb(226, 226, 226);
	opacity: .8;
	font-size: 13px;
  	line-height: 25px;
  	cursor: pointer;
  	margin-left: 15px;
}

#app-guide_index li:hover {
	opacity: 1;
}

.app-guide .tutorial-macro {
	background: transparent;
	display: inline-block;
	width: 100%;
	border:0px;
	min-height: 0px;
	position: static;
}

.app-guide .tutorial-macro h1 {
  margin: 0px;
  font-size: 11px;
  text-align: right;
  color: rgb(242, 242, 242);
  background: transparent;
  padding: 12px 15px;
  font-weight: bold;
  cursor: default;
  border-bottom: 1px solid rgb(40, 40, 41);
  font-size: 12px;
}

.app-guide .tutorial-macro h1 span {
	cursor: pointer;
	opacity: .6;
	font-size: 11px;
}

.app-guide .tutorial-macro h1 span img {
	-webkit-filter: grayscale();
	filter: grayscale();
}

.app-guide .tutorial-macro h1 span:hover {
	opacity: .8;
}

.app-guide .tutorial .warning {
  display: block;
  margin: 15px 0px;
  border-radius: 5px;
  opacity: 1;
  border: 1px solid rgb(245, 139, 139);
  background: transparent;
}

.app-guide .tutorial .warning strong {
  color: rgb(245, 139, 139);
  margin-right: 4px
}

.app-guide .tutorial h2 {
  color: rgb(244, 244, 244);
  border-bottom: 0px;
}

.app-guide .tutorial h3 {
	color: rgb(244, 244, 244);
}

.app-guide .tutorial p {
	 font-size: 13px;
 	 color: rgb(238, 238, 238);
}

.app-guide .tutorial img {
	width: 100%;
	max-width: 100%;
	height: inherit;
	max-height: 100%;
	margin: 20px 0px;
}

.app-guide .step-controls {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	border-top: 1px solid rgb(40, 40, 41);

}

.app-guide .step-controls button,
.app-guide .step-controls button:focus {
	margin: 15px;
    color: rgb(246, 246, 246);
    border: 0px;
    padding: 5px 20px;
    background: rgb(102, 102, 102);
    border-radius: 1px;
    font-size: 10px;
    cursor: pointer;
    opacity: .9;
    font-weight: bold;
    outline: none;
}

.app-guide .step-controls button:hover {
	opacity: 1;
}

.app-guide .step-controls .tut-progress {
  position: absolute;
  left: 0px;
  right: 0px;
  bottom: 18px;
  font-size: 12px;
  display: inline-block;
  margin: auto;
  color:rgb(231, 241, 251);
  opacity: .8;
  width: 25px;
  text-align: center;
}

.app-guide .step-controls .jumptut {
  float: right!important;
  text-align: right!important;
  font-size: 12px!important;
  margin: 14px 15px!important;
  color:rgb(217, 217, 217)!important;
  cursor: pointer!important;
  opacity: .9!important;
}
.app-guide .step-controls .jumptut span {
	opacity: .6;
}
.app-guide .step-controls .jumptut strong {
	color:rgb(246, 246, 246)!important;
}
.app-guide .step-controls .jumptut:hover {
	opacity: 1;
}


.manualLink,.manualLink:hover {

	display: block;
	margin: 15px;
	color:rgb(252, 252, 252)!important;
	opacity: .7;
	font-size: 12px;
}

.manualLink:hover {
	opacity: .8;
}


.manualLinkArrow {
	margin: -2px 0px 0px 3px;
	vertical-align: middle;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
	-webkit-filter: grayscale();
	filter: grayscale();
	border:0px;
}

.videoBtnArrow {
	margin: -3px 5px 0px 0px;
	vertical-align: middle;
	-webkit-filter: grayscale();
	filter: grayscale();
	border:0px;
}

.videosBtn,
.videosBtn.active,
.videosBtn:focus {
  margin: 15px 15px 0px 15px;
    display: inline-block;
    padding: 12px 25px;
    font-size: 13px;
    color: rgb(255, 255, 255)!important;
    border-radius: 3px;
    border: 1px solid rgb(55, 55, 55);
    font-weight: bold;
    opacity: .9;
    background: #727272;
}
  }

 .videosBtn:hover {
 	opacity: 1;
 }




</style>