.gitignore

@@ -9,3 +9,4 @@
 /vendor/
 /bin/
 /composer.phar
+app/calcifer.sqlite3

README.md

@@ -1,5 +1,7 @@
 # Calcifer Terminverwaltung
 
+[![Join the chat at https://gitter.im/HackspaceJena/calcifer](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/HackspaceJena/calcifer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
 Calcifer ist ein Daemon aus dem Anime [Howl no Ugoku Shiro](http://anidb.net/perl-bin/animedb.pl?show=anime&aid=1218), der sich darum kümmert das sich Howls Schloss weiter bewegt. Diese Terminverwaltung soll dafür sorgen das sich der [Hackspace Jena](https://www.krautspace.de/) auch weiter bewegt und viele tolle Termine statfinden.
 
 Das [offizielle Repository](https://phablab.krautspace.de/diffusion/C/) für diese Software findet man auf der Phabrictator-Instanz des Hackspaces. Für Leute die lieber auf Github stehen wurde ein Mirror unter [https://github.com/HackspaceJena/calcifer](https://github.com/HackspaceJena/calcifer) eingerichtet.

app/SymfonyRequirements.php

@@ -117,16 +117,16 @@ class PhpIniRequirement extends Requirement
     /**
      * Constructor that initializes the requirement.
      *
-     * @param string        $cfgName    The configuration name used for ini_get()
-     * @param bool|callback $evaluation Either a boolean indicating whether the configuration should evaluate to true or false,
-                                                    or a callback function receiving the configuration value as parameter to determine the fulfillment of the requirement
+     * @param string        $cfgName           The configuration name used for ini_get()
+     * @param bool|callback $evaluation        Either a boolean indicating whether the configuration should evaluate to true or false,
+                                               or a callback function receiving the configuration value as parameter to determine the fulfillment of the requirement
      * @param bool          $approveCfgAbsence If true the Requirement will be fulfilled even if the configuration option does not exist, i.e. ini_get() returns false.
-                                                    This is helpful for abandoned configs in later PHP versions or configs of an optional extension, like Suhosin.
-                                                    Example: You require a config to be true but PHP later removes this config and defaults it to true internally.
-     * @param string|null   $testMessage The message for testing the requirement (when null and $evaluation is a boolean a default message is derived)
-     * @param string|null   $helpHtml    The help text formatted in HTML for resolving the problem (when null and $evaluation is a boolean a default help is derived)
-     * @param string|null   $helpText    The help text (when null, it will be inferred from $helpHtml, i.e. stripped from HTML tags)
-     * @param bool          $optional    Whether this is only an optional recommendation not a mandatory requirement
+                                               This is helpful for abandoned configs in later PHP versions or configs of an optional extension, like Suhosin.
+                                               Example: You require a config to be true but PHP later removes this config and defaults it to true internally.
+     * @param string|null   $testMessage       The message for testing the requirement (when null and $evaluation is a boolean a default message is derived)
+     * @param string|null   $helpHtml          The help text formatted in HTML for resolving the problem (when null and $evaluation is a boolean a default help is derived)
+     * @param string|null   $helpText          The help text (when null, it will be inferred from $helpHtml, i.e. stripped from HTML tags)
+     * @param bool          $optional          Whether this is only an optional recommendation not a mandatory requirement
      */
     public function __construct($cfgName, $evaluation, $approveCfgAbsence = false, $testMessage = null, $helpHtml = null, $helpText = null, $optional = false)
     {
@@ -219,15 +219,15 @@ class RequirementCollection implements IteratorAggregate
     /**
      * Adds a mandatory requirement in form of a php.ini configuration.
      *
-     * @param string        $cfgName    The configuration name used for ini_get()
-     * @param bool|callback $evaluation Either a boolean indicating whether the configuration should evaluate to true or false,
-                                                    or a callback function receiving the configuration value as parameter to determine the fulfillment of the requirement
+     * @param string        $cfgName           The configuration name used for ini_get()
+     * @param bool|callback $evaluation        Either a boolean indicating whether the configuration should evaluate to true or false,
+                                               or a callback function receiving the configuration value as parameter to determine the fulfillment of the requirement
      * @param bool          $approveCfgAbsence If true the Requirement will be fulfilled even if the configuration option does not exist, i.e. ini_get() returns false.
-                                                    This is helpful for abandoned configs in later PHP versions or configs of an optional extension, like Suhosin.
-                                                    Example: You require a config to be true but PHP later removes this config and defaults it to true internally.
-     * @param string        $testMessage The message for testing the requirement (when null and $evaluation is a boolean a default message is derived)
-     * @param string        $helpHtml    The help text formatted in HTML for resolving the problem (when null and $evaluation is a boolean a default help is derived)
-     * @param string|null   $helpText    The help text (when null, it will be inferred from $helpHtml, i.e. stripped from HTML tags)
+                                               This is helpful for abandoned configs in later PHP versions or configs of an optional extension, like Suhosin.
+                                               Example: You require a config to be true but PHP later removes this config and defaults it to true internally.
+     * @param string        $testMessage       The message for testing the requirement (when null and $evaluation is a boolean a default message is derived)
+     * @param string        $helpHtml          The help text formatted in HTML for resolving the problem (when null and $evaluation is a boolean a default help is derived)
+     * @param string|null   $helpText          The help text (when null, it will be inferred from $helpHtml, i.e. stripped from HTML tags)
      */
     public function addPhpIniRequirement($cfgName, $evaluation, $approveCfgAbsence = false, $testMessage = null, $helpHtml = null, $helpText = null)
     {
@@ -237,15 +237,15 @@ class RequirementCollection implements IteratorAggregate
     /**
      * Adds an optional recommendation in form of a php.ini configuration.
      *
-     * @param string        $cfgName    The configuration name used for ini_get()
-     * @param bool|callback $evaluation Either a boolean indicating whether the configuration should evaluate to true or false,
-                                                    or a callback function receiving the configuration value as parameter to determine the fulfillment of the requirement
+     * @param string        $cfgName           The configuration name used for ini_get()
+     * @param bool|callback $evaluation        Either a boolean indicating whether the configuration should evaluate to true or false,
+                                               or a callback function receiving the configuration value as parameter to determine the fulfillment of the requirement
      * @param bool          $approveCfgAbsence If true the Requirement will be fulfilled even if the configuration option does not exist, i.e. ini_get() returns false.
-                                                    This is helpful for abandoned configs in later PHP versions or configs of an optional extension, like Suhosin.
-                                                    Example: You require a config to be true but PHP later removes this config and defaults it to true internally.
-     * @param string        $testMessage The message for testing the requirement (when null and $evaluation is a boolean a default message is derived)
-     * @param string        $helpHtml    The help text formatted in HTML for resolving the problem (when null and $evaluation is a boolean a default help is derived)
-     * @param string|null   $helpText    The help text (when null, it will be inferred from $helpHtml, i.e. stripped from HTML tags)
+                                               This is helpful for abandoned configs in later PHP versions or configs of an optional extension, like Suhosin.
+                                               Example: You require a config to be true but PHP later removes this config and defaults it to true internally.
+     * @param string        $testMessage       The message for testing the requirement (when null and $evaluation is a boolean a default message is derived)
+     * @param string        $helpHtml          The help text formatted in HTML for resolving the problem (when null and $evaluation is a boolean a default help is derived)
+     * @param string|null   $helpText          The help text (when null, it will be inferred from $helpHtml, i.e. stripped from HTML tags)
      */
     public function addPhpIniRecommendation($cfgName, $evaluation, $approveCfgAbsence = false, $testMessage = null, $helpHtml = null, $helpText = null)
     {
@@ -440,8 +440,8 @@ class SymfonyRequirements extends RequirementCollection
             }
 
             $this->addRequirement(
-                isset($timezones[date_default_timezone_get()]),
-                sprintf('Configured default timezone "%s" must be supported by your installation of PHP', date_default_timezone_get()),
+                isset($timezones[@date_default_timezone_get()]),
+                sprintf('Configured default timezone "%s" must be supported by your installation of PHP', @date_default_timezone_get()),
                 'Your default timezone is not supported by PHP. Check for typos in your <strong>php.ini</strong> file and have a look at the list of deprecated timezones at <a href="http://php.net/manual/en/timezones.others.php">http://php.net/manual/en/timezones.others.php</a>.'
             );
         }
@@ -530,6 +530,16 @@ class SymfonyRequirements extends RequirementCollection
             'Install the <strong>PCRE</strong> extension (version 8.0+).'
         );
 
+        if (extension_loaded('mbstring')) {
+            $this->addPhpIniRequirement(
+                'mbstring.func_overload',
+                create_function('$cfgValue', 'return (int) $cfgValue === 0;'),
+                true,
+                'string functions should not be overloaded',
+                'Set "<strong>mbstring.func_overload</strong>" to <strong>0</strong> in php.ini<a href="#phpini">*</a> to disable function overloading by the mbstring extension.'
+            );
+        }
+
         /* optional recommendations follow */
 
         $this->addRecommendation(
@@ -580,8 +590,8 @@ class SymfonyRequirements extends RequirementCollection
 
         $this->addRecommendation(
             class_exists('DomDocument'),
-            'PHP-XML module should be installed',
-            'Install and enable the <strong>PHP-XML</strong> module.'
+            'PHP-DOM and PHP-XML modules should be installed',
+            'Install and enable the <strong>PHP-DOM</strong> and the <strong>PHP-XML</strong> modules.'
         );
 
         $this->addRecommendation(
@@ -672,10 +682,8 @@ class SymfonyRequirements extends RequirementCollection
         );
 
         if (strtoupper(substr(PHP_OS, 0, 3)) === 'WIN') {
-            $this->addPhpIniRecommendation(
-                'realpath_cache_size',
-                create_function('$cfgValue', 'return (int) $cfgValue > 1000;'),
-                false,
+            $this->addRecommendation(
+                $this->getRealpathCacheSize() > 1000,
                 'realpath_cache_size should be above 1024 in php.ini',
                 'Set "<strong>realpath_cache_size</strong>" to e.g. "<strong>1024</strong>" in php.ini<a href="#phpini">*</a> to improve performance on windows.'
             );
@@ -704,4 +712,28 @@ class SymfonyRequirements extends RequirementCollection
             );
         }
     }
+
+    /**
+     * Loads realpath_cache_size from php.ini and converts it to int.
+     *
+     * (e.g. 16k is converted to 16384 int)
+     *
+     * @return int
+     */
+    protected function getRealpathCacheSize()
+    {
+        $size = ini_get('realpath_cache_size');
+        $size = trim($size);
+        $unit = strtolower(substr($size, -1, 1));
+        switch ($unit) {
+            case 'g':
+                return $size * 1024 * 1024 * 1024;
+            case 'm':
+                return $size * 1024 * 1024;
+            case 'k':
+                return $size * 1024;
+            default:
+                return (int) $size;
+        }
+    }
 }

app/check.php

@@ -110,7 +110,7 @@ function echo_style($style, $message)
     );
     $supports = has_color_support();
 
-    echo ($supports ? $styles[$style] : '').$message.($supports ? $styles['reset'] : '');
+    echo($supports ? $styles[$style] : '').$message.($supports ? $styles['reset'] : '');
 }
 
 function echo_block($style, $title, $message)

composer.json

@@ -33,11 +33,12 @@
         "incenteev/composer-parameter-handler": "~2.0",
         "jquery/jquery":  "1.10.*",
         "knplabs/knp-markdown-bundle": "~1.3",
-        "enko/ics": "~0.1",
+        "enko/ics": "~0.2",
         "doctrine/migrations": "dev-master",
         "doctrine/doctrine-migrations-bundle": "dev-master",
         "jbroadway/urlify" : "~1.0",
-        "enko/relativedateparser" : "v0.3"
+        "enko/relativedateparser" : "v0.5",
+        "sabre/dav" : "~2.0"
     },
     "require-dev": {
         "sensio/generator-bundle": "~2.3"

src/Hackspace/Bundle/CalciferBundle/Command/GenerateEventsCommand.php

@@ -38,15 +38,16 @@ class GenerateEventsCommand extends ContainerAwareCommand
             $now = new \DateTime();
             $end = new \DateTime();
             $end->add($duration);
-            $output->writeln(sprintf("Generating Dates from %s to %s",$now->format('Y-m-d'),$end->format('Y-m-d')));
-            $output->writeln("Fetching repeating events");
             /** @var EntityManager $entityManager */
             $entityManager = $this->getContainer()->get('doctrine')->getManager();
             $repo = $entityManager->getRepository('CalciferBundle:RepeatingEvent');
-            $entities = $repo->findAll();
+            $entities = $repo->findBy([],['id' => 'asc']);
             foreach($entities as $entity) {
                 /** @var RepeatingEvent $entity */
                 $next_date = is_null($entity->nextdate) ? new DateTime() : $entity->nextdate;
+                /** This is a fuggly hack. It would be best to store the named timezone also in the
+                 *  database to avoid problems with daylight savings.  */
+                $next_date->setTimezone(new \DateTimeZone('Europe/Berlin'));
                 $parser = new RelativeDateParser($entity->repeating_pattern,$next_date,'de');
                 $event = null;
                 while (($next_date = $parser->getNext()) < $end) {
@@ -56,7 +57,7 @@ class GenerateEventsCommand extends ContainerAwareCommand
                     $event->location = $entity->location;
                     $event->startdate = $next_date;
                     if ($entity->duration > 0) {
-                        $duration = new \DateInterval("PT".$entity->duration.'H');
+                        $duration = new \DateInterval("PT".$entity->duration.'M');
                         /** @var \DateTime $enddate */
                         $enddate = clone $next_date;
                         $enddate->add($duration);

src/Hackspace/Bundle/CalciferBundle/Controller/DefaultController.php

@@ -9,11 +9,11 @@ use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
 class DefaultController extends Controller
 {
     /**
-     * @Route("/hello/{name}")
+     * @Route("/über", name="about_calcifer")
      * @Template()
      */
-    public function indexAction($name)
+    public function indexAction()
     {
-        return array('name' => $name);
+        return [];
     }
 }

src/Hackspace/Bundle/CalciferBundle/Controller/EventController.php

@@ -14,6 +14,19 @@ use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
 use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
 use Hackspace\Bundle\CalciferBundle\Entity\Event;
 use Hackspace\Bundle\CalciferBundle\Form\EventType;
+use Symfony\Component\HttpFoundation\Response;
+use Jsvrcek\ICS\Model\Calendar;
+use Jsvrcek\ICS\Utility\Formatter;
+use Jsvrcek\ICS\CalendarStream;
+use Jsvrcek\ICS\CalendarExport;
+use
+    Sabre\VObject,
+    Sabre\CalDAV,
+    Sabre\DAV,
+    Sabre\DAVACL,
+    Sabre\DAV\Exception\Forbidden,
+    Hackspace\Bundle\CalciferBundle\libs\CalciferCaldavBackend,
+    Hackspace\Bundle\CalciferBundle\libs\CalciferPrincipalBackend;
 
 /**
  * Event controller.
@@ -22,6 +35,88 @@ use Hackspace\Bundle\CalciferBundle\Form\EventType;
  */
 class EventController extends Controller
 {
+    /**
+     * Finds and displays a Event entity.
+     *
+     * @Route("/{url}", name="events_caldav", requirements={"url" : "caldav(.+)"})
+     */
+    public function caldavEntry()
+    {
+        // Backends
+        $calendarBackend = new CalciferCaldavBackend($this);
+        $principalBackend = new CalciferPrincipalBackend();
+        // Directory structure
+        $tree = [
+            new CalDAV\CalendarRootNode($principalBackend, $calendarBackend),
+        ];
+
+        $server = new DAV\Server($tree);
+
+        $server->setBaseUri('/caldav');
+
+        /*$aclPlugin = new DAVACL\Plugin();
+        $aclPlugin->allowAccessToNodesWithoutACL = false;
+        $server->addPlugin($aclPlugin);*/
+
+        /* CalDAV support */
+        $caldavPlugin = new CalDAV\Plugin();
+        $server->addPlugin($caldavPlugin);
+
+        /* WebDAV-Sync plugin */
+        $server->addPlugin(new DAV\Sync\Plugin());
+
+// Support for html frontend
+        $browser = new DAV\Browser\Plugin();
+        $server->addPlugin($browser);
+
+// And off we go!
+        $server->exec();
+        return new Response();
+    }
+
+    /**
+     * Lists all Event entities as ICS.
+     *
+     * @Route("/all.ics", name="events_ics")
+     * @Method("GET")
+     * @Template()
+     */
+    public function allEventsAsICSAction()
+    {
+        $em = $this->getDoctrine()->getManager();
+
+        $now = new \DateTime();
+        $now->setTime(0, 0, 0);
+        /** @var QueryBuilder $qb */
+        $qb = $em->createQueryBuilder();
+        $qb->select(array('e'))
+            ->from('CalciferBundle:Event', 'e')
+            ->where('e.startdate >= :startdate')
+            ->orderBy('e.startdate')
+            ->setParameter('startdate', $now);
+        $entities = $qb->getQuery()->execute();
+
+        $calendar = new Calendar();
+        $calendar->setProdId('-//My Company//Cool Calendar App//EN');
+
+        foreach ($entities as $entity) {
+          /** @var Event $entity */
+          $event = $entity->ConvertToCalendarEvent();
+          $calendar->addEvent($event);
+        }
+
+        $calendarExport = new CalendarExport(new CalendarStream, new Formatter());
+        $calendarExport->addCalendar($calendar);
+
+        //output .ics formatted text
+        $result = $calendarExport->getStream();
+
+        $response = new Response($result);
+        $response->headers->set('Content-Type', 'text/calendar');
+
+        return $response;
+    }
+
 
     /**
      * Lists all Event entities.
@@ -35,20 +130,21 @@ class EventController extends Controller
         $em = $this->getDoctrine()->getManager();
 
         $now = new \DateTime();
-        $now->setTime(0,0,0);
+        $now->setTime(0, 0, 0);
         /** @var QueryBuilder $qb */
         $qb = $em->createQueryBuilder();
-        $qb ->select(array('e'))
+        $qb->select(array('e'))
             ->from('CalciferBundle:Event', 'e')
             ->where('e.startdate >= :startdate')
             ->orderBy('e.startdate')
-            ->setParameter('startdate',$now);
+            ->setParameter('startdate', $now);
         $entities = $qb->getQuery()->execute();
 
         return array(
             'entities' => $entities,
         );
     }
+
     /**
      * Creates a new Event entity.
      *
@@ -85,10 +181,28 @@ class EventController extends Controller
      * @Method("GET")
      * @Template("CalciferBundle:Event:edit.html.twig")
      */
-    public function newAction()
+    public function newAction(Request $request)
     {
         $entity = new Event();
 
+        $entity->description = $request->get('description');
+        $entity->summary = $request->get('summary');
+        $entity->url = $request->get('url');
+        if (strlen($request->get('tags')) > 0) {
+            $tags = explode(",",$request->get('tags'));
+            foreach($tags as $tag) {
+                $_tag = new Tag();
+                $_tag->name = $tag;
+                $entity->tags[] = $_tag;
+            }
+        }
+
+        if (strlen($request->get('location')) > 0) {
+            $location = new Location();
+            $location->name = $request->get('location');
+            $entity->location = $location;
+        }
+
         return array(
             'entity' => $entity,
         );
@@ -117,7 +231,7 @@ class EventController extends Controller
         }
 
         return array(
-            'entity'      => $entity
+            'entity' => $entity
         );
     }
 
@@ -144,7 +258,7 @@ class EventController extends Controller
         }
 
         return array(
-            'entity'      => $entity,
+            'entity' => $entity,
         );
     }
 
@@ -207,7 +321,7 @@ class EventController extends Controller
             $startdate = new \DateTime($startdate);
             $entity->startdate = $startdate;
         }
-        $entity->slug = $entity->generateSlug($entity->summary,$em);
+        $entity->slug = $entity->generateSlug($entity->summary, $em);
 
         $enddate = $request->get('enddate');
         if (strlen($enddate) > 0) {
@@ -246,7 +360,7 @@ class EventController extends Controller
                 if (strlen($location_lon) > 0) {
                     $location_obj->lon = $location_lon;
                 }
-                $location_obj->slug = $location_obj->generateSlug($location_obj->name,$em);
+                $location_obj->slug = $location_obj->generateSlug($location_obj->name, $em);
                 $em->persist($location_obj);
                 $em->flush();
                 $entity->setLocation($location_obj);
@@ -255,7 +369,7 @@ class EventController extends Controller
 
         $tags = $request->get('tags');
         if (strlen($tags) > 0) {
-            $tags = explode(',', $tags);
+            $tags = explode(',', strtolower($tags));
             $em = $this->getDoctrine()->getManager();
             $repo = $em->getRepository('CalciferBundle:Tag');
             $entity->clearTags();
@@ -267,7 +381,7 @@ class EventController extends Controller
                 } else {
                     $tag_obj = new Tag();
                     $tag_obj->name = $tag;
-                    $tag_obj->slug = $tag_obj->generateSlug($tag_obj->name,$em);
+                    $tag_obj->slug = $tag_obj->generateSlug($tag_obj->name, $em);
                     $em->persist($tag_obj);
                     $em->flush();
                     $entity->addTag($tag_obj);
@@ -284,7 +398,8 @@ class EventController extends Controller
      * @Method({"GET", "POST"})
      * @Template("CalciferBundle:Event:delete.html.twig")
      */
-    public function deleteAction(Request $request, $slug) {
+    public function deleteAction(Request $request, $slug)
+    {
         /** @var EntityManager $em */
         $em = $this->getDoctrine()->getManager();
 
@@ -299,7 +414,7 @@ class EventController extends Controller
         }
 
 
-        $confirmation = $request->get('confirmation',false);
+        $confirmation = $request->get('confirmation', false);
 
         if (($request->getMethod() == 'POST') && ($confirmation)) {
             $em->remove($entity);
@@ -309,7 +424,7 @@ class EventController extends Controller
         }
 
         return array(
-            'entity'      => $entity,
+            'entity' => $entity,
 
         );
     }
@@ -321,7 +436,8 @@ class EventController extends Controller
      * @Method("GET")
      * @Template("CalciferBundle:Event:edit.html.twig")
      */
-    public function copyAction(Request $request, $slug) {
+    public function copyAction(Request $request, $slug)
+    {
         /** @var EntityManager $em */
         $em = $this->getDoctrine()->getManager();
 
@@ -338,7 +454,7 @@ class EventController extends Controller
         $entity->id = null;
 
         return array(
-            'entity'      => $entity,
+            'entity' => $entity,
 
         );
     }

src/Hackspace/Bundle/CalciferBundle/Controller/LocationController.php

@@ -17,14 +17,10 @@ use Hackspace\Bundle\CalciferBundle\Entity\Event;
 use Hackspace\Bundle\CalciferBundle\Form\EventType;
 use Symfony\Component\HttpFoundation\Response;
 use Jsvrcek\ICS\Model\Calendar;
-use Jsvrcek\ICS\Model\CalendarEvent;
-use Jsvrcek\ICS\Model\Relationship\Attendee;
-use Jsvrcek\ICS\Model\Relationship\Organizer;
-
 use Jsvrcek\ICS\Utility\Formatter;
 use Jsvrcek\ICS\CalendarStream;
 use Jsvrcek\ICS\CalendarExport;
-use Jsvrcek\ICS\Model\Description\Geo;
+use Symfony\Component\HttpFoundation\AcceptHeader;
 
 /**
  * Location controller.
@@ -77,27 +73,7 @@ class LocationController extends Controller
 
             foreach ($entities as $entity) {
                 /** @var Event $entity */
-                $event = new CalendarEvent();
-                $event->setStart($entity->startdate);
-                if ($entity->enddate instanceof \DateTime)
-                    $event->setEnd($entity->enddate);
-                $event->setSummary($entity->summary);
-                $event->setUrl($entity->url);
-                if ($entity->location instanceof Location) {
-                    $location = new \Jsvrcek\ICS\Model\Description\Location();
-                    $location->setName($entity->location->name);
-                    $event->setLocations([$location]);
-                    if (\is_float($entity->location->lon) && \is_float($entity->location->lat)) {
-                        $geo = new Geo();
-                        $geo->setLatitude($entity->location->lat);
-                        $geo->setLongitude($entity->location->lon);
-                        $event->setGeo($geo);
-                    }
-                }
-                $event->setDescription($entity->description);
-                $location = new \Jsvrcek\ICS\Model\Description\Location();
-                $location->setName($entity->getLocation()->name);
-                $event->setLocations([$location]);
+                $event = $entity->ConvertToCalendarEvent();
                 $calendar->addEvent($event);
             }
 
@@ -152,7 +128,8 @@ class LocationController extends Controller
      * @Route("/{slug}/bearbeiten", name="location_update")
      * @Method("POST")
      */
-    public function updateAction(Request $request, $slug) {
+    public function updateAction(Request $request, $slug)
+    {
         /** @var EntityManager $em */
         $em = $this->getDoctrine()->getManager();
 
@@ -167,8 +144,18 @@ class LocationController extends Controller
         }
 
         if ($location->name != $request->get('name')) {
-            $location->name = $request->get('name');
-            $location->slug = $location->generateSlug($location->name,$em);
+            // someone changed the name of the location, lets check if the location already exists
+            $new_location = $repo->findOneBy(['name' => $request->get('name')]);
+            if (is_null($new_location)) {
+                $location->name = $request->get('name');
+                $location->slug = $location->generateSlug($location->name, $em);
+            } else {
+                $request->getSession()->getFlashBag()->add(
+                    'error',
+                    'Ort mit diesem Namen existiert bereits.'
+                );
+                return $this->redirect($this->generateUrl('location_edit', array('slug' => $location->slug)));
+            }
         }
         $location->streetaddress = $request->get('streetaddress');
         $location->streetnumber = $request->get('streetnumber');
@@ -177,7 +164,7 @@ class LocationController extends Controller
         $location->description = $request->get('description');
 
         $latlon = $request->get('geocords');
-        $latlon = explode(',',$latlon);
+        $latlon = explode(',', $latlon);
         if (count($latlon) == 2) {
             $location->lat = $latlon[0];
             $location->lon = $latlon[1];
@@ -188,4 +175,51 @@ class LocationController extends Controller
 
         return $this->redirect($this->generateUrl('location_show', array('slug' => $location->slug)));
     }
+
+    /**
+     * Finds and displays a Event entity.
+     *
+     * @Route("/")
+     * @Method("GET")
+     */
+    public function indexAction() {
+        $accepts = AcceptHeader::fromString($this->getRequest()->headers->get('Accept'));
+        if ($accepts->has('application/json')) {
+            $em = $this->getDoctrine()->getManager();
+
+            /** @var QueryBuilder $qb */
+            $qb = $em->createQueryBuilder();
+            $qb->select(['l'])
+                ->from('CalciferBundle:Location', 'l')
+                ->where('lower(l.name) LIKE lower(:location)')
+                ->orderBy('l.name')
+                ->setParameter('location', sprintf('%%%s%%',$this->getRequest()->query->get('q')));
+
+            $entities = $qb->getQuery()->execute();
+
+            $locations = [];
+            foreach($entities as $location) {
+                /** @var Location $location */
+                $locations[] = array(
+                    'id' => $location->id,
+                    'name' => $location->name,
+                    'description' => \Michelf\Markdown::defaultTransform($location->description),
+                    'streetaddress' => $location->streetaddress,
+                    'streetnumber' => $location->streetnumber,
+                    'zipcode' => $location->zipcode,
+                    'city' => $location->city,
+                    'lon' => $location->lon,
+                    'lat' => $location->lat,
+                );
+            }
+
+
+            $response = new Response(json_encode($locations));
+            $response->headers->set('Content-Type', 'application/json');
+
+            return $response;
+        } else {
+            return $this->redirect('/');
+        }
+    }
 }

src/Hackspace/Bundle/CalciferBundle/Controller/RepeatingEventController.php

@@ -75,7 +75,8 @@ class RepeatingEventController extends Controller
     {
         $entity = new RepeatingEvent();
         $this->fillEntity($request, $entity);
-        if ($this->validateRepeatingEvent($entity)) {
+        $errors = $entity->isValid();
+        if (count($errors) == 0) {
             $ret = $this->saveRepeatingEvent($request, $entity);
             if ($entity->id > 0) {
                 return $this->redirect($this->generateUrl('repeating_event_show'));
@@ -85,6 +86,7 @@ class RepeatingEventController extends Controller
         }
         return [
             'entity' => $entity,
+            'errors' => $errors,
         ];
 
     }
@@ -139,7 +141,8 @@ class RepeatingEventController extends Controller
         }
 
         $this->fillEntity($request, $entity);
-        if ($this->validateRepeatingEvent($entity)) {
+        $errors = $entity->isValid();
+        if (count($errors) == 0) {
             $ret = $this->saveRepeatingEvent($request, $entity);
             if ($entity->id > 0) {
                 return $this->redirect($this->generateUrl('repeating_event_show'));
@@ -149,6 +152,7 @@ class RepeatingEventController extends Controller
         }
         return [
             'entity' => $entity,
+            'errors' => $errors,
         ];
     }
 
@@ -172,20 +176,6 @@ class RepeatingEventController extends Controller
 
     }
 
-    private function validateRepeatingEvent(RepeatingEvent $entity)
-    {
-        $fields = [
-            'nextdate',
-            'repeating_pattern',
-            'summary',
-        ];
-        foreach ($fields as $field) {
-            if ((is_null($entity->$field)) && (strlen($entity->$field) > 0))
-                return false;
-        }
-        return true;
-    }
-
     private function saveRepeatingEvent(Request $request, RepeatingEvent $entity)
     {
         $location = $request->get('location');

src/Hackspace/Bundle/CalciferBundle/Controller/TagController.php

@@ -25,6 +25,8 @@ use Jsvrcek\ICS\Utility\Formatter;
 use Jsvrcek\ICS\CalendarStream;
 use Jsvrcek\ICS\CalendarExport;
 use Symfony\Component\Validator\Constraints\DateTime;
+use Doctrine\ORM\Query\ResultSetMappingBuilder;
+use Symfony\Component\HttpFoundation\AcceptHeader;
 
 /**
  * Tag controller.
@@ -47,26 +49,98 @@ class TagController extends Controller
 
         /** @var EntityRepository $repo */
         $repo = $em->getRepository('CalciferBundle:Tag');
+        $tags = [];
+        $operator = 'or';
+        if (strpos($slug, '|') !== false) {
+            $slugs = explode('|', $slug);
+            foreach ($slugs as $item) {
+                /** @var Tag $tag */
+                $tag = $repo->findOneBy(['slug' => $item]);
 
-        /** @var Tag $location */
-        $tag = $repo->findOneBy(['slug' => $slug]);
+                if ($tag instanceof Tag) {
+                    $tags[] = $tag;
+                }
+            }
+        } else if (strpos($slug, '&') !== false) {
+            $slugs = explode('&', $slug);
+            $operator = 'and';
+            foreach ($slugs as $item) {
+                /** @var Tag $tag */
+                $tag = $repo->findOneBy(['slug' => $item]);
 
-        if (!$tag) {
+                if ($tag instanceof Tag) {
+                    $tags[] = $tag;
+                }
+            }
+        } else {
+            /** @var Tag $tag */
+            $tag = $repo->findOneBy(['slug' => $slug]);
+
+            if ($tag instanceof Tag) {
+                $tags[] = $tag;
+            }
+        }
+
+        if (count($tags) == 0) {
             throw $this->createNotFoundException('Unable to find tag entity.');
         }
 
         $now = new \DateTime();
         $now->setTime(0, 0, 0);
 
-        /** @var QueryBuilder $qb */
-        $qb = $em->createQueryBuilder();
-        $qb->select(array('e'))
-            ->from('CalciferBundle:Event', 'e')
-            ->join('e.tags', 't', 'WITH', $qb->expr()->in('t.id', $tag->id))
-            ->where('e.startdate >= :startdate')
-            ->orderBy('e.startdate')
-            ->setParameter('startdate', $now);
-        $entities = $qb->getQuery()->execute();
+        $entities = null;
+        if ($operator == 'and') {
+            $sql = <<<EOF
+SELECT * FROM events AS e
+WHERE id IN (
+WITH events_on_tags AS (
+  SELECT events_id, array_agg(tags_id) as tags
+  FROM events2tags
+  GROUP BY events_id
+)
+SELECT events_id FROM events_on_tags
+WHERE tags @> array[@tags@]
+)
+AND e.startdate >= :startdate
+ORDER BY e.startdate
+EOF;
+            $tag_ids = array_reduce($tags, function ($carry, $item) {
+                if (strlen($carry) == 0) {
+                    return $item->id;
+                } else {
+                    return $carry . ',' . $item->id;
+                }
+            });
+
+            $sql = str_replace('@tags@', $tag_ids, $sql);
+
+            $rsm = new ResultSetMappingBuilder($em);
+            $rsm->addRootEntityFromClassMetadata('CalciferBundle:Event', 'e');
+
+            $query = $em->createNativeQuery($sql, $rsm);
+
+            $query->setParameter('startdate', $now);
+
+            $entities = $query->getResult();
+
+        } else {
+            /** @var QueryBuilder $qb */
+            $qb = $em->createQueryBuilder();
+            $qb->select(array('e'))
+                ->from('CalciferBundle:Event', 'e')
+                ->where('e.startdate >= :startdate')
+                ->orderBy('e.startdate')
+                ->setParameter('startdate', $now);
+
+            $qb->join('e.tags', 't', 'WITH', $qb->expr()->in('t.id', array_reduce($tags, function ($carry, $item) {
+                if (strlen($carry) == 0) {
+                    return $item->id;
+                } else {
+                    return $carry . ',' . $item->id;
+                }
+            })));
+            $entities = $qb->getQuery()->execute();
+        }
 
         if ($format == 'ics') {
             $calendar = new Calendar();
@@ -75,25 +149,7 @@ class TagController extends Controller
 
             foreach ($entities as $entity) {
                 /** @var Event $entity */
-                $event = new CalendarEvent();
-                $event->setStart($entity->startdate);
-                if ($entity->enddate instanceof \DateTime)
-                    $event->setEnd($entity->enddate);
-                $event->setSummary($entity->summary);
-                $event->setDescription($entity->description);
-                $event->setUrl($entity->url);
-                $event->setUid($entity->slug);
-                if ($entity->location instanceof Location) {
-                    $location = new \Jsvrcek\ICS\Model\Description\Location();
-                    $location->setName($entity->location->name);
-                    $event->setLocations([$location]);
-                    if (\is_float($entity->location->lon) && \is_float($entity->location->lat)) {
-                        $geo = new Geo();
-                        $geo->setLatitude($entity->location->lat);
-                        $geo->setLongitude($entity->location->lon);
-                        $event->setGeo($geo);
-                    }
-                }
+                $event = $entity->ConvertToCalendarEvent();
                 $calendar->addEvent($event);
             }
 
@@ -110,8 +166,49 @@ class TagController extends Controller
         } else {
             return array(
                 'entities' => $entities,
-                'tag' => $tag,
+                'tags' => $tags,
+                'operator' => $operator,
             );
         }
     }
+
+    /**
+     * Finds and displays a Event entity.
+     *
+     * @Route("/")
+     * @Method("GET")
+     */
+    public function indexAction() {
+        $accepts = AcceptHeader::fromString($this->getRequest()->headers->get('Accept'));
+        if ($accepts->has('application/json')) {
+            $em = $this->getDoctrine()->getManager();
+
+            /** @var QueryBuilder $qb */
+            $qb = $em->createQueryBuilder();
+            $qb->select(['t'])
+                ->from('CalciferBundle:Tag', 't')
+                ->where('t.name LIKE :tag')
+                ->orderBy('t.name')
+                ->setParameter('tag', sprintf('%%%s%%',strtolower($this->getRequest()->query->get('q'))));
+
+            $entities = $qb->getQuery()->execute();
+
+            $tags = [];
+            foreach($entities as $tag) {
+                /** @var Tag $tag */
+                $tags[] = [
+                    'id' => $tag->id,
+                    'name' => $tag->name,
+                ];
+            }
+
+
+            $response = new Response(json_encode($tags));
+            $response->headers->set('Content-Type', 'application/json');
+
+            return $response;
+        } else {
+            return $this->redirect('/');
+        }
+    }
 }

src/Hackspace/Bundle/CalciferBundle/Entity/BaseEntity.php

@@ -46,7 +46,7 @@ abstract class BaseEntity {
         }
     }
 
-    public function __get($name) {
+    public function &__get($name) {
         if (property_exists($this,$name)) {
             return $this->$name;
         } else {

src/Hackspace/Bundle/CalciferBundle/Entity/Event.php

@@ -2,8 +2,20 @@
 
 namespace Hackspace\Bundle\CalciferBundle\Entity;
 
+
+
 use Doctrine\ORM\Mapping as ORM;
+use Jsvrcek\ICS\Model\Description\Location As EventLocation;
 use Symfony\Component\Validator\Constraints\DateTime;
+use Jsvrcek\ICS\Model\Calendar;
+use Jsvrcek\ICS\Model\CalendarEvent;
+use Jsvrcek\ICS\Model\Relationship\Attendee;
+use Jsvrcek\ICS\Model\Relationship\Organizer;
+
+use Jsvrcek\ICS\Utility\Formatter;
+use Jsvrcek\ICS\CalendarStream;
+use Jsvrcek\ICS\CalendarExport;
+use Jsvrcek\ICS\Model\Description\Geo;
 
 /**
  * Event
@@ -129,4 +141,35 @@ class Event extends BaseEntity
         }
         return $retval;
     }
+
+
+    public function ConvertToCalendarEvent() {
+        $event = new CalendarEvent();
+        $event->setStart($this->startdate);
+        if ($this->enddate instanceof \DateTime)
+            $event->setEnd($this->enddate);
+        $event->setSummary($this->summary);
+        $event->setUrl($this->url);
+        $uid = sprintf("https://%s/termine/%s",$_SERVER['HTTP_HOST'],$this->slug);
+        $event->setUid($uid);
+        if (count($this->tags) > 0) {
+            $categories = [];
+            foreach($this->tags as $tag) {
+                $event->addCategory($tag->name);
+            }
+        }
+        if ($this->location instanceof Location) {
+            $location = new EventLocation();
+            $location->setName($this->location->name);
+            $event->setLocations([$location]);
+            if (\is_float($this->location->lon) && \is_float($this->location->lat)) {
+                $geo = new Geo();
+                $geo->setLatitude($this->location->lat);
+                $geo->setLongitude($this->location->lon);
+                $event->setGeo($geo);
+            }
+        }
+        $event->setDescription($this->description);
+        return $event;
+    }
 }

src/Hackspace/Bundle/CalciferBundle/Entity/RepeatingEvent.php

@@ -4,6 +4,7 @@ namespace Hackspace\Bundle\CalciferBundle\Entity;
 
 use Doctrine\ORM\Mapping as ORM;
 use Doctrine\ORM\PersistentCollection;
+use enko\RelativeDateParser\RelativeDateParser;
 
 /**
  * RepeatEvent
@@ -84,4 +85,25 @@ class RepeatingEvent extends BaseEntity
      *      )
      */
     protected $tags = [];
+
+    public function isValid() {
+        $errors = [];
+        if ((is_null($this->nextdate)) && (strlen($this->nextdate) > 0)) {
+            $errors['nextdate'] = "Bitte gebe einen nächsten Termin an.";
+        }
+        if ((is_null($this->repeating_pattern)) && (strlen($this->repeating_pattern) > 0)) {
+            $errors['repeating_pattern'] = "Bitte gebe ein gültiges Wiederholungsmuster an.";
+        } else {
+            $this->nextdate->setTimezone(new \DateTimeZone('Europe/Berlin'));
+            try {
+                $parser = new RelativeDateParser($this->repeating_pattern,$this->nextdate,'de');
+            } catch (\Exception $e) {
+                $errors['repeating_pattern'] = "Bitte gebe ein gültiges Wiederholungsmuster an.";
+            }
+        }
+        if ((is_null($this->summary)) && (strlen($this->summary) > 0)) {
+            $errors['summary'] = "Bitte gebe eine Zusammenfassung an.";
+        }
+        return $errors;
+    }
 }

src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/events.scss

@@ -1,44 +1,22 @@
-.event.box {
+.card {
   h2 {
-    padding: 0.5rem;
-    a,a:hover,a:visited {
-      color: #ffffff;
+    margin-bottom: 0.3em !important;
+    a {
+      color: inherit;
     }
   }
-
-  .startdate,.location,.url,.action {
-    display: inline;
-    margin: 0;
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
-  }
-
-  a i.icon {
-    text-decoration: none;
-  }
-
-  ul.tags {
-    padding-left: 0;
-    margin: 0;
-    margin-right: 0.5rem;
-    margin-bottom: 0.5rem;
-    display: inline;
-    li {
-      list-style-type: none;
-      display: inline;
-      margin-right: 0.5rem;
+  .meta {
+    .label,.button {
+      margin-bottom: 0.3em;
+      margin-top: 0.3em;
     }
   }
 }
 
-form .ui.form {
-  .field {
-    .attached-label > input, .attached-label > textarea {
-      margin-bottom: 2rem;
-    }
-    .attached-geo-label > input, .attached-geo-label > textarea {
-      margin-bottom: 3.2rem;
-    }
+#event-form {
+  textarea {
+    height: auto;
+    max-height: none;
   }
 }
 
@@ -46,10 +24,6 @@ form .ui.form {
   height: 20rem;
 }
 
-.location-edit {
-  text-decoration: none;
-}
-
 #location-description {
   p {
     margin-top: 0.5rem;

src/Hackspace/Bundle/CalciferBundle/Resources/assets/css/main.scss

@@ -1,37 +1,17 @@
 body {
-  margin: 0;
-  font-family: 'Roboto', sans-serif;
+  margin: 50px 0 0;
 }
 
-header {
-  top: 0;
-}
-
-header .ui.grid > .column, .title.ui.grid > .column {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.box h2 {
-  font-size: 1rem !important;
-}
-
-a .icon {
-  text-decoration: none;
-}
-
-a, a:hover, a:visited {
-  color: #000000;
-}
-
-a:hover {
-  text-decoration: none;
-}
-
-#mission-statement {
-  overflow: hidden;
-
-  img {
+#main {
+  &>.basic.segment:first-child {
     margin-bottom: 0;
   }
-}
+  &>.basic.segment:last-child {
+    margin-top: 0;
+    padding-top: 0;
+  }
+}
+
+h1.ui.green.block.dividing.header {
+  background-color: #ffffff;
+}

src/Hackspace/Bundle/CalciferBundle/Resources/assets/js/events.js

@@ -22,7 +22,7 @@ jQuery(document).ready(function () {
         map = L.map('map');
 
         // add an OpenStreetMap tile layer
-        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(map);
 
@@ -49,7 +49,6 @@ jQuery(document).ready(function () {
                 if (!(jQuery('input[name=location_lat]').val() == undefined)) {
                     jQuery('input[name=location_lat]').val(coords.lat);
                     jQuery('input[name=location_lon]').val(coords.lng);
-                    jQuery('input[name=location]').css('margin-bottom', '3.2rem');
                     jQuery('span.coords').text('Folgende Koordinaten sind angegeben: lat:' + coords.lat + ', lon:' + coords.lng);
                 } else {
                     jQuery('input[name=geocords]').val(coords.lat + ',' + coords.lng);
@@ -83,9 +82,114 @@ jQuery(document).ready(function () {
     }
 });
 
-$(document).ready(function() {
+function calcBoxSize(columns) {
+    var card_selector = jQuery('.ui.cards .card');
+    var screen_width = $(window).width() - 14 - 14; /* padding of basic segment */
+    // first check if we can display 4 cards on the screen with a minimum width of 399px
+    var box_width = Math.floor((screen_width / columns)) - 10;
+    if ((box_width >= 395) || (columns == 1)) {
+        card_selector.css('width',box_width);
+    } else {
+        calcBoxSize(columns - 1);
+    }
+}
 
-    if (jQuery('#view-map').length == 1) {
+$(window).resize(function(){
+    var card_selector = jQuery('.ui.cards .card');
+
+    if (card_selector.length > 0) {
+        calcBoxSize(4);
+    }
+});
+
+$(document).ready(function() {
+    var view_map_selector = jQuery('#view-map');
+    var card_selector = jQuery('.ui.cards .card');
+
+    if (card_selector.length > 0) {
+        calcBoxSize(4);
+    }
+
+    $('#event_tags').selectize({
+	    create: true,
+        diacritics: true,
+        valueField: 'name',
+        labelField: 'name',
+        searchField: 'name',
+	    render: {
+    	    item: function(data,escape){
+        		console.log([data,escape]);
+        		return '<div class="ui green compact small label"><i class="tag icon"></i>' + escape(data.name) + '</div>';
+    	    }
+    	},
+        load: function(query, callback) {
+            if (!query.length) return callback();
+            $.ajax({
+                url: "/tags/",
+                type: "GET",
+                dataType: 'json',
+                data: {
+                    q: query
+                },
+                error: function() {
+                  callback();
+                },
+                success: function(res) {
+                    console.log(res);
+                    callback(res);
+                }
+            });
+        }
+    });
+
+    $('#event_location').selectize({
+        create: true,
+        diacritics: true,
+        valueField: 'name',
+        labelField: 'name',
+        searchField: 'name',
+        maxItems: 1,
+        render: {
+            item: function(data,escape){
+                console.log([data,escape]);
+                return '<div class="ui green compact small label"><i class="map marker icon"></i>' + escape(data.name) + '</div>';
+            },
+            option: function(item, escape) {
+                return '<div class="ui fluid green card">' +
+                    '<div class="content">'+
+                        '<div class="header">' +
+                            '<i class="ui icon map marker"></i>' + escape(item.name) +
+                        '</div>' +
+                        '<div class="meta">'+
+                        (item.lon && item.lat ? 'lon: '+ escape(item.lon)+' lat: ' + escape(item.lat) : '')+
+                (item.streetaddress ? ' Anschrift: ' + item.streetaddress + ' ' + item.streetnumber + ' ' + item.zipcode + ' ' + item.city : '')+
+                        '</div>'+
+                        (item.description ? '<div class="description">' + item.description + '</div>' : '') +
+                    '</div>'+
+                '</div>';
+            }
+        },
+        load: function(query, callback) {
+            if (!query.length) return callback();
+            $.ajax({
+                url: "/orte/",
+                type: "GET",
+                dataType: 'json',
+                data: {
+                    q: query
+                },
+                error: function() {
+                    callback();
+                },
+                success: function(res) {
+                    console.log(res);
+                    callback(res);
+                }
+            });
+        }
+    });
+
+    if (view_map_selector.length == 1) {
         jQuery('.show_map').click(addGeoCoordinates);
         map = L.map('view-map');
 
@@ -108,8 +212,8 @@ $(document).ready(function() {
             },
             onVisible: function () {
                 map.invalidateSize(true);
-                var lat = $('#view-map').data('lat');
-                var lon = $('#view-map').data('lon');
+                var lat = view_map_selector.data('lat');
+                var lon = view_map_selector.data('lon');
                 if ((lat > 0) && (lon > 0)) {
                     map.setView([lat, lon], 16);
                     var latlng = new L.LatLng(lat, lon);
@@ -121,4 +225,4 @@ $(document).ready(function() {
             }
         }).modal('attach events', '.show_map', 'show');
     }
-});
+});

src/Hackspace/Bundle/CalciferBundle/Resources/views/Default/index.html.twig

@@ -1 +1,64 @@
-Hello {{ name }}!
+{% extends 'CalciferBundle::layout.html.twig' %}
+
+{% block body -%}
+    <div class="ui basic segment">
+        <h1 class="ui green block dividing header">
+            Über Calcifer
+        </h1>
+    </div>
+    <div class="ui basic segment">
+        <div class="ui segment">
+            <div class="ui stackable grid">
+                <div class="three wide column">
+                    <div class="ui fluid card">
+                        <div class="image">
+                            {% image '@CalciferBundle/Resources/assets/images/logo.png' %}
+                            <img
+                                    title="Eine Zeichnung von Calcifer. Gezeichnet von simply-Sylvan (http://simply-sylvan.deviantart.com/art/Calcifer-Purple-176746086)"
+                                    alt="Eine Zeichnung von Calcifer. Gezeichnet von simply-Sylvan (http://simply-sylvan.deviantart.com/art/Calcifer-Purple-176746086)"
+                                    src="{{ asset_url }}"
+                                    class=""/>
+                            {% endimage %}
+                        </div>
+                        <div class="content">
+                            <a class="header">Calcifer</a>
+
+                            <div class="description">
+                                Gezeichnet von <a
+                                        href="http://simply-sylvan.deviantart.com/art/Calcifer-Purple-176746086">simply-Sylvan</a>.
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="thirteen wide column">
+                    <p>Calcifer ist ein Daemon aus dem Anime <a
+                                href="http://anidb.net/perl-bin/animedb.pl?show=anime&amp;aid=1218">„Das wandelnde
+                            Schloss“</a>,
+                        der sich darum kümmert das sich Howls Schloss weiter bewegt. Diese Terminverwaltung soll dafür
+                        sorgen
+                        das sich der <a href="https://www.krautspace.de/">Hackspace Jena</a> auch weiter bewegt und
+                        viele tolle
+                        Termine statfinden.</p>
+
+                    <p>
+                        Die Software wurde mit <a href="http://symfony.com/">Symfony2</a> und <a href="http://semantic-ui.com/">Semantic UI</a> gestrickt. Den
+                        Quellcode findest du auf der <a href="https://phablab.krautspace.de/diffusion/C/">Phabricator
+                            Instanz</a> des
+                        Hackspace Jena oder auf <a href="https://github.com/HackspaceJena/calcifer">Github</a>.
+                    </p>
+
+                    <p>
+                        Solltest du Probleme mit Calcifer haben, kannst du entweder über <a
+                                href="https://phablab.krautspace.de/maniphest/task/create/">Phabricator</a> oder <a
+                                href="https://github.com/HackspaceJena/calcifer/issues/new">Github</a> ein Ticket
+                        anlegen.
+                        Alternativ kannst du auch im <a href="https://www.krautspace.de/chat/index.html">Chat des
+                            Hackspace
+                            Jena</a> Probleme melden.
+                    </p>
+
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/delete.html.twig

@@ -15,15 +15,14 @@
 {% endblock %}
 
 {% block body -%}
-    <div class="ui one column page grid">
-        <div class="ui column">
-            <div class="ui segment event box">
-                <form class="ui form" method="post">
-                    <p>Möchtest du die Veranstaltung <strong>„{{ entity.summary }}“</strong> zum Datum <strong>„{{ entity.startdate.format('Y-m-d H:i') }}“</strong> wirklich löschen?</p>
-                    <button name="confirmation" value="true" class="ui button red">Ja</button>
-                    <a href="{{ path('_show', {'slug' : entity.slug }) }}" class="ui button green">Nein</a>
-                </form>
-            </div>
+    <div class="ui basic segment">
+        <div class="ui segment">
+            <form class="ui form" method="post">
+                <p>Möchtest du die Veranstaltung <strong>„{{ entity.summary }}“</strong> zum Datum
+                    <strong>„{{ entity.startdate.format('Y-m-d H:i') }}“</strong> wirklich löschen?</p>
+                <button name="confirmation" value="true" class="ui button red">Ja</button>
+                <a href="{{ path('_show', {'slug' : entity.slug }) }}" class="ui button green">Nein</a>
+            </form>
         </div>
     </div>
 {% endblock %}

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/edit.html.twig

@@ -4,29 +4,31 @@
     {% stylesheets filter="compass"
     "@CalciferBundle/Resources/assets/css/jquery.datetimepicker.scss"
     "@CalciferBundle/Resources/assets/css/events.scss"
-    "@CalciferBundle/Resources/assets/css/leaflet.scss" %}
+    "@CalciferBundle/Resources/assets/css/leaflet.scss"
+    %}
     <link rel="stylesheet" href="{{ asset_url }}"/>
     {% endstylesheets %}
+    <link rel="stylesheet" href="/vendor/selectize.js/dist/css/selectize.css"/>
 {% endblock %}
 
 {% block javascripts %}
     {% javascripts
     "@CalciferBundle/Resources/assets/js/jquery.datetimepicker.js"
     "@CalciferBundle/Resources/assets/js/events.js"
-    "@CalciferBundle/Resources/assets/js/leaflet.js" %}
-    <script src="{{ asset_url }}"></script>
+    "@CalciferBundle/Resources/assets/js/leaflet.js"
+    %}
+    <script src="{{ asset_url }}"></script>    
     {% endjavascripts %}
+    <script src="/vendor/selectize.js/dist/js/standalone/selectize.js"></script>
 {% endblock %}
 
 {% block body -%}
-    <div class="ui one column page grid">
-        <div class="ui column">
-            <h1>Termin bearbeiten</h1>
-        </div>
+    <div class="ui basic segment">
+        <h1 class="ui green block dividing header">Termin bearbeiten</h1>
     </div>
 
-    <div class="ui one column page grid">
-        <div class="ui column">
+    <div class="ui basic segment">
+        <div class="ui segment">
             {{ include('CalciferBundle:Event:event_form.html.twig',{'entity':entity}) }}
         </div>
     </div>

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/event_box.html.twig

@@ -1,57 +1,61 @@
-<div class="ui column">
-    <div class="ui segment event box">
-        <h2 class="ui dividing header segment green inverted"><a
+<div class="ui {% if (detail|default(false)) %}fluid {% endif %}card">
+    <div class="content">
+        <h2 class="ui green dividing header"><a
                     href="{{ path('_show', { 'slug': entity.slug }) }}">{{ entity.summary }}</a>
         </h2>
 
+        <div class="meta">
+            <div class="ui green compact small label">
+                <i class="calendar icon"></i> {{ entity.getFormatedDate() }}
+            </div>
+
+            {% if entity.location is not null %}
+                <a class="ui green compact small label"
+                   href="{{ path('location_show', {'slug' : entity.location.slug }) }}">
+                    <i class="map marker icon"></i> {{ entity.location.name }}
+                </a>
+            {% endif %}
+
+            {% if (detail|default(false)) %}
+                {% if entity.tags|length > 0 %}
+                    {% for tag in entity.tags %}
+                        <a class="ui green compact small label" href="{{ path('tag_show', {'slug' : tag.slug }) }}">
+                            <i class="tag icon"></i> {{ tag.name }}
+                        </a>
+                    {% endfor %}
+                {% endif %}
+            {% endif %}
+
+            {% if entity.url|length > 0 %}
+                <a class="ui green compact small label" href="{{ entity.url }}">
+                    <i class="globe icon"></i> {{ entity.url|truncate(30) }}
+                </a>
+            {% endif %}
+        </div>
+
+        <div class="">
+            {% if truncate_summary|default(false) %}
+                <p>{{ entity.description|truncate(255)|markdown }}</p>
+            {% else %}
+                <p>{{ entity.description|markdown }}</p>
+            {% endif %}
+        </div>
         {% if (detail|default(false)) %}
-        <p class="action">
-            <a href="{{ path('_edit', {'slug' : entity.slug }) }}"><i
-                        class="circular icon edit green inverted link"></i>Bearbeiten</a>
-        </p>
-
-        <p class="action">
-            <a href="{{ path('_delete', {'slug' : entity.slug }) }}"><i class="circular icon delete green inverted link"></i>Löschen</a>
-        </p>
-
-        <p class="action">
-            <a href="{{ path('_copy', {'slug' : entity.slug }) }}"><i class="circular icon copy green inverted link"></i>Kopieren</a>
-        </p>
-        {% endif %}
-
-        <p class="startdate ">
-            <i class="circular icon calendar green inverted link" title="Wann?"
-               data-content="Wann?"></i>{{ entity.getFormatedDate() }}
-        </p>
-
-        {% if entity.location is not null %}
-            <p class="location">
-                <a href="{{ path('location_show', {'slug' : entity.location.slug }) }}"><i
-                            class="circular icon map marker green inverted link" title="Wo?"
-                            data-content="Wo?"></i>{{ entity.location.name }}</a>
-            </p>
-        {% endif %}
-        {% if entity.tags|length > 0 %}
-            <ul class="tags">
-                {% for tag in entity.tags %}
-                    <li class="tag"><a href="{{ path('tag_show',{'slug' : tag.slug }) }}"><i
-                                    class="circular icon tag green inverted link"></i>{{ tag.name }}</a></li>
-                {% endfor %}
-            </ul>
-        {% endif %}
-
-        {% if entity.url|length > 0 %}
-            <p class="url">
-                <a href="{{ entity.url }}"><i class="circular icon globe green inverted link"></i>{{ entity.url }}</a>
-            </p>
-        {% endif %}
-
-        <div class="ui clearing divider"></div>
-
-        {% if truncate_summary|default(false) %}
-            <p>{{ entity.description|truncate(255)|markdown }}</p>
-        {% else %}
-            <p>{{ entity.description|markdown }}</p>
+            <a class="ui green tiny compact labeled icon button"
+               href="{{ path('_edit', {'slug' : entity.slug }) }}">
+                <i class="edit icon"></i>
+                Bearbeiten
+            </a>
+            <a class="ui green tiny compact labeled icon button"
+               href="{{ path('_delete', {'slug' : entity.slug }) }}">
+                <i class="delete icon"></i>
+                Löschen
+            </a>
+            <a class="ui green tiny compact labeled icon button"
+               href="{{ path('_copy', {'slug' : entity.slug }) }}">
+                <i class="copy icon"></i>
+                Kopieren
+            </a>
         {% endif %}
     </div>
 </div>

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/event_form.html.twig

@@ -1,142 +1,153 @@
-<form method="post" action="{% if entity.id|default(0) > 0 %}{{ path('_update',{'slug':entity.slug}) }}{% else %}{{ path('_create') }}{% endif %}">
-    <div class="ui form segment">
-        <div class="field{% if(errors|default('0') != 0) %} {% if('startdate' in errors|keys) %}error{% endif %}{% endif %}">
-            <label class="control-label required" for="event_startdate">Startdatum</label>
+<form class="ui form" method="post" id="event-form"
+      action="{% if entity.id|default(0) > 0 %}{{ path('_update',{'slug':entity.slug}) }}{% else %}{{ path('_create') }}{% endif %}">
+    <div class="ui stackable grid">
+        <div class="eight wide column">
+    <div class="required field{% if(errors|default('0') != 0) %} {% if('startdate' in errors|keys) %}error{% endif %}{% endif %}">
+        <label for="event_startdate">Startdatum</label>
 
-            <div class="ui left labeled icon input">
-                <input type="datetime"
-                       id="event_startdate"
-                       name="startdate"
-                       required="required"
-                       value="{{ entity.startdate.format('Y-m-d H:i')|default('') }}"
-                       placeholder="{{ "now"|date('Y-m-d H:i') }}"
-                       class="form-control">
-                {% if(errors|default('0') != 0) %} {% if('startdate' in errors|keys) %}
+        <div class="ui icon input">
+            <input type="datetime"
+                   id="event_startdate"
+                   name="startdate"
+                   required="required"
+                   value="{{ entity.startdate.format('Y-m-d H:i')|default('') }}"
+                   placeholder="{{ "now"|date('Y-m-d H:i') }}"
+                   class="form-control">
+            {% if(errors|default('0') != 0) %} {% if('startdate' in errors|keys) %}
                 <div class="ui red pointing above ui label">{{ errors.startdate }}</div>
-                {% endif %}{% endif %}
+            {% endif %}{% endif %}
 
-                <i class="icon calendar"></i>
-
-                <div class="ui corner label">
-                    <i class="icon asterisk"></i>
-                </div>
-            </div>
+            <i class="icon calendar"></i>
         </div>
-        <div class="field{% if(errors|default('0') != 0) %} {% if('enddate' in errors|keys) %}error{% endif %}{% endif %}">
-            <label class="control-label required" for="event_enddate">Enddatum</label>
-
-            <div class="ui left labeled icon input">
-                <input type="datetime"
-                       id="event_enddate"
-                       name="enddate"
-                       value="{{ entity.enddate.format('Y-m-d H:i')|default('') }}"
-                       placeholder="{{ "now"|date('Y-m-d H:i') }}"
-                       class="form-control">
-
-                {% if(errors|default('0') != 0) %} {% if('enddate' in errors|keys) %}
-                    <div class="ui red pointing above ui label">{{ errors.enddate }}</div>
-                {% endif %}{% endif %}
-
-                <i class="icon calendar"></i>
-            </div>
+        <div class="ui label">
+            Bitte gebe das Startdatum im Format <a href="http://de.wikipedia.org/wiki/ISO_8601">ISO 8601</a> an.
         </div>
-        <div class="field{% if(errors|default('0') != 0) %} {% if('summary' in errors|keys) %}error{% endif %}{% endif %}">
-            <label class="" for="event_summary">Zusammenfassung</label>
+    </div>
+    <div class="required field{% if(errors|default('0') != 0) %} {% if('enddate' in errors|keys) %}error{% endif %}{% endif %}">
+        <label for="event_enddate">Enddatum</label>
 
-            <div class="ui left labeled input">
-                <input type="text"
-                       id="event_summary"
-                       name="summary"
-                       value="{{ entity.summary|default('') }}"
-                       required="required"
-                       maxlength="255"
-                       class="form-control">
+        <div class="ui icon input">
+            <input type="datetime"
+                   id="event_enddate"
+                   name="enddate"
+                   value="{{ entity.enddate.format('Y-m-d H:i')|default('') }}"
+                   placeholder="{{ "now"|date('Y-m-d H:i') }}"
+                   class="form-control">
 
-                {% if(errors|default('0') != 0) %} {% if('summary' in errors|keys) %}
-                    <div class="ui red pointing above ui label">{{ errors.summary }}</div>
-                {% endif %}{% endif %}
+            {% if(errors|default('0') != 0) %} {% if('enddate' in errors|keys) %}
+                <div class="ui red pointing above ui label">{{ errors.enddate }}</div>
+            {% endif %}{% endif %}
 
-                <div class="ui corner label">
-                    <i class="icon asterisk"></i>
-                </div>
-            </div>
+            <i class="icon calendar"></i>
         </div>
-
-        <div class="field">
-            <label class="control-label required" for="event_summary">Beschreibung</label>
-
-            <div class="ui left labeled icon input attached-label">
-                <textarea name="description">{{ entity.description|default('') }}</textarea>
-                <div class="ui bottom attached label">Du kannst hier <a href="https://en.wikipedia.org/wiki/Markdown">Markdown</a> benutzen.</div>
-            </div>
+        <div class="ui label">
+            Bitte gebe das Enddatum im Format <a href="http://de.wikipedia.org/wiki/ISO_8601">ISO 8601</a> an.
         </div>
+    </div>
+    <div class="required field{% if(errors|default('0') != 0) %} {% if('summary' in errors|keys) %}error{% endif %}{% endif %}">
+        <label for="event_summary">Zusammenfassung</label>
 
-        <div class="field">
-            <label class="control-label required" for="event_url">URL</label>
+        <div class="ui input">
+            <input type="text"
+                   id="event_summary"
+                   name="summary"
+                   value="{{ entity.summary|default('') }}"
+                   required="required"
+                   maxlength="255"
+                   class="form-control">
 
-            <div class="ui left labeled icon input">
-                <input type="text"
-                       id="event_url"
-                       name="url"
-                       maxlength="255"
-                       value="{{ entity.url|default('') }}"
-                       class="form-control">
-                <i class="icon globe"></i>
-            </div>
+            {% if(errors|default('0') != 0) %} {% if('summary' in errors|keys) %}
+                <div class="ui red pointing above ui label">{{ errors.summary }}</div>
+            {% endif %}{% endif %}
         </div>
-
-        <div class="field">
-            <label class="control-label required" for="event_location">Ort</label>
-
-            <div class="ui left labeled icon input attached-{% if entity.location.lat|default(0) > 0 %}geo-{% endif %}label">
-                <input type="text"
-                       id="event_location"
-                       name="location"
-                       maxlength="255"
-                       value="{{ entity.location.name|default('') }}"
-                       class="form-control">
-                <input type="hidden" name="location_lat" value="{{ entity.location.lat|default('') }}">
-                <input type="hidden" name="location_lon" value="{{ entity.location.lon|default('') }}">
-                <i class="icon map marker"></i>
-                <div class="ui bottom attached label">
-                    Du kannst zu diesem Ort auch Geokoordinaten <a href="#" class="add_geo">hinterlegen</a>.<br />
-                    <span class="coords">{% if entity.location.lat|default(0) > 0 %}Folgende Koordinaten sind angegeben: lat:{{ entity.location.lat }}, lon:{{ entity.location.lon }}{% endif %}</span>
-                </div>
-                <div class="ui modal geo chooser">
-                    <i class="close icon"></i>
-                    <div class="header">
-                        Wähle einen Punkt auf der Karte
-                    </div>
-                    <div class="content">
-                        <div id="map"></div>
-                    </div>
-                    <div class="actions">
-                        <div class="ui button cancel">
-                            Cancel
-                        </div>
-                        <div class="ui button ok">
-                            Okay
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="field">
-            <label class="" for="event_tags">Tags</label>
-
-            <div class="ui left icon input attached-label">
-                <input type="text"
-                       id="event_tags"
-                       name="tags"
-                       value="{{ entity.getTagsAsText() }}"
-                       class="form-control">
-                <i class="icon tag"></i>
-                <div class="ui bottom attached label">Du kannst hier kommasepariert <a href="https://en.wikipedia.org/wiki/Tag_%28metadata%29">Tags</a> angeben.</div>
-            </div>
-        </div>
-
-        <input type="submit" class="ui button blue" value="Speichern"/>
     </div>
 
+    <div class="field">
+        <label for="event_url">URL</label>
+
+        <div class="ui icon input">
+            <input type="text"
+                   id="event_url"
+                   name="url"
+                   maxlength="255"
+                   value="{{ entity.url|default('') }}"
+                   class="form-control">
+            <i class="icon globe"></i>
+        </div>
+
+        <div class="ui label">
+            Vergesse nicht das https:// zur URL anzugeben.
+        </div>
+    </div>
+
+    <div class="required field">
+        <label for="event_location">Ort</label>
+
+        <div class="ui icon input attached-{% if entity.location.lat|default(0) > 0 %}geo-{% endif %}label">
+            <input type="text"
+                   id="event_location"
+                   name="location"
+                   maxlength="255"
+                   value="{{ entity.location.name|default('') }}"
+                   class="form-control">
+            <input type="hidden" name="location_lat" value="{{ entity.location.lat|default('') }}">
+            <input type="hidden" name="location_lon" value="{{ entity.location.lon|default('') }}">
+            <i class="icon map marker"></i>
+        </div>
+
+        <div class="ui label">
+            Du kannst zu diesem Ort auch Geokoordinaten <a href="#" class="add_geo">hinterlegen</a>  (JavaScript erforderlich).<br/>
+            <span class="coords">{% if entity.location.lat|default(0) > 0 %}Folgende Koordinaten sind angegeben: lat:{{ entity.location.lat }}, lon:{{ entity.location.lon }}{% endif %}</span>
+        </div>
+        <div class="ui modal geo chooser">
+            <i class="close icon"></i>
+
+            <div class="header">
+                Wähle einen Punkt auf der Karte
+            </div>
+            <div class="content">
+                <div id="map"></div>
+            </div>
+            <div class="actions">
+                <div class="ui button cancel">
+                    Cancel
+                </div>
+                <div class="ui button ok">
+                    Okay
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="field">
+        <label for="event_tags">Tags</label>
+
+        <div class="ui icon input">
+            <input type="text"
+                   id="event_tags"
+                   name="tags"
+                   value="{{ entity.getTagsAsText() }}"
+                   class="form-control">
+            <i class="icon tag"></i>
+        </div>
+        <div class="ui label">Du kannst hier kommasepariert <a
+                    href="https://en.wikipedia.org/wiki/Tag_%28metadata%29">Tags</a> angeben.
+        </div>
+    </div>
+        </div>
+        <div class="eight wide column">
+            <div class="required field">
+                <label for="event_summary">Beschreibung</label>
+
+                <div class="ui input">
+                    <textarea name="description" rows="30">{{ entity.description|default('') }}</textarea>
+                </div>
+                <div class="ui label">Du kannst hier <a href="https://en.wikipedia.org/wiki/Markdown">Markdown</a>
+                    benutzen.
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <input type="submit" class="ui button green" value="Speichern"/>
 </form>

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/index.html.twig

@@ -2,76 +2,105 @@
 
 {% block css %}
     {% stylesheets filter="compass"
-        "@CalciferBundle/Resources/assets/css/events.scss"
-    "@CalciferBundle/Resources/assets/css/leaflet.scss"
-    %}
-        <link rel="stylesheet" href="{{ asset_url }}" />
+    "@CalciferBundle/Resources/assets/css/events.scss"
+    "@CalciferBundle/Resources/assets/css/leaflet.scss" %}
+    <link rel="stylesheet" href="{{ asset_url }}"/>
     {% endstylesheets %}
 {% endblock %}
 
 {% block javascripts %}
     {% javascripts
     "@CalciferBundle/Resources/assets/js/events.js"
-    "@CalciferBundle/Resources/assets/js/leaflet.js"
-    %}
+    "@CalciferBundle/Resources/assets/js/leaflet.js" %}
     <script src="{{ asset_url }}"></script>
     {% endjavascripts %}
 {% endblock %}
 
 {% block body -%}
-    <div class="ui one column page grid title">
-        <div class="ui column">
-            <h1>
-                Termine
-                {% if tag|default(false) %} für Tag „{{ tag.name }}“{% endif %}
-                {% if location|default(false) %} für Ort „{{ location.name }}“ <a class="location-edit" href="{{ path("location_edit",{slug:location.slug}) }}"><i class="ui icon edit inverted green circular link" data-content="Ort bearbeiten" title="Ort bearbeiten"></i> </a> {% endif %}
-            </h1>
-            {% if tag|default(false) %}
-                <a href="{{ path('tag_show',{'slug' : tag.slug }) }}.ics"><i class="icon calendar"></i>Link zur Kalenderdatei</a>
-            {% endif %}
-            {% if location|default(false) %}
-                {% if (location.description|length > 0) or location.hasAddress() %}
-                    <div id="location-description" class="ui message green">
-                        {% if (location.description|length > 0) %}
-                            <p>{{ location.description|markdown }}</p>
+    <div class="ui basic segment">
+        <h1 class="ui green block dividing header">
+            Termine
+            {% if tags|default(false) %}
+                {% if tags|length == 1 %}
+                    für Tag {{ tags[0].name }}
+                {% elseif(tags|length == 2) %}
+                    für die Tags {{ tags[0].name }} {% if operator == 'or' %}oder{% else %}und{% endif %} {{ tags[1].name }}
+                {% else %}
+                    für die Tags
+                    {% for tag in tags %}
+                        {% if not loop.last %}
+                            {{ tag.name }}{% if loop.index < (tags|length - 1) %},{% endif %}
+                        {% else %}
+                            {% if operator == 'or' %}oder{% else %}und{% endif %} {{ tag.name }}
                         {% endif %}
-                        {% if (location.hasAddress()) %}
-                            <div class="ui section divider"></div>
-                            <p>
-                                Anschrift:<br/>
-                                {{ location.streetaddress }}{% if(location.streetnumber|length > 0) %} {{ location.streetnumber }}{% endif %}<br/>
-                                {% if(location.zipcode|length > 0) %}{{ location.zipcode }} {% endif %}{{ location.city }}
-                            </p>
-                        {% endif %}
-                        {% if ((location.lon > 0) and (location.lat > 0)) %}
-                            <p><a href="" class="show_map">Auf einer OpenStreetMap-Karte anzeigen</a></p>
-                            <div class="ui modal geo viewer">
-                                <i class="close icon"></i>
-                                <div class="header">
-                                    {{ location.name }}<br/>
-                                    {{ location.streetaddress }}{% if(location.streetnumber|length > 0) %} {{ location.streetnumber }}{% endif %}<br/>
-                                    {% if(location.zipcode|length > 0) %}{{ location.zipcode }} {% endif %}{{ location.city }}
-                                </div>
-                                <div class="content">
-                                    <div id="view-map" data-lat="{{ location.lat }}" data-lon="{{ location.lon }}"></div>
-                                </div>
-                                <div class="actions">
-                                    <div class="ui button ok">
-                                        Schließen
-                                    </div>
-                                </div>
-                            </div>
-                        {% endif %}
-                    </div>
+                    {% endfor %}
                 {% endif %}
             {% endif %}
-        </div>
+            {% if location|default(false) %} für Ort „{{ location.name }}“ <a class="location-edit"
+                                                                              href="{{ path("location_edit",{slug:location.slug}) }}"><i
+                        class="ui icon edit green link" data-content="Ort bearbeiten"
+                        title="Ort bearbeiten"></i> </a> {% endif %}
+        </h1>
+        {% if tag|default(false) %}
+            <a href="{{ path('tag_show',{'slug' : tag.slug }) }}.ics"><i class="icon calendar"></i>Link zur
+                Kalenderdatei</a>
+        {% endif %}
+        {% if location|default(false) %}
+            {% if (location.description|length > 0) or location.hasAddress() %}
+                <div id="location-description" class="ui message green">
+                    {% if (location.description|length > 0) %}
+                        <p>{{ location.description|markdown }}</p>
+                    {% endif %}
+                    {% if (location.hasAddress()) %}
+                        <div class="ui section divider"></div>
+                        <p>
+                            Anschrift:<br/>
+                            {{ location.streetaddress }}{% if(location.streetnumber|length > 0) %} {{ location.streetnumber }}{% endif %}
+                            <br/>
+                            {% if(location.zipcode|length > 0) %}{{ location.zipcode }} {% endif %}{{ location.city }}
+                        </p>
+                    {% endif %}
+                    {% if ((location.lon > 0) and (location.lat > 0)) %}
+                        <p><a href="" class="show_map">Auf einer OpenStreetMap-Karte anzeigen</a></p>
+                        <div class="ui modal geo viewer">
+                            <i class="close icon"></i>
+
+                            <div class="header">
+                                {{ location.name }}<br/>
+                                {{ location.streetaddress }}{% if(location.streetnumber|length > 0) %} {{ location.streetnumber }}{% endif %}
+                                <br/>
+                                {% if(location.zipcode|length > 0) %}{{ location.zipcode }} {% endif %}{{ location.city }}
+                            </div>
+                            <div class="content">
+                                <div id="view-map" data-lat="{{ location.lat }}"
+                                     data-lon="{{ location.lon }}"></div>
+                            </div>
+                            <div class="actions">
+                                <div class="ui button ok">
+                                    Schließen
+                                </div>
+                            </div>
+                        </div>
+                    {% endif %}
+                </div>
+            {% endif %}
+        {% endif %}
     </div>
 
-    <div class="ui three column page grid stackable">
-        {% for entity in entities %}
-            {{ include('CalciferBundle:Event:event_box.html.twig',{'truncate_summary':true}) }}
-        {% endfor %}
-    </div>
+    {% if entities|length > 0 %}
+        <div class="ui basic segment">
+            <div class="ui cards">
+                {% for entity in entities %}
+                        {{ include('CalciferBundle:Event:event_box.html.twig',{'truncate_summary':true}) }}
+                {% endfor %}
+            </div>
+        </div>
+    {% else %}
+        <div class="ui one column page grid stackable">
+            <div class="ui column">
+                <p>Es konnten keine Termine gefunden werden.</p>
+            </div>
+        </div>
+    {% endif %}
 
 {% endblock %}

src/Hackspace/Bundle/CalciferBundle/Resources/views/Event/show.html.twig

@@ -17,7 +17,7 @@
 {% endblock %}
 
 {% block body -%}
-    <div class="ui one column page grid">
+    <div class="ui basic segment">
       {{ include('CalciferBundle:Event:event_box.html.twig',{'entity' : entity,'detail' : true}) }}
     </div>
 {% endblock %}

src/Hackspace/Bundle/CalciferBundle/Resources/views/Location/edit.html.twig

@@ -19,146 +19,151 @@
 {% endblock %}
 
 {% block body -%}
-    <div class="ui one column page grid">
-        <div class="ui column">
-            <h1>Ort bearbeiten</h1>
-        </div>
+    <div class="ui basic segment">
+        <h1 class="ui green block dividing header">Ort bearbeiten</h1>
     </div>
 
-    <div class="ui one column page grid">
-        <div class="ui column">
-            <form method="post"
+    <div class="ui basic segment">
+        <div class="ui segment">
+            <form class="ui form"
+                  method="post"
                   action="{{ path('location_update',{'slug':entity.slug}) }}">
-                <div class="ui form segment">
-                    <div class="field">
-                        <label class="" for="location-name">Name</label>
-
-                        <div class="ui left labeled input">
-                            <input type="text"
-                                   id="location-name"
-                                   name="name"
-                                   value="{{ entity.name|default('') }}"
-                                   required="required"
-                                   maxlength="255"
-                                   class="form-control">
-
-                            <div class="ui corner label">
-                                <i class="icon asterisk"></i>
-                            </div>
-                        </div>
+                {% set errors = app.session.flashbag.get('error') %}
+                {% if errors|length > 0 %}
+                    <div class="ui error message">
+                        <div class="header">Bitte korrigiere folgende Fehler:</div>
+                        <ul class="list">
+                            {% for flashMessage in errors %}
+                                <li>{{ flashMessage }}</li>
+                            {% endfor %}
+                        </ul>
                     </div>
+                {% endif %}
+                <div class="required field">
+                    <label for="location-name">Name</label>
 
-                    <div class="field">
-                        <label class="control-label required" for="location-description">Beschreibung</label>
-
-                        <div class="ui left labeled icon input attached-label">
-                            <textarea id="location-description" name="description">{{ entity.description|default('') }}</textarea>
-
-                            <div class="ui bottom attached label">Du kannst hier <a
-                                        href="https://en.wikipedia.org/wiki/Markdown">Markdown</a> benutzen.
-                            </div>
-                        </div>
+                    <div class="ui left labeled input">
+                        <input type="text"
+                               id="location-name"
+                               name="name"
+                               value="{{ entity.name|default('') }}"
+                               required="required"
+                               maxlength="255"
+                               class="form-control">
                     </div>
-
-                    <div class="field">
-                        <label class="" for="location-streetaddress">Straße</label>
-
-                        <div class="ui left labeled input">
-                            <input type="text"
-                                   id="location-streetaddress"
-                                   name="streetaddress"
-                                   value="{{ entity.streetaddress|default('') }}"
-                                   required="required"
-                                   maxlength="255"
-                                   class="form-control">
-
-                        </div>
-                    </div>
-
-                    <div class="field">
-                        <label class="" for="location-streetnumber">Hausnummer</label>
-
-                        <div class="ui left labeled input">
-                            <input type="text"
-                                   id="location-streetnumber"
-                                   name="streetnumber"
-                                   value="{{ entity.streetnumber|default('') }}"
-                                   required="required"
-                                   maxlength="255"
-                                   class="form-control">
-
-                        </div>
-                    </div>
-
-                    <div class="field">
-                        <label class="" for="location-zipcode">Postleitzahl</label>
-
-                        <div class="ui left labeled input">
-                            <input type="text"
-                                   id="location-zipcode"
-                                   name="zipcode"
-                                   value="{{ entity.zipcode|default('') }}"
-                                   required="required"
-                                   maxlength="255"
-                                   class="form-control">
-
-                        </div>
-                    </div>
-
-                    <div class="field">
-                        <label class="" for="location-city">Ort</label>
-
-                        <div class="ui left labeled input">
-                            <input type="text"
-                                   id="location-city"
-                                   name="city"
-                                   value="{{ entity.city|default('') }}"
-                                   required="required"
-                                   maxlength="255"
-                                   class="form-control">
-
-                        </div>
-                    </div>
-
-                    <div class="field">
-                        <label class="control-label required" for="location-geocords">Geokoordinaten</label>
-
-                        <div class="ui left labeled icon input attached-{% if entity.location.lat|default(0) > 0 %}geo-{% endif %}label">
-                            <input type="text"
-                                   id="location-geocords"
-                                   name="geocords"
-                                   maxlength="255"
-                                   value="{{ entity.lat|default('0') }},{{ entity.lon|default('0') }}"
-                                   class="form-control">
-                            <i class="icon map marker"></i>
-                            <div class="ui bottom attached label">
-                                Gebe entweder Breitengrad und Längengrad (Mit Punkten!) kommasepariert ein oder <a href="#" class="add_geo">wähle einen Punkt auf der Karte aus</a>.
-                            </div>
-                            <div class="ui modal geo chooser">
-                                <i class="close icon"></i>
-                                <div class="header">
-                                    Wähle einen Punkt auf der Karte
-                                </div>
-                                <div class="content">
-                                    <div id="map"></div>
-                                </div>
-                                <div class="actions">
-                                    <div class="ui button cancel">
-                                        Cancel
-                                    </div>
-                                    <div class="ui button ok">
-                                        Okay
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-
-
-                    <input type="submit" class="ui button blue" value="Speichern"/>
                 </div>
 
+                <div class="field">
+                    <label class="control-label required" for="location-description">Beschreibung</label>
+
+                    <div class="ui input">
+                        <textarea id="location-description"
+                                  name="description">{{ entity.description|default('') }}</textarea>
+                    </div>
+
+                    <div class="ui label">Du kannst hier <a
+                                href="https://en.wikipedia.org/wiki/Markdown">Markdown</a> benutzen.
+                    </div>
+                </div>
+
+                <div class="field">
+                    <label for="location-streetaddress">Straße</label>
+
+                    <div class="ui input">
+                        <input type="text"
+                               id="location-streetaddress"
+                               name="streetaddress"
+                               value="{{ entity.streetaddress|default('') }}"
+                               maxlength="255"
+                               class="form-control">
+
+                    </div>
+                </div>
+
+                <div class="field">
+                    <label for="location-streetnumber">Hausnummer</label>
+
+                    <div class="ui input">
+                        <input type="text"
+                               id="location-streetnumber"
+                               name="streetnumber"
+                               value="{{ entity.streetnumber|default('') }}"
+                               maxlength="255"
+                               class="form-control">
+
+                    </div>
+                </div>
+
+                <div class="field">
+                    <label for="location-zipcode">Postleitzahl</label>
+
+                    <div class="ui input">
+                        <input type="text"
+                               id="location-zipcode"
+                               name="zipcode"
+                               value="{{ entity.zipcode|default('') }}"
+                               maxlength="255"
+                               class="form-control">
+
+                    </div>
+                </div>
+
+                <div class="field">
+                    <label class="" for="location-city">Ort</label>
+
+                    <div class="ui left labeled input">
+                        <input type="text"
+                               id="location-city"
+                               name="city"
+                               value="{{ entity.city|default('') }}"
+                               required="required"
+                               maxlength="255"
+                               class="form-control">
+
+                    </div>
+                </div>
+
+                <div class="field">
+                    <label class="control-label required" for="location-geocords">Geokoordinaten</label>
+
+                    <div class="ui icon input">
+                        <input type="text"
+                               id="location-geocords"
+                               name="geocords"
+                               maxlength="255"
+                               value="{{ entity.lat|default('0') }},{{ entity.lon|default('0') }}"
+                               class="form-control">
+                        <i class="icon map marker"></i>
+                    </div>
+
+                    <div class="ui label">
+                        Gebe entweder Breitengrad und Längengrad (Mit Punkten!) kommasepariert ein oder <a href="#"
+                                                                                                           class="add_geo">wähle
+                            einen Punkt auf der Karte aus</a>.
+                    </div>
+                    <div class="ui modal geo chooser">
+                        <i class="close icon"></i>
+
+                        <div class="header">
+                            Wähle einen Punkt auf der Karte
+                        </div>
+                        <div class="content">
+                            <div id="map"></div>
+                        </div>
+                        <div class="actions">
+                            <div class="ui button cancel">
+                                Cancel
+                            </div>
+                            <div class="ui button ok">
+                                Okay
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+
+                <input type="submit" class="ui button blue" value="Speichern"/>
+
             </form>
         </div>
     </div>

src/Hackspace/Bundle/CalciferBundle/Resources/views/RepeatingEvent/delete.html.twig

@@ -15,15 +15,13 @@
 {% endblock %}
 
 {% block body -%}
-    <div class="ui one column page grid">
-        <div class="ui column">
-            <div class="ui segment event box">
-                <form class="ui form" method="post">
-                    <p>Möchtest du den wiederholenden Termin <strong>„{{ entity.summary }}“</strong> wirklich löschen?</p>
-                    <button name="confirmation" value="true" class="ui button red">Ja</button>
-                    <a href="{{ path('_show', {'slug' : entity.slug }) }}" class="ui button green">Nein</a>
-                </form>
-            </div>
+    <div class="ui basic segment">
+        <div class="ui segment">
+            <form class="ui form" method="post">
+                <p>Möchtest du den wiederholenden Termin <strong>„{{ entity.summary }}“</strong> wirklich löschen?</p>
+                <button name="confirmation" value="true" class="ui button red">Ja</button>
+                <a href="{{ path('_show', {'slug' : entity.slug }) }}" class="ui button green">Nein</a>
+            </form>
         </div>
     </div>
 {% endblock %}

src/Hackspace/Bundle/CalciferBundle/Resources/views/RepeatingEvent/edit.html.twig

@@ -4,8 +4,7 @@
     {% stylesheets filter="compass"
     "@CalciferBundle/Resources/assets/css/jquery.datetimepicker.scss"
     "@CalciferBundle/Resources/assets/css/events.scss"
-    "@CalciferBundle/Resources/assets/css/leaflet.scss"
-    %}
+    "@CalciferBundle/Resources/assets/css/leaflet.scss" %}
     <link rel="stylesheet" href="{{ asset_url }}"/>
     {% endstylesheets %}
 {% endblock %}
@@ -15,21 +14,18 @@
     "@CalciferBundle/Resources/assets/js/jquery.datetimepicker.js"
     "@CalciferBundle/Resources/assets/js/repeating_events.js"
     "@CalciferBundle/Resources/assets/js/events.js"
-    "@CalciferBundle/Resources/assets/js/leaflet.js"
-    %}
+    "@CalciferBundle/Resources/assets/js/leaflet.js" %}
     <script src="{{ asset_url }}"></script>
     {% endjavascripts %}
 {% endblock %}
 
 {% block body -%}
-    <div class="ui one column page grid">
-        <div class="ui column">
-            <h1>Wiederholenden Termin bearbeiten</h1>
-        </div>
+    <div class="ui basic segment">
+        <h1 class="ui green block dividing header">Wiederholenden Termin bearbeiten</h1>
     </div>
 
-    <div class="ui one column page grid">
-        <div class="ui column">
+    <div class="ui basic segment">
+        <div class="ui segment">
             {{ include('CalciferBundle:RepeatingEvent:repeating_event_form.html.twig',{'entity':entity}) }}
         </div>
     </div>

src/Hackspace/Bundle/CalciferBundle/Resources/views/RepeatingEvent/index.html.twig

@@ -15,51 +15,47 @@
 {% endblock %}
 
 {% block body -%}
-    <div class="ui one column page grid title">
-        <div class="ui column">
-            <h1 class="ui header">
-                Wiederholende Termine
-            </h1>
-        </div>
+    <div class="ui basic segment">
+        <h1 class="ui green block dividing header">
+            Wiederholende Termine
+        </h1>
     </div>
 
-    <div class="ui one column page grid stackable">
-        <div class="column">
-            <table class="ui table">
-                <thead>
+    <div class="ui basic segment">
+        <table class="ui table">
+            <thead>
+            <tr>
+                <th>Zusammenfassung</th>
+                <th>Nächstes Datum</th>
+                <th>Wiederholungsmuster</th>
+                <th>Aktionen</th>
+            </tr>
+            </thead>
+            <tbody>
+            {% for entity in entities %}
                 <tr>
-                    <th>Zusammenfassung</th>
-                    <th>Nächstes Datum</th>
-                    <th>Wiederholungsmuster</th>
-                    <th>Aktionen</th>
+                    <td>
+                        {{ entity.summary }}
+                    </td>
+                    <td>
+                        {{ entity.nextdate.format('Y-m-d H:i') }}
+                    </td>
+                    <td>
+                        {{ entity.repeating_pattern }}
+                    </td>
+                    <td>
+                        <a href="{{ path('repeating_event_edit', {'slug':entity.slug}) }}">Bearbeiten</a> |
+                        <a href="{{ path('repeating_event_delete', {'slug':entity.slug}) }}">Löschen</a>
+                    </td>
                 </tr>
-                </thead>
-                <tbody>
-                {% for entity in entities %}
-                    <tr>
-                        <td>
-                            {{ entity.summary }}
-                        </td>
-                        <td>
-                            {{ entity.nextdate.format('Y-m-d H:i') }}
-                        </td>
-                        <td>
-                            {{ entity.repeating_pattern }}
-                        </td>
-                        <td>
-                            <a href="{{ path('repeating_event_edit', {'slug':entity.slug}) }}">Bearbeiten</a> |
-                            <a href="{{ path('repeating_event_delete', {'slug':entity.slug}) }}">Löschen</a>
-                        </td>
-                    </tr>
-                {% endfor %}
-                </tbody>
-                <tfoot>
-                    <tr>
-                        <td colspan="4"><a href="{{ path('repeating_event_new') }}">Neuen wiederholenden Termin anlegen</a></td>
-                    </tr>
-                </tfoot>
-            </table>
-        </div>
+            {% endfor %}
+            </tbody>
+            <tfoot>
+            <tr>
+                <td colspan="4"><a class="ui green button" href="{{ path('repeating_event_new') }}">Neuen wiederholenden Termin anlegen</a></td>
+            </tr>
+            </tfoot>
+        </table>
 
     </div>
 

src/Hackspace/Bundle/CalciferBundle/Resources/views/RepeatingEvent/new.html.twig

@@ -20,14 +20,12 @@
 {% endblock %}
 
 {% block body -%}
-    <div class="ui one column page grid">
-        <div class="ui column">
-            <h1>Wiederholenden Termin erstellen</h1>
-        </div>
+    <div class="ui basic segment">
+        <h1 class="ui green block dividing header">Wiederholenden Termin erstellen</h1>
     </div>
 
-    <div class="ui one column page grid">
-        <div class="ui column">
+    <div class="ui basic segment">
+        <div class="ui segment">
             {{ include('CalciferBundle:RepeatingEvent:repeating_event_form.html.twig') }}
         </div>
     </div>

src/Hackspace/Bundle/CalciferBundle/Resources/views/RepeatingEvent/repeating_event_form.html.twig

@@ -1,10 +1,9 @@
-<form method="post"
+<form class="ui form" method="post"
       action="{% if entity.id|default(0) > 0 %}{{ path('repeating_event_update',{'slug':entity.slug}) }}{% else %}{{ path('repeating_event_create') }}{% endif %}">
-    <div class="ui form segment">
-        <div class="field">
-            <label class="control-label required" for="event_startdate">Nächster Termin</label>
+        <div class="required field{% if(errors|default('0') != 0) %} {% if('nextdate' in errors|keys) %}error{% endif %}{% endif %}">
+            <label for="event_startdate">Nächster Termin</label>
 
-            <div class="ui left labeled icon input">
+            <div class="ui icon input">
                 <input type="datetime"
                        id="event_nextdate"
                        name="nextdate"
@@ -12,18 +11,21 @@
                        value="{{ entity.nextdate.format('Y-m-d H:i')|default('') }}"
                        placeholder="{{ "now"|date('d.m.Y H:00') }}"
                        class="form-control">
-
+                {% if(errors|default('0') != 0) %} {% if('nextdate' in errors|keys) %}
+                    <div class="ui red pointing above ui label">{{ errors.nextdate }}</div>
+                {% endif %}{% endif %}
                 <i class="icon calendar"></i>
 
-                <div class="ui corner label">
-                    <i class="icon asterisk"></i>
-                </div>
+            </div>
+
+            <div class="ui label">
+                Bitte gebe das Datum des nächsten Termin im Format <a href="http://de.wikipedia.org/wiki/ISO_8601">ISO 8601</a> an.
             </div>
         </div>
         <div class="field">
-            <label class="control-label required" for="event_duration">Dauer</label>
+            <label for="event_duration">Dauer</label>
 
-            <div class="ui left labeled input attached-label">
+            <div class="ui input">
                 <input type="text"
                        id="event_duration"
                        name="duration"
@@ -31,16 +33,16 @@
                        value="{{ entity.duration }}"
                        class="form-control">
 
-                <div class="ui bottom attached label">
-                    Hier gibst du bitte die Dauer der Veranstaltung in Minuten an.
-                </div>
+            </div>
+            <div class="ui label">
+                Hier gibst du bitte die Dauer der Veranstaltung in Minuten an.
             </div>
         </div>
 
-        <div class="field">
-            <label class="control-label required" for="event_duration">Terminwiederholungsmuster</label>
+        <div class="required field{% if(errors|default('0') != 0) %} {% if('repeating_pattern' in errors|keys) %}error{% endif %}{% endif %}">
+            <label for="event_duration">Terminwiederholungsmuster</label>
 
-            <div class="ui left labeled input attached-label">
+            <div class="ui input">
                 <input type="text"
                        id="repeating_pattern"
                        name="repeating_pattern"
@@ -48,22 +50,21 @@
                        required="required"
                        maxlength="255"
                        class="form-control">
+                {% if(errors|default('0') != 0) %} {% if('repeating_pattern' in errors|keys) %}
+                    <div class="ui red pointing above ui label">{{ errors.repeating_pattern }}</div>
+                {% endif %}{% endif %}
+            </div>
 
-                <div class="ui corner label">
-                    <i class="icon asterisk"></i>
-                </div>
-
-                <div class="ui bottom attached label">
-                    Gebe hier ein <a href="{{ path("repeating_patterns") }}">Wiederholungsmuster</a> an.
-                </div>
+            <div class="ui label">
+                Gebe hier ein <a href="{{ path("repeating_patterns") }}">Wiederholungsmuster</a> an.
             </div>
 
         </div>
 
-        <div class="field">
-            <label class="" for="event_summary">Zusammenfassung</label>
+        <div class="required field{% if(errors|default('0') != 0) %} {% if('summary' in errors|keys) %}error{% endif %}{% endif %}">
+            <label for="event_summary">Zusammenfassung</label>
 
-            <div class="ui left labeled input">
+            <div class="ui input">
                 <input type="text"
                        id="event_summary"
                        name="summary"
@@ -71,29 +72,27 @@
                        required="required"
                        maxlength="255"
                        class="form-control">
-
-                <div class="ui corner label">
-                    <i class="icon asterisk"></i>
-                </div>
+                {% if(errors|default('0') != 0) %} {% if('summary' in errors|keys) %}
+                    <div class="ui red pointing above ui label">{{ errors.summary }}</div>
+                {% endif %}{% endif %}
             </div>
         </div>
 
         <div class="field">
-            <label class="control-label required" for="event_summary">Beschreibung</label>
+            <label for="event_summary">Beschreibung</label>
 
-            <div class="ui left labeled icon input attached-label">
+            <div class="ui input">
                 <textarea name="description">{{ entity.description|default('') }}</textarea>
-
-                <div class="ui bottom attached label">Du kannst hier <a href="https://en.wikipedia.org/wiki/Markdown">Markdown</a>
-                    benutzen.
-                </div>
+            </div>
+            <div class="ui label">Du kannst hier <a href="https://en.wikipedia.org/wiki/Markdown">Markdown</a>
+                benutzen.
             </div>
         </div>
 
         <div class="field">
-            <label class="control-label required" for="event_url">URL</label>
+            <label for="event_url">URL</label>
 
-            <div class="ui left labeled icon input">
+            <div class="ui icon input">
                 <input type="text"
                        id="event_url"
                        name="url"
@@ -104,10 +103,10 @@
             </div>
         </div>
 
-        <div class="field">
+        <div class="required field">
             <label class="control-label required" for="event_location">Ort</label>
 
-            <div class="ui left labeled icon input attached-{% if entity.location.lat|default(0) > 0 %}geo-{% endif %}label">
+            <div class="ui icon input">
                 <input type="text"
                        id="event_location"
                        name="location"
@@ -117,27 +116,27 @@
                 <input type="hidden" name="location_lat" value="{{ entity.location.lat|default('') }}">
                 <input type="hidden" name="location_lon" value="{{ entity.location.lon|default('') }}">
                 <i class="icon map marker"></i>
+            </div>
 
-                <div class="ui bottom attached label">
-                    Du kannst zu diesem Ort auch Geokoordinaten <a href="#" class="add_geo">hinterlegen</a>.<br/>
-                    <span class="coords">{% if entity.location.lat|default(0) > 0 %}Folgende Koordinaten sind angegeben: lat:{{ entity.location.lat }}, lon:{{ entity.location.lon }}{% endif %}</span>
+            <div class="ui label">
+                Du kannst zu diesem Ort auch Geokoordinaten <a href="#" class="add_geo">hinterlegen</a> (JavaScript erforderlich).<br/>
+                <span class="coords">{% if entity.location.lat|default(0) > 0 %}Folgende Koordinaten sind angegeben: lat:{{ entity.location.lat }}, lon:{{ entity.location.lon }}{% endif %}</span>
+            </div>
+            <div class="ui modal geo chooser">
+                <i class="close icon"></i>
+
+                <div class="header">
+                    Wähle einen Punkt auf der Karte
                 </div>
-                <div class="ui modal geo chooser">
-                    <i class="close icon"></i>
-
-                    <div class="header">
-                        Wähle einen Punkt auf der Karte
+                <div class="content">
+                    <div id="map"></div>
+                </div>
+                <div class="actions">
+                    <div class="ui button cancel">
+                        Cancel
                     </div>
-                    <div class="content">
-                        <div id="map"></div>
-                    </div>
-                    <div class="actions">
-                        <div class="ui button cancel">
-                            Cancel
-                        </div>
-                        <div class="ui button ok">
-                            Okay
-                        </div>
+                    <div class="ui button ok">
+                        Okay
                     </div>
                 </div>
             </div>
@@ -146,21 +145,20 @@
         <div class="field">
             <label class="" for="event_tags">Tags</label>
 
-            <div class="ui left icon input attached-label">
+            <div class="ui icon input">
                 <input type="text"
                        id="event_tags"
                        name="tags"
                        value="{{ entity.getTagsAsText() }}"
                        class="form-control">
                 <i class="icon tag"></i>
+            </div>
 
-                <div class="ui bottom attached label">Du kannst hier kommasepariert <a
-                            href="https://en.wikipedia.org/wiki/Tag_%28metadata%29">Tags</a> angeben.
-                </div>
+            <div class="ui label">Du kannst hier kommasepariert <a
+                        href="https://en.wikipedia.org/wiki/Tag_%28metadata%29">Tags</a> angeben.
             </div>
         </div>
 
-        <input type="submit" class="ui button blue" value="Speichern"/>
-    </div>
+        <input type="submit" class="ui green button" value="Speichern"/>
 
 </form>

src/Hackspace/Bundle/CalciferBundle/Resources/views/RepeatingEvent/repeating_patterns.html.twig

@@ -15,22 +15,30 @@
 {% endblock %}
 
 {% block body -%}
-    <div class="ui one column page grid title">
-        <div class="ui column">
-            <h1 class="ui header">
-                Wiederholungsmuster
-            </h1>
-        </div>
+    <div class="ui basic segment">
+        <h1 class="ui green dividing header">
+            Wiederholungsmuster
+        </h1>
     </div>
 
-    <div class="ui one column page grid segment">
-        <div class="ui column">
+    <div class="ui basic segment">
+        <div class="ui segment">
             <p>Es gibt 2 verschiedene Wiederholungsmustertypen. Feste Termine oder Interval Termine.</p>
-            <p>Der erste definiert sich dadurch das der Termin immer an einem bestimmten Tag im Monat passieren soll. Das Hackspace-Plenum findet z.B. am <code>Zweiten Freitag des Monats</code> statt. Die Sicherheitssprechstunde findet immer am <code>Ersten Dienstag des Monats</code> statt. Anhand dieser Beispiele sollte eigentlich klar sein wie dieses Wiederholungsmuster funktioniert:</p>
-            <p>An erster stelle definiert man die Woche: Erster, Zweiter, Dritter, Letzter (In manchen Fällen kann Dritter und Letzter auch identisch sein).</p>
+
+            <p>Der erste definiert sich dadurch das der Termin immer an einem bestimmten Tag im Monat passieren soll.
+                Das Hackspace-Plenum findet z.B. am „<code>Zweiten Freitag des Monats</code>“ statt. Die
+                Sicherheitssprechstunde findet immer am „<code>Ersten Dienstag des Monats</code>“ statt. Anhand dieser
+                Beispiele sollte eigentlich klar sein wie dieses Wiederholungsmuster funktioniert:</p>
+
+            <p>An erster stelle definiert man die Woche: Erster, Zweiter, Dritter, Letzter (In manchen Fällen kann
+                Dritter und Letzter auch identisch sein).</p>
+
             <p>An zweiter stelle definiert man den Wochentag: Montag, Dienstag, Mitwoch usw.</p>
+
             <p>An letzter Stelle steht noch pro Forma „des Monats“</p>
-            <p>Der zweite Wiederholungstyp ist für regelmäßige Termine wie z.B. die Elektrorunde gedacht, die <code>Alle 7 Tage</code>. Für die Brettspielerei würde man <code>Alle 2 Wochen</code> schreiben.</p>
+
+            <p>Der zweite Wiederholungstyp ist für regelmäßige Termine wie z.B. die Elektrorunde gedacht, die „<code>Alle
+                    7 Tage</code>“. Für die Brettspielerei würde man „<code>Alle 2 Wochen</code>“ schreiben.</p>
         </div>
     </div>
 

src/Hackspace/Bundle/CalciferBundle/Resources/views/layout.html.twig

@@ -4,15 +4,13 @@
 
     <title>{% block title %}Terminverwaltung Calcifer{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- Bootstrap -->
     <link rel="shortcut icon" href="/favicon.png" />
-    <link href='//fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
+    <link href="/semantic/dist/semantic.css" rel="stylesheet">
     {% stylesheets filter="compass"
-        "@CalciferBundle/Resources/assets/css/main.scss"
-        "css/semantic.scss"
-        "css/custom.scss"
+    "@CalciferBundle/Resources/assets/css/main.scss"
+    "css/custom.scss"
     %}
-    <link rel="stylesheet" href="{{ asset_url }}" media="screen" />
+    <link rel="stylesheet" href="{{ asset_url }}"/>
     {% endstylesheets %}
     {% block css %}
 
@@ -23,28 +21,13 @@
 <body>
 {% include "CalciferBundle::navigation.html.twig" %}
 
-<div class="ui one column page grid">
-    <div class="column">
-        <div id="mission-statement" class="ui message green">
-            {% image '@CalciferBundle/Resources/assets/images/logo.png' %}
-            <img
-                    title="Eine Zeichnung von Calcifer. Gezeichnet von simply-Sylvan (http://simply-sylvan.deviantart.com/art/Calcifer-Purple-176746086)"
-                    alt="Eine Zeichnung von Calcifer. Gezeichnet von simply-Sylvan (http://simply-sylvan.deviantart.com/art/Calcifer-Purple-176746086)"
-                    src="{{ asset_url }}"
-                    class="ui image small floated left" />
-            {% endimage %}
-            <p>Calcifer ist ein Daemon aus dem Anime <a href="http://anidb.net/perl-bin/animedb.pl?show=anime&amp;aid=1218">„Das wandelnde Schloss“</a>, der sich darum kümmert das sich Howls Schloss weiter bewegt. Diese Terminverwaltung soll dafür sorgen das sich der <a href="https://www.krautspace.de/">Hackspace Jena</a> auch weiter bewegt und viele tolle Termine statfinden.</p>
-        </div>
-    </div>
-</div>
-
-<div id="main" class="segment">
+<div id="main">
     {% block body %}{% endblock %}
 </div>
 <!-- jQuery (necessary for Bootstraps JavaScript plugins) -->
 <script src="{{ asset('js/jquery.js') }}"></script>
 <!-- Include all JavaScripts, compiled by Assetic -->
-<script src="{{ asset('js/semantic.js') }}"></script>
+<script src="{{ asset('semantic/dist/semantic.min.js') }}"></script>
 {% block javascripts %}{% endblock %}
 </body>
 </html>

src/Hackspace/Bundle/CalciferBundle/Resources/views/navigation.html.twig

@@ -1,9 +1,8 @@
-<header class="ui fixed main menu inverted transparent ">
-    <div class="ui one column page grid">
-        <div class="ui column">
-            <div class="title item"><a href="{{ path('') }}">Calcifer</a></div>
-            <div class="item"><a href="{{ path('_new') }}">Neuer Termin</a> </div>
-            <div class="item"><a href="{{ path('repeating_event_show') }}">Wiederholende Termine</a></div>
-        </div>
+<header class="ui fixed green main menu">
+    <div class="ui basic segment">
+        <div class="title {% if app.request.pathinfo == path('') %}active {% endif %}item"><a href="{{ path('') }}">Start</a></div>
+        <div class="{% if app.request.pathinfo == path('_new') %}active {% endif %}item"><a href="{{ path('_new') }}">Neuer Termin</a></div>
+        <div class="{% if app.request.pathinfo == path('repeating_event_show') %}active {% endif %}item"><a href="{{ path('repeating_event_show') }}">Wiederholende Termine</a></div>
+        <div class="{% if app.request.pathinfo == path('about_calcifer') %}active {% endif %}item"><a href="{{ path('about_calcifer') }}">Über Calcifer</a></div>
     </div>
 </header>

src/Hackspace/Bundle/CalciferBundle/libs/CalciferCaldavBackend.php

@@ -0,0 +1,312 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: tim
+ * Date: 15.11.14
+ * Time: 17:13
+ */
+
+namespace Hackspace\Bundle\CalciferBundle\libs;
+
+use Jsvrcek\ICS\Model\Calendar;
+use Jsvrcek\ICS\CalendarExport;
+use Jsvrcek\ICS\CalendarStream;
+use Jsvrcek\ICS\Model\CalendarEvent;
+use Jsvrcek\ICS\Utility\Formatter;
+use Sabre\CalDAV\Backend\AbstractBackend;
+use Symfony\Bundle\FrameworkBundle\Controller\Controller;
+use Doctrine\ORM\EntityManager;
+use Doctrine\ORM\EntityRepository;
+use Doctrine\ORM\QueryBuilder;
+use Hackspace\Bundle\CalciferBundle\Entity\Event;
+
+class CalciferCaldavBackend extends AbstractBackend
+{
+    /** @var Controller */
+    private $controller = null;
+
+    function __construct(Controller $controller)
+    {
+        $this->controller = $controller;
+    }
+
+    /**
+     * Returns a list of calendars for a principal.
+     *
+     * Every project is an array with the following keys:
+     *  * id, a unique id that will be used by other functions to modify the
+     *    calendar. This can be the same as the uri or a database key.
+     *  * uri, which the basename of the uri with which the calendar is
+     *    accessed.
+     *  * principaluri. The owner of the calendar. Almost always the same as
+     *    principalUri passed to this method.
+     *
+     * Furthermore it can contain webdav properties in clark notation. A very
+     * common one is '{DAV:}displayname'.
+     *
+     * Many clients also require:
+     * {urn:ietf:params:xml:ns:caldav}supported-calendar-component-set
+     * For this property, you can just return an instance of
+     * Sabre\CalDAV\Property\SupportedCalendarComponentSet.
+     *
+     * @param string $principalUri
+     * @return array
+     */
+    public function getCalendarsForUser($principalUri)
+    {
+        return [[
+            'id' => 1,
+            'uri' => 'calendar',
+            'principaluri' => '/caldav/calcifer',
+        ]];
+    }
+
+    /**
+     * Creates a new calendar for a principal.
+     *
+     * If the creation was a success, an id must be returned that can be used to reference
+     * this calendar in other methods, such as updateCalendar.
+     *
+     * @param string $principalUri
+     * @param string $calendarUri
+     * @param array $properties
+     * @return void
+     */
+    public function createCalendar($principalUri, $calendarUri, array $properties)
+    {
+        throw new \Exception('Not implemented');
+    }
+
+    /**
+     * Delete a calendar and all it's objects
+     *
+     * @param mixed $calendarId
+     * @return void
+     */
+    public function deleteCalendar($calendarId)
+    {
+        throw new \Exception('Not implemented');
+    }
+
+    private function FormatCalendarEvent(CalendarEvent $event)
+    {
+        $stream = new CalendarStream();
+        $formatter = new Formatter();
+        $stream->addItem('BEGIN:VEVENT')
+            ->addItem('UID:' . $event->getUid())
+            ->addItem('DTSTART:' . $formatter->getFormattedUTCDateTime($event->getStart()))
+            ->addItem('DTEND:' . $formatter->getFormattedUTCDateTime($event->getEnd()))
+            ->addItem('SUMMARY:' . $event->getSummary())
+            ->addItem('DESCRIPTION:' . $event->getDescription());
+
+        if ($event->getClass())
+            $stream->addItem('CLASS:' . $event->getClass());
+
+        /* @var $location Location */
+        foreach ($event->getLocations() as $location) {
+            $stream
+                ->addItem('LOCATION' . $location->getUri() . $location->getLanguage() . ':' . $location->getName());
+        }
+
+        if ($event->getGeo())
+            $stream->addItem('GEO:' . $event->getGeo()->getLatitude() . ';' . $event->getGeo()->getLongitude());
+
+        if ($event->getUrl())
+            $stream->addItem('URL:' . $event->getUrl());
+
+        if ($event->getCreated())
+            $stream->addItem('CREATED:' . $formatter->getFormattedUTCDateTime($event->getCreated()));
+
+        if ($event->getLastModified())
+            $stream->addItem('LAST-MODIFIED:' . $formatter->getFormattedUTCDateTime($event->getLastModified()));
+
+        foreach ($event->getAttendees() as $attendee) {
+            $stream->addItem($attendee->__toString());
+        }
+
+        if ($event->getOrganizer())
+            $stream->addItem($event->getOrganizer()->__toString());
+
+        $stream->addItem('END:VEVENT');
+
+        return $stream->getStream();
+    }
+
+    private function formatEvent(Event $event)
+    {
+        /** @var CalendarEvent $calendar_event */
+        $calendar_event = $event->ConvertToCalendarEvent();
+        $calendar = new Calendar();
+        $calendar->setProdId('-//My Company//Cool Calendar App//EN');
+	$calendar->addEvent($calendar_event);
+        $calendarExport = new CalendarExport(new CalendarStream, new Formatter());
+        $calendarExport->addCalendar($calendar);
+
+            //output .ics formatted text
+        $calendar_data = $calendarExport->getStream();
+
+
+        $event_data = [
+            'id' => $event->id,
+            'uri' => $event->slug . '.ics',
+            'lastmodified' => $event->startdate,
+            'etag' => '"' . sha1($calendar_data) . '"',
+            'calendarid' => 1,
+            'calendardata' => $calendar_data,
+            'size' => strlen($calendar_data),
+            'component' => 'VEVENT',
+        ];
+        return $event_data;
+    }
+
+    /**
+     * Returns all calendar objects within a calendar.
+     *
+     * Every item contains an array with the following keys:
+     *   * id - unique identifier which will be used for subsequent updates
+     *   * calendardata - The iCalendar-compatible calendar data
+     *   * uri - a unique key which will be used to construct the uri. This can
+     *     be any arbitrary string, but making sure it ends with '.ics' is a
+     *     good idea. This is only the basename, or filename, not the full
+     *     path.
+     *   * lastmodified - a timestamp of the last modification time
+     *   * etag - An arbitrary string, surrounded by double-quotes. (e.g.:
+     *   '"abcdef"')
+     *   * calendarid - The calendarid as it was passed to this function.
+     *   * size - The size of the calendar objects, in bytes.
+     *   * component - optional, a string containing the type of object, such
+     *     as 'vevent' or 'vtodo'. If specified, this will be used to populate
+     *     the Content-Type header.
+     *
+     * Note that the etag is optional, but it's highly encouraged to return for
+     * speed reasons.
+     *
+     * The calendardata is also optional. If it's not returned
+     * 'getCalendarObject' will be called later, which *is* expected to return
+     * calendardata.
+     *
+     * If neither etag or size are specified, the calendardata will be
+     * used/fetched to determine these numbers. If both are specified the
+     * amount of times this is needed is reduced by a great degree.
+     *
+     * @param mixed $calendarId
+     * @return array
+     */
+    public function getCalendarObjects($calendarId)
+    {
+        /** @var EntityManager $em */
+        $em = $this->controller->getDoctrine()->getManager();
+
+        $now = new \DateTime();
+        $now->setTime(0, 0, 0);
+        /** @var QueryBuilder $qb */
+        $qb = $em->createQueryBuilder();
+        $qb->select(array('e'))
+            ->from('CalciferBundle:Event', 'e')
+            ->orderBy('e.startdate');
+        $entities = $qb->getQuery()->execute();
+
+        if (count($entities) > 0) {
+            $events = [];
+            foreach ($entities as $event) {
+                /** @var Event $event */
+                $events[] = $this->formatEvent($event);
+            }
+            return $events;
+        }
+    }
+
+    /**
+     * Returns information from a single calendar object, based on it's object
+     * uri.
+     *
+     * The object uri is only the basename, or filename and not a full path.
+     *
+     * The returned array must have the same keys as getCalendarObjects. The
+     * 'calendardata' object is required here though, while it's not required
+     * for getCalendarObjects.
+     *
+     * This method must return null if the object did not exist.
+     *
+     * @param mixed $calendarId
+     * @param string $objectUri
+     * @return array|null
+     */
+    public function getCalendarObject($calendarId, $objectUri)
+    {
+        /** @var EntityManager $em */
+        $em = $this->controller->getDoctrine()->getManager();
+
+        /** @var EntityRepository $repo */
+        $repo = $em->getRepository('CalciferBundle:Event');
+
+        /** @var Event $entity */
+        $event = $repo->findOneBy(['slug' => substr($objectUri,0,strlen($objectUri) - 4)]);
+
+        if (!($event instanceof Event)) {
+            throw $this->controller->createNotFoundException('Unable to find Event entity.');
+        }
+
+        return $this->formatEvent($event);
+    }
+
+    /**
+     * Creates a new calendar object.
+     *
+     * The object uri is only the basename, or filename and not a full path.
+     *
+     * It is possible return an etag from this function, which will be used in
+     * the response to this PUT request. Note that the ETag must be surrounded
+     * by double-quotes.
+     *
+     * However, you should only really return this ETag if you don't mangle the
+     * calendar-data. If the result of a subsequent GET to this object is not
+     * the exact same as this request body, you should omit the ETag.
+     *
+     * @param mixed $calendarId
+     * @param string $objectUri
+     * @param string $calendarData
+     * @return string|null
+     */
+    public function createCalendarObject($calendarId, $objectUri, $calendarData)
+    {
+        // TODO: Implement createCalendarObject() method.
+    }
+
+    /**
+     * Updates an existing calendarobject, based on it's uri.
+     *
+     * The object uri is only the basename, or filename and not a full path.
+     *
+     * It is possible return an etag from this function, which will be used in
+     * the response to this PUT request. Note that the ETag must be surrounded
+     * by double-quotes.
+     *
+     * However, you should only really return this ETag if you don't mangle the
+     * calendar-data. If the result of a subsequent GET to this object is not
+     * the exact same as this request body, you should omit the ETag.
+     *
+     * @param mixed $calendarId
+     * @param string $objectUri
+     * @param string $calendarData
+     * @return string|null
+     */
+    public function updateCalendarObject($calendarId, $objectUri, $calendarData)
+    {
+        throw new \Exception('Not implemented');
+    }
+
+    /**
+     * Deletes an existing calendar object.
+     *
+     * The object uri is only the basename, or filename and not a full path.
+     *
+     * @param mixed $calendarId
+     * @param string $objectUri
+     * @return void
+     */
+    public function deleteCalendarObject($calendarId, $objectUri)
+    {
+        throw new \Exception('Not implemented');
+    }
+}

src/Hackspace/Bundle/CalciferBundle/libs/CalciferPrincipalBackend.php

@@ -0,0 +1,158 @@
+<?php
+/**
+ * Created by PhpStorm.
+ * User: tim
+ * Date: 15.11.14
+ * Time: 19:45
+ */
+
+namespace Hackspace\Bundle\CalciferBundle\libs;
+
+use
+    Sabre\DAV,
+    Sabre\DAVACL,
+    Sabre\HTTP\URLUtil;
+
+class CalciferPrincipalBackend extends DAVACL\PrincipalBackend\AbstractBackend
+{
+
+    /**
+     * Returns a list of principals based on a prefix.
+     *
+     * This prefix will often contain something like 'principals'. You are only
+     * expected to return principals that are in this base path.
+     *
+     * You are expected to return at least a 'uri' for every user, you can
+     * return any additional properties if you wish so. Common properties are:
+     *   {DAV:}displayname
+     *   {http://sabredav.org/ns}email-address - This is a custom SabreDAV
+     *     field that's actually injected in a number of other properties. If
+     *     you have an email address, use this property.
+     *
+     * @param string $prefixPath
+     * @return array
+     */
+    function getPrincipalsByPrefix($prefixPath)
+    {
+        return [
+            [
+                '{DAV:}displayname' => 'calcifer',
+                '{http://sabredav.org/ns}email-address' => 'calcifer@example.com',
+                'uri' => '/caldav/calcifer',
+            ]
+        ];
+    }
+
+    /**
+     * Returns a specific principal, specified by it's path.
+     * The returned structure should be the exact same as from
+     * getPrincipalsByPrefix.
+     *
+     * @param string $path
+     * @return array
+     */
+    function getPrincipalByPath($path)
+    {
+        return [
+            '{DAV:}displayname' => 'calcifer',
+            '{http://sabredav.org/ns}email-address' => 'calcifer@example.com',
+            'uri' => '/caldav/calcifer',
+        ];
+    }
+
+    /**
+     * Updates one ore more webdav properties on a principal.
+     *
+     * The list of mutations is stored in a Sabre\DAV\PropPatch object.
+     * To do the actual updates, you must tell this object which properties
+     * you're going to process with the handle() method.
+     *
+     * Calling the handle method is like telling the PropPatch object "I
+     * promise I can handle updating this property".
+     *
+     * Read the PropPatch documenation for more info and examples.
+     *
+     * @param string $path
+     * @param \Sabre\DAV\PropPatch $propPatch
+     * @return void
+     */
+    function updatePrincipal($path, \Sabre\DAV\PropPatch $propPatch)
+    {
+        throw new \Exception('Not implemented');
+    }
+
+    /**
+     * This method is used to search for principals matching a set of
+     * properties.
+     *
+     * This search is specifically used by RFC3744's principal-property-search
+     * REPORT. You should at least allow searching on
+     * http://sabredav.org/ns}email-address.
+     *
+     * The actual search should be a unicode-non-case-sensitive search. The
+     * keys in searchProperties are the WebDAV property names, while the values
+     * are the property values to search on.
+     *
+     * If multiple properties are being searched on, the search should be
+     * AND'ed.
+     *
+     * This method should simply return an array with full principal uri's.
+     *
+     * If somebody attempted to search on a property the backend does not
+     * support, you should simply return 0 results.
+     *
+     * You can also just return 0 results if you choose to not support
+     * searching at all, but keep in mind that this may stop certain features
+     * from working.
+     *
+     * @param string $prefixPath
+     * @param array $searchProperties
+     * @return array
+     */
+    function searchPrincipals($prefixPath, array $searchProperties, $test = 'allof')
+    {
+        return [
+            [
+                '{DAV:}displayname' => 'calcifer',
+                '{http://sabredav.org/ns}email-address' => 'calcifer@example.com',
+                'uri' => '/caldav/calcifer',
+            ]
+        ];
+    }
+
+    /**
+     * Returns the list of members for a group-principal
+     *
+     * @param string $principal
+     * @return array
+     */
+    function getGroupMemberSet($principal)
+    {
+        throw new \Exception('Not implemented');
+    }
+
+    /**
+     * Returns the list of groups a principal is a member of
+     *
+     * @param string $principal
+     * @return array
+     */
+    function getGroupMembership($principal)
+    {
+        throw new \Exception('Not implemented');
+    }
+
+    /**
+     * Updates the list of group members for a group principal.
+     *
+     * The principals should be passed as a list of uri's.
+     *
+     * @param string $principal
+     * @param array $members
+     * @return void
+     */
+    function setGroupMemberSet($principal, array $members)
+    {
+        throw new \Exception('Not implemented');
+    }
+}

web/semantic/.csscomb.json

@@ -0,0 +1,322 @@
+{
+    "remove-empty-rulesets": true,
+    "always-semicolon": true,
+    "color-case": "upper",
+    "block-indent": "  ",
+    "color-shorthand": false,
+    "element-case": "lower",
+    "leading-zero": true,
+    "space-after-colon": " ",
+    "space-before-combinator": " ",
+    "space-after-combinator": " ",
+    "space-between-declarations": "\n",
+    "space-before-opening-brace": " ",
+    "space-after-opening-brace": "\n",
+    "space-after-selector-delimiter": "\n",
+    "space-before-selector-delimiter": "",
+    "space-before-closing-brace": "\n",
+    "strip-spaces": true,
+    "tab-size": true,
+    "vendor-prefix-align": true,
+    "sort-order": [
+        [
+            "display",
+            "visibility",
+            "float",
+            "clear",
+            "overflow",
+            "overflow-x",
+            "overflow-y",
+            "-webkit-box-sizing",
+            "-moz-box-sizing",
+            "box-sizing",
+            "-ms-overflow-x",
+            "-ms-overflow-y",
+            "clip",
+            "zoom",
+            "flex-direction",
+            "flex-order",
+            "flex-pack",
+            "flex-align"
+        ],
+        [
+            "position",
+            "z-index",
+            "top",
+            "right",
+            "bottom",
+            "left"
+        ],
+        [
+            "font",
+            "font-family",
+            "font-size",
+            "font-weight",
+            "font-style",
+            "font-variant",
+            "font-size-adjust",
+            "font-stretch",
+            "font-effect",
+            "font-emphasize",
+            "font-emphasize-position",
+            "font-emphasize-style",
+            "font-smooth",
+            "line-height"
+        ],
+        [
+            "width",
+            "min-width",
+            "max-width",
+            "height",
+            "min-height",
+            "max-height",
+            "margin",
+            "margin-top",
+            "margin-right",
+            "margin-bottom",
+            "margin-left",
+            "padding",
+            "padding-top",
+            "padding-right",
+            "padding-bottom",
+            "padding-left"
+        ],
+        [
+            "table-layout",
+            "empty-cells",
+            "caption-side",
+            "border-spacing",
+            "border-collapse",
+            "list-style",
+            "list-style-position",
+            "list-style-type",
+            "list-style-image"
+        ],
+        [
+            "opacity",
+            "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
+            "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
+            "-ms-interpolation-mode",
+            "color",
+            "border",
+            "border-width",
+            "border-style",
+            "border-color",
+            "border-top",
+            "border-top-width",
+            "border-top-style",
+            "border-top-color",
+            "border-right",
+            "border-right-width",
+            "border-right-style",
+            "border-right-color",
+            "border-bottom",
+            "border-bottom-width",
+            "border-bottom-style",
+            "border-bottom-color",
+            "border-left",
+            "border-left-width",
+            "border-left-style",
+            "border-left-color",
+            "-webkit-border-radius",
+            "-moz-border-radius",
+            "border-radius",
+            "-webkit-border-top-left-radius",
+            "-moz-border-radius-topleft",
+            "border-top-left-radius",
+            "-webkit-border-top-right-radius",
+            "-moz-border-radius-topright",
+            "border-top-right-radius",
+            "-webkit-border-bottom-right-radius",
+            "-moz-border-radius-bottomright",
+            "border-bottom-right-radius",
+            "-webkit-border-bottom-left-radius",
+            "-moz-border-radius-bottomleft",
+            "border-bottom-left-radius",
+            "-webkit-border-image",
+            "-moz-border-image",
+            "-o-border-image",
+            "border-image",
+            "-webkit-border-image-source",
+            "-moz-border-image-source",
+            "-o-border-image-source",
+            "border-image-source",
+            "-webkit-border-image-slice",
+            "-moz-border-image-slice",
+            "-o-border-image-slice",
+            "border-image-slice",
+            "-webkit-border-image-width",
+            "-moz-border-image-width",
+            "-o-border-image-width",
+            "border-image-width",
+            "-webkit-border-image-outset",
+            "-moz-border-image-outset",
+            "-o-border-image-outset",
+            "border-image-outset",
+            "-webkit-border-image-repeat",
+            "-moz-border-image-repeat",
+            "-o-border-image-repeat",
+            "border-image-repeat",
+            "outline",
+            "outline-width",
+            "outline-style",
+            "outline-color",
+            "outline-offset",
+            "background",
+            "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
+            "background-color",
+            "background-image",
+            "background-repeat",
+            "background-attachment",
+            "background-position",
+            "background-position-x",
+            "-ms-background-position-x",
+            "background-position-y",
+            "-ms-background-position-y",
+            "-webkit-background-clip",
+            "-moz-background-clip",
+            "background-clip",
+            "background-origin",
+            "-webkit-background-size",
+            "-moz-background-size",
+            "-o-background-size",
+            "background-size",
+            "box-decoration-break",
+            "-webkit-box-shadow",
+            "-moz-box-shadow",
+            "box-shadow",
+            "filter:progid:DXImageTransform.Microsoft.gradient",
+            "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
+            "text-shadow"
+        ],
+
+        [
+            "content",
+            "quotes",
+            "counter-reset",
+            "counter-increment",
+            "resize",
+            "cursor",
+            "-webkit-user-select",
+            "-moz-user-select",
+            "-ms-user-select",
+            "user-select",
+            "nav-index",
+            "nav-up",
+            "nav-right",
+            "nav-down",
+            "nav-left",
+            "-webkit-transition",
+            "-moz-transition",
+            "-ms-transition",
+            "-o-transition",
+            "transition",
+            "-webkit-transition-delay",
+            "-moz-transition-delay",
+            "-ms-transition-delay",
+            "-o-transition-delay",
+            "transition-delay",
+            "-webkit-transition-timing-function",
+            "-moz-transition-timing-function",
+            "-ms-transition-timing-function",
+            "-o-transition-timing-function",
+            "transition-timing-function",
+            "-webkit-transition-duration",
+            "-moz-transition-duration",
+            "-ms-transition-duration",
+            "-o-transition-duration",
+            "transition-duration",
+            "-webkit-transition-property",
+            "-moz-transition-property",
+            "-ms-transition-property",
+            "-o-transition-property",
+            "transition-property",
+            "-webkit-transform",
+            "-moz-transform",
+            "-ms-transform",
+            "-o-transform",
+            "transform",
+            "-webkit-transform-origin",
+            "-moz-transform-origin",
+            "-ms-transform-origin",
+            "-o-transform-origin",
+            "transform-origin",
+            "-webkit-animation",
+            "-moz-animation",
+            "-ms-animation",
+            "-o-animation",
+            "animation",
+            "-webkit-animation-name",
+            "-moz-animation-name",
+            "-ms-animation-name",
+            "-o-animation-name",
+            "animation-name",
+            "-webkit-animation-duration",
+            "-moz-animation-duration",
+            "-ms-animation-duration",
+            "-o-animation-duration",
+            "animation-duration",
+            "-webkit-animation-play-state",
+            "-moz-animation-play-state",
+            "-ms-animation-play-state",
+            "-o-animation-play-state",
+            "animation-play-state",
+            "-webkit-animation-timing-function",
+            "-moz-animation-timing-function",
+            "-ms-animation-timing-function",
+            "-o-animation-timing-function",
+            "animation-timing-function",
+            "-webkit-animation-delay",
+            "-moz-animation-delay",
+            "-ms-animation-delay",
+            "-o-animation-delay",
+            "animation-delay",
+            "-webkit-animation-iteration-count",
+            "-moz-animation-iteration-count",
+            "-ms-animation-iteration-count",
+            "-o-animation-iteration-count",
+            "animation-iteration-count",
+            "-webkit-animation-direction",
+            "-moz-animation-direction",
+            "-ms-animation-direction",
+            "-o-animation-direction",
+            "animation-direction",
+            "text-align",
+            "-webkit-text-align-last",
+            "-moz-text-align-last",
+            "-ms-text-align-last",
+            "text-align-last",
+            "vertical-align",
+            "white-space",
+            "text-decoration",
+            "text-emphasis",
+            "text-emphasis-color",
+            "text-emphasis-style",
+            "text-emphasis-position",
+            "text-indent",
+            "-ms-text-justify",
+            "text-justify",
+            "letter-spacing",
+            "word-spacing",
+            "-ms-writing-mode",
+            "text-outline",
+            "text-transform",
+            "text-wrap",
+            "text-overflow",
+            "-ms-text-overflow",
+            "text-overflow-ellipsis",
+            "text-overflow-mode",
+            "-ms-word-wrap",
+            "word-wrap",
+            "word-break",
+            "-ms-word-break",
+            "-moz-tab-size",
+            "-o-tab-size",
+            "tab-size",
+            "-webkit-hyphens",
+            "-moz-hyphens",
+            "hyphens",
+            "pointer-events"
+        ]
+    ]
+}

web/semantic/.csslintrc

@@ -0,0 +1,18 @@
+{
+    "vendor-prefix"               : true,
+    "duplicate-properties"        : true,
+    "display-property-grouping"   : true,
+    "empty-rules"                 : true,
+
+    "adjoining-classes"           : false,
+    "box-model"                   : false,
+    "compatible-vendor-prefixes"  : false,
+    "box-sizing"                  : false,
+    "duplicate-background-images" : false,
+    "floats"                      : false,
+    "important"                   : false,
+    "overqualified-elements"      : false,
+    "rules-count"                 : false,
+    "shorthand"                   : false,
+    "zero-units"                  : false
+}

web/semantic/.gitignore

@@ -0,0 +1,36 @@
+node_modules/
+test/coverage/
+coverage/
+src/**/site/
+theme.config
+semantic.json
+tasks/**/oauth.js
+
+# Numerous always-ignore extensions
+*.diff
+*.err
+*.orig
+*.log
+*.rej
+*.swo
+*.swp
+*.zip
+*.vi
+*~
+*.sass-cache
+*.ruby-version
+
+# OS or Editor folders
+.DS_Store
+._*
+Thumbs.db
+.cache
+.project
+.settings
+.tmproj
+.docpad.db
+*.esproj
+nbproject
+*.sublime-project
+*.sublime-workspace
+.build*

web/semantic/.jshintrc

@@ -0,0 +1,38 @@
+{
+
+  "globals":  {
+    "$"                     : true,
+    "afterEach"             : true,
+    "AnimatedPNG"           : true,
+    "beforeEach"            : true,
+    "console"               : true,
+    "describe"              : true,
+    "expect"                : true,
+    "it"                    : true,
+    "jQuery"                : true,
+    "loadFixtures"          : true,
+    "module"                : true,
+    "requestAnimationFrame" : true,
+    "require"               : true,
+    "semantic"              : true
+  },
+
+  "debug"    : false,
+  "devel"    : true,
+
+  "browser"  : true,
+  "curly"    : true,
+  "immed"    : true,
+  "latedef"  : true,
+  "loopfunc" : true,
+  "noarg"    : true,
+  "undef"    : true,
+  "sub"      : true,
+  "loopfunc" : true,
+
+  "laxbreak" : true,
+  "evil"     : true,
+  "indent"   : false,
+  "trailing" : false
+
+}

web/semantic/CONTRIBUTING.md

@@ -0,0 +1,16 @@
+# Contributing
+
+### Bugs & Issues
+
+Please submit any bugs you encounter when using the library to our [Github Issues Tracker](https://github.com/Semantic-Org/Semantic-UI/issues).
+
+When submiting a bug report, please include a set of steps to reproduce the issue and any related information, browser, OS etc. If we can't see the issue then it will make solving things much more difficult.
+
+Please create a fork of this [jsfiddle](http://jsfiddle.net/efp8z6Ln/) to demonstrate bugs.
+
+### Pull Requests
+
+Anyone can jump on the issues board and grab off bugs to fix. This is probably the best way to become a contributor to Semantic. Be sure to adhere to the style guides when submitting code.
+
+* [Create a Pull Request](https://github.com/Semantic-Org/Semantic-UI/compare)
+* [View Open Issues](https://github.com/Semantic-Org/Semantic-UI/issues)

web/semantic/LICENSE.md

@@ -0,0 +1,7 @@
+# The MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

web/semantic/README.md

@@ -0,0 +1,85 @@
+![Semantic](http://www.semantic-ui.com/images/logo.png)
+
+# Semantic UI
+
+[![Join the chat at https://gitter.im/Semantic-Org/Semantic-UI](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/Semantic-Org/Semantic-UI?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
+Semantic is a UI framework designed for theming.
+
+Key Features
+* 50+ UI elements
+* 3000 + CSS variables
+* 3 Levels of variable inheritance (similar to SublimeText)
+* Built with EM values for responsive design
+* Flexbox friendly
+
+## Install
+
+#### Recommended Install
+```bash
+npm install semantic-ui  # Use themes, import build/watch tasks into your own gulpfile.
+```
+
+![Getting Started](https://dl.dropboxusercontent.com/u/2657007/install.gif)
+
+For details on how work with Semantic theming please [read our customization guide](http://learnsemantic.com/developing/customizing.html) on [LearnSemantic.com](http://learnsemantic.com/)
+
+#### Additional Versions
+
+Environment | Install Script | Repo 
+--- | --- | --- | 
+CSS Only | `npm install semantic-ui-css` | [CSS Repo](https://github.com/Semantic-Org/Semantic-UI-CSS)
+[LESS](https://github.com/less/less.js/) Only | `npm install semantic-ui-less` | [LESS Repo](https://github.com/Semantic-Org/Semantic-UI-LESS)
+[EmberJS](http://emberjs.com/) | `ember install:addon semantic-ui-ember` | [Ember Repo](https://github.com/Semantic-Org/Semantic-UI-Ember)
+|[Meteor](https://www.meteor.com/) - [LESS](https://github.com/less/less.js/) | `meteor add semantic:ui` | [LESS Repo](https://github.com/Semantic-Org/Semantic-UI-LESS) |
+|[Meteor](https://www.meteor.com/) - CSS | `meteor add semantic:ui-css` | [CSS Repo](https://github.com/Semantic-Org/Semantic-UI-CSS) |
+[Bower](http://bower.io/) | `bower install semantic-ui` | 
+
+Check out our [integration wiki](https://github.com/Semantic-Org/Semantic-UI/wiki/Integration) for more options.
+
+#### Browser Support
+
+* Last 2 Versions FF, Chrome, IE 10+
+* Safari 6
+* IE 9+ (Browser prefix only)
+* Android 4
+* Blackberry 10
+
+Browser prefixes are present for Internet Explorer 9, but the browser is not officially supported.
+
+## Community
+
+#### International
+
+* **Chinese** A Chinese mirror site is available at [http://www.semantic-ui.cn](http:/www.semantic-ui.cn)
+* **Right-to-Left (RTL)** An RTL version can be created using our build tools by selecting `rtl` from the install script
+* **Translation** To help translate see the [Wiki Guide](https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs) for translations
+
+#### Resources
+
+Resource | Description
+--- | --- |
+Bugs & Feature Requests |  Make a test case by forking this [jsfiddle](http://jsfiddle.net/efp8z6Ln/), then submit a [bug on GitHub](https://github.com/Semantic-Org/Semantic-UI/issues)
+Live Chat | Join our [Gitter.im Room](https://gitter.im/Semantic-Org/Semantic-UI)
+Newsletter Updates | Sign up for updates at [semantic-ui.com](http:/www.semantic-ui.com)
+Additional Resources  | Submit a question on [StackOverflow](http://www.stackoverflow.com) or ask our [Google Group](https://groups.google.com/forum/#!forum/semantic-ui)
+
+#### Places to Help
+
+Project | How To Help | Next Step 
+--- | --- | --- | 
+Localization | Help us translate Semantic UI into your language | [Join our Translation Community](https://github.com/Semantic-Org/Semantic-UI/wiki/Translating-Semantic-UI-Docs)
+[SCSS](http://sass-lang.com/) | SASS needs PR to support variables inside `@import` | [Add Pull Request](https://github.com/sass/sass/pulls) for [#739](https://github.com/sass/sass/issues/739#issuecomment-73984809)
+[Angular](https://angularjs.org/) | Help develop angular bindings | Reach Out on [GitHub Issues](https://github.com/Semantic-Org/Semantic-UI-Angular/issues/8)
+Guides & Tutorials | Help write guides and tutorials | [Join the discussion](https://github.com/Semantic-Org/Semantic-UI/issues/1571)
+
+#### Pull Requests
+
+When adding pull requests be sure to merge into [next](https://github.com/Semantic-Org/Semantic-UI/tree/next) branch. If you need to demonstrate a fix in ``next`` release, you can use [this jsfiddle](http://jsfiddle.net/rduvhn8u/1/)
+
+#### Reaching Out
+
+If you'd like to start a conversation about Semantic feel free to e-mail me at [jack@semantic-ui.com](mailto:jack@semantic-ui.com)
+
+[![Flattr This](https://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=jlukic&url=https%3A%2F%2Fgithub.com%2Fjlukic%2FSemantic-UI)
+

web/semantic/bower.json

@@ -0,0 +1,29 @@
+{
+  "name"        : "semantic",
+  "description" : "Semantic empowers designers and developers by creating a shared vocabulary for UI.",
+  "homepage"    : "http://www.semantic-ui.com",
+  "author": {
+    "name" : "Jack Lukic",
+    "web"  : "http://www.jacklukic.com"
+  },
+  "dependencies": {
+    "jquery"      : ">=1.8"
+  },
+  "main": [
+    "dist/semantic.css",
+    "dist/semantic.js"
+  ],
+  "keywords": [
+    "semantic",
+    "ui",
+    "css3",
+    "framework"
+  ],
+  "license" : [
+    "http://semantic-ui.mit-license.org/"
+  ],
+  "ignore": [
+    "src/site",
+    "test"
+  ]
+}

web/semantic/composer.json

@@ -0,0 +1,24 @@
+{
+  "name"        : "semantic/ui",
+  "description" : "Semantic empowers designers and developers by creating a shared vocabulary for UI.",
+  "homepage"    : "http://www.semantic-ui.com",
+  "authors"     : [
+    {
+      "name"     : "Jack Lukic",
+      "email"    : "jacklukic@gmail.com",
+      "homepage" : "http://www.jacklukic.com",
+      "role"     : "Creator"
+    }
+  ],
+  "support": {
+    "issues": "https://github.com/Semantic-Org/Semantic-UI/issues",
+    "source": "https://github.com/Semantic-Org/Semantic-UI"
+  },
+  "keywords" : [
+    "semantic",
+    "ui",
+    "css",
+    "framework"
+  ],
+  "license" : "MIT"
+}

web/semantic/dist/components/accordion.css

@@ -0,0 +1,256 @@
+/*!
+ * # Semantic UI 1.11.4 - Accordion
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Accordion
+*******************************/
+
+.ui.accordion,
+.ui.accordion .accordion {
+  max-width: 100%;
+  font-size: 1em;
+}
+.ui.accordion .accordion {
+  margin: 1em 0em 0em;
+  padding: 0em;
+}
+
+/* Title */
+.ui.accordion .title,
+.ui.accordion .accordion .title {
+  cursor: pointer;
+}
+
+/* Default Styling */
+.ui.accordion .title:not(.ui) {
+  padding: 0.5em 0em;
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-size: 1em;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/* Content */
+.ui.accordion .title ~ .content,
+.ui.accordion .accordion .title ~ .content {
+  display: none;
+}
+
+/* Default Styling */
+.ui.accordion:not(.styled) .title ~ .content:not(.ui),
+.ui.accordion:not(.styled) .accordion .title ~ .content:not(.ui) {
+  margin: 0em;
+  padding: 0.5em 0em 1em;
+}
+.ui.accordion:not(.styled) .title ~ .content:not(.ui):last-child {
+  padding-bottom: 0em;
+}
+
+/* Arrow */
+.ui.accordion .title .dropdown.icon,
+.ui.accordion .accordion .title .dropdown.icon {
+  display: inline-block;
+  float: none;
+  opacity: 1;
+  width: 1.25em;
+  height: 1em;
+  margin: 0em 0.25rem 0em 0rem;
+  padding: 0em;
+  font-size: 1em;
+  -webkit-transition: -webkit-transform 0.2s ease, opacity 0.2s ease;
+          transition: transform 0.2s ease, opacity 0.2s ease;
+  vertical-align: baseline;
+  -webkit-transform: none;
+      -ms-transform: none;
+          transform: none;
+}
+
+/*--------------
+    Coupling
+---------------*/
+
+
+/* Menu */
+.ui.accordion.menu .item .title {
+  display: block;
+  padding: 0em;
+}
+.ui.accordion.menu .item .title > .dropdown.icon {
+  float: right;
+  margin: 0.165em 0em 0em 1em;
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+
+/* Header */
+.ui.accordion .ui.header .dropdown.icon {
+  font-size: 1em;
+  margin: 0em 0.25rem 0em 0rem;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+.ui.accordion .active.title .dropdown.icon,
+.ui.accordion .accordion .active.title .dropdown.icon {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.ui.accordion.menu .item .active.title > .dropdown.icon {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+
+
+/*******************************
+            Types
+*******************************/
+
+
+/*--------------
+     Styled
+---------------*/
+
+.ui.styled.accordion {
+  width: 600px;
+}
+.ui.styled.accordion,
+.ui.styled.accordion .accordion {
+  border-radius: 0.2857rem;
+  background: #ffffff;
+  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.05), 0px 0px 0px 1px rgba(39, 41, 43, 0.15);
+}
+.ui.styled.accordion .title,
+.ui.styled.accordion .accordion .title {
+  margin: 0em;
+  padding: 0.75em 1em;
+  color: rgba(0, 0, 0, 0.4);
+  font-weight: bold;
+  border-top: 1px solid rgba(39, 41, 43, 0.15);
+  -webkit-transition: background 0.2s ease, color 0.2s ease;
+          transition: background 0.2s ease, color 0.2s ease;
+}
+.ui.styled.accordion > .title:first-child,
+.ui.styled.accordion .accordion .title:first-child {
+  border-top: none;
+}
+
+/* Content */
+.ui.styled.accordion .content,
+.ui.styled.accordion .accordion .content {
+  margin: 0em;
+  padding: 0.5em 1em 1.5em;
+}
+.ui.styled.accordion .accordion .content {
+  padding: 0em;
+  padding: 0.5em 1em 1.5em;
+}
+
+/* Hover */
+.ui.styled.accordion .title:hover,
+.ui.styled.accordion .active.title,
+.ui.styled.accordion .accordion .title:hover,
+.ui.styled.accordion .accordion .active.title {
+  background: transparent;
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.styled.accordion .accordion .title:hover,
+.ui.styled.accordion .accordion .active.title {
+  background: transparent;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/* Active */
+.ui.styled.accordion .active.title {
+  background: transparent;
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.styled.accordion .accordion .active.title {
+  background: transparent;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+
+/*******************************
+            States
+*******************************/
+
+
+/*--------------
+     Active
+---------------*/
+
+.ui.accordion .active.content,
+.ui.accordion .accordion .active.content {
+  display: block;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------
+     Fluid
+---------------*/
+
+.ui.fluid.accordion,
+.ui.fluid.accordion .accordion {
+  width: 100%;
+}
+
+/*--------------
+     Inverted
+---------------*/
+
+.ui.inverted.accordion .title:not(.ui) {
+  color: #ffffff;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+@font-face {
+  font-family: 'Accordion';
+  src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfOIKAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zryj6HgAAAFwAAAAyGhlYWT/0IhHAAACOAAAADZoaGVhApkB5wAAAnAAAAAkaG10eAJuABIAAAKUAAAAGGxvY2EAjABWAAACrAAAAA5tYXhwAAgAFgAAArwAAAAgbmFtZfC1n04AAALcAAABPHBvc3QAAwAAAAAEGAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQASAEkAtwFuABMAADc0PwE2FzYXFh0BFAcGJwYvASY1EgaABQgHBQYGBQcIBYAG2wcGfwcBAQcECf8IBAcBAQd/BgYAAAAAAQAAAEkApQFuABMAADcRNDc2MzIfARYVFA8BBiMiJyY1AAUGBwgFgAYGgAUIBwYFWwEACAUGBoAFCAcFgAYGBQcAAAABAAAAAQAAqWYls18PPPUACwIAAAAAAM/9o+4AAAAAz/2j7gAAAAAAtwFuAAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAC3AAEAAAAAAAAAAAAAAAAAAAAGAAAAAAAAAAAAAAAAAQAAAAC3ABIAtwAAAAAAAAAKABQAHgBCAGQAAAABAAAABgAUAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAASwAAoAAAAABGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAS0AAAEtFpovuE9TLzIAAAIkAAAAYAAAAGAIIweQY21hcAAAAoQAAABMAAAATA984gpnYXNwAAAC0AAAAAgAAAAIAAAAEGhlYWQAAALYAAAANgAAADb/0IhHaGhlYQAAAxAAAAAkAAAAJAKZAedobXR4AAADNAAAABgAAAAYAm4AEm1heHAAAANMAAAABgAAAAYABlAAbmFtZQAAA1QAAAE8AAABPPC1n05wb3N0AAAEkAAAACAAAAAgAAMAAAEABAQAAQEBB3JhdGluZwABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/iU+HQFHQAAAHkPHQAAAH4RHQAAAAkdAAABJBIABwEBBw0PERQZHnJhdGluZ3JhdGluZ3UwdTF1MjB1RjBEOXVGMERBAAACAYkABAAGAQEEBwoNVp38lA78lA78lA77lA773Z33bxWLkI2Qj44I9xT3FAWOj5CNkIuQi4+JjoePiI2Gi4YIi/uUBYuGiYeHiIiHh4mGi4aLho2Ijwj7FPcUBYeOiY+LkAgO+92L5hWL95QFi5CNkI6Oj4+PjZCLkIuQiY6HCPcU+xQFj4iNhouGi4aJh4eICPsU+xQFiIeGiYaLhouHjYePiI6Jj4uQCA74lBT4lBWLDAoAAAAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDZ//3//wAB/+MPKwADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAEAADfYOJZfDzz1AAsCAAAAAADP/aPuAAAAAM/9o+4AAAAAALcBbgAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAAAtwABAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAEAAAAAtwASALcAAAAAUAAABgAAAAAADgCuAAEAAAAAAAEADAAAAAEAAAAAAAIADgBAAAEAAAAAAAMADAAiAAEAAAAAAAQADABOAAEAAAAAAAUAFgAMAAEAAAAAAAYABgAuAAEAAAAAAAoANABaAAMAAQQJAAEADAAAAAMAAQQJAAIADgBAAAMAAQQJAAMADAAiAAMAAQQJAAQADABOAAMAAQQJAAUAFgAMAAMAAQQJAAYADAA0AAMAAQQJAAoANABaAHIAYQB0AGkAbgBnAFYAZQByAHMAaQBvAG4AIAAxAC4AMAByAGEAdABpAG4AZ3JhdGluZwByAGEAdABpAG4AZwBSAGUAZwB1AGwAYQByAHIAYQB0AGkAbgBnAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* Dropdown Icon */
+.ui.accordion .title .dropdown.icon,
+.ui.accordion .accordion .title .dropdown.icon {
+  font-family: Accordion;
+  line-height: 1;
+  -webkit-backface-visibility: hidden;
+          backface-visibility: hidden;
+  font-weight: normal;
+  font-style: normal;
+  text-align: center;
+}
+.ui.accordion .title .dropdown.icon:before,
+.ui.accordion .accordion .title .dropdown.icon:before {
+  content: '\f0da' /*rtl:'\f0d9'*/;
+}
+
+
+/*******************************
+        User Overrides
+*******************************/
+

web/semantic/dist/components/accordion.js

@@ -0,0 +1,578 @@
+/*!
+ * # Semantic UI 1.11.4 - Accordion
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ($, window, document, undefined) {
+
+"use strict";
+
+$.fn.accordion = function(parameters) {
+  var
+    $allModules     = $(this),
+
+    time            = new Date().getTime(),
+    performance     = [],
+
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
+
+    requestAnimationFrame = window.requestAnimationFrame
+      || window.mozRequestAnimationFrame
+      || window.webkitRequestAnimationFrame
+      || window.msRequestAnimationFrame
+      || function(callback) { setTimeout(callback, 0); },
+
+    returnedValue
+  ;
+  $allModules
+    .each(function() {
+      var
+        settings        = ( $.isPlainObject(parameters) )
+          ? $.extend(true, {}, $.fn.accordion.settings, parameters)
+          : $.extend({}, $.fn.accordion.settings),
+
+        className       = settings.className,
+        namespace       = settings.namespace,
+        selector        = settings.selector,
+        error           = settings.error,
+
+        eventNamespace  = '.' + namespace,
+        moduleNamespace = 'module-' + namespace,
+        moduleSelector  = $allModules.selector || '',
+
+        $module  = $(this),
+        $title   = $module.find(selector.title),
+        $content = $module.find(selector.content),
+
+        element  = this,
+        instance = $module.data(moduleNamespace),
+        observer,
+        module
+      ;
+
+      module = {
+
+        initialize: function() {
+          module.debug('Initializing', $module);
+          module.bind.events();
+          module.observeChanges();
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
+          ;
+        },
+
+        destroy: function() {
+          module.debug('Destroying previous instance', $module);
+          $module
+            .off(eventNamespace)
+            .removeData(moduleNamespace)
+          ;
+        },
+
+        refresh: function() {
+          $title   = $module.find(selector.title);
+          $content = $module.find(selector.content);
+        },
+
+        observeChanges: function() {
+          if('MutationObserver' in window) {
+            observer = new MutationObserver(function(mutations) {
+              module.debug('DOM tree modified, updating selector cache');
+              module.refresh();
+            });
+            observer.observe(element, {
+              childList : true,
+              subtree   : true
+            });
+            module.debug('Setting up mutation observer', observer);
+          }
+        },
+
+        bind: {
+          events: function() {
+            module.debug('Binding delegated events');
+            $module
+              .on('click' + eventNamespace, selector.trigger, module.event.click)
+            ;
+          }
+        },
+
+        event: {
+          click: function() {
+            module.toggle.call(this);
+          }
+        },
+
+        toggle: function(query) {
+          var
+            $activeTitle = (query !== undefined)
+              ? (typeof query === 'number')
+                ? $title.eq(query)
+                : $(query).closest(selector.title)
+              : $(this).closest(selector.title),
+            $activeContent = $activeTitle.next($content),
+            isAnimating = $activeContent.hasClass(className.animating),
+            isActive    = $activeContent.hasClass(className.active),
+            isOpen      = (isActive && !isAnimating),
+            isOpening   = (!isActive && isAnimating)
+          ;
+          module.debug('Toggling visibility of content', $activeTitle);
+          if(isOpen || isOpening) {
+            if(settings.collapsible) {
+              module.close.call($activeTitle);
+            }
+            else {
+              module.debug('Cannot close accordion content collapsing is disabled');
+            }
+          }
+          else {
+            module.open.call($activeTitle);
+          }
+        },
+
+        open: function(query) {
+          var
+            $activeTitle = (query !== undefined)
+              ? (typeof query === 'number')
+                ? $title.eq(query)
+                : $(query).closest(selector.title)
+              : $(this).closest(selector.title),
+            $activeContent = $activeTitle.next($content),
+            isAnimating = $activeContent.hasClass(className.animating),
+            isActive    = $activeContent.hasClass(className.active),
+            isUnopen    = (!isActive && !isAnimating)
+          ;
+          if(isUnopen) {
+            module.debug('Opening accordion content', $activeTitle);
+            if(settings.exclusive) {
+              module.closeOthers.call($activeTitle);
+            }
+            $activeTitle
+              .addClass(className.active)
+            ;
+            $activeContent.addClass(className.animating);
+            if(settings.animateChildren) {
+              if($.fn.transition !== undefined && $module.transition('is supported')) {
+                $activeContent
+                  .children()
+                    .transition({
+                      animation   : 'fade in',
+                      queue       : false,
+                      useFailSafe : true,
+                      debug       : settings.debug,
+                      verbose     : settings.verbose,
+                      duration    : settings.duration
+                    })
+                ;
+              }
+              else {
+                $activeContent
+                  .children()
+                    .stop(true)
+                    .animate({
+                      opacity: 1
+                    }, settings.duration, module.resetOpacity)
+                ;
+              }
+            }
+            $activeContent
+              .stop(true)
+              .slideDown(settings.duration, settings.easing, function() {
+                $activeContent
+                  .removeClass(className.animating)
+                  .addClass(className.active)
+                ;
+                module.reset.display.call(this);
+                settings.onOpen.call(this);
+                settings.onChange.call(this);
+              })
+            ;
+          }
+        },
+
+        close: function(query) {
+          var
+            $activeTitle = (query !== undefined)
+              ? (typeof query === 'number')
+                ? $title.eq(query)
+                : $(query).closest(selector.title)
+              : $(this).closest(selector.title),
+            $activeContent = $activeTitle.next($content),
+            isAnimating    = $activeContent.hasClass(className.animating),
+            isActive       = $activeContent.hasClass(className.active),
+            isOpening      = (!isActive && isAnimating),
+            isClosing      = (isActive && isAnimating)
+          ;
+          if((isActive || isOpening) && !isClosing) {
+            module.debug('Closing accordion content', $activeContent);
+            $activeTitle
+              .removeClass(className.active)
+            ;
+            $activeContent
+              .addClass(className.animating)
+            ;
+            if(settings.animateChildren) {
+              if($.fn.transition !== undefined && $module.transition('is supported')) {
+                $activeContent
+                  .children()
+                    .transition({
+                      animation   : 'fade out',
+                      queue       : false,
+                      useFailSafe : true,
+                      debug       : settings.debug,
+                      verbose     : settings.verbose,
+                      duration    : settings.duration
+                    })
+                ;
+              }
+              else {
+                $activeContent
+                  .children()
+                    .stop(true)
+                    .animate({
+                      opacity: 0
+                    }, settings.duration, module.resetOpacity)
+                ;
+              }
+            }
+            $activeContent
+              .stop(true)
+              .slideUp(settings.duration, settings.easing, function() {
+                $activeContent
+                  .removeClass(className.animating)
+                  .removeClass(className.active)
+                ;
+                module.reset.display.call(this);
+                settings.onClose.call(this);
+                settings.onChange.call(this);
+              })
+            ;
+          }
+        },
+
+        closeOthers: function(index) {
+          var
+            $activeTitle = (index !== undefined)
+              ? $title.eq(index)
+              : $(this).closest(selector.title),
+            $parentTitles    = $activeTitle.parents(selector.content).prev(selector.title),
+            $activeAccordion = $activeTitle.closest(selector.accordion),
+            activeSelector   = selector.title + '.' + className.active + ':visible',
+            activeContent    = selector.content + '.' + className.active + ':visible',
+            $openTitles,
+            $nestedTitles,
+            $openContents
+          ;
+          if(settings.closeNested) {
+            $openTitles   = $activeAccordion.find(activeSelector).not($parentTitles);
+            $openContents = $openTitles.next($content);
+          }
+          else {
+            $openTitles   = $activeAccordion.find(activeSelector).not($parentTitles);
+            $nestedTitles = $activeAccordion.find(activeContent).find(activeSelector).not($parentTitles);
+            $openTitles   = $openTitles.not($nestedTitles);
+            $openContents = $openTitles.next($content);
+          }
+          if( ($openTitles.length > 0) ) {
+            module.debug('Exclusive enabled, closing other content', $openTitles);
+            $openTitles
+              .removeClass(className.active)
+            ;
+            if(settings.animateChildren) {
+              if($.fn.transition !== undefined && $module.transition('is supported')) {
+                $openContents
+                  .children()
+                    .transition({
+                      animation   : 'fade out',
+                      useFailSafe : true,
+                      debug       : settings.debug,
+                      verbose     : settings.verbose,
+                      duration    : settings.duration
+                    })
+                ;
+              }
+              else {
+                $openContents
+                  .children()
+                    .stop()
+                    .animate({
+                      opacity: 0
+                    }, settings.duration, module.resetOpacity)
+                ;
+              }
+            }
+            $openContents
+              .stop()
+              .slideUp(settings.duration , settings.easing, function() {
+                $(this).removeClass(className.active);
+                module.reset.display.call(this);
+              })
+            ;
+          }
+        },
+
+        reset: {
+
+          display: function() {
+            module.verbose('Removing inline display from element', this);
+            $(this).css('display', '');
+            if( $(this).attr('style') === '') {
+              $(this)
+                .attr('style', '')
+                .removeAttr('style')
+              ;
+            }
+          },
+
+          opacity: function() {
+            module.verbose('Removing inline opacity from element', this);
+            $(this).css('opacity', '');
+            if( $(this).attr('style') === '') {
+              $(this)
+                .attr('style', '')
+                .removeAttr('style')
+              ;
+            }
+          },
+
+        },
+
+        setting: function(name, value) {
+          module.debug('Changing setting', name, value);
+          if( $.isPlainObject(name) ) {
+            $.extend(true, settings, name);
+          }
+          else if(value !== undefined) {
+            settings[name] = value;
+          }
+          else {
+            return settings[name];
+          }
+        },
+        internal: function(name, value) {
+          module.debug('Changing internal', name, value);
+          if(value !== undefined) {
+            if( $.isPlainObject(name) ) {
+              $.extend(true, module, name);
+            }
+            else {
+              module[name] = value;
+            }
+          }
+          else {
+            return module[name];
+          }
+        },
+        debug: function() {
+          if(settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+              module.debug.apply(console, arguments);
+            }
+          }
+        },
+        verbose: function() {
+          if(settings.verbose && settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+              module.verbose.apply(console, arguments);
+            }
+          }
+        },
+        error: function() {
+          module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+          module.error.apply(console, arguments);
+        },
+        performance: {
+          log: function(message) {
+            var
+              currentTime,
+              executionTime,
+              previousTime
+            ;
+            if(settings.performance) {
+              currentTime   = new Date().getTime();
+              previousTime  = time || currentTime;
+              executionTime = currentTime - previousTime;
+              time          = currentTime;
+              performance.push({
+                'Name'           : message[0],
+                'Arguments'      : [].slice.call(message, 1) || '',
+                'Element'        : element,
+                'Execution Time' : executionTime
+              });
+            }
+            clearTimeout(module.performance.timer);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
+            var
+              title = settings.name + ':',
+              totalTime = 0
+            ;
+            time = false;
+            clearTimeout(module.performance.timer);
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
+            }
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+              console.groupCollapsed(title);
+              if(console.table) {
+                console.table(performance);
+              }
+              else {
+                $.each(performance, function(index, data) {
+                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+                });
+              }
+              console.groupEnd();
+            }
+            performance = [];
+          }
+        },
+        invoke: function(query, passedArguments, context) {
+          var
+            object = instance,
+            maxDepth,
+            found,
+            response
+          ;
+          passedArguments = passedArguments || queryArguments;
+          context         = element         || context;
+          if(typeof query == 'string' && object !== undefined) {
+            query    = query.split(/[\. ]/);
+            maxDepth = query.length - 1;
+            $.each(query, function(depth, value) {
+              var camelCaseValue = (depth != maxDepth)
+                ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+                : query
+              ;
+              if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+                object = object[camelCaseValue];
+              }
+              else if( object[camelCaseValue] !== undefined ) {
+                found = object[camelCaseValue];
+                return false;
+              }
+              else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+                object = object[value];
+              }
+              else if( object[value] !== undefined ) {
+                found = object[value];
+                return false;
+              }
+              else {
+                module.error(error.method, query);
+                return false;
+              }
+            });
+          }
+          if ( $.isFunction( found ) ) {
+            response = found.apply(context, passedArguments);
+          }
+          else if(found !== undefined) {
+            response = found;
+          }
+          if($.isArray(returnedValue)) {
+            returnedValue.push(response);
+          }
+          else if(returnedValue !== undefined) {
+            returnedValue = [returnedValue, response];
+          }
+          else if(response !== undefined) {
+            returnedValue = response;
+          }
+          return found;
+        }
+      };
+      if(methodInvoked) {
+        if(instance === undefined) {
+          module.initialize();
+        }
+        module.invoke(query);
+      }
+      else {
+        if(instance !== undefined) {
+          instance.invoke('destroy');
+        }
+        module.initialize();
+      }
+    })
+  ;
+  return (returnedValue !== undefined)
+    ? returnedValue
+    : this
+  ;
+};
+
+$.fn.accordion.settings = {
+
+  name            : 'Accordion',
+  namespace       : 'accordion',
+
+  debug           : false,
+  verbose         : true,
+  performance     : true,
+
+  exclusive       : true,
+  collapsible     : true,
+  closeNested     : false,
+  animateChildren : true,
+
+  duration        : 350,
+  easing          : 'easeOutQuad',
+
+  onOpen          : function(){},
+  onClose         : function(){},
+  onChange        : function(){},
+
+  error: {
+    method : 'The method you called is not defined'
+  },
+
+  className   : {
+    active    : 'active',
+    animating : 'animating'
+  },
+
+  selector    : {
+    accordion : '.accordion',
+    title     : '.title',
+    trigger   : '.title',
+    content   : '.content'
+  }
+
+};
+
+// Adds easing
+$.extend( $.easing, {
+  easeOutQuad: function (x, t, b, c, d) {
+    return -c *(t/=d)*(t-2) + b;
+  }
+});
+
+})( jQuery, window , document );
+

web/semantic/dist/components/ad.css

@@ -0,0 +1,276 @@
+/*!
+ * # Semantic UI 1.11.4 - Ad
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+         Advertisement
+*******************************/
+
+.ui.ad {
+  display: block;
+  overflow: hidden;
+  margin: 1em 0em;
+}
+.ui.ad:first-child {
+  margin: 0em;
+}
+.ui.ad:last-child {
+  margin: 0em;
+}
+.ui.ad iframe {
+  margin: 0em;
+  padding: 0em;
+  border: none;
+  overflow: hidden;
+}
+
+/*--------------
+     Common
+---------------*/
+
+
+/* Leaderboard */
+.ui.leaderboard.ad {
+  width: 728px;
+  height: 90px;
+}
+
+/* Medium Rectangle */
+.ui[class*="medium rectangle"].ad {
+  width: 300px;
+  height: 250px;
+}
+
+/* Large Rectangle */
+.ui[class*="large rectangle"].ad {
+  width: 336px;
+  height: 280px;
+}
+
+/* Half Page */
+.ui[class*="half page"].ad {
+  width: 300px;
+  height: 600px;
+}
+
+/*--------------
+     Square
+---------------*/
+
+
+/* Square */
+.ui.square.ad {
+  width: 250px;
+  height: 250px;
+}
+
+/* Small Square */
+.ui[class*="small square"].ad {
+  width: 200px;
+  height: 200px;
+}
+
+/*--------------
+    Rectangle
+---------------*/
+
+
+/* Small Rectangle */
+.ui[class*="small rectangle"].ad {
+  width: 180px;
+  height: 150px;
+}
+
+/* Vertical Rectangle */
+.ui[class*="vertical rectangle"].ad {
+  width: 240px;
+  height: 400px;
+}
+
+/*--------------
+     Button
+---------------*/
+
+.ui.button.ad {
+  width: 120px;
+  height: 90px;
+}
+.ui[class*="square button"].ad {
+  width: 125px;
+  height: 125px;
+}
+.ui[class*="small button"].ad {
+  width: 120px;
+  height: 60px;
+}
+
+/*--------------
+   Skyscrapers
+---------------*/
+
+
+/* Skyscraper */
+.ui.skyscraper.ad {
+  width: 120px;
+  height: 600px;
+}
+
+/* Wide Skyscraper */
+.ui[class*="wide skyscraper"].ad {
+  width: 160px;
+}
+
+/*--------------
+     Banners
+---------------*/
+
+
+/* Banner */
+.ui.banner.ad {
+  width: 468px;
+  height: 60px;
+}
+
+/* Vertical Banner */
+.ui[class*="vertical banner"].ad {
+  width: 120px;
+  height: 240px;
+}
+
+/* Top Banner */
+.ui[class*="top banner"].ad {
+  width: 930px;
+  height: 180px;
+}
+
+/* Half Banner */
+.ui[class*="half banner"].ad {
+  width: 234px;
+  height: 60px;
+}
+
+/*--------------
+    Boards
+---------------*/
+
+
+/* Leaderboard */
+.ui[class*="large leaderboard"].ad {
+  width: 970px;
+  height: 90px;
+}
+
+/* Billboard */
+.ui.billboard.ad {
+  width: 970px;
+  height: 250px;
+}
+
+/*--------------
+    Panorama
+---------------*/
+
+
+/* Panorama */
+.ui.panorama.ad {
+  width: 980px;
+  height: 120px;
+}
+
+/*--------------
+     Netboard
+---------------*/
+
+
+/* Netboard */
+.ui.netboard.ad {
+  width: 580px;
+  height: 400px;
+}
+
+/*--------------
+     Mobile
+---------------*/
+
+
+/* Large Mobile Banner */
+.ui[class*="large mobile banner"].ad {
+  width: 320px;
+  height: 100px;
+}
+
+/* Mobile Leaderboard */
+.ui[class*="mobile leaderboard"].ad {
+  width: 320px;
+  height: 50px;
+}
+
+
+/*******************************
+             Types
+*******************************/
+
+
+/* Mobile Sizes */
+.ui.mobile.ad {
+  display: none;
+}
+@media only screen and (max-width: 767px) {
+  .ui.mobile.ad {
+    display: block;
+  }
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+.ui.centered.ad {
+  margin-left: auto;
+  margin-right: auto;
+}
+.ui.test.ad {
+  position: relative;
+  background: #333333;
+}
+.ui.test.ad:after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  text-align: center;
+  -webkit-transform: translateX(-50%) translateY(-50%);
+      -ms-transform: translateX(-50%) translateY(-50%);
+          transform: translateX(-50%) translateY(-50%);
+  content: 'Ad';
+  color: #ffffff;
+  font-size: 1em;
+  font-weight: bold;
+}
+.ui.mobile.test.ad:after {
+  font-size: 0.85714em;
+}
+.ui.test.ad[data-text]:after {
+  content: attr(data-text);
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+    User Variable Overrides
+*******************************/
+

web/semantic/dist/components/ad.min.css

@@ -0,0 +1,10 @@
+/*!
+ * # Semantic UI 1.11.4 - Ad
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2013 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */.ui.ad{display:block;overflow:hidden;margin:1em 0}.ui.ad:first-child,.ui.ad:last-child{margin:0}.ui.ad iframe{margin:0;padding:0;border:none;overflow:hidden}.ui.leaderboard.ad{width:728px;height:90px}.ui[class*="medium rectangle"].ad{width:300px;height:250px}.ui[class*="large rectangle"].ad{width:336px;height:280px}.ui[class*="half page"].ad{width:300px;height:600px}.ui.square.ad{width:250px;height:250px}.ui[class*="small square"].ad{width:200px;height:200px}.ui[class*="small rectangle"].ad{width:180px;height:150px}.ui[class*="vertical rectangle"].ad{width:240px;height:400px}.ui.button.ad{width:120px;height:90px}.ui[class*="square button"].ad{width:125px;height:125px}.ui[class*="small button"].ad{width:120px;height:60px}.ui.skyscraper.ad{width:120px;height:600px}.ui[class*="wide skyscraper"].ad{width:160px}.ui.banner.ad{width:468px;height:60px}.ui[class*="vertical banner"].ad{width:120px;height:240px}.ui[class*="top banner"].ad{width:930px;height:180px}.ui[class*="half banner"].ad{width:234px;height:60px}.ui[class*="large leaderboard"].ad{width:970px;height:90px}.ui.billboard.ad{width:970px;height:250px}.ui.panorama.ad{width:980px;height:120px}.ui.netboard.ad{width:580px;height:400px}.ui[class*="large mobile banner"].ad{width:320px;height:100px}.ui[class*="mobile leaderboard"].ad{width:320px;height:50px}.ui.mobile.ad{display:none}@media only screen and (max-width:767px){.ui.mobile.ad{display:block}}.ui.centered.ad{margin-left:auto;margin-right:auto}.ui.test.ad{position:relative;background:#333}.ui.test.ad:after{position:absolute;top:50%;left:50%;width:100%;text-align:center;-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);content:'Ad';color:#fff;font-size:1em;font-weight:700}.ui.mobile.test.ad:after{font-size:.85714em}.ui.test.ad[data-text]:after{content:attr(data-text)}

web/semantic/dist/components/api.js

@@ -0,0 +1,871 @@
+/*!
+ * # Semantic UI 1.11.4 - API
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ( $, window, document, undefined ) {
+
+"use strict";
+
+$.api = $.fn.api = function(parameters) {
+
+  var
+    // use window context if none specified
+    $allModules     = $.isFunction(this)
+        ? $(window)
+        : $(this),
+    moduleSelector = $allModules.selector || '',
+    time           = new Date().getTime(),
+    performance    = [],
+
+    query          = arguments[0],
+    methodInvoked  = (typeof query == 'string'),
+    queryArguments = [].slice.call(arguments, 1),
+
+    returnedValue
+  ;
+
+  $allModules
+    .each(function() {
+      var
+        settings          = ( $.isPlainObject(parameters) )
+          ? $.extend(true, {}, $.fn.api.settings, parameters)
+          : $.extend({}, $.fn.api.settings),
+
+        // internal aliases
+        namespace       = settings.namespace,
+        metadata        = settings.metadata,
+        selector        = settings.selector,
+        error           = settings.error,
+        className       = settings.className,
+
+        // define namespaces for modules
+        eventNamespace  = '.' + namespace,
+        moduleNamespace = 'module-' + namespace,
+
+        // element that creates request
+        $module         = $(this),
+        $form           = $module.closest(selector.form),
+
+        // context used for state
+        $context        = (settings.stateContext)
+          ? $(settings.stateContext)
+          : $module,
+
+        // request details
+        ajaxSettings,
+        requestSettings,
+        url,
+        data,
+
+        // standard module
+        element         = this,
+        context         = $context.get(),
+        instance        = $module.data(moduleNamespace),
+        module
+      ;
+
+      module = {
+
+        initialize: function() {
+          var
+            triggerEvent = module.get.event()
+          ;
+          // bind events
+          if(!methodInvoked) {
+            if( triggerEvent ) {
+              module.debug('Attaching API events to element', triggerEvent);
+              $module
+                .on(triggerEvent + eventNamespace, module.event.trigger)
+              ;
+            }
+            else if(settings.on == 'now') {
+              module.debug('Querying API now', triggerEvent);
+              module.query();
+            }
+          }
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          module.verbose('Storing instance of module', module);
+          instance = module;
+          $module
+            .data(moduleNamespace, instance)
+          ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous module for', element);
+          $module
+            .removeData(moduleNamespace)
+            .off(eventNamespace)
+          ;
+        },
+
+        query: function() {
+
+          if(module.is.disabled()) {
+            module.debug('Element is disabled API request aborted');
+            return;
+          }
+          // determine if an api event already occurred
+          if(module.is.loading() && settings.throttle === 0 ) {
+            module.debug('Cancelling request, previous request is still pending');
+            return;
+          }
+
+          // pass element metadata to url (value, text)
+          if(settings.defaultData) {
+            $.extend(true, settings.urlData, module.get.defaultData());
+          }
+
+          // Add form content
+          if(settings.serializeForm !== false || $context.is('form')) {
+            if(settings.serializeForm == 'json') {
+              $.extend(true, settings.data, module.get.formData());
+            }
+            else {
+              settings.data = module.get.formData();
+            }
+          }
+
+          // call beforesend and get any settings changes
+          requestSettings         = module.get.settings();
+
+          // check if before send cancelled request
+          if(requestSettings === false) {
+            module.cancelled = true;
+            module.error(error.beforeSend);
+            return;
+          }
+          else {
+            module.cancelled = false;
+          }
+
+          if(settings.url) {
+            // override with url if specified
+            module.debug('Using specified url', url);
+            url = module.add.urlData( settings.url );
+          }
+          else {
+            // otherwise find url from api endpoints
+            url = module.add.urlData( module.get.templateURL() );
+            module.debug('Added URL Data to url', url);
+          }
+
+          // exit conditions reached, missing url parameters
+          if( !url ) {
+            if( module.is.form() ) {
+              url = $module.attr('action') || '';
+              module.debug('No url or action specified, defaulting to form action', url);
+            }
+            else {
+              module.error(error.missingURL, settings.action);
+              return;
+            }
+          }
+
+          // add loading state
+          module.set.loading();
+
+          // look for jQuery ajax parameters in settings
+          ajaxSettings = $.extend(true, {}, settings, {
+            type       : settings.method || settings.type,
+            data       : data,
+            url        : settings.base + url,
+            beforeSend : settings.beforeXHR,
+            success    : function() {},
+            failure    : function() {},
+            complete   : function() {}
+          });
+
+          module.debug('Querying URL', ajaxSettings.url);
+          module.debug('Sending data', data, ajaxSettings.method);
+          module.verbose('Using AJAX settings', ajaxSettings);
+
+          if( module.is.loading() ) {
+            // throttle additional requests
+            module.timer = setTimeout(function() {
+              module.request = module.create.request();
+              module.xhr     = module.create.xhr();
+              settings.onRequest.call(context, module.request, module.xhr);
+            }, settings.throttle);
+          }
+          else {
+            // immediately on first request
+            module.request = module.create.request();
+            module.xhr     = module.create.xhr();
+            settings.onRequest.call(context, module.request, module.xhr);
+          }
+
+        },
+
+
+        is: {
+          disabled: function() {
+            return ($module.filter(settings.filter).length > 0);
+          },
+          form: function() {
+            return $module.is('form');
+          },
+          input: function() {
+            return $module.is('input');
+          },
+          loading: function() {
+            return (module.request && module.request.state() == 'pending');
+          }
+        },
+
+        was: {
+          cancelled: function() {
+            return (module.cancelled || false);
+          },
+          succesful: function() {
+            return (module.request && module.request.state() == 'resolved');
+          },
+          failure: function() {
+            return (module.request && module.request.state() == 'rejected');
+          },
+          complete: function() {
+            return (module.request && (module.request.state() == 'resolved' || module.request.state() == 'rejected') );
+          }
+        },
+
+        add: {
+          urlData: function(url, urlData) {
+            var
+              requiredVariables,
+              optionalVariables
+            ;
+            if(url) {
+              requiredVariables = url.match(settings.regExp.required);
+              optionalVariables = url.match(settings.regExp.optional);
+              urlData           = urlData || settings.urlData;
+              if(requiredVariables) {
+                module.debug('Looking for required URL variables', requiredVariables);
+                $.each(requiredVariables, function(index, templatedString) {
+                  var
+                    // allow legacy {$var} style
+                    variable = (templatedString.indexOf('$') !== -1)
+                      ? templatedString.substr(2, templatedString.length - 3)
+                      : templatedString.substr(1, templatedString.length - 2),
+                    value   = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
+                      ? urlData[variable]
+                      : ($module.data(variable) !== undefined)
+                        ? $module.data(variable)
+                        : ($context.data(variable) !== undefined)
+                          ? $context.data(variable)
+                          : urlData[variable]
+                  ;
+                  // remove value
+                  if(value === undefined) {
+                    module.error(error.requiredParameter, variable, url);
+                    url = false;
+                    return false;
+                  }
+                  else {
+                    module.verbose('Found required variable', variable, value);
+                    url = url.replace(templatedString, value);
+                  }
+                });
+              }
+              if(optionalVariables) {
+                module.debug('Looking for optional URL variables', requiredVariables);
+                $.each(optionalVariables, function(index, templatedString) {
+                  var
+                    // allow legacy {/$var} style
+                    variable = (templatedString.indexOf('$') !== -1)
+                      ? templatedString.substr(3, templatedString.length - 4)
+                      : templatedString.substr(2, templatedString.length - 3),
+                    value   = ($.isPlainObject(urlData) && urlData[variable] !== undefined)
+                      ? urlData[variable]
+                      : ($module.data(variable) !== undefined)
+                        ? $module.data(variable)
+                        : ($context.data(variable) !== undefined)
+                          ? $context.data(variable)
+                          : urlData[variable]
+                  ;
+                  // optional replacement
+                  if(value !== undefined) {
+                    module.verbose('Optional variable Found', variable, value);
+                    url = url.replace(templatedString, value);
+                  }
+                  else {
+                    module.verbose('Optional variable not found', variable);
+                    // remove preceding slash if set
+                    if(url.indexOf('/' + templatedString) !== -1) {
+                      url = url.replace('/' + templatedString, '');
+                    }
+                    else {
+                      url = url.replace(templatedString, '');
+                    }
+                  }
+                });
+              }
+            }
+            return url;
+          }
+        },
+
+        event: {
+          trigger: function(event) {
+            module.query();
+            if(event.type == 'submit' || event.type == 'click') {
+              event.preventDefault();
+            }
+          },
+          xhr: {
+            always: function() {
+              // calculate if loading time was below minimum threshold
+            },
+            done: function(response) {
+              var
+                context      = this,
+                elapsedTime  = (new Date().getTime() - time),
+                timeLeft     = (settings.loadingDuration - elapsedTime)
+              ;
+              timeLeft = (timeLeft > 0)
+                ? timeLeft
+                : 0
+              ;
+              setTimeout(function() {
+                module.request.resolveWith(context, [response]);
+              }, timeLeft);
+            },
+            fail: function(xhr, status, httpMessage) {
+              var
+                context     = this,
+                elapsedTime = (new Date().getTime() - time),
+                timeLeft    = (settings.loadingDuration - elapsedTime)
+              ;
+              timeLeft = (timeLeft > 0)
+                ? timeLeft
+                : 0
+              ;
+              // page triggers abort on navigation, dont show error
+              setTimeout(function() {
+                if(status !== 'abort') {
+                  module.request.rejectWith(context, [xhr, status, httpMessage]);
+                }
+                else {
+                  module.reset();
+                }
+              }, timeLeft);
+            }
+          },
+          request: {
+            complete: function(response) {
+              module.remove.loading();
+              settings.onComplete.call(context, response, $module);
+            },
+            done: function(response) {
+              module.debug('API Response Received', response);
+              if(settings.dataType == 'json') {
+                if( $.isFunction(settings.successTest) ) {
+                  module.debug('Checking JSON returned success', settings.successTest, response);
+                  if( settings.successTest(response) ) {
+                    settings.onSuccess.call(context, response, $module);
+                  }
+                  else {
+                    module.debug('JSON test specified by user and response failed', response);
+                    settings.onFailure.call(context, response, $module);
+                  }
+                }
+                else {
+                  settings.onSuccess.call(context, response, $module);
+                }
+              }
+              else {
+                settings.onSuccess.call(context, response, $module);
+              }
+            },
+            error: function(xhr, status, httpMessage) {
+              var
+                errorMessage = (settings.error[status] !== undefined)
+                  ? settings.error[status]
+                  : httpMessage,
+                response
+              ;
+              // let em know unless request aborted
+              if(xhr !== undefined) {
+                // readyState 4 = done, anything less is not really sent
+                if(xhr.readyState !== undefined && xhr.readyState == 4) {
+
+                  // if http status code returned and json returned error, look for it
+                  if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') {
+                    module.error(error.statusMessage + httpMessage, ajaxSettings.url);
+                  }
+                  else {
+                    if(status == 'error' && settings.dataType == 'json') {
+                      try {
+                        response = $.parseJSON(xhr.responseText);
+                        if(response && response.error !== undefined) {
+                          errorMessage = response.error;
+                        }
+                      }
+                      catch(e) {
+                        module.error(error.JSONParse);
+                      }
+                    }
+                  }
+                  module.remove.loading();
+                  module.set.error();
+                  // show error state only for duration specified in settings
+                  if(settings.errorDuration) {
+                    setTimeout(module.remove.error, settings.errorDuration);
+                  }
+                  module.debug('API Request error:', errorMessage);
+                  settings.onError.call(context, errorMessage, $module);
+                }
+                else {
+                  settings.onAbort.call(context, errorMessage, $module);
+                  module.debug('Request Aborted (Most likely caused by page change or CORS Policy)', status, httpMessage);
+                }
+              }
+            }
+          }
+        },
+
+        create: {
+          request: function() {
+            return $.Deferred()
+              .always(module.event.request.complete)
+              .done(module.event.request.done)
+              .fail(module.event.request.error)
+            ;
+          },
+          xhr: function() {
+            return $.ajax(ajaxSettings)
+              .always(module.event.xhr.always)
+              .done(module.event.xhr.done)
+              .fail(module.event.xhr.fail)
+            ;
+          }
+        },
+
+        set: {
+          error: function() {
+            module.verbose('Adding error state to element', $context);
+            $context.addClass(className.error);
+          },
+          loading: function() {
+            module.verbose('Adding loading state to element', $context);
+            $context.addClass(className.loading);
+          }
+        },
+
+        remove: {
+          error: function() {
+            module.verbose('Removing error state from element', $context);
+            $context.removeClass(className.error);
+          },
+          loading: function() {
+            module.verbose('Removing loading state from element', $context);
+            $context.removeClass(className.loading);
+          }
+        },
+
+        get: {
+          request: function() {
+            return module.request || false;
+          },
+          xhr: function() {
+            return module.xhr || false;
+          },
+          settings: function() {
+            var
+              runSettings
+            ;
+            runSettings = settings.beforeSend.call($module, settings);
+            if(runSettings) {
+              if(runSettings.success !== undefined) {
+                module.debug('Legacy success callback detected', runSettings);
+                module.error(error.legacyParameters, runSettings.success);
+                runSettings.onSuccess = runSettings.success;
+              }
+              if(runSettings.failure !== undefined) {
+                module.debug('Legacy failure callback detected', runSettings);
+                module.error(error.legacyParameters, runSettings.failure);
+                runSettings.onFailure = runSettings.failure;
+              }
+              if(runSettings.complete !== undefined) {
+                module.debug('Legacy complete callback detected', runSettings);
+                module.error(error.legacyParameters, runSettings.complete);
+                runSettings.onComplete = runSettings.complete;
+              }
+            }
+            if(runSettings === undefined) {
+              module.error(error.noReturnedValue);
+            }
+            return (runSettings !== undefined)
+              ? runSettings
+              : settings
+            ;
+          },
+          defaultData: function() {
+            var
+              data = {}
+            ;
+            if( !$.isWindow(element) ) {
+              if( module.is.input() ) {
+                data.value = $module.val();
+              }
+              else if( !module.is.form() ) {
+
+              }
+              else {
+                data.text = $module.text();
+              }
+            }
+            return data;
+          },
+          event: function() {
+            if( $.isWindow(element) || settings.on == 'now' ) {
+              module.debug('API called without element, no events attached');
+              return false;
+            }
+            else if(settings.on == 'auto') {
+              if( $module.is('input') ) {
+                return (element.oninput !== undefined)
+                  ? 'input'
+                  : (element.onpropertychange !== undefined)
+                    ? 'propertychange'
+                    : 'keyup'
+                ;
+              }
+              else if( $module.is('form') ) {
+                return 'submit';
+              }
+              else {
+                return 'click';
+              }
+            }
+            else {
+              return settings.on;
+            }
+          },
+          formData: function() {
+            var
+              formData
+            ;
+            if($module.serializeObject !== undefined) {
+              formData = $form.serializeObject();
+            }
+            else {
+              module.error(error.missingSerialize);
+              formData = $form.serialize();
+            }
+            module.debug('Retrieved form data', formData);
+            return formData;
+          },
+          templateURL: function(action) {
+            var
+              url
+            ;
+            action = action || $module.data(metadata.action) || settings.action || false;
+            if(action) {
+              module.debug('Looking up url for action', action, settings.api);
+              if(settings.api[action] !== undefined) {
+                url = settings.api[action];
+                module.debug('Found template url', url);
+              }
+              else if( !module.is.form() ) {
+                module.error(error.missingAction, settings.action, settings.api);
+              }
+            }
+            return url;
+          }
+        },
+
+        abort: function() {
+          var
+            xhr = module.get.xhr()
+          ;
+          if( xhr && xhr.state() !== 'resolved') {
+            module.debug('Cancelling API request');
+            xhr.abort();
+            module.request.rejectWith(settings.apiSettings);
+          }
+        },
+
+        // reset state
+        reset: function() {
+          module.remove.error();
+          module.remove.loading();
+        },
+
+        setting: function(name, value) {
+          module.debug('Changing setting', name, value);
+          if( $.isPlainObject(name) ) {
+            $.extend(true, settings, name);
+          }
+          else if(value !== undefined) {
+            settings[name] = value;
+          }
+          else {
+            return settings[name];
+          }
+        },
+        internal: function(name, value) {
+          if( $.isPlainObject(name) ) {
+            $.extend(true, module, name);
+          }
+          else if(value !== undefined) {
+            module[name] = value;
+          }
+          else {
+            return module[name];
+          }
+        },
+        debug: function() {
+          if(settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+              module.debug.apply(console, arguments);
+            }
+          }
+        },
+        verbose: function() {
+          if(settings.verbose && settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+              module.verbose.apply(console, arguments);
+            }
+          }
+        },
+        error: function() {
+          module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+          module.error.apply(console, arguments);
+        },
+        performance: {
+          log: function(message) {
+            var
+              currentTime,
+              executionTime,
+              previousTime
+            ;
+            if(settings.performance) {
+              currentTime   = new Date().getTime();
+              previousTime  = time || currentTime;
+              executionTime = currentTime - previousTime;
+              time          = currentTime;
+              performance.push({
+                'Name'           : message[0],
+                'Arguments'      : [].slice.call(message, 1) || '',
+                //'Element'        : element,
+                'Execution Time' : executionTime
+              });
+            }
+            clearTimeout(module.performance.timer);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
+            var
+              title = settings.name + ':',
+              totalTime = 0
+            ;
+            time = false;
+            clearTimeout(module.performance.timer);
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
+            }
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+              console.groupCollapsed(title);
+              if(console.table) {
+                console.table(performance);
+              }
+              else {
+                $.each(performance, function(index, data) {
+                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+                });
+              }
+              console.groupEnd();
+            }
+            performance = [];
+          }
+        },
+        invoke: function(query, passedArguments, context) {
+          var
+            object = instance,
+            maxDepth,
+            found,
+            response
+          ;
+          passedArguments = passedArguments || queryArguments;
+          context         = element         || context;
+          if(typeof query == 'string' && object !== undefined) {
+            query    = query.split(/[\. ]/);
+            maxDepth = query.length - 1;
+            $.each(query, function(depth, value) {
+              var camelCaseValue = (depth != maxDepth)
+                ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+                : query
+              ;
+              if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+                object = object[camelCaseValue];
+              }
+              else if( object[camelCaseValue] !== undefined ) {
+                found = object[camelCaseValue];
+                return false;
+              }
+              else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+                object = object[value];
+              }
+              else if( object[value] !== undefined ) {
+                found = object[value];
+                return false;
+              }
+              else {
+                module.error(error.method, query);
+                return false;
+              }
+            });
+          }
+          if ( $.isFunction( found ) ) {
+            response = found.apply(context, passedArguments);
+          }
+          else if(found !== undefined) {
+            response = found;
+          }
+          if($.isArray(returnedValue)) {
+            returnedValue.push(response);
+          }
+          else if(returnedValue !== undefined) {
+            returnedValue = [returnedValue, response];
+          }
+          else if(response !== undefined) {
+            returnedValue = response;
+          }
+          return found;
+        }
+      };
+
+      if(methodInvoked) {
+        if(instance === undefined) {
+          module.initialize();
+        }
+        module.invoke(query);
+      }
+      else {
+        if(instance !== undefined) {
+          instance.invoke('destroy');
+        }
+        module.initialize();
+      }
+    })
+  ;
+
+  return (returnedValue !== undefined)
+    ? returnedValue
+    : this
+  ;
+};
+
+$.api.settings = {
+
+  name            : 'API',
+  namespace       : 'api',
+
+  debug           : true,
+  verbose         : false,
+  performance     : true,
+
+  // event binding
+  on              : 'auto',
+  filter          : '.disabled',
+  stateContext    : false,
+
+  // state
+  loadingDuration : 0,
+  errorDuration   : 2000,
+
+  // templating
+  action          : false,
+  url             : false,
+  base            : '',
+
+  // data
+  urlData         : {},
+
+  // ui
+  defaultData     : true,
+  serializeForm   : false,
+  throttle        : 0,
+
+  // jQ ajax
+  method          : 'get',
+  data            : {},
+  dataType        : 'json',
+
+  // callbacks
+  beforeSend  : function(settings) { return settings; },
+  beforeXHR   : function(xhr) {},
+
+  onRequest   : function(promise, xhr) {},
+  onSuccess   : function(response, $module) {},
+  onComplete  : function(response, $module) {},
+  onFailure   : function(errorMessage, $module) {},
+  onError     : function(errorMessage, $module) {},
+  onAbort     : function(errorMessage, $module) {},
+
+  successTest : false,
+
+  // errors
+  error : {
+    beforeSend        : 'The before send function has aborted the request',
+    error             : 'There was an error with your request',
+    exitConditions    : 'API Request Aborted. Exit conditions met',
+    JSONParse         : 'JSON could not be parsed during error handling',
+    legacyParameters  : 'You are using legacy API success callback names',
+    method            : 'The method you called is not defined',
+    missingAction     : 'API action used but no url was defined',
+    missingSerialize  : 'Required dependency jquery-serialize-object missing, using basic serialize',
+    missingURL        : 'No URL specified for api event',
+    noReturnedValue   : 'The beforeSend callback must return a settings object, beforeSend ignored.',
+    parseError        : 'There was an error parsing your request',
+    requiredParameter : 'Missing a required URL parameter: ',
+    statusMessage     : 'Server gave an error: ',
+    timeout           : 'Your request timed out'
+  },
+
+  regExp  : {
+    required: /\{\$*[A-z0-9]+\}/g,
+    optional: /\{\/\$*[A-z0-9]+\}/g,
+  },
+
+  className: {
+    loading : 'loading',
+    error   : 'error'
+  },
+
+  selector: {
+    form: 'form'
+  },
+
+  metadata: {
+    action  : 'action'
+  }
+};
+
+
+$.api.settings.api = {};
+
+
+})( jQuery, window , document );

web/semantic/dist/components/breadcrumb.css

@@ -0,0 +1,124 @@
+/*!
+ * # Semantic UI 1.11.4 - Breadcrumb
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+           Breadcrumb
+*******************************/
+
+.ui.breadcrumb {
+  margin: 1em 0em;
+  display: inline-block;
+  vertical-align: middle;
+}
+.ui.breadcrumb:first-child {
+  margin-top: 0em;
+}
+.ui.breadcrumb:last-child {
+  margin-bottom: 0em;
+}
+
+
+/*******************************
+          Content
+*******************************/
+
+
+/* Divider */
+.ui.breadcrumb .divider {
+  display: inline-block;
+  opacity: 0.5;
+  margin: 0em 0.2rem 0em;
+  font-size: 0.9em;
+  color: rgba(0, 0, 0, 0.4);
+  vertical-align: baseline;
+}
+
+/* Link */
+.ui.breadcrumb a {
+  color: #009fda;
+}
+.ui.breadcrumb a:hover {
+  color: #00b2f3;
+}
+
+/* Icon Divider */
+.ui.breadcrumb .icon.divider {
+  font-size: 0.85714286em;
+  vertical-align: baseline;
+}
+
+/* Section */
+.ui.breadcrumb a.section {
+  cursor: pointer;
+}
+.ui.breadcrumb .section {
+  display: inline-block;
+  margin: 0em;
+  padding: 0em;
+}
+
+/* Loose Coupling */
+.ui.breadcrumb.segment {
+  display: inline-block;
+  padding: 0.5em 1em;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+.ui.breadcrumb .active.section {
+  font-weight: bold;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+.ui.mini.breadcrumb {
+  font-size: 0.65em;
+}
+.ui.tiny.breadcrumb {
+  font-size: 0.7em;
+}
+.ui.small.breadcrumb {
+  font-size: 0.75em;
+}
+.ui.breadcrumb {
+  font-size: 1em;
+}
+.ui.large.breadcrumb {
+  font-size: 1.1em;
+}
+.ui.big.breadcrumb {
+  font-size: 1.05em;
+}
+.ui.huge.breadcrumb {
+  font-size: 1.3em;
+}
+.ui.massive.breadcrumb {
+  font-size: 1.5em;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/
+

web/semantic/dist/components/breadcrumb.min.css

@@ -0,0 +1,10 @@
+/*!
+ * # Semantic UI 1.11.4 - Breadcrumb
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */.ui.breadcrumb{margin:1em 0;display:inline-block;vertical-align:middle}.ui.breadcrumb:first-child{margin-top:0}.ui.breadcrumb:last-child{margin-bottom:0}.ui.breadcrumb .divider{display:inline-block;opacity:.5;margin:0 .2rem;font-size:.9em;color:rgba(0,0,0,.4);vertical-align:baseline}.ui.breadcrumb a{color:#009fda}.ui.breadcrumb a:hover{color:#00b2f3}.ui.breadcrumb .icon.divider{font-size:.85714286em;vertical-align:baseline}.ui.breadcrumb a.section{cursor:pointer}.ui.breadcrumb .section{display:inline-block;margin:0;padding:0}.ui.breadcrumb.segment{display:inline-block;padding:.5em 1em}.ui.breadcrumb .active.section{font-weight:700}.ui.mini.breadcrumb{font-size:.65em}.ui.tiny.breadcrumb{font-size:.7em}.ui.small.breadcrumb{font-size:.75em}.ui.breadcrumb{font-size:1em}.ui.large.breadcrumb{font-size:1.1em}.ui.big.breadcrumb{font-size:1.05em}.ui.huge.breadcrumb{font-size:1.3em}.ui.massive.breadcrumb{font-size:1.5em}

web/semantic/dist/components/card.css

@@ -0,0 +1,909 @@
+/*!
+ * # Semantic UI 1.11.4 - Item
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributorss
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Standard
+*******************************/
+
+
+/*--------------
+      Card
+---------------*/
+
+.ui.cards > .card,
+.ui.card {
+  max-width: 100%;
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  width: 290px;
+  min-height: 0px;
+  background: #ffffff;
+  padding: 0em;
+  border: none;
+  border-radius: 0.2857rem;
+  box-shadow: 0px 3px 0px 0px #d4d4d5, 0px 0px 0px 1px #d4d4d5;
+  -webkit-transition: box-shadow 0.2s ease;
+          transition: box-shadow 0.2s ease;
+  z-index: '';
+}
+.ui.card {
+  margin: 1em 0em;
+}
+.ui.cards > .card a,
+.ui.card a {
+  cursor: pointer;
+}
+.ui.card:first-child {
+  margin-top: 0em;
+}
+.ui.card:last-child {
+  margin-bottom: 0em;
+}
+
+/*--------------
+      Cards
+---------------*/
+
+.ui.cards {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin: -0.875em -0.5em;
+  -webkit-flex-wrap: wrap;
+      -ms-flex-wrap: wrap;
+          flex-wrap: wrap;
+}
+.ui.cards > .card {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  margin: 0.875em 0.5em;
+  float: none;
+}
+
+/* Clearing */
+.ui.cards:after,
+.ui.card:after {
+  display: block;
+  content: ' ';
+  height: 0px;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+/* Consecutive Card Groups Preserve Row Spacing */
+.ui.cards ~ .ui.cards {
+  margin-top: 0.875em;
+}
+
+/*--------------
+  Rounded Edges
+---------------*/
+
+.ui.cards > .card > :first-child,
+.ui.card > :first-child {
+  border-radius: 0.2857rem 0.2857rem 0em 0em !important;
+}
+.ui.cards > .card > :last-child,
+.ui.card > :last-child {
+  border-radius: 0em 0em 0.2857rem 0.2857rem !important;
+}
+
+/*--------------
+     Images
+---------------*/
+
+.ui.cards > .card > .image,
+.ui.card > .image {
+  display: block;
+  position: relative;
+  padding: 0em;
+  background: rgba(0, 0, 0, 0.05);
+}
+.ui.cards > .card > .image > img,
+.ui.card > .image > img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0.2857rem 0.2857rem 0em 0em;
+  border: none;
+}
+.ui.cards > .card > .image:only-child > img,
+.ui.card > .image:only-child > img {
+  border-radius: 0.2857rem;
+}
+
+/*--------------
+     Content
+---------------*/
+
+.ui.cards > .card > .content,
+.ui.card > .content {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  background: none;
+  margin: 0em;
+  padding: 1em 1em;
+  box-shadow: none;
+  font-size: 1em;
+  border: none;
+  border-radius: 0em;
+}
+.ui.cards > .card > .content:after,
+.ui.card > .content:after {
+  display: block;
+  content: ' ';
+  height: 0px;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+.ui.cards > .card > .content > .header,
+.ui.card > .content > .header {
+  display: block;
+  margin: 0em;
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  color: rgba(0, 0, 0, 0.85);
+}
+
+/* Default Header Size */
+.ui.cards > .card > .content > .header:not(.ui),
+.ui.card > .content > .header:not(.ui) {
+  font-weight: bold;
+  font-size: 1.2em;
+  margin-top: -0.165em;
+  line-height: 1.33em;
+}
+.ui.cards > .card > .content > .meta + .description,
+.ui.cards > .card > .content > .header + .description,
+.ui.card > .content > .meta + .description,
+.ui.card > .content > .header + .description {
+  margin-top: 0.5em;
+}
+
+/*--------------
+     Floated
+---------------*/
+
+.ui.cards > .card [class*="left floated"],
+.ui.card [class*="left floated"] {
+  float: left;
+}
+.ui.cards > .card [class*="right floated"],
+.ui.card [class*="right floated"] {
+  float: right;
+}
+
+/*--------------
+     Aligned
+---------------*/
+
+.ui.cards > .card [class*="left aligned"],
+.ui.card [class*="left aligned"] {
+  text-align: left;
+}
+.ui.cards > .card [class*="center aligned"],
+.ui.card [class*="center aligned"] {
+  text-align: center;
+}
+.ui.cards > .card [class*="right aligned"],
+.ui.card [class*="right aligned"] {
+  text-align: right;
+}
+
+/*--------------
+  Content Image
+---------------*/
+
+.ui.cards > .card .content img,
+.ui.card .content img {
+  display: inline-block;
+  vertical-align: middle;
+  width: auto;
+}
+.ui.cards > .card img.avatar,
+.ui.cards > .card .avatar img,
+.ui.card img.avatar,
+.ui.card .avatar img {
+  width: 2.5em;
+  height: 2.5em;
+  border-radius: 500rem;
+}
+
+/*--------------
+   Description
+---------------*/
+
+.ui.cards > .card > .content > .description,
+.ui.card > .content > .description {
+  clear: both;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+/*--------------
+    Paragraph
+---------------*/
+
+.ui.cards > .card > .content p,
+.ui.card > .content p {
+  margin: 0em 0em 0.5em;
+}
+.ui.cards > .card > .content p:last-child,
+.ui.card > .content p:last-child {
+  margin-bottom: 0em;
+}
+
+/*--------------
+      Meta
+---------------*/
+
+.ui.cards > .card .meta,
+.ui.card .meta {
+  font-size: 0.9em;
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.cards > .card .meta *,
+.ui.card .meta * {
+  margin-right: 0.3em;
+}
+.ui.cards > .card .meta :last-child,
+.ui.card .meta :last-child {
+  margin-right: 0em;
+}
+.ui.cards > .card .meta [class*="right floated"],
+.ui.card .meta [class*="right floated"] {
+  margin-right: 0em;
+  margin-left: 0.3em;
+}
+
+/*--------------
+      Links
+---------------*/
+
+
+/* Generic */
+.ui.cards > .card > .content a:not(.ui),
+.ui.card > .content a:not(.ui) {
+  color: '';
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
+}
+.ui.cards > .card > .content a:not(.ui):hover,
+.ui.card > .content a:not(.ui):hover {
+  color: '';
+}
+
+/* Header */
+.ui.cards > .card > .content > a.header,
+.ui.card > .content > a.header {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ui.cards > .card > .content > a.header:hover,
+.ui.card > .content > a.header:hover {
+  color: #00b2f3;
+}
+
+/* Meta */
+.ui.cards > .card .meta > a:not(.ui),
+.ui.card .meta > a:not(.ui) {
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.cards > .card .meta > a:not(.ui):hover,
+.ui.card .meta > a:not(.ui):hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/*--------------
+     Buttons
+---------------*/
+
+.ui.cards > .card > .buttons:last-child,
+.ui.card > .buttons:last-child,
+.ui.cards > .card > .button:last-child,
+.ui.card > .button:last-child {
+  margin: 0em 0em -1px;
+  width: 100%;
+}
+
+/*--------------
+      Dimmer
+---------------*/
+
+.ui.cards > .card .dimmer,
+.ui.card .dimmer {
+  background: '';
+  z-index: 10;
+}
+
+/*--------------
+     Labels
+---------------*/
+
+
+/*-----Star----- */
+
+
+/* Icon */
+.ui.cards > .card > .content .star.icon,
+.ui.card > .content .star.icon {
+  cursor: pointer;
+  opacity: 0.75;
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
+}
+.ui.cards > .card > .content .star.icon:hover,
+.ui.card > .content .star.icon:hover {
+  opacity: 1;
+  color: #ffb70a;
+}
+.ui.cards > .card > .content .active.star.icon,
+.ui.card > .content .active.star.icon {
+  color: #ffe623;
+}
+
+/*-----Like----- */
+
+
+/* Icon */
+.ui.cards > .card > .content .like.icon,
+.ui.card > .content .like.icon {
+  cursor: pointer;
+  opacity: 0.75;
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
+}
+.ui.cards > .card > .content .like.icon:hover,
+.ui.card > .content .like.icon:hover {
+  opacity: 1;
+  color: #ff2733;
+}
+.ui.cards > .card > .content .active.like.icon,
+.ui.card > .content .active.like.icon {
+  color: #ff2733;
+}
+
+/*----------------
+  Extra Content
+-----------------*/
+
+.ui.cards > .card > .extra,
+.ui.card > .extra {
+  max-width: 100%;
+  min-height: 0em !important;
+  -webkit-box-flex: 0;
+  -webkit-flex-grow: 0;
+      -ms-flex-positive: 0;
+          flex-grow: 0;
+  position: static;
+  background: none;
+  width: auto;
+  margin: 0em 0em;
+  padding: 0.75em 1em;
+  top: 0em;
+  left: 0em;
+  color: rgba(0, 0, 0, 0.4);
+  box-shadow: none;
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+.ui.cards > .card > .extra a:not(.ui),
+.ui.card > .extra a:not(.ui) {
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.cards > .card > .extra a:not(.ui):hover,
+.ui.card > .extra a:not(.ui):hover {
+  color: #00b2f3;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*-------------------
+        Fluid
+--------------------*/
+
+.ui.fluid.card {
+  width: 100%;
+  max-width: 9999px;
+}
+
+/*-------------------
+        Link
+--------------------*/
+
+.ui.cards a.card:hover,
+.ui.link.cards .card:hover,
+a.ui.card:hover,
+.ui.link.card:hover {
+  cursor: pointer;
+  z-index: 5;
+  background: '';
+  border: none;
+  box-shadow: 0px 3px 0px 0px #bebebf, 0px 0px 0px 1px rgba(39, 41, 43, 0.3);
+}
+
+/*-------------------
+       Colors
+--------------------*/
+
+.ui.black.cards > .card,
+.ui.cards > .black.card,
+.ui.black.card {
+  box-shadow: 0px 3px 0px 0px #1b1c1d, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.blue.cards > .card,
+.ui.cards > .blue.card,
+.ui.blue.card {
+  box-shadow: 0px 3px 0px 0px #3b83c0, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.green.cards > .card,
+.ui.cards > .green.card,
+.ui.green.card {
+  box-shadow: 0px 3px 0px 0px #5bbd72, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.orange.cards > .card,
+.ui.cards > .orange.card,
+.ui.orange.card {
+  box-shadow: 0px 3px 0px 0px #e07b53, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.pink.cards > .card,
+.ui.cards > .pink.card,
+.ui.pink.card {
+  box-shadow: 0px 3px 0px 0px #d9499a, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.purple.cards > .card,
+.ui.cards > .purple.card,
+.ui.purple.card {
+  box-shadow: 0px 3px 0px 0px #564f8a, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.red.cards > .card,
+.ui.cards > .red.card,
+.ui.red.card {
+  box-shadow: 0px 3px 0px 0px #d95c5c, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.teal.cards > .card,
+.ui.cards > .teal.card,
+.ui.teal.card {
+  box-shadow: 0px 3px 0px 0px #00b5ad, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.yellow.cards > .card,
+.ui.cards > .yellow.card,
+.ui.yellow.card {
+  box-shadow: 0px 3px 0px 0px #f2c61f, 0px 0px 0px 1px #d4d4d5;
+}
+
+/* Hover */
+.ui.black.cards > .card:hover,
+.ui.cards > .black.card:hover,
+.ui.black.card:hover {
+  box-shadow: 0px 3px 0px 0px #1b1c1d, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.blue.cards > .card:hover,
+.ui.cards > .blue.card:hover,
+.ui.blue.card:hover {
+  box-shadow: 0px 3px 0px 0px #458ac6, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.green.cards > .card:hover,
+.ui.cards > .green.card:hover,
+.ui.green.card:hover {
+  box-shadow: 0px 3px 0px 0px #66c17b, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.orange.cards > .card:hover,
+.ui.cards > .orange.card:hover,
+.ui.orange.card:hover {
+  box-shadow: 0px 3px 0px 0px #e28560, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.pink.cards > .card:hover,
+.ui.cards > .pink.card:hover,
+.ui.pink.card:hover {
+  box-shadow: 0px 3px 0px 0px #dc56a1, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.purple.cards > .card:hover,
+.ui.cards > .purple.card:hover,
+.ui.purple.card:hover {
+  box-shadow: 0px 3px 0px 0px #5c5594, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.red.cards > .card:hover,
+.ui.cards > .red.card:hover,
+.ui.red.card:hover {
+  box-shadow: 0px 3px 0px 0px #dc6868, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.teal.cards > .card:hover,
+.ui.cards > .teal.card:hover,
+.ui.teal.card:hover {
+  box-shadow: 0px 3px 0px 0px #00c4bc, 0px 0px 0px 1px #d4d4d5;
+}
+.ui.yellow.cards > .card:hover,
+.ui.cards > .yellow.card:hover,
+.ui.yellow.card:hover {
+  box-shadow: 0px 3px 0px 0px #f3ca2d, 0px 0px 0px 1px #d4d4d5;
+}
+
+/*--------------
+   Card Count
+---------------*/
+
+.ui.one.cards {
+  margin-left: 0em;
+  margin-right: 0em;
+}
+.ui.one.cards > .card {
+  width: 100%;
+}
+.ui.two.cards {
+  margin-left: -1em;
+  margin-right: -1em;
+}
+.ui.two.cards > .card {
+  width: -webkit-calc( 50%  -  2em );
+  width: calc( 50%  -  2em );
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.ui.two.cards > .card:nth-child(2n+1) {
+  clear: left;
+}
+.ui.three.cards {
+  margin-left: -1em;
+  margin-right: -1em;
+}
+.ui.three.cards > .card {
+  width: -webkit-calc( 33.33333333%  -  2em );
+  width: calc( 33.33333333%  -  2em );
+  margin-left: 1em;
+  margin-right: 1em;
+}
+.ui.three.cards > .card:nth-child(3n+1) {
+  clear: left;
+}
+.ui.four.cards {
+  margin-left: -0.75em;
+  margin-right: -0.75em;
+}
+.ui.four.cards > .card {
+  width: -webkit-calc( 25%  -  1.5em );
+  width: calc( 25%  -  1.5em );
+  margin-left: 0.75em;
+  margin-right: 0.75em;
+}
+.ui.four.cards > .card:nth-child(4n+1) {
+  clear: left;
+}
+.ui.five.cards {
+  margin-left: -0.75em;
+  margin-right: -0.75em;
+}
+.ui.five.cards > .card {
+  width: -webkit-calc( 20%  -  1.5em );
+  width: calc( 20%  -  1.5em );
+  margin-left: 0.75em;
+  margin-right: 0.75em;
+}
+.ui.five.cards > .card:nth-child(5n+1) {
+  clear: left;
+}
+.ui.six.cards {
+  margin-left: -0.75em;
+  margin-right: -0.75em;
+}
+.ui.six.cards > .card {
+  width: -webkit-calc( 16.66666667%  -  1.5em );
+  width: calc( 16.66666667%  -  1.5em );
+  margin-left: 0.75em;
+  margin-right: 0.75em;
+}
+.ui.six.cards > .card:nth-child(6n+1) {
+  clear: left;
+}
+.ui.seven.cards {
+  margin-left: -0.5em;
+  margin-right: -0.5em;
+}
+.ui.seven.cards > .card {
+  width: -webkit-calc( 14.28571429%  -  1em );
+  width: calc( 14.28571429%  -  1em );
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
+.ui.seven.cards > .card:nth-child(7n+1) {
+  clear: left;
+}
+.ui.eight.cards {
+  margin-left: -0.5em;
+  margin-right: -0.5em;
+}
+.ui.eight.cards > .card {
+  width: -webkit-calc( 12.5%  -  1em );
+  width: calc( 12.5%  -  1em );
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  font-size: 11px;
+}
+.ui.eight.cards > .card:nth-child(8n+1) {
+  clear: left;
+}
+.ui.nine.cards {
+  margin-left: -0.5em;
+  margin-right: -0.5em;
+}
+.ui.nine.cards > .card {
+  width: -webkit-calc( 11.11111111%  -  1em );
+  width: calc( 11.11111111%  -  1em );
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+  font-size: 10px;
+}
+.ui.nine.cards > .card:nth-child(9n+1) {
+  clear: left;
+}
+.ui.ten.cards {
+  margin-left: -0.5em;
+  margin-right: -0.5em;
+}
+.ui.ten.cards > .card {
+  width: -webkit-calc( 10%  -  1em );
+  width: calc( 10%  -  1em );
+  margin-left: 0.5em;
+  margin-right: 0.5em;
+}
+.ui.ten.cards > .card:nth-child(10n+1) {
+  clear: left;
+}
+
+/*-------------------
+      Doubling
+--------------------*/
+
+
+/* Mobily Only */
+@media only screen and (max-width: 767px) {
+  .ui.two.doubling.cards {
+    margin-left: 0em;
+    margin-right: 0em;
+  }
+  .ui.two.doubling.cards .card {
+    width: 100%;
+    margin-left: 0em;
+    margin-right: 0em;
+  }
+  .ui.three.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.three.doubling.cards .card {
+    width: -webkit-calc( 50%  -  2em );
+    width: calc( 50%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+  .ui.four.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.four.doubling.cards .card {
+    width: -webkit-calc( 50%  -  2em );
+    width: calc( 50%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+  .ui.five.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.five.doubling.cards .card {
+    width: -webkit-calc( 50%  -  2em );
+    width: calc( 50%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+  .ui.six.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.six.doubling.cards .card {
+    width: -webkit-calc( 50%  -  2em );
+    width: calc( 50%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+  .ui.seven.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.seven.doubling.cards .card {
+    width: -webkit-calc( 33.33333333%  -  2em );
+    width: calc( 33.33333333%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+  .ui.eight.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.eight.doubling.cards .card {
+    width: -webkit-calc( 33.33333333%  -  2em );
+    width: calc( 33.33333333%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+  .ui.nine.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.nine.doubling.cards .card {
+    width: -webkit-calc( 33.33333333%  -  2em );
+    width: calc( 33.33333333%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+  .ui.ten.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.ten.doubling.cards .card {
+    width: -webkit-calc( 33.33333333%  -  2em );
+    width: calc( 33.33333333%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+}
+
+/* Tablet Only */
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .ui.two.doubling.cards {
+    margin-left: 0em;
+    margin-right: 0em;
+  }
+  .ui.two.doubling.cards .card {
+    width: 100%;
+    margin-left: 0em;
+    margin-right: 0em;
+  }
+  .ui.three.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.three.doubling.cards .card {
+    width: -webkit-calc( 50%  -  2em );
+    width: calc( 50%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+  .ui.four.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.four.doubling.cards .card {
+    width: -webkit-calc( 50%  -  2em );
+    width: calc( 50%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+  .ui.five.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.five.doubling.cards .card {
+    width: -webkit-calc( 33.33333333%  -  2em );
+    width: calc( 33.33333333%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+  .ui.six.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.six.doubling.cards .card {
+    width: -webkit-calc( 33.33333333%  -  2em );
+    width: calc( 33.33333333%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+  .ui.eight.doubling.cards {
+    margin-left: -1em;
+    margin-right: -1em;
+  }
+  .ui.eight.doubling.cards .card {
+    width: -webkit-calc( 33.33333333%  -  2em );
+    width: calc( 33.33333333%  -  2em );
+    margin-left: 1em;
+    margin-right: 1em;
+  }
+  .ui.eight.doubling.cards {
+    margin-left: -0.75em;
+    margin-right: -0.75em;
+  }
+  .ui.eight.doubling.cards .card {
+    width: -webkit-calc( 25%  -  1.5em );
+    width: calc( 25%  -  1.5em );
+    margin-left: 0.75em;
+    margin-right: 0.75em;
+  }
+  .ui.nine.doubling.cards {
+    margin-left: -0.75em;
+    margin-right: -0.75em;
+  }
+  .ui.nine.doubling.cards .card {
+    width: -webkit-calc( 25%  -  1.5em );
+    width: calc( 25%  -  1.5em );
+    margin-left: 0.75em;
+    margin-right: 0.75em;
+  }
+  .ui.ten.doubling.cards {
+    margin-left: -0.75em;
+    margin-right: -0.75em;
+  }
+  .ui.ten.doubling.cards .card {
+    width: -webkit-calc( 20%  -  1.5em );
+    width: calc( 20%  -  1.5em );
+    margin-left: 0.75em;
+    margin-right: 0.75em;
+  }
+}
+
+/*-------------------
+      Stackable
+--------------------*/
+
+@media only screen and (max-width: 767px) {
+  .ui.stackable.cards {
+    display: block !important;
+  }
+  .ui.stackable.cards .card:first-child {
+    margin-top: 0em !important;
+  }
+  .ui.stackable.cards > .card {
+    display: block !important;
+    height: auto !important;
+    margin: 1em 1em;
+    padding: 0 !important;
+    width: -webkit-calc( 100%  -  2em ) !important;
+    width: calc( 100%  -  2em ) !important;
+  }
+}
+
+/*--------------
+      Size
+---------------*/
+
+.ui.cards > .card {
+  font-size: 1em;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+    User Variable Overrides
+*******************************/
+

web/semantic/dist/components/checkbox.js

@@ -0,0 +1,509 @@
+/*!
+ * # Semantic UI 1.11.4 - Checkbox
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ( $, window, document, undefined ) {
+
+"use strict";
+
+$.fn.checkbox = function(parameters) {
+  var
+    $allModules    = $(this),
+    moduleSelector = $allModules.selector || '',
+
+    time           = new Date().getTime(),
+    performance    = [],
+
+    query          = arguments[0],
+    methodInvoked  = (typeof query == 'string'),
+    queryArguments = [].slice.call(arguments, 1),
+    returnedValue
+  ;
+
+  $allModules
+    .each(function() {
+      var
+        settings        = $.extend(true, {}, $.fn.checkbox.settings, parameters),
+
+        className       = settings.className,
+        namespace       = settings.namespace,
+        selector        = settings.selector,
+        error           = settings.error,
+
+        eventNamespace  = '.' + namespace,
+        moduleNamespace = 'module-' + namespace,
+
+        $module         = $(this),
+        $label          = $(this).find(selector.label).first(),
+        $input          = $(this).find(selector.input),
+
+        instance        = $module.data(moduleNamespace),
+
+        observer,
+        element         = this,
+        module
+      ;
+
+      module      = {
+
+        initialize: function() {
+          module.verbose('Initializing checkbox', settings);
+
+          module.create.label();
+          module.add.events();
+
+          if( module.is.checked() ) {
+            module.set.checked();
+            if(settings.fireOnInit) {
+              settings.onChecked.call($input.get());
+            }
+          }
+          else {
+            module.remove.checked();
+            if(settings.fireOnInit) {
+              settings.onUnchecked.call($input.get());
+            }
+          }
+          module.observeChanges();
+
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          module.verbose('Storing instance of module', module);
+          instance = module;
+          $module
+            .data(moduleNamespace, module)
+          ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying module');
+          module.remove.events();
+          $module
+            .removeData(moduleNamespace)
+          ;
+        },
+
+        refresh: function() {
+          $module = $(this);
+          $label  = $(this).find(selector.label).first();
+          $input  = $(this).find(selector.input);
+        },
+
+        observeChanges: function() {
+          if('MutationObserver' in window) {
+            observer = new MutationObserver(function(mutations) {
+              module.debug('DOM tree modified, updating selector cache');
+              module.refresh();
+            });
+            observer.observe(element, {
+              childList : true,
+              subtree   : true
+            });
+            module.debug('Setting up mutation observer', observer);
+          }
+        },
+
+        attachEvents: function(selector, event) {
+          var
+            $element = $(selector)
+          ;
+          event = $.isFunction(module[event])
+            ? module[event]
+            : module.toggle
+          ;
+          if($element.length > 0) {
+            module.debug('Attaching checkbox events to element', selector, event);
+            $element
+              .on('click' + eventNamespace, event)
+            ;
+          }
+          else {
+            module.error(error.notFound);
+          }
+        },
+
+        event: {
+          keydown: function(event) {
+            var
+              key     = event.which,
+              keyCode = {
+                enter  : 13,
+                space  : 32,
+                escape : 27
+              }
+            ;
+            if( key == keyCode.escape) {
+              module.verbose('Escape key pressed blurring field');
+              $module
+                .blur()
+              ;
+            }
+            if(!event.ctrlKey && (key == keyCode.enter || key == keyCode.space)) {
+              module.verbose('Enter key pressed, toggling checkbox');
+              module.toggle.call(this);
+              event.preventDefault();
+            }
+          }
+        },
+
+        is: {
+          radio: function() {
+            return $module.hasClass(className.radio);
+          },
+          checked: function() {
+            return $input.prop('checked') !== undefined && $input.prop('checked');
+          },
+          unchecked: function() {
+            return !module.is.checked();
+          }
+        },
+
+        can: {
+          change: function() {
+            return !( $module.hasClass(className.disabled) || $module.hasClass(className.readOnly) || $input.prop('disabled') );
+          },
+          uncheck: function() {
+            return (typeof settings.uncheckable === 'boolean')
+              ? settings.uncheckable
+              : !module.is.radio()
+            ;
+          }
+        },
+
+        set: {
+          checked: function() {
+            $module.addClass(className.checked);
+          },
+          tab: function() {
+            if( $input.attr('tabindex') === undefined) {
+              $input
+                .attr('tabindex', 0)
+              ;
+            }
+          }
+        },
+
+        create: {
+          label: function() {
+            if($input.prevAll(selector.label).length > 0) {
+              $input.prev(selector.label).detach().insertAfter($input);
+              module.debug('Moving existing label', $label);
+            }
+            else if( !module.has.label() ) {
+              $label = $('<label>').insertAfter($input);
+              module.debug('Creating label', $label);
+            }
+          }
+        },
+
+        has: {
+          label: function() {
+            return ($label.length > 0);
+          }
+        },
+
+        add: {
+          events: function() {
+            module.verbose('Attaching checkbox events');
+            $module
+              .on('click'   + eventNamespace, module.toggle)
+              .on('keydown' + eventNamespace, selector.input, module.event.keydown)
+            ;
+          }
+        },
+
+        remove: {
+          checked: function() {
+            $module.removeClass(className.checked);
+          },
+          events: function() {
+            module.debug('Removing events');
+            $module
+              .off(eventNamespace)
+              .removeData(moduleNamespace)
+            ;
+            $input
+              .off(eventNamespace, module.event.keydown)
+            ;
+            $label
+              .off(eventNamespace)
+            ;
+          }
+        },
+
+        enable: function() {
+          module.debug('Enabling checkbox functionality');
+          $module.removeClass(className.disabled);
+          $input.prop('disabled', false);
+          settings.onEnabled.call($input.get());
+        },
+
+        disable: function() {
+          module.debug('Disabling checkbox functionality');
+          $module.addClass(className.disabled);
+          $input.prop('disabled', 'disabled');
+          settings.onDisabled.call($input.get());
+        },
+
+        check: function() {
+          module.debug('Enabling checkbox', $input);
+          $input
+            .prop('checked', true)
+            .trigger('change')
+          ;
+          module.set.checked();
+          $input.trigger('blur');
+          settings.onChange.call($input.get());
+          settings.onChecked.call($input.get());
+        },
+
+        uncheck: function() {
+          module.debug('Disabling checkbox');
+          $input
+            .prop('checked', false)
+            .trigger('change')
+          ;
+          module.remove.checked();
+          $input.trigger('blur');
+          settings.onChange.call($input.get());
+          settings.onUnchecked.call($input.get());
+        },
+
+        toggle: function(event) {
+          if( !module.can.change() ) {
+            console.log(module.can.change());
+            module.debug('Checkbox is read-only or disabled, ignoring toggle');
+            return;
+          }
+          module.verbose('Determining new checkbox state');
+          if( module.is.unchecked() ) {
+            module.check();
+          }
+          else if( module.is.checked() && module.can.uncheck() ) {
+            module.uncheck();
+          }
+        },
+        setting: function(name, value) {
+          module.debug('Changing setting', name, value);
+          if( $.isPlainObject(name) ) {
+            $.extend(true, settings, name);
+          }
+          else if(value !== undefined) {
+            settings[name] = value;
+          }
+          else {
+            return settings[name];
+          }
+        },
+        internal: function(name, value) {
+          if( $.isPlainObject(name) ) {
+            $.extend(true, module, name);
+          }
+          else if(value !== undefined) {
+            module[name] = value;
+          }
+          else {
+            return module[name];
+          }
+        },
+        debug: function() {
+          if(settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+              module.debug.apply(console, arguments);
+            }
+          }
+        },
+        verbose: function() {
+          if(settings.verbose && settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+              module.verbose.apply(console, arguments);
+            }
+          }
+        },
+        error: function() {
+          module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+          module.error.apply(console, arguments);
+        },
+        performance: {
+          log: function(message) {
+            var
+              currentTime,
+              executionTime,
+              previousTime
+            ;
+            if(settings.performance) {
+              currentTime   = new Date().getTime();
+              previousTime  = time || currentTime;
+              executionTime = currentTime - previousTime;
+              time          = currentTime;
+              performance.push({
+                'Name'           : message[0],
+                'Arguments'      : [].slice.call(message, 1) || '',
+                'Element'        : element,
+                'Execution Time' : executionTime
+              });
+            }
+            clearTimeout(module.performance.timer);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
+            var
+              title = settings.name + ':',
+              totalTime = 0
+            ;
+            time = false;
+            clearTimeout(module.performance.timer);
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
+            }
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+              console.groupCollapsed(title);
+              if(console.table) {
+                console.table(performance);
+              }
+              else {
+                $.each(performance, function(index, data) {
+                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+                });
+              }
+              console.groupEnd();
+            }
+            performance = [];
+          }
+        },
+        invoke: function(query, passedArguments, context) {
+          var
+            object = instance,
+            maxDepth,
+            found,
+            response
+          ;
+          passedArguments = passedArguments || queryArguments;
+          context         = element         || context;
+          if(typeof query == 'string' && object !== undefined) {
+            query    = query.split(/[\. ]/);
+            maxDepth = query.length - 1;
+            $.each(query, function(depth, value) {
+              var camelCaseValue = (depth != maxDepth)
+                ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+                : query
+              ;
+              if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+                object = object[camelCaseValue];
+              }
+              else if( object[camelCaseValue] !== undefined ) {
+                found = object[camelCaseValue];
+                return false;
+              }
+              else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+                object = object[value];
+              }
+              else if( object[value] !== undefined ) {
+                found = object[value];
+                return false;
+              }
+              else {
+                module.error(error.method, query);
+                return false;
+              }
+            });
+          }
+          if ( $.isFunction( found ) ) {
+            response = found.apply(context, passedArguments);
+          }
+          else if(found !== undefined) {
+            response = found;
+          }
+          if($.isArray(returnedValue)) {
+            returnedValue.push(response);
+          }
+          else if(returnedValue !== undefined) {
+            returnedValue = [returnedValue, response];
+          }
+          else if(response !== undefined) {
+            returnedValue = response;
+          }
+          return found;
+        }
+      };
+
+      if(methodInvoked) {
+        if(instance === undefined) {
+          module.initialize();
+        }
+        module.invoke(query);
+      }
+      else {
+        if(instance !== undefined) {
+          instance.invoke('destroy');
+        }
+        module.initialize();
+      }
+    })
+  ;
+
+  return (returnedValue !== undefined)
+    ? returnedValue
+    : this
+  ;
+};
+
+$.fn.checkbox.settings = {
+
+  name        : 'Checkbox',
+  namespace   : 'checkbox',
+
+  debug       : false,
+  verbose     : true,
+  performance : true,
+
+  // delegated event context
+  uncheckable : 'auto',
+  fireOnInit  : true,
+
+  onChange    : function(){},
+  onChecked   : function(){},
+  onUnchecked : function(){},
+  onEnabled   : function(){},
+  onDisabled  : function(){},
+
+  className   : {
+    checked  : 'checked',
+    disabled : 'disabled',
+    radio    : 'radio',
+    readOnly : 'read-only'
+  },
+
+  error     : {
+    method   : 'The method you called is not defined'
+  },
+
+  selector : {
+    input  : 'input[type="checkbox"], input[type="radio"]',
+    label  : 'label'
+  }
+
+};
+
+})( jQuery, window , document );

web/semantic/dist/components/comment.css

@@ -0,0 +1,259 @@
+/*!
+ * # Semantic UI 1.11.4 - Comment
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributorss
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Standard
+*******************************/
+
+
+/*--------------
+    Comments
+---------------*/
+
+.ui.comments {
+  margin: 1.5em 0em;
+  max-width: 650px;
+}
+.ui.comments:first-child {
+  margin-top: 0em;
+}
+.ui.comments:last-child {
+  margin-bottom: 0em;
+}
+
+/*--------------
+     Comment
+---------------*/
+
+.ui.comments .comment {
+  position: relative;
+  background: none;
+  margin: 0.5em 0em 0em;
+  padding: 0.5em 0em 0em;
+  border: none;
+  border-top: none;
+  line-height: 1.2;
+}
+.ui.comments .comment:first-child {
+  margin-top: 0em;
+  padding-top: 0em;
+}
+
+/*--------------------
+    Nested Comments
+---------------------*/
+
+.ui.comments .comment .comments {
+  margin: 0em 0em 0.5em 0.5em;
+  padding: 1em 0em 1em 1em;
+}
+.ui.comments .comment .comments:before {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+.ui.comments .comment .comments .comment {
+  border: none;
+  border-top: none;
+  background: none;
+}
+
+/*--------------
+     Avatar
+---------------*/
+
+.ui.comments .comment .avatar {
+  display: block;
+  width: 2.5em;
+  height: auto;
+  float: left;
+  margin: 0.2em 0em 0em;
+}
+.ui.comments .comment img.avatar,
+.ui.comments .comment .avatar img {
+  display: block;
+  margin: 0em auto;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.25rem;
+}
+
+/*--------------
+     Content
+---------------*/
+
+.ui.comments .comment > .content {
+  display: block;
+}
+
+/* If there is an avatar move content over */
+.ui.comments .comment > .avatar ~ .content {
+  margin-left: 3.5em;
+}
+
+/*--------------
+     Author
+---------------*/
+
+.ui.comments .comment .author {
+  font-size: 1em;
+  color: rgba(0, 0, 0, 0.8);
+  font-weight: bold;
+}
+.ui.comments .comment a.author {
+  cursor: pointer;
+}
+.ui.comments .comment a.author:hover {
+  color: #00b2f3;
+}
+
+/*--------------
+     Metadata
+---------------*/
+
+.ui.comments .comment .metadata {
+  display: inline-block;
+  margin-left: 0.5em;
+  color: rgba(0, 0, 0, 0.4);
+  font-size: 0.875em;
+}
+.ui.comments .comment .metadata > * {
+  display: inline-block;
+  margin: 0em 0.5em 0em 0em;
+}
+.ui.comments .comment .metadata > :last-child {
+  margin-right: 0em;
+}
+
+/*--------------------
+     Comment Text
+---------------------*/
+
+.ui.comments .comment .text {
+  margin: 0.25em 0em 0.5em;
+  font-size: 1em;
+  word-wrap: break-word;
+  color: rgba(0, 0, 0, 0.8);
+  line-height: 1.3;
+}
+
+/*--------------------
+     User Actions
+---------------------*/
+
+.ui.comments .comment .actions {
+  font-size: 0.875em;
+}
+.ui.comments .comment .actions a {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0em 0.75em 0em 0em;
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.comments .comment .actions a:last-child {
+  margin-right: 0em;
+}
+.ui.comments .comment .actions a.active,
+.ui.comments .comment .actions a:hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/*--------------------
+      Reply Form
+---------------------*/
+
+.ui.comments > .reply.form {
+  margin-top: 1em;
+}
+.ui.comments .comment .reply.form {
+  width: 100%;
+  margin-top: 1em;
+}
+.ui.comments .reply.form textarea {
+  font-size: 1em;
+  height: 12em;
+}
+
+
+/*******************************
+            State
+*******************************/
+
+.ui.collapsed.comments,
+.ui.comments .collapsed.comments,
+.ui.comments .collapsed.comment {
+  display: none;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------------
+        Threaded
+---------------------*/
+
+.ui.threaded.comments .comment .comments {
+  margin: -1.5em 0 -1em 1.25em;
+  padding: 3em 0em 2em 2.25em;
+  box-shadow: -1px 0px 0px rgba(39, 41, 43, 0.15);
+}
+
+/*--------------------
+        Minimal
+---------------------*/
+
+.ui.minimal.comments .comment .actions {
+  opacity: 0;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  left: auto;
+  -webkit-transition: opacity 0.2s ease;
+          transition: opacity 0.2s ease;
+  -webkit-transition-delay: 0.1s;
+          transition-delay: 0.1s;
+}
+.ui.minimal.comments .comment > .content:hover > .actions {
+  opacity: 1;
+}
+
+/*--------------------
+       Sizes
+---------------------*/
+
+.ui.small.comments {
+  font-size: 0.9em;
+}
+.ui.comments {
+  font-size: 1em;
+}
+.ui.large.comments {
+  font-size: 1.1em;
+}
+.ui.huge.comments {
+  font-size: 1.2em;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+    User Variable Overrides
+*******************************/
+

web/semantic/dist/components/comment.min.css

@@ -0,0 +1,10 @@
+/*!
+ * # Semantic UI 1.11.4 - Comment
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributorss
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */.ui.comments{margin:1.5em 0;max-width:650px}.ui.comments:first-child{margin-top:0}.ui.comments:last-child{margin-bottom:0}.ui.comments .comment{position:relative;background:0 0;margin:.5em 0 0;padding:.5em 0 0;border:none;border-top:none;line-height:1.2}.ui.comments .comment:first-child{margin-top:0;padding-top:0}.ui.comments .comment .comments{margin:0 0 .5em .5em;padding:1em 0 1em 1em}.ui.comments .comment .comments:before{position:absolute;top:0;left:0}.ui.comments .comment .comments .comment{border:none;border-top:none;background:0 0}.ui.comments .comment .avatar{display:block;width:2.5em;height:auto;float:left;margin:.2em 0 0}.ui.comments .comment .avatar img,.ui.comments .comment img.avatar{display:block;margin:0 auto;width:100%;height:100%;border-radius:.25rem}.ui.comments .comment>.content{display:block}.ui.comments .comment>.avatar~.content{margin-left:3.5em}.ui.comments .comment .author{font-size:1em;color:rgba(0,0,0,.8);font-weight:700}.ui.comments .comment a.author{cursor:pointer}.ui.comments .comment a.author:hover{color:#00b2f3}.ui.comments .comment .metadata{display:inline-block;margin-left:.5em;color:rgba(0,0,0,.4);font-size:.875em}.ui.comments .comment .metadata>*{display:inline-block;margin:0 .5em 0 0}.ui.comments .comment .metadata>:last-child{margin-right:0}.ui.comments .comment .text{margin:.25em 0 .5em;font-size:1em;word-wrap:break-word;color:rgba(0,0,0,.8);line-height:1.3}.ui.comments .comment .actions{font-size:.875em}.ui.comments .comment .actions a{cursor:pointer;display:inline-block;margin:0 .75em 0 0;color:rgba(0,0,0,.4)}.ui.comments .comment .actions a:last-child{margin-right:0}.ui.comments .comment .actions a.active,.ui.comments .comment .actions a:hover{color:rgba(0,0,0,.8)}.ui.comments>.reply.form{margin-top:1em}.ui.comments .comment .reply.form{width:100%;margin-top:1em}.ui.comments .reply.form textarea{font-size:1em;height:12em}.ui.collapsed.comments,.ui.comments .collapsed.comment,.ui.comments .collapsed.comments{display:none}.ui.threaded.comments .comment .comments{margin:-1.5em 0 -1em 1.25em;padding:3em 0 2em 2.25em;box-shadow:-1px 0 0 rgba(39,41,43,.15)}.ui.minimal.comments .comment .actions{opacity:0;position:absolute;top:0;right:0;left:auto;-webkit-transition:opacity .2s ease;transition:opacity .2s ease;-webkit-transition-delay:.1s;transition-delay:.1s}.ui.minimal.comments .comment>.content:hover>.actions{opacity:1}.ui.small.comments{font-size:.9em}.ui.comments{font-size:1em}.ui.large.comments{font-size:1.1em}.ui.huge.comments{font-size:1.2em}

web/semantic/dist/components/dimmer.css

@@ -0,0 +1,186 @@
+/*!
+ * # Semantic UI 1.11.4 - Dimmer
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Dimmer
+*******************************/
+
+.dimmable {
+  position: relative;
+}
+.ui.dimmer {
+  display: none;
+  position: absolute;
+  top: 0em !important;
+  left: 0em !important;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  vertical-align: middle;
+  background: rgba(0, 0, 0, 0.85);
+  opacity: 0;
+  line-height: 1;
+  -webkit-animation-fill-mode: both;
+          animation-fill-mode: both;
+  -webkit-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+  -webkit-transition: background-color 0.5s linear;
+          transition: background-color 0.5s linear;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  will-change: opacity;
+  z-index: 1000;
+}
+
+/* Dimmer Content */
+.ui.dimmer > .content {
+  width: 100%;
+  height: 100%;
+  display: table;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+.ui.dimmer > .content > div {
+  display: table-cell;
+  vertical-align: middle;
+  color: #ffffff;
+}
+
+/* Loose Coupling */
+.ui.segment > .ui.dimmer {
+  border-radius: inherit !important;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+.animating.dimmable:not(body),
+.dimmed.dimmable:not(body) {
+  overflow: hidden;
+}
+.dimmed.dimmable > .ui.animating.dimmer,
+.dimmed.dimmable > .ui.visible.dimmer,
+.ui.active.dimmer {
+  display: block;
+  opacity: 1;
+}
+.ui.disabled.dimmer {
+  width: 0 !important;
+  height: 0 !important;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------
+      Page
+---------------*/
+
+.ui.page.dimmer {
+  position: fixed;
+  -webkit-transform-style: '';
+          transform-style: '';
+  -webkit-perspective: 2000px;
+          perspective: 2000px;
+  -webkit-transform-origin: center center;
+      -ms-transform-origin: center center;
+          transform-origin: center center;
+}
+body.animating.in.dimmable,
+body.dimmed.dimmable {
+  overflow: hidden;
+}
+body.dimmable > .dimmer {
+  position: fixed;
+}
+/*
+body.dimmable > :not(.dimmer) {
+  filter: @elementStartFilter;
+}
+body.dimmed.dimmable > :not(.dimmer) {
+  filter: @elementEndFilter;
+  transition: @elementTransition;
+}
+*/
+
+/*--------------
+    Aligned
+---------------*/
+
+.ui.dimmer > .top.aligned.content > * {
+  vertical-align: top;
+}
+.ui.dimmer > .bottom.aligned.content > * {
+  vertical-align: bottom;
+}
+
+/*--------------
+    Inverted
+---------------*/
+
+.ui.inverted.dimmer {
+  background: rgba(255, 255, 255, 0.85);
+}
+.ui.inverted.dimmer > .content > * {
+  color: #ffffff;
+}
+
+/*--------------
+     Simple
+---------------*/
+
+
+/* Displays without javascript */
+.ui.simple.dimmer {
+  display: block;
+  overflow: hidden;
+  opacity: 1;
+  width: 0%;
+  height: 0%;
+  z-index: -100;
+  background-color: rgba(0, 0, 0, 0);
+}
+.dimmed.dimmable > .ui.simple.dimmer {
+  overflow: visible;
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.85);
+  z-index: 1;
+}
+.ui.simple.inverted.dimmer {
+  background: rgba(255, 255, 255, 0);
+}
+.dimmed.dimmable > .ui.simple.inverted.dimmer {
+  background: rgba(255, 255, 255, 0.85);
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+        User Overrides
+*******************************/
+

web/semantic/dist/components/dimmer.js

@@ -0,0 +1,669 @@
+/*!
+ * # Semantic UI 1.11.4 - Dimmer
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+;(function ( $, window, document, undefined ) {
+
+"use strict";
+
+$.fn.dimmer = function(parameters) {
+  var
+    $allModules     = $(this),
+
+    time            = new Date().getTime(),
+    performance     = [],
+
+    query           = arguments[0],
+    methodInvoked   = (typeof query == 'string'),
+    queryArguments  = [].slice.call(arguments, 1),
+
+    returnedValue
+  ;
+
+  $allModules
+    .each(function() {
+      var
+        settings        = ( $.isPlainObject(parameters) )
+          ? $.extend(true, {}, $.fn.dimmer.settings, parameters)
+          : $.extend({}, $.fn.dimmer.settings),
+
+        selector        = settings.selector,
+        namespace       = settings.namespace,
+        className       = settings.className,
+        error           = settings.error,
+
+        eventNamespace  = '.' + namespace,
+        moduleNamespace = 'module-' + namespace,
+        moduleSelector  = $allModules.selector || '',
+
+        clickEvent      = ('ontouchstart' in document.documentElement)
+          ? 'touchstart'
+          : 'click',
+
+        $module = $(this),
+        $dimmer,
+        $dimmable,
+
+        element   = this,
+        instance  = $module.data(moduleNamespace),
+        module
+      ;
+
+      module = {
+
+        preinitialize: function() {
+          if( module.is.dimmer() ) {
+            $dimmable = $module.parent();
+            $dimmer   = $module;
+          }
+          else {
+            $dimmable = $module;
+            if( module.has.dimmer() ) {
+              if(settings.dimmerName) {
+                $dimmer = $dimmable.children(selector.dimmer).filter('.' + settings.dimmerName);
+              }
+              else {
+                $dimmer = $dimmable.children(selector.dimmer);
+              }
+            }
+            else {
+              $dimmer = module.create();
+            }
+          }
+        },
+
+        initialize: function() {
+          module.debug('Initializing dimmer', settings);
+          if(settings.on == 'hover') {
+            $dimmable
+              .on('mouseenter' + eventNamespace, module.show)
+              .on('mouseleave' + eventNamespace, module.hide)
+            ;
+          }
+          else if(settings.on == 'click') {
+            $dimmable
+              .on(clickEvent + eventNamespace, module.toggle)
+            ;
+          }
+          if( module.is.page() ) {
+            module.debug('Setting as a page dimmer', $dimmable);
+            module.set.pageDimmer();
+          }
+
+          if( module.is.closable() ) {
+            module.verbose('Adding dimmer close event', $dimmer);
+            $dimmer
+              .on(clickEvent + eventNamespace, module.event.click)
+            ;
+          }
+          module.set.dimmable();
+          module.instantiate();
+        },
+
+        instantiate: function() {
+          module.verbose('Storing instance of module', module);
+          instance = module;
+          $module
+            .data(moduleNamespace, instance)
+          ;
+        },
+
+        destroy: function() {
+          module.verbose('Destroying previous module', $dimmer);
+          $module
+            .removeData(moduleNamespace)
+          ;
+          $dimmable
+            .off(eventNamespace)
+          ;
+          $dimmer
+            .off(eventNamespace)
+          ;
+        },
+
+        event: {
+          click: function(event) {
+            module.verbose('Determining if event occured on dimmer', event);
+            if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) {
+              module.hide();
+              event.stopImmediatePropagation();
+            }
+          }
+        },
+
+        addContent: function(element) {
+          var
+            $content = $(element)
+          ;
+          module.debug('Add content to dimmer', $content);
+          if($content.parent()[0] !== $dimmer[0]) {
+            $content.detach().appendTo($dimmer);
+          }
+        },
+
+        create: function() {
+          var
+            $element = $( settings.template.dimmer() )
+          ;
+          if(settings.variation) {
+            module.debug('Creating dimmer with variation', settings.variation);
+            $element.addClass(className.variation);
+          }
+          if(settings.dimmerName) {
+            module.debug('Creating named dimmer', settings.dimmerName);
+            $element.addClass(settings.dimmerName);
+          }
+          $element
+            .appendTo($dimmable)
+          ;
+          return $element;
+        },
+
+        show: function(callback) {
+          callback = $.isFunction(callback)
+            ? callback
+            : function(){}
+          ;
+          module.debug('Showing dimmer', $dimmer, settings);
+          if( (!module.is.dimmed() || module.is.animating()) && module.is.enabled() ) {
+            module.animate.show(callback);
+            settings.onShow.call(element);
+            settings.onChange.call(element);
+          }
+          else {
+            module.debug('Dimmer is already shown or disabled');
+          }
+        },
+
+        hide: function(callback) {
+          callback = $.isFunction(callback)
+            ? callback
+            : function(){}
+          ;
+          if( module.is.dimmed() || module.is.animating() ) {
+            module.debug('Hiding dimmer', $dimmer);
+            module.animate.hide(callback);
+            settings.onHide.call(element);
+            settings.onChange.call(element);
+          }
+          else {
+            module.debug('Dimmer is not visible');
+          }
+        },
+
+        toggle: function() {
+          module.verbose('Toggling dimmer visibility', $dimmer);
+          if( !module.is.dimmed() ) {
+            module.show();
+          }
+          else {
+            module.hide();
+          }
+        },
+
+        animate: {
+          show: function(callback) {
+            callback = $.isFunction(callback)
+              ? callback
+              : function(){}
+            ;
+            if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
+              if(settings.opacity !== 'auto') {
+                module.set.opacity();
+              }
+              $dimmer
+                .transition({
+                  animation   : settings.transition + ' in',
+                  queue       : false,
+                  duration    : module.get.duration(),
+                  useFailSafe : true,
+                  onStart     : function() {
+                    module.set.dimmed();
+                  },
+                  onComplete  : function() {
+                    module.set.active();
+                    callback();
+                  }
+                })
+              ;
+            }
+            else {
+              module.verbose('Showing dimmer animation with javascript');
+              module.set.dimmed();
+              if(settings.opacity == 'auto') {
+                settings.opacity = 0.8;
+              }
+              $dimmer
+                .stop()
+                .css({
+                  opacity : 0,
+                  width   : '100%',
+                  height  : '100%'
+                })
+                .fadeTo(module.get.duration(), settings.opacity, function() {
+                  $dimmer.removeAttr('style');
+                  module.set.active();
+                  callback();
+                })
+              ;
+            }
+          },
+          hide: function(callback) {
+            callback = $.isFunction(callback)
+              ? callback
+              : function(){}
+            ;
+            if(settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
+              module.verbose('Hiding dimmer with css');
+              $dimmer
+                .transition({
+                  animation   : settings.transition + ' out',
+                  queue       : false,
+                  duration    : module.get.duration(),
+                  useFailSafe : true,
+                  onStart     : function() {
+                    module.remove.dimmed();
+                  },
+                  onComplete  : function() {
+                    module.remove.active();
+                    callback();
+                  }
+                })
+              ;
+            }
+            else {
+              module.verbose('Hiding dimmer with javascript');
+              module.remove.dimmed();
+              $dimmer
+                .stop()
+                .fadeOut(module.get.duration(), function() {
+                  module.remove.active();
+                  $dimmer.removeAttr('style');
+                  callback();
+                })
+              ;
+            }
+          }
+        },
+
+        get: {
+          dimmer: function() {
+            return $dimmer;
+          },
+          duration: function() {
+            if(typeof settings.duration == 'object') {
+              if( module.is.active() ) {
+                return settings.duration.hide;
+              }
+              else {
+                return settings.duration.show;
+              }
+            }
+            return settings.duration;
+          }
+        },
+
+        has: {
+          dimmer: function() {
+            if(settings.dimmerName) {
+              return ($module.children(selector.dimmer).filter('.' + settings.dimmerName).length > 0);
+            }
+            else {
+              return ( $module.children(selector.dimmer).length > 0 );
+            }
+          }
+        },
+
+        is: {
+          active: function() {
+            return $dimmer.hasClass(className.active);
+          },
+          animating: function() {
+            return ( $dimmer.is(':animated') || $dimmer.hasClass(className.animating) );
+          },
+          closable: function() {
+            if(settings.closable == 'auto') {
+              if(settings.on == 'hover') {
+                return false;
+              }
+              return true;
+            }
+            return settings.closable;
+          },
+          dimmer: function() {
+            return $module.is(selector.dimmer);
+          },
+          dimmable: function() {
+            return $module.is(selector.dimmable);
+          },
+          dimmed: function() {
+            return $dimmable.hasClass(className.dimmed);
+          },
+          disabled: function() {
+            return $dimmable.hasClass(className.disabled);
+          },
+          enabled: function() {
+            return !module.is.disabled();
+          },
+          page: function () {
+            return $dimmable.is('body');
+          },
+          pageDimmer: function() {
+            return $dimmer.hasClass(className.pageDimmer);
+          }
+        },
+
+        can: {
+          show: function() {
+            return !$dimmer.hasClass(className.disabled);
+          }
+        },
+
+        set: {
+          opacity: function(opacity) {
+            var
+              opacity    = settings.opacity || opacity,
+              color      = $dimmer.css('background-color'),
+              colorArray = color.split(','),
+              isRGBA     = (colorArray && colorArray.length == 4)
+            ;
+            if(isRGBA) {
+              colorArray[3] = opacity + ')';
+              color         = colorArray.join(',');
+            }
+            else {
+              color = 'rgba(0, 0, 0, ' + opacity + ')';
+            }
+            module.debug('Setting opacity to', opacity);
+            $dimmer.css('background-color', color);
+          },
+          active: function() {
+            $dimmer.addClass(className.active);
+          },
+          dimmable: function() {
+            $dimmable.addClass(className.dimmable);
+          },
+          dimmed: function() {
+            $dimmable.addClass(className.dimmed);
+          },
+          pageDimmer: function() {
+            $dimmer.addClass(className.pageDimmer);
+          },
+          disabled: function() {
+            $dimmer.addClass(className.disabled);
+          }
+        },
+
+        remove: {
+          active: function() {
+            $dimmer
+              .removeClass(className.active)
+            ;
+          },
+          dimmed: function() {
+            $dimmable.removeClass(className.dimmed);
+          },
+          disabled: function() {
+            $dimmer.removeClass(className.disabled);
+          }
+        },
+
+        setting: function(name, value) {
+          module.debug('Changing setting', name, value);
+          if( $.isPlainObject(name) ) {
+            $.extend(true, settings, name);
+          }
+          else if(value !== undefined) {
+            settings[name] = value;
+          }
+          else {
+            return settings[name];
+          }
+        },
+        internal: function(name, value) {
+          if( $.isPlainObject(name) ) {
+            $.extend(true, module, name);
+          }
+          else if(value !== undefined) {
+            module[name] = value;
+          }
+          else {
+            return module[name];
+          }
+        },
+        debug: function() {
+          if(settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.debug = Function.prototype.bind.call(console.info, console, settings.name + ':');
+              module.debug.apply(console, arguments);
+            }
+          }
+        },
+        verbose: function() {
+          if(settings.verbose && settings.debug) {
+            if(settings.performance) {
+              module.performance.log(arguments);
+            }
+            else {
+              module.verbose = Function.prototype.bind.call(console.info, console, settings.name + ':');
+              module.verbose.apply(console, arguments);
+            }
+          }
+        },
+        error: function() {
+          module.error = Function.prototype.bind.call(console.error, console, settings.name + ':');
+          module.error.apply(console, arguments);
+        },
+        performance: {
+          log: function(message) {
+            var
+              currentTime,
+              executionTime,
+              previousTime
+            ;
+            if(settings.performance) {
+              currentTime   = new Date().getTime();
+              previousTime  = time || currentTime;
+              executionTime = currentTime - previousTime;
+              time          = currentTime;
+              performance.push({
+                'Name'           : message[0],
+                'Arguments'      : [].slice.call(message, 1) || '',
+                'Element'        : element,
+                'Execution Time' : executionTime
+              });
+            }
+            clearTimeout(module.performance.timer);
+            module.performance.timer = setTimeout(module.performance.display, 100);
+          },
+          display: function() {
+            var
+              title = settings.name + ':',
+              totalTime = 0
+            ;
+            time = false;
+            clearTimeout(module.performance.timer);
+            $.each(performance, function(index, data) {
+              totalTime += data['Execution Time'];
+            });
+            title += ' ' + totalTime + 'ms';
+            if(moduleSelector) {
+              title += ' \'' + moduleSelector + '\'';
+            }
+            if($allModules.length > 1) {
+              title += ' ' + '(' + $allModules.length + ')';
+            }
+            if( (console.group !== undefined || console.table !== undefined) && performance.length > 0) {
+              console.groupCollapsed(title);
+              if(console.table) {
+                console.table(performance);
+              }
+              else {
+                $.each(performance, function(index, data) {
+                  console.log(data['Name'] + ': ' + data['Execution Time']+'ms');
+                });
+              }
+              console.groupEnd();
+            }
+            performance = [];
+          }
+        },
+        invoke: function(query, passedArguments, context) {
+          var
+            object = instance,
+            maxDepth,
+            found,
+            response
+          ;
+          passedArguments = passedArguments || queryArguments;
+          context         = element         || context;
+          if(typeof query == 'string' && object !== undefined) {
+            query    = query.split(/[\. ]/);
+            maxDepth = query.length - 1;
+            $.each(query, function(depth, value) {
+              var camelCaseValue = (depth != maxDepth)
+                ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
+                : query
+              ;
+              if( $.isPlainObject( object[camelCaseValue] ) && (depth != maxDepth) ) {
+                object = object[camelCaseValue];
+              }
+              else if( object[camelCaseValue] !== undefined ) {
+                found = object[camelCaseValue];
+                return false;
+              }
+              else if( $.isPlainObject( object[value] ) && (depth != maxDepth) ) {
+                object = object[value];
+              }
+              else if( object[value] !== undefined ) {
+                found = object[value];
+                return false;
+              }
+              else {
+                module.error(error.method, query);
+                return false;
+              }
+            });
+          }
+          if ( $.isFunction( found ) ) {
+            response = found.apply(context, passedArguments);
+          }
+          else if(found !== undefined) {
+            response = found;
+          }
+          if($.isArray(returnedValue)) {
+            returnedValue.push(response);
+          }
+          else if(returnedValue !== undefined) {
+            returnedValue = [returnedValue, response];
+          }
+          else if(response !== undefined) {
+            returnedValue = response;
+          }
+          return found;
+        }
+      };
+
+      module.preinitialize();
+
+      if(methodInvoked) {
+        if(instance === undefined) {
+          module.initialize();
+        }
+        module.invoke(query);
+      }
+      else {
+        if(instance !== undefined) {
+          instance.invoke('destroy');
+        }
+        module.initialize();
+      }
+    })
+  ;
+
+  return (returnedValue !== undefined)
+    ? returnedValue
+    : this
+  ;
+};
+
+$.fn.dimmer.settings = {
+
+  name        : 'Dimmer',
+  namespace   : 'dimmer',
+
+  debug       : false,
+  verbose     : true,
+  performance : true,
+
+  // name to distinguish between multiple dimmers in context
+  dimmerName  : false,
+
+  // whether to add a variation type
+  variation   : false,
+
+  // whether to bind close events
+  closable    : 'auto',
+
+  // whether to use css animations
+  useCSS      : true,
+
+  // css animation to use
+  transition  : 'fade',
+
+  // event to bind to
+  on          : false,
+
+  // overriding opacity value
+  opacity     : 'auto',
+
+  // transition durations
+  duration    : {
+    show : 500,
+    hide : 500
+  },
+
+  onChange    : function(){},
+  onShow      : function(){},
+  onHide      : function(){},
+
+  error   : {
+    method   : 'The method you called is not defined.'
+  },
+
+  selector: {
+    dimmable : '.dimmable',
+    dimmer   : '.ui.dimmer',
+    content  : '.ui.dimmer > .content, .ui.dimmer > .content > .center'
+  },
+
+  template: {
+    dimmer: function() {
+     return $('<div />').attr('class', 'ui dimmer');
+    }
+  },
+
+  className : {
+    active     : 'active',
+    animating  : 'animating',
+    dimmable   : 'dimmable',
+    dimmed     : 'dimmed',
+    disabled   : 'disabled',
+    hide       : 'hide',
+    pageDimmer : 'page',
+    show       : 'show'
+  }
+
+};
+
+})( jQuery, window , document );

web/semantic/dist/components/dimmer.min.css

@@ -0,0 +1,10 @@
+/*!
+ * # Semantic UI 1.11.4 - Dimmer
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */.dimmable{position:relative}.ui.dimmer{display:none;position:absolute;top:0!important;left:0!important;width:100%;height:100%;text-align:center;vertical-align:middle;background:rgba(0,0,0,.85);opacity:0;line-height:1;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-transition:background-color .5s linear;transition:background-color .5s linear;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;will-change:opacity;z-index:1000}.ui.dimmer>.content{width:100%;height:100%;display:table;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.ui.dimmer>.content>div{display:table-cell;vertical-align:middle;color:#fff}.ui.segment>.ui.dimmer{border-radius:inherit!important}.animating.dimmable:not(body),.dimmed.dimmable:not(body){overflow:hidden}.dimmed.dimmable>.ui.animating.dimmer,.dimmed.dimmable>.ui.visible.dimmer,.ui.active.dimmer{display:block;opacity:1}.ui.disabled.dimmer{width:0!important;height:0!important}.ui.page.dimmer{position:fixed;-webkit-transform-style:'';transform-style:'';-webkit-perspective:2000px;perspective:2000px;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center}body.animating.in.dimmable,body.dimmed.dimmable{overflow:hidden}body.dimmable>.dimmer{position:fixed}.ui.dimmer>.top.aligned.content>*{vertical-align:top}.ui.dimmer>.bottom.aligned.content>*{vertical-align:bottom}.ui.inverted.dimmer{background:rgba(255,255,255,.85)}.ui.inverted.dimmer>.content>*{color:#fff}.ui.simple.dimmer{display:block;overflow:hidden;opacity:1;width:0;height:0;z-index:-100;background-color:transparent}.dimmed.dimmable>.ui.simple.dimmer{overflow:visible;opacity:1;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:1}.ui.simple.inverted.dimmer{background:rgba(255,255,255,0)}.dimmed.dimmable>.ui.simple.inverted.dimmer{background:rgba(255,255,255,.85)}

web/semantic/dist/components/divider.css

@@ -0,0 +1,241 @@
+/*!
+ * # Semantic UI 1.11.4 - Divider
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Divider
+*******************************/
+
+.ui.divider {
+  margin: 1rem 0rem;
+  line-height: 1;
+  height: 0em;
+  font-weight: bold;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: rgba(0, 0, 0, 0.85);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+/*--------------
+      Basic
+---------------*/
+
+.ui.divider:not(.vertical):not(.horizontal) {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/*--------------
+    Coupling
+---------------*/
+
+.ui.grid > .ui.divider {
+  font-size: 1rem;
+}
+
+/*--------------
+   Horizontal
+---------------*/
+
+.ui.horizontal.divider {
+  position: relative;
+  height: auto;
+  margin: '';
+  overflow: hidden;
+  line-height: 1;
+  text-align: center;
+}
+.ui.horizontal.divider:before,
+.ui.horizontal.divider:after {
+  position: absolute;
+  content: '';
+  z-index: 3;
+  width: 50%;
+  top: 50%;
+  height: 0px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+.ui.horizontal.divider:before {
+  margin-left: -webkit-calc(-50% -  1em );
+  margin-left: calc(-50% -  1em );
+}
+.ui.horizontal.divider:after {
+  margin-left: 1em;
+}
+
+/*--------------
+    Vertical
+---------------*/
+
+.ui.vertical.divider {
+  position: absolute;
+  z-index: 2;
+  top: 50%;
+  left: 50%;
+  margin: 0rem;
+  padding: 0em;
+  width: auto;
+  height: 50%;
+  line-height: 0em;
+  text-align: center;
+  -webkit-transform: translateX(-50%);
+      -ms-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.ui.vertical.divider:before,
+.ui.vertical.divider:after {
+  position: absolute;
+  left: 50%;
+  content: '';
+  z-index: 3;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  border-right: 1px solid rgba(255, 255, 255, 0.2);
+  width: 0%;
+  height: -webkit-calc(100% -  1rem );
+  height: calc(100% -  1rem );
+}
+.ui.vertical.divider:before {
+  top: -100%;
+}
+.ui.vertical.divider:after {
+  top: auto;
+  bottom: 0px;
+}
+
+/* Inside grid */
+@media only screen and (max-width: 767px) {
+  .ui.stackable.grid .ui.vertical.divider,
+  .ui.grid .stackable.row .ui.vertical.divider {
+    position: relative;
+    margin: 1rem 0rem;
+    left: 50%;
+    height: auto;
+    overflow: hidden;
+    line-height: 1;
+    text-align: center;
+  }
+  .ui.stackable.grid .ui.vertical.divider:before,
+  .ui.grid .stackable.row .ui.vertical.divider:before,
+  .ui.stackable.grid .ui.vertical.divider:after,
+  .ui.grid .stackable.row .ui.vertical.divider:after {
+    position: absolute;
+    left: auto;
+    content: '';
+    z-index: 3;
+    width: 50%;
+    top: 50%;
+    height: 0px;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  }
+  .ui.stackable.grid .ui.vertical.divider:before,
+  .ui.grid .stackable.row .ui.vertical.divider:before {
+    margin-left: -51%;
+  }
+  .ui.stackable.grid .ui.vertical.divider:after,
+  .ui.grid .stackable.row .ui.vertical.divider:after {
+    margin-left: 1em;
+  }
+}
+
+/*--------------
+      Icon
+---------------*/
+
+.ui.divider > .icon {
+  margin: 0rem;
+  font-size: 1rem;
+  height: 1em;
+  vertical-align: middle;
+}
+
+
+/*******************************
+          Variations
+*******************************/
+
+
+/*--------------
+    Hidden
+---------------*/
+
+.ui.hidden.divider {
+  border-color: transparent !important;
+}
+
+/*--------------
+    Inverted
+---------------*/
+
+.ui.divider.inverted,
+.ui.vertical.inverted.divider,
+.ui.horizontal.inverted.divider {
+  color: #ffffff;
+}
+.ui.divider.inverted,
+.ui.divider.inverted:after,
+.ui.divider.inverted:before {
+  border-top-color: rgba(0, 0, 0, 0.15) !important;
+  border-bottom-color: rgba(255, 255, 255, 0.15) !important;
+  border-left-color: rgba(0, 0, 0, 0.15) !important;
+  border-right-color: rgba(255, 255, 255, 0.15) !important;
+}
+
+/*--------------
+    Fitted
+---------------*/
+
+.ui.fitted.divider {
+  margin: 0em;
+}
+
+/*--------------
+    Clearing
+---------------*/
+
+.ui.clearing.divider {
+  clear: both;
+}
+
+/*--------------
+    Section
+---------------*/
+
+.ui.section.divider {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+/*--------------
+     Sizes
+---------------*/
+
+.ui.divider {
+  font-size: 1rem;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/
+

web/semantic/dist/components/divider.min.css

@@ -0,0 +1,10 @@
+/*!
+ * # Semantic UI 1.11.4 - Divider
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */.ui.divider{margin:1rem 0;line-height:1;height:0;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:rgba(0,0,0,.85);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ui.divider:not(.vertical):not(.horizontal){border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.2)}.ui.grid>.ui.divider{font-size:1rem}.ui.horizontal.divider{position:relative;height:auto;margin:'';overflow:hidden;line-height:1;text-align:center}.ui.horizontal.divider:after,.ui.horizontal.divider:before{position:absolute;content:'';z-index:3;width:50%;top:50%;height:0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.2)}.ui.horizontal.divider:before{margin-left:-webkit-calc(-50% - 1em);margin-left:calc(-50% - 1em)}.ui.horizontal.divider:after{margin-left:1em}.ui.vertical.divider{position:absolute;z-index:2;top:50%;left:50%;margin:0;padding:0;width:auto;height:50%;line-height:0;text-align:center;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.ui.vertical.divider:after,.ui.vertical.divider:before{position:absolute;left:50%;content:'';z-index:3;border-left:1px solid rgba(0,0,0,.1);border-right:1px solid rgba(255,255,255,.2);width:0;height:-webkit-calc(100% - 1rem);height:calc(100% - 1rem)}.ui.vertical.divider:before{top:-100%}.ui.vertical.divider:after{top:auto;bottom:0}@media only screen and (max-width:767px){.ui.grid .stackable.row .ui.vertical.divider,.ui.stackable.grid .ui.vertical.divider{position:relative;margin:1rem 0;left:50%;height:auto;overflow:hidden;line-height:1;text-align:center}.ui.grid .stackable.row .ui.vertical.divider:after,.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:before{position:absolute;left:auto;content:'';z-index:3;width:50%;top:50%;height:0;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(255,255,255,.2)}.ui.grid .stackable.row .ui.vertical.divider:before,.ui.stackable.grid .ui.vertical.divider:before{margin-left:-51%}.ui.grid .stackable.row .ui.vertical.divider:after,.ui.stackable.grid .ui.vertical.divider:after{margin-left:1em}}.ui.divider>.icon{margin:0;font-size:1rem;height:1em;vertical-align:middle}.ui.hidden.divider{border-color:transparent!important}.ui.divider.inverted,.ui.horizontal.inverted.divider,.ui.vertical.inverted.divider{color:#fff}.ui.divider.inverted,.ui.divider.inverted:after,.ui.divider.inverted:before{border-top-color:rgba(0,0,0,.15)!important;border-bottom-color:rgba(255,255,255,.15)!important;border-left-color:rgba(0,0,0,.15)!important;border-right-color:rgba(255,255,255,.15)!important}.ui.fitted.divider{margin:0}.ui.clearing.divider{clear:both}.ui.section.divider{margin-top:2rem;margin-bottom:2rem}.ui.divider{font-size:1rem}

web/semantic/dist/components/feed.css

@@ -0,0 +1,276 @@
+/*!
+ * # Semantic UI 1.11.4 - Feed
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributorss
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+         Activity Feed
+*******************************/
+
+.ui.feed {
+  margin: 1em 0em;
+}
+.ui.feed:first-child {
+  margin-top: 0em;
+}
+.ui.feed:last-child {
+  margin-top: 0em;
+}
+
+
+/*******************************
+            Content
+*******************************/
+
+
+/* Event */
+.ui.feed > .event {
+  display: table;
+  width: 100%;
+  padding: 0.5rem 0em;
+  margin: 0em;
+  background: none;
+  border-top: none;
+}
+.ui.feed > .event:first-child {
+  border-top: 0px;
+  padding-top: 0em;
+}
+.ui.feed > .event:last-child {
+  padding-bottom: 0em;
+}
+
+/* Event Label */
+.ui.feed > .event > .label {
+  display: table-cell;
+  width: 2.5em;
+  height: 2.5em;
+  vertical-align: top;
+  text-align: left;
+}
+.ui.feed > .event > .label .icon {
+  opacity: 1;
+  font-size: 1.5em;
+  width: 100%;
+  padding: 0.25em;
+  background: none;
+  border: none;
+  border-radius: none;
+  color: rgba(0, 0, 0, 0.6);
+}
+.ui.feed > .event > .label img {
+  width: 100%;
+  height: auto;
+  border-radius: 500rem;
+}
+.ui.feed > .event > .label + .content {
+  padding: 0.5em 0em 0.5em 1.25em;
+}
+
+/* Content */
+.ui.feed > .event > .content {
+  display: table-cell;
+  vertical-align: top;
+  text-align: left;
+  word-wrap: break-word;
+}
+.ui.feed > .event:last-child > .content {
+  padding-bottom: 0em;
+}
+
+/* Link */
+.ui.feed > .event > .content a {
+  cursor: pointer;
+}
+
+/*--------------
+      Date
+---------------*/
+
+.ui.feed > .event > .content .date {
+  margin: -0.5rem 0em 0em;
+  padding: 0em;
+  font-weight: normal;
+  font-size: 1em;
+  font-style: normal;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+/*--------------
+     Summary
+---------------*/
+
+.ui.feed > .event > .content .summary {
+  margin: 0em;
+  font-size: 1em;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/* Summary Image */
+.ui.feed > .event > .content .summary img {
+  display: inline-block;
+  width: auto;
+  height: 2em;
+  margin: -0.25em 0.25em 0em 0em;
+  border-radius: 0.25em;
+  vertical-align: middle;
+}
+
+/*--------------
+      User
+---------------*/
+
+.ui.feed > .event > .content .user {
+  display: inline-block;
+  font-weight: bold;
+  margin-right: 0em;
+  vertical-align: baseline;
+}
+.ui.feed > .event > .content .user img {
+  margin: -0.25em 0.25em 0em 0em;
+  width: auto;
+  height: 2em;
+  vertical-align: middle;
+}
+
+/*--------------
+   Inline Date
+---------------*/
+
+
+/* Date inside Summary */
+.ui.feed > .event > .content .summary > .date {
+  display: inline-block;
+  float: none;
+  font-weight: normal;
+  font-size: 0.875em;
+  font-style: normal;
+  margin: 0em 0em 0em 0.5em;
+  padding: 0em;
+  color: rgba(0, 0, 0, 0.4);
+}
+
+/*--------------
+  Extra Summary
+---------------*/
+
+.ui.feed > .event > .content .extra {
+  margin: 0.5em 0em 0em;
+  background: none;
+  padding: 0em;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/* Images */
+.ui.feed > .event > .content .extra.images img {
+  display: inline-block;
+  margin: 0em 0.25em 0em 0em;
+  width: 6em;
+}
+
+/* Text */
+.ui.feed > .event > .content .extra.text {
+  padding: 0.5em 1em;
+  border-left: 3px solid rgba(0, 0, 0, 0.2);
+  font-size: 1em;
+  max-width: 500px;
+  line-height: 1.33;
+}
+
+/*--------------
+      Meta
+---------------*/
+
+.ui.feed > .event > .content .meta {
+  display: inline-block;
+  font-size: 0.875em;
+  margin: 0.5em 0em 0em;
+  background: none;
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 0em;
+  color: rgba(0, 0, 0, 0.6);
+}
+.ui.feed > .event > .content .meta > * {
+  position: relative;
+  margin-left: 0.75em;
+}
+.ui.feed > .event > .content .meta > *:after {
+  content: '';
+  color: rgba(0, 0, 0, 0.2);
+  top: 0em;
+  left: -1em;
+  opacity: 1;
+  position: absolute;
+  vertical-align: top;
+}
+.ui.feed > .event > .content .meta .like {
+  color: '';
+  -webkit-transition: 0.2s color ease;
+          transition: 0.2s color ease;
+}
+.ui.feed > .event > .content .meta .like:hover .icon {
+  color: #ff2733;
+}
+.ui.feed > .event > .content .meta .active.like .icon {
+  color: #ef404a;
+}
+
+/* First element */
+.ui.feed > .event > .content .meta > :first-child {
+  margin-left: 0em;
+}
+.ui.feed > .event > .content .meta > :first-child::after {
+  display: none;
+}
+
+/* Action */
+.ui.feed > .event > .content .meta a,
+.ui.feed > .event > .content .meta > .icon {
+  cursor: pointer;
+  opacity: 1;
+  color: rgba(0, 0, 0, 0.5);
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
+}
+.ui.feed > .event > .content .meta a:hover,
+.ui.feed > .event > .content .meta a:hover .icon,
+.ui.feed > .event > .content .meta > .icon:hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+
+/*******************************
+            Variations
+*******************************/
+
+.ui.small.feed {
+  font-size: 0.9em;
+}
+.ui.feed {
+  font-size: 1em;
+}
+.ui.large.feed {
+  font-size: 1.1em;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+    User Variable Overrides
+*******************************/
+

web/semantic/dist/components/feed.min.css

@@ -0,0 +1,10 @@
+/*!
+ * # Semantic UI 1.11.4 - Feed
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributorss
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */.ui.feed{margin:1em 0}.ui.feed:first-child,.ui.feed:last-child{margin-top:0}.ui.feed>.event{display:table;width:100%;padding:.5rem 0;margin:0;background:0 0;border-top:none}.ui.feed>.event:first-child{border-top:0;padding-top:0}.ui.feed>.event:last-child{padding-bottom:0}.ui.feed>.event>.label{display:table-cell;width:2.5em;height:2.5em;vertical-align:top;text-align:left}.ui.feed>.event>.label .icon{opacity:1;font-size:1.5em;width:100%;padding:.25em;background:0 0;border:none;border-radius:none;color:rgba(0,0,0,.6)}.ui.feed>.event>.label img{width:100%;height:auto;border-radius:500rem}.ui.feed>.event>.label+.content{padding:.5em 0 .5em 1.25em}.ui.feed>.event>.content{display:table-cell;vertical-align:top;text-align:left;word-wrap:break-word}.ui.feed>.event:last-child>.content{padding-bottom:0}.ui.feed>.event>.content a{cursor:pointer}.ui.feed>.event>.content .date{margin:-.5rem 0 0;padding:0;font-weight:400;font-size:1em;font-style:normal;color:rgba(0,0,0,.4)}.ui.feed>.event>.content .summary{margin:0;font-size:1em;font-weight:700;color:rgba(0,0,0,.8)}.ui.feed>.event>.content .summary img{display:inline-block;width:auto;height:2em;margin:-.25em .25em 0 0;border-radius:.25em;vertical-align:middle}.ui.feed>.event>.content .user{display:inline-block;font-weight:700;margin-right:0;vertical-align:baseline}.ui.feed>.event>.content .user img{margin:-.25em .25em 0 0;width:auto;height:2em;vertical-align:middle}.ui.feed>.event>.content .summary>.date{display:inline-block;float:none;font-weight:400;font-size:.875em;font-style:normal;margin:0 0 0 .5em;padding:0;color:rgba(0,0,0,.4)}.ui.feed>.event>.content .extra{margin:.5em 0 0;background:0 0;padding:0;color:rgba(0,0,0,.8)}.ui.feed>.event>.content .extra.images img{display:inline-block;margin:0 .25em 0 0;width:6em}.ui.feed>.event>.content .extra.text{padding:.5em 1em;border-left:3px solid rgba(0,0,0,.2);font-size:1em;max-width:500px;line-height:1.33}.ui.feed>.event>.content .meta{display:inline-block;font-size:.875em;margin:.5em 0 0;background:0 0;border:none;border-radius:0;box-shadow:none;padding:0;color:rgba(0,0,0,.6)}.ui.feed>.event>.content .meta>*{position:relative;margin-left:.75em}.ui.feed>.event>.content .meta>:after{content:'';color:rgba(0,0,0,.2);top:0;left:-1em;opacity:1;position:absolute;vertical-align:top}.ui.feed>.event>.content .meta .like{color:'';-webkit-transition:.2s color ease;transition:.2s color ease}.ui.feed>.event>.content .meta .like:hover .icon{color:#ff2733}.ui.feed>.event>.content .meta .active.like .icon{color:#ef404a}.ui.feed>.event>.content .meta>:first-child{margin-left:0}.ui.feed>.event>.content .meta>:first-child::after{display:none}.ui.feed>.event>.content .meta a,.ui.feed>.event>.content .meta>.icon{cursor:pointer;opacity:1;color:rgba(0,0,0,.5);-webkit-transition:color .2s ease;transition:color .2s ease}.ui.feed>.event>.content .meta a:hover,.ui.feed>.event>.content .meta a:hover .icon,.ui.feed>.event>.content .meta>.icon:hover{color:rgba(0,0,0,.8)}.ui.small.feed{font-size:.9em}.ui.feed{font-size:1em}.ui.large.feed{font-size:1.1em}

web/semantic/dist/components/form.css

@@ -0,0 +1,891 @@
+/*!
+ * # Semantic UI 1.11.4 - Form
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Elements
+*******************************/
+
+
+/*--------------------
+        Form
+---------------------*/
+
+.ui.form {
+  position: relative;
+  max-width: 100%;
+}
+
+/*--------------------
+        Content
+---------------------*/
+
+.ui.form > p {
+  margin: 1em 0em;
+}
+
+/*--------------------
+        Field
+---------------------*/
+
+.ui.form .fields .field,
+.ui.form .field {
+  clear: both;
+  margin: 0em 0em 1em;
+}
+.ui.form .fields:last-child,
+.ui.form .field:last-child {
+  margin-bottom: 0em;
+}
+
+/*--------------------
+        Labels
+---------------------*/
+
+.ui.form .field > label {
+  display: block;
+  margin: 0em 0em 0.2857rem 0em;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 0.9285em;
+  font-weight: bold;
+  text-transform: none;
+}
+.ui.form .grouped.fields > label {
+  margin: 0em 0em 0.2857rem 0em;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 0.9285em;
+  font-weight: bold;
+  text-transform: none;
+}
+.ui.form .inline.fields > label {
+  display: inline-block;
+  vertical-align: middle;
+  margin: 0em 1em 0em 0em;
+  color: rgba(0, 0, 0, 0.8);
+  font-size: 0.9285em;
+  font-weight: bold;
+  text-transform: none;
+}
+
+/*--------------------
+    Standard Inputs
+---------------------*/
+
+.ui.form textarea,
+.ui.form input:not([type]),
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="time"],
+.ui.form input[type="text"],
+.ui.form input[type="url"],
+.ui.form .ui.input {
+  width: 100%;
+  vertical-align: top;
+}
+.ui.form input:not([type]),
+.ui.form input[type="date"],
+.ui.form input[type="datetime-local"],
+.ui.form input[type="email"],
+.ui.form input[type="number"],
+.ui.form input[type="password"],
+.ui.form input[type="search"],
+.ui.form input[type="tel"],
+.ui.form input[type="time"],
+.ui.form input[type="text"],
+.ui.form input[type="url"] {
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  margin: 0em;
+  outline: none;
+  -webkit-appearance: none;
+  tap-highlight-color: rgba(255, 255, 255, 0);
+  line-height: 1.2142em;
+  padding: 0.67861em 1em;
+  font-size: 1em;
+  background: #ffffff;
+  border: 1px solid rgba(39, 41, 43, 0.15);
+  color: rgba(0, 0, 0, 0.8);
+  border-radius: 0.2857rem;
+  box-shadow: 0em 0em 0em 0em transparent inset;
+  -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+          transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+.ui.textarea,
+.ui.form textarea {
+  margin: 0em;
+  -webkit-appearance: none;
+  tap-highlight-color: rgba(255, 255, 255, 0);
+  padding: 0.78571em 1em;
+  background: #ffffff;
+  border: 1px solid rgba(39, 41, 43, 0.15);
+  outline: none;
+  color: rgba(0, 0, 0, 0.8);
+  border-radius: 0.2857rem;
+  box-shadow: 0em 0em 0em 0em transparent inset;
+  -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+          transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  font-size: 1em;
+  height: 12em;
+  min-height: 8em;
+  max-height: 24em;
+  line-height: 1.2857;
+  resize: vertical;
+}
+.ui.form textarea,
+.ui.form input[type="checkbox"] {
+  vertical-align: top;
+}
+
+/*--------------------------
+  Input w/ attached Button
+---------------------------*/
+
+.ui.form input.attached {
+  width: auto;
+}
+
+/*--------------------
+     Basic Select
+---------------------*/
+
+.ui.form select {
+  display: block;
+  height: auto;
+  width: 100%;
+  background: #ffffff;
+  border: 1px solid rgba(39, 41, 43, 0.15);
+  border-radius: 0.2857rem;
+  box-shadow: 0em 0em 0em 0em transparent inset;
+  padding: 0.62em 1em;
+  color: rgba(0, 0, 0, 0.8);
+  -webkit-transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+          transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+/*--------------------
+       Dropdown
+---------------------*/
+
+.ui.form .field > .selection.dropdown {
+  width: 100%;
+}
+.ui.form .field > .selection.dropdown > .dropdown.icon {
+  float: right;
+}
+.ui.form .inline.field > .selection.dropdown {
+  width: auto;
+}
+.ui.form .inline.field > .selection.dropdown > .dropdown.icon {
+  float: none;
+}
+
+/*--------------------
+       Dividers
+---------------------*/
+
+.ui.form .divider {
+  clear: both;
+  margin: 1em 0em;
+}
+
+/*--------------------
+   Types of Messages
+---------------------*/
+
+.ui.form .success.message,
+.ui.form .warning.message,
+.ui.form .error.message {
+  display: none;
+}
+
+/* Assumptions */
+.ui.form .message:first-child {
+  margin-top: 0px;
+}
+
+/*--------------------
+   Validation Prompt
+---------------------*/
+
+.ui.form .field .prompt.label {
+  white-space: nowrap;
+}
+.ui.form .inline.field .prompt {
+  margin: -0.5em 0em -0.5em 1em;
+}
+.ui.form .inline.field .prompt:before {
+  margin-top: -0.3em;
+  bottom: auto;
+  right: auto;
+  top: 50%;
+  left: 0em;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+
+/*--------------------
+      Placeholder
+---------------------*/
+
+
+/* browsers require these rules separate */
+.ui.form ::-webkit-input-placeholder {
+  color: rgba(140, 140, 140, 0.8);
+}
+.ui.form ::-moz-placeholder {
+  color: rgba(140, 140, 140, 0.8);
+}
+.ui.form :focus::-webkit-input-placeholder {
+  color: rgba(89, 89, 89, 0.8);
+}
+.ui.form :focus::-moz-placeholder {
+  color: rgba(89, 89, 89, 0.8);
+}
+
+/* Error Placeholder */
+.ui.form .error ::-webkit-input-placeholder {
+  color: #e38585;
+}
+.ui.form .error ::-moz-placeholder {
+  color: #e38585;
+}
+.ui.form .error :focus::-webkit-input-placeholder {
+  color: #de7171;
+}
+.ui.form .error :focus::-moz-placeholder {
+  color: #de7171;
+}
+
+/*--------------------
+        Focus
+---------------------*/
+
+.ui.form input:not([type]):focus,
+.ui.form input[type="date"]:focus,
+.ui.form input[type="datetime-local"]:focus,
+.ui.form input[type="email"]:focus,
+.ui.form input[type="number"]:focus,
+.ui.form input[type="password"]:focus,
+.ui.form input[type="search"]:focus,
+.ui.form input[type="tel"]:focus,
+.ui.form input[type="time"]:focus,
+.ui.form input[type="text"]:focus,
+.ui.form input[type="url"]:focus {
+  color: rgba(0, 0, 0, 0.85);
+  border-color: rgba(39, 41, 43, 0.3);
+  border-radius: 0em 0.2857rem 0.2857rem 0em;
+  background: #ffffff;
+  box-shadow: 1px 0em 0em 0em rgba(39, 41, 43, 0.3) inset;
+}
+.ui.form textarea:focus {
+  color: rgba(0, 0, 0, 0.85);
+  border-color: rgba(39, 41, 43, 0.3);
+  border-radius: 0em 0.2857rem 0.2857rem 0em;
+  background: #ffffff;
+  box-shadow: 1px 0em 0em 0em rgba(39, 41, 43, 0.3) inset;
+  -webkit-appearance: none;
+}
+
+/*--------------------
+        Success
+---------------------*/
+
+
+/* On Form */
+.ui.form.success .success.message {
+  display: block;
+}
+
+/*--------------------
+        Error
+---------------------*/
+
+
+/* On Form */
+.ui.form.warning .warning.message {
+  display: block;
+}
+
+/*--------------------
+        Warning
+---------------------*/
+
+
+/* On Form */
+.ui.form.error .error.message {
+  display: block;
+}
+
+/* On Field(s) */
+.ui.form .fields.error .field label,
+.ui.form .field.error label,
+.ui.form .fields.error .field .input,
+.ui.form .field.error .input {
+  color: #d95c5c;
+}
+.ui.form .fields.error .field .corner.label,
+.ui.form .field.error .corner.label {
+  border-color: #d95c5c;
+  color: #ffffff;
+}
+.ui.form .fields.error .field textarea,
+.ui.form .fields.error .field select,
+.ui.form .fields.error .field input:not([type]),
+.ui.form .fields.error .field input[type="date"],
+.ui.form .fields.error .field input[type="datetime-local"],
+.ui.form .fields.error .field input[type="email"],
+.ui.form .fields.error .field input[type="number"],
+.ui.form .fields.error .field input[type="password"],
+.ui.form .fields.error .field input[type="search"],
+.ui.form .fields.error .field input[type="tel"],
+.ui.form .fields.error .field input[type="time"],
+.ui.form .fields.error .field input[type="text"],
+.ui.form .fields.error .field input[type="url"],
+.ui.form .field.error textarea,
+.ui.form .field.error select,
+.ui.form .field.error input:not([type]),
+.ui.form .field.error input[type="date"],
+.ui.form .field.error input[type="datetime-local"],
+.ui.form .field.error input[type="email"],
+.ui.form .field.error input[type="number"],
+.ui.form .field.error input[type="password"],
+.ui.form .field.error input[type="search"],
+.ui.form .field.error input[type="tel"],
+.ui.form .field.error input[type="time"],
+.ui.form .field.error input[type="text"],
+.ui.form .field.error input[type="url"] {
+  background: #fff0f0;
+  border-color: #dbb1b1;
+  color: #d95c5c;
+  border-radius: 0em 0.2857rem 0.2857rem 0em;
+  box-shadow: 2px 0em 0em 0em #d95c5c inset;
+}
+.ui.form .field.error textarea:focus,
+.ui.form .field.error select:focus,
+.ui.form .field.error input:not([type]):focus,
+.ui.form .field.error input[type="date"]:focus,
+.ui.form .field.error input[type="datetime-local"]:focus,
+.ui.form .field.error input[type="email"]:focus,
+.ui.form .field.error input[type="number"]:focus,
+.ui.form .field.error input[type="password"]:focus,
+.ui.form .field.error input[type="search"]:focus,
+.ui.form .field.error input[type="tel"]:focus,
+.ui.form .field.error input[type="time"]:focus,
+.ui.form .field.error input[type="text"]:focus,
+.ui.form .field.error input[type="url"]:focus {
+  background: #fff0f0;
+  border-color: #dbb1b1;
+  color: #dc6868;
+  -webkit-appearance: none;
+  box-shadow: 2px 0em 0em 0em #dc6868 inset;
+}
+
+/* Preserve Native Select Stylings */
+.ui.form .field.error select {
+  -webkit-appearance: menulist-button;
+}
+
+/*------------------
+    Dropdown Error
+--------------------*/
+
+.ui.form .fields.error .field .ui.dropdown,
+.ui.form .fields.error .field .ui.dropdown .item,
+.ui.form .field.error .ui.dropdown,
+.ui.form .field.error .ui.dropdown .text,
+.ui.form .field.error .ui.dropdown .item {
+  background: #fff0f0;
+  color: #d95c5c;
+}
+.ui.form .fields.error .field .ui.dropdown,
+.ui.form .field.error .ui.dropdown {
+  border-color: #dbb1b1 !important;
+}
+.ui.form .fields.error .field .ui.dropdown:hover,
+.ui.form .field.error .ui.dropdown:hover {
+  border-color: #dbb1b1 !important;
+}
+.ui.form .fields.error .field .ui.dropdown:hover .menu,
+.ui.form .field.error .ui.dropdown:hover .menu {
+  border-color: #dbb1b1;
+}
+
+/* Hover */
+.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
+.ui.form .field.error .ui.dropdown .menu .item:hover {
+  background-color: #fbe7e7;
+}
+
+/* Active */
+.ui.form .fields.error .field .ui.dropdown .menu .active.item,
+.ui.form .field.error .ui.dropdown .menu .active.item {
+  background-color: #fdcfcf !important;
+}
+
+/*--------------------
+    Checkbox Error
+---------------------*/
+
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) label,
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box {
+  color: #d95c5c;
+}
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) label:before,
+.ui.form .fields.error .field .checkbox:not(.toggle):not(.slider) .box:before,
+.ui.form .field.error .checkbox:not(.toggle):not(.slider) .box:before {
+  background: #fff0f0;
+  border-color: #dbb1b1;
+}
+.ui.form .fields.error .field .checkbox label:after,
+.ui.form .field.error .checkbox label:after,
+.ui.form .fields.error .field .checkbox .box:after,
+.ui.form .field.error .checkbox .box:after {
+  color: #d95c5c;
+}
+
+/*--------------------
+       Disabled
+---------------------*/
+
+.ui.form .field :disabled,
+.ui.form .field.disabled {
+  opacity: 0.5;
+}
+.ui.form .field.disabled label {
+  opacity: 0.5;
+}
+.ui.form .field.disabled :disabled {
+  opacity: 1;
+}
+
+/*--------------
+    Loading
+---------------*/
+
+.ui.loading.form {
+  position: relative;
+  cursor: default;
+  point-events: none;
+  text-shadow: none !important;
+  color: transparent !important;
+  -webkit-transition: all 0s linear;
+          transition: all 0s linear;
+  z-index: 100;
+}
+.ui.loading.form:before {
+  position: absolute;
+  content: '';
+  top: 0%;
+  left: 0%;
+  background: rgba(255, 255, 255, 0.8);
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+}
+.ui.loading.form:after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  margin: -1.5em 0em 0em -1.5em;
+  width: 3em;
+  height: 3em;
+  -webkit-animation: form-spin 0.6s linear;
+          animation: form-spin 0.6s linear;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  border-radius: 500rem;
+  border-color: #aaaaaa rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
+  border-style: solid;
+  border-width: 0.2em;
+  box-shadow: 0px 0px 0px 1px transparent;
+  visibility: visible;
+  z-index: 101;
+}
+@-webkit-keyframes form-spin {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes form-spin {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+
+
+/*******************************
+         Element Types
+*******************************/
+
+
+/*--------------------
+     Required Field
+---------------------*/
+
+.ui.form .required.fields > .field > label:after,
+.ui.form .required.field > label:after,
+.ui.form .required.fields > .field > .checkbox:after,
+.ui.form .required.field > .checkbox:after {
+  margin: -0.2em 0em 0em 0.2em;
+  content: '*';
+  color: #d95c5c;
+}
+.ui.form .required.fields > .field > label:after,
+.ui.form .required.field > label:after {
+  display: inline-block;
+  vertical-align: top;
+}
+.ui.form .required.fields > .field > .checkbox:after,
+.ui.form .required.field > .checkbox:after {
+  position: absolute;
+  top: 0%;
+  left: 100%;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------------
+    Inverted Colors
+---------------------*/
+
+.ui.inverted.form label,
+.ui.form .inverted.segment label,
+.ui.form .inverted.segment .ui.checkbox label,
+.ui.form .inverted.segment .ui.checkbox .box,
+.ui.inverted.form .ui.checkbox label,
+.ui.inverted.form .ui.checkbox .box {
+  color: #ffffff;
+}
+
+/*--------------------
+     Field Groups
+---------------------*/
+
+
+/* Grouped Vertically */
+.ui.form .grouped.fields {
+  margin: 0em 0em 1em;
+}
+.ui.form .grouped.fields:last-child {
+  margin-bottom: 0em;
+}
+.ui.form .grouped.fields > label {
+  font-size: 0.9285em;
+}
+.ui.form .grouped.fields .field {
+  display: block;
+  float: none;
+  margin: 0.5em 0em;
+  padding: 0em;
+}
+
+/*--------------------
+        Fields
+---------------------*/
+
+
+/* Split fields */
+.ui.form .fields {
+  clear: both;
+}
+.ui.form .fields:after {
+  content: ' ';
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+.ui.form .fields > .field {
+  clear: none;
+  float: left;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.ui.form .fields > .field:first-child {
+  border-left: none;
+  box-shadow: none;
+}
+
+/* Other Combinations */
+.ui.form .two.fields > .fields,
+.ui.form .two.fields > .field {
+  width: 50%;
+}
+.ui.form .three.fields > .fields,
+.ui.form .three.fields > .field {
+  width: 33.33333333%;
+}
+.ui.form .four.fields > .fields,
+.ui.form .four.fields > .field {
+  width: 25%;
+}
+.ui.form .five.fields > .fields,
+.ui.form .five.fields > .field {
+  width: 20%;
+}
+.ui.form .six.fields > .fields,
+.ui.form .six.fields > .field {
+  width: 16.66666667%;
+}
+.ui.form .seven.fields > .fields,
+.ui.form .seven.fields > .field {
+  width: 14.28571429%;
+}
+.ui.form .eight.fields > .fields,
+.ui.form .eight.fields > .field {
+  width: 12.5%;
+}
+.ui.form .nine.fields > .fields,
+.ui.form .nine.fields > .field {
+  width: 11.11111111%;
+}
+.ui.form .ten.fields > .fields,
+.ui.form .ten.fields > .field {
+  width: 10%;
+}
+
+/* Swap to full width on mobile */
+@media only screen and (max-width: 767px) {
+  .ui.form .two.fields > .fields,
+  .ui.form .two.fields > .field,
+  .ui.form .three.fields > .fields,
+  .ui.form .three.fields > .field,
+  .ui.form .four.fields > .fields,
+  .ui.form .four.fields > .field,
+  .ui.form .five.fields > .fields,
+  .ui.form .five.fields > .field,
+  .ui.form .six.fields > .fields,
+  .ui.form .six.fields > .field,
+  .ui.form .seven.fields > .fields,
+  .ui.form .seven.fields > .field,
+  .ui.form .eight.fields > .fields,
+  .ui.form .eight.fields > .field,
+  .ui.form .nine.fields > .fields,
+  .ui.form .nine.fields > .field,
+  .ui.form .ten.fields > .fields,
+  .ui.form .ten.fields > .field {
+    width: 100% !important;
+    margin: 0em 0em 1em;
+    padding-left: 0%;
+    padding-right: 0%;
+  }
+}
+.ui.form .fields .field:first-child {
+  padding-left: 0%;
+}
+.ui.form .fields .field:last-child {
+  padding-right: 0%;
+}
+
+/* Sizing Combinations */
+.ui.form .fields .wide.field {
+  width: 6.25%;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+.ui.form .fields .wide.field:first-child {
+  padding-left: 0%;
+}
+.ui.form .fields .wide.field:last-child {
+  padding-right: 0%;
+}
+.ui.form .one.wide.field {
+  width: 6.25% !important;
+}
+.ui.form .two.wide.field {
+  width: 12.5% !important;
+}
+.ui.form .three.wide.field {
+  width: 18.75% !important;
+}
+.ui.form .four.wide.field {
+  width: 25% !important;
+}
+.ui.form .five.wide.field {
+  width: 31.25% !important;
+}
+.ui.form .six.wide.field {
+  width: 37.5% !important;
+}
+.ui.form .seven.wide.field {
+  width: 43.75% !important;
+}
+.ui.form .eight.wide.field {
+  width: 50% !important;
+}
+.ui.form .nine.wide.field {
+  width: 56.25% !important;
+}
+.ui.form .ten.wide.field {
+  width: 62.5% !important;
+}
+.ui.form .eleven.wide.field {
+  width: 68.75% !important;
+}
+.ui.form .twelve.wide.field {
+  width: 75% !important;
+}
+.ui.form .thirteen.wide.field {
+  width: 81.25% !important;
+}
+.ui.form .fourteen.wide.field {
+  width: 87.5% !important;
+}
+.ui.form .fifteen.wide.field {
+  width: 93.75% !important;
+}
+.ui.form .sixteen.wide.field {
+  width: 100% !important;
+}
+
+/* Swap to full width on mobile */
+@media only screen and (max-width: 767px) {
+  .ui.form .two.fields > .fields,
+  .ui.form .two.fields > .field,
+  .ui.form .three.fields > .fields,
+  .ui.form .three.fields > .field,
+  .ui.form .four.fields > .fields,
+  .ui.form .four.fields > .field,
+  .ui.form .five.fields > .fields,
+  .ui.form .five.fields > .field,
+  .ui.form .fields > .two.wide.field,
+  .ui.form .fields > .three.wide.field,
+  .ui.form .fields > .four.wide.field,
+  .ui.form .fields > .five.wide.field,
+  .ui.form .fields > .six.wide.field,
+  .ui.form .fields > .seven.wide.field,
+  .ui.form .fields > .eight.wide.field,
+  .ui.form .fields > .nine.wide.field,
+  .ui.form .fields > .ten.wide.field,
+  .ui.form .fields > .eleven.wide.field,
+  .ui.form .fields > .twelve.wide.field,
+  .ui.form .fields > .thirteen.wide.field,
+  .ui.form .fields > .fourteen.wide.field,
+  .ui.form .fields > .fifteen.wide.field,
+  .ui.form .fields > .sixteen.wide.field {
+    width: 100% !important;
+    margin: 0em 0em 1em;
+    padding-left: 0%;
+    padding-right: 0%;
+  }
+}
+
+/*--------------------
+    Inline Fields
+---------------------*/
+
+.ui.form .inline.fields {
+  margin: 0em 0em 1em;
+}
+.ui.form .inline.fields .field {
+  display: inline-block;
+  float: none;
+  margin: 0em 1em 0em 0em;
+  padding: 0em;
+}
+.ui.form .inline.fields .field > label,
+.ui.form .inline.fields .field > p,
+.ui.form .inline.fields .field > input,
+.ui.form .inline.fields .field > .ui.input,
+.ui.form .inline.field > label,
+.ui.form .inline.field > p,
+.ui.form .inline.field > input,
+.ui.form .inline.field > .ui.input {
+  display: inline-block;
+  width: auto;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  vertical-align: middle;
+  font-size: 0.9285em;
+}
+.ui.form .inline.fields .field > input,
+.ui.form .inline.fields .field > .ui.input,
+.ui.form .inline.field > input,
+.ui.form .inline.field > .ui.input {
+  font-size: 0.9285em;
+}
+.ui.form .inline.fields .field > .ui.checkbox label {
+  padding-left: 1.75em;
+}
+
+/* Label */
+.ui.form .inline.fields .field > :first-child,
+.ui.form .inline.field > :first-child {
+  margin: 0em 0.2857rem 0em 0em;
+}
+.ui.form .inline.fields .field > :only-child,
+.ui.form .inline.field > :only-child {
+  margin: 0em;
+}
+
+/*--------------------
+        Sizes
+---------------------*/
+
+
+/* Standard */
+.ui.small.form {
+  font-size: 0.875em;
+}
+
+/* Medium */
+.ui.form {
+  font-size: auto;
+}
+
+/* Large */
+.ui.large.form {
+  font-size: 1.125em;
+}
+
+/* Huge */
+.ui.huge.form {
+  font-size: 1.2em;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/
+

web/semantic/dist/components/header.css

@@ -0,0 +1,596 @@
+/*!
+ * # Semantic UI 1.11.4 - Header
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Header
+*******************************/
+
+
+/* Standard */
+.ui.header {
+  border: none;
+  margin: -webkit-calc(2rem -  0.165em ) 0em 1rem;
+  margin: calc(2rem -  0.165em ) 0em 1rem;
+  padding: 0em 0em;
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  line-height: 1.33em;
+  text-transform: none;
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.header:first-child {
+  margin-top: -0.165em;
+}
+.ui.header:last-child {
+  margin-bottom: 0em;
+}
+
+/*--------------
+   Sub Header
+---------------*/
+
+.ui.header .sub.header {
+  font-weight: normal;
+  margin: 0em;
+  padding: 0em;
+  font-size: 1.1428rem;
+  line-height: 1.2em;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+/*--------------
+      Icon
+---------------*/
+
+.ui.header > .icon {
+  display: table-cell;
+  opacity: 1;
+  font-size: 1.5em;
+  padding-top: 0.165em;
+  vertical-align: middle;
+}
+
+/* With Text Node */
+.ui.header .icon:only-child {
+  display: inline-block;
+  padding: 0em;
+  margin-right: 0.75rem;
+}
+
+/*-------------------
+        Image
+--------------------*/
+
+.ui.header > .image,
+.ui.header > img {
+  display: inline-block;
+  margin-top: 0.165em;
+  width: 2.5em;
+  height: auto;
+  vertical-align: middle;
+}
+.ui.header > .image:only-child,
+.ui.header > img:only-child {
+  margin-right: 0.75rem;
+}
+
+/*--------------
+     Content
+---------------*/
+
+.ui.header .content {
+  display: inline-block;
+  vertical-align: top;
+}
+
+/* After Image */
+.ui.header > img + .content,
+.ui.header > .image + .content {
+  padding-left: 0.75rem;
+  vertical-align: middle;
+}
+
+/* After Icon */
+.ui.header > .icon + .content {
+  padding-left: 0.75rem;
+  display: table-cell;
+  vertical-align: middle;
+}
+
+/*--------------
+ Loose Coupling
+---------------*/
+
+.ui.header .ui.label {
+  font-size: 1.28em;
+  margin: 0em 0em 0em 0.5rem;
+  vertical-align: middle;
+}
+
+/* Positioning */
+.ui.header + p {
+  margin-top: 0em;
+}
+
+
+/*******************************
+            Types
+*******************************/
+
+
+/*--------------
+     Page
+---------------*/
+
+h1.ui.header {
+  font-size: 2rem;
+}
+h2.ui.header {
+  font-size: 1.714rem;
+}
+h3.ui.header {
+  font-size: 1.28rem;
+}
+h4.ui.header {
+  font-size: 1.071rem;
+}
+h5.ui.header {
+  font-size: 1rem;
+}
+
+/* Sub Header */
+h1.ui.header .sub.header {
+  font-size: 1.4285rem;
+}
+h2.ui.header .sub.header {
+  font-size: 1.1428rem;
+}
+h3.ui.header .sub.header {
+  font-size: 1.1428rem;
+}
+h4.ui.header .sub.header {
+  font-size: 1rem;
+}
+h5.ui.header .sub.header {
+  font-size: 0.9285rem;
+}
+
+/*--------------
+ Content Heading
+---------------*/
+
+.ui.huge.header {
+  min-height: 1em;
+  font-size: 2em;
+}
+.ui.large.header {
+  font-size: 1.714em;
+}
+.ui.medium.header {
+  font-size: 1.28em;
+}
+.ui.small.header {
+  font-size: 1.071em;
+}
+.ui.tiny.header {
+  font-size: 1em;
+}
+
+/* Sub Header */
+.ui.huge.header .sub.header {
+  font-size: 1.4285rem;
+}
+.ui.large.header .sub.header {
+  font-size: 1.4285rem;
+}
+.ui.header .sub.header {
+  font-size: 1.1428rem;
+}
+.ui.small.header .sub.header {
+  font-size: 1rem;
+}
+.ui.tiny.header .sub.header {
+  font-size: 0.9285rem;
+}
+
+/*-------------------
+        Icon
+--------------------*/
+
+.ui.icon.header {
+  display: inline-block;
+  text-align: center;
+  margin: 2rem 0em 1rem;
+}
+.ui.icon.header:after {
+  content: '';
+  display: block;
+  height: 0px;
+  clear: both;
+  visibility: hidden;
+}
+.ui.icon.header:first-child {
+  margin-top: 0em;
+}
+.ui.icon.header .icon {
+  float: none;
+  display: block;
+  width: auto;
+  height: auto;
+  padding: 0em;
+  font-size: 3em;
+  margin: 0em auto 0.25rem;
+  opacity: 1;
+}
+.ui.icon.header .content {
+  display: block;
+}
+.ui.icon.header .circular.icon {
+  font-size: 2em;
+}
+.ui.icon.header .square.icon {
+  font-size: 2em;
+}
+.ui.block.icon.header .icon {
+  margin-bottom: 0em;
+}
+.ui.icon.header.aligned {
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+.ui.disabled.header {
+  opacity: 0.3;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*-------------------
+       Colors
+--------------------*/
+
+.ui.black.header {
+  color: #1b1c1d !important;
+}
+a.ui.black.header:hover {
+  color: #1b1c1d !important;
+}
+.ui.blue.header {
+  color: #3b83c0 !important;
+}
+a.ui.blue.header:hover {
+  color: #458ac6 !important;
+}
+.ui.green.header {
+  color: #5bbd72 !important;
+}
+a.ui.green.header:hover {
+  color: #66c17b !important;
+}
+.ui.orange.header {
+  color: #e07b53 !important;
+}
+a.ui.orange.header:hover {
+  color: #e28560 !important;
+}
+.ui.pink.header {
+  color: #d9499a !important;
+}
+a.ui.pink.header:hover {
+  color: #dc56a1 !important;
+}
+.ui.purple.header {
+  color: #564f8a !important;
+}
+a.ui.purple.header:hover {
+  color: #5c5594 !important;
+}
+.ui.red.header {
+  color: #d95c5c !important;
+}
+a.ui.red.header:hover {
+  color: #dc6868 !important;
+}
+.ui.teal.header {
+  color: #00b5ad !important;
+}
+a.ui.teal.header:hover {
+  color: #00c4bc !important;
+}
+.ui.yellow.header {
+  color: #f2c61f !important;
+}
+a.ui.yellow.header:hover {
+  color: #f3ca2d !important;
+}
+.ui.black.dividing.header {
+  border-bottom: 2px solid #1b1c1d;
+}
+.ui.blue.dividing.header {
+  border-bottom: 2px solid #3b83c0;
+}
+.ui.green.dividing.header {
+  border-bottom: 2px solid #5bbd72;
+}
+.ui.orange.dividing.header {
+  border-bottom: 2px solid #e07b53;
+}
+.ui.pink.dividing.header {
+  border-bottom: 2px solid #d9499a;
+}
+.ui.purple.dividing.header {
+  border-bottom: 2px solid #564f8a;
+}
+.ui.red.dividing.header {
+  border-bottom: 2px solid #d95c5c;
+}
+.ui.teal.dividing.header {
+  border-bottom: 2px solid #00b5ad;
+}
+.ui.yellow.dividing.header {
+  border-bottom: 2px solid #f2c61f;
+}
+
+/*-------------------
+      Inverted
+--------------------*/
+
+.ui.inverted.header {
+  color: #ffffff;
+}
+.ui.inverted.header .sub.header {
+  color: rgba(255, 255, 255, 0.85);
+}
+.ui.inverted.attached.header {
+  background: #333333 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
+  background: #333333 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
+  box-shadow: none;
+}
+.ui.inverted.block.header {
+  background: #333333 -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
+  background: #333333 linear-gradient(transparent, rgba(0, 0, 0, 0.05));
+  box-shadow: none;
+}
+
+/*-------------------
+   Inverted Colors
+--------------------*/
+
+.ui.inverted.black.header {
+  color: #aaaaaa !important;
+}
+a.ui.inverted.black.header:hover {
+  color: #b2b2b2 !important;
+}
+.ui.inverted.blue.header {
+  color: #54c8ff !important;
+}
+a.ui.inverted.blue.header:hover {
+  color: #63cdff !important;
+}
+.ui.inverted.green.header {
+  color: #2ecc40 !important;
+}
+a.ui.inverted.green.header:hover {
+  color: #37d249 !important;
+}
+.ui.inverted.orange.header {
+  color: #ff851b !important;
+}
+a.ui.inverted.orange.header:hover {
+  color: #ff8d2a !important;
+}
+.ui.inverted.pink.header {
+  color: #ff8edf !important;
+}
+a.ui.inverted.pink.header:hover {
+  color: #ff9de3 !important;
+}
+.ui.inverted.purple.header {
+  color: #cdc6ff !important;
+}
+a.ui.inverted.purple.header:hover {
+  color: #dad5ff !important;
+}
+.ui.inverted.red.header {
+  color: #ff695e !important;
+}
+a.ui.inverted.red.header:hover {
+  color: #ff776d !important;
+}
+.ui.inverted.teal.header {
+  color: #6dffff !important;
+}
+a.ui.inverted.teal.header:hover {
+  color: #7cffff !important;
+}
+.ui.inverted.yellow.header {
+  color: #ffe21f !important;
+}
+a.ui.inverted.yellow.header:hover {
+  color: #ffe42e !important;
+}
+.ui.inverted.block.header {
+  border-bottom: none;
+}
+
+/*-------------------
+       Aligned
+--------------------*/
+
+.ui.left.aligned.header {
+  text-align: left;
+}
+.ui.right.aligned.header {
+  text-align: right;
+}
+.ui.centered.header,
+.ui.center.aligned.header {
+  text-align: center;
+}
+.ui.justified.header {
+  text-align: justify;
+}
+.ui.justified.header:after {
+  display: inline-block;
+  content: '';
+  width: 100%;
+}
+
+/*-------------------
+       Floated
+--------------------*/
+
+.ui.floated.header,
+.ui[class*="left floated"].header {
+  float: left;
+  margin-top: 0em;
+  margin-right: 0.5em;
+}
+.ui[class*="right floated"].header {
+  float: right;
+  margin-top: 0em;
+  margin-left: 0.5em;
+}
+
+/*-------------------
+       Fittted
+--------------------*/
+
+.ui.fitted.header {
+  padding: 0em;
+}
+
+/*-------------------
+      Dividing
+--------------------*/
+
+.ui.dividing.header {
+  padding-bottom: 0.25rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+.ui.dividing.header .sub.header {
+  padding-bottom: 0.25rem;
+}
+.ui.dividing.header .icon {
+  margin-bottom: 0em;
+}
+.ui.inverted.dividing.header {
+  border-bottom-color: rgba(255, 255, 255, 0.2);
+}
+
+/*-------------------
+        Block
+--------------------*/
+
+.ui.block.header {
+  background: #f0f0f0;
+  padding: 0.75rem 1rem;
+  box-shadow: none;
+  border: 1px solid #d4d4d5;
+  border-radius: 0.3125rem;
+}
+.ui.tiny.block.header {
+  font-size: 1em;
+}
+.ui.small.block.header {
+  font-size: 1.071em;
+}
+.ui.block.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+  font-size: 1.28em;
+}
+.ui.large.block.header {
+  font-size: 1.714em;
+}
+.ui.huge.block.header {
+  font-size: 2em;
+}
+
+/*-------------------
+       Attached
+--------------------*/
+
+.ui.attached.header {
+  background: #ffffff;
+  padding: 0.75rem 1rem;
+  margin-left: -1px;
+  margin-right: -1px;
+  box-shadow: none;
+  border: 1px solid #d4d4d5;
+}
+.ui.attached.block.header {
+  background: #f0f0f0;
+}
+.ui.attached:not(.top):not(.bottom).header {
+  margin-top: 0em;
+  margin-bottom: 0em;
+  border-top: none;
+  border-bottom: none;
+  border-radius: 0em;
+}
+.ui.top.attached.header {
+  margin-bottom: 0em;
+  border-bottom: none;
+  border-radius: 0.3125rem 0.3125rem 0em 0em;
+}
+.ui.bottom.attached.header {
+  margin-top: 0em;
+  border-top: none;
+  border-radius: 0em 0em 0.3125rem 0.3125rem;
+}
+
+/* Attached Sizes */
+.ui.tiny.attached.header {
+  font-size: 0.8571em;
+}
+.ui.small.attached.header {
+  font-size: 0.9285em;
+}
+.ui.attached.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+  font-size: 1em;
+}
+.ui.large.attached.header {
+  font-size: 1.0714em;
+}
+.ui.huge.attached.header {
+  font-size: 1.1428em;
+}
+
+/*-------------------
+        Sizing
+--------------------*/
+
+.ui.header:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
+  font-size: 1.28em;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/
+

web/semantic/dist/components/image.css

@@ -0,0 +1,288 @@
+/*!
+ * # Semantic UI 1.11.4 - Image
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+             Image
+*******************************/
+
+.ui.image {
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  max-width: 100%;
+  background-color: transparent;
+}
+img.ui.image {
+  display: block;
+}
+.ui.image svg,
+.ui.image img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+
+/*******************************
+            States
+*******************************/
+
+.ui.hidden.images,
+.ui.hidden.image {
+  display: none;
+}
+.ui.disabled.images,
+.ui.disabled.image {
+  cursor: default;
+  opacity: 0.3;
+}
+
+
+/*******************************
+          Variations
+*******************************/
+
+
+/*--------------
+     Inline
+---------------*/
+
+.ui.inline.image,
+.ui.inline.image svg,
+.ui.inline.image img {
+  display: inline-block;
+}
+
+/*------------------
+  Vertical Aligned
+-------------------*/
+
+.ui.top.aligned.images .image,
+.ui.top.aligned.image,
+.ui.top.aligned.image svg,
+.ui.top.aligned.image img {
+  display: inline-block;
+  vertical-align: top;
+}
+.ui.middle.aligned.images .image,
+.ui.middle.aligned.image,
+.ui.middle.aligned.image svg,
+.ui.middle.aligned.image img {
+  display: inline-block;
+  vertical-align: middle;
+}
+.ui.bottom.aligned.images .image,
+.ui.bottom.aligned.image,
+.ui.bottom.aligned.image svg,
+.ui.bottom.aligned.image img {
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+/*--------------
+     Rounded
+---------------*/
+
+.ui.rounded.images .image,
+.ui.rounded.images img,
+.ui.rounded.images svg,
+.ui.rounded.image img,
+.ui.rounded.image svg,
+.ui.rounded.image {
+  border-radius: 0.3125em;
+}
+
+/*--------------
+    Bordered
+---------------*/
+
+.ui.bordered.images .image,
+.ui.bordered.images img,
+.ui.bordered.images svg,
+.ui.bordered.image img,
+.ui.bordered.image svg,
+img.ui.bordered.image {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+/*--------------
+    Circular
+---------------*/
+
+.ui.circular.images,
+.ui.circular.image {
+  overflow: hidden;
+}
+.ui.circular.images .image,
+.ui.circular.images img,
+.ui.circular.images svg,
+.ui.circular.image img,
+.ui.circular.image svg,
+.ui.circular.image {
+  border-radius: 500rem;
+}
+
+/*--------------
+     Fluid
+---------------*/
+
+.ui.fluid.images,
+.ui.fluid.image,
+.ui.fluid.images img,
+.ui.fluid.images svg,
+.ui.fluid.image svg,
+.ui.fluid.image img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+/*--------------
+     Avatar
+---------------*/
+
+.ui.avatar.images .image,
+.ui.avatar.images img,
+.ui.avatar.images svg,
+.ui.avatar.image img,
+.ui.avatar.image svg,
+.ui.avatar.image {
+  margin-right: 0.25em;
+  display: inline-block;
+  width: 2.5em;
+  height: 2.5em;
+  border-radius: 500rem;
+}
+
+/*-------------------
+       Floated
+--------------------*/
+
+.ui.floated.image,
+.ui.floated.images {
+  float: left;
+  margin-right: 1em;
+  margin-bottom: 1em;
+}
+.ui.right.floated.images,
+.ui.right.floated.image {
+  float: right;
+  margin-right: 0em;
+  margin-bottom: 1em;
+  margin-left: 1em;
+}
+.ui.floated.images:last-child,
+.ui.floated.image:last-child {
+  margin-bottom: 0em;
+}
+.ui.centered.images,
+.ui.centered.image {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/*--------------
+     Sizes
+---------------*/
+
+.ui.mini.images .image,
+.ui.mini.images img,
+.ui.mini.images svg,
+.ui.mini.image {
+  width: 20px;
+  height: auto;
+  font-size: 0.71428571rem;
+}
+.ui.tiny.images .image,
+.ui.tiny.images img,
+.ui.tiny.images svg,
+.ui.tiny.image {
+  width: 80px;
+  height: auto;
+  font-size: 0.85714286rem;
+}
+.ui.small.images .image,
+.ui.small.images img,
+.ui.small.images svg,
+.ui.small.image {
+  width: 150px;
+  height: auto;
+  font-size: 0.92857143rem;
+}
+.ui.medium.images .image,
+.ui.medium.images img,
+.ui.medium.images svg,
+.ui.medium.image {
+  width: 300px;
+  height: auto;
+  font-size: 1rem;
+}
+.ui.large.images .image,
+.ui.large.images img,
+.ui.large.images svg,
+.ui.large.image {
+  width: 450px;
+  height: auto;
+  font-size: 1.14285714rem;
+}
+.ui.big.images .image,
+.ui.big.images img,
+.ui.big.images svg,
+.ui.big.image {
+  width: 600px;
+  height: auto;
+  font-size: 1.28571429rem;
+}
+.ui.huge.images .image,
+.ui.huge.images img,
+.ui.huge.images svg,
+.ui.huge.image {
+  width: 800px;
+  height: auto;
+  font-size: 1.42857143rem;
+}
+.ui.massive.images .image,
+.ui.massive.images img,
+.ui.massive.images svg,
+.ui.massive.image {
+  width: 960px;
+  height: auto;
+  font-size: 1.71428571rem;
+}
+
+
+/*******************************
+              Groups
+*******************************/
+
+.ui.images {
+  font-size: 0em;
+  margin: 0em -0.25rem 0rem;
+}
+.ui.images .image,
+.ui.images img,
+.ui.images svg {
+  display: inline-block;
+  margin: 0em 0.25rem 0.5rem;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/
+

web/semantic/dist/components/image.min.css

@@ -0,0 +1,10 @@
+/*!
+ * # Semantic UI 1.11.4 - Image
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */.ui.image{position:relative;display:inline-block;vertical-align:middle;max-width:100%;background-color:transparent}img.ui.image{display:block}.ui.image img,.ui.image svg{display:block;max-width:100%;height:auto}.ui.hidden.image,.ui.hidden.images{display:none}.ui.disabled.image,.ui.disabled.images{cursor:default;opacity:.3}.ui.inline.image,.ui.inline.image img,.ui.inline.image svg{display:inline-block}.ui.top.aligned.image,.ui.top.aligned.image img,.ui.top.aligned.image svg,.ui.top.aligned.images .image{display:inline-block;vertical-align:top}.ui.middle.aligned.image,.ui.middle.aligned.image img,.ui.middle.aligned.image svg,.ui.middle.aligned.images .image{display:inline-block;vertical-align:middle}.ui.bottom.aligned.image,.ui.bottom.aligned.image img,.ui.bottom.aligned.image svg,.ui.bottom.aligned.images .image{display:inline-block;vertical-align:bottom}.ui.rounded.image,.ui.rounded.image img,.ui.rounded.image svg,.ui.rounded.images .image,.ui.rounded.images img,.ui.rounded.images svg{border-radius:.3125em}.ui.bordered.image img,.ui.bordered.image svg,.ui.bordered.images .image,.ui.bordered.images img,.ui.bordered.images svg,img.ui.bordered.image{border:1px solid rgba(0,0,0,.1)}.ui.circular.image,.ui.circular.images{overflow:hidden}.ui.circular.image,.ui.circular.image img,.ui.circular.image svg,.ui.circular.images .image,.ui.circular.images img,.ui.circular.images svg{border-radius:500rem}.ui.fluid.image,.ui.fluid.image img,.ui.fluid.image svg,.ui.fluid.images,.ui.fluid.images img,.ui.fluid.images svg{display:block;width:100%;height:auto}.ui.avatar.image,.ui.avatar.image img,.ui.avatar.image svg,.ui.avatar.images .image,.ui.avatar.images img,.ui.avatar.images svg{margin-right:.25em;display:inline-block;width:2.5em;height:2.5em;border-radius:500rem}.ui.floated.image,.ui.floated.images{float:left;margin-right:1em;margin-bottom:1em}.ui.right.floated.image,.ui.right.floated.images{float:right;margin-right:0;margin-bottom:1em;margin-left:1em}.ui.floated.image:last-child,.ui.floated.images:last-child{margin-bottom:0}.ui.centered.image,.ui.centered.images{margin-left:auto;margin-right:auto}.ui.mini.image,.ui.mini.images .image,.ui.mini.images img,.ui.mini.images svg{width:20px;height:auto;font-size:.71428571rem}.ui.tiny.image,.ui.tiny.images .image,.ui.tiny.images img,.ui.tiny.images svg{width:80px;height:auto;font-size:.85714286rem}.ui.small.image,.ui.small.images .image,.ui.small.images img,.ui.small.images svg{width:150px;height:auto;font-size:.92857143rem}.ui.medium.image,.ui.medium.images .image,.ui.medium.images img,.ui.medium.images svg{width:300px;height:auto;font-size:1rem}.ui.large.image,.ui.large.images .image,.ui.large.images img,.ui.large.images svg{width:450px;height:auto;font-size:1.14285714rem}.ui.big.image,.ui.big.images .image,.ui.big.images img,.ui.big.images svg{width:600px;height:auto;font-size:1.28571429rem}.ui.huge.image,.ui.huge.images .image,.ui.huge.images img,.ui.huge.images svg{width:800px;height:auto;font-size:1.42857143rem}.ui.massive.image,.ui.massive.images .image,.ui.massive.images img,.ui.massive.images svg{width:960px;height:auto;font-size:1.71428571rem}.ui.images{font-size:0;margin:0 -.25rem}.ui.images .image,.ui.images img,.ui.images svg{display:inline-block;margin:0 .25rem .5rem}

web/semantic/dist/components/input.css

@@ -0,0 +1,439 @@
+/*!
+ * # Semantic UI 1.11.4 - Input
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+           Standard
+*******************************/
+
+
+/*--------------------
+        Inputs
+---------------------*/
+
+.ui.input {
+  position: relative;
+  display: inline-block;
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.input input {
+  margin: 0em;
+  width: 100%;
+  outline: none;
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  text-align: left;
+  line-height: 1.2142em;
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  padding: 0.67861em 1em;
+  background: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  color: rgba(0, 0, 0, 0.8);
+  border-radius: 0.2857rem;
+  -webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+          transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+  box-shadow: none;
+}
+
+/*--------------------
+      Placeholder
+---------------------*/
+
+
+/* browsers require these rules separate */
+.ui.input input::-webkit-input-placeholder {
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.input input::-moz-placeholder {
+  color: rgba(0, 0, 0, 0.4);
+}
+
+
+/*******************************
+            States
+*******************************/
+
+
+/*--------------------
+        Active
+---------------------*/
+
+.ui.input input:active,
+.ui.input.down input {
+  border-color: rgba(0, 0, 0, 0.3);
+  background: #fafafa;
+  color: rgba(0, 0, 0, 0.8);
+  box-shadow: none;
+}
+
+/*--------------------
+       Loading
+---------------------*/
+
+.ui.loading.loading.input > i.icon:before {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  margin: -0.64285em 0em 0em -0.64285em;
+  width: 1.2857em;
+  height: 1.2857em;
+  border-radius: 500rem;
+  border: 0.2em solid rgba(0, 0, 0, 0.1);
+}
+.ui.loading.loading.input > i.icon:after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: 50%;
+  margin: -0.64285em 0em 0em -0.64285em;
+  width: 1.2857em;
+  height: 1.2857em;
+  -webkit-animation: button-spin 0.6s linear;
+          animation: button-spin 0.6s linear;
+  -webkit-animation-iteration-count: infinite;
+          animation-iteration-count: infinite;
+  border-radius: 500rem;
+  border-color: #aaaaaa transparent transparent;
+  border-style: solid;
+  border-width: 0.2em;
+  box-shadow: 0px 0px 0px 1px transparent;
+}
+
+/*--------------------
+        Focus
+---------------------*/
+
+.ui.input.focus input,
+.ui.input input:focus {
+  border-color: rgba(39, 41, 43, 0.3);
+  background: #ffffff;
+  color: rgba(0, 0, 0, 0.8);
+  box-shadow: none;
+}
+.ui.input.focus input input::-webkit-input-placeholder,
+.ui.input input:focus input::-webkit-input-placeholder {
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.input.focus input input::-moz-placeholder,
+.ui.input input:focus input::-moz-placeholder {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/*--------------------
+        Error
+---------------------*/
+
+.ui.input.error input {
+  background-color: #fff0f0;
+  border-color: #dbb1b1;
+  color: #d95c5c;
+  box-shadow: none;
+}
+
+/* Error Placeholder */
+.ui.input.error input ::-webkit-input-placeholder {
+  color: rgba(255, 80, 80, 0.4);
+}
+.ui.input.error input ::-moz-placeholder {
+  color: rgba(255, 80, 80, 0.4);
+}
+
+/* Focused Error Placeholder */
+.ui.input.error input :focus::-webkit-input-placeholder {
+  color: rgba(255, 80, 80, 0.7);
+}
+.ui.input.error input :focus::-moz-placeholder {
+  color: rgba(255, 80, 80, 0.7);
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*--------------------
+      Transparent
+---------------------*/
+
+.ui.transparent.input input {
+  border-color: transparent;
+  background-color: transparent;
+  padding: 0em;
+}
+
+/* Transparent Icon */
+.ui.transparent.icon.input > i.icon {
+  width: 1.25em;
+}
+.ui.transparent.icon.input > input {
+  padding-left: 0em !important;
+  padding-right: 2em !important;
+}
+.ui.transparent[class*="left icon"].input > input {
+  padding-left: 0em !important;
+  padding-left: 2em !important;
+}
+
+/* Transparent Inverted */
+.ui.transparent.inverted.input input::-moz-placeholder {
+  color: rgba(255, 255, 255, 0.5);
+}
+.ui.transparent.inverted.input {
+  color: #ffffff;
+}
+.ui.transparent.inverted.input input {
+  color: inherit;
+}
+
+/*--------------------
+         Icon
+---------------------*/
+
+.ui.icon.input > i.icon {
+  cursor: default;
+  position: absolute;
+  text-align: center;
+  top: 0px;
+  right: 0px;
+  margin: 0em;
+  height: 100%;
+  width: 2.82142em;
+  opacity: 0.5;
+  border-radius: 0em 0.2857rem 0.2857rem 0em;
+  -webkit-transition: opacity 0.3s ease;
+          transition: opacity 0.3s ease;
+}
+.ui.icon.input input {
+  padding-right: 2.82142em !important;
+}
+.ui.icon.input > i.icon:before,
+.ui.icon.input > i.icon:after {
+  left: 0;
+  position: absolute;
+  text-align: center;
+  top: 50%;
+  width: 100%;
+  margin-top: -0.5em;
+}
+.ui.icon.input > i.link.icon {
+  cursor: pointer;
+}
+.ui.icon.input > i.circular.icon {
+  top: 0.35em;
+  right: 0.5em;
+}
+
+/* Left Icon Input */
+.ui[class*="left icon"].input > i.icon {
+  right: auto;
+  left: 1px;
+  border-radius: 0.2857rem 0em 0em 0.2857rem;
+}
+.ui[class*="left icon"].input > i.circular.icon {
+  right: auto;
+  left: 0.5em;
+}
+.ui[class*="left icon"].input > input {
+  padding-left: 2.82142em !important;
+  padding-right: 1em !important;
+}
+
+/* Focus */
+.ui.icon.input > input:focus ~ i.icon {
+  opacity: 1;
+}
+
+/*--------------------
+        Labeled
+---------------------*/
+
+
+/* Adjacent Label */
+.ui.labeled.input {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+.ui.labeled.input > .label {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
+  margin: 0;
+  font-size: 1em;
+}
+.ui.labeled.input > .label:not(.corner) {
+  padding-top: 0.78571em;
+  padding-bottom: 0.78571em;
+}
+
+/* Fluid Labeled */
+.ui.fluid.labeled.input {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+/* Label on Left */
+.ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > input {
+  border-left: none;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.ui.labeled.input:not([class*="corner labeled"]):not([class*="right labeled"]) > .label {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+/* Label on Right */
+.ui[class*="right labeled"].input > input {
+  border-right: none;
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+.ui[class*="right labeled"].input > .label {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+/* Corner Label */
+.ui.labeled.input .corner.label {
+  top: 1px;
+  right: 1px;
+  font-size: 0.75em;
+  border-radius: 0em 0.2857rem 0em 0em;
+}
+.ui.labeled.input input {
+  padding-right: 2.5em !important;
+}
+
+/* Spacing with corner label */
+.ui[class*="corner labeled"].icon.input:not(.left) > input {
+  padding-right: 3.25em !important;
+}
+.ui[class*="corner labeled"].icon.input:not(.left) > .icon {
+  margin-right: 1.25em;
+}
+
+/*--------------------
+        Action
+---------------------*/
+
+.ui.action.input {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+.ui.action.input > .button,
+.ui.action.input > .buttons {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1 0 auto;
+      -ms-flex: 1 0 auto;
+          flex: 1 0 auto;
+}
+.ui.action.input > .button,
+.ui.action.input > .buttons > .button {
+  padding-top: 0.78571em;
+  padding-bottom: 0.78571em;
+  margin: 0;
+}
+
+/* Fluid */
+.ui.fluid.action.input {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+/* Button on Right */
+.ui.action.input:not([class*="left action"]) > input {
+  border-right: none;
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+.ui.action.input:not([class*="left action"]) > .button,
+.ui.action.input:not([class*="left action"]) > .buttons > .button {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+/* Button on Left */
+.ui[class*="left action"].input > .button,
+.ui[class*="left action"].input > .buttons > .button {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+.ui[class*="left action"].input > input {
+  border-left: none;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+/*--------------------
+       Inverted
+---------------------*/
+
+
+/* Standard */
+.ui.inverted.input input {
+  border: none;
+}
+
+/*--------------------
+        Fluid
+---------------------*/
+
+.ui.fluid.input {
+  display: block;
+}
+
+/*--------------------
+        Size
+---------------------*/
+
+.ui.mini.input {
+  font-size: 0.8125rem;
+}
+.ui.small.input {
+  font-size: 0.875rem;
+}
+.ui.input {
+  font-size: 1rem;
+}
+.ui.large.input {
+  font-size: 1.125rem;
+}
+.ui.big.input {
+  font-size: 1.25rem;
+}
+.ui.huge.input {
+  font-size: 1.375rem;
+}
+.ui.massive.input {
+  font-size: 1.5rem;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/
+

web/semantic/dist/components/item.css

@@ -0,0 +1,456 @@
+/*!
+ * # Semantic UI 1.11.4 - Item
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributorss
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Standard
+*******************************/
+
+
+/*--------------
+      Item
+---------------*/
+
+.ui.items > .item {
+  table-layout: fixed;
+  display: table;
+  margin: 1em 0em;
+  width: 100%;
+  min-height: 0px;
+  background: transparent;
+  padding: 0em;
+  border: none;
+  border-radius: 0rem;
+  box-shadow: none;
+  -webkit-transition: box-shadow 0.2s ease;
+          transition: box-shadow 0.2s ease;
+  z-index: '';
+}
+.ui.items > .item a {
+  cursor: pointer;
+}
+
+/*--------------
+      Items
+---------------*/
+
+.ui.items {
+  margin: 1.5em 0em;
+}
+.ui.items:first-child {
+  margin-top: 0em !important;
+}
+.ui.items:last-child {
+  margin-bottom: 0em !important;
+}
+
+/*--------------
+      Item
+---------------*/
+
+.ui.items > .item {
+  min-width: 100%;
+}
+.ui.items > .item:after {
+  display: block;
+  content: ' ';
+  height: 0px;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+.ui.items > .item:first-child {
+  margin-top: 0em;
+}
+.ui.items > .item:last-child {
+  margin-bottom: 0em;
+}
+
+/*--------------
+     Images
+---------------*/
+
+.ui.items > .item > .image {
+  position: relative;
+  display: table-cell;
+  float: none;
+  margin: 0em;
+  padding: 0em;
+  max-height: '';
+  vertical-align: top;
+}
+.ui.items > .item > .image > img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0.125rem;
+  border: none;
+}
+.ui.items > .item > .image:only-child > img {
+  border-radius: 0rem;
+}
+
+/*--------------
+     Content
+---------------*/
+
+.ui.items > .item > .content {
+  display: block;
+  background: none;
+  margin: 0em;
+  padding: 0em;
+  box-shadow: none;
+  font-size: 1em;
+  border: none;
+  border-radius: 0em;
+}
+.ui.items > .item > .content:after {
+  display: block;
+  content: ' ';
+  height: 0px;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+.ui.items > .item > .image + .content {
+  width: 100%;
+  display: table-cell;
+  margin-left: 0em;
+  vertical-align: top;
+  padding-left: 1.5em;
+}
+.ui.items > .item > .content > .header {
+  display: block;
+  margin: -0.165em 0em 0em;
+  font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-weight: bold;
+  color: rgba(0, 0, 0, 0.85);
+}
+
+/* Default Header Size */
+.ui.items > .item > .content > .header:not(.ui) {
+  font-size: 1.2em;
+}
+
+/*--------------
+     Floated
+---------------*/
+
+.ui.items > .item [class*="left floated"] {
+  float: left;
+}
+.ui.items > .item [class*="right floated"] {
+  float: right;
+}
+
+/*--------------
+  Content Image
+---------------*/
+
+.ui.items > .item .content img {
+  vertical-align: middle;
+  width: '';
+}
+.ui.items > .item img.avatar,
+.ui.items > .item .avatar img {
+  width: '';
+  height: '';
+  border-radius: 500rem;
+}
+
+/*--------------
+   Description
+---------------*/
+
+.ui.items > .item > .content > .description {
+  margin-top: 0.6em;
+  max-width: 550px;
+  font-size: 1em;
+  line-height: 1.33;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/*--------------
+    Paragraph
+---------------*/
+
+.ui.items > .item > .content p {
+  margin: 0em 0em 0.5em;
+}
+.ui.items > .item > .content p:last-child {
+  margin-bottom: 0em;
+}
+
+/*--------------
+      Meta
+---------------*/
+
+.ui.items > .item .meta {
+  font-size: 1em;
+  line-height: 1em;
+  color: rgba(0, 0, 0, 0.6);
+}
+.ui.items > .item .meta * {
+  margin-right: 0.3em;
+}
+.ui.items > .item .meta :last-child {
+  margin-right: 0em;
+}
+.ui.items > .item .meta [class*="right floated"] {
+  margin-right: 0em;
+  margin-left: 0.3em;
+}
+
+/*--------------
+      Links
+---------------*/
+
+
+/* Generic */
+.ui.items > .item > .content a:not(.ui) {
+  color: '';
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
+}
+.ui.items > .item > .content a:not(.ui):hover {
+  color: '';
+}
+
+/* Header */
+.ui.items > .item > .content > a.header {
+  color: rgba(0, 0, 0, 0.85);
+}
+.ui.items > .item > .content > a.header:hover {
+  color: #00b2f3;
+}
+
+/* Meta */
+.ui.items > .item .meta > a:not(.ui) {
+  color: rgba(0, 0, 0, 0.4);
+}
+.ui.items > .item .meta > a:not(.ui):hover {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/*--------------
+     Labels
+---------------*/
+
+
+/*-----Star----- */
+
+
+/* Icon */
+.ui.items > .item > .content .favorite.icon {
+  cursor: pointer;
+  opacity: 0.75;
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
+}
+.ui.items > .item > .content .favorite.icon:hover {
+  opacity: 1;
+  color: #ffb70a;
+}
+.ui.items > .item > .content .active.favorite.icon {
+  color: #ffe623;
+}
+
+/*-----Like----- */
+
+
+/* Icon */
+.ui.items > .item > .content .like.icon {
+  cursor: pointer;
+  opacity: 0.75;
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
+}
+.ui.items > .item > .content .like.icon:hover {
+  opacity: 1;
+  color: #ff2733;
+}
+.ui.items > .item > .content .active.like.icon {
+  color: #ff2733;
+}
+
+/*----------------
+  Extra Content
+-----------------*/
+
+.ui.items > .item .extra {
+  display: block;
+  position: relative;
+  background: none;
+  margin: 0.5rem 0em 0em;
+  width: 100%;
+  padding: 0em 0em 0em;
+  top: 0em;
+  left: 0em;
+  color: rgba(0, 0, 0, 0.4);
+  box-shadow: none;
+  -webkit-transition: color 0.2s ease;
+          transition: color 0.2s ease;
+  border-top: none;
+}
+.ui.items > .item .extra > * {
+  margin: 0.25rem 0.5rem 0.25rem 0em;
+}
+.ui.items > .item .extra > [class*="right floated"] {
+  margin: 0.25rem 0em 0.25rem 0.5rem;
+}
+.ui.items > .item .extra:after {
+  display: block;
+  content: ' ';
+  height: 0px;
+  clear: both;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+
+/*******************************
+          Responsive
+*******************************/
+
+
+/* Default Image Width */
+.ui.items > .item > .image:not(.ui) {
+  width: 175px;
+}
+
+/* Tablet Only */
+@media only screen and (min-width: 768px) and (max-width: 991px) {
+  .ui.items > .item {
+    margin: 1em 0em;
+  }
+  .ui.items > .item > .image:not(.ui) {
+    width: 150px;
+  }
+  .ui.items > .item > .image + .content {
+    display: block;
+    padding: 0em 0em 0em 1em;
+  }
+}
+
+/* Mobily Only */
+@media only screen and (max-width: 767px) {
+  .ui.items > .item {
+    margin: 2em 0em;
+  }
+  .ui.items > .item > .image {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .ui.items > .item > .image,
+  .ui.items > .item > .image > img {
+    max-width: 100% !important;
+    width: auto !important;
+    max-height: 250px !important;
+  }
+  .ui.items > .item > .image + .content {
+    display: block;
+    padding: 1.5em 0em 0em;
+  }
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*-------------------
+       Aligned
+--------------------*/
+
+.ui.items > .item > .image + [class*="top aligned"].content {
+  vertical-align: top;
+}
+.ui.items > .item > .image + [class*="middle aligned"].content {
+  vertical-align: middle;
+}
+.ui.items > .item > .image + [class*="bottom aligned"].content {
+  vertical-align: bottom;
+}
+
+/*--------------
+     Relaxed
+---------------*/
+
+.ui.relaxed.items > .item {
+  margin: 1.5em 0em;
+}
+.ui[class*="very relaxed"].items > .item {
+  margin: 2em 0em;
+}
+
+/*-------------------
+      Divided
+--------------------*/
+
+.ui.divided.items > .item {
+  border-top: 1px solid rgba(39, 41, 43, 0.15);
+  margin: 0em;
+  padding: 1em 0em;
+}
+.ui.divided.items > .item:first-child {
+  border-top: none;
+  margin-top: 0em !important;
+  padding-top: 0em !important;
+}
+.ui.divided.items > .item:last-child {
+  margin-bottom: 0em !important;
+  padding-bottom: 0em !important;
+}
+
+/* Relaxed Divided */
+.ui.relaxed.divided.items > .item {
+  margin: 0em;
+  padding: 1.5em 0em;
+}
+.ui[class*="very relaxed"].divided.items > .item {
+  margin: 0em;
+  padding: 2em 0em;
+}
+
+/*-------------------
+        Link
+--------------------*/
+
+.ui.items a.item:hover,
+.ui.link.items > .item:hover {
+  cursor: pointer;
+}
+.ui.items a.item:hover .content .header,
+.ui.link.items > .item:hover .content .header {
+  color: #00b2f3;
+}
+
+/*--------------
+      Size
+---------------*/
+
+.ui.items > .item {
+  font-size: 1em;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+    User Variable Overrides
+*******************************/
+

web/semantic/dist/components/label.css

@@ -0,0 +1,963 @@
+/*!
+ * # Semantic UI 1.11.4 - Label
+ * http://github.com/semantic-org/semantic-ui/
+ *
+ *
+ * Copyright 2014 Contributors
+ * Released under the MIT license
+ * http://opensource.org/licenses/MIT
+ *
+ */
+
+
+/*******************************
+            Label
+*******************************/
+
+.ui.label {
+  display: inline-block;
+  vertical-align: baseline;
+  line-height: 1;
+  margin: 0em 0.125em;
+  background-color: #e8e8e8;
+  border-color: #e8e8e8;
+  background-image: none;
+  padding: 0.6em 0.8em;
+  color: rgba(0, 0, 0, 0.6);
+  text-transform: none;
+  font-weight: bold;
+  border-radius: 0.2857rem;
+  box-sizing: border-box;
+  -webkit-transition: background 0.2s ease;
+          transition: background 0.2s ease;
+}
+.ui.label:first-child {
+  margin-left: 0em;
+}
+.ui.label:last-child {
+  margin-right: 0em;
+}
+
+/* Link */
+a.ui.label {
+  cursor: pointer;
+}
+
+/* Inside Link */
+.ui.label a {
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.8;
+  -webkit-transition: 0.2s opacity ease;
+          transition: 0.2s opacity ease;
+}
+.ui.label a:hover {
+  opacity: 1;
+}
+
+/* Icon */
+.ui.label .icon {
+  width: auto;
+  margin: 0em 0.75em 0em 0em;
+}
+
+/* Detail */
+.ui.label .detail {
+  display: inline-block;
+  vertical-align: top;
+  font-weight: bold;
+  margin-left: 1em;
+  opacity: 0.8;
+}
+.ui.label .detail .icon {
+  margin: 0em 0.25em 0em 0em;
+}
+
+/* Removable label */
+.ui.label .close.icon,
+.ui.label .delete.icon {
+  cursor: pointer;
+  margin-right: 0em;
+  margin-left: 0.5em;
+  opacity: 0.8;
+  -webkit-transition: background 0.2s ease;
+          transition: background 0.2s ease;
+}
+.ui.label .delete.icon:hover {
+  opacity: 1;
+}
+
+/*-------------------
+       Group
+--------------------*/
+
+.ui.labels .label {
+  margin: 0em 0.5em 0.75em 0em;
+}
+
+/*-------------------
+       Coupling
+--------------------*/
+
+
+/* Remove border radius on attached segment */
+.ui.attached.segment > .ui.top.left.attached.label,
+.ui.bottom.attached.segment > .ui.top.left.attached.label {
+  border-top-left-radius: 0;
+}
+.ui.attached.segment > .ui.top.right.attached.label,
+.ui.bottom.attached.segment > .ui.top.right.attached.label {
+  border-top-right-radius: 0;
+}
+.ui.top.attached.segment > .ui.bottom.left.attached.label {
+  border-bottom-left-radius: 0;
+}
+.ui.top.attached.segment > .ui.bottom.right.attached.label {
+  border-bottom-right-radius: 0;
+}
+
+/* Padding on next content after a label */
+.ui.top.attached.label:first-child + :not(.attached) {
+  margin-top: 2rem !important;
+}
+.ui.bottom.attached.label:first-child ~ :last-child:not(.attached) {
+  margin-top: 0em;
+  margin-bottom: 2rem !important;
+}
+
+
+/*******************************
+             Types
+*******************************/
+
+.ui.image.label {
+  width: auto !important;
+  margin-top: 0em;
+  margin-bottom: 0em;
+  max-width: 9999px;
+  vertical-align: baseline;
+  text-transform: none;
+  background: #e8e8e8;
+  padding: 0.6em 0.8em 0.6em 0.5em;
+  border-radius: 0.2857rem;
+  box-shadow: none;
+}
+.ui.image.label img {
+  display: inline-block;
+  vertical-align: top;
+  height: 2.2em;
+  margin: -0.6em 0.5em -0.6em -0.5em;
+  border-radius: 0.2857rem;
+}
+.ui.image.label .detail {
+  background: rgba(0, 0, 0, 0.1);
+  margin: -0.6em -0.8em -0.6em 0.5em;
+  padding: 0.6em 0.8em;
+  border-radius: 0em 0.2857rem 0.2857rem 0em;
+}
+
+/*-------------------
+         Tag
+--------------------*/
+
+.ui.tag.labels .label,
+.ui.tag.label {
+  margin-left: 1em;
+  position: relative;
+  padding-left: 1.5em;
+  padding-right: 1.5em;
+  border-radius: 0em 0.2857rem 0.2857rem 0em;
+}
+.ui.tag.labels .label:before,
+.ui.tag.label:before {
+  position: absolute;
+  -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);
+      -ms-transform: translateY(-50%) translateX(50%) rotate(-45deg);
+          transform: translateY(-50%) translateX(50%) rotate(-45deg);
+  top: 50%;
+  right: 100%;
+  content: '';
+  background-color: #e8e8e8;
+  background-image: none;
+  width: 1.56em;
+  height: 1.56em;
+  -webkit-transition: background 0.2s ease;
+          transition: background 0.2s ease;
+}
+.ui.tag.labels .label:after,
+.ui.tag.label:after {
+  position: absolute;
+  content: '';
+  top: 50%;
+  left: -0.25em;
+  margin-top: -0.25em;
+  background-color: #ffffff !important;
+  width: 0.5em;
+  height: 0.5em;
+  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.3);
+  border-radius: 500rem;
+}
+
+/*-------------------
+    Corner Label
+--------------------*/
+
+.ui.corner.label {
+  position: absolute;
+  top: 0em;
+  right: 0em;
+  margin: 0em;
+  padding: 0em;
+  text-align: center;
+  width: 3.25em;
+  height: 3.25em;
+  z-index: 1;
+  -webkit-transition: border-color 0.2s ease;
+          transition: border-color 0.2s ease;
+}
+
+/* Icon Label */
+.ui.corner.label {
+  background-color: transparent !important;
+}
+.ui.corner.label:after {
+  position: absolute;
+  content: "";
+  right: 0em;
+  top: 0em;
+  z-index: -1;
+  width: 0em;
+  height: 0em;
+  background-color: transparent !important;
+  border-top: 0em solid transparent;
+  border-right: 3.25em solid transparent;
+  border-bottom: 3.25em solid transparent;
+  border-left: 0em solid transparent;
+  border-right-color: inherit;
+  -webkit-transition: border-color 0.2s ease;
+          transition: border-color 0.2s ease;
+}
+.ui.corner.label .icon {
+  position: relative;
+  top: 0.4em;
+  left: 0.75em;
+  font-size: 1em;
+  margin: 0em;
+}
+
+/* Left Corner */
+.ui.left.corner.label,
+.ui.left.corner.label:after {
+  right: auto;
+  left: 0em;
+}
+.ui.left.corner.label:after {
+  border-top: 3.25em solid transparent;
+  border-right: 3.25em solid transparent;
+  border-bottom: 0em solid transparent;
+  border-left: 0em solid transparent;
+  border-top-color: inherit;
+}
+.ui.left.corner.label .icon {
+  left: -0.75em;
+}
+
+/* Segment */
+.ui.segment > .ui.corner.label {
+  top: -1px;
+  right: -1px;
+}
+.ui.segment > .ui.left.corner.label {
+  right: auto;
+  left: -1px;
+}
+
+/* Input */
+.ui.input > .ui.corner.label {
+  top: 1px;
+  right: 1px;
+}
+.ui.input > .ui.right.corner.label {
+  right: auto;
+  left: 1px;
+}
+
+/*-------------------
+       Ribbon
+--------------------*/
+
+.ui.ribbon.label {
+  position: relative;
+  margin: 0em;
+  min-width: -webkit-max-content;
+  min-width: -moz-max-content;
+  min-width: max-content;
+  border-radius: 0em 0.2857rem 0.2857rem 0em;
+  border-color: rgba(0, 0, 0, 0.15);
+}
+.ui.ribbon.label:after {
+  position: absolute;
+  content: '';
+  top: 100%;
+  left: 0%;
+  background-color: transparent !important;
+  border-style: solid;
+  border-width: 0em 1.2em 1.2em 0em;
+  border-color: transparent;
+  border-right-color: inherit;
+  width: 0em;
+  height: 0em;
+}
+
+/* Right Ribbon */
+.ui[class*="right ribbon"].label {
+  text-align: left;
+  -webkit-transform: translateX(-100%);
+      -ms-transform: translateX(-100%);
+          transform: translateX(-100%);
+  border-radius: 0.2857rem 0em 0em 0.2857rem;
+  padding-left: 0.8em;
+}
+.ui[class*="right ribbon"].label:after {
+  left: auto;
+  right: 0%;
+  border-style: solid;
+  border-width: 1.2em 1.2em 0em 0em;
+  border-color: transparent;
+  border-top-color: inherit;
+}
+
+/* Positioning */
+.ui.ribbon.label {
+  left: -webkit-calc( -1rem  -  1.2em );
+  left: calc( -1rem  -  1.2em );
+  margin-right: -1.2em;
+  padding-left: -webkit-calc( 1rem  +  1.2em );
+  padding-left: calc( 1rem  +  1.2em );
+}
+.ui[class*="right ribbon"].label {
+  left: -webkit-calc(100% +  1rem  +  1.2em );
+  left: calc(100% +  1rem  +  1.2em );
+  padding-right: -webkit-calc( 1rem  +  1.2em );
+  padding-right: calc( 1rem  +  1.2em );
+}
+
+/* Inside Image */
+.ui.image > .ribbon.label,
+.ui.card .image > .ribbon.label {
+  position: absolute;
+  top: 1rem;
+}
+.ui.card .image > .ui.ribbon.label,
+.ui.image > .ui.ribbon.label {
+  left: -webkit-calc( 0.05rem  -  1.2em );
+  left: calc( 0.05rem  -  1.2em );
+  padding-left: -webkit-calc( -0.05rem  +  1.2em );
+  padding-left: calc( -0.05rem  +  1.2em );
+}
+.ui.card .image > .ui[class*="right ribbon"].label,
+.ui.image > .ui[class*="right ribbon"].label {
+  left: -webkit-calc(100% +  -0.05rem  +  1.2em );
+  left: calc(100% +  -0.05rem  +  1.2em );
+  padding-left: 0.8em;
+  padding-right: -webkit-calc( -0.05rem  +  1.2em );
+  padding-right: calc( -0.05rem  +  1.2em );
+}
+
+/*-------------------
+      Attached
+--------------------*/
+
+.ui.top.attached.label,
+.ui.attached.label {
+  width: 100%;
+  position: absolute;
+  margin: 0em;
+  top: 0em;
+  left: 0em;
+  padding: 0.75em 1em;
+  border-radius: 0.2857rem 0.2857rem 0em 0em;
+}
+.ui.bottom.attached.label {
+  top: auto;
+  bottom: 0em;
+  border-radius: 0em 0em 0.2857rem 0.2857rem;
+}
+.ui.top.left.attached.label {
+  width: auto;
+  margin-top: 0em !important;
+  border-radius: 0.2857rem 0em 0.2857rem 0em;
+}
+.ui.top.right.attached.label {
+  width: auto;
+  left: auto;
+  right: 0em;
+  border-radius: 0em 0.2857rem 0em 0.2857rem;
+}
+.ui.bottom.left.attached.label {
+  width: auto;
+  top: auto;
+  bottom: 0em;
+  border-radius: 0em 0.2857rem 0em 0.2857rem;
+}
+.ui.bottom.right.attached.label {
+  top: auto;
+  bottom: 0em;
+  left: auto;
+  right: 0em;
+  width: auto;
+  border-radius: 0.2857rem 0em 0.2857rem 0em;
+}
+
+
+/*******************************
+             States
+*******************************/
+
+
+/*-------------------
+      Disabled
+--------------------*/
+
+.ui.label.disabled {
+  opacity: 0.5;
+}
+
+/*-------------------
+        Hover
+--------------------*/
+
+a.ui.labels .label:hover,
+a.ui.label:hover {
+  background-color: #e0e0e0;
+  border-color: #e0e0e0;
+  background-image: none;
+  color: rgba(0, 0, 0, 0.8);
+}
+.ui.labels a.label:hover:before,
+a.ui.label:hover:before {
+  background-color: #e0e0e0;
+  background-image: none;
+  color: rgba(0, 0, 0, 0.8);
+}
+
+/*-------------------
+      Visible
+--------------------*/
+
+.ui.labels.visible .label,
+.ui.label.visible {
+  display: inline-block !important;
+}
+
+/*-------------------
+      Hidden
+--------------------*/
+
+.ui.labels.hidden .label,
+.ui.label.hidden {
+  display: none !important;
+}
+
+
+/*******************************
+           Variations
+*******************************/
+
+
+/*-------------------
+       Colors
+--------------------*/
+
+
+/*--- Black ---*/
+
+.ui.black.labels .label,
+.ui.black.label {
+  background-color: #1b1c1d !important;
+  border-color: #1b1c1d !important;
+  color: #ffffff !important;
+}
+.ui.labels .black.label:before,
+.ui.black.labels .label:before,
+.ui.black.label:before {
+  background-color: #1b1c1d !important;
+}
+a.ui.black.labels .label:hover,
+a.ui.black.label:hover {
+  background-color: #1b1c1d !important;
+  border-color: #1b1c1d !important;
+}
+.ui.labels a.black.label:hover:before,
+.ui.black.labels a.label:hover:before,
+a.ui.black.label:hover:before {
+  background-color: #1b1c1d !important;
+}
+.ui.black.corner.label,
+.ui.black.corner.label:hover {
+  background-color: transparent !important;
+}
+.ui.black.ribbon.label {
+  border-color: #020203 !important;
+}
+
+/*--- Blue ---*/
+
+.ui.blue.labels .label,
+.ui.blue.label {
+  background-color: #3b83c0 !important;
+  border-color: #3b83c0 !important;
+  color: #ffffff !important;
+}
+.ui.labels .blue.label:before,
+.ui.blue.labels .label:before,
+.ui.blue.label:before {
+  background-color: #3b83c0 !important;
+}
+a.ui.blue.labels .label:hover,
+.ui.blue.labels a.label:hover,
+a.ui.blue.label:hover {
+  background-color: #458ac6 !important;
+  border-color: #458ac6 !important;
+  color: #ffffff !important;
+}
+.ui.labels a.blue.label:hover:before,
+.ui.blue.labels a.label:hover:before,
+a.ui.blue.label:hover:before {
+  background-color: #458ac6 !important;
+}
+.ui.blue.corner.label,
+.ui.blue.corner.label:hover {
+  background-color: transparent !important;
+}
+.ui.blue.ribbon.label {
+  border-color: #2f6899 !important;
+}
+
+/*--- Green ---*/
+
+.ui.green.labels .label,
+.ui.green.label {
+  background-color: #5bbd72 !important;
+  border-color: #5bbd72 !important;
+  color: #ffffff !important;
+}
+.ui.labels .green.label:before,
+.ui.green.labels .label:before,
+.ui.green.label:before {
+  background-color: #5bbd72 !important;
+}
+a.ui.green.labels .label:hover,
+a.ui.green.label:hover {
+  background-color: #66c17b !important;
+  border-color: #66c17b !important;
+}
+.ui.labels a.green.label:hover:before,
+.ui.green.labels a.label:hover:before,
+a.ui.green.label:hover:before {
+  background-color: #66c17b !important;
+}
+.ui.green.corner.label,
+.ui.green.corner.label:hover {
+  background-color: transparent !important;
+}
+.ui.green.ribbon.label {
+  border-color: #42a359 !important;
+}
+
+/*--- Orange ---*/
+
+.ui.orange.labels .label,
+.ui.orange.label {
+  background-color: #e07b53 !important;
+  border-color: #e07b53 !important;
+  color: #ffffff !important;
+}
+.ui.labels .orange.label:before,
+.ui.orange.labels .label:before,
+.ui.orange.label:before {
+  background-color: #e07b53 !important;
+}
+a.ui.orange.labels .label:hover,
+.ui.orange.labels a.label:hover,
+a.ui.orange.label:hover {
+  background-color: #e28560 !important;
+  border-color: #e28560 !important;
+  color: #ffffff !important;
+}
+.ui.labels a.orange.label:hover:before,
+.ui.orange.labels a.label:hover:before,
+a.ui.orange.label:hover:before {
+  background-color: #e28560 !important;
+}
+.ui.orange.corner.label,
+.ui.orange.corner.label:hover {
+  background-color: transparent !important;
+}
+.ui.orange.ribbon.label {
+  border-color: #d85a28 !important;
+}
+
+/*--- Pink ---*/
+
+.ui.pink.labels .label,
+.ui.pink.label {
+  background-color: #d9499a !important;
+  border-color: #d9499a !important;
+  color: #ffffff !important;
+}
+.ui.labels .pink.label:before,
+.ui.pink.labels .label:before,
+.ui.pink.label:before {
+  background-color: #d9499a !important;
+}
+a.ui.pink.labels .label:hover,
+.ui.pink.labels a.label:hover,
+a.ui.pink.label:hover {
+  background-color: #dc56a1 !important;
+  border-color: #dc56a1 !important;
+  color: #ffffff !important;
+}
+.ui.labels a.pink.label:hover:before,
+.ui.pink.labels a.label:hover:before,
+a.ui.pink.label:hover:before {
+  background-color: #dc56a1 !important;
+}
+.ui.pink.corner.label,
+.ui.pink.corner.label:hover {
+  background-color: transparent !important;
+}
+.ui.pink.ribbon.label {
+  border-color: #c62981 !important;
+}
+
+/*--- Purple ---*/
+
+.ui.purple.labels .label,
+.ui.purple.label {
+  background-color: #564f8a !important;
+  border-color: #564f8a !important;
+  color: #ffffff !important;
+}
+.ui.labels .purple.label:before,
+.ui.purple.labels .label:before,
+.ui.purple.label:before {
+  background-color: #564f8a !important;
+}
+a.ui.purple.labels .label:hover,
+.ui.purple.labels a.label:hover,
+a.ui.purple.label:hover {
+  background-color: #5c5594 !important;
+  border-color: #5c5594 !important;
+  color: #ffffff !important;
+}
+.ui.labels a.purple.label:hover:before,
+.ui.purple.labels a.label:hover:before,
+a.ui.purple.label:hover:before {
+  background-color: #5c5594 !important;
+}
+.ui.purple.corner.label,
+.ui.purple.corner.label:hover {
+  background-color: transparent !important;
+}
+.ui.purple.ribbon.label {
+  border-color: #423c6a !important;
+}
+
+/*--- Red ---*/
+
+.ui.red.labels .label,
+.ui.red.label {
+  background-color: #d95c5c !important;
+  border-color: #d95c5c !important;
+  color: #ffffff !important;
+}
+.ui.labels .red.label:before,
+.ui.red.labels .label:before,
+.ui.red.label:before {
+  background-color: #d95c5c !important;
+}
+.ui.red.corner.label,
+.ui.red.corner.label:hover {
+  background-color: transparent !important;
+}
+a.ui.red.labels .label:hover,
+a.ui.red.label:hover {
+  background-color: #dc6868 !important;
+  border-color: #dc6868 !important;
+  color: #ffffff !important;
+}
+.ui.labels a.red.label:hover:before,
+.ui.red.labels a.label:hover:before,
+a.ui.red.label:hover:before {
+  background-color: #dc6868 !important;
+}
+.ui.red.ribbon.label {
+  border-color: #cf3333 !important;
+}
+
+/*--- Teal ---*/
+
+.ui.teal.labels .label,
+.ui.teal.label {
+  background-color: #00b5ad !important;
+  border-color: #00b5ad !important;
+  color: #ffffff !important;
+}
+.ui.labels .teal.label:before,
+.ui.teal.labels .label:before,
+.ui.teal.label:before {
+  background-color: #00b5ad !important;
+}
+a.ui.teal.labels .label:hover,
+.ui.teal.labels a.label:hover,
+a.ui.teal.label:hover {
+  background-color: #00c4bc !important;
+  border-color: #00c4bc !important;
+  color: #ffffff !important;
+}
+.ui.labels a.teal.label:hover:before,
+.ui.teal.labels a.label:hover:before,
+a.ui.teal.label:hover:before {
+  background-color: #00c4bc !important;
+}
+.ui.teal.corner.label,
+.ui.teal.corner.label:hover {
+  background-color: transparent !important;
+}
+.ui.teal.ribbon.label {
+  border-color: #00827c !important;
+}
+
+/*--- Yellow ---*/
+
+.ui.yellow.labels .label,
+.ui.yellow.label {
+  background-color: #f2c61f !important;
+  border-color: #f2c61f !important;
+  color: #ffffff !important;
+}
+.ui.labels .yellow.label:before,
+.ui.yellow.labels .label:before,
+.ui.yellow.label:before {
+  background-color: #f2c61f !important;
+}
+a.ui.yellow.labels .label:hover,
+.ui.yellow.labels a.label:hover,
+a.ui.yellow.label:hover {
+  background-color: #f3ca2d !important;
+  border-color: #f3ca2d !important;
+  color: #ffffff !important;
+}
+.ui.labels a.yellow.label:hover:before,
+.ui.yellow.labels a.label:hover:before,
+a.ui.yellow.label:hover:before {
+  background-color: #f3ca2d !important;
+}
+.ui.yellow.corner.label,
+.ui.yellow.corner.label:hover {
+  background-color: transparent !important;
+}
+.ui.yellow.ribbon.label {
+  border-color: #d2a90c !important;
+}
+
+/*-------------------
+       Fluid
+--------------------*/
+
+.ui.label.fluid,
+.ui.fluid.labels > .label {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/*-------------------
+       Inverted
+--------------------*/
+
+.ui.inverted.labels .label,
+.ui.inverted.label {
+  color: #ffffff !important;
+}
+
+/*-------------------
+     Horizontal
+--------------------*/
+
+.ui.horizontal.labels .label,
+.ui.horizontal.label {
+  margin: 0em 0.5em 0em 0em;
+  padding: 0.4em 0.8em;
+  min-width: 3em;
+  text-align: center;
+}
+
+/*-------------------
+       Circular
+--------------------*/
+
+.ui.circular.labels .label,
+.ui.circular.label {
+  min-width: 2em;
+  min-height: 2em;
+  padding: 0.5em !important;
+  line-height: 1em;
+  text-align: center;
+  border-radius: 500rem;
+}
+.ui.empty.circular.labels .label,
+.ui.empty.circular.label {
+  min-width: 0em;
+  min-height: 0em;
+  overflow: hidden;
+  width: 0.5em;
+  height: 0.5em;
+  vertical-align: baseline;
+}
+
+/*-------------------
+       Pointing
+--------------------*/
+
+.ui.pointing.label {
+  position: relative;
+}
+.ui.attached.pointing.label {
+  position: absolute;
+}
+.ui.pointing.label:before {
+  position: absolute;
+  content: '';
+  -webkit-transform: rotate(45deg);
+      -ms-transform: rotate(45deg);
+          transform: rotate(45deg);
+  background-image: none;
+  z-index: 2;
+  width: 0.6em;
+  height: 0.6em;
+  -webkit-transition: background 0.2s ease;
+          transition: background 0.2s ease;
+}
+
+/*--- Above ---*/
+
+.ui.pointing.label:before {
+  background-color: #e8e8e8;
+  background-image: none;
+}
+.ui.pointing.label,
+.ui.pointing.above.label {
+  margin-top: 1em;
+}
+.ui.pointing.label:before,
+.ui.pointing.above.label:before {
+  margin-left: -0.3em;
+  top: -0.3em;
+  left: 50%;
+}
+
+/*--- Below ---*/
+
+.ui.pointing.bottom.label,
+.ui.pointing.below.label {
+  margin-top: 0em;
+  margin-bottom: 1em;
+}
+.ui.pointing.bottom.label:before,
+.ui.pointing.below.label:before {
+  margin-left: -0.3em;
+  top: auto;
+  right: auto;
+  bottom: -0.3em;
+  left: 50%;
+}
+
+/*--- Left ---*/
+
+.ui.pointing.left.label {
+  margin-top: 0em;
+  margin-left: 0.6em;
+}
+.ui.pointing.left.label:before {
+  margin-top: -0.3em;
+  bottom: auto;
+  right: auto;
+  top: 50%;
+  left: 0em;
+}
+
+/*--- Right ---*/
+
+.ui.pointing.right.label {
+  margin-top: 0em;
+  margin-right: 0.6em;
+}
+.ui.pointing.right.label:before {
+  margin-top: -0.3em;
+  right: -0.3em;
+  top: 50%;
+  bottom: auto;
+  left: auto;
+}
+
+/*------------------
+   Floating Label
+-------------------*/
+
+.ui.floating.label {
+  position: absolute;
+  z-index: 100;
+  top: -1em;
+  left: 100%;
+  margin: 0em 0em 0em -1.5em !important;
+}
+
+/*-------------------
+        Sizes
+--------------------*/
+
+.ui.mini.labels .label,
+.ui.mini.label {
+  font-size: 0.6428rem;
+}
+.ui.tiny.labels .label,
+.ui.tiny.label {
+  font-size: 0.7142rem;
+}
+.ui.small.labels .label,
+.ui.small.label {
+  font-size: 0.7857rem;
+}
+.ui.labels .label,
+.ui.label {
+  font-size: 0.8571rem;
+}
+.ui.large.labels .label,
+.ui.large.label {
+  font-size: 1rem;
+}
+.ui.big.labels .label,
+.ui.big.label {
+  font-size: 1.1428rem;
+}
+.ui.huge.labels .label,
+.ui.huge.label {
+  font-size: 1.2857rem;
+}
+.ui.massive.labels .label,
+.ui.massive.label {
+  font-size: 1.4285rem;
+}
+
+
+/*******************************
+         Theme Overrides
+*******************************/
+
+
+
+/*******************************
+         Site Overrides
+*******************************/
+