/**
 * Font face for Aleo
 */

@font-face {
  font-family: 'Aleo';
  src: url("fonts/aleo_regular_macroman/Aleo-Regular-webfont.eot");
  src: url("fonts/aleo_regular_macroman/Aleo-Regular-webfont.eot?#iefix") format("embedded-opentype"), 
  url("fonts/aleo_regular_macroman/Aleo-Regular-webfont.woff") format("woff"), 
  url("fonts/aleo_regular_macroman/Aleo-Regular-webfont.ttf") format("truetype"), 
  url("fonts/aleo_regular_macroman/Aleo-Regular-webfont.svg#aleoregular") format("svg");
  font-weight: 400;
  font-style: normal; }
@font-face {
  font-family: 'Aleo';
  src: url("fonts/aleo_light_macroman/Aleo-Light-webfont.eot");
  src: url("fonts/aleo_light_macroman/Aleo-Light-webfont.eot?#iefix") format("embedded-opentype"), 
  url("fonts/aleo_light_macroman/Aleo-Light-webfont.woff") format("woff"), 
  url("fonts/aleo_light_macroman/Aleo-Light-webfont.ttf") format("truetype"), 
  url("fonts/aleo_light_macroman/Aleo-Light-webfont.svg#aleolight") format("svg");
  font-weight: 300;
  font-style: normal; }


 
body {
  font-family:  Helvetica, "Helvetica Neue", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;;
  font-size: 16px;
  line-height: 32px;
  font-weight: 300;
  color: #333;
  background-color: #fdfdfd;  
  margin-left:20px;
  margin-right:20px;}

h1, h2, h3, h4, h5, h6 { 
  font-weight:normal; 
  line-height:1.5; 
  }
  
h1 { 
  font-size:34px; 
  margin-bottom:20px; 
  font-weight: 300; 
  }
  
h2 { 
  font-size:30px; 
  margin-bottom:20px; }

h3 { 
  font-size:24px;  
  margin-bottom:20px; 
  }

h4 { 
  font-size:20px; 
  margin-bottom:20px; 
  }

p, ul, ol { 
  font-size:16px; 
  line-height:32px; 
  margin-bottom:10px; 
  text-rendering:optimizeLegibility; 
  }

hr {
  border-top: none;
  border-bottom: 1px dashed #D8D8D8;
  margin-top: 15px;
  }

u {
  margin-bottom: 5px;
}


ul.list, ol.list          { font-size:16px; line-height:30px; margin:0 0 0px; list-style-position:outside;   }

  /* Unordered Lists */
ul.list                   { margin-left:-20px; list-style-type:disc; }
ul.list li                { padding-bottom: 10px;   }
ul.list li.last           { border-bottom: dotted 1px #e7eaed; }
ul.list li ul             { margin:0 0 0 16px; }
ul.list li ol             { margin:0 0 0 22px; }

  /* Ordered Lists */
ol.list                   { margin-left:-20px; list-style-type:decimal; }
ol.list li ul             { margin:0 0 0 16px; }
ol.list li ol             { margin:0 0 0 22px; }


a                         { color:#337ab7; text-decoration:none; outline:0; }
a:hover, a:focus          { color:#0F7AA7; }


img{
  vertical-align: middle;
}
.img-responsive {
  display: block;
  width: 230px;
  height: auto;
}

.row {
  width: 800px;
  margin: 0px auto 0;
  }


/**
 * Style of header
 */

.header {
  width: 800px;
  margin: 40px auto 0;
  }

.header h1 {
  display: inline-block;
  margin: 0;
  width: 39%;
  }

.header h1 a {
  font-family: 'Aleo', sans-serif;
  font-weight: 300;
  font-size: 44px;
  color: black;
  display:inline-block;
  text-decoration: none;
  }

.nav {
  font-family: 'Aleo', sans-serif;
  font-weight: 300;
  display: inline-block;
  text-align: right;
  font-size: 18px;
  width: 60%;
  position: relative;
  top: 5px;
  }

.nav a {
  text-decoration: none;
  color: #42BCEE;
  -o-transition: color .75s;
  -ms-transition: color .75s;
  -moz-transition: color .75s;
  -webkit-transition: color .75s;
  transition: color .75s; 
  }

.nav a:hover {
  color: #0F7AA7;
  -o-transition: color .1s;
  -ms-transition: color .1s;
  -moz-transition: color .1s;
  -webkit-transition: color .1s;
  transition: color .1s; 
  }

.nav a.active {
  color: #0F7AA7; 
  }


blockquote {
  background: #f0f0f0;
  padding: 2px 5px;
  font-family: 'Aleo', sans-serif;
  font-size: 18px;
  line-height:36px;
  font-weight: 400;
  margin-left: 0px;
  margin-right: 0px;
  }


/**
 * Style of footer
 */

footer {
  border-top: 5px solid #333;
  border-bottom: 5px solid #333;
  font-size: 10px;
  background-color: #333;
  padding: 2px;
  color: #fdfdfd;
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 10px;
  line-height: 10px;
  width: 100%; 
  }



/**
 * Code formatting
 */
pre,
code {
  font-size: 15px;
  border-radius: 3px;


  }

code {
  padding: 1px 5px; 
  }

pre {
  padding: 8px 12px;
  overflow-x: scroll; }
  pre > code {
    border: 0;
    padding-right: 0;
    padding-left: 0; }



/**
 * Size change with machine
 */

@media screen and (max-width: 960px) {

  .row, .header {
    width: 800px; 
    }

  .nav {
    margin-top: 0px; 
    }

  }
  
    
@media screen and (max-width: 800px) {

  .row, .header {
    width: 100%; 
    }
  
  .header h1 {
    width: 100%;
    text-align: center;
    margin-top: 0px; 
    }

  .nav {
    width: 100%;
    text-align: center;
    margin-top: 10px; 
    }

code {
  font-size: 12px;
  border-radius: 3px;

  }


 }