.clear { clear: both;}
.clear-left { clear: left;}
.clear-right { clear: right;}

.align-left { margin: 0 1em 0.5em 0; float: left;}
.align-right { margin: 0 0 0.5em 1em; float: right;}

strong { font-weight: bold; }
em { font-style: italic; }
small { font-size: 0.9em; }

ul { list-style-type: square; margin: 0 0 1em 2em; }
ol { list-style-type: decimal; margin: 0 0 1em 2em; }

p {
  margin: 0 0 1.0em;
}

h1,h2,h3,h4,h5,h6 {
  font-family:  "Lucida Sans Typewriter", "Courier New", courier;
  font-variant: small-caps;
  margin-bottom: 0.6em;
  line-height: 1.2em;
  color: #eee;
}

h1 { font-size: 2.0em;}
h2 { font-size: 1.8em;}
h3 { font-size: 1.6em;}
h4 { font-size: 1.4em;}
h5 { font-size: 1.2em;}
h6 { font-size: 1.0em;}

a:link {
  color: #7DB3DF;
  text-decoration: none;
}

a:visited {
  color: #518CBF;
  text-decoration: none;
}

a:hover, a:active {
  color: #7DB3DF;
  text-decoration: underline;
}

#bottom-wrapper a:link {
  color: #0066CC;
}

#bottom-wrapper a:visited {
  color: #003399;
}

#bottom-wrapper a:hover, #bottom-wrapper a:active {
  color: #0099FF;
}

body {
  color: #424242;
  background-color: #fff;
  font-size: 62.8%;
  line-height: 1.6em;
  font-family: "Lucida Sans", Verdana, Arial, sans-serif;
}

#top-content {
  font-size: 1.4em;
  color: #fff;
}

#bottom-wrapper {
  font-size: 1.4em;
}

/*
-> General Layout
*/
#top-outer {
  background: #373637 url(images/scroll_grid_bg.png) 50% 0 repeat;
}

#top-inner {
  background: transparent url(images/scroll_top_bg.png) 50% 0 repeat-x;
  min-width: 960px;
}

#top-content {
  padding-bottom: 20px;
}

div#snapshots-wrapper {
  background: transparent url(images/snapshots/snapshot_gears.png) 50% 0 no-repeat;
}

body#posts div#snapshots-wrapper {
  background-image: url(images/snapshots/snapshot_train.png);
}

body#page-about div#snapshots-wrapper {
  background-image: url(images/snapshots/snapshot_jared.png);
}

body#page-contact div#snapshots-wrapper {
  background-image: url(images/snapshots/snapshot_laptop.png);
}

div#snapshots {
  display: block;
  width: 960px;
  height: 315px;
  margin: 0 auto;
}

div#top-spacer {
  width: 930px;
  height: 32px;
  margin: 0 auto;
  background: transparent url(images/sidebar_top.gif) left top no-repeat;
}

div#top-wrapper {
  width: 930px;
  margin: 0 auto;
  background: transparent url(images/sidebar_bg.gif) left top repeat-y;
}

div#sidebar {
  width: 212px;
  float: left;
  /* background: transparent url(images/sidebar_transition.gif) left top no-repeat; */
}

div#top-content {
  margin-left: 28px;
  width: 690px;
  float: left;
}

/*
-> Bottom Area
*/
div#bottom-outer {
  background: transparent url(images/banner_bg.png) 50% 0 repeat-x;
  padding-top: 50px;
  min-width: 960px;
}

div#bottom-wrapper {
  width: 960px;
  margin: 0 auto;
  padding-bottom: 1em;
}

#bottom-wrapper h1, #bottom-wrapper h2, #bottom-wrapper h3,
#bottom-wrapper h4, #bottom-wrapper h5, #bottom-wrapper h6 {
  color: #424242;
}

.column25 {
  width: 210px;
  padding: 0 15px;
  float: left;
}

.column50 {
  width: 450px;
  padding: 0 15px;
  float: left;
}

.column75 {
  width: 690px;
  padding: 0 15px;
  float: left;
}

/*
-> Footer
*/
div#footer {
  width: 960px;
  margin: 0 auto;
  padding: 20px 0;
  color: #929292;
}

div#footer p{
  text-align: center;
  margin: 0;
}

/*
-> Flashes
*/
.flash-notice, .flash-success, .flash-error {
  padding: 0.5em;
  border: 1px solid #626262;
  color: #626262;
  background-color: #f0f0f0;
}

.flash-success {
  color: #336633;
  background-color: #c5d1c6;
  border-color: #336633;
}

.flash-error {
  color: #663333;
  background-color: #cbc2c2;
  border-color: #663333;
}

/*
-> Navigation
*/
ul#navigation {
  display: block;
  width: 212px;
  margin: 0;
  list-style: none;
}

ul#navigation li a {
  display: block;
  width: 212px;
  height: 30px;
  text-indent: -5000px;
}

ul#navigation li a.home {
  background: transparent url(images/nav_sprites.gif) 0 0 no-repeat;
}
ul#navigation li.here a.home, ul#navigation li a.home:hover {
  background-position: 0 -150px;
}

ul#navigation li a.blog {
  background: transparent url(images/nav_sprites.gif) 0 -60px no-repeat;
}
ul#navigation li.here a.blog, ul#navigation li a.blog:hover {
  background-position: 0 -210px;
}

ul#navigation li a.portfolio {
  background: transparent url(images/nav_sprites.gif) 0 -30px no-repeat;
}
ul#navigation li.here a.portfolio, ul#navigation li a.portfolio:hover {
  background-position: 0 -180px;
}

ul#navigation li a.about {
  background: transparent url(images/nav_sprites.gif) 0 -90px no-repeat;
}
ul#navigation li.here a.about, ul#navigation li a.about:hover {
  background-position: 0 -240px;
}

ul#navigation li a.contact {
  background: transparent url(images/nav_sprites.gif) 0 -120px no-repeat;
}
ul#navigation li.here a.contact, ul#navigation li a.contact:hover {
  background-position: 0 -270px;
}

/*
-> Graphical Headers
*/
h1#welcome-to-our-world {
  text-indent: -5000px;
  display: block;
  width: 260px;
  height: 23px;
  background: transparent url(images/headers/welcome-to-our-world.gif) left top no-repeat;
}

h2#words-from-the-blog {
  text-indent: -5000px;
  display: block;
  width: 239px;
  height: 27px;
  background: transparent url(images/headers/words-from-the-blog.gif) left top no-repeat;
}

h2#recent-work {
  text-indent: -5000px;
  display: block;
  width: 146px;
  height: 27px;
  background: transparent url(images/headers/recent-work.gif) left top no-repeat;
}

h1#the-man-behind-the-curtain {
  text-indent: -5000px;
  display: block;
  width: 346px;
  height: 25px;
  background: transparent url(images/headers/the-man-behind-the-curtain.gif) left top no-repeat;
}

h2#tools-i-use {
  text-indent: -5000px;
  display: block;
  width: 122px;
  height: 25px;
  background: transparent url(images/headers/tools-i-use.gif) left top no-repeat;
}

h2#tell-me-about-your-project {
  text-indent: -5000px;
  display: block;
  width: 312px;
  height: 29px;
  background: transparent url(images/headers/tell-me-about-your-project.gif) left top no-repeat;
}

h1#need-to-get-in-touch {
  text-indent: -5000px;
  display: block;
  width: 239px;
  height: 27px;
  background: transparent url(images/headers/need-to-get-in-touch.gif) left top no-repeat;
}

h2#or-you-could-fill-out-this-form {
  text-indent: -5000px;
  display: block;
  width: 349px;
  height: 28px;
  background: transparent url(images/headers/or-you-could-fill-out-this-form.gif) left top no-repeat;
}

h1#featured-project {
  text-indent: -5000px;
  display: block;
  width: 205px;
  height: 29px;
  background: transparent url(images/headers/featured-project.gif) left top no-repeat;
}

h2#follow-my-work {
  text-indent: -5000px;
  display: block;
  width: 184px;
  height: 29px;
  background: transparent url(images/headers/follow-my-work.gif) left top no-repeat;
}

/*
-> Polaroids
*/
img.polaroid {
  width: 182px;
  height: 150px;
  padding: 14px 14px 15px 14px;
  background: transparent url(images/polaroid_bg.png) left top no-repeat;
}

* html img.polaroid { background-image: url(images/polaroid_bg.gif); }
* html #top-wrapper img.polaroid { padding: 10px; background-position: -4px -4px;}

/*
-> Home Page
*/
div.about-jared {
  padding-top: 150px;
  padding-right: 0;
  position: relative;
}

div.about-jared .jared-shield {
  position: absolute;
  top: -83px;
  left: -13px;
}

a.continue-button {
  display: block;
  margin-top: 0.6em;
  padding: 0.6em;
  width: auto;
  float: left;
  background-color: #EEE;
  color: #424242 !important;
  text-decoration: none;
}

a.continue-button:hover {
  color: #EEE !important;
  background-color: #424242;
  text-decoration: none;
}

/*
-> Posts
*/
ul#posts-list li {
  padding-top: 10px;
  padding-bottom: 20px;
  background: transparent url(images/separator.png) 50% bottom no-repeat;
}

ul#posts-list li:first-child {
  padding-top: 0;
}

ul#posts-list li:last-child {
  background: none;
}

ul#posts-list, ul#comments-list {
  list-style: none;
  margin: 0;
}

h1.post-title, h2.post-title {
  margin-bottom: 0;
}

h2.post-title a {
  color: #e2e2e2;
}

#bottom-wrapper h2.post-title a, #bottom-wrapper h2.post-title a:hover,
#bottom-wrapper h2.post-title a:visited, #bottom-wrapper h2.post-title a:active {
  color: #424242;
  text-decoration: none;
}

#bottom-wrapper h2.post-title a:hover {
  text-decoration: underline;
}

small.posted-date {
  display:block;
  margin-bottom: 1em;
  color: #ccc;
}

a.post-continue-link, a.post-comments-link {
  display: block;
  float: left;
  padding: 0.6em;
  margin-right: 0.6em;
  color: #f0f0f0;
  background-color: #303030;
  text-decoration: none;
}

a.post-comments-link {
  padding-left: 2.2em;
  background-image: url(images/comment.png);
  background-position: 0.6em 0.6em;
  background-repeat: no-repeat;
}

* html a.post-comments-link { /* Fix for IE6 doesn't do transparencies on backgrounds :( */
  background-image: url(images/comment.gif);
}

a.post-continue-link:hover, a.post-comments-link:hover {
  background-color: #f0f0f0;
  color: #424242;
}

#bottom-wrapper a.post-continue-link, #bottom-wrapper a.post-comments-link {
  color: #424242;
  background-color: #eee;
}

#bottom-wrapper a.post-continue-link:hover, #bottom-wrapper a.post-comments-link:hover {
  color: #f0f0f0;
  background-color: #424242;
  text-decoration: none;
}

ul#comments-list li {
  padding-bottom: 20px;
  background: transparent url(images/separator.png) 50% bottom no-repeat;
}

ul#comments-list li li {
  padding-bottom: 0;
  background: none;
}

ul#comments-list li:first-child {
  padding-top: 0;
}

ul#comments-list li:last-child {
  background: none;
}

ul#comments-list li {
  margin-bottom: 1.0em;
  position: relative;
  height: 100px;
}

ul#comments-list li li {
  margin-bottom: 0em;
  position: relative;
  height: auto;
}

ul#comments-list > li {
  height: auto;
  min-height: 100px;
}

ul#comments-list div.comment {
  padding: 0.5em;
  background-color: #eee;
}

ul#comments-list .other div.comment {
  padding: 0.5em;
  background-color: #ddd;
}

ul#comments-list li div.comment-info {
  position: absolute;
  left: -240px;
  top: 0;
  width: 210px;
  text-align: center;
  font-family: courier, "Courier New";
}

ul#comments-list li div.comment-info img {
  display: block;
  margin: 0 auto;
  padding: 0 60px 20px;
  background: transparent url(images/avatar_lions.png) 50% top no-repeat;
}

ul#comments-list li.other div.comment-info img {
  background-image: url(images/avatar_gryphons.png);
}

/*
-> Pagination
*/
div.pagination {
  font-family: courier, "Courier New";
}

div.pagination a:visited {
  color: #0066CC;
}

/*
-> Forms
*/
form.new_post textarea {
  width: 100%;
}