/**************************************************************************************************/
/* Image Selection Gallery                                                                        */
/* Copyright Frank Merfort                                                                        */
/* Info and download: http://www.frank-merfort.de/image-selection-gallery.html                    */
/* License:           http://www.frank-merfort.de/image-selection-gallery-license.html            */
/**************************************************************************************************/
 
/**************************************************************************************************/
/* Registrierung                                                                                  */
/**************************************************************************************************/

body#registration-page div#error-area {
    height: 100px;
    padding-top: 10px;
}

body#registration-page div#registration-div {
    width: 300px;
    margin: 0px auto 0px auto;
    text-align: center;
    border: 1px solid #999;
    border-radius: 10px;
}

body#registration-page form {
    display: inline-block;
    margin: 15px;
}

body#registration-page input[type="text"],
body#registration-page input[type="password"] {
    width: 130px;
}

body#registration-page tr#button input {
    margin-top: 10px;
}

/**************************************************************************************************/
/* Ende Registrierung                                                                             */
/**************************************************************************************************/

/**************************************************************************************************/
/* Login                                                                                          */
/**************************************************************************************************/

div#error-area {
    height: 150px;
    padding-top: 10px;
}

div#login-public-galleries {
    float: left;
    height: 665px;
    width: 240px;
    border: 1px solid #bbb;
    background-color: #ddd;
    border-radius: 4px;
    overflow: auto;
}

div#login-public-galleries-header {
    font-weight: bold;
    background-color: #d0d0d0;
    padding: 0px 4px;
}

ul.tree {
    margin: 0px;
}

ul.tree ul {
    margin: 0px 0px 0px 18px;
}

ul.tree li {
    list-style: none;
}

ul.tree a {
    outline: none;
    display: block;
    text-decoration: none;
    color: #000;
    padding: 0px 4px;
}

.treegallery {
    width: 13px;
    height: 13px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(../sprite.png);
    margin-right: 3px;
    background-position: -120px -200px;
}

div#login-area.galleries-visible {
    margin-left: 250px;
}

div#login-form-area {
    width: 300px;
    margin: 0px auto 0px auto;
    border: 1px solid #999;
    background-color: #e4e4e4;
    text-align: center;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #666;
}

form#login {
    display: inline-block;
    margin: 15px;
}

form#login input[type="text"],
form#login input[type="password"] {
    width: 130px;
}

form#login td.center {
    text-align: center;
}

form#login tr#button input {
    margin-top: 10px;
}
/**************************************************************************************************/
/* Ende Login                                                                                     */
/**************************************************************************************************/

/**************************************************************************************************/
/* Info- und Hilfeseite                                                                           */
/**************************************************************************************************/

body#infopage .ui-tabs .ui-tabs-panel {
    min-height: 554px;
    max-height: 554px;
}

img.info-image {
    display: block;
    margin: 15px auto 15px auto;
}

table.description {
    margin-left: 5px;
    border-spacing: 0px;
}

table.description td {
    vertical-align: top;
    padding-left: 10px;
}

body#infopage div#control {
    margin: 0px 0px 10px 0px;
}

input#showInfo {
    margin-left: 20px;
}

/**************************************************************************************************/
/* Ende Info- und Hilfeseite                                                                      */
/**************************************************************************************************/

/**************************************************************************************************/
/* Sterne und Farb-Links für die Thumbnail-Übersicht und die Einzelbildansicht                    */
/**************************************************************************************************/

div#control a:hover {
    background-color: transparent;
}

/* Sterne */
.star.off { background-position: 0px -100px; }
.star.on { background-position: -20px -100px; }
a.star.on:hover, a.star.off:hover { background-position: -40px -100px; }

/* Farbauswahl */
.color.c1off { background-position: 0px 0px; }
.color.c1on { background-position: -20px 0px; }
a.color.c1off:hover, a.color.c1on:hover { background-position: -40px 0px; }

.color.c2off { background-position: 0px -20px; }
.color.c2on { background-position: -20px -20px; }
a.color.c2off:hover, a.color.c2on:hover { background-position: -40px -20px; }

.color.c3off { background-position: 0px -40px; }
.color.c3on { background-position: -20px -40px; }
a.color.c3off:hover, a.color.c3on:hover { background-position: -40px -40px; }

.color.c4off { background-position: 0px -60px; }
.color.c4on { background-position: -20px -60px; }
a.color.c4off:hover, a.color.c4on:hover { background-position: -40px -60px; }

.color.c5off { background-position: 0px -80px; }
.color.c5on { background-position: -20px -80px; }
a.color.c5off:hover, a.color.c5on:hover { background-position: -40px -80px; }

/**************************************************************************************************/
/* Ende Sterne und Farb-Links für die Thumbnail-Übersicht und die Einzelbildansicht               */
/**************************************************************************************************/

/**************************************************************************************************/
/* Thumbnail-Übersicht                                                                            */
/**************************************************************************************************/

body#thumbnailspage div#control {
    margin-top: 0px;
}

div#leftarea {
    float: left;
    padding-bottom: 5px;
    position: relative;
    z-index: 10;    /* für IE 7 wichtig */
}

div#rightarea {
    float: right;
}

/* Menü */
.menuIcon { background-position: -80px -220px; }
a.menuIcon:hover { background-position: -100px -220px; }

/* Icon Kennwortänderung */
.changePasswordIcon { background-position: -120px -80px; }

/* Galerieauswahl */
.gallerySelectionIcon { background-position: -100px -140px; }
a.gallerySelectionIcon:hover { background-position: -120px -140px; }

ul.popup-menu {
    list-style-type: none;
    margin: 0px;
    float: left;
    margin-right: 5px;
}

ul.popup-menu ul {
    margin: 0px;
    position: absolute;
  	display: none; 
    list-style-type: none;
    z-index: 1000;
    top: 20px;
    background-color: #eee;
    border: 1px solid #333;
    padding: 0px 0px;
}

ul.popup-menu a {
	text-decoration: none;
    color: #000;
}

ul.popup-menu li li {
    padding: 1px 3px;
}

ul.popup-menu li li:hover {
    background-color: #d0d0d0;
}

ul.popup-menu.css-activated li:hover ul {
    display: block;
}

div#leftarea span#arrows {
    margin-left: 5px;
    vertical-align: text-bottom;
}

div#leftarea span#pageinfo {
    margin-left: 10px;
}

div#leftarea a#goto-login-page {
    margin-left: 10px;
}

div#rightarea span#filter,
div#rightarea span#actions {
    margin-left: 15px;
}
div#rightarea span#colors {
    margin-left: 5px;
}

/* Vergleichsansicht */
.compareView { background-position: -100px -100px; }
a.compareView:hover { background-position: -120px -100px; }

/* Schalter Sterneanzeige unter den Thumbnails */
span.showstars.on { background-position: 0px -180px; }
span.showstars.off { background-position: -20px -180px; }

/* Schalter Farbenanzeige unter den Thumbnails */
span.showcolors.on { background-position: 0px -200px; }
span.showcolors.off { background-position: -20px -200px; }

/* Schalter Kommentare in den Thumbnails anzeigen ja/nein */
span.showcomments.on { background-position: 0px -260px; }
span.showcomments.off { background-position: -20px -260px; }

/* Schalter Filter ein-/ausschalten */
.filterswitch.on { background-position: 0px -160px; }
a.filterswitch.off { background-position: -20px -160px; }
a.filterswitch.on:hover { background-position: -40px -160px; }
a.filterswitch.off:hover { background-position: -60px -160px; }

/* Filter zurücksetzen */
.reset { background-position: -60px -100px; }
a.reset:hover { background-position: -80px -100px; }

/* Vergleichsoperator für die Sterne */
.operation.op1 { background-position: 0px -140px; }
.operation.op2 { background-position: -20px -140px; }
.operation.op3 { background-position: -40px -140px; }

/* Link Download */
.download { background-position: -120px -160px; }
a.download:hover { background-position: -120px -180px; }

/* Link Bewertungen senden */
.sendresult { background-position: -80px -20px; }
a.sendresult:hover { background-position: -80px -40px; }

/* Link Logout */
.logout { background-position: -60px -120px; }
a.logout:hover { background-position: -80px -120px; }

/* Link Hilfe */
.help { background-position: -60px -140px; }
a.help:hover { background-position: -80px -140px; }

/* Link Kommentare */
.comments.s0 { background-position: 0px -240px; }
a.comments.s0:hover { background-position: -20px -240px; }
.comments.s1 { background-position: -40px -240px; }
a.comments.s1:hover { background-position: -60px -240px; }
.comments.s2 { background-position: -80px -240px; }
a.comments.s2:hover { background-position: -100px -240px; }

a#commentsLink {
    margin-left: 5px;
}

/* Liste mit den Thumbnails */
ul.thumbnails {
    clear: both;
    margin: 0px;
    padding-top: 2px;
    position: absolute;
    top: 15px;
}

li.thumbnail {
    list-style: none;
    float: left;
    width: 160px;
    height: 160px;
    background-color: #909090;
    text-align: center;
    margin: 0px 1px 1px 0px;
}

li.thumbnail div {
    position: relative;
    margin-top: 7px;
    
}

li.thumbnail a {
    width: 160px;
    height: 120px;
    display: table-cell;
    vertical-align: middle;
}

li.thumbnail img {
    max-height: 120px;
    max-width: 120px;
    border: solid 1px #000;
    box-shadow: 2px 2px 4px 2px #444;
}

li.thumbnail:hover,
li.thumbnail a:hover {
    background-color: #a8a8a8;
}

li.thumbnail.selected {
    background-color: #6a6c79;
}

li.thumbnail.selected:hover,
li.thumbnail.selected a:hover {
    background-color: #7a7c8b;
}

/* Sterne und Farben unter dem Thumbnail */
li.thumbnail span span {
    margin-top: 10px;
    padding-left: 0px;
    width: 14px;
    height: 13px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(../sprite.png);
    background-position: 0px -120px;
}

li.thumbnail span.star { background-position: -20px -120px; }
li.thumbnail span.stars { margin-right: 2px; }
li.thumbnail span.colors { margin-left: 2px; }
li.thumbnail span.color0 { background-position: -80px 0px; }
li.thumbnail span.color1 { background-position: -60px 0px; }
li.thumbnail span.color2 { background-position: -60px -20px; }
li.thumbnail span.color3 { background-position: -60px -40px; }
li.thumbnail span.color4 { background-position: -60px -60px; }
li.thumbnail span.color5 { background-position: -60px -80px; }

span.commentMark.on {
    position: absolute;
    width: 13px;
    height: 13px;
    left: 5px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(../sprite.png);
    background-position: -100px -80px;
}
span.commentMark.off {
}

/* Download-Dialog */
div#downloaddialog {
    display: none;
}

div#downloaddialog span#ddColors {
    margin-left: 2px;
}

div#downloaddialog ul#downloadGalleries {
    margin: 0px;
    list-style-type: none;
}

div#downloaddialog select#ddSelection {
    width: 200px;
}

div#downloaddialog select#ddStarsOperator {
    width: 130px;
}

div#downloaddialog select#ddStars {
    width: 40px;
}

div#downloaddialog select#ddComments {
    width: 70px;
}

/* Kennwort-Dialog */
body#thumbnailspage div#password-dialog {
    display: none;
}

/**************************************************************************************************/
/* Ende Thumbnail-Übersicht                                                                       */
/**************************************************************************************************/

/**************************************************************************************************/
/* Einzelbildansicht-Overlay                                                                           */
/**************************************************************************************************/

div#overlay.image-overlay {
    background-color: #000;
}

div#imagecontrol {
    display: none;
    position: fixed;
    z-index: 1001;
    top: 0px;
    left: 0px;
    width: 800px;
    background-color: #ddd;
    padding: 4px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

div#left-imagecontrol {
    float: left;
}

div#right-imagecontrol {
    float: right;
}

span#imageinfo,
span#options,
span#image-stars,
span#image-colors {
    vertical-align: middle;
    margin-left: 20px;
}

div#imagepanel {
    display: none;
    position: fixed;
    background-color: #f8f8f8;
    z-index: 1001;
}

/** Fix für den Bug im Firefox 10: dieser faded die Fotos nicht nach transparent sondern nach schwarz */
div#imagepanel img {
    background-color: #f8f8f8;
}

div#imagepanel a:hover {
    background-color: transparent;
}

/* Diashow */
.diashow.start { background-position: -120px 0px; }
a.diashow.start:hover { background-position: -120px -20px; }
.diashow.stop { background-position: -120px -40px; }
a.diashow.stop:hover { background-position: -120px -60px; }

/**************************************************************************************************/
/* Ende Einzelbildansicht-Overlay                                                                           */
/**************************************************************************************************/

img.compareImage {
    position: fixed;
    z-index: 1001;
    border: 5px solid #eee;
    margin: 10px;
}
img.compareImage.selected {
    border: 5px solid #7a7c8b;
}

div#closeIcon {
    position: fixed;
    z-index: 1002;
    width: 20px;
    height: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(../sprite.png);
    background-position: -100px -120px;
}
div#closeIcon:hover {
    background-position: -120px -120px;
}

/**************************************************************************************************/
/* Einzelbildansicht                                                                              */
/**************************************************************************************************/

body#imagepage div#content {
    min-height: 0px;
}

body#imagepage div#control {
    margin-top: 0px;
    text-align: center;
}

body#imagepage span#imageinfo,
body#imagepage span#options,
body#imagepage span#stars,
body#imagepage span#colors {
    vertical-align: middle;
    margin-left: 20px;
}

/* Index */
.index { background-position: -80px -80px; }
a.index:hover { background-position: -80px -60px; }

/* vorheriges Foto */
.prev { background-position: -100px -160px; }
a.prev:hover { background-position: -100px -180px; }
a.prev.off { background-position: -100px -200px; }

/* nächstes Foto */
.next { background-position: -80px -160px; }
a.next:hover { background-position: -80px -180px; }
a.next.off { background-position: -80px -200px; }

/* Schalter automatischen Weitergehen beim Setzen von Sternen */
.autoforward.on { background-position: 0px -220px; }
.autoforward.off { background-position: -20px -220px; }
a.autoforward.on:hover { background-position: -40px -220px; }
a.autoforward.off:hover { background-position: -60px -220px; }

/* Editieren */
.editimage.nodata { background-position: -100px 0px; }
a.editimage.nodata:hover { background-position: -100px -20px; }
.editimage.data { background-position: -100px -40px; }
a.editimage.data:hover { background-position: -100px -60px; }

/* Foto */
img.image {
    display: block;
    text-align: center;
    max-width: 920px;
    margin: 0px auto 12px auto;
    border: solid 10px #FFF;
    box-shadow: 5px 5px 7px 3px #666;
}

div#noimage {
    margin: 200px 0px;
    text-align: center;
}

div#editpanel {
    clear: both;
    text-align: center;
}

form#imageform textarea {
    margin-top: 10px;
    height: 110px;
	width: 90%;
}

/**************************************************************************************************/
/* Ende Einzelbildansicht                                                                         */
/**************************************************************************************************/

/**************************************************************************************************/
/* Bewertungen abschicken                                                                         */
/**************************************************************************************************/

ul.galleryList {
    list-style-type: none;
    margin: 0px;
}

form#sendresult textarea {
    height: 400px;
	width: 700px;
}

form#sendresult tr#button td {
    text-align: center;
}

form#sendresult tr#button input {
    margin-top: 10px;
}

/**************************************************************************************************/
/* Ende Bewertungen abschicken                                                                    */
/**************************************************************************************************/