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

Title:			styleMain.css
Browser(s): 	All (except IE)

Author: 		Elliot Jay Stocks (www.elliotjaystocks.com)
Created: 		02.11.2006
Last modified: 	26.04.2008

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





/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */

*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h5, h5, h6, pre, form, label, fieldset, input, 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 { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h5, h5, h6 { font-size:100% }
q:before, q:after { content:''}





/* Global reset-RESET */
/* The below restores some sensible defaults */

strong { font-weight: bold }
em { font-style: italic }
ol, ul, li { list-style:none }

* a { position:relative } /* Gets links displaying over a PNG background */
a { outline:none } /* Gets rid of Firefox's dotted borders */
a img { border:none } /* Gets rid of IE's blue borders */






/* Typography */

h1.title a { text-indent:-9999px; width:267px; height:120px; position:absolute; top:120px; left:-2px; overflow:hidden; display:block; border:none }
h1.title a:hover { border:none }
body h1.title a 		{ background:url(h1Logo-blog02.jpg) top left no-repeat }
body h1.title a { background:url(h1Logo-blog02.jpg) top left no-repeat }
body h1.title a		{ background:url(h1Logo-blog02.jpg) top left no-repeat }
body h1.title a		{ background:url(h1Logo-blog02.jpg) top left no-repeat }

h1 { font:24px/24px Georgia, 'Times New Roman', Times, serif bold; margin:60px 0 2px 0; color:#fff }
h2 { font:20px/20px Georgia, 'Times New Roman', Times, serif bold; margin:60px 0 2px 0; color:#fff }
h2.siteDecription { background:url(siteDescription05.gif) top left no-repeat; position:absolute; top:70px; left:440px; width:458px; height:96px; text-indent:-9999px }
h3 { font:italic 16px/24px Georgia, 'Times New Roman', Times, serif bold; margin:40px 0 2px 0; color:#fff }
h4 { font:16px/24px Georgia, 'Times New Roman', Times, serif bold; margin:40px 0 2px 0; color:#fff }

p { margin:2px 0 16px 0 }
body, h4, p, li, dt, dd, label, input, textarea { font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif }
h4 { font-size:14px; line-height:18px; color:#fff }
body, p, li, dt, dd, label { font-size:11px; line-height:18px; color:#fff }
input, textarea { font-size:11px; color:#000; padding:2px }
blockquote { font:11px/18px Georgia, 'Times New Roman', Times, serif bold }

pre, code { margin:2px 0 16px 0; background:#000; color:#ccc; font:12px/16px 'Courier New', Courier, monospace }
pre { padding:10px }

a { color:#cf9; text-decoration:none }
a:hover { color:#fff; border-bottom:2px solid #900; padding:0 0 1px 0 }
h2 a { color:#fff }
a.hasAnImage:hover, a.hasAnImage:hover img { border:none }

span.smallcaps { text-transform:lowercase; font-variant:small-caps }

ol.iNeedNumbers { margin:0 0 0 50px }
ol.iNeedNumbers li { list-style-type:decimal-leading-zero; padding:0 0 0 6px }

span.crossedOut { text-decoration:line-through }

/*body { font:20px/20px "Courier New", Courier, mono; color:#0f0 } */ /* To easily spot text sitting outside of a tag */






/* Layout (basic) */

body { background:#191919; text-align:center }

div#headerWrapper, div#footerWrapper { width:100%; /* height:360px; */ margin:0; padding:1px 0 0 0 } /* The 1px padding is there to fix a weird height bug. Don't ask... */
html>body div#headerWrapper, html>body div#footerWrapper { background:url(headerWrapperBG01.png) center left repeat-x } /* 'html>body' because IE can't understand parent/child selectors */

div#headerContent { width:890px; height:360px; margin:-60px auto 0 auto; padding:0; text-align:left; position:relative }
html>body div#headerContent { background:url(headerBG01.png) top left no-repeat } /* 'html>body' because IE can't understand parent/child selectors */

div#wrapper { width:910px; margin:-80px auto 0 auto; padding:0; text-align:left; position:relative }

div.main { width:410px; float:left; padding:0 33px 0 10px }
div.sidenotes { width:220px; float:left }
div.extras { width:200px; float:left; padding:0 0 0 30px }
br.columnEnder { clear:both; border:none; height:0 }

div#footerWrapper { width:100%; height:360px; margin:0 }
html>body div#footerWrapper { background:url(headerWrapperBG01.png) center left repeat-x } /* 'html>body' because IE can't understand parent/child selectors */

div#footerContent { background:url(footerContentBG01.gif) center left no-repeat; width:890px; height:220px; margin:0 auto; padding:140px 0 0 0; text-align:left; position:relative; /* border:1px solid yellow */ }






/* Layout (advanced) */

div.extras p { float:left }

body.pageIsPortfolio div#wrapper { width:970px; padding:0 0 0 75px } /* updated 02.01.2008 */
/* body.pageIsPortfolio div.main { width:950px; padding:0 0 0 50px } */ /* NOTE SURE WHAT I WAS GOING ON ABOUT HERE SO NOW IT'S COMMENTED OUT (updated 02.01.2008). What's with all this weird padding and width shifting? I need extra room for the floated <div>'s right-margin, so this padding helps maintain the page in the centre of the browser. */

ol.portfolioList li { margin:0 65px 0 0; float:left; width:420px; height:500px }
ol.portfolioList li h2 { position:relative; width:420px }
ol.portfolioList li h2 span { font-style:italic; color:#999; position:absolute; top:0; right:8px }
ol.portfolioList li h2+a:hover { border:none } /* Oh yeah, adjacent sibling selectors, baby! IE won't understand this, of course... */
ol.portfolioList li a img { width:400px; height:200px; margin:10px 0 12px 0; border:5px solid #fff }
html>body ol.portfolioList li a img { background:url(semiTransparentGreen02.png) } /* Hidden from IE */
ol.portfolioList li a:hover img { border:none; padding:5px }
ol.portfolioList li a+p { font-style:italic } /* Oh yeah, adjacent sibling selectors, baby! IE won't understand this, of course... */

body.pageIsVault { background:#000 url(bodyBG-vault02.jpg) top center no-repeat fixed }
body.pageIsVault div#footerWrapper { display:none }
body.pageIsVault ul.smallPrint { display:none }
body.pageIsVault h3 { color:#fff; margin:60px 0 20px 0 }
body.pageIsVault p { color:#fff }
body.pageIsVault p a { color:#ccff99 }
body.pageIsVault p a:hover { color:#fff }
body.pageIsVault a[title="Subscribe to my RSS feed"] { display:none } /* Sexy attribute selector action! */

p.backToTop { padding:24px 0 0 0 }
p.copyrightInfo { position:absolute; top:132px; left:690px; width:190px }

div.crossbar { width:100%; margin:40px 0 0 0; padding:20px 0 10px 0; background:url(semiTransparent.png); border-top:5px solid #000; border-bottom:5px solid #000 }
div.crossbar div { width:260px; padding:0 20px; float:left }
div.crossbar div h2 { margin:0 0 2px 0; color:#ffc }
div.crossbar div p { color:#ffc }
div.crossbar div ul { margin:-5px 0 10px 0 }
div.crossbar div ul li { list-style:disc; margin:0 0 0 30px; padding:0 0 0 14px; color:#ffc }






/* Tid bits */

span.caption { color:#666 }

div.aboutPics { margin:62px 0 0 0 }
/* div.aboutPics div div img, div.aboutPics noscript img { border:5px solid #fff; width:213px; height:213px } */ /* Used when smoothGallery is in place */
div.aboutPics img { border:5px solid #fff; width:213px; height:213px } /* Used temporarily until smoothGallery is in place */

p.freelanceGubbins { margin:2px 0 50px 0 }
/*
p.CVbutton { background:url(iconPDF24.gif) top left no-repeat; margin:8px 0 60px 0; padding:0 0 0 34px; width:190px; height:26px }
p.CVbutton a { height:26px }
*/

input { border:1px solid #000 }
input.formButton { background:#cf9; padding:2px; color:#000 }

html>body a.continueReadingButton { background:url(iconArrow.gif) top right no-repeat; padding:0 24px 0 0 }

img.secondLeafPackshot { border:5px solid #fff; margin:0 0 20px 0 }
input.buySLbutton { margin:0 0 6px 0; padding:0; border:none }
a.buySLbutton { margin:0 0 18px 0; padding:0; background:url(buyButton-iTunes.gif) top left no-repeat; width:107px; height:9px; text-indent:-9999px; display:block; border:none }

div.lastFMwrapper { width:184px; height:405px; border:5px solid #fff; margin:20px 0 0 0 }






/* Navigation */

ul.nav { width:200px; height:69px; position:absolute; top:142px; left:456px }
ul.nav li a { margin:0; padding:0 }
ul.nav li a:hover { border:none }

/*  
Handy measurements for the nav image replacement:

	The distance from the top to the...
	
	blog button = 0 / 69px
	portfolio button = 23px / 92px
	about button = 46px / 115px
	the vault button = 0 / 69px
	contact button = 23px / 92px
	RSS button = 46px / 115px

	The distance from the far-left to the...
	
	blog button = 0
	portfolio button = 0
	about button = 0
	the vault button = 110px
	contact button = 110px
	RSS button = 110px
	
	The width of all buttons = 110px
*/

li.navBlog a, li.navPortfolio a, li.navAbout a, li.navVault a, li.navContact a, li.navRSS a { background:url(navBG04.gif) top left no-repeat; text-indent:-9999px; display:block; position:absolute; top:0; width:80px; height:23px; overflow:hidden }

li.navBlog a 							{ background-position:0 0; top:0; left:0 }
li.navBlog a:hover 						{ background-position:0 -69px }
body.pageIsBlog li.navBlog a 			{ background-position:0 -69px }

li.navPortfolio a						{ background-position:0 -23px; top:23px; left:0 }
li.navPortfolio a:hover					{ background-position:0 -92px }
body.pageIsPortfolio li.navPortfolio a	{ background-position:0 -92px }

li.navAbout a							{ background-position:0 -46px; top:46px; left:0 }
li.navAbout a:hover						{ background-position:0 -115px }
body.pageIsAbout li.navAbout a			{ background-position:0 -115px }

li.navVault a 							{ background-position:-110px 0; top:0; left:92px }
li.navVault a:hover 					{ background-position:-110px -69px }
body.pageIsVault li.navVault a 			{ background-position:-110px -69px }

li.navContact a							{ background-position:-110px -23px; top:23px; left:92px }
li.navContact a:hover					{ background-position:-110px -92px }
body.pageIsContact li.navContact a		{ background-position:-110px -92px }

li.navRSS a								{ background-position:-110px -46px; top:46px; left:92px }
li.navRSS a:hover						{ background-position:-110px -115px }
body.pageIsRSS li.navRSS a				{ background-position:-110px -115px }






/* BLOG : General */
img.articleIllustration { /*width:400px; height:100px;*/ border:5px solid #fff; margin:-5px 0 0 0 }
div.searchBox input#s { width:161px }
h2.recently { margin:60px 0 4px 0 }
ul.searchResults li { margin:0 0 30px 0 }
h1.archiveHeading { margin:60px 0 24px 0 }

body.pageIsBlog div#wrapper { width:940px; padding:0 0 0 28px }
body.pageIsBlog div.extras { width:230px; float:left; padding:0 0 0 30px }





/* BLOG : Twitter */

div#twitter_update_list { width:196px; margin:60px 0 0 0; padding:0 }
div#twitter_update_list p { margin:0 }
div#twitter_update_list p.tweet { font:italic 16px/18px Georgia, 'Times New Roman', Times, serif bold; margin:0 0 10px 0; padding:50px 0 0 0; background:url(../images/presentation/twitterbird01.gif) top left no-repeat }






/* BLOG : Featured */

ul.featured { width:166px; background:url(semiTransparent.png); border:5px solid #000; margin:60px 0 10px 0; padding:10px }
ul.featured h2 { margin:0 0 2px 0 }
ul.featured span { color:#ffc }

ul.featured ul.featuredPrint { border-bottom:5px solid #000; margin:0 0 10px 0 }
ul.featured ul.featuredPrint li { border-bottom:1px solid #000; padding:10px 0 }
ul.featured ul.featuredPrint li span { font:16px/18px Georgia, 'Times New Roman', Times, serif bold }
ul.featured ul.featuredPrint li img.printMagOdd { float:left; border:5px solid #fff; width:50px; margin:5px 10px 0 0 }
ul.featured ul.featuredPrint li img.printMagEven { float:right; border:5px solid #fff; width:50px; margin:5px 0 0 10px }

ul.featured ul.featuredOnline li { position:relative; border-bottom:1px solid #000; padding:5px 0 5px 15px; background:url(../images/presentation/iconBullet01.gif) center left no-repeat }
ul.featured ul.featuredOnline li:hover { background:#000 }
ul.featured ul.featuredOnline li a.siteButton { position:absolute; top:5px; left:130px; width:16px; height:16px; background:url(../images/presentation/iconPermalink01.gif) top left no-repeat; text-indent:-9999px }
ul.featured ul.featuredOnline li a.siteButtonNo { position:absolute; top:5px; left:130px; width:16px; height:16px; background:url(../images/presentation/iconNoPermalink01.gif) top left no-repeat; text-indent:-9999px }
ul.featured ul.featuredOnline li a.screengrabButton { position:absolute; top:5px; left:150px; width:16px; height:16px; background:url(../images/presentation/iconFlickr01.gif) top left no-repeat; text-indent:-9999px }
ul.featured ul.featuredOnline li a.siteButton:hover, ul.featured ul.featuredOnline li a.siteButtonNo:hover, ul.featured ul.featuredOnline li a.screengrabButton:hover { border:none }






/* BLOG : Flickr */
/* REDUNDANT: use only with the flickrRSS plugin */

/*
ul.flickrThumbs li { float:left; margin:0 28px 28px 0 }
ul.flickrThumbs li a img { border:5px solid #fff; width:75px; height:75px }
html>body ul.flickrThumbs li a img { background:url(semiTransparent.png) }
ul.flickrThumbs li a:hover img { border:none; padding:5px }
ul.flickrThumbs a { border:none; background:none }
*/





/* BLOG : Flickr - the JS way */

.flickr_badge_image { float:left }
.flickr_badge_image a { border:none; margin:0; padding:0 }
.flickr_badge_image a:hover { border:none; margin:0; padding:0 }
.flickr_badge_image a img { border:5px solid #fff; width:170px; height:75px; margin:0 24px 24px 0 }
html>body .flickr_badge_image a img { background:url(semiTransparentGreen02.png) } /* Hidden from IE */
.flickr_badge_image a:hover img { border:none; padding:5px }






/* BLOG : Comments */

ul.commentsList { border-top:5px solid #000 }
li.commentContent { padding:20px 0 10px 0; border-bottom:5px solid #000; position:relative }
li.commentContent.alt { background:url(semiTransparent.png) } 

li.commentContent div.commenterDetails { width:130px; padding:0 20px 0 0; position:absolute; top:20px; left:10px }
li.commentContent div.commenterDetails h4.commentAuthor { margin:0; padding:0 }
li.commentContent div.commenterDetails img.gravatar { border:1px solid #fff; margin:-10px 0 5px 0 }
li.commentContent div.commentBody { min-height:100px; margin:0 0 0 160px; padding:0 10px 0 0 }
li.commentContent.authorIsElliot div.commenterDetails { width:200px }
li.commentContent.authorIsElliot div.commentBody { margin:40px 0 0 90px }
li.commentContent.authorIsElliot div.commenterDetails h4.commentAuthor { font:italic 24px/24px Georgia, 'Times New Roman', Times, serif }

div#commentForm input.textfield { width:398px; margin:0 0 12px 0 }
div#commentForm input.submit { width:403px; margin:0 0 12px 0 }
div#commentForm textarea.commentbox { width:398px; height:200px; margin:0 0 12px 0 }

p.commentsTagsGuide { font-size:9px; line-height:14px; color:#999; margin:2px 0 6px 0 }
#commentform #author, #commentform #email, #commentform #url, #commentform textarea { background:#fff; border:1px solid #000; padding:2px }

/*ul.recentComments li { border-bottom:1px dotted #fff; padding:10px 0 12px 0 }*/

div.livePreviewBox { background:url(semiTransparent.png); padding:10px; width:378px; color:#666 }
div.livePreviewBox p { color:#666 }






/* Lists, glorious lists */

ul.oldFashionedList li { list-style:disc; margin:0 0 20px 12px; padding:0 0 0 14px }
ul.conciseList { margin:0 0 20px 0 }
ul.conciseList li { margin:0 0 6px 12px }

ul.inlineFlickrPics { }
ul.inlineFlickrPics li { float:left }
ul.inlineFlickrPics li a:hover {border:none }
ul.inlineFlickrPics li a img { border:5px solid #fff; width:75px; height:75px; margin:0 10px 10px 0 }
ul.inlineFlickrPics li a:hover img { border:5px solid #fff }

ul.dates li { border-bottom:1px dotted #fff }
ul.dates li:hover { background:url(semiTransparentGreen02.png) }
ul.dates li a { display:block; padding:10px 0 12px 0 }
ul.dates li a:hover { border:none; padding:10px 0 12px 0 }

ul.speaking li { border-bottom:1px dotted #fff }
ul.speaking li:hover { background:url(semiTransparentGreen02.png) }
ul.speaking li a { display:block; padding:10px 0 12px 0 }
ul.speaking li a:hover { border:none; padding:10px 0 12px 0 }
ul.speaking li a em { display:block; color:#fff }

ul.blogroll { margin:-10px 0 0 0 }
ul.blogroll li { border-bottom:1px dotted #fff }
ul.blogroll li:hover { background:url(semiTransparentGreen02.png) }
ul.blogroll li a { display:block; padding:10px 0 12px 24px }
ul.blogroll li a[href="http://twistedintellect.com"] 		{ background:url(http://jorgenarnor.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://31three.com/weblog"] 			{ background:url(http://31three.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://artofadambetts.com/weblog"] 	{ background:url(http://artofadambetts.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://markboulton.co.uk/journal"] 	{ background:url(http://markboulton.co.uk/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://carsonified.com"] 			{ background:url(http://carsonified.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://bearskinrug.co.uk"] 			{ background:url(http://bearskinrug.co.uk/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://firewheeldesign.com"] 		{ background:url(../images/presentation/favicon-firewheel.gif) center left no-repeat }
ul.blogroll li a[href="http://jasperhauser.nl/weblog"] 		{ background:url(../images/presentation/favicon-jasper.gif) center left no-repeat } /* Attribute selectors - yeah! */
ul.blogroll li a[href="http://hicksdesign.co.uk"] 			{ background:url(http://hicksdesign.co.uk/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://shauninman.com"] 				{ background:url(http://shauninman.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://danielmall.com"] 				{ background:url(http://danielmall.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://jasonsantamaria.com"] 		{ background:url(../images/presentation/favicon-jsm.gif) center left no-repeat }
ul.blogroll li a[href="http://mezzoblue.com"] 				{ background:url(http://mezzoblue.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://jinabolton.com"] 				{ background:url(../images/presentation/favicon-jinabolton.gif) center left no-repeat }
ul.blogroll li a[href="http://playgroundblues.com"] 		{ background:url(http://playgroundblues.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://sam.brown.tc"] 				{ background:url(../images/presentation/favicon-sambrown.gif) center left no-repeat }
ul.blogroll li a[href="http://andybudd.com"] 				{ background:url(http://andybudd.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://jeffcroft.com"] 				{ background:url(http://jeffcroft.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://456bereastreet.com"] 			{ background:url(http://456bereastreet.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://astheria.com"] 				{ background:url(http://astheria.com/wp-content/themes/astheria/images/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://dkeithrobinson.com"] 			{ background:url(../images/presentation/favicon-dkr.gif) center left no-repeat }
ul.blogroll li a[href="http://snook.ca/jonathan"] 			{ background:url(../images/presentation/favicon-snook.gif) center left no-repeat }
ul.blogroll li a[href="http://jontangerine.com"] 			{ background:url(http://jontangerine.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://typesites.com"] 				{ background:url(../images/presentation/favicon-typesites.gif) center left no-repeat }
ul.blogroll li a[href="http://madebyelephant.com"] 			{ background:url(http://madebyelephant.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://webdesignerwall.com"] 		{ background:url(http://webdesignerwall.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://robweychert.com"] 			{ background:url(../images/presentation/favicon-robweychert.gif) center left no-repeat }
ul.blogroll li a[href="http://subtraction.com"] 			{ background:url(http://subtraction.com/favicon.ico) center left no-repeat }
ul.blogroll li a[href="http://ilovetypography.com"] 		{ background:url(http://ilovetypography.com/favicon.ico) center left no-repeat }

ul.blogroll li a:hover { border:none; padding:10px 0 12px 24px }

ul.recentComments li { border-bottom:1px dotted #fff }
ul.recentComments li:hover { background:url(semiTransparentGreen02.png) }
ul.recentComments li a { display:block; padding:10px 0 12px 0; color:#fff }
ul.recentComments li a:hover { border:none; padding:10px 0 12px 0; /*color:#fff*/ }
ul.recentComments li a strong { color:#cf9; font-weight:normal }
ul.recentComments li a:hover strong { /*color:#cf9*/ }

ul.recentReads li { border-bottom:1px dotted #fff; height:auto; width:200px }
ul.recentReads li:hover { background:url(semiTransparentGreen02.png) }
ul.recentReads li a { display:block; padding:10px 0 12px 0 }
ul.recentReads li a:hover { border:none; padding:10px 0 12px 0 }
ul.recentReads li a img { border:5px solid #fff; width:50px; float:left; margin:0 10px 0 0 }
ul.recentReads li a span { color:#fff; margin:0; width:120px; padding:0 }
ul.recentReads li a span strong { color:#cf9; font-weight:normal }
ul.recentReads li a br { clear:both }

ol.chronology li { color:#ffc; font-weight:bold; position:relative; border-top:1px solid #000; padding:4px 0 0 0; margin:0 0 40px 0 }
ol.chronology li.firstDate { border:none }
ol.chronology li span { color:#fff; font-weight:normal; position:absolute; left:100px }

ul.friends li { border-bottom:1px dotted #fff }
ul.friends li.friendIsSam a { background:url(friendPic-sam.jpg) 0 15px no-repeat }
ul.friends li.friendIsNeil a { background:url(../images/presentation/friendPic-neil.jpg) 0 15px no-repeat }
ul.friends li.friendIsMark a { background:url(../images/presentation/friendPic-mark.jpg) 0 15px no-repeat }
ul.friends li.friendIsFrancis a { background:url(../images/presentation/friendPic-francis.jpg) 0 15px no-repeat }
ul.friends li.friendIsMarc a { background:url(../images/presentation/friendPic-marc.jpg) 0 15px no-repeat }
ul.friends li.friendIsTim a { background:url(../images/presentation/friendPic-tim.jpg) 0 15px no-repeat }
/* I wanted to avoid having to explicity assign a class to each <li> but there was no way around it... */
ul.friends li:hover { background:url(../images/presentation/semiTransparentGreen02.png) }
ul.friends li a { display:block; padding:10px 0 12px 70px; color:#fff }
ul.friends li a:hover { border:none; padding:10px 0 12px 70px }
ul.friends li a strong { color:#cf9; font-weight:normal }

ul.softwareLove li { border-bottom:1px dotted #fff }
html>body ul.softwareLove li.appIsWordpress a { background:url(../images/presentation/appIcon-wordpress2.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsMint a { background:url(../images/presentation/appIcon-mint.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsTextmate a { background:url(../images/presentation/appIcon-textmate.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsWriteroom a { background:url(../images/presentation/appIcon-writeroom.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsDisco a { background:url(../images/presentation/appIcon-disco.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsTransmit a { background:url(../images/presentation/appIcon-transmit.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsCyberduck a { background:url(../images/presentation/appIcon-cyberduck.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsDropsend a { background:url(../images/presentation/appIcon-dropsend.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsFlock a { background:url(../images/presentation/appIcon-flock.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsNewsfire a { background:url(../images/presentation/appIcon-newsfire.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsXtorrent a { background:url(../images/presentation/appIcon-xtorrent.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsAcquisition a { background:url(../images/presentation/appIcon-acquisition.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsUndercover a { background:url(../images/presentation/appIcon-undercover.png) 0 16px no-repeat }
html>body ul.softwareLove li.appIsAppzapper a { background:url(../images/presentation/appIcon-appZapper.png) 0 16px no-repeat }
/* I wanted to avoid having to explicity assign a class to each <li> but there was no way around it... */
ul.softwareLove li:hover { background:url(semiTransparentGreen02.png) }
ul.softwareLove li a { display:block; padding:10px 0 12px 82px; color:#fff }
ul.softwareLove li a:hover { border:none; padding:10px 0 12px 82px }
ul.softwareLove li a strong { color:#cf9; font-weight:normal }

ul.aboutThisSite li { margin:0 0 20px 0 }

ul.smallPrint { position:absolute; top:194px; left:690px }
ul.smallPrint li { float:left; margin:0 10px 50px 0 }
ul.smallPrint li a { text-indent:-9999px; display:block; height:30px; margin:0; padding:0 }
ul.smallPrint li a:hover { border:none }
ul.smallPrint li.eGreenpeace a { background:url(enviroLogo-greenpeace-s.gif) top left no-repeat; width:31px }
ul.smallPrint li.eWWF a { background:url(enviroLogo-wwf-s.gif) top left no-repeat; width:31px }
ul.smallPrint li.eFOE a { background:url(enviroLogo-foe-s.gif) top left no-repeat; width:22px }





/* Buttons - hidden from IE */
html>body a.buttonFlickr { margin:6px 0 0 -2px; background:url(button-flickr.png) top left no-repeat; width:200px; height:16px; text-indent:-9999px; display:block }
html>body a.buttonFlickr:hover { height:15px; border:none }

html>body a.buttonTop { margin:31px 0 0 0; background:url(button-top.png) top left no-repeat; width:410px; height:16px; text-indent:-9999px; display:block }
html>body a.buttonTop:hover { height:15px; border:none }

html>body a.buttonContinue { margin:0 0 80px -2px; background:url(button-continue.png) top left no-repeat; width:410px; height:16px; text-indent:-9999px; display:block }
html>body a.buttonContinue:hover { height:15px; border:none }

html>body a.buttonCV { margin:4px 0 60px -2px; background:url(button-CV.png) top left no-repeat; width:200px; height:26px; text-indent:-9999px; display:block }
html>body a.buttonCV:hover { height:25px; border:none }

html>body a.button-buyiTunes { margin:0 0 40px 0; background:url(button-buyiTunes.png) top left no-repeat; width:220px; height:16px; text-indent:-9999px; display:block }
html>body a.button-buyiTunes:hover { height:15px; border:none }





/* And one last thing... */

/* body { background:#191919 url(bodyBG01-cropped.jpg) top center no-repeat fixed } */ 
body { 

/*background:#1a1a1a url(bodyBG-v45-01.jpg) top center no-repeat fixed;*/
background:#1a1a1a;
background-image:url(bodyBG-v45-01.jpg);
background-repeat:repeat;
background-attachment:fixed;
 
 

} 


/* This is all the way down here so that - in theory - everything else will load before the (rather huge) background image does */





/* Just temporarily... */
div.poem { background:url(tempPoem01.png) top left no-repeat; width:604px; height:202px; text-indent:-9999px; display:block; position:absolute; top:0; right:50% }