body, html { padding: 0; margin: 0; }


#breadcrumbs{
    width:0px;    
}

.document.original, .document.translated {
    width: 99%;
    min-height: 200px;
    position: absolute;
}
.document.original {
    left: 0;
    display:none;
}

.document.translated {
    left: 0;
    .fragment {
        border-bottom: 2px solid black;
    }

    .fragment:nth-child(2) {
        margin-left: 15px;
    }

    .p .fragment:before {
        content: '';
        // font-family: "FontAwesome";
        // color: transparent;
        // font-size: .8em;

        background-color: white;

        font-style: normal;
        margin-right: 5px;
        display: inline-block;
        width: 10px;
        height: 10px;
        // vertical-align: middle;
        box-shadow: inset 2px 2px 3px #666;
        border-radius: 4px;
    }

    .fragment.highlight {
        color: black;
        outline: none;
        // background-color: hsla(214, 40%, 50%,  15%);
    }

    .fragment[data-status='todo'] {
        background-color: hsla(0, 40%, 50%,  15%);
        border-color: hsl(0, 80%, 40%);

        &.highlight:before {
            background-color: hsl(0, 80%, 40%);
        }
    }

    .fragment[data-status='pending'] {
        background-color: hsla(40, 40%, 50%, 15%);
        border-color: hsl(50, 80%, 40%);
        &.highlight:before {
            background-color: hsl(50, 80%, 40%);
        }
    }

    .fragment[data-status='translated'] {
        background-color: hsla(80, 40%, 50%, 15%);
        border-color: hsl(100, 80%, 40%);
        &.highlight:before {
            background-color: hsl(100, 80%, 40%);
        }
    }

    .current{
       // background-color:yellow;
    }
}
.document.original {
    .fragment.highlight {
        background-color: #eee;
        border-bottom: 2px solid #666;
    }
}
.fragment {
    display: inline;
    border-radius: 5px;
    padding: 0px 5px;
}



@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville|Titillium+Web);

.akomaNtoso {
    max-width: 1240px;
    margin: auto;
    font: 14px/20px 'Libre Baskerville', serif;
    color: #333;
    text-align: justify;
}

.label(@color, @label) {

    padding: 25px 10px 0;
    margin: 10px 1px 1px;

    &:before {
        content: @label;

        position: absolute;
        top: 0px;
        left: 0px;
        
        font: 13px/16px 'Titillium Web', sans-serif;

        display: inline-block;
        padding: 0px 6px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        color: white;
        background-color: hsl(@color, 30%, 40%);
    }
}

.labelScrolled(@color, @label) {

    padding: 25px 10px 0;
    margin: 10px 1px 1px;

    &:before {
        content: @label;

        position: absolute;
        top: 0px;
        left: 0px;
        
        font: 13px/16px 'Titillium Web', sans-serif;

        display: inline-block;
        padding: 0px 6px;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        color: white;
        background-color: hsl(@color, 30%, 40%);
    }
}

.labelBig(@color, @label) {

    padding: 1px 10px 0;
    margin: 5px 5px 5px;
    
    &:before {
        content: @label;

        position:relative;
        top: 17px;
        left: -42px;
        color:white;
        font-weight:bold;
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg); 
        transform: rotate(90deg);
        display:inline-block;
        font: 13px/16px 'Titillium Web', sans-serif;
        width:50px;
    }
}



.mainPartLabelBig(@color, @label) {
    .hcontainerLabelBig(@color);
    .labelBig(@color, @label);
    border-color: hsl(@color, 30%, 40%);
}


.mainPartScrolled(@color, @label) {
    .hcontainerScrolled(@color);
    .labelScrolled(@color, @label);
    border-color: hsl(@color, 30%, 40%);
}

.mainPart(@color, @label) {
    .hcontainer(@color);
    .label(@color, @label);
    border-color: hsl(@color, 30%, 40%);
}

.mainPartNoLabel(@color, @label) {
    .hcontainer(@color);
    border-color: hsl(@color, 30%, 40%);
}

.hcontainer(@color) {
    position: relative;
    margin: 10px 0;
    padding: 0 10px;
    border-left: 4px solid hsl(@color, 30%, 65%);

    >.num {
        position: relative;
        color: hsl(@color, 0%, 40%);
        margin: 8px 5px 15px;
        font-size: 25px;
        font-weight: bold;
        display: inline-block;
    }

    >.heading {
        position: relative;
        color: hsl(@color, 0%, 40%);
        margin-left: 15px;
        font-size: 13px;
        font-style: italic;
        display: inline-block;
    }
}

.hcontainerScrolled(@color) {
    position: relative;
    margin: 10px 0;
    padding: 0 10px;
    border-left: 4px solid hsl(@color, 30%, 65%);
  
    >.num {
        position: relative;
        color: hsl(@color, 0%, 40%);
        margin: 8px 5px 15px;
        font-size: 25px;
        font-weight: bold;
        display: inline-block;
    }

    >.heading {
        position: relative;
        color: hsl(@color, 0%, 40%);
        margin-left: 15px;
        font-size: 13px;
        font-style: italic;
        display: inline-block;
    }
}

.hcontainerLabelBig(@color) {
    border-left: 15px solid hsl(@color, 30%, 65%);
    position: relative;
    
    >.num {
        position: relative;
        color: hsl(@color, 0%, 40%);
        margin: 0px 0 0px;
        font-size: 25px;
        font-weight: bold;
        display: inline-block;
    }

    >.heading {
        position: relative;
        color: hsl(@color, 0%, 40%);
        margin-left: 5px;
        font-size: 13px;
        font-style: italic;
        display: inline-block;
    }
}


.inline (@color, @label) {
    border-bottom: 1px solid hsl(@color, 0%, 65%);
    display: inline-block;
    position: relative;
    margin: 5px 0 3px;
    padding-right: 80px;

    &:before {
        content: @label;
        width: 60px;
        text-align: center;

        font: 13px/16px 'Titillium Web', sans-serif;

        position: absolute;
        right: 0px;
        bottom: 0px;

        padding: 0px 4px;
        border-top-right-radius: 4px;
        border-top-left-radius: 4px;
        color: white;
        background-color: hsl(@color, 0%, 65%);
    }
}

.document.original, .document.translated {

    .preamble { .mainPart(206, 'preamble'); }
    .preface { .mainPart(206, 'preface'); }
    .conclusions { .mainPart(206, 'conclusions'); }
    .body { .mainPart(206, 'body'); }

    .title { .mainPart(70, 'titulo'); }
    .section { .mainPart(91, 'section'); }
    .article { .mainPart(109, 'article'); }
    .list { .mainPart(159, 'List'); }
    .intro { .mainPart(159, 'Intro'); }
    .point { .mainPart(159, 'Point'); }

    /*.list { .mainPartLabelBig(301, 'LIST'); }
    .intro { .mainPartLabelBig(301, 'INTRO'); }
    .point { .mainPartLabelBig(301, 'POINT'); }*/

    //.body.scrolled { .mainPartScrolled(206, 'body'); }
    .title.scrolled { .mainPartScrolled(70, 'title'); }
    .section.scrolled { .mainPartScrolled(91, 'section'); }
    .article.scrolled { .mainPartScrolled(109, 'article'); }
   /* .list.scrolled { .mainPartScrolled(301, 'list'); }
    .intro.scrolled { .mainPartScrolled(301, 'intro'); }
    .point.scrolled { .mainPartScrolled(301, 'point'); }*/
    
     /*.formula {
         .inline(206, 'formula');
         font-style: italic;
     }
     .docAuthority { .inline(206, 'authority'); }
     .signature {
         .inline(206, 'signature');
         text-align: right;
         margin: 0 5px;
     }*/


    .list .point .num{
        font-size: 14px;
        font-weight: bold;
        margin-top:0px;
        display:inline-block;
    }

    .list .point .content{
        position:relative;
        margin-left:35px;
        left:0px;
        margin-top:-35px;
    }

    .point .list{
        position:relative;
        margin-left:35px;
        left:0px;
        margin-top:-33px;
    }

    /*.list>.intro {
        font-style: italic;
    }

    .point .list {
        display:inline-block;
        margin-left: 45px;
        margin-top:-35px;
    }*/

    
    .title .fragment{
        background-color: hsla(70, 30%, 65%,15%);
        border-bottom-color: hsl(70, 30%, 65%);
       
    }
    .section .fragment{
        background-color: hsla(91, 30%, 65%,15%) ;
        border-bottom-color: hsl(91, 30%, 65%) ;
        }
    .article .fragment{
        background-color: hsla(109, 30%, 65%,15%) ;
        border-bottom-color: hsl(109, 30%, 65%);
         }
    .list .fragment{
        background-color: hsla(159, 30%, 65%,15%) ;
        border-bottom-color: hsl(159, 30%, 65%);
         }
    .preamble .fragment{
        background-color: hsla(206, 30%, 65%,15%) ;
        border-bottom-color: hsl(206, 30%, 65%);
         }
    .preface .fragment{
        background-color: hsla(206, 30%, 65%,15%) ;
        border-bottom-color: hsl(206, 30%, 65%);
         }
    .conclusions .fragment{
        background-color: hsla(206, 30%, 65%,15%) ;
        border-bottom-color: hsl(206, 30%, 65%);
         }

}