/**************************************************************************************************/
/* 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            */
/**************************************************************************************************/

* {
    margin: 0px;
    padding: 0px;
}

html {
	height: 101%;
}

body {
    background: url(../body-bg.gif) repeat #999;
    color: #000;
    font-family: Calibri,Arial,Verdana,Helvetica,sans-serif;
    font-size: 1.0em;
    line-height: 1.3em;
}

h1 {
    font-size: 1.3em;
    text-align: center;
    border-bottom: solid 1px #999999;
    margin-bottom: 5px;
}

h2 {
    font-size: 1.2em;
    margin-top: 10px;
    margin-bottom: 7px;
}

h3 {
    font-size: 1.1em;
    margin-top: 10px;
}

p {
    margin-bottom: 5px;
}

a {
    color: #000066;
}

a:hover {
    background-color: #bbb;
}

a img {
    border-style: none;
}

a.imageLink:hover {
    background-color: transparent;
}

ul {
    margin: 10px 0px 10px 25px;
}

th {
    font-size: 1.1em;
}

hr {
    margin: 8px 0px;
}

div#page {
    background-color: #eee;
    width: 980px;
    margin: 5px auto 15px auto;
    box-shadow: 4px 4px 6px 5px #777;
}

div#content {
    padding: 6px;
    min-height: 670px;
}

div#footer {
    background-color: #aaa;
    text-align: center;
    padding: 5px 0px;
}

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

div#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #aaaaaa;
    z-index: 1000;
}

/* Message-Box für Meldungen bzw. Warteanzeigen */
div#message-box {
    font-size: 2em;
    text-align: center;
    display: none;
    position: fixed;
    width: 800px;
    left: 50%;
    top: 300px;
    background-color: #f8f8f8;
    border: 6px solid #aaa;
    border-radius: 16px;
    padding: 0.6em 0em;
    margin-left: -400px;
    z-index: 1010;
}
div#message-box img {
    vertical-align: middle;
    margin: 0px 20px;
}

/* Fehlermeldungen */
p.error {
    color: #ff0000;
    font-size: 1.4em;
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.spriteimage {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(../sprite.png);
}
.spriteimage:hover {
    background-color: transparent;
}

.ok {
    color: #238e23;
}

.notok {
    color: #f00;
}

/**************************************************************************************************/
/* Formulare allgemein                                                                            */
/**************************************************************************************************/
form td.label {
    text-align: right;
}

form td.alignTop {
    vertical-align: top;
}

label {
	cursor: pointer;
}

label, input, select, textarea {
    margin: 2px 1px;
}

input.field {
    height: 20px;
}

.field {
    background-color: #ffffff;
    color: #000;
	border: 1px solid #ddd;
}

.field:hover {
	border: 1px solid #aaa;
}

.field:focus {
	background-color: #f6f6f6;
	border: 1px solid #aaa;
}

select {
    padding: 0px;
    background-color: #ffffff;
    color: #000;
}

input#button {
    margin: 10px 0px;
}

input[type="radio"] {
    margin-right: 3px;
}
/**************************************************************************************************/
/* Ende Formulare allgemein                                                                       */
/**************************************************************************************************/

/**************************************************************************************************/
/* jQuery UI                                                                                      */
/**************************************************************************************************/

/* Tabs */
.ui-tabs {
    padding: 0px;
    height: 100%;
}
.ui-tabs .ui-tabs-nav {
    margin: 0; padding: 0px;
}
.ui-tabs .ui-tabs-nav li a {
    padding: 0.2em 0.8em;
}
.ui-tabs .ui-tabs-panel {
    padding: 0.4em 0.4em;
    overflow: auto;
}

/* Header vom Dialog und der Tab-Leiste */
.ui-widget-header {
    background: #cccccc repeat-x url(../../jquery/images/ui-bg_highlight-soft_75_cccccc_1x100.png);
}

/* Inhalt von Dialogen */
.ui-widget-content {
    background-color: #ffffff;
    background-image: none;
    color: #222222;
}
.ui-widget-content a {
    color: #000066;
}

/* Overlay für Dialoge */
.ui-widget-overlay {
    background-color: #aaaaaa;
    background-image: none;
}

/* Buttons im Dialog mittig platzieren */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
    text-align: center;
}

/* Rand um die Buttons im Dialog */
.ui-dialog .ui-dialog-buttonpane {
    padding: 0.3em 1em 0.1em 1em;
}
.ui-dialog .ui-dialog-buttonpane button {
    margin: 0.3em 1em;
}

/* Rand um Text im Button */
.ui-button-text-only .ui-button-text {
    padding: 0.2em 0.7em;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    color: #000;
}

.jquery-image {
    width: 16px;
    height: 16px;
    position: relative;
    top: 3px;
    display: inline-block;
    background-repeat: no-repeat;
    background-repeat: no-repeat;
    background-image: url("../../jquery/images/ui-icons_888888_256x240.png");
}

/**************************************************************************************************/
/* Ende jQuery UI                                                                                 */
/**************************************************************************************************/

.gradient-button.icon-button {
    padding-left: 4px;
}

a.gradient-button,
button.gradient-button,
input[type="submit"] {
    padding: 4px 9px 5px 8px;
	text-decoration: none;
    color: #444;
    text-shadow: 0px 1px 1px #888;
    border:1px solid #999;

    background-color: transparent;
    background: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#c0c0c0));
    background: -webkit-linear-gradient(top, #e0e0e0, #c0c0c0);
    background: -moz-linear-gradient(top, #e0e0e0, #c0c0c0);
    background: -o-linear-gradient(top, #e0e0e0, #c0c0c0);
    background: linear-gradient(top, #e0e0e0, #c0c0c0);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorStr='#e0e0e0', endColorStr='#c0c0c0');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#e0e0e0', endColorstr='#c0c0c0')";
    
    box-shadow: inset 1px 1px 0px #eee, inset -1px -1px 0px #666;
    border-radius: 6px;
}

a.gradient-button:hover,
a.gradient-button:focus,
button.gradient-button:hover,
button.gradient-button:hover,
input[type="submit"]:hover,
input[type="submit"]:focus {
    border:1px solid #bbb;
    background-color: #d0d0d0;
    background: -webkit-gradient(linear, left top, left bottom, from(#d0d0d0), to(#b0b0b0));
    background: -webkit-linear-gradient(top, #d0d0d0, #b0b0b0);
    background: -moz-linear-gradient(top, #d0d0d0, #b0b0b0);
    background: -o-linear-gradient(top, #d0d0d0, #b0b0b0);
    background: linear-gradient(top, #d0d0d0, #b0b0b0);
    filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#d0d0d0', EndColorStr='#b0b0b0');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#d0d0d0', endColorstr='#b0b0b0')";
}

a.gradient-button:active,
button.gradient-button:active,
input[type="submit"]:active {
    box-shadow: inset 1px 1px 0px #666, inset -1px -1px 0px #eee;
}