/* -----------------------------------------------
   Sir Needs To Mixalot
   Two column, fixed width. Georgia + Trebuchet.
   ----------------------------------------------- */

body {
  background: #ffffff;
  margin: 0;
  color: #333333;
  font: x-small Georgia, Serif;
  font-size: small;
  text-align: center;
}

a:link { color: #5588aa; text-decoration: none; }
a:visited { color: #996699; text-decoration: none; }
a:hover { color: #cc6600; text-decoration: underline; }
a img { border-width: 0; }

.clear { clear: both; }

/* Header
----------------------------------------------- */
#header-wrapper {
  width: 660px;
  margin: 0 auto 10px;
  border: 1px solid #cccccc;
}

#header {
  margin: 5px;
  border: 1px solid #cccccc;
  text-align: center;
  color: #666666;
}

#header h1 {
  margin: 5px 5px 0;
  padding: 15px 20px .25em;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: .2em;
  font: normal normal 200% Georgia, Serif;
}

#header a { color: #666666; text-decoration: none; }
#header a:hover { color: #666666; }

#header .description {
  margin: 0 5px 5px;
  padding: 0 20px 15px;
  max-width: 700px;
  text-transform: uppercase;
  letter-spacing: .2em;
  line-height: 1.4em;
  font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
  color: #999999;
}

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin: 0 auto;
  padding: 10px;
  text-align: left;
  font: normal normal 100% Georgia, Serif;
}

#main-wrapper {
  width: 410px;
  float: left;
  word-wrap: break-word;
  overflow: hidden;
}

#sidebar-wrapper {
  width: 220px;
  float: right;
  word-wrap: break-word;
  overflow: hidden;
}

/* Headings
----------------------------------------------- */
h2 {
  margin: 1.5em 0 .75em;
  font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
  line-height: 1.4em;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #999999;
}

h2.date-header { margin: 1.5em 0 .5em; }

/* Posts
----------------------------------------------- */
.post {
  margin: .5em 0 1.5em;
  border-bottom: 1px dotted #cccccc;
  padding-bottom: 1.5em;
}

.post h3 {
  margin: .25em 0 0;
  padding: 0 0 4px;
  font-size: 140%;
  font-weight: normal;
  line-height: 1.4em;
  color: #cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
  display: block;
  text-decoration: none;
  color: #cc6600;
  font-weight: normal;
}

.post h3 strong, .post h3 a:hover { color: #333333; }

.post-body {
  margin: 0 0 .75em;
  line-height: 1.6em;
}

.post-body p { margin: 0 0 1em; }
.post-body h4 { margin: 1.4em 0 .4em; font-size: 100%; font-weight: bold; color: #333333; }
.post-body ul, .post-body ol { margin: 0 0 1em; padding-left: 25px; }
.post-body li { margin-bottom: .3em; }

.post blockquote { margin: 1em 20px; }
.post blockquote p { margin: .75em 0; }

.post-body .separator { text-align: center; margin: 0 0 1em; }

.post img {
  padding: 4px;
  border: 1px solid #dddddd;
  max-width: 100%;
  height: auto;
}

.post-body .gear { color: #666666; font-size: 95%; }
.post-body .signoff { font-style: italic; color: #666666; }

.post-footer {
  margin: .75em 0;
  color: #999999;
  text-transform: uppercase;
  letter-spacing: .1em;
  font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
  line-height: 1.4em;
}

.post-footer-line { margin: 0 0 .2em; }
.post-icons { margin-left: .6em; }
.post-icons img { padding: 0; border: 0; vertical-align: middle; }

/* Pager and feeds
----------------------------------------------- */
#blog-pager { margin: 1em 0; text-align: center; overflow: hidden; }
#blog-pager-newer-link { float: left; }
#blog-pager-older-link { float: right; }
.blog-feeds { clear: both; line-height: 2.5em; }

.status-msg-wrap {
  margin: 1.5em 0 .5em;
  padding: .5em;
  text-align: center;
  background: #eeeeee;
  border: 1px solid #cccccc;
  font: normal normal 90% Georgia, Serif;
}

/* Sidebar
----------------------------------------------- */
.sidebar, #sidebar-wrapper {
  color: #666666;
  line-height: 1.5em;
}

#sidebar-wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#sidebar-wrapper li {
  margin: 0;
  padding: 0 0 .25em 15px;
  text-indent: -15px;
  line-height: 1.5em;
}

#sidebar-wrapper .widget {
  border-bottom: 1px dotted #cccccc;
  margin: 0 0 1.5em;
  padding: 0 0 1.5em;
}

#sidebar-wrapper .widget:last-child { border-bottom: 0; }

/* Profile */
.profile-img {
  float: left;
  margin: 0 5px 5px 0;
  padding: 4px;
  border: 1px solid #cccccc;
}

.profile-datablock { margin: .5em 0 .5em; }

.profile-data {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .1em;
  font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
  color: #999999;
  font-weight: bold;
  line-height: 1.6em;
}

.profile-textblock { margin: .5em 0; line-height: 1.6em; }
.profile-link {
  font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.Text .email { color: #999999; font-size: 92%; }

/* Blog archive: the little triangles */
.BlogArchive details > summary {
  list-style: none;
  cursor: pointer;
}
.BlogArchive details > summary::-webkit-details-marker { display: none; }
.BlogArchive details > summary::before {
  content: "\25BA\00a0";
  color: #999999;
  font-size: 85%;
}
.BlogArchive details[open] > summary::before { content: "\25BC\00a0"; }
.BlogArchive ul ul { margin-left: 0; }
.BlogArchive ul ul li { padding-left: 15px; }
.BlogArchive ul.posts li { padding-left: 15px; }
.BlogArchive .post-count { color: #666666; }

.Buttons img { margin: 0 2px 4px 0; vertical-align: top; image-rendering: pixelated; }
.Subscribe img { vertical-align: middle; }

/* Footer
----------------------------------------------- */
#footer {
  width: 660px;
  clear: both;
  margin: 0 auto;
  padding-top: 15px;
  line-height: 1.6em;
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  color: #999999;
  font: normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
}

/* Small screens: same blog, one column
----------------------------------------------- */
@media (max-width: 700px) {
  body { font-size: 15px; }
  #outer-wrapper, #header-wrapper, #footer { width: auto; }
  #outer-wrapper { padding: 8px; }
  #main-wrapper, #sidebar-wrapper { width: auto; float: none; }
  #sidebar-wrapper { border-top: 1px dotted #cccccc; margin-top: 1em; }
  #header h1 { font-size: 150%; padding: 12px 10px .25em; }
  #header .description { padding: 0 10px 12px; }
}