CSS Code for the CSS Tricks Home Page, circa August 2008
Discussed @ https://perishablepress.com/css-implementations-of-the-rich-and-famous/



<link rel="stylesheet" href="http://css-tricks.com/wp-content/themes/CSS-Tricks/style.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="http://css-tricks.com/wp-content/themes/CSS-Tricks/print.css" type="text/css" media="print" />
<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="http://css-tricks.com/wp-content/themes/CSS-Tricks/style-ie6.css" />
<![endif]-->

<link rel="stylesheet" href="http://css-tricks.com/wp-content/plugins/wp-page-numbers/classic/wp-page-numbers.css" type="text/css" media="screen" />

<!-- Start Of Script Generated By WP-Polls 2.31 -->
<link rel="stylesheet" href="http://css-tricks.com/wp-content/plugins/wp-polls/polls-css.css" type="text/css" media="screen" />
<style type="text/css">
.wp-polls .pollbar {
	margin: 1px;
	font-size: 13px;
	line-height: 15px;
	height: 15px;
	background-image: url('http://css-tricks.com/wp-content/plugins/wp-polls/images/default/pollbg.gif');
	border: 1px solid #ffffff;
}
</style>
<!-- End Of Script Generated By WP-Polls 2.31 -->








/*
	CSS-Tricks
	by: Chris Coyier
*/

/*
	RESET & BASIC SETUP
*/
* 													{ margin: 0; padding: 0; }
body 												{ font: 62.5% 'Lucida Grande', Verdana, Helvetica, Arial, sans-serif;
													  background: url("images/body-bg.jpg") repeat; color: #323232; }
a img 												{ border: none; }
a 													{ outline: none; }


/*
	UTILITY
*/
.floatleft 											{ float: left; margin-right: 10px; }
.floatright 										{ float: right; margin-left: 5px; }
.clear 												{ clear: both; }
.clearfix:after 									{ content: " "; display: block; height: 0; clear: both; visibility: hidden; }
* html .clearfix 									{ height: 1%; }
.clearfix 											{ display: block; }
.callout 											{ font-size: 1.8em; font-family: Georiga, serif; font-weight: bold; }
.crossout 											{ text-decoration: line-through;}
a.button 											{ display: block; background: url(images/button.gif) no-repeat; height: 30px; 
								                      line-height: 29px; float: left; margin-right: 8px;
								  					  text-decoration: none; width: 191px; border: none; }
a.button:hover										{ border: none; }
span.download 										{ background:url(images/download.gif) no-repeat 10px 8px; 
								  					  text-indent: 30px; display: block; }
span.demo 											{ background:url(images/demo.gif) no-repeat 10px 8px; 
								  					  text-indent: 30px; display: block; }


/*
	STRUCTURE
*/
#page 												{ width: 1011px; margin: 0px auto 30px;
								  					  background: url(images/page-bg.jpg) repeat-y white; }
#top-bar 											{ height: 110px; width: 1011px; margin: 0 auto; }
#top-bar a 											{ border: none; }
#top-bar a.ad 										{ background: url(/images/ad-psd2html.jpg) no-repeat bottom center;
													  height: 110px; width: 502px; text-indent: -9999px; float: right; }
#top-bar a.ad:hover 								{ background-position: top center; }


/*
	NAVIGATION
*/
#nav 												{ height: 74px; }
#nav ul 											{ list-style: none; }
#nav ul li 											{ display: inline; }
#nav ul li a 										{ height: 74px; float: left; text-indent: -9999px; border: none; }
#nav ul li a.articles 								{ width: 200px; background: url(/images/nav-articles.jpg) center bottom no-repeat; }
#nav ul li a.videos 								{ width: 168px; background: url(/images/nav-videos.jpg) center bottom no-repeat; }
#nav ul li a.downloads 								{ width: 167px; background: url(/images/nav-downloads.jpg) center bottom no-repeat; }
#nav ul li a.forums 								{ width: 166px; background: url(/images/nav-forums.jpg) center bottom no-repeat; }
#nav ul li a.contact 								{ width: 310px; background: url(/images/nav-contact.jpg) center bottom no-repeat; }
#nav ul li a:hover 									{ background-position: center center; }
body#downloads #nav ul li a.downloads,
body#phpbb #nav ul li a.forums,
body#contact #nav ul li a.contact,
body#video #nav ul li a.videos,
body#blog #nav ul li a.articles 					{ background-position: center top; }

#menu-bar 											{ height: 34px; padding-left: 45px; padding-right: 75px; }
	#menu-bar ul {
		list-style: none;
		}
		#menu-bar ul li {
			float: left;
			}
			#menu-bar ul li a {
				display: block;
				text-indent: -9999px;
				outline: none;
				border: none;
				}
				#menu-bar ul li a.button-about {
					width: 91px;
					height: 28px;
					background: url(images/button-about.gif) bottom center no-repeat;
				}
				#menu-bar ul li a.button-contact {
					width: 117px;
					height: 28px;
					background: url(images/button-contact.gif) bottom center no-repeat;
				}
				#menu-bar ul li a:hover {
					background-position: top center;
				}
				
	#menu-bar .floatright {
		float: right;
		margin-right: 10px;
		padding-top: 2px;
}

#printed-article {
	display: none;
}

#main-content {
	padding: 0px 0px 0px 40px;
	width: 570px;
	float: left;
}

.inside-ad-block {
	margin-top: 20px;
	margin-bottom: 20px;
}
	
p {
	font-size: 1.1em;
	line-height: 1.4em;
	margin-bottom: 1.2em;
	}

a {
	color: #0066CC;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px dotted #999;
	outline: none;
	}
	a:hover {
		border-bottom: 1px solid #999;
		color: black;
	}
	a.more-link {
		display: block;
		padding: 3px;
		border: 1px solid #3852c3;
		width: 175px;
		margin-top: 10px;
		}
		a.more-link:hover {
			color: white;
			background: #3852c3;
		}
h1 { 
	font-size: 3.0em;
	color: #c39b3b;
	font-weight: normal;
	font-family: Georgia, serif;
	margin-bottom: 15px;
}
h2 {
	font-size: 3.4em;
	}
	h2.post-title a {
		color: #27221F;
		font-family: Helvetica, Arial, sans-serif;
		text-decoration: none;
		border: none;
		display: block;
		padding: 5px;
		letter-spacing: -1px;
	}
	h2.post-title a:hover {
		color: #b30000;
	}
h3, h2#comments, h2#trackbacks, h2#postcomment { 
	font-size: 2.2em; 
	font-weight: normal;
}
h4 { font-size: 1.6em; }

.post {
	margin-bottom: 35px;
	}
	.post p.article-author {
		font-weight: bold;
		font-size: 1.0em;
		background: #ffe8ca;
		padding: 3px;
		text-indent: 5px;
	}
	.post p {
		line-height: 1.5em;
	}
	.post ul, .post ol, ul#trackbacklist {
		margin: 10px 0 18px 25px;
	}
	.post ul, ul#trackbacklist {
		list-style: none;
	}
	.post ol ol {
		list-style-type: lower-alpha; 
	}
	.post li, ul#trackbacklist li {
		font-size: 1.1em;
		line-height: 1.7em;
		margin-top: 0.5em;
		margin-bottom: 0.9em;
		background: url(images/bullet.png) top left no-repeat;
		text-indent: 25px;
	}
	.post li p {
		font-size: 1.0em;
	}

.alignleft {
	float:left;
	text-align:left;
}

.alignright {
	float:right;
	text-align:right;
}

.pagetitle {
	font-size: 1.6em;
	margin-bottom: 20px;
}

blockquote {
	padding: 10px 0 0 55px;
	margin: -10px 0 0 0;
	background: url(images/left-quote.png) top left no-repeat;
	min-height: 54px;
	height: auto !important;
	height: 54px;
}


#commentlist code { width: 450px; }

code {
	line-height: 1.4em;
	overflow: auto;
	display: block;
  	padding: 10px;
  	background: url(images/code-sample.png) no-repeat bottom left #F0F0F0;
  	margin-bottom: 15px;
	margin-top: 5px;
	font-size: 1.4em;
	width: 540px;
}

pre code[class]:after {
  content: 'highlight: ' attr(class);
  display: block; text-align: right;
  font-size: smaller;
  padding-top: 0.5em;
  color: #666;
}

pre code, 
.ruby .subst {
  color: black;
}

.string,
.function .title,
.class .title, 
.tag .attribute .value,
.css .rules .value,
.preprocessor,
.ruby .symbol,
.built_in,
.sql .aggregate,
.django .template_tag,
.django .variable,
.smalltalk .class {
  color: #800;
}

.comment,
.java .annotation,
.template_comment {
  color: #888;
}

.number,
.regexp,
.javascript .literal,
.smalltalk .symbol,
.smalltalk .char {
  color: #080;
}

.javadoc,
.ruby .string,
.python .decorator,
.django .filter .argument,
.smalltalk .localvars,
.smalltalk .array,
.css .attr_selector,
.xml .pi {
  color: #88F;
}

.keyword,
.css .id,
.phpdoc,
.function .title,
.class .title,
.vbscript .built_in,
.sql .aggregate,
.rsl .built_in,
.smalltalk .class,
.xml .tag .title {
  font-weight: bold;
}


#sidebar {
	float: right;
	width: 352px;
	padding-right: 25px;
	}
	.sidebar-box {
		background: url(images/sidebar-box-bg-middle.png) left top repeat-y;
		margin-bottom: 5px;
	}
	.sidebar-box .sidebar-inside {
		padding: 0 12px;
	}
	
	#search-area input#s {
		border: 1px solid #666;
		padding: 6px;
		margin: 3px 5px 3px 0px;
		display: block;
		float: left;
		width: 211px;
	}
	#search-area #submit-button {
		float: left;
		margin-top: 3px;
	}
	
	a.blog-rss {
		height: 32px;
		width: 186px;
		display: block;
		float: left;
		background: url(images/subscribe-articles-rss.jpg) no-repeat bottom center;
		border: none;
		text-indent: -9999px;
	}
	a.blog-email {
		height: 41px;
		width: 186px;
		display: block;
		float: left;
		background: url(images/subscribe-articles-email.jpg) no-repeat bottom center;
		border: none;
		text-indent: -9999px;
	}
	a.video-rss {
		height: 32px;
		width: 141px;
		display: block;
		float: left;
		background: url(images/subscribe-videos-rss.jpg) no-repeat bottom center;
		border: none;
		text-indent: -9999px;
	}
	a.video-itunes {
		height: 41px;
		width: 141px;
		display: block;
		float: left;
		background: url(images/subscribe-videos-itunes.jpg) no-repeat bottom center;
		border: none;
		text-indent: -9999px;
	}
	a.blog-rss:hover, a.blog-email:hover, a.video-rss:hover, a.video-itunes:hover {
		background-position: top center;
		border: none;
	}	
	span.count {
		font-family: "Gill Sans", Georgia, serif;
		font-size: 1.8em;
		font-weight: bold;
		color: #B30000;
	}
	#sidebar p {
		margin: 0;
	}
	
	
	.sidebar-ads {
		background: url(images/sidebar-ads-bg-middle.png) center repeat-y;
		margin-bottom: 5px;
		}
		a.sponsor-link {
			display: block;
			padding: 5px;
			float: left;
			border: 1px solid #c1b599;
			margin: 0px 8px 8px 0;
			}
			a.sponsor-link:hover {
				border: 1px solid #b30000;
			}
		.sidebar-ads-inside {
			padding-left: 35px;
		}
	
	#sidebar ul {
		list-style: none;
		margin-top: 10px;
	}
	#sidebar ul li a {
		display: block;
		width: 305px;
		color: #303030;
		padding: 7px 10px 7px 10px;
		border-bottom: solid 1px #c1b599;
		text-decoration: none;
		}
		#sidebar ul li a:hover {
			background-color: #b30000;
			color: white;
		}
		
.sidebar-link-unit {
	padding-left: 12px;
	padding-bottom: 5px;
	margin-top: -10px;
	border-bottom: 1px dashed #ccc;
}

#sidebar ul li a.regular-link {
	display: inline;
	color: #06C;
	padding: 0;
	border: 0;
}

#sidebar ul h2 {
	padding-bottom: 5px;
	border-bottom: dashed 1px #CFCFCF;
	font-size: 1.5em;
}

.stripViewer {
	position: relative;
	overflow: hidden; 
	width: 352px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	clear: both;
}

.stripViewer .panelContainer {
	position: relative;
	left: 0; top: 0;
	width: 100%;
	list-style-type: none;
}

.stripViewer .panelContainer .panel {
	float: left;
	height: 100%;
	position: relative;
	width: 352px; /* Also specified in  .stripViewer  above */
}

.stripViewer .panelContainer .panel .wrapper {
	padding: 0px;
}

.stripNav { /* This is the div to hold your nav (the UL generated at run time) */
	margin-left: 0px;
}

.stripNav ul { /* The auto-generated set of links */
	list-style: none;
}

.stripNav ul li {
	float: left;
}

#sidebar .stripNav li a {
	display: block; width: 117px; height: 55px; text-indent: -9999px; padding: 0; border: none;
}

.stripNav li.tab3 a { background: url(/images/tab-popular.png) top center no-repeat; position: relative; right: -3px; }
.stripNav li.tab1 a { background: url(/images/tab-ss.png) top center no-repeat;  }
.stripNav li.tab2 a { background: url(/images/tab-featured.png) top center no-repeat; position: relative; right: -1px; }

#sidebar .stripNav li a:hover {
	background-position: bottom center;
	background-color: white;
}

.stripNav li.tab3 a.current {
	background: url(/images/tab-popular.png) bottom center no-repeat;
}

.stripNav li.tab1 a.current {
	background: url(/images/tab-ss.png) bottom center no-repeat;
}

.stripNav li.tab2 a.current {
	background: url(/images/tab-featured.png) bottom center no-repeat;
}

.stripNavL, .stripNavR {
	display: none;
}

#sidebar .stripViewer .panel ul { margin: 0; padding-top: 10px; }

.voting-buttons {
	text-align: center;
	}
	#sidebar ul li p.voting-buttons a {
		display: inline;
	}
	#sidebar ul li p.voting-buttons a:hover {
		background: none;
	}

#respond {
	font-size: 1.6em;
	margin-bottom: 5px;
}

ol#commentlist {
	list-style-type: none;
}

ol#commentlist li {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 10px 10px 0 10px;
	margin-top: -1px;
	width: 550px;
	}
	ol#commentlist p.comment-number {
		font-size: 7em;
		float: right;
		margin-left: 20px;
		top: 0;
		color: #e8e8e8;
		font-family: Garamond, Georgia, Times, Serif;
	}
	ol#commentlist li.author p.comment-number {
		color: #8a9c6d;
	}
	ol#commentlist li.author p.comment-number:before {
		content: "*";
	}

ol#trackbacklist {
	list-style-type: decimal;
}

ol#trackbacklist li {
	margin-left: 20px;
	margin-bottom: 4px;
	padding-bottom: 4px;
	border-bottom: 1px dashed #ccc;
}

#comment_title {
	margin-bottom: 5px;
}

#commentform {
	margin-bottom: 20px;
}

#commentform p {
	margin-bottom: 10px;
}

#commentform textarea {
	font-family: Tahoma;
	padding: 5px;
	height: 160px;
	width: 100%;
	background: url(images/entry-bottom.gif) no-repeat bottom right;
	border: 2px dotted #d1d1d1;
}

input.comment-field {
	width: 190px;
	padding: 3px;
	border: 2px dotted #d1d1d1;
	margin-right: 5px;
}

.comment-text {
	padding-left: 60px;
}


#footer {
	text-align: center;
	background: url(/images/footer-bg.jpg) no-repeat;
	min-height: 526px;
	height: auto !important;
	height: 526px;
	position: relative;
	}
	a.chrislink {
		text-indent: -9999px;
		display: block;
		width: 192px;
		height: 72px;
		position: absolute;
		left: 245px;
		top: 145px;
		border: none;
	}
	a.twitterbutton {
		text-indent: -9999px;
		display: block;
		width: 141px;
		height: 62px;
		position: absolute;
		left: 41px;
		top: 361px;
		border: none;
	}
	#footer-meta {
		position: absolute;
		top: 152px;
		left: 805px;
		}
		#footer-meta ul {
			list-style: none;
			margin-bottom: 10px;
			}
			#footer-meta ul li a {
				display: block;
				padding: 1px;
				border: none;
				color: #124d61;
			}
			#footer-meta ul li a:hover {
				background: #124d61;
				color: white;
			}
	#footer-friends {
		position: absolute;
		top: 152px;
		width: 117px;
		left: 572px;
		}
		#footer-friends ul {
			list-style: none;
			margin-bottom: 10px;
			}
			#footer-friends ul li a {
				display: block;
				padding: 1px;
				border: none;
				color: #ffe0c9;
			}
			#footer-friends ul li a:hover {
				background: #124d61;
				color: white;
			}
			
	#twitter_div {
		position: absolute;
		left: 218px;
		top: 265px;
		width: 220px;
		height: 213px;
		overflow: auto;
		}
		#twitter_div ul {
			list-style: none;
			text-align: left;
			}
			#twitter_div ul li {
				font-size: 2.1em;
			}

html > body .footer-column {
	width: 226px;
	margin: 0 10px 0 6px;
	float: left;
	margin-bottom: 15px;
}


















/* PRINT */

body {
	font-family: Georgia, serif;
	background: none;
	color: black;
}

page {
	width: 100%;
	margin: 0; padding: 0;
	background: none;
}

a img { border: none; }

#top-bar, #nav, #menu-bar, #sidebar, 
h2#postcomment, h2#trackbacks, 
form#commentform, p.comment-number, 
ol#trackbacklist, 
#footer  {
	display: none;
}

.entry a:after {
	content: " [" attr(href) "] ";
	font-size: smaller;
	text-decoration: none;
}

#printed-article {
	border: 1pt solid #666;
	padding: 10pt;
}

h2#comments {
	page-break-before: always;
}