/* Form UI for Onsager project
 * CSS designed by Vegard Sjonfjell
 * Fugue icon set ©2010 Yusuke Kamiyamane
 * http://p.yusukekamiyamane.com/
 */

div {
    margin: 4px;
}

/* Buttons */
button, input[type="button"], input[type="submit"] {
    border: 1px solid white;
    padding: 0 8px 0 8px;
    max-height: 18px;
    min-height: 18px;

    background: url(img/button-bg.png) repeat-x;
    color: #505050;
    font: 10px "Arial", sans-serif;
    font-weight: 600;
    text-align: center;
    
    cursor: pointer;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    -moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;
    -webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 3px; 
    box-shadow: rgba(0,0,0,0.5) 0px 1px 3px;
}

button:active, input[type="button"]:active, input[type="submit"]:active {
    color: #707070;
    /*
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    */
    -moz-box-shadow: rgba(0,0,0,0.5) 0 0 1px;
    -webkit-box-shadow: rgba(0,0,0,0.5) 0 0 1px; 
    box-shadow: rgba(0,0,0,0.5) 0 0 1px;
}

/* Hack to get mozilla browsers to stop showing a dotted border inside active buttons */
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, button::-moz-focus-inner {
  border: 0;
}

/* Blue button */
button.blue, input[type="button"].blue, input[type="submit"].blue {
    background: url(img/button-bg-blue.png) repeat-x;
}

/* Green button */
button.green, input[type="button"].green, input[type="submit"].green {
    background: url(img/button-bg-green.png) repeat-x;
}

/* Buttons with icons! */
button span {
    padding-left: 16px;
}

/* Application button */
button span.app {
  background: url(img/application-small-blue.png) left center no-repeat;
}

/* Arrow up button */
button span.up {
  background: url(img/arrow-090-small.png) left center no-repeat;
}

/* Arrow down button */
button span.down {
  background: url(img/arrow-270-small.png) left center no-repeat;
}

/* Arrow left button */
button span.left {
  background: url(img/arrow-180-small.png) left center no-repeat;
}

/* Arrow right button */
button span.right {
  background: url(img/arrow-000-small.png) left center no-repeat;
}

/* Search button */
button span.search {
  background: url(img/binocular-small.png) left center no-repeat;
}

/* Calendar button */
button span.calendar {
  background: url(img/calendar-small.png) left center no-repeat;
}

/* Camera button */
button span.camera {
  background: url(img/camera-small-black.png) left center no-repeat;
}

/* Edit button */
button span.edit {
  background: url(img/pencil-small.png) left center no-repeat;
}

/* Remove button */
button span.remove {
  background: url(img/minus-small.png) left center no-repeat;
}

/* Add button */
button span.add {
  background: url(img/plus-small.png) left center no-repeat;
}

/* Round remove button */
button span.remove-round {
  background: url(img/minus-small-white.png) left center no-repeat;
}

/* Round add button */
button span.add-round {
  background: url(img/plus-small-white.png) left center no-repeat;
}

/* Tag button */
button span.tag {
  background: url(img/tag-small.png) left center no-repeat;
}

/* Pin button */
button span.pin {
  background: url(img/pin-small.png) left center no-repeat;
}

/* Favorite button */
button span.favorite {
  background: url(img/heart-small.png) left center no-repeat;
}

/* Info button */
button span.info {
  background: url(img/information-small-white.png) left center no-repeat;
}

/* Quote/Cite button */
button span.cite {
  background: url(img/balloon-small.png) left center no-repeat;
}

/* Lock button */
button span.lock {
  background: url(img/lock-small.png) left center no-repeat;
}

/* Clock button */
button span.clock {
  background: url(img/clock-small.png) left center no-repeat;
}

/* Wizard button */
button span.wizard {
  background: url(img/wand-small.png) left center no-repeat;
}

/* Erase button */
button span.erase {
  background: url(img/eraser-small.png) left center no-repeat;
}

/* Restore button */
button span.restore {
  background: url(img/bandaid-small.png) left center no-repeat;
}

/* Enable button */
button span.enable {
  background: url(img/tick-small.png) left center no-repeat;
}

/* Disable button */
button span.disable {
  background: url(img/cross-small.png) left center no-repeat;
}

/* Mail button */
button span.mail {
  background: url(img/mail-small.png) left center no-repeat;
}

/* Save button */
button span.save {
  background: url(img/disk-small-black.png) left center no-repeat;
}

/* Discard button */
button span.discard {
  background: url(img/slash-small.png) left center no-repeat;
}

/* Form fields */
input[type="text"], input[type="password"] {
    font: 10px "Arial", sans-serif;
    padding: 4px;
    border: 1px solid #a0a0a0;
    max-height: 22px;
    min-height: 22px;
    width: 15em;
    background-color: #fafafa;
}

input[type="text"].stretch, input[type="password"].stretch {
    width: 100%;
}