/*
-----------------------------------------------
Nice Web Type likes:
Author:   Tim Brown
Date:     20 July 2009

Typefaces provided by Typekit.
-----------------------------------------------*/


/* General
===============================================*/
body {
	margin: 0;
	padding-bottom: 100px;
	background-color: #eee;
	font: 16px/24px Verdana, sans-serif;
	}


/* Header, "Filthy"
-----------------------------------------------
More details about this pure CSS text gradient technique:
http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/
-----------------------------------------------*/
#header {
	position: relative;
	height: 400px;
	background: #000 url(../images/bike-chrome.jpg) top no-repeat;
	}
h1 {
	position: relative;
	width: 760px;
	margin: 36px auto 0;
	font-weight: normal;
	font-size: 300px;
	line-height: 300px;
	text-shadow: -3px 0 4px #006;
	-webkit-transition: all .3s ease-out;
	}
h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
	position: absolute;
	top: 0; z-index: 2;
	margin: 0;
	padding: 0 36px 0 0;
	font-weight: normal;
	color: #d12;
	-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
	-webkit-transition: all .3s ease-out;
	}
h1:after {
	content: "Filthy";
	content: attr(title);
	color: #000;
	text-shadow: 3px 3px 1px #600;
	}
h1 a:hover {
	color: #f12;
	}
h1 a:active {
	background-color: transparent;
	}


/* Sections
-----------------------------------------------*/
#interior {
	padding-bottom: 36px;
	border-top: 8px #000 solid;
	background-color: #4a0d0a;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.5))), url(../images/red.gif);
	background-repeat: repeat-x, repeat;
	background-position: bottom left, top;
	color: #fff;
	}
#type {
	border-top: 8px #fff solid;
	background-color: #dcdbd9;
	}
#technique {
	position: relative;
	overflow: hidden;
	padding-bottom: 72px;
	border-top: 8px #3A0A03 solid;
	border-bottom: 60px #222 solid;
	background-color: #B3C0CC;
	}


/* Road parallax in footer
-----------------------------------------------*/
#countryside {
	position: absolute;
	bottom: -82px; left: -30%;
	width: 99000px;
	color: #778936;
	font-size: 96px;
	line-height: 96px;
	text-shadow: -200px 0 0 #428943; 
	}
#moto {
	position: absolute;
	bottom: -52px; left: 42%;
	color: #000;
	font-size: 96px;
	line-height: 96px;
	letter-spacing: -10px;
	}
#paintjob {
	color: #333;
	text-shadow: 3px 2px 0 #666;
	}
	

/* Type
-----------------------------------------------*/
h2 {
	margin: 24px 0 12px 10px;
	font-size: 42px;
	line-height: 42px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #000;
	text-shadow: 0 1px 0 #222;
	}
#type h2 {
	margin: 24px 0 18px 0;
	font-weight: lighter;
	font-size: 30px;
	line-height: 30px;
	text-transform: none;
	letter-spacing: 0;
	color: #999;
	text-shadow: none;
	}
#type h2 span.bello,
#amp-sample span.bello {
	font-weight: normal;
	line-height: 24px;
	color: #fff;
	text-shadow: 0 -1px 1px #ccc;
	}

#technique h2 {
	margin: 24px 0 18px 0;
	text-shadow: none;
	}

h5, h6, p, ol, ul {
	margin-bottom: 24px;
	}
ul {
	list-style: square;
	padding-left: 16px;
	}
ol {
	list-style: decimal;
	padding-left: 20px;
	}
code {
	color: #4f8aac;
	font: 14px/24px "Anonymous Pro", "Panic Sans", Monaco, monospace; 
	}


/* Special attention
-----------------------------------------------*/
.bb {
	padding: 10px 12px 0;
	border-bottom: 1px #222 solid;
	background-color: #000;
	text-shadow: 0 -1px 1px #000;
	-webkit-border-radius: 6px;
	}
.screenshot {
	float: left;
	width: 200px;
	margin: 0 10px 10px 0;
	}
.with-screenshot {
	margin-left: 210px;
	}

p.b1 {
	margin: 24px 0 0;
	text-align: center;
	font-size: 82px;
	line-height: 82px;
	color: #111;
	}
#amp-sample {
	color: #999;
	font-size: 30px;
	line-height: 30px;
	word-spacing: 8px;
	}
#amp-sample .dim { color: #ccc; }
#amp-sample strong { color: #bbb; }



/* Links
-----------------------------------------------*/
a {
	padding: 4px 0;
	text-decoration: none;
	}
a:link,
a:visited {
	color: #a2bfc7;
	font-weight: bold;
	-webkit-transition: all .1s linear;
	}
a:hover {
	color: #5e97b2;
	}
a:active { color: #fff; background-color: #000; }
#type a:link,
#type a:visited,
#technique a:link,
#technique a:visited,
#footer a:link,
#footer a:visited {
	color: #933;
	font-weight: normal;
	}
#type a:link,
#type a:visited {
	background-color: #dcdbd9;
	}
#technique a:link,
#technique a:visited {
	background-color: #B3C0CC;
	}
#footer a:link,
#footer a:visited {
	background-color: #eee;
	}
#type a:hover,
#technique a:hover,
#footer a:hover {
	color: #900;
	background-color: #fff;
	font-weight: normal;
	}
#type a:active,
#technique a:active,
#footer a:active {
	color: #fff;
	background-color: #000;
	font-weight: normal;
	}
	

/* Huzzah!
-----------------------------------------------

It's the bottom of the CSS file!

Congratulations on being so investigative and thorough. 
Web design needs more folks like you. Please let me know 
if you find anything awry in these files.

http://nicewebtype.com/about

Tim

-----------------------------------------------*/