/* Loading Image */
body{
overflow: hidden;
font-family: 微軟正黑體, 新細明體, Arial, sans-serif;
margin:10px;
}
#main{
float:left;
width:100%;
overflow-y: auto;
display: block;
}
.dark{
background-color: #000;
color:#fff;
}
.light{
background-color: #fff;
color:#000;
}
div.gallerie-loading {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
width: 126px;
height: 22px;
margin: auto;
z-index: 10000;
background: url("loading.gif");
}

/* Image Index and Title Text */
.gallerie-text {
/*max-width: 60%;*/
/* width: 350px; */
width:20%;
margin: 5px;
vertical-align: middle;
word-break: normal;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.gallerie-text div {
width: 100%;
text-overflow: ellipsis;
}

/* Image Title Text */
.gallerie-title {

}

/* Image Index */
.gallerie-index {

}

/* Gallerie Controls */
.gallerie-control {
font-size: 1.8em;
min-width: 40px;
min-height: 40px;
padding: 5px;
margin: 0px;
border: 2px solid transparent;
vertical-align: top;

border-radius: 100%;

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

transition: all 500ms;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;

background-image:url(style.png);
}

.gallerie-control:hover {
border: 2px solid white;
border-radius: 100%;
cursor: pointer;
}

.gallerie-control-first{
background-position: 0 -96px;
}

.gallerie-control-previous{
background-position: 0 0;
}

.gallerie-control-next {
background-position: 0 -48px;
}

.gallerie-control-last{
background-position: 0 -144px;
}

.gallerie-down-control{
background-position: 0 -192px;
}

.gallerie-up-control{
background-position: 0 -240px;
}

.gallerie-control-play{
background-position: 0 -293px;
}

.gallerie-control-pause{
background-position: 0 -341px;
}

.gallerie-control-full{
background-position: 0 -390px;
}

.gallerie-upload-facebook{
background-position: 0 -438px;
}

/* Gallery Overlay */
.gallerie-overlay {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color:rgba(0,0,0,0.9);
/*z-index: 1000;*/
z-index: 2;
}

/* Image Box Container */
.gallerie-imagebox {
width: 100%;
height: 70%;
position: relative;
top: 0px;
left: 0px;
margin: 40px 0px;
}

.gallerie-imagebox img {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
border: 4px solid white;
border-radius: 5px;

transition: all 500ms;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
}

.gallerie-imagebox:after { 
content: "."; 
visibility: hidden; 
display: block; 
height: 0; 
clear: both;
}

/* Caption Box Container */
.gallerie-captionbox {
color: white;
width: 100%;
height: 50px;
position: relative;
top: 0px;
left: 0px;
text-align: center;
padding: 5px 0px 15px 0px;
}

.gallerie-captionbox:after { 
content: "."; 
visibility: hidden; 
display: block; 
height: 0; 
clear: both;
}

.gallerie-captionbox > div {
display: inline-block;
}

/* Thumb Box Container */
.gallerie-thumbbox {
height: 100px;
min-width: 100%;
position: relative;
top: 0px;
left: 0px;
margin: 0px auto;
text-align: center;
float: left;
white-space: nowrap;
}

.gallerie-thumbbox ul {
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
left: 0px;
}

.gallerie-thumbbox li {
width: 75px;
height: 75px;
display: inline-block;
text-align: center;
margin: 0px 10px 0px 10px;
cursor: pointer;
}

.gallerie-thumbbox img {
max-width: 100%;
max-height: 100%;
border: 2px solid #fff;
border-radius: 5px;
opacity: 0.60;
vertical-align: middle;
}

.gallerie-thumbbox-hover img {
opacity: 1.0;
border-color: #0ff;
}

.gallerie-thumbbox-selected img {
opacity: 1.0;
border-color: #ff0;
}

.gallerie-close {
float:right;
}

.gallerie-playpause-control{
float:left;
}

.gallerie-showhide-control{
float:right;
}

.gallerie-control-full{
float:right;
}

#gallery-title{
/* color: #ffffff; */
font-size: 1.2em;
display: block;
width: 100%;
text-align: center;
z-index: 9999;
/*position: fixed;*/
position: relative;
}

#gallery-desc{
/* color: #ffffff; */
font-size: 1.2em;
display: block;
width: 100%;
position: relative;
}

#gallery {
margin-left: auto;
margin-right: auto;
}

#gallery #source > a {
margin: 3px;
}

#gallery #source > a img {
border: 1px solid #fff;
border-radius: 5px;
opacity: 0.9;

transition: all 500ms;
-webkit-transition: all 500ms;
-moz-transition: all 500ms;
-ms-transition: all 500ms;
-o-transition: all 500ms;
z-index: 1;
position: relative;
}

#gallery #source > a img:hover {
border-color: yellow;
opacity: 1.0;
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
z-index: 10;
}

#gallery #source .slide_image{
width: 184px;
height: 133px;
float: left;
overflow: hidden;
z-index: 1;
border: 1px solid #fff;
background-color: #fff;
position: relative;
text-align: center;
margin:2px;
/* margin:7px; */
border-radius: 5px;
}

#gallery #source .slide_image a {
    display: block;
}
#gallery #source .slide_title{
color: #ffffff;
font-size: 0.8em;
position: absolute;
left: 0px;
bottom: 0px;
background-color:#000000;
width:100%;
filter:alpha(opacity=70);
-moz-opacity:0.7;
opacity: 0.7;
display: none;
}

#gallery #source .slide_image:hover .slide_title{
display:block;    
}

#gallery-nav-bar{
/* color:#ffffff; */
padding: 2px 2px 10px 0;
line-height: 16px;
display: block;
}

#gallery-nav-bar span{
/* color: #ffffff; */
white-space: nowrap;
font: normal 14px arial,tahoma,helvetica,sans-serif;
}
#gallery-nav-bar a{
cursor: pointer;
text-decoration: none;
}
#gallery-nav-bar a:hover{
text-decoration: underline;
}
#btnOption{
float: left;
width: 100%;
margin: 0;
padding: 0;
}
#btnOption .navDiv{
margin: 20px 0 10px 0;
}

.tab-ctl-x:focus {
transition: all .2s ease-in-out;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
outline-style: dashed;
outline-color: #ff0000;
outline-width: 2px;
outline-offset: -2px;
}