notification

by sazakharov

HTML

<div class="courses-main-wrapper">
<div class="warning">
 <b>Внимание!</b> В файлах формата .chm нет возможности просматривать видеоролики и не работают всплывающие подсказки. Это ограничения формата. Поэтому рекомендуем пользоваться онлайн версией курсов.
</div>

<div class="hint">
 <b>Примечание:</b> В дополнение к документации, информацию, касающуюся продуктов компании «1С-Битрикс», можно получить на сайте в разделе 
		<span class="learning-lesson-detail-block js-detail-info-block">
			<span class="learning-lesson-detail-word learning-lesson-detail-word-solid js-detail-info-word">форум</span>
			<span class="learning-lesson-detail-body js-detail-info-body">
				<span class="learning-lesson-detail-body-inner  js-detail-info-body-inner">В форумах нашего Центра поддержки разработчиков вы можете задать свои вопросы и обсудить варианты их решения.<br>
 <br>
 <a target="_blank" href="http://dev.1c-bitrix.ru/community/forums/">Подробнее ...</a></span>
			</span>
		</span>
		.
	<p>
		 Для администраторов и разработчиков также рекомендуется познакомиться с опытом разработок сайтов на <i>Bitrix Framework</i>, который описывается в <a href="http://dev.1c-bitrix.ru/community/webdev-blogs/" target="_blank">блогах</a> разработчиков и в <a href="http://dev.1c-bitrix.ru/community/webdev/group/search/" target="_blank">группах</a> Социальной сети сайта компании 1С-Битрикс.
	</p>
</div>
</div>

CSS

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    background: #f8f8f8;
    position: relative;
}

div {
    display: block;
}

.courses-main-wrapper {
  width: 85vw;
  margin: auto;
}

.courses-main-wrapper .warning, .courses-main-wrapper .note, .courses-main-wrapper .tip, .courses-main-wrapper .hint, .courses-main-wrapper .play, .courses-main-wrapper .playdoc {
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    color: #000;
    font-size: 14px;
    min-height: 38px;
    margin: 24px 0;
    padding: 19px 30px 24px 42px;
    position: relative;
}

.courses-main-wrapper .warning {
    background: #fef2f2;
    border-color: #fcdddd;
}

.courses-main-wrapper .hint {
    background: #f7fafe;
    border-color: #e4eefb;
}

.courses-main-wrapper .warning::before, .courses-main-wrapper .note::before, .courses-main-wrapper .tip::before, .courses-main-wrapper .hint::before {
    background: url(https://dev.1c-bitrix.ru/bitrix/templates/learning_new_2014/images/courses-sprite.png) no-repeat 100px;
    content: '';
    height: 31px;
    top: -9px;
    left: -6px;
    position: absolute;
    width: 31px;
}

.courses-main-wrapper .warning::before {
    background-position: 0 -96px;
    background-position-x: 0px;
    background-position-y: -96px;
}

.courses-main-wrapper .hint:before {
    background-position: 0 0;
}