====== Элементы контента ======

Данные правила действуют внутри блоков с классом ''content''. К примеру:

<code html>
<div id="content" class="content">
	Заголовки, параграфы, списки и всё остальное выводятся здесь :)
</div>
<div id="new-custom-block" class="content">
	Ещё один дополнительный контентный блок...
</div>
</code>

Нижний отступ в ''1em'' задаётся для всех элементов в одном месте:

<code css>
.content p, .content ul, .content ol, .content table, blockquote, pre, .columns, .content img { margin-bottom: 1em; }
</code>

===== Заголовки =====

Задаются общие параметры текста для заголовков 1-4 уровня и отдельно размер текста для заголовков 2-4 уровня:

<code css>
.content h1, .content h2, .content h3, .content h4 { font: 1.7em Verdana, Arial, Helvetica, sans-serif; margin-bottom: .5em; }
.content h2 { font-size: 1.5em; }
.content h3 { font-size: 1.3em; }
.content h4 { font-size: 1.1em; font-weight: bold; }
</code>

===== Цитаты, блоки кода =====

Для цитат(''blockquote'') задаётся левый отступ и ''2px'' граница слева.

Для листингов кода назначается шрифт ''Courier New'', увеличеноое межстрочное расстояние, фоновая заливка и окантовка в полоску: 

<code css>
blockquote { margin-left: 10em; padding-left: 1em; border-left: 2px solid #ccc; }
pre, code { font: 1.2em/1.8 "Courier New", Courier, monospace; border: 1px dashed #aaa; padding: 1em; background: #eee; }
code { padding: .2em .5em; }
</code>

Эти элементы довольно редко используют вне контенкстных блоков, поэтому правила задаются без привязки к классу ''.content''.

===== Списки =====

Для упорядоченных и неупорядоченных списков задаются общие правила для отступа слева, вертикального отступа между элементами списка и увеличенного межстрочного расстояния:

<code css>
.content ul, .content ol { margin-left: 3em; line-height: 1.3em; }
.content ul li, .content ol li { margin-bottom: .2em; }
</code>

===== Ссылки с иконкой =====

Для упрощенного создания ссылок с иконками был добавлен класс ''icon'' или общий класс ''icons'' для контейнера со ссылками:

<code css>
.icons a, .icon { padding-left: 20px; background-repeat: no-repeat; background-position: left center; }
</code>

К примеру:

<code html>
<a href="#" class="pdf-icon icon">pdf-документ</a>
</code>

Для создания ссылки с pdf-иконкой достаточно назначить картинку для класса ''pdf-icon'':

<code css>
.pdf-icon { background-image: url(pdf-icon.gif); }
</code>

===== Выравнивание текста и float-свойство =====

Для задания свойства ''text-align'' существуют 3 вспомогательных класса:

<code css>
.a-left { text-align: left; }
.a-center { text-align: center; }
.a-right { text-align: right; }
</code>

На тот случай, если требуется изменить выравнивание текста для элемента, а дополнительный класс создавать ни к чему.

К примеру:

<code html>
<p class="a-right">Текст выровненный по правому краю.</p>
</code>

В дополнение 2 класса для задания ''float'':

<code css>
.f-left { float: left; }
.f-right { float: right; }
</code>

Приведённый выше параграф с текстом сделаем плавающим:

<code html>
<p class="f-right a-right">Текст выровненный по правому краю имеющий свойство float: right; </p>
</code>