/*  
Title: Jonathan Penny Web Design and Development
Site Url: www.jonathanpenny.co.uk
Description: CSS for Jonathan Penny Web Design and Development website
Version: 5.0
Design: Jonathan Penny
Designer email: jonathan@jonathanpenny.co.uk
*/

* {
	margin: 0;
	padding: 0;
	border: 0;
}

html, body {
	height: 100%;
}

body {
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
	line-height: 100%;
	background: #231f20 url(../images/background.png) 0 0 no-repeat;
}

a {
	color: #333;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

p.italic {
	font-style: italic;
}

#wrapper {
	min-height: 100%;
	margin: 0 auto -123px auto;
	width: 980px;
}

h1 {
	height: 0;
	overflow: hidden;
}

h2, h3 {
	line-height: 1.1em;
}

/*
Header
*/

#top {
	background: #fff url(../images/decoration.jpg) top right no-repeat;
	height: 199px;
	overflow: hidden;
}

.quickexit {
	margin-top: 20px;
	padding-top: 50px;
	width: 186px;
	height: 0;
	display: block;
	overflow: hidden;
	background: url(../images/quickexit.gif) 0 0 no-repeat;
}

#top p {
	margin-bottom: 16px;
	margin-left: 50px;
	width: 380px;
	font-size: 0.7em;
	line-height: 1.3em;
}

#top p.largefont {
	font-size: 0.9em;
}

#top p.topintro {
	margin: 0;
	padding-top: 132px;
	width: 489px;
	height: 0;
	diaply: block;
	background: url(../images/topintro.gif) 0 0 no-repeat;
}

/*
Homepage Styles
*/

#homepage_main {
	margin-bottom: 40px;
	height: 100%;
	overflow: hidden;
	background: #000;
}

#homepage_main #nav {
	float: left;
	width: 655px;
}

#homepage_main #nav .navitem {
	width: 655px;
}

#homepage_main #nav .navitem a {
	margin: 0;
	padding-top: 170px;
	height: 0;
	display: block;
	overflow: hidden;
}

#homepage_main #nav .navitem a:hover {
	background-position: 0 -170px;
}

#homepage_main #nav a.victimslink {
	background: #4da63c url(../images/victims.gif) 0 0 no-repeat;
}

#homepage_main #nav a.childrenslink {
	background: #f5af00 url(../images/children.gif) 0 0 no-repeat;
}

#homepage_main #nav a.responsiblelink {
	background: #0d9ac5 url(../images/responsible.gif) 0 0 no-repeat;
}

#homepage_main #info {
	padding: 80px 30px 20px 30px;
	float: right;
	width: 265px;
	color: #fff;
}

#homepage_main #info p {
	margin-bottom: 20px;
	font-size: 0.7em;
	line-height: 1.5em;
	color: #fff;
}

#homepage_main #info a {
	color: #fff;
}

/*
Crumbtrail
*/

#crumb {
	margin-top: 100px;
	margin-left: 50px;
	font-size: 0.7em;
	color: #B3B3B3;
	height: 100%;
	overflow: hidden;
}

#crumb a {
	color: #B3B3B3;
}

#crumb a:hover {
	text-decoration: underline;
}

#crumb ul {
	height: 100%;
	overflow: hidden;
}

#crumb ul li {
	margin-right: 5px;
	padding-right: 15px;
	display: block;
	float: left;
	background: url(../images/crumb_arrow.gif) right 70% no-repeat;
}

#crumb ul li.current {
	margin: 0;
	padding: 0;
	background: none;
	color: #808080;
}

/*
Main Section
*/

#main {
	margin-bottom: 40px;
	height: 100%;
	overflow: hidden;
	background: #E6E6E6;
}

.intro {
	padding: 20px 50px 10px 50px;
}

.intro a {
	color: #fff;
	text-decoration: underline;
}

.intro h3 {
	margin-bottom: 10px;
	font-weight: normal;
	font-size: 1.1em;
	color: #fff;
}

.intro ul li {
	margin-bottom: 10px;
	list-style-type: none;
	color: #fff;
	font-size: 0.9em;
}

.intro p {
	margin-bottom: 10px;
	width: 390px;
	color: #fff;
	font-size: 0.7em;
	line-height: 1.5em;
}

/*
Content
*/

#content {
	padding: 20px 50px;
	width: 700px;
	height: 100%;
	overflow: hidden;
	clear: both;
}

#content h2 {
	margin: 0 0 20px 0;
	color: #0D9AC5;
	font-weight: normal;
}

#content h3, #content h4 {
	margin-bottom: 10px;
	font-weight: normal;
	font-size: 1em;
}

#content p {
	margin-bottom: 10px;
	font-size: 0.7em;
	line-height: 1.5em;
}

#content ul.content {
	margin-bottom: 20px;
	font-size: 0.7em;
	line-height: 1.5em;
}

#content ul.content li {
	list-style-position: inside;
}

.contact_details {
	margin-top: 25px;
	font-size: 0.7em;
	font-weight: bold;
	line-height: 1.5em;
}

#content .contact_details p {
	font-size: 100%;
}

ul.table {
	margin: 10px 0;
	border-bottom: 1px solid #999;
	height: 100%;
	overflow: hidden;
	width: 700px;
}

ul.table li {
	padding-bottom: 5px;
	list-style-type: none;
	float: left;
}

ul.table li.first {
	width: 300px;
}

ul.table li a {
	font-weight: normal;
}

/*
Victims Page
*/

h2.victims_header {
	padding-top: 170px;
	height: 0;
	background: #4da63c url(../images/victims_header.gif) 0 0 no-repeat;
	overflow: hidden;
	line-height: 100%;
}

.victims_intro {
	background: #3d942e url(../images/victims_intro_back.gif) 0 0 repeat-x;
}

/*
Children Page
*/

h2.children_header {
	padding-top: 170px;
	height: 0;
	background: #f5af00 url(../images/children_header.gif) 0 0 no-repeat;
	overflow: hidden;
	line-height: 100%;
}

.children_intro {
	background: #f29e00 url(../images/children_intro_back.gif) 0 0 repeat-x;
}

/*
Responsible page
*/

h2.responsible_header {
	padding-top: 170px;
	height: 0;
	background: #0D9AC5 url(../images/responsible_header.gif) 0 0 no-repeat;
	overflow: hidden;
	line-height: 100%;
}

.responsible_intro {
	float: left;
	width: 554px;
	height: 180px;
	background: #077bae;
	overflow: hidden;
}

.responsible_nav {
	padding-bottom: 42px;
	float: right;
	width: 326px;
	overflow: hidden;
	background: url(../images/responsibel_nav_back.gif) 0 0 repeat-y;
}

.responsible_nav ul li {
	list-style-type: none;
}

.responsible_nav ul li a {
	padding: 13px 30px;
	display: block;
	height: 100%;
	background: url(../images/responsibel_nav_back.gif) 0 0 no-repeat;
	color: #fff;
	font-size: 0.7em;
}

.responsible_nav ul li a:hover, .responsible_nav ul li a.selected {
	text-decoration: none;
	background: #000;
}

/*
Behaviour Page
*/

#behaviour {
	padding: 20px 50px 0 50px;
	clear: both;
}

ul.behaviour_nav {
	height: 100%;
	overflow: hidden;
	font-size: 1em;
	line-height: 1.5em;
	font-weight: bold;
}

ul.behaviour_nav li {
	margin: 0 10px 10px 0;
	list-style-type: none;
	list-style-position: outside!important;
	float: left;
	width: 166px;
	height: 100px;
}

ul.behaviour_nav li a {
	padding: 10px;
	background: #0d9ac5 url(../images/behaviour_nav_back.gif) 10% 85% no-repeat;
	color: #fff;
	display: block;
	height: 80px;
}

ul.behaviour_nav li a:hover, ul.behaviour_nav li a.selected {
	text-decoration: none;
	background: #000 url(../images/behaviour_nav_back_hover.gif) 10% 85% no-repeat;
}

/*
Children Suffer Page
*/

#childrensuffer {
	padding: 20px 50px 0 50px;
	clear: both;
}

ul.childrensuffer_nav {
	height: 100%;
	overflow: hidden;
	font-size: 1em;
	line-height: 1.5em;
	font-weight: bold;
}

ul.childrensuffer_nav li {
	margin: 0 10px 10px 0;
	list-style-type: none;
	list-style-position: outside!important;
	float: left;
	width: 210px;
	height: 100px;
}

ul.childrensuffer_nav li a {
	padding: 10px;
	background: #0d9ac5 url(../images/behaviour_nav_back.gif) 5% 85% no-repeat;
	color: #fff;
	display: block;
	height: 80px;
}

ul.childrensuffer_nav li a:hover, ul.childrensuffer_nav li a.selected {
	text-decoration: none;
	background: #000 url(../images/behaviour_nav_back_hover.gif) 5% 85% no-repeat;
}

/*
Feedback Page
*/

h2.feedback_header {
	padding-top: 170px;
	height: 0;
	background: #808080 url(../images/feedback_header.gif) 0 0 no-repeat;
	overflow: hidden;
	line-height: 100%;
}

/*
Accessibility Page
*/

h2.accessibility_header {
	padding-top: 170px;
	height: 0;
	background: #808080 url(../images/accessibility_header.gif) 0 0 no-repeat;
	overflow: hidden;
	line-height: 100%;
}

/*
Accessibility Page
*/

h2.browser_header {
	padding-top: 170px;
	height: 0;
	background: #808080 url(../images/browser_header.gif) 0 0 no-repeat;
	overflow: hidden;
	line-height: 100%;
}

/*
Footer
*/

#footer, .push {
	height: 123px;
}

#logotop {
	margin: 0 auto;
	width: 980px;
	height: 57px;
	background: url(../images/logotop.gif) top right no-repeat;
}

#footer_inner {
	background: #070606;
}

#footer_content {
	margin: 0 auto;
	width: 980px;
	font-size: 0.6em;
	color: #fff;
	height: 100%;
	overflow: hidden;
}

#footer_content a {
	color: #fff;
}

#logo {
	float: right;
}

#logo a.logo {
	padding-top: 66px;
	width: 293px;
	height: 0;
	display: block;
	overflow: hidden;
	background: url(../images/logo.gif) 0 0 no-repeat;
}

#bottomnav {
	margin-top: 21px;
	float: left;
}