causeway-standard-theme
Version:
1,026 lines (984 loc) • 33.5 kB
HTML
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2, minimum-scale=0.25">
<title>Causeway Theme</title>
<!--Favicon-->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/causeway-utils.css" rel="stylesheet" media="screen">
<link href="../css/causeway-standard.css" rel="stylesheet" media="screen">
<link href="../docs/css/docs.css" rel="stylesheet" media="screen">
<link href="../css/causeway-print.css" rel="stylesheet" media="print">
</head>
<body>
<div class="container site-header">
<div class="site-header-holder">
<div class="site-heading">
<div class="site-logo"></div>
<h1 class="page-title">Causeway Style</h1>
<div class="account-management dropdown">
<div class="user-avatar">
<img src="../images/image_placeholder.png">
</div>
<div class="user-info">
<a data-toggle="dropdown" href="#">Hello Guest <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a>Logout</a>
</li>
</ul>
</div>
</div>
</div>
<nav class="navbar site-menu" role="navigation">
<div class="resp-back hidden-lg hidden-md">
<a href="#"><span class="fa fa-chevron-left"></span></a>
<span class="title">MENU</span>
</div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="../docs/index.html#style" data-hover="dropdown"> Style <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/index.html#build"> Build Instructions </a>
</li>
<li>
<a href="../docs/index.html#javascript"> Javascript </a>
</li>
<li>
<a href="../docs/index.html#stylesheets"> Stylesheets </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/shells.html#shells" data-hover="dropdown"> Shells <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="../docs/content.html#content"> Content </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/content.html#content-email"> Emails </a>
</li>
<li>
<a href="../docs/content.html#content-link"> Links </a>
</li>
<li>
<a href="../docs/content.html#content-page-header"> Page Header </a>
</li>
</ul>
</li>
<li>
<a href="../docs/shells.html#footer"> Footer </a>
</li>
<li>
<a href="../docs/shells.html#header"> Header </a>
</li>
<li>
<a href="../docs/left-navigation.html#left-navigation"> Left Navigation </a>
</li>
<li>
<a href="../docs/login.html"> Login page </a>
</li>
<li>
<a href="../docs/shells.html#single-pane"> Single Pane </a>
</li>
<li>
<a href="/docs/twopane-horizontal.html#twopane-horizontal"> Two Pane - Horizontal </a>
</li>
<li>
<a href="../docs/left-navigation-rightpane.html#leftnav-twopane"> Two Pane - Horizontal (Left Navigation Shell) </a>
</li>
<li>
<a href="../docs/twopane-vertical.html#twopane-vertical"> Two Pane - Vertical </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/components.html#components" data-hover="dropdown"> Components <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/accordion.html#accordion"> Accordion </a>
</li>
<li>
<a href="../docs/breadcrumb.html#breadcrumb"> Breadcrumb </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/buttons.html#buttons"> Buttons </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/buttons.html#buttons-arrow"> Arrow Button </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-icon"> Icon Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-multi-action"> Multi-action Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard"> Standard Buttons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-standard-icons"> Standard Buttons with Icons </a>
</li>
<li>
<a href="../docs/buttons.html#buttons-text"> Text Button </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#dialog-box"> Dialog Box </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/forms.html#forms"> Forms </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/forms.html#forms-advanced-listbox"> Advanced Listbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-checkbox"> Checkbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-color"> Color </a>
</li>
<li>
<a href="../docs/forms.html#forms-currency"> Currency </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/date.html#forms-date"> Date </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/date.html#forms-date-range"> Date Range </a>
</li>
<li>
<a href="../docs/date.html#forms-date-single"> Single Date </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-email"> Email </a>
</li>
<li>
<a href="../docs/forms.html#forms-file"> File </a>
</li>
<li>
<a href="../docs/forms.html#forms-hyperlink"> Hyperlink </a>
</li>
<li>
<a href="../docs/forms.html#forms-image"> Image </a>
</li>
<li>
<a href="../docs/forms.html#forms-password"> Password </a>
</li>
<li>
<a href="../docs/forms.html#forms-radio"> Radiobutton </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/select.html#forms-select"> Select </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/select.html#forms-select-multiple"> Multiple Choice </a>
</li>
<li>
<a href="../docs/select.html#forms-select-single"> Single Choice </a>
</li>
</ul>
</li>
<li>
<a href="../docs/forms.html#forms-select-shuttle"> Select Shuttle </a>
</li>
<li>
<a href="../docs/forms.html#spinbox"> Spinbox </a>
</li>
<li>
<a href="../docs/forms.html#forms-telephone"> Telephone </a>
</li>
<li>
<a href="../docs/forms.html#forms-text"> Text </a>
</li>
<li>
<a href="../docs/forms.html#forms-textarea"> Textarea </a>
</li>
<li>
<a href="../docs/forms.html#forms-time"> Time </a>
</li>
<li>
<a href="../docs/forms.html#forms-tristate"> Tristate </a>
</li>
</ul>
</li>
<li>
<a href="../docs/components.html#lightbox"> LightBox </a>
</li>
<li class="dropdown-submenu">
<a href="../docs/menus.html#menus"> Menus </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/menus.html#menus-dropdown"> Dropdown Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-site"> Site Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-dropdown-page"> Page Menu </a>
</li>
<li>
<a href="../docs/menus.html#menus-three-line"> Three Line Menu </a>
</li>
</ul>
</li>
<li>
<a href="../docs/pagination.html#pagination"> Pagination </a>
</li>
<li>
<a href="../docs/site-notification.html#site-notification"> Site Notification </a>
</li>
<li>
<a href="../docs/status-indicator.html#status-indicator"> Status Indicator </a>
</li>
<li>
<a href="../docs/table.html#table"> Table </a>
</li>
<li>
<a href="../docs/components.html#tabstrip"> Tabstrip </a>
</li>
<li>
<a href="../docs/misc.html#tooltip"> Tooltip </a>
</li>
<li>
<a href="../docs/treegrid.html#treegrid"> Tree Grid </a>
</li>
<li>
<a href="../docs/treelist.html#treelist"> Tree List </a>
</li>
<li>
<a href="../docs/treesearchlist.html#treesearchlist"> Tree Search List </a>
</li>
<li>
<a href="../docs/treeview.html#treeview"> Tree View </a>
</li>
<li>
<a href="../docs/wizard.html#wizard"> Wizard </a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="../docs/icons.html#content-icons" data-hover="dropdown"> Icons <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu">
<li>
<a href="../docs/icons.html#favicon"> Favicon and App Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-available"> Available Icons </a>
</li>
<li>
<a href="../docs/icons.html#content-icons-use"> How to use </a>
</li>
</ul>
</li>
<li>
<a href="../docs/color-palette.html#color-palette"> Color Palette </a>
</li>
<li>
<a href="../index.html"> Download </a>
</li>
</ul>
<div class="additional-nav-info">
<ol class="breadcrumb">
<li><a href="#">Causeway LTD</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">Company Name <span class="fa fa-chevron-down"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Sub Company A</a></li>
<li><a href="#">Sub Company B</a></li>
<li><a href="#">Sub Company C</a></li>
<li class="link"><a href="#">More</a></li>
</ul>
</li>
</ol>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-shopping-cart"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="site-notification has-notification">
<a href="#">
<span class="fa fa-bell"></span>
<span class="notification-count">5</span>
</a>
</span>
<span class="cs-badge has-count">
<a href="#">
<span class="fa fa-envelope"></span>
<span class="cs-badge-count">5</span>
</a>
</span>
<span class="additional-menu">
<a href="#" data-toggle="dropdown"> <span class="glyphicon glyphicon-threeLine-menu"></span> </a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Site Map</a></li>
<li><a href="#">Application Sample</a></li>
</ul>
</span>
</div>
</nav>
</div>
</div>
<!--Notification block starts here-->
<section class="notification-content-right">
<div class="notification-content-wrapper">
<div class="notification-header">
<h2>Notifications</h2>
</div>
<div class="notification-content">
<ul>
<li>
<strong>Far far away,</strong> behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
<strong>It is a paradisematic country,</strong>in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
<a href="#">Find out more.</a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Carillion AMBS Limited</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
<li>
You have <strong>One New</strong> Pending Invitation:
<a href="#">Amey Group Services Ltd</a>.
<a href="#" class="close glyphicon glyphicon-close"></a>
</li>
</ul>
</div>
</div>
</section>
<!--Notification block ends here-->
<div class="container page">
<div class="content pane single-pane">
<section>
<a id="buttons"></a>
<header class="content-header">
<h1 class="title">
Buttons
</h1>
<ul class="nav nav-pills">
<li>
<a href="/docs/components/buttons.html#buttons-standard">
Standard Buttons
</a>
</li>
<li>
<a href="/docs/components/buttons.html#buttons-icon">
Icon Buttons
</a>
</li>
<li>
<a href="/docs/components/buttons.html#buttons-standard-icons">
Standard Buttons with Icons
</a>
</li>
<li>
<a href="/docs/components/buttons.html#buttons-text">
Text Button
</a>
</li>
<li>
<a href="/docs/components/buttons.html#buttons-arrow">
Arrow Button
</a>
</li>
<li>
<a href="/docs/components/buttons.html#buttons-multi-action">
Multi-action Buttons
</a>
</li>
</ul>
</header>
</section>
<section>
<a id="buttons-standard"></a>
<header class="content-header">
<h1 class="title">
Standard Buttons
</h1>
</header>
<p>
Buttons comprise of a surround and 2 styles, toggled by an optional attribute. The attribute appears in the opening <code><button></code> tag.
</p>
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<button type="button" class="btn btn-default">
Button
</button>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
disabled
</td>
<td>
disabled
</td>
<td>
<button type="button" class="btn btn-default" disabled="disabled">
Button
</button>
</td>
</tr>
</tbody>
</table>
<pre>
<code>
<button type="button" class="btn btn-default">
<!-- Insert text here -->
</button>
</code>
</pre>
</section>
<section>
<a id="buttons-icon"></a>
<header class="content-header">
<h1 class="title">
Icon Buttons
</h1>
</header>
<p>
Icon buttons comprise of a surround, an icon (see <a href="/docs/shells/content/icons.html#content-icons">Icons</a>) and 2 styles, toggled by an optional attribute. The attribute appears in the opening <code><button></code> tag.
</p>
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<button type="button" class="btn btn-default btn-icon">
<span class="fa fa-search"></span>
</button>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
disabled
</td>
<td>
disabled
</td>
<td>
<button type="button" class="btn btn-default btn-icon" disabled="disabled">
<span class="fa fa-search"></span>
</button>
</td>
</tr>
</tbody>
</table>
<pre>
<code>
<button type="button" class="btn btn-default btn-icon">
<!-- Insert icon here -->
</button>
</code>
</pre>
</section>
<section>
<a id="buttons-standard-icons"></a>
<header class="content-header">
<h1 class="title">
Standard Buttons with Icons
</h1>
</header>
<p>
These buttons comprise of a surround, text, an icon (see <a href="/docs/shells/content/icons.html#content-icons">Icons</a>) and 2 styles, toggled by an optional attribute. The attribute appears in the opening <code><button></code> tag.
</p>
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<button type="button" class="btn btn-default btn-with-icon">
Search
<span class="fa fa-search"></span>
</button>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
disabled
</td>
<td>
disabled
</td>
<td>
<button type="button" class="btn btn-default btn-with-icon" disabled="disabled">
Search
<span class="fa fa-search"></span>
</button>
</td>
</tr>
</tbody>
</table>
<pre>
<code>
<button type="button" class="btn btn-default btn-with-icon">
<!-- Insert text here -->
<span class="fa fa-search"></span>
</button>
</code>
</pre>
</section>
<section>
<a id="buttons-text"></a>
<header class="content-header">
<h1 class="title">
Text Buttons
</h1>
</header>
<p>
Text buttons comprise of a surround and 2 styles, toggled by an optional attribute. The attribute appears in the opening <code><button></code> tag.
</p>
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<button type="button" class="btn btn-text">
Button
</button>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
disabled
</td>
<td>
disabled
</td>
<td>
<button type="button" class="btn btn-text" disabled="disabled">
Button
</button>
</td>
</tr>
</tbody>
</table>
<pre>
<code>
<button type="button" class="btn btn-text">
<!-- Insert text here -->
</button>
</code>
</pre>
</section>
<section>
<a id="buttons-arrow"></a>
<header class="content-header">
<h1 class="title">
Arrow Button
</h1>
</header>
<p>
Arrow buttons comprise of a surround and 2 styles, toggled by an optional attribute. The attribute appears in the opening <code><button></code> tag.
</p>
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<button type="button" class="btn btn-arrow"></button>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
disabled
</td>
<td>
disabled
</td>
<td>
<button type="button" class="btn btn-arrow" disabled="disabled"></button>
</td>
</tr>
</tbody>
</table>
<pre>
<code>
<button type="button" class="btn btn-arrow" disabled="disabled"></button>
</code>
</pre>
</section>
<section>
<a id="buttons-multi-action"></a>
<header class="content-header">
<h1 class="title">
Multi-action Buttons
</h1>
</header>
<p>
Multi-action buttons comprise of a surround, a list of <a href="/docs/components/buttons.html#buttons-standard">standard buttons</a> and 2 styles, toggled by an optional attribute. The attribute appears in both the first and second opening <code><button></code> tags. The lack of whitespace between the closing of the first button tag and the entirity of the second button is necessary to maintain the integrity of the button across all supported browsers.
</p>
<table class="table table-striped">
<thead>
<tr>
<th>
Style
</th>
<th>
Attribute
</th>
<th>
Value
</th>
<th>
Example
</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
Standard
</td>
<td>
</td>
<td>
</td>
<td>
<div class="btn-group btn-dropdown">
<button type="button" class="btn btn-default">
Button
</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-chevron-down"></span></button>
<ul class="dropdown-menu" role="menu">
<li>
<button type="button" class="btn">
Button
</button>
</li>
<li>
<button type="button" class="btn">
Button
</button>
</li>
<li>
<button type="button" class="btn">
Button
</button>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
Disabled
</td>
<td>
disabled
</td>
<td>
disabled
</td>
<td>
<div class="btn-group btn-dropdown">
<button type="button" class="btn btn-default btn-default" disabled="disabled">
Button
</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled"><span class="fa fa-chevron-down"></span></button>
<ul class="dropdown-menu" role="menu">
<li>
<button type="button" class="btn">
Button
</button>
</li>
<li>
<button type="button" class="btn">
Button
</button>
</li>
<li>
<button type="button" class="btn">
Button
</button>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
<pre>
<code>
<div class="btn-group btn-dropdown">
<button type="button" class="btn btn-default">
<!-- Insert text here -->
</button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-chevron-down"></span></button>
<ul class="dropdown-menu" role="menu">
<li>
<button type="button" class="btn">
<!-- Insert text here -->
</button>
</li>
<li>
<button type="button" class="btn">
<!-- Insert text here -->
</button>
</li>
</ul>
</div>
</code>
</pre>
</section>
<section>
<a id="buttons-multi-action"></a>
<header class="content-header">
<h1 class="title">
Button Group
</h1>
</header>
<p>
Group a series of buttons together on a single line with the button group
</p>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<br/>
<br/>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default" disabled="disabled">Right</button>
</div>
<br/>
<br/>
<pre>
<code>
<!-- Button Group -->
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<!-- Button group with a disabled button -->
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default" disabled="disabled">Right</button>
</div>
</code>
</pre>
</section>
</div>
</div>
<div class="container site-footer">
<div class="status-holder">
<div class="status-message"></div>
</div>
<!--<a href="#" class="site-footer-toggle">-->
<!--<span class="fa fa-chevron-down"></span>-->
<!--</a>-->
</div>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/causeway-utils.min.js"></script>
<script src="/js/causeway.js"></script>
<script src="/js/responsive.js"></script>
<script src="/docs/js/docs.js"></script>
<script>
(function(window, $){
var statusHolder = $('.status-message'),
date = new Date();
var message = "Copyright © 1998-" + date.getFullYear() + " Causeway Software Solutions Limited.";
statusHolder.html(message);
}(window, jQuery));
</script>
</body>
</html>