/*--------------------------------------------------*/
/* Main                                             */

	html {
		font: 13px "Lucida Grande";
		font: menu;
		padding-bottom: 1em; /* Space for the browsers floating status bar */
	}

	h1 {
		font-size: 1.2em;
	}

/*--------------------------------------------------*/
/* Icons                                            */

	#window em.icon {
		background: url('./img/icons.png') no-repeat 0 0;
		float: left;
		margin: 2px 4px 0 0;
		width: 10px;
		height: 10px;
		text-indent: -5000px;
	}

	#window em.icon_2 {
		background-position: 0 -10px;
	}

	#window em.icon_3 {
		background-position: 0 -20px;
	}

	#window.http em.icon.https {
		background-position: 0 0;
	}

	#window em.icon_open {
		background-position: -10px 0;
	}

	#window em.icon_closed {
		background-position: -10px -10px;
	}

/*--------------------------------------------------*/
/* HTTP/HTTPS content                               */

	#window.http div.https,
	#window.https div.http,
	#window.https div.http_warning {
		display: none;
	}

	#window.http div.http_warning p {
		background: #A00;
		color: #FFF;
		text-align: center;
		padding: 4px 0;
		margin: 1em 0;
	}

/*--------------------------------------------------*/
/* Window                                           */

	#window.js {
		position: relative;
		background: #FFF url('img/background.jpg') no-repeat 50% 50%;
		width: 889px;
		height: 465px;
		margin: 0 auto;
	}

/*--------------------------------------------------*/
/* Navigation                                       */

	#window.js nav {
		position: absolute;
		left: 20px;
		top: 66px;
		width: 200px;
		height: 379px;
		box-sizing: border-box;
	}

	#window nav ul {
		list-style: none;
		margin: 1em;
		padding: 0;
	}

	#window.js nav ul {
		margin: 0;
		padding: 8px 0 0 0;
	}

	#window.js nav ul ul {
		padding: 0 0 10px 0;
	}

	#window.js nav ul li a {
		display: block;
		padding: 2px 10px;
		color: inherit;
		text-decoration: none;
	}

	#window.js nav ul ul li a {
		padding-left: 20px;
	}

	#window.js nav ul li a.focus {
		background: #677798;
		color: #FFF;
	}

	#window.js nav ul li a em.icon {
		float: right;
		margin: 3px 0 0 0;
	}

/*--------------------------------------------------*/
/* Section                                          */

	#window section {
		border: 2px solid #000;
		padding: 1em;
		margin: 0 0 1em 0;
	}

	#window.js section {
		border: 0;
		position: absolute;
		left: 221px;
		top: 66px;
		width: 648px;
		height: 356px;
		padding: 10px;
		box-sizing: border-box;
		overflow: scroll;
	}

	#window section > * + *,
	#window section table + table {
		margin: 1em 0 0 0;
	}

	#window section h2 {
		margin: 0;
		font-size: 1.1em;
	}

	#window section h3 {
		font-size: 1em;
	}

	#window section h3 + table {
		margin-top: 0;
	}

	#window section h4 {
		font-size: 0.85em;
	}

	#window section h4 + table {
		margin-top: 0;
	}

	#window section .warning {
		color: #F00;
	}

	#window section em.warning {
		font-style: normal;
	}

	#window section table {
		font-size: 0.85em;
	}

	#window section table th,
	#window section table td {
		vertical-align: top;
	}

	#window section div.resource h4 {
		margin-bottom: 0;
	}

	#window section div.resource p {
		margin: 2px 0;
		padding-left: 14px;
	}

	#window section div.resource ul {
		margin: 2px 0;
		padding-left: 28px;
		list-style: none;
	}

	#window section div.value h4 {
		margin-bottom: 0;
	}

	#window section div.value p {
		margin: 2px 0;
		padding-left: 14px;
	}

	#window section p.code code {
		display: block;
		padding-left: 14px;
	}

	#window footer {
		border-top: 2px solid #000;
	}

	#window footer h4,
	#notes footer h4 {
		font-size: 1em;
		margin: 0 0 1em 0;
	}

	#notes footer img.screenshot {
		border: 1px solid #A3A3A3;
	}

/*--------------------------------------------------*/
/* Connection                                       */

	#window table.connection td:first-child {
		width: 16em;
		text-align: right;
		padding-right: 1em;
		vertical-align: middle;
	}

/*--------------------------------------------------*/
/* TLS                                              */

	#window section#tls table th:first-child,
	#window section#tls table td:first-child,
	#window section#tls-certs table th:first-child,
	#window section#tls-certs table td:first-child {
		width: 16em;
		text-align: right;
		padding-right: 1em;
	}

	#window section#tls-certs table.cert_path th:first-child,
	#window section#tls-certs table.cert_path td:first-child {
		width: 2em;
	}

	#window section#tls-certs table.cert_path td span {
		display: block;
	}

	#window section#tls-certs table.cert_path td span.indent {
		padding-left: 14px;
	}

	#window section#tls-hpkp .fields div:first-child {
		padding-bottom: 3px;
	}

/*--------------------------------------------------*/
/* CSP                                              */

	#window section#csp table tbody th {
		text-align: right;
		width: 11em;
	}

	#window section#csp table td.help {
		padding-left: 14px;
	}

	#window section#csp table tr.usage td {
		padding-left: 15px;
		color: #AAA;
	}

	#window section#csp table tr.usage + tr:not(.usage) td {
		padding-top: 1em;
	}

	#window section#csp footer .example,
	#notes footer.csp .example {
		padding: 0.2em 0 1em 4em;
		max-width: 63em;
		text-indent: -2em;
	}

/*--------------------------------------------------*/
/* Cookies                                          */

	#window section#cookies table th,
	#window section#cookies table td {
		padding-right: 1em;
		text-align: left;
	}

	#window section#cookies table tbody th {
		text-align: right;
		padding-left: 1em;
	}

	#window section#cookies table thead th.result {
		text-align: center;
	}

	#window section#cookies table tbody td.result em {
		float: none;
		display: block;
		margin: 2px auto 0 auto;
	}
