/* The "section" class implicitly needs a clearfix; adding it here for convenience. */

.clearfix:after,
.section:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix, .section {
    display: inline-block;
}

html[xmlns] .clearfix,
html[xmlns] .section {
    display: block;
}

* html .clearfix,
* html .section {
    height: 1%;
}

span.replaced { visibility: hidden; }
span.hidden { display: none; }


body {
  font-family: Verdana, sans-serif;
  font-size: 82.5%;
  line-height: 1.5em;
  margin: 0;
  padding: 0;
}

  body * {
    margin: 0;
    padding: 0;
  }
  
  
h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

h4 {
  font-size: 17px;
  color: #555;
  margin: 1.0em 0 0.6em;
}

h5 {
  font-size: 15px;
  color: #2a2a2a;
  margin: 1.0em 0 0.6em;
}

h6 {
  font-size: 14px;
  color: #000;
  margin: 1.0em 0 0.6em;
}

a img {
  border: 0;
}

ul, li {
  list-style-type: none;
}

ol, ul {
  margin: 0 0 15px;
}

#page a.img,
#page a.img:link,
#page a.img:visited {
  border: none;
}

/* Link bar */

div#links {
  margin: 0 auto;
  width: 835px;
  padding: 16px 0;
  height: 16px;
  overflow: hidden;
}

div#links_wrapper {
  background: #fff;
}

div#links li {
  display: inline;
}

div#links li a {
  color: #666;
}

div#links li.selected a {
  color: #000;
  font-weight: bold;
  text-decoration: none;
}

ul#internal_links {
  float: left;
}

ul#internal_links li {
  margin-right: 25px;
}

ul#external_links {
  float: right;
}

ul#external_links li {
  margin-left: 25px;
  padding-left: 21px;
}

li#scripty_link {
  background: url(http://prototype.conio.net/new/images/link-logo-scripty.png) no-repeat center left;
}

li#rails_link {
  background: url(http://prototype.conio.net/new/images/link-logo-rails.png) no-repeat center left;
}



p a, p a:link,
h1 a, h1 a:link,
h2 a, h2 a:link,
h3 a, h3 a:link,
h4 a, h4 a:link,
h5 a, h5 a:link,
h6 a, h6 a:link {
  color: #036;
  border-bottom: 1px solid #036;
  text-decoration: none;
}

  p a:visited {
    border-bottom: 1px solid #666;
  }

code {
  font-family: "Panic Sans", "Bitstream Vera Sans Mono", Monaco, Consolas, Andale Mono, monospace;
  font-size: 13px;
}

p code,
li code {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 0 3px;
}

pre code {
  background-color: transparent;
  border: 0;
  padding: 0;
}
 
  
#page {
  margin: 0 auto;
  padding-bottom: 100px; /* FIXME: Temporary as pages are built */
}


/* top */

.related-links {
  width: 835px;
  font-size: 0.9em;
  margin: 0 auto 10px;
  padding: 10px 0 0;
}

  .related-links a {
    color: #000;
    text-decoration: none;
  }
  
  .related-links ul {
    list-style-type: none;
  }
  
  .related-links ul.internal {
    float: left;
    width: 355px;
  }
  
    .related-links ul.internal li {
      text-align: center;
    }
  
  .related-links ul.external {
    float: right;
    width: 295px;
  }
  
    .related-links li {
      float: left;
      padding: 0 15px;
      width: 85px;
      margin-right: 5px;
    }
    
      .related-links li.last {
        margin-right: 0;
      }
    
    .related-links ul.external li.scripty {
      padding: 0 8px 0 22px;
      background: url(../images/icon-scripty.png) no-repeat;
      margin-right: 65px;
    }

    .related-links ul.external li.rails {
      padding: 0 8px 0 22px;
      background: url(../images/icon-rails.png) no-repeat;
    }


.banner {
  height: 152px;
  padding: 1px 0;
  background: url(../images/header-stripe.png) repeat-x;
}

  .banner-content {
    width: 835px;
    margin: 0 auto;
  }

  .banner h1 {
    width: 236px;
    height: 150px;
    background: url(../images/header-logo.png) no-repeat;
  }
  
    .banner h1 span {
      display: none;
    }
   
.banner-small {
  height: 75px;
  padding: 1px 0;
  background: url(../images/header-stripe-small.png) repeat-x;
} 

  .banner-small h1 {    
    width: 118px;
    height: 75px;
    background: url(../images/header-logo-small.png) no-repeat;
    margin-left: 60px;
  }
  
    .banner-small h1 span {
      display: none;
    }
    

/* PAGE CONTENT */

.page-content {
  width: 955px;
  margin: 30px auto 0;
}

  .page-content .page-title {
    margin-left: 120px;
    margin-bottom: 15px;
    font-size: 27px;
    letter-spacing: -1px;
    color: #444;
  }
  
  .page-content .page-introduction {
    margin-left: 120px;
    font-size: 15px;
    margin-bottom: 25px;
  }
  
    .page-content .page-introduction p {
      margin-top: 0;
    }
  

.page-content .section {
  width: 955px;
  margin: 10px 0 20px;
}

  .page-content .section .section-title {
    width: 110px;
    margin-right: 10px;
    padding-right: 0;
    float: left;
    text-align: right;
    overflow: hidden;
  }

    .page-content .section .section-title h3 {
      color: #999;
      font-size: 14px;
      line-height: 110%;
      padding-right: 10px;
      padding-bottom: 5px;
    }
    
  .page-content .section .section-content {
    width: 835px;
    float: left;
  }
  
.page-content a,
.page-content a:link {
  color: #036;
  border-bottom: 1px solid #036;
  text-decoration: none;
}

  .page-content a:visited {
    border-bottom: 1px solid #bbb;
  }
  
.page-content ul,
.page-content ol {
  margin: 10px 0;
}
 
.page-content li {
  margin: 5px 0 8px 20px;
  list-style-type: disc;
}

.page-content p {
  margin: 0 0 0.8em;
}

.page-content pre {
  color: #333;
  background-color: #f0f0ff;
  border: 1px solid #dde;
  padding: 3px 5px;
  margin: 0 0 1em;
}

.page-content .two-column {
  
}

  .page-content .two-column-left,
  .page-content .two-column-right {
    width: 475px;
    margin-right: 5px;
    float: left;
  }
  
  .page-content .two-column-right {
    margin-right: 0;
  }
  
  .page-content .two-column .section {
    width: 475px;
  }
  
    .page-content .two-column .section-content {
      width: 345px;
      padding-right: 10px;
    }
    
    
    
.smallcaps {
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 1px;
}


/* MASTHEAD */

div#masthead {
  margin-top: 50px;
  background: url(../images/header-stripe-small.png) repeat-x top left;
  height: 76px;
}

div#masthead div#masthead_content {
  margin: 0 auto;
  width: 835px;
  position: relative;
}

div#masthead h1#logo {
  background: url(../images/header-logo-small.png) no-repeat 0 1px;
  width: 118px;
  height: 76px;
  position: relative;
  left: 60px;
}