<!--S:Main-->
<style>
.ui-widget-header {
	background: none;
	border-top: 0px;
	border-left: 0px;
	border-right: 0px;
	border-radius: 0px;
}

#shortcodes.ui-widget-content {
	border: 0px;
}



.shortcodesBrowser #ib-search{
	width: 150px;
	padding-left: 5px;
	float: right;
	position: relative;
	top: 7px;
	right: 10px;
}


.shortcodesHolder {
	max-height: 400px;
	overflow: auto;

}



.shortcodesHolder .sign {
	margin-right: 4px!important;
}

.shortcodesHolder pre{
	background: transparent;
}

.shortcodesHolder p{
	text-align: center;
}
.shortcodesHolder p a{
	display: inline!important;
}

.shortcodes-list input{
	width: 100%;
	font-size: 11px;
}

</style>

	<div class="shortcodesBrowser">

		<div id="shortcodes">
			<ul>
				<li><a href="#stabs-0">User-Defined</a></li>
				{SHORTCODES_TITLES}
			</ul>

			<div class="shortcodesHolder">
				{MANUAL}
				{SHORTCODES_CONTENT}
			</div>

		</div>
	</div>

<script>
$(function() {
    $( "#shortcodes" ).tabs();
});

	$(".shortcodesBrowser input").click(function() {    $(this).select(); } );


	$("#ib-search").keyup(function(e) {
		var val = $(this).val().toLowerCase();

		if (val.trim() == "") {
			$("[data-search]").show();
		} else {
			$("[data-search]").each(function(e) {
				var attr = $(this).attr("data-search").toLowerCase();

				if (attr.indexOf(val) != -1) {
					$(this).show();
				} else {
					$(this).hide();
				}
			});
		}
	});

</script>

<!--E:Main-->


<!--S:Group-->
			<div id="stabs-0">
					<table class="table shortcodes-list">
						<thead>
							<tr>
								<td>No.</td>
								<td>Sample</td>
								<td>Devices</td>
							<tr>
						</thead>
						<tbody>
						{DATA}
						</tbody>
					</table>
			</div>
<!--E:Group-->

<!--S:Element-->
			<tr data-search='{SHORTCODE_SAMPLE}'>
				<td>{CNT}</td>
				<td><pre>{SHORTCODE_SAMPLE}</pre></td>
				<td align="center">{DEVICES}</td>
			</tr>
<!--E:Element-->

<!--S:Empty-->
			<tr>
				<td class="empty" colspan="4">There are no widgets defined. <a href="index.php?mod=widgets&sub=landing" target="_blank">Click here</a> to define new widgets.</td>
			</tr>
<!--E:Empty-->


<!--S:TitlesGroup-->
						{DATA}
						<input type="text" id="ib-search" size="10" placeholder="Search"/>
<!--E:TitlesGroup-->

<!--S:TitlesElement-->
						<li><a href="#stabs-{CODE}">{TITLE}</a></li>
<!--E:TitlesElement-->

<!--S:ContentGroup-->
						{DATA}
<!--E:ContentGroup-->

<!--S:ContentElement-->
						<div id="stabs-{CODE}">{HTML}</div>
<!--E:ContentElement-->