/* --------------------------------------------------------------
  style.css 2015-07-09 gm
  Gambio GmbH
  http://www.gambio.de
  Copyright (c) 2015 Gambio GmbH
  Released under the GNU General Public License (Version 2)
  [http://www.gnu.org/licenses/gpl-2.0.html]
  -------------------------------------------------------------- */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900,900italic);

* {
	margin:  0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Roboto, "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 15px;
	color: #333333;
	background-color: #FFFFFF;
	/* Header height for padding-top */
	padding-top: 50px;
}

.wrap {
	max-width: 1500px;
	margin: auto;
}

/* SECTION
 ---------------------------------------------------------------------------- */

section {
	max-width: 1024px;
	margin: 0 auto 50px auto;
}

section h1 {
	color: #2196F3;
	margin-bottom: 25px;
	font-size: 2em;
}

section p {
	line-height: 1.7;
	margin-bottom: 20px;
}

section ul {
	line-height: 1.5;
	padding-left: 40px;
	margin-bottom: 20px;
}

section ul li,
section ol li {
	margin-bottom: 3px;
}

section a {
	text-decoration: none;
	color: #2074FF;
}

section a:hover {
	color: #5092FF;
}

section a:active {
	color: #2168DD;
}

section .example {
	overflow: auto;
}

section .example > pre,
section .example > div {
	float: left;
	width: 47%;
	display: inline-block;
	margin-right: 3%;
}

section .example > div {
	padding: 10px;
}

section .example > pre {
	font-size: 0.9em;
}

section .example.split > pre,
section .example.split > div {
	width: 100%;
	margin-bottom: 20px;
}

section .example.crop {
	max-height: 700px; /* crop long examples */
}

section .blockquote {
	display: block;
	margin: 30px 0;
	border-left: 5px solid #E5E5E5;
	padding: 10px 25px;
	font-weight: 100;
	font-size: 1.3em;
	color: #868686;
}

/* HEADER
 ---------------------------------------------------------------------------- */

header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 74px;
	background-color: #2196F3;
	padding: 20px;
	z-index: 1;
}

header h1 {
	display: inline-block;
	margin-top: 1px;
	float: left;
	font-size: 1.5em;
	color: white;
}

header nav {
	display: inline-block;
	float: right;
	margin-top: 7px;
}

header nav a {
	color: #FFF;
	margin-right: 35px;
	transition: color 0.2s linear;
}

header nav a:hover {
	color: #A7D8FF;
	text-decoration: none;
}

header nav a:active {
	color: #8AB3D9;
}

/* FOOTER
 ---------------------------------------------------------------------------- */

footer {
	padding: 15px 20px;
	background-color: #E5E5E5;
	color: #8C8C8C;
	font-size: 0.8em;
	text-align: center;
}

/* MASTHEAD
 ---------------------------------------------------------------------------- */
#masthead {
	height: 500px;
	background-color: #2196F3;
	text-align: center;
	padding: 100px;
	max-width: none;
}

#masthead h1 {
	font-size: 4em;
	margin-bottom: 25px;
	color: #FFFFFF;
}

#masthead p {
	font-size: 1.3em;
	line-height: 2;
	color: #FFFFFF;
	max-width: 850px;
	margin: auto;
}

/* GX-ADMIN FIXES
 ---------------------------------------------------------------------------- */
.gx-compatibility select {
	background: url(../images/icon-caret-down.png) no-repeat right 6px center #FFF !important;
}

/* BOOTSTRAP AFFIX NAVIGATION
---------------------------------------------------------------------------- */
#spy {
	top: 100px;
	margin-bottom: 0;
	background-color: #fff;
	border-bottom: 0;
	max-width: 150px;
}

.nav-pills>li.active>a, 
.nav-pills>li.active>a:hover, 
.nav-pills>li.active>a:focus {
	color: #fff;
	background-color: #2196F3 !important;
}