@charset "utf-8";

html {
	color: #525F7F;
	font-family: 'Lato', sans-serif;
	font-size: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}

body {
	background-color : #ffffff;
	font-size: 0.75em;
	margin : 0;
	padding : 0;
}

h1 {
	color: #525F7F;
	line-height: 1.1;
	margin: 0px 0px 0px 0px;
	padding:0px 0px 10px 0px;
}
h2 {
	color: #525F7F;
	line-height: 1.1;
	margin: 0px 0px 0px 0px;
	padding:0px 0px 10px 0px;
}
h3 {
	color: #525F7F;
	line-height: 1.1;
	margin: 0px 0px 0px 0px;
	padding:0px 0px 10px 0px;
}
p {
	color: #525F7F;
	line-height: 1.5;
	margin: 0px 0px 0px 0px;
	padding:0px 0px 10px 0px;
}

a {
	text-decoration: none;
	cursor: pointer;
}

 input {
	background-color: #EEEEEE;
	border: none;
	color: #525F7F;;
	font-size: 17px;
	font-weight: 300;
	width: 100%;
	padding: 6px;
	margin: 0px 0px 10px 0px;
}

.button{
	border-radius: 5px;
	color: #FFFFFF;
	font-size: 16px;
	font-weight: 400;
	padding: 10px 10px 10px 10px;
	text-decoration: none;
	-webkit-transition: background-color 0.5s ;
	-moz-transition: background-color 0.5s ;
	-ms-transition: background-color 0.5s ;
	-o-transition: background-color 0.5s ;
	transition: background-color 0.5s ;
}
.fixedwidth {
	display:inline-block;
	text-align: center;
	width:150px;
}
.maxwidth {
	display:inline-block;
	text-align: center;
	width:100%;
}

.pomegranite .button,a.pomegranite.button {
	background-color: #E85512;
}
.pomegranite:hover .button,a.pomegranite.button:hover{
	background-color: #C44712;
}

#containerheader {
	width: 100%;
	height:300px;
}

.header {
	overflow:hidden;
	padding-bottom: 30px;
	height:300px;
	background-image: url("../images/postcode-tools-header-background.jpg");
 background-color: #d74a33;
	background-repeat: no-repeat;
		background-position: center;
}

/* --------------------------------------------------- */
/* content container                                   */
/* --------------------------------------------------- */
	section.contentcontainer{
		overflow:auto;
		position:relative;
		width: 100%;
		z-index: 0;
	}

/* --------------------------------------------------- */
/* content feature                                    */
/* --------------------------------------------------- */

	div#contentpagehead{
		padding-top:70px;

	}
	div#contentpagehead .row {
		overflow:auto;
		padding-bottom:60px;
	}

	div#contentpagehead .column{
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;	}
	
	div#contentpagehead .column h1{
		font-size: 44px;
		font-weight:300;
	}
	div#contentpagehead .column h2{
		font-size: 24px;
		font-weight:400;
	}
	div#contentpagehead .column h3{
		font-size: 22px;
		font-weight:500;
		margin: 20px 0px 0px 0px;
		padding: 0px;
	}
	div#contentpagehead .column p{
		font-size: 17px;
		font-weight:400;
		margin: 10px 0px 0px 0px;
	}
	div#contentpagehead a.column {
		padding: 20px;
		-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
	}
	div#contentpagehead a.column h1{
		font-size: 24px;
		font-weight:400;
	}
	
	.linkbutton{
		border-radius: 5px;
		color: #FFFFFF;
		font-size: 16px;
		font-weight: 400;
		padding: 10px 10px 10px 10px;
		text-decoration: none;
		-webkit-transition: background-color 0.5s ;
		-moz-transition: background-color 0.5s ;
		-ms-transition: background-color 0.5s ;
		-o-transition: background-color 0.5s ;
		transition: background-color 0.5s ;
	}
	.pomegranite .linkbutton{
		background-color: #E85512;
	}

	div#contentpagehead a {
		display: block;
	}
	div#contentpagehead li{
		font-size: 17px;
		font-weight:400;
		padding: 0px 0px 5px 0px;
	}

	@media screen and (min-width: 1000px) {
		div#contentpagehead .row {
			width: 980px;
			margin:0px auto 0px auto;
		}
		div#contentpagehead .column {
			float:left;
			width: 600px;
			padding: 0px;
			margin-left: 10px;
		}
		div#contentpagehead a.column {
			float:right;
			width: 300px;
			padding: 20px;
			margin-top: 10px;
			margin-right: 10px;
		}
	}
	@media screen and (max-width: 999px) and (min-width: 700px) {
		div#contentpagehead .row {
			width: 100%;
		}
		div#contentpagehead .column {
			clear:both; 
			margin: 10px auto 10px auto;
			padding: 20px;
			text-align: center;
			width: 60%;
		}
		div#contentpagehead a.column {
			clear: both; 
			margin: 10px auto 10px auto;
			padding: 20px;
			text-align: center;
			width: 60%;
		}
		div#contentpagehead .column img{
			margin: 0px auto 0px auto;
		}
	}
	@media screen and (max-width: 699px) and (min-width: 400px) {
		div#contentpagehead .row {
			width: 100%;
		}
		div#contentpagehead .column {
			clear:both; 
			margin: 10px auto 10px auto;
			padding: 20px;
			text-align: center;
			width: 75%;
		}
		div#contentpagehead a.column {
			clear:both; 
			margin: 10px auto 10px auto;
			padding: 20px;
			text-align: center;
			width: 75%;
		}
		div#contentpagehead .column img{
			margin: 0px auto 0px auto;
		}
	}
	@media screen and (max-width: 399px) {
		div#contentpagehead .row {
			width: 100%;
		}
		div#contentpagehead .column {
			clear:both; 
			margin: 10px auto 10px auto;
			padding: 20px;
			text-align: center;
			width: 90%;
		}
		div#contentpagehead a.column {
			clear:both; 
			margin: 10px auto 10px auto;
			padding: 20px;
			text-align: center;
			width: 90%;
		}
		div#contentpagehead .column img{
			margin: 0px auto 0px auto;
		}
	}

/* --------------------------------------------------- */
/* content API example                                 */
/* --------------------------------------------------- */

	div#contentapiexample{
		padding-top:70px;
	}

	div#contentapiexample .row {
		overflow: auto;
		width:100%;
	}


	div#contentapiexample .columntext {
		margin:0px;
		padding:20px 0px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		text-align: center;
	}

	div#contentapiexample .columntext h1{
		font-size: 44px;
		font-weight:300;
	}
	div#contentapiexample .columntext p{
		font-size: 17px;
		font-weight:400;
		margin: 10px 0px 0px 0px;
	}

	div#contentapiexample .column {
		margin:10px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
		-moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
		-webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
		box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
		text-align: center;
	}

	div#contentapiexample .column h1{
		font-size: 24px;
		font-weight:400;
		line-height: 1;
		padding-top:20px;
	}

	div#contentapiexample .column p{
		font-size: 17px;
		font-weight:400;
		line-height: 24px;
	}

	div#contentapiexample dl {
		margin: 40px auto 40px auto;
		padding: 0em 0em 10px 0em;
		text-align: left;
		width:  300px;
}
	div#contentapiexample dt {
		float: left;
		font-size: 17px;
		font-weight:400;
		line-height: 29px;
		width: 160px;
	}
	div#contentapiexample dd {
		margin: 0px 0px 4px 160px;
	}

	div#contentapiexample input {
		background-color: #EEEEEE;
		border: none;
		color: #525f7F;
		font-size: 17px;
		font-weight: 300;
		margin: 0px 0px 10px 0px;
		padding: 6px;
	}


/* --------------------------------------------------------------------------- */
/* Tables                                                                      */
/* --------------------------------------------------------------------------- */
div#contentapiexample table {
	border: 1px solid #6F6F71;
	color: #525F7F;
	font-family: 'Lato', sans-serif;
	font-size: 15px;
	margin: 40px auto;
	padding: 0px;
	width:100%;
}

	div#contentapiexample th {
		color: #FFFFFF;
		background-color: #6F6F71;
		vertical-align: top;
		padding: 2px 0px 2px 5px;
		margin: 0px;
		height: 20px;
		text-align: left;
	}
 	div#contentapiexample td {
		word-break:break-all;
		vertical-align: top;
		margin-top: 8px;
		margin-right: 8px;
		margin-left: 8px;
		margin-bottom: 8px;
		text-align: left;
		overflow: hidden;
		padding: 2px 5px 2px 5px;
}
	div#contentapiexample td.cellname{
		width: 25%;
		font-weight: bold;
		font-style: italic;
}
 	div#contentapiexample td.cellvalue{
		width: 75%;
}

	@media screen and (min-width: 1000px) {
		div#contentapiexample .row {
			width: 980px;
			margin:0px auto 0px auto;
		}
		div#contentapiexample .columntext {
			width: 980px;
		}
		div#contentapiexample .column {
			padding: 20px 80px 40px 80px;
			width: 960px;
		}
	}
	@media screen and (max-width: 999px) and (min-width: 700px) {
		div#contentapiexample .columntext {
			clear:both; 
			margin: 0px auto 20px auto;
			width: 80%;
		}
		div#contentapiexample .column {
			clear:both; 
			margin: 0px auto 20px auto;
			padding: 20px 10px 40px 10px;
			width: 60%;}
	}
	@media screen and (max-width: 699px) and (min-width: 400px) {
		div#contentapiexample .columntext {
			clear:both;
			margin: 0px auto 20px auto;
			width: 85%;
		}
		div#contentapiexample .column {
			clear:both;
			margin: 0px auto 20px auto;
			padding: 20px 10px 40px 10px;
			width: 75%;
		}
	}
	@media screen and (max-width: 399px) {
		div#contentapiexample .columntext {
			clear:both;
			margin: 0px auto 20px auto;
			width: 90%;
		}
		div#contentapiexample .column {
			clear:both;
			margin: 0px auto 20px auto;
			padding: 20px 5px 40px 5px;
			width: 90%;
		}
	}


	.results {
		border: 1px solid #6F6F71;
		display:none;
		font-family: "Lucida Console", Monaco, monospace;
		font-size: 14px;
		overflow-x: hidden;
		overflow-y: auto;
		max-height: 200px;
		margin: 40px auto 0px auto;
		padding:5px 20px 5px 20px;
		text-align: left;
}
	.results pre{
		margin: 0px;
		padding:0px;
}

/* --------------------------------------------------- */
/* hero text                                            */
/* --------------------------------------------------- */

	div.herotext {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	div.herotext p{
		font-style: italic;
		font-weight:300;
		text-align: center;
		line-height: 1.1;
	}
	@media screen and (min-width: 1000px) {
		div.herotext {
			width: 980px;
			margin:60px auto 60px auto;
		}
		div.herotext p{
			font-size: 34px;
			padding: 0px 20px 0px 20px;
		}
	}
	@media screen and (max-width: 999px) and (min-width: 700px) {
		div.herotext {
			width: 100%;
			margin:60px 0px 60px 0px;
		}
		div.herotext p{
			font-size: 28px;
			padding: 0px 20px 0px 20px;
		}
	}
	@media screen and (max-width: 699px) and (min-width: 400px) {
		div.herotext {
			width: 100%;
			margin:60px 0px 60px 0px;
		}
		div.herotext p{
			font-size: 24px;
			padding: 0px 20px 0px 20px;
		}
	}
	@media screen and (max-width: 399px) {
		div.herotext{
			width: 100%;
			margin:60px 0px 60px 0px;
		}
		div.herotext p{
			font-size: 19px;
			padding: 0px 20px 0px 20px;
		}
	}



/* --------------------------------------------------- */
/* Testimonial                                         */
/* --------------------------------------------------- */

	div#testimonial {
		margin: 60px auto 60px auto;
	}
	div#testimonial .item {
		text-align: center;
		height:auto;
	}
	div#testimonial .item img {
		clear:both;
		display:inline;
		padding: 0px 0px 40px 0px;
		width: auto; 
	}
	div#testimonial .item p {
		font-style: italic;
		font-weight:300;
		text-align: center;
		line-height: 1.1;
	}
@media screen and (min-width: 1000px) {
	div#testimonial {
		width: 980px;
	}
	div#testimonial .item p {
		font-size: 34px;
	}
}
@media screen and (max-width: 999px) and (min-width: 700px) {
	div#testimonial {
		width: 65%;
	}
	div#testimonial .item p {
		font-size: 28px;
	}
}
@media screen and (max-width: 699px) and (min-width: 400px) {
	div#testimonial {
		width: 80%;
	}
	div#testimonial .item p {
		font-size: 24px;
	}
}
@media screen and (max-width: 399px) {
	div#testimonial {
		width: 95%;
	}
	div#testimonial .item p {
		font-size: 19px;
	}
}

/* --------------------------------------------------- */
/* Footer                                             */
/* --------------------------------------------------- */

	div#contentfooter{
		padding-top:70px;

	}
	div#contentfooter .row {
		overflow:auto;
		padding-bottom:60px;
	}

	div#contentfooter .column{
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;	}
	
	div#contentfooter .column h1{
		font-size: 44px;
		font-weight:300;
	}
	div#contentfooter .column p{
		font-size: 17px;
		font-weight:400;
		margin: 10px 0px 0px 0px;
	}
	
	@media screen and (min-width: 1000px) {
		div#contentfooter .row {
			width: 980px;
			margin:0px auto 0px auto;
		}
		div#contentfooter .column {
			width: 100%;
			padding: 0px;
			text-align: center;
		}
	}
	@media screen and (max-width: 999px) and (min-width: 700px) {
		div#contentfooter .row {
			width: 100%;
		}
		div#contentfooter .column {
			clear:both; 
			margin: 10px auto 10px auto;
			padding: 20px;
			text-align: center;
			width: 60%;
		}
	}
	@media screen and (max-width: 699px) and (min-width: 400px) {
		div#contentfooter .row {
			width: 100%;
		}
		div#contentfooter .column {
			clear:both; 
			margin: 10px auto 10px auto;
			padding: 20px;
			text-align: center;
			width: 75%;
		}
	}
	@media screen and (max-width: 399px) {
		div#contentfooter .row {
			width: 100%;
		}
		div#contentfooter .column {
			clear:both; 
			margin: 10px auto 10px auto;
			padding: 20px;
			text-align: center;
			width: 90%;
		}
	}