/* --------------- MINDBODYFERTILITY.CO.NZ FRONT END // STYLESHEET ---------------*/

/* --------------- 1. RESET STYLES ---------------*/
/* --------------- 2. LAYOUT STYLES ---------------*/
/* --------------- 3. TYPOGRAPHY STYLES ---------------*/
/* --------------- 4. FORM STYLES ---------------*/
/* --------------- 5. NAVIGATION STYLES ---------------*/



/* --------------- 1. RESET STYLES // ALSO SEE CSS/HTML5-RESET.CSS ---------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul, li {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}





/* --------------- 2. LAYOUT STYLES ---------------*/

/*-------- GENERIC --------*/

body {
	font-family:'Helvetica W01 Light', Helvetica, Arial, sans-serif;
	font-size:62.5%;
	color:#666;
	text-align:left;
	background:#faf7f5 url(../images/background-4thway-200W.png) repeat-x 0 0;
	}
		
div.clr {clear:both;}
	
.go-left {float:left; position:relative; display:inline;}
.go-right {float:right; position:relative; display:inline;}
	
		
/*-------- CONTENT --------*/

div#page-wrapper {
	width:900px;
	margin:0px auto;	
	}
	
	@media only screen and (max-width: 960px) {
		div#page-wrapper {width:95%;}
		}
	
div#content-wrapper, div#sidebar {
	position:relative;
	float:left;
	}
	
div#content-wrapper {width:770px;}

	@media only screen and (max-width: 960px) {
		div#content-wrapper {width:100%;}
		}
	
	@media only screen and (max-width: 768px) {
		div#content-wrapper {width:100%;}
		}
		
	@media only screen and (max-width: 480px) {
		div#content-wrapper {width:100%;}
		}

div#sidebar {width:130px;}
	nav.hide {visibility:hidden; display:none;}

	@media only screen and (max-width: 960px) {
		div#sidebar {display:none; width:0;}
		nav.hide {visibility:visible; display:inline;}
		}
		
	@media only screen and (max-width: 720px) {
		nav.hide {display:block;}
		footer div {clear:left;}
		}

img#logo {
	display:block;
	display:inline;
	max-width:100%;
	margin-top:6px;
	}
	
	header nav {
		display:inline;
		float:right;
		margin-top:70px;
		}
		
		@media only screen and (max-width: 720px) {
			img#logo {
				display:block;
				max-width:100%;
				margin-top:6px;
				}
			
			header nav {
				display:block;
				float:left;
				margin-top:0px;
				}
			}
	
div#content-outline {
	background:transparent url(../images/background-50percent-white.png) repeat 0 0;
	padding:7px;
	}
		
div#content {
	background-color:#fff;
	padding:20px 17px 35px 30px;
	}
	
	@media only screen and (max-width: 320px) {
		div#content {padding:15px 15px 15px 15px;}
		}
	
	div#content aside {
		display:block;
		float:right;
		width:200px;
		padding-left:28px;
		padding-bottom:30px;
		position:relative;
		z-index:10;
		background-color:#fff;
		}
		
		div.pic {
			background:transparent url(../images/pic-background-4thway.png) no-repeat 1px 1px;
			height:217px;
			}
			
		div#content aside.device-720 {
			display:none;
			visibility:hidden;
			}
			
		@media only screen and (max-width: 720px) { /* was 480px */
		
		div#content aside {
			visibility:hidden;
			display:none;
			}
			
		div#content aside.device-720 {
			display:block;
			visibility:visible;
			width:197px;
			float:left;
			margin-bottom:10px;
			margin-left:0px;
			margin-top:15px;
			padding-bottom:0px;
			padding-left:0px;
			}
			
		}

	
/* Content List Layout */
section ul {margin:0 0 12px 20px;}
ul.two-col-list {width:272px; float:left; margin:0;}

ul.two-col-list li, section ul li {
	background:transparent url(../images/bulletpoint.png) no-repeat -2px 4px;
	padding:0px 25px 10px 18px;
	}

/* Aside/Sidebar */
div#sidebar img {margin:9px 0 20px 15px;}


/* Services - topic container */
div.service {
	margin-bottom:10px; 
	bor der-bottom:1px dotted #75719d; /* 4thway mid purple */
	border-bottom:1px solid #e6e6e6;
	}

/* Testimonials */
div.testimonials img, div.testimonials p {display:inline;}


/* Articles - file download */
div.file-download {
	width:490px;
	min-height:50px;
	}
	
	div.file-download img {
		position:relative;
		float:left;
		margin:4px 5px 0px 0;
		}
	
/*-------- FOOTER --------*/

footer {
	display:block;
	height:35px;
	margin:10px 0 10px 34px;
	}
	
	@media only screen and (max-width: 960px) {
		footer {margin:10px 0 10px 0px;}
		}

footer div, footer img, footer p {
	display:inline;
	float:left;
	}

footer div {margin-right:18px;}	
footer p {margin-top:7px;}

	@media only screen and (max-width: 768px) {
		footer div {display:block;}
		}
	
div#linked-in {margin:3px 23px 0 0; float:right;}
		
	@media only screen and (max-width: 768px) {
		footer div, div#linked-in {visibility:hidden; display:none;}
		}

	
/* --------------- 3. TYPOGRAPHY STYLES ---------------*/

/*-------- GENERIC TYPOGRAPHY --------*/

h1 {
	font-weight: normal;
	font-style: normal;
	font-size:2.8em;
	line-height:1.3em;
	margin:0 0 10px 0;
	color:#f47b20; /*-- 4thway orange --*/
	}
		
h2 {
	font-weight: normal;
	font-style: normal;
	font-size:1.8em;
	line-height:1.3em;
	margin:0 0 10px 0;
	color:#524e86; /*-- 4thway purple --*/
	}
	
h3 {
	font-weight: normal;
	font-style: normal;
	font-size:1.6em;
	line-height:1.3em;
	margin:0 0 10px 0;
	color:#f47b20; /*-- 4thway orange --*/
	}
	
h4 {
	font-weight: normal;
	font-style: normal;
	font-size:1.6em;
	line-height:1.5em;
	margin:0;
	color:#524e86; /*-- 4thway purple --*/
	}

p {
	font-size:1.3em;
	line-height:1.6em;
	margin:0 0 10px 0;
	letter-spacing:0.02em;
	}
	
	p.user-advice {color:#c41230; /*-- 4thway red --*/}		
	p.note {font-size:1.1em;}
	
	section p.note {margin-top:40px;}
		
a {text-decoration:none; color:#524e86; /*-- 4thway purple --*/}
	
section a {
	text-decoration:underline; 
	color:#524e86; /*-- 4thway purple --*/
	}
	
a:hover {color:#f47b20; /*-- 4thway orange --*/}
	
span.standout {color:#524e86; /*-- 4thway purple --*/}
	
/* List Typography */
section ul li  {padding-bottom:0;}
ul.two-col-list li, section ul li {font-size:1.3em; line-height:1.6em;}

	
/* Content Aside */
aside h3 {
	font-weight: normal;
	font-style: normal;
	font-size:1.6em;
	line-height:1.3em;
	margin:10px 0 5px 5px;
	border-bottom:1px solid #e6e6e6;
	padding-bottom:4px;
	color:#524e86; /*-- 4thway purple --*/
	}

section aside p {margin:0 0 0 5px;}
section aside p.last {padding-bottom:8px; border-bottom:1px solid #e6e6e6;}


div#call-to-action p {
	color:#333;
	font-size:1.3em;
	}
	
/* Services Show/hide */
	
div.toggle-container {margin-bottom:10px;}
	
.toggle {
	text-decoration:none;
	color:#524e86; /*-- Mind Body Fertility purple --*/
	display:none;
	font-size:1.2em;
	line-height:1.6em;
	}
	
.toggle:hover {
	cursor:pointer;
	color:#f47b20; /*-- Mind Body Fertility orange --*/
	}
	
p.back-to-top {
	margin:0; 
	font-size:1.0em;
	text-align:right;
	}
	
	p.back-to-top a {text-decoration:none;}

	
/*-------- SIDEBAR --------*/



/*-------- FOOTER --------*/

p.copyright {
	color:#999;
	font-size:1.0em;
	line-height:1.2em;
	margin:30px 0 20px 3px;
	text-align:center;
	clear:left;
	}
	
	
/* --------------- 4. FORM STYLES ---------------*/

/*---------- SITE ADMINISTRATOR > LOGIN FORM ----------*/

div#login-prompt p {
	margin-bottom:10px;
	color:#f47b20; /*-- 4thway orange --*/
	line-height:1.4em;
	}
	
input#username, input#passcode {
	border:1px solid #e6e6e6;
	color:#333;
	font-size:1.2em;
	margin-bottom:12px;
	width:270px;
	height:24px;
	padding:0 7px;
	}
		
div.login-label label { 
	font-size:1.2em;
	color:#666;
	line-height:1.6em;
	}
	
input#login-noSpam {
	display:none;
	visibility:hidden;
	}
		
div#login-send {width:100px; position:relative; float:left; display:inline; margin:3px 0px 0px 205px;}

	div#login-send input {
		color:#fff;
		font-size:1.4em;
		width:80px;
		height:26px;
		background-color:#bab8ce; /* 4thway light purple */
		border:none;
		cursor:pointer;
		padding-bottom:3px;
		}

	div#login-send input:hover {
		background-color:#75719d; /* 4thway med purple */
		}



/* --------------- 5. NAVIGATION STYLES ---------------*/

/*-------- ASIDE/SIDEBAR NAVIGATION --------*/

aside nav li {
	display:block;
	width:115px;
	margin-left:8px;
	margin-bottom:5px;
	border-bottom:1px dotted #bab8de; /* 4thway light purple */
	}
	
	aside nav li:hover, aside nav li.selected {
		border-bottom:1px dotted #524e86; /* 4thway purple */
		}
		
		aside nav li.selected a {color:#524e86; /* 4thway purple */}

aside nav li a {
	display:block;
	position:relative;
	font-size:1.5em;
	color:#bab8de; /* 4thway light purple */
	padding:8px 15px 5px 10px;
	text-align:right;
	}
	
	aside nav li a:hover, aside nav li.selected a {
		color:#524e86; /* 4thway purple */
		}
	
/*-------- HIDDEN SIDEBAR NAVIGATION --------*/

nav.hide {margin-right:10px;}

nav.hide li {
	display:inline;
	float:left;
	margin:3px 10px 5px 0;
	border:1px dotted #bab8de; /* 4thway light purple */
	background:transparent url(../images/background-50percent-white.png) repeat 0 0;
	}
	
	nav.hide li:hover, nav.hide li.selected {
		border:1px dotted #524e86; /* 4thway purple */
		background:transparent url(../images/background-90percent-white.png) repeat 0 0;
		}
		
		nav.hide li.selected a {color:#524e86; /* 4thway purple */}

nav.hide li a {
	display:block;
	position:relative;
	font-size:1.5em;
	color:#bab8de; /* 4thway light purple */
	padding:8px 35px 7px 35px;
	text-align:center;
	}
	
	nav.hide li a:hover, nav.hide li.selected a {
		color:#524e86; /* 4thway purple */
		}