Web Design Guide

Buttons

** Please remove the space after the btn:**

Click Here

[Click Here](btn: black:http://www.ics.org/)

Click Here

[Click Here](btn: green:http://www.ics.org/)

Click Here

[Click Here](btn: blue:http://www.ics.org/)

Click Here

[Click Here](btn: red:http://www.ics.org/)

Click Here

[Click Here](btn: orange:http://www.ics.org/)

Click Here

[Click Here](btn: :http://www.ics.org/)

Click Here

[Click Here](btn: btn-primary:http://www.ics.org/)

Click Here

[Click Here](btn: btn-inverse:http://www.ics.org/)

Click Here

[Click Here](btn: btn-danger:http://www.ics.org/)

Click Here

[Click Here](btn: btn-warning:http://www.ics.org/)

Click Here

[Click Here](btn: btn-success:http://www.ics.org/)

Click Here

[Click Here](btn: btn-info:http://www.ics.org/)

Contacts

[ contact:5134 ]

[ contact:mini:5134 ]

[ contact:nano:5134 ]

Markdown Basics

Phrase Emphasis

*italic*   **bold**
_italic_   __bold__

Links
Inline:

An [example](http://url.com/ "Title")
Reference-style labels (titles are optional):

An [example][id]. Then, anywhere
else in the doc, define the link:
  [id]: http://example.com/  "Title"

Images
Inline (titles are optional):

![alt text](/path/img.jpg "Title")
Reference-style:

![alt text][id]
[id]: /url/to/img.jpg "Title"
Headers
Setext-style:

Header 1
========
Header 2
--------
atx-style (closing #'s are optional):

# Header 1 #
## Header 2 ##
###### Header 6

Lists
Ordered, without paragraphs:

1.  Foo
2.  Bar

Unordered, with paragraphs:

*   A list item.
    With multiple paragraphs.
*   Bar

You can nest them:

*   Abacus
    * answer
*   Bubbles
    1.  bunk
    2.  bupkis
        * BELITTLER
    3. burper
*   Cunning

Blockquotes
> Email-style angle brackets
> are used for blockquotes.
> > And, they can be nested.
> #### Headers in blockquotes
> 
> * You can quote a list.
> * Etc.
Code Spans
`<code>` spans are delimited
by backticks.
You can include literal backticks
like `` `this` ``.

Preformatted Code Blocks
Indent every line of a code block by at least 4 spaces or 1 tab.

This is a normal paragraph.
    This is a preformatted
    code block.

Horizontal Rules
Three or more dashes or asterisks:

---
* * *
- - - - 

Manual Line Breaks
End a line with two or more spaces:

Roses are red,   
Violets are blue.
Extra Mode
These formatting features are only available when Extra Mode is enabled.
Markdown In Html
Enable markdown in HTML block level elements:

<div markdown="1">
Markdown **still** works.
</div>

Fenced Code Blocks
Code blocks delimited by 3 or more tildas:

\~~~
 This is a preformatted
 code block
\~~~

Header IDs
Set the id of headings with {#<id>} at end of heading line:

## My Heading {#myheading}

Tables
Fruit    |Color
---------|----------
Apples   |Red
Pears	 |Green
Bananas  |Yellow

Definition Lists
Term 1
: Definition 1
Term 2
: Definition 2

Footnotes
Body text with a footnote [^1]
[^1]: Footnote text here

Abbreviations
MDD <- will have title
*[MDD]: MarkdownDeep

ADVANCED USERS : CSS CLASS PROCESSING

ROLES

e.g. for role "Staff"
ics-r-staff hide <-- buttons that are hidden that you want to unhide for staff
xics-r-staff <-- buttons that are visible that you want to hide for staff

COMMITTEES

e.g. for committee "Board of Trustees", CommitteeID=40
ics-c-40 hide <-- buttons that are hidden that you want to unhide for Board of Trustees
xics-c-40 <-- buttons that are visible that you want to hide for Board of Trustees

USERS

e.g. for user "Dominic Turner", UserID=4562
ics-u-4562 hide <-- buttons that are hidden that you want to unhide for Dominic
xics-u-4562 <-- buttons that are visible that you want to hide for Dominic

ANONYMOUS
e.g. for Public Not Signed in
ics-r-public hide <-- buttons that are hidden that you unhide for anonymous
xics-r-public <-- buttons that are visible that you hide for anonymous

Keep me updated