/**
 *  phpBookWorm:    singollo.de
 *   
 *  @author         Udo Neist (webmaster@singollo.de, GPG-Fingerprint 4A8F B229 2AE9 9634 04D1 E2F0 21F2 E27D FE97 D87F)
 *  @copyright      CC-BY-SA 3.0, 2014
 *  @version        20160719
 *  @since          2008
 *  @file           dom.css
 *  
 *  @description Kurzbeschreibung: DOM
  *
 *  <p>Style-Guide</p>
 *  <ul>
 *  <li>Einrückung 1 Tab = 4 Space
 *  <li>Trennung von Funktionsnamen/Variablen mit einem Space vor und nach dem Doppelpunkt von der Funktion/dem Wert
 *  </ul>
 *  <p>History</p>
 *  <ul>
 *  <li>26.01.2013: Erste Version (Udo Neist)
 *  <li>03.03.2013: Kopfzeilen eingebaut (Udo Neist)
 *  <li>27.10.2013: Bildergalerie hinzugefügt (Udo Neist)
 *  </ul>
 */

/* CSS Document */

#dom_overlay {
    visibility:         hidden;
    position:           absolute;
    left:               0;
    top:                0;
    width:              100%;
    height:             100%;
    text-align:         center;
    z-index:            1000;
    background-color:   #111;
    opacity:            0.99;
    filter:             alpha(opacity=99);
    -moz-opacity:       0.99;
}

#dom_overlay div.dom_dialog {
    position:           absolute;
    display:            none;
    width:              400px;
    height:             220px;
    margin-top:         -110px;
    top:                30%;
    margin-left:        -200px;
    left:               50%;
    z-index:            255;
    background:         url(gfx/bg.png) #fff;
}

#dom_overlay div.dom_dialog div.dom_body {
    height:             100%;
    border:             3px solid #9BB19B;
    border-radius:      4px;
    padding:            0;
    background:         bottom right no-repeat #fff;
}

#dom_overlay div.dom_dialog div.dom_head {
    color:              #515C6F;
    background:         url("gfx/accordionItemActive.gif") repeat-x scroll center bottom #F7FAFF;
    border-bottom:      2px solid #9BB19B;
    padding:            0.2em;
    width:              auto;
    height:             20px;
    margin-bottom:      0.3em;
}

#dom_overlay div.dom_dialog div.dom_text {
    min-height:         20px;
    padding:            0.3em;
}

#dom_overlay div.dom_dialog div.dom_select div {
    margin-bottom:      0.3em;
    padding:            0.3em;
}

#dom_overlay div.dom_dialog div.dom_select input {
    position:           absolute;
    left:               10em;
    width:              15em;
    border:             2px solid #9BB19B;
    border-radius:      4px;
    background-color:   #fff;
}

#dom_overlay div.dom_dialog div.dom_select div.dom_radiobutton {
    font-size:          0.8em;
}

#dom_overlay div.dom_dialog div.dom_select div.dom_radiobutton label {
    position:           absolute;
    left:               14em;
}

#dom_overlay div.dom_dialog div.dom_select div.dom_radiobutton input {
    position:           absolute;
    left:               10em;
}

#dom_overlay div.dom_dialog div.dom_select select {
    position:           absolute;
    left:               10em;
    width:              15em;
    border:             2px solid #9BB19B;
    border-radius:      4px;
    background-color:   #fff;
}

#dom_overlay div.dom_dialog div.dom_foot {
    position:           absolute;
    bottom:             5px;
    height:             20px;
    width:              auto;
    left:               0;
    right:              0;
    padding-top:        5px;
    display:            block;
    text-align:         center;
}

#dom_overlay div.dom_dialog button.dom_button {
    background-color:   #fff;
    border:             2px solid #9BB19B;
    border-radius:      4px;
    font-size:          1.1em;
}

#dom_overlay div.dom_dialog span.dom_button:hover {
    background:         transparent;
}

#dom_overlay div.dom_viewer {
    position:           absolute;
    display:            none;
    width:              800px;
    height:             600px;
    margin-top:         -110px;
    top:                20%;
    margin-left:        -450px;
    left:               50%;
    z-index:            255;
    background:         transparent;
}

#dom_overlay div.dom_viewer div.dom_body {
    height:             100%;
    border:             2px solid #9BB19B;
    border-radius:      4px;
    padding:            0;
    background:         bottom right no-repeat #eee;
}

#dom_overlay div.dom_viewer div.dom_head {
    color:              #000;
    background:         url("gfx/bg_menu.gif") repeat-x scroll center bottom #9BB19B;
    border-bottom:      1px solid #9BB19B;
    padding:            0.2em;
    width:              auto;
    height:             20px;
    margin-bottom:      0.3em;
    cursor:             pointer;
}

#dom_overlay div.dom_viewer div.dom_text {
    padding:            0.3em;
    height:             560px;
    width:              785px;
    display:            inherit;
}

#dom_overlay div.dom_viewer #dom_objectviewer {
    display:            none;
    height:             560px;
    width:              785px;
    vertical-align:     middle;
    text-align:         center;
}

#dom_overlay div.dom_viewer #dom_imageviewer {
    display:            none;
    max-width:          785px;
    max-height:         560px;
}

#dom_overlay div.dom_viewer #dom_textviewer {
    display:            none;
    border:             0;
    vertical-align:     top;
    text-align:         left;
    font-size:          0.8em;
    overflow:           auto;
}

#dom_overlay div.dom_gallery {
    position:           absolute;
    display:            none;
    width:              1024px;
    height:             810px;
    z-index:            255;
    background:         #fff;
    border:             2px solid #9BB19B;
    border-radius:      4px;
}

#dom_overlay #dom_image_loading, #dom_overlay #dom_galleryload {
    position:           absolute;
    padding:            16px;
    display:            none;
/*    border:             1px solid #F5ECE7;*/
    border:             1px solid #9BB19B;
    border-radius:      4px;
    background-color:   transparent;
}

#dom_overlay div.dom_gallery div.dom_body {
    height:             99%;
    border:             0;
    border-radius:      4px;
    padding:            0;
    background:         bottom right no-repeat #eee;
}

#dom_overlay div.dom_gallery #dom_galleryimage {
    max-width:          800px;
    max-height:         600px;
    border:             0;
    margin:             5px;
}

#dom_overlay div.dom_gallery #dom_ghead {
    position:           absolute;
    bottom:             1em;
    font-weight:        bold;
    text-align:         left;
    margin:             2.4em 0.5em;
    width:              98%;
}

#dom_overlay div.dom_gallery #dom_gtext {
    position:           absolute;
    bottom:             0.5em;
    text-align:         left;
    margin:             0.5em;
    width:              98%;
}

#dom_overlay div.dom_gallery #dom_gindex_button {
    text-align:         center;
    margin:             0 auto;
    position:           relative;
    top:                90%;
}
 
#dom_overlay div.dom_gallery button {
    border:             1px solid #9BB19B;
    border-radius:      2px;
    background-color:   #eee;
    height:             2em;
    width:              4em;
}

#dom_overlay div.dom_gallery #dom_gbutton_prev {
    position:           absolute;
    top:                45%;
    left:               10px;
    display:            block;
    z-index:            100;
}

#dom_overlay div.dom_gallery #dom_gbutton_prev:hover {
    border:             1px solid #9BB19B;
    border-radius:      4px;
    background-color:   #eee;
}

#dom_overlay div.dom_gallery #dom_gbutton_next {
    position:           absolute;
    top:                45%;
    right:              10px;
    display:            block;
    z-index:            100;
}

#dom_overlay div.dom_gallery #dom_gbutton_next:hover {
    border:             1px solid #9BB19B;
    border-radius:      4px;
    background-color:   #eee;
}

#dom_overlay div.dom_gallery #dom_gbutton_close {
    position:           absolute;
    top:                -8px;
    right:              -8px;
    border:             1px solid #9BB19B;
    border-radius:      4px;
    background-color:   #eee;
}

/* Tabs */

div.tabs {
    position:           absolute;
    bottom:             7px;
    z-index:            0;
    background-color:   white;
    border-top:		1px solid lightgray;
}

div.tabs ul {
    list-style:         none;
    padding:            0;
    margin:             0;
}

div.tabs li {
    display:            inline;
    margin:             0 0.3em 0 0;
    padding:            0 0.4em 0.2em 0.4em;
    min-width:          150px;
/*    border-left:        1px solid #DEE3DE;
    border-right:       1px solid #DEE3DE;
    border-bottom:      1px solid #DEE3DE;
*/    border-left:        1px solid white;
    border-right:       1px solid white;
    border-bottom:      1px solid white;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    background-image:   none;
    filter:             none;
}

div.tabs li::before {
    content:            url("gfx/pfeil-klein.gif");
}

div.tabs li:hover {
    color:              #333;
    background-color:   #e7e7e7;
    cursor:             pointer;
/*    border-left:        1px solid #9BB19B;
    border-right:       1px solid #9BB19B;
    border-bottom:      1px solid #9BB19B;*/
}

div.tabs li.selected {
    color:              #E26708;
    background-color:   #d7d7d7;
/*    border-left:        1px solid #9BB19B;
    border-right:       1px solid #9BB19B;
    border-bottom:      1px solid #9BB19B;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;*/
}

div.tabs li.selected:hover {
    background-color:   #e7e7e7;
    cursor:             default;
/*    border-left:        1px solid #9BB19B;
    border-right:       1px solid #9BB19B;
    border-bottom:      1px solid #9BB19B;*/
}

div.dom_timeline {
    margin-top:         0.2em;
    margin-bottom:      0.2em;
    padding-top:        5px;
    border-top:         2px solid #9BB19B;
    border-bottom:      2px solid #9BB19B;
    text-align:         center;
    z-index:            0;
}

div.dom_timeline ul {
    list-style:         none;
    padding:            0;
    margin:             0;
}

div.dom_timeline ul li {
    display:            inline;
    margin:             5px;
    padding:            0;
    width:              120px;
    height:             120px;
}

.dom_fadein {
    opacity:            1;
    filter:             alpha(opacity=100);
    -webkit-transition: opacity 2s ease-in;
    -moz-transition:    opacity 2s ease-in;
    -ms-transition:     opacity 2s ease-in;
    -o-transition:      opacity 2s ease-in;
    transition:         opacity 2s ease-in;
}

.dom_fadeout {
    opacity:            0;
    filter:             alpha(opacity=0);
    -webkit-transition: opacity 2s ease-out;
    -moz-transition:    opacity 2s ease-out;
    -ms-transition:     opacity 2s ease-out;
    -o-transition:      opacity 2s ease-out;
    transition:         opacity 2s ease-out;    
}


.bubble[tooltip] {
    position:           relative;
    text-decoration:    none;
}

.bubble[tooltip]:hover::before {
    position:           absolute;
    left:               30%;
    width:              auto;
    height:             auto;
    min-width:          120px;
    color:              #000;
    font-size:          9pt;
    content:            attr(tooltip);
    display:            block;
    padding:            .2em;
    text-align:         center;
    white-space:        nowrap;
    background:         #EEEEEE;
    opacity:            0.95;
    filter:             alpha(opacity=95);
    -moz-border-radius: 6px;
    -webkit-border-radius:6px;
    border-radius:      6px;
    -webkit-box-shadow: 1px 1px 10px 0px #616161;
    -moz-box-shadow:    1px 1px 10px 0px #616161;
    box-shadow:         1px 1px 10px 0px #616161;
}

.bubble[tooltip]:hover::after {
    position:           absolute;
    height:             0;
    width:              0;
    content:            "";
    display:            block;
    border-style:       solid;
    opacity:            0.95;
    filter:             alpha(opacity=95);
}

.bubble[tooltip][bubble="bottom"]:hover::before {
    top:                28px;
}

.bubble[tooltip][bubble="bottom"]:hover::after {
    top:                18px;
    left:               40%;
    border-color:       #DEE3DE transparent;
    border-width:       0 10px 10px;
}

.bubble[tooltip]:not([bubble]):hover::before, .bubble[tooltip][bubble="top"]:hover::before {
    top:                -24px;
}

.bubble[tooltip]:not([bubble]):hover::after, .bubble[tooltip][bubble="top"]:hover::after {
    top:                -5px;
    left:               40%;
    border-color:       #DEE3DE transparent transparent transparent;
    border-width:       10px;
}