/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Globale Einstellungen                                                                                              */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

* {
    margin  : 0;
    padding : 0;
    border  : 0;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Schriftdefinitionen                                                                                                */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

body, h1, h2, h3, h4, h5, h6, p, td, th, ol, ul, li, a, dl, dt, dl {
    font-family: Helvetica, Arial, Geneva, sans-serif;

}

/*
*  { color : #660000; }
*/


p {
    text-indent   : 1em;
    margin-bottom : 0.5em;
    text-align    : justify;
}


hr {
    width: 95%;
    height: 2px;
    margin: 1em auto;
    color       : #ddb000;
    background: #ddb000;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Schriftdefinitionen                                                                                                */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

.framed {
    border-color : #663300;
    text-indent  : 0;
    margin       : 2em 4em;
    padding      : 0.5em 1em;
    border-style : groove;
    border-width : 2px;
}

.center {
    text-align: center;
}

h1 {
    font-size   : 2em;
    line-height : 1em;
    color       : #ffd800;
    text-shadow : -1px -1px 1px #fff, 1px 1px 1px #666;
}

h2 {
    text-align     : center;
    color          : #ddb000;
    text-shadow    : -1px -1px 1px #fff, 1px 1px 1px #666;
    padding-bottom : 0.5em;
    font-size      : 1.5em;
}

h3 {
    color       : #ddb000;
    padding     : 0;
    text-shadow : -1px -1px 1px #fff, 1px 1px 1px #666;
    text-align  : center;
    font-size   : 1.25em;
}

h4 {
    border: blue dashed 0px;
    color       : #ddb000;
    padding: 0.5em 0;
    text-shadow : -1px -1px 1px #fff, 1px 1px 1px #666;
    text-align: left;
    font-size: 1.125em;

}

h5 {
    color       : #600;
    padding     : 0.5em 0;
    text-shadow : -1px -1px 1px #fff, 1px 1px 1px #666;
    font-size   : 1em;
    font-style  : italic;
    text-align  : center;
    font-size   : 0.9em;
}

p {
    color: #600;
    font-size: 1em;
    line-height: 1em;
}

li {
    color: #600;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Die Schmuckrahmen                                                                                                  */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

/* Inhaltsframe allgemein */

#outerJewelryFrame,
#innerJewelryFrame  {
    left       : 0;
    right      : 0;
    bottom     : 0;
    width      : calc( 100% - 42px );
    margin     : 0 auto;
    position   : absolute;
    padding    : 21px;
    overflow   : hidden;
    z-index    : 0;
    background : url(schmuck/gold.jpg) repeat;
}

/* Der Inhalt ohne Navigation*/
 #outerJewelryFrame  {
    height : calc( 100% - 42px );
    top    : 0;
}

/* Der Inhalt mit Navigation */
#innerJewelryFrame {
    height : calc( 100% - 58px - 42px );
    top    : 58px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Der grosse Schmuckrahmen                                                                                           */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

.st { position: absolute }
.st.sto, .st.stu, .st.stl, .st.str, .st.stm { z-index:1; }
.st.stol, .st.stor, .st.stul, .st.stur, .st.stom, .st.stum { z-index:2; }

.st.sto { top: 58px; left: 0; right: 0; height: 21px; background-repeat: repeat-x; }
.st.stu { bottom: 0px; left: 0;  right: 0; height: 21px; background-repeat: repeat-x; }
.st.stl { top: 58px; left:   0px;  bottom: 0; width: 21px; background-repeat: repeat-y; }
.st.str { top: 58px; right:  0px; bottom: 0; width: 21px; background-repeat: repeat-y; }

.st.stm { top: 58px; bottom: 0; width: 14px; background-repeat: repeat-y; }

.st.stol, .st.stor, .st.stul, .st.stur, .st.stom, .st.stum { background-repeat: no-repeat; }

.st.stol {    top : 0px;   left :   0px; width : 111px; height : 109px; } /* oben links */
.st.stor {    top : 0px;  right :   0px; width : 108px; height : 107px; } /* oben rechts */
.st.stul { bottom : 0px;   left :   0px; width : 110px; height : 107px; } /* unten links */
.st.stur { bottom : 0px;  right :   0px; width : 107px; height : 107px; } /* unten rechts */
.st.stom {    top : 0px;   left : -88px; width : 194px; height : 107px; } /* oben Mitte */
.st.stum { bottom : 0px;   left : -88px; width : 194px; height : 107px; } /* unten Mitte */

/* die eigentlichen Bilder */
.st.sto   { background-image: url(schmuck/o.png);  }
.st.stl   { background-image: url(schmuck/l.png);  }
.st.stu   { background-image: url(schmuck/u.png);  }
.st.str   { background-image: url(schmuck/r.png);  }
.st.stm   { background-image: url(schmuck/lh.png);  }
.st.stol  { background-image: url(schmuck/ol.gif);  }
.st.stor  { background-image: url(schmuck/or.gif);  }
.st.stul  { background-image: url(schmuck/ul.gif);  }
.st.stur  { background-image: url(schmuck/ur.gif);  }
.st.stom  { background-image: url(schmuck/om.gif);  }
.st.stum  { background-image: url(schmuck/um.gif);  }

.st { border: red dashed 0px; }

/* balken in der Mitte erst mal ausblenden */

.st.stm, .st.stom, .st.stum { display: none }

/* Der aeussere Schmuckrahmen auf der aussenseite                                                                     */

#outerJewelryFrame .st.sto,
#outerJewelryFrame .st.stl,
#outerJewelryFrame .st.str,
#outerJewelryFrame .st.stm {
    top: 0;
}

#innerJewelryFrame .st.sto,
#innerJewelryFrame .st.stl,
#innerJewelryFrame .st.str,
#innerJewelryFrame .st.stm {
    top: 0;
}


/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Der Titel Schmuckrahmen                                                                                         */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

.pt { position: absolute; }
.pt.pto, .pt.ptu, .pt.ptl, .pt.ptr, .pt.ptm { z-index:1; }
.pt.ptol, .pt.ptor, .pt.ptul, .pt.ptur { z-index:2; }

.pt.pto { top: 0px; left: 0; width: calc( 100% - 0px ); height: calc( 14px - 0px ); background-repeat: repeat-x; }
.pt.ptu { bottom: 0px; left: 0;  width: calc( 100% - 0px ); height: 14px; background-repeat: repeat-x; }
.pt.ptl { top: 0px; left:   0px;  height: calc( 100% - 0px ); width: 14px; background-repeat: repeat-y; }
.pt.ptr { top: 0px; right:  0px; height: calc( 100% - 0px ); width: 14px; background-repeat: repeat-y; }

.pt.ptol, .pt.ptor, .pt.ptul, .pt.ptur { background-repeat: no-repeat; }

.pt.ptol {    top : 0px;   left :   0px; width : 33px; height : 33px; } /* oben links */
.pt.ptor {    top : 0px;  right :   0px; width : 33px; height : 33px; } /* oben rechts */
.pt.ptul { bottom : 0px;   left :   0px; width : 33px; height : 33px; } /* unten links */
.pt.ptur { bottom : 0px;  right :   0px; width : 33px; height : 33px; } /* unten rechts */

/* die eigentlichen Bilder */
.pt.pto   { background-image: url(schmuck/oh.png);  }
.pt.ptl   { background-image: url(schmuck/lh.png);  }
.pt.ptu   { background-image: url(schmuck/uh.png);  }
.pt.ptr   { background-image: url(schmuck/rh.png);  }
.pt.ptol  { background-image: url(schmuck/olh.png);  }
.pt.ptor  { background-image: url(schmuck/orh.png);  }
.pt.ptul  { background-image: url(schmuck/ulh.png);  }
.pt.ptur  { background-image: url(schmuck/urh.png);  }


.pt { border: green dashed 0px;
/*
display: none
*/
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Der H1 title ueberschrift                                                                                          */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

/* the page title */

#outerJewelryFrame #pageTitle,
#innerJewelryFrame #pageTitle {
    top         : 2em;
    left        : 3em;
    right       : 3em;
    height      : calc( 5em + 0px );
    width       : calc( 100% - 6em - 0px - 28px );
    text-align  : center;
    padding     : 14px;
    position    : absolute;
    overflow    : hidden;
    background  : url(schmuck/dunkel.jpg) repeat;
}

#outerJewelryFrame #pageTitle h1,
#innerJewelryFrame #pageTitle h1 {
    width   : 100%;
    height  : 100%;
    display : table;
}

#outerJewelryFrame #pageTitle h1 span,
#innerJewelryFrame #pageTitle h1 span {
    display        : table-cell;
    vertical-align : middle;
    line-height    : 1em;
}

/* the entry text */

#outerJewelryFrame #smallContentFrame {
    bottom      : 6em;
    left        : 3em;
    right       : 3em;
    height      : calc( 28px + 4em );
    line-height : 1em;
    position    : absolute;
    overflow    : hidden;
    background  : url(schmuck/weissgold.jpg) repeat;
    z-index     : 1;
}

#outerJewelryFrame #smallContentFrame h2 {
    position: relative;
    margin-top: 1.625em;
}

#outerJewelryFrame #smallContentFrame h2 a,
#outerJewelryFrame #smallContentFrame h2 a:visited {
    text-decoration: none;
    color: #ddb000;
}

#outerJewelryFrame #collage {
    position   : relative;
    margin     : 2em;
    margin-top : 9em;
    width      : calc( 100% - 4em );
    height     : 550px;
}

#outerJewelryFrame #collage #wappen {
    left    : 0;    right   : 0;
    margin  : auto;
}

#outerJewelryFrame #collage img { position: absolute; }
#outerJewelryFrame #collage img.mono { top: 0; }
#outerJewelryFrame #collage img.rose { bottom: 1em; }
#outerJewelryFrame #collage img.mono.left { right: calc( 50% - 320px ); }
#outerJewelryFrame #collage img.mono.right { left: calc( 50% - 320px ); }
#outerJewelryFrame #collage img.rose.left { right: calc( 50% - 320px ); }
#outerJewelryFrame #collage img.rose.right { left: calc( 50% - 320px ); }

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Schmuck auf der Main-Page                                                                                       */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#outerJewelryFrame #contentFrame,
#innerJewelryFrame #contentFrame {
    position   : absolute;
    left       : 2em;
    right      : 2em;
    top        : 0;
    width      : calc( 100% - 42px - 4em - 28px - 0px );
    height     : calc( 100% - 9em - 42px - 3em - 0px );
    margin     : 0 auto;
    padding    : calc( 14px + 0.5em );
    margin-top : 10em;
    max-width  : 60em;
    overflow   : hidden;
    z-index    : 0;
    background : url(schmuck/weissgold.jpg) repeat;
    border     : blue dashed 0px;
}

#innerJewelryFrame #largeContentFrame {
    position   : absolute;
    left       : 2em;
    right      : 2em;
    top        : 0;
    width      : calc( 100% - 42px - 4em - 28px - 0px );
    height     : calc( 100% - 9em - 42px - 3em - 0px );
    margin     : 0 auto;
    padding    : calc( 14px + 0.5em );
    margin-top : 10em;
/*
    max-width  : 60em;
*/
    overflow   : hidden;
    z-index    : 0;
    background : url(schmuck/weissgold.jpg) repeat;
    border: blue dashed 0px;
}

#outerJewelryFrame #contentFrame #warn {
    overflow-y: auto;
    height: 100%;
}

#innerJewelryFrame #contentFrame #jewelryLeft  #roseL,
#innerJewelryFrame #contentFrame #jewelryRight #roseR {
    position : absolute;
    top      : 14px;
}

#innerJewelryFrame #contentFrame #jewelryLeft #roseL  { left  : 0px; }
#innerJewelryFrame #contentFrame #jewelryRight #roseR { right : 0px; }

#innerJewelryFrame #contentFrame #jewelryLeft #monoL,
#innerJewelryFrame #contentFrame #jewelryRight #monoR {
    position : absolute;
    top      : calc( 256px + 14px + 2px );
}

#innerJewelryFrame #contentFrame #jewelryLeft  #monoL { left  : 14px; }
#innerJewelryFrame #contentFrame #jewelryRight #monoR { right : 14px; }

#outerJewelryFrame #contentFrame  img.mono.left {
    padding-right: 1em;
    float: left;
}

#outerJewelryFrame #contentFrame  img.mono.right {
    padding-left: 1em;
    float: right;
}

#innerJewelryFrame #contentFrame #news {
/*
    border: red dashed 1px;
*/
    position: absolute;
    margin: 0 auto;
    left: 230px;
    right: 230px;
    height: 210px;
}

#innerJewelryFrame #contentFrame #news p.greet {
    width: 100%;
    text-align  : center;
    white-space: nowrap;
    margin : 0 auto 0.5em;
    text-indent : 0;
    overflow: hidden;
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1.25em;
    height: 1.5em;
    border: red dashed 0px;
}

#innerJewelryFrame #contentFrame #news dl.greet {
/*
    border: #ddb000 inset 4px;
*/
/*
    border: blue dashed 1px;
*/
    margin : 0 auto;
    font-size: 1em;
    width: calc( 100% - 2px );
    overflow-y: auto;
    height: calc( 100% - 2em - 2px );
}

#innerJewelryFrame #contentFrame #news dl.greet dt {
/*
    border: red dashed 1px;
*/
/*
    text-indent  : -1.5em;
*/
/*
    padding-left : 0.5em;
*/
    float: left;
    clear: left;

    width: 9.5em;

    text-align: right;
    font-weight: bold;
    color: #600;
    white-space: nowrap;
}
#innerJewelryFrame #contentFrame #news dl.greet dt::after {
    content: ":";
}

#innerJewelryFrame #contentFrame #news dl.greet dd {
/*
    border: red dashed 1px;
*/
/*
    text-indent  : -1.5em;
*/
/*
    padding-left : 0.5em;
*/

    margin: 0 0 0 10em;

    padding: 0 0 0.5em 0;
    color: #600;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Die großen Bereiche                                                                                                */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

/* Die Navigation */
#navigation {
    left     : 0;
    width    : calc( 100% - 8px );
    margin   : 0;
    padding  : 0;
    position : absolute;
    top      : 0;
    height   : 50px;
    background : url(schmuck/dunkel.jpg) repeat;
    bottom   : 0;
    border   : #ffd800 ridge 4px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Kapitelnavigation fuer Geschichten                                                                                 */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#innerJewelryFrame #contentFrame #chapterNavigation {
    line-height : 1em;
    text-align  : center;
    z-index: 2;
}

#innerJewelryFrame #contentFrame #chapterNavigation a,
#innerJewelryFrame #contentFrame #chapterNavigation .current {
    border        : outset 3px #ddb000;
    border-radius : 0.5em;
    min-width     : 1em;
    padding       : 0.25em 0.5em;
    display       : inline-block;
}

#innerJewelryFrame #contentFrame #chapterNavigation a {
    text-decoration : none;
    color           : #600;
}

#innerJewelryFrame #contentFrame #chapterNavigation .current {
    border : solid 3px transparent;
}

#innerJewelryFrame #contentFrame #chapterNavigation a:visited {
    text-decoration : none;
    color           : #900;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Menu navigation                                                                                                    */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#menuFrame {
    position : absolute;
    z-index  : 5;
    top      : 54px;
    right    : 10px;
    display  : none;
}

#menuFrame a {
    display    : block;
    padding    : 1em;
    background : url(schmuck/weissgold.jpg) repeat;
    border     : #ffd800 ridge 4px;
}

#menuFrame:target {
    display : block;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Kapitelnavigation fuer Geschichten                                                                                 */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#innerJewelryFrame #contentFrame #story {
    position : absolute;
    padding  : 0 1em;
    top      : calc( 14px + 3em );
    bottom   : 14px;
    left     : 14px;
    right    : 14px;
    overflow : auto;
    z-index  : 1;
}

#innerJewelryFrame #contentFrame #story h2 {
    margin-top  : 1em;
}

#innerJewelryFrame #contentFrame #directoryFrame {
    overflow   : auto;
    width      : calc( 100% - 1.25em );
    height     : calc( 100% - 2em );
    padding    : 1em 0.25em 1em 1em;
}

#innerJewelryFrame #contentFrame #directoryFrame > p {
    text-indent: 0;
}

#innerJewelryFrame #contentFrame #directoryFrame #directory h3 {
    margin: 1em;
}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory {
    border: red dashed 0px;
    text-align: center;
    width: calc( 100% - 0px );
}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory li.descr {
    height: calc( 120px + 16px );
    position: relative;
    margin-left: 0.25em;
    margin-bottom: 0.25em;
    width: calc( 50% - 0px - 0.5em - 0px );
    display: inline-block;
    vertical-align: top;
    overflow: hidden;

}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory > li h4 {
    border: red dashed 0px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    height: 1em;
    padding: 0 0.1em 0.1em 0.1em;
}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory > li h4.wPic {
    margin-left: calc( 67px + 16px );
}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory li.descr h4 a {
    position: relative;
    border: none;
    background: none;
    color: #ddb000;
    text-decoration: none;
}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory > li div {
    height: calc( 100% - 1.25em );
    overflow-y: auto;
    overflow-x: hidden;
    border: green dashed 0px;
}
#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory > li p {
    text-indent   : 0;
    margin-bottom : 0;
    text-align    : left;
    font-size     : 80%;
    padding-left  : 0.25em;
    padding-right : 0.25em;
    border: blue dashed 0px;

}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory li.descr a {
    position: absolute;
    top: 0;
    left: 0;

    background: url(schmuck/gold.jpg) repeat;
    border: 4px ridge #ffd800;
}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory li.descr a img {
    border: 4px groove #ffd800;
}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory li.descr p.wPic {
    margin-left: calc( 67px + 16px );
    border: green dashed 0px;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Kapitelnavigation fuer Geschichten                                                                                 */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#innerJewelryFrame #contentFrame #miniatur {
    overflow-y: auto;
    height: 100%;
/*
    background: #efe;
*/
    border: green dashed 0px;
}

#innerJewelryFrame #contentFrame #miniatur #picture {
/*
    background: #fee;
    border: red 1px dashed;
*/
    position: relative;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Library content page                                                                                               */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#innerJewelryFrame #contentFrame #libraryFrame {
    overflow: auto;
    height: calc( 100% - 0px );
}


#innerJewelryFrame #contentFrame #libraryFrame #libDirectory {
    margin: 1em auto;
    border-collapse: collapse;
}

#innerJewelryFrame #contentFrame #libraryFrame #libDirectory thead tr {
    border-bottom: #600 solid 3px;
}

#innerJewelryFrame #contentFrame #libraryFrame #libDirectory thead tr th {
    border-bottom: #600 solid 2px;
    text-align: left;
}

#innerJewelryFrame #contentFrame #libraryFrame #libDirectory thead tr th,
#innerJewelryFrame #contentFrame #libraryFrame #libDirectory tbody tr td {
    border-left: #600 solid 2px;
    padding: 0.25em 0.2em;
}

#innerJewelryFrame #contentFrame #libraryFrame #libDirectory thead tr th:first-of-type,
#innerJewelryFrame #contentFrame #libraryFrame #libDirectory tbody tr td:first-of-type {
    border-left: transparent solid 2px;
}

#innerJewelryFrame #contentFrame #libraryFrame #libDirectory tbody tr:nth-child(odd) {
    background: #ffd;
} /* selects every odd row */
#innerJewelryFrame #contentFrame #libraryFrame #libDirectory tbody  tr:nth-child(even) {
    background: #ffb;
} /* selects every even row */

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Library content page                                                                                               */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#outerJewelryFrame #contentFrame #taskList {
    overflow: auto;
    height: calc( 100% - 0px - 0px );
    padding: 0.5em;
}

#outerJewelryFrame #contentFrame #taskList p {
    text-align: justify;
    text-indent: 0;
    margin-bottom: 0.5em;
}

#outerJewelryFrame #contentFrame #taskList p.link {
    text-align: center;
}

#outerJewelryFrame #contentFrame #taskList ul.kleidung {
    list-style-type: disc;
    list-style-position: inside;
    margin-left: 0em;
    padding-left: 0em;
    margin-bottom: 0.5em;
}

#outerJewelryFrame #contentFrame #taskList ul.kleidung li {
    padding-left: 0;
    text-indent: 0;
}

#outerJewelryFrame #contentFrame #taskList ol.fragen {
    list-style-position: inside;
    margin-bottom: 0.5em;
}

#outerJewelryFrame #contentFrame #taskList ol.fragen > li {
    text-indent: -1em;
    padding-left: 1em;
    list-style-type: decimal;
    margin-top: 0.5em;
}

#outerJewelryFrame #contentFrame #taskList ol.fragen li ol.antworten {
    list-style-position: inside;
    margin-top: 0.5em;
}

#outerJewelryFrame #contentFrame #taskList ol.fragen li ol.antworten li {
    list-style-type: lower-alpha;
    text-indent: -1em;
    padding-left: 1em;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Gallery page                                                                                                       */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#innerJewelryFrame #galleryFrame {
    overflow       : hidden;
    overflow-y     : auto;
    position       : absolute;
    left           : 0;
    right          : 0;
    top            : 21px;
    width          : calc( 100% - 42px - 0px );
    height         : calc( 100% - 42px - 9em - 0px );
    margin         : 0 auto;
    padding        : 0;
    margin-top     : 9em;
    max-width      : 60em;
    display        : block;
    z-index        : 0;
    background     : url(schmuck/gold.jpg) repeat;
    text-align     : center;
    vertical-align : middle;
}

#innerJewelryFrame #galleryFrame li {
    position : relative;
    display  : inline-block;
    border   : green solid 0px;
    width    : calc( 233px + 0px );
    height   : calc( 300px + 9em + 0px + 0px );
    padding  : 0;
    margin   : 0;
    overflow : hidden;
}


#innerJewelryFrame #galleryFrame li > a {
    display : block;
    height  : calc( 300px - 0px );
    width   : calc( 233px - 0px );
}

#innerJewelryFrame #galleryFrame li > a img {
    border : green dashed 0px;
}

#innerJewelryFrame #galleryFrame li > div {
    position   : relative;
    background : url(schmuck/weissgold.jpg) repeat;
    height     : calc( 8em - 28px - 0px );
    overflow   : hidden;
    width      : calc( 233px - 28px - 0px );
    padding    : 14px;
    margin-top : 1em;
}

#innerJewelryFrame #galleryFrame li > div > a {
    display         : table;
    background      : url(schmuck/weissgold.jpg) repeat;
    height          : calc( 100% - 0px );
    width           : calc( 100% - 0px - 1em );
    text-align      : center;
    padding         : 0.5em;
    overflow        : hidden;
    text-decoration : none;
}
#innerJewelryFrame #galleryFrame li > div > a span {
    display        : table-cell;
    vertical-align : middle;
    line-height    : 1.1em;
    height         : calc( 100% - 0px );
    width          : calc( 100% - 0px );
    text-align     : center;
    padding        : 0em;
    overflow       : hidden;
    color          : #ddb000;
    text-shadow    : -1px -1px 1px #fff, 1px 1px 1px #666;
    font-size      : 1.1em;
    font-weight    : bold;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Helptext on the main page                                                                                          */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#innerJewelryFrame #contentFrame h2.help {
    position  : absolute;
    top       : calc( 256px + 14px - 2em );
    font-size : 1.25em;
    padding   : 0.5em 0.2em;
    margin    : 0 auto;
    z-index   : 2;
    left      : calc( 122px + 14px );
    right     : calc( 122px + 14px );
}

#innerJewelryFrame #contentFrame ul.help {
    position : absolute;
    left     : calc( 122px + 14px );
    right    : calc( 122px + 14px );
    bottom   : 14px;
    top      : calc( 256px + 14px );
    z-index  : 2;
    margin   : 0 auto 1em;
    overflow : auto;
}

#innerJewelryFrame #contentFrame ul.help li {
    position   : relative;
    min-height : 50px;
}

#innerJewelryFrame #contentFrame ul.help li img {
    position : absolute;
    top      : 0;
    left     : 0;
}

#innerJewelryFrame #contentFrame ul.help li p {
    padding-left   : calc( 50px + 0.5em );
    padding-right  : 0.5em;
    vertical-align : middle;
    text-indent    : 0;
    font-size      : 0.9em;
    height         : 50px;
    line-height    : 0.9em;
    display        : table-cell;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* gate warn texts                                                                                                    */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#outerJewelryFrame #contentFrame  h2.warn {
    margin-top : 0.5em;
    font-size  : 2em;
}

#outerJewelryFrame #contentFrame p.warn {
    text-align  : justify;
    padding     : 0 2em;
    margin      : 1em auto 0.5em;
    text-indent : 0;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Besondere Textauszeichnungen                                                                                       */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

/*  einstellungen fuer die besondere pony seite */
#innerJewelryFrame #contentFrame #wildfire {
    border: red dashed 0px;
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    border-spacing       : 0px;
}

#innerJewelryFrame #contentFrame #wildfire td {
    width       : calc( 120px - 2px );
    text-align  : center;
    height      : calc( 120px - 2px );
    border: 0px red dashed;
    background: #fee;
}

#innerJewelryFrame #contentFrame #wildfire td a {
    text-decoration : none;
    padding         : 0.5em;
    display         : block;
    border: 0px green dashed;

}

#innerJewelryFrame #contentFrame table.dwVertrag {
    text-align: center;
    margin: 0 auto;
}

#innerJewelryFrame #contentFrame table.dwVertrag a {
    text-decoration      : none;
    border: none;
}

#innerJewelryFrame #contentFrame #div16 {
    border: red dashed 0px;
    position: relative;
}

#innerJewelryFrame #contentFrame #div16 #nav16 {
    position: absolute;
    top: 0;
    left: 0;
}

#innerJewelryFrame #contentFrame #div16 #nav16 a {
    background : url(schmuck/weissgold.jpg) repeat;
}

#innerJewelryFrame #contentFrame #story table.herzHeader {
/*
    border: red dashed 1px;
    background: #cfc;
*/
    margin:0.5em auto;
}

#innerJewelryFrame #contentFrame #story table.herzHeader th {
/*
    border: red dashed 1px;
    background: #cfc;
*/
    margin:0.5em auto;
    color       : #ddb000;
    text-shadow : -1px -1px 1px #fff, 1px 1px 1px #666;
    text-align  : center;
    font-size   : 1.25em;
}
}

#innerJewelryFrame #contentFrame #story table.gedicht {
    margin:0.5em auto;
}
#innerJewelryFrame #contentFrame #story p.hochzeit:first-letter { font-size:200%; }
#innerJewelryFrame #contentFrame #story p.jenniliebe {
    text-align: center;
    color       : #ddb000;
    text-shadow : -1px -1px 1px #fff, 1px 1px 1px #666;
}

#innerJewelryFrame #contentFrame #story p.gold {

    color       : #ddb000;

}


#innerJewelryFrame #contentFrame #directoryFrame #directory ul.miniatur {
    border: red dashed 0px;
}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.miniatur li.miniDescr {
    border: 4px ridge #ffd800;
    background: url(schmuck/gold.jpg) repeat;
    display: inline-block;
    width: 7em;
    height: 5em;
    padding: 4px;
    margin:0.125em;
    overflow: hidden;
}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.miniatur li.miniDescr a {
    border: green dashed 0px;

    border: 4px groove #ffd800;

    display: table;
    text-decoration: none;
    width: calc( 100% - 8px );
    height: calc( 100% + 2px );
    overflow: hidden;
}
#innerJewelryFrame #contentFrame #directoryFrame #directory ul.miniatur li.miniDescr a span {
    display        : table-cell;
    vertical-align : middle;
    line-height    : 1em;
    background: url(schmuck/weissgold.jpg) repeat;
    border: red dashed 0px;
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0.25em;
    overflow: hidden;
}


/*
#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory li.descr a {
    position: absolute;
    top: 0;
    left: 0;

    background: url(schmuck/gold.jpg) repeat;
    border: 4px ridge #ffd800;
}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory li.descr a img {
    border: 4px groove #ffd800;
}

#innerJewelryFrame #contentFrame #directoryFrame #directory ul.directory li.descr p.wPic {
    margin-left: calc( 67px + 16px );
    border: green dashed 0px;
}
*/

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Story addon                                                                                                        */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#innerJewelryFrame #contentFrame #storyAddOn {
    border: blue dashed 0x;
    width: calc( 100% - 0px - 8em );
    height: calc( 100% - 0px - 2em );
    overflow: hidden;
    overflow-y: auto;
    padding: 1em 4em;
}

#innerJewelryFrame #contentFrame #storyAddOn h2 {
    border: red dashed 0px;
}

#innerJewelryFrame #contentFrame #storyAddOn p {
    border: green dashed 0px;
    text-indent: 0;
    text-align: justify;
}

#innerJewelryFrame #contentFrame #storyAddOn #vimaChapterList {
    border: green dashed 0px;
    max-width: calc( 50% - 4px - 1em );
    width: calc( 50% - 4px - 1em );
    float: left;
    display: inline-block;
    margin-right: 1em;
}

#innerJewelryFrame #contentFrame #storyAddOn #vimaChapterList li {
    padding-bottom: 0.5em;
}
#innerJewelryFrame #contentFrame #storyAddOn #vimaNotes {
    border: green dashed 0px;
    max-width: calc( 50% - 4px - 1em );
    display: inline-block;
    width: calc( 50% - 4px - 1em );
    clear: both;
    margin-left: 1em;
}

#innerJewelryFrame #contentFrame #storyAddOn ul {
    border: cyan dashed 0px;
    list-style-type: none;
}

#innerJewelryFrame #contentFrame #storyAddOn li {
    border: #f60 dashed 0px;
}

#innerJewelryFrame #contentFrame #storyAddOn p.backlink {
    text-align: center;
}

#innerJewelryFrame #contentFrame #storyAddOn div.team {
    border: cyan dashed 0px;
    max-width: 50%;
    display: inline-block;
    float:left;
    margin: 0 auto;
}

#innerJewelryFrame #contentFrame #storyAddOn #picframe {
    border: #ffd800 inset 5px;
    height: calc( 100% - 8em );
    overflow: auto;
    width: calc( 100% - 1em );
/*
    text-align: center;
*/
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Carolin                                                                                                            */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#innerJewelryFrame #contentFrame #storyAddOn #carolin {
    text-align: center;
}

#innerJewelryFrame #contentFrame #storyAddOn #carolin li {
    position: relative;
    padding: 21px;
    display: inline-block;
    margin: 1em;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Chronik                                                                                                            */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#chronik {
    width: 80%;
    margin: 0 auto;
    border: green 0px dotted;
}


#chronik dt {
    border: red dashed 0px;
    font-size: 1.1em;
    padding: 0.2em;
    color: #ddb000;
    font-style: bold;
    text-shadow : -1px -1px 1px #fff, 1px 1px 1px #666;
}

#chronik dd ul { padding: 0.5em 1.5em; }
#chronik dd ul li { padding-bottom: 0.25em; }

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Monohandschuhe                                                                                                     */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#innerJewelryFrame #contentFrame #mhs #mhsList {
    border: green dashed 0px;
}

#innerJewelryFrame #contentFrame #mhs #mhsList li {
    display: inline-block;
    border: green dashed 0px;
    height: calc( 75px + 8px + 0px );
    width: calc( 50px + 4px + 0px );
    padding:0.25em 0.5em;
}

#innerJewelryFrame #contentFrame #mhs #mhsList li a {
    border: 2px ridge #ffd800;
    display: table;
    background: url(schmuck/gold.jpg) repeat;
    padding: 2px;
    height: calc( 100% - 4x );
    width: calc( 100% );
    overflow: hidden;

}

#innerJewelryFrame #contentFrame #mhs #mhsList li a img {
    border: 2px groove #ffd800;
    display:table-cell;
}

#innerJewelryFrame #contentFrame h2.mhs {
    border: red dashed 0px;
    height: calc( 2.25em + 0px );
    line-height: 1.25em;
    margin: 0.25em 100px 0.25em;
}

#innerJewelryFrame #contentFrame #mhs {
    padding: 0em;
    border: blue dashed 0px;
    overflow: hidden;
    overflow-y: auto;
    height: calc( 100% - 42px - 2.25em - 0px );
}

#innerJewelryFrame #contentFrame #mhs #mhsPicFrame {
    border: red dashed 0px;
    float: left;
    width: calc( 200px + 24px + 1em );
    height: calc( 100% - 0px );
    overflow: hidden;
}

#innerJewelryFrame #contentFrame #mhs #mhsPicFrame #mhsPicContainer {
    border: 4px ridge #ffd800;
    background: url(schmuck/gold.jpg) repeat;
    padding: 4px;
    width: calc( 200px + 8px );
    height: calc( 300px + 8px );
    overflow: hidden;
    margin: 0 0.5em 1em 0.5em;
}

#innerJewelryFrame #contentFrame #mhs #mhsPicFrame #mhsPicContainer #mhsPic {
    border: 4px groove #ffd800;
    width: 200px;
    height: 300px;
    overflow: hidden;
}

#innerJewelryFrame #contentFrame #mhs #mhsPicFrame #mhsText {
    border: green solid 0px;
    text-align: justify;
    padding: 0 0.5em;
    color: #600;
    font-size:0.9em;
}

#innerJewelryFrame #contentFrame #mhsIntro {
    padding: 0em;
    border: blue dashed 0px;
    overflow: hidden;
    overflow-y: auto;
    height: calc( 100% - 42px - 2.25em - 0px );
    width: calc( 100% - 0px );
}

#innerJewelryFrame #contentFrame #mhsIntro img {
    border: blue dashed 0px;
    display: block;
    float: left;
    padding-right: 1em;
}

#innerJewelryFrame #contentFrame #mhsIntro  #mhsText {
    border: green dashed 0px;
    color: #600;
    padding: 1em;
    text-align: justify;
}

#innerJewelryFrame #contentFrame #mhsIntro p.link {
    text-align: center;
}

/* ------------------------------------------------------------------------------------------------------------------ */
/*                                                                                                                    */
/* Garten der Phantasie                                                                                               */
/*                                                                                                                    */
/* ------------------------------------------------------------------------------------------------------------------ */

#innerJewelryFrame #largeContentFrame #directoryFrame {
    border: red dashed 0px;
    overflow: hidden;
    height: calc( 100% - 0px );
}

/*
#innerJewelryFrame #largeContentFrame #directoryFrame div.about {
    border: green dashed 0px;
    max-width: 60em;
    margin: 1em auto;
    text-indent: 0;
}
*/

#innerJewelryFrame #largeContentFrame #directoryFrame #directory {
    border: red dashed 0px;
    height: calc( 100% - 0px - 4em );
/*
    background: #fee;
*/
}

#innerJewelryFrame #largeContentFrame #directoryFrame div.about {
    border: cyan dashed 0px;
    height: 100px;
    width: 80%;
    overflow: hidden;
    margin: 0 auto 1em;
    display: block;
    text-align: center;
    vertical-align: top;
    position: relative;
}

#innerJewelryFrame #largeContentFrame #directoryFrame div.about p {
    border: green dashed 0px;
    height: calc( 100% - 0px - 0.25em );
    width: calc( 100% - 0.25em );
    overflow: auto;
    display: table;
    font-size: 90%;
    font-style: italic;
    line-height: 1em;
    margin:0;
    padding:0;
    text-indent: 0;
    padding: 0.125em;
    vertical-align: middle;
}

#innerJewelryFrame #largeContentFrame #directoryFrame div.about p span {
    display: table-cell;
    vertical-align: middle;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

#innerJewelryFrame #largeContentFrame #directoryFrame div.about p img {
    border: blue dashed 0px;
    display: inline;
    margin:0;
    padding:0;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden {
    overflow: auto;
    display: block;
    width: calc( 100% - 0px );
    border: cyan dashed 0px;
    position: relative;
    text-align: center;
    height: calc( 100% - 0px - 0em - 150px );
    padding-bottom: 150px;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li {
    border: blue dashed 0px;
    width: 300px;
    height: 180px;
    display: inline-block;
    position: relative;
    line-height: 1em;
    vertical-align: middle;
    padding-bottom: 0.5em;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li img {
    position: absolute;
    top:0;
    left:0;
    border: green dashed 0px;
    width: 100px;
    height: 150px;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li.quer img {
    width: 150px;
    height: 100px;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li img:hover {
    width: 200px;
    height: 300px;
    z-index: 2;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li.quer img:hover {
    width: 300px;
    height: 200px;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li h3 {
    border: blue dotted 0px;
    margin: 0;
    margin-left: 110px;
    margin-bottom: 0.5em;
    color: #600;
    font-weight: bold;
    text-shadow: none;
    font-size: 95%;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li.quer h3 {
    margin-left: 155px;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li p {
    border: green dotted 0px;
    margin-left: 110px;
    padding: 0;
    line-height: 1em;
    vertical-align: top;
    text-indent: 0;
    font-size: 95%;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li.quer p {
margin-left: 155px;
}
#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li table {
    margin-left: 110px;
    font-size: 80%;
    border-collapse: collapse;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li table tr th {
    border-bottom: #600 solid 1px;
    text-align: left;
    padding: 0.125em;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li table tr th:first-of-type {
    border-right: #600 solid 1px;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li table tr td {
    text-align: left;
    padding: 0.125em;
    vertical-align: top;
}

#innerJewelryFrame #largeContentFrame #directoryFrame #directory ul.directory.garden li table tr td:first-of-type {
    border-right: #600 solid 1px;
}