html {
    margin: 0;
    padding: 0;
    background-color: #e6f4ef;
    /** background-color: #fff;
    background-image: -webkit-linear-gradient(left, rgba(0, 139, 149, 0.2) 0%, rgba(0, 152, 95, 0.2) 35%, rgba(105, 190, 40, 0.2) 100%);
    background-image: -moz-linear-gradient(left, rgba(0, 139, 149, 0.2) 0%, rgba(0, 152, 95, 0.2) 35%, rgba(105, 190, 40, 0.2) 100%);
    background-image: -o-linear-gradient(left, rgba(0, 139, 149, 0.2) 0%, rgba(0, 152, 95, 0.2) 35%, rgba(105, 190, 40, 0.2) 100%);
    background-image: -ms-linear-gradient(left, rgba(0, 139, 149, 0.2) 0%, rgba(0, 152, 95, 0.2) 35%, rgba(105, 190, 40, 0.2) 100%);
    background-image: linear-gradient(left, rgba(0, 139, 149, 0.2) 0%, rgba(0, 152, 95, 0.2) 35%, rgba(105, 190, 40, 0.2) 100%);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6,IE7 */
    /* -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999')"; /* IE8 */
}

body {
    background-color: rgba(255, 255, 255, 0.20);
    color: #333;
    font-size: .85em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    min-width: 993px;
}

a:link, a:visited
{
    color: #006E45;
    text-decoration: none;
}

a:hover
{
    color: #000000;
    text-decoration: underline;
}

a:active
{
    color: #006E45;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}

header 
{
    background-color: #4cb68e;
    height: 70px;
    width: 100%;
    top: 0;
    position: fixed;
    color: #ffffff;
    text-shadow: 1px 1px 1px #333; /* Versatz links - Versatz oben - Unschärfe (Blur) - Farbe */
}

header a, header a:link, header a:visited, header a:active, header a:hover, header a:focus
{
    color: #ffffff;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #666666;
    text-transform: none;
    font-weight: 200;
    margin: 0px;
}

h1
{
    font-variant: small-caps;
    font-size: 1.6em;
    font-weight: 600;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2
{
    font-size: 1.5em;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5, h6
{
    font-size: 1em;
}

/** 
*/

.k-window-titlebar {
    background-color: #6E2585;
    color: #fff;
}

#templateTitle {
    margin-left: 15px;
    margin-top: 10px;
}

#controlBoard {
    margin-right: 25px;
    margin-top: 17px;
}

#controlBoard ul {
    margin: 0;
}

#controlBoard li {
    display: inline;
    list-style: none;
}

#noteControllButton {
    background-color: #4cb68e;
    border: none;
    text-shadow: 1px 1px 1px #333;
    padding: 4px 7px;
    cursor: pointer;
    color: white;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 4px;
    margin-right: 20px;
}
#noteControllButton.noteExists {
        background-color: rgba(0,0,0,0.25);
        border: 1px solid rgba(0,0,0,0.15);
}
#noteImage {
    width: 27%;
}
#noteText {
    width: 99%;
    height: 98%;
    resize: none;
}

#leftPane {
    top: 70px;
    left: 0px;
    bottom: 60px;
    width: 187px;
    float: left;
    position: fixed;
}

#contentPane
{
    top: 70px;
    left: 187px;
    right: 0px;
    bottom: 60px;
    padding: 10px 0px 13px 13px;
    overflow: auto;
    position: fixed;
}

footer 
{
    height: 50px;
    width: 100%;
    background-color: #4cb68e;
    bottom: 0px;
    position: fixed;
    color: #ffffff;
}

footer a, footer a:link, footer a:visited, footer a:active, footer a:hover, footer a:focus
{
    color: #ffffff;
}


#copyright
{
    padding-right: 25px;
    padding-top: 10px;
}

.float-left
{
    float: left;
}

.float-right 
{
    float: right;
}

.valign-top 
{
    vertical-align: top;
}

.bold
{
    font-weight: bold;
}

.italic
{
    font-style: italic;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

.labelCol 
{
    text-align: right;
    padding-right: 5px;
}

span.field-validation-error, .input-validation-error, .k-invalid, div.validation-summary-errors
{
    color: #f44336 !important;
    border-color: #f44336 !important;
}


input[type=text],
input[type=password],
input.text-box,
textarea
{
    width: 200px;
    background-color: white;
    border: 1px solid #9F9F9F;
    padding: 3px 0px 3px 3px;
    margin: 1px 1px 1px 0px;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
    
}
.k-autocomplete, .k-colorpicker, .k-combobox, .k-datepicker, .k-datetimepicker, .k-dropdown,
.k-numerictextbox, .k-selectbox, .k-textbox, .k-timepicker, .k-toolbar .k-split-button {
    width: 200px;
    border-color: #9F9F9F;
}
.k-autocomplete.k-state-default, .k-picker-wrap.k-state-default, .k-numeric-wrap.k-state-default, .k-dropdown-wrap.k-state-default {
    border-color: #9F9F9F;
}

input[type=text]:focus,
input[type=password]:focus
textarea:focus
{
    border-color: #000;
}

input[type=submit] 
{
    float: right;
}

button[type=submit]
{
    float: right;
}

input[type=radio] 
{
    margin: 0;
    vertical-align: middle;
}

/*
*   Messages für Responses von Ajax-Anfragen
*/
ul#messages { padding-left: 22px; font-size: 1.1em; font-style: italic; }
.error-msg { color: #EF2222; }
.warning-msg { color: #FCA000; }
.info-msg { color: #12ACD6; }
.success-msg { color: #00AC34; }

/**
*   Bootstrap Icons Style anpassen
*/
[class^="icon-"], [class*=" icon-"] 
{
    margin-top: 2px;
    padding-right: 2px;
}