@import "compass";
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,500);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

$mdBorder: 1px solid #cccccc;
$leftMargin: 10px;
$leftBoxWidth: 95%;

button {
  @include button;
}

#source-editor{}

#source-editor textarea{
  height: 300px;
  width: $leftBoxWidth;
  font-family: 'Source Code Pro', sans-serif;
  background-color: #ddddddd;
  margin-left: $leftMargin;
}

#source-editor textarea, 
#preview{
  border: $mdBorder;
}

#source-editor #raw-source{
  padding-left: $leftMargin;
  width: $leftBoxWidth;
}

#preview{
  font-family: 'Yanone Kaffeesatz', sans-serif;
  min-height: 300px;
  padding-left: $leftMargin;
  padding-right: $leftMargin;
  width:98%;
}

#compile-btn{
  padding: $leftMargin;
}

.md-introduction{
  margin-left: $leftMargin;
}