.notice-area {
width: 80%;
margin: 20px 0 20px 50px;
padding: 7px 0;
position: relative;
}
.notice-area:after {
clear: both;
content: "";
display: table;
}
.notice-pic {
height: 60px;
width: 60px;
position: absolute;
left: -45px;
top: 7px;
z-index: 1;
border-radius: 50%;
box-shadow: -1px 1px 3px #acacac;
}
.notice-pic img {
width: 60px;
}
.notice-body {
border-radius: 5px;
margin-left: 20px;
min-height: 50px;
padding: 5px;
position: relative;
box-shadow: 1px 1px 3px #acacac;
}
.red{
background: #ffa7a7;
border: 1px solid #fe9a9a;
}
.blue{
background: #B1E1F9;
border: 1px solid #7edefe;
}
.green{
background: #b9ddc0;
border: 1px solid #a4dbaf;
}
.notice-body:after, .notice-body:before {
border: medium solid transparent;
content: " ";
height: 0;
position: absolute;
right: 100%;
width: 0;
}
.notice-body:after {
margin-right: -2px;
top: 22px;
}
.notice-body:before {
border-width: 7px;
top: 22px;
}
.red.notice-body:after {
border-right-color: #ffa7a7;
border-width: 7px;
}
.red.notice-body:before {
border-right-color: #fe9a9a;
}
.blue.notice-body:after {
border-right-color: #B1E1F9;
border-width: 7px;
}
.blue.notice-body:before {
border-right-color: #7edefe;
}
.green.notice-body:after {
border-right-color: #b9ddc0;
border-width: 7px;
}
.green.notice-body:before {
border-right-color: #a4dbaf;
}
.notice-text {
font-family: 'Trebuchet MS', Helvetica, Arial, sans-serif;
color: #595959;
font-size: 12px;
text-align: justify;
line-height: 1.1;
padding: 5px 10px;
}