@import url(https://fonts.timesdev.tools/fonts/TimesDigital-Regular.css);		/* TimesDigital-Regular		*/
@import url(https://fonts.timesdev.tools/fonts/TimesDigital-Bold.css);			/* TimesDigital-Bold		*/

@import url(https://fonts.timesdev.tools/fonts/GillSansW01-Bold.css);			/* Gill-Bold		*/
@import url(https://fonts.timesdev.tools/fonts/GillSansW01-Medium.css);			/* Gill-Medium		*/
@import url(https://fonts.timesdev.tools/fonts/GillSansW01-Light.css);			/* Gill-Light		*/

/* 

Colours:

White hover = rgb(250,250,250);
White click = rgb(240,240,240);

Grey 1 =	rgb(239,239,239);
Grey 2 = rgb(105,105,105);
Grey 3 = rgb(60,63,68);
Grey 4 = rgb(26,31,36);

Green 1 = rgb(0,225,170);
Green 2 = rgb(0,165,155);

Green 1 hover = rgb(0,220,165);
Green 2 hover = rgb(0,160,150);

Green 1 click = rgb(0,215,160);
Green 2 click = rgb(0,155,145);

*/

html {
	font-size: 2em;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	text-shadow: rgba(0, 0, 0, 0.00392157) 1px 1px 1px;
}
	

body {
	background-color: rgb(239,239,239);
}

div::selection, span::selection, p::selection, h2::selection, th::selection, td::selection, text::selection, a::selection {
	background: rgba(0,225,170, 0.1);
}

#page-content {
	background-color: rgb(239,239,239);
}

/* RESOLUTION */

#resolution {
	width: calc(100% - 4rem);
	margin-left: 2rem;
	margin-right: 2rem;
	display: none;
}
	
#resolution #resolution-container {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 2rem 0;
	color: rgb(105,105,105);
	font-family: 'TimesDigital-Regular', serif;
}

#resolution #resolution-container p {
	line-height: 1.2em;
	width: 100%;
}

#resolution #resolution-container h2 {
	font-family: 'TimesDigital-Bold';
}

#resolution #resolution-container div.column {
	width: 100%;
	max-width: 20em;
	font-size: 1rem;
}
	
#resolution #resolution-container>div:first-child {
	margin-bottom: 2.4rem;	
}

#resolution #resolution-container>div:last-child {
		margin-top: 1.2rem;		
}

#resolution #resolution-container>div:not(:first-child):not(:last-child) {
	margin-top: 1.2rem;	
	margin-bottom: 2.4rem;	
}

#resolution #resolution-container>div p:not(:last-child) {
		margin-bottom: 1.2rem;	
}

	
#resolution #resolution-container p:not(.large) {
	margin-right: calc( 100% - 20em );
}
	
#resolution #resolution-container div.column.large {
	font-size: 2rem;
}

#resolution #resolution-container div.column p span.bold {
	font-family: 'GillSansW01-Medium', 'SundayTimesModern-Bold', serif;
}

#resolution #resolution-container p span.green {
	color: rgb(0,225,170);
}

#resolution #resolution-container>div.panel {
	background-color: rgb(255,255,255);
}

/* CREDITS */

#resolution #resolution-container div.credits p {
	
	font-family: 'GillSansW01-Medium', sans-serif;
	font-size: 0.5rem;
	
}

#resolution #resolution-container div.credits a {
	text-decoration: underline;
}

#resolution #resolution-container div.credits a:hover {
	color: rgb(60,63,68);
}

#resolution #resolution-container div.credits p:not(:last-child) {
	margin-bottom: 1em;
}



/* GRAPHIC CONTAINERS */

#resolution #resolution-container div.graphic-container, #resolution #resolution-container div.table-container {
	background-color: rgb(255,255,255);
	width: 100%;
	display: inline-block;
}

#resolution #resolution-container div.image-container {
	
	background-color: rgba(255,255,255, 0.25);
	background-image: url("../img/HOUSE-SEMI.png"), url("../img/BG-LONDON.png");
	background-size: cover;
	background-position: 50% 50%;	
	margin: 0;

}

	

#resolution #resolution-container div.graphic-container div.title-block, #resolution #resolution-container div.table-container div.title-block, #resolution #resolution-container div.graphic-container div.title-block, #resolution #resolution-container div.table-container div.footnote {
	padding: 0.15rem 0.3rem 0.5rem 0.3rem;
}
	
#resolution #resolution-container div.graphic-container div.title-block div.title, #resolution #resolution-container div.table-container div.title-block div.title {
	font-family: 'GillSansW01-Medium',sans-serif;
	text-transform: uppercase;
	font-size: 0.7rem;	
}

#resolution #resolution-container div.graphic-container div.title-block div.subtitle, #resolution #resolution-container div.table-container div.title-block div.subtitle {
	font-family: 'GillSansW01-Medium', 'Solido-Book',sans-serif;
	font-size: 0.7rem;
}

#resolution #resolution-container div.table-container div.footnote {
	font-family: 'GillSansW01-Medium', 'Solido-Book',sans-serif;
	font-size: 0.6rem;
	max-width: 25em;
}

#resolution div.graphic-container.bar-chart div.chart {
	
	padding: 0 0.3rem 1.5rem 0.3rem;
	width: calc(100% - 0.6rem);
	
}

#resolution #resolution-container div.graphic-container#average-stamp-paid-chart div.chart,  #resolution #resolution-container div.graphic-container#average-property-price-chart div.chart{
	
	padding: 0 3rem 1.5rem 0.3rem;
	width: calc(100% - 3.3rem);
	
}

/* TABLES */

#stamp-rate-comparison-table div.table {
	padding: 0 0.3rem 0.6rem;
	width: calc(100% - 0.6rem);
	font-size: 0.6rem;
}

#stamp-rate-comparison-table div.table table {
	width: 100%;
}

#stamp-rate-comparison-table div.table tr:first-child {
	border-bottom: 1px solid rgb(105,105,105);
}

#stamp-rate-comparison-table div.table tr:not(:first-child):not(:last-child) {
	border-bottom: 1px solid rgb(239,239,239);
}

#stamp-rate-comparison-table div.table th {
	font-family: 'GillSansW01-Medium', 'Solido-ExtraBold', sans-serif;
	padding: 0 0 0.3em
}

#stamp-rate-comparison-table div.table td {
	font-family: 'GillSansW01-Medium', 'Solido-Book', sans-serif;
}

#stamp-rate-comparison-table div.table tr:not(:last-child) td {
	padding: 0.3em 0;
}

#stamp-rate-comparison-table div.table tr:last-child td {
	padding: 0.3em 0 0;
}


/* CHARTS */

div.chart svg {	
	overflow: visible;
}

div.chart svg .axis line, div.chart svg .axis path {	
	fill: none;
	stroke-width: 1;
	shape-rendering: crispEdges;
}

div.chart svg .axis text {
	
	font-family: 'GillSansW01-Medium', 'Solido-Book',sans-serif;
	font-size: 0.6rem;
	fill: rgb(105,105,105);

}

div.chart svg .x.axis .tick line {
	
	stroke: rgb(105,105,105);
	
}

div.chart svg .y.axis .tick:first-child line {
	
	stroke: rgb(105,105,105);
	
}

div.chart svg .y.axis .tick:not(:first-child) line {
	
	stroke-dasharray: 5, 5;
	stroke: rgb(239,239,239);
	
}

div.chart svg .axis .domain {
	
	stroke: none;

}

#resolution div.graphic-container.bar-chart div.chart svg .x.axis {
	
	font-family: 'GillSansW01-Medium', 'Solido-Book',sans-serif;
	font-size: 0.6rem;
	fill: rgb(105,105,105);

}

#resolution div.graphic-container.bar-chart div.chart svg .label {
	
	font-family: 'GillSansW01-Medium', 'Solido-ExtraBold',sans-serif;
	font-size: 1rem;
	
	fill: rgb(105,105,105);

}

#resolution div.graphic-container.bar-chart div.chart svg g:nth-child(1) rect, #resolution div.graphic-container.bar-chart div.chart svg g:nth-child(1) .label {
	fill: rgb(0,165,155);
}
	
#resolution div.graphic-container.bar-chart div.chart svg g:nth-child(2) rect, #resolution div.graphic-container.bar-chart div.chart svg g:nth-child(2) .label {
	fill: rgb(0,225,170);
}
	



/* TOP BAR */

#topbar {
	display: none;
	width: 100%;
	position: fixed;
	background-color: rgb(60,63,68);	
	color: rgb(239,239,239);
	text-align: center;
}

#topbar div.topbar-container {
}

#topbar div div.sans {
	font-family: 'GillSansW01-Medium', sans-serif;
	text-transform: uppercase;
	font-size: 0.7rem;
	display: block;
	width: 100%;
}

#topbar div div.sans:first-child {
	margin-top: 0.5em;
}

#topbar div div.sans:last-child {
	margin-bottom: 0.5em;
}

#topbar div div.serif {
	font-family: 'TimesDigital-Regular', serif;
	margin: 0.3em auto 0.5em;
   padding: 0 2em;
	font-size: 1rem;
}

#topbar div div.serif div.btn {
	color: rgb(0,225,170);
	border-bottom: .04em solid rgb(0,225,170);
	margin-bottom: -.04em;
	cursor: pointer;
}

#topbar div div.serif > div {
	display: inline-block;
}



/* POP UPS */

#popups {
	display: none;
	position: fixed;
	top: 0;
	height: 100%;
	width: 100%;
}

#popups #shade {
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(105,105,105,0.5);
	height: 100%;
	width: 100%;
}

#popups > div:not(#shade) {
	min-width: 20rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	box-shadow: .15em .15em 0 rgba(105,105,105,0.1);
	background-color: rgb(255,255,255);
	max-height: calc(100% - 4rem);
	overflow-y: auto;
	display: none;
}

#popups > div div {
	font-size: 1.5rem;
	padding: 0.1em 0.3em 0.2em;
}

#popups div div:nth-child(1) {
	background-color: rgb(0,225,170);
	color: rgb(255,255,255);
	font-family: 'GillSansW01-Medium', 'Solido-Medium', sans-serif;
}

#popups div div:not(:nth-child(1)) {
	background-color: rgb(255,255,255);
	color: rgb(105,105,105);
	font-family: 'GillSansW01-Medium', 'Solido-Book', sans-serif;
}

#popups div div:not(:nth-child(1)):hover {
	background-color: rgb(250,250,250);
	cursor: pointer;
}

#popups #price input[type='number'] {
	display: inline-block;
	padding: 0.1em 0.3em 0.2em;
	height: calc(100% - 0.3em);
	width: calc((200% - 0.9em) / 3);
	font-size: 1.5rem;
	border: none;
	font-family: 'GillSansW01-Medium', 'Solido-Book', sans-serif;
	color: rgb(105,105,105);
	background-color: rgb(255,255,255);
	float: left;
}

#popups #price input[type='submit'] {
	display: inline-block;
	padding: 0.1em 0.3em 0.2em;
	height: calc(100% - 0.3em);
	width: calc((100% - 0.9em) / 3);
	font-size: 1.5rem;
	border: none;
	font-family: 'GillSansW01-Medium', 'Solido-Medium', sans-serif;
	color: rgb(239,239,239);
	background-color: rgb(105,105,105);
	float: right;
	cursor: pointer;
	
    border-radius: 0;
	
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}	

#popups #price input[type='submit']:hover {
	background-color: rgb(60,63,68);
}

/* FORM */

#form {
}

#form #cta {
    position: absolute;
    left: 50%;
    bottom: 0.78rem;
    transform: translate(-50%,0);
    font-size: 1rem;
    font-family: 'GillSansW01-Medium', 'Solido-Book',sans-serif;
    width: 100%;
    max-width: 25em;
    text-align: center;
    color: rgb(105,105,105);
}

#form #submit {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	transform: translate(-50%,0);
	font-size: 1rem;
	font-family: 'GillSansW01-Medium', 'Solido-Medium',sans-serif;
	padding: 0.1em 0.3em 0.2em 0.3em;
	margin: 0 0 -0.2em 0;	
	cursor: pointer;
	display: none;
}

#form #submit:not(:hover) {
	color: rgb(0,225,170);
	background-color: rgb(255,255,255);
}

#form #submit:hover {
	color: rgb(255,255,255);
	background-color: rgb(0,225,170);
	box-shadow: .1em .1em 0 rgba(105,105,105,0.1);
}

#form div#form-container{
	width: calc(100% - 4rem);
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

#form div#form-container {
	font-size: 2rem;
	font-family: 'TimesDigital-Regular', serif;
	color: rgb(105,105,105);
}

#form span.btn {
	font-size: 2rem;
	font-family: 'TimesDigital-Regular', serif;
	border-bottom: .04em solid rgb(0,225,170);
	margin-bottom: -.04em;

	color: rgb(0,225,170);
	cursor: pointer;
}

#form div#form-container > div, #form div#form-container > span {
	display: inline;
}