/*
====== CSS Document for Burness Corlett ======
	Author: Phase Two, Apr 2008, Rich Wilson
	Last edit: Apr 2008
	
	The base styles are set here.

----------------------------------------------
		Contents
----------------------------------------------
* Style sheet imports
* General [element] styles
* Container
* Header
	* Offline contact details
* Content 
	* Sidebar
		* Close Area [Commented out]
	* Main Content [General Pages]
		* Answers
		* Nav - Bottom of content pages
	* Nav List [Home page]
	* You Talk We Listen page
		* Sidebars
		* Main Content
Colours
-------
[Pantone = Hex = Description]

143 = #efb22d = warm orange
	143+35% = #f9e4b5
482 = #e5d3c1 = pale brown
5135 = #936b7f
5145 = #ad8799 = pinky-mauve
	5145+30% tint = #e6dbe0
	5145+35% tint = #e2d5db
	5145+40% tint = #decfd6
5235 = #ddc6c4
	5235+60% tint = #eadcdb
5245 = #e5d3cc
	5425+60% tint = #efe4e0
5405 = #3f6075 = watery-gray dark blue
5415 = #607c8c
5425 = #8499a5 = bluey-gray
	5425+30% tint = #dae0e4
	5425+35% tint = #d3dbdf
	5425+40% tint = #cdd6db
5445 = #c4cccc
	5445+60% tint = #dbe0e0
545 = #c4d3dd - cool light blue
5455 = #d6d8d3
	5455+60% tint = #e6e7e4
5555 = #779182
5565 = #96aa99 = greeny-gray
	5565+30% tint = #dfe5e0
	5565+35% tint = #dae1db
	5565+40% tint = #d5ddd6
5585 = #c4cebf
	5585+60% tint = #dbe1d8
5595 = #d8dbcc
	5595+60% tint = #e7e9e0
606 = #d3bf11 = weird snotty-green
	606+30% tint = #f1ebb7
	606+35% tint = #efe8ab
	606+40% tint = #ede59f
607 = #f2eabc = pale greeny-yellow
609 = #eae596 = pale sandy gold
	609+60% tint = #f2efc0
610 = #e2db72
	610+60% tint = #ede9aa
613 = #afa00c
614 = #eae2b7 = pale dark greeny-yellow
643 = #c6d1d6 = cold gray blue
	643+60% = #dce3e6
644 = #9bafc4 = pale blue 
	644+30% tint = #e1e7ed
	644+35% tint = #dce3ea
	644+40% tint = #d7dfe7
645 = #7796b2 = another mid range blue
646 = #5e82a3 = warmer gray blue
648 = #00305e = dark blue
649 = #d6d6d8 = pale gray blue
	649+60% tint = #e6e6e7
651 = #9baabf = warmer gray blue
696 = #8e4749 = dark browny-pink
*/


@import url("reset.css");


/*
==============================================
		General Styles
==============================================
*/
*, body 
{ 
	font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif; 
	font-size: 100%; 
	line-height: 1.125em; /*16x1.125=18px*/ 
}
body { background: #fff8cf; color: #3f6075; }

h1, h2, h3, h4, h5, h6 
{ 
	margin: .5em 0; 
	color: #9bafc4;
	text-transform: uppercase; 
	text-align: center;
}
h1 { font-size: 3em; /*48px*/ } 
h2 { font-size: 2em; /*32px*/ }
h3 { font-size: 1.125em; /*18px*/ }

p, ul, ol { font-size: .875em; line-height: 1.42em; /*14px/ ~16px*/ }
p { margin: .5em 0; }
strong { font-weight: bold; }

a { color: #9bafc4; text-decoration: none; }
a:hover { color: #8e4749; }
a:visited {}

/*hr.breaker{visibility:hidden;clear:both;}
select, option, input, textarea { font-size: 1em; }*/

.clear { clear: both; height: 0; }
.hide { display: none; }
.invisible { visibility: hidden; }

/*
==============================================
		Container
==============================================
*/
#container 
{
	margin: 0 auto;
	width: 1000px;
}


/*
==============================================
		Flash
==============================================
*/
#flash 
{
	position: absolute;
	left: 50%;
	/*width: 1000px;
	height: 550px;*/
	margin-left: -500px;
	z-index:50;
	overflow:visible;
}

/*
==============================================
		Skip [Flash] link
==============================================
*/
/* Should appear below the page and therefore below the Flash movie */
.skip-link-container { position: absolute; top: 100%; right: 0em; padding: .5em; } 

/*
==============================================
		Header
==============================================
*/
#header 
{
	position: relative;
	background: #f2eabc;
	/*height: 10em;*/
	padding: .625em .375em;
	/*font-size: .875em;*/
}

#header h1 
{
	margin: 0; /*.208 ~= 10px*/
	background: transparent url(../images/ip-logo-rings.png) no-repeat; 
	width: 312px; 
	height: 70px;
	text-indent: -9999px; 
}
#header h1 a { display: block; width: 100%; height: 100% }

/*
----------------------------------------------
		Offline Contact Details
----------------------------------------------
*/
#offlinecontact 
{ 
	/*float: right; margin: 2em 1em;*/ 
	position: absolute; 
	right: 2em; 
	top: 50%;
	margin-top: -2em;
	/*font-size: 1.125em;*/
	width: 14em;
}

#offlinecontact dl { margin: 0 0 0 .333em; color: #fff; }
#offlinecontact dt, #offlinecontact dd { /*padding: 0.5em 0;*/ line-height: 2em; /* 2x=70px - same height as logo */ }
#offlinecontact dt { float: left; margin-right: 0.575em; color: #7a97b5; text-transform: uppercase; font-weight: bold; }
#offlinecontact dd, #offlinecontact a { color: #00305e; }
/*#offlinecontact a { text-decoration: none; }*/
#offlinecontact a:hover { color: #8e4749; }

/*
==============================================
		Content
==============================================
*/
#content 
{
	position: relative;
	/*clear: both;
	padding-top: 1px;*/
	/*margin-top: -10px;  A gap appears between the header and content otherwise TODO: Investigate */
	background: #f2eabc;
	overflow: visible; /* Changed from hidden to allow the sidebar-answers to display in full */
	width: 100%;
	min-height: 520px;
}

#content2
{
	position: relative;
	/*clear: both;
	padding-top: 1px;*/
	/*margin-top: -10px;  A gap appears between the header and content otherwise TODO: Investigate */
	background: #fff;
	width: 100%;
	min-height: 235px;
	margin-bottom: -5px;
}

#content3 
{
	position: relative;
	/*clear: both;
	padding-top: 1px;*/
	/*margin-top: -10px;  A gap appears between the header and content otherwise TODO: Investigate */
	background: #f2eabc;
	width: 100%;
}

/* TODO: Can remove this if we update the height of the Flash Movie and re-position the skip [intro] link */
#home #content #content2 #content3 { min-height: 0; } 

#bluebar1
{
	position: relative;
	/*clear: both;
	padding-top: 1px;*/
	/*margin-top: -10px;  A gap appears between the header and content otherwise TODO: Investigate */
	background: #7796b2;
	width: 100%;
	min-height: 30px;
}

#bluebar2
{
	position: relative;
	/*clear: both;
	padding-top: 1px;*/
	/*margin-top: -10px;  A gap appears between the header and content otherwise TODO: Investigate */
	background: #104b75;
	width: 100%;
	min-height: 30px;
}

#content h1, #content2 h1 
{ 
	margin: 0;
	padding: 5px 0;
	width: 100%; 
	background: #7796b2; 
	color: #fff; 
	font-size: 1.25em;
	letter-spacing: 2px; 
	text-transform: uppercase; 
}


/*
==============================================
		Sidebars
==============================================
*/
#sidebar 
{
	float: left;
	width: 300px;
	padding: 5px 10px;
	background: #f2eabc;
	color: #5e82a3;
	text-align: center;
	position: relative;
	z-index: 1;
}

#sidebar h1 { margin: .5em 0; font-size: 1em; }
#sidebar li { position: relative; margin: 1em; }
#sidebar a { color: inherit; /*text-decoration:none;*/ }
#sidebar a:hover { color: #8e4749; }

#sidebar-left, #sidebar-right
{
	position: absolute;
	top: 50%;
	width: 200px;
	color: #8e4749;
	text-align: center;
}
#sidebar-left 
{ 
	left: 60px; 
	margin-top: -4.875em; /* Half the height -9.75*/
	/*height: 9.75em;  Height = line-height * number of lines + margins = 1.25*7 + .5*2 =
	color: #9bafc4;*/ 
}
#home #sidebar-left { left: 20px; }
#sidebar-right
{ 
	right: 20px; 
	margin-top: -2.25em; /* -6em Half the height */
	/*height: 8.25em; 
	color: #8e4749;*/
	text-transform: uppercase;
}
#sidebar-left p, #sidebar-right p#helper-text { font-size: .875em; line-height: 1.25em; text-transform: none; letter-spacing: normal; }
#sidebar-right p { font-size: 1.125em; line-height: 1.5em; letter-spacing: 2px; }

#sidebar-right p#helper-text { /*position: absolute; top: 0; left: 0;*/ background: #f2eabc; } /*Used to appear directly on top of the Please Tell Us text on hover */


/* 
----------------------------------------------
		Close Area
----------------------------------------------

.close-area { position: absolute; top: 5px; right: 5px; text-indent: 0px; }
.close-area a 
{
	display: block; 
	background: transparent url(../images/close-button.png) no-repeat right center;
	width: 4em;
	font-size: .75em;
	line-height: 1.5em;
	height: 1.5em;
	min-height: 16px; /* height of the above close-button * /
	text-align: left;
}
.close-area a:hover { opacity: .5; filter: alpha(opacity=50); }*/


/*
----------------------------------------------
		Nav Container
----------------------------------------------
*/
#nav-container
{
	position: absolute;
	right: 0;
	z-index: 2;
}

#home #nav-container,
#starting-out #nav-container,
#examining-possibilities #nav-container,
#making-choices #nav-container,
#financial-independence #nav-container,  
#what-if #nav-container  
	{
}

/*
----------------------------------------------
		Section Nav
----------------------------------------------
*/
#section-nav 
{ 
	float: right; 
	margin-top: .5em;
	/*position: absolute; 
	top: 3em; 
	right: 0;*/
	/*width: 100px;*/
	z-index: 2; 
	font-size: .875em;
	text-align: center;
	letter-spacing: 1px;
}

#section-nav li 
{ 
	margin-bottom: 1em; 
	text-transform: uppercase; 
}
#section-nav .left-arrow { background: url(../images/left-arrow.gif) no-repeat left center; padding: 0 10px 0 20px; }
#section-nav .right-arrow { background: url(../images/right-arrow.gif) no-repeat right center; padding: 0 20px 0 10px; }

#section-nav a { margin: 0; color: #3f6075; display: block; width: auto; }
#section-nav a:hover { color: #8e4749; } 

#starting-out #section-nav,
#examining-possibilities #section-nav,
#making-choices #section-nav,
#financial-independence #section-nav,  
#what-if #section-nav 
	{ margin-top: 4.125em; /*58px*/ }
	
	
/*
==============================================
		Sidebar Menu - Right column menu 
			[usercontrols/SidebarMenu.aspx] 
==============================================
*/
#sidebar-menu 
{ 
	/*position: absolute; 
	top: 0; 
	right: 0; */
	float: right;
	padding: 0 .625em;
	width: 95px; /*200px;*/
	background: white;
	z-index: 2; 
	font-size: .825em;
	text-align: center;
	letter-spacing: 1px;
	opacity: .75; 
	filter: alpha(opacity=75);
}
#sidebar-menu h2 { font-size: 1.25em; font-weight: bold; color: black; }
#sidebar-menu li { margin-bottom: 1em; text-transform: uppercase; }
#sidebar-menu a { display: block; width: auto; /*text-decoration: underline;*/ color: black;  }
#sidebar-menu a:hover { color: #8e4749; } 

#sidebar-menu2 
{ 
	/*position: absolute; 
	top: 0; 
	right: 0; */
	float: right;
	padding: 0 .625em;
	width: 95px; /*200px;*/
	background: white;
	z-index: 0; 
	font-size: .825em;
	text-align: center;
	letter-spacing: 1px;
	opacity: .75; 
	filter: alpha(opacity=75);
}
#sidebar-menu2 h2 { font-size: 1.25em; font-weight: bold; color: black; }
#sidebar-menu2 li { margin-bottom: .75em; text-transform: uppercase; }
#sidebar-menu2 a { display: block; width: auto; /*text-decoration: underline;*/ color: black;  }
#sidebar-menu2 a:hover { color: #8e4749; } 


/*
==============================================
		Main Content
==============================================
*/
#main-content 
{ 
	position: relative;
	/*margin-left: 320px;*/
	margin: 0 auto;
	padding-top: 100px; 
	width: 360px; 
}

#main-content2 
{ 
	position: relative;
	/*margin-left: 320px;*/
	margin: 0 auto;
	padding-top: 0px; 
	width: 750px; 
}

#main-content3, #main-content4, #main-content5
{ 	
	position: relative;
	/*margin-left: 320px;*/
	margin: 0 auto;
	padding-top: 0px; 
	width: 750px; 
}

#main-content3 p
{ 
	font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif; 
	font-size: 16px; 
	line-height: 18px;
	color: #fff;
	margin: 0;
	padding-top: 7px;
	letter-spacing: 2px;
}

#main-content4 p 
{ 
	font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif; 
	font-size: 14px; 
	line-height: 16px;
	color: #fff;
	margin: 0;
	padding-top: 7px;
	letter-spacing: 2px;
}

#main-content5 p 
{ 
	font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif; 
	font-size: 13px; 
	line-height: 17px;
	color: #000;
	margin: 0;
	padding-top: 15px;
}

#main-content5 p.bluetext 
{ 
	font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif; 
	font-size: 14px; 
	line-height: 18px;
	color: #104b75;
	padding-top: 15px;
	font-weight: bold;
	padding-right: 200px;
}

#main-content5 p.bluetext2 
{ 
	font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif; 
	font-size: 13px; 
	line-height: 17px;
	color: #104b75;
	padding-top: 15px;
	font-weight: bold;
	padding-right: 200px;
}

#main-content5 p.bluehead
{ 
	font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif; 
	font-size: 16px; 
	line-height: 20px;
	color: #104b75;
	padding-top: 15px;
	font-weight: bold;
	padding-right: 200px;
}


#starting-out #main-content
	{ background: transparent url(../images/header-starting-out.png) no-repeat;  }
#examining-possibilities #main-content
	{ background: transparent url(../images/header-examining-possibilities.png) no-repeat;  }
#making-choices #main-content
	{ background: transparent url(../images/header-making-choices.png) no-repeat;  }
#financial-independence #main-content
	{ background: transparent url(../images/header-financial-independence.png) no-repeat;  }
#what-if #main-content
	{ background: transparent url(../images/header-what-if.png) no-repeat;  }

#personal, #business { float: left; padding-top: 1.5em; overflow: auto; width: 100%; /*overflow[?] and float added*/ }
#personal, #business { height: 140px; } /*Was 170, 145 pixels repectively*/
/* What if height set below to save repeating selector */


/* Colours */
#starting-out #personal { background: #d6d6d8; }
#starting-out #business { background: #c6d1d6; }

#examining-possibilities #personal { background: #e5d3cc; }
#examining-possibilities #business { background: #ddc6c4; }

#making-choices #personal { background: #d8dbcc; }
#making-choices #business { background: #c4cebf; }

#financial-independence #personal { background: #d6d8d3; }
#financial-independence #business { background: #c4cccc; }

#what-if #personal, #what-if #business { padding-top: 0; height: 328px; /* personal+business+padding-top[1.5em=24px] */ background: #eae596; }
/* IE6 creates a space between the personal and nav if business is not there so included with a CC - this style could also be moved   */
#what-if #business{ height: 0; /*background: #e2db72; }*/ }


#main-content h1, #main-content2 h1, #personal h2, #business h2
{ 
	position: absolute; 
	/*top: 0;*/
	left:0; 
	margin: 0; 
	padding: 5px 10px;
	color: #fff; 
	font-size: 1em; 
	letter-spacing: normal;
}

#main-content h1, #main-content2 h1 { top: 0; width: auto; }

#personal h2, #business h2 { margin-top: -1.5em; }

/* Colours */
#starting-out #main-content h1, #starting-out #business h2 { background: #9bafc4; }
#starting-out #personal h2 { background: #8499a5; }

#examining-possibilities #main-content h1, #examining-possibilities #business h2 { background: #ad8799; }
#examining-possibilities #personal h2 { background: #936b7f; }

#making-choices #main-content h1, #making-choices #business h2 { background: #96aa99; }
#making-choices #personal h2 { background: #779182; }

#financial-independence #main-content h1, #financial-independence #business h2 { background: #8499a5; }
#financial-independence #personal h2 { background: #607c8c; }

#what-if #main-content h1, #what-if #business h2 { background: #d3bf11; }
#what-if #personal h2 { background: #afa00c; }

#main-content p, #main-content2 p { margin: .5em; } 
#main-content ul, #main-content2 ul { margin: 0; /*padding: .5em 2em;*/ }
#main-content li, #main-content2 li { /*position: relative;*/ margin: .5em 2em; }

#main-content li a, #main-content2 li a { color: #3f6075; /*text-decoration: none;*/ }
#main-content li a:hover, #main-content2 li a:hover{ color: #8e4749; }
#main-content ul ul, #main-content2 ul ul { font-size: inherit; line-height: inherit; }

#what-if #personal ul { list-style: disc outside; color: #3f6075; }
#what-if #personal ul ul { list-style-type: circle; }

/*
----------------------------------------------
		Answers
----------------------------------------------
*/
/*#answers { position:absolute; top: 0; left: 680px; width: 320px; }

.business-answer, .personal-answer-old
{ 
	position: relative;
	top: 0;
	left: 0;
	padding: 5px 15px;
	color: #3f6075;
}

.business-answer { margin-top: 284px; background: #dce3e6; }
/*.business-answer p, .personal-answer p { margin: .5em 1em; }* /

.personal-answer-old { margin-top: 100px; background: #e6e6e7; }*/

.summary-answer 
{
	position: absolute; 
	/*top: auto;*/
	left: 5%; 
	/* border: 1px solid #5e82a3; */
	padding: 5px 0;
	width: 90%;
	background: #eae596; 
	color: #000;
	z-index: 2;
}
#main-content .summary-answer ul { list-style: disc outside; margin: 0 1em; }
/*.summary-answer h2 { color: #c6d1d6; font-size: 1em; text-transform: uppercase; }
.summary-answer p { color: #5e82a3; font-size: 1em; margin: 0; }*/

.personal-answer, .business-answer
{ 
	position: absolute; 
	top: 0px;
	left: 100%;
	padding: 5px 10px;
	width: 300px;
	color: #3f6075; /* remove */
}
/* Now all answers start at the bottom of the content section image
.personal-answer { margin-top: 100px; }
.business-answer { margin-top: 284px; }*/
.personal-answer, .business-answer { margin-top: 100px; /*z-index: 3;*/ }

/* Background Colours */
#starting-out .personal-answer { background: #e6e6e7;  }
#starting-out .business-answer { background: #dce3e6;  }

#examining-possibilities .personal-answer { background: #efe4e0;  }
#examining-possibilities .business-answer { background: #eadcdb;  }

#making-choices .personal-answer { background: #e7e9e0;  }
#making-choices .business-answer { background: #dbe1d8;  }

#financial-independence .personal-answer { background: #e6e7e4;  }
#financial-independence .business-answer { background: #dbe0e0;  }

#what-if .personal-answer { background: #f2efc0;  }
#what-if .business-answer { background: #ede9aa;  }

div.answer { z-index: 1; overflow: visible; } /* TODO: Needed? */

#what-if a.answer { color: #9bafc4; }
/*
==============================================
		Nav - Bottom of content pages
==============================================
*/
#nav 
{
	/*float:right;
	position: absolute;
	bottom: 0;
	right: 1em;*/
	width: 100%; /*4*175 + 4*7px*/
	text-transform: uppercase;
}

#nav ul { display: block; text-align: center; }
#nav ul li { display: inline; /*margin: 0 1em*/ } 

#nav ul li a 
{ 
	float: left; 
	display: block; 
	padding-top: 50px; /*Picture height of 45px plus 5px for spacing the text*/
	padding-bottom: 5px;
	/*background-color: #c66 !important;*/
	color: #fff !important;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 1px;
	/*text-decoration:none;*/		
}
#nav ul li a:hover 
{
	background-color: #fff !important;
	color: #c66 !important;
}

#nav ul li#starting-out a,
#nav ul li#examining-possibilities a,
#nav ul li#making-choices a,
#nav ul li#financial-independence a,
#nav ul li#what-if a  
{ 
	width:90px; height: 2em;
}
#nav ul li#starting-out a { background: #9bafc4 url(../images/nav-starting-out.png) no-repeat; } 
#nav ul li#examining-possibilities a { background: #ad8799 url(../images/nav-examining-possibilities.png) no-repeat; }
#nav ul li#making-choices a { background: #96aa99 url(../images/nav-making-choices.png) no-repeat; }
#nav ul li#financial-independence a { background: #8499a5 url(../images/nav-financial-independence.png) no-repeat; }
#nav ul li#what-if a { background: #d3bf11 url("../images/nav-what-if.png") no-repeat; 
	line-height: 2em; /* Vertically centre */ }


/*
==============================================
		Home page
==============================================
*/

/*
----------------------------------------------
		Nav List
----------------------------------------------
*/
#nav-list { margin: 0 auto; padding-top: 10px; width: 510px; }
#nav-list ul.outer 
{ 
	background: transparent url(../images/nav-list-shadow.png) repeat-y top; 
	padding-bottom: 1px; /* 0 < padding-bottom < 0.5 prevents the top of the next repeat-y bg image from showing but in Opera/Safari the bottom drop shadow doesn't display.*/ 
}
#nav-list li 
{ 
	position:relative; 
	display:block; 
	margin-right: 10px;
	margin-bottom: 10px;
	height: 80px; 
	overflow: hidden;
}

#nav-list a { display:block; /*text-decoration: none;*/ color: #fff; }

#nav-list li ul li { display: inline; }
#nav-list .title, #nav-list .definition, #nav-list .metaphor
{ 
	margin: 0;
	padding: 0;
	display: inline;
	overflow: auto;
	height: 80px;
	width: 150px;
}

#nav-list .title { float: left; text-align: center; /*display:table-cell; vertical-align:middle;*/ }
#nav-list .title a span{ color: #fff; font-size: 1.5em; } /* Two lines? */
#nav-list .metaphor { width: 300px; }
#nav-list .definition { float: right; text-align: center; width: 150px; }
#nav-list .definition a { color: #00305e; font-size: 1.125em; } /*line-height: 25px; 4 lines in 100px high*/

#nav-list #starting-out { background: #9bafc4; }
#nav-list #starting-out .definition { background: #dce3ea; }
#nav-list #examining-possibilities { background: #ad8799; }
#nav-list #examining-possibilities .definition { background: #e2d5db; }
#nav-list #making-choices { background: #96aa99; }
#nav-list #making-choices .definition { background: #dae1db; }
#nav-list #financial-independence { background: #8499a5; }
#nav-list #financial-independence .definition { background: #d3dbdf; }
#nav-list #what-if { background: #d3bf11; }
#nav-list #what-if .definition { background: #efe8ab; }

#nav-list .title a, #nav-list .definition a, #nav-list .metaphor a { display: block; height: 80px; }

/* Vertically Centred text */
#nav-list .title a span, #nav-list .definition a span 
{ 
	position: absolute; 
	top: 50%; 
	left: 0; 
	margin-top: -1.125em; 
	width: 100%;
	cursor: pointer; 
}
#nav-list .title a span.single-line { margin-top: -.563em; }
#nav-list .definition a span { margin-top: -1.688em; }


/*
==============================================
		Case Studies page
==============================================
*/

/*
----------------------------------------------
		Content
----------------------------------------------
*/

#case-studies #content { overflow: hidden; }

/*
----------------------------------------------
		Sidebar
----------------------------------------------
*/

#case-studies #sidebar 
{
	width: 160px;
	background: #c4d3dd;
	color: #fff;
	margin-bottom: -2000px; 
	padding-bottom: 2000px; 
}

#case-studies #sidebar h2, #case-studies #sidebar p { text-align: left; }

#case-studies #sidebar h2
{
	margin-bottom: 0;
	font-size: 1em;
	line-height: 1.125em;
	font-weight: bold;
}
#case-studies #sidebar h2 a { color: white; }


#case-studies #sidebar p { margin: 0 0 2em; }
#case-studies #sidebar p a { color: #3f6075; }
#case-studies #sidebar a { display: block; }


/*
----------------------------------------------
		Main Content
----------------------------------------------
*/
#case-studies #main-content
{
	float: left;
	margin: 0;
	padding: 0; /*padding-top: 1em;*/
	width: auto;
	color: #8499a5;
}

#case-studies #main-content .col1, 
#case-studies #main-content .col2 
	{ float:left; padding: 20px; width: 300px; /*margin-left: 20px; width: 280px;*/ }

#case-studies #main-content h2, #case-studies #main-content h3 
{ 
	color: #3f6075;
	font-weight: bold; 
	font-size: 1.125em; 
}

#case-studies #main-content h2 { line-height: 1em; margin: 0 0 .375em; }

#case-studies #main-content h3 
{
	margin-bottom: 0;
	text-align: left;
	text-transform: none;
}
#case-studies #main-content p { margin: 0 0 .5em; }
#case-studies #main-content ul { list-style: disc inside; }
#case-studies #main-content li { margin: .5em; }

/*
==============================================
		Fundamentals page
==============================================
*/

/*
----------------------------------------------
		Content
----------------------------------------------
*/

#fundamentals #content { overflow: hidden; }
/*
----------------------------------------------
		Sidebar
----------------------------------------------
*/

#fundamentals #sidebar 
{
	width: 160px;
	background: #8e4749;
	margin-bottom: -2000px; 
	padding-bottom: 2000px; 
}

#fundamentals #sidebar ul 
{
	margin: 2em .5em; 
	font-size: 1em;
	line-height: 1.125em;
	font-weight: bold;
	text-align: left; 
	text-transform: uppercase;
}
#fundamentals #sidebar li { margin: 2em 0; }

#fundamentals #sidebar a { display: block; color: #f4f1df; }
/*#fundamentals #sidebar a:hover { color: #fff; }*/


/*
----------------------------------------------
		Main Content
----------------------------------------------
*/
#fundamentals #main-content
{
	float: left;
	margin: 0;
	padding: 0;
	width: auto;
	color: #8499a5;
	overflow: hidden;
}

#fundamentals #main-content .col1, 
#fundamentals #main-content .col2 
	{ float:left; padding: 20px; width: 300px; margin-bottom: -2000px; padding-bottom: 2000px; }
#fundamentals #main-content .col1 { background: #f0e5dc; color: #3f6075; }
/*#fundamentals #main-content .col2 { width: 300px }*/

#fundamentals #main-content .col1 h3 { color: #8e4749; }

#fundamentals #main-content h2, #fundamentals #main-content h3 
{ 
	margin: 0; 
	color: #3f6075;
	font-weight: bold; 
	text-align: left; 
}

#fundamentals #main-content h2 { font-size: 1.125em; }
#fundamentals #main-content h3 { margin-bottom: 0; font-size: 1em; text-transform: none; }
#fundamentals #main-content p { margin: 0 0 .5em; }
#fundamentals #main-content p.author { margin-top: -.5em; color: #8e4749; font-style: italic; text-align: right; }

#fundamentals #main-content ul { margin-bottom: 0.5em; }
#fundamentals #main-content li { margin: 0; }
#fundamentals #main-content li strong { font-weight: bold; }

#fundamentals #main-content label { display: block }
#fundamentals #main-content input { width: 100% }

#fundamentals #map-container { margin: 0 auto; width: 320px; height: 280px }
#fundamentals #map-container iframe { width: 100%; height: 250px; }
#fundamentals #map-container p { text-align: right }

#fundamentals #main-content .summary-link { color: #9bafc4; text-align: right; cursor: pointer; }
#fundamentals #main-content .summary-link:hover { color: #8e4749; }

/*
==============================================
		Working In Partnership
==============================================
*/

/*
----------------------------------------------
		Main Content
----------------------------------------------
NOTE:	Lots of selectors due to keeping all 
		the content on one page...
*/
#working-in-partnership #main-content,
#working-in-partnership-1 #main-content,
#working-in-partnership-2 #main-content,
#working-in-partnership-3 #main-content,
#working-in-partnership-4 #main-content,
#working-in-partnership-5 #main-content,
#working-in-partnership-6 #main-content
{
	/*position: absolute;
	top: 3em;
	left: 0;
	z-index: -1;*/
	padding: 0;
	width: 1000px;
	height: 485px;
	background: transparent url(../images/wip-ring.jpg) no-repeat;
	color: #3f6075;
}

#working-in-partnership-1 #main-content { background-image: url(../images/wip-ring-1.jpg); }
#working-in-partnership-2 #main-content { background-image: url(../images/wip-ring-2.jpg); }
#working-in-partnership-3 #main-content { background-image: url(../images/wip-ring-3.jpg); }
#working-in-partnership-4 #main-content { background-image: url(../images/wip-ring-4.jpg); }
#working-in-partnership-5 #main-content { background-image: url(../images/wip-ring-5.jpg); }
#working-in-partnership-6 #main-content { background-image: url(../images/wip-ring-6.jpg); }

#working-in-partnership #main-content h2,
#working-in-partnership-1 #main-content h2,
#working-in-partnership-2 #main-content h2,
#working-in-partnership-3 #main-content h2,
#working-in-partnership-4 #main-content h2,
#working-in-partnership-5 #main-content h2,
#working-in-partnership-6 #main-content h2
	{ position: absolute; font-size: 1.25em; text-transform: none; }
	
#main-content h2#word-left-1 { top: 100px; left: 380px; }
#main-content h2#word-left-2 { top: 200px; left: 350px; }
#main-content h2#word-left-3 { top: 300px; left: 370px; }
#main-content h2#word-right-1 { top: 140px; left: 525px; }
#main-content h2#word-right-2 { top: 210px; left: 570px; }
#main-content h2#word-right-3 { top: 300px; left: 560px; }

#working-in-partnership-1 #main-content h2#word-left-1 { top: 95px; left: 230px; /* 85x200 */}
#working-in-partnership-2 #main-content h2#word-left-2 { top: 205px; left: 185px; /* left: 150 */ }
#working-in-partnership-3 #main-content h2#word-left-3 { top: 293px; left: 195px; /* 350x175 */ }
#working-in-partnership-4 #main-content h2#word-right-1 { top: 90px; left: 665px; /* 50x640 */ }
#working-in-partnership-5 #main-content h2#word-right-2 { top: 203px; left: 720px; /* left: 710 */ }
#working-in-partnership-6 #main-content h2#word-right-3 { top: 305px; left: 705px; /* 350x665 */ }

#main-content h2#word-left-1 a,
#main-content h2#word-left-2 a,
#main-content h2#word-left-3 a 
	{ color: #7796b2; }
#main-content h2#word-left-1 a:hover,
#main-content h2#word-left-2 a:hover,
#main-content h2#word-left-3 a:hover 
	{ color: #8e4749; }
	
#main-content h2#word-right-1 a,
#main-content h2#word-right-2 a,
#main-content h2#word-right-3 a 
	{ color: #8e4749; }
#main-content h2#word-right-1 a:hover, 
#main-content h2#word-right-2 a:hover, 
#main-content h2#word-right-3 a:hover 
	{ color: #9bafc4; }
	
/* #id content p position [w/ general properties set before] */
#main-content .movable-content { /*position: absolute; */ width: 280px; }
#working-in-partnership-1 #main-content .movable-content, 
#working-in-partnership-2 #main-content .movable-content,
#working-in-partnership-3 #main-content .movable-content
	{ float: right; margin-top: 60px; margin-right: 10px; }
#working-in-partnership-4 #main-content .movable-content,
#working-in-partnership-5 #main-content .movable-content,
#working-in-partnership-6 #main-content .movable-content
	{ float: left; margin-top: 10px; margin-left: 10px; }

#working-in-partnership-4 #main-content .movable-content h3,
#working-in-partnership-5 #main-content .movable-content h3,
#working-in-partnership-6 #main-content .movable-content h3
	{ color: #8e4749; }

#main-content .movable-content ul { list-style: disc outside; margin: 0 .5em 0 1.5em; }
#main-content .movable-content li { margin: 0; line-height: 1.25em; }
#main-content .movable-content li ul { font-size: inherit; list-style-type: circle; } /* Do not decrease size of nested lists */

#main-content p#help-text
{ 
	position: absolute; 
	bottom: 0; 
	left: 0;
	width: 100%; 
	text-align: center;
	letter-spacing: 1px;
}
/*
==============================================
		Financial Future
==============================================
*/

/*
----------------------------------------------
		Main Content
----------------------------------------------
*/
#financial-future #main-content
{
	float: left;
	margin: 0;
	padding: 0;
	width: 800px;
	color: #3f6075;
	overflow: hidden;
}

#financial-future #main-content li { line-height: 1.42em; }

#financial-future #main-content .col1,
#financial-future #main-content .col2,
#financial-future #main-content .col3,
#financial-future #main-content .col4
	{ float: left; width: 25%; }

#financial-future #main-content #header-row .col1 
	{ background: #9bafc4 url(../images/planning-ahead.png) no-repeat; }
#financial-future #main-content #header-row .col2 
	{ background: #ad8799 url(../images/tax-efficiency.png) no-repeat; }
#financial-future #main-content #header-row .col3 
	{ background: #96aa99 url(../images/investing.png) no-repeat; }
#financial-future #main-content #header-row .col4 
	{ background: #efb22d url(../images/ongoing.png) no-repeat;}

#financial-future #main-content #header-row h2 { font-size: 1em; font-weight: bold; }
#financial-future #main-content #header-row h2 a 
{ 
	padding-top: 100px; 
	/*text-decoration: none;*/
	color: white; 
	display: block; 
}

 #financial-future #main-content #footer-row { min-height: 350px; }

/* Make all columns full length - margin/padding cancels out, whilst #main-content uses overflow:hidden 
Still works now that we are using full width column? */
#financial-future #main-content #footer-row div { margin-bottom: -2000px; padding-bottom: 2000px; }
            
#financial-future #main-content #footer-row .col1,
#financial-future #main-content #footer-row .col2
	{ width: 290px }
	            
#financial-future #main-content .planning-ahead div,
#financial-future #main-content .planning-ahead h3
	{ background: #eaf0f0; color: #192b49; }
#financial-future #main-content .tax-efficiency div,
#financial-future #main-content tax-efficiency h3
	{ background: #efe7eb; color: #523667; }
#financial-future #main-content .investing div,
#financial-future #main-content .investing h3
	{ background: #f0f3f0; color: #355d4a; }
#financial-future #main-content .ongoing div, 
#financial-future #main-content .ongoing h3
	{ background: #fbf0d6; color: #5d3e2a; }

#financial-future #main-content #footer-row h3 { font-size: .875em; font-weight: bold; }
#financial-future #main-content #footer-row p { margin: .5em; }
#financial-future #main-content #footer-row ul { list-style: disc outside; margin: .5em; margin-left: 1.5em; }
#financial-future #main-content #footer-row li { margin: 0; }

#financial-future #main-content div.content-image { width: 200px; height: 100px; /*240px*/ /*position:relative;*/ /*padding-top: 50%;*/ }
#financial-future #main-content div.left { float: left; padding-right: 20px; }
#financial-future #main-content div.right { float: right; padding-left: 20px; }

#financial-future #main-content div.content-image img /*.left,
#financial-future #main-content #footer-row img.right*/
	{ /*margin: 0 auto;*/ position: absolute; top: 50%; /*margin-top: -50px;*/ }
	
#financial-future .ongoing .col2 { padding-top: 2.5em; }
#financial-future #main-content .ongoing div.content-image { padding-top: 16em; }

/*
==============================================
		You Talk We Listen page
==============================================
*/

#you-talk-we-listen h1 .first { margin-right: 5em; }

/*
----------------------------------------------
		Sidebars
----------------------------------------------
*/
#you-talk-we-listen #sidebar-left, #you-talk-we-listen #sidebar-right
{
	position: absolute; 
	top: 50%;
	margin-top: -75px;
	width: 210px;
	height: 210px;
	background: white;
}

#you-talk-we-listen #sidebar-left 
	{ left: 10px; background: transparent url(../images/sidebar-shadow.png) no-repeat 6px top; }
#you-talk-we-listen #sidebar-right 
	{ right: 10px; background: transparent url(../images/sidebar-shadow.png) no-repeat 6px top; }

#you-talk-we-listen #sidebar-left h2 { background: #3f6075; }
#you-talk-we-listen #sidebar-right h2 { background: #8e4749; }

/*#you-talk-we-listen #sidebar-left h2, #you-talk-we-listen #sidebar-right h2
{
	
	margin: 0;
	width: 200px;
	color: white;
	font-size: 1.125em; 
	line-height: 1.5em; 
	letter-spacing: 2px;
	text-align: center; 
	text-transform: uppercase;
}*/

/*#you-talk-we-listen #sidebar-left img, #you-talk-we-listen #sidebar-right img 
	{ float: left; }*/
/*
----------------------------------------------
		Main Content
----------------------------------------------
*/
#you-talk-we-listen #main-content 
{
	margin: 0 auto;
	padding: 10px;
	width: 480px;
	/*background: #eee;*/
	font-size: .875em;
	color: #8e4749;
}

#you-talk-we-listen #main-content dl { margin: 0; padding: 0; }
#you-talk-we-listen #main-content dt, #you-talk-we-listen #main-content dd 
{ 
	margin: 0; 
	padding: 5px 0; 
	border-top: 1px solid transparent; 
	position: relative; /* + */
	width: 220px; /* + */
	display: inline-table; /* + */
	vertical-align: text-top; /* + */
}
#you-talk-we-listen #main-content dt 
{ 
	/* - float: left;
	width: 230px;
	padding-right: 10px; */ 
	margin-right: 10px;
	text-align: right;
}
#you-talk-we-listen #main-content dd { padding-right: 10px; }

#you-talk-we-listen #main-content dt a { /*text-decoration: none;*/ color: #3f6075; display: block; }
#you-talk-we-listen #main-content dt a:hover { color: #8e4749; }