/*
Theme Name: Elegant
Author: Lea Verou
Author URI: http://leaverou.me/
Description: 
Version: 1.0
Tags: 
*/

@font-face {
	font-family: 'Raleway';
	src: url('fonts/raleway_thin-webfont.eot');
	src: local('☺'), 
		url('fonts/raleway_thin-webfont.woff') format('woff'),
		url('fonts/raleway_thin-webfont.ttf') format('truetype'),
		url('fonts/raleway_thin-webfont.svg#webfontpeVNweuo') format('svg');
	font-weight: 100;
	font-style: normal;
}

* {
	margin: 0;
	padding: 0;
}

/* HTML5 elements */
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

html {
	height:100%;
	background-color: #ffecd0;
	background-image: 
			linear-gradient(90deg, transparent 50%, white 50%),
			linear-gradient(45deg, rgba(255, 255, 255, .3) 25%, transparent 25%,
				transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%,
				transparent 75%, transparent);
	background-size: 100% 100%, 100px 100px;
	color: black;
}

body {
	min-height:100%;
	font-family: 'Palatino Linotype', Palatino, Georgia, serif;
	line-height: 1.5;
	background: white;
	margin: 0 auto;
	width: 920px;
	background: white;
	padding: 20px 30px 0 30px;
	
	box-shadow: -5px 0 5px -2px rgba(0, 0, 0, 0.15);
	tab-size: 4;
}

h1 {
	font-size: 1.5em;
}

p {
	margin: .5em 0;
}

#site-title,
#site-description,
h1.entry-title,
#main .widget-area h1 {
	font-family: Raleway, 'Helvetica Neue', Helvetica, sans-serif;
	font-weight: 100;
	color: #f06;
}

a {
	color: inherit;
	text-decoration: none;	
}

a:hover {
	color: #f06;
}

code, pre {
	font-family: Monaco, Consolas, 'Andale Mono', 'Lucida Console', 'Courier New', monospace;
}

pre {
	padding:.5em .8em;
	border:.1px solid #ccc;
	border-color:#bbb #ddd #ddd #bbb;
	
	background-image: linear-gradient(rgba(255, 255, 255, .3) 50%, transparent 50%, transparent) !important;
	background-size: 3em 3em !important;
	background-origin: content-box !important;
	
	line-height:1.5em;
	margin-bottom:1em;
	overflow:auto;
	
	box-shadow:.1px 1px 3px rgba(0,0,0,.3) inset;
}

acronym, abbr
{
	border-bottom: 1px dashed #999;
}

blockquote {
	margin: 15px 0 0 10px;
	padding: .3em 1em .3em 2em;
	border-left: .7em double rgba(255, 255, 255, .3);
	background: #ffecd0;
}

blockquote:before {
	content: '\275D';
	float: left;
	display: block;
	margin-left: -.8em;
	margin-top: -.25em;
	color: #f72;
	font-size: 400%;
	line-height: 1;
}

blockquote cite {
	margin: 5px 0 0;
	display: block;
}

button,
input[type="button"],
input[type="submit"],
button.dsq-button[type], button.dsq-button-small[type] {
	padding: .15em .4em .25em;
	background: #f06;
	border:1px solid transparent;
	color: white;
	text-transform: lowercase;
	font-weight: bold;
	font-style: italic;
	font-family: Georgia, Palatino, 'Palatino Linotype', serif;
	text-shadow: 1px 1px 2px rgba(0,0,0,.5);
	outline: none;
	
	border-radius: .3em;
	
	transition:.5s;
	
	box-shadow: rgba(255, 255, 255, .5) 0 1px 0 inset,
						rgba(255, 255, 255, .4) 0 25px 30px -12px inset,
						rgba(0, 0, 0, .6) 0 1px 2px;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
	background: #f72;
}

button:active,
input[type="button"]:active,
input[type="submit"]:active {
	box-shadow: rgba(255, 255, 255, .5) 0 1px 0 inset,
						rgba(255, 255, 255, .4) 0 -25px 30px -12px inset,
						rgba(0, 0, 0, .5) 0 1px 1px;
}


/* =Structure
-------------------------------------------------------------- */

#primary {
	float: left;
	margin: 0 -250px 0 0;
	width: 100%;
}

#content {
	margin: 0 300px 0 0;
}

#main .widget-area {
	float: right;
	width: 250px;
}

	#main .widget-area h1 {
		margin: .5em 0 0;
	}
	
	#main .widget-area ul {
		list-style: none;
	}
	
		#main .widget-area ul li {
			padding: .7em 0 .5em;
			border-bottom: 1px solid #ddd;
			position: relative;
		}
		
		#main .widget-area ul li:before,
		#main .widget-area ul li:after,
		#main .widget-area ul li a:after {
			background: white;
			line-height: 1;
			position: absolute;
			bottom: -.7em;
			color: #ccc;
			font-size: 60%;
		}
		
		#main .widget-area ul li:before {
			content: '◅';
			left: 0;
		}
		
		#main .widget-area ul li:after {
			content: '▻';
			right: 0;
		}
		
			#main .widget-area ul li > *:first-child:after {
				content: '◦ ❉ ◦';
				white-space: pre;
				left: 50%;
				margin-left: -1em;
				font-size: 110%;
			}
			
			#main .widget-area ul li:first-child {
				padding-top: 0;
			}
			
			#main .widget-area ul li:last-child {
				border-bottom: none;
			}
			
			#main .widget-area ul li:last-child:before,
			#main .widget-area ul li:last-child:after,
			#main .widget-area ul li:last-child > *:first-child:after {
				content: ""; /* for Webkit */
				content: none;
				display: none;
			}
		

/* =Widgets
-------------------------------------------------------------- */

.widget {
	display: block;
}

#searchform:after {
	content: "";
	clear: both;
	display: block;
}

#searchform input {
	float: left;
	font-size: 110%;
	padding: .2em .3em;
	outline: none;
	
	border-radius: .3em;
}

#searchform input[type="text"] {
	padding: .2em .3em;
	border: 1px solid #ccc;
	outline: none;
	
	border-radius: .3em;
}

#searchform #s {
	width: 9em;
	margin-right: .2em;
}

#searchform #s:focus {
	box-shadow: 2px 1px 4px -1px #aaa inset;
}

#searchform #searchsubmit {
	margin: 0 -.5em 0 0;
}

#main .widget-area li.dsq-widget-item {
	padding:.3em 0 1em;
}

	.dsq-widget-item img.dsq-widget-avatar { 
		border: 1px solid #eee;
		padding: 3px;
		background:white;
		margin:0 10px 5px 0;
		
		box-shadow:1px 1px 3px rgba(0,0,0,.5);
	}

.dsq-widget-comment {
	color: gray;
	font-style: italic;
}

.dsq-widget + a {
	font-size: 75%;
	text-align:right;
	display: block;
	font-style: italic;
	color: gray;
}

button.dsq-button[type] {
	font-size: 130%;
}

#dsq-content .dsq-comment-footer{
	padding: 2px;
}

/* Start site links */

a:before {
	vertical-align:-2px;
	margin-right:5px;
	width: 16px;
	height: 16px;
}

a[href^="http://twitter.com"]:before {
	content: url(favicons/twitter.png);
}

.bbpBox a[href^="http://twitter.com"]:before {
	content: "";
	content: none;
}

a[href^="http://lanyrd.com"]:before {
	content: url(favicons/lanyrd.png);
}

a[href^="http://slideshare.net"]:before {
	content: url(favicons/slideshare.png);
}

a[href^="https://github.com"]:before {
	content: url(favicons/github.png);
}

a[href^="http://flickr.com"]:before {
	content: url(favicons/flickr.png);
}

a[href*="linkedin.com"]:before {
	content: url(favicons/linkedin.jpg);
}

a[href^="http://dopplr.com"]:before {
	content: url(favicons/dopplr.png);
}

a[href^="http://last.fm"]:before {
	content: url(http://cdn.last.fm/flatness/favicon.2.ico);
}

a[href*="smashingmagazine.com"]:before {
	content: url(favicons/smashingmag.ico);
}

a[href^="http://functionsource.com"]:before {
	content: url(favicons/functionsource.png);
}

a[href*="opera.com"]:before {
	content: url(http://my.opera.com/community/favicon.ico);
}

a[href*="netmagazine.com"]:before {
	content: url(favicons/netmag.ico);
}

a[href^="http://css-tricks.com"]:before {
	content: url(http://css-tricks.com/favicon.ico);
}

a[href^="http://dribbble.com"]:before {
	content: url(favicons/dribbble.ico);
}

a[href^="http://www.alistapart.com"]:before {
	content: url(favicons/alistapart.png);
}

/* End site links */

a.dsq-avatar:before {
	content: "";
	content: none;
}

#colophon {
	clear: both;
	display: block;
	width: 100%;
}

/* Increase the size of the content area for templates without sidebars */
.full-width #content,
.image-attachment #content,
.error404 #content {
	margin: 0;
}

/* Text meant only for screen readers */
.screen-reader-text,
.section-heading {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

/* Alignment */
.alignleft {
	display: inline;
	float: left;
}
.alignright {
	display: inline;
	float: right;
}
.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.personal-pic
{
	background:white;
	border:1px solid #bbb;
	padding:14px 14px 50px;
	margin:5px 0 0 25px;
	
	box-shadow:4px 4px 15px rgba(0,0,0, .6);
	
	transform: rotate(5deg);
}

img.personal-pic:hover {
	box-shadow:1px 4px 15px rgba(0,0,0, .6);
	
	transform: rotate(-5deg);
}


/* =Header
-------------------------------------------------------------- */

#site-title a {
	background: url(/logo.svg) no-repeat left center;
	padding: .2em 0 0 70px;
	font-size: 270%;
	line-height: 1;
	text-transform: uppercase;
}

#site-title a:not(:hover) {
	color: black;
}

#site-description {
	font-size: 105%;
	font-weight: normal;
	margin: -3.5em 0 13px;
	font-family: Georgia, Palatino, 'Palatino Linotype', serif;
	font-style: italic;
	font-weight: bold;
	color: silver;
	float: right;
	text-align:right;
	width: 220px;
	text-shadow: 0 0 1px #eee;
}

/* =Menu
-------------------------------------------------------------- */

#access,
.demo hgroup {
	position: relative;
	margin: 1em 0 1em -40px;
	clear: both;
}

#access:before,
.demo hgroup:before {
	content: "";
	position: absolute;
	left: -10px;
	bottom: -9px;
	z-index: 1;
	border: 10px solid transparent;
	border-right-color: #c50;
}

#access ul,
.demo hgroup > h1 {
	display: block;
	position: relative;
	z-index: 2;
	padding: .2em 30px;
	margin-right: -2em;
	list-style: none;
	background: #f72;
	font-family: Georgia, Palatino, 'Palatino Linotype', serif;
	font-weight:bold;
	font-style: italic;
	font-size: 120%;
	line-height: 1;
	color: white;
	text-transform: lowercase;
	border-radius: 0 9999px 9999px 0;
	box-shadow: 0 2px 8px -3px rgba(0,0,0,.5),
				0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;;
}

#access ul:after,
.demo hgroup > h1:after {
	content: "";
	clear: both;
	display: block;
	visibility: hidden;
}

	#access li {
		float: left;
		position: relative;
	}
	
		#access a {
			display: block;
			padding: .4em .8em;
			text-decoration: none;
			text-shadow: 1px 1px 1px rgba(0,0,0,.3);
			
			transition:.3s box-shadow, .3s padding;
			border-radius: 9999px;
		}
		
		#access a:hover,
		#access a:active {
			background: rgba(0,0,0,.1);
			color: white;
			
			box-shadow: 1px 1px 5px rgba(0,0,0,.3) inset;
		}
		
		#access a:active {
			background:white;
			color: #eee;
			padding: .5em .6em .3em 1em;
			text-shadow: 1px 1px 0 rgba(0,0,0,.4);
			
			box-shadow: 10px 6px 1px #c50 inset;
		}
		
	#access #feedlink {
		position: absolute;
		right: -33px;
		top: 4px;
		z-index: 3;
		background: url(rss.png) no-repeat;
		width: 33px;
		height: 33px;
		padding: 0;
		text-indent: -9999px;
		overflow: hidden;
		
		transition:2s;
	}
	
	#access #feedlink:hover {
		transform: rotate(720deg);
	}

.demo hgroup {
	text-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

	.demo hgroup > h1 {
		font-size: 200%;
		padding-top: .3em;
		padding-bottom: .4em;
	}
	
	.demo hgroup > h2 {
		position: relative;
		z-index: 2;
		width: 16em;
		float: right;
		font-size: 100%;
		margin-top: -2.85em;
		color: white;
		text-align: right;
		line-height: 1.2;
	}

/* =Content
-------------------------------------------------------------- */

#content nav {
	display: block;
	overflow: hidden;
}

#content nav .nav-previous,
#content nav .nav-next {
	white-space: nowrap;
	font-family: Georgia, Palatino, 'Palatino Linotype', serif;
	font-weight: bold;
	font-style: italic;
	font-size: 70%;
}

#content nav .nav-previous {
	float: left;
}

#content nav .nav-next {
	float: right;
	text-align: right;
}

#content #nav-above {
	display: none;
}
.paged #content #nav-above,
.single #content #nav-above {
	display: block;
}
#nav-below {
	margin: 1em 0 0;
}
.page-link {
	margin: 0 0 1em;
}

/* 404 page */
.error404 .widget {
	float: left;
	width: 33%;
}
.error404 .widget .widgettitle,
.error404 .widget ul {
	margin-right: 1em;
}
.error404 .widget_tag_cloud {
	clear: both;
	float: none;
	width: 100%;
}

/* Notices */
.post .notice,
.error404 #searchform {
	background: #eee;
	display: block;
	padding: 1em;
}

/* Image Attachments */
.image-attachment div.entry-meta {
	float: left;
}
.image-attachment nav {
	float: right;
	margin: 0 0 1em 0;
}
.image-attachment .entry-content {
	clear: both;
}
.image-attachment .entry-content .entry-attachment {
	background: #eee;
	margin: 0 0 1em;
	padding: 1em;
	text-align: center;
}
.image-attachment .entry-content .attachment {
	display: block;
	margin: 0 auto;
	text-align: center;
}


/* =Images
-------------------------------------------------------------- */

a img {
	border: none;
}
p img {
	margin-bottom: 0.5em; /* a small bottom margin prevents content floating under images */
}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto,
img.size-full,
img.size-large,
img.size-medium,
.attachment img,
.widget-area img,
.entry-content img {
	max-width: 100% !important; /* When images are too wide for containing element, force them to fit. */
	height: auto !important; /* Override height to match resized width for correct aspect ratio. */
}
img.alignleft {
	margin-right: 1em;
}
img.alignright {
	margin-left: 1em;
}
.wp-caption {
	padding: .5em;
	text-align: center;
}
.wp-caption img {
	margin: .25em;
}
.wp-caption .wp-caption-text {
	margin: .5em;
}
.gallery-caption {
	
}
.wp-smiley {
	margin: 0;
}

/* Posts 
-------------------------------------------------------------- */
article.post {
	border-bottom: 1px dotted silver;
}

article.post:after {
	content: '❦';	
	font-size: 200%;
	display: block;
	width: 1em;
	margin: 0 auto -.9em;
	background: white;
	color: gray;
	text-align: center;
}

h1.entry-title {
	font-size: 200%;
	line-height: 1.2;
	margin: 1em 0 0;
}

.entry-content a,
.comment a {
	color: #f06;
}

.entry-content a:hover,
.comment a:hover {
	color: #f73;
}

.entry-meta {
	color: #999;
	font-style: italic;
}

	.entry-meta time,
	.entry-meta .author {
		text-transform: uppercase;
		font-size: 80%;
		font-style: normal;
	}
	
	.entry-content a.view-demo {
		font-size: 80%;
		background: #f06;
		color: white;
		padding: .6em 1em .3em;
		text-transform: uppercase;
		text-decoration: none;
		
		border-radius: 9999px;
	}
	
	.entry-content a.view-demo:hover {
		background: #f72;
		text-shadow: 0 0 1em white, 0 0 .5em white;
	}
	
	.entry-content li {
		list-style:none;
		padding-left:2em;
	}
	
	.entry-content ol {
		counter-reset:counter;	
	}
	
	.entry-content ul > li {
		text-indent:-1.5em;	
	}
		
		.entry-content li ul {
			padding-left: 1em;
		}
		
				
	.entry-content li:before {
		font-size:1.6em;
		line-height:.8;
		padding-right:.1em;
	}
	
	.entry-content li:before {
		content:'➛';
		color: #ddd;
	}
	
	.entry-content ol > li {
		list-style:none;
		text-indent: -1.5em;
		margin: 1em 0 0 1em;
	}
	
	.entry-content ol > li:before {
		counter-increment:counter;
		content:counter(counter);
		
		font-family: Raleway, 'Helvetica Neue', Helvetica, sans-serif;
		font-size:6em;
		line-height: .2em;
		padding:.05em 0 .05em;
		display:inline-block;
		vertical-align:middle;
	}
	
	.entry-content ol > li:nth-child(even) {
		padding-left:3em;
		padding-right:0;
	}
		
		.entry-content ol > li:nth-child(even) > ul {
			padding-left:3em;
		}
	
		.entry-content ol ol > li:before {
			font-size:3em;
			color:#ccc;
		}
		
		.entry-content ol ol > li:nth-child(even) {
			padding-left:0;
		}
		
			.entry-content ol ol ol > li:before {
				font-size:2em;
				color:#bbb;
			}			
			
	
	.entry-content ul.omitted li:before {
		content:'\2718';
		color:#b00;
	}

/* =Footer
-------------------------------------------------------------- */

#colophon {
	padding: 1em 0 0;
}

.entry-content ul.talks {
	padding:0;
}


/*.page-id-937 {
	font-size:160%;
	margin-top:1em;
	color:#aaa;
}*/

.entry-content h1,
.entry-content h2,
.entry-content h3 {
	margin-top: 1em;
}

.page-id-937 h1:first-of-type {
	margin-top:.5em;
}

	ul.talks > li,
	ul.publications > li {
		padding:.8em 0;
		border-bottom:1px solid silver;
		text-indent:0;
	}
	
	.talks > li:last-child,
	ul.publications > li:last-child {
		border-bottom:5px solid #eee;
	}
	
	.talks > li:before,
	.publications > li:before {
		content:none;
	}
	
		.talks h2,
		.talks h3,
		.talks address,
		.talks .comment {
			margin-left:130px;
		}
		
		.talks h2,
		.talks h3 {
			font-size:100%;
		}
		
		.talks h2,
		.talks h3,
		.talks p {
			margin-top:0;
			margin-bottom:0;
		}
		
		.talks h2 {
			
		}
		
		.talks h3 {
			font-weight:normal;
			line-height:1.2;
			margin-bottom:.6em;
		}
		
		.talks .date {
			float:left;
			margin-top:-1.9em;
			color: #aaa;
			font-variant:small-caps;
		}
		
		.talks address,
		.talks .comment {
			font-size:75%;
			font-style:normal;
		}
		
		.talks address {
		}
		
		.talks address:before {
			display:inline-block;
			margin-right:.4em;
			vertical-align:-1px;
		}
		
		.talks address:not([class*="country-"]):before {
			content: url(flags/online.png);
			vertical-align:-3px;
		}
		
		.talks address.country-nl:before { content: url(flags/nl.png); }
		.talks address.country-nz:before { content: url(flags/nz.png); }
		.talks address.country-gb:before { content: url(flags/gb.png); }
		.talks address.country-se:before { content: url(flags/se.png); }
		.talks address.country-fi:before { content: url(flags/fi.png); }
		.talks address.country-ru:before { content: url(flags/ru.png); }
		.talks address.country-no:before { content: url(flags/no.png); }
		.talks address.country-pl:before { content: url(flags/pl.png); }
		.talks address.country-gr:before { content: url(flags/gr.png); }
		.talks address.country-ch:before { content: url(flags/ch.png); }
		.talks address.country-de:before { content: url(flags/de.png); }
		.talks address.country-it:before { content: url(flags/it.png); }
		.talks address.country-us:before { content: url(flags/us.png); }
		.talks address.country-au:before { content: url(flags/au.png); }
		.talks address.country-cz:before { content: url(flags/cz.png); }
		.talks address.country-ca:before { content: url(flags/ca.png); }
		.talks address.country-cl:before { content: url(flags/cl.png); }
		.talks address.country-br:before { content: url(flags/br.png); }
		.talks address.country-be:before { content: url(flags/be.png); }
		.talks address.country-fr:before { content: url(flags/fr.png); }
		.talks address.country-ph:before { content: url(flags/ph.png); }
		
		.talks .comment,
		.talks .comment a {
			color:gray;
		}
		
		.talks .comment a {
			text-decoration: underline;
		}
		
		.talks .comment a:before {
			content:none;
		}
		
ul.publications {
	padding-left: 0;
	color: gray;
}
	
	/* Title */
	.publications > li:first-line {
		font-size: 120%;
	}
	
	.publications > li > a:first-of-type:before {
		content: none;
	}
	
	.publications > li > a:nth-of-type(2) {
		color: black;
	}
	
	.publications > li > time {
		font-style: italic;
	}
		
/* Carbon ads */
.carbon-wrap {
	overflow: hidden;
}

.carbon-img {
	float: left;
	margin: .4em .5em 0 0;
}

.carbon-poweredby {
	display: block;
	font-size: 60%;
}

@keyframes notice-pulse {
	from, 66% { background: #f06; }
	33%, to { background: gray; }
}

p#notice {
	position: fixed;
	top: -10px;
	right: 0;
	left: 0;
	z-index: 4;
	padding: .5em 0 .2em;
	background: #f06;
	color: white;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-shadow: 1px 1px 2px rgba(0,0,0,.3);
	box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
	animation: notice-pulse 3s 1s forwards;
}
	
	p#notice > a {
		color: inherit;
		text-decoration: underline;
	}
	
	p#notice + hgroup {
		margin-top: 2.5em;
	}
	
/* CSS3 tools list */
.projects article {
	display: block;
	clear: both;
	padding: 1em 0;
}

	.projects h2,
	.projects p {
		margin-left: 255px;
	}
	
	.projects h2:first-child,
	.projects h2:first-child + p,
	.projects h2:first-child ~ footer > p {
		margin-left: 0;
	}

	.projects h2 {
		margin-top: 0;
	}

	.projects img {
		max-width: 220px;
		border:10px solid rgba(0,0,0,.15);
		box-shadow: 1px 1px 3px gray;
	}
	
.twitter-share-button {
	float: right;
	margin: .6em 0 .3em .4em;
}

@media (max-width: 1000px) {
	body {
		width: auto;
	}
	
	#access ul {
		margin-right: -1em;
	}
	
	#access #feedlink {
		right: -12px;
		top: 6px;
	}
	
	#secondary {
		float: none;
		width: auto;
	}
	
		#main .widget-area {
			float: none;
			width: auto;
		}
	
	#primary {
		float: none;
		margin-right: 0;
	}
	
	#content {
		margin-right: 0;
	}
}

@media (max-width: 700px) {
	#site-description {
		float: none;
		width: auto;
		margin-top: 0;
		text-align: inherit;
	}
	
	header#branding {
		text-align: center;
	}
	
	#access #feedlink {
		top: 22px;
		right: 3px;
	}
}