/*
 * Global CSS
 */

/*
 * Eric Meyer's Global Reset
 * http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
 */
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
	}

	/* remember to define focus styles! */
	:focus {
		outline: 0;
	}

	body {
		line-height: 1;
		color: black;
		background: white;
	}

	ol, ul {
		list-style: none;
	}

	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: separate;
		border-spacing: 0;
	}

	caption, th, td {
		text-align: left;
		font-weight: normal;
	}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content: "";
	}

	blockquote, q {
		quotes: "" "";
	}


/* HTML elements */
	html {
		height:100.1%;
	}

	/* positioning of main content in the body */
	body {
		background: #f90;
		font:62.5%/1.25 Arial, Verdana, sans-serif; /* reset 1em to 10px */
		text-align:center; /* IE 5.5 center */
		color:#000;
	}


	/* headings */
		h1,
		h2, 
		h3, 
		h4 {
            font-family:"Museo-700", Arial, Verdana, sans-serif;
			font-weight:bold;
		}
		
		/* the main site logo */
    		h1 {
                float:left;
                margin-right:15px;
                width:200px;
    			font-size:4.0em;
    			color:#f90;
    		}
    		
    		h1 span,
    		h1 strong,
    		h1 em {
    		    display:block;
    		}
    		
    		h1 span.open { line-height:0.9;}
    		h1 span.close { line-height:0.6;}
    		
    		h1 strong,
    		h1 em {
    		    font-style:normal;
    		    color:#000;
                font-size:0.5em;
    		}
    		
    		h1 em {
    		    color:#666;
    		}
		
		h2 {
			margin-bottom:0.8em;
			font-size:2.4em;
		}

		h3 {
			margin-bottom:0.5em;
			font-size:1.8em;
			line-height:1.1;
		}
		
		h4 {
			margin-bottom:0.2em;
			font-size:1.4em;
			line-height:1.1;
		}


	/* forms */
		fieldset { border:0px; }
		legend { display:none; }

		form {
			margin-bottom:2em;
		}

		/* reset all standard form fonts */
		form * {
			font-family:Arial, Verdana, sans-serif;
		}

		input {
			padding:3px 3px 3px 3px;
			font-size:1.1em;
		}
		
		select {
			width:12em;
			border:1px solid #c0c0c0;
			font-size:1.1em;
		}
		
		option {
			padding:1px 3px;
		}

		label, 
		form p {
			float:left;
			width:10em;
			margin-right:10px;
			padding-top:3px;
			font-size:1.2em;
			font-weight:normal;
		}
		
		textarea {
			width:220px;
			border:1px solid #c0c0c0;
			padding:5px 0px 5px 5px;
			margin-right:5px;
			font-size:1.1em;
		}
		
		/* forms - extra classes */
			input.text {
				width:15em;
				border:1px solid #c0c0c0;
				padding:4px 4px 4px 4px;
				margin:0px 5px 0px 0px;
			}

			input.radio {
				margin-top:4px;
			}
			
			input.checkbox {
				margin:4px 5px 0px 0px;
			}

			* html input.radio {
				margin-top:2px;
			}
			
			p.error,
			label.error {
				color:#666;
				font-weight:bold;
			}

			.button,
			button {
				background:#f90;
				color:#fff;
				border:0px;
				padding:4px 15px; 
				overflow:visible;
				width:auto;
				font-size:1.1em;
			}


			/* forms:input container */
				.input-container {
					display:block;
					margin-bottom:1.5em;
				}

				.input-container input {
					float:left;
				}
				
				/* to keep several elements within an input container horizontally aligned */
				.inputblock {
					float:left;
					width:250px; /* required for safari */
				}
					
			/* forms:errors */
				form .error {
					float:left;
					margin:0.2em 0px 1em 13em;
					display:inline; /* Win IE6 double margin float bug fix */
					background:url(../../img/site/static/error_bg_arrow_up.gif) #f90 no-repeat left top;
					padding:9px 12px 3px 12px;
				}

				/* overwrite some styles from input-container p */
				form .error p {
					float:none;
					width:auto !important;
					padding:0px;
					margin:0px !important;
					color:#fff;
				}


	/* tables */
		table {
			margin-bottom:1em;
			width:100%;
			border-collapse:collapse;
			font-size:1.2em;
		}

		thead th {
			white-space:nowrap;
			padding:2px 10px 2px 10px;
			border-right:1px solid #c0c0c0;
			text-align:left;
			font-weight:bold;
		}

		tbody th, 
		td {
			padding:2px 10px 2px 10px;
			background:#fff;
			border-right:1px solid #c0c0c0;
			text-align:left;
			font-weight:normal;
			vertical-align:top;
		}

		caption {
			margin-bottom:0.2em;
		}
		
		/* tables - extra classes */
			.odd td, 
			.odd th {
				background-color:#eee;
				border-right-color:#c0c0c0;
			}
		
			/* no right border for last columns */
			td.last,
			.odd td.last, 
			th.last, 
			.odd th.last {
				border-right:0px;
			}

			/* no right border for last columns */
			table tr.bottom td, 
			table tr.bottom th {
				border-bottom:0px solid #fff !important;
			}


	/* lists */
		ul,
		ol, 
		dl {
			margin:0px 0px 1.5em 0px;
			font-size:1.2em;
			line-height:1.25;
		}
		
		ul {
			list-style:none;
		}
		
		ol {
			margin-left:24px;
		}
		
		li {
			padding:0px 0px 0.5em 10px;
		}

		ul li {
			background:url(../../img/site/static/bullet_white.gif) transparent no-repeat 0px 4px;
		}
		
		dl dt {
			font-style:italic;
		}
		
		dl dd {
			margin-bottom:1em;
		}
		
		/* lists - nested lists */
		
		/* lists - extra classes */
			/* Action nav - links styled as buttons with rounded corners - ONE LINERS ONLY */
				ul.actionnav {
					margin:0px 0px 0.5em 0px; /* fixed for IE */
				}

				ul.actionnav li {
					padding:0px;
					margin:0.5em 0px 0.5em 0px;
					font-weight:bold;
					background:none;
				}

				ul.actionnav li a {
					float:left; /* to allow variable widths */
					display:block;
					text-decoration:none;
					color:#fff;
					font-weight:normal;
					background:#f90;
				}
				
				ul.actionnav li a.up { }
				
				ul.actionnav li a.down { }
				
				ul.actionnav li a span {
					display:block;
					padding:0.35em 1.25em;
				}
				
				ul.actionnav li a:hover {
					background:#666;
					color:#fff;
				}


	/* text */
		p {
			margin:0px 0px 1.5em 0px;
			font-size:1.2em;
			line-height:1.25;
		}
		
		strong {
			font-weight:bold;
		}
		
		em {
			font-style:italic;
		}
		
		code, 
		pre {
			padding:0px;
			margin:0px;
		}
		
		address {
			padding:0px;
			font-size:1.2em;
			font-style:normal;				
		}
		
		/* text:extra classes */
			p.nomargin {
				margin-bottom:0px !important;
			}

			.jobless {
				text-decoration:line-through;
			}

			/*  RSS links */
				p#rss {
					position:relative;
					left:16em;
					margin-top:-2.7em; /* move text and icon */
					top:-0.3em; /* just move icon */
					width:15px;
					height:15px;
					text-indent:-9999px;
				}

				/* set the borders and background colours for buttons */
				p#rss a {
					display:block;
					width:100%;
					height:100%;
					background:url(../../img/site/static/rss_icon_small.gif) transparent repeat-x left bottom;
					text-decoration:none;
				}
			

	/* misc */
		img {
			margin-bottom:2.5em;
			border:1px solid #c0c0c0;
		}


	/* links */
 		a,
		a:link {
			color:#333;				
			text-decoration:underline;
			outline:none;
		}

		a:hover,
		a:active,
		a:focus {
			color:#666;
			text-decoration:none;					
		}
		
		a:focus { 
			outline:1px dotted #ddd;
		}
		

	/* deprecated tags - alerting CMS users that they are using illegal tags 
		b, big, blink, center, font, i, layer, marquee, small, u {
			background:yellow;
			border:2px dashed green;
			color:red;
			font-size:30px;
			font-weight:bold;
		}
		b:after, big:after, blink:after, center:after,  font:after, i:after, layer:after, marquee:after, small:after, u:after { 
			content:" You are using a deprecated tag; please fix." 
		}
	*/


	/* global classes */
		/* print styles */
		.printonly { display:none !important; }
		
		/* clearfix - fixes float clearing issues */
			 .clearfix:after { /* fixed for IE */
				content:"."; 
				display:block; 
				height:0px; 
				clear:both; 
				visibility:hidden;
			}


		/* ul --> change | into | horizontal | navigation | links */
			ul.horiznavlist { }

			/* float selected element and all other links */
			ul.horiznavlist li {
				display:block;
				float:left;
				padding:0px 6px 0px 0px;
				background:none;
			}

			/* remove left padding from first item in a list */
			ul.horiznavlist li.first {
				padding-left:0px !important;
			}
			
			/* remove right padding from last item in a list */
			ul.horiznavlist li.last {
				padding-right:0px !important;
				border-right:0px !important;
			}
			
		
		/* horizontal rule (hr) - allows universal control */
			.hr {
				clear:both;
				height:3px;
				color:#333; /* needed for IE */
				background:transparent url(../../img/site/static/divider_grey.gif) repeat-x left top; /* needed for gecko and opera */
				border:0px solid #333; /* necessary to ensure hr is only 1px high in all browsers */
				padding:0px;
				margin:10px 0px 20px 0px;
			}

			hr {
				display:none;
			}
			

		/* Text included for non-visual users, hide content for screen */
			.context {
				height:1px; 
				left:0px; 
				overflow:hidden;
				position:absolute; 
				top:-500px;
				width:1px; 
			}


		/* Hides contents for screen, but leaves structure in place - for transparent images where the below can't be used */
			.context-flow {
				text-indent:-20000px;
				background:transparent no-repeat left top;
			}


		/* text that is 'replaced' by an image (via a span) */
			.replaced {
				position:relative;
			}

			.replaced span {
				background:transparent no-repeat left top;
				display:block;
				height:100%;
				left:-1px;
				position:absolute;
				top:0;
				width:100%;
			}
			
			
		/* tooltip */
			.tooltip-block {
				background:url(../../img/site/static/icon_tooltip_arrow.gif) transparent no-repeat left bottom;
				position: absolute;
				width:140px;
				z-index: 20;
				padding-bottom:8px;
			}

			.tooltip-block .inner {
				background:#f90;
				padding:5px;
			}

			.tooltip-block.right,
			.tooltip-block.right .inner {
				background-position:right bottom;
			}

			.tooltip-block h3 {
				font-size: 1.2em;
				font-family: Verdana, Helvetica, Arial;
				font-weight: bold;
				color: #fff; 
				text-align:left;
				margin:0;
			}
	
	
		/* BW image container */
			.bw-wrap {
				display:block;
				position:relative;
			}

			.bw-wrap img {
				position:absolute;
				left:0;
				top:0;
			}

			.bw-wrap img.bw {
				z-index:2;
			}

			.bw-wrap img.original {
				z-index:1;
			}
			
			.bw-wrap span.loader {
				display:block;
				position:absolute;
				left:0;
				top:0;
				width:100%;
				height:100%;
				background:url(/_includes/img/site/bw/bw-ajax-loader.gif) no-repeat 10px 10px;
				background-color:rgba(200, 200, 200, 0.3);
				z-index:10;
			}


/* global ids / areas */
	/* Jump links - accessibiltity friendly links at the top of every page */
		ul#skip {
			height:1px; 
              	left:0px; 
              	overflow:hidden;
              	position:absolute; 
              	top:-500px;
              	width:1px;
		}

		/* hide the skip navigation when not currently selected */
		ul#skip li {
			list-style-type:none;
			display:inline;
			background:none;
			padding-left:0px;
		}

		ul#skip li a {
			position:absolute;
			top:-9999px;
			left:-9999px;
			padding-left:0px;
			margin-bottom:0px;
			background:none;
		}

		ul#skip li a:focus, 
		ul#skip li a:active {
			position:absolute;
			margin:0;
			top:0;
			left:0px;
			background-color:#f90;
			border-bottom:1px solid #fff;
			display:block;
			width:99.2%;
			padding:1px 4px 1px 0;
			font-size:0.85em;
			text-align:right;
		}

		ul#skip li a:hover {
			background-color:#666;
		}

	
	/* wrapper - surrounds all page content */
		#wrapper {
			background: #fff url(../../img/site/static/header_bg_tile.gif) repeat-x left top;
		}
	
	/* inner wrap - allows for fixed width and full width bg */
		#inner-wrap {
			width:960px;
			margin:0px auto;
			text-align:left;
		}
	
			
	/* header - contains top bg image and main navigation */
		#header {
			width:100%;
			background: #fff url(../../img/site/static/header_bg_tile.gif) repeat-x left top;
			padding-top:85px;
		}
		
		#header-inner {
			width:960px;
			margin:0 auto;
			text-align:left;
		}
			
		/* Header:Navigation - left col with site name and nav */
			#header ul {
				margin:0 0 0 215px;
				padding:0;
				font-size:1.6em;
                font-family:"Museo-300", Arial, Verdana, sans-serif;				
			}
	
			#header ul li {
				float:left;
				background:none; /* remove default bullet */
				padding:0px;
				margin:0px;
			}
	
			#header ul li a {
				display:block;
				width:6.55em;
				height:3.45em; /* fixed for IE 8 */
				padding:0.3em 0px 0px 0.5em;
				background:#f90;
				border-right:1px solid #fff;
				text-decoration:none;
				color:#fff;
			}
	
			/* extra border to the left of first nav item */
			#header ul li#nav-home a {
				border-left:1px solid #fff;
			}

			/* Header:Navigation - selected element */
			#header ul li a:hover,
			#home #header ul li#nav-home a,
			#labs #header ul li#nav-labs a,
			.labs #header ul li#nav-labs a,
			#about #header ul li#nav-about a,
			#portfolio #header ul li#nav-portfolio a {
				background:#666;
			}
			
			/* remove background image colours for sliding version */
			.jsenabled #header ul li a,
			.jsenabled #header ul li a:hover,
			#home.jsenabled #header ul li#nav-home a,
			#labs.jsenabled #header ul li#nav-labs a,
			.labs.jsenabled #header ul li#nav-labs a,
			#about.jsenabled #header ul li#nav-about a,
			#portfolio.jsenabled #header ul li#nav-portfolio a {
				background:transparent;
			}
			
			
			/* Header:Navigation:Static styles, for smooth scrolling */
				/* position relative to allow movement of inner spans */
				.jsenabled #header ul li {
					position:relative;
					overflow:hidden;
				}
				
				/* position relative just so text can float over bg colours */
				.jsenabled #header ul li a {
					position:relative;
					z-index:5;
				}
				
				/* contains both background colour blocks */
				.jsenabled #header ul li span.tabcontainer {
					position:absolute;
					left:0px;
					top:0px;
					display:block;
					width:200%;
					height:100%;
					z-index:2;
				}
				
				/* the two background colour blocks */
				.jsenabled #header ul li span.tabon, 
				.jsenabled #header ul li span.taboff {
					display:block;
					float:left;
					width:50%;
					height:100%;
					background-color:#f90;
				}
				
				.jsenabled #header ul li span.tabon {
					background-color:#666;
				}
				
	
	/* Main content - surrounds heading and content areas */
		#main-content { 
			padding:30px 0px;
			background:#fff;
		}
			

	/* content */
 		#content {
			display:block;
			float:left;
			width:745px;
			background:transparent url(../../img/site/static/divider_grey.gif) repeat-x left top;
			padding-top:40px;
		}
	
			
	/* footer */
		#footer-wrap {
			background:url(../../img/site/static/footer_bg_tile.gif) repeat-x left top;
			padding-bottom:130px;
		}
		
		#footer {
			width:930px;
			margin:0px auto;
			padding:20px 15px;
			text-align:left;
		}
		
		#footer .block {
			float:left;
			width:195px;
		}
		
		#footer .block#contact {
			float:right;
			width:300px;
			text-align:right;
		}
			
		/* recapture */
			#recaptcha_widget_div img {
				position:static !important;
				opacity:1 !important;
			}
			
			#recaptcha_widget_div span.bw-wrap {
				display:inline !important;
			}
			
			#recaptcha_widget_div span.loader,
			#recaptcha_widget_div img.bw {
				display:none!important;
			}


/* page specific styles */		
	/* home page */
		/* no top divider line for home page */
		#home #content {
			background:none;
			padding-top:0px;
		}
		
		#home h3 {
			background:transparent url(../../img/site/static/divider_grey.gif) repeat-x left bottom;
			padding-bottom:0.5em;
		}
			
			/* Home:featured content area */
				#home #featured-wrap {
					background:#eaeaea;
					margin-bottom:3em;
				}
						
				#home #featured {
					position:relative;
					padding:2em;
				}
				
				#home #featured h2,
				#home #featured h3 {
					font-weight:normal;
					background:none;
					padding-bottom:0;
					width:530px;
				}
				
				#home #featured h2 {
				    font-size:1.4em;
				}
				
				#home #featured h2 em {
					font-size:0.75em;
				}
				
				#home #featured #artistinfo {
					margin-bottom:0em; /* Fixed for IE */
				}
				
				#home #featured #artistimg {
					float:left;
					margin:0 15px 4em 0; /* fixed for IE */
					width:130px;
					overflow:hidden;
				}
				
				#home #featured #artistimg img {
					margin:0;
					border:1px solid #c0c0c0;
				}
				
				#home #featured p#artisttext {
					float:left;
					width:560px;
					padding-bottom:4em;
				}
				
				/* labs link */
				#home #featured ul.actionnav {
					position:absolute;
					margin:0px;
					left:1.6em;
					bottom:2em;
				}
				
				/* powered by last fm */
				#home #featured p#poweredby {
					position:absolute;
					margin:0px;
					right:2em;
					bottom:2em;
				}
								
				#home #featured p#poweredby img {
					border:0;
					margin:0 0 0 0.5em;
				}
					
					
				/* Home:featured:bar timer */
					/* positioning to allow movement of filler */
					#bartimer {
						float:right;
						position:relative;
						background-color:#666;
						overflow:hidden; /* turn the bar into a mask - hide the filler overflow */
						margin-top:0.5em;
					} 

					#bartimer #filler {
						position:absolute;
						top:0px;
						left:0px;
						background-color:#f90;
					}
			
			
			/* Home:content:column layouts */
				#home #about-me,
				#home #recent-updates,
				#home #my-portfolio {
					float:left;
					width:205px;
					margin-right:65px;
				}

				#home #my-portfolio {
					margin-right:0px;
				}
			
			
			/* home:content:my portfolio:slideshow */
				#slideshow {
					position:relative;
					background:#eee;
					margin:0px 0px 2.2em 0px;
					width:205px;
					height:240px;
				}
				
				#slideshow h4 {
					padding:10px 0px 0px 10px;
				}
				
				#slideshow .slide h4 a {
					color:#666;
					text-decoration:none;
					height:auto;
					width:auto;
				}

				#slideshow h4 a:hover {
					color:#333;
				}

				#slideshow .slide {
					width:205px;
					height:200px;
				}

				/* hide all but the first slide */
				#slideshow .slide a { 
					display:block;
					height:180px;
				 }

				#slideshow .slide { display:none; }
				#slideshow .slide.selected { display:block; }

				#slideshow img,
				#slideshow .bw-wrap {
					margin:0px;
					padding:10px 10px 5px 10px;
					border:0px;
					width:185px;
					height:160px;
				}
					

				/*  home:content:right col:slideshow:nav  */
					#slideshow #slideshownav {
						display:block;
						position:absolute;
						bottom:4px;
						margin-bottom:0px;
						right:6px;
						width:100%;
					}

					/* dislays slide number, e.g. 5 / 7 */
					#slideshow #slideshownav p {
						position:absolute;
						top:7px;
						left:7px;
						margin-bottom:0px;
					}
														
					#slideshow #slideshownav a {
						float:right;
						margin:0px 5px 5px 0px;
						background-position:left top;
						background-repeat:no-repeat;
						background:#f90;
						color:#fff;
						padding:0.25em 1.05em;
						text-decoration:none;
						font-size:1.2em;
						font-weight:bold;
					}

					#slideshow #slideshownav a:hover {
						cursor:pointer;
						background:#666;
					}

					#slideshow #slideshownav a#slideback {	}
					#slideshow #slideshownav a#slidenext {	}
	
		/* Home:Latest updates */
			/* more space between list elements */
			#home #recent-updates ul li {
				padding-bottom:1.5em;
			}
			
			/* additional 'added' text */
			#home #recent-updates ul li em {
			}


						
	/* Portfolio page */
		#portfolio {}
		
		/* Portfolio:CV Download section */
			/* hide by default */
			#portfolio .expand {
				height:0;
				overflow:hidden;
			}
			
			/* non-js: show when clicked (extra class added on page refresh) */
			#portfolio .expand.open {
				height:auto;
				overflow:visible;
			}
			
			#portfolio form {
				width:675px;
			}
			
			#portfolio label {
				width:15em;
			}
			
			#portfolio form p {
				width:14.8em;
			}
			
			#portfolio form .error {
				margin-left:19em;
			}
			
			#portfolio form #recaptcha_widget_div {
				float:left; /* safari fix */
			}
				
		
		/* Portfolio:Projects */
			#portfolio #projects {
				background:url(../../img/site/static/divider_grey.gif) transparent repeat-x left top;
			}
			
			#portfolio #projects .project {
				padding:3em 0px 3em 0px;
				background:url(../../img/site/static/divider_orange.gif) transparent repeat-x left bottom;
			}
				
				
			/* Portfolio:Projects:Information column */
				#portfolio #projects .project .project-info {
					position:relative;
					float:left;
					width:215px;
					height:37.3em;
					margin-right:65px;
				}
				
				#portfolio #projects .project .project-info ul.actionnav li a {
					margin-bottom:0.5em;
					clear:left;
				}
				
				#portfolio #projects .project .project-info p.back-to-top a {
					position:absolute;
					bottom:0px;
					padding-left:20px;
					background:url(../../img/site/static/arrow_back-to-top.gif) transparent no-repeat 0 50%;
					text-decoration:none;
				}


			/* Portfolio:Projects:Image/more info column */
				#portfolio #projects .project .project-content {
					float:left;
					width:465px;
				}
				
				#portfolio.jsenabled #projects .project .project-content {
					position:relative; /* required for IE7 */
					height:37.3em;
					overflow:hidden;
				}
				
				#portfolio #projects .project .project-content img {
					margin-bottom:0px;
				}
				
				#portfolio.jsenabled #projects .project .project-content img {
					border-bottom:0;
				}
				
				#portfolio #projects .project .project-content .moreinfo {
					border-top:10px solid #f90;
					background:url(../../img/site/static/portfolio_moreinfo_bg.png) transparent repeat left top;
					border-top-width:10px;
					padding:1em 1em 1px 1em;
				}
				
				#portfolio #projects .project .project-content .bw-wrap {
					padding-bottom:4px;
				}
				
				#portfolio.jsenabled #projects .project .project-content .moreinfo {
					position:relative;
					margin-top:-4px;
					border:1px solid #c0c0c0;
					border-top:10px solid #f90;
					padding-bottom:1px;
					z-index:5;
				}
				

		
	/* Labs page */		
		.labs { }
		
		#labs-home .bw-wrap,
		.labs .bw-wrap {
			margin-bottom:2.9em;
		}
		
		
		/* labs:home */
			#labs-home .row {
				background:transparent url(../../img/site/static/divider_grey.gif) repeat-x left top;
				padding-top:2em;
				margin-top:1em;
			}
			
			
			#labs-home .project {
				float:left;
				width:205px;
				margin-right:65px;
			}
			
			#labs-home .project.rowend {
				margin-right:0px;
			}
					

		/* Labs:individual project page */
			/* labs:left col */
				.labs #spiel {
					float:left;
					width:475px;
					margin-right:65px;
				}
		
				.labs #spiel #comments {
					background:transparent url(../../img/site/static/divider_grey.gif) repeat-x left top;
					padding-top:2em;
					margin-top:2em;
				}
		
				/* additional 'added' text */
				.labs #spiel #comments ol {
				  margin:0;
				}
				
				.labs #spiel #comments ol li {
					margin:2em 0;
					padding:0;
				}
				
				.labs #spiel #comments .meta {
				  float:left;
				  width:80px;
				  margin-right:20px;
				  text-align:center;
			  }
			  
			  .labs #spiel #comments .meta strong {
			    display:block;
			  }
			  
			  .labs #spiel #comments .meta img {
			    margin:0;
			  }
				
				.labs #spiel #comments .comment {
				  float:left;
				  width:355px;
				  background:#eee;
				  padding:10px;
				  border-radius:5px;
				  position:relative;
			  }
			  
			  .labs #spiel #comments .comment:after {
			    display: block;
          position: absolute;
          left: -10px;
          top: 10px;
          content: " ";
          width: 0;
          height: 0;
          border: 10px solid transparent;
          border-right-color: #eee;
          border-left: none;
			  }
			  
			  .labs #spiel #comments .comment strong {
			    display:block;
			  }
			  
			  .labs #spiel #comments .odd .comment {
			    background:#ddd;
			  }
			  .labs #spiel #comments .odd .comment:after {
			    border-right-color:#ddd;
			  }
			  
			  .labs #spiel #comments .me .comment {
			    background:#f90;
			    color:#fff;
			  }
			  .labs #spiel #comments .me .comment:after {
			    border-right-color:#f90;
			  }
			  
			  
				
				
				/* additional 'added' text */
				.labs #spiel #comments ol li em {
					font-size:0.9em;
					font-style:normal;
					color:#666;
				}
				
				.labs #spiel #comments ol .me em {
				  color:#eee;
				}
				
				.labs #spiel #comments form textarea {
					width:27.7em;
					height:10em;
				}
				
				.labs #spiel #comments em {
					color:#f90;
				}
				
				/* line separating comments and form  */
				.labs #spiel #comments h4 {
					background:transparent url(../../img/site/static/divider_grey.gif) repeat-x left top;
					padding-top:2em;
					margin:2em 0px 1em 0px;
				}
				
				.labs #spiel #comments form #recaptcha_widget_div {
					float:left; /* safari fix */
				}
				
				
				/* labs:left col:style code */ 
					/* container for each content section */
					.labs #spiel .example {
						width:455px;
						overflow:auto;
						padding:0px 10px;
						margin-bottom:2em;
						background-color:#F6F4F5;
						border:1px solid #f90;
					}
						
					/* labs:left col:style code:style html highlighting */
						.html {
							font-size:1.4em;
						}

						.html .comment {
							color:#f90;
						}
						
						.html .tag {
							font-weight:bold;
							color:#B405E0;
						}
						
						.html .attribute {
							font-weight:bold;
							color:#f00;
						}	

						.html .string {
							color:#0039DC;
						}
						
						.html .doctype {
							color:#f60;
						}
								
								
					/*  labs:left col:style code:style js highlighting  */
						.javascript {
							font-size:1.4em;
						}

						.javascript .comment {
							color:#f90;
						}

						.javascript .brackets {
							color:#0039DC;
						}
						
						.javascript .string {
							font-weight:bold;
							color:#B405E0;
						}

						.javascript .keywords {
							font-weight:bold;
							color:#036;
						}	

						.javascript .global {
							color:#c96;
						}
								
					/* labs:left col:style code:style css highlighting */
						.css {
							font-size:1.4em;
						}
						
						.css .comment {
							color:#f90;
						}

						.css .keyword {
							font-weight:bold;
						}	

						.css .selector {
							font-weight:bold;
							color:#B405E0;
						}

						.css .property {
							color:#0039DC;
						}

						.css .unit {
							color:#c96;
						}
						
						.css .url {
							color:#00f;
						}
		
		
					/* labs:left col:style code:style php highlighting */
						.php {
							font-size:1.4em;
						}

						.php .keyword {
							font-weight:bold;
						}	

						.php .string {
							font-weight:bold;
							color:#B405E0;
						}

						.php .brackets {
							color:#0039DC;
						}

						.php .comment {
							color:#f90;
						}

						.php .global {
							color:#c96;
						}
		
		/* labs:right col */
			.labs #sidebar {
				float:left;
				width:205px;
			}
			
			.labs #sidebar #addthis a img {
				border:0px;
			}
	
			/* more space between list elements */
			.labs #sidebar ul li {
				padding-bottom:1.5em;
			}

			/* additional 'added' text */
			.labs #sidebar ul li em {
			}
			
			.labs #sidebar p#rss {
				margin-top:-3.15em; /* move text and icon */
				top:1em; /* just move icon */
				left:11em;
			}
						
				
					
	/* About page */
		/* about:intro */
			#about #intro {
				background:transparent url(../../img/site/static/divider_grey.gif) repeat-x left bottom;
				padding-bottom:1em;
				margin-bottom:2em;
			}
			
			#about #intro #me {
				float:right;
				margin-left:65px;
				width:205px;
			}
		
		
		/* about:people */
			#about #people {
				background:transparent url(../../img/site/static/divider_grey.gif) repeat-x left bottom;
				padding-bottom:1em;
				margin-bottom:2em;
			}
			
			#about #people ul {
				float:left;
				width:30%;
				margin-right:2%;
			}
			
			#about #people ul li em {
				font-size:0.85em;
			}
		

		/* about:playlilsts */
			#about #playlists {
				background:transparent url(../../img/site/static/divider_grey.gif) repeat-x left bottom;
				padding-bottom:1em;
				margin-bottom:2em;
			}
			
			#about #playlists .column {
			  float:left;
			  width:30%;
			  margin-right:2%;
			}
		
			
		/* about:flickr */
			#about #flickr {
				float:left;
				width:340px;
			}
			
			#about #flickr ol {
				margin-left:0px;
			}
			
			#about #flickr ol li {
				float:left;
				display:block;
				list-style-type:none;
				margin:0px 3px 3px 0px;
				padding:0px;
				width:81px;
				height:81px;
			}
			
			#about #flickr ol li.rowend {
				margin-right:0px;
			}

			#about #flickr ol li a {
				display:block;
			}
			
			#about #flickr ol li a img {
				margin:0px;
				border:3px solid #ccc;
			}
			
			#about #flickr ol li a:hover img {
				border-color:#f90;
			}
			
			
	/* about:last.fm */
		#about #lastfm {
			float:left;
			width:340px;
			margin-right:65px;
		}
		
		#about #lastfm ol {
			margin-left:30px;
		}
		
		#about #lastfm ol li {
			list-style:decimal;
		}
		
		/* top artists grey bg, to be coloured in */
		#about #lastfm .fill {
			height:1px;
			background-color:#c0c0c0;
			margin-top:1px;
			margin-bottom:2px;
			overflow:hidden; /* Win IE6 fix */
		}

		#about #lastfm .filler {
			display:block;
			height:1px;
			background-color:#f90;
		}