/*
    Slide show stuff
    */


#Main {
    margin-left:0px
}

.SlideShow{

position: relative;

/*float:left;*/


width:900px;
display: block;
/*overflow: hidden;*/
height:650px;

}

@media (max-height: 100px) {
    .SlideShow {
        height: 420px;
        width: 700px;
    }

}



.SlideShow figure{
position: absolute;


width:100%;
height:100%;

opacity: 0;
transition: 1s opacity;

}
.SlideShow figure.show{
opacity: 1;
position:absolute;
transition: 1s opacity;
}

.SlideShow figcaption{
position: absolute;
font-family: sans-serif;
font-size: .8em;
bottom: .75em;
right: .35em;
padding: .25em;
color: #fff;
background: rgba(0,0,0, .25);
border-radius: 2px;
}

.SlideShow figcaption a{
color: #fff;
}

#PictureArea {
    background-color:white;
    /*height:620px;*/
    height:100%;
    width: 100%;
    left:0px;
    top:0px;
    position:absolute;
}

@media (max-height: 100px) {
    #PictureArea {
        height: 390px;
        width: 700px;
    }

}

#PanelArea {
    float:right;
    width:100px;
    height:600px;
    overflow:hidden;
    margin:20px;
    position:relative;

}
    #PanelArea label {
          font-size: 0.8em;
          font-weight:normal;
    }
#imageFile {
    /*
     bottom:0px;
    position:absolute;
    */
    font-size: 0.8em;

}
#imageCommentLabId {
    font-size: 0.8em;

}



#imageComments {
    font-size: 1.0em;
    width:100%;
    height:400px;
    padding:2px;
    background-color:white;
    overflow:auto;
}

#bottomPart {
    
}
#bottomTable {
    width: 100%;
    bottom:0px;
    position:absolute;
}
#imageComment {
    /*
    bottom:40px;
    position:absolute;
    font-size: 0.8em;
    display:block;
    width:100%;
    */
    width:100%;

}


/*
#imageCommentLabId {
    bottom:140px;
    position:absolute;
    font-size: 0.8em;

}
*/
/* both buttons */

.SlideShow  .nextButton, .prevButton{
color: #000;
position: absolute;
background-color:white;
top: 50%;
z-index: 1;
font-size: 4.1em;
opacity: .2;
user-select: none;
}


.SlideShow .nextButton:hover, .prevButton:hover{
cursor: pointer;
opacity: 1;
}


#ControlArea:hover {
cursor: pointer;
opacity: 1;
transition: 1s opacity;
}

/* Next */
.nextButton{
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
right: 0px;
}





/* Control Bar buttons */



#ControlArea {
    opacity:0;
    background-color:grey;
    color:black;
    position:absolute;
    bottom:0px;
    width:100%;
    height:30px;
    position:absolute;
}



.SlideShow .barNextButton:hover, .barPrevButton:hover{
cursor: pointer;
opacity: 1;
}

/*
.SlideShow  .barNextButton, .barPrevButton{
color: black;
position: absolute;
z-index: 1;
font-size: 1.1em;
opacity: .3;
user-select: none;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
padding: 10px 10px 0px 5px;
bottom:0px;
text-decoration:none;
}
*/

.SlideShow  .barNextButton, .barPrevButton{
margin-left:0px;
margin-right:auto;
display:block;
width:45px;
}

.SlideShow .barNextButton{



margin-left:auto;
margin-right:0px;
display:block;
width:45px;



}



.SlideShow .barPrevButton{
/*
left: 0px;
position:absolute;
*/

}

.SlideShow .barPlayButton{
margin-left:auto;
margin-right:auto;
display:block;
width:45px;
text-align:center;
}
.SlideShow .barStopButton{
margin-left:auto;
margin-right:auto;
display:none;
width:45px;
text-align:center;
}




/*Image    */

.SlideShow img {
    max-width:100%;
    max-height:100%;
    position:absolute;
}
#imageHeaderId {
    height:30px;
    width:600px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
    font-size: 1.7em;
    color:black;
}
#GalleryPictureArea img:hover {
    cursor:pointer;
opacity: 1;

}
.button {
    font: bold 11px Arial;
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;
    margin-top:50px;
}