/**
 * Content-area styling for CKEditor's editing area (backlog #65, phase 3).
 *
 */

.ck-content {
    font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #4D4D4D;
}

.ck-content h1 {}
.ck-content h2 {}
.ck-content h3,
.ck-content h4,
.ck-content h5,
.ck-content h6 {
    font-weight: bold;
}
.ck-content h3 {    font-size: 1.6em;   line-height: 130%;  margin: 10px 0;     }
.ck-content h4 {    font-size: 1.4em;   line-height: 120%;  margin: 10px 0;     }
.ck-content h5 {    font-size: 1.2em;   line-height: 110%;  margin: 10px 0;     }
.ck-content h6 {    font-size: 1.1em;   line-height: 100%;  margin: 10px 0;     }

.ck-content p,
.ck-content span,
.ck-content a {  line-height:130%;	}

.ck-content a {         text-decoration: none;      color: #40A0C0;    }
.ck-content a:hover {   text-decoration: underline; color: #298CAD;    }
.ck-content a:active {  outline: none; }
.ck-content a:focus {   outline: none; }
.ck-content a img {     border: none; }

/* Link decorator buttons (init.js) - a simplified preview of the site's
   .btn-primary / .btn-secondary, so it's clear in the editor which links
   are buttons. */
.ck-content a.btn-primary,
.ck-content a.btn-secondary {
    display: inline-block;
    padding: 6px 16px;
    border: 2px solid #ff1493;
    border-radius: 20px;
    font-weight: bold;
    line-height: 1.2;
    text-decoration: none;
}
.ck-content a.btn-primary {     background-color: #ff1493;  color: #fff;       }
.ck-content a.btn-secondary {   background-color: transparent; color: #ff1493; }
.ck-content a.btn-primary:hover,
.ck-content a.btn-secondary:hover { text-decoration: none; }

.ck-content .image img,
.ck-content img {
    max-width: 50%;
    max-height: 500px;
    height: auto;
    margin: 0 0 0 0;
}

.ck-content .image-inline img {
    max-width: 50% !important;
}

.ck-content img.left,
.ck-content figure.image.left,
.ck-content .image-inline.left {
    float: left;
    max-width: 50%;
    margin: 0 15px 15px 0;
}
.ck-content figure.image.left img,
.ck-content .image-inline.left img {
    width: 100%;
    max-width: 100% !important;
}
.ck-content img.right,
.ck-content figure.image.right,
.ck-content .image-inline.right {
    float: right;
    max-width: 50%;
    margin: 0 0 15px 15px;
}
.ck-content figure.image.right img,
.ck-content .image-inline.right img {
    width: 100%;
    max-width: 100% !important;
}
.ck-content img.fullWidth,
.ck-content figure.image.fullWidth,
.ck-content .image-inline.fullWidth {
    width: 100%;
    max-width: 100%;
    margin: 15px 0;
}
.ck-content .image.fullWidth img,
.ck-content figure.image.fullWidth img,
.ck-content .image-inline.fullWidth img {
    width: 100%;
    max-width: 100% !important;
}

.ck-content .image.image_resized img,
.ck-content img.image_resized {
    max-height: none;
    max-width: none;
}

.ck-content .image-inline.image_resized img {
    width: 100%;
    max-height: none;
    max-width: none !important;
}

.ck-content::after {
    content: '';
    display: block;
    clear: both;
}

.ck-content table {
    width:100%;
}
.ck-content th,
.ck-content td {
    padding: 2px;
}
.ck-content th,
.ck-content thead td {
    background-color: #EFEFEF;
    font-weight: bold;
    text-align: left;
}
.ck-content td {
    vertical-align: top;
}
.ck-content td li {
    list-style-type: none;
}

/* Outside markers: CKEditor wraps list-item text in a block element, which
   pushes an inside marker onto its own line above the text. */
.ck-content ul {
    padding-left: 1.5rem;
    list-style-position: outside;
}

.ck-content hr,
.ck-content p,
.ck-content ol,
.ck-content ul,
.ck-content table {
    clear:both;
}

/* Bootstrap row/columns preview (BootstrapColumns plugin). Version-independent
   on purpose - the admin doesn't load any site's Bootstrap, and only row +
   col-md-N is ever generated. Dashed outlines make the columns visible. */
.ck-content .row {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    clear: both;
}
/* .ck-editor__editable, not a bare div: CKEditor injects its own helper divs
   (type-around, selection handle) as direct children of the widget. */
.ck-content .row > .ck-editor__editable {
    box-sizing: border-box;
    flex: 1 1 0;
    min-width: 0;
    min-height: 2em;
    padding: 6px 10px;
    outline: 1px dashed #BBB;
    outline-offset: -3px;
}
.ck-content .row > .col-md-1  { flex: 0 0 8.3333%;  max-width: 8.3333%; }
.ck-content .row > .col-md-2  { flex: 0 0 16.6667%; max-width: 16.6667%; }
.ck-content .row > .col-md-3  { flex: 0 0 25%;      max-width: 25%; }
.ck-content .row > .col-md-4  { flex: 0 0 33.3333%; max-width: 33.3333%; }
.ck-content .row > .col-md-5  { flex: 0 0 41.6667%; max-width: 41.6667%; }
.ck-content .row > .col-md-6  { flex: 0 0 50%;      max-width: 50%; }
.ck-content .row > .col-md-7  { flex: 0 0 58.3333%; max-width: 58.3333%; }
.ck-content .row > .col-md-8  { flex: 0 0 66.6667%; max-width: 66.6667%; }
.ck-content .row > .col-md-9  { flex: 0 0 75%;      max-width: 75%; }
.ck-content .row > .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.ck-content .row > .col-md-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.ck-content .row > .col-md-12 { flex: 0 0 100%;     max-width: 100%; }

.ck-content blockquote {
    border-left: 5px solid #40A0C0;
    font-size: 14px;
    font-style: italic;
    margin-bottom: 10px;
}

.ck-content blockquote p {
    font-size: 14px;
}

.ck-content blockquote p:first-child {
    margin-top:0;
}