/*
* Shared global style sheet for Ordnance Survey corporate and leisure shop websites.
*
* @author			: Toni Ruckwood
* @version			: 0.0.3
* @create date		: 19 Nov 2012
* @modified date	: 23 Nov 2012
*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Paul Irish reset for box model - http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/*======================================== Grid ========================================*/

/*
1140px 12 column fluid grid.
1 column = 1140/12 = 95px (95*100/1140 = 8.33333333%)
Column padding = 20px left and right only to give 40px gutter between adjacent columns.
*/

/*Grid container for rows and columns*/
.grid-container {
	margin: 0 auto;
	text-align: left;
	min-width: 310px;
	max-width: 1140px;
}

/* Fix width in IE 7 which doesn't support min/max width */
*+html .grid-container {width: 1140px;}

/*Grid rows*/
.grid-row {clear: both;}
/* clearfix from https://gist.github.com/674060 */
.grid-row:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
/* IE7 Hack for clearfix */
*:first-child+html .grid-row {zoom: 1;}

/*Grid columns*/
.grid-cols-1, .grid-cols-2, .grid-cols-3, .grid-cols-4, .grid-cols-5, .grid-cols-6, .grid-cols-7, .grid-cols-8, .grid-cols-9, .grid-cols-10, .grid-cols-11, .grid-cols-12 {
	float: left;
	padding: 0 20px;
}
.grid-cols-1 {width: 8.33333333%;}
.grid-cols-2 {width: 16.66666667%;}
.grid-cols-3 {width: 25%;}
.grid-cols-4 {width: 33.33333333%;}
.grid-cols-5 {Width: 41.66666667%;}
.grid-cols-6 {width: 50%;}
.grid-cols-7 {width: 58.33333333%;}
.grid-cols-8 {width: 66.66666667%;}
.grid-cols-9 {width: 75%;}
.grid-cols-10 {width: 83.33333333%;}
.grid-cols-11 {width: 91.66666667%;}
.grid-cols-12 {width: 100%;}

/*Remove the left and right padding on columns that nest child rows.*/
.grid-nest {padding: 0;}

/*Column offsetting*/
.grid-offset-1 {margin-left: 8.33333333%;}
.grid-offset-2 {margin-left: 16.66666667%;}
.grid-offset-3 {margin-left: 25%;}
.grid-offset-4 {margin-left: 33.33333333%;}
.grid-offset-5 {margin-left: 41.66666667%;}
.grid-offset-6 {margin-left: 50%;}
.grid-offset-7 {margin-left: 58.33333333%;}
.grid-offset-8 {margin-left: 66.66666667%;}
.grid-offset-9 {margin-left: 75%;}
.grid-offset-10 {margin-left: 83.33333333%;}
.grid-offset-11 {margin-left: 91.66666667%;}
.grid-offset-12 {margin-left: 100%;}

/*Grid classes for development use only*/

/*Add to any element to see all child grid columns.*/
.grid-show-columns div[class^='grid-cols-'] {
	border: 1px solid #ecc;
	background-color: #fdd;
}
/*Add .grid-show-8 or .grid-show-24 to any element to see the baseline grid.*/
.grid-show-baseline-8, .grid-show-baseline-24 {
	opacity: 0.75;
	background-image: url(/images/ui/baseline-8.png);
}
.grid-show-baseline-24 {background-image: url(/images/ui/baseline-24.png);}

/*======================================== Type ========================================*/

.type-intro {
	font-size: 1.250em;
	line-height: 1.2em;
}

.type-info {
	color: #6d6d6d;
	font-size: .875em;
	line-height: 1.143em;
	text-transform: uppercase;
}

.type-small-print {
	color: #2d2d2d;
	font-size: .875em;
	line-height: 1.143em;
}

/*======================================== General ========================================*/

body {
	background-color: #fff;
	color: #2d2d2d;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1em;
	line-height: 1.5em;
	text-align: center;
}

#main p, #main ul, #main ol, #main address, #main dl, #main form, #main fieldset, #main table, #main iframe, #main object, #main pre {margin-bottom: 1.5em;}

/*======================================== Links ========================================*/

A:link, A:active {
	text-decoration: none;
	color: #1640b3;
}
A:visited {
	text-decoration: none;
	color: #92278f;
}
A:hover, A:focus {
	text-decoration: underline;
	color: #113189;
}

/*======================================== Headings ========================================*/

h1, h2, h3, h4 {
	font-size: 4.5em;
	line-height: 1.222em;
}
h2 {
	font-size: 3em;
	line-height: 1.167em;
}
h3 {
	font-size: 2em;
	line-height: 1.250em;
}
h4 {
  font-size: 1.5em;
  line-height: 1.333em;
}
h5 {
  font-size: 1.25em;
  line-height: 1.333em;
}

/*======================================== Accessibility ========================================*/

/*Position element off screen but still visible to assistive technologies.*/
.accessibility-hide {
	position: absolute;
	left: -99999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*Accessibility classes for development use only*/

/*An IE only class to check general contrast. Add to html, or any other element, to render in greyscale.*/
.accessibility-contrast {filter: gray;}

/*======================================== Layout ========================================*/

.layout-left {float: left;}
.layout-right {float: right;}

/*======================================== Assets ========================================*/

/* Make visual assets scalable */
#main img, #main iframe, #main object {
	max-width: 100%;
	max-height: 100%;
}

/*Images*/
.asset-image {
	margin: 0 16px 16px 0;
	max-width: 50%;
}
#main .asset-image p {	
	margin-bottom: 0;
}
.asset-image.layout-right {
	margin-left: 16px;
	margin-right: 0;
}

/*Blockquotes*/
.asset-quote {
	margin: 0 16px 16px 0;
	max-width: 50%;
	padding-left: 40px;
	padding-right: 16px;
	border-right: 8px solid #dcdcdc;
}
.asset-quote blockquote {
	position: relative;
}
.asset-quote blockquote:before {
	content: "\201C";
	font-size: 80px;
	color: #cdcdcd;
	position: absolute;
	left: -40px;
	top: 32px;
}
.asset-quote p {	
	font-size: 1.250em;
	line-height: 1.2em;
	color: #2d2d2d;
}
.asset-quote cite {
	font-size: 1em;
	line-height: 1.5em;
}
.asset-quote cite:before {
	content: "\2014";
	margin-right: 8px;
}
.asset-quote.layout-right {
	margin-top: 0;
	margin-right: 0;
	padding-left: 16px;
	border-left: 8px solid #dcdcdc;
}


/*======================================== Alignment with pre-grid styles ========================================*/

body {
	background-color: #eee;
	font-size: 13px;
	font-family: Arial,Helvetica,sans-serif;
}

a, a:link, a:visited, a:focus, a:active {
	cursor: pointer;
	color: #2b8d92;
}

a:hover {
	color: #333;
}

h1 {
	font-size: 2.3em;
	margin-left: -5px;
	margin-bottom: 0.5em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1.75em;
	line-height: 1em;
	margin-bottom: 0.5em;
}

h4 {
	font-size: 1.5em;
}

input, textarea {
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

textarea {
	height: 150px;
	width: 95%;
}

.type-intro p {
	margin-top: 0.5em;
}

/* grid */

.grid-container {
	max-width: 300px;
	max-width: 1206px;
}

*+html .grid-container {width: 1206px;} /* ie7 */


.grid-container > .grid-row {
	background-color: #fff;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

/* header */

#osNavBar {
	border: none;
	margin-top: 10px;
	background-image: none;
}

#osNavBar .logo {
	text-align: left;
	padding: 9px 0 0 16px;
}

#osNavBar .logo a {
	display: inline-block;
}

#osNavBar .link {
	padding: 19px 16px 0 0;
	font-size: 13px;
	line-height: 13px;
}

body .CodeMirror {
	font-size: 13px;
	line-height: 14px;
}

/* masthead */

#masthead {
	margin-top: 12px;
	border-radius: 6px 6px 0 0;
	height: 6px;
	min-height: 0;
	padding: 0;
	text-align: center;
	background: #fff;
	border-top: 1px solid #ccc;
	margin-bottom: 0;
}

/* breadcrumbs */

#breadcrumbs {
	margin: 12px 0 0 0;
}

#breadcrumbs p,
#breadcrumbs ul {
	margin-bottom: 0;
}

#breadcrumbs ul li a {
	background-image: url(/img/chevron-right.png);
	text-decoration: none;
}

/* main */

#main .grid-row.content-area {
	padding-bottom: 20px;
}

#mainContent {
	padding: 10px 10px 20px 10px;
}

#mainAside {
	margin: 75px 0 50px 0;
}

#mainAside aside {
	padding: 15px;
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid #ccc;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.1) inset;
}

#mainAside table {
	margin-bottom: 0;
}
/* footer */

#pageFooter a:hover {
	text-decoration: none;
}

#pageFooter #supplementaryNavigation {
	border-radius: 0 0 10px 10px;
	border-bottom: 1px solid #ccc;
	border-top: none;
	padding: 0 0 10px 0;
	font-size: 13px;
}

/* copyright and contact */

#copyright {
	border: 0;
	background: none;
	font-size: 12px;
}

#copyright .grid-cols-8,
#copyright .grid-cols-4 {
	padding: 0;
}

#copyright .grid-cols-4 {
	text-align: right;
}

/*======================================== (Re-)Alignment with bootstrap ============================*/

pre {
	padding: 9.5px;
	margin: 0 0 10px;
	font-size: 12px;
	border: 1px solid #ccc;
	font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
}

[class^="icon-"],
[class*=" icon-"] {
  background-image: url("/img/glyphicons-halflings.png");
}

.icon-white,
.nav-tabs > .active > a > [class^="icon-"],
.nav-tabs > .active > a > [class*=" icon-"],
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"] {
  background-image: url("/img/glyphicons-halflings-white.png");
}

/* reset the background color of nested tables (needs radius tweaks, too, to avoid overlaps) */

.table-striped tbody tr td table td,
.table-striped tbody tr td table th {
	background-color: #fff !important;
}

.table-striped td table tr:first-child th {
	border-radius: 4px 0 0 0;
}

.table-striped td table tr:last-child th {
	border-radius: 0 0 0 4px;
}

/* dropdown menus should use OS colors, too */

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-submenu:focus > a,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
	background-color: #2b8d92;
	background-image: -moz-linear-gradient(top, #2B8D92, #2F6368);
	background-image: -webkit-linear-gradient(top, #2B8D92, #2F6368);
	background-image: -o-linear-gradient(top, #2B8D92, #2F6368);
	background-image: linear-gradient(to bottom, #2B8D92, #2F6368);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2B8D92', endColorstr='#2F6368', GradientType=0);
}

.dropdown-menu > li {
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}


/*======================================== form fieldsets ========================================*/

#mainContent fieldset {
	border: 1px solid #ddd;
	-padding: 5px 20px;
	border-radius: 5px;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.1) inset;
	margin-bottom: 1em;
	width: 100%;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

#mainContent fieldset legend {
	display: inline-block;
	width: auto;
	padding: 0 5px;
	font-weight: bold;
	background-color: #fff;
	margin: 0 10px;
}	

/*======================================== Home // Datasets sidebar ========================================*/

body.dataset-index #mainAside aside.datasets {
	line-height: 1em;
	padding: 0px;
}

body.dataset-index aside.datasets h3 {
	padding: 10px;
	border-bottom: 1px solid #eee;
	background-color: #f6f6f6;
	background-image: linear-gradient(to bottom, #fff, #f3f3f3);
	background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
	background-image: -moz-linear-gradient(top, #fff, #f3f3f3);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f3f3f3', GradientType=0);
	background-repeat: repeat-x;
	border-radius: 4px 4px 0 0;
	font-size: 18px;
}

body.dataset-index aside.datasets ul {
	margin: 20px 15px;
}

body.dataset-index aside.datasets li {
	border: 1px solid #f0f0f0;
	margin-bottom: 10px;
	background-color: #f6f6f6;
	background-image: linear-gradient(to bottom, #fff, #f3f3f3);
	background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
	background-image: -moz-linear-gradient(top, #fff, #f3f3f3);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f3f3f3', GradientType=0);
	background-repeat: repeat-x;
}

body.dataset-index aside.datasets li > div {
	vertical-align: middle;
	padding: 16px 12px 16px 8px;
	margin-bottom: 4px;
	display: inline-block;
	width: 55%;
}

body.dataset-index  aside.datasets .logo {
	width: 40%;
	padding-top: 20px;
}

body.dataset-index  aside.datasets .logo a {
	display: block;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.1) inset;
	border: 1px solid #bbb;
	padding: 3px;
}

body.dataset-index aside.datasets .logo a:hover {
	border-color: #333;
}

body.dataset-index aside.datasets li div.info {
	padding-top: 2px;
	color: #777;
}

/*======================================== Dataset view ========================================*/

/* description */

.dataset-description {
  margin-bottom: 1em;
}

.dataset-about-link {
  margin-bottom: 3em;
}

.api-explorer {
  margin-top: 2em;
}


/* summary */

#main aside.dataset-summary {
	background-image: none;
	box-shadow: none;
	background-color: #fff;
	border: none;
	padding: 0;
}

#main aside.dataset-summary .logo td {
	padding: 5px;
	background-color: #fff;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.1) inset;
}

#main aside.dataset-summary .logo img {
	vertical-align: bottom;
	width: 100%;
}

.dataset-summary table thead {
	background-color: #f6f6f6;
	background-image: linear-gradient(to bottom, #fff, #f3f3f3);
	background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
	background-image: -moz-linear-gradient(top, #fff, #f3f3f3);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f3f3f3', GradientType=0);
	background-repeat: repeat-x;
}

.dataset-summary tbody th {
	text-align: right;
	vertical-align: top;
}

.dataset-summary tr.coverage a:after {
	content: ",";
	color: #2d2d2d;
}

.dataset-summary tr.coverage a:last-child:after {
	content: none;
}

#main .dataset-summary tr ul {
	margin-bottom: 0;
}

#main .dataset-summary tr ul li {
}

#main .dataset-summary tr ul a {
	display: block;
	line-height: 15px;
	margin: 2px 0 10px 0;
}

#main .dataset-summary tr ul li:last-child a {
	margin-bottom: 0;
}

/*======================================== API view ========================================*/

/* intro */

#main aside.api-intro {
	background-image: none;
	box-shadow: none;
	background-color: #fff;
	border: none;
	padding: 0;
	margin-bottom: 20px;
}

.api-intro table thead {
	background-color: #f6f6f6;
	background-image: linear-gradient(to bottom, #fff, #f3f3f3);
	background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
	background-image: -moz-linear-gradient(top, #fff, #f3f3f3);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f3f3f3', GradientType=0);
	background-repeat: repeat-x;
}

.api-intro tbody th {
	text-align: right;
	vertical-align: top;
}

#main .api-intro p:last-child {
	margin-bottom: 0;
}


/* dataset-box on API page */

#main aside.dataset-box {
	background-image: none;
	box-shadow: none;
	background-color: #fff;
	border: none;
	padding: 0;
}

#main aside.dataset-box .logo td {
	padding: 5px;
	background-color: #fff;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.1) inset;
}

#main aside.dataset-box .logo img {
	vertical-align: bottom;
	width: 100%;
}

.dataset-box table thead {
	background-color: #f6f6f6;
	background-image: linear-gradient(to bottom, #fff, #f3f3f3);
	background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
	background-image: -moz-linear-gradient(top, #fff, #f3f3f3);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f3f3f3', GradientType=0);
	background-repeat: repeat-x;
}

.dataset-box tbody th {
	text-align: right;
	vertical-align: top;
}

/* search box autocomplete */
/* originally from http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css */

.ld-search {
	overflow: hidden;
}

#ldsearch { 
	width: 450px;
	margin-bottom: 0;
	vertical-align: middle;
}

@media (max-width: 1040px) {
	#ldsearch { 
		width: 90%;
	}
}

.ldsearch .add-on {
	vertical-align: middle;
	padding: 6px;
	display: inline;
}

.ldsearch .add-on i.icon-search {
	cursor: pointer;
}

.ldsearch label {
	display: inline;
}

.ldsearch > span.active {
	display: block;
	width: 90%;
	font-size: 0.9em;
	color: #999;
	background-color: #f6f6f6;
	padding: 5px;
	margin: 0 2px;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
}

ul.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
	text-align: left;
	border: 1px solid #bbb;
	border-top: none;
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	border-radius: 0 0 6px 6px;
	padding: 5px 0;
	background-color: #fff;
	font-size: 15px;
	outline: none;
}

ul.ui-autocomplete a {
	display: block;
	padding: 5px 10px;
	clear: both;
	font-weight: normal;
	color: #333;
	white-space: nowrap;
	text-decoration: none;
	border-top: 1px solid #f6f6f6;
}

ul.ui-autocomplete li:first-child a {
	border-top: none;
}

ul.ui-autocomplete li > a:hover,
ul.ui-autocomplete li > a:focus,
ul.ui-autocomplete .ui-state-focus { 
  color: #fff;
  text-decoration: none;
  background-color: #2b8d92;
  background-image: -moz-linear-gradient(top, #2B8D92, #2F6368);
  background-image: -webkit-linear-gradient(top, #2B8D92, #2F6368);
  background-image: -o-linear-gradient(top, #2B8D92, #2F6368);
  background-image: linear-gradient(to bottom, #2B8D92, #2F6368);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2B8D92', endColorstr='#2F6368', GradientType=0);
  background-repeat: repeat-x;
}

ul.ui-autocomplete a .title {
	display: inline-block;
	width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
}

ul.ui-autocomplete a .type {
	display: inline-block;
	width: 39%;
	text-align: right;
	font-size: 0.8em;
	color: #999;
	overflow: hidden;
	text-overflow: ellipsis;
}

ul.ui-autocomplete li > a:hover .type,
ul.ui-autocomplete li > a:focus .type,
ul.ui-autocomplete .ui-state-focus .type {
	color: #fff;
}

/* OpenLayers */
.ol-zoom {
	font-size: 16px;
	font-family: system-ui;
}

/* misc */

.nowrap {
	white-space: nowrap;
}

body.doc-page #mainContent ul {
 	margin: 1em 0;
  	padding: 0 0 0 40px;
}

body.doc-page #mainContent ul li {
	list-style: disc;
}

body.doc-page h2 {
	margin-bottom: 0.5em;	
}

body.doc-page #doc-nav.affix {
    position: fixed;
    top: 0px;
    width: 100%;
}

/* responsive behaviour */

@media (max-width: 700px) {
	[class*="grid-cols"] {
		float: none;
		display: block;
		margin: 0;
		width: 100%;
		padding: 10px 10px !important;
	}
	
	[class*="grid-cols"] [class*="grid-cols"] {
		padding: 10px 0 !important;
	}
	
	#ldsearch { 
		width: 500px;
	}
	
	#mainAside {
		margin-top: 0;
	}
	
	#mainContent {
		padding-bottom: 0;
	}
	
	body.doc-page #doc-nav.affix {
		position: relative ;
		top: auto;
		width: 100%;
		background-color: #fff;
	}
	
}

@media (max-width: 687px) {
	#share H2, #follow H2 {
		float: none;
	}
}

@media (max-width: 675px) {
	#ldsearch { 
		width: 450px;
	}
}

@media (max-width: 620px) {
	#ldsearch { 
		width: 350px;
	}
}

@media (max-width: 520px) {
	#ldsearch { 
		width: 70%;
	}
	table.table {
		table-layout:fixed;/* keep td contents from resizing their table */
	}
}