Dialog.css #1

/* Dialog 
 * 
 * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog
 * 
 * Dialog:
 * 1. Dialog (default styling): 
 * 		.dijitDialog - styles for dialog's bounding box
 *
 * 2. Dialog title 
 * 		.dijitDialogTitleBar - styles for the title container at the top of dialog
 * 		.dijitDialogTitle - the text container in dialog title
 * 
 * 3. Dialog content 
 * 		.dijitDialogPaneContent - main container for content area and action bar
 * 		.dijitDialogPaneContentArea - styles for content container
 * 
 * 4. Dialog action bar 
 * 		.dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content
 * 
 * 5. Dialog underlay 
 * 		.dijitDialogUnderlay - div under the dialog which used for separate dialog and page content
 * 
 * 
 * Tooltip & TooltipDialog:
 * 1. tooltip content container: 
 * 		.dijitTooltipContainer - tooltip content container
 *
 * 2. tooltip connector: 
 * 		.dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right)
 */
.claro .dijitDialog {
  border: 1px solid #769dc0;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.claro .dijitDialogPaneContent {
  background: #ffffff repeat-x top left;
  border-top: 1px solid #769dc0;
  padding: 10px 8px;
  position: relative;
}
.claro .dijitDialogPaneContentArea {
  /* trick to get action bar (gray bar at bottom with OK/cancel buttons) to span from
	 * left to right but still indent dialog content
	 */
  margin: -10px -8px;
  padding: 10px 8px;
}
.claro .dijitDialogPaneActionBar {
  /* gray bar at bottom of dialog with OK/Cancel buttons */

  background-color: #efefef;
  padding: 3px 5px 2px 7px;
  text-align: right;
  border-top: 1px solid #d3d3d3;
  margin: 10px -8px -10px;
}
.claro .dijitDialogPaneActionBar .dijitButton {
  float: none;
}
.claro .dijitDialogTitleBar {
  /* outer container for the titlebar of the dialog */

  border: 1px solid #ffffff;
  border-top: none;
  background-color: #abd6ff;
  background-image: url("images/titlebar.png");
  background-repeat: repeat-x;
  padding: 5px 7px 4px 7px;
}
.claro .dijitDialogTitle {
  /* typography and styling of the dialog title */

  padding: 0 1px;
  font-size: 1.091em;
}
.claro .dijitDialogCloseIcon {
  /* the default close icon for the dialog */

  background: url("images/dialogCloseIcon.png");
  background-repeat: no-repeat;
  position: absolute;
  right: 5px;
  height: 15px;
  width: 21px;
}
.dj_ie6 .claro .dijitDialogCloseIcon {
  background-image: url("images/dialogCloseIcon8bit.png");
}
.claro .dijitDialogCloseIconHover {
  background-position: -21px;
}
.claro .dijitDialogCloseIconActive {
  background-position: -42px;
}
/* Tooltip and TooltipDialog */
.claro .dijitTooltip, .claro .dijitTooltipDialog {
  /* the outermost dom node, holding the connector and container */

  background: transparent;
  /* make the area on the sides of the arrow transparent */

}
.dijitTooltipBelow {
  /* leave room for arrow above content */

  padding-top: 13px;
  padding-left: 3px;
  padding-right: 3px;
}
.dijitTooltipAbove {
  /* leave room for arrow below content */

  padding-bottom: 13px;
  padding-left: 3px;
  padding-right: 3px;
}
.claro .dijitTooltipContainer {
  /* the part with the text */

  background-color: #ffffff;
  background-image: url("images/tooltipGradient.png");
  background-repeat: repeat-x;
  background-position: bottom;
  border: 1px solid #769dc0;
  padding: 6px 8px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  font-size: 1em;
}
.dj_ie6 .claro .dijitTooltipContainer {
  background-image: none;
}
.claro .dijitTooltipConnector {
  /* the arrow piece */

  border: 0;
  z-index: 2;
  background-image: url("images/tooltip.png");
  background-repeat: no-repeat;
  width: 16px;
  height: 14px;
}
.dj_ie6 .claro .dijitTooltipConnector {
  background-image: url("images/tooltip8bit.png");
}
.claro .dijitTooltipABRight .dijitTooltipConnector {
  /* above or below tooltip, but the arrow appears on the right,
		and the right edges of target and tooltip are aligned rather than the left */

  left: auto !important;
  right: 3px;
}
.claro .dijitTooltipBelow .dijitTooltipConnector {
  /* the arrow piece for tooltips below an element */

  top: 0;
  left: 3px;
  background-position: -31px 0;
  width: 16px;
  height: 14px;
}
.claro .dijitTooltipAbove .dijitTooltipConnector {
  /* the arrow piece for tooltips above an element */

  bottom: 0;
  left: 3px;
  background-position: -15px 0;
  width: 16px;
  height: 14px;
}
.dj_ie7 .claro .dijitTooltipAbove .dijitTooltipConnector, .dj_ie6 .claro .dijitTooltipAbove .dijitTooltipConnector {
  bottom: -1px;
}
.claro .dijitTooltipLeft {
  padding-right: 14px;
}
.claro .dijitTooltipLeft .dijitTooltipConnector {
  /* the arrow piece for tooltips to the left of an element, bottom borders aligned */

  right: 0;
  background-position: 0 0;
  width: 16px;
  height: 14px;
}
.claro .dijitTooltipRight {
  padding-left: 14px;
}
.claro .dijitTooltipRight .dijitTooltipConnector {
  /* the arrow piece for tooltips to the right of an element, bottom borders aligned */

  left: 0;
  background-position: -48px 0;
  width: 16px;
  height: 14px;
}
.claro .dijitDialogUnderlay {
  background: #ffffff;
}