/* All the CSS magic, to style-up a form.  Uses the class name 'styleable' for
   the form, to support easily switching to a custom style and even per-form
   specific styles.

   Used with the accompanying Form Styling Hack JavaScript (to actually apply
   the styles and register event callbacks).

   Still incomplete and limited to the subset I use. */


/* FIXME  Some of this stuff, most notably width and friends, doesn't belong
          here but is #float specific.  Move those back. */

form.styleable {
  font: inherit;
  width: 12em;
}

form.styleable input[type=text] {
  font: inherit;
   color: #c0c0c0;
  border: 1px solid #808080;
  background: url(../img/widgets/input.png) no-repeat;
  margin: 0;
  padding: 0.2em;
   padding-left: 0.4em;
   padding-top: 0.25em;
  width: 100%;        /* additionally use width, on the N810 it would be
                         shorter than full width otherwise */
  max-width: 100%;    /* 12em, using max-width rather than a fixed width makes
                         the widget behave nicely, not sensitive to padding */
}

form.styleable input[type=text]:hover {
  background-color: #f0f0f0;
  border: 1px solid #404040;
}

form.styleable input[type=text]:focus {
  color: inherit;
  background-color: #f0f0f0;
  border: 1px solid #404040;
}



form.styleable label {
  display: inline;  /* block; */
  display: block;
  margin: 0;
   margin-top: 2px;
  padding: 2px;
   padding-left: 22px;
  /* position: relative; left: -20px; */
  border: 1px solid #fff;
}

form.styleable label:hover {
  background-color: #f8f8f8;
  border: 1px solid #e8e8e8;
}



/* Checkbox and radiobutton specific label styles, class .checkbox added
   during form styling. */


form.styleable label.checkbox {
  background: url(../img/widgets/checkbox.png) no-repeat;
   background-position: 2px 40%;
}

form.styleable label.checkbox.checked {
  background-image: url(../img/widgets/checkbox-on.png);
}
form.styleable label.checkbox.focus {
  border: 1px dotted black;
}


form.styleable label.radio,
form.styleable label.radio.checked,
form.styleable label.radio.focus {    /* taint-check */
  background-color: #a00000;
  border: 4px solid red;
}



form.styleable input[type=checkbox].hidden {
  display: block;
  position: fixed;
   left: -20px;
  /*  left: 10px; top: 10px;  /* DEBUGGING */
  /* opacity: 0.4;            /* DEBUGGING */
}
  /* position: relative; left: -2em; */
  /* visibility: hidden; */
  /* display: none; */




/* Sigh.  So I can add a type=checkbox property in JS, even to something like
   a label.  I can *not*, however, use that in CSS [attribute] constraints.
   Bummer.  On the bright side, I can assign multiple styles to an HTML
   object, and yes, I even can match on that in CSS definitions.  Hoorah! */

/* form label[type=checkbox]    // doesn't work        */
/* form label[for~=limit]       // doesn't work either */