/* General Styles */

* {
  margin: 0;
  padding: 0;
}

html {
  overflow: hidden;
}

body {
  position: fixed; /* Prevents scrolling of content in IE. */
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: Window;
  color: WindowText;
  font: message-box; /* use system font */
  font-size: 80% !important; /* This overrides the font-size contained in the system font if it does not follow dpi settings. */
  cursor: default;
  user-select: none;
}

[unselectable=on] {
  user-select: none;
}

input, label, select {
  cursor: pointer;
  min-height: 1.2em;
  vertical-align: middle;
  padding: 0.25em;
  font: message-box; /* use system font */
  font-size: 100% !important; /* This overrides the font-size contained in the system font if it does not follow dpi settings. */
}

input[type=button] {
  height: 1em;
  min-height: 1em;
  padding: 0;
}

input[type=text], input[type=number] {
  cursor: auto;
}

input[type=text].num, input[type=number] {
  text-align: right;
  width: 2.5em;
  padding-right: .5em;
}

button {
  font: message-box; /* use system font */
  font-size: 100% !important; /* This overrides the font-size contained in the system font if it does not follow dpi settings. */
  color: ButtonText;
  padding: 0.125em 0.25em;
  line-height: 1.2em;
  vertical-align: middle;
}

form {
  padding: 1em;
}

fieldset {
  text-indent: 0 !important;
  margin-bottom: 1em;
  margin-right: 0 !important;
  padding: 1em;
  padding-top: 0 !important;
}

fieldset div {
  clear: both;
  line-height: 2em;
}

fieldset div > :first-child {
  width: 100%;
}

.left {
  float: left;
}

.right {
  float: right;
}

.clear {
  clear: both;
}



/* UI elements */



#main {
  width: 100%;
  height: 100%;
}

.half {
  width: 50%;
}

.pane {
  /* Workaround. The height should stretch the available space,
   * without height it's correct but no hasLayout and children with 100% don't work,
   * with 100% it takes the table height and overflows.
   */
  height: 75%; /* TODO: Not needed in modern browsers & Safari. Test if we don't need this in newer IE, than use browser hack to use it only in <= IE8 */
  *height: 300px; /* IE7 */
}

#loading {
  left: 50%;
  top: 50%;
  position: relative;
  margin: -33px 0 0 -33px;
}

/* buttons with icons */

.text-button {
  height: 1.75em;
}

.symbolic-button {
  min-height: 1.5em; /* For Safari, which ignores all other/smaller button size properties. */
  line-height: 1em;
  min-width: 1.5em;
  width: 1.5em;
  height: 1.5em;
  padding: 0;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
}

.symbolic-button img, .text-button img {
  height: 1em;
  width: auto;
  vertical-align: middle;
}

/* scroll list */

.scroll-list-frame {
  position: relative;
  /* width: 100%; */
  left: 0;
  right: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: white;
  border: 1px ThreeDShadow solid;
}

.scroll-list {
  list-style-type: none;
  position: absolute;
  margin: 0;
  padding: 0;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* toolbars */

.toolbar.header {
  font-weight: bold;
  color: HighlightText;
  background: url("../images/caption.png") repeat scroll 50% 50% Highlight;
  border-radius: 0.5em 0.5em 0 0;
  text-align: center;
  line-height: 1em;
  *max-height: 30px; /* IE7 */ /* TODO: is this still correct? */
}

.toolbar.header > * {
  text-align: center;
  vertical-align: middle;
}

.toolbar.header > input {
  padding-top: 0;
  padding-bottom: 0;
  width: 8em;
}

.toolbar.content {
  list-style-type: none;
  margin: 0;
  padding: 0;
  min-height: 3em;
  overflow: hidden;
  border: 1px ButtonFace solid;
}
.toolbar.content:after {
  clear: both;
  display: block;
  content: "";
  width: 0;
  height: 0;
}

.toolbar .toolbar-button {
  float: left;
  border: 1px ButtonFace solid;
  margin-left: -1px;
  margin-top: -1px;
}

.toolbar .ui-sortable-placeholder {
  visibility: visible !important;
  background: #FFFADF;
  box-shadow: 0 0.2em 1em 0 rgba(0,0,0,0.2) inset;
}

/* toolbar button */

.toolbar-button {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* Internet Explorer 7 inline-block hack */
  *display: inline;
  zoom: 1;
}

.toolbar-button .name,
.toolbar-button .category,
.toolbar-button .description,
.toolbar-button .controls {
  display: none;
}

.toolbar-button .icon {
  margin: 0;
  vertical-align: middle;
  /*width: 1.85em;*/
  width: auto; /* Because we have one narrow element, the separator. */
  height: 1.85em;
  margin: 0.5em;
}

/* wide theme */

#buttons-available .toolbar-button {
  width: 95%; /* Workaround to work with scrollbar width. */
  display: block;
  text-align: left;
  margin: 0.5em;
  padding-bottom: 0.5em;
  border-bottom: 1px ButtonFace solid;
  line-height: 1em;
}

#buttons-available .toolbar-button .icon {
  float: left;
  margin-bottom: 0;
  /* for dpi: force a relative size instead of using native size 24px */
  /*width: 1.85em;*/
  width: auto; /* Because we have one narrow element, the separator. */
  height: 1.85em;
  max-width: 2em;
  max-height: 2em;
  vertical-align: middle;
}

#buttons-available .toolbar-button .name {
  display: inline;
  margin-right: 0.25em;
  font-weight: bold;
  font-size: 1.25em;
  text-overflow: ellipsis;
  text-shadow: 0 1px 1px rgba(255,255,255,0.5);
  /*white-space: nowrap;*/
  vertical-align: middle;
}

#buttons-available .toolbar-button .category {
  display: inline-block;
  margin-right: 0.5em;
  overflow: hidden;
  color: GrayText;
  font-weight: normal;
  font-style: italic;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

#buttons-available .toolbar-button .description {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  font-size: 0.9em;
  text-overflow: ellipsis;
  text-align: justify;
  word-break: hyphenate;
  word-wrap: break-word;
  /*-ms-word-break: break-all;*/
  hyphens: auto;
  zoom: 1;
  vertical-align: middle;
}

#buttons-available .toolbar-button .controls {
  display: block;
  float: right;
}
#buttons-available .toolbar-button .controls button {
  width: 1em;
  height: 1em;
  min-width: 1em; /* !!! TODO */
  min-height: 1em;
  line-height: 0.8em;
}

#buttons-available .toolbar-button.ui-draggable-dragging:not(.ui-sortable-helper) {
  box-shadow: 0 0 1em 0 rgba(0,0,0,0.3);
}

.toolbar-button.ui-sortable-helper .name,
.toolbar-button.ui-sortable-helper .category,
.toolbar-button.ui-sortable-helper .description,
.toolbar-button.ui-sortable-helper .controls {
  display: none !important;
}

.ui-draggable-dragging {
  cursor: hand;
}


/* jQueryUI */



/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
  display: none;
}
.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.ui-helper-reset {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  line-height: 1.3;
  text-decoration: none;
  font-size: 100%;
  list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
  content: "";
  display: table;
  border-collapse: collapse;
}
.ui-helper-clearfix:after {
  clear: both;
}
.ui-helper-clearfix {
  min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0;
  filter:Alpha(Opacity=0);
}

.ui-front {
  z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
  cursor: default !important;
}

/* Misc visuals
----------------------------------*/

.ui-draggable .ui-dialog-titlebar {
  cursor: move;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
  border: 2px ButtonFace outset;
  background: ButtonFace;
  /*font-weight: normal;
  color: #555555;*/
  color: ButtonFaceText;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
  color: #555555;
  text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
  border: 2px ButtonFace outset;
  background: ButtonFace;
  /*font-weight: normal;
  color: #212121;*/
  color: ButtonText;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
  color: #212121;
  text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
  border: 2px Highlight outset;
  background: Highlight;
  color: HighlightText;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #212121;
  text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
  border: 1px solid #fcefa1;
  background: #fbf9ee;
  color: #363636;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
  color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
  border: 1px solid #cd0a0a;
  background: #fef1ec;
  color: #cd0a0a;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
  color: #cd0a0a;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
  color: #cd0a0a;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
  font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
  opacity: .7;
  filter:Alpha(Opacity=70);
  font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
  opacity: .35;
  filter:Alpha(Opacity=35);
  background-image: none;
}
.ui-state-disabled .ui-icon {
  filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
}
