/* Welcome to the Capn Design CSS Document! This is where everything gets prettied. */


/***** GENERAL VARIABLES ***************************/

html, body { margin: 0; padding: 0; }
body, p { font: 12px/1.5em verdana, sans-serif; text-rendering: optimizeLegibility }
img { border: 0; }

a { color: #ffb034; text-decoration: none; }
a:hover { text-decoration: underline; }
.blue a, .blue h4, span.blue { color: #00aeef; }
.orange a, .orange h4, span.orange { color: #ffb034; }
.green a, .green h4, span.green { color: #8dd312; }
.red a, .red h4, span.red { color: #f84141; }


.clear { clear: both; }

/***** SITE STRUCTURE ******************************/

#frame {
  width: 908px;
  margin: 0 auto;
  /* background: url(http://www.capndesign.com/style/images/grid.gif) top center; */
}

#masthead {
  width: 908px;
  margin: 0;
  padding: 0 0 10px 0px;
  border-bottom: 5px solid #000;
  position: relative;
}

#content {
  width: 908px;
  overflow: hidden;
}

#content-main {
  float: left;
  width: 502px;
  margin: 0 0 20px 0;
  padding: 25px 0 0 2px;
  w\idth: 500px;
  overflow: hidden;
}
body.entry #content-main { width: 618px; w\idth: 616px; }
body.wide-post #content-main { float: none; width: 908px; }
body.archives #content-main { width: 908px; }

#content-aside {
  float: right;
  width: 386px;
  padding: 25px 0 0 58px;
  w\idth: 328px;
  margin-bottom: 20px;
  overflow: hidden;
  line-height: 1.25em;
}
body.home #content-aside { background: url(http://www.capndesign.com/style/images/sidebar-bgd.png) 266px 6px no-repeat; }
body.entry #content-aside { background: none; width: 270px; w\idth: 212px; padding-left: 58px; }
body.wide-post #content-aside { float: none; width: 908px; padding: 0; }
body.archives #content-aside { display: none; }

#footer {
  clear: both;
  width: 918px;
  color: #999;
  border-top: 2px solid #ccc;
  padding: 1.5em 0;
  margin: 1em 0 0;
}


/***** MASTHEAD ************************************/

#masthead h1 {
    text-transform: uppercase;
    padding: 50px 0 0 0;
    font-size: 54px;
    line-height: 40px;
    font-weight: 900;
    font-family: Helvetica, sans-serif;
}
#masthead h1 a { color: #000; text-decoration: none; }
#masthead h1 a span { color: #8dd312; }

/**html #mashead h1 {
  text-indent: -9999px;
  background-image: url(http://www.capndesign.com/style/images/logo.ie.png) 0 54px no-repeat;
  height: 90px;
  width: 360px;
}
*/
/*** Navigation ***/

ul#nav {
  position: absolute;
  bottom: 0;
  right: -50px;
  width: 400px;
  height: 114px;
  background: url(http://www.capndesign.com/style/images/nav-bgd.png) 0 -43px no-repeat;
}

ul#nav, #nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}


#nav li a {
  display: block;
  float: left;
  width: 165px;
  height: 114px;
  text-indent: -9999px;
}
#nav li#feed-link a { width: 70px; }  

/***** LEFT CONTENT ********************************/

#page-heading { overflow: hidden; margin: 2em 0 1em; position: relative; }
#content-main #page-heading { margin-top: 0; }
.archive-timeframe, .title-label { color: #999; }

#page-heading .page-navigation { font-size: 10px; }
#page-heading .page-navigation a { margin-left: 5px; }

#page-info {
  float: left;
  margin: 0 0 1em 0;
}
.monthly-archive #page-info { margin: 0 58px 1em 0; }
.archives #page-info { width: 580px; margin-right: 150px; w\idth: 430px; }

#page-description {
  font-size: 24px;
  font-weight: 400;
  color: #666;
  line-height: 1.25em;
}

h1.page-title { /* Section Header */
  font: 36px/1em Georgia, Serif;
  color: #000;
  font-weight: 400;
}

.page-subtitle {
  font-size: 10px;
  color: #999;
}

#entry-chart {
    position: absolute;
    top: 0;
    right: 0;
}

.article { clear: both; overflow: hidden; }

/*** Blog Post ***/

.blog-post {
  margin: 0 0 4em 0;
  position: relative;
}

.blog-post h1, .blog-post h2 { /* Post Title */
  font: 30px/1.1em Lucida Fax, Lucida Sans, helvetica, Serif;
  font-weight: normal;
  letter-spacing: -.2px;
  margin: 0 0 .15em 0;
}
.blog-post h1.no-subhed, .blog-post h2.no-subhed { margin: 0 0 .5em 0; }

.blog-post h1 a, .blog-post h2 a { color: #f84141; }

.blog-post h4 { /* Post Date or Sub-Hed */
  font: 10px/1.5em verdana, sans-serif;
  color: #aaa;
  margin: 0 0 10px 0;
}

.blog-post h3 { /* Post Subtitle */
  font: 16px/1.5em Lucida Fax, Georgia, Serif;
  font-weight: normal;
  margin-bottom: .5em;
}

.blog-post p { margin-bottom: 1em; }

.article blockquote { 
  font-size: 11px; 
  color: #555;
  margin: 0 30px 1em 30px;
}
.article blockquote p { font-size: 11px; }

.article ul, .article ol { margin: 10px 0; padding: 0; }
.article ul { list-style-type: disc; }
.article ol { list-style-type: decimal; }

.article li {
  margin: 5px 0 5px 15px;
  padding-left: 10px;
  font-size: 11.5px;
}
.article ol li { margin-left: 20px; }

.blog-post sup {
  font-size: 9px;
  vertical-align: super;
  padding-left: 2px;
  line-height: 0;
}

.blog-post h6 {
  border-bottom: 1px solid #999;
  font-size: 10px;
  line-height: 1.4em;
  color: #555;
  margin: 0;
  font-weight: normal;
}

.blog-post ol.footnotes li { 
  font-size: 10px;
  line-height: 1.4em;
  color: #555;
  padding-left: 0;
}

.blog-post .breakout {
  float: right;
  width: 212px;
  margin: 5px 0 0 10px;
  w\idth: 187px;
  padding: 10px;
  border-top: 2px solid #000;
}

.blog-post .breakout p {
  font-size: 10.5px;
  margin: 0 0 10px 0;
}

.blog-post .breakout h3 { 
  font-size: 10.5px;
  font-family: verdana, sans-serif;
  font-weight: bold;
  margin: 0 0 3px 0; 
}

.blog-post .image-left { float: left; margin: 5px 12px 10px 0; }
.blog-post .image-right { float: right; margin: 5px 0 10px 12px; }
.blog-post .image-full { max-width: 100%; }
body.wide-post .image-full { width: 908px; margin: 0 54px; w\idth: 800px; }
body.wide-post .image-full img { max-width: 800px; }

.blog-post p.image-caption  {
  font: 11px/1.5em lucida fax, georgia, serif;
  color: #555;
  font-style: italic;
  margin: 5px 0 0 0;
}

.blog-post .uxgif {
  max-width: 100%;
}

p.caption-top { margin: 0 0 5px 0; }

.slideshow { margin: 0 auto; }
.slideshow p { text-align: center; margin: 1em 0; }
.slideshow p a { padding: 0 5px; }

#ipad-slideshow .photos { height: 400px; width: 312px; }
#ipad-slideshow { width: 312px; }

.blog-post p.post-footer {
  clear: both;
  border-top: 1px solid #bbb;
  background: #ebebeb;
  padding: .5em 1em;
  margin: 2em 0 0 0;
  color: #666;
  font-size: 11px;
  overflow: hidden;
  text-align: right;
}

.blog-post p.post-footer a.permalink { color: #666666; }

p.post-footer .tags {
  float: left;
  width: 240px;
  text-align: left;
}

.blog-post p.post-footer a { color: #f84141; }


/* Quick Post & Review Line */

.quick-post, .review {
  margin: 0 0 1.5em 0;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 1.5em;
}

.quick-post img.article-image, .review img.article-image { float: left; margin: .4em 1em 0 0; }
.review img.article-image { width: 30px; }
body.entry .review img.article-image { width: auto; }
.review .review-content img.article-image { max-width: 50px; width: auto; }
.entry .quick-post img.article-image { width: auto; }

.article-big-image {
  display: block;
  margin-bottom: 1em;
}

.quick-post a.quick-title {
  color: #f84141;
  font-weight: bold;
  float: left;
  margin-right: .5em;
}

.quick-post embed, .quick-post object, .quick-post iframe, .article-body iframe { margin-bottom: 1em; }

.review-rating {
  float: right;
  margin: .75em 0 1em 1em;
  height: 10px;
  text-indent: -9999px;
  width: 77px;
  background: url(http://www.capndesign.com/style/images/dots.png) top left no-repeat;
}
.rating-0 { background-position: 0 0; }
.rating-1 { background-position: 0 -10px; }
.rating-2 { background-position: 0 -20px; }
.rating-3 { background-position: 0 -30px; }
.rating-4 { background-position: 0 -40px; }
.rating-5 { background-position: 0 -50px; }
.rating-6 { background-position: 0 -60px; }
.rating-7 { background-position: 0 -70px; }
.rating-8 { background-position: 0 -80px; }
.rating-9 { background-position: 0 -90px; }
.rating-10 { background-position: 0 -100px; }

.review h1.review-title {
  font: 12px/1.5em verdana, sans-serif;
  margin: 0;
}

h1.review-title a { color: #f84141; }

.entry h1.review-title, .full-review h1.review-title {
  font-size: 2.5em;
  line-height: 1em;
  margin-bottom: .25em;
}

.quick-post h4.quick-footer, .review h4.review-footer {
  font: 9px/1.5em verdana, sans-serif;
  color: #aaa;
  margin: 0;
}
.quick-post h4.quick-footer { margin-top: -1em; }
.quick-post blockquote+h4.quick-footer { margin-top: 0; }
.quick-post h4.quick-footer a, .review h4.review-footer a { color: #777; }
.quick-post h4.quick-footer a.comment-link, .review h4.review-footer a.comment-link img { vertical-align: -1px; }
.quick-post h4.quick-footer span.tags { padding-left: 1em; }

.review-content { margin-top: 1em; }
.quick-post p, .review p { margin-bottom: 1em; }
.quick-post p:last-child, .review p:last-child { margin-bottom: 0; }


/* Comments */

.comments-header {
  margin-bottom: 2em;
}

.comments-header h2 {
  font: 2.5em/1em Helvetica, sans-serif;
  font-weight: 700;
  padding-bottom: 0;
}

.comment {
  clear: both;
  overflow: hidden;
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px solid #e5e5e5;
}

.comment-header {
  float: left;
  width: 212px;
  margin-right: 20px;
  w\idth: 192px;
}

.comment-header .user-pic {
  float: left;
  margin: 0 10px 5px 0;
}

.comment-header .author {
  font-size: 1.25em;
  line-height: 1.25em;
  color: #555;
}
.comment-header .author a { color: #000; }

.comment-header abbr a {
  display: block;
  font-size: .84em;
  color: #999;
  line-height: 1.25em;
  margin-top: .5em;
}

.comment-content {
  float: left;
  width: 404px;
}

.comment-content p { margin-bottom: 1em; }

.comments-open {
  background: #ebebeb;
  padding: 20px;
}

.comments-open a {
  color: #f84141;
}

h2.comments-open-header {
  display: none;
  font: 2em/1em Gloriola Std, Bree, Helvetica, sans-serif;
  font-weight: 600;
  
}

#comment-login {
  float: left;
  width: 226px;
  margin-right: 21px;
  w\idth: 205px;
}

#comment-greeting {
   margin-bottom: 1em;
}

#comments-open-data input {
  display: block;
  width: 205px;
  padding: 3px;
  w\idth: 199px;
  margin-bottom: .5em;
}

#comments-open-text {
  float: left;
  width: 350px;
  margin-bottom: 1em;
}

#comments-open-text textarea {
  width: 350px;
  height: 250px;
  padding: 5px;
  w\idth: 340px;
  font-size: 1em;
  font-family: verdana, sans-serif;
  line-height: 1.5em;
}

#comments-open-text p, #comments-open-footer {
  font-size: .8em;
  color: #777;
}

#comments-open-footer {
  clear: both;
  text-align: right;
}

/* Page Navigation */

.page-navigation {
  clear: both;
  overflow: hidden;
}

#bottom-navigation { margin-bottom: 2em; }

#bottom-navigation a.left-nav, #bottom-navigation a.right-nav, #bottom-navigation a.center-nav {
  display: block;
  background: #f3f3f3;
  width: 125px;
  text-align: center;
  padding: .5em 0;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
  font-size: 1.2em;
}

#bottom-navigation a.left-nav:hover, #bottom-navigation a.right-nav:hover, #bottom-navigation a.center-nav:hover { background: #ddd; color: #fff; text-decoration: none; }
#bottom-navigation a.left-nav { float: left; }
#bottom-navigation a.right-nav { float: right; }
#bottom-navigation a.center-nav {
  margin: 0 auto;
  width: 150px;
  font-size: 1.5em;
}
#bottom-navigation #index-posts { color: #f84141; font-weight: 600; width: 180px; }
#bottom-navigation #index-posts:hover { color: #fff; }

.navigation-pages {
    text-align: center;
    margin: 0 125px;
  color: #ccc;
}
.navigation-pages li {
    display: inline;
    line-height: 2.4em;
    font-size: 1.2em;
}


/* About Page */

#other-services li {
  font-size: 1.2em;
  line-height: 1em;
  padding: 1em 0 1em 3em;
}

/* 
These icons are from Komodo Media. I made the Hulu and TypePad ones. They are not nearly as good.
http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/
*/

#other-services li.twitter { background: url(/style/images/social-icons/twitter_32.png) 0 .5em no-repeat; }
#other-services li.flickr { background: url(/style/images/social-icons/flickr_32.png) 0 .5em no-repeat; }
#other-services li.typepad { background: url(/style/images/social-icons/typepad_32.gif) 0 .5em no-repeat; }
#other-services li.facebook { background: url(/style/images/social-icons/facebook_32.png) 0 .5em no-repeat; }
#other-services li.lastfm { background: url(/style/images/social-icons/lastfm_32.png) 0 .5em no-repeat; }
#other-services li.delicious { background: url(/style/images/social-icons/delicious_32.png) 0 .5em no-repeat; }
#other-services li.hulu { background: url(/style/images/social-icons/hulu_32.gif) 0 .5em no-repeat; }


/* Review Page */

#review-type-list li {
  font-size: 4em;
  line-height: 1em;
  margin-bottom: 0.5em;
}

#review-type-list li a { color: #000; }
#review-type-list li a span { color: #999; }
#review-type-list li a:hover { text-decoration: none; }

/* Archives Page */

ul#archive-dates { margin-bottom: .5em; }
#archive-dates li ul, #archive-dates li li { display: inline; }
#archive-dates li a.archive-year { color: #777; padding: 0 20px 0 0; }
#archive-dates li { margin-bottom: 2em; }
#archive-dates li a { font-size: 2.5em; padding-right: .7em; color: #000; }
#archive-dates li a:hover { color: #f84141; text-decoration: none; }

.archives #content-main h2 { margin: 2em 0 .25em; font-size: 2em; }
.archives #content-main p { margin-bottom: 1em; color: #999; }
#archive-categories li { display: inline; font-size: 2.5em; padding-right: .7em; line-height: 1.5em; }
#archive-categories li a { color: #000; }
#archive-categories li a:hover { color: #000 !important; text-decoration: none; }

body.archives #tags-box { width: auto; }
body.archives #tags-box li { display: inline; padding-right: .5em; font-size: 2em; line-height: 2em; }
body.archives #tags-box li a:hover { text-decoration: none; }
body.archives #tags-box li.tag-1 a {color: #000; }
body.archives #tags-box li.tag-2 a {color: #333; }
body.archives #tags-box li.tag-3 a {color: #666; }
body.archives #tags-box li.tag-4 a {color: #999; }
body.archives #tags-box li.tag-5 a {color: #ccc; }


/***** RIGHT SIDE *********************************
1: 38px  2: 96px  3: 154px  4: 212px  5: 270px  6: 328px
*/

h4#monthly-aside-title { text-indent: -9999px; background: url(http://www.capndesign.com/style/images/elsewhere-this-month.png) top left no-repeat; height: 4em; }

.module { float: left; overflow: hidden; margin-bottom: 20px; }
.module-full { clear: both; overflow: hidden; margin-bottom: 20px; }

.module h4, .module-full h4 { font-size: 2em; line-height: 1.2em; margin-bottom: .3em; font-weight: 700; font-family: Gloriola Std, Bree, Helvetica, sans-serif; }

.module-rule { clear: both; overflow: hidden; }

.box-footer { clear: both; text-align: right; }
.box-footer a { font-weight: bold; }

.article-metadata { color: #ccc; }
.article-metadata:hover { color: #000; }
.article-metadata h4 { margin-bottom: 0; font-weight: 600; }
.article-metadata .blue h4 { color: #cde5ff; }
.article-metadata:hover .blue h4 { color: #00aeef; }
.article-metadata .red h4 { color: #fed9d9; }
.article-metadata:hover .red h4 { color: #f84141; }
.article-metadata p { font-size: 11px; margin-bottom: 1em; }
.article-metadata a { color: #ffdfae; }
.article-metadata:hover a { color: #ffb034; }


/* Flickr Box */

#flickr-box { width: 232px; margin: 0 20px 20px 0; w\idth: 212px; }
body.monthly-archive #flickr-box { width: 328px; margin: 0 0 20px 0; }

#flickr-box h4 { background: url(http://www.capndesign.com/style/images/flickr-bgd.gif) 0 .2em no-repeat; padding-left: 17px; margin-bottom: .8em; }

.flickr-img-big { width: 212px; margin-bottom: 20px; }
.flickr-img-small { float: left; width: 96px; margin: 0 20px 10px 0; }
.last-image { margin: 0 0 10px 0; }
body.monthly-archive .flickr-img-small { margin-bottom: 20px; }

/* About Box */

#about-box { width: 96px; }
#about-box img { margin-bottom: 20px; }
#about-box h4 {
   margin-bottom: .8em;
}

#about-box p {
  margin: auto 0 8px 0;
  font-size: 10px;
  font-weight: normal;
}

.title-img { margin: 3px 0 2em 0; }

/* Twitter Box */

body.monthly-archive #twitter-box h4 { background-image: url(http://www.capndesign.com/style/images/twitter.png); }

.tweet {
  clear: both;
  border-bottom: 1px solid #e5e5e5;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.25em;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.tweet-date {
  float: left;
  width: 38px;
  margin: 0 20px 0 0;
  text-transform: uppercase;
  font-size: 9px; 
  color: #777;
}
.tweet-date a { color: #777; }
.tweet-text { float: left; width: 270px; margin: 0; }

/* Reviews Box */

#review-box { width: 96px; margin-right: 20px; }
body.monthly-archive #review-box { width: 328px; margin: 0 0 20px 0; }

#review-box ul { list-style: none;
  margin: 0;
  padding: 0;
}

#review-box li { margin-bottom: 1em; color: #888; font-size: 10px; line-height: 1.25em; }
#review-box li h5 { display: inline; font-weight: normal; font-size: 10px; }
#review-box li.full-review h5 { background: url(http://www.capndesign.com/style/images/review-arrow.png) right 4px no-repeat; padding-right: 7px; }
#review-box li a { color: #000; }
#review-box li .review-rating { float: none; margin: .5em 0 0 0; }

/* Tags Box */

#tags-box { width: 212px; }
body.monthly-archive #tags-box, body.search-results #tags-box, body.page #tags-box { width: 328px; margin: 0 0 20px 0; }
#tags-box li { display: inline; padding-right: .75em; font-size: 11px; line-height: 1.75em; }
#tags-box li.tag-1 a {color: #d1eda0; }
#tags-box li.tag-2 a {color: #bbe571; }
#tags-box li.tag-3 a {color: #a4dc41; }
#tags-box li.tag-4 a {color: #8dd312; }

/* Last.fm Boxes */

#lastfm-recent-box { clear: both; width: 154px; margin-right: 20px; }
#lastfm-recent-box li { font-size: 10px; margin-bottom: .75em; line-height: 1.25em; color: #777; }

#lastfm-weekly-box { width: 154px; overflow: visible; }
body.monthly-archive #lastfm-weekly-box { width: 328px; margin: 0 0 20px 0; }
#top-track-chart { width: 154px; height: 250px; }
body.monthly-archive #top-track-chart { width: 328px; height: 150px; }

/* Search Box */

#search-box { width: 328px; }

#search {
  width: 250px;
  font-family: verdana, helvetica, sans-serif;
  padding: .25em;
}

#search-box input.submit {
  background: #f84141;
  border: 0;
  padding: .5em 0;
  width: 50px;
  color: #fff;
}

/* Archives Box */

#archives-box ul { margin-bottom: .5em; }
#archives-box ul+ul, #archives-box li { display: inline; }
#archives-box li a.archive-year { display: block; float: left;width: 58px; color: #777; padding: 0; }
#archives-box ul li a { font-size: 11px; padding-right: .2em; }

/* About this Entry */

body.wide-post #about-this-entry { float: left; width: 232px; margin-right: 20px; w\idth: 212px; }

/* Recent Entries */

#recent-entries li { margin-bottom: 1em; }

body.wide-post #recent-entries li { float: left; width: 174px; margin-right: 20px; margin-bottom: 0; w\idth: 154px; }
body.wide-post #recent-entries li:last-child { margin-right: 0; }

/***** UTILITIES *********************************/

#ajax-loader {
  width: 100px;
  margin: .5em auto;
  text-indent: -9999px;
  background: url(http://www.capndesign.com/style/images/ajax-loader.gif) top center no-repeat;
}