/************* ACHTUNG: Diese Datei ist in UTF-8 gesetzt: Umlauttest: öäüßÖÄÜ */

@charset "utf-8";

/********************************************************/
/*********************** content.css ********************/
/********************************************************/

/* 
Inhaltsverzeichnis

    1. Allgemein 
      - Fonts
      - Formulare
      - tabs

    2. Startseite

    3. Inhalt aller Reiter, tabs
      - Inhalt/Kapitel (Übersicht, Kapitel bearbeiten)
      - Seitentitel
      - SIB
      - Banner
      - Eigenschaften
      - Kategorisierung
      - Rechte vergeben
      - Freigabe

    4. Templateeditor 
      - Übersicht
      - Template Detailansicht

    5. Stylesheets

    6. Iconverwaltung

    7. Formularfelder



______________________________________________________________
Styles für das Aussehen von Bearbeitungsseiten ohne 

  - den Hauptrahmen (siehe main.css)
  - den Bearbeitungskop (siehe edit_head.css)
  - grundsätzliche Styles für alle Bereiche (siehe basic.css)

*/


/*********************** 1. Allgemein  *****************************/

* {
  font-size: 12px;
  color: #000000;
  text-decoration: none;
}

ul {
    list-style-type: none; 
}

body {
    margin: 0;
    padding: 0;
/*  margin-left: 8px;
  margin-right: 8px;
  margin-top: 4px;
  margin-bottom: 4px;
*/
  background-color: #ffffff;
}
/*
body.nopad {
  padding: 0;
  margin: 0;
}*/

hr {
    color: #e0e0e0;
    background-color: #e0e0e0;
    border-color: #e0e0e0;
}

.actiondesc {
  font-weight: bold;
}

button.it-button.button-delete {
    color: #dc0702;
}

.headline {
  font-weight: bold;
}

.headline-big {
  font-size: 14px;
  font-weight: bold;
	
}

.infoitalic {
  font-style: italic;
  font-weight: normal;
}

.noperm {
  color: #999999;
}

.path {
  font-style: italic;
  color: #444444;
}

.small {
  font-size: 11px;
}

.message {
  font-weight: bold;
  color: #ef8500;
}

.warning {
    background: none repeat scroll 0 0 #efefef;
    color: #EC7406;
    margin-right: 0;
    opacity: 0.8;
    border:1px solid #ccc;
/* Diese Styles stören das Layout beim "inaktiv"-Text an Kapiteln
    font-size: 19px;
    position: absolute;
    width: 80%;
    height: 100%;
    padding: 50px;
    border:30px solid #ccc;
*/
}

.error {
  font-weight: bold;
  color: #dd4444;
}

/* Die detailierte Tab-Anweisung braucht man, damit die Reiter-Tabs
   im tinymce-Dialog die normale Farbe hat. */
a:link,
a, 
a:visited {
  color: #B22052;
  font-weight: bold;
}
a:hover {
  background-color: #FFFFFF;
}

img {
  border-style: none;
}

/* (bspw. hellgrau) hervorgehobene Tabelle, die GUI-Elemente
   zu einer Gruppe zusammenfasst. */
.group {
  background-color: #f1f1f1;
  border-width: 1px;
  border-style: solid !important;
  border-top-color: #EEEEEE;
  border-left-color: #EEEEEE;
  border-bottom-color: #CCCCCC;
  border-right-color: #CCCCCC;
}
.paddedgroup {
  padding:4px;
  background-color: #f1f1f1;
  border-width: 1px;
  border-style: solid !important;
  border-top-color: #EEEEEE;
  border-left-color: #EEEEEE;
  border-bottom-color: #CCCCCC;
  border-right-color: #CCCCCC;
}

tr.odd {
  vertical-align: top;
}
tr.even {
  background-color: #F3F2F2;
  vertical-align: top;
}
table.list tr td {
  padding: 1px 1px 1px 4px;
}

/* Tabellenzelle, die mit rotem Hintergrund und weisser
   Schrift, meist wohl zum Kennzeichnen von Loeschmarker
   Spalten benutzt. */
td.delete {
  font-size: 14px;
  font-weight: bold;
  background-color: #dd4444;
}

/* (bspw. hellgrau) hervorgehobener Head-Bereich einer Tabelle;
   um Hinweistexte zu Eingabefeldern auszugeben. */
.head {
  background-color: #ffffff;
  vertical-align: top;
  text-align: left;
  padding: 4px;
}

/* Das Gleiche wie ".head", nur mit fester Breite. */
.slimhead {
  background-color: #ffffff;
  width: 200px;
  vertical-align: top;
  text-align: left;
  padding: 4px;
}

/* (bspw. hellgrau) hervorgehobener linker Head-Bereich einer Tabelle;
   um Statustexte auszugeben. Momentan verwendet im install-Zweig
   beim Update-Tool. */
td.statushead {
  background-color: #EEEEEE;
}

/* (bspw. hellgrau) hervorgehobener obiger Head-Bereich einer Tabelle;
   um Spalten zu ueberschreiben */
th {
  background-color: #f1f1f1;
  border-width: 1px;
  border-style: solid;
  border-top-color: #EEEEEE;
  border-left-color: #EEEEEE;
  border-bottom-color: #CCCCCC;
  border-right-color: #CCCCCC;
}

/* Hoch/Runter-Pfeile neben Selectboxen, wie bspw. bei Kinderreihenfolge auf Seitentitel-Seite */
.arrows_topupdownbottom {
    margin-left: 1em;
    margin-right: 1em;
}

/*------------------------------------------------
   Styles für die Icon-Buttons. Sollte spaeter
   mit den normalen Buttons gleich realisiert werden.
------------------------------------------------*/
a.icon {
  display: block;
  color: #31309c;
  background-color: #f1f1f1;
  border-color: #EEEEEE #ABABAB #ABABAB #EEEEEE;
  border-width: 1px;
  border-style: solid;
  width: 26px;
  height: 18px;
  text-align: center;
  vertical-align: middle;
  padding-top: 1px;
}
a.icon:hover {
  color: #31309c;
  background-color: #eeeeee;
  font-weight: bold;
  border-color: #F6F6F6 #ABABAB #ABABAB #F6F6F6;
}
a.icon:active {
  border-color: #ABABAB #F6F6F6 #F6F6F6 #ABABAB;
}

/* Muss so hoch sein, wie die gesamte button_row (outerHeight) */
div.button_row_spacer {
    height: 75px;
}
div.button_row {
    position: fixed;
    bottom: 0px;
    background-color: #fff;
    left: 1px;
    right: 4px;
    z-index: 500;
}
div.button_row_inner {
    position: relative;
    background-color: #eee;
    padding: 8px 20px;
    border-radius: 0px;
    border: 0px solid #D3D3D3;
    width: 102%;
    box-shadow:1px 0 4px 2px #CCCCCC;
}
/* Unwichtigere Hilfsbuttons, die rechtsbuendig gesetzt werden */
div.button_row_aux {
    position: absolute;
    right: 30px;
    display: inline-block;
    
}
/* Benutzerbearbeiten (Zusatzinformation) hat Formular um Button. 
   Diese darf kein Padding/Margin haben. */
div.button_row form {
    margin: 0px;
    padding: 0px;
}
div.button_row form input {
    margin: 0px;
    padding: 0px;
}
span.button_row_message {
    display: block;
    background-color: #f1d530;
    padding: 4px;
    margin-bottom: 1em;
}
/* für Lock-Meldung in Kapitel-Bearbeiten-Maske in der button_row_message */
span.button_row_message span.warning {
    display: block;
    background-color: #f1d530;
    color: #000;
    padding: 4px;
    border: none;
}

/*********************** 2. Startseite  ****************************/
/* ---- Start/Willkommens-Seite --- */

body.welcome_page div.welcome_splash {
    margin: 50px auto 0;
    width: 772px;
    height: 560px;
}




/*********************** 3. Inhalt aller Reiter, tabs  *******************/

/*------------------------------------------------
   Styles für die Reiterkarten
   background-color nicht setzen, da bei den Eckbildern
   sowohl der innere wie der äussere Teil transparent ist
   und eingefärbt wird.
------------------------------------------------ */

/* ----- Seitentitel auf Bearbeitenseiten (wie Benutzerverwaltung, etc.) ----- */


div.page_title_path div.page_icon {
    display: inline-block;
}
div.page_title_path div.page_icon img {
    width: 25px;
    height: 25px;
    position: relative;
    top: 5px;
}
div.page_title_path div.page_title {
    display: inline-block;
    color: #6B6A6A;
    font-size: 18px;
    font-weight: normal;
}
div.page_title_path div.page_path {
    display: inline-block;
}
div.page_title_path div.page_action {
    display: inline-block;
    padding-left: 1em;
}
div.page_title_path div.page_title_path_end {
}


td.slimhead span.title {
    font-weight: bold;
}


/* ---- Chapter Overview, Kapitel-Übersicht --- */

body.access_editing,
body.archive_page,
body.download_editing,
body.chapter_editing,
body.chapter_overview,
body.classification_relations,
body.classification_search_folder,
body.external_link_editing,
body.mcat_relations,
body.address_freetext,
body.address_import,
body.address_category,
body.address_nlstats,
body.address_doistats,
body.page_copying,
body.page_deleting,
body.page_moving,
body.page_title_editing,
body.property_editing,
body.release_editing,
body.release_ml_subscribe,
body.staging,
body.template_sync,
body.common_cms_page /* Vielleicht umgeht man hiermit, jeder Seite eine spezielle class geben zu müssen. Außerdem nötig für custom.cms-Skripte */
{
  padding:30px 30px 0 30px;
}

/* Damit tinymce4 nicht rechts an den Rand klatscht, einfach der gesamten
   Seite ein Padding rechts geben. Alternativ könnte man auch nur dem 
   div.tinymce_wrapper das Padding geben */
body.chapter_editing {
    padding-right: 30px;
}


/* Das kleine Fensterchen, um Links in tinymce zu setzen */
body.editor_link_window.tinymce {
    padding: 20px;
}

body.editor_link_window div.inactive_tab,
body.editor_link_window div.active_tab {
    white-space: nowrap;
}

body.editor_link_window div.ext_link_hint {
    margin-bottom: 2ex;
}
body.editor_link_window div.ext_link_hint_header {
    font-weight: bold;
}

/* Wenn etwas mit tables layoutet wird (Kinderreihenfolge) sollen die Elemente nicht einrücken.*/
body.page_title_editing table {
    border-collapse: separate;
    border-spacing: 0 4px;
}


h1.page_edit_headline {
    font-size: 150%;
    margin-bottom: 20px;
    font-weight:normal;
}

/* ------------------ */

.template_icon_wrapper img#template_icon {
    width: 91px;
    height: 70px;
}

.template_icon_wrapper div.template_name {
    color: #aaa;
    font-size: 20px;
    position: absolute;
    right: 120px;
    top: 25px;
    display: none;
}

/* ------------------ */


/*********************** Inhalt: Kapitel-Übersicht  ***********************/

body.chapter_overview div#loading_splash {
    position: absolute;
/*    z-index: 600; */
    height: 100%;
    width: 100%;
    background-image: url("images/spinner.gif");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
}

body.chapter_overview div#loading_splash.page_loaded {
    display: none;
}

body.chapter_overview form#chapter_form {
    max-width: 100%;
}

body.chapter_overview div.no_template_defined {
    margin-bottom: 2em;
}

body.chapter_overview li.last_chapter_of_block {
}

body.chapter_overview li.chapter.empty_chapter_block {
/*    min-height: 20px; */
    border: none;
}

/* Wenn gar kein Kapitel vorhanden (die gesamte chapter_overview-Liste leer), mehr Margin, damit Kapitel-Lösch-Meldung nicht im Neu-Icon hängt */
ul#chapter_overview > li.empty_chapter_block {
/*    margin-top:80px; */
}

body.chapter_overview li.chapter.empty_chapter_block {
    margin-top: 46px;  /* Damit Neu-Aktion unten hinpasst */
    margin-bottom: 0px;  /* Damit Neu-Aktion unten hinpasst */
}

body.chapter_overview li.chapter.empty_chapter_block {
}

body.chapter_overview ul.chapter_list {
/*    padding-bottom: 20px; */
}

body.chapter_overview ul.sub_chapter_list {
    padding-left: 20px;
    padding-right: 20px;
}

body.chapter_overview li.chapter {
    position: relative; /* Um Neu-Aktion ausrichten zu können */
    border: 4px #ededed solid;
    margin-top: 46px;  /* Damit Neu-Aktion unten hinpasst */
    margin-bottom: 46px;  /* Damit Neu-Aktion unten hinpasst */
}

body.chapter_overview ul#chapter_overview > li.chapter {
    border-color: #dbdbdb;
}

body.chapter_overview ul#chapter_overview li.chapter.inactive {
    border-color: #ececec;
}
body.chapter_overview li.chapter.inactive > div.chapter_head {
    opacity: 0.5;
}
body.chapter_overview li.chapter.inactive > div.chapter_entry {
    opacity: 0.5;
}
body.chapter_overview li.chapter.inactive > ul.chapter_list {
    opacity: 0.5;
}

/* -- Neu-Aktion -- */
body.chapter_overview div.chapter_new {
    visibility: visible;
    opacity: 1;
    transition: opacity 1s linear;
    position: absolute;
    left: -9px;
    top: -40px;
}

body.chapter_overview div.chapter_new.at_list_end {
    position: absolute;
    left: -12px;
    top: auto;
    bottom: -40px;
}

/* -- Kapitel-Head -- */

body.chapter_overview div.chapter_button {
    font-size:75%;
/*     margin: 6px auto 0px auto; */
/*    width: 150px; */
    margin-left: 0px;
    padding: 0px;
}

body.chapter_overview div.chapter_button a {
    display: block;
    color:#555555;
    border: 1px solid transparent;
    font-size:10px;
    font-weight:normal;
    height: 26px;
}
body.chapter_overview div.chapter_button a:hover {
    border: 1px solid #c8c8c8;
}

body.chapter_overview div.chapter_button_icon {
    display: inline-block;
    width: 22px;
    height: 25px;
    background-size: 20px 20px;
    background-position: 1px 2px;
    background-repeat: no-repeat;
/*    margin: auto; */
}

/*
body.chapter_overview div.chapter_button div.chapter_button_icon_new {
    width: 22px;
    height: 26px;
    margin-left: 4px;
    background-size: 22px 22px;
}
*/

body.chapter_overview div.chapter_button.chapter_button_new a {
    border: none;
    display: inline-block;
    height: 26px;
    background-size: 22px 22px;
    background-position: 2px 3px;
    background-repeat: no-repeat;
    background-image: url(images/chapter_overview/chapter_new.svg);
    padding-left: 30px;
    padding-top: 7px;
}

body.chapter_overview div.chapter_head {
    background-color: #ededed;
    height: 38px;
    display: -webkit-flex;  /* für Safari */
    display: -ms-flexbox;   /* IE 10 */
    -ms-flex-align: stretch;
    -ms-flex-line-pack: stretch;
    display: flex;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Kapitel-Box auf oberster Ebene etwas dunkler */
body.chapter_overview ul#chapter_overview > li.chapter > div.chapter_head {
    background-color: #dbdbdb;
}
body.chapter_overview ul#chapter_overview > li.chapter > div.chapter_head span.chapter_title{
    color: #737373;
}

body.chapter_overview div.chapter_head img.chapter_template_icon {
    /*width: 45px; */ /* 91px */
    /*height: 35px; */ /* 70px */
    height: 24px;
    margin-top: 4px;
    width: 30px;
}

body.chapter_overview div.chapter_head div.chapter_template_icon_box a:hover {
    background-color: transparent;
}

body.chapter_overview div.chapter_head > * {
}

body.chapter_overview div.chapter_view_buttons {
    margin: 4px 16px 0px 4px;
    display: -webkit-flex;  /* für Safari */
    display: -ms-flexbox;   /* IE 10 */
    -ms-flex-align: stretch;
    -ms-flex-line-pack: stretch;
    display: flex;
}
body.chapter_overview div.chapter_view_buttons div.chapter_button_icon {
    height: 20px;
}
body.chapter_overview div.chapter_view_buttons a {
    height: 24px;
    border: 1px solid #c8c8c8;
}
body.chapter_overview div.chapter_head div.chapter_actions {
    background-color: inherit;
    display: -webkit-flex;  /* für Safari */
    display: -ms-flexbox;   /* IE 10 */
    -ms-flex-align: stretch;
    -ms-flex-line-pack: stretch;
    -ms-flex-direction: row-reverse;
    display: flex;
    flex-direction: row-reverse;
    padding-top: 4px;
}

body.chapter_overview div.chapter_head div.chapter_actions > * {
}

body.chapter_overview div.chapter_head span.chapter_title {
    display: inline-block;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    height: 30px;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: hidden;
    color: #888;
    font-size: 150%;
    -webkit-user-select: initial;
    -moz-user-select: initial;
    -ms-user-select: initial;
    user-select: initial;
}

body.chapter_overview ul.dragging {
    cursor: grabbing;
}

body.chapter_overview div.chapter_button_icon_clipboard_add {
    background-image: url(images/chapter_overview/chapter_clipboard_add.svg);
}

body.chapter_overview div.chapter_button_icon_clipboard_remove {
    background-image: url(images/chapter_overview/chapter_clipboard_remove.svg);
}

body.chapter_overview div.chapter_button_icon_edit {
    background-image: url(images/chapter_overview/chapter_edit.svg);
}
body.chapter_overview div.chapter_button_icon_edit_readonly {
    background-image: url(images/chapter_overview/chapter_edit_readonly.svg);
}

/*body.chapter_overview div.chapter_button_icon_delete {
    background-image: url(images/chapter_overview/chapter_delete.svg);
}*/

/*
body.chapter_overview div.chapter_button_icon_new {
    background-image: url(images/chapter_overview/chapter_new.svg);
}*/

body.chapter_overview div.chapter_button_icon_fold {
    background-image: url(images/chapter_overview/chapter_fold.svg);
}
body.chapter_overview li.chapter.folded > div.chapter_head div.chapter_button_icon_fold {
    background-image: url(images/chapter_overview/chapter_unfold.svg);
}

body.chapter_overview div.chapter_button_icon_shade {
    background-image: url(images/chapter_overview/chapter_shade.svg);
}
body.chapter_overview li.chapter.shaded > div.chapter_head div.chapter_button_icon_shade {
    background-image: url(images/chapter_overview/chapter_unshade.svg);
}


/* Kapitel löschen Schalter */
body.chapter_overview input.chapter_delete[type=checkbox] {
    display:none;
}

body.chapter_overview input.chapter_delete[type=checkbox] + label span {
    display: none;
}

body.chapter_overview input.chapter_delete[type=checkbox] + label {
    height: 25px;
    width: 25px;
    display:inline-block;
    border: 1px solid transparent;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: 1px 2px;
    background-size: 20px 20px;
    background-image: url(images/chapter_overview/chapter_delete.svg);
}

body.chapter_overview input.chapter_delete[type=checkbox]:checked + label {
    background-image: url(images/chapter_overview/chapter_delete_checked.svg);
}

body.chapter_overview input.chapter_delete[type=checkbox] + label:hover {
    background-color: #ffffff;
    border: 1px solid #c8c8c8;
}

/* Kapitel aktiv/inaktiv Schalter: aktiv */
body.chapter_overview div.chapter_active {
    position: relative;
    margin-top: 3px;
    margin-right: 10px;
}
body.chapter_overview div.chapter_active div.dim_toggle_text_left {
    background-color: #B6E1C2;
}
body.chapter_overview div.chapter_active div.dim_toggle_text_left span {
    color: #000000;
}

/* Kapitel aktiv/inaktiv Schalter: inaktiv */
body.chapter_overview div.chapter_active div.dim_toggle_text_right {
    background-color: #fd8391;
}
body.chapter_overview div.chapter_active div.dim_toggle_text_right span {
    color: #000000;
}

/* Kapitel sync/syncblocked Schalter */
body.chapter_overview input.sync_chapter_state[type=checkbox] {
    display:none;
}
 
body.chapter_overview input.sync_chapter_state[type=checkbox] + label {
    height: 25px;
    width: 25px;
    display:inline-block;
    margin-top: 1px;
    margin-right: 5px;
    padding: 0;
    background-repeat: no-repeat;
    background-position: 1px 2px;
    background-size: 20px 20px;
    background-image: url(images/chapter_overview/chapter_sync_disabled.svg);
    cursor: pointer;
    border: 1px solid transparent;
}

body.chapter_overview input.sync_chapter_state[type=checkbox]:checked + label {
    background-image: url(images/chapter_overview/chapter_sync_enabled.svg);
}

body.chapter_overview input.sync_chapter_state[type=checkbox] + label:hover {
    background-color: #ffffff;
    border: 1px solid #c8c8c8;
}

body.chapter_overview div.sync_active_state {
    display: inline-block;
    margin-top: 5px;
    margin-right: 11px;
    font-size: 9px;
    padding: 0 10px 0 10px;
    border: 2px solid #eeeeee;
    height: 2em;
    border-radius: 20px;
    box-shadow: 0 0 4px 1px rgba(50, 50, 50, 0.28);
}

body.chapter_overview div.sync_active_state.active {
    background-color: #B6E1C2;
}

body.chapter_overview div.sync_active_state.inactive {
    background-color: #fd8391;
}

/* -- Kapitel-Inhalt -- */

body.chapter_overview div.chapter_entry {
    min-height: 50px;
    clear: both;
    position: relative; /* Um den absolut positionierten chapter_abstract ausrichten zu können */
}

body.chapter_overview div.chapter_entry div.chapter_abstract {
/*    display: none; */
    position: absolute;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    width: 100%;
    height: 100%;
/*    max-height: 0px; */
/*    transition: max-height 0.4s linear 0;*/
}

body.chapter_overview div.chapter_entry div.chapter_abstract_inner {
    margin-top: 10px;
    margin-bottom: 16px;
    max-height: 32px;       /* Bei Extrem schmal zusammengeschobener Inhaltsseite soll Text nicht 
                                aus absolut positioniertem (mit fester Größe versehenen) Abstract herausragen.
                                Daher Höhe begrenzen und Rest mit overflow:hidden abschneiden */
    overflow: hidden;
}

/* Abstract anzeigen, wenn Kapitel-Inhalt zusammengeklappt */
/*
body.chapter_overview li.chapter.shaded > div.chapter_entry > div.chapter_abstract {
    max-height: 200px;
    transition: max-height 1s linear 0.2s;
}*/

body.chapter_overview div.chapter_content {
    background-color: #ffffff;
    padding:10px;
    margin-top: 0px;
/*    border:7px solid #efefef; */
/*    box-shadow:2px 6px 6px 3px #ccc; */
    cursor:pointer;
    overflow:hidden; /* falls aufgrund irgendwelcher HTML-Strukturen im Template/Kapitel Inhalte aus der Kapitel-Box herauslappen */
    min-width: 400px;
    position: relative; /* falls im Kapitel Dinge position:absolute positioniert werden, sollen sie nicht aus dem Kapitel rutschen */
}

body.chapter_overview td.chapter_content.editable {
    cursor: pointer;
    background:#efefef;
}


/* ueberdecken des iframes, damit dieses das Draggen nicht stoert */
body.chapter_overview div.chapter_iframe_cover {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

/* Cancel-Button nur im Move-Modus anzeigen */
body.chapter_overview button.button-with_icon {
    background-repeat: no-repeat;
    background-position: 2px 4px;
    background-size: 18px 18px;
    padding-left: 20px;
    padding-right: 6px;
}
/* damit die Buttons bei Klick nicht hin und her wackeln, padding-left ausgleichen. padding-right fuer 3d-Push-Effekt in chrome so setzen, wie in firefox */
body.chapter_overview button.button-with_icon:hover:active {
    padding-left: 21px;
    padding-right: 5px;
}

body.chapter_overview button.button-cancel {
}

body.chapter_overview button.button-toggle_fold_all {
    background-image: url(images/chapter_overview/chapter_fold.svg);
}
body.chapter_overview button.button-toggle_fold_all.folded {
    background-image: url(images/chapter_overview/chapter_unfold.svg);
}

body.chapter_overview button.button-toggle_shade_all {
    background-image: url(images/chapter_overview/chapter_shade.svg);
}
body.chapter_overview button.button-toggle_shade_all.shaded {
    background-image: url(images/chapter_overview/chapter_unshade.svg);
}

body.chapter_overview button.button-move_mode_turn_on {
    background-image: url(images/chapter_overview/chapter_drag.svg);
}
body.chapter_overview button.button-move_mode_turn_off {
    background-image: url(images/chapter_overview/chapter_drag_on.svg);
}

body.chapter_overview button.button-toggle_shade_all.button-disabled {
    display: none;
    opacity: 0.4;
}


/* Toggle all chapters Links in Button-Zeile */
/*
body.chapter_overview div#button_row_toggle_links {
    display: inline-block;
}
body.chapter_overview div#button_row_toggle_links > a {
    display: inline-block;
    margin-right: 8px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 18px 18px;
    padding-left: 20px;
}

body.chapter_overview div#button_row_toggle_links a.toggle_fold_all {
    background-image: url(images/chapter_overview/chapter_fold.svg);
}
body.chapter_overview div#button_row_toggle_links a.toggle_shade_all {
    background-image: url(images/chapter_overview/chapter_shade.svg);
}
*/

/* ---- jquery-Sortable Modul ----- */
body.chapter_overview ul#chapter_overview li.placeholder {
    position: relative;
    height: 20px;
    background-color: #ffeadd;
/*    background-color: #fff0a5;
    border: 1px solid #fed749; */
}

/* Die Drop-Zone, wo man ein Kapitel hinziehen darf. Gibt es nur bei Verwendung des jquery-ui scrollable Moduls */
body.chapter_overview li.placeholder.forbidden {
    background-color: #ff0000;
}

/* page-scroll-Zonen für Debug-Zwecke */
div#top_scroll_page, div#bottom_scroll_page {
/*    border: 1px solid red; */
}

body.chapter_overviewOFF ul#chapter_overview li.placeholder::before {
    position: absolute;

    content: url(images/chapter_overview/chapter_unshade.svg);

    /** Define arrowhead **/
    background-image: url(images/chapter_overview/chapter_fold.svg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 18px 18px;
    height: 2px;
}

/* ---- Chapter-Move-Modus in Kapitel-Übersicht ----- */

/* Den Shade-All Button wegnehmen, da er mit den im Move-Mode eh zuasmmengeklappten Inhalten konfliktet. */
body.chapter_overview.move_mode button.button-toggle_shade_all.button-enabled {
    display: none;
}

body.chapter_overview.move_mode button.button-toggle_shade_all.button-disabled {
    display: inline-block;
    opacity: 0.4;
    cursor: inherit;
}

body.chapter_overview.move_mode ul.chapter_list {
    padding-bottom: 20px; /* Padding, damit man hinter letztes Element besser (weniger frickelig) droppen kann */
}

/* Beim Draggen Kapitel näher zusammen rutschen lassen */
body.chapter_overview.move_mode ul li.chapter {
    margin-top: 10px;  /* Damit Neu-Aktion unten hinpasst */
    margin-bottom: 10px;  /* Damit Neu-Aktion unten hinpasst */
}

/* Animation für den Übergang zum Move-Modus*/
body.chapter_overview.move_mode div.chapter_content {
/*    transition: height 0.4s 0s ease-out; */
}

/*
body.chapter_overview.move_mode div.chapter_entry div.chapter_abstract {
    max-height: 200px;
    transition: max-height 1s linear 0.2s;
}*/

/* Neu Aktion abschalten */
body.chapter_overview.move_mode ul div.chapter_new {
    visibility: hidden;
    opacity: 0;
}

/* Ist Kapitelreihenfolge geändert worden, wird "order_modified" class gesetzt. Dann soll Neu-Aktion ausgeblendet werden */
body.chapter_overview ul#chapter_overview.order_modified div.chapter_new {
    display: none;
}

/* position:relative stört das Draggen. Da nur die Neu-Aktion diese verwendet,
   kann man position nun umschalten. */
body.chapter_overview.move_mode ul li.chapter {
    position: static;
}

/* Von den Kapitel-Aktions-Buttons den Edit-Button abschalten */
body.chapter_overview.move_mode ul div.chapter_actions > div.chapter_button_edit {
    display: none;
}
body.chapter_overview.move_mode ul div.chapter_button_shade {
    display: none;
}



/* Test: Kapitel-Content kleiner, damit man mehr Kapitel im Viewport hat */
body.chapter_overview ul div.chapter_content {
/*    transition: height 0.4s 0s ease-out; */
/*    height: 50px;  */
    padding: 20px;
    margin: 0px;
}

/* Den nicht dragbaren Seitentitel mit Icon versehen */
body.chapter_overview.move_mode div.chapter_head span.chapter_title {
    background-repeat: no-repeat;
    background-position: 0px 9px;
    background-size: 16px 16px;
    padding-left: 26px;
    margin-left: 10px;
    background-image: url(images/chapter_overview/chapter_drag.svg);
    cursor: move;
    cursor: grab; /* kann chrome nicht => fallback auf move */
}

/* die last_modifier Tabelle abschalten, damit sie nicht als move-Target (komischerweise!?) in die Quere kommt. */
body.chapter_overview.move_mode table.last_modified {
    display: none;
}


/* Das Kapitel, das gerade gezogen wird. */
body.chapter_overview ul li.chapter.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
    width: 500px !important;
/*    display: block !important; */
    height: 100px !important;
    margin: 0px !important;
/*    width:  100px !important; */
    overflow: hidden !important;
/*    border: 1px solid red; */
    border-color: #cecece;
    background-color: #fff;
}
body.chapter_overview ul li.chapter.dragged .chapter_head {
    background-color: #cecece;
}
body.chapter_overview ul li.chapter.dragged ul {
    display: none;
}

/* Die Drop-Zone, wo man ein Kapitel fallen lassen könnte */
body.chapter_overview .sortable_placeholder {
    height: 25px;
    background-color: #fff0a5;
    border: 1px solid #fed749;
}

/* Die Drop-Zone, wo man ein Kapitel hinziehen darf */
body.chapter_overview .sortable_placeholder.forbidden {
    background-color: #ff0000;
}

body.chapter_overview .ui-sortable-handle {
}

/* Cancel-Button */
body.chapter_overview.move_mode button.button-cancel {
}

/* Move-Mode-Button (Drag&Drop on/off) */
body.chapter_overview button.button-move_mode_turn_on {
    display: inline-block;
    width: 18ex;
}
body.chapter_overview button.button-move_mode_turn_off {
    display: none;
    width: 18ex;
}
body.chapter_overview.move_mode button.button-move_mode_turn_on {
    display: none;
}
body.chapter_overview.move_mode button.button-move_mode_turn_off {
    display: inline-block;
}


/* ---- Template-Auswahl bei Kapitel-Neu-Anlegen ---- */

body.chapter_overview div#ChooseTemplateDiv {
    display:none;
    position:absolute;
    width:98%;
    padding:0px 0px 0px 0px;
    background-color: #fff;
}

body.chapter_overview div#template_choice {
    padding: 4px;
}

body.chapter_overview div#end_of_template_choice {
    clear: both;
}

body.chapter_overview div#ChooseTemplateDiv div#inner_div_template {
}

body.chapter_overview div#ChooseTemplateDiv div#inner_div_clipboard {
    display:none;
}

body.chapter_overview div#ChooseTemplateDiv iframe#clipboard_iframe {
    width: 99%;
    height:100px;
    border-style: none;
}

/* -- Ein einzelner Template-Eintrag in dem Auswahlfenster -- */
body.chapter_overview  a.template_choice_element {
    display: inline-block;
    width: 300px;
    float: left;
    padding: 6px 6px 6px 6px;
    margin: 0 20px 0 0;
    border: 1px solid transparent;
}

body.chapter_overview a.template_choice_element img {
    width: 80px;
    max-height: 60px;
    float: left;
}

body.chapter_overview a.template_choice_element div.template_choice_text {
    margin-left: 90px;
    color: #666;
}

body.chapter_overview  a.template_choice_element:hover {
    background-color: #eee;
    border: 1px solid #ddd;
}

body.chapter_overview  a.template_choice_element:hover div.template_choice_text {
    color: #333;
}

/* ---- Clipboard/Merkliste Inhalt des iframes ----- */

body.clipboard_content div.chapter_content {
    position: relative;
    overflow: hidden;
}

/* ---- Chapter Editing, Kapitel-Editieren --- */

body.chapter_editing div.template_icon_wrapper {
    text-align: right;
    padding: 10px;
}
body.chapter_editing div.template_icon_wrapper img {
    max-width: 90px;
    max-height: 90px;
    position:absolute;
    right:10px;
    top:5px;
}

body.chapter_editing tr.LINKTEXT > td,
body.chapter_editing tr.LINKIMG > td,
body.chapter_editing tr.LINK > td
{
    padding-bottom: 3em;  /* Damit die Felder verschiedener Tags nicht so aneinander klatschen */
}

/* ---- tinymce 4 --- */


.mce-i-it_link:before {
    content: ""; /* Das Link-Icon aus den dashicon-Fonts */
}

button.mce-close {
    box-shadow: none;
}

.mce-window-head .mce-title {
    font-size: 15px;
}

.tinymce_wrapper {
    width: 640px;
}

.mce-btn button {
    box-shadow: none;
    height: 28px;
}


/* ---- Property Editing, Eigenschaften-Editieren --- */
body.property_editing table.property_new {
    margin-bottom: 2em;
}
body.property_editing table.property_list {
    margin-bottom: 2em;
}
body.property_editing td.property_name {
    width: 20em;
}

/* ---- MCat Relation Editing, Mcat-Zuordnungen-Editieren --- */

body.mcat_relations select.mcat_select_list {
    min-width: 20em;
}
body.mcat_relations table.mcat_list_box {
    width: 100%;
    border: 2px solid #eee;
}
body.mcat_relations tr.mcat_list_title {
    width: 100%;
}

/* ---- DataCenter: Freifelder Editieren --- */

body.address_freetext .td_type_box.fixedcol5 {
    vertical-align: top;
}


/* ---- DataCenter: Flashbuch öffnen --- */

body.fmcrm_start a.flash_button {
    background-image: url(images/crm/fmcrm_start_button.png);
    background-repeat: no-repeat;
    width: 360px;
    height: 80px;
    display: block;
    outline: 0;
    position: absolute;
    right:0;
}

body.fmcrm_start a.flash_button:hover {
    background-image: url(images/crm/fmcrm_start_button_hover.png);
    background-color: transparent;
}

body.fmcrm_start a.flash_button:active {
    background-image: url(images/crm/fmcrm_start_button_pushed.png);
}
    
body.fmcrm_start a.old_book {
    display: block;
    position: absolute;
    right: 2px;
    bottom: 2px;
    height: 2em;
    width: 2em;
    outline: 0;
}
    
body.fmcrm_start div.preload {
    position: absolute;
    left: -20000px;
}
body.fmcrm_start div.preload.button_hover {
    background-image: url(images/crm/fmcrm_start_button_hover.png);
}
body.fmcrm_start div.preload.button_active {
    background-image: url(images/crm/fmcrm_start_button_pushed.png);
}

/* ---- Tabelle/Div, die den Inhalt eines Reiters umrandet---- */
.reiter {
  border-left: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  border-bottom: 1px solid #CCCCCC;
  margin-right: 10px;
    width:100%;
}
table.reiter > tr > td {
  vertical-align: top;
}

.chapter_overview table.reiter tr tr {border-bottom:1px solid #ccc;}

table.tab {
  margin: 0px;
  padding: 0px;
  border-spacing: 0px;
/*  margin-right: 10px; fuehrt zu nicht mehr durchgezogenem Strich unter Reitern */
}
table.tab td {
  vertical-align: bottom;
  padding: 0px;
  margin: 0px;
}
table.tab div.close_gadget {
    background-image: url(images/component/tabs/close_gadget.png);
    background-size: 15px 16px;
    width: 15px;
    height: 16px;
    margin-bottom: 4px;
    cursor: pointer;
}
div.active_tab {
  border-top: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  padding: 6px 6px 2px 6px;
  font-weight: bold;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
div.inactive_tab {
  border-top: 1px solid #CCCCCC;
  border-left: 1px solid #CCCCCC;
  border-right: 1px solid #CCCCCC;
  border-bottom: 1px solid #ccc;
  padding: 3px 6px 2px 6px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
table.tab td.fill_tab_bar {
  border-bottom: 1px solid #CCCCCC;
  width: 100%;
}
table.tab td.before_first_tab {
  border-bottom: 1px solid #CCCCCC;
  padding-left: 6px;
  padding-right: 6px;
}

table.tab a {color:#888;}

table.reiter td.head a {
    color:#555;
    float: left;
    font-size: 15px;
    font-weight: normal;
    padding-top:15px;
  }

  table.reiter td.head input {float:right;}

table.reiter a img {height:54px;width:70px;}
table.reiter a {color:#777; font-size:15px;font-weight:normal;}
/*------------------------------------------------
  eingerahmte Spaltenüberschrift, alternativ zu <th>
------------------------------------------------*/
.table_head_col {
  border: 1px solid black;
  background-color: #dddddd;
}

/*------------------------------------------------
  Auf custom-Seite genutzt
------------------------------------------------*/
.versteckt { 
  position:absolute;
  left:-999em;
}

/*------------------------------------------------
  Ermöglicht die erzwungene Anzeige im CMS
------------------------------------------------*/
.force_cms_display_block {
  display: block !important;
}

.force_cms_display_inline {
  display: inline !important;
}

/*------------------------------------------------
  Styles für Tagparser-Ausgaben (Kapitel-Bearbeiten)
------------------------------------------------*/
.tagparser_grouptag td {
    padding-top: 2em;
}
.tagparser_grouptag h1 {
    font-size: 110%;
}

/*------------------------------------------------
  Styles für preview-Tag (sortable)
------------------------------------------------*/
ul.tag_preview_result_list {
    list-style-type: none; 
    margin: 0; 
    padding: 0;
}
ul.tag_preview_result_list.sortable li {
    cursor: move;
}
ul.tag_preview_result_list li {
    background-color: #F6F6F6;
    border: 1px solid #ccc;
    min-height: 4em;
    margin-bottom: 3px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 4px;
}
ul.tag_preview_result_list li.previewtag_drop_highlight {
    background-color: #fff0a5;
    border: 1px solid #fed749;
}


/*********************** 4. Templateeditor  ***********************/

body.ted_overview,
body.ted_editing {
    padding: 10px;
}

img.template_icon {width:59px; height:50px;}

body.ted_overview div#pending_imports_header {
    border: 1px solid #999999;
    margin-bottom: 1em;
    margin-left: 2em;
    margin-right: 2em;
    padding: 1em;
}

body.ted_overview select {width: 200px;}
body.ted_overview input[type="button"] {box-shadow:none;}

span.template_label {font-size:10px;display:block;color:#666;}

td.title_box input {float:right;margin:0 10px 0 0px;}
td.title_box, td.icon_box {background:#f6f6f6;}

body.template_sync div.tmpl_pic_div img {
    max-width: 50px;
    max-height: 40px;
}

/*********************** 5. Stylesheets  ***************************/


/*********************** 6. Iconverwaltung  ***********************/


/*********************** 7. Neue Seite (new_page_choice)  ***********************/

body.new_page_choice table a {
  color:#777;
  font-size:14px;
  font-weight:normal;
  margin:0 0 0 5px;
}

body.new_page_choice table table tr {
    display: block;
    margin: 0 0 7px;
}


body.new_page_choice select {width:250px;}

body.new_page_choice img {height:25px;}


/*********************** 8. Benutzerverwaltung  ***********************/

.user_language_choice select {
    min-width: 10em;
}
td.user_language_choice_buttons {
    padding-left: 10px;
    padding-right: 10px;
}

body.user_role_editing li {
    margin-bottom: 1ex;
}