/*----------------------------------------------
	GLOBAL.CSS
	Author:		Will Blackmore
				willblackmore.co.uk
	Requires:	reset.css
----------------------------------------------*/

@import url(reset.css);


/*-------------------------------
	GENERIC STYLES
-------------------------------*/

body {
	padding-bottom: 50px;
	background: #222;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
	text-shadow: 2px 3px 1px #000;
}

.werds p {
	margin-bottom: 20px;
	font-size: 28px;
	color: #e4e4e4;
}

.werds p.himynameis {
	font-size: 38px;
	font-weight: bold;
}

.werds a {
	position: relative;
	display: inline-block;
	padding: 0 3px;
	border-radius: 8px;
	background: #9cd324;
	color: #000;
	font-weight: bold;
	text-decoration: none;
	text-shadow: none;
	
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	
	-webkit-box-shadow: 2px 3px 1px #000;
	-moz-box-shadow: 2px 3px 1px #000;
}

.werds a:hover {
	padding: 10px 13px;
	margin: -10px;
	border-radius: 16px;
	
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
}


/*---------------------
	HEADINGS
---------------------*/

h1 {
	display: inline-block;
	padding: 40px;
	font-weight: bold;
	font-size: 80px;
	background: rgba(0,0,0,0.1);
	
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
}

h2 {
	margin-bottom: 20px;
	font-size: 40px;
	font-weight: bold;
}


/*-------------------------------
	GENERIC CONTENT
-------------------------------*/

.werds {
	width: 600px;
	padding: 35px 35px 15px;
	margin-top: -30px;
	background: rgba(0,0,0,0.1);
	
	-webkit-transform: rotate(-4deg);
	-moz-transform: rotate(-4deg);
}

.werds:hover {
	background: rgba(0,0,0,0.2);
}


/*---------------------
	INTRO
---------------------*/

#ohhai {
	margin: -30px 0 0 22px;
}

/*---------------------
	TWITTER
---------------------*/

#tweetweet {
	width:860px;
	margin-left: 35px;
}

#tweetweet ul {
	margin-bottom: 10px;
}

#tweetweet ul li,
#lastfm dl {
	position: relative;
	display: inline-block;
	max-width: 255px;
	padding: 16px;
	margin: -16px 10px 10px -16px;
	background: rgba(0,0,0,0.3);
	opacity:.6;
	font-size: 18px;
	line-height: 24px;
	z-index: 10;
}

#tweetweet ul li:hover,
#lastfm dl:hover {
	opacity:1;
	z-index: 20;
}

#tweetweet ul li:nth-child(2n+1),
#lastfm dl:nth-child(2n+1) {
	background: rgba(0,0,0,0.4);
	
	-webkit-transform: rotate(2deg);
	-moz-transform: rotate(2deg);
}

#tweetweet ul li:nth-child(3n+2),
#lastfm dl:nth-child(3n+2) {
	background: rgba(0,0,0,0.2);
	
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
}


/*---------------------
	LAST.FM
---------------------*/

#moosic {
	clear: both;
	width: 830px;
	margin: -20px 0 0 44px;
}

#lastfm dl {
	max-width: 145px;
}

#lastfm img {
	width: 128px;
}

#lastfm dt {
	margin-bottom: 16px;
	text-align: center;
}

#lastfm .lfm_art {
	width: 128px;
	padding: 6px;
	margin: -6px;
}

#lastfm .lfm_art:hover {
	padding: 10px;
	margin: -10px;
}


#lastfm .lfm_artist,
#lastfm .lfm_album {
	font-size: 14px;
	font-style: italic;
	color: #ddd;
	line-height: 18px;
}