body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}

body {font:13px verdana,clean,sans-serif;*font-size:small;*font:x-small;}
table {font-size:inherit;font:100%;}
select, input, textarea {font:99% verdana,clean,sans-serif;}
pre, code {font:115% monospace;*font-size:100%;}
body * {line-height:1.64em;}

img {display:block;}

body
{
  /*background-image: url(../graphics/vert-grid-21px.png);*/
  background-color: #fff;
  color: #000;
}

#page
{
  /*background-color: #ffffee;
  background-image: url(../graphics/960-5col-grid.png);
  background-position: top left; */
  background-image: url(http://thinkingandmaking.com/graphics/home-grid-overlay.png);

  border: 1px solid #300;
  margin: auto;
  margin-top: 20px; /* actual margin=42. 1 px taken by border */
  margin-bottom: 20px;
  padding-top: 21px;
  width: 958px; /* actual width=960. 2px taken by border */
}

#content h1, #content h2, #content h3, #content p, #content ul, #content ol, #content blockquote, #content code, #content table
{
  margin-left: 203px; /* actual=192 + 11px which is 1/2 of 21px */
  margin-right: 298px; /* actual = 288 +10px which is 1/2 of 21px */ 
}
#content h1, #content #title p
{
  line-height: 1em;
  margin-right: 103px; /* actual=96px. +7px for gutter */
  margin-bottom: 1em;
}
#content p
{
  margin-bottom: 1.64em;
}
#content blockquote
{
  margin-top: 0;
  margin-bottom: 0;
}
#content blockquote p
{
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.9em;
  font-family: georgia;
}

#content div.meta, #content p.sidenote
{
  float: left;
  width: 182px; /* actual width=192. -10px for right gutter, 21px for left gutter as padding-left in paras  */
}
#content div.meta p, #content div.meta h1, #content div.meta h2
{
  margin: 0 0 1.9em 0; /* overides default margins */
  padding-left: 20px; /* actual left is 21px. border takes 1px */
  text-align: right;
}
#content p.sidenote
{
  margin: 0; /* overides default margins */
  margin-left: 20px; /* actual left is 21px. border takes 1px */
  text-align: right;
  width: 161px; /* actual = 192, -42 for gutters */
}


#content div.illustration
{
  background-color: #fff;
  border: 1px solid #ccc;
  float: right;
  margin: 0 20px;
  text-align: center;
  width: 436px;
}
#content div.illustration img
{
  margin: auto;
  margin-top: 20px;
}
#content div.illustration a img
{
  border-bottom: 0;
  border: 1px solid #fff;
}
#content div.illustration a:hover img
{
  border: 1px solid #900;
}
#content div.illustration p
{
  margin: 0 20px 14px 20px; /* actual=21px. border is 1 */
  text-align: left;
}




/* TYPOGRAPHY
---------------------------------------- */
a
{
  border-bottom: 1px dotted;
  color: #069;
  text-decoration: none;
}
a:hover
{
  color: #900;
}
em
{
  font-style: italic;
}
abbr
{
  border-bottom: 1px dotted #c00;
  cursor: help;
}
#content h1
{
  font-size: 1.64em;
  font-family: georgia;
}
#content h2
{
  font-weight: bold;
}

/* 11/21 */
#content div.meta p, #content div.meta h2, #content div.meta h1, #content p.sidenote, .illustration p, #footer p
{
  font-size: 85%;
  font-weight: normal;
  line-height: 1.91em;
}
#content div.meta h1
{
  font-weight: bold;
  text-transform: uppercase;
}


/* COLOR
---------------------------------------- */

/* mid-gray */
#content div.meta p, #content div.meta a, #footer p
{
  color: #666;
}
#content div.meta h1, #content div.meta h2
{
  color: #600;
}
#content p.sidenote, .illustration p
{
  color: #666;
}

#content div.meta a
{
  border-color: #999;
}
#content div.meta a:hover
{
  border-color: #900;
  color: #900;
}

#footer p
{
  margin-right: 0;
}