home *** CD-ROM | disk | FTP | other *** search
/ mcgregor.k12.mn.us / www.mcgregor.k12.mn.us.tar / www.mcgregor.k12.mn.us / SpryAssets / SpryCollapsiblePanel.css < prev    next >
Cascading Style Sheet File  |  2010-09-08  |  4KB  |  103 lines
  1. @charset "UTF-8";
  2.  
  3. /* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */
  4.  
  5. /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
  6.  
  7. /* This is the selector for the main CollapsiblePanel container. For our
  8.  * default style, the CollapsiblePanel is responsible for drawing the borders
  9.  * around the widget.
  10.  *
  11.  * If you want to constrain the width of the CollapsiblePanel widget, set a width on
  12.  * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
  13.  * up available space.
  14.  *
  15.  * The name of the class ("CollapsiblePanel") used in this selector is not necessary
  16.  * to make the widget function. You can use any class name you want to style the
  17.  * CollapsiblePanel container.
  18.  */
  19. .CollapsiblePanel {
  20.     margin: 0px;
  21.     padding: 0px;
  22.     border-left: solid 1px #CCC;
  23.     border-right: solid 1px #999;
  24.     border-top: solid 1px #999;
  25.     border-bottom: solid 1px #CCC;
  26. }
  27.  
  28. /* This is the selector for the CollapsiblePanelTab. This container houses
  29.  * the title for the panel. This is also the container that the user clicks
  30.  * on to open or close the panel.
  31.  *
  32.  * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
  33.  * to make the widget function. You can use any class name you want to style an
  34.  * CollapsiblePanel panel tab container.
  35.  */
  36. .CollapsiblePanelTab {
  37.     font: bold 0.7em sans-serif;
  38.     background-color: #DDD;
  39.     border-bottom: solid 1px #CCC;
  40.     margin: 0px;
  41.     padding: 2px;
  42.     cursor: pointer;
  43.     -moz-user-select: none;
  44.     -khtml-user-select: none;
  45. }
  46.  
  47. /* This is the selector for a CollapsiblePanel's Content area. It's important to note that
  48.  * you should never put any padding on the content area element if you plan to
  49.  * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
  50.  * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
  51.  *
  52.  * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
  53.  * to make the widget function. You can use any class name you want to style a
  54.  * CollapsiblePanel content container.
  55.  */
  56. .CollapsiblePanelContent {
  57.     margin: 0px;
  58.     padding: 0px;
  59. }
  60.  
  61. /* An anchor tag can be used inside of a CollapsiblePanelTab so that the
  62.  * keyboard focus ring appears *inside* the tab instead of around the tab.
  63.  * This is an example of how to make the text within the anchor tag look
  64.  * like non-anchor (normal) text.
  65.  */
  66. .CollapsiblePanelTab a {
  67.     color: black;
  68.     text-decoration: none;
  69. }
  70.  
  71. /* This is an example of how to change the appearance of the panel tab that is
  72.  * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
  73.  * from panels as the user clicks on the tabs within the CollapsiblePanel.
  74.  */
  75. .CollapsiblePanelOpen .CollapsiblePanelTab {
  76.     background-color: #EEE;
  77. }
  78.  
  79. /* This is an example of how to change the appearance of the panel tab when the
  80.  * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
  81.  * whenever the CollapsiblePanel is closed.
  82.  */
  83.  
  84. .CollapsiblePanelClosed .CollapsiblePanelTab {
  85.  /* background-color: #EFEFEF */
  86. }
  87.  
  88. /* This is an example of how to change the appearance of the panel tab as the
  89.  * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
  90.  * and removed from panel tab containers as the mouse enters and exits the tab container.
  91.  */
  92. .CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {
  93.     background-color: #CCC;
  94. }
  95.  
  96. /* This is an example of how to change the appearance of all the panel tabs when the
  97.  * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
  98.  * whenever the CollapsiblePanel gains or loses keyboard focus.
  99.  */
  100. .CollapsiblePanelFocused .CollapsiblePanelTab {
  101.     background-color: #3399FF;
  102. }
  103.