html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    /*font-size: 100%;
    font: inherit;*/
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

/* base
----------------------------------------------- */

body {
	margin: 0;
	padding: 0;
	color: black;
	background: white;
	/* background: #F5F6F7 url("/images/site/grey_fade.jpg") repeat-x 0px 0px; */
	font-family: sans-serif;
	font-size: 16px;
	position: relative;
}

blockquote, h3, p, li, dd {
	line-height: 1.5em;
}
p {
	margin-top: 0;
	margin-bottom: .5em;
}
pre {
	margin-bottom: .5em;
	padding: 1em;
	font-size: .8em;
	background-color: #333;
	color: white;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

pre code {
	display: block;
}
code.short {
	display: inline-block;
}

dt {
	margin: 1em 0;
}
dd {
	margin-left: 1em;
}

blockquote {
	margin-left: 1em;
	padding-left: 1em;
	border-left: solid 1px grey;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "ClarendonLight";
	text-rendering: optimizeLegibility;
	margin: 0;
	padding: 0;
}
h1, h2 {
	font-weight: 100;
}
h3, h4, h5, h6 {
	font-weight: normal;
}


h1 {
	font-size: 3em;
}
h2 {
	font-size: 2em;
}
h3 {
	font-size: 1.2em;
}

hr {
	max-width: 940px;
	margin: 20px auto 35px;
	height: 1px;
	color: #7a7e7d;
	background-color: #7a7e7d;
	border: none;
}

small, .small {
	font-size: 0.9em;
}

sup.footnote {
	line-height: 1;
}
p:not(.footnote)+p.footnote {
	margin-top: 2em;
}

ul, ol, blockquote {
	margin: 1em 0;
	padding-left: 25px;
}

/* links
----------------------------------------------- */

/* color: #65ba61; */

a {
	text-decoration: none;
	color: #05A;
	outline-color:yellow;
}
.article a {
	outline-color:black;
}
a:hover, a:active {
	outline: none;
}
.nav a:focus {
	opacity:.8;
	filter: alpha(opacity=80);
}

a img {
	border: none;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: black;
}

.pill {
	background-color: #06C;
	color: white;
	padding: 10px 20px;
	opacity: .5;
	filter: alpha(opacity=50);
	
	-webkit-border-radius: 19px;
	-moz-border-radius: 19px;
	border-radius: 19px;
}
.pill:hover {
	color: white;
	opacity: .8;
	filter: alpha(opacity=80);
}
.pill:active {
	opacity: 1;
	filter: alpha(opacity=100);
}
/* layout
----------------------------------------------- */

#accessibility {
	position: absolute;
	top: -10000px;
}

#container {
	max-width: 960px;
	_width: 980px;
	margin: auto;
	padding: 35px 0 100px;
	background-color: white;
}
.container {
	max-width: 940px;
	margin: auto;
}
.px-10 {
	padding-left: 10px;
	padding-right: 10px;
}
#head {
	background: black url('/images/site/space-strip.jpg');
	padding: 40px 0;
	text-align: center;
}
#mobilehead {
	display: none;
	text-align: center;
	padding: 10px 0;
	letter-spacing: 2px;
	font-size: 10px;
	color:#999;
	border-bottom: dotted 1px #ccc;
}

#site-name,
#site-nav {
	display: inline-block;
	vertical-align: middle;
	/* IE Fix */
	zoom:1; *display: inline; _height: 100px;
}
#site-nav {
	padding: 4px 0;
	font-size: 13px;
	font-family: "ClarendonLight";
	text-rendering: optimizeLegibility;
	letter-spacing: 1px;
}
#site-name {
	margin-right: 100px;
}
#mobilehead img,
#site-name img {
	width: 200px;
}
.site-home {
	margin: 0 auto;
	display:block;
	max-width: 940px;
	padding: 0 10px;
}
.site-home a {
	display: inline-block;
	padding: 20px 10px 14px;
	background: black;
	border-top: none;
	-webkit-box-shadow: 0 1px 6px rgba(0,0,0,.3);
	line-height: 0;
}
.site-home a,
.articlination a {
	opacity: .3;
	filter: alpha(opacity=30);
	-webkit-transition: opacity .4s;
	-moz-transition: opacity .4s;
	transition: opacity .4s;
}
.site-home a:hover,
.articlination a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}
.site-home img {
	width: 150px
}
.site-update {
	margin:20px 0;
	padding:10px;
	background-color:#ffc;
}
#content {
	position: relative;
}
#articlebox {
	display: inline-block; 
	width: 640px;
}
#disqus_thread {
	padding:0 10px;
	min-height: 600px;
}
#foot {
	position: relative;
	clear: both;
	text-align: center;
}

.site-heading {
	line-height: 1;
	font-family: "ClarendonLight";
	text-rendering: optimizeLegibility;
	color: black;
	margin-bottom: 15px;
}
.site-heading,
#comment {
	text-indent: 10px;
}
h1.site-heading { font-size: 4em; }
h2.site-heading { font-size: 3em; }

.threecol {
	padding: 10px;
	display: inline-block;
	width: 300px;
	vertical-align: top;
	/* IE Fix */
	zoom:1; *display: inline; _height: 300px;
}
.threecol.x2 {
	width: 620px;
	text-align: left;
}
.threecol.x3 {
	width: 940px;
}
.article.threecol.masonry-brick:not(:last-of-type) {
	margin-bottom: 1.6em;
}
.more {
	display: block;
	width: 100px;
	margin: auto;
	-webkit-transition: background-color .4s;
	-moz-transition: background-color .4s;
	transition: background-color .4s;
}
.showmore .more {
	padding: 0 10px;
	color: transparent;
	background-color: #666;
}

.showless > div:nth-child(n+4) {
	display: none;
}

/*
.showless > .threecol:nth-child(n+4) {
	-webkit-transition: height 1s, padding-top 1s, padding-bottom 1s;
	padding-top: 0px;
	padding-bottom: 0px;
	height: 0%;
	overflow: hidden;
}
.showmore > .threecol:nth-child(n+4) {
	display: inline-block;
	height: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
}
*/
.articlination {
	position:absolute; 
	top: 15px; 
	left: 50%; 
	margin-left:-40px;
}
.articlination a {
	display: inline-block;
	width: 20px;
	height: 20px;
	padding: 5px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background-color: black;
	color: white;
	background: black url('/images/site/advance-arrows-white.png') center center no-repeat;
	margin: 0 5px;
}
.articlination .next a {
	background-position-x: 4px;
}
.articlination .prev a {
	background-position-x: -34px;
}

.pagination {
	text-align: center;
}
.pagination a {
	display: inline-block;
	padding: 5px 20px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	background-color: #666;
	color: white;
	-webkit-transition: background-color .4s;
	-moz-transition: background-color .4s;
	transition: background-color .4s;
}
.pagination a:hover {
	background-color: black;
}

.profile {
	text-align: justify;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.edit {
	position: absolute;
	top: 0;
	right: 0;
	width: 12px;
	height: 12px;
	margin: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	border: 0;
}
div:hover > .edit {
	background: red;
}

/* from https://css-tricks.com/full-width-containers-limited-width-parents/ */
.full-width {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.text-center {
	text-align: center;
}

/* navigation
----------------------------------------------- */

/*
.nav li {
	margin: 0 10px;
	vertical-align: bottom;
}

.nav .currentpage {
	display: inline-block;
	background: url('/images/site/flag.gif') no-repeat left bottom;
	padding: 13px 0 0 20px;
	margin-left:-20px;
}
*/
.nav a {
	display: inline-block;
	text-align: center;
	border-bottom: none;
	text-shadow: rgba(0,0,0,0.3) 0 -1px, rgba(255,255,255,0.5) 0 1px;
	border: solid 2px transparent;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	line-height: 1;
	font-style: italic;
	opacity: .5;
	filter: alpha(opacity=50);
	background-color: #ddd;
	padding: 10px;
	color: black;
}
.nav li {
	margin-right: 20px;
/* 	background: black; */
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;	
}
.nav li:last-of-type {
	margin-right: 0;
}

.nav a[href="http://vonnau.com/"]          { padding: 32px 0 30px; min-width: 75px; background-color: #6AA; -webkit-border-radius:39px; }
.nav a[href="http://vonnau.com/work/"]     { padding: 38px 0 36px; min-width: 87px; background-color: #9C8; -webkit-border-radius:45px; }
.nav a[href="http://vonnau.com/cv/"]       { padding: 16px 0 14px; min-width: 43px; background-color: #DDD; -webkit-border-radius:23px; }
.nav a[href="http://vonnau.com/articles/"] { padding: 34px 0 32px; min-width: 79px; background-color: #ACC; -webkit-border-radius:41px; }
.nav a[href="http://vonnau.com/news/"]     { padding: 33px 0 31px; min-width: 77px; background-color: #FA8; -webkit-border-radius:40px; }
.nav a[href="http://vonnau.com/contact/"]  { padding: 30px 0 28px; min-width: 71px; background-color: #D44; -webkit-border-radius:37px; }

.nav a:hover {
	opacity: .8;
	filter: alpha(opacity=80);
	text-decoration: none;
}
.nav a.currentpage {
	color: black;
	border-color: rgba(255,255,255,.1);
	opacity: 1;
	filter: alpha(opacity=100);
	
}
.nav a.currentpage:after {
	content: url('/images/site/flag.gif');
	position: absolute;
	top: -28px;
	left: 50%;
	margin-left: -16px;
}



/* page styles
----------------------------------------------- */

   /* hacky home page fix */
   #front { background: black url('/images/site/jupiter.jpg'); background-repeat: no-repeat; }
   #front #head { background: none; }
   #front #container { background: none; padding: 0; color: white; }
   #front #container h1 { color: white; }

#articles .articlination { display: none; }

    #news .nav a.currentpage { }
 #default .nav a.currentpage { }
      #cv .nav a.currentpage { }
 #contact .nav a.currentpage { }
#articles .nav a.currentpage { }

.sidebar {
	float: right;
	width: 300px;
	font-size: 13px;
	padding: 10px;
}
  #cv .article.long:not(.sidebar) {
	margin-right: 320px;
}
#news .article.long:not(.sidebar) {
	margin-left: 320px;
}
#news .sidebar {
	float: left;
}
.sidebar h2 {
	margin: .4em 0;
}
#cv .title {
	margin-bottom: 20px;
}
#cv .article.long {
	padding-bottom: 0;
	margin-bottom: 1.6em;
}
#cv ul {
	list-style: none;
	margin-top: 0;
}
#gusherTarget {
	padding-left: 20px; 
	min-height: 500px;
}
#services {
	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
}


/* overrides
----------------------------------------------- */

.caps {
	font-size: 0.9em;
	letter-spacing: 0.1em;
}

#services {
	margin: 1em 0;
}
#services li{
	padding: 2px;
}
#events .article .info {
	position: static;
	display: inline-block;
}
#events .dateline,
#events .article {
	margin: 0;
}


/* articles
----------------------------------------------- */

.article,
.dateline {
}
.article-foot {
	padding: 0 20px;
}
.actionthumb.video {
	display: inline-block;
	position: relative;
}
.actionthumb.video:hover:after {
	content: url('/images/site/play.png');
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -61px 0 0 -61px;
	opacity: .5;
	filter: alpha(opacity=50);
}
.actionthumb.design {
	background: rgba(255, 255, 255, 0.5);
	display: inline-block;
}
.supplement {
	display: none;
	text-align: left;
}
.supplement-visible .supplement {
	display: block;
}
.site-control {
	float: right;
	margin-top: 29px;
	margin-right: 20px;
}
#articles .article.long h3 {
	margin: 40px 0 10px;
}
.article.long ol {
	background-color: #F2F2F2;
	padding: 20px 40px 20px 50px;
	border-radius: 8px;
	margin: 20px 0;
}
.article.long ol li:not(:last-of-type) {
	margin-bottom: .6em;
}
.article.long ol img {
	height: auto;
	max-width: 100%
}

#work .threecol h3 {
	margin-top: 10px;
	text-align: center;
}
.article .title {
	margin-bottom: 10px;
}
.article h3.title {
	line-height: 1;
	margin-bottom: 10px;
}
.threecol h3 a{
	color: black;
}
.article.long,
#txpCommentInputForm {
	padding: 10px;
}
.article.long:not(:last-child) {
	margin-bottom: 4em;
}
.divider {
	margin: 6em 0;
	text-align: center;
}

.directory {
	list-style-type: circle;
}

.author {
	font-style: normal;
	font-size: 0.8em;
}

.article.long .title {
	margin-bottom: 8px;
}
.article .published {
	color: #455;
	font-family: "ClarendonLight";
	margin: .5em 0;
}
.article.long .published {
  margin: 1em 0 2em;
}
.article.long img {
	max-width: none;
}
.article-image {
	display: inline-block;
	margin: 0 auto 20px;
}

#articles .article.long,
#disqus_thread {
	max-width: 620px;
}
.article.long img {
	max-width: 100%;
	height: auto !important;
}

.feature,
.feature + #disqus_thread {
	margin-left: auto;
	margin-right: auto;
}
.feature + #disqus_thread {
	margin-top: 8em;
}

/* comments
----------------------------------------------- */

.comments_invite {
	text-decoration: none;
}
.comments_invite:hover {
	text-decoration: none;
}
.comments_invite:active {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.comments_error {
	color: #000;
	background-color: #fff4f4;
}

ul.comments_error {
	padding : 0.3em;
	list-style-type: circle;
	list-style-position: inside;
	border: 2px solid #fdd;
}

div#cpreview {
	color: #000;
	background-color: #f1f1f1;
	border: 2px solid #ddd;
}

form#txpCommentInputForm td {
	vertical-align: top;
}

#comments-help {
	margin: 2px 0 15px 0;
	font-size: 0.7em;
}

#gasControl {
}

#front.gas-visible,
.gas-visible #head {
	background-color: black;
	background-image: url("/images/site/space-gas.jpg");
	background-position: center -170px;
}
.gas-visible .nav li {
	background: none;
}

/* error page
----------------------------------------------- */

.error-status {}

/* fonts
----------------------------------------------- */

@font-face {
    font-family: 'ClarendonLight';
    src: url('/fonts/clarendon-light-webfont.eot');
    src: url('/fonts/clarendon-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/clarendon-light-webfont.woff') format('woff'),
         url('/fonts/clarendon-light-webfont.ttf') format('truetype'),
         url('/fonts/clarendon-light-webfont.svg#ClarendonLight') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* animation
----------------------------------------------- */

#intro,
#chadcontainer {
	top: 48px;
	margin-top: 20px;
	right: 50%;
	margin-right: -510px;
}

#intro {
	position: absolute;
	margin-top: 35px;
	margin-right: 14px;
	width: 182px;
	height: 153px;
	padding: 20px 8px 0 10px;
	background: url('/images/site/balloon.png') no-repeat right top;
	display: none;
	z-index: 2;
	text-align: center;
}

#chadcontainer {
	position: absolute;
	height: 45px;
	width: 45px;
	z-index: 3;
}
#chadcontainer {
	-webkit-animation: astronautfloat 10s infinite;
	-moz-animation:    astronautfloat 10s infinite;
	animation:         astronautfloat 10s infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
	animation-play-state: running;
}
#chadcontainer.paused {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	animation-play-state: paused;
}
#chad,
.chadslug {
	position: absolute;
	padding: 10px;
	cursor: default;
}
#chad:active,
.chadslug:focus {
	outline: none; 
}
.chadslug {
	height: 25px;
	width: 25px;
}
#chad {
	display: inline-block;
}
#chad.idle {
	-webkit-animation: astronautidle 2.9s;
	-moz-animation:    astronautidle 2.9s;
	animation:         astronautidle 2.9s;
	-webkit-animation-timing-function: linear;
	-moz-animation-timing-function: linear;
	animation-timing-function: linear;
}
#chad.backflip {
	-webkit-animation: astronautbackflip linear 2.9s;
	-moz-animation:    astronautbackflip linear 2.9s;
	animation:         astronautbackflip linear 2.9s;
	-webkit-transform-origin: -30px -30px;
	-moz-transform-origin: -30px -30px;
	transform-origin: -30px -30px;
}
#chad.doublebackflip {
	-webkit-animation: astronautdoublebackflip ease-out 2.9s;
	-moz-animation:    astronautdoublebackflip ease-out 2.9s;
	animation:         astronautdoublebackflip ease-out 2.9s;
	-webkit-transform-origin: -5px -5px;
	-moz-transform-origin: -5px -5px;
	transform-origin: -5px -5px;
}
#chad.ziph {
	-webkit-animation: astronautziph ease-in .5s;
	-moz-animation:    astronautziph ease-in .5s;
	animation:         astronautziph ease-in .5s;
	-webkit-transform-origin: 23px 23px;
	-moz-transform-origin: 23px 23px;
	transform-origin: 23px 23px;
}
#chad.zipv {
	-webkit-animation: astronautzipv ease-in .9s;
	-moz-animation:    astronautzipv ease-in .9s;
	animation:         astronautzipv ease-in .9s;
	-webkit-transform-origin: 23px 23px;
	-moz-transform-origin: 23px 23px;
	transform-origin: 23px 23px;
}

@-webkit-keyframes astronautfloat {
	  0%  { margin-top: 25px; }
	 25%  { margin-top: 15px; }
	 50%  { margin-top: 35px; }
	 75%  { margin-top: 05px; }
	100%  { margin-top: 25px; }
}
@-moz-keyframes astronautfloat {
	  0%  { margin-top: 25px; }
	 25%  { margin-top: 15px; }
	 50%  { margin-top: 35px; }
	 75%  { margin-top: 05px; }
	100%  { margin-top: 25px; }
}
@keyframes astronautfloat {
	  0%  { margin-top: 25px; }
	 25%  { margin-top: 15px; }
	 50%  { margin-top: 35px; }
	 75%  { margin-top: 05px; }
	100%  { margin-top: 25px; }
}
@-webkit-keyframes astronautidle {
	  0%  { -webkit-transform: translate3d(0,0,0) rotateZ(0deg); }
	 40%  { -webkit-transform: translate3d(0,-5px,0) rotateZ(-5deg); }
	100%  { -webkit-transform: translate3d(0,0,0) rotateZ(0deg); }
}
@-moz-keyframes astronautidle {
	  0%  { -moz-transform: translateY(0px) rotate(0deg); }
	 40%  { -moz-transform: translateY(-5px) rotate(-5deg); }
	100%  { -moz-transform: translateY(0px) rotate(0deg); }
}
@keyframes astronautidle {
	  0%  { transform: translateY(0px) rotate(0deg); }
	 40%  { transform: translateY(-5px) rotate(-5deg); }
	100%  { transform: translateY(0px) rotate(0deg); }
}
@-webkit-keyframes astronautbackflip {
	  0%  { -webkit-transform: rotateZ(0deg); }
	100%  { -webkit-transform: rotateZ(360deg); }
}
@-moz-keyframes astronautbackflip {
	  0%  { -moz-transform: rotate(0deg); }
	100% { -moz-transform: rotate(360deg); }
}
@keyframes astronautbackflip {
	  0%  { transform: rotate(0deg); }
	100%  { transform: rotate(360deg); }
}
@-webkit-keyframes astronautdoublebackflip {
	  0%  { -webkit-transform: rotateZ(0deg); }
	100%  { -webkit-transform: rotateZ(720deg); }
}
@-moz-keyframes astronautdoublebackflip {
	  0%  { -moz-transform: rotate(0deg); }
	100% { -moz-transform: rotate(720deg); }
}
@keyframes astronautdoublebackflip {
	  0%  { transform: rotate(0deg); }
	100%  { transform: rotate(720deg); }
}
@-webkit-keyframes astronautzipv {
	  0%  { -webkit-transform: translate3d(0,0,0) rotateZ(135deg); -webkit-animation-timing-function: ease-in; }
	 30%  { -webkit-transform: translate3d(0,-300px,0) rotateZ(135deg); }
	 30.1%  { -webkit-transform: translate3d(300px,-300px,0) rotateZ(135deg); }
	 30.2%  { -webkit-transform: translate3d(300px,1200px,0) rotateZ(135deg); }
	 30.3%  { -webkit-transform: translate3d(0px,1200px,0) rotateZ(135deg); -webkit-animation-timing-function: linear; }
	 100%  { -webkit-transform: translate3d(0,0,0) rotateZ(135deg); -webkit-animation-timing-function: ease-out; }
}
@-webkit-keyframes astronautziph {
	  0%  { -webkit-transform: translate3d(0,0,0) rotateZ(45deg);  -webkit-animation-timing-function: ease-in; }
	 60%  { -webkit-transform: translate3d(-1200px,0,0) rotateZ(45deg); }
	 61%  { -webkit-transform: translate3d(-1200px,-200px,0) rotateZ(45deg); }
	 62%  { -webkit-transform: translate3d(250px,-200px,0) rotateZ(45deg); }
	 63%  { -webkit-transform: translate3d(250px,0,0) rotateZ(45deg);  -webkit-animation-timing-function: ease-out; }
	 100%  { -webkit-transform: translate3d(0,0,0) rotateZ(45deg); }
}


.dinos {
	position: relative;
	width: 32px;
	margin: auto;
	-webkit-animation: dinoswalking 3.5s infinite;
	-webkit-animation-timing-function: linear;
	-moz-animation:    dinoswalking 3.5s infinite;
	-moz-animation-timing-function: linear;
	-ms-animation:     dinoswalking 3.5s infinite;
	-ms-animation-timing-function: linear;
}

@-webkit-keyframes dinoswalking {
        0%   { left: -70px; }
        100% { left: 80px; }
}
@-moz-keyframes dinoswalking {
        0%   { left: -70px; }
        100% { left: 80px; }
}
@keyframes dinoswalking {
        0%   { left: -70px; }
        100% { left: 80px; }
}


/* media queries
----------------------------------------------- */

/* printing */
@media print {
	/*.article.long a:link:after, a:visited:after { content:" [" attr(href) "] "; }*/
	.article { font-size: 9pt; font-family: Georgia; }
	#head,
	#txpCommentInputForm,
	.article-foot,
	#foot,
	#chadcontainer,
	.site-control,
	.site-home,
	.edit { display: none; }
	#container { max-width: none; margin: 0; padding: 0;}
	#cv .article.long:not(.sidebar) { margin-right: 220px;}
	#news .article.long:not(.sidebar) { margin-left: 220px; }
	.sidebar { width: 200px; font-size: 8pt; }
	#cv .sidebar img { height: auto; width: 200px; }
}

/* wide */
@media screen and (min-width: 1600px) {
	body {
		-moz-background-size: contain;
		background-size: contain;
	}
}

@media screen and (max-width: 1020px) {
	img {
		height: auto;
		max-width: 100%;
	}
	.site-heading, #comment {
		text-indent: 0;
		padding: 0 10px;
	}
	#site-name { 
		display: block;
		margin: 0 0 30px 0;
	}
	#front:not(.individual) #container,
	#work:not(.individual) #container,
	#articles:not(.individual) #container {
		max-width: 640px;
	}
	#articlebox {
		display: block; 
		width: auto;
	}
	#newsie {
		width: auto;
	}
	#intro,
	#chadcontainer {
		top: 13px;
		right: 50%;
		margin-right: -160px;
	}
	.nav li {
		margin-bottom: 10px;
	}
	.article.long img,
	.article.threecol img {
		max-width: 100%;
		height: auto !important;
	}
	.threecol.x3 {
		max-width: 620px;
	}
	.threecol.x3 img {
		max-width: 100%;
		height: auto !important;
	}
	.threecol.x3 iframe {
		max-width: 100%;
	}
}
@media screen and (max-width: 639px) {
	h1 {
		font-size: 1.8em;
	}
	#work:not(.individual) #container {
		max-width: 320px;
	}
	.threecol {
		width: auto;
	}
	.threecol.x2,
	.threecol.x3 {
		display: block;
		width: auto;
	}
	.threecol.x2 img {
		max-width: 100%;
		height: auto !important;
	}
	.threecol.x2 iframe {
		max-width: 100%;
	}
	#site-nav {
		max-width: 420px;
	}
	.nav li,
	.nav li:last-of-type {
		width: 101px;
		margin: 5px;
	}
	.article.long ol {
		margin: 20px 0;
		padding: 20px 15px 20px 35px;
	}
	.sidebar {
		float: none;
		width: auto;
	}
	  #cv .article.long:not(.sidebar),
	#news .article.long:not(.sidebar) {
		margin-left: auto;
		margin-right: auto;
	}
	#news .article.long:not(.sidebar) {
		margin: 0;
	}
	#news .sidebar {
		float: none;
	}
}

/* iPhone, Android */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

	/* hacky home page fix */
	#front { background: black url('/images/site/space-strip.jpg'); }
	#front #container { display:block; background:black; }
	#front #mobilehead { display: none; }
	#front #head { padding-top: 20px; top: 0; }
	
	#head {
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 100px 0 40px;
	}
	#mobilehead {
		display: block;
	}
	#container {
		padding-bottom: 480px;
	}
	.site-control {
		float: none;
		display: inline-block;
		margin: 0 auto 10px;
	}
}