the sharepoint experience

SharePoint 2010 CSS Reference Chart



Thanks for visiting!
I hope you find this chart useful. As always, it is a work in progress!
Find me on Twitter, Facebook, Google+ or send me a note.
- Heather

See also: SharePoint 2007 CSS Reference Chart

The following CSS Reference Chart highlights the major styles used in SharePoint Foundation 2010 and SharePoint Server 2010. CSS styles are grouped by area of the page and include the class/ID value, an explanation of how it is used in SharePoint and other related information including a screenshot where appropriate. Code (and file location) for the style statement is included.

  1. Don't learn from a slide deck.
    Learn from Experience. Upcoming training:

  2. SharePoint Branding Experience

    Taught by Heather Solomon
    Online: June 11-13 » More «

  3. the sharepoint experience

How it Works

This chart was built off of v4.master in SharePoint 2010.

Tips

General Purpose
.v4master

Applied to BODY; forces the page size to the full width and height of the browser and hides the scroll bar for most browsers ("scroll" attribute on "body" handles this for some versions of IE); used in many descendant selectors.

Modal dialog window auto size generation depends on these properties (height and width set to 100% and overflow set to hidden) to properly display modal dialog windows without extra scrollbars.

Aids in docking the Ribbon at the top of the web page (Ribbon won't scroll with page).

Width and height functionality can be duplicated in custom master pages by the including the height, width and overflow properties (see source code) in BODY properties of the custom master page. Note that any descendent selectors dependent on "v4master" will not work if this method is used.

Used in several OOTB SharePoint master pages (v4, applicationv4, admin, mwsdefaultv4, mysite).

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

body.v4master{
height:100%;
width:100%;
overflow:hidden;
}
.s4-app

Sets the top margin for the element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-app{
margin-top:3px;
}
.s4-die

Hides the element.

Used in several locations to hide elements from view; sometimes unnecessarily added to elements wrapping hidden content placeholders. Used extensively with SharePoint:UIVersionedContent controls in master pages.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-die{
display:none;
}
.s4-lp

Sets the padding for the element. Used in assorted locations.

Assuming 'lp' stands for 'left padding'. Default usage of this style creates padding to the left of the element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-lp,.s4-lpi{
padding:2px 10px 2px 5px;
}
.s4-rp

Sets the float and padding for the element. Used in assorted locations.

Assuming 'rp' stands for 'right padding'. Default usage of this style floats the element and creates padding to the right of the element. Note that the statement does not include a width value, which is required for valid CSS. If other styles are applied to the element that includes a width, then everything is combined and it will be valid. Otherwise you will need to specify a width when using this class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-rp{
float:right;
padding:2px 10px 2px 5px;
}
.s4-pr

Sets the element to full width. Used in assorted locations.

Assuming 'pr' stands for Page Row.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-pr{
width:100%;
}
.ms-menu-a

ANCHOR element formatting used for menus, such as Welcome menu and Site Actions.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-siteactionsmenuinner .ms-menu-a,.ms-siteactionsmenuhover .ms-menu-a{
margin-right:4px;
}
.ms-welcomeMenu .ms-menu-a{
margin-right:5px;
}
.ms-SPLink

Commonly applied to parent elements that wrap an ANCHOR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-SPLink{
font-family:'Tahoma','Lucida Grande',Verdana,Arial,sans-serif;
font-size:0.8em;
/* [ReplaceColor(themeColor:"Accent3-Darker")] */
 color:#1A70B9;
}
.s4-trc-container .ms-SPLink{
display:inline;
vertical-align:middle;
}
.ms-SPLink a:link,.ms-SPLink a:visited

ANCHOR element formatting.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-SPLink a:link,.ms-SPLink a:visited{
/* [ReplaceColor(themeColor:"Accent3-Darker")] */
 color:#1A70B9;
text-decoration:none;
}
.s4-clust

Hides the element for the print view.

Style is nested in a sub grouping of print only styles.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-clust{
display:none !important;
}
.s4-notdlg

Hides the element in a dialog box window. Used in assorted locations.

Found in: LAYOUTS\STYLES\dlgframe.css (toggle code) 

.ms-dialog .s4-notdlg{
display:none !important
}
.ms-separator

Creates a space.

Found in: LAYOUTS\1033\STYLES\HELP.CSS (toggle code) 

img.ms-separator{
height:16px;
width:1px;
margin:0px 1px 0px 1px;
background:#9ac6ff;
border-bottom:1px solid #f2f8ff;
border-right:1px solid #f2f8ff;
}

Found in: LAYOUTS\1033\STYLES\FORMS.CSS (toggle code) 

.ms-separator{
color:#c4c4c4;
font-size:10pt;
}

Found in: LAYOUTS\1033\STYLES\OWSNOCR.CSS (toggle code) 

.ms-separator{
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#444444;
font-size:10pt;
}

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-separator{
color:#83b0ec;
font-size:10pt;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-separator{
/* [ReplaceColor(themeColor:"Light2",themeShade:"0.02")] */
 color:#f1f1f2;
background-repeat:repeat-x;
border:none;
padding-left:4px;
font-size:10pt;
}
.ms-rtetoolbarmenu .ms-separator{
padding-left:0px !important;
/* [ReplaceColor(themeColor:"Accent3-Medium")] */
 color:#83b0ec;
}
.ms-separator img

Controls the IMG element within an element that is assigned the 'ms-separator' class.

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-separator img{
height:16px;
width:1px;
margin:0px 1px 0px 1px;
background:#9ac6ff;
border-bottom:1px solid #f2f8ff;
border-right:1px solid #f2f8ff;
border-left: 0px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-separator img{
height:12px;
width:1px;
margin:0px 1px 0px 1px;
/* [ReplaceColor(themeColor:"Light2",themeShade:"0.02")] */
 background:#f1f1f2;
}
.noindex

Applied to elements in assorted locations. Referenced in XML files.

Workspace Container

#s4-workspace

Applied to DIV element that wraps the vast majority of the page content.

This ID is mandatory for the EMCAScript logic (docked Ribbon), modal dialog box sizing and is referenced in many JavaScript files.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

body #s4-workspace{
overflow-y:scroll;
overflow-x:auto;
position:relative;
left:0px;
}
.s4-nosetwidth

In the master page, add this class to the #s4-workspace DIV element when creating a fixed width design or includes a right/left margin for the entire web page; prevents other SharePoint code from setting widths.

Not added to the DIV element by default! This has to be added to custom master pages if needed.

#s4-bodyContainer

Applied to DIV element that wraps the vast majority of the page content; child of the 's4-workspace' DIV element.

This ID is mandatory for the EMCAScript logic (docked Ribbon), modal dialog box sizing and scripts that calculate page width.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

body #s4-bodyContainer{
min-width:760px;
}

Found in: LAYOUTS\STYLES\dlgframe.css (toggle code) 

.ms-dialog body #s4-bodyContainer{
min-width:0px !important;
}

Site Actions Menu

.ms-siteactionscontainer

Applied to DIV element that contains Site Actions.

There is no style statements provided for this class in OOTB SharePoint CSS files.

#siteactiontd

Applied to SPAN that is a child of the 'ms-siteactionscontainer' DIV element.

There is no style statements provided for this class in OOTB SharePoint CSS files.

.ms-siteactionsmenu

Applied to SPAN that is a child of the 'ms-siteactionscontainer' DIV element. Also used as a parent in descendant and child selector style statements.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-siteactionsmenu{
display:inline-block;
vertical-align:top;
font-size:8pt;
}
.ms-siteactionsmenuinner

Applied to SPAN that is a child of the 'ms-siteactionsmenu' SPAN that wraps the Site Actions menu anchor.

The 'ms-siteactionsmenuinner' class is used in a descendant selector as a child of the 'v4master' class that sets the border color and background color to transparent; if the 'v4master' class is not set on the BODY element, then a custom style statement will need to be created to duplicate this style.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-siteactionsmenuinner,.ms-siteactionsmenuhover{
border-width:1px;
border-style:solid;
margin-right:3px;
padding:3px 4px 0px 2px;
height:18px;
display:inline-block;
font-family:"Segoe UI",Tahoma,Verdana,sans-serif;
}
.ms-siteactionsmenuinner{
/* [ReplaceColor(themeColor:"Dark2")] */
 border-color:#21374C;
/* [ReplaceColor(themeColor:"Dark2")] */
 border-top-color:#394f63;
/* [RecolorImage(themeColor:"Dark2-Lighter",method:"Filling",includeRectangle{x:0,y:467,width:1,height:11}] */
 background:url("/_layouts/images/bgximg.png") repeat-x -0px -467px;
/* [ReplaceColor(themeColor:"Dark2")] */
 background-color:#21374c;
}
.v4master .ms-siteactionsmenuinner{
border-color:transparent;
background:transparent none no-repeat;
}
.ms-siteactionsmenuhover

Hover effect for SPAN that wraps the Site Actions menu anchor.

This class replaces 'ms-siteactionsmenuinner' in the code when the user hovers over the anchor.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-siteactionsmenuinner,.ms-siteactionsmenuhover{
border-width:1px;
border-style:solid;
margin-right:3px;
padding:3px 4px 0px 2px;
height:18px;
display:inline-block;
font-family:"Segoe UI",Tahoma,Verdana,sans-serif;
}
.ms-siteactionsmenuhover{
/* [ReplaceColor(themeColor:"Dark2-Lighter")] */
 border-color:#8b929a;
/* [RecolorImage(themeColor:"Dark2-Lightest",method:"Filling",includeRectangle{x:0,y:489,width:1,height:11}] */
 background:url("/_layouts/images/bgximg.png") repeat-x -0px -489px;
/* [ReplaceColor(themeColor:"Dark2",themeShade:"0.8")] */
 background-color:#21374c;
}
.ms-menu-a

Applied to ANCHOR element in the Site Actions menu.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-siteactionsmenuinner .ms-menu-a,.ms-siteactionsmenuhover .ms-menu-a{
margin-right:4px;
}

Welcome Menu

.s4-trc-container-menu

Applied to DIV element that wraps the Welcome Menu.

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

*:first-child + html[dir="rtl"] .ms-globalnav .s4-trc-container-menu{
float: left;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

*:first-child + html[dir="rtl"] .s4-trc-container-menu{
float:left;
}
.s4-trc-container-menu{
float:left;
margin:12px 3px;
}
.ms-SPLink

Applied to SPAN element that wraps the anchor, which is the user's name. Child of the 's4-trc-container-menu' DIV element. Applied in conjunction with the 'ms-SpLinkButtonInActive' and 'ms-welcomeMenu' classes.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-SPLink{
font-family:'Tahoma','Lucida Grande',Verdana,Arial,sans-serif;
font-size:0.8em;
/* [ReplaceColor(themeColor:"Accent3-Darker")] */
 color:#1A70B9;
}
.s4-trc-container .ms-SPLink{
display:inline;
vertical-align:middle;
}
.ms-SPLink a:link,.ms-SPLink a:visited

ANCHOR element formatting.

Due to more specific style statements that are provided for 'ms-welcomeMenu', only the text-decoration property from this style statement is used.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-SPLink a:link,.ms-SPLink a:visited{
/* [ReplaceColor(themeColor:"Accent3-Darker")] */
 color:#1A70B9;
text-decoration:none;
}
.ms-SpLinkButtonInActive

Applied to SPAN element that wraps the ANCHOR element, which is the user's name; child of the 's4-trc-container-menu' DIV element. Applied in conjunction with the 'ms-SPLink' and 'ms-welcomeMenu' classes.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-HoverCellInActive,.ms-SpLinkButtonInActive{
border:none;
margin:1px;
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#4c4c4c;
vertical-align:top;
background-color:transparent;
}
.ms-SpLinkButtonInActive,.ms-SpLinkButtonActive{
padding:1px 1px 1px 3px;
}
.ms-SpLinkButtonActive

Applied to SPAN element that wraps the ANCHOR element, which is the user's name; child of the 's4-trc-container-menu' DIV element. Applied in conjunction with the 'ms-SPLink' and 'ms-welcomeMenu' classes.

This class is added when the user hovers over the menu.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-HoverCellActive,.ms-SpLinkButtonActive{
/* [ReplaceColor(themeColor:"Accent5-Medium")] */
 border:#6f9dd9 1px solid;
vertical-align:top;
/* [ReplaceColor(themeColor:"Accent4")] */
 background-color:#ffbb47;
/* [RecolorImage(themeColor:"Accent6-Darker",method:"Tinting",includeRectangle{x:0,y:403,width:1,height:22}] */
 background:url("/_layouts/images/bgximg.png") repeat-x -0px -403px;
}
.ms-SpLinkButtonInActive,.ms-SpLinkButtonActive{
padding:1px 1px 1px 3px;
}
.ms-welcomeMenu.ms-SpLinkButtonActive{
/* [ReplaceColor(themeColor:"Dark2-Lighter")] */
 border-color:#8b929a;
/* [RecolorImage(themeColor:"Dark2-Lightest",includeRectangle{x:0,y:489,width:1,height:11}] */
 background:url("/_layouts/images/bgximg.png") repeat-x -0px -489px;
/* [ReplaceColor(themeColor:"Dark2",themeShade:"0.8")] */
 background-color:#21374c;
}
.ms-welcomeMenu.ms-SpLinkButtonActive a:link (Hover for Welcome Menu link)

Controls the ANCHOR element that is a child of the 'ms-SpLinkButtonActive' SPAN element.

This hover state is also affected by the '.ms-welcomeMenu a:hover' style statement.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-welcomeMenu.ms-SpLinkButtonActive a:link{
/* [ReplaceColor(themeColor:"Light1",themeTint:"0.9")] */
 color:#fff;
}
.ms-welcomeMenu

Applied to SPAN element that wraps the anchor, which is the user's name; child of the 's4-trc-container-menu' DIV element. Applied in conjunction with the 'ms-SPLink' and 'ms-SpLinkButtonInActive' classes.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-welcomeMenu{
padding:2px 5px 3px;
margin:0px 3px;
font-size:1em;
font-family:Verdana,sans-serif;
border:1px solid transparent;
display:inline-block;
}
.ms-welcomeMenu a:link (Welcome Menu Link)

Controls an ANCHOR element that is a child of 'ms-welcomeMenu' SPAN element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-welcomeMenu a:link{
/* [ReplaceColor(themeColor:"Light1",themeTint:"0.9")] */
 color:#fff;
}
.ms-welcomeMenu a:hover (Hover for Welcome Menu Link)

Hover state for a child anchor of 'ms-welcomeMenu' SPAN element.

This hover state is also affected by the '.ms-welcomeMenu.ms-SpLinkButtonActive a:link' style statement.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-welcomeMenu a:hover{
text-decoration:none !important;
}
.ms-menu-a

Applied to ANCHOR element that wraps the SPAN element that contains the text, which is the user's name; child of the 'ms-welcomeMenu' SPAN element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-welcomeMenu .ms-menu-a{
margin-right:5px;
}
.ms-viewselector-arrow

Applied to nested SPAN that wraps the menu arrow icon; child of 'ms-welcomeMenu' SPAN element. Applied in conjunction with the 's4-clust' class and inline styles.

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-viewselector-arrow{
vertical-align:middle;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-siteactionsmenu .ms-viewselector-arrow{
display:inline-block;
margin:7px 0px 1px 0px;
vertical-align:top;
}
.ms-viewselector-arrow{
vertical-align:middle;
}
.ms-ltviewselectormenuheader .ms-viewselector-arrow{
margin:0px 5px 2px 0px;
}
*:first-child+html .ms-ltviewselectormenuheader .ms-viewselector-arrow{
margin-top:2px;
}
SPAN with inline styles

Applied to nested SPAN that wraps the menu arrow icon; child of 'ms-welcomeMenu' SPAN element. Applied in conjunction with the 's4-clust' and 'ms-viewselector-arrow' classes.

<span class="s4-clust ms-viewselector-arrow" style="height: 3px; width: 5px; position: relative; display: inline-block; overflow: hidden;">

IMG with inline styles

Menu arrow icon image. This image is a part of a CSS Sprite (fgimg.png).

<img style="border-width: 0px; position: absolute; left: 0px ! important; top: -491px ! important;" alt="Open Menu" src="/_layouts/images/fgimg.png">

Page State Actions

.ms-qatbutton

Applied to anchor that wraps the Edit/Save icon.

Shares styles with .s4-breadcrumb-anchor' and 's4-breadcrumb-anchor-open' (both used in the pop-out menu).

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-breadcrumb-anchor,.ms-qatbutton{
margin:0px 3px 0px 0px;
padding:2px 5px 0px;
display:inline-block;
text-align:center;
border:1px solid transparent;
vertical-align:bottom;
}
.ms-qatbutton:hover

Hover state for the 'ms-qatbutton' class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-breadcrumb-anchor:hover,.s4-breadcrumb-anchor-open,.ms-qatbutton:hover{
/* [ReplaceColor(themeColor:"Dark2-Lighter")] */
 border-color:#8b929a;
/* [RecolorImage(themeColor:"Dark2-Lightest",includeRectangle{x:0,y:489,width:1,height:11}] */
 background:url("/_layouts/images/bgximg.png") repeat-x -0px -489px;
/* [ReplaceColor(themeColor:"Dark2")] */
 background-color:#21374c;
}
SPAN with inline styles

Applied to a SPAN that wraps the Edit/Save icon image.

<span style="height: 16px; width: 16px; position: relative; display: inline-block; overflow: hidden;">

IMG with inline styles

Edit/Save menu icon image; also controlled by descendant selector style with '.ms-qatbutton' as the parent. This image is a part of a CSS Sprite (fgimg.png).

"Top" value in inline style may vary.

<img style="border-width: 0px; position: absolute; left: 0px; top: -251px;" src="/_layouts/images/fgimg.png" alt="Edit">

Title Area

#s4-titlerow

Applied to DIV that wraps the title area; child of the 's4-bodyContainer' DIV element within the workspace. Referenced in a script file that calculates and fixes the Ribbon dimensions. Applied in conjunction with several classes (refer to following entries). Included in master page.

Nested Styles for Title Area Container

.s4-titlerowhidetitle

Applied to DIV that wraps the title area; child of the 's4-bodyContainer' DIV element within the workspace. Used by the Ribbon positioning system to convey current Ribbon state; 's4-titlerowhidetitle' is the default and is changed when the ECMAScript code initializes. Applied in conjunction with the following classes: 's4-pr', s4-notdlg', 'ms-titlerowborder'. Included in master page.

.ms-titlerowborder

Applied to DIV that wraps the title area; child of the 's4-bodyContainer' DIV element within the workspace. Dynamically added when the page is generated; is not included in the master page; applied in conjunction with the following classes: 's4-pr', s4-notdlg', 's4-titlerowhidetitle'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-titlerowborder{
/* [ReplaceColor(themeColor:"Light2-Lighter")] */
 border-right:1px solid #b8babd;
}
.s4-title

Applied to DIV that wraps the title area content; child of the 's4-titlerow' DIV element; applied in conjunction with the 's4-lp' class. Also used as a parent in descendent selectors. Included in master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-title{
padding:0px 0px 0px 10px;
margin:0px;
min-height:64px;
/* [RecolorImage(themeColor:"Light2",method:"Filling",includeRectangle{x:0,y:1023,width:1,height:12}] */
 background:url("/_layouts/images/bgximg.png") repeat-x -0px -1023px;
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:#f9f9f9;
word-wrap:break-word;
-ms-word-wrap:break-word;
overflow-x:hidden;
}
.ms-fileDlgBannerTbl .s4-title{
background:#F9F9F9;
}
.s4-title-inner

Applied to DIV that wraps the TABLE element that contains the title area content; child of the 's4-title' DIV element. Included in master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-title-inner{
min-height:64px;
}
.s4-titletable

Applied to the TABLE that contains the title area content; child of the 's4-title-inner' DIV element. Included in master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-titletable{
border:0px;
height:64px;
width:100%;
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
}

Styles for Title Area Image, Title and Breadcrumb

.s4-titlelogo

Applied to TD that contains the site logo image; child of the 's4-titletable' TABLE element. Also used as parent for child selector style statements for logo image. Included in master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-titlelogo{
padding:12px 10px 12px 0px;
text-align:center;
vertical-align:middle;
}
.s4-titletext

Applied to TD that contains the site title text; child of the 's4-titletable' TABLE element. Also used as parent for descendant selector style statements for other title types. Included in master page.

This class is the parent however the style properties for the site title text is controlled in the 's4-title h1' and 's4-title h2' classes.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-titletext{
width:100%;
vertical-align:middle;
unicode-bidi:embed;
}
.s4-title h1

Controls the site title text. H1 element is Included in the master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-title h1,.s4-title h2{
font-size:1.4em;
font-weight:normal;
display:inline;
padding:0px;
margin:0px;
}
.s4-title h1 a

Controls ANCHOR elements in the site title text.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-title h1 a,.s4-title h2 a{
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#003759;
display:inline-block;
}
.s4-title h1 a:hover

Hover state for 's4-title h1' ANCHOR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-title h1 a:hover,.s4-title h2 a:hover{
text-decoration:underline;
}
.s4-title h2

Controls the title breadcrumb text. H2 element is Included in the master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-title h1,.s4-title h2{
font-size:1.4em;
font-weight:normal;
display:inline;
padding:0px;
margin:0px;
}
.s4-title h2{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#5d6878;
}
.s4-title h2 a

Controls ANCHOR elements in the title breadcrumb text.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-title h1 a,.s4-title h2 a{
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#003759;
display:inline-block;
}
.s4-title h2 a:hover

Hover state for the 's4-title h2 a' ANCHOR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-title h1 a:hover,.s4-title h2 a:hover{
text-decoration:underline;
}

Nested styles for Breadcrumb Separator Arrow

.s4-bcsep

Applied to SPAN element that wraps site/page title breadcrumb separator arrow image; child of the 's4-titletext' TD element. Applied in conjunction with the 's4-nothome' and 's4-titlesep' classes. Included in master page.

This chart does not typically reference nightandday.css since it is custom master page specific; however, nightandday.css is the only file this statement appears.

Found in: FEATURES\PublishingLayouts\en-us\nightandday.css (toggle code) 

.s4-bcsep{
color: #012a60;
font-size: 8pt;
font-weight: bold;
padding: 5px 5px 0px 5px;
vertical-align: middle;
}
.s4-titlesep

Applied to SPAN element that wraps site/page title breadcrumb separator arrow image; child of the 's4-titletext' TD element. Applied in conjunction with the 's4-nothome' and 's4-bcsep' classes. Included in master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-titlesep{
vertical-align:middle;
}
.s4-nothome

Applied to SPAN element that wraps site/page title breadcrumb separator arrow image; child of the 's4-titletext' TD element. Applied in conjunction with the 's4-titlesep' and 's4-bcsep' classes. Included in master page.

Unknown usage. Could not locate in any CSS or JS file.

SPAN with inline styles

Applied to SPAN element that wraps separator arrow IMG element; child of a SPAN element (no class or ID) that is a child of the 's4-titlesep' SPAN element.

<span style="height:11px;width:11px;position:relative;display:inline-block;overflow:hidden;">

IMG with inline styles

Separator arrow image. This image is a part of a CSS Sprite (fgimg.png).

<img style="border-width:0px;position:absolute;left:-0px !important;top:-585px !important;" alt=":" src="/_layouts/images/fgimg.png">

Nested styles for Page Description

.s4-pagedescription

Applied to DIV element that wraps the DIV element that contains the page description text; child of the 's4-titletext' TD element. Included in master page.

CSS statement relies on the presence of the 's4-title' class assigned to a parent element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-title .s4-pagedescription,.s4-title .s4uniqpermdescription{
margin-top:6px;
font-size:1em;
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#5d6878;
font-weight:normal;
}
.ms-listdescription

Applied to DIV element that contains the page description text; child of the 's4-pagedescription' DIV element; only rendered when description text exists for a page.

This class is only referenced in Core.css, which is used for SharePoint 2007 sites. However it can be used in custom CSS style statements to target the description text and apply modifications to the text or the container.

Social Data

.s4-socialdata-notif

Applied to TD element that wraps social data icons/links; child of the 's4-titletable' TABLE element. Included in master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-socialdata-notif{
text-align:left;
}
.ms-socialNotif-Container

Applied to DIV element that wraps social data components; child of the 's4-socialdata-notif' DIV element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-socialNotif-Container{
font-family:"Segoe UI",Tahoma,Verdana,sans-serif;
font-size:1em;
width:120px;
overflow-x:auto;
overflow-y:hidden;
padding:0px 3px;
text-align:right;
}
.ms-socialNotif-groupSeparator

Applied to a SPAN element that creates the vertical line that appears to the left of the social data icons; child of the 'ms-socialNotif-Container' DIV element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-socialNotif-groupSeparator{
display:inline-block;
height:60px;
position:relative;
top:4px;
margin:0px 3px;
border-right:1px solid;
/* [ReplaceColor(themeColor:"Light2")] */
 border-right-color:#e7e7e8;
}
.ms-socialNotif

Applied to ANCHOR element that wraps a social data icon/button; child of the 'ms-socialNotif-Container' DIV element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-socialNotif{
text-align:center;
vertical-align:top;
display:inline-block;
width:48px;
height:60px;
overflow:hidden;
margin:0px 1px;
padding:0px 2px;
border:1px solid transparent;
}
.ms-socialNotif:hover

Hover state for 'ms-socialNotif' ANCHOR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-socialNotif:hover{
/* [ReplaceColor(themeColor:"Light2-Lighter")] */
 border:1px solid #f1c43f;
/* [ReplaceColor(themeColor:"Light2-Lightest")] */
 background-color:#fdeeb3;
}
SPAN with inline styles

Applied to SPAN element that is wrapped around "I Like It" icon/button IMAGE element; child of a SPAN element (no ID or class) that is a child of the 'ms-socialNotif' ANCHOR element.

<span style="height:32px;width:32px;position:relative;display:inline-block;overflow:hidden;">

IMG with inline styles

Applied to "I Like It" IMG element. Image is a part of a CSS Sprite (mossfgimg.png).

<img src="/_layouts/images/mossfgimg.png" style="border:0; left:-0px !important;top:-132px !important;position:absolute;">

SPAN with inline styles

Applied to SPAN element that is wrapped around "Tags & Notes" icon/button IMAGE element; child of a SPAN element (no ID or class) that is a child of the 'ms-socialNotif' ANCHOR element.

<span style="height:32px;width:32px;position:relative;display:inline-block;overflow:hidden;">

IMG with inline styles

Applied to "Tags & Notes" IMG element. Image is a part of a CSS Sprite (mossfgimg.png).

<img src="/_layouts/images/mossfgimg.png" style="border:0; left:-0px !important;top:-300px !important;position:absolute;">

.ms-socialNotif-text

Applied to SPAN element that wraps the social data icon/button text; child of a SPAN element (no ID or class) that is a child of the 'ms-socialNotif' ANCHOR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-socialNotif-text{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#5d6878;
display:block;
padding-bottom:1px;
}

Top Navigation Bar (Global Navigation)

Container Styles for Top Nav

#s4-topheader2

Applied to DIV element that wraps the top navigation bar; child of the 's4-titlerow' DIV element within the workspace. This DIV element also contains search and help icon. Applied in conjunction with the 's4-pr' and 's4-notdlg' CSS classes. Included in master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

body #s4-topheader2{
/* [RecolorImage(themeColor:"Light1")] */
 background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:#f6f6f6;
vertical-align:middle;
min-height:25px;
/* [ReplaceColor(themeColor:"Light2-Lightest")] */
 border-top:1px solid #e0e0e0;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */
 border-bottom:1px solid #b8babd;
}
.s4-toplinks

Applied to DIV element that contains the DIV that contains the top navigation bar; child of the 's4-topheader2' DIV element. Applied in conjunction with the 's4-lp' class. Included in master page. Also used as a parent in descendent selector style statements.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-toplinks{
padding:0px;
}
.s4-tn

Applied to DIV element that contains the top navigation bar; child of the 's4-toplinks' DIV element. Specified as the CssClass for the TopNavigationMenuV4 SharePoint AspMenu code in the master page. Also used as a parent in descendent selector style statements.

It is assumed that the "tn" in the class name refers to "top nav". There is another style that uses "sn" (side nav). It is helpful to remember this when working with the descendent and child selector style statements that use 's4-tn' and 's4-sn'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-tn{
padding:0px;
margin:0px;
}
.menu

Applied to DIV element that wraps the generated menu; child of the 's4-tn' DIV element. Applied in conjunction with the 'horizontal' and 'menu-horizontal' classes. Also used as a parent selector in descendent selector style statements in Corev4.css.

HTML element with CSS class is generated by AspMenu; be careful when editing styles, this is shared with the Quick Launch (Current Navigation).

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.band-menu .menu, .tabs-menu-primary .menu, .tabs-menu-secondary .menu{
font-family: tahoma;
font-size: 0.667em;
}

Found in: FEATURES\PublishingLayouts\en-us\single-level-21.css (toggle code) 

.single-level-menu .menu{
font-family: arial,helvetica,sans-serif;
}
.horizontal

Applied to DIV element that wraps the generated menu; child of the 's4-tn' DIV element. Applied in conjunction with the 'menu' and 'menu-horizontal' classes.

Unknown usage. Could not locate in any CSS or JS file.

.menu-horizontal

Applied to DIV element that wraps the generated menu; child of the 's4-tn' DIV element. Applied in conjunction with the 'menu' and 'horizontal' classes. Also used heavily as a parent in descendent selector style statements.

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

* html .tabs .logo .menu-horizontal{
float: left;
}

Found in: FEATURES\PublishingLayouts\en-us\single-level-21.css (toggle code) 

* html .tabs .logo .menu-horizontal{
float: left;
}
.single-level-menu .menu-horizontal{
font-size: 0.833em;
font-weight: bold;
}

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu-horizontal{
display:table;
zoom:1;
}
*:first-child + html[dir="rtl"] .menu-horizontal{
direction:ltr;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu-horizontal{
display:table;
zoom:1;
}
*:first-child + html[dir="rtl"] .menu-horizontal{
direction:ltr;
}

Unordered List Styles for Top Nav

.menu ul

Controls the generated navigation UL element that is a child of the 'menu' DIV element.

Be careful creating custom styles as this same class name is applied to the LI element and wrapping ANCHOR element; styles are also shared with Quick Launch (Current Navigation).

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu ul{
list-style:none;
}
.menu ul,.menu li{
margin:0;
padding:0;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu ul{
list-style:none;
}
.menu ul,.menu li{
margin:0;
padding:0;
}
.root

Applied to generated navigation UL element; child of the 'menu-horizontal' DIV element. Applied in conjunction with the 'static' class. Used in descendent/child selectors in other style statements.

There is no style statements for this class for the top navigation bar, but there are styles present that are used for Quick Launch (Current Navigation).

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.band-menu .menu-vertical ul.root{
border: solid 0.1em #8997bc;
/* [ReplaceColor(themeColor: "Dark2-Lightest")] */
 background-color: #d0d6e3;
}
ul.static

Applied to generated navigation UL element; child of the 'menu-horizontal' DIV element. Applied in conjunction with the 'root' class.

Also applied to generated nested navigation UL element for instances where there is a second tier of navigation items (subsites, pages or custom links). In this case the UL is a child of the 'static' LI element.

Be careful creating custom styles as this same class name is applied to the LI element and wrapping ANCHOR element; styles are also shared with Quick Launch (Current Navigation).

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu-horizontal ul.static{
display:inline;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-tn ul.static{
white-space:nowrap;
}
.menu-horizontal ul.static{
display:inline;
}
.menu li

Controls the generated LI element that contains a navigation item.

Be careful creating custom styles as this same class name is applied to the LI element and wrapping ANCHOR element; styles are also shared with Quick Launch (Current Navigation).

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu ul,.menu li{
margin:0;
padding:0;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu ul,.menu li{
margin:0;
padding:0;
}
li.static

Applied to generated LI element that contains a navigation item.

The style properties listed is combined with 'a.static'; be careful when creating custom styles as this same class name is applied to the UL element and wrapping anchor; styles are also shared with Quick Launch (Current Navigation).

Found in: FEATURES\PublishingLayouts\en-us\single-level-21.css (toggle code) 

.single-level-menu .menu-vertical li.static{
border-bottom: 1px solid #ffffff;
}

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static{
float:left;
}
*:first-child + html[dir="rtl"] .menu-horizontal li.static{
float:none;
display:inline;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static{
float:left;
}
*:first-child + html[dir="rtl"] .menu-horizontal li.static{
float:none;
display:inline;
}
li.dynamic-children

Applied to generated LI element that contains a navigation item that has a dynamic (drop-down/fly-out) menu with children navigation items. In OOTB SharePoint, no style statements exist that use this class name AND the LI element in the selector.

Be careful creating custom styles as this same class name is applied to the wrapping ANCHOR element; styles are shared with Quick Launch (Current Navigation).

li.selected

Applied to generated LI element that contains a navigation item that is the currently selected navigation item. In OOTB SharePoint, no style statements exist that use this class name AND the LI element in the selector.

Be careful creating custom styles as this same class name is applied to the wrapping ANCHOR element; styles are shared with Quick Launch (Current Navigation).

.s4-tn li.static > a:hover

Hover state for all ANCHOR elements that wrap a navigation item.

a.static

Applied to generated ANCHOR element that wraps the navigation item; nested in the LI element. Applied in conjunction with the 'menu-item' class.

The style properties listed is combined with 'li.static'; be careful when creating custom styles as this same class name is applied to the UL element and LI element; styles are also shared with Quick Launch (Current Navigation).

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.band-menu .menu-horizontal span.static, .band-menu .menu-horizontal a.static{
padding: 8px 5px 11px;
/* [RecolorImage(lightThemeColor: "Dark2-Lightest", darkThemeColor: "Dark2-Darker", includeRectangle: {x: 0, y: 0, width: 12, height: 32}] */
 background-image:url("../../../images/bl_Navbar_Splitter.jpg");
background-position: right top;
background-repeat: no-repeat;
/* [ReplaceColor(themeColor: "Dark2-Darkest")] */
 color: #3a4663;
}
.glass-band .band-menu .menu-horizontal span.static, .glass-band .band-menu .menu-horizontal a.static{
/* [RecolorImage(lightThemeColor: "Dark2-Lightest", darkThemeColor: "Dark2-Darker", includeRectangle: {x: 0, y: 0, width: 12, height: 32}] */
 background-image:url("../../../images/bl_Navbar_Splitter_Glass.jpg");
}
.band-menu .menu-vertical span.static, .band-menu .menu-vertical a.static{
padding: 3px 5px 4px;
color:#354260;
font-weight: bold;
}
.band-menu .menu-vertical li li span.static, .band-menu .menu-vertical li li a.static{
padding-left: 10px;
font-weight: normal;
}
.tabs-menu-primary .menu-horizontal span.static, .tabs-menu-primary .menu-horizontal a.static{
/* [RecolorImage(lightThemeColor: "Dark2-Lightest", darkThemeColor: "Dark2-Darker")] */
 background-image: url("../../../images/bl_Tab_Left.jpg");
background-position: left top;
background-repeat: no-repeat;
padding-left: 5px;
/* [ReplaceColor(themeColor: "Dark2-Darkest")] */
 color: #3a4663;
}
.tabs-menu-secondary .menu-horizontal span.static, .tabs-menu-secondary .menu-horizontal a.static{
background-image: url("../../../images/bl_SecondaryNav_Divider.jpg");
background-position: right top;
background-repeat: no-repeat;
padding: 3px 3px 5px;
color: #ffffff;
}

Found in: FEATURES\PublishingLayouts\en-us\single-level-21.css (toggle code) 

.single-level-menu .menu-horizontal span.static, .single-level-menu .menu-horizontal a.static{
margin: 0 5px;
border-bottom: 5px solid transparent;
padding: 5px 8px;
color: #727165;
}
.single-level-menu .menu-vertical span.static, .single-level-menu .menu-vertical a.static{
padding: 6px 0 6px 16px;
background-color: #e6e5d3;
color: #171717
}

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static{
float:left;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static{
float:left;
}
a.static:hover

Hover state for 'a.static' ANCHOR element.

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.band-menu .menu-horizontal a.static:hover, .band-menu .menu-horizontal a.static.selected{
/* [RecolorImage(lightThemeColor: "Dark2-Medium", darkThemeColor: "Dark2-Darker", includeRectangle: {x: 0, y: 0, width: 10, height: 32}] */
 background-image:url("../../../images/bl_Navbar_Gd_Hover.jpg");
background-position:right top;
background-repeat:repeat-x;
color: #ffffff;
}
.glass-band .band-menu .menu-horizontal a.static:hover, .glass-band .band-menu .menu-horizontal a.static.selected{
/* [RecolorImage(lightThemeColor: "Dark2-Medium", darkThemeColor: "Dark2-Darker", includeRectangle: {x: 0, y: 0, width: 11, height: 32}] */
 background-image:url("../../../images/bl_Navbar_Hover_Glass.jpg");
}
.band-menu .menu-vertical a.static:hover{
/* [ReplaceColor(themeColor: "Dark2-Darker")] */
 background-color: #596e9e;
color: #ffffff;
}
.tabs-menu-primary .menu-horizontal a.static:hover{
color: #ffffff;
}
.tabs-menu-secondary .menu-horizontal a.static:hover{
background-color: #d8d8e3;
background-image: none;
color: #3f4e79;
}

Found in: FEATURES\PublishingLayouts\en-us\single-level-21.css (toggle code) 

.single-level-menu .menu-horizontal span.static:hover, .single-level-menu .menu-horizontal a.static:hover{
border-bottom: 5px solid #ffd15e;
color: #56554d;
}
.single-level-menu .menu-vertical span.static:hover, .single-level-menu .menu-vertical a.static:hover{
background-color: #5ab6cc;
color: #ffffff;
}
.menu-item

Applied to generated ANCHOR element that wraps the navigation item. Applied in conjunction with 'static' class. Also used as a parent in descendent selector style statements.

Some styles are shared with Quick Launch (Current Navigation).

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
display:block;
}
.menu-vertical li,.menu-vertical .menu-item,ul.dynamic .menu-item, .menu-vertical .menu-item .additional-background,ul.dynamic .menu-item .additional-background .menu-vertical .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
zoom:1;
}
*:first-child + html[dir="rtl"] .menu-horizontal .menu-item{
direction:rtl;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-tn li.static >
.menu-item{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#3b4f65;
white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
display:inline-block;
height:15px;
vertical-align:middle;
}
.s4-tn li.dynamic >
.menu-item{
display:block;
padding:3px 10px;
white-space:nowrap;
font-weight:normal;
}
.s4-ql ul.root >
li >
.menu-item,.s4-qlheader,.s4-qlheader:visited{
font-size:1.2em;
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#0072bc;
margin:0px;
padding:3px 4px 3px 10px;
border-width:1px 0px;
border-style:solid;
border-color:transparent;
word-wrap:break-word;
overflow-x:hidden;
}
.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
display:block;
}
.menu-vertical li,.menu-vertical .menu-item,ul.dynamic .menu-item, .menu-vertical .menu-item .additional-background,ul.dynamic .menu-item .additional-background .menu-vertical .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
zoom:1;
}
*:first-child + html[dir="rtl"] .menu-horizontal .menu-item{
direction:rtl;
}
a.dynamic-children

Applied to generated ANCHOR element that wraps the navigation item that has a dynamic (drop-down/fly-out) menu with children navigation items. Applied in conjunction with 'static' and 'menu-item' classes. Only used as a parent in descendant selector style statements.

Be careful creating custom styles as this same class name is applied to the LI element; styles are also shared with Quick Launch (Current Navigation).

a.selected

Applied to generated ANCHOR element that wraps the navigation item that is the currently selected navigation item.

Be careful creating custom styles as this same class name is applied to the LI element; styles are also shared with Quick Launch (Current Navigation).

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-toplinks .s4-tn a.selected{
/* [ReplaceColor(themeColor:"Accent1-Medium")] */
 border-color:#91cdf2;
/* [ReplaceColor(themeColor:"Accent1-Lighter")] */
 border-bottom-color:#addbf7;
/* [ReplaceColor(themeColor:"Accent1-Lightest")] */
 border-top-color:#c6e5f8;
/* [RecolorImage(themeColor:"Light1")] */
 background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Accent1",themeTint:"0.35")] */
 background-color:#ccebff;
/* [ReplaceColor(themeColor:"Accent1",themeShade:"0.20")] */
 color:#003759;
padding:4px 5px;
margin:0px 5px;
}
a.selected:hover

Hover state for the 'a.selected' class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-toplinks .s4-tn a.selected:hover{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#003759;
}
(My Sites) a.selected

Applied to generated ANCHOR element that wraps the navigation item that is the currently selected navigation item in My Sites. Also used as a parent in child selectors in other style statements.

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

.s4-mysitetn A.selected, .s4-mysitetn A.selected:hover{
background: url(/_layouts/images/selected_border.png) no-repeat left center;
}
(My Sites) a.selected:hover

Hover state for the 'a.selected' class in My Sites. Also used as a parent in child selectors in other style statements.

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

.s4-mysitetn A.selected, .s4-mysitetn A.selected:hover{
background: url(/_layouts/images/selected_border.png) no-repeat left center;
}
.additional-background

Applied to generated SPAN element that wraps the navigation item text container; child of the 'menu-item' ANCHOR element. Sets the drop down arrow image(s) for dynamic menus. Also used as a parent in child selector style statements.

Some of the style properties listed is combined with 'menu-item-text' class; styles are also shared with Quick Launch (Current Navigation).

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.tabs-menu-primary .menu-horizontal span.static .additional-background, .tabs-menu-primary .menu-horizontal a.static .additional-background{
/* [RecolorImage(lightThemeColor: "Dark2-Lightest", darkThemeColor: "Dark2-Darker")] */
 background-image: url("../../../images/bl_Tab_Right.jpg");
background-position: right top;
background-repeat: no-repeat;
padding-right: 5px;
}
.tabs-menu-primary .menu-horizontal a.static.selected .additional-background{
background-image: url("../../../images/bl_Tab_Selected_Right.jpg");
}

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu a.menu-item span.additional-background,.menu a.menu-item span.menu-item-text{
cursor:pointer;
}
.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
display:block;
}
.menu-vertical li,.menu-vertical .menu-item,ul.dynamic .menu-item, .menu-vertical .menu-item .additional-background,ul.dynamic .menu-item .additional-background .menu-vertical .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
zoom:1;
}
.menu-horizontal a.dynamic-children span.additional-background, .menu-horizontal span.dynamic-children span.additional-background{
padding-right:10px;
background-image:url('/_layouts/images/menu-down.gif');
background-repeat:no-repeat;
background-position:right center;
}
.menu-horizontal ul.dynamic a.dynamic-children span.additional-background, .menu-horizontal ul.dynamic span.dynamic-children span.additional-background{
background-image:url('/_layouts/images/menu-right.gif');
}
.menu-vertical a.dynamic-children span.additional-background, .menu-vertical span.dynamic-children span.additional-background{
padding-right:10px;
background-image:url('/_layouts/images/menu-right.gif');
background-repeat:no-repeat;
background-position:right center;
}
*:first-child + html[dir="rtl"] .menu-horizontal li.static .additional-background{
zoom:1;
}

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

.s4-mysitetn A >
SPAN.additional-background{
background: none;
padding-bottom: 1px;
margin: 0px 2px;
}
.s4-mysitetn A:hover >
SPAN.additional-background{
background: url(/_layouts/images/hover_border.png) no-repeat right center !important;
}
.s4-mysitetn A.selected >
SPAN.additional-background, .s4-mysitetn A.selected:hover >
SPAN.additional-background{
background: url(/_layouts/images/selected_border.png) no-repeat right center !important;
}
.s4-mysitetn A.dynamic-children SPAN.additional-background{
background: none;
}
.s4-mysitetn A.dynamic:hover >
SPAN.additional-background{
background: #ccebff url(/_layouts/images/selbg.png) repeat-x left top !important;
border: 1px solid #91cdf2;
border-top-color: #bde1f7;
margin: 1px;
}
.s4-mysitetn .menu-horizontal a.dynamic-children span.additional-background{
padding-right: 0px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu a.menu-item span.additional-background,.menu a.menu-item span.menu-item-text{
cursor:pointer;
}
.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
display:block;
}
.menu-vertical li,.menu-vertical .menu-item,ul.dynamic .menu-item, .menu-vertical .menu-item .additional-background,ul.dynamic .menu-item .additional-background .menu-vertical .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
zoom:1;
}
.menu-horizontal a.dynamic-children span.additional-background, .menu-horizontal span.dynamic-children span.additional-background{
padding-right:10px;
background-image:url('/_layouts/images/menu-down.gif');
background-repeat:no-repeat;
background-position:right center;
}
.menu-horizontal ul.dynamic a.dynamic-children span.additional-background, .menu-horizontal ul.dynamic span.dynamic-children span.additional-background{
background-image:url('/_layouts/images/menu-right.gif');
}
.menu-vertical a.dynamic-children span.additional-background, .menu-vertical span.dynamic-children span.additional-background{
padding-right:10px;
background-image:url('/_layouts/images/menu-right.gif');
background-repeat:no-repeat;
background-position:right center;
}
*:first-child + html[dir="rtl"] .menu-horizontal li.static .additional-background{
zoom:1;
}
.menu-item-text

Applied to generated SPAN element that wraps the navigation item text; child of the 'additional-background' SPAN element.

Some of the style properties listed is combined with 'additional-background' class; some styles are also shared with Quick Launch (Current Navigation).

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.tabs-menu-primary .menu-horizontal span.static .menu-item-text, .tabs-menu-primary .menu-horizontal a.static .menu-item-text{
/* [RecolorImage(lightThemeColor: "Dark2-Lightest", darkThemeColor: "Dark2-Darker")] */
 background-image: url("../../../images/bl_Tab.jpg");
background-position: left top;
background-repeat: repeat-x;
padding: 5px 5px 6px;
}
.tabs-menu-primary .menu-horizontal a.static.selected .menu-item-text{
/* [RecolorImage(lightThemeColor: "Dark2-Medium", darkThemeColor: "Dark2-Darker")] */
 background-image: url("../../../images/bl_Tab_Selected.jpg");
}

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu a.menu-item span.additional-background,.menu a.menu-item span.menu-item-text{
cursor:pointer;
}
.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
display:block;
}
.menu-vertical li,.menu-vertical .menu-item,ul.dynamic .menu-item, .menu-vertical .menu-item .additional-background,ul.dynamic .menu-item .additional-background .menu-vertical .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
zoom:1;
}
.menu-horizontal .menu-item-text{
white-space:nowrap;
}
.menu-vertical .menu-item-text{
word-wrap:break-word;
overflow:hidden;
}

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

.s4-mysitetn A >
SPAN.additional-background >
SPAN.menu-item-text{
background: none;
padding: 12px 7px 14px 5px;
}
.s4-mysitetn A:hover >
SPAN.additional-background >
SPAN.menu-item-text{
background: url(/_layouts/images/hover_bg.png) no-repeat center top;
}
.s4-mysitetn A.selected >
SPAN.additional-background >
SPAN.menu-item-text{
color: #91cdf2;
background: none;
}
.s4-mysitetn A.selected:hover >
SPAN.additional-background >
SPAN.menu-item-text{
background: url(/_layouts/images/hover_selected_bg.png) no-repeat center top;
}
.s4-mysitetn .menu a.dynamic >
span.additional-background >
span.menu-item-text{
padding: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
.s4-mysitetn A.dynamic:hover >
SPAN.additional-background >
SPAN.menu-item-text{
background: none !important;
padding: 3px 5px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu a.menu-item span.additional-background,.menu a.menu-item span.menu-item-text{
cursor:pointer;
}
.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
display:block;
}
.menu-vertical li,.menu-vertical .menu-item,ul.dynamic .menu-item, .menu-vertical .menu-item .additional-background,ul.dynamic .menu-item .additional-background .menu-vertical .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
zoom:1;
}
.menu-horizontal .menu-item-text{
white-space:nowrap;
}
.menu-vertical .menu-item-text{
word-wrap:break-word;
overflow:hidden;
}

Unordered List Styles for Dynamic (drop-down/fly-out) Menu

ul.dynamic

Applied to the generated UL element for a dynamic (drop-down/fly-out) menu with children navigation items; child of the 'dynamic-children' LI element. Also used as a parent in descendant selector style statements.

Be careful creating custom styles as this same class name is applied to the LI element and ANCHOR element; styles are also shared with Quick Launch (Current Navigation).

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.band-menu ul.dynamic{
/* [ReplaceColor(themeColor: "Dark2-Darker")] */
 border: solid 1px #cbd1e0;
/* [ReplaceColor(themeColor: "Dark2-Lighter")] */
 background-color: #eceff3;
}

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu ul.dynamic{
position:absolute;
left:-999em;
}

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

.s4-mysitetn .menu ul.dynamic{
border: 1px solid;
border-top-color: #a4aab4;
border-left-color: #a4aab4;
border-right-color: #7895ac;
border-bottom-color: #7895ac;
background-color: #ffffff;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-tn ul.dynamic{
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:white;
/* [ReplaceColor(themeColor:"Dark2-Lighter")] */
 border:1px solid #D9D9D9;
}
.menu ul.dynamic{
position:absolute;
left:-999em;
}
li.dynamic

Applied to generated LI element that contains a navigation item in a dynamic (drop-down/fly-out) menu. Only used as a parent in child selector elements in other style statements.

Be careful creating custom styles as this same class name is applied to the UL element and ANCHOR element; styles are also shared with Quick Launch (Current Navigation).

a.dynamic

Applied to generated ANCHOR element that wraps the navigation item in a dynamic (drop-down/fly-out) menu; child of the 'dynamic' LI element. Applied in conjunction with the 'menu-item' class.

Be careful creating custom styles as this same class name is applied to the UL element and LI element; styles are also shared with Quick Launch (Current Navigation).

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.band-menu span.dynamic, .band-menu a.dynamic{
padding: 4px 5px;
min-width: 150px;
/* [ReplaceColor(themeColor: "Dark2-Darkest")] */
 color: #3a4663
}

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu span.dynamic, .menu a.dynamic{
min-width:150px;
}

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

.s4-mysitetn .menu a.dynamic{
color: #003759;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu span.dynamic, .menu a.dynamic{
min-width:150px;
}
a:hover

Hover state for all ANCHOR elements in a dynamic (drop-down/fly-out) menu.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-tn li.dynamic >
a:hover{
font-weight:normal;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */
 background-color:#D9D9D9;
}

Help Icon

.s4-help

Applied to SPAN element that wraps the Help icon and link; child of the 's4-searcharea' class. Included in the master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-help{
display:inline-block;
margin:4px 4px 3px 21px;
}
*:first-child+html .s4-help{
margin:3px 4px 0px 4px !important;
vertical-align:baseline;
padding-bottom:2px;
}
SPAN with inline styles

Applied to SPAN element that contains the Help link and icon; child of the 's4-help' class. Applied in conjunction with the 's4-clust' class. Included in the master page.

This code is in the master page and can be changed!

<span style="height:17px;width:17px;position:relative;display:inline-block;overflow:hidden;">
ANCHOR with inline styles

Applied to ANCHOR element that wraps the help icon image. Included in the master page.

This code is in the master page and can be changed!

<a style="height:17px;width:17px;display:inline-block;">
IMG with inline styles

Help icon. Included in the master page. This image is part of a CSS Sprite (fgimg.png).

This code is in the master page and can be changed;

<img style="left:-0px !important;top:-309px !important;position:absolute;">

Status Bar

Styles for Status Bars

#s4-statusbarcontainer

Applied to DIV element that wraps the status bar. Included in master page.

#pageStatusBar

Applied to DIV element that contains status bar text; child of the 's4-statusbarcontainer' DIV element. Applied in conjunction with the 's4-status-s3' class. Included in master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

body #pageStatusBar{
display:none;
border-style:solid;
border-width:1px 0px;
padding:4px 5px 5px 10px;
font-family:verdana;
font-size:1em;
}
.s4-status-s1

Applied to DIV element that contains status bar text; child of the 's4-statusbarcontainer' DIV element. Applied in conjunction with the 'pageStatusBar' ID. Included in master page. One of four status bar message styles.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-status-s1{
background:#c9d7e6 url("/_layouts/images/bgximg.png") repeat-x -0px -209px;
color:#3b4652;
border-color:#aaafbe;
}
.s4-status-s1 a

Applied to any ANCHOR elements in the s4-status-s1 DIV element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-status-s1 a, .s4-status-s1 a:link, .s4-status-s1 a:visited{
color:#0e3a6d;
}
.s4-status-s2

Applied to DIV element that contains status bar text; child of the 's4-statusbarcontainer' DIV element. Applied in conjunction with the 'pageStatusBar' ID. Included in master page. One of four status bar message styles.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-status-s2{
background:#71b84f url("/_layouts/images/bgximg.png") repeat-x -0px -83px;
color:#1a3807;
border-color:#3e8811;
}
.s4-status-s2 a

Applied to any ANCHOR elements in the s4-status-s2 DIV element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-status-s4 a, .s4-status-s4 a:link, .s4-status-s4 a:visited, .s4-status-s2 a, .s4-status-s2 a:link, .s4-status-s2 a:visited{
color:#ffffff;
}
.s4-status-s3

Applied to DIV element that contains status bar text; child of the 's4-statusbarcontainer' DIV element. Applied in conjunction with the 'pageStatusBar' ID. Included in master page. One of four status bar message styles.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-status-s3{
background:#fdf289 url("/_layouts/images/bgximg.png") repeat-x -0px -260px;
color:#4b3904;
border-color:#caac09;
}
.s4-status-s3 a

Applied to any ANCHOR elements in the s4-status-s3 DIV element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-status-s3 a, .s4-status-s3 a:link, .s4-status-s3 a:visited{
color:#5a2f00;
}
.s4-status-s4

Applied to DIV element that contains status bar text; child of the 's4-statusbarcontainer' DIV element. Applied in conjunction with the 'pageStatusBar' ID. Included in master page. One of four status bar message styles.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-status-s4{
background:#df5a5b url("/_layouts/images/bgximg.png") repeat-x -0px -158px;
color:#1f0000;
border-color:#bc1213;
}
.s4-status-s4 a

Applied to any ANCHOR elements in the s4-status-s4 DIV element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-status-s4 a, .s4-status-s4 a:link, .s4-status-s4 a:visited, .s4-status-s2 a, .s4-status-s2 a:link, .s4-status-s2 a:visited{
color:#ffffff;
}
#status_1

Applied to SPAN element that wraps all status bar text; child of the 'pageStatusBar' DIV element. In OOTB SharePoint, no style statements exist that use any of this ID name.

.status_1_body

Applied to SPAN element that wraps the dynamically generated status text; child of the 'status_1' SPAN element. In OOTB SharePoint, no style statements exist that use any of this class name.

Web Part Add Pane

#WebPartAdderUpdatePanelContainer

Applied to DIV element that wraps the Web Part Adder pane; child of the 's4-ribbonrow' class. Included in the master page.

.ms-wpadder

Applied to TABLE element that contains Web Part Adder pane components; child of a DIV element that is a child of the 'WebPartAdderUpdatePanelContainer' DIV element. Applied in conjunction with the 'ms-rtefocus-invalid' class - which is only referenced in OOTB SharePoint JavaScript files.

Found in: LAYOUTS\1033\STYLES\WPEDITMODE.CSS (toggle code) 

.ms-wpadder{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#65686b;
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:white;
height:200px;
/* [RecolorImage(themeColor:"Light2",method:"Filling")] */
 background-image:url(/_layouts/images/wpadder_graygrad.png);
background-repeat:repeat-x;
background-position:bottom left;
}

Found in: LAYOUTS\1033\STYLES\WPEDITMODEV4.CSS (toggle code) 

.ms-wpadder{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#65686b;
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:white;
height:200px;
/* [RecolorImage(themeColor:"Light2",method:"Filling")] */
 background-image:url(/_layouts/images/wpadder_graygrad.png);
background-repeat:repeat-x;
background-position:bottom left;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-wpadder{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#65686b;
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:white;
height:200px;
/* [RecolorImage(themeColor:"Light2",method:"Filling")] */
 background-image:url(/_layouts/images/wpadder_graygrad.png);
background-repeat:repeat-x;
background-position:bottom left;
}

Styles for Header Text

#wpadder_categorysectionhead

Applied to table cell (TD) element that contains the "Categories" section title.

.ms-wpadder-sectionhead

Applied to DIV element that contains section title text; child of a TD element that is a child of the 'ms-wpadder' TABLE element.

Found in: LAYOUTS\1033\STYLES\WPEDITMODE.CSS (toggle code) 

.ms-wpadder-sectionhead{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#003759;
font-size:1.3em;
font-family:verdana;
padding:5px 0px;
}

Found in: LAYOUTS\1033\STYLES\WPEDITMODEV4.CSS (toggle code) 

.ms-wpadder-sectionhead{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#003759;
font-size:1.3em;
font-family:verdana;
padding:5px 0px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-wpadder-sectionhead{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#003759;
font-size:1.3em;
font-family:verdana;
padding:5px 0px;
}

Styles for Web Part Adder Pane

Due to the high number of styles and low likelihood that the Web Part Adder Pane will be branded, only a visual representation of the styles is provided.

Dialog box

Styles for Dialog Box Title Bar

.ms-dlgContent

Applied to DIV element that wraps the dialog box. Applied in conjunction with inline styles.

Controls the outermost border color around the dialog box.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-dlgContent{
position:absolute;
/* [ReplaceColor(themeColor:"Light1")] */
 background-color:#ffffff;
display:none;
/* [ReplaceColor(themeColor:"Dark2")] */
 border:1px solid #161d25;
}
DIV with inline styles

Applied to DIV element that wraps the dialog box. Applied in conjunction with the 'ms-dlgContent' class.

Values will change based on current screen.

<div style="z-index: 1505; display: block; width: 622px; height: 382px; left: 39px; top: 10px;">

.ms-dlgBorder

Applied to DIV element that wraps the dialog box; child of 'ms-dlgContent' DIV element.

Controls the inner border color around the dialog box.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-dlgBorder{
/* [ReplaceColor(themeColor:"Accent1")] */
 border:1px solid #0072bc;
}
.ms-dlgTitle

Applied to DIV element that contains the title bar; child of the 'ms-dlgBorder' DIV element. This DIV also includes an inline style for width; values will change based on current screen.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-dlgTitle{
/* [RecolorImage(themeColor:"Light2",includeRectangle{x:0,y:51,width:1,height:21}] */
 background:url("/_layouts/images/bgximg.png") repeat-x -0px -51px;
/* [ReplaceColor(themeColor:"Dark2",themeShade:"0.90")] */
 background-color:#21374c;
height:32px;
white-space:nowrap;
cursor:default;
overflow:hidden;
}
.ms-dlgTitleText

Applied to SPAN element that wraps the title bar text; child of the 'ms-dlgTitle' DIV element. This SPAN also includes an inline style for width; values will change based on current screen.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-dlgTitleText{
font-family:Verdana;
font-size:1.3em;
line-height:1.2;
font-weight:normal;
padding-left:10px;
padding-top:7px;
/* [ReplaceColor(themeColor:"Light1",themeTint:"0.9")] */
 color:#ffffff;
float:left;
overflow:hidden;
text-overflow:ellipsis;
}
.ms-dlgTitleBtns

Applied to SPAN element that wraps the right buttons in title bar for window close and window maximize/minimize; child of the 'ms-dlgTitle' DIV element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-dlgTitleBtns{
float:right;
padding-top:2px;
padding-right:2px;
}
.ms-dlgCloseBtn

Applied to the ANCHOR elements that wrap the maximize/minimize and close buttons; child of the 'ms-dlgTitleBtns' SPAN element. Only used as a parent in descendant selector style statements.

.ms-dlgCloseBtn span

Controls the SPAN element that wraps the image for maximize/minimize and close buttons; child of the 'ms-dlgCloseBtn' ANCHOR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-dlgCloseBtn span{
cursor:pointer;
border:1px solid transparent;
}
SPAN with inline styles

Applied to SPAN element that wraps the image for maximize/minimize and close buttons; child of the 'ms-dlgCloseBtn' ANCHOR element. Applied in conjunction with the 's4-clust' class.

<span class="s4-clust" style="height:18px;width:18px;position:relative;display:inline-block;overflow:hidden;">

.ms-dlgCloseBtnImg

Applied to the IMG elements for the dialog box close and maximize/minimize icons; child of the SPAN with inline styles. The image is part of a CSS Sprite.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-dlgCloseBtnImg{
border:0px;
}
IMG with inline styles

Dialog box close and maximize/minimize icons; child of the SPAN with inline styles. The image is part of a CSS Sprite.

<img class="ms-dlgCloseBtnImg" style="left:-0px !important;top:-676px !important;position:absolute;" src="/_layouts/images/fgimg.png">

Styles for Dialog Box Content Area Wrapper

.ms-dlgFrameContainer

Applied to DIV element that wraps the dialog box contents under the title bar area. The contents are in an iFrame. Child of the 'ms-dlgBorder' DIV element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-dlgFrameContainer{
overflow:auto;
}
.ms-dlgFrame

Applied to IFRAME element that contains the dialog box contents under the title bar area; child of the 'ms-dlgFrameContainer' DIV element. iFrame also has inline styles applied for width and height that will change based on current screen.

<iframe frameborder="0" style="width: 601px; height: 271px;">

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-dlgFrame{
width:100%;
height:100%;
border:none;
}
.ms-dialog

Applied to HTML element that is the start of the dialog box contents within the iFrame; child of the 'ms-dlgFrame' IFRAME element. Only used as a parent selector in descendent selector style statements.

This is a great class to use to target components when in the dialog box view. Essentially a copy of the web page code is repeated in the dialog box iFrame. Use this class to target components that are needed elsewhere in the site. For example, hide a custom navigation system or change the display of text.

.ms-dlgOverlay

Applied to DIV element that creates browser window shading under the dialog box window. DIV also has inline styles applied for width, height, display and z-index that will change based on current screen.

<div class="ms-dlgOverlay" style="display: block; z-index: 1504; width: 623px; height: 598px;">

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-dlgOverlay{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
filter:alpha(opacity=70);
-ms-filter:"alpha(opacity=70)";
opacity:0.7;
/* [ReplaceColor(themeColor:"Accent1",themeShade:"0.10")] */
 background-color:#182738;
display:none;
}

Content Area

#s4-mainarea

Applied to DIV element that contains the lower content area components including left navigation and right side content; child of the 's4-bodyContainer' DIV element. Applied in conjunction with the 's4-pr' and 's4-widecontentarea' classes. Included in the master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

body #s4-mainarea{
float:left;
clear:both;
}
.s4-widecontentarea

Applied to DIV element that contains the lower content area components including left navigation and right side content; child of the 's4-bodyContainer' DIV element. Applied in conjunction with the 's4-pr' class and 's4-mainarea' ID. Included in the master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-widecontentarea{
width:100%;
}

Found in: LAYOUTS\STYLES\dlgframe.css (toggle code) 

.ms-dialog .s4-widecontentarea{
width:100%!important;
}
#s4-leftpanel

Applied to DIV element that wraps the left panel components; child of the 's4-mainarea' DIV element. Included in the master page.

Display is set to none but the DIV displays anyways.

Found in: LAYOUTS\1033\STYLES\mysitelayout.css (toggle code) 

body #s4-leftpanel{
min-height:0px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

body #s4-leftpanel{
width:155px;
float:left;
}
.s4-leftpanel-content

Applied to DIV element that contains the left panel components; child of the 's4-leftpanel' DIV element. Included in the master page.

#MSO_ContentTable

Applied to DIV element that wraps the content area; child of the 's4-mainarea' DIV element. Applied in conjunction with the 's4-ca' and 's4-ca-dlgNoRibbon' classes. Referenced in many script files. Included in the master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

body #MSO_ContentTable{
position:relative;
}
.s4-ca

Applied to DIV element that wraps the content area; child of the 's4-mainarea' DIV element. Applied in conjunction with the 'MSO_ContentTable' ID and 's4-ca-dlgNoRibbon' class. Included in the master page.

It is assumed that "ca" stands for content area.

Found in: LAYOUTS\1033\STYLES\mysitelayout.css (toggle code) 

.s4-ca{
min-height: 0px;
float:left;
margin-left: 0px;
width:980px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-ca{
/* [ReplaceColor(themeColor:"Light1")] */
 background:#fff;
margin-left:155px;
margin-right:0px;
min-height:324px;
}

Found in: LAYOUTS\STYLES\dlgframe.css (toggle code) 

.ms-dialog .s4-ca{
margin-left:0px !important;
margin-right:0px !important;
min-height:0px !important;
width:100%!important;
min-width:0px !important;
}
.s4-ca-dlgNoRibbon

Applied to DIV element that wraps the content area; child of the 's4-mainarea' DIV element. Applied in conjunction with the 'MSO_ContentTable' ID and 's4-ca' class. Included in the master page.

Found in: LAYOUTS\STYLES\dlgframe.css (toggle code) 

.ms-dialog-nr .s4-ca-dlgNoRibbon{
margin-left:0px !important;
min-height:0px !important;
}
.s4-ba

Applied to DIV element that wraps the body area ; child of the 'MSO_ContentTable' DIV element. Included in the master page.

It is assumed that "ba" stands for body area.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-ba{
padding:0px 0px 5px 0px;
}
.ms-bodyareacell

Applied to DIV element that wraps the container for PlaceHolderMain; child of the 's4-ba' DIV element. Included in the master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-bodyareacell{
vertical-align:top;
}

Found in: LAYOUTS\INC\ifsmain.css (toggle code) 

.ms-dialog .ms-bodyareacell{
min-height: 380px !important;
}

Found in: LAYOUTS\STYLES\dlgframe.css (toggle code) 

.ms-dialog .ms-bodyareacell{
min-height:0px !important;
padding:8px;
}
#MSO_ContentDiv

Applied to DIV element that contains the main content placeholder (PlaceHolderMain); child of the 'ms-bodyareacell' DIV element. Required in order to render the Web Part Tool Pane. Included in the master page.

.ms-descriptiontext

General usage description text; various instances are controlled with descendant selectors.

Found in: LAYOUTS\1033\STYLES\BLOG.CSS (toggle code) 

.ms-BlogNavigator p.ms-descriptiontext{
display:none;
}

Found in: LAYOUTS\1033\STYLES\mysitelayout.css (toggle code) 

.ms-vb, .ms-descriptiontext{
font-family: verdana! important;
}

Found in: LAYOUTS\1033\STYLES\OWSNOCR.CSS (toggle code) 

.ms-descriptiontext{
/* [ReplaceColor(themeColor:"Dark1")] */
 color:black;
font-family:verdana;
font-size:8pt
}

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-pickertitlesection .ms-descriptiontext{
padding:8px 3px 8px 3px;
height:14px;
}
.ms-pickeremptyresulttexttr .ms-descriptiontext{
padding-left:5px;
padding-top:6px;
}
.ms-pickersearchsummarytr td.ms-descriptiontext{
padding-left:6px;
padding-top:5px;
/* [ReplaceColor(themeColor:"Dark1-Lighter")] */
 color:#525252;
font-weight:bold;
}
.ms-pickerwaittexttr td.ms-descriptiontext{
text-align:center;
}
.ms-listedit table.ms-pageinformation,.ms-listedit .ms-pageinformation table td,.ms-listedit .ms-propertysheet,.ms-listedit .ms-descriptiontext{
font-family:Verdana,Helvetica,sans-serif;
}
.ms-descriptiontext{
text-align:center!important;
}

Found in: LAYOUTS\1033\STYLES\LAYOUTS.CSS (toggle code) 

.ms-pickertitlesection .ms-descriptiontext{
padding:8px 3px 8px 3px;
height:14px;
}
.ms-pickeremptyresulttexttr .ms-descriptiontext{
padding-left:5px;
padding-top:6px;
}
.ms-pickersearchsummarytr td.ms-descriptiontext{
padding-left:6px;
padding-top:5px;
/* [ReplaceColor(themeColor:"Dark1-Lighter")] */
 color:#525252;
font-weight:bold;
}
.ms-pickerwaittexttr td.ms-descriptiontext{
text-align:center;
}
.ms-listedit table.ms-pageinformation,.ms-listedit .ms-pageinformation table td,.ms-listedit .ms-propertysheet,.ms-listedit .ms-descriptiontext{
font-family:Verdana,Helvetica,sans-serif;
}

Found in: LAYOUTS\1033\STYLES\Themable\BLOG.CSS (toggle code) 

.ms-BlogNavigator p.ms-descriptiontext{
display:none;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-descriptiontext{
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#4c4c4c;
font-family:tahoma;
font-size:8pt;
text-align:left;
}

Quick Launch (Current Navigation)

Container Styles for Quick Launch

.ms-quicklaunchouter

Applied to DIV element that wraps the Quick Launch DIV element; child of the 's4-leftpanel-content' DIV element. Included in the master page.

Found in: FEATURES\PublishingLayouts\en-us\Band.css (toggle code) 

div.ms-quicklaunchouter{
margin-left:7px;
margin-top:5px;
width:158px;
border-width:0px;
}

Found in: FEATURES\PublishingLayouts\en-us\Vertical.css (toggle code) 

div.ms-quicklaunchouter{
margin-left:7px;
margin-top:5px;
width:158px;
border-width:0px;
}

Found in: FEATURES\PublishingLayouts\en-us\SingleLevel.css (toggle code) 

div.ms-quicklaunchouter{
margin-top:5px;
width:198px;
border-width:0px;
}

Found in: FEATURES\PublishingLayouts\en-us\Tabs.css (toggle code) 

div.ms-quicklaunchouter{
margin-left:7px;
margin-top:5px;
width:158px;
border-width:0px;
}

Found in: LAYOUTS\1033\STYLES\mysitelayout.css (toggle code) 

.ms-pagetitleareaframe TABLE, TD.ms-titleareaframe, DIV.ms-titleareaframe, .ms-pagetitleareaframe, .ms-mwspagetitleareaframe, .ms-consoletitleareaframe, .ms-titlearealeft, .ms-titlearearight, .ms-nav, .ms-pagemargin, TD.ms-rightareacell DIV.ms-pagemargin, .ms-bodyareapagemargin, .ms-pagebottommargin, .ms-pagebottommarginleft, .ms-pagebottommarginright, .ms-quicklaunch, .ms-quicklaunchheader, .ms-quicklaunchouter, .ms-quickLaunch table td, .ms-quicklaunch table.ms-navheader td, .ms-navheader2 td, .ms-quicklaunch span.ms-navheader, .ms-navSubMenu1, .ms-navSubMenu2, .ms-bodyareaframe, .ms-viewareaframe{
background-image:none;
background-color:transparent;
border:none;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-quicklaunchouter{
border:none;
margin-bottom:5px;
}
.ms-quicklaunchouter{
margin:0px 1px 2px 1px;
}
.ms-quicklaunchouter{
margin:0px;
}
.ms-quickLaunch

Applied to DIV element that wraps the Quick Launch; child of the 'ms-quicklaunchouter' DIV element. Also used as a parent in descendant selector style statements. Included in the master page.

Found in: LAYOUTS\1033\STYLES\datepicker.css (toggle code) 

.ms-datepickerouter .ms-quickLaunch{
padding-top:0px;
/* [ReplaceColor(themeColor:"Dark2-Lightest")] */
 border:1px solid #6F9DD9;
}

Found in: LAYOUTS\1033\STYLES\datepickerv4.css (toggle code) 

.ms-datepickerouter .ms-quickLaunch{
padding-top:0px;
/* [ReplaceColor(themeColor:"Dark2-Lightest")] */
 border:1px solid #dddfe0;
border-right:none;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-quickLaunch{
padding-top:5px;
}
.ms-quicklaunch-navmgr

Applied to DIV element that wraps the Quick Launch; child of the 'ms-quickLaunch' DIV element. Only used in an adjacent sibling selector style statement. Included in the master page. Set as the value for CssClass property in the QuickLaunchNavigationManager SharePoint Navigation Manager.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-quicklaunch-navmgr + .s4-treeView{
/* [ReplaceColor(themeColor:"Light2-Lightest")] */
 border-top:1px solid #dbddde;
padding-top:10px;
}
.s4-ql

Applied to a DIV element that wraps the Quick Launch; child of a DIV (no ID or class) that is the child of the 'ms-quicklaunch-navmgr' DIV element. Included in the master page and set as the value for the CssClass property in V4QuickLaunchMenu SharePoint AspMenu. Also used as a parent in descendant selector style statements.

It is assumed that "ql" stands for Quick Launch.

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-ql-additionaltopsection .s4-ql{
margin-bottom:0px;
}

Found in: LAYOUTS\1033\STYLES\LAYOUTS.CSS (toggle code) 

.ms-ql-additionaltopsection .s4-ql{
margin-bottom:0px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-ql,.s4-specialNavLinkList{
list-style-type:none;
margin:0px 0px 20px 0px;
padding:0px;
}

Unordered List Styles for Quick Launch

.menu ul

Controls the generated navigation UL element that is a child of the 'menu' DIV element.

Be careful creating custom styles as this same class name is applied to the LI element and wrapping ANCHOR element; styles are also shared with Top Navigation Bar (Global Navigation).

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu ul{
list-style:none;
}
.menu ul,.menu li{
margin:0;
padding:0;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu ul{
list-style:none;
}
.menu ul,.menu li{
margin:0;
padding:0;
}
.menu

Applied to DIV element that wraps the generated menu; child of the 's4-ql' DIV element. Applied in conjunction with the 'vertical' and 'menu-vertical' classes. Also used as a parent selector in descendent selector style statements in Corev4.css.

HTML element with CSS class is generated by AspMenu; be careful when editing styles, this is shared with Top Navigation Bar (Global Navigation).

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.band-menu .menu, .tabs-menu-primary .menu, .tabs-menu-secondary .menu{
font-family: tahoma;
font-size: 0.667em;
}

Found in: FEATURES\PublishingLayouts\en-us\single-level-21.css (toggle code) 

.single-level-menu .menu{
font-family: arial,helvetica,sans-serif;
}
.vertical

Applied to DIV element that wraps the generated menu; child of the 's4-ql' DIV element. Applied in conjunction with the 'menu' and 'menu-vertical' classes. Only used as a parent in descendent selector style statements.

.menu-vertical

Applied to DIV element that wraps the generated menu; child of the 's4-ql' DIV element. Applied in conjunction with the 'menu' and 'vertical' classes. Only used as a parent in descendent selector style statements.

Found in: FEATURES\PublishingLayouts\en-us\single-level-21.css (toggle code) 

.single-level-menu .menu-vertical{
font-size: 0.75em;
}
.menu li

Controls the generated LI element that contains a navigation item.

Be careful creating custom styles as this same class name is applied to the LI element and wrapping ANCHOR element; styles are also shared with Top Navigation Bar (Global Navigation).

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu ul,.menu li{
margin:0;
padding:0;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu ul,.menu li{
margin:0;
padding:0;
}
.root

Applied to generated navigation UL element; child of the 'menu-vertical' DIV element. Applied in conjunction with the 'static' class. Only used in descendent/child selectors in other style statements.

OOTB this class is also used for the top navigation bar yet no styles are specified.

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.band-menu .menu-vertical ul.root{
border: solid 0.1em #8997bc;
/* [ReplaceColor(themeColor: "Dark2-Lightest")] */
 background-color: #d0d6e3;
}
ul.static

Applied to generated navigation UL element; child of the 'menu-vertical' DIV element. Applied in conjunction with the 'root' class.

Also applied to generated nested navigation UL element for instances where there is a second tier of navigation items (lists, libraries, wiki pages or custom links). In this case the UL is a child of the 'static' LI element.

HTML element with CSS class is generated by AspMenu; OOTB, this is not used for Quick Launch, but is used for the top horizontal menu

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu-horizontal ul.static{
display:inline;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-tn ul.static{
white-space:nowrap;
}
.menu-horizontal ul.static{
display:inline;
}
.menu li

Controls the generated LI element that contains a navigation item.

Be careful creating custom styles as this same class name is applied to the LI element and wrapping ANCHOR element; styles are also shared with Top Navigation Bar (Global Navigation).

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu ul,.menu li{
margin:0;
padding:0;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu ul,.menu li{
margin:0;
padding:0;
}
li.static

Applied to generated LI element that contains a navigation item. OOTB no style statements are present that affect the Quick Launch.

The style properties listed is combined with 'a.static'; be careful when creating custom styles as this same class name is applied to the UL element and wrapping anchor; styles are also shared with Top Navigation Bar (Global Navigation).

Found in: FEATURES\PublishingLayouts\en-us\single-level-21.css (toggle code) 

.single-level-menu .menu-vertical li.static{
border-bottom: 1px solid #ffffff;
}
li.selected

Applied to generated LI element that contains a navigation item that is the currently selected navigation item (generally seen in Publishing site sub nav). In OOTB SharePoint, no style statements exist that use this class name AND the LI element in the selector.

Be careful creating custom styles as this same class name is applied to the wrapping ANCHOR element; styles are shared with Top Navigation Bar (Global Navigation).

.s4-sn li.static > a

Controls the ANCHOR elements that wrap a navigation item in My Sites.

Found in: LAYOUTS\1033\STYLES\mysitelayout.css (toggle code) 

.s4-sn li.static >
a{
padding: 5px 12px;
color: #3b4f65;
font-size: 1.3em;
min-height: 17px;
}
.s4-sn li.static > a:hover

Hover state for the ANCHOR elements that wrap a navigation item in My Sites.

Found in: LAYOUTS\1033\STYLES\mysitelayout.css (toggle code) 

.s4-sn li.static >
a:hover{
color: #44aff6;
}
a.static

Applied to generated ANCHOR element that wraps the navigation item; nested in the LI element. Applied in conjunction with the 'menu-item' class.

The style properties listed is combined with 'li.static'; be careful when creating custom styles as this same class name is applied to the UL element and LI element; styles are also shared with Top Navigation Bar (Global Navigation).

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.band-menu .menu-horizontal span.static, .band-menu .menu-horizontal a.static{
padding: 8px 5px 11px;
/* [RecolorImage(lightThemeColor: "Dark2-Lightest", darkThemeColor: "Dark2-Darker", includeRectangle: {x: 0, y: 0, width: 12, height: 32}] */
 background-image:url("../../../images/bl_Navbar_Splitter.jpg");
background-position: right top;
background-repeat: no-repeat;
/* [ReplaceColor(themeColor: "Dark2-Darkest")] */
 color: #3a4663;
}
.glass-band .band-menu .menu-horizontal span.static, .glass-band .band-menu .menu-horizontal a.static{
/* [RecolorImage(lightThemeColor: "Dark2-Lightest", darkThemeColor: "Dark2-Darker", includeRectangle: {x: 0, y: 0, width: 12, height: 32}] */
 background-image:url("../../../images/bl_Navbar_Splitter_Glass.jpg");
}
.band-menu .menu-vertical span.static, .band-menu .menu-vertical a.static{
padding: 3px 5px 4px;
color:#354260;
font-weight: bold;
}
.band-menu .menu-vertical li li span.static, .band-menu .menu-vertical li li a.static{
padding-left: 10px;
font-weight: normal;
}
.tabs-menu-primary .menu-horizontal span.static, .tabs-menu-primary .menu-horizontal a.static{
/* [RecolorImage(lightThemeColor: "Dark2-Lightest", darkThemeColor: "Dark2-Darker")] */
 background-image: url("../../../images/bl_Tab_Left.jpg");
background-position: left top;
background-repeat: no-repeat;
padding-left: 5px;
/* [ReplaceColor(themeColor: "Dark2-Darkest")] */
 color: #3a4663;
}
.tabs-menu-secondary .menu-horizontal span.static, .tabs-menu-secondary .menu-horizontal a.static{
background-image: url("../../../images/bl_SecondaryNav_Divider.jpg");
background-position: right top;
background-repeat: no-repeat;
padding: 3px 3px 5px;
color: #ffffff;
}

Found in: FEATURES\PublishingLayouts\en-us\single-level-21.css (toggle code) 

.single-level-menu .menu-horizontal span.static, .single-level-menu .menu-horizontal a.static{
margin: 0 5px;
border-bottom: 5px solid transparent;
padding: 5px 8px;
color: #727165;
}
.single-level-menu .menu-vertical span.static, .single-level-menu .menu-vertical a.static{
padding: 6px 0 6px 16px;
background-color: #e6e5d3;
color: #171717
}

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static{
float:left;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static{
float:left;
}
a.static:hover

Hover state for 'a.static' ANCHOR element.

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.band-menu .menu-horizontal a.static:hover, .band-menu .menu-horizontal a.static.selected{
/* [RecolorImage(lightThemeColor: "Dark2-Medium", darkThemeColor: "Dark2-Darker", includeRectangle: {x: 0, y: 0, width: 10, height: 32}] */
 background-image:url("../../../images/bl_Navbar_Gd_Hover.jpg");
background-position:right top;
background-repeat:repeat-x;
color: #ffffff;
}
.glass-band .band-menu .menu-horizontal a.static:hover, .glass-band .band-menu .menu-horizontal a.static.selected{
/* [RecolorImage(lightThemeColor: "Dark2-Medium", darkThemeColor: "Dark2-Darker", includeRectangle: {x: 0, y: 0, width: 11, height: 32}] */
 background-image:url("../../../images/bl_Navbar_Hover_Glass.jpg");
}
.band-menu .menu-vertical a.static:hover{
/* [ReplaceColor(themeColor: "Dark2-Darker")] */
 background-color: #596e9e;
color: #ffffff;
}
.tabs-menu-primary .menu-horizontal a.static:hover{
color: #ffffff;
}
.tabs-menu-secondary .menu-horizontal a.static:hover{
background-color: #d8d8e3;
background-image: none;
color: #3f4e79;
}

Found in: FEATURES\PublishingLayouts\en-us\single-level-21.css (toggle code) 

.single-level-menu .menu-horizontal span.static:hover, .single-level-menu .menu-horizontal a.static:hover{
border-bottom: 5px solid #ffd15e;
color: #56554d;
}
.single-level-menu .menu-vertical span.static:hover, .single-level-menu .menu-vertical a.static:hover{
background-color: #5ab6cc;
color: #ffffff;
}
.menu-item

Applied to generated ANCHOR element that wraps the navigation item. Applied in conjunction with 'static' class. Also used as a parent in descendent selector style statements.

Some styles are shared with Top Navigation Bar (Global Navigation).

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
display:block;
}
.menu-vertical li,.menu-vertical .menu-item,ul.dynamic .menu-item, .menu-vertical .menu-item .additional-background,ul.dynamic .menu-item .additional-background .menu-vertical .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
zoom:1;
}
*:first-child + html[dir="rtl"] .menu-horizontal .menu-item{
direction:rtl;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-tn li.static >
.menu-item{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#3b4f65;
white-space:nowrap;
border:1px solid transparent;
padding:4px 10px;
display:inline-block;
height:15px;
vertical-align:middle;
}
.s4-tn li.dynamic >
.menu-item{
display:block;
padding:3px 10px;
white-space:nowrap;
font-weight:normal;
}
.s4-ql ul.root >
li >
.menu-item,.s4-qlheader,.s4-qlheader:visited{
font-size:1.2em;
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#0072bc;
margin:0px;
padding:3px 4px 3px 10px;
border-width:1px 0px;
border-style:solid;
border-color:transparent;
word-wrap:break-word;
overflow-x:hidden;
}
.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
display:block;
}
.menu-vertical li,.menu-vertical .menu-item,ul.dynamic .menu-item, .menu-vertical .menu-item .additional-background,ul.dynamic .menu-item .additional-background .menu-vertical .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
zoom:1;
}
*:first-child + html[dir="rtl"] .menu-horizontal .menu-item{
direction:rtl;
}
a.selected

Applied to generated ANCHOR element that wraps the navigation item that is the currently selected navigation item (generally seen in Publishing site sub nav).

Be careful creating custom styles as this same class name is applied to the LI element; styles are also shared with Top Navigation Bar (Global Navigation).

Found in: LAYOUTS\1033\STYLES\mysitelayout.css (toggle code) 

.s4-sn li.static >
a.selected{
border: 1px solid #91cdf2;
border-bottom: white;
color: #003759;
background-color: white;
padding-bottom: 6px;
padding-top: 4px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-toplinks .s4-tn a.selected{
/* [ReplaceColor(themeColor:"Accent1-Medium")] */
 border-color:#91cdf2;
/* [ReplaceColor(themeColor:"Accent1-Lighter")] */
 border-bottom-color:#addbf7;
/* [ReplaceColor(themeColor:"Accent1-Lightest")] */
 border-top-color:#c6e5f8;
/* [RecolorImage(themeColor:"Light1")] */
 background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Accent1",themeTint:"0.35")] */
 background-color:#ccebff;
/* [ReplaceColor(themeColor:"Accent1",themeShade:"0.20")] */
 color:#003759;
padding:4px 5px;
margin:0px 5px;
}
.s4-ql a.selected{
/* [RecolorImage(themeColor:"Light1")] */
 background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Accent1",themeTint:"0.35")] */
 background-color:#ccebff;
/* [ReplaceColor(themeColor:"Accent1-Medium")] */
 border-color:#91cdf2 !important;
/* [ReplaceColor(themeColor:"Accent1-Lighter")] */
 border-top-color:#c6e5f8 !important;
border-width:1px !important;
padding-left:9px !important;
/* [ReplaceColor(themeColor:"Accent1",themeShade:"0.20")] */
 color:#003759 !important;
}
.additional-background

Applied to generated SPAN element that wraps the navigation item text container; child of the 'menu-item' ANCHOR element. Sets the fly-out arrow image(s) for dynamic menus when present. Also used as a parent in child selector style statements.

Some of the style properties listed is combined with 'menu-item-text' class; styles are also shared with Top Navigation Bar (Global Navigation).

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.tabs-menu-primary .menu-horizontal span.static .additional-background, .tabs-menu-primary .menu-horizontal a.static .additional-background{
/* [RecolorImage(lightThemeColor: "Dark2-Lightest", darkThemeColor: "Dark2-Darker")] */
 background-image: url("../../../images/bl_Tab_Right.jpg");
background-position: right top;
background-repeat: no-repeat;
padding-right: 5px;
}
.tabs-menu-primary .menu-horizontal a.static.selected .additional-background{
background-image: url("../../../images/bl_Tab_Selected_Right.jpg");
}

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu a.menu-item span.additional-background,.menu a.menu-item span.menu-item-text{
cursor:pointer;
}
.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
display:block;
}
.menu-vertical li,.menu-vertical .menu-item,ul.dynamic .menu-item, .menu-vertical .menu-item .additional-background,ul.dynamic .menu-item .additional-background .menu-vertical .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
zoom:1;
}
.menu-horizontal a.dynamic-children span.additional-background, .menu-horizontal span.dynamic-children span.additional-background{
padding-right:10px;
background-image:url('/_layouts/images/menu-down.gif');
background-repeat:no-repeat;
background-position:right center;
}
.menu-horizontal ul.dynamic a.dynamic-children span.additional-background, .menu-horizontal ul.dynamic span.dynamic-children span.additional-background{
background-image:url('/_layouts/images/menu-right.gif');
}
.menu-vertical a.dynamic-children span.additional-background, .menu-vertical span.dynamic-children span.additional-background{
padding-right:10px;
background-image:url('/_layouts/images/menu-right.gif');
background-repeat:no-repeat;
background-position:right center;
}
*:first-child + html[dir="rtl"] .menu-horizontal li.static .additional-background{
zoom:1;
}

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

.s4-mysitetn A >
SPAN.additional-background{
background: none;
padding-bottom: 1px;
margin: 0px 2px;
}
.s4-mysitetn A:hover >
SPAN.additional-background{
background: url(/_layouts/images/hover_border.png) no-repeat right center !important;
}
.s4-mysitetn A.selected >
SPAN.additional-background, .s4-mysitetn A.selected:hover >
SPAN.additional-background{
background: url(/_layouts/images/selected_border.png) no-repeat right center !important;
}
.s4-mysitetn A.dynamic-children SPAN.additional-background{
background: none;
}
.s4-mysitetn A.dynamic:hover >
SPAN.additional-background{
background: #ccebff url(/_layouts/images/selbg.png) repeat-x left top !important;
border: 1px solid #91cdf2;
border-top-color: #bde1f7;
margin: 1px;
}
.s4-mysitetn .menu-horizontal a.dynamic-children span.additional-background{
padding-right: 0px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu a.menu-item span.additional-background,.menu a.menu-item span.menu-item-text{
cursor:pointer;
}
.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
display:block;
}
.menu-vertical li,.menu-vertical .menu-item,ul.dynamic .menu-item, .menu-vertical .menu-item .additional-background,ul.dynamic .menu-item .additional-background .menu-vertical .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
zoom:1;
}
.menu-horizontal a.dynamic-children span.additional-background, .menu-horizontal span.dynamic-children span.additional-background{
padding-right:10px;
background-image:url('/_layouts/images/menu-down.gif');
background-repeat:no-repeat;
background-position:right center;
}
.menu-horizontal ul.dynamic a.dynamic-children span.additional-background, .menu-horizontal ul.dynamic span.dynamic-children span.additional-background{
background-image:url('/_layouts/images/menu-right.gif');
}
.menu-vertical a.dynamic-children span.additional-background, .menu-vertical span.dynamic-children span.additional-background{
padding-right:10px;
background-image:url('/_layouts/images/menu-right.gif');
background-repeat:no-repeat;
background-position:right center;
}
*:first-child + html[dir="rtl"] .menu-horizontal li.static .additional-background{
zoom:1;
}
.menu-item-text

Applied to generated SPAN element that wraps the navigation item text; child of the 'additional-background' SPAN element.

Some of the style properties listed is combined with 'additional-background' class; some styles are also shared with Top Navigation Bar (Global Navigation).

Found in: FEATURES\PublishingLayouts\en-us\band-21.css (toggle code) 

.tabs-menu-primary .menu-horizontal span.static .menu-item-text, .tabs-menu-primary .menu-horizontal a.static .menu-item-text{
/* [RecolorImage(lightThemeColor: "Dark2-Lightest", darkThemeColor: "Dark2-Darker")] */
 background-image: url("../../../images/bl_Tab.jpg");
background-position: left top;
background-repeat: repeat-x;
padding: 5px 5px 6px;
}
.tabs-menu-primary .menu-horizontal a.static.selected .menu-item-text{
/* [RecolorImage(lightThemeColor: "Dark2-Medium", darkThemeColor: "Dark2-Darker")] */
 background-image: url("../../../images/bl_Tab_Selected.jpg");
}

Found in: LAYOUTS\1033\STYLES\menu-21.css (toggle code) 

.menu a.menu-item span.additional-background,.menu a.menu-item span.menu-item-text{
cursor:pointer;
}
.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
display:block;
}
.menu-vertical li,.menu-vertical .menu-item,ul.dynamic .menu-item, .menu-vertical .menu-item .additional-background,ul.dynamic .menu-item .additional-background .menu-vertical .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
zoom:1;
}
.menu-horizontal .menu-item-text{
white-space:nowrap;
}
.menu-vertical .menu-item-text{
word-wrap:break-word;
overflow:hidden;
}

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

.s4-mysitetn A >
SPAN.additional-background >
SPAN.menu-item-text{
background: none;
padding: 12px 7px 14px 5px;
}
.s4-mysitetn A:hover >
SPAN.additional-background >
SPAN.menu-item-text{
background: url(/_layouts/images/hover_bg.png) no-repeat center top;
}
.s4-mysitetn A.selected >
SPAN.additional-background >
SPAN.menu-item-text{
color: #91cdf2;
background: none;
}
.s4-mysitetn A.selected:hover >
SPAN.additional-background >
SPAN.menu-item-text{
background: url(/_layouts/images/hover_selected_bg.png) no-repeat center top;
}
.s4-mysitetn .menu a.dynamic >
span.additional-background >
span.menu-item-text{
padding: 5px;
margin-top: 1px;
margin-bottom: 1px;
}
.s4-mysitetn A.dynamic:hover >
SPAN.additional-background >
SPAN.menu-item-text{
background: none !important;
padding: 3px 5px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.menu a.menu-item span.additional-background,.menu a.menu-item span.menu-item-text{
cursor:pointer;
}
.menu .menu-item, .menu .menu-item .additional-background, .menu .menu-item .additional-background .menu-item-text{
display:block;
}
.menu-vertical li,.menu-vertical .menu-item,ul.dynamic .menu-item, .menu-vertical .menu-item .additional-background,ul.dynamic .menu-item .additional-background .menu-vertical .menu-item .menu-item-text,ul.dynamic .menu-item .menu-item-text{
zoom:1;
}
.menu-horizontal .menu-item-text{
white-space:nowrap;
}
.menu-vertical .menu-item-text{
word-wrap:break-word;
overflow:hidden;
}
ul.dynamic, li.dynamic, a.dynamic

If the code has been edited and the Quick Launch generates drop-down/fly-out menus, please refer to the entries for these style classes under Top Navigation Bar. Both navigation systems share the classes.

.s4-treeView

Set as the value for the CssClass property in TreeViewNavigationManagerV4 SPNavigationManager control. Only used in an adjacent sibling selector style statement. Included in the master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-quicklaunch-navmgr + .s4-treeView{
/* [ReplaceColor(themeColor:"Light2-Lightest")] */
 border-top:1px solid #dbddde;
padding-top:10px;
}
.ms-treeviewouter

Applied to the DIV element that wraps the tree view navigation. Included in master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-treeviewouter{
margin-top:5px;
}
.ms-tvselected

Set as the value for the SelectedNodeStyle-CssClass property in the WebTreeViewV4 SPTreeView control. Included in master page.

.s4-qlheader

Applied to the element that wraps the View All Site Content link. Set as the value for the CssClass property in the idNavLinkSiteHierarchyV4 SPLink Button control. Included in the master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-ql ul.root >
li >
.menu-item,.s4-qlheader,.s4-qlheader:visited{
font-size:1.2em;
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#0072bc;
margin:0px;
padding:3px 4px 3px 10px;
border-width:1px 0px;
border-style:solid;
border-color:transparent;
word-wrap:break-word;
overflow-x:hidden;
}

Web Parts

.ms-rte-wpbox

Applied to DIV element that wraps the web part table when the web part is in a rich text editor (as compared to the web part being in a web part zone). Applied in conjunction with the 'ms-rtestate-read' class.

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

.ms-rte-wpbox{
font-family: Verdana, Arial, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: normal;
font-variant: normal;
/* [ReplaceColor(themeColor: "Dark2-Darker")] */
 color: #676767;
word-spacing: normal;
letter-spacing: normal;
text-transform: none;
text-align: left;
text-indent: 0px;
text-decoration: none;
line-height: normal;
white-space: normal;
list-style-type: disc;
list-style-image: none;
list-style-position: outside;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-rte-wpbox{
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
font-style:normal;
font-weight:normal;
font-variant:normal;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */
 color:#676767;
word-spacing:normal;
letter-spacing:normal;
text-transform:none;
text-align:left;
text-indent:0px;
text-decoration:none;
line-height:normal;
white-space:normal;
list-style-type:disc;
list-style-image:none;
list-style-position:outside;
}
.s4-wpcell

Applied to TD element that contains the web part table.

.s4-wpcell:hover

Applied to TD element that contains the web part table when the user hovers over the web part. Only used as a parent in descendent selector style statements.

.s4-wpActive

Applied to TD element that contains the web part table when the web part is clicked on in the interface. Only used as a parent in descendent selector style statements.

.s4-wpTopTable

Applied to TABLE element that contains the web part components; child of the 's4-wpcell' TD element.

Found in: LAYOUTS\1033\STYLES\WPEDITMODEV4.CSS (toggle code) 

.ms-SPZone .s4-wpTopTable,.ms-SPZoneSelected .s4-wpTopTable,.ms-SPZone .ms-WPSelected,.ms-SPZoneSelected .ms-WPSelected{
/* [ReplaceColor(themeColor:"Light1")] */
 background-color:#ffffff;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-wpcell .s4-wpTopTable{
border:1px solid transparent;
}
.s4-wpcell-plain .s4-wpTopTable{
border:none;
}
.s4-wpActive .s4-wpTopTable,.s4-wpActive .ms-WPSelected{
/* [ReplaceColor(themeColor:"Accent1-Medium")] */
 border:1px solid #44AFF6;
}
.ms-WPSelected

Assumed that this is applied to the TABLE element that contains the web part components when the web part is selected.

Found in: LAYOUTS\1033\STYLES\WPEDITMODE.CSS (toggle code) 

.ms-WPSelected{
/* [ReplaceColor(themeColor:"Accent4-Lighter")] */
 border:#ffbb77 3px dashed;
}

Found in: LAYOUTS\1033\STYLES\WPEDITMODEV4.CSS (toggle code) 

.ms-SPZone .s4-wpTopTable,.ms-SPZoneSelected .s4-wpTopTable,.ms-SPZone .ms-WPSelected,.ms-SPZoneSelected .ms-WPSelected{
/* [ReplaceColor(themeColor:"Light1")] */
 background-color:#ffffff;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-wpActive .s4-wpTopTable,.s4-wpActive .ms-WPSelected{
/* [ReplaceColor(themeColor:"Accent1-Medium")] */
 border:1px solid #44AFF6;
}

Web Part Title Bar Styles

.ms-WPHeader

Applied to TR element that contains the web part title bar; child of a TABLE (no ID or class) element that is a child of the 's4-wpTopTable' TABLE element. Also used as a parent in descendent selector style statements.

Found in: LAYOUTS\1033\STYLES\mysitelayout.css (toggle code) 

.s4-wpActive .ms-WPHeader{
/* [ReplaceColor(themeColor: "Accent1",themeTint:"0.86")] */
 background-color: #008de9;
background-position: left bottom;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPHeader{
/* [ReplaceColor(themeColor:"Light1")] */
 background-color:#FFFFFF;
}
.ms-WPHeader td

Controls TD elements in a 'ms-WPHeader' TR element.

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

.ms-sitedocs-mysiteviewer .ms-WPHeader td{
border-bottom:1px solid #0070C0;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPHeader td,.ms-fakewptitle{
/* [ReplaceColor(themeColor:"Dark2",themeTint:"0.17")] */
 border-bottom:1px solid #EBEBEB;
border-collapse:collapse;
}
.s4-wpcell:hover .ms-WPHeader td,.s4-wpActive .ms-WPHeader td,.s4-wpcell .ms-WPSelected .ms-WPHeader td{
/* [ReplaceColor(themeColor:"Accent1-Medium")] */
 border-bottom:1px solid #44AFF6;
}
.ms-wpTdSpace

Applied to TD elements that are the first and last cells in the web part title bar to provide spacing to the right and left of the title text; children of the 'ms-WPHeader' TR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPHeader .ms-wpTdSpace{
width:5px;
border-bottom:1px solid transparent;
}
.s4-wpcell:hover .ms-WPHeader .ms-wpTdSpace{
border-bottom:1px solid transparent;
}
.ms-WPHeaderTd

Applied to TD element that contains the title text; child of the 'ms-WPHeader' TR element. In OOTB SharePoint, no style statements exist that use this class name.

.ms-WPTitle

Applied to H3 element that wraps the title text; child of the 'ms-WPHeaderTd' TD element. Applied in conjunction with the 'ms-standardheader' class.

Found in: LAYOUTS\1033\STYLES\mysitelayout.css (toggle code) 

.ms-WPTitle{
color:#003759;
font-size:1.3em;
}

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

.ms-sitedocs-mysiteviewer .ms-WPTitle{
color:#4c4c4c;
font-family:tahoma,sans-serif;
font-size:10pt;
font-weight:bold;
padding:2px 7px 2px 3px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPTitle{
font-weight:normal;
font-family:Verdana,Tahoma,sans-serif;
padding-left:0px;
padding-right:4px;
padding-top:4px;
padding-bottom:5px;
font-size:10pt;
}
.s4-wpcell .ms-WPTitle,.s4-wpActive .ms-WPTitle{
cursor:pointer;
}
.ms-WPTitle,.ms-WPTitle a{
/* [ReplaceColor(themeColor:"Hyperlink")] */
 color:#0072bc;
}
.s4-wpActive .ms-WPTitle,.s4-wpActive .ms-WPTitle a{
/* [ReplaceColor(themeColor:"Hyperlink",themeShade:"0.80")] */
 color:#003759;
}
.ms-WPTitle a

Controls the ANCHOR elements within the 'ms-WPTitle' H3 element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPTitle,.ms-WPTitle a{
/* [ReplaceColor(themeColor:"Hyperlink")] */
 color:#0072bc;
}
.s4-wpActive .ms-WPTitle,.s4-wpActive .ms-WPTitle a{
/* [ReplaceColor(themeColor:"Hyperlink",themeShade:"0.80")] */
 color:#003759;
}
.ms-WPTitle a:link

Controls the ANCHOR elements within the 'ms-WPTitle' H3 element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPTitle a:link,.ms-WPTitle a:visited{
text-decoration:none;
}
.ms-WPTitle a:visited

Visited state for the ANCHOR elements within the 'ms-WPTitle' H3 element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPTitle a:link,.ms-WPTitle a:visited{
text-decoration:none;
}
.ms-WPTitle a:hover

Hover state for the ANCHOR elements within the 'ms-WPTitle' H3 element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPTitle a:hover{
text-decoration:underline;
}

Web Part Title Bar Styles - Edit Functions

.ms-WPHeaderTdMenu

Applied to TD element that contains the web part edit menu arrow that appears when you hover on the web part title bar; child of the 'ms-WPHeader' TR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPHeaderTdMenu{
width:21px;
cursor:pointer;
word-wrap:normal;
white-space:nowrap;
border:1px solid transparent;
}
.ms-WPMenuDiv

Applied to DIV element that contains the web part edit menu arrow that appears when you hover on the web part title bar; child of the 'ms-WPHeaderTdMenu' TD element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPMenuDiv,.ms-WPMenuDivHover{
white-space:nowrap;
}
.ms-WPMenuDivHover

Applied to DIV element when a user hovers over the web part edit menu arrow in the web part title bar; child of the 'ms-WPHeaderTdMenu' TD element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPMenuDiv,.ms-WPMenuDivHover{
white-space:nowrap;
}
.ms-wpselectlink

Applied to ANCHOR element that wraps the web part edit menu arrow image in the web part title bar; child of the 'ms-WPMenuDiv' DIV element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-wpselectlink,.ms-wpselectlinkfocus{
text-align:center;
}
.ms-wpselectlinkfocus

Applied to ANCHOR element when a user hovers over the web part edit menu arrow image in the web part title bar; child of the 'ms-WPMenuDiv' DIV element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-wpselectlink,.ms-wpselectlinkfocus{
text-align:center;
}
.ms-WPEditText and .ms-WPEditTextVisible

Applied to ANCHOR element when a user selects the web part edit menu arrow image in the web part title bar; child of the 'ms-WPMenuDiv' DIV element.

Found in: LAYOUTS\1033\STYLES\WPEDITMODE.CSS (toggle code) 

A span.ms-WPEditText{
display:inline;
vertical-align:middle;
padding-left:1px;
padding-right:1px;
font-size:8pt;
font-family:verdana,arial,sans-serif;
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#000000;
text-decoration:none;
}
.ms-WPHeaderMenuImg

Applied to IMG element that is the web part edit menu arrow in the web part title bar; child of the 'ms-wpselectlink' ANCHOR element. Image also has an inline style set for the border.

<img style="border-width:0px;" class="ms-WPHeaderMenuImg">

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPHeaderMenuImg{
padding:7px;
visibility:hidden;
vertical-align:middle;
}
.ms-wpselectlinkfocus .ms-WPHeaderMenuImg,.s4-wpcell-plain:hover .ms-WPHeaderMenuImg,.s4-wpcell:hover .ms-WPHeaderMenuImg,.s4-wpActive .ms-WPHeaderMenuImg{
visibility:visible;
}
.ms-WPHeaderTdSelection

Applied to TD element that wraps a web part checkbox that appears when the user hovers over a web part; child of the 'ms-WPHeader' TR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPHeaderTdSelection{
width:21px;
cursor:auto;
text-align:center;
}
.s4-wpcell-plain .ms-WPHeaderTdSelection{
display:none;
}
.ms-WPHeaderTdSelSpan

Applied to SPAN element that contains the web part checkbox that appears when the user hovers over a web part; child of the 'ms-WPHeaderTdSelection' TD element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPHeaderTdSelSpan{
display:inline-block;
}
.ms-WPHeaderCbxHidden

Checkbox that appears when the user hovers over the web part; child of the 'ms-WPHeaderTdSelSpan' SPAN element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPHeaderCbxHidden{
margin:0px;
top:-2000px;
position:absolute;
vertical-align:middle;
}
.ms-WPHeaderCbxVisible

Applied to the web part checkbox when the user hovers over the web part; child of the 'ms-WPHeaderTdSelSpan' SPAN element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-WPHeaderCbxVisible,.s4-wpcell:hover .ms-WPHeaderTdSelection input,.s4-wpActive .ms-WPHeaderTdSelection input{
top:0px;
margin:0px;
position:relative;
vertical-align:middle;
}
.ms-wpContentDivSpace

Applied to DIV element that wraps the web part body table; child of the 's4-wpTopTable' TABLE element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-wpContentDivSpace{
margin-left:5px;
margin-right:5px;
}
Web Part Body Styles

Refer to the Lists section in this chart.

Headers

.ms-standardheader

General usage header; various instances are controlled with descendant selectors to create different styles.

Sample:

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-pageinformation h3.ms-standardheader{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#6f6f6f;
font-size:11pt;
font-family:Verdana;
font-weight:normal;
padding-bottom:4px;
/* [ReplaceColor(themeColor:"Light2",themeShade:"0.02")] */
 border-bottom:1px solid #f1f1f2;
}
.ms-gb h3.ms-standardheader{
margin-top:1em;
margin-bottom:6px;
}
.ms-gb .ms-standardheader{
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#000000;
}
.ms-listeditheader h3.ms-standardheader{
padding:0px 4px 4px;
}
.ms-listedit .ms-standardheader,.ms-listedit .ms-linksectionheader,.ms-listedit .ms-linksectionheader .ms-standardheader{
font-family:Verdana,Tahoma,sans-serif;
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#4c4c4c;
font-size:10pt;
font-weight:normal;
}

Found in: LAYOUTS\1033\STYLES\LAYOUTS.CSS (toggle code) 

.ms-pageinformation h3.ms-standardheader{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#6f6f6f;
font-size:11pt;
font-family:Verdana;
font-weight:normal;
padding-bottom:4px;
/* [ReplaceColor(themeColor:"Light2",themeShade:"0.02")] */
 border-bottom:1px solid #f1f1f2;
}
.ms-gb h3.ms-standardheader{
margin-top:1em;
margin-bottom:6px;
}
.ms-gb .ms-standardheader{
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#000000;
}
.ms-listeditheader h3.ms-standardheader{
padding:0px 4px 4px;
}
.ms-listedit .ms-standardheader,.ms-listedit .ms-linksectionheader,.ms-listedit .ms-linksectionheader .ms-standardheader{
font-family:Verdana,Tahoma,sans-serif;
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#4c4c4c;
font-size:10pt;
font-weight:normal;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-standardheader{
font-size:1em;
margin:0em;
text-align:left;
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#525252;
}
.ms-formlabel h3.ms-standardheader{
font-weight:normal;
color:auto;
}
.ms-linksectionheader .ms-standardheader{
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#000000;
}
.ms-gb .ms-standardheader{
font-weight:normal;
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#000;
}

Lists

.ms-listviewtable

Applied to TABLE element that wraps a list view. Also used as a parent in descendent and child selector style statements.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

td table.ms-listviewtable{
border-collapse:separate;
}
.ms-listviewtable{
outline-style:none;
}
.ms-viewheadertr

Applied to TR element that contains a list view header row. Also used as a parent in descendent and child selector style statements.

Sample:

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-hide-tr >
tbody >
tr.ms-viewheadertr{
display:block;
}
.ms-vhltr and .ms-vhrtl

Applied to TR element as appropriate (left-to-right or right-to-left language display) that contains a list view header row. Only used as a parent in descendent selector style statements.

.ms-vh2-nobg

Applied to TR element that wraps a vertical header row without a background. Used as a parent in descendent selector style statements.

.ms-vh2-nofilter

Applied to TH element that is a vertical header without a filter. Also used as a parent in descendent selector style statements.

Sample:

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-vh2-nofilter{
font-weight:normal;
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#b2b2b2;
text-align:left;
text-decoration:none;
vertical-align:top;
}
.ms-chkperm-list .ms-vh2-nofilter{
background:none;
}
.ms-vh2-nofilter,.ms-vh2-nofilter-notextalign{
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#666;
font-size:8pt;
font-family:Verdana,Arial,sans-serif;
white-space:nowrap;
background-image:url("/_layouts/images/viewheadergrad.gif");
background-repeat:repeat-x;
padding:3px 8px 0px 3px;
height:20px;
/* [ReplaceColor(themeColor:"Light1-Lightest")] */
 background-color:#f2f2f2;
}
th .ms-selectedtitle .ms-vh2-nofilter,th .ms-selectedtitle .ms-vh2-nofilter a{
/* [ReplaceColor(themeColor:"Dark1-Darker")] */
 color:#4c4c4c;
}
.ms-viewlsts th.ms-vh2-nofilter{
/* [ReplaceColor(themeColor:"Dark2-Darker")] */
 color:#3b4f65 !important;
}
.ms-listedit .ms-gb .ms-vh2-nofilter,.ms-listedit .ms-gb .ms-vh2{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#003759;
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:#f5f5f5;
background-image:none;
padding-left:4px;
}

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-propertysheet th.ms-vh2,.ms-propertysheet th.ms-vh2-nofilter{
font-family:tahoma;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-ph{
font-weight:normal;
color:#b2b2b2;
text-align:left;
text-decoration:none;
vertical-align:top;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-GRFont,.ms-vb-user,table.ms-disc td,.ms-vh2-nofilter,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
font-family:tahoma,sans-serif;
}
.ms-vh,.ms-vh2,.ms-vh2-nofilter,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-ph{
white-space:nowrap;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-viewheadertr .ms-vh-group,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-ph,.ms-pickerresultheadertr{
background-image:url('/_layouts/images/viewheadergrad.gif');
background-repeat:repeat-x;
padding-top:1px;
padding-bottom:0px;
background-color:#f2f2f2;
}

Found in: LAYOUTS\1033\STYLES\LAYOUTS.CSS (toggle code) 

.ms-vh2-nofilter{
font-weight:normal;
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#b2b2b2;
text-align:left;
text-decoration:none;
vertical-align:top;
}
.ms-chkperm-list .ms-vh2-nofilter{
background:none;
}
.ms-vh2-nofilter,.ms-vh2-nofilter-notextalign{
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#666;
font-size:8pt;
font-family:Verdana,Arial,sans-serif;
white-space:nowrap;
background-image:url("/_layouts/images/viewheadergrad.gif");
background-repeat:repeat-x;
padding:3px 8px 0px 3px;
height:20px;
/* [ReplaceColor(themeColor:"Light1-Lightest")] */
 background-color:#f2f2f2;
}
th .ms-selectedtitle .ms-vh2-nofilter,th .ms-selectedtitle .ms-vh2-nofilter a{
/* [ReplaceColor(themeColor:"Dark1-Darker")] */
 color:#4c4c4c;
}
.ms-viewlsts th.ms-vh2-nofilter{
/* [ReplaceColor(themeColor:"Dark2-Darker")] */
 color:#3b4f65 !important;
}
.ms-listedit .ms-gb .ms-vh2-nofilter,.ms-listedit .ms-gb .ms-vh2{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#003759;
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:#f5f5f5;
background-image:none;
padding-left:4px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-propertysheet th.ms-vh2,.ms-propertysheet th.ms-vh2-nofilter{
font-family:tahoma;
}
.ms-vh2-nobg .ms-vh2-nofilter{
background:none;
}
.ms-vh2-nofilter a

Controls ANCHOR elements within a vertical header without a filter.

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-vh2-nofilter a,.ms-vh2-nofilter-notextalign a{
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#7f7f7f;
text-decoration:none;
}
.ms-vh2-nofilter a{
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#808080;
}
th .ms-selectedtitle .ms-vh2-nofilter,th .ms-selectedtitle .ms-vh2-nofilter a{
/* [ReplaceColor(themeColor:"Dark1-Darker")] */
 color:#4c4c4c;
}

Found in: LAYOUTS\1033\STYLES\LAYOUTS.CSS (toggle code) 

.ms-vh2-nofilter a,.ms-vh2-nofilter-notextalign a{
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#7f7f7f;
text-decoration:none;
}
.ms-vh2-nofilter a{
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#808080;
}
th .ms-selectedtitle .ms-vh2-nofilter,th .ms-selectedtitle .ms-vh2-nofilter a{
/* [ReplaceColor(themeColor:"Dark1-Darker")] */
 color:#4c4c4c;
}
.s4-selectAllCbx

Checkbox to select all list items. In OOTB SharePoint, no style statements exist that use this class name

Sample:
.ms-vh

Applied to TH element that is vertical header text - variation 1; various instances are controlled with descendant selectors; widely used across SharePoint.

Properties are spread out across several style declarations.

Found in: LAYOUTS\1033\STYLES\OWSNOCR.CSS (toggle code) 

.ms-vh{
font-family:verdana;
font-size:.68em;
/* [ReplaceColor(themeColor:"Dark1-Lightest")] */
 color:#808080;
text-align:left;
text-decoration:none;
font-weight:normal;
vertical-align:top;
}

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-ph{
font-weight:normal;
color:#b2b2b2;
text-align:left;
text-decoration:none;
vertical-align:top;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-GRFont,.ms-vb-user,table.ms-disc td,.ms-vh2-nofilter,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
font-family:tahoma,sans-serif;
}
.ms-vh,.ms-vh2,.ms-vh2-nofilter,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-ph{
white-space:nowrap;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-viewheadertr .ms-vh-group,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-ph,.ms-pickerresultheadertr{
background-image:url('/_layouts/images/viewheadergrad.gif');
background-repeat:repeat-x;
padding-top:1px;
padding-bottom:0px;
background-color:#f2f2f2;
}

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

th.ms-vh{
font-size: 8pt;
font-family: tahoma, verdana, arial, helvetica, sans-serif;
text-decoration: none;
vertical-align: top;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-vh,.ms-vh2,.ms-vh-icon-empty,.ms-vhImage,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-ph{
font-weight:normal;
/* [ReplaceColor(themeColor:"Light1-Medium")] */
 color:#b2b2b2;
text-align:left;
text-decoration:none;
vertical-align:top;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-vb-user,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
line-height:1.2;
font-family:Verdana,Helvetica,sans-serif;
}
.ms-vh,.ms-vh2,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-ph{
white-space:nowrap;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh2-nofilter-icon,.ms-viewheadertr .ms-vh-group,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-ph,.ms-pickerresultheadertr{
background-repeat:repeat-x;
padding-top:1px;
padding-bottom:0px;
}
.ms-vh .ms-vh{
background-image:none;
border-left:none;
padding-left:1px;
background-color:transparent;
}
.ms-vh,.ms-vh2{
height:21px;
}
.ms-vhltr .ms-vh,.ms-vhltr .ms-vh2{
padding-right:16px !important;
}
.ms-vhrtl .ms-vh,.ms-vhrtl .ms-vh2{
text-align:right !important ;
padding-left:16px !important;
}
.ms-vh,.ms-vh2,.ms-vh a,.ms-vh2 a{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#003759;
}
tr.ms-viewheadertr >
th.ms-vh,tr.ms-viewheadertr >
th.ms-vh2{
border:1px solid transparent;
border-top-width:0px;
border-right-width:0px;
}

Found in: LAYOUTS\1033\STYLES\SEARCH.CSS (toggle code) 

th.ms-vh{
font-size:8pt;
font-family:tahoma,verdana,arial,helvetica,sans-serif;
text-decoration:none;
vertical-align:top;
}
.ms-vh a

Controls ANCHOR elements within vertical header text, variation 1.

Found in: LAYOUTS\1033\STYLES\OWSNOCR.CSS (toggle code) 

.ms-vh a{
/* [ReplaceColor(themeColor:"Dark1-Lightest")] */
 color:#808080;
text-decoration:none;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-vh a,.ms-vh a:visited,.ms-vh2 a{
/* [ReplaceColor(themeColor:"Dark1-Lightest")] */
 color:#7f7f7f;
text-decoration:none;
}
.ms-vh,.ms-vh2,.ms-vh a,.ms-vh2 a{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#003759;
}
.ms-vh2

Applied to TH element that is vertical header text - variation 2; various instances are controlled with descendant selectors; widely used across SharePoint.

Sample:

Properties are spread out across several style declarations.

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-listedit .ms-gb .ms-vh2-nofilter,.ms-listedit .ms-gb .ms-vh2{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#003759;
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:#f5f5f5;
background-image:none;
padding-left:4px;
}

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-listviewtable .ms-vh2,.ms-summarystandardbody .ms-vh2{
padding:1px 1px 0px 1px;
}
.ms-propertysheet th.ms-vh2,.ms-propertysheet th.ms-vh2-nofilter{
font-family:tahoma;
}
.ms-listviewtable .ms-vh2,.ms-summarystandardbody .ms-vh2{
padding:1px 1px 0px 1px;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-ph{
font-weight:normal;
color:#b2b2b2;
text-align:left;
text-decoration:none;
vertical-align:top;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-GRFont,.ms-vb-user,table.ms-disc td,.ms-vh2-nofilter,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
font-family:tahoma,sans-serif;
}
.ms-vh,.ms-vh2,.ms-vh2-nofilter,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-ph{
white-space:nowrap;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-viewheadertr .ms-vh-group,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-ph,.ms-pickerresultheadertr{
background-image:url('/_layouts/images/viewheadergrad.gif');
background-repeat:repeat-x;
padding-top:1px;
padding-bottom:0px;
background-color:#f2f2f2;
}

Found in: LAYOUTS\1033\STYLES\LAYOUTS.CSS (toggle code) 

.ms-listedit .ms-gb .ms-vh2-nofilter,.ms-listedit .ms-gb .ms-vh2{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#003759;
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:#f5f5f5;
background-image:none;
padding-left:4px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-propertysheet th.ms-vh2,.ms-propertysheet th.ms-vh2-nofilter{
font-family:tahoma;
}
.ms-listviewtable .ms-vh2,.ms-summarystandardbody .ms-vh2{
padding:1px 1px 0px 1px;
}
.ms-vh,.ms-vh2,.ms-vh-icon-empty,.ms-vhImage,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-ph{
font-weight:normal;
/* [ReplaceColor(themeColor:"Light1-Medium")] */
 color:#b2b2b2;
text-align:left;
text-decoration:none;
vertical-align:top;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-vb-user,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
line-height:1.2;
font-family:Verdana,Helvetica,sans-serif;
}
.ms-vh,.ms-vh2,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-ph{
white-space:nowrap;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh2-nofilter-icon,.ms-viewheadertr .ms-vh-group,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-ph,.ms-pickerresultheadertr{
background-repeat:repeat-x;
padding-top:1px;
padding-bottom:0px;
}
.ms-disc .ms-viewheadertr th.ms-vh2{
padding:1px 5px 0px 4px;
}
.ms-vh2,.ms-ph{
padding:3px 8px 1px;
}
.ms-vh,.ms-vh2{
height:21px;
}
.ms-vhltr .ms-vh,.ms-vhltr .ms-vh2{
padding-right:16px !important;
}
.ms-vhrtl .ms-vh,.ms-vhrtl .ms-vh2{
text-align:right !important ;
padding-left:16px !important;
}
.ms-vh,.ms-vh2,.ms-vh a,.ms-vh2 a{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#003759;
}
tr.ms-viewheadertr >
th.ms-vh,tr.ms-viewheadertr >
th.ms-vh2{
border:1px solid transparent;
border-top-width:0px;
border-right-width:0px;
}
.ms-vh2:hover

Hover state for the 'ms-vh2' class.

Sample:

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

tr.ms-viewheadertr >
th.ms-vh:hover,tr.ms-viewheadertr >
th.ms-vh2:hover{
/* [ReplaceColor(themeColor:"Light2-Lighter")] */
 border-color:#e2e2e2;
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:#f6f6f6;
}
.ms-vh2 a

Controls ANCHOR elements within vertical header text, variation 2.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-vh a,.ms-vh a:visited,.ms-vh2 a{
/* [ReplaceColor(themeColor:"Dark1-Lightest")] */
 color:#7f7f7f;
text-decoration:none;
}
.ms-vh,.ms-vh2,.ms-vh a,.ms-vh2 a{
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#003759;
}
.ms-vh-icon

Container for icon in a vertical header.

Sample:

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-vh-icon{
padding-left:6px;
padding-right:4px;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-ph{
font-weight:normal;
color:#b2b2b2;
text-align:left;
text-decoration:none;
vertical-align:top;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-GRFont,.ms-vb-user,table.ms-disc td,.ms-vh2-nofilter,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
font-family:tahoma,sans-serif;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh2-nofilter,.ms-vh2-nofilter-icon,.ms-viewheadertr .ms-vh-group,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-ph,.ms-pickerresultheadertr{
background-image:url('/_layouts/images/viewheadergrad.gif');
background-repeat:repeat-x;
padding-top:1px;
padding-bottom:0px;
background-color:#f2f2f2;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-vh-icon{
vertical-align:middle;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-vb-user,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
line-height:1.2;
font-family:Verdana,Helvetica,sans-serif;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh2-nofilter-icon,.ms-viewheadertr .ms-vh-group,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-ph,.ms-pickerresultheadertr{
background-repeat:repeat-x;
padding-top:1px;
padding-bottom:0px;
}
.ms-vh-icon,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon{
width:12px;
}
.ms-vh-icon{
padding-left:6px;
padding-right:4px;
padding-bottom:3px;
}
.ms-vh-div

Applied to DIV element that wraps some of the vertical header components. Also used as a parent in descendent selector style statements.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-vh-div{
padding-top:5px;
}
.ms-gb

Applied to TD element that wraps a list title bar - variation 1. Also used as a parent in descendent selector style statements.

Sample:

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-naveditor .ms-gb{
padding:3px 3px 0 3px;
height:22px;
}
.ms-naveditor .ms-gb{
border-top:0;
}
.ms-listedit .ms-gb{
/* [ReplaceColor(themeColor:"Light2-Lightest")] */
 border-top-color:#b5bdc7;
font-weight:normal;
}

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-GRFont,.ms-vb-user,table.ms-disc,.ms-pb,.ms-pb-selected td{
color:#000000;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-GRFont,.ms-vb-user,table.ms-disc td,.ms-vh2-nofilter,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
font-family:tahoma,sans-serif;
}

Found in: LAYOUTS\1033\STYLES\LAYOUTS.CSS (toggle code) 

.ms-naveditor .ms-gb{
padding:3px 3px 0 3px;
height:22px;
}
.ms-naveditor .ms-gb{
border-top:0;
}
.ms-listedit .ms-gb{
/* [ReplaceColor(themeColor:"Light2-Lightest")] */
 border-top-color:#b5bdc7;
font-weight:normal;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-gb,.ms-gb2,.ms-gbload,.ms-vb-tall,.ms-vb-user,.ms-pb,.ms-pb-selected td{
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#000000;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-vb-user,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
line-height:1.2;
font-family:Verdana,Helvetica,sans-serif;
}
.ms-gb{
height:22px;
/* [ReplaceColor(themeColor:"Light1")] */
 background-color:#ffffff;
font-weight:bold;
/* [ReplaceColor(themeColor:"Accent3-Lighter")] */
 border-bottom:1px solid #8ebbf5;
/* [ReplaceColor(themeColor:"Light1-Lightest")] */
 border-top:1px solid #f9f9f9;
padding-bottom:3px;
}
.ms-listviewtable .ms-gb,.ms-listviewtable .ms-gb2{
padding-top:14px;
}
.ms-gb{
padding-bottom:1px;
/* [ReplaceColor(themeColor:"Light2-Medium")] */
 border-bottom-color:#b5bdc7;
}
.ms-gb a

Controls ANCHOR elements within title bars - variation 1.

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-gb a,.ms-gb2 a{
color:#003399;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-gb a,.ms-gb2 a{
/* [ReplaceColor(themeColor:"Accent3")] */
 color:#003399;
}
.ms-gb2

Applied to TD element that wraps a list title bar - variation 2. Also used as a parent in descendent selector style statements.

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-GRFont,.ms-vb-user,table.ms-disc,.ms-pb,.ms-pb-selected td{
color:#000000;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-GRFont,.ms-vb-user,table.ms-disc td,.ms-vh2-nofilter,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
font-family:tahoma,sans-serif;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-gb,.ms-gb2,.ms-gbload,.ms-vb-tall,.ms-vb-user,.ms-pb,.ms-pb-selected td{
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#000000;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-vb-user,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
line-height:1.2;
font-family:Verdana,Helvetica,sans-serif;
}
.ms-listviewtable .ms-gb,.ms-listviewtable .ms-gb2{
padding-top:14px;
}
.ms-gb2{
height:22px;
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#4c4c4c;
padding-bottom:3px;
/* [ReplaceColor(themeColor:"Accent3-Lightest")] */
 border-bottom:1px solid #e3efff;
/* [ReplaceColor(themeColor:"Light1-Lightest")] */
 border-top:1px solid #f9f9f9;
}
.ms-gb2 a

Controls ANCHOR elements within title bars - variation 2.

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-gb a,.ms-gb2 a{
color:#003399;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-gb a,.ms-gb2 a{
/* [ReplaceColor(themeColor:"Accent3")] */
 color:#003399;
}
.ms-itmhover

Applied to TR elements in a list. Only used as a parent in descendent and child selector style statements.

tr.ms-itmhover:hover

Hover state for the 'ms-itmhover' class. Also used as a parent in descendent and child selector style statements.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

tr.s4-itm-hover,tr.ms-itmhover:hover,tr.ms-ppanerow:hover >
td,tr.ms-ppanerowalt:hover >
td{
/* [RecolorImage(themeColor:"Light1")] */
 background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Accent1",themeTint:"0.15")] */
 background-color:#f2faff;
cursor:pointer;
}
tr.ms-itmhover:hover > td

Controls TD element treatment when the user hovers over the list item row.

Sample:

Text treatment is the 'tr.ms-itmhover a:hover' style statement.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

tr.s4-itm-hover >
td,tr.ms-itmhover:hover >
td{
/* [ReplaceColor(themeColor:"Accent1-Lightest")] */
 border-top-color:#c6e5f8 !important;
/* [ReplaceColor(themeColor:"Accent1-Lighter")] */
 border-bottom-color:#91cdf2 !important;
}
.ms-alternating

Applied to alternating TR elements in a list.

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-alternating{
border-color:#FFFFFF;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-basictable .ms-alternating{
background-color:transparent;
}
.ms-alternating{
/* [ReplaceColor(themeColor:"Light1")] */
 background-color:#fff;
}
.ms-allContentFileDlgView .ms-alternating{
background-color:#f2f6fa;
}
.ms-vb-firstCell

Applied to TD element that is the first table cell in a list row.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

table.ms-listviewtable tbody tr td.ms-vb-firstCell{
border-left:1px solid transparent;
}
table.ms-listviewtable tbody tr.s4-itm-hover td.ms-vb-firstCell,table.ms-listviewtable tbody tr.ms-itmhover:hover td.ms-vb-firstCell{
/* [ReplaceColor(themeColor:"Accent1-Lightest")] */
 border-left-color:#c6e5f8;
}
table.ms-listviewtable tbody tr.s4-itm-selected td.ms-vb-firstCell,table.ms-listviewtable tbody tr.s4-itm-selected:hover td.ms-vb-firstCell{
/* [ReplaceColor(themeColor:"Accent1-Lighter")] */
 border-left-color:#9dcdeb;
}
.ms-vb-lastCell

Applied to TD element that is the last table cell in a list row.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

table.ms-listviewtable tbody tr td.ms-vb-lastCell{
border-right:1px solid transparent;
}
table.ms-listviewtable tbody tr.s4-itm-hover td.ms-vb-lastCell,table.ms-listviewtable tbody tr.ms-itmhover:hover td.ms-vb-lastCell{
/* [ReplaceColor(themeColor:"Accent1-Lightest")] */
 border-right-color:#c6e5f8;
}
table.ms-listviewtable tbody tr.s4-itm-selected td.ms-vb-lastCell,table.ms-listviewtable tbody tr.s4-itm-selected:hover td.ms-vb-lastCell{
/* [ReplaceColor(themeColor:"Accent1-Lighter")] */
 border-right-color:#91cdf2;
}
.ms-vb-itmcbx

Applied to TD element that wraps an item checkbox that appears when the user hovers over a list item (must be enabled on the list).

Sample:

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-vb-itmcbx{
padding-left:5px;
padding-right:4px;
vertical-align:top;
}
.s4-itm-cbx

Checkbox that appears when the user hovers over a list item (must be enabled on the list).

Sample:

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-itm-cbx,.s4-itm-inlineedit{
top:-2000px;
position:absolute;
}
.s4-itm-hover .s4-itm-cbx,.ms-itmhover:hover .s4-itm-cbx,.s4-itm-selected .s4-itm-cbx,.ms-inlineEditLink .s4-itm-inlineedit,.ms-itmhover:hover .s4-itm-inlineedit,.s4-itm-hover .s4-itm-inlineedit,.s4-itm-selected .s4-itm-inlineedit{
top:0px;
position:relative;
}
.ms-vb

Vertical body text - variation 1; various instances are controlled with descendant selectors; widely used across SharePoint.

Sample:

Properties are spread out across several style declarations.

Found in: LAYOUTS\1033\STYLES\GROUPBOARD.CSS (toggle code) 

.ms-gb-vb-title .ms-unselectedtitle .ms-vb{
padding-right:0px;
padding-left:0px;
}

Found in: LAYOUTS\1033\STYLES\mysitelayout.css (toggle code) 

.ms-vb, .ms-descriptiontext{
font-family: verdana! important;
}

Found in: LAYOUTS\1033\STYLES\OWSNOCR.CSS (toggle code) 

.ms-vb{
font-family:verdana;
font-size:.68em;
height:18px;
vertical-align:top;
}

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-vb,.ms-vb2,.ms-GRFont,.ms-vb-user,table.ms-disc td,.ms-vb-tall,.ms-pb,.ms-pb-selected{
vertical-align:top;
}
.ms-vb-title .ms-vb{
padding-top:2px;
padding-right:1px;
padding-bottom:5px;
padding-left:6px;
}
.ms-vb-title .ms-selectedtitle .ms-vb{
padding-top:1px;
padding-right:0px;
padding-bottom:4px;
padding-left:5px;
}
.ms-vh2 .ms-selectedtitle .ms-vb,.ms-vh2 .ms-unselectedtitle .ms-vb{
padding-left:5px;
padding-right:5px;
padding-top:1px;
}
.ms-vh-icon .ms-selectedtitle .ms-vb,.ms-vh-icon .ms-unselectedtitle .ms-vb{
padding-left:0px;
padding-right: 0px;
vertical-align:middle;
}
.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-GRFont,.ms-vb-user,table.ms-disc,.ms-pb,.ms-pb-selected td{
color:#000000;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-GRFont,.ms-vb-user,table.ms-disc td,.ms-vh2-nofilter,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
font-family:tahoma,sans-serif;
}

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

td.ms-vb{
font-size: 8pt;
font-family: tahoma, verdana, arial, helvetica, sans-serif;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-bottompaging .ms-vb{
/* [ReplaceColor(themeColor:"Light1")] */
 background-color:#ffffff;
}
.ms-vh2 .ms-selectedtitle .ms-vb,.ms-vh2 .ms-unselectedtitle .ms-vb{
padding-left:5px;
padding-right:5px;
padding-top:1px;
}
.ms-vh-icon .ms-selectedtitle .ms-vb,.ms-vh-icon .ms-unselectedtitle .ms-vb{
padding-left:0px;
vertical-align:middle;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-vb-user,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
line-height:1.2;
font-family:Verdana,Helvetica,sans-serif;
}
.ms-disc .ms-vh2 .ms-selectedtitle .ms-vb,.ms-disc .ms-vh2 .ms-unselectedtitle .ms-vb{
padding-left:4px;
}
.ms-vb,.ms-vb2,.ms-vb-user,.ms-vb-tall,.ms-pb,.ms-pb-selected{
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#6d6f72;
vertical-align:top;
}
.ms-vb-title .ms-vb{
padding-top:2px;
padding-right:6px;
padding-bottom:3px;
padding-left:2px;
}
th .ms-vb,.ms-vh2-nofilter-icon,th.ms-vh2-nograd,th.ms-vh2-nograd-icon{
/* [ReplaceColor(themeColor:"Dark2-Darker")] */
 color:#666666;
font-size:8pt;
font-family:Verdana,Helvetica,sans-serif;
}
th .ms-selectedtitle .ms-vb,th .ms-selectedtitle .ms-vh2-nofilter-icon,th .ms-selectedtitle .ms-vb a,th .ms-selectedtitle .ms-vh2-nofilter-icon a{
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#4c4c4c;
}

Found in: LAYOUTS\1033\STYLES\SEARCH.CSS (toggle code) 

td.ms-vb{
font-size:8pt;
font-family:tahoma,verdana,arial,helvetica,sans-serif;
}
.ms-vb a

Controls ANCHOR elements within vertical body text, variation 1.

Found in: LAYOUTS\1033\STYLES\OWSNOCR.CSS (toggle code) 

.ms-vb a{
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#3366cc;
text-decoration:none;
}

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-vb a,.ms-vb2 a,.ms-GRStatusText a,.ms-vb-user a,.ms-disc a{
color:#003399;
text-decoration:none;
}

Found in: LAYOUTS\1033\STYLES\PORTAL.CSS (toggle code) 

.ms-vb a{
color:#003399 text-decoration:none;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

th .ms-vb a,.ms-vh2-nofilter-icon a{
/* [ReplaceColor(themeColor:"Dark1-Lightest")] */
 color:#808080;
}
th .ms-selectedtitle .ms-vb,th .ms-selectedtitle .ms-vh2-nofilter-icon,th .ms-selectedtitle .ms-vb a,th .ms-selectedtitle .ms-vh2-nofilter-icon a{
/* [ReplaceColor(themeColor:"Dark1-Medium")] */
 color:#4c4c4c;
}

Found in: LAYOUTS\1033\STYLES\SEARCH.CSS (toggle code) 

.ms-vb a{
color:#039;
text-decoration:none;
}
.ms-vb2

Vertical body text - variation 2; various instances are controlled with descendant selectors; widely used across SharePoint.

Sample:

Properties are spread out across several style declarations.

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-viewlsts .ms-vb-icon,.ms-viewlsts .ms-vb2{
vertical-align:middle;
}
.ms-listedit .ms-vb2{
padding-left:4px;
}

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-vb,.ms-vb2,.ms-GRFont,.ms-vb-user,table.ms-disc td,.ms-vb-tall,.ms-pb,.ms-pb-selected{
vertical-align:top;
}
.ms-vb2{
padding-top:3px;
padding-left:8px;
padding-right:8px;
padding-bottom:4px;
}
.ms-listviewtable .ms-vb2,.ms-summarystandardbody .ms-vb2{
padding-left:7px;
padding-right:7px;
}
.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-GRFont,.ms-vb-user,table.ms-disc,.ms-pb,.ms-pb-selected td{
color:#000000;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-GRFont,.ms-vb-user,table.ms-disc td,.ms-vh2-nofilter,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
font-family:tahoma,sans-serif;
}

Found in: LAYOUTS\1033\STYLES\LAYOUTS.CSS (toggle code) 

.ms-viewlsts .ms-vb-icon,.ms-viewlsts .ms-vb2{
vertical-align:middle;
}
.ms-listedit .ms-vb2{
padding-left:4px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-listviewtable .ms-vb2,.ms-summarystandardbody .ms-vb2{
padding-left:2px;
padding-right:7px;
}
.ms-vh,.ms-vh2,.ms-vh-icon,.ms-vh-icon-empty,.ms-vhImage,.ms-gb,.ms-gb2,.ms-gbload,.ms-vb,.ms-vb2,.ms-vb-tall,.ms-vb-user,.ms-vh2-nograd,.ms-vh3-nograd,.ms-vh2-nograd-icon,.ms-vh2-nofilter-icon,.ms-pb,.ms-pb-selected,.ms-ph{
font-size:8pt;
line-height:1.2;
font-family:Verdana,Helvetica,sans-serif;
}
.ms-gb .ms-vb2{
font-weight:normal;
}
.ms-vb,.ms-vb2,.ms-vb-user,.ms-vb-tall,.ms-pb,.ms-pb-selected{
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#6d6f72;
vertical-align:top;
}
.ms-vb2{
padding-top:4px;
padding-left:0px;
padding-right:8px;
padding-bottom:4px;
}
.ms-naveditor .ms-vb2{
padding:3px 3px 0 3px;
height:22px;
}
.ms-vb2 a

Controls ANCHOR elements within vertical body text, variation 2.

Sample:

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-vb a,.ms-vb2 a,.ms-GRStatusText a,.ms-vb-user a,.ms-disc a{
color:#003399;
text-decoration:none;
}
tr.ms-itmhover a:hover

Hover state for ANCHOR elements within vertical body text.

Sample:

Background treatment is the 'tr.ms-itmhover:hover > td' style statement.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

tr.s4-itm-hover a:hover,tr.ms-itmhover a:hover{
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#003759 !important;
text-decoration:underline !important;
}
.ms-vb-icon

Container for icon in a list item in the body.

Sample:

Found in: LAYOUTS\1033\STYLES\mysitelayout.css (toggle code) 

.ms-vb-icon{
background-color:white;
}

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-viewlsts .ms-vb-icon,.ms-viewlsts .ms-vb2{
vertical-align:middle;
}

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-vb-icon{
vertical-align:top;
width:0%;
padding-top:3px;
padding-left:8px;
padding-right:0px;
padding-bottom:0px;
}

Found in: LAYOUTS\1033\STYLES\LAYOUTS.CSS (toggle code) 

.ms-viewlsts .ms-vb-icon,.ms-viewlsts .ms-vb2{
vertical-align:middle;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-vb-icon{
vertical-align:top;
width:0.01%;
padding-top:4px;
padding-left:8px;
padding-right:8px;
padding-bottom:0px;
}

Found in: LAYOUTS\STYLES\corefixup.css (toggle code) 

.ms-vb-icon{
width:0% !important;
}
.ms-vb-title

Applied to TD element that wraps the item's Title field in the row.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-vb-title{
vertical-align:top;
padding:2px 16px 2px 1px;
}
.s4-ctx

Applied to DIV element that wraps the column header text/item text edit menu arrow that appears when you hover over the column header title/item text.

Sample:

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-ctx{
padding:0px 4px;
position:absolute;
display:block;
}
.s4-ctx-show

Applied to DIV element that wraps the column header text/item text edit menu arrow that appears when you hover over the column header title/item text. This is activated when you hover over the item.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-ctx-show{
/* [RecolorImage(themeColor:"Light1")] */
 background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Accent1",themeTint:"0.15")] */
 background-color:#ccebff;
border-style:solid;
border-width:0px 1px;
/* [ReplaceColor(themeColor:"Accent1-Lighter")] */
 border-color:transparent #91cdf2;
}
tr.s4-itm-selected:hover .s4-ctx-show{
/* [ReplaceColor(themeColor:"Accent1-Medium")] */
 background-color:#62b3e6;
/* [ReplaceColor(themeColor:"Accent1-Darker")] */
 border-right-color:#4b8fbd;
/* [ReplaceColor(themeColor:"Accent1-Darker")] */
 border-left-color:#7ab1d6;
}
tr.ms-viewheadertr >
th:hover .s4-ctx-show{
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:#efefef;
background-image:none;
/* [ReplaceColor(themeColor:"Light2-Lightest")] */
 border:1px solid #e0e0e0;
border-width:0px 1px;
}
.s4-ctx-show:hover

Hover state for the 's4-ctx-show' class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.s4-ctx-show:hover{
/* [ReplaceColor(themeColor:"Accent1-Lighter")] */
 background-color:#72c4fa;
border-color:transparent;
/* [ReplaceColor(themeColor:"Accent1-Darker")] */
 border-right-color:#4b8fbd;
/* [ReplaceColor(themeColor:"Accent1-Darker")] */
 border-left-color:#7ab1d6;
}
tr.s4-itm-selected .s4-ctx-show:hover{
/* [ReplaceColor(themeColor:"Accent1-Lightest",themeShade:"0.53")] */
 background-color:#ccebff;
}
tr.ms-viewheadertr >
th .s4-ctx-show:hover{
/* [RecolorImage(themeColor:"Light1")] */
 background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Light2-Lighter")] */
 background-color:#d9d9d9;
/* [ReplaceColor(themeColor:"Light2-Medium")] */
 border-right-color:#8e8e8e;
/* [ReplaceColor(themeColor:"Light2-Medium")] */
 border-right-color:#b2b2b2;
}
.s4-itm-selected

Applied to TR element for a list item when the user selects the item. Also used as a parent in descendent and child selector style statements.

Sample:

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

tr.s4-itm-selected,tr.s4-itm-selected:hover{
/* [RecolorImage(themeColor:"Light1")] */
 background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Accent1",themeTint:"0.65")] */
 background-color:#98d6fd;
cursor:pointer;
}
.s4-itm-selected:hover

Hover state for the 's4-itm-selected' class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

tr.s4-itm-selected,tr.s4-itm-selected:hover{
/* [RecolorImage(themeColor:"Light1")] */
 background:url("/_layouts/images/selbg.png") repeat-x left top;
/* [ReplaceColor(themeColor:"Accent1",themeTint:"0.65")] */
 background-color:#98d6fd;
cursor:pointer;
}
.ms-partline

Applied to TD element that wraps an image; provides the bottom border between the list view and the Add New Item link.

Sample:

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-partline{
height:3px;
/* [ReplaceColor(themeColor:"Dark2",themeTint:"0.17")] */
 border-bottom:1px solid #EBEBEB;
}
td.ms-addnew

Applied to TD element that wraps an Add New Item link.

Sample:

Found in: LAYOUTS\1033\STYLES\BLOG.CSS (toggle code) 

.ms-BlogNavigator td.ms-addnew{
padding-left:6px;
}

Found in: LAYOUTS\1033\STYLES\Themable\BLOG.CSS (toggle code) 

.ms-BlogNavigator td.ms-addnew{
padding-left:6px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

td.ms-addnew{
padding-left:10px;
padding-right:7px;
padding-top:9px;
}
a.ms-addnew

Applied to ANCHOR element for the Add New Item link.

Sample:

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

a.ms-addnew{
font-weight:normal;
font-family:verdana;
font-size:8pt;
/* [ReplaceColor(themeColor:"Accent1-Darkest")] */
 color:#003399;
text-decoration:none;
}

Forms

.ms-formtoolbar

Applied to TABLE element that contains a form toolbar.

Found in: LAYOUTS\1033\STYLES\FORMS.CSS (toggle code) 

.ms-formtoolbar{
font-family:verdana;
font-size:8pt;
text-decoration:none;
/* [ReplaceColor(themeColor:"Hyperlink")] */
 color:#003399;
}
.ms-formtoolbar{
margin-bottom:7px;
}

Found in: LAYOUTS\1033\STYLES\SiteManagerCustomStyles.css (toggle code) 

.ms-toolbar,.ms-viewtoolbar,.ms-formtoolbar,.ms-toolbarContainer{
font-family:verdana;
font-size:8pt;
text-decoration:none;
color:#3966BF;
}
.ms-formtoolbar td

Controls TD elements in the 'ms-formtoolbar' TABLE element.

Found in: LAYOUTS\1033\STYLES\FORMS.CSS (toggle code) 

.ms-formtoolbar td{
padding:0px;
vertical-align:top;
}
.ms-formtable

Applied to TABLE element that contains a form. In OOTB SharePoint, no style statements exist that use this class name.

.ms-formlabel

Applied to TD element that contains a form label; child of the 'ms-formtable' TABLE element.

Found in: LAYOUTS\1033\STYLES\FORMS.CSS (toggle code) 

.ms-formlabel{
text-align:left;
font-family:verdana;
/* [ReplaceColor(themeColor:"Light1-Darker")] */
 border-top:1px solid #d8d8d8;
padding-top:3px;
padding-right:8px;
padding-bottom:6px;
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#525252;
font-weight:bold;
}

Found in: LAYOUTS\1033\STYLES\OWSNOCR.CSS (toggle code) 

.ms-formlabel{
text-align:left;
font-family:verdana;
font-size:.7em;
font-weight:normal;
/* [ReplaceColor(themeColor:"Dark1-Lightest")] */
 color:#808080;
}

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-formlabel{
text-align:left;
font-family:verdana;
/* [ReplaceColor(themeColor:"Light1-Darker")] */
 border-top:1px solid #d8d8d8;
padding-top:3px;
padding-right:8px;
padding-bottom:6px;
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#525252;
font-weight:bold;
}

Found in: LAYOUTS\1033\STYLES\SURVEY.CSS (toggle code) 

.ms-formlabel{
text-align:left;
font-family:verdana;
font-size:1em;
/* [ReplaceColor(themeColor:"Light1-Lightest")] */
 border-top:1px solid #d8d8d8;
padding-top:3px;
padding-right:8px;
padding-bottom:6px;
/* [ReplaceColor(themeColor:"Dark1-Darker")] */
 color:#525252;
font-weight:bold;
}

Found in: LAYOUTS\1033\STYLES\LAYOUTS.CSS (toggle code) 

.ms-formlabel{
text-align:left;
font-family:verdana;
/* [ReplaceColor(themeColor:"Light1-Darker")] */
 border-top:1px solid #d8d8d8;
padding-top:3px;
padding-right:8px;
padding-bottom:6px;
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#525252;
font-weight:bold;
}

Found in: LAYOUTS\STYLES\corefixup.css (toggle code) 

.ms-formlabel{
border-top:none;
padding:0px;
}
.ms-formbody

Applied to TD element that contains a value for a form field; child of the 'ms-formtable' TABLE element.

Found in: LAYOUTS\1033\STYLES\FORMS.CSS (toggle code) 

.ms-formbody{
vertical-align:top;
/* [ReplaceColor(themeColor:"Light2",themeTint:"0.45")] */
 background:#f6f6f6;
/* [ReplaceColor(themeColor:"Light1-Darker")] */
 border-top:1px solid #d8d8d8;
padding:3px 6px 4px 6px;
}

Found in: LAYOUTS\1033\STYLES\OWSNOCR.CSS (toggle code) 

.ms-formtable .ms-formbody{
line-height:1.3em;
}
.ms-formbody{
text-align:left;
font-family:verdana;
font-size:.7em;
}

Found in: LAYOUTS\1033\STYLES\SURVEY.CSS (toggle code) 

.ms-formtable .ms-formbody{
line-height:1.3em;
}
.ms-formbody{
font-family:verdana;
font-size:1em;
vertical-align:top;
/* [ReplaceColor(themeColor:"Light1-Lightest")] */
 background:#ebf3ff;
/* [ReplaceColor(themeColor:"Light1-Lighter")] */
 border-top:1px solid #d8d8d8;
padding:3px 6px 4px 6px;
}

Found in: LAYOUTS\STYLES\corefixup.css (toggle code) 

.ms-formbody{
background:transparent;
border:none;
padding:2px 0px;
}
.ms-formline

Applied to TD element that creates a final separator in the form.

Sample:

Found in: LAYOUTS\1033\STYLES\FORMS.CSS (toggle code) 

.ms-formline{
/* [ReplaceColor(themeColor:"Light1-Darker")] */
 border-top:1px solid #c4c4c4;
padding-right:8px;
padding-left:8px;
}
.ms-long

INPUT element.

Sample:

Found in: FEATURES\PublishingLayouts\en-us\edit-mode-21.css (toggle code) 

input.ms-long{
width: 250px;
}

Found in: FEATURES\PublishingLayouts\en-us\zz2_EditMode.css (toggle code) 

input.ms-long{
width:250px;
}

Found in: LAYOUTS\1033\STYLES\BLOG.CSS (toggle code) 

.ms-long{
width:386px;
font-size:8pt;
font-family:Verdana,sans-serif;
}

Found in: LAYOUTS\1033\STYLES\FORMS.CSS (toggle code) 

.ms-long{
width:386px;
font-size:8pt;
font-family:Verdana,sans-serif;
}

Found in: LAYOUTS\1033\STYLES\OWSNOCR.CSS (toggle code) 

.ms-long{
font-size:8pt;
font-family:Verdana,sans-serif;
width:375px;
}

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-long{
width:386px;
font-size:8pt;
font-family:Verdana,sans-serif;
}

Found in: LAYOUTS\1033\STYLES\LAYOUTS.CSS (toggle code) 

.ms-long{
width:386px;
font-size:8pt;
font-family:Verdana,sans-serif;
}

Found in: LAYOUTS\1033\STYLES\Themable\BLOG.CSS (toggle code) 

.ms-long{
width:386px;
font-size:8pt;
font-family:Verdana,sans-serif;
}
.ms-ButtonHeightWidth

Button style.

Sample:

Found in: LAYOUTS\1033\STYLES\BLOG.CSS (toggle code) 

.ms-ButtonHeightWidth{
width:7.5em;
font:8pt tahoma;
height:2.1em;
padding-top:0.1em;
padding-bottom:0.4em;
}

Found in: LAYOUTS\1033\STYLES\Themable\BLOG.CSS (toggle code) 

.ms-ButtonHeightWidth{
width:7.5em;
font:8pt tahoma;
height:2.1em;
padding-top:0.1em;
padding-bottom:0.4em;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-ButtonHeightWidth{
width:14.2em;
font:8pt tahoma;
height:2.1em;
padding-top:0.1em;
padding-bottom:0.4em;
}
.ms-ButtonHeightWidth2

Button style.

Found in: LAYOUTS\1033\STYLES\BLOG.CSS (toggle code) 

.ms-ButtonHeightWidth2{
height:2.1em;
font:8pt tahoma;
width:11.72em;
padding-top:0.1em;
padding-bottom:0.4em;
}

Found in: LAYOUTS\1033\STYLES\Themable\BLOG.CSS (toggle code) 

.ms-ButtonHeightWidth2{
height:2.1em;
font:8pt tahoma;
width:11.72em;
padding-top:0.1em;
padding-bottom:0.4em;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-ButtonHeightWidth2{
height:2.1em;
font:8pt tahoma;
width:21.2em;
padding-top:0.1em;
padding-bottom:0.4em;
}
.ms-NarrowButtonHeightWidth

Button style.

Found in: LAYOUTS\1033\STYLES\PICKERTREE.CSS (toggle code) 

.ms-NarrowButtonHeightWidth{
width:10em;
height:2.1em!Important;
font:8pt tahoma;
}

Found in: LAYOUTS\1033\STYLES\LAYOUTS.CSS (toggle code) 

.ms-NarrowButtonHeightWidth{
width:10em;
height:2.1em!Important;
font:8pt tahoma;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-NarrowButtonHeightWidth{
width:5em;
height:2em;
font:8pt tahoma;
padding:0;
}

Rich Text Editor (RTE) Copy Styles

.ms-rteStyle-Normal

'Normal' style in RTE Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

.ms-rteStyle-Normal{
-ms-name:"Normal";
font-family: Verdana, Arial, sans-serif;
font-size: 8pt;
/* [ReplaceColor(themeColor: "Dark1")] */
 color: #676767;
/* [ReplaceColor(themeColor: "Light1")] */
 background-color: #fff;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-rteStyle-Normal{
-ms-name:"Normal";
font-family:Verdana,Arial,sans-serif;
font-size:8pt;
/* [ReplaceColor(themeColor:"Dark1")] */
 color:#676767;
/* [ReplaceColor(themeColor:"Light1")] */
 background-color:#fff;
}
.ms-rteStyle-Highlight

'Highlight' style in RTE Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

.ms-rteStyle-Highlight{
-ms-name:"Highlight";
/* [ReplaceColor(themeColor: "Dark1-Darker")] */
 color:#312a26;
/* [ReplaceColor(themeColor: "Accent6")] */
 background-color:#fae032;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-rteStyle-Highlight{
-ms-name:"Highlight";
/* [ReplaceColor(themeColor:"Dark1-Darker")] */
 color:#312a26;
/* [ReplaceColor(themeColor:"Accent6")] */
 background-color:#fae032;
}
.ms-rteStyle-Byline

'By line' style in RTE Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

.ms-rteStyle-Byline{
-ms-name:"By Line";
/* [ReplaceColor(themeColor: "Dark1",themeTint:"0.29")] */
 color:#b6b6b6;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-rteStyle-Byline{
-ms-name:"By Line";
/* [ReplaceColor(themeColor:"Dark1",themeTint:"0.29")] */
 color:#b6b6b6;
}
.ms-rteStyle-Tagline

'Tag line' style in RTE Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

.ms-rteStyle-Tagline{
-ms-name:"Tag Line";
font-size:1.3em;
/* [ReplaceColor(themeColor: "Dark1",themeTint:"0.45")] */
 color:#8b8b8b;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-rteStyle-Tagline{
-ms-name:"Tag Line";
font-size:1.3em;
/* [ReplaceColor(themeColor:"Dark1",themeTint:"0.45")] */
 color:#8b8b8b;
}
.ms-rteStyle-Comment

'Comment' style in RTE Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

.ms-rteStyle-Comment{
-ms-name:"Comment";
font-style: italic;
/* [ReplaceColor(themeColor: "Accent5-Darkest")] */
 color:#36b000;
/* [ReplaceColor(themeColor: "Dark1")] */
 text-shadow: 0px 0px 5px #000;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-rteStyle-Comment{
-ms-name:"Comment";
font-style:italic;
/* [ReplaceColor(themeColor:"Accent5-Darkest")] */
 color:#36b000;
/* [ReplaceColor(themeColor:"Dark1")] */
 text-shadow:0px 0px 5px #000;
}
.ms-rteStyle-References

'References' style in RTE Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

.ms-rteStyle-References{
-ms-name:"References";
/* [ReplaceColor(themeColor: "Dark1-Lightest")] */
 color:#828282;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-rteStyle-References{
-ms-name:"References";
/* [ReplaceColor(themeColor:"Dark1-Lightest")] */
 color:#828282;
}
.ms-rteStyle-Caption

'Caption' style in RTE Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

.ms-rteStyle-Caption{
-ms-name:"Caption";
/* [ReplaceColor(themeColor: "Accent3")] */
 color:#00adee;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-rteStyle-Caption{
-ms-name:"Caption";
/* [ReplaceColor(themeColor:"Accent3")] */
 color:#00adee;
}
.ms-rteElement-H1

'Heading 1' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

H1.ms-rteElement-H1{
-ms-name:"Heading 1";
}
.ms-rteElement-H1{
font-size:2em;
font-weight:normal;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

H1.ms-rteElement-H1{
-ms-name:"Heading 1";
}
.ms-rteElement-H1{
font-size:2em;
font-weight:normal;
}
.ms-rteElement-H2

'Heading 2' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

H2.ms-rteElement-H2{
-ms-name:"Heading 2";
}
.ms-rteElement-H2{
font-size:1.3em;
font-weight:normal;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

H2.ms-rteElement-H2{
-ms-name:"Heading 2";
}
.ms-rteElement-H2{
font-size:1.3em;
font-weight:normal;
}
.ms-rteElement-H3

'Heading 3' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

H3.ms-rteElement-H3{
-ms-name:"Heading 3";
}
.ms-rteElement-H3{
font-size:1em;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

H3.ms-rteElement-H3{
-ms-name:"Heading 3";
}
.ms-rteElement-H3{
font-size:1em;
}
.ms-rteElement-H4

'Heading 4' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

H4.ms-rteElement-H4{
-ms-name:"Heading 4";
}
.ms-rteElement-H4{
font-size:1em;
font-weight:normal;
font-style: italic;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

H4.ms-rteElement-H4{
-ms-name:"Heading 4";
}
.ms-rteElement-H4{
font-size:1em;
font-weight:normal;
font-style:italic;
}
.ms-rteElement-H1B

'Colored Heading 1' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

H1.ms-rteElement-H1B{
-ms-name:"Colored Heading 1";
}
.ms-rteElement-H1B{
/* [ReplaceColor(themeColor: "Accent1")] */
 color: #0072bc;
font-size:2em;
font-weight:normal;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

H1.ms-rteElement-H1B{
-ms-name:"Colored Heading 1";
}
.ms-rteElement-H1B{
/* [ReplaceColor(themeColor:"Accent1")] */
 color:#0072bc;
font-size:2em;
font-weight:normal;
}
.ms-rteElement-H2B

'Colored Heading 2' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

H2.ms-rteElement-H2B{
-ms-name:"Colored Heading 2";
}
.ms-rteElement-H2B{
/* [ReplaceColor(themeColor: "Accent2")] */
 color: #CA0078;
font-size:1.3em;
font-weight:normal;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

H2.ms-rteElement-H2B{
-ms-name:"Colored Heading 2";
}
.ms-rteElement-H2B{
/* [ReplaceColor(themeColor:"Accent2")] */
 color:#CA0078;
font-size:1.3em;
font-weight:normal;
}
.ms-rteElement-H3B

'Colored Heading 3' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

H3.ms-rteElement-H3B{
-ms-name:"Colored Heading 3";
}
.ms-rteElement-H3B{
/* [ReplaceColor(themeColor: "Accent3")] */
 color: #0093CA;
font-size:2.2em;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

H3.ms-rteElement-H3B{
-ms-name:"Colored Heading 3";
}
.ms-rteElement-H3B{
/* [ReplaceColor(themeColor:"Accent3")] */
 color:#0093CA;
font-size:2.2em;
}
.ms-rteElement-H4B

'Colored Heading 4' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

H4.ms-rteElement-H4B{
-ms-name:"Colored Heading 4";
}
.ms-rteElement-H4B{
/* [ReplaceColor(themeColor: "Accent5")] */
 color: #058036;
font-size:1em;
font-weight:normal;
font-style: italic;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

H4.ms-rteElement-H4B{
-ms-name:"Colored Heading 4";
}
.ms-rteElement-H4B{
/* [ReplaceColor(themeColor:"Accent5")] */
 color:#058036;
font-size:1em;
font-weight:normal;
font-style:italic;
}
.ms-rteElement-Hr

'Horizontal Rule' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

HR.ms-rteElement-Hr{
-ms-name:"Horizontal Rule";
}
.ms-rteElement-Hr{
/* [ReplaceColor(themeColor: "Light1-Medium")] */
 background-color: #b6b6b6;
height: 1px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

HR.ms-rteElement-Hr{
-ms-name:"Horizontal Rule";
}
.ms-rteElement-Hr{
/* [ReplaceColor(themeColor:"Light1-Medium")] */
 background-color:#b6b6b6;
height:1px;
}
.ms-rteElement-P

'Paragraph' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

P.ms-rteElement-P{
-ms-name:"Paragraph";
}
.ms-rteElement-P{
/* [ReplaceColor(themeColor: "Dark2-Darker")] */
 color:#576170;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

P.ms-rteElement-P{
-ms-name:"Paragraph";
}
.ms-rteElement-P{
/* [ReplaceColor(themeColor:"Dark2-Darker")] */
 color:#576170;
}
.ms-rteElement-Callout1

'Callout 1' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

DIV.ms-rteElement-Callout1{
-ms-name:"Callout 1";
}
.ms-rteElement-Callout1{
color:660000;
background-color:#fef4e4;
float:left;
width:25em;
padding:10px;
border: 1px solid #FD9F08;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

DIV.ms-rteElement-Callout1{
-ms-name:"Callout 1";
}
.ms-rteElement-Callout1{
color:660000;
background-color:#fef4e4;
float:left;
width:25em;
padding:10px;
border:1px solid #FD9F08;
}
.ms-rteElement-Callout2

'Callout 2' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

DIV.ms-rteElement-Callout2{
-ms-name:"Callout 2";
}
.ms-rteElement-Callout2{
color:#353738;
background-color:#f2f2f2;
float:right;
width:25em;
padding:10px;
border: 1px solid #36B000;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

DIV.ms-rteElement-Callout2{
-ms-name:"Callout 2";
}
.ms-rteElement-Callout2{
color:#353738;
background-color:#f2f2f2;
float:right;
width:25em;
padding:10px;
border:1px solid #36B000;
}
.ms-rteElement-Callout3

'Callout 3' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

DIV.ms-rteElement-Callout3{
-ms-name:"Callout 3";
}
.ms-rteElement-Callout3{
font-style: italic;
color:#CA0078;
float:right;
width:25em;
padding:10px;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

DIV.ms-rteElement-Callout3{
-ms-name:"Callout 3";
}
.ms-rteElement-Callout3{
font-style:italic;
color:#CA0078;
float:right;
width:25em;
padding:10px;
}
.ms-rteElement-Callout4

'Callout 4' style in RTE Markup Styles drop down list in Ribbon.

Sample:

Found in: LAYOUTS\1033\STYLES\CONTROLS.CSS (toggle code) 

DIV.ms-rteElement-Callout4{
-ms-name:"Callout 4";
}
.ms-rteElement-Callout4{
color:#005677;
float:right;
width:20em;
padding:10px;
background-color: #d8f4ff;
font-family: Verdana, Geneva, sans-serif;
border: 1px solid #00ADEE;
}

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

DIV.ms-rteElement-Callout4{
-ms-name:"Callout 4";
}
.ms-rteElement-Callout4{
color:#005677;
float:right;
width:20em;
padding:10px;
background-color:#d8f4ff;
font-family:Verdana,Geneva,sans-serif;
border:1px solid #00ADEE;
}

Site Settings

Styles for Site Setting Links

.ms-linksection-level1

Applied to TR element that contains links and other components. Used extensively as a parent in descendent selector style statements.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-linksection-level1{
font-family:verdana;
margin-left:0px;
margin-top:0px;
margin-bottom:2px;
}
.ms-linksection-level1 td

Controls TD elements in a 'ms-linksection-level1' TR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-linksection-level1 td{
padding-left:0px;
padding-bottom:17px;
}
.ms-linksection-level1 h3

Controls H3 elements in a 'ms-linksection-level1' TR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-linksection-level1 h3{
font-size:11pt;
font-weight:normal;
/* [ReplaceColor(themeColor:"Dark1-Lighter")] */
 color:#003759;
margin:0px;
padding:0px;
}
.ms-linksection-level1 h3 a

Controls ANCHOR elements within a H3 element in a 'ms-linksection-level1' TR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-linksection-level1 h3 a{
/* [ReplaceColor(themeColor:"Accent5-Darker")] */
 color:#288400;
}
.ms-linksection-level1 h3 a:hover

Hover effect for '.ms-linksection-level1 h3 a' class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-linksection-level1 h3 a:hover{
text-decoration:underline;
}
.ms-linksection-level1 img

Controls IMG elements in a 'ms-linksection-level1' TR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-linksection-level1 img{
padding:0px 8px 0px 0px;
}
.ms-linksection-level1 ul

Controls UL elements in a 'ms-linksection-level1' TR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-linksection-level1 ul{
margin:0px;
padding:0px;
}
.ms-linksection-level1 ul li

Controls LI elements in a UL element in a 'ms-linksection-level1' TR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-linksection-level1 ul li{
line-height:14px;
list-style:none;
padding-top:1px;
margin-left:0px;
margin-right:0px;
}
.ms-linksection-level1 ul li a

Controls ANCHOR elements within a LI element in a UL element in a 'ms-linksection-level1' TR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-linksection-level1 ul li a{
font-size:8pt;
/* [ReplaceColor(themeColor:"Hyperlink")] */
 color:#0072BC;
}
.ms-linksection-level1 ul li a:hover

Hover effect for '.ms-linksection-level1 ul li a' class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-linksection-level1 ul li a:hover{
text-decoration:underline;
}

Ribbon Container

Nested styles for Ribbon container

#s4-ribbonrow

Applied to outermost parent DIV. Classes are also set (see below). Creates a minimum 43px height and allows groups that cannot be fit into the browser horizontally (after scaling browser window size) to "fall off the edge" of the ribbon; background color appears on some content pages.

Included in master page; must remain in master page for proper Ribbon functionality and modal dialog box styles.

A separate instance of the style is nested in a sub grouping of print only styles. This instance hides the Ribbon from print view.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

body #s4-ribbonrow{
min-height:43px;
/* [ReplaceColor(themeColor:"Dark2",themeShade:"0.9")] */
 background-color:#21374c;
overflow-y:hidden;
}

Found in: LAYOUTS\STYLES\dlgframe.css (toggle code) 

.ms-dialog body #s4-ribbonrow{
background-image:none !important;
}
.ms-dialog-nr body #s4-ribbonrow{
display:none;
}
.s4-ribbonrowhidetitle

Applied to outermost parent '#s4-ribbonrow' DIV in conjunction with s4-pr (both classes are set in the DIV); used by the Ribbon positioning system to convey current Ribbon state; 's4-ribbonrowhidetitle' is the default and is changed when the ECMAScript code initializes.

Included in master page; must remain in master page for proper Ribbon functionality.

No styles are present in OOTB SharePoint. Add your own style statement to hide the Ribbon by default on page load.
.s4-ribbonrowhidetitle {display: none;}

#s4-ribboncont

First nested DIV; child of '#s4-ribbonrow' DIV element. Creates background image (via CSS Sprite) however it doesn't seem to be using this background image. Changes to the style don't affect anything - it may be used on a different SharePoint screen that has not been tested for this specifically.

Included in master page.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

body #s4-ribboncont{
padding:0px;
/* [RecolorImage(themeColor:"Dark2-Darker",includeRectangle{x:0,y:589,width:1,height:20}] */
 background:url("/_layouts/images/bgximg.png") repeat-x -0px -565px;
}
#RibbonContainer

Second nested DIV; child of '#s4-ribboncont' DIV element.

PlaceholderElementId value in 'SPRibbon' control. Sets height to auto when Ribbon is active.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

body #RibbonContainer.loaded{
height:auto !important;
}
#Ribbon

Third nested DIV; child of '#RibbonContainer' DIV element. Set in conjunction with '.ms-cui-ribbon'.

'.ms-cui-ribbon' is assigned as a class to this DIV; styles are provided for this class and none are provided for this ID. This ID can be referenced in custom code to control the upper portion of the Ribbon (tabs and labels), such as adding a background.

.ms-cui-ribbon

Third nested DIV; child of '#RibbonContainer'. Set in conjunction with '#Ribbon'. Also used as a parent selector in descendent selectors for anchors and images.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ribbon,.ms-cui-menu,.ms-cui-toolbar-toolbar{
font-family:"Segoe UI",Tahoma,Verdana,sans-serif;
font-size:8pt;
color:#6c6e70;
}

Ribbon Tab Area

Styles that wrap Ribbon tab area (above Ribbon commands)

Ribbon Prefix Guide

Several style statements reference color codes that are used for the various ribbon tab groups. Here is a legend for these style statements:

-db : Document Libraries (dark blue)
-gr : Link Tools (green)
-lb : List Tools (light blue)
-mg : Picture Tools (pink/magenta)
-or : Editing Tools for Publishing (orange)
-pp : Web Part Tools (purple)
-tl : Table Tools (teal)
-yl : Page Tools for Web Part Pages (yellow)

.ms-cui-ribbonTopBars

Fourth nested DIV; child of 'ms-cui-ribbon' DIV element; used in a descendant selector. Wraps upper Ribbon area where tabs appear.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-toolbar-toolbar .ms-cui-ribbonTopBars .ms-cui-topBar2{
border-bottom:1px solid #868b91;
}
.ms-cui-topBar1

Child DIV of 'ms-cui-ribbonTopBars' DIV element. Applied to a DIV with an inline style of display: none.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-topBar1{
position:absolute;
text-align:center;
width:100%;
}
.ms-cui-qat-container

Child DIV of 'ms-cui-topBar1' DIV element, which is set to display none.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-qat-container{
position:absolute;
left:0px;
top:0px;
}
.ms-cui-topBar2

Fifth nested DIV; child of 'ms-cui-ribbonTopBars' DIV element. When the Ribbon is active and depending on the state, other classes are added in conjunction with this style. The first style statement (.ms-cui-topBar2 with no descendant selector) controls the color of the rule line between the Ribbon tabs and the Ribbon command bar (content) in its default state.

The color of the border can be overridden but what is set for Ribbon specific tools (see below) will take precedence when they are applied.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-topBar2{
/* [ReplaceColor(themeColor:"Dark2-Lighter")] */
 border-bottom:1px solid #cad2db;
height:43px;
}
.ms-cui-toolbar-toolbar .ms-cui-ribbonTopBars .ms-cui-topBar2{
border-bottom:1px solid #868b91;
}
.ms-cui-ct-topBar-db, .ms-cui-ct-topBar-lb, .ms-cui-ct-topBar-tl, .ms-cui-ct-topBar-or, .ms-cui-ct-topBar-gr, .ms-cui-ct-topBar-mg, .ms-cui-ct-topBar-yl, .ms-cui-ct-topBar-pp

Fifth nested DIV; child of 'ms-cui-ribbonTopBars' DIV element; applied in conjunction with 'ms-cui-topBar2' CSS class when a particular set of tools in the tab area has been activated (such as Editing Tools). Each of these classes is referenced as a parent in a style statement using a descendant selector in a unique style statement per listed class (8 style statements total across all listed classes). The following code sample is just one such instance. Please see the Ribbon Prefix Guide for a key to the CSS class names.

The style statement is marked as !important and due to the combination of classes in the statement, the statement controls both the bottom border color that is the rule line between the Ribbon tabs and Ribbon command bar and controls the bottom border of the command bar. This only applies when the given tool set is active in the Ribbon.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-cg-or .ms-cui-cg-i{
border-color:#fd9f08;
}

Parent styles for the three Ribbon tab areas

.ms-cui-jewel-container

First nested DIV inside of 'ms-cui-topBar2' DIV element. Applied to a DIV that also has an inline style of display: none.

This DIV also has an ID of 'jewelcontainer' applied in conjunction with the class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-TabRowLeft,.ms-cui-jewel-container{
float:left;
}
.ms-cui-topBar2 .ms-cui-jewel-container{
margin-top:20px;
padding-right:3px;
}
.ms-cui-jewel-container{
height:23px;
white-space:nowrap;
}
.ms-cui-TabRowLeft

First visible nested DIV inside of 'ms-cui-topBar2' DIV element. Applied to DIV in conjunction with 'ms-siteactionscontainer' class. This DIV element can contain peripheral Ribbon elements - the Site Actions menu, the pop-out breadcrumb menu and the Edit icon is included in OOTB master pages.

If the peripheral elements are moved outside of the Ribbon area in a custom master page, these styles would not apply.

Custom components can be placed in this area.

This DIV also has an ID of 'RibbonContainer-TabRowLeft' applied in conjunction with the class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-TabRowLeft,.ms-cui-QATRowCenter{
float:left;
}
.ms-cui-TabRowLeft{
margin-top:19px;
font-size:0px;
}
.ms-cui-TabRowLeft,.ms-cui-QATRowCenter{
float:left;
}
.ms-cui-TabRowLeft,.ms-cui-jewel-container{
float:left;
}
.ms-cui-tts

Applied to a list (UL) that is a child of 'ms-cui-topBar2' DIV element; List is the Ribbon tabs above the command bar; referenced as a parent for child selectors.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-tts,.ms-cui-tts-scale-1,.ms-cui-tts-scale-2{
display:block;
float:left;
white-space:nowrap;
height:44px;
overflow-y:hidden;
overflow-x:hidden;
margin:0px 0px -1px 0px;
padding:0px;
list-style-type:none;
}

Found in: LAYOUTS\STYLES\dlgframe.css (toggle code) 

.ms-dialog .ms-cui-tts{
padding-left:8px !important;
}
.ms-cui-TabRowRight

Second visible nested DIV inside of 'ms-cui-topBar2' DIV element. Applied to DIV in conjunction with 's4-trc-container' class. This DIV element can contain peripheral Ribbon elements - the Welcome menu is included in OOTB master pages.

If the peripheral elements are moved outside of the Ribbon area in a custom master page, these styles would not apply.

Custom components can be placed in this area.

This DIV also has an ID of 'RibbonContainer-TabRowRight' applied in conjunction with the class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-TabRowRight,.ms-cui-QATRowRight{
float:right;
}
.ms-cui-TabRowRight{
margin-top:0px;
vertical-align:middle;
}
.ms-cui-TabRowRight,.ms-cui-QATRowRight{
float:right;
}
.ms-cui-TabRowRight{
float:right;
}

Main tab (list) navigation in Ribbon

.ms-browseTab

Applied to a list item (LI) in the 'ms-cui-tts' UL element; wraps the anchor for the Browse tab; referenced as a parent in child selector. CSS class is set in CMDUI.XML.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-browseTab.ms-cui-tt-s >
a.ms-cui-tt-a{
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:#fff;
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#23272c !important;
}
.ms-cui-tt

Applied to the list items (LI) in the 'ms-cui-tts' UL element; list items are the tabs in the Ribbon.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-tt,.ms-cui-cg{
display:block;
float:left;
margin:0px 2px 2px 0px;
padding:0px;
list-style-type:none;
height:42px;
}
.ms-cui-ct-ul .ms-cui-tt{
height:auto;
}
.ms-cui-tt-s

Applied to a list item (LI) in the 'ms-cui-tts' UL element; selected tab state. Referenced as a parent for descendant and child selectors in 30 style statements. The following code sample is just one such instance.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-tt-s >
.ms-cui-tt-a{
/* [ReplaceColor(themeColor:"Dark2-Medium")] */
 border-color:#b6babf;
background-color:#fff;
color:#23272c !important;
}
.ms-cui-tt-a

Applied to anchor for tab text; wraps SPAN element that contains tab label; used EXTENSIVELY as a child in descendant selectors; referenced a few times as a parent in descendant selectors.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-browseTab.ms-cui-tt-s >
a.ms-cui-tt-a{
/* [ReplaceColor(themeColor:"Light2")] */
 background-color:#fff;
/* [ReplaceColor(themeColor:"Dark2")] */
 color:#23272c !important;
}
.ms-cui-tt-a{
margin-top:20px;
color:#fff !important;
border:1px solid transparent;
border-bottom:0px;
display:block;
cursor:default;
}
.ms-cui-tt-s >
.ms-cui-tt-a{
/* [ReplaceColor(themeColor:"Dark2-Medium")] */
 border-color:#b6babf;
background-color:#fff;
color:#23272c !important;
}
.ms-cui-tts-scale-2 .ms-cui-tt-a{
width:20px;
overflow:hidden;
}
.ms-cui-ct-ul .ms-cui-tt-a{
margin-top:0px;
border-top:1px solid transparent;
}
.ms-cui-ct-first .ms-cui-tt-a{
border-left:1px solid transparent;
}
.ms-cui-ct-last .ms-cui-tt-a{
border-right:1px solid transparent;
}
.ms-cui-cg-s .ms-cui-tt-a{
color:#23272c !important;
}
.ms-cui-cg-db .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#0072bc;
}
.ms-cui-cg-db .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#0072bc;
}
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#005e9c;
}
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#005e9c;
}
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{
border-left-color:#005e9c;
border-right-color:#005e9c;
}
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-a{
border-color:#005e9c;
border-top-color:#005e9c;
background-color:#99c7e4;
}
.ms-cui-cg-lb .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#00adee;
}
.ms-cui-cg-lb .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#00adee;
}
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#008bbe;
}
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#008bbe;
}
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{
border-left-color:#008bbe;
border-right-color:#008bbe;
}
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-tt-a{
background-color:#b3e9fd;
border-color:#009ed8;
border-top-color:#0098d0;
}
.ms-cui-cg-tl .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#139ab1;
}
.ms-cui-cg-tl .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#139ab1;
}
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#005372;
}
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#005372;
}
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{
border-left-color:#005372;
border-right-color:#005372;
}
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-tt-a{
background-color:#a4dfea;
border-color:#005372;
border-top-color:#005372;
}
.ms-cui-cg-or .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#fd9f08;
}
.ms-cui-cg-or .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#fd9f08;
}
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#bb4f00;
}
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#bb4f00;
}
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{
border-left-color:#bb4f00;
border-right-color:#bb4f00;
}
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-tt-a{
background-color:#ffd899;
border-color:#bb4f00;
border-top-color:#e46b00;
}
.ms-cui-cg-gr .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#26b023;
}
.ms-cui-cg-gr .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#26b023;
}
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#03a200;
}
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#03a200;
}
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{
border-left-color:#03a200;
border-right-color:#03a200;
}
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-a{
background-color:#d0f2bf;
border-color:#56c553;
border-top-color:#56c553;
}
.ms-cui-cg-mg .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#ec008c;
}
.ms-cui-cg-mg .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#ec008c;
}
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#aa0065;
}
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#aa0065;
}
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{
border-left-color:#aa0065;
border-right-color:#aa0065;
}
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-tt-a{
background-color:#e999c9;
border-color:#aa0065;
border-top-color:#bb006f;
}
.ms-cui-cg-yl .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#f2ce00;
}
.ms-cui-cg-yl .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#f2ce00;
}
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#faac32;
}
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#faac32;
}
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{
border-left-color:#faac32;
border-right-color:#faac32;
}
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-tt-a{
background-color:#fdf3ad;
border-color:#f1ba0f;
border-top-color:#f1ba0f;
}
.ms-cui-cg-pp .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#7f33d7;
}
.ms-cui-cg-pp .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#7f33d7;
}
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#5129ad;
}
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-ct-last .ms-cui-tt-a{
border-right-color:#5129ad;
}
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{
border-left-color:#5129ad;
border-right-color:#5129ad;
}
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-tt-a{
background-color:#ccadef;
border-color:#5129ad;
border-top-color:#9330df;
}
.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a{
background-color:#fff;
}
.ms-cui-tt-a:hover

Hover state for 'ms-cui-tt-a'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-tt-a:hover{
/* [ReplaceColor(themeColor:"Dark2",themeTint:"0.8")] */
 border-color:#5a707b;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -1000px;
color:#fff !important;
}
.ms-cui-tt-s .ms-cui-tt-a:hover{
/* [ReplaceColor(themeColor:"Dark2-Medium")] */
 border-color:#b6babf;
background:#f1f1f1 url("/_layouts/images/bgximg.png") repeat-x -0px -976px;
color:#23272c !important;
}
.ms-cui-cg .ms-cui-tt-a:hover{

}
.ms-cui-cg-s .ms-cui-tt-a:hover{
background:url("/_layouts/images/bgximg.png") repeat-x -0px -976px !important;
}
.ms-cui-cg .ms-cui-tt-a:hover,.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover{
color:#fff;
}
.ms-cui-cg-db .ms-cui-tt-a:hover{
border-color:#005e9c;
border-top-color:#0086dd;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -857px;
}
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-a:hover{
background-color:#99c7e4 !important;
border-top-color:#005e9c;
}
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover{
border-color:#005e9c;
background-color:#def0fa !important;
}
.ms-cui-cg-lb .ms-cui-tt-a:hover{
border-color:#55c1e1;
border-top-color:#76cde7;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -682px;
}
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-tt-a:hover{
background-color:#b3e9fd !important;
border-color:#008bbe;
border-top-color:#008bbe;
}
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover{
border-color:#009ed8;
background-color:#e3f5f7 !important;
}
.ms-cui-cg-tl .ms-cui-tt-a:hover{
border-color:#14afcb;
border-top-color:#30cde9;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -807px;
}
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-tt-a:hover{
background-color:#a4dfea !important;
border-color:#005e81;
border-top-color:#005e81;
}
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover{
border-color:#005372;
background-color:#e2f4f7 !important;
}
.ms-cui-cg-or .ms-cui-tt-a:hover{
border-color:#dd8a00;
border-top-color:#c86002;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -757px;
}
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-tt-a:hover{
background-color:#ffd899 !important;
border-color:#c86002;
}
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover{
border-color:#bb4f00;
background-color:#fef4e5 !important;
}
.ms-cui-cg-gr .ms-cui-tt-a:hover{
border-color:#56c553;
border-top-color:#56c553;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -832px;
}
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-a:hover{
background-color:#d0f2bf !important;
border-color:#56c553;
border-top-color:#56c553;
}
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover{
border-color:#03a200;
background-color:#e0f3df !important;
}
.ms-cui-cg-mg .ms-cui-tt-a:hover{
border-color:#bc1b7b;
border-top-color:#ca1d84;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -782px;
}
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-tt-a:hover{
background-color:#e999c9 !important;
}
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover{
border-color:#aa0065;
background-color:#f9e5f2 !important;
}
.ms-cui-cg-yl .ms-cui-tt-a:hover{
border-color:#b38422;
border-top-color:#d99d0e;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -732px;
}
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-tt-a:hover{
background-color:#fdf3ad !important;
border-color:#faac32;
border-top-color:#faac32;
}
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover{
border-color:#faac32;
background-color:#fef9d6 !important;
}
.ms-cui-cg-pp .ms-cui-tt-a:hover{
border-color:#6823b4;
border-top-color:#842ce4;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -707px;
}
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-tt-a:hover{
background-color:#ccadef !important;
border-top-color:#6823b4;
}
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-tt-s .ms-cui-tt-a:hover{
border-color:#5129ad;
background-color:#ede6f6 !important;
}
.ms-cui-tt-span

Tab label. Applied to SPAN element that wraps label text.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-tt-span{
display:block;
padding:4px 10px 4px;
border-top:1px solid transparent;
text-align:center;
}
.ms-cui-tts >
.ms-cui-tt-s >
.ms-cui-tt-a >
.ms-cui-tt-span{
padding-bottom:6px;
}
.ms-cui-tts-scale-1 .ms-cui-tt-span,.ms-cui-tts-scale-1 .ms-cui-cg-t,.ms-cui-tts-scale-2 .ms-cui-tt-span{
padding-left:1px;
padding-right:1px;
}
.ms-cui-ct-ul .ms-cui-tt-span{
padding-top:3px;
}
.ms-cui-ct-ul .ms-cui-tt-a:hover .ms-cui-tt-span{
padding-bottom:4px;
}
.ms-cui-ct-ul .ms-cui-tt-s .ms-cui-tt-span{
padding-bottom:5px !important;
}
.ms-cui-hidden

Applied to SPAN element that is a sister to the SPAN that contains the tab label; hidden from UI; contains text specifying tab count (Tab 1 of 3).

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-hidden{
position:absolute;
top:-2000px;
width:1px;
height:1px;
overflow:hidden;
word-wrap:normal;
}

Nested grouping for tabs based on tab functionality

.ms-cui-cg

Applied to the list items (LI) in the 'ms-cui-tts' UL element that contains a tab group. When the Ribbon is active and depending on the state, other classes are added in conjunction with this style.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-tt,.ms-cui-cg{
display:block;
float:left;
margin:0px 2px 2px 0px;
padding:0px;
list-style-type:none;
height:42px;
}
.ms-cui-cg{
border:1px solid;
border-bottom-width:0px;
height:42px;
border-color:#0f1418;
}
.ms-cui-cg-db, .ms-cui-cg-lb, .ms-cui-cg-tl, .ms-cui-cg-or, .ms-cui-cg-gr, .ms-cui-cg-mg, .ms-cui-cg-yl, .ms-cui-cg-pp

Applied to the list items (LI) in the 'ms-cui-tts' UL element and applied in conjunction with 'ms-cui-cg' CSS class when a particular set of tools in the tab area has been activated (such as Editing Tools). Each of these classes is referenced as a parent in descendant selectors in 14 unique style statements per listed class (112 style statements total across all listed classes). The following code sample is just one such instance. Please see the Ribbon Prefix Guide for a key to the CSS class names.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-cg-or .ms-cui-cg-i{
border-color:#fd9f08;
}
.ms-cui-cg-s

Applied to the selected tab. Used extensively in descendent selectors in 78 style statements. The following code sample is just one such instance.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-cg-s .ms-cui-ct-ul{
border-bottom:1px solid transparent;
height:22px;
}
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#0072bc;
border-color:#005e9c;
}
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#80dbfc;
border-color:#008bbe;
}
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#006a92;
border-color:#005372;
}
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#ff9d00;
border-color:#bb4f00;
}
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#89df5f;
border-color:#03a200;
}
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#c90077;
border-color:#aa0065;
}
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#fae032;
border-color:#faac32;
}
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#7f33d7;
border-color:#5129ad;
}
.ms-cui-cg-i

First nested DIV element that is a child of 'ms-cui-cg'. Used as a child in several descendant selectors.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-cg-i{
border:1px solid transparent;
border-top:2px solid transparent;
border-bottom:0px;
}
.ms-cui-cg-db .ms-cui-cg-i{
border-color:#0072bc;
}
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-cg-i{
border-color:#005e9c;
}
.ms-cui-cg-lb .ms-cui-cg-i{
border-color:#00adee;
}
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-cg-i{
border-color:#008bbe;
}
.ms-cui-cg-tl .ms-cui-cg-i{
border-color:#139ab1;
}
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-cg-i{
border-color:#005372;
}
.ms-cui-cg-or .ms-cui-cg-i{
border-color:#fd9f08;
}
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-cg-i{
border-color:#bb4f00;
}
.ms-cui-cg-gr .ms-cui-cg-i{
border-color:#26b023;
}
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-cg-i{
border-color:#03a200;
}
.ms-cui-cg-mg .ms-cui-cg-i{
border-color:#ec008c;
}
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-cg-i{
border-color:#aa0065;
}
.ms-cui-cg-yl .ms-cui-cg-i{
border-color:#f2ce00;
}
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-cg-i{
border-color:#faac32;
}
.ms-cui-cg-pp .ms-cui-cg-i{
border-color:#7f33d7;
}
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-cg-i{
border-color:#5129ad;
}
.ms-cui-cg-t

Second nested DIV element that is a child of 'ms-cui-cg-i'. Wraps SPAN element that contains tab group label text.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-tts-scale-1 .ms-cui-tt-span,.ms-cui-tts-scale-1 .ms-cui-cg-t,.ms-cui-tts-scale-2 .ms-cui-tt-span{
padding-left:1px;
padding-right:1px;
}
.ms-cui-tts-scale-2 .ms-cui-cg-t{
visibility:hidden;
width:0px;
}
.ms-cui-cg-t{
text-align:center;
padding:1px 10px 2px 10px;
}
.ms-cui-cg-s .ms-cui-cg-t{
background-image:none;
}
.ms-cui-cg-db .ms-cui-cg-t{
color:#9bc7e5;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -857px;
}
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-cg-t{
color:#fff;
background-color:#0072bc;
background-image:none;
}
.ms-cui-cg-lb .ms-cui-cg-t{
color:#96def0;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -682px;
}
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-cg-t{
color:#004159;
background-color:#80dbfc;
background-image:none;
}
.ms-cui-cg-tl .ms-cui-cg-t{
color:#e7fafd;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -807px;
}
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-cg-t{
color:#fff;
background-color:#006a92;
background-image:none;
}
.ms-cui-cg-or .ms-cui-cg-t{
color:#ffc86d;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -757px;
}
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-cg-t{
color:#58220b;
background-color:#ff9d00;
background-image:none;
}
.ms-cui-cg-gr .ms-cui-cg-t{
color:#aee2ae;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -832px;
}
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-cg-t{
color:#0e400d;
background-color:#89df5f;
background-image:none;
}
.ms-cui-cg-mg .ms-cui-cg-t{
color:#f6bbde;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -782px;
}
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-cg-t{
color:#fff;
background-color:#c90077;
background-image:none;
}
.ms-cui-cg-yl .ms-cui-cg-t{
color:#fef9cf;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -732px;
}
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-cg-t{
color:#744700;
background-color:#fae032;
background-image:none;
}
.ms-cui-cg-pp .ms-cui-cg-t{
color:#ddd7e7;
background:url("/_layouts/images/bgximg.png") repeat-x -0px -707px;
}
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-cg-t{
color:#fff;
background-color:#7f33d7;
background-image:none;
}
.ms-cui-cg-t-i

SPAN element that is a child of 'ms-cui-cg-t' DIV element. Wraps tab group label text.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-cg-t-i{
height:15px;
display:inline-block;
}

Sub tabs within a Ribbon tab grouping

.ms-cui-ct-ul

Applied to nested unordered list that contains the sub tabs in a group.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ct-ul{
margin:0px;
padding:0px;
list-style-type:none;
}
.ms-cui-cg-s .ms-cui-ct-ul{
border-bottom:1px solid transparent;
height:22px;
}
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#0072bc;
border-color:#005e9c;
}
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#80dbfc;
border-color:#008bbe;
}
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#006a92;
border-color:#005372;
}
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#ff9d00;
border-color:#bb4f00;
}
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#89df5f;
border-color:#03a200;
}
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#c90077;
border-color:#aa0065;
}
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#fae032;
border-color:#faac32;
}
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-ct-ul{
background-color:#7f33d7;
border-color:#5129ad;
}
.ms-cui-ct-first

Applied to first sub tab in group. Used extensively in descendent selectors in 18 style statements. The following code sample is just one such instance.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ct-first .ms-cui-tt-a{
border-left:1px solid transparent;
}
.ms-cui-cg-db .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#0072bc;
}
.ms-cui-cg-db.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#005e9c;
}
.ms-cui-cg-lb .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#00adee;
}
.ms-cui-cg-lb.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#008bbe;
}
.ms-cui-cg-tl .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#139ab1;
}
.ms-cui-cg-tl.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#005372;
}
.ms-cui-cg-or .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#fd9f08;
}
.ms-cui-cg-or.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#bb4f00;
}
.ms-cui-cg-gr .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#26b023;
}
.ms-cui-cg-gr.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#03a200;
}
.ms-cui-cg-mg .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#ec008c;
}
.ms-cui-cg-mg.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#aa0065;
}
.ms-cui-cg-yl .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#f2ce00;
}
.ms-cui-cg-yl.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#faac32;
}
.ms-cui-cg-pp .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#7f33d7;
}
.ms-cui-cg-pp.ms-cui-cg-s .ms-cui-ct-first .ms-cui-tt-a{
border-left-color:#5129ad;
}
.ms-cui-ct-last

Applied to last sub tab in group.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ct-last{
margin-right:0px;
}
.ms-cui-ct-first.ms-cui-ct-last{
float:none;
text-align:left;
}

Ribbon Command bar

Styles that wrap Ribbon command area (below Ribbon tabs)

.ms-cui-tabContainer

Applied to DIV wrapping the Ribbon command bar list element (under tabs). Child of 'ms-cui-ribbon' DIV element.

A style statement is only provided for this class in the OOTB NightandDay master page/CSS file.

.ms-cui-tabBody

Applied to a list (UL) that is a child of the 'ms-cui-tabContainer' DIV element. When the Ribbon is active and depending on the state, other classes are added in conjunction with this style. This is the main outer container for the Ribbon command bar.

This is a great place to specify a different color for the command bar background or to change the width of the Ribbon. Note that changes to the top or bottom borders will affect the set and required height of 43px.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-tabBody{
overflow:hidden;
width:100%;
/* [RecolorImage(themeColor:"Light2",method:"Tinting",includeRectangle{x:0,y:890,width:1,height:86}] */
 background:#fff url("/_layouts/images/bgximg.png") repeat-x -0px -882px;
height:90px;
border-style:solid;
border-width:0px 0px 1px 0px;
border-bottom-color:#898d92;
margin:0px;
padding:0px;
}
.ms-cui-tabBody-db, .ms-cui-tabBody-lb, .ms-cui-tabBody-tl, .ms-cui-tabBody-or, .ms-cui-tabBody-gr, .ms-cui-tabBody-mg, .ms-cui-tabBody-yl, .ms-cui-tabBody-pp

Applied to a list (UL) that is a child of the 'ms-cui-tabContainer' DIV element and applied in conjunction with 'ms-cui-tabBody' CSS class when a particular set of tools in the tab area has been activated (such as Editing Tools). Each of these classes is referenced as a parent in a style statement using a descendant selector in a unique style statement per listed class (8 style statements total across all listed classes). The following code sample is just one such instance. Please see the Ribbon Prefix Guide for a key to the CSS class names.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ct-topBar-or,.ms-cui-tabBody-or{
border-color:#bb4f00 !important;
}
.ms-cui-group

Applied to the list items (LI) within the 'ms-cui-tabBody' list (UL). Contains SPAN elements that wrap Ribbon commands; there is one LI per Ribbon command group (such as Edit, Manage, Page Actions). Referenced as a parent in descendant selectors.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-group{
margin:0px;
padding:0px;
list-style-type:none;
float:left;
padding:0px;
height:90px;
position:relative;
text-align:center;
}

Ribbon command button group styles

.ms-cui-groupTitle

Applied to SPAN that wraps the label text for a Ribbon command group (such as Edit, Manage, Page Actions).

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-groupTitle{
display:block;
text-align:center;
/* [ReplaceColor(themeColor:"Dark2-Darker")] */
 color:#5b626c;
cursor:default;
white-space:nowrap;
padding:0px 6px 0px 3px;
}
.ms-cui-groupSeparator

Applied to SPAN that provides a separator between Ribbon command groups.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-groupSeparator{
display:inline-block;
height:86px;
position:relative;
top:4px;
border-right:1px solid;
/* [ReplaceColor(themeColor:"Light2")] */
 border-right-color:#e7e7e8;
}
.ms-cui-groupContainer

Applied to first wrapper SPAN within 'ms-cui-group' LI element that wraps each sub group of Ribbon commands.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-groupContainer{
display:inline-block;
}
.ms-cui-groupBody

Second nested SPAN; child of 'ms-cui-groupContainer' SPAN element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-groupBody{
display:block;
padding:2px 3px 0px;
height:71px;
text-align:center;
}
.ms-cui-layout

Third nested SPAN; child of 'ms-cui-groupBody' SPAN element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-layout{
display:inline-block;
}
.ms-cui-section

Fourth nested SPAN; child of 'ms-cui-layout' SPAN element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-section,.ms-cui-section-alignmiddle{
display:inline-block;
vertical-align:top;
text-align:left;
}
ms-cui-section-alignmiddle

Fourth nested SPAN; child of 'ms-cui-layout' SPAN element. Also used as a parent in descendent selectors that control margins for 'ms-cui-row-onerow' and 'ms-cui-row-tworow'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-section,.ms-cui-section-alignmiddle{
display:inline-block;
vertical-align:top;
text-align:left;
}
.ms-cui-row-onerow

Fifth nested SPAN; child of 'ms-cui-section' SPAN element; used when there is a single command (as opposed to stacked commands within the row).

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-row,.ms-cui-row-onerow,.ms-cui-row-tworowmiddle,.ms-cui-row-tworow{
display:block;
}
.ms-cui-section-alignmiddle .ms-cui-row-onerow{
margin-top:20px;
}
.ms-cui-row-tworow

Fifth nested SPAN; child of 'ms-cui-section' or 'ms-cui-section-alignmiddle' SPAN element; used when there are rows of stacked commands.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-row,.ms-cui-row-onerow,.ms-cui-row-tworowmiddle,.ms-cui-row-tworow{
display:block;
}
.ms-cui-row,.ms-cui-row-tworow{
height:22px;
margin-bottom:2px;
}
.ms-cui-section-alignmiddle .ms-cui-row-tworow{
margin-top:8px;
}

Ribbon command button styles - common styles used in several types of command buttons

See screenshots below for samples.

.ms-cui-disabled

Applied to an element that is disabled for the current page state, user or selected content. Referenced as a parent in descendant selectors.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-disabled *{
color:#5b626c !important;
cursor:default !important;
}
.ms-cui-disabled:active

Active state for 'ms-cui-disabled'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-disabled:active,.ms-cui-ctl2-disabled:active,.ms-cui-ctl2-disabled:active .ms-cui-ctl-a1,.ms-cui-ctl2-disabled:active .ms-cui-ctl-a2{
background-color:transparent !important;
}
.ms-cui-disabled:hover

Hover state for 'ms-cui-disabled'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-disabled:hover,.ms-cui-ctl-a1.ms-cui-disabled:hover *,.ms-cui-ctl-large.ms-cui-disabled:hover *,.ms-cui-ctl-large.ms-cui-disabled:hover,.ms-cui-ctl-thin.ms-cui-disabled:hover,.ms-cui-ctl-menu.ms-cui-disabled:hover,.ms-cui-gallerybutton-a.ms-cui-disabled:hover{
border-color:transparent !important;
background-color:transparent;
cursor:default !important;
}
.ms-cui-tb.ms-cui-disabled:hover{
border-color:#d4d6d9 !important;
background-color:auto;
}
.ms-cui-imageDisabled

Applied to SPAN that is a child of 'ms-cui-ctl-largeIconContainer' or 'ms-cui-ctl-iconContainer' SPAN elements; contains command icon.

Applied to SPAN that contains the arrow image displayed under the Ribbon command icon/label.

There is no style statements provided for this class. It is assumed that it is used by other code to disable the image when functionality is restricted for the user.

.ms-cui-ctl-iconContainer

Applied to a SPAN that is a child of another element (it varies); wraps the SPAN that wraps smaller command icon.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

a.ms-cui-ctl-medium .ms-cui-ctl-iconContainer,span.ms-cui-ctl .ms-cui-ctl-a1Internal .ms-cui-img-16by16{
margin-right:3px;
vertical-align:middle;
display:inline-block;
}
a.ms-cui-ctl-menu .ms-cui-ctl-iconContainer{
display:none;
float:left;
margin-right:7px;
margin-top:1px;
}
a.ms-cui-ctl-menu32 .ms-cui-ctl-iconContainer{
margin-top:5px;
}
ul.ms-cui-menusection-items16 .ms-cui-ctl-iconContainer,ul.ms-cui-menusection-items16rtl .ms-cui-ctl-iconContainer{
width:16px;
display:block;
}
ul.ms-cui-menusection-items32 .ms-cui-ctl-iconContainer,ul.ms-cui-menusection-items32rtl .ms-cui-ctl-iconContainer{
width:32px;
display:block;
}
span.ms-cui-mrusb-selecteditem .ms-cui-ctl-iconContainer{
display:inline-block;
}
.ms-cui-fslb .ms-cui-ctl-iconContainer{
vertical-align:top;
display:inline-block;
text-align:center;
width:22px;
height:22px;
}
.ms-cui-img-32by32

Applied to a SPAN element that is a child of 'ms-cui-ctl-largeIconContainer' SPAN element; contains large command icon; set in conjunction with the 'ms-cui-img-cont-float' CSS class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-img-32by32{
width:32px;
height:32px;
}
.ms-cui-img-16by16

Applied to a SPAN element that is a child of 'ms-cui-ctl-iconContainer' SPAN element; contains small command icon; set in conjunction with the 'ms-cui-img-cont-float' CSS class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

a.ms-cui-ctl-medium .ms-cui-ctl-iconContainer,span.ms-cui-ctl .ms-cui-ctl-a1Internal .ms-cui-img-16by16{
margin-right:3px;
vertical-align:middle;
display:inline-block;
}
.ms-cui-img-16by16{
width:16px;
height:16px;
}
.ms-cui-img-5by3

Nested SPAN element; child of the 'ms-cui-ctl-a2' or 'ms-cui-dd-arrow-button' anchors; contains the arrow image for a command icon/label or combination box. Set in conjunction with 'ms-cui-img-cont-float' CSS class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-largelabel .ms-cui-img-5by3{
vertical-align:middle;
margin-top:2px;
}
.ms-cui-img-5by3{
width:5px;
height:3px;
}
.ms-cui-img-cont-float

Applied to SPAN that is a child of 'ms-cui-ctl-largeIconContainer' or 'ms-cui-ctl-iconContainer' SPAN elements; contains command icon.

Applied to SPAN that contains the arrow image displayed under the Ribbon command icon/label.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-disabled .ms-cui-img-container,.ms-cui-disabled .ms-cui-img-cont-float,.ms-cui-disabled .ms-cui-jewel-left,.ms-cui-disabled .ms-cui-jewel-middle,.ms-cui-disabled .ms-cui-jewel-right{
filter:gray(enabled=true) alpha(opacity=50);
-ms-filter:"gray(enabled=true) alpha(opacity=50)";
background-color:#fff !important;
opacity:0.3;
}
span.ms-cui-ctl a.ms-cui-ctl-a2 >
span >
span.ms-cui-img-cont-float, span.ms-cui-ctl a.ms-cui-ctl-a2 >
span >
span.ms-cui-img-container{
margin-top:9px;
}
span.ms-cui-ctl-large >
a.ms-cui-ctl-a2 >
span.ms-cui-img-cont-float, span.ms-cui-ctl-large >
a.ms-cui-ctl-a2 >
span.ms-cui-img-container{
vertical-align:top;
margin-top:3px;
}
.ms-cui-img-container,.ms-cui-img-cont-float{
margin-left:auto;
margin-right:auto;
position:relative;
overflow:hidden;
text-align:left;
z-index:10;
}
.ms-cui-img-cont-float{
display:inline-block;
}
IMG (32 x 32px) with inline styles

Large command icon image in Ribbon; also affected by descendant selectors in various statements. The image is part of a CSS Sprite.

<img style="top: -416px; left: -320px;">

The actual pixel values will differ from instance to instance as different icons are used.

IMG (16 x 16px) with inline styles

Small command icon image in Ribbon. The image is part of a CSS Sprite.

<img style="top: -208px; left: -144px;">

The actual pixel values will differ from instance to instance as different icons are used.

Ribbon command button styles - large icon

.ms-cui-ctl-large

Wraps a single Ribbon command; includes command icon and arrow. Referenced as a parent in descendant and child selectors.

Applied to the ANCHOR element that wraps large commands; child of 'ms-cui-row-onerow' SPAN element.

Applied to a SPAN element that wraps the 'ms-cui-mrusb-selecteditem' SPAN element. In this instance it is the sixth nested SPAN.

Applied to the ANCHOR element that wraps the large command icon which is a child of 'ms-cui-mrusb-selecteditem' SPAN element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-large{
overflow:hidden;
display:inline-block;
text-align:center;
vertical-align:top;
margin-left:1px;
margin-right:1px;
}
a.ms-cui-ctl-large{
padding:2px 0px 2px;
border:1px solid transparent;
height:63px;
cursor:default;
}
span.ms-cui-mrusb-selecteditem .ms-cui-ctl-large,span.ms-cui-mrusb-selecteditem a.ms-cui-ctl,span.ms-cui-mrusb-selecteditem .ms-cui-ctl-medium{
margin-left:0px;
margin-right:0px;
}
.ms-cui-ctl-large:active

Active state for 'ms-cui-ctl-large' element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-mousedown,.ms-cui-ctl-large:active,.ms-cui-ctl-medium:active,.ms-cui-ctl:active,.ms-cui-ctl-a1:active,.ms-cui-ctl-a2:active,.ms-cui-ctl-thin:active{
border-color:#c28a30 !important;
background-color:#f6c867 !important;
}
.ms-cui-ctl-large:hover

Hover state for 'ms-cui-ctl-large' ANCHOR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-large:hover,.ms-cui-ctl-light-hoveredOver,.ms-cui-ctl-medium:hover,.ms-cui-ctl:hover,.ms-cui-mrusb-selecteditem.ms-cui-ctl-light-hoveredOver a,.ms-cui-ctl-thin:hover{
border-color:#f1c43f !important;
background-color:#fdeeb3;
}
.ms-cui-mrusb-selecteditem

Seventh nested SPAN; child of 'ms-cui-ctl-large' SPAN element. Wraps the icon portion of a split-button command in the case of a split button where the icon and label are in the same container and light up together on hover.

This element is a child of 'ms-cui-ctl-large' SPAN, and the parent of 'ms-cui-ctl-large' ANCHOR.

Referenced as a parent in descendant selectors.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

span.ms-cui-mrusb-selecteditem{
display:inline-block;
}
.ms-cui-ctl-a1

Applied to ANCHOR element that wraps the icon portion of a split-button command in the case of a split button where the icon and label are in separate containers and light up individually on hover.

Child of 'ms-cui-ctl-large' SPAN element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-large .ms-cui-ctl-a1,.ms-cui-ctl-large .ms-cui-ctl-a2{
display:block;
border:1px solid transparent;
cursor:default;
}
.ms-cui-ctl-large .ms-cui-ctl-a1{
padding:0px 4px;
}
.ms-cui-disabled:active,.ms-cui-ctl2-disabled:active,.ms-cui-ctl2-disabled:active .ms-cui-ctl-a1,.ms-cui-ctl2-disabled:active .ms-cui-ctl-a2{
background-color:transparent !important;
}
span.ms-cui-ctl .ms-cui-ctl-a1,span.ms-cui-ctl .ms-cui-ctl-a2{
padding:0px 2px 2px;
border:1px solid transparent;
display:block;
float:left;
cursor:default;
}
*:first-child+html span.ms-cui-ctl .ms-cui-ctl-a1,*:first-child+html span.ms-cui-ctl .ms-cui-ctl-a2{
display:inline-block;
float:none;
}
span.ms-cui-ctl .ms-cui-ctl-a1{
height:16px;
}
span.ms-cui-ctl-small .ms-cui-ctl-a1{
padding-left:3px;
padding-right:1px;
}
.ms-cui-ctl-a1:active

Active state for 'ms-cui-ctl-a1'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-mousedown,.ms-cui-ctl-large:active,.ms-cui-ctl-medium:active,.ms-cui-ctl:active,.ms-cui-ctl-a1:active,.ms-cui-ctl-a2:active,.ms-cui-ctl-thin:active{
border-color:#c28a30 !important;
background-color:#f6c867 !important;
}
.ms-cui-ctl-a1:hover

Hover state for 'ms-cui-ctl-a1'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

a.ms-cui-ctl-a1:hover *,a.ms-cui-ctl-large:hover *,a.ms-cui-ctl-thin:hover *,.ms-cui-ctl-a2:hover *,.ms-cui-ctl:hover *,.ms-cui-jewel-jewelMenuLauncher:hover,.ms-cui-jewel-jewelMenuLauncher:hover *{
cursor:default;
}
.ms-cui-ctl-light-hoveredOver

Applied to 'ms-cui-ctl-a1' ANCHOR element when user hovers over element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-large:hover,.ms-cui-ctl-light-hoveredOver,.ms-cui-ctl-medium:hover,.ms-cui-ctl:hover,.ms-cui-mrusb-selecteditem.ms-cui-ctl-light-hoveredOver a,.ms-cui-ctl-thin:hover{
border-color:#f1c43f !important;
background-color:#fdeeb3;
}
.ms-cui-ctl-a1Internal

Applied to SPAN element; child of 'ms-cui-ctl-a1' ANCHOR element. Wraps 'ms-cui-img-32by32' SPAN element that contains the icon in a split button where the icon and label are in separate containers and light up individually on hover.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-large .ms-cui-ctl-a1Internal{
height:33px;
padding-top:4px;
display:block;
}
.ms-cui-ctl-a2

Applied to ANCHOR element that wraps arrow beneath command image and label in a spilt button command; child of 'ms-cui-ctl-large' SPAN element. Referenced as a parent in descendant and child selectors.

This is used in both instances where the arrow is separate from the icon/label and where the arrow is combined with the label and is separate from the icon.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

a.ms-cui-ctl-a1:hover *,a.ms-cui-ctl-large:hover *,a.ms-cui-ctl-thin:hover *,.ms-cui-ctl-a2:hover *,.ms-cui-ctl:hover *,.ms-cui-jewel-jewelMenuLauncher:hover,.ms-cui-jewel-jewelMenuLauncher:hover *{
cursor:default;
}
.ms-cui-ctl-a2:active

Active state for 'ms-cui-ctl-a2'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-mousedown,.ms-cui-ctl-large:active,.ms-cui-ctl-medium:active,.ms-cui-ctl:active,.ms-cui-ctl-a1:active,.ms-cui-ctl-a2:active,.ms-cui-ctl-thin:active{
border-color:#c28a30 !important;
background-color:#f6c867 !important;
}
.ms-cui-ctl-a2:hover

Hover state for 'ms-cui-ctl-a2'.

.ms-cui-ctl-split-hover

Applied to 'ms-cui-ctl-a2' ANCHOR element when user hovers over element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-split-hover,.ms-cui-mrusb-selecteditem.ms-cui-ctl-split-hover >
*{
border-color:#b1bac4 !important;
background-color:#f4f6f7;
}
.ms-cui-ctl-largeIconContainer

Applied to a SPAN that is a child of the 'ms-cui-ctl-large' anchor; wraps the SPAN that wraps the larger command icon.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-largeIconContainer{
height:33px;
padding:2px 4px 0px;
display:block;
}
.ms-cui-ctl-large-groupPopup .ms-cui-ctl-largeIconContainer,.ms-cui-ctl-large-groupPopup.ms-cui-disabled:hover .ms-cui-ctl-largeIconContainer{
padding:1px;
border:1px solid #b2b5b9;
}
.ms-cui-ctl-largelabel

Applied to SPAN that wraps text used for large command icon label; child of the 'ms-cui-ctl-large' anchor. Referenced as a parent in descendant selectors.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-largelabel,.ms-cui-ctl-mediumlabel{
color:#23272c;
}
.ms-cui-ctl-largelabel{
display:block;
padding:2px 1px 0px;
line-height:1em !important;
}
.ms-cui-ctl-a2 .ms-cui-ctl-largelabel{
padding-top:1px;
height:26px;
}

Ribbon command button styles - smaller icon with label

.ms-cui-ctl-medium

Applied to anchor that wraps smaller stacked commands; child of 'ms-cui-row' SPAN element. Referenced as a parent in descendant selectors.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl,a.ms-cui-ctl-medium{
display:inline-block;
white-space:nowrap;
cursor:default;
margin-left:1px;
margin-right:1px;
}
.ms-cui-strip .ms-cui-ctl,.ms-cui-strip a.ms-cui-ctl-medium{
margin-left:0px;
margin-right:0px;
}
a.ms-cui-ctl,a.ms-cui-ctl-medium{
height:16px;
padding:1px 2px;
border:1px solid transparent;
cursor:default;
}
a.ms-cui-ctl-medium{
padding-left:2px;
padding-right:5px;
}
span.ms-cui-mrusb-selecteditem .ms-cui-ctl-large,span.ms-cui-mrusb-selecteditem a.ms-cui-ctl,span.ms-cui-mrusb-selecteditem .ms-cui-ctl-medium{
margin-left:0px;
margin-right:0px;
}
.ms-cui-ctl-medium:active

Active state for 'ms-cui-ctl-medium' element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-mousedown,.ms-cui-ctl-large:active,.ms-cui-ctl-medium:active,.ms-cui-ctl:active,.ms-cui-ctl-a1:active,.ms-cui-ctl-a2:active,.ms-cui-ctl-thin:active{
border-color:#c28a30 !important;
background-color:#f6c867 !important;
}
.ms-cui-ctl-medium:hover

Hover state for 'ms-cui-ctl-medium' ANCHOR element.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-large:hover,.ms-cui-ctl-light-hoveredOver,.ms-cui-ctl-medium:hover,.ms-cui-ctl:hover,.ms-cui-mrusb-selecteditem.ms-cui-ctl-light-hoveredOver a,.ms-cui-ctl-thin:hover{
border-color:#f1c43f !important;
background-color:#fdeeb3;
}
.ms-cui-ctl-mediumlabel

Applied to SPAN that wraps text used for small command icon label; child of the 'ms-cui-ctl-medium' anchor. Referenced as a parent in descendant selectors.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-largelabel,.ms-cui-ctl-mediumlabel{
color:#23272c;
}
a.ms-cui-ctl-medium .ms-cui-ctl-mediumlabel{
vertical-align:top;
display:inline-block;
padding-top:1px;
line-height:1.25em !important;
}
.ms-cui-ctl-menu .ms-cui-ctl-mediumlabel{
display:inline-block;
padding:3px 0px;
}
.ms-cui-menusection-items32 .ms-cui-ctl-mediumlabel,.ms-cui-menusection-items32rtl .ms-cui-ctl-mediumlabel{
font-weight:bold;
}
.ms-cui-menusection-items32 .ms-cui-ctl-mediumlabel,.ms-cui-menusection-items32rtl .ms-cui-ctl-mediumlabel,.ms-cui-btn-menu-description{
color:#4c535c;
}
.ms-cui-fa-menuitem .ms-cui-ctl-mediumlabel{
display:inline-block;
padding-right:13px;
}

Ribbon command button styles - stacked rows with combo boxes

.ms-cui-row

Fifth nested SPAN; child of 'ms-cui-section' SPAN element; used when there are multiple commands stacked on top of each other vertically (as opposed to a single command).

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-row,.ms-cui-row-onerow,.ms-cui-row-tworowmiddle,.ms-cui-row-tworow{
display:block;
}
.ms-cui-row,.ms-cui-row-tworow{
height:22px;
margin-bottom:2px;
}
.ms-cui-ctl-small

Applied to LABEL element that is a child of the 'ms-cui-row' SPAN element. Only used as a parent in a descendent selector.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

span.ms-cui-ctl-small .ms-cui-ctl-a1{
padding-left:3px;
padding-right:1px;
}
.ms-cui-fslb

Applied to LABEL element that is a child of the 'ms-cui-row' SPAN element and applied in conjunction with 'ms-cui-ctl-small' CSS class.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-toolbar-buttondock .ms-cui-fslb{
padding:0;
}
.ms-cui-fslb{
display:inline-block;
height:17px;
padding:2px 1px 3px 0px;
vertical-align:bottom;
color:#23272c;
margin-left:1px;
margin-right:1px;
}
.ms-cui-cb

Applied to SPAN that is a child of 'ms-cui-row' SPAN element; contains combination box.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-toolbar-buttondock .ms-cui-cb{
height:20px;
}
.ms-cui-dd,.ms-cui-cb{
height:22px;
display:inline-block;
white-space:nowrap;
margin-left:1px;
margin-right:1px;
}
.ms-cui-cb:hover

Hover state for 'ms-cui-cb'. Referenced only as a parent in a descendent selector.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-dd:hover .ms-cui-dd-text,.ms-cui-cb:hover .ms-cui-cb-input{
background-color:#fff;
border-color:#bbbfc4;
}
.ms-cui-cb-input

Applied to combination box INPUT; inline styles are also applied.

style="width: 75px;"

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-toolbar-buttondock .ms-cui-cb .ms-cui-cb-input{
height:14px;
padding-top:2px;
padding-left:0px;
padding-right:0px;
text-align:center;
}
.ms-cui-dd-text,.ms-cui-cb-input{
height:15px;
border:1px solid #d3d6d9;
border-right:0px;
padding:3px 7px 2px;
display:block;
float:left;
cursor:default;
background-color:#fff;
white-space:nowrap;
font:inherit;
overflow:hidden;
color:#000;
}
*:first-child+html .ms-cui-dd-text,*:first-child+html .ms-cui-cb-input,*:first-child+html .ms-cui-dd-arrow-button{
display:inline-block;
float:none;
}
.ms-cui-dd:hover .ms-cui-dd-text,.ms-cui-cb:hover .ms-cui-cb-input{
background-color:#fff;
border-color:#bbbfc4;
}
.ms-cui-dd.ms-cui-disabled:hover .ms-cui-dd-text,.ms-cui-cb.ms-cui-disabled:hover .ms-cui-cb-input{
background-color:auto !important;
border-color:#d3d6d9 !important;
}
.ms-cui-cb-input{
font-family:"Segoe UI",Tahoma,Verdana,sans-serif;
font-size:8pt;
}
.ms-cui-dd-arrow-button

Applied to ANCHOR that is a child of 'ms-cui-cb' SPAN element; contains drop down arrow for combination box.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-toolbar-buttondock .ms-cui-cb .ms-cui-dd-arrow-button{
height:18px;
padding:0px 2px;
}
.ms-cui-dd-arrow-button{
height:20px;
width:9px;
padding-left:4px;
margin-bottom:-2px;
border:1px solid #d3d6d9;
border-left-color:transparent;
display:block;
float:left;
outline:none;
cursor:default;
}
*:first-child+html .ms-cui-dd-text,*:first-child+html .ms-cui-cb-input,*:first-child+html .ms-cui-dd-arrow-button{
display:inline-block;
float:none;
}
span:hover >
.ms-cui-dd-arrow-button{
border-color:#b1bac4;
background-color:#f4f6f7;
}
span.ms-cui-disabled:hover >
.ms-cui-dd-arrow-button{
border-color:#e0e1e3 !important;
border-left-color:transparent !important;
background-color:#fff !important;
cursor:default !important;
}
.ms-cui-dd-arrow-button:active

Active state for 'ms-cui-dd-arrow-button'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-dd-arrow-button:active{
border-color:#c28a30 !important;
background-color:#f6c867 !important;
}
.ms-cui-dd-arrow-button:hover

Hover state for 'ms-cui-dd-arrow-button'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-dd-arrow-button:hover{
border-color:#f1c43f !important;
background-color:#fdeeb3 !important;
}
span:hover > .ms-cui-dd-arrow-button

Hover state for 'ms-cui-dd-arrow-button'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

span:hover >
.ms-cui-dd-arrow-button{
border-color:#b1bac4;
background-color:#f4f6f7;
}

Ribbon command button styles - command strip

.ms-cui-strip

Applied to SPAN that is a child of 'ms-cui-row' SPAN element; contains multiple commands. Also used as a parent in descendent selectors.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-strip{
display:inline-block;
border:1px solid #e1e3e4;
vertical-align:top;
margin-left:1px;
margin-right:1px;
}
.ms-cui-ctl

Applied to ANCHOR element that is a child of 'ms-cui-strip' SPAN element; contains a command icon.

This same class is used as a parent in descendent selector for 9 style statements but for SPAN elements only.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-QATRowRight a.ms-cui-ctl{
margin-right:0px;
margin-left:4px;
}
.ms-cui-TabRowRight a.ms-cui-ctl{
margin-right:0px;
margin-left:4px;
}
.ms-cui-ctl,a.ms-cui-ctl-medium{
display:inline-block;
white-space:nowrap;
cursor:default;
margin-left:1px;
margin-right:1px;
}
.ms-cui-strip .ms-cui-ctl,.ms-cui-strip a.ms-cui-ctl-medium{
margin-left:0px;
margin-right:0px;
}
a.ms-cui-ctl,a.ms-cui-ctl-medium{
height:16px;
padding:1px 2px;
border:1px solid transparent;
cursor:default;
}
span.ms-cui-mrusb-selecteditem a.ms-cui-ctl{
border-right:0px;
}
span.ms-cui-mrusb-selecteditem .ms-cui-ctl-large,span.ms-cui-mrusb-selecteditem a.ms-cui-ctl,span.ms-cui-mrusb-selecteditem .ms-cui-ctl-medium{
margin-left:0px;
margin-right:0px;
}
.ms-cui-ctl:active

Active state for 'ms-cui-ctl'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-mousedown,.ms-cui-ctl-large:active,.ms-cui-ctl-medium:active,.ms-cui-ctl:active,.ms-cui-ctl-a1:active,.ms-cui-ctl-a2:active,.ms-cui-ctl-thin:active{
border-color:#c28a30 !important;
background-color:#f6c867 !important;
}
.ms-cui-ctl-on

Applied to ANCHOR element that is a child of 'ms-cui-strip' SPAN element in conjunction with 'ms-cui-ctl'; on/active state for a command.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-on,.ms-cui-ctl-dark-highlight,.ms-cui-ctl-a2.ms-cui-ctl-dark-highlight:hover,.ms-cui-ctl-a1.ms-cui-ctl-dark-highlight:hover,.ms-cui-mrusb-selecteditem a:hover,.ms-cui-ctl-hoveredOver{
border-color:#c2821b !important;
background-color:#ffd86c;
}
ms-cui-ctl-on:hover

Hover state for 'ms-cui-ctl-on'.

Found in: LAYOUTS\1033\STYLES\COREV4.CSS (toggle code) 

.ms-cui-ctl-on:hover{
border-color:#c28a30 !important;
background-color:#ffed95 !important;
}

All contents copyright © 2011 by SharePoint Experts, Inc. All rights reserved. No part of this SharePoint 2010 CSS Reference Chart or related files may be reproduced, copied or duplicated in any form, by any means without the prior written permission of the authors. This is a free resource provided to the public for educational and reference use only by SharePoint Experts, Inc., Heather Solomon and Dustin Miller. sharepointexperience.com