TreeSelect.styles.css

/* CSS Styles for MODx TreeSelectTV plugin*/

.treeBox {
/*    height: 50px;
    overflow: auto;
    border: 1px solid #ddd;*/
}

.treeBox ul {
    margin-left: 8px;
    padding-left: 0;
}

.treeBox ul ul {
    border-left: 4px solid #eee;
}

.treeBox_output {
    padding: 2px 6px;
    background: transparent;
    background-image: none;
}

.treeBox_output.toggle {
    border: 1px solid #ccc;
}

.treeBox_output.toggle.hover {
    background: #d5ffb7;
}

.hover, select, select:active, input[type=button] {
    cursor: pointer;
    cursor: hand;
}

.treeBox_image {
    float: right;
}
.treeBox_image img {
    max-width: 160px;
    max-height: 160px;
}

.treeBox .item_group {
    height: auto;
    width: auto;
    padding-right: 0;
    margin-right: 0;
}

.treeBox .item_line {
    height: auto;
    width: auto;
    padding: 0;
    margin: 0;
} 

.treeBox .item_text, .treeBox .selected .item_group .item_text {
    background: transparent;
    border-color: transparent;
}

.treeBox .item_text {
    text-decoration: none;
    display: inline-block;
    padding: 0px 6px;
    margin: 0;
    border: 1px solid transparent;
/*    cursor: pointer;
    cursor: hand;*/
}

.treeBox .item_text, .treeBox .selected .item_text {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
}

.treeBox .item_text.hover, .treeBox .open .item_text.hover {
    background: #d5ffb7;
    border-color: #ccc;
}
.treeBox .selected .item_text {
    background: #eee;
    border: 1px solid #bbb;
}

.treeBox .file .filename, .treeBox .folder .filename {
    display: inline-block;
    min-width: 280px;
}
.treeBox .file .filesize, .treeBox .folder .filesize {
    display: inline-block;
    text-align: right;
    min-width: 70px;
}

.treeBox .folder_status, .treeBox .item_icon {
    display: block;
    float: left;
    padding: 0;
    margin: 0;
    width: 18px;
    height: 18px;
}

/* folder icons */
.treeBox .folder .item_icon {
    background: transparent url(../../../manager/media/style/MODxCarbon/images/tree/folder.gif) no-repeat;
}
.treeBox .folder .item_icon.open {
    background: transparent url(../../../manager/media/style/MODxCarbon/images/tree/folderopen.gif) no-repeat;
}
.treeBox .file .item_icon {
    background: transparent url(../../../manager/media/style/MODxCarbon/images/tree/page.gif) no-repeat;
}

/* folder status icons */
.treeBox .folder .folder_status {
    background: transparent url(../../../manager/media/style/MODxCarbon/images/tree/plusnode.gif) no-repeat;
}
.treeBox .folder .folder_status.open {
    background: transparent url(../../../manager/media/style/MODxCarbon/images/tree/minusnode.gif) no-repeat;
}
.treeBox .last_item .folder_status, .treeBox .last_item .folder_status.open, .treeBox .file .folder_status, .treeBox .file .folder_status.open {
    background: transparent;
    cursor: default;
}

/* filetype icons */
.treeBox .file.filetype-xml .item_icon {
    background: transparent url(../../../manager/media/style/MODxCarbon/images/tree/application_xml.png) no-repeat;
}
.treeBox .file.filetype-pdf .item_icon {
    background: transparent url(../../../manager/media/style/MODxCarbon/images/tree/application_pdf.png) no-repeat;
}
.treeBox .file.filetype-html .item_icon, .treeBox .file.filetype-htm .item_icon {
    background: transparent url(../../../manager/media/style/MODxCarbon/images/tree/application_html.png) no-repeat;
}
.treeBox .file.filetype-js .item_icon {
    background: transparent url(../../../manager/media/style/MODxCarbon/images/tree/application_js.png) no-repeat;
}
.treeBox .file.filetype-css .item_icon {
    background: transparent url(../../../manager/media/style/MODxCarbon/images/tree/application_css.png) no-repeat;
}

.treeBox li {
    list-style-image: none;
    list-style-type: none;
}

.hide {
    display: none;
}


/* save-box */
.treeBox_saveBox {
    border: 1px solid #aaa;
    background: #fee;
    display: inline-block;
    //display: none;
}

.treeBox_saveBox.open {
    display: block;
}

.treeBox_saveBox .treeBox_saveBoxContent {
    padding: 2px;
    text-align: center;
}

.treeBox_saveBox span.button {
    font-size: 10px;
    display: block;
    color: #888;
    background: #fff0f0;
    height: auto;
    font-weight: bold;
    text-align: center;
    padding: 0 4px;
}

.treeBox_saveBox, .treeBox_saveBox span {
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-border-radius: 4px;
}

.treeBox_saveBox span.button.hover, .treeBox_saveBox.open span.button {
    color: #fff;
    background: #f55;
}

.treeBox_saveBox.open span.button {
    border-bottom-radius: 0px;
    -moz-border-radius-bottomleft:0px 0px; 
    -moz-border-radius-bottomright:0px 0px; 
    -khtml-border-radius-bottomleft:0px 00px; 
    -khtml-border-radius-bottomright:0px 0px; 
    -webkit-border-radius-bottomleft:0px 0px; 
    -webkit-border-radius-bottomright:0px 0px; 
}

.treeBox_saveBox span.filename {
    color: #900;
    background-color: #fff;
    border: 1px solid #a44;
    display: block;
}

.treeBox_saveBox span.filename.hover, .treeBox_saveBox select.hover {
    background-color: #fcc;
}

.TreeSelectConfig {
    width: 500px;
    height: 330px;
    white-space: nowrap;
    overflow: auto;
}

.TreeSelectConfig li {
    min-height: 30px;
}

.TreeSelectConfig span.text {
    display: inline-block;
    min-width: 200px;
    padding-right: 5px;
}

.TreeSelectConfig input.int {
    width: 30px;
}
.TreeSelectConfig input.string {
    width: 180px;
}