body { margin:0; color: #333;}
html,body { overflow:hidden; }
svg:not(:root) { overflow: hidden; }

/*Map styles*/
.m-lab{ fill:#E31F26; stroke:#FFF; stroke-opacity:0.2;}
.m-con{ fill:#005789; stroke:#FFF; stroke-opacity:0.2;}
.m-ld{ fill:#FFB900; stroke:#FFF; stroke-opacity:0.2;}
.m-snp{ fill:#FCDD03; stroke:#FFF; stroke-opacity:0.2;}
.m-ukip{ fill:#7D0069; stroke:#FFF; stroke-opacity:0.2;}
.m-oth{ fill:#B3B3B4; stroke:#FFF; stroke-opacity:0.2;}
.m-gre{ fill:#33A22B; stroke:#FFF; stroke-opacity:0.2;}
.m-hilite{ fill:none; stroke:#000; stroke-width:3px;}
.m-boundary{ fill:none; stroke:#FFF; stroke-width:2px;}
.m-labels{ fill: #FFF; font-size: 16px; opacity: 0.7}
.m-labels-below{ stroke:#000; font-size: 16px; opacity:0.25; stroke-width:4px; stroke-linejoin:round;}
.m-cons{ fill: #000; font-size: 13px; font-weight: bold;}
.m-cons-below{ stroke:#EEE; font-size: 13px; font-weight: bold; opacity:0.9; stroke-width:3px; stroke-linejoin:round;}

/*Chart styles*/
.ch-na { fill:#4bc6df;}
.ch-val, .ch-txt-val { fill:#000;}
.ch-txt-na { font-size:12px; }
.ch-txt-na { fill: #197caa; }
.ch-txt-val {
	font-size:12px;
	font-weight: bold;
}

/*Axis styles*/
.grid line {
  stroke: #d0d0d0;
}
.grid .minor line {
  stroke-opacity: .3;
}
.grid text {
  display: none;
}
.axis line {
  display: none;
}
.axis text {
  fill: #c3c3c3;
  font-size: 10px;
}
.axis path,
.grid path {
  display: none;
}

/*General styles*/
#gu-copy, #gu-stats { display: inline-block;}
#gu-map { display: inline-block;}
#gu-hed h2{
	font-family: 'Guardian Egyptian Web', Georgia, serif;
	font-weight: bold;
	font-size: 20px;
	color: #b3b3b3;
	padding:10px 0 10px 10px;
	border-bottom: 1px solid #dfdfdf;
	line-height: 1.2;
}
#gu-constituency{
	display: inline-block;
  margin-left:5px;
  color: #333;
}
#gu-copy p{
	font-family: 'Guardian Egyptian Web', Georgia, serif;
	font-size:15px;
}
#gu-map {
	width:50%;
	height:300px;
	font-family: "Guardian Text Sans Web","Agate Sans",sans-serif;
}
#gu-copy {
	width:43%;
	vertical-align: top;
	padding:10px 10px 0 10px;
	background-color:#EEE;
}
#gu-stats {
	font-family: "Guardian Text Sans Web","Agate Sans",sans-serif;
	vertical-align: top;
	padding-top:10px;
}
#gu-stats h3{
	font-family: 'Guardian Egyptian Web', Georgia, serif;
	font-size:15px;
}
#gu-stats p{
	font-family: "Guardian Text Sans Web","Agate Sans",sans-serif;
	font-size: 13px;
	padding-bottom:5px;
}
#na-avg-label{
	font-family: "Guardian Text Sans Web","Agate Sans",sans-serif;
	font-size: 12px;
	color:#197caa;
	padding-left:5px;
}
#gu-proj {
	border-bottom: 1px dotted #ccc;
	padding-bottom: 10px;
}
#gu-card {
	background-color: #EEE;
	margin:0;
	border-top: 1px solid #808080;
}
#gu-sources p{
	color: #767676;
	font-family: "Guardian Text Sans Web","Agate Sans",sans-serif;
	font-size: 12px;
	line-height: 1.2;
	padding-top: 10px;
	padding-bottom: 10px;
}
#gu-sources {
	border-bottom: 1px dotted #dfdfdf;
}

.s-chart { display: inline-block;}

/*Key styles*/
#gu-key {
	width:100%;
	padding-left:10px;
	border-bottom: 1px solid #dfdfdf;
}
#gu-key ul{
	padding-left:0px;
	margin-top:10px;
}
#gu-key, #gu-key ul{
	height: 30px;
	display: block;
}
#gu-key li{
	font-family: "Guardian Text Sans Web","Agate Sans",sans-serif;
	font-size: 12px;
	float:left;
	list-style: none;
	padding-right: 7px;
	margin-bottom:5px;
}
#gu-key .rect {
	width: 5px;
	height: 10px;
	margin-right: 3px;
	border-radius: 2px;
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 2px;
}
#key-lab{ background-color:#E31F26;}
#key-con{ background-color:#005789;}
#key-ld{ background-color:#FFB900;}
#key-snp{ background-color:#FCDD03;}
#key-ukip{ background-color:#7D0069;}
#key-oth{ background-color:#B3B3B4;}
#key-gre{ background-color:#33A22B;}

@media (max-width: 479px) {
  #gu-constituency {
    display: block;
    margin-left:0;
  }
  #gu-map {
    display: block;
  }
  #gu-copy {
  	width:90%;
  }
  #gu-card {
		background-color: #EEE;
		margin:0;
		border-top: 1px solid #808080;
	}
}