1@charset "UTF-8"; /* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */ /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ /* Horizontal Tabbed Panels * * The default style for a TabbedPanels widget places all tab buttons * (left aligned) above the content panel. */ /* This is the selector for the main TabbedPanels container. For our * default style, this container does not contribute anything visually, * but it is floated left to make sure that any floating or clearing done * with any of its child elements are contained completely within the * TabbedPanels container, to minimize any impact or undesireable * interaction with other floated elements on the page that may be used * for layout. * * If you want to constrain the width of the TabbedPanels widget, set a * width on the TabbedPanels container. By default, the TabbedPanels widget * expands horizontally to fill up available space. * * The name of the class ("TabbedPanels") used in this selector is not * necessary to make the widget function. You can use any class name you * want to style the TabbedPanels container. */ .TabbedPanels { width: 840px; margin: 0px; padding: 0px; font-size: 14px; } /* This is the selector for the TabGroup. The TabGroup container houses * all of the tab buttons for each tabbed panel in the widget. This container * does not contribute anything visually to the look of the widget for our * default style. * * The name of the class ("TabbedPanelsTabGroup") used in this selector is not * necessary to make the widget function. You can use any class name you * want to style the TabGroup container. */ .TabbedPanelsTabGroup { } /* This is the selector for the TabbedPanelsTab. This container houses * the title for the panel. This is also the tab "button" that the user clicks * on to activate the corresponding content panel so that it appears on top * of the other tabbed panels contained in the widget. * * For our default style, each tab is positioned relatively 1 pixel down from * where it wold normally render. This allows each tab to overlap the content * panel that renders below it. Each tab is rendered with a 1 pixel bottom * border that has a color that matches the top border of the current content * panel. This gives the appearance that the tab is being drawn behind the * content panel. * * The name of the class ("TabbedPanelsTab") used in this selector is not * necessary to make the widget function. You can use any class name you want * to style this tab container. */ .TabbedPanelsTab { position: relative; color: #FFFFFF; top: 0px; float: left; list-style: none; -moz-user-select: none; -khtml-user-select: none; cursor: pointer; font-size: 14px; background-image: url(../images/tabbedpanels_tab.png); background-repeat: no-repeat; padding: 10px 15px 10px 16px; border-left: 2px solid #a8c6e1; height: inherit; } /* This selector is an example of how to change the appearnce of a tab button * container as the mouse enters it. The class "TabbedPanelsTabHover" is * programatically added and removed from the tab element as the mouse enters * and exits the container. */ .TabbedPanelsTabHover { } /* This selector is an example of how to change the appearance of a tab button * container after the user has clicked on it to activate a content panel. * The class "TabbedPanelsTabSelected" is programatically added and removed * from the tab element as the user clicks on the tab button containers in * the widget. * * As mentioned above, for our default style, tab buttons are positioned * 1 pixel down from where it would normally render. When the tab button is * selected, we change its bottom border to match the background color of the * content panel so that it looks like the tab is part of the content panel. */ .TabbedPanelsTabSelected { color: #000000; border-bottom-style: none; background-image: url(../images/tabbedpanels_tab_over.png); } /* This selector is an example of how to make a link inside of a tab button * look like normal text. Users may want to use links inside of a tab button * so that when it gets focus, the text *inside* the tab button gets a focus * ring around it, instead of the focus ring around the entire tab. */ .TabbedPanelsTab a { color: #888888; text-decoration: none; background-repeat: no-repeat; } /* This is the selector for the ContentGroup. The ContentGroup container houses * all of the content panels for each tabbed panel in the widget. For our * default style, this container provides the background color and borders that * surround the content. * * The name of the class ("TabbedPanelsContentGroup") used in this selector is * not necessary to make the widget function. You can use any class name you * want to style the ContentGroup container. */ .TabbedPanelsContentGroup { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; clear: both; background-repeat: no-repeat; } /* This is the selector for the Content panel. The Content panel holds the * content for a single tabbed panel. For our default style, this container * provides some padding, so that the content is not pushed up against the * widget borders. * * The name of the class ("TabbedPanelsContent") used in this selector is * not necessary to make the widget function. You can use any class name you * want to style the Content container. */ .TabbedPanelsContent { margin: 0px 2px 0px 0px; padding: 5px 0px 0px 5px; height: 300px; overflow: auto; background-repeat: no-repeat; } /* This selector is an example of how to change the appearnce of the currently * active container panel. The class "TabbedPanelsContentVisible" is * programatically added and removed from the content element as the panel * is activated/deactivated. */ .TabbedPanelsContentVisible { } /* Vertical Tabbed Panels * * The following rules override some of the default rules above so that the * TabbedPanels widget renders with its tab buttons along the left side of * the currently active content panel. * * With the rules defined below, the only change that will have to be made * to switch a horizontal tabbed panels widget to a vertical tabbed panels * widget, is to use the "VTabbedPanels" class on the top-level widget * container element, instead of "TabbedPanels". */ /* This selector floats the TabGroup so that the tab buttons it contains * render to the left of the active content panel. A border is drawn around * the group container to make it look like a list container. */ .VTabbedPanels .TabbedPanelsTabGroup { float: left; font-size: 10px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 150px; position: relative; left:0px; background-repeat: no-repeat; } /* This selector disables the float property that is placed on each tab button * by the default TabbedPanelsTab selector rule above. It also draws a bottom * border for the tab. The tab button will get its left and right border from * the TabGroup, and its top border from the TabGroup or tab button above it. */ .VTabbedPanels .TabbedPanelsTab { float: none; margin: 0px; border-left-style: none; top: 0px; background-image: url(../images/vtabbedpanels_tab.png); background-repeat: no-repeat; background-position: 0px bottom; padding: 8px 10px 10px 20px; } /* This selector disables the float property that is placed on each tab button * by the default TabbedPanelsTab selector rule above. It also draws a bottom * border for the tab. The tab button will get its left and right border from * the TabGroup, and its top border from the TabGroup or tab button above it. */ .VTabbedPanels .TabbedPanelsTabSelected { background-image: url(../images/vtabbedpanels_tab_over.png); background-repeat: no-repeat; } /* This selector floats the content panels for the widget so that they * render to the right of the tabbed buttons. */ .VTabbedPanels .TabbedPanelsContentGroup { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; clear: none; float: left; padding: 0px; width: 690px; background-image: url(../images/vtabbedpanels_content_vertical.png); background-position: 0px 0px; } /* Vertical settings */ .VTabbedPanels { width: 840px; margin: 0px; padding: 0px; } .VTabbedPanels .TabbedPanelsTabGroup { margin: 0px; padding: 0px; } .VTabbedPanels .TabbedPanelsTabHover { background-image: url(../images/vtabbedpanels_tab_over.png); } .VTabbedPanels .lastTab.TabbedPanelsTabHover { background-image: url(../images/vtabbedpanels_tab_last_over.png); } .VTabbedPanels .TabbedPanelsContent { margin: 0px 2px 0px 0px; padding: 0px 0px 0px 0px; height: 300px; overflow: scroll; } .VTabbedPanels .TabbedPanelsContent .content { color: #FFFFFF; font-size: 14px; margin: 0px 0px 0px 0px; padding: 15px 20px 1px 20px; } .VTabbedPanels .firstTab { } .VTabbedPanels .middleTab2 { } .VTabbedPanels .middleTab3 { } .VTabbedPanels .middleTab4 { } .VTabbedPanels .middleTab5 { } .VTabbedPanels .middleTab6 { } .VTabbedPanels .middleTab7 { } .VTabbedPanels .middleTab8 { } .VTabbedPanels .lastTab { background-image: url(../images/vtabbedpanels_tab_last.png); background-position: 0px bottom; padding-bottom: 15px; } .VTabbedPanels .TabbedPanelsTabSelected { } .VTabbedPanels .lastTab.TabbedPanelsTabSelected { background-image: url(../images/vtabbedpanels_tab_last_over.png); } .VTabbedPanels .TabbedPanelsTabSelected.TabbedPanelsTabHover { background-image: url(../images/vtabbedpanels_tab_over.png); } .VTabbedPanels .lastTab.TabbedPanelsTabSelected.TabbedPanelsTabHover { background-image: url(../images/vtabbedpanels_tab_last_over.png); } .VTabbedPanels .tabbedpanels_bottom { margin: 0px 0px 0px 150px; height: 82px; background-image: url(../images/vtabbedpanels_content_vertical.png); background-position: 0px bottom; clear: both; } /* Horizontal settings */ .TabbedPanels .TabbedPanelsTabGroup { width: 900px; margin: 0px; padding: 0px; } .TabbedPanels .firstTab { background-position: left 0px; padding-left: 20px; border-left-style: none;} .TabbedPanels .middleTab2 { background-position: -20px 0px; } .TabbedPanels .middleTab3 { background-position: -20px 0px; } .TabbedPanels .middleTab4 { background-position: -20px 0px; } .TabbedPanels .middleTab5 { background-position: -20px 0px; } .TabbedPanels .middleTab6 { background-position: -20px 0px; } .TabbedPanels .middleTab7 { background-position: -20px 0px; } .TabbedPanels .middleTab8 { background-position: -20px 0px; } .TabbedPanels .lastTab { background-position: right 0px; padding-right: 18px; } .TabbedPanels .TabbedPanelsContentGroup { background-image: url(../images/tabbedpanels_horizontal.png); background-position: 0px -20px; } .TabbedPanels .TabbedPanelsTabHover { background-image: url(../images/tabbedpanels_tab_over.png); } /* Custom rules by Codify Design Studio */ .tabbedpanels_top.TabbedPanels { display: none; } .tabbedpanels_top.VTabbedPanels { display: block; width: 877px; height: 24px; margin: 0px 0px 0px 0px; background-image: url(../images/vtabbedpanels_top_vertical.png); background-position: 0px top; clear: both; } .TabbedPanelsContent h2 { font-size: 20px; margin-top: 0px; } .TabbedPanelsContent p { margin-top: 0px; line-height: 17px; } .TabbedPanels .TabbedPanelsContent .content { color: #FFFFFF; margin: 0px 0px 0px 0px; padding: 20px 30px 1px 18px; } .TabbedPanels .TabbedPanelsContent p { margin-top: 0px; } .TabbedPanels .tabbedpanels_bottom { background-image: url("../images/tabbedpanels_horizontal.png"); background-position: 0 -20px; height: 1px; width: 877px; }