inline toolbar offsets

HTML

<script src="http://fonts.googleapis.com/css?family=Lato"></script>
<script src="https://s3.amazonaws.com/ephox-static-ephox-com/jsfiddle/textboxio/textboxio.js"></script>
<div id="editable_region">
    <h1>Offsets</h1>
    
</div>

<article>
  <p>Click on this content. Observe that the toolbar is initially offset by (top, left) =  (-55, 55) pixels from the top left of this box</p>
</article>

CSS

@import url(http://fonts.googleapis.com/css?family=Lato:100,400,700,900);

body{
   background-color: rgb(255, 205,0);
   
}

#editable_region{
    margin-top: 5em;
    color: black;
    font-weight: 400;
}

#editable_region p{
    font-family: 'Helvetica Neue';
}

#editable_region h1{
    text-transform: uppercase;
    font-family: 'Lato';
    font-size: 5em;
}

article {
    font-family: 'Helvetica Neue';
    color: black;
    font-weight: 200;
}

JavaScript

var config = {
    ui: {
        toolbar: {
            offset: {
                top: -55,
                left: 0
                
            }
        }
    }
}
textboxio.inline('article', config);