{
  title: "window"
  orientation: vertical
  position: center
  children: {
    hbox: {
      title: "big box"
      frame: true
      align: left
      children: {
        vbox: {
          title: "cbtest"
          id: "cbtest"
          frame: true
          children: {
            checkbox: { caption: "~first checkbox"  checked  expand: true }
            checkbox: { caption: "~second checkbox"          expand: true }
            label: { hgroup: lbl0  caption: "zz label"  textalign: right    expand: true }
          }
        }
        vbox: {
          title: "vbox"
          frame: true
          children: {
            label: { hgroup: lbl0  caption: "first label"  textalign: left    expand: true }
            label: { hgroup: lbl0  caption: "second label" textalign: center  expand: true }
            label: { hgroup: lbl0  caption: "min label"    textalign: right   expand: false  align: center }
            label: { hgroup: lbl0  caption: "last label"   textalign: center  expand: false  align: right }
          }
        }
      }
    }
    hbox: {
      title: "hbox"
      frame: true
      align: right
      children: {
        label: { hgroup: lbl0  caption: "it's first"     expand: true }
        //span: { width: 4 }
        line /*: { width: 5 }*/
        label: { hgroup: lbl0  caption: "this is second" expand: true }
      }
    }
    line /*{ height: 3 }*/
    hbox: {
      id: "btnbox"
      expand: true
      padding: 2  //or: padding: (4 0)
      children: {
        span: { flex: 1 }
        button: { id: "button0"  caption: "~disabled"  disabled }
        button: { id: "button1"  caption: "~button" }
        button: { hgroup: "btn-cancel-apply" id: "cancel"  caption: "cancel"  cancel }
        button: { hgroup: "btn-cancel-apply" id: "apply"  caption: "o~k"  default }
      }
    }
  }
}

/* widget style sheet */

// default window color scheme
default {
  back-color: #008;

  #active: {
    text-color: #fff;
    hot-color: #f00;
    switch-color: #fff;
    frame-color: #fff;
    frame-text-color: #fff;
    frame-icon-color: #0f0;
  }

  #inactive: {
    text-color: #aaa;
    hot-color: #a00;
    switch-color: #aaa;
    frame-color: #aaa;
    frame-text-color: #aaa;
    frame-icon-color: #0a0;
  }

  #disabled: {
    text-color: #666;
    hot-color: #600;
    switch-color: #666;
    frame-color: #888;
    frame-text-color: #888;
    frame-icon-color: #080;
  }

  // window
  @window: {
    // darken inactive window
    #inactive(#active): {
      darken: 128;
    }
  }

  // button
  @button-round: {
    back-color: #999;
    text-color: #000;
    hot-color: #600;
    #active: {
      back-color: #fff;
      hot-color: #c00;
    }
    //#inactive(#inactive@$up$): { text-color: #555; }
    #disabled: {
      back-color: #444;
      text-color: #333;
      hot-color: #333;
    }
  }

  // button
  @button: {
    shadow-size: 4;
    add-markers: false; // true: use "[< >]", false: use "< >"
    //hide-markers: true; // totally hide all markers
    back-color: #090;
    //text-color: #000;
    hot-color: #600;
    #active: {
      back-color: #099;
      //text-color: #000;
      text-color: #ff9;
      hot-color: #c00;
    }
    #inactive(#inactive@$up$): {
      text-color: #ff9;
      hot-color: #c00;
    }
    #disabled: {
      //back-color: #444;
      text-color: #333;
      hot-color: #333;
    }
  }

  @label: {
    #active: {
      back-color: #440;
    }
    #inactive(#active);
  }

  @static: {
    text-color: #ff0;
    #inactive(#active);
  }

  @box: {
    #inactive(#active);
  }

  @switchbox: {
    //switch-color: #fff;
    #active: {
      back-color: #080;
    }
    #inactive: {
      switch-color: #fff;
    }
  }

  @checkbox(@switchbox): {}
  @radiobox(@switchbox): {}
}