diff --git a/.directory b/.directory
new file mode 100644
index 000000000..59c2c250d
--- /dev/null
+++ b/.directory
@@ -0,0 +1,6 @@
+[Dolphin]
+Timestamp=2018,3,14,10,57,55
+Version=4
+
+[Settings]
+HiddenFilesShown=true
diff --git a/.kateproject b/.kateproject
new file mode 100644
index 000000000..1d90b01b0
--- /dev/null
+++ b/.kateproject
@@ -0,0 +1,4 @@
+{
+  "name": "ReWorX"
+, "files": [ { "git": 1, "filters": ["*.hs", "*.hamlet", "*.lucius", "*.cassius", "*.julius"], "recursive": 1 } ]
+}
diff --git a/Datenschutznotizen.txt b/Datenschutznotizen.txt
index 4ffa87b2f..6849c77c2 100644
--- a/Datenschutznotizen.txt
+++ b/Datenschutznotizen.txt
@@ -1,10 +1,11 @@
 * Datensparsamkeit: nur Speichern was notwendig ist; Dokumentieren, warum was gespeichert wird!
 * Verfügbarkeit: Backup / aktuelles System; nicht nur eine Person, Anfragen werden organisiert beantwortet
 * Integrität: Konsistenzcheck bei Datenübertragen (z.B. LDAP), Sicherheit vor bösen Absichten, Änderungen protokolliert
-* Vertraulichkeit: Jeder Benutzer sollte nur auf das zugreifen was unbedingt nötig ist; Backup Verschlüsselung
+* Vertraulichkeit: Jeder Benutzer sollte nur auf das zugreifen was unbedingt nötig ist; Backup; Verschlüsselung jeglicher Übermittlung
 * Nichtverkettbarkeit: (eher irrelevant für unseren Anwendungsfall)
 * Transparenz: User weiß was über ihn gespeichert wird; Dokumentation; Vorfälle schnell melden?
-* Intervenierbarkeit: Korrektur/Löschpflichten - auch im Backup; z.B. Korrekturen bei Einspielen des Backups einpflegen; Backup Verschlüsselung; Bei Löschanforderungen muss teilweise gelöscht werden (nur was Notenrelevant muss aufgehoben werden, Hausaufgaben werden gelöscht; Anzeige gelöschter Teilnehmer)
+* Intervenierbarkeit: Korrektur/Löschpflichten - auch im Backup; z.B. Korrekturen bei Einspielen des Backups einpflegen; Backup Verschlüsselung; Bei Löschanforderungen muss teilweise gelöscht werden (nur was Notenrelevant muss aufgehoben werden, Hausaufgaben werden gelöscht; Anzeige gelöschter Teilnehmer).
+Was sind die Aufbewahrungsfristen für Hausübungen? Wie bei Klausuren?
 * Wer ist Datenschutzverantwortlicher? Steffen!?!
   => Sofort anzeigen, wenn etwas schiefläuft. 
 
@@ -20,7 +21,8 @@ Aktionen:
  - Regularien für Prozess; Aufbewahrungsfristen, Verwaltungsrechtliche Fragen, Bayrisches E-Goverment Gesetz, Daten signierbar/verifizieren;
  
  -> Aktuelle Archivierung von prüfungsrelevanten Daten (Klausur-Lagerung) ist nicht Gesetz-Konform; da Papier-Lagerung nicht konform ist.
- 
+ Wo ist dokumentiert, welche Klausur wo gelagert wird?!
+
  
  
  
diff --git a/FragenSJ.txt b/FragenSJ.txt
new file mode 100644
index 000000000..c2219f2c1
--- /dev/null
+++ b/FragenSJ.txt
@@ -0,0 +1,38 @@
+** Sicherheitsabfragen?
+ - Verschlüsselung des Zugriffs?
+
+ - SheetDelR tid csh sn : GET zeigt Sicherheitsabfrage
+                          POST löscht.
+  Ist das so sinnvoll?
+  Sicherheitsabfrage als PopUpMessage?
+
+ - Utils.getKeyBy404 effiziente Variante, welche nur den Key liefert? Esq?
+    (Sheet.hs -> fetchSheet)
+
+ - Handler.Sheet.postSheetDelR: deleteCascade für Files? Klappt das?
+  Kann man abfragen, was bei deleteCascade alles gelöscht wird?
+
+
+
+** i18n:
+ - i18n der
+      Links       -> MenuItems verwenden wie bisher
+      Page Titles -> setTitleI
+      Buttons?    -> Kann leicht geändert werden!
+   Was ist mit einfachen Text Feldern, z.B. die Beschriftung von Knöpfen wie in Handler.Course.getCourseListTermR, Zeile 66 "pageActions" für menuItemLabel?
+
+** Page pageActions  - Berechtigungen prüfen?
+ => Eigener Constructor statt NavbarLeft/Right?!
+
+
+** FORMS
+ 3 - Sheets: Multiple Files -> wird später gemacht
+   - Versionen für Studenten/Korrektoren/Lecturers/Admins
+     -> ja über isAuthorizedDB siehe unten,
+     -> Lecturer kann gleich auf Edit-Seite gehen wie in UniWorX
+
+
+Freischaltung von Teilen einer Webseite:
+ - Freigabe der Links über Authorisierung in der Foundation
+ - Anzeige der Links nach Authorisierung wie in menItemAccessCallback
+ - möglichst direkt isAuthorizedDB in einem runDB aufrufen!!!
diff --git a/README.md b/README.md
index 2fbf8207f..348fcc55f 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,24 @@
 # Quick Start Guide
 
-Assuming Ubuntu or similar
+The following Description applies to Ubuntu or similar.
+
+## Clone repository
+  Clone this repository `git clone https://gitlab.cip.ifi.lmu.de/jost/UniWorX.git` and navigate into the new directory `cd UniWorX`.
 
 ## LDAP
-  install:<br>
-    `sudo apt-get install slapd ldap-utils`
+  install:  
+  `sudo apt-get install slapd ldap-utils`
 
 
 ## PostgreSQL
-  install:<br>
-    `sudo apt-get install postgresql`
+  install:  
+  `sudo apt-get install postgresql`
 
-  switch to user *postgres* (got created during installation):<br>
-    `sudo -i -u postgres`
+  switch to user *postgres* (got created during installation):  
+  `sudo -i -u postgres`
 
-  add db user *uniworx*:<br>
-    `createuser --interactive`
+  add db user *uniworx*:  
+  `createuser --interactive`
 
   you'll get a prompt:
 
@@ -24,49 +27,60 @@ Assuming Ubuntu or similar
   Shall the new role be a superuser? (y/n)` - [not exactly sure. Guess not?]
   ```
 
-  create database *uniworx*:<br>
-    `createdb uniworx`
+  create database *uniworx*:  
+  `createdb uniworx`
 
-  to access the database as user *uniworx* you now need to add a new linux-user called *uniworx*:<br>
-    `sudo adduser uniworx`
+  to access the database as user *uniworx* you now need to add a new linux-user called *uniworx*:  
+  `sudo adduser uniworx`
 
-  log-in as new user *uniworx*:<br>
-    `sudo -i -u uniworx`
+  log-in as new user *uniworx*:  
+  `sudo -i -u uniworx`
 
   you can now use `psql uniworx` to execute SQL-commands and such.
 
-  you might for example want to add a test-account to be able to login on the page:<br>
-    `INSERT INTO user (plugin, ident, matrikelnummer, email, display_name) VALUES ('LDAP', '[YOUR_EMAIL_ADDRESS]', null, '[YOUR_EMAIL_ADDRESS]', '[YOUR_NAME]');`
-
 ## stack
-  Install with:<br>
-    `curl -sSL https://get.haskellstack.org/ | sh`
+  Install with:  
+  `curl -sSL https://get.haskellstack.org/ | sh`
 
-  setup stack and install dependencies:<br>
-    `stack setup`
+  setup stack and install dependencies:  
+  `stack setup`
 
-  There might be packages missing during setup. You most probably simply need to install them and try again.<br>
-  Instructions are easy to find via search engine of your choice and the specific error you got.<br>
-  Example from experience: For LDAP `ldab` and `lber` header files were missing.
+  During this step or the next you might get an error that says something about missing C libraries for `ldap` and `lber`. You can install these using  
+  `sudo apt-get install libsasl2-dev libldap2-dev`
 
-  Build the app:<br>
-    `stack build`
+  If you get an error that says *You need to install postgresql-server-dev-X.Y for building a server-side extension or libpq-dev for building a client-side application.*  
+  Go ahead an install `libpq-dev` with  
+  `sudo apt-get install libpq-dev`
 
-  Run the app (with environment variable DUMMY_LUGIN set to true):<br>
-    `env DUMMY_LOGIN=true stack exec  -- yesod devel`
+  Build the app:  
+  `stack build`
 
-  `Devel application launched: http://localhost:3000`<br>
+  This might take a few minutes if not hours... be prepared.
+
+  install yesod:  
+  `stack install yesod-bin --install-ghc`
+
+## Add Dumy-Data and run the app
+  After building the app you can prepare the database and add some dummy data:
+  `./fill-db.hs`
+
+  Run the app:  
+  `./start.sh`
+
+  `Devel application launched: http://localhost:3000`  
   means you are good to go.
 
+  If you followed the steps above you should now be able to login as user Gregor Kleen using `LDAP:g.kleen@ifi.lmu.de` as dummy login.
+
 ***
 
 # Sources and more infos
-  PostgreSQl: <br>
+  PostgreSQl:   
   https://www.digitalocean.com/community/tutorials/how-to-install-and-use-postgresql-on-ubuntu-16-04
 
-  stack:<br> https://docs.haskellstack.org/en/stable/README/#how-to-install
+  stack:   https://docs.haskellstack.org/en/stable/README/#how-to-install
 
-  ldap:<br>https://wiki.ubuntuusers.de/OpenLDAP_ab_Precise/
+  ldap:  https://wiki.ubuntuusers.de/OpenLDAP_ab_Precise/
 
 
 ***
@@ -86,5 +100,19 @@ psql -U uniworx -d uniworx -h 127.0.0.1 -w
 --Zeige Tabellen
 \dt
 
+--Zeige Tabellen Inhalt:
+TABEL "user";
+-- Die Anführungszeichen können manchmal weggelassen werden, aber
+-- bei user sind sie notwendig, da es auch Schlüsselwort in sql ist.
+
 --Lösche Tabelle "course" und alle davon abhängigen:
 DROP TABLE "course" CASCADE;
+
+-- UserId 5 zum Lecturer in SchoolId 1 machen (27 ist laufende Nummer)
+INSERT INTO "user_lecturer" (id,"user",school) VALUES (27,5,1);
+
+-- Beenden:
+\q
+
+-- Hilfe:
+\help
diff --git a/fill-db.hs b/fill-db.hs
index 41631aebb..dd8f42c62 100755
--- a/fill-db.hs
+++ b/fill-db.hs
@@ -14,6 +14,7 @@ main :: IO ()
 main = db $ do
   now <- liftIO getCurrentTime
   let
+    summer2017 = TermIdentifier 2017 Summer
     winter2017 = TermIdentifier 2017 Winter
     summer2018 = TermIdentifier 2018 Summer
   gkleen <- insert User
@@ -23,6 +24,29 @@ main = db $ do
     , userEmail  = "G.Kleen@campus.lmu.de"
     , userDisplayName = "Gregor Kleen"
     }
+  fhamann <- insert User
+    { userPlugin = "LDAP"
+    , userIdent  = "felix.hamann@campus.lmu.de"
+    , userMatrikelnummer = Nothing
+    , userEmail  = "felix.hamann@campus.lmu.de"
+    , userDisplayName = "Felix Hamann"
+    }
+  jost <- insert User
+    { userPlugin = "LDAP"
+    , userIdent  = "jost@tcs.ifi.lmu.de"
+    , userMatrikelnummer = Nothing
+    , userEmail  = "jost@tcs.ifi.lmu.de"
+    , userDisplayName = "Steffen Jost"
+    }
+  void . insert $ Term
+    { termName     = summer2017
+    , termStart    = fromGregorian 2017 04 09
+    , termEnd      = fromGregorian 2017 07 14
+    , termHolidays = []
+    , termLectureStart = fromGregorian 2017 04 09
+    , termLectureEnd   = fromGregorian 2018 07 14
+    , termActive       = False
+    }
   void . insert $ Term
     { termName     = winter2017
     , termStart    = fromGregorian 2017 10 16
@@ -45,9 +69,16 @@ main = db $ do
   mi <- insert $ School "Institut für Mathematik" "MI"
   void . insert $ UserAdmin gkleen ifi
   void . insert $ UserAdmin gkleen mi
+  void . insert $ UserAdmin fhamann ifi
+  void . insert $ UserAdmin jost ifi
+  void . insert $ UserAdmin jost mi
   void . insert $ UserLecturer gkleen ifi
+  void . insert $ UserLecturer fhamann ifi
+  void . insert $ UserLecturer jost ifi
   ifiBsc <- insert $ Degree "Bachelor Informatik" ifi
   ifiMsc <- insert $ Degree "Master Informatik" ifi
+  miBsc <- insert $ Degree "Bachelor Mathematik" mi
+  -- FFP
   ffp <- insert Course
     { courseName = "Fortgeschrittene Funktionale Programmierung"
     , courseDescription = Nothing
@@ -56,16 +87,96 @@ main = db $ do
     , courseTermId = TermKey summer2018
     , courseSchoolId = ifi
     , courseCapacity = Just 20
-    , courseCreated = now
-    , courseChanged = now
-    , courseCreatedBy = gkleen
-    , courseChangedBy = gkleen
     , courseHasRegistration = True
     , courseRegisterFrom = Just now
     , courseRegisterTo = Just ((3600 * 24 * 60) `addUTCTime` now )
     }
+  insert_ $ CourseEdit jost now ffp
   void . insert $ DegreeCourse ifiBsc ffp
   void . insert $ DegreeCourse ifiMsc ffp
   void . insert $ Lecturer gkleen ffp
-  void . insert $ Corrector gkleen ffp (ByProportion 1)
-  void . insert $ Sheet ffp "Blatt 1" Nothing NotGraded Nothing now now Nothing Nothing now now gkleen gkleen
+  insert_ $ Corrector gkleen ffp (ByProportion 1)
+  sheetkey <- insert $ Sheet ffp "Blatt 1" Nothing NotGraded NoGroups Nothing Nothing now now Nothing Nothing
+  insert_ $ SheetEdit gkleen now sheetkey
+  -- EIP
+  eip <- insert Course
+    { courseName = "Einführung in die Programmierung"
+    , courseDescription = Nothing
+    , courseLinkExternal = Nothing
+    , courseShorthand = "eip"
+    , courseTermId = TermKey summer2017
+    , courseSchoolId = ifi
+    , courseCapacity = Just 20
+    , courseHasRegistration = False
+    , courseRegisterFrom = Nothing
+    , courseRegisterTo = Nothing
+    }
+  insert_ $ CourseEdit fhamann now eip
+  void . insert $ DegreeCourse ifiBsc eip
+  void . insert $ DegreeCourse ifiMsc eip
+  void . insert $ Lecturer fhamann eip
+  -- interaction design
+  ixd <- insert Course
+    { courseName = "Interaction Design (User Experience Design I & II)"
+    , courseDescription = Nothing
+    , courseLinkExternal = Nothing
+    , courseShorthand = "ixd"
+    , courseTermId = TermKey summer2018
+    , courseSchoolId = ifi
+    , courseCapacity = Just 20
+    , courseHasRegistration = True
+    , courseRegisterFrom = Just now
+    , courseRegisterTo = Just ((3600 * 24 * 60) `addUTCTime` now )
+    }
+  insert_ $ CourseEdit fhamann now ixd
+  void . insert $ DegreeCourse ifiBsc ixd
+  void . insert $ Lecturer fhamann ixd
+  -- concept development
+  ux3 <- insert Course
+    { courseName = "Concept Development (User Experience Design III)"
+    , courseDescription = Nothing
+    , courseLinkExternal = Nothing
+    , courseShorthand = "ux3"
+    , courseTermId = TermKey winter2017
+    , courseSchoolId = ifi
+    , courseCapacity = Just 30
+    , courseHasRegistration = False
+    , courseRegisterFrom = Nothing
+    , courseRegisterTo = Nothing
+    }
+  insert_ $ CourseEdit fhamann now ux3
+  void . insert $ DegreeCourse ifiBsc ux3
+  void . insert $ Lecturer fhamann ux3
+  -- promo
+  pmo <- insert Course
+    { courseName = "Programmierung und Modellierung"
+    , courseDescription = Nothing
+    , courseLinkExternal = Nothing
+    , courseShorthand = "pmo"
+    , courseTermId = TermKey summer2017
+    , courseSchoolId = ifi
+    , courseCapacity = Just 50
+    , courseHasRegistration = False
+    , courseRegisterFrom = Nothing
+    , courseRegisterTo = Nothing
+    }
+  insert_ $ CourseEdit jost now pmo
+  void . insert $ DegreeCourse ifiBsc pmo
+  void . insert $ Lecturer jost pmo
+  -- datenbanksysteme
+  dbs <- insert Course
+    { courseName = "Datenbanksysteme"
+    , courseDescription = Nothing
+    , courseLinkExternal = Nothing
+    , courseShorthand = "dbs"
+    , courseTermId = TermKey summer2018
+    , courseSchoolId = ifi
+    , courseCapacity = Just 50
+    , courseHasRegistration = False
+    , courseRegisterFrom = Nothing
+    , courseRegisterTo = Nothing
+    }
+  insert_ $ CourseEdit gkleen now dbs
+  void . insert $ DegreeCourse ifiBsc dbs
+  void . insert $ Lecturer gkleen dbs
+  void . insert $ Lecturer jost   dbs
diff --git a/messages/de.msg b/messages/de.msg
index 710f73cae..d56678c38 100644
--- a/messages/de.msg
+++ b/messages/de.msg
@@ -1,4 +1,24 @@
 SummerTerm year@Integer: Sommersemester #{tshow year}
 WinterTerm year@Integer: Wintersemester #{tshow year}/#{tshow $ succ year}
 PSLimitNonPositive: “pagesize” muss größer als null sein
-Page n@Int64 num@Int64: Seite #{tshow n} von #{tshow num}
\ No newline at end of file
+Page n@Int64 num@Int64: Seite #{tshow n} von #{tshow num}
+TermEdited tid@TermIdentifier: Semester #{termToText tid} erfolgreich editiert.
+TermNewTitle: Semester editiere/anlegen.
+InvalidInput: Eingaben bitte korrigieren.
+CourseNewOk        tid@TermIdentifier courseShortHand@Text: Kurs #{termToText tid}-#{courseShortHand} wurde erfolgreich erstellt.
+CourseEditOk       tid@TermIdentifier courseShortHand@Text: Kurs #{termToText tid}-#{courseShortHand} wurde erfolgreich geändert.
+CourseNewDupShort  tid@TermIdentifier courseShortHand@Text: Kurs #{termToText tid}-#{courseShortHand} konnte nicht erstellt werden: Es gibt bereits einen anderen Kurs mit dem Kürzel #{courseShortHand} in diesem Semester.
+CourseEditDupShort tid@TermIdentifier courseShortHand@Text: Kurs #{termToText tid}-#{courseShortHand} konnte nicht geändert werden: Es gibt bereits einen anderen Kurs mit dem Kürzel #{courseShortHand} in diesem Semester.
+SheetNewOk         tid@TermIdentifier courseShortHand@Text sheetName@Text: Neues Übungsblatt #{sheetName} wurde im Kurs #{termToText tid}-#{courseShortHand} erfolgreich erstellt.
+SheetTitle         tid@TermIdentifier courseShortHand@Text sheetName@Text: #{termToText tid}-#{courseShortHand} #{sheetName}
+SheetTitleNew      tid@TermIdentifier courseShortHand@Text               : #{termToText tid}-#{courseShortHand}: Neues Übungsblatt
+SheetEditOk        tid@TermIdentifier courseShortHand@Text sheetName@Text: Übungsblatt #{sheetName} aus Kurs #{termToText tid}-#{courseShortHand} wurde gespeichert.
+SheetNameDup       tid@TermIdentifier courseShortHand@Text sheetName@Text: Es gibt bereits ein Übungsblatt #{sheetName} in diesem Kurs #{termToText tid}-#{courseShortHand}.
+SheetDelTitle      tid@TermIdentifier courseShortHand@Text sheetName@Text: Übungsblatt #{sheetName} wirklich aus Kurs #{termToText tid}-#{courseShortHand} herauslöschen?
+SheetDelText       submissionNo@Int: Dies kann nicht mehr rückgängig gemacht werden! Alle Einreichungen gehen ebenfalls verloren! Es gibt #{show submissionNo} Abgaben.
+SheetDelOk         tid@TermIdentifier courseShortHand@Text sheetName@Text: #{termToText tid}-#{courseShortHand}: Übungsblatt #{sheetName} gelöscht.
+UnauthorizedSchoolAdmin: Sie sind nicht als Administrator für dieses Institut eingetragen.
+UnauthorizedSchoolLecturer: Sie sind nicht als Veranstalter für dieses Institut eingetragen.
+UnauthorizedLecturer: Sie sind nicht als Veranstalter für diese Veranstaltung eingetragen.
+UnauthorizedCorrector: Sie sind nicht als Korrektor für diese Veranstaltung eingetragen.
+UnauthorizedParticipant: Sie sind nicht als Teilnehmer für diese Veranstaltung registriert.
diff --git a/models b/models
index b910cb843..ea24256b9 100644
--- a/models
+++ b/models
@@ -11,7 +11,7 @@ UserAdmin
 UserLecturer
     user   UserId
     school SchoolId
-    UniqueSchoolLecturer school user
+    UniqueSchoolLecturer user school
 StudyFeatures
     user          UserId
     degree        StudyDegreeId
@@ -30,8 +30,8 @@ StudyTerms
     name          Text Maybe
     Primary key
 Term json
-    name          TermIdentifier
-    start         Day
+    name          TermIdentifier -- unTermKey :: TermId -> TermIdentifier
+    start         Day            -- TermKey   :: TermIdentifier -< TermId
     end           Day
     holidays      [Day]
     lectureStart  Day 
@@ -61,14 +61,14 @@ Course
     termId       TermId
     schoolId     SchoolId    
     capacity     Int Maybe    
-    created      UTCTime
-    changed      UTCTime
-    createdBy    UserId
-    changedBy    UserId
     hasRegistration Bool -- canRegisterNow = hasRegistration && maybe False (<= currentTime) registerFrom && maybe True (>= currentTime) registerTo
     registerFrom UTCTime Maybe
     registerTo   UTCTime Maybe
-    CourseTermShort termId shorthand 
+    CourseTermShort termId shorthand
+CourseEdit
+    user         UserId
+    time         UTCTime
+    course       CourseId
 Lecturer 
     userId       UserId
     courseId     CourseId
@@ -90,22 +90,24 @@ CourseParticipant
     courseId        CourseId
     userId          UserId
     registration    UTCTime
-    UniqueCourseParticipant courseId userId 
+    UniqueParticipant userId courseId
 Sheet
     courseId        CourseId
     name            Text
     description     Html Maybe
     type            SheetType
+    grouping        SheetGroup
     markingText     Html Maybe
+    visibleFrom     UTCTime Maybe
     activeFrom      UTCTime
     activeTo        UTCTime
     hintFrom        UTCTime Maybe
     solutionFrom    UTCTime Maybe
-    created         UTCTime
-    changed         UTCTime
-    createdBy       UserId
-    changedBy       UserId    
     CourseSheet courseId name
+SheetEdit
+    user            UserId
+    time            UTCTime
+    sheet           SheetId
 SheetFile
     sheetId         SheetId
     fileId          FileId
@@ -122,11 +124,11 @@ Submission
     ratingComment   Text    Maybe 
     ratingBy        UserId  Maybe
     ratingTime      UTCTime Maybe   
-    created         UTCTime
-    changed         UTCTime
-    createdBy       UserId
-    changedBy       UserId
     deriving Show
+SubmissionEdit
+    user            UserId
+    time            UTCTime
+    submission      SubmissionId
 SubmissionFile
     submissionId    SubmissionId
     fileId          FileId 
@@ -141,10 +143,10 @@ SubmissionUser
 SubmissionGroup
     courseId        CourseId
     name            Text
-    created         UTCTime
-    changed         UTCTime
-    createdBy       UserId
-    changedBy       UserId
+SubmissionGroupEdit
+    user            UserId
+    time            UTCTime
+    submissionGroup SubmissionGroupId
 SubmissionGroupUser
     submissionGroupId   SubmissionGroupId
     userId              UserId   
@@ -163,13 +165,12 @@ Booking
     end         UTCTime
     weekly      Bool
     exceptions  [Day]    -- only if weekly, begin in exception
-    created     UTCTime
-    changed     UTCTime
-    createdBy   UserId
-    changedBy   UserId
-    
     bookedFor   RoomForId
     room        RoomId
+BookingEdit
+    user        UserId
+    time        UTCTime
+    boooking    BookingId
 Room
     name        Text
     capacity    Int Maybe
@@ -195,10 +196,10 @@ Exam
     deregistrationEnd   UTCTime
     ratingVisible       Bool
     statisticsVisible   Bool
-    created             UTCTime
-    changed             UTCTime
-    createdBy           UserId
-    changedBy           UserId  
+ExamEdit
+    user                UserId
+    time                UTCTime
+    exam                ExamId
 ExamUser
     userId              UserId
     examId              ExamId
diff --git a/routes b/routes
index 8c074546b..d8d4010e7 100644
--- a/routes
+++ b/routes
@@ -6,25 +6,29 @@
 
 /        HomeR    GET POST
 /profile ProfileR GET
-/users   UsersR   GET
+/users   UsersR   GET                                         !adminAny
 
-/term                       TermShowR         GET 
-/term/edit                  TermEditR         GET POST
-/term/#TermId/edit          TermEditExistR    GET
+/term                       TermShowR         GET
+/term/edit                  TermEditR         GET POST        !adminAny
+/term/#TermId/edit          TermEditExistR    GET             !adminAny
 
 /course/                    CourseListR       GET
-!/course/new                CourseEditR       GET POST
-!/course/#TermId    CourseListTermR           GET
-/course/#TermId/#Text/edit CourseEditExistR   GET
-/course/#TermId/#Text/show CourseShowR        GET POST
+!/course/new                CourseNewR        GET POST        !lecturerAny
+!/course/#TermId            CourseListTermR   GET
+/course/#TermId/#Text CourseR:
+  /show                       CourseShowR GET POST
+  /edit                       CourseEditR GET POST            !lecturer
 
-/course/#TermId/#Text/sheet/                SheetListR   GET
-/course/#TermId/#Text/sheet/#Text/show      SheetShowR   GET
-/course/#TermId/#Text/sheet/#Text/#SheetFileType/#FilePath SheetFileR  GET
-/course/#TermId/#Text/sheet/new             SheetNewR   GET POST
-/course/#TermId/#Text/sheet/#SheetId/edit   SheetEditR  GET POST
-/course/#TermId/#Text/sheet/#SheetId/delete SheetDelR   GET POST
+  /ex SheetR                                                  !registered:
+    /                               SheetListR GET
+    /#Text/show                     SheetShowR GET            !time
+    /#Text/#SheetFileType/#FilePath SheetFileR GET            !time
+    /new                            SheetNewR  GET POST       !lecturer
+    /#Text/edit                     SheetEditR GET POST       !lecturer
+    /#Text/delete                   SheetDelR  GET POST       !lecturer
 
+
+-- TODO below
 /submission                 SubmissionListR GET POST
 /submission/#CryptoUUIDSubmission SubmissionR GET POST
 /submissions.zip SubmissionDownloadMultiArchiveR POST
@@ -34,4 +38,4 @@
 !/#UUID CryptoUUIDDispatchR GET
 
 -- For demonstration
-/course/#CryptoUUIDCourse/edit CourseEditExistIDR GET
+/course/#CryptoUUIDCourse/edit CourseEditIDR GET
diff --git a/src/CryptoID.hs b/src/CryptoID.hs
index 25d19fdca..ed2864eab 100644
--- a/src/CryptoID.hs
+++ b/src/CryptoID.hs
@@ -34,5 +34,6 @@ instance PathPiece UUID where
 decCryptoIDs [ ''SubmissionId
              , ''CourseId
              , ''SheetId
+             , ''FileId
              ]
 {- TODO: Do we need/want CryptoUUIDs for Sheet numbers? -}
diff --git a/src/Foundation.hs b/src/Foundation.hs
index 0bc8713fc..e10d1c515 100644
--- a/src/Foundation.hs
+++ b/src/Foundation.hs
@@ -4,6 +4,7 @@
 {-# LANGUAGE MultiParamTypeClasses #-}
 {-# LANGUAGE TypeFamilies #-}
 {-# LANGUAGE ViewPatterns #-}
+{-# LANGUAGE PatternSynonyms #-}
 {-# LANGUAGE DataKinds #-}
 {-# LANGUAGE RecordWildCards #-}
 {-# LANGUAGE NamedFieldPuns #-}
@@ -51,6 +52,11 @@ import Handler.Utils.StudyFeatures
 
 import System.FilePath
 
+import Handler.Utils.Templates
+
+-- infixl 9 :$:
+-- pattern a :$: b = a b
+
 -- | The foundation datatype for your application. This can be a good place to
 -- keep settings and values requiring initialization before your application
 -- starts running, such as database connections. Every handler will have
@@ -78,18 +84,27 @@ data UniWorX = UniWorX
 -- type Widget  = WidgetT  UniWorX IO ()
 mkYesodData "UniWorX" $(parseRoutesFile "routes")
 
+-- Pattern Synonyms for convenience
+pattern CSheetR tid csh ptn = CourseR tid csh (SheetR ptn)
+
+
 data MenuItem = MenuItem
     { menuItemLabel :: Text
+    , menuItemIcon :: Maybe Text
     , menuItemRoute :: Route UniWorX
     , menuItemAccessCallback :: Handler Bool
     }
 
-data MenuTypes
-    = NavbarLeft  { menuItem :: MenuItem }
-    | NavbarRight { menuItem :: MenuItem }
-    | NavbarExtra { menuItem :: MenuItem }
+data MenuTypes                                 -- Semantische Rolle:
+    = NavbarAside         { menuItem :: MenuItem } --   TODO
+    | NavbarExtra         { menuItem :: MenuItem } --   TODO
+    | NavbarRight         { menuItem :: MenuItem } --   Generell, nahezu immer sichtbar
+    | NavbarSecondary     { menuItem :: MenuItem } --   Generell, nahezu immer sichtbar
+    | PageActionPrime     { menuItem :: MenuItem } --   Seitenspezifische Aktion, häufig
+    | PageActionSecondary { menuItem :: MenuItem } --   Seitenspezifische Aktion, selten
 
--- | A convenient synonym for creating forms.
+-- | Convenient Type Synonyms:
+type DB a = YesodDB UniWorX a
 type Form x = Html -> MForm (HandlerT UniWorX IO) (FormResult x, Widget)
 
 mkMessage "UniWorX" "messages" "de"
@@ -145,7 +160,7 @@ instance Yesod UniWorX where
     isAuthorized  TermShowR          _ = return Authorized
     isAuthorized  CourseListR        _ = return Authorized
     isAuthorized (CourseListTermR _) _ = return Authorized
-    isAuthorized (CourseShowR _ _)   _ = return Authorized
+    isAuthorized (CourseR _ _ CourseShowR) _ = return Authorized
     isAuthorized (CryptoUUIDDispatchR _) _ = return Authorized
     isAuthorized  SubmissionListR    _ = isAuthenticated
     isAuthorized  SubmissionDownloadMultiArchiveR _ = isAuthenticated
@@ -192,16 +207,28 @@ instance Yesod UniWorX where
     makeLogger = return . appLogger
 
 isAuthorizedDB :: Route UniWorX -> Bool -> YesodDB UniWorX AuthResult
+isAuthorizedDB route@(routeAttrs -> attrs) writeable
+  | "adminAny"    `member` attrs = adminAccess    Nothing
+  | "lecturerAny" `member` attrs = lecturerAccess Nothing
+
+
+
 isAuthorizedDB UsersR _ = adminAccess Nothing
-isAuthorizedDB (SubmissionR cID)      _ = submissionAccess $ Right cID
+isAuthorizedDB (SubmissionR cID)       _ = submissionAccess $ Right cID
 isAuthorizedDB (SubmissionDownloadSingleR cID _) _ = submissionAccess $ Right cID
 isAuthorizedDB (SubmissionDownloadArchiveR (splitExtension -> (baseName, _))) _ = submissionAccess . Left . CryptoID $ CI.mk baseName
-isAuthorizedDB TermEditR              _ = adminAccess Nothing
-isAuthorizedDB (TermEditExistR _)     _ = adminAccess Nothing
-isAuthorizedDB CourseEditR            _ = lecturerAccess Nothing
-isAuthorizedDB (CourseEditExistR t c) _ = courseLecturerAccess . entityKey =<< getBy404 (CourseTermShort t c)
-isAuthorizedDB (SheetNewR t c) _        = courseLecturerAccess . entityKey =<< getBy404 (CourseTermShort t c)
-isAuthorizedDB (CourseEditExistIDR cID) _ = do
+isAuthorizedDB TermEditR               _ = adminAccess Nothing
+isAuthorizedDB (TermEditExistR _)      _ = adminAccess Nothing
+isAuthorizedDB CourseNewR              _ = lecturerAccess Nothing
+isAuthorizedDB (CourseR t c CourseEditR)       _ = courseLecturerAccess . entityKey =<< getBy404 (CourseTermShort t c)
+isAuthorizedDB (CourseR t c (SheetR SheetListR))  False  = return Authorized --
+isAuthorizedDB (CourseR t c (SheetR SheetListR)) _       = courseLecturerAccess . entityKey =<< getBy404 (CourseTermShort t c)
+isAuthorizedDB (CourseR t c (SheetR (SheetShowR s))) _   = return Authorized -- TODO: nur für angemeldete Kursteilnehmer falls sichtbar, sonst nur Lectrurer oder Korrektor
+isAuthorizedDB (CourseR t c (SheetR (SheetFileR s _ _))) _ = return Authorized -- TODO: nur für angemeldete Kursteilnehmer falls sichtbar, sonst nur Lectrurer oder Korrektor
+isAuthorizedDB (CourseR t c (SheetR SheetNewR))          _ = courseLecturerAccess . entityKey =<< getBy404 (CourseTermShort t c)
+isAuthorizedDB (CourseR t c (SheetR (SheetEditR s)))     _ = courseLecturerAccess . entityKey =<< getBy404 (CourseTermShort t c)
+isAuthorizedDB (CourseR t c (SheetR (SheetDelR  s)))     _ = courseLecturerAccess . entityKey =<< getBy404 (CourseTermShort t c)
+isAuthorizedDB (CourseEditIDR cID)     _ = do
   courseId <- decrypt cID
   courseLecturerAccess courseId
 isAuthorizedDB _route _isWrite = return  $ Unauthorized "No access to this route." -- Calling isAuthorized here creates infinite loop!
@@ -219,29 +246,45 @@ submissionAccess cID = do
 
 adminAccess :: Maybe SchoolId -- ^ If @Just@, matched exactly against 'userAdminSchool'
             -> YesodDB UniWorX AuthResult
-adminAccess school = do    
+adminAccess school = do
   authId <- lift requireAuthId
-  adrights <- selectList ((UserAdminUser ==. authId) : maybe [] (\s -> [UserAdminSchool ==. s]) school) []  
-  return $ if (not $ null adrights) 
+  adrights <- selectList ((UserAdminUser ==. authId) : maybe [] (\s -> [UserAdminSchool ==. s]) school) []
+  return $ if (not $ null adrights)
     then Authorized
-    else Unauthorized "No admin access"
+    else Unauthorized "No admin access" -- TODO internationalize
 
 lecturerAccess :: Maybe SchoolId
                -> YesodDB UniWorX AuthResult
 lecturerAccess school = do
   authId <- lift requireAuthId
-  lecrights <- selectList ((UserLecturerUser ==. authId) : maybe [] (\s -> [UserLecturerSchool ==. s]) school) []  
+  lecrights <- selectList ((UserLecturerUser ==. authId) : maybe [] (\s -> [UserLecturerSchool ==. s]) school) []
   return $ if (not $ null lecrights)
     then Authorized
-    else Unauthorized "No lecturer access"
+    else Unauthorized "No lecturer access" -- TODO internationalize
+
+lecturerAccess' :: SchoolId -> YesodDB UniWorX AuthResult
+lecturerAccess' = authorizedFor UniqueSchoolLecturer MsgUnauthorizedSchoolLecturer
 
 courseLecturerAccess :: CourseId -> YesodDB UniWorX AuthResult
-courseLecturerAccess courseId = do
+courseLecturerAccess    = authorizedFor UniqueLecturer    MsgUnauthorizedLecturer
+
+courseCorrectorAccess :: CourseId -> YesodDB UniWorX AuthResult
+courseCorrectorAccess   = authorizedFor UniqueCorrector   MsgUnauthorizedCorrector
+
+courseParticipantAccess :: CourseId -> YesodDB UniWorX AuthResult
+courseParticipantAccess = authorizedFor UniqueParticipant MsgUnauthorizedParticipant
+
+authorizedFor ::  ( PersistEntityBackend record ~ BaseBackend backend
+                  , PersistEntity record, PersistUniqueRead backend
+                  , YesodAuth master, RenderMessage master msg
+                  )
+  => (AuthId master -> t -> Unique record) -> msg -> t -> ReaderT backend (HandlerT master IO) AuthResult
+authorizedFor authType msg courseId = do
   authId <- lift requireAuthId
-  users <- map (lecturerUserId . entityVal ) <$> selectList [ LecturerCourseId ==. courseId ] []
-  return $ case authId `elem` users of
-    True  -> Authorized
-    False -> Unauthorized "No lecturer access for this course"
+  access <- getBy $ authType authId courseId
+  case access of
+    (Just _) -> return Authorized
+    Nothing  -> unauthorizedI msg
 
 isAuthorizedDB' :: Route UniWorX -> Bool -> YesodDB UniWorX Bool
 isAuthorizedDB' route isWrite = (== Authorized) <$> isAuthorizedDB route isWrite
@@ -250,61 +293,82 @@ isAuthorized' :: Route UniWorX -> Bool -> Handler Bool
 isAuthorized' route isWrite = runDB $ isAuthorizedDB' route isWrite
 
 -- Define breadcrumbs.
-instance YesodBreadcrumbs UniWorX where  
+instance YesodBreadcrumbs UniWorX where
   breadcrumb TermShowR = return ("Semester", Just HomeR)
   breadcrumb TermEditR = return ("Neu", Just TermShowR)
   breadcrumb (TermEditExistR _) = return ("Editieren", Just TermShowR)
-  
-  breadcrumb CourseListR = return ("Kurs", Just HomeR)
-  breadcrumb (CourseListTermR term) = return (toPathPiece term, Just TermShowR)
-  breadcrumb (CourseShowR term course) = return (course, Just $ CourseListTermR term)
-  breadcrumb CourseEditR = return ("Neu", Just CourseListR)  
-  breadcrumb (CourseEditExistR _ _) = return ("Editieren", Just CourseListR)
 
-  breadcrumb (SheetListR tid csh) = return ("Kurs", Just $ CourseShowR tid csh)
-  breadcrumb (SheetShowR tid csh _shn) = return ("Übungen", Just $ SheetListR tid csh)
+  breadcrumb  CourseListR              = return ("Kurs", Just HomeR)
+  breadcrumb (CourseListTermR term)    = return (toPathPiece term, Just TermShowR)
+  breadcrumb (CourseR term course CourseShowR) = return (course, Just $ CourseListTermR term)
+  breadcrumb  CourseNewR               = return ("Neu", Just CourseListR)
+  breadcrumb (CourseR _ _ CourseEditR)         = return ("Editieren", Just CourseListR)
+
+  breadcrumb (CourseR tid csh (SheetR SheetListR))       = return ("Übungen",Just $ CourseR tid csh CourseShowR)
+  breadcrumb (CourseR tid csh (SheetR SheetNewR ))       = return ("Neu",    Just $ CourseR tid csh $ SheetR SheetListR)
+  breadcrumb (CourseR tid csh (SheetR (SheetShowR shn))) = return (shn,      Just $ CourseR tid csh $ SheetR SheetListR)
+  breadcrumb (CourseR tid csh (SheetR (SheetEditR shn))) = return ("Edit",   Just $ CourseR tid csh $ SheetR $ SheetShowR shn)
+  breadcrumb (CourseR tid csh (SheetR (SheetDelR  shn))) = return ("DELETE", Just $ CourseR tid csh $ SheetR $ SheetShowR shn)
 
   breadcrumb SubmissionListR = return ("Abgaben", Just HomeR)
   breadcrumb (SubmissionR _) = return ("Abgabe", Just SubmissionListR)
-  
+
   breadcrumb HomeR = return ("ReWorX", Nothing)
   breadcrumb (AuthR _) = return ("Login", Just HomeR)
   breadcrumb ProfileR = return ("Profile", Just HomeR)
   breadcrumb  _ = return ("home", Nothing)
 
-  
+
 defaultLinks :: [MenuTypes]
 defaultLinks = -- Define the menu items of the header.
-  [ NavbarLeft $ MenuItem
+  [ NavbarRight $ MenuItem
       { menuItemLabel = "Home"
+      , menuItemIcon = Just "home"
       , menuItemRoute = HomeR
       , menuItemAccessCallback = return True
       }
-  , NavbarLeft $ MenuItem
-      { menuItemLabel = "Kurse"
-      , menuItemRoute = CourseListR
-      , menuItemAccessCallback = return True
-      }                    
-  , NavbarRight $ MenuItem
-      { menuItemLabel = "Users"
-      , menuItemRoute = UsersR
-      , menuItemAccessCallback = return True -- Creates a LOOP: (Authorized ==) <$> isAuthorized UsersR False
-      }
   , NavbarRight $ MenuItem
       { menuItemLabel = "Profile"
+      , menuItemIcon = Just "profile"
       , menuItemRoute = ProfileR
       , menuItemAccessCallback = isJust <$> maybeAuthPair
       }
-  , NavbarRight $ MenuItem
+  , NavbarSecondary $ MenuItem
       { menuItemLabel = "Login"
+      , menuItemIcon = Just "login"
       , menuItemRoute = AuthR LoginR
       , menuItemAccessCallback = isNothing <$> maybeAuthPair
       }
-  , NavbarRight $ MenuItem
+  , NavbarSecondary $ MenuItem
       { menuItemLabel = "Logout"
+      , menuItemIcon = Just "logout"
       , menuItemRoute = AuthR LogoutR
       , menuItemAccessCallback = isJust <$> maybeAuthPair
       }
+  , NavbarAside $ MenuItem
+      { menuItemLabel = "Aktuelle Veranstaltungen"
+      , menuItemIcon = Just "book"
+      , menuItemRoute = CourseListR -- should be CourseListActiveR or similar in the future
+      , menuItemAccessCallback = return True
+      }
+  , NavbarAside $ MenuItem
+      { menuItemLabel = "Alte Veranstaltungen"
+      , menuItemIcon = Just "book"
+      , menuItemRoute = CourseListR -- should be CourseListInactiveR or similar in the future
+      , menuItemAccessCallback = return True
+      }
+  , NavbarAside $ MenuItem
+      { menuItemLabel = "Veranstaltungen"
+      , menuItemIcon = Just "book"
+      , menuItemRoute = CourseListR
+      , menuItemAccessCallback = return True
+      }
+  , NavbarAside $ MenuItem
+      { menuItemLabel = "Benutzer"
+      , menuItemIcon = Just "user"
+      , menuItemRoute = UsersR
+      , menuItemAccessCallback = return True -- Creates a LOOP: (Authorized ==) <$> isAuthorized UsersR False
+      }
   ]
 
 defaultLinkLayout :: [MenuTypes] -> Widget -> Handler Html
@@ -328,12 +392,34 @@ defaultMenuLayout menu widget = do
     -- value passed to hamletToRepHtml cannot be a widget, this allows
     -- you to use normal widget features in default-layout.
 
+    let
+        navbar :: Widget
+        navbar = $(widgetFile "widgets/navbar")
+        asidenav :: Widget
+        asidenav = $(widgetFile "widgets/asidenav")
+        breadcrumbs :: Widget
+        breadcrumbs = $(widgetFile "widgets/breadcrumbs")
+        pageactionprime :: Widget
+        pageactionprime = $(widgetFile "widgets/pageactionprime")
+        -- functions to determine if there are page-actions
+        isPageActionPrime :: MenuTypes -> Bool
+        isPageActionPrime (PageActionPrime _) = True
+        isPageActionPrime _ = False
+        hasPageActions :: Bool
+        hasPageActions = any isPageActionPrime menuTypes
+
     pc <- widgetToPageContent $ do
-        addStylesheet $ StaticR css_bootstrap_css
+        addStylesheetRemote "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,800,900"
+        addScript $ StaticR js_featureChecker_js
+        addStylesheet $ StaticR css_fonts_css
+        addStylesheet $ StaticR css_icons_css
         $(widgetFile "default-layout")
+        $(widgetFile "standalone/modal")
+        $(widgetFile "standalone/showHide")
+        $(widgetFile "standalone/sortable")
+        $(widgetFile "standalone/inputs")
     withUrlRenderer $(hamletFile "templates/default-layout-wrapper.hamlet")
 
-  
 -- How to run database actions.
 instance YesodPersist UniWorX where
     type YesodPersistBackend UniWorX = SqlBackend
@@ -363,7 +449,7 @@ instance YesodAuth UniWorX where
 
       $logDebugS "auth" $ tshow ((userPlugin, userIdent), creds)
 
-      when isDummy . (throwError =<<) . lift $ 
+      when isDummy . (throwError =<<) . lift $
           maybe (UserError $ IdentifierNotFound credsIdent) (Authenticated . entityKey) <$> getBy uAuth
 
       let
@@ -373,7 +459,7 @@ instance YesodAuth UniWorX where
 
       userEmail <- maybe (throwError $ ServerError "Could not retrieve user email") return userEmail'
       userDisplayName <- maybe (throwError $ ServerError "Could not retrieve user name") return userDisplayName'
-            
+
       let
         newUser = User{..}
         userUpdate = [ UserMatrikelnummer =. userMatrikelnummer
@@ -388,13 +474,13 @@ instance YesodAuth UniWorX where
         userStudyFeatures' = [ v | (k, v) <- credsExtra, k == "dfnEduPersonFeaturesOfStudy" ]
 
       fs <- either (\err -> throwError . ServerError $ "Could not parse features of study: " <> err) return userStudyFeatures
-    
+
       lift $ deleteWhere [StudyFeaturesUser ==. userId]
 
       forM_ fs $ \StudyFeatures{..} -> do
         lift . insertMaybe studyFeaturesDegree $ StudyDegree (unStudyDegreeKey studyFeaturesDegree) Nothing Nothing
         lift . insertMaybe studyFeaturesField $ StudyTerms (unStudyTermsKey studyFeaturesField) Nothing Nothing
-              
+
       lift $ insertMany_ fs
       return $ Authenticated userId
       where
@@ -419,7 +505,7 @@ ldapConfig _app@(appSettings -> settings) = LDAPConfig
   }
   where
     principalName :: IsString a => a
-    principalName = "userPrincipalName" 
+    principalName = "userPrincipalName"
     identifierModifier _ entry = case lookup principalName $ leattrs entry of
       Just [n] -> Text.pack n
       _        -> error "Could not determine user principal name"
diff --git a/src/Handler/Course.hs b/src/Handler/Course.hs
index 28250fb7d..c12cc46af 100644
--- a/src/Handler/Course.hs
+++ b/src/Handler/Course.hs
@@ -9,38 +9,38 @@
 
 module Handler.Course where
 
-import Import 
+import Import
 import Handler.Utils
 
 -- import Data.Time
 import qualified Data.Text as T
 import Data.Function ((&))
-import Yesod.Form.Bootstrap3 
+import Yesod.Form.Bootstrap3
 
 import Colonnade hiding (fromMaybe)
-import Yesod.Colonnade 
+import Yesod.Colonnade
 
 import qualified Data.UUID.Cryptographic as UUID
 
 
 getCourseListR :: Handler TypedContent
-getCourseListR = redirect TermShowR  
+getCourseListR = redirect TermShowR
 
 getCourseListTermR :: TermId -> Handler Html
 getCourseListTermR tidini = do
-  (term,courses) <- runDB $ (,) 
+  (term,courses) <- runDB $ (,)
       <$> get tidini
       <*> selectList [CourseTermId ==. tidini] [Asc CourseShorthand]
   when (isNothing term) $ do
     addMessage "warning" [shamlet| Semester #{toPathPiece tidini} nicht gefunden. |]
     redirect TermShowR
-  -- TODO: several runDBs per TableRow are probably too inefficient!    
-  let colonnadeTerms = mconcat 
-        [ headed "Kürzel" $ (\ckv -> 
+  -- TODO: several runDBs per TableRow are probably too inefficient!
+  let colonnadeTerms = mconcat
+        [ headed "Kürzel" $ (\ckv ->
             let c   = entityVal ckv
-                shd = courseShorthand c  
+                shd = courseShorthand c
                 tid = courseTermId c
-            in [whamlet| <a href=@{CourseShowR tid shd}>#{shd} |] )                      
+            in [whamlet| <a href=@{CourseR tid shd CourseShowR}>#{shd} |] )
 --         , headed "Institut" $ [shamlet| #{course} |]
         , headed "Beginn Anmeldung" $ fromString.(maybe "" formatTimeGerWD).courseRegisterFrom.entityVal
         , headed "Ende Anmeldung"   $ fromString.(maybe "" formatTimeGerWD).courseRegisterTo.entityVal
@@ -49,201 +49,237 @@ getCourseListTermR tidini = do
               partiNum <- handlerToWidget $ runDB $ count [CourseParticipantCourseId ==. cid]
               [whamlet| #{show partiNum} |]
             )
-        , headed " " $ (\ckv -> 
+        , headed " " $ (\ckv ->
             let c   = entityVal ckv
-                shd = courseShorthand c  
+                shd = courseShorthand c
                 tid = courseTermId c
             in do
-              adminLink <- handlerToWidget $ isAuthorized (CourseEditExistR tid shd ) False
-              -- if (adminLink==Authorized) then linkButton "Ändern" BCWarning (CourseEditExistR tid shd) else ""
-              [whamlet| 
+              adminLink <- handlerToWidget $ isAuthorized (CourseR tid shd CourseEditR) False
+              -- if (adminLink==Authorized) then linkButton "Ändern" BCWarning (CourseEditR tid shd) else ""
+              [whamlet|
                 $if adminLink == Authorized
-                  <a href=@{CourseEditExistR tid shd}>
+                  <a href=@{CourseR tid shd CourseEditR}>
                     editieren
               |]
-          )  
+          )
         ]
-  let pageLinks = 
-        [ NavbarLeft $ MenuItem
+  let pageLinks =
+        [ PageActionPrime $ MenuItem
           { menuItemLabel = "Neuer Kurs"
-          , menuItemRoute = CourseEditR
-          , menuItemAccessCallback = (== Authorized) <$> isAuthorized CourseEditR False
+          , menuItemIcon  = Just "book"
+          , menuItemRoute = CourseNewR
+          , menuItemAccessCallback = (== Authorized) <$> isAuthorized CourseNewR False
           }
-        ] 
+        ]
+  let coursesTable = encodeWidgetTable tableSortable colonnadeTerms courses
   defaultLinkLayout pageLinks $ do
---   defaultLayout $ do
-    setTitle "Semesterkurse"  
-    linkButton "Neuen Kurs anlegen" BCPrimary CourseEditR
-    encodeWidgetTable tableDefault colonnadeTerms courses -- (map entityVal courses)
+    setTitle "Semesterkurse"
+    $(widgetFile "courses")
 
 getCourseShowR :: TermId -> Text -> Handler Html
 getCourseShowR tid csh = do
   mbAid <- maybeAuthId
   (courseEnt,(schoolMB,participants,mbRegistered)) <- runDB $ do
       courseEnt@(Entity cid course) <- getBy404 $ CourseTermShort tid csh
-      dependent <- (,,) 
+      dependent <- (,,)
           <$> get (courseSchoolId course)               -- join
-          <*> count [CourseParticipantCourseId ==. cid] -- join 
+          <*> count [CourseParticipantCourseId ==. cid] -- join
           <*> (case mbAid of -- TODO: Someone please refactor this late-night mess here!
                 Nothing -> return False
                 (Just aid) -> do
-                                regL <- getBy (UniqueCourseParticipant cid aid)
+                                regL <- getBy (UniqueParticipant aid cid)
                                 return $ isJust regL)
       return $ (courseEnt,dependent)
-  let course = entityVal courseEnt  
-  (regWidget, regEnctype) <- generateFormPost $ identifyForm "registerBtn" $ registerButton $ mbRegistered      
-  defaultLayout $ do
+  let course = entityVal courseEnt
+  (regWidget, regEnctype) <- generateFormPost $ identifyForm "registerBtn" $ registerButton $ mbRegistered
+  let pageActions =
+        [ PageActionPrime $ MenuItem
+          { menuItemLabel = "Übungsblätter"
+          , menuItemIcon  = Nothing
+          , menuItemRoute = CSheetR tid csh SheetListR
+          , menuItemAccessCallback = (== Authorized) <$> isAuthorized (CSheetR tid csh SheetListR) False
+          }
+        ]
+  defaultLinkLayout pageActions $ do
     setTitle $ [shamlet| #{toPathPiece tid} - #{csh}|]
     $(widgetFile "course")
-      
+
 registerButton :: Bool -> Form ()
-registerButton registered = renderAForm FormStandard $       
-      pure () <*  bootstrapSubmit regMsg 
-  where 
+registerButton registered = renderAForm FormStandard $
+      pure () <*  bootstrapSubmit regMsg
+  where
     msg    = if registered then "Abmelden" else "Anmelden"
     regMsg = msg :: BootstrapSubmit Text
-    
+
 postCourseShowR :: TermId -> Text -> Handler Html
 postCourseShowR tid csh = do
   aid <- requireAuthId
   (cid, registered) <- runDB $ do
       (Entity cid _) <- getBy404 $ CourseTermShort tid csh
-      registered <- isJust <$> (getBy $ UniqueCourseParticipant cid aid)
+      registered <- isJust <$> (getBy $ UniqueParticipant aid cid)
       return (cid, registered)
-  ((regResult,_), _) <- runFormPost $ identifyForm "registerBtn" $ registerButton registered      
-  case regResult of 
+  ((regResult,_), _) <- runFormPost $ identifyForm "registerBtn" $ registerButton registered
+  case regResult of
     (FormSuccess _)
-      | registered -> do                    
-          runDB $ deleteBy $ UniqueCourseParticipant cid aid 
-          addMessage "info" "Sie wurden abgemeldet."          
+      | registered -> do
+          runDB $ deleteBy $ UniqueParticipant aid cid
+          addMessage "info" "Sie wurden abgemeldet."
       | otherwise  -> do
           actTime <- liftIO $ getCurrentTime
           regOk <- runDB $ insertUnique $ CourseParticipant cid aid actTime
           when (isJust regOk) $ addMessage "success" "Erfolgreich angemeldet!"
     (_other) -> return () -- TODO check this!
   -- redirect or not?! I guess not, since we want GET now
-  getCourseShowR tid csh  
-  
-getCourseEditR :: Handler Html
-getCourseEditR = do
+  getCourseShowR tid csh
+
+getCourseNewR :: Handler Html
+getCourseNewR = do
   -- TODO: Defaults für Semester hier ermitteln und übergeben
   courseEditHandler Nothing
-  
-postCourseEditR :: Handler Html
-postCourseEditR = courseEditHandler Nothing
-  
-getCourseEditExistR :: TermId -> Text -> Handler Html
-getCourseEditExistR tid csh = do  
+
+postCourseNewR :: Handler Html
+postCourseNewR = courseEditHandler Nothing
+
+getCourseEditR :: TermId -> Text -> Handler Html
+getCourseEditR tid csh = do
   course <- runDB $ getBy $ CourseTermShort tid csh
   courseEditHandler course
 
-getCourseEditExistIDR :: CryptoUUIDCourse -> Handler Html
-getCourseEditExistIDR cID = do
+postCourseEditR :: TermId -> Text -> Handler Html
+postCourseEditR = getCourseEditR
+
+getCourseEditIDR :: CryptoUUIDCourse -> Handler Html
+getCourseEditIDR cID = do
   cIDKey <- getsYesod appCryptoIDKey
   courseID <- UUID.decrypt cIDKey cID
   courseEditHandler =<< runDB (getEntity courseID)
 
-     
-courseEditHandler :: Maybe (Entity Course) -> Handler Html
-courseEditHandler course = do
-    aid <- requireAuthId
-    ((result, formWidget), formEnctype) <- runFormPost $ newCourseForm $ courseToForm <$> course
-    action <- lookupPostParam "formaction"
-    case (result,action) of
-      (FormSuccess res, fAct) 
-        | fAct == formActionDelete
-        , Just cid <- cfCourseId res -> do 
+
+courseDeleteHandler :: Handler Html -- not called anywhere yet
+courseDeleteHandler = undefined
+{- TODO
+        | False -- DELETE -- TODO: This no longer works that way!!! See new way in Handler.Term.termEditHandler
+        , Just cid <- cfCourseId res -> do
             runDB $ deleteCascade cid -- TODO Sicherheitsabfrage einbauen!
             let cti = toPathPiece $ cfTerm res
             addMessage "info" [shamlet| Kurs #{cti}/#{cfShort res} wurde gelöscht!|]
             redirect $ CourseListTermR $ cfTerm res
-        | fAct == formActionSave 
-        , Just cid <- cfCourseId res -> do 
-            let tid = cfTerm  res
-            actTime <- liftIO getCurrentTime
-            updateokay <- runDB $ do
-              exists <- getBy $ CourseTermShort tid $ cfShort res 
-              let upokay = isNothing exists
-              when upokay $ update cid 
-                [ CourseName         =. cfName     res
-                , CourseDescription  =. cfDesc     res
-                , CourseLinkExternal =. cfLink     res
-                , CourseShorthand    =. cfShort    res -- TODO: change here should generate a warning, or only allowed for Admins?!
-                , CourseTermId       =. tid            -- TODO: change here should generate a warning, or only allowed for Admins?!
-                , CourseSchoolId     =. cfSchool   res
-                , CourseCapacity     =. cfCapacity res
-                , CourseRegisterFrom =. cfRegFrom  res
-                , CourseRegisterTo   =. cfRegTo    res
-                , CourseChangedBy    =. aid
-                , CourseChanged      =. actTime
-                ]
-              return upokay
-            let cti = toPathPiece $ cfTerm res
-            if updateokay 
-              then do 
-                addMessage "info" [shamlet| Kurs #{cti}/#{cfShort res} wurde geändert. |]
-                redirect $ CourseListTermR $ cfTerm res
-              else do
-                addMessage "danger" [shamlet| Kurs #{cti}/#{cfShort res} konnte nicht geändert werden. 
-                    \ Es gibt bereits einen anderen Kurs mit diesem Kürzel in diesem Semester.|]
-        | fAct == formActionSave
-        , Nothing <- cfCourseId res -> do
-            actTime <- liftIO getCurrentTime
-            insertOkay <- runDB $ insertUnique $ Course 
-                { courseName            = cfName     res
-                , courseDescription     = cfDesc     res
-                , courseLinkExternal    = cfLink     res
-                , courseShorthand       = cfShort    res
-                , courseTermId          = cfTerm     res
-                , courseSchoolId        = cfSchool   res
-                , courseCapacity        = cfCapacity res
-                , courseHasRegistration = cfHasReg   res
-                , courseRegisterFrom    = cfRegFrom  res
-                , courseRegisterTo      = cfRegTo    res
-                , courseCreated         = actTime
-                , courseChanged         = actTime
-                , courseCreatedBy       = aid
-                , courseChangedBy       = aid
-                } 
-            case insertOkay of 
-                (Just cid) -> do
-                  runDB $ insert_ $ Lecturer aid cid 
-                  let cti = toPathPiece $ cfTerm res
-                  addMessage "info" [shamlet|Kurs #{cti}/#{cfShort res} wurde angelegt.|]
-                  redirect $ CourseListTermR $ cfTerm res
-                Nothing -> do
-                  let cti = toPathPiece $ cfTerm res
-                  addMessage "danger" [shamlet|Es gibt bereits einen Kurs #{cfShort res} in Semester #{cti}.|]      
-      (FormFailure _,_) -> addMessage "warning" "Bitte Eingabe korrigieren."            
-      _other -> return ()
+-}
+
+courseEditHandler :: Maybe (Entity Course) -> Handler Html
+courseEditHandler course = do
+    aid <- requireAuthId -- TODO: Verify that Editor is owner of the Course to be Edited!!!
+    ((result, formWidget), formEnctype) <- runFormPost $ newCourseForm $ courseToForm <$> course
+    case result of
+      (FormSuccess res@(
+        CourseForm  { cfCourseId = Nothing
+                    , cfShort    = csh
+                    , cfTerm     = tid
+                    })) ->  do -- create new course
+          let tident = unTermKey tid
+          now <- liftIO getCurrentTime
+          insertOkay <- runDB $ insertUnique $ Course
+            { courseName            = cfName     res
+            , courseDescription     = cfDesc     res
+            , courseLinkExternal    = cfLink     res
+            , courseShorthand       = cfShort    res
+            , courseTermId          = cfTerm     res
+            , courseSchoolId        = cfSchool   res
+            , courseCapacity        = cfCapacity res
+            , courseHasRegistration = cfHasReg   res
+            , courseRegisterFrom    = cfRegFrom  res
+            , courseRegisterTo      = cfRegTo    res
+            }
+          case insertOkay of
+            (Just cid) -> do
+              runDB $ do
+                insert_ $ CourseEdit aid now cid
+                insert_ $ Lecturer aid cid
+              addMessageI "info" $ MsgCourseNewOk tident csh
+              redirect $ CourseListTermR tid
+            Nothing ->
+              addMessageI "danger" $ MsgCourseNewDupShort tident csh
+
+      (FormSuccess res@(
+        CourseForm  { cfCourseId = Just cid
+                    , cfShort    = csh
+                    , cfTerm     = tid
+                    })) -> do -- edit existing course
+          let tident = unTermKey tid
+          now <- liftIO getCurrentTime
+          -- addMessage "debug" [shamlet| #{show res}|]
+          runDB $ do
+            old <- get cid
+            case old of
+              Nothing -> addMessageI "error" $ MsgInvalidInput
+              (Just oldCourse) -> do
+            -- existing <- getBy $ CourseTermShort tid csh
+            -- if ((entityKey <$> existing) /= Just cid)
+            --  then addMessageI "danger" $ MsgCourseEditDupShort tident csh
+            --   else do
+                -- addMessage "debug" $ fromMaybe [shamlet|No description given.|] $ cfDesc res
+--                 update cid
+--                   [ CourseName         =. cfName     res
+--                   , CourseDescription  =. cfDesc     res
+--                   , CourseLinkExternal =. cfLink     res
+--                   , CourseShorthand    =. cfShort    res -- TODO: change here should generate a warning, or only allowed for Admins?!
+--                   , CourseTermId       =. tid            -- TODO: change here should generate a warning, or only allowed for Admins?!
+--                   , CourseSchoolId     =. cfSchool   res
+--                   , CourseCapacity     =. cfCapacity res
+--                   , CourseRegisterFrom =. cfRegFrom  res
+--                   , CourseRegisterTo   =. cfRegTo    res
+--                   , CourseChangedBy    =. aid
+--                   , CourseChanged      =. now
+--                   ]
+                _updOkay <- replace cid (  -- TODO replaceUnique requires Eq?!
+                    Course { courseName            = cfName     res
+                           , courseDescription     = cfDesc     res
+                           , courseLinkExternal    = cfLink     res
+                           , courseShorthand       = cfShort    res
+                           , courseTermId          = cfTerm     res
+                           , courseSchoolId        = cfSchool   res
+                           , courseCapacity        = cfCapacity res
+                           , courseHasRegistration = cfHasReg   res
+                           , courseRegisterFrom    = cfRegFrom  res
+                           , courseRegisterTo      = cfRegTo    res
+                    }
+                  )
+                insert_ $ CourseEdit aid now cid
+--                 if (isNothing updOkay)
+--                   then do
+                addMessageI "info" $ MsgCourseEditOk tident csh
+                -- redirect $ CourseListTermR tid
+--                   else addMessageI "danger" $ MsgCourseEditDupShort tident csh
+
+      (FormFailure _) -> addMessageI "warning" MsgInvalidInput
+      other -> addMessage "error" $ [shamlet| Error: #{show other}|]
     let formTitle   = "Kurs editieren/anlegen" :: Text
-    let actionUrl   = CourseEditR
-    let formActions = defaultFormActions
+    actionUrl <- fromMaybe CourseNewR <$> getCurrentRoute
     defaultLayout $ do
       setTitle [shamlet| #{formTitle} |]
       $(widgetFile "formPage")
-      
-      
-data CourseForm = CourseForm 
+
+
+data CourseForm = CourseForm
         { cfCourseId :: Maybe CourseId -- Maybe CryptoUUIDCourse
-        , cfName     :: Text 
+        , cfName     :: Text
         , cfDesc     :: Maybe Html
-        , cfLink     :: Maybe Text 
-        , cfShort    :: Text 
+        , cfLink     :: Maybe Text
+        , cfShort    :: Text
         , cfTerm     :: TermId
         , cfSchool   :: SchoolId
-        , cfCapacity :: Maybe Int 
+        , cfCapacity :: Maybe Int
         , cfHasReg   :: Bool
-        , cfRegFrom  :: Maybe UTCTime 
-        , cfRegTo    :: Maybe UTCTime 
-        }  
+        , cfRegFrom  :: Maybe UTCTime
+        , cfRegTo    :: Maybe UTCTime
+        }
 
 instance Show CourseForm where
   show cf = T.unpack (cfShort cf) ++ ' ':(show $ cfCourseId cf)
 
-  
+
 courseToForm :: Entity Course -> CourseForm
-courseToForm cEntity = CourseForm 
+courseToForm cEntity = CourseForm
         { cfCourseId = Just $ entityKey cEntity
         , cfName     = courseName               course
         , cfDesc     = courseDescription        course
@@ -253,26 +289,26 @@ courseToForm cEntity = CourseForm
         , cfSchool   = courseSchoolId           course
         , cfCapacity = courseCapacity           course
         , cfHasReg   = courseHasRegistration    course
-        , cfRegFrom  = courseRegisterFrom       course 
-        , cfRegTo    = courseRegisterTo         course 
+        , cfRegFrom  = courseRegisterFrom       course
+        , cfRegTo    = courseRegisterTo         course
         }
   where
     course = entityVal cEntity
-      
+
 newCourseForm :: Maybe CourseForm -> Form CourseForm
 newCourseForm template = identForm FIDcourse $ \html -> do
-    -- mopt hiddenField    
+    -- mopt hiddenField
     --     cidKey <- getsYesod appCryptoIDKey
     --     courseId <- runMaybeT $ do
     --         cid <- cfCourseId template
-    --         UUID.encrypt cidKey cid 
+    --         UUID.encrypt cidKey cid
     (result, widget) <- flip (renderAForm FormStandard) html $ CourseForm
       -- <$> pure cid -- $ join $ cfCourseId <$> template -- why doesnt this work?
       <$> aopt hiddenField "KursId"             (cfCourseId <$> template)
       <*> areq textField (fsb "Name")           (cfName     <$> template)
       <*> aopt htmlField (fsb "Beschreibung")   (cfDesc     <$> template)
       <*> aopt urlField  (fsb "Homepage")       (cfLink     <$> template)
-      <*> areq textField (fsb "Kürzel" 
+      <*> areq textField (fsb "Kürzel"
             -- & addAttr "disabled" "disabled"
             & setTooltip "Muss innerhalb des Semesters eindeutig sein")
                                                 (cfShort  <$> template)
@@ -282,9 +318,9 @@ newCourseForm template = identForm FIDcourse $ \html -> do
       <*> areq checkBoxField          (fsb "Anmeldung")      (cfHasReg   <$> template)
       <*> aopt utcTimeField           (fsb "Anmeldung von:") (cfRegFrom  <$> template)
       <*> aopt utcTimeField           (fsb "Anmeldung bis:") (cfRegTo    <$> template)
-      -- <*  bootstrapSubmit (bsSubmit (show cid)) 
-    return $ case result of  
-      FormSuccess courseResult 
+      <*  submitButton
+    return $ case result of
+      FormSuccess courseResult
         | errorMsgs <- validateCourse courseResult
         , not $ null errorMsgs ->
           (FormFailure errorMsgs,
@@ -293,18 +329,18 @@ newCourseForm template = identForm FIDcourse $ \html -> do
                     <h4> Fehler:
                     <ul>
                       $forall errmsg <- errorMsgs
-                        <li> #{errmsg} 
+                        <li> #{errmsg}
                   ^{widget}
                 |]
-              )        
+              )
       _ -> (result, widget)
 --  where
---     cid :: Maybe CourseId    
+--     cid :: Maybe CourseId
 --     cid = join $ cfCourseId <$> template
 
 
 validateCourse :: CourseForm -> [Text]
-validateCourse (CourseForm{..}) = 
+validateCourse (CourseForm{..}) =
   [ msg | (False, msg) <-
     [
       ( cfRegFrom <= cfRegTo
@@ -324,5 +360,3 @@ validateCourse (CourseForm{..}) =
       , "Anmeldungen aktivieren oder Anmeldezeitraum löschen"
       )
   ] ]
-
-                           
diff --git a/src/Handler/Home.hs b/src/Handler/Home.hs
index 9054a0726..d8fb47dd1 100644
--- a/src/Handler/Home.hs
+++ b/src/Handler/Home.hs
@@ -9,13 +9,13 @@
 
 module Handler.Home where
 
-import Import 
+import Import
 import Handler.Utils
 
 -- import Data.Time
 -- import qualified Data.Text as T
--- import Yesod.Form.Bootstrap3 
- 
+-- import Yesod.Form.Bootstrap3
+
 import Web.PathPieces (showToPathPiece, readFromPathPiece)
 
 -- import Colonnade
@@ -30,29 +30,28 @@ data CreateButton = CreateMath | CreateInf  -- Dummy for Example
 instance PathPiece CreateButton where    -- for displaying the button only, not really for paths
   toPathPiece   = showToPathPiece
   fromPathPiece = readFromPathPiece
-  
+
 instance Button CreateButton where
   label CreateMath = [whamlet|Ma<i>thema</i>tik|]
-  label CreateInf  = "Informatik"  
-  
+  label CreateInf  = "Informatik"
+
   cssClass CreateMath = BCInfo
-  cssClass CreateInf  = BCPrimary  
--- END Button needed here 
+  cssClass CreateInf  = BCPrimary
+-- END Button needed here
 
 getHomeR :: Handler Html
-getHomeR = do 
+getHomeR = do
   (btnWdgt, btnEnctype) <- generateFormPost (buttonForm :: Form CreateButton)
   defaultLayout $ do
     setTitle "Willkommen zum ReWorX Test!"
     $(widgetFile "home")
 
-  
-postHomeR :: Handler Html 
+
+postHomeR :: Handler Html
 postHomeR = do
-  ((btnResult,_), _) <- runFormPost $ buttonForm  
-  case btnResult of 
-    (FormSuccess CreateInf)  -> setMessage "Informatik-Knopf gedrückt" 
+  ((btnResult,_), _) <- runFormPost $ buttonForm
+  case btnResult of
+    (FormSuccess CreateInf)  -> setMessage "Informatik-Knopf gedrückt"
     (FormSuccess CreateMath) -> addMessage "warning" "Knopf Mathematik erkannt"
-    _other -> return ()    
-  getHomeR  
-  
+    _other -> return ()
+  getHomeR
diff --git a/src/Handler/Sheet.hs b/src/Handler/Sheet.hs
index 06a7d8fb1..a7f672cc7 100644
--- a/src/Handler/Sheet.hs
+++ b/src/Handler/Sheet.hs
@@ -6,28 +6,40 @@
 {-# LANGUAGE MultiParamTypeClasses #-}
 {-# LANGUAGE TypeFamilies #-}
 {-# LANGUAGE FlexibleContexts #-}
+{-# LANGUAGE FlexibleInstances #-}
 
 module Handler.Sheet where
 
 import Import 
+import System.FilePath (takeFileName)
+
 import Handler.Utils
 import Handler.Utils.Zip
 
-
 -- import Data.Time
 import qualified Data.Text as T
 -- import Data.Function ((&))
 -- 
-import Colonnade  -- hiding (fromMaybe)
+import Colonnade hiding (fromMaybe, singleton)
 import Yesod.Colonnade
 -- 
 import qualified Data.UUID.Cryptographic as UUID
 import qualified Data.Conduit.List as C
 
 import qualified Database.Esqueleto as E
+import qualified Database.Esqueleto.Internal.Sql as E
+
+import Control.Monad.Writer (MonadWriter(..), execWriterT)
 
 import Network.Mime
 
+import qualified Data.Set as Set
+
+
+instance Eq (Unique Sheet) where
+  (CourseSheet cid1 name1) == (CourseSheet cid2 name2) =
+    cid1 == cid2 && name1 == name2
+
 {-
   * Implement Handlers
   * Implement Breadcrumbs in Foundation 
@@ -36,36 +48,47 @@ import Network.Mime
 
 data SheetForm = SheetForm
       { sfName         :: Text
-      , sfComment      :: Maybe Html
+      , sfDescription  :: Maybe Html
       , sfType         :: SheetType
+      , sfGrouping     :: SheetGroup
       , sfMarkingText  :: Maybe Html
+      , sfVisibleFrom  :: Maybe UTCTime
       , sfActiveFrom   :: UTCTime
       , sfActiveTo     :: UTCTime
-      , sfSheetF       :: Maybe FileInfo
+      , sfSheetF       :: Maybe (Source Handler (Either FileId File))
       , sfHintFrom     :: Maybe UTCTime
       , sfHintF        :: Maybe FileInfo
       , sfSolutionFrom :: Maybe UTCTime
       , sfSolutionF    :: Maybe FileInfo
+      -- Keine SheetId im Formular!
       }
 
 
-makeSheetForm :: CourseId -> Maybe SheetForm -> Form SheetForm
-makeSheetForm cid template = identForm FIDsheet $ \html -> do
-    -- TODO: Yesod.Form.MassInput.inputList arbeitet Server-seitig :(
-    -- Erstmal nur mit ZIP arbeiten
+makeSheetForm :: Maybe SheetId -> Maybe SheetForm -> Form SheetForm
+makeSheetForm msId template = identForm FIDsheet $ \html -> do
+    let oldFileIds fType
+          | Just sId <- msId = fmap setFromList . fmap (map E.unValue) . runDB . E.select . E.from $ \(file `E.InnerJoin` sheetFile) -> do
+              E.on $ file E.^. FileId E.==. sheetFile E.^. SheetFileFileId
+              E.where_ $ sheetFile E.^. SheetFileSheetId E.==. E.val sId
+                   E.&&. sheetFile E.^. SheetFileType    E.==. E.val fType
+              return (file E.^. FileId)
+          | otherwise = return Set.empty
+  
     (result, widget) <- flip (renderAForm FormStandard) html $ SheetForm
-      <$> areq textField    (fsb "Name")        (sfName <$> template)
-      <*> aopt htmlField    (fsb "Hinweise für Teilnehmer")  (sfMarkingText <$> template)
-      <*> sheetTypeAFormReq (fsb "Bewertung")   (sfType <$> template)
-      --TODO: SICHTBARKEIT hinzunehmen
-      <*> aopt htmlField    (fsb "Hinweise für Korrektoren") (sfMarkingText <$> template)
-      <*> areq utcTimeField (fsb "Abgabe ab")   (sfActiveFrom   <$> template)
-      <*> areq utcTimeField (fsb "Abgabefrist") (sfActiveTo     <$> template)
-      <*> fileAFormOpt      (fsb "Aufgaben")
-      <*> aopt utcTimeField (fsb "Hinweis ab")  (sfHintFrom     <$> template)
-      <*> fileAFormOpt      (fsb "Hinweis")
-      <*> aopt utcTimeField (fsb "Lösung ab")   (sfSolutionFrom <$> template)
-      <*> fileAFormOpt      (fsb "Lösung")
+      <$> areq textField      (fsb "Name")                     (sfName <$> template)
+      <*> aopt htmlField      (fsb "Hinweise für Teilnehmer")  (sfDescription <$> template)
+      <*> sheetTypeAFormReq   (fsb "Bewertung")                (sfType <$> template)
+      <*> sheetGroupAFormReq  (fsb "Abgabegruppengröße") (sfGrouping <$> template)
+      <*> aopt htmlField      (fsb "Hinweise für Korrektoren") (sfMarkingText <$> template)
+      <*> aopt utcTimeField   (fsb "Sichtbar ab") (sfVisibleFrom  <$> template)
+      <*> areq utcTimeField   (fsb "Abgabe ab")   (sfActiveFrom   <$> template)
+      <*> areq utcTimeField   (fsb "Abgabefrist") (sfActiveTo     <$> template)
+      <*> aopt (multiFileField $ oldFileIds SheetExercise) (fsb "Aufgabenstellung") (sfSheetF <$> template)
+      <*> aopt utcTimeField   (fsb "Hinweis ab")  (sfHintFrom     <$> template)
+      <*> fileAFormOpt        (fsb "Hinweis")
+      <*> aopt utcTimeField   (fsb "Lösung ab")   (sfSolutionFrom <$> template)
+      <*> fileAFormOpt        (fsb "Lösung")
+      <*  submitButton
     return $ case result of
       FormSuccess sheetResult
         | errorMsgs <- validateSheet sheetResult
@@ -82,14 +105,48 @@ makeSheetForm cid template = identForm FIDsheet $ \html -> do
                 )
       _ -> (result, widget)
   where
-    validateSheet _ = [] -- TODO
+    validateSheet :: SheetForm -> [Text]
+    validateSheet (SheetForm{..}) =
+      [ msg | (False, msg) <-
+        [ ( maybe True (sfActiveFrom >=) sfVisibleFrom
+          , "Sichtbarkeit muss vor Beginn der Abgabefrist liegen."
+          )
+        , ( sfActiveTo >= sfActiveFrom
+          , "Ende der Abgabefrist muss nach deren Beginn liegen."
+          )
+        -- TODO: continue validation here!!!
+      ] ]
 
 
+fetchSheetAux ::  ( BaseBackend backend ~ SqlBackend
+                  , E.SqlSelect b a
+                  , Typeable a, MonadHandler m, IsPersistBackend backend
+                  , PersistQueryRead backend, PersistUniqueRead backend
+                  )
+  =>  (E.SqlExpr (Entity Sheet) -> b)
+      -> Key Term -> Text -> Text -> ReaderT backend m a
+fetchSheetAux prj tid csh shn =
+    let cachId = encodeUtf8 $ tshow (tid,csh,shn)
+    in  cachedBy cachId $ do
+    -- Mit Yesod:
+    -- cid <- getKeyBy404 $ CourseTermShort tid csh
+    -- getBy404 $ CourseSheet cid shn
+    -- Mit Esqueleto:
+        sheetList <- E.select . E.from $ \(course `E.InnerJoin` sheet) -> do
+            E.on     $ course E.^. CourseId E.==. sheet E.^. SheetCourseId
+            E.where_ $ course E.^. CourseTermId    E.==. E.val tid
+                E.&&. course E.^. CourseShorthand E.==. E.val csh
+                E.&&. sheet  E.^. SheetName       E.==. E.val shn
+            return $ prj sheet
+        case sheetList of
+          [sheet] -> return sheet
+          _other  -> notFound
+
 fetchSheet :: TermId -> Text -> Text -> YesodDB UniWorX (Entity Sheet)
-fetchSheet tid csh shn = do
-    -- TODO: More efficient with Esquleto?
-    (Entity cid _course) <- getBy404 $ CourseTermShort tid csh
-    getBy404 $ CourseSheet cid shn
+fetchSheet = fetchSheetAux id
+
+fetchSheetId :: TermId -> Text -> Text -> YesodDB UniWorX (Key Sheet)
+fetchSheetId tid cid shn = E.unValue <$> fetchSheetAux (E.^. SheetId) tid cid shn
 
 -- List Sheets
 getSheetListCID :: CourseId -> Handler Html
@@ -114,17 +171,35 @@ getSheetList courseEnt = do
         submissions <- count sheetsub
         rated       <- count $ (SubmissionRatingTime !=. Nothing):sheetsub
         return (sid, sheet, (submissions, rated))
-  let colSheets = mconcat
-       [ headed "Blatt"       $ toWgt . sheetName . snd3
-       , headed "Abgabe ab"   $ toWgt . formatTimeGerWD . sheetActiveFrom . snd3
-       , headed "Abgabe bis"  $ toWgt . formatTimeGerWD . sheetActiveTo   . snd3
-       , headed "Bewertung"   $ toWgt . show . sheetType . snd3
-       , headed "Korrigiert"  $ toWgt . snd . trd3
-       , headed "Eingereicht" $ toWgt . fst . trd3
-       -- TODO: only show edit button for allowed course assistants
-       , headed ""            $ \s -> linkButton "Edit" BCLink $ SheetEditR tid csh $ fst3 s
-       ]
-  defaultLayout $ do
+  let colBase = mconcat
+        [ headed "Blatt"       $ \(sid,sheet,_) -> linkButton (toWgt $ sheetName sheet) BCLink $ CourseR tid csh $ SheetR $ SheetShowR $ sheetName sheet
+        , headed "Abgabe ab"   $ toWgt . formatTimeGerWD . sheetActiveFrom . snd3
+        , headed "Abgabe bis"  $ toWgt . formatTimeGerWD . sheetActiveTo   . snd3
+        , headed "Bewertung"   $ toWgt . show . sheetType . snd3
+        ]
+  let colAdmin = mconcat -- only show edit button for allowed course assistants
+        [ headed "Korrigiert"  $ toWgt . snd . trd3
+        , headed "Eingereicht" $ toWgt . fst . trd3
+        , headed ""            $ \s -> linkButton "Edit"   BCLink $ CourseR tid csh $ SheetR $ SheetEditR $ sheetName $ snd3 s
+        , headed ""            $ \s -> linkButton "Delete" BCLink $ CourseR tid csh $ SheetR $ SheetDelR  $ sheetName $ snd3 s
+        ]
+  showAdmin <- case sheets of
+    ((_,firstSheet,_):_) -> do
+      setUltDestCurrent
+      (Authorized ==) <$> isAuthorized (CourseR tid csh $ SheetR $ SheetEditR $ sheetName firstSheet) False
+    _otherwise   -> return False
+  let colSheets = if showAdmin
+        then colBase `mappend` colAdmin
+        else colBase
+  let pageActions =
+        [ PageActionPrime $ MenuItem
+          { menuItemLabel = "Neues Übungsblatt"
+          , menuItemIcon  = Nothing
+          , menuItemRoute = CSheetR tid csh SheetNewR
+          , menuItemAccessCallback = (== Authorized) <$> isAuthorized CourseNewR False
+          }
+        ]
+  defaultLinkLayout pageActions $ do
     setTitle $ toHtml $ T.append "Übungsblätter " csh
     if null sheets
       then [whamlet|Es wurden noch keine Übungsblätter angelegt.|]
@@ -132,29 +207,27 @@ getSheetList courseEnt = do
 
 -- Show single sheet
 getSheetShowR :: TermId -> Text -> Text -> Handler Html
-getSheetShowR tid csh shn = getSheetShow =<<
-  (runDB $ fetchSheet tid csh shn)
-
-{- Nur per UUID
-getSheetIdShowR :: SheetId -> Handler Html
-getSheetIdShowR sheetId = getSheetShow =<<
-  (Entity sheetId) <$> (runDB $ get404 sheetId)\
--}{-
-getSheetUUIDShowR :: CryptoUUIDSheet -> Handler Html
-getSheetUUIDShowR sUUID = do
-  cIDKey <- getsYesod appCryptoIDKey
-  sheetId <- UUID.decrypt cIDKey sUUID
-  sheetEnt <- runDB $ get404 sheetId
-  getSheetShow $ Entity sheetId sheetEnt
--}
-
-getSheetShow :: (Entity Sheet) -> Handler Html
-getSheetShow entSheet = do
+getSheetShowR tid csh shn = do
+  entSheet <- runDB $ fetchSheet tid csh shn
   let sheet = entityVal entSheet
+      sid   = entityKey entSheet
+  --
+  fileNameTypes <- runDB $ E.select $ E.from $
+    \(sheet `E.InnerJoin` sheetFile `E.InnerJoin` file) -> do
+      -- Restrict to consistent rows that correspond to each other
+      E.on (file      E.^. FileId           E.==. sheetFile E.^. SheetFileFileId)
+      E.on (sheetFile E.^. SheetFileSheetId E.==. sheet     E.^. SheetId)
+      -- filter to requested file
+      E.where_ (sheet     E.^. SheetId      E.==. E.val sid )
+      -- return desired columns
+      return $ (file E.^. FileTitle, sheetFile E.^. SheetFileType)
+  let fileLinks = map (\(E.Value fName, E.Value fType) -> CSheetR tid csh (SheetFileR shn fType fName)) fileNameTypes
+
   defaultLayout $ do
     setTitle $ toHtml $ T.append "Übung " $ sheetName sheet
+    $(widgetFile "sheetShow")
     [whamlet| Under Construction !!! |] -- TODO
-    $(widgetFile "sheetAdmin")
+
 
 getSheetFileR :: TermId -> Text -> Text -> SheetFileType -> FilePath -> Handler TypedContent
 getSheetFileR tid csh shn typ title = do
@@ -181,72 +254,149 @@ getSheetFileR tid csh shn typ title = do
     []     -> notFound
     _other -> error "Multiple matching files found."
 
+
 getSheetNewR :: TermId -> Text -> Handler Html
 getSheetNewR tid csh = do
-  (Entity cid course) <- runDB $ getBy404 $ CourseTermShort tid csh
   let template = Nothing -- TODO: provide convenience by interpolating name/nr/dates+7days
-  ((res,wdgt), enc) <- runFormPost $ makeSheetForm cid template
-
-  case res of
-    (FormSuccess SheetForm{..}) -> do
-
-
-      let sid   = undefined -- TODO after first insert
-      let sname = undefined -- TODO after first insert
-
-      -- Prüfe, das FileTitle innerhalb des Sheets eindeutig ist für diesen SheetFileTpye
-      whenIsJust sfSheetF $ \sinfo -> do
-        let sheetInsert file = do
-              fid <- insert file
-              void . insert $ SheetFile sid fid SheetExercise
-        runDB . runConduit $ (sourceFiles sinfo) =$= C.mapM_ sheetInsert
-
-
-
-      addMessage "info" "Blatt angelegt"
-      redirect $ SheetShowR tid csh sname
-    (FormFailure msgs) -> forM_ msgs $ (addMessage "warning") . toHtml
-    _ -> return ()
-  defaultLayout $ do
-    $(widgetFile "newSheet")
+  let action newSheet = -- More specific error message for new sheet could go here, if insertUnique returns Nothing
+        insertUnique $ newSheet
+  handleSheetEdit tid csh Nothing template action
 
 postSheetNewR :: TermId -> Text -> Handler Html
 postSheetNewR = getSheetNewR
 
-getSheetEditR :: TermId -> Text -> SheetId -> Handler Html
-getSheetEditR _ _ _ = defaultLayout [whamlet| Under Construction !!! |] -- TODO
 
-postSheetEditR :: TermId -> Text -> SheetId -> Handler Html
-postSheetEditR _ _ _ = defaultLayout [whamlet| Under Construction !!! |] -- TODO
+getSheetEditR :: TermId -> Text -> Text -> Handler Html
+getSheetEditR tid csh shn = do
+  (sheetEnt, sheetFileIds) <- runDB $ do
+    ent <- fetchSheet tid csh shn
+    fIds <- fmap setFromList . fmap (map E.unValue) . E.select . E.from $ \(file `E.InnerJoin` sheetFile) -> do
+      E.on $ file E.^. FileId E.==. sheetFile E.^. SheetFileFileId
+      E.where_ $ sheetFile E.^. SheetFileSheetId E.==. E.val (entityKey ent)
+           E.&&. sheetFile E.^. SheetFileType    E.==. E.val SheetExercise
+      return (file E.^. FileId)
+    return (ent, fIds)
+  let sid = entityKey sheetEnt
+  let oldSheet@(Sheet {..}) = entityVal sheetEnt
+  let template = Just $ SheetForm
+        { sfName         = sheetName
+        , sfDescription  = sheetDescription
+        , sfType         = sheetType
+        , sfGrouping     = sheetGrouping
+        , sfMarkingText  = sheetMarkingText
+        , sfVisibleFrom  = sheetVisibleFrom
+        , sfActiveFrom   = sheetActiveFrom
+        , sfActiveTo     = sheetActiveTo
+        , sfSheetF       = Just . yieldMany . map Left $ Set.toList sheetFileIds
+        , sfHintFrom     = sheetHintFrom
+        , sfHintF        = Nothing -- TODO
+        , sfSolutionFrom = sheetSolutionFrom
+        , sfSolutionF    = Nothing -- TODO
+        }
+  let action newSheet = do
+        replaceRes <- myReplaceUnique sid $ newSheet
+        case replaceRes of
+          Nothing     -> return $ Just sid
+          (Just _err) -> return $ Nothing -- More specific error message for edit old sheet could go here
+  handleSheetEdit tid csh (Just sid) template action
 
+postSheetEditR :: TermId -> Text -> Text -> Handler Html
+postSheetEditR = getSheetEditR
 
-getSheetDelR :: TermId -> Text -> SheetId -> Handler Html
-getSheetDelR _ _ _ = defaultLayout [whamlet| Under Construction !!! |] -- TODO
-  -- Sicherheitsabfrage
-
-postSheetDelR :: TermId -> Text -> SheetId -> Handler Html
-postSheetDelR _ _ _ = defaultLayout [whamlet| Under Construction !!! |] -- TODO
-  -- Tatsächlich löschen
-
-
-{-
-getCourseShowR :: TermId -> Text -> Handler Html
-getCourseShowR tid csh = do
-  mbAid <- maybeAuthId
-  (courseEnt,(schoolMB,participants,mbRegistered)) <- runDB $ do
-      courseEnt@(Entity cid course) <- getBy404 $ CourseTermShort (TermKey tid) csh
-      dependent <- (,,) 
-          <$> get (courseSchoolId course)               -- join
-          <*> count [CourseParticipantCourseId ==. cid] -- join 
-          <*> (case mbAid of -- TODO: Someone please refactor this late-night mess here!
-                Nothing -> return False
-                (Just aid) -> do
-                                regL <- getBy (UniqueCourseParticipant cid aid)
-                                return $ isJust regL)
-      return $ (courseEnt,dependent)
-  let course = entityVal courseEnt  
-  (regWidget, regEnctype) <- generateFormPost $ identifyForm "registerBtn" $ registerButton $ mbRegistered      
+handleSheetEdit :: TermId -> Text -> Maybe SheetId -> Maybe SheetForm -> (Sheet -> YesodDB UniWorX (Maybe SheetId)) -> Handler Html
+handleSheetEdit tid csh msId template dbAction = do
+  let tident = unTermKey tid
+  let mbshn  = sfName <$> template
+  aid  <- requireAuthId
+  ((res,formWidget), formEnctype) <- runFormPost $ makeSheetForm msId template
+  case res of
+    (FormSuccess SheetForm{..}) -> do
+      saveOkay <- runDB $ do
+        actTime <- liftIO getCurrentTime
+        cid <- getKeyBy404 $ CourseTermShort tid csh
+        let newSheet = Sheet
+              { sheetCourseId     = cid
+              , sheetName         = sfName
+              , sheetDescription  = sfDescription
+              , sheetType         = sfType
+              , sheetGrouping     = sfGrouping
+              , sheetMarkingText  = sfMarkingText
+              , sheetVisibleFrom  = sfVisibleFrom
+              , sheetActiveFrom   = sfActiveFrom
+              , sheetActiveTo     = sfActiveTo
+              , sheetHintFrom     = sfHintFrom
+              , sheetSolutionFrom = sfSolutionFrom
+              }
+        mbsid <- dbAction newSheet
+        case mbsid of
+          Nothing    -> False <$ addMessageI "danger" (MsgSheetNameDup tident csh sfName)
+          (Just sid) ->  do -- save files in DB:
+            whenIsJust sfSheetF    $ insertSheetFile' sid SheetExercise
+            whenIsJust sfHintF     $ insertSheetFile sid SheetHint
+            whenIsJust sfSolutionF $ insertSheetFile sid SheetSolution
+            insert_ $ SheetEdit aid actTime sid
+            addMessageI "info" $ MsgSheetEditOk tident csh sfName
+            return True
+      when saveOkay $ redirect $ CSheetR tid csh $ SheetShowR sfName -- redirect must happen outside of runDB
+    (FormFailure msgs) -> forM_ msgs $ (addMessage "warning") . toHtml
+    _ -> return ()
+  let pageTitle = maybe (MsgSheetTitleNew tident csh)
+                        (MsgSheetTitle    tident csh) mbshn
+  let formTitle = pageTitle
+  let formText  = Nothing :: Maybe UniWorXMessage
+  actionUrl <- fromMaybe (CSheetR tid csh SheetNewR) <$> getCurrentRoute
   defaultLayout $ do
-    setTitle $ [shamlet| #{termToText tid} - #{csh}|]
-    $(widgetFile "course")
--}    
+    setTitleI pageTitle
+    $(widgetFile "formPageI18n")
+
+
+
+getSheetDelR :: TermId -> Text -> Text -> Handler Html
+getSheetDelR tid csh shn = do
+  let tident = unTermKey tid
+  ((result,formWidget), formEnctype) <- runFormPost (buttonForm :: Form BtnDelete)
+  case result of
+    (FormSuccess BtnAbort)  -> redirectUltDest $ CSheetR tid csh $ SheetShowR shn
+    (FormSuccess BtnDelete) -> do
+      runDB $ fetchSheetId tid csh shn >>= deleteCascade
+      -- TODO: deleteCascade löscht aber nicht die hochgeladenen Dateien!!!
+      setMessageI $ MsgSheetDelOk tident csh shn
+      redirect $ CSheetR tid csh SheetListR
+    _other -> do
+      submissionno <- runDB $ do
+          sid <- fetchSheetId tid csh shn
+          count [SubmissionSheetId ==. sid]
+      let formTitle = MsgSheetDelTitle tident csh shn
+      let formText  = Just $ MsgSheetDelText submissionno
+      let actionUrl = CSheetR tid csh $ SheetDelR shn
+      defaultLayout $ do
+        setTitleI $ MsgSheetTitle tident csh shn
+        $(widgetFile "formPageI18n")
+
+postSheetDelR :: TermId -> Text -> Text -> Handler Html
+postSheetDelR = getSheetDelR
+
+
+
+insertSheetFile :: SheetId -> SheetFileType -> FileInfo -> YesodDB UniWorX ()
+insertSheetFile sid ftype finfo = do
+    runConduit $ (sourceFiles finfo) =$= C.mapM_ finsert
+  where
+    finsert file = do
+      fid <- insert file
+      void . insert $ SheetFile sid fid ftype -- cannot fail due to uniqueness, since we generated a fresh FileId in the previous step
+
+insertSheetFile' :: SheetId -> SheetFileType -> Source Handler (Either FileId File) -> YesodDB UniWorX ()
+insertSheetFile' sid ftype fs = do
+    oldFileIds <- fmap setFromList . fmap (map E.unValue) . E.select . E.from $ \(file `E.InnerJoin` sheetFile) -> do
+      E.on $ file E.^. FileId E.==. sheetFile E.^. SheetFileFileId
+      E.where_ $ sheetFile E.^. SheetFileSheetId E.==. E.val sid
+           E.&&. sheetFile E.^. SheetFileType    E.==. E.val ftype
+      return (file E.^. FileId)
+    keep <- execWriterT . runConduit $ transPipe (lift . lift) fs =$= C.mapM_ finsert
+    mapM_ deleteCascade $ (oldFileIds \\ keep :: Set FileId)
+  where
+    finsert (Left fileId) = tell $ singleton fileId
+    finsert (Right file) = lift $ do
+      fid <- insert file
+      void . insert $ SheetFile sid fid ftype -- cannot fail due to uniqueness, since we generated a fresh FileId in the previous step
diff --git a/src/Handler/Submission.hs b/src/Handler/Submission.hs
index 3fb482691..3e2160d28 100644
--- a/src/Handler/Submission.hs
+++ b/src/Handler/Submission.hs
@@ -8,6 +8,7 @@
 {-# LANGUAGE FlexibleContexts #-}
 {-# LANGUAGE TupleSections #-}
 {-# LANGUAGE LambdaCase #-}
+{-# LANGUAGE ViewPatterns #-}
 
 module Handler.Submission where
 
@@ -53,7 +54,7 @@ submissionTable = do
     (,,) <$> encrypt submissionId <*> encrypt submissionId <*> pure s
 
   let
-    anchorCourse (_, _, (_, _, Entity _ Course{..})) = CourseShowR courseTermId courseShorthand
+    anchorCourse (_, _, (_, _, Entity _ Course{..})) = CourseR courseTermId courseShorthand CourseShowR
     courseText (_, _, (_, _, Entity _ Course{..})) = toWidget courseName
     anchorSubmission (_, cUUID, _) = SubmissionR cUUID
     submissionText (cID, _, _) = toWidget . toPathPiece . CI.foldedCase $ ciphertext cID
@@ -177,8 +178,12 @@ postSubmissionDownloadMultiArchiveR = do
 
               withinDirectory f@File{..} = f { fileTitle = directoryName </> fileTitle }
 
+            lastEditMb <- lift $ selectList [SubmissionEditSubmission ==. submissionID] [Desc SubmissionEditTime, LimitTo 1]
+            lastEditTime <- case lastEditMb of
+                [(submissionEditTime.entityVal -> time)] -> return time
+                _other -> liftIO getCurrentTime
             yield $ File
-              { fileModified = submissionChanged
+              { fileModified = lastEditTime
               , fileTitle = directoryName
               , fileContent = Nothing
               }
diff --git a/src/Handler/Term.hs b/src/Handler/Term.hs
index 0ec926787..9d85edbee 100644
--- a/src/Handler/Term.hs
+++ b/src/Handler/Term.hs
@@ -9,11 +9,11 @@
 
 module Handler.Term where
 
-import Import 
+import Import
 import Handler.Utils
 
-import qualified Data.Text as T
-import Yesod.Form.Bootstrap3 
+-- import qualified Data.Text as T
+import Yesod.Form.Bootstrap3
 
 import Colonnade hiding (bool)
 import Yesod.Colonnade
@@ -27,47 +27,47 @@ getTermShowR = do
 --   term <- runDB $ E.select . E.from $ \(term) -> do
 --              E.orderBy [E.desc $ term E.^. TermStart ]
 --              return term
--- 
+--
   let
     termData = E.from $ \term -> do
       -- E.orderBy [E.desc $ term E.^. TermStart ]
       let courseCount :: E.SqlExpr (E.Value Int)
           courseCount = E.sub_select . E.from $ \course -> do
             E.where_ $ term E.^. TermId E.==. course E.^. CourseTermId
-            return E.countRows     
+            return E.countRows
       return (term, courseCount)
   selectRep $ do
     provideRep $ toJSON . map fst <$> runDB (E.select termData)
-    provideRep $ do      
-      let colonnadeTerms = mconcat 
+    provideRep $ do
+      let colonnadeTerms = mconcat
             [ headed "Kürzel" $ \(Entity tid Term{..},_) -> cell $ do
                 -- Scrap this if to slow, create term edit page instead
                 adminLink <- handlerToWidget $ isAuthorized (TermEditExistR tid) False
-                [whamlet| 
+                [whamlet|
                   $if adminLink == Authorized
                     <a href=@{TermEditExistR tid}>
                       #{termToText termName}
-                  $else 
+                  $else
                       #{termToText termName}
-                |] 
-            , headed "Beginn Vorlesungen" $ \(Entity _ Term{..},_) -> 
+                |]
+            , headed "Beginn Vorlesungen" $ \(Entity _ Term{..},_) ->
                 stringCell $ formatTimeGerWD termLectureStart
-            , headed "Ende Vorlesungen"   $ \(Entity _ Term{..},_) -> 
+            , headed "Ende Vorlesungen"   $ \(Entity _ Term{..},_) ->
                 stringCell $ formatTimeGerWD termLectureEnd
-            , headed "Aktiv" $ \(Entity _ Term{..},_) -> 
+            , headed "Aktiv" $ \(Entity _ Term{..},_) ->
                 textCell $ bool "" tickmark termActive
             , headed "Kursliste" $ \(Entity tid Term{..}, E.Value numCourses) ->
                 cell [whamlet|
                   <a href=@{CourseListTermR tid}>
                     #{show numCourses} Kurse
-                |] 
+                |]
             , headed "Semesteranfang" $ \(Entity _ Term{..},_) ->
               stringCell $ formatTimeGerWD termStart
             , headed "Semesterende"   $ \(Entity _ Term{..},_) ->
               stringCell $ formatTimeGerWD termEnd
             , headed "Feiertage im Semester" $ \(Entity _ Term{..},_) ->
               stringCell $ (intercalate ", ") $ map formatTimeGerWD termHolidays
-            ]  
+            ]
       table <- dbTable def $ DBTable
         { dbtSQLQuery = termData
         , dbtColonnade = colonnadeTerms
@@ -75,44 +75,54 @@ getTermShowR = do
         , dbtAttrs = tableDefault
         , dbtIdent = "terms" :: Text
         }
-      defaultLayout $ do
+      let pageActions =
+            [ PageActionPrime $ MenuItem
+              { menuItemLabel = "Neues Semester"
+              , menuItemIcon  = Nothing
+              , menuItemRoute = TermEditR
+              , menuItemAccessCallback = (== Authorized) <$> isAuthorized TermEditR True
+              }
+            ]
+      defaultLinkLayout pageActions $ do
         setTitle "Freigeschaltete Semester"
-        table
+        $(widgetFile "terms")
 
-    
 getTermEditR :: Handler Html
 getTermEditR = do
   -- TODO: Defaults für Semester hier ermitteln und übergeben
   termEditHandler Nothing
-  
+
 postTermEditR :: Handler Html
 postTermEditR = termEditHandler Nothing
-  
+
 getTermEditExistR :: TermId -> Handler Html
 getTermEditExistR tid = do
   term <- runDB $ get tid
   termEditHandler term
 
-     
+
 termEditHandler :: Maybe Term -> Handler Html
 termEditHandler term = do
     ((result, formWidget), formEnctype) <- runFormPost $ newTermForm term
     case result of
       (FormSuccess res) -> do
-          -- term <- runDB $ get $ TermKey termName 
+          -- term <- runDB $ get $ TermKey termName
           runDB $ repsert (TermKey $ termName res) res
-          let tid = termToText $ termName res
-          let msg = "Semester " `T.append` tid `T.append` " erfolgreich editiert."            
-          addMessage "success" [shamlet| #{msg} |]
+-- VOR INTERNATIONALISIERUNG:
+--           let tid = termToText $ termName res
+--           let msg = "Semester " `T.append` tid `T.append` " erfolgreich editiert."
+--           addMessage "success" [shamlet| #{msg} |]
+-- MIT INTERNATIONALISIERUNG:
+          addMessageI "success" $ MsgTermEdited $ termName res
           redirect TermShowR
       (FormMissing  ) -> return ()
-      (FormFailure _) -> addMessage "warning" "Bitte Eingabe korrigieren."
+      (FormFailure _) -> addMessageI "warning" MsgInvalidInput
     let formTitle   = "Semester editieren/anlegen" :: Text
     let actionUrl   = TermEditR
     defaultLayout $ do
       setTitle [shamlet| #{formTitle} |]
       $(widgetFile "formPage")
-      
+
 newTermForm :: Maybe Term -> Form Term
 newTermForm template html = do
     (result, widget) <- flip (renderAForm FormStandard) html $ Term
@@ -124,8 +134,8 @@ newTermForm template html = do
       <*> areq dayField  (bfs ("Ende Vorlesungen" :: Text)) (termLectureEnd   <$> template)
       <*> areq checkBoxField (bfs ("Aktiv" :: Text)) (termActive <$> template)
       <*  submitButton
-    return $ case result of  
-      FormSuccess termResult 
+    return $ case result of
+      FormSuccess termResult
         | errorMsgs <- validateTerm termResult
         , not $ null errorMsgs ->
           (FormFailure errorMsgs,
@@ -134,13 +144,13 @@ newTermForm template html = do
                     <h4> Fehler:
                     <ul>
                       $forall errmsg <- errorMsgs
-                        <li> #{errmsg} 
+                        <li> #{errmsg}
                   ^{widget}
                 |]
-              )        
+              )
       _ -> (result, widget)
-{-      
-  where 
-    set :: Text -> FieldSettings site 
-    set = bfs 
--}    
+{-
+  where
+    set :: Text -> FieldSettings site
+    set = bfs
+-}
diff --git a/src/Handler/Users.hs b/src/Handler/Users.hs
index df9175e4f..f0ae653e4 100644
--- a/src/Handler/Users.hs
+++ b/src/Handler/Users.hs
@@ -41,5 +41,5 @@ getUsersR = do
         -- ++  map (\school -> headed (text2widget $ schoolName $ entityVal school) (\u -> "xx")) schools
   defaultLayout $ do
     setTitle "Comprehensive User List"
-    let userList = encodeWidgetTable tableDefault colonnadeUsers users
+    let userList = encodeWidgetTable tableSortable colonnadeUsers users
     $(widgetFile "users")
diff --git a/src/Handler/Utils.hs b/src/Handler/Utils.hs
index 30b3fb73e..31d7b1324 100644
--- a/src/Handler/Utils.hs
+++ b/src/Handler/Utils.hs
@@ -1,12 +1,15 @@
 {-# LANGUAGE NoImplicitPrelude #-}
 {-# LANGUAGE OverloadedStrings #-}
-{-# LANGUAGE FlexibleContexts #-}
+{-# LANGUAGE TypeFamilies, FlexibleContexts, ConstraintKinds #-}
 {-# LANGUAGE QuasiQuotes #-}
 
+
 module Handler.Utils
   ( module Handler.Utils
   ) where
 
+
+
 import Import.NoFoundation
   
 import Handler.Utils.DateTime as Handler.Utils
@@ -18,11 +21,15 @@ import Handler.Utils.Table.Pagination as Handler.Utils
 import Handler.Utils.Zip as Handler.Utils
 import Handler.Utils.Rating as Handler.Utils
 import Handler.Utils.Submission as Handler.Utils
+import Handler.Utils.Templates as Handler.Utils
 
 import Text.Blaze (Markup, ToMarkup)
 
 import Data.Map (Map)
 import qualified Data.Map as Map
+import qualified Data.List as List
+
+import Database.Persist.Class
 
 tickmark :: IsString a => a
 tickmark = fromString "✔"
@@ -54,9 +61,69 @@ whenIsJust :: Monad m => Maybe a -> (a -> m ()) -> m ()
 whenIsJust (Just x) f = f x
 whenIsJust Nothing  _ = return ()
 
+
+
 ----------
 -- Maps --
 ----------
 entities2map :: PersistEntity record => [Entity record] -> Map (Key record) record
 entities2map = foldl' (\m entity -> Map.insert (entityKey entity) (entityVal entity) m) Map.empty
 
+
+------------
+-- Routes --
+------------
+
+-- -- redirectBack :: Handler Html
+-- -- redirectBack :: HandlerT UniWorX IO Html
+-- redirectBack = defaultLayout $ do
+--   [whamlet| BACK |]
+--   -- [julius| window.history.back(); |]
+
+
+--------------
+-- Database --
+--------------
+
+-- getKeyBy :: PersistEntity val => Unique val -> ReaderT backend0 m0 (Maybe (Entity val))
+-- getKeyBy :: Unique a -> YesodDB site (Key a)
+
+getKeyBy :: (PersistEntityBackend record ~ BaseBackend backend, PersistEntity record, PersistUniqueRead backend, MonadIO m)
+  => Unique record -> ReaderT backend m (Maybe (Key record))
+getKeyBy u = (fmap entityKey) <$> getBy u -- TODO optimize this, so that DB does not deliver entire record!
+
+getKeyBy404 :: (PersistEntityBackend record ~ BaseBackend backend, PersistEntity record, PersistUniqueRead backend, MonadIO m)
+  => Unique record -> ReaderT backend m (Key record)
+getKeyBy404 = (fmap entityKey) . getBy404 -- TODO optimize this, so that DB does not deliver entire record!
+
+
+myReplaceUnique
+    :: (MonadIO m
+       ,Eq (Unique record)
+       ,PersistRecordBackend record backend
+       ,PersistUniqueWrite backend)
+    => Key record -> record -> ReaderT backend m (Maybe (Unique record))
+myReplaceUnique key datumNew = getJust key >>= replaceOriginal
+  where
+    uniqueKeysNew = persistUniqueKeys datumNew
+    replaceOriginal original = do
+        conflict <- checkUniqueKeys changedKeys
+        case conflict of
+            Nothing -> replace key datumNew >> return Nothing
+            (Just conflictingKey) -> return $ Just conflictingKey
+      where
+        changedKeys = uniqueKeysNew List.\\ uniqueKeysOriginal
+        uniqueKeysOriginal = persistUniqueKeys original
+
+checkUniqueKeys
+    :: (MonadIO m
+       ,PersistEntity record
+       ,PersistUniqueRead backend
+       ,PersistRecordBackend record backend)
+    => [Unique record] -> ReaderT backend m (Maybe (Unique record))
+checkUniqueKeys [] = return Nothing
+checkUniqueKeys (x:xs) = do
+    y <- getBy x
+    case y of
+        Nothing -> checkUniqueKeys xs
+        Just _ -> return (Just x)
diff --git a/src/Handler/Utils/Form.hs b/src/Handler/Utils/Form.hs
index 3398b22a2..f28154e55 100644
--- a/src/Handler/Utils/Form.hs
+++ b/src/Handler/Utils/Form.hs
@@ -7,8 +7,13 @@
 {-# LANGUAGE TypeFamilies #-}
 {-# LANGUAGE FlexibleContexts #-}
 {-# LANGUAGE ViewPatterns #-}
+{-# LANGUAGE RecordWildCards #-}
+{-# LANGUAGE ScopedTypeVariables #-}
+{-# LANGUAGE LambdaCase #-}
 
-module Handler.Utils.Form where 
+module Handler.Utils.Form where
+
+import Handler.Utils.Form.Types
 
 import Import
 import qualified Data.Char as Char
@@ -21,12 +26,20 @@ import qualified Data.Foldable as Foldable
 import qualified Data.Text as T
 -- import Yesod.Form.Types
 import Yesod.Form.Functions (parseHelper)
-import Yesod.Form.Bootstrap3 
+import Yesod.Form.Bootstrap3
 
 import qualified Text.Blaze.Internal as Blaze (null)
 
 import Web.PathPieces (showToPathPiece, readFromPathPiece)
 
+import Handler.Utils.Zip
+import qualified Data.Conduit.List as C
+
+import qualified Database.Esqueleto as E
+import qualified Database.Esqueleto.Internal.Sql as E
+
+import qualified Data.Set as Set
+
 ------------------------------------------------
 -- Unique Form Identifiers to avoid accidents --
 ------------------------------------------------
@@ -35,9 +48,14 @@ data FormIdentifier = FIDcourse | FIDsheet
   deriving (Enum, Eq, Ord, Bounded, Read, Show)
 
 
-identForm :: FormIdentifier -> Form a -> Form a  
+identForm :: FormIdentifier -> Form a -> Form a
 identForm fid = identifyForm (T.pack $ show fid)
 
+{- Hinweise zur Erinnerung:
+  - identForm primär, wenn es mehr als ein Formular pro Handler gibt
+  - nur einmal pro makeForm reicht
+-}
+
 -------------------
 -- Form Renderer --
 -------------------
@@ -48,7 +66,7 @@ data FormLayout = FormStandard
 renderAForm :: Monad m => FormLayout -> FormRender m a
 renderAForm formLayout aform fragment = do
   (res, (($ []) -> views)) <- aFormToForm aform
-  let widget = $(widgetFile "form")
+  let widget = $(widgetFile "widgets/form")
   return (res, widget)
 
 ----------------------------
@@ -67,26 +85,23 @@ class (Enum a, Bounded a, Ord a, PathPiece a) => Button a where
 
   cssClass :: a -> ButtonCssClass
   cssClass _ = BCDefault
-  
 
 
-{- Abort is not useful (press Back instead); Delete should be different:
-data StandardButton = BtnDelete | BtnAbort | BtnSave
+
+data BtnDelete = BtnDelete | BtnAbort
   deriving (Enum, Eq, Ord, Bounded, Read, Show)
-     
-instance PathPiece StandardButton where    -- for displaying the button only, not really for paths
+
+instance PathPiece BtnDelete where    -- for displaying the button only, not really for paths
   toPathPiece   = showToPathPiece
   fromPathPiece = readFromPathPiece
 
-instance Button StandardButton where
+instance Button BtnDelete where
   label BtnDelete = "Löschen"
-  label BtnAbort  = "Abbrechen"
-  label BtnSave   = "Speichern"
-  
-  cssClass BtnDelete = BCWarning
+  label BtnAbort  = "Abrechen"
+
+  cssClass BtnDelete = BCDanger
   cssClass BtnAbort  = BCDefault
-  cssClass BtnSave   = BCPrimary
--}
+
 
 data SubmitButton = BtnSubmit
   deriving (Enum, Eq, Ord, Bounded, Read, Show)
@@ -99,45 +114,45 @@ instance Button SubmitButton where
   label BtnSubmit = "Submit"
 
   cssClass BtnSubmit = BCPrimary
-  
--- -- Looks like a button, but is just a link (e.g. for create course, etc.)  
+
+-- -- Looks like a button, but is just a link (e.g. for create course, etc.)
 -- data LinkButton = LinkButton (Route UniWorX)
 --   deriving (Enum, Eq, Ord, Bounded, Read, Show)
--- 
+--
 -- instance PathPiece LinkButton where
 --     LinkButton route = ???
-  
+
 linkButton :: Widget -> ButtonCssClass -> Route UniWorX -> Widget
 linkButton lbl cls url = [whamlet| <a href=@{url} .btn .#{bcc2txt cls} role=button>^{lbl} |]
 --   [whamlet|
---     <form method=post action=@{url}>      
+--     <form method=post action=@{url}>
 --       <input type="hidden" name="_formid" value="identify-linkButton">
 --       <button .btn .#{bcc2txt cls} type=submit value="Link to @{url}">^{lbl}
---   |] 
-  --  <input .btn .#{bcc2txt cls} type="submit" value=^{lbl}> 
-  
-  
+--   |]
+  --  <input .btn .#{bcc2txt cls} type="submit" value=^{lbl}>
+
+
 buttonField :: Button a => a -> Field Handler a
 buttonField btn = Field {fieldParse, fieldView, fieldEnctype}
-  where 
+  where
     fieldEnctype = UrlEncoded
-    
-    fieldView fid name attrs _val _ = 
+
+    fieldView fid name attrs _val _ =
       [whamlet|
         <button .btn .#{bcc2txt $ cssClass btn} type=submit name=#{name} value=#{toPathPiece btn} *{attrs} ##{fid}>^{label btn}
       |]
-      
+
     fieldParse []    _ = return $ Right Nothing
-    fieldParse [str] _ 
+    fieldParse [str] _
       | str == toPathPiece btn = return $ Right $ Just btn
       | otherwise  = return $ Left "Wrong button value"
     fieldParse _ _ = return $ Left "Multiple button values"
-    
-    
+
+
 combinedButtonField :: Button a => [a] -> AForm Handler [Maybe a]
 combinedButtonField btns = traverse b2f btns
   where
-    b2f b = aopt (buttonField b) "" Nothing 
+    b2f b = aopt (buttonField b) "" Nothing
 
 submitButton :: AForm Handler ()
 submitButton = void $ combinedButtonField [BtnSubmit]
@@ -146,10 +161,10 @@ submitButton = void $ combinedButtonField [BtnSubmit]
 combinedButtonField :: Button a => [a] -> Form m -> Form (a,m)
 combinedButtonField btns inner csrf = do
     buttonIdent <- newFormIdent
-    let button b = mopt (buttonField b) ("n/a"{ fsName = Just buttonIdent }) Nothing  
+    let button b = mopt (buttonField b) ("n/a"{ fsName = Just buttonIdent }) Nothing
     (results, btnViews) <- unzip <$> mapM button [minBound..maxBound]
     (innerRes,innerWdgt) <- inner
-    let widget = do 
+    let widget = do
           [whamlet|
             #{csrf}
             ^{innerWdgt}
@@ -171,14 +186,14 @@ combinedButtonField btns inner csrf = do
     accResult' _ x@(FormSuccess _) = x --SJ: Is this safe? Shouldn't Failure override Success?
     accResult' (FormSuccess Nothing) x = x
     accResult' FormMissing _ = FormMissing
-    accResult' (FormFailure errs) _ = FormFailure errs       
+    accResult' (FormFailure errs) _ = FormFailure errs
     -}
 
 -- buttonForm :: Button a => Markup -> MForm (HandlerT UniWorX IO) (FormResult a, (WidgetT UniWorX IO ()))
 buttonForm :: (Button a) => Form a
 buttonForm csrf = do
     buttonIdent <- newFormIdent
-    let button b = mopt (buttonField b) ("n/a"{ fsName = Just buttonIdent }) Nothing  
+    let button b = mopt (buttonField b) ("n/a"{ fsName = Just buttonIdent }) Nothing
     (results, btnViews) <- unzip <$> mapM button [minBound..maxBound]
     let widget = do
           [whamlet|
@@ -199,44 +214,8 @@ buttonForm csrf = do
     accResult' FormMissing _ = FormMissing
     accResult' (FormFailure errs) _ = FormFailure errs
 
-  
----------------------------------------
--- Buttons (old version, deprecated) --
----------------------------------------
 
-formBtnSave  :: (Text,Text,Text)
-formBtnSave   = ("save"  ,"Speichern"  ,"btn-primary")
 
-formBtnAbort :: (Text,Text,Text)
-formBtnAbort  = ("abort" ,"Abbrechen"  ,"btn-default")
-
-formBtnDelete ::(Text,Text,Text)
-formBtnDelete = ("delete","Löschen"    ,"btn-warning")
-
-formActionSave :: Maybe Text
-formActionSave   = Just $ fst3 formBtnSave
-
-formActionAbort :: Maybe Text
-formActionAbort  = Just $ fst3 formBtnAbort
-
-formActionDelete :: Maybe Text
-formActionDelete = Just $ fst3 formBtnDelete
-
-defaultFormActions :: [(Text,Text,Text)]
-defaultFormActions =  [ formBtnDelete
-                      , formBtnAbort
-                      , formBtnSave
-                      ]
-
--- Post-Buttons
-postButtonForm :: Text -> Form ()
-postButtonForm lblId = identifyForm lblId buttonF
-  where
-    buttonF = renderAForm FormStandard $ pure () <* bootstrapSubmit bProps
-    bProps :: BootstrapSubmit Text
-    bProps = fromString $ unpack lblId
-    
-    
 ------------
 -- Fields --
 ------------
@@ -244,6 +223,9 @@ postButtonForm lblId = identifyForm lblId buttonF
 natField :: (Monad m, Integral i, RenderMessage (HandlerSite m) FormMessage) => Text -> Field m i
 natField d = checkBool (>= 0) (T.append  d " muss eine natürliche Zahl sein.") $ intField
 
+natIntField ::(Monad m, RenderMessage (HandlerSite m) FormMessage) => Text -> Field m Integer
+natIntField = natField
+
 posIntField :: (Monad m, Integral i, RenderMessage (HandlerSite m) FormMessage) => Text -> Field m i
 posIntField d = checkBool (>= 1) (T.append  d " muss eine positive Zahl sein.") $ intField
 
@@ -263,6 +245,55 @@ schoolEntField = selectField schools
   where
     schools = optionsPersist [] [Asc SchoolName] schoolName
 
+multiFileField :: Handler (Set FileId) -> Field Handler (Source Handler (Either FileId File))
+multiFileField permittedFiles' = Field{..}
+  where
+    fieldEnctype = Multipart
+    fieldParse vals files
+      | null files
+      , null vals = return $ Right Nothing
+      | otherwise = return . Right . Just $ do
+          pVals <- lift permittedFiles'
+          let
+            decrypt' :: CryptoUUIDFile -> Handler (Maybe FileId)
+            decrypt' = fmap (either (\(_ :: CryptoIDError) -> Nothing) Just) . try . decrypt 
+          yieldMany vals
+            .| C.filter (/= unpackZips)
+            .| C.map fromPathPiece .| C.catMaybes
+            .| C.mapMaybeM decrypt'
+            .| C.filter (`elem` pVals)
+            .| C.map Left
+          let
+            handleFile :: FileInfo -> Source Handler File
+            handleFile
+              | doUnpack  = sourceFiles
+              | otherwise = yieldM . acceptFile
+          mapM_ handleFile files .| C.map Right
+      where
+        doUnpack = unpackZips `elem` vals
+    fieldView fieldId fieldName attrs val req = do
+      pVals <- handlerToWidget permittedFiles'
+      sentVals <- for val $ \src -> handlerToWidget . sourceToList $ src .| takeLefts
+      let
+        toFUI (E.Value fuiId', E.Value fuiTitle) = do
+          fuiId <- encrypt fuiId'
+          fuiHtmlId <- newIdent
+          let fuiChecked
+                | Right sentVals' <- sentVals = fuiId' `elem` sentVals'
+                | otherwise = True
+          return FileUploadInfo{..}     
+      fileInfos <- mapM toFUI <=< handlerToWidget . runDB . E.select . E.from $ \file -> do
+          E.where_ $ file E.^. FileId `E.in_` E.valList (setToList pVals)
+          E.orderBy [E.asc $ file E.^. FileTitle]
+          return (file E.^. FileId, file E.^. FileTitle)
+      $(widgetFile "multiFileField")
+    unpackZips :: Text
+    unpackZips = "unpack-zip"
+    takeLefts :: Monad m => ConduitM (Either b a) b m ()
+    takeLefts = awaitForever $ \case
+      Right _ -> return ()
+      Left  r -> yield r
+
 sheetTypeAFormReq :: FieldSettings UniWorX -> Maybe SheetType -> AForm Handler SheetType
 sheetTypeAFormReq d Nothing =
   -- TODO, offer options to choose between Normal/Bonus/Pass
@@ -271,9 +302,18 @@ sheetTypeAFormReq d (Just (Normal p)) =
   -- TODO, offer options to choose between Normal/Bonus/Pass
   (Normal . toPoints) <$> areq (natField "Punkte") d (Just $ fromPoints p)
 
+sheetGroupAFormReq :: FieldSettings UniWorX -> Maybe SheetGroup -> AForm Handler SheetGroup
+sheetGroupAFormReq d (Just (Arbitrary n)) | n >= 1 =
+  -- TODO, offer options to choose between Arbitrary/Registered/NoGroups
+  Arbitrary <$> areq (natField "Abgabegruppengröße") d (Just n)
+sheetGroupAFormReq d _other = -- TODO
+  -- TODO, offer options to choose between Arbitrary/Registered/NoGroups
+  Arbitrary <$> areq (natField "Abgabegruppengröße") d (Just 1)
+
 utcTimeField :: (Monad m, RenderMessage (HandlerSite m) FormMessage) => Field m UTCTime
 -- StackOverflow: dayToUTC <$> (areq (jqueryDayField def {...}) settings Nothing)
-utcTimeField = Field 
+-- TODO: Verify whether this is UTC or local time from Browser
+utcTimeField = Field
     { fieldParse = parseHelper $ readTime
     , fieldView = \theId name attrs val isReq ->
         [whamlet|
@@ -282,42 +322,42 @@ utcTimeField = Field
         |]
     , fieldEnctype = UrlEncoded
     }
-  where 
+  where
     fieldTimeFormat :: String
     --fieldTimeFormat = "%e.%m.%y %k:%M"
     fieldTimeFormat = "%Y-%m-%eT%H:%M"
-    
+
     readTime :: Text -> Either FormMessage UTCTime
-    readTime t = 
+    readTime t =
       case parseTimeM True germanTimeLocale fieldTimeFormat (T.unpack t) of
         (Just time) -> Right time
         Nothing -> Left $ MsgInvalidEntry $ "Datum/Zeit Format: tt.mm.yy hh:mm " ++ t
-        
-    showTime :: UTCTime -> Text 
+
+    showTime :: UTCTime -> Text
     showTime = fromString . (formatTime germanTimeLocale fieldTimeFormat)
 
-    
-fsb :: Text -> FieldSettings site 
-fsb = bfs -- Just to avoid annoying Ambiguous Type Errors     
-   
+
+fsb :: Text -> FieldSettings site
+fsb = bfs -- Just to avoid annoying Ambiguous Type Errors
+
 addAttr :: Text -> Text -> FieldSettings site -> FieldSettings site
 addAttr attr valu fs = fs { fsAttrs=newAttrs (fsAttrs fs) }
-  where 
+  where
     newAttrs :: [(Text,Text)] -> [(Text,Text)]
     newAttrs [] = [(attr,valu)]
-    newAttrs (p@(a,v):t) 
+    newAttrs (p@(a,v):t)
       | attr==a   = (a,T.append valu $ cons ' ' v):t
-      | otherwise = p:(newAttrs t)   
+      | otherwise = p:(newAttrs t)
 
 addAttrs :: Text -> [Text] -> FieldSettings site -> FieldSettings site
 addAttrs attr valus fs = fs { fsAttrs=newAttrs (fsAttrs fs) }
-  where 
+  where
     newAttrs :: [(Text,Text)] -> [(Text,Text)]
     newAttrs [] = [(attr,T.intercalate " " valus)]
-    newAttrs (p@(a,v):t) 
+    newAttrs (p@(a,v):t)
       | attr==a   = (a,T.intercalate " " (v:valus)):t
-      | otherwise = p:(newAttrs t)   
-            
+      | otherwise = p:(newAttrs t)
+
 addClass :: Text -> FieldSettings site -> FieldSettings site
 addClass = addAttr "class"
 
@@ -334,7 +374,7 @@ addIdClass :: Text -> Text -> FieldSettings site -> FieldSettings site
 addIdClass gId gClass fs = fs { fsId= Just gId, fsAttrs=("class",gClass):(fsAttrs fs) }
 
 
-setClass :: FieldSettings site -> Text -> FieldSettings site -- deprecated 
+setClass :: FieldSettings site -> Text -> FieldSettings site -- deprecated
 setClass fs c = fs { fsAttrs=("class",c):(fsAttrs fs) }
 
 setNameClass :: FieldSettings site -> Text -> Text -> FieldSettings site -- deprecated
@@ -345,3 +385,24 @@ setTooltip tt fs
   | null tt   = fs { fsTooltip = Nothing }
   | otherwise = fs { fsTooltip = Just $ fromString tt }
 
+optionsPersistCryptoId :: forall site backend a msg.
+                          ( YesodPersist site
+                          , PersistQueryRead backend
+                          , HasCryptoUUID (Key a) (HandlerT site IO)
+                          , RenderMessage site msg
+                          , YesodPersistBackend site ~ backend
+                          , PersistRecordBackend a backend
+                          )
+                       => [Filter a]
+                       -> [SelectOpt a]
+                       -> (a -> msg)
+                       -> HandlerT site IO (OptionList (Key a))
+optionsPersistCryptoId filts ords toDisplay = fmap mkOptionList $ do
+  mr <- getMessageRender
+  pairs <- runDB $ selectList filts ords
+  cPairs <- forM pairs $ \e@(Entity key _) -> (,) <$> encrypt key <*> pure e
+  return $ map (\(cId, Entity key value) -> Option
+                 { optionDisplay = mr (toDisplay value)
+                 , optionInternalValue = key
+                 , optionExternalValue = toPathPiece (cId :: CryptoID UUID (Key a))
+                 }) cPairs
diff --git a/src/Handler/Utils/Form/Types.hs b/src/Handler/Utils/Form/Types.hs
new file mode 100644
index 000000000..386f029a0
--- /dev/null
+++ b/src/Handler/Utils/Form/Types.hs
@@ -0,0 +1,12 @@
+{-# LANGUAGE NoImplicitPrelude #-}
+
+module Handler.Utils.Form.Types where
+
+import Import
+
+data FileUploadInfo = FileUploadInfo
+  { fuiId :: CryptoUUIDFile
+  , fuiTitle :: FilePath
+  , fuiHtmlId :: Text
+  , fuiChecked :: Bool
+  }
diff --git a/src/Handler/Utils/Submission.hs b/src/Handler/Utils/Submission.hs
index fad44f370..6a100ab98 100644
--- a/src/Handler/Utils/Submission.hs
+++ b/src/Handler/Utils/Submission.hs
@@ -70,12 +70,9 @@ sinkSubmission sheetId userId mExists = do
     submissionRatingComment = Nothing
     submissionRatingBy      = Nothing
     submissionRatingTime    = Nothing
-    submissionCreated       = now
-    submissionChanged       = now
-    submissionCreatedBy     = userId
-    submissionChangedBy     = userId
 
-  (sId, isUpdate) <- lift $ maybe ((, False) <$> insert Submission{..}) return mExists
+  (sId, isUpdate) <- lift $ maybe ((, False) <$> (insert Submission{..} >>= (\sid -> sid <$ insert (SubmissionEdit userId now sid)))) return mExists
+
 
   sId <$ sinkSubmission' sId isUpdate
   where
@@ -184,9 +181,9 @@ sinkSubmission sheetId userId mExists = do
           alreadyTouched <- gets $ getAny . sinkSubmissionTouched
           when (not alreadyTouched) $ do
             now <- liftIO getCurrentTime
-            lift . update submissionId $ case isUpdate of
-              False -> [ SubmissionChangedBy =. userId, SubmissionChanged =. now ]
-              True  -> [ SubmissionRatingBy =. Just userId, SubmissionRatingTime =. Just now ]
+            lift $ case isUpdate of
+              False -> insert_ $ SubmissionEdit userId now submissionId
+              True  -> update submissionId [ SubmissionRatingBy =. Just userId, SubmissionRatingTime =. Just now ]
             tell $ mempty{ sinkSubmissionTouched = Any True }
 
         finalize :: SubmissionSinkState -> YesodDB UniWorX ()
diff --git a/src/Handler/Utils/Table.hs b/src/Handler/Utils/Table.hs
index e2aca0bb4..b85ab899b 100644
--- a/src/Handler/Utils/Table.hs
+++ b/src/Handler/Utils/Table.hs
@@ -23,12 +23,15 @@ import Data.Either
 
 -- Table design
 tableDefault :: Attribute
-tableDefault = customAttribute "class" "table table-striped table-hover"           
+tableDefault = customAttribute "class" "table table-striped table-hover"
+
+tableSortable :: Attribute
+tableSortable = customAttribute "class" "js-sortable"
 
 -- Colonnade Tools
 numberColonnade :: (IsString c) => Colonnade Headed Int c
 numberColonnade = headed "Nr" (fromString.show)
-  
+
 pairColonnade :: (Functor h) =>  Colonnade h a c -> Colonnade h b c ->  Colonnade h (a,b) c
 pairColonnade a b = mconcat [ lmap fst a, lmap snd b]
 
@@ -39,8 +42,8 @@ encodeHeadedWidgetTableNumbered attrs colo tdata =
     encodeWidgetTable attrs (mconcat [numberCol, lmap snd colo]) (zip [1..] tdata)
   where
     numberCol :: Colonnade Headed (Int,a) (WidgetT site IO ())
-    numberCol = headed "Nr" (fromString.show.fst)    
-  
+    numberCol = headed "Nr" (fromString.show.fst)
+
 headedRowSelector :: ( PathPiece b
                      , Eq b
                      )
@@ -74,7 +77,7 @@ headedRowSelector toExternal fromExternal attrs colonnade tdata = do
   selectionIdent <- newFormIdent
 
   (selectionResults, selectionBoxes) <- fmap unzip . forM externalIds $ \ident -> mopt (checkbox ident) ("" { fsName = Just selectionIdent }) Nothing
-  
+
   let
     selColonnade :: Colonnade Headed Int (Cell UniWorX)
     selColonnade = headed "Markiert" $ cell . fvInput . (selectionBoxes !!)
diff --git a/src/Handler/Utils/Templates.hs b/src/Handler/Utils/Templates.hs
new file mode 100644
index 000000000..8bae783b0
--- /dev/null
+++ b/src/Handler/Utils/Templates.hs
@@ -0,0 +1,22 @@
+{-# LANGUAGE NoImplicitPrelude, TemplateHaskell #-}
+
+module Handler.Utils.Templates where
+
+import Import.NoFoundation
+
+lipsum :: WidgetT site IO ()
+lipsum = $(widgetFile "widgets/lipsum")
+
+modal :: [Char] -> Maybe [Char] -> WidgetT site IO ()
+modal modalTrigger (Just modalContent) = do
+  let
+    modalId :: Int32
+    modalId = 13
+  $(widgetFile "widgets/modal")
+modal modalTrigger Nothing = do
+  let
+    modalId :: Int32
+    modalId = 13
+    modalContent :: [Char]
+    modalContent = "placeholder"
+  $(widgetFile "widgets/modal")
diff --git a/src/Handler/Utils/Zip.hs b/src/Handler/Utils/Zip.hs
index 06405b8d6..b972555a7 100644
--- a/src/Handler/Utils/Zip.hs
+++ b/src/Handler/Utils/Zip.hs
@@ -11,7 +11,7 @@ module Handler.Utils.Zip
   , produceZip
   , consumeZip
   , modifyFileTitle
-  , sourceFiles
+  , sourceFiles, acceptFile
   ) where
 
 import Import
@@ -102,11 +102,13 @@ modifyFileTitle f = mapC $ \x@File{..} -> x{ fileTitle = f fileTitle }
 sourceFiles :: (MonadResource m, MonadThrow m, MonadIO m) => FileInfo -> Source m File
 sourceFiles fInfo
     | mimeType == "application/zip" = fileSource fInfo =$= void consumeZip
-    | otherwise = do
-        let fileTitle = unpack $ fileName fInfo
-        fileModified <- liftIO getCurrentTime
-        yieldM $ do
-          fileContent <- Just <$> runConduit (fileSource fInfo =$= foldC)
-          return File{..}
+    | otherwise = yieldM $ acceptFile fInfo
   where
     mimeType = defaultMimeLookup (fileName fInfo)
+
+acceptFile :: (MonadResource m, MonadThrow m, MonadIO m) => FileInfo -> m File
+acceptFile fInfo = do
+  let fileTitle = unpack $ fileName fInfo
+  fileModified <- liftIO getCurrentTime
+  fileContent <- Just <$> runConduit (fileSource fInfo =$= foldC)
+  return File{..}
diff --git a/src/Import/NoFoundation.hs b/src/Import/NoFoundation.hs
index 1cc175101..4d7ca2b97 100644
--- a/src/Import/NoFoundation.hs
+++ b/src/Import/NoFoundation.hs
@@ -16,3 +16,6 @@ import Data.Fixed            as Import
 
 import CryptoID              as Import
 import Data.UUID             as Import (UUID)
+
+
+import Text.Lucius           as Import
diff --git a/src/Model/Types.hs b/src/Model/Types.hs
index 23bf23a57..321df30b8 100644
--- a/src/Model/Types.hs
+++ b/src/Model/Types.hs
@@ -43,7 +43,7 @@ toPoints :: Integral a => a -> Points
 toPoints = MkFixed . fromIntegral
 
 fromPoints :: Integral a => Points -> a
-fromPoints = error "TODO: Types.fromPoints not yet implemented"
+fromPoints (MkFixed c) = fromInteger c
 
 data SheetType
   = Bonus  { maxPoints :: Points }
@@ -54,9 +54,13 @@ data SheetType
 deriveJSON defaultOptions ''SheetType
 derivePersistFieldJSON "SheetType"
 
-data ExamStatus = Attended | NoShow | Voided
-  deriving (Show, Read, Eq, Ord, Enum, Bounded) 
-derivePersistField "ExamStatus"
+data SheetGroup
+  = Arbitrary { maxParticipants :: Int } -- Distinguish Limited/Arbitrary
+  | RegisteredGroups
+  | NoGroups
+  deriving (Show, Read, Eq)
+deriveJSON defaultOptions ''SheetGroup
+derivePersistFieldJSON "SheetGroup"
 
 data SheetFileType = SheetExercise | SheetHint | SheetSolution | SheetMarking
   deriving (Show, Read, Eq, Ord, Enum, Bounded)
@@ -70,9 +74,11 @@ instance PathPiece SheetFileType where
   fromPathPiece t =
     lookup (CI.mk t) [(CI.mk $ toPathPiece ty,ty) | ty <- [minBound..maxBound]]
 
+data ExamStatus = Attended | NoShow | Voided
+  deriving (Show, Read, Eq, Ord, Enum, Bounded)
+derivePersistField "ExamStatus"
 
-
-data Load = ByTutorial | ByProportion Double
+data Load = ByTutorial | ByProportion Rational
   deriving (Show, Read, Eq)
 derivePersistField "Load"
 
@@ -96,6 +102,10 @@ data TermIdentifier = TermIdentifier
   , season :: Season
   } deriving (Show, Read, Eq, Ord, Generic, Typeable)
 
+-- Conversion TermId <-> TermIdentifier::
+-- from_TermId_to_TermIdentifier = unTermKey
+-- from_TermIdentifier_to_TermId = TermKey
+
 --TODO: Enforce the number of digits within year, with parsing filling in the current leading digits? Goal: short urls
 termToText :: TermIdentifier -> Text
 termToText TermIdentifier{..} = Text.pack $ seasonToChar season : show year
diff --git a/static/css/bootstrap.css b/static/css/bootstrap.css
deleted file mode 100644
index d919b97f9..000000000
--- a/static/css/bootstrap.css
+++ /dev/null
@@ -1,7022 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Lato:400,700,400italic");
-/*!
- * bootswatch v3.3.7
- * Homepage: http://bootswatch.com
- * Copyright 2012-2016 Thomas Park
- * Licensed under MIT
- * Based on Bootstrap
-*/
-/*!
- * Bootstrap v3.3.7 (http://getbootstrap.com)
- * Copyright 2011-2016 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-html {
-  font-family: sans-serif;
-  -ms-text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-}
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-  vertical-align: baseline;
-}
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-[hidden],
-template {
-  display: none;
-}
-a {
-  background-color: transparent;
-}
-a:active,
-a:hover {
-  outline: 0;
-}
-abbr[title] {
-  border-bottom: 1px dotted;
-}
-b,
-strong {
-  font-weight: bold;
-}
-dfn {
-  font-style: italic;
-}
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-mark {
-  background: #ff0;
-  color: #000;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sup {
-  top: -0.5em;
-}
-sub {
-  bottom: -0.25em;
-}
-img {
-  border: 0;
-}
-svg:not(:root) {
-  overflow: hidden;
-}
-figure {
-  margin: 1em 40px;
-}
-hr {
-  -webkit-box-sizing: content-box;
-     -moz-box-sizing: content-box;
-          box-sizing: content-box;
-  height: 0;
-}
-pre {
-  overflow: auto;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  font: inherit;
-  margin: 0;
-}
-button {
-  overflow: visible;
-}
-button,
-select {
-  text-transform: none;
-}
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  cursor: pointer;
-}
-button[disabled],
-html input[disabled] {
-  cursor: default;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-input {
-  line-height: normal;
-}
-input[type="checkbox"],
-input[type="radio"] {
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-  padding: 0;
-}
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-input[type="search"] {
-  -webkit-appearance: textfield;
-  -webkit-box-sizing: content-box;
-     -moz-box-sizing: content-box;
-          box-sizing: content-box;
-}
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-legend {
-  border: 0;
-  padding: 0;
-}
-textarea {
-  overflow: auto;
-}
-optgroup {
-  font-weight: bold;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-td,
-th {
-  padding: 0;
-}
-/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
-@media print {
-  *,
-  *:before,
-  *:after {
-    background: transparent !important;
-    color: #000 !important;
-    -webkit-box-shadow: none !important;
-            box-shadow: none !important;
-    text-shadow: none !important;
-  }
-  a,
-  a:visited {
-    text-decoration: underline;
-  }
-  a[href]:after {
-    content: " (" attr(href) ")";
-  }
-  abbr[title]:after {
-    content: " (" attr(title) ")";
-  }
-  a[href^="#"]:after,
-  a[href^="javascript:"]:after {
-    content: "";
-  }
-  pre,
-  blockquote {
-    border: 1px solid #999;
-    page-break-inside: avoid;
-  }
-  thead {
-    display: table-header-group;
-  }
-  tr,
-  img {
-    page-break-inside: avoid;
-  }
-  img {
-    max-width: 100% !important;
-  }
-  p,
-  h2,
-  h3 {
-    orphans: 3;
-    widows: 3;
-  }
-  h2,
-  h3 {
-    page-break-after: avoid;
-  }
-  .navbar {
-    display: none;
-  }
-  .btn > .caret,
-  .dropup > .btn > .caret {
-    border-top-color: #000 !important;
-  }
-  .label {
-    border: 1px solid #000;
-  }
-  .table {
-    border-collapse: collapse !important;
-  }
-  .table td,
-  .table th {
-    background-color: #fff !important;
-  }
-  .table-bordered th,
-  .table-bordered td {
-    border: 1px solid #ddd !important;
-  }
-}
-@font-face {
-  font-family: 'Glyphicons Halflings';
-  src: url('../fonts/glyphicons-halflings-regular.eot');
-  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
-}
-.glyphicon {
-  position: relative;
-  top: 1px;
-  display: inline-block;
-  font-family: 'Glyphicons Halflings';
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-.glyphicon-asterisk:before {
-  content: "\002a";
-}
-.glyphicon-plus:before {
-  content: "\002b";
-}
-.glyphicon-euro:before,
-.glyphicon-eur:before {
-  content: "\20ac";
-}
-.glyphicon-minus:before {
-  content: "\2212";
-}
-.glyphicon-cloud:before {
-  content: "\2601";
-}
-.glyphicon-envelope:before {
-  content: "\2709";
-}
-.glyphicon-pencil:before {
-  content: "\270f";
-}
-.glyphicon-glass:before {
-  content: "\e001";
-}
-.glyphicon-music:before {
-  content: "\e002";
-}
-.glyphicon-search:before {
-  content: "\e003";
-}
-.glyphicon-heart:before {
-  content: "\e005";
-}
-.glyphicon-star:before {
-  content: "\e006";
-}
-.glyphicon-star-empty:before {
-  content: "\e007";
-}
-.glyphicon-user:before {
-  content: "\e008";
-}
-.glyphicon-film:before {
-  content: "\e009";
-}
-.glyphicon-th-large:before {
-  content: "\e010";
-}
-.glyphicon-th:before {
-  content: "\e011";
-}
-.glyphicon-th-list:before {
-  content: "\e012";
-}
-.glyphicon-ok:before {
-  content: "\e013";
-}
-.glyphicon-remove:before {
-  content: "\e014";
-}
-.glyphicon-zoom-in:before {
-  content: "\e015";
-}
-.glyphicon-zoom-out:before {
-  content: "\e016";
-}
-.glyphicon-off:before {
-  content: "\e017";
-}
-.glyphicon-signal:before {
-  content: "\e018";
-}
-.glyphicon-cog:before {
-  content: "\e019";
-}
-.glyphicon-trash:before {
-  content: "\e020";
-}
-.glyphicon-home:before {
-  content: "\e021";
-}
-.glyphicon-file:before {
-  content: "\e022";
-}
-.glyphicon-time:before {
-  content: "\e023";
-}
-.glyphicon-road:before {
-  content: "\e024";
-}
-.glyphicon-download-alt:before {
-  content: "\e025";
-}
-.glyphicon-download:before {
-  content: "\e026";
-}
-.glyphicon-upload:before {
-  content: "\e027";
-}
-.glyphicon-inbox:before {
-  content: "\e028";
-}
-.glyphicon-play-circle:before {
-  content: "\e029";
-}
-.glyphicon-repeat:before {
-  content: "\e030";
-}
-.glyphicon-refresh:before {
-  content: "\e031";
-}
-.glyphicon-list-alt:before {
-  content: "\e032";
-}
-.glyphicon-lock:before {
-  content: "\e033";
-}
-.glyphicon-flag:before {
-  content: "\e034";
-}
-.glyphicon-headphones:before {
-  content: "\e035";
-}
-.glyphicon-volume-off:before {
-  content: "\e036";
-}
-.glyphicon-volume-down:before {
-  content: "\e037";
-}
-.glyphicon-volume-up:before {
-  content: "\e038";
-}
-.glyphicon-qrcode:before {
-  content: "\e039";
-}
-.glyphicon-barcode:before {
-  content: "\e040";
-}
-.glyphicon-tag:before {
-  content: "\e041";
-}
-.glyphicon-tags:before {
-  content: "\e042";
-}
-.glyphicon-book:before {
-  content: "\e043";
-}
-.glyphicon-bookmark:before {
-  content: "\e044";
-}
-.glyphicon-print:before {
-  content: "\e045";
-}
-.glyphicon-camera:before {
-  content: "\e046";
-}
-.glyphicon-font:before {
-  content: "\e047";
-}
-.glyphicon-bold:before {
-  content: "\e048";
-}
-.glyphicon-italic:before {
-  content: "\e049";
-}
-.glyphicon-text-height:before {
-  content: "\e050";
-}
-.glyphicon-text-width:before {
-  content: "\e051";
-}
-.glyphicon-align-left:before {
-  content: "\e052";
-}
-.glyphicon-align-center:before {
-  content: "\e053";
-}
-.glyphicon-align-right:before {
-  content: "\e054";
-}
-.glyphicon-align-justify:before {
-  content: "\e055";
-}
-.glyphicon-list:before {
-  content: "\e056";
-}
-.glyphicon-indent-left:before {
-  content: "\e057";
-}
-.glyphicon-indent-right:before {
-  content: "\e058";
-}
-.glyphicon-facetime-video:before {
-  content: "\e059";
-}
-.glyphicon-picture:before {
-  content: "\e060";
-}
-.glyphicon-map-marker:before {
-  content: "\e062";
-}
-.glyphicon-adjust:before {
-  content: "\e063";
-}
-.glyphicon-tint:before {
-  content: "\e064";
-}
-.glyphicon-edit:before {
-  content: "\e065";
-}
-.glyphicon-share:before {
-  content: "\e066";
-}
-.glyphicon-check:before {
-  content: "\e067";
-}
-.glyphicon-move:before {
-  content: "\e068";
-}
-.glyphicon-step-backward:before {
-  content: "\e069";
-}
-.glyphicon-fast-backward:before {
-  content: "\e070";
-}
-.glyphicon-backward:before {
-  content: "\e071";
-}
-.glyphicon-play:before {
-  content: "\e072";
-}
-.glyphicon-pause:before {
-  content: "\e073";
-}
-.glyphicon-stop:before {
-  content: "\e074";
-}
-.glyphicon-forward:before {
-  content: "\e075";
-}
-.glyphicon-fast-forward:before {
-  content: "\e076";
-}
-.glyphicon-step-forward:before {
-  content: "\e077";
-}
-.glyphicon-eject:before {
-  content: "\e078";
-}
-.glyphicon-chevron-left:before {
-  content: "\e079";
-}
-.glyphicon-chevron-right:before {
-  content: "\e080";
-}
-.glyphicon-plus-sign:before {
-  content: "\e081";
-}
-.glyphicon-minus-sign:before {
-  content: "\e082";
-}
-.glyphicon-remove-sign:before {
-  content: "\e083";
-}
-.glyphicon-ok-sign:before {
-  content: "\e084";
-}
-.glyphicon-question-sign:before {
-  content: "\e085";
-}
-.glyphicon-info-sign:before {
-  content: "\e086";
-}
-.glyphicon-screenshot:before {
-  content: "\e087";
-}
-.glyphicon-remove-circle:before {
-  content: "\e088";
-}
-.glyphicon-ok-circle:before {
-  content: "\e089";
-}
-.glyphicon-ban-circle:before {
-  content: "\e090";
-}
-.glyphicon-arrow-left:before {
-  content: "\e091";
-}
-.glyphicon-arrow-right:before {
-  content: "\e092";
-}
-.glyphicon-arrow-up:before {
-  content: "\e093";
-}
-.glyphicon-arrow-down:before {
-  content: "\e094";
-}
-.glyphicon-share-alt:before {
-  content: "\e095";
-}
-.glyphicon-resize-full:before {
-  content: "\e096";
-}
-.glyphicon-resize-small:before {
-  content: "\e097";
-}
-.glyphicon-exclamation-sign:before {
-  content: "\e101";
-}
-.glyphicon-gift:before {
-  content: "\e102";
-}
-.glyphicon-leaf:before {
-  content: "\e103";
-}
-.glyphicon-fire:before {
-  content: "\e104";
-}
-.glyphicon-eye-open:before {
-  content: "\e105";
-}
-.glyphicon-eye-close:before {
-  content: "\e106";
-}
-.glyphicon-warning-sign:before {
-  content: "\e107";
-}
-.glyphicon-plane:before {
-  content: "\e108";
-}
-.glyphicon-calendar:before {
-  content: "\e109";
-}
-.glyphicon-random:before {
-  content: "\e110";
-}
-.glyphicon-comment:before {
-  content: "\e111";
-}
-.glyphicon-magnet:before {
-  content: "\e112";
-}
-.glyphicon-chevron-up:before {
-  content: "\e113";
-}
-.glyphicon-chevron-down:before {
-  content: "\e114";
-}
-.glyphicon-retweet:before {
-  content: "\e115";
-}
-.glyphicon-shopping-cart:before {
-  content: "\e116";
-}
-.glyphicon-folder-close:before {
-  content: "\e117";
-}
-.glyphicon-folder-open:before {
-  content: "\e118";
-}
-.glyphicon-resize-vertical:before {
-  content: "\e119";
-}
-.glyphicon-resize-horizontal:before {
-  content: "\e120";
-}
-.glyphicon-hdd:before {
-  content: "\e121";
-}
-.glyphicon-bullhorn:before {
-  content: "\e122";
-}
-.glyphicon-bell:before {
-  content: "\e123";
-}
-.glyphicon-certificate:before {
-  content: "\e124";
-}
-.glyphicon-thumbs-up:before {
-  content: "\e125";
-}
-.glyphicon-thumbs-down:before {
-  content: "\e126";
-}
-.glyphicon-hand-right:before {
-  content: "\e127";
-}
-.glyphicon-hand-left:before {
-  content: "\e128";
-}
-.glyphicon-hand-up:before {
-  content: "\e129";
-}
-.glyphicon-hand-down:before {
-  content: "\e130";
-}
-.glyphicon-circle-arrow-right:before {
-  content: "\e131";
-}
-.glyphicon-circle-arrow-left:before {
-  content: "\e132";
-}
-.glyphicon-circle-arrow-up:before {
-  content: "\e133";
-}
-.glyphicon-circle-arrow-down:before {
-  content: "\e134";
-}
-.glyphicon-globe:before {
-  content: "\e135";
-}
-.glyphicon-wrench:before {
-  content: "\e136";
-}
-.glyphicon-tasks:before {
-  content: "\e137";
-}
-.glyphicon-filter:before {
-  content: "\e138";
-}
-.glyphicon-briefcase:before {
-  content: "\e139";
-}
-.glyphicon-fullscreen:before {
-  content: "\e140";
-}
-.glyphicon-dashboard:before {
-  content: "\e141";
-}
-.glyphicon-paperclip:before {
-  content: "\e142";
-}
-.glyphicon-heart-empty:before {
-  content: "\e143";
-}
-.glyphicon-link:before {
-  content: "\e144";
-}
-.glyphicon-phone:before {
-  content: "\e145";
-}
-.glyphicon-pushpin:before {
-  content: "\e146";
-}
-.glyphicon-usd:before {
-  content: "\e148";
-}
-.glyphicon-gbp:before {
-  content: "\e149";
-}
-.glyphicon-sort:before {
-  content: "\e150";
-}
-.glyphicon-sort-by-alphabet:before {
-  content: "\e151";
-}
-.glyphicon-sort-by-alphabet-alt:before {
-  content: "\e152";
-}
-.glyphicon-sort-by-order:before {
-  content: "\e153";
-}
-.glyphicon-sort-by-order-alt:before {
-  content: "\e154";
-}
-.glyphicon-sort-by-attributes:before {
-  content: "\e155";
-}
-.glyphicon-sort-by-attributes-alt:before {
-  content: "\e156";
-}
-.glyphicon-unchecked:before {
-  content: "\e157";
-}
-.glyphicon-expand:before {
-  content: "\e158";
-}
-.glyphicon-collapse-down:before {
-  content: "\e159";
-}
-.glyphicon-collapse-up:before {
-  content: "\e160";
-}
-.glyphicon-log-in:before {
-  content: "\e161";
-}
-.glyphicon-flash:before {
-  content: "\e162";
-}
-.glyphicon-log-out:before {
-  content: "\e163";
-}
-.glyphicon-new-window:before {
-  content: "\e164";
-}
-.glyphicon-record:before {
-  content: "\e165";
-}
-.glyphicon-save:before {
-  content: "\e166";
-}
-.glyphicon-open:before {
-  content: "\e167";
-}
-.glyphicon-saved:before {
-  content: "\e168";
-}
-.glyphicon-import:before {
-  content: "\e169";
-}
-.glyphicon-export:before {
-  content: "\e170";
-}
-.glyphicon-send:before {
-  content: "\e171";
-}
-.glyphicon-floppy-disk:before {
-  content: "\e172";
-}
-.glyphicon-floppy-saved:before {
-  content: "\e173";
-}
-.glyphicon-floppy-remove:before {
-  content: "\e174";
-}
-.glyphicon-floppy-save:before {
-  content: "\e175";
-}
-.glyphicon-floppy-open:before {
-  content: "\e176";
-}
-.glyphicon-credit-card:before {
-  content: "\e177";
-}
-.glyphicon-transfer:before {
-  content: "\e178";
-}
-.glyphicon-cutlery:before {
-  content: "\e179";
-}
-.glyphicon-header:before {
-  content: "\e180";
-}
-.glyphicon-compressed:before {
-  content: "\e181";
-}
-.glyphicon-earphone:before {
-  content: "\e182";
-}
-.glyphicon-phone-alt:before {
-  content: "\e183";
-}
-.glyphicon-tower:before {
-  content: "\e184";
-}
-.glyphicon-stats:before {
-  content: "\e185";
-}
-.glyphicon-sd-video:before {
-  content: "\e186";
-}
-.glyphicon-hd-video:before {
-  content: "\e187";
-}
-.glyphicon-subtitles:before {
-  content: "\e188";
-}
-.glyphicon-sound-stereo:before {
-  content: "\e189";
-}
-.glyphicon-sound-dolby:before {
-  content: "\e190";
-}
-.glyphicon-sound-5-1:before {
-  content: "\e191";
-}
-.glyphicon-sound-6-1:before {
-  content: "\e192";
-}
-.glyphicon-sound-7-1:before {
-  content: "\e193";
-}
-.glyphicon-copyright-mark:before {
-  content: "\e194";
-}
-.glyphicon-registration-mark:before {
-  content: "\e195";
-}
-.glyphicon-cloud-download:before {
-  content: "\e197";
-}
-.glyphicon-cloud-upload:before {
-  content: "\e198";
-}
-.glyphicon-tree-conifer:before {
-  content: "\e199";
-}
-.glyphicon-tree-deciduous:before {
-  content: "\e200";
-}
-.glyphicon-cd:before {
-  content: "\e201";
-}
-.glyphicon-save-file:before {
-  content: "\e202";
-}
-.glyphicon-open-file:before {
-  content: "\e203";
-}
-.glyphicon-level-up:before {
-  content: "\e204";
-}
-.glyphicon-copy:before {
-  content: "\e205";
-}
-.glyphicon-paste:before {
-  content: "\e206";
-}
-.glyphicon-alert:before {
-  content: "\e209";
-}
-.glyphicon-equalizer:before {
-  content: "\e210";
-}
-.glyphicon-king:before {
-  content: "\e211";
-}
-.glyphicon-queen:before {
-  content: "\e212";
-}
-.glyphicon-pawn:before {
-  content: "\e213";
-}
-.glyphicon-bishop:before {
-  content: "\e214";
-}
-.glyphicon-knight:before {
-  content: "\e215";
-}
-.glyphicon-baby-formula:before {
-  content: "\e216";
-}
-.glyphicon-tent:before {
-  content: "\26fa";
-}
-.glyphicon-blackboard:before {
-  content: "\e218";
-}
-.glyphicon-bed:before {
-  content: "\e219";
-}
-.glyphicon-apple:before {
-  content: "\f8ff";
-}
-.glyphicon-erase:before {
-  content: "\e221";
-}
-.glyphicon-hourglass:before {
-  content: "\231b";
-}
-.glyphicon-lamp:before {
-  content: "\e223";
-}
-.glyphicon-duplicate:before {
-  content: "\e224";
-}
-.glyphicon-piggy-bank:before {
-  content: "\e225";
-}
-.glyphicon-scissors:before {
-  content: "\e226";
-}
-.glyphicon-bitcoin:before {
-  content: "\e227";
-}
-.glyphicon-btc:before {
-  content: "\e227";
-}
-.glyphicon-xbt:before {
-  content: "\e227";
-}
-.glyphicon-yen:before {
-  content: "\00a5";
-}
-.glyphicon-jpy:before {
-  content: "\00a5";
-}
-.glyphicon-ruble:before {
-  content: "\20bd";
-}
-.glyphicon-rub:before {
-  content: "\20bd";
-}
-.glyphicon-scale:before {
-  content: "\e230";
-}
-.glyphicon-ice-lolly:before {
-  content: "\e231";
-}
-.glyphicon-ice-lolly-tasted:before {
-  content: "\e232";
-}
-.glyphicon-education:before {
-  content: "\e233";
-}
-.glyphicon-option-horizontal:before {
-  content: "\e234";
-}
-.glyphicon-option-vertical:before {
-  content: "\e235";
-}
-.glyphicon-menu-hamburger:before {
-  content: "\e236";
-}
-.glyphicon-modal-window:before {
-  content: "\e237";
-}
-.glyphicon-oil:before {
-  content: "\e238";
-}
-.glyphicon-grain:before {
-  content: "\e239";
-}
-.glyphicon-sunglasses:before {
-  content: "\e240";
-}
-.glyphicon-text-size:before {
-  content: "\e241";
-}
-.glyphicon-text-color:before {
-  content: "\e242";
-}
-.glyphicon-text-background:before {
-  content: "\e243";
-}
-.glyphicon-object-align-top:before {
-  content: "\e244";
-}
-.glyphicon-object-align-bottom:before {
-  content: "\e245";
-}
-.glyphicon-object-align-horizontal:before {
-  content: "\e246";
-}
-.glyphicon-object-align-left:before {
-  content: "\e247";
-}
-.glyphicon-object-align-vertical:before {
-  content: "\e248";
-}
-.glyphicon-object-align-right:before {
-  content: "\e249";
-}
-.glyphicon-triangle-right:before {
-  content: "\e250";
-}
-.glyphicon-triangle-left:before {
-  content: "\e251";
-}
-.glyphicon-triangle-bottom:before {
-  content: "\e252";
-}
-.glyphicon-triangle-top:before {
-  content: "\e253";
-}
-.glyphicon-console:before {
-  content: "\e254";
-}
-.glyphicon-superscript:before {
-  content: "\e255";
-}
-.glyphicon-subscript:before {
-  content: "\e256";
-}
-.glyphicon-menu-left:before {
-  content: "\e257";
-}
-.glyphicon-menu-right:before {
-  content: "\e258";
-}
-.glyphicon-menu-down:before {
-  content: "\e259";
-}
-.glyphicon-menu-up:before {
-  content: "\e260";
-}
-* {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-*:before,
-*:after {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-html {
-  font-size: 10px;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-body {
-  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 15px;
-  line-height: 1.42857143;
-  color: #2c3e50;
-  background-color: #ffffff;
-}
-input,
-button,
-select,
-textarea {
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-a {
-  color: #18bc9c;
-  text-decoration: none;
-}
-a:hover,
-a:focus {
-  color: #18bc9c;
-  text-decoration: underline;
-}
-a:focus {
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-figure {
-  margin: 0;
-}
-img {
-  vertical-align: middle;
-}
-.img-responsive,
-.thumbnail > img,
-.thumbnail a > img,
-.carousel-inner > .item > img,
-.carousel-inner > .item > a > img {
-  display: block;
-  max-width: 100%;
-  height: auto;
-}
-.img-rounded {
-  border-radius: 6px;
-}
-.img-thumbnail {
-  padding: 4px;
-  line-height: 1.42857143;
-  background-color: #ffffff;
-  border: 1px solid #ecf0f1;
-  border-radius: 4px;
-  -webkit-transition: all 0.2s ease-in-out;
-  -o-transition: all 0.2s ease-in-out;
-  transition: all 0.2s ease-in-out;
-  display: inline-block;
-  max-width: 100%;
-  height: auto;
-}
-.img-circle {
-  border-radius: 50%;
-}
-hr {
-  margin-top: 21px;
-  margin-bottom: 21px;
-  border: 0;
-  border-top: 1px solid #ecf0f1;
-}
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  border: 0;
-}
-.sr-only-focusable:active,
-.sr-only-focusable:focus {
-  position: static;
-  width: auto;
-  height: auto;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-}
-[role="button"] {
-  cursor: pointer;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
-  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-weight: 400;
-  line-height: 1.1;
-  color: inherit;
-}
-h1 small,
-h2 small,
-h3 small,
-h4 small,
-h5 small,
-h6 small,
-.h1 small,
-.h2 small,
-.h3 small,
-.h4 small,
-.h5 small,
-.h6 small,
-h1 .small,
-h2 .small,
-h3 .small,
-h4 .small,
-h5 .small,
-h6 .small,
-.h1 .small,
-.h2 .small,
-.h3 .small,
-.h4 .small,
-.h5 .small,
-.h6 .small {
-  font-weight: normal;
-  line-height: 1;
-  color: #b4bcc2;
-}
-h1,
-.h1,
-h2,
-.h2,
-h3,
-.h3 {
-  margin-top: 21px;
-  margin-bottom: 10.5px;
-}
-h1 small,
-.h1 small,
-h2 small,
-.h2 small,
-h3 small,
-.h3 small,
-h1 .small,
-.h1 .small,
-h2 .small,
-.h2 .small,
-h3 .small,
-.h3 .small {
-  font-size: 65%;
-}
-h4,
-.h4,
-h5,
-.h5,
-h6,
-.h6 {
-  margin-top: 10.5px;
-  margin-bottom: 10.5px;
-}
-h4 small,
-.h4 small,
-h5 small,
-.h5 small,
-h6 small,
-.h6 small,
-h4 .small,
-.h4 .small,
-h5 .small,
-.h5 .small,
-h6 .small,
-.h6 .small {
-  font-size: 75%;
-}
-h1,
-.h1 {
-  font-size: 39px;
-}
-h2,
-.h2 {
-  font-size: 32px;
-}
-h3,
-.h3 {
-  font-size: 26px;
-}
-h4,
-.h4 {
-  font-size: 19px;
-}
-h5,
-.h5 {
-  font-size: 15px;
-}
-h6,
-.h6 {
-  font-size: 13px;
-}
-p {
-  margin: 0 0 10.5px;
-}
-.lead {
-  margin-bottom: 21px;
-  font-size: 17px;
-  font-weight: 300;
-  line-height: 1.4;
-}
-@media (min-width: 768px) {
-  .lead {
-    font-size: 22.5px;
-  }
-}
-small,
-.small {
-  font-size: 86%;
-}
-mark,
-.mark {
-  background-color: #f39c12;
-  padding: .2em;
-}
-.text-left {
-  text-align: left;
-}
-.text-right {
-  text-align: right;
-}
-.text-center {
-  text-align: center;
-}
-.text-justify {
-  text-align: justify;
-}
-.text-nowrap {
-  white-space: nowrap;
-}
-.text-lowercase {
-  text-transform: lowercase;
-}
-.text-uppercase {
-  text-transform: uppercase;
-}
-.text-capitalize {
-  text-transform: capitalize;
-}
-.text-muted {
-  color: #b4bcc2;
-}
-.text-primary {
-  color: #2c3e50;
-}
-a.text-primary:hover,
-a.text-primary:focus {
-  color: #1a242f;
-}
-.text-success {
-  color: #ffffff;
-}
-a.text-success:hover,
-a.text-success:focus {
-  color: #e6e6e6;
-}
-.text-info {
-  color: #ffffff;
-}
-a.text-info:hover,
-a.text-info:focus {
-  color: #e6e6e6;
-}
-.text-warning {
-  color: #ffffff;
-}
-a.text-warning:hover,
-a.text-warning:focus {
-  color: #e6e6e6;
-}
-.text-danger {
-  color: #ffffff;
-}
-a.text-danger:hover,
-a.text-danger:focus {
-  color: #e6e6e6;
-}
-.bg-primary {
-  color: #fff;
-  background-color: #2c3e50;
-}
-a.bg-primary:hover,
-a.bg-primary:focus {
-  background-color: #1a242f;
-}
-.bg-success {
-  background-color: #18bc9c;
-}
-a.bg-success:hover,
-a.bg-success:focus {
-  background-color: #128f76;
-}
-.bg-info {
-  background-color: #3498db;
-}
-a.bg-info:hover,
-a.bg-info:focus {
-  background-color: #217dbb;
-}
-.bg-warning {
-  background-color: #f39c12;
-}
-a.bg-warning:hover,
-a.bg-warning:focus {
-  background-color: #c87f0a;
-}
-.bg-danger {
-  background-color: #e74c3c;
-}
-a.bg-danger:hover,
-a.bg-danger:focus {
-  background-color: #d62c1a;
-}
-.page-header {
-  padding-bottom: 9.5px;
-  margin: 42px 0 21px;
-  border-bottom: 1px solid transparent;
-}
-ul,
-ol {
-  margin-top: 0;
-  margin-bottom: 10.5px;
-}
-ul ul,
-ol ul,
-ul ol,
-ol ol {
-  margin-bottom: 0;
-}
-.list-unstyled {
-  padding-left: 0;
-  list-style: none;
-}
-.list-inline {
-  padding-left: 0;
-  list-style: none;
-  margin-left: -5px;
-}
-.list-inline > li {
-  display: inline-block;
-  padding-left: 5px;
-  padding-right: 5px;
-}
-dl {
-  margin-top: 0;
-  margin-bottom: 21px;
-}
-dt,
-dd {
-  line-height: 1.42857143;
-}
-dt {
-  font-weight: bold;
-}
-dd {
-  margin-left: 0;
-}
-@media (min-width: 768px) {
-  .dl-horizontal dt {
-    float: left;
-    width: 160px;
-    clear: left;
-    text-align: right;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  .dl-horizontal dd {
-    margin-left: 180px;
-  }
-}
-abbr[title],
-abbr[data-original-title] {
-  cursor: help;
-  border-bottom: 1px dotted #b4bcc2;
-}
-.initialism {
-  font-size: 90%;
-  text-transform: uppercase;
-}
-blockquote {
-  padding: 10.5px 21px;
-  margin: 0 0 21px;
-  font-size: 18.75px;
-  border-left: 5px solid #ecf0f1;
-}
-blockquote p:last-child,
-blockquote ul:last-child,
-blockquote ol:last-child {
-  margin-bottom: 0;
-}
-blockquote footer,
-blockquote small,
-blockquote .small {
-  display: block;
-  font-size: 80%;
-  line-height: 1.42857143;
-  color: #b4bcc2;
-}
-blockquote footer:before,
-blockquote small:before,
-blockquote .small:before {
-  content: '\2014 \00A0';
-}
-.blockquote-reverse,
-blockquote.pull-right {
-  padding-right: 15px;
-  padding-left: 0;
-  border-right: 5px solid #ecf0f1;
-  border-left: 0;
-  text-align: right;
-}
-.blockquote-reverse footer:before,
-blockquote.pull-right footer:before,
-.blockquote-reverse small:before,
-blockquote.pull-right small:before,
-.blockquote-reverse .small:before,
-blockquote.pull-right .small:before {
-  content: '';
-}
-.blockquote-reverse footer:after,
-blockquote.pull-right footer:after,
-.blockquote-reverse small:after,
-blockquote.pull-right small:after,
-.blockquote-reverse .small:after,
-blockquote.pull-right .small:after {
-  content: '\00A0 \2014';
-}
-address {
-  margin-bottom: 21px;
-  font-style: normal;
-  line-height: 1.42857143;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
-}
-code {
-  padding: 2px 4px;
-  font-size: 90%;
-  color: #c7254e;
-  background-color: #f9f2f4;
-  border-radius: 4px;
-}
-kbd {
-  padding: 2px 4px;
-  font-size: 90%;
-  color: #ffffff;
-  background-color: #333333;
-  border-radius: 3px;
-  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
-          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
-}
-kbd kbd {
-  padding: 0;
-  font-size: 100%;
-  font-weight: bold;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-}
-pre {
-  display: block;
-  padding: 10px;
-  margin: 0 0 10.5px;
-  font-size: 14px;
-  line-height: 1.42857143;
-  word-break: break-all;
-  word-wrap: break-word;
-  color: #7b8a8b;
-  background-color: #ecf0f1;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-}
-pre code {
-  padding: 0;
-  font-size: inherit;
-  color: inherit;
-  white-space: pre-wrap;
-  background-color: transparent;
-  border-radius: 0;
-}
-.pre-scrollable {
-  max-height: 340px;
-  overflow-y: scroll;
-}
-.container {
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-@media (min-width: 768px) {
-  .container {
-    width: 750px;
-  }
-}
-@media (min-width: 992px) {
-  .container {
-    width: 970px;
-  }
-}
-@media (min-width: 1200px) {
-  .container {
-    width: 1170px;
-  }
-}
-.container-fluid {
-  margin-right: auto;
-  margin-left: auto;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-.row {
-  margin-left: -15px;
-  margin-right: -15px;
-}
-.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
-  position: relative;
-  min-height: 1px;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
-  float: left;
-}
-.col-xs-12 {
-  width: 100%;
-}
-.col-xs-11 {
-  width: 91.66666667%;
-}
-.col-xs-10 {
-  width: 83.33333333%;
-}
-.col-xs-9 {
-  width: 75%;
-}
-.col-xs-8 {
-  width: 66.66666667%;
-}
-.col-xs-7 {
-  width: 58.33333333%;
-}
-.col-xs-6 {
-  width: 50%;
-}
-.col-xs-5 {
-  width: 41.66666667%;
-}
-.col-xs-4 {
-  width: 33.33333333%;
-}
-.col-xs-3 {
-  width: 25%;
-}
-.col-xs-2 {
-  width: 16.66666667%;
-}
-.col-xs-1 {
-  width: 8.33333333%;
-}
-.col-xs-pull-12 {
-  right: 100%;
-}
-.col-xs-pull-11 {
-  right: 91.66666667%;
-}
-.col-xs-pull-10 {
-  right: 83.33333333%;
-}
-.col-xs-pull-9 {
-  right: 75%;
-}
-.col-xs-pull-8 {
-  right: 66.66666667%;
-}
-.col-xs-pull-7 {
-  right: 58.33333333%;
-}
-.col-xs-pull-6 {
-  right: 50%;
-}
-.col-xs-pull-5 {
-  right: 41.66666667%;
-}
-.col-xs-pull-4 {
-  right: 33.33333333%;
-}
-.col-xs-pull-3 {
-  right: 25%;
-}
-.col-xs-pull-2 {
-  right: 16.66666667%;
-}
-.col-xs-pull-1 {
-  right: 8.33333333%;
-}
-.col-xs-pull-0 {
-  right: auto;
-}
-.col-xs-push-12 {
-  left: 100%;
-}
-.col-xs-push-11 {
-  left: 91.66666667%;
-}
-.col-xs-push-10 {
-  left: 83.33333333%;
-}
-.col-xs-push-9 {
-  left: 75%;
-}
-.col-xs-push-8 {
-  left: 66.66666667%;
-}
-.col-xs-push-7 {
-  left: 58.33333333%;
-}
-.col-xs-push-6 {
-  left: 50%;
-}
-.col-xs-push-5 {
-  left: 41.66666667%;
-}
-.col-xs-push-4 {
-  left: 33.33333333%;
-}
-.col-xs-push-3 {
-  left: 25%;
-}
-.col-xs-push-2 {
-  left: 16.66666667%;
-}
-.col-xs-push-1 {
-  left: 8.33333333%;
-}
-.col-xs-push-0 {
-  left: auto;
-}
-.col-xs-offset-12 {
-  margin-left: 100%;
-}
-.col-xs-offset-11 {
-  margin-left: 91.66666667%;
-}
-.col-xs-offset-10 {
-  margin-left: 83.33333333%;
-}
-.col-xs-offset-9 {
-  margin-left: 75%;
-}
-.col-xs-offset-8 {
-  margin-left: 66.66666667%;
-}
-.col-xs-offset-7 {
-  margin-left: 58.33333333%;
-}
-.col-xs-offset-6 {
-  margin-left: 50%;
-}
-.col-xs-offset-5 {
-  margin-left: 41.66666667%;
-}
-.col-xs-offset-4 {
-  margin-left: 33.33333333%;
-}
-.col-xs-offset-3 {
-  margin-left: 25%;
-}
-.col-xs-offset-2 {
-  margin-left: 16.66666667%;
-}
-.col-xs-offset-1 {
-  margin-left: 8.33333333%;
-}
-.col-xs-offset-0 {
-  margin-left: 0%;
-}
-@media (min-width: 768px) {
-  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
-    float: left;
-  }
-  .col-sm-12 {
-    width: 100%;
-  }
-  .col-sm-11 {
-    width: 91.66666667%;
-  }
-  .col-sm-10 {
-    width: 83.33333333%;
-  }
-  .col-sm-9 {
-    width: 75%;
-  }
-  .col-sm-8 {
-    width: 66.66666667%;
-  }
-  .col-sm-7 {
-    width: 58.33333333%;
-  }
-  .col-sm-6 {
-    width: 50%;
-  }
-  .col-sm-5 {
-    width: 41.66666667%;
-  }
-  .col-sm-4 {
-    width: 33.33333333%;
-  }
-  .col-sm-3 {
-    width: 25%;
-  }
-  .col-sm-2 {
-    width: 16.66666667%;
-  }
-  .col-sm-1 {
-    width: 8.33333333%;
-  }
-  .col-sm-pull-12 {
-    right: 100%;
-  }
-  .col-sm-pull-11 {
-    right: 91.66666667%;
-  }
-  .col-sm-pull-10 {
-    right: 83.33333333%;
-  }
-  .col-sm-pull-9 {
-    right: 75%;
-  }
-  .col-sm-pull-8 {
-    right: 66.66666667%;
-  }
-  .col-sm-pull-7 {
-    right: 58.33333333%;
-  }
-  .col-sm-pull-6 {
-    right: 50%;
-  }
-  .col-sm-pull-5 {
-    right: 41.66666667%;
-  }
-  .col-sm-pull-4 {
-    right: 33.33333333%;
-  }
-  .col-sm-pull-3 {
-    right: 25%;
-  }
-  .col-sm-pull-2 {
-    right: 16.66666667%;
-  }
-  .col-sm-pull-1 {
-    right: 8.33333333%;
-  }
-  .col-sm-pull-0 {
-    right: auto;
-  }
-  .col-sm-push-12 {
-    left: 100%;
-  }
-  .col-sm-push-11 {
-    left: 91.66666667%;
-  }
-  .col-sm-push-10 {
-    left: 83.33333333%;
-  }
-  .col-sm-push-9 {
-    left: 75%;
-  }
-  .col-sm-push-8 {
-    left: 66.66666667%;
-  }
-  .col-sm-push-7 {
-    left: 58.33333333%;
-  }
-  .col-sm-push-6 {
-    left: 50%;
-  }
-  .col-sm-push-5 {
-    left: 41.66666667%;
-  }
-  .col-sm-push-4 {
-    left: 33.33333333%;
-  }
-  .col-sm-push-3 {
-    left: 25%;
-  }
-  .col-sm-push-2 {
-    left: 16.66666667%;
-  }
-  .col-sm-push-1 {
-    left: 8.33333333%;
-  }
-  .col-sm-push-0 {
-    left: auto;
-  }
-  .col-sm-offset-12 {
-    margin-left: 100%;
-  }
-  .col-sm-offset-11 {
-    margin-left: 91.66666667%;
-  }
-  .col-sm-offset-10 {
-    margin-left: 83.33333333%;
-  }
-  .col-sm-offset-9 {
-    margin-left: 75%;
-  }
-  .col-sm-offset-8 {
-    margin-left: 66.66666667%;
-  }
-  .col-sm-offset-7 {
-    margin-left: 58.33333333%;
-  }
-  .col-sm-offset-6 {
-    margin-left: 50%;
-  }
-  .col-sm-offset-5 {
-    margin-left: 41.66666667%;
-  }
-  .col-sm-offset-4 {
-    margin-left: 33.33333333%;
-  }
-  .col-sm-offset-3 {
-    margin-left: 25%;
-  }
-  .col-sm-offset-2 {
-    margin-left: 16.66666667%;
-  }
-  .col-sm-offset-1 {
-    margin-left: 8.33333333%;
-  }
-  .col-sm-offset-0 {
-    margin-left: 0%;
-  }
-}
-@media (min-width: 992px) {
-  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
-    float: left;
-  }
-  .col-md-12 {
-    width: 100%;
-  }
-  .col-md-11 {
-    width: 91.66666667%;
-  }
-  .col-md-10 {
-    width: 83.33333333%;
-  }
-  .col-md-9 {
-    width: 75%;
-  }
-  .col-md-8 {
-    width: 66.66666667%;
-  }
-  .col-md-7 {
-    width: 58.33333333%;
-  }
-  .col-md-6 {
-    width: 50%;
-  }
-  .col-md-5 {
-    width: 41.66666667%;
-  }
-  .col-md-4 {
-    width: 33.33333333%;
-  }
-  .col-md-3 {
-    width: 25%;
-  }
-  .col-md-2 {
-    width: 16.66666667%;
-  }
-  .col-md-1 {
-    width: 8.33333333%;
-  }
-  .col-md-pull-12 {
-    right: 100%;
-  }
-  .col-md-pull-11 {
-    right: 91.66666667%;
-  }
-  .col-md-pull-10 {
-    right: 83.33333333%;
-  }
-  .col-md-pull-9 {
-    right: 75%;
-  }
-  .col-md-pull-8 {
-    right: 66.66666667%;
-  }
-  .col-md-pull-7 {
-    right: 58.33333333%;
-  }
-  .col-md-pull-6 {
-    right: 50%;
-  }
-  .col-md-pull-5 {
-    right: 41.66666667%;
-  }
-  .col-md-pull-4 {
-    right: 33.33333333%;
-  }
-  .col-md-pull-3 {
-    right: 25%;
-  }
-  .col-md-pull-2 {
-    right: 16.66666667%;
-  }
-  .col-md-pull-1 {
-    right: 8.33333333%;
-  }
-  .col-md-pull-0 {
-    right: auto;
-  }
-  .col-md-push-12 {
-    left: 100%;
-  }
-  .col-md-push-11 {
-    left: 91.66666667%;
-  }
-  .col-md-push-10 {
-    left: 83.33333333%;
-  }
-  .col-md-push-9 {
-    left: 75%;
-  }
-  .col-md-push-8 {
-    left: 66.66666667%;
-  }
-  .col-md-push-7 {
-    left: 58.33333333%;
-  }
-  .col-md-push-6 {
-    left: 50%;
-  }
-  .col-md-push-5 {
-    left: 41.66666667%;
-  }
-  .col-md-push-4 {
-    left: 33.33333333%;
-  }
-  .col-md-push-3 {
-    left: 25%;
-  }
-  .col-md-push-2 {
-    left: 16.66666667%;
-  }
-  .col-md-push-1 {
-    left: 8.33333333%;
-  }
-  .col-md-push-0 {
-    left: auto;
-  }
-  .col-md-offset-12 {
-    margin-left: 100%;
-  }
-  .col-md-offset-11 {
-    margin-left: 91.66666667%;
-  }
-  .col-md-offset-10 {
-    margin-left: 83.33333333%;
-  }
-  .col-md-offset-9 {
-    margin-left: 75%;
-  }
-  .col-md-offset-8 {
-    margin-left: 66.66666667%;
-  }
-  .col-md-offset-7 {
-    margin-left: 58.33333333%;
-  }
-  .col-md-offset-6 {
-    margin-left: 50%;
-  }
-  .col-md-offset-5 {
-    margin-left: 41.66666667%;
-  }
-  .col-md-offset-4 {
-    margin-left: 33.33333333%;
-  }
-  .col-md-offset-3 {
-    margin-left: 25%;
-  }
-  .col-md-offset-2 {
-    margin-left: 16.66666667%;
-  }
-  .col-md-offset-1 {
-    margin-left: 8.33333333%;
-  }
-  .col-md-offset-0 {
-    margin-left: 0%;
-  }
-}
-@media (min-width: 1200px) {
-  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
-    float: left;
-  }
-  .col-lg-12 {
-    width: 100%;
-  }
-  .col-lg-11 {
-    width: 91.66666667%;
-  }
-  .col-lg-10 {
-    width: 83.33333333%;
-  }
-  .col-lg-9 {
-    width: 75%;
-  }
-  .col-lg-8 {
-    width: 66.66666667%;
-  }
-  .col-lg-7 {
-    width: 58.33333333%;
-  }
-  .col-lg-6 {
-    width: 50%;
-  }
-  .col-lg-5 {
-    width: 41.66666667%;
-  }
-  .col-lg-4 {
-    width: 33.33333333%;
-  }
-  .col-lg-3 {
-    width: 25%;
-  }
-  .col-lg-2 {
-    width: 16.66666667%;
-  }
-  .col-lg-1 {
-    width: 8.33333333%;
-  }
-  .col-lg-pull-12 {
-    right: 100%;
-  }
-  .col-lg-pull-11 {
-    right: 91.66666667%;
-  }
-  .col-lg-pull-10 {
-    right: 83.33333333%;
-  }
-  .col-lg-pull-9 {
-    right: 75%;
-  }
-  .col-lg-pull-8 {
-    right: 66.66666667%;
-  }
-  .col-lg-pull-7 {
-    right: 58.33333333%;
-  }
-  .col-lg-pull-6 {
-    right: 50%;
-  }
-  .col-lg-pull-5 {
-    right: 41.66666667%;
-  }
-  .col-lg-pull-4 {
-    right: 33.33333333%;
-  }
-  .col-lg-pull-3 {
-    right: 25%;
-  }
-  .col-lg-pull-2 {
-    right: 16.66666667%;
-  }
-  .col-lg-pull-1 {
-    right: 8.33333333%;
-  }
-  .col-lg-pull-0 {
-    right: auto;
-  }
-  .col-lg-push-12 {
-    left: 100%;
-  }
-  .col-lg-push-11 {
-    left: 91.66666667%;
-  }
-  .col-lg-push-10 {
-    left: 83.33333333%;
-  }
-  .col-lg-push-9 {
-    left: 75%;
-  }
-  .col-lg-push-8 {
-    left: 66.66666667%;
-  }
-  .col-lg-push-7 {
-    left: 58.33333333%;
-  }
-  .col-lg-push-6 {
-    left: 50%;
-  }
-  .col-lg-push-5 {
-    left: 41.66666667%;
-  }
-  .col-lg-push-4 {
-    left: 33.33333333%;
-  }
-  .col-lg-push-3 {
-    left: 25%;
-  }
-  .col-lg-push-2 {
-    left: 16.66666667%;
-  }
-  .col-lg-push-1 {
-    left: 8.33333333%;
-  }
-  .col-lg-push-0 {
-    left: auto;
-  }
-  .col-lg-offset-12 {
-    margin-left: 100%;
-  }
-  .col-lg-offset-11 {
-    margin-left: 91.66666667%;
-  }
-  .col-lg-offset-10 {
-    margin-left: 83.33333333%;
-  }
-  .col-lg-offset-9 {
-    margin-left: 75%;
-  }
-  .col-lg-offset-8 {
-    margin-left: 66.66666667%;
-  }
-  .col-lg-offset-7 {
-    margin-left: 58.33333333%;
-  }
-  .col-lg-offset-6 {
-    margin-left: 50%;
-  }
-  .col-lg-offset-5 {
-    margin-left: 41.66666667%;
-  }
-  .col-lg-offset-4 {
-    margin-left: 33.33333333%;
-  }
-  .col-lg-offset-3 {
-    margin-left: 25%;
-  }
-  .col-lg-offset-2 {
-    margin-left: 16.66666667%;
-  }
-  .col-lg-offset-1 {
-    margin-left: 8.33333333%;
-  }
-  .col-lg-offset-0 {
-    margin-left: 0%;
-  }
-}
-table {
-  background-color: transparent;
-}
-caption {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  color: #b4bcc2;
-  text-align: left;
-}
-th {
-  text-align: left;
-}
-.table {
-  width: 100%;
-  max-width: 100%;
-  margin-bottom: 21px;
-}
-.table > thead > tr > th,
-.table > tbody > tr > th,
-.table > tfoot > tr > th,
-.table > thead > tr > td,
-.table > tbody > tr > td,
-.table > tfoot > tr > td {
-  padding: 8px;
-  line-height: 1.42857143;
-  vertical-align: top;
-  border-top: 1px solid #ecf0f1;
-}
-.table > thead > tr > th {
-  vertical-align: bottom;
-  border-bottom: 2px solid #ecf0f1;
-}
-.table > caption + thead > tr:first-child > th,
-.table > colgroup + thead > tr:first-child > th,
-.table > thead:first-child > tr:first-child > th,
-.table > caption + thead > tr:first-child > td,
-.table > colgroup + thead > tr:first-child > td,
-.table > thead:first-child > tr:first-child > td {
-  border-top: 0;
-}
-.table > tbody + tbody {
-  border-top: 2px solid #ecf0f1;
-}
-.table .table {
-  background-color: #ffffff;
-}
-.table-condensed > thead > tr > th,
-.table-condensed > tbody > tr > th,
-.table-condensed > tfoot > tr > th,
-.table-condensed > thead > tr > td,
-.table-condensed > tbody > tr > td,
-.table-condensed > tfoot > tr > td {
-  padding: 5px;
-}
-.table-bordered {
-  border: 1px solid #ecf0f1;
-}
-.table-bordered > thead > tr > th,
-.table-bordered > tbody > tr > th,
-.table-bordered > tfoot > tr > th,
-.table-bordered > thead > tr > td,
-.table-bordered > tbody > tr > td,
-.table-bordered > tfoot > tr > td {
-  border: 1px solid #ecf0f1;
-}
-.table-bordered > thead > tr > th,
-.table-bordered > thead > tr > td {
-  border-bottom-width: 2px;
-}
-.table-striped > tbody > tr:nth-of-type(odd) {
-  background-color: #f9f9f9;
-}
-.table-hover > tbody > tr:hover {
-  background-color: #ecf0f1;
-}
-table col[class*="col-"] {
-  position: static;
-  float: none;
-  display: table-column;
-}
-table td[class*="col-"],
-table th[class*="col-"] {
-  position: static;
-  float: none;
-  display: table-cell;
-}
-.table > thead > tr > td.active,
-.table > tbody > tr > td.active,
-.table > tfoot > tr > td.active,
-.table > thead > tr > th.active,
-.table > tbody > tr > th.active,
-.table > tfoot > tr > th.active,
-.table > thead > tr.active > td,
-.table > tbody > tr.active > td,
-.table > tfoot > tr.active > td,
-.table > thead > tr.active > th,
-.table > tbody > tr.active > th,
-.table > tfoot > tr.active > th {
-  background-color: #ecf0f1;
-}
-.table-hover > tbody > tr > td.active:hover,
-.table-hover > tbody > tr > th.active:hover,
-.table-hover > tbody > tr.active:hover > td,
-.table-hover > tbody > tr:hover > .active,
-.table-hover > tbody > tr.active:hover > th {
-  background-color: #dde4e6;
-}
-.table > thead > tr > td.success,
-.table > tbody > tr > td.success,
-.table > tfoot > tr > td.success,
-.table > thead > tr > th.success,
-.table > tbody > tr > th.success,
-.table > tfoot > tr > th.success,
-.table > thead > tr.success > td,
-.table > tbody > tr.success > td,
-.table > tfoot > tr.success > td,
-.table > thead > tr.success > th,
-.table > tbody > tr.success > th,
-.table > tfoot > tr.success > th {
-  background-color: #18bc9c;
-}
-.table-hover > tbody > tr > td.success:hover,
-.table-hover > tbody > tr > th.success:hover,
-.table-hover > tbody > tr.success:hover > td,
-.table-hover > tbody > tr:hover > .success,
-.table-hover > tbody > tr.success:hover > th {
-  background-color: #15a589;
-}
-.table > thead > tr > td.info,
-.table > tbody > tr > td.info,
-.table > tfoot > tr > td.info,
-.table > thead > tr > th.info,
-.table > tbody > tr > th.info,
-.table > tfoot > tr > th.info,
-.table > thead > tr.info > td,
-.table > tbody > tr.info > td,
-.table > tfoot > tr.info > td,
-.table > thead > tr.info > th,
-.table > tbody > tr.info > th,
-.table > tfoot > tr.info > th {
-  background-color: #3498db;
-}
-.table-hover > tbody > tr > td.info:hover,
-.table-hover > tbody > tr > th.info:hover,
-.table-hover > tbody > tr.info:hover > td,
-.table-hover > tbody > tr:hover > .info,
-.table-hover > tbody > tr.info:hover > th {
-  background-color: #258cd1;
-}
-.table > thead > tr > td.warning,
-.table > tbody > tr > td.warning,
-.table > tfoot > tr > td.warning,
-.table > thead > tr > th.warning,
-.table > tbody > tr > th.warning,
-.table > tfoot > tr > th.warning,
-.table > thead > tr.warning > td,
-.table > tbody > tr.warning > td,
-.table > tfoot > tr.warning > td,
-.table > thead > tr.warning > th,
-.table > tbody > tr.warning > th,
-.table > tfoot > tr.warning > th {
-  background-color: #f39c12;
-}
-.table-hover > tbody > tr > td.warning:hover,
-.table-hover > tbody > tr > th.warning:hover,
-.table-hover > tbody > tr.warning:hover > td,
-.table-hover > tbody > tr:hover > .warning,
-.table-hover > tbody > tr.warning:hover > th {
-  background-color: #e08e0b;
-}
-.table > thead > tr > td.danger,
-.table > tbody > tr > td.danger,
-.table > tfoot > tr > td.danger,
-.table > thead > tr > th.danger,
-.table > tbody > tr > th.danger,
-.table > tfoot > tr > th.danger,
-.table > thead > tr.danger > td,
-.table > tbody > tr.danger > td,
-.table > tfoot > tr.danger > td,
-.table > thead > tr.danger > th,
-.table > tbody > tr.danger > th,
-.table > tfoot > tr.danger > th {
-  background-color: #e74c3c;
-}
-.table-hover > tbody > tr > td.danger:hover,
-.table-hover > tbody > tr > th.danger:hover,
-.table-hover > tbody > tr.danger:hover > td,
-.table-hover > tbody > tr:hover > .danger,
-.table-hover > tbody > tr.danger:hover > th {
-  background-color: #e43725;
-}
-.table-responsive {
-  overflow-x: auto;
-  min-height: 0.01%;
-}
-@media screen and (max-width: 767px) {
-  .table-responsive {
-    width: 100%;
-    margin-bottom: 15.75px;
-    overflow-y: hidden;
-    -ms-overflow-style: -ms-autohiding-scrollbar;
-    border: 1px solid #ecf0f1;
-  }
-  .table-responsive > .table {
-    margin-bottom: 0;
-  }
-  .table-responsive > .table > thead > tr > th,
-  .table-responsive > .table > tbody > tr > th,
-  .table-responsive > .table > tfoot > tr > th,
-  .table-responsive > .table > thead > tr > td,
-  .table-responsive > .table > tbody > tr > td,
-  .table-responsive > .table > tfoot > tr > td {
-    white-space: nowrap;
-  }
-  .table-responsive > .table-bordered {
-    border: 0;
-  }
-  .table-responsive > .table-bordered > thead > tr > th:first-child,
-  .table-responsive > .table-bordered > tbody > tr > th:first-child,
-  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
-  .table-responsive > .table-bordered > thead > tr > td:first-child,
-  .table-responsive > .table-bordered > tbody > tr > td:first-child,
-  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
-    border-left: 0;
-  }
-  .table-responsive > .table-bordered > thead > tr > th:last-child,
-  .table-responsive > .table-bordered > tbody > tr > th:last-child,
-  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
-  .table-responsive > .table-bordered > thead > tr > td:last-child,
-  .table-responsive > .table-bordered > tbody > tr > td:last-child,
-  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
-    border-right: 0;
-  }
-  .table-responsive > .table-bordered > tbody > tr:last-child > th,
-  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
-  .table-responsive > .table-bordered > tbody > tr:last-child > td,
-  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
-    border-bottom: 0;
-  }
-}
-fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0;
-  min-width: 0;
-}
-legend {
-  display: block;
-  width: 100%;
-  padding: 0;
-  margin-bottom: 21px;
-  font-size: 22.5px;
-  line-height: inherit;
-  color: #2c3e50;
-  border: 0;
-  border-bottom: 1px solid transparent;
-}
-label {
-  display: inline-block;
-  max-width: 100%;
-  margin-bottom: 5px;
-  font-weight: bold;
-}
-input[type="search"] {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-input[type="radio"],
-input[type="checkbox"] {
-  margin: 4px 0 0;
-  margin-top: 1px \9;
-  line-height: normal;
-}
-input[type="file"] {
-  display: block;
-}
-input[type="range"] {
-  display: block;
-  width: 100%;
-}
-select[multiple],
-select[size] {
-  height: auto;
-}
-input[type="file"]:focus,
-input[type="radio"]:focus,
-input[type="checkbox"]:focus {
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-output {
-  display: block;
-  padding-top: 11px;
-  font-size: 15px;
-  line-height: 1.42857143;
-  color: #2c3e50;
-}
-.form-control {
-  display: block;
-  width: 100%;
-  height: 45px;
-  padding: 10px 15px;
-  font-size: 15px;
-  line-height: 1.42857143;
-  color: #2c3e50;
-  background-color: #ffffff;
-  background-image: none;
-  border: 1px solid #dce4ec;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-  -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
-}
-.form-control:focus {
-  border-color: #2c3e50;
-  outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(44, 62, 80, 0.6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(44, 62, 80, 0.6);
-}
-.form-control::-moz-placeholder {
-  color: #acb6c0;
-  opacity: 1;
-}
-.form-control:-ms-input-placeholder {
-  color: #acb6c0;
-}
-.form-control::-webkit-input-placeholder {
-  color: #acb6c0;
-}
-.form-control::-ms-expand {
-  border: 0;
-  background-color: transparent;
-}
-.form-control[disabled],
-.form-control[readonly],
-fieldset[disabled] .form-control {
-  background-color: #ecf0f1;
-  opacity: 1;
-}
-.form-control[disabled],
-fieldset[disabled] .form-control {
-  cursor: not-allowed;
-}
-textarea.form-control {
-  height: auto;
-}
-input[type="search"] {
-  -webkit-appearance: none;
-}
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  input[type="date"].form-control,
-  input[type="time"].form-control,
-  input[type="datetime-local"].form-control,
-  input[type="month"].form-control {
-    line-height: 45px;
-  }
-  input[type="date"].input-sm,
-  input[type="time"].input-sm,
-  input[type="datetime-local"].input-sm,
-  input[type="month"].input-sm,
-  .input-group-sm input[type="date"],
-  .input-group-sm input[type="time"],
-  .input-group-sm input[type="datetime-local"],
-  .input-group-sm input[type="month"] {
-    line-height: 35px;
-  }
-  input[type="date"].input-lg,
-  input[type="time"].input-lg,
-  input[type="datetime-local"].input-lg,
-  input[type="month"].input-lg,
-  .input-group-lg input[type="date"],
-  .input-group-lg input[type="time"],
-  .input-group-lg input[type="datetime-local"],
-  .input-group-lg input[type="month"] {
-    line-height: 66px;
-  }
-}
-.form-group {
-  margin-bottom: 15px;
-}
-.radio,
-.checkbox {
-  position: relative;
-  display: block;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-.radio label,
-.checkbox label {
-  min-height: 21px;
-  padding-left: 20px;
-  margin-bottom: 0;
-  font-weight: normal;
-  cursor: pointer;
-}
-.radio input[type="radio"],
-.radio-inline input[type="radio"],
-.checkbox input[type="checkbox"],
-.checkbox-inline input[type="checkbox"] {
-  position: absolute;
-  margin-left: -20px;
-  margin-top: 4px \9;
-}
-.radio + .radio,
-.checkbox + .checkbox {
-  margin-top: -5px;
-}
-.radio-inline,
-.checkbox-inline {
-  position: relative;
-  display: inline-block;
-  padding-left: 20px;
-  margin-bottom: 0;
-  vertical-align: middle;
-  font-weight: normal;
-  cursor: pointer;
-}
-.radio-inline + .radio-inline,
-.checkbox-inline + .checkbox-inline {
-  margin-top: 0;
-  margin-left: 10px;
-}
-input[type="radio"][disabled],
-input[type="checkbox"][disabled],
-input[type="radio"].disabled,
-input[type="checkbox"].disabled,
-fieldset[disabled] input[type="radio"],
-fieldset[disabled] input[type="checkbox"] {
-  cursor: not-allowed;
-}
-.radio-inline.disabled,
-.checkbox-inline.disabled,
-fieldset[disabled] .radio-inline,
-fieldset[disabled] .checkbox-inline {
-  cursor: not-allowed;
-}
-.radio.disabled label,
-.checkbox.disabled label,
-fieldset[disabled] .radio label,
-fieldset[disabled] .checkbox label {
-  cursor: not-allowed;
-}
-.form-control-static {
-  padding-top: 11px;
-  padding-bottom: 11px;
-  margin-bottom: 0;
-  min-height: 36px;
-}
-.form-control-static.input-lg,
-.form-control-static.input-sm {
-  padding-left: 0;
-  padding-right: 0;
-}
-.input-sm {
-  height: 35px;
-  padding: 6px 9px;
-  font-size: 13px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-select.input-sm {
-  height: 35px;
-  line-height: 35px;
-}
-textarea.input-sm,
-select[multiple].input-sm {
-  height: auto;
-}
-.form-group-sm .form-control {
-  height: 35px;
-  padding: 6px 9px;
-  font-size: 13px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-.form-group-sm select.form-control {
-  height: 35px;
-  line-height: 35px;
-}
-.form-group-sm textarea.form-control,
-.form-group-sm select[multiple].form-control {
-  height: auto;
-}
-.form-group-sm .form-control-static {
-  height: 35px;
-  min-height: 34px;
-  padding: 7px 9px;
-  font-size: 13px;
-  line-height: 1.5;
-}
-.input-lg {
-  height: 66px;
-  padding: 18px 27px;
-  font-size: 19px;
-  line-height: 1.3333333;
-  border-radius: 6px;
-}
-select.input-lg {
-  height: 66px;
-  line-height: 66px;
-}
-textarea.input-lg,
-select[multiple].input-lg {
-  height: auto;
-}
-.form-group-lg .form-control {
-  height: 66px;
-  padding: 18px 27px;
-  font-size: 19px;
-  line-height: 1.3333333;
-  border-radius: 6px;
-}
-.form-group-lg select.form-control {
-  height: 66px;
-  line-height: 66px;
-}
-.form-group-lg textarea.form-control,
-.form-group-lg select[multiple].form-control {
-  height: auto;
-}
-.form-group-lg .form-control-static {
-  height: 66px;
-  min-height: 40px;
-  padding: 19px 27px;
-  font-size: 19px;
-  line-height: 1.3333333;
-}
-.has-feedback {
-  position: relative;
-}
-.has-feedback .form-control {
-  padding-right: 56.25px;
-}
-.form-control-feedback {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 2;
-  display: block;
-  width: 45px;
-  height: 45px;
-  line-height: 45px;
-  text-align: center;
-  pointer-events: none;
-}
-.input-lg + .form-control-feedback,
-.input-group-lg + .form-control-feedback,
-.form-group-lg .form-control + .form-control-feedback {
-  width: 66px;
-  height: 66px;
-  line-height: 66px;
-}
-.input-sm + .form-control-feedback,
-.input-group-sm + .form-control-feedback,
-.form-group-sm .form-control + .form-control-feedback {
-  width: 35px;
-  height: 35px;
-  line-height: 35px;
-}
-.has-success .help-block,
-.has-success .control-label,
-.has-success .radio,
-.has-success .checkbox,
-.has-success .radio-inline,
-.has-success .checkbox-inline,
-.has-success.radio label,
-.has-success.checkbox label,
-.has-success.radio-inline label,
-.has-success.checkbox-inline label {
-  color: #ffffff;
-}
-.has-success .form-control {
-  border-color: #ffffff;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-.has-success .form-control:focus {
-  border-color: #e6e6e6;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
-}
-.has-success .input-group-addon {
-  color: #ffffff;
-  border-color: #ffffff;
-  background-color: #18bc9c;
-}
-.has-success .form-control-feedback {
-  color: #ffffff;
-}
-.has-warning .help-block,
-.has-warning .control-label,
-.has-warning .radio,
-.has-warning .checkbox,
-.has-warning .radio-inline,
-.has-warning .checkbox-inline,
-.has-warning.radio label,
-.has-warning.checkbox label,
-.has-warning.radio-inline label,
-.has-warning.checkbox-inline label {
-  color: #ffffff;
-}
-.has-warning .form-control {
-  border-color: #ffffff;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-.has-warning .form-control:focus {
-  border-color: #e6e6e6;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
-}
-.has-warning .input-group-addon {
-  color: #ffffff;
-  border-color: #ffffff;
-  background-color: #f39c12;
-}
-.has-warning .form-control-feedback {
-  color: #ffffff;
-}
-.has-error .help-block,
-.has-error .control-label,
-.has-error .radio,
-.has-error .checkbox,
-.has-error .radio-inline,
-.has-error .checkbox-inline,
-.has-error.radio label,
-.has-error.checkbox label,
-.has-error.radio-inline label,
-.has-error.checkbox-inline label {
-  color: #ffffff;
-}
-.has-error .form-control {
-  border-color: #ffffff;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-.has-error .form-control:focus {
-  border-color: #e6e6e6;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffffff;
-}
-.has-error .input-group-addon {
-  color: #ffffff;
-  border-color: #ffffff;
-  background-color: #e74c3c;
-}
-.has-error .form-control-feedback {
-  color: #ffffff;
-}
-.has-feedback label ~ .form-control-feedback {
-  top: 26px;
-}
-.has-feedback label.sr-only ~ .form-control-feedback {
-  top: 0;
-}
-.help-block {
-  display: block;
-  margin-top: 5px;
-  margin-bottom: 10px;
-  color: #597ea2;
-}
-@media (min-width: 768px) {
-  .form-inline .form-group {
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-  .form-inline .form-control {
-    display: inline-block;
-    width: auto;
-    vertical-align: middle;
-  }
-  .form-inline .form-control-static {
-    display: inline-block;
-  }
-  .form-inline .input-group {
-    display: inline-table;
-    vertical-align: middle;
-  }
-  .form-inline .input-group .input-group-addon,
-  .form-inline .input-group .input-group-btn,
-  .form-inline .input-group .form-control {
-    width: auto;
-  }
-  .form-inline .input-group > .form-control {
-    width: 100%;
-  }
-  .form-inline .control-label {
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-  .form-inline .radio,
-  .form-inline .checkbox {
-    display: inline-block;
-    margin-top: 0;
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-  .form-inline .radio label,
-  .form-inline .checkbox label {
-    padding-left: 0;
-  }
-  .form-inline .radio input[type="radio"],
-  .form-inline .checkbox input[type="checkbox"] {
-    position: relative;
-    margin-left: 0;
-  }
-  .form-inline .has-feedback .form-control-feedback {
-    top: 0;
-  }
-}
-.form-horizontal .radio,
-.form-horizontal .checkbox,
-.form-horizontal .radio-inline,
-.form-horizontal .checkbox-inline {
-  margin-top: 0;
-  margin-bottom: 0;
-  padding-top: 11px;
-}
-.form-horizontal .radio,
-.form-horizontal .checkbox {
-  min-height: 32px;
-}
-.form-horizontal .form-group {
-  margin-left: -15px;
-  margin-right: -15px;
-}
-@media (min-width: 768px) {
-  .form-horizontal .control-label {
-    text-align: right;
-    margin-bottom: 0;
-    padding-top: 11px;
-  }
-}
-.form-horizontal .has-feedback .form-control-feedback {
-  right: 15px;
-}
-@media (min-width: 768px) {
-  .form-horizontal .form-group-lg .control-label {
-    padding-top: 19px;
-    font-size: 19px;
-  }
-}
-@media (min-width: 768px) {
-  .form-horizontal .form-group-sm .control-label {
-    padding-top: 7px;
-    font-size: 13px;
-  }
-}
-.btn {
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: normal;
-  text-align: center;
-  vertical-align: middle;
-  -ms-touch-action: manipulation;
-      touch-action: manipulation;
-  cursor: pointer;
-  background-image: none;
-  border: 1px solid transparent;
-  white-space: nowrap;
-  padding: 10px 15px;
-  font-size: 15px;
-  line-height: 1.42857143;
-  border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.btn:focus,
-.btn:active:focus,
-.btn.active:focus,
-.btn.focus,
-.btn:active.focus,
-.btn.active.focus {
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-.btn:hover,
-.btn:focus,
-.btn.focus {
-  color: #ffffff;
-  text-decoration: none;
-}
-.btn:active,
-.btn.active {
-  outline: 0;
-  background-image: none;
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-}
-.btn.disabled,
-.btn[disabled],
-fieldset[disabled] .btn {
-  cursor: not-allowed;
-  opacity: 0.65;
-  filter: alpha(opacity=65);
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-a.btn.disabled,
-fieldset[disabled] a.btn {
-  pointer-events: none;
-}
-.btn-default {
-  color: #ffffff;
-  background-color: #95a5a6;
-  border-color: #95a5a6;
-}
-.btn-default:focus,
-.btn-default.focus {
-  color: #ffffff;
-  background-color: #798d8f;
-  border-color: #566566;
-}
-.btn-default:hover {
-  color: #ffffff;
-  background-color: #798d8f;
-  border-color: #74898a;
-}
-.btn-default:active,
-.btn-default.active,
-.open > .dropdown-toggle.btn-default {
-  color: #ffffff;
-  background-color: #798d8f;
-  border-color: #74898a;
-}
-.btn-default:active:hover,
-.btn-default.active:hover,
-.open > .dropdown-toggle.btn-default:hover,
-.btn-default:active:focus,
-.btn-default.active:focus,
-.open > .dropdown-toggle.btn-default:focus,
-.btn-default:active.focus,
-.btn-default.active.focus,
-.open > .dropdown-toggle.btn-default.focus {
-  color: #ffffff;
-  background-color: #687b7c;
-  border-color: #566566;
-}
-.btn-default:active,
-.btn-default.active,
-.open > .dropdown-toggle.btn-default {
-  background-image: none;
-}
-.btn-default.disabled:hover,
-.btn-default[disabled]:hover,
-fieldset[disabled] .btn-default:hover,
-.btn-default.disabled:focus,
-.btn-default[disabled]:focus,
-fieldset[disabled] .btn-default:focus,
-.btn-default.disabled.focus,
-.btn-default[disabled].focus,
-fieldset[disabled] .btn-default.focus {
-  background-color: #95a5a6;
-  border-color: #95a5a6;
-}
-.btn-default .badge {
-  color: #95a5a6;
-  background-color: #ffffff;
-}
-.btn-primary {
-  color: #ffffff;
-  background-color: #2c3e50;
-  border-color: #2c3e50;
-}
-.btn-primary:focus,
-.btn-primary.focus {
-  color: #ffffff;
-  background-color: #1a242f;
-  border-color: #000000;
-}
-.btn-primary:hover {
-  color: #ffffff;
-  background-color: #1a242f;
-  border-color: #161f29;
-}
-.btn-primary:active,
-.btn-primary.active,
-.open > .dropdown-toggle.btn-primary {
-  color: #ffffff;
-  background-color: #1a242f;
-  border-color: #161f29;
-}
-.btn-primary:active:hover,
-.btn-primary.active:hover,
-.open > .dropdown-toggle.btn-primary:hover,
-.btn-primary:active:focus,
-.btn-primary.active:focus,
-.open > .dropdown-toggle.btn-primary:focus,
-.btn-primary:active.focus,
-.btn-primary.active.focus,
-.open > .dropdown-toggle.btn-primary.focus {
-  color: #ffffff;
-  background-color: #0d1318;
-  border-color: #000000;
-}
-.btn-primary:active,
-.btn-primary.active,
-.open > .dropdown-toggle.btn-primary {
-  background-image: none;
-}
-.btn-primary.disabled:hover,
-.btn-primary[disabled]:hover,
-fieldset[disabled] .btn-primary:hover,
-.btn-primary.disabled:focus,
-.btn-primary[disabled]:focus,
-fieldset[disabled] .btn-primary:focus,
-.btn-primary.disabled.focus,
-.btn-primary[disabled].focus,
-fieldset[disabled] .btn-primary.focus {
-  background-color: #2c3e50;
-  border-color: #2c3e50;
-}
-.btn-primary .badge {
-  color: #2c3e50;
-  background-color: #ffffff;
-}
-.btn-success {
-  color: #ffffff;
-  background-color: #18bc9c;
-  border-color: #18bc9c;
-}
-.btn-success:focus,
-.btn-success.focus {
-  color: #ffffff;
-  background-color: #128f76;
-  border-color: #0a4b3e;
-}
-.btn-success:hover {
-  color: #ffffff;
-  background-color: #128f76;
-  border-color: #11866f;
-}
-.btn-success:active,
-.btn-success.active,
-.open > .dropdown-toggle.btn-success {
-  color: #ffffff;
-  background-color: #128f76;
-  border-color: #11866f;
-}
-.btn-success:active:hover,
-.btn-success.active:hover,
-.open > .dropdown-toggle.btn-success:hover,
-.btn-success:active:focus,
-.btn-success.active:focus,
-.open > .dropdown-toggle.btn-success:focus,
-.btn-success:active.focus,
-.btn-success.active.focus,
-.open > .dropdown-toggle.btn-success.focus {
-  color: #ffffff;
-  background-color: #0e6f5c;
-  border-color: #0a4b3e;
-}
-.btn-success:active,
-.btn-success.active,
-.open > .dropdown-toggle.btn-success {
-  background-image: none;
-}
-.btn-success.disabled:hover,
-.btn-success[disabled]:hover,
-fieldset[disabled] .btn-success:hover,
-.btn-success.disabled:focus,
-.btn-success[disabled]:focus,
-fieldset[disabled] .btn-success:focus,
-.btn-success.disabled.focus,
-.btn-success[disabled].focus,
-fieldset[disabled] .btn-success.focus {
-  background-color: #18bc9c;
-  border-color: #18bc9c;
-}
-.btn-success .badge {
-  color: #18bc9c;
-  background-color: #ffffff;
-}
-.btn-info {
-  color: #ffffff;
-  background-color: #3498db;
-  border-color: #3498db;
-}
-.btn-info:focus,
-.btn-info.focus {
-  color: #ffffff;
-  background-color: #217dbb;
-  border-color: #16527a;
-}
-.btn-info:hover {
-  color: #ffffff;
-  background-color: #217dbb;
-  border-color: #2077b2;
-}
-.btn-info:active,
-.btn-info.active,
-.open > .dropdown-toggle.btn-info {
-  color: #ffffff;
-  background-color: #217dbb;
-  border-color: #2077b2;
-}
-.btn-info:active:hover,
-.btn-info.active:hover,
-.open > .dropdown-toggle.btn-info:hover,
-.btn-info:active:focus,
-.btn-info.active:focus,
-.open > .dropdown-toggle.btn-info:focus,
-.btn-info:active.focus,
-.btn-info.active.focus,
-.open > .dropdown-toggle.btn-info.focus {
-  color: #ffffff;
-  background-color: #1c699d;
-  border-color: #16527a;
-}
-.btn-info:active,
-.btn-info.active,
-.open > .dropdown-toggle.btn-info {
-  background-image: none;
-}
-.btn-info.disabled:hover,
-.btn-info[disabled]:hover,
-fieldset[disabled] .btn-info:hover,
-.btn-info.disabled:focus,
-.btn-info[disabled]:focus,
-fieldset[disabled] .btn-info:focus,
-.btn-info.disabled.focus,
-.btn-info[disabled].focus,
-fieldset[disabled] .btn-info.focus {
-  background-color: #3498db;
-  border-color: #3498db;
-}
-.btn-info .badge {
-  color: #3498db;
-  background-color: #ffffff;
-}
-.btn-warning {
-  color: #ffffff;
-  background-color: #f39c12;
-  border-color: #f39c12;
-}
-.btn-warning:focus,
-.btn-warning.focus {
-  color: #ffffff;
-  background-color: #c87f0a;
-  border-color: #7f5006;
-}
-.btn-warning:hover {
-  color: #ffffff;
-  background-color: #c87f0a;
-  border-color: #be780a;
-}
-.btn-warning:active,
-.btn-warning.active,
-.open > .dropdown-toggle.btn-warning {
-  color: #ffffff;
-  background-color: #c87f0a;
-  border-color: #be780a;
-}
-.btn-warning:active:hover,
-.btn-warning.active:hover,
-.open > .dropdown-toggle.btn-warning:hover,
-.btn-warning:active:focus,
-.btn-warning.active:focus,
-.open > .dropdown-toggle.btn-warning:focus,
-.btn-warning:active.focus,
-.btn-warning.active.focus,
-.open > .dropdown-toggle.btn-warning.focus {
-  color: #ffffff;
-  background-color: #a66908;
-  border-color: #7f5006;
-}
-.btn-warning:active,
-.btn-warning.active,
-.open > .dropdown-toggle.btn-warning {
-  background-image: none;
-}
-.btn-warning.disabled:hover,
-.btn-warning[disabled]:hover,
-fieldset[disabled] .btn-warning:hover,
-.btn-warning.disabled:focus,
-.btn-warning[disabled]:focus,
-fieldset[disabled] .btn-warning:focus,
-.btn-warning.disabled.focus,
-.btn-warning[disabled].focus,
-fieldset[disabled] .btn-warning.focus {
-  background-color: #f39c12;
-  border-color: #f39c12;
-}
-.btn-warning .badge {
-  color: #f39c12;
-  background-color: #ffffff;
-}
-.btn-danger {
-  color: #ffffff;
-  background-color: #e74c3c;
-  border-color: #e74c3c;
-}
-.btn-danger:focus,
-.btn-danger.focus {
-  color: #ffffff;
-  background-color: #d62c1a;
-  border-color: #921e12;
-}
-.btn-danger:hover {
-  color: #ffffff;
-  background-color: #d62c1a;
-  border-color: #cd2a19;
-}
-.btn-danger:active,
-.btn-danger.active,
-.open > .dropdown-toggle.btn-danger {
-  color: #ffffff;
-  background-color: #d62c1a;
-  border-color: #cd2a19;
-}
-.btn-danger:active:hover,
-.btn-danger.active:hover,
-.open > .dropdown-toggle.btn-danger:hover,
-.btn-danger:active:focus,
-.btn-danger.active:focus,
-.open > .dropdown-toggle.btn-danger:focus,
-.btn-danger:active.focus,
-.btn-danger.active.focus,
-.open > .dropdown-toggle.btn-danger.focus {
-  color: #ffffff;
-  background-color: #b62516;
-  border-color: #921e12;
-}
-.btn-danger:active,
-.btn-danger.active,
-.open > .dropdown-toggle.btn-danger {
-  background-image: none;
-}
-.btn-danger.disabled:hover,
-.btn-danger[disabled]:hover,
-fieldset[disabled] .btn-danger:hover,
-.btn-danger.disabled:focus,
-.btn-danger[disabled]:focus,
-fieldset[disabled] .btn-danger:focus,
-.btn-danger.disabled.focus,
-.btn-danger[disabled].focus,
-fieldset[disabled] .btn-danger.focus {
-  background-color: #e74c3c;
-  border-color: #e74c3c;
-}
-.btn-danger .badge {
-  color: #e74c3c;
-  background-color: #ffffff;
-}
-.btn-link {
-  color: #18bc9c;
-  font-weight: normal;
-  border-radius: 0;
-}
-.btn-link,
-.btn-link:active,
-.btn-link.active,
-.btn-link[disabled],
-fieldset[disabled] .btn-link {
-  background-color: transparent;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.btn-link,
-.btn-link:hover,
-.btn-link:focus,
-.btn-link:active {
-  border-color: transparent;
-}
-.btn-link:hover,
-.btn-link:focus {
-  color: #18bc9c;
-  text-decoration: underline;
-  background-color: transparent;
-}
-.btn-link[disabled]:hover,
-fieldset[disabled] .btn-link:hover,
-.btn-link[disabled]:focus,
-fieldset[disabled] .btn-link:focus {
-  color: #b4bcc2;
-  text-decoration: none;
-}
-.btn-lg,
-.btn-group-lg > .btn {
-  padding: 18px 27px;
-  font-size: 19px;
-  line-height: 1.3333333;
-  border-radius: 6px;
-}
-.btn-sm,
-.btn-group-sm > .btn {
-  padding: 6px 9px;
-  font-size: 13px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-.btn-xs,
-.btn-group-xs > .btn {
-  padding: 1px 5px;
-  font-size: 13px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-.btn-block {
-  display: block;
-  width: 100%;
-}
-.btn-block + .btn-block {
-  margin-top: 5px;
-}
-input[type="submit"].btn-block,
-input[type="reset"].btn-block,
-input[type="button"].btn-block {
-  width: 100%;
-}
-.fade {
-  opacity: 0;
-  -webkit-transition: opacity 0.15s linear;
-  -o-transition: opacity 0.15s linear;
-  transition: opacity 0.15s linear;
-}
-.fade.in {
-  opacity: 1;
-}
-.collapse {
-  display: none;
-}
-.collapse.in {
-  display: block;
-}
-tr.collapse.in {
-  display: table-row;
-}
-tbody.collapse.in {
-  display: table-row-group;
-}
-.collapsing {
-  position: relative;
-  height: 0;
-  overflow: hidden;
-  -webkit-transition-property: height, visibility;
-  -o-transition-property: height, visibility;
-     transition-property: height, visibility;
-  -webkit-transition-duration: 0.35s;
-  -o-transition-duration: 0.35s;
-     transition-duration: 0.35s;
-  -webkit-transition-timing-function: ease;
-  -o-transition-timing-function: ease;
-     transition-timing-function: ease;
-}
-.caret {
-  display: inline-block;
-  width: 0;
-  height: 0;
-  margin-left: 2px;
-  vertical-align: middle;
-  border-top: 4px dashed;
-  border-top: 4px solid \9;
-  border-right: 4px solid transparent;
-  border-left: 4px solid transparent;
-}
-.dropup,
-.dropdown {
-  position: relative;
-}
-.dropdown-toggle:focus {
-  outline: 0;
-}
-.dropdown-menu {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 1000;
-  display: none;
-  float: left;
-  min-width: 160px;
-  padding: 5px 0;
-  margin: 2px 0 0;
-  list-style: none;
-  font-size: 15px;
-  text-align: left;
-  background-color: #ffffff;
-  border: 1px solid #cccccc;
-  border: 1px solid rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
-  -webkit-background-clip: padding-box;
-          background-clip: padding-box;
-}
-.dropdown-menu.pull-right {
-  right: 0;
-  left: auto;
-}
-.dropdown-menu .divider {
-  height: 1px;
-  margin: 9.5px 0;
-  overflow: hidden;
-  background-color: #e5e5e5;
-}
-.dropdown-menu > li > a {
-  display: block;
-  padding: 3px 20px;
-  clear: both;
-  font-weight: normal;
-  line-height: 1.42857143;
-  color: #7b8a8b;
-  white-space: nowrap;
-}
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus {
-  text-decoration: none;
-  color: #ffffff;
-  background-color: #2c3e50;
-}
-.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:hover,
-.dropdown-menu > .active > a:focus {
-  color: #ffffff;
-  text-decoration: none;
-  outline: 0;
-  background-color: #2c3e50;
-}
-.dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
-  color: #b4bcc2;
-}
-.dropdown-menu > .disabled > a:hover,
-.dropdown-menu > .disabled > a:focus {
-  text-decoration: none;
-  background-color: transparent;
-  background-image: none;
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  cursor: not-allowed;
-}
-.open > .dropdown-menu {
-  display: block;
-}
-.open > a {
-  outline: 0;
-}
-.dropdown-menu-right {
-  left: auto;
-  right: 0;
-}
-.dropdown-menu-left {
-  left: 0;
-  right: auto;
-}
-.dropdown-header {
-  display: block;
-  padding: 3px 20px;
-  font-size: 13px;
-  line-height: 1.42857143;
-  color: #b4bcc2;
-  white-space: nowrap;
-}
-.dropdown-backdrop {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  z-index: 990;
-}
-.pull-right > .dropdown-menu {
-  right: 0;
-  left: auto;
-}
-.dropup .caret,
-.navbar-fixed-bottom .dropdown .caret {
-  border-top: 0;
-  border-bottom: 4px dashed;
-  border-bottom: 4px solid \9;
-  content: "";
-}
-.dropup .dropdown-menu,
-.navbar-fixed-bottom .dropdown .dropdown-menu {
-  top: auto;
-  bottom: 100%;
-  margin-bottom: 2px;
-}
-@media (min-width: 768px) {
-  .navbar-right .dropdown-menu {
-    left: auto;
-    right: 0;
-  }
-  .navbar-right .dropdown-menu-left {
-    left: 0;
-    right: auto;
-  }
-}
-.btn-group,
-.btn-group-vertical {
-  position: relative;
-  display: inline-block;
-  vertical-align: middle;
-}
-.btn-group > .btn,
-.btn-group-vertical > .btn {
-  position: relative;
-  float: left;
-}
-.btn-group > .btn:hover,
-.btn-group-vertical > .btn:hover,
-.btn-group > .btn:focus,
-.btn-group-vertical > .btn:focus,
-.btn-group > .btn:active,
-.btn-group-vertical > .btn:active,
-.btn-group > .btn.active,
-.btn-group-vertical > .btn.active {
-  z-index: 2;
-}
-.btn-group .btn + .btn,
-.btn-group .btn + .btn-group,
-.btn-group .btn-group + .btn,
-.btn-group .btn-group + .btn-group {
-  margin-left: -1px;
-}
-.btn-toolbar {
-  margin-left: -5px;
-}
-.btn-toolbar .btn,
-.btn-toolbar .btn-group,
-.btn-toolbar .input-group {
-  float: left;
-}
-.btn-toolbar > .btn,
-.btn-toolbar > .btn-group,
-.btn-toolbar > .input-group {
-  margin-left: 5px;
-}
-.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
-  border-radius: 0;
-}
-.btn-group > .btn:first-child {
-  margin-left: 0;
-}
-.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-.btn-group > .btn:last-child:not(:first-child),
-.btn-group > .dropdown-toggle:not(:first-child) {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}
-.btn-group > .btn-group {
-  float: left;
-}
-.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
-  border-radius: 0;
-}
-.btn-group > .btn-group:first-child:not(:last-child) > .btn:last-child,
-.btn-group > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-.btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}
-.btn-group .dropdown-toggle:active,
-.btn-group.open .dropdown-toggle {
-  outline: 0;
-}
-.btn-group > .btn + .dropdown-toggle {
-  padding-left: 8px;
-  padding-right: 8px;
-}
-.btn-group > .btn-lg + .dropdown-toggle {
-  padding-left: 12px;
-  padding-right: 12px;
-}
-.btn-group.open .dropdown-toggle {
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-}
-.btn-group.open .dropdown-toggle.btn-link {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.btn .caret {
-  margin-left: 0;
-}
-.btn-lg .caret {
-  border-width: 5px 5px 0;
-  border-bottom-width: 0;
-}
-.dropup .btn-lg .caret {
-  border-width: 0 5px 5px;
-}
-.btn-group-vertical > .btn,
-.btn-group-vertical > .btn-group,
-.btn-group-vertical > .btn-group > .btn {
-  display: block;
-  float: none;
-  width: 100%;
-  max-width: 100%;
-}
-.btn-group-vertical > .btn-group > .btn {
-  float: none;
-}
-.btn-group-vertical > .btn + .btn,
-.btn-group-vertical > .btn + .btn-group,
-.btn-group-vertical > .btn-group + .btn,
-.btn-group-vertical > .btn-group + .btn-group {
-  margin-top: -1px;
-  margin-left: 0;
-}
-.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
-  border-radius: 0;
-}
-.btn-group-vertical > .btn:first-child:not(:last-child) {
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.btn-group-vertical > .btn:last-child:not(:first-child) {
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
-  border-radius: 0;
-}
-.btn-group-vertical > .btn-group:first-child:not(:last-child) > .btn:last-child,
-.btn-group-vertical > .btn-group:first-child:not(:last-child) > .dropdown-toggle {
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child {
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-}
-.btn-group-justified {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: separate;
-}
-.btn-group-justified > .btn,
-.btn-group-justified > .btn-group {
-  float: none;
-  display: table-cell;
-  width: 1%;
-}
-.btn-group-justified > .btn-group .btn {
-  width: 100%;
-}
-.btn-group-justified > .btn-group .dropdown-menu {
-  left: auto;
-}
-[data-toggle="buttons"] > .btn input[type="radio"],
-[data-toggle="buttons"] > .btn-group > .btn input[type="radio"],
-[data-toggle="buttons"] > .btn input[type="checkbox"],
-[data-toggle="buttons"] > .btn-group > .btn input[type="checkbox"] {
-  position: absolute;
-  clip: rect(0, 0, 0, 0);
-  pointer-events: none;
-}
-.input-group {
-  position: relative;
-  display: table;
-  border-collapse: separate;
-}
-.input-group[class*="col-"] {
-  float: none;
-  padding-left: 0;
-  padding-right: 0;
-}
-.input-group .form-control {
-  position: relative;
-  z-index: 2;
-  float: left;
-  width: 100%;
-  margin-bottom: 0;
-}
-.input-group .form-control:focus {
-  z-index: 3;
-}
-.input-group-lg > .form-control,
-.input-group-lg > .input-group-addon,
-.input-group-lg > .input-group-btn > .btn {
-  height: 66px;
-  padding: 18px 27px;
-  font-size: 19px;
-  line-height: 1.3333333;
-  border-radius: 6px;
-}
-select.input-group-lg > .form-control,
-select.input-group-lg > .input-group-addon,
-select.input-group-lg > .input-group-btn > .btn {
-  height: 66px;
-  line-height: 66px;
-}
-textarea.input-group-lg > .form-control,
-textarea.input-group-lg > .input-group-addon,
-textarea.input-group-lg > .input-group-btn > .btn,
-select[multiple].input-group-lg > .form-control,
-select[multiple].input-group-lg > .input-group-addon,
-select[multiple].input-group-lg > .input-group-btn > .btn {
-  height: auto;
-}
-.input-group-sm > .form-control,
-.input-group-sm > .input-group-addon,
-.input-group-sm > .input-group-btn > .btn {
-  height: 35px;
-  padding: 6px 9px;
-  font-size: 13px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-select.input-group-sm > .form-control,
-select.input-group-sm > .input-group-addon,
-select.input-group-sm > .input-group-btn > .btn {
-  height: 35px;
-  line-height: 35px;
-}
-textarea.input-group-sm > .form-control,
-textarea.input-group-sm > .input-group-addon,
-textarea.input-group-sm > .input-group-btn > .btn,
-select[multiple].input-group-sm > .form-control,
-select[multiple].input-group-sm > .input-group-addon,
-select[multiple].input-group-sm > .input-group-btn > .btn {
-  height: auto;
-}
-.input-group-addon,
-.input-group-btn,
-.input-group .form-control {
-  display: table-cell;
-}
-.input-group-addon:not(:first-child):not(:last-child),
-.input-group-btn:not(:first-child):not(:last-child),
-.input-group .form-control:not(:first-child):not(:last-child) {
-  border-radius: 0;
-}
-.input-group-addon,
-.input-group-btn {
-  width: 1%;
-  white-space: nowrap;
-  vertical-align: middle;
-}
-.input-group-addon {
-  padding: 10px 15px;
-  font-size: 15px;
-  font-weight: normal;
-  line-height: 1;
-  color: #2c3e50;
-  text-align: center;
-  background-color: #ecf0f1;
-  border: 1px solid #dce4ec;
-  border-radius: 4px;
-}
-.input-group-addon.input-sm {
-  padding: 6px 9px;
-  font-size: 13px;
-  border-radius: 3px;
-}
-.input-group-addon.input-lg {
-  padding: 18px 27px;
-  font-size: 19px;
-  border-radius: 6px;
-}
-.input-group-addon input[type="radio"],
-.input-group-addon input[type="checkbox"] {
-  margin-top: 0;
-}
-.input-group .form-control:first-child,
-.input-group-addon:first-child,
-.input-group-btn:first-child > .btn,
-.input-group-btn:first-child > .btn-group > .btn,
-.input-group-btn:first-child > .dropdown-toggle,
-.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
-.input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-}
-.input-group-addon:first-child {
-  border-right: 0;
-}
-.input-group .form-control:last-child,
-.input-group-addon:last-child,
-.input-group-btn:last-child > .btn,
-.input-group-btn:last-child > .btn-group > .btn,
-.input-group-btn:last-child > .dropdown-toggle,
-.input-group-btn:first-child > .btn:not(:first-child),
-.input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
-}
-.input-group-addon:last-child {
-  border-left: 0;
-}
-.input-group-btn {
-  position: relative;
-  font-size: 0;
-  white-space: nowrap;
-}
-.input-group-btn > .btn {
-  position: relative;
-}
-.input-group-btn > .btn + .btn {
-  margin-left: -1px;
-}
-.input-group-btn > .btn:hover,
-.input-group-btn > .btn:focus,
-.input-group-btn > .btn:active {
-  z-index: 2;
-}
-.input-group-btn:first-child > .btn,
-.input-group-btn:first-child > .btn-group {
-  margin-right: -1px;
-}
-.input-group-btn:last-child > .btn,
-.input-group-btn:last-child > .btn-group {
-  z-index: 2;
-  margin-left: -1px;
-}
-.nav {
-  margin-bottom: 0;
-  padding-left: 0;
-  list-style: none;
-}
-.nav > li {
-  position: relative;
-  display: block;
-}
-.nav > li > a {
-  position: relative;
-  display: block;
-  padding: 10px 15px;
-}
-.nav > li > a:hover,
-.nav > li > a:focus {
-  text-decoration: none;
-  background-color: #ecf0f1;
-}
-.nav > li.disabled > a {
-  color: #b4bcc2;
-}
-.nav > li.disabled > a:hover,
-.nav > li.disabled > a:focus {
-  color: #b4bcc2;
-  text-decoration: none;
-  background-color: transparent;
-  cursor: not-allowed;
-}
-.nav .open > a,
-.nav .open > a:hover,
-.nav .open > a:focus {
-  background-color: #ecf0f1;
-  border-color: #18bc9c;
-}
-.nav .nav-divider {
-  height: 1px;
-  margin: 9.5px 0;
-  overflow: hidden;
-  background-color: #e5e5e5;
-}
-.nav > li > a > img {
-  max-width: none;
-}
-.nav-tabs {
-  border-bottom: 1px solid #ecf0f1;
-}
-.nav-tabs > li {
-  float: left;
-  margin-bottom: -1px;
-}
-.nav-tabs > li > a {
-  margin-right: 2px;
-  line-height: 1.42857143;
-  border: 1px solid transparent;
-  border-radius: 4px 4px 0 0;
-}
-.nav-tabs > li > a:hover {
-  border-color: #ecf0f1 #ecf0f1 #ecf0f1;
-}
-.nav-tabs > li.active > a,
-.nav-tabs > li.active > a:hover,
-.nav-tabs > li.active > a:focus {
-  color: #2c3e50;
-  background-color: #ffffff;
-  border: 1px solid #ecf0f1;
-  border-bottom-color: transparent;
-  cursor: default;
-}
-.nav-tabs.nav-justified {
-  width: 100%;
-  border-bottom: 0;
-}
-.nav-tabs.nav-justified > li {
-  float: none;
-}
-.nav-tabs.nav-justified > li > a {
-  text-align: center;
-  margin-bottom: 5px;
-}
-.nav-tabs.nav-justified > .dropdown .dropdown-menu {
-  top: auto;
-  left: auto;
-}
-@media (min-width: 768px) {
-  .nav-tabs.nav-justified > li {
-    display: table-cell;
-    width: 1%;
-  }
-  .nav-tabs.nav-justified > li > a {
-    margin-bottom: 0;
-  }
-}
-.nav-tabs.nav-justified > li > a {
-  margin-right: 0;
-  border-radius: 4px;
-}
-.nav-tabs.nav-justified > .active > a,
-.nav-tabs.nav-justified > .active > a:hover,
-.nav-tabs.nav-justified > .active > a:focus {
-  border: 1px solid #ecf0f1;
-}
-@media (min-width: 768px) {
-  .nav-tabs.nav-justified > li > a {
-    border-bottom: 1px solid #ecf0f1;
-    border-radius: 4px 4px 0 0;
-  }
-  .nav-tabs.nav-justified > .active > a,
-  .nav-tabs.nav-justified > .active > a:hover,
-  .nav-tabs.nav-justified > .active > a:focus {
-    border-bottom-color: #ffffff;
-  }
-}
-.nav-pills > li {
-  float: left;
-}
-.nav-pills > li > a {
-  border-radius: 4px;
-}
-.nav-pills > li + li {
-  margin-left: 2px;
-}
-.nav-pills > li.active > a,
-.nav-pills > li.active > a:hover,
-.nav-pills > li.active > a:focus {
-  color: #ffffff;
-  background-color: #2c3e50;
-}
-.nav-stacked > li {
-  float: none;
-}
-.nav-stacked > li + li {
-  margin-top: 2px;
-  margin-left: 0;
-}
-.nav-justified {
-  width: 100%;
-}
-.nav-justified > li {
-  float: none;
-}
-.nav-justified > li > a {
-  text-align: center;
-  margin-bottom: 5px;
-}
-.nav-justified > .dropdown .dropdown-menu {
-  top: auto;
-  left: auto;
-}
-@media (min-width: 768px) {
-  .nav-justified > li {
-    display: table-cell;
-    width: 1%;
-  }
-  .nav-justified > li > a {
-    margin-bottom: 0;
-  }
-}
-.nav-tabs-justified {
-  border-bottom: 0;
-}
-.nav-tabs-justified > li > a {
-  margin-right: 0;
-  border-radius: 4px;
-}
-.nav-tabs-justified > .active > a,
-.nav-tabs-justified > .active > a:hover,
-.nav-tabs-justified > .active > a:focus {
-  border: 1px solid #ecf0f1;
-}
-@media (min-width: 768px) {
-  .nav-tabs-justified > li > a {
-    border-bottom: 1px solid #ecf0f1;
-    border-radius: 4px 4px 0 0;
-  }
-  .nav-tabs-justified > .active > a,
-  .nav-tabs-justified > .active > a:hover,
-  .nav-tabs-justified > .active > a:focus {
-    border-bottom-color: #ffffff;
-  }
-}
-.tab-content > .tab-pane {
-  display: none;
-}
-.tab-content > .active {
-  display: block;
-}
-.nav-tabs .dropdown-menu {
-  margin-top: -1px;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-}
-.navbar {
-  position: relative;
-  min-height: 60px;
-  margin-bottom: 21px;
-  border: 1px solid transparent;
-}
-@media (min-width: 768px) {
-  .navbar {
-    border-radius: 4px;
-  }
-}
-@media (min-width: 768px) {
-  .navbar-header {
-    float: left;
-  }
-}
-.navbar-collapse {
-  overflow-x: visible;
-  padding-right: 15px;
-  padding-left: 15px;
-  border-top: 1px solid transparent;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  -webkit-overflow-scrolling: touch;
-}
-.navbar-collapse.in {
-  overflow-y: auto;
-}
-@media (min-width: 768px) {
-  .navbar-collapse {
-    width: auto;
-    border-top: 0;
-    -webkit-box-shadow: none;
-            box-shadow: none;
-  }
-  .navbar-collapse.collapse {
-    display: block !important;
-    height: auto !important;
-    padding-bottom: 0;
-    overflow: visible !important;
-  }
-  .navbar-collapse.in {
-    overflow-y: visible;
-  }
-  .navbar-fixed-top .navbar-collapse,
-  .navbar-static-top .navbar-collapse,
-  .navbar-fixed-bottom .navbar-collapse {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
-.navbar-fixed-top .navbar-collapse,
-.navbar-fixed-bottom .navbar-collapse {
-  max-height: 340px;
-}
-@media (max-device-width: 480px) and (orientation: landscape) {
-  .navbar-fixed-top .navbar-collapse,
-  .navbar-fixed-bottom .navbar-collapse {
-    max-height: 200px;
-  }
-}
-.container > .navbar-header,
-.container-fluid > .navbar-header,
-.container > .navbar-collapse,
-.container-fluid > .navbar-collapse {
-  margin-right: -15px;
-  margin-left: -15px;
-}
-@media (min-width: 768px) {
-  .container > .navbar-header,
-  .container-fluid > .navbar-header,
-  .container > .navbar-collapse,
-  .container-fluid > .navbar-collapse {
-    margin-right: 0;
-    margin-left: 0;
-  }
-}
-.navbar-static-top {
-  z-index: 1000;
-  border-width: 0 0 1px;
-}
-@media (min-width: 768px) {
-  .navbar-static-top {
-    border-radius: 0;
-  }
-}
-.navbar-fixed-top,
-.navbar-fixed-bottom {
-  position: fixed;
-  right: 0;
-  left: 0;
-  z-index: 1030;
-}
-@media (min-width: 768px) {
-  .navbar-fixed-top,
-  .navbar-fixed-bottom {
-    border-radius: 0;
-  }
-}
-.navbar-fixed-top {
-  top: 0;
-  border-width: 0 0 1px;
-}
-.navbar-fixed-bottom {
-  bottom: 0;
-  margin-bottom: 0;
-  border-width: 1px 0 0;
-}
-.navbar-brand {
-  float: left;
-  padding: 19.5px 15px;
-  font-size: 19px;
-  line-height: 21px;
-  height: 60px;
-}
-.navbar-brand:hover,
-.navbar-brand:focus {
-  text-decoration: none;
-}
-.navbar-brand > img {
-  display: block;
-}
-@media (min-width: 768px) {
-  .navbar > .container .navbar-brand,
-  .navbar > .container-fluid .navbar-brand {
-    margin-left: -15px;
-  }
-}
-.navbar-toggle {
-  position: relative;
-  float: right;
-  margin-right: 15px;
-  padding: 9px 10px;
-  margin-top: 13px;
-  margin-bottom: 13px;
-  background-color: transparent;
-  background-image: none;
-  border: 1px solid transparent;
-  border-radius: 4px;
-}
-.navbar-toggle:focus {
-  outline: 0;
-}
-.navbar-toggle .icon-bar {
-  display: block;
-  width: 22px;
-  height: 2px;
-  border-radius: 1px;
-}
-.navbar-toggle .icon-bar + .icon-bar {
-  margin-top: 4px;
-}
-@media (min-width: 768px) {
-  .navbar-toggle {
-    display: none;
-  }
-}
-.navbar-nav {
-  margin: 9.75px -15px;
-}
-.navbar-nav > li > a {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  line-height: 21px;
-}
-@media (max-width: 767px) {
-  .navbar-nav .open .dropdown-menu {
-    position: static;
-    float: none;
-    width: auto;
-    margin-top: 0;
-    background-color: transparent;
-    border: 0;
-    -webkit-box-shadow: none;
-            box-shadow: none;
-  }
-  .navbar-nav .open .dropdown-menu > li > a,
-  .navbar-nav .open .dropdown-menu .dropdown-header {
-    padding: 5px 15px 5px 25px;
-  }
-  .navbar-nav .open .dropdown-menu > li > a {
-    line-height: 21px;
-  }
-  .navbar-nav .open .dropdown-menu > li > a:hover,
-  .navbar-nav .open .dropdown-menu > li > a:focus {
-    background-image: none;
-  }
-}
-@media (min-width: 768px) {
-  .navbar-nav {
-    float: left;
-    margin: 0;
-  }
-  .navbar-nav > li {
-    float: left;
-  }
-  .navbar-nav > li > a {
-    padding-top: 19.5px;
-    padding-bottom: 19.5px;
-  }
-}
-.navbar-form {
-  margin-left: -15px;
-  margin-right: -15px;
-  padding: 10px 15px;
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid transparent;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-  margin-top: 7.5px;
-  margin-bottom: 7.5px;
-}
-@media (min-width: 768px) {
-  .navbar-form .form-group {
-    display: inline-block;
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-  .navbar-form .form-control {
-    display: inline-block;
-    width: auto;
-    vertical-align: middle;
-  }
-  .navbar-form .form-control-static {
-    display: inline-block;
-  }
-  .navbar-form .input-group {
-    display: inline-table;
-    vertical-align: middle;
-  }
-  .navbar-form .input-group .input-group-addon,
-  .navbar-form .input-group .input-group-btn,
-  .navbar-form .input-group .form-control {
-    width: auto;
-  }
-  .navbar-form .input-group > .form-control {
-    width: 100%;
-  }
-  .navbar-form .control-label {
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-  .navbar-form .radio,
-  .navbar-form .checkbox {
-    display: inline-block;
-    margin-top: 0;
-    margin-bottom: 0;
-    vertical-align: middle;
-  }
-  .navbar-form .radio label,
-  .navbar-form .checkbox label {
-    padding-left: 0;
-  }
-  .navbar-form .radio input[type="radio"],
-  .navbar-form .checkbox input[type="checkbox"] {
-    position: relative;
-    margin-left: 0;
-  }
-  .navbar-form .has-feedback .form-control-feedback {
-    top: 0;
-  }
-}
-@media (max-width: 767px) {
-  .navbar-form .form-group {
-    margin-bottom: 5px;
-  }
-  .navbar-form .form-group:last-child {
-    margin-bottom: 0;
-  }
-}
-@media (min-width: 768px) {
-  .navbar-form {
-    width: auto;
-    border: 0;
-    margin-left: 0;
-    margin-right: 0;
-    padding-top: 0;
-    padding-bottom: 0;
-    -webkit-box-shadow: none;
-    box-shadow: none;
-  }
-}
-.navbar-nav > li > .dropdown-menu {
-  margin-top: 0;
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-}
-.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
-  margin-bottom: 0;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-bottom-right-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.navbar-btn {
-  margin-top: 7.5px;
-  margin-bottom: 7.5px;
-}
-.navbar-btn.btn-sm {
-  margin-top: 12.5px;
-  margin-bottom: 12.5px;
-}
-.navbar-btn.btn-xs {
-  margin-top: 19px;
-  margin-bottom: 19px;
-}
-.navbar-text {
-  margin-top: 19.5px;
-  margin-bottom: 19.5px;
-}
-@media (min-width: 768px) {
-  .navbar-text {
-    float: left;
-    margin-left: 15px;
-    margin-right: 15px;
-  }
-}
-@media (min-width: 768px) {
-  .navbar-left {
-    float: left !important;
-  }
-  .navbar-right {
-    float: right !important;
-    margin-right: -15px;
-  }
-  .navbar-right ~ .navbar-right {
-    margin-right: 0;
-  }
-}
-.navbar-default {
-  background-color: #2c3e50;
-  border-color: transparent;
-}
-.navbar-default .navbar-brand {
-  color: #ffffff;
-}
-.navbar-default .navbar-brand:hover,
-.navbar-default .navbar-brand:focus {
-  color: #18bc9c;
-  background-color: transparent;
-}
-.navbar-default .navbar-text {
-  color: #ffffff;
-}
-.navbar-default .navbar-nav > li > a {
-  color: #ffffff;
-}
-.navbar-default .navbar-nav > li > a:hover,
-.navbar-default .navbar-nav > li > a:focus {
-  color: #18bc9c;
-  background-color: transparent;
-}
-.navbar-default .navbar-nav > .active > a,
-.navbar-default .navbar-nav > .active > a:hover,
-.navbar-default .navbar-nav > .active > a:focus {
-  color: #ffffff;
-  background-color: #1a242f;
-}
-.navbar-default .navbar-nav > .disabled > a,
-.navbar-default .navbar-nav > .disabled > a:hover,
-.navbar-default .navbar-nav > .disabled > a:focus {
-  color: #cccccc;
-  background-color: transparent;
-}
-.navbar-default .navbar-toggle {
-  border-color: #1a242f;
-}
-.navbar-default .navbar-toggle:hover,
-.navbar-default .navbar-toggle:focus {
-  background-color: #1a242f;
-}
-.navbar-default .navbar-toggle .icon-bar {
-  background-color: #ffffff;
-}
-.navbar-default .navbar-collapse,
-.navbar-default .navbar-form {
-  border-color: transparent;
-}
-.navbar-default .navbar-nav > .open > a,
-.navbar-default .navbar-nav > .open > a:hover,
-.navbar-default .navbar-nav > .open > a:focus {
-  background-color: #1a242f;
-  color: #ffffff;
-}
-@media (max-width: 767px) {
-  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
-    color: #ffffff;
-  }
-  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
-  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #18bc9c;
-    background-color: transparent;
-  }
-  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
-  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
-  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
-    color: #ffffff;
-    background-color: #1a242f;
-  }
-  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
-  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
-  .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
-    color: #cccccc;
-    background-color: transparent;
-  }
-}
-.navbar-default .navbar-link {
-  color: #ffffff;
-}
-.navbar-default .navbar-link:hover {
-  color: #18bc9c;
-}
-.navbar-default .btn-link {
-  color: #ffffff;
-}
-.navbar-default .btn-link:hover,
-.navbar-default .btn-link:focus {
-  color: #18bc9c;
-}
-.navbar-default .btn-link[disabled]:hover,
-fieldset[disabled] .navbar-default .btn-link:hover,
-.navbar-default .btn-link[disabled]:focus,
-fieldset[disabled] .navbar-default .btn-link:focus {
-  color: #cccccc;
-}
-.navbar-inverse {
-  background-color: #18bc9c;
-  border-color: transparent;
-}
-.navbar-inverse .navbar-brand {
-  color: #ffffff;
-}
-.navbar-inverse .navbar-brand:hover,
-.navbar-inverse .navbar-brand:focus {
-  color: #2c3e50;
-  background-color: transparent;
-}
-.navbar-inverse .navbar-text {
-  color: #ffffff;
-}
-.navbar-inverse .navbar-nav > li > a {
-  color: #ffffff;
-}
-.navbar-inverse .navbar-nav > li > a:hover,
-.navbar-inverse .navbar-nav > li > a:focus {
-  color: #2c3e50;
-  background-color: transparent;
-}
-.navbar-inverse .navbar-nav > .active > a,
-.navbar-inverse .navbar-nav > .active > a:hover,
-.navbar-inverse .navbar-nav > .active > a:focus {
-  color: #ffffff;
-  background-color: #15a589;
-}
-.navbar-inverse .navbar-nav > .disabled > a,
-.navbar-inverse .navbar-nav > .disabled > a:hover,
-.navbar-inverse .navbar-nav > .disabled > a:focus {
-  color: #cccccc;
-  background-color: transparent;
-}
-.navbar-inverse .navbar-toggle {
-  border-color: #128f76;
-}
-.navbar-inverse .navbar-toggle:hover,
-.navbar-inverse .navbar-toggle:focus {
-  background-color: #128f76;
-}
-.navbar-inverse .navbar-toggle .icon-bar {
-  background-color: #ffffff;
-}
-.navbar-inverse .navbar-collapse,
-.navbar-inverse .navbar-form {
-  border-color: #149c82;
-}
-.navbar-inverse .navbar-nav > .open > a,
-.navbar-inverse .navbar-nav > .open > a:hover,
-.navbar-inverse .navbar-nav > .open > a:focus {
-  background-color: #15a589;
-  color: #ffffff;
-}
-@media (max-width: 767px) {
-  .navbar-inverse .navbar-nav .open .dropdown-menu > .dropdown-header {
-    border-color: transparent;
-  }
-  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
-    background-color: transparent;
-  }
-  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
-    color: #ffffff;
-  }
-  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
-  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #2c3e50;
-    background-color: transparent;
-  }
-  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a,
-  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover,
-  .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus {
-    color: #ffffff;
-    background-color: #15a589;
-  }
-  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a,
-  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:hover,
-  .navbar-inverse .navbar-nav .open .dropdown-menu > .disabled > a:focus {
-    color: #cccccc;
-    background-color: transparent;
-  }
-}
-.navbar-inverse .navbar-link {
-  color: #ffffff;
-}
-.navbar-inverse .navbar-link:hover {
-  color: #2c3e50;
-}
-.navbar-inverse .btn-link {
-  color: #ffffff;
-}
-.navbar-inverse .btn-link:hover,
-.navbar-inverse .btn-link:focus {
-  color: #2c3e50;
-}
-.navbar-inverse .btn-link[disabled]:hover,
-fieldset[disabled] .navbar-inverse .btn-link:hover,
-.navbar-inverse .btn-link[disabled]:focus,
-fieldset[disabled] .navbar-inverse .btn-link:focus {
-  color: #cccccc;
-}
-.breadcrumb {
-  padding: 8px 15px;
-  margin-bottom: 21px;
-  list-style: none;
-  background-color: #ecf0f1;
-  border-radius: 4px;
-}
-.breadcrumb > li {
-  display: inline-block;
-}
-.breadcrumb > li + li:before {
-  content: "/\00a0";
-  padding: 0 5px;
-  color: #cccccc;
-}
-.breadcrumb > .active {
-  color: #95a5a6;
-}
-.pagination {
-  display: inline-block;
-  padding-left: 0;
-  margin: 21px 0;
-  border-radius: 4px;
-}
-.pagination > li {
-  display: inline;
-}
-.pagination > li > a,
-.pagination > li > span {
-  position: relative;
-  float: left;
-  padding: 10px 15px;
-  line-height: 1.42857143;
-  text-decoration: none;
-  color: #ffffff;
-  background-color: #18bc9c;
-  border: 1px solid transparent;
-  margin-left: -1px;
-}
-.pagination > li:first-child > a,
-.pagination > li:first-child > span {
-  margin-left: 0;
-  border-bottom-left-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.pagination > li:last-child > a,
-.pagination > li:last-child > span {
-  border-bottom-right-radius: 4px;
-  border-top-right-radius: 4px;
-}
-.pagination > li > a:hover,
-.pagination > li > span:hover,
-.pagination > li > a:focus,
-.pagination > li > span:focus {
-  z-index: 2;
-  color: #ffffff;
-  background-color: #0f7864;
-  border-color: transparent;
-}
-.pagination > .active > a,
-.pagination > .active > span,
-.pagination > .active > a:hover,
-.pagination > .active > span:hover,
-.pagination > .active > a:focus,
-.pagination > .active > span:focus {
-  z-index: 3;
-  color: #ffffff;
-  background-color: #0f7864;
-  border-color: transparent;
-  cursor: default;
-}
-.pagination > .disabled > span,
-.pagination > .disabled > span:hover,
-.pagination > .disabled > span:focus,
-.pagination > .disabled > a,
-.pagination > .disabled > a:hover,
-.pagination > .disabled > a:focus {
-  color: #ecf0f1;
-  background-color: #3be6c4;
-  border-color: transparent;
-  cursor: not-allowed;
-}
-.pagination-lg > li > a,
-.pagination-lg > li > span {
-  padding: 18px 27px;
-  font-size: 19px;
-  line-height: 1.3333333;
-}
-.pagination-lg > li:first-child > a,
-.pagination-lg > li:first-child > span {
-  border-bottom-left-radius: 6px;
-  border-top-left-radius: 6px;
-}
-.pagination-lg > li:last-child > a,
-.pagination-lg > li:last-child > span {
-  border-bottom-right-radius: 6px;
-  border-top-right-radius: 6px;
-}
-.pagination-sm > li > a,
-.pagination-sm > li > span {
-  padding: 6px 9px;
-  font-size: 13px;
-  line-height: 1.5;
-}
-.pagination-sm > li:first-child > a,
-.pagination-sm > li:first-child > span {
-  border-bottom-left-radius: 3px;
-  border-top-left-radius: 3px;
-}
-.pagination-sm > li:last-child > a,
-.pagination-sm > li:last-child > span {
-  border-bottom-right-radius: 3px;
-  border-top-right-radius: 3px;
-}
-.pager {
-  padding-left: 0;
-  margin: 21px 0;
-  list-style: none;
-  text-align: center;
-}
-.pager li {
-  display: inline;
-}
-.pager li > a,
-.pager li > span {
-  display: inline-block;
-  padding: 5px 14px;
-  background-color: #18bc9c;
-  border: 1px solid transparent;
-  border-radius: 15px;
-}
-.pager li > a:hover,
-.pager li > a:focus {
-  text-decoration: none;
-  background-color: #0f7864;
-}
-.pager .next > a,
-.pager .next > span {
-  float: right;
-}
-.pager .previous > a,
-.pager .previous > span {
-  float: left;
-}
-.pager .disabled > a,
-.pager .disabled > a:hover,
-.pager .disabled > a:focus,
-.pager .disabled > span {
-  color: #ffffff;
-  background-color: #18bc9c;
-  cursor: not-allowed;
-}
-.label {
-  display: inline;
-  padding: .2em .6em .3em;
-  font-size: 75%;
-  font-weight: bold;
-  line-height: 1;
-  color: #ffffff;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: baseline;
-  border-radius: .25em;
-}
-a.label:hover,
-a.label:focus {
-  color: #ffffff;
-  text-decoration: none;
-  cursor: pointer;
-}
-.label:empty {
-  display: none;
-}
-.btn .label {
-  position: relative;
-  top: -1px;
-}
-.label-default {
-  background-color: #95a5a6;
-}
-.label-default[href]:hover,
-.label-default[href]:focus {
-  background-color: #798d8f;
-}
-.label-primary {
-  background-color: #2c3e50;
-}
-.label-primary[href]:hover,
-.label-primary[href]:focus {
-  background-color: #1a242f;
-}
-.label-success {
-  background-color: #18bc9c;
-}
-.label-success[href]:hover,
-.label-success[href]:focus {
-  background-color: #128f76;
-}
-.label-info {
-  background-color: #3498db;
-}
-.label-info[href]:hover,
-.label-info[href]:focus {
-  background-color: #217dbb;
-}
-.label-warning {
-  background-color: #f39c12;
-}
-.label-warning[href]:hover,
-.label-warning[href]:focus {
-  background-color: #c87f0a;
-}
-.label-danger {
-  background-color: #e74c3c;
-}
-.label-danger[href]:hover,
-.label-danger[href]:focus {
-  background-color: #d62c1a;
-}
-.badge {
-  display: inline-block;
-  min-width: 10px;
-  padding: 3px 7px;
-  font-size: 13px;
-  font-weight: bold;
-  color: #ffffff;
-  line-height: 1;
-  vertical-align: middle;
-  white-space: nowrap;
-  text-align: center;
-  background-color: #2c3e50;
-  border-radius: 10px;
-}
-.badge:empty {
-  display: none;
-}
-.btn .badge {
-  position: relative;
-  top: -1px;
-}
-.btn-xs .badge,
-.btn-group-xs > .btn .badge {
-  top: 0;
-  padding: 1px 5px;
-}
-a.badge:hover,
-a.badge:focus {
-  color: #ffffff;
-  text-decoration: none;
-  cursor: pointer;
-}
-.list-group-item.active > .badge,
-.nav-pills > .active > a > .badge {
-  color: #2c3e50;
-  background-color: #ffffff;
-}
-.list-group-item > .badge {
-  float: right;
-}
-.list-group-item > .badge + .badge {
-  margin-right: 5px;
-}
-.nav-pills > li > a > .badge {
-  margin-left: 3px;
-}
-.jumbotron {
-  padding-top: 30px;
-  padding-bottom: 30px;
-  margin-bottom: 30px;
-  color: inherit;
-  background-color: #ecf0f1;
-}
-.jumbotron h1,
-.jumbotron .h1 {
-  color: inherit;
-}
-.jumbotron p {
-  margin-bottom: 15px;
-  font-size: 23px;
-  font-weight: 200;
-}
-.jumbotron > hr {
-  border-top-color: #cfd9db;
-}
-.container .jumbotron,
-.container-fluid .jumbotron {
-  border-radius: 6px;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-.jumbotron .container {
-  max-width: 100%;
-}
-@media screen and (min-width: 768px) {
-  .jumbotron {
-    padding-top: 48px;
-    padding-bottom: 48px;
-  }
-  .container .jumbotron,
-  .container-fluid .jumbotron {
-    padding-left: 60px;
-    padding-right: 60px;
-  }
-  .jumbotron h1,
-  .jumbotron .h1 {
-    font-size: 68px;
-  }
-}
-.thumbnail {
-  display: block;
-  padding: 4px;
-  margin-bottom: 21px;
-  line-height: 1.42857143;
-  background-color: #ffffff;
-  border: 1px solid #ecf0f1;
-  border-radius: 4px;
-  -webkit-transition: border 0.2s ease-in-out;
-  -o-transition: border 0.2s ease-in-out;
-  transition: border 0.2s ease-in-out;
-}
-.thumbnail > img,
-.thumbnail a > img {
-  margin-left: auto;
-  margin-right: auto;
-}
-a.thumbnail:hover,
-a.thumbnail:focus,
-a.thumbnail.active {
-  border-color: #18bc9c;
-}
-.thumbnail .caption {
-  padding: 9px;
-  color: #2c3e50;
-}
-.alert {
-  padding: 15px;
-  margin-bottom: 21px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-}
-.alert h4 {
-  margin-top: 0;
-  color: inherit;
-}
-.alert .alert-link {
-  font-weight: bold;
-}
-.alert > p,
-.alert > ul {
-  margin-bottom: 0;
-}
-.alert > p + p {
-  margin-top: 5px;
-}
-.alert-dismissable,
-.alert-dismissible {
-  padding-right: 35px;
-}
-.alert-dismissable .close,
-.alert-dismissible .close {
-  position: relative;
-  top: -2px;
-  right: -21px;
-  color: inherit;
-}
-.alert-success {
-  background-color: #18bc9c;
-  border-color: #18bc9c;
-  color: #ffffff;
-}
-.alert-success hr {
-  border-top-color: #15a589;
-}
-.alert-success .alert-link {
-  color: #e6e6e6;
-}
-.alert-info {
-  background-color: #3498db;
-  border-color: #3498db;
-  color: #ffffff;
-}
-.alert-info hr {
-  border-top-color: #258cd1;
-}
-.alert-info .alert-link {
-  color: #e6e6e6;
-}
-.alert-warning {
-  background-color: #f39c12;
-  border-color: #f39c12;
-  color: #ffffff;
-}
-.alert-warning hr {
-  border-top-color: #e08e0b;
-}
-.alert-warning .alert-link {
-  color: #e6e6e6;
-}
-.alert-danger {
-  background-color: #e74c3c;
-  border-color: #e74c3c;
-  color: #ffffff;
-}
-.alert-danger hr {
-  border-top-color: #e43725;
-}
-.alert-danger .alert-link {
-  color: #e6e6e6;
-}
-@-webkit-keyframes progress-bar-stripes {
-  from {
-    background-position: 40px 0;
-  }
-  to {
-    background-position: 0 0;
-  }
-}
-@-o-keyframes progress-bar-stripes {
-  from {
-    background-position: 40px 0;
-  }
-  to {
-    background-position: 0 0;
-  }
-}
-@keyframes progress-bar-stripes {
-  from {
-    background-position: 40px 0;
-  }
-  to {
-    background-position: 0 0;
-  }
-}
-.progress {
-  overflow: hidden;
-  height: 21px;
-  margin-bottom: 21px;
-  background-color: #ecf0f1;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
-}
-.progress-bar {
-  float: left;
-  width: 0%;
-  height: 100%;
-  font-size: 13px;
-  line-height: 21px;
-  color: #ffffff;
-  text-align: center;
-  background-color: #2c3e50;
-  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  -webkit-transition: width 0.6s ease;
-  -o-transition: width 0.6s ease;
-  transition: width 0.6s ease;
-}
-.progress-striped .progress-bar,
-.progress-bar-striped {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  -webkit-background-size: 40px 40px;
-          background-size: 40px 40px;
-}
-.progress.active .progress-bar,
-.progress-bar.active {
-  -webkit-animation: progress-bar-stripes 2s linear infinite;
-  -o-animation: progress-bar-stripes 2s linear infinite;
-  animation: progress-bar-stripes 2s linear infinite;
-}
-.progress-bar-success {
-  background-color: #18bc9c;
-}
-.progress-striped .progress-bar-success {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.progress-bar-info {
-  background-color: #3498db;
-}
-.progress-striped .progress-bar-info {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.progress-bar-warning {
-  background-color: #f39c12;
-}
-.progress-striped .progress-bar-warning {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.progress-bar-danger {
-  background-color: #e74c3c;
-}
-.progress-striped .progress-bar-danger {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
-}
-.media {
-  margin-top: 15px;
-}
-.media:first-child {
-  margin-top: 0;
-}
-.media,
-.media-body {
-  zoom: 1;
-  overflow: hidden;
-}
-.media-body {
-  width: 10000px;
-}
-.media-object {
-  display: block;
-}
-.media-object.img-thumbnail {
-  max-width: none;
-}
-.media-right,
-.media > .pull-right {
-  padding-left: 10px;
-}
-.media-left,
-.media > .pull-left {
-  padding-right: 10px;
-}
-.media-left,
-.media-right,
-.media-body {
-  display: table-cell;
-  vertical-align: top;
-}
-.media-middle {
-  vertical-align: middle;
-}
-.media-bottom {
-  vertical-align: bottom;
-}
-.media-heading {
-  margin-top: 0;
-  margin-bottom: 5px;
-}
-.media-list {
-  padding-left: 0;
-  list-style: none;
-}
-.list-group {
-  margin-bottom: 20px;
-  padding-left: 0;
-}
-.list-group-item {
-  position: relative;
-  display: block;
-  padding: 10px 15px;
-  margin-bottom: -1px;
-  background-color: #ffffff;
-  border: 1px solid #ecf0f1;
-}
-.list-group-item:first-child {
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.list-group-item:last-child {
-  margin-bottom: 0;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}
-a.list-group-item,
-button.list-group-item {
-  color: #555555;
-}
-a.list-group-item .list-group-item-heading,
-button.list-group-item .list-group-item-heading {
-  color: #333333;
-}
-a.list-group-item:hover,
-button.list-group-item:hover,
-a.list-group-item:focus,
-button.list-group-item:focus {
-  text-decoration: none;
-  color: #555555;
-  background-color: #ecf0f1;
-}
-button.list-group-item {
-  width: 100%;
-  text-align: left;
-}
-.list-group-item.disabled,
-.list-group-item.disabled:hover,
-.list-group-item.disabled:focus {
-  background-color: #ecf0f1;
-  color: #b4bcc2;
-  cursor: not-allowed;
-}
-.list-group-item.disabled .list-group-item-heading,
-.list-group-item.disabled:hover .list-group-item-heading,
-.list-group-item.disabled:focus .list-group-item-heading {
-  color: inherit;
-}
-.list-group-item.disabled .list-group-item-text,
-.list-group-item.disabled:hover .list-group-item-text,
-.list-group-item.disabled:focus .list-group-item-text {
-  color: #b4bcc2;
-}
-.list-group-item.active,
-.list-group-item.active:hover,
-.list-group-item.active:focus {
-  z-index: 2;
-  color: #ffffff;
-  background-color: #2c3e50;
-  border-color: #2c3e50;
-}
-.list-group-item.active .list-group-item-heading,
-.list-group-item.active:hover .list-group-item-heading,
-.list-group-item.active:focus .list-group-item-heading,
-.list-group-item.active .list-group-item-heading > small,
-.list-group-item.active:hover .list-group-item-heading > small,
-.list-group-item.active:focus .list-group-item-heading > small,
-.list-group-item.active .list-group-item-heading > .small,
-.list-group-item.active:hover .list-group-item-heading > .small,
-.list-group-item.active:focus .list-group-item-heading > .small {
-  color: inherit;
-}
-.list-group-item.active .list-group-item-text,
-.list-group-item.active:hover .list-group-item-text,
-.list-group-item.active:focus .list-group-item-text {
-  color: #8aa4be;
-}
-.list-group-item-success {
-  color: #ffffff;
-  background-color: #18bc9c;
-}
-a.list-group-item-success,
-button.list-group-item-success {
-  color: #ffffff;
-}
-a.list-group-item-success .list-group-item-heading,
-button.list-group-item-success .list-group-item-heading {
-  color: inherit;
-}
-a.list-group-item-success:hover,
-button.list-group-item-success:hover,
-a.list-group-item-success:focus,
-button.list-group-item-success:focus {
-  color: #ffffff;
-  background-color: #15a589;
-}
-a.list-group-item-success.active,
-button.list-group-item-success.active,
-a.list-group-item-success.active:hover,
-button.list-group-item-success.active:hover,
-a.list-group-item-success.active:focus,
-button.list-group-item-success.active:focus {
-  color: #fff;
-  background-color: #ffffff;
-  border-color: #ffffff;
-}
-.list-group-item-info {
-  color: #ffffff;
-  background-color: #3498db;
-}
-a.list-group-item-info,
-button.list-group-item-info {
-  color: #ffffff;
-}
-a.list-group-item-info .list-group-item-heading,
-button.list-group-item-info .list-group-item-heading {
-  color: inherit;
-}
-a.list-group-item-info:hover,
-button.list-group-item-info:hover,
-a.list-group-item-info:focus,
-button.list-group-item-info:focus {
-  color: #ffffff;
-  background-color: #258cd1;
-}
-a.list-group-item-info.active,
-button.list-group-item-info.active,
-a.list-group-item-info.active:hover,
-button.list-group-item-info.active:hover,
-a.list-group-item-info.active:focus,
-button.list-group-item-info.active:focus {
-  color: #fff;
-  background-color: #ffffff;
-  border-color: #ffffff;
-}
-.list-group-item-warning {
-  color: #ffffff;
-  background-color: #f39c12;
-}
-a.list-group-item-warning,
-button.list-group-item-warning {
-  color: #ffffff;
-}
-a.list-group-item-warning .list-group-item-heading,
-button.list-group-item-warning .list-group-item-heading {
-  color: inherit;
-}
-a.list-group-item-warning:hover,
-button.list-group-item-warning:hover,
-a.list-group-item-warning:focus,
-button.list-group-item-warning:focus {
-  color: #ffffff;
-  background-color: #e08e0b;
-}
-a.list-group-item-warning.active,
-button.list-group-item-warning.active,
-a.list-group-item-warning.active:hover,
-button.list-group-item-warning.active:hover,
-a.list-group-item-warning.active:focus,
-button.list-group-item-warning.active:focus {
-  color: #fff;
-  background-color: #ffffff;
-  border-color: #ffffff;
-}
-.list-group-item-danger {
-  color: #ffffff;
-  background-color: #e74c3c;
-}
-a.list-group-item-danger,
-button.list-group-item-danger {
-  color: #ffffff;
-}
-a.list-group-item-danger .list-group-item-heading,
-button.list-group-item-danger .list-group-item-heading {
-  color: inherit;
-}
-a.list-group-item-danger:hover,
-button.list-group-item-danger:hover,
-a.list-group-item-danger:focus,
-button.list-group-item-danger:focus {
-  color: #ffffff;
-  background-color: #e43725;
-}
-a.list-group-item-danger.active,
-button.list-group-item-danger.active,
-a.list-group-item-danger.active:hover,
-button.list-group-item-danger.active:hover,
-a.list-group-item-danger.active:focus,
-button.list-group-item-danger.active:focus {
-  color: #fff;
-  background-color: #ffffff;
-  border-color: #ffffff;
-}
-.list-group-item-heading {
-  margin-top: 0;
-  margin-bottom: 5px;
-}
-.list-group-item-text {
-  margin-bottom: 0;
-  line-height: 1.3;
-}
-.panel {
-  margin-bottom: 21px;
-  background-color: #ffffff;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-.panel-body {
-  padding: 15px;
-}
-.panel-heading {
-  padding: 10px 15px;
-  border-bottom: 1px solid transparent;
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
-}
-.panel-heading > .dropdown .dropdown-toggle {
-  color: inherit;
-}
-.panel-title {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-size: 17px;
-  color: inherit;
-}
-.panel-title > a,
-.panel-title > small,
-.panel-title > .small,
-.panel-title > small > a,
-.panel-title > .small > a {
-  color: inherit;
-}
-.panel-footer {
-  padding: 10px 15px;
-  background-color: #ecf0f1;
-  border-top: 1px solid #ecf0f1;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-.panel > .list-group,
-.panel > .panel-collapse > .list-group {
-  margin-bottom: 0;
-}
-.panel > .list-group .list-group-item,
-.panel > .panel-collapse > .list-group .list-group-item {
-  border-width: 1px 0;
-  border-radius: 0;
-}
-.panel > .list-group:first-child .list-group-item:first-child,
-.panel > .panel-collapse > .list-group:first-child .list-group-item:first-child {
-  border-top: 0;
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
-}
-.panel > .list-group:last-child .list-group-item:last-child,
-.panel > .panel-collapse > .list-group:last-child .list-group-item:last-child {
-  border-bottom: 0;
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-.panel > .panel-heading + .panel-collapse > .list-group .list-group-item:first-child {
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-}
-.panel-heading + .list-group .list-group-item:first-child {
-  border-top-width: 0;
-}
-.list-group + .panel-footer {
-  border-top-width: 0;
-}
-.panel > .table,
-.panel > .table-responsive > .table,
-.panel > .panel-collapse > .table {
-  margin-bottom: 0;
-}
-.panel > .table caption,
-.panel > .table-responsive > .table caption,
-.panel > .panel-collapse > .table caption {
-  padding-left: 15px;
-  padding-right: 15px;
-}
-.panel > .table:first-child,
-.panel > .table-responsive:first-child > .table:first-child {
-  border-top-right-radius: 3px;
-  border-top-left-radius: 3px;
-}
-.panel > .table:first-child > thead:first-child > tr:first-child,
-.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child,
-.panel > .table:first-child > tbody:first-child > tr:first-child,
-.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child {
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
-}
-.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
-.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
-.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
-.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
-.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
-.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
-.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
-.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
-  border-top-left-radius: 3px;
-}
-.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
-.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
-.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
-.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
-.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
-.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
-.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
-.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
-  border-top-right-radius: 3px;
-}
-.panel > .table:last-child,
-.panel > .table-responsive:last-child > .table:last-child {
-  border-bottom-right-radius: 3px;
-  border-bottom-left-radius: 3px;
-}
-.panel > .table:last-child > tbody:last-child > tr:last-child,
-.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child,
-.panel > .table:last-child > tfoot:last-child > tr:last-child,
-.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child {
-  border-bottom-left-radius: 3px;
-  border-bottom-right-radius: 3px;
-}
-.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
-.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
-.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
-.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
-.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
-.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
-.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
-.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
-  border-bottom-left-radius: 3px;
-}
-.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
-.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
-.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
-.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
-.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
-.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
-.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
-.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
-  border-bottom-right-radius: 3px;
-}
-.panel > .panel-body + .table,
-.panel > .panel-body + .table-responsive,
-.panel > .table + .panel-body,
-.panel > .table-responsive + .panel-body {
-  border-top: 1px solid #ecf0f1;
-}
-.panel > .table > tbody:first-child > tr:first-child th,
-.panel > .table > tbody:first-child > tr:first-child td {
-  border-top: 0;
-}
-.panel > .table-bordered,
-.panel > .table-responsive > .table-bordered {
-  border: 0;
-}
-.panel > .table-bordered > thead > tr > th:first-child,
-.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
-.panel > .table-bordered > tbody > tr > th:first-child,
-.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
-.panel > .table-bordered > tfoot > tr > th:first-child,
-.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
-.panel > .table-bordered > thead > tr > td:first-child,
-.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
-.panel > .table-bordered > tbody > tr > td:first-child,
-.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
-.panel > .table-bordered > tfoot > tr > td:first-child,
-.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
-  border-left: 0;
-}
-.panel > .table-bordered > thead > tr > th:last-child,
-.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
-.panel > .table-bordered > tbody > tr > th:last-child,
-.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
-.panel > .table-bordered > tfoot > tr > th:last-child,
-.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
-.panel > .table-bordered > thead > tr > td:last-child,
-.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
-.panel > .table-bordered > tbody > tr > td:last-child,
-.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
-.panel > .table-bordered > tfoot > tr > td:last-child,
-.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
-  border-right: 0;
-}
-.panel > .table-bordered > thead > tr:first-child > td,
-.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
-.panel > .table-bordered > tbody > tr:first-child > td,
-.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
-.panel > .table-bordered > thead > tr:first-child > th,
-.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
-.panel > .table-bordered > tbody > tr:first-child > th,
-.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
-  border-bottom: 0;
-}
-.panel > .table-bordered > tbody > tr:last-child > td,
-.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
-.panel > .table-bordered > tfoot > tr:last-child > td,
-.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
-.panel > .table-bordered > tbody > tr:last-child > th,
-.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
-.panel > .table-bordered > tfoot > tr:last-child > th,
-.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
-  border-bottom: 0;
-}
-.panel > .table-responsive {
-  border: 0;
-  margin-bottom: 0;
-}
-.panel-group {
-  margin-bottom: 21px;
-}
-.panel-group .panel {
-  margin-bottom: 0;
-  border-radius: 4px;
-}
-.panel-group .panel + .panel {
-  margin-top: 5px;
-}
-.panel-group .panel-heading {
-  border-bottom: 0;
-}
-.panel-group .panel-heading + .panel-collapse > .panel-body,
-.panel-group .panel-heading + .panel-collapse > .list-group {
-  border-top: 1px solid #ecf0f1;
-}
-.panel-group .panel-footer {
-  border-top: 0;
-}
-.panel-group .panel-footer + .panel-collapse .panel-body {
-  border-bottom: 1px solid #ecf0f1;
-}
-.panel-default {
-  border-color: #ecf0f1;
-}
-.panel-default > .panel-heading {
-  color: #2c3e50;
-  background-color: #ecf0f1;
-  border-color: #ecf0f1;
-}
-.panel-default > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #ecf0f1;
-}
-.panel-default > .panel-heading .badge {
-  color: #ecf0f1;
-  background-color: #2c3e50;
-}
-.panel-default > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #ecf0f1;
-}
-.panel-primary {
-  border-color: #2c3e50;
-}
-.panel-primary > .panel-heading {
-  color: #ffffff;
-  background-color: #2c3e50;
-  border-color: #2c3e50;
-}
-.panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #2c3e50;
-}
-.panel-primary > .panel-heading .badge {
-  color: #2c3e50;
-  background-color: #ffffff;
-}
-.panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #2c3e50;
-}
-.panel-success {
-  border-color: #18bc9c;
-}
-.panel-success > .panel-heading {
-  color: #ffffff;
-  background-color: #18bc9c;
-  border-color: #18bc9c;
-}
-.panel-success > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #18bc9c;
-}
-.panel-success > .panel-heading .badge {
-  color: #18bc9c;
-  background-color: #ffffff;
-}
-.panel-success > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #18bc9c;
-}
-.panel-info {
-  border-color: #3498db;
-}
-.panel-info > .panel-heading {
-  color: #ffffff;
-  background-color: #3498db;
-  border-color: #3498db;
-}
-.panel-info > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #3498db;
-}
-.panel-info > .panel-heading .badge {
-  color: #3498db;
-  background-color: #ffffff;
-}
-.panel-info > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #3498db;
-}
-.panel-warning {
-  border-color: #f39c12;
-}
-.panel-warning > .panel-heading {
-  color: #ffffff;
-  background-color: #f39c12;
-  border-color: #f39c12;
-}
-.panel-warning > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #f39c12;
-}
-.panel-warning > .panel-heading .badge {
-  color: #f39c12;
-  background-color: #ffffff;
-}
-.panel-warning > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #f39c12;
-}
-.panel-danger {
-  border-color: #e74c3c;
-}
-.panel-danger > .panel-heading {
-  color: #ffffff;
-  background-color: #e74c3c;
-  border-color: #e74c3c;
-}
-.panel-danger > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #e74c3c;
-}
-.panel-danger > .panel-heading .badge {
-  color: #e74c3c;
-  background-color: #ffffff;
-}
-.panel-danger > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #e74c3c;
-}
-.embed-responsive {
-  position: relative;
-  display: block;
-  height: 0;
-  padding: 0;
-  overflow: hidden;
-}
-.embed-responsive .embed-responsive-item,
-.embed-responsive iframe,
-.embed-responsive embed,
-.embed-responsive object,
-.embed-responsive video {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  height: 100%;
-  width: 100%;
-  border: 0;
-}
-.embed-responsive-16by9 {
-  padding-bottom: 56.25%;
-}
-.embed-responsive-4by3 {
-  padding-bottom: 75%;
-}
-.well {
-  min-height: 20px;
-  padding: 19px;
-  margin-bottom: 20px;
-  background-color: #ecf0f1;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
-}
-.well blockquote {
-  border-color: #ddd;
-  border-color: rgba(0, 0, 0, 0.15);
-}
-.well-lg {
-  padding: 24px;
-  border-radius: 6px;
-}
-.well-sm {
-  padding: 9px;
-  border-radius: 3px;
-}
-.close {
-  float: right;
-  font-size: 22.5px;
-  font-weight: bold;
-  line-height: 1;
-  color: #000000;
-  text-shadow: none;
-  opacity: 0.2;
-  filter: alpha(opacity=20);
-}
-.close:hover,
-.close:focus {
-  color: #000000;
-  text-decoration: none;
-  cursor: pointer;
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-button.close {
-  padding: 0;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  -webkit-appearance: none;
-}
-.modal-open {
-  overflow: hidden;
-}
-.modal {
-  display: none;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1050;
-  -webkit-overflow-scrolling: touch;
-  outline: 0;
-}
-.modal.fade .modal-dialog {
-  -webkit-transform: translate(0, -25%);
-  -ms-transform: translate(0, -25%);
-  -o-transform: translate(0, -25%);
-  transform: translate(0, -25%);
-  -webkit-transition: -webkit-transform 0.3s ease-out;
-  -o-transition: -o-transform 0.3s ease-out;
-  transition: transform 0.3s ease-out;
-}
-.modal.in .modal-dialog {
-  -webkit-transform: translate(0, 0);
-  -ms-transform: translate(0, 0);
-  -o-transform: translate(0, 0);
-  transform: translate(0, 0);
-}
-.modal-open .modal {
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-.modal-dialog {
-  position: relative;
-  width: auto;
-  margin: 10px;
-}
-.modal-content {
-  position: relative;
-  background-color: #ffffff;
-  border: 1px solid #999999;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
-  -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
-  -webkit-background-clip: padding-box;
-          background-clip: padding-box;
-  outline: 0;
-}
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 1040;
-  background-color: #000000;
-}
-.modal-backdrop.fade {
-  opacity: 0;
-  filter: alpha(opacity=0);
-}
-.modal-backdrop.in {
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-}
-.modal-header {
-  padding: 15px;
-  border-bottom: 1px solid #e5e5e5;
-}
-.modal-header .close {
-  margin-top: -2px;
-}
-.modal-title {
-  margin: 0;
-  line-height: 1.42857143;
-}
-.modal-body {
-  position: relative;
-  padding: 20px;
-}
-.modal-footer {
-  padding: 20px;
-  text-align: right;
-  border-top: 1px solid #e5e5e5;
-}
-.modal-footer .btn + .btn {
-  margin-left: 5px;
-  margin-bottom: 0;
-}
-.modal-footer .btn-group .btn + .btn {
-  margin-left: -1px;
-}
-.modal-footer .btn-block + .btn-block {
-  margin-left: 0;
-}
-.modal-scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 50px;
-  height: 50px;
-  overflow: scroll;
-}
-@media (min-width: 768px) {
-  .modal-dialog {
-    width: 600px;
-    margin: 30px auto;
-  }
-  .modal-content {
-    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-  }
-  .modal-sm {
-    width: 300px;
-  }
-}
-@media (min-width: 992px) {
-  .modal-lg {
-    width: 900px;
-  }
-}
-.tooltip {
-  position: absolute;
-  z-index: 1070;
-  display: block;
-  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-style: normal;
-  font-weight: normal;
-  letter-spacing: normal;
-  line-break: auto;
-  line-height: 1.42857143;
-  text-align: left;
-  text-align: start;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  white-space: normal;
-  word-break: normal;
-  word-spacing: normal;
-  word-wrap: normal;
-  font-size: 13px;
-  opacity: 0;
-  filter: alpha(opacity=0);
-}
-.tooltip.in {
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-.tooltip.top {
-  margin-top: -3px;
-  padding: 5px 0;
-}
-.tooltip.right {
-  margin-left: 3px;
-  padding: 0 5px;
-}
-.tooltip.bottom {
-  margin-top: 3px;
-  padding: 5px 0;
-}
-.tooltip.left {
-  margin-left: -3px;
-  padding: 0 5px;
-}
-.tooltip-inner {
-  max-width: 200px;
-  padding: 3px 8px;
-  color: #ffffff;
-  text-align: center;
-  background-color: #000000;
-  border-radius: 4px;
-}
-.tooltip-arrow {
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-.tooltip.top .tooltip-arrow {
-  bottom: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px 5px 0;
-  border-top-color: #000000;
-}
-.tooltip.top-left .tooltip-arrow {
-  bottom: 0;
-  right: 5px;
-  margin-bottom: -5px;
-  border-width: 5px 5px 0;
-  border-top-color: #000000;
-}
-.tooltip.top-right .tooltip-arrow {
-  bottom: 0;
-  left: 5px;
-  margin-bottom: -5px;
-  border-width: 5px 5px 0;
-  border-top-color: #000000;
-}
-.tooltip.right .tooltip-arrow {
-  top: 50%;
-  left: 0;
-  margin-top: -5px;
-  border-width: 5px 5px 5px 0;
-  border-right-color: #000000;
-}
-.tooltip.left .tooltip-arrow {
-  top: 50%;
-  right: 0;
-  margin-top: -5px;
-  border-width: 5px 0 5px 5px;
-  border-left-color: #000000;
-}
-.tooltip.bottom .tooltip-arrow {
-  top: 0;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 0 5px 5px;
-  border-bottom-color: #000000;
-}
-.tooltip.bottom-left .tooltip-arrow {
-  top: 0;
-  right: 5px;
-  margin-top: -5px;
-  border-width: 0 5px 5px;
-  border-bottom-color: #000000;
-}
-.tooltip.bottom-right .tooltip-arrow {
-  top: 0;
-  left: 5px;
-  margin-top: -5px;
-  border-width: 0 5px 5px;
-  border-bottom-color: #000000;
-}
-.popover {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1060;
-  display: none;
-  max-width: 276px;
-  padding: 1px;
-  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-style: normal;
-  font-weight: normal;
-  letter-spacing: normal;
-  line-break: auto;
-  line-height: 1.42857143;
-  text-align: left;
-  text-align: start;
-  text-decoration: none;
-  text-shadow: none;
-  text-transform: none;
-  white-space: normal;
-  word-break: normal;
-  word-spacing: normal;
-  word-wrap: normal;
-  font-size: 15px;
-  background-color: #ffffff;
-  -webkit-background-clip: padding-box;
-          background-clip: padding-box;
-  border: 1px solid #cccccc;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: 6px;
-  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
-}
-.popover.top {
-  margin-top: -10px;
-}
-.popover.right {
-  margin-left: 10px;
-}
-.popover.bottom {
-  margin-top: 10px;
-}
-.popover.left {
-  margin-left: -10px;
-}
-.popover-title {
-  margin: 0;
-  padding: 8px 14px;
-  font-size: 15px;
-  background-color: #f7f7f7;
-  border-bottom: 1px solid #ebebeb;
-  border-radius: 5px 5px 0 0;
-}
-.popover-content {
-  padding: 9px 14px;
-}
-.popover > .arrow,
-.popover > .arrow:after {
-  position: absolute;
-  display: block;
-  width: 0;
-  height: 0;
-  border-color: transparent;
-  border-style: solid;
-}
-.popover > .arrow {
-  border-width: 11px;
-}
-.popover > .arrow:after {
-  border-width: 10px;
-  content: "";
-}
-.popover.top > .arrow {
-  left: 50%;
-  margin-left: -11px;
-  border-bottom-width: 0;
-  border-top-color: #999999;
-  border-top-color: rgba(0, 0, 0, 0.25);
-  bottom: -11px;
-}
-.popover.top > .arrow:after {
-  content: " ";
-  bottom: 1px;
-  margin-left: -10px;
-  border-bottom-width: 0;
-  border-top-color: #ffffff;
-}
-.popover.right > .arrow {
-  top: 50%;
-  left: -11px;
-  margin-top: -11px;
-  border-left-width: 0;
-  border-right-color: #999999;
-  border-right-color: rgba(0, 0, 0, 0.25);
-}
-.popover.right > .arrow:after {
-  content: " ";
-  left: 1px;
-  bottom: -10px;
-  border-left-width: 0;
-  border-right-color: #ffffff;
-}
-.popover.bottom > .arrow {
-  left: 50%;
-  margin-left: -11px;
-  border-top-width: 0;
-  border-bottom-color: #999999;
-  border-bottom-color: rgba(0, 0, 0, 0.25);
-  top: -11px;
-}
-.popover.bottom > .arrow:after {
-  content: " ";
-  top: 1px;
-  margin-left: -10px;
-  border-top-width: 0;
-  border-bottom-color: #ffffff;
-}
-.popover.left > .arrow {
-  top: 50%;
-  right: -11px;
-  margin-top: -11px;
-  border-right-width: 0;
-  border-left-color: #999999;
-  border-left-color: rgba(0, 0, 0, 0.25);
-}
-.popover.left > .arrow:after {
-  content: " ";
-  right: 1px;
-  border-right-width: 0;
-  border-left-color: #ffffff;
-  bottom: -10px;
-}
-.carousel {
-  position: relative;
-}
-.carousel-inner {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-}
-.carousel-inner > .item {
-  display: none;
-  position: relative;
-  -webkit-transition: 0.6s ease-in-out left;
-  -o-transition: 0.6s ease-in-out left;
-  transition: 0.6s ease-in-out left;
-}
-.carousel-inner > .item > img,
-.carousel-inner > .item > a > img {
-  line-height: 1;
-}
-@media all and (transform-3d), (-webkit-transform-3d) {
-  .carousel-inner > .item {
-    -webkit-transition: -webkit-transform 0.6s ease-in-out;
-    -o-transition: -o-transform 0.6s ease-in-out;
-    transition: transform 0.6s ease-in-out;
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    -webkit-perspective: 1000px;
-    perspective: 1000px;
-  }
-  .carousel-inner > .item.next,
-  .carousel-inner > .item.active.right {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    left: 0;
-  }
-  .carousel-inner > .item.prev,
-  .carousel-inner > .item.active.left {
-    -webkit-transform: translate3d(-100%, 0, 0);
-    transform: translate3d(-100%, 0, 0);
-    left: 0;
-  }
-  .carousel-inner > .item.next.left,
-  .carousel-inner > .item.prev.right,
-  .carousel-inner > .item.active {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    left: 0;
-  }
-}
-.carousel-inner > .active,
-.carousel-inner > .next,
-.carousel-inner > .prev {
-  display: block;
-}
-.carousel-inner > .active {
-  left: 0;
-}
-.carousel-inner > .next,
-.carousel-inner > .prev {
-  position: absolute;
-  top: 0;
-  width: 100%;
-}
-.carousel-inner > .next {
-  left: 100%;
-}
-.carousel-inner > .prev {
-  left: -100%;
-}
-.carousel-inner > .next.left,
-.carousel-inner > .prev.right {
-  left: 0;
-}
-.carousel-inner > .active.left {
-  left: -100%;
-}
-.carousel-inner > .active.right {
-  left: 100%;
-}
-.carousel-control {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  width: 15%;
-  opacity: 0.5;
-  filter: alpha(opacity=50);
-  font-size: 20px;
-  color: #ffffff;
-  text-align: center;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-  background-color: rgba(0, 0, 0, 0);
-}
-.carousel-control.left {
-  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
-  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.0001)));
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
-}
-.carousel-control.right {
-  left: auto;
-  right: 0;
-  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
-  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.0001)), to(rgba(0, 0, 0, 0.5)));
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
-  background-repeat: repeat-x;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
-}
-.carousel-control:hover,
-.carousel-control:focus {
-  outline: 0;
-  color: #ffffff;
-  text-decoration: none;
-  opacity: 0.9;
-  filter: alpha(opacity=90);
-}
-.carousel-control .icon-prev,
-.carousel-control .icon-next,
-.carousel-control .glyphicon-chevron-left,
-.carousel-control .glyphicon-chevron-right {
-  position: absolute;
-  top: 50%;
-  margin-top: -10px;
-  z-index: 5;
-  display: inline-block;
-}
-.carousel-control .icon-prev,
-.carousel-control .glyphicon-chevron-left {
-  left: 50%;
-  margin-left: -10px;
-}
-.carousel-control .icon-next,
-.carousel-control .glyphicon-chevron-right {
-  right: 50%;
-  margin-right: -10px;
-}
-.carousel-control .icon-prev,
-.carousel-control .icon-next {
-  width: 20px;
-  height: 20px;
-  line-height: 1;
-  font-family: serif;
-}
-.carousel-control .icon-prev:before {
-  content: '\2039';
-}
-.carousel-control .icon-next:before {
-  content: '\203a';
-}
-.carousel-indicators {
-  position: absolute;
-  bottom: 10px;
-  left: 50%;
-  z-index: 15;
-  width: 60%;
-  margin-left: -30%;
-  padding-left: 0;
-  list-style: none;
-  text-align: center;
-}
-.carousel-indicators li {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  margin: 1px;
-  text-indent: -999px;
-  border: 1px solid #ffffff;
-  border-radius: 10px;
-  cursor: pointer;
-  background-color: #000 \9;
-  background-color: rgba(0, 0, 0, 0);
-}
-.carousel-indicators .active {
-  margin: 0;
-  width: 12px;
-  height: 12px;
-  background-color: #ffffff;
-}
-.carousel-caption {
-  position: absolute;
-  left: 15%;
-  right: 15%;
-  bottom: 20px;
-  z-index: 10;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  color: #ffffff;
-  text-align: center;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-}
-.carousel-caption .btn {
-  text-shadow: none;
-}
-@media screen and (min-width: 768px) {
-  .carousel-control .glyphicon-chevron-left,
-  .carousel-control .glyphicon-chevron-right,
-  .carousel-control .icon-prev,
-  .carousel-control .icon-next {
-    width: 30px;
-    height: 30px;
-    margin-top: -10px;
-    font-size: 30px;
-  }
-  .carousel-control .glyphicon-chevron-left,
-  .carousel-control .icon-prev {
-    margin-left: -10px;
-  }
-  .carousel-control .glyphicon-chevron-right,
-  .carousel-control .icon-next {
-    margin-right: -10px;
-  }
-  .carousel-caption {
-    left: 20%;
-    right: 20%;
-    padding-bottom: 30px;
-  }
-  .carousel-indicators {
-    bottom: 20px;
-  }
-}
-.clearfix:before,
-.clearfix:after,
-.dl-horizontal dd:before,
-.dl-horizontal dd:after,
-.container:before,
-.container:after,
-.container-fluid:before,
-.container-fluid:after,
-.row:before,
-.row:after,
-.form-horizontal .form-group:before,
-.form-horizontal .form-group:after,
-.btn-toolbar:before,
-.btn-toolbar:after,
-.btn-group-vertical > .btn-group:before,
-.btn-group-vertical > .btn-group:after,
-.nav:before,
-.nav:after,
-.navbar:before,
-.navbar:after,
-.navbar-header:before,
-.navbar-header:after,
-.navbar-collapse:before,
-.navbar-collapse:after,
-.pager:before,
-.pager:after,
-.panel-body:before,
-.panel-body:after,
-.modal-header:before,
-.modal-header:after,
-.modal-footer:before,
-.modal-footer:after {
-  content: " ";
-  display: table;
-}
-.clearfix:after,
-.dl-horizontal dd:after,
-.container:after,
-.container-fluid:after,
-.row:after,
-.form-horizontal .form-group:after,
-.btn-toolbar:after,
-.btn-group-vertical > .btn-group:after,
-.nav:after,
-.navbar:after,
-.navbar-header:after,
-.navbar-collapse:after,
-.pager:after,
-.panel-body:after,
-.modal-header:after,
-.modal-footer:after {
-  clear: both;
-}
-.center-block {
-  display: block;
-  margin-left: auto;
-  margin-right: auto;
-}
-.pull-right {
-  float: right !important;
-}
-.pull-left {
-  float: left !important;
-}
-.hide {
-  display: none !important;
-}
-.show {
-  display: block !important;
-}
-.invisible {
-  visibility: hidden;
-}
-.text-hide {
-  font: 0/0 a;
-  color: transparent;
-  text-shadow: none;
-  background-color: transparent;
-  border: 0;
-}
-.hidden {
-  display: none !important;
-}
-.affix {
-  position: fixed;
-}
-@-ms-viewport {
-  width: device-width;
-}
-.visible-xs,
-.visible-sm,
-.visible-md,
-.visible-lg {
-  display: none !important;
-}
-.visible-xs-block,
-.visible-xs-inline,
-.visible-xs-inline-block,
-.visible-sm-block,
-.visible-sm-inline,
-.visible-sm-inline-block,
-.visible-md-block,
-.visible-md-inline,
-.visible-md-inline-block,
-.visible-lg-block,
-.visible-lg-inline,
-.visible-lg-inline-block {
-  display: none !important;
-}
-@media (max-width: 767px) {
-  .visible-xs {
-    display: block !important;
-  }
-  table.visible-xs {
-    display: table !important;
-  }
-  tr.visible-xs {
-    display: table-row !important;
-  }
-  th.visible-xs,
-  td.visible-xs {
-    display: table-cell !important;
-  }
-}
-@media (max-width: 767px) {
-  .visible-xs-block {
-    display: block !important;
-  }
-}
-@media (max-width: 767px) {
-  .visible-xs-inline {
-    display: inline !important;
-  }
-}
-@media (max-width: 767px) {
-  .visible-xs-inline-block {
-    display: inline-block !important;
-  }
-}
-@media (min-width: 768px) and (max-width: 991px) {
-  .visible-sm {
-    display: block !important;
-  }
-  table.visible-sm {
-    display: table !important;
-  }
-  tr.visible-sm {
-    display: table-row !important;
-  }
-  th.visible-sm,
-  td.visible-sm {
-    display: table-cell !important;
-  }
-}
-@media (min-width: 768px) and (max-width: 991px) {
-  .visible-sm-block {
-    display: block !important;
-  }
-}
-@media (min-width: 768px) and (max-width: 991px) {
-  .visible-sm-inline {
-    display: inline !important;
-  }
-}
-@media (min-width: 768px) and (max-width: 991px) {
-  .visible-sm-inline-block {
-    display: inline-block !important;
-  }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
-  .visible-md {
-    display: block !important;
-  }
-  table.visible-md {
-    display: table !important;
-  }
-  tr.visible-md {
-    display: table-row !important;
-  }
-  th.visible-md,
-  td.visible-md {
-    display: table-cell !important;
-  }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
-  .visible-md-block {
-    display: block !important;
-  }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
-  .visible-md-inline {
-    display: inline !important;
-  }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
-  .visible-md-inline-block {
-    display: inline-block !important;
-  }
-}
-@media (min-width: 1200px) {
-  .visible-lg {
-    display: block !important;
-  }
-  table.visible-lg {
-    display: table !important;
-  }
-  tr.visible-lg {
-    display: table-row !important;
-  }
-  th.visible-lg,
-  td.visible-lg {
-    display: table-cell !important;
-  }
-}
-@media (min-width: 1200px) {
-  .visible-lg-block {
-    display: block !important;
-  }
-}
-@media (min-width: 1200px) {
-  .visible-lg-inline {
-    display: inline !important;
-  }
-}
-@media (min-width: 1200px) {
-  .visible-lg-inline-block {
-    display: inline-block !important;
-  }
-}
-@media (max-width: 767px) {
-  .hidden-xs {
-    display: none !important;
-  }
-}
-@media (min-width: 768px) and (max-width: 991px) {
-  .hidden-sm {
-    display: none !important;
-  }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
-  .hidden-md {
-    display: none !important;
-  }
-}
-@media (min-width: 1200px) {
-  .hidden-lg {
-    display: none !important;
-  }
-}
-.visible-print {
-  display: none !important;
-}
-@media print {
-  .visible-print {
-    display: block !important;
-  }
-  table.visible-print {
-    display: table !important;
-  }
-  tr.visible-print {
-    display: table-row !important;
-  }
-  th.visible-print,
-  td.visible-print {
-    display: table-cell !important;
-  }
-}
-.visible-print-block {
-  display: none !important;
-}
-@media print {
-  .visible-print-block {
-    display: block !important;
-  }
-}
-.visible-print-inline {
-  display: none !important;
-}
-@media print {
-  .visible-print-inline {
-    display: inline !important;
-  }
-}
-.visible-print-inline-block {
-  display: none !important;
-}
-@media print {
-  .visible-print-inline-block {
-    display: inline-block !important;
-  }
-}
-@media print {
-  .hidden-print {
-    display: none !important;
-  }
-}
-.navbar {
-  border-width: 0;
-}
-.navbar-default .badge {
-  background-color: #fff;
-  color: #2c3e50;
-}
-.navbar-inverse .badge {
-  background-color: #fff;
-  color: #18bc9c;
-}
-.navbar-brand {
-  line-height: 1;
-}
-.btn {
-  border-width: 2px;
-}
-.btn:active {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.btn-group.open .dropdown-toggle {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.text-primary,
-.text-primary:hover {
-  color: #2c3e50;
-}
-.text-success,
-.text-success:hover {
-  color: #18bc9c;
-}
-.text-danger,
-.text-danger:hover {
-  color: #e74c3c;
-}
-.text-warning,
-.text-warning:hover {
-  color: #f39c12;
-}
-.text-info,
-.text-info:hover {
-  color: #3498db;
-}
-table a:not(.btn),
-.table a:not(.btn) {
-  text-decoration: underline;
-}
-table .dropdown-menu a,
-.table .dropdown-menu a {
-  text-decoration: none;
-}
-table .success,
-.table .success,
-table .warning,
-.table .warning,
-table .danger,
-.table .danger,
-table .info,
-.table .info {
-  color: #fff;
-}
-table .success > th > a,
-.table .success > th > a,
-table .warning > th > a,
-.table .warning > th > a,
-table .danger > th > a,
-.table .danger > th > a,
-table .info > th > a,
-.table .info > th > a,
-table .success > td > a,
-.table .success > td > a,
-table .warning > td > a,
-.table .warning > td > a,
-table .danger > td > a,
-.table .danger > td > a,
-table .info > td > a,
-.table .info > td > a,
-table .success > a,
-.table .success > a,
-table .warning > a,
-.table .warning > a,
-table .danger > a,
-.table .danger > a,
-table .info > a,
-.table .info > a {
-  color: #fff;
-}
-table > thead > tr > th,
-.table > thead > tr > th,
-table > tbody > tr > th,
-.table > tbody > tr > th,
-table > tfoot > tr > th,
-.table > tfoot > tr > th,
-table > thead > tr > td,
-.table > thead > tr > td,
-table > tbody > tr > td,
-.table > tbody > tr > td,
-table > tfoot > tr > td,
-.table > tfoot > tr > td {
-  border: none;
-}
-table-bordered > thead > tr > th,
-.table-bordered > thead > tr > th,
-table-bordered > tbody > tr > th,
-.table-bordered > tbody > tr > th,
-table-bordered > tfoot > tr > th,
-.table-bordered > tfoot > tr > th,
-table-bordered > thead > tr > td,
-.table-bordered > thead > tr > td,
-table-bordered > tbody > tr > td,
-.table-bordered > tbody > tr > td,
-table-bordered > tfoot > tr > td,
-.table-bordered > tfoot > tr > td {
-  border: 1px solid #ecf0f1;
-}
-.form-control,
-input {
-  border-width: 2px;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.form-control:focus,
-input:focus {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.has-warning .help-block,
-.has-warning .control-label,
-.has-warning .radio,
-.has-warning .checkbox,
-.has-warning .radio-inline,
-.has-warning .checkbox-inline,
-.has-warning.radio label,
-.has-warning.checkbox label,
-.has-warning.radio-inline label,
-.has-warning.checkbox-inline label,
-.has-warning .form-control-feedback {
-  color: #f39c12;
-}
-.has-warning .form-control,
-.has-warning .form-control:focus {
-  border: 2px solid #f39c12;
-}
-.has-warning .input-group-addon {
-  border-color: #f39c12;
-}
-.has-error .help-block,
-.has-error .control-label,
-.has-error .radio,
-.has-error .checkbox,
-.has-error .radio-inline,
-.has-error .checkbox-inline,
-.has-error.radio label,
-.has-error.checkbox label,
-.has-error.radio-inline label,
-.has-error.checkbox-inline label,
-.has-error .form-control-feedback {
-  color: #e74c3c;
-}
-.has-error .form-control,
-.has-error .form-control:focus {
-  border: 2px solid #e74c3c;
-}
-.has-error .input-group-addon {
-  border-color: #e74c3c;
-}
-.has-success .help-block,
-.has-success .control-label,
-.has-success .radio,
-.has-success .checkbox,
-.has-success .radio-inline,
-.has-success .checkbox-inline,
-.has-success.radio label,
-.has-success.checkbox label,
-.has-success.radio-inline label,
-.has-success.checkbox-inline label,
-.has-success .form-control-feedback {
-  color: #18bc9c;
-}
-.has-success .form-control,
-.has-success .form-control:focus {
-  border: 2px solid #18bc9c;
-}
-.has-success .input-group-addon {
-  border-color: #18bc9c;
-}
-.nav .open > a,
-.nav .open > a:hover,
-.nav .open > a:focus {
-  border-color: transparent;
-}
-.pager a,
-.pager a:hover {
-  color: #fff;
-}
-.pager .disabled > a,
-.pager .disabled > a:hover,
-.pager .disabled > a:focus,
-.pager .disabled > span {
-  background-color: #3be6c4;
-}
-.close {
-  color: #fff;
-  text-decoration: none;
-  opacity: 0.4;
-}
-.close:hover,
-.close:focus {
-  color: #fff;
-  opacity: 1;
-}
-.alert .alert-link {
-  color: #fff;
-  text-decoration: underline;
-}
-.progress {
-  height: 10px;
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-.progress .progress-bar {
-  font-size: 10px;
-  line-height: 10px;
-}
-.well {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-a.list-group-item.active,
-a.list-group-item.active:hover,
-a.list-group-item.active:focus {
-  border-color: #ecf0f1;
-}
-a.list-group-item-success.active {
-  background-color: #18bc9c;
-}
-a.list-group-item-success.active:hover,
-a.list-group-item-success.active:focus {
-  background-color: #15a589;
-}
-a.list-group-item-warning.active {
-  background-color: #f39c12;
-}
-a.list-group-item-warning.active:hover,
-a.list-group-item-warning.active:focus {
-  background-color: #e08e0b;
-}
-a.list-group-item-danger.active {
-  background-color: #e74c3c;
-}
-a.list-group-item-danger.active:hover,
-a.list-group-item-danger.active:focus {
-  background-color: #e43725;
-}
-.panel-default .close {
-  color: #2c3e50;
-}
-.modal .close {
-  color: #2c3e50;
-}
-.popover {
-  color: #2c3e50;
-}
diff --git a/static/css/fonts.css b/static/css/fonts.css
new file mode 100644
index 000000000..a9eab1ffb
--- /dev/null
+++ b/static/css/fonts.css
@@ -0,0 +1,9 @@
+@font-face {
+  font-family: 'Glyphicons Halflings';
+  src: url('../fonts/glyphicons-halflings-regular.eot');
+  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
+       url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'),
+       url('../fonts/glyphicons-halflings-regular.woff') format('woff'),
+       url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
+       url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
+}
diff --git a/static/css/icons.css b/static/css/icons.css
new file mode 100644
index 000000000..b836de6e3
--- /dev/null
+++ b/static/css/icons.css
@@ -0,0 +1,34 @@
+.glyphicon {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+}
+.glyphicon::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-family: 'Glyphicons Halflings';
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.glyphicon--home::before {
+  content: '\e021';
+}
+.glyphicon--book::before {
+  content: '\e043';
+}
+.glyphicon--profile::before {
+  content: '\e019';
+}
+.glyphicon--user::before {
+  content: '\e008';
+}
+.glyphicon--login::before {
+  content: '\e161';
+}
+.glyphicon--logout::before {
+  content: '\e163';
+}
diff --git a/static/js/featureChecker.js b/static/js/featureChecker.js
new file mode 100644
index 000000000..a3a21e663
--- /dev/null
+++ b/static/js/featureChecker.js
@@ -0,0 +1,7 @@
+window.addEventListener('touchstart', function onFirstTouch() {
+  // we could use a class
+  document.body.classList.add('touch-supported');
+
+  // we only need to know once that a human touched the screen, so we can stop listening now
+  window.removeEventListener('touchstart', onFirstTouch, false);
+}, false);
diff --git a/templates/course.hamlet b/templates/course.hamlet
index 636eb50ba..94d8dbfb4 100644
--- a/templates/course.hamlet
+++ b/templates/course.hamlet
@@ -1,38 +1,34 @@
-<div .masthead>
-    <div .container>
-        <div .row>
-            <h1 .header>
-              #{courseName course}
-            $maybe school <- schoolMB
-              <h4>
-                #{schoolName school}
+<div .course-header>
+  <div .course-header__info>
+    <table>
+      <tr>
+        <th>Teilnehmer
+        <td>
+          #{participants}
+          $maybe capacity <- courseCapacity course
+            \ von #{capacity}
+      <tr>
+        <th>Anmeldezeitraum
+        <td>
+          $maybe regFrom <- courseRegisterFrom course
+            #{formatTimeGerWD regFrom}
+          $maybe regTo   <- courseRegisterTo   course
+            \ bis #{formatTimeGerWD regTo}
+
+    <div>
+      <form method=post action=@{CourseR tid csh CourseShowR} enctype=#{regEnctype}>
+        ^{regWidget}
+
+  <div .course-header__title>
+    <h1>#{courseName course}
+    $maybe school <- schoolMB
+      <h4>#{schoolName school}
+
+
 <div .container>
-    <div .bs-docs-section>
-        <div .row>
-            <div .col-lg-12>
-                <div .page-header>                    
-
-                    $maybe descr <- courseDescription course
-                      <h2 #description>Beschreibung
-                      <p> #{descr}  
-                    $maybe link <- courseLinkExternal course
-                      <h4 #linl>Homepage
-                      <a href=#{link}>#{link}
-        <div .row>
-            <div .col-lg-12>     
-                <h4>Teilnehmer
-                #{participants}
-                $maybe capacity <- courseCapacity course
-                  \ von #{capacity}
-                <br>
-                $maybe regFrom <- courseRegisterFrom course
-                  Anmeldezeitraum: #{formatTimeGerWD regFrom}
-                  $maybe regTo   <- courseRegisterTo   course
-                    \ bis #{formatTimeGerWD regTo}
-                <form method=post action=@{CourseShowR tid csh} enctype=#{regEnctype}>
-                  ^{regWidget}
-                
-
-
-    <hr>
-
+  $maybe descr <- courseDescription course
+    <h2 #description>Beschreibung
+    <p> #{descr}
+  $maybe link <- courseLinkExternal course
+    <h4 #linl>Homepage
+    <a href=#{link}>#{link}
diff --git a/templates/course.lucius b/templates/course.lucius
new file mode 100644
index 000000000..a9715afd7
--- /dev/null
+++ b/templates/course.lucius
@@ -0,0 +1,19 @@
+.course-header {
+  /*display: flex;
+  flex-direction: row;
+  justify-content: space-between;*/
+}
+
+.course-header__title {
+  align-self: baseline;
+}
+.course-header__info {
+  border: 1px solid var(--greybase);
+  padding: 13px;
+  align-self: center;
+  float: right;
+}
+
+.course-header__info table {
+  margin: 0;
+}
diff --git a/templates/courses.hamlet b/templates/courses.hamlet
new file mode 100644
index 000000000..b1f774078
--- /dev/null
+++ b/templates/courses.hamlet
@@ -0,0 +1,4 @@
+<div .container>
+  <h1>Kursübersicht für Semester #{termToText $ unTermKey tidini}
+  <div .scrolltable>
+    ^{coursesTable}
diff --git a/templates/default-layout-wrapper.hamlet b/templates/default-layout-wrapper.hamlet
index 173767075..ef15995c0 100644
--- a/templates/default-layout-wrapper.hamlet
+++ b/templates/default-layout-wrapper.hamlet
@@ -19,12 +19,7 @@ $newline never
     \<!--[if lt IE 9]>
     \<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
     \<![endif]-->
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js">
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.0.3/js.cookie.min.js">
-
-    \<!-- Bootstrap-3.3.7 compiled and minified JavaScript -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
-
     <script>
       /* The `defaultCsrfMiddleware` Middleware added in Foundation.hs adds a CSRF token to the request cookies. */
       /* AJAX requests should add that token to a header to be validated by the server. */
@@ -43,9 +38,12 @@ $newline never
       \  });
       }
 
+
+  <body .no-js>
+    <!-- removes no-js class from body if client supports javascript -->
     <script>
-      document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/,'js');
-  <body>
+      document.body.classList.remove('no-js');
+
     ^{pageBody pc}
 
     $maybe analytics <- appAnalytics $ appSettings master
diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet
index 14430ab61..b628912f0 100644
--- a/templates/default-layout.hamlet
+++ b/templates/default-layout.hamlet
@@ -1,60 +1,20 @@
+<!-- navigation -->
+^{navbar}
 
-<!-- Static navbar -->
-<nav .navbar.navbar-default.navbar-static-top>
-    <div .container>
-        <div .navbar-header>
-            <button type="button" .navbar-toggle.collapsed data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
+<div .main>
 
-        <div #navbar .collapse.navbar-collapse>
-            <ul .nav.navbar-nav>
-                $forall menuType <- menuTypes
-                  $case menuType
-                    $of NavbarLeft (MenuItem label route _)
-                      <li :Just route == mcurrentRoute:.active>
-                        <a href=@{route}>#{label}
-                    $of NavbarExtra (MenuItem label route _)
-                      <li :Just route == mcurrentRoute:.active>
-                        <a href=@{route}>#{label}
-                    $of _
+  <!-- secondary navigation at the side -->
+  ^{asidenav}
 
-            <ul .nav.navbar-nav.navbar-right>
-                $forall menuType <- menuTypes
-                  $case menuType
-                    $of NavbarRight (MenuItem label route _)
-                      <li :Just route == mcurrentRoute:.active>
-                        <a href=@{route}>#{label}
-                    $of _
-
-<!-- Page Contents -->
-
-<div .container>
-    $if not $ Just HomeR == mcurrentRoute
-        <ul .breadcrumb>
-            $forall bc <- parents
-                <li>
-                    <a href="@{fst bc}">#{snd bc}
-
-            <li .active>#{title}
+  <div .main__content>
 
+    <!-- alerts -->
     $forall (status, msg) <- mmsgs
       $with status2 <- bool status "info" (status == "")
         <div class="alert alert-#{status2}">#{msg}
 
+    <!-- prime page actions -->
+    ^{pageactionprime}
 
-$if (Just HomeR == mcurrentRoute)
+    <!-- actual content -->
     ^{widget}
-$else
-    <div .container>
-        <div .row>
-            <div .col-md-12>
-                ^{widget}
-
-<!-- Footer -->
-<footer .footer>
-    <div .container>
-        <p .text-muted>
-            #{appCopyright $ appSettings master}
diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index cc0884a30..cc33bfe58 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -1,73 +1,221 @@
-.masthead,
-.navbar {
-    background-color: rgb(27, 28, 29);
-}
-
-.navbar-default .navbar-nav > .active > a {
-    background-color: transparent;
-    border-bottom: 2px solid white;
-}
-
-.navbar-nav {
-    padding-bottom: 1em;
-}
-
-.masthead {
-    margin-top: -21px;
-    color: white;
-    text-align: center;
-    min-height: 500px;
-}
-
-.masthead .header {
-    max-width: 700px;
-    margin: 0 auto;
-    font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
-}
-
-.masthead h1.header {
-    margin-top: 1em;
-    margin-bottom: 0em;
-    font-size: 4.5em;
-    line-height: 1.2em;
-    font-weight: normal;
- }
-
-.masthead h2 {
-    font-size: 1.7em;
-    font-weight: normal;
-}
-
-.masthead .btn {
-    margin: 1em 0;
-}
+:root {
+  /* THEME 1 */
+  --base00: #72a85b;
+  --base-bg-color: #1d1c1d;
+  --base-font-color: #fff;
+  --sec-font-color: #fff;
+  --box-bg-color: #3c3c3c;
+  /* THEME 2 */
+  --base00: #38428a;
+  --base-bg-color: #ffffff;
+  --base-font-color: rgb(53, 53, 53);
+  --sec-font-color: #eaf2ff;
+  --box-bg-color: #dddddd;
+  /* THEME 3 */
+  --darkbase: #364B60;
+  --lightbase: #2490E8;
+  --lighterbase: #60C2FF;
+  --whitebase: #FCFFFA;
+  --greybase: #B1B5C0;
+  --fontbase: #34303a;
+  --fontsec: #5b5861;
+  /* THEME 4 */
+  --darkbase: #263C4C;
+  --lightbase: #598EB5;
+  --lighterbase: #5F98C2;
+  --whitebase: #FCFFFA;
+  --greybase: #B1B5C0;
+  --lightgreybase: #D9DEDB;
+  --blackbase: #1A2A36;
+  --fontbase: #34303a;
+  --fontsec: #5b5861;
+  --primarybase: #4C7A9C;
 
 
-/* Common styles for all types */
-.bs-callout {
-  padding: 20px;
-  margin: 20px 0;
-  border: 1px solid #eee;
-  border-left-width: 5px;
-  border-radius: 3px;
+  /* THEME INDEPENDENT COLORS */
+  --errorbase: red;
+  --warningbase: #fe7700;
+  --validbase: #2dcc35;
+  --infobase: var(--darkbase);
+
+
+  /* FONTS */
+  --fontfamilybase: "Source Sans Pro", Helvetica, sans-serif;
+
+  /* DIMENSIONS */
+  --header-height: 80px;
+  --header-height-collapsed: 50px;
 }
 
-.bs-callout p:last-child {
-  margin-bottom: 0;
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
 }
 
-.bs-callout-info {
-  border-left-color: #1b809e;
+body {
+  background-color: white;
+  color: var(--fontbase);
+  font-family: var(--fontfamilybase);
+  font-weight: 400;
+  font-size: 16px;
+  overflow-y: scroll;
 }
 
-/* Space things out */
-.bs-docs-section {
-  margin-bottom: 60px;
-}
-.bs-docs-section:last-child {
-  margin-bottom: 0;
+a,
+a:visited {
+  text-decoration: none;
+  font-weight: 600;
+  transition: color .2s ease, background-color .2s ease;
 }
 
-#message {
-    margin-bottom: 40px;
+ul {
+  list-style-type: none;
 }
+
+.list--inline > li {
+  display: inline-block;
+}
+
+h1, h2, h3, h4, h5 {
+  font-weight: 600;
+}
+h1 {
+  font-size: 32px;
+  margin: 20px 0 10px;
+}
+h2 {
+  font-size: 24px;
+  margin: 10px 0 5px;
+}
+h3 {
+  font-size: 20px;
+  margin: 5px 0;
+}
+h4 {
+  font-size: 16px;
+  margin: 0;
+}
+table {
+  margin: 21px 0;
+}
+
+.scrolltable {
+  width: 100%;
+  overflow: auto;
+}
+
+th, td {
+  text-align: left;
+  padding: 0 13px 0 7px;
+  vertical-align: baseline;
+}
+th:first-child,
+td:first-child {
+  padding-left: 0;
+  border-left: 0;
+}
+th {
+  border-left: 2px solid var(--greybase);
+}
+/* LAYOUT */
+.main {
+  display: flex;
+  min-height: calc(100vh - var(--header-height));
+  overflow: hidden;
+}
+
+.main__content {
+  position: relative;
+  background-color: white;
+  padding: 0 40px;
+  flex: 1;
+  z-index: 0;
+  overflow: hidden;
+
+  > .container {
+    margin: 20px 0;
+  }
+
+  p {
+    margin: 10px 0;
+  }
+
+  a {
+    color: var(--darkbase);
+  }
+
+  a:hover {
+    color: var(--lightbase);
+  }
+}
+
+.pseudo-focus {
+  outline: 5px auto var(--lightbase);
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+/* GENERAL BUTTON STYLES */
+input[type="submit"],
+input[type="button"],
+button,
+.btn, a.btn {
+  outline: 0;
+  border: 0;
+  box-shadow: 0;
+  background-color: var(--lightbase);
+  color: white;
+  padding: 10px 17px;
+  min-width: 100px;
+  transition: all .1s;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 4px;
+  display: inline-block;
+}
+input.btn-primary,
+button.btn-primary,
+a.btn.btn-primary,
+.btn.btn-primary {
+  background-color: var(--primarybase);
+}
+
+input.btn-info,
+button.btn-info,
+a.btn.btn-info,
+.btn.btn-info {
+  background-color: var(--infobase)
+}
+
+input[type="submit"][disabled],
+input[type="button"][disabled],
+button[disabled],
+a.btn[disabled],
+.btn[disabled] {
+  opacity: 0.3;
+  background-color: var(--greybase);
+  cursor: default;
+}
+
+input[type="submit"]:not([disabled]):hover,
+input[type="button"]:not([disabled]):hover,
+button:not([disabled]):hover,
+a.btn:not([disabled]):hover,
+.btn:not([disabled]):hover {
+  background-color: var(--lighterbase);
+  text-decoration: underline;
+  color: white;
+}
+
+input[type="submit"].btn-info:hover,
+input[type="button"].btn-info:hover,
+button.btn-info:hover,
+a.btn.btn-info:hover,
+.btn.btn-info:hover {
+  background-color: var(--greybase)
+}
+
+.alert-debug {
+  background-color: rgb(240, 30, 240);
+}
+
diff --git a/templates/form.hamlet b/templates/form.hamlet
deleted file mode 100644
index b1e3cd9ee..000000000
--- a/templates/form.hamlet
+++ /dev/null
@@ -1,9 +0,0 @@
-$newline never
-#{fragment}
-$case formLayout
-  $of FormStandard
-    $forall view <- views
-      <div :fvRequired view:.required :not $ fvRequired view:.optional :isJust $ fvErrors view:.has-error>
-        $if not (Blaze.null $ fvLabel view)
-          <label for=#{fvId view}>#{fvLabel view}
-        ^{fvInput view}
diff --git a/templates/formPage.hamlet b/templates/formPage.hamlet
index aa2d687d1..855a10e76 100644
--- a/templates/formPage.hamlet
+++ b/templates/formPage.hamlet
@@ -5,9 +5,8 @@
                 <div .page-header>
                     <h1 #forms>
                       #{formTitle}
-
         <div .row>
             <div .col-md-10 .col-lg-9>
                 <div .bs-callout bs-callout-info well>
                     <form .form-horizontal method=post action=@{actionUrl}#forms enctype=#{formEnctype}>
-                        ^{formWidget}                        
+                        ^{formWidget}
diff --git a/templates/formPageI18n.hamlet b/templates/formPageI18n.hamlet
new file mode 100644
index 000000000..e7b11f4a9
--- /dev/null
+++ b/templates/formPageI18n.hamlet
@@ -0,0 +1,15 @@
+<div .container>
+    <div .bs-docs-section>
+        <div .row>
+            <div .col-lg-12>
+                <div .page-header>
+                    <h1 #forms>
+                      _{formTitle}
+                    $maybe text <- formText
+                      _{text}
+
+        <div .row>
+            <div .col-md-10 .col-lg-9>
+                <div .bs-callout bs-callout-info well>
+                    <form .form-horizontal method=post action=@{actionUrl}#forms enctype=#{formEnctype}>
+                        ^{formWidget}                        
diff --git a/templates/home.hamlet b/templates/home.hamlet
index 27d174a8b..0ee62ec29 100644
--- a/templates/home.hamlet
+++ b/templates/home.hamlet
@@ -1,82 +1,100 @@
-<div .masthead>
-    <div .container>
-        <div .row>
-            <h1 .header>
-                ReWorX - Demo
-            <h3>
-                Testumgebung für die Re-Implementierung von 
-                <a href="https://uniworx.ifi.lmu.de/">
-                  UniWorX
-
 <div .container>
-    <!-- Starting
-        ================================================== -->
-    <div .bs-docs-section>
-        <div .row>
-            <div .col-lg-12>
-                <div .page-header>
-                    <h2 #start>Übersicht
-                    
-                    <p>
-                        Die Reimplementierung von 
-                        UniWorX ist noch nicht abgeschlossen.
-                        
-                        <div .alert .alert-danger>
-                          Das System ist noch nicht produktiv
-                          einsetzbar
-                          
-    <div .bs-docs-section>
-        <div .row>
-            <div .col-lg-12>
-                <div .page-header>
-                    <h2 #design>Design 
-                    
-                    <p>
-                        Wir konzentrieren uns derzeit 
-                        ausschließlich auf die Funktionalität.
-                    <p>                        
-                        Insbesondere Formulare zeigen
-                        alle Eingabefelder und Knöpfe
-                        ohne eine gezielte Anordnung 
-                        und Reihenfolge. 
-                        Dies läßt sich leicht nachträglich einstellen.
-                    <p>    
-                        Momentan werden noch keine speziellen Grafiken oder CSS verwendet;
-                        sondern nur gewöhnliches Bootstrap3.
-                        
-    <div .bs-docs-section>
-        <div .row>
-            <div .col-lg-12>
-                <div .page-header>
-                    <h3 #design>Teilweise funktionierende Abschnitte
-                                          
-                    <ul .list-group>
+  <h1>ReWorX - Demo
+  <h3>
+    Testumgebung für die Re-Implementierung von <a href="https://uniworx.ifi.lmu.de/">UniWorX</a>
+  <p>
+    Die Reimplementierung von
+    UniWorX ist noch nicht abgeschlossen.
 
-                      <li .list-group-item>
-                        <a href=@{UsersR}>Benutzer Verwaltung
+  <p .alert .alert-danger>Das System ist noch nicht produktiv einsetzbar
 
-                      <li .list-group-item>
-                        <a href=@{TermShowR}>Semester Verwaltung
-                        <a href=@{TermEditR}>Neues Semester anlegen
+<hr>
+<div .container>
+  <h2 .js-show-hide__toggle>Teilweise funktionierende Abschnitte
 
-                        
-                      <li .list-group-item>
-                        <a href=@{CourseEditR}>Kurse anlegen
-                        editieren und anzeigen
+  <ul>
+    <li .list-group-item>
+      <a href=@{UsersR}>Benutzer Verwaltung
 
-                       <li .list-group-item>
-                        <a href=@{SubmissionListR}>Dateien hochladen und abrufen  
-                        
-                    <h3 #design>Funktionen zum Testen 
-                                          
-                    <ul .list-group>
+    <li .list-group-item>
+      <a href=@{TermShowR}>Semester Verwaltung
+      <a href=@{TermEditR}>Neues Semester anlegen
 
-                      <li .list-group-item>
-                        Knopf-Test:
-                          <form .form-inline method=post action=@{HomeR} enctype=#{btnEnctype}>
-                            ^{btnWdgt}
-                        
-                      <li .list-group-item>
-                        <a href=@{CourseEditR}>Kurse anlegen
-                        editieren und anzeigen
-    
+    <li .list-group-item>
+                        <a href=@{CourseNewR}>Kurse anlegen
+
+    <li .list-group-item>
+      <a href=@{SubmissionListR}>Dateien hochladen und abrufen
+
+<hr>
+<div .container>
+  <h2 .js-show-hide__toggle data-collapsed=true>Tabellen
+  <table .js-sortable>
+    <thead>
+      <tr>
+        <th .sorted-asc>ID
+        <th>TH1
+        <th>TH2
+        <th>TH3
+    <tbody>
+      <tr>
+        <td>0
+        <td>NT2
+        <td>CON2
+        <td>3
+      <tr>
+        <td>1
+        <td>5
+        <td>ONT2
+        <td>13
+      <tr>
+        <td>2
+        <td>CONT1
+        <td>NT2
+        <td>43
+      <tr>
+        <td>3
+        <td>43
+        <td>T2C2
+        <td>35
+      <tr>
+        <td>4
+        <td>73
+        <td>CA62
+        <td>7
+
+<hr>
+<div .container>
+  <h2>Funktionen zum Testen
+
+  <ul>
+    <li>
+      Knopf-Test:
+        <form .form-inline method=post action=@{HomeR} enctype=#{btnEnctype}>
+          ^{btnWdgt}
+    <li><br>
+      Modals:
+      ^{modal ".toggler1" Nothing}
+      <a href="/" .btn.toggler1>Klick mich für Ajax-Test
+        <noscript>(Für Modals bitte JS aktivieren)</noscript>
+      ^{modal ".toggler2" (Just "Test wegen Modal")}
+      <div .btn.toggler2>Klick mich für Content-Test
+        <noscript>(Für Modals bitte JS aktivieren)</noscript>
+
+    <li><br>
+      Multi-File-Input für bereits hochgeladene Dateien:
+      <form>
+        <div .form-group>
+          <label .form-group__label>Datei(en)
+          $# file 1
+          <div .file-checkbox__container>
+            <label .file-checkbox__label.reactive-label.btn for="f2-1">Datenschutz.txt
+            <div .checkbox>
+              <input .file-checkbox id="f2-1" name="f2" value="Datenschutz.txt" type="checkbox">
+              <label for="f2-1">
+          $# file 2
+          <div .file-checkbox__container>
+            <label .file-checkbox__label.reactive-label.btn for="f2-2">fill-db.hs
+            <div .checkbox>
+              <input .file-checkbox id="f2-2" name="f2" value="fill-db.hs" type="checkbox">
+              <label for="f2-2">
diff --git a/templates/home.julius b/templates/home.julius
new file mode 100644
index 000000000..e69de29bb
diff --git a/templates/multiFileField.hamlet b/templates/multiFileField.hamlet
new file mode 100644
index 000000000..9a9822c84
--- /dev/null
+++ b/templates/multiFileField.hamlet
@@ -0,0 +1,17 @@
+$newline never
+
+<input type=checkbox id=#{fieldId}_zip name=#{fieldName} value=#{unpackZips} :req:required>
+<label for=#{fieldId}_zip>
+  ZIPs entpacken
+
+
+<ul>
+  $forall FileUploadInfo{..} <- fileInfos
+    <li>
+      <input type=checkbox name=#{fieldName} value=#{toPathPiece fuiId} id=#{fuiHtmlId} :fuiChecked:checked>
+      <span style="display:none">
+        #{fuiTitle}
+      <label for=#{fuiHtmlId}>
+        #{fuiTitle}
+  <li>
+    <input type=file id=#{fieldId} name=#{fieldName} multiple>
diff --git a/templates/newSheet.hamlet b/templates/newSheet.hamlet
deleted file mode 100644
index 83a5a3606..000000000
--- a/templates/newSheet.hamlet
+++ /dev/null
@@ -1,20 +0,0 @@
-<div .container>
-    <div .bs-docs-section>
-        <div .row>
-            <div .col-lg-12>
-                <div .page-header>
-                    <h1 #forms>Neuen Blatt anlegen:
-
-                    <p>
-                        Bitte alles ausfüllen!
-
-        <div .row>
-            <div .col-lg-6>
-                <div .bs-callout bs-callout-info well>
-                    <form .form-horizontal method=post #forms enctype=#{enc}>
-                        ^{wdgt}
-
-                        <button .btn.btn-primary type="submit">
-                            Blatt anlegen
-
-
diff --git a/templates/sheetAdmin.hamlet b/templates/sheetShow.hamlet
similarity index 67%
rename from templates/sheetAdmin.hamlet
rename to templates/sheetShow.hamlet
index e7ea0f7bf..0d2f4090d 100644
--- a/templates/sheetAdmin.hamlet
+++ b/templates/sheetShow.hamlet
@@ -24,7 +24,16 @@
 
         <div .row>
             <div .col-lg-12>     
-                <h2>Abgaben
+                <h2>Dateien
+                <ul>
+                  $forall fileLink <- fileLinks
+                    <li>
+                      $case fileLink
+                        $of CourseR _ _ (SheetR (SheetFileR _ typ name))
+                          #{toPathPiece typ}
+                          <a href=@{fileLink}>#{name}
+                        $of other
+                          <a href=@{fileLink}>@{fileLink}
 
     <hr>
 
diff --git a/templates/standalone/inputs.hamlet b/templates/standalone/inputs.hamlet
new file mode 100644
index 000000000..d5383e417
--- /dev/null
+++ b/templates/standalone/inputs.hamlet
@@ -0,0 +1 @@
+<!-- only here to be able to include inputs using `toWidget` -->
diff --git a/templates/standalone/inputs.julius b/templates/standalone/inputs.julius
new file mode 100644
index 000000000..bced64e6e
--- /dev/null
+++ b/templates/standalone/inputs.julius
@@ -0,0 +1,236 @@
+(function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  // makes <label> smaller if <input> is focussed
+  window.utils.reactiveInputLabel = function(input, label) {
+    // updates to dom
+    if (input.value.length > 0) {
+      label.classList.add('reactive-label--small');
+    }
+    // add event listeners
+    input.addEventListener('focus', function() {
+      label.classList.add('reactive-label--small');
+    });
+    label.addEventListener('click', function() {
+      label.classList.add('reactive-label--small');
+      input.focus();
+    });
+    input.addEventListener('blur', function() {
+      if (input.value.length < 1) {
+        label.classList.remove('reactive-label--small');
+      }
+    });
+  };
+
+  // allows for multiple file uploads with separate inputs
+  window.utils.reactiveFileUpload = function(input, parent) {
+    var currValidInputCount = 0;
+    var addMore = false;
+    var inputName = input.getAttribute('name');
+    var isMulti = input.getAttribute('multiple') ? true : false;
+    // FileInput PseudoClass
+    function FileInput(container, input, label, remover) {
+      this.container = container;
+      this.input = input;
+      this.label = label;
+      this.remover = remover;
+      addListener(this);
+
+      this.addTo = function(parentElement) {
+        parentElement.appendChild(this.container);
+      }
+      this.remove = function() {
+        this.container.remove();
+      }
+      this.wasValid = function() {
+        return this.container.classList.contains('file-input__container--valid');
+      }
+    }
+    function addNextInput() {
+      var inputs = parent.querySelectorAll('.file-input__container');
+      if (inputs[inputs.length - 1].classList.contains('file-input__container--valid')) {
+        makeInput(inputName).addTo(parent);
+      }
+    }
+    // updates submitbutton and form-group-stripe
+    function updateForm() {
+      var submitBtn = parent.parentElement.querySelector('[type=submit]');
+      parent.classList.remove('form-group--has-error');
+      if (currValidInputCount > 0) {
+        if (parent.classList.contains('form-group')) {
+          parent.classList.add('form-group--valid')
+        }
+        submitBtn.removeAttribute('disabled');
+        if (isMulti) {
+          addNextInput();
+        }
+      } else {
+        if (parent.classList.contains('form-group')) {
+          parent.classList.remove('form-group--valid')
+        }
+        submitBtn.setAttribute('disabled', 'disabled');
+      }
+    }
+    // addseventlistener destInput
+    function addListener(fileInput) {
+      fileInput.input.addEventListener('change', function(event) {
+        if (fileInput.input.value.length > 0) {
+          // update label
+          var filePath = fileInput.input.value.replace(/\\/g, '/').split('/');
+          var fileName = filePath[filePath.length - 1];
+          fileInput.label.innerHTML = fileName;
+          // increase count if this field was empty previously
+          if (!fileInput.wasValid()) {
+            currValidInputCount++;
+          }
+          fileInput.container.classList.add('file-input__container--valid')
+          // show next input
+        } else {
+          if (isMulti) {
+            currValidInputCount--;
+          }
+          clearInput(fileInput);
+        }
+        updateForm();
+      });
+      fileInput.input.addEventListener('focus', function() {
+        fileInput.container.classList.add('pseudo-focus');
+      });
+      fileInput.input.addEventListener('blur', function() {
+        fileInput.container.classList.remove('pseudo-focus');
+      });
+      fileInput.remover.addEventListener('click', function() {
+        if (fileInput.wasValid()) {
+          currValidInputCount--;
+        }
+        clearInput(fileInput);
+      });
+    }
+
+    // clears or removes fileinput based on multi-file or not
+    function clearInput(fileInput) {
+      if (isMulti) {
+        fileInput.remove();
+      } else {
+        fileInput.container.classList.remove('file-input__container--valid')
+        fileInput.label.innerHTML = '';
+      }
+      updateForm();
+    }
+    // create new wrapped input element with name name
+    function makeInput(name) {
+      var cont =      document.createElement('div');
+      var desc =      document.createElement('label');
+      var nextInput = document.createElement('input');
+      var remover =   document.createElement('div');
+      cont.classList.add('file-input__container');
+      desc.classList.add('file-input__label', 'btn');
+      nextInput.classList.add('js-file-input');
+      desc.setAttribute('for', name + '-' + currValidInputCount);
+      remover.classList.add('file-input__remover');
+      nextInput.setAttribute('id', name + '-' + currValidInputCount);
+      nextInput.setAttribute('name', name);
+      nextInput.setAttribute('type', 'file');
+      cont.appendChild(nextInput);
+      cont.appendChild(desc);
+      cont.appendChild(remover);
+      return new FileInput(cont, nextInput, desc, remover);
+    }
+    // initial setup
+    function setup() {
+      var newInput = makeInput(inputName);
+      input.remove();
+      newInput.addTo(parent);
+      updateForm();
+    }
+    setup();
+  }
+
+  // to remove previously uploaded files
+  window.utils.reactiveFileCheckbox = function(input, label, parent) {
+    // adds eventlistener(s)
+    function addListener(container) {
+      container.addEventListener('click', function() {
+        input.click();
+      });
+      input.addEventListener('change', function(event) {
+        container.classList.toggle('file-checkbox__container--valid', this.checked);
+      });
+    }
+
+    // initial setup
+    function setup() {
+      var cont = input.parentNode;
+      while (cont !== document.body) {
+        if (cont.classList.contains('file-checkbox__container')) {
+          break;
+        }
+        cont = cont.parentNode;
+      }
+
+      // take care of properly moving elements
+      if (input.parentNode.classList.contains('checkbox')) {
+        input.parentNode.classList.add('file-checkbox__checkbox');
+      } else {
+        input.classList.add('file-checkbox__checkbox');
+      }
+      addListener(cont);
+    }
+    setup();
+  }
+
+  window.utils.reactiveFormGroup = function(formGroup, input) {
+    // updates to dom
+    if (input.value.length > 0) {
+      formGroup.classList.add('form-group--valid');
+    } else {
+      formGroup.classList.remove('form-group--valid');
+    }
+    input.addEventListener('input', function() {
+      formGroup.classList.remove('form-group--has-error');
+      if (input.value.length > 0) {
+        formGroup.classList.add('form-group--valid');
+      } else {
+        formGroup.classList.remove('form-group--valid');
+      }
+    });
+  };
+
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  // setup reactive labels
+  Array.from(document.querySelectorAll('.reactive-label')).forEach(function(label) {
+    var input = document.querySelector('#' + label.getAttribute('for'));
+    if (!input) {
+      console.error('No input found for ReactiveLabel! Targeted input: \'#%s\'', label.getAttribute('for'));
+      return false;
+    }
+
+    var parent = label.parentElement;
+    var type = input.getAttribute('type');
+    var isFileUpload = /file/i.test(type);
+    var isFileCheckbox = input.classList.contains('file-checkbox');
+    var isListening = !RegExp(['date', 'checkbox', 'radio', 'hidden', 'file'].join('|')).test(type);
+    var isInFormGroup = parent.classList.contains('form-group') && parent.classList.contains('form-group--required');
+
+
+    if (isInFormGroup) {
+      window.utils.reactiveFormGroup(parent, input);
+    }
+    if (isFileUpload) {
+      window.utils.reactiveFileUpload(input, parent);
+    }
+    if (isFileCheckbox) {
+      window.utils.reactiveFileCheckbox(input, label, parent);
+    }
+    if (isListening) {
+      window.utils.reactiveInputLabel(input, label);
+    } else {
+      label.classList.remove('reactive-label');
+    }
+  });
+});
diff --git a/templates/standalone/inputs.lucius b/templates/standalone/inputs.lucius
new file mode 100644
index 000000000..c5514988a
--- /dev/null
+++ b/templates/standalone/inputs.lucius
@@ -0,0 +1,360 @@
+/* GENERAL STYLES FOR FORMS */
+form {
+  margin: 20px 0;
+}
+
+/* FORM GROUPS */
+.form-group {
+  position: relative;
+  display: flex;
+  display: grid;
+  grid-template-columns: 25% max-content;
+  grid-auto-columns: 25%;
+  grid-gap: 5px;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 10px 0;
+  padding-left: 10px;
+  border-left: 8px solid transparent;
+}
+
+.form-group--required {
+  border-left: 8px solid var(--lighterbase);
+}
+
+.form-group--valid {
+  border-left: 8px solid var(--validbase);
+}
+
+.form-group--has-error {
+  border-left: 8px solid var(--errorbase) !important;
+}
+
+.form-group__label {
+  width: 25%;
+  white-space: nowrap;
+  font-weight: 600;
+}
+
+@media (max-width: 999px) {
+  .form-group {
+    grid-template-columns: 1fr;
+    grid-template-rows: 30px;
+    align-items: baseline;
+    margin-top: 17px;
+    flex-direction: column;
+
+    > * {
+      width: 100%;
+    }
+  }
+}
+
+/* TEXT INPUTS */
+input[type="text"],
+input[type="password"],
+input[type="url"],
+input[type="number"],
+input[type="email"] {
+  background-color: rgba(0, 0, 0, 0.05);
+  padding: 7px 3px 7px;
+  outline: 0;
+  border: 0;
+  border-bottom: 2px solid var(--darkbase);
+  box-shadow: 0 2px 13px rgba(0, 0, 0, 0.05);
+  color: var(--fontbase);
+  transition: all .1s;
+  font-size: 16px;
+  min-width: 400px;
+}
+
+input[type="text"]:focus,
+input[type="password"]:focus,
+input[type="url"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus {
+  border-bottom-color: var(--lightbase);
+  background-color: transparent;
+}
+
+/* BUTTON STYLE SEE default-layout.lucius */
+
+/* TEXTAREAS */
+textarea {
+  outline: 0;
+  border: 0;
+  padding: 7px 4px;
+  min-width: 400px;
+  min-height: 100px;
+  font-family: var(--fontfamilybase);
+  font-size: 16px;
+  color: var(--fontbase);
+  background-color: rgba(0, 0, 0, 0.05);
+  box-shadow: 0 2px 13px rgba(0, 0, 0, 0.05);
+  border-bottom: 2px solid var(--darkbase);
+}
+
+textarea:focus {
+  background-color: transparent;
+  border-bottom-color: var(--lightbase);
+}
+
+/* CUSTOM LEGACY CHECKBOX AND RADIO BOXES */
+input[type="checkbox"] {
+  position: relative;
+  height: 20px;
+  width: 20px;
+  -webkit-appearance: none;
+  cursor: pointer;
+}
+input[type="checkbox"]::before {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  background-color: var(--lighterbase);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 2px;
+}
+input[type="checkbox"]:checked::before {
+  background-color: var(--lightbase);
+}
+input[type="checkbox"]:checked::after {
+  content: '✓';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 20px;
+}
+
+/* CUSTOM CHECKBOXES AND RADIO BOXES */
+/* Completely replaces legacy checkbox and radiobox */
+.checkbox,
+.radio {
+  position: relative;
+
+  > [type="checkbox"],
+  > [type="radio"] {
+    display: none;
+  }
+
+  > label {
+    display: block;
+    height: 30px;
+    width: 30px;
+    background-color: var(--greybase);
+    border-radius: 4px;
+    color: white;
+    cursor: pointer;
+  }
+
+  > label::before,
+  > label::after {
+    content: '';
+    position: absolute;
+    top: 14px;
+    left: 5px;
+    display: block;
+    width: 20px;
+    height: 20px;
+    background-color: white;
+    transition: all .2s;
+  }
+
+  > label::before {
+    width: 20px;
+    height: 2px;
+    transform: scale(0.1, 0.1);
+  }
+
+  > label::after {
+    width: 20px;
+    height: 2px;
+    transform: scale(0.1, 0.1);
+  }
+
+  > :checked + label {
+    background-color: var(--lightbase);
+    text-decoration: underline;
+  }
+
+  &:hover > label {
+    background-color: var(--lighterbase);
+  }
+
+  &:hover > label::before {
+    transform: scale(0.8, 0.4);
+  }
+
+  > :checked + label::before {
+    transform: scale(1, 1) rotate(45deg);
+  }
+
+  > :checked + label:hover::after,
+  > :checked + label:hover::before {
+    transform: scale(1, 1) rotate(0deg);
+  }
+
+  &:hover > label::after {
+    transform: scale(0.8, 0.4);
+  }
+
+  > :checked + label::after {
+    transform: scale(1, 1) rotate(-45deg);
+  }
+}
+.radio > label::before {
+  transform: scale(0.01, 0.01) rotate(45deg);
+}
+.radio > label::after {
+  transform: scale(0.01, 0.01) rotate(-45deg);
+}
+
+.radio::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  right: 2px;
+  bottom: 2px;
+  border-radius: 4px;
+  border: 2px solid white;
+  z-index: -1;
+}
+
+/* REACTIVE LABELS */
+.reactive-label {
+  cursor: text;
+  color: var(--fontsec);
+  transform: translate(0, 0);
+  transition: all .1s;
+}
+.reactive-label--small {
+  cursor: default;
+  color: var(--fontbase);
+}
+@media (max-width: 999px) {
+  .reactive-label {
+    position: relative;
+    transform: translate(2px, 30px);
+  }
+  .reactive-label--small {
+    transform: translate(2px, 0px);
+    color: var(--fontsec);
+    /*font-size: 14px;*/
+  }
+}
+
+/* CUSTOM FILE INPUT */
+input[type="file"].js-file-input {
+  color: white;
+  width: 0.1px;
+  height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+  outline: 0;
+  border: 0;
+}
+.file-input__container,
+.file-checkbox__container {
+  grid-column-start: 2;
+  display: flex;
+  justify-content: space-between;
+}
+.file-input__label,
+.file-input__remover,
+.file-checkbox__label,
+.file-checkbox__remover {
+  display: block;
+  border-radius: 2px;
+  padding: 5px 13px;
+  color: var(--whitebase);
+  cursor: pointer;
+}
+.file-input__label,
+.file-checkbox__label {
+  text-align: left;
+  position: relative;
+  height: 30px;
+}
+.file-checkbox__label {
+  background-color: var(--greybase);
+  text-decoration: line-through;
+}
+.file-input__label.btn,
+.file-checkbox__label.btn {
+  padding: 5px 13px;
+}
+.file-input__label::after,
+.file-input__label::before {
+  position: absolute;
+  content: '';
+  background-color: white;
+  width: 16px;
+  height: 2px;
+  top: 14px;
+  top: 50%;
+  left: 12px;
+  left: 50%;
+}
+
+.file-input__label::after {
+  transform: translate(-50%, -50%) rotate(90deg);
+}
+.file-input__label::before {
+  transform: translate(-50%, -50%);
+}
+.file-checkbox__checkbox {
+  margin-left: 10px;
+}
+.file-input__remover {
+  display: none;
+  width: 40px;
+  height: 30px;
+  text-align: center;
+  background-color: var(--warningbase);
+  position: relative;
+  margin-left: 10px;
+}
+.file-input__remover::before {
+  position: absolute;
+  content: '';
+  width: 16px;
+  height: 2px;
+  top: 14px;
+  left: 12px;
+  background-color: white;
+}
+.file-input__container--valid > .file-input__label {
+  background-color: var(--lightbase);
+}
+.file-checkbox__container--valid > .file-checkbox__label {
+  text-decoration: none;
+  background-color: var(--lighterbase);
+
+  &:hover {
+    background-color: var(--greybase);
+    text-decoration: line-through;
+  }
+}
+.file-input__container--valid > .file-input__label::before,
+.file-input__container--valid > .file-input__label::after {
+  content: none;
+}
+.file-input__container--valid > .file-input__remover {
+  display: block;
+}
+@media (max-width: 999px) {
+  .file-input__container,
+  .file-checkbox__container {
+    grid-column-start: 1;
+  }
+}
diff --git a/templates/standalone/modal.hamlet b/templates/standalone/modal.hamlet
new file mode 100644
index 000000000..6e29713b0
--- /dev/null
+++ b/templates/standalone/modal.hamlet
@@ -0,0 +1 @@
+<!-- only here to be able to include modal using `toWidget` -->
diff --git a/templates/standalone/modal.julius b/templates/standalone/modal.julius
new file mode 100644
index 000000000..be6d1c038
--- /dev/null
+++ b/templates/standalone/modal.julius
@@ -0,0 +1,100 @@
+(function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  window.utils.modal = function(modal) {
+    var overlay = document.createElement('div');
+    var closer = document.createElement('div');
+    var trigger = document.querySelector(modal.dataset.trigger);
+    var origParent = modal.parentNode;
+
+    function open(event) {
+      if (event) {
+        event.preventDefault();
+      }
+      modal.classList.add('modal--open');
+      overlay.classList.add('modal__overlay');
+      document.body.insertBefore(modal, null);
+      document.body.insertBefore(overlay, modal);
+      overlay.classList.add('modal__overlay--open');
+      toggleScroll(false);
+
+      if (modal.dataset.closeable === 'true') {
+        closer.classList.add('modal__closer');
+        modal.insertBefore(closer, null);
+        closer.addEventListener('click', close, false);
+        overlay.addEventListener('click', close, false);
+      }
+    }
+
+    // open this modal with an event:
+    // document.dispatchEvent(new CustomEvent('modal-open', { dateils: {for: 'modal-13'}}))
+    function openOnEvent(event) {
+      if (event.detail.for === modal.getAttribute('id')) {
+        open();
+      }
+    }
+
+    function close(event) {
+      if (typeof event === 'undefined' || event.target === closer || event.target === overlay) {
+        overlay.remove();
+        origParent.insertBefore(modal, null);
+        modal.classList.remove('modal--open');
+        toggleScroll(true);
+        closer.removeEventListener('click', close, false);
+      }
+    };
+
+    function setup() {
+      // every modal can be openend via document-wide event, see openOnEvent
+      document.addEventListener('modal-open', openOnEvent, false);
+      // if modal has trigger assigned to it open modal on click
+      if (trigger) {
+        trigger.classList.add('modal__trigger');
+        trigger.addEventListener('click', open, false);
+      }
+      // if there is no content specified for the modal we assume that
+      // the content is supposed to be the page the trigger links to.
+      // so we check if the trigger has a href-attribute, fetch that page
+      // and replace the modal content with the response
+      var replaceMe = modal.querySelector('.replace-me');
+      var replaceWith = trigger ? trigger.getAttribute('href') : '';
+      if (replaceMe) {
+        replaceMe.classList.remove('replace-me');
+        replaceMe.innerText = '...loading';
+        if (replaceWith.length > 0) {
+          fetch(replaceWith).then(function(response) {
+            return response.text();
+          }).then(function(body) {
+            var modalContent = document.createElement('div');
+            modalContent.innerHTML = body;
+            var main = modalContent.querySelector('.main__content');
+            if (main) {
+              replaceMe.innerText = '';
+              replaceMe.insertBefore(main, null);
+            } else {
+              replaceMe.innerHTML = body;
+            }
+          });
+        }
+      }
+      // tell further modals, that this one already got initialized
+      modal.classList.add('js-modal-initialized');
+    }
+    setup();
+  };
+
+  // make sure document doesn't scroll when modal is active
+  function toggleScroll(scrollable) {
+    document.body.classList.toggle('no-scroll', !scrollable);
+  }
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  Array.from(document.querySelectorAll('.js-modal:not(.js-modal-initialized)')).map(function(modal) {
+    new utils.modal(modal);
+  });
+
+}, false);
diff --git a/templates/standalone/modal.lucius b/templates/standalone/modal.lucius
new file mode 100644
index 000000000..a511f58c6
--- /dev/null
+++ b/templates/standalone/modal.lucius
@@ -0,0 +1,87 @@
+.modal {
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0.8, 0.8);
+  display: block;
+  background-color: rgba(255, 255, 255, 0.9);
+  min-width: 60vw;
+  min-height: 100px;
+  max-height: calc(100vh - 30px);
+  border-radius: 7px;
+  z-index: -1;
+  color: var(--fontbase);
+  padding: 20px;
+  overflow: auto;
+  opacity: 0;
+  transition: all .15s ease;
+
+  &.modal--open {
+    opacity: 1;
+    z-index: 200;
+    transform: translate(-50%, -50%) scale(1, 1);
+  }
+}
+
+@media (max-width: 999px) {
+  .modal {
+    min-width: 80vw;
+  }
+}
+@media (max-width: 666px) {
+  .modal {
+    min-width: 90vw;
+  }
+}
+@media (max-width: 444px) {
+  .modal {
+    min-width: calc(100vw - 20px);
+  }
+}
+
+.modal__overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  background-color: transparent;
+  z-index: -1;
+  opacity: 0;
+  transition: all .2s ease;
+
+  &.modal__overlay--open {
+    z-index: 199;
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.4);
+  }
+}
+
+.modal__trigger {
+  cursor: pointer;
+}
+
+.modal__closer {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  background-color: var(--darkbase);
+  border-radius: 2px;
+  cursor: pointer;
+  z-index: 20;
+
+  &::before {
+    content: '\e014';
+    font-family: 'Glyphicons Halflings';
+    color: white;
+  }
+}
+
+.no-scroll {
+  overflow: hidden;
+}
diff --git a/templates/standalone/showHide.hamlet b/templates/standalone/showHide.hamlet
new file mode 100644
index 000000000..e82fa8061
--- /dev/null
+++ b/templates/standalone/showHide.hamlet
@@ -0,0 +1 @@
+<!-- only here to be able to include showHide using `toWidget` -->
diff --git a/templates/standalone/showHide.julius b/templates/standalone/showHide.julius
new file mode 100644
index 000000000..f2391b651
--- /dev/null
+++ b/templates/standalone/showHide.julius
@@ -0,0 +1,59 @@
+/**
+ * div.js-show-hide
+ *   div.js-show-hide-toggle
+ *     toggle here
+ *   div
+ *     content here
+ */
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  var elements = Array.from(document.querySelectorAll('.js-show-hide__toggle')),
+      toggles = [],
+      path = new URL(window.location.href).pathname;
+
+
+  function addEventHandler(el) {
+    el.addEventListener('click', function elClickListener() {
+      var toggle = toggles[el.dataset.index];
+      toggle.collapsed = !toggle.collapsed;
+      toggle.parent.classList.toggle('js-show-hide--collapsed', toggle.collapsed);
+      updateLocalStorage();
+    });
+  }
+
+  function updateLocalStorage(id) {
+    var lsData = getStateFromLocalStorage();
+    lsData[path] = toggles.map(t => {
+      return {id: t.index, collapsed: t.collapsed};
+    });
+    window.localStorage.setItem('showHidesToggles', JSON.stringify(lsData));
+  }
+
+  function collapsedStateInLocalStorage(id, fallBack) {
+    var lsData = getStateFromLocalStorage();
+    if (lsData[path] && lsData[path][id] && lsData[path][id].id === id) {
+      return lsData[path][id].collapsed;
+    }
+    return fallBack;
+  }
+
+  function getStateFromLocalStorage() {
+    return JSON.parse(window.localStorage.getItem('showHidesToggles')) || {};
+  }
+
+  elements.forEach(function(el, i) {
+    el.dataset.index = i;
+    var coll = collapsedStateInLocalStorage(i, el.dataset.collapsed === 'true');
+    if (coll) {
+      el.parentElement.classList.add('js-show-hide--collapsed')
+    }
+    Array.from(el.parentElement.children).forEach(function(el) {
+      if (!el.classList.contains('js-show-hide__toggle')) {
+        el.classList.add('js-show-hide__target');
+      }
+    });
+    toggles.push({index: i, collapsed: coll, parent: el.parentElement});
+    addEventHandler(el);
+  });
+});
diff --git a/templates/standalone/showHide.lucius b/templates/standalone/showHide.lucius
new file mode 100644
index 000000000..9a0a540cf
--- /dev/null
+++ b/templates/standalone/showHide.lucius
@@ -0,0 +1,49 @@
+.js-show-hide {
+  position: relative;
+}
+
+.js-show-hide__toggle {
+  position: relative;
+}
+
+.js-show-hide__toggle:hover {
+  cursor: pointer;
+}
+
+.js-show-hide__toggle::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid transparent;
+}
+
+.js-show-hide__toggle::before,
+.js-show-hide--collapsed .js-show-hide__toggle:hover::before {
+  left: -28px;
+  top: 10px;
+  border-left: 8px solid transparent;
+  border-top: 8px solid var(--lightbase);
+}
+
+.js-show-hide__toggle:hover::before,
+.js-show-hide--collapsed .js-show-hide__toggle::before {
+  border-left: 8px solid var(--lightbase);
+  border-top: 8px solid transparent;
+  top: 5px;
+  left: -22px;
+}
+
+.js-show-hide__target {
+  transition: all .2s ease;
+  overflow: hidden;
+}
+
+.js-show-hide--collapsed > .js-show-hide__target {
+  display: block;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  max-height: 0;
+}
diff --git a/templates/standalone/sortable.hamlet b/templates/standalone/sortable.hamlet
new file mode 100644
index 000000000..3c42cc911
--- /dev/null
+++ b/templates/standalone/sortable.hamlet
@@ -0,0 +1 @@
+<!-- only here to be able to include sortable using `toWidget` -->
diff --git a/templates/standalone/sortable.julius b/templates/standalone/sortable.julius
new file mode 100644
index 000000000..4b988e487
--- /dev/null
+++ b/templates/standalone/sortable.julius
@@ -0,0 +1,107 @@
+/**
+ * delcare a table as sortable by adding class 'js-sortable'
+ */
+ (function() {
+   'use strict';
+
+   window.utils = window.utils || {};
+
+   window.utils.sortable = function(table) {
+     var ASC = 1;
+     var DESC = -1;
+
+     var trs, ths, sortBy, sortDir, trContents;
+
+     function setup() {
+         trs = table.querySelectorAll('tr');
+         ths = table.querySelectorAll('th');
+         sortBy = 0;
+         sortDir = ASC;
+         trContents = [];
+
+         Array.from(trs).forEach(function(tr, rowIndex) {
+             if (rowIndex === 0) {
+                 // register table headers as sort-listener
+                 Array.from(tr.querySelectorAll('th')).forEach(function(th, thIndex) {
+                     th.addEventListener('click', function(el) {
+                         sortTableBy(thIndex);
+                     });
+                 });
+             } else {
+                 // register table rows
+                 trContents.push(Array.from(tr.querySelectorAll('td')).map(function(td) {
+                     return td.innerHTML;
+                 }));
+             }
+         });
+     }
+     setup();
+
+     function updateThs(thIndex, sortOrder) {
+         Array.from(ths).forEach(function (th) {
+             th.classList.remove('sorted-asc', 'sorted-desc');
+         });
+         var suffix = sortOrder > 0 ? 'asc' : 'desc';
+         ths[thIndex].classList.add('sorted-' + suffix);
+     }
+
+     function sortTableBy(thIndex) {
+         var sortKey = thIndex;
+         var sortOrder = ASC;
+         if (sortBy === sortKey) {
+             sortOrder = sortDir === ASC ? DESC : ASC;
+         }
+
+         trContents.sort(dynamicSortByType(sortKey, sortOrder));
+         trContents.sort(dynamicSortByKey(sortKey, sortOrder));
+         sortBy = thIndex;
+         sortDir = sortOrder;
+         updateThs(thIndex, sortOrder);
+
+         Array.from(trs).forEach(function(tr, trIndex) {
+             if (trIndex > 0) {
+                 Array.from(tr.querySelectorAll('td')).forEach(function (td, tdIndex) {
+                     td.innerHTML = trContents[trIndex - 1][tdIndex];
+                 });
+             }
+         });
+     }
+
+     function dynamicSortByKey(key, order) {
+         return function (a,b) {
+             var aVal = parseInt(a[key]);
+             var bVal = parseInt(b[key]);
+             if ((isNaN(aVal) && !isNaN(bVal)) || (!isNaN(aVal) && isNaN(bVal))) {
+               return 1;
+             }
+             aVal = isNaN(aVal) ? a[key] : aVal;
+             bVal = isNaN(bVal) ? b[key] : bVal;
+             var result = (aVal < bVal) ? -1 : (aVal > bVal) ? 1 : 0;
+             return result * order;
+         }
+     }
+
+     function dynamicSortByType(key, order) {
+         return function (a,b) {
+             var aVal = parseInt(a[key]);
+             var bVal = parseInt(b[key]);
+             aVal = isNaN(aVal) ? a[key] : aVal;
+             bVal = isNaN(bVal) ? b[key] : bVal;
+             var res = (aVal < bVal ? -1 : aVal > bVal ? 1 : 0);
+             if (isNaN(aVal) && !isNaN(bVal)) {
+               res = -1;
+             }
+             if (!isNaN(aVal) && isNaN(bVal)) {
+               res = 1;
+             }
+             return res * order;
+         }
+     }
+   };
+ })();
+
+document.addEventListener('DOMContentLoaded', function() {
+    Array.from(document.querySelectorAll('.js-sortable')).forEach(function(table) {
+        utils.sortable(table);
+    });
+});
diff --git a/templates/standalone/sortable.lucius b/templates/standalone/sortable.lucius
new file mode 100644
index 000000000..2afb76611
--- /dev/null
+++ b/templates/standalone/sortable.lucius
@@ -0,0 +1,31 @@
+table.js-sortable th {
+  cursor: pointer;
+  position: relative;
+  padding-right: 20px;
+}
+
+table.js-sortable th.sorted-asc,
+table.js-sortable th.sorted-desc {
+  color: var(--darkbase);
+}
+
+table.js-sortable th.sorted-asc::after,
+table.js-sortable th.sorted-desc::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 15px;
+  width: 0;
+  height: 0;
+  transform: translateY(-100%);
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+}
+
+table.js-sortable th.sorted-asc::after {
+  border-top: 8px solid var(--lightbase);
+}
+
+table.js-sortable th.sorted-desc::after {
+  border-bottom: 8px solid var(--lightbase);
+}
diff --git a/templates/submission-list.hamlet b/templates/submission-list.hamlet
index 1599532f5..456d64575 100644
--- a/templates/submission-list.hamlet
+++ b/templates/submission-list.hamlet
@@ -1,6 +1,8 @@
-<form method=POST enctype=#{uploadEnctype} action=@{SubmissionListR}>
-  ^{uploadWidget}
+<div .container>
+  <form method=POST enctype=#{uploadEnctype} action=@{SubmissionListR}>
+    ^{uploadWidget}
 
-<form method=POST enctype=#{selectEncoding} target=_blank action=@{SubmissionDownloadMultiArchiveR}>
-  ^{subTable}
-  <button .btn .btn-default type=submit >Markierte herunterladen
+<div .container>
+  <form method=POST enctype=#{selectEncoding} target=_blank action=@{SubmissionDownloadMultiArchiveR}>
+    ^{subTable}
+    <button .btn .btn-default type=submit >Markierte herunterladen
diff --git a/templates/terms.hamlet b/templates/terms.hamlet
new file mode 100644
index 000000000..d327861ab
--- /dev/null
+++ b/templates/terms.hamlet
@@ -0,0 +1,5 @@
+<div .container>
+  <h1>Semesterübersicht
+
+  <div .scrolltable>
+    ^{table}
diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet
new file mode 100644
index 000000000..7be64444f
--- /dev/null
+++ b/templates/widgets/asidenav.hamlet
@@ -0,0 +1,48 @@
+$newline never
+<aside .main__aside>
+  <div .asidenav>
+    <div .asidenav__box--dont-hide>
+      <ul .asidenav__list>
+        $forall menuType <- menuTypes
+          $case menuType
+            $of NavbarAside (MenuItem label mIcon route _)
+              <li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
+                <a .asidenav__link-wrapper href=@{route}>
+                  $if isJust mIcon
+                    <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
+                  <div .asidenav__link-label>#{label}
+            $of _
+
+    <div .asidenav__box--dont-hide>
+      <h3 .asidenav__box-title>
+        WiSe 17/18
+      <ul .asidenav__list>
+        <li .asidenav__list-item>
+          <a .asidenav__link-wrapper href="/course/S2018/ixd/show">
+            <div .asidenav__link-triple>IXD
+            <div .asidenav__link-label>Interaction Design
+          <ul .asidenav__nested-list>
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ixd/ex">Übungsblätter
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ixd/show">Klausuren
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ixd/show">Übungsgruppen
+        <li .asidenav__list-item>
+          <a .asidenav__link-wrapper href="/course/S2018/ffp/show">
+            <div .asidenav__link-triple>FFP
+            <div .asidenav__link-label>Fortgeschrittene Funktionale Programmierung
+          <ul .asidenav__nested-list>
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ffp/ex">Abgaben
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/ffp/show">Klausuren
+        <li .asidenav__list-item>
+          <a .asidenav__link-wrapper href="/course/S2018/dbs/show">
+            <div .asidenav__link-triple>DBS
+            <div .asidenav__link-label>Datenbanksysteme
+          <ul .asidenav__nested-list>
+            <li .asidenav__list-item>
+              <a .asidenav__link-wrapper href="/course/S2018/dbs/ex">Übungsgruppen
+
+  <div .asidenav__toggler>
diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius
new file mode 100644
index 000000000..99562111a
--- /dev/null
+++ b/templates/widgets/asidenav.julius
@@ -0,0 +1,85 @@
+(function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  // Defines a function to turn an element into an interactive aside-navigation.
+  // If the small is smaller than 999px the navigation is automatically
+  // collapsed - even when dynamically resized (e.g. switching from portatit
+  // to landscape).
+  // The can user may also manually collapse and expand the navigation by
+  // using the little arrow at the bottom.
+  window.utils.aside = function(asideEl) {
+    var collapsed = false;
+    var collClass = 'main__aside--collapsed';
+    // animClass used to enable transitions only when needed so that
+    // (potentially happening) initial collapse of the asidenav
+    // goes unnoticed by the user.
+    var animClass = 'main__aside--transitioning';
+    var aboveCollapsedNav = false;
+
+    init();
+    function init() {
+      var collLS = window.localStorage.getItem('asidenavCollapsed') === 'true';
+      if (document.body.getBoundingClientRect().width < 999 || collLS) {
+        asideEl.classList.add(collClass);
+        collapsed = true;
+      }
+      addListener();
+    }
+
+    function check() {
+      if (collapsed && !hasCollapsedClass() || !collapsed && hasCollapsedClass()) {
+        asideEl.classList.add(animClass);
+        asideEl.classList.toggle(collClass, collapsed);
+        window.localStorage.setItem('asidenavCollapsed', collapsed);
+      }
+    }
+
+    function hasCollapsedClass() {
+      return asideEl.classList.contains(collClass);
+    }
+
+    function addListener() {
+
+      asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
+        collapsed = !collapsed;
+        check();
+      }, false);
+
+      asideEl.addEventListener('transitionend', function(event) {
+        if (event.propertyName === 'opacity') {
+          asideEl.classList.remove(animClass);
+        }
+      }, false);
+
+      window.addEventListener('resize', function() {
+        collapsed = document.body.getBoundingClientRect().width < 999;
+        check();
+      }, false);
+
+      asideEl.addEventListener('mouseover', function(event) {
+        if (!hasCollapsedClass()) {
+          return false;
+        }
+        aboveCollapsedNav = true;
+        window.setTimeout(function() {
+          if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
+            asideEl.classList.add('pseudo-hover');
+          }
+        }, 800);
+      }, false);
+
+      asideEl.addEventListener('mouseleave', function(event) {
+        aboveCollapsedNav = false;
+        asideEl.classList.remove('pseudo-hover');
+      }, false);
+    }
+  };
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+
+    utils.aside(document.querySelector('.main__aside'));
+
+});
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
new file mode 100644
index 000000000..d073cea89
--- /dev/null
+++ b/templates/widgets/asidenav.lucius
@@ -0,0 +1,204 @@
+.main__aside {
+  position: relative;
+  background-color: var(--darkbase);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  z-index: 1;
+  flex: 0 0 300px;
+}
+.main__aside--transitioning {
+  transition: flex-basis .2s ease;
+}
+.main__aside--transitioning .asidenav__box{
+  transition: opacity .2s ease;
+}
+
+.main__aside--collapsed.pseudo-hover {
+  overflow: visible;
+}
+.main__aside--collapsed {
+  width: 50px;
+  flex-basis: 50px;
+  overflow: hidden;
+
+  .asidenav__box-title {
+    width: 50px;
+    padding: 0;
+  }
+}
+.main__aside--collapsed .asidenav__box {
+  opacity: 0;
+}
+.main__aside--collapsed .asidenav__box--dont-hide {
+  opacity: 1;
+}
+
+.main__aside--collapsed:not(.main__aside--transitioning) .asidenav__box {
+  height: 0;
+  padding: 0;
+  margin: 0;
+  visibility: hidden;
+}
+
+.asidenav {
+  width: 300px;
+  margin-top: 20px;
+  color: white;
+
+  .js-show-hide__target {
+    overflow: visible;
+  }
+  .js-show-hide__toggle::before {
+    top: 14px;
+    right: 12px;
+    left: auto !important;
+  }
+
+  .js-show-hide__toggle:hover::before,
+  .js-show-hide--collapsed .js-show-hide__toggle::before {
+    top: 10px !important;
+    right: 8px !important;
+  }
+  .js-show-hide--collapsed .js-show-hide__toggle:hover::before {
+    top: 14px !important;
+    right: 12px !important;
+  }
+}
+.asidenav__box {
+  margin: 10px 0;
+  padding: 10px 0;
+  width: 100%;
+  border-bottom: 4px solid var(--whitebase);
+  background-color: var(--darkbase);
+}
+
+.asidenav__box-title {
+  padding: 7px 13px;
+
+  a {
+    color: white;
+  }
+}
+
+.asidenav__nested-list {
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: var(--fontbase);
+  transform: translateX(0);
+  opacity: 0;
+  transition: all .2s ease;
+  z-index: -1;
+
+  .asidenav__list-item {
+    background-color: var(--darkbase);
+    color: white;
+
+    &:first-child {
+      margin-top: 0;
+    }
+  }
+
+  .asidenav__link-wrapper {
+    padding-left: 13px;
+    padding-right: 13px;
+    border-left: 20px solid white;
+    transition: all .2s ease;
+
+    &:hover {
+      background-color: white;
+      color: var(--darkbase) !important;
+      border-left: 20px solid var(--darkbase);
+    }
+  }
+}
+
+.asidenav__list-item {
+  position: relative;
+  background-color: white;
+  color: var(--darkbase);
+  margin: 4px 0;
+
+  &:not(.asidenav__list-item--active):hover {
+    color: white;
+    background-color: var(--darkbase);
+
+    .asidenav__nested-list {
+      transform: translateX(100%);
+      opacity: 1;
+    }
+
+    .asidenav__link-wrapper,
+    .asidenav__link-label {
+      color: white;
+    }
+
+    .asidenav__link-triple {
+      transform: scale(1.2, 1);
+    }
+  }
+}
+.asidenav__list-item--active {
+  background-color: var(--darkbase);
+  color: white;
+
+  .asidenav__link-wrapper {
+    pointer-events: none;
+    color: white;
+  }
+}
+
+.asidenav__link-wrapper {
+  position: relative;
+  display: flex;
+  height: 50px;
+  align-items: center;
+  justify-content: flex-start;
+  color: var(--darkbase);
+  z-index: 1;
+
+  .glyphicon {
+    width: 50px;
+  }
+
+  .asidenav__link-triple {
+    background-color: var(--darkbase);
+    color: var(--whitebase);
+    height: 50px;
+    width: 50px;
+    display: inline-block;
+    line-height: 50px;
+    text-align: center;
+    margin-right: 13px;
+    flex-shrink: 0;
+    outline: 1px solid white;
+  }
+}
+
+.asidenav__toggler {
+  position: absolute;
+  bottom: 20px;
+  height: 50px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color .2s ease;
+  border-top: 1px solid var(--whitebase);
+  border-bottom: 1px solid var(--whitebase);
+  cursor: pointer;
+
+  &::before {
+    content: '\e079';
+    display: block;
+    font-family: 'Glyphicons Halflings';
+    color: var(--whitebase);
+  }
+
+  &:hover {
+    background-color: var(--lightbase);
+  }
+}
+
+.main__aside--collapsed .asidenav__toggler::before {
+  content: '\e080';
+}
diff --git a/templates/widgets/breadcrumbs.hamlet b/templates/widgets/breadcrumbs.hamlet
new file mode 100644
index 000000000..fd2ab3529
--- /dev/null
+++ b/templates/widgets/breadcrumbs.hamlet
@@ -0,0 +1,7 @@
+<div .breadcrumbs__container>
+  <ul .breadcrumbs__list.list--inline>
+    $forall bc <- parents
+      <li .breadcrumbs__item>
+        <a .breadcrumbs__link href="@{fst bc}">#{snd bc}
+        &gt;
+    <li .breadcrumbs__item--active>#{title}
diff --git a/templates/widgets/breadcrumbs.lucius b/templates/widgets/breadcrumbs.lucius
new file mode 100644
index 000000000..b110eb0e3
--- /dev/null
+++ b/templates/widgets/breadcrumbs.lucius
@@ -0,0 +1,14 @@
+.breadcrumbs__container {
+  position: relative;
+  color: white;
+  z-index: 10;
+  align-self: flex-end;
+  margin-bottom: 20px;
+  transition: margin-bottom .2s ease;
+}
+.breadcrumbs__container--animated {
+  transition: left .2s ease;
+}
+.breadcrumbs__container .breadcrumbs__link {
+  color: white;
+}
diff --git a/templates/widgets/form.hamlet b/templates/widgets/form.hamlet
new file mode 100644
index 000000000..91c015dd9
--- /dev/null
+++ b/templates/widgets/form.hamlet
@@ -0,0 +1,9 @@
+$newline never
+#{fragment}
+$case formLayout
+  $of FormStandard
+    $forall view <- views
+      <div .form-group :fvRequired view:.form-group--required :not $ fvRequired view:.form-group--optional :isJust $ fvErrors view:.form-group--has-error>
+        $if not (Blaze.null $ fvLabel view)
+          <label .form-group__label .reactive-label for=#{fvId view}>#{fvLabel view}
+        ^{fvInput view}
diff --git a/templates/widgets/form.julius b/templates/widgets/form.julius
new file mode 100644
index 000000000..973e1217d
--- /dev/null
+++ b/templates/widgets/form.julius
@@ -0,0 +1,51 @@
+(function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  // registers input-listener for each element in <elements> (array) and
+  // enables <button> if <fn> for these elements returns true
+  window.utils.reactiveButton = function(elements, button, fn) {
+    if (elements.length == 0) {
+      return false;
+    }
+    var checkboxes = elements[0].getAttribute('type') === 'checkbox';
+    var eventType = checkboxes ? 'change' : 'input';
+    updateButtonState();
+    elements.forEach(function(el) {
+      el.addEventListener(eventType, function() {
+        updateButtonState();
+      });
+    });
+
+    function updateButtonState() {
+      if (fn.call(null, elements)) {
+        button.removeAttribute('disabled');
+      } else {
+        button.setAttribute('disabled', 'true');
+      }
+    }
+  };
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  // auto reactiveButton submit-buttons with required fields
+  var forms = document.querySelectorAll('form');
+  Array.from(forms).forEach(function(form) {
+    var requireds = form.querySelectorAll('[required]');
+    var submitBtn = form.querySelector('[type=submit]');
+    if (submitBtn && requireds) {
+      window.utils.reactiveButton(Array.from(requireds), submitBtn, function(inputs) {
+        var done = true;
+        inputs.forEach(function(inp) {
+          var len = inp.value.trim().length;
+          if (done && len === 0) {
+            done = false;
+          }
+        });
+        return done;
+      });
+    }
+  });
+});
diff --git a/templates/widgets/form.lucius b/templates/widgets/form.lucius
new file mode 100644
index 000000000..e69de29bb
diff --git a/templates/widgets/lipsum.hamlet b/templates/widgets/lipsum.hamlet
new file mode 100644
index 000000000..f147e1f57
--- /dev/null
+++ b/templates/widgets/lipsum.hamlet
@@ -0,0 +1,10 @@
+<div>
+  <h2>A little lorem ipsum to make the page scrollable
+  Aute velit consectetur consequat excepteur ut in qui do reprehenderit sit consequat occaecat incididunt sint eu. Nulla cillum quis et sit labore aliquip et ad excepteur duis elit deserunt aute. Anim esse reprehenderit et ipsum et sit quis minim enim sint et pariatur duis nostrud. Do minim dolore adipisicing ullamco ad aute veniam id magna est proident tempor labore non. Mollit et laboris duis esse commodo ex tempor.
+  Elit labore qui dolor ea non ut anim occaecat do aliqua cillum qui esse. Aliqua nisi non veniam labore esse irure velit qui veniam labore consectetur ut. Tempor laboris anim officia veniam nostrud cupidatat reprehenderit aute incididunt nostrud dolore occaecat deserunt pariatur in non dolore.
+  Proident anim pariatur eu laborum Lorem duis cillum est anim magna sit pariatur eu. Nulla consectetur quis ea sunt proident sint laborum. Esse est ea Lorem mollit aute excepteur fugiat ipsum ipsum ad irure do reprehenderit voluptate. Sint tempor nulla mollit voluptate pariatur aliquip culpa amet ullamco fugiat incididunt minim sint ipsum exercitation eiusmod ad. Nostrud ipsum nulla cillum ex aute elit voluptate proident proident magna ut. Ipsum officia cillum officia nostrud enim fugiat ut. Voluptate laboris aute dolore incididunt aliquip sit sit. Ea ut laboris Lorem ea ad non nostrud aute tempor non nisi.
+  Qui cupidatat nisi id et excepteur sint aliquip fugiat sint reprehenderit aliquip enim anim aliqua sint dolore proident. Voluptate labore tempor laboris nisi eiusmod sunt occaecat deserunt adipisicing. Consectetur fugiat quis non ad laboris aliqua voluptate in eu id. Duis velit cillum aliquip dolor non ea mollit incididunt elit ex excepteur aute consequat amet.
+  Aute velit consectetur consequat excepteur ut in qui do reprehenderit sit consequat occaecat incididunt sint eu. Nulla cillum quis et sit labore aliquip et ad excepteur duis elit deserunt aute. Anim esse reprehenderit et ipsum et sit quis minim enim sint et pariatur duis nostrud. Do minim dolore adipisicing ullamco ad aute veniam id magna est proident tempor labore non. Mollit et laboris duis esse commodo ex tempor.
+  Elit labore qui dolor ea non ut anim occaecat do aliqua cillum qui esse. Aliqua nisi non veniam labore esse irure velit qui veniam labore consectetur ut. Tempor laboris anim officia veniam nostrud cupidatat reprehenderit aute incididunt nostrud dolore occaecat deserunt pariatur in non dolore.
+  Proident anim pariatur eu laborum Lorem duis cillum est anim magna sit pariatur eu. Nulla consectetur quis ea sunt proident sint laborum. Esse est ea Lorem mollit aute excepteur fugiat ipsum ipsum ad irure do reprehenderit voluptate. Sint tempor nulla mollit voluptate pariatur aliquip culpa amet ullamco fugiat incididunt minim sint ipsum exercitation eiusmod ad. Nostrud ipsum nulla cillum ex aute elit voluptate proident proident magna ut. Ipsum officia cillum officia nostrud enim fugiat ut. Voluptate laboris aute dolore incididunt aliquip sit sit. Ea ut laboris Lorem ea ad non nostrud aute tempor non nisi.
+  Qui cupidatat nisi id et excepteur sint aliquip fugiat sint reprehenderit aliquip enim anim aliqua sint dolore proident. Voluptate labore tempor laboris nisi eiusmod sunt occaecat deserunt adipisicing. Consectetur fugiat quis non ad laboris aliqua voluptate in eu id. Duis velit cillum aliquip dolor non ea mollit incididunt elit ex excepteur aute consequat amet.
diff --git a/templates/widgets/modal.hamlet b/templates/widgets/modal.hamlet
new file mode 100644
index 000000000..6b3878f4d
--- /dev/null
+++ b/templates/widgets/modal.hamlet
@@ -0,0 +1,18 @@
+<div .modal.js-modal #modal-#{modalId} data-trigger=#{modalTrigger} data-closeable=true>
+  $if 11 == length modalContent
+    <div .replace-me>
+  $else
+    <h2>Neue Veranstaltung
+    #{modalContent}
+    <form>
+      <div .form-group>
+        <label .reactive-label for="inp1">Name
+        <input type="text" id="inp1">
+      <div .form-group>
+        <label .reactive-label for="inp2">Kürzel
+        <input type="text" id="inp2">
+      <div .form-group>
+        <label .reactive-label for="inp3">Semester
+        <input type="text" id="inp3">
+      <div .form-group>
+        <input type="submit" value="Submit">
diff --git a/templates/widgets/navbar.hamlet b/templates/widgets/navbar.hamlet
new file mode 100644
index 000000000..5a0674eae
--- /dev/null
+++ b/templates/widgets/navbar.hamlet
@@ -0,0 +1,26 @@
+$newline never
+<div .navbar-container>
+  <nav .navbar.js-sticky-navbar>
+
+    <!-- breadcrumbs -->
+    $if not $ Just HomeR == mcurrentRoute
+      ^{breadcrumbs}
+
+    <ul .navbar__list.list--inline>
+      $forall menuType <- menuTypes
+        $case menuType
+          $of NavbarRight (MenuItem label mIcon route _)
+            <li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
+              <a .navbar__link-wrapper href=@{route}>
+                $if isJust mIcon
+                  <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
+                <div .navbar__link-label>#{label}
+          $of NavbarSecondary (MenuItem label mIcon route _)
+            <li .navbar__list-item.navbar__list-item--secondary :Just route == mcurrentRoute:.navbar__list-item--active>
+              <a .navbar__link-wrapper href=@{route}>
+                $if isJust mIcon
+                  <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
+                <div .navbar__link-label>#{label}
+          $of _
+
+  <div .navbar__pushdown>
diff --git a/templates/widgets/navbar.julius b/templates/widgets/navbar.julius
new file mode 100644
index 000000000..8a608aaff
--- /dev/null
+++ b/templates/widgets/navbar.julius
@@ -0,0 +1,48 @@
+ (function() {
+   'use strict';
+
+   window.utils = window.utils || {};
+
+   window.utils.stickynav = function(nav) {
+     var ticking = false;
+
+     init();
+     function init() {
+       nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : '';
+       window.setTimeout(function() {
+         nav.classList.add('navbar--animated');
+       }, 200);
+       checkScroll();
+       addListener();
+     }
+
+     // checks scroll direction and shows/hides navbar accordingly
+     function checkScroll() {
+       var sticky = window.scrollY > 0;
+       nav.classList.toggle('navbar--sticky', sticky);
+       ticking = false;
+     }
+
+     function addListener() {
+       window.addEventListener('scroll', function(e) {
+         if (!ticking) {
+           window.requestAnimationFrame(checkScroll);
+           ticking = true;
+         }
+       }, false);
+     }
+
+     window.addEventListener('resize', function() {
+       nav.style.paddingLeft = document.body.getBoundingClientRect().width < 999 ? '90px' : '';
+     }, false);
+   }
+
+
+
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  utils.stickynav(document.querySelector('.js-sticky-navbar'));
+
+});
diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius
new file mode 100644
index 000000000..b04c47366
--- /dev/null
+++ b/templates/widgets/navbar.lucius
@@ -0,0 +1,127 @@
+.navbar {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: var(--header-height);
+  padding-right: 5vw;
+  padding-left: 340px;
+  background: var(--darkbase); /* Old browsers */
+  background: -moz-linear-gradient(bottom, var(--darkbase) 0%, #425d79 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(bottom, var(--darkbase) 0%,#425d79 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to top, var(--darkbase) 0%,#425d79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  color: white;
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+  z-index: 10;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  transition: height 0.2s ease;
+}
+
+.navbar__list {
+  align-self: flex-end;
+  white-space: nowrap;
+}
+
+.navbar__list-item {
+  position: relative;
+  transition: background-color .1s ease;
+
+  .glyphicon {
+    position: relative;
+    width: 100%;
+    height: 20px;
+  }
+
+  .glyphicon::before {
+    height: 20px;
+  }
+}
+.navbar :last-child {
+  margin-left: auto;
+}
+
+.navbar .navbar__link-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 80px;
+  color: var(--whitebase);
+  transition: height .2s ease;
+}
+
+.navbar__link-label {
+  transition: opacity .2s ease;
+  padding: 0 13px;
+  color: white;
+  text-transform: uppercase;
+}
+
+.navbar__list-item--secondary {
+  margin-left: 20px;
+  color: var(--greybase);
+}
+.navbar__list-item--secondary + .navbar__list-item--secondary {
+  margin-left: 0;
+  border-left: 0;
+}
+
+.navbar__list-item--active {
+  background-color: white;
+  color: var(--darkbase);
+
+  .navbar__link-wrapper {
+    color: var(--darkbase);
+  }
+}
+.navbar__list-item--active .navbar__link-wrapper {
+  pointer-events: none;
+}
+.navbar__list-item--active .navbar__link-label {
+  color: var(--darkbase);
+}
+
+.navbar .navbar__list-item:not(.navbar__list-item--active):hover {
+  background-color: var(--darkbase);
+  color: var(--whitebase);
+}
+.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper {
+  color: var(--whitebase);
+}
+.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-label {
+  color: var(--whitebase);
+}
+.navbar__list-item--secondary .navbar__link-wrapper,
+.navbar__list-item--secondary .navbar__link-label {
+  color: var(--greybase);
+}
+
+.navbar--sticky {
+  height: var(--header-height-collapsed);
+  z-index: 100;
+
+  .navbar__link-wrapper {
+    height: 50px;
+  }
+
+  .breadcrumbs__container {
+    margin-bottom: 7px;
+  }
+
+}
+.navbar--animated {
+  transition: all .2s ease;
+}
+.navbar__pushdown {
+  /*display: none;*/
+  height: var(--header-height);
+  transition: height .2s ease;
+}
+.navbar--sticky + .navbar__pushdown {
+  display: block;
+  height: var(--header-height-collapsed);
+}
diff --git a/templates/widgets/pageactionprime.hamlet b/templates/widgets/pageactionprime.hamlet
new file mode 100644
index 000000000..a681115b5
--- /dev/null
+++ b/templates/widgets/pageactionprime.hamlet
@@ -0,0 +1,11 @@
+$newline never
+$if hasPageActions
+  <div .page-nav-prime>
+    <h3>Aktionen:
+    <ul .pagenav__list>
+      $forall menuType <- menuTypes
+        $case menuType
+          $of PageActionPrime (MenuItem label mIcon route _)
+            <li .pagenav__list-item>
+              <a .pagenav__link-wrapper href=@{route}>#{label}
+          $of _
diff --git a/templates/widgets/pageactionprime.lucius b/templates/widgets/pageactionprime.lucius
new file mode 100644
index 000000000..dd4f3ef39
--- /dev/null
+++ b/templates/widgets/pageactionprime.lucius
@@ -0,0 +1,21 @@
+.page-nav-prime {
+  background-color: var(--lightgreybase);
+  box-shadow: -20px -20px 0 20px var(--lightgreybase),
+              20px -20px 0 20px var(--lightgreybase);
+  padding: 13px 0;
+}
+
+.page-nav-prime .pagenav__list {
+  margin: 7px 0 0;
+  display: block;
+}
+.page-nav-prime .pagenav__list-item {
+  display: inline-block;
+  border-bottom: 2px solid var(--lightbase);
+  margin-right: 7px;
+  transition: border-bottom-color .2s ease;
+
+  &:hover {
+    border-bottom-color: var(--lighterbase);
+  }
+}