@charset "utf-8";

// Font sizes
$w-title-font-size-large: 1.5rem;
$w-title-font-size-small: 0.75rem;
$w-subtitle-font-size: 0.75rem;
$w-meta-font-size: 0.75rem;

$w-table-th-font-size: 13px;
$w-table-td-font-size: 13px;

$i-title-font-size-large: 2em;

// colors
$white: white;
$red: #d20001;
$blue: #003d7e;
$gray: #414141;

$link-color: #5fbdc9;
$link-hover-color: #3d9eab;

$table-th-bgcolor: $theme-color-main;

//  ******************  Widget  ******************
// Announcement widget 1
.w-announcement {
    a {
        text-decoration: none;
    }
    .w-announcement__widget-title {
        font-family: $main-font;
        font-size: $w-title-font-size-large;
        color: $gray;
        margin: 0.5rem 0;
    }
    .w-announcement__list {
        @include list-reset;
    }
    .w-announcement__item {
        margin-bottom: 1em;
        padding-bottom: 1em;
        border-bottom: 1px dashed lighten($gray, 65%);
    }
    .w-announcement__pic-wrap {
        padding-bottom: 33.3%;
        margin-bottom: 1em;
    }
    .w-announcement__status-wrap {
        display: inline-block;
    }
    .w-announcement__status {
        font-size: $w-meta-font-size;
        color: $white;
        display: inline-block;
        border-radius: 2px;
        behavior: url("/assets/ie_support/PIE2/PIE.htc");
        padding: 6px 10px;
    }
    .w-announcement__status.status-top {
        background-color: $blue;
    }
    .w-announcement__status.status-hot {
        background-color: $red;
    }
    .w-announcement__postdate {
        font-size: $w-meta-font-size;
        color: $gray;
    }
    .w-announcement__title {
        font-family: $main-font;
        margin: 15px 0 8px 0;
        line-height: 1.4;
    }
    .w-announcement__link {
        font-family: $main-font;
        color: $link-color;
    }
    .w-announcement__link:hover {
        color: $link-hover-color;
    }
    .w-announcement__subtitle {
        font-family: $sub-font;
        font-size: $w-subtitle-font-size;
        line-height: 1.6;
    }
    .w-announcement__more {
        color: $link-color;
        font-size: 0.875rem;
    }
    .w-announcement__more:hover {
        color: $link-hover-color;
    }
}

// Announcement widget 2
.annc-widget-2 {}

// Announcement widget 3
.annc-widget-3 {}

// Announcement widget 4
.annc-widget-4 {
    .w-announcement__postdate {
        display: inline-block;
        margin-right: 0.5rem;
    }
    .w-announcement__title {
        font-size: $w-title-font-size-small;
        display: inline-block;
        margin: 0;
    }
    .w-announcement__item {
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

// Announcement widget 5
.annc-widget-5 {
    .w-announcement__item {
        @include clearfix;
    }
    .w-announcement__pic-wrap {
        float: left;
        width: 32%;
        margin-right: 3%;
    }
    .w-announcement__content-wrap {
        float: left;
        width: 65%;
    }
}

// Announcement widget 6
.annc-widget-6 {
    .w-announcement__title {
        font-size: $w-title-font-size-small;
        display: inline-block;
        margin: 0;
    }
    .w-announcement__postdate {
        display: inline-block;
        margin-right: 0.5rem;
    }
    .w-announcement__item {
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

// Announcement widget 7
.annc-widget-7 {
    .w-announcement__postdate {
        margin-bottom: 0.5rem;
    }
    .w-announcement__title {
        font-size: $w-title-font-size-small;
        margin: 0;
    }
}

// Announcement widget 8 -- table
.w-announcement--table {
    .w-announcement__table {
        width: 100%;
    }
    .w-announcement__th {
        font-size: 13px;
        color: $white;
        background: $table-th-bgcolor;
        white-space: nowrap;
        padding: 0.5rem 0.8rem;
    }
    td {
        font-size: 13px;
        border-bottom: 1px solid lighten($gray, 70%);
        padding: 0.5rem;
    }
    .w-announcement__status {
        margin-bottom: 0.3rem;
    }
}

// Announcement widget 9 -- table

.annc-widget-9 {}

// Announcement widget 10 -- table

.annc-widget-10 {}

// Announcement widget 11 -- table
.annc-widget-11 {}

// Announcement widget 12 -- table
.annc-widget-12 {}

// Announcement widget 12 -- table
.annc-widget-13 {}

//  ******************  index  ******************

// Announcement index 1 -- table
.i-announcement--table {
    .i-announcement__table {
        width: 100%;
    }
    .i-announcement__th {
        font-size: $w-table-th-font-size;
        color: $white;
        background: $table-th-bgcolor;
        white-space: nowrap;
        padding: 0.5rem 0.8rem;
    }
    td {
        font-size: 16px;
        border-bottom: 1px solid lighten($gray, 70%);
        padding: 0.5rem;
    }
    .i-announcement__status {
        margin-bottom: 0.3rem;
    }
}

// Announcement index 2 
.i-announcement {
    .i-announcement__title {
        font-size: $i-title-font-size-large;
        font-family: $main-font;
    }
    .i-announcement__list {
        @include list-reset;
    }
    .i-announcement__pic-wrap {
        margin-bottom: 1em;
        width: inherit;
        height: 250px;
    }
    .i-announcement__pic {
    }
    .i-announcement__status {
        font-size: $w-meta-font-size;
        color: $white;
        display: inline-block;
        border-radius: 2px;
        behavior: url("/assets/ie_support/PIE2/PIE.htc");
        padding: 6px 10px;
    }
    .i-announcement__status.status-top {
        background-color: $blue;
    }
    .i-announcement__status.status-hot {
        background-color: $red;
    }
}

// Announcement SHOW
.show-announcement {
    .show-title {
        @extend .unity-title;
    }
    .post-metadata {
        border-bottom: 1px solid $theme-gray-light;
        @include clearfix;
        li {
            margin-right: 1em;
            margin-bottom: 0.6em;
            float: left;
            &.metadata-tags {
                position: relative;
                margin-right: 0;
                padding-left: 1.6em;
                clear: both;
                float: none;
                i {
                    position: absolute;
                    top: 7px;
                    left: 0;
                }
            }
            &.metadata-tags {
                .tag {
                    display: inline-block;
                    margin-bottom: 4px;
                    padding: 5px 8px;
                    font-size: 0.8em;
                    border: 1px solid $theme-gray-light;
                    text-decoration: none;
                    &:hover {
                        color: $theme-color-main;
                        border-color: $theme-color-main;
                        background-color: $theme-gray-lighter;
                    }
                }
            }
            i {
                color: darken($theme-gray-light, 10%);
            }
        }
    }
    .post-section {
        @include clearfix;
        margin-bottom: 2em;
        .post-pic {
            img {
                @include size(100%, auto);
            }
        }
    }
    .post-related {
        padding-top: 1em;
        border-top: 1px solid $theme-gray-light;
        li {
            padding-bottom: 3px;
            padding-left: 1.6em;
            & + li {
                padding-top: 8px;
                border-top: 1px dotted $theme-gray-light;
            }
            i {
                margin: 8px 0 0 -1.6em;
                float: left;
                color: darken($theme-gray-light, 10%);
            }
            & > div {
                display: inline-block;
            }
            a {
                display: inline-block;
                margin-bottom: 4px;
                padding: 5px 8px;
                font-size: 0.8em;
                border: 1px solid $theme-gray-light;
                text-decoration: none;
                &:hover {
                    color: $theme-color-main;
                    border-color: $theme-color-main;
                    background-color: $theme-gray-lighter;
                }
            }
        }
    }
}