<div class="one_full">
<h2>Buttons with <strong>Icons</strong></h2>
<ul class="list_empty">
<li><a class="but_ok_2" href="#"><i class="fa fa-check fa-lg"> </i> Ok</a></li>
<li><a class="but_wifi" href="#"><i class="fa fa-cloud-upload fa-lg"> </i> Clouds</a></li>
<li><a class="but_warning_sign" href="#"><i class="fa fa-warning fa-lg"> </i> Warning Sign</a></li>
<li><a class="but_user" href="#"><i class="fa fa-user fa-lg"> </i> User</a></li>
<li><a class="but_tag" href="#"><i class="fa fa-tag fa-lg"> </i> Tag</a></li>
<li><a class="but_table" href="#"><i class="fa fa-table fa-lg"> </i> Table</a></li>
<li><a class="but_star" href="#"><i class="fa fa-star fa-lg"> </i> Star</a></li>
<li><a class="but_search" href="#"><i class="fa fa-search fa-lg"> </i> Search</a></li>
<li><a class="but_phone" href="#"><i class="fa fa-phone fa-lg"> </i> Phone</a></li>
<li><a class="but_pencil" href="#"><i class="fa fa-pencil fa-lg"> </i> Pencil</a></li>
<li><a class="but_new_window" href="#"><i class="fa fa-share fa-lg"> </i> New Window</a></li>
<li><a class="but_music" href="#"><i class="fa fa-music fa-lg"> </i> Music</a></li>
<li><a class="but_hand_right" href="#"><i class="fa fa-hand-o-right fa-lg"> </i> Hand Right</a></li>
<li><a class="but_thumbs_down" href="#"><i class="fa fa-thumbs-down fa-lg"> </i> Thumbs Down</a></li>
<li><a class="but_thumbs_up" href="#"><i class="fa fa-thumbs-up fa-lg"> </i> Thumbs Up</a></li>
<li><a class="but_globe" href="#"><i class="fa fa-globe fa-lg"> </i> Globe</a></li>
<li><a class="but_hospital" href="#"><i class="fa fa-hospital fa-lg"> </i> Hospital</a></li>
<li><a class="but_coffe_cup" href="#"><i class="fa fa-coffee fa-lg"> </i> Coffe Cup</a></li>
<li><a class="but_settings" href="#"><i class="fa fa-th-list fa-lg"> </i> Settings</a></li>
<li><a class="but_chat" href="#"><i class="fa fa-comment fa-lg"> </i> Chat</a></li>
<li><a class="but_play_button" href="#"><i class="fa fa-play-circle fa-lg"> </i> Play Button</a></li>
<li><a class="but_remove_2" href="#"><i class="fa fa-times fa-lg"> </i> Remove</a></li>
<li><a class="but_lock" href="#"><i class="fa fa-lock fa-lg"> </i> Lock</a></li>
<li><a class="but_shopping_cart" href="#"><i class="fa fa-shopping-cart fa-lg"> </i> Shopping Cart</a></li>
<li><a class="but_exclamation_mark" href="#"><i class="fa fa-dollar fa-lg"> </i> USD</a></li>
<li><a class="but_info" href="#"><i class="fa fa-info fa-lg"> </i> Info</a></li>
<li><a class="but_question_mark" href="#"><i class="fa fa-question fa-lg"> </i> Question Mark</a></li>
<li><a class="but_minus" href="#"><i class="fa fa-minus fa-lg"> </i> Minus</a></li>
<li><a class="but_plus" href="#"><i class="fa fa-plus fa-lg"> </i> Plus</a></li>
<li><a class="but_folder_open" href="#"><i class="fa fa-folder-open fa-lg"> </i> Folder Open</a></li>
<li><a class="but_file" href="#"><i class="fa fa-file fa-lg"> </i> File</a></li>
<li><a class="but_envelope" href="#"><i class="fa fa-envelope fa-lg"> </i> Envelope</a></li>
<li><a class="but_edit" href="#"><i class="fa fa-edit fa-lg"> </i> Edit</a></li>
<li><a class="but_cogwheel" href="#"><i class="fa fa-cog fa-lg"> </i> Cogwheel</a></li>
<li><a class="but_check" href="#"><i class="fa fa-check fa-lg"> </i> Check</a></li>
<li><a class="but_camera" href="#"><i class="fa fa-camera fa-lg"> </i> Camera</a></li>
<li><a class="but_calendar" href="#"><i class="fa fa-calendar fa-lg"> </i> Calendar</a></li>
<li><a class="but_bookmark" href="#"><i class="fa fa-bookmark fa-lg"> </i> Bookmark</a></li>
<li><a class="but_book" href="#"><i class="fa fa-book fa-lg"> </i> Book</a></li>
<li><a class="but_woman" href="#"><i class="fa fa-quote-left fa-lg"> </i> Quotes</a></li>
<li><a class="but_download" href="#"><i class="fa fa-download fa-lg"> </i> Download</a></li>
</ul>
</div>
<div class="clearfix divider_dashed4"> </div>
<div class="one_full">
<h2>Style <strong>Boxes</strong></h2>
<div class="info">
<div class="message-box-wrap">This is an <strong>Information</strong> Message! - Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</div>
</div>
<div class="success">
<div class="message-box-wrap">This is an <strong>Success</strong> Message! - Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</div>
</div>
<div class="notice">
<div class="message-box-wrap">This is an <strong>Notice</strong> Message! - Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</div>
</div>
<div class="error">
<div class="message-box-wrap">This is an <strong>Error</strong> Message! - Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</div>
</div>
</div>
<!-- end styled boxes -->
<div class="clearfix divider_dashed4"> </div>
<div class="one_full">
<h2>Alternate <strong>Style Boxes</strong></h2>
<div id="div1" class="info">
<div class="message-box-wrap"><button id="colosebut1" class="close-but">close</button> This is an <strong>Information</strong> Message! - Lorem Ipsum, you need to be sure there em Ipsum, you need to be sure there em Ipsum, you need to be sure there em Ipsum, you need to be sure thereem Ipsum, you need to be sure there em Ipsum, you need to be sure there em Ipsum, you need to be sure there em Ipsum, you need to be sure thereisn't anything embarrassing hidden in the middle of text.</div>
</div>
<div id="div2" class="success">
<div class="message-box-wrap"><button id="colosebut2" class="close-but">close</button> This is an <strong>Success</strong> Message! - Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</div>
</div>
<div id="div3" class="notice">
<div class="message-box-wrap"><button id="colosebut3" class="close-but">close</button> This is an <strong>Notice</strong> Message! - Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</div>
</div>
<div id="div4" class="error">
<div class="message-box-wrap"><button id="colosebut4" class="close-but">close</button> This is an <strong>Error</strong> Message! - Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</div>
</div>
</div>
<!-- end alternate styled boxes -->
<div class="clearfix divider_dashed4"> </div>
<div class="one_full">
<h2>Style of <strong>Tables</strong></h2>
<div class="table-style">
<table class="table-list">
<tbody>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th><th>Header 4</th></tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
</tr>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
<td>Content 4</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- end tables -->
<div class="clearfix margin_top7"> </div>