Sample CSS

/*
  *This CSS File is about the sample main page css
  *
  */
.mainbody{ /* the style for document body element */
        background-color:#FFFFFF;
        font-family: Arial,"宋体";
        font-size: 12px;
        margin:0;
        padding:0;
}

/*************************************About Head********************************************/
#top{ /* the top area style in the page*/
	background-image:url(images/top-bg.jpg);
	background-repeat: repeat-x;
	height: 143px;
	overflow: hidden;
	z-index: 2;
}

#top-left{ /* the left area of top area in the document body */
	background-image:url(images/top-banner.jpg);
	background-repeat: no repeat;
	height: 143px;
	width: 545px;
	float: left;
	z-index: 2;
}

#top-right{ /* the ridget area of top area in the document body */
	background-image:url(images/top-right.jpg);
	background-repeat: no repeat;
	height: 143px;
	width: 14px;
	float: right;
	z-index: 2;
}

/*******************************************About the body***********************************/
#maintable{ /* style of the content area style below the top area */
	width:100%;
}

#tabbg{  /* style of dom element 'tabbg' , used for toolbar on the top of the content area */
	background: #28609a;
	height: 20px;
	width:100%;
	color:#FFF;
	text-align:right;
}

#tabbg a { /* style of hyper link in element with id 'tabbg' */
  color: #FFF;
  text-decoration: none;
}

#tabbg a:hover { /* hover style of hyper link in element with id 'tabbg' */
  color: #91c8f4;
  text-decoration: none;
}

#divtabbg{ /* style for the background of the container dom element for ' Tab-Index' item */
	background: #4b86c4 url(image/tab-bg.jpg) repeat-x;
	height: 35px;
	width:100%;
	color:#FFF;
	text-align:right;
}

#divLeft{  /* style for the left area of the element with id 'divtabbg' */
	display:block;
	float:left;
	margin-top:10px;
	postion:absolute;
	left:0;
	top:163px;
}

#bttTab { /* style of dom element  for the 'Tab-index' item  */
	background:#4b86c4 url(images/tab/tab-bg.jpg) repeat-x;
	height:35px;
	postion:absolute;
	left:0;
	top:163px;
}

#selectLang{ /* style of the select combobox for selecting Language */
  display:block;
  float:left;
  left:0;
  margin-top:10px;
  margin-left:10px;
  top:163px;
}

#welcome{  /* style of the welcome element */
  padding:0px 10px 0px 10px;
}

#maincont{ /* style of the main area for Workplace area */
  background:#FFF; 
  width: 100%; 
  margin:0; 
  padding:0; 
  height:100%
}

#bttContainer{ /* style of the container for 'Tab-content ' item */
	border:0;
	background:#FFF;
}

.navtog{  /* style for panel of service list */
	width:230px;
}
.nav-1 /* style for the wrap panel of service list panel */
{
	width:217px; 
	float:left;
	border-right: 1px solid #FFF;
	border-top: 1px solid #FFF;
	background:#e0eefb url(images/nav-bg-x.jpg) repeat-y top right;
	overflow:hidden;
}

.nav-1 ul  
{ /* style of ul element is the wrap panel of service list panel */	
	list-style:none;
	display:block;	
}

.nav-2  /* style of the inner panel of service list panel
{
	width:228px;
	border-right: 1px solid #9ac6f3;
	border-bottom: 1px solid #9ac6f3;
	background:#9ac6f3;
	overflow:hidden;
}

#nav-handler{ /* the style for the nav toggle button */
	width:8px; 
	float:right;
}

#footer{ /* the style for the bottom document body */
	text-align:center; 
  font-size:9px; 
  padding-top:20px; 
  width:100%; 
  clear:both;
}