/* __________________________________ DEBUG __________________________________ */
html.debug {
    /*outline: 1px solid purple;*/

    body {
        /*outline: 1px solid pink;*/
    }
    div.preview-page {
        outline: 1px solid blue;
    }

    div#content {
        /*outline: 1px solid red;*/
    }
    .region-break {
        /*border-top: 1px dashed blue;*/
    }
    .page {
        outline: 1px solid purple;
    }
    .moveable {
        outline: 1px solid yellow;
    }
}
/* __________________________________ VARIABLES __________________________________ */
@page-width: 225mm;
@page-height: 300mm;
@spread: @page-width*2;
@crop-length: 7mm;
@crop-offset: 5mm;
@crop: @crop-length + @crop-offset;    // Based on Scribus cropmarks with 5mm of bleed -> 7mm of marks + 5mm of offset
@page-width-crop: @page-width + (@crop*2); 
@page-height-crop: @page-height + (@crop*2);

@page-margin-inside: 10mm;
@page-margin-outside: 15mm;
@page-margin-top: 10mm;
@page-margin-bottom: 25mm;

@color: black;
@color-0: lighten(@color, 10%);
@color-10: lighten(@color, 10%);
@color-20: lighten(@color, 20%);
@color-30: lighten(@color, 30%);
@color-40: lighten(@color, 40%);
@color-50: lighten(@color, 50%);
@color-60: lighten(@color, 60%);
@color-70: lighten(@color, 70%);
@color-80: lighten(@color, 80%);
@color-90: lighten(@color, 90%);
@color-100: lighten(@color, 100%);

@color-blue: #003399;
@color-rouge:#cc3300;
@color-vert:#4c6633;
@color-gris:#727171;

/* __________________________________ INTERFACE CLASSES  __________________________________ */
@media print {
    .ui-resizable-handle,
    .button,
    #interface {
        display: none;
    }
}
.button {
    z-index: 1000;
    background-color: black;
    font-family:sans-serif; 
    text-transform: uppercase;
    font-size: 12px !important;
    letter-spacing: 1px;
    color: white;
    margin: 0;
    padding: 5px 7px;
    cursor: pointer;
    border: 0;

    &:hover {
        background-color: white;
        color: black;
        outline: 1px solid black;
    }
}
.button-active {
    background-color: white;
    color: black;
    outline: 1px solid black;
}

.lo-res {
    outline: 10px solid red;
}

div#interface {
    font-family:sans-serif; 
    text-transform: uppercase;
    font-size: 12px !important;
    line-height: 16px;
    letter-spacing: 1px;
    position: fixed;
    bottom: 10px;
    right: 10px;

    a {
        text-decoration: none;
        position: static;
    }

    div#toc {
        display: inline-block;

        ul#toc-pages {
            display: none;
            background-color: black;
            position: absolute;
            right: 0;
            bottom: 2em;
            height: 200px;
            width: 80px;
            overflow: auto;

            a {
                color: white;
            }
        }
        button {
            width: 80px;
        }
    }
}

/* __________________________________ ABSOLUTE POSITIONNED OBJECTS __________________________________ */
/* Adding .moveable class to an object makes it absolutely positionned on the page.
 * You can then move it around and resize it.
 * Copy its properties (i.e. "top: 22px; left: 101px; width: 212px; height: 244px;).
 * Paste those properties back to the object's "style" attribute.
 */
.inside {
    position: relative;
    height: @page-height;
}
.moveable {
    position: absolute;
    overflow: hidden;
    z-index: -1010 !important;

    &.foreground {
        z-index: 1000 !important;
    }

    figure {
        width: 100%;
        height: 100%;
    }

}
.moveable .properties {
    display: none;
    position: absolute;
    bottom: 0.5em;
    right: 0.5em;
    text-transform: none;
    height: 2em;
}
.moveable:hover .properties {
    display: block;
}

/* __________________________________ IMAGES __________________________________ */
/* Use those classes for images to fit width or height of parent elements or both. */

img.fit-height {
    height: 100%;
}

img.fit-width {
    width: 100%;
}

.float {
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}

/* __________________________________ PAGE SETTINGS  __________________________________ */
* {
    -webkit-print-color-adjust: exact;  /* Allows printing of background colors */
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
}

@page {
    //size: @page-width @page-height; // format coupé
    size: @page-width-crop 326mm;  // format avec cropmarks
    margin: 0;
}

html.spread {
    width: @page-width-crop * 2;

    /*@page {*/
        /*//size: @page-width *2 @page-height; // format coupé*/
        /*size: @page-width-crop *2  @page-height-crop;  // format avec cropmarks*/
    /*}*/

    .preview-page {
        outline: 1px solid black;
        float: left;

        &:first-child {
            margin-left: @page-width !important;
        }
        &:nth-child(odd) {
            margin-left: -@crop * 2;
        }
    }
}

html {
    width: @page-width-crop;

}
body {
    position: absolute;
}

.page {
    height: @page-height;
    width: @page-width;
    margin: @crop;
    margin-bottom: 0;
    padding-top: @page-margin-top;
    padding-bottom: @page-margin-bottom;
    -webkit-flow-from: myFlow;
    position: absolute;
}
div#content {
    -webkit-flow-into: myFlow;
}

/* __________________________________ PRINT MARKS  __________________________________ */
div#master-page {
    position: absolute;
    top: 0;
    z-index: -500;
    width: 100%; 
    z-index: -1000;

    /*&.background {*/
        /*z-index: -10000;*/
    /*}*/
}
.print-marks {
    position: absolute;
    width: 100%;
    height: @page-height-crop;
    /*height: 1180px;*/
    top: 0;
    bottom: 0;
}
div.preview-page {
    width: @page-width-crop; 
    height: @page-height-crop;
    z-index: -10;
    outline-offset: -@crop;
    counter-increment: page-counter;
    page-break-inside: avoid;
    page-break-after: always;
    overflow: hidden;

    &.overflow {
        overflow: visible;
    }

    .folio {
        font-size: 0.7em;
        position: absolute;
        bottom: 20mm;
        width: 10mm;
    }
    &:nth-child(odd) { 
        .page {
            padding-left: @page-margin-inside;
            padding-right: @page-margin-outside;
        }
        .titre-courant {
            text-align: right;
        }
        .folio {
            left: 75mm;
        }
    }
    &:nth-child(even) {
        .page {
            padding-left: @page-margin-outside;
            padding-right: @page-margin-inside;
        }
        .titre-courant {
            text-align: left;
        }
        .folio {
            right: 75mm;
        }
    }
}
 
/* __________________________________ CROP MARKS  __________________________________ */
div.crop-top-left,
div.crop-top-right,
div.crop-bottom-right,
div.crop-bottom-left {
    height: @crop;
    width:  @crop;
    position: absolute;
}
 
div.crop-top-left {
    left: 0;
    top: 0;
}
div.crop-top-right {
    right: 0;
    top: 0;
}
div.crop-bottom-right {
    right: 0;
    bottom: 0;
}
div.crop-bottom-left {
    left: 0;
    bottom: 0;
}
div.crop-top,
div.crop-right,
div.crop-bottom,
div.crop-left {
    width: @crop-length;
    height: @crop-length;
    position: absolute;
}
div.crop-top {
    border-top: 1px solid black;
}
div.crop-right {
    border-right: 1px solid black;
}
div.crop-bottom {
    border-bottom: 1px solid black;
}
div.crop-left {
    border-left: 1px solid black;
}
 

/* __________________________________ CONTENT __________________________________ */
div#content {
}

h1, h2, h3, h4, h5, h6 {
    /* Avoids headings to be cut or to be orphans. 
     * But it doesn't seem to work 
     * if the element after has a page-break-inside avoid. It tries its best! */
    -webkit-region-break-inside: avoid;
    -webkit-region-break-after: avoid;
}
.region-break {
    /* Apply this class to an element to put it on a new region.
     * Hint: 
     * You can also use an empty <div class="page-break"></div> 
     * if you want to put manual page breaks without attaching it to an HTML element
     */
    -webkit-region-break-before: always;
}

/* AN EXAMPLE TO AVOID PAGE BREAK INSIDE, 
 * HERE NO PARAGRAPH WILL BE CUT, 
 * BUT YOU MIGHT WANT TO DEACTIVATE THIS */
p {
    /*-webkit-region-break-inside: avoid;*/
}


/* __________________________________ PLAQUES __________________________________ */

.blue{
color: @color-blue;
}

.rouge{
color: @color-rouge;
}
.vert{
color:@color-vert;
}

.gris{
color:@color-gris;
}