@import 'https://fonts.googleapis.com/css?family=Eczar|Alike|Lora|Roboto+Slab';
#header {
display: none;
}
h1.title {    /* main headline */
display: none;
/* 
font-size: 3em;
font-weight: bold;
text-align: center;
margin: 0 0 50px 0;
line-height: 1.2em
*/
}
h4.byline {
text-align: center;
font-weight: bold;
}
#splash_caption {
background-color: #fff;
opacity: .8;
filter: alpha(opacity=80);
padding: 0 5px;
position: relative;
bottom: 0;
line-height: 1.2em;
}
#top_image {
position: relative;
}
div.ng_endnote_contact {
border-top: 1px solid #444;
font-size: 1.2em;
font-style: italic;
margin: 0 auto;
text-align: center;
width: 40%;
}
#article > p.subhead, #article-wrapper > p.subhead {
color: #333;
font-family: serif;
font-size: 2em;
font-weight: bold;
line-height: 1.61em;
margin: 0 auto 30px;
max-width: 600px;
padding: 0 0 0 5px;
}
#article-wrapper a:hover {
border: none;
}
#article-wrapper {
background-color: #fff;
}
figcaption {
margin: 3px 0 0 0;
}
.published-date { 
display: none;
}
strong {
font-weight:bold;
}
.sinclair_credit_box{
font-weight:bold;
text-align:center;
}
aside.code-item h2 {
font-weight: bold;
font-size: .8em;
}
aside.code-item h3, #bottom_contents h3 {
font-weight: bold;
font-size: 1.3em;
}
hr.separator {
width: 80%;
text-align: center;
color: #ccc;
}
div.document_highlight {
box-shadow: -8px 8px 50px -10px;
padding: 10px 15px;
font-family: courier;
font-size: .7em;
line-height: 1.6em;
width: 350px;
}
highlight {
background-color: yellow;
padding: 0 3px;
margin: 0 -3px;
}
#article > h3, #article-wrapper > h3 { /* subheads */ 
color: #333;
font-family: serif;
font-size: 2em;
font-weight: 300;
line-height: 1.61em;
margin: 0 auto 30px;
max-width: 600px;
font-weight: bold;
padding: 0 0 0 5px;
}
p < span.ng_byline_name, p < span.ng_byline_email {
padding: 0;
margin: 0;
}
p span.ng_byline_name {
font-weight: bold;
}
p span.ng_byline_email {
font-style: italic;
}
#article-wrapper figcaption {
max-width: 90%;
margin-left: auto;
margin-right: auto;
line-height: 1.1em;
font-style: italic; 
}

/*  intro page styles */
  #intro_container {
  width: 100%;
  position: absolute;
  overflow: hidden;
  }
  #intro_container img#opening_gif {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  z-index: 10;
  }
  #intro_container #text_blocks {
  position: relative;
  top: 60px;
  font-size: 40pt;
  font-family: 'Alike', serif;
  line-height: 1.1em;
  z-index: 10;
  float: right;
  margin: 0 5px 0 0;
  padding: 0 0 5px 0;
  text-align: right;
  width: 100%;
  }
  #intro_container .intro_text {
  opacity: 0;
  text-shadow: -1px -1px 30px #444, 1px -1px 30px #444, -1px 1px 30px #444, 1px 1px 30px #444;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1%;
  }
  #skip_intro {
  z-index:20;
  opacity: 0;
  position: fixed;
  bottom: 10px;
  right: 0;
  height: 50px;
  width: 50px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  box-shadow: 0 0 10px 5px #444;
  background-color: #e7e7e7;
  cursor: pointer;
  float: right;
  margin: 0 20px 0 0;
  }
  #skip_intro p#skip_text {
  text-align: center;
  margin: 0;
  padding: 0;
  position: absolute;
  font-size: 1em;
  text-transform: uppercase;
  top: 10px;
  width: 100%
  }
/* intro page index styles */
#project-index {
width: 100%;
margin: 0 auto 40px auto;
text-align: center;
}
#project-index a, #project-index a:visited {
color: #993300;
text-decoration: none;
border-bottom: none;
}
#project-index .project-index-item {
width: 300px;
height: 400px;
padding: 0;
margin: 0 auto 40px 2%;
line-height: 1em;
position: relative;
display: inline-block;
text-align: left;
}

#project-index .project-index-item:hover {
top: 5px;
left: 5px;
}
#project-index .project-index-image-container {
width: 300px;
margin: 0 auto;
}
#project-index .project-index-image-container img {
width: 100%;
box-shadow: 0 0 70px -15px #000;
}
#project-index .project-index-image-container img:hover {
box-shadow: 0 0 60px -20px #000;
}
#project-index .inactive {
pointer-events: none;
}
#project-index div.project-index-item.inactive div.project-index-image-container img {
opacity: .3;
box-shadow: none;
} 
#project-index .project-index-text {
width: 300px;
position: relative;
bottom: -406px;
z-index: 100;
background-color: #fff;
opacity: .8;
font-weight: bold;
margin: 0 auto;
}
#project-index .project-index-header {
width: 100%;
padding: 6px 3px 3px 6px;
margin: 0 0 6px 0;
}
#project-index span.project-index-cta {
text-transform: uppercase;
}
#scroll_prompt {
opacity: 0;
margin: 0 auto;
width: 100%;
height: 77px;
position: absolute;
bottom: 35px;
pointer-events: none;
z-index: 1;
}
#scroll_prompt img#chevron_image {
width: 150px;
display: block;
margin: 0 auto;
}
.footer-list {
clear: both;
}
aside.left.block-item.code-item div#about_project {
}
#about_project {
background-color: #e7e7e7;
box-shadow: -8px 8px 50px -10px;
margin: 30px 0 0 -20px;
width: 100%;
padding: 15px;
font-size: .8em;
font-family: arial,sans-serif;
line-height: 1.5em;
}
#project_contents em, #bottom_contents em {
font-style: italic;
}
#project_contents ul, #bottom_contents ul {
list-style: square;
margin: 0 0 0 20px;
}
#project_contents a, #project_contents a:visited, #bottom_contents a, #bottom_contents a:visited {
font-weight: bold;
color: #993300;
text-decoration: none;
border-bottom: none;
}
// refer styles
.comment-item h3 {
font-size: 1.3em;
}
.comment-item p {
font-size: 1.3em;
margin: 0 0 15px 0;
}