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

       fb42.com CSS

       handcoded by Francis Booth
       June to August 2005
       and April 2006

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

body { margin:0; padding:0; background-color:#fff; font:11px/17px 'Lucida Grande', 'Lucida Sans Unicode', verdana, arial, sans-serif; color:#424242; }
#bodyWrap { margin:0 auto; width:640px; } /* IE stupidity needs the width here too */
#bodyWrap, #nameLogo, #mainWrap, #headerImage, #headerImage>b { width:640px; }

#toplink { position:absolute; } /* FFmac needs this */
#headerImage>b { display:block; background-image:url(images/hatchWhite21trans.png); }
#headerImage, #headerImage>b { height:256px; }

#headerImage, #nameLogo, #mainWrap, #footer { border-bottom:1px solid #424242; }
#headerImage, #mainWrap { margin-bottom:16px; }
#nameLogo, #footer { padding-bottom:16px; }

#nameLogo { height:64px; }
#nameLogo a { display:block; height:64px; text-indent:-9999px; border:0; }
#myName { width:161px; float:left; background:url(images/francisBooth.gif) no-repeat left bottom; }
#myName:hover { background:url(images/francisBooth.gif) no-repeat bottom right; }
#myLogo { width:64px; float:right; background:url(images/fbSquare.gif) left; }
#myLogo:hover { background:url(images/fbSquare.gif) right; }

#mainWrap { background:url(images/hatchGrey192wide.gif) repeat-y right; }
#mainWrap { float:left; }
#main { width:448px; float:left; padding-bottom:48px; }
#sidebar { width:192px; float:right; padding:8px; width:175px; }

#nav { margin:0; padding:0; text-transform:uppercase; width:448px; height:25px; }
#nav li { padding:0; margin:0; list-style:none; float:left; margin-right:8px; z-index:100; }
#nav a { color:#420042; border-bottom:none; padding-top:2px; line-height:22px; }
#nav a:hover { color:#900; border-top: 3px solid #900; }
#nav a, p.storyDate, #footer { font-size:9px; }

#sidebar, #footer { color:#666; }
#sidebar { bottom:0px; }
#footer p { margin:0; }
#footer a { color:#420042; border-bottom:1px dotted #420042; }
#footer a:hover { border-bottom:2px solid #900; color:#900; cursor:pointer; }
#postFoot { display:block; height:32px; background:url(images/hatchGreyWide.gif); }
.introBlurb { margin:32px 0 38px; color:#6F3F70; color:#840084; font:19px/21px 'Arial Narrow', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', verdana, arial, sans-serif; }

a { color:#900; text-decoration:none; border-bottom:1px dotted #900; margin-bottom:1px; padding-bottom:0px; }
a:hover { border-bottom:2px solid #900; color:#900; cursor:pointer; }
a img { border:none; } /* sorts ie */




h1, h2, h3, h4, h5, h6 { font-weight:bold; color:#420042; }
h1 { clear:both; }
h1 { font:21px/22px 'Arial Narrow', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', verdana, arial, sans-serif; }
h1 { border-bottom:1px solid #ccc; margin:36px 0 10px; padding:0 0 7px; font-weight:normal; }
h2, h3, h4, h5, h6 { font-size:12px; line-height:16px; margin:25px 0 5px; }
h3, h4, h5, h6	{ font-size:11px; line-height:14px; padding:0; margin:12px 0 1px; letter-spacing:0.1em; }
p, ul { padding:0; margin:0 0 8px 0; }
ul { padding-left:0px; }
li { padding:0; margin:0 0 4px 16px; list-style:circle outside; line-height:1.3em; }

h1.dateAfter { margin-bottom:0; }
p.storyDate { color:#999;  text-transform:uppercase; }
#main p { padding-right:16px; }



/* page specific CSS */
body#about a#aboutNav,
body#design a#designNav,
body#music a#musicNav,
body#photography a#photographyNav,
body#blog a#blogNav,
body#links a#linksNav { border-top: 3px solid #424242; }

#about #main img,
#design #main img,
#music #main img,
#blog #main img { float:right; padding:0 16px 8px 8px; }


body#design h1 { padding-top:25px; margin-top:0; }



#photography #mainWrap { background:url(images/hatchGrey64wide.gif) repeat-y right; }
#photography #main { width:590px; float:left; padding-bottom:0; }
#photography .photoset { margin:18px 0 0; }

#photography .photoset a { border:none; padding:8px 0; width:64px; height:68px; display:block; float:left; margin:0 0 8px 0; background:url(images/hatchGreyWide.gif); }
#photography .photoset a:hover { border:none; background:#900 none; }
#photography .photoset a img { padding:0px; margin:0px; border-top:2px #fff solid; border-bottom:2px #fff solid; }


/*
#photography #sidebar { width:128px; float:right; padding:0px; height:525px; }
*/
/*
#photography #sidebar a {  border-left:2px solid #fff; display:block; margin:0; padding:0; width:64px; height:64px; border-bottom:none; float:right; }
#photography #sidebar a:hover { border-left:1px solid #900; padding-right:16px; border-bottom:none;  }
#photography #nav { width:512px; }

#photography table,
#photography table tr,
#photography table td { width:500px; height:500px; border:0; margin:0; padding:0; border-spacing:0; border-collapse: collapse; vertical-align:middle; text-align:left; clear:both; margin-top:9px; }
*/

/* blog */
/* p.toCommentLink a { padding-left:20px; background:url(images/speechBubble.gif) no-repeat left top; } */
p.toCommentLink  { padding-top:7px; }
p.toCommentLink a { padding-left:28px; padding-top:7px; background:url(images/fbBalloonMini.gif) no-repeat left top; }
p.toCommentLink a:hover { background:url(images/fbBalloonMiniRed.gif) no-repeat left top; }

#blog #main { padding-bottom:0; }
#nextPrev { border-top:1px solid #c9c9c9; margin-top:25px; width:448px; float:left; }
#nextPrev a, #nextPrev p { padding:0; margin:0; }
#nextPrev a { padding-left:40px; display:block; width:183px; height:32px; border:none; line-height:32px; float:left; background-color:#222; }
#nextPrev .prev a { background:url(images/navArrowsPrev.gif) no-repeat left top; color:#420042; }
#nextPrev .prev a:hover { background:url(images/navArrowsPrevOver.gif) no-repeat left top; color:#900; }
#nextPrev .next a { background:url(images/navArrowsNext.gif) no-repeat left top; color:#420042; }
#nextPrev .next a:hover { background:url(images/navArrowsNextOver.gif) no-repeat left top; color:#900; }

#blog h1 a { color:#420042; text-decoration:none; border-bottom:none; padding-bottom:1px; }
#blog h1 a:hover { border-bottom:2px solid #900; color:#900; cursor:pointer; width:448px; }
#blog h1 a .permalink { font:11px/1px 'Lucida Grande', 'Lucida Sans Unicode', verdana, arial, sans-serif; color:#900; border-bottom:1px dotted #900; }
#blog h1 a:hover .permalink { border-bottom:none; }


/* for some reason ie needs this restated (it's above too) */
#headerImage { height:256px; } 


testtesttest { border:1px red solid; }