/** * dijit.layout.TabContainer * * To style TabContainer with rounded corners * you can use these classes: .dijitTab (left), .dijitTabContent (center), dijitTabInnerDiv (right) * For tabs aligned to top you can style a stripe div right underneath the tabs using .dijitTabStripe */ /* Classes for all types of tabs (top/bottom/left/right) */ .soria .dijitTabPaneWrapper { /* Container for tab content */ /* overflow: hidden; */ background:#fff; border:1px solid #b1badf; } .soria .dijitTab { line-height:normal; margin-right:3px; /* space between one tab and the next in top/bottom mode */ padding:0px; background: url("../images/tabContainerSprite.gif") no-repeat 0 -300px; font-size: 0.9em; font-weight: bold; color: #373941; margin-bottom: -1px; } .soria dijitTabChecked { margin-bottom: -2px; } .soria .dijitTabInnerDiv .dijitTabContent { padding:8px 10px 4px 10px; background: url("../images/tabContainerSprite.gif") repeat-x 0 -350px; } .soria .dijitTabInnerDiv { padding:0px 10px 0px 10px; background: url("../images/tabContainerSprite.gif") no-repeat; background-position: right -400px; border: none; } .soria .dijitTabHover, .soria .dijitTabCloseButtonHover { color: #243C5F; background: url("../images/tabContainerSprite.gif") no-repeat 0px -150px; } .soria .dijitTabHover .dijitTabInnerDiv, .soria .dijitTabCloseButtonHover .dijitTabInnerDiv { background: url("../images/tabContainerSprite.gif") no-repeat right -250px; border: none; } .soria .dijitTabHover .dijitTabInnerDiv .dijitTabContent, .soria .dijitTabCloseButtonHover .dijitTabInnerDiv .dijitTabContent { background: url("../images/tabContainerSprite.gif") repeat-x 0 -200px; padding:8px 10px 4px 10px; } .soria .dijitTabChecked, .soria .dijitTabCloseButtonChecked { /* the selected tab (with or without hover) */ background: url("../images/tabContainerSprite.gif") no-repeat 0px -0px; } .soria .dijitTabChecked .dijitTabInnerDiv { padding:0px 10px 0px 10px; background: url("../images/tabContainerSprite.gif") no-repeat right -100px; border: none; } .soria .dijitTabChecked .dijitTabInnerDiv .dijitTabContent { background: url("../images/tabContainerSprite.gif") repeat-x 0 -50px; padding:8px 10px 5px 10px; color: #243C5F !important; } /* top specific classes */ .soria .dijitTabLabels-top { border-left: 1px solid #b1badf; border-top: 1px solid #b1badf; border-right: 1px solid #b1badf; padding-top: 2px; padding-left: 3px; padding-right: 3px; background: #F0F4FC url("../images/tabStripe.gif") repeat-x left bottom; padding-bottom: 4px; } /* .soria .dijitAlignTop .dijitTabStripe { background: url("../images/tabStripe.gif") repeat-x left bottom; padding-left: 2px; padding-top: 0px; height: 4px; clear: both; font-size: 1px; margin-left: -3px; } */ .soria .dijitAlignLeft .dijitTab, .soria .dijitAlignRight .dijitTab { margin-right:0px; margin-bottom:5px; /* space between one tab and the next in left/right mode */ } /* make the active tab white on the side next to the content pane */ .soria .dijitAlignTop .dijitTabChecked, .soria .dijitAlignTop .dijitTabCloseButtonChecked { border-bottom-color:white; vertical-align:bottom; } .soria .dijitAlignBottom .dijitTabChecked, .soria .dijitAlignBottom .dijitTabCloseButtonChecked { border-top-color:white; /*-moz-border-radius:2px 2px 0px 0px; eliminate some border detritrus on moz */ } .soria .dijitAlignLeft .dijitTabChecked, .soria .dijitAlignLeft .dijitTabCloseButtonChecked { border-right-color:white; } .soria .dijitAlignRight .dijitTabChecked, .soria .dijitAlignRight .dijitTabCloseButtonChecked { border-left-color:white; } /* bottom specific classes */ .soria .dijitTabLabels-bottom { padding-bottom: 2px; padding-left: 3px; background-color: #f0f4fc; border-left: 1px solid #b1badf; border-bottom: 1px solid #b1badf; border-right: 1px solid #b1badf; background: #F0F4FC url("../images/tabStripeBottom.gif") repeat-x left top; padding-top: 3px; padding-right: 3px; } /* .soria .dijitAlignBottom .dijitTabStripe { background: url("../images/tabStripe.gif") repeat-x left bottom; padding-left: 2px; padding-top: 0px; height: 4px; clear: both; font-size: 1px; margin-left: -3px; } */ .soria .dijitAlignBottom .dijitTab { line-height:normal; margin-right:3px; /* space between one tab and the next in top/bottom mode */ padding:0px; background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom left; font-size: 0.9em; font-weight: bold; color: #373941; margin-bottom: 0px; margin-top: 1px; } .soria .dijitAlignBottom .dijitTabChecked { margin-bottom: 0px; margin-top: 0px !important; } .soria .dijitAlignBottom .dijitTabInnerDiv .dijitTabContent { padding:6px 10px 6px 10px; background: url("../images/tabBottomEnabledC.gif") repeat-x bottom left; } .soria .dijitAlignBottom .dijitTabInnerDiv { padding:0px 10px 0px 10px; background: url("../images/tabBottomEnabledSpriteLR.gif") no-repeat bottom right; border: none; } .soria .dijitAlignBottom .dijitTabHover, .soria .dijitAlignBottom .dijitTabCloseButtonHover { color: #243C5F; background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom left; } .soria .dijitAlignBottom .dijitTabHover .dijitTabInnerDiv, .soria .dijitAlignBottom .dijitTabCloseButtonHover .dijitTabInnerDiv { background: url("../images/tabBottomHoverSpriteLR.gif") no-repeat bottom right; border: none; } .soria .dijitAlignBottom .dijitTabHover .dijitTabInnerDiv .dijitTabContent, .soria .dijitAlignBottom .dijitTabCloseButtonHover .dijitTabInnerDiv .dijitTabContent { background: url("../images/tabBottomHoverC.gif") repeat-x bottom left; padding:6px 10px 6px 10px; } .dj_ie6 .soria .dijitAlignBottom .dijitTabHover, .dj_ie6 .soria .dijitAlignBottom .dijitTabCloseButtonHover { background-image: url("../images/tabHover.gif"); } .soria .dijitAlignBottom .dijitTabChecked, .soria .dijitAlignBottom .dijitTabCloseButtonChecked { /* the selected tab (with or without hover) */ background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom left; } .soria .dijitAlignBottom .dijitTabChecked .dijitTabInnerDiv { padding:0px 10px 0px 10px; background: url("../images/tabBottomActiveSpriteLR.gif") no-repeat bottom right; border: none; } .soria .dijitAlignBottom .dijitTabChecked .dijitTabInnerDiv .dijitTabContent { background: url("../images/tabBottomActiveC.gif") repeat-x bottom left; padding:7px 10px 6px 10px; } /* left specific classes */ .soria .dijitAlignLeft .dijitTab { margin-right: 1px !important; } .soria .dijitAlignLeft .dijitTabChecked { margin-right: 0px !important; } .soria .dijitAlignLeft .dijitTabChecked .dijitTabInnerDiv { background: url("../images/tabLeftChecked.gif") no-repeat right top !important; padding-left: 10px; border-bottom: 1px solid #8ba0bd !important; } .soria .dijitAlignLeft .dijitTabInnerDiv { background: url("../images/tabContainerSprite.gif") no-repeat right -350px; padding-left: 10px; border-bottom: 1px solid #b9bbdd; } .soria .dijitAlignLeft .dijitTabHover .dijitTabInnerDiv { background: url("../images/tabContainerSprite.gif") no-repeat right -200px; padding-left: 10px; border-bottom: 1px solid #b9bbdd; } .soria .dijitTabLabels-left-h { padding-left: 2px; padding-top: 3px; background-color: #f0f4fc; border-left: 1px solid #b1badf; border-bottom: 1px solid #b1badf; border-top: 1px solid #b1badf; background: #F0F4FC url("../images/tabStripeLeft.gif") repeat-y right top; padding-right: 3px; } .soria .dijitAlignLeft .dijitTabInnerDiv .dijitTabContent { padding:7px 10px 6px 10px !important; } /* right specific classes */ .soria .dijitTabLabels-right-h { padding-right: 2px; padding-top: 3px; background-color: #f0f4fc; border-right: 1px solid #b1badf; border-bottom: 1px solid #b1badf; border-top: 1px solid #b1badf; background: #F0F4FC url("../images/tabStripeRight.gif") repeat-y left top; padding-left: 3px; } .soria .dijitAlignRight .dijitTab { margin-left: 1px; } .soria .dijitAlignRight .dijitTabChecked { margin-left: 0px; } .soria .dijitAlignRight .dijitTabChecked { background: url("../images/tabRightChecked.gif") no-repeat left top !important; } .soria .dijitAlignRight .dijitTab { background: url("../images/tabContainerSprite.gif") no-repeat left -350px; } .soria .dijitAlignRight .dijitTabHover .dijitTab { background: url("../images/tabContainerSprite.gif") no-repeat left -200px; } .soria .dijitAlignRight .dijitTabInnerDiv .dijitTabContent { padding:7px 10px 6px 10px !important; } .soria .dijitAlignRight .dijitTabChecked .dijitTabInnerDiv { border-bottom: 1px solid #8ba0bd !important; } .soria .dijitAlignRight .dijitTabInnerDiv { border-bottom: 1px solid #b9bbdd; } .soria .dijitAlignRight .dijitTabHover .dijitTabInnerDiv { border-bottom: 1px solid #b9bbdd; } /* make space for a positioned close button */ .soria .dijitTab .dijitClosable { position: relative; padding-left: 10px !important; padding-right: 20px !important; } .soria .dijitTab img { padding: 0; margin: 0; } .soria .dijitTab .dijitClosable .closeImage { position:absolute; top: 5px; right: 5px; height: 15px; width: 15px; padding: 0; margin: 0; background: url("../images/spriteRoundedIconsSmallBl.png") no-repeat -60px top; } .dj_ie6 .dijitTab .dijitClosable .closeImage { background:url("../images/spriteRoundedIconsSmallBl.gif") no-repeat -60px top; } .dj_ie6 .soria .dijitTabCloseButton .dijitClosable .closeImage { background: url("../images/spriteRoundedIconsSmallBl.gif") no-repeat -60px top; } .soria .dijitTabHover .dijitClosable .closeImage { background: url("../images/spriteRoundedIconsSmallBl.png") no-repeat -60px -15px !important; } .dj_ie6 .soria .dijitTabHover .dijitClosable .closeImage { background: url("../images/spriteRoundedIconsSmallBl.gif") no-repeat -60px -15px !important; } /* correct for IE6. We cant force hasLayout as that blows out the shrink wrapped tabs ..so we shim in the closeImage position properties instead */ .dj_ie6 .soria .dijitAlignLeft .dijitTab .dijitClosable .closeImage { left:-20px; } .soria .dijitAlignBottom .dijitTab .dijitClosable .closeImage { top: auto; bottom: 7px; right: 3px; } .soria .dijitAlignLeft .dijitTab .dijitClosable .closeImage { top: 7px; left: 3px; }