styles.css

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

/* =========== Vista C1Menu =========================================== */

/*===================
		Menu Containers
=====================*/

.C1Menu_Vista
{
	font-size: 12px;
	font-family: Segoe UI, Myriad, Myriad Pro, Calibri, Arial, Sans-Serif;
	display: block;
	padding: 0;
	margin: 0;	
}
.C1Menu_Vista-C1Vertical
{
	background: url(Images/BgMenuVTop.gif) no-repeat top left;
	display: block;
	padding: 8px 0 0 0;
	margin: 0;
	width: 148px;
}
.C1Menu_Vista-C1Horizontal
{
	background: #000 url(Images/BgMenuH.gif) repeat-x top left;
	display: block;
	padding: 0;
	margin: 0;
	height:30px;
	width:100%;	
}
.C1Menu_Vista .c1-v-flow
{
	background: url(Images/BgMenuVBottom.gif) no-repeat bottom left;
	display: block;
	float: left;
	padding: 0 0 8px 0;
	margin: 0;
	width: 148px;	
}

.C1Menu_Vista .c1-h-flow
{
	display: block;
	float: left;
	padding: 1px 0;
	margin: 0;
	height:28px;
}

/*===================
	2-nd level
=====================*/
.C1Menu_Vista .C1SubMenu-C1Vertical
{
	display: block;
	padding: 8px 0 0 0;
	margin: -3px 0 0 0;
	background: url(Images/BgMenuVSecondaryTop.png) no-repeat top left;
	width: 230px;
}
* html .C1Menu_Vista .C1SubMenu-C1Vertical
{
	display: block;
	padding: 8px 0 0 0;
	margin: -3px 0 0 0;
	background: url(Images/BgMenuVSecondaryTop.gif) no-repeat top left;
	width: 226px;
}
.C1Menu_Vista-C1Vertical .C1SubMenu-C1Vertical
{
	margin: 0 0 0 1px;
}
.C1Menu_Vista-C1Horizontal .C1SubMenu-C1Vertical
{
	margin: 2px 0 0 0;
}
.C1Menu_Vista .C1SubMenu-C1Horizontal
{
	display: block;
	padding: 0 0 0 8px;
	margin: -3px 0 0 0;
	background: url(Images/BgMenuSecondaryMenuHLeft.png) no-repeat top left;
	height:52px;
}
* html .C1Menu_Vista .C1SubMenu-C1Horizontal
{
	display: block;
	padding: 0 0 0 8px;
	margin: -3px 0 0 0;
	background: url(Images/BgMenuSecondaryMenuHLeft.gif) no-repeat top left;
	height:48px;
}
.C1Menu_Vista-C1Vertical .C1SubMenu-C1Horizontal
{
	margin: 0 0 0 1px;
}
.C1Menu_Vista-C1Horizontal .C1SubMenu-C1Horizontal
{
	margin: 2px 0 0 0;
}
.C1Menu_Vista .C1SubMenu .c1-v-flow
{
	display: block;
	float: left;
	padding: 0 0 12px 0;
	margin: 0;
	background: url(Images/BgMenuVSecondaryBottom.png) no-repeat bottom left;
	width: 230px;
}
* html .C1Menu_Vista .C1SubMenu .c1-v-flow
{
	display: block;
	float: left;
	padding: 0 0 8px 0;
	margin: 0;
	background: url(Images/BgMenuVSecondaryBottom.gif) no-repeat bottom left;
	width: 226px;
}
.C1Menu_Vista .C1SubMenu .c1-h-flow
{
	display: block;
	float: left;
	padding: 0 12px 0 0;
	margin: 0;
	background: url(Images/BgMenuSecondaryMenuHRight.png) no-repeat top right;
	height:52px;
}
* html .C1Menu_Vista .C1SubMenu .c1-h-flow
{
	display: block;
	float: left;
	padding: 0 8px 0 0;
	margin: 0;
	background: url(Images/BgMenuSecondaryMenuHRight.gif) no-repeat top right;
	height:48px;
}

/* 3-rd(+) Level */
.C1Menu_Vista .C1SubMenu .C1SubMenu-C1Vertical
{
	display: block;
	padding: 3px 0 0 0;
	margin: 0;
	background: url(Images/BgMenuSecondarySubmenuTop.png) no-repeat top left;
	width: 229px;
}
* html .C1Menu_Vista .C1SubMenu .C1SubMenu-C1Vertical
{
	display: block;
	padding: 3px 0 0 0;
	margin: 0;
	background: url(Images/BgMenuSecondarySubmenuTop.gif) no-repeat top left;
	width: 225px;
}
.C1Menu_Vista .C1SubMenu-C1Vertical .C1SubMenu-C1Vertical
{
	margin: 0 0 0 -9px;
}
* html .C1Menu_Vista .C1SubMenu-C1Vertical .C1SubMenu-C1Vertical
{
	margin: 0 0 0 -5px;
}
.C1Menu_Vista .C1SubMenu-C1Horizontal .C1SubMenu-C1Vertical
{
	margin: -9px 0 0 0;
}
* html .C1Menu_Vista .C1SubMenu-C1Horizontal .C1SubMenu-C1Vertical
{
	margin: -5px 0 0 0;
}
.C1Menu_Vista .C1SubMenu .C1SubMenu-C1Vertical .C1SubMenu-C1Vertical
{
	margin: 0 0 0 -6px;
}
* html .C1Menu_Vista .C1SubMenu .C1SubMenu-C1Vertical .C1SubMenu-C1Vertical
{
	margin: 0 0 0 -2px;
}
.C1Menu_Vista .C1SubMenu .C1SubMenu-C1Horizontal .C1SubMenu-C1Vertical
{
	margin: -6px 0 0 0;
}
* html .C1Menu_Vista .C1SubMenu .C1SubMenu-C1Horizontal .C1SubMenu-C1Vertical
{
	margin: -2px 0 0 0;
}
.C1Menu_Vista .C1SubMenu .C1SubMenu .c1-v-flow
{
	display: block;
	float: left;
	padding: 0 0 7px 0;
	margin: 0;
	background: url(Images/BgMenuSecondarySubmenuBottom.png) no-repeat bottom left;
	width: 229px;
}
* html .C1Menu_Vista .C1SubMenu .C1SubMenu .c1-v-flow
{
	display: block;
	float: left;
	padding: 0 0 3px 0;
	margin: 0;
	background: url(Images/BgMenuSecondarySubmenuBottom.gif) no-repeat bottom left;
	width: 225px;
}

/* Context */
.C1Menu_Vista-C1Context,
.C1Menu_Vista-C1Context .C1SubMenu-C1Vertical,
.C1Menu_Vista-C1Context .C1SubMenu-C1Vertical .C1SubMenu-C1Vertical
{
	display: block;
	padding: 3px 0 0 0;
	/*margin: 0;*/
	margin: 0 0 0 -6px;
	background: url(Images/BgMenuSecondaryContextTop.png) no-repeat top left;
	width: 229px;
}
* html .C1Menu_Vista-C1Context, 
* html .C1Menu_Vista-C1Context .C1SubMenu-C1Vertical,
* html .C1Menu_Vista-C1Context .C1SubMenu-C1Vertical .C1SubMenu-C1Vertical
{
	display: block;
	padding: 3px 0 0 0;
	/*margin: 0;*/
	margin: 0 0 0 -2px;
	background: url(Images/BgMenuSecondaryContextTop.gif) no-repeat top left;
	width: 225px;
}

.C1Menu_Vista-C1Context .c1-v-flow, 
.C1Menu_Vista-C1Context .C1SubMenu .c1-v-flow,
.C1Menu_Vista-C1Context .C1SubMenu .C1SubMenu .c1-v-flow
{
	display: block;
	float: left;
	padding: 0 0 7px 0;
	margin: 0;
	background: url(Images/BgMenuSecondaryContextBottom.png) no-repeat bottom left;
	width: 229px;
}
* html .C1Menu_Vista-C1Context .c1-v-flow, 
* html .C1Menu_Vista-C1Context .C1SubMenu .c1-v-flow,
* html .C1Menu_Vista-C1Context .C1SubMenu .C1SubMenu .c1-v-flow
{
	display: block;
	float: left;
	padding: 0 0 3px 0;
	margin: 0;
	background: url(Images/BgMenuSecondaryContextBottom.gif) no-repeat bottom left;
	width: 225px;
}

/*====================
		List items (LI tag)
====================*/

/* 1-st level */
.C1Menu_Vista .c1-h-flow li.C1ListItem
{
	display: block;
	float: left;
	padding: 0;
	margin: 0;
	margin-right: 1px;
	text-align:left;
	width:auto;
}
.C1Menu_Vista .c1-v-flow li.C1ListItem
{
	background: url(Images/BgMenuVMiddle.gif) repeat-y top left;
	text-align:left;
	display: block;
	float: left;
	padding: 0 2px;
	width:144px;
	margin: 0;	
}

/* 2-nd level */
.C1Menu_Vista .C1SubMenu .c1-v-flow .C1ListItem
{
	display: block;
	float: left;
	padding: 0 12px 0 8px;
	width:210px;
	margin: 0;
	background: url(Images/BgMenuVSecondaryMiddle.png) repeat-y top left;
	text-align:left;
}
* html .C1Menu_Vista .C1SubMenu .c1-v-flow .C1ListItem
{
	display: block;
	float: left;
	padding: 0 8px;
	width:210px;
	margin: 0;
	background: url(Images/BgMenuVSecondaryMiddle.gif) repeat-y top left;
	text-align:left;
}
.C1Menu_Vista .C1SubMenu .c1-h-flow .C1ListItem
{
	display: block;
	float: left;
	padding: 8px 0 12px 0;
	margin: 0;
	width:auto;
	height:32px;
	background: url(Images/BgMenuSecondaryMenuHMiddle.png) repeat-x top left;
	text-align:left;
}
* html .C1Menu_Vista .C1SubMenu .c1-h-flow .C1ListItem
{
	display: block;
	float: left;
	padding: 8px 0;
	margin: 0;
	width:auto;
	height:32px;
	background: url(Images/BgMenuSecondaryMenuHMiddle.gif) repeat-x top left;
	text-align:left;
}

/* 3-rd(+) level */
.C1Menu_Vista .C1SubMenu .C1SubMenu .c1-v-flow .C1ListItem
{
	display: block;
	float: left;
	padding: 0 6px 0 2px;
	margin: 0;
	width: 221px;
	height:auto;
	background: url(Images/BgMenuSecondarySubmenuMiddle.png) repeat-y top left;
}
* html .C1Menu_Vista .C1SubMenu .C1SubMenu .c1-v-flow .C1ListItem
{
	display: block;
	float: left;
	padding: 0 2px;
	margin: 0;
	width: 221px;
	height:auto;
	background: url(Images/BgMenuSecondarySubmenuMiddle.gif) repeat-y top left;
}

/* Context */
.C1Menu_Vista-C1Context .c1-v-flow li.C1ListItem,
.C1Menu_Vista-C1Context .C1SubMenu .c1-v-flow .C1ListItem,
.C1Menu_Vista-C1Context .C1SubMenu .C1SubMenu .c1-v-flow .C1ListItem
{
	display: block;
	float: left;
	padding: 0 4px 0 0;
	margin: 0;
	width: 225px;
	height:auto;
	background: url(Images/BgMenuSecondaryContextMiddle.png) repeat-y top left;
}

* html .C1Menu_Vista-C1Context .c1-v-flow .C1ListItem, 
* html .C1Menu_Vista-C1Context .C1SubMenu .c1-v-flow .C1ListItem,
* html .C1Menu_Vista-C1Context .C1SubMenu .C1SubMenu .c1-v-flow .C1ListItem
{
	display: block;
	float: left;
	padding: 0;
	margin: 0;
	width: 225px;
	height:auto;
	background: url(Images/BgMenuSecondaryContextMiddle.gif) repeat-y top left;
}



/*====================
		Link items and text inside links
====================*/

/* 1-st level */
.C1Menu_Vista .c1-v-flow .C1Link
{
	cursor: pointer;
	background: url(Images/BgMenuVItem.gif) no-repeat 400px 400px;
	text-decoration: none;
	font-size: 12px;
	font-weight: 100;	
	border: none;
	outline:none;
		display: block;
	padding: 0;
	margin: 0 5px 0 6px;
	width: 133px;
	height: 33px;
}
.C1Menu_Vista .c1-h-flow .C1Link
{
	cursor: pointer;
	background: url(Images/BgMenuHItem.gif) no-repeat top left;
	text-decoration: none;
	font-size: 12px;
	font-weight: 100;
	border: none;
	outline:none;
		display: block;
	float:left;
	padding: 0;
	margin: 0;
	width: 110px;
	height: 28px;
}

.C1Menu_Vista .c1-h-flow .C1Link .C1TextNode
{
	cursor: pointer;
	text-align:left;
	text-decoration: none;
	font-size: 12px;
	color: #fff;
	vertical-align: middle;
	line-height:28px;
	display:block;
	float:left;	
	padding:0 2px 0 7px;	
	margin:0;	
	height:28px;
	width: 102px;	
}


.C1Menu_Vista .c1-v-flow .C1Link .C1TextNode
{
	cursor: pointer;
	line-height:33px;
	vertical-align: middle;
	text-align:left;
	text-decoration: none;
	font-size: 12px;
	color: #fff;
	display:block;
	float:left;
	padding:0 0 0 4px;
		/*padding:0 4px;*/
	margin:0;
	margin-left:3px;/**/
	height:33px;
	width: 125px;	
}

/* 2-nd(+) level */
.C1Menu_Vista .C1SubMenu .c1-v-flow .C1Link
{
	display: block;
	background: url(Images/BgMenuVSecondaryItem.gif) repeat-x 400px 400px;
	text-decoration: none;
	font-size: 12px;
	padding: 0;
	margin: 0 1px;
	font-weight: 100;
	border: none;
	width: 208px;
	height: 36px;
}

.C1Menu_Vista .C1SubMenu .c1-h-flow .C1Link
{
	display: block;
	background: url(Images/BgMenuSecondaryMenuItemH.gif) repeat-x 400px 400px;
	border: solid 0px;
	padding:1px;
	text-decoration: none;
	height:30px;
	width:auto;
}

.C1Menu_Vista .C1SubMenu .c1-v-flow .C1Link .C1TextNode
{
	display:block;
	float:left;
	padding:0 2px;
	margin:0;
	height:36px;
	width: 204px;
	text-align:left;
	text-decoration: none;
	font-size: 12px;
	color: #000;
	vertical-align: middle;
	line-height:36px;
}
.C1Menu_Vista .C1SubMenu .c1-h-flow .C1Link .C1TextNode
{
	display:block;
	float:left;
	padding:0 15px 0 4px;
	height:30px;
	width:auto;
	margin:0;
	text-align:left;
	text-decoration: none;
	font-size: 12px;
	color: #000;
	vertical-align: middle;
	line-height:30px;
}

/* 3-rd(+) level */
.C1Menu_Vista .C1SubMenu .C1SubMenu .c1-v-flow .C1ListItem .C1Link
{
	display: block;
	background: url(Images/BgMenuSecondarySubmenuItem.gif) no-repeat 400px 400px;
	text-decoration: none;
	font-size: 12px;
	padding: 0 0 0 0;
	margin: 0 1px;
	font-weight: 100;
	border: none;
	width: 219px;
	height: 22px;
}

.C1Menu_Vista .C1SubMenu .C1SubMenu .c1-v-flow .C1Link .C1TextNode
{	
	display: block;
	width: 159px;
	height: 22px;
	padding: 0 30px 0 30px;
	margin: 0;
	text-decoration: none;
	font-size: 12px;
	color: #000;
	vertical-align: middle;
	line-height:22px;
}

/* Context */
.C1Menu_Vista-C1Context .c1-v-flow .C1ListItem .C1Link, 
.C1Menu_Vista-C1Context .C1SubMenu .c1-v-flow .C1ListItem .C1Link,
.C1Menu_Vista-C1Context .C1SubMenu .C1SubMenu .c1-v-flow .C1ListItem .C1Link
{
	display: block;
	background: url(Images/BgMenuSecondaryContextItem.gif) no-repeat 400px 400px;
	text-decoration: none;
	font-size: 12px;
	padding: 0 0 0 0;
	margin: 0;
	font-weight: 100;
	border: none;
	width: 225px;
	height: 26px;
}
.C1Menu_Vista-C1Context .c1-v-flow .C1Link .C1TextNode, 
.C1Menu_Vista-C1Context .C1SubMenu .c1-v-flow .C1Link .C1TextNode,
.C1Menu_Vista-C1Context .C1SubMenu .C1SubMenu .c1-v-flow .C1Link .C1TextNode
{	
	display: block;
	width: 190px;/*165px;*/
	height: 26px;
	padding: 0 30px 0 6px;/*30px;*/
	margin: 0;
	text-decoration: none;
	font-size: 12px;
	color: #fff;
	vertical-align: middle;
	line-height:26px;
}

/*====================
		Heading items
====================*/

/* 1-st level */

.C1Menu_Vista .c1-v-flow .C1Heading
{
	display: block;
	float:left;
	width:144px;
	margin:1px 0;
	color: #FFFFFF;
}
.C1Menu_Vista .c1-v-flow .C1Heading .C1TextNode
{
	font-size: 12px;
	font-weight: bold;
  margin: 4px 8px 4px 8px;
  padding-left: 3px;
  padding-bottom: 5px;
	border-bottom: solid 1px #666;
}
.C1Menu_Vista .C1SubMenu .c1-v-flow .C1Heading .C1TextNode,
.C1Menu_Vista-C1Context .c1-v-flow .C1Heading .C1TextNode
{
	/* restore styles for submenus and context headers */
	padding-left: 0px;
  padding-bottom: 0px;	
	border-bottom: none; 
}
.C1Menu_Vista .c1-h-flow .C1Heading
{
	display: block;
	float:left;
	margin:0;