Bản mẫu:Thử/style.css

#mp-nghethuat,
#mp-nghethuat-than {
    text-align: Justify;
    clear: both;
}

h1:first-child::first-letter{
	font-size: 1.5em;
}

h1 {
	font-size: xx-large;
	text-transform: uppercase;
	border-bottom: 0;
}

#mp-nghethuat-hop {
	background-color: #f5f5ff;
	flex: 1 1 auto;
	border: 0px solid #8693EE;
	border-radius: 5px;
	box-shadow: 0 0 0.3rem #8898BF;
	margin: .1em .5em .9em .5em;
	padding: 1.2rem;
	vertical-align: top;
	width: auto;
}

#mp-nghethuat-hop h2 {
	letter-spacing: .01em;
	display: block;
	border-bottom: solid 0.2rem #8693EE;
	margin: -0.4em 0em 0.8em 0em;
	color: #000000;
}

#mp-nghethuat-hop-nho h2 {
	box-shadow: 0 0 0.2em #999;
	background: #C8D8FF;
	border-radius: 0.2em;
	margin: 0.5em 0em 1em;
	padding: 0.4em 0.5em 0.5em 0.8em;
	color: #000;
	font-weight: bold;
	font-size: small;
	text-transform: uppercase;
	letter-spacing: .01em;
	border-bottom: 0;
}

#mp-nghethuat-hop h2:first-child::first-letter{
	font-size:150%;
}

#mp-nghethuat-doctiep {
    font-weight: bold;
    border: none;
    text-align:right;
    vertical-align: bottom;
    margin-top: .8em;
}

#mp-nghethuat-banner {
    background-color: #EAEAFF;
    border: 0px solid #f5f5ff;
    border-radius: 5px;
    box-shadow: 0 0 0.3rem #8898BF;
    margin:.1em .5em .9em .5em;
    padding:0rem;
    vertical-align:top;
    width:auto;
    height: auto;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Proc%C3%A9d%C3%A9s_d%E2%80%99art_flower_and_foliage_headpiece_04.svg/700px-Proc%C3%A9d%C3%A9s_d%E2%80%99art_flower_and_foliage_headpiece_04.svg.png");
    background-repeat: no-repeat;
}

#mp-nghethuat-baiviet-icon {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/1/13/Circle-icons-star.svg/40px-Circle-icons-star.svg.png");
    background-repeat: no-repeat;
    background-position: 5px 0px;
}

#mp-nghethuat-duan-icon {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/4/44/Circle-icons-rgb.svg/40px-Circle-icons-rgb.svg.png");
    background-repeat: no-repeat;
    background-position: 5px 0px;
}

#mp-nghethuat-nhanvat-icon {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Circle-icons-profile.svg/40px-Circle-icons-profile.svg.png");
    background-repeat: no-repeat;
    background-position: 5px 0px;
}
#mp-nghethuat-khampha-icon {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/d/df/Circle-icons-magnifyingglass.svg/40px-Circle-icons-magnifyingglass.svg.png");
    background-repeat: no-repeat;
    background-position: 5px 0px;
}
#mp-nghethuat-trich-icon {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Circle-icons-quote.svg/40px-Circle-icons-quote.svg.png");
    background-repeat: no-repeat;
    background-position: 5px 0px;
}
#mp-nghethuat-hinhanh-icon {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/0/09/Circle-icons-polaroids.svg/40px-Circle-icons-polaroids.svg.png");
    background-repeat: no-repeat;
    background-position: 5px 0px;
}
#mp-nghethuat-tacpham-icon {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/9/97/Circle-icons-art.svg/40px-Circle-icons-art.svg.png");
    background-repeat: no-repeat;
    background-position: 5px 0px;
}
#mp-nghethuat-khampha2-icon {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/4/42/Circle-icons-crossroads.svg/40px-Circle-icons-crossroads.svg.png");
    background-repeat: no-repeat;
    background-position: 5px 0px;
}
#mp-nghethuat-theloai-icon {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Circle-icons-folder.svg/40px-Circle-icons-folder.svg.png");
    background-repeat: no-repeat;
    background-position: 5px 0px;
}
#mp-nghethuat-chatluong-icon {
    float: left;
    width: 50px;
    height: 40px;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Circle-icons-trophy.svg/40px-Circle-icons-trophy.svg.png");
    background-repeat: no-repeat;
    background-position: 5px 0px;
}

.mp-nghethuat-hinh {
	margin: auto;
    text-align: center;
}

@media all and ( max-width: 400px ) {
#mp-nghethuat-bandothegioi {
    display: none;
}
}

@media all and ( min-width: 720px ) {
.mp-nghethuat-hinh {
    position: relative;
    max-width: 300px;
}

.mp-nghethuat-hinh > a > img {
    width: 100%;
    height: auto;
}

.mp-nghethuat-hinh-chuthich {
    display: none;
}
	
.mp-nghethuat-hinh:hover .mp-nghethuat-hinh-chuthich {
    display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	overflow: hidden;
	width: 100%;
	height: auto;
	background: #fff;
	background: rgba(255, 255, 255, 0.9);
	padding-bottom: 1em;
	box-sizing: border-box;
}
}

#mp-thandao h3 {
/* 	font-weight: normal;*/
	font-size:100%;
	font-family: Times;
	text-transform: uppercase;
	letter-spacing: .01em;
	display: inline;
}

#mp-thandao-banner > div > div {
    line-height: 1.5em;
}

#mp-thandao-banner-title {
	height:100%;
    float: left;
}

#mp-thandao-banner-title > div {
    display: inline-block;
    font-family: sans-serif;
}

#mp-thandao-banner-title h1 {
	text-transform: uppercase;
    font-size: 1.7em;
    line-height: 1.6em;
}

#mp-thandao-banner-title p {
    font-size: 90%;
    color: #457;
}

#mp-doctiep {
    font-weight: bold;
    border: none;
    text-align:right;
    vertical-align: bottom;
    margin-top: .8em;
}

#mp-thandao h2 {
    color: white;
    background: red;
	text-align: center;
	text-transform: uppercase;
    font-size: 1em;
    margin-bottom: .8em;
    width: 100%;
    line-height: 1.6em;
/*    letter-spacing: .16em;   */
}
.mp-thandao-o-trai {
	clear: both;
    margin-top: .8em;
    padding: 0 .8em .8em .8em;
    line-height: 1.5em;
    text-align: Justify;
    border: 1px solid #000000;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);
}

.mp-thandao-o-phai {
    margin-top: .8em;
    padding: 0 .8em .8em .8em;
    line-height: 1.5em;
    text-align: Justify;
    border: 1px solid #000000;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.08);
}


@media all and ( min-width: 501px ) {
#mp-thandao-banner-logo {
    float: left;
    width: 220px;
    height: 200px;
    margin-bottom: 1px;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikiproekt_Japonia_logo.png/200px-Wikiproekt_Japonia_logo.png");
    background-position: 20px 0px;
    background-repeat: no-repeat;
}
#mp-thandao-banner > div {
    line-height: 200px;
}

#mp-thandao-banner-title > div {
    vertical-align: bottom;
    padding-bottom: 1em;
}
}

@media all and ( max-width: 500px ) {
#mp-thandao-banner-logo {
    float: left;
    width: 98px;
    height: 98px;
    margin-bottom: 1px;
    background-image: url("//upload.wikimedia.org/wikipedia/commons/thumb/0/07/Wikiproekt_Japonia_logo.png/98px-Wikiproekt_Japonia_logo.png");
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

#mp-thandao-banner {
    height: 7em;
    width: 100%;
}
}

@media all and ( max-width: 378px ) and ( min-width: 266px ) {
	#mp-thandao-banner-title h1 {
	padding-top:45px;
}
	#mp-thandao-banner-title p {
    display: none;
}
}

/* giao diện máy tính */
@media all and ( min-width: 720px ) {

#mp-thandao-banner-title {
    margin-left: 10px;
    max-width: 300px;
}

#mp-thandao-cot-trai {
    float: left;
    width: 54.9%;
}

.mp-thandao-o-trai {
    margin-right: .8em;
}

#mp-thandao-cot-phai {
    float: right;
    width: 45%;
}

#mp-thandao-banner {
    clear: both;
    height: 200px;
}

}