/* 
    Document   : creaGalery
    Created on : 04.04.2011, 17:38:16
    Author     : Johannes Nazarov
    Description:
         Für das creaGalery-Plugin
*/


/*
 *  Dieser Bereich ist wesentlich für das Funktionieren des Plugins und sollte nicht verändert werden
*/

.creaGalery-backscreen
{
   background:url('../../../includes/img/cgBack.png');
   position:fixed;
   width:100%;
   height:100%;
   padding:0;
   top:0;
   left:0;
   z-index:900;
   opacity:0.7;
   filter:Alpha(opacity=70);
}

.creaGalery-back
{
   background:black;
   /*outline:silver solid 2px;*/
   position:fixed;
   width:900px;
   height:600px;
   margin-left:-450px;
   margin-top:-300px;
   padding:0;
   top:50%;
   left:50%;
   z-index:1000;
   -moz-box-shadow: 5px 5px 5px #000;
   -webkit-box-shadow: 5px 5px 5px #000;
   box-shadow: 5px 5px 5px #000;
}

.creaGalery
{
   position:fixed;
   width:900px;
   height:600px;
   margin-left:-450px;
   margin-top:-300px;
   padding:0;
   top:50%;
   left:50%;
   z-index:1000;
   overflow:hidden;
   border: 2px solid #fff;
}
.creaGalery-close
{
   background:url('../../../data/templates/images/plugIcons.png') -171px center no-repeat #B30617;
   position:fixed; /*  Weil der Button über den Rand der Galerie hinaus schaut  */
   top:50%;
   left:50%;
   margin-left:433.5px; /* galerywidth/2-closewidth/2-border/2 */
   margin-top:-316.5px; /* -galeryheight/2-closeheight/2-border/2 */
   width:30px;
   height:30px;
   border-radius: 20px;
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;
   border:solid #fff 2px;
   cursor:pointer;
   z-index: 1500;
}
.creaGalery-close:hover
{
   background-color:#ffffff;
   background-position: -196px center;
   border:solid #fff 2px;
}


.creaGalery-functionarea
{
   position:absolute;
   top: 10px;
   left: -6px;
   margin:10px;
   width:220px;
   height: 450px;
   color: #000;

   background:url('../../../includes/img/cgPreload.gif') center no-repeat #F2F2F2;
   padding: 10px;
   text-align: center;

    -moz-border-radius:10px; /* Firefox */
    -webkit-border-radius:10px; /* Safari, Chrome */
    -khtml-border-radius:10px; /* Konqueror */
    border-radius:10px; /* CSS3 */
}

.creaGalery-functionarea a
{
	color: #000;
	outline: none;
}

.creaGalery-functionarea a:hover
{
	color: #999;
}

.creaGalery-functionarea .area-unten
{
   position:absolute;
   bottom:10px;
   left:50%;
   margin-left: -110px;
   width: 220px;
}

#functionarea_bg {
   background-color: #F2F2F2;
   height: 350px;
}

.creaGalery-functions
{
   position:absolute;
   width:250px;
   height: 530px;
   margin:0;
   padding:0;
   right:0;
   z-index:1100;
   background:#000;
   color:white;
   text-align: center;
}
.creaGalery-functions-header
{
   color:#bbbbbb;
   letter-spacing: 1px;
   border-bottom: solid 1px #bbbbbb;
}
.creaGalery-functions-slideshow
{
   position: absolute;
   bottom:2px;
   left:3px;
   border: solid #bbbbbb 1px;
   width:240px;

    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -khtml-border-radius:8px;
    border-radius:8px;
}

.creaGalery-functions-slideshow-play,
.creaGalery-functions-slideshow-prev,
.creaGalery-functions-slideshow-next,
.creaGalery-functions-slideshow-alert
{
   width:25px;
   height:25px;
   cursor: pointer;
   display:inline-block;
   background-repeat: no-repeat;
   background-image: url('../../../data/templates/images/plugIcons.png');
}

.creaGalery-functions-slideshow-play
{
   background-position:-270px center;
}
.creaGalery-functions-slideshow-play:hover
{
   background-position:-292px center;
}
.creaGalery-functions-slideshow-play[status=on]
{
   background-position:-220px center;
}
.creaGalery-functions-slideshow-play[status=on]:hover
{
   background-position:-245px center;
}
.creaGalery-functions-slideshow-prev
{
   background-position:-60px center;
}
.creaGalery-functions-slideshow-prev:hover
{
   background-position:-92px center;
}
.creaGalery-functions-slideshow-next
{
   background-position:4px center;
}
.creaGalery-functions-slideshow-next:hover
{
   background-position:-28px center;
}
.creaGalery-functions-slideshow-alert
{
   background-position:-128px center;
}
.creaGalery-functions-slideshow-alert:hover
{
   background-position:-155px center;
}




.creaGalery-picture
{
   position:absolute;
   width:600px;
   height:500px;
   top:50%;
   left:0;
   margin:-280px 20px 20px;
   z-index:1100;
   background:black;
   text-align:center;
   vertical-align:middle;
}
.creaGalery-picture img
{
   z-index:1110;
   background:url('../../../includes/img/cgPreload.gif') center no-repeat;
}
.creaGalery-interactive-left,
.creaGalery-interactive-right
{
   width:54px;
   cursor: pointer;
   opacity:0.5;
   filter:Alpha(opacity=50);
   background-repeat: no-repeat;
   background-image: url('../../../data/templates/images/plugIcons.png');
}
.creaGalery-interactive-right
{
   right:0;
   background-position: -310px center;
}
.creaGalery-interactive-left
{
   left:0;
   background-position: -378px center;
}


.creaGalery-thumbbottom
{
   position:absolute;
   background:#222222;
   bottom:0;
   height:70px;
   width:100%;
   left:0;
}
.creaGalery-thumbline
{
   white-space: nowrap;
   position:absolute;
   z-index:1100;
   width:100%;
   height:70px;
   bottom:0;
}
.creaGalery-thumbcontainer
{
   cursor:pointer;
   display: inline-block;
   position: relative;
}
.creaGalery-thumb-active
{
   outline:double silver 3px;
}

.creaGalery-thumbcontainer img
{
   background:url('../../../includes/img/cgPreload.gif') center no-repeat;
   position:absolute;
}

.creaGalery-interactive
{
   position:absolute;
   z-index:1500;
   margin:20px;
}

.creaGalery-interactive-press
{
   position:absolute;
   top:0;
   height:100%;
   z-index:1550;
   cursor: pointer;
   display:inline;
}

.creaGalery-interactive-arrow
{
   position: absolute;
   top:0;
   height:100%;
   z-index:1555;
}

.creaGalery-thumbline-sLeft,
.creaGalery-thumbline-sRight
{
   position:absolute;
   bottom:0;
   opacity:0.2;
   filter:Alpha(opacity=20);
   min-width:54px;
   height: 70px;
   width: 70px;
   cursor: pointer;
   z-index:1500;
}
.creaGalery-thumbline-sLeft
{
   background: url('../../../data/templates/images/plugIcons.png') -370px center no-repeat #333333;
   left:0;
}
.creaGalery-thumbline-sRight
{
   background: url('../../../data/templates/images/plugIcons.png') -310px center no-repeat #333333;
   right:0;
}
.creaGalery-thumbline-sLeft:hover,
.creaGalery-thumbline-sRight:hover
{
   opacity:0.7;
   filter:Alpha(opacity=70);
}