﻿.RSSIcon {
    font-size: 2rem;
    font-weight: 900;
    color: #FFFFFF;
    background-color: #FF9933;
    text-align: center;
    border: 1px solid #999999;
    padding: 5px;
    border-radius: 5px;
    flex-grow : 0;
    flex-shrink : 0;
}

    .RSSIcon a {
        color: #FFFFFF;
    }

.conditionBottom
{
    margin-top : 2rem;
    margin-bottom : 2rem;
}


/* =========================================================== */
/* 所有消息容器 */
.allNews {
    box-sizing: border-box;
}
    /* 單一個消息 */
    .allNews .eachNews
    {
        border-bottom : solid 1px;
        padding : 1rem;
        box-sizing : border-box;
        position : relative;
        overflow:hidden;
    }

        .allNews .eachNews .floatTop
        {
            position:absolute;
            top : -200px;
            left : 0px;
        }

        .allNews .eachNews .date {
            font-size: 0.8rem;
            margin-right: 4rem;
        }

        .allNews .eachNews .caption {
            font-weight : bolder;
        }

        .allNews .eachNews .picAndDescription {
            box-sizing: border-box;
            margin-top : 1rem;
        }

        .allNews .eachNews .picOnLeft {
            display: flex;
            flex-direction: row;
            flex-wrap : nowrap;
            justify-content: flex-start;
            align-items: flex-start;
        }

            .allNews .eachNews .picOnLeft .picContainer {
                margin-right: 1rem;
                flex-grow: 0;
                flex-shrink: 0;
                max-width: 30vw;
                margin-bottom: 1rem;
                flex-basis: 30%;
            }

            .allNews .eachNews .picOnLeft img {
                height: auto;
                max-width : 100%;
            }

            .allNews .eachNews .picOnLeft .description {
                display: block;
                flex-grow: 1;
                flex-shrink: 1;
                line-height : 2rem;
                flex-basis : 70%;
            }

            .allNews .eachNews .picOnLeft .description > p:first-child  {
                margin-top : 0;
            }


            .allNews .eachNews .picOnBottom {
            }

                .allNews .eachNews .picOnBottom img {
                    max-width: 100%;
                    margin-top: 1rem;
                    height: auto;
                }

                .allNews .eachNews .picOnBottom .description {
                    display: block;
                    line-height: 2rem;
                }


        .allNews .eachNews .attachments {
            border-top : dashed 1px #dedddd;
            padding-top : 1rem;
        }

            .allNews .eachNews .attachments .eachAttachment {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: flex-start;
                box-sizing: border-box;
                line-height : 2rem;
            }

                .allNews .eachNews .attachments .eachAttachment .caption {
                    margin-right: 1rem;
                    display: block;
                }

                .allNews .eachNews .attachments .eachAttachment .description {
                    display: block;
                }

.editMode .eachNews
{
    position : relative;
}

.editNews {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #ffffff;
    padding: 5px;
    border: solid 1px #000000;
}

@media (max-width: 480px) {
    .allNews .eachNews .picOnLeft {
        display: block;
    }

        .allNews .eachNews .picOnLeft .picContainer {
            flex-basis: 100%;
            max-width: none;
        }

        .allNews .eachNews .picOnLeft img {
            display: block;
            max-width: 100%;
            height: auto;
            margin-bottom: 1rem;
        }

        .allNews .eachNews .picOnLeft .description {
            display: block;
            line-height: 2rem;
            flex-basis: 100%;
        }
}

@media (max-width: 768px) {
    .description img, .description table, .description iframe, .description div {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
    }
}
