/* SETTINGS FOR "BUTTONS" THAT OPEN MENUS */

/* reset basic settings */
#cs_PageModeContainer,
#cs_PageModeContainer div,
#cs_PageModeContainer span,
#cs_PageModeContainer ul,
#cs_PageModeContainer ul li,
#cs_PageModeContainer ul li a {
	margin: 0;
	padding: 0;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 11px;
}
#cs_PageModeContainer img {
	vertical-align: middle;
	border: 0;
}

/* container that holds author mode readout and menu btns */
#cs_PageModeContainer {
	position: relative;
	width: 100%;
	height: 2.1em;
	margin-top: -1px; /* hides top border of menu bar in IE when it's at the top */
	background: #f0f0f0;
	border: 0;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	z-index: 1000000;
	text-align: right;
}
/* footer below pagemode container, used to clear objects below */
#cs_PageModeFooter {
	margin: 0;
	padding: 0;
	height: 0;
	line-height: 0;
	font-size: 1px;
	visibility: hidden;
	clear: both;
}

/* author mode readout */
#cs_PageModeContainer #cs_env_status {
	float: left;
	padding: 0 7px;
	font-size: 10px;
	line-height: 2.2em;
}

/* container for btns */
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer {
	float: right;
	margin: -1px 0;
}
/* btns are a list */
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer ul {
}
/* each btn is an item in that list */
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer li {
	float: left;
	list-style: none outside none;
}
/* each btn has a link */
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer a,
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer a:hover,
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer a:visited,
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer a:active {
	color: #444;
	text-decoration: none;
}

/*
	individual menu btn
	right padding should be greater than left, by the same amount as the right padding for the btn image, text, and arrow
	that lets each of them show independently, while keeping constant space between them and on the btn sides
*/
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer .cs_PageModeMenuBtn {
	line-height: 2.1em;
	padding: 0 9px 0 5px;
	border-top: 1px solid #ccc;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	background: url('/commonspot/images/page-mode-menu-btn-bg.png') #f0f0f0 bottom left repeat-x;
	font-size: 11px;
}
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer .cs_PageModeMenuBtn:hover {
	border-bottom: 1px solid #666;
	border-left: 1px solid #666;
}
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer .cs_PageModeMenuBtn:hover a {
	color: #000;
}
/* currently selected menu btn */
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer .cs_PageModeMenuBtn.open {
	border-top: 1px solid #bcbcbc;
	border-bottom: 1px solid #ecedeb;
	background: #ecedeb;
}
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer .cs_PageModeMenuBtn.open a {
	color: #000;
}
/* btn image */
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer .cs_PageModeMenuBtn img.cs_PageModeMenuBtnImage {
	margin: 0 0 0 4px;
}
/* btn text */
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer .cs_PageModeMenuBtn a .cs_PageModeMenuBtnText {
	margin: 0 0 0 4px;
}
/* button arrow */
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer .cs_PageModeMenuBtn .cs_PageModeMenuBtnArrow {
	margin: 0 0 0 4px;
}
/* spacer at end of btns; supplies right border of last btn */
#cs_PageModeContainer #cs_PageModeMenuBtnsContainer .cs_PageModeMenuBtn.cs_EndSpacer {
	padding: 0;
	width: 1px;
	height: 2.1em;
	background: #f0f0f0;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #ccc;
}

/* SETTINGS FOR ACTUAL MENUS */

#DisplayOptionsMenu,
#RolesMenu,
#PageManagementMenu {
	position: absolute;
	margin: 0; /* this is the only part of the menus themselves that's different between icons-center.css and bar-right.css */
	padding: 8px 0 5px 0;
	background: #ecedeb;
	border: 1px solid #999;
	border-top-style: none;
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 11px;
	font-weight: normal;
	text-align: left;
	color: #000;
	z-index: 1000001;
}
#DisplayOptionsMenu {
	width: 18em; /* good if menu item images are used */
	/* width: 16.5em; good if menu item images aren't used; may want to adjust other widths below too */
}
#DisplayOptionsMenu.cs_menu_notLoggedIn {
	width: 17em;
}
#RolesMenu {
	width: 24em;
}
#RolesMenu.cs_menu_notLoggedIn {
	width: 14em;
}
#RolesMenu.cs_menu_readMode {
	width: 18em;
}
#PageManagementMenu {
	width: 22em;
}
#PageManagementMenu.cs_menu_readMode {
	width: 18em;
}
#DisplayOptionsMenu a,
#RolesMenu a,
#PageManagementMenu a {
	display: block;
	margin: 0;
	padding: 2px 8px;
}
#RolesMenu a, #RolesMenu a.mw, #RolesMenu a.mw:link, #RolesMenu a:link,
#PageManagementMenu a, #PageManagementMenu a.mw, #PageManagementMenu a.mw:link, #PageManagementMenu a:link,
#DisplayOptionsMenu a, #DisplayOptionsMenu a.mw, #DisplayOptionsMenu a.mw:link, #DisplayOptionsMenu a:link {
	background: #ecedeb;
	font-size: 11px;
	font-weight: normal;
}
#RolesMenu a.mw:hover,
#PageManagementMenu a.mw:hover,
#DisplayOptionsMenu a.mw:hover {
	background: #ccc;
	font-weight: bold;
	color: #000;
}
#RolesMenu img,
#PageManagementMenu img,
#DisplayOptionsMenu img {
	margin-right: 4px;
	vertical-align: middle;
}
#RolesMenu hr,
#PageManagementMenu hr,
#DisplayOptionsMenu hr {
	width: 100%;
	height: 1px;
	background: #d1d1d1;
	color: #d1d1d1; /* effects ie only */
}

.cs_menu_item_shortcut {
	position: absolute;
	right: 5px;
	font-weight: normal;
	font-size: 9px;
	color: #666;
}
a:hover .cs_menu_item_shortcut {
	color: #000;
}

#cs_PageModeContainer #authorModeUIToolbar {
	position: absolute;
	top: 3px;
	right: 450px;
}
#cs_PageModeContainer #authorModeUIToolbar a, #cs_PageModeContainer #authorModeUIToolbar a:hover {
	float: left;
	margin: 0 2px;
	color: #f00;
	text-decoration: none;
}