*{margin:0;padding:0} body{font-family:sans-serif; /* desired font size (target) = 32px font size inherited form assumed browser default font size (context) = 16px following the formula: target ÷ context = result 32px ÷ 16px = 200% relative font size */ font-size:200%; /* desired line height = 48px font size inherited from = 32px 48px ÷ 32px = 1.5em relative line height */ line-height:1.5em} h1{/* 64px ÷ 32px = 2em */ font-size:2em; /* 96px ÷ 64px = 2em */ line-height:1.5em; /* 24px ÷ 64px = 0.375em */ margin-bottom:0.375em; /* 16px ÷ 64px = 0.25em */ margin-left:0.25em} h2{font-weight:normal; /* 32px ÷ 32px = 1em */ font-size:1em; /* 16px ÷ 32px = 0.5em */ margin-left:0.5em} a{outline:none} ul{/* 48px ÷ 32px = 1.5em */ margin-bottom:1.5em; /* 60px ÷ 32px = 1.875em */ margin-left:1.875em} li{list-style:none} li>a{background:url(/img/sprites.png) no-repeat;padding-left:24px} /* .fn class is required by the hCard Microformat */ .fn{color:black;text-decoration:none;cursor:default} .no-favicon{background:none;padding-left:0} /* I’m styling the links’ background attributes instead of the list items’ list-style-image attributes so that the favicon is clickable. I'm also using image sprites as described in this ALA artice by Dave Shea: http://www.alistapart.com/articles/sprites The sprites are generated with the CSS Sprite Generator: http://spritegen.website-performance.org/ I use a vertical offset of 16px and manually add 10px to the top of the generated image.*/ #amazon{background-position:0 0} #email{background-position:0 -32px} #facebook{background-position:0 -64px} #flickr{background-position:0 -96px} #gowalla{background-position:0 -128px} #lastfm{background-position:0 -160px} #phone{background-position:0 -192px} #sms{background-position:0 -224px} #twitter{background-position:0 -256px} #wakoopa{background-position:0 -288px} #contact{background:url(/img/me.png) no-repeat left center} #footer{ /* 16px ÷ 32px = 0.5em */ font-size:0.5em; /* 32px ÷ 16px = 1.5em */ line-height:1.5em; /* 16px ÷ 16px = 1em */ margin-left:1em; position:absolute; /* 12px ÷ 16px = 0.75em */ bottom:0.75em;left:0} #footer a{text-decoration:none} #footer-arrow{color:black} #footer-text{text-decoration:underline} /* Thomas Francis Duesing, Jr. */