/*
Theme Name: MDB
Theme URI: http://www.mikeball.us
Description: Portfolio, blog, and archive of projects.
Version: 1
Author: Mike Ball
Author URI: http://www.mikeball.us
*/

/* RESET */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0;}
fieldset,img { border:0;}
address,caption,cite,code,dfn,th,var {font-style:normal; font-weight:normal;}
ol,ul {list-style:none;}
li {list-style-type:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}

/*GLOBALS*/
body {font-size:10px; background:#f3f3f3; font-family:helvetica, arial, sans-serif; color:#444; text-align:center;}
a, a:visited {color:#000; outline:none;}
  a:hover {}
h2 {font-family:georgia, times, serif; margin:0 0 7px 0; line-height:20px; height:20px; color:#888; font-size:1.3em; font-weight:normal; }
h3 {color:#222; font-weight:bold; font-size:1.6em; letter-spacing:-.015em; line-height:1.2em; margin-bottom:7px;}
  h3 a, h3 a:visited {text-decoration:none; color:#222;}
    h3 a:hover {background:yellow;}
h4 {font-weight:bold; font-size:1.4em; letter-spacing:-.015em; margin-bottom:3px; line-height:1.3em;}    
  h4 a {text-decoration:none;}
    h4 a:hover {text-decoration:underline;}
p, ul {font-size:1.2em; margin-bottom:15px; line-height:1.5em;}
small {display:block; margin-bottom:1em; line-height:1.2em;}
  small.tags, small.date-posted {color:#666; font-size:1em; font-family:georgia, times, serif;}
    small.tags a {text-decoration:none; color:#888; font-style:italic;}
      small.tags a:hover {color:#444; text-decoration:underline;}
img {display:block; margin-bottom:5px;}     
 img[alt] {text-indent:-5000px;}

/*utility*/
.break {display:block; margin-bottom:15px;}
.clear-left {clear:left;}
.clear-both {clear:both;}
.clear-right {clear:right;}
.content-section {padding-top:10px; border-top:1px solid #444;}  

ul.grid {margin:5px 0 20px 0; padding-top:10px; clear:left;}
  ul.grid li {position: relative; padding:2px; float:left; margin:0 13px 13px 0;}
  ul.grid li small.date-posted {margin-bottom:4px; font-size:.9em; color:#888;}
  ul.grid li h3 {font-size:1em;}
  ul.grid li small.tags {font-size:.9em;}
  ul.grid li img {margin-bottom:10px; border:1px solid #ccc;}
    ul.grid li img:hover {border:1px solid #999;}
  ul.grid li div.caption {background-color:#333; border-top:1px solid #ccc; padding:10px; height:80px; width:202px; position: absolute; bottom:5px; }

#primary-content ul.grid {}
  #primary-content ul.grid li {width:223px; height:235px;}
    #primary-content ul.grid li img {width:220px; height:165px;}  

#secondary-content ul.grid {}
  #secondary-content ul.grid li {width:223px;}
    #secondary-content ul.grid li img {width:220px; height:165px; border:1px solid #999;}
      #secondary-content ul.grid li img:hover {border:1px solid #333;}
        
/*forms*/
input, textarea, label {display:block;}
  input[type=hidden] {display:none;} 
  label {color:#000; font-size:1.1em; margin-bottom:.25em;}
  input, textarea {font:inherit; color:#555; margin-bottom:.5em; border:1px solid #ddd; font-size:1.2em; width:380px; padding:5px;}
  input.button { background:#333; cursor:pointer; font-family:inherit; font-size:1em; width:auto !important; color:#fff;}    

/*structure*/
#header-wrap {height:100px; background:#fff;}
  #header {width:960px; height:100px; margin: 0 auto; text-align:left;}
#primary-content-wrap {clear:left;}
  #primary-content {width:960px; margin: 0 auto; background:#f3f3f3; text-align:left; padding-top:20px;}
#secondary-content-wrap {background:#dfdfdf; padding-top:25px;}
  #secondary-content {width:960px; margin:0 auto; text-align:left;}
#footer-wrap {padding:20px 0 40px 0; clear:left; background:#333; height:600px; width:100%; text-align:center;}
  #footer {margin:0 auto; text-align:left; width:960px;}


div#header {}
  h1 a, h1 a:visited {color:#555; background:url('images/ribbon.png') no-repeat top left; font-size:1.2em; text-decoration:none; display:block; float:left; width:320px; padding:0 0 0 50px; line-height:85px; height:90px; font-family:georgia, times, serif; }
    h1 a span {color:#bbb; font-size:.9em;}
    h1 a:hover {}
  ul#global-nav {float:right;}
    ul#global-nav li {float:left;}
      ul#global-nav li a {line-height:12px; height:25px; padding:40px .5em 0 .5em; display:block; float:left; margin-right:0px; color:#bbb; font-size:.9em; text-decoration:none; font-family:georgia, times, serif;}
        ul#global-nav li.current-cat a {background:#333; color:#eee;}
        ul#global-nav li a:hover {background:#000; color:#eee;}
        
.column {float:left; margin-bottom:20px;}
  .column p, .column ul {padding-right:10px;}
  .quarter {width:25%;}
  .double {width:50%;}
    .double.work-images {width:500px; margin-right:15px;}
    .double.post {width:500px; margin-right:50px;}
      .double.post h4 {font-size:1.3em; margin-bottom:12px; color:#222;}
      .double.post ul li {margin-bottom:3px; background:url('images/bullet.png') no-repeat 0 5px; padding-left:10px;}
    .double.work-description, .double.secondary-content {width:400px; float:left;}
      .double.secondary-content h3.categorizer {margin-left:0;}
      .double.secondary-content ul.categories {width:110px; margin-left:0; position:static;}
        .double.secondary-content ul.categories li a {width:110px;}

div#primary-content, div#secondary-content {}
  div#primary-content h2, div#secondary-content h2 {float:left;}
  div.category-selector {float:right; margin-right:15px; }
  h3.categorizer {height:20px; width:115px; border:1px solid #ddd; padding-left:5px; margin:0 0 0 3px; font-size:1.1em; font-weight:normal; line-height:20px; color:#aaa; font-family:georgia, times, serif; cursor:pointer; background:url('images/down-arrow.png') no-repeat 102px 7px;}
    #secondary-content h3.categorizer {border:1px solid #ccc;}
    #secondary-content h3.categorizer:hover {background:#666 url('images/down-arrow-hover.png') no-repeat 102px 3px;}
    h3.categorizer:hover {background:#666 url('images/down-arrow-hover.png') no-repeat 102px 3px; color:#eee;}
  ul.categories {z-index:50000; margin:0 0 0 3px; background:#fff; border:1px solid #ddd; border-top:none; /*float:right; clear:right;*/ position:absolute; width:120px;}
    ul.categories li a {display:block; text-decoration:none; font-family:georgia, times, serif; color:#888; font-size:.9em; padding:2px 5px;}
      ul.categories li a:hover {color:#000; background:yellow;}
      ul.categories li ul li {font-size:.8em;}
        ul.categories li ul li a {padding-left:10px;}
  img.thumb {width:222px;}    
    img.thumb.blank {border:none;}
  div.work-images img {margin-bottom:15px; /*-moz-box-shadow: 4px 4px 4px #ccc;*/}
    p.take-action a {margin-top:20px; display:block; background:#333; height:25px; padding-left:7px; width:100px; text-decoration:none; line-height:25px; color:#fff; font-family:georgia, times, serif; cursor:pointer; font-size:.9em;}
      p.take-action a:hover {background:yellow; color:#000;}

  div.post small.date-posted {font-style:italic; font-size:1.1em;;}

  ol.comment-list {background:#dfdfdf; padding:20px; margin-bottom:1em;}
    ol.comment-list li {padding-left:30px; margin-bottom:10px;  }
      ol.comment-list li.even, ol.comment-list li.odd {background:url('images/bg-quote.gif') no-repeat 0 5px;}
      ol.comment-list li .comment-body {background:#fff; padding:10px;}
        ol.comment-list li .comment-body cite {font-size:1em; float:left; margin-right:.25em; margin-bottom:3px;}
        ol.comment-list li .comment-body span {font-size:1em; float:left; margin-right:.25em; }
        ol.comment-list li .comment-body div.comment-meta {clear:left; margin-bottom:1em;}
          ol.comment-list li .comment-body div.comment-meta a {font-size:.9em; display:block; margin-bottom:.5em; color:#999; clear:left;}
        ol.comment-list li .comment-body p {font-style:italic; font-size:1.2em;}  

  div#respond {background:#dfdfdf; padding:1em; margin:20px 0;}
  
  ul.recent-posts {clear:left;}
  ul.recent-posts li {padding:10px 0 0 0; border-bottom:1px solid #ddd;}
    ul.recent-posts li img { border:1px solid #000; width:42px; height:32px; float:left; margin-right:10px;}
    ul.recent-posts li h4 {font-size:1.1em; margin-bottom:2px;}
    ul.recent-posts li small.date-posted {font-size:.9em; font-style:italic;}  

/*footer*/
#footer p, #footer ul li {color:#999;}
#footer h3 {color:#eee;}
#footer h3 {font-size:1.3em;}
#footer ul li {background:url('images/bullet.png') no-repeat 0 5px; padding-left:10px;}

form#contactForm {margin-bottom:20px;}
  ol.forms {}
    ol.forms li {clear:both; float:left; position:relative;}
      ol.forms label {font-size:1em; color:#999;}
      ol.forms input, ol.forms textarea {width:420px;}
      ol.forms textarea { width:420px; }
        ol.forms input:focus, ol.forms textarea:focus { background-color:#eee; border-color:#ccc; }
      ol.forms li .error {color:#efefef; margin-bottom:3px; display:block;}
       ol.forms li.textarea .error {display: block; position: absolute; right: 0; top: 0; width: 100px;}
        ol.forms li.screenReader { margin-bottom: 0; left: -9999px; position: absolute; top: -9999px;}
        ol.forms li.buttons button {background:#bbb; cursor:pointer; font-family:inherit; padding:5px; border:none; color:#000;}
          ol.forms li.buttons button:hover {color:#222; }
          ol.forms li.buttons button:active {}
        ol.forms li.buttons, ol.forms li.inline { float: left; width: 470px; padding-bottom:15px;}
          ol.forms li.inline input#sendCopy { width:auto; float:left; height:20px; line-height:20px; }
          ol.forms li.inline label {float:left; margin-left:5px; height:20px; line-height:20px; width: auto; }
            
/*Fix so that the outer DIV will wrap around all floated DIVs within*/
.clearfix:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}