/*!
 * Wagn: [[http://wagn.org]]
 * Copyright 2015 Grass Commons and other contributors; Licensed GPL
 */

/*
This minimal CSS is needed for basic Wagn functionality.

Without the following, menus will be barely usable, "closed" view will not appear on one line,
and certain hidden information will show up.

Note that this CSS is taken from code so that it will be updated automatically with releases.
If you don't want certain rules, you may:
  (a) override them, or
  (b) choose not to include this card in your Skin

Choosing (b) will mean your CSS will not be affected by automated updates.
*/

/* -- resets -- */

.card-frame,
.card-body,
.ALL {
  overflow: inherit;
  white-space: normal;
}

/* NOTE: we recommend against styling ".card-slot", which is heavily used by javascript */


/* --  hidden info -- */

.ui-loader,
.card-notice,
.new-current-revision-id,
.editor .revision-navigation,
.editor .autosave-alert,
.edit_name-view .alert,
.btn.renamer-updater,
.confirm_update_all-view,
.follow-updater,
.admin-error-message,
.labeled-view .card-menu-link {
  display: none
}


/* -- card-headers and menus--*/
.card-header {
  .card-header-title {
    display: inline-block;
    overflow: hidden;
    span.header-icon {
      margin: 0px 5px;
    }
  }
  .toggler {
    display: inline-block;
    position: relative;
  }
}

.menu-slot {
  width:100%;
  position: relative;

  span.menu-item-label {
    margin-left: 5px;
  }

  .card-menu {
    position: absolute;
    right: 5px;
    top: 3px;
    li {
      white-space: nowrap;
      text-align: left;
      a {
        color: #333;
      }
    }
    .dropdown-menu {
      right: -2px;
      top: 18px;
      min-width: 110px;
    }
    .dropdown-menu:before {
      content: "";
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid white;
      position: absolute;
      top: -5px;
      right: 2px;
    }
  }

  .vertical-card-menu .dropdown-menu {
    z-index: 2;
  }

  .horizontal-card-menu {
    z-index: 1;
    li {
      height: 30px;
    }
    .btn {
      padding: 6px 12px;
    }
  }
}

.card-header-title {
  margin-right: 3px;
}


.dropdown-menu {
  z-index: 1005;
}

.navbar.toolbar {
  margin-bottom: 0;
}

.toolbar {
  .navbar-text span.glyphicon, span.menu-item-label {
    margin-left: 5px;
  }
}


/*-- closed and labeled views --*/

.closed-view {
  position: relative;
  > .card-frame {
    white-space: nowrap !important;
    padding-right: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    position: static;
  }
  .card-menu.btn-group {
    display: none;
  }
  .card-header {
    display: inline-block;
  }
}
.closed-content {
  display: inline;
  white-space: nowrap !important;

  table, thead, tbody, tr, th, td, p, h1, h2, h3, h4, h5, h6, ul, li, pre, ol, div, span, a, blockquote, img, label, i {
    display: inline !important;
    white-space: nowrap !important;
    float: none !important;
  }
  br, hr, input, textarea, object, :after, :before {
    display: none !important;
  }
}

.labeled-view:hover .card-menu {
  display: inline-block;
}

/* -- change view --*/

.change-view {
  clear: both;
  .last-update {
    float:right;
    text-align: right;
    a {
      white-space: nowrap;
    }
  }
}



/* -- template-editor (editing template rule inclusions inline) -- */

.template_editor-view > div {
  float: left;
}
.template-editor-close {
  float: right;
}
.template_link-view {
  display: inline;
}


.navbox-item-label {
  float: left;
  position: relative;
}


/*-- misc --*/
.card-editor {
  white-space: normal;
  padding-bottom: 15px;
}
pre,
.TYPE-plain_text.card-content,
.SELF-Xhead.card-content {
  white-space: pre-wrap;       /* css-3 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
.missing-view a {
  display: inline;
}

.SELF-Xstat > .card-content {
  table {
    width: 100%;
  }
  tr:nth-child(even) {
    background: #eee;
  }
}


/*
The below provides styles for aspects of wagn sites not usually prioritized by skin designers.

It includes basic styling for:

  1. wagneer interface (sets, settings, rules)
  2. editor interface (forms, fieldsets, menus, navbox, history)
  3. views that by definition alter default styling (closed, labeled)
  4. errors / warnings / notices
  5. key default content for new installs (home page, sidebar)

Most colors are greyscale; any that aren't are explained with comments beginning with "NOTGREY"

Note that this CSS is taken from code so that it will be updated automatically with releases.
If you don't want certain rules, you may (a) override them, or (b) choose not to include this card
in your skin.  Choosing (b) will mean your CSS will not be affected by automated updates.
*/

/* -- resets -- */

.card-frame {
  text-align: left;
  font-weight: normal;
  font-style: normal;
}


/*-------------------- */
/*- DYNAMIC ELEMENTS - */
/*-------------------- */


/* related view (used by many menu items, such as "referred to by")  */

.related-view {
  > .card-frame, & {
    > .card-body  {
      background: #bbb;
      padding: 35px 5px 5px 5px;
      > .ALL  {
        background: #fff;
        > .card-header {
          background: #ddd;
          padding: 5px;
          color: #000;
        }
        > .card-body {
          padding: 8px 2%;
        }
      }
    }
    > a.close-related-view {
      color: inherit;
      margin-right: 5px;
      margin-top: 5px;
    }
  }
}

/* navboxes */

.navbox-item-label {
  font-size: 10px;
  width: 50px;
  padding: 3px 0 3px 5px;
}

.ui-menu-item {
  .glyphicon {
    float: left;
    font-size: 10px;
    padding: 3px 0 3px 0px;
  }
}




/*-------------------- */
/*- ONE-LINE VIEWS   - */
/*-------------------- */

.closed-view.panel {
  margin: 0;
  width: 100%;
}
.closed-content {
  table, tbody, tr, th, td, p, h1, h2, h3, h4, h5, h6, ul, li, pre, ol, div, span, a, blockquote, img {
    font-size: 1em !important;
    margin: 0 6px 0 0;
    padding: 0 !important;
    border:  0 !important;
  }
  a {
    margin: 0;
  }
  img {
    max-height: 1em;
    width: auto;
  }
}


.labeled-view {
  padding: 5px 0;
  label h1,
  .pointer-list,
  .pointer-item,
  .search-result-list,
  .search-result-item {
    font-size: 1em;
  }
  > .card-content {
    padding-left: 10px;
  }
}

.labeled-view label,
a.missing-labeled {
  display: inline-block;
  min-width: 30%;
  text-align: right;
}

/*-------------------- */
/*- EDIT INTERFACE   - */
/*-------------------- */

textarea,
.content-editor > input[type=text],
.content-editor > input[type=password],
.name-editor input {
  width: 97.5%;
}
/* width + padding = 99.5%, which leaves 0.5% for the borders.  This is imprecise, but borders can't be specified as a percentage */

textarea {
  max-height: 500px;
}
.name-editor.known-name input {
  border: 3px solid #c22; /* NOTGREY - red for warning */
}
.name-messages {
  font-style: italic;
  background: #ffd;  /* NOTGREY - yellow for highlighting */
}

/* -- template-editor (editing template rule inclusions inline) -- */

.template-editor-main {
  width: 85%;
}
.template-editor-left,
.template-editor-right {
  width: 5%;
  text-align: center;
  font-size: 3em;
  line-height: 2em;
  white-space: nowrap;
}



.pointer-list-editor {
  margin: 0px;
  padding: 0px;
  input {
    margin-right: 10px;
    width: 65%;
  }
  li {
    list-style: none;
    white-space: nowrap;
  }
  .pointer-item-delete {
    margin-left: 4px;
    vertical-align: middle;
    display: inline-block;
    position: relative;
  }

  .pointer-item-add {
    margin-top: 10px;
  }

  .input-group-addon.handle {
    padding-left: 1px;
    padding-right: 1px;

    .glyphicon-option-vertical.left {
      margin-right: -7px;
    }
    .glyphicon-option-vertical.right {
      margin-left: -7px;
    }
  }
}

.new-account-link {
  text-align: center;
}

/* links to create missing cards */

.missing-view a {
  color: #999;
  font-variant: small-caps;
}

.missing-view a:hover {
  color: #069;
  background: #ffc;
}

/*-------------------- */
/*- SEARCH & POINTER - */
/*-------------------- */


div.pointer-list,
div.search-result-list {
  list-style: none;
  padding: 5px 0;
  margin: 0;
  .closed-view > .card-frame {
    margin-bottom: 0;
  }
}
div.pointer-list .pointer-item,
div.search-result-list .search-result-item {
  margin: 0;
}
.search-result-item.item-link,
.pointer-item.item-link,
.search-result-item.item-name,
.pointer-item.item-name {
  text-indent: -15px;
  padding-left: 15px;
}
.radio-option-description,
.checkbox-option-description {
  margin-left: 40px;
}

ul.pointer {
  margin: 0px;
  padding: 0px;
}

/*-------------------- */
/*- HISTORY          - */
/*-------------------- */



$diff-green: #41ad41;
$diff-red: #ff5050;
$action-white: #fdfdfd;
$act-gray:  #b7b7b7;

.history-slot {
  overflow: hidden;
  clear: both;
}

.history-header {
  padding: 10px;
  background: $action-white;
}
.history-legend {
  text-align: right;
}
.history-header nav.pagination {
  display: inline;
  float: left;
}

.act {
  .head {
    float: left;
    margin-right:10px;
    min-width: 175px;
  }
  .nr {
    float: left;
  }
  .title {
    float: left;
    margin-left: 10px;
  }
  .actor {
    float: left;
  }
  .time {
    font-size: 8pt;
    float:left;
    clear:left;
  }

  .action-container {
    overflow: hidden;
  }
  .action {
    background-color: $action-white;
    margin: 5px 5px 2px 2px;
    padding: 6px 5px 6px 5px;
    overflow: hidden;
  }
  .ampel {
    margin: 2px 0 0 4px;
  }
  .arrow {
    margin: 0px 10px 0px 10px;
    color: green;
  }
  .toggle {
    float: right;
    margin: 12px 10px 0px 10px;
    width: 20px;
  }
/*
  .name-diff {
    color: #000;
    border-style: solid;
    border-width: 1px;
    border-color: #E4E4E4;
    padding: 3px 8px 3px 8px;
    background-color: #EEEEEE;
    margin-left: 3px;
  }
*/
  .type-diff {
    padding: 1px 0px 1px 3px;
  }
  .content-diff {
    overflow: hidden;
  }

  .action {
    .expanded {
      clear:left;
      padding: 14px 10px 14px 24px;
    }
    .summary {
      padding: 6px 0px;
    }
  }

  .arrow-down {
  	width: 0;
  	height: 0;
  	border-left: 7px solid transparent;
  	border-right: 7px solid transparent;
  	border-top: 11px solid $act-gray;
    display: block;
  }
  .arrow-right {
  	width: 0;
  	height: 0;
  	border-top: 7px solid transparent;
  	border-bottom: 7px solid transparent;
  	border-left: 11px solid $act-gray;
    display: block;
  }
  .info {
    font-style: italic;
  }
}

.diff-red {
  text-decoration: line-through;
  color: $diff-red;
}
.diff-green {
    color: $diff-green;
}
.diff-invisible {
  color: $action-white;
}

.diff-green,.diff-invisible{
  text-decoration: none;
}



/*-------------------- */
/*- ERRORS / NOTICES - */
/*-------------------- */

/* FIXME - following should be consolidated / simplified */

.exception p {
  margin: 15px;
}
.errors-view {
  margin: 10px;
  padding: 10px;
  border: 3px solid #966;   /* NOTGREY - red for error */
  background: #ffa;         /* NOTGREY - yellow for highlighting */
  border-radius: 8px;
  -moz-border-radius: 8px;
  border: 1px solid #777;
  border-bottom: 2px solid #888;
  border-right: 2px solid #888;
  color: #333;
}

.card-notice {
  background: #fff;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  margin: 0 0 4px 0;
}


#credit, /* these are both deprecated */
.flash-notice {
  color: #333;
  font-size: 1.1em;
  background: #fff;
  border: 1px solid #888;
  margin-bottom: 15px;
  padding: 5px;
  text-align: center;
}


.conflict-view {
  text-align: left;
  border: 1px solid grey;
  padding: 10px;
  margin-top: 12px;
}


/*-------------------------- */
/*- KEY DEFAULT CONTENT    - */
/*-------------------------- */

.SELF-home-original.card-content {
  ul {
    list-style-type: none;
    margin: 1em;
    padding: 0;
  }
  li {
    padding: .8em;
    margin: 0;
    background: #eee
  }
  li:nth-child(even) {
    background: #ddd;
  }
  aside {
    float: right;
    border: 1px solid #999;
    background: white;
    width: 33%;
    padding: 1em;
    margin: 36px 16px 2px 5px;
    overflow: auto;
    border-radius: 18px;
    -moz-border-radius: 18px;
    text-align: center;
    h2 {
      font-size: .9em;
      padding: 0;
      margin: 5px;
    }
    p {
      font-size: .8em;
    }
  }
}


.SELF-wagneer_menu.card-content {
  > p {
    margin-left: 6%;
    text-indent: -6%;
  }
}



/*-------------------------- */
/*- SETS, SETTINGS, RULES  - */
/*-------------------------- */


.setting-rules,
.set-rules {
  width: 100%;
}
.setting-rules th,
.set-rules th {
  background: #aaa;
  color: #eee;
  padding: 5px 0;
}
.setting-rules th,
.setting-rules td,
.set-rules th,
.set-rules td.rule-cell {
  text-align: left;
  padding: 2px 5px;
}
.set-rules th,
.set-rules td.rule-cell {
  border-bottom: 1px solid #eee;
}
.setting-klass,
.rule-setting {
  font-weight: bold;
}
td.rule-setting {
  width: 30%;
}
.rule-set {
  color: #666;
  white-space: nowrap;
}
.rule-type-field {
  max-width: 70%;
  margin-right: 5px;
}
.closed-rule {
  height: 30px;
  td {
    vertical-align: middle;
  }
  .rule-content {
    width: 350px;
  }
}

.rule-content-container {
  max-width: 350px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: inherit;
  background: inherit;
  white-space: nowrap;
}
.rule-content-container {
  .closed-content,
  .closed-content .pointer-list,
  .closed-content .search-list {
    margin: 0;
  }
}
td.missing-rule {
  background-color: #eee;
  border-bottom: 1px solid #fff;
}
.rule-setting {
  padding-top: 4px;
}
.open-rule > .rule-setting {
  width: 28%;
  float: left;
}
.open-rule .card-body {
  clear: both;
}
.open-rule .rule-instruction {
  float: right;
  text-align: left;
  max-width: 68%;
}
.edit-rule {
  .set-editor {
    ul {
      list-style-type: none;
    }
    .current-set-label {
      font-weight: bold;
    }
  }
  .edit-button-area {
    clear: both;
    padding-top: 5px;
  }
}
.attention {
  border: 3px solid red;
}
.rule-delete-section {
  float: right;
}
.show-rule .rule-set {
  margin-bottom: 10px;
}
.klass-row {
  background: #eee;
  border-top: 1px solid #ddd;
}
tr.rule-changeover td {
  border-top: 1px solid #eee;
  padding-top: 5px;
}
td.rule-anchor {
  padding-left: 30px;
}
a.setting-link {
  font-style: italic;
  margin-left: 2%;
  font-weight: normal;
  color: #000;
  white-space: nowrap;
}
h2.set-label {
  padding-bottom: 10px;
}

.TYPE_PLUS_RIGHT-user-Xfollow .tab-pane {
  margin-top: 15px;
}

/*------- permissions ------------------*/

.perm-section {
  margin-bottom: 20px;
}
.perm-section h5 {
  margin: 0 0 10px 0;
}

/*-------------------------- */
/*- MISCELLANEOUS          - */
/*-------------------------- */

.ui-menu-icons .ui-menu-item a {
	padding-left: 0;
}

.ui-icon {
  background-image: url([[/assets/smoothness/ui-icons_454545_256x240.png]])
}


table.show-cache td {
  padding: 10px;
  border: 1px solid grey;
}

/* note said this is o non-ie browsers do better with image floats.  looks over-specified.
html>body .open-view {
  width: auto;
}
*/

/* the following classes are here because they're scheduled for deprecation */
.faint {
  color: #bbc;
}
.VIEW-type {
  font-style: italic;
  font-size: .85em;
}