styles.css

For CSS, this is to use for ComponetOne menu s skin

/* =========== Office2007Blue C1NavPanel =========================================== */

/* -----------> */

/* =========== Office2007Black C1Accordion =========================================== */
.C1NavPanel_Office2007Black .C1HeaderPanel
{
    cursor:pointer;    
}
.C1NavPanel_Office2007Black-C1Top,
.C1NavPanel_Office2007Black-C1Bottom
{
	font-size:12px;
	font-family: Segoe UI, Myriad, Myriad Pro, Calibri, Arial, Sans-Serif;
	border:solid 1px #4c535c;
	border-bottom:none;
	display:block;
	float:none;
	clear:both;
	width:100%;
	margin:0;
	padding:0;
}
.C1NavPanel_Office2007Black-C1Left,
.C1NavPanel_Office2007Black-C1Right
{
	font-size:12px;
	font-family: Segoe UI, Myriad, Myriad Pro, Calibri, Arial, Sans-Serif;
	border:solid 1px #4c535c;
	border-right:none;
	display:block;
	float:left;
	clear:both;
	margin:0;
	padding:0;
}
.C1NavPanel_Office2007Black-C1Top .C1AccordionPane,
.C1NavPanel_Office2007Black-C1Bottom .C1AccordionPane
{
	display:block;
	float:none;
	clear:both;
	width:100%;
	margin:0;
	padding:0;
}
.C1NavPanel_Office2007Black-C1Left .C1AccordionPane,
.C1NavPanel_Office2007Black-C1Right .C1AccordionPane
{
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1NavPanel_Office2007Black .c1-v-flow
{
	display:block;
	float:none;
	clear:both;
	width:100%;
	margin:0;
	padding:0;
}
.C1NavPanel_Office2007Black .c1-h-flow
{
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1NavPanel_Office2007Black-C1Top .C1HeaderPanel,
.C1NavPanel_Office2007Black-C1Bottom .C1HeaderPanel
{
	background: url(Images/BgHeaderV.gif) repeat-x top left;
	border-bottom:1px solid #4c535c;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}
.C1NavPanel_Office2007Black-C1Top .C1Closed-C1Hover-C1HeaderPanel,
.C1NavPanel_Office2007Black-C1Bottom .C1Closed-C1Hover-C1HeaderPanel
{
	background: url(Images/BgHeaderV.gif) repeat-x center left;
}
.C1NavPanel_Office2007Black-C1Top .C1Closed-C1Active-C1Hover-C1HeaderPanel,
.C1NavPanel_Office2007Black-C1Bottom .C1Closed-C1Active-C1Hover-C1HeaderPanel
{
	background: url(Images/BgHeaderV.gif) repeat-x bottom left;
}
.C1NavPanel_Office2007Black-C1Top .C1Opened .C1HeaderPanel,
.C1NavPanel_Office2007Black-C1Bottom .C1Opened .C1HeaderPanel
{
	background: url(Images/BgHeaderVOpened.gif) repeat-x top left;
}
.C1NavPanel_Office2007Black-C1Top .C1Opened-C1Hover-C1HeaderPanel,
.C1NavPanel_Office2007Black-C1Bottom .C1Opened-C1Hover-C1HeaderPanel
{
	background: url(Images/BgHeaderVOpened.gif) repeat-x center left;
}
.C1NavPanel_Office2007Black-C1Top .C1Opened-C1Active-C1Hover-C1HeaderPanel,
.C1NavPanel_Office2007Black-C1Bottom .C1Opened-C1Active-C1Hover-C1HeaderPanel
{
	background: url(Images/BgHeaderVOpened.gif) repeat-x bottom left;
}

.C1NavPanel_Office2007Black-C1Right .C1HeaderPanel,
.C1NavPanel_Office2007Black-C1Left .C1HeaderPanel
{
	background:#ebebeb url(Images/BgHeaderH.gif) repeat-x top left;
	border-right:1px solid #4c535c;
	display:block;
	float:left;
	margin:0;
	padding:0;
	width:auto;
	min-width:20px;
}
.C1NavPanel_Office2007Black-C1Right .C1Closed-C1Hover-C1HeaderPanel,
.C1NavPanel_Office2007Black-C1Left .C1Closed-C1Hover-C1HeaderPanel
{
	background:#ffe7a2 url(Images/BgHeaderHHover.gif) repeat-x top left;
}
.C1NavPanel_Office2007Black-C1Right .C1Closed-C1Active-C1Hover-C1HeaderPanel,
.C1NavPanel_Office2007Black-C1Left .C1Closed-C1Active-C1Hover-C1HeaderPanel
{
	background:#fb8c3c url(Images/BgHeaderHActive.gif) repeat-x top left;
}
.C1NavPanel_Office2007Black-C1Right .C1Opened .C1HeaderPanel,
.C1NavPanel_Office2007Black-C1Left .C1Opened .C1HeaderPanel
{
	background:#ffbd69 url(Images/BgHeaderHHover.gif) repeat-x top left;
}
.C1NavPanel_Office2007Black-C1Right .C1Opened-C1Hover-C1HeaderPanel,
.C1NavPanel_Office2007Black-C1Left .C1Opened-C1Hover-C1HeaderPanel
{
	background:#ffbd69 url(Images/BgHeaderHHover.gif) repeat-x top left;
}
.C1NavPanel_Office2007Black-C1Right .C1Opened-C1Active-C1Hover-C1HeaderPanel,
.C1NavPanel_Office2007Black-C1Left .C1Opened-C1Active-C1Hover-C1HeaderPanel
{
	background:#fb8c3c url(Images/BgHeaderHActive.gif) repeat-x top left;
}

.C1NavPanel_Office2007Black-C1Top .C1HeaderPanel .C1Outer,
.C1NavPanel_Office2007Black-C1Bottom .C1HeaderPanel .C1Outer
{
	background: none;
	border:none;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}

.C1NavPanel_Office2007Black-C1Right .C1HeaderPanel .C1Outer,
.C1NavPanel_Office2007Black-C1Left .C1HeaderPanel .C1Outer
{
	background: none;
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}

.C1NavPanel_Office2007Black-C1Top .C1HeaderPanel .C1Inner,
.C1NavPanel_Office2007Black-C1Bottom .C1HeaderPanel .C1Inner
{
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}

.C1NavPanel_Office2007Black-C1Right .C1HeaderPanel .C1Inner,
.C1NavPanel_Office2007Black-C1Left .C1HeaderPanel .C1Inner
{
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}

.C1NavPanel_Office2007Black-C1Top .C1HeaderPanel .C1Content,
.C1NavPanel_Office2007Black-C1Bottom .C1HeaderPanel .C1Content
{
	background: none;
	color: #373c43;
	font-size:12px;
	font-weight:900;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0 5px;
	height:31px;
	line-height:31px;
	vertical-align:middle;
}

.C1NavPanel_Office2007Black-C1Top .C1Opened .C1HeaderPanel .C1Content,
.C1NavPanel_Office2007Black-C1Bottom .C1Opened .C1HeaderPanel .C1Content
{
	color: #000000;
}

.C1NavPanel_Office2007Black-C1Right .C1HeaderPanel .C1Content,
.C1NavPanel_Office2007Black-C1Left .C1HeaderPanel .C1Content
{
	color: #000000;
	font-size:16px;
	font-weight:900;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0 5px;
	height:25px;
	line-height:25px;
	vertical-align:middle;
}

.C1NavPanel_Office2007Black-C1Top .C1ContentPanel,
.C1NavPanel_Office2007Black-C1Bottom .C1ContentPanel
{
	border-bottom:1px solid #4c535c;
	background: #ffffff;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:5px;
}

.C1NavPanel_Office2007Black-C1Right .C1ContentPanel,
.C1NavPanel_Office2007Black-C1Left .C1ContentPanel
{
	border-right:1px solid #4c535c;
	background: #ffffff;
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1NavPanel_Office2007Black-C1Right .C1ContentPanel .C1Content,
.C1NavPanel_Office2007Black-C1Left .C1ContentPanel .C1Content
{
	padding:5px;
}

/* =========== end of Office2007Black C1Accordion =========================================== */


/* <----------- */

/*------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------------------*/

/**************************/
/*   C1NavPanel specific  */
/**************************/


/* C1NavPanelResizer */
.C1NavPanel_Office2007Black .C1NavPanelResizer
{    
      background: #EAEBEB url(Images/navpanel_header_outlook_resizer_bg.gif) repeat-x center center;
      border-top: solid 1px #4C535C;
      border-bottom: solid 1px #4C535C;
      cursor: n-resize;      
      display:block;
      float:none;
}    

.C1NavPanel_Office2007Black .C1NavPanelResizer div
{     
    _margin-top:-3px;
    background: url(Images/navpanel_header_outlook_resizer_holder.gif) no-repeat center center;
    width: 100%;height:100%;
}

/* C1NavPanelMenu Menu */

.C1NavPanel_Office2007Black .C1NavPanelMenu * 
{
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
.C1NavPanel_Office2007Black .C1NavPanelMenu
{    
	background: #DFE2E4 url(Images/BgHeaderV.gif) repeat-x top center;
  border-bottom: solid 1px #4C535C;
}
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1Link
{	
  cursor:pointer;
	text-decoration: none;
	margin:2px;
}

/* C1NavPanelMenu text color */
.C1NavPanel_Office2007Black .C1NavPanelMenu * {
	color: #3D3D3D;	
}

/* Hover anf focus state */
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1Active,
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1Focus,
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubGroup .C1Active
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubGroup .C1Focus
{    
    background: #FFDE82 url(Images/navpanel_header_bg_hover.gif) repeat-x center center;
}

/* Checked state */
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1Checked img
{
    background: url(Images/navpanel_header_bg_exp_hover.gif) repeat-x center center;
} 

.C1NavPanel_Office2007Black .C1NavPanelMenu .C1Level1 .C1Checked img
{
    background: none;
}

.C1NavPanel_Office2007Black .C1NavPanelMenu .C1Level2 .C1Checked img
{
    background: url(Images/navpanel_header_bg_exp_hover.gif) repeat-x center center;
    
} 

/* ----------- Pop out Menu ----------- */
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu
{
	display: block;
	padding: 3px 0 0 0;
	margin: 0;
	background: url(Images/navpanel_BgSecondarySubmenuTop.png) no-repeat top left;
	width: 229px;
}
* html .C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu
{
	display: block;
	padding: 3px 0 0 0;
	margin: 0;
	background: url(Images/navpanel_BgSecondarySubmenuTop.gif) no-repeat top left;
	width: 225px;
}
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu ul.c1-v-flow
{
	display: block;
	float: left;
	padding: 0 0 7px 0;
	margin: 0;
	background: url(Images/navpanel_BgSecondarySubmenuBottom.png) no-repeat bottom left;
	width: 229px;
}
* html .C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu ul.c1-v-flow
{
	display: block;
	float: left;
	padding: 0 0 3px 0;
	margin: 0;
	background: url(Images/navpanel_BgSecondarySubmenuBottom.gif) no-repeat bottom left;
	width: 225px;
}
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem
{
	display: block;
	float: left;
	padding: 0 6px 0 2px;
	margin: 0;
	width: 221px;
	height:auto;
	background: url(Images/navpanel_BgSecondarySubmenuMiddle.png) repeat-y top left;
}
* html .C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem
{
	display: block;
	float: left;
	padding: 0 2px;
	margin: 0;
	width: 221px;
	height:auto;
	background: url(Images/navpanel_BgSecondarySubmenuMiddle.gif) repeat-y top left;
}

.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a.C1Link, 
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a:link, 
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a:active, 
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a:visited
{
	display: block;
	text-decoration: none;
	font-size: 12px;
	padding: 0 0 0 0;
	margin: 0;
	font-weight: 100;
	border: none;
	width: 221px;
	height: 22px;
}
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a:hover, 
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a.C1Active
{
	background: url(Images/navpanel_BgSecondarySubmenuItem.gif) no-repeat top left;
	display: block;
	text-decoration: none;
	font-size: 12px;
	border: none;
}

/* Text in link */
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu .c1-v-flow .C1Link span.C1TextNode
{	
	display: block;
	width: 165px;
	height: 22px;
	padding: 0 28px 0 28px;
	margin: 0;
	text-decoration: none;
	font-size: 12px;
	vertical-align: middle;
	line-height:22px;
	position:relative;
}
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a.C1Closed span.C1TextNode
{
	background: url(Images/navpanel_BgSecondarySubmenuItemArrow.gif) no-repeat top right;
	border: none;
}
.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a.C1Opened span.C1TextNode
{
	background: url(Images/navpanel_BgSecondarySubmenuItemArrow.gif) no-repeat bottom right;
	border: none;
}

.C1NavPanel_Office2007Black .C1NavPanelMenu .C1SubMenu .c1-v-flow .C1Link img.C1LeftImage
{
	
	margin:0 10px 0 -23px;
	vertical-align: middle;
}