/*--  HTML5 fun --*/

section, header, aside, footer, nav, article,
time, figure {
  display: block;
}

/*-- Foundation --*/

html { background: #303030 url(../images/darkgrain05.png) } 

body {
  color: #333;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; ;
  font-size: 12.5px;
  line-height: 20px;
}

a { text-decoration: none; }
a:link, a:visited { color: #E58; }
a:hover { color: #000; }

em { font-style: italic; }
strong { font-weight: bold; }
p, ul, ol, h1, h2, h3 { margin-bottom: 20px; }

#content li { margin-left: 20px; }
#content ul li { list-style: disc; }
#content ul ul li { list-style: circle; }
#content ol li { list-style: decimal; }
#content ol ol li { list-style: lower-roman; }

img { display: block; } /* watch out for this */

code {
  font-family: Inconsolata, Consolas, 'Courier New', Courier, monospace;
}

p code, li code, h1 code, h2 code, h3 code, h4 code {
  background: url(../images/grain03.png);
  padding: 0 0.2em;
}

pre {
  display: block;
  padding: 20px;
  background: url(../images/grain03.png);
  margin-bottom: 20px;
  -moz-border-radius-bottomleft: 15px;
  -webkit-border-bottom-left-radius: 15px;
  border-bottom-left-radius: 15px;
  -moz-box-shadow: 0px 3px 8px rgba(0,0,0,0.15);  
  -webkit-box-shadow: 0px 3px 8px rgba(0,0,0,0.15); 
  box-shadow: 0px 3px 8px rgba(0,0,0,0.15);  
  overflow: auto;
}

h1, h2, h3, h4,
#masthead nav a, 
.oldernewer, .info,
.deck,
#hi_there, #pagefoot dl,
#comment-form input[type="text"], td.form label, 
.slab {
  font-family: Serifa, "Serifa Std", Stymie, "EF Stymie", "ITC Lubalin Graph",  "ITC Lubalin Graph Std", Lexia, Glypha, "Glypha Std", Soho, Memphis, "Memphis Std", Rockwell, "Rockwell Std", Georgia, serif;
}

h1 {
  font-size: 62px;
  line-height: 60px;
  letter-spacing: -0.04em;
  text-shadow: 0 2px 3px rgba( 0, 0, 0, .13);
  border-bottom: 9px double #EEE;
  border-color: rgba(0,0,0,.08);
  margin-bottom: 11px;
}

h2, #hi_there {
  font-size: 36px;
  line-height: 40px;
  text-shadow: 0 2px 4px rgba( 0, 0, 0, .13);
  letter-spacing: -0.03em;
}

h2, h3, h4, #hi_there, #pagefoot dt { font-weight: bold;} 

h3 { font-size: 20px; }
h4, p.comments-closed { font-size: 15px; }

.deck {
  font-size: 17px;
  font-weight: 300;
}

.caption {
  font-size: 11px;
  color: #777;
}

a.button {
  font-size: 14px;
  padding: 5px 15px;
  background: #E47 url(../images/button_grad01.png) repeat-x;
  color: #FFF;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 0px 3px 8px rgba(0,0,0,0.15);  
  -webkit-box-shadow: 0px 3px 8px rgba(0,0,0,0.15); 
  box-shadow: 0px 3px 8px rgba(0,0,0,0.15);   
}
a.button:hover {  background-color: #C25; }
a.button:active { background-color: #333; }

/******* Structure and Sections *****/

#masthead {
  height: 40px;
  font-size: 20px;
  overflow: visible;
  background: url(../images/dropshad-up03.png) bottom left repeat-x;
}

#masthead ul {
  margin-bottom: 0;
}

#masthead nav li {
  font-weight: 500;
  font-size: 18px;
  float: left;
  text-transform: lowercase;
  margin: 0 10px;
  display: inline; /* IE6 fix */
}

#masthead nav a {
  padding: 0px 10px 5px;
  margin-bottom: -5px;
  color: #FFF;
  display: block;
  line-height: 40px;
  position: relative;
  background: url(../images/grad09.png) no-repeat 0 50px;
  outline: none;
}

#masthead nav a:focus {
  color: #333;
  background: #FFF !important;
}

#masthead nav a:hover, #masthead nav a.selected {
  -moz-box-shadow: 0px 3px 8px rgba(0,0,0,0.1);  
  -webkit-box-shadow: 0px 3px 8px rgba(0,0,0,0.1); 
  box-shadow: 0px 3px 8px rgba(0,0,0,0.1);   
}

#masthead nav a.selected {
  padding-bottom: 10px;
  margin-bottom: -10px;
}

#masthead nav a.nav-home { 
  text-transform: uppercase;
  font-weight: 100;
}
#masthead nav a.nav-home span {
 color: #F8A; 
  font-weight: 700;
  letter-spacing: -0.03em;
}

#masthead nav a.nav-home.selected,
#masthead nav a.nav-home:hover  { background-color: #F8A; background-position: 0 -250px; }
#masthead nav a.nav-home.selected span,
#masthead nav a.nav-home:hover span { color: #222; }

#masthead nav a.nav-articles.selected,
#masthead nav a.nav-articles:hover { background-color: #3D8; background-position: -240px -250px; }

#masthead nav a.nav-resources.selected,
#masthead nav a.nav-resources:hover { background-color: #EB2; background-position: -480px -250px; }

#masthead nav a.nav-portfolio.selected,
#masthead nav a.nav-portfolio:hover { background-color: #8AF;  background-position: -720px -250px; }

#masthead nav a.nav-about.selected,
#masthead nav a.nav-about:hover { background-color: #C66; background-position: -960px -250px; } 

#masthead nav a.nav-subscribe:hover {  background-color: #C4C;   background-position: -1200px -250px; }


.nav-subscribe img {
  display: inline;
  position: relative;
  top: 2px;
  left: 2px;
}

/****** content ******/

#content {
  padding-top: 20px;
  background: #FFF;;
}

#content:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/****** older newer ******/

.oldernewer {
  height: 40px;
  clear: both;
}

.oldernewer p {
  margin-bottom: 0;
}

.oldernewer a {
  display: block;
  height: 40px;
  margin: 0 10px;
  text-decoration: none;
  font-size: 18px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  width: 110px;
  color: #333;
  color: rgba(0,0,0,.2);
  background:   url(../images/oldernewer01.png) no-repeat -999px 0;
}

.oldernewer a:hover {
  background-color: rgba(0,0,0,.03);
  color: rgba(0,0,0,.8);
}

.older a {
  float: left;
  line-height: 40px;
  padding-left: 30px;
  background-position: 5px 0px ;
}

.older a:hover {
  background-position: 5px -40px;
}



.newer a {
  float: right;
  line-height: 40px;
  text-align: right;
  padding-right: 30px;
  background-position:   117px -80px;
}

.newer a:hover {
  background-position: 117px -120px;
}

.oldernewer .comment-link a {
  float: left;
  line-height: 40px;
  width: 200px;
  padding: 0 10px;
  font-size: 18px;
  margin-left: 330px
}

/****** article-head ******/

#content .info p {
  margin-bottom: 0;
}

#content .info time,
#content .info .comment-link,
#content .info .tags {
  width: 140px;
  float: left;
}

/****** info ********/

time {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  overflow: hidden;
  margin-bottom: 0;
  font-weight: bold;
}

time span {
}

time .day   { font-weight: 100; color: rgba( 0, 0, 0, .8);  }
time .month { font-weight: 600; color: rgba( 0, 0, 0, .3);  }
time .year  { font-weight: 100; color: rgba( 0, 0, 0, .8);  }


#content .info .comment-link {
}

.comment-link a {
  font-size: 14px;
}

#content .info .tags {
  font-size: 14px;
  font-weight: bold;
}

#content .info .tags li {
  margin: 0;
  list-style: none;
}

/******* article-list ********/

.article-list {
  border-bottom: 3px solid #DDD;
  padding-bottom: 17px;
  margin-bottom: 20px
}

.article-list h3 {
  margin: 0;
}

.article-list .info {
  margin-bottom: 20px;
}

.article-list time { font-size: 14px; }

.article-list a img {
  width: 298px;
  border: 1px solid #DDD;
  -moz-box-shadow: 0px 3px 6px rgba(0,0,0, .15);
  -webkit-box-shadow: 0px 3px 6px rgba(0,0,0, .15);
  box-shadow: 0px 3px 6px rgba(0,0,0, .15);
}

.article-list a:hover img {
  border-color: #AAA;
}


/**** Speech Bubble Icons *****/
.spch-bub-inside,
.spch-bub-outside {
  position: relative;
}
a.spch-bub-inside,
a.spch-bub-outside {
  color: #E58;
  text-decoration: none;
}
.spch-bub-inside em,
.spch-bub-outside em {
  font-style: normal;
}
.spch-bub-inside em {
  background: #E58;
  color: #FFF;
  padding: 0 0.4em;
  -moz-border-radius: 0.25em;
  -webkit-border-radius: 0.25em;
  border-radius: 0.25em;
  position: relative;
}
.spch-bub-inside .point,
.spch-bub-outside .point {
  width: 0;
  height: 0;
  position: absolute;
  top: 0.9em;
  left: 0.4em;
  display: block;
  border-left: 0.4em solid #E58; 
  border-bottom: 0.4em solid #FFF; /* IE fix */
  border-bottom: 0.4em solid rgba(0,0,0,0); 
  overflow: hidden; /* IE fix */
}
.spch-bub-outside {
 padding-left: 1.8em;
}
.spch-bub-outside .bubble {
  top: 0;
  left: 0;
  display: block;
  position: absolute;
  height: 0.9em;
  width: 1.5em;
  background: #E58;
  -moz-border-radius: 0.2em;
  -webkit-border-radius: 0.2em;
  border-radius: 0.2em;
}
a.spch-bub-inside:hover,
a.spch-bub-outside:hover {

  color: #000;
}
a.spch-bub-inside:hover em,
a.spch-bub-outside:hover .bubble  {
  cursor: pointer;
  background: #000;
  color: #FF0;
}
a.spch-bub-inside:hover .point,
a.spch-bub-outside:hover .point {
  border-left-color: #000; 
}
div.spch-bub-outside {
  height: 1.5em;
  width: 0;
}


/******* footer ********/

p.comments-closed {
  margin-top: 20px;
}

#pagefoot {
  padding-top: 20px;
  color: #FFF;
  background: url(../images/dropshad-down03.png) repeat-x;
}

#hi_there { 
  margin-bottom: 0; 
  text-shadow: 0 3px 6px rgba( 0, 0, 0, .6);
}

#pagefoot img.col2 {
  width: 120px;
  height: 120px;
  border: 10px solid rgba(24,24,24,.3);
  -moz-border-radius: 16px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  -moz-box-shadow: 0px 3px 8px rgba(0,0,0, .2);
  -webkit-box-shadow: 0px 3px 8px rgba(0,0,0, .2);
  box-shadow: 0px 3px 8px rgba(0,0,0, .2);
}

#pagefoot dt { 
  font-size: 20px;
  margin-bottom: 0;

}

#pagefoot dd a {
  line-height: 40px;
  font-size: 20px;
  display: block;
  padding: 9px 9px;
  display: inline;
  background: rgba(0,0,0,.1);
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
#pagefoot dd a:hover {
  background: rgba(255,255,255,.1);
  color: #FFF;
}

#pagefoot p.deck {
  font-size: 16px; 
  margin-bottom: 40px;
}

#donext {
}

#donext div {
  display: inline; /* IE fix */
  padding: 10px;
  background: rgba(48,48,48,.5) url(../images/comments_error02.png);
  margin: 10px;
  width: 200px;
  padding: 10px;
  float: left;
  height: 80px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

#donext div:first-child {
  width: 440px;
  height: 60px;
}

#donext div:hover { background-color: rgba(24,24,24,.3); }

#donext h3 {
  margin-bottom: 0;
  color: #EE6;
}

#donext p {
  margin-bottom:0;
}

#donext h4 {
  font-size: 14px;
  color: #CEF;
}

#donext h4 .or {
  color: #FFF;
  font: 12.5px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;

}

#donext a {
  padding: 0 3px;
  font-weight: bold;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;

}

#donext a:hover {
  background: rgba(255,255,255,.1);
  color: #FFF;
}

#copyright { color: #888; }