*{ margin: 0; padding: 0; box-sizing: border-box; -moz-box-sizing: border-box; color: #444 }
body{ font: 14px/20px 'Lato', sans-serif; font-weight: 300; background: url( /images/scribble_light.png ); text-shadow: rgba(255, 255, 255, 0.8) 0px 1px 0px; text-align: justify; color: #ddd;}
b{ font-weight: 400;}
html, body {height: 100%;}
#logo{ position: absolute; left: 50%; top: 25px; background-image: url(/images/thumb.png ); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; width: 90px; height: 90px; margin-left: 380px;}
#wrapper {min-height: 100%;}
#main {overflow:auto; padding-bottom: 220px;}
#main h3{ margin-bottom: 10px }
#main h3 b{ font-weight: bold; color: #da8838; }
article{ margin: 0 20px; float: left; width: 940px; }
article.comments{ clear: both; border-top: 1px solid #aaa; width: 940px;}
article h1{ padding-top: 20px;}
h1, h2, h3, h4{ font-weight: normal; text-align: left; } 
h1 span{ color: #da8838;}
h1, h2, p{ text-shadow: 0 1px 0 #fff }
h2{ font-weight: 300; font-size: 38px; line-height: 38px; margin-bottom: 20px;}
h3{ font-size: 24px; font-weight: 300;}
h1{ margin-bottom: 0; font-size: 42px; font-weight: 400; line-height: 42px; }
p{ margin-bottom: 1em; }
a{ color: #666 }
b{ color: #222 }
section h1{ margin-bottom: .5em ;}
section h2{ margin-top: 30px; }
.button:hover i{ color: white; }
div.summary{  margin-bottom: 20px; }
div.summary .demo-links{ text-align: center;}
article h1{ width: 75% }
div.summary b{ font-family: inherit; font-weight: bold;}
.rimmed{ border-bottom: 1px solid #aaa; margin-bottom: 1em; }
div.summary p{ font-style: italic; font-weight: 300; color: #666; font-size: 18px; line-height: 22px; }
div.summary p b{ color: inherit; font-weight: 400; }
#top-links-code{ position: absolute; top: 20px; right: 280px; }
#top-links-code a{ margin-bottom: 5px;}
p.note{ background-color: rgba( 255, 229, 56, .2 ); padding: 20px; color: #b70000 }
p.quote{ background-color: rgba( 255, 255, 255, .8 ); padding: 20px; color: #404040; font-size: 140%; font-style: italic;}
p.ok{ background-color: rgba( 0, 128, 0, .2 ); padding: 20px; color: #047d68 }
span.note{ background-color: rgba( 255, 229, 56, .2 ); padding: 2px 4px; color: #b70000 }
.note b, .note a{ color: inherit;}
.ok b, .ok a{ color: inherit;}
ol{ margin-left: 17px; margin-bottom: 1em }
ul.content-list{ margin-left: 17px; margin-bottom: 1em }
article ul.content-list{ font-size: 15px;}
section{ width: 680px; float: left; }
section a:hover{ color: #da8838;}
section a:hover b{ color: inherit;}
span.dom, span.js, span.key{ font-family: 'ubuntu mono', Monaco,Menlo,Consolas,"Courier New",monospace; font-size: 14px; background-color: rgba( 255, 255, 255, .4 ); padding: 2px 4px; border-radius: 3px; border: 1px solid rgba( 255,255,255,.6); text-shadow: 0 1px 0 rgba( 255, 255, 255, .6 ); }
span.dom{ color: #b70000; }
span.js{ color: #0000b7; }
span.key{ color: #202020;}
.button{ box-shadow: 0 0 5px rgba( 0, 0, 0, .2 ); font-size: 14px; line-height: 1em;}
#toTop{ position: fixed; top: -32px; left: 50%; margin-left: 480px; width: 64px; height: 64px; background-color: #222; opacity: 0; border-radius: 0 0 5px 5px; background-image: url( /images/arrow_up.png ); z-index: 100;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-ms-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
#toTop.on{ opacity: .5; top: 0 }
header{ background-color: #222; height: 120px; background-image: url( /images/darkdenim3.png ); box-shadow: 0 0 5px rgba( 0,0,0,.4 ); border-bottom: 1px solid rgba( 0,0,0,.6); overflow: hidden; }
header ul{ float: left; }
header li{ float: left; list-style-type: none; margin-right: 10px; text-transform: uppercase }
header h1, header h2{ position: absolute; color: #ddd; text-shadow: 0 -1px 0 rgba( 0,0,0,.8 );}
header h1{ top: 30px; left: 50%; margin-left: -470px; }
#title span, #title{ text-transform: uppercase; font-size: 44px; letter-spacing: -.5px; font-weight: 800;}
#title span:nth-child(1){ color: #888 }
#title span:nth-child(2){ color: #da8838 }
header h2{ top: 10px; left: 50%; width: 470px; text-align: right; font-weight: normal; font-size: 14px; line-height: 24px; color: white;}
header ul{ position: absolute; left: 50%; margin-left: -470px; top: 70px; }
header li.active a{ color: #da8838; border-bottom: 20px solid #da8838; padding-bottom: 10px;}
header li a{ text-decoration: none; color: #ddd; text-shadow: 0 -1px 0 black; display: block; height: 50px; font-weight: 400;}
header li a:hover{ color: white; border-bottom: 20px solid white; padding-bottom: 10px;}
#top{ position: absolute; left: 0; top: 0; right: 0; height: 8px; background-color: #222; border-bottom: 1px solid rgba( 0,0,0,.6); border-top: 1px solid rgba(255,255,255,.2);}
#content{ width: 980px; float: left; position: relative; left: 50%; margin-left: -490px; margin-bottom: 40px;}
#left-panel{ float: left; width: 740px;}
#right-panel{ padding-top: 0px; float: right; width: 230px; padding: 20px 0; font-size: 12px; line-height: 18px; text-align: justify; font-style: italic; text-align: right; margin-left: 30px; position: absolute; top: 0; right: 20px;}
#right-panel p{ color: #999 ;}
#right-panel h2{ color: #777;}
#right-panel h3{ margin-bottom: 10px; text-align: right;}
#right-panel ul{ margin-bottom: 20px;}
#right-panel li{ list-style-type: none; }

footer{ clear: both; background-color: #222; height: 220px; background-image: url( /images/darkdenim3.png ); box-shadow: 0 0 5px rgba( 0,0,0,.4 ); border-bottom: 1px solid rgba( 0,0,0,.6); overflow: hidden;
	position: relative;
	margin-top: -220px; /* negative value of footer height */
}

.file{ float: left; clear: both }
.file .snapshot{ width: 300px; height: 200px; display: block; float: left; border: 4px solid white; box-shadow: 0 0 10px rgba( 0,0,0,.2); }
.file .warning{ color: #b70000;}
.break{ clear: both }

.entries{ list-style-type: none}
.entries li{ position: relative; overflow: hidden;}
.entries li a{ text-decoration: none }
/*.entries li:hover{ color: #888 }*/
.entries h3 span{ opacity: .75; white-space: nowrap; }
.entries li:hover *{ color: inherit }
.entries h5{ font-size: 14px; margin: 0; font-style: normal;}
.entries p{ margin: 10px 0 20px 0; }
.entries li h3{ padding-top: 20px;}
.entries p.tags{ text-align: right; }
.entries p.tags span{ font-size: 10px; font-weight: bold; font-style: normal; text-transform: uppercase; padding: 5px; border-radius: 5px; background-color: rgba(255,255,255,.5); margin-right: 2px; color: #000; text-shadow: 0 1px 0 #fff; display: inline-block;}
#code-page .entries li div.thumb{ position: absolute; left: 0; bottom: 0; width: 100px; top: 0; display:block; background-size: cover; background-position: 50% 50%; }
#code-page .entries li div.thumb h3{ font-size: 18px;}
#code-page .entries li{ padding-left: 120px; padding-right: 20px;}

.code{ width: 980px; float: left; margin-bottom: 40px; margin-top: 20px; margin-left: 20px;}
.code li{ float: left; width: 240px; height: 230px; display: block; position: relative;
-webkit-transform-origin: 50% 50%; -webkit-transition: -webkit-transform 150ms ease-out; 
-moz-transform-origin: 50% 50%; -moz-transition: -moz-transform 150ms ease-out; 
-ms-transform-origin: 50% 50%; -ms-transition: -ms-transform 150ms ease-out; 
-o-transform-origin: 50% 50%; -o-transition: -o-transform 150ms ease-out; 
transform-origin: 50% 50%; transition: transform 150ms ease-out; 
}
.code li div.shadow{ width: 380px; height: 320px; position: absolute; left: 50%; top: 50%; margin-left: -220px; margin-top: -160px; background-size: 100% 100%; background-image: url( /images/shadow.png );}
.code li div.pic{ position: absolute; left: 50%; top: 50%; margin-left: -210px; margin-top: -150px; width: 360px; height: 300px; margin-right: 0px; background-color: white; }
.code h3{ font-size: 14px; color: #b70000; font-family: "Permanent Marker"; position: absolute; left: 0; top: 270px; right: 0; text-align: center; }
.code li a{ position: absolute; left: 10px; top: 10px;  }
.code li a div{ position: absolute; left: 0; top: 0; width: 340px; height: 255px; background-size: cover; background-position: 50% 50%; }
.code li a div.vignette{ background-image: url( /images/vignette.png );}
.fadeable{ 
-webkit-transition: opacity 300ms ease-out, -webkit-transform 300ms ease-out; 
-moz-transition: opacity 300ms ease-out, -moz-transform 300ms ease-out;  
-ms-transition: opacity 300ms ease-out, -ms-transform 300ms ease-out; 
-o-transition: opacity 300ms ease-out, -o-transform 300ms ease-out; 
transition: opacity 300ms ease-out, transform 300ms ease-out; 
display: block;
}
.faded{
	opacity: 0;
	-webkit-transform: translateY( 150px );
	-moz-transform: translateY( 150px );
	-ms-transform: translateY( 150px );
	-o-transform: translateY( 150px );
	transform: translateY( 150px );
}
.card .image{
	height: 193px;
	left: 50%;
	-webkit-transform: translateX( -50% );
	-moz-transform: translateX( -50% );
	-ms-transform: translateX( -50% );
	-o-transform: translateX( -50% );
	transform: translateX(-50%);
	position: absolute;
	top: 0;
}

#code-page #right-panel{ padding: 20px 0;}
#twitter{ font-weight: 400; position: absolute; top: 20px; right: 50%; margin-right: -470px; color: #ddd; text-shadow: none; width: 320px; text-align: right; font-style: italic; text-shadow: 0 -1px 0 black; line-height: 1.4em;}
#twitter a{ color: #aaa; text-decoration: none;}
#twitter a:hover{ color: #da8838 }
#follow-me{ font-weight: 400; color: #999; font-style: italic; text-shadow: 0 -1px 0 black; position: absolute; right: 50%; margin-right: -470px; top: 80px; text-decoration: none;}
#follow-me:hover{ color: #da8838;}
#about-page div.column{ width: 220px; float: left;  margin-right: 20px;}
#about-page div.column:nth-child(4){ border-right: 1px solid #ccc;}

#intro{ font-weight: 400; position: absolute; top: 35px; right: 50%; margin-right: -370px; padding-right: 20px; color: #ddd; text-shadow: none; width: 320px; text-align: right; font-style: italic; text-shadow: 0 -1px 0 black; line-height: 1.2em; font-size: 12px; background-image: url(/images/dialog.png); background-position: right top; background-size: contain; background-repeat: no-repeat;}
#intro p{ text-shadow: inherit; color: inherit;}
#intro a{ color: #aaa; text-decoration: none;}
#intro a:hover{ color: #da8838 }

.items li{ width: 303px; height: 193px; float: left; margin-bottom: 10px; background-color: white; background-size: cover; background-position: 50% 50%; position: relative; overflow: hidden; box-shadow: 0 0 15px rgba( 0,0,0,.2); margin-right: 15px; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa;}
.items li div.image{ /*-webkit-transition: -webkit-filter 250ms ease-out;*/ width: 303px; height: 193px; background-size: cover; background-position: 50% 50%; position: absolute; left: 0; top: 0; opacity: 1; }
.items li div.text{ position: absolute; left: 0; top: 0; right: 0; bottom: 0;  padding: 20px; }
.items li div.mark{ position: absolute; left: 0; top: 0; right: 0; height: 80px; overflow: hidden; background-color: rgba( 255,255,255,.8); box-shadow: 0 0 10px rgba( 0,0,0,.6 ); 
-webkit-transition: height 250ms ease-out; 
-moz-transition: height 250ms ease-out; 
-ms-transition: height 250ms ease-out; 
-o-transition: height 250ms ease-out; 
transition: height 250ms ease-out; 
}
.items li h3{ position: absolute; left: 20px; top: 18px; color: #222; text-align: left; margin-bottom: 0; font-size: 18px; font-weight: bold; padding-top: 0;}
.items li h4{ position: absolute; left: 20px; top: 47px; color: #666; font-size: 14px; font-weight: normal; font-size: 12px; line-height: 10px;}
.items li h4 b{ font-weight: bold;}
.items li p{ position: absolute; font-weight: 400; left: 20px; top: 65px; right: 20px; color: #222; margin-top: 1em; line-height: 1.4em; font-size: 14px; text-align: left; font-style: italic;}
.items li:hover div.mark{ height: 223px; color: black;}
/*.items li:hover div.image{ -webkit-filter: grayscale( 100% );}*/
.items i{ position: absolute; right: 0px; top: -5px; font-size: 40px; color: #b70000;}

.blog, .tutorials{  border-top: 1px solid #aaa; border-bottom: 1px solid white; }
.blog li{ border-bottom: 1px solid #aaa; border-top: 1px solid white;}
.tutorials li{ border-bottom: 1px solid #aaa; border-top: 1px solid white;}
.blog li:first-child h3{ font-size: 42px; font-weight: 800; line-height: 42px; text-transform: uppercase; padding-top: 0;}
.blog li:first-child h4{ font-size: 24px; padding-top: 20px ;}
.blog li h4{ font-size: 18px;}

.entries li{}
.entries p{ font-size: 16px; line-height: 20px; font-weight: 300; font-style: italic;}
.entries p b{ font-weight: 600;}
.entries h3{ font-size: 24px; line-height: 30px; margin-bottom: 0;}
.entries li:hover{ color: #da8838;}

.talks li{ border-bottom: 1px solid #aaa; border-top: 1px solid white; padding-bottom: 20px;}
.talks li h3{ font-size: 42px;  font-weight: 800; line-height: 42px; text-transform: uppercase; padding: 0 20px 20px 20px }
.talks li h4{ font-size: 24px; margin-top: 20px; padding: 20px 20px 20px 20px }
.talks li h3, .talks li h4{ width: 100%; background-color: #222222; color: white; text-shadow: none;  }
.talks li h3 *, .talks li h4 *{ color: white;}
.talks.entries li:hover{ color: inherit;}
.talks.entries li:hover h3, .talks.entries li:hover h4{ color: white;}
.talks a:hover{ color: #da8838;}
.talks ul{ list-style-type: disc }
.talks li li { border: none; padding: 0; }
.talks li li:before{ content: '· ';}
.talks ul.links{ font-size: 24px; text-transform: uppercase; font-weight: 800; list-style-type}
.talks li h5{ font-size: 24px; font-weight: 800; line-height: 24px; text-transform: uppercase; padding: 0; margin: 40px 0 0 0  }
.talks ul.links li{ float: left; margin-right: 20px;}

footer{ position: relative;}
footer .credits:nth-child(1){ left: 50%; margin-left: -470px; }
footer .credits:nth-child(2){ left: 50%; margin-left: -150px; }
footer .credits:nth-child(3){ left: 50%; margin-left: 170px; }
footer .credits{ width: 300px; position: absolute; top: 20px }
footer .credits *{ color: #ddd; text-shadow: 0 -1px 0 black; margin: 0; padding: 0; line-height: 1.2em; font-weight: normal; font-size: 12px;}
footer .credits h2{ font-size: 14px; margin-bottom: 10px; color: #ddd;}
footer .credits p{ color: #888; font-style: italic;}
footer .credits a{ color: #aaa; text-decoration: none }
footer .credits a:hover{ color: #da8838;}

.social{ padding-bottom: 20px; margin-bottom: 20px; text-align: right; height: 120px;}
.social h3{ margin-bottom: 10px;}
.social-buttons{ display: block; margin-bottom: 10px ;}
.comments-count{ }

.twitter-tweet{ margin: 10px auto;}

.file{ clear: both; margin-bottom: 40px; float:left; }
.file img{ float: left; width: 200px; margin-right: 0px; border: 5px solid white;
box-shadow: 0 0 5px rgba( 0, 0, 0, .2 );
width: 310px;
height: 235px;
display: block;
position: relative;
margin: 0 20px 20px 0;
float: left; }

#box-logo{ width: 64px; height: 59px; background-image: url( /images/box.png ); display: block; margin-top: 20px;}

.polaroid{ width: 280px; height: 230px; display: block; position: relative; margin-left: 15px; margin-bottom: 30px;}
.polaroid div.pic{ position: absolute; width: 300px; height: 260px; margin-right: 0px; background-color: white; box-shadow: 0 0 5px rgba(0,0,0,.25); 
	-webkit-transform-origin: 50% 50%; -webkit-transition: -webkit-transform 150ms ease-out; 
	-moz-transform-origin: 50% 50%; -moz-transition: -moz-transform 150ms ease-out; 
	-ms-transform-origin: 50% 50%; -ms-transition: -ms-transform 150ms ease-out; 
	-o-transform-origin: 50% 50%; -o-transition: -o-transform 150ms ease-out; 
	transform-origin: 50% 50%; transition: transform 150ms ease-out; 
}
.polaroid h3{ font-size: 14px; color: #b70000; font-family: "Permanent Marker"; position: absolute; left: 0; top: 225px; right: 0; text-align: center; }
.polaroid a{ position: absolute; left: 10px; top: 10px;  }
.polaroid div.pic div{ position: absolute; left: 15px; top: 15px; width: 270px; height: 205px; box-shadow: 0 0 1px black, inset 0 0 50px rgba( 0,0,0,.6); background-size: cover; background-position: 50% 50%; }
.file .polaroid{ float: right;}

.snap{ display: block; border: 10px solid white; box-shadow: 0 0 20px rgba( 0, 0, 0, .1 ); margin: 0 auto 1em auto;}

div.cover{ width: 100%; height: 300px; background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; margin: 10px 0}
div.contain{ width: 100%; height: 300px; background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; margin: 10px 0 }
img.wide{ width: 680px; height: 300px; margin: 0 0 20px 0; box-shadow: 0 0 20px rgba( 0, 0, 0, .1 );}
.wide{ width: 640px ;}
.sketchfab{ height: 420px;}
article .button{ font-style: italic}
article p{ font-size: 16px; line-height: 22px;}

div.video{ width: 100%; background-color: black; text-align: center; box-shadow: 0 0 20px rgba( 0, 0, 0, .1 ); margin-bottom: 1em;}
div.video iframe{ width: 100%; height: 328px }

.highlight{ position: relative; border-bottom: 1px solid #aaa; margin-bottom: 20px; float: left; width: 940px; overflow: hidden; }
.highlight div{ float: left; position: relative; height: 200px; width: 100%; display: block; background-position: 50% 0; border-top: 1px solid white; border-left: 1px solid white; border-right: 1px solid #aaa; border-bottom: 1px solid #aaa; box-shadow: 0 0 20px rgba( 0, 0, 0, .1 )}
.highlight h1{ position: absolute; left: 0; bottom: 0px; right: 0; padding: 10px 20px; width: auto; color: white; text-shadow: 0 0 10px rgba( 0,0,0,.8 ); margin: 0; display: block; background-color: rgba( 0, 0, 0, 0 );}
.highlight p{ float: left; padding: 10px 20px 0 20px; text-align: center; width: 100%;}
.highlight p, .highlight p *{  font-style: italic; font-weight: 300; color: #666; font-size: 18px; line-height: 22px; }
.highlight b{ color: #222; font-weight: 400;}
.hidden{ opacity: 0;}
.visible{ -webkit-transition: opacity 250ms ease-out; transition: opacity 250ms ease-out; opacity: 1;}

.redacted{ text-decoration:line-through }
.note u{ color: inherit; }
#rss-logo{ display: block; width: 16px; height: 16px; background-image: url( ../images/rss.png ); background-repeat: no-repeat; margin-right: 5px; float: left;}
#hl h1{ text-transform: uppercase; font-weight: 800; text-align: center;}
.intro{ text-transform: uppercase; font-weight: 800 }
.syntaxhighlighter{ box-shadow: 0 0 20px rgba( 0, 0, 0, .1 ); padding: 10px 5px;}

@media screen and (min-width: 955px) {
	.items li:nth-child(3n){ margin-right: 0px;}
}

.column{ width: 460px; }
.column h2{ font-weight: bold; text-transform: uppercase; text-align: center;}
.column ul{ list-style-type: none;}
.column ul li{ position: relative; width: 460px; height: 225px; margin-bottom: 10px; }
.column ul a{ text-decoration: none;}
.column ul .image{ width: 460px; height: 225px; position: absolute; left: 0; top: 0; bottom:0; background-size: cover; background-position: 50% 50%;}
.column ul .content{ left: 0; position: absolute; right: 0; top: 0; padding: 20px; height: 60px; background-color: rgba( 255,255,255,.8); overflow: hidden;}
.column h3{ font-weight: bold;}
.blog-entries{ float: left;}
.code-entries{ float: right;}

.hljs *, code{ font-family: ubuntu mono; text-shadow: none; overflow: auto; }
.hljs{ margin-bottom: 1em }

p.footnote{ text-align: left; font-style: italic; font-weight: 500; font-size: 12px; margin-top: 0px; margin-bottom: 20px; line-height: 1.4em; }
		
@media screen and (max-width: 955px) and (min-width: 621px){
	#content{ width: 100%; margin-left: -330px;}
	header ul{ margin-left: -310px;}
	article h1{ width: 75% ;}
	.items li:nth-child(2n){ margin-right: 0px;}
	#title{ margin-left: -310px;}
	#logo{ margin-left: 170px;}
	article{ width: 621px;}
	section{ width: 620px;}
	#intro, #twitter, #follow-me{ display: none;}
	.code{ width: 620px; margin-left: 0;}
	.code li{ width: 310px;}
	.code li div.shadow{ width: 420px; margin-left: -210px;}
	.code li div.pic{ width: 400px; margin-left: -200px;}
	.code li a div{ width: 380px;}
	footer .credits:nth-child(1){ left: 50%; margin-left: -300px; }
	footer .credits:nth-child(2){ left: 50%; margin-left: -150px; }
	footer .credits:nth-child(3){ left: 50%; margin-left: 70px; }
	#right-panel{ clear:both; position: relative; padding: 0; margin: 0; right:0;}
	img.wide{ width: 620px; height: 280px;}
	.wide{ width: 620px;}
	.sketchfab{ height: 400px;}
	div.video iframe{ height: 328px }
	article.comments{ width: 620px;}
	#right-panel{ width: 100%;}
	#right-panel ul.links{ float: right;}
	#right-panel ul.links > li{ float: left; margin-left: 10px; }
	#right-panel ul.links:fist-child{ margin-left: 0;}
	#about-page div.column:nth-child(4){ border:none;}
	article p{ font-size: 15px; line-height: 21px;}
	#top-links-code{ position: absolute; top: 20px; right: 0 }
	.snap{ max-width: 620px;}
	.highlight{ width: 620px;}
}

@media screen and (max-width: 620px) {
	#content{ width: 320px; margin-left: -170px;}
	.items li{ margin-right: 0px;}
	#title{ margin-left: -150px; }
	#title span, #title{ font-size: 36px; }
	h1{ font-size: 36px; line-height: 36px;}
	.blog li:first-child h3{ font-size: 30px; line-height: 30px; margin-top: 5px;}
	#main h3{ line-height: 1em;}
	#logo{ display: none;}
	header{ height: 200px;}
	header ul{ margin-left: -150px; float: none; top: 70px;}
	header li{ float: none; height: 24px; font-size: 20px;}
	header li a{ padding: 0; height: auto;}
	header li:hover a, header li.active a{ border: none;}
	article h1{ width: 100% ;}
	article{ width: 300px;}
	section{ width: 300px;}
	.entries h5{ display: none;}
	#intro, #twitter, #follow-me{ display: none;}
	.code{ width: 320px; margin-left: 0;}
	.code li{ width: 320px;}
	.code li div.shadow{ width: 420px; margin-left: -240px; }
	.code li div.pic{ width: 400px; margin-left: -230px; }
	.code li a div{ width: 380px; }
	footer .credits:nth-child(1),
	footer .credits:nth-child(2),
	footer .credits:nth-child(3){ width: 300px; position: relative; left: 50%; clear: both; margin-left: -150px; margin-bottom: 20px;}
	#main{ padding-bottom: 480px;}
	footer{ height: 480px; margin-top: -480px;}
	#right-panel{ clear:both; position: relative; padding: 0; margin: 0; right:0;}
	img.wide{ width: 300px; height: 132px;}
	.wide{ width: 300px;}
	.sketchfab{ height: 220px;}
	div.video iframe{ height: 158px }
	article.comments{ width: 300px;}
	#code-page #right-panel{ font-size: 20px;}
	.file .polaroid{ float: none; margin: 0 0 10px 0;}
	.polaroid div.pic{ width: 360px;}
	#about-page div.column:nth-child(4){ border:none;}
	#box-logo{ position: absolute; right: 0; top: 0; margin-top: 10px;}
	#code-page .entries li div.thumb{ position: absolute; left: 0; right: 0; width: 100%; top: 0; height:100px; display:block; background-size: cover; background-position: 50% 50%;}
	#code-page .entries li{ padding: 90px 0 20px 0;}
	article p{ font-size: 14px; line-height: 20px;}
	section .button{ left: 0; right: 0; width: 100%; text-align: center; ; }
	#top-links-code{ position: relative; top: auto; left: 0; right: 0; margin-bottom: 20px}
	.snap{ max-width: 300px;}
	.highlight{ width: 300px;}
}