Release 3.0.0-beta.35.0.0

Use a faster SVN workflow in release publishing automation [MAILPOET-913]

.circle_ci/apache/mailpoet.loc.conf

@@ -0,0 +1,14 @@
+Listen 8080
+
+<VirtualHost *:8080>
+  UseCanonicalName Off
+  ServerName mailpoet.loc
+  DocumentRoot /home/ubuntu/mailpoet/wordpress
+  DirectoryIndex index.php
+  LogLevel notice
+
+  <Directory /home/ubuntu/mailpoet/wordpress>
+    Require all granted
+  </Directory>
+</VirtualHost>
+

.circle_ci/fake-sendmail.rb

@@ -0,0 +1,8 @@
+#!/usr/bin/ruby
+path = "/tmp"
+Dir.mkdir(path) if !File.exists?(path)
+File.open("#{path}/mailpoet-#{Time.now.to_f}.txt", "w") do |f|
+    sleep 5
+    f.puts ARGV.inspect
+    $stdin.each_line { |line| f.puts line }
+end

.circle_ci/mailpoet_php.ini

@@ -0,0 +1,3 @@
+; For Unix only.  You may supply arguments as well (default: "sendmail -t -i").
+; http://php.net/sendmail-path
+sendmail_path = /home/ubuntu/mailpoet/.circle_ci/fake-sendmail.rb

.env.sample

@@ -13,4 +13,7 @@ WP_TEST_MAILER_MAILPOET_API=""
 WP_TEST_MAILER_SENDGRID_API=""
 WP_TEST_MAILER_SMTP_HOST=""
 WP_TEST_MAILER_SMTP_LOGIN=""
-WP_TEST_MAILER_SMTP_PASSWORD=""
+WP_TEST_MAILER_SMTP_PASSWORD=""
+WP_SVN_USERNAME=""
+WP_SVN_PASSWORD=""
+WP_TRANSIFEX_API_TOKEN=""

.gitignore

@@ -1,19 +1,22 @@
-.DS_Store
-TODO
-composer.phar
-/vendor
-tests/_output/*
-tests/acceptance.suite.yml
-tests/_support/_generated/*
-node_modules
-.env
-npm-debug.log
-!tasks/**
-/views/cache/**
-temp
-.idea
-wysija-newsletters.zip
-tests/javascript/testBundles
-assets/css/*.css
-assets/js/*.js
-.vagrant
+.DS_Store
+TODO
+composer.phar
+/vendor
+tests/_output/*
+tests/acceptance.suite.yml
+tests/_support/_generated/*
+node_modules
+.env
+npm-debug.log
+!tasks/**
+/views/cache/**
+temp
+.idea
+mailpoet.zip
+tests/javascript/testBundles
+assets/css/*.css
+assets/js/*.js
+.vagrant
+lang
+.mp_svn
+/nbproject/

.tx/config

@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[mp3.mailpoet]
+source_file = lang/mailpoet.pot
+file_filter = lang/mailpoet-<lang>.po
+source_lang = en_US
+type = PO
+minimum_perc = 75

CONTRIBUTING.md

@@ -5,30 +5,32 @@
 - CamelCase for classes.
 - camelCase for methods.
 - snake_case for variables and class properties.
-- Max line length at 80 chars.
-- Classes can be no longer than 100 LOC.
-- Methods can be no longer than 5 LOC.
-- Pass no more than 4 parameters/hash keys into a method.
 - Composition over Inheritance.
-- Comments are a code smell.
-- Routes can instantiate only one object.
+- Comments are a code smell. If you need to use a comment - see if same idea can be achieved by more clearly expressing code.
 - Require other classes with 'use' at the beginning of the class file.
 - Do not specify 'public' if method is public, it's implicit.
 - Always use guard clauses.
+- Ensure compatibility with PHP 5.3 and newer versions.
+- Cover your code in tests.
+
+Recommendations:
+- Max line length at 80 chars.
+- Keep classes under 100 LOC.
+- Keep methods under 10 LOC.
+- Pass no more than 4 parameters/hash keys into a method.
+- Keep Pull Requests small, under 100 LOC changed.
 
 ## Git flow.
 - Do not commit to master.
 - Open a short-living feature branch.
 - Open a pull request.
-- Add close #issue in pull request description.
+- Add Jira issue reference in the title of the Pull Request.
 - Work on the pull request.
-- Wait for confirmation before merging to master.
-- No one will accept a pull request that doesn't have 100% test coverage.
+- Wait for review and confirmation from another developer before merging to master.
 - Commit title no more than 80 chars, empty line after.
 - Commit description as long as you want, 80 chars wrap.
-- Keep the GitHub open issues count at less than 10.
 
 ## Issues creation.
+- Issues are managed on Jira.
 - Discuss issues on public Slack chats, discuss code in pull requests.
-- Organize features on Trello.
-- Open a small github issue only when it has been discussed.
+- Open a small Jira issue only when it has been discussed.

README.md

@@ -46,11 +46,21 @@ $ ./do compile:all
 $ ./do test:unit
 ```
 
+- JS tests (using Mocha):
+```sh
+$ ./do test:javascript
+```
+
 - Debug tests:
 ```sh
 $ ./do test:debug
 ```
 
+- Code linters and quality checkers:
+```sh
+$ ./do qa
+```
+
 # CSS
 - [Stylus](https://learnboost.github.io/stylus/)
 - [Nib extension](http://tj.github.io/nib/)
@@ -109,6 +119,7 @@ Once javascript is compiled with `./do compile:javascript`, your module will be
 ```php
 __()
 _n()
+_x()
 ```
 
 ```html
@@ -128,3 +139,39 @@ _n()
 - Handlebars.
 
 You can use Twig i18n functions in Handlebars, just load your template from a Twig view.
+
+# Build
+
+To build a plugin , run `./build.sh`.
+
+Some build process steps are described below (their dependencies etc.).
+
+## packtranslations step
+
+This step imports translations from Transifex and generates MO files. It requires:
+* `tx` client: https://docs.transifex.com/client/installing-the-client
+* `msgfmt` command (from Gettext package)
+Finally , a `WP_TRANSIFEX_API_TOKEN` environment variable should be initialized with a valid key.
+
+# Publish
+
+The `publish` command currently does the following:
+* Pushes translations POT file to Transifex;
+* Publishes the release in SVN.
+
+Before you run it, you need to:
+1. Ensure there is an up-to-date local copy of MailPoet SVN repository in `.mp_svn` directory by running `./do svn:checkout`.
+2. Have all your features merged in Git `master`, your `mailpoet.php` and `readme.txt` tagged with a new version.
+3. Run `./build.sh` to produce a `mailpoet.zip` distributable archive.
+
+Everything's ready? Then run `./do publish`.
+If the job goes fine, you'll get a message like this:
+```
+Go to '.mp_svn' and run 'svn ci -m "Release 3.0.0-beta.9"' to publish the
+release
+
+Run 'svn copy ...' to tag the release
+```
+It's quite literal: you can review the changes to be pushed and if you're satisfied, run the suggested command to finish the release publishing process.
+
+If you're confident, execute `./do publish --force` and your release will be published to the remote SVN repository without manual intervention (automatically). For easier authentication you might want to set `WP_SVN_USERNAME` and `WP_SVN_PASSWORD` environment variables.

RoboFile.php

@@ -3,14 +3,21 @@
 class RoboFile extends \Robo\Tasks {
 
   function install() {
-    $this->_exec('./composer.phar install');
-    $this->_exec('npm install');
+    return $this->taskExecStack()
+      ->stopOnFail()
+      ->exec('./composer.phar install')
+      ->exec('npm install')
+      ->run();
   }
 
   function update() {
     $this->say(getenv('WP_TEST_URL'));
-    $this->_exec('./composer.phar update');
-    $this->_exec('npm update');
+
+    return $this->taskExecStack()
+      ->stopOnFail()
+      ->exec('./composer.phar update')
+      ->exec('npm update')
+      ->run();
   }
 
   protected function rsearch($folder, $extensions = array()) {
@@ -61,12 +68,14 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function compileAll() {
-    $this->compileJs();
-    $this->compileCss();
+    $collection = $this->collectionBuilder();
+    $collection->addCode(array($this, 'compileJs'));
+    $collection->addCode(array($this, 'compileCss'));
+    return $collection->run();
   }
 
   function compileJs() {
-    $this->_exec('./node_modules/webpack/bin/webpack.js');
+    return $this->_exec('./node_modules/webpack/bin/webpack.js --bail');
   }
 
   function compileCss() {
@@ -78,7 +87,7 @@ class RoboFile extends \Robo\Tasks {
       'assets/css/src/importExport.styl'
     );
 
-    $this->_exec(join(' ', array(
+    return $this->_exec(join(' ', array(
       './node_modules/stylus/bin/stylus',
       '--include ./node_modules',
       '--include-css',
@@ -89,60 +98,277 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function makepot() {
-    $this->_exec('./node_modules/.bin/grunt makepot'.
-      ' --gruntfile '.__DIR__.'/tasks/makepot/makepot.js'.
-      ' --base_path '.__DIR__
+    return $this->_exec('./node_modules/.bin/grunt makepot'.
+      ' --gruntfile='.__DIR__.'/tasks/makepot/makepot.js'.
+      ' --base_path='.__DIR__
     );
   }
 
   function pushpot() {
-    $this->_exec('./node_modules/.bin/grunt pushpot'.
-      ' --gruntfile '.__DIR__.'/tasks/makepot/makepot.js'.
-      ' --base_path '.__DIR__
-    );
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'txinit'))
+      ->taskExec('tx push -s')
+      ->run();
   }
 
-  function testUnit($file = null) {
-    $this->loadEnv();
-    $this->_exec('vendor/bin/codecept build');
-    $this->_exec('vendor/bin/codecept run unit -f '.(($file) ? $file : ''));
+  function packtranslations() {
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'txinit'))
+      ->taskExec('./tasks/pack_translations.sh')
+      ->run();
   }
 
-  function testCoverage($file = null) {
+  function txinit() {
+    // Define WP_TRANSIFEX_API_TOKEN env. variable
+    $this->loadEnv();
+    return $this->_exec('./tasks/transifex_init.sh');
+  }
+
+  function testUnit($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
     $this->_exec('vendor/bin/codecept build');
-    $this->_exec(join(' ', array(
+
+    $command = 'vendor/bin/codecept run unit -f '.(($opts['file']) ? $opts['file'] : '');
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    return $this->_exec($command);
+  }
+
+  function testCoverage($opts=['file' => null, 'xml' => false]) {
+    $this->loadEnv();
+    $this->_exec('vendor/bin/codecept build');
+    $command = join(' ', array(
       'vendor/bin/codecept run',
-      (($file) ? $file : ''),
+      (($opts['file']) ? $opts['file'] : ''),
       '--coverage',
-      '--coverage-html'
-    )));
+      ($opts['xml']) ? '--coverage-xml' : '--coverage-html'
+    ));
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    return $this->_exec($command);
   }
 
-  function testJavascript() {
+  function testJavascript($xml_output_file = null) {
     $this->compileJs();
 
-    $this->_exec(join(' ', array(
+    $command = join(' ', array(
       './node_modules/.bin/mocha',
       '-r tests/javascript/mochaTestHelper.js',
       'tests/javascript/testBundles/**/*.js'
-    )));
+    ));
+
+    if(!empty($xml_output_file)) {
+      $command .= sprintf(
+        ' --reporter xunit --reporter-options output="%s"',
+        $xml_output_file
+      );
+    }
+
+    return $this->_exec($command);
   }
 
   function testDebug() {
     $this->_exec('vendor/bin/codecept build');
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept run unit --debug');
+    return $this->_exec('vendor/bin/codecept run unit --debug');
   }
 
   function testFailed() {
     $this->loadEnv();
     $this->_exec('vendor/bin/codecept build');
-    $this->_exec('vendor/bin/codecept run -g failed');
+    return $this->_exec('vendor/bin/codecept run -g failed');
+  }
+
+  function qa() {
+    $collection = $this->collectionBuilder();
+    $collection->addCode(array($this, 'qaLint'));
+    $collection->addCode(function() {
+      return $this->qaCodeSniffer('all');
+    });
+    return $collection->run();
+  }
+
+  function qaLint() {
+    return $this->_exec('./tasks/php_lint.sh lib/ tests/ mailpoet.php');
+  }
+
+  function qaCodeSniffer($severity='errors') {
+    if ($severity === 'all') {
+      $severityFlag = '-w';
+    } else {
+      $severityFlag = '-n';
+    }
+    return $this->_exec(
+      './vendor/bin/phpcs '.
+      '--standard=./tasks/code_sniffer/MailPoet '.
+      '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
+      './lib/Util/pQuery/*,./lib/Config/PopulatorData/Templates/* '.
+      'lib/ '.
+      $severityFlag
+    );
+  }
+
+  function svnCheckout() {
+    $svn_dir = ".mp_svn";
+
+    $collection = $this->collectionBuilder();
+
+    // Clean up the SVN dir for faster shallow checkout
+    if(file_exists($svn_dir)) {
+      $collection->taskExecStack()
+        ->exec('rm -rf ' . $svn_dir);
+    }
+
+    $collection->taskFileSystemStack()
+        ->mkdir($svn_dir);
+
+    return $collection->taskExecStack()
+      ->stopOnFail()
+      ->dir($svn_dir)
+      ->exec('svn co https://plugins.svn.wordpress.org/mailpoet/ -N .')
+      ->exec('svn up trunk')
+      ->exec('svn up assets')
+      ->run();
+  }
+
+  function svnPublish($opts = ['force' => false]) {
+    $this->loadWPFunctions();
+
+    $svn_dir = ".mp_svn";
+    $plugin_data = get_plugin_data('mailpoet.php', false, false);
+    $plugin_version = $plugin_data['Version'];
+    $plugin_dist_name = sanitize_title_with_dashes($plugin_data['Name']);
+    $plugin_dist_file = $plugin_dist_name . '.zip';
+
+    $this->say('Publishing version: ' . $plugin_version);
+
+    // Sanity checks
+    if(!is_readable($plugin_dist_file)) {
+      $this->say("Failed to access " . $plugin_dist_file);
+      return;
+    } elseif(!file_exists($svn_dir . "/.svn/")) {
+      $this->say("$svn_dir/.svn/ dir not found, is it a SVN repository?");
+      return;
+    } elseif(file_exists($svn_dir . "/tags/" . $plugin_version)) {
+      $this->say("A SVN tag already exists: " . $plugin_version);
+      return;
+    }
+
+    $collection = $this->collectionBuilder();
+
+    // Clean up tmp dirs if the previous run was halted
+    if(file_exists("$svn_dir/trunk_new") || file_exists("$svn_dir/trunk_old")) {
+      $collection->taskFileSystemStack()
+        ->stopOnFail()
+        ->remove(array("$svn_dir/trunk_new", "$svn_dir/trunk_old"));
+    }
+
+    // Extract the distributable zip to tmp trunk dir
+    $collection->taskExtract($plugin_dist_file)
+      ->to("$svn_dir/trunk_new")
+      ->preserveTopDirectory(false);
+
+    // Rename current trunk
+    if(file_exists("$svn_dir/trunk")) {
+      $collection->taskFileSystemStack()
+        ->rename("$svn_dir/trunk", "$svn_dir/trunk_old");
+    }
+
+    // Replace old trunk with a new one
+    $collection->taskFileSystemStack()
+      ->stopOnFail()
+      ->rename("$svn_dir/trunk_new", "$svn_dir/trunk")
+      ->remove("$svn_dir/trunk_old");
+
+    // Add new repository assets
+    $collection->taskFileSystemStack()
+      ->mirror('./plugin_repository/assets', "$svn_dir/assets_new");
+
+    // Rename current assets folder
+    if(file_exists("$svn_dir/assets")) {
+      $collection->taskFileSystemStack()
+        ->rename("$svn_dir/assets", "$svn_dir/assets_old");
+    }
+
+    // Replace old assets with new ones
+    $collection->taskFileSystemStack()
+      ->stopOnFail()
+      ->rename("$svn_dir/assets_new", "$svn_dir/assets")
+      ->remove("$svn_dir/assets_old");
+
+    // Windows compatibility
+    $awkCmd = '{print " --force \""$2"\""}';
+    // Mac OS X compatibility
+    $xargsFlag = (stripos(PHP_OS, 'Darwin') !== false) ? '' : '-r';
+
+    $collection->taskExecStack()
+      ->stopOnFail()
+      // Set SVN repo as working directory
+      ->dir($svn_dir)
+      // Remove files from SVN repo that have already been removed locally
+      ->exec("svn st | grep ^! | awk '$awkCmd' | xargs $xargsFlag svn rm")
+      // Recursively add files to SVN that haven't been added yet
+      ->exec("svn add --force * --auto-props --parents --depth infinity -q");
+
+    $result = $collection->run();
+
+    if($result->wasSuccessful()) {
+      // Run or suggest release command depending on a flag
+      $repo_url = "https://plugins.svn.wordpress.org/$plugin_dist_name";
+      $release_cmd = "svn ci -m \"Release $plugin_version\"";
+      $tag_cmd = "svn copy $repo_url/trunk $repo_url/tags/$plugin_version -m \"Tag $plugin_version\"";
+      if(!empty($opts['force'])) {
+        $svn_login = getenv('WP_SVN_USERNAME');
+        $svn_password = getenv('WP_SVN_PASSWORD');
+        if ($svn_login && $svn_password) {
+          $release_cmd .= " --username $svn_login --password $svn_password";
+        } else {
+          $release_cmd .= ' --force-interactive';
+        }
+        $result = $this->taskExecStack()
+          ->stopOnFail()
+          ->dir($svn_dir)
+          ->exec($release_cmd)
+          ->exec($tag_cmd)
+          ->run();
+      } else {
+        $this->yell(
+          "Go to '$svn_dir' and run '$release_cmd' to publish the release"
+        );
+        $this->yell(
+          "Run '$tag_cmd' to tag the release"
+        );
+      }
+    }
+
+    return $result;
+  }
+
+  public function publish($opts = ['force' => false]) {
+    return $this->collectionBuilder()
+      ->addCode(array($this, 'pushpot'))
+      ->addCode(function () use ($opts) {
+        return $this->svnPublish($opts);
+      })
+      ->run();
   }
 
   protected function loadEnv() {
     $dotenv = new Dotenv\Dotenv(__DIR__);
     $dotenv->load();
   }
-}
+
+  protected function loadWPFunctions() {
+    $this->loadEnv();
+    define('ABSPATH', getenv('WP_TEST_PATH') . '/');
+    define('WPINC', 'wp-includes');
+    require_once(ABSPATH . WPINC . '/functions.php');
+    require_once(ABSPATH . WPINC . '/formatting.php');
+    require_once(ABSPATH . WPINC . '/plugin.php');
+    require_once(ABSPATH . 'wp-admin/includes/plugin.php');
+  }
+}

assets/css/src/admin.styl

@@ -1,6 +1,7 @@
 @import 'nib'
 
 @require 'select2/dist/css/select2.css'
+@require 'datepicker/datepicker'
 
 @require 'common'
 @require 'modal'
@@ -8,6 +9,8 @@
 
 @require 'form_editor'
 @require 'listing'
+@require 'listing/newsletters'
+
 @require 'box'
 @require 'breadcrumb'
 
@@ -18,4 +21,6 @@
 @require 'settings'
 @require 'progress_bar'
 
-@require 'subscribers'
+@require 'subscribers'
+
+@require 'mp2migrator'

assets/css/src/box.styl

@@ -1,3 +1,15 @@
+$box-width = 425px
+$box-height = 150px
+$thumbnail-width = $box-height
+$thumbnail-height = $thumbnail-width
+$box-description-space-between-heading-and-paragraph = 5px
+$box-description-height = 110px
+$box-description-text-height = $box-description-height - $box-description-space-between-heading-and-paragraph
+$box-heading-line-height = $box-description-text-height / 4
+$box-heading-font-size = $box-heading-line-height * 5/7
+$box-description-line-height = $box-heading-line-height / 2
+$box-description-font-size = $box-description-line-height
+
 .mailpoet_boxes.mailpoet_boxes_loading
   opacity: 0.2
 
@@ -6,8 +18,8 @@
   position: relative
   padding: 15px
   margin: 15px 25px 0 0
-  width: 425px
-  height: 150px
+  width: $box-width
+  height: $box-height
   border: 1px solid #dedede
   background-color: #fff
 
@@ -18,22 +30,21 @@
   background-position: center
   color: #222
   border: 1px solid #ccc
-  width: 150px
-  height: 150px
+  width: $thumbnail-height
+  height: $thumbnail-width
   margin-right: 15px
   float: left
   overflow: hidden
   position: relative
 
   img
-    min-width: 150px
-    min-height: 150px
+    min-width: $thumbnail-width
     height: auto
     width: 110%
     position: relative
-    top: 0
+    top: 50%
     left: 50%
-    transform: translate(-50%, 0%)
+    transform: translate(-50%, -50%)
 
   .mailpoet_overlay
     position: absolute
@@ -61,16 +72,21 @@
 .mailpoet_boxes .mailpoet_description
   float:left
   width: 245px
-  max-height: calc(110px - 2em)
-  padding-bottom: 2em
+  max-height: $box-description-height
+  padding-bottom: 0
   overflow: hidden
 
-.mailpoet_boxes .mailpoet_description h3
-  margin: 0 0 1em 0
-  overflow: hidden
-  white-space: nowrap
-  text-overflow: ellipsis
-  max-width: 220px
+  h3
+    margin: 0 0 $box-description-space-between-heading-and-paragraph 0
+    overflow: hidden
+    max-width: 210px
+    line-height: $box-heading-line-height
+    font-size: $box-heading-font-size
+
+  p
+    font-size: $box-description-font-size
+    line-height: $box-description-line-height
+    margin: 0
 
 .mailpoet_boxes .mailpoet_actions
   position: absolute

assets/css/src/datepicker/datepicker.styl

@@ -0,0 +1,2 @@
+@require 'jquery-ui-1.10.1.css'
+@require 'melon.datepicker.css'

assets/css/src/datepicker/jquery-ui-1.10.1.css

@@ -0,0 +1,649 @@
+/*! jQuery UI - v1.10.1 - 2013-03-10
+* http://jqueryui.com
+* Includes: jquery.ui.core.css, jquery.ui.datepicker.css
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
+* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-hidden-accessible {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+	border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-clearfix {
+	min-height: 0; /* support: IE7 */
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	filter:Alpha(Opacity=0);
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	display: block;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.ui-datepicker {
+	width: 17em;
+	padding: .2em .2em 0;
+	display: none;
+}
+.ui-datepicker .ui-datepicker-header {
+	position: relative;
+	padding: .2em 0;
+}
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+	position: absolute;
+	top: 2px;
+	width: 1.8em;
+	height: 1.8em;
+}
+.ui-datepicker .ui-datepicker-prev-hover,
+.ui-datepicker .ui-datepicker-next-hover {
+	top: 1px;
+}
+.ui-datepicker .ui-datepicker-prev {
+	left: 2px;
+}
+.ui-datepicker .ui-datepicker-next {
+	right: 2px;
+}
+.ui-datepicker .ui-datepicker-prev-hover {
+	left: 1px;
+}
+.ui-datepicker .ui-datepicker-next-hover {
+	right: 1px;
+}
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+	display: block;
+	position: absolute;
+	left: 50%;
+	margin-left: -8px;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-datepicker .ui-datepicker-title {
+	margin: 0 2.3em;
+	line-height: 1.8em;
+	text-align: center;
+}
+.ui-datepicker .ui-datepicker-title select {
+	font-size: 1em;
+	margin: 1px 0;
+}
+.ui-datepicker select.ui-datepicker-month-year {
+	width: 100%;
+}
+.ui-datepicker select.ui-datepicker-month,
+.ui-datepicker select.ui-datepicker-year {
+	width: 49%;
+}
+.ui-datepicker table {
+	width: 100%;
+	font-size: .9em;
+	border-collapse: collapse;
+	margin: 0 0 .4em;
+}
+.ui-datepicker th {
+	padding: .7em .3em;
+	text-align: center;
+	font-weight: bold;
+	border: 0;
+}
+.ui-datepicker td {
+	border: 0;
+	padding: 1px;
+}
+.ui-datepicker td span,
+.ui-datepicker td a {
+	display: block;
+	padding: .2em;
+	text-align: right;
+	text-decoration: none;
+}
+.ui-datepicker .ui-datepicker-buttonpane {
+	background-image: none;
+	margin: .7em 0 0 0;
+	padding: 0 .2em;
+	border-left: 0;
+	border-right: 0;
+	border-bottom: 0;
+}
+.ui-datepicker .ui-datepicker-buttonpane button {
+	float: right;
+	margin: .5em .2em .4em;
+	cursor: pointer;
+	padding: .2em .6em .3em .6em;
+	width: auto;
+	overflow: visible;
+}
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
+	float: left;
+}
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi {
+	width: auto;
+}
+.ui-datepicker-multi .ui-datepicker-group {
+	float: left;
+}
+.ui-datepicker-multi .ui-datepicker-group table {
+	width: 95%;
+	margin: 0 auto .4em;
+}
+.ui-datepicker-multi-2 .ui-datepicker-group {
+	width: 50%;
+}
+.ui-datepicker-multi-3 .ui-datepicker-group {
+	width: 33.3%;
+}
+.ui-datepicker-multi-4 .ui-datepicker-group {
+	width: 25%;
+}
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
+	border-left-width: 0;
+}
+.ui-datepicker-multi .ui-datepicker-buttonpane {
+	clear: left;
+}
+.ui-datepicker-row-break {
+	clear: both;
+	width: 100%;
+	font-size: 0;
+}
+
+/* RTL support */
+.ui-datepicker-rtl {
+	direction: rtl;
+}
+.ui-datepicker-rtl .ui-datepicker-prev {
+	right: 2px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next {
+	left: 2px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-prev:hover {
+	right: 1px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next:hover {
+	left: 1px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane {
+	clear: right;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button {
+	float: left;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
+.ui-datepicker-rtl .ui-datepicker-group {
+	float: right;
+}
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
+	border-right-width: 0;
+	border-left-width: 1px;
+}
+
+/* Component containers
+----------------------------------*/
+.ui-widget {
+	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-size: 1.1em;
+}
+.ui-widget .ui-widget {
+	font-size: 1em;
+}
+.ui-widget input,
+.ui-widget select,
+.ui-widget textarea,
+.ui-widget button {
+	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-size: 1em;
+}
+.ui-widget-content {
+	border: 1px solid #dddddd;
+	background: #eeeeee url(../img/datepicker/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
+	color: #333333;
+}
+.ui-widget-content a {
+	color: #333333;
+}
+.ui-widget-header {
+	border: 1px solid #e78f08;
+	background: #f6a828 url(../img/datepicker/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
+	color: #ffffff;
+	font-weight: bold;
+}
+.ui-widget-header a {
+	color: #ffffff;
+}
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+	border: 1px solid #cccccc;
+	background: #f6f6f6 url(../img/datepicker/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #1c94c4;
+}
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited {
+	color: #1c94c4;
+	text-decoration: none;
+}
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus {
+	border: 1px solid #fbcb09;
+	background: #fdf5ce url(../img/datepicker/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #c77405;
+}
+.ui-state-hover a,
+.ui-state-hover a:hover,
+.ui-state-hover a:link,
+.ui-state-hover a:visited {
+	color: #c77405;
+	text-decoration: none;
+}
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active {
+	border: 1px solid #fbd850;
+	background: #ffffff url(../img/datepicker/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #eb8f00;
+}
+.ui-state-active a,
+.ui-state-active a:link,
+.ui-state-active a:visited {
+	color: #eb8f00;
+	text-decoration: none;
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight,
+.ui-widget-content .ui-state-highlight,
+.ui-widget-header .ui-state-highlight {
+	border: 1px solid #fed22f;
+	background: #ffe45c url(../img/datepicker/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
+	color: #363636;
+}
+.ui-state-highlight a,
+.ui-widget-content .ui-state-highlight a,
+.ui-widget-header .ui-state-highlight a {
+	color: #363636;
+}
+.ui-state-error,
+.ui-widget-content .ui-state-error,
+.ui-widget-header .ui-state-error {
+	border: 1px solid #cd0a0a;
+	background: #b81900 url(../img/datepicker/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
+	color: #ffffff;
+}
+.ui-state-error a,
+.ui-widget-content .ui-state-error a,
+.ui-widget-header .ui-state-error a {
+	color: #ffffff;
+}
+.ui-state-error-text,
+.ui-widget-content .ui-state-error-text,
+.ui-widget-header .ui-state-error-text {
+	color: #ffffff;
+}
+.ui-priority-primary,
+.ui-widget-content .ui-priority-primary,
+.ui-widget-header .ui-priority-primary {
+	font-weight: bold;
+}
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary,
+.ui-widget-header .ui-priority-secondary {
+	opacity: .7;
+	filter:Alpha(Opacity=70);
+	font-weight: normal;
+}
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled,
+.ui-widget-header .ui-state-disabled {
+	opacity: .35;
+	filter:Alpha(Opacity=35);
+	background-image: none;
+}
+.ui-state-disabled .ui-icon {
+	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
+}
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	width: 16px;
+	height: 16px;
+	background-position: 16px 16px;
+}
+.ui-icon,
+.ui-widget-content .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_222222_256x240.png);
+}
+.ui-widget-header .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ffffff_256x240.png);
+}
+.ui-state-default .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-hover .ui-icon,
+.ui-state-focus .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-active .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-highlight .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_228ef1_256x240.png);
+}
+.ui-state-error .ui-icon,
+.ui-state-error-text .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ffd27a_256x240.png);
+}
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-on { background-position: -96px -144px; }
+.ui-icon-radio-off { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-left,
+.ui-corner-tl {
+	border-top-left-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-right,
+.ui-corner-tr {
+	border-top-right-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-left,
+.ui-corner-bl {
+	border-bottom-left-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-right,
+.ui-corner-br {
+	border-bottom-right-radius: 4px;
+}
+
+/* Overlays */
+.ui-widget-overlay {
+	background: #666666 url(../img/datepicker/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
+	opacity: .5;
+	filter: Alpha(Opacity=50);
+}
+.ui-widget-shadow {
+	margin: -5px 0 0 -5px;
+	padding: 5px;
+	background: #000000 url(../img/datepicker/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x;
+	opacity: .2;
+	filter: Alpha(Opacity=20);
+	border-radius: 5px;
+}

assets/css/src/datepicker/melon.datepicker.css

@@ -0,0 +1,115 @@
+/**
+ * Melon skin from: https://github.com/rtsinani/jquery-datepicker-skins
+ */
+
+.wp-admin {
+	font-size: 90%;
+}
+
+.wp-admin .ui-widget {
+	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+	background: #2e3641;
+	border: none;
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+}
+
+.wp-admin .ui-datepicker {
+	padding: 0;
+}
+
+.wp-admin .ui-datepicker-header {
+	border: none;
+	background: transparent;
+	font-weight: normal;
+	font-size: 15px;
+}
+
+.wp-admin .ui-datepicker-header .ui-state-hover {
+	background: transparent;
+	border-color: transparent;
+	cursor: pointer;
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-title {
+	margin-top: .4em;
+	margin-bottom: .3em;
+	color: #e9f0f4;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev-hover,
+.wp-admin .ui-datepicker .ui-datepicker-next-hover,
+.wp-admin .ui-datepicker .ui-datepicker-next,
+.wp-admin .ui-datepicker .ui-datepicker-prev {
+	top: .9em;
+	border:none;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev-hover {
+	left: 2px;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-next-hover {
+	right: 2px;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-next span,
+.wp-admin .ui-datepicker .ui-datepicker-prev span {
+	background-image: url(../img/datepicker/ui-icons_ffffff_256x240.png);
+	background-position: -32px 0;
+	margin-top: 0;
+	top: 0;
+	font-weight: normal;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev span {
+	background-position: -96px 0;
+}
+
+.wp-admin .ui-datepicker table {
+	margin: 0;
+}
+
+.wp-admin .ui-datepicker th {
+	padding: 1em 0;
+	color: #ccc;
+	font-size: 13px;
+	font-weight: normal;
+	border: none;
+	border-top: 1px solid #3a414d;
+}
+
+.wp-admin .ui-datepicker td {
+	background: #f97e76;
+	border: none;
+	padding: 0;
+}
+
+.wp-admin td .ui-state-default {
+	background: transparent;
+	border: none;
+	text-align: center;
+	padding: .5em;
+	margin: 0;
+	font-weight: normal;
+	color: #efefef;
+	font-size: 16px;
+}
+
+.wp-admin .ui-state-disabled  {
+	opacity: 1;
+}
+
+.wp-admin .ui-state-disabled .ui-state-default {
+	color: #fba49e;
+}
+
+.wp-admin td .ui-state-active,
+.wp-admin td .ui-state-hover {
+	background: #2e3641;
+}
+

assets/css/src/form.styl

@@ -1,2 +1,5 @@
+.mailpoet_form
+  margin: 0 0 20px 0
+
 .mailpoet_form td
-  vertical-align: top !important
+  vertical-align: top !important

assets/css/src/form_editor.styl

@@ -563,3 +563,6 @@ handle_icon = '../img/handle.png'
 .CodeMirror
   border: 1px solid #eee
 
+/* Settings */
+#mailpoet_form_segments.parsley-error + span .select2-selection
+  border: 1px solid #b94a48

assets/css/src/listing/newsletters.styl

@@ -0,0 +1,53 @@
+$excellent-badge-color = #2993ab
+$good-badge-color = #f0b849
+$bad-badge-color = #d54e21
+$green-badge-color = #55bd56
+
+#newsletters_container
+  h2.nav-tab-wrapper
+    margin-bottom: 1rem
+
+.mailpoet_stats_text
+  font-size: 14px
+  font-weight: 600;
+
+.mailpoet_stat
+
+  &_excellent
+    color: $excellent-badge-color
+
+  &_good
+    color: $good-badge-color
+
+  &_bad
+    color: $bad-badge-color
+
+  &_hidden
+    display: none
+
+  &_link_small
+    text-decoration: underline !important
+    font-size: 0.75rem
+
+.mailpoet_badge
+  padding: 4px 6px 3px 6px
+  color: #FFFFFF
+  margin-right: 4px
+  text-transform: uppercase
+  font-size: 0.5625rem
+  font-weight: 500
+  border-radius: 3px
+  letter-spacing: 1px
+  vertical-align: middle
+
+  &_excellent
+    background: $excellent-badge-color
+
+  &_good
+    background: $good-badge-color
+
+  &_bad
+    background: $bad-badge-color
+
+  &_green
+    background: $green-badge-color

assets/css/src/mp2migrator.styl

@@ -0,0 +1,33 @@
+#logger
+  width: 100%
+  height: 300px
+  background-color: transparent
+  border: 0
+  border-top: 1px #aba9a9 solid
+  padding: 2px
+  overflow: scroll
+  resize: both
+  font-size: 0.85em
+  margin-top: 20px
+
+#progressbar
+  width: 50%
+  background-color: #d8d8d8
+  border-radius: 5px
+
+progressbar_color = #fecf23
+progressbar_gradient_to_color = #fd9215
+
+.ui-progressbar .ui-progressbar-value
+  height: 100%
+  background-color: progressbar_color
+  background-image: linear-gradient(to bottom, progressbar_color, progressbar_gradient_to_color)
+  border-radius: 3px
+  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset
+  border 0
+
+.mailpoet_progress_label
+  font-size: 15px
+
+.error_msg
+  color: #f00

assets/css/src/newsletter_editor/components/blockTools.styl

@@ -1,6 +1,6 @@
-$tool-inactive-color = #bbbbbb
+$tool-inactive-color = #333333
 $tool-inactive-secondary-color = #ffffff
-$tool-hover-color = #333333
+$tool-hover-color = #bbbbbb
 $tool-hover-secondary-color = #ffffff
 $tool-active-color = #d2d2d4
 $tool-active-secondary-color = #ffffff
@@ -12,21 +12,42 @@ $master-column-tool-width = 24px
   position: absolute
   top: 0
   right: 0
-  display: none
   z-index: 20
   padding: 2px
   text-align: right
+  overflow: hidden
+
+  .mailpoet_tool_slider
+    position: relative
+    right: -100%
+    transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)
+    opacity: 0
+
+  &.mailpoet_display_tools
+    .mailpoet_tool_slider
+      right: 0
+      opacity: 1
 
   a
     vertical-align: top
 
   .mailpoet_container_horizontal + &
     left: 100%
+    right: initial
     padding-left: 5px
 
+    .mailpoet_tool_slider
+      left: -100%
+      right: initial
+
+    &.mailpoet_display_tools
+      .mailpoet_tool_slider
+        left: 0
+
     .mailpoet_tool
       width: $master-column-tool-width
       height: $master-column-tool-width
+      display: block
 
       .mailpoet_tool_icon
         width: $master-column-tool-width
@@ -46,6 +67,7 @@ $master-column-tool-width = 24px
       opacity: 0
       overflow: hidden
       display: block
+      margin: 0
 
     .mailpoet_delete_block_activated
       width: auto
@@ -125,7 +147,6 @@ $master-column-tool-width = 24px
   border-radius(3px)
   background-color: $warning-background-color
   padding: 3px 5px
-  line-height: 1.2em
 
   .mailpoet_delete_block_activate
     overflow: hidden

assets/css/src/newsletter_editor/components/forms.styl

@@ -4,7 +4,6 @@
 
 .mailpoet_form_field_title
   clear: both
-  font-size: 1.1em
   margin-bottom: 5px
 
 .mailpoet_form_field_title_small

assets/css/src/newsletter_editor/components/heading.styl

@@ -4,7 +4,7 @@
 
 .mailpoet_input_title,
 .mailpoet_input_preheader
-  width: 400px
+  width: 500px
   padding: 3px
   line-height: normal
 

assets/css/src/newsletter_editor/components/sidebar.styl

@@ -17,6 +17,7 @@ $widget-icon-width = 30px
   border-left: $content-border-color
   border-bottom: $content-border-color
   color: $sidebar-text-color
+  font-size: $sidebar-text-size
 
   .mailpoet_sidebar_region
     margin-bottom: 0

assets/css/src/newsletter_editor/components/sidepanel.styl

@@ -3,6 +3,7 @@ $sidepanel-active-heading-color = $primary-active-color
 /* Sidepanel */
 .mailpoet_editor_settings
   color: $sidebar-text-color
+  font-size: $sidebar-text-size
 
   p
     font-size: 1em
@@ -18,7 +19,6 @@ $sidepanel-active-heading-color = $primary-active-color
 
 .mailpoet_sidepanel_field_title
   clear: both
-  font-size: 1.1em
   margin-bottom: 5px
 
 .mailpoet_sidepanel_field_title_small

assets/css/src/newsletter_editor/contentBlocks/automatedLatestContent.styl

@@ -9,12 +9,13 @@
   background: rgba(255, 255, 255, 0)
   transition: background .15s ease-out
 
-  &:hover
+  .mailpoet_automated_latest_content_block:hover &
     background: rgba(255, 255, 255, 0.7)
     cursor: pointer
 
 .mailpoet_automated_latest_content_block_posts
   overflow: auto
+  pointer-events: none
 
   & > .mailpoet_block
     width: 100%

assets/css/src/newsletter_editor/contentBlocks/base.styl

@@ -1,4 +1,5 @@
 $block-hover-highlight-color = $primary-active-color
+$block-text-line-height = $text-line-height
 
 .mailpoet_block
   box-sizing: border-box
@@ -22,6 +23,7 @@ $block-hover-highlight-color = $primary-active-color
     border: 1px solid $transparent-color
 
   &:hover > .mailpoet_block_highlight
+  &.mailpoet_highlight > .mailpoet_block_highlight
     border: 1px dashed $block-hover-highlight-color
 
 
@@ -30,8 +32,40 @@ $block-hover-highlight-color = $primary-active-color
 
 .mailpoet_content
   position: relative
-  line-height: 1.61803398875
+  line-height: $block-text-line-height
 
-  p, h1, h2, h3, h4, h5, h6
-    line-height: 1.61803398875
+  h1, h2, h3, h4, h5, h6
+    line-height: $block-text-line-height
+    padding: 0
+    margin: 0
     font-style: normal
+    font-weight: normal
+
+  h1, h2, h3, h4, h5, h6
+    margin-bottom: 0.3em
+
+  p:not(.mailpoet_wp_post)
+    margin-top: 0
+    margin-bottom: 0
+    padding: 0
+    margin: 0
+
+  p
+    line-height: $block-text-line-height
+    font-style: normal
+    font-weight: normal
+
+  ul
+    padding: 0
+    margin-top: 10px
+    margin-bottom: 10px
+
+  li
+    margin-top: 0
+    font-weight: normal
+    margin-bottom: 10px
+
+  blockquote
+    margin: 0 0 $block-text-line-height
+    padding-left: 10px
+    border-left: 2px #565656 solid

assets/css/src/newsletter_editor/contentBlocks/button.styl

@@ -1,9 +1,4 @@
-$button-vertical-padding = 13px
-
 .mailpoet_button_block
-  padding-top: $button-vertical-padding
-  padding-bottom: $button-vertical-padding
-
   overflow: hidden
 
   .mailpoet_editor_button

assets/css/src/newsletter_editor/contentBlocks/container.styl

@@ -17,7 +17,7 @@ $three-column-width = ($newsletter-width / 3) - (2 * $column-margin)
   padding-left: 0
   padding-right: 0
 
-  &:hover
+  &:hover > .mailpoet_block_highlight
     border: 0
 
 .mailpoet_container_vertical > *

assets/css/src/newsletter_editor/contentBlocks/footer.styl

@@ -6,5 +6,5 @@
   .mailpoet_content
     padding: 10px 20px
 
-    p
-      margin: 0
+    & > *:last-child
+      margin-bottom: 0

assets/css/src/newsletter_editor/contentBlocks/header.styl

@@ -6,5 +6,5 @@
   .mailpoet_content
     padding: 10px 20px
 
-    p
-      margin: 0
+    & > *:last-child
+      margin-bottom: 0

assets/css/src/newsletter_editor/contentBlocks/social.styl

@@ -1,12 +1,12 @@
-$social-block-vertical-padding = 11px
+$social-block-vertical-padding = 0px
 
 $social-icon-width = 32px
 $active-social-icon-set-border-color = #adadad
 $active-social-icon-set-background-color = #daebf2
 $social-icon-set-hover-border-color = $primary-active-color
 
-$tool-inactive-color = #bbbbbb
-$tool-hover-color = #333333
+$tool-inactive-color = #333333
+$tool-hover-color = #bbbbbb
 $tool-active-color = #d2d2d4
 
 $tool-width = 16px

assets/css/src/newsletter_editor/contentBlocks/text.styl

@@ -9,16 +9,5 @@
     padding-left: 20px
     padding-right: 20px
 
-    h1, h2, h3, h4, h5, h6
-      padding: 0
-      margin: 0
-      font-weight: normal
-
-    p
-      margin-top: 0
-      font-weight: normal
-
-blockquote
-  margin: 1em
-  padding-left: 1em
-  border-left: 2px #565656 solid
+    & > *:last-child
+      margin-bottom: 0

assets/css/src/newsletter_editor/libraryOverrides.styl

@@ -31,7 +31,7 @@ div.mce-toolbar-grp.mce-container
   box-shadow(0px 0px 3px 1px rgba(0, 0, 0, 0.05))
 
 .mce-window
-  /* Fix TinyMCE mailpoet_custom_fields window lack of hiding overflow */
+  /* Fix TinyMCE mailpoet_shortcodes window lack of hiding overflow */
   div.mce-container-body.mce-abs-layout
     overflow: hidden
 
@@ -40,8 +40,8 @@ div.mce-toolbar-grp.mce-container
     width: -webkit-calc( 100% - 36px )
     width: calc( 100% - 36px )
 
-/* TinyMCE mailpoet_custom_fields toolbar icon */
-.mce-i-mailpoet_custom_fields:before
+/* TinyMCE mailpoet_shortcodes toolbar icon */
+.mce-i-mailpoet_shortcodes:before
   font: 400 20px/1 dashicons!important
   content: "\f307"
 
@@ -84,7 +84,7 @@ position: relative
 body
   overflow-x: auto
 
-/* Hide the "Details" section of Wordpress Media manager */
+/* Hide the "Details" section of WordPress Media manager */
 .media-sidebar
   display: none
 
@@ -98,7 +98,7 @@ body
   .attachments-browser .uploader-inline
     right: 0
 
-/* Remove max width from date selector in Wordpress Media Manager */
+/* Remove max width from date selector in WordPress Media Manager */
 #media-attachment-date-filters
   max-width: calc(100% - 12px)
 
@@ -131,6 +131,7 @@ body
   display: none
 
 .wrap > .mailpoet_notice,
+.notice
 .update-nag
   margin-left: 2px + 15px !important
 

assets/css/src/newsletter_editor/mixins/transitions.styl

@@ -1,12 +1,12 @@
-animation-slide-open-downwards()
+animation-slide-open-downwards($max-height = 2000px)
   transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
-  max-height: 2000px
+  max-height: $max-height
   opacity: 1
+  overflow-y: hidden
 
   &.mailpoet_closed
-    max-height: 0
+    max-height: 0px
     opacity: 0
-    overflow-y: hidden
 
 animation-background-color()
   transition: background 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */

assets/css/src/newsletter_editor/variables.styl

@@ -24,3 +24,6 @@ $error-text-color = #d54e21
 
 // Dimensions
 $newsletter-width = 660px
+
+$text-line-height = 1.6em
+$sidebar-text-size = 13px

assets/css/src/parsley.styl

@@ -18,6 +18,7 @@ textarea.parsley-error
   list-style-type none
   font-size 0.9em
   line-height 0.9em
+  color #B94A48
   opacity 0
   transition all .3s ease-in
   -o-transition all .3s ease-in

assets/css/src/progress_bar.styl

@@ -4,6 +4,7 @@
   padding: 0
   width: 100%
   margin: 0
+  margin-bottom: 10px
   border-radius: 5px
   position: relative
 
@@ -25,5 +26,5 @@
 
 .mailpoet_progress_complete
   .mailpoet_progress_bar
-    background-color: #fecf23
-    background-image: linear-gradient(top, #fecf23, #fd9215)
+    background-color: hsla(191, 78%, 80%, 1)
+    background-image: linear-gradient(top,  hsla(191, 78%, 80%, 1), hsla(191, 76%, 67%, 1))

assets/css/src/settings.styl

@@ -1,14 +1,10 @@
 #mailpoet_settings
   // common
   .mailpoet_panel
-    display: none
+    display none
 
   .form-table th
-    width:20em
-
-  // advanced
-  #mailpoet_role_permissions
-    margin-top: 20px;
+    width 20em
 
   // sending methods
   .mailpoet_sending_methods
@@ -19,17 +15,15 @@
       padding 15px 15px 0 15px
       margin 0 25px 25px 0
       width 300px
-      height 250px
+      height 300px
       border 1px solid #dedede
       background-color #fff
     h3
       text-align center
       height 54px
-      line-height 54px
       font-size 1.5em
     .mailpoet_description
-      line-height 1.5em
-      font-size 1.1em
+      font-size 14px
     .mailpoet_status
       background-color #2f2f2f
       color #fff
@@ -44,6 +38,7 @@
         font-weight bold
     .mailpoet_active
       .mailpoet_status
+        background-color #088b00
         span
           visibility visible
       #mailpoet_mta_activate
@@ -57,14 +52,23 @@
       .button-secondary
         margin 0 -6px -4px 0
 
+  // premium key
+  .mailpoet_key
+    &_valid
+      &::before
+        content '✔ '
+    &_invalid
+      &::before
+        content: '✗ '
+
   // responsive
   @media screen and (max-width: 782px)
     .form-table th
-      width: auto
+      width auto
 
     .mailpoet_sending_methods
       li
         float none
-        width: auto
-        margin-right: 0
+        width auto
+        margin-right 0