/*

	1312 vs. Hemisphered

	written by Mike "1312" (mike_at_welovetheweb.com)

	for We love the web ltd. (www.welovetheweb.com)
	
	design by david_at_hemispheredmc.com 0161 907 3730
	

	ie psuedo classes from:
	http://www.vladdy.net/Demos/IEPseudoClassesFix.html
	
		
	the release of IE7 has made the simple world of ff/ie6 on a pc a bit more nightmareish
	ie 7 in css hack detailed in the "in-css hacks" section of
	http://www.webdevout.net/articles/css_hacks.php
	
	fading sponsors list on the homepage js from
	http://medienfreunde.com/deutsch/weblog/aus_der_praxis.html?nid=87
	http://medienfreunde.com/lab/innerfade/

*/

body {
	background-color: #e6e6e6;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 63%;
	color: #000;
	margin: 0px;
	padding: 0px;
	text-align: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ layouts */
	#derwentHill {
		width: 776px;
		text-align: left;
		margin: 0px auto;
		background: url("/derwenthill/images/derwantHill-bg.gif") repeat-y left top;
		overflow: hidden;
	}
		#top {
			display: inline;
			float: left;
			width: 776px;
			height: 103px;
			position: relative;
		}
		#left {
			clear: left;
			display: inline;
			float: left;
			width: 165px;
		}
		#middle {
			font-family: Verdana, Arial, Helvetica, sans-serif;
			display: inline;
			float: left;
			width: 414px;
			background-color: #fff;
			padding: 1em 16px 0px 16px;
		}
		#right {
			display: inline;
			float: right;
			width: 165px;
			overflow: hidden;
		}
			#flashRotator {
				clear: left;
				float: left;
				background: url("/derwenthill/images/rotator/1.jpg") no-repeat left top;
				width: 165px;
				height: 200px;
				padding: 0px;
			}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ general styles */

ul {
	font-size: 1.2em;
	padding: 0px;
	margin: 0px;
	padding-left: 1.6em;
	color: #808284;
}

ul li {
	padding: 0px;
	margin: 0px;
}

ol {
	font-size: 1.2em;
	padding: 0px;
	margin: 0px;
	padding-left: 2em;
	color: #808284;
}

ol li {
	padding: 0px;
	margin: 0px;
}

a {
	color: #6d953a;
}

a:hover {
	color: #f5821f;
}

img{
	border: 0 none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ classes */
.floatLeft {
	float: left;
	text-align: left;
}
.floatRight {
	float: right;
	text-align: right;
}

.floatClear {
	margin: -1px -1px 0px 0px;
	width: 1px;
	height: 1px;
	clear: both;
}

div.hr { 
	clear: both;
}
	div.hr hr {
		display: none;
	}
	
.hide {
	display: none;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ div specific styles */
#top h1, #top h2 {
	text-indent: -300em;
}
#top p {
	margin-left: 20px;
	position: absolute;
	top: 0px;
	left: 0px;
}
#top p, #top a {
	display: block;
	width: 133px;
	height: 83px;
}
#top p a span {
	display: none;
}

#left h2 {
	display: none;
}
#left ul {
	margin: 0px;
	padding: 0px;
	background-color: #a7be38;
	border-top: 1px solid #fff;
	list-style: none;
	width: 165px;
	font-size: 1.2em;
	font-weight: normal;
	letter-spacing: -0.05em;
	word-spacing: -0.05em;
	font-family: Arial Black, Arial, Helvetica, sans-serif;
	overflow: hidden;
	/* 30/07/06 - 1312 - over done the font here a bit... */
	letter-spacing: 0em;
	font-size: 1.1em;
	word-spacing: -0.25em;
	
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	word-spacing: 0em;
}
	#left ul li {
		margin: 0px;
		padding: 0px;
		border-bottom: 1px solid #fff;
	}
		#left ul li a {
			color: #fff;
			width: 147px;
			display: block;
			padding: 4px 12px 4px 6px;
			text-decoration: none;
		}
			#left ul li a:hover, #left ul li.current a {
				color: #dae13b;
				background-color: #7b4e1c;
			}
		#left ul li ul {
			border: 0 none;
			background-color: #7b4e1c;
			font-size: 1.0em;
		}
			#left ul li ul li {
				border: 0 none;
			}
				#left ul li.current ul li a {
					color: #fff;
					background-color: none;
				}
				#left ul li.current ul li a:hover {
					color: #dae13b;
					background-color: none;
				}
				
#middle h2 {
	color: #7b4e1c;
	font-weight: bold;
	font-size: 1.2em;
	margin: 0px;
	margin-bottom: 1em;
}

#middle h3 {
	color: #7b4e1c;
	font-weight: normal;
	font-size: 1.2em;
	margin: 1em 0em;
}

#middle h4 {
	color: #444;
	font-weight: normal;
	font-size: 1.2em;
	margin: 0em 0em 0.25em 0em;
}

#middle p {
	color: #808284;
	font-size: 1.2em;
	margin: 0px;
	margin-bottom: 1em;
}
	#middle p p {
		font-size: 1.0em;
	}
	#middle h2 p {
		color: #7b4e1c !important;
		font-weight: bold;
		font-size: 1.0em;
		margin: 0px;
		margin-bottom: 1em;
	}
	
	#middle h4 p, #middle h4 p p {
		color: #444;
		font-weight: normal;
		font-size: 1.0em;
		margin: 0px;
		margin-bottom: 1em;
	}
	#middle p.floatRight {
		margin: 0px 0px 10px 10px;
	}
	
#middle img.floatRight {
	margin: 0px 0px 10px 10px;
	clear: right;
	display: inline;
	float: right;
}

#middle small {
	position: relative;
	top: -0.1em;
	padding: 0px;
	font-size: 0.9em;
	color: #666;
}

#middle ul, #middle ol {
	margin: 0px;
	margin-bottom: 1em;
	font-size: 1.2em;
	margin-top: -1em;
}
	#middle p ul, #middle p ol {
		font-size: 1.0em;
	}
	
#middle a.documentLink {
	padding-left: 15px;
	background: url("/derwenthill/images/icon-document.gif") no-repeat 0px 2px;
}

#middle a.pdf {
	padding: 2px 0px 2px 20px;
	background: url("/derwenthill/images/icon-pdf.gif") no-repeat left top;
}

#middle a.msword {
	padding: 2px 0px 2px 20px;
	background: url("/derwenthill/images/icon-word.gif") no-repeat left top;
}

#middle a.textplain {
	padding: 2px 0px 2px 20px;
	background: url("/derwenthill/images/icon-txt.gif") no-repeat left top;
}

#middle a.texthtml {
	padding: 2px 0px 2px 20px;
	background: url("/derwenthill/images/icon-html.gif") no-repeat left top;
}

#middle a.externalLink {
	padding: 2px 0px 2px 20px;
	background: url("/derwenthill/images/icon-externalLink.gif") no-repeat left top;
}

#middle div.linkedDocuments, #middle div.externalLinks {

}
				
#right div.panel-testimonal, #right div.panel-news, #right div.panel-offers {
	clear: left;
	float: left;
	width: 165px;
	/*height: 193px;*/
	padding-bottom: 20px;
}
	#right div.panel-testimonal {
		background-color: #7b4e1c;
	}
	#right div.panel-news {
		background-color: #f5821f;
	}
	#right div.panel-offers {
		background-color: #dae13b;
	}
		/* 30/07/06 - 1312 - quote marks */
		/* ok so;
		   - using psuedo classes :before and :after to draw quote marks in in ff and good browsers, so you can make sure they appear in the right place
		   - IE doesnt support these psuedo classes... so for that I'm drawing in gifs of the open and close quotes for them (and then turning them off for FF
		   - the close quote uses a span in the p - yes, un neccesary html... FF does display: inline-block; too, good job using :after { content: "\201C"; }
		   - IE 6 displays them in different places to IE 7, so also has to be targetted
		   - why? because the design called for the open quote to be outside the p block area, as in to the left of the left alignment of the text.
		   - is this pure? er css is for style, not content, and strictly these are content and not style. But then so are bullet points in lists....
		 */
		#right div.panel-testimonal blockquote {
			margin: 16px 14px 0px 14px;
			padding: 0px 0px 0px 6px;
			/* 30/07/06 - 1312 - ie6/7 - make open quote bg image */
			background: url("/derwenthill/images/openquotes.gif") no-repeat 0em 0.3em;
		}
			#right div.panel-testimonal blockquote p {
				color: #dae13b;
				font-size: 1.2em;
				font-weight: normal;
				letter-spacing: -0.05em;
				word-spacing: -0.05em;
				font-family: Arial Black, Arial, Helvetica, sans-serif;
				/* 30/07/06 - 1312 - over done the font here a bit... */
				letter-spacing: 0em;
				font-size: 1.2em;
				word-spacing: -0.1em;
				/* 30/07/06 - 1312 - get spacing consistant */
				margin-bottom: 0px;
				
				font-family: Arial, Helvetica, sans-serif;
				font-weight: bold;
				word-spacing: 0em;
			}
				#right div.panel-testimonal blockquote p p {
					font-size: 1em;
				}
				#right div.panel-testimonal blockquote p span.closeQuotes {
					/* 30/07/06 - 1312 - ie6/7 - make close quote bg image */
					height: 1.2em;
					width: 6px;
					display: inline-block;
					background: url("/derwenthill/images/closequotes.gif") no-repeat left 0.1em;
				}
					/* 30/07/06 - 1312 - ie7 - quote marks mayhem! */
					#right div.panel-testimonal blockquote p > span.closeQuotes {
						background-position: left top;
					}
				
					/* 30/07/06 - 1312 - ff - quote marks mayhem! */
					#right div.panel-testimonal >/**/blockquote {
						background: none;
					}
					#right div.panel-testimonal blockquote p >/**/span.closeQuotes {
						display: none;
					}
					/* 30/07/06 - 1312 - ff - make open quote css content */
					#right div.panel-testimonal blockquote p:before {
						font-family: Georgia, "Times New Roman", Times, serif;
						font-weight: bold;
						content: "\201C";
						margin-left: -6px;
					}
					/* 30/07/06 - 1312 - ff - make close quote css content */
					#right div.panel-testimonal blockquote p:after {
						font-family: Georgia, "Times New Roman", Times, serif;
						font-weight: bold;
						content: "\201D";						
					}
					
					
			#right div.panel-testimonal blockquote small {
				font-family: Arial, Helvetica, sans-serif;
				color: #fff;
				text-transform: uppercase;
				margin-top: 12px;
				display: block;
			}
			
	#right div.panel-news h3, #right div.panel-offers h3 {
		color: #dae13b;
		padding: 0px 16px;
		font-size: 1.2em;
		font-weight: bold;
		letter-spacing: -0.05em;
		word-spacing: -0.05em;
		font-family: Arial, Helvetica, sans-serif;
		margin: 5px 0px;
		/* 30/07/06 - 1312 - over done the font here a bit... */
		letter-spacing: 0em;
		font-size: 1.2em;
		word-spacing: -0.1em;
	}
		#right div.panel-offers h3 {
			color: #f5821f;
		}
	#right div.panel-news p, #right div.panel-offers p {
		font-family: Arial, Helvetica, sans-serif;
		color: #fff;
		font-size: 1.2em;
		padding: 0px 16px;
		margin: 0px 0px 5px 0px;
	}
		#right div.panel-offers p {
			color: #7b4e1c;
		}
			#right div.panel-news p p, #right div.panel-offers p p {
				padding: 0px;
				margin: 0px;
				font-size: 1em;
			}
	#right div.panel-news a, #right div.panel-offers a {
		color: #dae13b;
		text-decoration: underline;
		text-transform: uppercase;
	}
		#right div.panel-offers a {
			color: #f5821f;
		}
		#right div.panel-news a:hover {
			color: #7b4e1c;
		}
		#right div.panel-offers a:hover {
			color: #808284;
		}
		
#middle ul#sitemap, #middle ul#links {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	color: #6d953a;
	font-size: 1.0em;
}
	#middle ul#sitemap li, #middle ul#links li {
		margin-bottom: 2em;
	}
		#middle ul#sitemap li h3, #middle ul#links li h3 {
			margin: 0px;
			padding: 0px;
			margin-bottom: 0.5em;
		}
			#middle ul#links li h3 {
				margin-bottom: 0px;
			}
			#middle ul#links li p {
				margin-top: 0.25em;
			}
		#middle ul#sitemap ul {
			margin: 0px;
			padding-left: 2em;
		}
			#middle ul#sitemap ul li {
				margin-bottom: 0.5em;
			}
	#middle ul#sitemap li.alt {
		color: #7b4e1c;
	}
		#middle ul#sitemap li.alt a {
			color: #7b4e1c;
		}
		#middle ul#sitemap li.alt a:hover {
			color: #f5821f;
		}
		
		
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ header graphics */

/* defaults to the welcome one */
#top { background: url("/derwenthill/images/header/welcome.jpg") no-repeat left top; }

/* remember new pages with new graphics need to be added to here and the appropriate line in the html to be changed */
/* <div id="derwentHill" class="INSERT-CLASS-HERE"> */

div#derwentHill.welcomePage #top { background-image: url("/derwenthill/images/header/welcome.jpg"); }
div#derwentHill.aboutPage #top { background-image: url("/derwenthill/images/header/about.jpg"); }
div#derwentHill.advisoryPage #top { background-image: url("/derwenthill/images/header/advisoryService.jpg"); }
div#derwentHill.contactPage #top { background-image: url("/derwenthill/images/header/contact.jpg"); }
div#derwentHill.linksPage #top { background-image: url("/derwenthill/images/header/links.jpg"); }
div#derwentHill.locationPage #top { background-image: url("/derwenthill/images/header/location.jpg"); }
div#derwentHill.newsPage #top { background-image: url("/derwenthill/images/header/news.jpg"); }
div#derwentHill.offersPage #top { background-image: url("/derwenthill/images/header/offers.jpg"); }
div#derwentHill.outdoorPage #top { background-image: url("/derwenthill/images/header/outdoorEducation.jpg"); }
div#derwentHill.recreationalPage #top { background-image: url("/derwenthill/images/header/recreationalActivities.jpg"); }
div#derwentHill.trainingPage #top { background-image: url("/derwenthill/images/header/trainingAndDevelopment.jpg"); }
div#derwentHill.siteMapPage #top { background-image: url("/derwenthill/images/header/siteMap.jpg"); }