Вход Регистрация
Файл: gamele.ru/js/SpryAssets/SpryTabbedPanels.css
Строк: 412
@charset "UTF-8"; /* SpryTabbedPanels.css - Revision: Spry
Preview Release 1.4 */ /* 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 { margin: 0px; padding:
0px; float: left; clear: none; width: 100%; /* IE Hack to force proper
layout when preceded by a paragraph. (hasLayout Bug)*/ } /* 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 { margin: 0px; padding: 0px; } /* 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; top: 1px; float:
left; padding: 4px 10px; margin: 0px 1px 0px 0px; font: bold 0.7em
sans-serif; background-color: #DDD; list-style: none; border-left: solid
1px #B9A05C; border-bottom: solid 1px #B9A05C; border-top: solid 1px
#B9A05C; border-right: solid 1px #B9A05C; -moz-user-select:
none; -khtml-user-select: none; cursor: pointer; } /* 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 { background-color:
#FCFAF3; } /* 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 { background-color: #FCFAF3; border-bottom:
1px solid #FCFAF3; } /* 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:
black; text-decoration: none; } /* 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 { clear: both; border-left: solid 1px
#B9A05C; border-bottom: solid 1px #B9A05C; border-top: solid 1px
#B9A05C; border-right: solid 1px #B9A05C; background-color:
#FCFAF3; } /* 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 { padding:
4px; } /* 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; width: 10em; height:
20em; background-color: #FCFAF3; position: relative; border-top: solid
1px #B9A05C; border-right: solid 1px #B9A05C; border-left: solid 1px
#B9A05C; border-bottom: solid 1px #B9A05C; } /* 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-top: none; border-left: none; border-right: none; } /* 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-color:
#FCFAF3; border-bottom: solid 1px #B9A05C; } /* This selector floats the
content panels for the widget so that they * render to the right of the
tabbed buttons. */ .VTabbedPanels .TabbedPanelsContentGroup { clear:
none; float: left; padding: 0px; width: 30em; height: 20em; }
Онлайн: 2
Реклама