*{margin:0;padding:0;}
body {
  background: fff; 
  font-family: 'Open Sans', sans-serif;    
  color: #fff;   
  overflow-x: hidden;    
}
header{
  position: absolute;
  z-index: 9999;
  width: 100%;    
  padding: 4px;
	 
background: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4dffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */   
}

bottom{
  position: absolute;
  z-index: 9999;
  width: 100%; 
    
   padding:0px;
  margin:0px;	 
 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&1+0,0+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

button{
  font-size: 8px;
  font-family: sans-serif;
  color:#aaa;	
	border:none;
	background:none;
	margin:0 0 0 10px;
	cursor: pointer;
}
button:hover{color:#fff;}

h1, h2, h3{   
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 700; 
    margin: .8em 0 .2em 0;
}    
h1{   
 margin: .2em .5em;
 display: inline-block;       
}
header p{
 display: inline-block; 
 font-size: .9em;    
}
.content{
    margin: 1em 2em;    
}
.content ul, .content ol{
    margin: .8em 1em .8em 2em;   
}
span.code{
    font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;   
    color: #999;
}
.gist{
    margin: 1em 1em 2em 2em;
}
ol .gist{
    margin: 1em 0 2em 0;
}
a{ 
    color:#fff;
}
.num2{
    width: 85%;
    margin: 2em auto;
}
footer{
    color: #ccc;
    font-size: .8em;
    font-style: italic;
    text-align: center;
    background: #000;
    padding: 1.5em 0 .5em 0;
    margin-top: 5em;
}
footer span{
    font-size: 1.3em;
    color: #fff;
}
@media screen and (max-width: 830px){
    h1{
     font-size: 1.3em;   
    }
    .desc{
        display: none;   
    }
}

@media screen and (max-width: 400px){
    h1{
     font-size: 1.1em;   
    }
    header span{
        display: none;   
    }
    .gist{
        width: 100%;
    }
}