/******************************
* General
******************************/
body{
	background: #fff;
}

.docs{
	max-width: 1400px;
    margin: 100px auto;
    overflow: hidden;
}

.doc-feature-support {
  position: relative;
}

.doc-feature-support-label {
  position: absolute;
  top: 0;
  right: 0;
  border-radius: 5px;
  background-color: #eee;
  padding: 0 10px;
}


.docs > .docs-nav{
	float: left;
	width: 22%;
}

.docs > .docs-content{
	float: left;
	width: 50%;
	margin: 0 3%;
}

.docs > .docs-content-nav{
	position: fixed;
	width: 22%;
	left: 78%;
	top: 400px;
}

#page-header{
	background-color: #0c295f;
}

@media screen and (max-width: 900px) {
	.docs{
		margin-top: 14px;
	}

	.docs > .docs-nav,
	.docs > .docs-content-nav{
		display: none;
	}

	.docs > .docs-content{
		float: none;
		width: 90%;
		margin: 0 5%;
	}
}
/******************************
* Breadcrumbs
******************************/
.breadcrumbs{
	font-size: 16px;
    font-weight: 300;
    margin-top: 20px;
    line-height: 30px;
}

.breadcrumbs a{
    text-decoration: none;
    cursor: pointer;
    border-bottom: 1px solid #474747;
    padding-bottom: 1px;
}

.breadcrumbs a:hover{
	color: #000;
}

.breadcrumbs .icon{
	margin: 0 10px;
}

.breadcrumbs a,
.breadcrumbs span{
	text-transform: lowercase;
}

/******************************
* Tree Nav
******************************/
.tree-nav *{
	font-size: 16px;
}

.tree-nav .sub-section-container{
	margin-bottom: 5px;
}

.tree-nav .sub-section-toggle{
	padding-bottom: 3px;
	cursor: pointer;
}

.tree-nav .sub-section-toggle:hover,
.tree-nav .open .sub-section-toggle{
	font-weight: bold;
}

.tree-nav .sub-section-container .title{
	color: #666;
	margin-bottom: 6px;
	text-transform: capitalize;
}

.tree-nav .sub-section-container .icon{
    font-size: 12px;
    color: #bbb;
    margin-right: 3px;
    display: inline-block;
    width: 8px;
}

.tree-nav .sub-section-container .icon:before{
	display: inline-block;
	font-family: "Ionicons";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-rendering: auto;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.tree-nav .sub-section-container .icon:before{
	content: "\f125";
}

.tree-nav .sub-section-container.open .icon:before{
	content: "\f123";
}

.tree-nav .sub-section-container .entry{
	margin-top: 6px;
	height: 0;
	transition: all 500ms ease;
	overflow: hidden;
}

.tree-nav .sub-section-container.open .entry{
	height: auto;
	margin-bottom: 4px;
}

.tree-nav .sub-section-container.open .entry.category{
    color: #999;
    font-style: italic;
    margin-top: 16px;
}

.tree-nav .sub-section-container.open .entry.category:first-child{
	margin-top: 0;
}

.tree-nav .sub-section-container .entry li a{
	padding: 6px;
	display: block;
	cursor: pointer;
	color: #2f8ab7;
}

.tree-nav .sub-section-container .entry li.active a{
	font-weight: bold;
}

.tree-nav .sub-section-container .entry li a:hover{
	color: #119b9c;
}

/******************************
* Content Nav
******************************/
.docs-content-nav h4{
    font-size: 16px;
    color: #666;
    font-weight: 400;
    margin-bottom: 8px;
}

.docs-content-nav a{
	display: block;
	font-size: 16px;
	color: #2f8ab7;
	margin-bottom: 8px;
}

.docs-content-nav a.h3{
	padding-left: 22px;
}

.docs-content-nav a.active{
	font-weight: bold;
}

/******************************
* Content
******************************/
.docs .content *{
	font-size: 16px;
	line-height: 24px;
	color: #222;
}

.docs .content > *:first-child{
	margin-top: 0 !important;
}

.docs .content p{
	margin-bottom: 16px;
}
.docs .content > ol,
.docs .content > ul,{
	margin-bottom: 20px;
}
.docs .content > ol li,
.docs .content > ul li{
    margin-bottom: 10px;
    list-style-type: none;
    margin-left: 20px;
    position: relative;
}

.docs .content > ol li{
	list-style-type: decimal;
}

.docs .content > ul li:before{
	content: "-";
    position: absolute;
    left: -12px;
    color: #999;
    font-weight: bold;
}

.docs .content a{
	color: #2f8ab7;
    text-decoration: underline;
    cursor: pointer;
}

.docs .content h2 {
    font-size: 22px;
    margin-top: 44px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 3px;
    margin-bottom: 6px;
}

.docs .content h2 a{
	font-size: 22px;
	color: #222222;
	text-decoration: none;
	font-weight: 400;
}

.docs .content h3 {
    font-size: 18px;
    font-family: "Courier New", monospace;
    font-weight: 600;
    margin-top: 20px;
}

.docs .content h2 + h3{
	margin-top: 0;
}

.docs .content img{
	width: 100%;
	display: block;
	margin: 22px 0;
}

.docs .content > p > img{
	width: auto;
    box-shadow: 0 0 10px 0px rgba(0, 0, 0, 0.2 );
    margin: 27px auto;
    max-width: 100%;
}

.docs .content > p > img.no-shadow{
	box-shadow: none;
}

.docs .content > code,
.docs .content li > code,
.docs .content p > code{
    background-color: #f7ebed;
    color: #9c2f45;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
    display: inline-block;
    padding: 0 4px;
}

.docs .content pre *{
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

.docs .content .api-doc-table {
    margin: 6px 0 20px;
}

.docs .content .api-doc-table th{
	text-align: left;
	color: #999;
	font-size: 12px;
	font-weight: normal;
}

.docs .content .api-doc-table th,
.docs .content .api-doc-table td{
	padding: 2px 23px 2px 0;
}

.docs .content .api-doc-table tbody tr:nth-child(even){
	background: #f9f9f9;
}

.docs .content .glossary,
.docs .content .infobox{
	border: 1px solid #8fa3c5;
    background-color: #f8f9fc;
    color: #213961;
    padding: 22px 22px 6px 100px;
    margin-bottom: 22px;
    position: relative;
}
.docs .content .infobox{
	padding-bottom: 22px;
}

.docs .content .infobox h3{
	margin-top: 0;
}

.docs .content .glossary p:first-child,
.docs .content .infobox p:first-child{
	margin-top: 0;
}

.docs .content .glossary *,
.docs .content .infobox *{
	color: #213961;
}

.docs .content .infobox code{
	font-weight: bold;
	font-family:'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

.docs .content .glossary:before,
.docs .content .infobox:before{
	display: block;
	font-family: "Ionicons";
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-rendering: auto;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\f36c";
	position: absolute;
    font-size: 70px;
    left: 20px;
    top: 22px;
    color: #8fa3c5;
}

.trading-video {
	width: 100%;
}

@media screen and (max-width: 900px) {
	.docs .content h2{
		font-size: 18px;
	}

	.docs .content .glossary,
	.docs .content .infobox{
		padding-left: 52px;
	}

	.docs .content .glossary:before,
	.docs .content .infobox:before{
		font-size: 38px;
		left: 9px;
		top: 22px;
	}
}

/******************************
* Tutorial Series Navigation
******************************/
.series-nav{
	overflow: hidden;
}

.series-nav a{
	display: block;
	float: left;
	width: 50%;
	box-sizing: border-box;
	padding: 10px;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	text-decoration: none !important;
	cursor: pointer;
	transition: all 500ms ease;
}

.series-nav a:hover{
	background-color: #f4fbff;
}

.series-nav a.active *,
.series-nav a:visited *{
	color: #999;
}

.series-nav a:nth-child( even ){
	border-right: none;
}

.series-nav a:nth-child( 7 ),
.series-nav a:nth-child( 8 ){
	border-bottom: none;
}

.series-nav a h3{
	font-size: 16px;
	font-family: Roboto;
	text-decoration: none !important;
}

.series-nav a p{
	font-size: 16px;
	font-family: Roboto;
	text-decoration: none !important;
}

@media screen and (max-width: 900px) {
	.series-nav a{
		float: none;
		width: 100%;
		border-right: none;
	}

	.series-nav a:nth-child( 7 ){
		border-bottom: 1px solid #ccc;
	}
}
/******************************
* Tutorial Pages
******************************/
.javascript #page-header h1,
.javascript #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.video {
	width: 100% !important;
}

.download-server-link{
	display: block;
	text-align: center;
}

.download-server-link > div{
	width: 20%;
	height: 1px;
	background-color: #ccc;
	margin: 20px auto;
}

.download-server-link a{
	display: block;
	padding: 10px;
	margin: 0 auto;
	cursor: pointer;
	color: #333;
	transition: all 400ms ease;
}

.download-server-link a:hover{
	background-color: #eee;
}

/******************************
* Live Demo
******************************/
.docs .live-demo{
	min-height: 700px;
	border: none;
	margin-bottom: 20px;
	border-bottom: 1px solid #ccc;
}

.live-demo .ace_editor *{
	font: 13px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
}

.docs .jotted-nav{
	background-color: #fff;
	overflow: visible;
}

.docs .jotted-nav .jotted-nav-item{
	border: none;
	margin-right: 4px;
	background-color: transparent;
}

.docs .jotted-nav .jotted-nav-item a{
    color: #333;
    text-decoration: none;
    padding: 6px 25px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 3px 3px 0 0;
    cursor: pointer;
    transition: all 400ms ease;
    line-height: 21px;
}

.docs .jotted-nav .jotted-nav-item a:hover{
	background-color: #eee;
}

.docs .jotted-pane-active-result .jotted-nav-item-result a,
.docs .jotted-pane-active-css .jotted-nav-item-css a,
.docs .jotted-pane-active-js .jotted-nav-item-js a,
.docs .jotted-pane-active-html .jotted-nav-item-html a{
	font-weight: bold;
	border-bottom: 1px solid #fff;
	background-color: #fff !important;
}

.docs .jotted-pane{
	border: 1px solid #ccc;
	border-top: none;
}

/** ACE Syntax Highlighter overrides */
.docs .ace-tm .ace_comment,
.docs .ace-tm .ace_comment.ace_doc{
	color: #999;
}

.docs .ace-tm .ace_string{
	color: #690;
}

.docs .ace-tm .ace_type{
	color: #07a;
}

@media screen and (max-width: 900px) {
	.docs .jotted-nav .jotted-nav-item a{
		padding: 6px 6px 5px;
	}
}

/******************************
* Valve Intro Box
******************************/
.docs .valve-howto{
	padding: 20px 20px 0 100px;
    box-sizing: border-box;
    border: 1px solid #d7f2ff;
    background: #fafcff;
    position: relative;
    margin-bottom: 22px;
}

.docs .valve-howto:before{
    position: absolute;
    left: 36px;
    top: 20px;
    font-size: 80px;
    color: #b4d3e2;
}

.docs .valve-howto h2{
	margin-top: 0;
}

/******************************
* JS Client & JavaScript getting started
******************************/
.client-js #page-header,
.javascript #page-header{
    background-color: #F7DF1E;
    background-image: url(../img/docs/javascript-logo.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.client-js #dsh-nav .main > *,
.client-js #dsh-nav .sub > *,
.client-js #page-header *,
.javascript #dsh-nav .main > *,
.javascript #dsh-nav .sub > *,
.javascript #page-header *{
	color: #474747;
}

.javascript #dsh-nav span.dropdown .head i,
.client-js #dsh-nav span.dropdown .head i {
	border-top-color: #474747;
}

.javascript #dsh-nav .sub > *.button,
.client-js #dsh-nav .sub > *.button{
	border-color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.client-js #page-header,
	.javascript #page-header{
		background-image: none;
	}

	.javascript #page-header h1,
	.javascript #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* NodeJS getting started
******************************/
.getting-started.node #page-header{
	background-color: #2f2f2f;
	background-image: url(/assets/img/tutorial/backgrounds/node.jpg);
	background-size: cover;
    background-position: top center;
}

/******************************
* WebRTC
******************************/
.protocols.webrtc-intro #page-header,
.protocols.webrtc-datachannels #page-header,
.protocols.webrtc-full-mesh #page-header,
.protocols.webrtc-audio-video #page-header,
.protocols.webrtc-video-manipulation #page-header,
.protocols.webrtc-screen-sharing #page-header,
.protocols.webrtc-file-transfer #page-header,
.protocols.webrtc-summary #page-header,
.protocols.webrtc-in-production #page-header{
	background-image: url(/assets/img/tutorial/backgrounds/webrtc.jpg);
	background-size: cover;
    background-position: top center;
}

/******************************
* SWIFT
******************************/
.swift #page-header {
	background-color: #FF3527;
	background-image: url(/assets/img/tutorial/backgrounds/swift.jpg);
	background-position: 0px -94px;
}

.swift #dsh-nav .main > *,
.swift #dsh-nav .sub > *{
	color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.swift #dsh-nav .main .sub-menu *{
	text-shadow: none;
}

.swift #dsh-nav span.dropdown .head i{
	border-top-color: #fff;
}

.swift #dsh-nav .sub > *.button {
	border-color: #fff;
}

.client-swift .docs-content-nav a {
	font-size: 14px;
}
.client-swift .docs-content-nav a.h3 {
	padding-left: 11px;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.swift #page-header{
		background-image: none;
	}

	.swift #page-header h1,
	.swift #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* SWIFT Docs
******************************/
.client-swift #page-header {
	background-color: #FF3527;
	background-image: url(/assets/img/tutorial/backgrounds/swift.jpg);
	background-position: 0px -94px;
}

.client-swift #dsh-nav .main > *,
.client-swift #dsh-nav .sub > *{
	color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.client-swift #dsh-nav .main .sub-menu *{
	text-shadow: none;
}

.client-swift #dsh-nav span.dropdown .head i{
	border-top-color: #fff;
}

.client-swift #dsh-nav .sub > *.button {
	border-color: #fff;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.client-swift #page-header{
		background-image: none;
	}

	.client-swift #page-header h1,
	.client-swift #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* JAVA DOCS
******************************/
.client-java #page-header{
	background-color: #273300;
    background-image: url(/assets/img/docs/android-logo.png);
    background-size: initial;
    background-position: 90% 150px;
}

.client-java #page-header h1 .title{
	display: none;
}

.client-java #page-header h1 .nav-label{
	display: block;
}

.client-java .docs-content-nav a {
	font-size: 14px;
}
.client-java .docs-content-nav a.h3 {
	padding-left: 11px;
}


@media screen and (max-width: 900px) {
	.client-java #page-header{
		background-position: 166% 160px;
	}
}

/******************************
* GENERAL SECTION
******************************/
.general #page-header {
    background-color: #0c295f;
    background-image: url(/assets/img/tutorial/backgrounds/black-triangles-tiling.png);
    background-repeat: repeat;
    background-size: inherit;
}

.docs .url-box{
	background: #232323;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 20px;
}

.docs .url-box > *{
	color: #fff;
	font-weight: bold;
	float: left;
	box-sizing: border-box;
	padding: 6px;
	font-weight: normal;
}

.docs .url-box .type{
	width: 15%;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
}

.docs .url-box .type.get{
	background-color: #bf7050;
}

.docs .url-box .type.post{
	background-color: #50a0bf;
}

.docs .url-box .type.delete{
	background-color: #50a0bf;
}

.docs .url-box .type.patch{
	background-color: #50bfa4;
}

.docs .url-box .type.put{
	background-color: #67bf50;
}


.docs .url-box .url{
	width: 85%;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;

}

.docs dl{
	border: 1px solid #ddd;
	overflow: hidden;
	margin-bottom: 30px;
	position: relative;
}

.docs dl dt,
.docs dl dd{
	padding: 4px;
	box-sizing: border-box;
}

.docs dl dt{
	width: 20%;
	font-weight: bold;
	position: absolute;
}

.docs dl dd{
	width: 80%;
	margin-left: 20%;
}

.docs dl dd p{
	display: inline;
}

.docs dl dd code{
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
	color: #000;
	font-weight: bold;
	display: inline-block;
    min-width: 140px;
}

.docs .content a > code{
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
	color: #2f8ab7;
}

/******************************
* Android getting started
******************************/

.getting-started.android #page-header{
    background-color: #000000;
    background-image: url(/assets/img/tutorial/backgrounds/android-logo.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.getting-started.android #page-header h1,
.getting-started.android #page-header h2{
	text-align: left;
	margin-left: 30%;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.getting-started.android #page-header{
		background-image: none;
	}

	.getting-started.android #page-header h1,
	.getting-started.android #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* AngularJS getting started
******************************/
.getting-started.angularjs #page-header{
    background-color: #b9dffb;
    background-image: url(/assets/img/tutorial/backgrounds/angular-logo.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.getting-started.angularjs #page-header h1,
.getting-started.angularjs #page-header h2{
	text-align: left;
	margin-left: 30%;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.getting-started.angularjs #page-header{
		background-image: none;
	}

	.getting-started.angularjs #page-header h1,
	.getting-started.angularjs #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Angular 2 getting started
******************************/
.getting-started.angular-2 #page-header{
    background-color: #b9dffb;
    background-image: url(/assets/img/tutorial/backgrounds/angular-logo.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.getting-started.angular-2 #page-header h1,
.getting-started.angular-2 #page-header h2{
	text-align: left;
	margin-left: 30%;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.getting-started.angular-2 #page-header{
		background-image: none;
	}

	.getting-started.angular-2 #page-header h1,
	.getting-started.angular-2 #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Preact getting started
******************************/
.getting-started.preact #page-header {
    background-color: #2b313c;
    background-image: url(/assets/img/tutorial/backgrounds/preact_logo.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.getting-started.preact #page-header h1,
.getting-started.preact #page-header h2{
	text-align: left;
	margin-left: 30%;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.getting-started.preact #page-header{
		background-image: none;
	}

	.getting-started.preact #page-header h1,
	.getting-started.preact #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* C++ getting started
******************************/
.getting-started.cplusplus #page-header{
    background-color: rgb(251, 251, 251);
    background-image: url(/assets/img/tutorial/backgrounds/cpp.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.getting-started.cplusplus #page-header h1,
.getting-started.cplusplus #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.getting-started.cplusplus #dsh-nav .main > *,
.getting-started.cplusplus #dsh-nav .sub > *,
.getting-started.cplusplus #page-header *{
	color: #474747;
}

.getting-started.cplusplus span.dropdown .head i,
.getting-started.cplusplus span.dropdown .head i {
	border-top-color: #474747;
}

.getting-started.cplusplus #dsh-nav .sub > *.button,
.getting-started.cplusplus #dsh-nav .sub > *.button{
	border-color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.getting-started.cplusplus #page-header{
		background-image: none;
	}

	.getting-started.cplusplus #page-header h1,
	.getting-started.cplusplus #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* C++ Docs
******************************/
.client-cpp #page-header{
    background-color: rgb(251, 251, 251);
    background-image: url(/assets/img/tutorial/backgrounds/cpp.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.client-cpp #page-header h1,
.client-cpp #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.client-cpp #dsh-nav .main > *,
.client-cpp #dsh-nav .sub > *,
.client-cpp #page-header *{
	color: #474747;
}

.client-cpp span.dropdown .head i,
.client-cpp span.dropdown .head i {
	border-top-color: #474747;
}

.client-cpp #dsh-nav .sub > *.button,
.client-cpp #dsh-nav .sub > *.button{
	border-color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.client-cpp #page-header{
		background-image: none;
	}

	.client-cpp #page-header h1,
	.client-cpp #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Ionic 2 getting started
******************************/
.getting-started.ionic-2 #page-header{
    background-color: #235591;
    background-image: url(/assets/img/tutorial/backgrounds/ionic-logo.png);
    background-size: 10%;
    background-position: 20% center;
    text-align: center;
}

.getting-started.ionic-2 #page-header h1,
.getting-started.ionic-2 #page-header h2{
	text-align: left;
	margin-left: 30%;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.getting-started.ionic-2 #page-header{
		background-image: none;
	}

	.getting-started.ionic-2 #page-header h1,
	.getting-started.ionic-2 #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Java getting started
******************************/
.getting-started.java #page-header{
    background-color: #ffffff;
    background-image: url(/assets/img/tutorial/backgrounds/java-logo.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.getting-started.java #page-header h1,
.getting-started.java #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.getting-started.java #dsh-nav .main > *,
.getting-started.java #dsh-nav .sub > *,
.getting-started.java #page-header *,
.example-apps.pizza-delivery-tracker #dsh-nav .main > *,
.example-apps.pizza-delivery-tracker #dsh-nav .sub > *,
.example-apps.pizza-delivery-tracker #page-header *{
	color: #474747;
}

.getting-started.java #dsh-nav span.dropdown .head i,
.getting-started.java #dsh-nav span.dropdown .head i {
	border-top-color: #474747;
}

.getting-started.java #dsh-nav .sub > *.button,
.getting-started.java #dsh-nav .sub > *.button{
	border-color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.getting-started.java #page-header{
		background-image: none;
	}

	.getting-started.java #page-header h1,
	.getting-started.java #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* VueJs getting started
******************************/
.getting-started.vuejs #page-header{
    background-color: #8fcd9e;
    background-image: url(/assets/img/tutorial/backgrounds/vue-logo.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.getting-started.vuejs #page-header h1,
.getting-started.vuejs #page-header h2{
	text-align: left;
	margin-left: 30%;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.getting-started.vuejs #page-header{
		background-image: none;
	}

	.getting-started.vuejs #page-header h1,
	.getting-started.vuejs #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}


/******************************
* React getting started
******************************/
.getting-started.react #page-header{
    background-color: #fff;
    background-image: url(/assets/img/tutorial/backgrounds/react-logo.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.getting-started.react #page-header h1,
.getting-started.react #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.getting-started.react #page-header *{
	color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.getting-started.react #page-header{
		background-image: none;
	}

	.getting-started.react #page-header h1,
	.getting-started.react #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* React Native getting started
******************************/
.getting-started.react-native #page-header{
    background-color: #fff;
    background-image: url(/assets/img/tutorial/backgrounds/react-logo.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.getting-started.react-native #page-header h1,
.getting-started.react-native #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.getting-started.react-native #page-header *{
	color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.getting-started.react-native #page-header{
		background-image: none;
	}

	.getting-started.react-native #page-header h1,
	.getting-started.react-native #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Coffee Ordering with Progress Bar
******************************/
.coffee-order-system #page-header{
	background-image: url(/assets/img/tutorial/backgrounds/coffeapp.png);
	background-position: top;
	background-color: #493933;
}

.coffee-order-system #page-header *{
	color: #fff;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.coffee-order-system #page-header{
		background-image: none;
	}

	.coffee-order-system #page-header h1,
	.coffee-order-system #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Facebook Activity Stream
******************************/
.example-apps.activity-streams #page-header{
	background-image: url(/assets/img/tutorial/backgrounds/activity-stream.jpg);
	background-position: 0px -3px;
	background-color: #36538D;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.activity-streams #page-header{
		background-image: none;
	}

	.example-apps.activity-streams #page-header h1,
	.example-apps.activity-streams #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Android Chat App
******************************/
.example-apps.android-chat-app #page-header{
	background-image: url(/assets/img/tutorial/backgrounds/realtimechatapp.jpg);
	background-color: #fff;
	background-position: 0px -59px;
}

.example-apps.android-chat-app #page-header *{
	color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.android-chat-app #page-header{
		background-image: none;
	}

	.example-apps.android-chat-app #page-header h1,
	.example-apps.android-chat-app #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Post-It-Board
******************************/
.example-apps.collaborative-post-it-board #page-header{
	background-image: url(/assets/img/tutorial/backgrounds/post-it-board.jpg);
	background-position: top;
}

.example-apps.collaborative-post-it-board #page-header *{
	color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.collaborative-post-it-board #page-header h1,
	.example-apps.collaborative-post-it-board #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Music Collection
******************************/
.example-apps.music-collection #page-header {
	background-image: url(/assets/img/tutorial/backgrounds/music_collection.jpg);
	background-color: #4f0f51;
	background-position: center;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.music-collection #page-header h1,
	.example-apps.music-collection #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Pizza Tracker
******************************/
.example-apps.pizza-delivery-tracker #page-header{
	background-image: url(/assets/img/tutorial/backgrounds/pizza.jpg);
	background-position: center;
	background-color: #5EA4BE;
}

.example-apps.pizza-delivery-tracker #dsh-logo{
	background-image: url(/assets/img/deepstreamhub-logo-white.png);
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.pizza-delivery-tracker #page-header{
		background-image: none;
	}

	.example-apps.pizza-delivery-tracker #page-header h1,
	.example-apps.pizza-delivery-tracker #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* ToDo List
******************************/
.example-apps.realtime-todo-list #page-header{
	background-color: #faddba;
	background-image: url(/assets/img/tutorial/backgrounds/todo_list.png);
	background-position: bottom;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.realtime-todo-list #page-header{
		background-image: none;
	}

	.example-apps.realtime-todo-list #page-header h1,
	.example-apps.realtime-todo-list #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Realtime Chat in Browser
******************************/
.example-apps.realtime-chat-in-browser #page-header{
	background-color: rgb(61, 49, 59);
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.realtime-chat-in-browser #page-header{
		background-image: none;
	}

	.example-apps.realtime-chat-in-browser #page-header h1,
	.example-apps.realtime-chat-in-browser #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Realtime Cart
******************************/
.example-apps.realtime-cart #page-header{
	background-color: #bcd59f;
	background-image: url(/assets/img/tutorial/backgrounds/cartheader.png);
    background-size: 26%;
    background-position: 88% bottom;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.realtime-cart #page-header{
		background-image: none;
	}

	.example-apps.realtime-cart #page-header h1,
	.example-apps.realtime-cart #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Mailchimp Integration
******************************/
.integrations.mailchimp #page-header{
    background-color: #fcfcfc;
    background-image: url(/assets/img/tutorial/backgrounds/mailchimp.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.integrations.mailchimp #page-header h1,
.integrations.mailchimp #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.integrations.mailchimp #page-header *{
	color: #474747;
}


@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.integrations.mailchimp #page-header{
		background-image: none;
	}

	.integrations.mailchimp #page-header h1,
	.integrations.mailchimp #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}


/******************************
* AWS-SNS Integration
******************************/
.integrations.aws-sns #page-header,
.integrations.aws-lambda #page-header {
    background-color: #fcfcfc;
    background-image: url(/assets/img/tutorial/backgrounds/sns.png);
    background-size: initial;
    background-position: 18% center;
    text-align: center;
}

.integrations.aws-sns #page-header h1,
.integrations.aws-sns #page-header h2,
.integrations.aws-lambda #page-header h1,
.integrations.aws-lambda #page-header h2 {
	text-align: left;
	margin-left: 30%;
}

.integrations.aws-sns #page-header *,
.integrations.aws-lambda #page-header * {
	color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.integrations.aws-sns #page-header,
	.integrations.aws-lambda #page-header {
		background-image: none;
	}

	.integrations.aws-sns #page-header h1,
	.integrations.aws-sns #page-header h2 {
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* AWS-Lambda Integration
******************************/
.integrations.aws-lambda #page-header {
    background-image: url(/assets/img/tutorial/backgrounds/aws-lambda.png);
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.integrations.aws-lambda #page-header{
		background-image: none;
	}

	.integrations.aws-lambda #page-header h1,
	.integrations.aws-lambda #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* GitHub with Java Integration
******************************/
.integrations.github #page-header{
    background-color: #92C7E7;
    background-image: url(/assets/img/tutorial/backgrounds/github.jpg);
    background-size: initial;
    background-position: 18% -177px;
    text-align: center;
}

.integrations.github #page-header *{
	color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.integrations.github #page-header{
		background-image: none;
	}

	.integrations.github #page-header h1,
	.integrations.github #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Pusher Integration
******************************/
.integrations.pusher #page-header {
    background-color: #fcfcfc;
    background-image: url(/assets/img/tutorial/backgrounds/pusher.png);
    background-size: initial;
    background-position: 22% center;
    text-align: center;
}

.integrations.pusher #page-header h1,
.integrations.pusher #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.integrations.pusher #page-header *{
	color: #474747;
}


@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.integrations.pusher #page-header{
		background-image: none;
	}

	.integrations.pusher #page-header h1,
	.integrations.pusher #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Sendgrid Integration
******************************/
.integrations.sendgrid #page-header{
    background-color: #fcfcfc;
    background-image: url(/assets/img/tutorial/backgrounds/sendgrid.png);
    background-size: initial;
    background-position: 19% center;
    text-align: center;
}

.integrations.sendgrid #page-header h1,
.integrations.sendgrid #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.integrations.sendgrid #page-header *{
	color: #474747;
}


@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.integrations.sendgrid #page-header{
		background-image: none;
	}

	.integrations.sendgrid #page-header h1,
	.integrations.sendgrid #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Slack Integration
******************************/
.integrations.slack #page-header{
    background-color: #fcfcfc;
    background-image: url(/assets/img/tutorial/backgrounds/slack.png);
    background-size: initial;
    background-position: 19% center;
    text-align: center;
}

.integrations.slack #page-header h1,
.integrations.slack #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.integrations.slack #page-header *{
	color: #474747;
}


@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.integrations.slack #page-header{
		background-image: none;
	}

	.integrations.slack #page-header h1,
	.integrations.slack #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Twilio Integration
******************************/
.integrations.twilio #page-header{
    background-color: #fcfcfc;
    background-image: url(/assets/img/tutorial/backgrounds/twilio.png);
    background-size: initial;
    background-position: 19% center;
    text-align: center;
}

.integrations.twilio #page-header h1,
.integrations.twilio #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.integrations.twilio #page-header *{
	color: #474747;
}


@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.integrations.twilio #page-header{
		background-image: none;
	}

	.integrations.twilio #page-header h1,
	.integrations.twilio #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Nexmo Integration
******************************/
.integrations.nexmo #page-header{
    background-color: #fff;
    background-image: url(/assets/img/tutorial/backgrounds/nexmo.png);
    background-size: initial;
    background-position: 20% center;
    text-align: center;
}

.integrations.nexmo #page-header h1,
.integrations.nexmo #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.integrations.nexmo #page-header *{
	color: #474747;
}


@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.integrations.nexmo #page-header{
		background-image: none;
	}

	.integrations.nexmo #page-header h1,
	.integrations.nexmo #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Rialtime Flight Tracker
******************************/
.example-apps.realtime-flight-tracker #page-header {
    background-color: #000;
    background-image: url(/assets/img/tutorial/backgrounds/realtime-flight-tracker.png);
    background-size: initial;
    background-position: top;
}

.example-apps.realtime-flight-tracker #dsh-nav .main > *,
.example-apps.realtime-flight-tracker #dsh-nav .sub > *,
.example-apps.realtime-flight-tracker #page-header *{
	color: #fff;
}

.example-apps.realtime-flight-tracker #dsh-nav span.dropdown .head i {
	border-top-color: #fff;
}

.example-apps.realtime-flight-tracker #dsh-nav .sub > *.button {
	border-color: #fff;
}

.example-apps.realtime-flight-tracker #dsh-logo{
	background-image: url(/assets/img/deepstreamhub-logo-white.png);
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.realtime-flight-tracker #page-header{
		background-image: none;
	}

	.example-apps.realtime-flight-tracker #page-header h1,
	.example-apps.realtime-flight-tracker #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Modelling Relational Data
******************************/
.recipes.modelling-relational-data #page-header {
    background-color: #fff;
    background-image: url(/assets/img/tutorial/backgrounds/realtional_data.png);
    background-size: 85%;
    background-position: 296px top;
}

.recipes.modelling-relational-data #page-header *{
	color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.recipes.modelling-relational-data #page-header{
		background-image: none;
	}

	.recipes.modelling-relational-data #page-header h1,
	.recipes.modelling-relational-data #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Realtime Comment Feed
******************************/
.example-apps.realtime-comment-feed-using-vue #page-header {
    background-color: #5687EE;
    background-image: url(/assets/img/tutorial/backgrounds/comment_feed.jpg);
    background-size: initial;
    background-position: center;
}

.example-apps.realtime-comment-feed-using-vue #dsh-nav .main > *,
.example-apps.realtime-comment-feed-using-vue #dsh-nav .sub > *,
.example-apps.realtime-comment-feed-using-vue #page-header *{
	color: #fff;
}

.example-apps.realtime-comment-feed-using-vue #dsh-nav span.dropdown .head i {
	border-top-color: #fff;
}

.example-apps.realtime-comment-feed-using-vue #dsh-nav .sub > *.button {
	border-color: #fff;
}

.example-apps.realtime-comment-feed-using-vue #dsh-logo{
	background-image: url(/assets/img/deepstreamhub-logo-white.png);
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.realtime-comment-feed-using-vue #page-header{
		background-image: none;
	}

	.example-apps.realtime-comment-feed-using-vue #page-header h1,
	.example-apps.realtime-comment-feed-using-vue #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}


/******************************
* Github & Live Example Links
******************************/
.docs .content .gh-live-example{
	border: 1px solid #eee;
	margin: 16px 0;
	padding: 16px;
	text-align: center;
}

.docs .content .gh-live-example > div{
	overflow: hidden;
}

.docs .content .gh-live-example h4{
    font-family: RobotoCondensedLight;
    font-weight: 100;
    font-size: 18px;
    margin-bottom: 14px;
}

.docs .content .gh-live-example a{
    display: inline-block;
    width: 220px;
    text-decoration: none;
    background: #2f8ab7;
    padding: 5px 0;
    margin: 0 15px;
    color: #fff;
    cursor: pointer;
    transition: all 300ms ease;
}

.docs .content .gh-live-example a:hover{
	background-color: #23adf1;
}

.docs .content .gh-live-example a i{
    color: #fff;
    position: relative;
    margin-right: 6px;
    font-size: 19px;
    top: 2px;
}

/******************************
* Guides
******************************/
.guides.email-auth #page-header,
.guides.http-webhook-auth #page-header,
.guides.open-auth #page-header,
.guides.events #page-header,
.guides.remote-procedure-calls #page-header,
.guides.deepstreamhub-concepts #page-header,
.guides.handling-data-conflicts #page-header,
.guides.security-overview #page-header,
.guides.user-specific-data #page-header,
.guides.valve-advanced #page-header,
.guides.valve-realtime #page-header,
.guides.valve-simple #page-header,
.guides.anonymous-records #page-header,
.guides.lists #page-header,
.guides.records #page-header,
.guides.active-data-providers #page-header,
.guides.http-batch-updates #page-header,
.guides.jwt-auth #page-header {
    background-color: #000000;
    background-image: url(/assets/img/tutorial/backgrounds/general-bg.jpg);
    background-size: initial;
    background-position: top;
}

.guides.email-auth h1,
.guides.http-webhook-auth h1,
.guides.open-auth #page-header h1,
.guides.events h1,
.guides.remote-procedure-calls h1,
.guides.deepstreamhub-concepts h1,
.guides.handling-data-conflicts h1,
.guides.security-overview h1,
.guides.user-specific-data h1,
.guides.valve-advanced h1,
.guides.valve-realtime h1,
.guides.valve-simple h1,
.guides.anonymous-records h1,
.guides.lists h1,
.guides.records h1,
.guides.active-data-providers h1,
.guides.email-auth h2,
.guides.http-webhook-auth h2,
.guides.open-auth #page-header h2
.guides.events h2,
.guides.remote-procedure-calls h2,
.guides.deepstreamhub-concepts h2,
.guides.handling-data-conflicts h2,
.guides.security-overview h2,
.guides.user-specific-data h2,
.guides.valve-advanced h2,
.guides.valve-realtime h2,
.guides.valve-simple h2,
.guides.anonymous-records h2,
.guides.lists h2,
.guides.records h2,
.guides.active-data-providers h2 *{
	text-align: left;
}

.guides.email-auth #page-header *,
.guides.http-webhook-auth #page-header *,
.guides.open-auth #page-header *,
.guides.events #page-header *,
.guides.remote-procedure-calls #page-header *,
.guides.deepstreamhub-concepts #page-header *,
.guides.handling-data-conflicts #page-header *,
.guides.security-overview #page-header *,
.guides.user-specific-data #page-header *,
.guides.valve-advanced #page-header *,
.guides.valve-realtime #page-header *,
.guides.valve-simple #page-header *,
.guides.anonymous-records #page-header *,
.guides.lists #page-header *,
.guides.records #page-header *{
	color: #fff;
}

/******************************
* Live progress Bar
******************************/
.recipes.live-progress-bar #page-header {
    background-color: #fff;
    background-image: url(/assets/img/tutorial/backgrounds/progress-bar.png);
    background-size: 85%;
    background-position: 333% 33%;
}

.recipes.live-progress-bar #page-header *{
	color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.recipes.live-progress-bar #page-header{
		background-image: none;
	}

	.recipes.live-progress-bar #page-header h1,
	.recipes.live-progress-bar #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Stock Price Grid
******************************/
.example-apps.stock-price-grid #page-header {
    background-color: #000000;
    background-image: url(/assets/img/tutorial/backgrounds/stock-price-grid.jpg);
    background-position: center;
}

.example-apps.stock-price-grid #dsh-nav .main > *,
.example-apps.stock-price-grid #dsh-nav .sub > *,
.example-apps.stock-price-grid #page-header *{
	color: #fff;
}

.example-apps.stock-price-grid #dsh-nav span.dropdown .head i {
	border-top-color: #fff;
}

.example-apps.stock-price-grid #dsh-nav .sub > *.button {
	border-color: #fff;
}

.example-apps.stock-price-grid #dsh-logo{
	background-image: url(/assets/img/deepstreamhub-logo-white.png);
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.stock-price-grid #page-header h1,
	.example-apps.stock-price-grid #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* Rrealtime Error Reporting
******************************/
.example-apps.error-reporting #page-header {
    background-color: #f1f6ff;
    background-image: url(/assets/img/tutorial/backgrounds/errorreporting.png);
	background-size: 17%;
    background-position: 17% center;
    text-align: center;
}

.example-apps.error-reporting #page-header h1,
.example-apps.error-reporting #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.example-apps.error-reporting #dsh-nav .main > *,
.example-apps.error-reporting #dsh-nav .sub > *,
.example-apps.error-reporting #page-header *{
	color: #474747;
}

.example-apps.error-reporting #dsh-nav span.dropdown .head i {
	border-top-color: #474747;
}

.example-apps.error-reporting #dsh-nav .sub > *.button {
	border-color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.error-reporting #page-header{
		background-image: none;
	}

	.example-apps.error-reporting #page-header h1,
	.example-apps.error-reporting #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* HTTP API
******************************/
.http.v1 #page-header, .http.administration-api #page-header {
    background-color: #121523;
    background-image: url(/assets/img/tutorial/backgrounds/http-background.jpg);
    background-repeat: repeat;
    background-position: bottom;
}

/******************************
HTTP getting started
******************************/
.getting-started.http #page-header{
    background-color: #f7f7f7;
    background-image: url(/assets/img/tutorial/backgrounds/http-icon.svg);
    background-size: 15%;
    background-position: 15% center;
    text-align: center;
}

.getting-started.http #page-header h1,
.getting-started.http #page-header h2{
	text-align: left;
	margin-left: 30%;
}

.getting-started.http #page-header * {
	color: #474747;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.getting-started.http #page-header{
		background-image: none;
	}

	.getting-started.http #page-header h1,
	.getting-started.http #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
* PHP CLIENT  API
******************************/
.client-php #page-header{
    background-color: #4F5B93;
    background-image: url(../img/docs/php-logo.png);
    background-size: 20%;
    background-position: 20% center;
    text-align: center;
}

.client-php #page-header .breadcrumbs a{
	border-bottom-color: #fff;
}

.client-php #dsh-nav .main > *,
.client-php #dsh-nav .sub > *{
	color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

.client-php #dsh-nav .main .sub-menu *{
	text-shadow: none;
}

.client-php #dsh-nav span.dropdown .head i{
	border-top-color: #fff;
}


.client-php #dsh-nav .sub > *.button {
	border-color: #fff;
}

@media screen and (max-width: 900px) {

	.client-php #page-header{
		background-image: none;
	}

}


/******************************
 IoT Light Sensor
******************************/
.example-apps.http-iot #page-header {
    background-color: #000000;
    background-image: url(/assets/img/tutorial/backgrounds/iot-http.jpg);
    background-position: center;
}

.example-apps.http-iot #dsh-nav .main > *,
.example-apps.http-iot #dsh-nav .sub > *,
.example-apps.http-iot #page-header *{
	color: #fff;
}

.example-apps.http-iot #dsh-nav span.dropdown .head i {
	border-top-color: #fff;
}

.example-apps.http-iot #dsh-nav .sub > *.button {
	border-color: #fff;
}

.example-apps.http-iot #dsh-logo{
	background-image: url(/assets/img/deepstreamhub-logo-white.png);
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.http-iot #page-header h1,
	.example-apps.http-iot #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
 IoT Light Sensor
******************************/
.example-apps.http-iot-stock-monitor #page-header {
    background-color: #000000;
    background-image: url(/assets/img/tutorial/backgrounds/iot-fridge-2.jpg);
    background-position: center;
}

.example-apps.http-iot-stock-monitor #dsh-nav .main > *,
.example-apps.http-iot-stock-monitor #dsh-nav .sub > *,
.example-apps.http-iot-stock-monitor #page-header *{
	color: #fff;
}

.example-apps.http-iot-stock-monitor #dsh-nav span.dropdown .head i {
	border-top-color: #fff;
}

.example-apps.http-iot-stock-monitor #dsh-nav .sub > *.button {
	border-color: #fff;
}

.example-apps.http-iot-stock-monitor #dsh-logo{
	background-image: url(/assets/img/deepstreamhub-logo-white.png);
}

/******************************
Open source
******************************/
.install-link{
	display: block;
    border: 1px solid #0FBBEC;
    background: #fff;
    padding: 10px 0;
    text-align: center;
    text-decoration: none !important;
    width: 70%;
    box-shadow: 0 0 4px rgba(0,0,0,0.5);
    font-weight: bold;
    margin: 40px auto;
}

@media screen and (max-width: 900px) {
	#page-header{
		padding: 120px 5% 0;
	}

	.example-apps.http-iot-stock-monitor #page-header h1,
	.example-apps.http-iot-stock-monitor #page-header h2{
		text-align: center;
		margin-left: 0;
	}
}

/******************************
Use cases Briteback
******************************/
.examples.usecase-briteback #page-header{
    background-color: #000000;
    background-image: url(/use-cases/examples/usecase-briteback/bg.jpg);
    background-size: initial;
    background-position: center;
}

.examples.usecase-briteback #page-header * {
	color: #fff;
}

/******************************
Benchmarking pages
******************************/
.performance.four-billion-messages-per-hour #page-header,
.performance.overview #page-header,
.performance.single-node-vs-cluster #page-header {
    background-color: #000000;
    background-image: url(/benchmarking/benchmarking-bg.jpg);
    background-size: initial;
    background-position: center;
}

.contribution-guidelines.guidelines #page-header {
	background-image: url(/assets/img/tutorial/backgrounds/backgroung-general.jpg);
	background-color: #9cb7be;
    background-size: initial;
    background-position: center;
	height: auto;
	min-height: 300px;
}

.integrations.cache-redis #page-header {
	height: auto;
	min-height: 300px;
}


.server.constants-and-errors .apidoc-table-container td {
	font-size: 14px !important;
}