/* @override 
	http://localhost:8888/pthealth/branches/dev_v1/css/screen.css
	http://www.dev.pt-health.co.uk/css/screen.css
	http://localhost:8888/pthealth/trunk/css/screen.css
*/

/* @group GLOBAL 
---------------------------------------------------------------------------------------*/

/* The Malarkey Method: MIR Image replacement Technique*/
.mir { letter-spacing : -1000em; }
/* Be nice to Opera, but hide from MacIE.*/
/*\*/html>body .mir { letter-spacing : normal; text-indent : -999em; overflow : hidden;}
/* end hack */

body {
	background: #20252e url(../images/background_flip.jpg) repeat-x 0 top;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	font-size: small;
	line-height: 22px; 
	color: #5a5a5a;
	height: 100%;
}

#outercontainer {
	position: relative;
	width: 960px;
	margin: 10px auto 0 auto;
}

.emphasis { font-style: italic; }
.strong {font-weight: bold; }

a:link { color: #2a709d; }
a:visited { color: #2a709d; }
a:hover { color: #852b30; }

/* @end */

/* @group LAYOUT & BASE STYLES
---------------------------------------------------------------------------------------*/

#contentcontainer {
	position: relative;
	background: #fff;
	/* Top shifted down to make space for pages with sub_nav  */
	margin: 67px 0 30px 0;
		
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	border-bottom-right-radius: 0.6em;
	border-bottom-left-radius: 0.6em;	
			
	-webkit-border-top-right-radius: 0;
	-webkit-border-top-left-radius: 0;
	-webkit-border-bottom-right-radius: 0.6em;
	-webkit-border-bottom-left-radius: 0.6em;			
			
	-moz-border-radius-topright: 0;
	-moz-border-radius-topleft: 0;
	-moz-border-radius-bottomright: 0.6em;
	-moz-border-radius-bottomleft: 0.6em;	
	
	box-shadow: 0px 2px 6px #000;
	-webkit-box-shadow: 0px 2px 6px #000;
	-moz-box-shadow: 0px 2px 6px #000;
}

/* self clearing rules to get the container to expand to contain the floated columns without having to use overflow:hidden - see http://www.ejeliot.com/blog/59 */
	#contentcontainer:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

body#home #contentcontainer,body#contact #contentcontainer {
	margin: 35px 0 30px 0; /* Top shifted back up for non-subnav pages */
	border-top: none;	
	/* Corners rounded back off on all sides */
	border-radius: 0.6em;	
	-webkit-border-radius: 0.6em;
	-moz-border-radius: 0.6em;
}

/* NOTE: - the main_content and subcontent divs are positioned using floats (for now?) as opposed to absolute positioning so the footer always clears content. After having problems getting the background on the subcontent to always extend to the bottom - i amended a script found here to fix: http://www.mail-archive.com/discuss@jquery.com/msg13788.html (also http://markmail.org/message/xcwfza3l2upxe7tt) - it figures out which column is the shortest and applies: 'position: absolute' which seems to cause the subcontent background to always extend to the bottom!  */
#main_content {
	float: left;
	font-size: 105%;
	width: 645px;
}

body#contact #main_content {
	padding: 0 0 0 0;
}

#subcontent {
	float: right;
	left: 645px;	
	width: 315px;
	height: 100%;	
	line-height: 20px;
	background: #EBEFF5 url(../images/subcontent_background.jpg) repeat-x 0 0;
	
	border-bottom-right-radius: 0.6em;	
	-webkit-border-bottom-right-radius: 0.6em;
	-moz-border-radius-bottomright: 0.6em;	
}

#testimonials #subcontent p {
	font-size: 105%;
	line-height: 22px;
}

body#contact #subcontent {
	border-top-right-radius: 0.6em;	
	-webkit-border-top-right-radius: 0.6em;
	-moz-border-radius-topright: 0.6em;	
}

#footercontainer {
	position: relative;
	padding: 0 0 0 30px;
	background: #fff;
	overflow: hidden;
	
	font-size: 100%;
	line-height: 20px;
	
	/*background: #fff url(../images/contentcontainer_top.gif) no-repeat left top;*/	
	border-radius: 0.6em;	
	-webkit-border-radius: 0.6em;
	-moz-border-radius: 0.6em;
	
	box-shadow: 0px 2px 6px #000;
	-webkit-box-shadow: 0px 2px 6px #000;
	-moz-box-shadow: 0px 2px 6px #000;
}

/* @end */

/* @group BRANDING & CONTACT
---------------------------------------------------------------------------------------*/

#branding {
	position: relative;
	left: 744px;
	top: 15px;
	background: url(../images/pt_logo.png) no-repeat;
	width: 193px;
	height: 60px;
}

.phone {
	position: absolute;
	top: 18px;
	left: 40px;
	width: 226px;
	height: 18px;
	background: url(../images/phone.png) no-repeat;
}

/* @end */

/* @group NAV
---------------------------------------------------------------------------------------*/

#main_nav {
	z-index: 100; /* must be above everything to create tab effect */
	float: left;
	position: relative;
	left: 30px;
	background: url(../images/nav_rule.gif) repeat-x 0 bottom;
	clear: both;
	width: 650px;
}

/* gifs are used not pngs as the sliding doors effect doesnt work with pngs because the transparency stops the stops the top layer from covering the bottom */

#main_nav li {	
	float: left;
	background: url(../images/navtab_deselected2.gif) no-repeat right top;
	margin: 0 1px 0 0;
}

#main_nav a {
	display: block;
	background: url(../images/navtab_deselected1.gif) no-repeat left top;
	padding: 7px 18px 6px 18px;
	width: 5em;
	text-align: center;
	font-size: 110%;
}

#main_nav .selected {
	background: url(../images/navtab_selected2.gif) no-repeat right top;
}

#main_nav .selected a {
	background: url(../images/navtab_selected1.gif) no-repeat left top;
}

#main_nav a:link {
	text-decoration: none;
	color: #fff;	
	text-shadow: 1px 1px 1px #000;
	-moz-text-shadow: 1px 1px 0 #000;
}

#main_nav a:visited {
	text-decoration: none;
	color: #fff;
	text-shadow: 1px 1px 1px #000;
	-moz-text-shadow: 1px 1px 0 #000;
}

#main_nav a:hover {
	text-decoration: none;
	color: #c8c8c8;
}

#main_nav li.selected a{
	color: #3a3a3a;
	text-shadow: none;
}

ul#subnav_services {
	left: -30px;
	position: absolute;
	top: 33px;
	width: 900px;
	height: 34px;
	padding: 0 30px 0 30px;
	background: url(../images/subnav_background.png) no-repeat left top;
}

#main_nav ul#subnav_services li  {
	background: none;
	margin: 6px 30px 0 0;
}

#main_nav ul#subnav_services li a {	
	display: block;
	background: none;
	width: 100%;
	padding: 0;
	height: 23px;
	line-height: 23px;
}

ul#subnav_services li a:link {
	color: #7e7e7e;	
	text-shadow: #fff 1px 1px 0;
	-moz-text-shadow: #fff 1px 1px 0;
}

ul#subnav_services li a:visited {
	color: #7e7e7e;	
	text-shadow: #fff 1px 1px 0;
	-moz-text-shadow: #fff 1px 1px 0;
}	

ul#subnav_services li a:hover {
	color: #3a3a3a;
}

body#nutrition li#link_nutrition,
body#fitness li#link_fitness,
body#health li#link_health,
body#classes li#link_classes,
body#resources li#link_resources,
body#testimonials li#link_testimonials {
	background: url(../images/subnav_selected1.png) no-repeat left 50%;
	padding: 0 9px 0 9px;
}

body#nutrition li#link_nutrition a,
body#fitness li#link_fitness a,
body#health li#link_health a,
body#classes li#link_classes a,
body#resources li#link_resources a,
body#testimonials li#link_testimonials a {
	background: url(../images/subnav_selected2.png) no-repeat right 50%;
	color: #3a3a3a;
	padding: 0 8px 0 0;
}

/* @end */

/* @group HERO AND SUBCONTENT BLOCKS
---------------------------------------------------------------------------------------*/

#block1 {
	position: relative;
	top: 15px;
	left: 15px;	
	width: 615px;
	height: 266px;
}

body#home #block1 { background: url(../images/block1_3months2.jpg) no-repeat; }
body#nutrition #block1 { background: url(../images/block1_metabolic.jpg) no-repeat; }
body#fitness #block1 { background: url(../images/block1_training2.jpg) no-repeat; }
body#health #block1 { background: url(../images/block1_fdn1.jpg) no-repeat; }
body#classes #block1 { background: url(../images/block1_beach.jpg) no-repeat; }
body#testimonials #block1 { background: url(../images/block1_testimonials.jpg) no-repeat; }

/*Styles for block2a - on pages WITHOUT a sidebar are 300px wide*/
#block2a {
	position: absolute;
	top: 15px;
	right: 15px;	
	width: 300px;
	height: 266px;
}

/*Styles for block2b for pages WITH a sidebar are 15px narrower*/
#block2b {
	position: relative;
	margin: 15px 0 25px 0;
	left: 15px;	
	width: 285px;
	height: 266px;		
}

body#home #block2a { background: url(../images/block2_pt.jpg) no-repeat; }
body#nutrition #block2b { background: url(../images/block2b_fdn.jpg) no-repeat; }
body#fitness #block2b { background: url(../images/block2b_nextlevel.jpg) no-repeat; }
body#health #block2b { background: url(../images/block2b_painrelief.jpg) no-repeat; }
body#classes #block2b { background: url(../images/block2b_corporate.jpg) no-repeat; }
body#testimonials #block2b { background: url(../images/block2b_newyou.jpg) no-repeat; }

#block1 h2 a,
#block2a h2 a,
#block2b h2 a {
	display: block;
	height: 266px;
}

#block2b a {
	display: block;
	height: 266px;
	width: 285px;	
}

/* @end */

/* @group MAINCONTENT STYLING
---------------------------------------------------------------------------------------*/

body#home #contentcontainer {
	font-size: 105%;
}

.column1,
.column2,
.column3 {
	position: relative;
	margin: 40px 0 0 0;
	width: 270px;
	float: left;
	padding: 0 0 20px 30px;
}


/* increase left padding for columns 2 and 3 */
.column2,
.column3 {
	padding: 0 0 20px 45px;
}

.headline {
	color: #000;
	font-family: "Myriad Pro", "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
	font-size: 145%;
	background: url(../images/bullet_redarrow.png) no-repeat 0 30%;
	padding: 0 0 0 25px;
	margin: 0 0 5px 0;
	letter-spacing: -1px;
}

.column1 p,
.column2 p,
.column3 p {
	margin: 0 0 15px 0;
}

.feature1,
.feature2,
.feature3 {
	float: left;
	width: 300px;
	height: 129px;
	margin: 0 0 15px 15px;
}

body#home .feature1 { background: url(../images/feature_nutrition.gif) no-repeat; }
body#home .feature2 { background: url(../images/feature_weightloss.gif) no-repeat; }
body#home .feature3 { background: url(../images/feature_fun.jpg) no-repeat; }
body#nutrition .feature1 { background: url(../images/feature_stronger.gif) no-repeat; }
body#nutrition .feature2 { background: url(../images/feature_posture.gif) no-repeat; }
body#fitness .feature1 { background: url(../images/feature_nutrition.gif) no-repeat; }
body#fitness .feature2 { background: url(../images/feature_posture.gif) no-repeat; }
body#health .feature1 { background: url(../images/feature_performance.gif) no-repeat; }
body#health .feature2 { background: url(../images/feature_weightloss.gif) no-repeat; }
body#classes .feature1 { background: url(../images/feature_core.jpg) no-repeat; }
body#classes .feature2 { background: url(../images/feature_sport.jpg) no-repeat; }
body#contact .feature1 { background: url(../images/feature_core.jpg) no-repeat; }
body#contact .feature2 { background: url(../images/feature_sport.jpg) no-repeat; }

.feature1 a,
.feature2 a,
.feature3 a {
	width: 300px;
	height: 129px;
	display: block;
}

/* reduce top margin for columns on contact page */
body#contact #main_content .column1,
body#contact #main_content .column2 {
	margin-top: 30px;
}

body#contact #main_content .column1 {
	width: 270px;
}

body#contact #main_content .column1 div {
	margin-bottom: 30px;
}

body#contact #main_content .column1 .headline {
	margin-bottom: 3px;
}

.telephone_number {
	background: url(../images/contact_tel.gif) no-repeat;
	width: 236px;
	height: 35px;
}

body#contact  #main_content .column2 {
	padding: 0 0 0 0;
}

#contactform {
	background: #dadbdc url(../images/contact_form_background.jpg) repeat-x 0 0;

	padding: 15px 15px 10px 15px;
	width: 267px;
	margin: -15px 0 15px 30px;
	
	border-radius: 0.4em;	
	-webkit-border-radius: 0.4em;
	-moz-border-radius: 0.4em;
	border: 1px solid #cacaca;
}

#contactform p label {
	color: #2a2a2a;
}

.required_text {
	font-size: 90%;
	color: #7c7c7c;
}

input#name,
input#email,
input#telephone {
	width: 228px;
	line-height: 20px;
}

.mailinglist {
	display: inline;
	padding: 0 15px 0 0;
}

input#mailinglist_yes,
input#mailinglist_no { margin: 0 5px 0 0; }

.column2 .label_mailinglist {
	margin: 0;
}

input.submit {
	margin: 20px 0 5px 0;
}

body#contact label.error { color: #be0e0e; display: block; }

body#contact #subcontent .button {
	margin-bottom: 15px;	
	}


/* TESTIMONIALS
----------------------------------------------------------*/
body#testimonials .column1 p,
body#testimonials .column2 p,
body#testimonials .column3 p {
	margin: 0 0 5px 0;
}

body#testimonials p.quote_source {
	color: #000;
	font-size: 95%;
	padding-bottom: 10px;
	margin: 0 0 15px 0;
	border-bottom: 1px solid #e0e0e0;
}

/* RESOURCES PAGE
----------------------------------------------------------*/	

#resources #contentcontainer {
	}

#resources #contentcontainer #main_content {
	width: 100%;
	float: none;

}

#resources .item_container {
	position: relative;
	margin: 20px 0 0 0;
	width: 270px;
	float: left;
	padding-bottom: 20px;
	margin-left: 30px;
	border-bottom: 1px solid #cfcfcf;
	}
	
#resources img.item_image {
	width: 100px;
	height: 100px;
	background-color: #dadada;
	float: left;
	margin-right: 15px;
	border: 1px solid #d1d1d1;
	}	
	
#resources .item_category {
	color: #000;
	font-size: 95%;
	text-transform: uppercase;
	background: url(../images/bullet_redarrow.gif) no-repeat 0 50%;
	padding-left: 22px;
	margin-bottom: 15px;
	}
	
#resources .item_title {
	color: #000;
	font-size: 160%;
	font-weight: bold;
	margin-bottom: 5px;
	}	
	
#resources .item_source {
	color: #000;
	margin-bottom: 5px;
	}
	
#resources .item_body {
	margin-bottom: 10px;
	}	

/* @end */

/* @group SUBCONTENT STYLING
---------------------------------------------------------------------------------------*/

#subcontent_vert_rule {
	position: absolute; /* needed to take the rule out of the document flow */
	background: url(../images/subcontent_vert_rule.png) repeat-y 0 0;
	width: 2px;
	height: 100%;	
}

.subcontent_column {
	padding: 0 15px 0 15px;
	margin: 0 0 20px 0;
}	

.subcontent_headline {
	color: #5fabbe;
	clear: both;	
	font: 150% "Myriad Pro","Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
	letter-spacing: -1px;
	background: url(../images/bullet_redarrow.png) no-repeat 0 35%;
	padding: 0 0 0 25px;
	margin: 0 0 5px 0;
}

body#contact .subcontent_headline {
	color: #000;	
}

.subcontent_column p {
	margin: 0 0 10px 0;
}

.subcontent_column dl {
	margin: 0 0 15px 0;
}

.subcontent_column dt {
	color: #555;
	padding: 0 0 10px 0;
	font-weight: bold;
}

.subcontent_column dd {
	padding: 0 0 0 15px;
	margin: 0 0 2px 0;
	background: url(../images/bullet_triangle_green.png) no-repeat 0 50%;
}

body#contact .subcontent_column {
	padding-top: 30px;
}

body#contact img.mugshot {
	float: left;
	margin: 0 10px 10px 0;		
}

body#contact .team_name {
	font-size: 125%;
	color: #000;
	padding: 0 0 3px 90px;
}

body#contact .team_description {
	padding: 0 0 0 90px;
}

body#contact .subcontent_column div {
	border-bottom: 1px solid #d1d1d1;
	padding: 13px 0 0 0;
	overflow: hidden;
}

/* @end */

/* @group BUTTONS
---------------------------------------------------------------------------------------*/

.button {
	background: url(../images/button1.png) no-repeat 0 0;
	width: 158px;
	height: 26px;
	display: block;
	font-size: 90%;
	text-decoration: none;
	padding: 0 0 0 13px;
	line-height: 23px;
	font-weight: bold;
	
	text-shadow: 1px 1px 1px #fff;
	-moz-text-shadow: 1px 1px 0 #fff;
}

.button:link {
	color: #5f5f5f;
}

.button:visited {
	color: #5f5f5f;
}

.button:hover {
	color: #000;
	background: url(../images/button1.png) no-repeat 0 -26px;
}

/* @end */

/* @group FOOTER STYLING
---------------------------------------------------------------------------------------*/


#footercontainer .column1,
#footercontainer .column2,
#footercontainer .column3 {
	width: 285px;
	margin: 20px 0 20px 15px;
	padding: 0 0 0 15px;
}

#footercontainer .column2,
#footercontainer .column3 {
	border-left: 1px solid #dfdfdf;
}

#footercontainer .column1 {
	padding-left: 0;
	margin-left: 0;
}

#footercontainer .column3 {
	width: 270px;
}

.footer_headline {
	font-family: "Myriad Pro", "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
	color: #5fabbe;
	font-size: 120%;
	margin: 0 0 3px 0;
}

.chek_paragraph {
	background: url(../images/chek_logo.gif) no-repeat left top;
	padding: 0 0 0 90px;
}

/* @end */

/* @group SITE INFO
---------------------------------------------------------------------------------------*/

#siteinfo {
	text-align: center;
	margin: 20px 0 20px 0;
	padding: 0 0 0 30px;
	color: #d8d8d8;
	font-size: 100%;
}

/* @end */

/* @group POPUPS 
---------------------------------------------------------------------------------------*/

body.popup {
	background-color: #fff;
	background-image: none;
}

#popup_outercontainer {
	position: relative;
	width: 800px;
	color: #787878;
	font-size: 1.2em;
	margin: 0 0 35px 0;	
}

#popup_outercontainer #column1,
#popup_outercontainer #column2 {
	width: 345px;
}

#popup_outercontainer #column1,
#popup_outercontainer #column2 { float: left; margin: 0 0 0 40px; }

#popup_outercontainer .header {
	margin: 0 0 45px 0;
}

body.metabolic .header { background: url(../images/popup_metabolic.jpg) no-repeat 0 0; height: 276px; }
body.tenweeks .header  { background: url(../images/popup_10weeks.jpg) no-repeat 0 0; height: 286px; }
body.fdn .header  { background: url(../images/popup_fdn.jpg) no-repeat 0 0; height: 309px; } 

#popup_outercontainer p {
	font-size: 90%;
	margin: 0 0 15px 0;
}

#popup_outercontainer dl { font-size: 90%; margin: 0 0 20px 0; }
#popup_outercontainer dt { margin: 0 0 5px 0; }
#popup_outercontainer dl dd { margin: 0 0 5px 0; }

#popup_outercontainer .highlight { color: #555; }

#popup_outercontainer .headline_v1 {
	font-size: 115%;
	color: #2c2c2c;
	margin: 0 0 10px 0;
	padding: 0 0 0 22px;
	background: url(../images/bullet_redarrow.png) no-repeat 0 60%;	
}

#popup_outercontainer .headline_v2 {
	color: #fff;
	background: url(../images/bullet_redarrow.png) no-repeat 0 60%;
	text-shadow: 1px 1px 1px #000;
	-moz-text-shadow: 1px 1px 0 #000;
	padding: 0 0 0 22px;	
}

.metabolic h2.mir {
	height: 0;
}

/* pop-up fdn
----------------------------------------------------- */
.fdn #popup_outercontainer {
	margin-top: 0;
	margin-bottom: 60px;
}

.fdn .button {
	position: relative;
	background: url(../images/button_fdn.gif) no-repeat 0 0;
	width: 406px;
	height: 43px;
	margin: 0 auto;
	top: 20px;
}

.fdn h2.mir {
	height: 0;
}


/* pop-up metabolic
----------------------------------------------------- */
.metabolic .findoutmore {
	background: url(../images/button_findoutmore.gif) no-repeat 0 0;
	width: 337px;
	height: 43px;
	margin: 20px 0 0 0;
}

/* pop-up tenweeks
----------------------------------------------------- */

.tenweeks #popup_outercontainer .terms {
	clear: both;
	font-size: 80% !important;
	line-height: 140%;
	padding: 30px 0 0 40px;
	margin: 20px 0 0 0;
	width: 720px;
}

.tenweeks .terms .strong {
	display: block;
}

.tenweeks #column2 .callout {
	background: url(../images/popup_10weeks_callout.gif) no-repeat 0 0;
	width:  379px;
	height: 326px;
	padding: 0;	
}

.tenweeks #popup_outercontainer ul {
	font-size: 90%;
	list-style-type: disc;
	color: #2c2c2c;
	padding-left: 17px;
}

.tenweeks .button {
	background: url(../images/popup_10weeks_contact.gif) no-repeat 0 0;
	width: 323px;
	height: 43px;
}

.tenweeks p.mir,
.tenweeks h3.mir,
.tenweeks h2.mir {
	height: 0;
}

/* pop-up map
----------------------------------------------------- */

#maps #popup_outercontainer {
	margin-top: 0;
}

#maps #popup_column1 {
	width: 230px;
	margin: 50px 0 0 40px;
	color: #bcbcbc;
}

#maps #branding {
	left: 550px;
	top: 25px;
}

#maps .phone {
	margin: 20px 0 0 0;
}

#maps #popup_outercontainer .headline_v2 {
	margin: 0 0 5px 0;
}

#map {
	position: absolute;
	top: 110px;
	left: 315px;
	border: 1px solid #7f7f7f;
	color: #575757; /* text colour for map overlay */
	font-size: 85%;
}

/* pop-up threemonths
----------------------------------------------------- */
body.threemonths #popup_outercontainer {
	width: 800px;
	top: 0;
	color: #4e4e4e;
}

.threemonths .header {
	background-image: url(../images/threemonths2.jpg);
	width: 800px;
	height: 483px;
}

.threemonths h1 {
	height: 0;
}

body.threemonths .intro {
	padding: 0 50px;
	text-align: center;
	font-size: 1.2em;
	line-height: 1.6em;
}

body.threemonths .button {
	position: relative;
	margin: 0 auto;
}

body.threemonths .headline {
	color: #2c2c2c;
	background: none;
	text-shadow: none;
	-moz-text-shadow: none;
	margin: 0 0 15px 0;
	padding: 0;
}

body.threemonths #popup_outercontainer #column1,
body.threemonths #popup_outercontainer #column2 {
	width: 340px;
	margin: 40px 0 0 0;
}

body.threemonths #column1 {
	position: absolute;
	left: 40px;
}

body.threemonths #column2 {
	position: absolute;
	right: 40px;
}

body.threemonths dt {
	color: #37868c;
}

body.threemonths dd {
	margin: 0 0 13px 0;
}

/* @end */