Vorlage für Relations - Druckversion

Code:
</font><link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet"> 

        <div id="fs-frame">

            <div id="fs-tab">Relations</div>

            <div id="fs-left">

                <div class="fs-flip"><a href="#fam">Familie</a></div> 

                <div class="fs-flip"><a href="#freu">Freunde</a></div>  

                <div class="fs-flip"><a href="#beka">Bekannte</a></div>  

                <div class="fs-flip"><a href="#fei">Feinde</a></div> 

                <div class="fs-flip"><a href="#eri">Erinnerungen</a></div>

            </div>

            <div id="fs-main">

                <div class="fs-hor">

<div class="fs-page" id="fam">

                        <div class="fs-text">

                            <div class="fs-title">Familie</div>

[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



                        </div>

                    </div>

 <div class="fs-page" id="freu">

                        <div class="fs-text">

                            <div class="fs-title">Freunde</div>

                            

[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



                        </div>

                    </div>



<div class="fs-page" id="beka">

                        <div class="fs-text">

                            <div class="fs-title">Bekannte</div>

                            

[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



                        </div>

                    </div>



<div class="fs-page" id="fei">

                        <div class="fs-text">

                            <div class="fs-title">Feinde</div>

                            

[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



                        </div>

                    </div>



<div class="fs-page" id="eri">

                        <div class="fs-text">

                            <div class="fs-title">Erinnerungen</div>

                            

[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



[b][u]Name[/u][/b]

Information zu der Beziehung zu einander



                        </div>

                    </div>



                    

                </div>

            </div>

            <div id="fs-facts">

                <div class="fs-subt">Meine Begegnungen</div>

                

Kurzer Text, ein paar Sätze zu dir .. tob dich aus

                      

            </div>

            <div id="fs-pic"></div>

            <div id="fs-bottom">&copy;| Das sind Auszüge aus dem Buch der Familie Winchester</div>





        </div>

        <div class="fs-credit"><a href="http://storming-gates.de/member.php?action=profile&uid=125" target="blank" title="coded by serendipity @ SG">thx.</a></div>

<style type="text/css"> /*

            ### "Error: unrecognized file format" ###

            ### coded by serendipity @ storming gates ###

            äußere Aktenmappe

            */ #fs-frame { margin: 0 auto; margin-top: 35px; box-sizing: border-box; width: 480px; height: 600px; position: relative; background: #523410; font-family: 'Roboto Mono', "Courier New", monospace; font-size: 11px; line-height: 1.2; text-align: left; border-radius: 0px 15px 15px 15px; box-shadow: 2px 2px 2px #808080; position: relative; } /*

            Aktenverzeichnis (Name/Titel)

            */ #fs-frame:before { content: ""; width: 220px; height: 30px; border-radius: 10px 10px 0px 0px; position: absolute; top: -30px; left: 0px; background: #523410; } /*

            Listenformatierung (nur margin & padding angepasst)

            */ #fs-frame ul { margin: 10px; padding: 0px; } /*

            

            */ #fs-frame li { margin: 5px; padding: 0px; } /*

            Text (aka Titel) der Akte (oben links)

            */ #fs-frame #fs-tab { box-sizing: border-box; width: 220px; height: 30px; position: absolute; top: -30px; left: 0px; font-size: 15px; color: #f4ede6; padding: 5px 10px;  } /*

            Erster Buchstabe Formatierung im Aktentab (oben links)

            */ #fs-frame #fs-tab:first-letter { font-size: 17px; font-weight: bold; color: #c41616; padding: 0px 1px; } /*

            linke Spalte, aka Pseudo-Aktentabs

            */ #fs-frame #fs-left { box-sizing: border-box; width: 400px; height: 20px; position: absolute; top: 166px; left: 50px; background: transparent; transform-origin: 0 0; transform: rotate(90deg); } /*

            einzelne "Pseudo-Tabs"

            */ #fs-frame .fs-flip { box-sizing: border-box; height: 20px; width: 100px; border-radius: 5px 5px 0px 0px; background: #f4ede6; color: #523410; display: inline-block; margin: 0px -6px 0px 0px; padding: 2px 3px; transform: rotate(180deg); box-shadow: -2px 2px 2px #808080; overflow: hidden; } /*

            Haupttextfeld - äußerer Rahmen

            */ #fs-frame #fs-main { box-sizing: border-box; width: 400px; height: 400px; position: absolute; top: 170px; left: 50px; background: #f4ede6; padding: 10px 0px; overflow: scroll; box-shadow: 2px 2px 2px #808080; } /*

            unsichtbare, Textbox, die so breit ist wie Seiten in der Akte, d.h. Y x 400px -> scrollt horizontal

            */ #fs-frame #fs-main .fs-hor { box-sizing: border-box; height: 380px; width: 1600px; display: table; background: #f4ede6;} /*

            einzelne Seite in der Akte

            */ #fs-frame .fs-page { box-sizing: border-box; width: 400px; height: 350px; display: table-cell; background: #f4ede6; padding: 0px; margin: 0px; } /*

            Text auf jeder einzelnen Seite - scrollt vertikal

            */ #fs-frame .fs-text { box-sizing: border-box; width: 400px; height: 380px; overflow: auto; background: #f4ede6; border-top: 5px solid #f4ede6; border-bottom: 5px solid #f4ede6; padding: 0px 20px; margin: 0px; font-size: 11px; color: #3b3937; text-align: justify;} /*

            Titelformatierung auf einzelner Seite

            */ #fs-frame .fs-text .fs-title { box-sizing: border-box; border-bottom: 2px solid #3b3937; font-size: 18px; letter-spacing: 1px; margin-bottom: 5px; } /*

            

            */ #fs-frame .fs-text .fs-title:first-letter { font-size: 20px; font-weight: bold; color: #c41616; padding: 0px 1px; } /*

            Untertitel/Abschnittstitel

            */ #fs-frame .fs-text .fs-subt, #fs-frame #fs-facts .fs-subt { font-size: 14px; text-align: right; letter-spacing: 1px; background: #3b3937; color: #fff; padding: 2px 5px; margin-bottom: 5px; } /*

            Post-It in der rechten oberen Ecke

            */ #fs-frame #fs-facts { box-sizing: border-box; width: 265px; height: 200px; overflow: auto; border-top: 5px solid #f4f2cc; border-bottom: 5px solid #f4f2cc; padding: 10px; background: #f4f2cc; color: #3b3937; position: absolute; top: -15px; left: 190px; transform: rotate(0deg); box-shadow: 2px 2px 2px #808080; } /*

            Fett, kursiv und unterstrichen

            */ #fs-frame #fs-main b, #fs-frame #fs-facts b, #fs-frame #fs-main i, #fs-frame #fs-facts i, #fs-frame #fs-main u, #fs-frame #fs-facts u { color: #c41616; letter-spacing: 1px; } /*

            Bild links oben

            */ #fs-frame #fs-pic { box-sizing: border-box; width: 170px; height: 170px; border-width: 10px 10px 30px 10px; border-color: #fff; border-style: solid; background: url('http://placehold.it/150x130/000/fff/') #000; position: absolute; top: 5px; left: 10px; transform: rotate(350deg); overflow: hidden; box-shadow: 2px 2px 2px #808080; } /*

            Linkformatierung in der Haupttextbox, in der linken Spalte und im Post-It

            */ #fs-frame #fs-main a, #fs-frame #fs-facts a, #fs-frame #fs-left a { color: #c41616 !important; text-transform: uppercase; letter-spacing: 0px; font-weight: normal; text-decoration: none; background: transparent; padding: 0px 2px; } /*

            

            */ #fs-frame #fs-main a:hover, #fs-frame #fs-facts a:hover, #fs-frame #fs-left a:hover { color: #f4f2cc !important; text-transform: lowercase; letter-spacing: 1px; font-weight: normal; text-decoration: none; background: #c41616; padding: 0px 2px; } /*

            Text rechts am Rand

            */ #fs-frame #fs-right { box-sizing: border-box; height: 20px; width: 580px; position: absolute; bottom: 10px; left: 460px; color: #f4ede6; font-size: 10px; transform-origin: 0 0; transform: rotate(270deg); overflow: hidden; } /*

            Text unten am Rand

            */ #fs-frame #fs-bottom { box-sizing: border-box; height: 20px; width: 440px; position: absolute; bottom: 0px; left: 20px; color: #f4ede6; font-size: 10px; text-align: center; overflow: hidden; } /*

            Links für Text am Rand (unten & rechts)

            */ #fs-frame #fs-right a, #fs-frame #fs-bottom a { color: #f4f2cc !important; text-transform: uppercase; letter-spacing: 0px; font-weight: normal; text-decoration: none; background: transparent; padding: 0px 2px; } /*

            

            */ #fs-frame #fs-right a:hover, #fs-frame #fs-bottom a:hover { color: #523410 !important; text-transform: lowercase; letter-spacing: 1px; font-weight: normal; text-decoration: none; background: #f4ede6; padding: 0px 2px; } /*

            Tabellenformatierung (Lebenslauf)

            */ #fs-frame .fs-table, #fs-frame .fs-table td { background: #f4ede6; color: #3b3937; border-collapse: collapse; border-bottom: 1px dotted #523410; font-family: 'Roboto Mono', "Courier New", monospace; font-style: normal; font-size: 11px; line-height: 1.2; padding: 5px; } /*

            

            */ #fs-frame .fs-table td:nth-child(even) { border-left: 1px dotted #523410; }/*

            Webkit-Scrollbar (Große Textbox -> horizontale Scrollbar)

            */ #fs-frame #fs-main::-webkit-scrollbar { height: 5px; width: 5px; background: #f4ede6; } /*

            */ #fs-frame #fs-main::-webkit-scrollbar-thumb { background: #523410; } /*

            */ #fs-frame #fs-main::-webkit-scrollbar-thumb:vertical { width: 0px; background: #f4ede6; } /*

            */ #fs-frame #fs-main::-webkit-scrollbar-track { background: #f4ede6; } /*

            */ #fs-frame #fs-main::-webkit-scrollbar-corner { background: #f4ede6; } /*

            Webkit-Scrollbar (einzelne "Seiten" in der großen Textbox -> vertikal)

             */ #fs-frame .fs-text::-webkit-scrollbar { height: 5px; width: 5px; background: #f4ede6; } /*

            */ #fs-frame .fs-text::-webkit-scrollbar-thumb { background: #3b3937; } /*

            */ #fs-frame .fs-text::-webkit-scrollbar-track { background: #f4ede6; } /*

            */ #fs-frame .fs-text::-webkit-scrollbar-corner { background: #f4ede6; } /*

            Webkit-Scrollbar im gelben Post-It (vertikal)

            */ #fs-frame #fs-facts::-webkit-scrollbar { width: 5px; background: #f4f2cc; } /*

            */ #fs-frame #fs-facts::-webkit-scrollbar-thumb { background: #c41616; } /*

            */ #fs-frame #fs-facts::-webkit-scrollbar-track { background: #f4f2cc; } /*

            */ #fs-frame #fs-facts::-webkit-scrollbar-corner { background: #f4f2cc; } /*

            */ .fs-credit { margin: 0 auto; box-sizing: border-box; width: 480px; padding: 2px 10px; font-family: 'Roboto Mono', "Courier New", monospace;  font-size: 11px; text-align: right; } /*

        */ </style>