Bản mẫu:Thử/Mxn/main page.css

/* Hiện các tên mũi trong hộp Hình ảnh chọn lọc để cho biết có thể mở rộng */
.mp-box .mp-tfp-arrow {
    display: block !important;
    opacity: 0;
    /*-moz-transition: opacity 0.2s linear 0.2s, top 0s linear 0.4s, right 0s linear 0.4s, bottom 0s linear 0.4s, left 0s linear 0.4s;*/
    /*-webkit-transition: opacity 0.2s linear 0.2s, top 0s linear 0.4s, right 0s linear 0.4s, bottom 0s linear 0.4s, left 0s linear 0.4s;*/
    /*-o-transition: opacity 0.2s linear 0.2s, top 0s linear 0.4s, right 0s linear 0.4s, bottom 0s linear 0.4s, left 0s linear 0.4s;*/
    /*-ms-transition: opacity 0.2s linear 0.2s, top 0s linear 0.4s, right 0s linear 0.4s, bottom 0s linear 0.4s, left 0s linear 0.4s;*/
    transition: opacity 0.2s linear 0.2s, top 0s linear 0.4s, right 0s linear 0.4s, bottom 0s linear 0.4s, left 0s linear 0.4s;
    /*filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);*/
}

.mp-box:hover .mp-tfp-arrow {
    opacity: 0.8;
    /*-moz-transition: opacity 0.2s linear 0.2s, top 0.1s linear 0.4s, right 0.1s linear 0.4s, bottom 0.1s linear 0.4s, left 0.1s linear 0.4s;*/
    /*-webkit-transition: opacity 0.2s linear 0.2s, top 0.1s linear 0.4s, right 0.1s linear 0.4s, bottom 0.1s linear 0.4s, left 0.1s linear 0.4s;*/
    /*-o-transition: opacity 0.2s linear 0.2s, top 0.1s linear 0.4s, right 0.1s linear 0.4s, bottom 0.1s linear 0.4s, left 0.1s linear 0.4s;*/
    /*-ms-transition: opacity 0.2s linear 0.2s, top 0.1s linear 0.4s, right 0.1s linear 0.4s, bottom 0.1s linear 0.4s, left 0.1s linear 0.4s;*/
    transition: opacity 0.2s linear 0.2s, top 0.1s linear 0.4s, right 0.1s linear 0.4s, bottom 0.1s linear 0.4s, left 0.1s linear 0.4s;
    /*filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);*/
}

.mp-box:hover #mp-tfp-arrow-bottom-left {
    top: 70% !important;
    right: 70% !important;
}

.mp-box:hover #mp-tfp-arrow-top-right {
    bottom: 70% !important;
    left: 70% !important;
}

/* Chỉ hiện các nút “Sửa” khi rê chuột lên hộp */
.mp-box .mp-edit {
    visibility: visible !important;
    opacity: 0;
    right: 0 !important;
    /*-moz-transition: opacity 0.2s linear, right 0.2s ease-out; -webkit-transition: opacity 0.2s linear, right 0.2s ease-out; -o-transition: opacity 0.2s linear, right 0.2s ease-out; -ms-transition: opacity 0.2s linear, right 0.2s ease-out; */
    transition: opacity 0.2s linear, right 0.2s ease-out;
    /*-moz-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; -o-transition-delay: 0.2s;*/
    transition-delay: 0.2s;
    /*filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);*/
}

.mp-box:hover .mp-edit {
    opacity: 1;
    right: 1em !important;
    /*filter:*/
    /*    progid:DXImageTransform.Microsoft.Alpha(opacity=100)*/
    /*    progid:DXImageTransform.Microsoft.Shadow(*/
    /*        color='#404040',*/
    /*        strength=3,*/
    /*        direction=135*/
    /*    );*/
}

/* Tắt kiểu liên kết ở các đầu hộp */
.mp-box-header a,
.mp-box .mp-edit a {
    color: inherit !important;
    text-decoration: none;
}

.mp-box-header a:hover,
.mp-box .mp-edit a:hover,
.mp-discretionary-link a:hover .mp-discretionary-link-on {
    text-decoration: underline;
}

.mp-discretionary-link a:hover {
    text-decoration: none;
}

/* Hỗ trợ Internet Explorer 6–9 (Trident 5.0) */
/*.mp-box-bg-fade {*/
/*    filter: progid:DXImageTransform.Microsoft.Gradient(*/
/*        startColorStr='#00ffffff',*/
/*        endColorStr='#ffffff',*/
/*        gradientType=0*/
/*    );*/
/*}*/

/*.mp-box-header {*/
/*    filter: progid:DXImageTransform.Microsoft.Shadow(*/
/*        color='#404040',*/
/*        strength=3,*/
/*        direction=135*/
/*    );*/
/*}*/

/*.mp-ellipsis {*/
/*    filter: progid:DXImageTransform.Microsoft.Gradient(*/
/*        startColorStr='#00ffffff',*/
/*        endColorStr='#ffffff',*/
/*        gradientType=1*/
/*    );*/
/*}*/

/* Mờ các hình tượng dự án liên quan cho đến khi rê chuột lên chúng */
#mp-sister li {
    padding: 0.5em 1em !important;
    width: auto !important;
    height: auto !important;
}

#mp-sister a {
    display: block;
    width: 60px;
    height: 60px;
    margin: -0.5em -1em;
    padding: 0.5em 1em;
    /*-moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; -ms-transition: opacity 0.2s linear;*/
    transition: opacity 0.2s linear;
}

#mp-sister:hover a {
    opacity: 0.5;
    /*filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);*/
}

#mp-sister a:hover {
    opacity: 1;
    /*filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);*/
}

/* Trang trí các mẹo vặt của hình tượng dự án một tí */
.mp-sister-tip {
    text-align: center;
    font-size: 80%;
}

.mp-sister-tip > cite {
    display: block;
    font-size: 125%;
    font-style: normal;
}

/* Xếp lại các hộp thành 2 cột trong các cửa sổ hẹp như 800×600 điểm ảnh */
@media screen and (max-width: 55em) {
    .mp-row {
        display: inline !important;
        /* Nếu trình duyệt hỗ trợ cú pháp hộp dẻo chuẩn của CSS 3, nó có lẽ hỗ trợ các hàng hộp dẻo đa dòng */
        /*display: -ms-flexbox !important;*/
        display: flex !important;
    }
    
    .mp-box {
        /*-ms-flex-positive: 1 !important;*/
        flex: 1 !important;
        max-width: 50% !important;
        min-width: 20em !important;
        width: 49% !important;
    }
}

/* Firefox 22–27 hỗ trợ hệ thống hộp dẻo chuẩn nhưng không hỗ trợ hộp dẻo đa dòng. */
@supports ((display: flex) and (not (flex-wrap: wrap))) {
    @media screen and (max-width: 55em) {
        .mp-row {
            display: inline !important;
        }
        
        .mp-box {
            flex: none !important;
        }
    }
}

/* Xếp lại các hộp thành 1 cột trong các cửa sổ rất hẹp như 640×480 điểm ảnh */
@media screen and (max-width: 42em) {
    .mp-row {
        display: block !important;
    }
    
    .mp-box {
        display: block !important;
        float: none !important;
        max-width: 400px !important;
        min-width: auto !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
}