/*******************************************************
										All pages
*******************************************************/


/* Font = Open Sans*/
/*Make sure the font-family name is unique so doesn't clash with other fonts*/
/*@font-face {
  /*font-family: 'Open Sans221';
  font-style: normal;
  font-weight: 400;
  src:
		local('Open Sans221'),
		url('../fonts/open_sans.woff2') format('woff2'),
		url('../fonts/open_sans.woff') format('woff'),
		url('../fonts/open_sans.ttf') format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}*/

/* Style the entire page*/
.body_style{
	/*font-family: "Open Sans221";*/
	font-size: 0.95rem;
	/*background-color: #f2f8f5;*/
	background-color: #fff;
}

/* All links - standard colour*/
a {
	color: #0E5ACC;
}

.centred{
	text-align:center;
}

/* Larger H5 */
h5 {
	font-size:130%;
}

/* So we have whitespace at the bottom of the page*/
.page_bottom{
	margin: 2rem;
}

hr {
	background-color: #449d44;
	height:1px;
}

/* Line that separates the content from the top-nav and pagination */
hr.thick{
	background-color: #14cca7;
	height:4px;
	/*background-image: linear-gradient(135deg, #44663d, #66885d);*/
	margin-bottom: 1rem;
}

hr.perc_30_width{
	width: 30%;
}

section {
	margin-top: 1.5rem;
}

/* Used on the index page and the blog*/
.rss_icon{
	width:1rem;
	/* So it aligns properly */
	margin-top: -3px;
	padding: 0;
}

span.strapline{
	font-size: 110%;
}

/*******************************************************
					Index page
*******************************************************/

.jumbotron{
	background-color: #14cca7;
	/*background-image: linear-gradient(135deg, #80ffcf, #14cca7, #80ffcf);*/
	padding-top:2rem;
	padding-bottom:2rem;
	font-size: 110%;
}

.logo_index {
	width: 100%;
	max-width: 350px;
	height: 100%;
	margin:2rem;
}

.front_strapline {
	font-size: 110%;
}

.page_head {
	text-align: center;
	font-weight: bold;
	margin-bottom: 1.4rem;
	margin-top: 1.5rem;
}

.search_tips_div {
	background-color: #eee;
	border: 1px solid #14cca7;
	border-radius: 10px;
	padding: 10px;
	margin-top: 2rem;
	font-size:80%;
}

/* Search suggestion highlighting */
.search_suggestion {
	color: #000;
	font-style: italic;
	background-color: #99ffcf;
	padding: 0 5px;
}

.blog_link{
	border: 2px solid #44663d;
	border-radius: 10px;
	padding: 10px;
}

/*******************************************************
										Nav Bar
*******************************************************/


/* Fixed height navbar */
.navbar {
	background-color: #14cca7;
	background-image: linear-gradient(90deg, #fff, #14cca7, #14cca7);
	/*height: 3rem;*/
}


.navbar-toggler, .hamburger-icon{
	color:#44663d;
	border-color: #44663d !important;
	border-width:2px;
}

/* Only show the bottom-border when the fixed-top-2 isn't showing */
@media (min-width:992px) {
	.navbar-border-partial {
		border-bottom: 1px solid #30724b;
	}
}

@media (max-width:576px) {
	.search-top-small {
		margin-top: 1rem;
	}
}

/* - https://code.luasoftware.com/tutorials/bootstrap/bootstrap-hide-element-based-on-viewport-size/ */
/* So that we don't lose the top of the page when the fixed-top-2 is applied */
@media (min-width:576px) and (max-width:992px) {
	.search-top-small {
		margin-top: 2rem;
	}
}


/* Used on pages that don't have a search bar */
.navbar-border-full {
	border-bottom: 1px solid #30724b;
}

ul.navbar-nav > .nav-item > .nav-link {
	color: #222;
	font-size: 90%;
	font-family: Tahoma, Verdana, "Arial Black", Arial, sans-serif;

	margin: 0.15rem;
	padding: 0.3rem;

	background-color: #fff;

	border: 2px solid #14cca7;
	border-radius: 0.25rem;
}

ul.navbar-nav > .nav-item > a.nav-link:hover {
	color:#fff;
	background-color: #666;
	/* Must have border for alignment*/
	border: 2px solid #666;
}

/* Currently selected item */
ul.navbar-nav > .nav-item > span.nav-link{

	color: #fff !important;
	border: 2px solid #fff;
	background-color: #30724b;

}

/* Ends up massive otherwise*/
.nav_logo {
	width: 100%;
	max-width: 150px;
}

/*******************************************************
										Search Box
*******************************************************/

.search_button{
	background-color:#fff;
	color:#222;
}

.search_button:hover{
	background-color:#30724b;
	color: #fff;
}

.search_box{
	border-color:#30724b;
}

/* Overwrite default blue of bootstrap focusing */
.search_box:focus{
	border-color:#30724b;
	box-shadow: 0 0 5px #30724b;
}

/* Text in search boxes should be nice and black */
.form-control {
	color: #000;
}

/* Extra paddings so the search fixed-top is "below" the navbar fixed-top*/
/* Needs the same background image as the fixed-top too*/
.fixed-top-2 {
	margin-top: 3rem;
	padding-top: 0.1rem;
	height: 2.25rem;
	background-color: #fff;
	background-image: linear-gradient(90deg, #fff, #14cca7, #14cca7);
	border-bottom: 1px solid #30724b;
}

/*******************************************************
										Results page
*******************************************************/

/* a nice bold green - 14cca7
20, 204, 167
*/


/* a nice dark green - 30724b
68, 102, 61
*/

/* So we don't get wide results */
@media  {
    #constrained_page.container{
        max-width: 800px;
    }
}



.result_num {
	color: #777;
	font-size: 80%;
}

/**********************/
/* Result styling*/

/* Box that contains each result*/
.result_box {
	margin-top: 13px;
	margin-bottom: 15px;
	font-size: 95%;
}

/* Hovering over a result*/
/* Make it glow*/
/*.result_box:hover {*/
    /*box-shadow: 0 0 15px #ddffdd;*/
/*}*/

.result_title {
    color: #00a;
	margin-bottom: 0;
	font-size: 120%;
}

.result_url {
	color: #1c7430;
	font-size: 90%;
}
.result_content {
	color: #111;
}

.result_keywords{
	font-style: italic;
	font-size: 90%;
	color: #555;
	margin-bottom:8px;
}

/**************************************/
/* Right side result */

/*Icon boxes*/
.table_icon {
	width:60px;
	text-align:center;
	font-weight: bold;
	color: #44663d;
}

/* right table as a whole*/
.result_info_table{
	font-size:90%;
	margin-left:-5px;
	color: #222222;
}

/* Less padding between the result text and the right-side item*/
article > div.col-sm-8{
	margin-right:-10px;
}

/* Remove the standard border */
.result_info_table > tbody > tr > td{
	border: none;
}

/* Add the left splitting line, but only to the icons */
.table > tbody > tr > td.table_icon{
	border-left: 1px solid #14cca7;
}

/* Less padding around the right-side table*/
.table-condensed > tbody > tr > td {
	padding: 3px;
}

/**************************************/
/* Pagination section */

/* Active page box */
/*  These need to be important so that they override the first/last child stuff when looking at page 1 & 15 */

.pagination{
	font-family: Tahoma, Verdana, "Arial Black", Arial, sans-serif;
}

/* Current page */
.pagination > .active > a{
	background-color: #666 !important;
	border: 1px solid #14cca7 !important;
	color: #fff !important;
	border-radius: 0;
	font-weight: bold;
}


/* Non-active boxes (except left/right arrow boxes) */
.pagination > li > a{
	color: #000;
	border-color: #14cca7;
}
.pagination > li > a:hover{
	color: #fff;
	background-color: #30724b;
	border-color: #14cca7;
}

/* Left/right arrows */
.pagination > li:first-child > a,
.pagination > li:last-child > a{
	color: #000;
	border-color: #bbb;
}
.pagination > li:first-child > a:hover,
.pagination > li:last-child > a:hover{
	color: #fff;
	background-color: #30724b;
	border-color: #14cca7;
}

/*******************************************************
										Layer Page
*******************************************************/

.layer_page_div{
	padding:5px;
}

.table_wrap{
	/* So that the table doesn't overflow because of the very-long urls*/
	table-layout: fixed;
	word-wrap: break-word;
}

/* Data table gets a border */
.layers_table > tbody > tr> td,
.key_info_table > tbody > tr > td{
	border: 1px solid #44663d !important;
}

/* Alternating table stripe colour*/
/* ! Also used on the stats page ! */
.table-striped > tbody > tr:nth-of-type(2n+1){
	background-color: #f2f2f2;
}

.back_to_results{
	text-align:center;
}

.key_info_table {
	margin:1px;
	border: 1px solid #14cca7 !important;
	box-shadow: 2px 2px 4px #44663d !important;
	font-size:105%;
}

#layer_info, #service_info {
	font-size: 85%;
}

/* Bounding box extent image*/
.bbox_image{
	padding: 5px;
	box-shadow: 1px 1px 4px #44663d !important;
    display: block;
    margin: 0 auto;
}

/* Maximum image size for the "unknown bbox" image - no need to make it huge */
.bbox_image_max_size{
	max-width:400px;
}


/******************
BBOX child Tables
*/

/* So that strip colours come through from the parent
For some reason using the specific ".child_table" class doesn't work, so using generic .table */
table.table  {
	background-color: inherit !important;
}

/* Override bootstrap */
.child_table {
	margin-bottom: 0;
}

/* So there is no outer border for bbox tables.
If there was, it'd overlap the parent table border */
.child_table tbody {
    border-collapse: collapse;
    border-style: hidden;
}

/* Inner border */
/* "Important" is needed to override bootstrap; otherwise get a great horizontal line*/
.child_table td {
	border: 1px dotted #999 !important;
}

 /* So that the bbox table borders exactly overlap the parent table borders*/
.bbox_table_div{
	margin: -5px -5px -25px -5px;
}

/* Splitter between native BBOX tables */
hr.bbox {
	background-color:#999;
	height:1px;
	margin-top:7px;
	margin-bottom:7px;
}

/*******************************************************
						Stats Page
*******************************************************/

/* Tables on the stats page */
.stats_table th{
	background-color: #44663d;
	color: #fff;
}

.stats_table td {
	border: 1px solid #aaa !important;
}

/* Because we can't use <br /> to separate the items in the glossary*/
dt {
	margin-top: 15px;
}

code {
	font-size: 92%;
}

img.full_size {
	width: 100%;
	height: 100%;
}

div.image_padding{
	margin: 2rem;
}

i.rainbow{
	background-image: -moz-linear-gradient(left,red, orange, green, blue, purple);
	background-image: -webkit-linear-gradient(left,red, orange, green, blue, purple);
	background-image: -o-linear-gradient(left,red, orange, green, blue, purple);
	background-image: -ms-linear-gradient(left,red, orange, green, blue, purple);
	background-image: linear-gradient(left,red, orange, green, blue, purple);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position:relative;
	display:inline-block;
}

/*******************************************************
				API & Licensing Pages
*******************************************************/

/****** Shared components *****/

/* very small page constraint */

.signup-button{
	border: 3px solid #30724b;
	border-radius: .25rem;

	background-color: #30724b;
	color: #fff!important;
}
.signup-button:hover{
	background-color: #fff;
	color: #000!important;

	/* Otherwise it picks up the underline */
	text-decoration: none;
}

#selling_page .boxy {
	background: #fff;
	color: #000;
	border: 3px solid rgba(0, 0, 0, .125);
	border-radius: .25rem;
}

#selling_page h3{
	margin: 1rem 0;
	text-align: center;
}

/****** Background colourings *****/

.light_green{
	background-color: #efe;
}

/* full-black font to improve contrast */
.bright_green {
	background-color: #14cca7;
	color: #000;
}

/* So that sections are full-width and we can colour them */
/* No top/bottom margin because it would be a gap between sections and thus white */
#selling_page section{
	margin: 0 0;
	padding: 1rem 0;
}


#blurb {
	/*background-color: #eee;*/
	font-size: 110%;
}

/* Increased spacing between blurb items*/
#blurb .more_top_padding{
	padding-top: 3rem;
}

/* Minimum distance between the icons */
#blurb .fa{
	padding: 0.3rem;
}

#blurb .brand-green-font{
	color: #14cca7;
}
#blurb .tree-green{
	color: #30724b;
}
#blurb .sea_blue{
	color: #307ba2;
}
#blurb .map_red{
	color: #c27277;
}
#blurb .gold{
	color: #909214;
}
#blurb .brown{
	color: #945645;
}


/****** Plans (also used for Products) *****/

/* Overwrite bootstrap so that we don't end up left-aligned on smaller screens*/
.card-deck {
	flex-flow: row wrap;
}

#plans .highlighted-plan {
	border-color: #14cca7!important;
	box-shadow: 0 0 20px #30724b;
}

#plans .card-title{
	font-size: 160%;
}

#plans .card{
	margin: 1rem;

	/* cheating for fixed-width cards */
	min-width: 300px;
	max-width: 300px;
}

#plans .price{
	font-size:210%;
}
#plans .enquire{
	font-size:130%;
}

/****** Comparison table *****/
.comparison_table {
	padding: 1rem 0;
	border: none;

	/* Stops the table from becoming scrollable */
	overflow-x: inherit;

	/* Centers table*/
	max-width: 600px;
	margin: 1rem auto;
}

.comparison_table tbody{
	border: none;
	background-color: #fff;
}

.comparison_table thead{
	text-align: center;
	vertical-align: middle;
	background-color: #fff;
}
.comparison_table th {
	/* must be important to overwite bootstrap */
	text-align: center;
	vertical-align: middle;
	border: 1px solid #ddd;
	padding: 0.2rem 0;
}

.comparison_table td {
	/* must be important to overwite bootstrap */
	text-align: center;
	vertical-align: middle;
	border: 1px solid #ddd;
	padding: 0.2rem 0;
}

.comparison_table .left{
	font-weight: bold;
	text-align: right;
	border: none!important;
	background-color: #fff;
	padding-right: 0.5rem;
}

/* Middle column highlighting */
.comparison_table td:nth-child(3),
.comparison_table th:nth-child(3) {
	background: #efe;
}

.comparison_table .fa-check{
	color: #23c833;
}

.comparison_table .fa-times{
	color: #c82333;
}

/* No border on the signup row, and slightly taller */
.signup_row > td, .signup_row{
	border: none;
	height: 50px;
}

/*******************************************************
							Contact Page
*******************************************************/