Typography section 1: Images, headings and paragraphs.

Image with magic-border floated right. Curabitur a velum purus. Nam vel risus a elit malesuada dictum. Quisque rutrum neque nec tortor mollis ut vulputate lectus rutrum. Suspendisse non quam enim. Nam elit orci, vestibulum et mattis ullamcorper, venenatis a urna. Donec vel ullamcorper dui. Fusce lacinia sagittis sem, ac viverra risus molestie non. Cras fringilla ultricies feugiat. Donec in velit ligula. Curabitur orci nunc, dictum ac consequat nec, ornare et sem. Morbi hendrerit aliquam tortor, sed convallis sapien bibendum sed. Quisque eleifend, urna sed rutrum ultrices, augue velit mattis sem, in suscipit ante nulla a risus. Maecenas tempor sem sit amet tellus interdum feugiat.

Morbi neque purus, bibendum et pharetra a, porttitor sed turpis. Etiam rutrum, metus at dapibus porttitor, nibh purus ornare orci, nec tempor enim arcu a velit. Nunc pharetra euismod metus, eu porttitor sapien vestibulum vel. Cras scelerisque metus quis ante consequat ornare. Suspendisse sed nunc sit amet quam lacinia varius non non enim.

Image with magic-border floated left. Duis vitae sapien in nisi iaculis lobortis a et dui. Aliquam sodales sollicitudin magna, a iaculis massa pharetra et. Donec gravida vehicula libero, eu dignissim tellus porttitor at. Etiam vel tortor mi, id elementum ante. Suspendisse potenti. Maecenas convallis metus non risus posuere et aliquet purus suscipit. Quisque eleifend, urna sed rutrum ultrices, augue velit mattis sem, in suscipit ante nulla a risus. Maecenas tempor sem sit amet tellus interdum feugiat. Morbi neque purus, bibendum et pharetra a, porttitor sed turpis. Sed mauris massa, auctor a consectetur eu, rutrum a lectus.

Suspendisse non quam enim. Nam elit orci, vestibulum et mattis ullamcorper, venenatis a urna. Donec vel ullamcorper dui. Fusce lacinia sagittis sem, ac viverra risus molestie non. Cras fringilla ultricies feugiat. Donec in velit ligula. Curabitur orci nunc, dictum ac consequat nec, ornare et sem. Morbi hendrerit aliquam tortor, sed convallis sapien bibendum sed. Quisque eleifend

---

Paragraph with blockquote. Morbi neque purus, bibendum et pharetra a, porttitor sed turpis. Etiam rutrum, metus at dapibus porttitor, nibh purus ornare orci, nec tempor enim arcu a velit. Nunc pharetra euismod metus, eu porttitor sapien vestibulum vel. Cras scelerisque metus quis ante consequat ornare. Suspendisse sed nunc sit amet quam lacinia varius non non enim.

Cras scelerisque metus quis ante consequat ornare. Suspendisse sed nunc sit amet quam lacinia varius non non enim. Duis vitae sapien in nisi iaculis lobortis a et dui. Aliquam sodales sollicitudin magna, a iaculis massa pharetra et.

Curabitur orci nunc, dictum ac consequat nec, ornare et sem. Morbi hendrerit aliquam tortor, sed convallis sapien bibendum sed. Quisque eleifend, urna sed rutrum ultrices, augue velit mattis sem, in suscipit ante nulla a risus. Maecenas tempor sem sit amet tellus interdum feugiat.

Headline H1 with small and strong element. ..and sub-heading, a span.

Headline H2 with small and strong element. ..and sub-heading, a span.

Headline H3 with small and strong element. ..and sub-heading, a span.

Headline H4 with small and strong element. ..and sub-heading, a span.

Headline H5 with small and strong element. ..and sub-heading, a span.

Headline H6 with small and strong element. ..and sub-heading, a span.

---

Typography section 2: List shortcodes.

Replace [listdot] with style you want to achieve, example:

[listcheck]
<ul>
    <li>listcheck list item</li>
    <li>listcheck list item</li>
    <li>listcheck list item</li>
</ul>
[/listcheck]

---

Typography section 3: Code elements.

This is code example

ul.bullet-cross li{
	background:url(css/images/bullet-cross.png) no-repeat scroll 0 0.1em transparent;
	padding-left:22px;
}

---

Typography section 4: CSS Buttons.

That is a nice button:

Nice Button

This is nice button inline: Nice Button Inline Other Button Inline

Shortcode example: [nicebutton href="http://www.google.com"]Nice Button[/nicebutton] ,

and: [nicebuttoninline href="http://www.google.com"]Nice Button Inline[/nicebuttoninline]

---

Typography section 5: Warning messages.

[confirmation]This is confirmation message.[/confirmation]

This is confirmation message.

[warning]This is warning message.[/warning]

This is warning message.

[info]This is information message.[/info]

This is information message.

[error]This is error message.[/error]

This is error message.