styles.css

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

/*Dock horizontally*/
.C1Window_Vista
{
	float:left;
	font-size: 12px;
	font-family: Segoe UI, Myriad, Myriad Pro, Calibri, Arial, Sans-Serif;
	color: #000;
}

/*Invisible items*/
.C1Window_Vista .C1wInvisible
{
  display:none;
}

.C1Window_Vista .c1-resize-handle
{
  display:none;
  font-size: 0.1px;
  position:absolute;
}

/*
  Fix IE7 hover bug.
  If handle dosen't have a background-color or background-image, when hovering cursor dosen't change to desired cursor.
*/
*:first-child+html .C1Window_Vista .c1-resize-handle
{
  background: transparent url('Images/blank.gif') repeat-x repeat-y;
}

.C1Window_Vista .C1wResizer-proxy
{
  border:dashed 1px black; 
}

.C1Window_Vista .C1wResizer-n
{
  cursor:n-resize;
  height:10px;
  left:0px;
  top:0px;
  width:100%;
}

.C1Window_Vista .C1wResizer-s
{
  cursor:s-resize;
  bottom:0px;
  height:22px;
  left:0px;
  width:100%;
}

* html .C1Window_Vista .C1wResizer-n,* html .C1Window_Vista .C1wResizer-s
{
  height:6px;
}

.C1Window_Vista .C1wResizer-e
{
  cursor:e-resize;
  height:100%;
  right:0px;
  top:0px;
  width:18px;
}

.C1Window_Vista .C1wResizer-w
{
  cursor:w-resize;
  height:100%;
  left:0px;
  top:0px;
  width:18px;
}

* html .C1Window_Vista .C1wResizer-e,* html .C1Window_Vista .C1wResizer-w
{
  width:6px;
}

.C1Window_Vista .C1wResizer-se
{
  cursor:se-resize;
  width:18px;
  height:22px;
  bottom:0px;
  right:0px;
}

.C1Window_Vista .C1wResizer-sw
{
  bottom:0px;
  cursor:sw-resize;
  height:22px;
  left:0px;
  width:18px;
}

.C1Window_Vista .C1wResizer-ne
{
  bottom:0px;
  cursor:ne-resize;
  height:10px;
  right:0px;
  top:0px;
  width:18px;
}

.C1Window_Vista .C1wResizer-nw
{
  bottom:0px;
  cursor:nw-resize;
  height:10px;
  left:0px;
  top:0px;
  width:18px;
}

* html .C1Window_Vista .C1wResizer-sw,* html .C1Window_Vista .C1wResizer-ne,* html .C1Window_Vista .C1wResizer-nw
{
  width:6px;
  height:6px;
}
/***Modified resizer style, because handle for SE resizer is not used any more.***/



/*Caption bar*/
.C1Window_Vista .C1wHeading
{
	background: url(Images/TitleLeft_unfocused.png) no-repeat top left;
	padding: 0 0 0 20px;
	overflow: hidden;
}
* html .C1Window_Vista .C1wHeading
{
	background: url(Images/TitleLeft_unfocused.gif) no-repeat top left;
	padding: 0 0 0 8px;
	overflow: hidden;
}
.C1Window_Vista .C1wFocus .C1wHeading
{
	background: url(Images/TitleLeft.png) no-repeat top left;
	padding: 0 0 0 20px;
	overflow: hidden;
}
* html .C1Window_Vista .C1wFocus .C1wHeading
{
	background: url(Images/TitleLeft.gif) no-repeat top left;
	padding: 0 0 0 8px;
	overflow: hidden;
}
.C1Window_Vista .C1wMaximized .C1wHeading
{
	background: #203344;
	border-bottom: solid 1px #000;
	padding: 0;
	overflow: hidden;
}
* html .C1Window_Vista .C1wMaximized .C1wHeading
{
	background: #000;
	padding: 0;
	overflow: hidden;
}

.C1Window_Vista .C1wHeading .C1wOuter
{
	background: url(Images/TitleRight_unfocused.png) no-repeat top right;
	padding: 0 20px 0 0;
	overflow: hidden;
}
* html .C1Window_Vista .C1wHeading .C1wOuter
{
	background: url('Images/TitleRight_unfocused.gif') no-repeat top right;
	padding: 0 8px 0 0;
	overflow: hidden;
}
.C1Window_Vista .C1wFocus .C1wHeading .C1wOuter
{
	background: url(Images/TitleRight.png) no-repeat top right;
	padding: 0 20px 0 0;
	overflow: hidden;
}
* html .C1Window_Vista .C1wFocus .C1wHeading .C1wOuter
{
	background: url(Images/TitleRight.gif) no-repeat top right;
	padding: 0 8px 0 0;
	overflow: hidden;
}
.C1Window_Vista .C1wMaximized .C1wHeading .C1wOuter
{
	background: none;
	border-bottom: solid 1px #666;
	padding: 0;
	overflow: hidden;
}
* html .C1Window_Vista .C1wMaximized .C1wHeading .C1wOuter
{
	background: none;
	border-bottom: solid 1px #666;
	padding: 0;
	overflow: hidden;
}

.C1Window_Vista .C1wHeading .C1wInner
{
	background: url(Images/TitleCenter_unfocused.png) repeat-x top left;
	padding: 13px 0 0 0;
	height: 26px;
}
* html .C1Window_Vista .C1wHeading .C1wInner
{
	background: url(Images/TitleCenter_unfocused.gif) repeat-x top left;
	padding: 2px 0 0 0;
	height: 26px;
}
.C1Window_Vista .C1wFocus .C1wHeading .C1wInner
{
	background: url(Images/TitleCenter.png) repeat-x top left;
	padding: 13px 0 0 0;
	height: 26px;
}
* html .C1Window_Vista .C1wFocus .C1wHeading .C1wInner
{
	background: url(Images/TitleCenter.gif) repeat-x top left;
	padding: 2px 0 0 0;
	height: 26px;
}
.C1Window_Vista .C1wMaximized .C1wHeading .C1wInner
{
	background: none;
	padding: 0;
	height: 22px;
}
* html .C1Window_Vista .C1wMaximized .C1wHeading .C1wInner
{
	background: none;
	padding: 0;
	height: 22px;
}

.C1Window_Vista .C1wClosed .C1wHeading .C1wInner, 
.C1Window_Vista .C1wMinimized .C1wHeading .C1wInner
{
	height: 22px;
}
* html .C1Window_Vista .C1wClosed .C1wHeading .C1wInner, 
* html .C1Window_Vista .C1wMinimized .C1wHeading .C1wInner
{
	height: 20px;
}

.C1Window_Vista .C1wHeading .C1wContent
{
	background: url(Images/TitleTextLeft_unfocused.png) no-repeat center left;
	line-height: normal;
	height: 26px;
	line-height: 26px;
	padding:0 0 0 12px;
	vertical-align: middle;
}
* html .C1Window_Vista .C1wHeading .C1wContent
{
	background: url(Images/TitleTextLeft_unfocused.gif) no-repeat center left;
	line-height: normal;
	height: 26px;
	line-height: 26px;
	padding:0 0 0 11px;
	vertical-align: middle;
}
.C1Window_Vista .C1wFocus .C1wHeading .C1wContent
{
	background: url(Images/TitleTextLeft.png) no-repeat center left;
	line-height: normal;
	height: 26px;
	line-height: 26px;
	padding:0 0 0 12px;
	vertical-align: middle;
}
* html .C1Window_Vista .C1wFocus .C1wHeading .C1wContent
{
	background: url(Images/TitleTextLeft.gif) no-repeat center left;
	line-height: normal;
	height: 26px;
	line-height: 26px;
	padding:0 0 0 11px;
	vertical-align: middle;
}
.C1Window_Vista .C1wMaximized .C1wHeading .C1wContent
{
	background: none;
	line-height: normal;
	height: 18px;
	line-height: 18px;
	padding:0;
	vertical-align: middle;
}
* html .C1Window_Vista .C1wMaximized .C1wHeading .C1wContent
{
	background: none;
	line-height: normal;
	height: 18px;
	line-height: 18px;
	padding:0;
	vertical-align: middle;
}


/*Maximized*/
.C1Window_Vista .C1wHeading .C1wContent
{
	background: url(Images/TitleTextLeft_unfocused.png) no-repeat center left;
	line-height: normal;
	height: 26px;
	line-height: 26px;
	padding:0 0 0 12px;
	vertical-align: middle;
}
* html .C1Window_Vista .C1wHeading .C1wContent
{
	background: url(Images/TitleTextLeft_unfocused.gif) no-repeat center left;
	line-height: normal;
	height: 26px;
	line-height: 26px;
	padding:0 0 0 11px;
	vertical-align: middle;
}
.C1Window_Vista .C1wFocus .C1wHeading .C1wContent
{
	background: url(Images/TitleTextLeft.png) no-repeat center left;
	line-height: normal;
	height: 26px;
	line-height: 26px;
	padding:0 0 0 12px;
	vertical-align: middle;
}
* html .C1Window_Vista .C1wFocus .C1wHeading .C1wContent
{
	background: url(Images/TitleTextLeft.gif) no-repeat center left;
	line-height: normal;
	height: 26px;
	line-height: 26px;
	padding:0 0 0 11px;
	vertical-align: middle;
}
.C1Window_Vista .C1wMaximized .C1wHeading .C1wContent
{
	background: none;
	line-height: normal;
	height: 18px;
	line-height: 18px;
	padding:0;
	vertical-align: middle;
}
* html .C1Window_Vista .C1wMaximized .C1wHeading .C1wContent
{
	background: none;
	line-height: normal;
	height: 18px;
	line-height: 18px;
	padding:0;
	vertical-align: middle;
}

/*Caption Text*/
.C1Window_Vista .C1wHeading .C1wTextNode
{
	float: left;
	background: url(Images/TitleTextRight_unfocused.png) no-repeat center right;
	padding:0 12px 0 0;
	color:#333;
}
* html .C1Window_Vista .C1wHeading .C1wTextNode
{
	float: left;
	background: url(Images/TitleTextRight_unfocused.gif) no-repeat center right;
	padding:0 12px 0 0;
	color:#333;
}
.C1Window_Vista .C1wFocus .C1wHeading .C1wTextNode
{
	float: left;
	background: url(Images/TitleTextRight.png) no-repeat center right;
	padding:0 12px 0 0;
	color:#000;
}
* html .C1Window_Vista .C1wFocus .C1wHeading .C1wTextNode
{
	float: left;
	background: url(Images/TitleTextRight.gif) no-repeat center right;
	padding:0 12px 0 0;
	color:#000;
}
.C1Window_Vista .C1wMaximized .C1wHeading .C1wTextNode
{
	float: left;
	background: none;
	padding:0 0 0 4px;
	color:#fff;
}
* html .C1Window_Vista .C1wMaximized .C1wHeading .C1wTextNode
{
	float: left;
	background: none;
	padding:0;
	color:#fff;
}

/*Caption Icon*/
.C1Window_Vista .C1wHeading .C1wIcon
{
	float: left;
}

/*--------------------------------------------------------------------------------------------------------------Caption buttons*/
.C1Window_Vista .C1wControlBox
{
  float:right;
  cursor: pointer;
  margin-top: 0px;
}

.C1Window_Vista .C1wControlBox .C1wListItem
{
  float: left;
  height:25px;
}

/*-------CLOSER-------*/
.C1Window_Vista .C1wCloser
{
  background: url(Images/closer.png) no-repeat bottom right;
  width:50px;
  margin:-5px 0 0 0;
}
* html .C1Window_Vista .C1wCloser
{
  background: url(Images/closer.gif) no-repeat bottom right;
  margin: -5px 0 0 0;
}

.C1Window_Vista .C1wFocus .C1wCloser
{
  background: url(Images/closer.png) no-repeat top left;
}
* html .C1Window_Vista .C1wFocus .C1wCloser
{
  background: url(Images/closer.gif) no-repeat top left;
}

.C1Window_Vista .C1wCloser-Hover,
.C1Window_Vista .C1wFocus .C1wCloser-Hover
{
  background: url(Images/closer.png) no-repeat top right;
}
* html .C1Window_Vista .C1wCloser-Hover,
* html .C1Window_Vista .C1wFocus .C1wCloser-Hover
{
  background: url(Images/closer.gif) no-repeat top right;
}

.C1Window_Vista .C1wCloser-Active,
.C1Window_Vista .C1wFocus .C1wCloser-Active
{
  background: url(Images/closer.png) no-repeat center left;
}
* html .C1Window_Vista .C1wCloser-Active,
* html .C1Window_Vista .C1wFocus .C1wCloser-Active
{
  background: url(Images/closer.gif) no-repeat center left;
}

/*------------------------------------------------ CLOSE SINGLE --- */

.C1Window_Vista .C1wFirstItem .C1wCloser
{
	background: url(Images/closesingle.png) no-repeat bottom right;
	width:50px;
	height:25px;
	margin:-5px -4px 0 0;
}
* html .C1Window_Vista .C1wFirstItem .C1wCloser
{
	background: url(Images/closesingle.gif) no-repeat bottom right;
	width:50px;
	height:25px;
	margin:-5px -4px 0 0;