@import "../../../../Base/Content/sass/compass";
@import "../../../../Base/Content/sass/bootstrap/variables";

@import "_Variables";


.page-avatar-picture-small {
    display: table-cell;
    text-align: center;
    width: $wizdom-avatar-small-dims;

    img {
        width: $wizdom-avatar-small-dims;
        height: $wizdom-avatar-small-dims;
        @include border-radius($wizdom-avatar-small-radius);
    }
}

.page-avatar-picture-medium {
    display: table-cell;
    text-align: center;
    width: $wizdom-avatar-medium-dims;

    img {
        width: $wizdom-avatar-medium-dims;
        height: $wizdom-avatar-medium-dims;
        @include border-radius($wizdom-avatar-medium-radius);
    }
}

.page-avatar-picture-large {
    display: table-cell;
    text-align: center;
    width: $wizdom-avatar-large-dims;

    img {
        width: $wizdom-avatar-large-dims;
        height: $wizdom-avatar-large-dims;
        @include border-radius($wizdom-avatar-large-radius);
    }
}


.wt-pagecontrol {

    div, p {
        color: $wizdom-rightColumn-color;
        font-size: 13px;
        line-height: 1.4;
    }

    a, a:link, a:visited, a:link:visited {
        font-size: 13px;
        line-height: 1.4;
        color: $wizdom-link-color;
        font-style: normal;
        text-decoration: none;
        font-weight: normal;
    }

    .a:hover, .a:link:hover, .a:visited:hover, .a:link:visited:hover {
        text-decoration: underline;
    }

    .ms-webpart-chrome {
        & > div {
            padding: $wizdom-webpart-padding;
        }
    }

    .wtsite-pagemodified-control {
        display: none;
        padding-bottom: 10px;

        .showPageInfo & {
            display: block;
        }
    }

    .revisiondate {
        .contentPage & {
            // ensure there is some padding to breadcrumb - if on contantPage
            /*padding-top:20px;
			@media (max-width:$screen-desktop) {
				padding-top:10px;
			}*/
        }

        img {
            // why?? possible problem with max-width in firefox / ie
            max-width: 100%;
        }
    }

    .relateddocuments {
        display: none;

        .showRelatedDocuments & {
            display: block;
        }
    }

    .relatedpeople {
        display: none;

        .showRelatedPeople & {
            display: block;
        }

        .page-relation-peopleRow {
            padding-bottom: 20px;
        }
    }

    .relatedpages {
        display: none;

        .showRelatedPages & {
            display: block;
        }
    }

    .wtsite-pagemodified-control-row1,
    .news-info-container {
        color: $wizdom-pageinfo-color;

        span {
            vertical-align: middle;
        }

        .wtsite-pagemodified-spc {
            padding: 0 5px 0 5px;
        }

        .wtsite-pagemodified-editedby,
        .wtsite-pagemodified-editeddate {
            padding: 0 0 0 5px;
        }

        .wtsite-pagemodified-editedby {
            font-style: italic;
        }
    }

    .tags {
        & > li {
            margin-left: 5px;
            margin-bottom: 5px;

            & > a {
                text-decoration: none;
                background-color: #555457;
                color: #909090;

                &:hover, &:focus {
                    color: #FFF;
                    background-color: #1775bc !important;
                }
            }
        }
    }

    .page-relations {
        margin-bottom: 15px !important;

        .panel-body {
            padding-left: 0 !important;
            padding-top: 0 !important;
        }

        a {
            color: $wizdom-link-color;
            text-decoration: none;

            &:hover {
                color: $wizdom-link-hover-color;
            }
        }
    }

    .related-news {
        display: none;
        box-shadow: none;

        .showRelatedNews & {
            display: block;
        }

        .related-news-items {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -20px;
        }

        .related-news-item {
            flex: 1 1 180px;
            margin: 5px;
        }

        .thumbnail {
            position: relative;
        }

        .newsitem {
            position: absolute;
            left: 20px;
            right: 10px;
            bottom: 15px;

            h5 {
                color: white;
                text-transform: uppercase;
                margin-bottom: 5px;
                word-break: break-word;
            }

            p {
                color: #fff;
                opacity: 0.5;
                font-size: 12px;
            }
        }
    }
}

.wt-controlpanel {

    .ms-usereditor, .ms-long {
        width: 100%;
    }

    .wt-controlpanel-item-title {
        color: #787878;
    }

    .wt-departmentcontact,
    .wt-relatedtopic {
        .ms-taxonomy-fieldeditor {
            width: auto !important;
        }
    }
}

.wizdom-pageInfo {
    text-align: center;
    display: none;

    .showPageContact & {
        display: block;
    }

    .wizdom-pageInfo-row {
        display: table;
        table-layout: fixed;
        width: 100%; // needed for word-wrap:break-word to work in the textColumn
    }

    .wizdom-pageInfo-imgColumn {
        display: table-cell;
        text-align: center;
        width: $wizdom-avatar-medium-dims;

        img {
            width: $wizdom-avatar-medium-dims;
            height: $wizdom-avatar-medium-dims;
            @include border-radius($wizdom-avatar-medium-radius);
        }
    }

    .wizdom-pageInfo-textColumn {
        vertical-align: middle;
        text-align: left;
        padding-left: $wizdom-padding-left;
        -ms-word-wrap: break-word;
        word-wrap: break-word;
        display: table-cell;

        .name {
            font-weight: bold;
        }

        .name a, .name a:visited {
            font-weight: bold;
            color: $wizdom-link-color;
        }

        .name a:hover, .name a:visited:hover {
            font-weight: bold;
            color: $wizdom-link-hover-color;
        }
    }
}

.wt-footer {
    position: relative;
    width: 100%;
    z-index: 100;
    background-color: #282c2e;

    .wt-footer-categories {
        padding-left: 20px;
        padding-top: 20px;
    }

    .wt-footer-category-column {
        margin-bottom: 30px;
    }

    .wt-footer-text {
        text-align: center;
        background-color: #212223;
        color: #fff;
        padding-left: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .wt-footer-categoryname {
        color: #FFFFFF;
        font-weight: normal;
        font-size: 18px;
    }

    .wt-footer-linklist {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .wt-footer-link {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .wt-footer-logo {
        min-width: 150px;
        margin-bottom: 20px;
    }

    .wt-footer-logo-img {
        background-image: url(Images/wizdom-footer-logo.png);
        background-repeat: no-repeat;
        width: 135px;
        height: 25px;
        margin-left: 15px;
    }

    .wt-footer-companyname {
        color: #FFFFFF;
        font-size: 24px;
        font-weight: normal;
        margin-left: 5px;
    }
}


.wt-breadcrumb-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    background-color: #1775bc;

    @media (max-width:$screen-tablet) {
        position: static;
        height: auto;

        .webpartPage & {
            margin-bottom: 12px;
        }
    }

    .hideBreadCrumb & {
        visibility: hidden;
        position: static;
    }

    .hideBreadCrumb.webpartPage & {
        margin-top: -50px;
        height: 25px;

        @media (max-width:$screen-tablet) {
            margin-top: -22px;
            height: 20px;
        }
    }

    .hideBreadCrumb.contentPage & {
        margin-top: -40px;

        @media (max-width:$screen-tablet) {
            margin-top: 0;
        }
    }

    .wt-editmode.hideBreadCrumb & {
        margin-top: 0;
        position: absolute;
    }
}

.wt-2column {

    .hideBreadCrumb.contentPage & {
        margin-top: -30px;

        @media (max-width:$screen-tablet) {
            margin-top: 0;
        }
    }

    .wt-editmode.hideBreadCrumb & {
        margin-top: 0;
    }
}
// get shadow down on content instead of breadcrumb
#s4-titlerow {
    .hideBreadCrumb & {
        position: relative;
        z-index: auto;
    }
}


// breadcrumb handling in editmode -if hidden
#contentBox {
    .wt-editmode.hideBreadCrumb & {
        margin-top: 0 !important;

        #DeltaPageStatusBar {
            position: static;
            top: 0;
        }
    }
    // if no breadcrumb - and not in editmode - but needing deltaPageStatusbar.
    .hideBreadCrumb & {
        #DeltaPageStatusBar {
            position: relative;
            top: -30px;
        }
    }
}

.wt-breadcrumb {
    color: #fff;
    padding-left: 30px;

    @media (max-width:$screen-tablet) {
        padding-left: 10px;
    }

    .wt-breadcrumb-split {
        padding: 0 3px 7px 3px;
        @include inline-block();
        line-height: 10px;
    }

    .wt-breadcrumb-split-last {
        padding: 0 0 7px 3px;
        @include inline-block();
        line-height: 10px;
    }

    a {
        color: #fff;

        &:hover {
            color: #fff;
        }
    }

    ul {
        margin: 0;
        padding: 0;
        height: 30px;

        @media (max-width:$screen-tablet) {
            height: auto;
        }
    }

    li {
        @include inline-block();
        margin: 0;
        padding: 0;
        line-height: 30px;
    }
}


/*#region manual*/
/* MANUAL */

/* Masterpage "Manual" control style */
#pageversions_plc {
    text-align: right;

    @media (max-width:$screen-desktop) {
        margin-top: 10px;
        text-align: inherit;
    }

    select {
        border: none;
    }
}

#wizdomPageLayout {
    .dkOutdated {
        background-image: url('Images/Foraeldet.png') !important;
    }

    .noOutdated {
        background-image: url('Images/Utdatert.png') !important;
    }

    .svOutdated {
        background-image: url('Images/Utdatert.png') !important;
    }

    .enOutdated {
        background-image: url('Images/Outdated.png') !important;
    }

    .dkDraft {
        background-image: url('Images/Udkast.png') !important;
    }

    .noDraft {
        background-image: url('Images/Utkast.png') !important;
    }

    .svDraft {
        background-image: url('Images/Utkast.png') !important;
    }

    .enDraft {
        background-image: url('Images/Draft.png') !important;
    }
}
/* MANUAL */
/*#endregin*/

#noty_center_layout_container {
    li {
        border-radius: 0 !important;
        min-width: 370px;
        background: #FFF !important;

        .noty_message {
            padding: 20px !important;
            font-size: 14px !important;
        }

        .noty_buttons {
            padding: 0 0 20px !important;
            text-align: center !important;
            border-top: none !important;

            .btn {
                border-radius: 0;
                padding: 5px 25px;
                text-transform: none;

                & + .btn {
                    margin-left: 10px !important;
                }
            }

            .btn-primary {
                background-color: $wizdom-button-primary-bg-color;
                border-color: $wizdom-button-primary-border-color;
                color: $wizdom-button-primary-text-color;

                &:hover, &:focus, &:active {
                    background-color: $wizdom-button-primary-hover-bg-color;
                    border-color: $wizdom-button-primary-hover-border-color;
                    color: $wizdom-button-primary-hover-text-color;
                }
            }

            .btn-default {
                background-color: $wizdom-button-default-bg-color;
                border-color: $wizdom-button-default-border-color;
                color: $wizdom-button-default-text-color;

                &:hover, &:focus, &:active {
                    background-color: $wizdom-button-default-hover-bg-color;
                    border-color: $wizdom-button-default-hover-border-color;
                    color: $wizdom-button-default-hover-text-color;
                    box-shadow: none;
                    outline: none;
                }
            }
        }
    }
}
