#desktop {
	position:absolute;
	left:0px;
	top:0px;
}

#desktop div {
	margin:0px;
}

#desktop .wrap {
	position:absolute;
	left:10px;
	top:130px;
}

#desktop .hidden {
	display:none;
}

#desktop .min {
	background:none;
	border:0px;
}

#desktop .preload {
	width:0px;
	height:0px;
	font-size:0pt;
	line-height:0px;
	display:none;
}
/*
	start style
*/

#desktop .start {
	margin:0px;
	position:relative;
	z-index:999;
	top:20px;
	width:31px;
	height:31px;
	padding:4px;
	cursor:pointer;
	background:url(images/logo_bg_1.gif) no-repeat scroll 0 0;
}

/*
	box style
*/
#desktop .box {
	position:relative;
	padding:10px;
	padding-right:0px;
	border:1px solid #909090;
	background-color:#e0e0e0;
	opacity:0.95;
	filter:alpha(opacity=95);
	left:0px;
	top:-40px;
	overflow:hidden;
}

#desktop .desktop .title {
	height:60px;
	opacity:0.9;
	filter:alpha(opacity=90);
}

#desktop .first {
	width:205px;
	height:122px;
	background:url(images/first.gif) no-repeat scroll 0 0;
	position:relative;
}

#desktop .first a{
	position:relative;
	left:60px;
	top:85px;
}

/*
	desktop style
*/
#desktop .desktop {
	float:left;
	overflow:hidden;
}

#desktop .desktop .title .user {
	float:left;
	margin-left:60px !important;
	margin-left:30px;
	margin-top:10px;
	width:70px;
	height:40px;
	overflow:hidden;	
}

#desktop .desktop .title .user div {
	color:#fff;
	font-size:13px;
	font-weight:bold;
	width:80px;
	height:20px;
	line-height:20px;
	overflow:hidden;
}

#desktop .yellow-desktop .title .user div {
	color:#000;
}

#desktop .desktop .title ul.action {
	float:left;
	list-style:none;
	left:0px;
	padding:0px;
	height:60px;
	overflow:visible;	
}

#desktop .desktop .title ul.action li {
	float:left;
	margin:3px 2px 2px 0px;
	width:50px;
	height:60px;
	cursor:pointer;
	overflow:visible;
}

#desktop .desktop .title ul.action li span {
	margin-top:34px;
	display:block;
	width:50px;
	text-align:center;
}

#desktop .desktop .title ul.button {
	float:right;
	margin-right:1px;
	margin-top:2px;
	cursor:pointer;
}

#desktop .desktop .title ul.button li {
	width:14px;
	height:14px;
}

#desktop .desktop .title ul.button li.close {
	background:url(images/close_b.gif) no-repeat scroll 0 0;
}


#desktop .desktop .grid {
	position:relative;
	opacity:0.85;
	filter:alpha(opacity=85);
	overflow-x:hidden;
	overflow-y:auto;
}

#desktop .desktop .grid .item {
	width:68px;
	height:100px;
	margin:2px 7px;
	cursor:pointer;
	overflow:visible !important;
	overflow:hidden;	
	float:left;
}

#desktop .desktop .grid .item .bg {
	position:relative;
	left:0px;
	top:8px;
	width:60px;
	height:100px;
	background:url(images/grid_bg_1.gif) no-repeat scroll 0 -60px;
}

#desktop .desktop .grid .item-hover .bg {
	background-position:0 0;
}

#desktop .desktop .grid .item .bg .action {
	position:relative;
	left:54px;
	top:-8px;
	visibility:hidden;
}

#desktop .desktop .grid .item-hover .bg .action {
	visibility:visible;
}

#desktop .desktop .grid .item .bg .icon {
	position:relative;
	margin:0px;
	top:-8px;
	left:7px;
	width:48px;
	height:48px;
}

#desktop .desktop .grid .item .bg .name {
	width:60px;	
	height:30px;
	overflow:hidden;	
	text-align:center;
	z-index:9999;
}

#desktop .desktop .grid .item-hover .bg .name {
	overflow:visible;
}

#desktop .desktop .grid .item .bg .name a {
	color:#fff;
	text-decoration:none;
}

#desktop .desktop .grid .item .bg .name a:hover {
	color:#fff;
	background-color:#000;
	text-decoration:underline;
}

#desktop .desktop .tips {
	height:20px;
	line-height:20px;
	text-align:center;
	color:#fff;
	font-weight:bold;
	opacity:0.85;
	filter:alpha(opacity=85);
	overflow:hidden;
}

#desktop .desktop .loading {
	position:relative;
	background-color:#000;
	opacity:0.9;
	filter:alpha(opacity=90);
}

#desktop .desktop .loading img {
	position:relative;
}

/*
	switch style
*/

#desktop .switch {
	width:10px !important;
	width:8px;
	float:left;
	background:url(images/arrow.gif) no-repeat scroll center;
	cursor:pointer;
}

#destkop .max .swtich .swtich
#desktop .switch-off {
	background-image:url(images/arrow.gif);
}

#destkop .max-sidebar .swtich,
#desktop .switch-on {
	background-image:url(images/arrow_act.gif);
}

/*
	sidebar style
*/
#desktop .sidebar {
	float:left;
	border:1px solid #fff;
	border-left:0px;	
	width:99px;
	background-color:#fff;
	opacity:0.9;
	filter:alpha(opacity=90);
	overflow:hidden;
}

#desktop .sidebar .header {
	width:99px;
	height:60px;
}

#desktop .sidebar .header .title {
	margin:auto;
	width:89px;
	height:28px;
	line-height:28px;
	text-align:center;
	background:url(images/bg_title.gif) no-repeat 0 -84px;
	font-size:13px;
	color:#2A7A31;
}

#desktop .sidebar .fav {
	width:99px;
	overflow-y:auto;
}

#desktop .sidebar .fav .item {
	margin:auto;
	width:60px;
	height:32px;
	margin:auto;
	margin-top:10px;
	margin-bottom:10px;
}

#desktop .sidebar .fav .item .icon {
	float:left;
	margin-right:10px;
}

#desktop .sidebar .fav .item .action {
	float:left;
	width:16px;
}

#desktop .sidebar .fav .item .action ul li {
	cursor:pointer;
}

#desktop .sidebar .loading {
	position:relative;
	width:99px;
	left:0px;
	background-color:#fff;
	opacity:0.9;
	filter:alpha(opacity=90);	
}

#desktop .sidebar  .loading img{
	position:relative;
}

/*
	float-tips style
*/
#desktop .float-tips {
	position:relative;
	top:-20px;
	width:180px;
	display:none;
}

#desktop .max .float-tips,
	#desktop .max-sidebar .float-tips {
	display:none !important;
}

#desktop .float-tips .indi {
	position:relative;
	float:left;
	width:7px;
	left:0px;
	top:5px;
	z-index:999;
}

#desktop .float-tips .content {
	position:relative;
	float:left;
	left:-1px;
	top:0px;
	border:1px solid #CECCC5;
	background-color:#FEFDE0;
	padding:2px 5px;
	font-size:10pt;
	font-weight:bold;
	line-height:20px;
	width:160px;
}

/*
	change list
*/
/* desktop display: 1. float, 2.attach */

/*float*/
.desktop-float .min .start,
	#desktop .max .start,
	#desktop .max-sidebar .start {
	left:20px;
}

.desktop-float .min .float-tips {
	left:70px;
}

/*attach*/
.desktop-attach .min .start {
	left:-40px;
}

.desktop-attach .min .start img {
	display:none;
}

.desktop-attach .min .float-tips {
	left:10px;
}

/* desktop state: 1. min, 2. max, 3. max-sidebar*/

/*min*/
#desktop .min .start {
	background-image:url(images/logo_bg_1.gif);
}

#desktop .min .box {
	display:none;
	width:50px;
	height:50px;
}

/*max*/
#desktop .max .box {
	overflow:hidden;
}

#desktop .max .small-box {
 	width:280px !important;
	width:291px;
	height:400px;

}

#desktop .max .big-box {
	width:440px !important;
	width:451px;
	height:610px;
}

/*max-sidebar*/
#desktop .max-sidebar .start,
	#desktop .max .start {
	background-image:url(images/logo_bg.gif);
}


#desktop .max .sidebar,
	#desktop .min .sidebar{
	display:none;
}


#desktop .max-sidebar .box {
	overflow:visible;
}

#desktop .max-sidebar .small-box {
 	width:380px !important;
	width:390px;
	height:400px;

}

#desktop .max-sidebar .big-box {
	width:540px !important;
	width:550px;
	height:610px;
}

#desktop .max-sidebar .sidebar {
	display:block;
}

/* box size: 1. small-box 2. big-box*/
/*small-box*/
#desktop .small-box .desktop,
#desktop .small-box .desktop .title,
#desktop .small-box .desktop .grid,
#desktop .small-box .desktop .tips,
#desktop .small-box .desktop .loading {
 	width:270px !important;
	width:280px;
}


#desktop .small-box .desktop {
	height:400px;
}

#desktop .small-box .first {
	left:35px;
	top:100px;
}

#desktop .small-box .desktop .grid {
	height:320px;	
}

#desktop .small-box .desktop .loading {
	top:-340px;
	height:320px;
}

#desktop .small-box .desktop .loading img {
	left:65px;
	top:160px;
}

#desktop .small-box .switch {
	height:430px;
}

#desktop .small-box .sidebar {
	height:398px;
}

#desktop .small-box .fav {
	height:338px;
}


#desktop .small-box .sidebar .loading {
	top:-340px;
	height:338px;
}


#desktop .small-box .sidebar .loading img{
	left:35px;
	top:155px;
}

/*big-box*/
#desktop .big-box .desktop,
#desktop .big-box .desktop .title,
#desktop .big-box .desktop .grid,
#desktop .big-box .desktop .tips,
#desktop .big-box .desktop .loading {
 	width:430px !important;
	width:440px;
}

#desktop .big-box .desktop {
	height:610px;
}

#desktop .big-box .first {
	left:120px;
	top:200px;
}

#desktop .big-box .desktop .grid {
	height:531px !important;
	height:530px;
}

#desktop .big-box .desktop .loading {
	top:-590px;
	height:570px;
}

#desktop .big-box .desktop .loading img {
	left:150px;
	top:255px;
}

#desktop .big-box .switch {
	height:651px !important;
	height:650px;
}

#desktop .big-box .sidebar {
	height:609px !important;
	height:608px;
} 

#desktop .big-box .fav {
	height:548px;
}


#desktop .big-box .sidebar .loading {
	top:-590px;
	height:588px;
}

#desktop .big-box .sidebar .loading img{
	left:35px;
	top:250px;
}


/* desktop color: 1. black, 2.red, 3.*/
#desktop .black-desktop .title,
	#desktop .black-desktop .grid,
	#desktop .black-desktop .tips,
	#desktop .black-desktop .loading{
	background-color:#000;
}

#desktop .black-desktop .title ul.action li.more {
	background:url(images/more_b.gif) no-repeat top center;
}

#desktop .black-desktop .title ul.action li.sync {
	background:url(images/sync_b.gif) no-repeat top center;
}

#desktop .black-desktop .title ul.button li.close {
	background:url(images/close_b.gif) no-repeat;
}

#desktop .black-desktop .title ul.action li span {
	color:#fff;
}

#desktop .red-desktop .title,
	#desktop .red-desktop .grid,
	#desktop .red-desktop .tips,
	#desktop .red-desktop .loading{
	background-color:#FF6666;
}

#desktop .red-desktop .title ul.action li.more {
	background:url(images/more_r.gif) no-repeat top center;
}

#desktop .red-desktop .title ul.action li.sync {
	background:url(images/sync_r.gif) no-repeat top center;
}

#desktop .red-desktop .title ul.button li.close {
	background:url(images/close_r.gif) no-repeat;
}

#desktop .red-desktop .title ul.action li span {
	color:#fff;
}

#desktop .yellow-desktop .title,
	#desktop .yellow-desktop .grid,
	#desktop .yellow-desktop .tips,
	#desktop .yellow-desktop .loading{
	background-color:#ffff31;
}

#desktop .yellow-desktop .title ul.action li.more {
	background:url(images/more_y.gif) no-repeat top center;
}

#desktop .yellow-desktop .title ul.action li.sync {
	background:url(images/sync_y.gif) no-repeat top center;
}

#desktop .yellow-desktop .title ul.button li.close {
	background:url(images/close_y.gif) no-repeat;
}

#desktop .yellow-desktop .title ul.action li span {
	color:#000;
}

#desktop .yellow-desktop .grid .item .bg .name a,
	#desktop .yellow-desktop .tips  {
	color:#000;
}

#desktop .yellow-desktop .grid .item .bg .name a:hover {
	color:#000;
	background-color:#fff;
}

