site.css

/**
 * Reset ==============================================================
 * Based on http://meyerweb.com/eric/tools/css/reset
 */

html,
body,

/* Structures */
div,
span,
applet,
object,
iframe,

/* Text */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,

/* Lists */
dl,
dt,
dd,
ol,
ul,
li,

/* Forms */
fieldset,
form,
input,
select,
textarea,
label,
legend,

/* Tables */
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin:0px;
  padding:0px;
  border:0px;
  outline:0px;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
  line-height:inherit;
  }

ol,
ul,
.item-list ul,
.item-list ul li {
  list-style:none;
  }

blockquote,
q { quotes:none; }

blockquote:before,
blockquote:after,
q:before, q:after {
  content:'';
  content:none;
  }

/* remember to define focus styles! */
:focus { outline:0px; }

/* remember to highlight inserts somehow! */
ins { text-decoration:none; }
del { text-decoration:line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse:collapse;
  border-spacing:0px;
  }

/**
 * Font reset =========================================================
 *
 * Specifically targets form elements which browsers oftentimes give
 * special treatment.
 */
input,
select,
textarea,
body { font: 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; }

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */


body {
  background:#fff;
/* url(assets/background.png);*/
  color:#444;
  font:normal 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }

a {
  text-decoration:none;
  color: #4183C4;
  }

a:hover {
  cursor: pointer;
  text-decoration: underline;
}

a.slug:hover {
  cursor: pointer;
  text-decoration: none;
}

.top-section { 
   padding-top: 32px;
   background: #adf;
}

.middle-section { 
   background: #8ce;
}
.bottom-section { 
   background: #07a;
   padding-bottom: 32px;
}

.limiter {
  padding: 0 32px;
  width:75%;
  margin:0px auto;
  background-color: white;
  }

aside {
  position:relative;
  float:right;
  width:210px;
  /*margin-top:175px;*/
  margin-left:24px;
  }

header .logo {
  height:175px;
  background:url(assets/logo.png) no-repeat 0% 50%;
  display:block;
  overflow:hidden;
  text-indent:-9999px;
  }

#main,
header .logo {
  width: 100%;
  }

div.prose {
  padding:0px 20px 20px;
  }

.followers,
.follower-project,
.tweets,
.editing { margin-bottom:10px; }

.prose h1,
.prose h2 {
  font-family: 'Passion One', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:22px;
  font-weight:normal;
  }

/* Prose */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 { color:#000; }

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6,
.prose p,
.prose ul,
.prose ol,
.prose hr,
.prose img,
.prose blockquote,
.prose pre,
.prose table,
.prose iframe,
.prose object,
.prose .ts-map {
  display:block;
  padding:20px 0px 5px;
  }

.prose li { margin-left:30px; }
.prose ul li { list-style:disc; }
.prose ol li { list-style:decimal; }

a.github-user,
a.tweet {
  display:block;
  height:48px;
  width:48px;
  margin: 0px 4px 4px 0px;
  float:left;
  position: relative;
  }

.thumb {
  display:block;
  height:48px;
  width:48px;
  background:white 50% 50% no-repeat;
  background-size:48px;
  }

.popup {
  display:none;
  position:absolute;
  right:55px;
  top:-5px;
  width:180px;
  padding:5px 20px 5px 10px;
  background:black;
  border-radius:5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  }

.popup * { color:#fff; }

.popup small {
  display: block;
  font-size: 12px;
  }

.tweet:hover,
.github-user:hover { z-index:1; }
.tweet:hover .caret,
.tweet:hover .popup,
.github-user:hover .caret,
.github-user:hover .popup { display:block; }

.buttons {
  margin-bottom:10px;
  width:205px;
  }

.buttons a {
  text-align:center;
  font-size: 1.2em;
  font-weight: bold;
  line-height:36px;
  display:block;
  margin:0;
  padding:0;
  padding:4px;
  color: #f2f2f2;
  background: #4183C4; /*#6ab;*/
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  }

.watch-docs {
  opacity:0;
  z-index:-1000;
  font-size:12px;
  position:absolute;
  top:-20px;
  left:-320px;
  width:275px;
  background:white;
  border:2px solid #CACACA;
  padding:15px 15px 10px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  transition:opacity .25s, z-index 0s .25s;
  -moz-transition:opacity .25s, z-index 0s .25s;
  -webkit-transition:opacity .25s, z-index 0s .25s;
  }

  .watch-docs.active {
    opacity:100;
    z-index:0;
    transition:opacity .25s, z-index 0s 0s;
    -moz-transition:opacity .25s, z-index 0s 0s;
    -webkit-transition:opacity .25s, z-index 0s 0s;
    }

  .watch-docs ol {
    list-style-type:decimal;
    padding-left:20px
    }

  .watch-docs img {
    margin:10px 15px 0px;
    text-align:center;
    }

.editing {
  font-size:11px;
  line-height:16px;
  }

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }

.hidden { display: none; }

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */