@font-face {
	font-family: 'MuseoSlab';
	src: url('/includes/fonts/museo_slab_500-webfont.eot');
	src: local('☺'), url('/includes/fonts/museo_slab_500-webfont.woff') format('woff'), url('/includes/fonts/Museo_Slab_500.otf') format('opentype'), url('/includes/fonts/museo_slab_500-webfont.svg#webfontqD4xOhqi') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* center vertically - hack with css tables */

html,
body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
html {display:table;}
body {
	display:table-cell;
	vertical-align:middle;
}
#content {
	margin:0 auto;
}

body {
	background: rgb(40, 75, 130);
	color: #E7E4D5; 
	font: normal 120% MuseoSlab, Georgia, Palatino, "Palatino Linotype", Times, serif;
	margin: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

h1 {
	text-shadow: #333 1px 1px 2px;
}

a {
	color: #8cb5f8; 
	background: transparent;
	text-decoration: none;
	font-size: 110%;
	-webkit-transition: color 0.5s ease-out;
	-moz-transition: color 0.5s ease-out;
	-o-transition: color 0.5s ease-out;
	transition: color 0.5s ease-out;
	padding-left: 20px;
}

a:hover {
	color: #4d85ec;
	background: inherit;
}

#content {
	background-color: #1e3888;
	text-shadow: rgba(0, 0, 0, 0.2) 0 2px 0;
	width: 23em;
	margin: 5% auto;
	padding: 1em 2em;
	
	background: rgb(28,62,115) -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.33, rgb(28,62,115)),
    color-stop(0.60, rgb(56,93,150)),
    color-stop(0.84, rgb(84,121,180))
	);
	background: rgb(28,62,115) -moz-linear-gradient(
    center bottom,
    rgb(28,62,115) 33%,
    rgb(56,93,150) 60%,
    rgb(84,121,180) 84%
	);
	
	-webkit-box-shadow: 0px 0px 30px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 0px 30px rgba(0,0,0,0.25);
	-o-box-shadow: 0px 0px 30px rgba(0,0,0,0.25);
	box-shadow: 0px 0px 30px rgba(0,0,0,0.25);
	
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
}

/* social icons */
.pinboard, .pinboard:hover {
	background: transparent url(/includes/icons/pinboard.png) left 50% no-repeat;
}
.delicious, .delicious:hover {
	background: transparent url(/includes/icons/delicious.png) left 50% no-repeat;
}
.flickr, .flickr:hover {
	background: transparent url(/includes/icons/flickr.png) left 50% no-repeat;
}
.lastfm, .lastfm:hover {
	background: transparent url(/includes/icons/lastfm.png) left 50% no-repeat;
}
.vimeo, .vimeo:hover {
	background: transparent url(/includes/icons/vimeo.png) left 50% no-repeat;
}
.tumblr, .tumblr:hover {
	background: transparent url(/includes/icons/tumblr.png) left 50% no-repeat;
}
.twitter, .twitter:hover {
	background: transparent url(/includes/icons/twitter.png) left 50% no-repeat;
}
.facebook, .facebook:hover {
	background: transparent url(/includes/icons/facebook.png) left 50% no-repeat;
}
.googleplus, .googleplus:hover {
	background: transparent url(/includes/icons/googleplus.png) left 50% no-repeat;
}
.scribd, .scribd:hover {
	background: transparent url(/includes/icons/scribd.png) left 50% no-repeat;
}
.vcard, .vcard:hover {
	background: transparent url(/includes/icons/vcard.png) left 50% no-repeat;
}

@media screen and (min-width: 200px) and (max-width: 800px) {
	h1 {
		font-size: 120%;
		letter-spacing: 1.5px;
	}
	
	a {
		-webkit-transition-property: opacity, text-shadow, color;
		-webkit-transition-duration: 1s, 1.5s, 1.5s;
		-webkit-tap-highlight-color:rgba(241,93,34,0.4);
	}
	
	#content {
		margin: 1em auto;
		width: 70%;
		line-height: 1.3em;
	}
	
	dt {
		margin-bottom: 0.5em;
	}
}

@media screen and (min-width: 1024px) {
	body {
		font-size: 150%;
	}
	#content {
		width: 25em;
	}
}
	
@media only screen and (max-device-width: 480px) {
	#content p {display: none;}
}