dijit/themes/claro/TitlePane.css

Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u

/* TitlePane and Fieldset
 * 
 * Styling TitlePane means styling the TitlePane title and its content container  (dijitTitlePane)
 * 
 * TitlePane title:
 * 1. TitlePane title (default styling): 
 * 		.dijitTitlePaneTitle - TitlePane's title div style: background-color, border
 *
 * 2. hovered TitlePane title (ie, mouse hover on a title bar)
 * 		.dijitTitlePaneTitleHover - styles when mouse hover on the title div
 * 
 * 3. active TitlePane title (ie, mouse down on a title bar)
 * 		.dijitTitlePaneTitleActive - styles when mouse down on the title div
 * 
 * 
 * TitlePane Content Container:
 * 1. outer/inner container: 
 * 		.dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div
 */
.claro .dijitTitlePaneTitle {
  background-color: #efefef;
  background-image: url("images/standardGradient.png");
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  _background-image: none;
  border: 1px solid #b5bcc7;
  padding: 0 7px 3px 7px;
  min-height: 17px;
  color: #494949;
}
.claro .dijitFieldset {
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.claro .dijitTitlePaneTitleOpen,
.claro .dijitTitlePaneTitleFixedOpen {
  background-color: #cfe5fa;
  color: #000000;
}
.claro .dijitTitlePaneTitleHover {
  background-color: #abd6ff;
  border-color: #759dc0;
}
.claro .dijitTitlePaneTitleActive {
  background-color: #7dbdfa;
  border-color: #759dc0;
  background-image: url("images/activeGradient.png");
  background-repeat: repeat-x;
  background-image: -moz-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
  background-image: -webkit-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
  background-image: -o-linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
  background-image: linear-gradient(rgba(190, 190, 190, 0.98) 0px, rgba(255, 255, 255, 0.65) 3px, rgba(255, 255, 255, 0) 100%);
  _background-image: none;
}
.claro .dijitTitlePaneTitleFocus {
  margin-top: 3px;
  padding-bottom: 2px;
}
.claro .dijitTitlePane .dijitArrowNode,
.claro .dijitFieldset .dijitArrowNode {
  background-image: url("images/spriteArrows.png");
  background-repeat: no-repeat;
  height: 8px;
  width: 7px;
}
.claro .dijitTitlePaneTitleOpen .dijitArrowNode,
.claro .dijitFieldsetTitleOpen .dijitArrowNode {
  background-position: 0 0;
}
.claro .dijitTitlePaneTitleClosed .dijitArrowNode,
.claro .dijitFieldsetTitleClosed .dijitArrowNode {
  background-position: -14px 0;
}
.claro .dijitTitlePaneContentOuter {
  background: #ffffff;
  border: 1px solid #b5bcc7;
  border-top: none;
}
.claro .dijitTitlePaneContentInner {
  padding: 10px;
}
.claro .dijitFieldsetContentInner {
  padding: 4px;
}
.claro .dijitTitlePaneTextNode,
.claro .dijitFieldsetLegendNode {
  margin-left: 4px;
  margin-right: 4px;
  vertical-align: text-top;
}