/* Reset */
*{margin:0;padding:0;}
a{text-decoration:none;color:inherit;}
html{width:100%;height:100%;}

/* Body */
body{
  background:#fff;
}

/* Fonts */
@font-face {
  font-family: 'Quicksand';
  src: url(../font/quicksand/quicksand.ttf)  format('truetype');
}
@font-face {
  font-family: 'Intro';
  src: url(../font/intro/intro.otf)  format('truetype');
}

/* Header */
header{
  width:100%;
  height:60px;
  background:#222;

}
.logo{
  width:50px;
  height:65px;
  position:relative;
  top:7.5px;
  float:left;
  margin-left:5%;
}
.logo img{
  width:100%;
  height:100%;
}
nav{
  width:auto;
  height:100%;
  float:right;
  margin-right:5%;
  list-style:none;
}
nav li{
  width:auto;
  margin-right:20px;
  float:left;
}
nav li a{
  font-family:Raleway;
  font-size:16px;
  color:#fff;
  line-height:80px;
}
nav select{
  width:150px;
  height:30px;
  margin-top:25px;
  font-family:Raleway;
  font-size:14px;
  color:#666;
  border:2px solid #aaa;
  padding-left:10px;
}
nav select:focus{
  outline:none;
}

/* Content */
.container{
  width:70%;
  height:auto;
  padding:20px 0;
  margin:20px auto;
}
.container h1{
  font-family:Raleway;
  font-size:24px;
  color:#222;
  text-transform:uppercase;
  margin:20px 0;
}
.container h2{
  font-family:Raleway;
  font-size:16px;
  color:#444;
  margin-top:10px;
}
.container h3{
  font-family:Raleway;
  font-weight:normal;
  font-size:16px;
  color:#aaa;
}
.code{
  width:600px;
  height:auto;
  margin:20px auto;
  padding:10px 20px;
  background:#222;
  border-left:10px solid #aaa;
  font-family: Consolas;
  font-size:16px;
  color:#fff;
}
.code span{
  color:#89A978;
}
.space{
  width:20px;
  height:1px;
  float:left;
}

footer{
  width:100%;
  height:50px;
  background:#222;
}
footer h1{
  font-family:Raleway;
  font-weight:normal;
  font-size:14px;
  color:#fff;
  margin-left:5%;
  line-height:50px;
}