styles.css

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

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

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

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

.C1NavPanel_Vista-C1Top .C1Opened-C1Active-C1Hover-C1HeaderPanel,
.C1NavPanel_Vista-C1Bottom .C1Opened-C1Active-C1Hover-C1HeaderPanel
{
	background: url(Images/BgHeaderV.gif) repeat-x bottom left;
}

.C1NavPanel_Vista-C1Right .C1HeaderPanel,
.C1NavPanel_Vista-C1Left .C1HeaderPanel
{
	background:#fcfcfc url(Images/BgHeaderH.gif) repeat-x top left;
	border-left:1px solid #a7bac5;
	display:block;
	float:left;
	margin:0;
	padding:0;
	width:auto;
	min-width:20px;
}
.C1NavPanel_Vista-C1Right .C1FirstItem .C1HeaderPanel,
.C1NavPanel_Vista-C1Left .C1FirstItem .C1HeaderPanel
{
	border:none;
}
.C1NavPanel_Vista-C1Right .C1Closed-C1Hover-C1HeaderPanel,
.C1NavPanel_Vista-C1Left .C1Closed-C1Hover-C1HeaderPanel
{
	background:#a6d9f4 url(Images/BgHeaderHHover.gif) repeat-x top left;
}
.C1NavPanel_Vista-C1Right .C1Closed-C1Active-C1Hover-C1HeaderPanel,
.C1NavPanel_Vista-C1Left .C1Closed-C1Active-C1Hover-C1HeaderPanel
{
	background:#90cbea url(Images/BgHeaderHActive.gif) repeat-x top left;
}
.C1NavPanel_Vista-C1Right .C1Opened .C1HeaderPanel,
.C1NavPanel_Vista-C1Left .C1Opened .C1HeaderPanel
{
	background:#a7bac5 url(Images/BgHeaderHHover.gif) repeat-x top left;
}
.C1NavPanel_Vista-C1Right .C1Opened-C1Hover-C1HeaderPanel,
.C1NavPanel_Vista-C1Left .C1Opened-C1Hover-C1HeaderPanel
{
	background:#a6d9f4 url(Images/BgHeaderHHover.gif) repeat-x top left;
}
.C1NavPanel_Vista-C1Right .C1Opened-C1Active-C1Hover-C1HeaderPanel,
.C1NavPanel_Vista-C1Left .C1Opened-C1Active-C1Hover-C1HeaderPanel
{
	background:#90cbea url(Images/BgHeaderHActive.gif) repeat-x top left;
}

.C1NavPanel_Vista-C1Top .C1HeaderPanel .C1Outer,
.C1NavPanel_Vista-C1Bottom .C1HeaderPanel .C1Outer
{
	background: none;
	border-top:1px solid #ffffff;
	border-bottom:1px solid #e9e9e9;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}
.C1NavPanel_Vista-C1Top .C1Closed-C1Hover-C1HeaderPanel .C1Outer,
.C1NavPanel_Vista-C1Bottom .C1Closed-C1Hover-C1HeaderPanel .C1Outer
{ 
	border-top:1px solid #ffffff;
	border-bottom:1px solid #3c7fb1;
}
.C1NavPanel_Vista-C1Top .C1Closed-C1Active-C1Hover-C1HeaderPanel .C1Outer,
.C1NavPanel_Vista-C1Bottom .C1Closed-C1Active-C1Hover-C1HeaderPanel .C1Outer
{
	border-top:1px solid #ffffff;
	border-bottom:1px solid #2c628b;
}

.C1NavPanel_Vista-C1Top .C1Opened .C1HeaderPanel .C1Outer,
.C1NavPanel_Vista-C1Bottom .C1Opened .C1HeaderPanel .C1Outer
{
	border-top:1px solid #ffffff;
	border-bottom:1px solid #3c7fb1;
}
.C1NavPanel_Vista-C1Top .C1Opened-C1Hover-C1HeaderPanel .C1Outer,
.C1NavPanel_Vista-C1Bottom .C1Opened-C1Hover-C1HeaderPanel .C1Outer
{
	border-top:1px solid #ffffff;
	border-bottom:1px solid #3c7fb1;
}
.C1NavPanel_Vista-C1Top .C1Opened-C1Active-C1Hover-C1HeaderPanel .C1Outer,
.C1NavPanel_Vista-C1Bottom .C1Opened-C1Active-C1Hover-C1HeaderPanel .C1Outer
{
	border-top:1px solid #ffffff;
	border-bottom:1px solid #2c628b;
}

.C1NavPanel_Vista-C1Right .C1HeaderPanel .C1Outer,
.C1NavPanel_Vista-C1Left .C1HeaderPanel .C1Outer
{
	background: none;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}

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

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

.C1NavPanel_Vista .C1Bottom  .C1HeaderPanel .C1Content
{
	border-bottom:1px solid #ffffff;
	border-left:1px solid #ffffff;
	color: #039;
	font-size:12px;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0 5px;
	height:32px;
	line-height:32px;
	vertical-align:middle;
}


.C1NavPanel_Vista .C1Bottom .C1Closed-C1Active-C1Hover-C1HeaderPanel .C1Content,
.C1NavPanel_Vista .C1Bottom .C1Opened-C1Active-C1Hover-C1HeaderPanel .C1Content

{
	border-bottom:1px solid #90CBEA;
	border-left:1px solid #6E8D9F;
}

.C1NavPanel_Vista .C1Top .C1HeaderPanel .C1Content
{
	border-bottom:1px solid #ffffff;
	border-left:1px solid #ffffff;
	color: #039;
	font-size:12px;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0 5px;
	height:22px;
	line-height:22px;
	vertical-align:middle;
}

.C1NavPanel_Vista .C1Top .C1Closed-C1Active-C1Hover-C1HeaderPanel .C1Content,
.C1NavPanel_Vista .C1Top .C1Opened-C1Active-C1Hover-C1HeaderPanel .C1Content
{
	border-bottom:1px solid #90CBEA;
	border-left:1px solid #6E8D9F;
}

.C1NavPanel_Vista .C1Right .C1HeaderPanel .C1Content
{
	border-left:1px solid #ffffff;
	color: #039;
	font-size:12px;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0 5px;
	height:22px;
	line-height:22px;
	vertical-align:middle;
}

.C1NavPanel_Vista .C1Right .C1Closed-C1Active-C1Hover-C1HeaderPanel .C1Content,
.C1NavPanel_Vista .C1Right .C1Opened-C1Active-C1Hover-C1HeaderPanel .C1Content
{
	border-left:1px solid #6E8D9F;
}

.C1NavPanel_Vista .C1Left .C1HeaderPanel .C1Content
{
	border-left:1px solid #ffffff;
	color: #039;
	font-size:12px;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0 5px;
	height:22px;
	line-height:22px;
	vertical-align:middle;
}

.C1NavPanel_Vista .C1Left .C1Closed-C1Active-C1Hover-C1HeaderPanel .C1Content,
.C1NavPanel_Vista .C1Left .C1Opened-C1Active-C1Hover-C1HeaderPanel .C1Content
{
	border-left:1px solid #6E8D9F;
}

.C1NavPanel_Vista .C1Bottom .C1ContentPanel
{
	background: #ffffff;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:5px;
}
.C1NavPanel_Vista .C1Top .C1ContentPanel
{
	background: #ffffff;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:5px;
}

.C1NavPanel_Vista .C1Right .C1ContentPanel
{
	border-left:1px solid #a7bac5;
	background: #ffffff;
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1NavPanel_Vista .C1Left .C1ContentPanel
{
	border-right:1px solid #a7bac5;
	background: #ffffff;
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1NavPanel_Vista-C1Right .C1ContentPanel .C1Content,
.C1NavPanel_Vista-C1Left .C1ContentPanel .C1Content
{
	padding:5px;
}
/* =========== end of Vista C1Accordion =========================================== */

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

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

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

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

.C1NavPanel_Vista .C1NavPanelResizer div
{     
    _margin-top:-3px;
    width: 100%;height:100%;
}


/* C1NavPanelMenu Menu */

.C1NavPanel_Vista .C1NavPanelMenu * 
{
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
.C1NavPanel_Vista .C1NavPanelMenu
{    
	background: #EDFBFE url(Images/navpanel_header_bg.gif) repeat-x top center;
	border-top: solid 1px #9CB6C5;
  border-bottom: solid 1px #9CB6C5;
}
.C1NavPanel_Vista .C1NavPanelMenu .C1Link
{	
  cursor:pointer;
	text-decoration: none;
	margin:2px;
}

/* C1NavPanelMenu text color */
.C1NavPanel_Vista .C1NavPanelMenu * {
	color: #000000;	
}

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

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

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

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

/* ----------- Pop out Menu ----------- */
.C1NavPanel_Vista .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_Vista .C1NavPanelMenu .C1SubMenu
{
	display: block;
	padding: 3px 0 0 0;
	margin: 0;
	background: url(Images/navpanel_BgSecondarySubmenuTop.gif) no-repeat top left;
	width: 225px;
}
.C1NavPanel_Vista .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_Vista .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_Vista .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_Vista .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_Vista .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a.C1Link, 
.C1NavPanel_Vista .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a:link, 
.C1NavPanel_Vista .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a:active, 
.C1NavPanel_Vista .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_Vista .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a:hover, 
.C1NavPanel_Vista .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_Vista .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_Vista .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a.C1Closed span.C1TextNode
{
	background: url(Images/navpanel_BgSecondarySubmenuItemArrow.gif) no-repeat top right;
	border: none;
}
.C1NavPanel_Vista .C1NavPanelMenu .C1SubMenu .c1-v-flow li.C1ListItem a.C1Opened span.C1TextNode
{
	background: url(Images/navpanel_BgSecondarySubmenuItemArrow.gif) no-repeat bottom right;
	border: none;
}

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