/* 转载请注明出处：脚本之家  www.jb51.net */
@font-face {
	font-family: 'Pictos';
	src: url('/assets/fonts/pictos-web.eot');
	src: local('?'), url('/assets/fonts/pictos-web.woff') format('woff'), url('/assets/fonts/pictos-web.ttf') format('truetype'), url('/assets/fonts/pictos-web.svg#webfontIyfZbseF') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'LeagueGothic';
    src: url('League_Gothic-webfont.eot');
    src: url('/assets/fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/assets/fonts/League_Gothic-webfont.woff') format('woff'),
         url('/assets/fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('/assets/fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}



/* reset
------------------------------------------------------------------ */
html {
	font-size: 100%; 
	text-rendering: optimizeLegibility;
}
html, body { 
	background-color: #140202; 
	margin: 0; 
	padding: 0; 
	font: normal normal normal 1em/1.6 "Helvetica Neue", Arial, sans-serif;
	font-weight: 400;
	color: #444;
	color: rgba(0, 0, 0, 0.8);
}

h2 { margin: .4em 0 .2em; font-size: 3em; line-height: 1.1; letter-spacing: -.055em; color: rgba(0, 0, 0, 0.8);}
h3 { color: #515151; font-size: 1.8em; margin: 1em 0 0.25em; padding: .2em 0 0; letter-spacing: -.055em; line-height: 1.2; color: rgba(0, 0, 0, 0.7); }
h4 { line-height: 1.2; font-size: 1.5em; padding: 0; margin: 0.6em 0 0em; letter-spacing: -.055em; }
h5 { color: #515151; font-size: 1.2em; font-weight: bold; line-height: 1.2; letter-spacing: -.055em; margin: 1.6em 0 -.6em; }

a { text-decoration: none; color: #3698c6; }
a img { border: none; }

p {
	margin: 0.6em 0 1.6em;
}

audio {
	display: block;
	width: 100%;
	margin: 0.6em 0 1.6em;
	height: 1.8em;
}

h3 a { color: #444; }
.fredline-list section:first-child h3 { margin-top: 0; }

article, section {
	display: block;
}

strong {
	color: #222;
}

	a span.highlight {
		color: #369891;
		font-weight: bold;
		background-color: #ffb;
		padding: 2px 5px 3px;
		margin: -2px -5px -3px;
	}

hgroup h3 { font-size: 1.8em; color: #444; margin-top: -.4em; margin-bottom: .8em; line-height: 1.1; display: block; font-style: normal; letter-spacing: -.045em; }

ul, ol {
	margin: 1.6em 0;
	padding-left: 1.6em;
}

tt, var, kbd {
	font: normal normal normal 1em/1.6 Consolas, Monaco, "Courier New", fixed;
	background-color: #d8eff7;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	padding: .1em .3em .15em;
	white-space: nowrap;
}

code {
	display: block; 
	padding: .4em 1em .4em 1em; 
	border: 1px dashed #ccc;
	border-left: none;
	border-right: none; 
	margin: 1em -1em 2em -1em;
	position: relative;
	background: #eee;
	background: -moz-linear-gradient(90deg, #f7f7f7 0%, #ffffff 25%, #ffffff 75%, #f7f7f7 100%);
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #f7f7f7), color-stop(0.25, #ffffff), color-stop(0.75, #ffffff), color-stop(1.0, #f7f7f7));
	font-family: Consolas, Monaco, Courier, fixed; 
}

.clouds .html-tag, .clouds .css-attribute { color: rgb(96, 96, 96); }
.clouds .string { color: rgb(93, 144, 205); }
.clouds .comment { color: rgb(188, 200, 186); }
.clouds .css-selector, .clouds .storage { color: rgb(197, 39, 39); }
.clouds .number { color: rgb(70, 166, 9); }
.clouds .unit { color: rgb(150, 220, 95); }
.clouds .keyword { color: rgb(175, 149, 111); }
.clouds .helper { color: rgb(191, 120, 204); }
.clouds .constant { color: rgb(57, 148, 106); }

aside {
	margin: .6em 0 1.6em;
}

aside img {
	width: 100%;
}
/* 转载请注明出处：脚本之家  www.jb51.net */
aside .caption {
	text-align: center;
	color: #888;
	font-size: 0.9em;
	margin-bottom: 1.6em;
}

	aside .caption small {
		display: block;
		font-style: italic;
	}
	
	aside.to-the-right {
		width: 50%;
		float: right;
		margin-left: 2em;
		margin-bottom: 1em;
		margin-top: 1em;
	}
	
	aside.to-the-left {
		width: 50%;
		float: left;
		margin-right: 2em;
		margin-bottom: 1em;
		margin-top: 1em;
	}


/* accessibility
------------------------------------------------------------------ */
hr, .skip-to-content { display: none; }


/* structure & helpers
------------------------------------------------------------------ */
.stage {
	width: 84%;
	margin: 0 auto;
	position: relative;
	min-width: 280px;
	max-width: 860px;
}

.clear {
	display: block;
	clear: both;
}

.clickable-button {
	-moz-border-radius: 24px;
	-webkit-border-radius: 24px;
	border-radius: 24px;
	background: #f7f7f7;
	background: -moz-linear-gradient(90deg, #e9e9e9 0%, #f7f7f7 100%);
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #e9e9e9), color-stop(1.0, #f7f7f7));
}


/* typography
------------------------------------------------------------------ */
.describer {
	font-family: Georgia, serif;
}

.ndash {
	margin: 0 .15em;
}

a.more:after {
	content: ' ?';
}

.update {
	padding-bottom: 1.6em;
	padding-left: 1em;
	padding-right: 1em;
	margin-left: -1em;
	margin-right: -1em;
	border-bottom: 1px dotted #ddd;
}


/* shock!
------------------------------------------------------------------ */
.header { background-color: #ad1a39; overflow: hidden; }
.header .stage { height: 6em; }
.shock { position: relative; }


/* logo
------------------------------------------------------------------ */
h1 {
	background: transparent url('/img/fredhq.png') scroll no-repeat 0 0;
	margin: 0;
	position: absolute;
	bottom: 16px;
	left: 0;
	line-height: 1;
	font-size: 2.5em;
	width: 124px; 
	height: 39px;
	text-indent: -9999px;
	overflow: hidden;
	z-index: 12000;
}
h1 span { font-variant: small-caps; }
h1 a { color: #fff; display: block; }
.logo-flourish {
	background: transparent url('/img/bg/flourishes/logo.png') scroll no-repeat 0 0;
	width: 73px;
	height: 135px;
	position: absolute;
	bottom: -64px;
	opacity: 0.16;
	left: 96px;
	z-index: 11900;
}


/* messaging
------------------------------------------------------------------ */
.session-message {
	border: 1px solid #999;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	list-style: none;
	padding-left: 0;
	text-align: left;
}

	.session-message li {
		padding: .5em .8em;
	}
	
.error {
	color: #9f5465;
	border-top-color: #f7d0d9;
	border-left-color: #c39ea7;
	border-right-color: #c39ea7;
	border-bottom-color: #9f5465;
	background: -moz-linear-gradient(90deg, #efbec9 0%, #f7e0e5 100%);
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #efbec9), color-stop(1.0, #f7e0e5));
}


/* forms
------------------------------------------------------------------ */
form { margin: 0 0 1em; }
input, textarea, select { 
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px; 
	border-radius: 4px; 
	width: 100%; 
	border: 1px solid #ddd; 
	border-top-color: #bbb; 
	padding: .2em .4em; 
	margin: .2em 0 0;
}
select { padding: .2em .4em .1em; width: auto; }

dl { margin: 0 0 0.5em; width: 98%; }
dl.multiple { float: left; margin-right: 6%; width: 46%; margin-top: 0; }
dl.last { margin-right: 0; }

dt, dd { padding: 0; margin: 0; font-weight: normal; }

dt label {
	font-size: 0.9em;
	font-weight: bold;
}

div.coaching {
	font-size: 0.7em;
	color: #aaa;
	font-family: "Lucida Grande", "Helvetica Neue", sans-serif;
	margin-top: .4em;
}

input.button {
	border: 2px solid #2B89AF;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	padding: .2em .4em;
	margin: 0;
	float: right;
	-moz-box-shadow: 0 3px 5px #777;
	-webkit-box-shadow: 0 3px 5px #777;
	background-color: #3698c6;
	color: #fff;
	width: auto;
}

	input.button:active {
		-moz-box-shadow: 0 0px 2px #777;
		-webkit-box-shadow: 0 0px 2px #777;
	}


/* nav
------------------------------------------------------------------ */
nav { display: block; position: relative; z-index: 999999; }
nav ul { float: right; list-style: none; margin: 0; padding: 0; }
nav li { float: left; padding: .3em .4em; }
nav a { display: block; padding: .4em .6em; color: #b52637; text-transform: lowercase; text-decoration: none; }
nav li:last-child, nav li:last-child a { margin-right: -.6em; }
nav li.active { background: transparent url('/img/bg/nav/active.png') scroll no-repeat 50% 0; }


/* content
------------------------------------------------------------------ */
.content { 
	background-color: #fff; 
	padding-bottom: 1em; 
	width: 100%; 
	overflow: hidden; 
}

.third ul.feed {
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

	.feed a {
		background: transparent url('/img/icons/social-media/connections/feed.png') scroll no-repeat 0% 50%;
		padding-left: 1.7em;
	}

.meta {
	font-size: 0.9em;
	color: #949494;
	background-color: #e6e6e6;
	-webkit-border-top-right-radius: 64px;
	-webkit-border-bottom-right-radius: 64px;
	-moz-border-radius-topright: 64px;
	-moz-border-radius-bottomright: 64px;
	border-top-right-radius: 64px;
	border-bottom-right-radius: 64px;
	padding: .4em 1.2em .45em 900em;
	margin: 1em -.6em 1.5em -900em;
	float: left;
	width: auto;
	position: relative;
	z-index: 20;
}
.meta strong, .meta time { color: #6b6b6b; font-weight: bold; }
.meta cite { font-size: 0.85em; line-height: 1.7; display: block; font-style: normal; color: #a2a2a2; padding-right: .5em; }
.meta .tag { font-weight: bold; }
.meta .post-date { margin-right: 1em; }

.reads {
	position: relative;
	z-index: 10;
	background-color: #ccc;
	margin-left: -898.8em;
	margin-top: 3.8em;
	padding-top: .6em;
	padding-bottom: .35em;
	padding-right: 1.3em;
	color: #666;
}

	.reads a { color: #666; }
	.reads span { font-weight: bold; font-size: 1.1em; }
	.reads span.highlight { 
		background-color: #ad1a39;
		color: #fff; 
		-moz-border-radius: 4px; 
		-webkit-border-radius: 4px; 
		border-radius: 64px; 
		padding: .1em .2em .15em;
		margin: -.1em 0em -.15em -.2em;
	}
	.reads small { display: block; line-height: 1; }

.column { width: 70%; max-width: 560px; float: left; }
.column h2 { margin-bottom: 1em; }
.column.home h2 { margin-bottom: 0; }
.column.home.last { padding-top: 1em; width: 42%; margin-left: 6%; }

	/* side column */
	.side { 
		width: 25%; 
		float: right; 
		font-size: 0.85em;
		line-height: 1.5;
		color: #a3a3a3;
		padding-top: 1em;
	}
	
	.side h3 {
		padding: .3em .5em .2em;
		margin: 0em -.5em .5em;
		background-color: #ad1a39;
		color: #fff;
		-moz-border-radius: 24px;
		-webkit-border-radius: 24px;
		border-radius: 24px;
		letter-spacing: 0;
	}
	
	.side h4, .third h4 {
		position: relative;
		z-index: 20;
		font-size: 1.8em;
		border-top: 1px solid #ddd;
		padding-top: .3em;
		margin-left: -.2em;
		margin-right: -.2em;
		margin-bottom: .2em;
		padding-left: .2em;
		padding-right: .2em;
		line-height: 1.1;
	}
	
	.side h4 span, .third h4 span { 
		color: #c3c3c3;
		display: block; 
		font-size: 0.45em;
		line-height: 1.2;
		letter-spacing: 0;
	}
	
	.side ul, .third ul {
		margin: 0.5em 0 1.5em;
		padding-left: 1.1em;
	}
	
	.side p, .third p {
		margin: 0.5em 0 0;
	}
	
		.side li {
			line-height: 1.3;
			padding: 0 0 .2em;
			margin: 0 0 .2em;
		}
	
	.third dl {
		width: auto;
		margin-right: 2%;
		float: left;
		margin-top: .5em;
	}
	
		.third dt {
			line-height: 1.2;
		}
		
		.third .timeframe dl {
			margin-bottom: 0;
		}
	
	.third dl ul {
		padding-left: 1em;
		list-style: none;
		margin-bottom: .5em;
		margin-top: 0;
	}
	
		.third dl li {
			display: inline;
		}
	
		.third dl li:after { content: ','; }
		.third dl li:last-child:after { content: ''; }
		
	.half {
		width: 48%;
		margin-right: 4%;
	}
	
	.two-thirds {
		width: 60%;
		margin-right: 9%;
	}
	
	.third {
		width: 30.5%;
		margin-right: 4%;
	}
	
		.third .related { font-size: 0.85em; color: #a3a3a3; }
	
	.column.last {
		margin-right: 0;
	}
		
	.generous-half {
		width: 46%;
		margin-right: 4%;
	}
	
	.less-generous-half {
		width: 50%;
		margin-right: 0;
	}
		
	/* bio-column */
	.bio {
		width: auto;
		max-width: 1000px;
		padding-top: 1em;
	}
	
	.connect {
		margin: 1em -.6em 0;
	}
	
	.connect h3 {
		padding: .1em .6em .4em .35em;
		margin: 0 0em -.3em;
		background-color: #d7eaf9;
		border-radius: 8px;
		-moz-border-radius-topleft: 8px;
		-moz-border-radius-topright: 8px;
		-webkit-border-top-left-radius: 8px;
		-webkit-border-top-right-radius: 8px;
		float: left;
	}
	
	.connect dl {
		clear: left;
		background-color: #d7eaf9;
		border-radius: 8px;
		padding: .2em .5em .6em;
		margin: 1em 0 0;
		-moz-border-radius-topright: 8px;
		-moz-border-radius-bottomleft: 8px;
		-moz-border-radius-bottomright: 8px;
		-webkit-border-top-right-radius: 8px;
		-webkit-border-bottom-left-radius: 8px;
		-webkit-border-bottom-right-radius: 8px;
	}
	
		.connect dt, .connect dd {
			margin: 0;
			padding: 0;
		}

.fredline-list {
	margin-top: 0em;
}

	.fredline-list p {
		clear: left;
	}

	.fredline-list section { 
		border-bottom: 1px solid #ddd; 
		padding: 0 1em;
		margin: 0 -1em;
	}
	
	.fredline-list .short.meta {
		font-size: 0.8em;
		margin: 0em 0 .4em;
		padding: .4em 0;
		float: left;
		background-color: transparent;
	}
		
	.fredline-list .read-more {
		display: block;
		margin-top: .6em;
	}

	.fredline blockquote {
		background-color: #eee;
		border-left: 3px solid #ccc;
		margin: 1em 0 1.6em 1em;
		padding: 0.8em 1em;
	}
		.fredline blockquote p { margin: 1em 0 0; }
		.fredline blockquote p:first-child { margin-top: 0; }
	
.pagination {
	text-align: center;
	font-size: 0.8em;
	margin: 0 -1em;
	padding-top: .5em;
	white-space: nowrap;
}

	.pages {
	}
	
	.pages .spacer {
		margin: 0 -.3em;
		border: 1px solid #eee;
		background-color: #f9f9f9;
		padding: 0 .6em .15em;
		color: #ccc;
		z-index: 10;
	}
	
	.pages a {
		border: 1px solid #ddd;
		padding: .25em .5em .35em;
		margin: 0 -.18em;
		position: relative;
		z-index: 20;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
	}
	
	.pages a.active {
		color: #fff;
		background: none;
		background-color: #ad1a39;
		border-color: #ad1a39;
		border-width: 4px;
		-moz-border-radius: 3px;
		-webkit-border-radius: 3px;
		border-radius: 3px;
		z-index: 30;
	}
	
	.pages a.previous {
		-moz-border-radius-topleft: 24px;
		-moz-border-radius-bottomleft: 24px;
		-webkit-border-top-left-radius: 24px;
		-webkit-border-bottom-left-radius: 24px;
		border-top-left-radius: 24px;
		border-bottom-left-radius: 24px;
		padding-left: .6em;
		margin-right: .4em;
	}
	
	.pages a.next {
		-moz-border-radius-topright: 24px;
		-moz-border-radius-bottomright: 24px;
		-webkit-border-top-right-radius: 24px;
		-webkit-border-bottom-right-radius: 24px;
		border-top-right-radius: 24px;
		border-bottom-right-radius: 24px;
		padding-right: .6em;
		margin-left: .4em;
	}
		
/* recaptcha */
.recaptcha {
	padding-top: 1.2em;
	text-align: center;
}

	.recaptcha input {
		width: auto;
		margin-top: 1em;
		font-size: 1.2em;
		font-family: "Helvetica Neue", Arial, sans-serif;
		padding-left: 1em;
		padding-right: 1em;
	}
	
	#recaptcha_area {
		margin: 0 auto 0 auto;
	}

/* framed images */
.aside {
	float: right;
	margin-top: .3em;
	margin-left: 3em;
	margin-bottom: 0em;
	width: 30%;
}

	.aside#me {
		width: 35%;
	}

.frame {
	background: transparent url() scroll no-repeat 50% 50%;
	margin: .6em 0 .6em;
	box-shadow: 0 6px 16px #888;
	-moz-box-shadow: 0 6px 16px #888;
	-webkit-box-shadow: 0 6px 16px #888;
	position: relative;
	z-index: 100;
	border: 8px solid #f6f6f6;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

	#me .frame {
		width: auto;
		height: 237px;
		background-image: url('/img/about/me.jpg');
		background-position: 45% 0;
	}
	
.photo-caption {
	font-size: 0.9em;
	color: #888;
	font-style: italic;
	margin-top: 0;
	text-align: center;
	font-family: "Times New Roman", Georgia, "Times New Roman", serif;
	letter-spacing: -0.025em;
	position: relative;
	z-index: 110;
}

	.photo-caption span {
		box-shadow: 0 3px 8px #666;
		-moz-box-shadow: 0 3px 8px #666;
		-webkit-box-shadow: 0 3px 8px #666;
		background: -moz-linear-gradient(90deg, #fff, #fff, #fff, #fff, #ccc, #aaa);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #eee), color-stop(0.75, #e3e3e3));
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
		-webkit-border-bottom-left-radius: 4px;
		-webkit-border-bottom-right-radius: 4px;
		-moz-border-radius-bottomleft: 4px;
		-moz-border-radius-bottomright: 4px;
	}
	
	.photo-caption strong {
		color: #6b6b6b;
		font-size: 0.85em;
	}

.appreciate {
	border-top: 1px solid #ddd;
	padding: .6em 1em;
	margin: 2em -1em 2em;
	font-size: 0.85em;
}

	.share {
		width: 42%;
		float: left;
		margin-left: 6%;
	}
	
		.share ul {
			list-style: none;
			margin-left: 0;
			padding-left: 0;
			margin-top: 0.9em;
		}
	
		.share li {
			width: 54px;
			padding-left: 0;
			text-align: center;
			float: left;
			margin-left: .8em;
		}
		
			.share li:first-child {
				margin-left: 0;
			}
		
		.share a {
			background: transparent url('/img/icons/social-media/share.gif') scroll no-repeat 0 0;
			width: 54px;
			height: 54px;
			font-size: 0.8em;
			display: block;
			opacity: 0.8;
			text-indent: -999em;
			-moz-border-radius: 27px;
			-webkit-border-radius: 27px;
			border-radius: 27px;
			border: 3px solid #fff;
			margin: -3px 0 0 -3px;
		}
		
			.share a:hover {
				opacity: 1;
				-moz-box-shadow: 0 0 12px #ccc;
				-webkit-box-shadow: 0 0 12px #ccc;
				box-shadow: 0 0 12px #ccc;
				border-color: #fff;
			}
				
			li.share-twitter a {
				background-position: -5px 0;
			}
			
			li.share-facebook a {
				background-position: -69px 0;
			}
		
			li.share-delicious a {
				background-position: -133px 0;
			}
			
			li.share-email a {
				background-position: -197px 0;
			}
			
			li.share-flattr {
				margin-top: -3px;
			}
			
				li.share-flattr a {
					display: none;
				}

	.appreciate h5 {
		text-transform: uppercase;
		letter-spacing: 2px;
		margin: 0 0 .3em;
		font-size: 0.95em;
	}
	
	.quicklink {
		width: 52%;
		float: left;
	}
	
		.quicklink div {
			background-color: #ad1a39;
			-moz-border-radius: 36px;
			-webkit-border-radius: 36px;
			border-radius: 36px;
			padding: .45em .4em .45em 999em;
			margin-left: -999em;
			margin-top: 1em;
		}
	
		.quicklink .link {
			display: block;
			float: left;
			color: #f0d4d7;
			font-size: 1.6em;
			line-height: 1.6;
			padding: .12em .2em .12em 999em;
			margin: 0 -.2em 0 -999em;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;
		}
		
		.quicklink input {
			float: left;
			width: 80%;
			font-size: 1.6em;
			padding: .5em .2em 0em 0;
			margin: 0 -.2em 0 0;
			border: none;
			background-color: transparent;
			font-family: "Helvetica Neue", Arial, sans-serif;
			color: #fff;
			outline: none;
		}
		
		.quicklink strong {
			font-family: Pictos;
			font-size: 1.4em;
			line-height: 2;
			text-align: center;
			margin-top: .13em;
			margin-right: .5em;
			color: #ad1a39;
			text-shadow: 0 0 16px #d75774;
			-moz-border-radius: 24px;
			-webkit-border-radius: 24px;
			border-radius: 24px;
			background-color: #fff;
			display: block;
			float: left;
			width: 1.8em;
			height: 1.8em;
		}
		
		.quicklink em {
			color: #fff;
			font-style: normal;
			margin-left: .1em;
		}

footer {
	clear: left;
	display: block;
	background-color: #f2f2f2;
	margin: 2em -1em -1.6em;
	border-top: 1px solid #ddd;
	padding: .6em 1em 1.6em;
	font-size: 0.85em;
	position: relative;
	width: 70%;
	max-width: 560px;
	-moz-border-radius-topleft: 12px;
	-moz-border-radius-topright: 12px;
	-webkit-border-top-left-radius: 12px;
	-webkit-border-top-right-radius: 12px;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

	footer.home {
		width: auto;
		max-width: 100%;
		font-size: 1em;
		text-align: center;
		padding: 1em 1em;
		margin: 1em -1em 2em;
		-moz-border-radius: 12px;
		-webkit-border-radius: 12px;
		border-radius: 12px;
		border-top: 0;
		border-bottom: 1px solid #ddd;
		color: #777;
	}
	
		footer.home p {
			margin-right: 0;
		}

	footer h5 {
		margin: 0 0 .5em;
	}
	
	footer p {
		margin: 1em 190px 0 0;
	}
	
		footer p:first-child {
			margin-top: 0;
		}
		
	footer .portrait {
		position: absolute;
		width: 180px;
		padding: 6px 6px 42px;
		background-color: #fff;
		border: 1px solid #bbb;
		right: -.6em;
		top: -.2em;
		-moz-box-shadow: 0 .2em .2em #bbb;
		-webkit-box-shadow: 0 .2em .2em #bbb;
		box-shadow: 0 .2em .2em #bbb;
		-moz-transform: rotate(4deg);
		-webkit-transform: rotate(4deg);
		-o-transform: rotate(4deg);
		transform: rotate(4deg);
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		z-index: 100;
	}
	
		footer .portrait .photo {
			background: transparent url('/img/about/colophon.jpg') scroll no-repeat 50% 50%;
			width: 180px;
			height: 150px;
			-moz-border-radius: 1px;
			-webkit-border-radius: 1px;
			border-radius: 1px;
		}
		
		
/* footnotes & asides
------------------------------------------------------------------ */
aside.footnotes {
	display: block;
	font-size: 0.8em;
	font-style: italic;
	border-top: 1px solid #ddd;
	padding: .8em 1em 0;
	margin: 1em -1em 1em;
	color: #aaa;
}

aside.footnotes a {
	color: #7cbbd7;
}

	sup.footnote {
		font-size: 0.6em;
		vertical-align: .6em;
		margin-left: .1em;
		font-weight: bold;
	}
	
	aside sup.footnote {
		font-size: 0.75em;
		vertical-align: 0.25em;
		margin-left: -1em;
		margin-right: .2em;
	}
	
	
/* pages
------------------------------------------------------------------ */
.social-media-explanation {
	width: 28%;
	float: left;
	margin-right: 6%;
}

.social-media-connections {
	list-style: none;
	font-size: 1.4em;
	padding: 0;
	float: left;
	width: 29%;
	margin: .6em 4% 1em 0;
}

	.social-media-connections.last {
		margin-right: 0;
	}
	
	.social-media-connections li {
		margin-bottom: .4em;
	}
	
	.social-media-connections li a {
		background: transparent url('') scroll no-repeat 0 50%;
		padding: 6px 0 6px 42px;
	}
	
	.social-media-connections .twitter a		  { background-image: url('/img/icons/social-media/connections/twitter.png'); }
	.social-media-connections .dribbble a		  { background-image: url('/img/icons/social-media/connections/dribbble.png'); }
	.social-media-connections .aim a		        { background-image: url('/img/icons/social-media/connections/aim.png'); }
	.social-media-connections .xbox a			  { background-image: url('/img/icons/social-media/connections/xbox.png'); }
	.social-media-connections .yahoo-messenger a  { background-image: url('/img/icons/social-media/connections/yahoo-messenger.png'); }
	.social-media-connections .gowalla a		  { background-image: url('/img/icons/social-media/connections/gowalla.png'); }
	.social-media-connections .github a		     { background-image: url('/img/icons/social-media/connections/github.png'); }
	.social-media-connections .youtube a		  { background-image: url('/img/icons/social-media/connections/youtube.png'); }
	.social-media-connections .yelp a			  { background-image: url('/img/icons/social-media/connections/yelp.png'); }
	.social-media-connections .flickr a			  { background-image: url('/img/icons/social-media/connections/flickr.png'); }
	.social-media-connections .linkedin a		  { background-image: url('/img/icons/social-media/connections/linkedin.png'); }


.social-media-absences {
	list-style: none;
	padding: 0 .5em;
}

	.social-media-absences li {
		width: 32px;
		height: 32px;
		float: left;
		background: transparent url('') scroll no-repeat 50% 50%;
		text-indent: -8888px;
		margin: .5em;
	}

	.social-media-absences .facebook				{ background-image: url('/img/icons/social-media/connections/facebook.png'); }
	.social-media-absences .foursquare			{ background-image: url('/img/icons/social-media/connections/foursquare.png'); }
	.social-media-absences .last-fm				{ background-image: url('/img/icons/social-media/connections/lastfm.png'); }
	.social-media-absences .posterous			{ background-image: url('/img/icons/social-media/connections/posterous.png'); }
	.social-media-absences .tumblr				{ background-image: url('/img/icons/social-media/connections/tumblr.png'); }
	.social-media-absences .vimeo					{ background-image: url('/img/icons/social-media/connections/vimeo.png'); }
	.social-media-absences .delicious			{ background-image: url('/img/icons/social-media/connections/delicious.png'); }
	.social-media-absences .digg					{ background-image: url('/img/icons/social-media/connections/digg.png'); }



/* footer 
------------------------------------------------------------------ */
#footer {
	color: #666061;
	position: relative;
	z-index: 60;
	background: transparent url('/img/bg/flourishes/footer.jpg') scroll no-repeat 50% 0;
}

#footer .stage {
	background: transparent url('/img/bg/footer.png') scroll no-repeat 50% 24px;
	font-size: 0.65em;
	font-family: "Lucida Grande", "Lucida Sans", sans-serif;
	padding: .25em 0 2em;
	text-align: center;
}

#footer .copyright {
	color: #602e39;
	font-size: 0.85em;
	width: 46em;
	margin: 21px auto;
	text-align: left;
	text-shadow: 0 0 12px #000;
}

	#footer .copyright div {
		float: left;
		width: 30%;
		margin-left: 100px;
	}
	
	#footer .copyright .part1 {
		text-align: right;
		margin-left: 0;
	}
	
	#footer .copyright .part2 {
		float: right;
	}

#footer img {
	padding: 43px 0 0em 1px;
	margin-bottom: -2px;
	width: 100px;
	opacity: 0.8;
}


/* fredlines
------------------------------------------------------------------ */
.fredlines {
}

.fredlines h4 {
	color: #777;
	border-color: #777;
}

	.fredlines h4 span {
		color: #aaa;
	}

.fredlines ul {
	list-style: none;
	padding-left: 0;
	margin-top: 0;
	margin-bottom: 0;
}

	.fredlines ul a {
		font-size: 1.1em;
		font-weight: 500;
		line-height: 1.2;
	}

	.fredlines ul span.date {
		font-size: 0.735em;
		display: block;
		margin-top: .2em;
		margin-bottom: .5em;
	}


/* content-specific
------------------------------------------------------------------ */
.dialogue {
	margin: 1em auto;
	width: 70%;
	font-family: Consolas, Inconsolata, "Courier New", Courier, fixed;
}
	.dialogue dt {
		font-weight: bold;
		text-align: center;
	}
	.dialogue dd {
		margin-bottom: 2em;
		text-align: center;
	}

/* top 10 */
.top-item {
	position: relative;
	margin: 2em 0 1em;
	padding: .6em 0 0;
}

	.top-item div.number {
		font-size: 6.25em;
		letter-spacing: -.15em;
		font-weight: bold;
		line-height: 1;
		-webkit-transform: rotate(305deg);
		-moz-transform: rotate(305deg);
		-o-transform: rotate(305deg);
		transform: rotate(305deg);
		position: absolute;
		z-index: 20;
		top: 0;
		text-align: right;
		vertical-align: top;
		width: 1.5em;
		padding: 0;
		margin: 0.5em 0 0 -.6em;
		color: #ddd;
		-webkit-transition: margin .15s ease-out;
		-moz-transition: margin .15s ease-out;
		transition: margin .15s ease-out;
	}
	
		.top-item:hover div.number {
			margin-left: -.75em;
			margin-top: 0.4em;
		}
	
	.top-item div.number small {
		letter-spacing: 0;
		font-size: .6em;
	}
	
	.top-item div.item {
		border-left: 5px double #ddd;
		margin-left: 4.5em;
		padding-left: 1.5em;
		background-color: #fff;
		position: relative;
		z-index: 100;
	}
	
/* recipe */
ul.ingredients {
	padding: 0;
	list-style: none;
}

	ul.ingredients strong {
		font-size: 1.2em;
	}

ol.directions {
	padding: 0;
}

	ol.directions li {
		margin-bottom: 1em;
	}
	
div.facts {
	padding: .4em .6em .4em;
	margin: 1em -.6em;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;	
}

div.facts dl {
	margin: 0 2.4em 0 0;
	float: left;
	width: auto;
	color: #999;
}

div.facts dl.last {
	margin-right: 0;
}

	div.facts dt {
		font-weight: bold;
		margin-right: .35em;
		font-size: 0.8em;
		color: #b4b4b4;
	}
	
	div.facts dd {
		font-size: 2.8em;
		font-weight: bold;
		letter-spacing: -3px;
		line-height: 1;
		margin-left: -2px;
	}

/* event */
div.invitation {
	border: 1px solid #ddd;
	-webkit-box-shadow: 0px 10px 10px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 10px 10px rgba(0,0,0,0.3);
	-o-box-shadow: 0px 10px 10px rgba(0,0,0,0.3);
	box-shadow: 0px 10px 10px rgba(0,0,0,0.3);
	-webkit-transform: rotate(357deg);
	-moz-transform: rotate(357deg);
	-o-transform: rotate(357deg);
	transform: rotate(357deg);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
	background: #fcf9ee;
	background: -moz-linear-gradient(90deg, #faf5e6, #fffdf6);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #fffdf6), color-stop(1.0, #faf5e6));
	width: 90%;
	margin: 2em auto 3.5em;
}

	.invitation dl {
		font-size: 1.5em;
		margin-top: .6em;
		width: auto;
	}
	
	.invitation h3 {
		margin: .5em 1em .1em;
		padding-bottom: .5em;
		text-align: center;
		font-size: 1.9em;
		border-bottom: 1px dotted #ddd;
		border-bottom-color: rgba(0,0,0,.2);
	}
	
		.invitation h3 span {
			display: block;
			font-size: 0.4em;
			text-transform: uppercase;
			letter-spacing: 2px;
			margin-bottom: .4em;
			color: #bbb;
			color: rgba(0,0,0,.2);
		}
		
			.invitation h3 span strong {
				font-size: 1.3em;
				vertical-align: -.1em;
			}
			
		.invitation small {
			display: block;
			font-size: 0.65em;
			margin-top: .3em;
			opacity: 0.6;
		}
		
			.invitation small:hover {
				opacity: 1.0;
			}
	
	.invitation dt {
		float: left;
		clear: left;
		width: 5em;
		text-align: right;
		font-variant: small-caps;
		font-weight: bold;
		padding: .35em .9em .1em 0;
		font-size: 0.8em;
		color: #999;
		color: rgba(0,0,0,.4);
	}
	
	.invitation dd {
		padding: .1em 1em .1em 0;
		margin-left: 5em;
	}
	
		.invitation dd.last {
			border-bottom: none;
		}
		
		.invitation dd .time, .invitation dd .address {
			display: block;
			font-size: 0.6em;
			line-height: 1;
			margin-bottom: .4em;
			margin-top: -.1em;
		}
	
	.invitation dd em {
		color: #999;
		font-size: 0.9em;
		font-family: "Times New Roman";
		margin: 0 .2em;
	}
	
	.invitation .en-dash {
		margin: 0 0.3em;
	}
	
/* review */
.rating { 
	font-size: 4.2em;
	text-align: center;
	color: #b12636;
	letter-spacing: .2em;
	margin-bottom: .25em;
	display: block;
	margin: 0 auto 0.25em;
}
.rating .off { opacity: 0.2; }

/* haiku */
.haiku { font-size: 2.1em; color: #555; font-style: italic; }
.haiku .line { display: block; text-align: center; }

/* panorama */
.panorama { max-width: 1280px; margin: 2em auto 1em; width: 90%; }
.panorama img { margin: 0 auto; width: 100%; }

/* comic */
.comic { max-width: 900px; margin: 2em auto 1em; width: 90%; }
.comic img { margin: 0 auto; width: 100%; }

/* video */
.video { max-width: 900px; margin: 2em auto 1em; width: 90%; }
.video object, .video embed { margin: 0 auto; width: 100%; }

/* link */
.content-link { font-size: 1.6em; text-align: center; margin: .6em 0 1em; }

/* quote */
blockquote { position: relative; }
.quote, blockquote.quote { 
	position: relative; 
	font-size: 1.5em; 
	line-height: 1.3; 
	margin: 0 0 1em; 
	padding: 0; 
	background-color: transparent; 
	border: none;
}
.quote *, blockquote * { position: relative; z-index: 100; }
.quote span, blockquote span { 
	color: #ddd;
	display: block; 
	position: absolute; 
	font-size: 3em;
	font-family: Georgia;
	font-weight: bold;
	line-height: 1;
	top: -.1em;
	left: -.6em;
	z-index: 80;
}
.quote span:before, blockquote span:before { content: "“"; }
.quote cite, blockquote cite { 
	display: block; 
	font-size: 0.75em; 
	margin-top: -.4em; 
	color: rgba(0, 0, 0, 0.5); 
	text-align: right;
	width: 92%;
}
blockquote cite {
	font-size: .9em;
}

/* weight loss */
.weight-loss-update {
	background: transparent url('/img/bg/content/weight-loss-updates/weights.png') scroll no-repeat 50% 42%;
}

	.weight-loss-update span.last, .weight-loss-update span.current { width: 40%; float: left; display: block; text-align: center;  }
	.weight-loss-update span.current { width: 60%; }
	.weight-loss-update strong { font-size: 7em; line-height: 1; letter-spacing: -3px; display: block; font-weight: bold; }
	.weight-loss-update span.last strong { font-size: 4.2em; padding-top: .4em; }
	.weight-loss-update em { font-style: normal; display: block; color: #666; }
	.weight-loss-update span.last em { margin-top: 1.1em; }

.weight-loss-target {
	clear: both;
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1.6em;
	font-weight: bold;
}

	.weight-loss-target .pass { color: #5fb351; }
	.weight-loss-target .fail { color: #9f3e3e; }


/* classification */
.classification h2 { 
	text-align: center; 
	vertical-align: middle; 
	padding: 0 2.3em 1em 0;
	margin: 0.4em -.2em 0em;
	background: transparent url('/img/bg/flourishes/classification-header.gif') scroll no-repeat 50% 100%;
}

.classification ul {
	margin-top: 0;
}

	.classification h3 {
		margin-top: .4em;
	}

.classification h2 span {
	font-size: 0.25em;
	letter-spacing: 2px;
	font-family: Georgia, serif;
	color: #999;
	text-transform: uppercase;
	vertical-align: middle;
	font-style: italic;
}

.classification h3 {
	margin-bottom: 0.2em;
	clear: both;
}

.content-list {
	clear: left;
	list-style: none;
	padding-left: 0;
	margin-left: 0;
}

	.content-list p {
		clear: both;
	}
	
	.short.meta {
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
		background-color: transparent;
		padding: .4em 0;
		margin: 0em 0 .4em;
		font-size: 0.8em;
	}
	
	.entry-1 { float: left; width: 48%; margin-right: 4%; }
	.entry-2 { float: right; width: 48%; }
	
	.section-2 li { font-size: 0.9em; float: left; width: 30%; margin-right: 5%; }
	.section-2 li.entry-5 { margin-right: 0; }
	
	.section-3 {
		font-size: 0.55em;
		margin-right: 4%;
		margin-top: 1.5em;
		float: left;
	}
	
		.section-3 h3 {
			display: inline;
			vertical-align: text-bottom;
			letter-spacing: 0;
		}
		
		.section-3 .short.meta {
			float: none;
			display: inline;
			background: none;
			padding: 0;
			font-size: 1.4em;
			margin: 0 0 0 2em;
		}
		
		.section-3 .short.meta strong {
			color: #666;
		}
		
		.section-3 li {
			margin-bottom: 1.6em;
		}
	
		.section-3 p {
			display: none;
		}

.other-tags {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 0 1em 0.6em;
	margin: 0 -1em 2em;
}

.other-tags h4 {
	float: left;
	width: auto;
	padding: .2em .8em .3em 0em;
	border-right: 1px solid #ccc;
	margin-right: .8em;
	margin-top: .4em;
}

.other-tags h4 span {
	font-size: 0.5em;
	letter-spacing: 1px;
	font-family: Georgia, serif;
	color: #999;
	text-transform: uppercase;
	vertical-align: middle;
	font-style: italic;
}

	.other-tags ul { list-style: none; padding-left: 0; margin-left: 0; margin-top: 1em; margin-bottom: 1.6em; }
	.other-tags li { float: left; margin-right: .4em; }
	
	.other-tags li:after { content: ','; }
	.other-tags li:last-child:after { content: ''; }
	
.no-results {
	padding: 2em 0;
	text-align: center;
}

/* tabs */
ul.tabs {
	display: none;
	list-style: none;
	font-size: 0.9em;
	border-bottom: 1px solid #ccc;
	padding: 0 1em;
	margin: 3em -1em 1em; 
}

	.tabs li {
		background: rgb(244,244,244);
		background: -webkit-gradient(linear, left bottom, left top, color-stop(0.46, rgb(233,233,233)), color-stop(0.86, rgb(250,250,250)));
		background: -moz-linear-gradient(center bottom, rgb(233,233,233) 46%, rgb(250,250,250) 86%);
		float: left;
		margin: -2.45em .4em 0 0;
		height: 2.4em;
		border: 1px solid #ccc;
		-webkit-border-top-right-radius: 6px;
		-webkit-border-top-left-radius: 6px;
		-moz-border-radius-topright: 6px;
		-moz-border-radius-topleft: 6px;
		border-top-right-radius: 6px;
		border-top-left-radius: 6px;
	}
	
	.tabs a {
		display: block;
		padding: 0.4em 0.8em 0.3em;
		outline: none;
	}
	
	.tabs li.on {
		border-bottom-color: #fff;
		background: #fff;
		font-weight: bold;
	}
	
/* tags & topics */
.by-tag ul, .by-topic ul {
	margin-top: 0;
	padding-left: 1.1em;
}

.by-tag ul, .by-topic dl {
	margin-top: 1.5em;
}

	.by-tag ul, .by-topic dl {
		-moz-column-count: 3;
		-moz-column-gap: 1em;
		-webkit-column-count: 3;
		-webkit-column-gap: 1em;
		column-count: 3;
		column-gap: 1em;
	}

.by-topic dt {
	font-size: 1.3em;
	font-weight: bold;
	line-height: 1.1;
	margin-bottom: .5em;
}

.by-topic dd {
	margin-bottom: 1em;
}


/* projects */
.projects {
	list-style: none;
	padding-left: 0;
}

	.projects li {
		background: transparent url() scroll no-repeat 0% 50%;
		padding-left: 172px;
	}
	
	.projects .roundabout		     {  background-image: url('/img/projects/logos/roundabout.jpg');	}
	.projects .roundabout-shapes    {  background-image: url('/img/projects/logos/roundabout-shapes.jpg');  }
	.projects .build-guild		     {  background-image: url('/img/projects/logos/buildguild.jpg');	}
	.projects .font-day			     {  background-image: url('/img/projects/logos/72pxfontday.jpg');	}
	.projects .mbta-alerts		     {  background-image: url('/img/projects/logos/mbta-alerts.jpg');	 }
	.projects .notebook			     {  background-image: url('/img/projects/logos/notebook.jpg');  }
	.projects .clouds			        {  background-image: url('/img/projects/logos/clouds.jpg');	}
	.projects .large-font		     {  background-image: url('/img/projects/logos/large-font-coalition.jpg');  }
	.projects .weight-loss-central  {  background-image: url('/img/projects/logos/weight-loss-central.jpg');  }
	.projects .shortcupd            {  background-image: url('/img/projects/logos/shortcupd.jpg');  }
	.projects .browser-icons        {  background-image: url('/img/projects/logos/browser-icons.jpg');  }
	
	.learn-more {
		margin-top: -1em;
		padding-bottom: .3em;
	}
	
.project-list {
	list-style: none;
	padding-left: 0 !important;
	font-size: 2em;
	margin-bottom: 0.6em !important;
}

	.project-list li a {
		-moz-border-radius: 6px;
		-webkit-border-radius: 6px;
		-o-border-radius: 6px;
		border-radius: 6px;
		text-align: right;
		padding: 1.8em 0.8em 0.4em;
		color: #fff;
		display: block;
		opacity: 0.95;
		-webkit-transition: opacity .15s ease-out;
		-moz-transition: opacity .15s ease-out;
		transition: opacity .15s ease-out;
	}
	
		.project-list li a:hover {
			opacity: 1;
		}

	.project-list .roundabout a { 
		background: #1c4547;
		background: -moz-linear-gradient(90deg, #1c4547 0%, #256467 100%);
		background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #1c4547), color-stop(1.0, #256467));
		padding-top: 2.3em;
	}
	
	.project-list .roundabout-shapes a {
		background: #254067;
		background: -moz-linear-gradient(90deg, #1c2d47 0%, #254067 100%);
		background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #1c2d47), color-stop(1.0, #254067));
	}
	
	.project-list .clouds a {
		background: #332548;
		background: -moz-linear-gradient(90deg, #332548 0%, #1c1c3e 100%);
		background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #332548), color-stop(1.0, #1c1c3e));
		padding-top: 0.4em;
	}
	
	.project-list .notebook a {
		background: #cac3ad;
		background: -moz-linear-gradient(90deg, #b7ae95 0%, #cac3ad 100%);
		background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #b7ae95), color-stop(1.0, #cac3ad));
		padding-top: 0.4em;
	}

	.project-list .drawn a {
		background: #cac3ad;
		padding-top: 1.5em;
		background: -moz-linear-gradient(90deg, #777 0%, #999 100%);
		background: -webkit-gradient(linear, left bottom, left top, color-stop(0.0, #777), color-stop(1.0, #999));
	}
	
.follow-along {
	list-style: none;
	padding-left: 0 !important;
}

	.follow-along li {
		float: left;
		width: 50%;
		margin-right: 4%;
	}
	
	.follow-along li.subscribe {
		margin-right: 0;
		width: 46%;
	}

	.follow-along a {
		background: transparent url() scroll no-repeat 0 50%;
		line-height: 2;
		font-size: 1.3em;
		padding: .4em 0 .4em 42px;
	}
	
	.follow-along .twitter a {
		background-image: url('/img/icons/social-media/connections/twitter.png');
	}
	
		.follow-along .twitter span {
			font-variant: small-caps;
			font-weight: 500;
			font-size: 0.95em;
		}
	
	.follow-along .subscribe a {
		background-image: url('/img/icons/social-media/connections/feed-big.png');
	}

	
/* media queries
------------------------------------------------------------------ */
@media screen and (max-width: 770px) {
	.stage { width: 90%; }
}

@media screen and (max-width: 740px) {
	.column { max-width: none; }
	.column, .side { float: none; width: 100%; }
	.column.home.last { display: none; }
	
	.social-media-explanation { width: auto; float: none; }
	.social-media-connections { width: 48%; }
	
	.by-tag ul, .by-topic dl {
		-moz-column-count: 2;
		-moz-column-gap: 1em;
		-webkit-column-count: 2;
		-webkit-column-gap: 1em;
		column-count: 2;
		column-gap: 1em;
	}
}

@media screen and (min-width: 460px) and (max-width: 740px) {
	.nav li { padding-left: .3em; padding-right: .3em; }
	.related { width: 46%; float: left; }
	.fredlines { width: 46%; float: right; }
	
	.haiku { font-size: 2.4em; }
	
	footer { width: 100%; }
	footer .portrait { right: -1em; }
	footer p { margin-right: 185px; }
	
	.quicklink {
		width: 48%;
	}
	
	.share {
		width: 44%;
		margin-left: 6%;
	}
	
	aside.to-the-right, aside.to-the-left {
		width: 50%;
	}
}

@media screen and (min-width: 506px) and (max-width: 567px) {
	.quicklink .link {
		font-size: 1.4em;
		line-height: 1.9em;
	}
	
	.content-list li {
		display: block;
		width: auto;
		float: none;
	}
	
	.haiku {
		font-size: 2em;
	}
	
	#footer .copyright { width: auto; }
	
	.weight-loss-update strong { font-size: 6em; }
	.weight-loss-update span.last strong { font-size: 3.6em; }
	.weight-loss-update span.last em { margin-top: 0.95em; }
}

@media screen and (max-width: 505px) {
	h2 cite { font-size: 0.5em; }
	nav li { padding-left: .2em; padding-right: .2em; }
	nav ul { font-size: 0.87em; }
	
	#what-do-you-think dl.multiple, #what-do-you-think dl { float: none; width: 96%; margin-right: 0; }
	.multiple select { width: 100%; }
	
	.content-list li {
		display: block;
		width: auto;
		float: none;
	}
	
	.classification h2 {
		padding-right: 0;
	}
	
	.classification h2 span {
		display: block;
	}
	
	.meta, .fredline-list .short.meta {
		position: relative;
		margin-top: 1.5em;
		margin-left: -20%;
		margin-right: -20%;
		padding-left: 20%;
		padding-right: 20%;
		margin-bottom: 0;
		float: none;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
		border-radius: 0;
		background-color: #e6e6e6;
	}
	
		.content-list .meta {
			-moz-border-radius: 0;
			-webkit-border-radius: 0;
			border-radius: 0;
			margin-left: -20%;
			padding-left: 20%;
		}
	
	.appreciate {
		margin-bottom: 0em;
	}
	
	.share, .quicklink {
		float: none;
		width: auto;
		margin-left: 0;
		margin-bottom: 2em;
	}
	
	.fredline-list h3 { float: none; width: auto; }
	.fredline-list p { padding-left: 0; }
	.fredline-list .date { line-height: 1.5; margin-top: 0; float: none; text-align: left; }
	.fredline-list .date span { display: inline; }
	.fredline-list .date span:before { content: " · "; }
	
	.reads { font-size: 0.8em; margin-top: 0; margin-bottom: 2em; padding-bottom: .5em; background-color: #ccc; }
	.reads small { display: inline; font-size: 1em; }
	
	.rating { font-size: 3.5em; }
	.haiku { font-size: 1.6em; }
	.quote { font-size: 1.3em; }
	
	.social-media-connections { float: none;  width: auto; margin-bottom: 0; }
	.social-media-connections.last { margin-bottom: 1em; margin-top: 0; }
	
	footer { width: 100%; }
	footer .portrait { display: none; }
	footer p { margin-right: 0; }
	
	#footer {
		background-image: url('/img/bg/flourishes/footer-mobile.jpg');
	}
	#footer .copyright { width: auto; }
	
	.weight-loss-update { background-image: none; }
	.weight-loss-update strong { font-size: 5em; }
	.weight-loss-update span.last strong { font-size: 3.2em; padding-top: .3em; }
	.weight-loss-update span.last em { margin-top: 0.9em; }
}

@media screen and (max-width: 410px) {
	nav ul { font-size: 0.85em; margin-right: 0em; }
	nav a { padding: 0.6em 0.5em;}
	.rating { font-size: 2.7em; }
	
	.meta, .fredline-list .short.meta {
		margin-left: -20%;
		margin-right: -20%;
		padding-left: 20%;
		padding-right: 20%;
		margin-bottom: 0;
	}
	
	.reads { font-size: 0.8em; margin-top: 0; margin-bottom: 2em; }
	
	h2 { font-size: 2.4em; }
	h3 { font-size: 1.4em; }
	.side h3 { font-size: 1.6em; }
	#comments .wrapper { border-top: 0; }
	#comments h4 { background-color: #ddd; padding: .3em 3.5em; margin-left: -4em; margin-right: -4em; }
	#comments h4 span { background-color: transparent; }
	#comments h4 em { font-size: 1.2em; color: #999; }
	
	h5 em { display: block; }
	
	.haiku {
		font-size: 1.4em;
	}
	
	.other-tags {
		border-top: none;
		border-bottom: none;
	}
		
		.other-tags ul {
			margin-top: 0;
		}
	
		.other-tags h4 {
			float: none;
			border-bottom: 1px solid #ccc;
			padding: 0.2em 20% 0.3em;
			margin: 0 -20% 0.5em;
		}
	
	#footer .copyright { width: auto; margin-top: 40px; }
	
	.by-tag ul, .by-topic dl {
		-moz-column-count: 1;
		-moz-column-gap: 0;
		-webkit-column-count: 1;
		-webkit-column-gap: 0;
		column-count: 1;
		column-gap: 0;
	}
	
	aside.to-the-right, aside.to-the-left {
		width: 40%;
	}
	
	.weight-loss-update strong { font-size: 4em; }
	.weight-loss-update span.last strong { font-size: 2.4em; }
	.weight-loss-update em { font-size: 0.9em; }
	.weight-loss-update span.last em { margin-top: 1.1em; }
	.weight-loss-target { font-size: 0.8em; }
}
/* 转载请注明出处：脚本之家  www.jb51.net */