/*** Crafted by Reinout van Kempen 2015 ***/

/* foundation */
* {
    margin: 0;
    padding: 0;
}

a[data-tooltip]:link, a[data-tooltip]:visited {
    position: relative;
    text-decoration: none;
}

.sharePreview {
    font-size: 14px;
    color: rgb(183, 195, 75);
    top: 10px;
    position: relative;
}

div[data-tooltip]:before {
    content: "";
    position: absolute;
    left: 0px;
    visibility: hidden;
    top: 18px;
    color: #666;
    z-index: 99999;
}

div[data-tooltip]:after {
    content: attr(data-tooltip);
    position: absolute;
    color: white;
    top: 60px;
    left: 5px;
    background: white;
    padding: 5px 5px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    white-space: nowrap;
    z-index: 99999;
    visibility: hidden;
    color: #666;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.59);
    -moz-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.59);
    box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.59);
    font-size: 12px;
    white-space: pre-line;
}

#images.small div[data-tooltip]:nth-child(3n):after {
    left: -90px;
}

#images.medium div[data-tooltip]:nth-child(2n):after {
    left: -50px;
}

#images.big div[data-tooltip]:nth-child(3n):after{
    left: 5px;
}

div[data-tooltip]:hover:before, div[data-tooltip]:hover:after {
    visibility: visible;
    -webkit-transition: visibility 0s linear .3s;
    -moz-transition: visibility 0s linear .3s;
    -o-transition: visibility 0s linear .3s;
    transition: visibility 0s linear .3s;
}

html {
    overflow-y: scroll;
    width: 100%;
    height: 100%;
}

body {
    font-family: helvetica;
    font-size: 13px;
    line-height: 1.42857;
    width: 100%;
    height: 100%;
    color: rgb(102, 102, 102);
    background: rgb(248, 248, 248);
}

main {
    font-family: karla, arial, sans-serif;
    font-size: 16px;
    line-height: 1;
    display: block;
    width: 100%;
    min-width: 760px;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: rgb(220, 220, 220);
    -khtml-user-select: none;
    -webkit-touch-callout: none;
}

a {
    text-decoration: none;
}

h1,
h2,
h3 {
    font-family: karla, open sans, arial, sans-serif;
}

/* fonts */
@font-face {
    font-family: 'arvoregular';
    src: url('webfonts/arvo-regular_201-webfont.eot');
    src: url('webfonts/arvo-regular_201-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/arvo-regular_201-webfont.woff2') format('woff2'), url('webfonts/arvo-regular_201-webfont.woff') format('woff'), url('webfonts/arvo-regular_201-webfont.ttf') format('truetype'), url('webfonts/arvo-regular_201-webfont.svg#arvoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bellotaitalic';
    src: url('webfonts/bellota-italic-webfont.eot');
    src: url('webfonts/bellota-italic-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/bellota-italic-webfont.woff2') format('woff2'), url('webfonts/bellota-italic-webfont.woff') format('woff'), url('webfonts/bellota-italic-webfont.ttf') format('truetype'), url('webfonts/bellota-italic-webfont.svg#bellotaitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bellotaregular';
    src: url('webfonts/bellota-regular-webfont.eot');
    src: url('webfonts/bellota-regular-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/bellota-regular-webfont.woff2') format('woff2'), url('webfonts/bellota-regular-webfont.woff') format('woff'), url('webfonts/bellota-regular-webfont.ttf') format('truetype'), url('webfonts/bellota-regular-webfont.svg#bellotaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bree_serifregular';
    src: url('webfonts/breeserif-regular-webfont.eot');
    src: url('webfonts/breeserif-regular-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/breeserif-regular-webfont.woff2') format('woff2'), url('webfonts/breeserif-regular-webfont.woff') format('woff'), url('webfonts/breeserif-regular-webfont.ttf') format('truetype'), url('webfonts/breeserif-regular-webfont.svg#bree_serifregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'crimson_textroman';
    src: url('webfonts/crimsontext-regular-webfont.eot');
    src: url('webfonts/crimsontext-regular-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/crimsontext-regular-webfont.woff2') format('woff2'), url('webfonts/crimsontext-regular-webfont.woff') format('woff'), url('webfonts/crimsontext-regular-webfont.ttf') format('truetype'), url('webfonts/crimsontext-regular-webfont.svg#crimson_textroman') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'danielregular';
    src: url('webfonts/daniel-webfont.eot');
    src: url('webfonts/daniel-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/daniel-webfont.woff2') format('woff2'), url('webfonts/daniel-webfont.woff') format('woff'), url('webfonts/daniel-webfont.ttf') format('truetype'), url('webfonts/daniel-webfont.svg#danielregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'danielblack';
    src: url('webfonts/daniel-black-webfont.eot');
    src: url('webfonts/daniel-black-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/daniel-black-webfont.woff2') format('woff2'), url('webfonts/daniel-black-webfont.woff') format('woff'), url('webfonts/daniel-black-webfont.ttf') format('truetype'), url('webfonts/daniel-black-webfont.svg#danielblack') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'existenceunicase_light';
    src: url('webfonts/existence-unicaselight-webfont.eot');
    src: url('webfonts/existence-unicaselight-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/existence-unicaselight-webfont.woff2') format('woff2'), url('webfonts/existence-unicaselight-webfont.woff') format('woff'), url('webfonts/existence-unicaselight-webfont.ttf') format('truetype'), url('webfonts/existence-unicaselight-webfont.svg#existenceunicase_light') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'fff_tusjbold';
    src: url('webfonts/fff_tusj-webfont.eot');
    src: url('webfonts/fff_tusj-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/fff_tusj-webfont.woff2') format('woff2'), url('webfonts/fff_tusj-webfont.woff') format('woff'), url('webfonts/fff_tusj-webfont.ttf') format('truetype'), url('webfonts/fff_tusj-webfont.svg#fff_tusjbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'greyscalebasicregular';
    src: url('webfonts/greyscale_basic_regular-webfont.eot');
    src: url('webfonts/greyscale_basic_regular-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/greyscale_basic_regular-webfont.woff2') format('woff2'), url('webfonts/greyscale_basic_regular-webfont.woff') format('woff'), url('webfonts/greyscale_basic_regular-webfont.ttf') format('truetype'), url('webfonts/greyscale_basic_regular-webfont.svg#greyscalebasicregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'greyscalebasicitalic';
    src: url('webfonts/greyscale_basic_regular_italic-webfont.eot');
    src: url('webfonts/greyscale_basic_regular_italic-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/greyscale_basic_regular_italic-webfont.woff2') format('woff2'), url('webfonts/greyscale_basic_regular_italic-webfont.woff') format('woff'), url('webfonts/greyscale_basic_regular_italic-webfont.ttf') format('truetype'), url('webfonts/greyscale_basic_regular_italic-webfont.svg#greyscalebasicitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hattori_hanzolight';
    src: url('webfonts/hattori_hanzo-webfont.eot');
    src: url('webfonts/hattori_hanzo-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/hattori_hanzo-webfont.woff2') format('woff2'), url('webfonts/hattori_hanzo-webfont.woff') format('woff'), url('webfonts/hattori_hanzo-webfont.ttf') format('truetype'), url('webfonts/hattori_hanzo-webfont.svg#hattori_hanzolight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'josefin_slablight';
    src: url('webfonts/josefinslab-light-webfont.eot');
    src: url('webfonts/josefinslab-light-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/josefinslab-light-webfont.woff2') format('woff2'), url('webfonts/josefinslab-light-webfont.woff') format('woff'), url('webfonts/josefinslab-light-webfont.ttf') format('truetype'), url('webfonts/josefinslab-light-webfont.svg#josefin_slablight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'josefin_slablight_italic';
    src: url('webfonts/josefinslab-lightitalic-webfont.eot');
    src: url('webfonts/josefinslab-lightitalic-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/josefinslab-lightitalic-webfont.woff2') format('woff2'), url('webfonts/josefinslab-lightitalic-webfont.woff') format('woff'), url('webfonts/josefinslab-lightitalic-webfont.ttf') format('truetype'), url('webfonts/josefinslab-lightitalic-webfont.svg#josefin_slablight_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'kaushan_scriptregular';
    src: url('webfonts/kaushanscript-regular-webfont.eot');
    src: url('webfonts/kaushanscript-regular-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/kaushanscript-regular-webfont.woff2') format('woff2'), url('webfonts/kaushanscript-regular-webfont.woff') format('woff'), url('webfonts/kaushanscript-regular-webfont.ttf') format('truetype'), url('webfonts/kaushanscript-regular-webfont.svg#kaushan_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'latoregular';
    src: url('webfonts/lato-regular-webfont.eot');
    src: url('webfonts/lato-regular-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/lato-regular-webfont.woff2') format('woff2'), url('webfonts/lato-regular-webfont.woff') format('woff'), url('webfonts/lato-regular-webfont.ttf') format('truetype'), url('webfonts/lato-regular-webfont.svg#latoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'learning_curve_proregular';
    src: url('webfonts/learningcurve_ot-webfont.eot');
    src: url('webfonts/learningcurve_ot-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/learningcurve_ot-webfont.woff2') format('woff2'), url('webfonts/learningcurve_ot-webfont.woff') format('woff'), url('webfonts/learningcurve_ot-webfont.ttf') format('truetype'), url('webfonts/learningcurve_ot-webfont.svg#learning_curve_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'learning_curve_dashed_proRg';
    src: url('webfonts/learningcurvedashed_ot-webfont.eot');
    src: url('webfonts/learningcurvedashed_ot-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/learningcurvedashed_ot-webfont.woff2') format('woff2'), url('webfonts/learningcurvedashed_ot-webfont.woff') format('woff'), url('webfonts/learningcurvedashed_ot-webfont.ttf') format('truetype'), url('webfonts/learningcurvedashed_ot-webfont.svg#learning_curve_dashed_proRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'matchbookregular';
    src: url('webfonts/matchbook-webfont.eot');
    src: url('webfonts/matchbook-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/matchbook-webfont.woff2') format('woff2'), url('webfonts/matchbook-webfont.woff') format('woff'), url('webfonts/matchbook-webfont.ttf') format('truetype'), url('webfonts/matchbook-webfont.svg#matchbookregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'overlockregular';
    src: url('webfonts/overlock-regular-webfont.eot');
    src: url('webfonts/overlock-regular-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/overlock-regular-webfont.woff2') format('woff2'), url('webfonts/overlock-regular-webfont.woff') format('woff'), url('webfonts/overlock-regular-webfont.ttf') format('truetype'), url('webfonts/overlock-regular-webfont.svg#overlockregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pacificoregular';
    src: url('webfonts/pacifico-webfont.eot');
    src: url('webfonts/pacifico-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/pacifico-webfont.woff2') format('woff2'), url('webfonts/pacifico-webfont.woff') format('woff'), url('webfonts/pacifico-webfont.ttf') format('truetype'), url('webfonts/pacifico-webfont.svg#pacificoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'permanent_markerregular';
    src: url('webfonts/permanentmarker-webfont.eot');
    src: url('webfonts/permanentmarker-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/permanentmarker-webfont.woff2') format('woff2'), url('webfonts/permanentmarker-webfont.woff') format('woff'), url('webfonts/permanentmarker-webfont.ttf') format('truetype'), url('webfonts/permanentmarker-webfont.svg#permanent_markerregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'quicksandlight_italic';
    src: url('webfonts/quicksand-lightitalic-webfont.eot');
    src: url('webfonts/quicksand-lightitalic-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/quicksand-lightitalic-webfont.woff2') format('woff2'), url('webfonts/quicksand-lightitalic-webfont.woff') format('woff'), url('webfonts/quicksand-lightitalic-webfont.ttf') format('truetype'), url('webfonts/quicksand-lightitalic-webfont.svg#quicksandlight_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'quicksandregular';
    src: url('webfonts/quicksand-regular-webfont.eot');
    src: url('webfonts/quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/quicksand-regular-webfont.woff2') format('woff2'), url('webfonts/quicksand-regular-webfont.woff') format('woff'), url('webfonts/quicksand-regular-webfont.ttf') format('truetype'), url('webfonts/quicksand-regular-webfont.svg#quicksandregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewayextralight';
    src: url('webfonts/raleway-extralight-webfont.eot');
    src: url('webfonts/raleway-extralight-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/raleway-extralight-webfont.woff2') format('woff2'), url('webfonts/raleway-extralight-webfont.woff') format('woff'), url('webfonts/raleway-extralight-webfont.ttf') format('truetype'), url('webfonts/raleway-extralight-webfont.svg#ralewayextralight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewaysemibold';
    src: url('webfonts/raleway-semibold-webfont.eot');
    src: url('webfonts/raleway-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/raleway-semibold-webfont.woff2') format('woff2'), url('webfonts/raleway-semibold-webfont.woff') format('woff'), url('webfonts/raleway-semibold-webfont.ttf') format('truetype'), url('webfonts/raleway-semibold-webfont.svg#ralewaysemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ralewaysemibold_italic';
    src: url('webfonts/raleway-semibolditalic-webfont.eot');
    src: url('webfonts/raleway-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/raleway-semibolditalic-webfont.woff2') format('woff2'), url('webfonts/raleway-semibolditalic-webfont.woff') format('woff'), url('webfonts/raleway-semibolditalic-webfont.ttf') format('truetype'), url('webfonts/raleway-semibolditalic-webfont.svg#ralewaysemibold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotothin';
    src: url('webfonts/roboto-thin-webfont.eot');
    src: url('webfonts/roboto-thin-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/roboto-thin-webfont.woff2') format('woff2'), url('webfonts/roboto-thin-webfont.woff') format('woff'), url('webfonts/roboto-thin-webfont.ttf') format('truetype'), url('webfonts/roboto-thin-webfont.svg#robotothin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotothin_italic';
    src: url('webfonts/roboto-thinitalic-webfont.eot');
    src: url('webfonts/roboto-thinitalic-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/roboto-thinitalic-webfont.woff2') format('woff2'), url('webfonts/roboto-thinitalic-webfont.woff') format('woff'), url('webfonts/roboto-thinitalic-webfont.ttf') format('truetype'), url('webfonts/roboto-thinitalic-webfont.svg#robotothin_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'seasideresortnfregular';
    src: url('webfonts/seasrn__-webfont.eot');
    src: url('webfonts/seasrn__-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/seasrn__-webfont.woff2') format('woff2'), url('webfonts/seasrn__-webfont.woff') format('woff'), url('webfonts/seasrn__-webfont.ttf') format('truetype'), url('webfonts/seasrn__-webfont.svg#seasideresortnfregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'ubuntulight';
    src: url('webfonts/ubuntu-l-webfont.eot');
    src: url('webfonts/ubuntu-l-webfont.eot?#iefix') format('embedded-opentype'), url('webfonts/ubuntu-l-webfont.woff2') format('woff2'), url('webfonts/ubuntu-l-webfont.woff') format('woff'), url('webfonts/ubuntu-l-webfont.ttf') format('truetype'), url('webfonts/ubuntu-l-webfont.svg#ubuntulight') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* editor */
#editor {
    position: relative;
    overflow: hidden;
    height: 100%;
}

    #editor i {
        cursor: pointer;
    }

/* left */
#left {
    font-size: 25px;
    position: absolute;
    z-index: 100;
    float: left;
    width: 252px;
    height: 100%;
    text-align: center;
    background: rgb(70, 70, 70);
}

@media (max-width: 1410px) {
    #left {
        width: 168px;
    }
}

@media (max-width: 1023px) {
    #left {
        width: 84px;
    }
}

#leftUp {
    height: 40px;
    cursor: pointer;
    border-bottom: 1px solid rgb(100, 100, 100);
    -webkit-tap-highlight-color: transparent;
}

    #leftUp:active {
        border-bottom: 1px solid rgb(50, 50, 50);
        background: rgb(50, 50, 50);
    }

    #leftUp i {
        font-size: 50px;
        margin-top: -5px;
    }

#imagesGradientUp {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 30px;
    transition: opacity 200ms linear;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(rgb(40, 40, 40), rgba(0, 0, 0, 0));
}

#imagesGradientDown {
    position: absolute;
    z-index: 1;
    bottom: 102px;
    width: 100%;
    height: 30px;
    transition: opacity 200ms linear;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(rgba(0, 0, 0, 0), rgb(40, 40, 40));
}

@media (max-width: 1023px) {
    #imagesGradientDown {
        bottom: 41px;
    }
}

#imagesGradientUp.shown,
#imagesGradientDown.shown {
    opacity: 1;
}

#thumbSizes {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    border-top: 1px solid rgb(100, 100, 100);
    background: rgb(60, 60, 60);
}

@media (max-width: 1023px) {
    #thumbSizes {
        display: none;
    }
}

#thumbSizes .fa {
    margin-top: 17px;
}

#leftDown {
    position: absolute;
    bottom: 61px;
    width: 100%;
    height: 40px;
    cursor: pointer;
    border-top: 1px solid rgb(100, 100, 100);
    background: rgb(70, 70, 70);
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 1023px) {
    #leftDown {
        bottom: 0;
    }
}

#leftDown:active {
    border-top: 1px solid rgb(50, 50, 50);
    background: rgb(50, 50, 50);
}

#leftDown i {
    font-size: 50px;
    margin-top: -6px;
}

#imagesContainer {
    position: relative;
    overflow: hidden;
    width: 100%;
}

#imagesScrollBar {
    position: absolute;
    top: 0;
    left: 2px;
    width: 12px;
    height: 60px;
    margin-top: -30px;
    transition: top 1000ms 0ms linear, opacity 200ms 0ms linear;
    opacity: 0;
    background: rgba(0, 0, 0, 0.5);
}

    #imagesScrollBar.enabled {
        opacity: 1;
    }

    #imagesScrollBar.used {
        transition: top 1000ms 0ms linear, opacity 200ms 4000ms linear;
    }

#leftToggle {
    position: absolute;
    z-index: -1;
    top: 50%;
    width: 29px;
    height: 32px;
    margin-top: -16px;
    margin-left: 100%;
    cursor: pointer;
    background: rgb(70, 70, 70);
    box-shadow: 2px 2px 15px rgb(174, 174, 174);
    -webkit-tap-highlight-color: transparent;
}

    #leftToggle:active {
        background: rgb(50, 50, 50);
    }

    #leftToggle div {
        display: inline-block;
        float: left;
        width: 1px;
        height: 19px;
        margin-top: 6px;
        margin-left: 6px;
        background: rgb(100, 100, 100);
    }

        #leftToggle div:nth-child(1) {
            margin-left: 3px;
        }

        #leftToggle div:nth-child(2) {
            margin-left: 5px;
        }

#images {
    overflow-y: scroll;
    width: 273px;
    height: 410px;
    margin: 2px 0;
    background: rgb(70, 70, 70);
}

@media (max-width: 1410px) {
    #images {
        width: 223px;
    }
}

@media (max-width: 1023px) {
    #images {
        width: 121px;
    }
}

body > .image {
    z-index: 600;
    cursor: none;
}

#info {
    position: absolute;
    top: 0;
    left: 100%;
    width: 180px;
    margin-top: 11px;
    margin-left: 20px;
}

#autofill {
    position: absolute;
    top: 100%;
    left: 100%;
    width: 180px;
    margin-top: -55px;
    margin-left: 20px;
}

#autofillButton i:first-child {
    font-size: 25px;
    position: absolute;
    top: 11px;
    left: 12px;
    color: rgb(221, 221, 221);
}

#autofillButton i:last-child {
    font-size: 27px;
    position: absolute;
    top: 7px;
    left: 5px;
}

#infoButton,
#autofillButton {
    font-size: 20px;
    line-height: 16px;
    display: inline-block;
    float: left;
    width: 17px;
    height: 20px;
    margin: 2px;
    padding: 9px 11px 10px 13px;
    cursor: pointer;
    text-align: center;
    color: rgb(128, 128, 128);
    border-radius: 2px;
    background: rgb(255, 255, 255);
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.28);
    -webkit-tap-highlight-color: transparent;
}

    #infoButton:active,
    #autofillButton:active {
        color: rgb(162, 178, 23);
    }

#infoButton {
    margin-left: -3px;
}

    #infoButton i {
        font-size: 28px;
        margin-top: -1px;
        margin-left: -1px;
    }

#infoButtonText,
#autofillButtonText {
    font-size: 10px;
    width: 65px;
    margin-top: 7px;
    margin-left: 55px;
    text-align: left;
    color: rgb(100, 100, 100);
}

#infoButtonText {
    margin-top: 11px;
    margin-left: 50px;
}

#autofillMenu {
    top: 100%;
    left: 100%;
    width: 400px;
    height: auto;
    margin: -373px 17px;
}

    #autofillMenu.hidden {
        display: none;
    }

#autofillMenuContent {
    font-size: 12px;
    position: relative;
    width: 100%;
    color: rgb(80, 80, 80);
}

#autofillTitle {
    font-size: 20px;
    height: 34px;
    margin-left: 2px;
    text-align: left;
}

#autofillSelectionText {
    width: 290px;
    padding: 5px;
    text-align: left;
}

#autofillUseFavoritesContainer {
    position: relative;
    width: 45px;
    height: 39px;
    margin-top: -30px;
    margin-bottom: 9px;
    margin-left: 318px;
}

.fancyToggle {
    display: none;
}

    .fancyToggle:checked + label:after {
        margin-left: 20px;
    }

    .fancyToggle + label:after {
        width: 18px;
        transition: margin 0.4s ease 0s;
        border-radius: 6px;
        background-color: #FFFFFF;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .fancyToggle:checked + label:before {
        background-color: #BECD29;
    }

    .fancyToggle + label:before {
        right: 1px;
        transition: #000000 0.4s ease 0s;
        border-radius: 6px;
        background-color: #D9D9D9;
    }

    .fancyToggle + label:before,
    input.fancyToggle + label:after {
        position: absolute;
        top: 1px;
        bottom: 1px;
        left: 1px;
        display: block;
        content: '';
    }

    .fancyToggle + label {
        position: relative;
        display: block;
        width: 36px;
        height: 17px;
        margin-top: 2px;
        margin-right: 4px;
        margin-left: 2px;
        padding: 2px;
        cursor: pointer;
        -moz-user-select: none;
        border-radius: 6px;
        outline: medium none;
        background-color: #D9D9D9;
    }

#autofillUseFavoritesText {
    font-size: 11px;
    position: absolute;
    bottom: 0;
    width: 100%;
}

#autofillSelection {
    font-size: 12px;
    font-style: italic;
    height: 30px;
    margin-bottom: 38px;
    margin-left: 5px;
    text-align: left;
}

#autofillOptionsLabel {
    width: 100px;
    margin-bottom: 12px;
    margin-left: 5px;
    text-align: left;
}

#autofillOptions {
    display: block;
    height: 70px;
    margin: 7px;
    margin-top: -50px;
    margin-bottom: 22px;
    margin-left: 81px;
}

.autofillOption {
    display: inline-block;
    width: 88px;
    height: 70px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .autofillOption.active,
    .autofillOption:active {
        color: rgb(162, 178, 23);
    }

.autofillOptionIcon {
    font-size: 20px;
    line-height: 16px;
    display: inline-block;
    float: left;
    width: 17px;
    height: 20px;
    margin: 2px;
    margin-left: 28px;
    padding: 9px 11px 10px 13px;
    text-align: center;
    color: rgb(128, 128, 128);
    border-radius: 2px;
    background: rgb(255, 255, 255);
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.28);
}

.autofillOption.active .autofillOptionIcon,
.autofillOption:active .autofillOptionIcon {
    color: rgb(162, 178, 23);
}

.autofillOptionText {
    font-size: 11px;
    position: absolute;
    bottom: 0;
    width: 100px;
    height: 10px;
}

#autofillContinue,
#autofillCancel {
    float: right;
    margin: 5px;
}

#autofillCancel {
    font-size: 16px;
    position: absolute;
    top: -23px;
    right: -5px;
    margin-top: 21px;
    color: rgb(100, 100, 100);
}

.image {
    position: relative;
    display: block;
    float: left;
    width: 75px;
    height: 75px;
    margin: 10px 5px 5px 4px;
    cursor: pointer;
    /*outline: 1px solid rgb(75, 75, 75);*/
    -webkit-tap-highlight-color: transparent;
}

.touchDevice .image {
    margin-top: 20px;
}

#images.medium .image {
    width: 116px;
    height: 116px;
}

#images.medium img {
    max-width: 116px;
    max-height: 116px;
}

#images.big .image {
    width: 243px;
    height: 243px;
}

#images.big img {
    max-width: 243px;
    max-height: 243px;
}

@media (max-width: 1410px) {
    #images.medium .image {
        width: 160px;
        width: 160px;
    }

    #images.medium img {
        max-width: 160px;
        max-height: 160px;
    }

    #images.big .image {
        max-width: 160px;
        max-height: 160px;
    }

    #images.big img {
        max-width: 160px;
        max-height: 160px;
    }
}

#thumbSizes > div {
    display: inline-block;
    float: left;
    width: 33%;
    cursor: pointer;
    color: rgb(100, 100, 100);
}

    #thumbSizes > div.active i {
        color: rgb(220, 220, 220);
    }

    #thumbSizes > div:active i {
        color: rgb(162, 178, 23);
    }

#smallThumbs i {
    font-size: 12px;
    margin-top: 24px !important;
}

#mediumThumbs i {
    font-size: 21px;
    margin-top: 19px !important;
}

#bigThumbs i {
    font-size: 31px;
    margin-top: 14px !important;
}

@media (max-width: 1410px) {
    #thumbSizes > div {
        width: 50%;
    }

    #smallThumbs i:last-child {
        display: none;
    }

    #mediumThumbs {
        display: none !important;
    }
}

.image img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: 75px;
    height: auto;
    max-height: 75px;
    margin: auto;
    transition: opacity 500ms linear;
    opacity: 0;
}

    .image img.loaded {
        opacity: 1;
    }

.image.used img {
    opacity: 0.4;
}

.image .fa {
    font-size: 17px;
    position: absolute;
    right: 1px;
    bottom: 1px;
    display: none;
    cursor: default !important;
    color: rgb(255, 215, 0);
}

.image .counter {
    font-size: 12px;
    position: absolute;
    bottom: 0;
    visibility: hidden;
}

.image img.loaded + .counter {
    visibility: visible;
}

.image .unselected,
.image .selected {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    cursor: pointer !important;
}

.ownSelecting .image .unselected,
.ownSelecting .image .selected {
    display: block;
}

.image .unselected .fa,
.image .selected .fa {
    font-size: 25px;
    top: 50%;
    left: 50%;
    width: 35px;
    height: 32px;
    margin-top: -11px;
    margin-left: -17px;
}

.big .image .unselected .fa,
.big .image .selected .fa {
    font-size: 60px;
    margin-top: -24px;
    margin-left: -30px;
}

.image .unselected .fa {
    cursor: pointer !important;
    color: rgb(240, 240, 240);
    text-shadow: 0 0 5px rgba(55, 55, 55, 0.5);
}

.image .unselected:active .fa {
    color: rgb(162, 178, 23);
    text-shadow: 0 0 5px rgba(55, 55, 55, 0.5);
}

.image .selected .fa {
    cursor: pointer !important;
    color: rgb(162, 178, 23);
    -webkit-tap-highlight-color: transparent;
}

.image .selected:active .fa {
    color: rgb(135, 148, 19);
}

.ownSelecting .image .unselected .fa,
.ownSelecting .image .selected .fa {
    display: block;
}

.image .unselected .fa-heart,
.image .selected .fa-heart-o {
    display: none !important;
}

/* right */
#right {
    font-size: 25px;
    position: absolute;
    z-index: 100;
    right: 0 !important;
    overflow: visible !important;
    width: 84px;
    height: 100%;
    background: rgb(100, 100, 100);
}

    #right.inactive {
        display: none;
        margin-right: -92px !important;
    }

    #right > i {
        display: block;
        width: 23px;
        margin-left: 34px;
    }

    #right .fa-caret-down {
        position: absolute;
        margin-top: -5px;
    }

#rightUp {
    height: 40px;
    cursor: pointer;
    text-align: center;
    border-bottom: 1px solid rgb(110, 110, 110);
    -webkit-tap-highlight-color: transparent;
}

    #rightUp:active {
        border-bottom: 1px solid rgb(70, 70, 70);
        background: rgb(70, 70, 70);
    }

    #rightUp i {
        font-size: 50px;
        margin-top: -5px;
    }

#pagesGradientUp {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 15px;
    transition: opacity 200ms linear;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(rgb(60, 60, 60), rgba(0, 0, 0, 0));
}

#pagesGradientDown {
    position: absolute;
    z-index: 1;
    bottom: 41px;
    width: 100%;
    height: 15px;
    transition: opacity 200ms linear;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(rgba(0, 0, 0, 0), rgb(60, 60, 60));
}

    #pagesGradientUp.shown,
    #pagesGradientDown.shown {
        opacity: 1;
    }

#rightDown {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    cursor: pointer;
    text-align: center;
    border-top: 1px solid rgb(110, 110, 110);
    background: rgb(100, 100, 100);
    -webkit-tap-highlight-color: transparent;
}

    #rightDown:active {
        border-top: 1px solid rgb(70, 70, 70);
        background: rgb(70, 70, 70);
    }

    #rightDown i {
        font-size: 50px;
        margin-top: -6px;
    }

#rightToggle {
    font-size: 20px;
    position: absolute;
    z-index: -1;
    top: 50%;
    width: 29px;
    height: 32px;
    margin-top: -16px;
    margin-left: -29px;
    cursor: pointer;
    background: rgb(100, 100, 100);
    box-shadow: -2px 2px 15px rgb(174, 174, 174);
    -webkit-tap-highlight-color: transparent;
}

    #rightToggle:active {
        background: rgb(70, 70, 70);
    }

    #rightToggle div {
        display: inline-block;
        float: left;
        width: 1px;
        height: 19px;
        margin-top: 6px;
        margin-left: 6px;
        background: rgb(140, 140, 140);
    }

        #rightToggle div:nth-child(1),
        #rightToggle div:nth-child(4) {
            margin-left: 5px;
        }

#pages {
    font-size: 12px;
    overflow: hidden;
    overflow-y: scroll;
    width: 97px;
    height: 416px;
    padding-left: 4px;
    color: rgb(50, 50, 50);
    background: rgb(100, 100, 100);
}

.extensionButton,
.extensionDeleteInfo {
    font-size: 10px;
    width: 76px;
    margin-bottom: 20px;
    padding-top: 15px;
    padding-bottom: 5px;
    cursor: pointer;
    text-align: center;
    color: rgb(180, 180, 180);
    text-shadow: 0 0 6px rgb(0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

    .extensionButton:active,
    .extensionDeleteInfo:active {
        color: rgb(162, 178, 23) !important;
    }

    .extensionButton i,
    .extensionDeleteInfo i {
        font-size: 20px;
        margin: 3px;
        color: rgb(220, 220, 220);
    }

.noExtensions .extensionButton {
    display: none;
}

.coverPage,
.basicPages,
.basicPage {
    position: relative;
    width: 80px;
    height: 26px;
    transition: margin-bottom 250ms ease-in-out;
}

    .coverPage.active.deletable,
    .basicPages.active.deletable,
    .basicPage.active.deletable {
        margin-bottom: 30px;
    }

    .coverPage .pageNumberButton {
        width: 55px;
    }

    .basicPage .pageNumberButton {
        width: 55px;
    }

    .basicPages .pageNumberButton {
        width: 20px;
    }

#pages > .basicPage:nth-child(2) .pageNumberButton {
    float: right;
}

.pageNumberButton {
    font-size: 10px;
    display: inline-block;
    margin-top: 0;
    margin-right: 4px;
    margin-left: 7px;
    padding: 3px;
    padding-top: 4px;
    cursor: pointer;
    text-align: center;
    color: rgb(180, 180, 180);
    background: rgb(240, 240, 240);
    background: 0;
    text-shadow: 0 0 6px rgb(0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

.active > .pageNumberButton {
    color: rgb(255, 255, 255);
    border-radius: 10px;
    background: rgb(162, 178, 23);
}

.sortablePageHandle,
.sortablePageDeleteButton {
    font-size: 18px !important;
    position: absolute;
    top: -60px;
    left: 50%;
    display: none !important;
    margin-left: -14px;
    padding: 3px;
    cursor: pointer;
    text-align: center;
    color: rgb(128, 128, 128);
    border-radius: 2px;
    background: rgb(255, 255, 255);
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.28);
    -webkit-tap-highlight-color: transparent;
}

.sortablePageHandle {
    width: 18px;
}

.sortablePageDeleteButton {
    font-size: 29px !important;
    margin-top: 90px;
    padding: 0;
    color: rgb(255, 255, 255);
    background: 0;
    box-shadow: none;
}

.sortablePagePlaceholder {
    width: 69px;
    height: 42px;
    margin-top: 27px;
    margin-bottom: 16px;
    border: 3px solid rgb(183, 195, 75);
}

.active > .sortablePageHandle,
.deletable > .sortablePageDeleteButton {
    display: block !important;
}

#emptyPages .sortablePageHandle,
#emptyPages .sortablePageDeleteButton {
    display: none !important;
}

.workelementThumbContainer {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 76px;
    height: 53px;
    margin-top: 10px;
}

    .workelementThumbContainer .workelementThumb {
        position: relative;
        cursor: pointer;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        background: white;
    }

        .workelementThumbContainer .workelementThumb:first-child {
            margin-left: 0 !important;
        }

.workelementThumb * {
    cursor: pointer;
}

/* menu */
#menu {
    position: absolute;
    z-index: 50;
    top: 100%;
    right: 97px;
    margin-top: -52px;
    margin-left: 20px;
}

#right.inactive + #menu {
    right: 5px;
}

#previewAccept {
    display: none;
}

.preview #previewAccept {
    font-size: 12px;
    position: absolute;
    top: -8px;
    left: -420px;
    display: block;
    width: 400px;
    color: rgb(80, 80, 80);
}

.preview #preview {
    position: fixed;
    left: 30px;
}

.en-GB .preview #previewAccept {
    left: -320px;
}

#accept + label {
    top: 15px;
    left: -52px;
}

.preview #preview {
    position: fixed;
    left: 30px;
}

.preview.photographer-logged-in #preview-share {
    display: block;
    position: fixed;
    left: 209px;
    bottom: 17px;
    margin-left: 10px;
}

@media (max-width: 1023px) {
    .nl-NL.preview #previewAccept {
        top: -20px;
        left: -200px;
        width: 190px;
    }

    .nl-NL #accept + label {
        top: 21px;
    }

    .preview #preview {
        left: 5px;
    }
    
    .preview.photographer-logged-in #preview-share {
        left: 182px;
    }

}



/* middle */
#middle {
    z-index: 1;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: rgb(255, 255, 255);
}

#workarea {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.workareaSpinner {
    font-size: 60px;
    position: absolute;
    z-index: 800;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin-top: -30px;
    margin-left: -30px;
    color: rgb(255, 255, 255);
    text-shadow: 0 0 10px rgba(55, 55, 55, 0.25);
}

/* worksheets */
#worksheets {
    position: relative;
    width: 999999px;
    height: 100%;
}

.worksheetDescription {
    font-size: 10px;
    position: absolute;
    width: 60px;
    text-align: center;
    color: rgb(100,100,100);
}

    .worksheetDescription.extension {
        width: 200px;
        margin-top: -8px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

.identicalCheck {
    cursor: pointer;
    color: rgb(160, 176, 22);
}

    .identicalCheck i {
        font-size: 14px;
        position: relative;
        bottom: -2px;
    }

.worksheet {
    display: inline-block;
    float: left;
    overflow: hidden;
    height: 100%;
    margin-right: 20px;
}

.photo,
.text {
    position: absolute !important;
    float: left;
}

.photo {
    pointer-events: none;
}

.text {
    resize: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 0;
    outline: 0;
    background: none;
    -khtml-user-select: none;
    -webkit-touch-callout: none;
}

    .text .frame {
        line-height: normal;
        position: absolute;
        white-space: nowrap;
        pointer-events: auto;
        outline: 0 dotted rgb(180, 180, 180);
        text-rendering: optimizeLegibility;
    }

        .text .frame[contenteditable=true] {
            -webkit-user-select: text;
            -moz-user-select: text;
            background-color: rgba(240, 240, 240, 0.6);
        }

.frame.ui-draggable-handle {
    cursor: move;
}

.text .frame:focus {
    outline: 1px dotted rgb(200, 200, 200);
}

.text[lineorder=0] .frame {
    outline: 1px dotted rgb(180, 180, 180);
}

.current.text[lineorder=0] .frame, .preview .text .frame {
    outline: 0px dotted rgb(180, 180, 180);
}

.editText,
.scaleText {
    display: none;
}

.current .editText,
.current .scaleText {
    position: absolute;
    z-index: 5;
    right: -20px;
    bottom: -23px;
    display: block;
    width: 32px;
    height: 32px;
    cursor: pointer;
}

.current .scaleText {
    cursor: se-resize;
}

.notIosNotAndroid .scaleText {
    visibility: hidden !important;
}

.current .editText {
    top: 0;
    left: 0;
}

.editText.active,
.editText.active + .scaleText {
    display: none;
}

.editText i,
.scaleText i {
    font-size: 18px;
    position: absolute;
    top: 3px;
    left: 4px;
    padding: 4px 6px 4px 4px;
    color: rgb(255, 255, 255);
    border-radius: 2px;
    background-color: rgb(162, 178, 23);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.20);
}

.photo.photoSpot {
    background: rgba(240, 240, 240, 0.6);
}

.photo.staticImage {
    pointer-events: none;
}

    .photo.staticImage .fa-image {
        display: none;
    }

.photo .frame,
.photo img {
    width: 100%;
    pointer-events: auto;
}

#currentOverflowClone {
    position: fixed !important;
    pointer-events: none;
}

    #currentOverflowClone .frame {
        opacity: 0.1;
    }

.photo.staticImage .frame,
.photo.staticImage img {
    pointer-events: none;
}

.worksheet .photo.cropped .frame,
#currentOverflowClone.photo.cropped .frame {
    height: 100%;
}

.joinedPagesGradient {
    position: absolute;
    top: 50%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 47%, rgba(40, 40, 40, 0.1) 49%, rgba(0, 0, 0, 0.12) 50%, rgba(40, 40, 40, 0.1) 51%, rgba(0,0,0,0) 53%, rgba(0,0,0,0) 100%);
}

.joinedPagesGradientCenter {
    width: 1px;
    height: 100%;
    margin: auto;
    background: rgba(0, 0, 0, 0.05);
}

.joinedPagesGradientCenterTop,
.joinedPagesGradientCenterBottom {
    width: 1px;
    height: 10px;
    margin: auto;
    margin-top: -10px;
    background: rgba(0, 0, 0, 0.15);
}

.joinedPagesGradientCenterBottom {
    margin-top: 0;
}

/* workelement */
.workelement,
.workelementThumb {
    position: relative;
    top: 50%;
    overflow: hidden;
    margin: 0 auto;
    outline: 1px solid lightgrey;
    background: rgb(255, 255, 255);
    -webkit-tap-highlight-color: transparent;
}

    .workelement.active,
    .workelementThumb.active {
        outline: 2px solid #A3BF15;
        box-shadow: 0 0 24px #A3BF15;
    }

    .workelement:first-child:not(:last-child),
    .workelement:nth-child(2),
    .workelementThumb:first-child:not(:last-child),
    .workelementThumb:nth-child(2) {
        display: inline-block;
    }

    .workelementThumb .foldingWarning,
    .workelementThumb .centerLine,
    .workelementThumb .spineCover {
        display: none;
    }

.worksheet.hasmorphedworkelements .workelement {
    display: block;
}

.grid {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: url(../images/grid.png) left top repeat;
}

.preview .grid {
    display: none;
}

.foldingWarning {
    font-size: 12px;
    position: absolute;
    z-index: 50;
    text-align: right;
    pointer-events: none;
    color: rgb(255, 90, 90);
    border: 1px dashed rgb(255, 90, 90);
    text-shadow: 0 0 2px rgba(30, 30, 30, 0.22);
}

    .foldingWarning.alternative {
        color: rgb(163, 209, 49);
        border: 1px dashed rgb(163, 209, 49);
    }

.centerLine {
    font-size: 12px;
    position: absolute;
    z-index: 50;
    pointer-events: none;
    color: rgb(100, 100, 100);
}

.preview .centerLine {
    display: none;
}

.centerLine.horizontal {
    top: 50%;
    width: 100%;
    border-top: 1px dashed rgb(100, 100, 100);
}

    .centerLine.horizontal div {
        width: 100%;
        text-align: center;
    }

.centerLine.vertical {
    left: 50%;
    height: 100%;
    border-left: 1px dashed rgb(100, 100, 100);
}

    .centerLine.vertical div {
        position: absolute;
        top: 50%;
        left: -38px;
        height: 14px;
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

.spineCover {
    position: absolute;
    z-index: 50;
    left: 50%;
    box-sizing: border-box;
    height: 100%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    pointer-events: none;
    border-right: 2px dotted rgb(180, 180, 180);
    border-left: 2px dotted rgb(180, 180, 180);
}

/* photo element */
.ui-resizable-handle {
    display: none !important;
    pointer-events: auto;
}

.photo.current .ui-resizable-handle {
    right: -15px !important;
    bottom: -15px !important;
    display: block !important;
    width: 32px;
    height: 32px;
    background: url(../images/handle.png) left top no-repeat !important;
}

.photo.current .frame {
    box-shadow: 0 0 5px rgb(53, 152, 234);
}

.frame .fa-image {
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -21px;
    cursor: default !important;
    color: rgb(180, 180, 180);
    text-shadow: 0 0 1px rgba(170, 170, 170, 0.34);
}

    .frame .fa-image.smaller {
        font-size: 12px;
        margin-top: -6px;
        margin-left: -7px;
    }

.photo img {
    -ms-interpolation-mode: nearest-neighbor;
    image-rendering: optimizequality;
}


/* highlighter */
#selectH {
    position: absolute;
    width: 100%;
    pointer-events: none;
    border: 1px dashed rgb(150, 150, 150);
    border-right: 0;
    border-left: 0;
}

#selectV {
    position: absolute;
    height: 100%;
    pointer-events: none;
    border: 1px dashed rgb(150, 150, 150);
    border-top: 0;
    border-bottom: 0;
}

/* ghosting left and right */
#ghostingLeft,
#ghostingRight {
    position: fixed;
    top: 0;
    display: none;
    width: 40px;
    height: 100%;
    pointer-events: none;
}

#ghostingLeft {
    left: 0;
    background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
}

#ghostingRight {
    right: 0;
    background: linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 255, 0));
}

/* cropWindow */
#cropWindow {
    position: absolute;
    z-index: 600;
    top: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

#cropWindowBackground {
    position: absolute;
    width: 100%;
    height: 100%;
}

#cropArea {
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    width: auto;
    height: auto;
    border: 10px solid rgb(255, 255, 255);
    box-shadow: 0 4px 20px rgb(90, 90, 90);
}

.jcrop-keymgr {
    visibility: hidden !important;
}

.jcrop-holder > .jcrop-tracker:nth-child(2) {
    background: rgba(0, 0, 0, 0.5);
}

#cropCancel {
    position: absolute;
    top: 10px;
    right: 10px;
}

#cropContinue {
    font-size: 40px;
    position: absolute;
    z-index: 600;
    color: rgb(183, 195, 75);
}

#cropReset {
    font-size: 40px;
    position: absolute;
    z-index: 600;
    color: rgb(247, 5, 5);
}

#cropExplanation {
    z-index: 300;
    font-size: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 4px 8px;
    text-align: center;
    color: rgb(100, 100, 100);
    border-radius: 6px;
    background: white;
}

/* PopupBubble */
.popupBubble {
    position: absolute;
    z-index: 600;
    top: -343px;
    left: 263px;
    width: 320px;
    height: 291px;
    margin: 0 20px 0 10px;
    margin-top: 16px;
    padding: 10px;
    background: rgb(255, 255, 255);
    box-shadow: 0 0 5px rgb(100, 100, 100);
}

.arrow {
    position: absolute;
    bottom: -5px;
    left: 20px;
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    background: inherit;
    box-shadow: 0 0 5px rgb(100, 100, 100);
}

.arrowHider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
}

/* next prev buttons */
#prevWorksheet,
#nextWorksheet {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    width: 38px;
    height: 38px;
    margin-top: -19px;
    cursor: pointer;
    color: rgb(130, 130, 130);
    -webkit-tap-highlight-color: transparent;
}

    #prevWorksheet i,
    #nextWorksheet i {
        font-size: 27px;
        margin-top: 7px;
        margin-left: 6px;
        pointer-events: none;
    }

    #nextWorksheet i {
        margin-left: 11px;
    }

/* workMenu */
#workMenu {
    font-size: 21px;
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: -55px;
    margin-left: -189px;
    color: rgb(120, 120, 120);
}

@media (max-width: 1050px) {
    #workMenu {
        margin-top: -108px;
    }
}

#workMenu > div:not(.popupBubble) {
    font-size: 20px;
    line-height: 16px;
    display: inline-block;
    float: left;
    width: 17px;
    height: 20px;
    margin: 2px;
    padding: 9px 11px 10px 13px;
    cursor: pointer;
    text-align: center;
    color: rgb(128, 128, 128);
    border-radius: 2px;
    background: rgb(255, 255, 255);
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.28);
    -webkit-tap-highlight-color: transparent;
}

#workMenu > div:active {
    color: rgb(162, 178, 23);
}

#workMenu .sp-replacer.sp-light {
    height: 20px;
    margin-left: -10px;
}

#workMenu .sp-replacer {
    margin-top: -5px !important;
    border: 0 !important;
    background: 0 !important;
}

#backgroundcolorMenu {
    top: -296px;
    left: 140px;
    width: 252px;
    height: 273px;
    padding: 0;
}

#backgroundcolorMenuContent {
    pointer-events: none;
}

#backgroundcolorMenu .sp-container {
    pointer-events: auto;
}

.holderGrid {
    position: relative;
    width: 29px;
    height: 24px;
    margin-top: -2px;
    margin-left: -6px;
}

.horizontalStripes,
.verticalStripes {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.gridLineHorizontal {
    display: block;
    width: 100%;
    height: 1px;
    margin-top: 4px;
    background: none repeat scroll 0 0 rgb(128, 128, 128);
}

.gridLineVertical {
    display: block;
    float: left;
    width: 1px;
    height: 100%;
    margin-left: 4px;
    background: none repeat scroll 0 0 rgb(128, 128, 128);
}

#grid.active .gridLineVertical,
#grid.active .gridLineHorizontal {
    background: none repeat scroll 0 0 rgb(141, 155, 24) !important;
}

#grid:active .gridLineVertical,
#grid:active .gridLineHorizontal {
    background: none repeat scroll 0 0 rgb(162, 178, 23) !important;
}

#backgroundcolorFancyThing {
    width: 24px;
    height: 18px;
    margin-left: -5px;
    border: 1px solid #808080;
}

    #backgroundcolorFancyThing div {
        float: left;
        width: 8px;
        height: 6px;
    }

#undoButton i {
    margin-top: 2px;
    margin-left: -2px;
    -webkit-transform: rotate(-40deg);
    transform: rotate(-40deg);
}

#redoButton {
    margin-right: 20px !important;
}

    #redoButton i {
        margin-top: 2px;
        margin-left: -2px;
        -webkit-transform: rotate(40deg);
        transform: rotate(40deg);
    }

#addText div {
    font-family: 'Times New Roman', arial;
    font-size: 26px;
    position: relative;
    top: 3px;
    left: -1px;
}

#zoomMenu {
    font-size: 12px;
    top: -57px;
    left: 230px;
    width: 162px;
    height: 14px;
}

#zoomMenuContent {
    position: relative;
}

#eraser {
    position: relative;
}

    #eraser i {
        font-size: 17px;
        position: absolute;
        top: 14px;
        left: 6px;
        color: rgb(160, 160, 160);
        background: white;
    }

#eraserTextIcon {
    position: absolute;
    left: 17px;
    width: 14px;
    height: 11px;
    padding: 1px;
    border: 1px solid rgb(160, 160, 160);
    border-radius: 2px;
}

.eraserTextIconLine {
    width: 100%;
    height: 1px;
    margin-top: 2px;
    background: rgb(160, 160, 160);
}

#eraserTextIconLine1,
#eraserTextIconLine2 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 95%;
    height: 2px;
    -webkit-transform: translateX(-50%) translatey(-50%) rotate(45deg);
    transform: translateX(-50%) translatey(-50%) rotate(45deg);
    background: grey;
}

#eraserTextIconLine2 {
    -webkit-transform: translateX(-50%) translatey(-50%) rotate(-45deg);
    transform: translateX(-50%) translatey(-50%) rotate(-45deg);
}

/* buttons */
.btnGreen {
    font: bold 11px/27px Karla, Arial,sans-serif;
    line-height: 27px;
    display: inline-block;
    overflow: hidden;
    padding: 4px 12px;
    padding-right: 16px;
    cursor: pointer;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    background: rgb(183, 195, 75);
    box-shadow: 0 4px rgb(134, 143, 53);
    -webkit-tap-highlight-color: transparent;
}

    .btnGreen:active {
        box-shadow: 0 2px rgb(134, 143, 53);
    }

.btnGrey {
    font: bold 11px/27px Karla, Arial,sans-serif;
    line-height: 27px;
    display: inline-block;
    overflow: hidden;
    padding: 4px 12px;
    padding-right: 16px;
    cursor: pointer;
    text-transform: uppercase;
    color: rgb(137, 137, 137);
    border-radius: 5px;
    background: rgb(227, 227, 227);
    box-shadow: 0 4px rgb(189, 183, 179);
    -webkit-tap-highlight-color: transparent;
}

    .btnGrey:active {
        box-shadow: 0 2px rgb(189, 183, 179);
    }

    .btnGreen i,
    .btnGrey i {
        font-size: 17px;
        position: relative;
        top: 2px;
        padding-right: 8px;
    }

/* viewer */
#viewer {
    position: absolute;
    z-index: 500;
    top: 0;
    left: 50%;
    display: none;
    width: auto;
    height: 50px;
    margin-top: 7px;
    margin-left: -208px;
    border-radius: 2px;
    background: rgb(255, 255, 255);
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.28);
}

.en-GB #viewer {
    height: 56px;
    margin-top: 4px;
}

#viewer > div {
    position: relative;
    height: 100%;
}

    #viewer > div > div:not(#borderMenu):not(#textColorMenu) {
        display: inline-block;
        float: left;
        width: 50px;
        height: 100%;
        cursor: pointer;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
    }

    #viewer > div > div:active {
        color: rgb(162, 178, 23);
    }

#toBack,
#toFront {
    width: 60px !important;
}

#viewer .divider {
    width: 1px !important;
    height: 30px !important;
    margin-top: 10px;
    background: rgb(240, 240, 240);
}

.viewerIcon {
    height: 35px;
}

div:active > .viewerIcon i,
div:active > .tIcon {
    color: rgb(162, 178, 23) !important;
}

.viewerIconText {
    font-size: 10px;
    color: rgb(100, 100, 100);
}

div:active > .viewerIconText {
    color: rgb(162, 178, 23);
}

#scaleValue {
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    width: 50px;
    margin-top: 13px;
    color: rgb(144, 144, 144 );
}

#rotate i {
    font-size: 20px;
    margin-top: 10px;
    color: rgb(144, 144, 144);
}

#border i {
    font-size: 20px;
    margin-top: 9px;
    color: rgb(177, 177, 177);
}

#border .viewerIcon div {
    position: absolute;
    width: 18px;
    height: 14px;
    margin-top: 10px;
    margin-left: 14px;
    border: 2px solid rgb(144, 144, 144);
    outline: 0 solid rgb(144, 144, 144);
}

#maxW i {
    font-size: 20px;
    margin-top: 10px;
    color: rgb(177, 177, 177);
}

#maxW .fa-image {
    font-size: 12px;
    margin-top: 18px;
    margin-left: -7px;
}

#maxW .fa-expand {
    position: absolute;
    margin-top: 6px;
    margin-left: -5px;
    color: rgb(144, 144, 144);
}

#maxWH i {
    font-size: 20px;
    margin-top: 10px;
    color: rgb(177, 177, 177);
}

#maxWH .fa-image {
    font-size: 12px;
    margin-top: 18px;
    margin-left: 5px;
}

#maxWH .fa-compress {
    font-size: 23px;
    position: absolute;
    margin-top: 5px;
    margin-left: -26px;
    color: rgb(144, 144, 144);
}

#crop i {
    font-size: 20px;
    margin-top: 10px;
    color: rgb(177, 177, 177);
}

#crop .fa-image {
    font-size: 20px;
}

#crop .fa-scissors {
    font-size: 15px;
    position: absolute;
    margin-top: 5px;
    margin-left: -26px;
    color: rgb(100, 100, 100);
    background: rgb(255, 255, 255);
}

#font {
    width: auto !important;
}

#fontSelect {
    display: inline-block;
    width: 150px;
    height: 19px;
    margin: 11px;
}

#fontFamilies {
    position: absolute;
    left: 6px;
    overflow-x: visible;
    overflow-y: visible;
    width: 150px;
    height: auto;
    max-height: 200px;
    background-color: rgb(255, 255, 255);
}

#fontSelect.selecting #fontFamilies {
    z-index: 1;
    left: -2.5px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 177px;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.5);
}

.notIosNotAndroid #fontSelect.selecting #fontFamilies {
    left: 6px;
}

.fontFamily {
    font-size: 17px;
    line-height: 20px;
    display: inline-block;
    width: 160px;
    height: 20px;
    color: rgb(144, 144, 144);
    border-bottom: 1px solid rgb(144, 144, 144);
    background: rgb(255, 255, 255);
}

#fontSizeValue,
#textLineHeightValue {
    font-size: 14px;
    font-weight: bold;
    position: absolute;
    width: 50px;
    margin-top: 13px;
    color: rgb(144, 144, 144 );
}

#textColorFancyThing {
    position: absolute;
    width: 24px;
    height: 18px;
    margin-top: 10px;
    margin-left: 12px;
    border: 1px solid #808080;
}

    #textColorFancyThing div {
        float: left;
        width: 8px;
        height: 6px;
    }

#textColorMenu {
    top: 43px;
    left: 93px;
    width: 232px;
    height: auto;
    color: rgb(100, 100, 100) !important;
}

#textColorMenuContent {
    margin-top: -11px;
}

#toBack i,
#toBack .tIcon {
    font-size: 16px;
    margin-top: 7px;
    margin-left: 14px;
    color: rgb(144, 144, 144);
}

#toBack .tIcon {
    font-family: 'Times New Roman', arial;
    font-size: 10px;
    position: absolute;
    margin-left: 17px;
    padding: 2px 7px;
    color: rgb(255, 255, 255);
    border-radius: 3px;
    background: rgb(144, 144, 144);
}

#toBack .viewerIcon div:not(.tIcon) {
    position: absolute;
    width: 16px;
    height: 11px;
    margin-top: -10px;
    margin-left: 20px;
    border: 1px solid rgb(185, 185, 185);
    border-radius: 2px;
    background: rgb(255, 255, 255);
}

#toBack .viewerIcon div:last-child {
    margin-top: -5px;
    margin-left: 13px;
}

#toFront i,
#toFront .tIcon {
    font-size: 16px;
    z-index: 1;
    margin-top: 16px;
    margin-left: -15px;
    color: rgb(144, 144, 144);
    background: rgb(255, 255, 255);
}

#toFront .tIcon {
    font-family: 'Times New Roman', arial;
    font-size: 10px;
    position: absolute;
    margin-left: -20px;
    padding: 2px 7px;
    color: rgb(255, 255, 255);
    border-radius: 3px;
    background: rgb(144, 144, 144);
}

#toFront .viewerIcon div:not(.tIcon) {
    position: absolute;
    z-index: -1;
    width: 16px;
    height: 11px;
    margin-top: 12px;
    margin-left: 20px;
    border: 1px solid rgb(185, 185, 185);
    border-radius: 2px;
    background: rgb(255, 255, 255);
}

#toFront .viewerIcon div:first-child {
    margin-top: 8px;
    margin-left: 27px;
}

#remove i {
    font-size: 22px;
    margin-top: 10px;
    margin-left: -3px;
    color: rgb(144, 144, 144);
}

#borderSize {
    position: absolute;
    display: none;
    width: 80px;
    height: 20px;
    margin-top: 6px;
    margin-left: 10px;
}

#scaleMenu,
#fontSizeMenu,
#textLineHeightMenu {
    top: 43px;
    left: -9px;
    width: 457px !important;
    height: 45px !important;
    cursor: default;
    color: rgb(100, 100, 100) !important;
}

#borderMenu {
    top: 43px;
    left: 93px;
    width: 317px;
    height: auto;
    color: rgb(100, 100, 100) !important;
}

.en-GB #borderMenu {
    top: 49px;
}

#scaleMenu,
#fontSizeMenu,
#textLineHeightMenu,
#borderMenu input {
    position: absolute;
}

    #scaleMenu .arrow,
    #fontSizeMenu .arrow,
    #textLineHeightMenu .arrow,
    #borderMenu .arrow,
    #textColorMenu .arrow {
        top: -5px;
    }

    #fontSizeMenu .arrow {
        left: 194px;
    }

    #textLineHeightMenu .arrow {
        left: 243px;
    }

#textColorMenu .arrow {
    left: 194px;
}

#borderMenu .sp-picker-container {
    height: 215px;
}

#borderMenu .sp-container,
#textColorMenu .sp-container {
    margin-top: 1px !important;
    margin-bottom: -3px;
    margin-left: -10px !important;
}

.borderSizeOption {
    position: relative;
    display: inline-block;
    float: left;
    width: 45px;
    height: 45px;
    cursor: pointer;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}

#borderSizeOptionIconText0,
#borderSizeOptionIconText1 {
    width: 60px;
    margin-left: -7px;
}

#borderMenu i {
    font-size: 20px;
    margin-top: 9px;
    color: rgb(177, 177, 177);
}

#borderMenu .viewerIcon div {
    position: absolute;
    width: 18px;
    height: 14px;
    margin-top: 10px;
    margin-left: 11px;
    border: 2px solid rgb(144, 144, 144);
    outline: 0 solid rgb(144, 144, 144);
}

#scaleMenuTextLeft,
#scaleMenuTextRight,
#fontSizeMenuTextLeft,
#fontSizeMenuTextRight,
#textLineHeightMenuTextLeft,
#textLineHeightMenuTextRight {
    font-size: 10px;
    position: absolute;
    top: 31px;
    left: 7px;
    display: inline-block;
    width: 30px;
    cursor: default;
    color: rgb(100, 100, 100);
}

#scaleMenuTextRight,
#fontSizeMenuTextRight,
#textLineHeightMenuTextRight {
    left: 374px;
}

    #scaleMenuTextLeft i,
    #scaleMenuTextRight i,
    #fontSizeMenuTextLeft i,
    #fontSizeMenuTextRight i,
    #textLineHeightMenuTextLeft i,
    #textLineHeightMenuTextRight i {
        cursor: default !important;
    }

#scaleInput,
#fontSizeInput,
#textLineHeightInput {
    position: absolute;
    top: 19px;
    width: 35px;
    margin-left: -6px;
    padding: 5px;
    text-align: center;
    outline: 0;
}

#scaleSliderContainer,
#fontSizeSliderContainer,
#textLineHeightSliderContainer,
#borderSliderContainer {
    display: inline-block;
    float: left;
    width: 145px;
    height: 20px;
    margin-top: 15px;
    padding: 0 10px;
}

#scaleSliderContainer,
#fontSizeSliderContainer,
#textLineHeightSliderContainer {
    width: 317px;
    margin-left: 27px;
}

#scaleSlider,
#fontSizeSlider,
#textLineHeightSlider,
#borderSlider {
    height: 4px;
    margin-top: 8px;
}

    #scaleSlider .ui-slider-handle,
    #fontSizeSlider .ui-slider-handle,
    #textLineHeightSlider .ui-slider-handle,
    #borderSlider .ui-slider-handle {
        margin-top: -4px;
        border-radius: 12px;
        outline: none 0 !important;
        background: rgb(255, 255, 255);
    }

#bordercolorFancyThingContainer {
    position: relative;
    display: inline-block;
    float: right;
    width: 45px;
    height: 45px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#bordercolorFancyThing {
    width: 24px;
    height: 18px;
    margin-top: 9px;
    margin-left: 9px;
    border: 1px solid #808080;
}

    #bordercolorFancyThing div {
        float: left;
        width: 8px;
        height: 6px;
    }

#bordercolorFancyThingText {
    font-size: 10px;
    margin-top: 6px;
    text-align: center;
    color: rgb(100, 100, 100);
}

.sp-container {
    display: none;
    margin-top: 10px;
    border-color: rgb(255, 255, 255) !important;
}

.sp-picker-container {
    width: 230px !important; /* determines size of color picker */
    border-left: 0 !important;
    background: rgb(255, 255, 255);
}

.sp-dragger {
    width: 10px !important;
    height: 10px !important;
    margin-top: 3px;
    margin-left: 3px;
    border: 2px solid #FFFFFF !important;
    border-radius: 7px !important;
    background: 0 !important;
    box-shadow: 0 0 5px rgba(55, 55, 55, 0.2) !important;
}

/* text viewer */
#textViewer {
    font-size: 17px;
    padding: 16px;
    color: rgb(80, 80, 80);
}

@media (max-width: 940px) {
    #textViewer {
        font-size: 14px;
        width: 380px;
        padding: 10px;
    }
}

#startTyping {
    font-family: ralewaysemibold;
    font-size: 40px;
    line-height: normal;
    position: fixed;
    top: 100%;
    left: 100%;
    color: rgb(0, 0, 0);
    outline: 1px dotted rgb(200, 200, 200);
    background-color: rgba(240, 240, 240, 0.6);
}

/* preview */
.preview .photoSpot,
.preview #workelementMenu {
    visibility: hidden;
}

#previewWarning {
    display: none;
    cursor: default;
}

    #previewWarning i:active {
        color: rgb(50, 50, 50);
    }

.preview #previewWarning {
    font-size: 10px;
    position: absolute;
    left: 10px;
    display: block;
    width: 500px;
    text-align: left;
    color: rgb(100, 100, 100);
}

#previewWarning h2 {
    font-size: 19px;
    font-weight: normal;
    position: fixed;
    top: 13px;
    height: 40px;
    color: rgb(100, 100, 100);
}

#previewWarningText {
    font-weight: normal;
    position: fixed;
    top: 20px;
    left: 255px;
    width: 700px;
    height: 40px;
    color: rgb(100, 100, 100);
}

@media (max-width: 940px) {
    #previewWarningText {
        top: 15px;
        width: 400px;
    }
}

.preview #save {
    background: rgb(210, 215, 163) !important;
}

    .preview #save.available {
        background: rgb(183, 195, 75) !important;
    }

.preview .workelement.active {
    box-shadow: 0 0 0 rgb(120, 120, 120);
    outline: 1px solid lightgrey;
}

.preview #left,
.preview #right,
.preview #workMenu {
    display: none;
}

/* default dialog */
#dialogBackground {
    display: none;
}

.dialogActive #dialogBackground {
    position: absolute;
    z-index: 600;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

#dialogs {
    display: none;
}

.dialogActive #dialogs {
    position: absolute;
    z-index: 600;
    top: 50%;
    left: 50%;
    display: block;
    width: 470px;
    min-height: 270px;
    padding: 25px;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    color: rgb(50, 50, 50);
    background: rgb(255, 255, 255);
    box-shadow: 0 4px 20px rgb(90, 90, 90);
}

#dialogs h2 {
    font-size: 20px;
    font-weight: normal;
    height: 40px;
    color: rgb(100, 100, 100);
}

    #dialogs h2:first-letter {
        text-transform: capitalize;
    }

#dialogs h3 {
    font-size: 14px;
    font-weight: bold;
    height: 22px;
    color: rgb(100, 100, 100);
}

    #dialogs h3:first-letter {
        text-transform: capitalize;
    }

#dialogs .contentContainer {
    font-size: 14px;
    height: 185px;
    margin-bottom: 5px;
    color: rgb(100, 100, 100);
    line-height: 130%;
}

/* eraserCheck */
#continueEraserCheck {
    float: right;
    margin-top: 14px;
    margin-right: 5px;
}

#cancelEraserCheck {
    position: absolute;
    top: -10px;
    right: 10px;
    margin-top: 21px;
    color: rgb(100, 100, 100);
}

/* autosaveEmptySpaceCheck */
#continueAutosaveEmptySpaceCheck {
    float: right;
    margin-top: 37px;
    margin-right: 5px;
}

#cancelAutosaveEmptySpaceCheck {
    position: absolute;
    top: -10px;
    right: 10px;
    margin-top: 21px;
    color: rgb(100, 100, 100);
}

#autosaveEmptySpaceCheckAcceptContainer {
    margin-top: 20px !important;
    background: #FFE4E9;
    padding: 5px;
}

#autosaveEmptySpaceCheckAcceptLabel,
#autosaveEmptySpaceCheckAcceptText {
    display: inline-block;
}

#autosaveEmptySpaceCheckAcceptText {
    position: absolute;
    height: 70px;
    margin-top: 5px;
    margin-left: 5px;
}

/* extensionsCheck */
#continueExtensionCheck {
    float: right;
    margin-top: 14px;
    margin-right: 5px;
}

#cancelExtensionCheck {
    position: absolute;
    top: -10px;
    right: 10px;
    margin-top: 21px;
    color: rgb(100, 100, 100);
}

/* pageDeleteCheck */
#continuePageDeleteCheck {
    float: right;
    margin-top: 14px;
    margin-right: 5px;
}

#cancelPageDeleteCheck {
    position: absolute;
    top: -10px;
    right: 10px;
    margin-top: 21px;
    color: rgb(100, 100, 100);
}

/* coverSpineChanged */
#continueCoverSpineChanged {
    float: right;
    margin-top: 14px;
    margin-right: 5px;
}

#cancelCoverSpineChanged {
    position: absolute;
    top: -10px;
    right: 10px;
    margin-top: 21px;
    color: rgb(100, 100, 100);
}

/* identicalWorkelementsCheck */
#firstWorkelementIdenticalContainer,
#secondWorkelementIdenticalContainer,
#firstWorkelementUniqueContainer,
#secondWorkelementUniqueContainer {
    display: none;
}

#firstWorkelementIdenticalContainerInner,
#secondWorkelementIdenticalContainerInner,
#firstWorkelementUniqueContainerInner,
#secondWorkelementUniqueContainerInner {
    font-size: 10px;
    position: relative;
    top: 8px;
    width: 40px;
    margin-top: 50px;
    margin-right: 20px;
    margin-left: 17px;
    text-align: center;
    -ms-flex-negative: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

#firstWorkelementIdenticalContainer,
#secondWorkelementIdenticalContainer,
#firstWorkelementUniqueContainer,
#secondWorkelementUniqueContainer {
    font-size: 10px;
    width: 260px;
}

    #firstWorkelementUniqueContainer.disabled,
    #secondWorkelementUniqueContainer.disabled {
        pointer-events: none;
        opacity: 0;
    }

#firstWorkelementIdenticalInfo,
#secondWorkelementIdenticalInfo,
#firstWorkelementUniqueInfo,
#secondWorkelementUniqueInfo,
#firstWorkelementUniqueWarning,
#secondWorkelementUniqueWarning {
    position: relative;
    width: 200px;
    -webkit-align-self: center;
    align-self: center;
    -ms-flex-item-align: center;
    -ms-flex-negative: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

#firstWorkelementUniqueWarning,
#secondWorkelementUniqueWarning {
    color: rgb(247, 5, 5);
}

#firstWorkelementIdenticalContainer label,
#secondWorkelementIdenticalContainer label,
#firstWorkelementUniqueContainer label,
#secondWorkelementUniqueContainer label {
    position: absolute;
    left: 50%;
    margin-top: -35px;
    margin-left: -20px;
}

#firstWorkelementIdenticalContainerPreview,
#secondWorkelementIdenticalContainerPreview {
    width: 76px;
    height: 53px;
    margin: auto;
    padding: 0 60px;
    -ms-flex-negative: 0;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

    #firstWorkelementIdenticalContainerPreview .workelementThumbContainer,
    #secondWorkelementIdenticalContainerPreview .workelementThumbContainer {
        overflow: visible;
        margin-top: 0;
        pointer-events: none;
    }

    #firstWorkelementIdenticalContainerPreview .workelementThumb,
    #secondWorkelementIdenticalContainerPreview .workelementThumb {
        top: 50% !important;
        left: 50% !important;
        margin-left: 0 !important;
    }

        #firstWorkelementIdenticalContainerPreview .workelementThumb:last-child,
        #secondWorkelementIdenticalContainerPreview .workelementThumb:first-child {
            opacity: 0;
        }

.step1 #firstWorkelementIdenticalContainer,
.step1 #secondWorkelementIdenticalContainer,
.step2 #firstWorkelementUniqueContainer,
.step2 #secondWorkelementUniqueContainer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 75px;
}

.step1 #firstWorkelementIdenticalContainer,
.step2 #firstWorkelementUniqueContainer {
    margin-top: 7px;
    margin-bottom: 25px;
}

#continueIdenticalWorkelementsCheck {
    float: right;
    margin-top: 14px;
    margin-right: 5px;
}

#backIdenticalWorkelementsCheck {
    display: none;
}

.step2 #backIdenticalWorkelementsCheck {
    display: block;
    float: left;
    margin-top: 14px;
    margin-right: 5px;
}

#cancelIdenticalWorkelementsCheck {
    position: absolute;
    top: -10px;
    right: 10px;
    margin-top: 21px;
    color: rgb(100, 100, 100);
}

/* emptyCheck */
#emptyCheck {
    display: none;
}

    #emptyCheck .infoText {
        height: 70px;
    }

        #emptyCheck .infoText:nth-child(2) {
            height: 20px;
        }

#emptyCheckAcceptLabel, #emptyCheckAcceptText {
    display: inline-block;
}

#emptyCheckAcceptText {
    position: absolute;
    margin-top: 5px;
    margin-left: 5px;
}

    #emptyCheckAcceptText.red {
        color: rgb(247, 5, 5);
    }

#emptyPages {
    overflow-y: scroll;
    height: 118px;
    margin-top: 5px;
}

    #emptyPages .workelementThumb {
        border: 1px solid rgb(40, 40, 40);
    }

    #emptyPages div:not(.active) > div[templateid] {
        color: rgb(100, 100, 100);
        text-shadow: 0 0 0 rgb(0, 0, 0) !important;
    }

.thumbClone {
    display: inline-block;
    float: left;
    width: 45px;
    height: 75px;
    margin-right: 35px;
    margin-left: 10px;
    cursor: pointer;
}

.preview #emptyPages .photoSpot {
    visibility: visible;
}

#continueEmptyCheck {
    float: right;
    margin-top: 35px;
    margin-left: 5px;
}

    #continueEmptyCheck.disabled {
        pointer-events: none;
        opacity: 0.5;
    }

    #continueEmptyCheck.waitForAccept {
        pointer-events: auto;
    }

#cancelEmptyCheck {
    position: absolute;
    top: -10px;
    right: 10px;
    margin-top: 21px;
    color: rgb(100, 100, 100);
}

/* addonProducts */
#addonProducts {
    display: none;
}

    #addonProducts .infoText {
        font-family: karla;
        line-height: 1.3em;
        margin-bottom: 15px;
    }

#addonProductListDescriptionShortner {
    display: inline-block;
    margin-left: 5px;
    cursor: pointer;
    color: rgb(162, 178, 23);
}

    #addonProductListDescriptionShortner.disabled {
        display: none !important;
    }

#addonProductListDescriptionShortnerAlternative {
    margin-top: 5px;
    cursor: pointer;
    text-align: center;
    color: rgb(162, 178, 23);
}

#addonProductListDescriptionFull {
    position: absolute;
    z-index: 800;
    display: none;
}

#addonProductListDescriptionFullText {
    background: rgb(255, 255, 255);
}

#addonProductListDescriptionFullFancyGradient {
    height: 80px;
    background: linear-gradient(to bottom, rgb(255, 255, 255) 30%, rgba(255, 255, 255, 0) 100%);
}

#addonProducts .contentContainer {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

.addonProductList {
    position: relative;
    overflow: hidden;
    height: 188px;
    margin-top: 20px;
}

    .addonProductList:first-child {
        margin-top: 0;
    }

.addonProductListGoLeft,
.addonProductListGoRight {
    position: absolute;
    z-index: 600;
    top: 85px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    color: rgb(130, 130, 130);
    -webkit-tap-highlight-color: transparent;
}

.addonProductListGoRight {
    right: 1px;
}

    .addonProductListGoLeft i,
    .addonProductListGoRight i {
        font-size: 43px;
        float: left;
        pointer-events: none;
    }

        .addonProductListGoLeft i:first-child,
        .addonProductListGoRight i:first-child {
            margin-left: 1px;
            opacity: 0;
        }

    .addonProductListGoLeft:active i:first-child,
    .addonProductListGoRight:active i:first-child {
        opacity: 1;
    }

    .addonProductListGoLeft i:last-child,
    .addonProductListGoRight i:last-child {
        font-size: 27px;
        margin-top: -34px;
        margin-left: 7px;
    }

    .addonProductListGoRight i:last-child {
        margin-left: 12px;
    }

    .addonProductListGoLeft:active i:last-child,
    .addonProductListGoRight:active i:last-child {
        color: rgb(255, 255, 255);
    }

.addonProductListGhostingLeft {
    position: absolute;
    left: 38px;
    width: 38px;
    height: 170px;
    pointer-events: none;
    background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 258, 0));
}

.addonProductListGhostingRight {
    position: absolute;
    right: 38px;
    width: 38px;
    height: 170px;
    pointer-events: none;
    background: linear-gradient(to left, rgb(255, 255, 255), rgba(255, 255, 258, 0));
}

.addonProductListGhostingRightFix {
    position: absolute;
    right: 0;
    width: 38px;
    height: 100%;
    background: rgb(255, 255, 255);
}

.addonProductListSliderContainer {
    position: absolute;
    left: 38px;
    overflow: hidden;
    overflow-x: scroll;
    width: 573px;
    height: 210px;
}

.addonProductListSlider {
    display: -webkit-inline-flex;
    display: inline-flex;
}

.addonProduct {
    position: relative;
    display: inline-block;
    width: 216px;
    min-width: 216px;
    height: 170px;
    margin-left: 15px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.addonProductImg {
    position: relative;
    width: 200px;
    height: 120px;
    margin: auto;
    /*margin-top: 9px;*/
    text-align: center;
}

    .addonProductImg img {
        max-width: 100%;
        max-height: 100%;
    }

.addonProductImgOverlay {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 216px;
    height: 120px;
    background: rgba(255, 255, 255, 0.75);
}

.addonProduct:hover .addonProductImgOverlay,
.addonProduct.selected .addonProductImgOverlay {
    display: block;
}

.addonProduct i {
    font-size: 63px;
    position: absolute;
    z-index: 10;
    top: 45%;
    left: 50%;
    display: none;
    margin-top: -42px;
    margin-left: -25px;
}

.addonProduct:hover i {
    display: block;
    text-shadow: 0 0 3px rgba(145,145,145,0.9) !important;
    color: rgb(255, 255, 255);
}

.addonProduct.selected i {
    display: block;
    color: rgb(207, 225, 51);
    text-shadow: 0px 0px 5px #48484894 !important;
}

.withImg .addonProductDescription {
    font-size: 11px;
    position: absolute;
    top: 121px;
    left: 50px;
    width: 190px;
    padding-top: 2px;
    word-break: break-word;
    color: rgb(100, 100, 100);
    line-height: 95%;
}

.noImg .addonProductDescription {
    font-size: 11px;
    position: absolute;
    top: 40%;
    display: inline-block;
    float: left;
    margin-left: 10px;
    padding: 5px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    word-break: break-word;
    line-height: 95%;
}

.addonProductPrice {
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    z-index: 99999;
    top: 123px;
    bottom: 59px;
    left: 5px;
}

#continueAddonProducts {
    float: right;
    margin-top: 11px;
    margin-left: 5px;
    pointer-events: none;
    background: rgb(210, 215, 163) !important;
}

    #continueAddonProducts.available {
        pointer-events: auto;
        background: rgb(183, 195, 75) !important;
    }

#cancelAddonProducts, #cancelAssistance {
    position: absolute;
    top: -10px;
    right: 10px;
    margin-top: 21px;
    color: rgb(100, 100, 100);
}

/* image previewer */
#imagePreviewer {
    position: absolute;
    z-index: 600;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
}

#imagePreviewContainer {
    position: relative;
    height: 100%;
}

    #imagePreviewContainer img {
        position: absolute;
        top: 50%;
        left: 50%;
        max-width: 90%;
        max-height: 90%;
        border: 10px solid rgb(255, 255, 255);
        box-shadow: 0 4px 20px rgb(90, 90, 90);
    }

#imagePreviewedName {
    font-size: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 4px 8px;
    text-align: center;
    color: rgb(100, 100, 100);
    border-radius: 6px;
    background: white;
}

/* localised texts */
#localisedTexts {
    display: none;
}

.spineCover span {
    color: rgb(130, 130, 130);
    margin-top: 5%;
    font-size: 12px;
    text-shadow: 0 0 8px rgba(230, 230, 230, 0.7);
    display: block;
}

.spineCover {
    text-align: center;
    padding-top: 0.5%;
}

#txtProjectName {
    margin-top: 20px;
    padding: 5px;
    font-family: karla, arial, sans-serif;
    width: 200px;
    margin-left: 10px;
}

#continueProjectName {
    float: right;
}

.fa-exclamation-triangle {
    color: red;
    font-size: 20px !important;
}

.button.disabled * {
    color: lightgrey !important;
    cursor: default;
}

.text.locked .scaleText {
    display: none !important;
}

#previewmode_order_button {
    display: none;
}

#previewmode_order_button #preview-price {
    font-size: 14px;
}

#previewmode_order_button * {
    vertical-align: middle;
}

#previewmode_order_button #preview-dash {
    margin-left: 5px;
    margin-right: 5px;
}

#previewModeHeader {
    display: none;
}

.preview-mode #previewmode_order_button {
    position: absolute;
    top: 13px;
    right: 10px;
    display: block;
}

.preview-mode #menu {
    display: none;
}

.preview-mode #previewWarning h2 {
    display: none;
}

.preview-mode #previewModeHeader {
    display: block !important;
}

#preview-share {
    display: none;
}


#btnCreatePreview, #btnOpenPreview {
    float: right;
    margin-top: 11px;
    margin-left: 5px;
}

#left, #right, #menu {
    visibility: hidden;
}

#previewShareDialogPublicLabel {
    position: absolute;
    margin-top: 5px;
    margin-left: 5px;
}

.promotext {
    position: absolute;
    color: white;
    right: -18px;
    top: 0px;
    background: -webkit-linear-gradient(#f00 0,#c80000 100%);
    width: 58px;
    height: 20px;
    transform: rotate(45deg);
    text-align: center;
    padding-left: 10px;
    line-height: 20px;
    padding-right: 0px;
}

.preview-embed-container #previewShareDialogEmbedTitle {
    font-weight: bold;
    display: block;
    clear: both;
    padding-top: 20px;
}

.preview-embed-container textarea {
    width: 100%;
    height: 70px;
    margin-top: 10px;
}

#previewShareDialog {
    height: 350px;
}

    #previewShareDialog .buttonContainer {
        bottom: 20px;
        position: absolute;
        right: 20px;
    }