/*
=================================== 
        LIGHTBOX GALLERY
=================================== 
*/

.fpro_thumbsDesc {
font-family: arial, sans-serif;
font-size: 14px;
line-height: 1.2em;
padding: 0 6px 4px 6px; 
margin: 0;
}

.fpro_thumbsDescContainer {
display: inline-block; 
margin-bottom: 3px;
}



/*
=================================== 
         ONPAGE GALLERY
=================================== 
*/

div.fproGalleryOP {
height: 1px;
margin: -60px 0 60px 0; 
}

.fproPrevNextButton {
border: 0;
margin: 0 6px -8px 6px;
}

.fproOPdescription {
padding: 6px 0 12px 0;
margin: 0;
}

span.fproOPcounter {
font-size: 16px;
font-weight: 700;
line-height: 30px;
}

.fproOP_bigImage {}



/*
=================================== 
            BACKEND
=================================== 
*/

.fpro_loading {
float: left;
background: #fff url(../images/loading.gif) right 16px top 0 no-repeat;
color: #610;
font-size: 16px; 
text-align: left; 
border: 3px solid #ccc;
border-radius: 9px;
padding: 60px 96px 24px 24px; 
margin: 12px auto;
}

.fpro_submitButton {
background: url(../images/button.jpg) repeat-x;
border: 1px solid #999;
border-radius: 3px;
padding: 1px 6px 3px 6px;
}

.fpro_backtoGallery {
clear: left; 
font-size: 18px; 
margin: 24px 0 6px 0;
}


/* gallery */

#fproLbMain input.text {
box-sizing: border-box;
background: #fff;
color: #222;
}

.fpro_admin_no_gallery_selected {
width: 100%;
float: left;
background: #900; 
color: #fff; 
text-align: center; 
padding: 8px 0;
margin: 12px 0 0 0;
}

.fpro_admin_selected_gallery {
width: 100%;
float: left;
background: #060; 
color: #fff; 
text-align: center; 
padding: 8px 0;
margin: 12px 0 0 0;
}

.fpro_admin_nav_intern {
clear: both;
width: 100%;
float: left;
background: #bcb;
color: #930;
text-align: center;
padding: 8px 0;
margin: 0 0 12px 0;
}

.fpro_admin_nav_intern a:link {color: #258; text-decoration: none;}
.fpro_admin_nav_intern a:visited {color: #258; text-decoration: none;}
.fpro_admin_nav_intern a:hover {color: #c60; text-decoration: underline;}
.fpro_admin_nav_intern a:active {color: #c60; text-decoration: underline;}
.fpro_admin_nav_intern a:focus {color: #c60; text-decoration: underline;}

.fpro_admin_nav_intern_anchor {
padding-top: 36px;
margin: 0;
}

#FotoProAdminLbGallery {
background: #ddd;
color: #000;
border: 1px solid #666;
padding: 6px 20px 20px 20px;
margin: 16px 0;
}

#FotoProAdminLbGallery a:link {color: #258; text-decoration: none;}
#FotoProAdminLbGallery a:visited {color: #258; text-decoration: none;}
#FotoProAdminLbGallery a:hover {color: #c60; text-decoration: underline;}
#FotoProAdminLbGallery a:active {color: #c60; text-decoration: underline;}
#FotoProAdminLbGallery a:focus {color: #c60; text-decoration: underline;}

#FotoProAdminLbGallery textarea {
width:96%; 
height: 120px; 
background: #fff; 
color: #222;
font-family: courier new, monospace; 
font-size: 15px; 
border: 1px solid #999; 
padding: 3px 6px; 
}

/* images data */

#FotoProAdminImages {
margin: 16px 0 0 0;
}

div.FotoProAdminImagesDatafield {
float: left; 
background: #ccc; 
color: #444;
font-size: 14px; 
line-height: 24px; 
border: 3px solid #999; 
padding: 4px 0 2px 12px; 
margin: 0 8px 24px 0; 
overflow: hidden;
}

div.FotoProAdminImagesDatafield img {
max-height: 120px; 
border: 1px solid #666; 
margin: 4px auto 0 auto;
}

#FotoProAdminImages textarea {
width: 90%; 
height: 60px; 
background: #fff; 
color: #222;
font-family: arial, sans-serif; 
font-size: 14px; 
border: 1px solid #999; 
padding: 4px; 
}



/*
=================================== 
         SHUTTER MOBILE
=================================== 
*/

div#shShutter {
border: 0px solid #060;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
padding: 0;
margin: 0;
z-index: 1000;
opacity: 0.86;
transition: opacity 1s;
}

div#shDisplay {
border: 0px solid #c60;
position: absolute;
top: 0;
left: 0;
width: 100%;
display: block;
box-sizing: border-box;
z-index: 1010;
}

div#shWrap {
width: 100%;
visibility: hidden;
}



/* Navigation */

div#shNavBar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 28px;
background: #000;
color: #999;
font: normal 16px arial, sans-serif;
padding: 0 0 9px 0;
margin: 0 auto;
text-align: center;
opacity: 0.8;
animation: opacity08 1s;
z-index: 1020;
}

#shNavBar #shDownload {
display: none;
}

#shNavBar img {
border: 0;
border-radius: 0;
padding: 0;
margin: 0;
cursor: pointer;
}

#shNavBar a {
color: #999;
text-decoration: none;
cursor: pointer;
}

#shNavBar a:hover {
color: #fff;
}

#shNavBar .shNum {
display: inline-block;
min-width: 50px;
color: #aaa;
text-align: center;
}

#shNavBar .shNum:hover {
color: #999;
}

#shNavBar .shFullsize {
display: inline-block; 
min-width: 50px;
}



/* big image / grosses Bild */

#shImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: transparent;
border: 0px solid #c60;
margin: 40px 0 0 0;
}

#shImage img {
max-width: none!important;
}

#shSlide {
transition: margin 0.6s;
}

img#shTopImg {
box-sizing: border-box;
margin: 0 auto;
border: 1px solid #999;
display: block;
opacity: 1;
animation: opacity 1s;
z-index: 9000;
}

#shSwipe {border: 0px solid #090;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
}



/* short description / Bildbeschreibung */

div#shTitle {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #000;
color: #999;
font-family: arial, sans-serif;
font-size: 16px;
line-height: 20px;
font-weight: 400;
text-align: center;
box-sizing: border-box;
padding: 4px 12px 12px 12px;
margin: 0;
opacity: 0.8;
animation: opacity08 1s;
}



/* the rest / sonstiges */

div#shWaitBar {
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
margin-top: 120px;
}

#shWaitBar img {
border: 0;
}

@keyframes opacity{from{opacity:0;}to{opacity:1;}}
@keyframes opacity08{from{opacity:0;}to{opacity:0.8;}}
@keyframes opacity086{from{opacity:0;}to{opacity:0.86;}}