/**
 * Styles for flexive components
 */

/* FxValueInput */

/* Container of a fxValueInput element */
div.fxValueInput {
    width: 300px;
}

/* Container in ContentEditor used to show readonly properties */
.property div.fxValueInputReadOnly {
    border: 1px dashed #A0A0A0;
    padding: 2px;
    width: 394px !important;
}

/* An input row containing the input element and the default language checkbox */
div.fxValueInputRow {
/*position: relative;*/
    width: 225px;
    min-height: 20px; /* avoid problems with floating checkboxes */
    padding: 1px 1px 1px 0;
}

input.fxValueDefaultLanguageRadio {
    float: right;
}

.FxHTMLInput .fxValueInputRow .fxValueHtmlEditorContainer {
    padding-top: 25px; /* Move below language select */
}

/* Limit width of the month select list*/

.FxDateInput .popupCalendar, .FxDateTimeInput .popupCalendar,
    .FxDateRangeInput .popupCalendar, .FxDateTimeRangeInput .popupCalendar {
    display: none;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 999;
}

select.fxValueSelectInput, .fxValueInputElementWidth, input.fxValueTextInput {
    width: 175px;
}

textarea.fxValueTextArea, textarea.fxValueTextAreaHtml {
    width: 100%; /* Size will be constrained by .fxValueTextAreaContainer */
    height: 140px;
}

/* Stretch single-language inputs over space normally occupied by the language select */
.fxValueInput input[type="text"].singleLanguage,
    .fxValueInput textarea.singleLanguage,
    .fxValueInput select.singleLanguage {
    width: 100%; /* don't force with !important because it breaks standalone inputs outside a fx:formRow */
}

.FxReferenceInput input[type=text] {
    width: 65% !important; /* leave room for the browse references button, overrides yui-skin-sam autocomplete width */
}

.FxReferenceInput input[type=text].singleLanguage {
    width: 92% !important; /* leave room for the browse references button, overrides yui-skin-sam autocomplete width */
}

.fxValueInput input,
    .fxValueInput textarea {
    border: 1px solid gray;
}

.fxValueInput input[type="checkbox"] {
    border: none; /* looks ugly in IE */
    margin: 0 0.3em 0 0; /* don't use vertical margins to ensure the checkbox isn't higher than the main input (FF Windows) */
}

.fxValueInput input[type="checkbox"].fxValueEmpty {
    opacity: 0.3;
    filter: alpha(opacity = 30);
}

.fxValueTextAreaContainer {
    height: 150px;
}

.fxResizeable textArea.fxValueTextArea {
    height: 100%; /* stretch to dynamic container size */
}

input.fxValueTextInput {
/*float: left;*/
}

input.fxValueFileInput {
/*float: left;*/
}

div.fxValueInput {
    display: block;
}

div.fxValueInput select.languages {
    float: right;
    width: 70px;
}

div.fxValueInputLanguageIcon {
    float: right;
    padding-right: 5px;
    width: 15px;
}

div.fxValueInput img.findReferencesIcon {
}

div.fxValueInputAutocomplete {
    position: absolute;
    left: 0;
}

/* Query editor */

.queryRoot {
    width: 600px;
}

table.queryRoot {
    border-collapse: separate;
    border: 1px solid #A0A0A0;
    background-color: #EAF1D6;
}

table.queryRoot td.nestedTable {
    border: 1px solid #A0A0A0;
    border-right: 0;
    margin-right: 0;
}

table.queryRoot td.queryOperator {
    padding-left: 5px;
}

table.queryRoot td.editorRow {
    border: 1px solid #EAF1D6;
}

table.queryRoot tr {
    height: 2.5em;
}

table.queryChild0, table.queryChild1 {
    border-collapse: separate;
    width: 100%;
}

table.queryChild0 {
    background-color: #EAF1D6;
}

table.queryChild0 td.editorRow {
    border: 1px solid #EAF1D6;
}

table.queryChild1 {
    background-color: #F9FCF1;
}

table.queryChild1 td.editorRow {
    border: 1px solid #F9FCF1;
}

table.queryRoot td.invalidNodeValue {
    background-color: #FFF691;
}

table.queryRoot td.selection {
    background-color: #D2E4FD;
}

div.queryRowElement {
    float: left;
    white-space: nowrap;
    padding-right: 3px;
}

div.queryWideRowElement {
    float: right;
    padding-top: 5px;
    margin-right: 20px;
}

div.queryRemoveNode {
    position: absolute;
    right: 0;
    padding-left: 5px;
}

div.queryRowLabel {
    float: right;
    padding-right: 5px;
}

div.queryInputContainer {
    position: relative;
    float: right;
    width: 260px;
}

select.queryValueComparator {
    width: 100px;
}

#queryEditorContainer .emptyMessage {
    width: 580px;
    outline: 1px solid #A0A0A0;
    background-color: #EAF1D6;
    padding: 10px;
}

/* input styles for the query editor */

.queryRoot div.fxValueInputRow {
    width: 150px;
}

.queryRoot .fxValueInputElementWidth {
    width: 122px; /*overflow: hidden;*/
}

.queryRoot input.fxValueTextInput,
    .queryRoot .fxValueInput input[type="text"].singleLanguage,
    .queryRoot .fxValueInput textarea.singleLanguage,
    .queryRoot .fxValueInput select.singleLanguage {
    width: 125px;
}

/* Reduce text input for reference popup button */
.queryRoot .FxReferenceInput input.fxValueTextInput {
    width: 100px !important;
}

.queryRoot textarea.fxValueTextArea, .queryRoot textarea.fxValueTextAreaHtml {
    height: 100px;
}

.queryRoot textarea.fxValueTextAreaHtml {
    width: 350px;
}

.queryRoot input.fxValueTextInput {
    float: left;
}

.queryRoot div.fxValueInput {
    width: 210px;
}

/** Temporary fix for date input alignment */
.queryRoot .FxDateInput img.button {
    margin-top: -5px;
}

/** FxPopup - a static dojo popup, e.g. for displaying some text */
div.dojoDialog {
    background-color: #F9FCF1;
    border: 1px solid black;
    -moz-border-radius: 4px;
    padding: 4px;
}

/** jsDataScroller */

table.dataScroller {
    width: 180px;
}

table.dataScroller td.button {
    padding: 2px;
    width: 20px;
}

td.button a {
    outline: none;
}

td.button img {
    opacity: 0.8;
}

td.button:hover img {
    opacity: 1;
}

table.dataScroller td.scrollPosition {
    width: 100px;
    padding: 2px;
}

td.scrollPosition input {
    width: 96px;
    text-align: center;
}

/* form input styles */

fieldset.formFields {
    border-width: 1px;
    border-style: solid;
    border-color: #bdbdbd;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 5px;
    margin-top: 5px;
}

fieldset.formFields legend {
    margin-left: 8px;
    padding-left: 2px;
}

div.formRow {
    float: left;
    display: block;
    padding: 2px;
}

div.formRow input[type=text] {
/* Limit plain text input width */
    max-width: 100%;
}

div.formLabelContainer {
    float: left;
    margin-top: 2px;
    margin-right: 3px;
    width: 120px;
    padding: 2px;
    white-space: nowrap;
}

div.formLabel {
    width: 100%;
    overflow: hidden;
    white-space: normal;
    padding-top:2px;
}

div.formInputElement {
    float: left;
    width: 300px;
    margin-top: 2px;
    padding: 2px;
}

div.formError {
    float: left;
    height: 12px;
    padding: 2px;
    width: 80px;
}

.dataTableHeader {
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    color: gray;
    font-size: 11px;
    font-weight: bold;
}

/* Pure CSS tooltips, based on http://www.webbe.de/index.shtml?CONTENT=script_css_tooltip */

div.tooltip {
    position: relative;
}

div.tooltip:hover {
    color: #0000ff;
    background: transparent;
}

div.tooltip div.tooltipContent {
    display: none;
}

div.tooltip:hover div.tooltipContent {
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 100;
    color: #000000;
    border: 1px solid #000000;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #FFFFCC;
    padding: 3px;
}

/** Autocomplete styles */

/* Content autocomplete - a block div with a thumbnail preview */
div.pkAutoComplete {
    height: 50px;
    display: block;
    clear: both;
}

div.pkAutoComplete img {
    float: left;
}

div.pkAutoComplete div {
    margin-left: 55px;
    display: block;
}

div.pkAutoComplete .caption {
    padding-bottom: 3px;
    font-size: 13px;
    font-weight: bold;
}

div.pkAutoComplete .property {
}

/** ColorPicker styles */

div.colorPickerPreview {
    display: inline;
    margin-right: 5px;
}

/** An inline image that acts as a (Javascript) button */
img.button {
    cursor: pointer;
}

/** Yahoo UI default skin overrides */
.yui-skin-sam .yui-ac-input {
    position: relative !important; /* override position:absolute since it makes buttons near the input field difficult to place*/
}

/** "CSSPopup" styles for fx:navigation */
.flexiveMenuBar ul {
    display: block;
    padding: 0;
    margin: 0;

    background-color: white;

    list-style: none;
    z-index: 999;
}

.flexiveMenuBar li {
    padding: 2px 5px 2px 5px;
    background-color: white;
}

.flexiveMenuBar li:hover {
    background-color: #f0f0f0;
}

.flexiveMenuBar li.selected {
    background-color: #ccc;
}

.flexiveMenuBar > ul {
    height: 25px;
}

.flexiveMenuBar > ul > li {
    position: relative;
    float: left;
    height: 25px;
    line-height: 25px;
    margin-right: -1px;

    border: 1px solid #ccc;
}

/* First submenu level */
.flexiveMenuBar ul ul {
    position: absolute;
    display: none;
    top: 29px;
    left: -1px;

    background-color: white;
    border: 1px solid #ccc;
}

.flexiveMenuBar ul ul {
    position: relative;
    min-width: 100px;
}

.flexiveMenuBar ul ul li {
    position: relative;
}

/* Other submenu levels */
.flexiveMenuBar ul ul ul {
    position: absolute;
    left: 100px;
    top: 2px;
}

.flexiveMenuBar li:hover > ul {
    position: absolute;
    display: block;
}

/* fx:resultTable styles */

/* Hide header row in thumbnail view */
.flexiveResultThumbnails thead {
    display: none;
}

flexiveResultThumbnails > table,
    flexiveResultList > table {
    max-width: 99%;
}

/* Horizontally center thumbnails */
.flexiveResultThumbnails img.resultThumbnail,
    .flexiveResultList tbody img.fxThumbnail {
    display: block;
    margin: auto; /* center horizontally */
}

.flexiveResultThumbnails .yui-dt-liner {
    position: relative;
}

.PREVIEW1 .yui-dt-liner {
    height: 57px; /* 42px thumbnail + 15px footer */
}

.PREVIEW1 .thumbnailContainer {
    display: table-cell;
    height: 42px;
    width: 42px;
    vertical-align: middle;
}

.PREVIEW2 .yui-dt-liner {
    height: 100px; /* 85px thumbnail + 15px footer */
}

.PREVIEW2 .thumbnailContainer {
    display: table-cell;
    height: 85px;
    width: 85px;
    vertical-align: middle;
}

.PREVIEW3 .yui-dt-liner {
    height: 247px; /* 232px thumbnail + 15px footer */
}

.PREVIEW3 .thumbnailContainer {
    display: table-cell;
    height: 232px;
    width: 232px;
    vertical-align: middle;
}

.SCREENVIEW .yui-dt-liner {
    height: 783px; /* 768px thumbnail + 15px footer */
}

.SCREENVIEW .thumbnailContainer {
    display: table-cell;
    height: 768px;
    width: 1024px;
    vertical-align: middle;
}

/* Thumbnail footer */
.flexiveResultThumbnails .resultThumbnailCaption,
    .flexiveResultThumbnails .resultThumbnailAction {
    background-color: #555;
    color: #DDD;
    height: 15px;
    line-height: 15px;
}

.flexiveResultThumbnails .resultThumbnailCaption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;

    padding-left: 0.5em;
    padding-right: 20%; /* never occupy space of (optional) action item */
    overflow: hidden;
}

.flexiveResultThumbnails .resultThumbnailAction {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20%;

    text-align: right;
    padding-right: 0.5em;
}

/* fx:resizable container */
.fxResizeable {
    padding: 0 9px 8px 0; /* create room for resizable textarea handles */
}

/* Content Editor */

.fxContentEditor_languageSwitch .formLabel {
    font-weight: bold;
}

.fxContentEditor_languageSwitch .formLabelContainer {
    width: 100px;
}

.fxContentEditorButton,
a.fxContentEditorButton:hover {
    cursor: pointer;
    border: 0;
    float: left;
    margin-right: 3px;
    display: block;
    height: 16px;
    width: 16px;
}

.fxContentEditorDisabled {
    -moz-opacity: .25;
    opacity: .25;
    filter: alpha(opacity = 25);
}

a.fxContentEditor_moveUpIcon,
a.fxContentEditor_moveUpIcon:hover {
    background: url(../images/contentEditor/up.png) no-repeat;
}

a.fxContentEditor_moveDownIcon,
a.fxContentEditor_moveDownIcon:hover {
    background: url("../images/contentEditor/down.png") no-repeat;
}

a.fxContentEditor_addIcon,
a.fxContentEditor_addIcon:hover {
    background: url("../images/contentEditor/add.png") no-repeat;
}

.fxContentEditor_addIcon_disabled {
    background: url("../images/contentEditor/add.png") no-repeat;
}

a.fxContentEditor_removeIcon,
a.fxContentEditor_removeIcon:hover {
    background: url("../images/contentEditor/remove.png") no-repeat;
    margin-right: 5px;
}

.fxContentEditor_removeIcon_disabled {
    background: url("../images/contentEditor/remove.png") no-repeat;
}

.fxContentEditor_insertIntoGroup,
.fxContentEditor_insertIntoGroup:hover {
    background: url("../images/contentEditor/group.png") no-repeat;
}

.fxContentEditor_insertIntoRootGroup,
.fxContentEditor_insertIntoRootGroup:hover {
    background: url("../images/contentEditor/group.png") no-repeat;
}

.fxContentEditor_insertBelowProperty,
.fxContentEditor_insertBelowProperty:hover {
    background: url("../images/contentEditor/property.png") no-repeat;
}

.fxContentEditor_insertAssignment,
.fxContentEditor_insertAssignment:hover {
    background: url("../images/contentEditor/add.png") no-repeat;
}

a.fxContentEditor_newReferenceIcon,
a.fxContentEditor_newReferenceIcon:hover {
    background: url("../images/contentEditor/new.png") no-repeat;
}

a.fxContentEditor_editReferenceIcon,
a.fxContentEditor_editReferenceIcon:hover {
    background: url("../images/contentEditor/edit.png") no-repeat;
}

.fxContentEditor_group {
    margin: 8px 15px 8px 0;
    border-left: 1px solid #d3dcb7;
    border-right: 1px solid #d3dcb7;
    background-color: #f9fcf1
}

.fxContentEditor_group .header {
    background: #bdbdbd url("../images/contentEditor/groupHeader.gif");
    border-bottom: 1px solid #d3dcb7;
    color: black;
    padding: 2px;
    height: 16px;
    vertical-align: middle;
}

.fxContentEditor_group_content {
    margin-top: 8px;
    padding-left: 6px;
}

.fxContentEditor_group .header .display {
    position: relative; /*padding-left:5px;*/
    font-style: italic;
    font-weight: bold;
    float: left;
}

.fxContentEditor_group .header .icon {
    height: 16px;
    width: 16px;
    border: 0;
    float: left;
    margin-left: 2px;
    clear: both;
}

.fxContentEditor_group .end {
    border-bottom: 1px solid #bdbdbd;
    margin-bottom: 5px
}

.fxContentEditor_property {
/*margin-left:8px;*/
    margin-top: 4px;
    margin-bottom: 4px;
}

.fxContentEditor_property .display {
/*padding-left:5px;*/
    float: left;
    width: 130px;
    overflow: hidden;
}

.fxContentEditor_property .fxContentEditor_value[readonly='true'] {
    width: 400px;
    float: left;
    margin-bottom: 4px;
    padding-left: 2px;
    padding-right: 2px;
    padding-bottom: 2px;
    border: 1px solid #bdbdbd;
    background-color: #f9fcf1
}

.fxContentEditor_property .fxContentEditor_value[readonly='false'] {
    width: 400px;
    float: left;
    margin-bottom: 4px
}

.fxContentEditor_popupMenu {
    position: absolute;
    background-color: #ebf5cc;
    border: 1px dotted black;
    display: none;
    z-index: 997;
    text-decoration: none;
    color: black;
    padding: 10px 10px 15px;

    font-weight: bold;
    width: 250px;
}

.fxContentEditor_popupMenu .icon {
    border: 0;
    margin-right: 5px;
}

.fxContentEditor_popupMenu .elementSelectListbox {
    margin-top: 8px;
    width: 250px;
    margin-bottom: 5px;
}

.fxContentEditor_popupMenu .txt {
    color: black;
    position: relative;
    top: -4px;
}

.fxContentEditor_popupMenu a,
.fxContentEditor_popupMenu a:hover {
    text-decoration: none;
    color: black;
    background: transparent;
}

.fxContentEditor_referenceContainer {
    padding: 10px;
    border: 2px solid #CCCCCC;
    background: white none repeat scroll 0 0;

    display: inline;
    left: 40px;
    position: absolute;
}

/* Content editor input styles */
.fxContentEditor_property .fxValueTextInput, .property .fxValueInputElementWidth, .property .fxValueTextArea, .property .fxValueTextAreaHtml {
    width: 275px;
}

.fxContentEditor_property div.fxValueInputRow {
    width: 325px;
}

.fxContentEditor_property div.fxValueInput {
    width: 400px;
}

/* Container in ContentEditor used to show readonly properties */
.fxContentEditor_property div.fxValueInputReadOnly {
    border: 1px dashed #A0A0A0;
    padding: 2px;
    width: 394px !important;
}

.fxContentEditor_value .binaryDescription {
    padding-left: 3px;
    border: 1px solid #d3dcb7;
    background-color: white;
}

.fxContentEditor_value .binaryDownloadIcon {
    padding: 0;
    margin-left: 5px;
    border: 0;
    height: 16px;
    width: 16px;
    vertical-align: middle;
}

.fxContentEditor_locked {
    background: #CCCCCC url("../images/contentEditor/screenLockBg.gif");
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    z-index: 999;
}

.fxContentEditor_openGroups {
    cursor: pointer;
    background: url("../images/contentEditor/openGroups.png") no-repeat;

    border: 0;
    float: left;
    display: block;
    height: 16px;
    width: 16px;
    margin-right: 5px;
}

.fxContentEditor_foldGroups {
    cursor: pointer;
    background: url("../images/contentEditor/foldGroups.png") no-repeat;
    border: 0;
    float: left;
    display: block;
    height: 16px;
    width: 16px;
    margin-right: 5px;
}

.fxContentEditor_editorContent {
    position: relative;
    left: -10px;
    display: block;
    padding-top: 4px;
}

.fxContentEditor_statusStart {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 999;
    background: url("../images/contentEditor/busy.gif") no-repeat;
    border: 0;
    height: 67px;
    width: 67px;
}

.fxContentEditor_xpathError {
    background-color: #FF9999;
}