/* jk-keller.com styles based off of HTML5 ✰ Boilerplate : pulled 2011 June 23 */

/* @group normailze css */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }

html { font-size: 100%; overflow-y: scroll; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
/* jk */ body { margin: 0; font-size: 13px; line-height: 1.231; background: #e7ede6; }
/* jk */ body, button, input, select, textarea { font-family: Arial, Helvetica, sans-serif; color: #586a52; }

/* jk */::-moz-selection { background: #32cc66; color: #fff; text-shadow: none; }
/* jk */ ::selection { background: #32cc66; color: #fff; text-shadow: none; }
/* jk - totally rainbow! Worth every kb... */
div::selection{background: #fd18fe;} div::-moz-selection{background: #fd18fe;}
object::selection{background: #3dfefe;} object::-moz-selection{background: #3dfefe;}
iframe::selection{background: #1afd14;} iframe::-moz-selection{background: #1afd14;}
h1::selection{background: #fafe1e;} h1::-moz-selection{background: #fafe1e;}
h2::selection{background: #f91312;} h2::-moz-selection{background: #f91312;}
h3::selection{background: #fa9316;} h3::-moz-selection{background: #fa9316;}
h4::selection{background: #91fe17;} h4::-moz-selection{background: #91fe17;}
h5::selection{background: #27fe93;} h5::-moz-selection{background: #27fe93;}
h6::selection{background: #3892fd;} h6::-moz-selection{background: #3892fd;}
p::selection{background: #970efd;} p::-moz-selection{background: #970efd;}
blockquote::selection{background: #fa1592;} blockquote::-moz-selection{background: #fa1592;}
pre::selection{background: #424242;} pre::-moz-selection{background: #424242;}
abbr::selection{background: #d5d5d5;} abbr::-moz-selection{background: #d5d5d5;}
address::selection{background: #eaeaea;} address::-moz-selection{background: #eaeaea;}
cite::selection{background: #6a3400;} cite::-moz-selection{background: #6a3400;}
code::selection{background: #fe7bfe;} code::-moz-selection{background: #fe7bfe;}
del::selection{background: #8179fd;} del::-moz-selection{background: #8179fd;}
dfn::selection{background: #83fefe;} dfn::-moz-selection{background: #83fefe;}
em::selection{background: #7bfe7a;} em::-moz-selection{background: #7bfe7a;}
img::selection{background: #fbfe7c;} img::-moz-selection{background: #fbfe7c;}
ins::selection{background: #fa7a7a;} ins::-moz-selection{background: #fa7a7a;}
kbd::selection{background: #fbd57b;} kbd::-moz-selection{background: #fbd57b;}
q::selection{background: #d3fe7b;} q::-moz-selection{background: #d3fe7b;}
samp::selection{background: #80fed5;} samp::-moz-selection{background: #80fed5;}
small::selection{background: #82d5fe;} small::-moz-selection{background: #82d5fe;}
strong::selection{background: #d67afe;} strong::-moz-selection{background: #d67afe;}
sub::selection{background: #fc83d7;} sub::-moz-selection{background: #fc83d7;}
sup::selection{background: #8f0605;} sup::-moz-selection{background: #8f0605;}
var::selection{background: #8f920c;} var::-moz-selection{background: #8f920c;}
b::selection{background: #099106;} b::-moz-selection{background: #099106;}
i::selection{background: #1e9192;} i::-moz-selection{background: #1e9192;}
dl::selection{background: #1a0291;} dl::-moz-selection{background: #1a0291;}
dt::selection{background: #910891;} dt::-moz-selection{background: #910891;}
dd::selection{background: #d0a400;} dd::-moz-selection{background: #d0a400;}
ol::selection{background: #ff433a;} ol::-moz-selection{background: #ff433a;}
ul::selection{background: #d15dff;} ul::-moz-selection{background: #d15dff;}
li::selection{background: #a0ff96;} li::-moz-selection{background: #a0ff96;}
fieldset::selection{background: #8f0751;} fieldset::-moz-selection{background: #8f0751;}
form::selection{background: #540491;} form::-moz-selection{background: #540491;}
label::selection{background: #1b5191;} label::-moz-selection{background: #1b5191;}
legend::selection{background: #129151;} legend::-moz-selection{background: #129151;}
table::selection{background: #509108;} table::-moz-selection{background: #509108;}
caption::selection{background: #8f5107;} caption::-moz-selection{background: #8f5107;}
tbody::selection{background: #c0c0c0;} tbody::-moz-selection{background: #c0c0c0;}
tfoot::selection{background: #5e5e5e;} tfoot::-moz-selection{background: #5e5e5e;}
thead::selection{background: #a67944;} thead::-moz-selection{background: #a67944;}
tr::selection{background: #d3a9a9;} tr::-moz-selection{background: #d3a9a9;}
th::selection{background: #2fa8d4;} th::-moz-selection{background: #2fa8d4;}
td::selection{background: #47a879;} td::-moz-selection{background: #47a879;}
article::selection{background: #a844a8;} article::-moz-selection{background: #a844a8;}
aside::selection{background: #d2d517;} aside::-moz-selection{background: #d2d517;}
canvas::selection{background: #4968ff;} canvas::-moz-selection{background: #4968ff;}
details::selection{background: #647a00;} details::-moz-selection{background: #647a00;}
figcaption::selection{background: #ff8ff1;} figcaption::-moz-selection{background: #ff8ff1;}
figure::selection{background: #009c93;} figure::-moz-selection{background: #009c93;}
footer::selection{background: #ff3606;} footer::-moz-selection{background: #ff3606;}
header::selection{background: #b5ffb4;} header::-moz-selection{background: #b5ffb4;}
hgroup::selection{background: #009c1b;} hgroup::-moz-selection{background: #009c1b;}
menu::selection{background: #e219ff;} menu::-moz-selection{background: #e219ff;}
nav::selection{background: #633b00;} nav::-moz-selection{background: #633b00;}
section::selection{background: #74ff53;} section::-moz-selection{background: #74ff53;}
summary::selection{background: #048;} summary::-moz-selection{background: #048;}
time::selection{background: #19ff2c;} time::-moz-selection{background: #19ff2c;}
mark::selection{background: #ff64f2;} mark::-moz-selection{background: #ff64f2;}
audio::selection{background: #ff261b;} audio::-moz-selection{background: #ff261b;}
video::selection{background: #ae002a;} video::-moz-selection{background: #ae002a;}
span::selection{background: #3508fd;} span::-moz-selection{background: #3508fd;}

/* jk */ a { color: #2a3526; }
/* jk */ a:visited { color: #586a52; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
/* jk */ a:hover { color: #83967d; text-decoration: none; }
/* jk */ a:active { color: #2a3526; text-decoration: underline; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 3em; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; }
svg:not(:root) {
    overflow: hidden;
}

/* jk */ figure { margin: 0 0 1em 0; }

form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { border: 0; *margin-left: -7px; padding: 0; }
label { cursor: pointer; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; }
input:valid, textarea:valid {  }
/* jk */ input:invalid, textarea:invalid { background-color: #f7d600; }

table { border-collapse: collapse; border-spacing: 0; }
/* @end normalize css */

/* @group Primary styles - Author: Jonathan Keller Keller */
/* setup for header/footer image layering */
.z1{z-index:1;} .z2{z-index:2;} .z3{z-index:3;} .z4{z-index:4;} .z5{z-index:5;} .z6{z-index:6;} .z7{z-index:7;} .z8{z-index:8;} .z9{z-index:9;} .z10{z-index:10;} .z11{z-index:11;} .z12{z-index:12;} .z13{z-index:13;} .z14{z-index:14;} .z15{z-index:15;} .z16{z-index:16;} .z17{z-index:17;} .z18{z-index:18;} .z19{z-index:19;} .z20{z-index:20;} .z21{z-index:21;} .z22{z-index:22;} .z23{z-index:23;} .z24{z-index:24;} .z25{z-index:25;} .z26{z-index:26;} .z27{z-index:27;} .z28{z-index:28;} .z29{z-index:29;} .z30{z-index:30;} .z31{z-index:31;} .z32{z-index:32;} .z33{z-index:33;} .z34{z-index:34;} .z35{z-index:35;} .z36{z-index:36;} .z37{z-index:37;} .z38{z-index:38;} .z39{z-index:39;} .z40{z-index:40;} .z41{z-index:41;} .z42{z-index:42;} .z43{z-index:43;} .z44{z-index:44;} .z45{z-index:45;} .z46{z-index:46;} .z47{z-index:47;} .z48{z-index:48;} .z49{z-index:49;} .z50{z-index:50;} .z51{z-index:51;} .z52{z-index:52;} .z53{z-index:53;} .z54{z-index:54;} .z55{z-index:55;} .z56{z-index:56;} .z57{z-index:57;} .z58{z-index:58;} .z59{z-index:59;} .z60{z-index:60;} .z61{z-index:61;} .z62{z-index:62;} .z63{z-index:63;} .z64{z-index:64;} .z65{z-index:65;} .z66{z-index:66;} .z67{z-index:67;} .z68{z-index:68;} .z69{z-index:69;} .z70{z-index:70;} .z71{z-index:71;} .z72{z-index:72;} .z73{z-index:73;} .z74{z-index:74;} .z75{z-index:75;} .z76{z-index:76;} .z77{z-index:77;} .z78{z-index:78;} .z79{z-index:79;} .z80{z-index:80;} .z81{z-index:81;} .z82{z-index:82;} .z83{z-index:83;} .z84{z-index:84;} .z85{z-index:85;} .z86{z-index:86;} .z87{z-index:87;} .z88{z-index:88;} .z89{z-index:89;} .z90{z-index:90;} .z91{z-index:91;} .z92{z-index:92;} .z93{z-index:93;} .z94{z-index:94;} .z95{z-index:95;} .z96{z-index:96;} .z97{z-index:97;} .z98{z-index:98;} .z99{z-index:99;} .z100{z-index:100;} .z101{z-index:101;} .z102{z-index:102;} .z103{z-index:103;} .z104{z-index:104;} .z105{z-index:105;} .z106{z-index:106;} .z107{z-index:107;} .z108{z-index:108;} .z109{z-index:109;} .z110{z-index:110;} .z111{z-index:111;} .z112{z-index:112;} .z113{z-index:113;} .z114{z-index:114;} .z115{z-index:115;} .z116{z-index:116;} .z117{z-index:117;} .z118{z-index:118;} .z119{z-index:119;} .z120{z-index:120;} .z121{z-index:121;} .z122{z-index:122;} .z123{z-index:123;} .z124{z-index:124;} .z125{z-index:125;} .z126{z-index:126;} .z127{z-index:127;} .z128{z-index:128;} .z129{z-index:129;} .z130{z-index:130;} .z131{z-index:131;} .z132{z-index:132;} .z133{z-index:133;} .z134{z-index:134;} .z135{z-index:135;} .z136{z-index:136;} .z137{z-index:137;} .z138{z-index:138;} .z139{z-index:139;} .z140{z-index:140;}
/* specify heights to get rid of images' bottom bug - do as they come along */
.h{
  line-height:1px;
  display: block;
  overflow: hidden !important;
  position: relative;
}
.h226{height:226px;}
.h256{height:256px;}
.h280{height:280px;}
.h302{height:302px;}
.h350{height:350px;}
.h354{height:354px;}
.h363{height:363px;}
.h386{height:386px;}
.h408{height:408px;}
.h411{height:411px;}
.h413{height:413px;}
.h422{height:422px;}
.h423{height:423px;}
.h424{height:424px;}
.h433{height:433px;}
.h441{height:441px;}
.h444{height:444px;}
.h449{height:449px;}
.h454{height:454px;}
.h470{height:470px;}
.h479{height:479px;}
.h480{height:480px;}
.h493{height:493px;}
.h507{height:507px;}
.h519{height:519px;}
.h528{height:528px;}
.h536{height:536px;}
.h537{height:537px;}
.h546{height:546px;}
.h569{height:569px;}
.h559{height:559px;}
.h573{height:573px;}
.h576{height:576px;}
.h581{height:581px;}
.h582{height:582px;}
.h593{height:593px;}
.h595{height:595px;}
.h596{height:596px;}
.h602{height:602px;}
.h605{height:605px;}
.h606{height:606px;}
.h613{height:613px;}
.h626{height:626px;}
.h628{height:628px;}
.h629{height:629px;}
.h640{height:640px;}
.h688{height:688px;}
.h690{height:690px;}
.h701{height:701px;}
.h720{height:720px;}
.h798{height:798px;}
.h862{height:862px;}
.h960{height:960px;}
.h967{height:967px;}
.h1097{height:1097px;}

.w105{width:105px;}
.w115{width:115px;}
.w120{width:120px;}
.w130{width:130px;}
.w144{width:144px;}
.w161{width:161px;}
.w163{width:163px;}
.w167{width:167px;}
.w180{width:180px;}
.w190{width:190px;}
.w221{width:221px;}
.w240{width:240px;}
.w245{width:245px;}
.w259{width:259px;}
.w280{width:280px;}
.w300{width:300px;}
.w310{width:310px;}
.w320{width:320px;}
.w336{width:336px;}
.w350{width:350px;}
.w360{width:360px;}
.w420{width:420px;}
.w440{width:440px;}
.w449{width:449px;}
.w451{width:451px;}
.w461{width:461px;}
.w460{width:460px;}
.w470{width:470px;}
.w480{width:480px;}
.w490{width:490px;}
.w500{width:500px;}
.w520{width:520px;}
.w528{width:528px;}
.w540{width:540px;}
.w557{width:557px;}
.w593{width:593px;}
.w631{width:631px;}
.w660{width:660px;}
.w687{width:687px;}
.w700{width:700px;}
.w701{width:701px;}
.w710{width:710px;}
.w720{width:720px;}
.w730{width:730px;}
.w740{width:740px;}
.w770{width:770px;}
.w780{width:780px;}
.w790{width:790px;}
.w840{width:840px;}
.w874{width:874px;}
.w960{width:960px;}
.w1259{width:1259px;}
.w4740{width:4740px;}
.w9740{width:9740px;}

hr { display: none; visibility: hidden; }
article {
  padding: 70px 0 90px;
  width: 960px;
  margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 { margin: 1.7em 0 .7em 0; }
h1 { font-size: 20px; }
h2 { font-size: 18px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }
h5 { font-size: 13px; }
h6 { font-size: 11px; }
.nosubnav {
  padding-bottom: .3em;
  border-bottom: 2px solid #83967d;
  margin-top: .4em;
}
/* mostly used for fqs & surveys */
dl {
  margin: 0;
  padding: .6em 0;
  border-top: 1px dotted #9bb394;
}
  dl.top {
    padding: 0 0 .6em 0;
    border: 0;
  }
dt {
  width: 460px;
  float: left;
  font-family: Constantia, Georgia, "Times New Roman", Times, serif;
}
dd {
  width: 460px;
  float: right;
}
  dt li {
    margin: 0;
  }
/* end mostly used for fqs & surveys */
ul { list-style-type: circle; padding-left: 1.5em; }
li { margin: 0 0 .8em 0; }
nav li { margin: 0; }
p { margin: 1em 0; }
p.top, h1.top, h2.top, h3.top, h4.top, h5.top, h6.top {
  margin-top: 0 !important;
}
del {
  text-decoration: line-through;
  opacity: .5;
}
img { position: relative; } /* forces z-index to work */
cite { font-style: italic; }
cite.publication { font-style: normal; text-decoration: underline; }
.smiley {
  display: inline-block;
  width: 16px; height: 16px;
  background: url('../images/smilies.png') no-repeat 0 0;
}
  .ie6 .smiley, .ie6 .smiley {
    display: block;
    float: left;
  }
  .crying { background-position: 0 -16px; }
  .rolling-eyes { background-position: 0 -32px; }

.lefty { float: left; }
.righty { float: right; }
.centered { margin-left: auto; margin-right: auto;}
figure p { margin: 0; }
.meta, .caption, figcaption {
  font-size: 11px; 
  color: #999;
  margin: .5em 0 1em;
  padding: 0;
}
figcaption a {
  text-decoration: none;
}
figcaption a:hover {
  text-decoration: underline;
}
figcaption a:active {
  text-decoration: none;
}
.wide {
  overflow-x: scroll;
}



#index article {
  width: 100%;
  margin: 0;
  padding: 0 0 90px;
}

.work-thumb {
  overflow: hidden;
  float:left; display: inline;
  margin: 0 20px 10px 0;
}
#latest {
  background: #c7dcc2;
  width: 100%;
  padding: 70px 0 10px;
}
#latest h2 {
  margin-top: 0;
}
#latest .news {
  font-size: 15px;
  margin-top: 2em;
}
#latest .news a {
  font-size: 21px;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 2px #fff solid;
}
#latest .news a:hover {
  border-bottom: 2px #83967d solid;
}
#latest .news a:active {
  text-decoration: none;
  border-bottom: 2px #2a3526 solid;
}
.arrow {
  font-size: 21px;
  color: #fff;
}
#updated {
  background: #dce5da;
  width: 100%;
  padding-top: 1.7em;
}
#testbg #updated {
  background: transparent url('../images/bg-fill-in-01.jpg') repeat 50px 12px;
  width: 100%;
  padding: 70px 0 10px;
}
#updated h2 {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
/*
  background: #000;
  padding: 4px;
*/
}
#updated figure:hover {
/*   background: #fff; */
}
#updated figcaption {
  width: 225px;
/*
  background: #000;
  padding: 4px;
*/
}
.indexrow {
  width: 960px;
  margin: 0 auto 10px;
}
#archives {
  width: 960px;
  margin: 0 auto 30px;
}

#archives ul {
  list-style: none;
  margin: 5px 0 0 0;
  padding-left: 0;
}
#archives li {
  margin: 0 10px 20px 0;
}
#archives h4 {
  margin-top: 0;
}
.thumb-cap {
  margin: 0;
  padding: 0 3px 0 0;
}
.thumb-cap, .with-keetra {
  display: block;
  clear: both;
  font-size: .85em;
}
#links {
  text-align: center;
  padding-bottom: 120px;
  line-height: 100px;
}
#links a, #links a:link {
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
  padding-bottom: 2px;
  color: #fff;
  border-bottom: 1px #fff solid;
}
#links a:hover {
  color: #83967d;
  border-bottom-color: #83967d;
}


#resynth {
  background: url('../images/jk-keller-resynth-bg-2.jpg') repeat 0px 100px #dce5da;
  height: 3000px;
}
#siri {
  position: absolute;
  left:200px; top:70px;
  font-size: 18px;
  text-decoration: none;
  color: #ff0080;
  background: #fff;
  padding: 10px 15px;
}
#siri:hover {
  color: #333;
}
#connect {
  position: absolute;
  left:150px; top:130px;
  font-size: 26px;
  font-weight: bold;
  text-decoration: none;
  color: #ff0080;
  background: #fff;
  padding: 10px 15px;
}
#connect span {
  border-bottom: 3px solid #ff0080;
}
#connect:hover {
  color: #333;
}
#connect:hover span {
  border-bottom: 3px solid #83967d;
}
#resynth figure {
  position: absolute;
}
#resynth figcaption a {
  padding: 3px;
}
#resynth figcaption a:hover {
  background: #c7dcc2;
}
#r01{left:100px;top:200px;}
#r02{left:425px;top:200px;}
#r03{left:750px;top:200px;}
#r04{left:100px;top:450px;}
#r05{left:425px;top:450px;}
#r06{left:750px;top:450px;}
#r07{left:100px;top:774px;}
#r08{left:425px;top:774px;}
#r09{left:750px;top:775px;}
#r10{left:100px;top:1061px;}
#r11{left:425px;top:1061px;}
#r12{left:750px;top:1061px;}
#r13{left:100px;top:1377px;}
#r14{left:425px;top:1377px;}
#r15{left:750px;top:1377px;}
#r16{left:100px;top:1764px;}
#r17{left:425px;top:1764px;}
#r18{left:750px;top:1764px;}
#r19{left:100px;top:2039px;}
#r20{left:425px;top:2039px;}

#r21{left:100px;top:2464px;}
#r22{left:341px;top:2464px;}
#r23{left:534px;top:2464px;}
#r24{left:662px;top:2464px;}
#r25{left:858px;top:2464px;}


/* @group Header ------------------------------------------------------------------- */
#toggleheaderfooter {
  position: fixed;
  top: 0; right: 0;
  z-index: 300;
  background: #444;
  padding: 5px 8px;
  font-size: 11px;
}
#toggleheaderfooter a, #toggleheaderfooter a:visited { color: #fff; }
#toggleheaderfooter a:hover { color: #999; text-decoration: none; }
#toggleheaderfooter a:active { color: #fff; }
#hugemonitor {
  position: absolute;
  top: 0; left: 1800px;
  z-index: 129;
  background: #ffdfcb;
  width: 75px;
  padding: 10px 8px 5px;
  font-size: 11px;
  text-align: center;
     -moz-border-radius: 4px; /* FF1+ */
  -webkit-border-radius: 4px; /* Saf3-4 */
          border-radius: 4px; /* Opera 10.5, IE 9, Saf5, Chrome */
}
header, .headerlines, header nav {
  position: absolute;
  top: 0; left: 0;
  height: 58px; width: 100%;
}
header { position: fixed; }
.hlw, .hlb {
  position: absolute;
  height: 15px; width: 100%;
  background: transparent url('../images/bg-notches.png') repeat-x 0 0;
}
  .headerlines .z140 { top:-10px; background-position:-1px 0; }
  .headerlines .z130 { top:-6px; background-position:-2px -15px; }
  .headerlines .z120 { top:-2px; background-position:-3px 0; }
  .headerlines .z110 { top:2px; background-position:-4px -15px; }
  .headerlines .z100 { top:6px; background-position:-5px 0; }
  .headerlines .z90 { top:10px; background-position:-6px -15px; }
  .headerlines .z80 { top:14px; background-position:-7px 0; }
  .headerlines .z70 { top:18px; background-position:-8px -15px; }
  .headerlines .z60 { top:22px; background-position:-9px 0; }
  .headerlines .z50 { top:26px; background-position:-10px -15px; }
  .headerlines .z40 { top:30px; background-position:-1px 0; }
  .headerlines .z30 { top:34px; background-position:-2px -15px; }
  .headerlines .z20 { top:38px; background-position:-3px 0; }
  .headerlines .z10 { top:42px; background-position:-4px -15px; }
header li, header #social {
  position: absolute;
  padding: 10px 8px 5px;
  font-size: 14px;
     -moz-border-radius: 4px; /* FF1+ */
  -webkit-border-radius: 4px; /* Saf3-4 */
          border-radius: 4px; /* Opera 10.5, IE 9, Saf5, Chrome */
}
  #hjk {
    left: 10px; top: -2px;
    background: #f53257;
    font-weight: bold;
    font-size: 18px;
  }
/*
  #rolljonathan, #rollras, #rollredundant, #rollrasexamples {
    padding: 10px 8px 5px;
    position: absolute;
    display: none;
  }
    #rolljonathan {
      left: 10px; top: 20px;
      background: #f53257;
    }
    #rollras {
      left: 10px; top: 40px;
      background: #f53257;
    }
    #rollredundant {
      left: 10px; top: 60px;
      background: #f53257;
    }
    #rollrasexamples {
      left: 10px; top: 80px;
      background: #f53257;
    }
*/
  header nav #habout {
    left: 24%; top: 18px;
    background: #d6fb84;
  }
  header nav #hshop {
    left: 35%; top: 5px;
    background: #93fb9d;
  }
  header nav #hktoj {
    left: 43%; top: 42px;
    background: #f7c73f;
  }
  header nav #hlist {
    left: 54%; top: 14px;
    background: #17bcf9;
  }
  header nav #hc71123 {
    left: 65%; top: 24px;
    background: #333333;
  }
  header nav #hc71123 a {
    color: #cccccc;
  }
  header nav #hc71123 a:hover {
    color: #000000;
  }
  header #social {
    right: 10px; top: 22px;
/*     width: 350px; */
    background: #DCE5DA;
    text-align: center;
    padding: 10px 5px 5px;
  font-size: 11px;
  }
  header #social p {
    margin: 4px 0 0 0;
    font-size: 10px;
    color: #999;
  }
  header #social ul {
    margin: 0;
    padding: 0;
  }
  header #social:hover ul {
/*     opacity: 1; */
  }
  header #social #flike, header #social #ftweet, header #social #fplus1 {
    display: block;
    position: relative;
    padding: 0;
    width: 100px; height:20px;
    line-height: 10px;
    margin: 0;
    list-style: none;
    float: left;
  }
    header nav li a, header nav li a:visited { color: #444; text-decoration: none; }
    header nav li a:hover { color: #fff; text-decoration: underline; }
    header nav li a:active { color: #444; }
    header nav #hjk a, header nav #hjk a:visited { color: #fff; text-decoration: none; }
    header nav #hjk a:hover { color: #444; text-decoration: underline; }
    header nav #hjk a:active { color: #fff; }
/* @end */
/* @group Footer ----------------------------------------------------------------- */
footer, .footerlines, footer nav {
  position: absolute;
  bottom: 0; left: 0;
  height: 58px; width: 100%;
}
footer { position: fixed; }
.flw, .flb {
  position: absolute;
  height: 15px; width: 100%;
  background: transparent url('../images/bg-notches.png') repeat-x 0 -30px;
}
  .footerlines .z140 { bottom:-10px; background-position:-1px -30px; }
  .footerlines .z130 { bottom:-6px; background-position:-2px -45px; }
  .footerlines .z120 { bottom:-2px; background-position:-3px -30px; }
  .footerlines .z110 { bottom:2px; background-position:-4px -45px; }
  .footerlines .z100 { bottom:6px; background-position:-5px -30px; }
  .footerlines .z90 { bottom:10px; background-position:-6px -45px; }
  .footerlines .z80 { bottom:14px; background-position:-7px -30px; }
  .footerlines .z70 { bottom:18px; background-position:-8px -45px; }
  .footerlines .z60 { bottom:22px; background-position:-9px -30px; }
  .footerlines .z50 { bottom:26px; background-position:-10px -45px; }
  .footerlines .z40 { bottom:30px; background-position:-1px -30px; }
  .footerlines .z30 { bottom:34px; background-position:-2px -45px; }
  .footerlines .z20 { bottom:38px; background-position:-3px -30px; }
  .footerlines .z10 { bottom:42px; background-position:-4px -45px; }
footer li {
  position: absolute;
     -moz-border-radius: 3px; /* FF1+ */
  -webkit-border-radius: 3px; /* Saf3-4 */
          border-radius: 3px; /* Opera 10.5, IE 9, Saf5, Chrome */
  font-size: 11px;
  margin: 0;
  padding: 5px 8px 10px;
  color: #333;
}
  footer nav #fgplus {
    right: 71%; bottom: 11px;
    background: #2c2c2c;
  }
  footer nav #ffacebook {
    right: 60%; bottom: 39px;
    background: #3b5998;
  }
  footer nav #ftwitter {
    right: 50%; bottom: -1px;
    background: #29c;
  }
  footer nav #fflickr {
    right: 80%; bottom: 31px;
    background: #ff0084;
  }
  footer nav #fvimeo {
    right: 87%; bottom: 3px;
    background: #0daed7;
  }
  footer nav #fyoutube {
    right: 42%; bottom: 19px;
    background: #f11;
  }
  footer nav #fcopyright {
    right: 17%; bottom: 7px;
    background: #000;
  }
  footer nav #femail {
    right: 20px; bottom: 11px;
    background: #00d179;
  }
  footer nav #fkeetra {
    right: 5px; bottom: 47px;
    background: #f34d59;
  }
  footer nav li a, footer nav li a:visited { color: #fff; text-decoration: none; }
  footer nav li a:hover { color: #444; text-decoration: underline; }
  footer nav li a:active { color: #fff; }
/* @end */
/* @group subNav  ---------------------------------------------------------------------- */
.subnav {
  width: 100%;
  border-bottom: 2px solid #83967d;
  font-size: 15px;
}
.subnav ul, .subsubnav ul {
  margin-left: 0;
}
.subnav li, .subsubnav li {
  display: inline-block;
  padding: .4em .4em 0 1.1em;
  margin: 0;
  background: url('../images/subnav-separator.png') 0 .8em no-repeat;
}
.subnav li {
  padding-bottom: .3em;
}
  .ie6 .subnav li, .ie6 .subsubnav li,
  .ie7 .subnav li, .ie7 .subsubnav li {
    display: block;
    float: left;
  }
  .ie6 .subnav li, .ie6 .subsubnav li {
    background: url('../images/subnav-separator.gif') 0 .8em no-repeat; /* maybe ie6 can't do ems in bg? */
  }
.subnav li.first, .subsubnav li.first {
  padding-left: 0;
  background: none;
}
.subnav li h1, .subnav li h2, .subnav li h3,
.subsubnav li h1, .subsubnav li h2, .subsubnav li h3 {
  padding: 0;
  border: 0;
  margin: 0;
}
.subnav li h1 { font-size: 15px; }
.subnav li h2 { font-size: 15px; }
.subnav li h3 { font-size: 15px; }
.subnav li.first h1, .subnav li.first h2, .subnav li.first h3 { font-size: 20px; }
.subsubnav {
  width: 100%;
  padding-bottom: 20px;
  font-size: 14px;
  line-height: 16px;
}
.subsubnav li h1 { font-size: 14px; }
.subsubnav li h2 { font-size: 14px; }
.subsubnav li h3 { font-size: 14px; }
.subnav a, .subsubnav a { text-decoration: none; }
.subnav a:hover, .subsubnav a:hover { text-decoration: underline; }
.subnav a:active, .subsubnav a:active { text-decoration: none; }
.subnav .inSubNav a { color: #2a3526; font-weight: bold; }
.subnav .inSubNav a:visited { color: #586a52; }
.subnav .inSubNav a:hover { color: #83967d; }
.subnav .inSubNav a:active { color: #2a3526; }
/* @end */
/* @group About JK pages --------------------------------------------------------- */
/*
.intro {
  margin-bottom: 2em;
}
*/
#cv, #cv ul {
  list-style: none;
  padding-left: 0;
}
#cv li {
  margin: .4em 0;
}
#cv ul {
  padding-left: 1em;
  margin-top: .2em;
}
#education strong, #lectures strong {
  color: #999;
  margin-right: 1em;
}
#cv h3 {
  margin-top: 2.2em;
}
#cv ul h4 {
  color: #999;
  margin: 1.2em 0 .2em 0;
  font-size: 13px;
}
#bibliography cite {
  font-family: Constantia, Georgia, "Times New Roman", Times, serif;
}
/*
.navgrid {
  position: relative;
  height: 900px;
}
.navgrid ul li {
  position: absolute;
  width: 200px;
  font-size: 35px;
  line-height: 35px;
  font-family: Constantia, Georgia, "Times New Roman", Times, serif;
}
.navgrid ul li a {
  text-decoration: none;
}
.navgrid ul li a:hover {
  text-decoration: underline;
}
.navgrid #survey-1 { left: 0px; top: 0px; }
.navgrid #survey-2 { left: 200px; top: 0px; }
.navgrid #survey-3 { left: 400px; top: 0px; }
.navgrid #survey-4 { left: 600px; top: 0px; }
.navgrid #survey-5 { left: 800px; top: 0px; }
.navgrid #survey-6 { left: -20px; top: 200px; }
.navgrid #survey-7 { left: 200px; top: 220px; }
.navgrid #survey-8 { left: 400px; top: 200px; }
.navgrid #survey-9 { left: 600px; top: 200px; }
.navgrid #survey-10 { left: 800px; top: 120px; }
.navgrid #survey-11 { left: 0px; top: 400px; }
.navgrid #survey-12 { left: 200px; top: 420px; }
.navgrid #survey-13 { left: 400px; top: 360px; }
.navgrid #survey-14 { left: 600px; top: 400px; }
.navgrid #survey-15 { left: 800px; top: 340px; }
.navgrid #survey-15 a {
  width: 155px; height: 190px;
  background: url('/about-jk/online-questionnaires/google-images-survey-2/images/food-melt.jpg') 0 0 no-repeat;
}
*/
/* @end - About JK */
/* @group fugue fugue ------------------------------------------------------------ */
#prev, #next {
  display: block;
  width: 110px; height: 500px;
  float: left;
  position: relative;
}
#next {
  float: right;
}
#arrow-iterations figure {
  display: block;
  width: 700px;
  float: left;
  margin: 0 20px;
}
#arrow-iterations article a:hover {
  background: #fff;
}
#prev img, #next img {
  position: absolute;
  top: 211px; left: 23px;
}
/* @end fugue fugue */
/* @group upside frowns ------------------------------------------------------------ */
#upside-frowns article {
  width: 665px;
}
#upside-frowns #prev, #upside-frowns #next {
  display: block;
  width: 110px; height: 395px;
  float: left;
  position: relative;
}
#upside-frowns #next {
  float: right;
}
#upside-frowns figure {
  display: block;
  width: 395px;
  float: left;
  margin: 0 20px;
}
#upside-frowns article a:hover {
  background: #fff;
}
#upside-frowns #prev img, #upside-frowns #next img {
  position: absolute;
  top: 159px; left: 23px;
}
/* @end upside frowns */
/* @group upside frowns ------------------------------------------------------------ */
#breathing-buildings article {
  width: 665px;
}
#breathing-buildings #prev, #breathing-buildings #next {
  display: block;
  width: 110px; height: 395px;
  float: left;
  position: relative;
}
#breathing-buildings #next {
  float: right;
}
#breathing-buildings figure {
  display: block;
  width: 395px;
  float: left;
  margin: 0 20px;
}
#breathing-buildings article a:hover {
  background: #fff;
}
#breathing-buildings #prev img, #breathing-buildings #next img {
  position: absolute;
  top: 159px; left: 23px;
}
/* @end upside frowns */
/* @group before after pages ------------------------------------------------------------ */
.before, .after {
  display: block;
  overflow: hidden;
  position: relative;
  width: 470px; height: 701px;
}
.after img {
  position: absolute;
  top: 0; left: -470px;
}
/*
#mexican-ad {
  position: relative;
  height: 501px;
}
#mexican-ad img {
  position: absolute;
  top: 0; left: -76px;
}
#mexican-ad #banner-ad {
  position: absolute;
  top: 91px; left: 237px;
  width: 728px; height: 90px;
  z-index: 200;
}
*/
/* @end before & after */
/* @group Daily Photo Pages ------------------------------------------------------ */
#weekly img { vertical-align: bottom; } /* gets rid of line spacing */
.monday { margin-left: 137px; }
.tuesday { margin-left: 274px; }
.wednesday { margin-left: 411px; }
.thursday { margin-left: 548px; }
.friday { margin-left: 685px; }
.saturday { margin-left: 822px; }
dl h3.top { margin: 0; }
/* @end - daily photo */
/* @group Dirty Mousepads ------------------------------------------------------------ */
#dirty-mousepads article figure {
  background: #ffffff;
}
#dirty-mousepads article .lefty {
  margin-right: 10px;
}
#dirty-mousepads article img {
  margin: 10px 10px 0 10px;
}
#dirty-mousepads article figcaption {
  margin-left: 10px;
  margin-right: 10px;
}
/* @end mousepads */
/* @group Wikipedia ------------------------------------------------------------ */
#wikipedia-banner-pairings article {
  width: 1110px;
}
#wikipedia-banner-pairings article p {
  text-align: center;
}
/* @end */
/* @group Edit Select all ------------------------------------------------------------ */
#wakka-wakka-wakka {
  background: #000;
}
/* @end */
/* @group Edit Select all ------------------------------------------------------------ */
#flattened-mountains article {
  width:8800px;
  padding-left: 30px
}
#flattened-mountains figcaption {
  padding-right:10px;
}
/* @end */

/* @group Simpsons Realigned ------------------------------------------------------------ */
.simpsons-realigned {
  background: #000;
}
.simpsons-realigned article {
  color: #ccc;
}
.simpsons-realigned article a { color: #ffd90f; }
.simpsons-realigned article a:hover { color: #fff; }
.simpsons-realigned article a:active { color: #c0a600; }

.simpsons-realigned .nosubnav, .simpsons-realigned .subnav {
  border-bottom: 2px solid #ffd90f;
  color: #ffd90f;
}
#simpsons-realigned #videos {
  position: relative;
  margin: 20px 0;
}
#simpsons-realigned #overlay {
  position: absolute;
  top: 0; left: 0;
  height: 723px; width: 960px;
  background: rgba(0, 0, 0, .5);
}
#simpsons-realigned #vidintro {
  position: absolute;
  top: 10px; left: 175px;
  height: 482px; width: 600px;
  border: 5px solid #ffd90f;
}
#simpsons-realigned #closeintro {
  position: absolute;
  top: 10px; left: 785px;
  height: 24px; width: 24px;
}
#simpsons-realigned #watchall {
  position: absolute;
  top: 550px; left: 320px;
  height: 64px; width: 320px;
  display: none;
}
#simpsons-realigned #watchall a {
  display: block;
  height: 64px; width: 320px;
  background: #ffd90f;
  color: #333;
  font-size: 18px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  line-height: 64px;
}
#simpsons-realigned #watchall a:hover {
  background: #000;
}
#closeintro a {
  display: block;
  height: 24px; width: 24px;
  background: #ffd90f;
}
#closeintro a:hover {
  background: #000;
}

#simpsons-realigned .vid {
  float: left;
}
#simpsons-realigned #controls {
  display: none;
}

#simpsons-realigned .feet {
  float: left;
  width: 320px;
  text-align: center;
}

#simpsons-realigned #play, #simpsons-realigned #pause {
  display: block;
  height: 97px; width: 127px;
  margin: 0 auto;
  background: #ffd90f;
}
#simpsons-realigned #play:hover, #simpsons-realigned #pause:hover {
  background: #000;
}

#simpsons-realigned #loadswap, #simpsons-realigned #volumes {
  width: 129px;
  margin: 0 auto;
}
#simpsons-realigned .swap, #simpsons-realigned .vol {
  position: relative;
  height: 31px; width: 41px;
  float: left;
  margin: 1px;
  background: #ffd90f;
}
#simpsons-realigned .swap .loadbar {
  position: absolute;
  top: 28px; left: 1px;
  height: 2px; width: 1px;
}
#simpsons-realigned .swap a, #simpsons-realigned .vol a {
  position: absolute;
  top: 0; left: 0;
  display: block;
  height: 31px; width: 41px;
}
#simpsons-realigned .swap a:hover, #simpsons-realigned .vol a:hover {
  background: #000;
}
/* @end */

/* @end Primary styles */


/* Non-semantic helper classes */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* Media Queries */
@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */
}
@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */
}

/* Print styles */
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; }
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}