/**
 *	Base
 */

@import url("http://fonts.googleapis.com/css?family=Kreon:light,regular,bold");
@import url("http://fonts.googleapis.com/css?family=Copse");

body {
	background: #fff url("../img/bg.png");}

div#wrapper {
	padding: 60px;
	background: transparent url("../img/header.png") repeat-x;}

header h1 {
	margin-bottom: 10px;
	font: bold 46px "Kreon", helvetica, arial, sans-serif;
	letter-spacing: -1px;}

header p {
	width: 540px;
	font: 20px "Copse", georgia, "Times New Roman", serif;
	line-height: 170%;
	color: #666;}

header p a {
	color: #1f6275;
	text-decoration: none;
	border-bottom: #ccc 1px solid;}

header p a:hover {
	color: #111;
	border-bottom-color: #1f6275;}

mark {
	background: #fff6af;}

div#cutout {
	background: transparent url("../img/cutout.png") no-repeat;
	width: 250px;
	height: 550px;
	position: absolute;
	top: 40px;
	left: 620px;}

section {
	margin-top: 30px;
	width: 540px;}

section ul li {
	margin-right: 4px;
	float: left;}

section ul li a {
	padding: 3px 8px;
	font: 14px "Copse", georgia, "Times New Roman", serif;
	text-transform: lowercase;
	text-decoration: none;
	color: #fff;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;}

section ul li a:hover {
	background: #333!important;}

section ul li.twitter a {
	background: #33bcf4;}

section ul li.facebook a {
	background: #3b5998;}

section ul li.dribbble a {
	background: #ee5790;}