edit static pages in backend

public/backend/functions.js

@@ -0,0 +1,80 @@
+(function (window, document) {
+
+    var layout   = document.getElementById('layout'),
+        menu     = document.getElementById('menu'),
+        menuLink = document.getElementById('menuLink');
+
+    function toggleClass(element, className) {
+        var classes = element.className.split(/\s+/),
+            length = classes.length,
+            i = 0;
+
+        for(; i < length; i++) {
+          if (classes[i] === className) {
+            classes.splice(i, 1);
+            break;
+          }
+        }
+        // The className is not found
+        if (length === classes.length) {
+            classes.push(className);
+        }
+
+        element.className = classes.join(' ');
+    }
+
+    menuLink.onclick = function (e) {
+        var active = 'active';
+
+        e.preventDefault();
+        toggleClass(layout, active);
+        toggleClass(menu, active);
+        toggleClass(menuLink, active);
+    };
+
+    var animationSpeed = 500;
+    $('li h2', $(menu)).on('click', function(e) {
+        //Get the clicked link and the next element
+        var $this = $(this);
+        var checkElement = $this.next();
+  
+        //Check if the next element is a menu and is visible
+        if ((checkElement.is('.treeview-menu')) && (checkElement.is(':visible'))) {
+          //Close the menu
+          checkElement.slideUp(animationSpeed, function() {
+            checkElement.removeClass('menu-open');
+          //Fix the layout in case the sidebar stretches over the height of the window
+          //_this.layout.fix();
+          });
+        //   checkElement.parent('li').removeClass('active');
+        }
+        //If the menu is not visible
+        else if ((checkElement.is('.treeview-menu')) && (!checkElement.is(':visible'))) {
+          //Get the parent menu
+          var parent = $this.parents('ul').first();
+          //Close all open menus within the parent
+          var ul = parent.find('ul.treeview-menu:visible').slideUp(animationSpeed);
+          //Remove the menu-open class from the parent
+          ul.removeClass('menu-open');
+          //Get the parent li
+          var liParent = $this.parent('li');
+  
+          //Open the target menu and add the menu-open class
+          checkElement.slideDown(animationSpeed, function() {
+            //Add the class active to the parent li
+            checkElement.addClass('menu-open');
+            // parent.find('li.active').removeClass('active');
+            // liParent.addClass('active');
+            //Fix the layout in case the sidebar stretches over the height of the window
+            // _this.layout.fix();
+          });
+        }
+        //if this isn't a link, prevent the page from being redirected
+        if (checkElement.is('.treeview-menu')) {
+          e.preventDefault();
+        }
+      });
+
+
+
+}(this, this.document));

public/backend/pagination.css

@@ -0,0 +1,243 @@
+/* vom cms Pagination */
+.pagination {
+    text-align: center;
+    margin: 80px 0 0 0;
+    clear: both;
+}
+
+.pagination a {
+    /*font-size:1.1em;*/
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+/* selbst Pagination */
+.pagination-previous,
+.pagination-next,
+.pagination-link,
+.pagination-dots {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    align-items: center;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    box-shadow: none;
+    display: inline-flex;
+    /*display: inline-block;*/
+    font-size: 1rem;
+    height: 2.25em;
+    justify-content: flex-start;
+    line-height: 1.5;
+    padding: calc(0.375em - 1px) calc(0.625em - 1px) calc(0.375em - 1px) calc(0.625em - 1px);
+    /*padding-top: calc(0.375em - 1px);
+    padding-right: calc(0.625em - 1px);
+    padding-bottom: calc(0.375em - 1px);
+    padding-left: calc(0.625em - 1px);*/
+    position: relative;
+    vertical-align: top;
+}
+
+    .pagination-previous:focus,
+    .pagination-next:focus,
+    .pagination-link:focus,
+    .pagination-dots:focus,
+    .is-focused.pagination-next,
+    .is-focused.pagination-link,
+    .is-focused.pagination-dots,
+    .pagination-previous:active,
+    .pagination-next:active,
+    .pagination-link:active,
+    .pagination-dots:active, .is-active.pagination-previous,
+    .is-active.pagination-next,
+    .is-active.pagination-link,
+    .is-active.pagination-dots {
+        outline: none;
+    }
+
+    .pagination-previous.disabled,
+    .pagination-next.disabled,
+    .pagination-link.disabled,
+    .pagination-dots.disabled {
+        cursor: not-allowed;
+    }
+
+
+
+.pagination {
+    /*background-color:azure;*/
+    font-size: 1rem;
+    margin: -0.25rem;
+}
+
+    .pagination.is-small {
+        font-size: 0.75rem;
+    }
+
+    .pagination.is-medium {
+        font-size: 1.25rem;
+    }
+
+    .pagination.is-large {
+        font-size: 1.5rem;
+    }
+
+    .pagination.is-rounded .pagination-previous,
+    .pagination.is-rounded .pagination-next {
+        padding-left: 1em;
+        padding-right: 1em;
+        border-radius: 290486px;
+    }
+
+    .pagination.is-rounded .pagination-link {
+        border-radius: 290486px;
+    }
+
+/*.pagination,*/
+.pagination-list {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    list-style: none;
+}
+
+.pagination-previous,
+.pagination-next,
+.pagination-link,
+.pagination-dots {
+    font-size: 1em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    justify-content: center;
+    margin: 0.25rem;
+    text-align: center;
+}
+
+
+.pagination-previous,
+.pagination-next,
+.pagination-link {
+    border-color: #dbdbdb;
+    color: #363636;
+    min-width: 2.25em;
+}
+
+.pagination-previous:hover,
+.pagination-next:hover,
+.pagination-link:hover {
+    border-color: #b5b5b5;
+    color: #363636;
+}
+
+.pagination-previous:focus,
+.pagination-next:focus,
+.pagination-link:focus {
+    border-color: #3273dc;
+}
+
+.pagination-previous:active,
+.pagination-next:active,
+.pagination-link:active {
+    box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+}
+
+.pagination-previous.disabled,
+.pagination-next.disabled,
+.pagination-link.disabled {
+    background-color: #dbdbdb;
+    border-color: #dbdbdb;
+    box-shadow: none;
+    color: #7a7a7a;
+    opacity: 0.5;
+}
+
+.pagination-previous,
+.pagination-next {
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    white-space: nowrap;
+}
+
+.pagination-link.is-current {
+    background-color: #3abac4; /*#3273dc;*/
+    border-color: #3abac4;
+    color: #fff;
+}
+
+.pagination-dots {
+    color: #b5b5b5;
+    pointer-events: none;
+}
+
+.pagination-list {
+    flex-wrap: wrap;
+}
+
+@media screen and (max-width: 767px) {
+    .pagination {
+        flex-wrap: wrap;
+    }
+
+    .pagination-previous,
+    .pagination-next {
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+
+    .pagination-list li {
+        flex-grow: 1;
+        flex-shrink: 1;
+    }
+}
+
+@media screen and (min-width: 768px), print {
+    .pagination-list {
+        flex-grow: 1;
+        flex-shrink: 1;
+        justify-content: flex-start;
+        order: 1;
+    }
+
+    .pagination-previous {
+        order: 2;
+    }
+
+    .pagination-next {
+        order: 3;
+    }
+
+    .pagination {
+        justify-content: space-between;
+    }
+
+    .pagination.is-centered .pagination-previous {
+        order: 1;
+    }
+
+    .pagination.is-centered .pagination-list {
+        justify-content: center;
+        order: 2;
+    }
+
+    .pagination.is-centered .pagination-next {
+        order: 3;
+    }
+
+    .pagination.is-right .pagination-previous {
+        order: 1;
+    }
+
+    .pagination.is-right .pagination-next {
+        order: 2;
+    }
+
+    .pagination.is-right .pagination-list {
+        justify-content: flex-end;
+        order: 3;
+    }
+}

public/backend/publish/datasetPublish.js

@@ -0,0 +1 @@
+!function(t){var e={};function a(s){if(e[s])return e[s].exports;var r=e[s]={i:s,l:!1,exports:{}};return t[s].call(r.exports,r,r.exports,a),r.l=!0,r.exports}a.m=t,a.c=e,a.d=function(t,e,s){a.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:s})},a.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return a.d(e,"a",e),e},a.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},a.p="/",a(a.s=0)}([function(t,e,a){t.exports=a(1)},function(t,e){new Vue({el:"#app",data:function(){return{rows:[],errors:[],uploadedFiles:[],uploadError:null,currentStatus:null,uploadFieldName:"photos",fileCount:0,step:1,dataset:{type:"",state:"",rights:0,project_id:"",creating_corporation:"GBA",embargo_date:"",belongs_to_bibliography:0,title_main:{value:"",language:""},abstract_main:{value:"",language:""},checkedPersons:[],checkedLicenses:[],files:[]}}},mounted:function(){this.step=1,this.reset()},computed:{isInitial:function(){return 0===this.currentStatus},isSaving:function(){return 1===this.currentStatus},isSuccess:function(){return 2===this.currentStatus},isFailed:function(){return 3===this.currentStatus}},methods:{reset:function(){this.currentStatus=0,this.uploadedFiles=[],this.uploadError=null},resetDropbox:function(){this.currentStatus=0,this.dataset.files=[]},save:function(){var t=this;this.errors=[];for(var e=new FormData,a=0;a<this.dataset.files.length;a++){var s=this.dataset.files[a];e.append("files["+a+"][file]",s.file),e.append("files["+a+"][label]",s.label),e.append("files["+a+"][sorting]",a+1)}e.append("type",this.dataset.type),e.append("server_state",this.dataset.state),e.append("rights",this.dataset.rights),e.append("creating_corporation",this.dataset.creating_corporation),e.append("project_id",this.dataset.project_id),e.append("embargo_date",this.dataset.embargo_date),e.append("belongs_to_bibliography",this.dataset.belongs_to_bibliography),e.append("title_main[value]",this.dataset.title_main.value),e.append("title_main[language]",this.dataset.title_main.language),e.append("abstract_main[value]",this.dataset.abstract_main.value),e.append("abstract_main[language]",this.dataset.abstract_main.language);for(a=0;a<this.dataset.checkedLicenses.length;a++)e.append("licenses["+a+"]",this.dataset.checkedLicenses[a]);axios.post("/publish/dataset/store",e,{headers:{"Content-Type":"multipart/form-data"}}).then(function(e){console.log(e.data),t.currentStatus=2,e.data.redirect&&(window.location=e.data.redirect)}).catch(function(e){var a=JSON.parse(JSON.stringify(e));if(a.response.data.errors){var s=a.response.data.errors;for(var r in s)console.log(s[r]),t.errors.push(s[r])}if(a.response.data.error){e=a.response.data.error;t.errors.push(e.message)}t.currentStatus=3})},filesChange:function(t,e){for(var a=e,s=0;s<a.length;s++){var r=a[s].name.replace(/\.[^/.]+$/,""),n={file:a[s],label:r,sorting:0};this.dataset.files.push(n)}},removeFile:function(t){this.dataset.files.splice(t,1)},prev:function(){this.step--},next:function(){this.step++},submit:function(){this.save()}}})}]);

public/backend/style.css

@@ -0,0 +1,938 @@
+body {
+    background: #fff;
+    color: #5F5C52;
+    /* font-size: 1.15em; */
+    margin: 0;
+    padding: 0;
+}
+html, button, input, select, textarea,
+.pure-g [class *= "pure-u"] {
+    /* Set your content font stack here: */
+    font-family: 'Open Sans', sans-serif;
+}
+/* Typo */
+a {   
+    /*color: #bb2222;*/
+    color: #3273dc;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+a strong {
+    color: currentColor;
+}
+    a:hover {
+        color: #363636;
+        /*color: #660000;*/
+    }
+
+code {
+    background-color: whitesmoke;
+    color: #ff3860;
+    font-size: 0.875em;
+    font-weight: normal;
+    padding: 0.25em 0.5em 0.25em;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: #423F37;
+}
+
+h2 {
+    font-size: 1.2em;
+    margin: 2em 0 1.2em 0;
+}
+
+p {
+    /*margin: 0 0 2.2em 0;*/
+    margin: 0 0 1.4em 0;
+    font-size: 1em;
+    line-height: 1.6em;
+}
+
+    p + ul {
+        margin-top: -0.5em;
+    }
+
+/*code {
+    color: #000;
+    font-weight: normal;
+}*/
+
+pre {
+    background: none repeat scroll 0 0 #e9e6e2;
+    font-family: "Courier 10 Pitch",Courier,monospace;
+    font-size: 0.9em;
+    line-height: 1.3;
+    margin-bottom: 2em;
+    padding: 30px;
+    color: #222;
+    overflow: auto;
+    word-wrap: normal;
+    white-space: pre;
+}
+
+table {
+    margin-bottom: 2.6em;
+    font-size: 0.88em;
+}
+
+menu .pure-menu .active a {
+    background-color: #eee;
+}
+
+
+.pure-img-responsive {
+    max-width: 100%;
+    height: auto;
+}
+
+/*
+Add transition to containers so they can push in and out.
+*/
+#layout,
+#menu,
+.menu-link {
+    -webkit-transition: all 0.2s ease-out;
+    -moz-transition: all 0.2s ease-out;
+    -ms-transition: all 0.2s ease-out;
+    -o-transition: all 0.2s ease-out;
+    transition: all 0.2s ease-out;
+}
+
+/*
+This is the parent `<div>` that contains the menu and the content area.
+*/
+#layout {
+    position: relative;
+    padding-left: 0;
+}
+    #layout.active #menu {
+        left: 300px;
+        width: 300px;
+    }
+
+    #layout.active .menu-link {
+        left: 300px;
+    }
+/*
+The content `<div>` is where all your content goes.
+*/
+.content {
+    margin: 0 0;
+    padding: 2em;
+    line-height: 1.6em;
+    background: #f5f5f5;
+}
+
+.header {
+     margin: 0;
+     color: #333;
+     text-align: left;
+     padding: 0.4em 2em 0;
+     border-bottom: 1px solid #eee;
+ }
+    .header h1 {
+        margin: 0.2em 0;
+        font-size: 3em;
+        font-weight: 300;
+    }
+     .header h2 {
+        font-weight: 300;
+        color: #ccc;
+        padding: 0;
+        margin-top: 0;
+    }
+
+.content-subhead {
+    margin: 50px 0 20px 0;
+    font-weight: 300;
+    color: #888;
+}
+
+
+.box-content {
+    padding: 2em;
+}
+
+.l-box .header-title{
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    font-size: .9em;
+}
+
+.l-box{
+    margin: 0 1em 1em 0;
+    background: #fff;
+    outline: 1px solid #ddd;
+}
+
+.msg{
+    padding: 0.8em 1.2em;
+    border: 1px solid #ddd;
+    display: block;
+    margin-bottom: 1em;
+    font-weight: normal;
+}
+
+.msg .fa{
+    margin-right: 0.5em;
+}
+
+.success{
+    background: #dff0d8;
+    color: #3c763d;
+    border-color: #d6e9c6;
+}
+
+.error{
+    background: #f2dede;
+    color: #ad4442;
+    border-color: #ebccd1;
+}
+
+.alert{
+    background: #fcf8e3;
+    color: #8a6d3b;
+    border-color: #faebcc;
+}
+
+.breadcrumb{
+    margin-bottom: 2em;
+    display: table;
+}
+
+.breadcrumb a{
+    color: #999;
+    padding: 0 0.8em;
+    text-decoration: none;
+    font-size: .9em;
+    font-weight: normal;
+}
+
+.breadcrumb a:hover,
+.breadcrumb a:focus{
+    color: #2097e6;
+}
+
+.site-logo{
+    color: #fff;
+    font-size: 1.4em;
+    padding: 0.6em 0.4em;
+}
+
+.site-logo strong{
+    color: #2097e6;
+}
+
+.text-right{
+    text-align: right;
+}
+
+.user-info{
+    padding: 1.6em 0.4em;
+}
+
+.user-info a{
+    text-decoration: none;
+    font-weight: normal;
+    font-size: 0.8em;
+    color: #999;
+    text-transform: uppercase;
+}
+    .user-info a:hover,
+    .user-info a:focus{
+        color: #2097e6;
+    }
+
+.divider{
+    border-right: 1px solid #ddd;
+    margin: 0 1em;
+}
+
+.pure-form{
+    font-weight: normal;
+}
+
+hr{
+    display: block;
+    border: 0;
+    border-top: 1px solid #ddd;
+    margin: 1.5em 0;
+}
+
+
+
+/*
+The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+appears on the left side of the page.
+*/
+
+#menu {
+    margin-left: -300px; /* "#menu" width */
+    width: 300px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 1000; /* so the menu or its navicon stays above all content */
+    background: #202b33;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+    /*
+    All anchors inside the menu should be styled like this.
+    */
+    #menu a {
+        color: #738492;
+        border: none;
+        padding: 0.6em 0 0.6em 1em;
+        font-size: 0.9em;
+        font-weight: normal;
+        -webkit-transition: all 0.2s ease-out;
+        -moz-transition: all 0.2s ease-out;
+        -ms-transition: all 0.2s ease-out;
+        -o-transition: all 0.2s ease-out;
+        transition: all 0.2s ease-out;
+        border-left: 2px solid #2097e6;
+    }
+
+    /*
+    Remove all background/borders, since we are applying them to #menu.
+    */
+     #menu .pure-menu,
+     #menu .pure-menu ul {
+        border: none;
+        background: transparent;
+    }
+
+    /*
+    Add that light border to separate items into groups.
+    */
+    #menu .pure-menu ul,
+    #menu .pure-menu .menu-item-divided {
+        border-top: 1px solid #2b363d;
+    }
+    
+    /*
+    Change color of the anchor links on hover/focus.
+    */
+    #menu .pure-menu li a:hover,
+    #menu .pure-menu li a:focus,
+    #menu .pure-menu li.active a {
+        color: #2097e6;
+        background: #1d272e;
+    }
+
+    /*
+    This styles the selected menu item `<li>`.
+    */
+    #menu .pure-menu-selected,
+    #menu .pure-menu-heading {
+        padding-left: 0.5em;
+        text-transform: capitalize;
+        font-weight: normal;
+    }
+        /*
+        This styles a link within a selected menu item `<li>`.
+        */
+        #menu .pure-menu-selected a {
+            color: #fff;
+        }
+
+    /*
+    This styles the menu heading.
+    */
+    #menu .pure-menu-heading {
+        font-size: 100%;
+        color: #fff;
+        margin: 0;
+        padding-top: 1em;
+    }
+
+/* -- Dynamic Button For Responsive Menu -------------------------------------*/
+
+/*
+The button to open/close the Menu is custom-made and not part of Pure. Here's
+how it works:
+*/
+
+/*
+`.menu-link` represents the responsive menu toggle that shows/hides on
+small screens.
+*/
+.menu-link {
+    position: fixed;
+    display: block; /* show this only on small screens */
+    top: 0;
+    left: 0; /* "#menu width" */
+    background: #000;
+    background: rgba(0,0,0,0.7);
+    font-size: 10px; /* change this value to increase/decrease button size */
+    z-index: 10;
+    width: 2em;
+    height: auto;
+    padding: 2.1em 1.6em;
+}
+
+    .menu-link:hover,
+    .menu-link:focus {
+        background: #000;
+    }
+
+    .menu-link span {
+        position: relative;
+        display: block;
+    }
+
+    .menu-link span,
+    .menu-link span:before,
+    .menu-link span:after {
+        background-color: #fff;
+        width: 100%;
+        height: 0.2em;
+    }
+
+        .menu-link span:before,
+        .menu-link span:after {
+            position: absolute;
+            margin-top: -0.6em;
+            content: " ";
+        }
+
+        .menu-link span:after {
+            margin-top: 0.6em;
+        }
+
+
+/* -- Responsive Styles (Media Queries) ------------------------------------- */
+
+/*
+Hides the menu at `48em`, but modify this based on your app's needs.
+*/
+@media (min-width: 48em) {
+
+    .header,
+    .content {
+        padding-left: 2em;
+        padding-right: 2em;
+    }
+
+    #layout {
+        padding-left: 300px; /* left col width "#menu" */
+        left: 0;
+    }
+    #menu {
+        left: 300px;
+    }
+
+    .menu-link {
+        position: fixed;
+        left: 300px;
+        display: none;
+    }
+
+    #layout.active .menu-link {
+        left: 300px;
+    }
+}
+
+@media (max-width: 48em) {
+    /* Only apply this when the window is small. Otherwise, the following
+    case results in extra padding on the left:
+        * Make the window small.
+        * Tap the menu to trigger the active state.
+        * Make the window large again.
+    */
+    #layout.active {
+        position: relative;
+        left: 300px;
+    }
+}
+
+
+/* _______________________________my edits ------------------------------------- */
+.box-l {
+    padding-right: 1em;
+}
+
+.box-r {
+    padding-left: 1em
+}
+
+fieldset, img, hr {
+    border: none;
+    outline: none;
+}
+
+
+/* TABLE */
+/*a { color: #4183c4; text-decoration: none; }
+a:hover { text-decoration: none; }*/
+.pure-button:hover {
+    text-decoration: none;
+}
+/*table { width: 100%; margin: 2em 0; }*/
+.pure-table a {
+    color: #333;
+    text-decoration: none;
+}
+
+.pure-table a:hover {
+    text-decoration: none;
+    color: #4183c4;
+}
+
+.pure-table {
+    border: none;
+}
+
+.pure-table td, .pure-table th {
+    padding: 0.8em;
+    border: none;
+    border-bottom: 1px solid #f6f6f6;
+    text-align: left;
+}
+
+.pure-table thead {
+    background-color: #F2F9EF
+}
+
+.pure-table th {
+    font-weight: 300;
+}
+
+table td .view:before {
+    font-family: FontAwesome;
+    top: 0;
+    content: "\f05a";
+}
+
+table td .edit:before {
+    font-family: FontAwesome;
+    top: 0;
+    content: "\f044";
+}
+
+table td .delete:before {
+    font-family: FontAwesome;
+    top: 0;
+    content: "\f014";
+}
+
+table .action {
+    width: 1em;
+}
+
+.pure-form .checkboxlist > label, .pure-form .checkboxlist > .field-validation-error, 
+.pure-form .checkboxlist > i.fa-info-circle {
+    vertical-align: top;
+}
+
+.pure-form .checkboxlist ul {
+    max-height: 8.5em;
+    overflow: auto;
+    width: 17em;
+    display: inline-block;
+    padding: 0;
+    margin: 0 0 1em 0;
+}
+
+.pure-form .checkboxlist ul li {
+    margin-bottom: 3px;
+    list-style: none;
+}
+
+.pure-form .checkboxlist ul li label {
+    width: 14em;
+}
+
+.pure-form em, .pure-form i.fa-info-circle {
+    color: silver;
+    padding-left: 0.3em;
+}
+
+.pure-form .pure-button {
+    margin-right: 1em;
+}
+
+.pure-form.detail span {
+    vertical-align: middle;
+    line-height: 2em;
+}
+
+.pure-form.detail label {
+    color: silver;
+}
+
+textarea.medium, select.medium {
+    width: 25em;
+}
+
+textarea.large, input.large {
+    width: 40em;
+    height: 17em;
+}
+
+.pure-control-group.checkboxlist > span {
+    display: inline-block;
+}
+
+
+
+.field-validation-error {
+    color: #a94442;
+    font-weight: bold;
+}
+
+.validation-summary-errors, .summary-error {
+    border-left: 3px solid #d9534f;
+    background: #fdf7f7;
+    padding: 1em;
+    margin-bottom: 2em;
+}
+
+    .validation-summary-errors ul {
+        margin: 0.75em 1em;
+    }
+
+.validation-summary-valid {
+    display: none;
+}
+
+.summary-success {
+    border-left: 3px solid #009900;
+    background: #F2F9EF;
+    padding: 1em;
+    margin-bottom: 2em;
+}
+
+
+/* purecss buttons */
+.button-success,
+.button-error,
+.button-warning,
+.button-secondary {
+    color: white;
+    border-radius: 4px;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+}
+
+.button-success {
+    background: rgb(28, 184, 65); /* this is a green */
+}
+
+.button-error {
+    background: rgb(202, 60, 60); /* this is a maroon */
+}
+
+
+.pure-button.is-primary {
+    background-color: #00d1b2;
+    border-color: transparent;
+    color: #fff;
+}
+.pure-button.is-primary:hover, .pure-button.is-primary.is-hovered {
+    background-color: #00c4a7;
+    border-color: transparent;
+    color: #fff;
+}
+
+.pure-button.is-primary:focus, .pure-button.is-primary.is-focused {
+    border-color: transparent;
+    color: #fff;
+}
+
+    .pure-button.is-primary:focus:not(:active), .pure-button.is-primary.is-focused:not(:active) {
+        box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
+    }
+
+    .pure-button.is-primary:active, .pure-button.is-primary.is-active {
+        background-color: #00b89c;
+        border-color: transparent;
+        color: #fff;
+    }
+
+    .pure-button.is-primary[disabled] {
+        background-color: #00d1b2;
+        border-color: transparent;
+        box-shadow: none;
+    }
+
+
+.pure-button.is-success {
+    background-color: #23d160;
+    border-color: transparent;
+    color: #fff;
+}
+
+    .pure-button.is-success:hover, .pure-button.is-success.is-hovered {
+        background-color: #22c65b;
+        border-color: transparent;
+        color: #fff;
+    }
+
+    .pure-button.is-success:focus, .pure-button.is-success.is-focused {
+        border-color: transparent;
+        color: #fff;
+    }
+
+        .pure-button.is-success:focus:not(:active), .pure-button.is-success.is-focused:not(:active) {
+            box-shadow: 0 0 0 0.125em rgba(35, 209, 96, 0.25);
+        }
+
+    .pure-button.is-success:active, .pure-button.is-success.is-active {
+        background-color: #20bc56;
+        border-color: transparent;
+        color: #fff;
+    }
+
+    .pure-button.is-success[disabled] {
+        background-color: #23d160;
+        border-color: transparent;
+        box-shadow: none;
+    }
+
+
+.pure-button.is-warning {
+    background-color: #ffdd57;
+    border-color: transparent;
+    color: rgb(0, 0, 0);
+    color: rgba(0, 0, 0, 0.7);
+}
+
+    .pure-button.is-warning:hover, .pure-button.is-warning.is-hovered {
+        background-color: #ffdb4a;
+        border-color: transparent;
+        color: rgb(0, 0, 0);
+        color: rgba(0, 0, 0, 0.7);
+    }
+
+    .pure-button.is-warning:focus, .pure-button.is-warning.is-focused {
+        border-color: transparent;
+        color: rgb(0, 0, 0);
+        color: rgba(0, 0, 0, 0.7);
+    }
+
+        .pure-button.is-warning:focus:not(:active), .pure-button.is-warning.is-focused:not(:active) {
+            box-shadow: 0 0 0 0.125em rgba(255, 221, 87, 0.25);
+        }
+
+    .pure-button.is-warning:active, .pure-button.is-warning.is-active {
+        background-color: #ffd83d;
+        border-color: transparent;
+        color: rgb(0, 0, 0);
+        color: rgba(0, 0, 0, 0.7);
+    }
+
+    .pure-button.is-warning[disabled] {
+        background-color: #ffdd57;
+        border-color: transparent;
+        box-shadow: none;
+    }
+
+
+
+    .select {
+        height: 2.25em;
+    }
+    /*.pure-form .select{
+        display:block;
+    }*/
+    .select {
+        /*display: inline-block;*/
+        display: grid;
+        max-width: 100%;
+        position: relative;
+        vertical-align: top;
+        background-color: yellow;
+    }
+    
+    .select::after {
+        border: 4px solid transparent;
+        border-radius: 2px;
+        border-right: 0;
+        border-top: 0;
+        content: " ";
+        display: block;
+        height: .325em;
+        margin-top: -.4375em;
+        pointer-events: none;
+        position: absolute;
+        top: 50%;
+        -o-transform: rotate(-45deg);
+        -ms-transform: rotate(-45deg);
+        -moz-transform: rotate(-45deg);
+        -webkit-transform: rotate(-45deg);
+        transform: rotate(-45deg);
+        -o-transform-origin: center;
+        -ms-transform-origin: center;
+        -moz-transform-origin: center;
+        -webkit-transform-origin: center;
+        transform-origin: center;
+        width: .325em;
+        
+    }
+    .select::after {
+        border-color: #51565c;
+        /*right: 2.125em;*/
+        right: 1.2em;
+        z-index: 4;
+    }    
+    .select select:not([multiple]) {
+        padding-right: 2.5em;
+    }
+    
+    .select select {
+        background-color: #fff;
+        border-color: #dbdbdb;
+        cursor: pointer;
+        display: block; 
+        max-width: 100%;
+        outline: 0;
+        
+    }
+    .select select {
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        /* border: 1px solid transparent; */
+        border-radius: 4px;
+        box-shadow: none;
+        /* display: inline-flex; */
+        /* font-size: 1rem; */
+        height: 2.25em;
+        /* justify-content: flex-start; */
+        /* line-height: 1.5; */  
+        padding: calc(.375em - 1px) calc(.625em - 1px) calc(.375em - 1px) calc(.625em - 1px);
+        position: relative;
+        vertical-align: top;
+    }    
+    .pure-form input[type="text"] {
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        border-color: #dbdbdb;
+        box-shadow: none;
+        height: 2.25em;
+    }    
+    .pure-form textarea {
+        -moz-appearance: none;
+        -webkit-appearance: none;
+        border-color: #dbdbdb;
+        box-shadow: none;  
+    }
+    .pure-form legend {
+       font-weight:bold;
+    }
+       
+    
+    .pure-form-message-inline {
+        color: #7a7a7a;
+        font-size: 0.675em;
+    }
+    .pure-div {
+        padding-top:10px;
+    }
+    
+    
+    .pure-form-aligned .pure-control-group label {
+        text-align: left;
+        /*display: inline-block;
+        vertical-align: middle;
+        width: 10em;
+        margin: 0 1em 0 0;*/
+    }
+    
+
+    /* Sidebar */
+.sidebar {
+    border-left: 1px solid #E3E0D8;
+    padding-left: 55px;
+}
+
+.sidebar h4 {
+    margin-top: 0;
+}
+
+.sidebar ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.sidebar li {
+    font-size: 0.8945em;
+    line-height: 1.7;
+}
+
+.sidebar .widget-blog {
+    padding-bottom: 50px;
+}
+
+.sidebar a {
+    color: #57534A;
+}
+
+.sidebar a:hover {
+    /*color:#00CA4C;*/
+    color: #bb2222;
+}
+
+.sidebar ul ul {
+    margin-bottom: 1em;
+}
+
+.sidebar .menu li a {
+    font-weight: bold;
+}
+
+.sidebar .menu li li a {
+    font-weight: normal;
+}
+
+.sidebar .menu li.active > a {
+    color: #bb2222;
+}
+
+.highlight pre {
+    font-size: 1.1em;
+}
+
+.slider {
+    background: #3abac4;
+}
+
+
+.dropbox {
+    outline: 2px dashed grey; /* the dash box */
+    outline-offset: -10px;
+    background: lightcyan;
+    color: dimgray;
+    padding: 10px 0;
+    min-height: 200px; /* minimum height */
+    position: relative;
+    cursor: pointer;
+  }
+  
+  .input-file {
+    opacity: 0; /* invisible but it's there! */
+    width: 100%;
+    height: 200px;
+    position: absolute;
+    cursor: pointer;
+  }
+  
+  .dropbox:hover {
+    background: lightblue; /* when mouse over to the drop zone, change color */
+  }
+  
+  .dropbox p {
+    font-size: 1.2em;
+    text-align: center;
+    padding: 50px 0;
+  }
+  span.remove-file{
+    color: red;
+    cursor: pointer;
+    /* float: right; */
+  }
+