Просмотр исходного кода

Merge branch 'master' into fix/saml

Yuki Takei 7 лет назад
Родитель
Сommit
432e266890
39 измененных файлов с 4041 добавлено и 2999 удалено
  1. 7 1
      CHANGES.md
  2. 1 0
      config/webpack.common.js
  3. 1 1
      package.json
  4. BIN
      public/images/admin/customize/layout-kibela-thumb.gif
  5. BIN
      public/images/admin/customize/layout-kibela.gif
  6. 3 2
      resource/locales/en-US/translation.json
  7. 3 2
      resource/locales/ja/translation.json
  8. 44 0
      src/client/styles/agile-admin/inverse/colors/kibela.scss
  9. 2767 2767
      src/client/styles/agile-admin/inverse/widgets.scss
  10. 5 0
      src/client/styles/scss/_admin.scss
  11. 130 0
      src/client/styles/scss/_comment_kibela.scss
  12. 194 0
      src/client/styles/scss/_layout_kibela.scss
  13. 76 15
      src/client/styles/scss/_mixins.scss
  14. 84 0
      src/client/styles/scss/_navbar_kibela.scss
  15. 16 69
      src/client/styles/scss/_on-edit.scss
  16. 3 0
      src/client/styles/scss/style.scss
  17. 8 0
      src/client/styles/scss/theme/kibela.scss
  18. 2 1
      src/server/form/admin/customlayout.js
  19. 154 124
      src/server/views/admin/customize.html
  20. 1 0
      src/server/views/admin/markdown.html
  21. 3 3
      src/server/views/admin/widget/theme-colorbox.html
  22. 2 0
      src/server/views/customlayout-selector/forbidden.html
  23. 2 0
      src/server/views/customlayout-selector/not_found.html
  24. 2 0
      src/server/views/customlayout-selector/page.html
  25. 2 0
      src/server/views/customlayout-selector/page_list.html
  26. 2 0
      src/server/views/customlayout-selector/user_page.html
  27. 34 0
      src/server/views/layout-kibela/base/layout.html
  28. 25 0
      src/server/views/layout-kibela/forbidden.html
  29. 29 0
      src/server/views/layout-kibela/not_found.html
  30. 60 0
      src/server/views/layout-kibela/page.html
  31. 62 0
      src/server/views/layout-kibela/page_list.html
  32. 67 0
      src/server/views/layout-kibela/user_page.html
  33. 27 0
      src/server/views/layout-kibela/widget/comments.html
  34. 47 0
      src/server/views/layout-kibela/widget/header.html
  35. 18 8
      src/server/views/layout/layout.html
  36. 15 5
      src/server/views/page_presentation.html
  37. 5 1
      src/server/views/widget/page_content.html
  38. 43 0
      src/server/views/widget/page_list_and_timeline_kibela.html
  39. 97 0
      src/server/views/widget/page_tabs_kibela.html

+ 7 - 1
CHANGES.md

@@ -1,8 +1,14 @@
 CHANGES
 ========
 
-## 3.2.3-RC
+## 3.2.4-RC
 
+* 
+
+## 3.2.3
+
+* Feature: Kibela like layout
+* Improvement: Custom newpage separator for presentation view
 * Support: Shrink image size for themes which recently added
 
 ## 3.2.2

+ 1 - 0
config/webpack.common.js

@@ -37,6 +37,7 @@ module.exports = (options) => {
       'styles/theme-mono-blue':       './src/client/styles/scss/theme/mono-blue.scss',
       'styles/theme-future':          './src/client/styles/scss/theme/future.scss',
       'styles/theme-blue-night':      './src/client/styles/scss/theme/blue-night.scss',
+      'styles/theme-kibela':          './src/client/styles/scss/theme/kibela.scss',
       'styles/theme-halloween':       './src/client/styles/scss/theme/halloween.scss',
       'styles/theme-wood':          './src/client/styles/scss/theme/wood.scss',
       'styles/theme-island':      './src/client/styles/scss/theme/island.scss',

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "growi",
-  "version": "3.2.3-RC",
+  "version": "3.2.4-RC",
   "description": "Team collaboration software using markdown",
   "tags": [
     "wiki",

BIN
public/images/admin/customize/layout-kibela-thumb.gif


BIN
public/images/admin/customize/layout-kibela.gif


+ 3 - 2
resource/locales/en-US/translation.json

@@ -428,9 +428,10 @@
     "presentation_setting_desc": "You can change presentation settings.",
     "Page break setting": "Page break Setting",
     "Preset one separator": "Preset 1",
-    "Preset one separator desc": "Blank line 3 lines",
+    "Preset one separator desc": "3 Blank lines",
     "Preset two separator": "Preset 2",
-    "Preset two separator desc": "Markdown horizontal rule",
+    "Preset two separator desc": "5 Hyphens",
+    "Preset two separator value": "-----",
     "Custom separator": "Custom",
     "Custom separator desc": "Any character",
     "XSS_setting": "Prevent XSS(Cross Site Scripting) Setting",

+ 3 - 2
resource/locales/ja/translation.json

@@ -445,9 +445,10 @@
     "presentation_setting_desc": "プレゼンテーションの設定を変更できます。",
     "Page break setting": "改頁を設定する",
     "Preset one separator": "プリセット 1",
-    "Preset one separator desc": "空行3行で改頁します",
+    "Preset one separator desc": "連続した空行3行で改頁します",
     "Preset two separator": "プリセット 2",
-    "Preset two separator desc": "Markdown の区切り線で改頁します",
+    "Preset two separator desc": "連続したハイフン5つで改頁します",
+    "Preset two separator value": "-----",
     "Custom separator": "カスタム",
     "Custom separator desc": "任意の文字で改頁します",
     "XSS_setting": "XSS(Cross Site Scripting)対策設定",

+ 44 - 0
src/client/styles/agile-admin/inverse/colors/kibela.scss

@@ -0,0 +1,44 @@
+@import '../variables';
+
+$radius: 3px;
+
+$themecolor: rgb(18, 86, 163);
+$themelight: #F4F5F6;
+$subthemecolor: rgb(90, 149, 216);
+
+
+$topbar: $themecolor;
+$sidebar: $themelight;
+$bodycolor: $themelight;
+
+$headingtext: $themecolor;
+$bodytext: #3c4a60;
+$linktext: rgb(74,109,204);
+$linktext-hover: lighten($linktext, 12%);
+$sidebar-text: $themecolor;
+
+$primary: $themecolor;
+$info: lighten($themecolor,20%);
+
+$logo-mark-fill: lighten($themecolor, 20%);
+$wikilinktext: lighten($themecolor, 20%);
+$wikilinktext-hover: lighten($wikilinktext, 20%);
+$inline-code-color: $subthemecolor;
+$inline-code-bg: lighten($subthemecolor,70%);
+$border: rgba(181, 203, 247, 0.61);
+
+@import 'apply-colors';
+@import 'apply-colors-light';
+
+
+// change color of highlighted header in wiki (default: orange)
+.wiki {
+  .code-line.revision-head.highlighted {
+    background-color: lighten($themecolor,20%);
+    color: $themelight;
+
+    .icon-note, .icon-link {
+      color: $themelight;
+    }
+  }
+}

+ 2767 - 2767
src/client/styles/agile-admin/inverse/widgets.scss

@@ -1,2767 +1,2767 @@
-/*ROW -IN*/
-/*
-.row-in i {
-  font-size:24px;
-}
-*/
-/*Inbox widgets*/
-/*
-.mailbox{
-  width:280px;
-  overflow:auto;
-  padding-bottom:0px;
-  }
-  .message-center {
-  a{
-    border-bottom:1px solid $border;
-    display:block;
-    padding:9px 15px;
-  &:hover{
-    background:$extralight;
-  }
-  }
-  .user-img{
-    width:40px;
-    float:left;
-    position:relative;
-    margin:0 10px 15px 0px;
-    img{ width:100%;}
-
-    .profile-status {
-      border: 2px solid $white;
-      border-radius: 50%;
-      display: inline-block;
-      height: 10px;
-      left: 30px;
-      position: absolute;
-      top: 1px;
-      width: 10px;
-    }
-    .online{
-      background:$success;
-    }
-    .busy{
-      background:$danger;
-    }
-    .away{
-      background:$warning;
-    }
-    .offline{
-      background:$warning;
-    }
-  }
- .mail-contnet{
-    h5{
-      margin:0px;
-      font-weight:400;
-      text-overflow:ellipsis;
-      overflow:hidden;
-      white-space:nowrap;
-    }
-
-    .mail-desc{
-      font-size:12px;
-      display:block;
-      margin:5px 0;
-      text-overflow:ellipsis;
-      overflow:hidden;
-      white-space:nowrap;
-      color:$dark;
-    }
-    .time{
-      display:block;
-      font-size:10px;
-       color:$dark;
-    }
-
- }
-
- }
-.mail-contnet a.action{
-        margin-left:10px;
-        font-size:12px;
-        visibility:hidden;
-  }
-.mail-contnet:hover a.action{
-  visibility:visible;
-}
-*/
-
-/*Inbox Center*/
-/*
-.inbox-center{
-  .unread td{
-    font-weight:$font-bold;
-  }
-  a{
-    color:$bodytext;
-    padding:2px 0 3px 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    display: inline-block;
-  }
-
-}
-*/
-
-/*Comment center*/
-/*
-.comment-center {
-  margin:0 -25px;
-  .comment-body{
-    border-bottom:1px solid $border;
-    display:table;
-    padding:20px 25px;
-  &:hover{
-    background:$extralight;
-  }
-  }
-  .user-img{
-    width:40px;
-    display:table-cell;
-    position:relative;
-    margin:0 10px 0px 0px;
-    img{ width:100%;}
-
-  }
- .mail-contnet{
-    display:table-cell;
-    padding-left:15px;
-    vertical-align:top;
-    h5{
-      margin:0px;
-      font-weight:400;
-      text-overflow:ellipsis;
-      overflow:hidden;
-      white-space:nowrap;
-    }
-    .mail-desc{
-      font-size:14px;
-      display:block;
-      margin:8px 0;
-      line-height:25px;
-      color:$dark-text;
-      height:50px;
-      overflow:hidden;
-    }
-    .time{
-      display:block;
-      font-size:10px;
-       color:$dark;
-    }
- }
- }
-*/
-
-/*Sales report*/
-/*
-.sales-report {
-  background:$extralight;
-  margin:12px -25px;
-  padding:15px;
-}
-*/
-
-/*Task*/
-/*
-.dropdown-tasks, .dropdown-alerts{ padding:0px;}
-.dropdown-tasks li a, .dropdown-alerts li a, .mailbox li > a{ padding:15px 20px;}
-.dropdown-tasks li.divider, .dropdown-alerts li.divider{ margin:0px;}
-*/
-
-/*col-in*/
-/*
-.row-in-br{border-right: 1px solid $border;}
-.col-in {
-
-  padding: 20px;
-  h5{}
-  h3{font-size: 48px; font-weight:100;}
-}
-*/
-
-/*
-Basic List
-*/
-/*
-.basic-list {
- padding:0px;
- li{
-  display:block;
-  padding:15px 0px;
-  border-bottom:1px solid $border;
-  line-height:27px;
-}
-}
-.basic-list li:last-child{
-  border-bottom:0px;
-  }
-*/
-
-/* Steam line widget */
-/*
-.steamline {
-  position: relative;
-  border-left: 1px solid $border;
-  margin-left:20px;
-  .sl-left {
-    float: left;
-    margin-left: -20px;
-    z-index: 1;
-  margin-right:15px;
-   img{
-      max-width:40px;
-  }
-  }
-}
-.steamline .sl-right{ padding-left:35px;}
-.steamline .sl-item{
-
-  margin-top:8px;
-  margin-bottom: 30px;
-
-}
-.sl-date{
-  font-size:10px; color:$muted;
-}
-
-.time-item {
-  border-color: $border;
-  padding-bottom: 1px;
-  position: relative;
-  &:before {
-    content: " ";
-    display: table;
-  }
-  &:after {
-    background-color: $white;
-    border-color: $border;
-    border-radius: 10px;
-    border-style: solid;
-    border-width: 2px;
-    bottom: 0;
-    content: '';
-    height: 14px;
-    left: 0;
-    margin-left: -8px;
-    position: absolute;
-    top: 5px;
-    width: 14px;
-  }
-}
-
-.time-item-item {
-  &:after {
-    content: " ";
-    display: table;
-  }
-}
-
-.item-info {
-  margin-bottom: 15px;
-  margin-left: 15px;
-  p {
-    margin-bottom: 10px !important;
-  }
-}
-*/
-
-/*User-box*/
-/*
-.user-bg{
-  margin:-25px;
-  height:230px;
-  overflow:hidden;
-  position:relative;
- .overlay-box{
-      background:$purple;
-      opacity:0.9;
-      position:absolute;
-      top:0px;
-      left:0px;
-      right:0px;
-      height:100%;
-      text-align:center;
-   .user-content{
-     padding:15px;
-     margin-top:30px;
-
-   }
-  }
-}
-.user-btm-box{
-    padding:40px 0 10px;
-    clear:both;
-    overflow:hidden;
-}
-*/
-
-/*    Vertical Carousel */
-/*
-.vertical .carousel-inner {
-  height: 100%;
-  position:relative;
-}
-
-.carousel.vertical .item {
-   -webkit-transition: 0.6s ease-in-out top;
-   -moz-transition: 0.6s ease-in-out top;
-   -ms-transition: 0.6s ease-in-out top;
-   -o-transition: 0.6s ease-in-out top;
-   transition: 0.6s ease-in-out top;
-}
-
-.carousel.vertical .active {
-   top: 0;
-}
-
-.carousel.vertical .next {
-   top: 400px;
-}
-
-.carousel.vertical .prev {
-   top: -400px;
-}
-
-.carousel.vertical .next.left,
-.carousel.vertical .prev.right {
-   top: 0;
-}
-
-.carousel.vertical .active.left {
-   top: -400px;
-}
-
-.carousel.vertical .active.right {
-   top: 400px;
-}
-
-.carousel.vertical .item {
-   left: 0;
-}
-.twi-user img{
-  margin-right: 20px;
-    width: 50px;
-}
-.twi-user {
-    margin: 18px 0;
-}
-.carousel-inner h3{ height:112px; overflow:hidden;}
-*/
-
-/*Chart Box*/
-/*
-.chart-box{
-  margin:25px -15px -17px -17px;
-}
-*/
-
-/*Todo list*/
-/*
-.list-task .task-done span {
-    text-decoration: line-through;
-}
-*/
-
-/* Chat widget */
-/*
-.chat-list {
-  list-style: none;
-  max-height: 332px;
-  padding: 0px 20px;
-  li {
-    margin-bottom: 24px;
-    overflow:auto;
-  }
-  .chat-image {
-    display: inline-block;
-    float: left;
-    text-align: center;
-    width: 50px;
-    img {
-      border-radius: 100%;
-      width: 100%;
-    }
-  }
-  .chat-text {
-
-    background: $extralight;
-    border-radius:$radius;
-    display: inline-block;
-    padding: 15px;
-    position: relative;
-
-    h4 {
-      color: #1a2942;
-      display: block;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 500;
-      margin:0;
-      line-height:15px;
-      position: relative;
-    }
-    p {
-      margin: 0px;
-      padding-top: 3px;
-    }
-    b{
-      font-size:10px;
-      opacity:0.8;
-    }
-
-  }
-  .chat-body {
-    display: inline-block;
-    float: left;
-    font-size: 12px;
-    margin-left: 12px;
-    width: 65%;
-  }
-  .odd {
-    .chat-image {
-      float: right !important;
-    }
-    .chat-body {
-      float: right !important;
-      margin-right: 12px;
-      text-align: right;
-
-
-      color:$white;
-    }
-    .chat-text {
-    background:$themecolor;
-    h4 { color:$white; }
-  }
-  }
-}
-
-.chat-send {
-  padding-left: 0px;
-  padding-right: 30px;
-  button {
-    width: 100%;
-  }
-}
-*/
-
-/*Weather*/
-/*
-.weather-box{
-  .weather-top{
-    overflow:hidden;
-    padding:10px 25px;
-    margin:0 -25px;
-    background:$extralight;
-    h2 {
-      line-height:24px;
-      small{
-        font-size:13px;
-
-      }
-    }
-
-    .today_crnt{
-    font-size:45px;
-    font-weight:100;
-      canvas{
-        display:inline-block;
-        margin-right:10px;
-        vertical-align:middle;
-      }
-    }
-  }
-  .weather-info {
-
-    padding:10px 0;
-    }
-  .weather-time{
-      overflow:hidden;
-      text-align:center;
-      padding-top:15px;
-      li span{
-          display:block;
-      }
-      li canvas{
-          font-size:20px;
-          margin:10px 0;
-      }
-  }
-
-}
-.demo-container {
-  width:100%;
-  height:350px;
-
-}
-
-.demo-placeholder {
-  width: 100%;
-  height: 100%;
-  font-size: 14px;
-  line-height: 1.2em;
-}
-*/
-
-/*Notification alert*/
-.myadmin-alert {
-    border-radius: 0px;
-    color: #fff;
-
-    padding: 12px 30px 12px 12px;
-    position: relative;
-    text-align: left;
-}
-.myadmin-alert a {
-    color: inherit;
-    font-weight: 600;
-    text-decoration: underline;
-}
-.myadmin-alert h4 {
-    color: inherit;
-    font-size: 14px;
-    font-weight: 600;
-    line-height: normal;
-    margin: 0;
-}
-.myadmin-alert .img {
-    border-radius: 3px;
-    height: 40px;
-    left: 12px;
-    position: absolute;
-    top: 12px;
-    width: 40px;
-}
-.myadmin-alert-img {
-    min-height: 64px;
-    padding-left: 65px;
-}
-.myadmin-alert-icon {
-    padding-left: 20px;
-}
-.myadmin-alert-icon i{
-    padding-right: 10px;
-}
-.myadmin-alert .closed {
-    color: rgba(255, 255, 255, 0.5);
-    font-size: 20px;
-    font-weight: 500;
-    padding: 4px;
-    position: absolute;
-    right: 3px;
-    text-decoration: none;
-    top: 0;
-}
-.myadmin-alert .closed:hover {
-    color: #fff;
-}
-.myadmin-alert-click {
-    cursor: pointer;
-    padding-right: 12px;
-}
-.myadmin-alert .primary {
-    background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
-    border: medium none;
-    border-radius: 3px;
-    color: inherit;
-    outline: 0 none;
-    padding: 4px 10px;
-}
-.myadmin-alert .cancel {
-    background: rgba(255, 255, 255, 0.4) none repeat scroll 0 0;
-    border: medium none;
-    border-radius: 3px;
-    color: rgba(0, 0, 0, 0.8);
-    outline: 0 none;
-    padding: 4px 10px;
-}
-.myadmin-alert .primary:hover, .myadmin-alert .cancel:hover {
-    opacity: 0.9;
-}
-.myadmin-alert-top, .myadmin-alert-bottom, .myadmin-alert-top-left, .myadmin-alert-top-right, .myadmin-alert-bottom-left, .myadmin-alert-bottom-right, .myadmin-alert-fullscreen {
-    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
-    display: none;
-    position: fixed;
-    z-index: 1000;
-}
-.myadmin-alert-top {
-    left: 0;
-    right: 0;
-    top: 0;
-}
-.myadmin-alert-bottom {
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-.myadmin-alert-top-left {
-    left: 20px;
-    top: 80px;
-}
-.myadmin-alert-top-right {
-    right: 20px;
-    top: 80px;
-}
-.myadmin-alert-bottom-left {
-    bottom: 20px;
-    left: 20px;
-}
-.myadmin-alert-bottom-right {
-    bottom: 20px;
-    right: 20px;
-}
-.myadmin-alert-fullsize {
-    left: 50%;
-    margin: -20px;
-    top: 50%;
-}
-.alert-custom {
-    background: $themecolor;
-    color:$white;
-    border-color:$themecolor;
-}
-.alert-inverse {
-    background: $inverse;
-    color:$white;
-    border-color:$inverse;
-}
-.alert-success {
-    background: $success;
-    color:$white;
-    border-color:$success;
-}
-.alert-dark {
-    background: $bodytext;
-    color:$white;
-    border-color:$bodytext;
-}
-.alert-warning {
-    background: $warning;
-    color:$white;
-    border-color:$warning;
-}
-.alert-danger {
-    background: $danger;
-    color:$white;
-    border-color:$danger;
-}
-.alert-primary {
-    background: $primary;
-    color:$white;
-    border-color:$primary;
-}
-.alert-info {
-    background: $info;
-    color:$white;
-    border-color:$info;
-}
-.alert-info .closed {
-    color: inherit;
-}
-.alert-info a.closed:hover {
-    color: inherit;
-}
-
-/*custom tab*/
-/*
-.tab-content{
-  margin-top:30px;
-}
-.customtab{
-  border-bottom:2px solid $extralight;
-}
-.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
-  background:$white;
-  border:0px;
-  border-bottom:2px solid $themecolor;
-  margin-bottom:-1px;
-  color:$themecolor;
-}
-.customtab li a, .customtab li a:hover,  .customtab li a:focus{
-  border:0px;
-
-}
-/*
-
-/*custom tab2*/
-/*
-.customtab2{
-  border-bottom:1px solid $extralight;
-  border-top:1px solid $extralight;
-  padding:10px 0;
-}
-.customtab2 li.active a, .customtab2 li.active a:hover,  .customtab2 li.active a:focus{
-  background:$themecolor;
-  border:1px solid $themecolor;
-
-  color:$white;
-}
-.customtab2 li a, .customtab2 li a:hover,  .customtab2 li a:focus{
-  border:0px;
-
-}
-*/
-
-/*Vertical tabs*/
-/*
-.vtabs{
-    display:table;
-    .tabs-vertical{
-      width:150px;
-      border-right:1px solid $border;
-      display:table-cell;
-      vertical-align:top;
-      li a{
-        color:$dark;
-        margin-bottom:10px;
-        }
-      }
-    .tab-content{
-      display:table-cell;
-      padding:20px;
-
-      vertical-align:top;
-    }
-}
-.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
-  background:$themecolor;
-  border:0px;
-  border-right:2px solid $themecolor;
-  margin-right:-1px;
-  color:$white;
-}
-*/
-
-/*Custom vertical tab*/
-/*
-.customvtab .tabs-vertical li.active a, .customvtab .tabs-vertical li.active a:hover,  .customvtab .tabs-vertical li.active a:focus{
-  background:$white;
-  border:0px;
-  border-right:2px solid $themecolor;
-  margin-right:-1px;
-  color:$dark;
-}
-*/
-
-/*Nav pills*/
-.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
-  background:$themecolor;
-  color:$white;
-}
-.nav-pills>li>a{
-  color:$dark;
-  border-radius:$radius;
-}
-
-/*Accordion*/
-/*
-.panel-group {
-  .panel {
-    .panel-heading {
-      a[data-toggle=collapse].collapsed {
-        &:before {
-          content: '\e64b';
-        }
-      }
-      .accordion-toggle.collapsed {
-        &:before {
-          content: '\e64b';
-        }
-      }
-      a[data-toggle=collapse] {
-        display: block;
-        &:before {
-          content: '\e648';
-          display: block;
-          float: right;
-          font-family: 'themify';
-          font-size: 14px;
-          text-align: right;
-          width: 25px;
-        }
-      }
-      .accordion-toggle {
-        display: block;
-        &:before {
-          content: '\e648';
-          display: block;
-          float: right;
-          font-family: 'themify';
-          font-size: 14px;
-          text-align: right;
-          width: 25px;
-        }
-      }
-    }
-    .panel-heading + .panel-collapse {
-      .panel-body {
-        border-top: none;
-      }
-    }
-  }
-  .panel-heading {
-    padding: 12px 20px;
-  }
-}
-*/
-
-/*Progressbars*/
-/*
-.progress {
-  -webkit-box-shadow: none !important;
-  background-color: $border;
-  box-shadow: none !important;
-  height: 4px;
-  border-radius:$radius;
-  margin-bottom: 18px;
-  overflow: hidden;
-}
-
-.progress-bar {
-  box-shadow: none;
-  font-size: 8px;
-  font-weight: 600;
-  line-height: 12px;
-}
-
-.progress.progress-sm {
-  height: 8px !important;
-  .progress-bar {
-    font-size: 8px;
-    line-height: 5px;
-  }
-}
-
-.progress.progress-md {
-  height: 15px !important;
-  .progress-bar {
-    font-size: 10.8px;
-    line-height: 14.4px;
-  }
-}
-
-.progress.progress-lg {
-  height: 20px !important;
-  .progress-bar {
-    font-size: 12px;
-    line-height: 20px;
-  }
-}
-
-.progress-bar-primary {
-  background-color: $primary;
-}
-
-.progress-bar-success {
-  background-color: $success;
-}
-
-.progress-bar-info {
-  background-color: $info;
-}
-.progress-bar-megna {
-  background-color: $megna;
-}
-
-.progress-bar-warning {
-  background-color: $warning;
-}
-
-.progress-bar-danger {
-  background-color: $danger;
-}
-
-.progress-bar-inverse {
-  background-color: $inverse;
-}
-
-.progress-bar-purple {
-  background-color: $purple;
-}
-
-
-.progress-bar-custom {
-  background-color: $info;
-}
-
-.progress-animated {
-  -webkit-animation-duration: 5s;
-  -webkit-animation-name: myanimation;
-  -webkit-transition: 5s all;
-  animation-duration: 5s;
-  animation-name: myanimation;
-  transition: 5s all;
-}
-*/
-
-/* Progressbar Animated */
-/*
-@-webkit-keyframes myanimation {
-  from {
-    width:0;
-  }
-}
-@keyframes myanimation {
-  from {
-    width:0;
-  }
-}
-*/
-
-/* Progressbar Vertical */
-/*
-.progress-vertical {
-    min-height: 250px;
-    height: 250px;
-    width: 4px;
-    position: relative;
-    display: inline-block;
-    margin-bottom: 0;
-    margin-right: 20px;
-
-    .progress-bar {
-      width: 100%;
-   }
-}
-.progress-vertical-bottom{
-    min-height: 250px;
-    height: 250px;
-    position: relative;
-    width: 4px;
-    display: inline-block;
-    margin-bottom: 0;
-    margin-right: 20px;
-
-    .progress-bar {
-      width: 100%;
-      position: absolute;
-      bottom: 0;
-   }
-}
-
-.progress-vertical.progress-sm,.progress-vertical-bottom.progress-sm {
-  width: 8px !important;
-  .progress-bar {
-    font-size: 8px;
-    line-height: 5px;
-  }
-}
-
-.progress-vertical.progress-md,.progress-vertical-bottom.progress-md {
-  width: 15px !important;
-  .progress-bar {
-    font-size: 10.8px;
-    line-height: 14.4px;
-  }
-}
-
-.progress-vertical.progress-lg,.progress-vertical-bottom.progress-lg {
-  width: 20px !important;
-  .progress-bar {
-    font-size: 12px;
-    line-height: 20px;
-  }
-}
-*/
-
-/*Timeline*/
-/*
-.timeline {
-    position: relative;
-    padding: 20px 0 20px;
-    list-style: none;
-    max-width:1200px;
-    margin:0 auto;
-}
-
-.timeline:before {
-    content: " ";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 50%;
-    width: 3px;
-    margin-left: -1.5px;
-    background-color: #eeeeee;
-}
-
-.timeline > li {
-    position: relative;
-    margin-bottom: 20px;
-}
-
-.timeline > li:before,
-.timeline > li:after {
-    content: " ";
-    display: table;
-}
-
-.timeline > li:after {
-    clear: both;
-}
-
-.timeline > li:before,
-.timeline > li:after {
-    content: " ";
-    display: table;
-}
-
-.timeline > li:after {
-    clear: both;
-}
-
-.timeline > li > .timeline-panel {
-    float: left;
-    position: relative;
-    width: 46%;
-    padding: 20px;
-    border: 1px solid $border;
-    border-radius: $radius;
-    -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.05);
-    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
-}
-
-.timeline > li > .timeline-panel:before {
-    content: " ";
-    display: inline-block;
-    position: absolute;
-    top: 26px;
-    right: -8px;
-    border-top: 8px solid transparent;
-    border-right: 0 solid $border;
-    border-bottom: 8px solid transparent;
-    border-left: 8px solid $border;
-}
-
-.timeline > li > .timeline-panel:after {
-    content: " ";
-    display: inline-block;
-    position: absolute;
-    top: 27px;
-    right: -7px;
-    border-top: 7px solid transparent;
-    border-right: 0 solid #fff;
-    border-bottom: 7px solid transparent;
-    border-left: 7px solid #fff;
-}
-
-.timeline > li > .timeline-badge {
-    z-index: 100;
-    position: absolute;
-    top: 16px;
-    left: 50%;
-    width: 50px;
-    height: 50px;
-    margin-left: -25px;
-    border-radius: 50% 50% 50% 50%;
-    text-align: center;
-    font-size: 1.4em;
-    line-height: 50px;
-    color: #fff;
-    overflow:hidden;
-    background-color: $inverse;
-}
-
-.timeline > li.timeline-inverted > .timeline-panel {
-    float: right;
-}
-
-.timeline > li.timeline-inverted > .timeline-panel:before {
-    right: auto;
-    left: -8px;
-    border-right-width: 8px;
-    border-left-width: 0;
-}
-
-.timeline > li.timeline-inverted > .timeline-panel:after {
-    right: auto;
-    left: -7px;
-    border-right-width: 7px;
-    border-left-width: 0;
-}
-
-.timeline-badge.primary {
-    background-color: $primary !important;
-}
-
-.timeline-badge.success {
-    background-color: $success !important;
-}
-
-.timeline-badge.warning {
-    background-color: $warning !important;
-}
-
-.timeline-badge.danger {
-    background-color: $danger !important;
-}
-
-.timeline-badge.info {
-    background-color: $info !important;
-}
-
-.timeline-title {
-    margin-top: 0;
-    color: inherit;
-    font-weight:400;
-}
-
-.timeline-body > p,
-.timeline-body > ul {
-    margin-bottom: 0;
-}
-
-.timeline-body > p + p {
-    margin-top: 5px;
-}
-*/
-
-/*Easy Pie charts*/
-/*
-.chart {
-  position: relative;
-  display: inline-block;
-  width: 100px;
-  height: 100px;
-  margin-top: 20px;
-  margin-bottom: 20px;
-  text-align: center;
-  canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
-.chart.chart-widget-pie {
-  margin-top: 5px;
-  margin-bottom: 5px;
-}
-.pie-chart > span {
-    left: 0;
-    margin-top: -2px;
-    position: absolute;
-    right: 0;
-    text-align: center;
-    top: 50%;
-    transform: translateY(-50%);
-}
-.chart > span > img{
-    left: 0;
-    margin-top: -2px;
-    position: absolute;
-    right: 0;
-    text-align: center;
-    top: 50%;
-  width:60%;
-  height:60%;
-    transform: translateY(-50%);
-  margin:0 auto;
-}
-
-.percent {
-  display: inline-block;
-  line-height: 100px;
-  z-index: 2;
-  font-weight: 600;
-  font-size: 18px;
-  color: $dark;
-
-  &:after {
-    content: '%';
-    margin-left: 0.1em;
-    font-size: .8em;
-  }
-}
-*/
-
-/*Tables*/
-/*
-
-.table {
-  margin-bottom: 10px;
-}
-
-.table-striped>tbody>tr:nth-of-type(odd),.table-hover > tbody > tr:hover,
-.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: $extralight !important;
-}
-
-.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
-.table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td ,
-.table > thead > tr > th, .table-bordered{
-    border-top: 1px solid $light;
-}
-
-.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th
-{
-  padding:15px 8px;
-}
-
-.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 $light;
-}
-.table > thead > tr > th {
-    vertical-align: bottom;
-    border-bottom: 1px solid $light;
-}
-
-tbody {
-  color: #797979;
-}
-
-th {
-  color: #666666;
-  font-weight: 500;
-}
-
-.table-bordered {
-    border: 1px solid $light;
-}
-table.focus-on {
-  tbody {
-    tr.focused {
-      th {
-        background-color: $themecolor;
-        color: $white;
-      }
-      td {
-        background-color: $themecolor;
-        color: $white;
-      }
-    }
-  }
-}
-
-.table-rep-plugin {
-  .table-responsive {
-    border: none !important;
-  }
-  tbody {
-    th {
-      font-size: 14px;
-      font-weight: normal;
-    }
-  }
-  }
-.jsgrid .jsgrid-table{ margin-bottom:0px;}
-.jsgrid-selected-row>td{
-  background:$extralight;
-  border-color:$extralight;
-}
-.jsgrid-header-row>th{
-  background:$white;
-}
-.footable-odd{
-    background-color:$extralight;
-  }
-*/
-
-  /*Inputs*/
-
-.form-control-line {
-    border-left: 0 none;
-    border-radius: 0;
-    border-right: 0 none;
-    border-top: 0 none;
-    box-shadow: none;
-    padding-left: 0;
-}
-.has-success {
-  .form-control {
-    border-color: $success;
-    box-shadow: none !important;
-  }
-}
-
-.has-warning {
-  .form-control {
-    border-color: $warning;
-    box-shadow: none !important;
-  }
-}
-
-.has-error {
-  .form-control {
-    border-color: $danger;
-    box-shadow: none !important;
-  }
-}
-
-.input-group-addon {
-  border-radius: $radius;
-  border: 1px solid $border;
-}
-/*
-.input-daterange input:first-child, .input-daterange input:last-child{border-radius:$radius;}
-*/
-
-/*Material inputs*/
-/*
-.form-material .form-group{ overflow:hidden;}
-.form-material .form-control {
-    background-color: rgba(0, 0, 0, 0);
-    background-position: center bottom, center calc(100% - 1px);
-    background-repeat: no-repeat;
-    background-size: 0 2px, 100% 1px;
-    padding: 0;
-    transition: background 0s ease-out 0s;
-}
-.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {
-    background-image: linear-gradient($purple, $purple), linear-gradient($border, $border);
-    border: 0 none;
-    border-radius: 0;
-    box-shadow: none;
-    float: none;
-}
-.form-material .form-control.focus, .form-material .form-control:focus {
-    background-size: 100% 2px, 100% 1px;
-    outline: 0 none;
-    transition-duration: 0.3s;
-}
-.form-bordered .form-group{
-  border-bottom:1px solid $border;
-  padding-bottom:20px;
-}
-*/
-
-/*Select 2*/
-/*
-.select2-container {
-  .select2-choice {
-    background-image: none !important;
-    border: none !important;
-    height: auto  !important;
-    padding: 0px !important;
-    line-height: 22px !important;
-    background-color: transparent !important;
-    box-shadow: none !important;
-
-    .select2-arrow {
-      background-image: none !important;
-      background: transparent;
-      border: none;
-      width: 14px;
-      top: -2px;
-    }
-  }
-  .select2-container-multi.form-control {
-    height: auto;
-  }
-}
-.select2-results .select2-highlighted {
-  color: #ffffff;
-  background-color: $info;
-}
-.select2-drop-active {
-  border: 1px solid #e3e3e3 !important;
-  padding-top: 5px;
-
-}
-.select2-search {
-  input{
-    border: 1px solid $border;
-  }
-}
-.select2-container-multi {
-  width: 100%;
-
-  .select2-choices {
-    border: 1px solid #border  !important;
-    box-shadow: none !important;
-    background-image: none  !important;
-    border-radius:$radius!important;
-    min-height: 38px;
-
-    .select2-search-choice {
-      padding: 4px 7px 4px 18px;
-      margin: 5px 0 3px 5px;
-      color: #555555;
-      background: #f5f5f5;
-      border-color:$border;
-      -webkit-box-shadow: none;
-      box-shadow: none;
-    }
-    .select2-search-field {
-      input {
-        padding: 7px 7px 7px 10px;
-        font-family: inherit;
-      }
-    }
-  }
-}
-*/
-
-/*Icons*/
-/*
-.icon-list-demo {
-  div {
-    cursor: pointer;
-    line-height: 60px;
-    white-space: nowrap;
-    color: $bodytext;
-
-    &:hover {
-      color: $dark;
-    }
-
-    p{
-      margin:10px 0;
-      padding:5px 0;
-    }
-  }
-  i {
-    -webkit-transition: all 0.2s;
-    -webkit-transition: font-size .2s;
-    display: inline-block;
-    font-size: 18px;
-    margin: 0 15px 0 10px;
-    text-align: left;
-    transition: all 0.2s;
-    transition: font-size .2s;
-    vertical-align: middle;
-    width: auto;
-
-    transition: all 0.3s ease 0s;
-  }
-  .col-md-4 {
-    border-radius:$radius;
-    &:hover {
-      background-color: $extralight;
-    }
-
-  }
-}
-.icon-list-demo .col-md-4:hover i {
-      font-size:2em;
-
-    }
-*/
-
-/*Google map*/
-/*
-.gmaps, .gmaps-panaroma{
-  height: 300px;
-}
-.gmaps, .gmaps-panaroma {
-  height: 300px;
-  background: $light;
-  border-radius: 3px;
-}
-
-.gmaps-overlay {
-  display: block;
-  text-align: center;
-  color: $white;
-  font-size: 16px;
-  line-height: 40px;
-  background: $primary;
-  border-radius: 4px;
-  padding: 10px 20px;
-}
-
-.gmaps-overlay_arrow {
-  left: 50%;
-  margin-left: -16px;
-  width: 0;
-  height: 0;
-  position: absolute;
-}
-
-.gmaps-overlay_arrow.above {
-  bottom: -15px;
-  border-left: 16px solid transparent;
-  border-right: 16px solid transparent;
-  border-top: 16px solid $primary;
-}
-
-.gmaps-overlay_arrow.below {
-  top: -15px;
-  border-left: 16px solid transparent;
-  border-right: 16px solid transparent;
-  border-bottom: 16px solid $primary;
-}
-
-.jvectormap-zoomin, .jvectormap-zoomout {
-  width: 10px;
-  height: 10px;
-  line-height: 10px;
-}
-.jvectormap-zoomout {
-    top: 40px;
-}
-*/
-
-/*Error Page*/
-/*
-.error-box{
-  height:100%;
-  position:fixed;
-  background:url(../../plugins/images/error-bg.jpg) no-repeat center center #fff !important;
-  width:100%;
-  .footer{
-    width:100%;
-    left:0px;
-    right:0px;
-  }
-}
-.error-body{
-   padding-top:5%;
-   h1{
-      font-size:210px;
-      font-weight:900;
-      line-height:210px;
-   }
-}
-*/
-
-/* Login- register pages */
-/*
-.login-register{
-  background:url(../../plugins/images/login-register.jpg) no-repeat center center / cover !important;
-  height:100%;
-  position:fixed;
-}
-.login-box{
-  background:$white;
-  width:400px;
-  margin:0 auto;
-  margin-top:10%;
-  .footer{
-    width:100%;
-    left:0px;
-    right:0px;
-  }
-  .social {
-    display:block;
-    margin-bottom:30px;
-  }
-}
-#recoverform{
-   display:none;
-}
-*/
-
-/*Pricing*/
-/*
-.pricing-box {
-  position: relative;
-  text-align: center;
-  margin-top:30px;
-}
-.featured-plan{
-    margin-top:0px;
-    .pricing-body {
-      padding:60px 0;
-      background:$extralight;
-      border: 1px solid #ddd;
-    }
-    .price-table-content .price-row {
-      border-top:1px solid rgba(120, 130, 140, 0.13);
-    }
-  }
-
-.pricing-body {
-  border-radius: 0px;
-  border-top: 1px solid rgba(120, 130, 140, 0.13);
-  border-bottom: 5px solid rgba(120, 130, 140, 0.13);
-  vertical-align: middle;
-  padding:30px 0;
-  position:relative;
-
-}
-
-.pricing-body h2{
-  position:relative;
-  font-size:56px;
-  margin:20px 0 10px;
-  font-weight:500;
-  span{
-    position:absolute;
-    font-size:15px;
-    top:-10px;
-    margin-left:-10px
-  }
-}
-.price-table-content{
-  .price-row {
-    padding:20px 0;
-    border-top:1px solid rgba(120, 130, 140, 0.13);
-  }
-}
-.pricing-plan  {
-  padding:0 15px;
-  .no-padding{ padding:0px;}
-}
-.price-lable{
-  position:absolute;
-  top:-10px;
-  padding:5px 10px;
-  margin:0 auto;
-  display:inline-block;
-  width:100px;
-  left:0px;
-  right:0px;
- }
-*/
-
-/*Inbox*/
-/*
-.mails {
-  a {
-    color: $dark;
-  }
-
-  td {
-    vertical-align: middle !important;
-    position: relative;
-
-    &:last-of-type {
-      width: 100px;
-      padding-right: 20px;
-    }
-  }
-
-  tr {
-    &:hover {
-      .text-white {
-        display: none;
-      }
-    }
-  }
-
-  .mail-select {
-    padding: 12px 20px;
-    min-width: 134px;
-  }
-  .checkbox {
-    margin-bottom: 0px;
-    margin-top: 0px;
-    vertical-align: middle;
-    display: inline-block;
-    height: 17px;
-
-    label {
-      min-height: 16px;
-    }
-  }
-}
-
-.mail-list {
-  .list-group-item {
-     background-color: transparent;
-     border:0px;
-     border-left:3px solid $white;
-     border-radius:0px;
-     &:hover {
-       background:$extralight;
-       border-left:3px solid $extralight;
-     }
-     &:focus {
-       border-left:3px solid $extralight;
-     }
-     &.active:focus{
-     background:$extralight;
-       border-left:3px solid $danger;
-     }
-  }
-  .list-group-item.active{
-    border-left:3px solid $danger;
-    border-radius:0px;
-    color:$dark !important;
-
-  }
-}
-
-.mail_listing{  min-height:500px;}
-.inbox_listing .inbox-item:hover{ background:$extralight;}
-.inbox_listing .inbox-item{ padding-left:20px;}
-.inbox-widget.inbox_listing .inbox-item .inbox-item-text{ height:19px; overflow:hidden;}
-
-.message-center .unread .mail-contnet {
-  h5, .mail-desc{
-    font-weight: 600;
-    color: $dark!important;
-  }
-}
-*/
-
-/*Calendar*/
-/*
-.calendar {
-  float: left;
-  margin-bottom: 0px;
-}
-
-.fc-view {
-  margin-top: 30px;
-}
-.none-border {
-  .modal-footer {
-    border-top: none;
-  }
-}
-
-.fc-toolbar {
-  margin-bottom: 5px;
-  margin-top: 15px;
-  h2 {
-    font-size: 18px;
-    font-weight: 600;
-    line-height: 30px;
-    text-transform: uppercase;
-  }
-}
-
-.fc-day {
-  background: $white;
-}
-
-.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active,
-.fc-toolbar button:focus, .fc-toolbar button:hover,
-.fc-toolbar .ui-state-hover {
-  z-index: 0;
-}
-
-.fc-widget-header {
-  border: 0px !important;
-}
-
-.fc-widget-content {
-  border-color:rgba(120, 130, 140, 0.13)!important ;
-}
-
-.fc {
-  th.fc-widget-header {
-    background: $purple;
-    color:$white;
-    font-size: 14px;
-    line-height: 20px;
-    padding: 7px 0px;
-    text-transform: uppercase;
-  }
-}
-
-.fc-button {
-  background: $white;
-  border: 1px solid $border;
-  color: #555555;
-  text-transform: capitalize;
-}
-
-.fc-text-arrow {
-  font-family: inherit;
-  font-size: 16px;
-}
-
-.fc-state-hover {
-  background: #F5F5F5;
-}
-.fc-unthemed .fc-today{
-  border:1px solid $danger;
-  background:#fcf8e3!important;
-}
-.fc-state-highlight {
-  background: #f0f0f0;
-}
-
-.fc-cell-overlay {
-  background: #f0f0f0;
-}
-
-.fc-unthemed {
-  .fc-today {
-    background: $white;
-  }
-}
-
-.fc-event {
-  border-radius: 0px;
-  border: none;
-  cursor: move;
-  font-size: 13px;
-  margin:1px -1px 0 -1px;
-  padding: 5px 5px;
-  text-align: center;
-  background:$info;
-}
-
-.calendar-event {
-
-  cursor: move;
-  margin: 10px 5px 0 0;
-  padding: 6px 10px;
-  display:inline-block;
-  color:$white;
-  min-width:140px;
-  text-align:center;
-  background:$info;
-  a{
-    float:right;
-    opacity:0.6;
-    font-size:10px;
-    margin:4px 0 0 10px;
-    color:$white;
-  }
-}
-
-.fc-basic-view {
-  td.fc-week-number {
-    span {
-      padding-right: 5px;
-    }
-  }
-  td.fc-day-number {
-    padding-right: 5px;
-  }
-}
-*/
-
-/*Weather small widget*/
-/*
-.weather{
-  h1{
-    color:$white;
-    font-size:50px;
-    font-weight:100;
-  }
-  i{
-    color:$white;
-    font-size:40px;
-
-  }
-  .w-title-sub{
-    color:rgba(255, 255, 255, 0.6);
-  }
-}
-*/
-
-/*Right sidebar*/
-/*
-.navbar-top-links > li.right-side-toggle a:focus{ background:$sidebar;}
-.right-sidebar{
-  position:fixed;
-  right:-240px;
-  width:240px;
-  display:none;
-  z-index:1000;
-  background:$white;
-  top:0px;
-  height:100%;
-  box-shadow:5px 1px 40px rgba(0, 0, 0, 0.1);
-  transition:all 0.3s ease;
-
-  .rpanel-title{
-    display:block;
-    padding:21px;
-    color:#fff;
-    text-transform:uppercase;
-    font-size:13px;
-    background:$themecolor;
-    span{
-        float:right;
-        cursor:pointer;
-        font-size:11px;
-        &:hover{
-            color:$dark;
-        }
-    }
-  }
- .r-panel-body{
-    padding:20px;
-   ul{
-     margin:0px;
-     padding:0px;
-      li{
-          list-style:none;
-          padding:5px 0;
-      }
-   }
- }
-}
-
-.shw-rside{
-  right:0px;
-  width:240px;
-  display:block;
-}
-*/
-
-/*Chat online*/
-/*
-.chatonline {
-  img{
-      margin-right:10px;
-      float:left;
-      width:30px;
-  }
-  li a {
-    padding:15px 0;
-    float:left;
-    width:100%;
-  span{
-      color:$bodytext;
-     small{
-        display:block;
-        font-size:10px;
-     }
-     }
-  }
-}
-*/
-
-/*Style switcher*/
-/*
-ul#themecolors {
-  display:block;
-  li{
-    display:inline-block;
-    &:first-child{
-      display:block;
-    }
-  }
-}
-#themecolors li a{
-    width: 50px;
-    height: 50px;
-    display:inline-block;
-    margin:5px;
-    color: transparent;
-    position: relative;
-}
-#themecolors li a.working:before{
-  content: "\f00c";
-  font-family: "FontAwesome";
-  font-size: 18px;
-  line-height: 50px;
-  width: 50px;
-  height: 50px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  color: #fff;
-  text-align: center;
-  }
-.default-theme{
-      background:$danger;
-}
-.green-theme{
-      background:$success;
-}
-.yellow-theme{
-      background:$yellow;
-}
-.blue-theme{
-      background:$info;
-}
-.purple-theme{
-      background:$purple;
-}
-.megna-theme{
-      background:$megna;
-}
-*/
-
-// .default-dark-theme{
-//     background: #4f5467; /* Old browsers */
-//     background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, #f75b36 23%, #f75b36 99%); /* FF3.6-15 */
-//     background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,#f75b36 23%,#f75b36 99%); /* Chrome10-25,Safari5.1-6 */
-//     background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,#f75b36 23%,#f75b36 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-//     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='#f75b36',GradientType=1 ); /* IE6-9 */
-// }
-// .green-dark-theme{
-//     background: #4f5467; /* Old browsers */
-//     background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, #00c292 23%, #00c292 99%); /* FF3.6-15 */
-//     background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,#00c292 23%,#00c292 99%); /* Chrome10-25,Safari5.1-6 */
-//     background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,#00c292 23%,#00c292 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-//     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='#00c292',GradientType=1 ); /* IE6-9 */
-// }
-// .yellow-dark-theme{
-//    background: #4f5467; /* Old browsers */
-//     background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, #a0aec4 23%, #a0aec4 99%); /* FF3.6-15 */
-//     background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,#a0aec4 23%,#a0aec4 99%); /* Chrome10-25,Safari5.1-6 */
-//     background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,#a0aec4 23%,#a0aec4 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-//     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='#a0aec4',GradientType=1 ); /* IE6-9 */
-// }
-// .blue-dark-theme{
-//     background: #4f5467; /* Old browsers */
-//     background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, $info 23%, $info 99%); /* FF3.6-15 */
-//     background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,$info 23%,$info 99%); /* Chrome10-25,Safari5.1-6 */
-//     background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,$info 23%,$info 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-//     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='$info',GradientType=1 ); /* IE6-9 */
-// }
-// .purple-dark-theme{
-//     background: #4f5467; /* Old browsers */
-//     background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, $purple 23%, $purple 99%); /* FF3.6-15 */
-//     background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,$purple 23%,$purple 99%); /* Chrome10-25,Safari5.1-6 */
-//     background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,$purple 23%,$purple 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-//     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='$purple',GradientType=1 ); /* IE6-9 */
-// }
-// .megna-dark-theme{
-//     background: #4f5467; /* Old browsers */
-//     background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, $megna 23%, $megna 99%); /* FF3.6-15 */
-//     background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,$megna 23%,$megna 99%); /* Chrome10-25,Safari5.1-6 */
-//     background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,$megna 23%,$megna 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-//     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='$megna',GradientType=1 ); /* IE6-9 */
-// }
-
-
-/*visited ul li*/
-.visited li a{
-  color:$bodytext
-}
-.visited li.active a{
-  color:$themecolor;
-}
-
-/*Stats Row*/
-/*
-.stats-row{
-  margin-bottom:20px;
-}
-.stat-item{
-    display: inline-block;
-    padding-right: 15px;
-}
-.stat-item+.stat-item {
-    padding-left: 15px;
-    border-left: 1px solid #eee;
-}
-*/
-
-/*country-state*/
-/*
-.country-state{
-  list-style:none;
-  margin:0px;
-  padding:0px 0 0 10px;
-  h2{
-      margin:0px;
-  }
-  .progress{
-  margin-top:8px;
-  }
-}
-*/
-
-/*Two part*/
-/*
-.two-part li{
-  width:48.8%;
-  i{
-      font-size:44px;
-    }
-  span{
-      font-size:44px;
-      font-weight:100;
-      font-family:$basefont2;
-  }
-}
-*/
-
-/*News Slides*/
-/*
-.news-slide{
-position:relative;
-  .overlaybg{
-    height:343px;
-    overflow:hidden;
-  img{
-    width:100%;
-    height:100%;
-  }
-  }
-  .news-content{
-     position:absolute;
-     height:360px;
-     background:rgba(0, 0, 0, 0.5);
-     z-index:10;
-     width:100%;
-     top:0px;
-     padding:30px;
-     h2{
-        height:240px;
-        overflow:hidden;
-        color:$white;
-     }
-     a {
-        color:$white;
-        opacity:0.6;
-        text-transform:uppercase;
-     &:hover{
-        opacity:1;
-     }
-     }
-  }
-}
-*/
-
-/*Nav pill rounded*/
-/*
-.nav-pills-rounded li{ display:inline-block; float:none;}
-.nav-pills-rounded li a{
-  border-radius:60px;
-  -moz-border-radius:60px;
-  -webkit-border-radius:60px;
-  color:$bodytext;
-  padding: 10px 25px;
-}
-.nav-pills-rounded li.active a, .nav-pills-rounded li.active a:focus, .nav-pills-rounded li.active a:hover{
-  background:$themecolor;
-  color:$white;
- }
-*/
-
- /*analytics-info*/
-/*
- .analytics-info .list-inline {
-     margin-bottom:0px;
-   li {
-      vertical-align:middle;
-      span{
-          font-size:24px;
-        }
-      i{
-        font-size:20px;
-      }
-      }
- }
-*/
-
- /*Feeds*/
-/*
-.feeds{
-    margin:0px;
-    padding:0px;
-  li{
-      list-style:none;
-      padding:10px;
-      display:block;
-      &:hover{
-          background:$extralight;
-      }
-      > div{
-          width:40px;
-          height:40px;
-          margin-right:5px;
-          display:inline-block;
-          text-align:center;
-          vertical-align:middle;
-          border-radius:100%;
-         i{
-            line-height:40px;
-         }
-      }
-      span{
-         float:right;
-         width:auto;
-          font-size:12px;
-      }
-  }
-
-}
-*/
-/*Jquery toaster*/
-
-/*
-.jq-icon-info {background-color: $megna; color:$white;}
-.jq-icon-success {background-color: $success; color:$white;}
-.jq-icon-error {background-color: $danger; color:$white;}
-.jq-icon-warning{ background-color:$warning; color:$white;}
-*/
-#toast-container > div {
-  border-radius: $radius;
-  box-shadow: none;
-  opacity: 1;
-}
-.toast-info {background-color: $info; color:$white;}
-.toast-success {background-color: $success; color:$white;}
-.toast-error {background-color: $danger; color:$white;}
-.toast-warning{ background-color:$warning; color:$white;}
-
-
-/*Dropzone*/
-/*
-.dropzone{ border-style:dashed; border-width:1px;}
-*/
-
-/*sales boxes*/
-/*
-.weather h1 sup{
-  font-size:20px;
-  top:-1.2em;
-}
-*/
-
-
-
-/* Button 1c */
-.fcbtn {
-  position: relative;
-  -webkit-transition: all 0.3s;
-  -moz-transition: all 0.3s;
-  transition: all 0.3s;
-  padding:8px 20px;
-}
-
-.fcbtn:after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-  -webkit-transition: all 0.3s;
-  -moz-transition: all 0.3s;
-  transition: all 0.3s;
-}
-
-/* Button 1b */
-.btn-1b{
-  overflow: hidden;
-  &:after {
-  width: 100%;
-  height: 0;
-  top: 0;
-  left: 0;
-}
-
-&:hover, &:active {
-  color: #fff;
-}
-&:hover:after, &:active:after {
-  height: 100%;
-}
-}
-.btn-1b.btn-info:after, .btn-1c.btn-info:after, .btn-1d.btn-info:after, .btn-1e.btn-info:after, .btn-1f.btn-info:after{background: $info;}
-.btn-1b.btn-warning:after, .btn-1c.btn-warning:after, .btn-1d.btn-warning:after, .btn-1e.btn-warning:after, .btn-1f.btn-warning:after{background: $warning;}
-.btn-1b.btn-danger:after, .btn-1c.btn-danger:after, .btn-1d.btn-danger:after, .btn-1e.btn-danger:after, .btn-1f.btn-danger:after{background: $danger;}
-.btn-1b.btn-primary:after, .btn-1c.btn-primary:after, .btn-1d.btn-primary:after, .btn-1e.btn-primary:after, .btn-1f.btn-primary:after{background: $primary;}
-.btn-1b.btn-success:after, .btn-1c.btn-success:after, .btn-1d.btn-success:after, .btn-1e.btn-success:after, .btn-1f.btn-success:after{background: $success;}
-.btn-1b.btn-inverse:after, .btn-1c.btn-inverse:after, .btn-1d.btn-inverse:after, .btn-1e.btn-inverse:after, .btn-1f.btn-inverse:after{background: $inverse;}
-
-
-/* Button 1c */
-
-.btn-1c{
-  &:after {
-  width: 0%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  }
-  &:hover,&:active {
-    color: #000;
-  }
-  &:hover:after, &:active:after {
-  width: 100%;
-  }
-}
-
-
-/* Button 1d */
-.btn-1d {
-  overflow: hidden;
-  &:after {
-  width: 0;
-  height: 103%;
-  top: 50%;
-  left: 50%;
-  opacity: 0;
-  -webkit-transform: translateX(-50%) translateY(-50%);
-  -moz-transform: translateX(-50%) translateY(-50%);
-  -ms-transform: translateX(-50%) translateY(-50%);
-  transform: translateX(-50%) translateY(-50%);
-  }
-  &:hover:after {
-  width: 100%;
-  opacity: 1;
-  }
-
-}
-
-/* Button 1e */
-.btn-1e {
-  overflow: hidden;
-  &:after {
-  width: 100%;
-  height: 0;
-  top: 50%;
-  left: 50%;
-  background: #fff;
-  opacity: 0;
-  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  transform: translateX(-50%) translateY(-50%) rotate(45deg);
-  }
-
-  &:hover:after {
-    height: 260%;
-    opacity: 1;
-  }
-  &:active:after {
-    height: 400%;
-    opacity: 1;
-  }
-}
-/* Button 1f */
-.btn-1f {
-  overflow: hidden;
-  &:after {
-  width: 101%;
-  height: 0;
-  top: 50%;
-  left: 50%;
-  background: #fff;
-  opacity: 0;
-  -webkit-transform: translateX(-50%) translateY(-50%);
-  -moz-transform: translateX(-50%) translateY(-50%);
-  -ms-transform: translateX(-50%) translateY(-50%);
-  transform: translateX(-50%) translateY(-50%);
-}
-&:hover:after {
-  height: 100%;
-  opacity: 1;
-}
-&:active:after {
-  height: 130%;
-  opacity: 1;
-}
-}
-
-/*sweat Aleart*/
-/*
-.sweet-alert {
-   padding:25px;
-  h2{
-  margin-top:0px;
-}
-p{
-  line-height:30px;
-}
-}
-*/
-
-/*List icon*/
-/*
-ul.list-icons{
-  margin:0px;
-  padding:0px;
-  li{
-    list-style:none;
-    line-height:40px;
-    i{
-      font-size:12px;
-      margin-right:5px;
-    }
-  }
-}
-*/
-
-/*Tooltip*/
-/*
-.demo-tooltip .tooltip, .demo-popover .popover{
-    position: relative;
-    margin-right: 25px;
-    opacity: 1;
-    display:inline-block;
-}
-.tooltip-inner {
-  border-radius:3px;
-  padding: 5px 10px;
-}
-.tooltip.in{opacity:1;}
-.tooltip-primary.tooltip .tooltip-inner, .tooltip-primary + .tooltip .tooltip-inner {
-  color: #ffffff;
-  background-color: $primary;
-}
-.tooltip-primary.tooltip.top .tooltip-arrow, .tooltip-primary + .tooltip.top .tooltip-arrow {
-  border-top-color: $primary;
-}
-.tooltip-primary.tooltip.right .tooltip-arrow, .tooltip-primary + .tooltip.right .tooltip-arrow {
-  border-right-color: $primary;
-}
-.tooltip-primary.tooltip.bottom .tooltip-arrow , .tooltip-primary + .tooltip.bottom .tooltip-arrow {
-  border-bottom-color: $primary;
-}
-.tooltip-primary.tooltip.left .tooltip-arrow, .tooltip-primary + .tooltip.left .tooltip-arrow {
-  border-left-color: $primary;
-}
-.tooltip-success.tooltip .tooltip-inner, .tooltip-success + .tooltip .tooltip-inner {
-  color: #ffffff;
-  background-color: $success;
-}
-.tooltip-success.tooltip.top .tooltip-arrow, .tooltip-success + .tooltip.top .tooltip-arrow {
-  border-top-color: $success;
-}
-.tooltip-success.tooltip.right .tooltip-arrow, .tooltip-success + .tooltip.right .tooltip-arrow {
-  border-right-color: $success;
-}
-.tooltip-success.tooltip.bottom .tooltip-arrow, .tooltip-success + .tooltip.bottom .tooltip-arrow {
-  border-bottom-color: $success;
-}
-.tooltip-success.tooltip.left .tooltip-arrow, .tooltip-success + .tooltip.left .tooltip-arrow {
-  border-left-color: $success;
-}
-.tooltip-warning.tooltip .tooltip-inner, .tooltip-warning + .tooltip .tooltip-inner {
-  color: #ffffff;
-  background-color: $warning;
-}
-.tooltip-warning.tooltip.top .tooltip-arrow, .tooltip-warning + .tooltip.top .tooltip-arrow {
-  border-top-color: $warning;
-}
-.tooltip-warning.tooltip.right .tooltip-arrow, .tooltip-warning + .tooltip.right .tooltip-arrow {
-  border-right-color: $warning;
-}
-.tooltip-warning.tooltip.bottom .tooltip-arrow, .tooltip-warning + .tooltip.bottom .tooltip-arrow {
-  border-bottom-color: $warning;
-}
-.tooltip-warning.tooltip.left .tooltip-arrow, .tooltip-warning + .tooltip.left .tooltip-arrow {
-  border-left-color: $warning;
-}
-.tooltip-info.tooltip .tooltip-inner, .tooltip-info + .tooltip .tooltip-inner {
-  color: #ffffff;
-  background-color: $info;
-}
-.tooltip-info.tooltip.top .tooltip-arrow, .tooltip-info + .tooltip.top .tooltip-arrow {
-  border-top-color: $info;
-}
-.tooltip-info.tooltip.right .tooltip-arrow, .tooltip-info + .tooltip.right .tooltip-arrow {
-  border-right-color: $info;
-}
-.tooltip-info.tooltip.bottom .tooltip-arrow, .tooltip-info + tooltip.bottom .tooltip-arrow {
-  border-bottom-color: $info;
-}
-.tooltip-info.tooltip.left .tooltip-arrow, .tooltip-info + .tooltip.left .tooltip-arrow {
-  border-left-color: $info;
-}
-
-.tooltip-danger.tooltip .tooltip-inner, .tooltip-danger + .tooltip .tooltip-inner {
-  color: #ffffff;
-  background-color: $danger;
-}
-.tooltip-danger.tooltip.top .tooltip-arrow, .tooltip-danger + .tooltip.top .tooltip-arrow {
-  border-top-color: $danger;
-}
-.tooltip-danger.tooltip.right .tooltip-arrow, .tooltip-danger + .tooltip.right .tooltip-arrow {
-  border-right-color: $danger;
-}
-.tooltip-danger.tooltip.bottom .tooltip-arrow, .tooltip-danger + .tooltip.bottom .tooltip-arrow {
-  border-bottom-color: $danger;
-}
-.tooltip-danger.tooltip.left .tooltip-arrow, .tooltip-danger + .tooltip.left .tooltip-arrow {
-  border-left-color: $danger;
-}
-.flotTip {
-    padding: 8px 12px;
-    background-color: $dark;
-    z-index: 100;
-    color: #ffffff;
-    opacity: 0.9;
-    font-size: 13px;
-
-}
-*/
-
-/*Popover*/
-/*
-.popover {
-  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-}
-.popover .popover-title{
-  border-radius:0px;
-}
-.popover-primary + .popover .popover-title {
-  color: $white;
-  background-color: $primary;
-  border-color: $primary;
-}
-.popover-primary + .popover.bottom .arrow {
-  border-bottom-color: $primary;
-}
-.popover-primary + .popover.bottom .arrow:after {
-  border-bottom-color: $primary;
-}
-.popover-success + .popover .popover-title {
-  color: $white;
-  background-color: $success;
-  border-color: $success;
-}
-.popover-success + .popover.bottom .arrow {
-  border-bottom-color: $success;
-}
-.popover-success + .popover.bottom .arrow:after {
-  border-bottom-color: $success;
-}
-.popover-info + .popover .popover-title {
-  color: $white;
-  background-color: $info;
-  border-color: $info;
-}
-.popover-info + .popover.bottom .arrow {
-  border-bottom-color: $info;
-}
-.popover-info + .popover.bottom .arrow:after {
-  border-bottom-color: $info;
-}
-.popover-warning + .popover .popover-title {
-  color:$white;
-  background-color: $warning;
-  border-color: $warning;
-}
-.popover-warning + .popover.bottom .arrow {
-  border-bottom-color: $warning;
-}
-.popover-warning + .popover.bottom .arrow:after {
-  border-bottom-color: $warning;
-}
-.popover-danger + .popover .popover-title {
-  color:$white;
-  background-color: $danger;
-  border-color: $danger;
-}
-.popover-danger + .popover.bottom .arrow {
-  border-bottom-color: $danger;
-}
-.popover-danger + .popover.bottom .arrow:after {
-  border-bottom-color: $danger;
-}
-*/
-
-/*File Upload*/
-/*
-.btn-file {
-  overflow: hidden;
-  position: relative;
-  vertical-align: middle;
-}
-.btn-file > input {
-  position: absolute;
-  top: 0;
-  right: 0;
-  margin: 0;
-  opacity: 0;
-  filter: alpha(opacity=0);
-  font-size: 23px;
-  height: 100%;
-  width: 100%;
-  direction: ltr;
-  cursor: pointer;
-  border-radius:0px;
-}
-.fileinput {
-  margin-bottom: 9px;
-  display: inline-block;
-}
-.fileinput .form-control {
-  padding-top: 7px;
-  padding-bottom: 5px;
-  display: inline-block;
-  margin-bottom: 0px;
-  vertical-align: middle;
-  cursor: text;
-}
-.fileinput .thumbnail {
-  overflow: hidden;
-  display: inline-block;
-  margin-bottom: 5px;
-  vertical-align: middle;
-  text-align: center;
-}
-.fileinput .thumbnail > img {
-  max-height: 100%;
-}
-.fileinput .btn {
-  vertical-align: middle;
-}
-.fileinput-exists .fileinput-new,
-.fileinput-new .fileinput-exists {
-  display: none;
-}
-.fileinput-inline .fileinput-controls {
-  display: inline;
-}
-.fileinput-filename {
-  vertical-align: middle;
-  display: inline-block;
-  overflow: hidden;
-}
-.form-control .fileinput-filename {
-  vertical-align: bottom;
-}
-.fileinput.input-group {
-  display: table;
-}
-.fileinput.input-group > * {
-  position: relative;
-  z-index: 2;
-}
-.fileinput.input-group > .btn-file {
-  z-index: 1;
-}
-*/
-
-/*Bootstrap select*/
-/*
-.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){
-  width:100%;
-}
-.ms-container .ms-list{
-      border-radius:$radius;
-      box-shadow:none;
-}
-.ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection{
-    padding:6px 10px;
-}
-.ms-container .ms-selectable li.ms-hover, .ms-container .ms-selection li.ms-hover{
-  background:$info;
-}
-*/
-
-/*Dropzone*/
-/*
-.dropzone .dz-message {
-    text-align: center;
-    margin: 10% 0;
-}
-*/
-/*xeditable*/
-/*
-.editable-input .form-control{
-    height:30px;
-}
-*/
-
-/*ascolorpicker*/
-/*
-.asColorPicker-trigger{
-  position:absolute;
-  top: 0;
-  right: -35px;
-  height: 38px;
-  width: 37px;
-  border:0px;
-}
-.asColorPicker-dropdown{
-  max-width:260px;
-}
-.asColorPicker-clear{
-  top:7px;
-  right:16px;
-}
-*/
-
-/*Datepicker*/
-/*
-.datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover{
-  background-image:none;
-  background:$themecolor;
-  color:$white;
-}
-.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover{
-  background-image:none;
-  background:$info;
-  color:$white;
-}
-*/
-
-/*Datatable*/
-/*
-.editable-table + input.error{
-    border:1px solid #danger;
-    outline:0;
-    outline-offset:0
-    }
-.editable-table+input,.editable-table+input:focus, #editable-datatable_wrapper + input:focus{
-    border:1px solid $info!important;
-    outline:0!important;
-    outline-offset:0!important}
-.editable-table td:focus{outline:0}
-*/
-
-/*USer-profile*/
-/*
-.user-profile{
-  padding:15px 0;
-  position:relative;
-  text-align:center;
-
-  .user-pro-body{
-      display:block;
-   img{
-      width:50px;
-      display:block;
-      margin:0 auto;
-      margin-bottom:10px;
-   }
-   .u-dropdown{
-      color:$sidebar-text;
-   }
-   .dropdown-menu{
-      right:0px;
-      width:180px;
-      left:0px;
-      margin:0 auto;
-   }
-  }
-}
-*/
-
-/*Form-Wizard*/
-/*
-.wizard-steps{
-      display:table;
-      width:100%
-}
-.wizard-steps > li{
-  display:table-cell;
-  padding:10px 20px;
-  background:$extralight;
-  span{
-      border-radius:100%;
-      border:1px solid $border;
-      width:40px;
-      height:40px;
-      display:inline-block;
-      vertical-align:middle;
-      padding-top:9px;
-      margin-right:8px;
-      text-align:center;
-  }
-}
-.wizard-content{
-      padding:25px;
-      border-color:$border;
-      margin-bottom:30px;
-}
-.wizard-steps > li.current, .wizard-steps > li.done{
-  background:$info;
-  color:$white;
-  span{
-      border-color:$white;
-      color:$white;
-  }
-  h4{
-    color:$white;
-  }
-}
-.wizard-steps > li.done{
-      background:$success;
-}
-.wizard-steps > li.error{
-      background:$danger;
-}
-.wiz-aco{
-.pager{
-  margin:0px;
-}
-}
-*/
+/*ROW -IN*/
+/*
+.row-in i {
+  font-size:24px;
+}
+*/
+/*Inbox widgets*/
+/*
+.mailbox{
+  width:280px;
+  overflow:auto;
+  padding-bottom:0px;
+  }
+  .message-center {
+  a{
+    border-bottom:1px solid $border;
+    display:block;
+    padding:9px 15px;
+  &:hover{
+    background:$extralight;
+  }
+  }
+  .user-img{
+    width:40px;
+    float:left;
+    position:relative;
+    margin:0 10px 15px 0px;
+    img{ width:100%;}
+
+    .profile-status {
+      border: 2px solid $white;
+      border-radius: 50%;
+      display: inline-block;
+      height: 10px;
+      left: 30px;
+      position: absolute;
+      top: 1px;
+      width: 10px;
+    }
+    .online{
+      background:$success;
+    }
+    .busy{
+      background:$danger;
+    }
+    .away{
+      background:$warning;
+    }
+    .offline{
+      background:$warning;
+    }
+  }
+ .mail-contnet{
+    h5{
+      margin:0px;
+      font-weight:400;
+      text-overflow:ellipsis;
+      overflow:hidden;
+      white-space:nowrap;
+    }
+
+    .mail-desc{
+      font-size:12px;
+      display:block;
+      margin:5px 0;
+      text-overflow:ellipsis;
+      overflow:hidden;
+      white-space:nowrap;
+      color:$dark;
+    }
+    .time{
+      display:block;
+      font-size:10px;
+       color:$dark;
+    }
+
+ }
+
+ }
+.mail-contnet a.action{
+        margin-left:10px;
+        font-size:12px;
+        visibility:hidden;
+  }
+.mail-contnet:hover a.action{
+  visibility:visible;
+}
+*/
+
+/*Inbox Center*/
+/*
+.inbox-center{
+  .unread td{
+    font-weight:$font-bold;
+  }
+  a{
+    color:$bodytext;
+    padding:2px 0 3px 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block;
+  }
+
+}
+*/
+
+/*Comment center*/
+/*
+.comment-center {
+  margin:0 -25px;
+  .comment-body{
+    border-bottom:1px solid $border;
+    display:table;
+    padding:20px 25px;
+  &:hover{
+    background:$extralight;
+  }
+  }
+  .user-img{
+    width:40px;
+    display:table-cell;
+    position:relative;
+    margin:0 10px 0px 0px;
+    img{ width:100%;}
+
+  }
+ .mail-contnet{
+    display:table-cell;
+    padding-left:15px;
+    vertical-align:top;
+    h5{
+      margin:0px;
+      font-weight:400;
+      text-overflow:ellipsis;
+      overflow:hidden;
+      white-space:nowrap;
+    }
+    .mail-desc{
+      font-size:14px;
+      display:block;
+      margin:8px 0;
+      line-height:25px;
+      color:$dark-text;
+      height:50px;
+      overflow:hidden;
+    }
+    .time{
+      display:block;
+      font-size:10px;
+       color:$dark;
+    }
+ }
+ }
+*/
+
+/*Sales report*/
+/*
+.sales-report {
+  background:$extralight;
+  margin:12px -25px;
+  padding:15px;
+}
+*/
+
+/*Task*/
+/*
+.dropdown-tasks, .dropdown-alerts{ padding:0px;}
+.dropdown-tasks li a, .dropdown-alerts li a, .mailbox li > a{ padding:15px 20px;}
+.dropdown-tasks li.divider, .dropdown-alerts li.divider{ margin:0px;}
+*/
+
+/*col-in*/
+/*
+.row-in-br{border-right: 1px solid $border;}
+.col-in {
+
+  padding: 20px;
+  h5{}
+  h3{font-size: 48px; font-weight:100;}
+}
+*/
+
+/*
+Basic List
+*/
+/*
+.basic-list {
+ padding:0px;
+ li{
+  display:block;
+  padding:15px 0px;
+  border-bottom:1px solid $border;
+  line-height:27px;
+}
+}
+.basic-list li:last-child{
+  border-bottom:0px;
+  }
+*/
+
+/* Steam line widget */
+/*
+.steamline {
+  position: relative;
+  border-left: 1px solid $border;
+  margin-left:20px;
+  .sl-left {
+    float: left;
+    margin-left: -20px;
+    z-index: 1;
+  margin-right:15px;
+   img{
+      max-width:40px;
+  }
+  }
+}
+.steamline .sl-right{ padding-left:35px;}
+.steamline .sl-item{
+
+  margin-top:8px;
+  margin-bottom: 30px;
+
+}
+.sl-date{
+  font-size:10px; color:$muted;
+}
+
+.time-item {
+  border-color: $border;
+  padding-bottom: 1px;
+  position: relative;
+  &:before {
+    content: " ";
+    display: table;
+  }
+  &:after {
+    background-color: $white;
+    border-color: $border;
+    border-radius: 10px;
+    border-style: solid;
+    border-width: 2px;
+    bottom: 0;
+    content: '';
+    height: 14px;
+    left: 0;
+    margin-left: -8px;
+    position: absolute;
+    top: 5px;
+    width: 14px;
+  }
+}
+
+.time-item-item {
+  &:after {
+    content: " ";
+    display: table;
+  }
+}
+
+.item-info {
+  margin-bottom: 15px;
+  margin-left: 15px;
+  p {
+    margin-bottom: 10px !important;
+  }
+}
+*/
+
+/*User-box*/
+/*
+.user-bg{
+  margin:-25px;
+  height:230px;
+  overflow:hidden;
+  position:relative;
+ .overlay-box{
+      background:$purple;
+      opacity:0.9;
+      position:absolute;
+      top:0px;
+      left:0px;
+      right:0px;
+      height:100%;
+      text-align:center;
+   .user-content{
+     padding:15px;
+     margin-top:30px;
+
+   }
+  }
+}
+.user-btm-box{
+    padding:40px 0 10px;
+    clear:both;
+    overflow:hidden;
+}
+*/
+
+/*    Vertical Carousel */
+/*
+.vertical .carousel-inner {
+  height: 100%;
+  position:relative;
+}
+
+.carousel.vertical .item {
+   -webkit-transition: 0.6s ease-in-out top;
+   -moz-transition: 0.6s ease-in-out top;
+   -ms-transition: 0.6s ease-in-out top;
+   -o-transition: 0.6s ease-in-out top;
+   transition: 0.6s ease-in-out top;
+}
+
+.carousel.vertical .active {
+   top: 0;
+}
+
+.carousel.vertical .next {
+   top: 400px;
+}
+
+.carousel.vertical .prev {
+   top: -400px;
+}
+
+.carousel.vertical .next.left,
+.carousel.vertical .prev.right {
+   top: 0;
+}
+
+.carousel.vertical .active.left {
+   top: -400px;
+}
+
+.carousel.vertical .active.right {
+   top: 400px;
+}
+
+.carousel.vertical .item {
+   left: 0;
+}
+.twi-user img{
+  margin-right: 20px;
+    width: 50px;
+}
+.twi-user {
+    margin: 18px 0;
+}
+.carousel-inner h3{ height:112px; overflow:hidden;}
+*/
+
+/*Chart Box*/
+/*
+.chart-box{
+  margin:25px -15px -17px -17px;
+}
+*/
+
+/*Todo list*/
+/*
+.list-task .task-done span {
+    text-decoration: line-through;
+}
+*/
+
+/* Chat widget */
+/*
+.chat-list {
+  list-style: none;
+  max-height: 332px;
+  padding: 0px 20px;
+  li {
+    margin-bottom: 24px;
+    overflow:auto;
+  }
+  .chat-image {
+    display: inline-block;
+    float: left;
+    text-align: center;
+    width: 50px;
+    img {
+      border-radius: 100%;
+      width: 100%;
+    }
+  }
+  .chat-text {
+
+    background: $extralight;
+    border-radius:$radius;
+    display: inline-block;
+    padding: 15px;
+    position: relative;
+
+    h4 {
+      color: #1a2942;
+      display: block;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      margin:0;
+      line-height:15px;
+      position: relative;
+    }
+    p {
+      margin: 0px;
+      padding-top: 3px;
+    }
+    b{
+      font-size:10px;
+      opacity:0.8;
+    }
+
+  }
+  .chat-body {
+    display: inline-block;
+    float: left;
+    font-size: 12px;
+    margin-left: 12px;
+    width: 65%;
+  }
+  .odd {
+    .chat-image {
+      float: right !important;
+    }
+    .chat-body {
+      float: right !important;
+      margin-right: 12px;
+      text-align: right;
+
+
+      color:$white;
+    }
+    .chat-text {
+    background:$themecolor;
+    h4 { color:$white; }
+  }
+  }
+}
+
+.chat-send {
+  padding-left: 0px;
+  padding-right: 30px;
+  button {
+    width: 100%;
+  }
+}
+*/
+
+/*Weather*/
+/*
+.weather-box{
+  .weather-top{
+    overflow:hidden;
+    padding:10px 25px;
+    margin:0 -25px;
+    background:$extralight;
+    h2 {
+      line-height:24px;
+      small{
+        font-size:13px;
+
+      }
+    }
+
+    .today_crnt{
+    font-size:45px;
+    font-weight:100;
+      canvas{
+        display:inline-block;
+        margin-right:10px;
+        vertical-align:middle;
+      }
+    }
+  }
+  .weather-info {
+
+    padding:10px 0;
+    }
+  .weather-time{
+      overflow:hidden;
+      text-align:center;
+      padding-top:15px;
+      li span{
+          display:block;
+      }
+      li canvas{
+          font-size:20px;
+          margin:10px 0;
+      }
+  }
+
+}
+.demo-container {
+  width:100%;
+  height:350px;
+
+}
+
+.demo-placeholder {
+  width: 100%;
+  height: 100%;
+  font-size: 14px;
+  line-height: 1.2em;
+}
+*/
+
+/*Notification alert*/
+.myadmin-alert {
+  border-radius: 0px;
+  color: #fff;
+
+  padding: 12px 30px 12px 12px;
+  position: relative;
+  text-align: left;
+}
+.myadmin-alert a {
+  color: inherit;
+  font-weight: 600;
+  text-decoration: underline;
+}
+.myadmin-alert h4 {
+  color: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: normal;
+  margin: 0;
+}
+.myadmin-alert .img {
+  border-radius: 3px;
+  height: 40px;
+  left: 12px;
+  position: absolute;
+  top: 12px;
+  width: 40px;
+}
+.myadmin-alert-img {
+  min-height: 64px;
+  padding-left: 65px;
+}
+.myadmin-alert-icon {
+  padding-left: 20px;
+}
+.myadmin-alert-icon i{
+  padding-right: 10px;
+}
+.myadmin-alert .closed {
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 20px;
+  font-weight: 500;
+  padding: 4px;
+  position: absolute;
+  right: 3px;
+  text-decoration: none;
+  top: 0;
+}
+.myadmin-alert .closed:hover {
+  color: #fff;
+}
+.myadmin-alert-click {
+  cursor: pointer;
+  padding-right: 12px;
+}
+.myadmin-alert .primary {
+  background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
+  border: medium none;
+  border-radius: 3px;
+  color: inherit;
+  outline: 0 none;
+  padding: 4px 10px;
+}
+.myadmin-alert .cancel {
+  background: rgba(255, 255, 255, 0.4) none repeat scroll 0 0;
+  border: medium none;
+  border-radius: 3px;
+  color: rgba(0, 0, 0, 0.8);
+  outline: 0 none;
+  padding: 4px 10px;
+}
+.myadmin-alert .primary:hover, .myadmin-alert .cancel:hover {
+  opacity: 0.9;
+}
+.myadmin-alert-top, .myadmin-alert-bottom, .myadmin-alert-top-left, .myadmin-alert-top-right, .myadmin-alert-bottom-left, .myadmin-alert-bottom-right, .myadmin-alert-fullscreen {
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
+  display: none;
+  position: fixed;
+  z-index: 1000;
+}
+.myadmin-alert-top {
+  left: 0;
+  right: 0;
+  top: 0;
+}
+.myadmin-alert-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.myadmin-alert-top-left {
+  left: 20px;
+  top: 80px;
+}
+.myadmin-alert-top-right {
+  right: 20px;
+  top: 80px;
+}
+.myadmin-alert-bottom-left {
+  bottom: 20px;
+  left: 20px;
+}
+.myadmin-alert-bottom-right {
+  bottom: 20px;
+  right: 20px;
+}
+.myadmin-alert-fullsize {
+  left: 50%;
+  margin: -20px;
+  top: 50%;
+}
+.alert-custom {
+  background: $themecolor;
+  color:$white;
+  border-color:$themecolor;
+}
+.alert-inverse {
+  background: $inverse;
+  color:$white;
+  border-color:$inverse;
+}
+.alert-success {
+  background: $success;
+  color:$white;
+  border-color:$success;
+}
+.alert-dark {
+  background: $bodytext;
+  color:$white;
+  border-color:$bodytext;
+}
+.alert-warning {
+  background: $warning;
+  color:$white;
+  border-color:$warning;
+}
+.alert-danger {
+  background: $danger;
+  color:$white;
+  border-color:$danger;
+}
+.alert-primary {
+  background: $primary;
+  color:$white;
+  border-color:$primary;
+}
+.alert-info {
+  background: $info;
+  color:$white;
+  border-color:$info;
+}
+.alert-info .closed {
+  color: inherit;
+}
+.alert-info a.closed:hover {
+  color: inherit;
+}
+
+/*custom tab*/
+/*
+.tab-content{
+margin-top:30px;
+}
+.customtab{
+border-bottom:2px solid $extralight;
+}
+.customtab li.active a, .customtab li.active a:hover,  .customtab li.active a:focus{
+background:$white;
+border:0px;
+border-bottom:2px solid $themecolor;
+margin-bottom:-1px;
+color:$themecolor;
+}
+.customtab li a, .customtab li a:hover,  .customtab li a:focus{
+border:0px;
+
+}
+/*
+
+/*custom tab2*/
+/*
+.customtab2{
+border-bottom:1px solid $extralight;
+border-top:1px solid $extralight;
+padding:10px 0;
+}
+.customtab2 li.active a, .customtab2 li.active a:hover,  .customtab2 li.active a:focus{
+background:$themecolor;
+border:1px solid $themecolor;
+
+color:$white;
+}
+.customtab2 li a, .customtab2 li a:hover,  .customtab2 li a:focus{
+border:0px;
+
+}
+*/
+
+/*Vertical tabs*/
+/*
+.vtabs{
+  display:table;
+  .tabs-vertical{
+    width:150px;
+    border-right:1px solid $border;
+    display:table-cell;
+    vertical-align:top;
+    li a{
+      color:$dark;
+      margin-bottom:10px;
+      }
+    }
+  .tab-content{
+    display:table-cell;
+    padding:20px;
+
+    vertical-align:top;
+  }
+}
+.tabs-vertical li.active a, .tabs-vertical li.active a:hover,  .tabs-vertical li.active a:focus{
+background:$themecolor;
+border:0px;
+border-right:2px solid $themecolor;
+margin-right:-1px;
+color:$white;
+}
+*/
+
+/*Custom vertical tab*/
+/*
+.customvtab .tabs-vertical li.active a, .customvtab .tabs-vertical li.active a:hover,  .customvtab .tabs-vertical li.active a:focus{
+background:$white;
+border:0px;
+border-right:2px solid $themecolor;
+margin-right:-1px;
+color:$dark;
+}
+*/
+
+/*Nav pills*/
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover{
+background:$themecolor;
+color:$white;
+}
+.nav-pills>li>a{
+color:$dark;
+border-radius:$radius;
+}
+
+/*Accordion*/
+/*
+.panel-group {
+.panel {
+  .panel-heading {
+    a[data-toggle=collapse].collapsed {
+      &:before {
+        content: '\e64b';
+      }
+    }
+    .accordion-toggle.collapsed {
+      &:before {
+        content: '\e64b';
+      }
+    }
+    a[data-toggle=collapse] {
+      display: block;
+      &:before {
+        content: '\e648';
+        display: block;
+        float: right;
+        font-family: 'themify';
+        font-size: 14px;
+        text-align: right;
+        width: 25px;
+      }
+    }
+    .accordion-toggle {
+      display: block;
+      &:before {
+        content: '\e648';
+        display: block;
+        float: right;
+        font-family: 'themify';
+        font-size: 14px;
+        text-align: right;
+        width: 25px;
+      }
+    }
+  }
+  .panel-heading + .panel-collapse {
+    .panel-body {
+      border-top: none;
+    }
+  }
+}
+.panel-heading {
+  padding: 12px 20px;
+}
+}
+*/
+
+/*Progressbars*/
+/*
+.progress {
+-webkit-box-shadow: none !important;
+background-color: $border;
+box-shadow: none !important;
+height: 4px;
+border-radius:$radius;
+margin-bottom: 18px;
+overflow: hidden;
+}
+
+.progress-bar {
+box-shadow: none;
+font-size: 8px;
+font-weight: 600;
+line-height: 12px;
+}
+
+.progress.progress-sm {
+height: 8px !important;
+.progress-bar {
+  font-size: 8px;
+  line-height: 5px;
+}
+}
+
+.progress.progress-md {
+height: 15px !important;
+.progress-bar {
+  font-size: 10.8px;
+  line-height: 14.4px;
+}
+}
+
+.progress.progress-lg {
+height: 20px !important;
+.progress-bar {
+  font-size: 12px;
+  line-height: 20px;
+}
+}
+
+.progress-bar-primary {
+background-color: $primary;
+}
+
+.progress-bar-success {
+background-color: $success;
+}
+
+.progress-bar-info {
+background-color: $info;
+}
+.progress-bar-megna {
+background-color: $megna;
+}
+
+.progress-bar-warning {
+background-color: $warning;
+}
+
+.progress-bar-danger {
+background-color: $danger;
+}
+
+.progress-bar-inverse {
+background-color: $inverse;
+}
+
+.progress-bar-purple {
+background-color: $purple;
+}
+
+
+.progress-bar-custom {
+background-color: $info;
+}
+
+.progress-animated {
+-webkit-animation-duration: 5s;
+-webkit-animation-name: myanimation;
+-webkit-transition: 5s all;
+animation-duration: 5s;
+animation-name: myanimation;
+transition: 5s all;
+}
+*/
+
+/* Progressbar Animated */
+/*
+@-webkit-keyframes myanimation {
+from {
+  width:0;
+}
+}
+@keyframes myanimation {
+from {
+  width:0;
+}
+}
+*/
+
+/* Progressbar Vertical */
+/*
+.progress-vertical {
+  min-height: 250px;
+  height: 250px;
+  width: 4px;
+  position: relative;
+  display: inline-block;
+  margin-bottom: 0;
+  margin-right: 20px;
+
+  .progress-bar {
+    width: 100%;
+ }
+}
+.progress-vertical-bottom{
+  min-height: 250px;
+  height: 250px;
+  position: relative;
+  width: 4px;
+  display: inline-block;
+  margin-bottom: 0;
+  margin-right: 20px;
+
+  .progress-bar {
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+ }
+}
+
+.progress-vertical.progress-sm,.progress-vertical-bottom.progress-sm {
+width: 8px !important;
+.progress-bar {
+  font-size: 8px;
+  line-height: 5px;
+}
+}
+
+.progress-vertical.progress-md,.progress-vertical-bottom.progress-md {
+width: 15px !important;
+.progress-bar {
+  font-size: 10.8px;
+  line-height: 14.4px;
+}
+}
+
+.progress-vertical.progress-lg,.progress-vertical-bottom.progress-lg {
+width: 20px !important;
+.progress-bar {
+  font-size: 12px;
+  line-height: 20px;
+}
+}
+*/
+
+/*Timeline*/
+/*
+.timeline {
+  position: relative;
+  padding: 20px 0 20px;
+  list-style: none;
+  max-width:1200px;
+  margin:0 auto;
+}
+
+.timeline:before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 3px;
+  margin-left: -1.5px;
+  background-color: #eeeeee;
+}
+
+.timeline > li {
+  position: relative;
+  margin-bottom: 20px;
+}
+
+.timeline > li:before,
+.timeline > li:after {
+  content: " ";
+  display: table;
+}
+
+.timeline > li:after {
+  clear: both;
+}
+
+.timeline > li:before,
+.timeline > li:after {
+  content: " ";
+  display: table;
+}
+
+.timeline > li:after {
+  clear: both;
+}
+
+.timeline > li > .timeline-panel {
+  float: left;
+  position: relative;
+  width: 46%;
+  padding: 20px;
+  border: 1px solid $border;
+  border-radius: $radius;
+  -webkit-box-shadow: 0 1px 6px rgba(0,0,0,0.05);
+  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
+}
+
+.timeline > li > .timeline-panel:before {
+  content: " ";
+  display: inline-block;
+  position: absolute;
+  top: 26px;
+  right: -8px;
+  border-top: 8px solid transparent;
+  border-right: 0 solid $border;
+  border-bottom: 8px solid transparent;
+  border-left: 8px solid $border;
+}
+
+.timeline > li > .timeline-panel:after {
+  content: " ";
+  display: inline-block;
+  position: absolute;
+  top: 27px;
+  right: -7px;
+  border-top: 7px solid transparent;
+  border-right: 0 solid #fff;
+  border-bottom: 7px solid transparent;
+  border-left: 7px solid #fff;
+}
+
+.timeline > li > .timeline-badge {
+  z-index: 100;
+  position: absolute;
+  top: 16px;
+  left: 50%;
+  width: 50px;
+  height: 50px;
+  margin-left: -25px;
+  border-radius: 50% 50% 50% 50%;
+  text-align: center;
+  font-size: 1.4em;
+  line-height: 50px;
+  color: #fff;
+  overflow:hidden;
+  background-color: $inverse;
+}
+
+.timeline > li.timeline-inverted > .timeline-panel {
+  float: right;
+}
+
+.timeline > li.timeline-inverted > .timeline-panel:before {
+  right: auto;
+  left: -8px;
+  border-right-width: 8px;
+  border-left-width: 0;
+}
+
+.timeline > li.timeline-inverted > .timeline-panel:after {
+  right: auto;
+  left: -7px;
+  border-right-width: 7px;
+  border-left-width: 0;
+}
+
+.timeline-badge.primary {
+  background-color: $primary !important;
+}
+
+.timeline-badge.success {
+  background-color: $success !important;
+}
+
+.timeline-badge.warning {
+  background-color: $warning !important;
+}
+
+.timeline-badge.danger {
+  background-color: $danger !important;
+}
+
+.timeline-badge.info {
+  background-color: $info !important;
+}
+
+.timeline-title {
+  margin-top: 0;
+  color: inherit;
+  font-weight:400;
+}
+
+.timeline-body > p,
+.timeline-body > ul {
+  margin-bottom: 0;
+}
+
+.timeline-body > p + p {
+  margin-top: 5px;
+}
+*/
+
+/*Easy Pie charts*/
+/*
+.chart {
+position: relative;
+display: inline-block;
+width: 100px;
+height: 100px;
+margin-top: 20px;
+margin-bottom: 20px;
+text-align: center;
+canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+}
+.chart.chart-widget-pie {
+margin-top: 5px;
+margin-bottom: 5px;
+}
+.pie-chart > span {
+  left: 0;
+  margin-top: -2px;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.chart > span > img{
+  left: 0;
+  margin-top: -2px;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 50%;
+width:60%;
+height:60%;
+  transform: translateY(-50%);
+margin:0 auto;
+}
+
+.percent {
+display: inline-block;
+line-height: 100px;
+z-index: 2;
+font-weight: 600;
+font-size: 18px;
+color: $dark;
+
+&:after {
+  content: '%';
+  margin-left: 0.1em;
+  font-size: .8em;
+}
+}
+*/
+
+/*Tables*/
+/*
+
+.table {
+margin-bottom: 10px;
+}
+
+.table-striped>tbody>tr:nth-of-type(odd),.table-hover > tbody > tr:hover,
+.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: $extralight !important;
+}
+
+.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
+.table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td ,
+.table > thead > tr > th, .table-bordered{
+  border-top: 1px solid $light;
+}
+
+.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th
+{
+padding:15px 8px;
+}
+
+.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 $light;
+}
+.table > thead > tr > th {
+  vertical-align: bottom;
+  border-bottom: 1px solid $light;
+}
+
+tbody {
+color: #797979;
+}
+
+th {
+color: #666666;
+font-weight: 500;
+}
+
+.table-bordered {
+  border: 1px solid $light;
+}
+table.focus-on {
+tbody {
+  tr.focused {
+    th {
+      background-color: $themecolor;
+      color: $white;
+    }
+    td {
+      background-color: $themecolor;
+      color: $white;
+    }
+  }
+}
+}
+
+.table-rep-plugin {
+.table-responsive {
+  border: none !important;
+}
+tbody {
+  th {
+    font-size: 14px;
+    font-weight: normal;
+  }
+}
+}
+.jsgrid .jsgrid-table{ margin-bottom:0px;}
+.jsgrid-selected-row>td{
+background:$extralight;
+border-color:$extralight;
+}
+.jsgrid-header-row>th{
+background:$white;
+}
+.footable-odd{
+  background-color:$extralight;
+}
+*/
+
+/*Inputs*/
+
+.form-control-line {
+  border-left: 0 none;
+  border-radius: 0;
+  border-right: 0 none;
+  border-top: 0 none;
+  box-shadow: none;
+  padding-left: 0;
+}
+.has-success {
+.form-control {
+  border-color: $success;
+  box-shadow: none !important;
+}
+}
+
+.has-warning {
+.form-control {
+  border-color: $warning;
+  box-shadow: none !important;
+}
+}
+
+.has-error {
+.form-control {
+  border-color: $danger;
+  box-shadow: none !important;
+}
+}
+
+.input-group-addon {
+border-radius: $radius;
+border: 1px solid $border;
+}
+/*
+.input-daterange input:first-child, .input-daterange input:last-child{border-radius:$radius;}
+*/
+
+/*Material inputs*/
+/*
+.form-material .form-group{ overflow:hidden;}
+.form-material .form-control {
+  background-color: rgba(0, 0, 0, 0);
+  background-position: center bottom, center calc(100% - 1px);
+  background-repeat: no-repeat;
+  background-size: 0 2px, 100% 1px;
+  padding: 0;
+  transition: background 0s ease-out 0s;
+}
+.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {
+  background-image: linear-gradient($purple, $purple), linear-gradient($border, $border);
+  border: 0 none;
+  border-radius: 0;
+  box-shadow: none;
+  float: none;
+}
+.form-material .form-control.focus, .form-material .form-control:focus {
+  background-size: 100% 2px, 100% 1px;
+  outline: 0 none;
+  transition-duration: 0.3s;
+}
+.form-bordered .form-group{
+border-bottom:1px solid $border;
+padding-bottom:20px;
+}
+*/
+
+/*Select 2*/
+/*
+.select2-container {
+.select2-choice {
+  background-image: none !important;
+  border: none !important;
+  height: auto  !important;
+  padding: 0px !important;
+  line-height: 22px !important;
+  background-color: transparent !important;
+  box-shadow: none !important;
+
+  .select2-arrow {
+    background-image: none !important;
+    background: transparent;
+    border: none;
+    width: 14px;
+    top: -2px;
+  }
+}
+.select2-container-multi.form-control {
+  height: auto;
+}
+}
+.select2-results .select2-highlighted {
+color: #ffffff;
+background-color: $info;
+}
+.select2-drop-active {
+border: 1px solid #e3e3e3 !important;
+padding-top: 5px;
+
+}
+.select2-search {
+input{
+  border: 1px solid $border;
+}
+}
+.select2-container-multi {
+width: 100%;
+
+.select2-choices {
+  border: 1px solid #border  !important;
+  box-shadow: none !important;
+  background-image: none  !important;
+  border-radius:$radius!important;
+  min-height: 38px;
+
+  .select2-search-choice {
+    padding: 4px 7px 4px 18px;
+    margin: 5px 0 3px 5px;
+    color: #555555;
+    background: #f5f5f5;
+    border-color:$border;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+  .select2-search-field {
+    input {
+      padding: 7px 7px 7px 10px;
+      font-family: inherit;
+    }
+  }
+}
+}
+*/
+
+/*Icons*/
+/*
+.icon-list-demo {
+div {
+  cursor: pointer;
+  line-height: 60px;
+  white-space: nowrap;
+  color: $bodytext;
+
+  &:hover {
+    color: $dark;
+  }
+
+  p{
+    margin:10px 0;
+    padding:5px 0;
+  }
+}
+i {
+  -webkit-transition: all 0.2s;
+  -webkit-transition: font-size .2s;
+  display: inline-block;
+  font-size: 18px;
+  margin: 0 15px 0 10px;
+  text-align: left;
+  transition: all 0.2s;
+  transition: font-size .2s;
+  vertical-align: middle;
+  width: auto;
+
+  transition: all 0.3s ease 0s;
+}
+.col-md-4 {
+  border-radius:$radius;
+  &:hover {
+    background-color: $extralight;
+  }
+
+}
+}
+.icon-list-demo .col-md-4:hover i {
+    font-size:2em;
+
+  }
+*/
+
+/*Google map*/
+/*
+.gmaps, .gmaps-panaroma{
+height: 300px;
+}
+.gmaps, .gmaps-panaroma {
+height: 300px;
+background: $light;
+border-radius: 3px;
+}
+
+.gmaps-overlay {
+display: block;
+text-align: center;
+color: $white;
+font-size: 16px;
+line-height: 40px;
+background: $primary;
+border-radius: 4px;
+padding: 10px 20px;
+}
+
+.gmaps-overlay_arrow {
+left: 50%;
+margin-left: -16px;
+width: 0;
+height: 0;
+position: absolute;
+}
+
+.gmaps-overlay_arrow.above {
+bottom: -15px;
+border-left: 16px solid transparent;
+border-right: 16px solid transparent;
+border-top: 16px solid $primary;
+}
+
+.gmaps-overlay_arrow.below {
+top: -15px;
+border-left: 16px solid transparent;
+border-right: 16px solid transparent;
+border-bottom: 16px solid $primary;
+}
+
+.jvectormap-zoomin, .jvectormap-zoomout {
+width: 10px;
+height: 10px;
+line-height: 10px;
+}
+.jvectormap-zoomout {
+  top: 40px;
+}
+*/
+
+/*Error Page*/
+/*
+.error-box{
+height:100%;
+position:fixed;
+background:url(../../plugins/images/error-bg.jpg) no-repeat center center #fff !important;
+width:100%;
+.footer{
+  width:100%;
+  left:0px;
+  right:0px;
+}
+}
+.error-body{
+ padding-top:5%;
+ h1{
+    font-size:210px;
+    font-weight:900;
+    line-height:210px;
+ }
+}
+*/
+
+/* Login- register pages */
+/*
+.login-register{
+background:url(../../plugins/images/login-register.jpg) no-repeat center center / cover !important;
+height:100%;
+position:fixed;
+}
+.login-box{
+background:$white;
+width:400px;
+margin:0 auto;
+margin-top:10%;
+.footer{
+  width:100%;
+  left:0px;
+  right:0px;
+}
+.social {
+  display:block;
+  margin-bottom:30px;
+}
+}
+#recoverform{
+ display:none;
+}
+*/
+
+/*Pricing*/
+/*
+.pricing-box {
+position: relative;
+text-align: center;
+margin-top:30px;
+}
+.featured-plan{
+  margin-top:0px;
+  .pricing-body {
+    padding:60px 0;
+    background:$extralight;
+    border: 1px solid #ddd;
+  }
+  .price-table-content .price-row {
+    border-top:1px solid rgba(120, 130, 140, 0.13);
+  }
+}
+
+.pricing-body {
+border-radius: 0px;
+border-top: 1px solid rgba(120, 130, 140, 0.13);
+border-bottom: 5px solid rgba(120, 130, 140, 0.13);
+vertical-align: middle;
+padding:30px 0;
+position:relative;
+
+}
+
+.pricing-body h2{
+position:relative;
+font-size:56px;
+margin:20px 0 10px;
+font-weight:500;
+span{
+  position:absolute;
+  font-size:15px;
+  top:-10px;
+  margin-left:-10px
+}
+}
+.price-table-content{
+.price-row {
+  padding:20px 0;
+  border-top:1px solid rgba(120, 130, 140, 0.13);
+}
+}
+.pricing-plan  {
+padding:0 15px;
+.no-padding{ padding:0px;}
+}
+.price-lable{
+position:absolute;
+top:-10px;
+padding:5px 10px;
+margin:0 auto;
+display:inline-block;
+width:100px;
+left:0px;
+right:0px;
+}
+*/
+
+/*Inbox*/
+/*
+.mails {
+a {
+  color: $dark;
+}
+
+td {
+  vertical-align: middle !important;
+  position: relative;
+
+  &:last-of-type {
+    width: 100px;
+    padding-right: 20px;
+  }
+}
+
+tr {
+  &:hover {
+    .text-white {
+      display: none;
+    }
+  }
+}
+
+.mail-select {
+  padding: 12px 20px;
+  min-width: 134px;
+}
+.checkbox {
+  margin-bottom: 0px;
+  margin-top: 0px;
+  vertical-align: middle;
+  display: inline-block;
+  height: 17px;
+
+  label {
+    min-height: 16px;
+  }
+}
+}
+
+.mail-list {
+.list-group-item {
+   background-color: transparent;
+   border:0px;
+   border-left:3px solid $white;
+   border-radius:0px;
+   &:hover {
+     background:$extralight;
+     border-left:3px solid $extralight;
+   }
+   &:focus {
+     border-left:3px solid $extralight;
+   }
+   &.active:focus{
+   background:$extralight;
+     border-left:3px solid $danger;
+   }
+}
+.list-group-item.active{
+  border-left:3px solid $danger;
+  border-radius:0px;
+  color:$dark !important;
+
+}
+}
+
+.mail_listing{  min-height:500px;}
+.inbox_listing .inbox-item:hover{ background:$extralight;}
+.inbox_listing .inbox-item{ padding-left:20px;}
+.inbox-widget.inbox_listing .inbox-item .inbox-item-text{ height:19px; overflow:hidden;}
+
+.message-center .unread .mail-contnet {
+h5, .mail-desc{
+  font-weight: 600;
+  color: $dark!important;
+}
+}
+*/
+
+/*Calendar*/
+/*
+.calendar {
+float: left;
+margin-bottom: 0px;
+}
+
+.fc-view {
+margin-top: 30px;
+}
+.none-border {
+.modal-footer {
+  border-top: none;
+}
+}
+
+.fc-toolbar {
+margin-bottom: 5px;
+margin-top: 15px;
+h2 {
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 30px;
+  text-transform: uppercase;
+}
+}
+
+.fc-day {
+background: $white;
+}
+
+.fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active,
+.fc-toolbar button:focus, .fc-toolbar button:hover,
+.fc-toolbar .ui-state-hover {
+z-index: 0;
+}
+
+.fc-widget-header {
+border: 0px !important;
+}
+
+.fc-widget-content {
+border-color:rgba(120, 130, 140, 0.13)!important ;
+}
+
+.fc {
+th.fc-widget-header {
+  background: $purple;
+  color:$white;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 7px 0px;
+  text-transform: uppercase;
+}
+}
+
+.fc-button {
+background: $white;
+border: 1px solid $border;
+color: #555555;
+text-transform: capitalize;
+}
+
+.fc-text-arrow {
+font-family: inherit;
+font-size: 16px;
+}
+
+.fc-state-hover {
+background: #F5F5F5;
+}
+.fc-unthemed .fc-today{
+border:1px solid $danger;
+background:#fcf8e3!important;
+}
+.fc-state-highlight {
+background: #f0f0f0;
+}
+
+.fc-cell-overlay {
+background: #f0f0f0;
+}
+
+.fc-unthemed {
+.fc-today {
+  background: $white;
+}
+}
+
+.fc-event {
+border-radius: 0px;
+border: none;
+cursor: move;
+font-size: 13px;
+margin:1px -1px 0 -1px;
+padding: 5px 5px;
+text-align: center;
+background:$info;
+}
+
+.calendar-event {
+
+cursor: move;
+margin: 10px 5px 0 0;
+padding: 6px 10px;
+display:inline-block;
+color:$white;
+min-width:140px;
+text-align:center;
+background:$info;
+a{
+  float:right;
+  opacity:0.6;
+  font-size:10px;
+  margin:4px 0 0 10px;
+  color:$white;
+}
+}
+
+.fc-basic-view {
+td.fc-week-number {
+  span {
+    padding-right: 5px;
+  }
+}
+td.fc-day-number {
+  padding-right: 5px;
+}
+}
+*/
+
+/*Weather small widget*/
+/*
+.weather{
+h1{
+  color:$white;
+  font-size:50px;
+  font-weight:100;
+}
+i{
+  color:$white;
+  font-size:40px;
+
+}
+.w-title-sub{
+  color:rgba(255, 255, 255, 0.6);
+}
+}
+*/
+
+/*Right sidebar*/
+/*
+.navbar-top-links > li.right-side-toggle a:focus{ background:$sidebar;}
+.right-sidebar{
+position:fixed;
+right:-240px;
+width:240px;
+display:none;
+z-index:1000;
+background:$white;
+top:0px;
+height:100%;
+box-shadow:5px 1px 40px rgba(0, 0, 0, 0.1);
+transition:all 0.3s ease;
+
+.rpanel-title{
+  display:block;
+  padding:21px;
+  color:#fff;
+  text-transform:uppercase;
+  font-size:13px;
+  background:$themecolor;
+  span{
+      float:right;
+      cursor:pointer;
+      font-size:11px;
+      &:hover{
+          color:$dark;
+      }
+  }
+}
+.r-panel-body{
+  padding:20px;
+ ul{
+   margin:0px;
+   padding:0px;
+    li{
+        list-style:none;
+        padding:5px 0;
+    }
+ }
+}
+}
+
+.shw-rside{
+right:0px;
+width:240px;
+display:block;
+}
+*/
+
+/*Chat online*/
+/*
+.chatonline {
+img{
+    margin-right:10px;
+    float:left;
+    width:30px;
+}
+li a {
+  padding:15px 0;
+  float:left;
+  width:100%;
+span{
+    color:$bodytext;
+   small{
+      display:block;
+      font-size:10px;
+   }
+   }
+}
+}
+*/
+
+/*Style switcher*/
+/*
+ul#themecolors {
+display:block;
+li{
+  display:inline-block;
+  &:first-child{
+    display:block;
+  }
+}
+}
+#themecolors li a{
+  width: 50px;
+  height: 50px;
+  display:inline-block;
+  margin:5px;
+  color: transparent;
+  position: relative;
+}
+#themecolors li a.working:before{
+content: "\f00c";
+font-family: "FontAwesome";
+font-size: 18px;
+line-height: 50px;
+width: 50px;
+height: 50px;
+position: absolute;
+top: 0;
+left: 0;
+color: #fff;
+text-align: center;
+}
+.default-theme{
+    background:$danger;
+}
+.green-theme{
+    background:$success;
+}
+.yellow-theme{
+    background:$yellow;
+}
+.blue-theme{
+    background:$info;
+}
+.purple-theme{
+    background:$purple;
+}
+.megna-theme{
+    background:$megna;
+}
+*/
+
+// .default-dark-theme{
+//     background: #4f5467; /* Old browsers */
+//     background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, #f75b36 23%, #f75b36 99%); /* FF3.6-15 */
+//     background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,#f75b36 23%,#f75b36 99%); /* Chrome10-25,Safari5.1-6 */
+//     background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,#f75b36 23%,#f75b36 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+//     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='#f75b36',GradientType=1 ); /* IE6-9 */
+// }
+// .green-dark-theme{
+//     background: #4f5467; /* Old browsers */
+//     background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, #00c292 23%, #00c292 99%); /* FF3.6-15 */
+//     background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,#00c292 23%,#00c292 99%); /* Chrome10-25,Safari5.1-6 */
+//     background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,#00c292 23%,#00c292 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+//     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='#00c292',GradientType=1 ); /* IE6-9 */
+// }
+// .yellow-dark-theme{
+//    background: #4f5467; /* Old browsers */
+//     background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, #a0aec4 23%, #a0aec4 99%); /* FF3.6-15 */
+//     background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,#a0aec4 23%,#a0aec4 99%); /* Chrome10-25,Safari5.1-6 */
+//     background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,#a0aec4 23%,#a0aec4 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+//     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='#a0aec4',GradientType=1 ); /* IE6-9 */
+// }
+// .blue-dark-theme{
+//     background: #4f5467; /* Old browsers */
+//     background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, $info 23%, $info 99%); /* FF3.6-15 */
+//     background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,$info 23%,$info 99%); /* Chrome10-25,Safari5.1-6 */
+//     background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,$info 23%,$info 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+//     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='$info',GradientType=1 ); /* IE6-9 */
+// }
+// .purple-dark-theme{
+//     background: #4f5467; /* Old browsers */
+//     background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, $purple 23%, $purple 99%); /* FF3.6-15 */
+//     background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,$purple 23%,$purple 99%); /* Chrome10-25,Safari5.1-6 */
+//     background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,$purple 23%,$purple 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+//     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='$purple',GradientType=1 ); /* IE6-9 */
+// }
+// .megna-dark-theme{
+//     background: #4f5467; /* Old browsers */
+//     background: -moz-linear-gradient(left, #4f5467 0%, #4f5467 23%, $megna 23%, $megna 99%); /* FF3.6-15 */
+//     background: -webkit-linear-gradient(left, #4f5467 0%,#4f5467 23%,$megna 23%,$megna 99%); /* Chrome10-25,Safari5.1-6 */
+//     background: linear-gradient(to right, #4f5467 0%,#4f5467 23%,$megna 23%,$megna 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+//     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5467', endColorstr='$megna',GradientType=1 ); /* IE6-9 */
+// }
+
+
+/*visited ul li*/
+.visited li a{
+color:$bodytext
+}
+.visited li.active a{
+color:$themecolor;
+}
+
+/*Stats Row*/
+/*
+.stats-row{
+margin-bottom:20px;
+}
+.stat-item{
+  display: inline-block;
+  padding-right: 15px;
+}
+.stat-item+.stat-item {
+  padding-left: 15px;
+  border-left: 1px solid #eee;
+}
+*/
+
+/*country-state*/
+/*
+.country-state{
+list-style:none;
+margin:0px;
+padding:0px 0 0 10px;
+h2{
+    margin:0px;
+}
+.progress{
+margin-top:8px;
+}
+}
+*/
+
+/*Two part*/
+/*
+.two-part li{
+width:48.8%;
+i{
+    font-size:44px;
+  }
+span{
+    font-size:44px;
+    font-weight:100;
+    font-family:$basefont2;
+}
+}
+*/
+
+/*News Slides*/
+/*
+.news-slide{
+position:relative;
+.overlaybg{
+  height:343px;
+  overflow:hidden;
+img{
+  width:100%;
+  height:100%;
+}
+}
+.news-content{
+   position:absolute;
+   height:360px;
+   background:rgba(0, 0, 0, 0.5);
+   z-index:10;
+   width:100%;
+   top:0px;
+   padding:30px;
+   h2{
+      height:240px;
+      overflow:hidden;
+      color:$white;
+   }
+   a {
+      color:$white;
+      opacity:0.6;
+      text-transform:uppercase;
+   &:hover{
+      opacity:1;
+   }
+   }
+}
+}
+*/
+
+/*Nav pill rounded*/
+/*
+.nav-pills-rounded li{ display:inline-block; float:none;}
+.nav-pills-rounded li a{
+border-radius:60px;
+-moz-border-radius:60px;
+-webkit-border-radius:60px;
+color:$bodytext;
+padding: 10px 25px;
+}
+.nav-pills-rounded li.active a, .nav-pills-rounded li.active a:focus, .nav-pills-rounded li.active a:hover{
+background:$themecolor;
+color:$white;
+}
+*/
+
+/*analytics-info*/
+/*
+.analytics-info .list-inline {
+   margin-bottom:0px;
+ li {
+    vertical-align:middle;
+    span{
+        font-size:24px;
+      }
+    i{
+      font-size:20px;
+    }
+    }
+}
+*/
+
+/*Feeds*/
+/*
+.feeds{
+  margin:0px;
+  padding:0px;
+li{
+    list-style:none;
+    padding:10px;
+    display:block;
+    &:hover{
+        background:$extralight;
+    }
+    > div{
+        width:40px;
+        height:40px;
+        margin-right:5px;
+        display:inline-block;
+        text-align:center;
+        vertical-align:middle;
+        border-radius:100%;
+       i{
+          line-height:40px;
+       }
+    }
+    span{
+       float:right;
+       width:auto;
+        font-size:12px;
+    }
+}
+
+}
+*/
+/*Jquery toaster*/
+
+/*
+.jq-icon-info {background-color: $megna; color:$white;}
+.jq-icon-success {background-color: $success; color:$white;}
+.jq-icon-error {background-color: $danger; color:$white;}
+.jq-icon-warning{ background-color:$warning; color:$white;}
+*/
+#toast-container > div {
+border-radius: $radius;
+box-shadow: none;
+opacity: 1;
+}
+.toast-info {background-color: $info; color:$white;}
+.toast-success {background-color: $success; color:$white;}
+.toast-error {background-color: $danger; color:$white;}
+.toast-warning{ background-color:$warning; color:$white;}
+
+
+/*Dropzone*/
+/*
+.dropzone{ border-style:dashed; border-width:1px;}
+*/
+
+/*sales boxes*/
+/*
+.weather h1 sup{
+font-size:20px;
+top:-1.2em;
+}
+*/
+
+
+
+/* Button 1c */
+.fcbtn {
+position: relative;
+-webkit-transition: all 0.3s;
+-moz-transition: all 0.3s;
+transition: all 0.3s;
+padding:8px 20px;
+}
+
+.fcbtn:after {
+content: '';
+position: absolute;
+z-index: -1;
+-webkit-transition: all 0.3s;
+-moz-transition: all 0.3s;
+transition: all 0.3s;
+}
+
+/* Button 1b */
+.btn-1b{
+overflow: hidden;
+&:after {
+width: 100%;
+height: 0;
+top: 0;
+left: 0;
+}
+
+&:hover, &:active {
+color: #fff;
+}
+&:hover:after, &:active:after {
+height: 100%;
+}
+}
+.btn-1b.btn-info:after, .btn-1c.btn-info:after, .btn-1d.btn-info:after, .btn-1e.btn-info:after, .btn-1f.btn-info:after{background: $info;}
+.btn-1b.btn-warning:after, .btn-1c.btn-warning:after, .btn-1d.btn-warning:after, .btn-1e.btn-warning:after, .btn-1f.btn-warning:after{background: $warning;}
+.btn-1b.btn-danger:after, .btn-1c.btn-danger:after, .btn-1d.btn-danger:after, .btn-1e.btn-danger:after, .btn-1f.btn-danger:after{background: $danger;}
+.btn-1b.btn-primary:after, .btn-1c.btn-primary:after, .btn-1d.btn-primary:after, .btn-1e.btn-primary:after, .btn-1f.btn-primary:after{background: $primary;}
+.btn-1b.btn-success:after, .btn-1c.btn-success:after, .btn-1d.btn-success:after, .btn-1e.btn-success:after, .btn-1f.btn-success:after{background: $success;}
+.btn-1b.btn-inverse:after, .btn-1c.btn-inverse:after, .btn-1d.btn-inverse:after, .btn-1e.btn-inverse:after, .btn-1f.btn-inverse:after{background: $inverse;}
+
+
+/* Button 1c */
+
+.btn-1c{
+&:after {
+width: 0%;
+height: 100%;
+top: 0;
+left: 0;
+}
+&:hover,&:active {
+  color: #000;
+}
+&:hover:after, &:active:after {
+width: 100%;
+}
+}
+
+
+/* Button 1d */
+.btn-1d {
+overflow: hidden;
+&:after {
+width: 0;
+height: 103%;
+top: 50%;
+left: 50%;
+opacity: 0;
+-webkit-transform: translateX(-50%) translateY(-50%);
+-moz-transform: translateX(-50%) translateY(-50%);
+-ms-transform: translateX(-50%) translateY(-50%);
+transform: translateX(-50%) translateY(-50%);
+}
+&:hover:after {
+width: 100%;
+opacity: 1;
+}
+
+}
+
+/* Button 1e */
+.btn-1e {
+overflow: hidden;
+&:after {
+width: 100%;
+height: 0;
+top: 50%;
+left: 50%;
+background: #fff;
+opacity: 0;
+-webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+-moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+-ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
+transform: translateX(-50%) translateY(-50%) rotate(45deg);
+}
+
+&:hover:after {
+  height: 260%;
+  opacity: 1;
+}
+&:active:after {
+  height: 400%;
+  opacity: 1;
+}
+}
+/* Button 1f */
+.btn-1f {
+overflow: hidden;
+&:after {
+width: 101%;
+height: 0;
+top: 50%;
+left: 50%;
+background: #fff;
+opacity: 0;
+-webkit-transform: translateX(-50%) translateY(-50%);
+-moz-transform: translateX(-50%) translateY(-50%);
+-ms-transform: translateX(-50%) translateY(-50%);
+transform: translateX(-50%) translateY(-50%);
+}
+&:hover:after {
+height: 100%;
+opacity: 1;
+}
+&:active:after {
+height: 130%;
+opacity: 1;
+}
+}
+
+/*sweat Aleart*/
+/*
+.sweet-alert {
+ padding:25px;
+h2{
+margin-top:0px;
+}
+p{
+line-height:30px;
+}
+}
+*/
+
+/*List icon*/
+/*
+ul.list-icons{
+margin:0px;
+padding:0px;
+li{
+  list-style:none;
+  line-height:40px;
+  i{
+    font-size:12px;
+    margin-right:5px;
+  }
+}
+}
+*/
+
+/*Tooltip*/
+/*
+.demo-tooltip .tooltip, .demo-popover .popover{
+  position: relative;
+  margin-right: 25px;
+  opacity: 1;
+  display:inline-block;
+}
+.tooltip-inner {
+border-radius:3px;
+padding: 5px 10px;
+}
+.tooltip.in{opacity:1;}
+.tooltip-primary.tooltip .tooltip-inner, .tooltip-primary + .tooltip .tooltip-inner {
+color: #ffffff;
+background-color: $primary;
+}
+.tooltip-primary.tooltip.top .tooltip-arrow, .tooltip-primary + .tooltip.top .tooltip-arrow {
+border-top-color: $primary;
+}
+.tooltip-primary.tooltip.right .tooltip-arrow, .tooltip-primary + .tooltip.right .tooltip-arrow {
+border-right-color: $primary;
+}
+.tooltip-primary.tooltip.bottom .tooltip-arrow , .tooltip-primary + .tooltip.bottom .tooltip-arrow {
+border-bottom-color: $primary;
+}
+.tooltip-primary.tooltip.left .tooltip-arrow, .tooltip-primary + .tooltip.left .tooltip-arrow {
+border-left-color: $primary;
+}
+.tooltip-success.tooltip .tooltip-inner, .tooltip-success + .tooltip .tooltip-inner {
+color: #ffffff;
+background-color: $success;
+}
+.tooltip-success.tooltip.top .tooltip-arrow, .tooltip-success + .tooltip.top .tooltip-arrow {
+border-top-color: $success;
+}
+.tooltip-success.tooltip.right .tooltip-arrow, .tooltip-success + .tooltip.right .tooltip-arrow {
+border-right-color: $success;
+}
+.tooltip-success.tooltip.bottom .tooltip-arrow, .tooltip-success + .tooltip.bottom .tooltip-arrow {
+border-bottom-color: $success;
+}
+.tooltip-success.tooltip.left .tooltip-arrow, .tooltip-success + .tooltip.left .tooltip-arrow {
+border-left-color: $success;
+}
+.tooltip-warning.tooltip .tooltip-inner, .tooltip-warning + .tooltip .tooltip-inner {
+color: #ffffff;
+background-color: $warning;
+}
+.tooltip-warning.tooltip.top .tooltip-arrow, .tooltip-warning + .tooltip.top .tooltip-arrow {
+border-top-color: $warning;
+}
+.tooltip-warning.tooltip.right .tooltip-arrow, .tooltip-warning + .tooltip.right .tooltip-arrow {
+border-right-color: $warning;
+}
+.tooltip-warning.tooltip.bottom .tooltip-arrow, .tooltip-warning + .tooltip.bottom .tooltip-arrow {
+border-bottom-color: $warning;
+}
+.tooltip-warning.tooltip.left .tooltip-arrow, .tooltip-warning + .tooltip.left .tooltip-arrow {
+border-left-color: $warning;
+}
+.tooltip-info.tooltip .tooltip-inner, .tooltip-info + .tooltip .tooltip-inner {
+color: #ffffff;
+background-color: $info;
+}
+.tooltip-info.tooltip.top .tooltip-arrow, .tooltip-info + .tooltip.top .tooltip-arrow {
+border-top-color: $info;
+}
+.tooltip-info.tooltip.right .tooltip-arrow, .tooltip-info + .tooltip.right .tooltip-arrow {
+border-right-color: $info;
+}
+.tooltip-info.tooltip.bottom .tooltip-arrow, .tooltip-info + tooltip.bottom .tooltip-arrow {
+border-bottom-color: $info;
+}
+.tooltip-info.tooltip.left .tooltip-arrow, .tooltip-info + .tooltip.left .tooltip-arrow {
+border-left-color: $info;
+}
+
+.tooltip-danger.tooltip .tooltip-inner, .tooltip-danger + .tooltip .tooltip-inner {
+color: #ffffff;
+background-color: $danger;
+}
+.tooltip-danger.tooltip.top .tooltip-arrow, .tooltip-danger + .tooltip.top .tooltip-arrow {
+border-top-color: $danger;
+}
+.tooltip-danger.tooltip.right .tooltip-arrow, .tooltip-danger + .tooltip.right .tooltip-arrow {
+border-right-color: $danger;
+}
+.tooltip-danger.tooltip.bottom .tooltip-arrow, .tooltip-danger + .tooltip.bottom .tooltip-arrow {
+border-bottom-color: $danger;
+}
+.tooltip-danger.tooltip.left .tooltip-arrow, .tooltip-danger + .tooltip.left .tooltip-arrow {
+border-left-color: $danger;
+}
+.flotTip {
+  padding: 8px 12px;
+  background-color: $dark;
+  z-index: 100;
+  color: #ffffff;
+  opacity: 0.9;
+  font-size: 13px;
+
+}
+*/
+
+/*Popover*/
+/*
+.popover {
+-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+.popover .popover-title{
+border-radius:0px;
+}
+.popover-primary + .popover .popover-title {
+color: $white;
+background-color: $primary;
+border-color: $primary;
+}
+.popover-primary + .popover.bottom .arrow {
+border-bottom-color: $primary;
+}
+.popover-primary + .popover.bottom .arrow:after {
+border-bottom-color: $primary;
+}
+.popover-success + .popover .popover-title {
+color: $white;
+background-color: $success;
+border-color: $success;
+}
+.popover-success + .popover.bottom .arrow {
+border-bottom-color: $success;
+}
+.popover-success + .popover.bottom .arrow:after {
+border-bottom-color: $success;
+}
+.popover-info + .popover .popover-title {
+color: $white;
+background-color: $info;
+border-color: $info;
+}
+.popover-info + .popover.bottom .arrow {
+border-bottom-color: $info;
+}
+.popover-info + .popover.bottom .arrow:after {
+border-bottom-color: $info;
+}
+.popover-warning + .popover .popover-title {
+color:$white;
+background-color: $warning;
+border-color: $warning;
+}
+.popover-warning + .popover.bottom .arrow {
+border-bottom-color: $warning;
+}
+.popover-warning + .popover.bottom .arrow:after {
+border-bottom-color: $warning;
+}
+.popover-danger + .popover .popover-title {
+color:$white;
+background-color: $danger;
+border-color: $danger;
+}
+.popover-danger + .popover.bottom .arrow {
+border-bottom-color: $danger;
+}
+.popover-danger + .popover.bottom .arrow:after {
+border-bottom-color: $danger;
+}
+*/
+
+/*File Upload*/
+/*
+.btn-file {
+overflow: hidden;
+position: relative;
+vertical-align: middle;
+}
+.btn-file > input {
+position: absolute;
+top: 0;
+right: 0;
+margin: 0;
+opacity: 0;
+filter: alpha(opacity=0);
+font-size: 23px;
+height: 100%;
+width: 100%;
+direction: ltr;
+cursor: pointer;
+border-radius:0px;
+}
+.fileinput {
+margin-bottom: 9px;
+display: inline-block;
+}
+.fileinput .form-control {
+padding-top: 7px;
+padding-bottom: 5px;
+display: inline-block;
+margin-bottom: 0px;
+vertical-align: middle;
+cursor: text;
+}
+.fileinput .thumbnail {
+overflow: hidden;
+display: inline-block;
+margin-bottom: 5px;
+vertical-align: middle;
+text-align: center;
+}
+.fileinput .thumbnail > img {
+max-height: 100%;
+}
+.fileinput .btn {
+vertical-align: middle;
+}
+.fileinput-exists .fileinput-new,
+.fileinput-new .fileinput-exists {
+display: none;
+}
+.fileinput-inline .fileinput-controls {
+display: inline;
+}
+.fileinput-filename {
+vertical-align: middle;
+display: inline-block;
+overflow: hidden;
+}
+.form-control .fileinput-filename {
+vertical-align: bottom;
+}
+.fileinput.input-group {
+display: table;
+}
+.fileinput.input-group > * {
+position: relative;
+z-index: 2;
+}
+.fileinput.input-group > .btn-file {
+z-index: 1;
+}
+*/
+
+/*Bootstrap select*/
+/*
+.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){
+width:100%;
+}
+.ms-container .ms-list{
+    border-radius:$radius;
+    box-shadow:none;
+}
+.ms-container .ms-selectable li.ms-elem-selectable, .ms-container .ms-selection li.ms-elem-selection{
+  padding:6px 10px;
+}
+.ms-container .ms-selectable li.ms-hover, .ms-container .ms-selection li.ms-hover{
+background:$info;
+}
+*/
+
+/*Dropzone*/
+/*
+.dropzone .dz-message {
+  text-align: center;
+  margin: 10% 0;
+}
+*/
+/*xeditable*/
+/*
+.editable-input .form-control{
+  height:30px;
+}
+*/
+
+/*ascolorpicker*/
+/*
+.asColorPicker-trigger{
+position:absolute;
+top: 0;
+right: -35px;
+height: 38px;
+width: 37px;
+border:0px;
+}
+.asColorPicker-dropdown{
+max-width:260px;
+}
+.asColorPicker-clear{
+top:7px;
+right:16px;
+}
+*/
+
+/*Datepicker*/
+/*
+.datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover{
+background-image:none;
+background:$themecolor;
+color:$white;
+}
+.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover{
+background-image:none;
+background:$info;
+color:$white;
+}
+*/
+
+/*Datatable*/
+/*
+.editable-table + input.error{
+  border:1px solid #danger;
+  outline:0;
+  outline-offset:0
+  }
+.editable-table+input,.editable-table+input:focus, #editable-datatable_wrapper + input:focus{
+  border:1px solid $info!important;
+  outline:0!important;
+  outline-offset:0!important}
+.editable-table td:focus{outline:0}
+*/
+
+/*USer-profile*/
+/*
+.user-profile{
+padding:15px 0;
+position:relative;
+text-align:center;
+
+.user-pro-body{
+    display:block;
+ img{
+    width:50px;
+    display:block;
+    margin:0 auto;
+    margin-bottom:10px;
+ }
+ .u-dropdown{
+    color:$sidebar-text;
+ }
+ .dropdown-menu{
+    right:0px;
+    width:180px;
+    left:0px;
+    margin:0 auto;
+ }
+}
+}
+*/
+
+/*Form-Wizard*/
+/*
+.wizard-steps{
+    display:table;
+    width:100%
+}
+.wizard-steps > li{
+display:table-cell;
+padding:10px 20px;
+background:$extralight;
+span{
+    border-radius:100%;
+    border:1px solid $border;
+    width:40px;
+    height:40px;
+    display:inline-block;
+    vertical-align:middle;
+    padding-top:9px;
+    margin-right:8px;
+    text-align:center;
+}
+}
+.wizard-content{
+    padding:25px;
+    border-color:$border;
+    margin-bottom:30px;
+}
+.wizard-steps > li.current, .wizard-steps > li.done{
+background:$info;
+color:$white;
+span{
+    border-color:$white;
+    color:$white;
+}
+h4{
+  color:$white;
+}
+}
+.wizard-steps > li.done{
+    background:$success;
+}
+.wizard-steps > li.error{
+    background:$danger;
+}
+.wiz-aco{
+.pager{
+margin:0px;
+}
+}
+*/

+ 5 - 0
src/client/styles/scss/_admin.scss

@@ -97,6 +97,11 @@
       }
     }
 
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
     // style
     .theme-option-container a {
       border: 1px solid #ccc;

+ 130 - 0
src/client/styles/scss/_comment_kibela.scss

@@ -0,0 +1,130 @@
+
+.kibela.main-container {
+  /* Comment section */
+  %comment-section {
+    position: relative;
+    padding: 1em;
+    margin-left: 4.5em;
+    margin-bottom: 1em; // screen-xs
+    @media (max-width: $screen-xs) {
+      margin-left: 3.5em;
+    } // speech balloon
+    &:before {
+      width: 0;
+      height: 0;
+      border-top: 20px solid transparent;
+      border-left: 20px solid transparent;
+      border-bottom: 20px solid transparent;
+      border-right: 20px solid #E6E9EC;
+      border-left-width: 0;
+      left: -1em;
+      content: "";
+      display: block;
+      top: 1.5em;
+      position: absolute;
+      width: 0; // screen-xs
+      @media (max-width: $screen-xs) {
+        top: 1em;
+      }
+    }
+  }
+  %picture {
+    float: left;
+    margin-top: 0.8em;
+    width: 3em;
+    height: 3em; // screen-xs
+    @media (max-width: $screen-xs) {
+      width: 2em;
+      height: 2em;
+    }
+  }
+  .page-comments-row {
+    margin: 10px 0px;
+  }
+  .page-comments {
+    h4 {
+      margin-bottom: 1em;
+    }
+  }
+  .page-comment {
+    position: relative; // ユーザー名
+    .page-comment-creator {
+      margin-top: -0.5em;
+      margin-bottom: 0.5em;
+      font-weight: bold;
+    } // ユーザーアイコン
+    .picture {
+      @extend %picture;
+    } // コメントセクション
+    .page-comment-main {
+      @extend %comment-section;
+      background: #E6E9EC;
+      border-radius: 0.35em;
+    } // コメント本文
+    .page-comment-body {
+      margin-bottom: 0.5em;
+      word-wrap: break-word;
+    }
+    .page-comment-meta {
+      color: #E5ECF1;
+      font-size: .9em;
+      text-align: right;
+      * {
+        vertical-align: 25%;
+      }
+    }
+  } // show when hover
+  .page-comment-main:hover>.page-comment-control {
+    display: block;
+  } // display cheatsheet for comment form only
+  .comment-form {
+    border: none;
+    .editor-cheatsheet {
+      display: none;
+    }
+    position: relative;
+    margin-top: 2em; // user icon
+    .picture {
+      @extend %picture;
+    } // seciton
+    .comment-form-main {
+      @extend %comment-section;
+      background: #E6E9EC;
+      border-radius: 0.35em;
+      .CodeMirror {
+        border: 0px;
+      }
+    } // textarea
+    .comment-write {
+      margin-bottom: 0.5em;
+    }
+    .comment-form-comment {
+      height: 80px;
+      &:focus,
+      &:not(:invalid) {
+        transition: height 0.2s ease-out;
+        height: 180px;
+      }
+    }
+    .CodeMirror {
+      border: 0px !important;
+    }
+    #page-editor {
+      @media (max-width: $screen-sm) {
+        .desc-long {
+          display: none;
+        }
+      }
+    }
+    @media screen and (max-width: 1400px) {
+      .desc-long {
+        display: none;
+      }
+      @media screen and (max-width: 570px) {
+        .gfm-cheatsheet {
+          display: none;
+        }
+      }
+    }
+  }
+}

+ 194 - 0
src/client/styles/scss/_layout_kibela.scss

@@ -0,0 +1,194 @@
+body.kibela {
+  .icon-link,
+  .CodeMirror-hint-active,
+  .nav-main-left-tab,
+  .tav-pane,
+  .active {
+    color: #5882FA;
+  }
+  .bg-white {
+    background: #fefffe !important;
+  }
+  .logo {
+    background: transparent;
+    .logo-mark {
+      background-color: white;
+      height: 50px;
+      box-shadow: none;
+      svg {
+        width: 60px;
+      }
+    }
+  }
+  /* header */
+  .background-t {
+    background-color: transparent;
+  }
+  .authors {
+    padding-top: 10px;
+    li {
+      list-style: none !important;
+    }
+  }
+  .search-input-group,
+  .search-typeahead {
+    .btn {
+      background-color: transparent;
+    }
+  }
+  .panel-heading {
+    border-radius: 0 !important;
+  }
+  .btn-open-dropzone {
+    background: rgb(243, 245, 247);
+    border-bottom: 0px !important;
+  }
+  /* page list */
+  .page-list {
+    background: white;
+  }
+  .page-attachments-row {
+    border: 0px;
+    background-color: #E5ECF1 !important;
+  }
+  .round-corner {
+    border-radius: 0.35em;
+  }
+  .round-corner-top {
+    border-radius: 0.35em;
+    border-top: solid 0.4em #5584E1;
+    z-index: absolute;
+  }
+  .kibela-block {
+    position: absolute;
+    top: 0px;
+    right: 100px;
+    bottom: 0px;
+    left: 0px;
+    margin: auto;
+    height: 11em;
+    border-radius: 0.35em;
+    border-top: solid 0.4em #5584E1;
+    z-index: absolute;
+  }
+  .bg-title {
+    position: relative;
+    background: transparent;
+    border: none;
+    svg {
+      display: none;
+    }
+    @media screen and (max-width: 765px) {
+      padding-top: 30px;
+    }
+  }
+  .revision-toc {
+    &.affix {
+      right: 10rem;
+      margin-top: 40px;
+      top: calc(60px + 5px);
+      min-width: calc(#{100/12*2%} - #{$grid-gutter-width}); // width of 2column - padding
+    }
+    .revision-toc-content {
+      padding: 0;
+    }
+    @media screen and (max-width: 1400px) {
+      &.affix {
+        right: 0rem !important;
+        transition: 0.5s;
+      }
+    }
+  }
+  /* search page */
+  .search-result-list,
+  .page-list-li {
+    background: #F4F5F6;
+  }
+  /* Tabs */
+  .nav.nav-tabs {
+    border-bottom-color: #F4F5F6;
+    >li>a {
+      &,
+      &:hover,
+      &:focus {
+        background: transparent;
+        border-top: none;
+        border-left: none;
+        border-right: none;
+      }
+    }
+    >li.active>a {
+      background: transparent !important;
+      border-bottom: solid 2.7px #5584E1;
+      border-top: none;
+      border-left: none;
+      border-right: none;
+    }
+    .wiki {
+      h1 {
+        border-bottom: solid 2px #5584E1 !important;
+      }
+      h2 {
+        border-color: solid 1px #5584E1;
+      }
+    }
+  }
+  /* user page */
+  .header-wrap {
+    margin-left: 2em;
+    padding: 0px;
+  }
+  /* edit */
+  .CodeMirror {
+    border-radius: 0.35em;
+    border-top: solid 0.3em #5584E1 !important;
+    border: solid 1.2px #D8D8D8;
+  }
+  &.on-edit {
+    $header-plus-footer: 42px                     // .nav height
+                        + 5.5px                   // .kibela-block border-top
+                        + 15px                    // .tab-content padding-top
+                        + 1px                     // .page-editor-footer border-top
+                        + 60px;                   // .page-editor-footer min-height
+
+    @include expand-editor($header-plus-footer);
+
+    .main {
+      > .row.page-content {
+        > .col-xs-12 {
+          width: 100%;
+          padding: 0;
+        }
+      }
+    }
+
+    .tab-content {
+      padding-top: 15px;
+      #edit {
+        margin-left: 1em;
+        margin-right: 1em;
+      }
+    }
+    .tab-pane {
+      .page-editor-editor-container {
+        margin: 0px;
+        border: none !important;
+      }
+    }
+    .page-editor-preview-container {
+      background: white !important;
+      padding-right: 0px !important;
+      padding-left: 2em;
+    }
+    .page-editor-footer {
+      margin: 0;
+      padding: 13px;
+      min-height: 60px;
+    }
+  }
+}
+.on-edit {
+  .kibela-block {
+    border: 0px;
+  }
+}

+ 76 - 15
src/client/styles/scss/_mixins.scss

@@ -1,15 +1,76 @@
-@mixin variable-font-size($basesize) {
-  font-size: $basesize;
-  @media(max-width: $screen-lg) {
-    font-size: #{$basesize * 0.9};
-  }
-  @media(max-width: $screen-md) {
-    font-size: #{$basesize * 0.8};
-  }
-  @media(max-width: $screen-sm) {
-    font-size: #{$basesize * 0.7};
-  }
-  @media(max-width: $screen-xs) {
-    font-size: #{$basesize * 0.6};
-  }
-}
+@mixin variable-font-size($basesize) {
+  font-size: $basesize;
+  @media(max-width: $screen-lg) {
+    font-size: #{$basesize * 0.9};
+  }
+  @media(max-width: $screen-md) {
+    font-size: #{$basesize * 0.8};
+  }
+  @media(max-width: $screen-sm) {
+    font-size: #{$basesize * 0.7};
+  }
+  @media(max-width: $screen-xs) {
+    font-size: #{$basesize * 0.6};
+  }
+}
+
+@mixin expand-editor($header-plus-footer) {
+  $header-plus-footer: $header-plus-footer + 2px;   // add .main padding-top
+  $editor-margin: $header-plus-footer + 26px;       // add .btn-open-dropzone height
+
+  .main {
+    width: 100%;
+    height: 100vh;
+    margin-top: 0px !important;
+    padding-top: 2px;
+    padding-left: 0;
+    padding-right: 0;
+
+    &,
+    .content-main,
+    .tab-content {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+
+      .tab-pane#edit, .tab-pane#hackmd {
+        min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+        height: calc(100vh - #{$header-plus-footer});
+      }
+
+      #page-editor {
+        // right(preview)
+        &,
+        &>.row,
+        .page-editor-preview-container,
+        .page-editor-preview-body {
+          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+          height: calc(100vh - #{$header-plus-footer});
+        }
+        // left(editor)
+        .page-editor-editor-container {
+          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+          height: calc(100vh - #{$header-plus-footer});
+
+          .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
+          .textarea-editor {
+            height: calc(100vh - #{$editor-margin});
+          }
+
+          @media (min-width: $screen-md) {
+            padding-right: 0;
+          }
+        }
+      }
+
+      #page-editor-with-hackmd {
+        &,
+        .hackmd-preinit, #iframe-hackmd-container > iframe {
+          width: 100vw;
+          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
+          height: calc(100vh - #{$header-plus-footer});
+        }
+      }
+    }
+  }
+}

+ 84 - 0
src/client/styles/scss/_navbar_kibela.scss

@@ -0,0 +1,84 @@
+ /* navbar */
+
+ .kibela {
+   .navbar-header {
+     display: inline-block;
+     overflow: visible;
+     min-width: 320px;
+     background: white;
+     color: #3c4a60;
+     border-bottom: solid 1px #E6E9EC;
+     height: 60px;
+     padding: 5px 8px 5px 8px;
+     .navbar-right {
+       a {
+         margin-right: 1.5em;
+       }
+     }
+     .top-left-part {
+       background: white;
+     }
+     .navbar-top-links>li>a {
+       border-radius: 0.35em;
+       height: 40px !important;
+       color: #3c4a60;
+     }
+     .create-page {
+       background: #5584E1;
+       border-radius: 0.35em;
+       width: 8em;
+       text-align: center;
+       &:hover {
+         background: rgb(124, 168, 255);
+       }
+       span,
+       i {
+         color: white;
+       }
+     }
+     .dropdown {
+       a {
+         .user-name {
+           margin-right: 0.5em;
+           margin-left: 0.5em;
+         }
+       }
+       .img-circle {
+         width: 36px;
+         height: 36px;
+       }
+     }
+     @media screen and (max-width: 790px) {
+       .search-top,
+       .navbar-toggle {
+         display: none !important;
+       }
+       @media screen and (max-width: 540px) {
+         .user-name {
+           display: none;
+         }
+         .navbar-right {
+           width: 80%;
+           li {
+             text-align: center;
+             width: 25%;
+             a {
+               margin-right: 0px;
+             }
+             .create-page {
+               width: 100%;
+             }
+             .dropdown {
+               text-align: center;
+               .dropdown-toggle {
+                 padding-left: 0em;
+                 margin-right: 0px;
+                 width: 100%;
+               }
+             }
+           }
+         }
+       }
+     }
+   }
+ }

+ 16 - 69
src/client/styles/scss/_on-edit.scss

@@ -4,17 +4,29 @@ body:not(.on-edit) {
   // hide .page-editor-footer
   .page-editor-footer {
     display: none !important;
+    border: none;
   }
 }
 
 body.on-edit {
 
   // calculate margin
-  $header-plus-footer: 2px                      // .main padding-top
-                      + 42px                    // .nav height
+  $header-plus-footer: 42px                     // .nav height
                       + 1px                     // .page-editor-footer border-top
-                      + 40px;                   // .page-editor-footer min-height
-  $editor-margin: $header-plus-footer + 26px;   // .btn-open-dropzone height
+                      + 40px !default;          // .page-editor-footer min-height
+
+  @include expand-editor($header-plus-footer);
+
+  // for growi layout
+  .main {
+    > .row {
+      margin: 0;
+      > .col-lg-10, > .col-md-9 {
+        width: 100%;
+        padding: 0;
+      }
+    }
+  }
 
   // hide unnecessary elements
   .navbar.navbar-static-top,
@@ -66,71 +78,6 @@ body.on-edit {
   .container-fluid {
     padding-bottom: 0;
   }
-  .main {
-    width: 100%;
-    height: 100vh;
-    margin-top: 0px !important;
-    padding-top: 2px;
-    padding-left: 0;
-    padding-right: 0;
-
-    // for growi layout
-    > .row {
-      margin: 0;
-      > .col-lg-10, > .col-md-9 {
-        width: 100%;
-        padding: 0;
-      }
-    }
-
-    &,
-    .content-main,
-    .tab-content {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-
-      .tab-pane#edit, .tab-pane#hackmd {
-        min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-        height: calc(100vh - #{$header-plus-footer});
-      }
-
-      #page-editor {
-        // right(preview)
-        &,
-        &>.row,
-        .page-editor-preview-container,
-        .page-editor-preview-body {
-          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-          height: calc(100vh - #{$header-plus-footer});
-        }
-        // left(editor)
-        .page-editor-editor-container {
-          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-          height: calc(100vh - #{$header-plus-footer});
-
-          .react-codemirror2, .CodeMirror, .CodeMirror-scroll,
-          .textarea-editor {
-            height: calc(100vh - #{$editor-margin});
-          }
-
-          @media (min-width: $screen-md) {
-            padding-right: 0;
-          }
-        }
-      }
-
-      #page-editor-with-hackmd {
-        &,
-        .hackmd-preinit, #iframe-hackmd-container > iframe {
-          width: 100vw;
-          min-height: calc(100vh - #{$header-plus-footer});   // for IE11
-          height: calc(100vh - #{$header-plus-footer});
-        }
-      }
-
-    }
-  }
 
   .row.bg-title {
     $left-margin: $nav-main-left-tab-width * 2 + 25px;  // width of .nav-main-left-tab x 2 + some margin

+ 3 - 0
src/client/styles/scss/style.scss

@@ -19,6 +19,8 @@
 @import 'attachments';
 @import 'comment';
 @import 'comment_growi';
+@import 'comment_kibela';
+@import 'navbar_kibela';
 @import 'create-page';
 @import 'create-template';
 @import 'editor-attachment';
@@ -26,6 +28,7 @@
 @import 'layout_crowi';
 @import 'layout_crowi_sidebar';
 @import 'layout_growi';
+@import 'layout_kibela';
 @import 'login';
 @import 'notification';
 @import 'on-edit';

+ 8 - 0
src/client/styles/scss/theme/kibela.scss

@@ -0,0 +1,8 @@
+// import colors
+@import '../../agile-admin/inverse/colors/kibela';
+
+// apply agile-admin theme
+@import '../../agile-admin/inverse/style';
+
+// override
+@import 'override-agileadmin';

+ 2 - 1
src/server/form/admin/customlayout.js

@@ -5,5 +5,6 @@ var form = require('express-form')
   ;
 
 module.exports = form(
-  field('settingForm[customize:layout]')
+  field('settingForm[customize:layout]'),
+  field('settingForm[customize:theme]')
 );

+ 154 - 124
src/server/views/admin/customize.html

@@ -3,12 +3,22 @@
 {% block html_title %}{{ customTitle(t('Customize')) }} {% endblock %}
 
 {% block style_css_block %}
-  {% if env === 'development' %}
-    <script src="{{ webpack_asset('styles/style.js') }}"></script>
-    <script src="{{ webpack_asset('styles/theme-' + theme() + '.js') }}"></script>
+  {% if 'kibela' === layoutType() %}
+    {% if env === 'development' %}
+      <script src="{{ webpack_asset('styles/style.js') }}"></script>
+      <script src="{{ webpack_asset('styles/theme-kibela.js') }}"></script>
+    {% else %}
+      <link rel="stylesheet" href="{{ webpack_asset('styles/style.css') }}">
+      <link rel="stylesheet" id="jssDefault" {# append id for theme selector #} href="{{ webpack_asset('styles/theme-kibela.css') }}">
+    {% endif %}
   {% else %}
-    <link rel="stylesheet" href="{{ webpack_asset('styles/style.css') }}">
-    <link rel="stylesheet" id="jssDefault" {# append id for theme selector #} href="{{ webpack_asset('styles/theme-' + theme() + '.css') }}">
+    {% if env === 'development' %}
+      <script src="{{ webpack_asset('styles/style.js') }}"></script>
+      <script src="{{ webpack_asset('styles/theme-' + theme() + '.js') }}"></script>
+    {% else %}
+      <link rel="stylesheet" href="{{ webpack_asset('styles/style.css') }}">
+      <link rel="stylesheet" id="jssDefault" {# append id for theme selector #} href="{{ webpack_asset('styles/theme-' + theme() + '.css') }}">
+    {% endif %}
   {% endif %}
 {% endblock %}
 
@@ -52,133 +62,61 @@
       {% include './widget/menu.html' with {current: 'customize'} %}
     </div>
     <div class="col-md-9">
-
-      <form action="/_api/admin/customize/theme" method="post" class="form-horizontal" id="customthemeSettingForm" role="form">
-        <fieldset>
-          <legend>{{ t('customize_page.Theme') }}</legend>
-
-          {% if env === 'development' %}
-            <div class="alert alert-warning">
-              <strong>DEBUG MESSAGE:</strong> development build では、リアルタイムプレビューが無効になります
-            </div>
-          {% endif %}
-
-          <div id="themeOptions">
-            {# Light Themes #}
-            <div class="d-flex">
-              {% include 'widget/theme-colorbox.html' with { name: 'default',  bg: '#ffffff', topbar: '#334455', theme: '#112744' } %}
-              {% include 'widget/theme-colorbox.html' with { name: 'nature',   bg: '#f9fff3', topbar: '#118050', theme: '#460039' } %}
-              {% include 'widget/theme-colorbox.html' with { name: 'mono-blue',   bg: '#F7FBFD', topbar: '#00587A', theme: '#00587A' } %}
-              {% include 'widget/theme-colorbox.html' with { name: 'wood',   bg: '#fffefb', topbar: '#aaa45f', theme: '#dddebf' } %}
-              {% include 'widget/theme-colorbox.html' with { name: 'island',   bg: '#8ecac0', topbar: '#0c2a44', theme: '#cef2ef' } %}
-            </div>
-            {# Dark Themes #}
-            <div class="d-flex mt-3">
-              {% include 'widget/theme-colorbox.html' with { name: 'default-dark', bg: '#212731', topbar: '#151515', theme: '#f75b36' } %}
-              {% include 'widget/theme-colorbox.html' with { name: 'future', bg: '#16282D', topbar: '#011414', theme: '#04B4AE' } %}
-              {% include 'widget/theme-colorbox.html' with { name: 'blue-night', bg: '#061F2F', topbar: '#27343B', theme: '#0090C8' } %}
-              {% include 'widget/theme-colorbox.html' with { name: 'halloween',   bg: '#030003', topbar: '#cc5d1f', theme: '#e9af2b' } %}
-            </div>
-          </div>
-
-          <div class="form-group">
-            <div class="col-xs-offset-5 col-xs-6">
-              <input type="hidden" id="hiddenInputTheme" name="settingForm[customize:theme]" value="{{ settingForm['customize:theme'] }}">
-              <input type="hidden" name="_csrf" value="{{ csrf() }}">
-              <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
-            </div>
-          </div>
-
-        </fieldset>
-      </form>
-
-      <form action="/_api/admin/customize/behavior" method="post" class="form-horizontal" id="cutombehaviorSettingForm" role="form">
+      <form action="/_api/admin/customize/layout" method="post" class="form-horizontal" id="customlayoutSettingForm" role="form">
       <fieldset>
-        <legend>{{ t('customize_page.Behavior') }}</legend>
-
-        {% set isBehaviorGrowi = 'growi' === settingForm['customize:behavior'] || 'crowi-plus' === settingForm['customize:behavior'] %}
-        <div class="form-group">
-          <div class="col-xs-6">
-            <h4>
-              <div class="radio radio-primary">
-                <input type="radio" id="radioBehaviorGrowi" name="settingForm[customize:behavior]" value="growi"
-                    {% if isBehaviorGrowi %}checked="checked"{% endif %}>
-                <label for="radioBehaviorGrowi">
-                  GROWI Simplified Behavior <small class="text-success">(Recommended)</small>
-                </label>
-            </div>
-            </h4>
-            <ul>
-              <li>Both of <code>/page</code> and <code>/page/</code> shows the same page</li>
-              <li><code>/nonexistent_page</code> shows editing form</li>
-              <li>All pages shows the list of sub pages <b>if using GROWI Enhanced Layout</b></li>
-            </ul>
+        <legend>{{ t('customize_page.Layout') }}</legend>
+        {% if env === 'development' %}
+          <br>
+          <div class="alert alert-warning">
+            <strong>DEBUG MESSAGE:</strong> development build では、リアルタイムプレビューが無効になります
           </div>
-          <div class="col-xs-6">
+        {% endif %}
+        <div class="form-group">
+          <div class="col-sm-4">
             <h4>
               <div class="radio radio-primary">
-                <input type="radio" id="radioBehaviorCrowi" name="settingForm[customize:behavior]" value="crowi"
-                    {% if !isBehaviorGrowi %}checked="checked"{% endif %}>
-                <label for="radioBehaviorCrowi">
-                  Crowi Classic Behavior
+                <input type="radio" id="radioLayoutGrowi" name="settingForm[customize:layout]" value="growi" onclick="selectableTheme(event)"
+                    {% if 'growi' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
+                <label for="radioLayoutGrowi">
+                  GROWI Enhanced Layout <small class="text-success">(Recommended)</small>
                 </label>
               </div>
             </h4>
+            <a href="/images/admin/customize/layout-crowi-plus.gif" class="ss-container">
+              <img src="/images/admin/customize/layout-crowi-plus-thumb.gif" width="240px">
+            </a>
+            <h4>Simple and Clear</h4>
             <ul>
-              <li><code>/page</code> shows the page</li>
-              <li><code>/page/</code> shows the list of sub pages</li>
-              <ul>
-                <li>If portal is applied to <code>/page/</code> , the portal and the list of sub pages are shown</li>
-              </ul>
-              <li><code>/nonexistent_page</code> shows editing form</li>
-              <li><code>/nonexistent_page/</code> the list of sub pages</li>
+              <li>Full screen layout and thin margins/paddings</li>
+              <li>Show and post comments at the bottom of the page</li>
+              <li>Affix Table-of-contents</li>
             </ul>
           </div>
-        </div>
-
-        <div class="form-group">
-          <div class="col-xs-offset-5 col-xs-6">
-            <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
-          </div>
-        </div>
-
-      </fieldset>
-      </form>
-
-
-      <form action="/_api/admin/customize/layout" method="post" class="form-horizontal" id="cutomlayoutSettingForm" role="form">
-      <fieldset>
-        <legend>{{ t('customize_page.Layout') }}</legend>
-
-        {% set isLayoutGrowi = 'growi' === settingForm['customize:layout'] || 'crowi-plus' === settingForm['customize:layout'] %}
-        <div class="form-group">
-          <div class="col-xs-6">
+          <div class="col-sm-4">
             <h4>
               <div class="radio radio-primary">
-                <input type="radio" id="radioLayoutGrowi" name="settingForm[customize:layout]" value="growi"
-                    {% if isLayoutGrowi %}checked="checked"{% endif %}>
-                <label for="radioLayoutGrowi">
-                  GROWI Enhanced Layout <small class="text-success">(Recommended)</small>
+                <input type="radio" id="radioLayoutKibela" name="settingForm[customize:layout]" value="kibela" onclick="selectableTheme(event)"
+                    {% if 'kibela' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
+                <label   for="radioLayoutKibela">
+                  Kibela Like Layout
                 </label>
               </div>
             </h4>
-            <a href="/images/admin/customize/layout-crowi-plus.gif" class="ss-container">
-              <img src="/images/admin/customize/layout-crowi-plus-thumb.gif" width="240px">
+            <a href="/images/admin/customize/layout-kibela.gif" class="ss-container">
+              <img src="/images/admin/customize/layout-kibela-thumb.gif" width="240px">
             </a>
+            <h4>Easy Viewing Structure</h4>
             <ul>
-              <li>Simple and Clear</li>
-              <ul>
-                <li>Show and post comments from the bottom of the page</li>
-                <li>Affix Table-of-contents</li>
-              </ul>
+              <li>Center aligned contents</li>
+              <li>Show and post comments at the bottom of the page</li>
+              <li>Affix Table-of-contents</li>
             </ul>
           </div>
-          <div class="col-xs-6">
+          <div class="col-sm-4">
             <h4>
               <div class="radio radio-primary">
-                <input type="radio" id="radioLayoutCrowi" name="settingForm[customize:layout]" value="crowi"
-                    {% if !isLayoutGrowi %}checked="checked"{% endif %}>
+                <input type="radio" id="radioLayoutCrowi" name="settingForm[customize:layout]" value="crowi" onclick="selectableTheme(event)"
+                    {% if 'crowi' === settingForm['customize:layout'] %}checked="checked"{% endif %}>
                 <label for="radioLayoutCrowi">
                   Crowi Classic Layout
                 </label>
@@ -187,27 +125,97 @@
             <a href="/images/admin/customize/layout-classic.gif" class="ss-container">
               <img src="/images/admin/customize/layout-classic-thumb.gif" width="240px">
             </a>
+            <h4>Separated Functions</h4>
             <ul>
-              <li>Functional</li>
-              <ul>
-                <li>Collapsible Sidebar</li>
-                <li>Show and post comments in Sidebar</li>
-                <li>Collapsible Table-of-contents</li>
-              </ul>
+              <li>Collapsible Sidebar</li>
+              <li>Show and post comments in Sidebar</li>
+              <li>Collapsible Table-of-contents</li>
             </ul>
           </div>
         </div>
-
+        <h2>{{ t('customize_page.Theme') }}</h2>
+        <div id="themeOptions" {% if 'kibela' == settingForm['customize:layout'] %}class="disabled"{% endif %}>
+          {# Light Themes #}
+          <div class="d-flex">
+            {% include 'widget/theme-colorbox.html' with { name: 'default',  bg: '#ffffff', topbar: '#334455', theme: '#112744'} %}
+            {% include 'widget/theme-colorbox.html' with { name: 'nature',   bg: '#f9fff3', topbar: '#118050', theme: '#460039'} %}
+            {% include 'widget/theme-colorbox.html' with { name: 'mono-blue',   bg: '#F7FBFD', topbar: '#00587A', theme: '#00587A'} %}
+            {% include 'widget/theme-colorbox.html' with { name: 'wood',   bg: '#fffefb', topbar: '#aaa45f', theme: '#dddebf'} %}
+            {% include 'widget/theme-colorbox.html' with { name: 'island',   bg: '#8ecac0', topbar: '#0c2a44', theme: '#cef2ef'} %}
+          </div>
+          {# Dark Themes #}
+          <div class="d-flex mt-3">
+            {% include 'widget/theme-colorbox.html' with { name: 'default-dark', bg: '#212731', topbar: '#151515', theme: '#f75b36'} %}
+            {% include 'widget/theme-colorbox.html' with { name: 'future', bg: '#16282D', topbar: '#011414', theme: '#04B4AE'} %}
+            {% include 'widget/theme-colorbox.html' with { name: 'blue-night', bg: '#061F2F', topbar: '#27343B', theme: '#0090C8'} %}
+            {% include 'widget/theme-colorbox.html' with { name: 'halloween',   bg: '#030003', topbar: '#cc5d1f', theme: '#e9af2b'} %}
+          </div>
+        </div>
         <div class="form-group">
           <div class="col-xs-offset-5 col-xs-6">
+            <input type="hidden" id="hiddenInputTheme" name="settingForm[customize:theme]" value="{{ settingForm['customize:theme'] }}">
             <input type="hidden" name="_csrf" value="{{ csrf() }}">
-            <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
+            <button type="submit"  class="btn btn-primary">{{ t('Update') }}</button>
           </div>
         </div>
 
       </fieldset>
       </form>
 
+      <form action="/_api/admin/customize/behavior" method="post" class="form-horizontal" id="custombehaviorSettingForm" role="form">
+        <fieldset>
+          <legend>{{ t('customize_page.Behavior') }}</legend>
+
+          {% set isBehaviorGrowi = 'growi' === settingForm['customize:behavior'] || 'crowi-plus' === settingForm['customize:behavior'] %}
+          <div class="form-group">
+            <div class="col-xs-6">
+              <h4>
+                <div class="radio radio-primary">
+                  <input type="radio" id="radioBehaviorGrowi" name="settingForm[customize:behavior]" value="growi"
+                      {% if isBehaviorGrowi %}checked="checked"{% endif %}>
+                  <label for="radioBehaviorGrowi">
+                    GROWI Simplified Behavior <small class="text-success">(Recommended)</small>
+                  </label>
+              </div>
+              </h4>
+              <ul>
+                <li>Both of <code>/page</code> and <code>/page/</code> shows the same page</li>
+                <li><code>/nonexistent_page</code> shows editing form</li>
+                <li>All pages shows the list of sub pages <b>if using GROWI Enhanced Layout</b></li>
+              </ul>
+            </div>
+            <div class="col-xs-6">
+              <h4>
+                <div class="radio radio-primary">
+                  <input type="radio" id="radioBehaviorCrowi" name="settingForm[customize:behavior]" value="crowi"
+                      {% if !isBehaviorGrowi %}checked="checked"{% endif %}>
+                  <label for="radioBehaviorCrowi">
+                    Crowi Classic Behavior
+                  </label>
+                </div>
+              </h4>
+              <ul>
+                <li><code>/page</code> shows the page</li>
+                <li><code>/page/</code> shows the list of sub pages</li>
+                <ul>
+                  <li>If portal is applied to <code>/page/</code> , the portal and the list of sub pages are shown</li>
+                </ul>
+                <li><code>/nonexistent_page</code> shows editing form</li>
+                <li><code>/nonexistent_page/</code> the list of sub pages</li>
+              </ul>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <div class="col-xs-offset-5 col-xs-6">
+              <input type="hidden" name="_csrf" value="{{ csrf() }}">
+              <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
+            </div>
+          </div>
+
+        </fieldset>
+      </form>
+
       <form action="/_api/admin/customize/features" method="post" class="form-horizontal" id="customfeaturesSettingForm" role="form">
       <fieldset>
       <legend>{{ t('customize_page.Function') }}</legend>
@@ -378,7 +386,7 @@ export  $initHighlight;</code></pre>
         </fieldset>
       </form>
 
-      <form action="/_api/admin/customize/header" method="post" class="form-horizontal" id="cutomheaderSettingForm" role="form">
+      <form action="/_api/admin/customize/header" method="post" class="form-horizontal" id="customheaderSettingForm" role="form">
       <fieldset>
         <legend>カスタムヘッダーHTML</legend>
 
@@ -415,7 +423,7 @@ export  $initHighlight;</code></pre>
       </fieldset>
       </form>
 
-      <form action="/_api/admin/customize/css" method="post" class="form-horizontal" id="cutomcssSettingForm" role="form">
+      <form action="/_api/admin/customize/css" method="post" class="form-horizontal" id="customcssSettingForm" role="form">
       <fieldset>
         <legend>{{ t('customize_page.Custom CSS') }}</legend>
 
@@ -448,7 +456,7 @@ export  $initHighlight;</code></pre>
       </form>
 
 
-      <form action="/_api/admin/customize/script" method="post" class="form-horizontal" id="cutomscriptSettingForm" role="form">
+      <form action="/_api/admin/customize/script" method="post" class="form-horizontal" id="customscriptSettingForm" role="form">
       <fieldset>
         <legend>{{ t('customize_page.Custom script') }}</legend>
 
@@ -512,8 +520,8 @@ window.addEventListener('load', (event) => {
 {% block body_end %}
   {% parent %}
   <script>
-    $(`#customthemeSettingForm, #cutomlayoutSettingForm, #cutombehaviorSettingForm, #customhighlightJsStyleSettingForm,
-       #customfeaturesSettingForm, #cutomheaderSettingForm, #cutomcssSettingForm, #cutomscriptSettingForm, #customtitleSettingForm`
+    $(`#customlayoutSettingForm, #custombehaviorSettingForm, #customhighlightJsStyleSettingForm,
+       #customfeaturesSettingForm, #customheaderSettingForm, #customcssSettingForm, #customscriptSettingForm, #customtitleSettingForm`
     ).each(function() {
       $(this).submit(function()
       {
@@ -576,6 +584,28 @@ window.addEventListener('load', (event) => {
       highlightJsCssDOM.href = highlightJsCssDOM.href.replace(/[^/]+\.css$/, `${val}.css`);
     }
 
+    function selectableTheme(event) {
+      var val = event.target.value;
+      var themeButtons = document.getElementsByClassName('theme-button');
+
+      if(val == 'kibela') {
+        $('#themeOptions').addClass("disabled");
+        var i=0;
+        while(i < themeButtons.length) {
+          themeButtons[i].removeAttribute("onclick");
+          i++;
+        }
+      }
+      else {
+        $('#themeOptions').removeClass("disabled")
+        var i=0;
+        while(i < themeButtons.length) {
+          var name = themeButtons[i].getAttribute("id");
+          themeButtons[i].setAttribute("onclick",`selectTheme('${name}')`);
+          i++;
+        }
+      }
+    }
     /*
      * Theme Selector
      */

+ 1 - 0
src/server/views/admin/markdown.html

@@ -117,6 +117,7 @@
                 <p class="font-weight-bold">{{ t('markdown_setting.Preset two separator') }}</p>
                 <div class="m-t-15">
                     {{ t('markdown_setting.Preset two separator desc') }}
+                    <input class="form-control" type="text" name="presetTwoSeparator" value="{{ t('markdown_setting.Preset two separator value') }}" readonly>
                 </div>
               </label>
           </div>

+ 3 - 3
src/server/views/admin/widget/theme-colorbox.html

@@ -1,7 +1,7 @@
 <div id="theme-option-{{name}}" class="theme-option-container d-flex flex-column align-items-center {% if name === settingForm['customize:theme'] %}active{% endif %}">
-  <a class="m-0" href="#"
-    class="{{name}}"
-    onclick="selectTheme('{{name}}')"
+  <a class="m-0 {{name}} theme-button"
+    id="{{name}}"
+    {% if 'kibela' !== settingForm['customize:layout'] %}onclick="selectTheme('{{name}}')"{% endif %}
     data-theme="{{ webpack_asset('styles/theme-' + name + '.css') }}">
 
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">

+ 2 - 0
src/server/views/customlayout-selector/forbidden.html

@@ -1,5 +1,7 @@
 {% if !layoutType() || 'crowi' === layoutType() %}
   {% include '../layout-crowi/forbidden.html' %}
+{% elseif !layoutType() || 'kibela' === layoutType()%}
+  {% include '../layout-kibela/forbidden.html' %}
 {% else %}
   {% include '../layout-growi/forbidden.html' %}
 {% endif %}

+ 2 - 0
src/server/views/customlayout-selector/not_found.html

@@ -1,5 +1,7 @@
 {% if !layoutType() || 'crowi' === layoutType() %}
   {% include '../layout-crowi/not_found.html' %}
+{% elseif !layoutType() || 'kibela' === layoutType()%}
+  {% include '../layout-kibela/not_found.html' %}
 {% else %}
   {% include '../layout-growi/not_found.html' %}
 {% endif %}

+ 2 - 0
src/server/views/customlayout-selector/page.html

@@ -1,5 +1,7 @@
 {% if !layoutType() || 'crowi' === layoutType() %}
   {% include '../layout-crowi/page.html' %}
+{% elseif !layoutType() || 'kibela' === layoutType()%}
+  {% include '../layout-kibela/page.html' %}
 {% else %}
   {% include '../layout-growi/page.html' %}
 {% endif %}

+ 2 - 0
src/server/views/customlayout-selector/page_list.html

@@ -1,5 +1,7 @@
 {% if !layoutType() || 'crowi' === layoutType() %}
   {% include '../layout-crowi/page_list.html' %}
+{% elseif !layoutType() || 'kibela' === layoutType()%}
+  {% include '../layout-kibela/page_list.html' %}
 {% else %}
   {% include '../layout-growi/page_list.html' %}
 {% endif %}

+ 2 - 0
src/server/views/customlayout-selector/user_page.html

@@ -1,5 +1,7 @@
 {% if !layoutType() || 'crowi' === layoutType() %}
   {% include '../layout-crowi/user_page.html' %}
+{% elseif !layoutType() || 'kibela' === layoutType()%}
+  {% include '../layout-kibela/user_page.html' %}
 {% else %}
   {% include '../layout-growi/user_page.html' %}
 {% endif %}

+ 34 - 0
src/server/views/layout-kibela/base/layout.html

@@ -0,0 +1,34 @@
+{% extends '../../layout/layout.html' %}
+
+{% block layout_main %}
+<div class="container-fluid">
+
+  <div class="row body m-0 p-0">
+
+    <div id="main" class="main col-md-7 col-xs-12 kibela-block bg-white m-t-30 round-corner {% if page %}{{ css.grant(page) }}{% endif %}{% block main_css_class %}{% endblock %}">
+      <div class="row bg-title">
+        <div class="col-xs-12 ">
+          {% block content_header %} {% endblock %}
+        </div>
+      </div>
+      <!-- /.bg-title -->
+
+      {% block content_main_before %}
+      {% endblock %}
+
+      {% block content_main %}
+      {% endblock content_main %}
+
+      {% block content_main_after%}
+      {% endblock %}
+    </div>
+
+  </div>
+
+</div>
+<!-- /.container-fluid -->
+
+<footer class="footer">
+  {% include '../../widget/system-version.html' %}
+</footer>
+{% endblock %} {# layout_main #}

+ 25 - 0
src/server/views/layout-kibela/forbidden.html

@@ -0,0 +1,25 @@
+{% extends 'base/layout.html' %}
+
+
+{% block content_header %}
+  {% include 'widget/header.html' %}
+{% endblock %}
+
+
+{% block content_main_before %}
+  {% include '../widget/page_alerts.html' %}
+{% endblock %}
+
+
+{% block content_main %}
+  <div class="row">
+    <div class="bg-white round-corner">
+      {% include '../widget/forbidden_content.html' %}
+    </div> {# /.col- #}
+  </div>
+{% endblock %}
+
+{% block body_end %}
+  <div id="crowi-modals">
+  </div>
+{% endblock %}

+ 29 - 0
src/server/views/layout-kibela/not_found.html

@@ -0,0 +1,29 @@
+{% extends 'base/layout.html' %}
+
+
+{% block content_header %}
+  {% include 'widget/header.html' %}
+{% endblock %}
+
+
+{% block content_main_before %}
+  {% include '../widget/page_alerts.html' %}
+{% endblock %}
+
+
+{% block content_main %}
+  <div class="row">
+    <div class="bg-white round-corner">
+      {% include '../widget/not_found_content.html' %}
+    </div> {# /.col- #}
+  </div>
+{% endblock %}
+
+{% block body_end %}
+  <div id="presentation-layer" class="fullscreen-layer">
+    <div id="presentation-container"></div>
+  </div>
+
+  <div id="crowi-modals">
+  </div>
+{% endblock %}

+ 60 - 0
src/server/views/layout-kibela/page.html

@@ -0,0 +1,60 @@
+{% extends 'base/layout.html' %}
+
+
+{% block content_header %}
+  {% include 'widget/header.html' %}
+{% endblock %}
+
+
+{% block content_main_before %}
+{% endblock %}
+
+
+{% block content_main %}
+<div class="row">
+
+  <div class="col-xs-12 bg-white round-corner">
+
+    {% include '../widget/page_content.html' %}
+    {# force remove #revision-toc from #content_main of parent #}
+    <script>
+      $('#revision-toc').remove();
+    </script>
+
+  </div> {# /.col- #} {# relocate #revision-toc #}
+  <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
+    <div id="revision-toc" class="revision-toc affix" data-spy="" data-offset-top="80">
+      <div id="revision-toc-content" class="revision-toc-content"></div>
+    </div>
+  </div> {# /.col- #}
+
+</div>
+
+  {% if 'growi' === behaviorType() || 'crowi-plus' === behaviorType() %}
+  <div class="row page-list p-t-10 m-t-30 m-b-30 round-corner">
+    <div class="col-md-10">
+      {% include '../widget/page_list_and_timeline.html' %}
+    </div>
+  </div>
+  {% endif %}
+{% endblock %}
+
+
+{% block content_main_after %}
+  {% include 'widget/comments.html' %}
+
+  {% if page %}
+    {% include '../widget/page_attachments.html' %}
+  {% endif %}
+{% endblock %}
+
+
+{% block body_end %}
+  <div id="presentation-layer" class="fullscreen-layer">
+    <div id="presentation-container"></div>
+  </div>
+
+  <div id="crowi-modals">
+    {% include '../widget/page_modals.html' %}
+  </div>
+{% endblock %}

+ 62 - 0
src/server/views/layout-kibela/page_list.html

@@ -0,0 +1,62 @@
+{% extends 'base/layout.html' %}
+
+{% block content_header %}
+ {% include 'widget/header.html' %}
+ {% endblock %}
+
+
+ {% block content_main_before%}
+ {% endblock %}
+
+ {% block content_main %}
+<div class="row page-content">
+
+
+  <div class="col-xs-12 bg-white round-corner">
+
+    {% include '../widget/page_content.html' %}
+
+  </div>
+
+
+  {# force remove #revision-toc from #content_main of parent #}
+      <script>
+        $('#revision-toc').remove();
+      </script>
+
+    </div> {# /.col- #}
+
+    {# relocate #revision-toc #}
+    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
+      <div id="revision-toc" class="revision-toc affix" data-spy="" data-offset-top="80">
+        <div id="revision-toc-content" class="revision-toc-content"></div>
+      </div>
+    </div> {# /.col- #}
+
+
+
+  <div class="row page-list bg-white round-corner p-t-10 m-20 m-b-30 {% if isPortal %}m-t-30{% endif %}">
+    <div class="col-xs-12">
+      {% include '../widget/page_list_and_timeline_kibela.html' %}
+    </div>
+  </div>
+{% endblock %}
+
+
+{% block content_footer %}
+  {% if page %}
+    {% include '../widget/page_attachments.html' %}
+  {% endif%}
+{% endblock %}
+
+
+{% block body_end %}
+<div id="presentation-layer" class="fullscreen-layer">
+  <div id="presentation-container"></div>
+</div>
+<div id="crowi-modals">
+  {% include '../widget/page_modals.html' %}
+    {% include '../modal/what_is_portal.html' %}
+  {% include '../modal/unportalize.html' %}
+</div>
+{% endblock %}

+ 67 - 0
src/server/views/layout-kibela/user_page.html

@@ -0,0 +1,67 @@
+{% extends 'page.html' %}
+
+{% block main_css_class %}
+  {% parent %}
+  user-page
+{% endblock %}
+
+{% block content_header %}
+  {% if pageUser %}
+    {% include '../widget/user_page_header.html' %}
+  {% else %}
+    {% parent %}
+  {% endif %}
+{% endblock %}
+
+
+{% block content_main %}
+  <div class="row pt-15">
+
+    <div class="col-xs-12 bg-white round-corner">
+
+      {#
+        # ensure to insert 'user_page_content' widget to here
+        #
+        #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
+        #   setting of 'revision-toc' (affix) is hindered.
+        #}
+      <div class="m-b-30 user-page-content-container">
+        {% include '../widget/user_page_content.html' %}
+      </div>
+
+      {% block content_main_before %}
+        {% parent %}
+      {% endblock %}
+
+      {% include '../widget/page_content.html' %}
+
+      {# force remove #revision-toc from #content_main of parent #}
+      <script>
+        $('#revision-toc').remove();
+      </script>
+
+    </div> {# /.col- #}
+
+    {# relocate #revision-toc #}
+    <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
+      <div id="revision-toc" class="revision-toc affix" data-spy="" data-offset-top="75">
+        <div id="revision-toc-content" class="revision-toc-content"></div>
+      </div>
+    </div> {# /.col- #}
+
+  </div>
+
+  {% if 'growi' === behaviorType() || 'crowi-plus' === behaviorType() %}
+  <div class="row page-list m-t-30">
+    <div class="col-xs-12">
+      {% include '../widget/page_list_and_timeline_kibela.html' %}
+    </div>
+  </div>
+  {% endif %}
+
+{% endblock %}
+
+
+{% block content_main_after %}
+  {% include 'widget/comments.html' %}
+{% endblock %}

+ 27 - 0
src/server/views/layout-kibela/widget/comments.html

@@ -0,0 +1,27 @@
+<div class="page-comments-row row">
+
+    <div class="page-comments">
+
+      <h4><i class="icon-fw icon-bubbles"></i> Comments</h4>
+
+      <div class="page-comments-list" id="page-comments-list">
+        {# transplanted to PageComments React component -- 2017.06.02 Yuki Takei
+        <div class="page-comments-list-newer collapse" id="page-comments-list-newer"></div>
+
+        <a class="page-comments-list-toggle-newer text-center" data-toggle="collapse" href="#page-comments-list-newer"><i class="ti-angle-double-up"></i> Comments for Newer Revision <i class="ti-angle-double-up"></i></a>
+
+        <div class="page-comments-list-current" id="page-comments-list-current"></div>
+
+        <a class="page-comments-list-toggle-older text-center" data-toggle="collapse" href="#page-comments-list-older"><i class="ti-angle-double-down"></i> Comments for Older Revision <i class="ti-angle-double-down"></i></a>
+
+        <div class="page-comments-list-older collapse in" id="page-comments-list-older"></div>
+        #}
+      </div>
+
+      {% if page and not page.isDeleted() %}
+      <div id="page-comment-write"></div>
+      {% endif %}
+
+    </div>
+</div>
+

+ 47 - 0
src/server/views/layout-kibela/widget/header.html

@@ -0,0 +1,47 @@
+<header id="page-header background-t">
+  <div class="d-flex align-items-center">
+    <div class="hidden-xs hidden-sm">
+      <a class="logo" href="/">
+        <div class="">{% include '../../widget/logo.html' %}</div>
+      </a>
+    </div>
+    <div class="title-container">
+      <h1 class="title" id="revision-path"></h1>
+      <div id="revision-url" class="url-line"></div>
+    </div>
+    {% if page %} {% include '../../widget/header-buttons.html' %}
+
+    <ul class="authors hidden-sm hidden-xs text-nowrap p-t-10">
+      <li>
+        <div class="d-flex align-items-center b">
+          <a class="m-r-5" href="{{ userPageRoot(page.creator) }}">
+            <img src="{{ page.creator|default(author)|picture }}" class="picture img-circle">
+          </a>
+          <div>
+            <div>Created by
+              <a href="{{ userPageRoot(page.creator) }}">{{ page.creator.name|default(author.name) }}</a>
+            </div>
+            <div class="text-muted">{{ page.createdAt|datetz('Y/m/d H:i:s') }}</div>
+          </div>
+        </div>
+      </li>
+      <li class="m-t-5">
+        <div class="d-flex align-items-center">
+          <a class="m-r-5" href="{{ userPageRoot(page.revision.author) }}">
+            <img src="{{ page.revision.author|default(author)|picture }}" class="picture img-circle">
+          </a>
+          <div>
+            <div>Updated by
+              <a href="{{ userPageRoot(page.revision.author) }}">{{ page.revision.author.name|default(author.name) }}</a>
+            </div>
+            <div class="text-muted">{{ page.updatedAt|datetz('Y/m/d H:i:s') }}</div>
+          </div>
+        </div>
+      </li>
+    </ul>
+    {% endif %} {% if not page and ('/' === path or 'crowi' === behaviorType()) and not isUserPageList(path) and !isTrashPage()
+    %} {% if '/' === path.slice(-1) %} {% include '../../widget/create_portal.html' %} {% endif %} {% endif %}
+
+  </div>
+
+</header>

+ 18 - 8
src/server/views/layout/layout.html

@@ -84,12 +84,22 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
 
   <!-- styles -->
   {% block style_css_block %}
-    {% if env === 'development' %}
-      <script src="{{ webpack_asset('styles/style.js') }}"></script>
-      <script src="{{ webpack_asset('styles/theme-' + theme() + '.js') }}"></script>
+    {% if 'kibela' === layoutType() %}
+      {% if env === 'development' %}
+        <script src="{{ webpack_asset('styles/style.js') }}"></script>
+        <script src="{{ webpack_asset('styles/theme-kibela.js') }}"></script>
+      {% else %}
+        <link rel="stylesheet" href="{{ webpack_asset('styles/style.css') }}">
+        <link rel="stylesheet" href="{{ webpack_asset('styles/theme-kibela.css') }}">
+      {% endif %}
     {% else %}
-      <link rel="stylesheet" href="{{ webpack_asset('styles/style.css') }}">
-      <link rel="stylesheet" href="{{ webpack_asset('styles/theme-' + theme() + '.css') }}">
+      {% if env === 'development' %}
+        <script src="{{ webpack_asset('styles/style.js') }}"></script>
+        <script src="{{ webpack_asset('styles/theme-' + theme() + '.js') }}"></script>
+      {% else %}
+        <link rel="stylesheet" href="{{ webpack_asset('styles/style.css') }}">
+        <link rel="stylesheet" href="{{ webpack_asset('styles/theme-' + theme() + '.css') }}">
+      {% endif %}
     {% endif %}
   {% endblock %}
 
@@ -117,7 +127,7 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
 {% block html_body %}
 <body
   class="main-container content-wrapper {% block html_base_css %}{% endblock %}
-      {% if !layoutType() || 'crowi' === layoutType() %}crowi{% else %}growi{% endif %}"
+      {% if !layoutType() || 'crowi' === layoutType() %}crowi{% elseif !layoutType() || 'kibela' === layoutType() %}kibela{% else %}growi{% endif %}"
   data-me="{{ user._id.toString() }}"
   data-is-admin="{{ user.admin }}"
   data-plugin-enabled="{{ isEnabledPlugins() }}"
@@ -178,13 +188,13 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
 
         {% if user %}
         <li class="nav-item-create-page">
-          <a href="#" data-target="#create-page" data-toggle="modal">
+          <a href="#" data-target="#create-page" data-toggle="modal" class="create-page">
             <i class="icon-pencil"></i><span>{{ t('New') }}</span>
           </a>
         </li>
         <li class="dropdown">
           <a class="dropdown-toggle waves-effect waves-light" data-toggle="dropdown">
-            <img src="{{ user|picture }}" class="picture img-circle" width="25" /> {{ user.name }}
+            <img src="{{ user|picture }}" class="picture img-circle" width="25" /> <span class="user-name">{{ user.name }}</span>
           </a>
           <ul class="dropdown-menu dropdown-menu-right">
             <li><a href="/user/{{ user.username }}"><i class="icon-fw icon-home"></i>{{ t('Home') }}</a></li>

+ 15 - 5
src/server/views/page_presentation.html

@@ -58,15 +58,25 @@ gh/highlightjs/cdn-release@9.12.0/build/languages/yaml.min.js
   <body>
     <div class="reveal">
       <div class="slides">
-        <section data-markdown data-separator="^\n\n\n">
-          <script type="text/template">
-{{ revision.body|presentation|safe }}
-
+        {% set pageBreakSeparator = pageBreakSeparator()|default(1) %}
+        {% set pageBreakCustomSeparator = pageBreakCustomSeparator()|default('') %}
 
+        {% if 1 === pageBreakSeparator %}
+          {% set dataSeparator = "^\n\n\n" %}
+        {% elseif 2 === pageBreakSeparator %}
+          {% set dataSeparator = "^-----$" %}
+        {% elseif 3 === pageBreakSeparator %}
+          {% set dataSeparator = "^" + pageBreakCustomSeparator + "$" %}
+        {% else %}
+          {% set dataSeparator = "^\n\n\n" %}
+        {% endif %}
 
-# おしまい
+        <section data-markdown data-separator={{dataSeparator}}>
+          <script type="text/template">
+{{ revision.body|presentation|safe }}
           </script>
         </section>
+        <section  data-markdown># おしまい</section>
       </div>
     </div>
 

+ 5 - 1
src/server/views/widget/page_content.html

@@ -14,7 +14,11 @@
 
   {% include 'page_alerts.html' %}
 
-  {% include 'page_tabs.html' %}
+  {% if !layoutType() || 'kibela' === layoutType() %}
+    {% include 'page_tabs_kibela.html' %}
+  {% else %}
+    {% include 'page_tabs.html' %}
+  {% endif %}
 
   <div class="tab-content">
 

+ 43 - 0
src/server/views/widget/page_list_and_timeline_kibela.html

@@ -0,0 +1,43 @@
+<div class="page-list-container">
+  <ul class="nav nav-tabs customtab">
+      <li class="active"><a href="#view-list" data-toggle="tab">{{ t('List View') }}</a></li>
+      {% if isEnabledTimeline() %}
+      <li><a href="#view-timeline" data-toggle="tab">{{ t('Timeline View') }}</a></li>
+      {% endif %}
+  </ul>
+
+  <div class="tab-content">
+    {# list view #}
+    <div class="p-t-10 active tab-pane fade page-list-container in" id="view-list">
+      {% if pages.length == 0 %}
+        <div class="m-t-10">
+          {% if isTrashPage() %}
+          No deleted pages.
+          {% else %}
+          There are no pages under <strong>{{ path }}</strong>.
+          {% endif %}
+        </div>
+      {% else %}
+        {% include 'page_list.html' with { pages: pages, pager: pager, viewConfig: viewConfig } %}
+      {% endif %}
+    </div>
+
+    {# timeline view #}
+    {% if isEnabledTimeline() %}
+    <div class="tab-pane m-t-30" id="view-timeline" data-shown=0>
+      {% for page in pages %}
+      <div class="timeline-body" id="id-{{ page.id }}" data-page-path="{{ page.path }}">
+        <div class="panel panel-timeline">
+          <div class="panel-heading"><a href="{{ page.path }}">{{ decodeURIComponent(page.path) }}</a></div>
+          <div class="panel-body">
+            <div class="revision-body wiki"></div>
+          </div>
+        </div>
+        <script type="text/template">{{ page.revision.body.toString() | encodeHTML }}</script>
+      </div>
+      <hr>
+      {% endfor %}
+    </div>
+    {% endif %}
+  </div>
+</div>

+ 97 - 0
src/server/views/widget/page_tabs_kibela.html

@@ -0,0 +1,97 @@
+{% if page %}
+<ul class="nav nav-tabs customtab hidden-print">
+
+  {#
+    Left Tabs
+  #}
+  <li class="nav-main-left-tab active">
+    <a href="#revision-body" data-toggle="tab">
+      <i class="icon-control-play"></i> View
+    </a>
+  </li>
+
+  {% if !isTrashPage() %}
+  <li class="nav-main-left-tab nav-tab-edit">
+    <a {% if user %}href="#edit" data-toggle="tab"{% endif %} class="edit-button {% if not user %}edit-button-disabled{% endif %}">
+      <i class="icon-note"></i> {{ t('Edit') }}
+    </a>
+  </li>
+  {% if isHackmdSetup() %}
+  <li class="nav-main-left-tab nav-tab-hackmd">
+    <a {% if user %}href="#hackmd" data-toggle="tab"{% endif %} class="{% if not user %}edit-button-disabled{% endif %}">
+      <i class="fa fa-file-text-o"></i> {{ t('HackMD') }}
+    </a>
+  </li>
+  {% endif %}
+  {% endif %}
+
+  {#
+    Right Tabs
+  #}
+  {% if !isTrashPage() %}
+    {% if isPortal %}
+    <li class="nav-main-right-tab dropdown pull-right">
+      <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
+        <i class="icon-options-vertical"></i>
+      </a>
+      <ul class="dropdown-menu">
+        <li><a href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a></li>
+        {% if ('/' !== path) %}
+        <li class="divider"></li>
+        <li><a href="#" data-target="#unportalize" data-toggle="modal"><i class="fa fa-share"></i> {{ t('Unportalize') }}</a></li>
+        {% endif %}
+      </ul>
+    </li>
+    {% else %}
+    <li class="nav-main-right-tab dropdown pull-right">
+      <a class="dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
+        <i class="icon-options-vertical"></i>
+      </a>
+      <ul class="dropdown-menu">
+        <li><a href="#" data-target="#renamePage" data-toggle="modal"><i class="icon-fw icon-action-redo"></i> {{ t('Move') }}</a></li>
+        <li><a href="#" data-target="#duplicatePage" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Duplicate') }}</a></li>
+        <li class="divider"></li>
+        <li><a href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a></li>
+        {% if isDeletablePage() %}
+        <li class="divider"></li>
+        <li><a href="#" data-target="#deletePage" data-toggle="modal"><i class="icon-fw icon-fire text-danger"></i> {{ t('Delete') }}</a></li>
+        {% endif %}
+      </ul>
+    </li>
+    {% endif %}
+  {% endif %}
+
+  <li class="nav-main-right-tab pull-right">
+    <a href="#revision-history" data-toggle="tab">
+      <i class="icon-layers"></i><span class="hidden-xs"> {{ t('History') }}</span>
+    </a>
+  </li>
+  {% if not isPortal %}
+    <li class="nav-main-right-tab pull-right">
+      <a href="?presentation=1" class="toggle-presentation">
+        <i class="icon-film"></i><span class="hidden-xs"> {{ t('Presentation Mode') }}</span>
+      </a>
+    </li>
+  {% endif %}
+
+</ul>
+
+{% else %} {# for creating portal #}
+
+<ul class="nav nav-tabs customtab nav-tabs-create-portal hidden-print">
+
+  <li class="nav-main-left-tab">
+    <a id="portal-form-close" href="#">
+      <i class="icon-action-undo"></i> {{ t('Cancel') }}
+    </a>
+  </li>
+
+  <li class="nav-main-left-tab active">
+    <a>
+      <i class="icon-note"></i> {{ t('Create') }}
+    </a>
+  </li>
+
+{% endif %}
+
+</ul>