@import "_colors.css";
@import "_typography.css";
@import "_components.css";


/* layout */

.flex-container {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;
	align-items: center;
}

.flex-container.space-around {
	justify-content: space-around;
}

.flex-container.space-between {
	justify-content: space-between;
}

.flex-container.align-center {
	align-items: center;
}

.flex-container.align-top {
	align-items: flex-start;
}

.flex-container.justify-center {
	justify-content: center;
}

.flex-wrap {
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap; /* Safari 6.1+ */
}

.no-left-padding {
	padding-left: 0;
}

.no-right-padding {
	padding-right: 0;
}

.no-top-margin {
	margin-top: 0;
}

.top-margin {
	margin-top: 1.7rem;
}

.bottom-margin {
	margin-bottom: 1.7rem;
}


/* page layout */

.splash {
	padding-bottom: 3em;
}

/* ----  header ----- */

.header {
  padding: 4.5em 2em 0 2em;
	margin-bottom: 6em;
}

.header__logo {
	width: 200px;
	margin-bottom: 0;
	margin-left: 16px;
}

.header__nav-links {
  list-style: none;
  margin-bottom: 0;
}

.header__nav-links li {
  float: left;
  padding: 0 1em;
  margin: 0;
}

a.header__nav-link {
	display: block;
  color: #444;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'europa';
}

a.header__nav-link:hover, a.header__nav-link:focus {
	text-decoration: none;
	color: #7FC6BC !important;
}

.header__nav-link.js-active {
	color: #7FC6BC;
}

@media (max-width: 60em) {
	.header__nav-link {
		font-size: 0.8571rem; /* 12px */
		line-height: 1.7500em; /* 21px */
		margin-bottom: 1.7500em;
	}

	.header__nav-links li {
		padding-right: .5em;
		padding-left: .5em;
	}

	.header {
		padding-top: 1.5em;
		margin-bottom: 1.5em;
	}
}

@media (max-width: 30em) {
	.header__nav-links li {
		/*float: none;*/
		margin-left: 1.5em;
	}

 	/*body {
		font-size: .8125rem;
	}*/

	html {
		font-size: 85%;
	}
}

@media (max-width: 30em) {
	html {
		font-size: 85%;
	}

	.header {
		padding-top: 1.5em;
		margin-bottom: 1.5em;
	}

	.header__nav-link {
		line-height: 1.25em;
		margin-bottom: .5em;
	}
}

.is-dropdown-submenu {
	border: none;
}

.is-dropdown-submenu .header__nav-link {
	/* max-width: 100%; */
	width: 20em;
	letter-spacing: 0;
	text-transform: none;
	font-weight: 600;
}

/* --- breadcrumbs */

.breadcrumbs {
	padding: 1.5em 2em;
}

a.breadcrumbs__item {
	display: inline-block;
	text-decoration: none;
	color: #3Ba5b1;
	padding: 0 .5em;
}

a.breadcrumbs__item:hover {
	text-decoration: none;
	color: #7FC6BC;
}

a.breadcrumbs__item.is-current {
	color: #666;
	cursor: default;
}

.breadcrumbs__symbol {
	display: inline-block;
	color: #787878;
}

/* ----  */

.underline-emphasis {
  background-image: linear-gradient(to right, rgba(59, 165, 177, .45), rgba(59, 165, 177, .45));
  background-position: 0 .9em;
  background-repeat: repeat-x;
  background-size: 8px 6px;
}

/* ------ */
.no-style {
	list-style: none;
	margin-left: 0;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

table th {
  background: #eeeef3;
}

.code {
	font-family: monospace;
	color: #2B95f1;
	font-size: 1.1em;
}

.tabs-panel {
	padding: 0;
}

.tabs-content {
	margin-bottom: 1.5rem;
}

pre {
	margin-bottom: 1.5rem;
}

.code-block {
	font-family: monospace;
	color: #5Bc5fF;
	font-size: 1.1em;
	background: #333;
	padding: 1rem;
	margin-bottom: 0;
}