home *** CD-ROM | disk | FTP | other *** search
/ mcgregor.k12.mn.us / www.mcgregor.k12.mn.us.tar / www.mcgregor.k12.mn.us / SpryAssets / SpryTabbedPanels.css < prev    next >
Cascading Style Sheet File  |  2010-09-08  |  8KB  |  221 lines
  1. @charset "UTF-8";
  2.  
  3. /* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
  4.  
  5. /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
  6.  
  7. /* Horizontal Tabbed Panels
  8.  *
  9.  * The default style for a TabbedPanels widget places all tab buttons
  10.  * (left aligned) above the content panel.
  11.  */
  12.  
  13. /* This is the selector for the main TabbedPanels container. For our
  14.  * default style, this container does not contribute anything visually,
  15.  * but it is floated left to make sure that any floating or clearing done
  16.  * with any of its child elements are contained completely within the
  17.  * TabbedPanels container, to minimize any impact or undesireable
  18.  * interaction with other floated elements on the page that may be used
  19.  * for layout.
  20.  *
  21.  * If you want to constrain the width of the TabbedPanels widget, set a
  22.  * width on the TabbedPanels container. By default, the TabbedPanels widget
  23.  * expands horizontally to fill up available space.
  24.  *
  25.  * The name of the class ("TabbedPanels") used in this selector is not
  26.  * necessary to make the widget function. You can use any class name you
  27.  * want to style the TabbedPanels container.
  28.  */
  29. .TabbedPanels {
  30.     margin: 0px;
  31.     padding: 0px;
  32.     float: left;
  33.     clear: none;
  34.     width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
  35. }
  36.  
  37. /* This is the selector for the TabGroup. The TabGroup container houses
  38.  * all of the tab buttons for each tabbed panel in the widget. This container
  39.  * does not contribute anything visually to the look of the widget for our
  40.  * default style.
  41.  *
  42.  * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
  43.  * necessary to make the widget function. You can use any class name you
  44.  * want to style the TabGroup container.
  45.  */
  46. .TabbedPanelsTabGroup {
  47.     margin: 0px;
  48.     padding: 0px;
  49. }
  50.  
  51. /* This is the selector for the TabbedPanelsTab. This container houses
  52.  * the title for the panel. This is also the tab "button" that the user clicks
  53.  * on to activate the corresponding content panel so that it appears on top
  54.  * of the other tabbed panels contained in the widget.
  55.  *
  56.  * For our default style, each tab is positioned relatively 1 pixel down from
  57.  * where it wold normally render. This allows each tab to overlap the content
  58.  * panel that renders below it. Each tab is rendered with a 1 pixel bottom
  59.  * border that has a color that matches the top border of the current content
  60.  * panel. This gives the appearance that the tab is being drawn behind the
  61.  * content panel.
  62.  *
  63.  * The name of the class ("TabbedPanelsTab") used in this selector is not
  64.  * necessary to make the widget function. You can use any class name you want
  65.  * to style this tab container.
  66.  */
  67. .TabbedPanelsTab {
  68.     position: relative;
  69.     top: 1px;
  70.     float: left;
  71.     padding: 4px 10px;
  72.     margin: 0px 1px 0px 0px;
  73.     font: bold 0.7em sans-serif;
  74.     background-color: #DDD;
  75.     list-style: none;
  76.     border-left: solid 1px #CCC;
  77.     border-bottom: solid 1px #999;
  78.     border-top: solid 1px #999;
  79.     border-right: solid 1px #999;
  80.     -moz-user-select: none;
  81.     -khtml-user-select: none;
  82.     cursor: pointer;
  83. }
  84.  
  85. /* This selector is an example of how to change the appearnce of a tab button
  86.  * container as the mouse enters it. The class "TabbedPanelsTabHover" is
  87.  * programatically added and removed from the tab element as the mouse enters
  88.  * and exits the container.
  89.  */
  90. .TabbedPanelsTabHover {
  91.     background-color: #CCC;
  92. }
  93.  
  94. /* This selector is an example of how to change the appearance of a tab button
  95.  * container after the user has clicked on it to activate a content panel.
  96.  * The class "TabbedPanelsTabSelected" is programatically added and removed
  97.  * from the tab element as the user clicks on the tab button containers in
  98.  * the widget.
  99.  *
  100.  * As mentioned above, for our default style, tab buttons are positioned
  101.  * 1 pixel down from where it would normally render. When the tab button is
  102.  * selected, we change its bottom border to match the background color of the
  103.  * content panel so that it looks like the tab is part of the content panel.
  104.  */
  105. .TabbedPanelsTabSelected {
  106.     background-color: #EEE;
  107.     border-bottom: 1px solid #EEE;
  108. }
  109.  
  110. /* This selector is an example of how to make a link inside of a tab button
  111.  * look like normal text. Users may want to use links inside of a tab button
  112.  * so that when it gets focus, the text *inside* the tab button gets a focus
  113.  * ring around it, instead of the focus ring around the entire tab.
  114.  */
  115. .TabbedPanelsTab a {
  116.     color: black;
  117.     text-decoration: none;
  118. }
  119.  
  120. /* This is the selector for the ContentGroup. The ContentGroup container houses
  121.  * all of the content panels for each tabbed panel in the widget. For our
  122.  * default style, this container provides the background color and borders that
  123.  * surround the content.
  124.  *
  125.  * The name of the class ("TabbedPanelsContentGroup") used in this selector is
  126.  * not necessary to make the widget function. You can use any class name you
  127.  * want to style the ContentGroup container.
  128.  */
  129. .TabbedPanelsContentGroup {
  130.     clear: both;
  131.     border-left: solid 1px #CCC;
  132.     border-bottom: solid 1px #CCC;
  133.     border-top: solid 1px #999;
  134.     border-right: solid 1px #999;
  135.     background-color: #EEE;
  136. }
  137.  
  138. /* This is the selector for the Content panel. The Content panel holds the
  139.  * content for a single tabbed panel. For our default style, this container
  140.  * provides some padding, so that the content is not pushed up against the
  141.  * widget borders.
  142.  *
  143.  * The name of the class ("TabbedPanelsContent") used in this selector is
  144.  * not necessary to make the widget function. You can use any class name you
  145.  * want to style the Content container.
  146.  */
  147. .TabbedPanelsContent {
  148.     padding: 4px;
  149. }
  150.  
  151. /* This selector is an example of how to change the appearnce of the currently
  152.  * active container panel. The class "TabbedPanelsContentVisible" is
  153.  * programatically added and removed from the content element as the panel
  154.  * is activated/deactivated.
  155.  */
  156. .TabbedPanelsContentVisible {
  157. }
  158.  
  159. /* Vertical Tabbed Panels
  160.  *
  161.  * The following rules override some of the default rules above so that the
  162.  * TabbedPanels widget renders with its tab buttons along the left side of
  163.  * the currently active content panel.
  164.  *
  165.  * With the rules defined below, the only change that will have to be made
  166.  * to switch a horizontal tabbed panels widget to a vertical tabbed panels
  167.  * widget, is to use the "VTabbedPanels" class on the top-level widget
  168.  * container element, instead of "TabbedPanels".
  169.  */
  170.  
  171. /* This selector floats the TabGroup so that the tab buttons it contains
  172.  * render to the left of the active content panel. A border is drawn around
  173.  * the group container to make it look like a list container.
  174.  */
  175. .VTabbedPanels .TabbedPanelsTabGroup {
  176.     float: left;
  177.     width: 10em;
  178.     height: 20em;
  179.     background-color: #EEE;
  180.     position: relative;
  181.     border-top: solid 1px #999;
  182.     border-right: solid 1px #999;
  183.     border-left: solid 1px #CCC;
  184.     border-bottom: solid 1px #CCC;
  185. }
  186.  
  187. /* This selector disables the float property that is placed on each tab button
  188.  * by the default TabbedPanelsTab selector rule above. It also draws a bottom
  189.  * border for the tab. The tab button will get its left and right border from
  190.  * the TabGroup, and its top border from the TabGroup or tab button above it.
  191.  */
  192. .VTabbedPanels .TabbedPanelsTab {
  193.     float: none;
  194.     margin: 0px;
  195.     border-top: none;
  196.     border-left: none;
  197.     border-right: none;
  198. }
  199.  
  200. /* This selector disables the float property that is placed on each tab button
  201.  * by the default TabbedPanelsTab selector rule above. It also draws a bottom
  202.  * border for the tab. The tab button will get its left and right border from
  203.  * the TabGroup, and its top border from the TabGroup or tab button above it.
  204.  */
  205. .VTabbedPanels .TabbedPanelsTabSelected {
  206.     background-color: #EEE;
  207.     border-bottom: solid 1px #999;
  208. }
  209.  
  210. /* This selector floats the content panels for the widget so that they
  211.  * render to the right of the tabbed buttons.
  212.  */
  213. .VTabbedPanels .TabbedPanelsContentGroup {
  214.     clear: none;
  215.     float: left;
  216.     padding: 0px;
  217.     width: 30em;
  218.     height: 20em;
  219. }
  220.  
  221.