/* ------------------------
This file contains all CSS styels 
for the Sharepoint Rich Text Editor
al prefixed with 'admiralty'
--------------------------*/

/* Table styles */
.admiraltyTable-responsive {
    -ms-name: "Responsive Table";
    margin-top: 26px;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

    .admiraltyTable-responsive > tbody > tr:nth-child(odd) {
        background: #eef3f4;
        border-bottom: 1px solid #d1d3d3;
    }

    .admiraltyTable-responsive > tbody > tr:nth-child(even) {
        background: $white;
        border-bottom: 1px solid #d1d3d3;
    }

    .admiraltyTable-responsive th {
        color: #03284f;
        text-align: left;
        padding: 5px 10px 5px 5px;
        min-width: 120px;
    }

    .admiraltyTable-responsive td {
        padding: 5px 10px 5px 5px;
        min-width: 120px;
    }

.accordion .accordionTitle:first-child + .accordionContent .admiraltyTable-responsive th:first-child,
.accordion .accordionTitle:first-child + .accordionContent .admiraltyTable-responsive td:first-child {
    width: 120px;
}

.admiraltyTable-pullout {
    -ms-name: "Pullout Table";
    margin-top: 26px;
    width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

    .admiraltyTable-pullout td {
        padding: 3%;
        min-width: 120px;
        background: #eee;
    }

    .admiraltyTable-pullout td,
    .admiraltyTable-pullout th {
        border: 6px solid white;
    }

    .admiraltyTable-pullout tr:first-child th {
        border-top: 0;
    }

    .admiraltyTable-pullout tr td:first-child,
    .admiraltyTable-pullout tr th:first-child {
        border-left: 0;
    }

    .admiraltyTable-pullout tr td:last-child,
    .admiraltyTable-pullout tr th:last-child {
        border-right: 0;
    }


/* Element Styles */
p.admiraltyElement-P {
    -ms-name: "Paragraph";
    word-break: break-word;
}

h1.admiraltyElement-H1 {
    -ms-name: "Heading 1";
}

h2.admiraltyElement-H2 {
    -ms-name: "Heading 2";
}

h3.admiraltyElement-H3 {
    -ms-name: "Heading 3";
}

h4.admiraltyElement-H4 {
    -ms-name: "Heading 4";
}

blockquote.admiraltyElement-blockquote {
    -ms-name: "Blockquote";
}

blockquote.admiraltyElement-blockquoteSmall {
    -ms-name: "Blockquote small";
    font-size: 1.5em;
    color: $blue;
    padding-left: 60px;
    vertical-align: top;
    display: inline-block;
    width: 61%;
    background: url("/_Layouts/15/AdmiraltyFrontend/images/icons/quote.png") no-repeat 0 0;
    font-family: $bodyFont;
}

h4.admiraltyElement-tileHeaderDark {
    -ms-name: "Dark tile header";
    font-size: 3em;
    color: #333;
}

h4.admiraltyElement-tileHeaderLight {
    -ms-name: "Light tile header";
    font-size: 3em;
    color: $white;
}

p.admiraltyElement-tileParaDark {
    -ms-name: "Dark tile paragraph";
    font-size: 1em;
    color: #333;
}

p.admiraltyElement-tileParaLight {
    -ms-name: "Light tile paragraph";
    font-size: 1em;
    color: $white;
}

div.admiraltyElement-videoOverlay {
    -ms-name: "Video button";
    text-align: center;
}

.admiraltyElement-videoOverlay {
    position: relative;
}

    .admiraltyElement-videoOverlay a {
        display: block;
        left: 0;
    }

        .admiraltyElement-videoOverlay a::before {
            position: absolute;
            content: '';
            background: url("/_Layouts/15/AdmiraltyFrontend/images/icons/play-icon.png") no-repeat center center;
            width: 100%;
            height: 100%;
            pointer-events: none;
            display: block;
        }


/* Text Styles */
.admiraltyStyle-pdf {
    -ms-name: "PDF icon";
    display: inline-block;
    background: url(/_Layouts/15/AdmiraltyFrontend/images/icons/pdf_icon.png) no-repeat 0 0;
    padding-left: 25px;
    min-height: 26px;
}

.admiraltyStyle-excel {
    -ms-name: "Excel icon";
    display: inline-block;
    background: url(/_Layouts/15/AdmiraltyFrontend/images/icons/excel_icon.png) no-repeat 0 0;
    padding-left: 25px;
    min-height: 26px;
}

.admiraltyStyle-word {
    -ms-name: "Word icon";
    display: inline-block;
    background: url(/_Layouts/15/AdmiraltyFrontend/images/icons/word_icon.png) no-repeat 0 0;
    padding-left: 25px;
    min-height: 26px;
}

.admiraltyStyle-youtube {
    -ms-name: "YouTube icon";
    display: inline-block;
    background: url(/_Layouts/15/AdmiraltyFrontend/images/icons/youtube_icon.png) no-repeat 0 0;
    padding-left: 25px;
    min-height: 26px;
}

.admiraltyStyle-zip {
    -ms-name: "Zip icon";
    display: inline-block;
    background: url(/_Layouts/15/AdmiraltyFrontend/images/icons/zip_icon.png) no-repeat 0 0;
    padding-left: 25px;
    min-height: 26px;
}

.admiraltyStyle-powerpoint {
    -ms-name: "PowerPoint icon";
    display: inline-block;
    background: url(/_Layouts/15/AdmiraltyFrontend/images/icons/powerpoint_icon.png) no-repeat 0 0;
    padding-left: 25px;
    min-height: 26px;
}

td .admiraltyStyle-pdf,
td .admiraltyStyle-excel,
td .admiraltyStyle-word,
td .admiraltyStyle-youtube,
td .admiraltyStyle-zip,
td .admiraltyStyle-powerpoint {
    padding-top: 5px;
}

.admiraltyStyle-tick {
    -ms-name: "Tick icon";
    display: inline-block;
    background: url('/_Layouts/15/AdmiraltyFrontend/images/icons/green-tick.png') no-repeat 0 0;
    padding-left: 25px;
    min-height: 16px;
}

.admiraltyStyle-lightbox {
    -ms-name: "Lightbox";
    cursor: pointer;
    cursor: zoom-in;
    -webkit-zoom-in;
}

.admiraltyStyle-pulloutTitle {
    -ms-name: "Pullout Title";
    font-size: 4em;
    color: $blue;
    font-family: $bodyFont;
}

.admiraltyStyle-pulloutText {
    -ms-name: "Pullout Text";
    font-size: 1.2em;
    color: $blue;
    font-family: $titleFont;
}

.admiraltyStyle-smallBlockquote {
    -ms-name: "Small Blockquote";
    font-size: 1.5em;
    color: $blue;
    padding-left: 60px;
    vertical-align: top;
    background: url("/_Layouts/15/AdmiraltyFrontend/images/icons/quote.png") no-repeat 0 0;
    font-family: $bodyFont;
}

.admiraltyTable-responsive a {
    color: $blue;
}

    .admiraltyTable-responsive a:hover span {
        text-decoration: underline;
    }


/* Image Styles */
.admiraltyImage-contentImages {
    -ms-name: "Content Images";
    height: auto;
    max-width: 100%;
}

/*.accordion .rightContentArea {
    position: static;
    width: auto;
    float: none;
    display: block; 
}*/


@media screen and (max-width: 670px) {
    .admiraltyTable-responsive > tbody > tr:first-child {
        display: none;
    }

    .admiraltyTable-responsive td {
        display: block;
        position: relative;
        padding-left: 160px;
        padding-top: 8px;
        padding-bottom: 8px;
        text-align: left;
        background: #f7f9fa;
        min-height: 40px;
    }

        .admiraltyTable-responsive td:before {
            content: attr(data-heading) ":";
            display: inline-block;
            color: #000000;
            background: #eef3f4;
            border-right: 2px solid transparent;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            width: 140px;
            max-height: 100%;
            font-size: 16px;
            padding-left: 8px;
            padding-top: 8px;
        }

        .accordion .accordionTitle:first-child + .accordionContent .admiraltyTable-responsive td:first-child,
        .admiraltyTable-responsive td:first-child {
            margin-top: 10px;
            width: auto;
        }

            .admiraltyTable-responsive td:first-child,
            .admiraltyTable-responsive td:first-child:before {
                color: $whitefff;
            }

                .admiraltyTable-responsive td:first-child a,
                .admiraltyTable-responsive .admiraltyTableOddRow-responsive td:first-child a,
                .admiraltyTable-responsive .admiraltyTableEvenRow-responsive td:first-child a {
                    color: $whitefff;
                }
}

@media screen and (max-width: 400px) {
    .admiraltyTable-responsive td {
        padding-left: 120px;
        min-height: 50px;
    }

        .admiraltyTable-responsive td:before {
            width: 100px;
        }
}


/*
    Because sharepointEdit.css wasn't being served with the WYSIWYG editor.
*/
#MSO_tblPageBody {
    position: relative;
}

#MSOTlPn_MainTD {
    position: absolute;
    top: 60px;
    right: 20px;
    z-index: 10;
}

    #MSOTlPn_MainTD a {
        color: #0072c6;
    }