styles.css

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

/* =========== ArcticFox C1NavPanel =========================================== */

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



/* =========== ArcticFox C1Accordion =========================================== */
.C1NavPanel_ArcticFox .C1HeaderPanel
{
    cursor:pointer;    
    
}
.C1NavPanel_ArcticFox-C1Top,
.C1NavPanel_ArcticFox-C1Bottom
{
	display:block;
	float:none;
	clear:both;
	width:100%;
	margin:0;
	padding:0;
	border:solid 1px #999;
}
.C1NavPanel_ArcticFox-C1Left,
.C1NavPanel_ArcticFox-C1Right
{
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1NavPanel_ArcticFox .c1-v-flow
{
	display:block;
	float:none;
	clear:both;
	width:100%;
	margin:0;
	padding:0;
}
.C1NavPanel_ArcticFox .c1-h-flow
{
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1NavPanel_ArcticFox-C1Top  .C1AccordionPane,
.C1NavPanel_ArcticFox-C1Bottom  .C1AccordionPane
{
	display:block;
	float:none;
	clear:both;
	width:100%;
	margin:0;
	padding:0;
}
.C1NavPanel_ArcticFox-C1Left  .C1AccordionPane,
.C1NavPanel_ArcticFox-C1Right  .C1AccordionPane
{
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1NavPanel_ArcticFox .C1Bottom .C1HeaderPanel
{
	border-top:solid 1px #999;
	background: #C6C6C6 url(Images/arcticfox_horiz_bg1.gif) repeat-x top left;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
	min-height:35px;
}

.C1NavPanel_ArcticFox-C1Bottom .C1FirstItem .C1HeaderPanel
{
	border:none;
}
.C1NavPanel_ArcticFox .C1Top .C1HeaderPanel
{
	border-bottom:solid 1px #999;
	background: #C6C6C6 url(Images/arcticfox_horiz_bg1.gif) repeat-x top left;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
	min-height:35px;
}
.C1NavPanel_ArcticFox-C1Top .C1FirstItem .C1HeaderPanel
{
	border:none;
}
.C1NavPanel_ArcticFox-C1Top .C1Closed-C1Hover-C1HeaderPanel,
.C1NavPanel_ArcticFox-C1Bottom .C1Closed-C1Hover-C1HeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1NavPanel_ArcticFox-C1Top .C1Closed-C1Active-C1Hover-C1HeaderPanel,
.C1NavPanel_ArcticFox-C1Bottom .C1Closed-C1Active-C1Hover-C1HeaderPanel
{
	background: #999 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}
.C1NavPanel_ArcticFox-C1Top .C1Opened .C1HeaderPanel,
.C1NavPanel_ArcticFox-C1Bottom .C1Opened .C1HeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1NavPanel_ArcticFox-C1Top .C1Opened-C1Hover-C1HeaderPanel,
.C1NavPanel_ArcticFox-C1Bottom .C1Opened-C1Hover-C1HeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1NavPanel_ArcticFox-C1Top .C1Opened-C1Active-C1Hover-C1HeaderPanel,
.C1NavPanel_ArcticFox-C1Bottom .C1Opened-C1Active-C1Hover-C1HeaderPanel
{
	background: #666 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}

.C1NavPanel_ArcticFox .C1Right .C1HeaderPanel
{
	border-left:solid 1px #999;
	background: #C6C6C6 url(Images/arcticfox_horiz_bg1.gif) repeat-x top left;
	display:block;
	float:left;
	clear:none;
	margin:0;
	padding:0;
	min-width:35px;
}
.C1NavPanel_ArcticFox-C1Right .C1FirstItem .C1HeaderPanel
{
	border:none;
}
.C1NavPanel_ArcticFox .C1Left .C1HeaderPanel
{
	border-right:solid 1px #999;
	background: #C6C6C6 url(Images/arcticfox_horiz_bg1.gif) repeat-x top left;
	display:block;
	float:left;
	clear:none;
	margin:0;
	padding:0;
	min-width:35px;
}
.C1NavPanel_ArcticFox-C1Left .C1FirstItem .C1HeaderPanel
{
	border:none;
}
.C1NavPanel_ArcticFox-C1Right .C1Closed-C1Hover-C1HeaderPanel,
.C1NavPanel_ArcticFox-C1Left .C1Closed-C1Hover-C1HeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1NavPanel_ArcticFox-C1Right .C1Closed-C1Active-C1Hover-C1HeaderPanel,
.C1NavPanel_ArcticFox-C1Left .C1Closed-C1Active-C1Hover-C1HeaderPanel
{
	background: #666 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}
.C1NavPanel_ArcticFox-C1Right .C1Opened .C1HeaderPanel,
.C1NavPanel_ArcticFox-C1Left .C1Opened .C1HeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1NavPanel_ArcticFox-C1Right .C1Opened-C1Hover-C1HeaderPanel,
.C1NavPanel_ArcticFox-C1Left .C1Opened-C1Hover-C1HeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1NavPanel_ArcticFox-C1Right .C1Opened-C1Active-C1Hover-C1HeaderPanel,
.C1NavPanel_ArcticFox-C1Left .C1Opened-C1Active-C1Hover-C1HeaderPanel
{
	background: #666 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}

.C1NavPanel_ArcticFox-C1Top .C1HeaderPanel .C1Outer,
.C1NavPanel_ArcticFox-C1Bottom .C1HeaderPanel .C1Outer
{
	background: none;
	display:block;
	float:none;
	clear:both;
	margin:0;
	border: solid 1px #fff;
}

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

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

.C1NavPanel_ArcticFox .C1Bottom .C1HeaderPanel .C1Content
{
	color: #000000;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:.5em;
	vertical-align:middle;
}

.C1NavPanel_ArcticFox .C1Top .C1HeaderPanel .C1Content
{
	color: #000000;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:.5em;
	vertical-align:middle;
}

.C1NavPanel_ArcticFox .C1Right .C1HeaderPanel .C1Content
{
	color: #000000;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:.5em;
	vertical-align:middle;
}

.C1NavPanel_ArcticFox .C1Left .C1HeaderPanel .C1Content
{
	color: #000000;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:.5em;
	vertical-align:middle;
}

.C1NavPanel_ArcticFox .C1Bottom .C1ContentPanel
{
	border-top:1px solid #999;
	background: #fff;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:.5em;
}

.C1NavPanel_ArcticFox .C1Top .C1ContentPanel
{
	border-bottom:1px solid #999;
	background: #fff;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:.5em;
}

.C1NavPanel_ArcticFox .C1Right .C1ContentPanel
{
	border-left:1px solid #999;
	background: #fff;
	display:block;
	float:left;
	clear:none;
	margin:0;
	padding:0;
}
.C1NavPanel_ArcticFox .C1Right .C1ContentPanel .C1Content
{
	padding:.5em;
}
.C1NavPanel_ArcticFox .C1Left .C1ContentPanel
{
	border-right:1px solid #999;
	background: #fff;
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1NavPanel_ArcticFox .C1Left .C1ContentPanel .C1Content
{
	padding:.5em;
}

/* Design mode only */

.C1DesignMode-C1NavPanel_ArcticFox-C1Top .C1Top .C1HeaderPanel,
.C1DesignMode-C1NavPanel_ArcticFox-C1Top-C1Disabled .C1Top .C1HeaderPanel,
.C1DesignMode-C1NavPanel_ArcticFox-C1Bottom .C1Bottom .C1HeaderPanel,
.C1DesignMode-C1NavPanel_ArcticFox-C1Bottom-C1Disabled .C1Bottom .C1HeaderPanel
{
	height:35px;
}
.C1DesignMode-C1NavPanel_ArcticFox-C1Left .C1Left .C1HeaderPanel,
.C1DesignMode-C1NavPanel_ArcticFox-C1Left-C1Disabled .C1Left .C1HeaderPanel,
.C1DesignMode-C1NavPanel_ArcticFox-C1Right .C1Right .C1HeaderPanel,
.C1DesignMode-C1NavPanel_ArcticFox-C1Right-C1Disabled .C1Right .C1HeaderPanel
{
  width:35px;
}

/* end of ArcticFox C1Accordion =========================================== */

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

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

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

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



.C1NavPanel_ArcticFox .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_ArcticFox .C1NavPanelMenu * 
{
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}
.C1NavPanel_ArcticFox .C1NavPanelMenu
{    
    background: #D5D5D5 url(Images/arcticfox_horiz_bg1.gif) repeat-x top center;
  border-top: solid 1px #999999;

}
.C1NavPanel_ArcticFox .C1NavPanelMenu .C1Link
{	
     cursor:pointer;
	text-decoration: none;
	margin-left: 5px;
}

/* C1NavPanelMenu text color */
.C1NavPanel_ArcticFox .C1NavPanelMenu * {
	color: #080808;
}

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

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

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

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

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

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