/*---------------------------------------------------------------------------------------------*/
/* Header tags inside posts */
.entry h1, .entry h2, .entry h3 {
  color: #777;
}

.entry h1 {
  font-size: 22px;
}

/*---------------------------------------------------------------------------------------------*/
/* Commenting form */
#comment-form-area {
  background: #FAFAFA;
  border: 1px solid #DDD;
  padding: 10px;
}

#comment-form-area td {
  vertical-align: top;
}

#comment-form-area td.label {
  width: 100px;
  text-align: right;
  padding-right: 10px;
}

#comment-form-area td.content {
  width: 600px;;
}

/*---------------------------------------------------------------------------------------------*/
/* Comments + different style for my comment */
span.comment-number {
  color: #c00;
  float: left;
  font-size: 1.6em;
  font-weight: bold;
}

.comment-content {
  border-left: solid 1px #ddd;
  margin-left: 35px;
  padding: 0 0 0 15px;
}

.comment-header {
  font-size: 10px;
  color: #999;
}

.mycomment .comment-content {
  background: #FFFBC9;
}

/*---------------------------------------------------------------------------------------------*/
/*lists with a thumbnail picture */
ul.thumbnailList {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
  border-top: 2px solid #DDD;
  margin-top: 20px;
}

ul.thumbnailList li {
  clear: left;
  /*background: #E1F0FF;
    border:1px solid blue;*/
  border-bottom: 2px solid #DDD;
  margin: 6px;
  padding: 6px;
  height: 160px;
}

ul.thumbnailList li img {
  float: left;
  margin-right: 15px;
  border: 2px solid #888;
}

ul.thumbnailList a.thumbnail:hover {
  border: 2px solid red;
}

ul.thumbnailList a.title {
  font-weight: bold;
  display: block;
}

/*---------------------------------------------------------------------------------------------*/
/* The "overview" section at the top of the page with "what's this about" "how big is it" etc. */
.overview {
  border: 1px solid #FFE189;
  background: #FFF7E1;
  padding: 10px;
  margin: 0px 10px 10px 0px;
  line-height: normal;
}

.overview h2 {
  color: #54423A;
  margin-top: 10px;
  margin-bottom: 1px;
}

/*---------------------------------------------------------------------------------------------*/
/* Footer */
.whatsNext {
  text-align: center;
  width: 250px;
  border: 1px solid #FFE189;
  background: #FFF7E1;
  padding: 10px;
  margin-left: 150px;
  margin-top: 30px;
  margin-bottom: 40px;
}

/* The banner "earthcode" part */
#banner-inner .bracket {
  font-size: 38pt;
  font-family: times;
  font-weight: bold;
  color: #838B92;
}

#siteTitle {
  font-size: 30pt;
  color: #535B62;
  letter-spacing: 5px;
}

/*---------------------------------------------------------------------------------------------*/
/* misc stuff */
.fauxlink {
  color: blue;
  cursor: hand;
  cursor: pointer;
}

img {
  border: 0px;
}

#alpha, #beta, #gamma {
  line-height: 2em;
}

table.basic-column-list td {
  vertical-align: top;
  padding: 10px;
}

/*---------------------------------------------------------------------------------------------*/
/* style additions for posting -- these are referenced by the the fckstyles.xml config file*/
div.alt-color {
  padding: 5px;
  border: 1px solid #999;
  background: #E0E0E0;
}

span.code {
  border: 1px solid #8B4513;
  background: #FF9933;
  text-align: left;
  font-size: 12px;
  padding: 0 4px 0 4px;
}

span.code-subtle {
  border: 1px solid #AAA;
  background: #EEE;
  text-align: left;
  font-size: 12px;
  padding: 0 4px 0 4px;
}

div.left-aside {
  float: left;
  width: 200px;
  background: #CFE2FF;
  border: 1px solid #AF92FF;
}

div.right-aside {
  float: right;
  width: 200px;
  background: #CFE2FF;
  border: 1px solid #AF92FF;
}

pre.code {
  margin: 15px 5px 15px 5px;
  padding: 5px;
  border: 1px solid #8B4513;
  background: #FF9933;
  text-align: left;
  font-size: 12px;
}

div.indent {
  padding-left: 20px;
}

blockquote.withimage {
  background: url(http://www.earthcode.com/images/quote.gif) no-repeat;
  text-align: justify;
  padding: 8px;
  padding-left: 24px;
  background-color: #F9F9F9;
  border-color: #e9e9e9;
}

/*---------------------------------------------------------------------------------------------*/
/* Anchor styles */
a {
  text-decoration: none;
  background: url(/images/link-underline.gif) bottom left repeat-x;
  color: #7e90f2;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: blue;
  background: #FFFF99;
}

/*The next two styles magically add a little icon for external links. The "clean" steyl removes them */
a[href^="http"]:after {
  color: #7e90f2;
  content: "\21D7";
  font-size: 10px;
}

a[href^="http://earthcode.com"]:after,
a[href^="http://www.earthcode.com"]:after {
  content: "";
}

a.clean {
  background: none;
}

a.clean:after {
  content: "";
}

/*---------------------------------------------------------------------------------------------*/
/* The upper-right search area */
#upper-right-nav {
  padding-top: 5px;
  padding-right: 125px;
}

#search {
  color: #AAA;
  border: 1px solid #AAA;
  font-size: 9px;
  height: 13px;
}

#upper-right-nav a {
  color: #888;
  text-decoration: none;
  background: none;
}

/*---------------------------------------------------------------------------------------------*/
/* Entry header */
.entry-header h3 {
  padding: 0px;
  margin-bottom: 0px;
}

.entry-header h3 a {
  font-family: "Lucida Sans Unicode", "Lucida Grande", Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #60BF49;
  text-decoration: none;
  background: none;
}

.entry-header h3 a:hover {
  text-decoration: underline;
  color: #60BF49;
  background: #FFFF99;
}

.entry-header .entry-subheader {
  font-family: arial;
  font-size: 20px;
  font-weight: normal;
  color: #DCDCDC;
}

.entry-subheader a {
  text-decoration: none;
  background: none;
}

/* layout */

body {
  margin: 0;
  color: #554d47;
  font-family: Verdana, Helvetica, "Trebuchet MS", "Lucida Grande", Helvetica, arial, verdana, sans-serif;
  font-weight: normal;
  font-size: 12px;
}

#container {
  position: static;
}

#container-inner {
  position: static;
  border: 0;

}

/* banner area */
#banner {
/* no ie mac \*/
  height: 1%; /* ie win 5.5, 6 win */
  width: 100%;
  background: url('/images/vertical-fade-80px-ltblue.gif');
  background-repeat: repeat-x;
  height: 90px;
  text-align: left;
}

#banner-inner {
}

#banner-header {
  margin-top: 10px;
  font-size: 26px;
  font-weight: normal;
}

#banner-header a {
  color: #1731C0;
  text-decoration: none;
  background: none;
}

#banner-header a span{
  font-size:18px;
  color: #60BF49;
}

#banner-description {
/*font-face: "Lucida Sans Unicode", "Lucida Grande";*/
  font-weight: bold;
  margin: 0.25em 0 0 2px;
  font-size: 10px;
  color: #60BF49;
}

/* default to artistic/calendar/timeline layout */
#container {
  width: auto;
}

.layout-artistic #alpha,
.layout-calendar #alpha {
  display: block;
  float: none;
  width: auto;
  margin-right: 465px;

}

.layout-artistic #alpha-inner,
.layout-calendar #alpha-inner,
.layout-timeline #alpha-inner {
  padding: 14px 14px 14px 14px;
  background: #FFFFFF;
}

.layout-artistic #beta,
.layout-calendar #beta {
  width: 465px;
  display: block;
  position: absolute;
  float: none;
  right: 0;
  top: 0;
}

.layout-artistic #beta-inner,
.layout-calendar #beta-inner,
.layout-timeline #beta-inner {
  border: 0;
  padding: 15px 15px 15px 15px;

}

/* in artistic/calendar/timeline layouts, #gamma and #delta are inside #beta */

#beta #gamma, #beta #delta {
  width: 210px;
  margin: 15px 0;
}

#beta #gamma-inner, #beta #delta-inner {
  padding: 0;
}

/* content */

.content-nav {
  margin-top: 0;
}

.date-header,
.trackbacks-header,
.comments-header,
.comments-open-header,
.archive-header {
  margin: 0 0 10px 0;
  border: 0;
  color: #99CC66;
  font-family: Verdana, Arial, sans-serif;
  font-size: small;
  text-align: left;
  font-weight: bold;
  text-transform: uppercase;
}

.entry-content,
.entry-footer,
.trackbacks-info,
.trackback-content,
.comments-open-content,
.comments-open-footer,
.comments-closed,
.archive-content {
  margin: 10px 0;
}

.entry-content p {
  text-align: left;
}

.entry-footer,
.trackback-footer,
.comment-footer {
  margin: 0 0 70px 0;
  border: 0;
  color: #666666;
  font-family: Verdana, Arial, sans-serif;
  font-size: x-small;
  line-height: normal;
  text-align: left;
}

.entry-body {
  padding-bottom: 46px;
}

#comment-author, #comment-email, #comment-url, #comment-text {
  width: 80%;
}

/* fixes bug in ie win */
img.image-full {
  width: 320px;
}

/* modules */

.module-header {
  margin: 5px 0;
  border-bottom: 2px solid #6474BF;
  padding: 3px;
  font-size: x-small;
  line-height: normal;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .3em;
  text-align: center;
}

.module-content {
  margin: 5px 0 20px 0;
  line-height: 1.8em;
  font-size: 11px;
}

.module-list {
  margin: 0 0 0 0;
  padding-left: 15px;
}

.module-list-item {
  margin: 0px 0 0 0;
}

.typelist-thumbnailed .module-list-item {
  margin: 10px 0;
}

.module-photo {
  text-align: left;
}

.module-powered {
  text-align: left;
}

.module-calendar .module-header {
  color: #FF3366;
  font-family: 'Lucida Grande', Verdana, Geneva, Arial, sans-serif;
  font-size: x-small;
  border: 1px solid #FF3366;
  text-align: center;
  font-weight: bold;

  text-transform: uppercase;
  padding: 3px;
  letter-spacing: .3em;
}

.module-calendar th,
.module-calendar td {
  text-align: center;
  font-weight: normal;
}

.typelist-thumbnail img {
  margin: 0;
}

.module-featured-photo {
  margin-bottom: 5px;
}

.module-featured-photo .module-content img {
  width: 420px;
}

.module-recent-photos .module-content {
  padding: 2px 0 0 0;
}

.module-recent-photos .module-list {
  margin: 0;
}

.module-recent-photos .module-list-item {
  width: 70px; /* ie mac fix */
  height: 70px; /* for appearance with varying image border widths */
  margin: 0 2px 2px 0;
}

/* moblog1 tweaks */

.layout-moblog1 #container {
  width: auto;
}

.layout-moblog1 #alpha {
  width: 200px;
  display: block;
  position: absolute;
  float: none;
  left: 0;
  top: 0;
}

.layout-moblog1 #alpha-inner {
  border: 0;
  padding: 15px 15px 15px 15px;
  background: #FCDDEC;
}

.layout-moblog1 #beta {
  display: block;
  float: none;
  width: auto;

  margin-left: 200px;
  margin-right: 200px;
}

.layout-moblog1 #beta-inner {
  padding: 14px 14px 14px 14px;
  background: #FFFFFF;
}

.layout-moblog1 #gamma {
  width: 200px;
  display: block;
  position: absolute;
  float: none;
  right: 0;
  top: 0;
}

.layout-moblog1 #gamma-inner {
  border: 0;
  padding: 15px 15px 15px 15px;
  background: #FCDDEC;
}

/* moblog2 tweaks */

.layout-moblog2 #container {
  width: auto;
}

.layout-moblog2 #alpha {
  width: 100px;
  display: block;
  position: absolute;
  float: none;
  left: 0;
  top: 0;
}

.layout-moblog2 #alpha-inner {
  border: 0;
  padding: 15px 15px 15px 15px;
  background: #FCDDEC;
}

.layout-moblog2 #beta {
  display: block;
  float: none;
  width: auto;
  margin-left: 100px;
  margin-right: 330px;
}

.layout-moblog2 #beta-inner {
  padding: 14px 14px 14px 14px;
  background: #FFFFFF;
}

.layout-moblog2 #gamma {
  width: 190px;
  display: block;
  position: absolute;
  float: none;
  right: 140px;
  top: 0;
}

.layout-moblog2 #gamma-inner {
  border: 0;
  padding: 15px 15px 15px 15px;
  background: #FCDDEC;
}

.layout-moblog2 #delta {
  width: 140px;
  display: block;
  position: absolute;
  float: none;
  right: 0;
  top: 0;
}

.layout-moblog2 #delta-inner {
  border: 0;
  padding: 15px 15px 15px 15px;
  background: #FCDDEC;
}

.layout-moblog2 .module-photo img {
  width: 100px;
  height: auto;
}

/* timeline tweaks */

.layout-timeline #alpha {

  display: block;
  float: none;
  width: auto;
  margin-right: 390px;

}

.layout-timeline #beta {
  width: 390px;
  display: block;
  position: absolute;
  float: none;
  right: 0;
  top: 0;

}

.layout-timeline #beta #gamma {
  width: 175px;
}

.layout-timeline #beta #delta {
  width: 170px;
}

/* one-column tweaks */

.layout-one-column #container {
  width: auto;
}

.layout-one-column #alpha {
  display: block;
  float: none;
  width: auto;
}

.layout-one-column #alpha-inner {
  padding: 14px 14px 14px 14px;
  background: #FFFFFF;
}

/* two-column-left tweaks */

.layout-two-column-left #container {
  width: auto;
}

.layout-two-column-left #alpha {
  width: 200px;
  display: block;
  position: absolute;
  float: none;
  left: 0;
  top: 0;
}

.layout-two-column-left #alpha-inner {
  border: 0;
  padding: 15px 15px 15px 15px;
  background: #FCDDEC;
}

.layout-two-column-left #beta {
  display: block;
  float: none;
  width: auto;
  margin-left: 200px;
}

.layout-two-column-left #beta-inner {
  border: 1px solid #F7A3C7;
  padding: 14px 14px 14px 14px;
  background: #FFFFFF;
}

/* two-column-right tweaks */

.layout-two-column-right #container {
  width: auto;
}

.layout-two-column-right #alpha {
  display: block;
  float: none;
  width: auto;
  margin-right: 200px;

}

.layout-two-column-right #alpha-inner {
  padding: 14px 100px 14px 100px;
  background: #FFFFFF;
}

.layout-two-column-right #beta {
  width: 200px;
  display: block;
  position: absolute;
  float: none;
  right: 0;
  top: 90px;
  background-color: #F9F9F9;
  border-color: #e9e9e9;

}

.layout-two-column-right #beta-inner {
  border: 0;
  padding: 15px 15px 15px 15px;
}

/* three-column tweaks */

.layout-three-column #container {
  width: auto;
}

.layout-three-column #alpha {
  width: 200px;
  display: block;
  position: absolute;
  float: none;
  left: 0;
  top: 90px;
  background-color: #F9F9F9;
  border-color: #e9e9e9;
}

.layout-three-column #alpha-inner {
  border: 0;
  padding: 15px 15px 15px 15px;
}

.layout-three-column #beta {
  display: block;
  float: none;
  width: auto;
  margin-left: 200px;
  margin-right: 200px;
}

.layout-three-column #beta-inner {
/*border: 1px solid #red;*/
  margin: 14px 20px 14px 20px;
}

.layout-three-column #gamma {
  width: 200px;
  display: block;
  position: absolute;
  float: none;
  right: 0;
  top: 90px;
  height: 906px;
  background-color: #F9F9F9;
  border-color: #e9e9e9;

}

.layout-three-column #gamma-inner {
  border: 0;
  padding: 15px 15px 15px 15px;
}