@import url(https://fonts.googleapis.com/css?family=Holtwood+One+SC);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);

body{
	text-align:center;
	font-size:120%;
	background:left top repeat #fff url(../img/background.gif);
}

a{
	text-decoration:underline;
	color:#111;
}
	a:hover{ text-decoration:none; }

h1{
	font-size:360%;
	text-align:center;
	padding:20px 0 20px 0;
	font-family:'Holtwood One SC', Arial, Helvetica, sans-serif;
	font-weight:normal;
}

	h1 small{
		font-weight:normal;
		font-size:30%;
	}

	h1 a{
		color:#000;
		text-decoration:none;
	}

h3, h2{
	font-size:240%;
	margin:20px 0 10px 0;
	font-weight:bold;	
	clear:both;
	text-align:center;
	letter-spacing:-0.03em;
}
	h3 a, h2 a{ color:#000; text-decoration:none; }
	h3 a:hover, h2 a:hover{ color:#444; }

body.home h3{ margin-left:50px; margin-right:50px; }

h2{ text-align:left; color:#000;  }

h4{
    clear: both;
    color: #F13024;
    font-size: 80%;
    font-weight: bold;
    margin: 10px 0 15px 0;
	text-align:center;
}

p{
	line-height: 1.4em;
	margin: 10px 0 10px 0;
}

pre{
	padding:10px;
	background:#333333;
	color:#ffffff;
	font-family:"Courier New", Courier, monospace;
	font-size:70%;
	line-height:1.5em;
	margin:10px 0 20px 0;
	overflow: auto;
}

code{
	font-family:"Courier New", Courier, monospace;
	font-size:80%;
	background-color:#f4f4f4;
	padding:2px 5px 2px 5px;
	text-shadow:0 1px 1px #ffffff;
	border-bottom:1px solid #999999;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

	code a:hover{ color:#444444; }
	code a{
		text-decoration:none;
	}

ul, ol{
	margin:10px 0 10px 20px;
	padding:0 0 0 0;
}

	ol li,
	ul li{ margin:3px 0 3px 0; padding:0 0 0 5px; }

	ul li{
		list-style-type:circle;
	}
	
	ol li{
		list-style-type:decimal;	
	}

	ol li.header,
	ul li.header{ list-style:none; }

ul.mini-gallery{
	margin: 10px auto 0 auto;
	padding:0;
	width:802px;
}

	ul.mini-gallery li a{ border:1px solid #444; background:#f3f3f3 center center no-repeat url(../img/loading.gif); }
	ul.mini-gallery li a,
	ul.mini-gallery li img{ display:block; }

	ul.mini-gallery li{
		margin:0 0 10px 0;
		padding:0;
		list-style:none;
		float:left;
	}
	ul.mini-gallery li:nth-child(odd){ float:right; }
	ul.mini-gallery li:nth-child(even){ float:left; clear:both; }
	ul.mini-gallery:not(.mini-gallery-nofeature) li:first-child{ float:none; }

	ul.mini-gallery-nofeature li:nth-child(odd){ clear:both; float:left; }
	ul.mini-gallery-nofeature li:nth-child(even){ clear:none; float:right; }

	ul.mini-gallery li:first-child img,
	ul.mini-gallery li:first-child a{ width:800px; height:375px; }
	ul.mini-gallery li img,
	ul.mini-gallery-nofeature li:nth-child(odd) img,
	ul.mini-gallery-nofeature li:nth-child(even) img,
	ul.mini-gallery li a,
	ul.mini-gallery-nofeature li:nth-child(odd) a,
	ul.mini-gallery-nofeature li:nth-child(even) a{ width:390px; height:183px; }

	.trading ul.mini-gallery{ width:777px; margin-top:20px; }
	.trading ul.mini-gallery li a,
	.trading ul.mini-gallery li a img{ height:auto; width:775px; }

.article:nth-of-type(1){ border-top:0 none; }

.article{
	padding:20px 0 40px 0;
	border-top:1px solid #d4d4d4;
	position:relative;
}

	.article a.working-with{
		display:block;
		width:81px;
		height:81px;
		right:-25px;
		top:20px;
		text-indent:-9999em;
		position:absolute;
	}

div#wrapper{
	margin:0 auto 0 auto;
	text-align:left;
	width:960px;
}

	h2.decorated{
		margin-left:-6px;
	}

	h2.intro{
		font-size:200%;
		text-align:center;
		line-height:1.5em;
		font-weight:normal;
		margin:50px 20px 30px 20px;
		display:none;
	}

		h2 a.home-work,
		h2 a.home-mokoala,
		h2 a.home-software{
			text-shadow:#333 0 1px 0px;
			padding:0 6px 0 6px;
			display:inline-block;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
		}

		h2 a.home-work{
			color:#F13024;
		}

			h2 a.home-work:hover{
				background-color:#ec3023;
				background-image: -webkit-gradient(linear, left top, left bottom, from(#ec3023), to(#c4281d));
				background-image: -moz-linear-gradient(top,  #ec3023,  #c4281d);
				color:#ffffff;
			}

		h2 a.home-mokoala{
			color:#a7d30c;
		}

			h2 a.home-mokoala:hover{
				background-color:#a8c445;
				background-image: -webkit-gradient(linear, left top, left bottom, from(#a8c445), to(#88a036));
				background-image: -moz-linear-gradient(top,  #a8c445,  #88a036);
				color:#ffffff;
			}

		h2 a.home-software{
			color:#01a9ce;
		}

			h2 a.home-software:hover{
				background-color:#0092b2;
				background-image: -webkit-gradient(linear, left top, left bottom, from(#0092b2), to(#007892));
				background-image: -moz-linear-gradient(top,  #0092b2,  #007892);
				color:#ffffff;
			}

	ul#navigation{
		text-align:center;
		padding:0 0 20px 0;
		margin:0 0 20px 0;
		border-bottom:1px solid #d4d4d4;
	}
	body.home ul#navigation{ margin-bottom:0; }

	ul#navigation li{
		display:inline-block;
		margin:0 35px 0 35px;
		font-size:120%;
		padding:0;
		list-style:none;
	}
	ul#navigation li:first-child{ margin-left:0; }
	ul#navigation li:last-child{ margin-right:0; }

	ul#navigation li a{
		text-decoration:none;
		display:inline-block;
		padding:5px 5px 5px 5px;
	}

	ul#navigation li a:hover,
	ul#navigation li.selected a{
		background-color:#f4f4f4;
		text-shadow:0 1px 1px #cccccc;
	}

div.content-left, div.content-right{
	float:left;
	width:400px;
	margin-bottom:20px;
}

div.image{
	background:#F4F4F4;
	margin:0 0 20px 0;
}

div.image-right{
	float:right;
	margin-left:20px;
}

	div.image label{
		display:block;
		font-size:70%;
		padding:3px 6px 3px 6px;
	}

	div.image img{
		width:200px;	
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		display:block;
	}

ul.social{
	text-align:center;
	padding-top:20px;
	margin:20px 0 10px 0;
	border-top:1px solid #d4d4d4;
}

	ul.social li{
		list-style:none;
		padding:0;
		margin:0 10px 10px 10px;
		display:inline-block;
	}

	ul.social li a{
		display:block;
		text-indent:-9999em;
		background-position:0 0;
		background-repeat:no-repeat;
		background-size: contain;
		width:32px;
		height:32px;
	}

	ul.social li.social-aboutme a{
		background-image:url(../img/social.aboutme.png);
	}

	ul.social li.social-tumblr a{
		background-image:url(../img/social.tumblr.png);
	}

	ul.social li.social-linkedin a{
		background-image:url(../img/social.linkedin.png);
	}

	ul.social li.social-facebook a{
		background-image:url(../img/social.facebook.png);
	}

	ul.social li.social-x a{
		background-image:url(../img/social.x.png);
	}

	ul.social li.social-lastfm a{
		background-image:url(../img/social.lastfm.png);
	}

	ul.social li.social-sharemyplaylists a{
		background-image:url(../img/social.sharemyplaylists.png);
	}

	ul.social li.social-spotify a{
		background-image:url(../img/social.spotify.png);
	}

	ul.social li.social-stackoverflow a{
		background-image:url(../img/social.stackoverflow.png);
	}

	ul.social li.social-instagram a{
		background-image:url(../img/social.instagram.png);
	}

	ul.social li.social-etoro a{
		background-image:url(../img/social.etoro.png);
	}

div.paginator{
	background:#e4e4e4;
}
div.paginator-top{ border-bottom:1px solid #D4D4D4; }
div.paginator-bottom{ margin-bottom:-20px; border-top:1px solid #D4D4D4; }

	div.paginator p.text{
		margin:0;
		padding:3px 9px 3px 9px;
		font-weight:bold;
		float:left;
	}

	div.paginator ul.list{
		margin:0;
		padding:0 3px 0 0;
		float:right;
	}

		div.paginator ul.list li{
			margin:0;
			padding:0;
			list-style:none;
			float:left;
		}

		div.paginator ul.list li a:hover,
		div.paginator ul.list li.selected a{ color:#999; }
		div.paginator ul.list li a{
			font-weight:bold;
			text-decoration:none;
			padding:3px 6px 3px 6px;
			display:block;
			color:#000;
		}

dl.resume{
	
}

	dl.resume dt{
		float:left;
		clear:both;
		width:220px;
		display:block;
		padding:10px 0 20px 0;
	}
	dl.resume-experience dt{ font-weight:bold; }

	dl.resume dd p:first-child{ margin-top:0; }
	dl.resume dd p:last-child{ margin-bottom:0; }
	dl.resume dd{
		width:590px;
		padding:10px 0 20px 220px;
	}
	
	dl.resume-experience dd{ padding-top:7px; }

a.highlight{
	text-decoration:none;
	display:inline-block;
	padding:3px 9px;
	margin-bottom:4px;
	background:rgba(100, 100, 100, .5);
	border-radius:3px;
	color:#fff;
	text-shadow:0 1px 0 #444;
}
	a.highlight:hover{ background:rgba(100, 100, 100, 1); }

a.highlight-php{ background:rgba(153, 153, 204, .5); }
a.highlight-html{ background:rgba(228, 78, 38, .5); }
a.highlight-javascript{ background:rgba(136, 179, 19, .5); }
a.highlight-css{ background:rgba(214, 186, 51, .5); }

	a.highlight-php:hover,
	a.highlight-php.highlighted{ background:rgba(153, 153, 204, 1); }
	a.highlight-html:hover,
	a.highlight-html.highlighted{ background:rgba(228, 78, 38, 1); }
	a.highlight-javascript:hover,
	a.highlight-javascript.highlighted{ background:rgba(136, 179, 19, 1); }
	a.highlight-css:hover,
	a.highlight-css.highlighted{ background:rgba(214, 186, 51, 1); }

p#footer{
	padding:0 0 40px 0;
	margin-top:20px;
	text-align:center;
	font-size:80%;
	clear:both;
}
	p#footer a:hover{ text-decoration:none; }

form.standard{
	margin:0 auto;
	width:800px;
}

	form.standard p.error{
		font-size:80%;
		background-color:#ec3023;
		background-image: -webkit-gradient(linear, left top, left bottom, from(#ec3023), to(#c4281d));
		background-image: -moz-linear-gradient(top,  #ec3023,  #c4281d);
		color:#ffffff;
		padding:3px 5px 3px 5px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		display:inline-block;
	}

	form.standard div.form-field-text{
		float:left;
		padding:17px 0 0 0;
	}

	form.standard div.field-email{
		padding-right:20px;
	}

	form.standard div.form-field-textarea{
		clear:left;
		padding:22px 0 0 0;
	}

	form.standard label{
		font-weight:bold;
		margin:0 0 5px 0;
		display:block;
	}
	
	form.standard input.input-text,
	form.standard textarea.input-textarea{
		display:block;
		border:1px #999999 solid;
		padding:5px 6px;
		width:376px;
		background:#fff;
		box-shadow:inset 0 5px 10px #e4e4e4;
		font-size:90%;
	}

	form.standard input.input-text:focus,
	form.standard textarea.input-textarea:focus{
		border-color:#444444;
	}

	form.standard textarea.input-textarea{
		width:786px;
		height:150px;
		min-width:786px;
		min-height:150px;
		max-width:786px;
	}
	
	form.standard div.form-field-submit{
		padding:20px 0 0 0;
	}

	form.standard div.form-field-submit input{
		background-color:#555555;
		color:#ffffff;
		padding:4px 5px;
		text-transform:uppercase;
		font-weight:bold;
		font-size:90%;
		float:right;
	}

	form.standard div.form-field-submit input:hover{
		background-color:#222;
		cursor:pointer;
	}

/* Medium Desktop Version */
@media screen and ( max-width: 1020px ){
	body{
		font-size:110%;
	}

	div#wrapper{
		width:800px;
	}

	ul.mini-gallery,
	.trading ul.mini-gallery{ width:auto; }
	body.home h3, h2{ font-size:200%; }
}

/* Small Desktop Version */
@media screen and ( max-width: 870px ){
	body.home h3, h2{ font-size:150%; margin-left:0; margin:0; }
	
	h1{ font-size:250%; }

	div#wrapper{
		width:90%;
	}
	
	.article a.working-with{ display:none; }
	ul#navigation li{ margin:0 10px; font-size:100%; }

	ul.mini-gallery li{ display:none; }
	ul.mini-gallery li:first-child{ display:block; }
	ul.mini-gallery li:first-child a{ width:auto; height:auto; }
	ul.mini-gallery li:first-child img,
	.trading ul.mini-gallery li:first-child img{ width:100%; height:auto; }
	
	dl.resume dt{ width:auto; float:none; }
	dl.resume dd{ width:auto; float:none; padding:0 0 20px 20px; }
	
}

@media screen and ( max-width: 570px ){
	ul#navigation li{ margin:0 3px; font-size:90%; }
	h1{ font-size:200%; }
	body.home h3, h2{ font-size:120%; }
}

@media screen and ( max-width: 440px ){
	h1{ font-size:170%; }
}