body {
  font-size: 14px;
  font-family: verdana, arial, sans-serif;
  color: #222;
  background-color: #f7f7f7;
}

body.home {
   background-image: url(/media/templates/johnj/img/orb.gif);
   background-repeat: no-repeat;
}

body.home div#nav ul.nav0 {
   position: absolute;
   left: 400px;
   padding: 0 0 0 0;
   top: 90px;
   margin: 0;
   background-color: #f7f7f7;
   border: none;
   font-size: 16px;
   line-height: 1.4em;
}

body.home div#logo a {
   background-image: url(/media/templates/johnj/img/johnj-com.gif);
   background-repeat: no-repeat;
   position: absolute;
   left: 385px;
   top:  10px;
   margin-top: 0px;
   width: 250px;
   padding-bottom: 35px;
   border-bottom: none;
}


div#logo a#logo span, div#logo a span { 
   display: none; 
}

h1#title span#title {
   display: none;
}

div#logo a {
   background-image: url(/media/templates/johnj/img/johnj-com.gif);
   background-repeat: no-repeat;
   position: absolute;
   left: 0px;
   top:  5px;
   margin-top: 10px;
   width: 250px;
   padding-bottom: 35px;
   border-bottom: none;
}

div#logo a.offset {
   left: 251px;
   margin-top: 0px;
   padding-bottom: 35px;
   float: left;
   border-bottom: none;
}

h1 {
    font-size: 1.3em;
    color: red;
}

h2 {
    font-size: 1.1em;
    color: #444;
}

h3 {
    font-size: 1.0em;
    color: #444;
}

a:hover {
  color: red;
  background-color: #ffe4e1;
}

a.external, a[href ^="http://"], a[href ^="https://"] {
   background: url(/media/templates/johnj/img/external-link.gif) right center no-repeat;
   padding-right: 12px;
}

a {
   color: #444444;
   border-bottom: dotted 1px #8A8A41;
   text-decoration: none;
}

a img, a.noline {
   border: none;
}

a.selected { color: red; }

a.flickr {
   background: none;
   padding-right: 0px;
   text-decoration: none;
   border-bottom: none;
}



div#home {
   position: absolute;
   left: 153px;
   top: 250px;
   width: 80%;
   max-width: 500px;
   color: #444430;
   padding: 0 0 0 0;
   line-height: 1.7em;
}


div#home #recent {
   margin-top: 5em;
   margin-bottom: 1em;
   width: 600px;
}

div#home #recent strong {
   color: red;
}

div#rss-link {
    margin-top: 10px;
}

a.rss {
    color: red;
    background: url(/media/templates/johnj/img/feed-icon-14x14.png) right top no-repeat;
    padding-right: 17px;
    border-bottom: none;
}

div.nav {
   top: 2em;
   position: absolute;
   left: 1em;
   margin-top: 2em;
   margin-left: 5px;
   margin-right: 4em;
   width: 200px;
   float: left;
}

div#nav ul {
   padding-left: 5px;
   margin: 10px;
}

div#nav ul li {
   list-style-type: none;
}
div#nav a:link, div#nav a:visited {
   text-decoration: none;
   border-bottom: none;
}
div#nav a:hover {
   color: red;
   font-style: bold;
   font-size: 1.1em;
}
#nav .nav1, #nav .nav2 {
   padding-top: 1em;
}
div.copyright {
   clear: both;
   font-style: italic;
   padding-top: 4em;
   font-size: 10px;
   padding-bottom: 1em;
   padding-left: 8px;
}
body.home div.copyright {
   display: none;
}

div.offset div.copyright {
   padding-left: 260px;
}

div#user {
   text-align: right;
   font-size: 9px;
   float: right;
}
div#header {
   height: 3em;
}
#posts {
   margin-top: 3em;
}
div#edit {
   background-color: #ffe4e1;
}
body.home div#edit {
   position: absolute;
   top: 750px;
   width: 900px;
   left: -200px;
   z-index: 5;
}

p.blogPageRef {
   margin-top: 0px;
}

/* 
 Stuff from http://www.alistapart.com/articles/holygrail and
 http://www.gerd-riesselmann.net/development/the-holy-grail-css-layout-fix-for-ie7

CC padding 10px 20px
LC fullwidth 180px
RC width 150

*/

body {
   min-width: 610px;         /* 2 x (LC fullwidth + CC padding) + RC fullwidth */
   padding-top: 0px;
   margin-top: 0px;
}

#container {
   margin-top: 20px;
}

.offset #container {
   padding-left: 240px;      /* LC fullwidth */
   padding-right: 90px;     /* RC fullwidth + CC padding */
}

#container .column {
   position: relative;
   float: left;
}

#postnav {
   padding-top: 0px;
   padding-right: 10px;
   padding-bottom: 0px;
   padding-left: 8px;      /* CC padding */  
   width: 100%;
   border: none;
}

.offset #postnav {
   padding-left: 20px;      /* CC padding */  
}

#postnav h1 {
   padding-top: 0px;
   margin-top: 0px;
}

#nav {
   border: none;
   width: 220px;             /* LC width */
   padding: 0 10px;          /* LC padding */
   margin-left: -100%;
   left: 50px;              /* RC fullwidth for IE6 */
}

#container > #nav {
   left: -280px;             /* -(LC fullwidth + CC padding) */
   margin-left: expression(
       document.all.postnav.offsetWidth * -1 +
       parseFloat(document.all.postnav.currentStyle.paddingLeft) +
       parseFloat(document.all.nav.currentStyle.paddingLeft) +
       parseFloat(document.all.nav.currentStyle.paddingRight)
   ); /* Fix for IE7 */
}

#nav .nav0 {
   padding-top: 0px;
   margin-top: 2px;
}

#rightcolumn {
   width: 30px;             /* RC width */
   padding: 0 10px;          /* RC padding */
   margin-right: -100%;
}

#footer {
   clear: both;
}

div.caption {
   font-size: 10px;
   font-style: italic;
   margin-top: -1.4em;
   margin-bottom: 1em;
   width: 50em;
}

.updated {
   color: #999;
}

.post {
   margin-top: 50px;
}

form p label {
   width: 8em;
   float: left;
   text-align: right;
   margin-right: 0.5em;
   display: block
}

.grey {
   color: #888;
}

span.shortdesc, span.shortdesc-separator {
   display: none;
}

body.home span.shortdesc {
   display: inline;
   margin-left: 5px;
   font-style: italic;
   font-size: 10px;
   color: #999;
}

span.sdsep {
   color: #AAA;
   margin-right: 4px;
}

div#posts div.page_info {
   margin-top: 3em;
   margin-bottom: 3em;
   font-size: 18px;
}