@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
@import url(http://fonts.googleapis.com/css?family=Lora:400,700);

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}


/* Typography */
body {font:normal 13px/1.5 'Lora', 'Georgia', serif;}
h1,h2,h3,h4,h5,h6 {font:400 200%/1.6 'Oswald', Arial, sans-serif; letter-spacing:-1px;}
a {font-family:'Oswald', Arial, sans-serif; font-weight:400; text-decoration:none;}
a:hover {text-decoration:underline;}
.tag {font-weight:300;}
.slide-controls {font-family:'Oswald', Arial, sans-serif;}


html {border-top:solid 10px black; background:#eee;}
/*html {border-top:solid 10px black; background:#ffe600; background-image:-webkit-linear-gradient(0deg, transparent 50%, rgba(255,255,255,0.2) 40%); background-size: 200px 50px;}*/

h1,h2,h3,h4,h5,h6 {margin-bottom:0.5em;}
a, section article .tag, .default a {padding:0px 5px; color:white; background:black;}
h1 a,
article a {padding:0; color:black; background:none;}
p {margin-bottom:1em;}
li {list-style:none;}

.js .loading aside:before {content:''; position:fixed; top:237px; left:20px; width:16px; height:16px; background:url('../img/loader.gif') no-repeat center center;}
.js .loading section {opacity:0; -webkit-transition:opacity 0s ease-in;}
section {opacity:1; -webkit-transition:opacity 1s ease-in;}

aside, article {width:120px; padding:45px 15px 60px; margin:10px 10px 0 0; border-top:solid 1px black; overflow:hidden;}
article {width:195px;}

.no-js aside {display:none;}
aside {position:absolute; top:10px; left:0; height:100%;}

aside nav {position:fixed; top:70px; left:15px;}
aside nav li {margin-bottom:7px;}
aside a,
.tag {padding:1px 5px;}

aside .social {position:fixed; bottom:45px; left:15px;}
aside .social a {font-weight:300; color:black; background:none;}
aside .social i {float:left; font-style:normal; font-weight:bold; padding:0 5px; background:black; color:white;}

section {position:relative; float:left; width:100%;}
.js section {margin-left:160px;}

article {position:relative; float:left;}
.js .loading article {display:none;}
.project article {display:block; padding-bottom:30px; cursor:auto;}

article time {display:block; margin:-16px 0 16px 1px; font:11px Arial, sans-serif; color:rgb(0,0,0); color:rgba(0,0,0,0.8);}
article .link {padding:0; text-decoration:underline; font-weight:300;}
article .link:hover {text-decoration:none;}
article img {display:block; width:100%;}
article.w2 {width:420px;}
.project article {width:auto; max-width:1310px;}
article .details {float:right; padding:15px; margin:-160px 0 15px 15px; border-top:solid 1px black; text-align:right; background:#f6f6f6;}
article .browser {float:left; clear:both; padding:50px 5px 20px; background:black;}
article .browser iframe {width:100%;}

article.developer {background:#fff;}

.category article img,
.developer img,
.about img,
.designer img {width:96%; padding:2%; box-shadow:0 1px 6px rgba(0,0,0,0.3); background:white;}

.project article.photographer {background:rgba(255,255,255,0.9);}
.project article.photographer img {position:fixed; top:20px; left:0; z-index:-1;}
body.photographer.project {overflow:hidden;}

.slide-controls {margin-bottom:15px;}
.next,
.previous {display:none; position:absolute; top:151px; width:25%; height:100px; cursor:pointer; text-indent:-999em; overflow:hidden; background-color:rgba(255,255,255,0.5); background-repeat:no-repeat; background-position:center center;}
.previous {left:5%; background-image:url('../img/left-small.png');}
.next {right:5%; background-image:url('../img/right-small.png');}
.project .next,
.project .previous {position:fixed;}
.project .previous {left:0; background-image:url('../img/left.png');}
.project .next {right:0; background-image:url('../img/right.png');}
[data-slides="1"] {display:none;}

.tag {position:absolute; top:0; left:15px;}

.skills li {position:relative; width:30%; white-space:nowrap; padding:5px; margin:0 0 5px; border-left:solid 5px black; font:400 13px/1.5'Oswald', Arial, sans-serif; background:#CCC; list-style:none;
	-webkit-transition:width 1s cubic-bezier(0.860, 0.000, 0.070, 1.000);
}
.skills li::before {content:''; background:rgba(0,0,0,0.05); width:205px; height:30px; position:absolute; top:0; left:-5px;}
.skills .jedi-master {width:90%;}
.skills .jedi-knight {width:75%;}
.skills .padawan {width:60%;}
.skills .jar-jar {width:10%;}

article.photographer {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}