/********************************************************/
/*********************** main.css ***********************/
/********************************************************/

/* 
Inhaltsverzeichnis
    1. Grundstruktur CMS, Layoutgerüst
        - body, container, header, main

    2. Kopfzeile, Header
        - Logo, 
        - Abmelden 
        - Benutzername


    3. Klappmenü, Akkordion

        - Allgemein: Sprachwahl, Reload
        - treeview
        - Search, Suche
        - Bookmark
        - Central Editing, zentrale Inhalte
        - Administration


    4. Login
        - Startseite Login
        - Loginlayer
*/


/*********************** 1. Grundstruktur CMS ***********************/


html, body.main {
    height: 100%;
    width: 100%;
    margin: 0;
}

body {
  background: url(images/login/bg_top.png) repeat-x 0 0;
  background-color:#ffffff;
}

body.main div#logo {
    width: 300px;
    height: 36px;
    float: left;
    cursor:pointer;
}

div#container {
//    border: 0px solid red;
    background-color: transparent;
    height: 100%;
    width: 100%;
    position: relative;
}

div#header {
    height: 38px;
    width: 100%;
    background-color: transparent;
}
div#inner_header {
    height: 36px;
    width: 100%;
//    background-image: -webkit-linear-gradient(top, #ffffff 22%, #C5C5C5 138%); 
//    background-image: -moz-linear-gradient(top, #ffffff 22%, #C5C5C5 138%); 
//    background-image: -o-linear-gradient(top, #ffffff 22%, #C5C5C5 138%);
//    background-color: linear-gradient(top, #ffffff 22%, #C5C5C5 138%);
//    box-shadow: 0px 1px 5px 2px #999;
}

div#main {
    position: absolute;
    top: 47px;
    bottom: 0px;
    width: 100%;
    overflow: hidden;
}



div#left-sidebar {
    height: 99.4%;
    width: 400px;
    padding-right: 4px;
/*   background-color: red; */
    float: left;
}

/* der Resize-Handler */

div#left-sidebar div.ui-resizable-handle {
    background-color: #ffffff;
    vertical-align: middle;
}
div#left-sidebar div.ui-resizable-handle div.resizable-inner-handle {
    position: absolute;
    top:45%;
    width: 5px;
    height: 100px;
    background:url(images/resize.png) no-repeat 0 0;
}

/* Die Box, die während des Resizens angezeigt wird. */
/*
.left-sidebar-resizable-helper {
    border: 1px solid red;
}*/

div#content {
    float: right;
    display: inline-block;
    position: relative;
    height: 100%;
/*   width: 600px;
    margin-left: 300px;
    background-color: blue; */
}

/*    div#last_in_main {
    clear: both;
} */

/*
div#footer {
    position: absolute;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background-color: #666;
}*/

/*********************** 2. Header ***********************/

div#header div#login_name {
    display: block;
    float:right;
    width: auto;
    text-align: right;
    padding: 5px 17px 0px 30px;
    background:url("images/user.svg") no-repeat 4px 4px;
}
div#header div#login_name a {
    color: #666;
    text-decoration: none;
    font-size:14px;
}

div#header div#login_name span#login_name_level {
    font-size: 75%;
    color: #999;
}

div#header div#logout {
    display: block;
    float:right;
    width: 20em;
    text-align: right;
    padding-top: 5px;
    padding-right: 17px;
}
div#header div#logout a,
div#header div#logout a:visited {
    color: #999;
    text-decoration: none;
    font-size: 13px;
    font-weight: bold;
    padding-right:25px;
    background:url(images/exit.svg) no-repeat 77px 3px;
}
div#header div#logout a:hover {
    color: #bbb;
}

/* --- curtain DIV bei Ladevorgang ------*/

div#curtain {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-color: #ffffff;
    z-index: 100; /* hinter div#session_expired_requester */
}

/* Während des Lade-Vorgangs ist noch class="loading" gesetzt */
div#loading_splash {
    height: 100%;
    width: 100%;
    background-image: url("images/spinner.gif");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 40px 40px;
}

/* Bei abgelaufener Session den Hintergrund ein wenig transparent abdecken */
div#curtain.session_expired {
    background-color: rgba(70,70,70,0.6);
}

/* ----- Session-Expired-Requester  ----*/

div#session_expired_requester {
    width: 280px;
    height: 70px;
    margin-top: -100px; /* rausgeschoben. Wird mit animate(margin-top:0px) in den sichtbaren Bereich gefahren */
    background-color: #ec8363;
    border: 3px solid #EB301F;
    padding: 8px;
    text-align: right;
    position: absolute;
    right: 8px;
    top: 0px;
    z-index: 120;
}
div#session_expired_requester div#expired_message {
    position: absolute;
    right: 4px;
    top: 4px;
}
div#session_expired_requester a,
div#session_expired_requester a:visited {
    background-color: #666666;
    color: #d2d2d2;
    text-decoration: none;
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 4px;
}
div#session_expired_requester a:hover {
    color: #e2e2e2;
}

/* ----- Content-Bearbeitungs-iframe  -----*/

iframe#content-iframe {
    width: 100%;
    height: 100%;
    border: 0;
/*   position: absolute;
    top: 4px;
    bottom: 4px;
    left: 10px;
    right: 10px; */
}

/* DIV zum Überdecken des iframes beim Resizen der Sidebar, damit die Maus 
   nicht den Fokus aus dem Haupt-Dokument verliert. */
div#iframe-cover-on-resize {
/*   width: 100%;
    height: 100%; */
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
/*        background: red; */
}

/*********************** 3. Klappmenü, Akkordion ***********************/

/* -------Allgemein -----*/

/* Der Content-Pane des Akkordions */
.ui-accordion .ui-accordion-content {
    padding: 0.2em 0.1em;
}

.ui-widget {
    font-size: 80%;
}


/* Sprachumschaltung */

div.pane_tool_box {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
}

div.language_box {
    display: inline-block;
    padding-top: 2px;
    margin-right: 2px;
/*    position: absolute;
    right: 2px;
    top: 2px;*/
}

div.language_box img.language_flag {
    margin-top: 3px;
    margin-right: 5px;
    height: 11px;
}

div.language_box select.language_select {
}


/* ----- Akkordion Treeview ------- */

/* Treeview-Einträge, die es nicht in der aktuellen Sprache gibt. 
   Aber nicht das ganze li mit allen Unter-li-s einfärben, sondern
   nur den direkt folgenden Eintrag (a-Tag) */
div#treeview li.missing_in_current_language > a {
    color: #FF3311;
}

div#treeview_pane {
/*    position: relative;*/ /* Damit Refresh-Icon platziert werden kann */
}

a#treeview_refresh {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: relative;
    top: 0.35em;
    margin-right: 1em;
}

span.treeview_reload_icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(images/treeview_reload.svg);
}

/* Kurzzeitiges Markieren (Aufblinken) eines Tree-Eintrages, wenn
  der Treeview bis dorthin automatisch geöffnet wurde. */
.jstree .it_highlight {
    background-color: #FFF099;
    transition: background-color 0.4s 0s ease-in-out;
}
/*
.jstree .it_highlight.it_highlight_off {
    background-color: transparent;
    transition: background-color 0.2s 0s ease-in-out;
}*/

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {font-weight:bold;}

/* open/close Handle des root Items ausblenden */
/* div#treeview > ul > li > i.jstree-icon {
    display: none;
}
*/

/* ----- Akkordion Treeview - Kontextmenü ------- */

.jstree-contextmenu {
    z-index: 100; /* Context-Menü muss über Treeview-Panel-Resize-Handler liegen */
    border-radius: 4px;
}

.vakata-context li {
    font-size: 86%;
}

.vakata-context li > a:hover {
    box-shadow: none;
}

.vakata-context .vakata-context-hover > a {
    box-shadow: none;
}

/* ----- Akkordion Treeview - Kontextmenü: Seitenkennungen anzeigen Dialog ------- */

div#show_page_ids_dialog .page_id_language {
    margin-top: 8px;
    background-color: #eee;
    padding: 4px;
}

div#show_page_ids_dialog .page_id_language img {
    vertical-align: middle;
    margin-right: 8px;
}

div#show_page_ids_dialog ul {
    list-style-type: none;
}

div#show_page_ids_dialog .empty_page_id_list {
    cursor: pointer;
    height: 100%;
    font-style: italic;
}

/* ----- Akkordion Suche -------- */


button#search_button {
    width: 20px;
    height: 20px;
    background: url(images/mag_glass.gif) no-repeat;
    background-size: 15px 15px;
    border: 0px;
    cursor:pointer;
    box-shadow:none;
}

div#search_spinner {
    display: block;
    float: right;
    width: 20px;
    height: 20px;
    background: url(images/spinner.gif) no-repeat;
    background-size: 20px 20px;
}

div#search_pane a {
    text-decoration: none;
    white-space: nowrap;
    color:#000;
}

div#search_pane li.missing_in_current_language a {
    color: #FF3311;
}

div#search_pane ul {
    list-style-type: none;
    padding-left: 10px;
    margin-top: 0px;
}

div#search_pane li {
    margin-bottom: 4ex;
}

div#search_pane form {
    padding: 20px 0px 0px 20px; 
}

div#search_pane img {
}

div#search_pane input#search_string {
    width:230px;
}

div#search_pane div.path {
    color: #8B8B8B;
    font-style: normal;
    padding: 0 0 1ex 0;
}

div#search_pane div.entry {
    white-space: nowrap;
}

div#search_pane div.open_result_in_treeview {
    background: url(images/open_result_in_treeview.svg) no-repeat;
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: inline-block;
}

/* ------- Akkordion Administrations-Menü -----*/

div#admin_menu_pane ul {
    list-style-type: none;
    padding-left: 30px;
        margin:0px;
}


div#admin_menu_pane ul ul {padding:0px;}

/* nicht klickbare Einträge */
div#admin_menu_pane span.group_title { 
  color: #555555;
    display: block;
    font-weight: bold;
    padding-top: 9px;
}
div#admin_menu_pane span.group_title img { 
    display: none;
}
div#admin_menu_pane img { 
    margin-bottom: -0.4em;
    margin-right: 1ex;
}
div#admin_menu_pane li {
    padding-top: 1ex;
}
/* klickbare Einträge */
div#admin_menu_pane li a {
    color: #000;
    text-decoration: none;
    transition: background-color 0.15s ease 0s, box-shadow 0.15s ease 0s;
}
div#admin_menu_pane li a:hover {
    background-color: #E8EFF7;
    box-shadow: 0 0 2px #0A6AA1;
}




/* --------- Akkordion Zentrale-Redaktion-Menü ----*/

div#central_editing_pane ul {
    list-style-type: none;
    padding-left:30px;
}
div#central_editing_pane ul li {
    padding-top: 0.2ex;
    padding-bottom: 0.6ex;

}
div#central_editing_pane li a {
    color: #000;
    text-decoration: none;
    transition: background-color 0.15s ease 0s, box-shadow 0.15s ease 0s;
    background: url(otp_icons/icon_action.svg) no-repeat 0 -2px;
    padding:0 0 0 25px;
}
div#central_editing_pane li a:hover {
    background-color: #E8EFF7;
    box-shadow: 0 0 2px #0A6AA1;
}


/* --------- Akkordion Bookmarks ----*/

div#bookmark_list li.missing_in_current_language > a {
    color: #FF3311;
}
div#bookmark_list div.bookmark_path {
//    background-color: #e3e3e3;
    color: #8b8b8b;
    padding: 4ex 2em 1ex 1ex;
}
div#bookmark_list div.bookmark_path a,
div#bookmark_list div.bookmark_path a:hover,
div#bookmark_list div.bookmark_path a:visited,
div#bookmark_list div.bookmark_path a:link {
    color: #8b8b8b;
    font-weight: normal;
    text-decoration: none;
}


/*********************** 4. Login ***********************/

div#login_splash {
    width: 480px;
    margin: 130px auto 0px;
    position:relative;
}

div#login_splash div#inner_div {
    border: 1px solid #ccc;
    box-shadow: 2px 4px 7px 3px #CCCCCC;
    height: 450px;
    width: 480px;
    /*background: url(images/login/bg_login.png) no-repeat scroll 0px 0px;*/
    margin-bottom:10px;
    position:relative;
    background:url(images/login/html5.png) no-repeat 12px 390px;
}


div#login_splash div#intro {
    height: 150px;
    position: relative;
//    border: 1px solid green;
}

div#login_splash div#form_div {
    margin: 30px 67px 0;
    position: relative;
}

div#login_splash div#logo {
//    border: 1px dotted red;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 200px;
    height: 50px;
}

div#login_splash div#login_image {
//    border: 1px dotted red;
    position: absolute;
    bottom: 14px;
    left: 50px;
    width: 200px;
    height: 50px;
}

div#login_splash div#version {  
    position: absolute;
    bottom: 0px;
    right: 10px;
    width: 100%;
    height: 1em;
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    color: #999;
}

div#login_splash label {
    display: block;
    color: #666;
    font-size: 14px;
    font-weight: normal;
    padding-bottom:10px;
}


div#login_splash input[type="text"], 
div#login_splash input[type="password"] {
    background-color: #F1F1F1;
    border: 0 solid #000000;
    border-radius: 2px;
    box-shadow: 1px 1px 2px 0 #999999 inset;
    width: 29em;
    height:25px;
    float: right;
    margin-bottom:20px;
}

div#login_splash input[type="submit"] {
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    box-shadow: 1px 2px 3px 1px #CCCCCC;
    font-family: verdana;
    font-size: 15px;
    height: 37px;
    text-align: center;
    width: 103px;
    color:#555;
    background:-moz-linear-gradient(center top , #FFFFFF 22%, #CCCCCC 138%);
    cursor:pointer;
}

div#login_splash input[type="submit"]:hover {
    color:#8cc348;
}

div#login_splash div.field_separator {
    clear: both;
    height: 1ex;
}

div#login_splash div.message, 
div#login_splash div.message noscript {
    font-weight: bold; 
    color: #B22052;
    float: right;
}
div#login_splash div.message span#login_incorrect_message {
    padding: 2px 4px;
    border-radius: 3px;
    transition: background-color 1s ease 2s, color 1s ease 2s; /* langsames Überblenden zur .matured color */
    background-color: #dd4444;
    color: #000;
}
/* Nach  */
div#login_splash div.message span#login_incorrect_message.matured {
    background-color: white;
    color: #666;
}

div#login_splash a#portal_link {
  -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #CCCCCC #CCCCCC #FFFFFF;
    border-image: none;
    border-radius: 10px 0 0;
    border-style: solid solid none;
    border-width: 1px 1px medium;
    box-shadow: 5px -3px 4px -3px #CCCCCC;
    font-size: 14px;
    font-weight: normal;
    left: -1px;
    padding: 7px 11px;
    position: absolute;
    top: -33px;
    color:#8CC348;
}
div#login_splash a#portal_link:hover {
    text-decoration: underline;
}

div#login_splash a#dimedis {color:#ccc; font-weight:normal;float:right;}
//a#dimedis:after {color:#ccc; font-weight:normal;}
div#login_splash a#dimedis:hover {text-decoration: underline;}


div#login_splash input#setcookie {float:left; margin: 0px 20px 0px 0px;height:18px;}
div#login_splash label[for="setcookie"] {padding:0px 20px 0px 0px;}


/* --------------------- end of file ---------------------- */