@media only screen
/*!YUI-Compressor */and (min-device-width: 768px)
/*!YUI-Compressor */and (max-device-width: 1024px) {
    /*******************************************************************************
     * Tree container
     */
    ul.dynatree-container {
        font-size: 12px; /* font size should not be too big */
        white-space: nowrap;
        padding: 0;
        margin: 0; /* issue 201 */
        height: 98%; /* issue 263 */
    }

    ul.dynatree-container ul {
        padding: 0 0 0 23px;
        margin: 0;
        height: 100%;
    }

    ul.dynatree-container li {
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        -moz-background-clip: border;
        -moz-background-inline-policy: continuous;
        -moz-background-origin: padding;
        background-attachment: scroll;
        background-color: transparent;
        background-repeat: repeat-y;
        background-image: url("/javax.faces.resource/dynaTree/vlineBig.gif.xhtml?ln=images");
        background-position: 0 0;
        margin: 0;
        padding: 1px 0 0 0;
    }

    ul.dynatree-container > li {
        padding-bottom: 80px;
    }

    /* Suppress lines for last child node */
    ul.dynatree-container li.dynatree-lastsib {
        background-image: none;
    }

    /* Suppress lines if level is fixed expanded (option minExpandLevel) */
    ul.dynatree-no-connector > li {
        background-image: none;
    }

    /* Style, when control is disabled */
    .ui-dynatree-disabled ul.dynatree-container {
        opacity: 0.5;
        background-color: silver;
    }

    /*******************************************************************************
     * Common icon definitions
     */
    span.dynatree-empty,
    span.dynatree-vline,
    span.dynatree-connector,
    span.dynatree-expander,
    span.dynatree-checkbox,
    span.dynatree-radio,
    span.dynatree-drag-helper-img,
    #dynatree-drop-marker {
        width: 32px;
        height: 32px;
        display: inline-block; /* Required to make a span sizeable */
        vertical-align: top;
        background-repeat: no-repeat;
        background-position: left;
        background-image: url("/javax.faces.resource/dynaTree/iconsBig.gif.xhtml?ln=images");
        background-position: 0 0;
    }

    span.dynatree-icon {
        display: inline-block; /* Required to make a span sizeable */
        vertical-align: top;
        background-repeat: no-repeat;
        background-position: left;
        background-position: 0 0;
    }

    /** Used by 'icon' node option: */
    ul.dynatree-container img {
        width: 16px;
        height: 16px;
        margin-left: 3px;
        vertical-align: top;
        border-style: none;
    }

    /*******************************************************************************
     * Lines and connectors
     */
    span.dynatree-connector {
        background-position: -32px -128px;
    }

    /*******************************************************************************
     * Expander icon
     * Note: IE6 doesn't correctly evaluate multiples class names,
     *		 so we create combined class names that can be used in the CSS.
     *
     * Prefix: dynatree-exp-
     * 1st character: 'e': expanded, 'c': collapsed
     * 2nd character (optional): 'd': lazy (Delayed)
     * 3rd character (optional): 'l': Last sibling
     */
    span.dynatree-expander {
        background-position: 0px -160px;
        cursor: pointer;
    }

    .dynatree-exp-cl span.dynatree-expander /* Collapsed, not delayed, last sibling */
      {
        background-position: 0px -192px;
    }

    .dynatree-exp-cd span.dynatree-expander /* Collapsed, delayed, not last sibling */
      {
        background-position: -128px -160px;
    }

    .dynatree-exp-cdl span.dynatree-expander /* Collapsed, delayed, last sibling */
      {
        background-position: -128px -192px;
    }

    .dynatree-exp-e span.dynatree-expander, /* Expanded, not delayed, not last sibling */
    .dynatree-exp-ed span.dynatree-expander  /* Expanded, delayed, not last sibling */
      {
        background-position: -64px -160px;
    }

    .dynatree-exp-el span.dynatree-expander, /* Expanded, not delayed, last sibling */
    .dynatree-exp-edl span.dynatree-expander  /* Expanded, delayed, last sibling */
      {
        background-position: -64px -192px;
    }

    .dynatree-loading span.dynatree-expander  /* 'Loading' status overrides all others */
      {
        background-position: 0 0;
        background-image: url("/javax.faces.resource/dynaTree/loading.gif.xhtml?ln=images");
    }

    /*******************************************************************************
     * Checkbox icon
     */
    span.dynatree-checkbox {
        margin-left: 3px;
        background-position: 0px -32px;
    }

    span.dynatree-checkbox:hover {
        background-position: -16px -32px;
    }

    .dynatree-partsel span.dynatree-checkbox {
        background-position: -64px -32px;
    }

    .dynatree-partsel span.dynatree-checkbox:hover {
        background-position: -80px -32px;
    }

    .dynatree-selected span.dynatree-checkbox {
        background-position: -32px -32px;
    }

    .dynatree-selected span.dynatree-checkbox:hover {
        background-position: -48px -32px;
    }

    /*******************************************************************************
     * Radiobutton icon
     * This is a customization, that may be activated by overriding the 'checkbox'
     * class name as 'dynatree-radio' in the tree options.
     */
    span.dynatree-radio {
        margin-left: 3px;
        background-position: 0px -48px;
    }

    span.dynatree-radio:hover {
        background-position: -16px -48px;
    }

    .dynatree-partsel span.dynatree-radio {
        background-position: -64px -48px;
    }

    .dynatree-partsel span.dynatree-radio:hover {
        background-position: -80px -48px;
    }

    .dynatree-selected span.dynatree-radio {
        background-position: -32px -48px;
    }

    .dynatree-selected span.dynatree-radio:hover {
        background-position: -48px -48px;
    }

    /*******************************************************************************
     * Node type icon
     * Note: IE6 doesn't correctly evaluate multiples class names,
     *		 so we create combined class names that can be used in the CSS.
     *
     * Prefix: dynatree-ico-
     * 1st character: 'e': expanded, 'c': collapsed
     * 2nd character (optional): 'f': folder
     */
    .dynatree-ico-cf span.dynatree-icon  /* Collapsed Folder */
      {
        background-position: 0px -32px;
    }

    .dynatree-ico-ef span.dynatree-icon  /* Expanded Folder */
      {
        background-position: -128px -32px;
    }

    /* Status node icons */
    .dynatree-statusnode-wait span.dynatree-icon {
        background-image: url("/javax.faces.resource/dynaTree/loading.gif.xhtml?ln=images");
    }

    .dynatree-statusnode-error span.dynatree-icon {
        background-position: 0px -224px;
        /*	background-image: url("ltError.gif");*/
    }

    /*******************************************************************************
     * Node titles
     */
    /* @Chrome: otherwise hit area of node titles is broken (issue 133)
       Removed again for issue 165; (133 couldn't be reproduced) */
    span.dynatree-node {
        display: inline-block; /* issue 373 Required to make a span sizeable */
    }

    /* Remove blue color and underline from title links */
    ul.dynatree-container a
/*, ul.dynatree-container a:visited*/
      {
        color: black; /* inherit doesn't work on IE */
        text-decoration: none;
        vertical-align: middle;
        margin: 0px;
        margin-left: 3px;
    }

    ul.dynatree-container a:hover {
        background-color: #d9dadb;
    }

    span.dynatree-node a {
        border: none;
        display: inline-block; /* Better alignment, when title contains <br> */
        vertical-align: middle;
        padding: 7px;
    }

    span.dynatree-folder a {
        padding: 7px;
        font-weight: bold;
    }

    ul.dynatree-container a:focus,
    span.dynatree-focused a:link  /* @IE */
      {
        background-color: #EFEBDE; /* gray */
    }

    span.dynatree-has-children a {
    }

    span.dynatree-expanded a {
    }

    span.dynatree-selected a {
        color: green;
        font-style: italic;
    }

    span.dynatree-active a {
        background: #28969a !important;
        /*background-color: #3169C6 !important;*/
        color: white !important; /* @ IE6 */
    }

    /*******************************************************************************
     * Drag'n'drop support
     */
    /*** Helper object ************************************************************/
    div.dynatree-drag-helper {
    }

    div.dynatree-drag-helper a {
        border: 1px solid gray;
        background-color: white;
        padding-left: 5px;
        padding-right: 5px;
        opacity: 0.8;
    }

    span.dynatree-drag-helper-img {
    }

    div.dynatree-drag-helper /*.dynatree-drop-accept*/  {
    }

    div.dynatree-drop-accept span.dynatree-drag-helper-img {
        background-position: -32px -112px;
    }

    div.dynatree-drag-helper.dynatree-drop-reject {
        border-color: red;
    }

    div.dynatree-drop-reject span.dynatree-drag-helper-img {
        background-position: -16px -112px;
    }

    /*** Drop marker icon *********************************************************/
    #dynatree-drop-marker {
        width: 14px;
        position: absolute;
        background-position: 0 -128px;
    }

    #dynatree-drop-marker.dynatree-drop-after,
    #dynatree-drop-marker.dynatree-drop-before {
        width: 64px;
        background-position: 0 -144px;
    }

    #dynatree-drop-marker.dynatree-drop-copy {
        background-position: -64px -128px;
    }

    #dynatree-drop-marker.dynatree-drop-move {
        background-position: -64px -128px;
    }

    /*** Source node while dragging ***********************************************/
    span.dynatree-drag-source {
        background-color: #e0e0e0;
    }

    span.dynatree-drag-source a {
        color: gray;
    }

    /*** Target node while dragging cursor is over it *****************************/
    span.dynatree-drop-target {
    }

    span.dynatree-drop-target a {
    }

    span.dynatree-drop-target.dynatree-drop-accept a {
        background-color: #3169C6 !important;
        color: white !important; /* @ IE6 */
        text-decoration: none;
    }

    span.dynatree-drop-target.dynatree-drop-reject {
    }

    span.dynatree-drop-target.dynatree-drop-after a {
    }

    /*******************************************************************************
     * Custom node classes (sample)
     */
    span.custom1 a {
        background-color: maroon;
        color: yellow;
    }

    .treeEditMode {
        background-color: #efd4e2 !important;
    }

    .externalDroppableAccept {
        width: 16px;
        height: 16px;
        display: inline-block; /* Required to make a span sizeable */
        vertical-align: top;
        background-repeat: no-repeat;
        background-image: url("/javax.faces.resource/dynaTree/iconsBig.gif.xhtml?ln=images");
        background-position: 32px -112px;
    }

    .externalDroppableReject {
        width: 16px;
        height: 16px;
        display: inline-block; /* Required to make a span sizeable */
        vertical-align: top;
        background-repeat: no-repeat;
        background-image: url("/javax.faces.resource/dynaTree/iconsBig.gif.xhtml?ln=images");
        background-position: -16px -112px;
    }
}