@import "../initial";

@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: 1.2em;
$w-table-td-font-size: 1em;

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

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

$link-color: #366aa6;
$link-hover-color: #608ec3;

$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;
        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: $w-table-th-font-size;
        color: $white;
        background: $table-th-bgcolor;
        white-space: nowrap;
        padding: 0.5rem 0.8rem;
    }
    td {
        font-size: $w-table-td-font-size;
        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 13
.annc-widget-13 {}

// Announcement widget 14 -- table
.annc-widget-14 {
    .w-announcement__table {
        border: 1px solid #ddd;
        font-family: $sub-font;
    }
    .w-announcement__th {
        padding: 3px;
        color: #000;
        background: none;
    }
    .w-announcement__link {
        font-family: $sub-font;
        background: url(/assets/disc.jpg) 3px center no-repeat;
        padding-left: 17px;
    }
    th, td {
        padding: 3px;
        line-height: 18px;
        text-align: left;
        border: 1px solid #ddd;
    }
}

//  ******************  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;
    }
    .i-announcement__category,
    .i-announcement__date {
        white-space: nowrap;
    }
    .i-announcement__date {
        font-family: Helvetica,Arial,sans-serif;
    }
    tr:nth-child(odd) {
        background-color: #e9e9e9;
    }
    td {
        border-bottom: 1px solid #d1d1d1;
        padding: 0.3rem;
        font-size: 15px;
        font-family: Helvetica,Arial,sans-serif;
        font-size: 0.9375rem;
    }
    .i-announcement__status {
        margin-bottom: 0.3rem;
    }
}

.i-tag-cloud {
    margin: 0 0 20px;
    min-height: 10px;
    font-family: Helvetica,Arial,sans-serif;
    line-height: 1.2;
    .i-tag-cloud__widget-title {
        border-bottom: 1px solid #7F7F7F;
        font-size: 15px;
        font: bold 0.9375rem/100% 微軟正黑體,新細明體,sans-serif;
        margin: 0 0 10px;
        padding: 0 0 10px 10px;
    }
    .hot1{
        font-size: 21px;
        font-size: 1.3125rem;
    }
    .hot2{
        font-size: 18px;
        font-size: 1.125rem;
    }
    .hot3{
        font-size: 15px;
        font-size: 0.9375rem;
    }
    .hot4{
        font-size: 12px;
        font-size: 0.75rem;
    }
    a {
        color: #08C;
    }
    a:hover {
        color: #005580;
    }
    .active {
        background-color: #005580;
        color: #FFF;
        &:hover {
            color: #fff;
        }
    }
}

// Announcement index 4 -- table
.annc-index-4 {
    .i-announcement__table {
        border: 1px solid #ddd;
        font-family: $sub-font;
    }
    .i-announcement__th {
        padding: 3px;
        color: #000;
        background: none;
        font-size: 12px;
        font-size: 0.75rem;
    }
    .i-announcement__th--date {
        text-align: center;
    }
    .i-announcement__date {
        font-size: 12px;
        font-size: 0.75rem;
        text-align: center;
        display: block;
    }
    .i-announcement__link {
        font-family: $sub-font;
        background: url(/assets/disc.jpg) 3px center no-repeat;
        padding-left: 17px;
        font-size: 12px;
        font-size: 0.75rem;
    }
    tr:nth-child(odd) {
        background: none;
    }
    th, td {
        padding: 3px;
        line-height: 18px;
        text-align: left;
        border: 1px solid #ddd;
    }
}


// Announcement SHOW
.show-announcement {
    .show-title {
        font: 24em/100% sans-serif;
        font-size: 1.5rem;
        margin: 0 0 5px;
        border-bottom: 1px solid #CFCFCF;
        padding-bottom: 10px;
        font-weight: bold;
    }
    .post-metadata {
        @include clearfix;
        border: 1px solid #9e9e9e;
        padding: 0.2em 0.6em 0.6em 0.6em;
        border-radius: 0.3em;
        background: #fefefe;
        background: -moz-linear-gradient(top, #fefefe 1%, #ededed 100%);
        /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #fefefe), color-stop(100%, #ededed));
        /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, #fefefe 1%, #ededed 100%);
        /* Chrome10+,Safari5.1+ */
        background: -ms-linear-gradient(top, #fefefe 1%, #ededed 100%);
        /* IE10+ */
        background: linear-gradient(to bottom, #fefefe 1%, #ededed 100%);
        /* W3C */
        li {
            margin-right: 1em;
            float: left;
            &.metadata-tags {
                position: relative;
                margin-right: 0;
                padding-left: 1.6em;
                float: left;
                i {
                    position: absolute;
                    top: 3px;
                    left: 0;
                }
            }
            &.metadata-tags {
                .tag {
                    display: inline-block;
                    text-decoration: none;
                    float: left;
                }
            }
            i {
                color: #333;
            }
        }
    }
    .post-section {
        @include clearfix;
        margin-bottom: 2em;
        p {
            font-size: 15px;
            font-size: 0.9375rem;
        }
        .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;
            }
            i {
                margin: 8px 0 0 -1.6em;
                float: left;
                color: darken($theme-gray-light, 10%);
            }
            & > div {
                display: inline-block;
            }
            a {
                width: 100px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                border: 1px solid #9e9e9e;
                padding: 0.2em;
                border-radius: 0.3em;
                background: #fefefe;
                background: -moz-linear-gradient(top, #fefefe 1%, #ededed 100%);
                /* FF3.6+ */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #fefefe), color-stop(100%, #ededed));
                /* Chrome,Safari4+ */
                background: -webkit-linear-gradient(top, #fefefe 1%, #ededed 100%);
                /* Chrome10+,Safari5.1+ */
                background: -ms-linear-gradient(top, #fefefe 1%, #ededed 100%);
                /* IE10+ */
                background: linear-gradient(to bottom, #fefefe 1%, #ededed 100%);
                /* W3C */
            }
        }
    }
}