/*
Theme Name: Benjamin Oakes
Theme URI: http://benjaminoakes.com/
Description: Custom theme.
Version: 1.0
Author: Benjamin Oakes
Author URI: http://benjaminoakes.com/
Tags: fixed width, two columns
*/

/* New HTML5 elements -- force their correct presentation in unsupportive browsers */
header, nav, article, section, aside, footer, hgroup {
  display: block;
}

details {
  display: inline;
}

/* Two column layout.  See also:  http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/ */
html {
  margin: 0;
  padding: 0;
  background-color: #ececec;
}

body {
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 100%;

  margin: 0.35em;
  padding: 0;

  width: auto;
}

a {
  color: #2d3c49;
}

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

h1, h2, h3, h4, h5, h6 {
  color: #333;
  font-family: 'Trebuchet MS', Georgia, 'Times New Roman', serif;
  margin: 0;
}

h2 {
  border-bottom: 1px solid #999;
  margin-bottom: 1em;
}

h3 {
  border-bottom: 1px dotted #999;
  margin-bottom: 2px;
}

details {
  font-size: 80%;
}

blockquote {
  border-left: 3px solid #ddd;
  margin: 0;
  margin-left: 1em;
  padding: 0;
  padding-left: 1em;
}

ul li {
  list-style-type: square;
}

header, nav {
  font-size: 100%;
  margin: 0;
  text-transform: uppercase;

  border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
}

header {
  background-color: #333;
  background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
  background: -moz-linear-gradient(top, #444, #111);

  color: #fff;
  padding: 0.3em 0.5em;
}

header h1 {
  border: 0;
  color: inherit;
  display: inline;
  float: none;
  font-size: 115%;
  font-weight: normal;
  margin: 0;
  margin-left: 0.2em;
  padding: 0;
}

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

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

a img {
  border: 0;
}

nav {
  background-color: #993333;
  background: -webkit-gradient(linear, left top, left bottom, from(#a94343), to(#791313));
  background: -moz-linear-gradient(top, #a94343, #791313);

  border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  color: #fff;
  font-family: 'Lucida Grande', 'Trebuchet MS', sans-serif;
  margin: 0.3em 0;
  padding: 0.3em 0.5em;
}

nav ul {
  font-size: 70%;
  margin: 0;
  padding: 0;
  padding-left: 0.2em;
}

nav li {
  display: block;
  float: left;
  width: 25%;
}

nav a {
  color: #fff;
  display: block;
  padding: 0.1em 0.3em;
  text-decoration: none;
}

nav a:hover {
  background-color: #b88;
  color: #fff;
  margin: 0;
  text-decoration: none;

  -moz-border-radius: 0.7em;
  -webkit-border-radius: 0.7em;
  border-radius: 0.7em;
}

nav a:active {
  background-color: #fff;
  color: #333;
}

#main_content {
  background-color: #fff;
  margin: 0;
  margin-bottom: 1em;
  margin-top: 0.3em;
  min-height: 0;
  padding: 0.5em 0.7em;

  border: 1px solid #777;
  border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;

  width: auto;
}

article h3 {
  font-size: 150%;
  border-bottom: 1px solid #999;
}

article h3 a {
  text-decoration: none;
}

.activity {
  word-wrap: break-word;
}

code {
  background-color: #f4f1e9;
  border-radius: 0.3em;
  -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  color: #3e4954;
  font-family: Monaco, monospace;
  font-size: 100%;
  padding: 0 0.5em;
}

pre {
  margin-left: 1.5em;
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

pre code {
  background-color: #5e6974;
  color: #fff;
  display: block;
  padding: 0.5em;

  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
  _white-space: pre;   /* IE only hack to re-specify in addition to word-wrap  */
}

aside {
  float: none;
  width: auto;
  padding-left: 0.5em;
}

aside section {
  float: left;
  width: 50%;
}

aside h4 {
  margin-bottom: 1em;
}

aside img {
  margin: 0;
  padding: 0;
  margin-left: 0.5em;
}

aside ul {
  margin: 0;
  margin-bottom: 1em;
  padding: 0;
  padding-left: 1.5em;
}

footer {
  border-top: 1px dotted #999;
  clear: both;
  color: #777;
  margin: 0.5em 0.5em;
  padding: 0.3em 0;

  font-size: 80%;
  width: 100%;
}

#search {
  font-size: 100%;
}

#search input {
  width: auto;
}

#search_icon {
  vertical-align: text-bottom;
}

.icon {
  vertical-align: text-bottom;
  margin-left: 5px;
}

.comments {
  margin-top: 1.5em;
}

#search input {
  margin-left: 5px;
}

.avatar {
  float: left;
  background-color: #fff;
  border: 1px solid #1a222a;
  padding: 2px;
  margin-right: 1em;

  width: auto;
  height: auto;
}

abbr {
  border-bottom: 1px dotted #555;
  cursor: help;
}

.about {
  background-color: #ced9e4;
  background: -webkit-gradient(linear, left top, left bottom, from(#bec9d4), to(#dee9f4));
  background: -moz-linear-gradient(top, #bec9d4, #dee9f4);

  margin: 0.5em 0;
  margin-bottom: 0.25em;
  padding: 0.5em;

  font-size: 70%;
  min-height: 71px;

  border: 1px solid #777;
  border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
}

.about p {
  margin: 0.3em 0;
  /* TODO vertical-align: middle; */
  padding: 0;
}

.extended_bio {
  display: none;
}

.clear {
  clear: both;
  height: 0;
}

.comments {
  margin-bottom: 1em;
}

.comment {
  border-top: 1px dotted #777;
  padding: 1em;
}

.comment p {
  clear: both;
  margin: 0;
  margin-top: 1em;
}

textarea#comment {
  width: 95%;
}

.bypostauthor {
  background-color: #ffffe0 !important;
}

.even {
  background-color: #eee;
}

.odd {
  background-color: #ddd;
}

/* FIXME I honestly can't get this to *not* show up if empty -- WP problem. */
.page_navigation {
  border-top: 1px dotted #aaa;
  /* border-bottom: 1px dotted #aaa; */
  padding: 0.5em;
  margin: 1em 0;
  font-size: 80%;
}

.previous {
  float: left;
  padding-left: 0.5em;
}

.next {
  float: right;
  padding-right: 0.5em;
}

.commentmetadata {
  font-size: 70%;
  margin-bottom: 2.5em;
}

#respond {
  margin-top: 1em;
}

.notice {
  background-color: #ffffe0;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffffc0), to(#ffffe0));
  background: -moz-linear-gradient(top, #ffffc0, #ffffe0);

  font-size: 80%;

  padding: 0.5em 1em;
  margin-top: 0.3em;

  border: 1px solid #e6db55;
  border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
}

.toggle {
  font-size: 70%;
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.elsewhere a {
  color: #555;
  text-decoration: none;
}

.elsewhere a:hover {
  color: #c61a1a;
  text-decoration: none;
}

.elsewhere img {
  margin-left: 0;
  padding-left: 0;
}

.elsewhere th {
  vertical-align: top;
}

.tweet {
  font-size: 100%;
  margin-left: 9px;
}

.more {
  font-size: 80%;
}

.post_metadata {
  font-size: 80%;
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 2em;
}

.post_metadata li {
  display: inline;
  font-weight: bold;
  margin-right: 2em;
}

.post_metadata a {
  font-weight: normal;
}

/* StackOverflow Flair CSS */

.valuable-flair {
  display: inline;
  margin: 0.5em;
}

.valuable-flair div {
  display: inline;
}

.valuable-flair br {
  display: none;
}

.valuable-flair img {
  display: none;
}

.valuable-flair .username a {
  display: none;
}

.valuable-flair .badge1 {
  color: #ffcc00;
}

.valuable-flair .badge2 {
  color: #c0c0c0;
}

.valuable-flair .badge3 {
  color: #cc9966;
}

.valuable-flair .reputation-score {
  color: #aaa;
  font-weight: bold;
  margin: 0 0.25em;
}

.valuable-flair .badgecount {
  color: #aaa;
  padding: 0.25em;
}

.valuable-flair .explanation {
  color: #bbb;
  font-size: 70%;
}

ul#subscribe {
  padding: 0;
}

ul#subscribe li {
  list-style: none;
  display: inline;
}

.screen_reader_only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.download {
  background-color: #b9fd66;

  background: -webkit-gradient(linear, left top, left bottom, from(#f2ffdf), to(#b9fd66));
  background: -moz-linear-gradient(top, #f2ffdf, #b9fd66);

  -webkit-border-radius: 0.7em;
  -moz-border-radius: 0.7em;
  border-radius: 0.7em;

  border: 2px solid #8bc386;

  padding: 0.7em 1em;
  color: #097035;
  font-weight: bold;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 1);
}

.download:hover {
  border-color: #6ba366;
  color: #056a30;
  text-decoration: none;
}

.download:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#b9fd66), to(#f2ffdf));
  background: -moz-linear-gradient(top, #b9fd66, #f2ffdf);
  position: relative;
  right: -1px;
  bottom: -1px;
}

.preview {
  /* "Multiple borders" */
  border: 5px solid #fff;
  padding: 1px;
  background-color: #ccc;

  max-width: 90%;

  margin: 10px;

  -moz-box-shadow: 1px 1px 8px #777;
  -o-box-shadow: 1px 1px 8px #777;
  -webkit-box-shadow: 1px 1px 8px #777;
  box-shadow: 1px 1px 8px #777;

  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
}

.preview:hover {
  /*
 *   TODO find a way to use this but not screw up the transforms in supporting browsers
 *     position: relative;
 *       top: -4px;
 *         left: -4px;
 *           */

  -moz-box-shadow: 5px 5px 17px #999;
  -o-shadow: 5px 5px 17px #999;
  -webkit-box-shadow: 5px 5px 17px #999;
  box-shadow: 5px 5px 17px #999;

  -moz-transform:
    translate(-4px, -4px)
    /* rotate(1deg) */
  ;
  -o-transform:
    translate(-4px, -4px)
    /* rotate(1deg) */
  ;
  -webkit-transform:
    translate(-4px, -4px)
    /* rotate(1deg) */
  ;
}

.preview:active {
  position: relative;
  right: -1px;
  bottom: -1px;
}

figure {
  display: block;
  float: left;
  margin: 5px;
}

figure a {
  display: block;  /* Without this, VoiceOver was reading the links multiple times. */
}

figure img {
  display: block;
  margin: 0 auto;
}

figcaption {
  display: block;
  margin: 0.5em 0;
  text-align: center;
}

table {
  width: 280px; /* for iPhone -- percentages weren't working for me */
}

td, th {
  padding: 0.5em;
  text-align: left;
  vertical-align: top;
}

aside td, aside th {
  padding: 0;
}

audio {
  margin: 1em 0;
  width: 100%;
}

object, embed {
  width: 100%;
}