/*!

    This XWord Info CSS file (c) 2014-2024 by Jim Horne.
    All rights reserved.

*/

/*
    NOTEPAD.CSS
    
    Notepad styles are defined here instead of being rolled into xwi.css so that
    ckeditor can point here without picking up unwanted styles.
*/

.notepad, .notes, .notetext {
    overflow: hidden;
}

.notepad {
    border-top: 1px solid #a0a0a0;
    border-right: 1px solid #505050;
    border-bottom: 1px solid #505050;
    border-left: 1px solid #a0a0a0;
    background-color: #fffff0;
    font-size: 12pt;
    color: #000;
    padding: 5px 6px;
    border-radius: 7px;
    box-shadow: var(--xBoxShadow);
    line-height: 1.5;
}

    .notepad br {
        clear: initial; /* override clear:both default */
    }

    .notepad li {
        margin-bottom: 4px;
    }

    .notepad blockquote {
        font-family: 'Trebuchet MS', 'Times New Roman', Times, serif;
        font-size: 12px;
    }

    .notepad ul, .notepad ol {
        padding-left: 10px;
        margin-left: 10px;
    }

    .notes img {
        height: auto;
        max-width: 90%;
        margin-top: 6px;
        margin-bottom: 3px;
    }

    .notes img.left, .notes img.right {
        max-width: 55%;
        border: 1px solid lightgray;
    }

    .notes img.left {
        float: left;
        margin-right: 20px;
    }

    .notes img.right {
        float: right;
        margin-left: 20px;
    }

    .notes img.center {
        display: block;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 15px; /* should be same as p */
        max-width: 85%;
        border: 1px solid lightgray;
    }

    .notes img.flip {
        transform: scaleX(-1);
    }

        .notes img.shadow, .bonus img.shadow {
            box-shadow: var(--xBoxShadow);
        }

    .notes img.rounded, .bonus img.rounded {
        border-radius: 9px;
    }

    .notes .photoeffect {
        background-color: whitesmoke;
        padding: 10px;
        border: 1px solid darkgray;
    }

/* Colored backgrounds for different notes types */

.jimhnote {
    background-color: #faf2eb;
}

    .jimhnote a {
        color: #cc0000;
    }

.jeffnote {
    background-color: #fff8fa;
}

    .jeffnote a {
        color: #c00;
    }

.guestnote {
    background-color: #fafafa;
}

.connote {
    background-color: #f0f8ff;
}

    .connote a {
        color: #c00;
    }

.ednote {
    background-color: #fff9ee;
}

    .ednote a {
        color: #c00;
    }

.psnote {
    background-color: #fff8dc;
}

.cknote {
    font-family: 'Segoe UI', Helvetica, Sans-Serif;
    font-size: 10.5pt;
}

/* use div.blurb to override less specific styles */

div.blurb {
    background-color: #ffffc0;
    padding: 12px 12px 8px 12px;
    font-size: 13px;
    border: 1px solid var(--xRed);
}

div.blurb img {
    margin-top: 2px;
}

div.blurb a {
    font-weight: bold;
}

div.blurb p {
    margin-bottom: 2px;
}

.bedit {
    font-family: 'Segoe UI', Helvetica, Sans-Serif;
    font-size: 14px;
}

.bedit a {
    text-decoration: none;
    font-weight: bold;
}

.bedit a:hover {
    text-decoration: underline;
}

.bedit img {
    margin-top: 2px;
}

/* special styles for ckeditor to display fonts more or less correctly */

.richnote {
    font-family: 'Segoe UI', Helvetica, Sans-Serif;
    font-size: 14px;
    overflow: initial;
}

.cke_editable .YouTube-container {
    border: 3px solid red;
    padding: 2px !important;
    background-color: maroon;
    width: 80%;
    margin: 0 auto;
}

.cke_editable .pullquote {
    background-color: #f9d2f9; /* Identify pull quotes in ckeditor */
}

.cke_editable .nowrap {
    background-color: #ffffc0; /* Identify no-wrap spans in ckeditor */
}

@media (max-width: 650px) {
    .notes img.center {
        max-width: 98%;
    }
}