/*
 People Shop - MAIN STYLES
 Developed by Ollie Bettany 12/11/07
 oliver.bettany@gmail.com
*/

/* ----------------------------------------------- */
/* GENERAL */
/* ----------------------------------------------- */

	* {
		margin: 0;
		padding: 0;
	}

	body {
		font-family: Arial, Helvetica, sans-serif;
		text-align: center;
		font-size: 0.75em;
		background-color: #fff;
		padding: 20px;
		color: #000;
	}

	a {
		color: #f0003d;
		text-decoration: none;
	}

		a:hover {
			text-decoration: underline;
		}

	p {
		margin: 0 0 14px 0;
		padding: 0;
		line-height: 1.3em;
	}

	img {
		border: 0;
		display: block;
	}
	
	input, select {
		font-family: Arial, Helvetica, sans-serif;
	}

	.hide,
	.hidden {
		position: absolute;
		left: -6000em;
	}

	.clear {
		clear: both;
	}

	.bold {
		font-weight: bolder;
	}
	
	.hr {
		margin: 0 0 13px 0;
		padding: 13px 0 0 0;
		display: block;
		border-bottom: 1px dotted #b0b3b5;
		float: left;
		clear: both;
		width: 100%;
	}
	
	.adj-bottom {
		margin-bottom: 6px;
	}
	
	.adj-top {
		padding-top: 6px;
	}	
	
	.adj-both {
		margin-bottom: 6px;
		padding-top: 6px;
	}
	
		.hr hr {
			display: none;
		}
	
	fieldset {
		border: 0;
	}
	
	.uppercase {
		text-transform: uppercase;
	}

/* ----------------------------------------------- */
/* PAGE LAYOUT */
/* ----------------------------------------------- */

	#form1 {
		display: inline;
	}

	#wrapper {
		width: 900px;
		margin: 0 auto;
		text-align: left;
		padding: 0;
	}

/* ----------------------------------------------- */
/* HEADER */
/* ----------------------------------------------- */

	#header {
		position: relative;
		height: 45px;
		margin: 0 0 15px 0;
	}

/* main logo */
	
		#header h1 {
			overflow: hidden; /* to stop the title covering the page content when text size is increased */
			position: absolute;
			font-size: 1.6em;
			top: 2px;
		}
		
		#header h1,
		#header h1 a {
			width: 186px; /* width and height must be repeated for IE5 mac */
			height: 41px;
		}
	
			#header h1 a {
				display: block;
				text-decoration: none;
				position: relative;
				color: #000;
			}

			#header h1 span {
				background: url(/_images/common/hd_main_logo_sm.gif) no-repeat left top;
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0px; /* top and left values needed for netscape 7 */
				left: 0px;
				cursor: pointer;
			}

/* ----------------------------------------------- */
/* MAIN CONTENT */
/* ----------------------------------------------- */

	#maincontent {
		background: transparent url(/_images/background/bg_maincontent.gif) repeat-y left top;
		float: left;
		width: 900px;
	}

/* LEFTCOLUMN */
/* All leftcolumn styles in nav.css */

	#leftcolumn {
		float: left;
		background: #e6f1e4;
		width: 181px;
		margin: 0 3px 0 0;
		padding: 14px 9px 10px 9px;
	}
	
/* CONTENT */		

	#content {
		width: 480px;
		float: left;
		background: #accfa4;
		margin: 0 2px 0 0;
		padding: 14px 8px 14px 9px;
	}
	
		#content h2 {
			border-bottom: 1px dotted #b0b3b5; 
			padding: 0 0 14px 0;
			margin: 0 0 14px 0;
			font-size: 1.5em;
			font-weight: bolder;
			float: left;
			width: 451px;
		}
		
/* back to top */

		#content .backtotop {
			float: right;
			color: #fff;
			margin: 0 15px 0 0;
			font-weight: bolder;
			font-size: 1.1em;
		}	

/* contentbox frame */
	
		#content .contentbox-top {
			background: transparent url(/_images/background/bg_contentbox_top.gif) no-repeat left top;
			width: 479px;
			height: 15px;
			float: left;
		}
		
		#content .contentbox {
			background: #fff url(/_images/background/bg_contentbox.gif) no-repeat left bottom;
			width: 451px;
			padding: 0 14px 15px 14px;
			margin: 0 0 15px 0;
			float: left;
		}

/* CONTENTBOX GENERIC STYLES */

			#content .contentbox .no-margins {
				margin: 0;
			}
			
/* heading classes */
		
			#content .contentbox h2 {		
				color: #72826e;
			}
			
			#content .contentbox h2.alt {
				border-bottom: none; 
				border-top: 1px dotted #b0b3b5; 
				padding: 14px 0 0 0;
				margin: 0 0 10px 0;
			}

			#content .contentbox h3 {
				color: #6a7a66;
				font-size: 1em;
				margin: 0 0 12px 0;
				clear: both;
			}
			
			#content .contentbox h3.no-margin {
				margin: 0;
			}
			
			#content .contentbox h3.selected-skill {
				color: #000;
			}
				
				#content .contentbox h3.selected-skill span {
					font-style: italic;
				}
					
			#content .contentbox h4 {
				color: #000;
				font-size: 1em;
				margin: 0 0 8px 0;
			}
			
			#content .contentbox h4.photo {
				float: left;
				width: 120px;
				margin: 0 10px 0 0;
			}
			
			#content .contentbox h5 {
				margin: 0 0 7px 0;
				font-size: 1em;
				color: #666;
			}			
			
				#content .contentbox span.full-width {
					width: 347px;
					float: left;
				}

/* paragraph styles */
			
			#content .contentbox p.small {
				font-size: 0.9em;
				margin: 0 0 7px 0;
				color: #666;
			}

			#content .contentbox p.intro {
				float: left;
				width: 330px;
				margin: 0 0 14px 2px;
			}
			
			#content .contentbox p.required-msg {
				font-size: 0.9em;
				color: #666;
				float: left;
				margin: 0;
				width: auto;
			}
			
			#content .contentbox p.caveat {
				clear: both;
				margin: 10px 0 0 0;
				width: 280px;
				float: left;
			}
			
				#content .contentbox p.caveat span {
					margin: 0;
					float: none;
				}			

/* span styles */
				
				#content .contentbox span.required {
					color: #ff0000;
					font-weight: bolder;
					font-size: 1.2em;
				}
				
					#content .contentbox span.required a {
						font-size: 0.9em;
					}			

/* hyperlink styles */
			
			#content .contentbox a {
				font-weight: bolder;
			}
			
			#content .contentbox a.question {
				width: 20px;
				height: 20px;
				background: transparent url(/_images/common/button_question.gif) left top;
				cursor: pointer;
			}
			
			#content .contentbox a.bottom-link {
				font-weight: bolder;
				background: transparent url(/_images/nav/bullet_leftcolumn.gif) no-repeat 0 5px;
				padding: 0 0 0 12px;
				margin: 0 10px 10px 0;
				float: left;
			}
			
/* list stuff */
			
			#content .contentbox ul {
				margin: 0 0 15px 2px;
			}
			
				#content .contentbox ul li {
					background: transparent url(/_images/common/bullet_contentbox.gif) no-repeat 0 6px;
					padding: 0 0 4px 9px;
					list-style: none;
				}
				
					#content .contentbox ul li ul {
						margin-top: 4px;
						margin-bottom: -3px;
					}
				
			#content .contentbox ol {
				margin: 0 0 15px 19px;
			}
			
				#content .contentbox ol li {
					padding: 0 0 4px 0;
				}
					/*
					#content .contentbox ol li a {
						color: #000;
					}
					*/
					
/* used by terms and conditions */
/* no-bullet */
						
				#content .contentbox ul.no-bullet {
					clear: both;
				}
				
					#content .contentbox ul.no-bullet li {
						list-style: none;
						background: none;
						padding: 0 0 8px 0;
					}
					
						#content .contentbox ul.no-bullet li ol.alpha {
							margin: 6px 0 0 18px;
						}
						
							#content .contentbox ul.no-bullet li ol.alpha li {
								padding-bottom: 4px;
							}
							
/* alpha */
					
				#content .contentbox ol.alpha {
					clear: both;
					margin-left: 18px
				}
					
					#content .contentbox ol.alpha li {
						list-style: lower-alpha;
					}
					
					#content .contentbox ol.alpha li ol {
						margin: 4px 0 0 19px;
					}
		
						#content .contentbox ol.alpha li ol li {
							list-style: lower-roman;
						}
						
							#content .contentbox ol.alpha li ol li ol {
								margin: 4px 0 0 19px;
							}
		
								#content .contentbox ol.alpha li ol li ol li {
									list-style: decimal;
								}
				

/* floated images */

			#content .contentbox .img-right {
				float: right;
				clear: right;
				margin: 0 10px 0 10px;
			}
			
			#content .contentbox .img-left {
				float: left;
			}		

/* contentbox generic form stuff */

			#content .contentbox textarea {
				border: 1px solid #ccc;
				width: 445px;
				height: 100px;
				float: left;
				clear: both;
				display: block;
				padding: 2px;
				font-family: Arial, Helvetica, sans-serif;
				font-size: 1em;
			}
			
/* photo-item */

			#content .contentbox .photo-item {
				float: left;
				margin: 0 10px 0 0;
				width: 85px;
			}
			
				#content .contentbox .photo-item img {
					margin: 0 0 7px 0;
				}

				#content .contentbox .photo-item a {
					float: left;
					clear: both;
					white-space: nowrap;
				}

/* form-item */

			#content .contentbox .form-item {
				margin: 3px 0 7px 0;
				float: left;
				clear: left;
				width: 451px;
			}
			
			#content .contentbox .auto-width {
				width: auto;
			}

				#content .contentbox .form-item label {
					color: #666;
					float: left;
					width: 120px;
					margin: 3px 10px 0 0;
					font-size: 1em;
					font-weight: bolder;
				}
				
				#content .contentbox .form-item label.invalid {
					background-color: #fbd1d9;
					color: #990000
				}
				
				#content .contentbox .form-item label.full-width {
					width: auto;
					margin: 3px 3px 5px 0;
				}
				
				#content .contentbox .form-item label.width-280 {
					width: 280px;
				}
				
					#content .contentbox .form-item label a {
						margin: 0;
					}		
				
				#content .contentbox .form-item select {
					float: left;
					margin: 0 5px 0 0;
					font-size: 1em;
				}
				
					#content .contentbox .form-item select.hours {
						width: 5em;
					}
					
					#content .contentbox .form-item select.days {
						width: 3.5em;
					}
					
					#content .contentbox .form-item select.months {
						width: 8em;
					}
				
				#content .contentbox .form-item a {
					float: left;
					margin: 3px 5px 0 0;
				}
				
				#content .contentbox .form-item input {
					float: left;
					margin: 0 5px 0 0;
					padding: 2px 1px 0 1px;
					font-size: 1em;
				}
				
					#content .contentbox .form-item input.submit {
						padding: 0;
					}
					
					#content .contentbox .form-item .checkbox {
						float: left;
					}
					
						#content .contentbox .form-item .checkbox input {
							width: auto;
							margin: 2px 5px 0 0;
						} 
				
				#content .contentbox .form-item span {
					float: left;
					margin: 3px 0 0 0;
				}
				
				#content .contentbox .form-item h3 {
					font-weight: normal;
					background: #edf5ec;
					color: #000;
					margin: 0 0 3px 0;
				}
				
				#content .contentbox .form-item label.autowidth {
					width: auto;
					margin: 4px 7px 0 0;
				}
				
				#content .contentbox .form-item .question {
					float: right;
				}
				
				#content .contentbox .form-item img.rating-img {
					margin: 5px 0 0 0;
				}
				

/* radio form-item */

				#content .contentbox .radio span {
					color: #666;
					float: left;
					width: 120px;
					margin: 3px 10px 0 0;
					font-size: 1em;
				}
				
				#content .contentbox .radio label {
					width: auto;
					color: #000;
				}
				
				#content .contentbox .radio input {
					width: auto;
					margin: 4px 3px 0 0;
				}
				
				#content .contentbox .margin {
					margin: 0 0 20px 0;
				}
				
/* submit-item */

			#content .contentbox .submit-item {
				float: left;
				clear: left;
				width: 451px;
				text-align: center;
			}
			
				#content .contentbox .submit-item input {
					cursor: pointer;
				}
				
				#content .contentbox .submit-item p {
					font-size: 0.9em;
					color: #666;
					float: left;
					margin: 0;
					width: auto;
				}
				
				
				#content .contentbox .register p {
					float: left;
				}
				
/* FormErrorText */

			#content .contentbox .FormErrorText {
				float: left;
				width: 396px;
				border-bottom: 1px dotted #b0b3b5;
				padding: 0 0 15px 55px;
				min-height: 35px;
				margin: 0 0 15px 0;
				color: #990000;
				background: transparent url(/_images/common/bg_form_error.gif) no-repeat 3px 2px;
			}
			
				#content .contentbox .FormErrorText li {
					background: none;
					padding-left: 0;
				}

/* ADDRESS FINDER */

				#maincontent #content .contentbox .custom input.housenumber {
					width: 4em;
				}
				
				#maincontent #content .contentbox .custom input.postcode {
					width: 8em;
				}
				
				#content .contentbox .form-item select.address-list {
					width: auto;
					height: 12em;
				}
				
				#content .contentbox .form-item span.addressfinder-nav {
					float: left;
					clear: left;
					margin: 7px 0 5px 130px;
				}
				
					#content .contentbox .form-item span.addressfinder-nav a {
						margin: 0 10px 0 0;
					}
								
/* contentbox right */
/* associate/customer homepage booking requests box etc. */

			#content .contentbox .right {
				float: right;
				clear: right;
				width: 90px;
				height: 80px;
				border-left: 1px dotted #b0b3b5;
				margin: 0 0 0 10px;
				padding: 23px 0 0 10px;
				text-align: center;
			}
			
				#content .contentbox .right a {
					font-weight: bolder;
					width: 70px;
					display: block;
					font-size: 1.1em;
					background: transparent url(/_images/common/bullet_c_cbox_right.gif) no-repeat center bottom;
					padding: 0 0 12px 0;
					margin: 0 0 0 8px;
				}
				
				#content .contentbox .right p {
					margin-bottom: 4px;
				}
				
				#content .contentbox .right span {
					font-weight: bolder;
					color: #f0003d;
					font-size: 1.8em;
				}
			
/* breadcrumb */

				#content .contentbox ul.breadcrumb {
					margin: 0;
					float: left;
				}

					#content .contentbox ul.breadcrumb li {
						display: block;
						float: left;
						list-style: none;
						background: transparent url(/_images/nav/bullet_bcrumb.gif) no-repeat 0 4px;
						padding: 0 5px 0 9px;
					}
					
/* AVAILABLEBOX STYLES
 New styles added by Ollie 29/10/08 */

		#content .available-box p {
			float: left;
			margin: 5px 13px 13px 13px;
		}
			
		#content .available-box	.contentbox-nav	{
			padding: 0 10px 15px 0;
		}				
			
/* RIGHTCOLUMN */

	#rightcolumn {
		width: 199px;
		float: left;
		background: #e6f1e4;
		padding: 0 0 10px 0;
	}	
	
		#rightcolumn #wanted-pic {
			border-bottom: 2px solid #fff;
			float: left;
			background: #d6e7d1;
		}
		
			#rightcolumn #wanted-pic img {
				padding: 6px 0 0 0;
			}
			
			#rightcolumn #wanted-pic p {
				margin: 13px;
			}
			
			#rightcolumn #wanted-pic a {
				font-weight: bolder;
				margin: 0 13px 13px 13px;
				float: left;
				background: transparent url(/_images/nav/bullet_leftcolumn.gif) no-repeat left 5px;
				padding: 0 0 0 12px;
			}
			
		
		#rightcolumn h2 {
			margin: 45px 12px 10px 12px;
			padding: 0 0 7px 0;
			border-bottom: 1px dotted #aaafae;
			color: #6a7a66;
			font-size: 1em;
			float: left;
			width: 175px;
		}
		
		#rightcolumn ol {
			float: left;
			margin: 0 0 0 31px;
		}
		
			#rightcolumn ol li {
				float: left;
				width: 158px;
				font-weight: bolder;
				color: #666;
				padding: 0 10px 3px 0;
			}		
	
/* info-box */

		#rightcolumn .info-box {
			width: 169px;
			margin: 15px;
			border-bottom: 1px dotted #b9c0bc; 
			float: left;
			display: none;
			background: #e6f1e4;
		}
		
			#rightcolumn .info-box h2 {
				color: #72826e;
				padding: 0 0 14px 0;
				margin: 0 0 14px 0;
				font-size: 1.5em;
				font-weight: bolder;
				float: left;
				width: 169px;
				border-bottom: 1px dotted #b9c0bc; 
			}
			
				#rightcolumn .info-box h2 span {
					float: left;
					width: 139px;
				}
			
				#rightcolumn .info-box h2 a.close {
					background: transparent url(/_images/services/button_close.gif) no-repeat left top;
					min-height: 20px;
					width: 20px;
					margin: 1px 0 0 10px;
					float: left;
					cursor: pointer;
				}
			
			#rightcolumn .info-box p {
				float: left;
				color: #666;
				overflow: hidden;
			}
	