#apiPage {
	display: flex;
	flex-flow: row;
}

#headband{
	background-color: #eef2f6;
	padding: 40px;
	box-sizing: border-box;
	position: relative;
}
#headband h1{
	margin: 0px;
}
#headband .requestTraining,
#headband .getCertified{
	color: white;
	background-color: #00b1ab;
	width: 200px;
	position: absolute;
	top: 30px;
	right: 20px;
	height: 40px;
	line-height: 29px;
	padding: 5px 10px;
	box-sizing: border-box;
	text-align: center;
	cursor: pointer;
	margin-bottom: -10px;
}
#headband .requestTraining:before,
#headband .getCertified:before{
	content: "ê";
	margin-right: 10px;
	color: white;
	font-size: 25px;
	vertical-align: top;
}
#headband .requestTraining{
	background-color : #3a5065;
	bottom           : 30px;
	top              : unset;
	overflow         : hidden;
	text-overflow    : ellipsis;
	white-space      : nowrap;
}
#headband .requestTraining:before{
	content: "y";
}


#listeningToApiEvents fieldset,
#invokingApiFunctions fieldset{
	padding: 0px 10px 10px;
	box-sizing: border-box;
	border-color: #95ACC0;
	border-radius: 6px;
	border-width: 1px;
	margin: 20px 0px;
}
#listeningToApiEvents fieldset legend .title,
#invokingApiFunctions fieldset legend .title{
	margin : 0px 10px;
	color: #314355;
	font-size: 15px;
	font-weight: bold;
}
.textElem,
#listeningToApiEvents fieldset p,
#invokingApiFunctions fieldset p{
	margin: 5px 0px;
	color: #3a5065;
	font-size: 17px;
	text-align: left;
	margin-left: 0px;
	width: 100%;
	line-height: 27px;
	font-family: OpenSans;
}
#listeningToApiEvents fieldset code ,
#invokingApiFunctions fieldset code {
    margin-left: 0px;
    margin: 3px 0px;
    background-color: #f1f4f7;
	color: #3a5065;
	font-size: 16px;
	text-align: left;
	box-sizing: border-box;
	padding: 15px;
	font-style: italic;
	line-height: 20px;
	border-radius: 6px;
	font-family: OpenSans;
	display: block;
}
#invokingApiFunctions img.featuresLevel{
	display: block;
	margin: auto;
}

.textElem span {
	color: #00b1ab;
	cursor: pointer;
}




.explanationContainer{
	text-align  : left;
	font-size   : 18px;
	padding     : 25px;
	box-sizing  : border-box;
	font-weight : bold;
}
.explanationContainer .iframeContainer{
	height: 300px;
	margin-bottom: 25px;
}
.explanationContainer .iframeContainer .explanationIframe{
	border: none;
}
.explanationContainer .text{
	margin: 0px;
}
.explanationContainer ul{
	margin-bottom: 25px;
	font-weight : normal;
}
.explanationContainer .listSettings{
	list-style: none;
	padding: 0px;
}
.explanationContainer .listSettings .settingsPart{
	cursor: pointer;
}
.explanationContainer .listSettings .settingsPart .settingsIllustration{
	display: inline-block;
	width: 50px;
	height: 50px;
	border: 1px solid rgba(0,0,0,0.1);
}
.explanationContainer .listSettings .settingsPart .settingsText{
	display: inline-block;
	width: auto;
	margin: 0px 10px;
	vertical-align: top;
	line-height: 50px;
}

















#categoriesMainContainer{
	flex: 0 0 250px;
	padding        : 0px 0px 20px 0px;
	margin         : 0px;
	border-right: 1px solid #b8c7d6;
}
#categoriesContainer{
	width        : 250px;
	height: 100%;
	padding      : 0px;
	margin       : 0px;
	list-style   : none;
}
#categoriesContainer .menuListMainElem{
	padding    : 0px 10px;
	box-sizing : border-box;
	margin     : 10px 0px;
}
#categoriesContainer .menuListMainElem .menuElemTitle{
	color: #314355;
	font-size: 18px;
	font-family: OpenSans;
	font-weight: bold;
}
#categoriesContainer .menuListMainElem .subContainer{
list-style: none;
}

#categoriesContainer .menuListMainElem .subContainer .menuElemTitle{
	color       : #314355;
	font-size   : 18px;
	font-family : OpenSans;
	font-weight : normal;
	cursor      : pointer;
	margin      : 2px 0px;
}
#categoriesContainer .menuListMainElem .subContainer .menuElemTitle.categoryOvered,
#categoriesContainer .menuListMainElem .subContainer .menuElemTitle.activeCategory{
	color: #00b1ab;
}
#categoriesContainer .menuListMainElem .subContainer .menuElemTitle.activeCategory{
	font-weight: bold;
}
#categoriesContainer .smallSearchContainer{
	background-color: #ffffff;
	width: 100%;
	height: 40px;
	line-height: 40px;
	border-bottom: 2px solid #eef2f6;
	padding-bottom: 1px;
	margin-bottom: 20px;
	position: relative;
}
#categoriesContainer .smallSearchContainer .searchLabel:before{
	content: "r";
	font-size   : 29px;
	font-family : Iconia;
	padding-left: 5px;
	color       : #3a5065;
}
#categoriesContainer .smallSearchContainer .searchValue{
	background-color : #ffffff;
	color            : #314355;
	border           : none;
	box-sizing       : border-box;
	color            : #3a5065;
	font-family      : OpenSans,sans-serif;
	font-size        : 18px;
	padding          : 0px 5px 0px 10px;
	position         : relative;
	width            : calc(100% - 50px);
	height           : 40px;
	line-height      : 40px;
}





#categoriesContainer .smallSearchContainer .searchResults{
	display          : none;
	width            : 100%;
	max-height       : 600px;
	position         : absolute;
	color            : #314355;
	top              : 40px;
	left             : -1px;
	padding          : 0px;
	background-color : #f5f7f9;
	border-left      : 1px solid #b8c7d6;
	border-right     : 1px solid #b8c7d6;
	border-bottom    : 1px solid #b8c7d6;
	overflow-y       : auto;
	overflow-x       : hidden;
	color            : #314355;
	font-size        : 15px;
	list-style       : none;
	text-align       : left;
	margin           : 0px;
	cursor           : pointer;
}
#categoriesContainer .smallSearchContainer .searchResults .listElem{
	padding: 0px 10px;
}
#categoriesContainer .smallSearchContainer .searchResults .listElem:hover{
	background-color : #3a5065;
	color: white;
}
#defaultContainer .searchValue,
#defaultContainer .searchTitle{
	display: inline-block;
	vertical-align: top;
}

#defaultContainer .apiFunctions{
	list-style  : none;
	height      : 250px;
	overflow-y  : auto;
	cursor      : pointer;
	width       : 100%;
	max-width   : 507px;
	padding     : 0px;
	background-color: #eef0f2;
	margin : 15px auto;
}



#turnkeyApp,
#bestPractices,
#introduction,
#invokingApiFunctions,
#listeningToApiEvents,
#quickStart,
.detailsContainer,
#defaultContainer{
	flex: 1;
	width: 100%;
	display: none;
	/*min-height: 100vh;*/
	padding: 0px 20px 20px;
	text-align: left;
	margin-left: 5px;
	overflow: auto;
}

#quickStart{
	background-color : #e6ecf1;
	margin: 20px;
	width: calc(100% - 295px);
}

#turnkeyApp .turnKeyAppResultContainer,
#quickStart .resultContainer {
    display: inline-block;
    position: relative;
    height: 500px;
    width: 100%;
}

#turnkeyApp .turnKeyAppResultContainer iframe,
#quickStart .resultContainer iframe{
	border:none;
	width: 100%;
	height: 500px;
}
#turnkeyApp .turnKeyAppResultContainer{
	height     : auto;
	padding    : 5px;
	box-sizing : border-box;
	border     : 5px solid #ff95c0;
}
#turnkeyApp .turnKeyAppResultContainer iframe{
	height: 495px;
}
#turnkeyApp .buttonsContainer{
	text-align: center;
}
#turnkeyApp .buttonsContainer .turnKeyAppButton{
	font-size        : 15px;
	display          : inline-block;
	color            : #dde5ec;
	background-color : #4f5865;
	padding          : 5px;
	text-align       : center;
	cursor           : pointer;
	margin           : 10px 3px;
	box-sizing       : border-box;
}
#turnkeyApp .buttonsContainer .turnKeyAppWSButton{
	background-color : #ff95c0;
	color            : #4f5865;
}

#turnkeyApp .turnKeyAppTutorialContainer,
#quickStart .jsTutorialContainer,
#quickStart .tutorialContainer{
	height: 300px;
	font-size: 0px;
	margin-bottom: 20px;
}
#turnkeyApp .turnKeyAppTutorialContainer{
	height: 500px;
}
#turnkeyApp .turnKeyAppResetResponseContainer{
	height: 40px;
	border: none;
	display: inline-block;
	vertical-align: top;
	padding: 0px 50px;
	color: #dde5ec;
	background-color: #4f5865;
	line-height: 40px;
	font-weight: bold;
	cursor: pointer;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}
#turnkeyApp .responseTitle{
	color: #3a5065;
	font-size: 18px;
	font-weight: bold;
	margin: 10px 0px;
	font-family: OpenSans;
}
#turnkeyApp .turnKeyAppResponseContainer{
	border: none;
	font-weight: bold;
	padding: 10px;
	box-sizing: border-box;
	resize: none;
	width: 100%;
	height: 500px;
	background-color: white;
	text-overflow: ellipsis;
	overflow-x: hidden;
	overflow-y: auto;
	border: 30px solid #e6ecf1;
}

#turnkeyApp .turnKeyAppTutorialContainer .turnkeyAppExampleContainer,
#quickStart .jsTutorialContainer .exampleContainer,
#quickStart .tutorialContainer .exampleContainer{
	width: 100%;
	display: inline-block;
	height: 100%;
}

#turnkeyApp .turnKeyAppTutorialContainer .turnkeyAppExampleContainer .turnkeyAppExampleSubContainer,
#quickStart .jsTutorialContainer .exampleContainer .exampleSubContainer,
#quickStart .tutorialContainer .exampleContainer .exampleSubContainer{
	width: 100%;
	height: calc(100% - 40px);
	resize: none;
	border: none;
	padding: 5px;
	box-sizing: border-box;
	font-size: 11px;
	color: #3a5065;
}

#turnkeyApp .turnKeyAppTutorialContainer .turnkeyAppExampleContainer .turnkeyAppApplyExampleContainer,
#quickStart .jsTutorialContainer .exampleContainer .applyExampleContainer,
#quickStart .tutorialContainer .exampleContainer .applyExampleContainer{
	height           : 40px;
	border           : none;
	display          : inline-block;
	vertical-align   : top;
	padding          : 0px 50px;
	color            : #dde5ec;
	background-color : #4f5865;
	line-height      : 40px;
	font-weight      : bold;
	cursor           : pointer;
	text-align       : center;
	width            : 100%;
	box-sizing       : border-box;
	font-size        : 18px;
}

/*#quickStart .jsTutorialContainer .responseContainer,
/*#quickStart .tutorialContainer .responseContainer{
	display: inline-block;
	height: 100%;
	width: calc(30% - 15px);
	vertical-align: top;
	margin-left: 15px;
	position: relative;
}
#quickStart .jsTutorialContainer .responseContainer .viewerResponseContainerTitle,
#quickStart .tutorialContainer .responseContainer .viewerResponseContainerTitle{
	font-size: 18px;
	text-align: center;
}
#quickStart .jsTutorialContainer .responseContainer .resetViewerResponseContainer,
#quickStart .tutorialContainer .responseContainer .resetViewerResponseContainer{
	position: absolute;
	border: 0px;
	width: 100%;
	text-align: center;
	left: 0px;
	height: 40px;
	background-color: #dde5ec;
	bottom: 0px;
	color: #4f5865;
	font-size: 20px;
	line-height: 40px;
}*/

#defaultContainer{
	padding: 0px;
	font-size: 0px;
	text-align: center;
	display: none;
}

.detailsContainer{
	display: inline-block;
}

.homePageDetailsContainer{
	min-height: 0px;
	width: 100%;
}

.homePageMainContainer{
	padding-bottom: 50px;
}
.homePageMainContainer .introContainer{
	width: 100%;
	padding: 40px;
	box-sizing: border-box;
	text-align: left;
}
.homePageMainContainer .introContainer .title{
	font-size: 22px;
    font-weight: bold;
    color: #314355;
    text-align: left;
    margin-bottom: 25px;
}
.homePageMainContainer .introContainer p{
	font-size: 15px;
	text-align: left;
	color: #3a5065;
}

.homePageMainContainer .exampleContainer{
	width: 100%;
	background-color: #f5f7f9;
	padding: 40px;
	box-sizing: border-box;
}
.homePageMainContainer .exampleContainer .title{
	font-size: 22px;
	font-weight: bold;
	color: #314355;
	text-align: left;
	margin-bottom: 25px;
}
.homePageMainContainer .exampleContainer .text{
	font-size: 15px;
	text-align: left;
	color: #3a5065;
	margin: 0% 0% 50px;
}
.homePageMainContainer .exampleContainer .availableMaterialsContainer,
.homePageMainContainer .exampleContainer .editablePartsContainer{
	display: inline-block;
	width: 40%;
	vertical-align: top;
	text-align: left;
}
.homePageMainContainer .exampleContainer .editablePartsContainer{
	width: 60%;
}
.homePageMainContainer .exampleContainer .availableMaterialsContainer .subTitle,
.homePageMainContainer .exampleContainer .editablePartsContainer .subTitle{
	font-size: 16px;
	color: #3a5065;
	font-weight: bold;
	text-align: left;
	margin-bottom: 25px;
}
.homePageMainContainer .exampleContainer .availableMaterialsContainer img,
.homePageMainContainer .exampleContainer .editablePartsContainer img{
	width: 300px;
	height: auto;
}
.homePageMainContainer .exampleContainer .editablePartsContainer img{
	margin-top: -50px;
	margin-left: calc(50% - 150px);
}

#bestPractices div h3,
#introduction div h3,
#invokingApiFunctions div h3,
#listeningToApiEvents div h3{
	text-align: left;
}

#bestPractices ul{
	list-style-type: none;
}
#bestPractices ul li:before{
	content        : "■";
	color          : #3a5065;
	font-size      : 9px;
	margin-right   : 5px;
	vertical-align : 3px;
}
/*.detailsContainer .functionDetailsContainer{
	padding: 20px 10px;
	box-sizing: border-box;
}*/
.detailsContainer .functionDetailsContainer .titleContainer{
	color: #3a5065;
	font-size: 18px;
	font-family: OpenSans;
	font-weight: bold;
	margin-left: 40px;
	margin-top: 20px;
}
.detailsContainer .functionDetailsContainer .subTitleContainer{
	color: #3a5065;
	font-size: 17px;
	font-family: OpenSans;
	margin-left: 40px;
	margin-top: 20px;
}
.homePageDetailsContainer .functionDetailsContainer .subTitleContainer{
	margin-top: 10px;
	cursor: pointer;
	font-size: 15px;
	color: #537290;
	font-weight: bold;
}
.homePageDetailsContainer .functionDetailsContainer .subTitleContainer:hover{
	color: #00b1AB;
}
.detailsContainer .functionDetailsContainer .functionsContainer{
	column-gap: 10px;
	list-style: none;
	border-bottom: 1px solid #e6ecf1;
	padding: 10px 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.homePageDetailsContainer .functionDetailsContainer .functionsContainer{
	padding: 10px 40px 20px;
}
.detailsContainer .functionDetailsContainer .functionsContainer li{
	color         : #3a5065;
	font-size     : 15px;
	font-family   : OpenSans;
	text-overflow : ellipsis;
	overflow      : hidden;
	white-space   : nowrap;
}

.detailsContainer .functionDetailsContainer .functionsContainer li.deprecated{
	color: #ed4875;
}
.detailsContainer .functionDetailsContainer .functionsContainer li.activeMethod{
	color: #00b1ab;
	cursor: pointer;
}
.detailsContainer .functionDetailsContainer .functionsContainer li.selectedMethod{
	color: #ffffff;
	font-weight: bold;
	padding: 1px 10px;
	box-sizing: border-box;
	background-color: #00b1ab;
	border-radius: 6px;
}
.detailsContainer .functionDetailsContainer .functionsContainer li.deprecated{
	color: #ed4875;
}
.detailsContainer .functionDetailsContainer .functionsContainer li.selectedMethod.deprecated{
	background-color: #ed4875;
	color: #ffffff;
}


.detailsContainer .functionDetailsContainer .functionContainer .apiFunctionTitle{
	text-align: left;
	margin-left: 40px;
}
.detailsContainer .functionDetailsContainer .functionContainer .apiFunctionLevel,
.detailsContainer .functionDetailsContainer .functionContainer .apiTips,
.detailsContainer .functionDetailsContainer .functionContainer .apiFunctionDescription{
	font-size: 16px;
	margin-left: 40px;
}

.detailsContainer .functionDetailsContainer .functionContainer .apiFunctionDescription span{
	font-weight: bold;
	color: #00b1AB;
}
.detailsContainer .functionDetailsContainer .functionContainer .apiFunctionDescription span.newFunctionOver{
	cursor: pointer
}

/******** EVENT CONTAINER ***********/
.detailsContainer .functionDetailsContainer .functionContainer .eventContainer{
	background-color : #e6ecf1;
	font-size        : 18px;
	cursor           : pointer;
	border-radius    : 6px;
	padding          : 10px 20px;
	box-sizing       : border-box;
	margin-top       : 25px;
	margin-left      : 20px;
	width            : calc(100% - 40px);
}
.detailsContainer .functionDetailsContainer .functionContainer .eventContainer .eventTitleContainer{
	font-weight: bold;
	margin-right: 15px;
}
.detailsContainer .functionDetailsContainer .functionContainer .eventContainer.eventContainerOver .eventNameContainer{
	color: #00b1ab;
}
/******** FUNCTION CONTAINER ***********/
.detailsContainer .functionDetailsContainer .functionContainer .eventFunctionsContainer{
	background-color : #e6ecf1;
	font-size        : 18px;
	cursor           : pointer;
	border-radius    : 6px;
	padding          : 10px 20px;
	box-sizing       : border-box;
	margin-top       : 25px;
	margin-left      : 20px;
	width            : calc(100% - 40px);
}
.detailsContainer .functionDetailsContainer .functionContainer .eventFunctionsContainer .eventFunctionsContainerList{
	list-style: none;
}
.detailsContainer .functionDetailsContainer .functionContainer .eventFunctionsContainer .eventFunctionsContainerList .eventFunctionsContainerListElem{
	cursor: pointer;
	display: inline-block;
	margin-right: 2.5%;
	width: 20%;
	margin-left: 2.5%;
}
.detailsContainer .functionDetailsContainer .functionContainer .eventFunctionsContainer .eventFunctionsContainerList .eventFunctionsContainerListElem.eventFunctionsContainerListElemOver{
	color: #00b1ab;
}
/******** ATTRIBUTE CONTAINER ***********/
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer{
	position    : relative;
	min-height  : 35px;
	background-color: white;
}
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer.evenAttribute{
	background-color: #f5f8fb;
}

.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeNameMainContainer,
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeNameContainer,
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeOptionalContainer,
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeActionContainer,
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeTypeContainer,
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeDefinitionContainer{
	display: inline-block;
	font-style: italic;
}

.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeNameMainContainer{
	width       : 30%;
	margin-left : 40px;
	font-weight : bold;
	font-size   : 15px;
	position: relative;
}

.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeOptionalContainer{
	background-color: #f9f1da;
	border-radius: 6px;
	color: #e2af57;
	padding: 1px 20px;
	box-sizing: border-box;
	line-height: 20px;
	margin-left: 5px;
}
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeActionContainer{
	margin-left: 5px;
}



.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeTypeContainer{
	background-color: #e6ecf1;
	width: 90px;
	text-align: center;
	padding: 2px 10px;
	box-sizing: border-box;
	border-radius: 6px;
	margin-top: 5px;
	margin-right: 10px;
	line-height: 19px;
}
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .dataAttributeTypeContainer{
	background-color: #537290;
	color: white;
}
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .dataAttributeTypeContainer::after{
	content: "A";
	font-style: normal;
	margin-left:5px;
}
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeDefinitionContainer{
	right: 0px;
	text-align: left;
	width: calc(70% - 170px);
	font-size: 15px;
	font-style: normal;
}

.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subAttributeContainer .attributeNameMainContainer{
	margin-left: 70px
	width: calc(30% - 30px);
}

.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subAttributeContainer .subDataAttributeContainer .attributeNameMainContainer{
	margin-left: 0px;
	width: 38%;
}
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subAttributeContainer .subDataAttributeContainer .attributeDefinitionContainer{
	width: calc(62% - 100px);
}

.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subDataAttributeContainer{
	background-color: #537290;
	color: white;
	border-radius: 6px;
	position: relative;
	max-height: 0px;
	overflow: hidden;
	box-sizing: border-box;
	padding: 0px;

	-webkit-transition :max-height 0.25s ease-out, padding 0.30s linear;
	-moz-transition    :max-height 0.25s ease-out, padding 0.30s linear;
	-ms-transition     :max-height 0.25s ease-out, padding 0.30s linear;
	-o-transition      :max-height 0.25s ease-out, padding 0.30s linear;
}

.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subDataAttributeContainer .subDataAttributeContainerUpArrow{
	border-bottom : 10px solid #537290;
	border-left   : 10px solid transparent;
	border-right  : 10px solid transparent;
	height        : 0;
	position      : absolute;
	top           : -7px;
	width         : 0;
	opacity       : 1;

}
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subDataAttributeContainer.activeSubDataAttributeContainer{
	margin-top: 10px;
	max-height: 1500px;
	padding: 10px;
	overflow: visible;

	-webkit-transition :max-height 0.15s ease-in, padding 0.05s ease-in;
	-moz-transition    :max-height 0.15s ease-in, padding 0.05s ease-in;
	-ms-transition     :max-height 0.15s ease-in, padding 0.05s ease-in;
	-o-transition      :max-height 0.15s ease-in, padding 0.05s ease-in;
}

.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subDataAttributeContainer .attributeContainer{
	background-color: unset;
}
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subDataAttributeContainer .attributeContainer .attributeNameMainContainer,
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subDataAttributeContainer .attributeContainer .attributeDefinitionContainer{
	color: unset;
}
.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subDataAttributeContainer .attributeContainer .attributeOptionalContainer{
	color            : #f8edd8;
	background-color : rgba(249,241,218,0.25);
	position         : absolute;
	right            : 5px;
}







/******** EXAMPLE CONTAINER ***********/
.detailsContainer .exampleContainer{
	width: 100%;
	display: none;
	background-color: #e6ecf1;
	margin-top: 50px;
	padding: 15px 40px;
	box-sizing: border-box;
	position: relative;
	font-size: 0px;
}
.detailsContainer .exampleContainer .title{
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 15px;
	margin-right: 50px;
}
.detailsContainer .exampleContainer .tutorialContainerTab{
	position: absolute;
	left: 0px;
	top: -30px;
	cursor: pointer;
}

.detailsContainer .exampleContainer .jsTutorialContainerTab,
.detailsContainer .exampleContainer .scriptTutorialContainerTab{
	float: left;
	font-size: 16px;
	color: #3a5065;
	padding: 5px 20px;
	background-color: #f5f8fb;
	text-align: center;
}
.detailsContainer .exampleContainer .jsTutorialContainerTab.disabled,
.detailsContainer .exampleContainer .scriptTutorialContainerTab.disabled {
	opacity: 0.5;
	pointer-events: none;
	background-color: rgb(245, 248, 251);
}
.detailsContainer .exampleContainer .jsTutorialContainerTab.selected ,
.detailsContainer .exampleContainer .scriptTutorialContainerTab.selected {
	background-color: #e6ecf1;
}

.detailsContainer .exampleContainer .jsTutorialContainer,
.detailsContainer .exampleContainer .tutorialContainer{
	font-family  : OpenSans;
	display      : inline-block;
	font-size    : 13px;
	width        : 100%;
	position     : relative;
}
.detailsContainer .exampleContainer .imageContainer{
	position: relative;
	display: inline-block;
	width: 100%;
	margin-bottom: 25px;
}
.detailsContainer .exampleContainer .imageContainer .title{
	display: inline-block;
	margin-bottom: 0px;
	line-height: 200px;
	width: calc(50% - 20px);
	margin-right: 40px;
}
.detailsContainer .exampleContainer .imageContainer .imagePreview{
	height              : 200px;
	width               : calc(50% - 20px);
	vertical-align      : top;
	display             : inline-block;
	background-size     : contain;
	background-repeat   : no-repeat;
	background-position : center;
}


.detailsContainer .exampleContainer .jsTutorialContainer .examplesSubcontainer,
.detailsContainer .exampleContainer .tutorialContainer .examplesSubcontainer{
	border       : none;
	font-weight  : bold;
	padding      : 10px;
	box-sizing   : border-box;
	resize       : none;
	width        : 50%;
	margin-right : 50%;
	height       : 200px;
}
.detailsContainer .exampleContainer .jsTutorialContainer .resetButtonContainer,
.detailsContainer .exampleContainer .tutorialContainer .resetButtonContainer,
.detailsContainer .exampleContainer .jsTutorialContainer .resetViewerResponseContainer,
.detailsContainer .exampleContainer .tutorialContainer .resetViewerResponseContainer,
.detailsContainer .exampleContainer .jsTutorialContainer .applyButtonContainer,
.detailsContainer .exampleContainer .tutorialContainer .applyButtonContainer{
	height           : 40px;
	border           : none;
	display          : inline-block;
	vertical-align   : top;
	padding          : 0px 50px;
	color            : #dde5ec;
	background-color : #4f5865;
	line-height      : 40px;
	font-weight      : bold;
	cursor           : pointer;
	text-align       : center;
	width: 50%;
	box-sizing: border-box;
}
.detailsContainer .exampleContainer .jsTutorialContainer .applyButtonContainer,
.detailsContainer .exampleContainer .tutorialContainer .applyButtonContainer{
	width: calc(50% - 150px);
}
.detailsContainer .exampleContainer .jsTutorialContainer .resetViewerResponseContainer,
.detailsContainer .exampleContainer .tutorialContainer .resetViewerResponseContainer{
	width: 50%;
	background-color : #dde5ec;
	color            : #4f5865;
}
.detailsContainer .exampleContainer .jsTutorialContainer .viewerResponseContainer,
.detailsContainer .exampleContainer .tutorialContainer .viewerResponseContainer{
	border           : none;
	font-weight      : bold;
	padding          : 10px;
	box-sizing       : border-box;
	resize           : none;
	width            : 50%;
	height           : 113px;
	background-color : white;
	text-overflow    : ellipsis;
	overflow-x       : hidden;
	overflow-y       : auto;
}
.detailsContainer .exampleContainer .jsTutorialContainer .viewerResponseContainer > div ,
.detailsContainer .exampleContainer .tutorialContainer .viewerResponseContainer > div {
	font-size: 12px; 
	padding:0px 0px 10px 0px; 
	border-bottom: 2px solid #00b1ab;
}
.detailsContainer .exampleContainer .jsTutorialContainer .viewerResponseContainer > div[data-result="default"] ,
.detailsContainer .exampleContainer .tutorialContainer .viewerResponseContainer > div[data-result="default"] {
	color: #3a5065;
}
.detailsContainer .exampleContainer .jsTutorialContainer .viewerResponseContainer > div[data-result="success"] ,
.detailsContainer .exampleContainer .tutorialContainer .viewerResponseContainer > div[data-result="success"] {
	color: #00B1AB;
}
.detailsContainer .exampleContainer .jsTutorialContainer .viewerResponseContainer > div[data-result="error"] ,
.detailsContainer .exampleContainer .tutorialContainer .viewerResponseContainer > div[data-result="error"] {
	color: #FF0000;
}
.detailsContainer .exampleContainer .jsTutorialContainer .viewerResponseContainerTitle,
.detailsContainer .exampleContainer .tutorialContainer .viewerResponseContainerTitle{
	font-size   : 18px;
	font-weight : bold;
	margin      : 10px 0px;
}
.detailsContainer .exampleContainer .jsTutorialContainer .resetButtonContainer,
.detailsContainer .exampleContainer .tutorialContainer .resetButtonContainer{
	width: 150px;
	background-color : #dde5ec;
	color            : #4f5865;
}

.detailsContainer .exampleContainer .switchExperienceButtonContainer{
	position         : absolute;
	top              : 10px;
	right            : 50px;
	color            : #ffffff;
	font-size        : 15px;
	background-color : rgba(0,177,171,0.8);
	padding          : 5px 15px;
	border-radius    : 15px;
	cursor           : pointer;
}

.detailsContainer .exampleContainer .jsViewerContainer,
.detailsContainer .exampleContainer .viewerContainer{
	width          : 48%;
	min-height     : 440px;
	height         : 440px;
	border         : none;
	display        : inline-block;
	vertical-align : top;
	position       : absolute;
	right          : 0px;
	bottom : 0px;
}

.detailsContainer .exampleContainer .viewerContainer .routingEditorContainer{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	background-color: white;
	color: black;
	height: 50px;
	font-size: 15px;
	line-height: 50px;
	text-align: center;
}
.detailsContainer .exampleContainer .viewerContainer #emersyaIframe{
	border:none;
	width: 100%;
	height: 440px;
}

#turnkeyApp h5{
	margin-top: 50px;
	margin-bottom: 30px;
}
#turnkeyApp .functionContainer{
	margin-top: 30px;
	margin-bottom: 30px;
}
#turnkeyApp .functionContainer .functionName{
	color: #3a5065;
	font-size: 20px;
}
#turnkeyApp .functionContainer .functionName::before{
	content: "•";
	color: #3a5065;
	font-size: 25px;
	vertical-align: -4px;
	display: inline-block;
	margin-right: 5px;
}
#turnkeyApp code{
	background-color: #eef2f6;
	width: 100%;
	display: inline-block;
}
#turnkeyApp code pre{
	margin: 0px;
}


#turnkeyApp  .functionContainer p b {
	font-family: MavenProBold;
}


@media screen and (max-width: 1278px) {
	.detailsContainer .functionDetailsContainer .functionsContainer{
		columns: 3;
		-webkit-columns: 3;
		-moz-columns: 3;
	}
}
@media screen and (max-width: 960px) {

	#apiPage {
		flex-flow: column;
	}

	#categoriesMainContainer {
		flex: 1;
	    border-bottom: 1px solid #b8c7d6;
	    padding: 20px 40px;
		width: 100%;
		border-right: 0px;
	}
	#categoriesMainContainer #categoriesContainer{
		width: 100%;
	}

	.detailsContainer {
	    width:100%;
	    border-left: none;
	}

	#turnkeyApp, #quickStart, #introduction, #bestPractices, #invokingApiFunctions, #listeningToApiEvents, .detailsContainer, #defaultContainer {
	    width: 100%;
	    border: none;
		margin-left: 0;
	}

	#headband .requestTraining, #headband .getCertified {
		display: none;
	}

	.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeNameMainContainer,
	.detailsContainer .functionDetailsContainer .functionContainer .apiFunctionDescription,
	.detailsContainer .functionDetailsContainer .functionContainer .apiFunctionLevel,
	.detailsContainer .functionDetailsContainer .functionContainer .apiTips,
	.detailsContainer .functionDetailsContainer .functionContainer .apiFunctionTitle,
	.detailsContainer .functionDetailsContainer .titleContainer {
	    margin-left: 20px;
	}
	.detailsContainer .functionDetailsContainer .functionsContainer {
	    padding: 20px;
	}

	.detailsContainer .functionDetailsContainer .functionContainer .eventContainer {
	    padding: 10px;
	    margin-left: 10px;
	    width: calc(100% - 20px);
	}

	.detailsContainer .exampleContainer {
	    padding: 15px 20px;
	}

	.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subDataAttributeContainer {
	    width: calc(100% - 50px);
	    margin-left: 25px;
	}
}

@media screen and (max-width: 768px) {
	.detailsContainer .exampleContainer .tutorialContainer ,
	.detailsContainer .exampleContainer .tutorialContainer {
	    width: 100%;
	    margin-right: 0px;
	}
	.detailsContainer .exampleContainer .viewerContainer {
	    margin-top: 15px;
	    width: 100%;
	}
	.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer{
		cursor: pointer;
	}

	.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subDataAttributeContainer .attributeContainer .attributeDefinitionContainer,
	.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeDefinitionContainer {
	    width: 100%;
	    display: none;
	    margin-left: 20px;
	}
	.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subDataAttributeContainer .attributeContainer .attributeDefinitionContainer.activeDefinition,
	.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeDefinitionContainer.activeDefinition{
		display: block;
	}
	.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeTypeContainer {
	    margin-right: 0px;
	}
	.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .subDataAttributeContainer .attributeContainer .attributeNameMainContainer,
	.detailsContainer .functionDetailsContainer .functionContainer .attributeContainer .attributeNameMainContainer {
	    width: calc(90% - 100px);
	}

	.explanationContainer{
		width: 100%;
		margin: 0px;
	}

	.homePageMainContainer .exampleContainer .availableMaterialsContainer,
	.homePageMainContainer .exampleContainer .editablePartsContainer{
		display: block;
		width: 100%;
	}
}