/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{font-family:sans-serif}
body{margin:0}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
h2{font-size:1.5em;margin:.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
h5{font-size:.83em;margin:1.67em 0}
h6{font-size:.75em;margin:2.33em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
blockquote{margin:1em 40px}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
p,pre{margin:1em 0}
code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:'';content:none}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
dl,menu,ol,ul{margin:1em 0}
dd{margin:0 0 0 40px}
menu,ol,ul{padding:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}



/*
====================
ALL WIDTHS
====================
*/

html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	font: 18px/1 'Source Sans Pro', sans-serif;
	color: #333;
	background-color: #FFF;
}

body > header {
	height: 1em;
	margin: 0;
	padding: 10px 5%;
	color: #FFF;
	background-color: #333;
	z-index: 10;
}

body > header > h1 {
	margin: 0;
	padding: 0;
	font-weight: bold;
	text-transform: uppercase;
}

body > article, body > aside {
	margin: 0;
	padding: 2.5% 5%;
}

body > article {
	height: 100%;
}

body > aside {
	color: #333;
	background-color: #CCC;
}

article > header {
	margin: -3.5% -6% 0;
	padding: 0;
}

article > header > div#header {
	width: 100%;
	margin: 0;
	padding: 0;
	z-index: -1;
}

article > header > section#intro {
	padding: 0;
	z-index: 1;
}

article > header > section#intro p {
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	hyphens: manual;
	font-family: 'Rambla', sans-serif;
	color: #3CC;
	background-color: #FFF;
	margin-left: -10px;
	padding: 0 10px 10px 10px;
}

body#startpage > article > header > section#intro p {
	padding: 10px;
}

article > header > section#intro > ol {
	margin: 0 0 0 -10px;
	padding: 10px 10px 0 10px;
	background-color: #FFF;
}

article > header > section#intro > ol > li {
	display: inline;
	margin: 0;
	padding: 0;
	text-transform:lowercase;
	font-variant: small-caps;
	white-space: nowrap;
}

article > header > section#intro > ol > li:after {
	content: "\003e";
	padding: 0em 0.5em;
	font-size: 80%;
}

article > header > section#intro > ol a {
	color: #333;
	background-color: #FFF;
	text-decoration: none;
}

article > header > section#intro > ol a:hover {
	text-decoration: underline;
}

article > footer {
	overflow: auto;
	margin: 0 -6%;
	padding: 20px 5%;
	color: #666;
	background-color: lightgray;
}

article > footer a {
	color: #000;
	background-color: transparent;
}

article > section > figure,
article > section > section > figure {
	margin: 1.5em 0;
}

article > section#allcrime section p {
	padding: 0;
	text-indent: 0;
	line-height: 1;
}

article > section#allcrime section .more {
	text-align: right;
	cursor: pointer;
}

article > section#allcrime section .more:hover {
	text-decoration: underline;
}

article > section#allcrime section .more:after {
	content: ' \2192';
	font-size: 1.3em;
	color: #6C8CD5;
}

article > section#allcrime section p strong.offencecount {
	color: #3CC;
	font-size: 2em;
	font-weight: bold;
}

article > section#allcrime section ul {
	margin: 0;
	padding: .25em 0 .25em 0; /* top right bottom left */
	font-size: 16px;
	line-height: 1.1;
}

article > section#allcrime section li {
	line-height: 1.3em;
	list-style-type: none;
}

article > section#allcrime figure {
	clear: none;
}

article > section#allcrime ul#tabmenu,
article > section#wardprofile ul#tabmenu {
	display: none;
}

article > section#sitewelcome {
	margin-top: 0;
	padding-top: 0;
}

article > section#sitewelcome p {
	font-size: 1.563em;
	font-weight: 600;
	line-height: 1.1;
}

article > section#locate {
	margin: 0;
	padding: 20px;
	color: #333;
	background-color: #3CC;
}

article > section#locate p {
	text-align: center;
	font-weight: 600;
	line-height: 1.1;
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	hyphens: manual;
}

article > section#locate p.locatelabel {
	margin: 30px 0 10px 0;
}

article > section#locate p.locatelabel:first-child {
	margin-top: 0;
}

article > section#locate figure {
	margin: 0;
	padding: 0;
}

article > section#locate #londonmap {
	margin: 10px auto;
}

#thosewardslist,
article > section#locate ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;
}

#thosewardslist li,
article > section#locate li {
	display: inline;
	margin: 0;
	padding: 0 0.5em;
	-webkit-hyphens: manual;
	-moz-hyphens: manual;
	hyphens: manual;
}

#thosewardslist li a,
article > section#locate li a {
	background-color: transparent;
}

article > footer p,
article section p,
article section li {
	text-align: left;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	line-height: 1.5;
	text-indent: 0;
	margin: 0;
}
article section p + p {
	text-indent: 1em;
}

article > footer p {
	font-size: 0.8em;
}

article > section#firstsection {
	clear: both;
}

article > section dt {
	margin-top: 1em;
	font-style: italic;
	line-height: 1.5;
}

article > section dd {
	margin-left: 0;
	padding-left: 0;
}

a, text.linktext {
	color: #6C8CD5;
	background-color: #FFF;
	text-decoration: none;
}
a:hover, text.linktext:hover {
	text-decoration: underline;
}

.hidden {
	display: none;
}

#firstfade, #secondfade, #thirdfade {
	opacity: 0;
}

em.higher {
	color: #6C8CD5;
	font-weight: bold;
	font-style: normal;
}

em.lower {
	color: #3CC;
	font-weight: bold;
	font-style: normal;
}

.opened {
	padding-left: 18px;
	background: url(../img/triangle-down.png) no-repeat left center;
}

.closed {
	padding-left: 18px;
	background: url(../img/triangle-right.png) no-repeat left center;
}

li.opened {
	list-style-type: none;
	padding-left: 18px;
	background: url(../img/triangle-down.png) no-repeat 0px 10px;
}

li.closed {
	list-style-type: none;
	padding-left: 18px;
	background: url(../img/triangle-right.png) no-repeat 0px 10px;
}

ol#advice, ol#trendchartnotes, ol#graphnotes {
    display: block;
	margin-top: 1em;
    padding: 0 0 0 0;
    list-style: none;
    overflow: hidden;
    counter-reset: numList;
}
ol#advice li, ol#trendchartnotes li, ol#graphnotes li {
	list-style-type: none;
    position: relative;
    margin-left: 50px;
}
ol#trendchartnotes li, ol#graphnotes li {
	margin-left: 40px;
	font-size: 0.8em;
}
ol#advice li + li {
	margin-top: 1em;
}
ol#trendchartnotes li + li, ol#graphchartnotes li + li {
	margin-top: 0.5em;
}
ol#advice li:before, ol#trendchartnotes li:before, ol#graphnotes li:before {
    counter-increment: numList;
    content: counter(numList);
    float: left;
    position: absolute;
    left: -40px;
    font-size: 0.8em;
    font-weight: bold;
    text-align: center;
    color: #fff;
    line-height: 23px;
    width: 24px;
    height: 24px;
    background: #333;
    -moz-border-radius: 999px;
    -webkit-border-radius: 999px;
    border-radius: 999px;
}
ol#trendchartnotes li:before, ol#graphnotes li:before {
	left: -30px;
	font-size: 0.8em;
	height: 20px;
	width: 20px;
	line-height: 20px;
}
.footnotemark {
	vertical-align: super;
	font-size: 0.64em;
}
.footnotemark:before {
	content: '[';
}
.footnotemark:after {
	content: ']';
}
section#footnotes,
p.footnote {
	font-size: 0.64em;
	line-height: 1.2;
}

.caveats {
	margin: 0;
	padding: 0;
}

.caveats h2 {
	color: #6C8CD5;
	font-size: 1em;
	line-height: 1.4;
	font-weight: normal;
    cursor: pointer;
}

.caveats h2:hover {
	text-decoration: underline;
}

.caveats p {
	display: none;
	margin: 0 0 0.5em 0;
}

aside h1 {
	margin: 0;
	padding: 0;
	font-size: 0.8em;
	font-style: italic;
	font-weight: normal;
	line-height: 1.4;
}

aside#typedef,
aside#wardslist,
nav.comparisonmenu {
	margin: 0 0 1em 1em;
	padding: 5px;
	background-color: #CCC;
}

aside#wardslist h1:hover,
aside#typedef h1:hover {
	text-decoration: underline;
    cursor: pointer;
}

aside#wardslist ul {
	margin: 0;
	padding: 0;
	margin-top: 0.5em;
	display: none;
	list-style-type: none;
}

aside#wardslist ul li {
	font-size: 0.8em;
	line-height: 1.4;
}

aside#wardslist ul li a {
	color: #333;
	background-color: transparent;
}

aside #typedefdesc {
	margin-top: 0.5em;
	display: none;
	font-size: 0.8em;
	line-height: 1.4;
}

nav.comparisonmenu > p:not(:first-child) {
	margin-top: 0.5em;
}
nav.comparisonmenu > p,
nav.comparisonmenu > ul li {
	margin-left: 0;
	padding-left: 0;
	text-indent: 0;
	font-size: 0.64em;
	line-height: 1.4;
}
nav.comparisonmenu > ul {
	margin: 0;
	list-style-type: disc;
}
nav.comparisonmenu > ul li:hover {
	text-decoration: underline;
    cursor: pointer;
}

nav#share {
	margin: 0;
	padding: 0;
}

nav#share > p {
	margin: 0;
	padding: 0;
}

figure#maingraph > nav#methods {
	margin: 0 0 1em 0;
	text-align: left;
}
p#resetmap,
figure#maingraph > nav#methods > p {
	margin: 0;
	text-align: left;
	padding: 8px 10px 5px 0;
	line-height: 1;
}
figure#maingraph > nav#methods > ul {
	margin: 0;
	padding: 0;
}
nav.prevnext > p > a,
#resetmaplink,
figure#mainboroughmapcontainer p#resetmap > #resetmaplink,
figure#maingraph > nav#methods > ul > li {
	border: none;
	color: #6C8CD5;
	padding: 5px 10px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}
#resetmaplink,
figure#mainboroughmapcontainer p#resetmap > #resetmaplink,
figure#maingraph > nav#methods > ul > li {
	font-size: 0.64em;
}
nav.prevnext > p > a:hover,
nav.prevnext > p > a:focus,
#resetmaplink:hover,
#resetmaplink:focus,
figure#mainboroughmapcontainer p#resetmap > #resetmaplink:hover,
figure#mainboroughmapcontainer p#resetmap > #resetmaplink:focus,
figure#maingraph > nav#methods > ul > li:hover,
figure#maingraph > nav#methods > ul > li:focus {
    color: #FFF;
    background: #3CC;
    cursor: pointer;
}
nav.prevnext > p > a {
	color: #FFF;
	background: #6C8CD5;
	padding-left: 0.5em;
	padding-right: 0.5em;
	cursor: pointer;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
nav.prevnext > p#next {
	text-align: right;
}
nav.prevnext strong {
	margin-right: 0.5em;
}
nav.prevnext > p#prev a:before {
	content: '\2190\2002';
}
nav.prevnext > p#next a:after {
	content: '\2002\2192';
}
p#resetmap {
	text-align: right;
}
div#mainboroughmap {
	margin: 0;
	padding: 0;
	border: 1px solid #333;
}

figure table {
	margin: 0 10% 0 10%; /* top right bottom left */
	width: 80%;
	break-inside: avoid-column;
	-webkit-column-break-inside: avoid;
}
figure table tr th {
	vertical-align: bottom;
}
figure table tr td, 
figure table th {
	padding: 0 0.25em 0 0.25em; /* top right bottom left */
	text-align: right;
	font-size: 14px;
	line-height: 1.4;
}
figure table tr td.left,
figure table tr th.left,
figure table tr td:first-child,
figure table tr th:first-child {
	text-align: left;
}
table caption {
	margin: 0 0 0 0; /* top right bottom left */
	font-size: 14px;
	line-height: 1.4;
	font-weight: bold;
	text-align: left;
}
table tbody {
	border-top: 1px solid #4B5100;
}
table tfoot {
	border-top: 1px solid #4B5100;
}

section#contact form p {
	margin-top: 0.5em;
	text-indent: 0;
}

section#contact label {
	display: block;
}

section#contact input[type='text'],
section#contact input[type='email'],
section#contact textarea {
	width: 100%;
}

section#contact textarea {
	height: 10em;
}

section.noindentsection p + p {
	text-indent: 0;
}

figure#neighbourhoodpicture {
	width: 80%;
	margin: 0 10% 1em 10%; /* top right bottom left */
}
figure#neighbourhoodpicture img {
	width: 100%;
	border: 1px solid #000;
}
figure#neighbourhoodpicture figcaption {
	margin-top: 5px;
	font-size: 11px;
	line-height: 1;
	text-align: right;
}

section#dashboard figure {
	padding: 1em 0;
	overflow: scroll;
}

section#dashboard figure > table {
	margin: 0;
	padding: 0;
}

section#dashboard table > colgroup {
	border-left: 1px solid #CCC;
}

section#dashboard table > colgroup:first-child {
	border-left: 0;
}

section#dashboard td {
	padding-top: 0.2em;
}

section#dashboard th:last-child,
section#dashboard td:last-child {
	text-align: left;
}

section#dashboard td.count {
	color: #999;
}

section#dashboard th.rate,
section#dashboard td.rate,
section#dashboard th.change,
section#dashboard td.change {
	text-align: left;
}

section#dashboard th {
	font-weight: normal;
	line-height: 1;
	padding-bottom: 0.2em;
}

section#dashboard th.crimetypeheader {
	text-align: left;
	font-weight: bold;
	padding-bottom: 0.5em;
}

section#dashboard span.psymbol {
	font-size: 0.8em;
}

section#dashboard ul {
	margin: 1em 0;
	padding: 0;
}

section#dashboard li {
	display: inline;
	margin: 0 1em 0 0;
	padding: 0;
	list-style-type: none;
	font-size: 0.8em;
}

section#dashboard li.highest:before,
section#dashboard a.highest:before {
	content: "\2605\00A0";
	color: #3cc;
}

section#dashboard li.lowest:before,
section#dashboard a.lowest:before {
	content: "\2666\00A0";
	color: #3cc;
}

section#dashboard span.highest:after {
	content: "\00A0\2605";
	color: #3cc;
}

section#dashboard span.lowest:after {
	content: "\00A0\2666";
	color: #3cc;
}

section#dashboard li.higherthanav:before,
section#dashboard a.higherthanav:before,
section#dashboard span.higherthanav:after {
	content: "\00A0\21e1";
	color: #3cc;
}

section#dashboard li.lowerthanav:before,
section#dashboard a.lowerthanav:before,
section#dashboard span.lowerthanav:after {
	content: "\00A0\21e3";
	color: #3cc;
}



/*
====================
MOBILE
====================
*/

body > header > h1 {
	font-size: 1em;
	line-height: 1;
}

article > footer > p {
	margin-top: 0.8em;
}

article > footer > nav#crimetypes {
	margin: 0 0 20px 0;
	padding: 0;
}

body > nav#sitenav ul,
article > footer > nav#crimetypes ul {
	margin: 0;
	padding: 0;
}

body > nav#sitenav ul li {
	margin: 0;
	padding: 0;
	padding: 5px 10px;
	text-align: center;
	border-bottom: 1px solid #CCC;
	background-color: #FFF;
	z-index: 1;
}

article > footer > nav#crimetypes > ul > li {
	margin: 5px 0;
	text-align: center;
}

article > footer > nav#crimetypes > ul > li > a {
	display: block;
	width: auto;
	padding: 5px 10px;
	color: #000;
	background-color: darkgray;
}

article > footer > nav#crimetypes > ul > li > a:hover {
	color: lightgray;
	background-color: #000;
	text-decoration: none;
}

article > footer > nav#crimetypes > ul > li:first-child > a {
	background-color: #000;
	color: lightgray;
}

article > footer > nav#crimetypes > ul > li:first-child > a:hover {
	background-color: darkgray;
	color: #000;
	text-decoration: none;
}

article > header > div#header {
	height: 200px;
}

body#startpage > article > header > div#header {
	height: 100px;
}

article > header > section#intro {
	margin: -100px 12% 3em 6%;
}

article > header > section#intro > p {
	min-height: 60px;
}

body#startpage > article > header > section#intro {
	margin-top: -50px;
	min-height: 60px;
}

article > header > nav > ol > li {
	font-size: 0.8em;
	line-height: 1;
}

article > header > hgroup > h1 {
	margin: 0;
	padding: 2.5% 0 1%;
	font-size: 1.563em;
	font-weight: bold;
	line-height: 1;
}

article > header > hgroup > h2 {
	margin: 0;
	padding: 0 0 2.5%;
	font-size: 1.25em;
	font-weight: normal;
	line-height: 1.2;
}

article > section {
	margin: 0;
	padding: 3em 0;
}

article > section > h1,
article > section#allcrime > section > h1,
article > section#wardprofile > section > h1,
article > section > h2,
article > section#allcrime > section > h2,
article > section#wardprofile > section > h2,
article > section > h3,
article > section#allcrime > section > h3,
article > section#wardprofile > section > h3 {
	margin: 24px 0 12px;
	padding: 0;
	font-family: 'Rambla', sans-serif;
	line-height: 1;
}

article > section > h1,
article > section#wardprofile > section > h1,
article > section#allcrime > section > h1 {
	font-size: 1.25em;
	font-weight: bold;
}

article > section > h2,
article > section#wardprofile > section > h2,
article > section#allcrime > section > h2 {
	font-size: 1em;
	font-style: italic;
	font-weight: normal;
}

article > section > h3,
article > section#wardprofile > section > h3,
article > section#allcrime > section > h3 {
	font-size: 1em;
	font-weight: bold;
}

article > section > h1:first-child,
article > section > h2:first-child,
article > section > h3:first-child {
	margin-top: 0;
}

article > header > section#intro p {
	font-weight: bold;
	font-size: 1.25em;
	line-height: 1.2;
}

article > section#intro p {
	margin: 0;
	padding: 0;
}

aside#wardslist, aside#typedef, nav.comparisonmenu {
	width: 50%;
	float: right;
}

div#mainboroughmap {
	height: 400px;
}



/*
====================
IPAD (portrait)
====================
*/

@media only screen and (min-width: 480px) {

body > nav#sitenav {
	width: 100%;
	padding: 10px 0;
	text-align: center;
	border-bottom: 1px solid #CCC;
	background-color: #FFF;
}

body > nav#sitenav > ul > li {
	display: inline;
	margin: 0;
	padding: 0 2em;
	border-bottom: 0;
}

article > footer > nav#crimetypes {
	width: 100%;
}

article > footer > nav#crimetypes > ul {
	width: 48%;
	float: right;
	margin-left: 2%;
}

article > footer > nav#crimetypes > ul#boroughlinks {
	float: left;
	margin-left: 0;
	margin-right: 2%;
}

article > footer > nav#crimetypes > ul > li > a {
	width: auto;
}

article > footer > p {
	clear: both;
}

article > section {
	margin: 0;
	padding: 3em 0;
}

article > header > div#header {
	height: 300px;
}

body#startpage > article > header > div#header {
	height: 200px;
}

article > header > section#intro {
	margin: -150px 12% 3em 6%;
	min-height: 160px;
}

body#startpage > article > header > section#intro {
	margin-top: -100px;
}

article > header > section#intro p {
	font-weight: bold;
	font-size: 1.953em;
	line-height: 1.2;
	min-height: 110px;
}

article > section > h1,
article > section > h2,
article > section > h3 {
	margin: 36px 0 12px;
}

article > section > h1:first-child,
article > section > h2:first-child,
article > section > h3:first-child {
	margin: 0 0 12px;
}

figure#maingraph > nav#methods > ul > li {
	display: inline;
}
figure#maingraph > nav#methods > p {
	float: left;
}

div#mainboroughmap {
	height: 500px;
}

section#contact form p {
	text-align: right;
}

section#contact label {
	float: left;
	width: 200px;
	margin-right: 1em;
	text-align: right;
}

section#contact input[type='text'],
section#contact input[type='email'],
section#contact textarea {
	width: 70%;
}

}



/*
====================
IPAD (landscape) and LAPTOP
====================
*/

@media only screen and (min-width: 768px) {

body > nav#sitenav {
	position: absolute;
	top: 0;
	right: 5%;
	margin: 0;
	padding: 10px 0;
	text-align: right;
	border-width: 0;
}

body > nav#sitenav > ul > li {
	padding: 0 0 0 1em;
}

body > nav#sitenav,
body > nav#sitenav > ul > li,
body > nav#sitenav > ul > li a {
	color: #FFF;
	background-color: transparent;
}

article > footer > nav#crimetypes > ul {
	float: left;
	width: 250px;
	margin-right: 20px;
}

article > footer > p {
	clear: none;
}

article > header > div#header {
	height: 400px;
}

body#startpage > article > header > div#header {
	height: 300px;
}

article > header > section#intro {
	margin: -200px 12% 3em 6%;
}

article > header > section#intro > p {
	min-height: 170px;
}

body#startpage > article > header > section#intro {
	margin-top: -150px;
	min-height: 160px;
}

article > header > section#intro > ol,
article > header > section#intro p {
	max-width: 600px;
}

aside#wardslist, aside#typedef, nav.comparisonmenu {
	width: 300px;
	float: right;
}

article > section#wardprofile ul#tabmenu,
article > section#allcrime ul#tabmenu {
	display: block;
	float: left;
	width: 200px;
	text-align: left;
	margin: 0;
	padding: 0;
}

article > section#wardprofile ul#tabmenu li,
article > section#allcrime ul#tabmenu li {
	width: 180px;
	list-style-type: none;
	display: block;
	margin: 0;
	padding: 10px;
	color: #3CC;
}

article > section#wardprofile ul#tabmenu li.selected,
article > section#allcrime ul#tabmenu li.selected {
	z-index: 10;
	color: #6C8CD5;
	border-top: 1px solid #6C8CD5;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #6C8CD5;
}

article > section#wardprofile section,
article > section#allcrime section {
	clear: none;
	margin: 0 0 0 200px;
	border-left: 1px solid #6C8CD5;
	min-height: 300px;
	padding: 0 0 0 20px;
	z-index: 9;
}

article > section#wardprofile section h1,
article > section#allcrime section h1 {
	display: none;
}

div#mainboroughmap {
	height: 600px;
}

nav.prevnext {
	margin-bottom: 2em;
}

nav.prevnext p#prev {
	float: left;
	margin-top: 0;
}

}



/*
====================
WIDE
====================
*/

@media only screen and (min-width: 1140px) {

article > nav.prevnext,
article > section {
	max-width: 900px;
}

article > header > section#intro > ol,
article > header > section#intro p {
	max-width: 800px;
}

article > header > section#intro p {
	font-weight: bold;
	font-size: 2.411em;
	line-height: 1.1;
}

article > nav.prevnext,
article > section {
	position: relative;
	padding-left: 250px;
}

article > section#dashboard {
	max-width: 100%;
	padding-left: 0;
}

article > section > h1 {
	position: absolute;
	left: 0;
	width: 200px;
}

article > section#sitewelcome {
	padding-left: 10px;
	max-width: 100%;
}

article > section#londoncrime {
	width: 45%;
	margin-top: 0;
	padding-top: 0;
	padding-left: 10px;
}

article > section#londoncrime > figure {
	clear: none;
}

article > section#locate {
	width: 45%;
	float: right;
	margin-left: 5%;
}

aside#wardslist, aside#typedef, nav.comparisonmenu {
	position: absolute;
	left: 0;
	top: 200px;
	width: 200px;
	margin-left: 0;
	background-color: transparent;
	padding: 0;
}

aside#wardslist ul, aside#typedef div#typedefdesc {
	display: block;
}

}



/*
====================
CHARTS
====================
*/

path, line {
	shape-rendering: crispEdges;
}
#thisward, #thiswardline, #thiswardmark, #thiswardmarkline {
	stroke: black;
	stroke-width: 3;
	fill: none;
	shape-rendering: geometricPrecision;
}
#thisward:hover, #thiswardmark:hover {
	stroke-linecap: round;
	stroke-dasharray: 0,6;
}
.wardline {
	stroke: lightgray;
	fill: none;
	shape-rendering: geometricPrecision;
}
.wardline:hover {
	stroke: darkgray;
	stroke-width: 3;
}
#LOCL, #LOCLline, #LOCLmark, #LOCLmarkline {
	stroke: #333;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 0,6;
	fill: none;
	shape-rendering: geometricPrecision;
}
#LOCL:hover {
	stroke-dasharray: none;
}
#LOND, #LONDline, #LONDmark, #LONDmarkline {
	stroke: #333;
	stroke-width: 3;
	stroke-linecap: flat;
	stroke-dasharray: 10,4;
	fill: none;
	shape-rendering: geometricPrecision;
}
#LOND:hover, #LONDmark:hover {
	stroke-dasharray: none;
}
.axis {
	shape-rendering: crispEdges;
}
.x.axis .minor {
	stroke-opacity: .5;
}
.x.axis line, .x.axis path {
	fill: none;
	stroke: gray;
	stroke-width: 1;
}
.x.axis text {
	font-size: 0.8em;
}
text.legend {
	font-size: 0.8em;
}
.y.axis line, .y.axis path {
	fill: none;
	stroke: gray;
	stroke-width: 1;
}
.y.axis text {
	font-size: 0.8em;
}
.label {
	font-size: 0.8em;
}			
.note {
	font-size: 0.8em;
}
.chartwardbar {
	stroke-width: 0;
	fill: lightgray;
}
.chartwardname,
.chartwardcount {
	font-size: 0.8em;
}
.chartwardcount {
	fill: #FFF;
}
.dark {
	fill: #6C8CD5;
}
.chartwardcountbox {
	stroke-width: 0;
	fill: #333;
}
.chartwardcountbox:hover {
	fill: #CCC;
}
.charthead {
	font-size: 0.8em;
	font-style: italic;
}
.chartmuchdiff {
	font-size: 0.8em;
}
.infocirc {
	stroke-width: 2;
	stroke: rgb(162, 125, 53); /* rgb(251, 247, 170); */
	fill: rgb(249, 233, 142);
	shape-rendering: geometricPrecision;
}
.infocirci {
	font-size: 0.512em;
	font-weight: bold;
	fill: #B1D779;
	shape-rendering: geometricPrecision;
}
.infocircshadow {
	fill: rgba(0,0,0,0.2);
}
.popmuchhigher {
	fill: #6C8CD5;
}
.popmuchlower {
	fill: #3CC;
}
text.popmuchlower {
	fill: #4B5100;
}
.trendmonthbar {
	stroke-width: 0;
	stroke: lightgray;
	fill: lightgray;
}
.trendaverage {
	stroke: black;
	stroke-width: 3;
	fill: none;
	stroke-linecap: round;
	stroke-dasharray: 0,6;
	shape-rendering: geometricPrecision;
}
.chartarrow {
	stroke-width: 1;
	stroke: #333;
	shape-rendering: crispEdges;
}
.chartdivider {
	stroke-width: 4;
	stroke: #FFF;
}
.chartaxis line, .chartaxis path {
	fill: none;
	stroke: gray;
	stroke-width: 1;
}
.yaxis path {
	stroke-width: 0;
}
.chartaxis text {
	font-size: 0.8em;
}
.stripe1 {
	stroke: #F00;
	stroke-width: 3;
}
.chartaxes {
	font-size: 0.8em;
	font-style: italic;
}
.chartnote {
	font-size: 0.8em;
	font-variant: small-caps;
}
.twelvemonths {
	fill: #6C8CD5;
}
div.maplegend {
	padding: 9px;
	border: 1px solid #333;
	background-color: #FFF;
	border-radius: 7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 15px 0px;
}
div.maplegend p {
	text-indent: 0;
	font-size: 0.8em;
}
div.maplegend i,
div.maplegend img {
	display: block;
	float: left;
    margin-right: 8px;
}
div.maplegend i {
    width: 15px;
    height: 15px;
    background-color: #6C8CD5;
    opacity: 0.7;
}

.chartinbartext {
	font-size: 0.8em;
}
.crimetype0, .crimetype2, .crimetype4, .crimetype6, .crimetype8 { fill: #B1D779; }
.crimetype1, .crimetype3, .crimetype5, .crimetype7 { fill: #97B55A; }
.inlightbar { fill: #4B5100; } /* previously #4B5100 */
.indarkbar { fill: #4B5100; } /* previously #DDD */
.chartdotline {
	stroke-width: 1;
	stroke: black;
	fill: none;
	stroke-linecap: flat;
	stroke-dasharray: 3,3;
}

circle.notecirc {
	fill: #000;
}
text.notecirc {
	fill: #FFF;
	font-size: 0.8em;
	font-weight: bold;
}

path.mapborough {
	stroke-width: 1;
	stroke: #333;
	fill: #FFF;
	shape-rendering: geometricPrecision;
}

path.mapborough:hover {
    fill: #6C8CD5;
}

#thisboroughname {
	fill: #FFF;
}

#thisboroughbox {
	stroke-width: 0;
	fill: #6C8CD5;
}

rect.parent {
	stroke: #FFF;
	stroke-width: 2;
	shape-rendering: crispEdges;
}

rect.child {
	fill: #FFF;
	fill-opacity: 0;
	stroke: #FFF;
	stroke-width: 1;
	shape-rendering: crispEdges;
}

text.childname {
	font-size: 10px;
}

path.leaflet-clickable {
    stroke-width: 0 !important;
}

@media print {
	@page { size: landscape; margin: 2cm 4cm 2cm 2cm !important; } /* top right bottom left */
	* { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
	nav { display: none; }
	article > header > section#intro { margin-top: 1cm; }
	div#header { display: none; }
	a, a:visited { text-decoration: none; }
	a[href]:after { content: " <" attr(href) ">"; font-family: monospace; font-size: small; }
	abbr[title]:after { content: " (" attr(title) ")"; }
	#intro > ol a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
	thead { display: table-header-group; }
	tr, img { page-break-inside: avoid; }
	section figure > div, img { max-width: 100% !important; border: 1px solid red; }
	p, h1, h2, h3 { orphans: 3; widows: 3; }
	h1, h2, h3 { page-break-after: avoid; }
	article > header > section#intro > p { color: #000; font-size: 2.5em; }
}