<!--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;
}



.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();
});
</script>

<!--E:Main-->


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

<!--S:Element-->
			<tr>
				<td>{CNT}</td>
				<td width="200"><input type="text" value="{SHORTCODE_PATTERN}" readonly/></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}
<!--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-->