/*
 * boohee's can.css
 * by hulala
 * 2010.04.20
 */

/*----- common -----*/
.can-wrap{
  	height:520px;
  	background:url(/images/can/bg0.gif) no-repeat 0 0;
	}
.can{
	padding:10px;
	color:#666;
}

.can a{
	color:#666;
	}
.can a:hover{
	color:#39E;
}

.can select{
	height:21px;
}

/*----- background-image -----*/
.can .pop-panel .panel-head,
.can .pop-panel .panel-foot,
.can .pop-panel .panel-head span,
.can .pop-panel .panel-foot span,

.can .can-tab a,
.can .can-menu-wrap,

.can .search-bar .textbox,
.can .search-bar .button,

.can .can-menu .item-list-wrap,
.can .can-menu .item-list .intr .fav,
.can .can-menu .item-list .intr .delete,
.can .can-menu .item-list .intr .diy,
.can .can-menu .item-list .oper .add,

.can .pop-oper .plus,
.can .pop-oper .reduce,

.can .can-record-tab a,
.can .food-record-wrap,
.can .sport-record-wrap,

.can .can-record .food-progress,
.can .can-record .sport-progress,
.can .can-record .record-title,
.can .can-record .record-title .toggle,
.can .can-record td.unit .unit-box,
.can .can-record td.delete a,

.can .can-result{
	background:url(/images/can/icon-m1.gif) no-repeat;
}

/*----- pop-panel -----*/
.can .pop-panel .panel-head,
.can .pop-panel .panel-foot,
.can .pop-panel .panel-head span,
.can .pop-panel .panel-foot span{
	display:block;
	overflow:hidden;
	height:5px;
	}
.can .pop-panel .panel-head,
.can .pop-panel .panel-foot{
	padding-left:5px;
	}
.can .pop-panel .panel-head{
	background-position:-310px -60px;
	}
.can .pop-panel .panel-foot{
	background-position:-310px -70px;
	}
.can .pop-panel .panel-head span{
	background-position:100% -65px;
	}
.can .pop-panel .panel-foot span{
	background-position:100% -75px;
	}
.can .pop-panel .panel-body{
	line-height:2;
	padding:0 10px;
	border-left:1px solid #f7d0f7;
	border-right:1px solid #f7d0f7;
	background:#fff2f8;
}

/*----- column -----*/
.can .main-column{
	float:left;
  	width:590px;
  	}
.can .sub-column{
	float:right;
  	width:300px;
}

/*----- can-tab -----*/
.can .can-tab{
	height:30px;
	}
.can .can-tab li,
.can .can-tab a{
	float:left;
	width:69px;
	height:30px;
	line-height:30px;
	}
.can .can-tab li{
	position:relative;
	}
.can .can-tab li.meal1,
.can .can-tab li.meal1 a,
.can .can-tab li.sport,
.can .can-tab li.sport a,
.can .can-tab li.latest,
.can .can-tab li.latest a{
	width:70px;
	}
.can .can-tab li.sport{
	margin-left:10px;
	}
.can .can-tab li.latest{
	float:right;
	}
.can .can-tab li.meal1 a{
	background-position:0 0;
	}
.can .can-tab li.meal6 a{
	background-position:-1px 0;
	}
.can .can-tab li.meal2 a,
.can .can-tab li.meal7 a{
	background-position:-71px 0;
	}
.can .can-tab li.meal3 a,
.can .can-tab li.meal8 a{
	background-position:-141px 0;
	}
.can .can-tab li.sport a{
	background-position:-210px 0;
	}
.can .can-tab li.latest a{
	background-position:-280px 0;
	}
.can .can-tab li a:hover,
.can .can-tab li a.current{
	position:absolute;
	left:0;
	top:0;
	height:31px;
	font-weight:bold;
	color:#666;
	background-position:100% 0;
}


/*---------- can-menu-wrap ----------*/
.can .can-menu-wrap{
	height:470px;
	background-position:0 100%;
	}
.can .can-menu{
	height:400px;
	padding-left:15px;
}

/*----- green-bar -----*/
.can .green-bar{
	height:28px;
	line-height:23px;
	padding:13px 20px 0;
}

.can .green-bar .can-menu-tab .current{
	font-weight:bold;
}

.can .search-bar{
	height:21px;
	}
.can .search-bar .textbox{
	width:160px;
	padding:0 10px;
	height:21px;
	line-height:21px;
	border:0;
	background-position:0 -215px;
	}
.can .search-bar .textbox:hover{
	background-position:0 -236px;
	}
.can .search-bar .button{
	width:30px;
	height:21px;
	border:0;
	cursor:pointer;
	background-position:-180px -215px;
	}
.can .search-bar .button:hover{
	background-position:-180px -236px;
}

.can .green-bar .drop-menu-wrap{
	overflow:auto;
	position:relative;
	z-index:2;
	}
.can .green-bar .drop-menu{
	position:absolute;
	left:0;
	top:15px;
	width:80px;
	padding:5px 10px;
	border:1px solid #CCC;
	white-space:nowrap;
	background:#FFF;
}

/*----- item-list -----*/
.can .can-menu .item-list-wrap{
	float:left;
	width:270px;
	height:60px;
	padding:5px;
	margin:0 5px 10px 0;
	background-position:0 -290px;
	}
.can .can-menu .item-list-wrap:hover,
.can .can-menu .item-list-wrap.hover{
	background-position:-280px -290px;
	}
.can .can-menu .item-list{
	width:260px;
	height:40px;
	padding:10px 0 10px 10px;
}

.can .can-menu .item-list .illus{
	overflow:hidden;
	float:left;
	width:40px;
	height:40px;
	margin-right:10px;
}

.can .can-menu .item-list .intr{
	position:relative;
	z-index:0;
	float:left;
	width:135px;
	line-height:20px;
	}
.can .can-menu .item-list-wrap:hover .intr,
.can .can-menu .item-list-wrap.hover .intr{
	z-index:1;
	}
.can .can-menu .item-list .intr dt,
.can .can-menu .item-list .intr dd{
	height:20px;
	}
.can .can-menu .item-list .intr .fav,
.can .can-menu .item-list .intr .delete,
.can .can-menu .item-list .intr .diy{
	width:20px;
	height:20px;
	margin-left:5px;
	background-position:-125px -265px;
	}
.can .can-menu .item-list .intr .fav:hover{
	background-position:-145px -265px;
	}
.can .can-menu .item-list .intr .delete{
	background-position:-397px -215px;
	}
.can .can-menu .item-list .intr .delete:hover{
	background-position:-397px -235px;
	}
.can .can-menu .item-list .intr .diy{
	background-position:-305px -215px;
	}
.can .can-menu .item-list .intr .diy:hover{
	background-position:-305px -235px;
	}
.can .can-menu .item-list .intr .pop-intr{
	display:none;
	position:absolute;
	left:0;
	top:20px;
	width:135px;
	}
.can .can-menu .item-list .intr.intr-hover .pop-intr{
	display:block;
}

.can .can-menu .item-list .oper{
	position:relative;
	z-index:0;
	float:right;
	width:45px;
	padding:10px 5px 0 0;
	height:20px;
	}
.can .can-menu .item-list-wrap:hover .oper,
.can .can-menu .item-list-wrap.hover .oper{
	z-index:1;
	}
.can .can-menu .item-list .oper .add{
	display:block;
	width:45px;
	height:20px;
	background-position:0 -265px;
	}
.can .can-menu .item-list .oper .add:hover{
	background-position:-50px -265px;
	}
.can .can-menu .item-list .oper .pop-add{
	display:none;
	position:absolute;
	right:10px;
	top:30px;
	width:135px;
	}
.can .can-menu .item-list .oper.add-hover .pop-add{
	display:block;
	}
.can .can-menu .item-list .oper .pop-add a{
	display:block;
}


.can .pop-oper{
	display:none;
	position:absolute;
	z-index:1;
	}
.can .pop-oper .plus,
.can .pop-oper .reduce{
	display:inline-block;
	width:20px;
	height:20px;
	background-position:-165px -265px;
	}
.can .pop-oper .plus:hover{
	background-position:-185px -265px;
	}
.can .pop-oper .reduce{
	background-position:-205px -265px;
	}
.can .pop-oper .reduce:hover{
	background-position:-225px -265px;
	}
.can .can-menu .pop-oper{
	top:50px;
	left:60px;
	width:200px;
}

/*----- record-list -----*/
.can .can-menu .record-list-wrap{
	float:left;
	width:270px;
	height:85px;
	padding:5px;
	margin:0 5px 10px 0;
	background:url(/images/can/record-list-bg.gif) no-repeat 0 0;
	}
.can .can-menu .record-list-wrap:hover{
	background-position:0 100%;
	}
.can .can-menu .record-list{
	width:260px;
	height:75px;
	padding:5px 0 5px 10px;
	}
.can .can-menu .record-list .intr{
	float:left;
	width:200px;
	line-height:25px;
	}
.can .can-menu .record-list .add{
	float:right;
	width:60px;
	height:75px;
}

/*----- can-record-tab -----*/
.can .can-record-tab{
	height:30px;
	}
.can .can-record-tab li,
.can .can-record-tab a{
	width:110px;
	height:30px;
	}
.can .can-record-tab li{
	position:relative;
	z-index:10;
	}
.can .can-record-tab a{
	display:block;
	opacity:0.4;
	filter:alpha(opacity=40);
	}
.can .can-record-tab a.food-tab{
	background-position:0 -35px;
	}
.can .can-record-tab a.sport-tab{
	background-position:-110px -35px;
	}
.can .can-record-tab a:hover,
.can .can-record-tab a.current{
	position:absolute;
	left:0;
	top:0;
	height:31px;
	opacity:1;
	filter:alpha(opacity=100);
}

/*----- can-record -----*/
.can .can-record{
	position:relative;
	height:390px;
	margin-bottom:10px;
}

.can .food-record-wrap,
.can .sport-record-wrap{
	position:absolute;
	top:0;
	left:0;
	z-index:0;
	width:280px;
	height:390px;
	opacity:0.4;
	filter:alpha(opacity=40);
	}
.can .food-record-wrap.upper,
.can .sport-record-wrap.upper{
	z-index:1;
	opacity:1;
	filter:alpha(opacity=100);
	}
.can .food-record-wrap{
	padding:1px 1px 0 10px;
	background-position:-9px -365px;
	}
.can .sport-record-wrap{
	left:9px;
	padding:1px 10px 0 1px;
	background-position:-300px -365px;
	}
.can .food-record,
.can .sport-record{
	height:388px;
	background:#FFF;
}

.can .can-record .food-progress,
.can .can-record .sport-progress{
	position:absolute;
	top:0;
	width:9px;
	}
.can .can-record .food-progress{
	left:1px;
	background-position:0 -365px;
	}
.can .can-record .sport-progress{
	left:281px;
	background-position:-591px -365px;
}

.can .can-record .record-title{
	height:31px;
	line-height:30px;
	padding-left:10px;
	cursor:pointer;
	font-size:14px;
	}
.can .can-record .record-title.meal1,
.can .can-record .record-title.meal6{
	background-position:0 -85px;
	}
.can .can-record .record-title.meal2,
.can .can-record .record-title.meal7{
	background-position:0 -116px;
	}
.can .can-record .record-title.meal3,
.can .can-record .record-title.meal8{
	background-position:0 -147px;
	}
.can .can-record .record-title .toggle{
	width:30px;
	height:30px;
	background-position:100% -215px;
}

.can .can-record .record-body{
	display:none;
	* height:181px;
	padding:10px 0;
	border-top:1px solid #CCC;
	margin:0 10px;
}

.can .can-record .record-panel.current,
.can .can-record .record-panel.sport-current{
	overflow:auto;
	height:233px;
	}
.can .can-record .record-panel.sport-current{
	height:350px;
	}
.can .can-record .record-panel.current .record-title,
.can .can-record .record-panel.sport-current .record-title{
	background-position:0 -178px;
	}
.can .can-record .record-panel.current .record-title .toggle,
.can .can-record .record-panel.sport-current .record-title .toggle{
	background:none;
	}
.can .can-record .record-panel.current .record-body,
.can .can-record .record-panel.sport-current .record-body{
	display:block;
}

/*----- can-record table -----*/
.can .can-record td{
	line-height:21px;
}

.can .can-record td.name,
.can .can-record td.name div{
	width:70px;
	}
.can .can-record td.name{
	padding-right:10px;
}

.can .can-record td.unit,
.can .can-record td.unit .unit-box,
.can .can-record td.unit .unit-box span{
	width:55px;
	}
.can .can-record td.unit .unit-box,
.can .can-record td.unit .unit-box span{
	display:block;
	}
.can .can-record td.unit .unit-box{
	height:21px;
	padding-right:20px;
	background-position:-250px -215px;
	}
.can .can-record td.unit .unit-box:hover{
	background-position:-250px -235px;
}

.can .can-record td.cal,
.can .can-record td.cal div{
	width:60px;
}

.can .can-record td.delete,
.can .can-record td.delete a{
	width:20px;
	}
.can .can-record td.delete a{
	display:block;
	height:21px;
	background-position:-390px -215px;
	}
.can .can-record td.delete a:hover{
	background-position:-390px -235px;
}

.can .can-record .pop-oper{
	width:170px;
}

/*----- can-result -----*/
.can .can-result{
	height:50px;
	padding:10px 15px;
	background-position:0 -765px;
	}
.can .can-result .sum{
	width:165px;
	line-height:20px;
	}
.can .can-result .oper{
	width:80px;
	padding-top:2px;
}

/*----- can-upload -----*/
.can .can-upload{
	margin:20px 20px 0;
	}
.can .can-upload .width1{
  	width:200px;
  	}
.can .can-upload .width2{
  	width:100px;
	}
.can .can-upload ul{
	padding-left:10px;
	}
.can .can-upload li{
	margin-bottom:15px;
}

/*----- other -----*/
.can .store-menu-wrap{
	height:468px;
	border:1px solid #CCC;
	background:#FFF;
	}
.can .store-record-wrap{
	height:408px;
	padding:9px;
	border:1px solid #CCC;
	margin-bottom:15px;
	background:#FFF;
	}
.can .store-record{
	overflow:auto;
	height:405px;
	}
.can .store-record table{
	width:auto;
	}
.can .store-record td{
	line-height:21px;
	padding:0;
	}
.can .store-record td.name,
.can .store-record td.name div{
	width:85px;
	}
.can .store-record td.name{
	padding-right:10px;
}

.can .store-record td.unit,
.can .store-record td.unit .unit-box{
	width:60px;
	}
.can .store-record td.unit .unit-box{
	display:block;
	height:21px;
	padding-right:20px;
	background:url(/images/can/edit-m1.gif) no-repeat 100% 0;
	}
.can .store-record td.unit .unit-box:hover{
	background-position:100% 100%;
	}
.can .store-record td.unit .unit-box span{
	display:block;
	width:50px;
	}
.can .store-record .unit-box-wrap{
	position:relative;
	height:21px;
	}
.can .store-record .unit-box-wrap .show{
	position:absolute;
	top:0;
	left:0;
	width:80px;
	padding:5px;
	background:#EFD;
}

.can .store-record td.cal,
.can .store-record td.cal div{
	width:60px;
}

.can .store-record td.delete,
.can .store-record td.delete a,
.can .store-record td.edit,
.can .store-record td.edit a{
	width:20px;
	}
.can .store-record td.delete a,
.can .store-record td.edit a{
	display:block;
	height:21px;
	background:url(/images/can/delete-m1.gif) no-repeat 100% 0;
	}
.can .store-record td.edit a{
	background-image:url(/images/can/edit-m1.gif);
	}
.can .store-record td.delete a:hover,
.can .store-record td.edit a:hover{
	background-position:100% 100%;
}