styles.css

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

.C1Menu_ArcticFox .c1-v-child .C1Opened .C1TextNode, 
.C1Menu_ArcticFox .C1SubMenu .c1-v-flow .C1Opened .C1TextNode
{
	background: url(Images/arrow_right.gif) no-repeat center right;
	margin: 0 5px 0 0;
}

.C1Menu_ArcticFox .c1-v-flow .C1Link .C1RightImage
{
	padding:0 0 0 5px;
	margin:0;	
	vertical-align:middle;
}
.C1Menu_ArcticFox .c1-v-flow .C1Link .C1LeftImage
{
	padding:0 5px 0 0;	
	margin:0;
	vertical-align:middle;
}
.C1Menu_ArcticFox .c1-h-flow .C1Link .C1RightImage
{
	padding:0 0 0 5px;
	margin:0;
	vertical-align:middle;
}
.C1Menu_ArcticFox .c1-h-flow .C1Link .C1LeftImage
{
	padding:0 5px 0 0;
	margin:0;
	vertical-align:middle;
}


/* ----------- Submenu ----------- */
.C1Menu_ArcticFox .C1SubMenu .C1ScrollContainer
{
	border:0;
}
.C1Menu_ArcticFox .C1SubMenu-C1Vertical
{
	display: block;
	background:#F5F5F5 url(Images/arcticfox_vert_bg2.gif) repeat-x bottom left;
}
.C1Menu_ArcticFox-C1Vertical .C1SubMenu-C1Vertical
{
	margin: 0 0 0 0;
}
.C1Menu_ArcticFox-C1Context-C1Vertical .C1SubMenu-C1Vertical
{
	margin: -1px 0 0 -2px;
}
.C1Menu_ArcticFox-C1Horizontal .C1SubMenu-C1Vertical,
.C1Menu_ArcticFox-C1Context-C1Horizontal .C1SubMenu-C1Vertical
{
	margin: 0 0 0 0;
}
.C1Menu_ArcticFox .C1SubMenu-C1Horizontal
{
	display: block;
	background:#FFFFFF url(Images/arcticfox_vert_bg2.gif) repeat-x top left;
	width:auto;
}
.C1Menu_ArcticFox-C1Vertical .C1SubMenu-C1Horizontal,
.C1Menu_ArcticFox-C1Context-C1Vertical .C1SubMenu-C1Horizontal
{
	margin: 0 0 0 -2px;
}
.C1Menu_ArcticFox-C1Horizontal .C1SubMenu-C1Horizontal,
.C1Menu_ArcticFox-C1Context-C1Horizontal .C1SubMenu-C1Horizontal
{
	margin: 0 0 0 0;
}
.C1Menu_ArcticFox .C1SubMenu .c1-v-flow
{
	display: block;
	width:100%;
}
.C1Menu_ArcticFox .C1SubMenu .c1-h-flow 
{
	display: block;
	float: left;
}
/* Sub menu vertical item */
.C1Menu_ArcticFox .C1SubMenu .c1-v-child
{
	display: block;
	width:100%;
}
.C1Menu_ArcticFox .C1SubMenu .c1-h-child
{
	display: block;
	width: auto;
}
/* Header Item */
.C1Menu_ArcticFox .C1SubMenu .c1-v-child .C1Heading
{
	display: block;
	float: left;
	width:100%;
}
.C1Menu_ArcticFox .C1SubMenu .c1-h-flow .C1Heading
{
	display: block;
	float: left;
}
.C1Menu_ArcticFox .C1SubMenu .c1-v-flow .C1Link
{
	border-bottom:solid 0px;
	border-top:solid 0px;
	border-left:solid 0px;
	border-right:solid 0px;
	padding-bottom:1px;
	padding-top:1px;
	padding-left:0px;
	padding-right:0px;
 	display:block;
	width: 100%;	
}

.C1Menu_ArcticFox .C1SubMenu .c1-h-flow .C1Link
{
	border-bottom:solid 0px;
	border-top:solid 0px;
	border-left:solid 0px;
	border-right:solid 0px;
	padding-bottom:0px;
	padding-top:0px;
	padding-left:1px;
	padding-right:1px;
}

.C1Menu_ArcticFox .C1SubMenu .c1-v-flow .C1Hover,
.C1Menu_ArcticFox .C1SubMenu .c1-v-flow .C1Active,
.C1Menu_ArcticFox .C1SubMenu .c1-v-flow .C1Focus,
.C1Menu_ArcticFox .C1SubMenu .c1-v-flow .C1Opened
{
	border-bottom:solid 1px #999;
	border-top:solid 1px #999;
	border-left:solid 0px;
	border-right:solid 0px;
	padding-bottom:0px;
	padding-top:0px;
	padding-left:0px;
	padding-right:0px;
	background: #C7C7C7 url(Images/arcticfox_horiz_bg1.gif) repeat-x top left;
}

.C1Menu_ArcticFox .C1SubMenu .C1CheckableSupport .c1-v-flow .C1Checked
{
	border-bottom:solid 1px #999;
	border-top:solid 1px #999;
	border-left:solid 0px;
	border-right:solid 0px;
	padding-bottom:0px;
	padding-top:0px;
	padding-left:0px;
	padding-right:0px;
	background: #C7C7C7 url(Images/arcticfox_horiz_bg1.gif) repeat-x top left;
}

.C1Menu_ArcticFox .C1SubMenu .c1-h-flow .C1Hover,
.C1Menu_ArcticFox .C1SubMenu .c1-h-flow .C1Active,
.C1Menu_ArcticFox .C1SubMenu .c1-h-flow .C1Focus,
.C1Menu_ArcticFox .C1SubMenu .c1-h-flow .C1Opened
{
	border-bottom:solid 0px;
	border-top:solid 0px;
	border-left:solid 1px #999;
	border-right:solid 1px #999;
	padding-bottom:0px;
	padding-top:0px;
	padding-left:0px;
	padding-right:0px;
	background: #C7C7C7 url(Images/arcticfox_horiz_bg1.gif) repeat-x top left;
}

.C1Menu_ArcticFox .C1SubMenu .C1CheckableSupport .c1-h-flow .C1Checked
{
	border-bottom:solid 0px;
	border-top:solid 0px;
	border-left:solid 1px #999;
	border-right:solid 1px #999;
	padding-bottom:0px;
	padding-top:0px;
	padding-left:0px;
	padding-right:0px;
	background: #C7C7C7 url(Images/arcticfox_horiz_bg1.gif) repeat-x top left;
}


/* ----------- Sub Group ----------- */
.C1Menu_ArcticFox .c1-h-flow .C1SubGroup
{
      
}

.C1Menu_ArcticFox .c1-v-flow .C1SubGroup
{
      width:96%;
      margin:0 2%;
}
.C1Menu_ArcticFox .c1-v-flow .C1SubGroup .c1-v-flow
{
      width:100%;
}

/*==============================
	Flush first and last menu items with border.
================================*/
.C1Menu_ArcticFox .c1-h-flow .C1FirstItem > a.C1Link,
.C1Menu_ArcticFox .C1SubMenu .c1-h-flow .C1FirstItem > a.C1Link,
.C1Menu_ArcticFox .C1SubMenu .C1SubMenu .c1-h-flow .C1FirstItem > a.C1Link
{
	border-left:solid 0px;
	padding-left:1px;
}

/*.C1Menu_ArcticFox .c1-h-flow .C1LastItem a.C1Link,*/
.C1Menu_ArcticFox .C1SubMenu .c1-h-flow .C1LastItem > a.C1Link,
.C1Menu_ArcticFox .C1SubMenu .C1SubMenu .c1-h-flow .C1LastItem > a.C1Link
{
	border-right:solid 0px;
	padding-right:1px;
}

.C1Menu_ArcticFox .c1-v-flow .C1FirstItem > a.C1Link,
.C1Menu_ArcticFox .C1SubMenu .c1-v-flow .C1FirstItem > a.C1Link,
.C1Menu_ArcticFox .C1SubMenu .C1SubMenu .c1-v-flow .C1FirstItem > a.C1Link
{
	border-top:solid 0px;
	padding-top:1px;
}
.C1Menu_ArcticFox .c1-v-flow .C1LastItem > a.C1Link,
.C1Menu_ArcticFox .C1SubMenu .c1-v-flow .C1LastItem > a.C1Link,
.C1Menu_ArcticFox .C1SubMenu .C1SubMenu .c1-v-flow .C1LastItem > a.C1Link
{
	border-bottom:solid 0px;
	padding-bottom:1px;
}
/*==============================
	Positioning the 3rd+ level SubMenus
================================*/
.C1Menu_ArcticFox-C1Vertical .C1SubMenu-C1Vertical .C1SubMenu-C1Vertical,
.C1Menu_ArcticFox-C1Context-C1Vertical  .C1SubMenu-C1Vertical .C1SubMenu-C1Vertical
{
	margin: -1px 0 0 -1px;
}
.C1Menu_ArcticFox-C1Horizontal .C1SubMenu-C1Vertical .C1SubMenu-C1Vertical,
.C1Menu_ArcticFox-C1Context-C1Horizontal .C1SubMenu-C1Vertical .C1SubMenu-C1Vertical
{
	margin: -2px 0 0 -1px;
}
.C1Menu_ArcticFox .C1SubMenu-C1Horizontal .C1SubMenu-C1Vertical
{
	margin: -1px 0 0 -1px;
}
.C1Menu_ArcticFox .C1SubMenu .C1SubMenu-C1Vertical .C1SubMenu-C1Vertical
{
	margin: -1px 0 0 -1px;
}
.C1Menu_ArcticFox .C1SubMenu-C1Vertical .C1SubMenu-C1Horizontal
{
	margin: 0 0 0 -1px;
} 
.C1Menu_ArcticFox .C1SubMenu-C1Horizontal .C1SubMenu-C1Horizontal
{
	margin: 0 0 0 0;
}
/*=========================
	Scroll Settings
===========================*/
.C1Menu_ArcticFox .C1ScrollContainer
{
	border:solid 1px #fff;
	display:block;
}
.C1Menu_ArcticFox_ScrollButtonRight, 
.C1Menu_ArcticFox_ScrollButtonLeft
{
  font-size:0px;
	width:8px;
	height:20px;
	overflow:visible;
	cursor: pointer;
	opacity: .5;
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	filter: alpha(opacity=50);
}
.C1Menu_ArcticFox_ScrollButtonTop, 
.C1Menu_ArcticFox_ScrollButtonBottom
{
  font-size:0px;
	height:8px;
	width:20px;
	overflow:visible;
	cursor: pointer;
	opacity: .5;
	-moz-opacity: 0.5;
	-khtml-opacity: 0.5;
	filter: alpha(opacity=50);
}

.C1Menu_ArcticFox_ScrollButtonTop
{
	margin:0 0 0 0;
	background:#c7c7c7 url(images/arrow_scroll_top.gif) center center no-repeat;
	border-bottom:solid 1px #999999;
}
.C1Menu_ArcticFox_ScrollButtonRight
{
	margin:0 0 0 0;
	background:#c7c7c7 url(images/arrow_scroll_right.gif) center center no-repeat;
	border-left:solid 1px #999999;
}
.C1Menu_ArcticFox_ScrollButtonBottom
{
	margin:0 0 0 0;
	background:#c7c7c7 url(images/arrow_scroll_bottom.gif) center center no-repeat;
	border-top:solid 1px #999999;
}
.C1Menu_ArcticFox_ScrollButtonLeft
{
	margin:0 0 0 0;
	background:#c7c7c7 url(images/arrow_scroll_left.gif) center center no-repeat;
	border-right:solid 1px #999999;
}

.C1Menu_ArcticFox_ScrollButtonActiveTop, 
.C1Menu_ArcticFox_ScrollButtonActiveRight, 
.C1Menu_ArcticFox_ScrollButtonActiveBottom, 
.C1Menu_ArcticFox_ScrollButtonActiveLeft
{
	opacity: .99;
	-moz-opacity: .99;
	-khtml-opacity: .99;
	filter: alpha(opacity=99);
}

.C1Menu_ArcticFox_ScrollButtonDisabledTop, 
.C1Menu_ArcticFox_ScrollButtonDisabledRight, 
.C1Menu_ArcticFox_ScrollButtonDisabledBottom, 
.C1Menu_ArcticFox_ScrollButtonDisabledLeft
{
	opacity: .00;
	-moz-opacity: 0.00;
	-khtml-opacity: 0.00;
	filter: alpha(opacity=0);
	display: none;
}