/*
 * Copyright (c) 2003 - 2007 OpenSubsystems s.r.o. Slovak Republic. All rights reserved.
 * 
 * Project: OpenSubsystems
 * 
 * $Id: controls.css,v 1.3 2007/01/07 06:14:08 bastafidli Exp $
 * 
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; version 2 of the License. 
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA 
 */

/**
 * All styles for controls and areas used in the dialogs.
 *
 * @version $Id: controls.css,v 1.3 2007/01/07 06:14:08 bastafidli Exp $
 * @author Miro Halas
 * @code.reviewer Miro Halas
 * @code.reviewed 1.16 2006/04/19 14:20:39 bastafidli
 */

/* Style used for DIV containing the body of the dialog. Use this for 
   non tabbed dialog while use style clsTabbedDialog (defined elsewhere) 
   for dialog with tabs at the top */
.clsDialog {
   position: relative;
   width: 100%;
   text-align: left;
   background-color: #FFE8AC;
   border-top: 1px solid White;
   border-left: 1px solid White;
   border-bottom: 1px solid #999999;
   border-right: 1px solid #999999;
   padding: 5px 10px 5px 10px;
   background-image: url(/core/images/dialogbodyfootbg.gif);
   background-repeat: repeat-x;
   background-position: bottom;   
}
div > .clsDialog {
   width: auto;
}

/* Hidden dialog parts */
.clsDialogNone {
   display: none;
}

/* =========================== Dialog row ================================== */

/* Style used for DIV representing row of controls in the dialog */
.clsDialogRow {
   position: relative;
   width: 100%;  
   /* In IE this causes help to not wrap as well which stretches window */
   /* white-space: nowrap; */
   margin-bottom: 5px;
}

/* Style used for DIV representing row of controls in the dialog 
   with alternative coloring */
.clsOtherDialogRow {
   position: relative;
   width: 100%;  
   /* In IE this causes help to not wrap as well which stretches window */
   /* white-space: nowrap; */
   margin-bottom: 5px;   
   background-color: #FFF4D6;
}

/* All controls in the left half of dialog row must be within DIV of this style */
.clsDialogRowLeftHalf {
   position: relative;
   top: 0px;
   width: 50%;
   float: left;
   white-space: nowrap;
   /* This is necessary for Mozilla to be able to expand combo box */
   z-index: 100;
}

/* All controls in the right half of dialog row must be within DIV of this style */
.clsDialogRowRightHalf {
   position: relative;
   top: 0px;
   width: 100%;
   white-space: nowrap;
   margin-left: 50%;
}

div > .clsDialogRowRightHalf {
   width: 50%;
}

/* All controls in the left half of dialog row which has no right half 
   must be within DIV of this style */
.clsDialogRowStandaloneLeftHalf {
   position: relative;
   width: 50%;
   /* Commented out since it is causing static multiline text to do not wrap. 
   If it is causing problems, solve it later. */
   /* white-space: nowrap; */
   /* This is necessary for Mozilla to be able to expand combo box */
   z-index: 100;
}

.clsDialogRowStandalone {
   position: relative;
   width: 100%;
   /* This is necessary for Mozilla to be able to expand combo box */
   z-index: 100;
}

/* ================================ Label ================================== */

/* Style used for SPAN with label with in the dialog row where the edit control 
   is not stretched to the whole size of the dialog row */
.clsLabel {
   position: relative;
   white-space: nowrap;
   top: 5px;
   
   /* If some other label next to it has control this makes 
      them aligned in the middle of the control*/
   vertical-align: top;
}

/* Style used for SPAN with label which is underlined to be connected 
   with control */
.clsOtherLabel {
   position: relative;
   white-space: nowrap;
   top: 5px;
   
   /* If some other label next to it has control this makes 
      them aligned in the middle of the control*/
   vertical-align: top;
   border-bottom: 2px solid #FFF4D6;
}

/* Style used for SPAN element representing label next to check box */
.clsLabelCheckBox {
   position: relative;
   white-space: nowrap;
   top: 3px;
   
   /* If some other label next to it has control this makes 
      them aligned in the middle of the control*/
   vertical-align: top;
}
div > .clsLabelCheckBox {
   top: 2px;
}

/* Style used for DIV representing label before the control which is 
   stretched to the whole row */
.clsStrechLabel {
   position: relative;
   padding-top: 5px;
   float: left;
   /* Spec says that float has to have width */
   width: 10em;
   padding-left: 5px;
}

/* Style used for DIV representing label before the control which is 
   stretched to the whole row and is underlined to be connected
   with the control */
.clsOtherStrechLabel {
   position: relative;
   padding-top: 5px;
   float: left;
   /* Spec says that float has to have width */
   width: 10em;
   padding-left: 5px;
   border-bottom: 2px solid #FFF4D6;
}

/* End row label without edit */ 
.clsEndRowLabel {
   position: relative;
   padding-top: 5px;
   float: right;
   text-align: right;
   /* Spec says that float has to have width */
   width: 10em;
   padding-right: 5px;
   border-bottom: 2px solid #FFF4D6;
}
div > .clsEndRowLabel {
   clear: both;
}

/* Style used for DIV representing label before the control which is 
   stretched to the whole row and is underlined to be connected
   with the control */
.clsOtherTextStrechLabel {
   padding-top: 5px;
   float: left;
   /* Spec says that float has to have width */
   width: 10em;
   padding-left: 5px;
   border-bottom: 2px solid #FFF4D6;
}
div > .clsOtherTextStrechLabel {
   padding-top: 10px;
   clear: both;
}

/* ========================== Control container ============================ */

/* Style used for SPAN with controls which are not stretched to the whole 
   size of the dialog row */
.clsControl {
}

/* Style used for DIV with controls which are stretched to the whole 
   size of the dialog row. If Button follows the control set the margin-right
   as demonstrated in this style */
.clsStrechControl {
   position: relative;
   clear: none;
   /* It seems like this is bug in IE and combination of these two will
      make the edit control stretch to the whole content area */
   width: 100%;
   /* Seems like this makes the IE control to stretch to the whole widh but the button */
   /* margin-right: 60px; */
}
div > .clsStrechControl {
   width: auto;
   /* This has to be the same as the width of the label */
   /* This cannot be in IE section because it makes sit shift right */
   margin-left: 10.5em;
   /* This has to be the same width as the button. IE has two different value so fix this on one */
   /* margin-right: 120px; */
}
span > .clsStrechControl {
  width: auto;
}

/* =================== Read only text control container ===================== */

/* Style used for DIV or SPAN with read only text, which is stretched to the whole 
   size of the dialog row. If Button follows the control set the margin-right
   as demonstrated in this style */
.clsTextStrechControl {
   position: relative;
   clear: none;
   /* It seems like this is bug in IE and combination of these two will
      make the edit control stretch to the whole content area */
   width: 100%;
   /* Seems like this makes the IE control to stretch to the whole widh but the button */
   /* margin-right: 60px; */
}
div > .clsTextStrechControl {
   width: auto;
   padding-top: 8px;
   /* This has to be the same as the width of the label */
   /* This cannot be in IE section because it makes sit shift right */
   margin-left: 10em;
   /* This has to be the same width as the button. IE has two different value so fix this on one */
   /* margin-right: 120px; */
}

/* Style used for DIV or SPAN with read only text, which is stretched to the whole 
   size of the dialog row. If Button follows the controlm set the margin-right
   as demonstrated in this style */
.clsTextStrechControlNoWrap {
   position: relative;
   clear: none;
   width: 100%;
   white-space: nowrap;
}

/* Style used for DIV or SPAN with read only text, which us stretched to the whole 
   size of the dialog row. If Button follows the control set the margin-right
   as demonstrated in this style */
.clsTextNoWrap {
   position: relative;
   top: 5px;
   width: auto;
   float: left;
   white-space: nowrap;
}

/* Style used for SPAN/DIV with controls to select date or time which are stretched to the whole 
   size of the dialog row. The margin-right makes space for the button */
.clsDateStrechControl {
   position: relative;
   clear: none;
   /* It seems like this is bug in IE and combination of these two will
      make the edit control stretch to the whole content area */
   width: 100%;
   /* Seems like this makes the IE control to stretch to the whole width but the button */
   margin-right: 16px;
}
div > .clsDateStrechControl {
   width: auto;
   /* This has to be the same as the width of the label */
   /* This cannot be in IE section because it makes sit shift right */
   margin-left: 10em;
   /* This has to be wider than the button. IE has two different value so fix this on one */
   margin-right: 30px;
}

/* Style used for SPAN/DIV with controls to select file to upload which is stretched to the whole 
   size of the dialog row. */
.clsUploadStrechControl {
   width: 90%;
}
div > .clsUploadStrechControl {
   width: auto;
}

/* Style used for A HREF with controls to change color of the link */
a.clsColorPickerControl {
   border: 1px solid #000000; 
   height: 12px; 
   font-size: 12px;
   font-weight: bold;
   text-decoration: none;
   color: Black;
   background-color: White;
}
div > a.clsColorPickerControl {
   width: auto;
}

/* Style used for comboboxes which are followed by other controls*/
.clsComboControl {
   position: relative;
   clear: none;
}
div > .clsComboControl {
   width: auto;
   /* This has to be the same as the width of the label */
   /* This cannot be used because the combo will shift all the way to right */
   /* margin-left: 10.5em;*/
}
span > .clsComboControl {
   width: auto;
   /* This has to be the same as the width of the label */
   /* This cannot be used because the combo will shift all the way to right */
   /* margin-left: 10.5em; */
}

/* Style used for DIV and floating it to the left */
.clsFloatLeft {
	float: left;
	white-space: nowrap;
}

/* Style used for DIV and centering pragmas within the DIV */
.clsFloatLeft p {
    text-align: center;
}

.clsFloatLeftIdent {
	margin-left: 10px;
	float: left;
	white-space: nowrap;
}

/* Style used for DIV with controls which are stretched and aligned to center
   the whole size of the dialog row. If Button follows the controlm set the 
   margin-right as demonstrated in this style */
.clsStrechControlCentered {
   position: relative;
   clear: none;
   /* It seems like this is bug in IE and combination of these two will
      make the edit control stretch to the whole content area */
   width: 100%;
   text-align : center;   
}
div > .clsStrechControlCentered {
   width: auto;
   /* This has to be the same as the width of the label */
   /* This cannot be in IE section because it makes sit shift right */
   margin-left: 10em;
   text-align : center;   
}

/* =========================== Edit control ================================ */

/* Single line INPUT element stretched throught the whole dialog row */ 
.clsStretchSingleLineEdit {
   width: 100%;
}
div > .clsStretchSingleLineEdit {
   /* In Mozilla and Firefox two subsequent edit controls merge together 
      so make space between them */
   margin-top: 2px;
}

/* Single line INPUT element stretched throught the whole dialog row */ 
.clsSpaceStretchSingleLineEdit {
   width: 95%;
}

/* Single line INPUT element not stretched throught the whole 
   dialog row even though the dialog row is stretched */ 
.clsNoStretchSingleLineEdit {
}

/* Single line INPUT element automatically stretched throught the whole dialog row */ 
.clsAutoSingleLineEdit {
   width: auto;
}

/* Single line INPUT element automatically stretched throught the whole dialog row */ 
.clsSingleLineEditNoWrap {
   width: 100%;
}

/* Single line INPUT element automatically stretched throught the whole dialog row */ 
.clsEndRowEdit {
   width: 5%;
   float: right;
   text-align: right;
   margin-right: 10px;
   vertical-align: top;     
}

/* Multi line TEXTAREA element stretched throught the whole dialog row */ 
.clsStretchMultiLineEdit {
   width: 100%;
}

/* Multi line TEXTAREA element stretched throught the whole dialog row */ 
.clsSpaceStretchMultiLineEdit {
   width: 95%;
}

.clsStaticMultiLineText {
   position: relative;
   width: 50%;
   white-space: normal;
   padding-top: 5px;

   float: left;
}
div > .clsStaticMultiLineText {
   width: 70%;
}

/* =================== Buttons after control container ===================== */

/* Style for SPAN with button which is displayed after the edit control */
.clsControlButton {
   vertical-align: top;
}
div > .clsControlButton {
   position: relative;  
   top: 8px;
   vertical-align: top;                              
   padding-top: 8px;
}

/* Button behind the control which stretched to the whole row */
.clsStrechButton {
   /* Id I want to keep control before button this is the only way to do 
      it. If I use float, the button would have to be in front control
      which messes up the tab order */
   position: absolute;
   top: 0px;
   right: 0px;
   text-align: right;
}

/* Button containing image.
   IE has undesired padding around text, which cannot be removed. We therefore
   put image to that white space in the background. Thats why we play this
   padding game here. See also help.css */
.clsImageButton {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   background-repeat: no-repeat;
   /* This is required by Mozilla */
   vertical-align: 50%;
}

.clsImageTextButton {
   margin-left: 0px;
   margin-right: 0px;
   padding-left: 4px;
   padding-right: 2px;
   text-align: right;
   background-repeat: no-repeat;
   background-position: 2px;
}
div > .clsImageTextButton {
   padding-left: 18px;
   padding-right: 0px;
   text-align: center;
}
span > .clsImageTextButton {
   padding-left: 18px;
   padding-right: 0px;
   text-align: center;
}

.clsImageTextButtonNone {
   display: none;
}

/* IMG html element containing only image inside of the button */
.clsButtonImage {
   vertical-align: middle;
   text-align: left;
}

/* Dialog header Maximize button */
.clsDialogHeaderButtonMaximize {
   position: relative;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   background-repeat: no-repeat;
   background-position: center center;
   background-image: url(/core/images/maximizewindowbutton.gif);
   /* This is required by Mozilla */
   vertical-align: 50%;
   width: 24px;
   height: 24px;
   bottom: 3px;
}
div > .clsDialogHeaderButtonMaximize {
   bottom: 5px;
}

/* Dialog header Restore button */
.clsDialogHeaderButtonRestore {
   position: relative;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   background-repeat: no-repeat;
   background-position: center center;
   background-image: url(/core/images/restorewindowbutton.gif);
   /* This is required by Mozilla */
   vertical-align: 50%;
   width: 24px;
   height: 24px;
   bottom: 3px;
}
div > .clsDialogHeaderButtonRestore {
   bottom: 5px;
}

/* Dialog header Close button */
.clsDialogHeaderButtonClose {
   position: relative;
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   background-repeat: no-repeat;
   background-position: center center;
   background-image: url(/core/images/closewindowbutton.gif);
   /* This is required by Mozilla */
   vertical-align: 50%;
   width: 24px;
   height: 24px;
   bottom: 3px;
}
div > .clsDialogHeaderButtonClose {
   bottom: 5px;
}

/* ============================ Button groups ============================== */

/* Style for DIV containing actions buttons for a dialog */
.clsDialogActionButtons {
   position: relative;
   clear: both;

   margin-top: 5px;
   margin-bottom: 5px;

   width: 100%;
   text-align: center;
   white-space: nowrap;
}