Файл: 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;
}