Thành viên:Đức Anh/Nháp 40

/* .main-box */
.main-box {
	padding: 1rem 0;
}

/** .main-box modifier **/
.main-box.-plain {
    border: none;
    box-shadow: none;
}

.main-box.-plain .main-box__header {
    background: none;
}

.main-box.-plain .main-box__icon {
    display: none;
}

.main-box.-plain .main-box__title {
    padding: 0;
}

/* .main-box__header */
.main-box__header {
	display: flex;
    align-content: center;
    margin-bottom: 0.65rem;
}

/** header box color modifier **/
.main-box__header.-header-box-color-gray {
	background-color: #f2f2f2;
}

.main-box__header.-header-box-color-gold {
	background-color: #fcf4db;
}

.main-box__header.-header-box-color-green {
	background-color: #d4efdf;
}

.main-box__header.-header-box-color-purple {
	background-color: #f1e1f7;
}

.main-box__header.-header-box-color-blue {
	background-color: #d5ebf8;
}

.main-box__header.-header-box-color-red {
	background-color: #fbdddd;
}

.main-box__header.-header-box-color-orange {
	background-color: #fcebdb;
}

.main-box__header.-header-box-color-medium-violet-red {
	background-color: #f7dced;
}

.main-box__header.-header-box-color-olive {
	background-color: #ececd9;
}

.main-box__header.-header-box-color-light-slate-gray {
	background-color: #e6e9ec;
}

.main-box__icon {
	padding: 18px;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
}

/** icon modifier **/
.main-box__icon.-icon-star {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/c/ca/OOjs_UI_icon_unStar-invert.svg);
}

.main-box__icon.-icon-help {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/c/c0/OOjs_UI_icon_help-ltr-invert.svg);
}

.main-box__icon.-icon-newspaper {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/7/7a/OOjs_UI_icon_newspaper-ltr-invert.svg);
}

.main-box__icon.-icon-calendar {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/f/f7/OOjs_UI_icon_calendar-ltr-invert.svg);
}

.main-box__icon.-icon-book {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/9/9c/OOjs_UI_icon_book-ltr-invert.svg);
}

.main-box__icon.-icon-edit {
    background-image: url(//upload.wikimedia.org/wikipedia/commons/0/00/OOjs_UI_icon_edit-ltr-invert.svg);
}

/** icon box color modifier **/
.main-box__icon.-icon-box-color-gray {
    background-color: #bdbdbd;
}

.main-box__icon.-icon-box-color-gold {
    background-color: #F2C94C;
}

.main-box__icon.-icon-box-color-green {
    background-color: #27ae60;
}

.main-box__icon.-icon-box-color-purple {
    background-color: #bb6bd9;
}

.main-box__icon.-icon-box-color-blue {
    background-color: #2d9cdb;
}

.main-box__icon.-icon-box-color-red {
    background-color: #eb5757;
}

.main-box__icon.-icon-box-color-orange {
    background-color: #f2994a;
}

.main-box__icon.-icon-box-color-medium-violet-red {
    background-color: #ca3894;
}

.main-box__icon.-icon-box-color-olive {
    background-color: #9a9a02;
}

.main-box__icon.-icon-box-color-light-slate-gray {
    background-color: #778899;
}

.main-box__title {
	flex: 1;
    margin: 0;
    padding: 0 0.75em;
    height: 36px;
    line-height: 36px;
    border-bottom: 0;
    font-family: inherit;
    font-weight: bold;
    font-size: 1.2em;
}

.main-box__title a {
	color: inherit;
    text-decoration: none;
}

/* .main-box__body */
.main-box__body > p:last-of-type {
	 margin-bottom: 0;
}

/** .main-box__body modifier **/
.main-box__body.-responsive-image .floatnone > a > img {
	height: auto !important;
	width: 100%;
	max-width: 350px !important;
}

/* .main-box__footer */
.main-box__footer {
	margin: 14px 0 -3.5px;
    padding-top: 10.5px;
    border-top: 1px solid #e0e0e0;
}

/** .main-box-dropdown **/
.main-box-dropdown {
    display: inline-block;
	position: relative;
}

.main-box-dropdown__button {
	margin: -10px 0;
    padding: 15px;
    background-image: url(//upload.wikimedia.org/wikipedia/commons/b/b3/OOjs_UI_icon_ellipsis.svg);
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.main-box-dropdown__content {
    display: none;
    position: absolute;
    z-index: 1;
}

.main-box-dropdown__content > ul {
	display: flex;
	flex-flow: wrap column;
}

.main-box-dropdown__content > ul > li > a {
	padding: 6px 12px;
    color: inherit;
    font-weight: bold;
    text-decoration: none;
}

.main-box-dropdown:hover .main-box-dropdown__content,
.main-box-dropdown__content.is-active {
    display: block;
    margin-top: 0.75em;
	width: auto;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0px 2px 3px #eee;
}

.main-box-dropdown:hover .main-box-dropdown__content > ul > li > a,
.main-box-dropdown__content.is-active > ul > li > a {
	display: block;
}

/* responsive */
@media (min-width: 576px) {
	/* .main-box */
	.main-box {
	    padding: 1rem;
	    border: 1px solid #e0e0e0;
	    box-shadow: 0px 2px 3px #eee;
	}
}

@media (min-width: 768px) and (max-width: 991px),
       (min-width: 1125px) {
	/** .main-box-dropdown **/
	.main-box-dropdown__button {
		display: none;
	}
	
	.main-box-dropdown__content {
		display: block;
    	position: relative;
    	margin-bottom: -1em;
	}
	
	.main-box-dropdown__content > ul {
		flex-direction: row;
	}

	.main-box-dropdown__content > ul > li > a {
		display: inline-block;
	    margin-bottom: 1em;
		padding: 0 12px;
	}
	
	.main-box-dropdown:hover .main-box-dropdown__content {
		margin-top: 0;
		width: inherit;
		background: none;
		border: none;
    	box-shadow: none;
	}
}

/* fix bug on minerva */
body.skin-minerva .main-box__body > ul {
	margin-left: 0.5em;
}