/******************************************************
 * CSS
 * 
 * 1. Reset
 * 2. Layout
 * 3. Typography
 * 4. Forms
 *
 * @author			Martin Ogden
 * @email			martin.ogden@gmail.com
 * 
 * @file			custom.jquery.js
 * @version			1.0
 * @date			08/06/2009
 * 
 * Copyright (c) 2009
 *****************************************************/

 /*****************************************************
	1. RESET
 *****************************************************/

html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}

br.clear {
	clear: both;
	height: 0;
}
 /*****************************************************
	2. LAYOUT
 *****************************************************/

html {
	background: url(../images/background_slice.jpg) top left repeat-x;
}
body {
	margin: 0 auto;
	padding-top: 30px;
	font: 13px Helvetica, Arial, sans-serif;
	color: #586c79;
}

#container {
	margin: 0 auto;
	width: 882px;
}
	
		#navigation_top {
			position: relative;
			width: 882px;
			height: 100px;
			background: url(../images/navigation_top.jpg) top left no-repeat;
			display:block;
		}
		
			#logo {
				display:inline;
				float: left;
				margin: 15px 0 0 20px;
			}
			
			#pz_cussons_25yrs {
				display:inline;
				float: right;
				margin: 15px 20px 0 0;
			}
			
			#navigation_bubbles {
				position: absolute;
				top: -30px;
				right: 140px;
			}
		
		#navigation_bottom {
			position:relative;
			width: 882px;
			height: 35px;
			line-height: 35px;
			background: url(../images/navigation_bottom.png) top left no-repeat;
			display:block;
		}
		
			#navigation_bottom li {
				display: inline;
			}
			
			#navigation_bottom ul {
				padding-left: 20px;
			}
		
		#sub_navigation {
			margin: 20px 0;
			width: 882px;
			height: 184px;
			display:block;
		}
		
		#content_container {
			position: relative;
			display:block;
			width: 882px;
			min-height: 40px;
			
		}
		
			#content {
				position: relative;
				margin: 0 120px 0 270px;
				width: 452px;
				min-height: 350px;
			}
			
				img#big_logo {
					margin-top:-40px;
					margin-bottom: 24px;
				}
				
				#the_map {
					position: absolute;
					right: -40px;
					top: 200px;
				}
				
			#event_header {
				position: relative;
				width: 432px;
				height: 35px;
				margin-bottom:10px;
				padding: 0 10px;
				-moz-border-radius: 7px;
				-webkit-border-radius: 7px;
			}
			
			.event {
				position: relative;
				width: 432px;
				height: 35px;
				margin-bottom:10px;
				padding: 0 10px;
				-moz-border-radius: 7px;
				-webkit-border-radius: 7px;
				cursor: pointer;
			}
			
			.event span, #event_header span {
				line-height: 35px;
				min-width: 110px !important;
			}
			
			.event-inside {
				background: url(../images/event_accordion/trans_bottom.gif) bottom left no-repeat;
				position: absolute;
				bottom: -1px;
				left: 0;
				width: 452px;
				height: 10px;
			}
			
			.red {
				background: #DE3629 url(../images/event_accordion/trans_top.gif) top left no-repeat;
			}
			
			.lilac {
				background: #A398FF url(../images/event_accordion/trans_top.gif) top left no-repeat;
			}
			
			.pink {
				background: #FF8FDB url(../images/event_accordion/trans_top.gif) top left no-repeat;
			}
			
			.teal{
				background: #5ac2b2 url(../images/event_accordion/trans_top.gif) top left no-repeat;
			}
			
			.blue {
				background: #36AADD url(../images/event_accordion/trans_top.gif) top left no-repeat;
			}
			
			.offwhite {
				background: #DFDFDF;
			}
			
			.offwhite span {
				color: #000;
			}
			
			.date, .time, .activity {
				min-width: 110px;
				position: relative;
				display: inline;
				float: left;
				color: #FFF;
			}
			
			#event_big {
				font-size: 8px;
				margin-top: 11px;
				line-height: 8px !important;
			}
			
			.details {
				display:none;
				line-height: 15px;
				clear: both;
				width: 432px;
				color: #FFF;
			}
			
			#event_title {
				cursor: arrow !important;
			}
			
			.event_hover {
				background: #21A9E0;
			}
			
			/* Bubble Divs */

			#LH_bubble_container {
				position: absolute;
				top: -60px;
				left: -40px;
				
				height: 400px;
				width: 271px;
				overflow:hidden;
			}
			
			#home_LH_bubble_container {
				position: absolute;
				top: -40px;
				left: -80px;
				
				height: 616px;
				width: 418px;
				overflow:display;
			}
			
			#RH_bubble_container_1 {
				position: absolute;
				top: -50px;
				right: 130px;
			}
			
			#RH_bubble_container_2 {
				position: absolute;
				top: 250px;
				right: -35px;
			}

				.bubble {
					position:absolute;
				}

				#bubble_bg {
					top: -60px;
					left: 30px;
				}

				#bubble_1 {
					top: 10px;
					left: 30px;
				}

				#bubble_2 {
					display:none;
				}

				#bubble_3 {
					top: 110px;
					left: 100px;
				}
				
				#programme_bubbles {
					margin-left: 90px;
					margin-bottom: 20px;
				}
				
				#soap-box li {
					padding-left: 20px;
				}
				
		#footer {
			position: relative;
			display:block;
			margin: 0 120px 0 265px;
			width: 565px;
			height: 140px;
		}
		
			.footer_image {
				margin-top: 80px;
				display:inline;
				float: left;
				z-index:2;
			}
			
			.footer_bubble {
				position: absolute;
				bottom: -50px;
				right: -120px;
				z-index:1;
			}
				
 /*****************************************************
	3. TYPOGRAPHY
 *****************************************************/

h1, h2, h3, h4, p {
	margin: 0;
}

h1 {
	margin-bottom: 6px;
	font-size: 30px;
	color: #DE3629;
}

h2 {
	margin-bottom: 8px;
	font-size: 24px;
}

h3 {
	margin-bottom: 6px;
	font-size: 14px;
	letter-spacing: 2px;
	font-weight: normal;
	color: #DE3629;
	text-transform: uppercase;
}

h4 {
	margin-bottom: 4px;
	font-weight: bold;
}

p {
	margin-bottom: 16px;
}

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

a:hover {
	text-decoration: underline;
}

/*****************************************************/

#navigation_bottom li a {
	color: #809DAD;
	text-decoration: none;
}

#navigation_bottom li a:hover, #navigation_bottom li a.active {
	color: #DE3629;
}

#mailing_list h3 {
	color: #FFF;
	font-size: 12px;
}

#mailing_list a {
	display:inline;
	color: #B87EA6;
	font-size: 12px;
	float: right;
	margin: -8px 6px 0 0;
}

#content li {
	margin-bottom: 8px;
}

.li_red {
	color: #DE3629;
	font-weight: bold;
}

ul#soap_box li {
	list-style-type: circle;
}
/*****************************************************
	4. FORMS
*****************************************************/

#mailing_list {
	position: absolute;
	width: 240px;
	bottom: -100px;
	right:-30px;
	padding: 10px 10px 0 10px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	background: #ABDEF9;
}

#mailing_list input[type="text"] {
	border: 0;
	padding: 2px;
	color: #B87EA6;
	width: 230px;
	margin-bottom: 8px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}

#mailing_list input[type="submit"] {
	float: left;
	display:inline;
	border: 0;
	padding: 2px;
	color: #B87EA6;
	background: #DBF1FC;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
}