/* ------------------------------------------------------
   Variables for easy find and replace


	$link:					#ee522e;
	$link-hover:			#ae550d;
	
	$second-bg-color: #F6F6F6;
	$second-font-color: #707070;
	$table-border-color: #D6D6D6;

	$body-font:				sans-serif;
	$heading-font:			Helvetica;


	Table of Contents for search based navigation


BASE STYLES

**** Box Model Reset

**** Typography
---- Lists
---- Quotations
---- Text level elements
---- Links

**** Content Design Patterns
---- Buttons
---- Alert box

**** Images

**** Forms

**** Tables
---- No Layout Table

**** Helper classes
---- Clearfix
---- Visually Hidden
---- Floats and positioning

GLOBAL TEMPLATE

**** Template Layout
---- Costings
---- Alert box
---- Sidebar
---- Document navigation



------------------------------------------------------ */

/* ------------------------------------------------------
**** Box Model Reset
------------------------------------------------------ */

*, *:before, *:after {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
 }


/* ------------------------------------------------------
**** Typography
------------------------------------------------------ */

html {
	font-size: 62.5%;
	-ms-text-size-adjust: 100%; /* These two prevent iOS text size adjust after orientation change, without disabling user zoom. */
	-webkit-text-size-adjust: 100%; 
}

body {
	margin-top: 88px !important;
	line-height: 24px;
	line-height: 2.4rem;
	font-size: 16px;
	font-size: 1.6rem;
	color: #363636;
	font-weight: 100;
	font-family: "museo-sans", Helvetica, Arial, sans-serif;
}


/* ---- Headings ---- */

h1, 
.h1, 
h2, 
.h2, 
h3, 
.h3, 
h4, 
.h4, 
h5, 
.h5, 
h6, 
.h6 {
	text-rendering: optimizelegibility;
	font-weight: 300;
}
	h1 small,
	h2 small,
	h3 small,
	h4 small,
	h5 small,
	h6 small {
	font-weight: normal;
	line-height: 1;
	color: #8a7b7b;
}


h1, .h1 {
	line-height: 30px;
	font-size: 20px;
	font-size: 2rem;
	font-weight: 100;
}

h2, .h2 {
	line-height: 30px;
	margin: 0 0 15px 0; 
	margin: 0 0 1.5rem 0;
	font-size: 30px;
	font-size: 3rem;
	color: #ee522e;
}

h3, .h3 {
	line-height: 30px;
	margin: 30px 0 15px 0;
	margin: 3rem 0 1.5rem 0;
	font-size: 26px;
	font-size: 2.6rem;
	color: #599784;
}

h4, .h4 {
	line-height: 30px;
	margin: 0 0 15px 0;
	margin: 0 0 1.5rem 0;
	font-size: 18px;
	font-size: 1.8rem;
}

h5, .h5 {
	line-height: 30px;
	margin: 0 0 15px 0;
	margin: 0 0 1.5rem 0;
	font-size: 17px;
	font-size: 1.7rem;
}

h6, .h6 {
	margin: 30px 0 15px 0;
	margin: 3rem 0 1.5rem 0
}

.heading-inline {
	display: inline;
	float: left;
	padding: 0;
}

p,
ol,
ul,
dl,
p,
ol,
ul,
dl,
address {
	margin: 0 0 15px;
	margin: 0 0 1.5rem;
}

small {
	font-size: 12.8px;
	font-size: 1.28rem;
}

/* ---- Lists ---- */

ul,
ol {
	padding: 0 0 0 20px;
	padding: 0 0 0 2rem;
}

ul > li,
ol > li {
	margin: 0 1.5rem;
}

li ul,
li ol {
	list-style-type: none;
	margin: 1rem 0;
}

ul.inline,
ol.inline {
	list-style-type: none;
	margin-left: 0;
}
	ul.inline > li,
	ol.inline > li {
		display: inline-block;
	}

/* ---- Quotations ---- */

blockquote {
	margin: 15px 0;
	margin: 1.5rem 0;
	padding: 5px 20px 15px;
	background: #f6f6f6;
	font-style: normal;
}
	blockquote small:before {
		content: '\00A0 \2014';
	}
	blockquote small:after {
		content: '';
	}
	blockquote.pull-right {
		float: right;
		background-color: transparent;
	}
	blockquote.pull-right p, blockquote.pull-right small {
		text-align: right;
	}
	blockquote.pull-right small:before {
		content: '';
	}
	blockquote.pull-right small:after {
		content: '\00A0 \2014';
	}
	blockquote cite {
		font-style: normal;
	}

q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: '';
	content: none;
}

/* ---- Text level elements ---- */

abbr[title] {
	border-bottom: 1px dotted #c6bfbf;
	cursor: help;
}

b, strong {
	font-weight: 500;
}

dfn {
	font-style: italic;
}

ins {
	background-color: #f6f6f6;
	color: #473f3f;
	text-decoration: none;
}

mark {
	background-color: #f6f6f6;
	color: #473f3f;
	font-style: italic;
	font-weight: bold;
}

pre,
code,
kbd,
samp {
	font-family: Monaco, Courier New, monospace;
	color: #484040;
	background: #efefef;
	background: rgba(0, 0, 0, .07);
	padding: 0 2px;
	margin: 0 -2px;
}

pre {
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -.5em;
}

sub {
	bottom: -.25em;
}


/* ---- Links ---- */


a {
	color: #ee522e;
	-ms-word-break: break-all;
	word-break: break-all;

	/* Non standard for webkit */
	word-break: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

a:hover {
	color: #d74c00;
}

/* Address `outline` inconsistency between Chrome and other browsers. */
a:focus {
	outline: thin dotted;
}

/* Improve readability when focused and also mouse hovered in all browsers. */
a:active,
a:hover {
	outline: 0;
}

/* ------------------------------------------------------
**** Design Patterns

Reusable bits of badass code that we probably use a lot

------------------------------------------------------ */

/* ---- Buttons ---- */

.button {
	text-decoration: none;
	-webkit-appearance: none;
	color: #FFF !important;
	background-color: #f77752;
	background-color: rgba(247, 119, 82, 1);
	text-transform: uppercase;
	padding: 25px 60px;
	line-height: 120%;
	font-size: 17px;
	font-size: 1.7rem;
	font-weight: 100;
	text-align: center;
	-webkit-transition: background-color 200ms ease-in;
	-moz-transition: background-color 200ms ease-in;
	-ms-transition: background-color 200ms ease-in;
	-o-transition: background-color 200ms ease-in;
	transition: background-color 200ms ease-in;
	display: inline-block;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
}

/* Firefox: Get rid of the inner focus border */
.button::-moz-focus-inner {
	padding: 0;
	border: 0;
}

.button-hover,
.button:hover,
.button:focus {
	background-color: rgba(247, 119, 82, 0.7);
}

.button-small {
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 8px;
	line-height: 0.8rem;
	padding: 5px 8px 5px;
	margin: -2px 0
}

.button-large {
	font-size: 20px;
	font-size: 2rem;
	padding: 15px 18px 10px;
}

.button-block {
	display: block;
	padding: 15px 40px;
	text-align: left;
}

/* Disabled/unavailable button style */

.button[disabled],
.button-disabled,
.button-disabled:hover,
.button-disabled:focus,
.button-disabled:active {
	background: #686a6c;
	cursor: default;
	box-shadow: none;
}

/* Gets the buttons to line up with form inputs when you want them to */

.button.inline {
	margin-bottom: 0.75em;
}

hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 2em 0;
	padding: 0;
	clear: right; /* --------!!!! Change this to left if the sidebar is on the right !!!!-------- */
}

/* ------------------------------------------------------
**** Images
------------------------------------------------------ */


img {
	vertical-align: middle;
	max-width: 100%;
	height: auto;
}

/* 

Old school image left and right are more generic now so we can use them on anything

You can find them in the helper classes section

*/

/* ------------------------------------------------------
**** Forms
------------------------------------------------------ */

form {
	margin: 0 0 2em 0;
}
	form ul {
		list-style-type: none;
		margin: 0 0 1.5em 0;
		padding: 0;
	}

fieldset {
	margin-bottom: 1.5em;
	padding: 0;
	border-width: 0;
}
fieldset:last-of-type {
	margin-bottom: 0;
}

legend {
	display: block;
	width: 100%;
	margin-top: 15px;
	*margin-left: -7px;
	padding: 00;
	border: 0;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.5em;
	white-space: normal;
}
	legend small {
		font-size: 1.125em;
		color: #625757;
	}

label,
input,
button,
select,
textarea {
	font-family: sans-serif;
}

label {
	display: block;
	margin-bottom: 0.375em;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"] {
	display: inline-block;
	margin-bottom: 0.75em;
	padding: 0.55em 10px 0.3em;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1.5em;
	color: inherit;
	border-radius: 4px;
	vertical-align: middle;
}

input,
textarea {
	width: 100%;
}

textarea {
	height: auto;
	resize-x: none;
}

textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
	background-color: white;
	border: 2px solid #d6d6d6;
}
	textarea:hover,
	input[type="text"]:hover,
	input[type="password"]:hover,
	input[type="datetime"]:hover,
	input[type="datetime-local"]:hover,
	input[type="date"]:hover,
	input[type="month"]:hover,
	input[type="time"]:hover,
	input[type="week"]:hover,
	input[type="number"]:hover,
	input[type="email"]:hover,
	input[type="url"]:hover,
	input[type="search"]:hover,
	input[type="tel"]:hover,
	input[type="color"]:hover {
		border-color: #aeaeae;
	}
	textarea:focus,
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="datetime"]:focus,
	input[type="datetime-local"]:focus,
	input[type="date"]:focus,
	input[type="month"]:focus,
	input[type="time"]:focus,
	input[type="week"]:focus,
	input[type="number"]:focus,
	input[type="email"]:focus,
	input[type="url"]:focus,
	input[type="search"]:focus,
	input[type="tel"]:focus,
	input[type="color"]:focus {
		border-color: #828282;
		outline: 0;
		outline: thin dotted \9;
	}

input[type="radio"],
input[type="checkbox"] {
	margin: 2px 0 0;
	margin-top: 6px \9;  /* IE8-9 */
	line-height: normal;
}

input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
	width: auto;
}

input.datepicker:first-child {
	margin-left: 0;
}
input.datepicker:last-child {
	margin-right: 0;
}
input.datepicker {
	width: 26.5%;
	margin: 0 1px;
}

select {
	padding: 6px;
	width: 90%;
	border: 2px solid #d6d6d6;
}

select[multiple],
select[size] {
	height: auto;
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
	outline: thin dotted #333;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	font-size: 14px;
	font-size: 1.4rem;
	color: #ccc;
}

.radio,
.checkbox {
	min-height: 1.5em;
}

.radio input[type="radio"],
.checkbox input[type="checkbox"] {
	float: left;
	margin-right: 10px;
}

.controls > .radio:first-child,
.controls > .checkbox:first-child {
	padding-top: 5px;
}

.radio.inline,
.checkbox.inline {
	display: inline-block;
	padding-top: 5px;
	margin-bottom: 0;
	vertical-align: middle;
}

.radio.inline + .radio.inline,
.checkbox.inline + .checkbox.inline {
	margin-left: 12px;
}

.-input-mini {
	width: 60px;
}

.-input-small {
	width: 90px;
}

.-input-medium {
	width: 150px;
}

.-input-large {
	width: 210px;
}

.-input-xlarge {
	width: 270px;
}

.-input-xxlarge {
	width: 530px;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
	opacity: .25;
}

.form-actions {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	padding: 0.5em 24px 1.5em;
	*zoom: 1;
}
	.form-actions:before, .form-actions:after {
		content: " ";
		display: table;
	}
	.form-actions:after {
		clear: both;
	}

[placeholder]:focus::-webkit-input-placeholder {
	opacity: 0;
	transition: opacity .5s .5s ease;
}

/* ------------------------------------------------------
**** Tables
------------------------------------------------------ */

table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 20px 0;
	margin: 2rem 0;
	max-width: 100%;
	width: 100%;
}

	table th,
	table td {
		padding: 8px;
		vertical-align: top;
		text-align: left;
		border: 1px solid #D6D6D6;
	}
	table td a {
		color: #363636 !important;
		text-decoration: none;
	}
	table th {
		background: #ebebeb;
		font-weight: 500;
	}
	table thead th {
		vertical-align: bottom; 
	}
	table tr.highlight-row {
		cursor: pointer;
	}
	table tr.highlight-row--okay:hover {
		background: #E9FDED;
	}
	table tr.highlight-row--warning:hover {
		background: #FFF6EB;
	}
	table tr.highlight-row--error:hover {
		background: #FFEDEB;
	}
	table tr.totals {
		font-weight: bold;
	}


/* Extra style bits for result tables */
	.result__res--okay {
		color: #0F571D;
	}
	.result__res--warning {
		color: #D46F17;
	}
	.result__res--error {
		color: #861300;
	}
	.result__name {
		margin: 0 0 1px 0;
		display: inline-block;
	}
	.result__expand {
		color: #555;
		cursor: pointer;
		display: block;
		text-decoration: underline;
	}
	.result__text {
		margin: 5px -8px -8px -8px;
		padding: 15px;
		border-top: 1px #D6D6D6 solid;
		background: #f8f8f8;
		display: none;
	}
		.result__text a:hover,
		.result__text a:focus,
		.result__text a:active {
			text-decoration: underline;
		}
		.result__text .info-footer {
			margin: 2em 0 0 0;
			font-size: 88%;
		}
		.result__text .info-footer a {
			text-decoration: underline;
		}
	.result__notes {
		padding: 10px 15px;
		border: 1px #ccc dashed;
		background: #F2F2F2;
	}
	
	/** Big box indicating quality **/
	.result__quality {
		padding: 7px 15px;
		margin: 10px 0 0 0;
		font-size: 14px;
		font-weight: bold;
		border-radius: 3px;
	}

	.result__quality--okay {
		background: #CBFDD5;
		color: #0F571D;
	}

	.result__quality--warning {
		background: #FFD69F;
		color: #D46F17;
	}

	.result__quality--error {
		background: #FFAFA2;
		color: #861300;
	}

.table-click-info {
	margin: 20px 0 -10px 0;
	margin: 2rem 0 -1rem 0;
	padding: 5px 7px;
	background: #f8f8f8;
	border: 1px solid #f2f2f2;
	font-size: 87%;
}


/* ---- No Layout Table ---- */

.table__no-styles {
	border-collapse: separate;
	border: none;
}

	.table__no-styles th,
	.table__no-styles td {
		padding: 0;
		border: 0;
		background: none;
	}

/* ------------------------------------------------------
**** Helper classes
------------------------------------------------------ */

/* ---- Clearfix ---- */

.clear {
	height: 0;
	clear: both;
	display: block;
}

.-clearfix:before,
.-clearfix:after {
	content: " ";
	display: table;
}

.-clearfix:after {
	clear: both;
}

.-clearfix {
	*zoom: 1;
}

/* Image Replacement */
.-ir {
	background-color: transparent;
	border: 0;
	overflow: hidden;
	*text-indent: -9999px;
}

.-ir:before {
	content: "";
	display: block;
	width: 0;
	height: 150%;
}

.-hidden {
	display: none !important;
	visibility: hidden;
}

.-vis-hidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

.-vis-hidden.focusable:active,
.-vis-hidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}

.-invisible {
	visibility: hidden;
}

/* Angle Brackets */
.-r-arrow-after:after {
	content: " >";
}
.-r-arrow-before:before {
	content: "> ";
}
.-l-arrow-after:after {
	content: " <";
}
.-l-arrow-before:before {
	content: "< ";
}

/* ---- Floats and positioning ---- */

.left {
	margin: 0 10px 5px 0;
	float: left;
}

.right {
	margin: 0 0 5px 10px;
	float: right;
}

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


/* ------------------------------------------------------
**** Template Layout
------------------------------------------------------ */

html,
body {
	background: #ffffff;
	margin: 0;
}

.wrapper {
	max-width: 1170px;
	margin: 0 auto;
	position: relative;
}

.header {
	background: #24292F;
	max-height: 91px;
	padding: 0 4%; position: fixed; top: 0; z-index: 100; width: 100%;
}

/* Header shrink */
.header-shrink .nav li a {
	padding: 34.5px 0 20.5px;
}
.header-shrink .site-title {
	padding-top: 28px;
}
.header-shrink .logo {
	width: 168px;
}

.site-title {
	color: #fff;
	font-size: 33px;
	font-size: 3.3rem;
	font-weight: 100;
	text-transform: lowercase;
	padding-top: 33px;
	float: left;
	margin: 0;
	-webkit-transition: all 150ms ease-in;  -moz-transition: all 150ms ease-in;  -ms-transition: all 150ms ease-in;  -o-transition: all 150ms ease-in;  transition: all 150ms ease-in;
}
	.site-title span {
		color: #8e9092;
	}

.logo {
	margin: 0 auto;
	display: block;
	z-index: 9000;
	position: absolute;
	width: 224px;
	left: 0;
	right: 0;
	-webkit-transition: all 150ms ease-in;  -moz-transition: all 150ms ease-in;  -ms-transition: all 150ms ease-in;  -o-transition: all 150ms ease-in;  transition: all 150ms ease-in;
}

.nav {
	float: right;
}

.nav ul {
	margin: 0;
	padding:  0;
}

.nav li {
	width: 200px;
	-webkit-transition: all 150ms ease-in;
	-moz-transition: all 150ms ease-in;
	-ms-transition: all 150ms ease-in;
	-o-transition: all 150ms ease-in;
	transition: all 150ms ease-in;
	cursor: pointer; text-align: center;
	margin: 0;
}
.nav li:hover {
	background: #1a1e23;
}
.nav img {
	display: inline;
	margin-right: 10px;
	margin-top: -25px;
}

.nav a {
	color: #fff;
	text-decoration: none;
	font-size: 24px;
	font-size: 2.4rem;
	font-weight: 100;
	display: block;  -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
	padding: 39.5px 0 24.5px;
	-webkit-transition: all 150ms ease-in;  -moz-transition: all 150ms ease-in;  -ms-transition: all 150ms ease-in;  -o-transition: all 150ms ease-in;  transition: all 150ms ease-in;
	text-transform: lowercase;
}

ul.inline > li.menu-button {
	display: none;
}

#wrap {
	position: relative;
	padding: 0 4%; *;
}

#mainbar {
	padding: 100px 0 100px 7%; /* 100/1300 */ 
	width: 71%;
	float: right;
}

#mainbar--fullwidth {
	padding: 100px 0;
}

.doc__client-name {
	font-size: 26px;
	font-size: 2.6rem;
	color: #24292f;
	font-weight: 700;
	margin-bottom: 10px;
	line-height: 30px
}

.content:first-of-type {
	margin-top: 40px;
}

.content {
	margin: 0;
	overflow-x: hidden;
}

.content > h2 {
	font-weight: 100;
	font-size: 40px;
	font-size: 4rem;
	text-align: center;
	display: inline-block;
	margin: 0 auto 40px;
	width: 100%;
}

.content > h2 span:before, .content > h2 span:after {
	content: " ";
	display: inline-block;
	height: 1px;
	position: relative;
	vertical-align: middle;
	width: 50%;
	background: #d7d7d7;
}
.content > h2 span:before {
	right: 0.5em;
	margin-left: -50%;
}
.content > h2 span:after {
	left: 0.5em;
	margin-right: -50%;
}

.content > h2 span {
	background: #fff;
	padding: 0 20px;
	display: inline;
}


/* ---- Costings ---- */

.costing .total__top-row th,
.costing .total__bottom-row th {
	background: none;
}

.costing__item-costing,
.costing__subtotal {
	text-align: right;
}

.total__bottom-row {
	font-weight: 700;
	background: #EBEBEB;
}

.costing__terms {
	padding-left: 40px;
}

.costing__terms span {
	width: 30px;
	padding: 0 4px;
	display: inline-block;
	position: relative;

	margin-left: -35px;
}



/* ---- Alert box ---- */


.alert {
	margin: 30px 0 15px;
	padding: 15px 30px 15px;
	border: 1px solid #D7D7D7;
}

.alert p:first-of-type {
	margin-top: -12px;
}

.alert__heading {
	font-size: 22px;
	font-size: 2.2rem;
	display: inline-block;
	background: #fff;
	position: relative;
	top: -30px;
	left: -15px;
	margin-bottom: 0;
	padding: 0 12px;
}


/* ---- Sidebar ---- */

#sidebar {
	width: 29%;
	top: 0;
	bottom: 0;
	border-right: 1px solid #d7d7d7;
	float: left;
}


/* ---- Document navigation ---- */

.doc-nav {
	padding: 95px 40px 0 40px;
}

.doc-nav__heading {
	color: #24292f;
	font-size: 34px;
	font-size: 3.4rem;
	line-height: 1.2em;
	font-weight: 100;
	margin-bottom: 30px
}
.doc-nav__heading-deco {
	display: block;
}
.doc-nav__info {
	color: #24292f;
	background: #EEE;
	padding: 5px 10px;
	line-height: 1.6em;
	margin-bottom: 40px
}
	.doc-nav__info b {
		font-weight: 100;
		display: inline-block;
		width: 110px;
	}

.doc-nav__switch {
	padding: 5px 10px;
	line-height: 1.6em;
	margin: -35px 0 40px 0;
	text-align: center;
	background: #f8f8f8;
}
	.doc-nav__switch a {
		color: #444;
		display: block;
	}

.doc-nav ul {
	margin-left: -40px;
	margin-right: -40px;
	margin-bottom: 30px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #d7d7d7;
}

.doc-nav ul li {
	list-style: none;
	padding: 15px 40px;
	margin: 0;
	border-top: 1px solid #d7d7d7;
}

.doc-nav ul > li a {
	color: #000;
	text-decoration: none;
	font-weight: 100;
	font-size: 20px;
	font-size: 2rem;
	text-transform: lowercase;
	display: block;
}

.doc-nav ul > li.on a,
.doc-nav ul > li:hover a {
	color: #FFF;
}

.doc-nav ul > li.on,
.doc-nav ul > li:hover {
	border-color: #cdcdcd;
	background: #1a1e23 !important;
	position: relative;
}
.doc-nav ul > li.on {
	border-color: #cdcdcd;
	background: #24292F;
	position: relative;
}

.doc-nav ul > li.on:after,
.doc-nav ul > li:hover:after {
	content:"\003e";
	color: #fff;
	font-size: 20px;
	font-size: 2rem;
	position: absolute;
	right: 40px;
	top: 15px;
	cursor: pointer;
}

.doc-nav .button {
	margin-left: -40px;
	margin-right: -40px;
}


/** Big box indicating quality **/
.quality-info-box {
	padding: 20px 30px;
	margin: 30px 0;
	font-size: 18px;
	font-weight: bold;
	border-radius: 3px;
}

	.quality-info-box--okay {
		background: #CBFDD5;
		color: #0F571D;
	}
	
	.quality-info-box--warning {
		background: #FFD69F;
		color: #D46F17;
	}
	
	.quality-info-box--error {
		background: #FFAFA2;
		color: #861300;
	}


/**
* Popup
**/
.popup-content {
	position: relative;
	background: #FFF;
	padding: 20px;
	width: auto;
	max-width: 500px;
	margin: 20px auto;
}


/**
* Box under results with the notes
**/
.notes-highlight-box {
	padding: 20px;
	border: 1px #999 dashed;
	background: #f8f8f8;
	margin: 30px 0;
}

	.notes-highlight-box h3 {
		margin-top: 0;
	}



/***************** QUOTE TABS ****************/
.tab-container {
	position: relative;
}

.tab-container .tab-wrap {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
}


/***************** Media Queries ****************/

@media all and (max-width: 1100px) {
	.nav li {
		width: 160px;
	}
	.doc-nav__heading-deco {
		font-size: 29px; 
		font-size: 2.9rem;
	}
}

@media all and (max-width: 1000px) {
	.nav li {
		width: 140px;
	}

	.content {
		border: none;
	}
	.content > h2 {
		text-align: left;
		
		margin-bottom: 20px;
	}
	.content > h2 span {
		padding: 0;
		
		background:  none;
		line-height: 100%;
	}
	#mainbar {
		width: 65%;
	}
	#sidebar {
		width: 35%;
	}
}

@media all and (max-width: 900px) {
	.logo {
		width: 156px;
	}
	.nav img {
		margin-top: -9px;
		width: 14.5%;
		margin-right: 5px;
	}
	.nav a {
		padding: 23.5px 0 24.5px;
		font-size: 27px; 
		font-size: 2.7rem;
	}
	.site-title {
		padding-top: 24px;	
		font-size: 29px; 
		font-size: 2.9rem;
	}
}

@media all and (max-width: 800px) {
	ul.inline > li.contact-button {
		display: none;
	}
	ul.inline > li.menu-button {
		display: inline-block;
	}
	#mainbar {
		float: none;
		width: 100%;
		padding: 5px 0 20px 0;
		border-left: none !important;
	}
	#sidebar {
		float: none;
		width: 100%;
		border-right: none;
		padding: 20px 0 0 0;
	}
	.doc-nav__site-name {
		font-size: 29px; 
		font-size: 2.9rem;
	}
	.doc-nav__heading-deco {
		display: inline;
	}
	.doc-nav {
		padding: 0;
	}
	.doc-nav ul {
		margin-left: 0;
		margin-right: 0;
	}
	.doc-nav .button {
		margin-left: 0;
		margin-right: 0;
	}
	.doc-nav ul li.contact-tab {
		display: block;
	}
}