@charset "UTF-8";
/* CSS Document */

/*
Theme Name: feetfirst
Theme URL: http://www.johnhathway.co.uk/feetfirst
Description: A premium theme by John Hathway
Version: 1.0
Author: John Hathway
Author URL: http://www.johnhathway.co.uk
Template: feetfirst
*/

* { margin: 0; padding: 0; }
html { overflow-y: scroll; background-image: url(images/bg-1.jpg); background-repeat: repeat; background-color: #edece5;}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* Basic Styles */
body {
	background-image: url(images/bg-1.jpg); 
	background-repeat: repeat; 
	background-color: #edece5;
	font-family: 'Roboto Slab', serif;
	font-style:normal; 
	font-weight:300; 
}

#wrapper {
	width: 96%;	
	max-width: 960px;
	margin: 0 auto;
	padding: 0 2%;
	} 

h1 { text-indent: -9999px;  }

#logo h1 { text-indent: -9999px;  }

.header {
	background-image: url(images/top-band.jpg);
	background-repeat: repeat-x;
	min-height: 126px;
	background-position: center top;
	text-align: center;
}


#menufooter {
	height: 40px;
	margin: 0 auto;
	background-image: url(images/nav-footer.jpg);
	}
	
nav {
	height: 60px;
	color: #ffffff;
	width: 100%;
	background: #fd6f4e;
	font-size: 1.5em;
	font-family: 'Roboto Slab', serif;
	font-style:normal;
	font-weight:300;
	position: relative;
	background-image: url(images/menu-bg.jpg);
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 650px;
	height: 60px;
	color: #ffffff;
}
nav li {
	display: inline;
	color: #ffffff;
	float: left;
}
nav a {
	color: #ffffff;
	display: inline-block;
	width: 130px;
	text-align: center;
	text-decoration: none;
	line-height: 60px;
}

nav li:last-child a {
	border-right: 0;
}
nav a:hover {
	color: #f7bbac;
	text-decoration: underline;
	background-color: #fd6f4e;
	background-image: url(images/menu-bg.jpg);
}

nav a:active {
	color: #ffffff;
}
nav a:visited {
    color: #ffffff;
}
nav a#pull {
	display: none;
	color: #ffffff;
}

#logo {
	height: 249px;
	max-width: 960px;
	margin:0 auto;
	text-align: center;
	background-image: url(images/feet-first-logo.png);
	background-repeat: no-repeat;
	background-position: center top;
}

.article h1 {
	font-size: 32px;
	color: #fd6f4e;
	font-family: 'Roboto Slab', serif;
	font-weight:300;
	margin:0;
	padding:0;
}


.article p {
	font-size: 1.2em; 
	color: #414141; 
	margin: 1% 0 2% 0;
	line-height:160%; 
	padding: 0 10% 0 10% 
}

.article p a:link {
	text-decoration: none;
	font-size: 1em;
	color: #fd6f4e;
	line-height:120%;
	padding: 0 .5em 0 .5em 
}
.article p a:hover {
	color: #333;
	background-color:#CCC;
	line-height:120%;
	padding: 0 .5em 0 .5em 
	text-decoration: none;
}
		
.article {
	width: 100%;
	max-width: 960px;
	margin:0 auto;
	text-align: center;
	margin-top: 2%;
	font-family: 'Roboto Slab', serif;
	font-weight:300;
	float: left; 
}
.article h2 { font-size: 2.4em; color: #fd6f4e; font-family: 'Roboto Slab', serif; font-style:normal; font-weight:300;  }

.article a:link { text-decoration: none; font-size: 2.5em; color: #fd6f4e; }
.article a:hover { color: #999; text-decoration: none; }
.article a:visited { text-decoration: none; color: #fd6f4e; }

.date { font-size: 1.2em; color: #999999; }

.article-footer {
	width: 100%;
	max-width: 620px;
	height: 68px;
	background-image: url(images/article-footer.png);
	background-repeat: no-repeat;
	margin:0 auto;
	margin-bottom:4%;
	text-align: center;
}

/* Walk pictures */			
.walk-pic-ls {
	margin-top: 2em;
	max-width: 600px;
	width: 100%;
	padding: 1em;
	background-image: url(images/article-1-bg.jpg);
	text-align:center;
	margin:0 auto;
	}

.walk-pic-ls img {
		width: 100%;
		}

.walk-pic-portrait {
	margin-top: 2%;
	max-width: 600px;
	width: 96%;
	padding: 1em;
	background-image: url(images/article-1-bg.jpg);
	text-align:center;
	margin:0 auto;
	}

.walk-pic-portrait img {
		width: 100%;
		}

.walk-video-ls {
	margin-bottom: 2%;
	max-width: 640px;
	width: 100%;
	padding: 10px;
	background-image: url(images/article-1-bg.jpg);
	background-repeat: repeat-y;
	margin:0 auto;
}

.walk-details {
	width: 96%;
	max-width: 600px;
	padding: 1em;
	background-image: url(images/article-1-bg.jpg);
	background-repeat: repeat-y;
	margin:0 auto;
	margin-top:2%;
	border: thin solid #999;
}

.walk-pic-300 {
	width: 100%;
	max-width: 300px;
	padding: 10px;
	background-image: url(images/article-2-bg.jpg);
	background-repeat: repeat-y;
	margin:0 auto;
	margin-top:2%;
}

.walk-pic-360 {
	width: 96%;
	max-width: 300px;
	padding: 1em;
	background-image: url(images/article-2-bg.jpg);
	background-repeat: repeat;
	margin:0 auto;
	margin-top: 2%;
}

.cr-map {
	width: 96%;
	max-width: 400px;
	padding: 1em;
	background-image: url(images/article-1-bg.jpg);
	background-repeat: repeat-y;
	margin:0 auto;
	margin-top:2%;
	border: thin solid #999;
}

.cr-map img {
		width: 100%;
		}

p.cr-1 {font-size: 1em; color:#FFF; background-color:#fd6f4e; padding:.5em 0 0 0; line-height:100%; width: 40%; margin:0 auto; height: 1.65em; }
p.cr-2 {font-size: 1em; color:#FFF; background-color:#342d8f; padding:.5em 0 0 0; line-height:100%; width: 40%; margin:0 auto; height: 1.65em; }
p.cr-3 {font-size: 1em; color:#FFF; background-color:#626466; padding:.5em 0 0 0; line-height:100%; width: 40%; margin:0 auto; height: 1.65em; }

.walk-details p {font-size: 1.4em; color: #414141; margin: 0px; line-height:145%; }

.walk-details p a:link, a:visited { text-decoration: none; font-size: 1em; color: #fd6f4e; font-family:'Roboto Slab', sans-serif; font-weight:300; }

.walk-details p a:hover {
	color: #fff;
	text-decoration: none;
	background-color: #999;
}

.hilite { font-family:'Roboto Slab', sans-serif; font-weight:400; }

.hilite2 { font-family:'Roboto Slab', sans-serif; font-weight:400; color: #fd6f4e;}

.top-10 {
	border: 0;
	height: 188px;
	text-align: center;
	width: 96%;
	max-width: 300px;
	padding: 10px;
	background-image: url(images/article-1-bg.jpg);
	background-repeat: repeat-y;
	margin:0 auto;
 }

.top-10 img {
		width: 100%;
		}

h2 { color: #fd6f4e; }

/*  SECTIONS  ============================================================================= */

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
	text-align:center;
}

.section h1 {
	font-size: 32px;
	color: #fd6f4e;
	font-family: 'Roboto Slab', serif;
	font-weight:300;
	margin:0;
	padding:0;
}

.section p { color: #414141; font-size: 1em; line-height:135%; font-family: 'Roboto Slab', sans-serif; margin-bottom:3%; padding: 0 6% 0 6%; }

.section h5 { color: #414141; font-size: 1em; font-family: 'Roboto Slab', sans-serif; padding-bottom: 2%; margin:0; font-weight:400; }



/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col {
	display: block;
	float:left;
	margin: 0 0 2% 1.6%;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  GRID OF TWO   ============================================================================= */


.span_2_of_2 {
	width: 100%;
}

.span_1_of_2 {
	width: 49.2%;
}


#footer { 
	max-width: 620px; 	
	height: 80px;
	margin:0 auto;
	text-align:center;
	clear:both;   
	background: url(images/bgd-ftr.png) repeat-x;
  	padding: 1% 0;
}

#footer p {
  font-size: 1em;
  color: #999999;
}

#footer p a {
    font-size: 1em;
	padding: 0 .25em 0 .25em;
	color: #999999;
	text-decoration: underline;
}

#footer p a:hover {
  color: black;  
  font-size: 1em;
  text-decoration: underline;
 font-family: 'Roboto Slab', sans-serif;
 font-weight:300;
}

.next-page2 { font-family: 'Roboto Slab', sans-serif; font-size: 1.1em; color: #fff; font-weight:300; text-align:center; margin:0 auto; } 
.next-page2 a:link { font-size: 1em; text-decoration: none; color: #fff; background-color: #fd6f4e; padding: .25em .5em; margin-bottom: 1em; }
.next-page2 a:hover { color: #fff; text-decoration: none; background-color: #999; }
.next-page2 a:visited {  color: #fff; text-decoration: none; background-color: #fd6f4e;  }

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	nav { 
  		height: auto;
		background-image: url(images/menu-bg.jpg);
		font-size: 1.2em;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #f7bbac;
		border-right: 1px solid #f7bbac;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
	#menufooter {
	height: 30px;
	background-image: url(images/nav-foote-2r.jpg);
	}
	p.cr-1 {font-size: .85em; color:#FFF; background-color:#fd6f4e; padding:.5em 0 0 0; line-height:100%; width: 50%; margin:0 auto; height: 1.65em; }
	p.cr-2 {font-size: .85em; color:#FFF; background-color:#342d8f; padding:.5em 0 0 0; line-height:100%; width: 50%; margin:0 auto; height: 1.65em; }
	p.cr-3 {font-size: .85em; color:#FFF; background-color:#626466; padding:.5em 0 0 0; line-height:100%; width: 50%; margin:0 auto; height: 1.65em; }
	
.section p { color: #414141; font-size: .85em; line-height:135%; font-family: 'Roboto Slab', sans-serif; margin-bottom:3%; padding: 0 6% 0 6%; }
.section h1 { font-size: 1.85em; color: #fd6f4e; font-family: 'Roboto Slab', serif; font-weight:300; margin:0; padding:0; }
.top-10 {
	border: 0;
	text-align: center;
	width: 96%;
	max-width: 300px;
	padding: 10px;
	background-image: url(images/article-1-bg.jpg);
	background-repeat: repeat-y;
	margin:0 auto;
 }

.top-10 img {
		width: 100%;
		}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
		background-image: url(images/menu-bg.jpg);
		font-size: 1em;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #fd6f4e;
		width: 100%;
		position: relative;
		background-image: url(images/menu-bg.jpg);
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	#logo {
		height: 152px;
		margin:0 auto;
		background-image: url(images/feet-first-logo-2.png);
		background-repeat: no-repeat;
		background-position: center top;
	}
.article a:link { text-decoration: none; font-size: 1.75em; color: #fd6f4e; }
.article a:hover { color: #999; text-decoration: none; }
.article a:visited { text-decoration: none; color: #fd6f4e; }
.article h1 { font-size: 1.85em; color: #fd6f4e; font-family: 'Roboto Slab', serif; font-weight:300; margin:0; padding:0; }
.article p {font-size: 1.1em; color: #414141; margin-top: 20px;line-height:150%; padding: 0 1.8em 0 1.8em }
.date { font-size: 1.1em; color: #999999; }
#menufooter {
	height: 30px;
	background-image: url(images/nav-footer-2.jpg);
	}
	.walk-pic-ls {
	margin-bottom: 2%;
	max-width: 600px;
	width: 100%;
	padding: .5em;
	background-image: url(images/article-1-bg.jpg);
	text-align:center;
	margin:0 auto;
	}
	
.article-footer {
	width: 100%;
	background-image: url(images/article-footer-2.png);
	background-repeat: no-repeat;
	margin:0 auto;
	text-align: center;
}

.next-page2 { font-family: 'Roboto Slab', sans-serif; font-size: 1em; color: #fff; font-weight:700; text-align:center; margin:0 auto; } 
.next-page2 a:link { font-size: .85em; text-decoration: none; color: #fff; background-color: #fd6f4e; padding: .5em .5em; }
.next-page2 a:hover { color: #fff; text-decoration: none; background-color: #999; }
.next-page2 a:visited {  color: #fff; text-decoration: none; background-color: #fd6f4e;  }

p.cr-1 {font-size: .85em; color:#FFF; background-color:#fd6f4e; padding:.5em 0 0 0; line-height:100%; width: 70%; margin:0 auto; height: 1.65em; }
p.cr-2 {font-size: .85em; color:#FFF; background-color:#342d8f; padding:.5em 0 0 0; line-height:100%; width: 70%; margin:0 auto; height: 1.65em; }
p.cr-3 {font-size: .85em; color:#FFF; background-color:#626466; padding:.5em 0 0 0; line-height:100%; width: 70%; margin:0 auto; height: 1.65em; }

.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
	
	.col { 
		margin: 1% 0 1% 0%;
	}
.section p { color: #414141; font-size: .85em; line-height:135%; font-family: 'Roboto Slab', sans-serif; margin-bottom:3%; padding: 0 6% 0 6%; }
.section h1 { font-size: 1.85em; color: #fd6f4e; font-family: 'Roboto Slab', serif; font-weight:300; margin:0; padding:0; }
.top-10 {
	border: 0;
	text-align: center;
	width: 96%;
	max-width: 300px;
	padding: 10px;
	background-image: url(images/article-1-bg.jpg);
	background-repeat: repeat-y;
	margin:0 auto;
 }

.top-10 img {
		width: 100%;
		}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	nav li {
		display: block;
		float: none;
		width: 100%;		
		font-size: 1em;
	}
	nav li a {
		border-bottom: 1px solid #fd6f4e;
	}
	#logo {
		height: 152px;
		margin:0 auto;
		background-image: url(images/feet-first-logo-2.png);
		background-repeat: no-repeat;
		background-position: center top;
	}
	.article a:link { text-decoration: none; font-size: 1.75em; color: #fd6f4e; }
.article a:hover { color: #999; text-decoration: none; }
.article a:visited { text-decoration: none; color: #fd6f4e; }
.article h1 { font-size: 1.85em; color: #fd6f4e; font-family: 'Roboto Slab', serif; font-weight:300; margin:0; padding:0; }
.article p {font-size: 1.1em; color: #414141; margin-top: 20px;line-height:150%; padding: 0 1.8em 0 1.8em }
.date { font-size: 1.1em; color: #999999; }
	#menufooter {
	height: 30px;
	background-image: url(nav-foote-2r.jpg);
	}

.walk-pic-ls {
	margin-bottom: 2%;
	max-width: 600px;
	width: 100%;
	padding: .5em;
	background-image: url(images/article-1-bg.jpg);
	text-align:center;
	margin:0 auto;
	}
	
.next-page2 { font-family: 'Roboto Slab', sans-serif; font-size: 1em; color: #fff; font-weight:700; text-align:center; margin:0 auto; } 
.next-page2 a:link { font-size: .85em; text-decoration: none; color: #fff; background-color: #fd6f4e; padding: .25em .25em; margin-bottom: .5em; }
.next-page2 a:hover { color: #fff; text-decoration: none; background-color: #999; }
.next-page2 a:visited {  color: #fff; text-decoration: none; background-color: #fd6f4e;  }	

p.cr-1 {font-size: .85em; color:#FFF; background-color:#fd6f4e; padding:.5em 0 0 0; line-height:100%; width: 70%; margin:0 auto; height: 1.65em; }
p.cr-2 {font-size: .85em; color:#FFF; background-color:#342d8f; padding:.5em 0 0 0; line-height:100%; width: 70%; margin:0 auto; height: 1.65em; }
p.cr-3 {font-size: .85em; color:#FFF; background-color:#626466; padding:.5em 0 0 0; line-height:100%; width: 70%; margin:0 auto; height: 1.65em; }
.span_2_of_2 {
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}
	
	.col { 
		margin: 1% 0 1% 0%;
	}
.section p { color: #414141; font-size: .85em; line-height:135%; font-family: 'Roboto Slab', sans-serif; margin-bottom:3%; padding: 0 6% 0 6%; }
.section h1 { font-size: 1.85em; color: #fd6f4e; font-family: 'Roboto Slab', serif; font-weight:300; margin:0; padding:0; }
.top-10 {
	border: 0;
	text-align: center;
	width: 96%;
	max-width: 300px;
	padding: 10px;
	background-image: url(images/article-1-bg.jpg);
	background-repeat: repeat-y;
	margin:0 auto;
 }

.top-10 img {
		width: 100%;
		}		

h2 { color: #fd6f4e; }
}

/* Map colours:
#fd6f4e orange
#808285 grey
#342d8f blue */