/* -------------------------------------------------------------- 
  
   Reset and Utilities
   
-------------------------------------------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,  footer, header, hgroup, 
menu, nav, section, summary, time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100.01%;
	vertical-align:middle;
	background:transparent;
}                  
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display:block;
}
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }


body { font:13px/1.231 sans-serif; *font-size:small; }
select, input, textarea, button { font:99% sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

body, select, input, textarea {   color: #444; }
h1,h2,h3,h4,h5,h6 { font-weight: bold; }
html { overflow-y: scroll; }

a:hover, a:active {
	outline: none;
}
a, a:active, a:visited { color: #607890; }
a:hover {
	color: #036;
}

ul, ol { margin-left: 1.8em; }
ol { list-style-type: decimal; }
.orderedlist {
	font-size: 130%;
}


nav ul, nav li { margin: 0; } 
small { font-size: 85%; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; } 
sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }
pre {  padding: 15px;  white-space: pre;  white-space: pre-wrap;  white-space: pre-line;  word-wrap: break-word; }
textarea { overflow: auto; } 
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input[type=submit], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px;  -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red;  box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, 
.no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; } 
a:link { -webkit-tap-highlight-color: #FF5E99; } 

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; } 
.visuallyhidden { position: absolute !important; clip: rect(1px 1px 1px 1px);  clip: rect(1px, 1px, 1px, 1px); }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after {  content: "\0020"; display: block; height: 0; visibility: hidden;	 } 
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/* User added Utilities 
===========*/

.floatleft {float: left;}
.floatright {float: right;}

img.floatleft  {padding:3px 40px 10px 0; max-width: 100%; height: auto;}

img.floatright  {padding:3px 0 10px 40px;  max-width: 100%; height: auto;}

.clear { clear: both; }
.clearleft { clear: left; }
.clearright { clear: right; }

hr.invisible { visibility: hidden; clear:both;}


/* -------------------------------------------------------------- 
  
   Primary Styles - Author: Forest Design
   
-------------------------------------------------------------- */


body {
	background-color:#FFF;
	color: #666;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:68.75%;
	text-align: center;
}

#container {
	width: 100%;
	height:100%;
	text-align: left;
	margin:5px auto 5px auto;
	position: relative;	
}



/* Header Images: 996px x 248px
=======*/

#headerbanner {
	
	max-width:996px;
	margin:0 auto;
	background-size:contain !important;
	background-repeat:no-repeat !important;
}

#home #headerbanner {
	background:url(img/header-banner.jpg);
}

#personal-training #headerbanner {
	background:url(img/header-training.jpg);
}
#injury-rehab #headerbanner {
	background-image: url(img/header-rehab.jpg);
}


#initial-consultation #headerbanner {
	background:url(img/header-banner.jpg);
}

#wellbeing-health-fitness #headerbanner {
	background:url(img/header-banner.jpg);
}

#golf-fitness #headerbanner {
	background:url(img/header-golf.jpg);
}

#about #headerbanner {
	background:url(img/header-about.jpg);
}

#qualifications #headerbanner {
	background:url(img/header-qualifications.jpg);
}

#testimonials #headerbanner {
	background:url(img/header-banner.jpg);
}

#nutrition #headerbanner {
	background:url(img/header-banner.jpg);
}

#projects #headerbanner {
	background:url(img/header-banner.jpg);
}

#prices #headerbanner {
	background:url(img/header-banner.jpg);
}

#contact #headerbanner {
	background:url(img/header-banner.jpg);
}



/* Header
=======*/

#header {
	max-width:996px;
	padding-top:26%;
	background:url(img/header.png);
	background-size:contain;
	background-repeat:no-repeat;
}


/* Navigation
===========*/

#menu-checkbox {
  display: none;
}

#nav {
	text-align:left;
	list-style:none;
	font-family:Tahoma, Geneva, sans-serif;
	font-weight:bold;
	font-size:100%;	
	color:#FFF;
	margin:0;
	padding:0;
}


	
#nav a {
	display:block;
	background:url(img/nav-under.png) no-repeat;
	color:#fff;
	text-decoration:none;
	padding:4px 0 5px 14px;
	margin:4px 0;

}

#nav li a:hover, #nav li a:focus {background:url(img/nav-over.png) no-repeat;}


#home #nav-home a,
#personal-training #nav-personal-training a,
#initial-consultation #nav-initial-consultation a,
#wellbeing-health-fitness #nav-wellbeing-health-fitness a,
#golf-fitness #nav-golf-fitness a,
#about #nav-about a,
#qualifications #nav-qualifications a,
#testimonials #nav-testimonials a,
#nutrition #nav-nutrition a,
#projects #nav-projects a,
#prices #nav-prices a,
#contact #nav-contact a {background:url(img/nav-over.png) no-repeat; cursor:default;}
	

/* Sidebar
========*/

#sidebar {
	width:180px;
	text-align:center;
	float:left;
	margin-top:-34px;
}

#sidebar img {
	margin:10px auto;
}
/* Content
========*/


#telephone-wrapper {width: 100%; text-align:center; margin:20px 0 20px 0;}
#telephone {

	margin:0 auto;
	max-width:180px;
	background-color:#30448D;
	color:#fff;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:190%;
	text-decoration:none;
	text-align:left;
	margin-top:30px;
	-moz-border-radius-topleft: 8px;
	border-top-left-radius: 8px;
	-webkit-border-top-left-radius: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-bottom-left-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-topright: 8px;
	border-top-right-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-bottomright: 8px;
	border-bottom-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	padding:6px 12px 6px 0;

}

#telephone img {
	vertical-align:middle;
	padding:0 10px 5px 5px;}

#contentwrapper {

	max-width:996px;
	margin-left:auto;
	margin-right:auto;
	}
	
#content {
	padding:0px 40px 0 220px;
	}
	



.quote {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-size:118%;
	padding:25px 35px;
	margin:30px 0 0 0;
	border:1px solid #e5e5e5;
	border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;	
	   
   /* fallback/image non-cover color */
   background-color: #fff; 

   /* fallback image */
   background: url(img/quote-gradient.png) repeat-x; 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(#F9F9F9, #FFF);

   /* Safari 4+, Chrome 1+ */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F9F9F9), to(#FFF));

   /* Safari 5.1+, Chrome 10+ */
   background-image: -webkit-linear-gradient(#F9F9F9, #FFF); 

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(#F9F9F9, #FFF);
   
}

.quote img {padding:10px 0 0 0; }



.name {
	color: #666;
	font-family:Tahoma, Geneva, sans-serif;
	font-style:normal;
	font-weight:bold;
}

.testimonial {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-size:100%;
	padding:25px 35px;
	margin:15px 0 0 0;
	border:1px solid #e5e5e5;
	min-height:120px;
	border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;	
	   
   /* fallback/image non-cover color */
   background-color: #fff; 

   /* fallback image */
   background: url(img/quote-gradient.png) repeat-x; 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(#F9F9F9, #FFF);

   /* Safari 4+, Chrome 1+ */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F9F9F9), to(#FFF));

   /* Safari 5.1+, Chrome 10+ */
   background-image: -webkit-linear-gradient(#F9F9F9, #FFF); 

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(#F9F9F9, #FFF);
   
}

.testimonial p {margin-left:130px;}

.testimonial img {padding:10px 35px 10px 0; float:left; }

.prices {
	padding:20px 35px;
	margin:15px 0 0 0;
	border:1px solid #e5e5e5;
	min-height:102px;
	border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;	
	   
   /* fallback/image non-cover color */
   background-color: #fff; 

   /* fallback image */
   background: url(img/quote-gradient.png) repeat-x; 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(#F9F9F9, #FFF);

   /* Safari 4+, Chrome 1+ */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F9F9F9), to(#FFF));

   /* Safari 5.1+, Chrome 10+ */
   background-image: -webkit-linear-gradient(#F9F9F9, #FFF); 

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(#F9F9F9, #FFF);
   
}

.prices img {float:right; margin-left:30px; max-width:100%; height:auto;}



.TPI-logo {
	background:url(img/tpi-certified-logo.png) no-repeat;
	height:70px;
	width:163px;
	display:block;
	margin-top:-127px;
	position:absolute;
}

.project {clear:right; margin-bottom:90px;}
.project-images {float:right; padding:3px 0 10px 30px;}
.project-images img {float:left; padding-left:10px; padding-bottom:10px; }

/*footer
=======*/

#accreditations-mobile {display:none;}

footer {background:url(img/footer.png) repeat-x; margin-top:25px;}


#footer {
	
	min-height:30px;
	padding:30px 20px 30px 20px;
	
	clear:both;
	margin-left:auto;
	margin-right:auto;
	max-width:996px;
	
}

#footer a {color:#666;}


#keywords {

	float:left;
	font-size:95%;

}


#copyright {
	float:left;
}

#copyright p {display: inline; margin-right:16px;}

/* Typography 
===========*/

.davidsays {
	font-style:italic;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:105%;
}

.davidsayspre {font-size:105%;}

/* Headings */

h1 {
	color: #6C98FC;
	font-size: 175%;
	font-family:Tahoma, Geneva, sans-serif;
	font-weight: normal;
	line-height: 100%;
	margin:25px 0 15px 0;
}
h4 {
	color: #1F4291;
	font-size: 175%;
	font-family:Tahoma, Geneva, sans-serif;
	font-weight: normal;
	line-height: 160%;
	margin:25px 0 15px 0;
}


h2 {
	color: #6C98FC;
	font-size: 145%;
	font-family:Tahoma, Geneva, sans-serif;
	font-weight: bold;
	line-height: 160%;
	margin:25px 0 10px 0;
	
}

h2.tagline {
	color: #333;
	font-size: 140%;
	font-family:Georgia, "Times New Roman", Times, serif;
	;
	font-weight: normal;
	font-style:italic;
	line-height: 160%;
	margin:25px 0 10px 0;
	
}

h3 {
	color: #6C98FC;
	font-size: 120%;
	font-family:Tahoma, Geneva, sans-serif;
	font-weight: bold;
	line-height: 160%;
	margin:15px 0 5px 0;
}

/* Text Elements */

p {
	font-size: 130%;
	line-height: 150%;
	font-weight: normal;
	text-align: justify;
	margin: 1.25em 0;
}


a, a:visited {
	color: #6C98FC;
	text-decoration:underline;
}

a:hover, a:focus {	
	color: #09f;
	text-decoration:underline;
}
	
a:active {	
	color: #FF000;
	text-decoration:underline;

}

.left  			{ float: left !important; }
p .left			{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
.right 			{ float: right !important; }
p .right 		{ margin: 1.5em 0 1.5em 1.5em; padding: 0; }



.bold {font-weight:bold;}

.italic {font-style:italic;}

.center {text-align:center}

.red {color:red;}

.blue {color:blue;}

.voucher-info {
	color:#444;
	font-weight:bold;
	font-size:130%;
}


/*Lists*/

li ul,
li ol       { margin: 0; }
ul, ol      { margin: 0 1.5em 1.5em 0; padding-left: 1.5em; }

ul          { list-style-type: disc; }
ol          { list-style-type: decimal; }

dl          { margin: 0 0 1.5em 0; }
dl dt       { font-weight: bold; }
dd          { margin-left: 1.5em;}

#content li {padding:0.2em;}

/* Tables */

table       { margin-bottom: 1.4em; width:100%; }
th          { font-weight: bold; }
thead th    { background: #c3d9ff; }
th,td,caption { padding: 4px 10px 4px 5px; }


tfoot       { font-style: italic; }
caption     { background: #eee; }




/* Forms 
===========*/
input {
	 
	width: 165px;
	font-size: 100%;
	font-family: Tahoma, Geneva, sans-serif;
	margin: 7px 2px;
	padding: 2px;
	color: #333;
}



textarea {
 
	width:94%;
	font-size: 11px;
	font-family: Tahoma, Geneva, sans-serif;
	margin: 7px 2px;
	padding: 2px 5px 2px 5px;
	color: #333;
	}
	

input.submit {
	 
	width: 125px;
	height:24px;
	font-size: 100%;
	font-weight:bold;
	font-family: Tahoma, Geneva, sans-serif;
	margin: 10px 2px;
	padding: 2px;
	color: #FFF;
	background-color:#30448D;
	border:1px solid #30448D;
}

input:hover.submit {background-color:#6C98FC;}


.formLeftAlign p {

	text-align: left;
	padding:3px;


}
.formRightAlign p {

	text-align: right;
	padding:3px;
	
}

#contact-form {
	margin:25px 0;
	padding:0 35px; 
	border:1px solid #e5e5e5;
	border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;	
	   
	   /* fallback/image non-cover color */
   background-color: #fff; 

   /* fallback image */
   background: url(img/quote-gradient.png) repeat-x; 

   /* Firefox 3.6+ */
   background-image: -moz-linear-gradient(#F9F9F9, #FFF);

   /* Safari 4+, Chrome 1+ */
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F9F9F9), to(#FFF));

   /* Safari 5.1+, Chrome 10+ */
   background-image: -webkit-linear-gradient(#F9F9F9, #FFF); 

   /* Opera 11.10+ */
   background-image: -o-linear-gradient(#F9F9F9, #FFF);
	}

#form td {vertical-align:middle;}




/* Gallery
===========*/

#gallery-wrapper {
	float:right;
	width:227px;
	margin-left:40px;
}


/* *****GALLERIFFIC STYLES**** */

div.content {
	/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
	display: none;
	width: 227px; 
}
div.content a, div.navigation a {
	text-decoration: none;
	color: #777;
}
div.content a:focus, div.content a:hover, div.content a:active {
	text-decoration: underline;
}
div.controls {
	margin-top: 10px;
	height: 23px;
	
}
div.controls a {
	padding: 5px;
	text-align:center;
}


div.ss-controls {	
	text-align:center;
}
div.nav-controls {
	text-align:center;
}
div.slideshow-container {
	position: relative;

	height: 360px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 227px;
	height: 360px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
div.slideshow a.advance-link {
	display: block;
	width: 230px;
	height: 0px; /* This should be set to be at least the height of the largest image in the slideshow but for some reason that didn't work so it's now 0. Was 355px*/
	line-height: 0px; /* 355 This should be set to be at least the height of the largest image in the slideshow but for some reason that didn't work so it's now 0. Was 355px */
	text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
	text-decoration: none;
}
div.slideshow img {
	vertical-align: middle;

}
div.download {
	float: right;
}
div.caption-container {
	position: relative;

	height: 75px;
}
span.image-caption {
	display: block;
	position: absolute;
	width: 300px;
	top: 0;
	left: 0;
}
div.caption {
	padding: 12px;
}
div.image-title {
	font-weight: bold;
	font-size: 1.4em;
}
div.image-desc {
	line-height: 1.3em;
	padding-top: 12px;
}
div.navigation {
	/* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {

	margin: 2px 0 0 0;
	padding: 0;
	display:none;
	
}
ul.thumbs li {
	float: left;
	padding: 0;
	margin: 0 0 3px 3px;
	list-style: none;
}
a.thumb {
	display: block;
}
ul.thumbs li.selected a.thumb {
	background: #000;
}
a.thumb:focus {
	outline: none;
}
ul.thumbs img {
	border: none;
	display: block;
}
div.pagination {

}
div.navigation div.top {
	margin-bottom: 12px;
	height: 11px;
}
div.navigation div.bottom {
	margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
	display: block;
	float: left;
	margin-right: 2px;
	padding: 4px 7px 2px 7px;
	border: 1px solid #ccc;
}
div.pagination a:hover {
	background-color: #eee;
	text-decoration: none;
}
div.pagination span.current {
	font-weight: bold;
	background-color: #000;
	border-color: #000;
	color: #fff;
}
div.pagination span.ellipsis {
	border: none;
	padding: 5px 0 3px 2px;
}


/* -------------------------------------------------------------- 
  
   Media Queries / Mobile Responsive
-------------------------------------------------------------- */

/* Tablet Landscape */
@media screen and (min-width: 768px) and (max-width: 1024px) {

#headerbanner {background-position:center;}

}

/* Tablet Portrait */
@media screen and (max-width: 767px) {
  /* Your styles here */
	
	.TPI-logo {margin-top:0; position:relative;}
	
}


/* Mobile Landscape */
@media screen and (min-width: 480px) and (max-width: 767px) {
  /* Your styles here */
}

/* Mobile portrait */
@media screen and (max-width: 479px) {
  /* Your styles here */
	
	
	header {padding-top:90px;}
	
	#content {padding:0 32px;}
	
	#sidebar {width:100%;}
	
	#logo {position:absolute; top:0px; left:16px;}
	
	#accreditations-desktop {display:none;}
	
	#accreditations-mobile {display:block; width:100%; text-align:center;}
	#accreditations-mobile img {padding:8px;}
	
	.menu-toggle {position:absolute;  display: block; top:20px; width:100%;  z-index:999;}
	
	.menu-toggle label {padding:16px; display:block;}
	
	#nav a {background:none !important; padding: 4px 32px 4px 16px; font-size:140%}
	
	#nav {margin-top:38px;}
	
	

	
	
  .menu {
    display: none;

    top: 100%;
    left: 0;
    width: 100%;
    background-color: #30448D;
  }

  .menu li {
    border-bottom: 1px solid #ddd;
    padding: 4px;
  }

  .menu-toggle-icon {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #30448D;
    position: relative;
    transform: rotate(0);
    transition: 0.3s ease-in-out;
	float:right;
  }

  .menu-toggle-icon:before,
  .menu-toggle-icon:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: #30448D;
    left: 0;
    transition: 0.3s ease-in-out;
  }

  .menu-toggle-icon:before {
    top: -10px;
  }

  .menu-toggle-icon:after {
    top: 10px;
  }
	
	
	#menu-checkbox {display:none;}	

  #menu-checkbox:checked ~ .menu {
    display: block;
  }

  #menu-checkbox:checked + label .menu-toggle-icon {
    background-color: transparent;
  }



   #menu-checkbox:checked + label .menu-toggle-icon:before {
        transform: rotate(45deg);
        top: 0;
    }

    #menu-checkbox:checked + label .menu-toggle-icon:after {
        transform: rotate(-45deg);
        top: 0;
    }

	

/* Mobile Images */

img.floatright, img.floatleft {
	max-width:100%;
	height:auto;
	padding:0;
	margin-bottom:10px;
	float:none;
	width:100%;
} 


/* Testimonial */
.testimonial {
	padding:16px;
}

.testimonial img {float:none; padding:0; margin:0 auto; max-width:100%; height:auto;}

.testimonial p {margin-left:0; text-align:left;}


/* Prices */
.prices {padding:16px;}

.prices img {float:none; padding:0; margin:0 auto; max-width:100%; height:auto;}

/* Other Content */
	
.project {clear:right; margin-bottom:60px;}
	
.project-images {float:none; padding:0; width:100%;}
	
.project-images img {margin-bottom:10px; padding-left:0; padding-right:10px; width: 100%; height: auto;}



/* Mobile Footer */

#keywords {width:100%; margin:0;}
	
}



