@charset "US-ASCII";
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
body {
line-height: 1; }
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
nav ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent; }
/* change colours to suit your needs */
ins {
background-color: #ff9;
color: #000;
text-decoration: none; }
/* change colours to suit your needs */
mark {
background-color: #ff9;
color: #000;
font-style: italic;
font-weight: bold; }
del {
text-decoration: line-through; }
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help; }
table {
border-collapse: collapse;
border-spacing: 0; }
/* change border colour to suit your needs */
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #cccccc;
margin: 1em 0;
padding: 0; }
input, select {
vertical-align: middle; }
.clearfix:before, .clearfix:after {
content: "\0020";
display: block;
height: 0;
visibility: hidden; }
.clearfix:after {
clear: both; }
.clearfix {
zoom: 1; }
/*
* Symbolset
* www.symbolset.com
* Copyright © 2013 Oak Studios LLC
*
* Upload this file to your web server
* and place this within your tags.
*
*/
@font-face {
font-family: "SSSocialRegular";
src: url("../fonts/ss-social-regular.eot");
src: url("../fonts/ss-social-regulard41d.eot?#iefix") format("embedded-opentype"), url("../fonts/ss-social-regular.woff") format("woff"), url("../fonts/ss-social-regular.ttf") format("truetype"), url("../fonts/ss-social-regular.svg#SSSocialRegular") format("svg");
font-weight: normal;
font-style: normal; }
/* This triggers a redraw in IE to Fix IE8's :before content rendering. */
html:hover [class^="ss-"] {
-ms-zoom: 1; }
.ss-icon, .ss-icon.ss-social-regular,
[class^="ss-"]:before, [class*=" ss-"]:before,
[class^="ss-"].ss-social-regular:before, [class*=" ss-"].ss-social-regular:before,
[class^="ss-"].right:after, [class*=" ss-"].right:after,
[class^="ss-"].ss-social-regular.right:after, [class*=" ss-"].ss-social-regular.right:after {
font-family: "SSSocialRegular";
font-style: normal;
font-weight: normal;
text-decoration: none;
text-rendering: optimizeLegibility;
white-space: nowrap;
/*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased; }
[class^="ss-"].right:before,
[class*=" ss-"].right:before {
display: none;
content: ''; }
.ss-facebook:before, .ss-facebook.right:after {
content: ''; }
.ss-twitter:before, .ss-twitter.right:after {
content: ''; }
.ss-linkedin:before, .ss-linkedin.right:after {
content: ''; }
.ss-googleplus:before, .ss-googleplus.right:after {
content: ''; }
.ss-appdotnet:before, .ss-appdotnet.right:after {
content: ''; }
.ss-zerply:before, .ss-zerply.right:after {
content: ''; }
.ss-reddit:before, .ss-reddit.right:after {
content: ''; }
.ss-tumblr:before, .ss-tumblr.right:after {
content: ''; }
.ss-wordpress:before, .ss-wordpress.right:after {
content: ''; }
.ss-blogger:before, .ss-blogger.right:after {
content: ''; }
.ss-posterous:before, .ss-posterous.right:after {
content: ''; }
.ss-youtube:before, .ss-youtube.right:after {
content: ''; }
.ss-vimeo:before, .ss-vimeo.right:after {
content: ''; }
.ss-flickr:before, .ss-flickr.right:after {
content: ''; }
.ss-instagram:before, .ss-instagram.right:after {
content: ''; }
.ss-fivehundredpx:before, .ss-fivehundredpx.right:after {
content: ''; }
.ss-pinterest:before, .ss-pinterest.right:after {
content: ''; }
.ss-svpply:before, .ss-svpply.right:after {
content: ''; }
.ss-readmill:before, .ss-readmill.right:after {
content: ''; }
.ss-dropbox:before, .ss-dropbox.right:after {
content: ''; }
.ss-pinboard:before, .ss-pinboard.right:after {
content: ''; }
.ss-dribbble:before, .ss-dribbble.right:after {
content: ''; }
.ss-behance:before, .ss-behance.right:after {
content: ''; }
.ss-github:before, .ss-github.right:after {
content: ''; }
.ss-octocat:before, .ss-octocat.right:after {
content: ''; }
.ss-stackoverflow:before, .ss-stackoverflow.right:after {
content: ''; }
.ss-paypal:before, .ss-paypal.right:after {
content: ''; }
.ss-kickstarter:before, .ss-kickstarter.right:after {
content: ''; }
.ss-foursquare:before, .ss-foursquare.right:after {
content: ''; }
.ss-yelp:before, .ss-yelp.right:after {
content: ''; }
.ss-skype:before, .ss-skype.right:after {
content: ''; }
.ss-rdio:before, .ss-rdio.right:after {
content: ''; }
.ss-spotify:before, .ss-spotify.right:after {
content: ''; }
.ss-lastfm:before, .ss-lastfm.right:after {
content: ''; }
.ss-soundcloud:before, .ss-soundcloud.right:after {
content: ''; }
.ss-mail:before, .ss-mail.right:after {
content: '✉'; }
.ss-like:before, .ss-like.right:after {
content: '👍'; }
.ss-rss:before, .ss-rss.right:after {
content: ''; }
.ss-share:before, .ss-share.right:after {
content: ''; }
.ss-apple:before, .ss-apple.right:after {
content: ''; }
.ss-microsoft:before, .ss-microsoft.right:after {
content: ''; }
.ss-windows:before, .ss-windows.right:after {
content: ''; }
.ss-android:before, .ss-android.right:after {
content: ''; }
.ss-blackberry:before, .ss-blackberry.right:after {
content: ''; }
div, section, article {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
body {
font: 17px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #323232;
background-color: white;
font-family: Arial, sans-serif;
background-image: url(../images/header.png);
background-repeat: no-repeat;
background-position: top center;
line-height: 140%;
-webkit-font-smoothing: antialised;
padding-bottom: 100px; }
p {
margin-bottom: 20px;
font-size: 13px;
color: #555555; }
h2, h3 {
margin-bottom: 20px;
line-height: 160%;
font-weight: 400;
font-family: Baskerville, "Libre-Baskerville", serif;
color: #555555;
text-align: center; }
h2 {
padding-bottom: 20px;
margin: 100px 0 40px;
border-bottom: 1px solid #eeeeee; }
h2 strong {
font-weight: 100;
color: #0ac0ff; }
h3 + h2 {
margin-top: 20px; }
h3 {
font-size: 22px; }
h4 {
font-size: 18px;
color: #00adee;
font-weight: 300;
margin-bottom: 20px; }
h5 {
color: #555555;
font-size: 14px; }
p a:link, p a:visited {
color: #00adee; }
h3 a:link, h3 a:visited {
color: #eb008b;
border-bottom: 1px solid #eb008b;
text-decoration: none; }
ul {
list-style-type: none; }
nav a {
display: inline-block;
background-repeat: no-repeat;
font-size: 16px;
color: #555555;
text-decoration: none;
margin: 0 15px;
line-height: 1;
vertical-align: top;
font-weight: bold; }
nav a:hover {
color: #00adee; }
nav .ss-icon {
width: 20px;
font-size: 20px; }
header {
text-align: center; }
header h1 {
margin: 150px auto 20px auto;
text-indent: -9999em;
display: inline-block;
width: 128px;
height: 68px;
background-image: url(../images/pilogo.png);
background-size: 100%;
display: block; }
header h2 {
border-bottom: 0; }
header h3 {
margin: -200px auto 180px auto;
width: 100%;
background-color: white;
display: block;
height: 30px;
position: relative;
padding: 10px 0 15px 0;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee; }
header p {
color: #aaaaaa;
margin: -20px 0 0 180px; }
#in header {
width: 960px;
margin: 0 auto;
position: relative; }
#in header h1 {
position: absolute;
top: -110px;
left: 0;
margin: 0; }
#course-page {
width: 500px; }
.course {
padding-top: 60px; }
.course h1 {
font-size: 1.5em;
line-height: 1.5em;
margin-bottom: 10px;
text-align: center; }
.course-photo {
float: right;
width: 80px;
height: 80px;
display: inline-block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 2px solid #fafafa;
padding: 10px; }
.date {
display: inline-block;
margin-right: 10px; }
.register {
padding-bottom: 20px; }
.register-button {
background: #777777;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 6px;
padding: 2px 5px;
color: white;
text-align: center;
display: inline-block; }
.register-button.active {
background: #00adee; }
.subscribe {
text-align: center; }
.courses-header {
font-size: 2.5em;
line-height: 1.5em;
margin-bottom: 0px; }
.subscribe-button-inner {
text-align: center; }
.key-points ul {
list-style-type: disc;
list-style-position: inside; }
.key-points ul ul {
list-style-type: circle;
list-style-position: inside;
margin-left: 15px; }
.different, .streetcred {
text-align: center; }
.different p, .streetcred p {
font-size: 14px;
line-height: 20px; }
section {
max-width: 960px;
margin: 0 auto;
padding-bottom: 60px; }
.different h3 {
padding-top: 80px; }
.different h4 {
margin-bottom: 5px;
font-size: 20px; }
.different a.do, .different div {
text-align: center;
padding: 10px 30px 30px 30px;
min-width: 250px;
max-width: 320px;
text-decoration: none; }
.different div {
display: inline-block;
padding: 10px 30px 0px 30px;
vertical-align: top; }
.different p.also {
margin-top: 30px;
font-size: 20px; }
.streetcred {
border-bottom: 1px solid #eeeeee; }
.streetcred > div:first-of-type ul {
margin-bottom: 30px;
text-align: center; }
.partners {
margin-top: 120px;
padding-bottom: 50px; }
.partners h2 {
margin-top: 70px; }
.clients ul, .partners ul, .confs ul {
list-style: none;
text-align: center; }
.clients li, .partners li {
display: inline-block;
margin: 10px 20px;
background-size: contain;
background-repeat: no-repeat;
position: relative;
text-indent: -9999em; }
.clients li, .partners li {
width: 100px;
background-position: center;
height: 83px; }
.confs img {
width: 100%;
margin-bottom: 20px; }
.confs ul {
margin-bottom: 20px; }
.confs li {
display: inline-block;
text-indent: -9999em;
background-repeat: no-repeat;
background-size: contain;
width: 13%;
height: 2.5em;
margin-right: 1.5%; }
.confs li:last-child {
margin-right: 0; }
.books h5, .books p {
text-align: left; }
.books p {
font-size: 12px;
line-height: 16px; }
.books div {
clear: both;
width: 100%; }
.books img {
width: 60px;
margin: 5px 20px 0 0;
text-align: center;
float: left; }
.books a {
text-decoration: none; }
.books #human-javascript h5 {
text-decoration: underline; }
.books li:last-child img {
margin-right: 0; }
.work {
clear: both; }
.work li {
font-size: 14px;
line-height: 18px;
margin-bottom: 5px;
padding: 0 30px;
color: #555555; }
.work h4:last-of-type {
margin-top: 50px; }
.logo-att {
background-image: url("../images/att.png"); }
.logo-ericsson {
background-image: url("../images/ericsson.png"); }
.logo-mls {
background-image: url("../images/mls.png"); }
.logo-pnnl {
background-image: url("../images/pnnl.png"); }
.logo-signals37 {
background-image: url("../images/signals37.png"); }
.logo-steamclock {
background-image: url("../images/steamclock.png"); }
.logo-github {
background-image: url("../images/github.png"); }
.logo-cox {
background-image: url("../images/cox.png"); }
.logo-nodefirm {
background-image: url("../images/nodefirm.png"); }
.logo-tropo {
background-image: url("../images/tropo.png"); }
.logo-lift {
background-image: url("../images/lift.png"); }
.logo-nodeconf {
background-image: url("../images/nodeconf.png"); }
.logo-jsconfus {
background-image: url("../images/jsconfus.png"); }
.logo-jsconfeu {
background-image: url("../images/jsconfeu.png"); }
.logo-defcon {
background-image: url("../images/defcon.png"); }
.logo-backboneconf {
background-image: url("../images/backboneconf.png"); }
.logo-lxjs {
background-image: url("../images/lxjs.png"); }
.logo-realtimeconf {
background-image: url("../images/realtimeconf.png"); }
.logo-redisconf {
background-image: url("../images/redisconf.png"); }
.logo-lincolnloop {
background-image: url("../images/lincolnloop.png"); }
li.logo-mls {
height: 80px;
width: 50px; }
li.logo-github {
width: 80px; }
#who {
padding: 0px 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 900px;
width: 100%;
margin: 0 auto; }
#who.homepage {
margin-top: 150px; }
#who h1 {
font-size: 50px;
line-height: 110%;
font-weight: 100;
font-family: Baskerville, "Libre-Baskerville", serif;
color: #555555;
text-align: center;
margin-top: 40px; }
#who h1 strong {
font-weight: 100;
color: #0ac0ff; }
#who .team {
margin-top: 80px; }
#teamList {
display: inline-block;
zoom: 1;
text-align: center; }
#teamList a {
display: inline-block;
margin: 0 10px 10px;
position: relative; }
#teamList a img {
width: 80px;
height: 80px;
display: inline-block;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 2px solid #fafafa; }
#in #teamList {
padding-top: 60px;
border-top: 1px solid #eeeeee; }
#in #who .team {
margin-top: 0;
padding-top: 0; }
#why div {
padding-top: 50px;
width: 320px;
margin: 20px auto;
text-align: center; }
#why div h1 {
margin: 80px auto 150px auto;
text-indent: -9999em;
display: inline-block;
width: 128px;
height: 68px;
background-image: url(../images/logo.png);
background-size: 100%; }
#why div p {
font-size: 22px;
color: #555555;
font-family: "Baskerville";
line-height: 150%; }
.teamMember {
width: 700px;
margin: 150px auto 0 auto;
padding: 40px 0; }
.teamMember p a:link, .teamMember p a:visited {
color: #00adee; }
.teamMember h1 {
font-size: 2.5em;
line-height: 1; }
.teamMember h2 {
font-size: 1.5em;
text-align: left;
margin: 15px 0 30px; }
.teamMember img {
width: 248px;
height: 248px;
border-radius: 900px;
border: 1px solid #eeeeee;
float: left;
shadow: rgba(0, 0, 0, 0.09) 0 0 20px;
margin-right: 50px; }
.teamMember ul {
margin: 0 0 20px 20px;
color: #555555; }
.teamMember div {
width: 400px;
float: left; }
.teamMember div p {
font-size: 16px;
line-height: 140%; }
article {
width: 400px;
margin: 150px auto 100px auto; }
article p {
font-size: 16px;
line-height: 140%; }
article ol {
padding-bottom: 40px; }
@media (max-width: 600px) {
body {
background-size: 200%; }
nav {
position: absolute;
right: auto;
top: 60px;
width: 100%;
text-align: center;
z-index: 100; }
nav a {
font-size: 14px;
margin: 0 5px; }
section {
width: 90%;
margin: 0 auto 30px; }
h2 {
margin-top: 40px;
margin-bottom: 20px;
font-size: 24px;
line-height: 26px; }
header h1 {
margin-top: 120px; }
header h2 {
margin: 30px auto 40px auto;
font-size: 30px;
line-height: 34px; }
header h3 {
margin: -150px auto 130px auto; }
article {
margin-top: 150px;
width: 90%;
padding: 0 20px; }
article h2 {
padding-top: 50px; }
h2.peopleare {
padding-top: 250px; }
.different a.do, .different div, .streetcred div {
display: inline-block;
padding: 10px;
width: 100%;
vertical-align: top; }
.books ul {
text-align: center; }
.sandwich {
width: 90%;
margin: 0 auto; }
h4 {
margin-bottom: 10px; }
#who .team {
margin-top: 0; }
.different h3 {
padding-top: 30px; }
#teamList a img {
width: 60px;
height: 60px; }
.teamMember {
width: 320px;
margin: 150px auto 0 auto; }
.teamMember img {
margin: 0 0 40px -100px;
width: 200px;
height: 200px;
position: relative;
left: 50%; }
.teamMember h1, .teamMember h2 {
text-align: center; }
.teamMember h1 {
line-height: 1.2; }
.teamMember p {
font-size: 20px;
padding-left: 20px;
padding-right: 20px; }
.teamMember ul {
margin-left: 36px; }
.teamMember div {
width: 320px;
margin: 0 auto; }
#in header {
width: 100%;
margin: 0;
position: relative; }
#in header h1 {
position: absolute;
top: -60px;
left: 50%;
margin: 0;
margin-left: -64px;
background-repeat: no-repeat; }
#in nav {
top: 110px; }
#why {
margin-bottom: 80px; } }
@media (min-width: 600px) {
nav {
position: absolute;
right: 0px;
top: 20px;
z-index: 100; }
header h2 {
font-size: 40px;
line-height: 50px;
margin: 70px auto 60px auto; }
.homeintro h2 {
margin-bottom: 120px; }
h2 {
font-size: 32px;
line-height: 34px; }
section {
width: 80%;
margin: 0 auto 40px; }
.different a.do, .streetcred > div {
display: inline-block;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
width: 33%;
vertical-align: top; } }