TDataView_ui/styles/tools/toolDraw.css

#drawPrintWrap {
    width:500px;
    position:absolute;
    z-index:99999999999999999999999999999999;
    border: 2px solid #01b7ff;
    background: url(../../images/layout/bg-normal.png);
    padding:30px 20px 20px 20px;
    left:50%;
    top:50%;
    margin:-200px 0 0 -250px;
}

#drawPrintWrap img {
    width:490px;
    border:5px solid #fff;
}
#drawPrintWrap p {
    padding:10px 0;
    background:#fff;
    text-align: center;
    color:#ff0000;
}

#drawPrintWrap .close {
    position: absolute;
    right: 0px;
    top: 0px;
    text-indent: -999999px;
    overflow: hidden;
    background: url(../../images/layout/bg_close.gif) no-repeat center 7px;
    border: none;
    width: 30px;
}


/*S draw*/
/* ================================================================== */
/* Toolbars
/* ================================================================== */


.leaflet-draw:before {
    content:'';
    position: absolute;
    height: 36px;
    left:0px;
    top: 0px;
    width: 420px;
}

.leaflet-draw-section {
    position: relative;
    /* float:left; */
}

.leaflet-draw-toolbar {
    /* height:26px; */
    display:inline;
}

.leaflet-draw-toolbar-top {
    margin-top: 0;
}

.leaflet-draw-toolbar-notop a:first-child {
    border-top-right-radius: 0;
}

.leaflet-draw-toolbar-nobottom a:last-child {
    border-bottom-right-radius: 0;
}

.leaflet-draw-toolbar a {
    /* background-image: url('images/draw-spritesheet-custom.png');
    background-repeat: no-repeat; */
}

.leaflet-draw a {
    display: block;
    text-align: center;
    text-decoration: none;
    width:50px;
    height:50px;
    line-height:26px;
    float:left;
    border-bottom: none !important;
}

.leaflet-draw a:hover {
    height:50px;
    width:50px;
}

.leaflet-draw li {
    list-style-type: none;
}

/* ================================================================== */
/* Toolbar actions menu
/* ================================================================== */

.leaflet-draw-actions {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    /*right: 26px;  leaflet-draw-toolbar.left + leaflet-draw-toolbar.width */
    top: 30px;
    border: 1px solid #000;
    border-top:none;
}

.leaflet-draw-actions li {
    height:26px;
    width:36px;
    overflow:hidden;
    float:left;
    clear:both;
}


.leaflet-draw-actions a {
    background-color: #FFF;
    color: #000;
    line-height: 26px;
    text-decoration: none;
    width: 36px;
    height: 26px;
    overflow:hidden;
    text-decoration:none;
}



.leaflet-draw-actions a:hover {
    width: 50px;
    height: 50px;
    text-decoration:none;
}

/* ================================================================== */
/* Draw toolbar
/* ================================================================== */

.leaflet-draw-toolbar .leaflet-draw-draw-polyline {
    background: url(../../images/layout/bhicon1.png) no-repeat 9px 7px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-polygon {
    background: url(../../images/layout/bhicon4.png) no-repeat 9px 8px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-rectangle {
    background: url(../../images/layout/bhicon5.png) no-repeat 10px 9px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-circle {
    background: url(../../images/layout/bhicon6.png) no-repeat 10px 10px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-marker {
    background: url(../../images/layout/bhicon_03.png) no-repeat 9px 7px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-label {
    display: none;
    background: url(../../images/layout/bhicon_20.png) no-repeat 9px 8px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-painting {
    background: url(../../images/layout/bhicon7.png) no-repeat 8px 7px;
}


.leaflet-draw-toolbar .leaflet-draw-style-stylePicker {
    position: absolute;
    top: 0px;
    left: 0px;
    background: url(../../images/layout/gear.png) no-repeat 14px 14px;
}
#drawStyle{
    width: 50px;
    height: 50px;
    float: right;
}
.leaflet-draw-toolbar .leaflet-draw-edit-favorite {
    background: url(../../images/layout/bhicon10.png) no-repeat 10px 10px;
}

.leaflet-draw-toolbar .leaflet-draw-edit-print {
    background: url(../../images/layout/bhicon_32.png) no-repeat 9px 11px;
    /* position: absolute;
    top: -50px;
    left: 100px; */
}

.leaflet-draw-toolbar .leaflet-draw-draw-latlngspolygon {
    background: url(../../images/layout/bhicon3.png) no-repeat 9px 8px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-latlngspolyline {
    background: url(../../images/layout/bhicon2.png) no-repeat 8px 8px;
}

.leaflet-draw-toolbar .leaflet-draw-draw-customcircle {
    background: url(../../images/layout/bhicon_19.png) no-repeat 9px 9px;
}

/* ================================================================== */
/* Edit toolbar
/* ================================================================== */

.leaflet-draw-toolbar .leaflet-draw-edit-edit {
    background: url(../../images/layout/bhicon8.png) no-repeat 9px 9px;
}

.leaflet-draw-toolbar .leaflet-draw-edit-remove {
    background: url(../../images/layout/bhicon9.png) no-repeat 9px 9px;
}



.leaflet-draw-toolbar .leaflet-draw-toolbar-button-enabled {
    /* background-image: url('images/draw-spritesheet-custom2.png'); */
    background-color: #14a9d6;
}

/* ================================================================== */
/* Drawing styles
/* ================================================================== */

.leaflet-mouse-marker {
    background-color: #fff;
    cursor: crosshair;
}

.leaflet-draw-tooltip {
    background: rgb(54, 54, 54);
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid transparent;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    color: #fff;
    font: 12px/18px "Helvetica Neue", Arial, Helvetica, sans-serif;
    margin-left: 20px;
    margin-top: -21px;
    padding: 4px 8px;
    position: absolute;
    white-space: nowrap;
    z-index: 6;
}

.leaflet-draw-tooltip:before {
    border-right: 6px solid black;
    border-right-color: rgba(0, 0, 0, 0.5);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    content: "";
    position: absolute;
    top: 7px;
    left: -7px;
}

.leaflet-error-draw-tooltip {
    background-color: #F2DEDE;
    border: 1px solid #E6B6BD;
    color: #B94A48;
}

.leaflet-error-draw-tooltip:before {
    border-right-color: #E6B6BD;
}

.leaflet-draw-tooltip-single {
    margin-top: -12px
}

.leaflet-draw-tooltip-subtext {
    color: #f8d5e4;
}

.leaflet-draw-guide-dash {
    font-size: 1%;
    opacity: 0.6;
    position: absolute;
    width: 5px;
    height: 5px;
}

/* ================================================================== */
/* Edit styles
/* ================================================================== */



.leaflet-edit-marker-selected {
    background: rgba(254, 87, 161, 0.1);
    border: 4px dashed rgba(254, 87, 161, 0.6);
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

.leaflet-edit-move {
    cursor: move;
}

.leaflet-edit-resize {
    cursor: pointer;
}


#drawStyle .leaflet-draw-toolbar {
    /*display:none;*/
}


.leaflet-draw-toolbar-style-edit {
    position: absolute;
    background: #378be0;
    top: 60px;
    left: -407px !important;
    color: #fff;
    width: 120px;
    padding: 15px 13px;
    display: none;
    margin-left: 105px;
}
.leaflet-draw-toolbar-style-edit label {
    display:block;
    clear:both;
    padding: 10px 0 0 5px;
    float: left;
    width: 55px;
}
.leaflet-draw-toolbar-style-edit input {
    width: 55px;
    border: 0px solid #ABABAB;
    color: #fff;
}


.leaflet-draw-toolbar-style-edit  .leaflet-draw-actions {
    display:block;
    list-style:none;
    margin: 5px 0;
    padding:0;
    position:relative;
    right:auto;
    top:auto;
    border:none;
}

.leaflet-draw-toolbar-style-color-picker {
    position: absolute;
    background: #FFF;
    left: 152px;
    top: 0px;
    border: 1px solid #00ffff;
    width: 150px;
    display:none;
}

.leaflet-draw-toolbar-style-color-picker-actions {
    overflow:hidden;
    zoom:1;
}

.leaflet-draw-toolbar-style-color-picker-actions li {
    width:10px;
    height:10px;
    float:left;
    cursor:pointer;
}


.leaflet-draw-toolbar-style-edit-opacity-label {
    font-size:11px;
}

.leaflet-draw-toolbar-style-edit label {
    font-size:11px;
    display:block;
    clear:both;

}

.leaflet-draw-toolbar-style-edit input {
    font-size: 11px;
    float: right;
    margin: 10px 0 0 0;
    background: #3371c8;
}

.draw-label {
    border:none;
    padding:0px;
    margin:0px;
    min-width:100px;
    min-height:14px;
    background:url('../../images/layout/bg-ffffff-75.png');
    background: none;
}

.draw-label .leaflet-olabel-tips{
    display: none;
}

.draw-label .draw-label-textarea {
    border:none;
    width:auto;
    height:100%;
    overflow:hidden;
    word-break:keep-all;
    word-wrap:normal;
    position:relative;
    float: left;
    background: none;
    outline: 0;
    resize:none;
    height:18px;
    padding:2px;
    font-size:12px;
}


.draw-custom-circle-picker {
    position: absolute;
    background: #378be0;
    left: -250px;
    top: 0px;
    padding: 15px;
    display: none;
    width: 210px;
    color: #fff;
}

.draw-custom-circle-picker h4 {
    padding:5px 0 10px 5px;
}

.draw-custom-circle-picker label {
    width:85px;
    font-size:12px;
    text-align:right;
    display:inline-block;
    height:18px;
    margin:8px 0;
}

.draw-custom-circle-picker label small {
    color:#ffffff;
    font-size:10px;
}

.draw-custom-circle-picker input {
    width: 85px;
    margin: 5px;
    font-size: 11px;
    font-family: Arial;
    resize: none;
    border: 0px;
    background: #3371c8;
    color: #fff;
}

.draw-custom-circle-picker button {
    /*height: 34px;*/
    font-size: 14px;
    font-weight: normal;
    width: 64px;
    text-align: center;
    cursor: pointer;
    clear: both;
    border:0px solid #aaaaaa;
    background: #ffffff;
    color: #666666;
    padding: 3px 0;
    margin-top: 8px;
}
.draw-custom-circle-picker button:hover {
    border: 0px solid #378be0;
    color: #378be0;
}


.draw-latlngs-picker {
    position:absolute;
    background: #378be0;
    left: -250px;
    top:0px;
    padding:15px;
    display:none;
    width:210px;
}

.draw-latlngs-picker h4 {
    padding:5px 0 10px 5px;
    color: #fff
}

.draw-latlngs-picker textarea {
    width:200px;
    margin:5px;
    font-size:11px;
    font-family:Arial;
    resize:none;
    height:150px;
    border: 0px;
    background: #1257ac;
    color: #fff;
    padding: 5px;
}

.draw-latlngs-picker button {
    height: 22px;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    padding:0 10px;
    margin:0 0 5px 5px;
}
.draw-latlngs-picker button:hover {
}


.draw-polyline-latlngs-picker {
    position: absolute;
    left: -250px;
    top: 0px;
    padding: 15px;
    display: none;
    width: 210px;
    color: #fff;
    background: #378be0;
}

.draw-polyline-latlngs-picker h4 {
    padding:5px 0 10px 5px;
}

.draw-polyline-latlngs-picker textarea {
    width:200px;
    margin:5px;
    font-size:11px;
    font-family:Arial;
    resize:none;
    height:150px;
    border: 0px;
    color: #fff;
    background: #1257ac;
    padding: 5px;
}

.draw-polyline-latlngs-picker button {
    height: 22px;
    font-size: 12px;
    font-weight: normal;
    cursor: pointer;
    padding: 0 10px;
    border: 0px;
}
.draw-polyline-latlngs-picker button:hover {
}


.draw-marker-picker {
    position: absolute;
    background: #378be0;
    top: 0px;
    left: -470px;
    padding: 15px;
    width: 432px;
    display: none;
}

.draw-marker-picker h4 {
    padding:2px;
    font-weight:normal;
    font-size:14px;
    color: #fff;
    margin-bottom:6px;
}

.draw-marker-picker ul {
    overflow:hidden;
    zoom:1;
    background: #fff;
    border: 0px;
    border-top: 1px solid #08b3dd;
}

.draw-marker-picker li {
    float:left;
    width:35px;
    height:35px;
    text-align:center;
    border: 1px solid #d6c3c3;
    border-top: none;
    border-left: none;
}
.draw-marker-picker li img {
    cursor:pointer;
    height: 32px;
    margin: 0px;
}

/*E draw*/
.leaflet-right .leaflet-control {
    float: right;
    text-align: left;
    zoom: 1;

}
.leaflet-draw {
    position: fixed !important;
    right:52px !important;
    top: 360px;
    width: 352px;
    height: 100px;
    background: #0e74d1;
}
.leaflet-bar{
    border:0px !important;
}
.leaflet-bar a:hover {
    background-color:#01b7ff !important; 
}
#userDrawAddModal {
    width:330px;
    top:40%;
    margin-left:-165px;
    left: 50%;
    position: absolute;
}

#userDrawAddModal .modal-header h3 {
    font-size:20px;
}

#userDrawAddModal .form {

}
#userDrawAddModal .form dl {
    overflow:hidden;
}
#userDrawAddModal .form dl dt {
    font-size:14px;
    padding:0 0 10px 0;
    float:left;
    line-height:30px;
}
#userDrawAddModal .form dl .input {
    width:210px;
}
#userDrawAddModal .form .note {
    color:#AAA;
    font-size:11px;
    clear:both;
    display:block;
}
#userDrawAddModal .form .sure {
    margin:10px 0 0 0;
    clear:both;
    float:right;
}
#yulanContent{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    z-index: 11111111111;
    display: none;
    margin-left: -100px;
    margin-top: -100px;
}
#yulanContent img{
    width: 200px;
    height: 200px;
}