/*

STYLESHEET FOR SCREEN

CONTENTS ----------

	1.BODY
	2.UNIVERSAL STYLES
	3.LISTS
	4.SPANS
	5.PARAGRAPHS
	6.HEADINGS
	7.LINKS
	8.LAYOUT
	9.NAVIGATION
	10.FORMS
	11.TABLES
	
	---------------

	COLOUR REFERENCE
	
	#1a1c68 DARK BLUE
	#e4008c PINK
	#f09530 ORANGE
	#8fca48 GREEN
	#00b2ee CYAN
	#e4092d RED

	---------------
	
	FONT SIZES
	
	11px 0.916em
	12px 1em
	13px 1.083em
	14px 1.166em
	16px 1.333em
	18px 1.5em
	24px 2em

	---------------

*/

/*
1.BODY  ---------------------------------------------*/

	body {
		font-family: Helvetica, Arial, sans-serif;
		background-color: #8fca48;
		color: #888;
		font-size: 75%;
		line-height: 1.75;
		padding: 10px 0 30px; }


/*
2.UNIVERSAL STYLES  -----------------------------------------*/

	strong {
		font-weight: bold; }
		
	em {
		font-style: italic; }
		
	.clearfix:after {
	    content: ".";
	    display: block;
	    height: 0;
	    clear: both;
	    visibility: hidden; }

/*
3.LISTS  -----------------------------------------*/
		
	div.primary ul {
		font-size: 1.083em;
		list-style-position: outside;
		padding-left: 18px;
		margin-bottom: 20px; }
		
	div.primary ul li {
		margin-bottom: 3px; }
		
	div.primary ul.pink li, div.primary div.pink ul li { list-style-image: url(../images/interface/bullet_pink.gif); }
	div.primary ul.orange li, div.primary div.orange ul li { list-style-image: url(../images/interface/bullet_orange.gif); }
	div.primary ul.blue li, div.primary div.blue ul li { list-style-image: url(../images/interface/bullet_blue.gif); }
	div.primary ul.green li, div.primary div.green ul li { list-style-image: url(../images/interface/bullet_green.gif); }
	
	dl#links dt {
		padding-top: 5px;
		font-size: 1.083em; }
	
	dl#links dd {
		border-bottom: 1px dotted #ddd;
		padding-bottom: 5px; }
	
	dl#links dd.last {
		border-bottom: none; }

/*
4.SPANS  -----------------------------------------*/

	div#header span#welcome {
		display: block;
		font-size: 1.666em;
		line-height: 1.5;
		font-weight: normal;
		color: #00b2ee;
		padding: 0 290px 0 250px; }

/*
5.PARAGRAPHS  -----------------------------------------*/
		
	div#header p {
		font-size: 1.333em;
		line-height: 1.6875;
		font-weight: normal;
		padding: 0 290px 0 250px; }
		
	div.primary p {
		font-size: 1.083em;
		margin-bottom: 10px; }
		
	div.primary p.intro {
		font-size: 1.5em;
		margin-bottom: 20px; }
		
	div#pullquote p.quote {
		font-size: 2.166em;
		margin: 0 25px;
		line-height: 1.307; }
		
	div#pullquote p.author {
		font-size: 0.916em;
		margin-top: 8px; }
		
	div.primary div.news p.intro {
		font-size: 1.333em;
		margin-bottom: 10px; }
		
	div.primary div.news div.image p.caption {
		font-size: 1em;
		font-style: italic;
		border-bottom: 1px dotted #ddd;
		padding-bottom: 3px; }
		
	div.primary div.news p.date {
		font-size: 1em;
		text-transform: uppercase;
		margin-bottom: 20px;
		color: #ccc; }
		
	div#workshops a p {
		line-height: 1.25;
		text-decoration: none;
		color: #fff;
		margin: 0;
		border-bottom: none; }
		
	div#workshops a:hover p {
		color: #888; }
		
	div#workshops a p.more {
		position: absolute;
		bottom: 5px;
		right: 0; }
		
	p.pagination {
		text-align: right;
		border-top: 3px solid #eee;
		padding-top: 20px; }
		
/*
6.HEADINGS  -----------------------------------------*/

	h1 {
		width: 160px;
		height: 78px;
		margin: 0 80px 0 10px;
		float: left;
		background: transparent url(../images/interface/bpcn_logo.png) left top no-repeat;
		text-indent: -9999px; }
		
	h2 {
		font-size: 1.666em;
		line-height: 1.2;
		font-weight: normal;
		border-bottom: 1px dotted #ddd;
		margin-bottom: 10px; }
	
	div#workshops h2 {
		font-size: 1.333em;
		color: #fff;
		padding: 10px 15px 0;
		margin-bottom: 5px;
		border-bottom: none; }
	
	div#workshops.pink h2 { background: #e4008c url(../images/interface/workshops_top_pink.png) top left no-repeat; }
	div#workshops.blue h2 { background: #00b2ee url(../images/interface/workshops_top_blue.png) top left no-repeat; }
	div#workshops.green h2 { background: #8fca48 url(../images/interface/workshops_top_green.png) top left no-repeat; }
	div#workshops.orange h2 { background: #f09530 url(../images/interface/workshops_top_orange.png) top left no-repeat; }
		
	div.primary div.news h3 {
		font-size: 1.5em;
		line-height: 1.5;
		margin-bottom: 10px;
		border-bottom: 1px dotted #ddd; }
		
	h2.pink, h3.pink, div.pink h3, div.news.pink h2 { color: #e4008c; }
	h2.blue, h3.blue, div.blue h3, div.news.blue h2 { color: #00b2ee; }
	h2.green, h3.green, div.green h3, div.news.green h2 { color: #8fca48; }
	h2.orange, h3.orange, div.orange h3, div.news.orange h2 { color: #f09530; }
		
	h3 {
		font-size: 1.166em;
		font-weight: normal;
		margin-top: 20px; }
		
	div.primary .newsletters h3 {
		font-size: 1.5em;
		line-height: 1.5;
		margin: 0 0 10px;
		border-bottom: 1px dotted #ddd;
		color: #f09530; }
		
	div.primary div.profile h3 {
		color: #e4008c;
		margin: 10px 0 0; }
		
	div.primary div.profile h4 {
		font-size: 1em;
		line-height: 1.5;
		font-weight: normal;
		margin-bottom: 20px; }

/*
7.LINKS  --------------------------------------------*/
	
	a {
		color: #f09530; }
	
	a:visited {
		color: #aaa; }
		
	a:hover, a:active {
		color: #8fca48; }

	div#header a#newsletter {
		display: block;
		position: absolute;
		top: 45px;
		right: 10px;
		width: 152px;
		height: 48px;
		background: transparent url(../images/interface/newsletter_button_sprite.png) left top no-repeat;
		text-indent: -9999px; }
		
	p.pagination a {
		margin: 0 0 0 5px; }

	div#header a#newsletter:hover, div#header a#newsletter:active {
		background-position: left -50px; }
		
	div#content .primary .newsletters a {
		background: transparent url(../images/interface/pdf_icon.gif) left 2px no-repeat;
		display: block;
		margin: 0 0 8px 0;
		padding-left: 24px; }
	
	dl#links dt a {
		text-decoration: none; }
		
	div#workshops a {
		position: relative;
		text-decoration: none;
		display: block;
		margin: 0 15px;
		padding: 5px 0;
		border-bottom: 1px dotted #fff; }
		
	div#footer_bottom .sidebar a {
		color: #fff;
		margin-right: 15px; }
		
	div#footer_bottom .sidebar a:visited {
		color: #333; }
		
	div#footer_bottom .sidebar a:hover, div#footer_bottom .sidebar a:active {
		color: #e4008c; }
		
	div#footer_top .primary a {
		display: block;
		float: left;
		margin: 0 10px 0 0;
		text-indent: -9999px; }
		
	div#footer_top .primary a.council {
		width: 118px;
		height: 57px;
		background: transparent url(../images/interface/birmingham_council_logo_sprite.png) left top no-repeat; }
		
	div#footer_top .primary a.lottery {
		width: 63px;
		height: 57px;
		background: transparent url(../images/interface/lottery_funded_logo_sprite.png) left top no-repeat; }
		
	div#footer_top .primary a.coventry {
		width: 74px;
		height: 57px;
		background: transparent url(../images/interface/coventry_logo_sprite.png) left top no-repeat; }
		
	div#footer_top .primary a.play {
		width: 71px;
		height: 57px;
		background: transparent url(../images/interface/play_in_parks_logo_sprite.png) left top no-repeat; }
		
	div#footer_top .primary a.dudley {
		width: 71px;
		height: 57px;
		background: transparent url(../images/interface/dudley_logo_sprite.png) left top no-repeat; }
		
	div#footer_top .primary a.csec {
		width: 49px;
		height: 57px;
		background: transparent url(../images/interface/csec_logo_sprite.png) left top no-repeat; }
		
	div#footer_top .primary a.ladywood {
		width: 117px;
		height: 57px;
		background: transparent url(../images/interface/ladywood_logo_sprite.png) left top no-repeat; }
		
	div#footer_top .primary a.be {
		width: 47px;
		height: 57px;
		background: transparent url(../images/interface/birmingham_logo_sprite.png) left top no-repeat; }
		
	div#footer_top .primary a:hover, div#footer_top .primary a:active {
		background-position: left -63px; }

/*
8.LAYOUT  -------------------------------------------*/

	div#container {
		background-color: #fff; }
		
	div#page_wrapper {
		width: 960px;
		margin: 0 auto; }
		
	div#header {
		position: relative;
		padding: 30px 0 10px;
		background: transparent url(../images/interface/dotted_horizontal_rule.gif) 10px bottom no-repeat; }
		
	div.sidebar {
		width: 180px;
		float: left; }
		
	div.primary {
		margin: 20px 10px 0 250px;
		padding-bottom: 30px; }

	div.primary #hero {
		padding-bottom: 1px;
		margin-bottom: 30px;
		border-bottom-width: 10px;
		border-bottom-style: solid;
		border-bottom-color: #00b2ee; }

	div.primary #hero.blue {
		border-bottom-color: #00b2ee; }

	div.primary #hero.green {
		border-bottom-color: #8fca48; }

	div.primary #hero.pink {
		border-bottom-color: #e4008c; }

	div.primary #hero.orange {
		border-bottom-color: #f09530; }

	div.primary #hero img {
		display: block; }
		
	div.primary div.news_container {
		width: 460px; }
		
	div.primary div.newsletters {
		float: right;
		width: 160px; }
		
	div.primary div.news {
		margin-bottom: 20px;
		padding-top: 20px; }
		
	div.primary div.news.first {
		border-top: none;
		padding-top: 0; }
		
	div.primary div.news div.image {
		margin: 5px 0 10px; }
		
	div.primary div.profile {
		float: left;
		margin-right: 20px;
		width: 160px; }
		
	div.primary div.profile.last {
		margin-right: 0; }
		
	div.primary div.profile.last.bottom {
		margin-bottom: 30px; }
		
	div.primary div.profile div.image_holder {
		width: 160px;
		height: 190px;
		background-color: #fff;
		border: 1px solid #ddd; }
		
	div.primary div.profile div.image_holder img {
		display: block;
		border: 9px solid #fff; }
		
	div#pullquote {
		float: right;
		width: 220px;
		height: 220px;
		color: #fff;
		text-align: center;
		padding-top: 35px;
		margin: 0 0 20px 20px;
		background-repeat: no-repeat;
		background-position: left top; }
		
	div.pullquote_orange { background-image: url(../images/interface/pullquote_circle_orange.png); }
	div.pullquote_green { background-image: url(../images/interface/pullquote_circle_green.png); }
	div.pullquote_pink { background-image: url(../images/interface/pullquote_circle_pink.png); }
	div.pullquote_blue { background-image: url(../images/interface/pullquote_circle_blue.png); }
	
	div#workshops {
		float: right;
		width: 220px;
		margin: 0 0 20px 20px;
		padding-bottom: 20px; }
	
	div#workshops.pink {
		background-color: #e4008c;
		background: #e4008c url(../images/interface/workshops_bottom_pink.png) bottom left no-repeat; }
		
	div#workshops.blue {
		background-color: #00b2ee;
		background: #00b2ee url(../images/interface/workshops_bottom_blue.png) bottom left no-repeat; }
		
	div#workshops.green {
		background-color: #8fca48;
		background: #8fca48 url(../images/interface/workshops_bottom_green.png) bottom left no-repeat; }
		
	div#workshops.orange {
		background-color: #f09530;
		background: #f09530 url(../images/interface/workshops_bottom_orange.png) bottom left no-repeat; }
		
	div#footer {
		clear: both; }
		
	div#footer .inner {
		font-size: 0.916em;
		line-height: 1.5;
		width: 960px;
		margin: 0 auto; }
		
	div#footer_top .inner {
		background: #fff url(../images/interface/dotted_horizontal_rule.gif) 10px top repeat-x;
		padding: 15px 0; }
		
	div#footer .sidebar {
		width: 230px; }
		
	div#footer_bottom {
		color: #fff;
		clear: both;
		background-color: #8fca48;
		padding-top: 15px; }
		
	div#footer .primary {
		margin-top: 0; }
		
/*
9.NAVIGATION  -------------------------------------------*/

	ul#nav {
		margin-left: 10px;
		background: transparent url(../images/interface/nav_pink_bottom.gif) left bottom no-repeat;
		padding-bottom: 5px; }

	ul#nav a, ul#nav a:visited {
		font-size: 1.166em;
		line-height: 1.5;
		display: block;
		text-decoration: none;
		color: #666;
		background-color: #eee;
		margin: 0 10px 1px 0;
		padding: 4px 10px 1px; }

	ul#nav a:hover, ul#nav a:active, ul#nav li.current a {
		color: #fff;
		background: #999 url(../images/interface/nav_arrow_head_grey_999.gif) right 50% no-repeat;
		margin-right: 0;
		padding-right: 20px; }

	ul#nav li#quality a:hover, ul#nav li#quality a:active, ul#nav li#quality.current a {
		background-color: #00b2ee;
		background-image: url(../images/interface/nav_arrow_head_blue.gif); }

	ul#nav li#advocacy a:hover, ul#nav li#advocacy a:active, ul#nav li#advocacy.current a {
		background-color: #8fca48;
		background-image: url(../images/interface/nav_arrow_head_green.gif); }

	ul#nav li#workforce_dev a:hover, ul#nav li#workforce_dev a:active, ul#nav li#workforce_dev.current a {
		background-color: #f09530;
		background-image: url(../images/interface/nav_arrow_head_orange.gif); }

	ul#nav li#information a:hover, ul#nav li#information a:active, ul#nav li#information.current a {
		background-color: #e4008c;
		background-image: url(../images/interface/nav_arrow_head_pink.gif); }
		
	ul#nav ul.sub li a {
		font-size: 1em;
		color: #888;
		padding-left: 20px; }
		
	ul#nav ul.sub li.current a, ul#nav ul.sub a:active, ul#nav ul.sub a:hover {
		color: #fff;
		background-color: #e4008c; }
		
	ul#nav a.sub, ul#nav a.sub:visited {
		background: #eee url(../images/interface/nav_sub_arrow_closed_sprite.gif) right 10px no-repeat; }
		
	ul#nav a.sub:hover, ul#nav a.sub:active {
		color: #fff;
		background: #999 url(../images/interface/nav_sub_arrow_closed_sprite.gif) right -17px no-repeat;
		padding-right: 10px;
		margin-right: 10px; }
		
	ul#nav a.sub.open, ul#nav a.sub.open:visited {
		background: #eee url(../images/interface/nav_sub_arrow_open_sprite.gif) right 10px no-repeat; }
		
	ul#nav a.sub.open:hover, ul#nav a.sub.open:active {
		color: #e4008c;
		background: #eee url(../images/interface/nav_sub_arrow_open_sprite.gif) right -17px no-repeat; }

/*
10.FORMS  -------------------------------------------*/

	form#contact {
		width: 700px;
		clear: both;
		border-top: 1px dotted #ddd;
		padding: 20px 0 0; }

	form#contact div.column_one {
		float: left;
		width: 340px;
		margin-right: 20px; }

	form#contact div.column_two {
		float: left;
		width: 340px; }

	form#contact label {
		color: #e4008c;
		text-transform: uppercase; }

	form#contact input, form#contact textarea {
		font-family: Helvetica, Arial, sans-serif;
		font-weight: normal;
		width: 330px;
		margin-bottom: 10px;
		color: #888;
		border: 1px solid #ddd;
		padding: 5px; }

	form#contact input, form#contact textarea {
		font-size: 1.083em; }

	form#contact input:focus, form#contact textarea:focus {
		border: 1px solid #e4008c;
		background-color: #efefef; }

	form#contact input.submit {
		float: right;
		line-height: 1;
		width: 160px;
		margin-top: 10px;
		padding: 5px 5px 3px;
		background-color: #efefef; }

	form#contact input.submit:hover, form#contact input.submit:active, form#contact input.submit:focus {
		border: 1px solid #e4008c;
		color: #e4008c; }

/*
11.TABLES  -------------------------------------------*/