styles.css

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

/* =========== ArcticFox C1Accordion =========================================== */
.C1Accordion_ArcticFox .C1HeaderPanel
{
    cursor:pointer;    
}
.C1Accordion_ArcticFox-C1Top,
.C1Accordion_ArcticFox-C1Bottom
{
	display:block;
	float:none;
	clear:both;
	width:100%;
	margin:0;
	padding:0;
	border:solid 1px #999;
}
.C1Accordion_ArcticFox-C1Left,
.C1Accordion_ArcticFox-C1Right
{
	display:block;
	float:left;
	margin:0;
	padding:0;
	border:solid 1px #999;
}
.C1Accordion_ArcticFox .c1-v-flow
{
	display:block;
	float:none;
	clear:both;
	width:100%;
	margin:0;
	padding:0;
}
.C1Accordion_ArcticFox .c1-h-flow
{
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1Accordion_ArcticFox-C1Top  .C1AccordionPane,
.C1Accordion_ArcticFox-C1Bottom  .C1AccordionPane
{
	display:block;
	float:none;
	clear:both;
	width:100%;
	margin:0;
	padding:0;
}
.C1Accordion_ArcticFox-C1Left  .C1AccordionPane,
.C1Accordion_ArcticFox-C1Right  .C1AccordionPane
{
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1Accordion_ArcticFox .C1Bottom .C1HeaderPanel
{
	border-top:solid 1px #fff;
	background: #C6C6C6 url(Images/arcticfox_horiz_bg1.gif) repeat-x top left;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
	min-height:35px;
}

.C1Accordion_ArcticFox-C1Bottom .C1FirstItem .C1HeaderPanel
{
    border-left:solid 1px #fff;
}
.C1Accordion_ArcticFox .C1Top .C1HeaderPanel
{
	border-bottom:solid 1px #999;
	border-left:solid 1px #fff;
	background: #C6C6C6 url(Images/arcticfox_horiz_bg1.gif) repeat-x top left;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
	min-height:35px;
}
.C1Accordion_ArcticFox-C1Top .C1FirstItem .C1HeaderPanel
{
	border-left:solid 1px #fff;
}
.C1Accordion_ArcticFox-C1Top .C1Closed-C1Hover-C1HeaderPanel,
.C1Accordion_ArcticFox-C1Bottom .C1Closed-C1Hover-C1HeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1Accordion_ArcticFox-C1Top .C1Closed-C1Active-C1Hover-C1HeaderPanel,
.C1Accordion_ArcticFox-C1Bottom .C1Closed-C1Active-C1Hover-C1HeaderPanel
{
	background: #999 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}
.C1Accordion_ArcticFox-C1Top .C1Opened .C1HeaderPanel,
.C1Accordion_ArcticFox-C1Bottom .C1Opened .C1HeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1Accordion_ArcticFox-C1Top .C1Opened-C1Hover-C1HeaderPanel,
.C1Accordion_ArcticFox-C1Bottom .C1Opened-C1Hover-C1HeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1Accordion_ArcticFox-C1Top .C1Opened-C1Active-C1Hover-C1HeaderPanel,
.C1Accordion_ArcticFox-C1Bottom .C1Opened-C1Active-C1Hover-C1HeaderPanel
{
	background: #666 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}

.C1Accordion_ArcticFox .C1Right .C1HeaderPanel
{
	border-left: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:35px;
}
.C1Accordion_ArcticFox-C1Right .C1FirstItem .C1HeaderPanel
{
	border:none;
}
.C1Accordion_ArcticFox .C1Left .C1HeaderPanel
{
	border-right: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:35px;
}
.C1Accordion_ArcticFox-C1Left .C1FirstItem .C1HeaderPanel
{
	border:none;
}
.C1Accordion_ArcticFox-C1Right .C1Closed-C1Hover-C1HeaderPanel,
.C1Accordion_ArcticFox-C1Left .C1Closed-C1Hover-C1HeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1Accordion_ArcticFox-C1Right .C1Closed-C1Active-C1Hover-C1HeaderPanel,
.C1Accordion_ArcticFox-C1Left .C1Closed-C1Active-C1Hover-C1HeaderPanel
{
	background: #666 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}
.C1Accordion_ArcticFox-C1Right .C1Opened .C1HeaderPanel,
.C1Accordion_ArcticFox-C1Left .C1Opened .C1HeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1Accordion_ArcticFox-C1Right .C1Opened-C1Hover-C1HeaderPanel,
.C1Accordion_ArcticFox-C1Left .C1Opened-C1Hover-C1HeaderPanel
{
	background: #ffffff url(Images/arcticfox_horiz_bg1_hot.gif) repeat-x top left;
}
.C1Accordion_ArcticFox-C1Right .C1Opened-C1Active-C1Hover-C1HeaderPanel,
.C1Accordion_ArcticFox-C1Left .C1Opened-C1Active-C1Hover-C1HeaderPanel
{
	background: #666 url(Images/arcticfox_header_bg.gif) repeat-x top left;
}

.C1Accordion_ArcticFox-C1Top .C1HeaderPanel .C1Outer,
.C1Accordion_ArcticFox-C1Bottom .C1HeaderPanel .C1Outer
{
	background: none;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}

.C1Accordion_ArcticFox-C1Right .C1HeaderPanel .C1Outer,
.C1Accordion_ArcticFox-C1Left .C1HeaderPanel .C1Outer
{
	background: none;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}
.C1Accordion_ArcticFox-C1Top .C1HeaderPanel .C1Inner,
.C1Accordion_ArcticFox-C1Bottom .C1HeaderPanel .C1Inner
{
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}

.C1Accordion_ArcticFox-C1Right .C1HeaderPanel .C1Inner,
.C1Accordion_ArcticFox-C1Left .C1HeaderPanel .C1Inner
{
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:0;
}

.C1Accordion_ArcticFox .C1Bottom .C1HeaderPanel .C1Content
{
	color: #000000;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:.5em;
	vertical-align:middle;
    border: solid 1px #fff;
}

.C1Accordion_ArcticFox .C1Top .C1HeaderPanel .C1Content
{
	color: #000000;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:.5em;
	vertical-align:middle;
}

.C1Accordion_ArcticFox .C1Right .C1HeaderPanel .C1Content
{
	color: #000000;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:.5em;
	vertical-align:middle;
}

.C1Accordion_ArcticFox .C1Left .C1HeaderPanel .C1Content
{
	color: #000000;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:.5em;
	vertical-align:middle;
}

.C1Accordion_ArcticFox .C1Bottom .C1ContentPanel
{
	border-top:1px solid #999;
	background: #fff;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:.5em;
}

.C1Accordion_ArcticFox .C1Top .C1ContentPanel
{
	border-bottom:1px solid #999;
	background: #fff;
	display:block;
	float:none;
	clear:both;
	margin:0;
	padding:.5em;
}

.C1Accordion_ArcticFox .C1Right .C1ContentPanel
{
	border-left:1px solid #999;
	background: #fff;
	display:block;
	float:left;
	clear:none;
	margin:0;
	padding:0;
}
.C1Accordion_ArcticFox .C1Right .C1ContentPanel .C1Content
{
	padding:.5em;
}
.C1Accordion_ArcticFox .C1Left .C1ContentPanel
{
	border-right:1px solid #999;
	background: #fff;
	display:block;
	float:left;
	margin:0;
	padding:0;
}
.C1Accordion_ArcticFox .C1Left .C1ContentPanel .C1Content
{
	padding:.5em;
}

/* Design mode only */

.C1DesignMode-C1Accordion_ArcticFox-C1Top .C1Top .C1HeaderPanel,
.C1DesignMode-C1Accordion_ArcticFox-C1Top-C1Disabled .C1Top .C1HeaderPanel,
.C1DesignMode-C1Accordion_ArcticFox-C1Bottom .C1Bottom .C1HeaderPanel,
.C1DesignMode-C1Accordion_ArcticFox-C1Bottom-C1Disabled .C1Bottom .C1HeaderPanel
{
	height:35px;
}
.C1DesignMode-C1Accordion_ArcticFox-C1Left .C1Left .C1HeaderPanel,
.C1DesignMode-C1Accordion_ArcticFox-C1Left-C1Disabled .C1Left .C1HeaderPanel,
.C1DesignMode-C1Accordion_ArcticFox-C1Right .C1Right .C1HeaderPanel,
.C1DesignMode-C1Accordion_ArcticFox-C1Right-C1Disabled .C1Right .C1HeaderPanel
{
  width:35px;
}

/* end of ArcticFox C1Accordion =========================================== */