Merge pull request #31 from itslukej/dev

As you wanted

README.md

@@ -1,56 +1,21 @@
 zncstrap
 ========
 
-A simple ZNC Web-Interface theme build with Twitter Bootstrap Framework.
+A simple ZNC Web Interface theme build with Twitter Bootstrap Framework.
 
-###Versions
+This 'dev' (development) branch is mainly for ZNC v.1.7-git or later. 
 
-Note: If you have ZNC version 1.5 or later installed on your machine, kindly direct yourself to the 'dev' branch on this repository. Users who are utilizing ZNC version 1.4 (stable), can go ahead and use this 'master' branch instead. Both branches varies.
+### Update
 
-###Installing zncstrap
+June 11th 2015: Work is in progress. Some bits might not run smoothly (broken) on ZNC v.1.7-git as of now. Hang in there.
 
-Step 1 - Get a latest version of zncstrap. The "master" branch is specifically for ZNC version v1.4, while the "dev" (Development) branch is for ZNC version 1.5 and later. As mentioned above, both branches varies.
-
-Step 2 - We strongly advice you to make backups of your current ZNC setup (config files and folders, just to be on the safe-side) before you proceed to install zncstrap theme. Once you have your backups stored elsewhere (off-site), you can proceed to delete/remove the default theme(s). 
-
-You can do so by pointing to /home/username/znc/share/znc. If you have installed ZNC through a software package manager such as: Advanced Packaging Tool (Apt) or Yellowdog Updater, Modified (yum). You will need to navigate to /usr/local/share/znc/ or /usr/share/znc as the webskins static files resides there (file directries may vary). If all else fails, try using the 'whereis' tool on Linux. You can do so by executing the following command in your terminal / console: whereis znc
-
-Step 3 - Navigate to ~/share/znc/ and delete both files, being 'modules' & 'webskins', as we will no longer be needing them both.
-
-Step 4 - Once it has completely removed, you can now go ahead and upload all zncstrap files in the '~/zncstrap/webskins' folder that you have downloaded from the GitHub repository.
-
-> ~/zncstrap/webskins  <->  ~/znc/share/znc/webskins
-
->  ~/zncstrap/modules  <->  ~/znc/share/znc/modules
-
-Once completed, you're good to go! - Login to your web-interface http://ip:port or http://domain.ltd:port via any of your preferred web browsers.
-
-### FAQ
-
-**Q: Why can't zncstrap work alongside the default ZNC themes itself?**
-
-A: Mainly because the different HTML tags and attributes used in zncstrap, as part of Twitter Bootstrap specifically in "~/znc/share/znc/modules/webadmin/tmpl" (e.g http://git.io/qj8MKg to http://git.io/SofsZg). If it had been left un-edited, it will not be visually pleasing and would be looking all off-margin. As the CSS bits are different and varies. Hence why the default ZNC themes should be removed as it will no longer serve any good when zncstrap is installed.
-
-
-**Q: I installed zncstrap, but it is off-margin and un-styled!**
-
-A: You should overwrite everything from '~/zncstrap/modules' to "~/share/znc/modules" or "/usr/local/share/znc/modules" on your machine.
-
-
-**Q: Which branch is being actively maintained?**
-
-A: The 'dev' branch. As for the 'master' branch, it should work with the stable release, version 1.4 with no hiccups.
-
-
-### Technologies & Scripts
-
-- Twitter Bootstrap version 3
-- jQuery
-- Bootstrap JavaScript tools
-- Bootswatch Themes
-- Divshot Bootstrap Themes
-- Google Charts (Dev Only)
+### To-Do
 
+- The user setings page is way too long. Find a way to make it short yet organized
+- Clean out the codes and align accordingly
+- Swap to a switch-like checkbox
+- Test Google Charts to output traffic data, visually 
+- Tables should be made more responsive, able to view on smaller devices
 
 ### More information and screenshots
 Website: https://firrre.com/zncstrap

modules/blockuser/tmpl/blockuser_WebadminUser.tmpl

@@ -1,5 +1,5 @@
-<div class="checkboxSwitch">
-	<input type="checkbox" name="embed_blockuser_block" id="opt_embed_blockuser_block" value="1"<? IF Blocked ?> checked="checked"<? ENDIF ?><? IF Self ?> disabled="disabled"<? ENDIF ?> />
+<div class="switch">
+	<input type="checkbox" name="embed_blockuser_block" id="opt_embed_blockuser_block" value="1" class="cmn-toggle cmn-toggle-round-flat"<? IF Blocked ?> checked="checked"<? ENDIF ?><? IF Self ?> disabled="disabled"<? ENDIF ?> />
 	<label for="opt_embed_blockuser_block"></label>
 </div>
 		

modules/cert/tmpl/index.tmpl

@@ -1,34 +1,29 @@
 <? INC Header.tmpl ?>
 
-<div class="container">
+<div class="container col-md-10 col-md-offset-1">
 	<div class="panel panel-default">
-		<div class="panel-heading">Cert</div>
+		<div class="panel-heading">Certificate</div>
 			<div class="panel-body">
 				<? IF Cert ?>
-					<p>You already have a certificate set, use the form below to overwrite the current certificate. Alternatively click <a href="<? VAR ModPath ?>delete">here</a> to <a href="<? VAR ModPath ?>delete">delete</a> your certificate.</p>
+					<div class="alert alert-success">You already have a certificate set, use the form below to overwrite the current certificate. Alternatively click <a href="<? VAR URIPrefix TOP ?><? VAR ModPath ?>delete">here</a> to <a href="<? VAR URIPrefix TOP ?><? VAR ModPath ?>delete">delete</a> your certificate.</div>
 				<? ELSE ?>
-					<p>You do not have a cert.</p>
+					<div class="alert alert-danger">You do not have a cert.</div>
 				<? ENDIF ?>
 
-				<form class="form-horizontal" method="post" action="<? VAR ModPath ?>update">
+				<form class="form-horizontal" method="post" action="<? VAR URIPrefix TOP ?><? VAR ModPath ?>update">
 				<? INC _csrf_check.tmpl ?>
-				<h3>Certificate</h3>
-				<hr>
-		
-				<div class="form-group">
-					<label for="inputPEM" class="col-sm-2 control-label">PEM File</label>
+					<div class="form-group">
+					<label for="inputPEM" class="col-sm-2 control-label">PEM File: </label>
 						<div class="col-sm-10">
 							<textarea class="form-control" rows="5" name="cert"></textarea>
 						</div>
-				</div>
-		
-				 
-				<div class="btn-group pull-right">
-					<input class="btn btn-danger" type="reset" value="Reset">
-					<input class="btn btn-success" type="submit" name="add" value="Update" />
-				</div>
-				</form>
+					</div>
 			</div>	
+			<div class="panel-footer text-right">
+				<input class="btn btn-danger" type="reset" value="Reset">
+				<input class="btn btn-success" type="submit" name="add" value="Update" />
+			</div>
+				</form>	
 	</div>
 </div>
 

modules/certauth/tmpl/index.tmpl

@@ -1,14 +1,11 @@
 <? INC Header.tmpl ?>
 
-<div class="container">
+<div class="container col-md-10 col-md-offset-1">
 	<div class="panel panel-default">
-		<div class="panel-heading">Cert Auth</div>
+		<div class="panel-heading">Certauth &mdash; Add A Note</div>
 			<div class="panel-body">
-				<form class="form-horizontal" method="post" action="<? VAR ModPath ?>add">
+				<form class="form-horizontal" method="post" action="<? VAR URIPrefix TOP ?><? VAR ModPath ?>add">
 				<? INC _csrf_check.tmpl ?>
-				<h3>Add A Note</h3>
-				<hr>
-	
 				<div class="form-group">
 					<label for="inputKey" class="col-sm-2 control-label">Key:</label>
 						<div class="col-sm-10">
@@ -16,34 +13,36 @@
 						</div>
 				</div>
 
-				<div class="btn-group pull-right">
-					<input class="btn btn-danger" type="reset" value="Reset">
-					<input class="btn btn-success" type="submit" name="add" value="Add Key" />
-				</div>	
-				</form>
-
 				<? IF !KeyLoop ?>
-					<p>You have no keys.</p>
+					<p class="text-center">You have no keys.</p>
 				<? ELSE ?>
 				
+				<br />
+				
 				<table class="table table-bordered table-hover">
 					<thead>
 						<tr>
-							<td></td>
+							<td>Action</td>
 							<td>Key</td>
 						</tr>
 					</thead>
 					<tbody>
 						<? LOOP KeyLoop ?>
 						<tr>
-							<td>[<a href="<? VAR ModPath ?>delete?key=<? VAR Key ESC=URL,HTML ?>">del</a>]</td>
+							<td><a href="<? VAR ModPath ?>delete?key=<? VAR Key ESC=URL,HTML ?>" class="btn btn-danger btn-xs">Delete</a></td>
 							<td><? VAR Key ?></td>
 						</tr>
-				<? ENDLOOP ?>
+						<? ENDLOOP ?>
 					</tbody>
 				</table>
 				<? ENDIF ?>
 			</div>
+			
+			<div class="panel-footer text-right">
+				<input class="btn btn-danger" type="reset" value="Reset">
+				<input class="btn btn-success" type="submit" name="add" value="Add Key" />
+			</div>	
+			</form>
 	</div>
 </div>
 	

modules/lastseen/tmpl/index.tmpl

@@ -1,6 +1,6 @@
 <? INC Header.tmpl ?>
 
-<div class="container">
+<div class="container col-md-10 col-md-offset-1">
 	<div class="panel panel-default">
 		<div class="panel-heading">Last Seen</div>
 			<div class="panel-body">
@@ -34,9 +34,9 @@
 							<td><? VAR Info ?> <? VAR Ident ?></td>
 							<? IF WebAdminLoaded TOP ?>
 							<td>
-							<a href="/mods/global/webadmin/edituser?user=<?VAR Username ESC=URL?>" class="btn btn-primary btn-xs">Edit</a>
+							<a href="<? VAR URIPrefix TOP ?>/mods/global/webadmin/edituser?user=<?VAR Username ESC=URL?>" class="btn btn-primary btn-xs">Edit</a>
 								<? IF !IsSelf ?>
-									<a href="/mods/global/webadmin/deluser?user=<?VAR Username ESC=URL?>" class="btn btn-danger btn-xs">Delete</a>
+									<a href="<? VAR URIPrefix TOP ?>/mods/global/webadmin/deluser?user=<?VAR Username ESC=URL?>" class="btn btn-danger btn-xs">Delete</a>
 								<? ENDIF ?>
 							</td>
 							<? ENDIF ?>

modules/lastseen/tmpl/lastseen_WebadminUser.tmpl

@@ -1 +1,5 @@
-<h6>Last Login Time: <b><? VAR LastSeen DEFAULT="No Data..." ?></b><h6>
+<div class="form-group">
+		<div class="col-sm-10">
+			<input type="text" class="form-control" id="inputLastseen" name="seen" value="<? VAR LastSeen DEFAULT="No Data..." ?>" disabled>
+		</div>
+</div>

modules/listsockets/tmpl/index.tmpl

@@ -1,6 +1,6 @@
 <? INC Header.tmpl ?>
 
-<div class="container">
+<div class="container col-md-10 col-md-offset-1">
 	<div class="panel panel-default">
 		<div class="panel-heading">Listsockets</div>
 			<div class="panel-body">
@@ -13,6 +13,8 @@
 							<td>SSL</td>
 							<td>Local</td>
 							<td>Remote</td>
+							<td>Data In</td>
+ 							<td>Data Out</td>
 						</tr>
 					</thead>
 					<tbody>
@@ -24,6 +26,8 @@
 							<td><? VAR SSL ?></td>
 							<td><? VAR Local ?></td>
 							<td><? VAR Remote ?></td>
+							<td><? VAR In ?></td>
+ 							<td><? VAR Out ?></td>
 						</tr>
 						<? ENDLOOP ?>
 					</tbody>

modules/notes/tmpl/index.tmpl

@@ -1,13 +1,11 @@
 <? INC Header.tmpl ?>
 
-<div class="container">
+<div class="container col-md-10 col-md-offset-1">
 	<div class="panel panel-default">
-		<div class="panel-heading">Notes</div>
+		<div class="panel-heading">Notes &middot; Add A Note</div>
 			<div class="panel-body">
-				<form class="form-horizontal" method="post" action="<? VAR ModPath ?>addnote">
+				<form class="form-horizontal" method="post" action="<? VAR URIPrefix TOP ?><? VAR ModPath ?>addnote">
 				<? INC _csrf_check.tmpl ?>
-				<h3>Add A Note</h3>
-				<hr>
 
 				<div class="form-group">
 					<label for="inputKey" class="col-sm-2 control-label">Key:</label>
@@ -16,7 +14,6 @@
 						</div>
 				</div>
 
-  
 				<div class="form-group">
 					<label for="inputNote" class="col-sm-2 control-label">Note:</label>
 						<div class="col-sm-10">
@@ -24,38 +21,36 @@
 						</div>
 				</div>
 
-  
-				<div class="btn-group pull-right">
-					<input class="btn btn-danger" type="reset" value="Reset">
-					<input class="btn btn-success" type="submit" name="add" value="Add Note"  />
-				</div>
-				</form>
-
 				<? IF !NotesLoop ?>
-					<p>You have no notes to display.</p>
+					<div class="alert alert-warning">You have no notes to display.</div>
 				<? ELSE ?>
 
 				<table class="table table-bordered table-hover">
 					<thead>
 						<tr>
-							<td></td>
 							<td>Key</td>
 							<td>Note</td>
+							<td>Action</td>
 						</tr>
 					</thead>
 					<tbody>
 						<? LOOP NotesLoop ?>
 						<tr>
-							<td><a href="<? VAR ModPath TOP ?>delnote?key=<? VAR Key ESC=URL,HTML ?>" class="btn btn-danger btn-xs"></a></td>
 							<td><? VAR Key ?></td>
 							<td><? VAR Note ?></td>
+							<td><a href="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>delnote?key=<? VAR Key ESC=URL,HTML ?>" class="btn btn-danger btn-xs">Delete</a></td>
 						</tr>
 						<? ENDLOOP ?>
 					</tbody>
 				</table>
 				<? ENDIF ?>
+				</div>
 
-			</div>
+				<div class="panel-footer text-right">
+					<input class="btn btn-danger" type="reset" value="Reset">
+					<input class="btn btn-success" type="submit" name="add" value="Add Note"  />
+				</div>
+				</form>
 	</div>
 </div>
 

modules/perform/tmpl/index.tmpl

@@ -1,10 +1,10 @@
 <? INC Header.tmpl ?>
 
-<div class="container">
+<div class="container col-md-10 col-md-offset-1">
 	<div class="panel panel-default">
-		<div class="panel-heading">Perform</div>
+		<div class="panel-heading">Perform &middot; Add a Command</div>
 			<div class="panel-body">
-				<form method="post" action="<? VAR ModPath ?>">
+				<form method="post" action="<? VAR URIPrefix TOP ?><? VAR ModPath ?>">
 				<? INC _csrf_check.tmpl ?>
 				
 				<div class="form-group">
@@ -14,13 +14,12 @@
 							<div class="alert alert-info help-block">Commands sent to the IRC server on connect, one per line.</div>
 						</div>
 				</div>
-  
-				<div class="btn-group pull-right">
-					<input class="btn btn-danger" type="reset" value="Reset">
-					<input class="btn btn-success" type="submit" name="save" value="Save" />
-				</div>
-				</form>
 			</div>
+			<div class="panel-footer text-right">
+				<input class="btn btn-danger" type="reset" value="Reset">
+				<input class="btn btn-success" type="submit" name="save" value="Save" />
+			</div>
+				</form>
 	</div>
 </div>
 

modules/q/tmpl/index.tmpl

@@ -0,0 +1,60 @@
+<? INC Header.tmpl ?>
+
+<div class="container col-md-10 col-md-offset-1">
+	<div class="panel panel-default">
+		<div class="panel-heading">Q Network Module</div>
+			<div class="panel-body">
+				<form class="form-horizontal" action="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>" method="post">
+					<? INC _csrf_check.tmpl ?>
+						<div class="form-group">
+							<label for="inputStatusPrefix" class="col-sm-2 control-label">Username:</label>
+								<div class="col-sm-10">
+									<input type="text" class="form-control" name="user" value="<? VAR Username ?>" class="half" maxlength="128" placeholder="Please enter a username" />
+								</div>
+						</div>
+
+						<div class="form-group">
+							<label for="inputStatusPrefix" class="col-sm-2 control-label">Password:</label>
+								<div class="col-sm-10">
+									<input type="text" class="form-control" type="password" name="password" class="half" placeholder="Please enter a password" autocomplete="off" />
+								</div>
+						</div>
+			
+						<div class="row">
+							<div class="col-md-6 col-md-offset-3">
+								<table class="table table-bordered table-hover table-striped">
+									<thead>
+										<tr>
+											<td>Status</td>
+											<td>Settings</td>
+										</tr>
+									</thead>
+									<tbody>	
+									<? LOOP OptionLoop ?>			
+										<tr>
+											<td>
+												<div class="switch" title="<? VAR Tooltip ?>">
+													<input type="checkbox" name="<? VAR Name ?>" id="opt_<? VAR Name ?>" value="1" class="cmn-toggle cmn-toggle-round-flat"<? IF Checked ?> checked="checked"<? ENDIF ?><? IF Disabled ?>disabled="disabled"<? ENDIF ?>"/>
+													<label for="opt_<? VAR Name ?>"></label>
+												</div>
+											</td>
+											<td>
+												<? VAR DisplayName ?>
+											</td>	
+										</tr>
+									<? ENDLOOP ?>
+									</tbody>
+								</table>
+							</div>				
+						</div>	
+			</div>
+						<div class="panel-footer text-right">
+							<input type="hidden" name="submitted" value="1" />
+							<input class="btn btn-danger" type="reset" value="Reset">
+							<input class="btn btn-success" type="submit" value="Save" />
+						</div>
+				</form>				 
+	</div>
+</div>				
+ 
+<? INC Footer.tmpl ?>

modules/sasl/tmpl/index.tmpl

@@ -0,0 +1,140 @@
+<? INC Header.tmpl ?>
+
+<div class="container col-md-10 col-md-offset-1">
+	<div class="panel panel-default">
+		<div class="panel-heading">Simple Authentication and Security Layer (SASL)</div>
+			<div class="panel-body">
+        <form class="form-horizontal" action="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>" method="post">
+				<? INC _csrf_check.tmpl ?>
+
+				<div class="form-group">
+					<label for="inputSASLUsername" class="col-sm-2 control-label">Username:</label>
+						<div class="col-sm-10">
+							<input type="text" class="form-control" id="inputSASLUsername" name="username" maxlength="128" placeholder="Enter a Username">
+						</div>
+				</div>
+
+				<div class="form-group">
+					<label for="inputSASLPassword" class="col-sm-2 control-label">Password:</label>
+						<div class="col-sm-10">
+							<input type="text" class="form-control" id="inputSASLPassword" name="username" placeholder="Enter a Password" autocomplete="off">
+						</div>
+				</div>
+
+				<div class="form-group">
+					<label for="inputSASLUsername" class="col-sm-2 control-label">Connect:</label>
+						<div class="col-sm-10">
+							<div class="switch">
+								<input type="checkbox" name="require_auth" id="opt_require_auth" class="cmn-toggle cmn-toggle-round-flat" value="1"<? IF RequireAuth ?> checked="checked"<? ENDIF ?> />
+								<label for="opt_require_auth"></label>
+								<span class="help-block">Connect only if SASL authentication succeeds. Require authentication</span>
+							</div>
+						</div>
+				</div>
+
+
+
+
+			</div>
+			<div class="panel-footer text-right">
+				<input class="btn btn-danger" type="reset" value="Reset">
+				<input class="btn btn-success" type="submit" name="save" value="Save" />
+			</div>
+				</form>
+	</div>
+</div>
+
+<? INC Footer.tmpl ?>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!--
+	<div class="section">
+		<h3></h3>
+		<div class="sectionbg">
+			<div class="sectionbody">
+				<div class="subsection">
+					<div class="inputlabel">Username:</div>
+					<input type="text" name="username" value="<? VAR Username ?>" class="half" maxlength="128"
+							   title="Please enter a username." />
+				</div>
+				<div class="subsection">
+					<div class="inputlabel">Password:</div>
+					<input type="password" name="password" class="half"
+						   title="Please enter a password." autocomplete="off" />
+				</div>
+			</div>
+		</div>
+		<h3>Options</h3>
+		<div class="sectionbg">
+			<div class="sectionbody lotsofcheckboxes">
+				<span class="checkboxandlabel" title="Connect only if SASL authentication succeeds.">
+					<input type="checkbox" name="require_auth" id="opt_require_auth" value="1"<? IF RequireAuth ?> checked="checked"<? ENDIF ?> />
+					<label for="opt_require_auth">Require authentication</label>
+				</span>
+				<div style="clear:both;"></div>
+			</div>
+		</div>
+	</div>
+
+	<div class="section">
+		<h3>Mechanisms</h3>
+		<div class="sectionbg">
+			<div class="sectionbody">
+				<div class="subsection">
+					<table class="data">
+						<thead>
+							<tr>
+								<td>Name</td>
+								<td>Description</td>
+							</tr>
+						</thead>
+						<tbody>
+							<? LOOP MechanismLoop SORTASC=Name ?>
+							<tr class="<? IF __EVEN__ ?>evenrow<? ELSE ?>oddrow<? ENDIF ?>">
+								<td><? VAR Name ?></td>
+								<td><? VAR Description ?></td>
+							</tr>
+							<? ENDLOOP ?>
+						</tbody>
+					</table>
+				</div>
+				<div class="subsection">
+					<div class="inputlabel">Selected mechanisms and their order:</div>
+					<input type="text" name="mechanisms" id="mechanisms" value="<? VAR Mechanisms ?>" class="half"/>
+					<script>
+					$("#mechanisms").selectize({
+						plugins: ["drag_drop"],
+						delimiter: " ",
+						options: [<? LOOP MechanismLoop SORTASC=Name ?>{value:"<? VAR Name ?>",text:"<? VAR Name ?>"},<? ENDLOOP ?>],
+					});
+					</script>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div style="clear:both;"></div>
+
+	<div class="submitline">
+		<input type="hidden" name="submitted" value="1" />
+		<input type="submit" value="Save" />
+	</div>
+</form>
+-->

modules/send_raw/tmpl/index.tmpl

@@ -1,14 +1,12 @@
 <? ADDROW JSLoop HREF=/modfiles/user/send_raw/select.js ?>
 <? INC Header.tmpl ?>
 
-<div class="container">
+<div class="container col-md-10 col-md-offset-1">
 	<div class="panel panel-default">
-		<div class="panel-heading">Send RAW</div>
+		<div class="panel-heading">Send RAW &middot; Send a raw IRC line</div>
 			<div class="panel-body">
-				<form class="form-horizontal" method="post" action="<? VAR ModPath ?>">
+				<form class="form-horizontal" method="post" action="<? VAR URIPrefix TOP ?><? VAR ModPath ?>">
 				<? INC _csrf_check.tmpl ?>
-				<h3>Send a raw IRC line</h3>
-				<hr>
 				
 				<div class="form-group">
 					<label for="inputUser" class="col-sm-2 control-label">User:</label>
@@ -48,13 +46,13 @@
 						<input type="text" class="form-control" id="inputLine" name="line" value="<? VAR line ?>">
 					</div>
 			</div>
+			</div>
 			
-			<div class="btn-group pull-right">
+			<div class="panel-footer text-right">
 				<input class="btn btn-danger" type="reset" value="Reset">
 				<input class="btn btn-success" type="submit" value="Send" />
 			</div>
 			</form>
-			</div>
 	</div>
 </div>
 	

modules/stickychan/tmpl/index.tmpl

@@ -1,16 +1,16 @@
 <? INC Header.tmpl ?>
 
-<div class="container">
+<div class="container col-md-10 col-md-offset-1">
 	<div class="panel panel-default">
 		<div class="panel-heading">Stickychan</div>
 			<div class="panel-body">
-				<form class="form-horizontal" action="" method="post">
+				<form class="form-horizontal" action="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>" method="post">
 				<? INC _csrf_check.tmpl ?>
 				<table class="table table-bordered table-hover">
 					<thead>
 						<tr>
-							<td>Name</td>
-							<td>Sticky</td>
+							<td>Channel Name</td>
+							<td>Enable / Disable</td>
 						</tr>
 					</thead>
 					<tbody>
@@ -18,8 +18,8 @@
 						<tr>
 							<td><? VAR Name ?></td>
 							<td>
-								<div class="checkboxSwitchMini">
-									<input type="checkbox" id="stick_<? VAR Name ?>" name="stick_<? VAR Name ?>"<? IF Sticky ?> checked="checked"<? ENDIF ?> />
+								<div class="switch">
+									<input type="checkbox" id="stick_<? VAR Name ?>" name="stick_<? VAR Name ?>" class="cmn-toggle cmn-toggle-round-flat"<? IF Sticky ?> checked="checked"<? ENDIF ?> />
 									<label for="stick_<? VAR Name ?>"></label>
 								</div>
 							</td>
@@ -27,14 +27,13 @@
 					<? ENDLOOP ?>
 					</tbody>
 				</table>
-	
-				<div class="btn-group pull-right">
-					<input class="btn btn-danger" type="reset" value="Reset">
-					<input type="hidden" name="submitted" value="1" />
-					<input class="btn btn-success" type="submit" value="Save" />
-				</div>
-				</form>
 			</div>
+			<div class="panel-footer text-right">
+				<input class="btn btn-danger" type="reset" value="Reset">
+				<input type="hidden" name="submitted" value="1" />
+				<input class="btn btn-success" type="submit" value="Save" />
+			</div>
+				</form>
 	</div>
 </div>
 

modules/webadmin/files/webadmin.js

@@ -11,3 +11,133 @@ function floodprotection_change() {
 	}
 }
 
+function serverlist_init($) {
+	function serialize() {
+		var text = "";
+		$("#servers_tbody > tr").each(function() {
+			var host = $(".servers_row_host", $(this)).val();
+			var port = $(".servers_row_port", $(this)).val();
+			var ssl = $(".servers_row_ssl", $(this)).is(":checked");
+			var pass = $(".servers_row_pass", $(this)).val();
+			if (host.length == 0) return;
+			text += host;
+			text += " ";
+			if (ssl) text += "+";
+			text += port;
+			text += " ";
+			text += pass;
+			text += "\n";
+		});
+		$("#servers_text").val(text);
+	}
+	function add_row(host, port, ssl, pass) {
+		var row = $("<tr/>");
+		function delete_row() {
+			row.remove();
+			serialize();
+		}
+		row.append(
+			$("<td/>").append($("<input/>").attr({"type":"text"})
+				.addClass("form-control servers_row_host").val(host)),
+			$("<td/>").append($("<input/>").attr({"type":"number"})
+				.addClass("form-control servers_row_port").val(port)),
+			$("<td/>").append($("<input/>").attr({"type":"checkbox"})
+				.addClass("servers_row_ssl").prop("checked", ssl)),
+			$("<td/>").append($("<input/>").attr({"type":"text"})
+				.addClass("form-control servers_row_pass").val(pass)),
+			$("<td/>").append($("<input/>").attr({"type":"button"})
+				.addClass("btn btn-danger").val("X").click(delete_row))
+		);
+		$("input", row).change(serialize);
+		$("#servers_tbody").append(row);
+	}
+
+	var servers_text = $("#servers_text").val();
+	// Parse it
+	$.each(servers_text.split("\n"), function(i, line) {
+		if (line.length == 0) return;
+		line = line.split(" ");
+		var host = line[0];
+		var port = line[1] || "6667";
+		var pass = line[2] || "";
+		var ssl;
+		if (port.match(/^\+/)) {
+			ssl = true;
+			port = port.substr(1);
+		} else {
+			ssl = false;
+		}
+		add_row(host, port, ssl, pass);
+	});
+	$("#servers_add").click(function() {
+		add_row("", 6697, true, "");
+		// Not serializing, because empty host doesn't emit anything anyway
+	});
+
+	$("#servers_plain").hide();
+	$("#servers_js").show();
+ })();
+}
+
+
+
+/* Broken. Work is in progress... Hang in there cowboy/girl...
+function ctcpreplies_init($) {
+	function serialize() {
+		var text = "";
+		$("#ctcpreplies_tbody > tr").each(function() {
+			var request = $(".ctcpreplies_row_request", $(this)).val();
+			var response = $(".ctcpreplies_row_response", $(this)).val();
+			if (request.length == 0) return;
+			text += request;
+			text += " ";
+			text += response;
+			text += "\n";
+		});
+		$("#ctcpreplies_text").val(text);
+	}
+	function add_row(request, response) {
+		var row = $("<tr/>");
+		function delete_row() {
+			row.remove();
+			serialize();
+		}
+		row.append(
+			$("<td/>").append($("<input/>").val(request)
+				.addClass("ctcpreplies_row_request")
+				.attr({"type":"text","list":"ctcpreplies_list"})),
+			$("<td/>").append($("<input/>").val(response)
+				.addClass("ctcpreplies_row_response")
+				.attr({"type":"text","placeholder":"Empty value means this CTCP request will be ignored"})),
+			$("<td/>").append($("<button/>").val("X")
+				.attr({"type":"button"}).addClass("btn btn-default").click(delete_row))
+		);
+		$("input", row).change(serialize);
+		$("#ctcpreplies_tbody").append(row);
+	}
+
+	(function() {
+		var replies_text = $("#ctcpreplies_text").val();
+		$.each(replies_text.split("\n"), function(i, line) {
+			if (line.length == 0) return;
+			var space = line.indexOf(" ");
+			var request;
+			var response;
+			if (space == -1) {
+				request = line;
+				response = "";
+			} else {
+				request = line.substr(0, space);
+				response = line.substr(space + 1);
+			}
+			add_row(request, response);
+		});
+		$("#ctcpreplies_add").click(function() {
+			add_row("", "");
+		});
+
+		$("#ctcpreplies_plain").hide();
+		$("#ctcpreplies_js").show();
+	})();
+}
+*/

modules/webadmin/tmpl/add_edit_chan.tmpl

@@ -1,51 +1,62 @@
 <? INC Header.tmpl ?>
-<div class="container">
-	<div class="panel panel-default">
-		<div class="panel-heading">Channel Info</div>
-			<div class="panel-body">
-				<form class="form-horizontal" role="form" action="<? IF Edit ?>editchan<? ELSE ?>addchan<? ENDIF ?>" method="post">
-				<? INC _csrf_check.tmpl ?>
-				<div class="section">
-					<input type="hidden" name="submitted" value="1" />
-					<input type="hidden" name="user" value="<? VAR User ?>" />
-					<input type="hidden" name="network" value="<? VAR Network ?>" />
-				<? IF Edit ?>
-					<input type="hidden" name="name" value="<? VAR ChanName ?>" />
-				<? ENDIF ?>
 
-				<? IF !Edit ?>
-					<div class="form-group">
+<form class="form-horizontal" role="form" action="<? IF Edit ?>editchan<? ELSE ?>addchan<? ENDIF ?>" method="post">
+	<? INC _csrf_check.tmpl ?>
+	<div class="section">
+		<input type="hidden" name="submitted" value="1" />
+		<input type="hidden" name="user" value="<? VAR User ?>" />
+		<input type="hidden" name="network" value="<? VAR Network ?>" />
+		<? IF Edit ?>
+			<input type="hidden" name="name" value="<? VAR ChanName ?>" />
+		<? ENDIF ?>
+
+<div class="container col-md-10 col-md-offset-1">
+	<div class="panel with-nav-tabs panel-default">
+        <div class="panel-heading">
+            <ul class="nav nav-tabs">
+                <li class="active"><a href="#chaninfotab" data-toggle="tab">Channel Info</a></li>
+				<li><a href="#flagstab" data-toggle="tab">Flags</a></li>
+				<li><a href="#othermods" data-toggle="tab">More</a></li>
+			</ul>
+        </div>
+
+		<div class="panel-body">
+            <div class="tab-content">
+				<!-- Channel Info -->
+                <div class="tab-pane fade in active" id="chaninfotab">
+					<? IF !Edit ?>
+						<div class="form-group">
 						<label for="inputlabelChanName" class="col-sm-2 control-label">Channel Name:</label>
 							<div class="col-sm-10">
 								<input class="form-control" id="inputlabelChanName" type="text" name="name" value="" placeholder="The channel name.">
 							</div>
-					</div>
-				<? ENDIF ?>
+						</div>
+					<? ENDIF ?>
 
-					<div class="form-group">
+						<div class="form-group">
 						<label for="inputlabelKey" class="col-sm-2 control-label">Key:</label>
 							<div class="col-sm-10">
 								<input type="test" class="form-control" id="inputlabelKey" name="key" value="<? VAR Key ?>" placeholder="The password of the channel, if there is one.">
 							</div>
-					</div>
+						</div>
   
-					<div class="form-group">
+						<div class="form-group">
 						<label for="inputlabelBufferCount" class="col-sm-2 control-label">Buffer Count:</label>
 							<div class="col-sm-10">
 								<input class="form-control" id="inputlabelBufferCount" type="number" name="buffercount" value="<? VAR BufferCount ?>" size="10" min="0" placeholder="The buffer count.">
 							</div>
-					</div>
+						</div>
   
-				<div class="form-group">
+					<div class="form-group">
 					<label for="inputDefaultModes" class="col-sm-2 control-label">Default Modes:</label>
 						<div class="col-sm-10">
 							<input type="text" class="form-control" id="inputDefaultModes" name="defmodes" value="<? VAR DefModes ?>" size="10" placeholder="The default modes of the channel.">
 						</div>
-				</div>				 
+					</div>				 
+				</div> <!-- Channel Info -->
 				
-				<h3>Flags</h3> 
-				<hr>
-				<div class="row">
+				<!-- Flags -->
+				<div class="tab-pane fade" id="flagstab">
 					<div class="col-md-6 col-md-offset-3">
 						<table class="table table-bordered table-hover table-striped">
 							<thead>
@@ -56,35 +67,40 @@
 							</thead>
 							<tbody>
 								<tr>
-									<td><div class="checkboxSwitch"><input type="checkbox" name="save" id="save" value="true"<? IF InConfig ?> checked="checked"<? ENDIF ?> /> <label for="save"></label> </div></td>
+									<td><div class="switch"><input type="checkbox" name="save" id="save" class="cmn-toggle cmn-toggle-round-flat" value="true"<? IF InConfig ?> checked="checked"<? ENDIF ?> /> <label for="save"></label> </div></td>
 									<td>Save to config</td>
 								</tr>
 								<? LOOP OptionLoop ?>
 								<tr>
-									<td><div class="checkboxSwitch"><input type="checkbox" name="<? VAR Name ?>" id="opt_<? VAR Name ?>" value="true"<? IF Checked ?> checked="checked"<? ENDIF ?><? IF Disabled ?> disabled="disabled"<? ENDIF ?> /> <label for="opt_<? VAR Name ?>"></label> </div></td>
+									<td><div class="switch"><input type="checkbox" name="<? VAR Name ?>" id="opt_<? VAR Name ?>" class="cmn-toggle cmn-toggle-round-flat" value="true"<? IF Checked ?> checked="checked"<? ENDIF ?><? IF Disabled ?> disabled="disabled"<? ENDIF ?> /> <label for="opt_<? VAR Name ?>"></label> </div></td>
 									<td><? VAR DisplayName ?></td>		 
 								</tr>
 								<? ENDLOOP ?>	
 							</tbody>
 						</table>
 					</div>
-				</div>		
+				</div> <!-- Flags -->	
 	
-	<? LOOP EmbeddedModuleLoop ?>
-		<? IF Embed ?>
-		<div class="section">
-			<h3>Module <? VAR ModName ?></h3>
-			<? INC *Embed ?>
+			<!-- Other Modules -->
+			<div class="tab-pane fade" id="othermods">
+			<? LOOP EmbeddedModuleLoop ?>
+				<? IF Embed ?>
+					<h3>Module <? VAR ModName ?></h3>
+					<? INC *Embed ?>
+				<? ENDIF ?>
+			<? ENDLOOP ?>			
+			</div> <!-- Other Modules -->	
 		</div>
-		<? ENDIF ?>
-	<? ENDLOOP ?>
-	
-	<div class="btn-group pull-right">
-		<input class="btn btn-danger" type="reset" value="Reset">
-		<input class="btn btn-success" type="submit" value="<? IF Edit ?>Save<? ELSE ?>Add Channel<? ENDIF ?>" />
 	</div>
-			</form>
-		</div>
+	
+	<div class="panel-footer text-right">
+		<input class="btn btn-danger" type="reset" value="Reset">
+		<input class="btn btn-success"type="submit" name="submit_return" value="<? IF Edit ?>Save<? ELSE ?>Add Channel<? ENDIF ?>" />
+ 		<input class="btn btn-default"type="submit" name="submit_continue" value="<? IF Edit ?>Save and continue<? ELSE ?>Save and continue<? ENDIF ?>" />
+	</div>
+			
+		
 	</div>
 </div>
+</form>
 <? INC Footer.tmpl ?>

modules/webadmin/tmpl/add_edit_network.tmpl

@@ -1,56 +1,68 @@
 <? AddRow JSLoop HREF=/modfiles/global/webadmin/webadmin.js ?>
 <? INC Header.tmpl ?>
-<div class="container">
-	<div class="panel panel-default">
-		<div class="panel-heading">Network Info</div>
-			<div class="panel-body">
+
+<form class="form-horizontal" role="form" action="<? IF Edit ?>editnetwork<? ELSE ?>addnetwork<? ENDIF ?>" method="post">
+	<? INC _csrf_check.tmpl ?>
+	<div class="section">
+		<input type="hidden" name="submitted" value="1" />
+		<input type="hidden" name="user" value="<? VAR Username ?>" />
+		<input type="hidden" name="network" value="<? VAR Name ?>" />
+
+<div class="container col-md-10 col-md-offset-1">
+	<div class="panel with-nav-tabs panel-default">
+		<div class="panel-heading">
+			<ul class="nav nav-tabs">
+				<li class="active"><a href="#netinfotab" data-toggle="tab">Network Info</a></li>
+				<li><a href="#floodprotab" data-toggle="tab">Flood Protection</a></li>
+				<li><a href="#charencodetab" data-toggle="tab">Character Encoding</a></li>
+				<li><a href="#channelstab" data-toggle="tab">Channels</a></li>
+                <li><a href="#modulestab" data-toggle="tab">Modules</a></li>
+            </ul>
+        </div>
+		<div class="panel-body">
+            <div class="tab-content">
+				<!-- Network Info -->
+				<div class="tab-pane fade in active" id="netinfotab">
 				<div class="alert alert-warning">To connect to this network from your IRC client, you can set the server password field as follows: <code><? VAR Username ?>/<? IF Edit ?><? VAR Name ?><? ELSE ?>&lt;network&gt;<? ENDIF ?>:&lt;password&gt;</code> or username field as <code><? VAR Username ?>/<? IF Edit ?><? VAR Name ?><? ELSE ?>&lt;network&gt;<? ENDIF ?></code></div>
-			<form class="form-horizontal" role="form" action="<? IF Edit ?>editnetwork<? ELSE ?>addnetwork<? ENDIF ?>" method="post">
-			<? INC _csrf_check.tmpl ?>
-			<div class="section">
-				<input type="hidden" name="submitted" value="1" />
-				<input type="hidden" name="user" value="<? VAR Username ?>" />
-				<? IF Edit ?><input type="hidden" name="network" value="<? VAR Name ?>" /><? ENDIF ?>
 				<div class="alert alert-info">Nick, AltNick, Ident, RealName, BindHost can be left empty to use the value from the user.</div>
-			<? IF !Edit ?>
-			<div class="form-group">
+
+				<div class="form-group">
 				<label for="inputNetworkName" class="col-sm-2 control-label">Network Name:</label>
 					<div class="col-sm-10">
-						<input type="text" class="form-control" id="inputNetworkName" name="network" value="<? VAR Name ?>" maxlength="20" placeholder="The name of the IRC network.">
+						<input type="text" class="form-control" id="inputNetworkName" name="name" value="<? VAR Name ?>" maxlength="20" placeholder="The name of the IRC network">
 					</div>
-			</div>
-			<? ENDIF ?>			 
+				</div>
 
-			<div class="form-group">
+				<div class="form-group">
 				<label for="inputNickname" class="col-sm-2 control-label">Nickname:</label>
 					<div class="col-sm-10">
 						<input type="text" class="form-control" id="inputNickname" name="nick" value="<? VAR Nick ?>" maxlength="30" placeholder="Your nickname on IRC.">
 					</div>
-			</div>
+				</div>
 
-			<div class="form-group">
+				<div class="form-group">
 				<label for="inputAltNickname" class="col-sm-2 control-label">Alt. Nickname:</label>
 					<div class="col-sm-10">
 						<input type="text" class="form-control" id="AltNickname" name="altnick" value="<? VAR AltNick ?>" maxlength="30" placeholder="Your secondary nickname, if the first is not available on IRC.">
 					</div>
-			</div>
+				</div>
 
-			<div class="form-group">
+				<div class="form-group">
 				<label for="inputIdent" class="col-sm-2 control-label">Ident:</label>
 					<div class="col-sm-10">
 						<input type="text" class="form-control" id="inputIdent" name="ident" value="<? VAR Ident ?>" maxlength="30" placeholder="Your ident.">
 					</div>
-			</div>
+				</div>
 
-			<div class="form-group">
+				<div class="form-group">
 				<label for="inputRealname" class="col-sm-2 control-label">Realname:</label>
 					<div class="col-sm-10">
 						<input type="text" class="form-control" id="inputRealname" name="realname" value="<? VAR RealName ?>" maxlength="128" placeholder="Your real name.">
 					</div>
-			</div>
+				</div>
 
-			<? IF BindHostEdit ?>
-			<div class="form-group">
+				<? IF BindHostEdit ?>
+				<div class="form-group">
 				<label for="inputBindHost" class="col-sm-2 control-label">BindHost:</label>
 					<div class="col-sm-10">
 					<? IF BindHostLoop ?>
@@ -64,106 +76,170 @@
 						<input class="form-control" type="text" name="bindhost" value="<? VAR BindHost ?>"/>
 					<? ENDIF ?>
 					</div>
-			</div>
-			<? ENDIF ?>
+				</div>
+				<? ENDIF ?>
 
-			<div class="form-group">
+				<div class="form-group">
+				<label for="inputQuit" class="col-sm-2 control-label">Quit Message:</label>
+					<div class="col-sm-10">
+						<input type="text" class="form-control" id="inputQuit" name="quitmsg" value="<? VAR QuitMsg ?>" maxlength="256" placeholder="You may define a Message shown, when you quit IRC.">
+					</div>
+				</div>
+
+				<div class="form-group">
 				<label for="inputActive" class="col-sm-2 control-label">Active:</label>
 					<div class="col-sm-10">
-						<div class="checkboxSwitch">
-							<input type="checkbox" value="1" name="doconnect" id="doconnect_checkbox"<? IF IRCConnectEnabled ?> checked="checked"<? ENDIF ?> />
+						<div class="switch">
+							<input type="checkbox" value="1" name="doconnect" class="cmn-toggle cmn-toggle-round-flat" id="doconnect_checkbox"<? IF IRCConnectEnabled ?> checked="checked"<? ENDIF ?> />
 							<label for="doconnect_checkbox"></label>
 							<span class="help-block">Connect to IRC &amp; automatically re-connect</span>
 						</div>
 					</div>
-			</div>			
+				</div>
 
-			<div class="form-group">
+				<div class="form-group" id="servers_plain">
 				<label for="inputServers" class="col-sm-2 control-label">Servers of this IRC network:</label>
 					<div class="col-sm-10">
-						<textarea class="form-control" name="servers" rows="5"><? LOOP ServerLoop ?><? VAR Server ?><? ENDLOOP ?></textarea>
+						<textarea class="form-control" name="servers" cols="70" rows="5" id="servers_text"><? LOOP ServerLoop ?><? VAR Server ?>
+<? ENDLOOP ?></textarea>
 						<span class="help-block">One server per line, "host [[+]port] [password]", + means SSL</span>
+						<br/>
 					</div>
-			</div>	
+				</div>
 
+				<div class="form-group" id="servers_js" style="display:none">
+				<label for="inputServers" class="col-sm-2 control-label">Servers of this IRC network:</label>
+					<div class="col-sm-10">
+						<table class="table table-hover">
+							<thead>
+								<tr>
+									<th>Hostname</th>
+									<th>Port</th>
+									<th>SSL</th>
+									<th>Password</th>
+									<th/>
+								</tr>
+							</thead>
+							<tbody id="servers_tbody">
+							<tr>
+							</tr>
+							</tbody>
+						</table>
+							<button type="button" class="btn btn-default" value="Add" id="servers_add">Add New Server</button>
+					</div>
+				</div>
+				<script type="text/javascript">serverlist_init(jQuery);</script>
 
-			<h3>Flood Protection</h3>
-			<hr>
+				<div class="form-group">
+				<label for="inputTrustedSSL" class="col-sm-2 control-label">Trusted SSL fingerprints of this IRC network:</label>
+					<div class="col-sm-10">
+						<textarea class="form-control" name="fingerprints" rows="3"><? LOOP TrustedFingerprints ?><? VAR FP ?>
+<? ENDLOOP ?></textarea>
+						<span class="help-block">When these certificates are encountered, checks for hostname, expiration date, CA are skipped</span>
+					</div>
+				</div>
+			</div> <!-- Network Info -->
 
-			<div class="form-group">
+			 <!-- Flood Protection -->
+			<div class="tab-pane fade" id="floodprotab">
+				<div class="form-group">
 				<label for="inputFloodpro" class="col-sm-2 control-label">Flood protection:</label>
 					<div class="col-sm-10">
-						<div class="checkboxSwitch">
-							<input type="checkbox" name="floodprotection" id="floodprotection_checkbox" placeholder="You might enable the flood protection. This prevents `excess flood' errors, which occur, when your IRC bot is command flooded or spammed." onchange="floodprotection_change();" <? IF FloodProtection ?>checked="checked"<? ENDIF ?> />
+						<div class="switch">
+							<input type="checkbox" name="floodprotection" id="floodprotection_checkbox" class="cmn-toggle cmn-toggle-round-flat" onchange="floodprotection_change();" <? IF FloodProtection ?>checked="checked"<? ENDIF ?> />
 							<label for="floodprotection_checkbox"></label>
+							<span class="help-block">You might enable the flood protection. This prevents `excess flood' errors, which occur, when your IRC bot is command flooded or spammed. After changing this, reconnect ZNC to server</span>
 						</div>
 					</div>
-			</div>	 
+				</div>
 
-			<div class="form-group">
+				<div class="form-group">
 				<label for="inputFloodproRate" class="col-sm-2 control-label">Flood protection rate:</label>
 					<div class="col-sm-10">
-						<input class="form-control" type="number" name="floodrate" min="0.3" step="0.05" id="floodrate" placeholder="The number of seconds per line." <? IF FloodProtection ?> value="<? VAR FloodRate ?>" <? ELSE ?> value="1.00" disabled="disabled" <? ENDIF ?> /> seconds per line
+						<input class="form-control" type="number" name="floodrate" min="0.3" step="0.05" id="floodrate" placeholder="The number of seconds per line." <? IF FloodProtection ?> value="<? VAR FloodRate ?>" <? ELSE ?> value="1.00" disabled="disabled" <? ENDIF ?> />
+						<span class="help-block">The number of seconds per line. After changing this, reconnect ZNC to server</span>
 					</div>
-			</div>			
+				</div>
 
 
-			<div class="form-group">
+				<div class="form-group">
 				<label for="inputFloodproBurst" class="col-sm-2 control-label">Flood protection burst:</label>
 					<div class="col-sm-10">
-						<input type="number" class="form-control" name="floodburst" min="1" id="inputFloodproBurst floodburst" placeholder="Defines the number of lines, which can be sent immediately." <? IF FloodProtection ?> value="<? VAR FloodBurst ?>" <? ELSE ?> value="4" disabled="disabled" <? ENDIF ?> /> lines can be sent immediately
+						<input type="number" class="form-control" name="floodburst" min="1" id="inputFloodproBurst floodburst" <? IF FloodProtection ?> value="<? VAR FloodBurst ?>" <? ELSE ?> value="4" disabled="disabled" <? ENDIF ?> />
+						<span class="help-block">Defines the number of lines, which can be sent immediately. After changing this, reconnect ZNC to server</span>
 					</div>
-			</div>			
+				</div>
 
-			<script type="text/javascript">floodprotection_change();</script>
+				<div class="form-group">
+				<label for="inputChanjoindelay" class="col-sm-2 control-label">Channel join delay:</label>
+					<div class="col-sm-10">
+						<input type="number" class="form-control" name="joindelay" min="0" id="inputChanjoindelay joindelay" value="<? VAR JoinDelay ?>" />
+						<span class="help-block">Defines the delay in seconds, until channels are joined after getting connected</span>
+					</div>
+				</div>
 
-			<h3>Channels</h3>
-			<hr>
+				<script type="text/javascript">floodprotection_change();</script>
+			</div> <!-- Flood Protection -->
 
-			<? IF !Edit ?>
-				<span class="info">You will be able to add + modify channels here after you created the network.</span><br />
-			<? ELSE ?>
-			<table class="table table-bordered table-hover table-striped">
-				<thead>
-					<tr>
-						<td><a href="addchan?user=<? VAR Username ESC=URL ?>&amp;network=<? VAR Name ESC=URL ?>" class="btn btn-primary btn-xs">Add</a></td>
-						<? IF ChannelLoop ?>
-						<td>Save</td>
-						<td>Name</td>
-						<td>CurModes</td>
-						<td>DefModes</td>
-						<td>BufferCount</td>
-						<td>Options</td>
-						<? ELSE ?>
-						<td>&lt;- Add a channel (opens in same page)</td>
-			<? ENDIF ?>
-					</tr>
-				</thead>
-				<tbody>
-					<? LOOP ChannelLoop SORTASC=Name ?>
-					<tr>
-						<td>
-							<input type="hidden" name="channel" value="<? VAR Name ?>" /> <a href="editchan?user=<? VAR Username ESC=URL ?>&amp;network=<? VAR Network ESC=URL ?>&amp;name=<? VAR Name ESC=URL ?>" class="btn btn-warning btn-xs">Edit</a> <a href="delchan?user=<? VAR Username ESC=URL ?>&amp;network=<? VAR Network ESC=URL ?>&amp;name=<? VAR Name ESC=URL ?>" class="btn btn-danger btn-xs">Del</a> 
-						</td>
-						<td>
-							<div class="checkboxSwitchMini">
-								<input type="checkbox" name="save_<? VAR Name ?>"<? IF InConfig ?> checked="checked"<? ENDIF ?> />
-								<label for="save_<? VAR Name ?>"></label>
-							</div>
-						</td>
-						<td><? VAR Name ?></td>
-						<td><? VAR CurModes ?></td>
-						<td><? VAR DefModes ?></td>
-						<td><? VAR BufferCount ?></td>
-						<td><? VAR Options ?></td>
-					</tr>
-					<? ENDLOOP ?>
-				</tbody>
-			</table>
-			<? ENDIF ?>
 
-			<h3>Modules</h3>
-			<hr>
+			 <!-- Server Encoding -->
+			<div class="tab-pane fade" id="charencodetab">
+				<div class="form-group">
+					<label for="inputChanencode" class="col-sm-2 control-label">Server encoding:</label>
+						<div class="col-sm-10">
+							<? INC encoding_settings.tmpl ?>
+						</div>
+				</div>
+			</div> <!-- Server Encoding -->
+
+			<!-- Channels -->
+			<div class="tab-pane fade" id="channelstab">
+				<? IF !Edit ?>
+					<span class="info">You will be able to add + modify channels here after you created the network.</span><br />
+				<? ELSE ?>
+				<table class="table table-bordered table-hover table-striped">
+					<thead>
+						<tr>
+							<td><a href="addchan?user=<? VAR Username ESC=URL ?>&amp;network=<? VAR Name ESC=URL ?>" class="btn btn-primary btn-xs">Add</a></td>
+							<? IF ChannelLoop ?>
+							<td>Save</td>
+							<td>Name</td>
+							<td>CurModes</td>
+							<td>DefModes</td>
+							<td>BufferCount</td>
+							<td>Options</td>
+							<? ELSE ?>
+							<td>&lt;- Add a channel (opens in same page)</td>
+							<? ENDIF ?>
+						</tr>
+					</thead>
+					<tbody>
+						<? LOOP ChannelLoop SORTASC=Name ?>
+						<tr>
+							<td>
+								<input type="hidden" name="channel" value="<? VAR Name ?>" /> <a href="editchan?user=<? VAR Username ESC=URL ?>&amp;network=<? VAR Network ESC=URL ?>&amp;name=<? VAR Name ESC=URL ?>" class="btn btn-warning btn-xs">Edit</a> <a href="delchan?user=<? VAR Username ESC=URL ?>&amp;network=<? VAR Network ESC=URL ?>&amp;name=<? VAR Name ESC=URL ?>" class="btn btn-danger btn-xs">Del</a>
+							</td>
+							<td class="text-center">
+								<div class="switch">
+									<input type="checkbox" name="save_<? VAR Name ?>" class="cmn-toggle cmn-toggle-round-flat"<? IF InConfig ?> checked="checked"<? ENDIF ?> />
+									<label for="save_<? VAR Name ?>"></label>
+								</div>
+							</td>
+							<td><? VAR Name ?></td>
+							<td><? VAR CurModes ?></td>
+							<td><? VAR DefModes ?></td>
+							<td><? VAR BufferCount ?></td>
+							<td><? VAR Options ?></td>
+						</tr>
+						<? ENDLOOP ?>
+					</tbody>
+				</table>
+				<? ENDIF ?>
+			</div> <!-- Channels -->
+
+
+			<!-- Modules -->
+			<div class="tab-pane fade" id="modulestab">
 			<table class="table table-bordered table-hover table-striped">
 				<thead>
 					<tr>
@@ -171,14 +247,16 @@
 						<td>Name</td>
 						<td>Arguments</td>
 						<td>Description</td>
+						<td>Global</td>
+						<td>Networks</td>
 					</tr>
 				</thead>
 				<tbody>
 				<? LOOP ModuleLoop ?>
 					<tr>
 						<td>
-							<div class="checkboxSwitch">
-								<input type="checkbox" name="loadmod" id="lm_<? VAR Name ?>" value="<? VAR Name ?>"<? IF Checked ?> checked="checked"<? ENDIF ?><? IF Disabled ?> disabled="disabled"<? ENDIF ?> />
+							<div class="switch">
+								<input type="checkbox" name="loadmod" id="lm_<? VAR Name ?>" class="cmn-toggle cmn-toggle-round-flat" value="<? VAR Name ?>"<? IF Checked ?> checked="checked"<? ENDIF ?><? IF Disabled ?> disabled="disabled"<? ENDIF ?> />
 								<label for="lm_<? VAR Name ?>"></label>
 							</div>
 						</td>
@@ -191,29 +269,51 @@
 							<? ELSE ?>
 							<input class="form-control" class="third" type="text" name="modargs_<? VAR Name ?>" value="<? VAR Args ?>"
 							<? IF !HasArgs ?> disabled="disabled"<? ENDIF ?>
-							<? IF ArgsHelpText ?> data-toggle="tooltip" data-placement="top" data-original-title="<? VAR ArgsHelpText ?>"<? ENDIF ?> />
+							<? IF ArgsHelpText ?> data-toggle="tooltip" data-placement="top" data-original-title="<? VAR ArgsHelpText ?>"<? ENDIF ?> autocomplete="off"/>
 							<? ENDIF ?>
 						</td>
 						<td><? VAR Description ?></td>
+						<td>
+							<? IF CanBeLoadedGlobally ?>
+								<div class="checkboxSwitchMini">
+									<input type="checkbox" name="loaded_globally" id="loaded_globally_<? VAR Name ?>" value="<? VAR Name ?>"<? IF LoadedGloabally?> checked="checked"  <? ENDIF ?> class="sr-only" disabled="disabled" /> <? ENDIF ?>
+									<label for="loaded_globally_<? VAR Name ?>"></label>
+								</div>
+							<? ENDIF ?>
+						</td>
+						<td>
+							<? IF CanBeLoadedByUser ?>
+								<div class="checkboxSwitchMini">
+									<input type="checkbox" name="loaded_by_user" id="loaded_by_user_<? VAR Name ?>" value="<? VAR Name ?>"<? IF LoadedByUser ?> checked="checked"  <? ENDIF ?> class="sr-only" disabled="disabled" /> <? ENDIF ?>
+									<label for="loaded_by_user_<? VAR Name ?>"></label>
+								</div>
+							<? ENDIF ?>
+						</td>
 					</tr>
 				<? ENDLOOP ?>
 				</tbody>
 			</table>
+			</div> <!-- Modules -->
 
-	<? LOOP EmbeddedModuleLoop ?>
-		<? IF Embed ?>
-			<h3>Module <? VAR ModName ?></h3>
-			<? INC *Embed ?>
-		<? ENDIF ?>
-	<? ENDLOOP ?>
-
-	<div class="btn-group pull-right">
-		<input class="btn btn-danger" type="reset" value="Reset">
-		<input class="btn btn-success" type="submit" value="<? IF Edit ?>Save<? ELSE ?>Add Network<? ENDIF ?>" />
-	</div>
-				</form>
+			<!-- Other Modules -->
+			<div class="tab-pane fade" id="othermods">
+			<? LOOP EmbeddedModuleLoop ?>
+				<? IF Embed ?>
+					<h3>Module <? VAR ModName ?></h3>
+					<? INC *Embed ?>
+				<? ENDIF ?>
+			<? ENDLOOP ?>
+			</div> <!-- Other Modules -->
 			</div>
 		</div>
-	</div>
 
+			<div class="panel-footer text-right">
+				<input class="btn btn-danger" type="reset" value="Reset">
+				<input class="btn btn-success" type="submit" name="submit_return" value="<? IF Edit ?>Save<? ELSE ?>Save Network<? ENDIF ?>" />
+				<input class="btn btn-default" type="submit" name="submit_continue" value="<? IF Edit ?>Save and continue<? ELSE ?>Save and continue<? ENDIF ?>" />
+			</div>
+
+	</div>
+</div>
+</form>
 <? INC Footer.tmpl ?>

modules/webadmin/tmpl/add_edit_user.tmpl

@@ -1,17 +1,41 @@
 <? INC Header.tmpl ?>
-<div class="container">
-	<div class="panel panel-default">
-		<div class="panel-heading">Edit User</div>
-			<div class="panel-body">
-				<form class="form-horizontal" action="<? IF Edit ?>edituser<? ELSE ?>adduser<? ENDIF ?>" method="post">
-				<? INC _csrf_check.tmpl ?>
-					<div class="section">
-					<input type="hidden" name="submitted" value="1" />
+<form class="form-horizontal" action="<? IF Edit ?>edituser<? ELSE ?>adduser<? ENDIF ?>" method="post">
+	<? INC _csrf_check.tmpl ?>
+	<input type="hidden" name="submitted" value="1" />
 
-				<h3>Authentication</h3>
-				<hr>
+<div class="container col-md-10 col-md-offset-1">
+	<div class="panel with-nav-tabs panel-default">
+        <div class="panel-heading">
+            <ul class="nav nav-tabs">
+                <li class="active"><a href="#authtab" data-toggle="tab">Authentication</a></li>
+                <li><a href="#ircinformationtab" data-toggle="tab">IRC Information</a></li>
+                <li class="hidden-xs"><a href="#networkstab" data-toggle="tab">Networks</a></li>
+				<li class="hidden-xs"><a href="#modulestab" data-toggle="tab">Modules</a></li>
+				<li class="hidden-xs hidden-sm"><a href="#defaultsettingstab" data-toggle="tab">Default Settings</a></li>
+				<li class="hidden-xs hidden-sm"><a href="#flagstab" data-toggle="tab">Flags</a></li>
+				<li class="hidden-xs hidden-sm"><a href="#zncbehavetab" data-toggle="tab">ZNC Behavior</a></li>
+				<li class="hidden-xs hidden-sm"><a href="#othermodtab" data-toggle="tab">Other Modules</a></li>
+				<li class="dropdown hidden-lg hidden-md">
+					<a href="#" data-toggle="dropdown">More <span class="caret"></span></a>
+                        <ul class="dropdown-menu" role="menu">
+							<li class="hidden-sm"><a href="#networkstab" data-toggle="tab">Networks</a></li>
+							<li class="hidden-sm"><a href="#modulestab" data-toggle="tab">Modules</a></li>
+							<li><a href="#defaultsettingstab" data-toggle="tab">Default Settings</a></li>
+							<li><a href="#flagstab" data-toggle="tab">Flags</a></li>
+							<li><a href="#zncbehavetab" data-toggle="tab">ZNC Behavior</a></li>
+                            <li><a href="#othermodtab" data-toggle="tab">Other Modules</a></li>
+                        </ul>
+                </li>
+            </ul>
+        </div>
 
-				<div class="form-group">
+        <div class="panel-body">
+            <div class="tab-content">
+				<!--Authentication -->
+                <div class="tab-pane fade in active" id="authtab">
+
+
+					<div class="form-group">
 					<label for="inputUsername" class="col-sm-2 control-label">Username:</label>
 						<div class="col-sm-10">
 						<? IF Clone ?>
@@ -22,79 +46,78 @@
 							<input type="hidden" class="form-control" id="inputUsername" name="user" value="<? VAR Username ?>" autocomplete="off" />
 							<input type="text" class="form-control" id="inputUsername" name="newuser" value="<? VAR Username ?>" disabled="disabled" />
 						<? ELSE ?>
-							<input type="text" class="form-control" id="inputUsername" name="user" value="<? VAR Username ?>" placeholder="Please enter a username." autocomplete="off" />
+							<input type="text" class="form-control" id="inputUsername" name="user" value="<? VAR Username ?>" placeholder="Enter a username" autocomplete="off" />
 						<? ENDIF ?>
 						</div>
-				</div>
+					</div>
 
-  
-				<div class="form-group">
+					<div class="form-group">
 					<label for="inputPassword" class="col-sm-2 control-label">Password:</label>
 						<div class="col-sm-10">
-							<input type="password" class="form-control" id="inputPassword" name="password" placeholder="Please enter a password." autocomplete="off">
+							<input type="password" class="form-control" id="inputPassword" name="password" placeholder="Enter a secure password" autocomplete="off">
 						</div>
-				</div>
+					</div>
 
-				<div class="form-group">
+					<div class="form-group">
 					<label for="inputPassword2" class="col-sm-2 control-label">Confirm Password:</label>
 						<div class="col-sm-10">
-							<input type="password" class="form-control" id="inputPassword2" name="password2" placeholder="Please re-type the above password." autocomplete="off">
+							<input type="password" class="form-control" id="inputPassword2" name="password2" placeholder="Re-type the password">
 						</div>
-				</div>
+					</div>
 
 
-				<div class="form-group">
+					<div class="form-group">
 					<label for="inputAllowedIP" class="col-sm-2 control-label">Allowed IPs:</label>
 						<div class="col-sm-10">
 							<textarea class="form-control class="form-control" data-provide="markdown" id="inputAllowedIP" name="allowedips" cols="70" rows="5"><? LOOP AllowedHostLoop ?><? VAR Host ?><? ENDLOOP ?></textarea>
 							<div class="alert alert-info help-block">Leave empty to allow connections from all IPs. Otherwise, one entry per line, wildcards * and ? are available.</div>
 						</div>
-				</div>		
+					</div>
+				</div><!-- Authentication -->
 
-				<h3>IRC Information</h3>
-				<hr>
-		
-				<? IF !Edit ?>
+				<!-- IRC Information -->
+				<div class="tab-pane fade" id="ircinformationtab">
+ 				<? IF !Edit ?>
 					<div class="alert alert-info">Nick, AltNick, Ident, RealName and QuitMsg can be left empty to use default values.</div>
 				<? ENDIF ?>
 
-				<div class="form-group">
+					<div class="form-group">
 					<label for="inputNickname" class="col-sm-2 control-label">Nickname:</label>
 						<div class="col-sm-10">
 							<input type="text" class="form-control" id="inputNickname" name="nick" value="<? VAR Nick ?>" maxlength="30" placeholder="This will be your nickname on IRC.">
 						</div>
-				</div>
+					</div>
 
-				<div class="form-group">
+					<div class="form-group">
 					<label for="inputaltNickname" class="col-sm-2 control-label">Alt. Nickname</label>
 						<div class="col-sm-10">
 							<input type="text" class="form-control" id="inputaltNickname" name="altnick" value="<? VAR AltNick ?>" maxlength="128" placeholder="If the nickname above is not available anymore, then this will be your nickname on IRC.">
 						</div>
-				</div>
+					</div>
 
-				<div class="form-group">
+					<div class="form-group">
 					<label for="inputIdent" class="col-sm-2 control-label">Ident:</label>
 						<div class="col-sm-10">
 							<input type="text" class="form-control" id="inputIdent" name="ident" value="<? VAR Ident ?>" maxlength="128" placeholder="The Ident identifies you as one specific user of your host.">
 						</div>
-				</div>
+					</div>
 
-				<div class="form-group">
+					<div class="form-group">
 					<label for="inputStatusPrefix" class="col-sm-2 control-label">StatusPrefix:</label>
 						<div class="col-sm-10">
 							<input type="text" class="form-control" id="inputStatusPrefix" name="statusprefix" value="<? VAR StatusPrefix ?>" maxlength="5" placeholder="This defines the prefix for the status and module queries.">
 						</div>
-				</div>
+					</div>
 
-				<div class="form-group">
+					<div class="form-group">
 					<label for="inputRealname" class="col-sm-2 control-label">Realname:</label>
 						<div class="col-sm-10">
 							<input type="text" class="form-control" id="inputRealname" name="realname" value="<? VAR RealName ?>" maxlength="256" placeholder="The real name of the user.">
 						</div>
-				</div>
+					</div>
 
-				<? IF BindHostEdit ?>
-				<div class="form-group">
+					<? IF BindHostEdit ?>
+					<div class="form-group">
 					<label for="inputBindHost" class="col-sm-2 control-label">BindHost:</label>
 						<div class="col-sm-10">
 						<? IF BindHostLoop ?>
@@ -106,10 +129,10 @@
 							<input class="form-control" type="text" name="bindhost" value="<? VAR BindHost ?>"/>
 						<? ENDIF ?>
 						</div>
-				</div>
-				<? ENDIF ?>
+					</div>
+					<? ENDIF ?>
 
-				<div class="form-group">
+					<div class="form-group">
 					<label for="inputDCCBindHost" class="col-sm-2 control-label">DCCBindHost:</label>
 						<div class="col-sm-10">
 						<? IF DCCBindHostLoop ?>
@@ -121,227 +144,312 @@
 							<input type="text" class="form-control" name="dccbindhost" value="<? VAR DCCBindHost ?>"/>
 						<? ENDIF ?>
 						</div>
-				</div>
+					</div>
 
-				<div class="form-group">
+					<div class="form-group">
 					<label for="inputQuit" class="col-sm-2 control-label">Quit Message:</label>
 						<div class="col-sm-10">
 							<input type="text" class="form-control" id="inputQuit" name="quitmsg" value="<? VAR QuitMsg ?>" maxlength="256" placeholder="You may define a Message shown, when you quit IRC.">
 						</div>
-				</div>
+					</div>
+				</div> <!-- IRC Information -->
 
-		<h3>Networks</h3>
-		<hr>
-		
-		<? IF Edit ?>
-		<table class="table table-bordered table-hover table-striped">
-			<thead>
-				<tr>
-					<td><a href="addnetwork?user=<? VAR Username ESC=URL ?>" class="btn btn-default btn-xs">Add</a></td>
-					<? IF NetworkLoop ?>
-					<td>Name</td>
-					<td>Clients</td>
-					<td>Current Server</td>
-					<td>IRC Nick</td>
-					<? ELSE ?>
-					<td>&lt;- Add a network (opens in same page)</td>
-					<? ENDIF ?>
-				</tr>
-			</thead>
-			<tbody>
-				<? LOOP NetworkLoop SORTASC=Name ?>
-				<tr class="<? IF __EVEN__ ?>evenrow<? ELSE ?>oddrow<? ENDIF ?>">
-					<td>
-						<input type="hidden" name="network" value="<? VAR Name ?>" />
-						<a href="editnetwork?user=<? VAR Username ESC=URL ?>&amp;network=<? VAR Name ESC=URL ?>" class="btn btn-primary btn-xs">Edit</a> <a href="delnetwork?user=<? VAR Username ESC=URL ?>&amp;name=<? VAR Name ESC=URL ?>" class="btn btn-danger btn-xs">Delete</a>
-					</td>
-					<td><? VAR Name ?></td>
-					<td><? VAR Clients ?></td>
-					<td><? VAR Server DEFAULT="-N/A-" ?></td>
-					<td><? VAR IRCNick ?></td>
-				</tr>
-				<? ENDLOOP ?>
-			</tbody>
-		</table>
-     	<? ELSE ?>
-			<span class="info">You will be able to add + modify networks here after you <? IF Clone ?>have cloned<? ELSE ?>created<? ENDIF ?> the user.</span><br />
-		<? ENDIF ?>
-		
-
-		<h3>Modules</h3>
-		<hr>
-	
-		<table class="table table-bordered table-hover table-striped">
-			<thead>
-				<tr>
-					<td>Status</td>
-					<td>Name</td>
-					<td>Arguments</td>
-					<td>Description</td>
-				</tr>
-			</thead>
-			<tbody>
-				<? LOOP ModuleLoop ?>
-				<tr>
-					<td>
-						<div class="checkboxSwitch">
-							<input type="checkbox" name="loadmod" id="lm_<? VAR Name ?>" value="<? VAR Name ?>"<? IF Checked ?> checked="checked"<? ENDIF ?><? IF Disabled ?> disabled="disabled"<? ENDIF ?> />
-							<label for="lm_<? VAR Name ?>"></label>
-						</div>
-					</td>
-					<td>
-						<label for="lm_<? VAR Name ?>"> <? IF Wiki ?><a href="http://wiki.znc.in/<? VAR Wiki ?>" target="_blank"><? VAR Name ?></a> <? ELSE ?> <? VAR Name ?> <? ENDIF ?></label>
-					</td>
-					<td>
-						<? IF Disabled ?>
-						<? VAR Args ?>
-						<? ELSE ?>
-						<input class="third form-control" type="text" name="modargs_<? VAR Name ?>" value="<? VAR Args ?>"
-						<? IF !HasArgs ?> disabled="disabled"<? ENDIF ?>
-						<? IF ArgsHelpText ?> data-toggle="tooltip" data-placement="top" data-original-title="<? VAR ArgsHelpText ?>"<? ENDIF ?> />
-						<? ENDIF ?>
-						</td>
-						<td><? VAR Description ?></td>
-				</tr>
-				<? ENDLOOP ?>
-			</tbody>
-		</table>
- 
-		<h3>Default Settings For New Future Channels</h3>
-		<hr>
-	
-		<div class="form-group">
-			<label for="inputModes" class="col-sm-2 control-label">Modes:</label>
-				<div class="col-sm-10">
-					<input type="text" class="form-control" id="inputModes" name="chanmodes" value="<? VAR DefaultChanModes ?>" maxlength="32" placeholder="These are the default modes ZNC will set when you join an empty channel.">
-					<div class="alert alert-info help-block">Empty = use standard value</div>
-				</div>
-		</div>
-  
-		<div class="form-group">
-			<label for="inputBufferSize" class="col-sm-2 control-label">Buffer Size:</label>
-				<div class="col-sm-10">
-					<input type="text" class="form-control" id="inputBufferSize" name="bufsize" value="<? VAR BufferCount ?>" min="0" placeholder="This is the amount of lines that the playback buffer will store before dropping off the oldest line. The buffers are stored in the memory by default." />
-					<div class="alert alert-info help-block">Empty = use standard value</div>
-				</div>
-		</div>
-  
-		<h3>Flags</h3>
-		<hr>
-				
-		<div class="row">
-			<div class="col-md-6 col-md-offset-3">
+				<!-- Networks -->
+				<div class="tab-pane fade" id="networkstab">
+				<? IF Edit ?>
 				<table class="table table-bordered table-hover table-striped">
 					<thead>
 						<tr>
-							<td>Status</td>
-							<td>Flag Title</td>
+							<td><a href="addnetwork?user=<? VAR Username ESC=URL ?>" class="btn btn-default btn-xs">Add</a></td>
+							<? IF NetworkLoop ?>
+							<td>Name</td>
+							<td>Clients</td>
+							<td>Current Server</td>
+							<td>IRC Nick</td>
+							<? ELSE ?>
+							<td>&lt;- Add a network (opens in same page)</td>
+							<? ENDIF ?>
 						</tr>
 					</thead>
 					<tbody>
-						<? LOOP OptionLoop ?>		
+						<? LOOP NetworkLoop SORTASC=Name ?>
 						<tr>
 							<td>
-								<div class="checkboxSwitch">
-									<input type="checkbox" name="<? VAR Name ?>" id="opt_<? VAR Name ?>" value="1"<? IF Checked ?> checked="checked"<? ENDIF ?><? IF Disabled ?> disabled="disabled"<? ENDIF ?> />
-									<label for="opt_<? VAR Name ?>"></label>
-								</div>
-							</td>
-							<td>
-								<b><? VAR DisplayName ?></b>
+								<input type="hidden" name="network" value="<? VAR Name ?>" />
+								<a href="editnetwork?user=<? VAR Username ESC=URL ?>&amp;network=<? VAR Name ESC=URL ?>" class="btn btn-primary btn-xs">Edit</a> <a href="delnetwork?user=<? VAR Username ESC=URL ?>&amp;name=<? VAR Name ESC=URL ?>" class="btn btn-danger btn-xs">Delete</a>
 							</td>
+							<td><? VAR Name ?></td>
+							<td><? VAR Clients ?></td>
+							<td><? VAR Server DEFAULT="-N/A-" ?></td>
+							<td><? VAR IRCNick ?></td>
 						</tr>
 						<? ENDLOOP ?>
 					</tbody>
 				</table>
-			</div>
-		</div>
-				
-		<h3>ZNC Behavior</h3>
-		<hr>
-		<div class="alert alert-info help-block">Any of the following text boxes can be left empty to use their default value.</div>
-	
-		<div class="form-group">
-			<label for="inputtimeFormat" class="col-sm-2 control-label">Timestamp Format:</label>
-				<div class="col-sm-10">
-					<input type="text" class="form-control" id="inputtimeFormat" name="timestampformat" value="<? VAR TimestampFormat ?>" placeholder="The format for the timestamps used in buffers, for example [%H:%M:%S]." />
-				</div>
-		</div>
-	
-		<div class="form-group">
-			<label for="inputTimezone" class="col-sm-2 control-label">Timezone:</label>
-				<div class="col-sm-10">
-					<input class="form-control" id="inputTimezone" name="timezone" value="<? VAR Timezone ?>" placeholder="Select your timezone.">
-					<div class="alert alert-info help-block">E.g. <b>Europe/Berlin</b> or <b>GMT-6</b></div>
-				</div>
-		</div>
-					
-		<div class="form-group">
-			<label for="inputJoinTries" class="col-sm-2 control-label">Join Tries:</label>
-				<div class="col-sm-10">
-					<input class="form-control" type="number" id="inputJoinTries" name="jointries" value="<? VAR JoinTries ?>" min="0" placeholder="This defines how often ZNC tries to join, if the first join failed, e.g. due to channel mode +i/+k or if you're banned."/>
-				</div>
-		</div>		 
-					
-		<div class="form-group">
-			<label for="inputMaxJoins" class="col-sm-2 control-label">Max Joins:</label>
-				<div class="col-sm-10">
-					<input class="form-control" type="number" id="inputMaxJoins" name="maxjoins" value="<? VAR MaxJoins ?>" min="0" placeholder="How many channels are joined in one JOIN command. 0 is unlimited (default). Set to small positive value if you get disconnected with `Max SendQ Exceeded'"/>
-				</div>
-		</div>		 
-				
-		<div class="form-group">
-			<label for="inputmaxIRCnet" class="col-sm-2 control-label">Max IRC Networks Number:</label>
-				<div class="col-sm-10">
-					<input class="form-control" type="number" id="inputmaxIRCnet" name="maxnetworks" value="<? VAR MaxNetworks ?>" min="0" placeholder="Maximum number of IRC networks allowed for this user." <? IF !ImAdmin ?>disabled="disabled"<? ENDIF ?> />
-				</div>
-		</div>		
-				
-		<div class="form-group">
-			<label for="inputCTCPreplies" class="col-sm-2 control-label">CTCP Replies:</label>
-				<div class="col-sm-10">
-					<textarea class="form-control" id="inputCTCPreplies" name="ctcpreplies" cols="70" rows="3"><? LOOP CTCPLoop ?><? VAR CTCP ?><? ENDLOOP ?></textarea>
-					<div class="alert alert-info help-block">One reply per line. Example: TIME Buy a watch!</div>
-				</div>
-		</div>
-		 
-		<div class="form-group">
-			<label for="input..." class="col-sm-2 control-label">Skin(s):</label>
-				<div class="col-sm-10">
-					<? IF SkinLoop ROWS > 1 ?>
-					<select class="form-control" name="skin">
-						<option value="">- Global -</option>
-							<? LOOP SkinLoop ?>
-								<option value="<? VAR Name ?>"<? IF Checked ?> selected="selected"<? ENDIF ?>><? IF Name == "_default_" ?>Default<? ELSE ?><? VAR Name ?><? ENDIF ?></option>
-							<? ENDLOOP ?>
-					</select>
 					<? ELSE ?>
-					<p>No other skins found!</p>
+						<span class="info">You will be able to add + modify networks here after you <? IF Clone ?>have cloned<? ELSE ?>created<? ENDIF ?> the user.</span><br />
 					<? ENDIF ?>
+				</div><!-- Networks -->
+
+				<!-- Modules -->
+				<div class="tab-pane fade" id="modulestab">
+				<table class="table table-bordered table-hover table-striped">
+					<thead>
+						<tr>
+							<td>Status</td>
+							<td>Name</td>
+							<td>Arguments</td>
+							<td>Description</td>
+							<td>Global</td>
+							<td>Networks</td>
+						</tr>
+					</thead>
+					<tbody>
+						<? LOOP ModuleLoop ?>
+						<tr>
+							<td>
+								<div class="switch">
+									<input type="checkbox" name="loadmod" id="lm_<? VAR Name ?>" value="<? VAR Name ?>" class="cmn-toggle cmn-toggle-round-flat" value="<? VAR Name ?>"<? IF Checked ?> checked="checked"<? ENDIF ?><? IF Disabled ?> disabled="disabled"<? ENDIF ?> />
+									<label for="lm_<? VAR Name ?>"></label>
+								</div>
+							</td>
+							<td>
+								<label for="lm_<? VAR Name ?>"> <? IF Wiki ?><a href="http://wiki.znc.in/<? VAR Wiki ?>" target="_blank"><? VAR Name ?></a> <? ELSE ?> <? VAR Name ?> <? ENDIF ?></label>
+							</td>
+							<td>
+								<? IF Disabled ?>
+								<? VAR Args ?>
+								<? ELSE ?>
+								<input class="third form-control" type="text" name="modargs_<? VAR Name ?>" value="<? VAR Args ?>"
+								<? IF !HasArgs ?> disabled="disabled"<? ENDIF ?>
+								<? IF ArgsHelpText ?> data-toggle="tooltip" data-placement="top" data-original-title="<? VAR ArgsHelpText ?>"<? ENDIF ?> />
+								<? ENDIF ?>
+							</td>
+							<td><? VAR Description ?></td>
+							<td>
+								<? IF CanBeLoadedGlobally ?>
+									<div class="checkboxSwitchMini">
+										<input type="checkbox" name="loaded_globally" id="loaded_globally_<? VAR Name ?>" value="<? VAR Name ?>"<? IF LoadedGloabally?> checked="checked"  <? ENDIF ?> class="sr-only" disabled="disabled" /> <? ENDIF ?>
+										<label for="loaded_globally_<? VAR Name ?>"></label>
+									</div>
+								<? ENDIF ?>
+							</td>
+							<td>
+								<? IF CanBeLoadedByNetwork ?>
+									<div class="checkboxSwitchMini">
+										<input type="checkbox" name="loaded_by_network" id="loaded_by_net_<? VAR Name ?>" value="<? VAR Name ?>"<? IF LoadedByAllNetworks ?> checked="checked"  <? ENDIF ?> class="sr-only" disabled="disabled" /> <? ENDIF ?>
+										<label for="loaded_by_net_<? VAR Name ?>"></label>
+									</div>
+									<? IF LoadedBySomeNetworks && !LoadedByAllNetworks ?>
+										<script type="text/javascript">document.getElementById("loaded_by_net_<? VAR Name ?>").indeterminate = true;</script>
+								<? ENDIF ?>
+							</td>
+						</tr>
+					<? ENDLOOP ?>
+					</tbody>
+				</table>
+				</div> <!-- Modules -->
+
+				<!-- Default Settings -->
+				<div class="tab-pane fade" id="defaultsettingstab">
+					<div class="form-group">
+					<label for="inputModes" class="col-sm-2 control-label">Channel Modes:</label>
+						<div class="col-sm-10">
+							<input type="text" class="form-control" id="inputModes" name="chanmodes" value="<? VAR DefaultChanModes ?>" maxlength="32" placeholder="These are the default modes ZNC will set when you join an empty channel.">
+							<div class="alert alert-info help-block">Empty = use standard value</div>
+						</div>
+					</div>
+
+					<div class="form-group">
+					<label for="inputBufferSize" class="col-sm-2 control-label">Buffer Size:</label>
+						<div class="col-sm-10">
+							<input type="text" class="form-control" id="inputBufferSize" name="bufsize" value="<? VAR BufferCount ?>" min="0" placeholder="This is the amount of lines that the playback buffer will store before dropping off the oldest line. The buffers are stored in the memory by default." />
+							<div class="alert alert-info help-block">Empty = use standard value</div>
+						</div>
+					</div>
+				</div> <!-- Default Settings -->
+
+				<!-- Flags -->
+				<div class="tab-pane fade" id="flagstab">
+				<div class="row">
+					<div class="col-md-6 col-md-offset-3">
+						<table class="table table-bordered table-hover table-striped">
+							<thead>
+								<tr>
+									<td>Status</td>
+									<td>Flag Title</td>
+								</tr>
+							</thead>
+							<tbody>
+								<? LOOP OptionLoop ?>
+								<tr>
+									<td>
+										<div class="switch">
+											<input type="checkbox" name="<? VAR Name ?>" id="opt_<? VAR Name ?>" class="cmn-toggle cmn-toggle-round-flat" value="1"<? IF Checked ?> checked="checked"<? ENDIF ?><? IF Disabled ?> disabled="disabled"<? ENDIF ?> />
+											<label for="opt_<? VAR Name ?>"></label>
+										</div>
+									</td>
+									<td><b><? VAR DisplayName ?></b></td>
+								</tr>
+								<? ENDLOOP ?>
+							</tbody>
+						</table>
+					</div>
 				</div>
-		</div>
+				</div> <!-- Flags -->
 
-		<? LOOP EmbeddedModuleLoop ?>
-		<? IF Embed ?>
-		<h3>Module <? VAR ModName ?></h3>
-		<hr>
+				<!-- ZNC Behavior -->
+				<div class="tab-pane fade" id="zncbehavetab">
+				<div class="alert alert-info help-block">Any of the following text boxes can be left empty to use their default value.</div>
+					<div class="form-group">
+					<label for="inputtimeFormat" class="col-sm-2 control-label">Timestamp Format:</label>
+						<div class="col-sm-10">
+							<input type="text" class="form-control" id="inputtimeFormat" name="timestampformat" value="<? VAR TimestampFormat ?>" placeholder="The format for the timestamps used in buffers, for example [%H:%M:%S]." />
+							<div class="alert alert-info help-block">This setting is ignored in new IRC clients, which use server-time. If your client supports server-time, change timestamp format in client settings instead.</div>
+						</div>
+					</div>
 
-		<div class="form-group">
-			<label for="input<? VAR ModName ?>" class="col-sm-2 control-label"><? VAR ModName ?>:</label>
-				<div class="col-sm-10">
-					<? INC *Embed ?>
-				</div>
-		</div>
-		<? ENDIF ?>
-		<? ENDLOOP ?>
+					<div class="form-group">
+					<label for="inputTimezone" class="col-sm-2 control-label">Timezone:</label>
+						<div class="col-sm-10">
+							<input class="form-control" id="inputTimezone" name="timezone" value="<? VAR Timezone ?>" placeholder="Select your timezone.">
+							<div class="alert alert-info help-block">E.g. <b>Europe/Berlin</b> or <b>GMT-6</b></div>
+						</div>
+					</div>
+
+
+					<div class="form-group">
+					<label for="inputClientencode" class="col-sm-2 control-label">Client encoding:</label>
+						<div class="col-sm-10">
+							<? INC encoding_settings.tmpl ?>
+							<span class="help-block">Character encoding used between IRC client and ZNC. After changing this, reconnect client to ZNC</span>
+						</div>
+					</div>
+
+
+
+					<div class="form-group">
+					<label for="inputJoinTries" class="col-sm-2 control-label">Join Tries:</label>
+						<div class="col-sm-10">
+							<input class="form-control" type="number" id="inputJoinTries" name="jointries" value="<? VAR JoinTries ?>" min="0" placeholder="This defines how often ZNC tries to join, if the first join failed, e.g. due to channel mode +i/+k or if you're banned."/>
+						</div>
+					</div>
+
+					<div class="form-group">
+					<label for="inputMaxJoins" class="col-sm-2 control-label">Max Joins:</label>
+						<div class="col-sm-10">
+							<input class="form-control" type="number" id="inputMaxJoins" name="maxjoins" value="<? VAR MaxJoins ?>" min="0" placeholder="How many channels are joined in one JOIN command. 0 is unlimited (default). Set to small positive value if you get disconnected with `Max SendQ Exceeded'"/>
+						</div>
+					</div>
+
+					<div class="form-group">
+					<label for="inputmaxIRCnet" class="col-sm-2 control-label">Max IRC Networks Number:</label>
+						<div class="col-sm-10">
+							<input class="form-control" type="number" id="inputmaxIRCnet" name="maxnetworks" value="<? VAR MaxNetworks ?>" min="0" placeholder="Maximum number of IRC networks allowed for this user." <? IF !ImAdmin ?>disabled="disabled"<? ENDIF ?> />
+						</div>
+					</div>
+
+					<div class="form-group">
+					<label for="inputmaxQueryBuffers" class="col-sm-2 control-label">Max Query Buffers:</label>
+						<div class="col-sm-10">
+							<input class="form-control" type="number" id="inputmaxQueryBuffers" name="maxquerybuffers" value="<? VAR MaxQueryBuffers ?>" class="third" min="0" placeholder="Maximum number of query buffers. 0 is unlimited."/>
+						</div>
+					</div>
+
+					<!-- Broken. Work is in progress... Hang in there cowboy/girl...
+					<div class="form-group" id="ctcpreplies_plain">
+					<label for="inputCTCPreplies" class="col-sm-2 control-label">CTCP Replies:</label>
+						<div class="col-sm-10">
+							<textarea class="form-control" id="inputCTCPreplies" name="ctcpreplies" cols="70" rows="3" id="ctcpreplies_text"><? LOOP CTCPLoop ?><? VAR CTCP ?>
+<? ENDLOOP ?></textarea>
+							<div class="alert alert-info help-block">One reply per line. Example: TIME Buy a watch!</div>
+						</div>
+					</div>
+
+					<div class="form-group" id="ctcpreplies_js">
+						<label for="inputCTCPreplies" class="col-sm-2 control-label">CTCP Replies:</label>
+						<div class="col-sm-10">
+							<table class="table table-hover">
+								<thead>
+									<tr>
+										<th>Request</th>
+										<th>Response</th>
+									</tr>
+								</thead>
+								<tbody id="ctcpreplies_tbody">
+								</tbody>
+							</table>
+							<select class="form-control" id="ctcpreplies_list">
+								<option value="PING">PING</option>
+								<option value="FINGER">FINGER</option>
+								<option value="CLIENTINFO">CLIENTINFO</option>
+								<option value="USERINFO">USERINFO</option>
+								<option value="VERSION">VERSION</option>
+								<option value="SOURCE">SOURCE</option>
+								<option value="TIME">TIME</option>
+								<option value="PAGE">PAGE</option>
+								<option value="DCC">DCC</option>
+								<option value="UPTIME">UPTIME</option>
+							</select>
+							<button type="button" class="btn btn-default" value="Add" id="ctcpreplies_add">Add</button>
+						</div>
+					</div>
+					<script type="text/javascript">ctcpreplies_init(jQuery);</script>
+			  	-->
+
+					<div class="form-group">
+					<label for="inputCTCPreplies" class="col-sm-2 control-label">CTCP Replies:</label>
+						<div class="col-sm-10">
+							<textarea class="form-control" id="inputCTCPreplies" name="ctcpreplies" cols="70" rows="3"><? LOOP CTCPLoop ?><? VAR CTCP ?>
+<? ENDLOOP ?></textarea>
+							<div class="alert alert-info help-block">One reply per line. Example: TIME Buy a watch! &mdash; Some variable-like strings can be found <a href="http://wiki.znc.in/ExpandString" target="_blank">here</a></div>
+						</div>
+					</div>
+
+					<div class="form-group">
+					<label for="inputSkins" class="col-sm-2 control-label">Skin(s):</label>
+						<div class="col-sm-10">
+							<? IF SkinLoop ROWS > 1 ?>
+							<select class="form-control" name="skin">
+								<option value="">- Global -</option>
+									<? LOOP SkinLoop ?>
+										<option value="<? VAR Name ?>"<? IF Checked ?> selected="selected"<? ENDIF ?>><? IF Name == "_default_" ?>Default<? ELSE ?><? VAR Name ?><? ENDIF ?></option>
+									<? ENDLOOP ?>
+							</select>
+							<? ELSE ?>
+							<p>No other skins found!</p>
+							<? ENDIF ?>
+						</div>
+					</div>
+				</div><!-- ZNC Behavior -->
+
+				<!-- Other Modules -->
+				<div class="tab-pane fade" id="othermodtab">
+				<? LOOP EmbeddedModuleLoop ?>
+					<? IF Embed ?>
+					<div class="form-group">
+					<label for="input<? VAR ModName ?>" class="col-sm-2 control-label"><? VAR ModName ?>:</label>
+						<div class="col-sm-10">
+							<? INC *Embed ?>
+						</div>
+					</div>
+					<? ENDIF ?>
+				<? ENDLOOP ?>
+				</div><!-- Other Modules -->
 
-	<div class="btn-group pull-right">
-		<input class="btn btn-danger" type="reset" value="Reset">
-		<input class="btn btn-success" type="submit" value="<? IF Edit ?>Save<? ELSE ?><? IF Clone ?>Clone<? ELSE ?>Create<? ENDIF ?><? ENDIF ?>" />
-	</div>
-				</form>
 			</div>
 		</div>
+				<div class="panel-footer text-right">
+				<? IF ImAdmin ?>
+					<input class="btn btn-danger" type="reset" value="Reset">
+					<input class="btn btn-success" type="submit" name="submit_return" value="<? IF Edit ?>Save<? ELSE ?><? IF Clone ?>Clone<? ELSE ?>Create<? ENDIF ?><? ENDIF ?>" />
+					<input class="btn btn-default" type="submit" name="submit_continue" value="<? IF Edit ?>Save and continue<? ELSE ?><? IF Clone ?>Clone<? ELSE ?>Create<? ENDIF ?><? ENDIF ?>" />
+				<? ELSE ?>
+					<input class="btn btn-danger" type="reset" value="Reset">
+					<input class="btn btn-success" type="submit" value="<? IF Edit ?>Save<? ELSE ?><? IF Clone ?>Clone<? ELSE ?>Create<? ENDIF ?><? ENDIF ?>" />
+				<? ENDIF ?>
+				</div>
 	</div>
-	
+ </div>
+ </form>
 <? INC Footer.tmpl ?>

modules/webadmin/tmpl/del_network.tmpl

@@ -9,13 +9,13 @@
 						<p>Are you absolutely sure you want to delete <b>"<? VAR Network ?>"</b> network, <? VAR Username ?>?</p>
 						<br>
 						<center>
-						<form action="delnetwork" method="post">
+						<form action="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>delnetwork" method="post">
 						<? INC _csrf_check.tmpl ?>
 							<input type="hidden" name="user" value="<? VAR Username ?>" />
 							<input type="hidden" name="name" value="<? VAR Network ?>" />
 							<input type="submit" class="btn btn-danger btn-xs" value="Yes, I want <? VAR Network ?> deleted" />
 						</form><br>
-						<form action="listusers" method="get">
+						<form action="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>listusers" method="get">
 							<input type="submit" class="btn btn-success btn-xs" value="No, I want to keep <? VAR Network ?>" />
 						</form>
 						</center>

modules/webadmin/tmpl/del_user.tmpl

@@ -4,18 +4,18 @@
 	<div class="row">
 		<div class="col-md-6 col-md-offset-3">
 			<div class="panel panel-danger">
-				<div class="panel-heading">Confirm Network Deletion</div>
+				<div class="panel-heading">Confirm User Deletion</div>
 					<div class="panel-body">
 						<p>Are you absolutely sure you want to delete "<? VAR Username ?>"?</p>
 						<br>
 						<center>
-						<form action="deluser" method="post">
+						<form action="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>deluser" method="post">
 						<? INC _csrf_check.tmpl ?>
 							<input type="hidden" name="submitted" value="1" />
 							<input type="hidden" name="user" value="<? VAR Username ?>" />
 							<input type="submit" class="btn btn-danger btn-xs" value="Yes, delete <? VAR Username ?>" />
 						</form><br>
-						<form action="listusers" method="get">
+						<form action="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>listusers" method="get">
 							<input type="submit" class="btn btn-success btn-xs" value="No, do not delete <? VAR Username ?>" />
 						</form>
 						</center>

modules/webadmin/tmpl/encoding_settings.tmpl

@@ -0,0 +1,56 @@
+<div class="radio">
+	<label>
+		<input type="radio" name="encoding_utf" id="encoding_utf_legacy" value="legacy" <? IF EncodingUtf == "legacy" ?>checked="checked"<? ENDIF ?> <? IF EncodingDisabled ?>disabled="disabled"<? ENDIF ?> />
+		<span class="help-block" for="encoding_utf_legacy">Don't ensure any encoding at all (legacy mode, not recommended)</span>
+	</label>
+</div>
+
+<div class="radio">
+	<label>
+		<input type="radio" name="encoding_utf" id="encoding_utf_send" value="send" <? IF EncodingUtf == "send" ?>checked="checked"<? ENDIF ?> <? IF EncodingDisabled ?>disabled="disabled"<? ENDIF ?> />
+		<span class="help-block" for="encoding_utf_send">Try to parse as UTF-8 and as <span class="encoding-placeholder-big text-success">&nbsp;&nbsp;<span class="encoding-placeholder"></span>&nbsp;&nbsp;</span>, send as UTF-8</span>
+	</label>
+</div>
+
+<div class="radio">
+	<label>
+		<input type="radio" name="encoding_utf" id="encoding_utf_receive" value="receive" <? IF EncodingUtf == "receive" ?>checked="checked"<? ENDIF ?> <? IF EncodingDisabled ?>disabled="disabled"<? ENDIF ?> />
+		<span class="help-block" for="encoding_utf_receive">Try to parse as UTF-8 and as <span class="encoding-placeholder-big text-success">&nbsp;&nbsp;<span class="encoding-placeholder"></span>&nbsp;&nbsp;</span>, send as <span class="encoding-placeholder-big text-success">&nbsp;&nbsp;<span class="encoding-placeholder"></span	>&nbsp;&nbsp;</span>
+	</label>
+</div>
+
+<div class="radio">
+	<label>
+		<input type="radio" name="encoding_utf" id="encoding_utf_simple" value="simple" <? IF EncodingUtf == "simple" ?>checked="checked"<? ENDIF ?> <? IF EncodingDisabled ?>disabled="disabled"<? ENDIF ?> />
+		<span class="help-block" for="encoding_utf_simple">Parse and send as <span class="encoding-placeholder-big text-success">&nbsp;&nbsp;<span class="encoding-placeholder"></span>&nbsp;&nbsp;</span> only</span>
+	</label>
+</div> 
+ 
+<div class="test-text">
+	<input class="form-control" type="text"	name="encoding" placeholder="Enter a text here (e.g. UTF-8 or ISO-8859-15)" value="<? VAR Encoding ?>" list="encoding_list" <? IF EncodingDisabled ?>disabled="disabled"<? ENDIF ?> />
+</div>
+
+<datalist id="encoding_list">
+	<? LOOP EncodingLoop ?>
+		<option value="<? VAR Encoding ?>"/>
+	<? ENDLOOP ?>
+</datalist>
+		
+<script type="text/javascript">
+	function updateEncodingText() {
+		var value = jQuery("input[name=encoding]").val();
+			jQuery(".encoding-placeholder").each(function(index, element) {
+				jQuery(element).text(value);
+			});
+	}
+		jQuery("input[name=encoding]").on("keyup change input", updateEncodingText);
+			updateEncodingText();
+
+		function updateEncodingLegacy() {
+			var disabled = jQuery("input:radio[name=encoding_utf]:checked").val() == "legacy";
+			jQuery("input[name=encoding]").prop("disabled", disabled);
+		}
+		
+		jQuery("input:radio[name=encoding_utf]").change(updateEncodingLegacy);
+		updateEncodingLegacy();
+</script>

modules/webadmin/tmpl/index.tmpl

@@ -1,6 +1,6 @@
 <? INC Header.tmpl ?>
 
-<div class="container">
+<div class="container col-md-10 col-md-offset-1">
 	<div class="panel panel-default">
 		<div class="panel-heading">Webadmin</div>
 			<div class="panel-body">

modules/webadmin/tmpl/listusers.tmpl

@@ -1,12 +1,12 @@
 <? INC Header.tmpl ?>
 
-<div class="container">
+<div class="container col-md-10 col-md-offset-1">
 	<div class="panel panel-default">
 		<div class="panel-heading">List of Users</div>
 			<div class="panel-body">
 				<?IF !UserLoop?>
 				<div class="alert alert-warning">
-					There are no users defined. Click <a href="adduser">here</a> if you would like to add one.
+					There are no users defined. Click <a href="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>adduser">here</a> if you would like to add one.
 				</div>
 				<?ELSE?>
 		
@@ -27,7 +27,7 @@
 				<table class="table table-bordered table-hover table-striped table-list-search">
 					<thead>
 						<tr>
-							<td>Action</td>
+							<td><a href="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>adduser" class="btn btn-default btn-xs">Add</a></td>
 							<td>Username</td>
 							<td>Networks</td>
 							<td>Clients</td>
@@ -38,9 +38,9 @@
 						<tr class="<?IF __EVEN__?>evenrow<?ELSE?>oddrow<?ENDIF?>">
 							<td>
 								<span class="nowrap">
-									<a href="edituser?user=<?VAR Username ESC=URL?>" class="btn btn-primary btn-xs">Edit</a>
-									<a href="adduser?clone=<? VAR Username ESC=URL ?>" alt="Clone <? VAR Username ESC=URL ?>" class="btn btn-warning btn-xs">Clone</a>
-									<? IF !IsSelf ?><a href="deluser?user=<?VAR Username ESC=URL?>" class="btn btn-danger btn-xs">Delete</a><? ENDIF ?>
+									<a href="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>edituser?user=<?VAR Username ESC=URL?>" class="btn btn-primary btn-xs">Edit</a>
+									<a href="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>adduser?clone=<? VAR Username ESC=URL ?>" alt="Clone <? VAR Username ESC=URL ?>" class="btn btn-warning btn-xs">Clone</a>
+									<? IF !IsSelf ?><a href="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>deluser?user=<?VAR Username ESC=URL?>" class="btn btn-danger btn-xs">Delete</a><? ENDIF ?>
 								</span>
 							</td>
 							<td><? VAR Username ?></td>

modules/webadmin/tmpl/settings.tmpl

@@ -1,242 +1,291 @@
 <? INC Header.tmpl ?>
 
-<div class="container">
-	<div class="panel panel-default">
-		<div class="panel-heading">Settings</div>
-			<div class="panel-body">
-				<h3>Listen Port(s)</h3>
-				<hr>
-				<table class="table table-bordered table-hover table-striped">
-					<thead>
+<div class="container col-md-10 col-md-offset-1">
+	<div class="panel with-nav-tabs panel-default">
+        <div class="panel-heading">
+            <ul class="nav nav-tabs">
+                <li class="active"><a href="#listenporttab" data-toggle="tab">Listen Port(s)</a></li>
+                <li><a href="#settingstab" data-toggle="tab">Settings</a></li>
+                <li><a href="#globalmodtab" data-toggle="tab">Global Modules</a></li>   
+            </ul>
+        </div>
+        <div class="panel-body">
+            <div class="tab-content">
+				<!--Listen Port -->
+                <div class="tab-pane fade in active" id="listenporttab">
+					<table class="table table-bordered table-hover table-striped">
+						<thead>
+							<tr>
+								<td>Port</td>
+								<td>BindHost</td>
+								<td>SSL</td>
+								<td>IPv4</td>
+								<td>IPv6</td>
+								<td>IRC</td>
+								<td>Web</td>
+								<td>URIPrefix</td>
+							</tr>
+						</thead>
+					<? LOOP ListenLoop ?>
 						<tr>
-						    <td>Port</td>
-						    <td>BindHost</td>
-						    <td>SSL</td>
-						    <td>IPv4</td>
-						    <td>IPv6</td>
-						    <td>IRC</td>
-						    <td>Web</td>
+							<td><? VAR Port ?></td>
+							<td><? VAR BindHost DEFAULT=** ?></td>
+							<td>
+							<div class="checkboxSwitchMini">
+								<input type="checkbox" disabled="disabled" id="<? VAR IsSSL ?>" <? IF IsSSL ?>checked="checked"<? ENDIF ?>/>
+								<label for="<? VAR IsSSL ?>"></label>
+							</div>
+							</td>
+							<td>
+							<div class="checkboxSwitchMini">
+								<input type="checkbox" disabled="disabled" id="<? VAR IsIPV4 ?>" <? IF IsIPV4 ?>checked="checked"<? ENDIF ?>/>
+								<label for="<? VAR IsIPV4 ?>"></label>
+							</div>
+							</td>
+							<td>
+							<div class="checkboxSwitchMini">
+								<input type="checkbox" id="<? VAR IsIPV6 ?>" disabled="disabled" <? IF IsIPV6 ?>checked="checked"<? ENDIF ?>/>
+								<label for="<? VAR IsIPV6 ?>"></label>
+							</div>
+							</td>
+							<td>
+							<div class="checkboxSwitchMini">
+								<input type="checkbox" id="<? VAR IsIRC ?>" disabled="disabled" <? IF IsIRC ?>checked="checked"<? ENDIF ?>/>
+								<label for="<? VAR IsIRC ?>"></label>
+							</div>
+							</td>
+							<td>
+							<div class="checkboxSwitchMini">
+								<input type="checkbox" id="<? VAR IsWeb ?>" disabled="disabled" <? IF IsWeb ?>checked="checked"<? ENDIF ?>/>
+								<label for="<? VAR IsWeb ?>"></label>
+							</div>
+							</td>
+							<td><? VAR URIPrefix ?></td>
+							<td>
+							<? IF SuggestDeletion ?>
+								<form action="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>del_listener" method="post">
+									<? INC _csrf_check.tmpl ?>
+									<input name="host" type="hidden" value="<? VAR BindHost ?>"/>
+									<input name="port" type="hidden" value="<? VAR Port ?>"/>
+									<input name="ipv4" type="hidden" value="<? VAR IsIPV4 ?>"/>
+									<input name="ipv6" type="hidden" value="<? VAR IsIPV6 ?>"/>
+									<input type="submit" class="btn btn-danger btn-xs" value="Del"/>
+								</form>
+							<? ENDIF ?>
+							</td>
 						</tr>
-					</thead>
-				<? LOOP ListenLoop ?>
-					<tr>
-						<td><? VAR Port ?></td>
-						<td><? VAR BindHost DEFAULT=** ?></td>
-						<td>
-						<div class="checkboxSwitchMini">
-							<input type="checkbox" disabled="disabled" id="<? VAR IsSSL ?>" <? IF IsSSL ?>checked="checked"<? ENDIF ?>/>
-							<label for="<? VAR IsSSL ?>"></label>
-						</div>
-						</td>
-						<td>
-						<div class="checkboxSwitchMini">
-							<input type="checkbox" disabled="disabled" id="<? VAR IsIPV4 ?>" <? IF IsIPV4 ?>checked="checked"<? ENDIF ?>/>
-							<label for="<? VAR IsIPV4 ?>"></label>
-						</div>
-						</td>
-						<td>
-						<div class="checkboxSwitchMini">
-							<input type="checkbox" id="<? VAR IsIPV6 ?>" disabled="disabled" <? IF IsIPV6 ?>checked="checked"<? ENDIF ?>/>
-							<label for="<? VAR IsIPV6 ?>"></label>
-						</div>
-						</td>
-						<td>
-						<div class="checkboxSwitchMini">
-							<input type="checkbox" id="<? VAR IsIRC ?>" disabled="disabled" <? IF IsIRC ?>checked="checked"<? ENDIF ?>/>
-							<label for="<? VAR IsIRC ?>"></label>
-						</div>
-						</td>
-						<td>
-						<div class="checkboxSwitchMini">
-							<input type="checkbox" id="<? VAR IsWeb ?>" disabled="disabled" <? IF IsWeb ?>checked="checked"<? ENDIF ?>/>
-							<label for="<? VAR IsWeb ?>"></label>
-						</div>
-						</td>
-						<td>
-						<? IF SuggestDeletion ?>
-							<form action="del_listener" method="post">
+					<? ENDLOOP ?>
+						<tr>
+							<form action="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>add_listener" method="post">
 								<? INC _csrf_check.tmpl ?>
-								<input name="host" type="hidden" value="<? VAR BindHost ?>"/>
-								<input name="port" type="hidden" value="<? VAR Port ?>"/>
-								<input name="ipv4" type="hidden" value="<? VAR IsIPV4 ?>"/>
-								<input name="ipv6" type="hidden" value="<? VAR IsIPV6 ?>"/>
-								<input type="submit" class="btn btn-danger btn-xs" value="Del"/>
+								<td>
+									<input type="number" class="form-control" name="port" min="1" max="65535" class="number" maxlength="5" placeholder="Port 1 to 65535"/>
+								</td>
+								<td>
+									<input type="text" class="form-control" name="host" value="*"/>
+								</td>
+								<td>
+									<div class="checkboxSwitchMini">
+										<input type="checkbox" id="ssl"/>
+										<label for="ssl"></label>
+									</div>
+								</td>
+								<td>
+									<div class="checkboxSwitchMini">
+										<input type="checkbox" id="ipv4" name="ipv4" checked="checked"/>
+										<label for="ipv4"></label>
+									</div>
+								</td>
+								<td>
+									<div class="checkboxSwitchMini">
+										<input type="checkbox" id="ipv6" name="ipv6" checked="checked"/>
+										<label for="ipv6"></label>
+									</div>
+								</td>
+								<td>
+									<div class="checkboxSwitchMini">
+										<input type="checkbox" id="irc" name="irc" checked="checked"/>
+										<label for="irc"></label>
+									</div>
+								</td>
+								<td>
+									<div class="checkboxSwitchMini">
+										<input type="checkbox" id="web" name="web" checked="checked"/>
+										<label for="web"></label>
+									</div>
+								</td>
+								<td><input type="text" class="form-control" name="uriprefix" value="/"></td>
+								<td><input type="submit" class="btn btn-primary btn-xs" value="Add"/></td>
 							</form>
-						<? ENDIF ?>
-						</td>
-					</tr>
-				<? ENDLOOP ?>
-					<tr>
-						<form action="add_listener" method="post">
-							<? INC _csrf_check.tmpl ?>
-							<td>
-							<input type="number" class="form-control" name="port" min="1" max="65535" class="number" maxlength="5" placeholder="Port 1 to 65535"/>
-							</td>
-							<td>
-							<input type="text" class="form-control" name="host" value="*"/>
-							</td>
-							<td>
-							<div class="checkboxSwitchMini">
-								<input type="checkbox" id="ssl"/>
-								<label for="ssl"></label>
+						</tr>
+					</table>
+				</div><!--Listen Port -->
+				
+				<!-- Settings -->
+				<div class="tab-pane fade" id="settingstab">
+					<form class="form-horizontal" action="<? VAR URIPrefix TOP ?><? VAR ModPath TOP ?>settings" method="post">
+					<? INC _csrf_check.tmpl ?>
+					<input type="hidden" name="submitted" value="1" />
+						<div class="form-group">
+						<label for="inputSkins" class="col-sm-2 control-label">Skin(s):</label>
+							<div class="col-sm-10">
+								<select class="form-control" id="inputSkins" name="skin">
+									<? LOOP SkinLoop ?>
+										<option value="<? VAR Name ?>"<? IF Checked ?> selected="selected"<? ENDIF ?>><? IF Name == "_default_" ?>Default<? ELSE ?><? VAR Name ?><? ENDIF ?></option>
+									<? ENDLOOP ?>
+								</select>
 							</div>
-							</td>
-							<td>
-							<div class="checkboxSwitchMini">
-								<input type="checkbox" id="ipv4" name="ipv4" checked="checked"/>
-								<label for="ipv4"></label>
+						</div>
+  					 
+						<div class="form-group">
+						<label for="inputStatusPrefix" class="col-sm-2 control-label">Status Prefix:</label>
+							<div class="col-sm-10">
+								<input type="text" class="form-control" id="inputStatusPrefix" value="<? VAR StatusPrefix ?>" placeholder="The prefix for the status and module queries."/>
+								<div class="alert alert-info help-block">Default for new users only.</div>
 							</div>
-							</td>
-							<td>
-							<div class="checkboxSwitchMini">
-								<input type="checkbox" id="ipv6" name="ipv6" checked="checked"/>
-								<label for="ipv6"></label>
+						</div>
+
+						<div class="form-group">
+						<label for="inputmaxBufferSize" class="col-sm-2 control-label">Maximum Buffer Size:</label>
+							<div class="col-sm-10">
+								<input type="number" class="form-control" id="inputmaxBufferSize" name="maxbufsize" value="<? VAR MaxBufferSize ?>" placeholder="Sets the global Max Buffer Size a user can have."/>
 							</div>
-							</td>
-							<td>
-							<div class="checkboxSwitchMini">
-								<input type="checkbox" id="irc" name="irc" checked="checked"/>
-								<label for="irc"></label>
+						</div>
+  
+						<div class="form-group">
+						<label for="inputConnectDelay" class="col-sm-2 control-label">Connect Delay:</label>
+							<div class="col-sm-10">
+								<input type="number" class="form-control" id="inputConnectDelay" name="connectdelay" value="<? VAR ConnectDelay ?>" placeholder="The time every connection will be delayed, in seconds. Some servers refuse your connection if you reconnect too fast. This affects the connection between ZNC and the IRC server; not the connection between your IRC client and ZNC. "/>
 							</div>
-							</td>
-							<td>
-							<div class="checkboxSwitchMini">
-								<input type="checkbox" id="web" name="web" checked="checked"/>
-								<label for="web"></label>
+						</div>
+  				 
+						<div class="form-group">
+						<label for="inputServerThrottle" class="col-sm-2 control-label">Server Throttle:</label>
+							<div class="col-sm-10">
+								<input type="number" class="form-control" id="inputServerThrottle" name="serverthrottle" value="<? VAR ServerThrottle ?>" placeholder="The time between two connect attempts to the same hostname." />
 							</div>
-							</td>
-							<td><input type="submit" class="btn btn-primary btn-xs" value="Add"/></td>
-						</form>
-					</tr>
-				</table>
+						</div>
 
-	<form class="form-horizontal" action="settings" method="post">
-	<? INC _csrf_check.tmpl ?>
-	<input type="hidden" name="submitted" value="1" />
-		<h3>Settings</h3>
-		<hr>
-		<div class="form-group">
-			<label for="inputSkins" class="col-sm-2 control-label">Skin(s):</label>
-				<div class="col-sm-10">
-					<select class="form-control" id="inputSkins" name="skin">
-						<? LOOP SkinLoop ?>
-							<option value="<? VAR Name ?>"<? IF Checked ?> selected="selected"<? ENDIF ?>><? IF Name == "_default_" ?>Default<? ELSE ?><? VAR Name ?><? ENDIF ?></option>
-						<? ENDLOOP ?>
-					</select>
-				</div>
-		</div>
-  					 
-		<div class="form-group">
-			<label for="inputStatusPrefix" class="col-sm-2 control-label">Status Prefix:</label>
-				<div class="col-sm-10">
-					<input type="text" class="form-control" id="inputStatusPrefix" value="<? VAR StatusPrefix ?>" placeholder="The prefix for the status and module queries."/>
-					<div class="alert alert-info help-block">Default for new users only.</div>
-				</div>
-		</div>
-
-		<div class="form-group">
-			<label for="inputmaxBufferSize" class="col-sm-2 control-label">Maximum Buffer Size:</label>
-				<div class="col-sm-10">
-					<input type="number" class="form-control" id="inputmaxBufferSize" name="maxbufsize" value="<? VAR MaxBufferSize ?>" placeholder="Sets the global Max Buffer Size a user can have."/>
-				</div>
-		</div>
-  
-		<div class="form-group">
-			<label for="inputConnectDelay" class="col-sm-2 control-label">Connect Delay:</label>
-				<div class="col-sm-10">
-					<input type="number" class="form-control" id="inputConnectDelay" name="connectdelay" value="<? VAR ConnectDelay ?>" placeholder="The time every connection will be delayed, in seconds. Some servers refuse your connection if you reconnect too fast. This affects the connection between ZNC and the IRC server; not the connection between your IRC client and ZNC. "/>
-				</div>
-		</div>
-  				 
-		<div class="form-group">
-			<label for="inputServerThrottle" class="col-sm-2 control-label">Server Throttle:</label>
-				<div class="col-sm-10">
-					<input type="number" class="form-control" id="inputServerThrottle" name="serverthrottle" value="<? VAR ServerThrottle ?>" placeholder="The time between two connect attempts to the same hostname." />
-				</div>
-		</div>
-
-		<div class="form-group">
-			<label for="inputAnonIPLimit" class="col-sm-2 control-label">Anonymous IP Limit:</label>
-				<div class="col-sm-10">
-					<input type="number" class="form-control" id="inputAnonIPLimit" name="anoniplimit" value="<? VAR AnonIPLimit ?>" placeholder="Limits the number of unidentified connections per IP." />
-				</div>
-		</div>
-
-		<div class="form-group">
-			<label for="inputprotectWeb" class="col-sm-2 control-label">Protect Web Sessions:</label>
-				<div class="col-sm-10">
-					<div class="checkboxSwitch">
-						<input type="checkbox" class="form-control" name="protectwebsessions" id="protectwebsessions_checkbox"<? IF ProtectWebSessions ?> checked="checked"<? ENDIF ?> />
-						<label for="protectwebsessions_checkbox"></label>
-						<div class="alert alert-info help-block">Disallow IP changing during each web session</div>
-					</div>
-				</div>
-		</div>
-  
-		<div class="form-group">
-			<label for="inputMOTD" class="col-sm-2 control-label">MOTD:</label>
-				<div class="col-sm-10">
-					<textarea type="text" class="form-control" id="inputMOTD" name="motd" cols="70" rows="5" class="monospace"><? LOOP MOTDLoop ?><? VAR Line ?><? ENDLOOP ?></textarea>
-					<div class="alert alert-info help-block">"Message of the Day", sent to all ZNC users on connect.</div>
-				</div>
-		</div>
-  
-		<div class="form-group">
-			<label for="inputBindHosts" class="col-sm-2 control-label">BindHosts:</label>
-				<div class="col-sm-10">
-					<textarea type="text" class="form-control" id="inputBindHosts" name="bindhosts" rows="5">
-					<? LOOP BindHostLoop ?>
-					<? VAR BindHost ?>
-					<? ENDLOOP ?>
-					</textarea>
-					<div class="alert alert-info help-block">One host name or IP entry per line.</div>
-				</div>
-		</div>
-  
-		<h3>Global Modules</h3>
-		<hr>
-		 	<table class="table table-bordered table-hover table-striped">
-				<thead>
-					<tr>
-						<td>Status</td>
-						<td>Name</td>
-						<td>Arguments</td>
-						<td>Description</td>
-					</tr>
-				</thead>
-				<tbody>
-					<? LOOP ModuleLoop ?>
-					<tr class="<? IF __EVEN__ ?>evenrow<? ELSE ?>oddrow<? ENDIF ?>">
-						<td>
-							<div class="checkboxSwitch">
-								<input type="checkbox" name="loadmod" id="lm_<? VAR Name ?>" value="<? VAR Name ?>"<? IF Checked ?> checked="checked"<? ENDIF ?><? IF Disabled ?> disabled="disabled"<? ENDIF ?> />
-								<label for="lm_<? VAR Name ?>"></label>
+						<div class="form-group">
+						<label for="inputAnonIPLimit" class="col-sm-2 control-label">Anonymous IP Limit:</label>
+							<div class="col-sm-10">
+								<input type="number" class="form-control" id="inputAnonIPLimit" name="anoniplimit" value="<? VAR AnonIPLimit ?>" placeholder="Limits the number of unidentified connections per IP." />
 							</div>
-						</td>
-						<td>
-							<label for="lm_<? VAR Name ?>">
-							<? IF Wiki ?><a href="http://wiki.znc.in/<? VAR Wiki ?>" target="_blank"><? VAR Name ?></a>
-							<? ELSE ?> <? VAR Name ?> <? ENDIF ?></label>
-						</td>
-						<td class="mod_args">
-							<input type="text" class="form-control" name="modargs_<? VAR Name ?>" value="<? VAR Args ?>"
-							<? IF !HasArgs ?> disabled="disabled"<? ENDIF ?>
-							<? IF ArgsHelpText ?> data-toggle="tooltip" data-placement="top" data-original-title="<? VAR ArgsHelpText ?>"<? ENDIF ?> />
-						</td>
-						<td class="mod_descr"><? VAR Description ?></td>
-					</tr>
-					<? ENDLOOP ?>
-				</tbody>
-			</table>
+						</div>
 
-	<div class="btn-group pull-right">
-		<input class="btn btn-danger" type="reset" value="Reset">
-		<input class="btn btn-success" type="submit" value="Save" />
-	</div>
+						<div class="form-group">
+						<label for="inputprotectWeb" class="col-sm-2 control-label">Protect Web Sessions:</label>
+							<div class="col-sm-10">
+								<div class="switch">
+									<input type="checkbox" name="protectwebsessions" id="protectwebsessions_checkbox" class="cmn-toggle cmn-toggle-round-flat"<? IF ProtectWebSessions ?> checked="checked"<? ENDIF ?> />
+									<label for="protectwebsessions_checkbox"></label>
+									<div class="alert alert-info help-block">Disallow IP changing during each web session</div>
+								</div>
+							</div>
+						</div>
  
-	</form>
+						<div class="form-group">
+						<label for="inputhideversion" class="col-sm-2 control-label">Hide ZNC Version:</label>
+							<div class="col-sm-10">
+								<div class="switch">
+									<input type="checkbox" name="hideversion" id="hideversion_checkbox" class="cmn-toggle cmn-toggle-round-flat"<? IF HideVersion ?> checked="checked"<? ENDIF ?> />
+									<label for="hideversion_checkbox"></label>
+									<div class="alert alert-info help-block">Hide version number from non-ZNC users</div>
+								</div>
+							</div>
+						</div>
+ 
+						<div class="form-group">
+						<label for="inputMOTD" class="col-sm-2 control-label">MOTD:</label>
+							<div class="col-sm-10">
+								<textarea class="form-control" id="inputMOTD" name="motd" rows="5" class="monospace"><? LOOP MOTDLoop ?><? VAR Line ?>
+<? ENDLOOP ?>
+</textarea>
+								<div class="alert alert-info help-block">"Message of the Day", sent to all ZNC users on connect.</div>
+							</div>
+						</div>
+  
+						<div class="form-group">
+						<label for="inputBindHosts" class="col-sm-2 control-label">BindHosts:</label>
+							<div class="col-sm-10">
+								<textarea type="text" class="form-control" id="inputBindHosts" name="bindhosts" rows="5"><? LOOP BindHostLoop ?><? VAR BindHost ?>
+<? ENDLOOP ?>
+</textarea>
+								<div class="alert alert-info help-block">One host name or IP entry per line.</div>
+							</div>
+						</div>
+				</div><!-- Settings -->
+		
+				<!-- Global Module Settings -->
+				<div class="tab-pane fade" id="globalmodtab"> 
+					<table class="table table-bordered table-hover table-striped">
+						<thead>
+							<tr>
+								<td>Status</td>
+								<td>Name</td>
+								<td>Arguments</td>
+								<td>Description</td>
+								<td>Global</td>
+								<td>Networks</td>
+							</tr>
+						</thead>
+						<tbody>
+							<? LOOP ModuleLoop ?>
+							<tr class="<? IF __EVEN__ ?>evenrow<? ELSE ?>oddrow<? ENDIF ?>">
+								<td>
+									<div class="switch">
+										<input type="checkbox" name="loadmod" id="lm_<? VAR Name ?>" class="cmn-toggle cmn-toggle-round-flat" value="<? VAR Name ?>"<? IF Checked ?> checked="checked"<? ENDIF ?><? IF Disabled ?> disabled="disabled"<? ENDIF ?> />
+										<label for="lm_<? VAR Name ?>"></label>
+									</div>
+								</td>
+								<td>
+									<label for="lm_<? VAR Name ?>">
+									<? IF Wiki ?><a href="http://wiki.znc.in/<? VAR Wiki ?>" target="_blank"><? VAR Name ?></a>
+									<? ELSE ?> <? VAR Name ?> <? ENDIF ?></label>
+								</td>
+								<td class="mod_args">
+									<input type="text" class="form-control" name="modargs_<? VAR Name ?>" value="<? VAR Args ?>"
+									<? IF !HasArgs ?> disabled="disabled"<? ENDIF ?>
+									<? IF ArgsHelpText ?> data-toggle="tooltip" data-placement="top" data-original-title="<? VAR ArgsHelpText ?>"<? ENDIF ?> />
+								</td>
+								<td class="mod_descr"><? VAR Description ?></td>
+								<td>
+									<? IF CanBeLoadedByNetwork ?>
+										<div class="checkboxSwitchMini">
+											<input type="checkbox" name="loaded_by_network" id="loaded_by_net_<? VAR Name ?>" value="<? VAR Name ?>"<? IF LoadedByAllNetworks ?> checked="checked"  <? ENDIF ?> class="sr-only" disabled="disabled" />
+											<? ENDIF ?>
+											<label for="loaded_by_net_<? VAR Name ?>"></label>
+										</div>
+									<? IF LoadedBySomeNetworks && !LoadedByAllNetworks ?>
+										<script type="text/javascript">document.getElementById("loaded_by_net_<? VAR Name ?>").indeterminate = true;</script>
+									<? ENDIF ?>
+								</td>
+								<td>
+									<? IF CanBeLoadedByUser ?>
+										<div class="checkboxSwitchMini">
+											<input type="checkbox" name="loaded_by_user" id="loaded_by_user_<? VAR Name ?>" value="<? VAR Name ?>"<? IF LoadedByAllNetworks ?> checked="checked"  <? ENDIF ?> class="sr-only" disabled="disabled" />
+											<? ENDIF ?>
+											<label for="loaded_by_user_<? VAR Name ?>"></label>
+										</div>
+									<? IF LoadedBySomeUsers && !LoadedByAllUsers ?>
+										<script type="text/javascript">document.getElementById("loaded_by_user_<? VAR Name ?>").indeterminate = true;</script>								
+									<? ENDIF ?>
+								</td>
+							</tr>
+							<? ENDLOOP ?>
+						</tbody>
+					</table>
+				</div><!-- Global Module Settings -->
 			</div>
+        </div>
+           
+			
+		<div class="panel-footer text-right">	
+			<input class="btn btn-danger" type="reset" value="Reset">
+			<input class="btn btn-success" type="submit" value="Save" />
+		</div>
+	
 	</div>
 </div>	
-
+</form> 
 <? INC Footer.tmpl ?>

modules/webadmin/tmpl/traffic.tmpl

@@ -1,9 +1,60 @@
 <? INC Header.tmpl ?>
 
-<div class="container">
+<div class="container col-md-10 col-md-offset-1">
 	<div class="panel panel-default">
-		<div class="panel-heading">Information</div>
+		<div class="panel-heading">Traffic Information</div>
 			<div class="panel-body">
+				<div class="row">
+					<div class="col-md-6"><div id="totalstats"></div></div>
+					<div class="col-md-6"><div id="usertraffic"></div></div>
+				</div>
+			
+			
+			<script type="text/javascript" src="//www.google.com/jsapi"></script>
+			<script>
+				google.load('visualization', '1.0', {'packages':['corechart']});
+				google.setOnLoadCallback(drawChart);
+					function drawChart() {
+						var data = google.visualization.arrayToDataTable([
+							['Task', 'ZNC Stats'],
+							['Users', <? VAR TotalUsers ?>],
+							['Networks', <? VAR TotalNetworks ?>]
+						]);
+						var options = {
+							width: 503,
+							pieHole: 0.3,
+							colors: ['#428bca', '#5bc0de'],
+							backgroundColor: 'transparent',
+							legend: {textStyle: {color: 'gray'}}
+						};
+						var chart = new google.visualization.PieChart(document.getElementById('totalstats'));
+						chart.draw(data, options);
+					}
+				</script>
+				<script>
+					google.load('visualization', '1.0', {'packages':['corechart']});
+					google.setOnLoadCallback(drawChart2);
+					function drawChart2() {
+						var data2 = google.visualization.arrayToDataTable([
+							['Task', 'User Traffic'],
+							['Attached Networks', <? VAR AttachedNetworks ?>],
+							['Client Connections', <? VAR TotalCConnections ?>],
+							['IRC Connections', <? VAR TotalIRCConnections ?>]
+						]);
+						var options2 = {
+							width: 503,
+							pieHole: 0.3,
+							colors: ['#5cb85c', '#f0ad4e', '#d9534f'],
+							backgroundColor: 'transparent',
+							legend: {textStyle: {color: 'gray'}}
+						};
+						var chart2 = new google.visualization.PieChart(document.getElementById('usertraffic'));
+						chart2.draw(data2, options2);
+					}
+			</script>
+ 
+			
+			
 				<table class="table table-bordered table-hover">
 					<tbody>
 						<tr>
@@ -74,8 +125,7 @@
 				</table>
 						
 <? IF IsAdmin && TrafficLoop ?>
-	<h3>Traffic</h3>
-	<hr>
+	<br />
 	<div class="row">
 		<div class="col-md-4 col-md-offset-8"> 
             <div class="input-group custom-search-form" style=".custom-search-form{margin-top:5px;}">

webskins/Amelia/pub/bootstrap.css

@@ -5727,7 +5727,6 @@ a.thumbnail.active {
 
 .progress {
   height: 20px;
-  margin-bottom: 20px;
   overflow: hidden;
   background-color: #0d747c;
   border-radius: 4px;
@@ -7669,3 +7668,321 @@ legend {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #808080;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #272b30;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #5cb85c;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #5cb85c;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+	background-color: rgba(0,0,0,0.08);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #fff;
+	background-color: #2e3338;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #fff;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Amelia/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Bluerex/pub/bootstrap.css

@@ -6057,3 +6057,323 @@ td.visible-print {
   border-width: 5px !important;
   background-color: #ffffff !important;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #1590ff;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #1590ff;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #1590ff;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.03);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #000;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Bluerex/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Cerulean/pub/bootstrap.css

@@ -5725,7 +5725,6 @@ a.thumbnail.active {
 
 .progress {
   height: 20px;
-  margin-bottom: 20px;
   overflow: hidden;
   background-color: #f5f5f5;
   border-radius: 4px;
@@ -7689,3 +7688,323 @@ td.visible-print {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #2fa4e7;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #2fa4e7;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #555;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Cerulean/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Cirrus/pub/bootstrap.css

@@ -4470,7 +4470,6 @@ a.thumbnail:focus {
 .progress {
   overflow: hidden;
   height: 20px;
-  margin-bottom: 20px;
   background-color: #f5f5f5;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -6048,3 +6047,323 @@ pre {
   -moz-box-shadow: none;
   box-shadow: none;
 }
+ /* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #455860;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #455860;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #000;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Cirrus/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Cosmo/pub/bootstrap.css

@@ -5727,7 +5727,6 @@ a.thumbnail.active {
 
 .progress {
   height: 21px;
-  margin-bottom: 21px;
   overflow: hidden;
   background-color: #cccccc;
   border-radius: 0;
@@ -7677,3 +7676,323 @@ td.visible-print {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #3fb618;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #3fb618;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #000;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Cosmo/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Cupid/pub/bootstrap.css

@@ -6204,3 +6204,323 @@ a.list-group-item:focus .list-group-item-heading {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #f0569f;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #f0569f;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+	background-color: #f0569f;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color:#fff
+}
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Cupid/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Cyborg/pub/bootstrap.css

@@ -5727,7 +5727,6 @@ a.thumbnail.active {
 
 .progress {
   height: 20px;
-  margin-bottom: 20px;
   overflow: hidden;
   background-color: #222222;
   border-radius: 4px;
@@ -7675,3 +7674,321 @@ legend {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #3C3C3C;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #222;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #3C3C3C;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #2a9fd6;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #2a9fd6;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+	background-color: rgba(0,0,0,0.08);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #fff;
+	background-color: #222;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #fff;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Cyborg/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Darkly/pub/bootstrap.css

@@ -4514,7 +4514,6 @@ a.thumbnail.active {
 .progress {
   overflow: hidden;
   height: 21px;
-  margin-bottom: 21px;
   background-color: #ebebeb;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -5741,7 +5740,7 @@ button.close {
 }
 table a,
 .table a {
-  text-decoration: underline;
+  text-decoration: none;
 }
 table .success,
 .table .success,
@@ -5966,3 +5965,321 @@ input:focus {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #525252;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #404040;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #909090;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #00bc8c;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #00bc8c;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+	background-color: rgba(0,0,0,0.08);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #fff;
+	background-color: #303030;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #000;
+}
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Darkly/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Flatly/pub/bootstrap.css

@@ -7731,3 +7731,320 @@ input[type="color"]:focus,
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #18bc9c;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #18bc9c;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Flatly/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Journal/pub/bootstrap.css

@@ -5727,7 +5727,6 @@ a.thumbnail.active {
 
 .progress {
   height: 21px;
-  margin-bottom: 21px;
   overflow: hidden;
   background-color: #f5f5f5;
   border-radius: 4px;
@@ -7635,3 +7634,323 @@ td.visible-print {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #000;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #000;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #000;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Journal/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Lumen/pub/bootstrap.css

@@ -6053,3 +6053,323 @@ label {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #28b62c;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #28b62c;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #000;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Lumen/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Paper/pub/bootstrap.css

@@ -6524,3 +6524,323 @@ select.form-control {
   -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #5cb85c;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #5cb85c;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #666666;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Paper/tmpl/BaseHeader.tmpl

@@ -7,6 +7,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
 	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>

webskins/Readable/pub/bootstrap.css

@@ -4514,7 +4514,6 @@ a.thumbnail.active {
 .progress {
   overflow: hidden;
   height: 22px;
-  margin-bottom: 22px;
   background-color: #f5f5f5;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -5882,3 +5881,323 @@ legend {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #5cb85c;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #5cb85c;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #000;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Readable/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Sandstone/pub/bootstrap.css

@@ -6324,3 +6324,323 @@ input:focus,
 .panel-default .panel-footer {
   color: #98978b;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #93c54b;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #93c54b;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #98978b;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Sandstone/tmpl/BaseHeader.tmpl

@@ -7,6 +7,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
 	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>

webskins/Shamrock/pub/bootstrap.css

@@ -5818,3 +5818,321 @@ legend {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #3a6624;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #3a6624;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #2D521A;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #3a6624;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #68B342;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+	background-color: rgba(0,0,0,0.08);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #fff;
+	background-color: #76a547;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #fff;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Shamrock/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Simplex/pub/bootstrap.css

@@ -4110,7 +4110,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
   padding: 8px 15px;
   margin-bottom: 20px;
   list-style: none;
-  background-color: transparent;
+  background-color: #f1f1f1;
   border-radius: 4px;
 }
 .breadcrumb > li {
@@ -4513,7 +4513,6 @@ a.thumbnail.active {
 .progress {
   overflow: hidden;
   height: 20px;
-  margin-bottom: 20px;
   background-color: #f5f5f5;
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -5880,3 +5879,323 @@ legend {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #5cb85c;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #5cb85c;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #000;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Simplex/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Slate/pub/bootstrap.css

@@ -5725,7 +5725,6 @@ a.thumbnail.active {
 
 .progress {
   height: 20px;
-  margin-bottom: 20px;
   overflow: hidden;
   background-color: #1c1e22;
   border-radius: 4px;
@@ -7959,3 +7958,321 @@ legend {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #808080;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #272b30;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #5cb85c;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #5cb85c;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+	background-color: rgba(0,0,0,0.08);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #fff;
+	background-color: #2e3338;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #fff;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Slate/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Spacelab/pub/bootstrap.css

@@ -7686,3 +7686,323 @@ td.visible-print {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #5cb85c;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #5cb85c;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #000;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Spacelab/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Superhero/tmpl/BaseHeader.tmpl

@@ -0,0 +1,38 @@
+<? INC DocType.tmpl ?>
+<? ADDROW CSSLoop HREF=/skinfiles/Superhero/bootstrap.min.css ?>
+<? ADDROW CSSLoop HREF=/skinfiles/_default_/font-awesome.min.css ?>
+<? ADDROW JSLoop HREF=/skinfiles/_default_/jquery.min.js ?>
+<? ADDROW JSLoop HREF=/skinfiles/_default_/bootstrap.min.js ?>
+<? ADDROW FAVLOOP HREF=/skinfiles/_default_/favicon.ico ?>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
+	<? LOOP FAVLOOP ?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
+	<?ENDLOOP?>
+	<? LOOP CSSLoop ?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
+	<?ENDLOOP?>
+	<? LOOP JSLoop ?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
+	<?ENDLOOP?>	
+	 <? INC ExtraHeader.tmpl ?>
+</head>
+<body>
+	<? INC Navbar.tmpl ?>
+	<? INC Banner.tmpl ?>
+	<? INC MessageBar.tmpl ?>
+	<? INC LoginBar.tmpl ?>
+	<? REM ?>
+		In your subpage (module page or static page) you'll probably want to do something like this...
+			<? INC Header.tmpl ?>
+				This is my <b>super</b> cool sub page!
+			<? INC Footer.tmpl ?>
+		If you'd like to add your own local css file to be included after the global main.css, you can make your own Header.tmpl like so...
+			<? ADDROW CSSLoop HREF=/pub/your_local.css ?>
+			<? ADDROW JSLoop HREF=/pub/your_local.js ?>
+			<? INC BaseHeader.tmpl ?>
+	<? ENDREM ?>
+	<? INC BreadCrumbs.tmpl ?>

webskins/Supervillain/pub/bootstrap.css

@@ -1503,7 +1503,7 @@ th {
 
 .table-hover > tbody > tr:hover > td,
 .table-hover > tbody > tr:hover > th {
-  background-color: #ff7f32;
+  background-color: rgba(0,0,0,0.4);
 }
 
 table col[class*="col-"] {
@@ -6838,3 +6838,323 @@ td.visible-print {
     display: none !important;
   }
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #2a333c;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #ff7f32;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #ff7f32;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #fff;
+	background-color: rgba(0,0,0,0.08);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #2a333c;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Supervillain/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/United/pub/bootstrap.css

@@ -5727,7 +5727,6 @@ a.thumbnail.active {
 
 .progress {
   height: 20px;
-  margin-bottom: 20px;
   overflow: hidden;
   background-color: #f5f5f5;
   border-radius: 4px;
@@ -7574,3 +7573,323 @@ td.visible-print {
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #5cb85c;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #5cb85c;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #000;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/United/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/WhitePlum/pub/bootstrap.css

@@ -6017,7 +6017,7 @@ h1 small,
   border-bottom-color: #eeeeee;
 }
 .panel-footer {
-  background: transparent;
+  background: #f5f5f5;
   border-top-color: #eeeeee;
 }
 .progress {
@@ -6028,3 +6028,320 @@ h1 small,
 .well {
   color: white;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #7a62d3;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #7a62d3;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/WhitePlum/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/Yeti/pub/bootstrap.css

@@ -7927,3 +7927,323 @@ label,
 .affix {
   position: fixed;
 }
+/* Extra - Switch */
+.cmn-toggle {
+  position: absolute;
+  margin-left: -9999px;
+  visibility: hidden;
+}
+input.cmn-toggle-round-flat + label {
+  padding:1px;
+  width: 50px;
+  height: 22px;
+  background-color: #dddddd;
+  border-radius: 60px;
+  transition: background 0.4s;
+  position:relative;
+  cursor: pointer;
+}
+input.cmn-toggle-round-flat + label:before,
+input.cmn-toggle-round-flat + label:after {
+  display: block;
+  position: absolute;
+  content: "";
+}
+input.cmn-toggle-round-flat + label:before {
+  top: 2px;
+  left: 2px;
+  bottom: 2px;
+  right: 2px;
+  background-color: #fff;
+  border-radius: 50px;
+  transition: background 0.4s;
+}
+input.cmn-toggle-round-flat + label:after {
+  top: 5px;
+  left: 5px;
+  bottom: 4px;
+  width: 12.5px;
+  height: 12px;
+  background-color: #dddddd;
+  border-radius: 52px;
+  transition: margin 0.4s, background 0.4s;
+}
+input.cmn-toggle-round-flat:checked + label {
+  background-color: #008cba;
+}
+
+input.cmn-toggle-round-flat:checked + label:after {
+  margin-left: 27px;
+  background-color: #008cba;
+}
+/* Extra - Switch */
+
+/* Extra - Nav Tab Panels */
+.panel.with-nav-tabs .panel-heading{
+    padding: 5px 5px 0 5px;
+}
+.panel.with-nav-tabs .nav-tabs{
+	border-bottom: none;
+}
+.panel.with-nav-tabs .nav-justified{
+	margin-bottom: -1px;
+}
+/* Extra - Nav Tab Panels */
+.with-nav-tabs.panel-default .nav-tabs > li > a,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+}
+.with-nav-tabs.panel-default .nav-tabs > .open > a,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
+    color: #777;
+	background-color: rgba(0,0,0,0.02);
+	border-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
+	color: #555;
+	background-color: #fff;
+	border-color: #ddd;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f5f5f5;
+    border-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #777;   
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ddd;
+}
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #555;
+}
+/* PANEL PRIMARY */
+.with-nav-tabs.panel-primary .nav-tabs > li > a,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+    color: #fff;
+}
+.with-nav-tabs.panel-primary .nav-tabs > .open > a,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li > a:focus {
+	color: #fff;
+	background-color: #3071a9;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.active > a:focus {
+	color: #428bca;
+	background-color: #fff;
+	border-color: #428bca;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #428bca;
+    border-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #fff;   
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #3071a9;
+}
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-primary .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    background-color: #4a9fe9;
+}
+/* PANEL SUCCESS */
+.with-nav-tabs.panel-success .nav-tabs > li > a,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+}
+.with-nav-tabs.panel-success .nav-tabs > .open > a,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-success .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li > a:focus {
+	color: #3c763d;
+	background-color: #d6e9c6;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.active > a:focus {
+	color: #3c763d;
+	background-color: #fff;
+	border-color: #d6e9c6;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #3c763d;   
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #d6e9c6;
+}
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-success .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #3c763d;
+}
+/* PANEL INFO */
+.with-nav-tabs.panel-info .nav-tabs > li > a,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+}
+.with-nav-tabs.panel-info .nav-tabs > .open > a,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
+	color: #31708f;
+	background-color: #bce8f1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
+	color: #31708f;
+	background-color: #fff;
+	border-color: #bce8f1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #d9edf7;
+    border-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #31708f;   
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #bce8f1;
+}
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #31708f;
+}
+/* PANEL WARNING */
+.with-nav-tabs.panel-warning .nav-tabs > li > a,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+}
+.with-nav-tabs.panel-warning .nav-tabs > .open > a,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li > a:focus {
+	color: #8a6d3b;
+	background-color: #faebcc;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.active > a:focus {
+	color: #8a6d3b;
+	background-color: #fff;
+	border-color: #faebcc;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #fcf8e3;
+    border-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #8a6d3b; 
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #faebcc;
+}
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-warning .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #8a6d3b;
+}
+/* PANEL DANGER */
+.with-nav-tabs.panel-danger .nav-tabs > li > a,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+}
+.with-nav-tabs.panel-danger .nav-tabs > .open > a,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > .open > a:focus,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li > a:focus {
+	color: #a94442;
+	background-color: #ebccd1;
+	border-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.active > a:focus {
+	color: #a94442;
+	background-color: #fff;
+	border-color: #ebccd1;
+	border-bottom-color: transparent;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu {
+    background-color: #f2dede; 
+    border-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a {
+    color: #a94442; 
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
+    background-color: #ebccd1;
+}
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
+.with-nav-tabs.panel-danger .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-color: #a94442;
+}
+/* Extra - Nav Tab Panels */
+
+/* Extra - Navbar dropdown on user */
+.navbar-login{
+    width: 305px;
+    padding: 10px;
+    padding-bottom: 0px;
+}
+.navbar-login-session{
+    padding: 10px;
+    padding-bottom: 0px;
+    padding-top: 0px;
+}
+.navbar-login p{
+    color: #fff;
+}	
+.icon-size{
+    font-size: 87px;
+}
+/* Extra - Navbar dropdown on user */

webskins/Yeti/tmpl/BaseHeader.tmpl

@@ -7,15 +7,16 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 	<meta charset="UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<title>ZNC &mdash; <? VAR Title DEFAULT="Web Frontend" ?></title>
 	<? LOOP FAVLOOP ?>
-	<?IF HREF?><link rel="shortcut icon" href="<? VAR HREF ?>"><?ENDIF?>
+	<?IF HREF?><link rel="shortcut icon" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>"><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP CSSLoop ?>
-	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR HREF ?>" /><?ENDIF?>
+	<?IF HREF?><link rel="stylesheet" type="text/css" href="<? VAR URIPrefix TOP ?><? VAR HREF ?>" /><?ENDIF?>
 	<?ENDLOOP?>
 	<? LOOP JSLoop ?>
-	<?IF HREF?><script type="text/javascript" src="<? VAR HREF ?>"></script><?ENDIF?>
+	<?IF HREF?><script type="text/javascript" src="<? VAR URIPrefix TOP ?><? VAR HREF ?>"></script><?ENDIF?>
 	<?ENDLOOP?>	
 	 <? INC ExtraHeader.tmpl ?>
 </head>

webskins/_default_/pub/_default_.css

@@ -7,7 +7,8 @@ body {
   padding-top: 30px;
 }
 /* for BindHosts textarea */
-.form-control {
+textarea.form-control {
+  height: auto;
   word-wrap: break-word;
   white-space: -moz-pre-wrap;
   white-space: pre-wrap;
@@ -17,9 +18,7 @@ body {
   margin-bottom: 0px;
 }
 /* Switch & SwitchMini checkbox re-design */
-input[type=checkbox] {
-	visibility: hidden;
-}
+
 .checkboxSwitch,
 .checkboxSwitchMini {
 	position: relative;

webskins/_default_/pub/font-awesome.css

@@ -1,27 +1,28 @@
 /*!
- *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
+ *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
  */
 /* FONT PATH
  * -------------------------- */
 @font-face {
   font-family: 'FontAwesome';
-  src: url('fonts/fontawesome-webfont.eot?v=4.2.0');
-  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
+  src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
+  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style: normal;
 }
 .fa {
   display: inline-block;
-  font: normal normal normal 14px/1 FontAwesome;
-  font-size: inherit;
-  text-rendering: auto;
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 /* makes the font 33% larger relative to the icon container */
 .fa-lg {
-  font-size: 1.33333333em;
+  font-size: 1.3333333333333333em;
   line-height: 0.75em;
   vertical-align: -15%;
 }
@@ -38,12 +39,12 @@
   font-size: 5em;
 }
 .fa-fw {
-  width: 1.28571429em;
+  width: 1.2857142857142858em;
   text-align: center;
 }
 .fa-ul {
   padding-left: 0;
-  margin-left: 2.14285714em;
+  margin-left: 2.142857142857143em;
   list-style-type: none;
 }
 .fa-ul > li {
@@ -51,13 +52,13 @@
 }
 .fa-li {
   position: absolute;
-  left: -2.14285714em;
-  width: 2.14285714em;
-  top: 0.14285714em;
+  left: -2.142857142857143em;
+  width: 2.142857142857143em;
+  top: 0.14285714285714285em;
   text-align: center;
 }
 .fa-li.fa-lg {
-  left: -1.85714286em;
+  left: -1.8571428571428572em;
 }
 .fa-border {
   padding: .2em .25em .15em;
@@ -77,66 +78,91 @@
   margin-left: .3em;
 }
 .fa-spin {
-  -webkit-animation: fa-spin 2s infinite linear;
-  animation: fa-spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
 }
-@-webkit-keyframes fa-spin {
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+  }
+  100% {
+    -moz-transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
   0% {
     -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
   }
   100% {
     -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
   }
 }
-@keyframes fa-spin {
+@-o-keyframes spin {
+  0% {
+    -o-transform: rotate(0deg);
+  }
+  100% {
+    -o-transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -ms-transform: rotate(0deg);
+  }
+  100% {
+    -ms-transform: rotate(359deg);
+  }
+}
+@keyframes spin {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
   100% {
-    -webkit-transform: rotate(359deg);
     transform: rotate(359deg);
   }
 }
 .fa-rotate-90 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
   -webkit-transform: rotate(90deg);
+  -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
+  -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }
 .fa-rotate-180 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
   -webkit-transform: rotate(180deg);
+  -moz-transform: rotate(180deg);
   -ms-transform: rotate(180deg);
+  -o-transform: rotate(180deg);
   transform: rotate(180deg);
 }
 .fa-rotate-270 {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
   -webkit-transform: rotate(270deg);
+  -moz-transform: rotate(270deg);
   -ms-transform: rotate(270deg);
+  -o-transform: rotate(270deg);
   transform: rotate(270deg);
 }
 .fa-flip-horizontal {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
   -webkit-transform: scale(-1, 1);
+  -moz-transform: scale(-1, 1);
   -ms-transform: scale(-1, 1);
+  -o-transform: scale(-1, 1);
   transform: scale(-1, 1);
 }
 .fa-flip-vertical {
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
   -webkit-transform: scale(1, -1);
+  -moz-transform: scale(1, -1);
   -ms-transform: scale(1, -1);
+  -o-transform: scale(1, -1);
   transform: scale(1, -1);
 }
-:root .fa-rotate-90,
-:root .fa-rotate-180,
-:root .fa-rotate-270,
-:root .fa-flip-horizontal,
-:root .fa-flip-vertical {
-  filter: none;
-}
 .fa-stack {
   position: relative;
   display: inline-block;
@@ -202,8 +228,6 @@
 .fa-check:before {
   content: "\f00c";
 }
-.fa-remove:before,
-.fa-close:before,
 .fa-times:before {
   content: "\f00d";
 }
@@ -345,8 +369,6 @@
 .fa-video-camera:before {
   content: "\f03d";
 }
-.fa-photo:before,
-.fa-image:before,
 .fa-picture-o:before {
   content: "\f03e";
 }
@@ -533,8 +555,7 @@
 .fa-arrows-h:before {
   content: "\f07e";
 }
-.fa-bar-chart-o:before,
-.fa-bar-chart:before {
+.fa-bar-chart-o:before {
   content: "\f080";
 }
 .fa-twitter-square:before {
@@ -711,8 +732,6 @@
 .fa-square:before {
   content: "\f0c8";
 }
-.fa-navicon:before,
-.fa-reorder:before,
 .fa-bars:before {
   content: "\f0c9";
 }
@@ -772,11 +791,11 @@
   content: "\f0dc";
 }
 .fa-sort-down:before,
-.fa-sort-desc:before {
+.fa-sort-asc:before {
   content: "\f0dd";
 }
 .fa-sort-up:before,
-.fa-sort-asc:before {
+.fa-sort-desc:before {
   content: "\f0de";
 }
 .fa-envelope:before {
@@ -966,10 +985,12 @@
 .fa-code:before {
   content: "\f121";
 }
-.fa-mail-reply-all:before,
 .fa-reply-all:before {
   content: "\f122";
 }
+.fa-mail-reply-all:before {
+  content: "\f122";
+}
 .fa-star-half-empty:before,
 .fa-star-half-full:before,
 .fa-star-half-o:before {
@@ -1315,358 +1336,3 @@
 .fa-plus-square-o:before {
   content: "\f196";
 }
-.fa-space-shuttle:before {
-  content: "\f197";
-}
-.fa-slack:before {
-  content: "\f198";
-}
-.fa-envelope-square:before {
-  content: "\f199";
-}
-.fa-wordpress:before {
-  content: "\f19a";
-}
-.fa-openid:before {
-  content: "\f19b";
-}
-.fa-institution:before,
-.fa-bank:before,
-.fa-university:before {
-  content: "\f19c";
-}
-.fa-mortar-board:before,
-.fa-graduation-cap:before {
-  content: "\f19d";
-}
-.fa-yahoo:before {
-  content: "\f19e";
-}
-.fa-google:before {
-  content: "\f1a0";
-}
-.fa-reddit:before {
-  content: "\f1a1";
-}
-.fa-reddit-square:before {
-  content: "\f1a2";
-}
-.fa-stumbleupon-circle:before {
-  content: "\f1a3";
-}
-.fa-stumbleupon:before {
-  content: "\f1a4";
-}
-.fa-delicious:before {
-  content: "\f1a5";
-}
-.fa-digg:before {
-  content: "\f1a6";
-}
-.fa-pied-piper:before {
-  content: "\f1a7";
-}
-.fa-pied-piper-alt:before {
-  content: "\f1a8";
-}
-.fa-drupal:before {
-  content: "\f1a9";
-}
-.fa-joomla:before {
-  content: "\f1aa";
-}
-.fa-language:before {
-  content: "\f1ab";
-}
-.fa-fax:before {
-  content: "\f1ac";
-}
-.fa-building:before {
-  content: "\f1ad";
-}
-.fa-child:before {
-  content: "\f1ae";
-}
-.fa-paw:before {
-  content: "\f1b0";
-}
-.fa-spoon:before {
-  content: "\f1b1";
-}
-.fa-cube:before {
-  content: "\f1b2";
-}
-.fa-cubes:before {
-  content: "\f1b3";
-}
-.fa-behance:before {
-  content: "\f1b4";
-}
-.fa-behance-square:before {
-  content: "\f1b5";
-}
-.fa-steam:before {
-  content: "\f1b6";
-}
-.fa-steam-square:before {
-  content: "\f1b7";
-}
-.fa-recycle:before {
-  content: "\f1b8";
-}
-.fa-automobile:before,
-.fa-car:before {
-  content: "\f1b9";
-}
-.fa-cab:before,
-.fa-taxi:before {
-  content: "\f1ba";
-}
-.fa-tree:before {
-  content: "\f1bb";
-}
-.fa-spotify:before {
-  content: "\f1bc";
-}
-.fa-deviantart:before {
-  content: "\f1bd";
-}
-.fa-soundcloud:before {
-  content: "\f1be";
-}
-.fa-database:before {
-  content: "\f1c0";
-}
-.fa-file-pdf-o:before {
-  content: "\f1c1";
-}
-.fa-file-word-o:before {
-  content: "\f1c2";
-}
-.fa-file-excel-o:before {
-  content: "\f1c3";
-}
-.fa-file-powerpoint-o:before {
-  content: "\f1c4";
-}
-.fa-file-photo-o:before,
-.fa-file-picture-o:before,
-.fa-file-image-o:before {
-  content: "\f1c5";
-}
-.fa-file-zip-o:before,
-.fa-file-archive-o:before {
-  content: "\f1c6";
-}
-.fa-file-sound-o:before,
-.fa-file-audio-o:before {
-  content: "\f1c7";
-}
-.fa-file-movie-o:before,
-.fa-file-video-o:before {
-  content: "\f1c8";
-}
-.fa-file-code-o:before {
-  content: "\f1c9";
-}
-.fa-vine:before {
-  content: "\f1ca";
-}
-.fa-codepen:before {
-  content: "\f1cb";
-}
-.fa-jsfiddle:before {
-  content: "\f1cc";
-}
-.fa-life-bouy:before,
-.fa-life-buoy:before,
-.fa-life-saver:before,
-.fa-support:before,
-.fa-life-ring:before {
-  content: "\f1cd";
-}
-.fa-circle-o-notch:before {
-  content: "\f1ce";
-}
-.fa-ra:before,
-.fa-rebel:before {
-  content: "\f1d0";
-}
-.fa-ge:before,
-.fa-empire:before {
-  content: "\f1d1";
-}
-.fa-git-square:before {
-  content: "\f1d2";
-}
-.fa-git:before {
-  content: "\f1d3";
-}
-.fa-hacker-news:before {
-  content: "\f1d4";
-}
-.fa-tencent-weibo:before {
-  content: "\f1d5";
-}
-.fa-qq:before {
-  content: "\f1d6";
-}
-.fa-wechat:before,
-.fa-weixin:before {
-  content: "\f1d7";
-}
-.fa-send:before,
-.fa-paper-plane:before {
-  content: "\f1d8";
-}
-.fa-send-o:before,
-.fa-paper-plane-o:before {
-  content: "\f1d9";
-}
-.fa-history:before {
-  content: "\f1da";
-}
-.fa-circle-thin:before {
-  content: "\f1db";
-}
-.fa-header:before {
-  content: "\f1dc";
-}
-.fa-paragraph:before {
-  content: "\f1dd";
-}
-.fa-sliders:before {
-  content: "\f1de";
-}
-.fa-share-alt:before {
-  content: "\f1e0";
-}
-.fa-share-alt-square:before {
-  content: "\f1e1";
-}
-.fa-bomb:before {
-  content: "\f1e2";
-}
-.fa-soccer-ball-o:before,
-.fa-futbol-o:before {
-  content: "\f1e3";
-}
-.fa-tty:before {
-  content: "\f1e4";
-}
-.fa-binoculars:before {
-  content: "\f1e5";
-}
-.fa-plug:before {
-  content: "\f1e6";
-}
-.fa-slideshare:before {
-  content: "\f1e7";
-}
-.fa-twitch:before {
-  content: "\f1e8";
-}
-.fa-yelp:before {
-  content: "\f1e9";
-}
-.fa-newspaper-o:before {
-  content: "\f1ea";
-}
-.fa-wifi:before {
-  content: "\f1eb";
-}
-.fa-calculator:before {
-  content: "\f1ec";
-}
-.fa-paypal:before {
-  content: "\f1ed";
-}
-.fa-google-wallet:before {
-  content: "\f1ee";
-}
-.fa-cc-visa:before {
-  content: "\f1f0";
-}
-.fa-cc-mastercard:before {
-  content: "\f1f1";
-}
-.fa-cc-discover:before {
-  content: "\f1f2";
-}
-.fa-cc-amex:before {
-  content: "\f1f3";
-}
-.fa-cc-paypal:before {
-  content: "\f1f4";
-}
-.fa-cc-stripe:before {
-  content: "\f1f5";
-}
-.fa-bell-slash:before {
-  content: "\f1f6";
-}
-.fa-bell-slash-o:before {
-  content: "\f1f7";
-}
-.fa-trash:before {
-  content: "\f1f8";
-}
-.fa-copyright:before {
-  content: "\f1f9";
-}
-.fa-at:before {
-  content: "\f1fa";
-}
-.fa-eyedropper:before {
-  content: "\f1fb";
-}
-.fa-paint-brush:before {
-  content: "\f1fc";
-}
-.fa-birthday-cake:before {
-  content: "\f1fd";
-}
-.fa-area-chart:before {
-  content: "\f1fe";
-}
-.fa-pie-chart:before {
-  content: "\f200";
-}
-.fa-line-chart:before {
-  content: "\f201";
-}
-.fa-lastfm:before {
-  content: "\f202";
-}
-.fa-lastfm-square:before {
-  content: "\f203";
-}
-.fa-toggle-off:before {
-  content: "\f204";
-}
-.fa-toggle-on:before {
-  content: "\f205";
-}
-.fa-bicycle:before {
-  content: "\f206";
-}
-.fa-bus:before {
-  content: "\f207";
-}
-.fa-ioxhost:before {
-  content: "\f208";
-}
-.fa-angellist:before {
-  content: "\f209";
-}
-.fa-cc:before {
-  content: "\f20a";
-}
-.fa-shekel:before,
-.fa-sheqel:before,
-.fa-ils:before {
-  content: "\f20b";
-}
-.fa-meanpath:before {
-  content: "\f20c";
-}