styles.css

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

/* =========== ArcticFox C1Menu =========================================== */
/* Flexible theme  */


/* Default sizes */
.C1Menu_ArcticFox-C1Vertical,
.C1Menu_ArcticFox-C1Context-C1Vertical,
.C1Menu_ArcticFox .C1SubMenu-C1Vertical
{
	width: 230px;
}
.C1Menu_ArcticFox .C1SubMenu-C1Vertical
{	
	width: 250px;
}

/*=========================
	Containers
===========================*/
.C1Menu_ArcticFox
{
	white-space:nowrap;
}

.C1Menu_ArcticFox-C1Horizontal {
	display: block;
	padding: 0;
	margin: 0;
	background: #C7C7C7 url(Images/arcticfox_horiz_bg1.gif) repeat-x top left;
	border:solid 1px #999999;
	width:100%;
	/* min-height:32px; */
}

.C1DesignMode-C1Menu_ArcticFox-C1Horizontal {
	height:32px;
}

.C1DesignMode-C1Menu_ArcticFox-C1Vertical > .C1ScrollContainer > .c1-v-flow > .C1MenuItem {
  height:32px;
}

.C1Menu_ArcticFox-C1Context-C1Horizontal,
.C1Menu_ArcticFox .C1SubMenu-C1Horizontal
{
	display: block;
	padding: 0;
	margin: 0;
	background: #C7C7C7 url(Images/arcticfox_horiz_bg1.gif) repeat-x top left;
	border:solid 1px #999999;
	width:100%;
	/* height:32px; */
}
.C1Menu_ArcticFox-C1Vertical,
.C1Menu_ArcticFox-C1Context-C1Vertical,
.C1Menu_ArcticFox .C1SubMenu-C1Vertical
{
	display: block;
	float:left;
	padding: 0;
	margin: 0;	
	background: #C6C6C6 url(Images/arcticfox_vert_bg1.gif) repeat-x top left;
	border:solid 1px #999999;
}
.C1Menu_ArcticFox .c1-v-flow, 
.C1Menu_ArcticFox .c1-h-flow
{
	display: block;
	padding: 0;
	margin:0;
	width: 100%;
	height: 100%;
}
.C1Menu_ArcticFox .C1ScrollContainer
{
	display: block;
	padding: 0;
	margin:0;
	border:solid 1px #fff;
}

.C1Menu_ArcticFox .c1-v-flow, 
.C1Menu_ArcticFox .C1SubMenu .c1-v-flow
{
	display: block;
	float:left;
	padding: 0;
	margin:0;
	width: 100%;
	height: 100%;
}
.C1Menu_ArcticFox .c1-h-child
{
	display: block;
	padding: 0;
	margin:0;
	text-align:left;
	width: auto;
	height: 100%;	
}

/* Vertical Menu items*/
.C1Menu_ArcticFox .c1-v-child, 
.C1Menu_ArcticFox .C1SubMenu .c1-v-child

{
	display:block;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}
/*====================
	 Heading Items
======================*/
.C1Menu_ArcticFox .C1Heading
{
	display: block;
	float:left;
	margin: 0;
	padding: 0;
	font-size:1em;
	background:#999 url(Images/arcticfox_header_bg.gif) repeat-x top left;
	vertical-align:middle;
}
.C1Menu_ArcticFox .c1-v-child .C1Heading,
.C1Menu_ArcticFox .C1SubMenu .c1-v-child .C1Heading
{
	display: block;
	float:none;
	margin: 0;
	padding: 0;
	font-size:1em;
	background:#999 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}
.C1Menu_ArcticFox .c1-h-child .C1Heading, 
.C1Menu_ArcticFox .C1SubMenu .c1-h-child .C1Heading
{
	display: block;
	height: 100%;
	margin: 0;
	padding: 1px;
	font-size:1em;
	width:auto;
	background:#999 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}
.C1Menu_ArcticFox .c1-v-child .C1Heading .C1TextNode
{
	display:block;
	float:none;
	padding:.2em 0 .1em 0;
	font-weight:900;
	margin:0;
	color:#fff;
	text-align:left;
	vertical-align:middle;
}
.C1Menu_ArcticFox .c1-h-child .C1Heading .C1TextNode
{
	display:block;
	padding:.3em 10px .3em 10px;
	font-weight:900;
	margin:0;
	color:#fff;
	text-align:left;
	vertical-align:middle;
}
/*=========================
	Disabled Item
===========================*/
.C1Menu_ArcticFox .C1Disabled .C1TextNode
{
	color: #666;
}
/*=============================
	Seperator
===============================*/
.C1Menu_ArcticFox .c1-v-child .C1Separator,
.C1Menu_ArcticFox .C1SubMenu .c1-v-child .C1Separator
{
	background: url(Images/arcticfox_vert_separator1.gif) repeat-x center center;
	width:96%;
	height:2px;	
	line-height:2px;	
	padding: 0;
	margin:1px 2%;
}
.C1Menu_ArcticFox .c1-h-child .C1Separator, 
.C1Menu_ArcticFox .C1SubMenu .c1-h-child .C1Separator
{
	background: url(Images/arcticfox_horiz_separator1.gif) repeat-y center center;
	width:3px;
	height: 100%;
	line-height:28px;	
	padding: 0;
	margin: 0;
}
/* Link Item */



.C1Menu_ArcticFox .C1Link
{
	cursor: pointer;
	outline:none;
	display: block;
	padding: 0;
	margin: 0;
	text-decoration: none;
	font-weight: 100;
	vertical-align:middle;
	float:left;
}
.C1Menu_ArcticFox .c1-v-child .C1Link
{
	border-bottom:solid 0px;
	border-top:solid 0px;
	border-left:solid 0px;
	border-right:solid 0px;
	padding-bottom:1px;
	padding-top:1px;
	padding-left:0px;
	padding-right:0px;
 	display:block;
	width: 100%;
}


.C1Menu_ArcticFox .c1-h-child .C1Link
{
	border-bottom:solid 0px;
	border-top:solid 0px;
	border-left:solid 0px;
	border-right:solid 0px;
	padding-bottom:0px;
	padding-top:0px;
	padding-left:1px;
	padding-right:1px;
	display:block;
	width:auto;	
	height:100%;	
}



/* Link Item  - Active, Hover, or Focus */
.C1Menu_ArcticFox .C1Active,
.C1Menu_ArcticFox .C1Hover,
.C1Menu_ArcticFox .C1Focus,
.C1Menu_ArcticFox .C1Opened
{
	display: block;
	background:#FDFDFD url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
	text-decoration: none;

}

.C1Menu_ArcticFox .C1CheckableSupport .C1Checked
{
	display: block;
	background:#FDFDFD url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
	text-decoration: none;

}

.C1Menu_ArcticFox .c1-v-flow .C1Active,
.C1Menu_ArcticFox .c1-v-flow .C1Hover,
.C1Menu_ArcticFox .c1-v-flow .C1Focus,
.C1Menu_ArcticFox .c1-v-flow .C1Opened
{
	border-bottom:solid 1px #999;
	border-top:solid 1px #999;
	border-left:solid 0px;
	border-right:solid 0px;
	padding-bottom:0px;
	padding-top:0px;
	padding-left:0px;
	padding-right:0px;
}

.C1Menu_ArcticFox .c1-h-flow .C1Hover,
.C1Menu_ArcticFox .c1-h-flow .C1Active,
.C1Menu_ArcticFox .c1-h-flow .C1Focus,
.C1Menu_ArcticFox .c1-h-flow .C1Opened
{
	border-bottom:solid 0px;
	border-top:solid 0px;
	border-left:solid 1px #999;
	border-right:solid 1px #999;
	padding-bottom:0px;
	padding-top:0px;
	padding-left:0px;
	padding-right:0px;
}

/* Text in Link, Header, or other item */

.C1Menu_ArcticFox .C1TextNode
{
	display:block;
	padding:.3em 10px .3em 10px;
	margin:0;
	color:#fff;
	text-align:left;
	vertical-align:middle;
}
.C1Menu_ArcticFox .c1-h-child .C1TextNode
{
	vertical-align:middle;
	margin-top: 2px;
}
.C1Menu_ArcticFox .c1-v-child .C1TextNode
{
	margin-top: 0px;
}

/* Text in link */

.C1Menu_ArcticFox .C1Link .C1TextNode
{
	color:#333333;
	vertical-align:middle;
}

.C1Menu_ArcticFox .C1Hover .C1TextNode
{
	color:#333333;
	vertical-align:middle;
}

.C1Menu_ArcticFox .c1-h-flow .C1Closed .C1TextNode, 
.C1Menu_ArcticFox .C1SubMenu .c1-h-flow .C1Closed .C1TextNode
{
	background: url(Images/arrow_down.gif) no-repeat center right;
	margin: 0 5px 0 0;
	margin-top: 2px;
	vertical-align:middle;
}
.C1Menu_ArcticFox .c1-h-child .C1Opened .C1TextNode, 
.C1Menu_ArcticFox .C1SubMenu .c1-h-child .C1Opened .C1TextNode
{
	background: url(Images/arrow_down.gif) no-repeat center right;
	margin: 0 5px 0 0;
	margin-top: 2px;
	vertical-align:middle;
}
.C1Menu_ArcticFox .c1-v-child .C1Closed .C1TextNode, 
.C1Menu_ArcticFox .C1SubMenu .c1-v-flow .C1Closed .C1TextNode
{
	background: url(Images/arrow_right.gif) no-repeat center right;
	margin: 0 5px 0 0;
}