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;
}
}