html, body, body.modern {
  margin: 0;
  padding: 0;
}
body, body.modern {
  background: #fff url(/images/2006/slash.png) repeat-y left top;  
  color: #000;
  text-align: center;   
  font-family: Arial, Helvetica, Verdana, sans-serif;
  font-size: 0.92em;
}

/* -------------------------- 
   =LAYOUT 
   -------------------------- */
   
#container {
  position: relative;  
  background: url(/images/2006/slash.png) repeat-y right top;  
  text-align: left;  
}
#branding {
  position: absolute;
  left: 240px;
  top: 110px;  
  z-index: 101;   
}
div#main-nav { 
  background: ;
  height: 45px;  
  /*left: 50%;
  margin-left: -300px; */
  top: 55px;  
  left: 50px;
  position: absolute;
  z-index: 100; 
}

#wrapper {
  float: left; 
  background: url(/images/2006/kidtop.jpg) repeat-x left top;  
}

#content {
  float: right;
  margin: 0 220px;
}

#secondary-nav {
  float: left; 
  width: 200px;
  margin-top: 150px;
  margin-right: -200px;

}
#ancillary {
float: left;
width: 200px;
margin-top: 150px;
margin-left: -200px;
}
#site-info {
  clear: both;
}

/*  --------------------------
  =MAIN ELEMENTS 
  ---------------------------- */

input, select, textarea {
  font-size: 0.95em;
  font-family: Arial, Helvetica, Verdana, sans-serif;
}
p, pre, ul, ol, dl, address {
  margin: 0 0 1em;
  padding: 0;
}
li, dd, blockquote {
  margin-left: 1.2em;
}  

h2 {
  margin: 0; 
  padding-top: 1em; 
  font-size: 1.3em;
  color: #363636;
}
h3 {
  margin: 1em 0;
  font-size: 1em;
  color: #363636;  
}  
h3.date {
    margin: 0 0 1em 0;
  font-weight: normal;
}
h4, h5, h6 {
  margin: 1em 0 0 0;
  color: #555;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: normal;
  margin-bottom: 5px;
}
#main-content h4 {
  font-weight: bold;
  color: #855024;
}

/* IMAGES
------------------- */
img {
  border: 0;
}
#content img {
  border: 1px solid #999;
  padding: 3px;
  margin: 0px 5px 5px 0px;
}
#content img.icon {
  border: 0;
  margin: 0;
  padding-bottom: 0;
}
.left {float: left;}
.right {float: right;}
img.left {position: relative; padding-right: 5px;}
img.right {position: relative; margin-left: 5px; }
#content img.plain {border-width: 0;}

/* other elements */


blockquote {
  margin-left: .5em;
  padding: 0 .5em;
  background: #fae6aa;
  border-top: 1px solid #855024;
  border-bottom: 1px solid #855024;  
}
blockquote p,
blockquote li {
  margin-top: .7em;
  margin-bottom: .7em;
}

acronym, abbr {cursor: help;}
code {color: #c00; font-family: monospace;}

ins {color: #090; text-decoration: none; font-style: italic;}
del {color: #f00;}


/* ---------------------------
   =MAIN DIV STYLES 
   --------------------------- */
.clear {clear: both;}

/* BRANDING */

h1 {
  margin: 0;
  padding: 0;
  font-size: 1em;
}
h1 a {
  display: block;
  width: 111px;
  height: 67px;
  text-indent: -9000px;
  background: url(/images/2006/logo-modern.gif) no-repeat left top;
  overflow: hidden;
}
h1 a:hover {
  background: url(/images/2006/logo-modern.gif) no-repeat 0 -67px;  
}
  

/* MAIN NAV */   
#main-nav ul {
  margin-top: 19px;
  margin-left: 25px;
  list-style-type: none;
}
#main-nav li {
  float: left; 
  margin: 0;
  padding: 0;
}
#content #main-nav a {
  padding: 10px;
  border-left: 2px solid #fff;  
  color: #ccc;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
}  
#content #main-nav a.home {
  border-left: 0;
} 
#main-nav a:hover {
  background: #000;
}    
#main-nav li#currentsection a {
  color: #fff;
}  

/* CONTENT AREA */

#content a {
  color: #6b7b56;  
  text-decoration: none;
  font-weight: bold;
}
#content a:hover {
  text-decoration: underline;
}
#main-content {
  padding: 170px 20px 10px;
  color: #000;
}
#home.english-rules #main-content {
    padding: 240px 20px 10px;
}
#secondary-content {
  clear:both;
  margin-top: 10px;
  padding: 10px 20px;
  font-size: .95em;
}
#secondary-content h2 {
  margin-top: 1.5em;
}
.entry-footer {
  font-size: .90em;
  text-align: right;
  clear: both;
}  
.divide {
  background: #fff url(/images/2006/modern-divide.gif) no-repeat center top; 
  padding-top: 16px;
  margin-top: 5px;
  width: 100%;
}  
#main-content img.fancy-letter {
  border: 0;
  float: left;
  display: inline;
  margin: -4px 0 0 0;
}
.poem {
  font-family: Times, "Times New Roman", serif;
  margin-left: 20px;
}
dl.dialogue dt {
  font-weight: normal;
  color: #666;
  margin-left: 1.5em;
  padding-left: 0;
}
dl.dialogue dd {
  margin: 0 0 .5em 2em;
  padding-left: 0;
}

.disclaimer {
  font-size: .8em;
  color: #999;
}
.back {
  text-align: right;
}
#main-content .back a {
  font-weight: normal; 
  text-decoration: underline;
}

/* =SECONDARY NAV AND ANCILLARY */

#ancillary {
  position: relative;
}
#secondary-nav ul,
#ancillary ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
  font-size: 12px;
  color: #000;
  padding-right: 10px;
}

#secondary-nav h4,
#secondary-nav p,
#ancillary h4,
#ancillary p {
  margin-left:18px;
  padding-right: 10px;
}
#secondary-nav li,
#ancillary li  {
  margin: .25em 0 .25em 18px;
  padding: 0;
}  
#secondary-nav a,
#ancillary a {
  display: block;
  color: #514b6c;
  text-decoration: none;
}  
#secondary-nav a {
  width: 106px;
}  
ul.extras li a {
  width: 120px;
}  
#secondary-nav a:hover,
#ancillary li a:hover {
  color: #777;
}
#secondary-nav li#currentpage a,
#ancillary li#currentpage a {
  color: #777;
  margin-bottom: 5px;
  background: url(/images/2006/current.gif) no-repeat left bottom;
}
#secondary-nav input#search {
  width: 85px;
  border: 1px solid #aaa;
}
#secondary-nav input {vertical-align: bottom;}

#recent-comments {
  color: #000;
  font-size: 12px;
}
#recent-comments h4 {
  margin-top: 2em;
  margin-bottom: 1em;
}
#site-info {
  padding: 35px 220px 15px 176px;
  background-color: #6b7b56;
  color: #dedede;
  font-size: 11px;
}
#site-info a {
  color: #fff;
}
/* -------------------
   =MODULE STYLES
   ------------------- */

/* =LATEST WORD */
.wotd {
  position: absolute;
  height: 130px;
  overflow: hidden;
  right: 240px;
  top: 110px;
  width: 380px;
  padding-left: 20px;
  color: #6b6b6b;
  border: 1px solid #ccc;
}

#content .wotd h4 a {
  font-size: 11px;
  text-transform: uppercase;
  color: #6b7b56;
}
.wotd dt {
  margin-top: 15px;
  text-transform: uppercase;
}
.wotd dd {
  font-size: 11px;
  margin-left: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

#content .wotd dl a {
  color: #6b7b56;
}
/* =LATEST PHOTO */
#latest-photo {

  margin-left: 5px;
}
#latest-photo a {
  position: relative;
  display: block;
  width: 160px;
  height: 190px;

  text-decoration: none;
}
#latest-photo a img {
  position: absolute;
  top: 0;
  padding: 10px;
  width: 140px;
  height: 105px;
}
#latest-photo a span {
  position: absolute;
  display: block;
  top: 15px;
  left: 18px;
  width: 120px;
  border: 1px solid #999;
  text-transform: uppercase;
  font-size: 11px; 
  padding: 110px 0 5px 20px;
}

/* =BOOKSHELF */
#bookshelf {
  width: 140px;
  padding-left: 0;
  margin-left: 22px;
  border: 1px solid #aaa;
}
#bookshelf .now-reading {
  
}
#bookshelf ul {
  margin-left: 12px;
  padding-left: 0;
  text-align: center;
}
#bookshelf li {
  float: left;
  margin-left: 0;
  padding-left: 0;
}
#bookshelf h4,
#bookshelf h5 {
  margin-left: 0;
  padding-top: 3px;
  padding-left: 0;
  text-align: center;
}
#bookshelf h4 {
  margin-top: 6px;  
}
#bookshelf h5 {
  margin-top: 3px;
  clear: left;
  margin-bottom: 0;
  text-transform: none;
}
#bookshelf img {
  width: 54px;
  height: 76px;
}
#bookshelf a {
  position: relative;
  display: block;
}

#ancillary #bookshelf li a:hover {
  background: none;
}

/* MY BOOKSHELF PAGE */
#my-bookshelf #content img {
  width: 105px; 
  height: 160px;
}
/* NOTEWORTHY ARTICLES PAGE */

#noteworthy-articles h3 {
  margin-bottom: 0;
}

/* ----------------------------
   =COMMENTS 
   ----------------------------*/
h4.comments-header {
  font-weight: bold;
  color: #000;
  display: block;
  width: 100%;
}

.comment-by {
  position: relative;
  color: #fff;
  background: #6b7b56;
  padding: 3px 20px;
}
.c-karl .comment-by {
  background: #6b7b56;
}
.comment-by span.comment-number {
  position:absolute;
  font-family: times,"times new roman",serif;
  top: -2px;
  left: -40px;
  padding: 5px;
  font-size: 24px;
  color: #000;
  font-weight: bold;
}
.comment-by > span.comment-number {
  left: -20px;
}

#secondary-content .comment-by a {
  color: #fff;
  text-decoration: underline;
}
.comments-odd, 
.comments-even {
  margin-bottom: .5em;
  width: 100%;
  float: left;
}
.comments-even {
 background: #efefef;
}
.comments-odd p, 
.comments-even p {
  padding: .6em 20px 0px;
}

p.comment-date {
  text-align: right;
  font-size: .95em;
  margin-bottom: 2px;
}  

/* TABLES WITHIN CONTENT 
---------------------------
*/
#content table {
  border: 1px solid #6b7b56;
  margin-bottom: 1em;
}
#content table caption {
  font-weight: bold; 
  margin: 1px;
}
#content thead tr {
  color: #fff; 
  font-weight: bold; 
  background: #6b7b56; 
}
#content thead td {
  vertical-align: bottom;
}
#content tr.alt {
  background: #ededed;
}
#content td {
  padding: 3px;
}
#content td.rowhead {
  font-weight: bold; 
  text-align: right;
}
#content table.aligntop tbody td {
  vertical-align: top;
}

#content table.plain {
  border: 0;
}
#content table img {
  border: 0;
}

/* ----------------------------
   =FORMS 
   ---------------------------- */

.formwrap label {
  display: block;
}
.formwrap .radiobuttons label {
  display: inline;
}
.formwrap .radiobuttons {
  margin-bottom: 1em;
}

legend {
  margin-left: -.5em;
  padding-left: 0;  
  font-weight: bold;
  color: #000;
}
fieldset > legend {
  margin-left: 0;
}  
/* =comment form */
#comments-open {
  margin-top: 1.2em;
  padding-top: 1.5em;
  background: url(/images/2006/modern-divide.gif) no-repeat center top;
  clear: left;
}

#comments-open fieldset,
#secondary-content fieldset {
  border: 0;
}

#comments-open label {
  display: block;
}
#comments-open input[type="text"] {
  width: 200px;
  border: 1px solid #6b7b56;
}

#comments-open textarea {
  width: 370px;
  border: 1px solid #6b7b56;
  display: block;
}
#addsubscriber {
  background: #fff url(/images/2006/modern-divide.gif) no-repeat center top; 
  padding-top: 16px;
}

/* ----------------------------
   =WORD OF THE DAY 
   ---------------------------- */

.word-of-the-day dt {
  margin-top: 1em;
  font-weight: bold;
  text-transform: uppercase;
}
.word-of-the-day .wotddate {
  font-weight: normal;
  font-size: .85em;
  color: #999;
  text-transform: none;
}
.word-of-the-day dd {
  margin-top: .5em;
  padding-top: 1em;
}
.word-of-the-day dd.definition {
  background: url(/images/2006/definition.gif) no-repeat 0 .2em;
}
.word-of-the-day dd.inspiration {
  background: url(/images/2006/inspiration.gif) no-repeat 0 .2em;
}   


/* ----------------------------
   =PHOTOGRAPHY
   ---------------------------- */

#photo-blogroll.photos h3 {
  text-transform: uppercase;
  margin-bottom: 0;
}

#photo-blogroll.photos p {
  color: #666;
  font-size: .9em;
}

ul.thumbs {
  list-style: none;
  margin: .5em 0;
  padding: 0;
}
ul.thumbs li {
  float: left;
  display: inline;
   margin: 0 18px 10px 0;
}


/*

#photo-entry #secondary-content {
  margin-right: 20px;
  margin-left: 20px;
}
#photo-entry #content {
  width: 624px;
  margin-top: 45px;
background-color: transparent;
  margin-right: 0px;
}

#photo-entry .entry-footer {
  position: absolute;
  top: 220px;
  right: 40px;
}

*/
/* ----------------------
   =SEARCH RESULTS 
   ---------------------- */
.photosearch {
  float: left;
  padding: 10px;
}

/* EXPERIMENTATION */

#keyhole {
  position:absolute;
  top:0;
  left: 0;
  z-index: 400;
}
#keyhole a {
  text-indent: -9000px;
  display:block;
  width:83px;
  height:100px;
  overflow: hidden;
}
#keyhole a:hover {
  background: url(/images/2006/kidtop-color.jpg) no-repeat;
}

a#lucy-martian  {
  display: block;
  background: url(images/2006/lucy-martian.jpg) no-repeat 0 0; 
  width: 150px;
  height: 150px;
  text-indent: -9000px;
}
a#lucy-martian:hover {
  background: url(images/2006/lucy-martian.jpg) no-repeat 0 -150px; 
  cursor: help;
}

#widescreen {
  display: none;
}
/* ----------------------------
=Alsett Clearing Method for floats 
-------------------------------*/  
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }
.clearfix {display: inline-block;}
/* backslash hack hides from IE Mac \*/
	* html .clearfix {height: 1%;}
	.clearfix {display: block;}
/* end backslash hack */