@import url(http://wf.typotheque.com/WF-009837-000414);
@import url(prettify.css);

body{
  font-family: "Greta Text";
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  font-variant: normal;
  font-size:76%;
  background-color:#dadadf;
  margin:3em 5em;
  padding:4em 4em;
  width:70em;
}
h1,h2,h3,h4,h5,h6{
  font-weight:normal;
  font-style:normal;
  font-variant:normal;
  margin:0;
  color:rgb(0,63,95);
  width:100%;
}
h1{
  font-size:2.5em;
}
h2,h3{margin-top:2em;}
h2{font-size:1.75em;}
h3{
  font-size:1.3em; 
  text-transform:uppercase;
  letter-spacing:.15em;
}
section{
  border-left:1px solid #eee;
  padding-left:2em;
  width:35em;
  display:block;
  margin:0;
  position:relative;
}
p,ul,ol, blockquote{
  margin:1em 0;
  width:100%;
  color:#444;
  font-size:1.3em;
  line-height:1.5em;
}
ul,ol, blockquote{
  padding:.5em 1em .5em 1.5em;
  width:24.5em;
  background-color:#efeff2;
  -webkit-border-radius:5px;
  color:#555;
}
ul,ol{
  line-height:1.2em;
}
ul{
  list-style-type:square;
}
li{
  margin:1em 0;
}
pre,code{
  font-family: "Fedra Mono Medium 2";
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  font-variant: normal;
}
code{
  font-size:.9em;
}
pre{
  margin-left:-1em;
  padding:1em;
  padding-bottom:0;
  background-color:#eee;
  -webkit-border-radius:5px;
  white-space:pre-line;
}
.pln{color:#555;}
.demo{
  position:absolute;
  left:40em;
  width:30em;
  -webkit-border-radius:3px;
  -webkit-box-shadow:-3px 2px 3px rgba(0,0,0,0.3);
  background-color:#fff;
  padding:10px;
}
.demo *{
  outline:1px dotted blue;
  color:#888;
  
}