

/* =========================================================================

	master.css
	
	This CSS file is the default screen layout stylesheet for the web site.
	
	Index:
	
	- foundations
	- main navigation
	- broad layout containers
	- header
	- content layout containers
	- sub navigation outer container
	- promo boxes witin sub navigation
	- sub navigation menu
	- home page panels
	- content headings
	- content text hyperlinks
	- special hyperlinks
	- regular content
	- footer

   ========================================================================= */


/* FOUNDATIONS
   ------------------------------------------------------------------------- */


	html {
		min-width: 960px;
		color: #505050;
		background: #F0EFEB url(../layout-images/main-header-bg.jpg) top center no-repeat;
	}
	body {
	}


/* MAIN NAVIGATION
   ------------------------------------------------------------------------- */


	#navigationContainer {
		width: 960px;
		margin: 22px auto 0px auto;
	}
	#navigationContainer ul {
		list-style: none;
		height: 40px;
		text-align: center;
	}
	#navigationContainer ul li {
		float: left;
		height: 40px;
	}

	/* navigation links */

	#navigationContainer ul li a,
	#navigationContainer ul li a:link,
	#navigationContainer ul li a:visited {
		background-image: url(../layout-images/nav_items_sprite.jpg);
		background-repeat: no-repeat;
		display: block;
		color: #fff;
		border: 0;
		text-decoration: none;
		height: 40px;
	}
	#navigationContainer ul li a:hover,
	#navigationContainer ul li a:active {
		color: #ff3;
		border: 0;
		text-decoration: underline;
	}

	/* navigation items */

	#navigationContainer ul li#skip {
		display: none;
	}
	#navigationContainer ul li#home a {
		width: 104px;
		background-position: 0px 0px;
	}
		#navigationContainer ul li#home a:hover {
			background-position: 0px -40px;
		}
		#navigationContainer ul li#home a:active,
		#navigationContainer ul li#home.active a {
			background-position: 0px -80px;
		}

	#navigationContainer ul li#about a {
		width: 126px;
		background-position: -104px 0px;
	}
		#navigationContainer ul li#about a:hover {
			background-position: -104px -40px;
		}
		#navigationContainer ul li#about a:active,
		#navigationContainer ul li#about.active a {
			background-position: -104px -80px;
		}

	#navigationContainer ul li#news a {
		width: 170px;
		background-position: -230px 0px;
	}
		#navigationContainer ul li#news a:hover {
			background-position: -230px -40px;
		}
		#navigationContainer ul li#news a:active,
		#navigationContainer ul li#news.active a {
			background-position: -230px -80px;
		}

	#navigationContainer ul li#living a {
		width: 238px;
		background-position: -400px 0px;
	}
		#navigationContainer ul li#living a:hover {
			background-position: -400px -40px;
		}
		#navigationContainer ul li#living a:active,
		#navigationContainer ul li#living.active a {
			background-position: -400px -80px;
		}

	#navigationContainer ul li#supporting a {
		width: 168px;
		background-position: -638px 0px;
	}
		#navigationContainer ul li#supporting a:hover {
			background-position: -638px -40px;
		}
		#navigationContainer ul li#supporting a:active,
		#navigationContainer ul li#supporting.active a {
			background-position: -638px -80px;
		}

	#navigationContainer ul li#resources a {
		width: 154px;
		background-position: -806px 0px;
	}
		#navigationContainer ul li#resources a:hover {
			background-position: -806px -40px;
		}
		#navigationContainer ul li#resources a:active,
		#navigationContainer ul li#resources.active a {
			background-position: -806px -80px;
		}

	#navigationContainer ul li a span {
		display: none;
	}


/* BROAD LAYOUT CONTAINERS
   ------------------------------------------------------------------------- */


	#comfortZoneContainer {
		width: auto;
	}
	#comfortZone {
		width: 960px;
		margin: auto;
	}


/* HEADER
   ------------------------------------------------------------------------- */


	#header {
		height: 212px;
	}

		#header h1 a {
			background: url(../layout-images/cpa_logo.png) no-repeat;
			display: block;
			width: 205px;
			height: 78px;
			border: 0;
			margin-top: 47px;
			margin-left: 28px;
		}
		#header h1 a span {
			display: none;
		}

		#header blockquote {
			position: relative;
			left: 583px;
			top: -78px;
			display: inline-block;
			width: 312px;
			height: 115px;
			background: url(../layout-images/cpa_header-pullout.png) no-repeat;
		}
		#header blockquote span {
			display: none;
		}


/* CONTENT LAYOUT CONTAINERS
   ------------------------------------------------------------------------- */


	#contentContainer {
		/* used for negative top margin of #subNavigationContainer. */
		margin-top: -47px;
	}

	#subNavigationContainer {
		float: left;
		min-height: 781px;
		background: url(../layout-images/sub-navigation-container-bg.jpg) no-repeat;
		margin-left: -14px;
		margin-top: -31px;
		padding-left: 34px;
		padding-right: 34px;
		width: 259px;
	}

	#airLock {
		margin: 30px 0 0 318px;
		width: auto;
	}
	#content {
		background: #fff;
		padding: 30px;
		margin-right: 22px;
	}


/* SUB NAVIGATION OUTER CONTAINER
   ------------------------------------------------------------------------- */


	#subNavigationPlaceholder {
		/* Adjustment container so that the content gets shifted up by the
		   number of pixels that the container graphic has within the header
		   graphic. */
		margin-top: -31px;
	}


/* PROMO BOXES WITHIN (ABOVE) SUB NAVIGATION
   ------------------------------------------------------------------------- */


	.promoContainer {
		color: #6e6e6e;
	}
		.promoContainer h3 {
			color: #979282;
			background: #E2E1DF;
			height: 40px;
		}
		.promoContainer h3 span {
			display: none;
		}
		.promoContainer .promo {
			padding: 19px;
			background: #fff;
		}
		.promoContainer .promo h4 {
			margin-top: 1em;
			color: #979282;
		}
		.promoContainer .promo h4.first {
			margin-top: 0;
		}
		.promoContainer .promo h4 a,
		.promoContainer .promo h4 a:link,
		.promoContainer .promo h4 a:visited {
			color: #979282;
			text-decoration: none;
		}
		.promoContainer .promo h4 a:hover,
		.promoContainer .promo h4 a:active {
			text-decoration: underline;
		}
		.promoContainer .promo p.first {
			margin-top: 0;
		}
		.promoContainer .promo p {
			margin-top: 1em;
		}
		.promoContainer .promo p a,
		.promoContainer .promo p a:link,
		.promoContainer .promo p a:visited {
			color: #979282;
			text-decoration: underline;
		}
		.promoContainer .promo p a:hover,
		.promoContainer .promo p a:active {
			text-decoration: underline;
		}
		.promoContainer .promo ul {
			margin-top: 1em;
			margin-left: 2em;
		}

	#upcomingEvents {
	}
		#upcomingEvents h3 {
			background: url(../layout-images/promo-box-headings-text-sprite.gif) 0px 0px no-repeat;
		}
		#upcomingEvents .promo {
			min-height: 105px;
			background: #fff url(../layout-images/upcoming-events-background.jpg) bottom right no-repeat;
			padding-right: 72px;
		}

	#supportCPA {
	}
		#supportCPA h3 {
			background: url(../layout-images/promo-box-headings-text-sprite.gif) 0px -42px no-repeat;
		}

	#telephoneSupport {
	}
		#telephoneSupport h3 {
			background: url(../layout-images/promo-box-headings-text-sprite.gif) 0px -80px no-repeat;
		}
		.phone {
			color: #ff7900;
			display: block;
			margin-bottom: 1em;
		}
		.phoneLabel {
			display: none;
		}
		#telephoneSupport .promo {
			min-height: 138px;
			background: #fff url(../layout-images/telephone-support-background.jpg) bottom right no-repeat;
			padding-right: 100px;
		}

	#researchCentre {
	}
		#researchCentre h3 {
			background: url(../layout-images/promo-box-headings-text-sprite.gif) 0px -122px no-repeat;
		}
		#researchCentre .promo {
			min-height: 160px;
			background: #fff url(../layout-images/research-centre-background.jpg) 175px bottom no-repeat;
			padding-right: 50px;
		}


/* SUB NAVIGATION MENU
   ------------------------------------------------------------------------- */


	#subNavigation {
		list-style: none;
	}

	#subNavigation li {
		border-top: 1px solid #ebe9e6;
		border-bottom: 1px solid #c3beb3;
		background: #d5d2cd;
	}
		#subNavigation li.isAccordionParent {
			background-image: url(../layout-images/accordion-parent-arrow-e.gif);
			background-repeat: no-repeat;
			background-position: 240px 10px;
		}
		#subNavigation li.selected {
			background-image: url(../layout-images/accordion-parent-arrow-s.gif) !important;
			background-repeat: no-repeat;
			background-position: 240px 10px;
		}

	#subNavigation li a {
		color: #8a8475;
		text-decoration: none;
		padding-left: 1.5em;
		display: block;
	}

		/* sub navigation sub menus */

		#subNavigation li ul {
			list-style: none;
		}
		#subNavigation li ul li {
			background: #e9e7e3;
		}
		#subNavigation li ul li.last {
			border-bottom: none; /* otherwise it looks like the border is
			                        twice the thickness because of the
			                        adjacent border of the parent li */
		}
		#subNavigation li ul li a:hover {
			background: #dedad4;
		}


/* HOME PAGE PANELS (sits between the #airLock and the #content)
   ------------------------------------------------------------------------- */

	#homePanels {
		margin-bottom: 4em;
		height: 465px;
	}
	#homePanels dt {
		margin: 1em 0;
		display: none; /* we don't actually want the dt on screen. */
	}
	#homePanels dd {
		float: left;
		width: 152px;
		min-height: 275px;
		padding: 190px 20px 20px 20px;
		margin-right: 22px;
	}
		#homePanels dd.firstPanel {
			background: #fff url(../layout-images/i-have-chronic-pain.jpg) no-repeat;
		}
		#homePanels dd.secondPanel {
			background: #fff url(../layout-images/i-know-someone-with-chronic-pain.jpg) no-repeat;
		}
		#homePanels dd.thirdPanel {
			background: #fff url(../layout-images/health-professionals.jpg) no-repeat;
		}
		#homePanels dd p {
			margin-bottom: 1em;
		}
		#homePanels dd .more {
			/*position: relative;
			top: 196px;*/
		}


/* CONTENT HEADINGS
   ------------------------------------------------------------------------- */


	#content h2 {
		display: none;
	}

	#content h3 {
		color: #ff7900;
		margin-bottom: 1.5em;
	}

	#content h4 {
		color: #ff7900;
		margin-bottom: 1.5em;
	}

	#content .newsItem h4 {
		color: #979282;
		background: url(../layout-images/news-item-title-icon.gif) left no-repeat;
		padding-left: 19px;
		margin-bottom: 0;
	}


/* CONTENT TEXT HYPERLINKS
   ------------------------------------------------------------------------- */


	#content a,
	#content a:link,
	#content a:visited {
		color: #505050;
		text-decoration: underline;
	}
	#content a:hover,
	#content a:active {
		color: #ff7900;
		text-decoration: underline;
	}


/* SPECIAL HYPERLINKS
   ------------------------------------------------------------------------- */


	#content .newsItem a,
	#content .newsItem a:link,
	#content .newsItem a:visited {
		color: #979282;
		text-decoration: none;
	}
	#content .newsItem a:hover,
	#content .newsItem a:active {
		color: #979282;
		text-decoration: underline;
	}
	#content .newsItem p a,
	#content .newsItem p a:link,
	#content .newsItem p a:visited,
	#content .newsItem p a:hover,
	#content .newsItem p a:active {
		text-decoration: underline;
	}

	a.more {
		display: block;
		width: 56px;
		height: 16px;
		margin: 5px 5px 5px 0px;
	}
	a.more, a.more:link, a.more:visited {
		background: url(../layout-images/more.gif) 0px 0px no-repeat;
		text-decoration: none;
	}
	a.more:active, a.more:hover {
		background: url(../layout-images/more.gif) 0px -17px no-repeat;
		text-decoration: none;
	}
	a.more span {
		display: none;
	}


/* REGULAR CONTENT
   ------------------------------------------------------------------------- */


	#content p.intro {
		color: #b4b4b4;
	}
	#content p {
		margin-bottom: 1.5em;
	}
	#content p em {
		color:  #b4b4b4;
	}

	#content ul, #content ol {
		margin-left: 1em;
		padding-left: 1em;
	}
	#content ul li, #content ol li {
	}
	
	#content table th {
		text-align: left;
	}

	#content .infoSpot {
		margin: 2em 0em 1em 0em;
		padding: 17px;
		background: #FF9F2F url(../layout-images/info-bg-repeat.gif) bottom repeat-x;
	}
	#content .infoSpot h5,
	#content .infoSpot p {
		color: #fff;
		margin-bottom: 0;
	}

	.newsItem {
		border-bottom: 1px dashed #f0f0ef;
		margin-bottom: 1em;
	}

/* FOOTER
   ------------------------------------------------------------------------- */


	#clear {
		clear: both; /* clear property on #footer not working */
	}


	#footer {
		color: #fff;
		background: url(../layout-images/footer-bg-repeat.gif) repeat-x;
		text-align: center;
		margin-top: 4em;
	}

	#footer ul {
		list-style: none;
		text-align: center;
	}
	#footer ul li {
		display: inline;
		padding-left:18px;
		padding-right:14px;
		background: url(../layout-images/footer-item-seperator.gif) 0px 3px no-repeat;
	}
	#footer ul li#top {
		display: none;
	}
	#footer ul li.copyright {
		background: none;
	}
	#footer ul li abbr {
		border: 0;
	}
	#footer ul li a,
	#footer ul li a:link,
	#footer ul li a:visited {
		color: #fff;
		text-decoration: underline;
	}
	#footer ul li a:hover,
	#footer ul li a:active {
		color: #f1e825;
		text-decoration: underline;
	}

