body {
  background:#404040 url(../images/illustration.gif) 790px 0px no-repeat fixed;
  color:#aaa;
  font:13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  }

small { font-size:11px; }

a {
  color:#fff;
  text-decoration:none;
  }

div.limiter {
  margin:0px;
  width:780px;
  }

div.left {
  float:left;
  width:390px;
  }

div.right {
  float:right;
  width:390px;
  }

div.root {
  width:790px;
  background:#383838 url(../images/bg.gif) 780px 0px no-repeat;
  }

/**
 * HEADER =============================================================
 */
#header div.limiter {
  background:url(../images/sprite.jpg) no-repeat;
  height:99px;
  border-bottom:1px solid #111;
  overflow:hidden;
  }

#header a {
  background-image:url(../images/sprite.jpg);
  background-repeat:no-repeat;
  display:block;
  text-indent:-999px;
  overflow:hidden;
  }

#header h1.logo {
  padding:20px 20px 0px;
  float:left;
  }

  #header h1.logo a {
    background-position:-20px -20px;
    width:260px;
    height:60px;
    }

#header div.contact {
  float:right;
  clear:right;
  padding:17px 20px 0px 0px;
  }

  #header a.contact {
    background-position:-760px -250px;
    line-height:15px;
    height:15px;
    padding-left:30px;
    color:#a0a0a0;
    text-indent:0px;
    font-weight:bold;
    }

  #header a.contact:hover { color:#fff; }

#navigation { float:right; }

#navigation a {
  width:130px;
  height:50px;
  }

  #navigation a.download { background-position:-390px -100px; }
  #navigation a.about    { background-position:-520px -100px; }
  #navigation a.examples { background-position:-650px -100px; }

  #navigation a.download:hover { background-position:-390px -150px; }
  #navigation a.about:hover    { background-position:-520px -150px; }
  #navigation a.examples:hover { background-position:-650px -150px; }

  #navigation .active a.download { background-position:-390px -200px; }
  #navigation .active a.about    { background-position:-520px -200px; }
  #navigation .active a.examples { background-position:-650px -200px; }

/**
 * POSTER =============================================================
 */
#poster div.limiter {
  background:#000;
  height:300px;
  }

/**
 * FEATURED ===========================================================
 */
#featured div.limiter {
  border-top:1px solid #303030;
  padding:10px 0px;
  height:80px;
  background:#202020;
  }

/**
 * CONTENT ============================================================
 */
#content div.limiter { background:#282828; }

/**
 * TWITTER ============================================================
 */
#twitter div.limiter {
  border-top:10px solid #141414;
  padding:20px 0px 19px;
  border-bottom:1px solid #202020;
  background:#181818;
  color:#666;
  }

#twitter div.tweet {
  padding:20px;
  line-height:30px;
  margin:0px 20px;
  background:#101010;
  }

#twitter a { color:#48a; }
#twitter a:hover { color:#fff; }

#twitter div.tweet-text {
  float:right;
  width:545px;
  font-size:24px;
  font-weight:300;
  }

#twitter div.tweet-date {
  width:155px;
  float:left;
  color:#ccc;
  }

#twitter div.right,
#twitter div.left {
  width:350px;
  font-weight:bold;
  padding:5px 20px 0px;
  }

#twitter div.left { text-transform:uppercase; font-size:11px; }
#twitter div.right { text-align:right; }

/**
 * FOOTER =============================================================
 */
#footer div.limiter { background:#181818; }

#footer div.left,
#footer div.right {
  padding:20px;
  width:350px;
  font-size:11px;
  line-height:15px;
  }

#footer div.left {
  font-size:10px;
  line-height:10px;
  }

#footer div.right { text-align:right; }

/**
 * 404 ================================================================
 */
div#not-found div.limiter {
  padding:90px 0px;
  background:#282828;
  font-size:20px;
  line-height:40px;
  text-align:center;
  }

div#not-found strong {
  font-size:64px;
  line-height:80px;
  display:block;
  color:#666;
  }

/**
 * FRONTPAGE ==========================================================
 */
body.front #poster div.limiter {
  padding:210px 0px 30px;
  height:60px;
  background:url(../images/poster_front.jpg) no-repeat;
  }

body.front #poster div.limiter a {
  background:url(../images/sprite.jpg) 100% -320px no-repeat;
  font-size:16px;
  font-weight:bold;
  display:block;
  line-height:60px;
  height:60px;
  padding:0px 120px 0px 20px;
  float:right;
  }

body.front #featured div.limiter { position:relative; }

body.front #featured div.connector {
  position:absolute;
  bottom:-20px;
  left:480px;

  background:url(../images/sprite.jpg) 0px -200px no-repeat;
  width:205px;
  height:40px;
  }

body.front #content div.left,
body.front #content div.right { padding:20px 0px; }

/* Feature list */
body.front h2.features {
  font-size:16px;
  background:#303030;
  padding:10px 20px 9px;
  margin:0px 10px 1px 0px;
  }

body.front ul.features li {
  color:#fff;
  background:#303030;
  padding:10px 20px 9px;
  margin:0px 10px 1px 0px;
  }

body.front ul.features span.icon {
  float:left;
  width:40px;
  height:40px;
  margin-right:20px;
  background:url(../images/sprite.jpg) no-repeat;
  }

  body.front ul.features li.read span.icon     { background-position:0px -100px; }
  body.front ul.features li.graph span.icon    { background-position:-40px -100px; }
  body.front ul.features li.map span.icon      { background-position:-80px -100px; }
  body.front ul.features li.rss span.icon      { background-position:-120px -100px; }
  body.front ul.features li.print span.icon    { background-position:-160px -100px; }
  body.front ul.features li.share span.icon    { background-position:-200px -100px; }
  body.front ul.features li.channels span.icon { background-position:-240px -100px; }

/* Project list */
body.front div.projects {
  position:relative;
  padding-top:80px;
  }

/* Somewhat abusive use of q... */
body.front div.projects q {
  position:absolute;
  top:0px;
  left:0px;
  right:0px;

  background:#303030;
  height:40px;
  overflow:hidden;
  padding:20px 20px 19px;
  border-bottom:1px solid #282828;
  font-weight:bold;
  font-size:16px;
  }

  body.front div.projects q strong { color:#fff; }

body.front div.projects { background:#303030; }

body.front div.projects div.column {
  float:left;
  width:175px;
  height:360px;
  padding:10px 10px 9px;
  }

body.front div.projects a {
  padding:0px 10px;
  display:block;
  }

  body.front div.projects a q { display:none; }
  body.front div.projects a:hover { background:#282828; }
  body.front div.projects a:hover q { display:block; }

/* Downloads */
div.download-latest div.left {
  margin:5px 0px;
  padding:20px;
  width:350px;
  height:30px;
  line-height:15px;
  background:url(../images/sprite.jpg) 0px -250px;
  }

div.download-latest div.left label {
  display:block;
  text-transform:uppercase;
  }

div.download-latest div.right { padding:10px 0px; }

div.download-latest div.right a.download {
  display:block;
  line-height:60px;
  font-size:20px;
  font-weight:bold;
  padding:0px 20px 0px 60px;
  color:#000;
  background:url(../images/sprite.jpg) 0px -380px;
  }

/**
 * DOWNLOADS ==========================================================
 */
body.download #poster div.limiter { background:url(../images/poster_download.jpg) no-repeat; }

table.downloads a {
  font-size:20px;
  font-weight:bold;
  display:block;
  }

table th {
  background:#181818;
  padding:10px 20px;
  text-align:left;
  }

table td {
  background:url(../images/sprite.jpg) -60px -380px no-repeat;
  color:#666;
  text-align:left;
  padding:10px 20px;
  }

table td a { color:#000; }

table td.download {
  background-position:0px -380px;
  padding-left:60px;
  }

/**
 * About + FAQ ========================================================
 */
body.about #poster div.limiter {
  padding:10px 0px;
  height:380px;
  }

body.about #video {
  width:700px;
  height:380px;
  margin:0px auto;
  }

.prose code {
  color:#ccc;
  font-size:inherit;
  }

.prose a {
  font-family:Georgia;
  font-style:italic;
  border-bottom:1px solid #404040;
  }

.prose {
  padding:20px;
  font-size:16px;
  line-height:25px;
  }

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
.prose p,
.prose ul,
.prose ol,
.prose pre,
.prose div.codeblock,
.prose blockquote { margin: 0px 0px 25px; }

.prose h4,
.prose h5,
.prose h6 { color:#ccc; }

.prose h1,
.prose h2,
.prose h3 {
  font-size:20px;
  font-weight:normal;
  color:#fff;
  margin-bottom:10px;
  padding-bottom:9px;
  border-bottom:1px solid #404040;
  }

.prose h1 { font-size:24px; }
.prose h3 { font-size:16px; }

/**
 * EXAMPLES ===========================================================
 */
body.examples #poster div.limiter { background:url(../images/poster_examples.jpg) no-repeat; }

div.examples { padding:0px; }

div.example { border-bottom:1px solid #383838; }

div.example-text {
  float:left;
  width:480px;
  padding:20px;
  }

div.example-images img { margin:0px 0px 5px; }

div.example-images p {
  padding:10px 10px 9px;
  border-bottom:1px solid #282828;
  margin:0px;
  }

div.example-images {
  font-weight:bold;
  font-size:11px;
  line-height:15px;

  background:#202020;

  float:right;
  width:260px;
  }

/**
 * Thickbox goodness ==================================================
 */
#TB_window {
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border:4px solid #282828;
  background:#000;
  color:#aaa;
  font:13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
  }

#TB_window a,
#TB_window a:hover { color:#fff; }


/**
 * salesforce contact form
 */
#salesforce_contact_form {
  margin: 0 auto;
  width: 450px;
  padding: 14px;
}

#salesforce_contact_form label{
  display:block;
  font-weight:bold;
  text-align:right;
  width:140px;
  float:left;
}

#salesforce_contact_form .small{
  color:#eee;
  display:block;
  font-size:11px;
  font-weight:normal;
  text-align:right;
  width:140px;
}
#salesforce_contact_form input, #salesforce_contact_form textarea, #salesforce_contact_form select {
  float:left;
  font-size:12px;
  padding:4px 2px;
  background-color: #eee;
  border:solid 1px #aacfe4;
  width:200px;
  margin:2px 5px 20px 10px;
}

#salesforce_contact_form div.emailOptIn {
  width: 100%;
  clear: both;
  padding-top: 25px;
}

#salesforce_contact_form .emailOptIn label {
  width: auto;
  float: none;
  display: inline;
}

#salesforce_contact_form #p2OptIn {
  float: none;
  width: auto;
}

#salesforce_contact_form .submit {
  margin-left: 150px;
}

#salesforce_contact_form .form-required, #salesforce_contact_form .error { 
  margin-left: 5px;
  color: red;
}

#salesforce_contact_form .form-item {
  display: block;
  clear: both;
}

#salesforce_contact_form .form-item {
    clear: both;
}

/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}