styles.css

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

/* =========== Office2007Blue C1Menu =========================================== */

/* Default layout */

.C1Menu_Office2007Blue-C1Vertical,
.C1Menu_Office2007Blue-C1Context-C1Vertical,
.C1Menu_Office2007Blue .C1SubMenu-C1Vertical
{
	width:12em;
}

/* ----------- Main Menu ----------- */
.C1Menu_Office2007Blue
{
	display: block;
	padding: 0;
	margin: 0;
	font-size: 12px;
	background: #bfdbff;
	font-family: Segoe UI, Myriad, Myriad Pro, Calibri, Arial, Sans-Serif;
	border: solid 1px #6593cf;
}
.C1Menu_Office2007Blue-C1Horizontal,
.C1Menu_Office2007Blue .C1Horizontal
{
	width:100%;
	min-height: 22px;
}
.C1DesignMode-C1Menu_Office2007Blue-C1Horizontal,
.C1DesignMode-C1Menu_Office2007Blue .C1Horizontal
{
    height: 22px;
}

.C1Menu_Office2007Blue .C1List
{
	margin: 0;
	padding: 0;
}
.C1Menu_Office2007Blue .c1-h-flow .C1ListItem
{
	float:left;
	padding:2px 1px;
	margin:0;
	text-align:center;
}
.C1Menu_Office2007Blue .c1-v-flow .C1ListItem
{
	display:block;
	padding: 2px 2%;
	margin:0;
	width:96%;
	text-align:left;
}


/* Link Item */

.C1Menu_Office2007Blue .C1Link
{
	cursor: pointer;
	display: block;
	float:left;
	background: url(Images/BgMenuItem.gif) repeat-x 400px 400px;
	text-decoration: none;
	padding: 0;
	margin: 0;
	border: solid 1px #bfdbff;
	font-weight: 100;
	height: 20px;
	outline:none;
}
.C1Menu_Office2007Blue .c1-v-flow .C1Link
{
	float:none;
}
.C1Menu_Office2007Blue .c1-h-flow .C1Link
{
}
/* Link Item  - Active, Hover, or Focus */
.C1Menu_Office2007Blue li.C1ListItem .C1Hover,
.C1Menu_Office2007Blue li.C1ListItem .C1Focus
{
	background: url(Images/BgMenuItem.gif) repeat-x top left;
	border: solid 1px #ffbd69;
	text-decoration: none;
}
/* Link Item with submenu expanded */
.C1Menu_Office2007Blue li.C1ListItem .C1Active,
.C1Menu_Office2007Blue li.C1ListItem .C1Opened
{
	background: url(Images/BgMenuItem.gif) repeat-x bottom left;
	border: solid 1px #6593cf;
	text-decoration: none;
}
.C1Menu_Office2007Blue .C1CheckableSupport li.C1ListItem .C1Checked
{
	background: url(Images/BgMenuItem.gif) repeat-x bottom left;
	border: solid 1px #6593cf;
	text-decoration: none;
}

.C1Menu_Office2007Blue .c1-v-flow .C1Link span.C1TextNode
{
	cursor: pointer;
	font-size: 12px;
	color: #00156e;
	display:block;
	float:none;
	padding:2px;
	margin:0;
	height:16px;
	line-height:16px;
	text-align:left;
	vertical-align:middle;
}
.C1Menu_Office2007Blue .c1-h-flow .C1Link span.C1TextNode
{
	cursor: pointer;
	font-size: 12px;
	color: #00156e;
	display:block;
	float:left;
	padding:2px 8px;
	margin:0;
	height:16px;
	line-height:16px;
	text-align:left;
	vertical-align:middle;
}

/* Disabled Item */
.C1Menu_Office2007Blue .C1Disabled span.C1TextNode
{
	cursor:text;
	color: #666;
}
.C1Menu_Office2007Blue .c1-v-flow .C1Link img.C1LeftImage
{
	padding:1px 2px 0 2px;
	margin:0;
	vertical-align:middle;
}
.C1Menu_Office2007Blue .c1-h-flow .C1Link img.C1LeftImage
{
	padding:1px 2px 0 2px;
	margin:0;
	vertical-align:middle;
}
.C1Menu_Office2007Blue .c1-v-flow .C1Link img.C1RightImage
{
	padding:1px 2px 0 2px;
	margin:0;
	vertical-align:middle;
}
.C1Menu_Office2007Blue .c1-h-flow .C1Link img.C1RightImage
{
	padding:1px 2px 0 2px;
	margin:0;
	vertical-align:middle;
}

/* Seperator */
.C1Menu_Office2007Blue .c1-v-flow span.C1Separator
{
	background: url(Images/BgMenuSeparatorVertical.gif) no-repeat center center;
	height: 7px;
	width:auto;
	padding: 0 2px 0 2px;
}
.C1Menu_Office2007Blue .c1-h-flow span.C1Separator
{
	background: url(Images/BgMenuSeparator.gif) no-repeat center center;
	width: 7px;
	height: 22px;
	padding: 0 2px 0 2px;
}
/* ----------- Submenu ----------- */
.C1Menu_Office2007Blue .C1SubMenu-C1Vertical
{
	display: block;
	padding: 6px 0 0 0;
	margin: -3px 0 0 0;
	background: url(Images/BgPrimarySubmenuTop.png) no-repeat top left;
	width: 204px;
}
* html .C1Menu_Office2007Blue .C1SubMenu-C1Vertical
{
	display: block;
	padding: 6px 0 0 0;
	margin: -3px 0 0 0;
	background: url(Images/BgPrimarySubmenuTop.gif) no-repeat top left;
	width: 200px;
}
.C1Menu_Office2007Blue-C1Vertical .C1SubMenu-C1Vertical
{
	margin: 2px 0 0 1px;
}
.C1Menu_Office2007Blue-C1Horizontal .C1SubMenu-C1Vertical
{
	margin: 1px 0 0 0;
}
.C1Menu_Office2007Blue .C1SubMenu-C1Horizontal
{
	display: block;
	padding: 0 0 0 6px;
	margin: -3px 0 0 0;
	background: url(Images/BgPrimarySubmenuLeftH.png) no-repeat top left;
	height:52px;
}
* html .C1Menu_Office2007Blue .C1SubMenu-C1Horizontal
{
	display: block;
	padding: 0 0 0 6px;
	margin: -3px 0 0 0;
	background: url(Images/BgPrimarySubmenuLeftH.gif) no-repeat top left;
	height:48px;
}
.C1Menu_Office2007Blue-C1Vertical .C1SubMenu-C1Horizontal
{
	margin: 0 0 0 1px;
}
.C1Menu_Office2007Blue-C1Horizontal .C1SubMenu-C1Horizontal
{
	margin: 1px 0 0 0;
}
.C1Menu_Office2007Blue .C1SubMenu ul.c1-v-flow
{
	display: block;
	float: left;
	padding: 0 0 16px 0;
	margin: 0;
	background: url(Images/BgPrimarySubmenuBottom.png) no-repeat bottom left;
	width: 204px;
}
* html .C1Menu_Office2007Blue .C1SubMenu ul.c1-v-flow
{
	display: block;
	float: left;
	padding: 0 0 12px 0;
	margin: 0;
	background: url(Images/BgPrimarySubmenuBottom.gif) no-repeat bottom left;
	width: 200px;
}
.C1Menu_Office2007Blue .C1SubMenu ul.c1-h-flow
{
	display: block;
	float: left;
	padding: 0 10px 0 0;
	margin: 0;
	background: url(Images/BgPrimarySubmenuRightH.png) no-repeat top right;
	height:52px;
}
* html .C1Menu_Office2007Blue .C1SubMenu ul.c1-h-flow
{
	display: block;
	float: left;
	padding: 0 6px 0 0;
	margin: 0;
	background: url(Images/BgPrimarySubmenuRightH.gif) no-repeat top right;
	height:48px;
}
.C1Menu_Office2007Blue .C1SubMenu-C1Vertical li.C1ListItem
{
	display: block;
	float: left;
	padding: 0 10px 0 6px;
	width: 188px;
	margin: 0;
	background: url(Images/BgPrimarySubmenuMiddle.png) repeat-y top left;
	text-align:left;
}
* html .C1Menu_Office2007Blue .C1SubMenu-C1Vertical li.C1ListItem
{
	display: block;
	float: left;
	padding: 0 6px;
	width: 188px;
	margin: 0;
	background: url(Images/BgPrimarySubmenuMiddle.gif) repeat-y top left;
	text-align:left;
}

.C1Menu_Office2007Blue .C1SubMenu-C1Horizontal li.C1ListItem
{
	display: block;
	float: left;
	padding: 6px 0 11px 0;
	margin: 0;
	width:auto;
	height:36px;
	background: url(Images/BgPrimarySubmenuMiddleH.png) repeat-x top left;
	text-align:left;
}
* html .C1Menu_Office2007Blue .C1SubMenu-C1Horizontal li.C1ListItem
{
	display: block;
	float: left;
	padding: 6px 0;
	margin: 0;
	width:auto;
	height:36px;
	background: url(Images/BgPrimarySubmenuMiddleH.gif) repeat-x top left;
	text-align:left;
}
/*================================
	 Heading Items 
==================================*/
/* 1-st level */
.C1Menu_Office2007Blue .C1Heading
{
	display: block;
	color: #00156e;	
	margin: 0;
	font-size: 12px;
	font-weight: bold;
}
.C1Menu_Office2007Blue .C1Heading .C1TextNode
{
	margin-top: 3px;
	margin-left: 3px;
}

.C1Menu_Office2007Blue .c1-h-flow .C1Heading .C1TextNode
{
	padding:2px 8px;
	margin:0;
	height:16px;
	line-height:16px;
	text-align:left;
	vertical-align:middle;
}
/* 2-nd level */
.C1Menu_Office2007Blue .C1SubMenu .c1-v-flow .C1Heading
{
	display: block;
	float:left;
	width:100%;
	height: 21px;
	margin:0;
	padding:0;
	line-height:21px;
	color: #00156e;
	background: #dde7ee;
	border-bottom: solid 1px #c5c5c5;
	font-size: 12px;
	font-weight: 900;
}
.C1Menu_Office2007Blue .C1SubMenu .c1-v-flow .C1Heading .C1TextNode
{
	margin-top: 3px;
	margin-left: 8px;
}

.C1Menu_Office2007Blue .C1SubMenu .c1-h-flow .C1Heading
{
	display: block;
	float:left;
	width:auto;	
	margin:1px 8px 0 0;
	padding:0;	
	color: #00156e;
	font-size: 12px;
	font-weight: bold;
	vertical-align: middle;
	height:auto;
	line-height:normal;
}
.C1Menu_Office2007Blue .C1SubMenu .c1-h-flow .C1Heading .C1TextNode
{
	height: 32px;
	line-height:32px;
	vertical-align: middle;
	margin:0;
	padding:0 3px;
}


/* 3-rd level*/
.C1Menu_Office2007Blue .C1SubMenu .C1SubMenu .c1-v-flow .C1Heading
{
	display: block;
	float:left;
	margin:0;
	padding:0;
	height:auto;
	line-height:normal;
	width:100%;
	height: 21px;
	color: #00156e;
	background-color: #dde7ee;
	border-bottom: solid 1px #c5c5c5;
	font-size: 12px;
	font-weight: bold;
}
.C1Menu_Office2007Blue .C1SubMenu .C1SubMenu .c1-v-flow .C1Heading .C1TextNode
{
	margin-top: 3px;
	margin-left: 8px;
}
/* Context */
.C1Menu_Office2007Blue-C1Context .c1-v-flow .C1Heading
{
	display: block;
	float:left;
	width:100%;
	height: 21px;
	color: #00156e;
	background-color: #dde7ee;
	border-bottom: solid 1px #c5c5c5;
	font-size: 12px;
	font-weight: bold;
}
.C1Menu_Office2007Blue-C1Context .c1-v-flow .C1Heading .C1TextNode
{
	margin-top: 3px;
	margin-left: 8px;
}



/*==================== 
	Link Items and text inside links
======================*/
.C1Menu_Office2007Blue .C1SubMenu .c1-v-flow .C1Link
{
	display: block;
	background: url(Images/BgPrimarySubmenuItem.gif) repeat-x 400px 400px;
	text-decoration: none;
	font-size: 12px;
	padding: 0;
	margin: 0;
	font-weight: 100;
	border: none;
	width: 188px;
	height: 44px;
}
/* Link Item - Hover, Active, or Focus */
.C1Menu_Office2007Blue .C1SubMenu .c1-v-flow .C1Hover,
.C1Menu_Office2007Blue .C1SubMenu .c1-v-flow .C1Active,
.C1Menu_Office2007Blue .C1SubMenu .c1-v-flow .C1Focus,
.C1Menu_Office2007Blue .C1SubMenu .c1-v-flow .C1Opened
{
	background: url(Images/BgPrimarySubmenuItem.gif) repeat-x top left;
	display: block;
	text-decoration: none;
	font-size: 12px;
	border: none;
}
.C1Menu_Office2007Blue .C1SubMenu .C1CheckableSupport .c1-v-flow .C1Checked
{
	background: url(Images/BgPrimarySubmenuItem.gif) repeat-x top left;
	display: block;
	text-decoration: none;
	font-size: 12px;
	border: none;
}
.C1Menu_Office2007Blue .C1SubMenu .c1-h-flow .C1Link
{
	display: block;
	background: url(Images/BgPrimarySubmenuItemH.gif) repeat-x 400px 400px;
	border: solid 0px;
	padding:1px;
	text-decoration: none;
	height:34px;
}
/* Link Item - Hover, Active, or Focus */
.C1Menu_Office2007Blue .C1SubMenu .c1-h-flow .C1Hover,
.C1Menu_Office2007Blue .C1SubMenu .c1-h-flow .C1Active,
.C1Menu_Office2007Blue .C1SubMenu .c1-h-flow .C1Focus,
.C1Menu_Office2007Blue .C1SubMenu .c1-h-flow .C1Opened
{
	display: block;
	background: url(Images/BgPrimarySubmenuItemH.gif) repeat-x bottom left;
	border: solid 1px #ffbd69;
	padding:0;
	text-decoration: none;
	height:34px;
}
.C1Menu_Office2007Blue .C1SubMenu .C1CheckableSupport .c1-h-flow .C1Checked
{
	display: block;
	background: url(Images/BgPrimarySubmenuItemH.gif) repeat-x bottom left;
	border: solid 1px #ffbd69;
	padding:0;
	text-decoration: none;
	height:34px;
}

/* Text in link */
.C1Menu_Office2007Blue .C1SubMenu .c1-v-flow .C1Link span.C1TextNode
{
	display:block;
	float:left;
	padding:0 20px 0 4px;
	margin:0;
	height:44px;
	width: 164px;
	text-align:left;
	text-decoration: none;
	font-size: 12px;
	color: #00156e;
	vertical-align: middle;
	line-height:44px;
}
.C1Menu_Office2007Blue .C1SubMenu .c1-h-flow .C1Link span.C1TextNode
{
	display:block;
	float:left;
	padding:0 20px 0 4px;
	height:32px;
	width:auto;
	margin:0;
	text-align:left;
	text-decoration: none;
	font-size: 12px;
	color: #00156e;
	vertical-align: middle;
	line-height:32px;
}
.C1Menu_Office2007Blue .C1SubMenu .c1-v-flow li.C1ListItem .C1Closed span.C1TextNode
{
	color: #00156e;
	background: url(Images/BgPrimarySubmenuItemArrow.gif) no-repeat top right;
	border: none;
}
.C1Menu_Office2007Blue .C1SubMenu .c1-h-flow li.C1ListItem .C1Closed span.C1TextNode
{
	color: #00156e;
	background: url(Images/BgPrimarySubmenuItemArrowH.gif) no-repeat top right;
	border: none;
}