styles.css

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

/* Structure Styles */
.C1TreeView_ArcticFox .C1List
{
    list-style-type:none;
    width:100%;
    padding:0px;
    margin:0px;
    font-size:0px;
    float:left;
}

.C1TreeView_ArcticFox .C1List .C1List
{
    list-style-type:none;
    width:100%;
    padding:0px;
    margin:0px;
    font-size:0px;
    padding-left:20px;
    float:left;
}

.C1TreeView_ArcticFox .C1ListItem
{
    margin: 0px;
    padding:0px;
    width:100%;
    float:left;
    background: url('Images/Empty.gif') center;
}

.C1TreeView_ArcticFox .C1ListItem .C1NodeBody
{
	height:20px;
	float:left;
}

/* Visual Styles */
.C1TreeView_ArcticFox .C1ListItem .C1NodeBody .C1NodeImage
{
    margin-left:3px;
    margin-top:2px;
    float:left;
}

.C1TreeView_ArcticFox .C1ListItem .C1NodeBody .C1NodeCheckBox
{
    float:left;
    background: url('Images/Unchecked.gif') center;
    width:20px;
    height:20px;
}
.C1TreeView_ArcticFox .C1ListItem .C1NodeBody .C1NodeCheckBox-C1Hover
{
    background: url('Images/Unchecked-Hover.gif') center;
}
.C1TreeView_ArcticFox .C1ListItem .C1NodeBody .C1NodeCheckBox-C1Checked
{
    background: url('Images/Checked.gif') center;
}
.C1TreeView_ArcticFox .C1ListItem .C1NodeBody .C1NodeCheckBox-C1Hover-C1Checked
{
    background: url('Images/Checked-Hover.gif') center;
}

.C1TreeView_ArcticFox .C1ListItem .C1NodeBody .C1Link
{
	text-decoration:none;
    outline: none;
    float:left;
    display:block;
    margin-left:3px;
    margin-top:1px;
}

.C1TreeView_ArcticFox .C1ListItem .C1NodeBody .C1Link .C1TextNode
{
	font-size:12px;
	line-height:19px;
    text-decoration: none;
    margin:0px;
	padding:0px;
    outline: none;
    color:#000;
    background-color:Transparent;
    padding:1px 4px 1px 4px;
}

.C1TreeView_ArcticFox .C1ListItem .C1NodeBody .C1Hover .C1TextNode
{
	color: #000;
	background: url('Images/arcticfox_horiz_bg1_hot.gif') repeat-x top left;
	border: solid 1px #999999;
	padding:0px 3px 0px 3px;
}

.C1TreeView_ArcticFox .C1ListItem .C1NodeBody .C1Focus .C1TextNode
{
	color: #FFF;
	background: url('Images/arcticfox_header_bg.gif') repeat-x top left;
	border: solid 1px #999999;
	padding:0px 3px 0px 3px;

}

.C1TreeView_ArcticFox .C1ListItem .C1NodeBody .C1Selected .C1TextNode
{
	color: #000;
	background: url('Images/arcticfox_horiz_bg1.gif') repeat-x top left;
	border: solid 1px #999999;
	padding:0px 3px 0px 3px;
}

.C1TreeView_ArcticFox .C1InsertionTemplate
{
    background-color:#cccccc;
    border: solid 1px #c0c0c0; 
    height:1px;
    font-size:0px;
}


.C1TreeView_ArcticFox .C1DragVisual
{
    margin-top:-20px;
    margin-left:100px;
    color: #666666;
    width:100%;    
}

.C1TreeView_ArcticFox .C1DragVisual .C1NodeCheckBox
{
	float:left;
}

.C1TreeView_ArcticFox .C1DragVisual .C1NodeImage
{
	margin-left:5px;
    margin-right:5px;
    margin-top:3px;
    float:left;
}

.C1TreeView_ArcticFox .C1DragVisual .C1Link
{
    text-decoration:none;
    outline: none;
    display:block;
    float:left;
    margin-top:3px;
}

.C1TreeView_ArcticFox .C1DragVisual .C1Link .C1TextNode
{
	font-size: 9pt;
	font-family: Verdana;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	outline: none;
	color: #000;
}


/*Line and Expand\Collapse Styles*/


/*----------------------------------------------------------------------------------------------------------------------------*/

.C1TreeView_ArcticFox .C1Line .C1Expandible-C1FirstItem-C1List 
{
	background-image:url('Images/Line.gif');
	background-repeat:repeat-y;
}
.C1TreeView_ArcticFox .C1Line .C1Expandible-C1List 
{
	background-image:url('Images/Line.gif');
	background-repeat:repeat-y;
}
.C1TreeView_ArcticFox .C1Line .C1Expandible-C1LastItem-C1List  
{
	/*background-image:url('Images/Empty.gif');
	background-repeat:repeat-y;*/
}

/*----------------------------------------------------------------------------------------------------------------------------*/

.C1TreeView_ArcticFox .C1Expandible-C1FirstItem-C1List,  .C1TreeView_ArcticFox .C1Expandible-C1List, .C1TreeView_ArcticFox .C1Expandible-C1LastItem-C1List
{
	/*background-image:url('Images/Empty.gif');
	background-repeat:repeat-y;*/
}

/*----------------------------------------------------------------------------------------------------------------------------*/

.C1TreeView_ArcticFox .C1LineArea
{
	width:20px;
	height:20px;
	float:left;
	/*background-image:url('Images/Empty.gif');*/
}

/*----------------------------------------------------------------------------------------------------------------------------*/

.C1TreeView_ArcticFox .C1Line .C1LineArea
{
	width:20px;
	height:20px;
	float:left;
	background-image:url('Images/Middle-Line.gif');
}

/*----------------------------------------------------------------------------------------------------------------------------*/

.C1TreeView_ArcticFox .C1Line .C1LineArea-C1FirstRootItem
{
	background-image:url('Images/First-Line.gif');
}
.C1TreeView_ArcticFox .C1Line .C1LineArea-C1UniqueItem
{
	/*background-image:url('Images/Empty.gif');*/
}
.C1TreeView_ArcticFox .C1Line .C1LineArea-C1FirstItem
{
	background-image:url('Images/Middle-Line.gif');
}
.C1TreeView_ArcticFox .C1Line .C1LineArea-C1LastItem
{
	background-image:url('Images/Last-Line.gif');
}

/*----------------------------------------------------------------------------------------------------------------------------*/

.C1TreeView_ArcticFox .C1HitArea
{
	width:20px;
	height:20px;
	float:left;
}

/*----------------------------------------------------------------------------------------------------------------------------*/

.C1TreeView_ArcticFox .C1Open-C1HitArea, .C1TreeView_ArcticFox .C1Open-C1FirstItem-C1HitArea, .C1TreeView_ArcticFox .C1Open-C1LastItem-C1HitArea,
.C1TreeView_ArcticFox .C1Open-C1FirstRootItem-C1HitArea, .C1TreeView_ArcticFox .C1Open-C1UniqueItem-C1HitArea
{	
	background-image:url('Images/Expand.gif');
}

/*----------------------------------------------------------------------------------------------------------------------------*/

.C1TreeView_ArcticFox .C1Line .C1Open-C1FirstRootItem-C1HitArea
{	
	background-image:url('Images/Expand-First-Line.gif');
}
.C1TreeView_ArcticFox .C1Line .C1Open-C1UniqueItem-C1HitArea
{
	background-image:url('Images/Expand-Unique-Line.gif');
}
.C1TreeView_ArcticFox .C1Line .C1Open-C1LastItem-C1HitArea
{	
	background-image:url('Images/Expand-Last-Line.gif');
}
.C1TreeView_ArcticFox .C1Line .C1Open-C1HitArea
{	
	background-image:url('Images/Expand-Middle-Line.gif');
}
.C1TreeView_ArcticFox .C1Line .C1Open-C1FirstItem-C1HitArea
{	
	background-image:url('Images/Expand-Middle-Line.gif');
}

/*----------------------------------------------------------------------------------------------------------------------------*/

.C1TreeView_ArcticFox .C1Close-C1HitArea, .C1TreeView_ArcticFox .C1Close-C1FirstItem-C1HitArea, .C1TreeView_ArcticFox .C1Close-C1LastItem-C1HitArea,
.C1TreeView_ArcticFox .C1Close-C1FirstRootItem-C1HitArea, .C1TreeView_ArcticFox .C1Close-C1UniqueItem-C1HitArea
{	
	background-image:url('Images/Collapse.gif');
}

/*----------------------------------------------------------------------------------------------------------------------------*/

.C1TreeView_ArcticFox .C1Line .C1Close-C1FirstRootItem-C1HitArea
{	
	background-image:url('Images/Collapse-First-Line.gif');
}
.C1TreeView_ArcticFox .C1Line .C1Close-C1UniqueItem-C1HitArea
{
	background-image:url('Images/Collapse-Unique-Line.gif');
}
.C1TreeView_ArcticFox .C1Line .C1Close-C1LastItem-C1HitArea
{	
	background-image:url('Images/Collapse-Last-Line.gif');
}
.C1TreeView_ArcticFox .C1Line .C1Close-C1HitArea
{	
	background-image:url('Images/Collapse-Middle-Line.gif');
}
.C1TreeView_ArcticFox .C1Line .C1Close-C1FirstItem-C1HitArea
{	
	background-image:url('Images/Collapse-Middle-Line.gif');
}

/*----------------------------------------------------------------------------------------------------------------------------*/