styles.css

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

/* =========== Vista C1Expander =========================================== */
.C1Expander_Vista
{
	font-size:12px;
	font-family: Segoe UI, Myriad, Myriad Pro, Calibri, Arial, Sans-Serif;
}

.C1Expander_Vista .C1eContentPanel .C1eOuter,
.C1Expander_Vista .C1eContentPanel .C1eInner,
.C1Expander_Vista .C1eContentPanel .C1eContent
{
  width: 100%; 
  height: 100%;
}


/*----CLOSED LEFT CAP----*/
.C1Expander_Vista-C1Top .C1eHeaderPanel,
.C1Expander_Vista-C1Bottom .C1eHeaderPanel
{
	background: url(Images/headerleft.gif) no-repeat;
	height:20px;
	padding-left: 8px;
}
.C1Expander_Vista-C1Top .C1Closed-C1Hover-C1eHeaderPanel,
.C1Expander_Vista-C1Bottom .C1Closed-C1Hover-C1eHeaderPanel
{
	background: url(Images/headerlefthover.gif) no-repeat;
	height: 20px;

}
 .C1Expander_Vista-C1Top .C1Closed-C1Active-C1Hover-C1eHeaderPanel,
.C1Expander_Vista-C1Bottom .C1Closed-C1Active-C1Hover-C1eHeaderPanel
{
	background: url(Images/headerleftactive.gif) no-repeat;
	height: 20px;

}


/*---OPENED LEFT CAP---*/
.C1Expander_Vista-C1Top .C1Opened-C1eHeaderPanel,
.C1Expander_Vista-C1Bottom .C1Opened-C1eHeaderPanel
{
	background: url(Images/headerleft.gif) no-repeat;
	height:20px;
	padding-left: 8px;
}
.C1Expander_Vista-C1Top .C1Opened-C1Hover-C1eHeaderPanel,
.C1Expander_Vista-C1Bottom .C1Opened-C1Hover-C1eHeaderPanel
{
	background: url(Images/headerlefthover.gif) no-repeat;
	height: 20px;
}
.C1Expander_Vista-C1Top .C1Opened-C1Active-C1Hover-C1eHeaderPanel,
.C1Expander_Vista-C1Bottom .C1Opened-C1Active-C1Hover-C1eHeaderPanel
{
	background: url(Images/headerleftactive.gif) no-repeat;
	height: 20px;
} 



/*----CLOSED HEADERPANEL----*/
.C1Expander_Vista-C1Left .C1eHeaderPanel,
.C1Expander_Vista-C1Right .C1eHeaderPanel
{
	background:#fcfcfc url(Images/BgHeaderH.gif) repeat-x top left;
		height:20px;
}
.C1Expander_Vista-C1Left .C1Closed-C1Hover-C1eHeaderPanel,
.C1Expander_Vista-C1Right .C1Closed-C1Hover-C1eHeaderPanel
{
	background:#a6d9f4 url(Images/BgHeaderHHover.gif) repeat-x top left;
		height:20px;
}
.C1Expander_Vista-C1Left .C1Closed-C1Active-C1Hover-C1eHeaderPanel,
.C1Expander_Vista-C1Right .C1Closed-C1Active-C1Hover-C1eHeaderPanel
{
	background:#90cbea url(Images/BgHeaderHActive.gif) repeat-x top left;
		height:20px;
}



/*---OPENED HEADERPANEL---*/
.C1Expander_Vista-C1Left .C1Opened-C1eHeaderPanel,
.C1Expander_Vista-C1Right .C1Opened-C1eHeaderPanel
{
	background:#a7bac5 url(Images/BgHeaderHHover.gif) repeat-x top left;
}
.C1Expander_Vista-C1Left .C1Opened-C1Hover-C1eHeaderPanel,
.C1Expander_Vista-C1Right .C1Opened-C1Hover-C1eHeaderPanel
{
	background:#a6d9f4 url(Images/BgHeaderHHover.gif) repeat-x top left;
}
.C1Expander_Vista-C1Left .C1Opened-C1Active-C1Hover-C1eHeaderPanel,
.C1Expander_Vista-C1Right .C1Opened-C1Active-C1Hover-C1eHeaderPanel
{
	background:#90cbea url(Images/BgHeaderHActive.gif) repeat-x top left;
}



/*------BOTTOM-----*/
.C1Expander_Vista-C1Bottom .C1eHeaderPanel .C1eOuter
{
	background: url(Images/BgVHeaderRightCollapsed.gif) no-repeat top right;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0 25px 0 0;
	height:20px;
}
.C1Expander_Vista-C1Bottom .C1Closed-C1Hover-C1eHeaderPanel .C1eOuter
{
	background: url(Images/BgVHeaderRightCollapsed.gif) no-repeat center right;
}
.C1Expander_Vista-C1Bottom .C1Closed-C1Active-C1Hover-C1eHeaderPanel .C1eOuter
{
	background: url(Images/BgVHeaderRightCollapsed.gif) no-repeat bottom right;
}

.C1Expander_Vista-C1Bottom .C1Opened-C1eHeaderPanel .C1eOuter
{
	background: url(Images/BgVHeaderRightExpanded.gif) no-repeat top right;
}

.C1Expander_Vista-C1Bottom .C1Opened-C1Hover-C1eHeaderPanel .C1eOuter
{
	background: url(Images/BgVHeaderRightExpanded.gif) no-repeat center right;
}
.C1Expander_Vista-C1Bottom .C1Opened-C1Active-C1Hover-C1eHeaderPanel .C1eOuter
{
	background: url(Images/BgVHeaderRightExpanded.gif) no-repeat bottom right;
}




/*-----TOP----*/
.C1Expander_Vista-C1Top .C1eHeaderPanel .C1eOuter
{
	background: url(Images/BgVHeaderRightExpanded.gif) no-repeat top right;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0 25px 0 0;
	height:20px;
}
.C1Expander_Vista-C1Top .C1Closed-C1Hover-C1eHeaderPanel .C1eOuter
{
	background: url(Images/BgVHeaderRightExpanded.gif) no-repeat center right;
}
.C1Expander_Vista-C1Top .C1Closed-C1Active-C1Hover-C1eHeaderPanel .C1eOuter
{
	background: url(Images/BgVHeaderRightExpanded.gif) no-repeat bottom right;
}
.C1Expander_Vista-C1Top .C1Opened-C1eHeaderPanel .C1eOuter
{
	background: url(Images/BgVHeaderRightCollapsed.gif) no-repeat top right;
}
.C1Expander_Vista-C1Top .C1Opened-C1Hover-C1eHeaderPanel .C1eOuter
{
	background: url(Images/BgVHeaderRightCollapsed.gif) no-repeat center right;
}
.C1Expander_Vista-C1Top .C1Opened-C1Active-C1Hover-C1eHeaderPanel .C1eOuter
{
	background: url(Images/BgVHeaderRightCollapsed.gif) no-repeat bottom right;
}





/*----LEFT/RIGHT----*/
.C1Expander_Vista-C1Left .C1eHeaderPanel .C1eOuter,
.C1Expander_Vista-C1Right .C1eHeaderPanel .C1eOuter
{
	background: none;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}


/*----TOP/BOTTOM----*/
.C1Expander_Vista-C1Top .C1eHeaderPanel .C1eInner,
.C1Expander_Vista-C1Bottom .C1eHeaderPanel .C1eInner
{
	background: url(Images/BgVHeaderMiddle.gif) repeat-x top left;
	color: #039;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
	height: 20px;
}
.C1Expander_Vista-C1Top .C1Closed-C1Hover-C1eHeaderPanel .C1eInner,
.C1Expander_Vista-C1Bottom .C1Closed-C1Hover-C1eHeaderPanel .C1eInner
{
	background: url(Images/BgVHeaderMiddle.gif) repeat-x center left;
}
 

    .C1Expander_Vista-C1Top .C1Closed-C1Active-C1Hover-C1eHeaderPanel .C1eInner,
    .C1Expander_Vista-C1Bottom .C1Closed-C1Active-C1Hover-C1eHeaderPanel .C1eInner
    {
	    background: url(Images/BgVHeaderMiddle.gif) repeat-x bottom left;
    } 



.C1Expander_Vista-C1Top .C1Opened-C1Hover-C1eHeaderPanel .C1eInner,
.C1Expander_Vista-C1Bottom .C1Opened-C1Hover-C1eHeaderPanel .C1eInner
{
	background: url(Images/BgVHeaderMiddle.gif) repeat-x center left;
}



    .C1Expander_Vista-C1Top .C1Opened-C1Active-C1Hover-C1eHeaderPanel .C1eInner,
    .C1Expander_Vista-C1Bottom .C1Opened-C1Active-C1Hover-C1eHeaderPanel .C1eInner 
    {
	  background: url(Images/BgVHeaderMiddle.gif) repeat-x bottom;
    } 





.C1Expander_Vista-C1Left .C1eHeaderPanel .C1eInner,
.C1Expander_Vista-C1Right .C1eHeaderPanel .C1eInner
{
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
	height: 20px;
	min-height: 20px;
}

.C1Expander_Vista-C1Top .C1eHeaderPanel .C1eContent,
.C1Expander_Vista-C1Bottom .C1eHeaderPanel .C1eContent
{
	background: url(Images/BgVHeaderText.gif) repeat-x top left;
	color: #039;
	padding:0 5px 0 0;
	float:left;
	height:20px;
	line-height:20px;
	vertical-align:middle;
	height:20px;
}


.C1Expander_Vista-C1Top .C1Closed-C1Hover-C1eHeaderPanel .C1eContent,
.C1Expander_Vista-C1Bottom .C1Closed-C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/BgVHeaderText.gif) repeat-x center left;
}
.C1Expander_Vista-C1Top .C1Closed-C1Active-C1Hover-C1eHeaderPanel .C1eContent,
.C1Expander_Vista-C1Bottom .C1Closed-C1Active-C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/BgVHeaderText.gif) repeat-x bottom left;
}



.C1Expander_Vista-C1Top .C1Opened-C1eHeaderPanel .C1eContent,
.C1Expander_Vista-C1Bottom .C1Opened-C1eHeaderPanel .C1eContent
{
	background: url(Images/BgVHeaderText.gif) repeat-x top left;
}
.C1Expander_Vista-C1Top .C1Opened-C1Hover-C1eHeaderPanel .C1eContent,
.C1Expander_Vista-C1Bottom .C1Opened-C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/BgVHeaderText.gif) repeat-x center left;
}
.C1Expander_Vista-C1Top .C1Opened-C1Active-C1Hover-C1eHeaderPanel .C1eContent,
.C1Expander_Vista-C1Bottom .C1Opened-C1Active-C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/BgVHeaderText.gif) repeat-x bottom left;
}




/*-----ARROW RIGHT----*/
.C1Expander_Vista-C1Right .C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHClosed.gif) no-repeat center right;
	color: #000000;
	font-size:12px;
	font-weight:900;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0 20px 0 5px;
	height:22px;
	line-height:22px;
	vertical-align:middle;
}

.C1Expander_Vista-C1Right C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHClosed.gif) no-repeat center right;
}
.C1Expander_Vista-C1Right C1-Active-C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHClosed.gif) no-repeat center right;
}


.C1Expander_Vista-C1Right .C1Opened-C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHOpened.gif) no-repeat center right;
}

.C1Expander_Vista-C1Right .C1Opened-C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHOpened.gif) no-repeat center right;
}
.C1Expander_Vista-C1Right .C1Opened-C1Active-C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHOpened.gif) no-repeat center right;
}



/*-----ARROW LEFT----*/
.C1Expander_Vista-C1Left .C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHClosed.gif) no-repeat center right;
	color: #000000;
	font-size:12px;
	font-weight:900;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0 20px 0 5px;
	height:22px;
	line-height:22px;
	vertical-align:middle;
}
.C1Expander_Vista-C1Left C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHClosed.gif) no-repeat center right;
}
.C1Expander_Vista-C1Left C1Active-C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHClosed.gif) no-repeat center right;
}

.C1Expander_Vista-C1Left .C1Opened-C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHOpened.gif) no-repeat center right;
}
.C1Expander_Vista-C1Left .C1Opened-C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHOpened.gif) no-repeat center right;
}
.C1Expander_Vista-C1Left .C1Opened-C1Active-C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHOpened.gif) no-repeat center right;
}


.C1Expander_Vista-C1Top .C1eContentPanel,
.C1Expander_Vista-C1Bottom .C1eContentPanel
{
	border-top:none;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:10px;
	height:auto;
}

.C1Expander_Vista-C1Right .C1eContentPanel
{
	border:1px solid #a7bac5;
	border-left:none;
	background: #ffffff;
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1Expander_Vista-C1Left .C1eContentPanel
{
	border:1px solid #a7bac5;
	border-right:none;
	background: #ffffff;
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1Expander_Vista-C1Left .C1eContentPanel .C1eContent,
.C1Expander_Vista-C1Right .C1eContentPanel .C1eContent
{
	padding:5px;
}



/*----DISABLED STATE----*/

.C1Expander_Vista-C1Disabled-C1Top .C1eHeaderPanel .C1eInner,
.C1Expander_Vista-C1Disabled-C1Bottom .C1eHeaderPanel .C1eInner
{
	background: url(Images/BgVHeaderMiddle.gif) repeat-x top left;
}


.C1Expander_Vista-C1Disabled-C1Left .C1eHeaderPanel .C1eInner,
.C1Expander_Vista-C1Disabled-C1Right .C1eHeaderPanel .C1eInner
{
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
	height: 20px;
	min-height: 20px;
}

.C1Expander_Vista-C1Disabled-C1Top .C1eHeaderPanel .C1eContent,
.C1Expander_Vista-C1Disabled-C1Bottom .C1eHeaderPanel .C1eContent
{
	background: url(Images/BgVHeaderText.gif) repeat-x top left;
	color: #039;
	padding:0 5px 0 0;
	float:left;
	height:20px;
	line-height:20px;
	vertical-align:middle;
	height:20px;
}


.C1Expander_Vista-C1Disabled-C1Top .C1eContentPanel .C1eOuter .C1eInner .C1eContent,
.C1Expander_Vista-C1Disabled-C1Bottom .C1eContentPanel .C1eOuter .C1eInner .C1eContent,
.C1Expander_Vista-C1Disabled-C1Right .C1eContentPanel .C1eOuter .C1eInner .C1eContent,
.C1Expander_Vista-C1Disabled-C1Left .C1eContentPanel .C1eOuter .C1eInner .C1eContent
{
    background: #fff;  
}


.C1Expander_Vista-C1Disabled-C1Right .C1eContentPanel
{
	border:1px solid #a7bac5;
	border-left:none;
	background: #ffffff;
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1Expander_Vista-C1Disabled-C1Left .C1eContentPanel
{
	border:1px solid #a7bac5;
	border-right:none;
	background: #ffffff;
	display:block;
	float:left;
	margin:0;
	padding:0;
}

.C1Expander_Vista-C1Disabled-C1Right .C1Opened-C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHOpened.gif) no-repeat center right;
}

.C1Expander_Vista-C1Disabled-C1Left .C1eHeaderPanel .C1eContent
{
	background: url(Images/ArrowHOpened.gif) no-repeat center right;
	color: #000000;
	font-size:12px;
	font-weight:900;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0 20px 0 5px;
	height:22px;
	line-height:22px;
	vertical-align:middle;
}

/*----CLOSED HEADERPANEL----*/
.C1Expander_Vista-C1Disabled-C1Left .C1eHeaderPanel,
.C1Expander_Vista-C1Disabled-C1Right .C1eHeaderPanel
{
	background:#fcfcfc url(Images/BgHeaderH.gif) repeat-x top left;
}


/*---OPENED HEADERPANEL---*/
.C1Expander_Vista-C1Disabled-C1Left .C1Opened-C1eHeaderPanel,
.C1Expander_Vista-C1Disabled-C1Right .C1Opened-C1eHeaderPanel
{
	background:#a7bac5 url(Images/BgHeaderHHover.gif) repeat-x top left;
}