@import url(reset.css);
@import url(grid.css);
@import url(id-comments.css);
@import url(fancybox-1.2.5.css);

/*

SANS-SERIF: Helvetica Neue, Helvetica, Arial, sans-serif;
BODY TEXT : Georgia, Palatino, Palatino Linotype, Times, 'Times New Roman', serif;
MONOSPACED: Consolas, Monaco, 'Courier New', Courier, monospace;

*/

html {font-size:100%;}
body  {
  font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
  background: #dcd8cc; /*7D7B74*/
  line-height: 1.5;
  /*background: #ccc;*/
  padding: 1em 0;
}

/* Basic
--------------------------------------------------------------*/
em {font-style: italic;}
strong {font-weight: bold;}
a {text-decoration: none;}
abbr {border-bottom: #444 1px dotted;}

/* Typography 
--------------------------------------------------------------*/
.content h1, .content h2, .content h3, /*.content h4, .content h5, .content h6*/
.comments h2 {
  font-family: 'HelveticaNeue-Bold', 'Helvetica Neue Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -.04em;
}
.content h1 {
  font-size: 36px;
  color: #000;
  margin: 1px 0 16px;
  float: right;
  clear: right;
  width: 520px;
}
.content h2 {
  font-size: 20px; 
  margin: 20px 0 4px; 
  padding: 0 0 3px;
  color: #222;
  border-bottom: 1px solid #ccc;
}
.content h3 {
  font-size: 14px;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 1.5em 0 .3em;
}
.content h4 {
  font-size: 15px;
  font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
  font-weight: bold;
  margin: 1em 0 0;
  color: #333;
}
.content p {
  margin: 0 0 .7em;
  color: #444;
}
.content ol, 
.content ul {
  margin: 0 0 .7em 0;
  color: #444;
  list-style-position: outside;
}
.content ol {list-style: decimal;}
.content ul {list-style: disc;}
.regular .content h1 + p,
.photo .content h1 + p,
.photoset .content h1 + p,
.video .content h1 + p {
  font-family: 'HelveticaNeue-Bold', 'Helvetica Neue Bold', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 1em;
  color: #333;
}

blockquote p {
  font-style: italic;
  font-size: 16px;
  color: #666;
}
blockquote.long {
  background: none;
  border-left: 1px solid #ccc;
  padding-left: 10px;
  margin-left: 0;
}
blockquote.long p {
  font-style: normal;
  font-size: 14px;
  font-style: italic;
  color: #666;
}

/* Anchors 
--------------------------------------------------------------*/
.content a:link,
.content a:visited {border-bottom: 2px solid #B6DAE5; color: #00688D;}
.content a:hover,
.content a:active {border-bottom: 2px solid #35B6F2; color: #009FD9;}

.figure a:link, .figure a:visited, .figure a:hover, .figure a:active {border: 0;}

.content h1 a:link,
.content h1 a:visited {color: #000; border: none;}
.content h1 a:hover,
.content h1 a:active {color: #009FD9; border: none;}

.link h1 a:link,
.link h1 a:visited {color: #444; border: none;}
.link h1 a:hover,
.link h1 a:active {color: #000; border: none;}

.media p a:link,
.media p a:visited,
.media p a:hover,
.media p a:active {border: none;}

.photo .high-res:link,
.photo .high-res:visited {color: #444; background: rgba(255,255,255,0.4);}
.photo .high-res:hover,
.photo .high-res:active {color: #000; background: rgba(255,255,255,0.7);}

.next:link, .next:visited, .prev:link, .prev:visited, .up:link, .up:visited {color: #666;}
.next:hover, .next:active, .prev:hover, .prev:active, .up:hover, .up:active {color: #333;}

/* Main navigation 
--------------------------------------------------------------*/
#main-nav li {
  float: left;
  padding: 10px;
  display: none;
}

/* Structure 
--------------------------------------------------------------*/
.container {
  margin: 0 auto;
  width: 960px;
  border: 20px solid rgba(0,0,0,.2);
  overflow: hidden;
}
.primary {
/*  background: #fff;*/
  background: #f5f5ed;
}
.group, 
.post {
/*  background: rgba(0,255,0,0.1);*/
/*  width: 520px;*/
  margin: 0 10px;
  padding: 30px 210px;
  border-bottom: 1px solid #ddd; 
  position: relative;
}
.content.media {
  margin: 14px 0 10px;
  position: relative;
}
.meta {
/*  background: rgba(0,255,0,0.2);*/
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: 200;
  color: #aaa;
  float: left;
  margin-left: -200px;
  top: 44px;
  text-align: right;
  width: 160px;
  position: absolute;
}
.meta .permalink,
.meta .tags {
  font-size: 12px;
  margin: 0 0 5px;
  position: relative;
  top: 10px;
  z-index: 5;
/*  display: none;*/
}
.meta .tags li {
  display: inline;
  font-size: 12px;
}
.meta .tags a:after {content: ", ";}
.meta .tags li:last-child a:after {content: "";}
.meta a:link, .meta a:visited {color: #aaa;}
.meta a:hover, .meta a:active {color: #555;}

#pagination {
  background: #bbb;
  color: #666;
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 200;
  overflow: hidden;
}
.next, .prev {
  margin: 10px 10px 0;
  float: left;
}
.up {
  margin: 10px 10px 0;
  float: right;
}

/* Figure module
--------------------------------------------------------------*/
.figure {margin-bottom: 10px;}
.figure p {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  color: #555;
}
.figure.l {
  margin-left: -200px;
  padding-top: 60px;
}
.figure.l img {width: 920px;}

/* Regular
--------------------------------------------------------------*/

/* Photo
--------------------------------------------------------------*/
.photo .high-res {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 200;
  padding: 3px 6px;
  position: absolute;
  bottom: 12px;
  left: 5px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

/* Photoset
--------------------------------------------------------------*/

/* Quote
--------------------------------------------------------------*/
.quote .content > p {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 200;
  color: #555;
  margin-top: 20px;
  padding-left: 80px;
}
.quote .content > p:before {
  content: "\2014";
  margin-left: -1.3em;
}
.quote .content {margin: 12px 0;}
/*.quote blockquote p:before {
  content: "\201d";
  float: left;
  font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
  font-size: 100px;
  line-height: 22px;
  font-style: italic;
  color: #ccc;
  margin-left: -80px;
  margin-top: 50px;
}*/
.quote blockquote p {
  font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
  font-size: 22px;
  display: inline;
  width: 600px;
  background: #B6DAE5;
  padding: 2px 6px;
  margin-left: -46px;
}
.quote blockquote p + p {
  margin: .7em 0 0 0;
}

/* Link
--------------------------------------------------------------*/
.link h1 {font-size: 24px;}
.link h1 a {padding-right: 28px;}
.link h1 a:link, .link h1 a:visited {background: url(../images/link-pointer.png) no-repeat right 55%;}
.link h1 a:hover, .link h1 a:active {background: url(../images/link-pointer-hover.png) no-repeat right 55%;}
.link .meta {top: 32px;}


/* Chat
--------------------------------------------------------------*/

/* Audio
--------------------------------------------------------------*/

/* Video
--------------------------------------------------------------*/

/* Clearing floats
--------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
.clearfix:after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}