Add example top-5

admin/pages/menus.php

@@ -23,7 +23,6 @@ if (!hasFlag(FLAG_CONTENT_MENUS) && !superAdmin()) {
 }
 
 $pluginThemes = Plugins::getThemes();
-$groups = new OTS_Groups_List();
 
 if (isset($_POST['template'])) {
 	$template = $_POST['template'];
@@ -33,8 +32,6 @@ if (isset($_POST['template'])) {
 		$post_menu_link = $_POST['menu_link'] ?? [];
 		$post_menu_blank = $_POST['menu_blank'] ?? [];
 		$post_menu_color = $_POST['menu_color'] ?? [];
-		$post_menu_access = $_POST['menu_access'] ?? [];
-
 		if (count($post_menu) != count($post_menu_link)) {
 			echo 'Menu count is not equal menu links. Something went wrong when sending form.';
 			return;
@@ -53,7 +50,6 @@ if (isset($_POST['template'])) {
 						'link' => $post_menu_link[$category][$i],
 						'blank' => $post_menu_blank[$category][$i] == 'on' ? 1 : 0,
 						'color' => str_replace('#', '', $post_menu_color[$category][$i]),
-						'access' => $post_menu_access[$category][$i],
 						'category' => $category,
 						'ordering' => $i
 					]);
@@ -126,7 +122,7 @@ if (isset($_POST['template'])) {
 	?>
 	<?php
 	$menus = Menu::query()
-		->select('name', 'link', 'access', 'blank', 'color', 'category', 'ordering')
+		->select('name', 'link', 'blank', 'color', 'category', 'ordering')
 		->where('enabled', 1)
 		->where('template', $template)
 		->orderBy('ordering')
@@ -155,34 +151,11 @@ if (isset($_POST['template'])) {
 									foreach ($menus[$id] as $menu):
 										$color = (empty($menu['color']) ? ($cat['default_links_color'] ?? ($config['menu_default_links_color'] ?? ($config['menu_default_color'] ?? '#ffffff'))) : '#' . $menu['color']);
 										?>
-										<li class="ui-state-default" id="list-<?php echo $id ?>-<?php echo $i ?>">
-											<label class="label_menu_name">Name: <input type="text" name="menu[<?php echo $id ?>][]" class="form-control menu-name" value="<?php echo escapeHtml($menu['name']); ?>"/>
-											</label>
-
-											<label class="label_menu_link">Link: <input type="text" name="menu_link[<?= $id ?>][]" class="form-control menu-link" value="<?php echo $menu['link'] ?>"/>
-											</label>
-
-											<br/>
-
-											<div class="menu-options-row">
-
-												<label>Access:
-													<select name="menu_access[<?= $id ?>][]" class="form-control menu-access">
-														<option value="0" <?= ($menu['access'] == 0 ? 'selected' : ''); ?>>Guest*</option>
-														<?php foreach ($groups->getGroups() as $group): ?>
-															<option value="<?= $group->getId(); ?>" <?= ($menu['access'] == $group->getId() ? 'selected' : ''); ?>><?= ucfirst($group->getName()); ?></option>
-														<?php endforeach; ?>
-													</select>
-												</label>
-
-												<label>Color: <input class="menu-color" type="color" name="menu_color[<?php echo $id ?>][]" value="<?php echo $color; ?>"/>
-												</label>
-
-												<input type="hidden" name="menu_blank[<?php echo $id ?>][]" class="menu-blank" value="0"/>
-												<label><input type="checkbox" class="menu-blank-checkbox" <?php echo($menu['blank'] == 1 ? 'checked' : '') ?>/><span title="Open in New Window">New Window</span></label>
-
-											</div>
-
+										<li class="ui-state-default" id="list-<?php echo $id ?>-<?php echo $i ?>"><label>Name:</label> <input type="text" name="menu[<?php echo $id ?>][]" value="<?php echo escapeHtml($menu['name']); ?>"/>
+											<label>Link:</label> <input type="text" name="menu_link[<?php echo $id ?>][]" value="<?php echo $menu['link'] ?>"/>
+											<input type="hidden" name="menu_blank[<?php echo $id ?>][]" value="0"/>
+											<label><input class="blank-checkbox" type="checkbox" <?php echo($menu['blank'] == 1 ? 'checked' : '') ?>/><span title="Open in New Window">New Window</span></label>
+											<input class="color-picker" type="text" name="menu_color[<?php echo $id ?>][]" value="<?php echo $color; ?>"/>
 											<a class="remove-button" id="remove-button-<?php echo $id ?>-<?php echo $i ?>"><i class="fas fa-trash"></a></i></li>
 										<?php $i++; $last_id[$id] = $i;
 									endforeach;

common.php

@@ -27,7 +27,7 @@ if (version_compare(phpversion(), '8.1', '<')) die('PHP version 8.1 or higher is
 
 const MYAAC = true;
 const MYAAC_VERSION = '2.0-dev';
-const DATABASE_VERSION = 48;
+const DATABASE_VERSION = 47;
 const TABLE_PREFIX = 'myaac_';
 define('START_TIME', microtime(true));
 define('MYAAC_OS', stripos(PHP_OS, 'WIN') === 0 ? 'WINDOWS' : (strtoupper(PHP_OS) === 'DARWIN' ? 'MAC' : 'LINUX'));

install/includes/schema.sql

@@ -102,7 +102,6 @@ CREATE TABLE IF NOT EXISTS `myaac_menu`
 	`template` varchar(255) NOT NULL,
 	`name` varchar(255) NOT NULL,
 	`link` varchar(255) NOT NULL,
-	`access` tinyint NOT NULL DEFAULT 0,
 	`blank` tinyint NOT NULL DEFAULT 0,
 	`color` varchar(6) NOT NULL DEFAULT '',
 	`category` int NOT NULL DEFAULT 1,

system/functions.php

@@ -17,6 +17,8 @@ use MyAAC\Models\Guild;
 use MyAAC\Models\House;
 use MyAAC\Models\Pages;
 use MyAAC\Models\Player;
+use MyAAC\Models\PlayerDeath;
+use MyAAC\Models\PlayerKillers;
 use MyAAC\News;
 use MyAAC\Plugins;
 use MyAAC\Settings;
@@ -1135,11 +1137,29 @@ function csrfProtect(): void
 	}
 }
 
-function getTopPlayers($limit = 5, $skill = 'level') {
+function getTopPlayers($limit = 5, $skill = POT::SKILL_LEVEL)
+{
 	global $db;
 
-	if ($skill === 'level') {
-		$skill = 'experience';
+	$skillOriginal = $skill;
+
+	if (is_string($skill)) {
+		$skills = [
+			'level' => POT::SKILL_LEVEL,
+			'experience' => POT::SKILL_LEVEL,
+
+			'magic' => POT::SKILL_MAGIC,
+			'maglevel' => POT::SKILL_MAGIC,
+
+			'balance' => SKILL_BALANCE,
+			'frags' => SKILL_FRAGS,
+		];
+
+		$skill = $skills[$skill] ?? null;
+	}
+
+	if (!is_numeric($skill)) {
+		throw new RuntimeException("getTopPlayers: Invalid skill: $skillOriginal");
 	}
 
 	return Cache::remember("top_{$limit}_{$skill}", 2 * 60, function () use ($db, $limit, $skill) {
@@ -1160,15 +1180,64 @@ function getTopPlayers($limit = 5, $skill = 'level') {
 			$columns[] = 'lookmount';
 		}
 
-		return Player::query()
+		$query = Player::query()
 			->select($columns)
 			->withOnlineStatus()
 			->notDeleted()
 			->where('group_id', '<', setting('core.highscores_groups_hidden'))
 			->whereNotIn('id', setting('core.highscores_ids_hidden'))
 			->where('account_id', '!=', 1)
-			->orderByDesc($skill)
-			->limit($limit)
+			->orderByDesc('value');
+
+		if ($limit > 0) {
+			$query->limit($limit);
+		}
+
+		if ($skill >= POT::SKILL_FIRST && $skill <= POT::SKILL_LAST) { // skills
+			if ($db->hasColumn('players', 'skill_fist')) {// tfs 1.0
+				$skill_ids = array(
+					POT::SKILL_FIST => 'skill_fist',
+					POT::SKILL_CLUB => 'skill_club',
+					POT::SKILL_SWORD => 'skill_sword',
+					POT::SKILL_AXE => 'skill_axe',
+					POT::SKILL_DIST => 'skill_dist',
+					POT::SKILL_SHIELD => 'skill_shielding',
+					POT::SKILL_FISH => 'skill_fishing',
+				);
+
+				$query
+					->addSelect($skill_ids[$skill] . ' as value')
+					->orderByDesc($skill_ids[$skill] . '_tries');
+			} else {
+				$query
+					->join('player_skills', 'player_skills.player_id', '=', 'players.id')
+					->where('skillid', $skill)
+					->addSelect('player_skills.value as value');
+			}
+		} else if ($skill == SKILL_FRAGS) // frags
+		{
+			if ($db->hasTable('player_killers')) {
+				$query->addSelect(['value' => PlayerKillers::whereColumn('player_killers.player_id', 'players.id')->selectRaw('COUNT(*)')]);
+			} else {
+				$query->addSelect(['value' => PlayerDeath::unjustified()->whereColumn('player_deaths.killed_by', 'players.name')->selectRaw('COUNT(*)')]);
+			}
+		} else if ($skill == SKILL_BALANCE) // balance
+		{
+			$query
+				->addSelect('players.balance as value');
+		} else {
+			if ($skill == POT::SKILL_MAGIC) {
+				$query
+					->addSelect('players.maglevel as value', 'players.maglevel')
+					->orderByDesc('manaspent');
+			} else { // level
+				$query
+					->addSelect('players.level as value', 'players.experience')
+					->orderByDesc('experience');
+			}
+		}
+
+		return $query
 			->get()
 			->map(function ($e, $i) {
 				$row = $e->toArray();

system/migrations/48.php

@@ -1,16 +0,0 @@
-<?php
-/**
- * @var OTS_DB_MySQL $db
- */
-
-$up = function () use ($db) {
-	if (!$db->hasColumn(TABLE_PREFIX . 'menu', 'access')) {
-		$db->addColumn(TABLE_PREFIX . 'menu', 'access', 'TINYINT NOT NULL DEFAULT 0 AFTER `link`');
-	}
-};
-
-$down = function () use ($db) {
-	if ($db->hasColumn(TABLE_PREFIX . 'menu', 'access')) {
-		$db->dropColumn(TABLE_PREFIX . 'menu', 'access');
-	}
-};

system/pages/#examples/top-5.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Example of using getTopPlayers() function
+ * to display the best players for each skill
+ */
+defined('MYAAC') or die('Direct access not allowed!');
+
+$skills = [
+	'magic', 'level',
+	'balance', 'frags',
+	POT::SKILL_FIST, POT::SKILL_CLUB,
+	POT::SKILL_SWORD, POT::SKILL_AXE,
+	POT::SKILL_DISTANCE, POT::SKILL_SHIELD,
+	POT::SKILL_FISH
+];
+
+foreach ($skills as $skill) {?>
+<ul>
+<?php
+	echo '<strong>' . ucwords(is_string($skill) ? $skill : getSkillName($skill)) . '</strong>';
+	foreach (getTopPlayers(5, $skill) as $player) {?>
+		<li><?= $player['rank'] . '. ' . $player['name'] . ' - ' . $player['value']; ?></li>
+		<?php
+	}
+	?>
+</ul>
+<?php
+}
+

system/src/Models/Menu.php

@@ -9,6 +9,6 @@ class Menu extends Model {
 
 	public $timestamps = false;
 
-	protected $fillable = ['template', 'name', 'link', 'access', 'blank', 'color', 'category', 'ordering', 'enabled'];
+	protected $fillable = ['template', 'name', 'link', 'blank', 'color', 'category', 'ordering', 'enabled'];
 
 }

system/template.php

@@ -146,10 +146,10 @@ if($twig_loader) {
 
 function get_template_menus(): array
 {
-	global $template_name, $logged_access;
+	global $template_name;
 
 	$result = Cache::remember('template_menus_' . $template_name, 10 * 60, function () use ($template_name) {
-		$result = Menu::select(['name', 'link', 'access', 'blank', 'color', 'category'])
+		$result = Menu::select(['name', 'link', 'blank', 'color', 'category'])
 			->where('template', $template_name)
 			->orderBy('category')
 			->orderBy('ordering')
@@ -163,10 +163,6 @@ function get_template_menus(): array
 
 	$menus = [];
 	foreach($result as $menu) {
-		if ($menu['access'] > $logged_access) {
-			continue;
-		}
-
 		if (empty($menu['link'])) {
 			$menu['link'] = 'news';
 		}

system/templates/admin.menus.header.html.twig

@@ -2,8 +2,7 @@
 	<p class="note">You are editing: {{ template }}<br/><br/>
 		Hint: You can drag menu items.<br/>
 		Hint: Add links to external sites using: <b>http://</b> or <b>https://</b> prefix.<br/>
-		Not all templates support blank and colorful links.<br/>
-		* Guest means everyone will see the link. Player means registered and logged-in user.
+		Not all templates support blank and colorful links.
 	</p>
 	<div class="row text-center">
 		<div class="col-md-2 col-sm-1"></div>

system/templates/admin.menus.js.html.twig

@@ -14,62 +14,42 @@
 	colors[{{ cat }}] = '{{ options['default_links_color'] ?? (menuDefaultLinksColor ?? config('menu_default_color')) }}';
 	{% endfor %}
 
-	function confirmRemoveMenuItem(that)
-	{
-		let id = $(that).attr("id");
-		if (confirm('Are you sure, that you want to remove this element?')) {
-			$('#list-' + id.replace('remove-button-', '')).remove();
-		}
-	}
-
 	$(function () {
 		const $sortable = $(".sortable");
 		$sortable.sortable();
 		$sortable.disableSelection();
 
 		$(".remove-button").on('click', function () {
-			confirmRemoveMenuItem(this);
+			var id = $(this).attr("id");
+			$('#list-' + id.replace('remove-button-', '')).remove();
 		});
 
 		$(".add-button").on('click', function () {
-			let cat = $(this).attr("id").replace('add-button-', '');
-			let id = last_id[cat];
+			var cat = $(this).attr("id").replace('add-button-', '');
+			var id = last_id[cat];
 			last_id[cat]++;
 			const color = colors[cat];
-
-			let copy = $('.ui-state-default:first').clone();
-
-			copy.attr('id', 'list-' + cat + '-' + id);
-
-			copy.find('.menu-name').val('').attr('name', 'menu[' + cat + '][]');
-			copy.find('.menu-link').val('').attr('name', 'menu_link[' + cat + '][]');
-			copy.find('.menu-access').val('0').attr('name', 'menu_access[' + cat + '][]');
-			copy.find('.menu-color').val(color).attr('name', 'menu_color[' + cat + '][]');
-			copy.find('.menu-blank').attr('name', 'menu_blank[' + cat + '][]');
-			copy.find('.menu-blank-checkbox').prop('checked', false);
-
-			copy.find('.remove-button').attr('id', 'remove-button-' + cat + '-' + id);
-
-			$('#sortable-' + cat).append(copy);
-
+			$('#sortable-' + cat).append('<li class="ui-state-default" id="list-' + cat + '-' + id + '"><label>Name:</label> <input type="text" name="menu[' + cat + '][]" value=""/> <label>Link:</label> <input type="text" name="menu_link[' + cat + '][]" value=""/><input type="hidden" name="menu_blank[' + cat + '][]" value="0" /> <label><input class="blank-checkbox" type="checkbox"/><span title="Open in New Window">New Window</span></label> <input class="color-picker" type="text" name="menu_color[' + cat + '][]" value="#' + color + '" /> <a class="remove-button" id="remove-button-' + cat + '-' + id + '"><i class="fas fa-trash"></i></a></li>'); //add input bo
 			$('#remove-button-' + cat + '-' + id).on('click', function () {
-				confirmRemoveMenuItem(this);
+				$('#list-' + $(this).attr("id").replace('remove-button-', '')).remove();
 			});
+
+			initializeSpectrum();
 		});
 
 		$("#menus-form").on('submit', function (e) {
-			$('.menu-blank-checkbox:not(:checked)').each(function (i, obj) {
+			$('.blank-checkbox:not(:checked)').each(function (i, obj) {
 				$(obj).parent().prev().val("off");
 			});
 
-			$('.menu-blank-checkbox:checked').each(function (i, obj) {
+			$('.blank-checkbox:checked').each(function (i, obj) {
 				$(obj).parent().prev().val("on");
 			});
 		});
 
 	});
 </script>
-<style>
+<style type="text/css">
 	.sortable {
 		list-style-type: none;
 		margin: 0;
@@ -80,16 +60,24 @@
 	.remove-button, .add-button {
 		cursor: pointer;
 	}
-
-	.ui-sortable-handle {
-		padding: 10px;
-	}
-
-	.label_menu_name, .label_menu_link {
-		width: 45%;
-	}
-
-	.menu-name, .menu-link {
-		width: 100%;
-	}
 </style>
+<script type="text/javascript" src="{{ constant('BASE_URL') }}tools/js/spectrum.js"></script>
+<link type="text/css" rel="stylesheet" href="{{ constant('BASE_URL') }}tools/css/spectrum.css"/>
+<script type="text/javascript">
+	$(function () {
+		initializeSpectrum();
+	});
+
+	function initializeSpectrum() {
+		$(".color-picker").spectrum({
+			preferredFormat: "hex",
+			showInput: true,
+			showPalette: true,
+			palette: [
+				['black', 'white', 'blanchedalmond',
+					'rgb(255, 128, 0);', 'hsv 100 70 50'],
+				['red', 'yellow', 'green', 'blue', 'violet']
+			]
+		});
+	}
+</script>

tools/css/spectrum.css

@@ -0,0 +1,507 @@
+/***
+Spectrum Colorpicker v1.8.0
+https://github.com/bgrins/spectrum
+Author: Brian Grinstead
+License: MIT
+***/
+
+.sp-container {
+    position:absolute;
+    top:0;
+    left:0;
+    display:inline-block;
+    *display: inline;
+    *zoom: 1;
+    /* https://github.com/bgrins/spectrum/issues/40 */
+    z-index: 9999994;
+    overflow: hidden;
+}
+.sp-container.sp-flat {
+    position: relative;
+}
+
+/* Fix for * { box-sizing: border-box; } */
+.sp-container,
+.sp-container * {
+    -webkit-box-sizing: content-box;
+       -moz-box-sizing: content-box;
+            box-sizing: content-box;
+}
+
+/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
+.sp-top {
+  position:relative;
+  width: 100%;
+  display:inline-block;
+}
+.sp-top-inner {
+   position:absolute;
+   top:0;
+   left:0;
+   bottom:0;
+   right:0;
+}
+.sp-color {
+    position: absolute;
+    top:0;
+    left:0;
+    bottom:0;
+    right:20%;
+}
+.sp-hue {
+    position: absolute;
+    top:0;
+    right:0;
+    bottom:0;
+    left:84%;
+    height: 100%;
+}
+
+.sp-clear-enabled .sp-hue {
+    top:33px;
+    height: 77.5%;
+}
+
+.sp-fill {
+    padding-top: 80%;
+}
+.sp-sat, .sp-val {
+    position: absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+}
+
+.sp-alpha-enabled .sp-top {
+    margin-bottom: 18px;
+}
+.sp-alpha-enabled .sp-alpha {
+    display: block;
+}
+.sp-alpha-handle {
+    position:absolute;
+    top:-4px;
+    bottom: -4px;
+    width: 6px;
+    left: 50%;
+    cursor: pointer;
+    border: 1px solid black;
+    background: white;
+    opacity: .8;
+}
+.sp-alpha {
+    display: none;
+    position: absolute;
+    bottom: -14px;
+    right: 0;
+    left: 0;
+    height: 8px;
+}
+.sp-alpha-inner {
+    border: solid 1px #333;
+}
+
+.sp-clear {
+    display: none;
+}
+
+.sp-clear.sp-clear-display {
+    background-position: center;
+}
+
+.sp-clear-enabled .sp-clear {
+    display: block;
+    position:absolute;
+    top:0px;
+    right:0;
+    bottom:0;
+    left:84%;
+    height: 28px;
+}
+
+/* Don't allow text selection */
+.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
+    -webkit-user-select:none;
+    -moz-user-select: -moz-none;
+    -o-user-select:none;
+    user-select: none;
+}
+
+.sp-container.sp-input-disabled .sp-input-container {
+    display: none;
+}
+.sp-container.sp-buttons-disabled .sp-button-container {
+    display: none;
+}
+.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
+    display: none;
+}
+.sp-palette-only .sp-picker-container {
+    display: none;
+}
+.sp-palette-disabled .sp-palette-container {
+    display: none;
+}
+
+.sp-initial-disabled .sp-initial {
+    display: none;
+}
+
+
+/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
+.sp-sat {
+    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
+    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
+    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
+    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
+}
+.sp-val {
+    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
+    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
+    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
+    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
+}
+
+.sp-hue {
+    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
+    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+}
+
+/* IE filters do not support multiple color stops.
+   Generate 6 divs, line them up, and do two color gradients for each.
+   Yes, really.
+ */
+.sp-1 {
+    height:17%;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
+}
+.sp-2 {
+    height:16%;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
+}
+.sp-3 {
+    height:17%;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
+}
+.sp-4 {
+    height:17%;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
+}
+.sp-5 {
+    height:16%;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
+}
+.sp-6 {
+    height:17%;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
+}
+
+.sp-hidden {
+    display: none !important;
+}
+
+/* Clearfix hack */
+.sp-cf:before, .sp-cf:after { content: ""; display: table; }
+.sp-cf:after { clear: both; }
+.sp-cf { *zoom: 1; }
+
+/* Mobile devices, make hue slider bigger so it is easier to slide */
+@media (max-device-width: 480px) {
+    .sp-color { right: 40%; }
+    .sp-hue { left: 63%; }
+    .sp-fill { padding-top: 60%; }
+}
+.sp-dragger {
+   border-radius: 5px;
+   height: 5px;
+   width: 5px;
+   border: 1px solid #fff;
+   background: #000;
+   cursor: pointer;
+   position:absolute;
+   top:0;
+   left: 0;
+}
+.sp-slider {
+    position: absolute;
+    top:0;
+    cursor:pointer;
+    height: 3px;
+    left: -1px;
+    right: -1px;
+    border: 1px solid #000;
+    background: white;
+    opacity: .8;
+}
+
+/*
+Theme authors:
+Here are the basic themeable display options (colors, fonts, global widths).
+See http://bgrins.github.io/spectrum/themes/ for instructions.
+*/
+
+.sp-container {
+    border-radius: 0;
+    background-color: #ECECEC;
+    border: solid 1px #f0c49B;
+    padding: 0;
+}
+.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
+    font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.sp-top {
+    margin-bottom: 3px;
+}
+.sp-color, .sp-hue, .sp-clear {
+    border: solid 1px #666;
+}
+
+/* Input */
+.sp-input-container {
+    float:right;
+    width: 100px;
+    margin-bottom: 4px;
+}
+.sp-initial-disabled  .sp-input-container {
+    width: 100%;
+}
+.sp-input {
+   font-size: 12px !important;
+   border: 1px inset;
+   padding: 4px 5px;
+   margin: 0;
+   width: 100%;
+   background:transparent;
+   border-radius: 3px;
+   color: #222;
+}
+.sp-input:focus  {
+    border: 1px solid orange;
+}
+.sp-input.sp-validation-error {
+    border: 1px solid red;
+    background: #fdd;
+}
+.sp-picker-container , .sp-palette-container {
+    float:left;
+    position: relative;
+    padding: 10px;
+    padding-bottom: 300px;
+    margin-bottom: -290px;
+}
+.sp-picker-container {
+    width: 172px;
+    border-left: solid 1px #fff;
+}
+
+/* Palettes */
+.sp-palette-container {
+    border-right: solid 1px #ccc;
+}
+
+.sp-palette-only .sp-palette-container {
+    border: 0;
+}
+
+.sp-palette .sp-thumb-el {
+    display: block;
+    position:relative;
+    float:left;
+    width: 24px;
+    height: 15px;
+    margin: 3px;
+    cursor: pointer;
+    border:solid 2px transparent;
+}
+.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
+    border-color: orange;
+}
+.sp-thumb-el {
+    position:relative;
+}
+
+/* Initial */
+.sp-initial {
+    float: left;
+    border: solid 1px #333;
+}
+.sp-initial span {
+    width: 30px;
+    height: 25px;
+    border:none;
+    display:block;
+    float:left;
+    margin:0;
+}
+
+.sp-initial .sp-clear-display {
+    background-position: center;
+}
+
+/* Buttons */
+.sp-palette-button-container,
+.sp-button-container {
+    float: right;
+}
+
+/* Replacer (the little preview div that shows up instead of the <input>) */
+.sp-replacer {
+    margin:0;
+    overflow:hidden;
+    cursor:pointer;
+    padding: 4px;
+    display:inline-block;
+    *zoom: 1;
+    *display: inline;
+    border: solid 1px #91765d;
+    background: #eee;
+    color: #333;
+    vertical-align: middle;
+}
+.sp-replacer:hover, .sp-replacer.sp-active {
+    border-color: #F0C49B;
+    color: #111;
+}
+.sp-replacer.sp-disabled {
+    cursor:default;
+    border-color: silver;
+    color: silver;
+}
+.sp-dd {
+    padding: 2px 0;
+    height: 16px;
+    line-height: 16px;
+    float:left;
+    font-size:10px;
+}
+.sp-preview {
+    position:relative;
+    width:25px;
+    height: 20px;
+    border: solid 1px #222;
+    margin-right: 5px;
+    float:left;
+    z-index: 0;
+}
+
+.sp-palette {
+    *width: 220px;
+    max-width: 220px;
+}
+.sp-palette .sp-thumb-el {
+    width:16px;
+    height: 16px;
+    margin:2px 1px;
+    border: solid 1px #d0d0d0;
+}
+
+.sp-container {
+    padding-bottom:0;
+}
+
+
+/* Buttons: http://hellohappy.org/css3-buttons/ */
+.sp-container button {
+  background-color: #eeeeee;
+  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
+  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
+  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
+  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
+  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
+  border: 1px solid #ccc;
+  border-bottom: 1px solid #bbb;
+  border-radius: 3px;
+  color: #333;
+  font-size: 14px;
+  line-height: 1;
+  padding: 5px 4px;
+  text-align: center;
+  text-shadow: 0 1px 0 #eee;
+  vertical-align: middle;
+}
+.sp-container button:hover {
+    background-color: #dddddd;
+    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
+    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
+    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
+    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
+    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
+    border: 1px solid #bbb;
+    border-bottom: 1px solid #999;
+    cursor: pointer;
+    text-shadow: 0 1px 0 #ddd;
+}
+.sp-container button:active {
+    border: 1px solid #aaa;
+    border-bottom: 1px solid #888;
+    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+}
+.sp-cancel {
+    font-size: 11px;
+    color: #d93f3f !important;
+    margin:0;
+    padding:2px;
+    margin-right: 5px;
+    vertical-align: middle;
+    text-decoration:none;
+
+}
+.sp-cancel:hover {
+    color: #d93f3f !important;
+    text-decoration: underline;
+}
+
+
+.sp-palette span:hover, .sp-palette span.sp-thumb-active {
+    border-color: #000;
+}
+
+.sp-preview, .sp-alpha, .sp-thumb-el {
+    position:relative;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+}
+.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
+    display:block;
+    position:absolute;
+    top:0;left:0;bottom:0;right:0;
+}
+
+.sp-palette .sp-thumb-inner {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+}
+
+.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
+}
+
+.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
+}
+
+.sp-clear-display {
+    background-repeat:no-repeat;
+    background-position: center;
+    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
+}