/*Stylesheet für Fotoalbum 2 mit Beschreibungen*/

/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menu/slides.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */

/* common styling */

a {}
a:hover {}
a:visited {}

/* slides styling */

/*Bildgrosse 550 x 450*/

.photo                   {
                         padding:20px;
                         background:#222;
                         /*
                         width:600px;
                         height:330px;
                         Groesse Bildcontainer bzw. Gesamtgroesse der Bildergalerie*/
                         width:950px;
                         height:600px;
                         text-align:left;
                         margin:0 0 20px 0;
                         font-family: 'Comic Sans MS', arial, sans-serif;
                         }


.photo h1                {
                         font-size:14px;
                         font-weight:normal;
                         color:#fc0;
                         margin:0 0 0 5px;
                         padding:0;
                         }


.photo ul                {
                         list-style:none;
                         padding:0;
                         margin:0;
                         /*
                         width:216px;
                         height:144px;
                         Groesse Feld Bildervorschau*/
                         width:360px;
                         height:400px;
                         background:#333;
                         border:1px solid #666;
                         position:relative;

                         }


.photo ul li             {
                         display:inline;
                         /*
                         width:24px;
                         height:24px;
                         Groesse Listeneintrag*/
                         width:60px;
                         height:60px;
                         /*border:1px solid #666;*/
                         float:left;
                         margin:6px;
                         }


.photo ul li a           {
                         display:block;
                         width:60px;
                         height:49px;
                         cursor:default;
                         background:url(./pfeil.png) no-repeat;
                         text-decoration:none;
                         }


.photo ul li a b         {
                         display:none;
                         }

.photo ul li a img       {
                         display:block;
                         /*Vorschau-Bild
                         width:22px;
                         height:22px;
                         */
                         width:60px;
                         height:49px;
                         border:1px solid #666;
                         border-top-color:#ccc;
                         }

.photo ul li a:hover     {
                         white-space:normal;
                         position:relative;
                         }

.photo ul li a.vert:hover img    {
                                 position:absolute;
                                 left:-12px;
                                 top:-20px;
                                 width:48px;
                                 height:64px;
                                 /*Rollover-Bild in Hochkant-Format*/
                                 border-color:#fc0;
                                 }

.photo ul li a.hor:hover img     {position:absolute;
                                 left:-20px;
                                 top:-12px;
                                 /*
                                 width:64px;
                                 height:48px;
                                 Groesse Rollover Bild*/
                                 width:150px;
                                 height:100px;
                                 border-color:#fc0;
                                 }

.photo ul li a:active, .photo ul li a:focus      {
                                                 position:static;
                                                 outline:0;
                                                 }

.photo ul li a:focus.vert img, .photo ul li a:active.vert img    {
                                                                 background-color:#000;
                                                                 position:absolute;
                                                                 /*
                                                                 left:260px;
                                                                 Position Hochkant-Bild von links*/
                                                                 left:380px;
                                                                 top:0;
                                                                 width:240px;
                                                                 height:320px;
                                                                 border:1px solid #fc0;
                                                                 padding:5px 45px;
                                                                 }

.photo ul li a:focus.hor img, .photo ul li a:active.hor img      {
                                                                 background-color:#000;
                                                                 position:absolute;
                                                                 /*
                                                                 left:260px;
                                                                 Position Bild von links*/
                                                                 left:380px;
                                                                 top:0;
                                                                 /*
                                                                 width:320px;
                                                                 height:240px;
                                                                 Bildanzeige*/
                                                                 width:550px;
                                                                 height:450px;
                                                                 border:1px solid #fc0;
                                                                 padding:45px 5px;
                                                                 }

.photo ul li a:focus b, .photo ul li a:active b                  {
                                                                 display:block;
                                                                 position:absolute;
                                                                 width:350px;
                                                                 height:130px;
                                                                 /*Feld fuer Bildbeschreibung*/
                                                                 border:1px solid #666;
                                                                 top:450px;
                                                                 left:0;
                                                                 color:#ddd;
                                                                 font-weight:normal;
                                                                 padding:6px;
                                                                 }




        @media only screen and (max-width:480px)
        {
        .photo {display:none;}
        #info h3.smartphone {display:block;}
        }