/*------- CSS reset for all browsers -------*/

/* http://meyerweb.com/eric/tools/css/reset/ 
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/*------------- Defaults -----------------*/

html, body {
  overflow-x: hidden;
}

/*------------ For sticky footer ------------*/

html, body { 
  height: 100%; 
}

#big_container {
  min-height: 100%; 
}

#big_content {
  /*overflow: auto;*/
  padding-bottom: 48px; /* must be same height as the footer */
}  

#footer {
  position: relative;
  clear:both;
  margin-top: -48px; /* negative value of footer height */
  height: 48px;
}

/* iPads and smaller
*/
@media (max-device-width: 768px) {
  html, body { 
    height: auto; 
  }
  #big_container {
    min-height: 1400px; 
  }
  #footer {
    margin-top: 0;
  }
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  #big_container {
    min-height: 1600px; 
  }
}

/*------------ Navigation menu ------------*/

.navcontainer {
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0;
  background-color: rgba(0, 0, 0, 0.85);
}

nav li {
  display: inline;
}

nav li a {   
  float: left;
  border: 0;

  padding-top: 0.6em;
  padding-bottom: 0.5em;
  padding-left: 0em;
  padding-right: 0em;
  width: 16.66%;   /* NOTE: based on number of menu items */
  min-width: 8em;

  font-family: 'Source Sans Pro', Helvetica;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 1.2em;
  text-align: center;
  color: rgba(153,153,153,1);
}

/* iPads and smaller
*/
@media (max-device-width: 768px) {
  nav li a {
  padding-top: 1em;
  padding-bottom: 1em;
  }
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  nav li a {
    font-size: 2.5em;
    width: 33.33%;  /* NOTE: based on number of menu items */
    padding-top: 0.7em;
    padding-bottom: 0.7em;
  }
}

#current, nav li a:hover {
  text-decoration: none;
  color: rgba(255,255,255,1);
}

#current {
}

nav li a:hover {
}

/*------------ General content ------------*/

.contentmargins {
  width: 80%;
  margin: 0 auto;
  /*max-width: 950px;*/
}

.contentbottommargins {
  margin-bottom: 8em;
}

.fullwidth {
  width: 100%;
}

.floating {
  float: left;
}

.logo {
  font-family: 'Michroma', Helvetica-Bold;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 5em;
}

.tagline {
  font-family: 'Michroma', Helvetica;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 1.5em;
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  .tagline {
    font-size: 3.3em;
  }
}

.largecopy {
  font-family: 'Source Sans Pro', Helvetica-Light, Helvetica;
  font-style: normal !important;
  font-weight: 300 !important;
  font-size: 1.5em;
  line-height: 1.2em;
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  .largecopy {
    font-size: 2.8em;
  }
}

.copy {
  font-family: 'Source Sans Pro', Helvetica;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 1em;
  line-height: 1.4em;
}

.copy h1 {
  font-family: 'Source Sans Pro', Helvetica-Bold;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 1.3em;
  line-height: 2em;
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  .copy {
    font-size: 2.2em;
  }
}

.smallcopy {
  font-family: 'Source Sans Pro', Helvetica-Light;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 0.7em;
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  .smallcopy {
/*    font-size: 1em; */
  }
}

.copycolor {
  color:#444444;
}

.logocolor {
  /*color: rgb(38,61,92);*/
  color: rgba(0, 0, 0, 0.85);
  /*color: rgba(64,64,64,1);*/
}

.logobackgroundcolor {
  background-color: rgba(0,0,0,0.85);
}

.featuredbackgroundcolor {
  background-color:#FFFFFF;
}

.accentbackgoundcolor {
  background-color:#F0F0F0;
}

.softcolor {
  color:#F4F4F4;
}

.softbackgroundcolor {
  background-color:#FFFFFF;
}

.bannerforegroundcolor {
  color: #FFFFFF;
}

.bannerbackgroundcolor {
  background-color: rgb(66,88,117);
}

.bannertext {
  line-height: 1.5em;
  padding-top: 0.5em;
  padding-bottom: 0.4em;
}

.clearbackgroundcolor {
  background-color:#FFFFFF;
}

a {
  text-decoration: none;
  color: #007CC6;
}

a:hover {
  text-decoration: underline;
}

/*-------------- Code blocks --------------*/

pre {
  font-family: Consolas, Menlo, 'Droid Sans Mono', Courier, monospace;
  font-size: 1em;
  line-height: 1.6;
  overflow: hidden;
  color: #333333;
  border: 0;
/* 
  padding: 6px 10px;
 */
}

pre em {
  font-family: 'Consolas-Italic', 'Menlo-Italic', 'Courier-Oblique';
  font-style: normal !important;
}

pre .c1 {
  font-family: 'Consolas-Italic', 'Menlo-Italic', 'Courier-Oblique';
  font-style: normal !important;
}


.nocodebox {
  background-color: inherit;
  border: none;
}

/*-------------- Shared between pages --------------*/

.featured {
  float: left;
}

.featured .logo {
  margin-left: -0.06em; /* Adjust for kerning to align flush left */
  margin-top: -0.38em;   /* Adjust for kerning(?) to align flush top */
  padding-top: 18px;
  padding-bottom: 9px;
}

/* iPads and smaller
*/
@media (max-device-width: 768px) {
  .featured .logo {
    margin-top: -0.25em;   /* Adjust for kerning(?) to align flush top */
    margin-bottom: -0.1em;
  }
}

.featured .copy {
  position: relative;
}

.featured pre {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
  padding-left: 1em;
  font-size: 0.9em;
}

/*-------------- Footer --------------*/

/* Since now using sticky footer, see #footer definition near top */

#copyright {
  color: #DFDFDF;
  padding-top: 1em;
  padding-bottom: 1em;
  font-size: 0.8em;
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  #footer {
    height: 5em;
  }
  #copyright {
    font-size: 1.5em;
  }
}

/*-------------- Home --------------*/

.banner {
/*  position: relative; */
  margin-top: 1.5em;
}

.banner a {
  text-decoration: none;
}

.banner div:hover {
  text-decoration: none;
  background-color: rgb(38,61,92);
}

.intro_area {
  margin-top: 35px;
}

#intro_content {
  width: 40%;
  min-width: 23em;
  margin-right: 3.5%;
}

#intro {
  float: inherit;
  /*margin-right: 1em;*/
  margin-bottom: 1.5em;
  /*padding-right: 10%;*/
}

/* iPads and smaller
*/
@media (max-device-width: 768px) {
  #intro {
  /*padding-right: 0.5em;*/
  }
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  #intro_content {
    width: 100%;
    margin-right: 0;
  }
}

#intro .largecopy {
  margin-top: 1.25em;
}

#download {
  clear: both;
/*  text-align: center;*/
/*  font-size: 0.8em;*/
/*  width: 30%;*/
  /*padding-bottom: 2em;*/
  padding: 0.6em;
  font-size: 1em;
  text-decoration: line-through
}

#facts {
  margin-top: 40px;
}

#facts_content {
  padding-top: 2em;
  padding-bottom: 2em;
  font-size: 0.9em;
}

#facts span {
  font-family: 'Source Sans Pro', Helvetica-Bold;
  font-style: normal !important;
  font-weight: 600 !important;
}

#dfquote {
  margin-top: 1em;
  font-family: 'Source Sans Pro', Helvetica-Oblique;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 0.9em;
}

.benefits {
  position: relative;
  float: left;
}

.benefit {
  float: inherit;
  margin-top: 1.5em;
  margin-right: 1.5em;
  width: 30%;
  min-width: 13em;
/*  min-height: 9em; */
}

.benefit pre {
  display: inline;
  font-size: 0.9em;
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  .benefit {
    width: 100%;
  }
}

.benefit .copy {
  margin-top: 0.8em;
}

.benefit span {
  font-family: 'Source Sans Pro', Helvetica-Bold;
  font-style: normal !important;
  font-weight: 600 !important;
}

#helloworld_container {
  padding-top: 40px;
  width: 50%;
  min-width: 19em;
  margin-right: -3em; /* cheat the margins a bit to help keep the image next to the intro */
  /*width: 19em;*/
}

#helloworld_container a:hover {
  opacity: 0.8;
  background-position: 0 0;
}

#helloworld_image {
  float: inherit;
}

/* iPads and smaller
*/
@media (max-device-width: 768px) {
  #helloworld_container {
    width: 17em;
    min-width: 0;
  }
  #helloworld_image {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }
}

#helloworld_image img {
  display: block;
  width: 100%;
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  #helloworld_container {
    /*margin-top: 0;*/
    width: 100%;
  }
}


/*-------------- Documentation --------------*/

h1 {
  font-family: 'Source Sans Pro', Georgia-Bold;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 1.6em;
  line-height: 1.2em;
  color:#444444;
}

h1 em {
  font-family: 'Source Sans Pro', Georgia-BoldItalic;
  font-style: italic !important;
  font-weight: 600 !important;
}

h2 {
  font-family: 'Source Sans Pro', Georgia-Bold;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 1.6em;
  line-height: 1.2em;
  color:#444444;
}

h2 em {
  font-family: 'Source Sans Pro', Georgia-BoldItalic;
  font-style: italic !important;
  font-weight: 600 !important;
}

h3 {
  font-family: 'Source Sans Pro', Georgia-Bold;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 1.3em;
  color:#444444;
}

h3 em {
  font-family: 'Source Sans Pro', Georgia-BoldItalic;
  font-style: italic !important;
  font-weight: 600 !important;
}

h4 {
  font-family: 'Source Sans Pro', Georgia;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 1.1em;
}

h4 em {
  font-family: 'Source Sans Pro', Georgia-Italic;
  font-style: italic !important;
  font-weight: normal !important;
}

p {
  font-family: 'Source Sans Pro', Georgia;
  font-style: normal !important;
  font-weight: 300 !important;
  font-size: 1.1em;
  line-height: 1.4em;
  margin-bottom: 1em;
  color: #333;
}

p em { 
  font-family: 'Source Sans Pro', Georgia-Italic;
  font-style: italic !important;
  font-weight: 300 !important;
}

p strong { 
  font-family: 'Source Sans Pro', Georgia-BoldItalic;
  font-style: italic !important;
  font-weight: 600 !important;
}

#documentation {
  position: relative;
  margin-top: 2em;
}

#documentation h2 {
  margin-top: 2em;
  margin-bottom: 1em;
}

#documentation h3 {  
  margin-top: 2em;
  margin-bottom: 1em;
}

#documentation pre {
  overflow: auto;
  font-size: 0.9em;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding: 1em 1em;
  border: 1px;
  border-color: #DDDDDD !important;
  border-style: solid;
  border-radius: 0.4em;
}

#documentation ul {
  list-style-position: outside;
  list-style-type: disc;
  margin-left: 1em;
}

#documentation table {
  border: 1px;
  border-style: solid;
  border-color: #D6D6D6;
  font-family: 'Source Sans Pro', Georgia;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 0.9em;
  line-height: 1.2em;
  color: #444444;
  margin-bottom: 2em;
}

#documentation th, td, tr {
  border: 1px;
  border-style: solid;
  border-color: #D6D6D6;
  padding: 0.5em 0.75em;
}

#documentation tr:nth-child(2n) {
  background-color: #f8f8f8;
}

#documentation table strong {
  font-family: 'Source Sans Pro', Georgia-Bold;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 1.2em;
}

#documentation table .centered-cell {
  text-align:center;
}

#documentation table code {
  font-family: Consolas, Menlo, 'Droid Sans Mono', Courier, monospace;
  font-size: 0.8em;
}

#documentation #toc h1 {
  font-family: 'Source Sans Pro', Georgia-Bold;
  font-style: normal !important;
  font-weight: normal !important;
}

#documentation #toc h1 em {
  font-family: 'Source Sans Pro', Georgia-BoldItalic;
  font-style: italic !important;
  font-weight: 600 !important;
}

#documentation #toc h2 {
  font-family: 'Source Sans Pro', Georgia-Bold;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 1.3em;
  margin: 0;
  padding: 0;
  padding-top: 1em;
  padding-bottom: 0.5em;
}

#documentation #toc h2 em {
  font-family: 'Source Sans Pro', Georgia-BoldItalic;
  font-style: italic !important;
  font-weight: 600 !important;
}

#documentation #toc h3 {
  font-family: 'Source Sans Pro', Georgia;
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 1.0em;
  margin: 0;
  padding: 0;
  padding-top: 0.1em;  
  padding-bottom: 0.2em;  
}

#documentation #toc h3 em {
  font-family: 'Source Sans Pro', Georgia;
  font-style: italic !important;
  font-weight: normal !important;
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  #documentation {
    font-size: 2.5em;
  }
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  #documentation #toc h3 {
    /*font-family: 'Museo Sns W04 Cond 700';*/
  }
  #documentation #toc h3 em {
    /*font-family: 'MuseoSnsW04-Cond700It';*/
  }
}

/*-------------- GitHub --------------*/

#github_intro {
  /*padding-top: 1.5em;*/
  padding-bottom: 1.5em;
}

#github_links {
  /*padding-top: 2em;*/
  padding-bottom: 2em;
}

#github_links ul {
  list-style-type: disc;
  list-style-position: inside;
  color: #007CC6;
}

/*-------------- Contact --------------*/

.contact_banner {
  margin-top: 1.5em;
}

.contact_link {
  float: inherit;
  /*margin-top: 2em;*/
  margin-bottom: 2em;
  width: 12em;
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  .contact_link {
    width: 100%;
  }
}

#about {
  position: inherit;
  float: left;
  padding-bottom: 2em;
}

#saarinen {
  float: inherit;
  margin-top: 1.5em;
  padding-right: 3em;
  width: 40%;
  min-width: 22em;
}

#furniture {
  float: inherit;
  margin-top: 40px;
  width: 24em;
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  #saarinen {
    width: 100%;
    min-width: 0;
  }
  #furniture {
    width: 100%;
  }
}

#furniture img {
  display: block;
  width: 100%;
}

#furniture figcaption {
  padding-top: 0.75em;

  font-family: 'Source Sans Pro', Helvetica-Light, Helvetica;
  font-style: normal !important;
  font-weight: 300 !important;
  text-align: right;
}

#about_me {
  float: inherit;
  width: 24em;
  min-width: 22em;
  width: 40%;
  margin-top: 4em;
}

#my_pic {
  float: inherit;
  margin-top: 2.75em;
  width: 24em;
  /*margin-bottom: 2em;*/
  padding-right: 3em;
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  #furniture figcaption {
    padding-bottom: 48px;
  }
  #about_me {
    width: 100%;
    margin-top: 24px;
    min-width: 0;
    min-height: 0;
  }
  #my_pic {
    padding-top: 48px;
    width: 100%;
  }
}

#my_pic img {
  display: block;
  width: 100%;
}

#we_live {
  padding-top: 1em;
}

.github_profile {
  margin-left: 0.7em;
  width: 1.2em;
  height: 1.2em;
  display: block;
  background: url('/images/octocat.png') no-repeat center;
  background-size: contain;
}

.twitter_profile {
  margin-left: 2em;
  width: 1.3em;
  height: 1.3em;
  display: block;
  background: url('/images/twitter.png') no-repeat center;
  background-size: contain;
}

.blog_profile {
  margin-left: 0.6em;
  margin-top: -0.12em;
  width: 1.4em;
  height: 1.4em;
  display: block;
  background: url('/images/blog.png') no-repeat center;
  background-size: contain;
}

.slideshare_profile {
  margin-left: 0.6em;
  width: 1.2em;
  height: 1.2em;
  display: block;
  background: url('/images/slideshare.png') no-repeat center;
  background-size: contain;
}

.linkedin_profile {
  margin-left: 0.6em;
  margin-top: -0.2em;
  width: 1.5em;
  height: 1.5em;
  display: block;
  background: url('/images/linkedin.png') no-repeat center;
  background-size: contain;
}

.email_profile {
  margin-left: 2em;
  width: 1.3em;
  height: 1.3em;
  display: block;
  background: url('/images/email.png') no-repeat center;
  background-size: contain;
}

.bannerbackgroundcolor a:hover {
  opacity: 0.5;
}

/*-------------- Code sample --------------*/

/* 
#side_by_side_code {
  position: relative;
  left: 40px;
  right: 40px;
  width: auto;
}
 */

#objc_sample {
  clear: both;
  margin-top: 1.5em;
  margin-bottom: 1em;
}

#eero_sample {
  clear: both;
  margin-top: 2em;
}

.code_sample {
}
 
pre.code_sample {
  border: 1px;
  border-style: solid;
  border-color: #D6D6D6;
  border-radius: 0.4em;
  line-height: 1.3em;
  padding: 2em;
  padding-bottom: 1em;
  /*box-shadow: 10px 10px 5px #888;*/
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  pre.code_sample  {
    overflow: auto;
  }
}

/*-------------- Features --------------*/

.features {
  position: inherit;
  float: left;
}

.feature {
  float: inherit;
  margin-top: 1.5em;
  margin-right: 1.5em;
  width: 23em;
/*  min-width: 45%; */
  min-height: 9em;
}

.bulletedfeature {
  min-height: 11.2em;
}

/* iPhones and smaller
*/
@media (max-device-width: 640px) {
  .feature {
    width: 100%;
  }
}

.feature .copy {
  margin-top: 0.8em;
  line-height: 1.4em;
}

.feature span {
  font-family: 'Source Sans Pro', Helvetica-Bold;
  font-style: normal !important;
  font-weight: 600 !important;
}

.feature ul {
  list-style-type: disc;
  margin-left: 0.9em;
}

.feature pre {
  display: inline;
}

#mainfeatures {
}

#features_banner {
  margin-top: 1.5em;
}