html, body {
    margin:             0;
    padding:            0;
    border:             0;
    outline:            0;
    background-color:   #FFE7C9;
    font-family:        'Nobile', arial, serif;
    font-size:          11px;
}

#map_canvas{
    float:              left;
    width:              964px;
    height:             620px;
    margin:             0px 0px 0px -2px;
    border:             0px solid #9b772b;
    
}

label {
    float:              left;
    clear:              left;
    width:              100px;
    height:             20px;
    margin:             5px 5px 10px 2px;
    color:              #ffffff;
    
}

input.control-input-text{
    float:              left;
    background-color:   #e3d9c5;
    width:              150px;
    height:             16px;
    font-size:          12px;
    border:             1px solid #a96d39;
}

input.control-input-btn{
    height:             18px;
}


form#zip-area-all{
    width:              40px;
    border:             1px solid #a96d39;    
}
form#zip-area-request{
    width:              40px;
    border:             1px solid #a96d39;    
}
form#color-lowest-class{
    width:              60px;
    border:             1px solid #a96d39;    
}

form#color-highest-class{
    width:              60px;
    border:             1px solid #a96d39;    
}
form#max-classes{
    width:              40px;
    border:             1px solid #a96d39;    
}
form .config-label{
    float:              left;
    clear:              left;
    width:              180px;
    height:             22px;
    padding:            5px 10px;
}
form input.config-field{
    float:              left;
    width:              90px;
    height:             22px;
    border:             1px solid #a96d39;
}
form div.config-button{
    float:              left;
    clear:              left;
    width:              100%;
    height:             28px;
    margin-top:         10px;
}



input#change-config{
    float:              right;
    margin-right:       15px;
}

/* NAVIGATION INFO-LAYER */
/*div#header-info-layer{
    float:              left;
    width:              320px;
    height:             30px;
}

div#header-info-layer ul {
    margin:             0;
    padding:            0;
    width:              100%;
    list-style:         none outside none;
}
div#header-info-layer ul li{
    display:            inline;
    float:              left;
    width:              100px;
    height:             30px;
    color:              transparent;
    text-align:         center;
}
div#header-info-layer a{
    background-image:   url(../img/btn-info-layer-60bg.png);
    background-repeat:  no-repeat;
    float:              left;
    height:             0;
    overflow:           hidden;
    padding-top:        30px;
    width:              100px;
}
div#header-info-layer li#nav-legend,
div#header-info-layer li#nav-legend a{
    width:              100px;
}
div#header-info-layer li#nav-legend a{
    background-position: 0px 0px;
}
div#header-info-layer li#nav-legend a:hover{
    background-position: 0px -30px;
}
div#header-info-layer li#nav-legend a.active{
    background-position: 0px -60px;
}

div#header-info-layer li#nav-cart,
div#header-info-layer li#nav-cart a{
    width:              100px;
}
div#header-info-layer li#nav-cart a{
    background-position: -100px 0px;
}
div#header-info-layer li#nav-cart a:hover{
    background-position: -100px -30px;
}
div#header-info-layer li#nav-cart a.active{
    background-position: -100px -60px;
}


div#header-info-layer li#nav-config,
div#header-info-layer li#nav-config a{
    width:              120px;
}
div#header-info-layer li#nav-config a{
    background-position: -200px 0px;
}
div#header-info-layer li#nav-config a:hover{
    background-position: -200px -30px;
}
div#header-info-layer li#nav-config a.active{
    background-position: -200px -60px;
}
*/


#headline div{
    float:              left;
    width:              200px;
    font-size:          18px;
    margin-top:         0px;
}
.msg{
    float:              left;
    width:              200px;
    font-size:          14px !important;
    color:              #ffffff;
}
#select-control-page{
    float:              left;
    width:              100%;
    height:             24px;
    overflow:           hidden;
    margin-bottom:      10px;
    border-bottom:      1px solid #ffffff;    
}
.control-change{
    float:              left;
    width:              80px;
    height:             24px;
    padding:            2px 5px;
}
.control-change a{
    float:              left;
    display:            inline;
    width:              100%;
    height:             20px;
    color:              #ffffff;
}
.bor{
    border-right:       1px solid #ffffff;
}
.control-page{
    float:              left;
    width:              240px;
    padding:            3px;
}

.cr{
    clear:              right;
}

.cl{
    clear:              left;
}
#config{
    height:             90px;
    border-bottom:      1px dotted #ffffff;
}
#cart{
    height:             220px;
    border-bottom:      1px dashed #ffffff;
    overflow:           scroll;
}
#statistic{
    height:             40px; 
}

#filter{
    height:             260px;
    border-bottom:      1px dashed #ffffff;    
}

.zip-list{
    float:              left;
    width:              100%;
    height:             20px;
}

.zip-row{
    float:              left;
    width:              60px;
    height:             20px;
    cursor:             pointer;
    border:             0px dotted #a96d39;
    padding:            2px 2px 0px 2px;
    margin-right:       8px;
    text-align:         center;
    font-weight:        bold;
    background:         url('../img/bg-cart.png') top left no-repeat;
}

.btn-remove{
    float:              right;
    width:              12px;
    height:             12px;
    margin-top:         4px;
}

.zl-odd{
    background-color:   #cecece;
    padding:            2px;
    color:              #000000;
}

.zl-even,
.zl-odd{
    background-color:   transparent;
    padding:            2px;
    color:              #a96d39;
}

label.filter-cb{
    float:              left;
    width:              200px;
    height:             20px;
}


input.filter-cb{
    float:              left;
    width:              40px;
    height:             10px;
}
input.config-cb{
    float:              left;
    width:              20px;
    height:             20px;
    margin:             5px 0px;
}
.control-hl{
    float:              left;
    width:              294px;
    padding:            2px;
    border-bottom:      1px dashed #ffffff;
}

#criteriabox{
    float:              left;
    width:              260px;
    height:             100%;
    margin-left:        -20px;
}
#criteria{
    float:              left;
}

/* Position From */
.pa {
    position:           absolute;
}/*
#click-shield{
    position:           absolute;
    top:                160px;
    left:               912px;
    width:              299px;
    height:             620px;
    border:             1px dashed green;
}*/
#ui,
#click-shield{
    background-color:  transparent;
    background:url(../img/bg-ui.png);
}
.ui-layer{
    top:                120px;
    left:               10px;
    width:              862px;
    height:             650px;
}
/*.shield-layer{
    top:                120px;
    left:               10px;
    width:              862px;
    height:             650px;    
}*/

#hl-text{
    float:              left;
    width:              250px;
}
#btn-send-now {
    z-index:            10000;
    top:                0px;
    left:               0px;
    width:              100px;
    height:             20px;
    /*border:             1px solid green;*/
}
#ui-filter{
    float:              left;
    margin:             0px;
    width:              890px!important;
    height:             40px;
}


input#send-request{
    float:              left;
    width:              100px;
    height:             24px;
    margin:             10px 0px 0px 0px!important; 
}
input#send-request-1{
    float:              left; 
    width:              40px; 
    height:             40px; 
    margin-top:         -5px; 
}

div#legend-ui{
    float:              left;
    width:              309px;
    height:             609px;
    background-color:   #ffe7c9;
    background:         url(../img/bg-info-layer.png) repeat-x;
    color:              #a96d39;
    font-weight:        bold;
    padding:            5px;
    border-right:       1px solid #a96d39;
    border-bottom:      1px solid #a96d39;
    overflow:           scroll;
}
div.legendbox{
    clear:              left;
    float:              left;
    width:              45px;
    height:             16px;
    margin:             2px 5px 2px 10px;
    /*border:             1px solid green;*/
}
div.legend-label{
    float:              right;
    text-align:         left;
    width:              110px;
    height:             16px;
    margin:             2px 0px;
}
div#legend-wrapper{
    float:              left;
    width:              165px!important;
    height:             auto;
    /*border:             1px dotted green;*/
}

div#cockpit-wrapper{
    float:              right;
    width:              130px;
}

div#bg-l-map{
    position:           absolute;
    top:                120px;
    left:               10px;
    width:              5px;
    height:             650px;
    background:         url(../img/bg-l-650.png) no-repeat;
    z-index:            2001;
}
div#bg-r-map{
    position:           absolute;
    top:                120px;
    left:               868px;
    width:              5px;
    height:             650px;
    background:         url(../img/bg-r-650.png) no-repeat;
    z-index:            2002;
}

div#bg-l-control{
    position:           absolute;
    top:                120px;
    left:               912px;
    width:              5px;
    height:             650px;
    background:         url(../img/bg-l-650.png) no-repeat;
    z-index:            2003;
}
div#bg-r-control{
    position:           absolute;
    top:                120px;
    left:               1210px;
    width:              5px;
    height:             650px;
    background:         url(../img/bg-r-650.png) no-repeat;
    z-index:            2004;
}

div.msg-label{
    clear:              left;
    float:              left;
    width:              180px;
    height:             16px;
}
div.msg-value{
    float:              left;
    width:              70px;
    height:             16px;
}
div.msg-config{
    float:              left;
    width:              280px;
    height:             40px;
    margin:             0px 5px 5px 5px;
}
div#temp-info{
    position:           absolute;

    width:              60px;
    height:             20px;
    border:             0px solid #a96d39;
    background-color:   #FFE7C9;
    color:              #a96d39;
}

div#zip-listing{
    float:              left;
    width:              880px;
    height:             0px;
    overflow:           hidden;
    margin:             0px 0px 0px 0px;
}
/*
div#zip-listing{
    position:           relative;
    top:                0px;
    left:               0px;
    width:              70px;
    height:             558px;
    margin:             10px 0px 0px 10px;
}
*/
/* MAP CONTROLS */
div#ctrl-header{
    position:           relative;
    top:                0;
    left:               0;
    width:              964px;
    height:             40px;
    background:         url(../img/bg-ctrl-header.png) top left repeat;
}
div#ctrl-city{
    position:           absolute;
    top:                0;
    left:               10px;
    width:              300px;
    height:             20px;
    margin:             5px 5px 0px 0px;
    padding:            1px 4px;
    cursor:             pointer;
}
div#ctrl-criteria{
    position:           absolute;
    top:                0;
    left:               320px;
    width:              300px;
    height:             20px;
    margin:             5px 5px 0px 0px;
    padding:            1px 4px;
    cursor:             pointer;
}
div#ctrl-dash{
    position:           absolute;
    top:                0;
    left:               686px;
}
div#ctrl-lgnd{
    position:           absolute;
    top:                0;
    left:               736px;
}
div#ctrl-cnfg{
    position:           absolute;
    top:                0;
    left:               786px;
}
div#ctrl-cat{
    position:           absolute;
    top:                0;
    left:               836px;
}
div#ctrl-crt{
    position:           absolute;
    top:                0;
    left:               896px;
}

div.ctrl-btn{
    width:              36px;
    height:             36px;
    margin:             4px 15px 0px 0px;
    padding:            0px;
    cursor:             pointer;
}

#plz-box{
    float:              left;
    width:              330px!important;
    height:             28px;
    margin-right:       5px;
}

#plz-box input.control-input-text{
    float:              left;
    font-size:          12px;
    width:              250px;
    height:             20px;
    color:              #444444;
    border:             1px solid #444444;
    background:         #dedede;
    opacity:            0.90;
    filter:             Alpha(opacity=90);
}

#ctrl-criteria select{
    float:              left;
    width:              310px!important;
    margin-top:         0px;
    margin-left:        10px;
    background:         #dedede;
    opacity:            0.90;
    filter:             Alpha(opacity=90);
    border:             1px solid #444444;
    color:              #444444;
}

div#map-control{
    position:           relative;
    width:              330px;
    height:             580px;
    top:                0px;
    left:               632px;
    border:             0px solid #a96d39;
    background:         url(../img/bg-ctrl-header.png) top left repeat;
    color:              #a96d39;
    display:            none;
}
input.cb-category{
    margin:             2px 5px;
}

#ctrl-h-dashboard{
    clear:              both;
    width:              964px;
    height:             150px;
    margin:             0px 0px 0px 16px;
    border:             0px dotted green;
    background-color:	#ffe7c9;
    color:              #a26e40;
    text-align:         center;
    font-size:          11px;
    
}

div#ctrl-category,
div#ctrl-config,
div#ctrl-dashboard
{
    float:              right;
    width:              315px;
    height:             558px;
    margin:             -580px 0px 0px 0px;
    padding:            10px 10px 10px 5px;
    background:         url(../img/bg-ctrl-header.png) top left repeat;
    display:            none;
}
div#ctrl-legend
{
    float:              right;
    width:              330px;
    height:             558px;
    margin:             -580px 0px 0px 0px;
    border:             0px dashed green;
    /*background:         url(../img/bg-ctrl-header.png) top left repeat;*/
    display:            none;
}
div#ctrl-cart{
    float:              right;
    width:              70px;
    height:             558px;
    margin:             -580px 0px 0px 0px;
    padding:            10px 0px 10px 0px;
    background:         url(../img/bg-ctrl-header.png) top left repeat;
    display:            none;
}


div#map-protect{
    position:           relative;
    top:                0;
    left:               -2px;
    width:              966px;
    height:             620px;
    background:         url(../img/bg-ctrl-header.png) top left repeat;
}

div#map-protect img{
    position:           relative;
    top:                -350px;
    left:               450px;
    width:              40px;
    height:             40px;
}

/*******************************************************************************
 * Konfigurtaionsformular
 *****************************************************************************/
.cfg-label {
    border:             0px dotted green;
    float:              left;
    width:              100px;
    height:             20px;
    margin:             5px 0px;
    
}
.cfg-input {
    border:             0px dotted blue;
    float:              left;
    width:              200px;
    height:             20px;
    margin:             5px 0px;    
}
.cfg-value{
    float:              right;
    width:              30px;
    height:             20px;
    margin:             5px 0px;    
}

#cfg-send{
    cursor:             pointer;
    float:              right;
    margin-right:       20px;
}
.cfg-submit {
    float:              left;
    width:              100%;
    height:             40px;
}
#sl-zoom,
#sl-opacity,
#sl-opacity-selected,
#sl-max-polygon,
#sl-request-polygon
{
    width:              160px;
}
/* obsolete */
a#unlock-display{
    position:           absolute;
    top:                620px;
    left:               860px;
    border:             none;
}
a#unlock-display img{
    border:             none;    
}

#kcontent{
    width:              960px;
    background-color:   #FFE7C9;
}

/* DASHBOARD */
.display {
    float:              left;
    width:              130px;
    height:             180px;
    margin:             0px 15px;
    text-align:         left;
}

.display canvas{
    /*margin-left:        -60px!important; */
}

.fr{
    float:              right!important;
}