/* I've left the CSS here unminified in case you're interested.
   Most of it is cobbled together from various places.*/

/* These first few lines are standard html5boilerplate. It's good stuff. You probably already know but the website's here: html5boilerplate.com */

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;
  font:inherit;
  font-size:100%;
  vertical-align:baseline;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display:block;
}

blockquote,
q {
  quotes:none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content:none;
}

ins {
  text-decoration:none;
  color:#000;
  background-color:#ff9;
}

mark {
  font-style:italic;
  font-weight:700;
  color:#000;
  background-color:#ff9;
}

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;
  margin:1em 0;
  padding:0;
  border:0;
  border-top:1px solid #ccc;
}

input,
select {
  vertical-align:middle;
}

body {
  font:1rem/1.5 sans-serif;
}

select,
input,
textarea,
button {
  font:99% sans-serif;
}

pre,
code,
kbd,
samp {
  font-family:monospace,sans-serif;
}

html {
  overflow-y:scroll;
}

a:hover,
a:active {
  outline:none;
}

ul,
ol {
  margin-left:2em;
}

ol {
  list-style-type:decimal;
}

nav ul,
nav li {
  margin:0;
  list-style:none;
  list-style-image:none;
}

small {
  font-size:85%;
}

td {
  vertical-align:top;
}

sub,
sup {
  position:relative;
  font-size:75%;
  line-height:0;
}

sup {
  top:-.5em;
}

sub {
  bottom:-.25em;
}

pre {
  position:relative;
  padding:15px;
}

pre:hover::after {
  content:attr(rel);
  position:absolute;
  top:22px;
  right:12px;
  font-family:myriad-pro-1,myriad-pro-2,HelveticaNeue,Helvetica,Arial,Sans-Serif;
  font-size:1.5em;
  font-weight:700;
  line-height:0;
  color:#FF4500;
}

textarea {
  overflow:auto;
}

.ie6 legend,
.ie7 legend {
  margin-left:-7px;
}

input[type="checkbox"] {
  vertical-align:bottom;
}

.ie7 input[type="checkbox"] {
  vertical-align:baseline;
}

label,
input[type="button"],
input[type="submit"],
input[type="image"],
button {
  cursor:pointer;
}

button,
input,
select,
textarea {
  margin:0;
}

input:invalid,
textarea:invalid {
  border-radius:1px;
  box-shadow:0 0 5px red;
}

.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid {
  background-color:#f0dddd;
}

a:link {
  -webkit-tap-highlight-color:orangered;
}

button {
  width:auto;
  overflow:visible;
}

.ie7 img {
  -ms-interpolation-mode:bicubic;
}

body,
select,
input,
textarea {
  color:#444;
}

a,
a:active,
a:visited {
  color:#607890;
}

a:hover {
  color:#036;
}

strong,
th,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight:700;
}

input[type="radio"],
.ie6 input {
  vertical-align:text-bottom;
}

::-moz-selection,
::selection {
  text-shadow:none;
  color:#fff;
  background:#FF4500;
}

/* ShadowBox (That's the lightbox-type-thing I'm using)*/

#sb-container,
#sb-wrapper {
  text-align:left;
}

#sb-container,
#sb-overlay {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  margin:0;
  padding:0;
}

#sb-container {
  display:none;
  visibility:hidden;
  z-index:999;
  height:100%;
}

body>#sb-container {
  position:fixed;
}

#sb-overlay {
  height:expression(document.documentElement.clientHeight+'px');
}

#sb-container>#sb-overlay {
  height:100%;
}

#sb-wrapper {
  position:relative;
}

#sb-wrapper img {
  border:none;
}

#sb-body {
  position:relative;
  margin:0;
  padding:0;
  border:1px solid #303030;
  overflow:hidden;
}

#sb-body-inner {
  position:relative;
  height:100%;
}

#sb-content.html {
  height:100%;
  overflow:auto;
}

#sb-loading {
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  padding-top:10px;
  text-align:center;
}

#sb-body,
#sb-loading {
  background-color:#060606;
}

#sb-title,
#sb-info {
  position:relative;
  margin:0;
  padding:0;
  overflow:hidden;
}

#sb-title-inner,
#sb-info-inner {
  position:relative;
  font-family:'Lucida Grande',Tahoma,sans-serif;
  line-height:16px;
}

#sb-title,
#sb-title-inner {
  height:26px;
}

#sb-title-inner {
  padding:5px 0;
  font-size:16px;
  color:#fff;
}

#sb-info,
#sb-info-inner {
  height:20px;
}

#sb-info-inner {
  font-size:12px;
  color:#fff;
}

#sb-nav {
  float:right;
  width:45%;
  height:16px;
  padding:2px 0;
}

#sb-nav a {
  display:block;
  float:right;
  width:16px;
  height:16px;
  margin-left:3px;
  cursor:pointer;
}

#sb-nav-close {
  background-image:url(resources/close.png);
  background-repeat:no-repeat;
}

#sb-nav-next {
  background-image:url(resources/next.png);
  background-repeat:no-repeat;
}

#sb-nav-previous {
  background-image:url(resources/previous.png);
  background-repeat:no-repeat;
}

#sb-nav-play {
  background-image:url(resources/play.png);
  background-repeat:no-repeat;
}

#sb-nav-pause {
  background-image:url(resources/pause.png);
  background-repeat:no-repeat;
}

#sb-counter {
  float:left;
  width:45%;
  padding:2px 0;
}

#sb-counter a {
  padding:0 4px 0 0;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
}

#sb-counter a.sb-counter-current {
  text-decoration:underline;
}

.sb-message {
  padding:10px;
  text-align:center;
  font-family:'Lucida Grande',Tahoma,sans-serif;
  font-size:12px;
}

.sb-message a:link,
.sb-message a:visited {
  text-decoration:underline;
  color:#fff;
}

/* Pretty Print (this is for the code samples) */

/* It's based on css-tricks.com's colour scheme because it was very nice. One day I might port TextMate's Cobalt scheme to this (http://thingsinjars.com/post/425/cobaltvim/)*/

pre {
  position:relative;
  margin:0 0 20px 0;
  padding:10px;
  border-radius:8px;
  overflow:auto;
  font-family:Courier,MonoSpace;
  font-size:16px;
  line-height:1.8;
  color:white;
  background:#333;
}

pre code {
  padding:0;
  color:white;
  background:#333;
}

pre:after {
  content:attr(rel);
  position:absolute;
  top:22px;
  right:12px;
  font-family:"myriad-pro-1","myriad-pro-2",HelveticaNeue,Helvetica,Arial,Sans-Serif;
  font-size:24px;
  font-weight:bold;
  line-height:0;
  color:orangered;
}

.str {
  color:#70cf13;
}

.kwd {
  color:#f5ad5c;
}

/* Some CSS Values */

.com {
  color:#2c91fc;
}

/* CSS Selector, CSS Comments */

.typ {
  color:#feea7a;
}

/* e.g. Math.whatever */

.lit {
  color:#ee708b;
}

/* Some CSS Values */

.pun {
  color:#f5ad5c;
}

/* Separators, e.g. =, : */

.pln {
  color:#dfc484;
}

/* CSS Property */

.tag {
  color:#dfc484;
}

/* HTML Tag */

.atn {
  color:#2c91fc;
}

/* HTML Attribute */

.atv {
  color:#8e9c5c;
}

/* String (quotes) */

.dec {
  color:#ccc;
}

/* Sometimes DOCTYPE */

#content .gist .gist-file .gist-data {
  background:#333;
}

#content .gist .gist-syntax {
  border-radius:8px;
}

#content .gist .gist-syntax .s2 {
  color:#49DB00;
}

#content .gist .gist-syntax .kd {
  color:#FFF092;
}

#content .gist .gist-syntax .o {
  color:#FABD66;
}

#content .gist .gist-syntax .mi {
  color:#f77b90;
}

#content .gist .gist-syntax .k {
  color:#faac04;
}

#content .gist .gist-syntax .c1 {
  font-weight:bold;
  color:#2c91fc;
}

/* Media Element */

/* Whenever there's audio embedded either via <audio> or flash, it uses this. It's kinda based on Simurai's BonBon buttons (http://lab.simurai.com/css/buttons/)*/

/* It is a bit long but it works nicely */

.mep-container {
  position:relative;
  font-family:Helvetica,Arial;
  background:#000;
}

.mep-container {
  display:inline-block;
  position:relative;
  margin:0;
  padding:0 .6em .4em .6em;
  border-top:1px solid rgba(255,255,255,0.8);
  border-bottom:1px solid rgba(0,0,0,0.1);
  border-radius:8px;
  text-shadow:rgba(0,0,0,.2) -1px -1px 1px;
  font-weight:bold;
  color:#666 !important;
  background-color:#BFBFBF;
  background-image:gradient(radial,50% 0,100,50% 0,0,from(rgba(255,255,255,0) ),to(rgba(255,255,255,0.7) )),url(/includes/js/mediaelement/noise.png);
  box-shadow:inset rgba(255,254,255,0.6) 0 0.3em .3em,inset rgba(0,0,0,0.15) 0 -0.1em .3em, #999 0 .1em 3px,#737373 0 .3em 1px, rgba(0,0,0,0.2) 0 .5em 5px;
  transition:background .2s ease-in-out;
  user-select:none;
}

.me-cannotplay a {
  font-weight:bold;
  color:#fff;
}

.me-cannotplay span {
  display:block;
  padding:15px;
}

.mep-container-fullscreen {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow:hidden;
}

.mep-container-fullscreen .mep-mediaelement,
.mep-container-fullscreen video {
  width:100%;
  height:100%;
}

.mep-mediaelement {
  position:absolute;
  top:0;
  left:0;
}

.mep-poster {
  position:absolute;
  top:0;
  left:0;
}

.mep-overlay {
  position:absolute;
  top:0;
  left:0;
  cursor:pointer;
}

.mep-overlay:hover .mep-overlay-button {
  background-position:0 -100px;
}

.mep-chapters {
  position:absolute;
  top:0;
  left:0;
  width:10000px;
  -xborder-right:solid 1px #fff;
}

.mep-chapters .mep-chapter {
  float:left;
  position:absolute;
  border:0;
  overflow:hidden;
  background:url(background.png);
  background:rgba(0,0,0,0.8);
}

.mep-chapters .mep-chapter .mep-chapter-block {
  display:block;
  padding:5px;
  border-right:solid 1px #999;
  border-bottom:solid 1px #999;
  font-size:11px;
  color:#fff;
  cursor:pointer;
}

.mep-chapters .mep-chapter .mep-chapter-block-last {
  border-right:none;
}

.mep-chapters .mep-chapter .mep-chapter-block:hover {
  background:#333;
}

.mep-chapters .mep-chapter .mep-chapter-block .ch-title {
  display:block;
  margin:0 0 3px 0;
  font-size:12px;
  font-weight:bold;
  line-height:12px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.mep-chapters .mep-chapter .mep-chapter-block .ch-timespan {
  display:block;
  margin:3px 0 4px 0;
  font-size:12px;
  line-height:12px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.mep-captions-layer {
  position:absolute;
  bottom:0;
  left:0;
  padding:0 0 38px 0;
  text-align:center;
  font-size:12px;
  line-height:22px;
  color:#fff;
}

.mep-captions-layer a {
  text-decoration:underline;
  color:#fff;
}

.mep-captions-layer[lang=ar] {
  font-size:20px;
  font-weight:normal;
}

.mep-captions-text {
  padding:3px 5px;
  background:url(background.png);
  background:rgba(0,0,0,0.8);
}

.mep-container .mep-controls {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:30px;
  margin:0;
  padding:0;
  list-style-type:none;
  background:none;
}

.mep-container .mep-controls div {
  display:inline-block;
  float:left;
  width:20px;
  height:20px;
  margin:5px 5px 5px 0;
  padding:0;
  border-radius:4px;
  font-family:Helvetica,Arial;
  font-size:11px;
  line-height:11px;
  list-style-type:none;
  background-image:none;
}

.mep-container .mep-controls div:first-child {
  margin-left:5px;
}

.mep-container .mep-controls .mep-time {
  display:block;
  width:70px;
  height:17px;
  padding:3px 0 0 0;
  padding:auto 4px;
  overflow:hidden;
  text-align:center;
  color:#fff;
}

.mep-container .mep-controls .mep-time span {
  display:block;
  float:left;
  margin:1px 2px 0 0;
  font-size:11px;
  line-height:12px;
  color:#fff;
}

.mep-controls .mep-playpause-button span,
.mep-controls .mep-volume-button span,
.mep-controls .mep-fullscreen-button span,
.mep-controls .mep-captions-button span {
  display:block;
  width:16px;
  height:16px;
  margin:2px;
  text-decoration:none;
  font-size:0;
  line-height:0;
  background:transparent url(/includes/js/mediaelement/controls.png) 0 0 no-repeat;
  cursor:pointer;
}

.mep-controls .mep-play span {
  background-position:0 0;
}

.mep-controls .mep-pause span {
  background-position:0 -16px;
}

.mep-controls .mep-time-rail {
  width:200px;
}

.mep-controls .mep-time-rail span {
  display:block;
  position:absolute;
  width:180px;
  height:10px;
  border-radius:5px;
  box-shadow:inset 1px 1px 1px rgba(0,0,0,0.5);
  cursor:pointer;
}

.mep-controls .mep-time-rail .mep-time-total {
  margin:5px;
  background:#333;
  background:rgba(50,50,50,50.8);
}

.mep-controls .mep-time-rail .mep-time-loaded {
  background:#3caac8;
  background:rgba(60,170,200,0.8);
}

.mep-controls .mep-time-rail .mep-time-current {
  background:#fff;
  background:rgba(255,255,255,0.8);
}

.mep-controls .mep-time-rail .mep-time-handle {
  display:block;
  display:none;
  position:absolute;
  width:10px;
  margin:0;
  border-radius:5px;
  background:#fff;
  cursor:pointer;
}

.mep-controls .mep-fullscreen-button span {
  background-position:-32px 0;
}

.mep-controls .mep-unfullscreen span {
  background-position:-32px -16px;
}

.mep-controls .mep-captions-button {
  position:relative;
}

.mep-controls .mep-captions-button span {
  background-position:-48px 0;
}

.mep-controls .mep-captions-button .mep-captions-selector {
  visibility:hidden;
  position:absolute;
  bottom:15px;
  left:-80px;
  width:130px;
  padding:10px;
  min-height:50px;
  border:solid 1px #fff;
  border-radius:0;
  background:url(background.png);
  background:rgba(0,0,0,0.8);
}

.mep-controls .mep-captions-button:hover .mep-captions-selector {
  visibility:visible;
}

.mep-controls .mep-captions-button .mep-captions-selector ul {
  display:block;
  margin:0;
  padding:0;
  overflow:hidden;
  list-style-type:none!important;
}

.mep-controls .mep-captions-button .mep-captions-selector ul li {
  display:block;
  margin:0 0 6px 0;
  padding:0;
  overflow:hidden;
  list-style-type:none!important;
  color:#fff;
}

.mep-controls .mep-captions-button .mep-captions-selector ul li input {
  float:left;
  clear:both;
}

.mep-controls .mep-captions-button .mep-captions-selector ul li label {
  float:left;
  width:100px;
  padding:4px 0 0 0;
  font-family:helvetica,arial;
  font-size:10px;
  line-height:15px;
}

.mep-controls .mep-captions-button .mep-captions-translations {
  margin:0 0 5px 0;
  font-size:10px;
}

.mep-controls .mep-mute span {
  background-position:-16px -16px;
}

.mep-controls .mep-unmute span {
  background-position:-16px 0;
}

.mep-controls .mep-volume-button {
  position:relative;
}

.mep-controls .mep-volume-button .mep-volume-slider {
  display:none;
  z-index:1;
  position:absolute;
  top:-115px;
  left:0;
  width:20px;
  height:115px;
  margin:0;
  border-radius:0;
  background:url(background.png);
  background:rgba(0,0,0,0.7);
}

.mep-controls .mep-volume-button:hover {
  border-radius:0 0 4px 4px;
}

.mep-controls .mep-volume-button:hover .mep-volume-slider {
  display:block;
}

.mep-controls .mep-volume-button .mep-volume-slider .mep-volume-rail {
  position:absolute;
  top:8px;
  left:9px;
  width:2px;
  height:100px;
  margin:0;
  background:#ddd;
  background:rgba(255,255,255,0.8);
}

.mep-controls .mep-volume-button .mep-volume-slider .mep-volume-rail .mep-volume-handle {
  position:absolute;
  top:-3px;
  left:-7px;
  width:16px;
  height:6px;
  margin:0;
  border-radius:1px;
  background:#ddd;
  background:rgba(255,255,255,0.9);
  cursor:N-resize;
}

.mep-clear {
  clear:both;
}

/* General Styles */

/* Make sure lists directly after paragraphs are pulled up so there isn't a huge space */

p+ol {
  margin-top:-1em;
}

ol {
  margin-bottom:2em;
}

pre {
  margin-bottom:2em;
  border-radius:10px;
  overflow:auto;
  text-shadow:none;
  font-size:1em;
  color:#fff;
  background:hsl(0,0,20%);
  box-shadow:0 3px 4px hsla(0,0,0,0.5);
}

p+pre {
  margin-top:-1em;
}

.postcontent::-webkit-scrollbar {
  width:12px;
}

/* This is the scrollbar in the code samples */

/* It's really quite nice but very webkit-specific */

/* Track */

.postcontent::-webkit-scrollbar-track {
  border-radius:10px;
  border-radius:10px;
  box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
}

/* Handle */

.postcontent::-webkit-scrollbar-thumb {
  border-radius:10px;
  border-radius:10px;
  background:rgba(0,0,0,0.5);
  box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}

.postcontent::-webkit-scrollbar-thumb:window-inactive {
  background:rgba(0,0,0,0.4);
}

/* Assets */

/* A pretty, white card with curled corners */

.card {
  float:left;
  position:relative;
  width:260px;
  height:150px;
  margin:0 30px 30px 10px;
  padding:0;
  border:1px solid hsl(0,0,94%);
  background:white;
  box-shadow:0 1px 4px rgba(0,0,0,0.27) ,0 0 40px rgba(0,0,0,0.06) inset;
}

.card:before,
.card:after {
  content:'';
  z-index:-1;
  position:absolute;
  bottom:10px;
  left:10px;
  width:70%;
  height:55%;
  max-width:300px;
  box-shadow:0 8px 16px rgba(0,0,0,0.3);
  transform:skew(-15deg)rotate(-6deg);
}

.card:after {
  right:10px;
  left:auto;
  transform:skew(15deg)rotate(6deg);
}

.card p {
  margin:1em 5em 0 1em;
}

.card ul {
  margin:0 5em 1em 1em;
  list-style:none;
}

/* The gingham ribbon drapped over the top-right of the element 
   all done without images.
   True, a repeated background image would actually have been smaller here but that's not the point...
*/

.ribboned::before {
  content:'';
  z-index:1;
  position:absolute;
  top:-11px;
  left:191px;
  width:0;
  height:0;
  border:10px solid #7c9bad;
  border-top:0;
  border-right:0;
  border-bottom-color:transparent;
  background-color:#8a3c3c;
}

.ribboned::after {
  content:'';
  z-index:1;
  position:absolute;
  top:-11px;
  left:201px;
  width:50px;
  height:100px;
  border-radius:0 2px 2px 2px;
  background-color:white;
  background-image:linear-gradient(0,rgba(200,0,0,.5) 50%,transparent 50%),linear-gradient(rgba(200,0,0,.5) 50%,transparent 50%);
  background-size:25px 25px;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}

/* Tooltip (from css-tricks) */

.tooltip:hover,
abbr:hover {
  position:relative;
  color:red;
}

.tooltip[title]:hover:after,
abbr[title]:hover:after {
  content:attr(title);
  z-index:20;
  position:absolute;
  top:-20px;
  left:100%;
  padding:4px 8px;
  border-radius:5px;
  white-space:nowrap;
  color:#333;
  background-image:linear-gradient(top,#eeeeee,#cccccc);
  box-shadow:0 0 4px #222;
}

abbr {
  border-bottom:1px dotted #333;
}

label {
  display:block;
}

input,
textarea {
  margin-bottom:2em;
}

textarea {
  width:100%;
  min-height:200px;
  box-shadow:inset 2px 2px 3px rgba(0,0,0,0.5);
}

/* Apply to all sizes */

html {
  background:url(/layout/thingsinjars/background.png);
}

h1,
h1 a {
  font-family:'Lobster',arial,serif;
}

.lobster {
  font-family:'Lobster',arial,serif;
}

#site_header h1 a {
  text-decoration:none;
  text-shadow:-2px -2px 2px rgba(0, 0, 0, 0.1), 1px 1px 3px rgba(0, 0, 0, 0.1);
  font-variant:normal;
  font-weight:normal;
  color:white;
}

#site_header h1 a:hover {
  text-shadow:-2px -2px 2px rgba(0, 0, 0, 0.1), 1px 1px 3px rgba(0, 0, 0, 0.1), -1px -1px 0 rgba(0, 0, 0, 0.3), 0 0 3px white;
}

#site_header img {
  position:absolute;
  width:128px;
  height:128px;
}

#related-smodule-384 {
  width:250px;
}
#related-smodule-384 .card {
  float:none;
  width:100%;
  height:auto;
  border:5px solid #F5F3F1;
}

#related-smodule-384 h2 {
  margin:0.4em 0 0 0.1em;
  font-family:Georgia,serif;
  font-size:2em;
}

#related-smodule-384 h2 a {
  text-decoration:none;
  font-weight:normal;
}

#related-smodule-384 p {
  margin:1em 0.5em 0 0.5em;
  font-family:georgia,serif;
}
#related-smodule-384 img {
  width:100%;
}

#site_header {
  min-width:620px;
}

#site_header h1 {
  margin-left:125px;
  padding-top:10px;
  text-align:left;
  font-size:6em;
}

#site_header img {
  display:block;
}

#site_header,
body > footer {
  height:190px;
  background:url(/layout/thingsinjars/shelf.png) 0 100% repeat-x;
}

#wrap {
  max-width:1324px;
  overflow:hidden;
}

#content {
  float:left;
  width:66%;
  min-width:430px;
}

#related {
  display:block;
  float:right;
  width:33%;
  margin-top:1.5em;
  min-width:220px;
}

#elsewhere {
  position:absolute;
  top:210px;
  left:0;
  width:94px;
  height:450px;
  min-width:0;
  background:url(/layout/thingsinjars/cork-board.png) 100% 0 no-repeat;
  box-shadow:0 7px 10px hsla(0,0,0,0.75);
}

#elsewhere ul {
  margin-top:40px;
  margin-left:20px;
}

#elsewhere ul li {
  display:list-item;
  width:42px;
  height:50px;
  margin-bottom:0.2em;
  padding-top:2px;
}

#elsewhere ul li:hover {
  padding-top:0;
  padding-bottom:2px;
}

#content > ul {
  margin-top:1.5em;
  /*margin-left:9em;*/
}

body > footer > p {
  position:absolute;
  top:100px;
  left:210px;
  text-shadow:-1px -1px 1px hsla(0,0,0,0.5);
  font-family:georgia;
  font-size:20px;
  font-style:italic;
  color:white;
}

body > footer:before {
  content:'';
  z-index:1;
  position:relative;
  position:absolute;
  top:52px;
  left:150px;
  width:50px;
  height:24px;
  background-color:#7D7D7D;
  background-image:linear-gradient(0,rgba(179,20,20,.5) 50%,transparent 50%),linear-gradient(rgba(179,20,20,.5) 50%,transparent 50%);
  background-position:0 -170px;
  background-position:0 5px;
  background-size:25px 25px;
  box-shadow:0 12px 16px rgba(0,0,0,0.3);
}

body > footer:after {
  content:'';
  z-index:1;
  position:relative;
  position:absolute;
  top:76px;
  left:150px;
  width:50px;
  height:100px;
  background-color:white;
  background-image:linear-gradient(0,rgba(200,0,0,.5) 50%,transparent 50%),linear-gradient(rgba(200,0,0,.5) 50%,transparent 50%);
  background-position:0 -170px;
  background-size:25px 25px;
  box-shadow:0 12px 16px rgba(0,0,0,0.3);
}

.article_headline {
  font-size:30px;
}

.article_headline2,
h2 {
  font-size:16px;
  line-height:20px;
}

#process #content>h2 {
  margin: 0 0 0 117px;
  text-align: center;
  background: #A3F067;
  width: 758px;
  height: 20px;
  border: 1px solid #1E811A;
}

#content > ul {
  list-style:none;
}

#content > ul > li {
  position:relative;
  margin-bottom:2em;
  padding:40px;
  min-height:640px;
  background-color:#f3ede1;
  background-image:url(/layout/thingsinjars/body-base.png);
  background-position:0 0;
  background-repeat:repeat;
  box-shadow:0 7px 10px rgba(0,0,0,0.75);
}

#content > ul > li::before,
#content > ul > li::after {
  content:'';
  z-index:-1;
  position:absolute;
  top:10px;
  left:0;
  width:10%;
  height:200px;
  box-shadow:0 12px 20px rgba(0,0,0,0.7);
  transform:rotate(-2deg);
  transform-origin:top left;
}

#content > ul > li:after {
  right:0;
  left:auto;
  height:200px;
  max-width:300px;
  transform:rotate(2deg);
  transform-origin:top right;
}

.newer-older {
  margin-left:9em;
}

.newer-older ul {
  list-style:none;
}

.newer-older ul li a {
  text-decoration:none;
  text-shadow:-1px -1px 0 hsla(0,0,0,0.3);
  font-family:'Lobster',georgia,serif;
  font-size:30px;
  color:white;
}

.newer-older ul li a:hover {
  text-shadow:-1px -1px 0 hsla(0,0,0,0.3) ,0 0 3px white;
}

.newerlink {
  float:right;
  margin-right:30px;
}

article header h1 {
  text-align:center;
  text-shadow:0 1px 0 white;
  font-size:30px;
  color:#5b4e3d;
}

article header h1 a {
  text-decoration:none;
  color:#5b4e3d;
}

article footer {
  padding-top:0.5em;
  padding-bottom:0.5em;
  border-bottom:2px solid hsl(34,20%,30%);
  overflow:hidden;
}

article footer time {
  float:left;
  text-shadow:0 1px 0 white;
  color:#418787;
}

article footer time a {
  color:#418787;
}

article footer p {
  float:right;
  text-shadow:0 1px 0 white;
  color:#ac5252;
}

article footer p a {
  color:#ac5252;
}

.postcontent {
  margin:2em;
  max-width:42em;
  text-shadow:0 1px 0 white;
  font-family:georgia,serif;
  font-size:1.125rem;
  line-height:1.7;
}

.postcontent p,
.postcontent ul {
  margin-bottom:1.5em;
}
.postcontent p code {
  background-color: #F5F5CE;
  outline: 1px solid #BBB;
  padding: 1px;
}

.postcontent img,
.postcontent iframe {
  max-width:100%;
}

.postcontent aside {
  margin-bottom:2em;
  padding:0 1em 1em 1em;
  border-width:7px;
  border-image:url(/layout/thingsinjars/aside-bg.png) 8 7 7 7 stretch;
}

.postcontent p+aside {
  margin-top:-1em;
}

aside.comments {
  border-top:2px solid hsl(34,20%,30%);
  border-image:none;
}

aside.comments h1 {
  text-align:center;
  font-size:1.31em;
}

aside.comments h1 a {
  color:#616161;
}

figure {
  margin-bottom:2em;
  padding:1em;
  border-width:7px;
  text-align:center;
  border-image:url(/layout/thingsinjars/aside-bg.png) 8 7 7 7 stretch;
}

figcaption {
  font-style:italic;
  color:#6E5930;
}

.postcontent blockquote {
  margin:1em 1em 1em 1em;
  padding:1em;
  border-width:7px;
  font-size:1.3em;
  color:#666;
  border-image:url(/layout/thingsinjars/aside-bg.png) 8 7 7 7 stretch;
}

.postcontent blockquote p {
  margin-bottom:0;
}

.postcontentblockquote:before {
  content:"\201C";
  display:block;
  margin:37px 0 -37px 0;
  text-shadow:none;
  font-size:5em;
  font-weight:bold;
  line-height:0;
  color:rgba(0,0,0,0.1);
}

#related-smodule-337 {
  width:281px;
  height:395px;
  padding-top:25px;
  background:url(/layout/thingsinjars/notepaper.png) 0 0 no-repeat;
}

#related-smodule-337 p {
  margin:0 16px 15px 48px;
  line-height:15px;
}

#about,
#about h1,
#about p,
#about li {
  font-family:georgia,serif;
}

#about h1 {
  margin-bottom:0;
  margin-left:48px;
  font-size:1em;
  font-weight:bold;
  line-height:15px;
}

#about ul {
  margin-bottom:15px;
  margin-left:48px;
  padding:0;
  list-style:none;
}

#about li {
  margin:0;
  line-height:15px;
}

.gallery {
  margin:1em 0 2em 0;
  padding:1em;
  border-width:7px;
  overflow:hidden;
  border-image:url(/layout/thingsinjars/aside-bg.png) 8 7 7 7 stretch;
}

.gallery li {
  display:inline-block;
  margin:10px;
}

.gallery li a:hover img {
  transition:all .2s linear;
  transform:scale(1.1);
}

.admin,
#content > ul > li .admin {
  display:none;
  position:absolute;
  top:0;
  left:0;
  margin:0;
}

#content > ul > li:hover .admin {
  display:block;
}

.admin li {
  display:inline;
  color:white;
  background:black;
}

.admin li a {
  color:white;
}

#twitter li {
  overflow:hidden;
}

#twitter li > a {
  display:block;
}

body > footer {
  position:relative;
  background-position:0 -170px;
}

#related-smodules #related-smodule-230,
#related-smodules #related-smodule-32 {
  border-radius:3px 5px 1px 2px;
  background:linear-gradient(left,rgba(168,142,94,0.5) ,rgba(200,175,133,0.3) ),url(/includes/js/mediaelement/noise.png) 0 0 repeat,linear-gradient(1deg,transparent,transparent 10%,rgba(163,138,91,0.8) 10%,transparent 13%),linear-gradient(left,#ad966b,#a78d5d 4%,#c9af86,#d5c1a0 92%);
  background-color:#b89d6a;
  background-size:51px 100%,auto,20% 100%,21px 100%;
  box-shadow:4px 4px 4px rgba(0,0,0,0.3);
}

/* Smaller only */
@media screen and (max-width:950px) {
    #site_header img,
  #related-smodule-384 {
    display:none;
  }

}

@media screen and (max-width:700px),
screen and (max-device-width:700px) { 
  html,
  body {
    width:100%;
  }
  
  #site_header {
    width:100%;
    height:120px;
    min-width:0;
  }
  
  #site_header h1 {
    margin:0;
    text-align:center;
    font-size:3em;
  }
  
  #site_header img,
  #related-smodule-384 {
    display:none;
  }
  
  #elsewhere {
    top:95px;
    width:100%;
    height:50px;
    min-width:430px;
    text-align:center;
    background:none;
    box-shadow:none;
  }
  
  #elsewhere ul {
    width:480px;
    margin:0.5em auto 0 auto;
  }
  
  #elsewhere ul li {
    display:inline;
    margin:5px;
  }
  
  #related {
    display:none;
  }
  
  #twitter {
    display:none;
  }
  
  #wrap {
    width:100%;
    min-width:0;
  }
  
  #content {
    float:none;
    width:100%;
    margin-left:0;
  }
  
  #content > ul {
    margin:30px 20px;
  }
  
  .postcontent {
    margin:1em;
    font-size:1rem;
  }
  
  .postcontent p {
    margin:0 0 1em 0;
  }
  
  .postcontent ul,
  .postcontent ol {
    margin:0 0 1em 1em;
  }
}

/* Make the assumption larger screens are on a better connection */

@media only screen and (min-width:880px) {  
  #content > ul > li {
    background-image:url(/layout/thingsinjars/body-6.png) ,url(/layout/thingsinjars/body-5.png) ,url(/layout/thingsinjars/body-4.png) ,url(/layout/thingsinjars/body-3.png) ,url(/layout/thingsinjars/body-2.png) ,url(/layout/thingsinjars/body-1.png) ,url(/layout/thingsinjars/body-base.png);
  }
}