styles.css

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

/* =========== ArcticFox C1Expander =========================================== */
.C1Expander_ArcticFox
{
}

.C1Expander_ArcticFox .C1eContentPanel .C1eOuter,
.C1Expander_ArcticFox .C1eContentPanel .C1eInner,
.C1Expander_ArcticFox .C1eContentPanel .C1eContent
{
  width: 100%; 
  height: 100%;
  float: none;
  display: block;  
}

/* Common definitions */
.C1Expander_ArcticFox .C1eContentPanel {
	background: #fff;
	display:block;
	margin:0;
	padding:0;
}

.C1Expander_ArcticFox .C1eContentPanel .C1eOuter .C1eInner
{
  padding:0;
  margin:0;
}

/* C1Top, C1Bottom */
.C1Expander_ArcticFox-C1Bottom .C1eHeaderPanel .C1eOuter
{
    border-bottom: solid 1px #999;
}

.C1Expander_ArcticFox-C1Bottom .C1eHeaderPanel .C1eInner
{
    border: solid 1px #fff;
}


.C1Expander_ArcticFox-C1Top .C1eHeaderPanel .C1eInner
{
    border: solid 1px #fff;
}



.C1Expander_ArcticFox-C1Top .C1eHeaderPanel,
.C1Expander_ArcticFox-C1Bottom .C1eHeaderPanel
{
	border: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:20px;
}
.C1Expander_ArcticFox-C1Top .C1Opened-C1eHeaderPanel,
.C1Expander_ArcticFox-C1Bottom .C1Opened-C1eHeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}

.C1Expander_ArcticFox-C1Top .C1Opened-C1Hover-C1eHeaderPanel,
.C1Expander_ArcticFox-C1Bottom .C1Opened-C1Hover-C1eHeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1Expander_ArcticFox-C1Top .C1Opened-C1Active-C1Hover-C1eHeaderPanel,
.C1Expander_ArcticFox-C1Bottom .C1Opened-C1Active-C1Hover-C1eHeaderPanel
{
	background: #666 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}
.C1Expander_ArcticFox-C1Top .C1Closed-C1Hover-C1eHeaderPanel,
.C1Expander_ArcticFox-C1Bottom .C1Closed-C1Hover-C1eHeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1Expander_ArcticFox-C1Top .C1Closed-C1Active-C1Hover-C1eHeaderPanel,
.C1Expander_ArcticFox-C1Bottom .C1Closed-C1Active-C1Hover-C1eHeaderPanel
{
	background: #999 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}

/* C1Right, C1Left */
.C1Expander_ArcticFox-C1Right .C1eHeaderPanel,
.C1Expander_ArcticFox-C1Left .C1eHeaderPanel
{
	border: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:20px;
}
.C1Expander_ArcticFox-C1Right .C1Opened-C1eHeaderPanel,
.C1Expander_ArcticFox-C1Left .C1Opened-C1eHeaderPanel
{
    
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;

}



.C1Expander_ArcticFox-C1Right .C1Opened-C1Hover-C1eHeaderPanel,
.C1Expander_ArcticFox-C1Left .C1Opened-C1Hover-C1eHeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1Expander_ArcticFox-C1Right .C1Opened-C1Active-C1Hover-C1eHeaderPanel,
.C1Expander_ArcticFox-C1Left .C1Opened-C1Active-C1Hover-C1eHeaderPanel
{
	background: #666 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}
.C1Expander_ArcticFox-C1Right .C1eHeaderPanel .C1eOuter,
.C1Expander_ArcticFox-C1Left .C1eHeaderPanel .C1eOuter
{
	background: none;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}

.C1Expander_ArcticFox-C1Left .C1Closed-C1Hover-C1eHeaderPanel,
.C1Expander_ArcticFox-C1Right .C1Closed-C1Hover-C1eHeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1Expander_ArcticFox-C1Left .C1Closed-C1Active-C1Hover-C1eHeaderPanel,
.C1Expander_ArcticFox-C1Right .C1Closed-C1Active-C1Hover-C1eHeaderPanel
{
	background: #666 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}

.C1Expander_ArcticFox-C1Left .C1eHeaderPanel .C1eOuter,
.C1Expander_ArcticFox-C1Right .C1eHeaderPanel .C1eOuter
{
	background: none;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}

.C1Expander_ArcticFox .C1eHeaderPanel .C1eInner
{
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}
.C1Expander_ArcticFox-C1Bottom .C1eHeaderPanel .C1eContent
{
	background: url(Images/arrow_down.gif) no-repeat center right;
	color: #000000;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:5px;
	vertical-align:middle;
}

.C1Expander_ArcticFox-C1Bottom .C1Opened-C1eHeaderPanel .C1eContent,
.C1Expander_ArcticFox-C1Bottom .C1Opened-C1Hover-C1eHeaderPanel .C1eContent,
.C1Expander_ArcticFox-C1Bottom .C1Opened-C1Active-C1Hover-C1eHeaderPanel .C1eContent
{
	background: url(Images/arrow_up.gif) no-repeat center right;
}

.C1Expander_ArcticFox-C1Top .C1eHeaderPanel .C1eContent
{
	background: url(Images/arrow_up.gif) no-repeat center right;
	color: #000000;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:5px;
	vertical-align:middle;
}

.C1Expander_ArcticFox-C1Top .C1Opened-C1eHeaderPanel .C1eContent
{
	background: url(Images/arrow_down.gif) no-repeat center right;
}





.C1Expander_ArcticFox-C1Right .C1eHeaderPanel .C1eContent
{
	background: url(Images/arrow_right.gif) no-repeat center right;
	color: #000000;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:5px;
	vertical-align:middle;
}

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


.C1Expander_ArcticFox-C1Left .C1eHeaderPanel .C1eContent
{
	background: url(Images/arrow_left.gif) no-repeat center right;
	color: #000000;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:5px;
	vertical-align:middle;
}

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







.C1Expander_ArcticFox-C1Bottom .C1eContentPanel
{
	border:1px solid #999;
	border-top:none;
}

.C1Expander_ArcticFox-C1Top .C1eContentPanel
{
	border:1px solid #999;
	border-bottom:none;
}

.C1Expander_ArcticFox-C1Right .C1eContentPanel
{
	border:1px solid #999;
	border-left:none;
}

.C1Expander_ArcticFox-C1Left .C1eContentPanel
{
	border:1px solid #999;
	border-right:none;
}



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

.C1Expander_ArcticFox-C1Disabled-C1Top .C1eHeaderPanel
{
	border: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:20px;
	border-top: none;
}
.C1Expander_ArcticFox-C1Disabled-C1Bottom .C1eHeaderPanel
{
	border: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:20px;
	border-bottom: none;
}



.C1Expander_ArcticFox-C1Disabled-C1Right .C1eHeaderPanel
{
	border: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:20px;
	border-bottom: none;
}
.C1Expander_ArcticFox-C1Disabled-C1Left .C1eHeaderPanel

{
	border: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:20px;
	border-top: none;
}


.C1Expander_ArcticFox-C1Disabled-C1Bottom .C1eHeaderPanel
{
    border: solid 1px #999;
    border-bottom: none;
}



.C1Expander_ArcticFox-C1Disabled-C1Bottom .C1eHeaderPanel .C1eOuter .C1eInner .C1eContent
{  
    padding: 5px;
}

.C1Expander_ArcticFox-C1Disabled-C1Top .C1eContentPanel .C1eOuter .C1eInner .C1eContent,
.C1Expander_ArcticFox-C1Disabled-C1Bottom .C1eContentPanel .C1eOuter .C1eInner .C1eContent,
.C1Expander_ArcticFox-C1Disabled-C1Right .C1eContentPanel .C1eOuter .C1eInner .C1eContent,
.C1Expander_ArcticFox-C1Disabled-C1Left .C1eContentPanel .C1eOuter .C1eInner .C1eContent
{  
    border:1px solid #6f7074;
}