@textcolor: #505667;
@bgcolor: #F2F2EB;
@corners: 8px;

/* some relative styling */
@discrete: @bgcolor - #161616;
.shadowedbox{
	box-shadow: 2px 2px 10px (@bgcolor - #888);
}
.shadowedtext{
	text-shadow: 0.03em 0.03em 0 rgba(250, 250, 250, 1);
}

html, body {
	color: @textcolor;
	font-family: Cabin, Helvetica, Verdana, Arial;
	font-size: 12pt;
	margin: 0px;
	padding: 0px;
	background-color: @bgcolor;
	height: 100%;
}
/*
	Header
*/
header{
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, @bgcolor), color-stop(0.99, @bgcolor - #111111));
	background-image: -moz-linear-gradient(center bottom, @bgcolor 0%, #E1E1DA 99%);
	padding-top: 20px;
	width: 100%;
	div{
		height: 160px;
		margin: 0 auto;
		width: 700px;
	}
	hgroup{
		float: left;
	}
	h1{
		font-size: 4em;
	}
	h2{
		font-size: 2em;
	}
	img{
		border: 1px solid @textcolor;
		float: right;
		padding: 2px;
	}
}

/*
	Content wrapper
*/
#wrapper{
	margin: 0 auto;
	width: 700px;
}

/*
	Navigation
*/
#mainmenu{
	ul{
		list-style-type: none;
		
		li{
			border-right: 1px solid @discrete;
			display: inline-block;
			padding-left: @corners;
			padding-right: @corners;
			
			&:last-of-type{
				border-right: none;
				padding-right: 0px;
			}
			img{
				max-height: 32px;
				vertical-align: middle;
			}
		}
	}
}

/*
	Columns
*/
.column{
	display: inline-block;
	padding: 0 20px;
	vertical-align: top;
	width: 300px;
}
	/* About */
	#about{
		border-right: 1px solid @discrete;
		
		blockquote{
			font-family: Helvetica, Verdana, Arial;
			font-style: italic;
			margin: 10px 0px 0px 10px;
			
			&:before{
				content: '"';
			}
			&:after{
				content: '"';
			}
		}
	}
	/* Feeds */
	#feeds{
		ul{
			list-style-type: none;
			padding: 0px;
		}
		li{
			margin-bottom: 14px;
		}
		a{
			vertical-align: top;
		}
		time{
			display: block;
			font-size: 0.8em;
		}
	}
	
/*
	Portfolio
*/
#portfolio{
	border-left: 1px solid @discrete;
	border-right: 1px solid @discrete;
	margin-top: 40px;
	
	h1{
		margin-left: 20px;
	}
	ul{
		list-style-type: none;
		padding: 0px;
		
		li{
			display: inline-block;
			margin: 0px 5px 0px 5px;
			padding: 10px;
			padding-bottom: 50px;
			vertical-align: top;
			width: 45%;
			
			&:nth-child(odd){
				border-right: 1px solid @discrete;
			}
			figure{
				margin: 0px;
				
				> img{
					border-radius: @corners;
					.shadowedbox;
					display: block;
					margin: 0 auto;
					max-height: 260px;
					max-width: 260px;
				}
				figcaption{
					h2{
						font-size: 1.3em;
						font-weight: normal;
						margin-top: 8px;
						.shadowedtext;
						text-align: center;
					}
					p:nth-child(2){
						margin-top: 4px;
					}
				}
			}
		}
	}
}

/*
	Elements
*/
h1, h2{
	margin: 0px;
	.shadowedtext;
}
a, a:visited{
	color: #0077CC;
	text-decoration: none;
}
/*
	Sprites
*/
.sprite{
	background-color: transparent;
	background-image: url(feedsprites.png);
	background-repeat: no-repeat;
	display: inline-block;
	height: 16px;
	margin-right: 5px;
	width: 16px;
} 
.calendar .sprite{
	background-position: -0px -0px;
}
.chrome .sprite{
	background-position: -80px -0px;
}
.facebook .sprite{
	background-position: -16px -0px;
}
.firefox .sprite{
	background-position: -32px -0px;
}
.flash .sprite{
	background-position: -48px -0px;
}
.gmail .sprite{
	background-position: -64px -0px;
}
.lastfm .sprite{
	background-position: -96px -0px;
}
.rss .sprite{
	background-position: -112px -0px;
}
.opera .sprite{
	background-position: -128px -0px;
}
.spotify .sprite{
	background-position: -160px -0px;
}
.twitter .sprite{
	background-position: -144px -0px;
}
.wikipedia .sprite{
	background-position: -176px -0px;
}
.wordpress .sprite{
	background-position: -192px -0px;
}
.youtube .sprite{
	background-position: -208px -0px;
}

/*
	Social networks (contact)
*/
.contact{
	> p{
		display: inline-block;
		text-align: left;
		width: 30em;
	}
}
#networks{
	list-style-type: none;
	margin: 0px;
	max-width: 33em;
	padding: 0px;
	
	li{
		margin-bottom: 1em;
		
		p{
			display: inline-block;
			margin: 0px;
			padding: 0px;
			vertical-align: middle;
			width: 400px;
		}
	}
}

/*
	Blog
 */
.blog{

	.hidden{
		display: none;
	}
	
	.filters{
		margin-bottom: 1em;
		margin-top: 1em;
		
		.toggle{
			background: transparent url(/checkboxes.png) top left no-repeat;
			background-position-y: -22px;
			cursor: pointer;
			display: inline-block;
			height: 16px;
			margin: 3px;
			padding: 5px 5px 5px 24px;
			
			&.on{
				background-position-y: 3px;
			}
		}
		
		button {
			-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
			-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
			box-shadow:inset 0px 1px 0px 0px #bbdaf7;
			background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #4c96e0) );
			background:-moz-linear-gradient( center top, #79bbff 5%, #4c96e0 100% );
			filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#4c96e0')";
			background-color:#79bbff;
			-moz-border-radius:6px;
			-webkit-border-radius:6px;
			border-radius:6px;
			border:1px solid #84bbf3;
			display:inline-block;
			color:#ffffff;
			cursor: pointer;
			font-family:arial;
			font-size:13px;
			padding:2px 12px;
			text-decoration:none;
			text-shadow:1px 1px 0px #528ecc;
		}
		button:hover {
			background: #79bcff;
		}
		button:active {
			position:relative;
			top:1px;
		}
	}
	
	article{
		box-shadow: 0px -8px 8px -5px (@bgcolor - #333);
		margin-top: 1.2em;
		padding: 1em 10px 1em 10px;
		
		.entry-content{
			img{
				max-width: 100%;
			}
		}
	}
}

/*
	Mobile devices
 */
@media only screen and (max-width: 750px){
	html, body{
		font-size: 14pt;
	}
	#mainmenu ul{
		margin-left: 0px;
		padding-left: 0px;
	}
	#mainmenu a{
		font-size: 16pt;
		margin: 5px;
		padding: 5px;
	}
	#wrapper,
	.column,
	#portfolio ul li,
	header div,
	.contact > p
	{
		display: block;
		height: auto;
		width: auto;
	}
	#networks li p{
		display: inline;
		font-size: 13pt;
	}
	header hgroup, header img{
		display: inline-block;
		float: none;
	}
	.contact{
		padding: 5px;
	}
}